@charset "UTF-8";

/*
==================================================

   ホームページの更新・修正サービス

==================================================
*/



/*
==================================================
  ホームページの更新・修正サービス
==================================================
*/

/* ----- 各種の更新作業をスポットで承ります ----- */
#point {

}

#point h2 {
margin: 0 0 60px;
font-size: 2.4rem;
}

#point p {
margin: 0 0 1em;
line-height: 1.8;
}
#point p:last-child {
margin: 0;
}

/* ----- サービスの特徴 ----- */
#features {
background: var(--normal-bgcol);
}

#features section {
margin: 0 0 60px;
}
#features section:last-child {
margin: 0;
}

#features h3 {
position: relative;
margin: 0 0 20px 50px;
padding: 11px 20px 8px 60px;
background: var(--accent6-col);
border-radius: 3px;
font-size: 1.5rem;
color: #ffffff;
line-height: 1.4;
}
#features h3::before {
content: '';
position: absolute;
top: -15px;
left: -40px;
display: block;
width: 80px;
height: 80px;
border: 3px var(--accent6-col) solid;
border-radius: 50%;
z-index: 1;
}
#features section.feature1 h3::before {
background: #ffffff url('../../modify/image/feature_1.svg') no-repeat center / 35px;
}
#features section.feature2 h3::before {
background: #ffffff url('../../modify/image/feature_2.svg') no-repeat center / 35px;
}
#features section.feature3 h3::before {
background: #ffffff url('../../modify/image/feature_3.svg') no-repeat center / 21px;
}
#features section.feature4 h3::before {
background: #ffffff url('../../modify/image/feature_4.svg') no-repeat center / 27px;
}
#features section.feature5 h3::before {
background: #ffffff url('../../modify/image/feature_5.svg') no-repeat center / 29px;
}
#features section.feature6 h3::before {
background: #ffffff url('../../modify/image/feature_6.svg') no-repeat center / 32px;
}

#features section p {
margin: 0 0 0 70px;
line-height: 1.8;
}

/* ----- 対応可能な作業の例 ----- */
#services {

}

#services section {
margin: 0 0 30px;
padding: 40px 35px;
background: var(--normal-bgcol);
border-radius: 10px;
}

#services h3 {
margin: 0 0 30px;
padding: 2px 0 0 10px;
border-left: 5px var(--accent2-col) solid;
font-size: 1.6rem;
line-height: 1.4;
}

#services section ul {
display: flex;
flex-wrap: wrap;
gap: 15px 5px;
}
#services section ul li {
width: 16em;
max-width: 310px;
}

#services div.note {
margin: 40px 0 0;
}
#services div.note p {
margin: 0 0 15px;
line-height: 1.6;
}
#services div.note ul li {
margin: 0 0 3px;
line-height: 1.4;
}
#services div.note ul li:last-child {
margin: 0;
}

/* ----- 作業料金の目安 ----- */
#price {
background: var(--normal-bgcol);
}

#price div.wrap {
margin: 0 auto 60px;
}

#price table {
margin: 0 0 50px;
}
#price table colgroup.item {
width: 16em;
}
#price table colgroup.price {
width: 12em;
}

#price p {
margin: 0 0 1em;
line-height: 1.8;
}

#price ul li {
margin: 0 0 3px;
line-height: 1.4;
}
#price ul li:last-child {
margin: 0;
}

#price p.note {
text-align: center;
line-height: 1.8;
}

#price div.btn {
width: 20rem;
margin: 20px auto 0;
}

/* ----- 更新・修正の流れ ----- */
#flow {

}

