/* CSS Document */
@charset "utf-8";

/* global
---------------------------------------------------- */
strong			{ color:#D9377F; font-weight:bold; }


/* inqBox */
.inqBox			{ background:url(../images/recommend/inqbox_bg.png); }
.inqBox .inner	{ padding:40px 10px; }
.inqBox h1		{ padding:16px 30px; margin-bottom:34px; text-align:center; color:#3388C5; font-size:28px; font-weight:bold; line-height:1.2; background:#EDF5FA; border-radius:34px; }
.inqBox .tel	{ float:left; padding-right:4%; max-width:50%; box-sizing:border-box; }
.inqBox .mail	{ float:right; max-width:50%; padding-left:5%; box-sizing:border-box; border-left:#85B8DC 1px solid; }
.inqBox.end .inner	{ padding:0 10px 40px; }
.inqBox.end .inBox	{ padding-top:40px; margin-right:30px; background:url(../images/recommend/inqbox_bg_end.png) no-repeat right bottom; }
.inqBox.end .inBox p	{ padding-bottom:40px; font-size:28px; font-weight:bold; color:#fff; }
.inqBox.end h1			{ color:#D9377F; font-size:32px; }
@media screen and (max-width: 768px) {
.inqBox .inner	{ padding:16px 10px; }
.inqBox h1		{ padding:10px 10px; margin-bottom:10px; font-size:20px; font-weight:bold; line-height:1.2; background:#EDF5FA; border-radius:16px; }
.inqBox .tel	{ float:none; padding:0 5% 10px 5%; max-width:100%; text-align:center; }
.inqBox .mail	{ float:none; max-width:100%; padding-left:0; border-left:none; text-align:center; }
.inqBox.end .inner	{ padding:0 10px 20px; }
.inqBox.end .inBox	{ padding:20px 0 0; margin-right:10px; background-size:86px; }
.inqBox.end .inBox p	{ padding-bottom:10px; font-size:15px; }
.inqBox.end h1			{ font-size:20px; }
.inqBox.end .txt01		{ margin-bottom:10px; }
.inqBox.end .txt02		{ padding-right:90px;}

}


/* main */
#main			{ background:url(../images/recommend/main_bg.jpg) no-repeat right center #F5FAFE; background-size:cover; }
#main h1		{ padding:150px 320px 60px 0; }
#main .voice	{ position:absolute; top:200px; right:0; }
#main .com01	{ float:left; max-width:37.5%; }
#main .com02	{ float:right; padding:20px 0; max-width:41.5%; }
@media screen and (max-width: 768px) {
#main			{ background:url(../images/recommend/main_bg_sp.jpg) no-repeat center top; background-size: cover; }
#main h1		{ padding:80px 60px 60px 0; }
#main .voice	{ display:none; }
#main .com01	{ max-width:48%; }
#main .com02	{ padding:10px 0 20px; max-width:48%; }
}


/* problem */
#problem		{ background:url(../images/recommend/problem_bg.jpg) no-repeat right bottom #fafafa; border-top:#ddd 1px solid; border-bottom:#ddd 1px solid; }
#problem .inner	{ padding:60px 10px 100px;  }
#problem h1		{ margin-bottom:40px; }
#problem p		{ margin:0 250px 30px 4px; line-height:2; }
@media screen and (max-width: 768px) {
#problem		{ background-size:50%;}
#problem .inner	{ padding:20px 10px 40px;  }
#problem h1		{ margin-bottom:20px; }
#problem p		{ margin:0 0 20px 0; line-height:1.6; }
#problem p.end	{ padding-right:110px; }
}


/* whats */
#whats			{}
#whats .inner	{ padding:60px 10px 100px; background:url(../images/recommend/whats_bg.jpg) no-repeat right bottom; }
#whats h1		{ margin-bottom:40px; }
#whats h2		{ margin-bottom:30px; padding-right:200px; }
#whats p		{ margin:0 310px 30px 4px; line-height:2; }
@media screen and (max-width: 768px) {
#whats .inner	{ padding:20px 10px 10px; background-size:70px; }
#whats h1		{ margin-bottom:20px; padding-right:100px; }
#whats h2		{ margin-bottom:20px; padding-right:0; }
#whats p		{ margin:0 90px 20px 4px; line-height:1.6; }
}


/* reason */
#reason			{}
#reason .inner	{ padding:60px 10px; background:url(../images/recommend/reason_bg.jpg) no-repeat right 56%; }
#reason h1		{ margin-bottom:20px; }
#reason .note	{ margin-bottom:50px; }
#reason .reasonBox			{ position:relative; padding:20px 30px 20px 50px; margin:0 0 40px 20px; background:#f5f5f5; }
#reason .reasonBox.short	{ margin-right:266px; }
#reason .reasonBox h2		{ margin-bottom:10px; border-bottom:#3388C5 1px dashed; }
#reason .reasonBox .number	{ position:absolute; top:-30px; left:-20px; }
@media screen and (max-width: 768px) {
#reason .inner	{ padding:20px 10px; background:none; }
#reason h1		{ margin-bottom:10px; }
#reason .note	{ margin-bottom:40px; }
#reason .reasonBox			{ padding:10px 10px; margin:0 0 40px 0; }
#reason .reasonBox.short	{ margin-right:0; }
#reason .reasonBox .number	{ top:-32px; left:-6px; width:40px; }
}

/* voice */
#voice				{ background:url(../images/recommend/voice_bg.png) center top; }
#voice .titleInn	{ background:#99C3E2; }
#voice .titleInn h1	{ text-align:center; }
#voice .inner		{ padding:40px 10px 1px; background:url(../images/recommend/voice_bg_ar.png) no-repeat center top; }
#voice .voiceBox		{ padding:30px; margin:0 4px 24px 0; background:#fff; }
#voice .voiceBox h2		{ margin-bottom:16px; }
#voice .voiceBox .pic	{ max-width:23%; }
#voice .voiceBox .inBox	{ max-width:74%; }
#voice .voiceBox .inBox p span	{ white-space:nowrap; }
#voice .voiceBox.box01	{ box-shadow:4px 4px 0 #EC9BBF; }
#voice .voiceBox.box02	{ box-shadow:4px 4px 0 #CCE49A; }
#voice .voiceBox.box03	{ box-shadow:4px 4px 0 #F9CB80; }
#voice .voiceBox.box04	{ box-shadow:4px 4px 0 #99C3E2; }
#voice .voiceBox:after	{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
@media screen and (max-width: 768px) {
#voice .inner			{ padding:30px 10px 10px; background-size:80px; }
#voice .voiceBox		{ padding:10px; margin:0 4px 14px 0; }
#voice .voiceBox h2		{ margin-bottom:10px; }
#voice .voiceBox .left	{ float:none; }
#voice .voiceBox .right	{ float:none; }
#voice .voiceBox .pic	{ margin:10px 0 20px; max-width:100%; text-align:center; }
#voice .voiceBox .inBox	{ max-width:100%; }
}


/* merit */
#merit				{}
#merit .inner		{ padding:60px 10px; background:url(../images/recommend/merit_bg.jpg) no-repeat left 260px; }
#merit h1			{ margin-bottom:60px; }
#merit .meritBox			{ position:relative; padding:20px 30px 20px 50px; margin:0 0 40px 260px; background:#f5f5f5; }
#merit .meritBox h2			{ margin-bottom:10px; border-bottom:#D9377F 1px dashed; }
#merit .meritBox .number	{ position:absolute; top:-30px; left:-20px; }
#merit .future				{ margin-left:260px; padding:20px; font-size:18px; font-weight:bold; color:#3388C5; border:#3388C5 2px solid; background:#EBF3F9; }
@media screen and (max-width: 768px) {
#merit .inner		{ padding:20px 10px; background:none; }
#merit h1			{ margin-bottom:40px; }
#merit .meritBox			{ padding:10px; margin:0 0 40px 0; }
#merit .meritBox .number	{ top:-32px; left:-6px; width:40px; }
#merit .future				{ margin:-20px 0 0; padding:14px; font-size:16px; border:#3388C5 1px solid; }
}


/* flow */
#flow			{ background:#fafafa; border-top:#ddd 1px solid; border-bottom:#ddd 1px solid; }
#flow .inner	{ padding:60px 10px 100px;  }
#flow h1		{ margin-bottom:20px; }
#flow h2		{ margin-bottom:20px; }
#flow ul li				{ float:left; padding-right:20px; max-width:25%; box-sizing:border-box;}
#flow ul li:last-child	{ background:none; }
#flow ul:after			{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
#flow .flow01		{ padding-bottom:60px; margin-bottom:60px; border-bottom:#ddd 1px solid; }
#flow .flow01 li	{ background:url(../images/recommend/flow01_ar.png) no-repeat right 70%; }
#flow .flow02 li	{ background:url(../images/recommend/flow02_ar.png) no-repeat right 70%; }
@media screen and (max-width: 768px) {
#flow .inner	{ padding:20px 10px;  }
#flow h1		{ margin-bottom:20px; }
#flow h2		{ margin-bottom:20px; }
#flow ul li			{ margin-bottom:20px; max-width:50%; }
#flow .flow01		{ padding-bottom:10px; margin-bottom:20px; }
#flow .flow01 li	{ background:url(../images/recommend/flow01_ar.png) no-repeat right 70%; }
#flow .flow02 li	{ background:url(../images/recommend/flow02_ar.png) no-repeat right 70%; }
}