@charset "utf-8";

/*--------------------------------------------------------------
/template/
--------------------------------------------------------------*/
div#template{width: 100%;margin: 0 auto;padding:0;text-align: center;color: #000000;}
html { height: 100%;font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;font-size: 62.5%;}
p {margin:0;}
#mainBg {position: fixed;background: url(../images/bg.jpg);background-size: cover;background-repeat: no-repeat;width: 100%;height: 100%;z-index: -1; background-position: center bottom;}
#wrapper {background: #fff;width: 100%;height: 100%;margin: 0 auto;max-width: 650px;overflow: hidden;}
@media screen and (min-width: 611px) {
#wrapper {box-shadow: 6px 0px 5px -5px #b4b4b4, -6px 0px 5px -5px #b4b4b4;}
}
#wrapper img {width: 100%;vertical-align: bottom;}

body { margin: 0;}
.pc { display: block!important; }
.sp { display: none!important; }
h1 {margin: 0;}

#footer {position: absolute;margin-top: -25px;left: 0;right: 0;}
@media only screen and (min-width: 751px) {
#footer img {max-width:500px;}
}
@media only screen and (max-width: 750px) {
h1 {margin: 0;}
.pc { display: none!important;}
.sp { display: block!important;}
#footer {margin-top: -25px;}
#footer img {width: 100%;}
}

/*==================================
	floatingBarBlock
==================================*/
.floatingBarBlock { position: fixed; bottom: 0;left: 0;right: 0; z-index: 700; width: 100%;max-width: 650px;margin: auto;}

/*==================================
	guidetBlock
==================================*/
#guideBlock {padding: 4% 0 9% 0;text-align: center;font-size: 1.5rem; }
#guideBlock a {color: #555;}
#guideBlock #guide_link {width: 48%;margin: 0 auto;}
#guideBlock #tokushou_link, #guideBlock #privacy_link, #guideBlock #outline_link {padding-top: 4%;}
@media screen and (min-width: 650px) {
#guideBlock {padding: 0 0 50px 0;}
#guideBlock #guide_link {max-width: 180px;}
#guideBlock #tokushou_link, #guideBlock #privacy_link, #guideBlock #outline_link {padding-top: 15px;}
}

