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

/*******************
	Animation
********************/
@keyframes shine {
	0%   { left: -75%; }
	80%  { left: -75%; }
	100% { left: 125%; }
}
@keyframes BtnAnim02 {
	0%   { transform: rotate(0) scale(0.2); opacity: 1; }
	45%  { opacity: 0; }
	100% { transform: rotate(360deg) scale(4); opacity: 0; }
}
@keyframes bounceInUpL {
	0%   { opacity: 0; transform: translateX(-150%); }
	60%  { transform: translateX(10%); }
	80%  { transform: translateX(-3%); }
	100% { opacity: 1; transform: translateX(0); }
}
@keyframes bounceInUpR {
	0%   { opacity: 0; transform: translateX(150%); }
	60%  { transform: translateX(-10%); }
	80%  { transform: translateX(3%); }
	100% { opacity: 1; transform: translateX(0); }
}
@keyframes bounceInUpX {
	0%   { opacity: 0; transform: translateY(150%) scale(0.8); }
	60%  { transform: translateY(-10%); }
	80%  { transform: translateY(3%); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bounceInUp2 {
	0%   { opacity: 0; transform: translateY(100%); }
	60%  { transform: translateY(-5%); }
	80%  { transform: translateY(1.5%); }
	100% { opacity: 1; transform: translateY(0); }
}
.scrollInActionL {
	animation-name: bounceInUpL;
	animation-duration: .4s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.scrollInActionR {
	animation-name: bounceInUpR;
	animation-duration: .4s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.scrollInAction {
	animation-name: bounceInUpX;
	animation-duration: .7s;
	animation-iteration-count: 1;
	animation-delay: .4s;
	animation-fill-mode: forwards;
}
.anim06 { opacity: 0; }
.scrollInAction2 {
	animation-name: bounceInUp2;
	animation-duration: .4s;
	animation-iteration-count: 1;
	animation-delay: .5s;
	animation-fill-mode: forwards;
}



/*******************
	LP style
********************/
/* contents wrapper */
main.crm002Wrapper {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	padding-bottom: 3.3%;
	box-sizing: border-box;
	box-shadow: 0 0 22px 0 rgba(0,0,0,.1);
	text-align: center;
}
@media screen and (max-width: 750px) {
	main.crm002Wrapper {
		margin: 0 auto 8%;
		box-shadow: none;
	}
}
main.crm002Wrapper img {
	width: 100%;
	max-width: 750px;
}
main.crm002Wrapper .firstView h1 {
	margin: 0;
	padding: 0;
}

/* SmallTTL */
main.crm002Wrapper .sttl {
	position: absolute;
	width: 51.4%;
	left: 27%;
}
main.crm002Wrapper .sttl > p {
	display: block;
	width: 100%;
	position: relative;
}
main.crm002Wrapper .sttl img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 31;
}
main.crm002Wrapper .sttl img + img {
	z-index: 30;
	position: relative;
}


/* STORY01 */
main.crm002Wrapper .story01 {}
main.crm002Wrapper .story01 .story0104,
main.crm002Wrapper .story01 .story0105 {
	position: relative;
	overflow: hidden;
}
main.crm002Wrapper .story01 .story0104 > img,
main.crm002Wrapper .story01 .story0105 > img {
	position: relative;
	top: 0;
	left: 0;
	z-index: 10;
}
main.crm002Wrapper .story01 .story0104:before,
main.crm002Wrapper .story01 .story0104:after {
	z-index: 12;
	position: absolute;
	content: '';
}
main.crm002Wrapper .story01 .story0104 > .sttl {
	z-index: 11;
	top: 0.5%;
}
main.crm002Wrapper .story01 .story0105 > .sttl {
	z-index: 11;
	top: 0;
}
main.crm002Wrapper .story01 .story0104 > .medal1,
main.crm002Wrapper .story01 .story0104 > .medal2 {
	z-index: 11;
	position: absolute;
	width: 45.6%;
	height: 31%;
	mask-image: url("../img/story_01_04_mask.svg");
	mask-repeat: no-repeat;
	mask-position: 0 0;
	mask-size: 100%;
	-webkit-mask-image: url("../img/story_01_04_mask.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
	-webkit-mask-size: 100%;
}
main.crm002Wrapper .story01 .story0104 > .medal1 {
	top: 22%;
	left: .5%;
}
main.crm002Wrapper .story01 .story0104 > .medal2 {
	top: 33.5%;
	right: -.5%;
}
main.crm002Wrapper .story01 .story0104 > .medal1:after,
main.crm002Wrapper .story01 .story0104 > .medal2:after {
	content: '';
	position: absolute;
	top: -5%;
	left: 0%;
	width: 50%;
	height: 110%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 60%);
	transform: skewX(-9deg);
	animation: shine linear 2.5s infinite;
}
main.crm002Wrapper .story01 .story0104 > .medal2:after { animation-delay: 0.15s; }
main.crm002Wrapper .story01 .story0105 > p {
	position: absolute;
	z-index: 9;
	top: 11%;
	left: 0%;
	width: 100%;
}
main.crm002Wrapper .story01 .story0105 > .maskTtl {
	position: absolute;
	bottom: 0%;
	left: 0;
	z-index: 11;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}
main.crm002Wrapper .story01 .story0105 > .maskTtl p {
	position: relative;
	mask-image: url("../img/story_01_07_mask.svg");
	mask-repeat: no-repeat;
	mask-position: 0 0;
	mask-size: 100%;
	-webkit-mask-image: url("../img/story_01_07_mask.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
	-webkit-mask-size: 100%;
}
main.crm002Wrapper .story01 .story0105 > .maskTtl p:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 100%);
	transform: skewX(-9deg);
	animation: shine linear 3.9s infinite;
}
main.crm002Wrapper .story01 .story0105 > .maskTtl p img {
	position: relative;
	top: 0;
	left: 0;
}
main.crm002Wrapper .story01 .story0105 > .maskTtl p {
	position: relative;
	mask-image: url("../img/story_01_07_mask.svg");
	mask-repeat: no-repeat;
	mask-position: 0 0;
	mask-size: 100%;
	-webkit-mask-image: url("../img/story_01_07_mask.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
	-webkit-mask-size: 100%;
}
main.crm002Wrapper .story01 .story0105 > .maskTtl p:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 100%);
	transform: skewX(-9deg);
	animation: shine linear 3.9s infinite;
}
main.crm002Wrapper .story01 .story0105 > .maskTtl p img {
	position: relative;
	top: 0;
	left: 0;
}
main.crm002Wrapper .story01 .story0105 > .maskTtl p { mask: none; }
main.crm002Wrapper .story01 .story0105 > .maskTtl p:after { content: none; }

/* STORY02 */
main.crm002Wrapper .story02 { margin-bottom: 8%; }
main.crm002Wrapper .story02 .story0201,
main.crm002Wrapper .story02 .story0202,
main.crm002Wrapper .story02 .story0203,
main.crm002Wrapper .story02 .story0204,
main.crm002Wrapper .story02 .story0205 {
	position: relative;
	overflow: hidden;
}
main.crm002Wrapper .story02 .story0201 > img,
main.crm002Wrapper .story02 .story0202 > img,
main.crm002Wrapper .story02 .story0203 > img,
main.crm002Wrapper .story02 .story0204 > img,
main.crm002Wrapper .story02 .story0205 > img {
	position: relative;
	top: 0;
	left: 0;
	z-index: 10;
}
main.crm002Wrapper .story02 p.ttl {
	position: absolute;
	left: 0;
	animation-duration: .4s;
	animation-iteration-count: 1;
	animation-delay: .2s;
	animation-fill-mode: forwards;
	opacity: 0;
	z-index: 11;
}
main.crm002Wrapper .story02 .story0201 p.ttl { top: 0; }
main.crm002Wrapper .story02 .story0202 p.ttl,
main.crm002Wrapper .story02 .story0203 p.ttl,
main.crm002Wrapper .story02 .story0204 p.ttl{
	top: 0;
}
main.crm002Wrapper .story02 .story0205 > img + img {
	position: absolute;
	left: 0;
	top: auto;
	bottom: 0;
	z-index: 13;
}
main.crm002Wrapper .story02 .story0205 p.ttl { top: 0; }
main.crm002Wrapper .story02 .story0206 {
	position: relative;
	overflow: hidden;
}
main.crm002Wrapper .story02 .story0206 > img {
	position: relative;
	z-index: 10;
	top: 0;
	left: 0;
}
main.crm002Wrapper .story02 .story0206 > .sttl {
	z-index: 11;
	top: 1.5%;
}
main.crm002Wrapper .story02 .story0206 > .maskTtl {
	position: absolute;
	bottom: -3%;
	left: 0;
	z-index: 11;
}
main.crm002Wrapper .story02 .story0206 > .maskTtl p {
	position: relative;
	mask-image: url("../img/story_02_06_mask.svg");
	mask-repeat: no-repeat;
	mask-position: 0 0;
	mask-size: 100%;
	-webkit-mask-image: url("../img/story_02_06_mask.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
	-webkit-mask-size: 100%;
}
main.crm002Wrapper .story02 .story0206 > .maskTtl p:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 100%);
	transform: skewX(-9deg);
	animation: shine linear 3.9s infinite;
}
main.crm002Wrapper .story02 .story0206 > .maskTtl p img {
	position: relative;
	top: 0;
	left: 0;
}

