@charset 'utf-8';
/*
 * name:xf_recovery.css
 * author:sovanda nulo
*/

/* xf_recovery
------------------------------------------------ */
.xf-section,
.xf-section--wrap { display: block; position: relative; }
.xf-section { margin-top: 130px; }

    @media only screen and (max-width: 768px) {
        body { overflow: clip }
        .xf-section { margin-top: 60px; }
    }

.swiper-scrollbar { left: 0; width: 100%; height: 3px; background: #ccc; opacity: 1 !important; }
.swiper-scrollbar-drag { background: #151515; }
.swiper-pagination { bottom: 0 !important; }
.swiper-pagination-bullet { height: 15px; width: 15px; background: #ccc; margin: 0 5px !important; opacity: 1!important; }
.swiper-pagination-bullet:hover,
.swiper-pagination-bullet-active { background: #151515; }
.swiper-pagi { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; position: absolute; top: 50%; border: 1px solid #151515; background: #151515; border-radius: 50%; transform: translateY(-50%); box-sizing: border-box; z-index: 5; transition: linear .2s; }
.swiper-pagi span { display: block; width: 6.1px; height: 9.4px; background-image: url(./slide-arrow.svg); background-repeat: no-repeat; background-size: 100% 100%; }
.swiper-pagi--prev { left: -90px; }
.swiper-pagi--next { right: -90px; }
.swiper-pagi--next span { transform: rotate(180deg); }

    @media only screen and (min-width: 768px) {
        .swiper-scrollbar { display: none !important; }
        .swiper-pagi:hover { background: none; }
        .swiper-pagi:hover span { background-image: url(./slide-arrow-b.svg); }
    }

    @media screen and (max-width: 768px) {
        .swiper-pagi { display: none; }
    }

/*section about*/
#xf-about { margin: 0; }
.xf-about--title { font-size: 32px; font-size: 3.2rem; font-weight: bold; line-height: 1.4; padding-bottom: 10px; border-bottom: 1px solid #959595; margin-bottom: 45px; }
.xf-about--banner { display: block; margin-bottom: 80px; }
.xf-about__desc { display: block; position: relative; text-align: center; }
.xf-about__desc--title { font-size: 32px; font-size: 3.2rem; font-weight: bold; line-height: 1.4; margin-bottom: 3px; }
.xf-about__desc--sub { font-size: 22px; font-size: 2.2rem; font-weight: bold; line-height: 1.4; }
.xf-about__desc--cmn { font-size: 18px; font-size: 1.8rem; line-height: 1.6; margin-top: 26px; }

    @media only screen and (max-width: 768px) {
        .xf-about--title { font-size: 22px; margin-bottom: 30px; padding-bottom: 5px; }
        .xf-about--banner { margin-bottom: 60px; }
        .xf-about__desc--title { font-size: 22px; margin-bottom: 6px; }
        .xf-about__desc--sub { font-size: 14px; }
        .xf-about__desc--cmn { font-size: 18px; margin-top: 16px; text-align: left; }
    }

/*section xf-links*/
#xf-links { position: sticky; left: 0; top: 20px; margin-top: 56px; z-index: 10; }
.xf-links--list { display: flex; flex-wrap: wrap; }
.xf-links--list li { font-size: 22px; font-size: 2.2rem; font-weight: bold; width: 33.33%; box-sizing: border-box; text-align: center; }
.xf-links--list li span,
.xf-links--list li a { padding: 19px 0; color: #fff; background: #151515; border: 1px solid #151515; display: block; transition: linear .2s; }
.xf-links--list li span { background: #fff; color: #151515; }
.xf-links--list li a:after { content: ''; display: inline-block; vertical-align: -1px; margin-left: 10px; width: 18px; height: 18px; background-image: url(./arrow-links.svg); background-repeat: no-repeat; background-size: 100% 100%; transition: background-image 0.2s; }
.xf-links--list li:last-child a { border-left-color: #fff !important; }
.xf-links--list li:first-child span { border-right: none; }

    @media only screen and (min-width: 768px) {
        .xf-links--list li a:hover { background: #777; border-color: #777; }
        .xf-links--list li a:hover:after { background-image: url(./arrow-links-h.svg); }
    }

    @media only screen and (max-width: 768px) {
        #xf-links { top: 82px; margin-top: 36px; }
        .xf-links--list li { font-size: 16px; }
        .xf-links--list li span,
        .xf-links--list li a { padding: 0; min-height: 60px; display: flex; align-items: center; justify-content: center; }
        .xf-links--list li span { font-size: 13px; line-height: 1.5em; text-align: left; }
        .xf-links--list li a:after {  margin-left: 5px; width: 14px; height: 14px; }
    }

/*section xf-daily*/
#xf-daily { padding: 130px 0; }
#xf-daily:before { content: ''; display: block; position: absolute; width: 100vw; height: 100%; left: 50%; top: 0; transform: translateX(-50%); background: #F3F3F3; }
.xf-daily--title { font-size: 32px; font-size: 3.2rem; font-weight: bold; line-height: 1.4; text-align: center; }
.xf-daily--desc { font-size: 18px; font-size: 1.8rem; line-height: 1.6; margin-top: 26px; text-align: center; }
.xf-daily--pic { display: block; margin-top: 60px; }

    @media only screen and (max-width: 768px) {
        #xf-daily { padding: 60px 0; margin-top: 70px; }
        .xf-daily--title { font-size: 22px; }
        .xf-daily--desc { font-size: 18px; margin-top: 16px; text-align: left; }
        .xf-daily--pic { margin: 33px -20px 0; }
    }

/*section xf-ability*/
#xf-ability {  }
.xf-ability--title { font-size: 32px; font-size: 3.2rem; font-weight: bold; line-height: 1.4; text-align: center; position: relative; }
.xf-ability--desc { font-size: 18px; font-size: 1.8rem; line-height: 1.6; margin-top: 26px; text-align: center; }
.xf-ability--pic { display: block; margin-top: 20px; }

    @media only screen and (max-width: 768px) {
        .xf-ability--title { font-size: 22px; }
        .xf-ability--desc { font-size: 18px; margin-top: 16px; text-align: left; }
    }

/*section xf-technology*/
#xf-technology { padding-bottom: 130px; }
#xf-technology:before { content: ''; display: block; position: absolute; width: 100vw; height: calc( 100% - 400px ); left: 50%; top: 400px; transform: translateX(-50%); background: linear-gradient(#fff 0%, #6dc5ee 11.5%, #002 100%); }
.xf-technology--title { font-size: 32px; font-size: 3.2rem; font-weight: bold; line-height: 1.4; text-align: center; position: relative; margin-bottom: 25px; }
.xf-technology__list { display: block; }
.xf-technology__list--pic { display: block; margin-bottom: 30px; }
.xf-technology__list--title { font-size: 22px; font-size: 2.2rem; line-height: 1.4; font-weight: bold; text-align: center; margin-bottom: 10px; }
.xf-technology__list--desc { font-size: 15px; font-size: 1.5rem; line-height: 1.6; }
.xf-technology__huron { display: block; position: relative; margin-top: 120px; color: #fff; }
.xf-technology__huron--title { font-family: Roboto; font-size: 50px; font-size: 5rem; letter-spacing: .1em; line-height: 1.6; font-weight: bold; text-align: center; margin-bottom: 28px; }
.xf-technology__huron--desc { font-size: 18px; font-size: 1.8rem; line-height: 1.6; text-align: center; }
.xf-technology__huron__detail { margin-top: 90px; }
.xf-technology__huron__detail--title { font-size: 50px; font-size: 5rem; line-height: 1.4; font-weight: bold; margin-bottom: 30px; text-align: center; }
.xf-technology__huron__detail--block { display: block; position: relative; margin-bottom: 30px; }
.xf-technology__huron__detail__lists { display: block; position: relative; }
.xf-technology__huron__detail__lists--title { padding: 0 20px 0 75px; display: block; position: relative; background: linear-gradient(270deg, #76ccf3 0%, #002 82%); margin-bottom: 30px; }
.xf-technology__huron__detail__lists--title svg { height: 33px; width: auto; position: absolute; left: 15px; top: 14px; }
.xf-technology__huron__detail__lists--title h5 { font-size: 32px; font-size: 3.2rem; font-weight: bold; line-height: 1.3; padding: 11.5px 0 6.5px; }
.xf-technology__huron__detail__lists--desc { max-width: 950px; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; }
.xf-technology__huron__detail__lists--cont { width: 44.21%; }
.xf-technology__huron__detail__lists--cmt { font-size: 15px; font-size: 1.5rem; line-height: 1.6; }
.xf-technology__huron__detail__lists--pic { width: 49.47%; }
.xf-technology__huron__detail__lists--more { display: block; position: relative; margin-top: 35px; }
.xf-technology__huron__detail__lists--more dl { display: block; color: #151515; background: #fff; }
.xf-technology__huron__detail__lists--more dl:not(:last-child) { margin-bottom: 15px; }
.xf-technology__huron__detail__lists--more dl dt { font-size: 15px; font-size: 1.5rem; line-height: 1.6; font-weight: bold; padding: 13px 40px 13px 30px; cursor: pointer; display: block; position: relative; transition: linear .2s; }
.xf-technology__huron__detail__lists--more dl dt:before,
.xf-technology__huron__detail__lists--more dl dt:after { content: ''; display: inline-block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: #151515; transition: linear .2s; }
.xf-technology__huron__detail__lists--more dl dt:before { width: 20px; height: 1px; }
.xf-technology__huron__detail__lists--more dl dt:after { height: 20px; width: 1px; right: 29.5px; }
.xf-technology__huron__detail__lists--more dl dd { font-size: 15px; font-size: 1.5rem; line-height: 1.6; padding: 0 20px 22px 30px; display: none; }
.xf-technology__huron__detail__lists--more dl.on dt:after { opacity: 0; }
.xf-technology__huron__detail--arrow { display: block; max-width: 126px; margin: 0 auto; }
.xf-technology__huron__detail--more { font-size: 24px; font-size: 2.4rem; line-height: 1.6; font-weight: bold; display: block; text-align: center; margin-top: 40px; }
.xf-technology__huron__detail--more span { display: inline-block; color: #76CCF3; }

.xf-technology__huron__detail__lists--slide { display:  block; position: relative; }
.xf-technology__huron__detail__lists--slideWrap { position: relative; width: 100%; }
.xf-technology__huron__detail__lists--slideItem:first-child { position: relative !important; }
.xf-technology__huron__detail__lists--slideItem { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 1s ease-in-out; z-index: 0; }
.xf-technology__huron__detail__lists--slideItem picture { display: block; vertical-align: top; }
.xf-technology__huron__detail__lists--slideItem.active { opacity: 1; z-index: 1; }
.xf-technology__huron__detail__lists--slidePagi { text-align: center; position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%); z-index: 2; }
.xf-technology__huron__detail__lists--slidePagi span { display: inline-block; width: 60px; height: 3px; background: #999999; border-radius: 10em; margin: 0 5px; cursor: pointer; transition: background 0.3s; }
.xf-technology__huron__detail__lists--slidePagi span.active { background: #151515; }


    @media only screen and (min-width: 768px) {
        .xf-technology__huron__detail__lists--more dl dt:hover { background: #777777; color: #fff; }
        .xf-technology__huron__detail__lists--more dl dt:hover:before,
        .xf-technology__huron__detail__lists--more dl dt:hover:after { background: #fff; }
        .xf-technology__list--slide .swiper-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; }
        .xf-technology__list--slide .swiper-slide { width: 29.72%; }
        .xf-technology__huron__detail--slide .swiper-wrapper { display: block; }
        .xf-technology__huron__detail--slide .swiper-slide:not(:last-child) { margin-bottom: 80px; }
    }

    @media only screen and (max-width: 768px) {
        #xf-technology { padding-bottom: 60px; }
        #xf-technology:before { height: calc( 100% - 650px ); top: 650px; }
        .xf-technology--title { font-size: 22px; }
        .xf-technology__list { display: block; }
        .xf-technology__list--pic { display: block; margin-bottom: 25px; }
        .xf-technology__list--title { font-size: 16px; padding: 0 8px; margin-bottom: 5px; }
        .xf-technology__list--desc { font-size: 15px; padding: 0 8px; }
        .xf-technology__huron { margin-top: 60px; }
        .xf-technology__huron--title { font-size: 40px; line-height: 1.1; margin-bottom: 14px; }
        .xf-technology__huron--desc { font-size: 18px; margin-top: 16px; text-align: left; }
        .xf-technology__huron__detail { margin-top: 45px; }
        .xf-technology__huron__detail--title { font-size: 26px; margin-bottom: 10px; }
        .xf-technology__huron__detail--block { margin-bottom: 40px; }
        .xf-technology__huron__detail__lists:not(:last-child) { margin-bottom: 0; }
        .xf-technology__huron__detail__lists--title { padding: 6px 10px 4px 60px; margin-bottom: 15px; }
        .xf-technology__huron__detail__lists--title svg { height: 18px; left: 20px; top: 50%; transform: translateY(-50%); }
        .xf-technology__huron__detail__lists--title h5 { font-size: 16px; line-height: 1.375; min-height: 2.6875em; padding: 0; }
        .xf-technology__huron__detail__lists--desc { max-width: 100%; flex-direction: column-reverse; justify-content: initial; margin: 0 auto; }
        .xf-technology__huron__detail__lists--cont { width: 100%; }
        .xf-technology__huron__detail__lists--cmt { font-size: 15px; }
        .xf-technology__huron__detail__lists--pic { width: 100%; margin-bottom: 30px; }
        .xf-technology__huron__detail__lists--more { margin-top: 25px; }
        .xf-technology__huron__detail__lists--more dl dt { padding: 15px 25px 15px 15px; }
        .xf-technology__huron__detail__lists--more dl dt:before,
        .xf-technology__huron__detail__lists--more dl dt:after { right: 10px; }
        .xf-technology__huron__detail__lists--more dl dt:before { width: 14px; }
        .xf-technology__huron__detail__lists--more dl dt:after { height: 14px; right: 16.5px; }
        .xf-technology__huron__detail__lists--more dl dd { padding: 0 10px 22px 15px; }
        .xf-technology__huron__detail--arrow { max-width: 80px; }
        .xf-technology__huron__detail--more { font-size: 16px; margin-top: 30px; }

        .xf-technology__huron__detail__lists--slidePagi { bottom: 8px; }
        .xf-technology__huron__detail__lists--slidePagi span { width: 40px; height: 2px; }

        .xf-technology__list--slide,
        .xf-technology__huron__detail--slide { overflow: initial; padding-bottom: 25px; }
        .xf-technology__huron__detail--slide .swiper-scrollbar-drag { background: #62B1D9; }
/*        .xf-technology__huron__detail__lists--cmt.t-block { height: 16em; overflow: hidden; transition: linear .3s; }*/
        .xf-technology__huron__detail__lists .t-open { text-align: right; margin-top: 20px; }
        .xf-technology__huron__detail__lists .t-open span { display: inline-block; text-decoration: underline; }
    }

/*section xf-athlete*/
#xf-athlete { }
.xf-athlete--title { font-family: Roboto; font-size: 50px; font-size: 5rem; line-height: 1.2; letter-spacing: .025em; font-weight: bold; margin-bottom: 40px; text-align: center; }
.xf-athlete--slide { padding-bottom: 40px; }
.xf-athlete--desc { margin-top: 30px; }
.xf-athlete--desc dt { font-size: 18px; font-size: 1.8rem; font-weight: bold; line-height: 1.6; margin-bottom: .72em; }
.xf-athlete--desc dd { font-size: 15px; font-size: 1.5rem; line-height: 1.6; }

    @media only screen and (min-width: 768px) {
        .xf-athlete--slide .swiper-slide { width: 29.72%; margin-right: 30px; }
        .xf-athlete--slide .swiper-slide:nth-of-type(3) { margin-right: 0; }
        .xf-athlete--slide .swiper-slide:nth-child(n+4) { display: none; }
        .xf-athlete--slide.swiper-initialized .swiper-slide { width: 100%; margin-right: 0; }
        .xf-athlete--slide.swiper-initialized .swiper-slide:nth-child(n+4) { display: block; }
    }

    @media only screen and (max-width: 768px) {
        .xf-athlete--title { font-size: 40px; letter-spacing: .1em; margin-bottom: 15px; }
        .xf-athlete--desc { margin-top: 15px; }
        .xf-athlete--desc dt { font-size: 17px; font-size: 1.7rem; }
        #xf-athlete .swiper-pagination { display: none !important }
        .xf-athlete--slide { overflow: initial; padding-bottom: 25px; }
    }

/*section youtube*/
#xf-youtube { }
.xf-youtube--title { font-family: Roboto; font-size: 70px; font-size: 7rem; line-height: 1.2; font-weight: bold; letter-spacing: .025em; margin-bottom: 38px; text-align: center; }
.xf-youtube--iframe { display: block; position: relative; width: 100%; height: 648px; background: linear-gradient( 225deg, #76ccf3 0%, #002 82%); }
.xf-youtube--iframe iframe { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: calc( 100% - 60px ); height: calc( 100% - 60px ); }

    @media only screen and (max-width: 768px) {
        .xf-youtube--title { font-size: 40px; letter-spacing: .1em; margin-bottom: 15px; }
        .xf-youtube--iframe { width: calc( 100% + 40px ); height: 58.4vw; margin: 0 -20px; }
        .xf-youtube--iframe iframe { width: calc( 100% - 20px ); height: calc( 100% - 20px ); }
    }

/*section xf-recovery*/
#xf-recovery { }
.xf-recovery--title { font-size: 50px; font-size: 5rem; line-height: 1.2; font-weight: bold; margin-bottom: 30px; text-align: center; }
.xf-recovery__detail { display: block; position: relative; }
.xf-recovery__detail:not(:last-child) { margin-bottom: 100px; }
.xf-recovery__detail .scroll-from { display: block; position: relative; width: 100%; height: 1px; top: -40px; left: 0; }
.xf-recovery__detail--title { font-size: 32px; font-size: 3.2rem; font-weight: bold; line-height: 1.875; text-align: center; position: relative; color: #fff; margin-bottom: 30px; background: linear-gradient(270deg, #76ccf3 0%, #002 82%); }
.xf-recovery__detail--desc { font-size: 15px; font-size: 1.5rem; line-height: 1.6; text-align: center; }
.xf-recovery__detail--desc b { font-weight: bold; display: inline-block; border-bottom: 2px solid #76CCF3; }
.xf-recovery__detail__teams { display: block; position: relative; margin-top: 48px; transition: linear .2s; }
.xf-recovery__detail__teams a { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; }
.xf-recovery__detail__teams--decs { padding: 48px; width: calc( 100% - 100px ); height: calc( 100% - 100px ); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.xf-recovery__detail__teams--cmn { display: block; text-align: center; }
.xf-recovery__detail__teams--cmn h4 { font-size: 43px; font-size: 4.3rem; line-height: 1.4; font-weight: bold; }
.xf-recovery__detail__teams--cmn span { font-size: 27px; font-size: 2.7rem; line-height: 1.5; font-weight: bold; }

    @media only screen and (min-width: 768px) {
        .xf-recovery__detail__teams:hover { opacity: .8; }
    }

    @media only screen and (max-width: 768px) {
        .xf-recovery--title { font-size: 26px; margin-bottom: 10px; }
        .xf-recovery__detail:not(:last-child) { margin-bottom: 40px; }
        .xf-recovery__detail .scroll-from { top: -90px; }
        .xf-recovery__detail--title { font-size: 18px; line-height: 2.22; margin-bottom: 40px; }
        .xf-recovery__detail--desc { font-size: 15px; text-align: left; }
        .xf-recovery__detail__teams { margin-top: 35px; }
        .xf-recovery__detail__teams--decs { padding: 10px; width: calc( 100% - 80px ); height: calc( 100% - 70px ); }
        .xf-recovery__detail__teams--cmn h4 { font-size: 14px; }
        .xf-recovery__detail__teams--cmn span { font-size: 9px; }

    }

/*section xf-instagram*/
#xf-instagram { }
.xf-instagram--title { font-size: 50px; font-size: 5rem; line-height: 1.2; font-weight: bold; margin-bottom: 40px; text-align: center; }
.xf-instagram--btn { max-width: 400px; display: block; margin: 0 auto; margin-top: 60px; text-align: center; }
.xf-instagram--btn a { font-size: 18px; font-size: 1.8rem; font-weight: bold; color: #fff; padding: 32.5px 0; background: linear-gradient(270deg, #76ccf3 0%, #002 82%); display: block; border-radius: 10em; transition: linear .2s; }

    @media only screen and (min-width: 768px) {
        .xf-instagram--btn a:hover { background: linear-gradient(90deg, #76ccf3 0%, #002 82%); }
    }

    @media only screen and (max-width: 768px) {
        #xf-instagram { padding-bottom: 90px; }
        .xf-instagram--title { font-size: 22px; margin-bottom: 20px; }
        .xf-instagram--btn { margin-top: 30px; max-width: 335px; }
        .xf-instagram--btn a { font-size: 18px; padding: 25px 0; }
    }