@charset "UTF-8";

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

       hero

===================================================================================================*/
svg {
  overflow: visible;
}
.hero-wrap {
        position: relative;
        box-sizing: border-box;
        width:100%;
        z-index: 0;
        }
        .hero-wrap:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-1px;
        width:100%;
        height:30px;
        background: url("../images/img/top/fuchi-bottom.png") repeat-x;
        z-index: 1;
        }
        
        
        .movie-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left: 0;
        width:100%;
        height:100%;
        background: rgba(0,0,0,.3);
        z-index: 0;
        }
        .movie-title {
        font-family: "Shippori Mincho B1", serif;
        position: absolute;
        top:calc(50% + 45px);
        left:50%;
        translate:-50% -50%;
        z-index: 1;
        }
        .movie-title p {
        position: relative;
        line-height: 180%;
        font-size:60px;
        color:#FFF;
        font-weight:700;
        min-height:610px;
        }
        .movie-title p:after {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:480px;
        height:480px;
        background: url("https://habusou.com/assets/images/parts/maru-w.svg") center center / cover;
        opacity: .2;
        z-index: -1;
        }
        @media screen and (max-width:2000px) {
        .movie-title p { font-size:3vw; min-height:3.1vw; }
        .movie-title p:after { width:24vw; height:24vw; }
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:96px;  }
        .movie-title { display: none; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:80px; }
        .hero-wrap:after { background: url("../images/img/top/fuchi-bottom-sp.png") repeat-x; height:15px; }
        }

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

       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%);
        }

        /*=================================================
        高さ100％の場合
        ==================================================*/
        /*
        .movie_inner {
        position: relative;
        width: 100%;
        height:100vh;
        min-height: 800px;
        overflow: hidden;
        z-index: 0;
        top: 0;
        }
        .movie_inner video { object-fit: cover; }
        @media screen and (max-width:1024px) {
        .movie_inner { min-height: 600px; }
        }
        @media screen and (max-width:767px) {
        .movie_inner { min-height: 300px; }
        }
        */

        /*=================================================
        PCのみvh100%　スマホ：アスペクト比固定の場合　top-movie付与
        ==================================================*/
        /* 
        .movie_inner {
        position: relative;
        width: 100%;
        height:calc(100vh - 130px);
        overflow: hidden;
        z-index: 0;
        top: 0;
        }
        .movie_inner video { object-fit: cover; }


        @media screen and (max-width:1024px) {
        .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:70%; }
        }
       */
        /*=================================================
        すべてアスペクト比固定の場合（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;
		}

        @media screen and (max-width: 1024px) {
        /* スマホ高さ変更 */
        .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:70%; }
        /* スマホ高さ変更ここまで */
        }
        @media screen and (max-width:767px) {
            
        }


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

       背景

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

.border-box {
        border:3px solid #1C4B6C;
        padding:3.5rem 4rem;
        background:rgba(255,255,255,.5);
        box-sizing: border-box;
        overflow: hidden;
        }
        .border-box-s {
        border:1px solid #aaa;
        padding:2.5rem 3rem;
        box-sizing: border-box;
        }
        .border-box-s.bg-white { background: #FFF; }

.bg-blue {
        position:relative;
        background: url("../images/img/top/blue.jpg") repeat;
        color:#FFF;
        z-index: 0;
        }
        .bg-blue:before,
        .bg-blue:after {
        content:"";
        display: block;
        position: absolute;
        left:0;
        width:100%;
        height:30px;
        z-index: 1;
        }
        .bg-blue:before { top:-1px; background:url("../images/img/top/fuchi-top.png") repeat-x; }
        .bg-blue:after { bottom:-1px; background:url("../images/img/top/fuchi-bottom.png") repeat-x; }


.bg-blue02 {
        position:relative;
        background: url("../images/img/top/blue.jpg") repeat;
        color:#FFF;
        z-index: 0;
        }
        .bg-blue02:before,
        .bg-blue02:after {
        content:"";
        display: block;
        position: absolute;
        left:0;
        width:100%;
        height:30px;
        z-index: 1;
        }
        
        .bg-blue02:after { bottom:-1px; background:url("../images/img/top/fuchi-bottom02.png") repeat-x; }










.after-wave {
        position: relative;
        z-index: 0;
        }
        .after-wave:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-16%;
        left:-10%;
        translate:-40% 0;
        width:1200px;
        height:400px;
        opacity:.2;
        z-index: -1
        }
        .after-wave.wave-b:after {background: url("../images/img/top/tako.svg") center center no-repeat;}
        .after-wave.wave-w:after {background: url("../images/img/top/nami.png") center center no-repeat;}



@media screen and (max-width:1024px) {
        .after-wave.wave-w:after {background:none}
    
}

.after-wave_kasou {
        position: relative;
        z-index: 0;
        }
        .after-wave_kasou:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-16%;
        left:-10%;
        translate:-40% 0;
        width:1200px;
        height:400px;
        opacity:.2;
        z-index: -1
        }
.after-wave_kasou.wave-w:after {background: url("../images/img/top/nami.png") center center no-repeat;
background-size: 120%;}