/* STORY03 */
main.crm002Wrapper .story03 .story0301 {
	position: relative;
	overflow: hidden;
}
main.crm002Wrapper .story03 .story0301 > img {
	position: relative;
	z-index: 10;
	top: 0;
	left: 0;
}
main.crm002Wrapper .story03 .story0301 > video {
	position: absolute;
	z-index: 9;
	width: 35.5%;
	left: 1.5%;
	top: 1.5%;
}
main.crm002Wrapper .story03 .story0302 {
	position: relative;
	z-index: 10;
	margin-top: -5%;
}
main.crm002Wrapper .story03 .story0304 {
	position: relative;
}
main.crm002Wrapper .story03 .story0304 img {
	position: relative;
	z-index: 12;
}
main.crm002Wrapper .story03 .story0304::before {
	content: '';
	width: 100%;
	height: 95%;
	background: #F2EFEB;
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
}

/* STORY04 */
main.crm002Wrapper .story04 { margin-bottom: 2%; }
main.crm002Wrapper .story04 .story0401,
main.crm002Wrapper .story04 .story0404 {
	position: relative;
	overflow: hidden;
}
main.crm002Wrapper .story04 .story0401 > img,
main.crm002Wrapper .story04 .story0404 > img {
	position: relative;
	z-index: 10;
	top: 0;
	left: 0;
}
main.crm002Wrapper .story04 .story0401 > .maskPanel {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}
main.crm002Wrapper .story04 .story0401 > .maskPanel > p:after {
	content: '';
	position: absolute;
	top: 12%;
	left: 0%;
	width: 40%;
	height: 82%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 100%);
	transform: skewX(-36deg);
	animation: shine linear 3.0s infinite;
}
main.crm002Wrapper .story04 .story0401 > .maskPanel + img {
	position: absolute;
	z-index: 8;
}
main.crm002Wrapper .story04 .story0404 > .sttl {
	z-index: 11;
	top: .8%;
}
main.crm002Wrapper .story04 .story0404 > .maskTtl {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 11;
}
main.crm002Wrapper .story04 .story0404 > .maskTtl p {
	position: relative;
	mask-image: url("../img/story_04_05_mask.svg");
	mask-repeat: no-repeat;
	mask-position: 0 0;
	mask-size: 100%;
	-webkit-mask-image: url("../img/story_04_05_mask.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
	-webkit-mask-size: 100%;
}
main.crm002Wrapper .story04 .story0404 > .maskTtl p:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 100%);
	transform: skewX(-9deg);
	animation: shine linear 3.3s infinite;
}
main.crm002Wrapper .story04 .story0404 > .maskTtl p img {
	position: relative;
	top: 0;
	left: 0;
}

