@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:90px;
        width:100%;
        z-index: 6;
        }

        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:90px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:90px; }
        }

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

       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:calc(100vh - 90px); }

        .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:75%; }
        .top-movie{ max-height:100vh; }
        }
        @media screen and (max-width: 767px) {
        .movie.top-movie:before { padding-top:75%; }
        }

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

       背景

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

.border-box {
        border:5px solid #AD906A;
        padding:6%;
        box-sizing: border-box;
        border-radius: 15px;
        }
        .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:3px solid rgb(0 0 0 / .4);
        padding:6%;
        box-sizing: border-box;
        border-radius: 10px;
        }

.bg-blue { background:#0D3B66; color:#F4F4F9; }
.bg-light { background:#E9EEF4; }

.slash-img img {
        clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%);
        height: 100%;
        width: 100%;
        object-fit: cover;
        }
.slash-r,.slash-l {
        position: relative;
        overflow: hidden;
        }
.slash-r:after {
        content:"";
        display: block;
        position: absolute;
        left:100%;
        bottom:0;
        width:150%;
        height:150%;
        background: #F4F4F9;
        rotate:-10deg;
        transform-origin:left bottom;
        z-index: 1;
        }

.slash-l:after {
        content:"";
        display: block;
        position: absolute;
        right:100%;
        bottom:0;
        width:150%;
        height:150%;
        background: #F4F4F9;
        rotate:10deg;
        transform-origin:right bottom;
        z-index: 1;
        }

.section-right,.section-left {
        position: relative;
        z-index: 0;
        }
        .section-right:after,.section-left:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        width:2100px;
        height:0;
        padding-bottom:300px;
        background: url("../images/parts/line.svg") center center / cover;
        z-index: -1;
        }
        .section-left:after { right:66%; scale:1 -1; }
        .section-right:after { left:66%; rotate:180deg; }

        .outer .section-right:after,.outer .section-left:after { top:3rem; }


.light-wrap {
        position: relative;
        padding:6%;
        background: #58A4B0;
        }


        @media screen and (max-width:2100px) {
        .section-left:after,.section-right:after { width:100vw; padding-bottom:14.285714286%;}
        }
        @media screen and (max-width:1024px) {
        .border-box  { border-radius: 10px; }
        .border-box-m { padding:2.5rem; }
        .border-box-s { padding:5%; }
        .slash-r.tablet-reverse:after { bottom:auto; top:0; rotate:10deg; transform-origin:left top; }
        .slash-l.tablet-reverse:after { bottom:auto; top:0; rotate:-10deg; transform-origin:right top; }
        }
        @media screen and (max-width:767px) {
        .border-box  { padding:9.5%; border-radius: 7px; }
        .border-box-m { padding:2rem 1.5rem; }
        .border-box-s { padding:9.5%;border-radius: 7px;  }
        .slash-r.sp-reverse:after { bottom:auto; top:0; rotate:10deg; transform-origin:left top; }
        .slash-l.sp-reverse:after { bottom:auto; top:0; rotate:-10deg; transform-origin:right top; }
        .section-left:after,.section-right:after { width:200vw; padding-bottom:28.571428571%; }
        .section-left:after { right:50%; }
        .section-right:after { left:50%; }
        .light-wrap { padding:9.5%; }
        }

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

        タイトル / テキスト

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

