@charset "UTF-8";

/*==================================================================================================

       hero

===================================================================================================*/

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        z-index: 1;
        }
        .hero-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        background: #000;
        background: linear-gradient(180deg, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 1;
        }
        .movie-title-wrap {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:clamp(300px, 32vw, 600px);
        z-index: 5;
        }
        .movie-title {
        position: relative;
        width:clamp(150px, 16vw, 240px);
        margin-inline:auto;
        padding-bottom:2rem;
        z-index: 5;
        }
        .movie-catch {
        color:#FFF;
        font-size:clamp(18px, 3vw, 27px);
        line-height: 120%;
        text-align: center;
        }
        @media screen and (max-width:1500px) {
        .movie-title { width:16vw;  }
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:0px; }
        .movie-title { display: none; }
        .movie-title-wrap {  width:clamp(300px, 90vw, 600px); }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:0px; }
        .movie-title-wrap { top:auto; bottom:10%; translate:-50% 0; }
        .movie-catch { font-size:clamp(18px, 6vw, 27px); }
        }

/*==================================================================================================

       Movie

===================================================================================================*/

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        z-index: 0;
        }

        .movie {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
        overflow: hidden;
        }
        .video-js {
        height: 100% !important;
        }
        .video-js .vjs-tech { 
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        }

        /*=================================================
        すべてアスペクト比固定の場合（movieサイズのまま）　top-movie付与
        ==================================================*/

        .movie_inner {
        position: relative;
        width: 100%;
		height: auto;
        overflow: hidden;
        z-index: 0;
        top: 0;
        }
        .movie_inner video { object-fit: cover; }
		.top-movie{ max-height:100vh; }

        .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-height:0; height:100%; }
        .movie.top-movie:before { content:""; display: block; position: relative; top:0; left:0;
        padding-top:56.25%;
        }
        @media screen and (max-width: 1024px) {
        .movie.top-movie:before { padding-top:80%; }
        }
        @media screen and (max-width: 767px) {
        .movie.top-movie:before { padding-top:80%; }
        }

        /*=================================================
                下層用
        ==================================================*/

        .movie.pages { z-index: 1; }
        
        .movie.pages .movie_inner video{
        width:100%;
        height:auto !important;
        margin-left:auto;
        margin-right:auto;
        object-fit:contain;
        min-width: 0;
        min-height: 0;
        position: absolute;
        left: 50%;
        top:50%;
        translate:-50% -50%;
        }
        .movie.pages:before {
        content: "";
        display: block;
        padding-top:56.25%;
        }

        .movie.pages .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-height:0; height:100%; }
        .movie.pages .movie_inner video{ height:100% !important; object-fit: cover; }

/*==================================================================================================

       背景

===================================================================================================*/

.border-box {
        border:4px solid rgb(0 0 0 / .4);
        padding:60px;
        box-sizing: border-box;
        background: #FFF;
        overflow: hidden;
        border-radius: 5px;
        }
        .border-box-m {
        border:6px solid #C6BBA8;
        border-radius: 10px;
        padding:8%;
        box-sizing: border-box;
        background: rgb(255 255 255 / .5);
        }
        .border-box-s {
        border:4px solid #889B8E;
        padding:35px;
        box-sizing: border-box;
        border-radius: 10px;
        background: rgb(255 255 255 / .5);
        }

.bg-green {
        background: rgb(169 197 156 / .2);
        }
.black-wrap {
        background:#2F2F2F;
        color:#FFF;
        }
.white-wrap {
        background: url("../images/parts/background.jpg") repeat;
        }
.white-box {
        background: url("../images/parts/background.jpg") repeat;
        padding:50px;
        box-sizing: border-box;
        }
.after-wave {
        position: relative;
        z-index: 0;
        }
        .after-wave:after {
        content:"";
        display: block;
        position: absolute;
        right:-5%;
        bottom:-20%;
        width:750px;
        height:300px;
        background: url("../images/parts/wave.svg") center center / cover;
        opacity:.15;
        z-index: -1;
        }
        .after-wave.after-wide:after { right:-25%; }
        .after-wave.after-middle:after { bottom:0; }
        
