@charset "utf-8";

/* content caption */
#main h2,h2#sld { }
#main h3 { 
	padding:10px; text-align:center;
	background: -moz-linear-gradient(top, #ffeeb6, #ffdf79);
	background: -webkit-linear-gradient(top, #ffeeb6, #ffdf79);
	background: linear-gradient(to bottom, #ffeeb6, #ffdf79);
	margin: 20px auto;
}
#main h3 img { max-width: 960px; margin: 0; }
#main h4 { padding-top: 40px !important; text-align: center; }
#main h5 { padding-top:20px; text-align:center; }



.section1 .btn_box { width: 505px; height: 67px; }	

@media screen and (max-width:768px){
	#main h3 { padding:7px 0 4px; }
	#main h3 img { width: 95%; height: auto;  margin: 0 auto; }
	#main h4 { padding-top: 20px !important; }
	/* ご存知ですか*/
	.know .col { text-align: center; }
	.know .col img {
		width: 100%; height: auto; max-width: 347px; }
	/* 月々1万円（税別）から*/
	.section1 .img_center img { width: 100%; height: auto; }	
	.section1 .btn_box { width: 100%; height: auto; max-width: 505px; margin: 0 auto; }	
	/* 全部コミコミ*/
	.section2 .img_center img { width: 100%; height: auto; }	
	/* カスタマイズ*/
	.section3 .img_center img { width: 100%; height: auto; }	
}





/* 4つのプラン*/
#plan {
	width: 100%; margin: 50px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.wrap_plan {
	width: 460px;
	height: 220px;
	margin-bottom: 15px;
	display: inline-block;
}
#plan ul, #plan li { list-style: none; }

@media screen and (max-width:768px){
	#plan { margin: 25px auto 0; }
	.wrap_plan { width: 100%; height: auto; }
	#plan li { display: block; text-align: center; }
	#plan li img { width: 100%; height: auto; max-width: 460px; }
}


/* こんな方にオススメ*/
#recommend { width: 100%; margin: 50px auto 0; } 
#recommend .head_box { text-align: center; }
#recommend .txt_box { text-align: right; background: url(../images/index_recommend_bg.jpg) left bottom no-repeat; }

@media screen and (max-width:768px){
	#recommend { width: 100%; margin: 0px auto 0; } 
	#recommend img { width: 100%; height: auto; }
}


/* コンタクトボタンエリア*/
#wrap_btn {
	width: 900px; margin: 50px auto 0; }
.wrap_btn {
	width: 900px; margin: 30px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.wrap_btn img {width: 100%; height: auto;}

.btn_box {
width: 440px;
height: auto;
margin-bottom: 40px;
display: inline-block;
}
.btn_box img {
	width: 100%; height: auto;
}
#wrap_btn ul, #plan li { list-style: none; }

.wrap_btn a:hover { opacity: 0.5; }


/*********** アコーディオン ***********/
.accordion2 {text-align: center;}
.accordion2 .inner {display: none;}
.accordion2 p{cursor: pointer; padding: 10px;}
.accordion2 p.ac1{background: #F50057;}
.accordion2 p.ac2{background: #FFEA00;}
.accordion2 p.ac3{background: #64DD17;}
.accordion2 .inner li{padding: 10px 0;}
.accordion2 .inner li.content1-1{background: #F48FB1;}
.accordion2 .inner li.content1-2{background: #F8BBD0;}
.accordion2 .inner li.content1-3{background: #FCE4EC;}
.accordion2 .inner li.content2-1{background: #FFF59D;}
.accordion2 .inner li.content2-2{background: #FFF9C4;}
.accordion2 .inner li.content2-3{background: #FFFDE7;}
.accordion2 .inner li.content3-1{background: #C5E1A5;}
.accordion2 .inner li.content3-2{background: #DCEDC8;}
.accordion2 .inner li.content3-3{background: #F1F8E9;}

/*********** toggle_switch ***********/
.toggle_switch { display: none; }
.toggle_contents { }
@media screen and (max-width:768px){
	.toggle_switch {
	  position: relative;
	  cursor: pointer;
	  padding: 0px;
	  display: block;
	}
	.toggle_switch img { width: 100%; height: auto; }	
	.toggle_switch.open {

	}
	.toggle_switch:hover {
	  background-color: #eee;
	}
	.toggle_switch::after {
	  content: "";
	  display: inline-block;
	  width: 18px;
	  height: 11px;
	  background: url(../img/arrow_down.svg) no-repeat center center;
	  background-size: contain;
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  right: 20px;
	  transition: transform .2s;
	}
	.toggle_switch.open::after {
	  transform: rotateZ(180deg);
	  top: 46%;
	}
	.toggle_contents {
	  display: none;
	  padding: 5px 10px;
	}
		.toggle_contents h4 { display: none; }
	body.top #voice { margin: 30px auto 0 !important; }
	body.top #faq,
	body.top #flow { margin: 0 auto !important; }
}

/*********** お客様の声 ***********/
#voice { background: #f2faf2; padding: 50px auto 60px; }
#voice .head_box { font-size: 112.5%; text-align: center; margin: 30px auto 50px; }
.wrap_voice {
	width: 100%; margin: 30px auto 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.voice {
	width: 300px;
	box-sizing: border-box; padding: 10px; 
	background: #fff; box-shadow: 0px 0px 4px gray;
	margin-bottom: 40px;
	display: inline-block;	
}

.voice img { width: 100% !important; height: auto !important; margin: 0 0 10px !important; }
.voice p { padding:10px 0 0; line-height: 1.5; color: #333; text-align: left; }
.voice a { color: #333; }
.voice a:hover { color: #29abe2; }

.voice .txt_box { padding:10px 0 0; line-height: 1.5; color: #333; text-align: left; }
.voice .txt_box span { float: right;  }

.btn_voice { background-color: #0267c1; }


@media screen and (max-width:768px){
	#voice h4 img { width: 100%; height: auto; }
	#voice .head_box { margin: 15px auto 0px; }
	.voice {
		width: 100%; margin: 15px auto 0px; }
}

#voice .btn_voice_more { padding-bottom:50px; margin: 0 auto !important; text-align: center; width: 100%; }
#voice .btn_voice_more img { width: 100%; height: auto; max-width: 505px; }

@media screen and (max-width:768px){
	#voice .btn_voice_more { margin: 0 auto; padding-top: 20px; }		
}


/* よくあるご質問*/
#faq dl { margin-top: 50px; }
#faq dt {
	height: 50px;
	font-size: 22px; line-height: 50px; color: #0267c1;
	border: solid 3px #0267c1;
	padding: 0 10px 0 60px;
	background: url(../images/index_faq_q.png) no-repeat;
}
#faq dd {
	font-size: 16px;
	padding: 20px 20px 30px 75px;
	background: url(../images/index_faq_a.png) no-repeat left 10px;
}

@media screen and (max-width:768px){
	#faq h4 img { width: 100%; max-width: 603px; height: auto; }
	#faq dt { font-size: 16px; padding: 0 10px 0 60px; }
	#faq dd { font-size: 14px; padding: 20px 10px 20px 60px; }
}
@media screen and (max-width:480px){
	#faq dt { background: url(../images/index_faq_q.png) no-repeat; background-size:30px 30px;  font-size: 14px; padding: 4px 5px 4px 40px; line-height: 1.5; height: auto; }
	#faq dd { font-size: 14px; padding: 20px 0px 20px 40px; background-size:30px 30px; }
}

/* お申し込みの流れ*/
#flow { background: #fffef3; padding: 50px auto 60px; }
.wrap_flow {
	width: 100%; margin: 30px auto 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flow {
	width: 33%;
	box-sizing: border-box; padding: 10px 15px; 
	border-right: solid 1px #666;
	display: inline-block;
	margin-bottom: 50px;
}
.flow:first-child {
	border-left: solid 1px #666;
}

.flow .head_box {
	font-size: 22px; line-height: 1.25; color: #0267c1;
	font-weight: 600;
	text-align: left;
}
.flow .head_box span { float: left; margin-right: 10px; }
.flow .img_box { text-align: center; padding: 15px 0; }

@media screen and (max-width:768px){
	#flow h4 img { width: 100%; max-width: 603px; height: auto; }
	.flow { width: 100%; border-right: none; border-top: solid 1px #666; }
	.flow:first-child { border-left: none; border-top: none; }
	.flow:last-child { margin-bottom: 0px; }
}
@media screen and (max-width:480px){
	.flow .head_box img { width: 40px; height: auto; }
}

/*********** お問い合わせ ***********/

#contact .head_box { margin: 30px auto 40px; text-align: left; }

@media screen and (max-width:768px){
	#contact h4 img { width: 100%; max-width: 603px; height: auto; }
}


/* アクセスマップ*/
#access { background: #fffde7; padding: 50px auto 60px; }
.googlemap { margin:15px auto 0; padding:0px; width:100%; }
.googlemap iframe { width:100%; height:500px; }
#access p {
	/* border-bottom: solid 1px #99b0bc; */
	padding: 10px 15px;
}


#access dl {
	display: flex;
	flex-wrap: wrap;
	flex-direction:row;
}

#access dt { 
	color: #517484; display: table-cell;
	padding: 8px 15px; background: #fff;
	line-height: 1;
    margin: 0 0 15px;
	border: solid 1px #517484; border-radius: 3px; }
#access dd { 
	padding: 8px 15px; display: table-cell;
	line-height: 1;
}

@media screen and (max-width:768px){
	#access h4 img { width: 100%; max-width: 603px; height: auto; }
	#access .wrap_cnt { width: 100%; }
	.googlemap iframe { width:100%; height:300px; }
	#access dl { width: 95%; width: 0 auto; }
	#access dt { text-align: center; padding: 10px 10px 5px;  }
	#access dd { margin: 0 5% 5px 0; padding: 10px 10px 5px; }
}

@media screen and (max-width:640px){
	#access dt { margin: 0 1% 5px 15px; width:24%; padding-top: 10px; }
	#access dd { margin: 0 0 5px 0; width: 50%; padding-top: 10px; }
	#access p { font-size: 13px; }
}