#flow ol {

}
#flow ol li {
position: relative;
margin: 0 0 0 42px;
padding: 0 0 50px;
border-left: 6px #c0c0c0 dotted;
}
#flow ol li:last-child {
padding: 0;
border-left-color: transparent;
}
#flow ol li div {
position: absolute;
top: 0;
left: -49px;
width: 90px;
height: 90px;
padding: 14px 0 0;
background: var(--accent2-col);
border: 3px #ffffff solid;
border-radius: 50%;
font-size: 14px;
color: #ffffff;
text-align: center;
text-transform: uppercase;
z-index: 1;
}
#flow ol li div span {
display: block;
margin: 2px 0 0;
font-size: 36px;
font-weight: bold;
}
#flow ol dl {
margin: 0 0 0 90px;
padding: 30px 35px;
background: var(--normal-bgcol);
border-radius: 10px;
}
#flow ol dl dt {
margin: 0 0 20px;
padding: 0 0 10px;
border-bottom: 1px var(--dark-bgcol) solid;
font-size: 1.6rem;
font-weight: bold;
line-height: 1.4;
}
#flow ol dl dd {

}
#flow ol dl dd p {
line-height: 1.8;
}

#flow div.note {
margin: 50px auto 0;
}
#flow div.note p {
line-height: 1.8;
}

#flow p.note {
margin: 60px 0 0;
text-align: center;
line-height: 1.8;
}

#flow div.btn {
width: 20rem;
margin: 20px auto 0;
}



/* ----- ★899 ----- */
@media screen and (max-width: 899px) {

/* ----- 各種の更新作業をスポットで承ります ----- */
#point h2 {
margin: 0 0 50px;
font-size: 1.4rem;
}

/* ----- サービスの特徴 ----- */
#features section {
margin: 0 0 50px;
}

#features h3 {
margin: 0 0 20px;
padding: 11px 20px 9px 50px;
font-size: 1.1rem;
line-height: 1.6;
}
#features h3::before {
top: -10px;
left: -5px;
width: 50px;
height: 50px;
}
#features section.feature1 h3::before {
background: #ffffff url('../../modify/image/feature_1.svg') no-repeat center / 21px;
}
#features section.feature2 h3::before {
background: #ffffff url('../../modify/image/feature_2.svg') no-repeat center / 22px;
}
#features section.feature3 h3::before {
background: #ffffff url('../../modify/image/feature_3.svg') no-repeat center / 14px;
}
#features section.feature4 h3::before {
background: #ffffff url('../../modify/image/feature_4.svg') no-repeat center / 19px;
}
#features section.feature5 h3::before {
background: #ffffff url('../../modify/image/feature_5.svg') no-repeat center / 19px;
}
#features section.feature6 h3::before {
background: #ffffff url('../../modify/image/feature_6.svg') no-repeat center / 21px;
}

#features section p {
margin: 0 0 8px;
}
#features section p:last-child {
margin: 0;
}

/* ----- 対応可能な作業の例 ----- */
#services section {
padding: 30px 10px;
}

#services h3 {
margin: 0 0 20px;
padding: 2px 0 0 7px;
border-left: 3px var(--accent2-col) solid;
font-size: 1.1rem;
line-height: 1.6;
}

#services div.note p {
line-height: 1.8;
}

/* ----- 作業料金の目安 ----- */
#price div.wrap {
margin: 0 auto 40px;
}

#price table {
margin: 0 0 40px;
}
#price table colgroup.item {
width: auto;
}
#price table colgroup.price {
width: auto;
}

#price p.note {
margin: 40px 0 0;
}

#price div.btn {
width: 18rem;
margin: 30px auto 0;
}

/* ----- 更新・修正の流れ ----- */
#flow ol li {
margin: 0;
padding: 0 0 35px;
border-left: none;
}

#flow ol li div {
top: -20px;
left: 3px;
width: 55px;
height: 55px;
padding: 8px 0 0;
font-size: 10px;
}
#flow ol li div span {
margin: 1px 0 0;
font-size: 20px;
}
#flow ol dl {
margin: 0;
padding: 45px 10px 25px;
}
#flow ol dl dt {
margin: 0 0 15px;
padding: 0 0 7px;
font-size: 1.1rem;
line-height: 1.6;
}

#flow div.note {
margin: 30px auto 0;
}

#flow p.note {
margin: 30px 0 0;
}

#flow div.btn {
width: 18rem;
margin: 30px auto 0;
}

}
/* ----- /899 ----- */