@charset "utf-8";
/* ------------------------------------------------------------ common */
header { background: #fff; }
header nav ul li:nth-child(3) a { border-bottom: solid 2px #000; }
/* ------------------------------------------------------------ fv */
#fv { background: url(../images/album/fv.jpg) no-repeat center center/cover; }
/* ------------------------------------------------------------ intro */
.intro { padding: 130px 0 150px; }
.intro .bgbox { background: url(../images/album/pic_01.jpg) no-repeat center center; }
.intro .bgbox .design_album { width: 540px; }
.intro .bgbox .balance { 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; padding: 0 0 0 60px; }
.intro ul li:nth-child(3n+1) { clear: both; padding: 0; }
.intro ul li .textbox { padding: 10px 4px 0; }
.intro ul li .left { float: left; width: 60%; line-height: 27px; }
.intro ul li .left span { display: block; font-size: 12px; text-indent: -0.5em; }
.intro ul li .right { float: right; width: 40%; text-align: right; font-size: 12px; line-height: 25px; }
/* ------------------------------------------------------------ order_flow */
.order_flow { background: #E8EBEB; padding: 120px 0 200px; }
.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_01.svg) no-repeat left center; background-size: 90px auto; }
.order_flow ol li:nth-child(2) .textbox { background: url(../images/album/icn_02.svg) no-repeat left center; background-size: 90px auto;}
.order_flow ol li:nth-child(3) .textbox { background: url(../images/album/icn_03.svg) no-repeat left center; background-size: 90px auto;}
.order_flow ol li:nth-child(4) .textbox { background: url(../images/album/icn_04.svg) no-repeat left center; background-size: 90px auto;}
.order_flow ol li:nth-child(5) .textbox { background: url(../images/album/icn_05.svg) no-repeat left center; background-size: 90px auto;}
.order_flow ol li:nth-child(6) .textbox { background: url(../images/album/icn_06.svg) no-repeat left center; background-size: 90px auto;}
.order_flow ol li:nth-child(7) .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; }
.order_flow ol li .textbox ul li { background: url(../images/common/arrow_03.png) no-repeat left center; padding: 0 0 0 22px; margin: 14px auto 0; }
.order_flow ol li .textbox ul li strong,span { font-size: 22px; line-height: 25px; font-weight: bold; }
.order_flow ol li .textbox ul li small { font-size: 14px; line-height: 20px; }
/* ------------------------------------------------------------ total_service */
.total_service { padding: 150px 0 180px; }
.total_service h3 { padding: 0 0 50px; }
.total_service p { line-height: 34px; }
.total_service p span { display: block; font-size: 22px; line-height: 40px; text-decoration: underline; padding: 15px 0 0; }
.total_service .photo { text-align: center; padding: 75px 0 125px; }
.total_service .black_btn { margin: 135px auto 0; }
.total_service { }






/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){

/* ------------------------------------------------------------ common */
header nav ul li:nth-child(3) a { border-bottom: solid 2px #000; }
/* ------------------------------------------------------------ fv */
#fv { background: url(../images/album/fv_sp.jpg) no-repeat center center; background-size: 100%; }
/* ------------------------------------------------------------ intro */
.intro { padding: 40px 0 80px; }
.intro .bgbox { background: none; }
.intro .bgbox .design_album { width: 100%; }
.intro .bgbox .balance { width: 100%; padding: 0; }
.intro .bgbox h3 { font-size: 16px; line-height: 22px; }
.intro .bgbox p { font-size: 11px; line-height: 20px; padding: 10px 0 0; }
.intro .bgbox img { margin: 20px auto; }
.intro ul { padding: 40px 0 0; width: 100%; }
.intro ul li { width: 33.333%; padding: 0; }
.intro ul li:nth-child(3n+1) { clear: both; padding: 0; }
.intro ul li img { width: 100%; height: auto; }
.intro ul li p { font-size: 10px; padding: 10px 0 0 8px; }
.intro ul li p span { display: block; font-size: 6px; line-height: 10px; padding: 3px 0 0; }
/* ------------------------------------------------------------ order_flow */
.order_flow { padding: 50px 0 90px; }
.order_flow ol { padding: 40px 0 10px; }
.order_flow ol li { padding: 20px; margin: 0 auto 20px; }
.order_flow ol li .textbox { width: 100%; padding: 65px 0 0; }
.order_flow ol li:nth-child(1) .textbox { background: url(../images/album/icn_01.svg) no-repeat center 5px; background-size: 45px auto; }
.order_flow ol li:nth-child(2) .textbox { background: url(../images/album/icn_02.svg) no-repeat center top; background-size: 53px auto;}
.order_flow ol li:nth-child(3) .textbox { background: url(../images/album/icn_03.svg) no-repeat center 5px; background-size: 51px auto;}
.order_flow ol li:nth-child(4) .textbox { background: url(../images/album/icn_04.svg) no-repeat center 5px; background-size: 51px auto;}
.order_flow ol li:nth-child(5) .textbox { background: url(../images/album/icn_05.svg) no-repeat center top; background-size: 47px auto;}
.order_flow ol li:nth-child(6) .textbox { background: url(../images/album/icn_06.svg) no-repeat center top; background-size: 53px auto;}
.order_flow ol li:nth-child(7) .textbox { background: url(../images/album/icn_07.svg) no-repeat center top; background-size: 47px auto;}
.order_flow ol li .textbox h4 { font-size: 16px; line-height: 24px; letter-spacing: 2px; }
.order_flow ol li .textbox h4 span { font-weight: bold; }
.order_flow ol li .textbox p { font-size: 11px; line-height: 20px; padding: 10px 0 0; }
.order_flow ol li .textbox ul li { background: url(../images/common/arrow_03.png) no-repeat left center; 　　
padding: 0 0 0 22px; margin: 14px auto 0; font-size: 12px;}
.order_flow ol li .textbox ul li:nth-child(3) { padding: 2px 0 2px 22px; }
.order_flow ol li .textbox ul li strong { font-size: 16px; line-height: 25px; font-weight: bold; }
.order_flow ol li .textbox ul li span { font-size: 14px; line-height: 25px; font-weight: bold; }
.order_flow ol li .textbox small { font-size: 10px; padding: 10px 0 0; }
/* ------------------------------------------------------------ total_service */
.total_service { padding: 50px 0 40px; }
.total_service h3 { font-size: 20px; line-height: 30px; padding: 0 0 30px; }
.total_service h3 span { font-size: 12px; padding: 5px 0 0; }
.total_service p { font-size: 11px; line-height: 20px; }
.total_service p span { font-size: 13px; line-height: 24px; padding: 10px 0 0; }

.total_service .photo { text-align: center; padding: 50px 0; }
.total_service .photo img { margin: 0 auto; }
.total_service .black_btn { margin: 40px auto 0; }
}