/* GUIDE */
main.crm002Wrapper .storyGuide > div{
	position: relative;
	overflow: hidden;
}
main.crm002Wrapper .storyGuide > div > img {
	position: relative;
	z-index: 10;
	top: 0;
	left: 0;
}
main.crm002Wrapper .storyGuide > div video {
	position: absolute;
	z-index: 11;
	width: 42%;
	left: 12.7%;
	top: 8.5%;
	mask-repeat: no-repeat;
	mask-position: 0 0;
	mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
	-webkit-mask-size: 100%;
}

/* FAQ */
main.crm002Wrapper .faqSection {
	background: url("../img/faq_bg.png") repeat 0 0;
	padding-bottom: 5%;
}
main.crm002Wrapper .faqSection dl,
main.crm002Wrapper .faqSection dt,
main.crm002Wrapper .faqSection dd {
	margin: 0;
	padding: 0;
}
main.crm002Wrapper .faqSection dl { position: relative; }
main.crm002Wrapper .faqSection dl:after {
	content: '';
	width: 94.66%;
	position: absolute;
	bottom: 0;
	left: 2.66%;
	height: 1px;
	background: #9d9d9d;
	z-index: 11;
}
main.crm002Wrapper .faqSection dl + dl,
main.crm002Wrapper .faqSection dl + p { padding-top: 3%; }
main.crm002Wrapper .faqSection dl dt {
	cursor: pointer;
	position: relative;
}
main.crm002Wrapper .faqSection dl dt > img {
	position: relative;
	top: 0;
	left: 0;
	z-index: 10;
}
main.crm002Wrapper .faqSection dl dt:before,
main.crm002Wrapper .faqSection dl dt:after {
	content: '';
	height: 2px;
	width: 4%;
	position: absolute;
	top: 50%;
	right: 6.1%;
	background: #9d9d9d;
	z-index: 11;
}
main.crm002Wrapper .faqSection dl dt:after { transform: rotate(90deg); }
main.crm002Wrapper .faqSection dl dd { display: none; }
main.crm002Wrapper .faqSection dl.accOpen:after,
main.crm002Wrapper .faqSection dl.accOpen dt:after { display: none; }

