@charset "utf-8";

body{ font-family: "fot-rodin-pron", sans-serif; font-weight: 600; font-style: normal; background: url(../images/bg_patern_02.png) center; }
p{ font-size: 14px; line-height: 1.7;  }
a:hover{ opacity: 0.7; }
#wrapper{ width: 100%; max-width: 768px; margin: 0 auto; background: #fff; }


.animation{ display: flex; align-items: center; animation: infinity-scroll-left 30s infinite linear 1s; }
@keyframes infinity-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.bg-patern{ background: url(../images/bg_patern.png) center/100% no-repeat; }

.slick-dots li{ width: 10px!important; height: 10px!important; }
.slick-dots li button::before{ width: 10px!important; height: 10px!important; content: ""!important; background: #45cddd; border-radius: 100px; }
.slick-dots li.slick-active button::before{ background: #45cddd; }


/* ------------------------------------------------------------ fv */
header h1{ padding: 15px; text-align: center; background: #fff; font-size: 17px; color: #ff6737; }

#fv{ overflow: hidden; margin: 0 0 60px; }
#fv h2{ width: 90%; margin: -30px auto 20px; }
#fv img{ width: 100%; height: auto; }
#fv h3{ width: 90%; margin: 0 auto 20px; }
#fv .item{ display: block; width: 90%; height: auto; margin: 0 auto 30px; }
#fv p{ width: 90%; height: auto; margin: 0 auto 30px; text-align: center; }


/* ------------------------------------------------------------ sv */
#sv{ padding: 0 0 70px; }
#sv h2{ width: 70%; margin: 0 auto 50px; }
#sv .new-item{ padding: 20px 0; }

.bnrs a{ display: block; margin: 0 0 10px; }

.iframe-area{ position: relative; padding: 32% 0 30%; }
.iframe-area:before,
.iframe-area:after{ left: 50%; transform: translate(-50%,0); position: absolute; content: ""; width: 100%; max-width: 690px; }
.iframe-area:before{ top: 0; background: url(../images/bg_iframe-tp.png) center top/cover no-repeat; height: 29.5vw; max-height: 300px; }
.iframe-area:after{ z-index: 2; bottom: -5%; background: url(../images/bg_iframe-btm.png) center top/cover no-repeat; height: 36vw; max-height: 278px; }

.iframe-area .text{ z-index: 2; position: absolute; top: 55px; right: 0; width: 50%; }
.iframe-wrapper{ z-index: 1; position: relative; border: 5px solid #45cddd; border-radius: 15px; position: relative; padding-bottom: 56.25%; height: 0; }
.iframe-wrapper:before{ left: 50%; bottom: -19px; transform: translate(-50%,0); position: absolute; content: ""; width: 100%; height: 19px; background: url(../images/bg_iframe.png) center/cover no-repeat; }

.iframe-wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* ------------------------------------------------------------ recommend */
.changing{ position: relative; padding: 40px 10px; background: #b4e0e5; border-radius: 25px; }
.changing:first-of-type{ margin: 0 0 100px; }
.changing:first-of-type:before{ position: absolute; left: 50%; bottom: -64px; transform: translate(-50%,0); content: ""; width: 70px; height: 35px; background: #b4e0e5; clip-path: polygon(50% 100%, 0 0, 100% 0); }

.changing-title{ z-index: 1; position: absolute; top: -5%; left: 50%; transform: translate(-50%,0); width: 31%; height: auto; }
.changing-item{ display: block; width: 100%; height: auto; margin: 0 auto 10px; }

.changing:last-of-type .changing-item{ width: 80%; }


/* ------------------------------------------------------------ need */
#need{ padding: 70px 0 0; background-position: center -10%; }
.need{ position: relative; padding: 50px 0; background: #eff4f6; }
.need h2{ position: absolute; top: -2%; left: 50%; transform: translate(-50%,0); width: 55%; max-width: 300px; }

.need-item .item:first-of-type{ padding: 0 0 100px; }


/* ------------------------------------------------------------ cta */
.cta{ padding: 100px 0; }
.cta h2{ width: 85%; margin: 0 auto; }


/* ------------------------------------------------------------ story */
#story h2{ cursor: pointer; transition: all 0.5s; padding: 17px; font-size: 20px; text-align: center; color: #fff; background: #48c6df; border-radius: 25px; }
#story h2.is-mordal{ border-radius: 25px 25px 0 0; }

.mordal_content{ padding: 16px 5%; background: #b4e0e5; border-radius: 0 0 25px 25px; }
.mordal_content h3{ padding: 0 0 20px; font-size: 18px; text-align: center; line-height: 2; }
.mordal_content h3 span{ margin: 0 5px 0 0; padding: 5px 7px; border-radius: 5px; color: #fff; font-size: 19px; background: #48c6df; }
.mordal_content p{ padding: 0 0 28px; text-align: center; line-height: 1.7; }
.mordal_content .item{ display: block; width: 80%; margin: 0 auto; }

.mordal_content > div:first-of-type{ padding: 0 0 65px; }

.mordal_content > div:last-of-type p{ padding: 0 0 30px; }
.mordal_content > div:last-of-type .item{ width: 90%; }

.btn-close{ cursor: pointer; display: block; width: 45px; height: 45px; margin: 40px auto 0; }
.js-mordal { display: none; }


/* ------------------------------------------------------------ feature */
#feature{ padding: 100px 0; }

.feature-content:not(:last-of-type){ padding: 0 0 120px; }
.feature-content .item{ display: block; width: 90%; height: auto; margin: 0 auto 30px; }
.feature-content h2{ padding: 0 0 30px; font-size: 25px; color: #00b4db; text-align: center; }
.feature-content p{ padding: 0 0 50px; text-align: center;}
.feature-content .link{ display: block; width: 80%; margin: 0 auto; padding: 17px; font-size: 15px; color: #fff; background: #00b4db; text-align: center; }

.feature-content > div{ padding: 0 0 20px; }

.feature-content:last-of-type h2{ padding: 0 0 19px; }


/* ------------------------------------------------------------ footer */
footer{ padding: 150px 0 40px; }
footer a{ display: block; margin: 0 auto 20px; }
footer .ig{ width: 12%; height: auto; }
footer .people{ width: 25%; height: auto; }




/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
}