@charset "utf-8";

h1{ display:none; }
#mainimg,
#sp_main{ margin:auto; line-height:0; position:relative; width:100%; }
#mainimg{ max-width:1100px; }
#sp_main{ max-width:767px; }
.main1,
.main2,
.main3,
.main4{ position:absolute; top:0; left:0; opacity:0; }
.main1.animate-main1,
.main2.animate-main2,
.main3.animate-main3,
.main4.animate-main4{ opacity:1; }
.animate-main1{ animation:main1 1s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes main1{
	0%{ transform:scale(0.8); opacity:0; }
	100%{ opacity:1; transform:scale(1); }
}
.animate-main2{ animation:main2 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes main2{
	0%{ transform:scale(0.8); opacity:0; }
	100%{ opacity:1; transform:scale(1); }
}
.animate-main3{ animation:main3 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes main3{
	 0%{ transform:translateY(40px) scale(0.8); opacity:0; }
	100%{ transform:translateY(0) scale(1.0); }
	 80%, 100%{ opacity:1; }
}
.animate-main4{ animation:main4 1s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
@keyframes main4{
	 0%{ transform:translateY(30px); opacity:0; }
	80%, 100%{ opacity:1; }
	100%{ transform:translateY(0); }
}
@media only screen and (max-width:767px){
	.animate-main3{ animation:main3 1s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
	@keyframes main3{
		0%{ transform:translateX(-180px); opacity:0; }
		100%{ transform:translateX(0); }
		40%, 100%{ opacity:1; }
	}
 .animate-main4{ animation:main4 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
	@keyframes main4{
		0%{ transform:translateY(40px) scale(0.8); opacity:0; }
		100%{ transform:translateY(0) scale(1.0); }
		80%, 100%{ opacity:1; }
	}
}

/* POINT */
#point{ background:linear-gradient(90deg,rgba(0,111,190,1) 0%,rgba(0,87,164,1) 100%); padding:50px 20px; position:relative; z-index:2}
#point .row{ display:flex; flex-wrap:wrap; justify-content:center; }
#point .col{ position:relative; margin:0 0 0 10px; width:calc(100%/3 - 7px); }
#point .col:first-child{ margin:0; }
#point .col{ opacity: 0; transform: translateY(-50px); }
.animate{ animation: poyoyon 0.6s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards; }
@keyframes poyoyon{
	0%{ transform: translateY(-50px); opacity: 0; }
	100%{ transform: translateY(0); }
	 60%,100%{ opacity: 1; }
}
#point img{ width:auto; height:auto; }
#point .col figcaption{ position:absolute; width:100%; top:55%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); font-size:3vw; line-height:1.5; letter-spacing:-1px; color:#005BAC; }
@media only screen and (min-width:768px){
	#point{ padding:50px 65px 5px; }
	#point .col{ width:calc(100%/3 - 20px); margin:30px 30px 0 0; }
	#point .col:nth-child(3n){ margin:30px 0 0; }
	#point .col:nth-child(-n+2){ margin:0 30px 0 0; }
	#point .col:nth-child(3){ margin:0; }
	#point .col figcaption{ font-size:2.8vw; line-height:1.4; }
}
@media only screen and (min-width:1124px){
	#point .col figcaption{ font-size:34px; }
}

/* APPEAL */
#appeal{ padding:80px 20px 50px; position:relative; z-index:1; background-color:rgba(255,255,255,0.2); background-blend-mode:lighten; background-size:cover; background-repeat:no-repeat; background-image:url(../img/back.svg); }
#appeal::before{ content:''; position:absolute; top:0; left:0; margin:auto; width:100%; height:100%; z-index:0; background-size:contain; background-repeat:no-repeat; background-image:url(../img/deco1.webp); background-position:top; }
#appeal h2{ text-align:center; }
#appeal p{ text-align:justify; }
#appeal .apl-box{ max-width:915px; margin:15px auto 0; position:relative; z-index:2; }
#appeal .apl-sp{ margin:30px 0 0; }
#appeal .apl-sp img{ width:90px; display:inline; float:right; margin:0 0 0 10px; }
#appeal .row{ display:none; flex-wrap:wrap; align-items:end; justify-content:end; }
#appeal figure{ position:relative; text-align:center; }
.apl-pic img{ width:40vw; }
.apl-br{ display:none; }
@media only screen and (min-width:768px){
	.apl-pic img{ width:78vw; }
	#appeal{ padding:115px 20px 88px; }
	#appeal p{ max-width:512px; margin:0 0 0 12vw; font-size:18px; line-height:2; }
	#appeal .apl-box{ margin:25px auto 0; }
	#appeal .apl-sp{ display:none; }
	#appeal .col img{ width:16vw; }
}
@media only screen and (min-width:768px){
	#appeal .row{ display:flex; }
	#appeal .apl-sp img{ display:none; }
}
@media only screen and (min-width:880px){
	#appeal .col:nth-child(odd){ width:740px; margin:0 -60px 0 0; }
	#appeal p{ font-size:1.4em; line-height:2.2; margin:0 0 22px; }
}
@media only screen and (min-width:1024px){
	#appeal{ padding:164px 20px 88px; }
	#appeal .apl-box{ margin:45px auto 0; }
	#appeal .row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:end; margin:0 auto 0 0; }
	#appeal .col:nth-child(odd){ margin:0; width:calc(100% - 168px); }
	#appeal .col:nth-child(even){ width:168px; }
	#appeal p{ max-width:100%; font-size:1.2em; line-height:2; font-size:24px; }
	.apl-pic img{ width:auto; }
	.apl-br{ display:block; }
}

/* WORRY */
#worry{ padding:60px 20px; background-size:contain; background-color:#606261; background-repeat:no-repeat; background-image:url(../img/w_back.webp); background-position:top left; }
#worry h2{ text-align:right; margin:0 0 15px 0; }
.wry-pc{ display:none; }
.wry-sp{ width:75%; }
.wry-box{ padding:30px 15px; line-height:0; position:relative; background-color:rgba(255, 255, 255, 0.9); }
.wry-frame{ margin:auto; display:block; }
.wry-box ul{ margin:auto; max-width:800px; }
.wry-box ul li{ line-height:2; position:relative; padding:0 0 0 20px; margin:0 0 6px; }
.wry-box ul li:last-child{ margin:0; }
.wry-box ul li::before{ content:''; position:absolute; top:0.4em; left:0; margin:auto; width:20px; height:20px; z-index:0; background-size:contain; background-repeat:no-repeat; background-image:url(../img/check.svg); background-position:top; }
.wry-img{ display:none; position:absolute; bottom:0; right:10px; max-width:144px; width:30vw; }
@media only screen and (min-width:768px){
	.wry-pc{ display:inline; }
	.wry-sp{ display:none; }
	#worry{ background-size:cover; background-position:top right; background-image:url(../img/worry_back.webp); padding:35px 30px; }
	#worry h2{ text-align:left; margin:0 0 18px 5.5vw; }
	#worry h2 img{ width:65vw; }
	.wry-box{ padding:40px 45px; }
	.wry-img{ display:inline; width:13vw; right:3.8em; }
}
@media only screen and (min-width:930px){
	.wry-box ul li{ font-size:28px; padding:0 0 0 28px; }
	.wry-box ul li::before{ width:28px; height:28px; }
}
@media only screen and (min-width:1024px){
	#worry{ padding:45px; }
	#worry h2{ margin:0 0 22px 56px; }
	#worry h2 img{ width:auto; }
	.wry-box{ padding:50px 20px; }
	.wry-img{ width:auto; }
}

/* CONSULT */
#consult{ position:relative; background-size:cover; background-repeat:no-repeat; background-image:url(../img/consult_back.webp); padding:60px 20px 70px; }
#consult::before{ content:''; position:absolute; bottom:0; left:0; margin:auto; width:100%; height:100%; z-index:0; background-size:contain; background-repeat:no-repeat; background-image:url(../img/solution.webp); background-position:bottom; }
#consult figure{ margin:0 0 30px; }
#consult .btn a{ padding:0 30px 0 0; position:relative; display:flex; justify-content:center; align-items:center; max-width:230px; font-size:18px; border-radius:50px; height:50px; margin:auto; background:linear-gradient(90deg,rgba(0,116,193,1) 0%,rgba(0,78,162,1) 50%,rgba(0,116,193,1) 100%); background-size:200% 100%; border:none; text-align:center; color:#fff; }
#consult .btn a::before{ content:''; position:absolute; top:0; bottom:0; right:10px; margin:auto; width:30px; height:30px; z-index:0; background-size:contain; background-repeat:no-repeat; background-image:url(../img/btn_arrow.svg); background-position:center; }
#consult .btn a:hover{ background-position:100% 0; }
#consult .desc{ position:relative; z-index:2; }
@media only screen and (min-width:768px){
	#consult{ padding:70px 20px 150px; }
	#consult .btn a{ padding:0 40px 0 0; font-size:20px; max-width:400px; height:70px; }
	#consult .btn a::before{ right:20px; width:46px; height:46px; }
}
@media only screen and (min-width:1024px){
	#consult{ padding:70px 20px 210px; }
}

/* FEATURE */
.between{ position:relative; }
.between h2{ position:absolute; display:table; z-index:2; top:0; bottom:0; left:0; right:0; margin:auto; }
#feature{ position:relative; background-color:#FFF; padding:110px 20px 50px; background-size:cover; background-repeat:no-repeat; background-image:url(../img/back.svg); }
#feature::after{ content:''; position:absolute; mix-blend-mode:multiply; bottom:0; left:0; width:100%; height:100%; background:linear-gradient(90deg,rgba(0, 153, 217, 1) 0%, rgba(0, 134, 201, 1) 100%); }
#feature .area{ position:relative; z-index:2; }
#feature .br{ display:block; }
.fut-num{ position:absolute; top:-3em; left:0; width:90px; mix-blend-mode:multiply; }
.fut-box{ margin:0 0 80px; position:relative; padding:40px 20px 20px; background:#FFF; }
.fut-box:last-child{ margin:0; }
.fut-ttl{ text-align:center; font-size:24px; }
.fut-red{ color:#E7336E; font-size:1.6em; }
.fut-img img{ width:60vw; }
.fut-font{ margin:0 0 10px; font-size:20px; font-weight:bold; text-align:center; color:#2168B6; }
.ful-left{ margin:0 -15px 0 0; }
.ful-right{ margin:0 0 0 -15px; }
@media only screen and (min-width:460px){
	#feature .br{ display:none; }
	.ful-left{ margin:0 -25px 0 0; }
	.ful-right{ margin:0 0 0 -25px; }
}
@media only screen and (min-width:768px){
	#feature{ padding:150px 0 30px; }
	.fut-num{ top:-3.8em; left:5%; width:120px; }
	.fut-grid{ display:flex; flex-wrap:wrap; align-items:center; }
	.fut-box:nth-child(1){ margin:0 auto 90px 50px; }
	.fut-box:nth-child(2){ margin:0 50px 90px auto; }
	.fut-box:nth-child(3){ margin:0 auto 0 50px; }
	.fut-ttl{ font-size:34px; display:table; margin:0 0 0 auto; }
	.fut-box{ padding:55px 20px 40px; }
	.fut-txt{ width:calc(100% - 220px); margin:0 0 0 20px; }
	.fut-img{ width:200px; }
	.fut-img img{ width:auto; }
	.fut-font{ text-align:left; font-size:22px; }
}
@media only screen and (min-width:1024px){
	#feature{ padding:115px 0 30px; }
	.fut-num{ top:-3.5em; left:6%; width:150px; }
	.fut-box:nth-child(1){ margin:0 auto 100px 70px; }
	.fut-box:nth-child(2){ margin:0 70px 100px auto; }
	.fut-box:nth-child(3){ margin:0 auto 0 70px; }
	.fut-ttl{ font-size:45px; display:table; margin:0 0 0 auto; }
	.fut-box{ padding:55px 20px 45px; }
	.fut-img{ width:250px; }
	.fut-txt{ width:calc(100% - 295px); margin:0 0 0 45px; }
	.fut-font{ font-size:26px; }
	.fut-desc{ line-height:2.1; font-size:18px; }
}

/* ONE STOP */
#onestop{ padding:80px 20px 50px; position:relative; background-color:#FFF; background-size:cover; background-position:bottom; background-repeat:no-repeat; background-image:url(../img/one_back.webp); }
#onestop::before{ content:''; position:absolute; top:-1px; left:0; margin:auto; width:100%; height:100%; z-index:0; background-size:contain; background-repeat:no-repeat; background-image:url(../img/deco3.svg); background-position:top; }
.one-img{ margin:20px 0 0; }
.one-pc{ display:none; }
.one-list{ margin:0 auto 15px; display:flex; align-items:center; }
.one-list li{ line-height:0; margin:0 10px 0 0; }
.one-list li:last-child{ margin:0; }
.one-intro{ display:table; margin:auto; text-align:center; font-size:4vw; }
.one-br{ display:block; }
@media only screen and (min-width:768px){
	.one-img{ display:flex; align-items:center; justify-content:center; }
	.one-pc{ display:inline; }
	.one-sp{ display:none; }
	.one-intro{ font-size:18px; }
	.one-list{ max-width:60vw; }
	.one-list li{ margin:0 35px 0 0; }
}
@media only screen and (min-width:860px){
	.one-br{ display:none; }
}
@media only screen and (min-width:980px){
	.one-br{ display:none; }
}
@media only screen and (min-width:1024px){
	#onestop{ padding:160px 20px 40px; }
	.one-intro{ font-size:28px; }
	.one-list{ max-width:708px; display:flex; align-items:center; }
	.one-list li{ margin:0 35px 0 0; }
}
@media (min-width:768px) and (max-width:980px){
	.one-right{ width:84vw; }
	.one-left{ width:11vw; }
}

/* MEDIA */
#media{ position:relative; width:auto; padding:60px 20px; background:linear-gradient(90deg,rgba(0,116,193,1) 0%,rgba(0,78,162,1) 100%); }
.mda-ttl{ max-width:740px; margin:0 auto 20px; }
.mda-ttl h2{ font-size:35px; text-align:center; margin:0 0 15px; color:#FFF; }
.mda-ttl p{ display:table; margin:auto; color:#FFF; }
.mda-list .mda-col{ background:#FFF; padding:20px; border-radius:12px; margin:0 0 20px; }
.mda-list .mda-col:last-child{ margin:0; }
.mda-list h3{ text-align:center; font-size:25px; }
.mda-list figure{ margin:10px 0; }
.mda-list p{ line-height:1.2; font-size:12px; text-align:center; }
@media only screen and (min-width:768px){
	#media{ padding:50px 55px 58px; }
	.mda-ttlh2{ font-size:38px; }
	.mda-list{ display:flex; flex-wrap:wrap; }
	.mda-list .mda-col{ width:calc(50% - 15px); }
	.mda-list .mda-col:nth-child(odd){ margin:30px 15px 0 0; }
	.mda-list .mda-col:nth-child(even){ margin:30px 0 0 15px; }
	.mda-list .mda-col:nth-child(1){ margin:0 15px 0 0; }
	.mda-list .mda-col:nth-child(2){ margin:0 0 0 15px; }
	.mda-ttl h2{ font-size:40px; }
	.mda-ttl p{ font-size:20px; }
	.mda-ttl{ margin:0 auto 41px; }
	.mda-list h3{ font-size:34px; }
	.mda-list p{ font-size:20px; }
	.mda-list figure{ margin:5px 0; }
}
@media only screen and (min-width:1024px){
	#media{ padding:50px 55px 58px; }
	.mda-ttlh2{ font-size:38px; }
	.mda-list .mda-col{ width:calc(50% - 25px); }
	.mda-list .mda-col:nth-child(odd){ margin:50px 25px 0 0; }
	.mda-list .mda-col:nth-child(even){ margin:50px 0 0 25px; }
	.mda-list .mda-col:nth-child(1){ margin:0 25px 0 0; }
	.mda-list .mda-col:nth-child(2){ margin:0 0 0 25px; }
	.mda-ttl h2{ font-size:55px; }
	.mda-ttl p{ font-size:22px; }
	.mda-ttl{ margin:0 auto 41px; }
	.mda-list h3{ font-size:34px; }
	.mda-list p{ font-size:20px; }
	.mda-list figure{ margin:5px 0; }
}

/* SUPPORT */
#support{ background-color:rgba(255,255,255,0.2); background-blend-mode:lighten; background-size:cover; background-repeat:no-repeat; background-image:url(../img/back.svg)}
#support h2{ font-size:20px; text-align:center; margin:0 0 20px; text-shadow:2px 2px 10px #fff,2px 2px 10px #fff,2px 2px 10px #fff,2px 2px 10px #fff; }
#support h2 span{ font-size:35px; display:block; color:#E7336E; }
.sup-box{ background-repeat:no-repeat; background-image:url(../img/solution.png); background-position:bottom; }
.sup-box:nth-child(1){ padding:130px 20px 45px; background-size:75%; background-image:url(../img/sol1.webp); background-position:top left; }
.sup-box:nth-child(2){ padding:120px 20px 60px; background-size:65%; background-image:url(../img/sol2.webp); background-position:top right; }
.sup-row{ max-width:280px; margin:auto; }
.sup-row .slick-track{ display:flex; }
.sup-row .slick-slide{ height:auto!important; }
.sup-col{ background:#FFF; padding:30px 20px; border-radius:30px; margin:10px 15px; box-shadow:0 0 15px 0 rgba(0,0,0,0.2); }
.sup-img{ margin:0 0 5px; }
.sup-img img{ margin:auto; }
.sup-txt{ line-height:1.8; text-align:center; }
.sup-txt h3{ text-align:center; color:#036EB8; font-size:24px; }
.sup-txt p{ font-size:14px; }
.sup-adjust{ color:#036EB8; letter-spacing:-1px; font-size:22px; }
@media only screen and (min-width:768px){
	#support h2{ font-size:4.4vw; }
	#support h2 span{ font-size:7vw; }
	.sup-box:nth-child(1){ background-size:45%; padding:60px 20px 75px; background-position:top -2% left -4%; }
	.sup-box:nth-child(2){ padding:60px 20px; background-size:46%; background-position:top 3% right 0; }
	.sup-row{ display:flex; flex-wrap:wrap; justify-content:center; max-width:900px; margin:auto; }
	.sup-col{ width:calc(100%/3 - 14px); margin:0 20px 0 0; padding:30px 10px; max-width:none; border-radius:20px; }
	.sup-col:nth-child(3n){ margin:0; }
	.sup-txt h3{ font-size:20px; }
	.sup-txt p{ font-size:16px; }
	.sup-adjust{ font-size:21px; }
}
@media only screen and (min-width:1024px){
	#support h2{ font-size:46px; line-height:1.3; margin:0 0 20px; }
	#support h2 span{ font-size:75px; }
	.sup-box:nth-child(1){ padding:80px 20px 75px; }
	.sup-box:nth-child(2){ padding:75px 20px 80px; }
	.sup-col{ width:calc(100% / 3 - 20px); margin:0 30px 0 0; padding:30px 20px; border-radius:30px; }
	.sup-txt h3{ font-size:28px; margin:0 0 10px; }
	.sup-txt p{ font-size:18px; }
	.sup-adjust{ font-size:25px; }
}
@media (min-width:768px) and (max-width:980px){
	#support h2 img{ width:55vw; }
}

/* FAQ */
#faq{ position:relative; width:auto; padding:60px 20px; background-size:cover; background-repeat:no-repeat; background-image:url(../img/back.svg); }
#faq::after{ content:''; position:absolute; mix-blend-mode:multiply; bottom:0; left:0; width:100%; height:100%; background:linear-gradient(90deg,rgba(0,116,193,1) 0%,rgba(0,78,162,1) 100%); }
#faq .area{ position:relative; z-index:2; }
#faq h2{ font-size:35px; text-align:center; color:#FFF; margin:0 0 20px; }
.qa-box{ max-width:1100px; width:100%; margin:0 auto; position:relative; z-index:10; }
.qa-box > dl > dt > .icon,
.qa-box > dl > dd > .icon{ font-size:20px; font-style:normal; line-height:1.2; margin-right:10px; }
.qa-box > dl > dt > .icon{ color:#036EB8; }
.qa-box > dl > dt .cross::before,
.qa-box > dl > dt .cross::after{ content:""; display:inline-block; background-color:#fff; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; }
.qa-box > dl > dt > .title,
.qa-box > dl > dd > .content{ line-height:1.7; font-style:normal; }
.qa-box > dl > dt > .title{ color:#036EB8; }
.qa-box > dl > dt{ background-color:#fff; display:flex; align-items:start; padding:10px 45px 10px 15px; position:relative; }
.qa-box > dl > dt .cross{ width:20px; height:20px; border-radius:50px; position:absolute; top:50%; right:15px; transform:translateY(-50%); background:#036EB8; }
.qa-box > dl > dt .cross::before{ width:1px; height:10px; transition:transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); }
.qa-box > dl > dt .cross::after{ width:10px; height:1px; }
.qa-box > dl > dd{ margin:5px 0 0; background-color:#fff; display:flex; align-items:top; margin-bottom:16px; padding:0 20px; max-height:0; overflow:hidden; transition:all 0.8s cubic-bezier(0.19, 1, 0.22, 1); }
.qa-box > dl > dd.is-open{ max-height:100px; padding:10px 20px; }
.qa-box > dl > dt.is-open .cross::before{ transform:translateX(-50%) rotate(90deg); }
@media only screen and (min-width:768px){
	#faq{ padding:50px 55px 58px; }
	#faq h2{ font-size:40px; margin:0 0 36px; }
	.qa-box > dl > dt{ padding:12px 50px; }
	.qa-box > dl > dd{ padding:0px 50px; }
	.qa-box > dl > dd.is-open{ padding:10px 50px; }
	.qa-box > dl > dt > .title,
	.qa-box > dl > dd > .content{ font-size:20px; }
	.qa-box > dl > dt > .icon,
	.qa-box > dl > dd > .icon{ font-size:25px; line-height:1.4; }
	.qa-box > dl > dt .cross{ width:34px; height:34px; }
	.qa-box > dl > dt .cross::before{ height:10px; }
	.qa-box > dl > dt .cross::after{ width:10px; }
}
@media only screen and (min-width:1024px){
 .qa-box > dl > dt > .title,
 .qa-box > dl > dd > .content{ font-size:26px; }
 .qa-box > dl > dt > .icon,
 .qa-box > dl > dd > .icon{ font-size:30px; }
}