/* CONTACT */
main.crm002Wrapper .contactSection .offerBox.contact a {
	width: 88%;
	left: 6%;
	bottom: 29%;
}
main.crm002Wrapper .contactSection .offerBox.contact a + a { bottom: 5.5%; }
div#container._pcView main.crm002Wrapper .offerBox.contact a[href^="tel:"] { pointer-events: none; }

/* PRICE DOWN */
main.crm002Wrapper .priceDownSection .offerBox.offPriceDown video {
	position: absolute;
	z-index: 10;
	width: 80%;
	left: 10%;
	bottom: 4.6%;
	background: none!important;
}


/******************* 
	OFFER
********************/

main.crm002Wrapper .offerBox.off01 > a {
	width: 92%;
	left: 4.5%;
	bottom: 1.5%;
	transition: .2s all;
}
main.crm002Wrapper .offerBox.off01 > a:hover {
	filter:brightness(1.2);
	transition: .05s all;
}
main.crm002Wrapper .offerBox.off01 > a div {
	position: relative;
	overflow: hidden;
}
main.crm002Wrapper .offerBox.off01 > a div > img {
	position: relative;
	top: 0;
	left: 0;
	z-index: 11;
}
main.crm002Wrapper .offerBox.off01 > a div .twinkle01,
main.crm002Wrapper .offerBox.off01 > a div .twinkle02,
main.crm002Wrapper .offerBox.off01 > a div .twinkle03,
main.crm002Wrapper .offerBox.off01 > a div .twinkle04 {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 12;
}
main.crm002Wrapper .offerBox.off01 > a div span.twinkle01:before,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle01:after,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle02:before,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle02:after,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle03:before,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle03:after,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle04:before,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle04:after {
	content: '';
	position: absolute;
	background: url("../img/off_btn_twincle.png") no-repeat 0 0;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}