/*==================================
	cv
==================================*/
.cvBlock .cv_tit { position: relative;}
.cvBlock .cv_tit .put { width: 18.33%; position: absolute; left: 1%; top: 40.14%;}
.cvBlock .btnarea { position: relative;}
.cvBlock .btnarea .cv_btn { width: 93.33%; position: absolute; left: 3.2%; top: 3%; overflow: hidden; border-radius: 12vw; z-index: 1;}
.cvBlock .btnarea .cv_btn .btn { display: block; position: relative;transition: 0.2s;}
.cvBlock .btnarea .cv_btn .btn:hover { text-decoration: none; color: #fff; opacity: 0.7; box-shadow: none; -webkit-transform: translateY(3px);}
.cvBlock .btnarea .cv_btn .btn:before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: shiny-btn 3s ease-in-out infinite;}
.cvBlock .member_btn { width: 100%; position: absolute; left: 0; bottom: 0;}
.cvBlock .btnarea .cv_btn input,
.cvBlock .member_btn input { width: 100%;}
#cvftBlock { background: url("../images/cvft_bg.jpg") bottom center no-repeat; background-size: cover; background-position: center center;}
#cvftBlock .cvBlock .btnarea .cv_btn {top: 0%;}
@-webkit-keyframes shiny-btn {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@media screen and (min-width: 650px) {
.cvBlock .btnarea .cv_btn { border-radius: 170px;}
}

/*==================================
	header
==================================*/
header { position: relative; background: url("../images/mv_bg.jpg") bottom center no-repeat; background-size: 100% auto;}
header .mvBlock { position: relative; z-index: 10;}
header .cvBlock { position: relative; z-index: 10;}
header .mv_bg .put01 { position: absolute; width: 100%; top: 0; left: 0; z-index: 1;}
header .mv_bg .put02 { position: absolute; width: 31%; top: 0; left: 0;}
header .mv_bg .put03 { position: absolute; width: 41%; top: 0; left: 43%;}
header .mv_bg .put04 { position: absolute; width: 32%; top: 16%; right: 0;}
header .mv_bg .put05 { position: absolute; width: 40%; top: 34%; left: 0;}
header .mv_bg .put06 { position: absolute; width: 53.6%; top: 48%; right: 0;}

/*==================================
	firstBlock
==================================*/
#firstBlock .first_tit { position: relative;}
#firstBlock .first_tit .put01{ position: absolute; bottom: 9%; left: 13%; width: 20.93%;}
#firstBlock .first_tit .put02{ position: absolute; bottom: 10%; left: 36%; width: 19.73%;}
#firstBlock .first_tit .put03{ position: absolute; bottom: 9.5%; left: 58%; width: 19.86%;}
#firstBlock .first_img02 { position: relative;}
#firstBlock .first_img02 .put01{ position: absolute; top: 36.5%; left: 20.5%; width: 7.73%; z-index: 1;}
#firstBlock .first_img02 .put02{ position: absolute; top: 36%; left: 24%; width: 39.2%;}
#firstBlock .first_img02 .put03{ position: absolute; top: 58.8%; left: 0; width: 34.4%;}
#firstBlock .first_img02 .put04{ position: absolute; top: 70.4%; right: 0; width: 33.33%;}
#firstBlock .first_img02 .put02 img,
#firstBlock .first_img02 .put03 img,
#firstBlock .first_img02 .put04 img{ opacity: 0; margin-top: 20%;}


/*==================================
	beginBlock
==================================*/
#beginBlock .begin_img01 { position: relative;}
#beginBlock .begin_img01 .put01{ position: absolute;z-index: 5;width: 62.26%; bottom: 34%; left: 37.5%;}
#beginBlock .begin_img01 .put02{ position: absolute;z-index: 4;width: 63.86%; bottom: 37%; left: 1.5%;}
#beginBlock .begin_img01 .put03{ position: absolute;z-index: 3;width: 58.93%; bottom: 0; left: 21%;}
#beginBlock .begin_img01 .put04{ position: absolute;z-index: 2;width: 56.8%; bottom: 15%; left: -5%;}
#beginBlock .begin_img01 .put05{ position: absolute;z-index: 1;width: 66.93%; bottom: -2%; right: -23%;}
#beginBlock .begin_img01 .put01 img,
#beginBlock .begin_img01 .put02 img,
#beginBlock .begin_img01 .put03 img,
#beginBlock .begin_img01 .put04 img,
#beginBlock .begin_img01 .put05 img{ opacity: 0; margin-bottom: 20%;}
#beginBlock .begin_img04 { position: relative;}
#beginBlock .begin_img04 .put { position: absolute; top: 42%; left: 0; right: 0; margin: auto; width: 13.6%;}

/*==================================
	pointBlock
==================================*/
#pointBlock .point_tit { position: relative;}
#pointBlock .point_tit .line { position: absolute; width: 33.73%; left: 10%; bottom: 6%;}
#pointBlock .point_tit .line p { width: 0%; overflow: hidden; background: url("../images/point_tit_line.png") no-repeat left top; background-size: auto 100%; padding-top: 21.15%;}
#pointBlock .pointTab { padding: 0 5% 5% 5%; background: url("../images/point_bg.jpg") top center no-repeat; background-size: 100% auto;}
#pointBlock .pointTab .tabs .slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; width: 6%; height: 10vw; text-indent: 100%; white-space: nowrap; overflow: hidden; padding: 0;}
#pointBlock .pointTab .tabs .slick-arrow.slick-disabled {opacity: 0;}
#pointBlock .pointTab .tabs .slick-prev { left: -3%; background: url("../images/point_slider_arrL.png") no-repeat; background-size: 100% auto;}
#pointBlock .pointTab .tabs .slick-next { right: -3%; background: url("../images/point_slider_arrR.png") no-repeat; background-size: 100% auto;}
#pointBlock .pointTab .tabs .slick-dots { top: -1%; bottom: inherit;}
#pointBlock .pointTab .tabs .slick-dots li { margin: 0;}
#pointBlock .pointTab .tabs .slick-dots li button{ padding: 0;}
#pointBlock .pointTab .tabs .slick-dots li button:before {}
#pointBlock .pointTab .tabs .slick-dots li.slick-active button::before { color: #e6508a; opacity: 1;}
#pointBlock .pointTab .tabs .slick-dotted.slick-slider { margin-bottom: 0;}
#pointBlock .pointTab .tabs { width: 100%; margin: 0 auto; position: relative;}
#pointBlock .pointTab .slidebtn { display: flex; position: absolute; top: 0; left: 0; right: 0;}
#pointBlock .pointTab .slide01-btn01,
#pointBlock .pointTab .slide01-btn02 { cursor: pointer; width: calc(100% / 2); display: block; transition: all 0.2s ease; height: 14vw;}
#pointBlock .pointTab .tab_content { display: none; clear: both; overflow: hidden; background: url("../images/point_tab_bg.jpg") bottom center no-repeat; background-size: 100% auto;}
#pointBlock .pointTab .tab_content.slide01_01 { display: block;}
#pointBlock .pointTab .tab_content .slideArea {padding:0 3%;}
@media screen and (max-width: 649px) {
#pointBlock .pointTab .tabs .slick-dots li {width: auto;}
#pointBlock .pointTab .tabs .slick-dots li button{ width: 5vw;}
#pointBlock .pointTab .tabs .slick-dots li button:before { font-size: 14vw;top: -10px;}
}
@media screen and (min-width: 650px) {
#pointBlock .pointTab .tabs .slick-arrow { height: 75px; width: 38px;}
#pointBlock .pointTab .tabs .slick-dots li { margin: 0 10px;}
#pointBlock .pointTab .tabs .slick-dots li button:before { font-size: 50px;}
#pointBlock .pointTab .slide01-btn01,
#pointBlock .pointTab .slide01-btn02 { height: 100px}
}

/*==================================
	reasonBlock
==================================*/
#reasonBlock .reason_tit { position: relative;}
#reasonBlock .reason_tit .put { position: absolute; width: 21.46%; top: 7.5%; right: 14.5%;}

/*==================================
	voiceBLock
==================================*/
#voiceBLock {position: relative;padding-bottom: 15%; background: url("../images/voiceBlock_bg.jpg") top center no-repeat; background-size: 100% auto; background-color: #f5f1f1;}
#voiceBLock .notes {position: absolute;bottom:3.5%;}

/*==================================
	lifeBlock
==================================*/
#lifeBlock .life_img01 { position: relative;}
#lifeBlock .life_img01 .put { position: absolute; right: 6.5%; bottom: 6%; width: 14.66%;}
#lifeBlock .life_img02 { position: relative;}
#lifeBlock .life_img02 .put { position: absolute; right: 7%; bottom: -1%; width: 14.66%;}
#lifeBlock .life_img04 { position: relative;}
#lifeBlock .life_img04 .put { position: absolute; right: 7%; bottom: 11%; width: 14.66%;}

/*==================================
	faq
==================================*/
#faqBlock { padding: 0 5% 8% 5%; text-align: left; background: url("../images/faq_bg.jpg") repeat-y; background-size: 100% auto; font-size: 1.4rem;line-height: 1.2;color: #3e3e3e; position: relative;}
#faqBlock h1 {position: relative;padding-top: 4%;}
#faqBlock .accordion {width:100%;}
#faqBlock .accordion dl {margin-bottom: 2%; border-left: solid 1px #ddd; border-top: solid 1px #ddd;}
#faqBlock .accordion dt {cursor: pointer;padding: 4% 10% 4% 4%;background:url(../images/accordion_icon_off.png) no-repeat 96% center #feeff5;background-size: auto 8px;margin-top: 0;text-align: left;box-shadow: none;margin-bottom: 0;display: flex;justify-content: flex-start;align-items: center; color: #222; border-right: solid 1px #ddd; border-bottom: solid 1px #ddd; font-feature-settings: "palt"; }
#faqBlock .accordion dt p { content: ""; background: url("../images/accordion_icon_q.png") no-repeat left top; min-height: 20px; background-size: auto 20px; padding-left: 30px; line-height: 20px;}
#faqBlock .accordion dl:last-child {box-shadow: none;}
#faqBlock .accordion dd { background:#fff; color: #222; display:none;text-align: left; padding: 4% 4% 5% 4%; line-height: 160%; font-feature-settings: "palt"; margin-left: 0; border-right: solid 1px #ddd; border-bottom: solid 1px #ddd;}
#faqBlock .accordion dd p { content: ""; background: url("../images/accordion_icon_a.png") no-repeat left top; min-height: 20px; background-size: auto 18px; padding-left: 30px; line-height: 20px;}
#faqBlock .accordion dd .imp { color: #e6508a; font-weight: bold;}
#faqBlock .notes { margin-top: 3%; font-size: 80%;}
@media screen and (min-width: 621px) {
#faqBlock .accordion dt p {font-size: 130%;}
#faqBlock .accordion dd p {font-size: 120%;line-height: 160%;}
}

/*==================================
	seibunBlock
==================================*/
.ftbg { background: url("../images/seibun_bg.jpg") top center no-repeat; background-size: 100% auto;}
#seibunBlock { color: #222; padding: 0 5% 10% 5%;}
#seibunBlock h1 { margin-bottom: 5%; font-size: 1.6rem; text-align: center; font-weight: normal; padding: 2.5%; border: solid 1px #222;}
#seibunBlock .subtit { margin-bottom: 5%; font-size: 1.6rem; font-weight: bold;}
#seibunBlock .notes { margin-bottom: 5%; text-align: left; line-height: 1.4;}
#seibunBlock .notes li { font-size: 1.6rem; text-indent: -1.6rem; margin-left: 1.6rem; list-style: none;}
#seibunBlock .notes li:before { content: "※";}
#seibunBlock dl { width: 100%; margin: 5% auto 0 auto; display: flex; flex-wrap: wrap; border-top: solid 1px #ddd; border-left: solid 1px #ddd; line-height: 1.4;}
#seibunBlock dl dt,
#seibunBlock dl dd { letter-spacing: -0.05em; font-size: 1.4rem; border-bottom: solid 1px #ddd; border-right: solid 1px #ddd; box-sizing: border-box;}
#seibunBlock dl dt { padding: 10px 0; width: 30%; background: #f8f8f8;}
#seibunBlock dl dd { padding: 10px 4%; text-align: left; width: 70%; background: #fff;}
@media screen and (min-width: 621px) {
#seibunBlock dl dt,
#seibunBlock dl dd { padding: 15px 20px;text-align: left;}
}

/*==================================
	qualityBlock
==================================*/
#qualityBlock .qualityBg { background: url("../images/quality_bg.gif") repeat;}
#qualityBlock .quality_accordion {padding: 0 5.3%;}
#qualityBlock .quality_accordion dt {position: relative;margin-top: 20px;}
#qualityBlock .quality_accordion dt:first-of-type {margin-top: 0px;}
#qualityBlock .quality_accordion dd:first-of-type {display: block;}
#qualityBlock .quality_accordion dt::after {position: absolute;content: "";background:url(../images/quality_accordion_iconoff.png) no-repeat 100% center;width: 18px; height: 8px; background-size:100% 100%;top:50%;right: 4.4%;}
#qualityBlock .quality_accordion dd {display:none;}
#qualityBlock .quality_btn {width: 72%;margin: 0 auto; padding: 50px 0 100px;}