@media screen and (max-width:1024px) {
.after-wave_kasou.wave-w:after {background:none}}


.after-wave_cu {
        position: relative;
        z-index: 0;
        }
.after-wave_cu:after {
        content:"";
        display: block;
        position: absolute;
        bottom:-16%;
        left:60%;
        translate:-40% 0;
        width:800px;
        height:400px;
        opacity:.2;
        z-index: -1
        }
.after-wave_cu.wave-w:after {background: url("../images/img/top/nami.png") center center no-repeat;
background-size: 80%;}

@media screen and (max-width:1024px) {
.after-wave_cu.wave-w:after {background:none}}



.after-wave_cu02 {
        position: relative;
        z-index: 0;
        }
.after-wave_cu02:after {
        content:"";
        display: block;
        position: absolute;
        bottom:70%;
        left:40%;
        translate:-40% 0;
        width:800px;
        height:400px;
        opacity:.2;
        z-index: -1
        }
.after-wave_cu02.wave-w:after {background: url("../images/img/top/nami.png") center center no-repeat;
background-size: 80%;}

@media screen and (max-width:1024px) {
.after-wave_cu02.wave-w:after {background:none}}




@media screen and (max-width:1200px) {
.after-wave.wave-b:after {background: url("../images/img/top/tako.svg") center center no-repeat;
bottom:-14%;
left:-22%;
background-size: 14%;}
}

@media screen and (max-width:1024px) {
.after-wave.wave-b:after{background: url("../images/img/top/tako_tab.svg") center center no-repeat;
bottom:-145%;
left:0%;
background-size: 22%;}
}

@media screen and (max-width:768px) {
.after-wave.wave-b:after{background: none;}
}



.after-nami {
        position: relative;
        z-index: 0;
        }
        .after-nami:after {
        content:"";
        display: block;
        position: absolute;
        top:0%;
        translate:0 -50%;
        width:600px;
        height:240px;
        background: url("../images/img/top/fugu.svg") center center no-repeat;
        opacity:.4;
        z-index: -1
        }
        .after-nami.right:after { left:150px; }
        .after-nami.left:after { left:-410px; }
        .after-nami.right-s:after { right:-310px; }
        .after-nami.left-s:after { left:-310px; }
        .after-nami.top:after { top:25%; }
        .after-nami.bottom:after { top:85%; }

.white-wrap {
        background: #fff repeat;
        padding:100px;
        box-sizing: border-box;
        color:#2B2E2D;
        }
.white-box {
        background: url("https://habusou.com/assets/images/parts/background.png") repeat;
        padding:2.5rem;
        box-sizing: border-box;
        color:#2B2E2D;
        }

        @media screen and (max-width:1800px) {
        .after-nami.right:after { right:-25%; }
        .after-nami.left:after { left:-25%; }
        }
        @media screen and (max-width:1350px) {
        .after-wave:after { width:1050px; height:350px; }
        .after-nami:after { width:540px; height:216px; }
        .white-wrap { padding:75px; }
        .after-nami.right-s:after { right:-210px; }
        .after-nami.left-s:after { left:-210px; }
        }
        @media screen and (max-width:1024px) {
        .border-box-s { padding:2rem 2rem; }
        .after-wave:after { width:900px; height:300px; }
        .after-nami:after { width:360px; height:144px; }
        .white-wrap { padding:40px; }
        .white-box { padding:2rem; }
        }
        @media screen and (max-width:767px) {
        .border-box-s { padding:1.5rem 1.5rem; }
        .border-box  { padding:2rem 9%; }
        .after-wave:after { width:600px; height:200px; }
        .after-nami:after { width:240px; height:96px; }
        .after-nami.right-s:after { right:-110px; }
        .after-nami.left-s:after { left:-110px; }
        .bg-blue:before { height:15px; background:url("../images/img/top/fuchi-top-sp.png") repeat-x; }
        .bg-blue:after { height:15px; background:url("../images/img/top/fuchi-bottom-sp.png") repeat-x; }
        .white-wrap { padding:30px 1.7rem; }
        .white-box { padding:1.75rem; }
        }




 .after-wave02:after {
        content:"";
        display: block;
        position: absolute;
        bottom:0%;
        left:50%;
        translate:-40% 0;
        width:1200px;
        height:400px;
        opacity:.2;
        z-index: -1
        }
        .after-wave02.wave-b02:after {background: url("../images/img/top/fugu.svg") center center no-repeat;
 background-size: 20%;}

@media screen and (max-width:1200px) {
.after-wave02.wave-b02:after {background: url("../images/img/top/fugu.svg") center center no-repeat;
 bottom:-45%;
        left:30%;
    background-size: 20%;}
}

@media screen and (max-width:1024px) {
          .after-wave02.wave-b02:after {background: none;}
}


 @media screen and (max-width:1350px) {
     .after-wave02:after { width:1050px; height:350px; }}
     
      @media screen and (max-width:1024px) {

          .after-wave02:after { width:900px; height:300px; }}
          
           @media screen and (max-width:767px) {
        
               .after-wave02:after { width:600px; height:200px; }}







 .after-wave03:after {
        content:"";
        display: block;
        position: absolute;
       top:-18%;
        left:0%;
        translate:-40% 0;
        width:1200px;
        height:400px;
        opacity:.2;
        z-index: -1
        }
        .after-wave03.wave-b03:after {background: url("../images/img/top/kani.svg") center center no-repeat;}