hr.tori {
        position: relative;
        width:180px;
        height:180px;
        border:none;
        padding:0;
        margin:0 auto;
        background: url("../images/parts/icon-logo.svg") center center / cover;
        }

.after-maru {
        position: relative;
        z-index: 0;
        }
        .after-maru:after {
        content:"";
        display:block;
        position: absolute;
        top:5%;
        width:360px;
        height:360px;
        z-index: -1;
        opacity:.35;
        }
        .after-maru.left:after { left:-5vw; }
        .after-maru.right:after { right:-5vw; }
        .type-01:after { background: url("../images/parts/maru_01.svg") center center / cover; }
        .type-02:after { background: url("../images/parts/maru_02.svg") center center / cover; }
        .type-03:after { background: url("../images/parts/maru_03.svg") center center / cover; }
        .type-04:after { background: url("../images/parts/maru_04.svg") center center / cover; }
        .type-05:after { background: url("../images/parts/maru_05.svg") center center / cover; }


        @media screen and (min-width:1800px) {
        .after-maru.left:after { left:50%; margin-left:-960px; }
        .after-maru.right:after { right:50%; margin-right:-960px; }
        }
        @media screen and (max-width:1600px) {
        .white-box { padding:3.125vw; }
        }
        @media screen and (max-width:1500px) {
        .after-wave:after { width:50vw; height:20vw; bottom:-7vw; }
        .after-maru:after { width:24vw; height:24vw; }
        }
        @media screen and (max-width:1024px) {
        .border-box  {  }
        .border-box-m { padding:2.5rem; }
        .border-box-s { padding:5%; }
        hr.tori { width:150px; height:150px; }
        .white-box { padding:3.125vw; }
        }
        @media screen and (max-width:767px) {
        .border-box  { padding:8%; }
        .border-box-m { padding:2rem 1.5rem; }
        .border-box-s { padding:9.5%;border-radius: 7px;  }
        .after-wave:after { width:90vw; height:36vw; bottom:-13vw; right:-10%; }
        hr.tori { width:120px; height:120px; }
        .after-maru:after { width:36vw; height:36vw; }
        .white-box { padding:8%; }
        }

/*==================================================================================================

        タイトル / テキスト

===================================================================================================*/

