@charset "UTF-8";

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

       hero

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

.hero-wrap {
        position: relative;
        width:100%;
        max-width:1100px;
        margin: 0 auto;
        box-sizing: border-box;
        z-index: 1;
        }
        .hero-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:-150px;
        right:-9%;
        width:500px;
        height:240px;
        background: url("../images/parts/header_bg.png") center center / cover;
        z-index: -1;
        -webkit-transition: all .3s ease;
                transition: all .3s ease;
        }
        @media screen and (max-width:1100px) {
        .hero-wrap:after { top:-140px; }
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:0; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:0; }
        }

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

       Movie

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

.movie-wrap {
        position: relative;
        box-sizing: border-box;
        height: auto;
        z-index: 2;
        }
        .movie-wrap:before,
        .movie-wrap:after {
        content:"";
        display: block;
        position: absolute;
        bottom:20px;
        width:260px;
        height:400px;
        z-index: -1;
        }
        .movie-wrap:before { left:-160px; background: url("../images/img/top/header-left.png") center center / cover; }
        .movie-wrap:after { right:-220px; background: url("../images/img/top/header-right.png") center center / cover; }
        .movie-wrap.pages:before,
        .movie-wrap.pages:after {
        height:300px;
        }
        .movie-wrap.pages:before { background: url("../images/img/oryouri/header-left.png") center center / cover; }
        .movie-wrap.pages:after { background: url("../images/img/oryouri/header-right.png") center center / cover; }
        .movie {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
        overflow: hidden;
        }
        .movie_inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        z-index: 0;
        top: 0;
        }
        .movie_inner video {
        object-fit: cover; /* 左記fit時設定。 アスペクト時は削除 */
        }
        .video-js {
        height: 100% !important;
        }
        .video-js .vjs-tech { 
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%,-50%);
        }

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

       背景

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