main.crm002Wrapper .offerBox.off01 > a div span.twinkle01:before,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle01:after,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle03:before,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle04:before {
	width: 3%;
	height: 10%;
}
main.crm002Wrapper .offerBox.off01 > a div span.twinkle02:before,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle02:after,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle03:after,
main.crm002Wrapper .offerBox.off01 > a div span.twinkle04:after {
	width: 3%;
	height: 9%;
}
main.crm002Wrapper .offerBox.off01 > a div span.twinkle01:before {
	top: 70%;
	left: 19.5%;
	animation: BtnAnim02 3.1s infinite;
}
main.crm002Wrapper .offerBox.off01 > a div span.twinkle01:after{
	top: 10%;
	left: 15%;
	animation: BtnAnim02 3s infinite;
}
main.crm002Wrapper .offerBox.off01 > a div span.twinkle02:before{
	top: 65.5%;
	left: 6%;
	animation: BtnAnim02 2.8s infinite;
}
main.crm002Wrapper .offerBox.off01 > a div span.twinkle02:after{
	top: 66.5%;
	left: 16.5%;
	animation: BtnAnim02 2.6s infinite;
}
main.crm002Wrapper .offerBox.off01 > a div span.twinkle03:before{
	top: 58.5%;
	left: 76.5%;
	animation: BtnAnim02 2.4s infinite;
}
main.crm002Wrapper .offerBox.off01 > a div span.twinkle03:after{
	top: 70.5%;
	left: 83%;
	animation: BtnAnim02 2.2s infinite;
}
main.crm002Wrapper .offerBox.off01 > a div span.twinkle04:before{
	top: 32%;
	right: 11.5%;
	animation: BtnAnim02 3.1s infinite;
}
main.crm002Wrapper .offerBox.off01 > a div span.twinkle04:after{
	top: 19%;
	right: 4%;
	animation: BtnAnim02 3s infinite;
}
main.crm002Wrapper .guarantee { margin-bottom: 3%; }


/* crm002_et_bdl */
main.crm002Wrapper.wakiga04EtBdl .offerWrapSection{
	margin: 5% 0;
}
main.crm002Wrapper.wakiga04EtBdl .offerBox + .offerBox{
	margin-top: 5%;
} 
main.crm002Wrapper.wakiga04EtBdl .offerBox.offEt06 > a,
main.crm002Wrapper.wakiga04EtBdl .offerBox.offEt03 > a{
	width: 85.6%;
	bottom: 4.524886877828054%;
	left: 8%;
}
main.crm002Wrapper.wakiga04EtBdl .offerBox.offEt01 > a{
	width: 80%;
	bottom: 9.666666666666667%;
	left: 10%;
}
main.crm002Wrapper.wakiga04EtBdl .offerBox a:hover img {
    transform: scale(1.03);
    opacity: .9;
    transition: .03s all;
}

/* crm002_et0 */
main.crm002Wrapper.crmEt0 {
	padding-bottom: 0;
}
main.crm002Wrapper.crmEt0 .offerWrapSection .offerBox.off01 > a{
    width: 84.53%;
    left: 7.82%;
	bottom: 7.88%;
}


/*Composition*/
.mainLpCompositionList { margin: 0; }