@media screen and (max-width:1200px) {
.after-wave03.wave-b03:after {background: url("../images/img/top/kani.svg") center center no-repeat;
    background-size: 18%;}
}

@media screen and (max-width:1024px) {
            .after-wave03.wave-b03:after {background: none;}
}


 @media screen and (max-width:1350px) {
     .after-wave03:after { width:1050px; height:350px; }}
     
      @media screen and (max-width:1024px) {

          .after-wave03:after { width:900px; height:300px; }}
          
           @media screen and (max-width:767px) {
        
               .after-wave03:after { width:600px; height:200px; }}


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

        タイトル / テキスト

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

.white { color:#FFF !important; }
.white .en { color:#FFF; }
.red { color:#A12929;}
.blue { color:#213764;}
.yellow { color:#dbb459; }
.blue02 { color:#1B496A;}

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

.under-title02 {
        padding-bottom:.25rem!important;
        border-bottom:1px solid rgba(255,255,255,.6);
    width: 60%;
    margin: 0px auto;
        }
        .bg-green .under-title02 {  border-bottom:1px solid rgba(255,255,255,.6); }
.box-title {
        border:1px solid rgba(0,0,0,.4);
        border-bottom:3px solid rgba(0,0,0,.65);
        padding:.7rem 1.2rem;
        box-sizing: border-box;
        }
.bar-title {
        position: relative;
        padding-top:1rem;
        box-sizing: border-box;
        }
        .bar-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left: 0;
        width:60px;
        height:5px;
        background:#8E1930;
        }
.bar-title-s {
        position: relative;
        padding-top:.75rem;
        box-sizing: border-box;
        }
        .bar-title-s:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left: 0;
        width:40px;
        height:3px;
        background:#8E1930;
        }
.dotted-title {
        padding-bottom:.25rem;
        border-bottom:2px dotted #3A0D22;
        }
.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:50%;
        transform: translateY(-50%);
        width:100%;
        height:1px;
        background:rgba(0,0,0,.3);
        margin-left:1.5rem;
        z-index: -1;
        }
        .bg-green .lead:after { background: rgba(255,255,255,.3); }
        .sp-lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .sp-lead:after {
        content:"";
        position: absolute;
        display: none;
        top:50%;
        transform: translateY(-50%);
        width:100%;
        height:1px;
        background:rgba(0,0,0,.3);
        margin-left:1.5rem;
        z-index: -1;
        }
.center-lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .center-lead:before,
        .center-lead:after {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        width:95px;
        height:1px;
        background:#CCC;
        }
        .center-lead:before { left:50%; margin-left:-160px; }
        .center-lead:after { right:50%; margin-right:-160px; }

        @media screen and (max-width:767px) {
        .center-lead:before,.center-lead:after { width:60px;}
        .center-lead:before { left:50%; margin-left:-115px; }
        .center-lead:after { right:50%; margin-right:-115px; }
        }


.label-title {
        padding:.45em 1.25rem;
        box-sizing: border-box;
        background:#497694;
        color:#FFF;
        }
.maru-title {
        position: relative;
        z-index: 0;
        }
        .maru-title:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:50%;
        translate:-50% -50%;
        width:460px;
        height:460px;
        opacity: .1;
        z-index: -1;
        }
        .maru-title.maru-w:after { background: url("https://habusou.com/assets/images/parts/maru-w.svg") center center / cover; }
        .maru-title.maru-b:after { background: url("https://habusou.com/assets/images/parts/maru-b.svg") center center / cover; }

        @media screen and (max-width:1024px) {
        .bar-title:after { width:50px; height:4px; }
        .maru-title:after { width:380px; height:380px; }
        }
        @media screen and (max-width:767px) {
        .bar-title:after { width:40px; height:3px; }
        .sp-lead:after { display: inline-block; }
        .maru-title:after { width:270px; height:270px; }
        }


.under-title02 {
        padding-bottom:.25rem;
        border-bottom:1px solid rgba(225,225,225,.6);
        }

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

       縦書き

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

        .tate245 { min-height:245px; }
        .tate270 { min-height:270px; }
        .tate280 { min-height:280px; }
        .tate300 { min-height:300px; }
        .tate335 { min-height:335px; }
        .tate380 { min-height:380px; }
        .tate415 { min-height:415px; }
        .tate430 { min-height:430px; }
        .tate450 { min-height:450px; }

        @media screen and (max-width:1350px) {
        .tate245 { min-height:200px; }
        .tate270 { min-height:240px; }
        .tate280 { min-height:250px; }
        .tate300 { min-height:270px; }
        .tate335 { min-height:285px; }
        .tate380 { min-height:310px; }
        .tate415 { min-height:330px; }
        .tate430 { min-height:340px; }
        .tate450 { min-height:360px; }
        }
        @media screen and (max-width:1024px) {
        .tate245 { min-height:145px; }
        .tate270 { min-height:210px; }
        .tate280 { min-height:225px; }
        .tate300 { min-height:250px; }
        .tate335 { min-height:260px; }
        .tate380 { min-height:270px; }
        .tate415 { min-height:300px; }
        .tate430 { min-height:245px; }
        .tate450 { min-height:320px; }
        }
        @media screen and (max-width:767px) {
        .tate245 { min-height:0; }
        .tate270 { min-height:160px; }
        .tate280 { min-height:195px; }
        .tate300 { min-height:235px; }
        .tate335 { min-height:225px; }
        .tate380 { min-height:225px; }
        .tate415 { min-height:240px; }
        .tate430 { min-height:0; }
        .tate450 { min-height:270px; }
        }

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

       トップページ

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

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

        .greeting-img {
        position: relative;
        width:100%;
        height:0;
        padding-bottom:115.65%;
        z-index: 0;
        }
        .greeting-img:after {
        content:"";
        display: block;
        position: absolute;
        top:19%;
        left:11%;
        width:85%;
        height:78.5%;
        background:#7CBDD8 repeat;
        z-index: -1;
        }
        .greeting-img figure:nth-child(1) {
        position: absolute;
        top:0;
        left:-10%;
        width:102%;
        }
        .greeting-img figure:nth-child(2) {
        position: absolute;
        top:60%;
        left:0%;
        width:38%;
        }
        .greeting-img figure:nth-child(3) {
        position: absolute;
        right:0;
        bottom:6.5%;
        width:57%;
        }
        @media screen and (max-width:767px) {
        .greeting-img { padding-bottom:120%; }
        .greeting-img figure:nth-child(1) { left:-5%; width:110%; }
        }

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

        .att-title {
        font-size:60px;
        }
        .att-title span {
        font-size: .5em;
        vertical-align: text-bottom;
        }
        .att-more a {
        position:relative;
        height:45px;
        line-height:45px;
        text-align: center;
        box-sizing: border-box;
        background: none;
        font-weight:400;
        font-size:1rem;
        white-space: nowrap;
        text-decoration:none;
        z-index: 1;
        letter-spacing: 0.05em;
        display:inline-block;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        }
        .bg-blue .att-more a { color:#FFF; }
        .att-more a span {
        vertical-align: bottom;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        }
        .att-more a:hover { opacity:1; }
        .att-more a:hover span { opacity:.35; }
        .att-more a::after {
        position: absolute;
        bottom: 6px;
        left: 60px;
        content: '';
        width: calc(100% - 60px);
        height: 1px;
        background:#213764;
        transform: scale(0, 1);
        transform-origin: right top;
        transition: transform .5s;
        }
        .bg-blue .att-more a::after { background:#FFF; }
        .att-more a:hover::after {
        transform-origin: left top;
        transform: scale(1, 1);
        }
        .icon-arrow-w { background: url("https://habusou.com/assets/images/parts/arrow-w.svg") center center / cover; }
        .icon-arrow-b { background: url("../images/img/top/arrow-b.png") center center / cover; }
        .icon-before-l {
        width:45px;
        height:45px;
        display:inline-block;
        margin-right:1.5rem;
        position: relative;
        top:0;
        }
        @media screen and (max-width:1350px) {
        .att-title { font-size:55px; }
        }
        @media screen and (max-width:1024px) {
        .att-title { font-size:39px; }
        .att-more a { height:39px; line-height: 39px; }
        .icon-before-l { width:39px; height:39px; margin-right:1rem; }
        .att-more a::after { left: 54px; width: calc(100% - 54px); }
        }
        @media screen and (max-width:767px) {
        .att-title { font-size:30px; }
        .att-title span { font-size:1em; vertical-align: baseline; }
        .att-more a { height:30px; line-height: 30px; }
        .icon-before-l { width:30px; height:30px; margin-right:1rem; }
        .att-more a::after { left: 45px; width: calc(100% - 45px); bottom:0; }
        }


        .top-cuisine {
        position: relative;
        width:100%;
        height:120px!important;
            margin: 0px auto;
        background: url("../images/img/top/kani.jpg") center center  no-repeat;
        z-index: 0;
        }
        .top-cuisine:before,
        .top-cuisine:after {
        content:"";
        display: block;
        position: absolute;
        left:0;
        width:100%;
        height:30px;
        z-index: 1;
        }
        /*.top-cuisine:before { top:-1px; background:url("https://habusou.com/assets/images/parts/fuchi-top.png") repeat-x; }
        .top-cuisine:after { bottom:-1px; background:url("https://habusou.com/assets/images/parts/fuchi-bottom.png") repeat-x; }*/
        @media screen and (max-width:2000px) {
        .top-cuisine { height:0; padding-bottom:38%; }
        }
        /*@media screen and (max-width:767px) {
        .top-cuisine:before { height:15px; background:url("../images/img/top/fuchi-top-sp.png") repeat-x; }
        .top-cuisine:after { height:15px; background:url("../images/img/top/fuchi-bottom-sp.png") repeat-x; }
        }*/

@media screen and (max-width:767px) {
     .top-cuisine {
        background: none;
         height: 0!important;
        }
        .top-cuisine:before { height:15px; background:none; }
        .top-cuisine:after { height:15px; background:none; }
        }

@media screen and (max-width:1024px) {
    .top-cuisine {
        position: relative;
       
            margin: 0px auto;
        background: none;
        z-index: 0;
        }
}

.grid_wrap{
    display: grid;
}
.grid_wrap img{
}
.col_pc-5_tabl-3_sp_2{
    gap: clamp(5px,0.8vw,10px);
}
span.kara{
    display:none;
}
.col_pc-5_tabl-3_sp_2 > div{
    grid-column: span 2;
}
@media screen and (min-width:1025px){
    .col_pc-5_tabl-3_sp_2{
         grid-template-columns: repeat(10,minmax(0,1fr)); 
    }   
}
@media screen and (min-width:768px) and (max-width:1024px){
    .col_pc-5_tabl-3_sp_2{
        grid-template-columns: repeat(6,minmax(0,1fr)); 
    }
    span.kara.after-3{
    display:inherit;
    }
}
@media screen and (max-width:767px){
    .col_pc-5_tabl-3_sp_2{
         grid-template-columns: repeat(4,minmax(0,1fr))
    }
    .col_pc-5_tabl-3_sp_2 > div{
        grid-column: span 2;
    }
    span.kara.after-4{
    display:inherit;
    }
}





/*=================================================
                tab-btn
        ==================================================*/

        .btn-wrap {
        position: relative;
        overflow: hidden;
        width:100%;
        }
        .btn-img {
        position:relative;
        width:100%;
        height:0;
        padding-bottom:40%;
        -webkit-transition  : all .3s ease;
        transition  : all .3s ease;
        z-index: 0;
        }
        .btn_01 { background: url("../images/img/cuisine/kani03btn.jpg") center center / cover; }
        .btn_02 { background: url("../images/img/cuisine/reasonable02_btn.jpg") center center / cover; }
        

        .btn_10 { background: url("../images/img/cuisine/fugu01_btn.jpg")center center / cover; }
        .btn_11 { background: url("../images/img/cuisine/stan_btn.jpg") center center / cover; }
        .btn_12 { background: url("../images/img/cuisine/gyutou_btn.jpg") center center / cover; }
        .btn_13 { background: url("../images/img/cuisine/uonabe_btn.jpg") center center / cover; }
        .btn_14 { background: url("../images/img/cuisine/kani01_btn.jpg") center center / cover; }

        .btn_21 { background: url("https://habusou.com/assets/images/img/guide/tab_01.jpg") center center / cover; }
        .btn_22 { background: url("https://habusou.com/assets/images/img/guide/tab_02.jpg") center center / cover; }
        .btn_23 { background: url("https://habusou.com/assets/images/img/guide/tab_03.jpg") center center / cover; }

        .btn-wrap:hover .btn-img {
        -webkit-transform: scale(1.1);
        transform:         scale(1.1);
        }
        .btn-cover {
        position: relative;
        padding:1.5rem 7%;
        box-sizing:border-box;
        background: url("https://habusou.com/assets/images/parts/blue.jpg") repeat;
        color:#FFF;
        text-align: center;
        z-index: 1;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        }
        .btn-cover.cover-white { padding:.75rem 4%; background:#222F54 repeat; }
        .btn-cover.short { padding:.75rem 4%; }
        a .btn-cover { color:#FFF; }
        a .btn-cover.cover-white { color:#213764; }
        
        .btn-cover h3 { line-height: 1.25; }
        .btn-cover:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background:#A48C52;
        z-index: -1;
        opacity: 0;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        }
        .btn-cover.cover-white:after { background: #222F54; }
        .tab-btn a:hover .btn-cover:after { opacity: 1; }
        .tab-btn a:hover .btn-cover.cover-white { color:#FFF; }
       

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

       下層 ヘッダー

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

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

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

        .page-header {
        position: relative;
        width: 100%;
        height:100%;
        max-height:60vh;
        z-index: 0;
        }
        .page-header:before {
        content: "";
        display: block;
        padding-bottom:56.25%;
        height:0;
        width:100%;
        }
        .page-header.short:before {
        content: "";
        display: block;
        height:0;
        padding-bottom:600px;
        width:100%;
        }

        .cuisine   { background: url("../images/img/cuisine/header.jpg") center center / cover; }
        .price02{ background: url("../images/img/price/header.jpg") center center / cover; }
        .access     { background: url("../images/img/access/header.jpg") center center / cover; }
        .guide     { background: url("../images/img/stay/header.jpg") center center / cover; }
       .news     { background: url("../images/img/news/header.jpg") center center / cover; }


        @media screen and (max-width:1024px) {
        .page-header-wrap:before { display: none; }

        .page-header:before { padding-bottom:45%; height:0; }
        .page-header.short:before { padding-bottom:65%; }
        }


        .page-title h1 { line-height: 1; }

        .page-title {
        font-family: "Shippori Mincho B1", serif;
        position: absolute;
        top:calc(50% + 45px);
    left: 50%;
        translate:-50% -50%;
        z-index: 1;
        }
        .page-title h1 {
        position: relative;
        line-height: 180%;
        font-size:60px;
        color:#FFF;
        font-weight:700;
        }
        .th-130 { min-height:130px; }
        .th-260 { min-height:260px; }
        .th-320 { min-height:320px; }
        .th-380 { min-height:380px; }

        .page-title h1:after {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:480px;
        height:480px;
        background: url("https://habusou.com/assets/images/parts/maru-w.svg") center center / cover;
        opacity: .2;
        z-index: -1;
        }
        @media screen and (max-width:1350px) {
        .page-title h1 { font-size:4vw; }
        .page-title h1:after { width:30vw; height:30vw; }
        .th-130 { min-height: 9vw; }
        .th-260 { min-height:18vw; }
        .th-320 { min-height:22vw; }
        .th-380 { min-height:26vw; }
        }
        @media screen and (max-width:1024px) {
        .page-title { top:50%;
        width: 175px;
        display: block;
        margin: auto; }
        .page-title h1 { font-size:5vw; }
        .page-title h1:after { width:30vw; height:30vw; }
        .th-130 { min-height:11vw; }
        .th-260 { min-height:22vw; }
        .th-320 { min-height:28vw; }
        .th-380 { min-height:32vw; }
        }
        @media screen and (max-width:767px) {
        .page-title h1 { font-size:7vw; }
        .page-title h1:after { width:38vw; height:38vw; display: block!important; margin: auto!important; }
        .th-130 { min-height:15vw; }
        .th-260 { min-height:30vw; }
        .th-320 { min-height:38vw; }
        .th-380 { min-height:44vw; }
        }


.page-title {
        position: absolute;
        top:52%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        left:50%;
        width: 100%;line-height: 180%;
        text-align: center;
	color:#fff;	
	font-family: 'Zen Kaku Gothic New', sans-serif;
	 text-shadow: 2px 2px 3px #333; 
	letter-spacing: 0.1em;
        }
        .page-title h2 {
            position: relative;
            font-weight:500;
            line-height: 100%;
            letter-spacing: 0.1em;
            color:#FFF;
            z-index: 10;
				font-family: "Shippori Mincho", serif;
		
			
            }



.memo {
        padding:.4rem 0;
        border-top:2px dotted rgba(0,0,0,.3);
        border-bottom:2px dotted rgba(0,0,0,.3);
        }
        .memo-w {
        padding:.5rem 0;
        border-top:1px solid rgba(255,255,255,.3);
        border-bottom:1px solid rgba(255,255,255,.3);
        }

figure {
        position: relative;
        z-index: 0;
        }
        .figure-caption {
        position: absolute;
        bottom:0;
        left:0;
        display: inline-block;
        padding:.5rem .75rem;
        background: #111;
        color:#FFF;
        z-index: 1;
        }

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

       下層

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

        /*=================================================
                cuisine
        ==================================================*/

        .cuisine-img {
        position: relative;
        width:100%;
        height:100%;
        background: url("https://habusou.com/assets/images/img/cuisine/img_01-1.jpg") center center / cover;
        }
        
        .tab-title {
        background:#222F54;
        color:#FFF;
        border-radius: 1px;
   
        padding:.5em .5em;
        margin-bottom:.5em;
       font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

        }

        @media screen and (max-width:1024px) {
        .cuisine-img { height:0; padding-bottom:380px; }
        }
        @media screen and (max-width:767px) {
        .cuisine-img { padding-bottom:60%; }
        }


        .bg-white {
        position: relative;
        background: #A48C52;
        overflow: hidden;
        color:#FFF;
        z-index: 0;
        }
        .bg-white:after {
        content: "";
        display: block;
        position: absolute;
        bottom: -15%;
        right:0;
        width: 450px;
        height: 150px;
        background: url(https://habusou.com/assets/images/parts/fude-w.svg) center center / cover;
        opacity: .1;
        z-index: -1;
        }
        .cuisine-banner {
        width:100%;
        height:120px;
        background: url("../images/img/cuisine/img_05-1.jpg") center center / cover;
        }
        .cuisine-banner-text {
        padding:1.5rem 2.5rem;
        box-sizing: border-box;
        text-align: center;
        }







        /*=================================================
                access
        ==================================================*/

        .guide-wrap {
        padding:36px;
        box-sizing: border-box;
        border-radius: 1px;
        background:#7CBDD8;
        box-shadow: 0 4px 8px rgba(0,0,0,.1);

        }
        .guide-wrap.guide-w { background: url("https://habusou.com/assets/images/parts/background.png") repeat; color:#2B2E2D; }
        .guide-img {
        width:100%;
        height:100%;
        min-height:280px;
        }
        .guide-01 {background: url("../images/img/access/acs01.jpg")  center center / cover; }
        .guide-02 { background: url("../images/img/access/acs02.jpg")  center center / cover; }
        .guide-03 { background: url("../images/img/access/kuma.jpg") center center / cover; }
        .guide-04 { background: url("../images/img/access/ume.jpg") center center / cover; }
        .guide-05 { background: url("../images/img/access/karigazou.jpg") center center / cover; }
        .guide-06 { background: url("../images/img/access/taki.jpg") center center / cover; }
        .guide-07 { background:url("../images/img/access/karigazou.jpg") center center / cover; }
        .guide-08 { background:url("../images/img/access/karigazou.jpg")  center center / cover; }
        .guide-09 { background:  url("../images/img/access/karigazou.jpg") center center / cover; }
        .guide-10 { background: url("https://habusou.com/assets/images/img/guide/img_10.jpg") center center / cover; }
        
        .guide-11 { background: url("https://habusou.com/assets/images/img/guide/img_11.jpg") center center / cover; }
        .guide-12 { background: url("https://habusou.com/assets/images/img/guide/img_12.jpg") center center / cover; }
        .guide-13 { background: url("https://habusou.com/assets/images/img/guide/img_13.jpg") center center / cover; }
        .guide-14 { background: url("https://habusou.com/assets/images/img/guide/img_14.jpg") center center / cover; }
        .guide-15 { background: url("https://habusou.com/assets/images/img/guide/img_15.jpg") center center / cover; }
        .guide-16 { background: url("https://habusou.com/assets/images/img/guide/img_16.jpg") center center / cover; }
        .guide-17 { background: url("https://habusou.com/assets/images/img/guide/img_17.jpg") center center / cover; }
        .guide-18 { background: url("https://habusou.com/assets/images/img/guide/img_18.jpg") center center / cover; }
        .guide-19 { background: url("https://habusou.com/assets/images/img/guide/img_19.jpg") center center / cover; }
        .guide-20 { background: url("https://habusou.com/assets/images/img/guide/img_20.jpg") center center / cover; }
        .guide-21 { background: url("https://habusou.com/assets/images/img/guide/img_21.jpg") center center / cover; }
        .guide-22 { background: url("https://habusou.com/assets/images/img/guide/img_22.jpg") center center / cover; }


        .guide-text {
        padding:6% 2%;
        box-sizing: border-box;
        }
        @media screen and (max-width:1024px) {
        .guide-wrap { padding:27px; }
        .guide-img { min-height:240px; }
        }
        @media screen and (max-width:767px) {
        .guide-wrap { padding:18px; }
        .guide-img { height:0; padding-bottom:60%; min-height:0px; }
        }


.br_none{
white-space: nowrap!important;
}


.en{
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    
}


.ban_bg {
background:rgba(255,255,255,.8);
margin: 100px auto;
vertical-align: middle;
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 680px; border-radius: 3px;}

@media screen and (max-width: 1024px) {
.ban_bg {
	margin: 60px auto;
	text-align: center;}}

.banner-wrap {
        background: url("../images/img/top/banner-bg0.jpg") center center;
        width:100%;
        height:440px;
        position: relative;
        z-index: 10;
    margin-top: -20px;
        }
        .banner-wrap:before {
        content:"";
        display:block;
        position: absolute;
        top:0px;
        left:0;
        width:100%;
        height:10px;
        background:center center repeat-x;
        z-index: 10;
        }
        .banner-text {
        position: absolute;
        top:50%;
        left:50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        min-width:290px;
        z-index: 1;
		line-height: 2em;
		color: #231815!important;
			
			
		

        }
        @media screen and (max-width:1024px) {
        .banner-wrap { height:390px; }
        }
        @media screen and (max-width:767px) {
        .banner-wrap { height:320px; }
        }

.f27 {
	font-size: 27px;
	font-weight: 500;
	padding-bottom: 0.7rem;
}

@media screen and (max-width:1200px) {
  .f27 {
	font-size: 24px;
	font-weight: 500;
	padding-bottom: 0.5rem;
}
}

@media screen and (max-width: 767px) {
  .f27 {
	font-size: 22px;
	font-weight: 500;
	padding-bottom: 0.5rem;
}
}

.more03 {
        position:relative;
        width:100%;
        line-height: 100%;
        max-width:260px;
	margin: 0px auto;
        }
        .more03 a {
        width:100%;
        height:40px;
        line-height: 40px;
        text-align: center;
        color:#ffffff;
        margin: 0px auto!important;
        overflow: hidden;
        box-sizing: border-box;
        border-radius:2px;
        font-weight:600;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        letter-spacing: 0.1em;
        display: inline-block;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        }
        .more03 a:after {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        top: 0;
        right: 0;
        z-index: -1;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:rgba(255,255,255,.3);
        }      
        .more03 a:hover {
        opacity:1;
        box-shadow:	        0px 5px 5px rgba(0,0,0,.0);
        -moz-box-shadow:	0px 5px 5px rgba(0,0,0,.0);
        -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,.0);
        -o-box-shadow:		0px 5px 5px rgba(0,0,0,.0);
        -ms-box-shadow:		0px 5px 5px rgba(0,0,0,.0);
        }
        .more03 a:hover:after {
        left: 0;
        width: 100%;
        }
        .more03.w100p { max-width:100%; }
        .more03.more-reservation a {
        background:none;
        border:1px solid #EEE;
        }


.top_line01{
	background: url("../images/img/top/f_line06.png");
	background-repeat: no-repeat;
	height: 25px;
	z-index: 99;

	position: relative;
}

@media screen and (max-width: 768px) {
	.top_line01{
		display: none!important;
	}}

/*PCで無効*/
.pc_hid2{
    display: none;
}

/*スマートフォンで有効*/
@media screen and (max-width:1024px) {
    .pc_hid2{
        display: block;
    }
}



.more03_b_02 {
        position:relative;
        width:100%;
        line-height: 100%;
        max-width:240px;
}
.more03_b_02 a {
        width:100%;
        height:40px;
        line-height: 40px;
        text-align: center;
        color:#ffffff;
        background: #00ACC1!important;
        overflow: hidden;
        box-sizing: border-box;
        border-radius:2px;
        font-weight:600;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        letter-spacing: 0.1em;
        display: inline-block;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
	
        }



@media screen and (max-width: 768px) {
	.more03_b_02 a {
        width:100%;
        height:36px;
        line-height: 36px;
        text-align: center;
        color:#fff;
        background: #00ACC1!important;
        overflow: hidden;
        box-sizing: border-box;
        border-radius:2px;
        font-weight:600;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        letter-spacing: 0.05em;
        display: inline-block;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;

		margin-top: -10px!important;
        }
}
.more03_b_02 a:after {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        top: 0;
        right: 0;
        z-index: -1;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:rgba(255,255,255,.3);
        }      
.more03_b_02 a:hover {
        opacity:1;
        box-shadow:	        0px 5px 5px rgba(0,0,0,.0);
        -moz-box-shadow:	0px 5px 5px rgba(0,0,0,.0);
        -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,.0);
        -o-box-shadow:		0px 5px 5px rgba(0,0,0,.0);
        -ms-box-shadow:		0px 5px 5px rgba(0,0,0,.0);
        }
.more03_b_02 a:hover:after {
        left: 0;
        width: 100%;
        }

.button-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin:0 auto;
    padding: 1.2em 2em;
    border: 1px solid #2B2A2A;
    border-radius: 35px;
     background-color: rgb(255 255 255 / 0.8);
    color: #2B2A2A;
    font-size: 1.1em;
    letter-spacing: 0.1em;
}

.button-1::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #2B2A2A;
    border-right: 2px solid #2B2A2A;
    content: '';
    margin-top: 6px;
    
}

.button-1:hover{
    opacity: 0.5;
}

.paragraph {
  display: flex;
  justify-content: center;
  align-items: center;
}

.h3_ttl_b {
	font-size: 1.4em;
	font-weight: 600!important;
	white-space: nowrap;color: #231815;
}


@media only screen and (max-width: 1200px) {
.h3_ttl_b {
	font-size: 1.4em;
	font-weight: 600;
	white-space: nowrap;
	line-height: 1.4em;
}}
.fw5 {
	font-weight: 600;
}


.more02 {
        position:relative;
        font-weight:400;
        font-size:15px;
        max-width:350px;
        width:100%;
	margin: 0px auto;
        }
        .more02.w100p {
            max-width:100%;
            }
        .more02 a {
        color:#FFF;
        width:100%;
        padding:12px 2px;
        line-height: 1;
        text-align: center;
        box-sizing:border-box;
        background: #7CBDD8 center center repeat;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        letter-spacing:0;
        display: inline-block;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
			letter-spacing: 0.2em;line-height: 1.5;
   
            
        }
        .more02 a:after {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        top: 0;
        right: 0;
        z-index: -1;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:rgba(255,255,255,.3);
        }
        .more02 a:hover {
        color:#FFF;
        }
        .more02 a:hover:after {
        left: 0;
        width: 100%;
        }
        @media screen and (max-width: 1087px) {
        .more02 { margin-left: auto; margin-right:auto; font-size:14px; }
        .more02 a { padding:17px 0; }
        }  
        @media screen and (max-width: 767px) {
            .more02 { margin-left: auto; margin-right:auto; font-size:13px; }
            .more02 a { padding:15px 0; }
}

.anchor-offset {
  position: absolute;
  height: 80px;
  top: -80px;}

ul.menu-list {
  display: flex!important;        /* フレックスボックスを適用 */
  flex-wrap: wrap;      /* 折り返しを許可 */
  list-style: none;     /* リストの黒点を消す */
  padding: 0;
  gap: 1px 10px;            /* アイテム間の隙間（お好みで） */

}

ul.menu-list li {
 
 
  padding: 0px 5px;
  text-align: left;
    white-space: nowrap;


}

.outer_bath{ padding-left:2vw; padding-right:2vw; box-sizing:border-box; }

@media screen and (max-width: 1024px) {
        
    .outer_bath{ padding-left:2.5vw; padding-right:2.5vw; }}


@media only screen and (max-width: 767px) {
        
    .outer_bath{ padding-left:0vw; padding-right:0vw; }}