.white { color:#FEFEFE !important; }
.white .en { color:#FEFEFE; }
.orange { color:#B73628; }
        .orange a { color:#B73628;}
.green { color:#8A9F7E; }
.blue { color:#1c6693; }
.blue-dark { color:#004377; }
.yellow { color:#ce9811; }
.yellow-light { color:#dcb44f; }
.light { color:#5CB1F7; }

.mark {background:linear-gradient(transparent 60%, #F29E84 60%);}

.under-title {
        padding-bottom:.35rem;
        border-bottom:2px solid rgb(0 0 0 / .6);
        }
        .dotted-title {
        padding-bottom:.35rem;
        border-bottom:3px dotted rgb(0 0 0 / .6);
        }
.bar-title {
        position: relative;
        padding-top:20px;
        }
        .bar-title:before {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:45px;
        height:2px;
        background: #656565;
        }
.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:50%;
        width:100%;
        height:2px;
        background: url("../images/parts/border.png") left center repeat-x;
        margin-left:1.25em;
        z-index: -1;
        }
.label-title {
        background: #656565;
        color:#FFF;
        padding:.75em;
        line-height: 150%;
        border-radius: 3px;
        }

.tate-bar {
        padding-right:1em;
        position: relative;
        }
        .tate-bar:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        right:0;
        width:1px;
        height:30px;
        background:rgb(0 0 0 / .4);
        }

.w-title {
        position: relative;
        padding:.55rem 0;
        }
        .w-title:before,
        .w-title:after {
        content:"";
        display: block;
        position: absolute;
        left:0;
        width:100%;
        height:2px;
        
        }
        .w-title:before { top:0; background: url("../images/parts/border.png") left top repeat-x; }
        .w-title:after { bottom:0; background: url("../images/parts/border.png") right top repeat-x; }

/*==================================================================================================

       トップページ

===================================================================================================*/

        /*=================================================
                News
        ==================================================*/

        .top-news-list li {
        position: relative;
        font-size:1rem;
        line-height: 170%;
        padding: 1.25rem 0;
        border-top:1px dotted rgb(0 0 0 / .45);
        }
        .top-news-list li:last-child { border-bottom:1px dotted rgb(0 0 0 / .45); }
        .top-news-list li a {
        position: relative;
        font-weight:500;
        color:#3B4043;
        box-sizing: border-box;
        transition: all 0.3s ease;
        cursor: pointer;
        }
        .top-news-list li .date {
        display:inline-block;
        font-size:12px;
        margin-right:20px;
        color:#3B4043;
        opacity:1;
        }
        .top-news-list li .post-title,
        .top-news-list li .news-post-title{
        padding-top:.5em;
        display: block;
        width:100%;
        }
        .top-news-list li a:hover { opacity:1; text-decoration: underline; }
        .top-news-list li a:hover:after { left: 0; width: 100%; }

        .top-news-list .catName {
        display: inline-block;
        padding: 5px 8px 6px;
        color: #FFF;
        background:#2B2828;
        border-radius: 1px;
        font-size: 12px;
        font-weight: 500;
        line-height: 100%;
        margin: 0 12px 0 0 ;
        }
        @media screen and (max-width:767px) {
        .top-news-list .post-title { display: block; padding-top: 5px; margin-left: 0; }
        .top-news-list .catName { padding: 4px 8px 5px; }
        .top-news-list li .date { margin-right:15px; }
        .top-news-list li:last-child { padding-bottom:1.25rem; border-bottom:1px dotted rgb(0 0 0 / .45); }
        }

        /*=================================================
                GREETING
        ==================================================*/

        .greeting-img {
        position: relative;
        z-index: 0;
        }
        .greeting-img:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-15%;
        left:-20%;
        width:360px;
        height:360px;
        background: url("../images/parts/maru_01.svg") center center / cover;
        opacity:.35;
        z-index: -1;
        }
        .greeting-text {
        padding-top:20rem;
        padding-right:2rem;
        }
        .greeting-text p {
        font-size:17px;
        line-height: 250%;
        }
        .greeting-sub  {
        padding:30% 0 0 40%;
        box-sizing: border-box;
        }
        
        @media screen and (max-width:1500px) {
        .greeting-img:after { width:24vw; height:24vw; }
        }
        @media screen and (max-width:1200px) {
        .greeting-text p { font-size:16px; line-height: 220%; }
        }
        @media screen and (max-width:1024px) {
        .greeting-text { padding:10rem 1.5rem 0 0; }
        .greeting-text p { font-size:15px; line-height: 200%; }
        .greeting-sub { padding:20% 0 0 40%; }
        }
        @media screen and (max-width:767px) {
        .greeting-img:after { width:36vw; height:36vw; }
        .greeting-sub { padding:4rem 0 0 30%; }
        }


        /*=================================================
                Attraction
        ==================================================*/

        .att-wrap {
        position: relative;
        z-index: 0;
        }
        .att-wrap:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        right:-10%;
        width:360px;
        height:360px;
        background: url("../images/parts/maru_02.svg") center center / cover;
        opacity:.35;
        z-index: -1;
        }
        
        .att-wrap section:nth-child(1) {
        position: relative;
        width:49%;
        padding:0 52% 10% 0;
        }
        .att-wrap section:nth-child(2) {
        position: absolute;
        right:0;
        top:20%;
        width:44%;
        }
        .att-wrap section:nth-child(3) {
        position: relative;
        padding-left:7%;
        width:42%;
        }
        .btn-wrap {
        position: relative;
        z-index: 0;
        }
        .btn-img {
        position: relative;
        width:calc(100% - 60px);
        }
        .att-lead {
        position: absolute;
        top:0;
        right:0;
        font-size:45px;
        line-height: 1;
        }
        .btn-more {
        font-size:27px;
        position: relative;
        line-height: 1;
        padding-right:50px;
        margin-top:.25em;
        }
        .btn-more:after {
        content:"";
        display: block;
        position: absolute;
        right:60px;
        top:50%;
        translate:0 -50%;
        width:30px;
        height:30px;
        background: url("../images/icons/icon-arrow-b.svg") center center / cover;
        z-index: 0;
        }

        @media screen and (max-width:1600px) {
        .btn-img { width:calc(100% - 3.75vw); }
        .att-lead { font-size:2.8125vw; }
        .btn-more { padding-right:3.75vw; }
        .btn-more:after { right:3.75vw; }
        }
        @media screen and (max-width:1500px) {
        .att-wrap:after { width:24vw; height:24vw; }
        }
        @media screen and (max-width:1350px) {
        .btn-more { font-size:24px; }
        .btn-more:after { width:27px; height:27px; }
        }
        @media screen and (max-width:1024px) {
        .btn-more { font-size:21px; }
        .btn-more:after { width:24px; height:24px; }
        }
        @media screen and (max-width:767px) {
        .att-wrap:after { width:36vw; height:36vw; }
        .att-wrap section:nth-child(1) { width:92%; padding:0 8% 5rem 0; }
        .att-wrap section:nth-child(2) { position: relative; right:auto; top:auto; width:78%; padding:0 0 5rem 22%; }
        .att-wrap section:nth-child(3) { padding-left:6%; width:88%; }
        .btn-more { font-size:18px; }
        .btn-more:after { width:20px; height:20px; }
        .btn-img { width:calc(100% - 6.75vw); }
        .att-lead { font-size:5vw; }
        .btn-more { padding-right:7vw; }
        .btn-more:after { right:7vw; }
        }

        /*=================================================
                PRESENT
        ==================================================*/

        .black-box {
        position: relative;
        background:#484848;
        padding:12px;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 0;
        }
        .black-box:before,
        .black-box:after {
        content:"";
        display: block;
        position: absolute;
        width:120px;
        height:60px;
        background: url("../images/parts/cloud.svg") center center / cover;
        z-index: -1;
        opacity:.15;
        }
        .black-box:before { left:-20px; top:0;  }
        .black-box:after { right:-20px; bottom:0px; }
        .black-box .inner {
        position: relative;
        border:1px solid rgb(255 255 255 / .5);
        }
        .present-item {
        padding:2rem 1rem 1.5rem;
        box-sizing: border-box;
        }
        .present-item h3 {
        display: inline-block;
        border-bottom:1px solid rgb(255 255 255 / .7);
        padding-bottom:.125em;
        }

        /*=================================================
                Banner
        ==================================================*/

        .bg-banner {
        background:url("../images/parts/banner-bg.jpg") center center / cover;
        }
        .banner-wrap {
        width:85%;
        max-width:900px;
        margin-inline:auto;
        position: relative;
        z-index: 1;
        }
        .more-reservation a {
        width:100%;
        height:90px;
        line-height:88px;
        text-align: center;
        color:#FFF;
        background:none;
        border:1px solid #FFF;
        border-radius:0px;
        box-sizing: border-box;
        overflow: hidden;
        font-size:21px;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        letter-spacing: 0em;
        display: inline-block;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .more-reservation a:after {
        position: absolute;
        content: "";
        width: 0;
        height:100%;
        bottom:0;
        right: 0;
        z-index: -1;
        border-radius:1px;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:rgb(255 255 255 / 1);
        }      
        .more-reservation a:hover { opacity:1; color:#484848; }
        .more-reservation a:hover:after { left:0; width:100%; }

        @media screen and (max-width: 1350px) {
        .more-reservation a { height:80px; line-height:78px; font-size:20px; }
        }
        @media screen and (max-width:1024px) {
        .more-reservation a { height:70px; line-height:68px; font-size:19px; }
        }
        @media screen and (max-width:767px) {
        .more-reservation a { height:60px; line-height:58px; font-size:18px; }
        }

/*==================================================================================================

       下層 ヘッダー

===================================================================================================*/

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        z-index: 0;
        }

        /*=================================================
                スライドヘッダー
        ==================================================*/

        .page-header-slider {
        position: relative;
        z-index: 0;
        }
        .page-header-slick .slickslider-s figure {
        position: relative;
        z-index: 0;
        }
        .page-header-slick .slick-slide { margin:0 !important; }
        .page-header-slick { height:auto; }
        .page-header-slick .slickslider-s figure { width: 100%; height:0; padding-bottom:45%; }
        .page-header-slick:after { content: ""; display: block; }
        .slick-wrap.page-header-slick:after { padding-bottom:45%; }

        .facilities_01 { background: url("../images/img/facilities/header-01.jpg") center center / cover; }
        .facilities_02 { background: url("../images/img/facilities/header-02.jpg") center center / cover; }
        .facilities_03 { background: url("../images/img/facilities/header-03.jpg") center center / cover; }

        @media screen and (max-width:1024px) {
        .page-header-slick { height:auto; }
        .page-header-slick .slickslider-s figure { height:0; padding-bottom:80%; }
        .slick-wrap.page-header-slick:after { padding-bottom:80%; }
        }

        /*=================================================
                ノーマルヘッダー
        ==================================================*/

        .page-header {
        position: relative;
        width: 100%;
        height:100%;
        max-height:100vh;
        overflow: hidden;
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:45%;
        height:0;
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        height:0;
        padding-bottom:30%;
        width:100%;
        }

        .rooms        { background: url("../images/img/rooms/header.jpg") center center / cover; }
        .bath         { background: url("../images/img/bath/header.jpg") center center / cover; }
        .faq          { background: url("../images/img/faq/header.jpg") center center / cover; }
        .access       { background: url("../images/img/access/header.jpg") center center / cover; }
        .news         { background: url("../images/img/news/header.jpg") center center / cover; }
        .lounge       { background: url("../images/img/lounge/header.jpg") center center / cover; }
        .kimono       { background: url("../images/img/kimono/header.jpg") center center / cover; }
        .activity     { background: url("../images/img/activity/header.jpg") center center / cover; }

        @media screen and (max-width: 1024px) {
        .page-header:before { padding-bottom:80%; height:0; }
        .page-header.short:before { padding-bottom:80%; height:0; }
        }

.page-title {
        position: absolute;
        bottom: 0;
        left:0;
        padding:24px 40px;
        color:#FFF;
        width:100%;
        box-sizing: border-box;
        z-index:1;
        }
        .page-title:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height: 180px;
        background: #000;
        background: linear-gradient(0deg, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 0;
        }
        .page-title h1 {
        position: relative;
        text-align: left;
        line-height:110%;
        font-weight:400;
        color:#FFF;
        z-index: 2;
        }

        @media screen and (max-width:1024px) {
        .page-title { padding:21px 30px; }
        }
        @media screen and (max-width:767px) {
        .page-title { padding:16px 30px; }
        }

/*==================================================================================================

       BATH

===================================================================================================*/

        .bath-img {
        position: relative;
        }
        .bath-img figure:nth-child(1) {
        position: relative;
        padding:6% 9% 5% 55%;
        box-sizing: border-box;
        }
        .bath-img figure:nth-child(2) {
        position: absolute;
        bottom:0;
        left:7%;
        width:24%;
        }
        .bath-text { padding-bottom:4rem;}

        @media screen and (max-width:1024px) {
        .bath-text { padding-bottom:2rem;}
        }
        @media screen and (max-width:767px) {
        .bath-text { padding-bottom:0rem;}
        .bath-img figure:nth-child(1) { padding:3rem 0 8% 52%; }
        .bath-img figure:nth-child(2) { left:0; width:33%; }
        }

/*==================================================================================================

       FACILITIES

===================================================================================================*/

        .facilities-text {
        padding:15% 10% 4rem 0;
        box-sizing: border-box;
        }
        .facilities-img {
        position: relative;
        }
        .facilities-img figure:nth-child(1) {
        position: relative;
        padding:9% 0 18% 25%;
        box-sizing: border-box;
        }
        .facilities-img figure:nth-child(2) {
        position: absolute;
        bottom:0;
        left:-45%;
        width:48%;
        }
        .lounge-sub {
        width:80%;
        padding-top:5rem;
        }
        @media screen and (max-width:1350px) {
        .facilities-text { padding:5% 10% 4rem 0; }
        .facilities-img figure:nth-child(1) { padding-top:3%; }
        }
        @media screen and (max-width:1024px) {
        .facilities-text { padding:0% 10% 3rem 0; }
        .facilities-img figure:nth-child(1) { padding-top:0; }
        .lounge-sub { padding-top:4rem; }
        }
        @media screen and (max-width:767px) {
        .facilities-text { padding:0% 10% 2rem 0; }
        .facilities-img figure:nth-child(1) { padding:0 0 8% 52%; }
        .facilities-img figure:nth-child(2) { left:0; width:33%; }
        .lounge-sub { padding-top:2rem; }
        }


        .more-btn-arrow a {
        font-size:1.2rem;
        position: relative;
        line-height: 1;
        padding-right:2em;
        color:#B73628;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .more-btn-arrow a:after {
        content:"";
        display: block;
        position: absolute;
        right:0;
        top:50%;
        translate:0 -50%;
        width:1em;
        height:1em;
        background: url("../images/icons/icon-arrow-b.svg") center center / cover;
        z-index: 0;
        }
        .more-btn-arrow a:hover { padding-right:2.5em; }



/*==================================================================================================

       FAQ

===================================================================================================*/

        .faq-q {
        position: relative;
        font-size: 1rem;
        line-height: 180%;
        background: rgb(0 0 0 / .05);
        border:1px solid rgb(0 0 0 / .1);
        box-sizing: border-box;
        border-radius: 0px;
        padding: 1.25rem 1.5rem 1.25rem 4rem;
        /* アコーディオンのみ
        cursor: pointer;
        */
        }
        .faq-q:before {
        content: "Q";
        font-weight: 600;
        position: absolute;
        top: 1rem;
        left: 1.25rem;
        line-height: 100%;
        font-size: 1.8rem;
        color:#B73628;
        }
        /* アコーディオンのみ
        .faq-q h3 { padding-right:1.5rem; }
        */
        .faq-a {
        position: relative;
        font-size: 1rem;
        line-height: 180%;
        box-sizing: border-box;
        padding: 1.25rem 1.5rem 0.25rem 4rem;
        }
        .faq-a:before {
        content: "A";
        font-weight: 600;
        position: absolute;
        top: 1.1rem;
        left: 1.25rem;
        line-height: 100%;
        font-size: 1.8rem;

        }

        @media screen and (max-width:767px) {
        .faq-q { padding:0.75rem 1.5rem; }
        .faq-q:before { font-size: 1.25rem; left:1rem; top:.85rem; opacity:.6; }
        .faq-q h3 { padding-left:1.5rem; }
        .faq-a { padding: .75rem 1rem; }
        .faq-a:before {  font-size: 1.25rem; left:1rem; top:.85rem; opacity:.6;  }
        .faq-a p { padding:1.75em 0 0 0; }
        }


/*==================================================================================================

       ACTIVITY

===================================================================================================*/

#activity{
background: rgb(253 233 175 / 20%);
}

.accordion_header {
        background-color:#484848;
        color: #fff;
        font-size: 1.25rem;
        font-weight: bold;
        padding: 20px 11%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap:.75rem;
        text-align: center;
        position: relative;
        z-index: +1;
        cursor: pointer;
        overflow: hidden;
        margin-bottom:1rem;
        transition-duration: 0.2s;
        }
        .accordion_header:after {
        content: "";
        display: block;
        position: absolute;
        right:-20px;
        bottom:0;
        width: 120px;
        height: 60px;
        background: url(../images/parts/cloud.svg) center center / cover;
        z-index: -1;
        opacity: .15;
        }
        .accordion_header:hover {
        opacity: .8;
        }
        .accordion_header i {
        width:1em;
        height:1em;
        background: url("../images/parts/icon-arrow-bottom.svg") center center / cover;
        transition-duration: 0.2s;
        }
        .accordion_header.open i { rotate:180deg; }
        .accordion_inner {
        display: none;
        box-sizing: border-box;
        }
        .accordion_inner.stay {
        display: block;
        }
        .accordion_inner {
        height: auto;
        }
        .accordion-box {
        padding:30px 30px 40px;
        box-sizing: border-box;
        }

        @media screen and (max-width: 1024px) {
        
        }
        @media screen and (max-width: 767px) {
        .accordion-box {  padding:30px 0 40px; }
        }