@charset "utf-8";

/*共通*/
.btmCta.lp01{border-color:#0ce;background:#0ce;}
.btmCta.lp01 a{color:#fff;}
.btmCta.lp01 a:before{border-top-color:#fff;border-right-color:#fff;}
.btmCta.lp01:hover{background:#fff;}
.btmCta.lp01:hover a{color:#0ce;}
.btmCta.lp01:hover a:before{border-color:#0ce;}
.lp main .btmCta{position:relative;margin-top:20px;}

/*CSSアニメーション*/
@keyframes lp01TopFlash{0%{color:#fff;}20%{color:#fff;}21%{color:#0bf;}37%{color:#0bf;}38%{color:#fff;}56%{color:#fff;}57%{color:#0bf;}73%{color:#0bf;}74%{color:#fff;}89%{color:#fff;}90%{color:#0bf;}99%{color:#0bf;}100%{color:#fff;}}
@keyframes lp01TopFlash02{0%{background-color:#fff;}20%{background-color:#fff;}21%{background-color:#0bf;}37%{background-color:#0bf;}38%{background-color:#fff;}56%{background-color:#fff;}57%{background-color:#0bf;}73%{background-color:#0bf;}74%{background-color:#fff;}89%{background-color:#fff;}90%{background-color:#0bf;}99%{background-color:#0bf;}100%{background-color:#fff;}}
@keyframes lp01TopGrid{0%{transform:translateX(-50%) translateY(0%) rotateX(0deg);opacity:0;-webkit-mask-image:linear-gradient(0deg, white 0%, transparent);mask-image:linear-gradient(0deg, white 0%, transparent);}100%{transform:translateX(-50%) translateY(-50%) rotateX(80deg);opacity:0.9;-webkit-mask-image:linear-gradient(0deg, white 40%, transparent);mask-image:linear-gradient(0deg, white 40%, transparent);}}
@keyframes lp01TopLine{0%{width:0;left:0;}50%{width:100%;}100%{width:0;left:100%;}}
@keyframes lp01TopEn01{0%{transform:translateX(0%) translateY(0%) rotateX(80deg);opacity:0;}50%{opacity:1;}100%{transform:translateX(20%) translateY(-20%)rotateX(80deg);opacity:0;}}
@keyframes lp01TopEn02{0%{transform:translateX(0%) translateY(0%) rotateX(80deg);opacity:0;}50%{opacity:1;}100%{transform:translateX(60%) translateY(-60%)rotateX(80deg);opacity:0;}}
@keyframes lp01TopEn03{0%{transform:translateX(0%) translateY(0%) rotateX(80deg);opacity:0;}50%{opacity:1;}100%{transform:translateX(80%) translateY(-80%)rotateX(80deg);opacity:0;}}

/*ヘッダー*/
header .hmenu .headCta{position:absolute;top:27px;right:0;display:block;width:120px;height:36px;background:#fff;border-radius:3px;border:1px solid #0bf;}
header .hmenu .headCta a{display:block;width:100%;height:100%;color:#0bf;padding:6px 10px 6px 34px;box-sizing:border-box;font-size:12px;font-weight:bold;background:#fff url(../layout/ico_mail.png) no-repeat left 8px center / 20px;}

/*キャッチ*/
main > .catch{height:calc(100vh - 77px);-webkit-touch-callout:none;-webkit-user-select:none;padding:20px 0;box-sizing:border-box;}
main > .catch .inner{background:url(../layout/bckg-camp.png) repeat left top;padding:50px 10px 10px;box-sizing:border-box;height:100%;width:calc(100% - 20px);margin:0 auto;}
main > .catch .inner02{overflow:hidden;perspective:100vh;position:relative;width:100%;height:100%;}
.catch .inner02 .grid{display:block;width:400%;height:200%;background:url(../layout/bckg-grid-u-2.gif) repeat left -24px  top;position:absolute;top:0;opacity:0;transform-origin:bottom center;left:50%;transform:translateX(-50%);z-index:0;-webkit-mask-image:linear-gradient(0deg, white 0%, transparent);mask-image:linear-gradient(0deg, white 0%, transparent);}
.onload .catch .inner02 .grid{animation:lp01TopGrid 1.2s forwards ease-out;}
.catch .inner02 .logo{background:url(../layout/logo01.png) no-repeat center / contain;display:block;width:80px;height:50px;position:absolute;bottom:10px;right:10px;opacity:0.6;}
.catch h1{display:block;height:100%;width:100%;font-size:40px;line-height:1.3;position:relative;z-index:1;}
.catch h1 .first{display:block;position:relative;}
.catch h1 .second{display:block;position:relative;}
.onload .catch h1 .first b:nth-of-type(4n),
.onload .catch h1 .second b:nth-of-type(4n-2){animation:lp01TopFlash 0.3s 2 forwards;}
.onload .catch h1 .first b:nth-of-type(4n-1),
.onload .catch h1 .second b:nth-of-type(4n-3){animation:lp01TopFlash 0.3s 2 forwards 0.2s;}
.onload .catch h1 .first b:nth-of-type(4n-2),
.onload .catch h1 .second b:nth-of-type(4n){animation:lp01TopFlash 0.3s 2 forwards 0.4s;}
.onload .catch h1 .first b:nth-of-type(4n-3),
.onload .catch h1 .second b:nth-of-type(4n-1){animation:lp01TopFlash 0.3s 2 forwards 0.6s;}
.catch h1 .eq{display:block;height:20px;width:25px;position:relative;font-size:0;z-index:1;margin:15px 0;}
.catch h1 .eq span{display:block;background:#333;position:absolute;width:100%;height:6px;overflow:hidden;}
.onload .catch h1 .eq span{animation:lp01TopFlash02 0.3s 4 forwards;}
.catch h1 .eq span:first-child{top:0;}
.catch h1 .eq span:last-child{bottom:0;}
.onload .catch h1 b.line{position:relative;}
.onload .catch h1 b.line:before{content:'';display:block;background:#0bf;position:absolute;width:0;height:1px;left:0;bottom:0;}
.onload .catch h1 b.line.l01:before{animation:lp01TopLine 0.1s forwards 0.3s;}
.onload .catch h1 b.line.l02:before{animation:lp01TopLine 0.1s forwards 0.35s;}
.onload .catch h1 b.line.l03:before{animation:lp01TopLine 0.1s forwards 0.4s;}
.onload .catch h1 b.line.l04:before{animation:lp01TopLine 0.1s forwards 0.45s;}
.onload .catch h1 b.line.l05:before{animation:lp01TopLine 0.1s forwards 0.5s;}
.onload .catch h1 b.line.l06:before{animation:lp01TopLine 0.1s forwards 0.55s;}
.catch .inner02 .inspiration{position:absolute;height:1px;width:250px;transform:rotate(125deg);top:360px;left:80px;overflow:hidden;}
.catch .inner02 .inspiration:before{content:'';display:block;background:#0bf;position:absolute;width:0;height:1px;left:0;top:0;}
.onload .catch .inner02 .inspiration:before{animation:lp01TopLine 0.3s forwards 0.6s ease;}
.catch .inner02 .en{position:absolute;height:300px;width:100%;top:310px;left:0;}
.catch .inner02 .en span{display:block;background:rgba(0,187,255,0.5);transform:rotateX(80deg);border-radius:50%;position:absolute;opacity:0;}
.catch .inner02 .en .i01{width:100px;height:100px;left:50px;top:140px;}
.catch .inner02 .en .i02{width:150px;height:150px;left:25px;top:115px;}
.catch .inner02 .en .i03{width:200px;height:200px;left:0;top:90px;}
.onload .catch .inner02 .en .i01{animation:lp01TopEn01 0.6s forwards 0.9s ease;}
.onload .catch .inner02 .en .i02{animation:lp01TopEn02 0.6s forwards 0.9s ease;}
.onload .catch .inner02 .en .i03{animation:lp01TopEn03 0.6s forwards 0.9s ease;}
@media screen and (max-width:340px){
	.catch h1{font-size:38px;}
	.catch .inner02 .inspiration{display:none;}
	.catch .inner02 .en{display:none;}
}

/*メイン*/
#wrapper{width:100%;padding:77px 0 0;}
article .sec{padding:10px;border:none;}
article .sec:before{display:none;}
article .sec .inner{padding-bottom:0;}
article .sec h2.lpTitle{position:relative;line-height:1;margin-bottom:40px;transition:all 0.3s ease-in;padding:13px 0;box-sizing:border-box;}
article .sec h2.lpTitle:before{content:'';background:#fff;filter:blur(10px);display:block;position:absolute;width:100%;height:100%;top:0;bottom:0;margin:auto 0;z-index:0;}
article .sec h2.lpTitle:after{content:'';background:#0bf;display:block;position:absolute;width:100%;height:1px;top:0;bottom:0;margin:auto 0;z-index:0;}
article .sec h2.lpTitle:hover{color:#0bf;}
article .sec h2.lpTitle span{display:inline-block;font-size:22px;font-weight:bold;transition:all 0.3s ease-in-out;position:absolute;z-index:1;background:#fff;padding:0 10px;box-sizing:border-box;margin:0 auto;text-align:center;top:0;bottom:0;left:0;right:0;width:fit-content;}
article .sec h2.lpTitle small{display:block;font-weight:normal;margin-top:6px;font-size:14px;}
article .sec.branding{overflow:visible;}
article .sec.branding h2{padding:40px 10px;box-sizing:border-box;margin-bottom:20px;background:url(../layout/bckg-camp02.png) repeat left top, linear-gradient(#0bf, rgba(255,255,255,0), #0bf);color:#333;padding-bottom:50px;position:relative;}
article .sec.branding h2:before{content:'';display:block;width:120px;height:90px;position:absolute;right:-5px;top:-30px;background:url(../lp01/blanding.png) no-repeat center / contain;}
article .sec.branding h2 .upper{display:block;font-size:17px;}
article .sec.branding h2 .lower{display:block;font-size:29px;line-height:1.5;}
article .sec.branding h2 .lower:before{content:'';display:block;background:rgba(255,204,0,0.4);}
article .sec.branding h2 small{font-size:10px;}
article .sec.branding .memo{border:1px solid #eee;padding:10px;box-sizing:border-box;background:rgba(200,200,200,0.1);margin:20px auto;}
article .sec.branding .memo h3{font-size:16px;font-weight:bold;text-align:center;}
article .sec.branding .memo p{font-size:12px;}
article .sec.branding .question{background:url(../lp01/img_blanding.png) no-repeat center top / auto 200px;padding-top:230px;margin-top:15px;}
article .sec.worries{padding-bottom:50px;background:url(../lp01/arr-answer.png) no-repeat center bottom 12px / 30px;margin-bottom:10px;}
article .sec.worries .inner{background:#0ce url(../layout/bckg-camp02.png) repeat left top;padding:30px 10px;}
article .sec.worries h2{margin-bottom:30px;position:relative;}
article .sec.worries h2:before{content:'';position:absolute;top:0;bottom:0;left:10px;display:block;width:50px;height:50px;background-color:#0ef;border-radius:50%;margin:auto 0;}
article .sec.worries h2:after{content:'';position:absolute;top:0;bottom:0;left:4px;background:url(../lp01/worries.png) no-repeat center bottom / auto 60px;display:block;width:60px;height:60px;margin:auto 0;}
article .sec.worries h2 span{display:block;font-size:19px;font-weight:bold;transition:all 0.3s ease-in-out;z-index:1;background:#fff;padding:3px 10px 3px 35px;box-sizing:border-box;margin:0 auto 0 30px;text-align:center;width:fit-content;border:1px solid #0ef;}
article .sec.worries .worList{position:relative;margin-bottom:5px;}
article .sec.worries .worList li{font-size:17px;font-weight:bold;line-height:1.5;margin-bottom:20px;padding-left:25px;box-sizing:border-box;position:relative;}
article .sec.worries .worList li:before{content:'';display:block;width:12px;height:6px;transform:rotate(-45deg);border-left:3px solid #de3;border-bottom:3px solid #de3;position:absolute;top:6px;left:2px;}
article .sec.worries .worList li:last-child{margin-bottom:0;}
article .sec.policy .policyCont{display:flex;display:-webkit-flex;flex-wrap:wrap;margin-bottom:20px;}
article .sec.policy .policyCont dl{height:fit-content;border-top:1px solid #333;border-left:1px solid #333;box-sizing:border-box;background:#fff;}
article .sec.policy .policyCont dl dt{border-right:1px solid #333;border-bottom:1px solid #333;box-sizing:border-box;text-align:center;padding:2px 5px;}
article .sec.policy .policyCont dl dd{border-right:1px solid #333;border-bottom:1px solid #333;box-sizing:border-box;padding:10px;}
article .sec.policy .policyCont dl dd li{margin-bottom:10px;padding-bottom:10px;position:relative;border-bottom:1px solid #ccc;padding-left:10px;box-sizing:border-box;line-height:1.7;}
article .sec.policy .policyCont dl dd li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
article .sec.policy .policyCont dl dd li:before{content:'';display:block;width:5px;height:5px;background:#333;border-radius:50%;position:absolute;top:10px;left:0;}
article .sec.policy .policyCont .otherPolicy{margin-top:26px;width:40%;border-top:1px solid #666;border-left:1px solid #666;color:#555;}
article .sec.policy .policyCont .otherPolicy dt{border-right:none;background:#f6f6f6;border-bottom:1px solid #666;}
article .sec.policy .policyCont .otherPolicy dd{border-right:none;background:#fcfcfc;border-bottom:1px solid #666;}
article .sec.policy .policyCont .otherPolicy dd li:before{background:#555;}
article .sec.policy .policyCont .ourPolicy{width:60%;}
article .sec.policy .policyCont .ourPolicy dt{padding:8px 5px 2px;background:#0ce url(../layout/bckg-camp02.png) repeat left top;}
article .sec.policy .policyCont .ourPolicy dt img{width:70px;height:auto;margin-right:3px;}
article .sec.example .viList{padding:15px 10px;box-sizing:border-box;display:flex;display:-webkit-flex;flex-wrap:wrap;justify-content:space-between;margin:15px 0;}
article .sec.example .viList li{width:49%;}
article .sec.example .viList li:nth-of-type(2n-1){margin-right:2%;}
article .sec.example .viList li span{display:block;width:100%;height:100%;}
article .sec.example .viList li span a{display:block;width:100%;height:100%;}
article .sec.example .viList li span a img{box-shadow:0 0 3px rgba(0,0,0,0.2);}
.lum-lightbox{background:rgba(0,0,0,.8);}
.lum-lightbox-image-wrapper{position:absolute;top:0;bottom:0;margin:auto 0;}
article .sec .srvList{display:flex;display:-webkit-flex;flex-wrap:wrap;margin-top:20px;padding:15px 10px;}
article .sec .srvList li{width:49%;height:49%;margin-bottom:2%;box-sizing:border-box;background:rgba(0,238,255,0.8) url(../layout/bckg-camp02.png) repeat left top;}
article .sec.options .srvList li{background-color:rgba(0,255,177,0.8);}
article .sec .srvList li:nth-of-type(2n-1){margin-right:2%;}
article .sec .srvList li:nth-last-child(-n+2){margin-bottom:0;}
article .sec .srvList li div{padding-top:100%;position:relative;background:url() no-repeat center;}
article .sec .srvList li:nth-of-type(1) div{background-image:url(../layout/ico_srv01.png);background-size:52%;}
article .sec .srvList li:nth-of-type(2) div{background-image:url(../layout/ico_srv02.png);background-size:50%;}
article .sec .srvList li:nth-of-type(3) div{background-image:url(../layout/ico_srv03.png);background-size:60%;}
article .sec .srvList li:nth-of-type(4) div{background-image:url(../layout/ico_srv04.png);background-size:30%;}
article .sec .srvList li:nth-of-type(5) div{background-image:url(../layout/ico_srv05.png);background-size:45%;}
article .sec .srvList li:nth-of-type(6) div{background-image:url(../layout/ico_srv06.png);background-size:50%;}
article .sec .srvList li:nth-of-type(7) div{background-image:url(../layout/ico_srv07.png);background-size:45%;}
article .sec .srvList li:nth-of-type(8) div{background-image:url(../layout/ico_srv08.png);background-size:50%;}
article .sec.options .srvList li:nth-of-type(1) div{background-image:url(../layout/ico_op01.png);background-size:55%;}
article .sec.options .srvList li:nth-of-type(2) div{background-image:url(../layout/ico_op02.png);background-size:45%;}
article .sec.options .srvList li:nth-of-type(3) div{background-image:url(../layout/ico_op03.png);background-size:45%;}
article .sec.options .srvList li:nth-of-type(4) div{background-image:url(../layout/ico_op04.png);background-size:50%;}
article .sec .srvList li div .txt{position:absolute;text-align:center;left:0;right:0;bottom:10px;display:table;margin:0 auto;height:32px;width:fit-content;}
article .sec .srvList li div .txt span{line-height:1.3;font-size:13px;display:table-cell;vertical-align:middle;font-weight:bold;}
article .sec.price .priceList{padding:20px 15px;box-sizing:border-box;border:1px solid #ccc;margin-bottom:20px;background:#fff;}
article .sec.price .priceList li{display:flex;display:-webkit-flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #ccc;}
article .sec.price .priceList li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
article .sec.price .priceList .left{width:47%;font-size:13px;line-height:1.5;}
article .sec.price .priceList .right{width:84px;font-size:13px;line-height:1;display:table;}
article .sec.price .priceList .right .rightInner{display:table-cell;vertical-align:middle;}
article .sec.price .priceList .right i{font-size:26px;font-weight:bold;display:inline-block;margin:0 5px;}
article .sec.price .priceList .right small{font-size:10px;display:block;margin-top:3px;}
article .sec.price .priceList .right small i{font-size:18px;margin:0 2px;}
article .sec.price .priceList .right small .plus{position:relative;width:10px;height:10px;display:inline-block;margin-right:5px;}
article .sec.price .priceList .right small .plus:before,
article .sec.price .priceList .right small .plus:after{content:'';display:block;height:2px;width:8px;background:#333;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
article .sec.price .priceList .right small .plus:after{transform:rotate(90deg);}
article .sec.price .priceList .line{position:relative;width:calc(53% - 104px);}
article .sec.price .priceList .line span{position:absolute;top:0;bottom:0;left:0;display:block;border-top:1px dashed #aaa;width:100%;height:1px;box-sizing:border-box;margin:auto 0;}
article .sec.flow .flowList li{background:#fff;}
@media screen and (max-width:384px){
	article .sec.worries h2 span{font-size:18px;}
}
@media screen and (max-width:365px){
	article .sec .srvList li div .txt span{font-size:12px;}
	article .sec.options h2.lpTitle{padding:11px 0;}
	article .sec.options h2.lpTitle span{font-size:19px;padding:0 5px;}
}
@media screen and (max-width:340px){
	article .sec.worries h2:before{width:42px;height:42px;}
	article .sec.worries h2:after{left:6px;background-size:auto 50px;width:50px;height:50px;}
	article .sec.worries h2 span{font-size:15px;padding:3px 5px 3px 25px;}
	article .sec.branding h2:before{width:100px;height:70px;}
	article .sec.policy .policyCont .otherPolicy{margin-top:28px;}
	article .sec.policy .policyCont .otherPolicy dt{font-size:12px;}
	article .sec .srvList li div{background-position:center top 35px;}
	article .sec .srvList li:nth-of-type(3) div,
	article .sec .srvList li:nth-of-type(5) div{background-position:center top 45px;}
	article .sec.options .srvList li:nth-of-type(3) div,
	article .sec.options .srvList li:nth-of-type(4) div{background-position:center top 37px;}
	article .sec .srvList li div .txt span{font-size:11px;}
}