.bg-white { background: #FFF; }

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

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

        タイトル / テキスト

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

.white { color:#FFF !important; }
.white .en { color:#FFF; }
.red { color:#800000;}
.green {color:#285B4A; }

        .border-title {
        padding-bottom:8px;
        border-bottom:2px solid #111;
        }

.th38 img { height:38px; width:auto; }
.th45 img { height:45px; width:auto; }
.th79 img { height:79px; width:auto; }
.th116 img {  }
.th127 img {  }
.th130 img { height:130px; width:auto; }
.th145 img {  }


        @media screen and (max-width:1024px) {
        .th33 img { height:23px; width:auto; }
        .th35 img { height:24px; width:auto; }
        .th37b img { height:25px; width:auto; }
        .th38 img { height:27px; }
        .th40 img { height:27px; width:auto; }
        .th41 img { height:27px; width:auto; }
        .th45 img { height:32px; }
        .th62 img { height:50px; width:auto; }
        .th79 img { height:64px; }
        .th84 img { height:56px; width:auto; }
        .th96 img { height:70px; width:auto; }
        .th125 img { height:88px; width:auto; }
        .th130 img { height:90px; }
        .th168 img { height:108px; width:auto; }
        .th190 img { height:130px; width:auto; }
        }
        @media screen and (max-width:767px) {
        .th33 img { height:19px; }
        .th35 img { height:20px; }
        .th37b img { height:25px; }
        .th37 img { height:45px; width:auto; }
        .th38 img { height:21px; }
        .th40 img { height:42px; }
        .th41 img { height:25px; }
        .th45 img { height:26px; }
        .th62 img { height:40px; }
        .th79 img { height:50px; }
        .th84 img { height:45px; }
        .th96 img { height:55px; }
        .th116 img { height:82px; width:auto; }
        .th125 img { height:70px; }
        .th127 img { height:84px; width:auto; }
        .th130 img { height:80px; }
        .th145 img { height:100px; width:auto; }
        .th168 img { height:92px; }
        .th190 img { height:105px; }
        }

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

       トップページ

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

        /*=================================================
                Greeting
        ==================================================*/

        .top-img-02 {
        width:125%;
        margin-left:-25%;
        }
        @media screen and (max-width:1024px) {
        .greeting-title { width:118%; margin-left:-9%; }
        }

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

        .att-sub-01 { padding-right:1rem; }
        .att-sub-02 { padding-left:1rem; }
        .att-sub-03 { margin-bottom:-30px; width:112%; }
        .after-comment { position: relative; z-index: 0; }
        .after-comment:after {
        content:"";
        display: block;
        position: absolute;
        top:37%;
        left:-75px;
        width:110px;
        height:110px;
        background: url("../images/img/top/img_06.png") center center / cover;
        z-index: -1;
        }
        @media screen and (max-width:1024px) {
        .after-comment:after { display: none; }
        }
        @media screen and (max-width:767px) {
        .att-sub-01 { padding-right:0rem; }
        .att-sub-03 { width:100%; max-width:210px; margin:-10px auto 0; }
        }

        /*=================================================
                search plan
        ==================================================*/

        .search-box {
        width:300px;
        height:522px;
        box-sizing: border-box;
        padding:0 20px;
        margin:0 auto;
        background: url("../images/img/top/search-bg.png") center center / cover;
        }
        .search-title {
        padding:50px 0 1rem;
        max-width:155px;
        margin: 0 auto;
        }
        .plans-wrap {
        padding-left:2rem;
        box-sizing: border-box;
        }
        @media screen and (max-width:1024px) {
        .plans-wrap { padding-left:1rem; }
        }
        @media screen and (max-width:767px) {
        .plans-wrap { padding-left:0; }
        }

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

       下層 ヘッダー

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

.page-header-wrap {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 1;
        }
        .page-header-wrap:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        height:170px;
        background: rgb(246,246,246);
        background: linear-gradient(0deg, rgba(246,246,246,1) 0%, rgba(246,246,246,0) 100%);
        z-index: 0;
        }

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

        .page-header {
        position: relative;
        width: 100%;
        height:auto;
        padding-bottom:27.272727%;
        z-index: 0;
        }
        .page-header:before,
        .page-header:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0px;
        width:260px;
        height:300px;
        z-index: -2;
        }
        .page-header:before { left:-170px; background: url("../images/img/oryouri/header-left.png") center center / cover; }
        .page-header:after { right:-230px; background: url("../images/img/oryouri/header-right.png") center center / cover; }
        
        .guesthouse    { background: url("../images/img/guesthouse/header.jpg") center center / cover; }
        .kankou        { background: url("../images/img/kankou/header.jpg") center center / cover; }
        .yoyaku        { background: url("../images/img/yoyaku/header.jpg") center center / cover; }
        .access        { background: url("../images/img/access/header.jpg") center center / cover; }


.page-title {
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        padding:0 20px 10px;
        box-sizing: border-box;
        text-align: right;
        z-index:2;
        }
        .page-title h1 img { height:49px; width:auto; }
        .page-title.th40 h1 img { height:40px; width:auto; }

        @media screen and (max-width:1024px) {
        .page-title h1 img { height:40px; }
        .page-title.th40 h1 img { height:36px; }
        }
        @media screen and (max-width:767px) {
        .page-title h1 img { height:32px; }
        .page-title.th40 h1 img { height:28px; }
        }

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

       oryouri

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

        .ryouri-title-01 {
        padding-top:60px;
        position: relative;
        z-index: 0;
        }
        .ryouri-title-01:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left: 0;
        width:498px;
        height:122px;
        background: url("../images/img/oryouri/bg-01.png") center center / cover;
        z-index: -1;
        }
        
        .mikaku-wrap {
        position: relative;
        z-index: 0;
        padding:150px 0 180px;
        }
        .mikaku-img figure {
        position: absolute;
        top:0;
        width:460px;
        height:460px;
        z-index: -1;
        }
        .mikaku-img figure:nth-child(1) { left:-90px; }
        .mikaku-img figure:nth-child(2) { right:-90px; }
        
        .menus { position: relative; z-index: 1; }
        .menus:after {
        content:"";
        display: block;
        position:absolute;
        top:-285px;
        right:0;
        width:262px;
        height:262px;
        background: url("../images/img/oryouri/img_05.png") center center / cover;
        z-index: 1;
        }
        .menus-title {
        position: absolute;
        top:-4.5rem;
        left:0;
        width:100%;
        text-align: center;
        }
        @media screen and (max-width:1024px) {
        .ryouri-title-01 { padding-top:38px; }
        .ryouri-title-01:after { width:370px; height:91px; }
        .mikaku-img figure { width:390px; height:390px; }
        .mikaku-text { max-width:300px; margin:0 auto; }
        .menus-title { top:-4rem;}
        .menus:after { width: 200px; height:200px; top:-220px; }
        
        }
        @media screen and (max-width:767px) {
        .ryouri-title-01 { padding-top:30px; }
        .ryouri-title-01:after { width:300px; height:72px; }
        .mikaku-wrap { padding:0; }
        .mikaku-img { position: relative; height:0; width:100%; padding-bottom:75%; }
        .mikaku-img figure { width:65%; height:auto; }
        .mikaku-img figure:nth-child(1) { left:-5%; }
        .mikaku-img figure:nth-child(2) { right:-5%; top:40%; }
        .mikaku-text { padding-bottom:4rem; }
        .menus { padding-top:150px; }
        .menus:after { width: 180px; height:180px; top:-40px; right:auto; left:50%; transform: translateX(-50%); }
        .menus-title { position: relative; top:auto; padding-bottom:1.5rem; }
        }

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

       guestroom

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

        .share {
        position: relative;
        z-index: 0;
        padding:40px 0 40px;
        }
        .share:before,
        .share:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        width:280px;
        height:240px;
        z-index: -1;
        }
        .share:before { left:0; background: url("../images/img/guesthouse/bg-01.png") center center / cover; }
        .share:after { right:0; background: url("../images/img/guesthouse/bg-02.png") center center / cover; }

        @media screen and (max-width:1024px) {
        .share:before,.share:after { width:196px; height:168px; }
        .share-text { margin:0 auto; max-width:370px; }
        }
        @media screen and (max-width:767px) {
        .share { padding:120px 0 0; }
        .share:before,.share:after { width:140px; height:120px; }
        }

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

       kankou

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

        .fish-img {
        margin-top:-150px;
        position: relative;
        z-index: 2;
        }
        .season-wrap {
        position: relative;
        z-index: 0;
        padding-top:50px;
        }
        .season-wrap:before,
        .season-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        z-index: -1;
        }
        .season-wrap:before { left:-150px; width:380px; height:380px; background: url("../images/img/kankou/bg_01.png") center center / cover; }
        .season-wrap:after { right:-150px; width:270px; height:270px; background: url("../images/img/kankou/bg_02.png") center center / cover; }
        .fish-seasons { position: relative; width:100%; max-width:872px; margin:0 auto; z-index: 0; }
        .fish-seasons:before {
        content:"";
        display: block;
        position:absolute;
        bottom:0%;
        right:-270px;
        width:260px;
        height:260px;
        background: url("../images/img/kankou/bg_03.png") center center / cover;
        z-index: -1;
        }
        .season-table img { min-width:600px; }
        
        .after-map {
        position: relative;
        z-index: 0;
        padding:30px 0 0;
        min-height:430px;
        box-sizing: border-box;
        }
        .after-map:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        right:0;
        width:400px;
        height:400px;
        background: url("../images/img/kankou/bg_04.png") right top / cover;
        z-index: -1;
        }
        @media screen and (max-width:1024px) {
        .season-wrap:before { left:-90px; width:260px; height:260px; }
        .season-wrap:after { right:-90px; width:190px; height:190px; }
        .after-map:after { width:300px; height:300px; }
        }
        @media screen and (max-width:767px) {
        .fish-img { margin-top:-110px; }
        .season-wrap:before { left:-20px; width:100px; height:100px; }
        .season-wrap:after { right:-20px; width:100px; height:100px; }
        .after-map:after { width:270px; height:270px; }
        }

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

      access

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

        .map-title {
        position: relative;
        z-index: 0;
        }
        .map-title:after {
        content:"";
        display: block;
        position: absolute;
        right:-150px;
        top:-30px;
        width:280px;
        height:140px;
        background: url("../images/img/access/bg_01.png") center center / cover;
        z-index: -1;
        }

        .root-tag { padding-left:30px; }
        .roottag-list li { padding-bottom:1rem; }
        .root-map { margin-top:-250px; }
        @media screen and (max-width:1024px) {
        .map-title:after { right:-90px;width:196px; height:98px; }
        .root-tag { padding-left:0px; }
        .root-map { margin-top:-200px; }
        }
        @media screen and (max-width:767px) {
        .map-title:after { width:140px; height:70px; top:-20px; right:-55px; }
        .root-map { margin-top:0px; width:130%; margin-left:-20%; }
        }