@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@700&display=swap');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-size: 100%;font-family: inherit;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}
strong {font-weight:bold;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
figure{margin:0}
option,select {color: #221815;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, picture {display: block;}
img {padding:0; margin:0; vertical-align:bottom; max-width: 100%;}
a { text-decoration:none; color: #221815; transition: .4s;}
a:hover { opacity:0.8;transition: .4s;}

/*
font-family: "Noto Sans JP", sans-serif; Medium 500
*/

body{color:#221815; font-family: "Noto Sans JP", Futura, 'Century Gothic', YuGothic, 'Hiragino Kaku Gothic ProN','Yu Gothic', Meiryo; font-weight: 400;line-height: 1.8; font-size: 16px;}

.page_wrap {display: flex; flex-direction: row-reverse; justify-content: space-between; position: relative; z-index: 0;}
.contents {width: 390px; position: relative; z-index: 10; background-color: #D3E7A7;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); margin-right: 206px; flex-shrink: 0;}

.nav_area {width: 326px;position: fixed; display: flex; justify-content: start; align-items: flex-end; z-index: 10;flex-shrink: 0; height: 100vh; top: 0; left: 105px;}
.nav_area > div {margin-bottom: 100px; width: 100%;}
.nav_area > div ul {margin-top: 50px; border-left:8px solid #98B700; padding: 20px 0px; width: 100%;}
.nav_area > div ul li {margin-left: 28px;}
.nav_area > div ul a {font-size: 16px; font-weight: 600; display: block; border-bottom: 1px solid #000; width: 100%; padding: 15px 0px; position: relative;}
.nav_area > div ul a:after {content: "▶︎"; position: absolute; right: 0; bottom: 15px;}

header {width: 100%; background-color: #000; height: 48px; display: flex; justify-content: center; align-items: center;}

div.mv { aspect-ratio: 9 / 16; overflow:hidden; width: 100%;}
div.mv video {width: 100%;height: 100%; object-fit: cover; image-rendering: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: none !important; filter: none !important; will-change: auto !important;}


div.bg_area {height: 100vh; position: fixed; top: 0; left: 0; width: 100%;}
div.bg_area p.bg_img {position:absolute; bottom: 0; right: 0; z-index: 2; display: block;}
.loop_w {overflow: hidden; width: 100%; position: absolute; top: 80px ; z-index: 0;}
.loop_w > ul.loop { width: max-content; display: flex; flex-wrap: nowrap; animation: loop-scroll 20s linear infinite; gap:0 70px; }
.loop_w > ul.loop li {flex-shrink: 0;}
@keyframes loop-scroll {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

.what {padding: 40px 0px 20px;}
.what_txt {max-width: 342px; margin: 0px auto;}
.what_txt h2 {text-align: center; background-color: #98B700;border-radius: 30px; color: #FFF;font-weight: 600; line-height: 100%; padding: 12px 0px; position: relative;}
.what_txt h2 span {font-size: 16px; }
.what_txt h2 span strong {font-size: 32px; padding: 0px 0.2em;}
.what_txt h2:after {content: ""; width: 16px; height: 14px; clip-path: polygon(100% 0, 0 0, 50% 100%); background-color:#98B700; position: absolute; bottom: -13px; left: 0; right: 0; margin: auto;}
.what_txt h3 {text-align: center; font-size: 32px; font-weight: 900; line-height: 140%; margin-top: 20px;}
.what_txt h3 span {font-size: 40px;}
.what_txt h3 span strong {font-size: 48px;}
.what_txt ul {display: flex; justify-content: space-between; margin-top: 30px;}
.what_txt ul li {width: 106px; flex-shrink: 0; border: 2px dotted #5A6464; padding: 4px; box-sizing: border-box;border-radius: 6px; display: flex; flex-direction: column;}
.what_txt ul li span {display: flex; justify-content: center; align-items: center; background-color:#5A6464 ; color: #FFF; text-align: center; font-size: 16px; font-weight: 700; line-height: 140%; padding: 15px 0px; border-radius: 4px; flex-grow: 1;}
.what_txt + figure { margin-top: 25px;}

.one_life {position: relative;}
.one_life:after {content: ""; width: 100%; height: 304px; background-color:#D3E7A7; position: absolute; bottom: 0; left: 0; z-index:0;}
.hurdle_cont {background-color: #FFF; border-radius: 14px 14px 0px 0px;}
.hurdle {max-width: 342px; margin: 0px auto; padding: 40px 0px 50px;}
.hurdle h2 {border-left:8px solid #98B700; padding: 5px 0px; font-size: 24px; font-weight: 900; padding-left: 20px; line-height: 140%;}
.hurdle h2 + p {margin-top: 24px; font-weight: 600;}
.hurdle ul {margin-top: 24px;}
.hurdle ul li {width: 100%; height: 48px; display: flex; align-items: center;line-height: 100%; border-radius: 12px; padding-left: 16px; box-sizing: border-box; position: relative; color: #FFF;}
.hurdle ul li:after {content: url(../images/hurdle_icon.png); position: absolute; right: 10px; top: 6px; z-index: 1; opacity:0.4;}
.hurdle ul li em {font-size: 14px; font-weight: 700;}
.hurdle ul li strong {color: #42523C; background-color: #FFF; border-radius: 100%; width: 26px; height: 26px; font-size: 18px; font-weight: 700; display: flex; justify-content: center; align-items: center; line-height: 100%; margin: 0px 0.3em;}
.hurdle ul li span {font-size: 16px; font-weight: 700;}
.hurdle ul li:first-child {background-color: #5F7458;}
.hurdle ul li:nth-child(2) {background-color: #42523C;}
.hurdle ul li:last-child {background-color: #2A3127;}
.hurdle ul li + li {margin-top: 10px;}

.againfo {padding: 40px 0px 0px; background-color: #98B700; position: relative;}
.againfo > div.againfo_cont {max-width: 342px; margin: 0px auto;}
.againfo > div.againfo_cont h3 {font-size: 20px; font-weight: 700;}
.againfo > div.againfo_cont h4 {margin-top: 25px;}
.againfo > div.againfo_cont h5 {font-size: 12px; font-weight: 700;}
.againfo > div.againfo_cont figure {margin-top: 25px;}
.againfo div.table {width: 100%; margin-top: 25px; overflow: hidden; overflow-x: auto; overflow-y: hidden;-webkit-overflow-scrolling: touch;}
.againfo div.table::-webkit-scrollbar {display: none;}
.againfo div.table img {width: 640px; height: auto; max-width: none; padding: 0 24px;}
.againfo > p {position: absolute; right: 0; top: -46px;}

.scroll_cont {position: relative; z-index: 1;}

.continue {padding-top: 60px;}
.continue > div {max-width: 342px; margin: 0px auto; }
.continue > div h2 {border-left:8px solid #98B700; padding: 5px 0px; font-size: 24px; font-weight: 900; padding-left: 20px; line-height: 140%;}
.continue > div h2 + p {margin-top: 25px;}
.continue > div figure {margin-top: 0px;}

.voice {background-color: #FFF; padding: 50px 0px ;}
.voice_head {padding-left: 24px;}
.voice_head h2 {border-left:8px solid #98B700; padding: 5px 0px; font-size: 24px; font-weight: 900; padding-left: 20px; line-height: 140%;}
.voice_head h2 + p {margin-top: 25px; font-weight: 600;}
.voice_main {padding-left: 24px; margin-top: 30px;}

.swiper {height: 100%;}
.wiper-wrapper {display: flex; align-items: stretch; height: 100%;}
.swiper-slide {width: 298px; background-color: #99C143; border-radius: 12px; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); padding: 24px; box-sizing: border-box; height: auto;}
.swiper .swiper-slide-item {height: 100%;}
.swiper-slide figure {display: flex; justify-content: space-between;}
.swiper-slide figure picture {width: 117px;}
.swiper-slide figure figcaption {width: calc(100% - 122px);}
.swiper-slide figure figcaption h3 {color: #FFF; line-height: 160%; font-weight: 700;}
.swiper-slide figure figcaption ul {margin-top: 12px;}
.swiper-slide figure figcaption ul li {font-size: 12px; font-weight: 600; color: #FFF;}
.swiper-slide > p {margin-top: 16px; font-size: 14px; font-weight: 700; color: #FFF; line-height: 160%;}

.faq {padding: 50px 0px;}
.faq_cont {max-width: 342px; margin: 0px auto;}
.faq_cont h2 {border-left:8px solid #98B700; padding: 5px 0px; font-size: 24px; font-weight: 900; padding-left: 20px; line-height: 140%;}
.faq_cont > div {margin-top: 20px;}
.faq_cont > div dl dt {border: 1px solid #98B700; background-color: #FFF; border-radius: 8px; padding:20px; display: flex; align-items: center; position: relative; z-index: 1; cursor: pointer;}
.faq_cont > div dl dt:after {content: ""; width: 28px; height: 28px; background: url(../images/aco_bt_off.png) no-repeat; background-size: cover; position: absolute; top: calc(50% - 14px); right: 20px;}
.faq_cont > div dl dt p {display: flex; align-items: center;}
.faq_cont > div dl dt p em {font-size: 32px; font-family: "Roboto", sans-serif; font-weight: 700; color: #98B700; line-height: 100%;}
.faq_cont > div dl dt p span {font-size: 14px; line-height: 150%; margin-left: 10px; padding-right: 70px;}
.faq_cont > div dl dd {background-color: #FFF; margin-top: -10px; border: 1px solid #98B700; position: relative; z-index: 0; padding: 30px 20px 20px;border-radius: 0px 0px  8px 8px; display: none;}
.faq_cont > div dl dd div p {display: flex;}
.faq_cont > div dl dd div p em {font-size: 32px; font-family: "Roboto", sans-serif; font-weight: 700; color: #98B700; line-height: 100%;}
.faq_cont > div dl dd div p span {margin-left: 10px; font-size: 14px; line-height: 150%;}

.faq_cont > div dl dt.active {background-color: #98B700;}
.faq_cont > div dl dt.active:after {background: url(../images/aco_bt_on.png) no-repeat; background-size: cover;}
.faq_cont > div dl dt.active p em {color: #FFF;}
.faq_cont > div dl dt.active p span {color: #FFF;}

.faq_cont > div dl + dl {margin-top: 16px;}

.agency {padding-top: 50px;}
.agency_head {max-width: 342px; margin: 0px auto;}
.agency_head h2 {border-left:8px solid #98B700; padding: 5px 0px; font-size: 24px; font-weight: 900; padding-left: 20px; line-height: 140%;}
.agency_cont {margin-top: 24px; padding: 24px 0px 30px; background-color: #E6E5E1; border-radius: 20px;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);}
.agency_list {max-width: 342px; margin: 0px auto;}
.agency_list div.item { background-color: #FFFFFF; padding: 20px 20px 15px 20px;}
.agency_list div.item figure picture {aspect-ratio: 16 / 9;}
.agency_list div.item figure picture img {width: 100%; height: 100%; object-fit: cover; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);}
.agency_list div.item figure figcaption {margin-top: 15px;}
.agency_list div.item figure figcaption h3 {font-size: 14px; font-weight: 600;}
.agency_list div.item figure figcaption p.link {font-size: 14px; font-weight: 600; margin-top: 5px;}
.agency_list div.item figure figcaption p.link a {font-size: 14px; font-weight: 600;}
.agency_list div.item figure figcaption p.txt {margin-top: 10px; font-size: 12px; line-height: 160%; font-weight: 600;}
.agency_list div.item figure figcaption p.bt {margin-top: 15px;}
.agency_list div.item figure figcaption p.bt a {background-color: #6B00C7; border-radius: 30px; width: 100%; height: 48px; display: flex; justify-content: center; align-items: center; position: relative;}
.agency_list div.item figure figcaption p.bt a span {font-size: 16px; font-weight: 700; color: #FFF;}
.agency_list div.item figure figcaption p.bt a:after {content: ""; width: 22px; height: 22px; background: url(../images/bt_icon.png) no-repeat; background-size: cover; position: absolute; right: 35px; top: calc(50% - 11px);}
.agency_list div.item + div.item {margin-top: 20px;}

footer {background-color: #000; padding: 20px 0px 10px; text-align: center;}
footer p.copy {color: #FFF; font-size: 10px; font-weight: 700; margin-top: 12px;}
@media only screen and (max-width:1780px){
.nav_area {left: 20px;}
}

@media only screen and (max-width:1680px){
div.bg_area p.bg_img {position:absolute; bottom: 0; right: 0; z-index: 2; display: block; padding-left: 346px;}

.page_wrap {flex-direction: column;}
.contents {width: 390px; position: absolute; z-index: 10; background-color: #D3E7A7;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);margin-right: 0; left: 63%;}

}

@media only screen and (max-width:1050px){
.nav_area {display: none;}
div.bg_area p.bg_img {position:absolute; bottom: 0; right: 0; z-index: 2; display: block; padding-left:0px;}

.contents {width: 390px; position: relative; z-index: 10; background-color: #D3E7A7;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);margin-right: 0; left: 20%; margin: 0px auto;}

}


@media only screen and (max-width:660px){

div.bg_area p.bg_img {display: none;}
.contents {width: 390px; position: relative; z-index: 10; background-color: #D3E7A7;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);margin-right: 0; left: 0%; margin: 0px auto;}

}

@media only screen and (max-width:380px){
.loop_w {display:none;}

}