.white { color:#F9F6F0 !important; }
.white .en { color:#F9F6F0; }
.red { color:#ff363d;}
.blue { color:#0D3B66; }
.light { color:#58A4B0; }

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

.under-title {
        padding-bottom:.35rem;
        border-bottom:2px solid rgb(0 0 0 / .6);
        }
.bar-title {
        position: relative;
        padding-top:18px;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:46px;
        height:2px;
        background:#B69B5C;
        }
        .center.bar-title:after {
        left:50%;
        translate:-50%;
        }
        .bg-banner .bar-title:after { background: #FFF; }
        @media screen and (max-width:1024px) {
        .bar-title { padding-top:15px; }
        }
        @media screen and (max-width:767px) {
        .bar-title { padding-top:10px; }
        .bar-title.bar-sp-center:after { left:50%; translate:-50%; }
        }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        bottom:.75em;
        width:100%;
        height:1px;
        background: #2A9FB1;
        margin-left:1rem;
        z-index: -1;
        }




        @media screen and (max-width:1024px) {
        
        }
        @media screen and (max-width:767px) {
        
        }

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

       トップページ

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

        .phone-banner {
        position: absolute;
        bottom:20px;
        right:20px;
        width:336px;
        padding:1.5rem 2rem;
        box-sizing: border-box;
        background: #0D3B66;
        color:#FFF;
        }
        @media screen and (max-width:1024px) {
        .phone-banner { width:320px; bottom:10px; right:10px; }
        }
        @media screen and (max-width:767px) {
        .phone-banner { position: relative; width:100%; bottom:auto; right:auto; text-align: center; }
        }




.school-banner {
        position:relative;
        width:100%;
        line-height: 1;
        }
        .school-banner a {
        width:100%;
        height:90px;
        line-height:90px;
        text-align: center;
        color:#FFF;
        font-weight:400;
        background:#0D3B66;
        box-sizing: border-box;
        border-radius:5px;
        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;
        }
        .school-banner a:before {
        content:"";
        display: block;
        position: absolute;
        width: 50%;
        height:100%;
        top:0;
        right:50%;
        z-index: -1;
        background: url("../images/parts/line-s.svg") top right / cover;
        }
        .school-banner a:after {
        position: absolute;
        content: "";
        width: 0;
        height:100%;
        bottom:0;
        right: 0;
        z-index: -1;
        border-radius:0;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:#6AC0CD;
        }
        .school-banner a:hover {
        opacity:1;
        color:#FFF;
        }
        .school-banner a:hover:after {
        left: 0;
        width: 100%;
        }


        @media only screen and (max-width:1024px) {
        .school-banner a { height:80px; line-height:80px; }
        }
        @media only screen and (max-width:767px) {
        .school-banner a { font-size:18px; }
        }







        .search-outer {
        padding:30px 30px 0;
        box-sizing: border-box;
        }
        @media screen and (max-width:1875px) {
        .search-outer { padding:1.6vw 1.6vw 0; }
        }

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

        .news-wrap {
        position: relative;
        min-height: 190px;
        z-index: 8;
        }
        .top-news-list li {
        position: relative;
        font-size:1rem;
        line-height: 170%;
        padding: .75rem 0;
        border-bottom:1px dotted rgb(13 59 102 / .5);
        }
        .top-news-list li:last-child { border-bottom:none; }
        .top-news-list li a {
        position: relative;
        font-weight:400;
        color:var(--font-family);
        box-sizing: border-box;
        transition: all 0.3s ease;
        cursor: pointer;
        }
        .top-news-list li .date {
        font-size:12px;
        margin-right:30px;
        color:var(--font-family);
        opacity:1;
        }
        .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: 7px 8px 8px;
        color: #F6F6F6;
        background:#0D3B66;
        border-radius: 3px;
        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; }
        }

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

        .greeting-section { position: relative; z-index: 0; }
        .greeting-lead {
        position: absolute;
        bottom:-1em;
        right:0;
        rotate:90deg;
        transform-origin: right top;
        line-height: 1;
        font-size:clamp(130px, 10vw, 280px);
        color:#58A4B0;
        opacity:.1;
        z-index: -1;
        white-space: nowrap;
        }
        .greeting-img {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:85%;
        background: url("../images/img/top/img_01-1.jpg") center center / cover;
        z-index: 0;
        }
        .greeting-text {
        position: relative;
        padding:12% 2rem;
        width:85%;
        max-width:580px;
        margin-inline:auto;
        z-index: 0;
        }
        .greeting-wrap {
        position: relative;
        overflow: hidden;
        z-index: 0;
        }
        .greeting-wrap:before,.greeting-wrap:after {
        content:"";
        display: block;
        position: absolute;
        width:2100px;
        height:0;
        padding-bottom:300px;
        background: url("../images/parts/line.svg") center center / cover;
        z-index: -1;
        }
        .greeting-wrap:before { top:2.5vw; right:60%; }
        .greeting-wrap:after { bottom:2vw; left:66%; rotate:180deg; }
        
        .greeting-sub-01 {
        position: relative;
        padding: 6% 73% 15% 4%;
        box-sizing: border-box;
        }
        .greeting-sub-02 {
        position: absolute;
        width:33%;
        bottom:0;
        left:25%;
        }
        .greeting-sub-03 {
        position: absolute;
        width:33%;
        top:0;
        left:73%;
        }
        
        @media screen and (max-width:2100px) {
        .greeting-wrap:before,.greeting-wrap:after { width:100vw; padding-bottom:14.285714286%; }
        }
        @media screen and (max-width:1350px) {
        .greeting-img { padding-bottom:0; height:100%; }
        }
        @media screen and (max-width:1024px) {
        .greeting-img { padding-bottom:66%; height:auto; }
        .greeting-lead { font-size:clamp(75px, 13vw, 120px); }
        }
        @media screen and (max-width:767px) {
        .greeting-lead { font-size:clamp(75px, 30vw, 90px); }
        .greeting-sub-01 { padding: 44% 59% 16% 0%; }
        .greeting-sub-02 { width:48%; left:48%; }
        .greeting-sub-03 { width:51%; left:36%; }
        .greeting-wrap:before,.greeting-wrap:after { width:200vw; padding-bottom:28.571428571%; }
        .greeting-wrap:before { right:50%; }
        .greeting-wrap:after { left:50%; }
        }

        /*=================================================
                ATT
        ==================================================*/

        .att-img {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:75%;
        }
        .att-01 { background: url("../images/img/top/img_02.jpg") center center / cover; }
        .att-02 { background: url("../images/img/top/img_03.jpg") center center / cover; }

        .att-text {
        width:90%;
        max-width:420px;
        }
        .att-text.left { margin-left:auto; }
        .att-text.right { margin-right:auto; }

        @media screen and (max-width:1024px) {
        .att-img { padding-bottom:0; height:100%; }
        .att-text { width:88%; padding:4rem 0; }
        .att-01 { background: url("../images/img/top/img_02-tab.jpg") center center / cover; }
        }
        @media screen and (max-width:767px) {
        .att-img { padding-bottom:66%; height:0;}
        .att-text.left { margin-right:auto; }
        .att-text.right { margin-left:auto; }
        .att-text { width:85%; max-width:450px; padding:3rem 0; }
        .att-01 { background: url("../images/img/top/img_02.jpg") center center / cover; }
        }

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

        .banner-wrap {
        width:100%;
        position: relative;
        overflow: hidden;
        z-index: 1;
        }
        .banner-img {
        background: url("../images/parts/banner-bg.jpg") center bottom / cover;
        width:100%;
        height:0;
        padding-bottom:39%;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        }
        .banner-text {
        position: relative;
        width:100%;
        padding-right:8%;
        padding-bottom:8vw;
        background: #0D3B66;
        text-align: right;
        box-sizing: border-box;
        z-index: 1;
        }
        .banner-text:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:120%;
        height:100%;
        background:#0D3B66;
        rotate:-2deg;
        transform-origin: left top;
        }
        .banner-text hgroup {
        position: relative;
        box-sizing: border-box;
        padding-top:3vw;
        }
        .banner-text hgroup h2 {
        position: absolute;
        right:0;
        top:-.75em;
        width: 100%;
        white-space: nowrap;
        text-align: right;
        z-index: 1;
        }
        
        .more-reservation {
        position:relative;
        width:100%;
        max-width:360px;
        margin-left:auto;
        line-height: 1;
        }
        .more-reservation a {
        width:100%;
        height:80px;
        line-height:80px;
        text-align: center;
        color:#FFF;
        font-weight:400;
        background:#D62839;
        box-sizing: border-box;
        border-radius:40px;
        overflow: hidden;
        font-size:18px;
        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:0;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:rgb(255 255 255 / .3);
        }
        .more-reservation a:hover {
        opacity:1;
        color:#FFF;
        }
        .more-reservation a:hover:after {
        left: 0;
        width: 100%;
        }

        @media screen and (max-width:1350px) {
        .banner-img { padding-bottom:45%; }
        .more-reservation a { height:72px; line-height:72px; font-size:17px; }
        }
        @media screen and (max-width:1024px) {
        .banner-img { padding-bottom:50%; }
        .more-reservation { max-width:320px; }
        .more-reservation a { height:66px; line-height:66px; font-size:16px; }
        }
        @media screen and (max-width:767px) {
        .banner-img { padding-bottom:60%; }
        .banner-text { padding:0 8% 15vw; }
        .banner-text hgroup h2 { right:auto; left:0; text-align: center;  }
        .banner-text hgroup { padding-top:5vw; }
        .more-reservation { max-width:100%; margin-right:auto; height:58px; line-height:58px;}
        }

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

       下層 ヘッダー

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

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

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

        .page-header {
        position: relative;
        width: 100%;
        height:100%;
        max-height:calc(100vh -90px);
        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%;
        }

        .facilities   { background: url("../images/img/facilities/header.jpg") center center / cover; }
        .cuisine      { background: url("../images/img/cuisine/header.jpg") center center / cover; }
        .camp         { background: url("../images/img/camp/header.jpg") center center / cover; }
        .school       { background: url("../images/img/school/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; }
        .about        { background: url("../images/img/about/header.jpg") center center / cover; }


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

        }

.page-title {
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height:90px;
        padding:0 3vw;
        box-sizing: border-box;
        background: #0D3B66;
        text-align: left;
        color:#FFF;
        z-index:1;
        }
        .page-title:after {
        content:"";
        display: block;
        position: absolute;
        left:0;
        top:0;
        width:450px;
        height:100%;
        background: url("../images/parts/title-line.svg") right top / cover;
        z-index: -1;
        }
        .page-title h1 {
        position: relative;
        line-height: 90px;
        color:#FFF;
        }
        @media screen and (max-width:1024px) {
        .page-title { height:70px; }
        .page-title h1 { line-height: 70px; }
        .page-title:after { width:360px; }
        }
        @media screen and (max-width:767px) {
        .page-title { height:56px; position: relative;}
        .page-title h1 { line-height: 56px; }
        .page-title:after { width:210px; }
        }

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

       FACILITIES

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

        .section-lead {
        position: absolute;
        top:0;
        left:0;
        font-size:clamp(90px, 8vw, 140px);
        line-height: .8;
        z-index: -1;
        }
        @media screen and (max-width:1024px) {
        .section-lead { font-size:clamp(60px, 13vw, 120px); }
        }
        @media screen and (max-width:767px) {
        .section-lead { font-size:clamp(60px, 21vw, 90px); }
        }

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

       CUISINE

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

        .cuisine-img {
        width:100%;
        height:0;
        padding-bottom:75%;
        background: url("../images/img/cuisine/img_01.jpg") center center / cover;
        }
        @media screen and (max-width:1024px) {
        .cuisine-img { height:100%; padding-bottom:0; }
        }
        @media screen and (max-width:767px) {
        .cuisine-img { height:0; padding-bottom:66%; }
        }

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

       CAMP

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

        .camp-img {
        width:100%;
        height:0;
        padding-bottom:75%;
        background: url("../images/img/camp/img_01-1.jpg") center center / cover;
        }
        .camp-text {
        position: relative;
        padding:8% 34% 10% 36%;
        box-sizing: border-box;
        }
        .camp-sub-01 {
        position: absolute;
        left:6%;
        bottom: 0;
        width:22%;
        }
        .camp-sub-02 {
        position: absolute;
        right:-10%;
        top: -15%;
        width:35%;
        }
        
        .icon-wrap {
        padding:1.5rem 1rem 1rem;
        border:4px solid #0D3B66;
        text-align: center;
        }
        .sports-icon {
        width:70%;
        max-width:96px;
        margin-inline:auto;
        padding-bottom:.25rem;
        }
        
        .guide-caption {
        position: absolute;
        bottom:0;
        right:0;
        background: rgb(0 0 0 / .8);
        padding:5px 10px;
        display: inline;
        white-space: nowrap;
        color:#FFF;
        font-size:13px;
        line-height: 1;
        }
        @media screen and (max-width:1300px) {
        .camp-sub-02 { top:0; }
        }
        @media screen and (max-width:1024px) {
        .camp-img { height:100%; padding-bottom:0; }
        .camp-text { padding:3rem 38% 21% 6%; }
        .camp-sub-02 { top:3rem; width:40%; }
        }
        @media screen and (max-width:767px) {
        .camp-img { height:0; padding-bottom:66%; }
        .camp-text { padding:2rem 0% 2rem 0%; }
        .camp-wrap { position: relative; }
        .camp-sub-01 { position: relative; left:auto; bottom: auto; width: 100%; padding:0 62% 13% 2%; box-sizing: border-box; }
        .camp-sub-02 { top:auto; bottom:0; width:55%; }
        }


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

       ACCESS

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

        .access-text-box {
        width:100%;
        max-width:450px;
        }
        .special-section {
        padding:3rem 0;
        }

        .access-box {
        background: rgb(255 255 255 / .65);
        padding-bottom:1.5rem;
        box-sizing: border-box;
        box-shadow: 0 3px 6px rgb(0 0 0 / .2);
        border-radius: 3px;
        overflow: hidden;
        }
        .access-box.no-head { padding-top:1.5rem; }
        .access-title {
        background:#0D3B66;
        color:#FFF;
        padding:1em .5rem;
        box-sizing: border-box;
        width:100%;
        text-align: center;
        }
        .access-root li {
        position: relative;
        background:#FFF;
        text-align: center;
        padding:.5rem .5rem;
        box-sizing: border-box;
        border:1px solid rgba(0,0,0,.2);
        border-radius: 2px;
        font-size:16px;
        width:90%;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:.75rem;
        }
        .access-root li.road {
        background: none;
        padding:.25rem .5rem;
        font-size:1rem;
        color:#241A08;
        border:none;
        }
        .access-root li:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-.75rem;
        left:50%;
        width:1px;
        height: .75rem;
        background: #777;
        }
        .access-root li:last-child { margin-bottom:0; background:#58A4B0; color:#FFF;  }
        .access-root li:last-child:after { display: none; }

        @media screen and (max-width:767px) {
        .access-root li { padding:.5rem; }
        }


.sp_on{display: none;}
.pc_on{display: block!important;}

@media only screen and (max-width: 767px){
.sp_on{display: block!important;}	
.pc_on{display: none;}
}

a.anchor {
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}