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

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

	common style
	
========================================================================== */
body, div, p, ul, li, h1, h2, h3, h4, h5, h6, a {margin:0; padding:0; font-weight:normal;}
a, p, li, ol {font-family: "tbchibirgothicplusk-pro"; color:#535353; text-align: center; color: #676261; line-height: 1.5}
a {text-decoration:none; cursor:pointer;}
div {width:100%;}
ul {list-style:none;}
iframe {border:none;}

/* clearfix */
.cfx:after {content:""; display:block; clear:both; height:0; visibility: hidden;}

/* texthidden */
.txh {white-space:nowrap; overflow:hidden; text-indent:100%;}

.tangerine {font-family: 'Tangerine', cursive;}
.meddon {font-family: 'Meddon', cursive;}
.pc{display: block;}
.sp{ display: none;}

.f_img img{ width: 100%; max-width: 100%; height: auto;}

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

	for PC style
	
========================================================================== */

.contents{ background: url(../img/bg.png); background-repeat: repeat; background-size: contain; padding: 0 0 10% 0;}

.title_top{ background: #fff; padding: 5% 0; position: relative;}
.title_top .title_01{ width: 85%; margin: 0 auto; max-width: 600px;}
.title_top .title_02{ width: 30%; margin: 0 auto; max-width: 300px; position: absolute; bottom: 6%; right: 2%;}

.top_heart{ width: 35%; margin: 6% auto; max-width: 300px;}

#top{ background: #fff; margin: 0 auto; padding: 5%; box-sizing: border-box; position: relative; border-radius: 16px; max-width: 800px; margin: 0 auto; width: 80%;}
#top .point_01{ position: absolute; top:20px; left: 20px; width: 20px; height: 20px;}
#top .point_02{ position: absolute; top:20px; right:20px; width: 20px; height: 20px;}
#top .point_03{ position: absolute; bottom:20px; left:20px; width: 20px; height: 20px;}
#top .point_04{ position: absolute; bottom:20px;right:20px; width: 20px; height: 20px;}

#top .top_title{ width: 60%; margin: 5% auto;}
#top .txt{ font-size: 15px; line-height: 22px;}
.attention{ color: #d65540; font-size: 12px; margin: 15px 0 0;}
#top ul{ margin: 8% auto; width: 70%;}
#top li{ float: left; width: 46%; margin: 0 2% 2% 0;}

#vision .title{ background: #fff; padding: 2% 0; position: relative; margin: 10% 0 4%;}
#vision .title .title_01{ width: 18%; margin: 0 auto; max-width: 100px;}
#vision .title .title_02{ width: 50%; margin: 0 auto; max-width: 600px;}
#vision .menu{ width: 100%; max-width: 800px;margin: 0 auto 5%;}
#vision .menu li{ float: left; width: 31%; margin: 0 2% 0 0;}
#vision .vision_list{ width: 100%; max-width: 800px;margin: 0 auto 5%; text-align: left;}
#vision .vision_list p{ text-align: left; line-height: 19px; font-size: 15px; line-height: 1.9;}
#vision .vision_list .photo{ margin: 0 0 3%;}
#vision .vision_list .txtbox{ background: #fff; padding: 4% 9%; box-sizing: border-box;border-radius: 16px; margin: 0 0 6% 0;}
#vision .vision_list .list_title{ width: 40%;}

#vision .vision_inner{ background: #fff; margin: 0 auto; padding: 5%; box-sizing: border-box; position: relative; border-radius: 16px; max-width: 800px; margin: 0 auto; width: 80%;}
#vision .vision_inner .point_01{ position: absolute; top:20px; left: 20px; width: 20px; height: 20px;}
#vision .vision_inner .point_02{ position: absolute; top:20px; right:20px; width: 20px; height: 20px;}
#vision .vision_inner .point_03{ position: absolute; bottom:20px; left:20px; width: 20px; height: 20px;}
#vision .vision_inner .point_04{ position: absolute; bottom:20px;right:20px; width: 20px; height: 20px;}

#vision .vision_inner .title01{ width: 40%; margin: 0 auto 2%;}
#vision .vision_inner p{ font-size: 14px; line-height: 19px;}
#vision .vision_inner .title02{ width: 70%; margin: 4% auto 2%;}
#vision .vision_inner li{ margin: 0 auto 5%;}
#vision .vision_inner .txt01{color: #ca4593; font-size: 25px; margin: 0 0 2% 0;}
#vision .vision_inner .txt02{ font-size: 14px;}
#vision .vision_inner .price{ color: #cf376c; font-size: 28px; margin: 2% auto 0;}
#vision .vision_inner .price span{ color: rgba(104,104,104,1.00); font-size: 12px;}

#flow .title{ background: #fff; padding: 2% 0; position: relative; margin: 10% 0 4%;}
#flow .title .title_01{ width: 18%; margin: 0 auto; max-width: 100px;}
#flow .title .title_02{ width: 50%; margin: 0 auto; max-width: 600px;}

#flow .inner{ background: #fff; margin: 0 auto; padding: 5%; box-sizing: border-box; position: relative; border-radius: 16px; max-width: 800px; margin: 0 auto; width: 80%;}
#flow .inner .point_01{ position: absolute; top:20px; left: 20px; width: 20px; height: 20px;}
#flow .inner .point_02{ position: absolute; top:20px; right:20px; width: 20px; height: 20px;}
#flow .inner .point_03{ position: absolute; bottom:20px; left:20px; width: 20px; height: 20px;}
#flow .inner .point_04{ position: absolute; bottom:20px;right:20px; width: 20px; height: 20px;}

#flow .sub_title{ width: 70%; margin: 0 auto;}
#flow .step { margin: 10% auto;}
#flow .step li{ margin: 0 0 8% 0;}
#flow .step .step_img{ width: 60%; margin: 0 auto 2%;}
#flow .step .step_txt{ font-size: 18px; line-height: 25px;}
#flow .step .step_txt_small{ font-size: 12px; line-height: 25px;}
#flow .step .step_txt_red{ color:#cf376c; font-size: 12px; line-height: 25px;}


#qa .title{ background: #fff; padding: 2% 0; position: relative; margin: 10% 0 4%;}
#qa .title .title_01{ width: 25%; margin: 0 auto; max-width: 180px;}
#qa .title .title_02{ width: 15%; margin: 0 auto; max-width: 600px;}

#qa .inner{ background: #fff; margin: 0 auto; padding: 5%; box-sizing: border-box; position: relative; border-radius: 16px; max-width: 800px; margin: 0 auto; width: 80%;}
#qa .inner .point_01{ position: absolute; top:20px; left: 20px; width: 20px; height: 20px;}
#qa .inner .point_02{ position: absolute; top:20px; right:20px; width: 20px; height: 20px;}
#qa .inner .point_03{ position: absolute; bottom:20px; left:20px; width: 20px; height: 20px;}
#qa .inner .point_04{ position: absolute; bottom:20px;right:20px; width: 20px; height: 20px;}

#qa p{ text-align: left;}
#qa li{ margin: 5% auto 8%;}
#qa li .red{ color: #ca4593; font-size: 25px; margin: 0 0 1% 0; font-weight: bold;}
#qa li .qa_txt{ font-size: 16px; border-bottom: 2px solid #ca4593; padding: 0 0 1% 0; margin: 0 0 2% 0;}

.footer{ padding: 5% 0; box-sizing: border-box; }
.footer .inner{ width: 40%; margin: 0 auto;}
.footer .logo{ width: 37%; float: left; margin: 0 3% 0 0;}
.footer .txt{ width: 60%; float: left;}
.footer .txt p{ text-align: left; font-size: 13px;}

@media only screen and (max-width: 860px){
	
.pc{display: none;}
.sp{ display: block;}
p{ font-size: 14px;}

#top{ background: #fff; margin: 0 auto; padding: 5%; box-sizing: border-box; position: relative; border-radius: 16px; max-width: 800px; width: 90%;}
#top .point_01{ position: absolute; top:20px; left: 20px; width:10px; height: 10px;}
#top .point_02{ position: absolute; top:20px; right:20px; width: 10px; height:10px;}
#top .point_03{ position: absolute; bottom:20px; left:20px; width: 10px; height: 10px;}
#top .point_04{ position: absolute; bottom:20px;right:20px; width: 10px; height: 10px;}

#top .top_title{ width: 100%; margin: 10% auto;}
#top .txt{ font-size: 12px; line-height: 1.9;}
.attention{ color: #d65540; font-size: 12px; margin: 15px 0 0;}
#top ul{ margin: 8% auto 10%; width: 90%;}
#top li{ float: left; width: 46%; margin: 0 2% 2% 0;}

#vision .title{ background: #fff; padding: 2% 0; position: relative; margin: 10% 0 4%;}
#vision .title .title_01{ width: 18%; margin: 0 auto; max-width: 100px;}
#vision .title .title_02{ width: 50%; margin: 0 auto; max-width: 600px;}
#vision .menu{ width: 90%; max-width: 800px;margin: 0 auto 2%;}
#vision .menu li{ float: left; width: 32%; margin: 0 1% 0 0;}
#vision .vision_list{ width: 90%; max-width: 800px;margin: 0 auto 5%; text-align: left;}
#vision .vision_list p{ text-align: left; font-size: 15px; line-height: 1.9;}
#vision .vision_list .photo{ margin: 0 0 3%;}
#vision .vision_list .txtbox{ background: #fff; padding: 4% 9%; box-sizing: border-box;border-radius: 16px; margin: 0 0 6% 0;}
#vision .vision_list .list_title{ width: 40%;}

#vision .vision_inner{ background: #fff; margin: 0 auto; padding: 5% 5% 10%; box-sizing: border-box; position: relative; border-radius: 16px; max-width: 800px; width: 90%;}
#vision .vision_inner .point_01{ position: absolute; top:20px; left: 20px; width:10px; height: 10px;}
#vision .vision_inner .point_02{ position: absolute; top:20px; right:20px; width: 10px; height:10px;}
#vision .vision_inner .point_03{ position: absolute; bottom:20px; left:20px; width: 10px; height: 10px;}
#vision .vision_inner .point_04{ position: absolute; bottom:20px;right:20px; width: 10px; height: 10px;}

#vision .vision_inner .title01{ width: 70%; margin: 8% auto 2%;}
#vision .vision_inner p{ font-size: 12px; line-height: 19px;}
#vision .vision_inner .title02{ width: 80%; margin: 10% auto 2%;}
#vision .vision_inner li{ margin: 0 auto 5%;}
#vision .vision_inner .txt01{color: #ca4593; font-size: 18px; margin: 0 0 2% 0;}
#vision .vision_inner .txt02{ font-size: 12px;}
#vision .vision_inner .price{ color: #cf376c; font-size: 20px; margin: 2% auto 0;}
#vision .vision_inner .price span{ color: rgba(104,104,104,1.00); font-size: 12px;}


#flow .title{ background: #fff; padding: 2% 0; position: relative; margin: 10% 0 4%;}
#flow .title .title_01{ width: 30%; margin: 0 auto; max-width: 100px;}
#flow .title .title_02{ width: 86%; margin: 0 auto; max-width: 600px;}

#flow .inner{ background: #fff; margin: 0 auto; padding: 5%; box-sizing: border-box; position: relative; border-radius: 16px; max-width: 800px; width: 90%;}
#flow .inner .point_01{ position: absolute; top:20px; left: 20px; width:10px; height: 10px;}
#flow .inner .point_02{ position: absolute; top:20px; right:20px; width: 10px; height:10px;}
#flow .inner .point_03{ position: absolute; bottom:20px; left:20px; width: 10px; height: 10px;}
#flow .inner .point_04{ position: absolute; bottom:20px;right:20px; width: 10px; height: 10px;}

#flow .sub_title{ width: 80%; margin: 0 auto;}
#flow .step { margin: 10% auto;}
#flow .step li{ margin: 0 0 8% 0;}
#flow .step .step_img{ width: 90%; margin: 0 auto 2%;}
#flow .step .step_txt{ font-size: 12px; line-height: 1.9;}
#flow .step .step_txt_small{ font-size: 10px; line-height:1.9;}
#flow .step .step_txt_red{ color:#cf376c; font-size: 11px; line-height: 1.9;}


#qa .title{ background: #fff; padding: 2% 0; position: relative; margin: 10% 0 4%;}
#qa .title .title_01{ width: 35%; margin: 0 auto; max-width: 180px;}
#qa .title .title_02{ width: 32%; margin: 0 auto; max-width: 600px;}

#qa .inner{ background: #fff; margin: 0 auto; padding: 8%; box-sizing: border-box; position: relative; border-radius: 16px; max-width: 800px;width: 90%;}
#qa .inner .point_01{ position: absolute; top:20px; left: 20px; width:10px; height: 10px;}
#qa .inner .point_02{ position: absolute; top:20px; right:20px; width: 10px; height:10px;}
#qa .inner .point_03{ position: absolute; bottom:20px; left:20px; width: 10px; height: 10px;}
#qa .inner .point_04{ position: absolute; bottom:20px;right:20px; width: 10px; height: 10px;}

#qa p{ text-align: left;}
#qa li{ margin: 5% auto 8%;}
#qa li .red{ color: #ca4593; font-size: 16px; margin: 0 0 1% 0; font-weight: bold;}
#qa li .qa_txt{ font-size: 12px; border-bottom: 2px solid #ca4593; padding: 0 0 1% 0; margin: 0 0 2% 0;}

	
.footer{ padding: 9% 0; box-sizing: border-box; }
.footer .inner{ width: 70%; margin: 0 auto;}
.footer .logo{ width: 50%; float: none; margin: 0 3% 0 0;}
.footer .txt{ width: 100%; float: none;}
.footer .txt p{ text-align: left; font-size: 13px;}

}