@charset "utf-8";
/* ------------------------------------------------------------ common */
header { background: #fff; }
header nav ul li:nth-child(4) a { border-bottom: solid 2px #000; }
/* ------------------------------------------------------------ fv */
#fv { background: url(../images/graphic/fv.jpg) no-repeat center center/cover; }
/* ------------------------------------------------------------ intro */
.intro { padding: 130px 0 150px; }
.intro .bgbox { background: url(../images/graphic/pic_01.png) no-repeat center center; }
.intro .bgbox .website { width: 540px; }
.intro .bgbox .stock_photo { width: 540px; padding: 60px 0 0; }
.intro .bgbox h3 { font-size: 26px; line-height: 40px; }
.intro .bgbox p { line-height: 34px; padding: 15px 0 0; }
.intro ul { padding: 110px 0 0; }
.intro ul li { float: left; width: 320px; margin: 0 0 40px 60px; }
.intro ul li:nth-child(3n+1) { clear: both; margin: 0; }
.intro ul li.noimage { border-top: solid 1px #B2B2B2; }
.intro ul li .textbox { padding: 16px 4px 0; }
.intro ul li .left { float: left; width: 50%; line-height: 27px; }
.intro ul li .left ul { padding: 18px 0 0; }
.intro ul li .left ul li { float: none; font-size: 12px; padding: 0 0 10px; margin: 0; }
.intro ul li .right { float: right; width: 50%; text-align: right; line-height: 18px; font-size: 12px; }
/* ------------------------------------------------------------ order_flow */
.order_flow { background: #E8EBEB; padding: 120px 0 200px; }
.order_flow h3 { color: #4D4D4D; }
.order_flow ol { padding: 90px 0 68px; }
.order_flow ol li { background: #fff; padding: 50px 90px; margin: 0 auto 40px; }
.order_flow ol li .textbox { width: 725px; padding: 0 0 0 175px; }
.order_flow ol li:nth-child(1) .textbox { background: url(../images/album/icn_08.svg) no-repeat left center; background-size: 90px auto; }
.order_flow ol li:nth-child(2) .textbox { background: url(../images/album/icn_09.svg) no-repeat left center; background-size: 90px auto;}
.order_flow ol li:nth-child(3) .textbox { background: url(../images/album/icn_10.svg) no-repeat left center; background-size: 90px auto;}
.order_flow ol li:nth-child(4) .textbox { background: url(../images/album/icn_06.svg) no-repeat left center; background-size: 90px auto;}
.order_flow ol li:nth-child(5) .textbox { background: url(../images/album/icn_07.svg) no-repeat left center; background-size: 90px auto;}
.order_flow ol li .textbox h4 { font-size: 26px; line-height: 40px; letter-spacing: 2px; }
.order_flow ol li .textbox h4 span { font-weight: bold; }
.order_flow ol li .textbox p { font-size: 14px; line-height: 26px; padding: 10px 0 0; }
/* ------------------------------------------------------------ price */
.price { padding: 120px 0 170px; }
.price h3 { padding: 0 0 75px; color: #4D4D4D; }
.price .web_design { margin: 0 auto 85px; }
.price .box { border: solid 12px #E8EBEB; padding: 45px; }
.price .box h4 { font-size: 18px; line-height: 20px; font-weight: bold; border-bottom: solid 2px #000; padding: 0 0 25px; margin: 0 auto 15px; }
.price .box dt { float: left; width: 780px; padding: 10px 0 0; margin: 0 6px 0 0; line-height: 24px; }
.price .box dd { float: left; width: 180px; padding: 10px 0 0; line-height: 24px; }
.price .caution { font-size: 14px; line-height: 30px; color: #4D4D4D; padding: 5px 0 0; }
.price .black_btn { margin: 110px auto 0; }



/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
/* ------------------------------------------------------------ common */
header nav ul li:nth-child(4) a { border-bottom: solid 2px #000; }
/* ------------------------------------------------------------ fv */
#fv { background: url(../images/graphic/fv.jpg) no-repeat center center/cover; }
/* ------------------------------------------------------------ intro */
.intro { padding: 40px 0 50px; }
.intro .bgbox { background: none; }
.intro .bgbox .website { width: 100%; }
.intro .bgbox .photo { text-align: center; padding: 30px 0; }
.intro .bgbox .stock_photo { width: 100%; padding: 0; }
.intro .bgbox h3 { font-size: 16px; line-height: 24px; letter-spacing: normal; }
.intro .bgbox p { font-size: 11px; line-height: 20px; padding: 10px 0 0; }
.intro ul { width: 100%; padding: 50px 0 0; }
.intro ul li { width: 33.333%; margin: 0 0 15px; }
.intro ul li:nth-child(3n+1) { clear: both; margin: 0; }
.intro ul li.noimage { }
.intro ul li img { width: 100%; height: auto; }
.intro ul li .textbox { padding: 16px 4px 0; }
.intro ul li .left { float: none; width: 100%; line-height: 27px; }
.intro ul li .left p { font-size: 9px; line-height: 10px; }
.intro ul li .left p span { font-size: 6px; line-height: 10px; padding: 2px 0 0; }
.intro ul li .left ul { padding: 8px 0 0; }
.intro ul li .left ul li { float: none; font-size: 6px; padding: 0 0 5px; margin: 0; width: 100%; }
.intro ul li .right { display: none; }
/* ------------------------------------------------------------ order_flow */
.order_flow { padding: 50px 0 90px; }
.order_flow h3 { color: #4D4D4D; }
.order_flow ol { padding: 40px 0 0; }
.order_flow ol li { padding: 20px; margin: 0 auto 40px; }
.order_flow ol li .textbox { width: 100%; padding: 60px 0 0; }
.order_flow ol li:nth-child(1) .textbox { background: url(../images/album/icn_08.svg) no-repeat center top; background-size: 43px auto; }
.order_flow ol li:nth-child(2) .textbox { background: url(../images/album/icn_09.svg) no-repeat center top; background-size: 43px auto;}
.order_flow ol li:nth-child(3) .textbox { background: url(../images/album/icn_10.svg) no-repeat center top; background-size: 43px auto;}
.order_flow ol li:nth-child(4) .textbox { background: url(../images/album/icn_06.svg) no-repeat center top; background-size: 43px auto;}
.order_flow ol li:nth-child(5) .textbox { background: url(../images/album/icn_07.svg) no-repeat center top; background-size: 43px auto;}
.order_flow ol li .textbox h4 { font-size: 16px; line-height: 24px; }
.order_flow ol li .textbox h4 span { font-weight: bold; }
.order_flow ol li .textbox p { font-size: 11px; line-height: 20px; padding: 8px 0 0; }
/* ------------------------------------------------------------ price */
.price { padding: 50px 0 100px; }
.price h3 { padding: 0 0 40px; }
.price .web_design { margin: 0 auto 30px; }
.price .box { border: solid 8px #E8EBEB; padding: 35px 30px 10px; }
.price .box h4 { font-size: 12px; padding: 0; margin: 0 auto 15px; }
.price .box dt { float: none; width: 100%; padding: 0; margin: 0 auto; font-size: 10px; line-height: 16px; }
.price .box dd { float: none; width: 100%; padding: 3px 0 10px; margin: 0 auto 14px; font-size: 10px; line-height: 18px; font-weight: bold; border-bottom: solid 1px #e5e5e5; }
.price .box dd:last-child { border-bottom: none; }
.price .caution { font-size: 9px; line-height: 14px; padding: 10px 0 0; }
.price .black_btn { margin: 50px auto 0; }
}