@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:98px;
        z-index: 0;
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:100px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:80px; }
        }
        
/*==================================================================================================

       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 - 98px); }

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

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

        .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 {
        position: relative;
        padding:80px;
        border:4px solid #093768;
        box-sizing: border-box;
        border-radius:20px;
        z-index: 0;
        }
        .border-box.box-green { border:4px solid #148670; background: #FFF; }
        .white-box-s {
        background: #FFF;
        padding:65px;
        box-sizing: border-box;
        border-radius: 20px;
        }
.bg-light-blue {
        background: rgb(198 226 245 / .30);
        }
.bg-light-green {
        background: rgb(20 134 112 / .05);
        }
.bg-blue {
        background: rgb(9 55 104 / .05);
        }
.green-wrap {
        background:#1E5248;
        border-radius: 20px;
        padding:80px;
        box-sizing: border-box;
        color:#FFF;
        }
        .green-box {
        background:#148670;
        border-radius: 20px;
        padding:80px;
        box-sizing: border-box;
        color:#FFF;
        }
        @media screen and (max-width:1600px) {
        .border-box { padding:5vw; }
        .green-wrap { padding:5vw; }
        .green-box { padding:5vw; }
        }
        @media screen and (max-width:1024px) {
        .border-box { padding:4vw; }
        .white-box-s { padding:50px; }
        .green-wrap { padding:50px; }
        .green-box { padding:50px; }
        }
        @media screen and (max-width:767px) {
        .border-box { padding:7.5vw; border-radius:15px; }
        .white-box-s { padding:30px; border-radius:15px; }
        .green-wrap { padding:30px; border-radius:15px; }
        .green-box { padding:30px; border-radius:15px; }
        }

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

       MOVE

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

        .move1 {
        animation-name: move1;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-duration: 5s;
        }
        .move2 {
        animation-name: move2;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-duration: 7s;
        }
        .move3 {
        animation-name: move3;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-duration: 3s;
        }
        .move4 {
        animation-name: move4;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-duration: 2s;
        }

        @keyframes move1 {
        0% { transform: translate(0,0px); }
        45% { transform: translate(20px,0px); }
        100% { transform: translate(0,0px); }
        }
        @keyframes move2 {
        0% { transform: translate(0,0px); }
        55% { transform: translate(-20px,0px); }
        100% { transform: translate(0,0px); }
        }
        @keyframes move3 {
        0% { rotate:10deg; }
        50% { rotate:0deg; }
        100% { rotate:-10deg; }
        }
        @keyframes move4 {
        0% { rotate:2deg;  }
        50% { rotate:0deg; }
        100% { rotate:-2deg; }
        }
        @keyframes move5 {
        0% { rotate:5deg;  }
        50% { rotate:0deg; }
        100% { rotate:-5deg; }
        }

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

        タイトル / テキスト

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

.white { color:var(--white-color) !important; }
.dark { color:#093768; }
    .dark a { color:#093768; }
.blue { color:#1B7E9E; }
.green { color:#148670; }
.red { color:#DD1114; }


.mark {background:linear-gradient(transparent 85%, #DAB212 0%); font-weight:600;}

.under-title {
        padding-bottom:.35rem;
        border-bottom:3px solid #093768;
        }
        .under-title.green { border-bottom:3px solid #148670; }
        .under-title.blue { border-bottom:3px solid #1B7E9E; }
        .under-title-s {
        padding-bottom:.35rem;
        border-bottom:1px solid rgb(0 0 0  / .6);
        }
.bar-title {
        position: relative;
        padding-top:100px;
        }
        .bar-title:before {
        content: "";
        display: block;
        position: absolute;
        top:0;
        left:50%;
        width:1px;
        height:70px;
        background: rgb(0 0 0 / .3);
        }


.dotted-title {
        padding-bottom:.35rem;
        border-bottom:4px dotted rgb(0 0 0 / .6);
        }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:50%;
        width:100%;
        height:1px;
        background: rgb(255 255 255 / .4);
        margin-left:1em;
        z-index: -1;
        }



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

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

       トップページ

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

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

        .greeting-wrap {
        position: relative;
        width:100%;
        padding:14% 0;
        background: url("../images/img/top/bg-01.jpg") center center / cover;
        color:#FFF;
        }
        .greeting {
        position: relative;
        z-index: 0;
        }
        .greeting:before,
        .greeting:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        width:220px;
        height:220px;
        z-index: -1;
        }
        .greeting:before { right:50%; margin-right:340px; background: url("../images/parts/img-fish-w.svg") center center / cover;
        animation-name: move4;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-duration: 2s;
        }
        .greeting:after { left:50%; margin-left:340px; background: url("../images/parts/img-sao.svg") center center / cover;
        animation-name: move3;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-duration: 3s;
        }
        @media screen and (max-width:1350px) {
        .greeting:before,
        .greeting:after { width:190px; height:190px; }
        .greeting:before { margin-right:250px; }
        .greeting:after { margin-left:250px; }
        }
        @media screen and (max-width:1024px) {
        .greeting:before,
        .greeting:after { width:160px; height:160px; }
        .greeting:before { margin-right:210px; }
        .greeting:after { margin-left:210px; }
        }
        @media screen and (max-width:767px) {
        .greeting:before,
        .greeting:after { display:none; }
        .greeting-wrap { padding:18vw 0; }
        }

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

        .att-wrapper {
        padding:2%; 
        box-sizing: border-box;
        }
        .att-wrap {
        border-radius:20px;
        overflow: hidden;
        }
        .att-a { background:rgb(198 226 245 / .35); }
        .att-b { background:rgb(215 242 226 / .45); }
        
        .att-text {
        padding:3.5rem;
        box-sizing: border-box;
        width:100%;
        max-width:900px;
        margin-inline:auto;
        }
        .after-fish,.after-leaf {
        position: relative;
        z-index: 0;
        }
        .after-fish:before,
        .after-fish:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-2vw;
        width:6vw;
        height:4vw;
        z-index: 2;
        animation-name: move4;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-duration: 2s;
        }
        .after-fish:before { left:5%; background: url("../images/parts/img-fish-1.svg") center center / cover; }
        .after-fish:after { right:5%; background: url("../images/parts/img-fish-2.svg") center center / cover; }

        .after-leaf:before,
        .after-leaf:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-2vw;
        width:4vw;
        height:6vw;
        z-index: 2;
        animation-name: move5;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-duration: 3s;
        }
        .after-leaf:before { left:5%; background: url("../images/parts/img-leaf-1.svg") center center / cover; }
        .after-leaf:after { right:5%; background: url("../images/parts/img-leaf-2.svg") center center / cover; }
        @media screen and (max-width:1200px) {
        .att-text .f36 { font-size:27px; }
        }
        @media screen and (max-width:1024px) {
        .att-text { padding:2.5rem; }
        .att-text .f36 { font-size:25px; }
        .after-fish:before, .after-fish:after { bottom:-3vw; width:9vw; height:6vw; }
        .after-leaf:before,.after-leaf:after { bottom:-3vw; width:6vw; height:9vw; }
        }
        @media screen and (max-width:767px) {
        .att-wrapper { padding:4%; }
        .att-text { padding:2rem 1.75rem; }
        .after-fish:before, .after-fish:after { bottom:-7vw; width:18vw; height:12vw; }
        .after-leaf:before,.after-leaf:after { bottom:-7vw; width:12vw; height:18vw; }
        }

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

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

        @media screen and (max-width:767px) {
        .top-news-list .top-news-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; }
        }

        /*=================================================
                BANNER
        ==================================================*/

        .banner-wrap {
        position: relative;
        width:100%;
        z-index: 0;
        }
        .banner-wrap a {
        display: block;
        width:100%;
        padding:220px 100px;
        box-sizing: border-box;
        border-radius: 20px;
        background: url("../images/parts/banner-bg.jpg") center center / cover;
        z-index: 0;
        }
        .banner-btn {
        position: absolute;
        top:50%;
        left:8%;
        translate:0 -50%;
        width:90%;
        white-space: nowrap;
        color:#FFF;
        z-index: 2;
        }
        .more-reservation {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap:.75em;
        width:100%;
        }
        .more-reservation i {
        width:1em;
        height:1em;
        background: url("../images/parts/icon-arrow.svg") center center / cover;
        }
        .banner-fish {
        position: absolute;
        bottom:-50px;
        right:7%;
        width:200px;
        height:200px;
        z-index: 1;
        }
        @media screen and (max-width:1600px) {
        .banner-wrap a { padding:13.75vw 6.25vw; }
        }
        @media screen and (max-width:1250px) {
        .banner-fish { width:16vw; height:16vw; bottom :-4vw; }
        }
        @media screen and (max-width:767px) {
        .banner-wrap a { padding:25vw 1.75rem 40vw; }
        .banner-btn { top:3rem; translate:0; }
        .banner-fish { width:30vw; height:30vw; bottom :-10vw; }
        }

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

       下層 ヘッダー

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

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
        max-height:calc(100vh - 98px);
        z-index: 0;
        }

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

        .page-header-slider {
        position: relative;
        z-index: 0;
        }

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

        .stay_01 { background: url("../images/img/stay/header-01.jpg") center center / cover; }
        .stay_02 { background: url("../images/img/stay/header-02.jpg") center center / cover; }
        .stay_03 { background: url("../images/img/stay/header-03.jpg") center center / cover; }
        .stay_04 { background: url("../images/img/stay/header-04.jpg") center center / cover; }
        .stay_05 { background: url("../images/img/stay/header-05.jpg") center center / cover; }

        .cuisine_01 { background: url("../images/img/cuisine/header-01.jpg") center center / cover; }
        .cuisine_02 { background: url("../images/img/cuisine/header-02.jpg") center center / cover; }
        .cuisine_03 { background: url("../images/img/cuisine/header-03.jpg") center center / cover; }
        .cuisine_04 { background: url("../images/img/cuisine/header-04.jpg") center center / cover; }
        .cuisine_05 { background: url("../images/img/cuisine/header-05.jpg") center center / cover; }
        
        .yoro_01 { background: url("../images/img/yoro/header-01.jpg") center center / cover; }
        .yoro_02 { background: url("../images/img/yoro/header-02.jpg") center center / cover; }
        .yoro_03 { background: url("../images/img/yoro/header-03.jpg") center center / cover; }
        .yoro_04 { background: url("../images/img/yoro/header-04.jpg") center center / cover; }
        .yoro_05 { background: url("../images/img/yoro/header-05.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:75%; }
        .page-header-slick .fade-slick figure { height:0; padding-bottom:75%; }
        .slick-wrap.page-header-slick:after { padding-bottom:75%; }
        }


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

        .page-header {
        position: relative;
        width: 100%;
        height:100%;
        max-height:calc(100vh - 98px);
        overflow: hidden;
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:50%;
        height:0;
        width:100%;
        }
        .page-header.short:before { padding-bottom:35%; }

        .fishing      { background: url("../images/img/fishing/header.jpg") center center / cover; }
        .bbq          { background: url("../images/img/bbq/header.jpg") center center / cover; }
        .onsen        { background: url("../images/img/onsen/header.jpg") center center / cover; }
        .charge       { background: url("../images/img/charge/header.jpg") center center / cover; }
        .yoro         { background: url("../images/img/yoro/header.jpg") center center / cover; }
        .access       { background: url("../images/img/access/header.jpg") center center / cover; }
        .faq          { background: url("../images/img/faq/header.jpg") center center / cover; }
        .news         { background: url("../images/img/news/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;
        padding:0px 3vw 30px;
        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: 150px;
        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: center;
        line-height:150%;
        font-weight:600;
        letter-spacing: .05em;
        color:#FFF;
        z-index: 2;
        }
        .page-title p {
        position: relative;
        text-align: left;
        letter-spacing: 0;
        color:#FFF;
        z-index: 2;
        }

        @media screen and (max-width:1240px) {
        .page-title { padding:0 3vw 25px; }
        }
        @media screen and (max-width:767px) {
        .page-title { padding:0 6vw 4vw; }
        }

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

       FISHING

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

    .blue-wrap {
        background: url("../images/img/top/bg-01.jpg") center center / cover;
        padding:80px;
        box-sizing: border-box;
        color:#FFF;
        }
        
        
        .icons-wrap {
        position: relative;
        padding:28%;
        width:90%;
        max-width:270px;
        margin-inline:auto;
        box-sizing: border-box;
        z-index: 0;
        }
        .icons-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:50%;
        translate:-50%;
        width:100%;
        height:0;
        padding-bottom:100%;
        background: rgb(9 55 104 / .05);
        border-radius: 100%;
        z-index: -1;
        }
        .icons-wrap.icon-green:after { background: rgb(20 134 112 / .05); }
        .icons-wrap.icon-blue:after { background: rgb(27 126 158 / .05); }
        
        .icons-title {
        position: relative;
        margin-top:-20%;
        z-index: 1;
        }
        .icons-title h3 {
        font-size:clamp(15px, 1.75vw, 20px);
        }
        
        
        @media screen and (max-width:1600px) {
        .blue-wrap { padding:5vw; }
        
        }
        @media screen and (max-width:1024px) {
        .blue-wrap { padding:4vw; }
        .highlight-title h3 { font-size:1.2rem; }
        }
        @media screen and (max-width:767px) {
        .blue-wrap { padding:7.5vw; }
        .icons-wrap { padding:40px; width:130px; }
        .icons-title { margin-top:-30px; }
        .icons-title h3 { font-size:clamp(10px, 3.5vw, 18px); }
        }
        
/*==================================================================================================

       charge

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

        .nomber-title {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap:1.25rem;
        padding-bottom:.5rem;
        border-bottom:2px solid #148670;
        }
        @media screen and (max-width:767px) {
        .nomber-title { flex-direction: column; gap:.25rem; align-items: flex-start; }
        
        
        }


.footer-border-r {
        border-right:1px solid rgb(255 255 255 / .5);
        }
        @media screen and (max-width:1024px) {
        .footer-border-r { border-right:none; border-bottom:1px solid rgb(255 255 255 / .5); padding-bottom:2rem; }
        }