@charset "UTF-8";

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

     margin

===================================================================================================*/
.mt10{
	margin-top: 10px!important;
}
.mt20{
	margin-top: 20px!important;
}
.mt25{
	margin-top: 25px!important;
}
.mt50{
	margin-top: 50px!important;
}
.mt100{
	margin-top: 100px!important;
}
.mt200{
	margin-top: 200px!important;
}


.mb10{
	margin-bottom: 10px!important;
}
.mb20{
	margin-bottom: 20px!important;
}
.mb25{
	margin-bottom: 25px!important;
}
.mb50{
	margin-bottom: 50px!important;
}
.mb100{
	margin-bottom: 100px!important;
}
.mb200{
	margin-bottom: 200px!important;
}




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

       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; }
        .movie_inner img { height: 100%;
    width: 100%;
    object-fit: cover;
}
		.top-movie{ max-height:100vh; }

        .movie_inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); min-height:0; height:100%; }
        .movie.top-movie:before { content:""; display: block; position: relative; top:0; left:0;
        padding-top:56.25%;
        }


        @media screen and (max-width: 1024px) {
        .movie.top-movie:before { padding-top:80%; }
        .top-movie{ max-height:calc(100vh - 90px); }
        }
        @media screen and (max-width: 767px) {
        .movie.top-movie:before { padding-top:80%; }
        .top-movie{ max-height:calc(100vh - 90px); }
        }


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

        .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; }


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

       背景

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

.leaf_l{
        background: url("../img/parts/bg_leaf_l.svg") top left no-repeat;
	background-size: 40%;
}


.leaf_r{
        background: url("../img/parts/bg_leaf_r.svg") top right no-repeat;
	background-size: 40%;
}


@media screen and (max-width:820px) {

.leaf_l{
        background: url("../img/parts/bg_leaf_r.svg") top right no-repeat;
	background-size: 50%;
}


.leaf_r{
        background: url("../img/parts/bg_leaf_r.svg") top right no-repeat;
	background-size: 50%;
}

	
	
}


@media screen and (max-width:525px) {
	
.leaf_l{
        background: url("../img/parts/bg_leaf_r.svg") top right no-repeat;
	background-size: 70%;
}


.leaf_r{
        background: url("../img/parts/bg_leaf_r.svg") top right no-repeat;
	background-size: 70%;
}

}

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

        タイトル / テキスト

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

.white { color:#ECE6E4 !important; }
.white .en { color:#ECE6E4; }
.wine { color:#662370; }
        .wine a { color:#662370;}
.blue { color:#145890; }
.light { color:#5CB1F7; }

.ruby-small { font-size:12px; }

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

.under-title {
        padding-bottom:.35rem;
        border-bottom:3px solid #434548;
        }
        .under-title-s {
        padding-bottom:.35rem;
        border-bottom:1px solid #434548;
        }
        .dotted-line span {
        min-width:8em;
        display: inline-block;
        border-bottom:1px dotted #FDFDFD;
        }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        top:60%;
        width:100%;
        height:1px;
        background:rgb(133 106 85 / .6);
        margin-left:1rem;
        z-index: -1;
        }
.tate-lead {
        position: relative;
        padding-top:120px;
        }
        .tate-lead:before {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:50%;
        width:1px;
        height:100px;
        background: rgb(0 0 0 / .6);
        }

        @media screen and (max-width:1350px) {
        
        }
        @media screen and (max-width:1024px) {
        .lead:after { display: none; }
        }
        @media screen and (max-width:767px) {
        
        }






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

       オーバーレイ

===================================================================================================*/
		
.img_inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 半透明の黒色（最後の0.5で透明度を調整） */
  background-color: rgba(0, 0, 0, 0.1); 
}



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

       フッター

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

.footer_box {
    margin-top: 150px;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
	padding-bottom: 100px;
}



.footer_address{
	margin-right: 150px;
	
}
.footer_nav{
	
}
.footer_nav li{
    margin-bottom: 15px;
	
}

.footer_address h2{
	line-height: 80%;
	margin-bottom: 25px;
}

.footer_instagram{
	margin-top: 30px;
}
.footer_instagram img{
	width: 35px;
}




.copyright{
    display: flex;
    align-content: center;
    align-items: center;
	margin-top: 100px;
}

.copyright a{
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
	padding-right: 10px;
}



 @media screen and (max-width:770px) {
	.copyright{
    display: flex;
    align-content: center;
    align-items: center;
	margin-top: 20px;
}
 

.footer_box {
    margin-top: 50px;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
	padding-bottom: 50px;
}

.footer_address{
		 width: 100%;
		 margin: auto!important;
	 }
	 
.footer_nav{
	display: none;
}
	
}



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

       ローディング処理

===================================================================================================*/
#blur-overlay {
  position: fixed;
  inset: 0;
  background: #D1CBB2;
  opacity: 1;
  transition: opacity 1.4s ease;
  z-index: 9999;
  pointer-events: none;

  /* 疑似要素で“均一ぼかし画像”を重ねる */
}
#blur-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #D1CBB2;
  filter: blur(40px); /* ← ここで均一ぼかしを作る */
}
#blur-overlay.hide {
  opacity: 0;
}







/*
body {
  opacity: 0;
  filter: blur(20px);
  transform: scale(1.02);
  transition: opacity 1.0s ease, filter 1.0s ease, transform 1.0s ease;
  image-rendering: pixelated;
}


body.loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  image-rendering: auto;
}

#loader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1.0s ease;
}

#loader.hide {
  opacity: 0;
  pointer-events: none;
}

body {
  filter: blur(20px);
  transition: filter 1.0s ease;
}

body.loaded {
  filter: blur(0);
}


*/

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

       Image

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

        .img-fit { height:100%; }
        .img-fit img {
        height:100%;
        width:100%;
        object-fit: cover !important;
        }
        _:lang(x)+_:-webkit-full-screen-document, .img-fit img { 
        object-fit: cover !important;
        }
.rounded {
  border-radius: 30px;
}

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

       Link

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

a {
        text-decoration:none;
        color:var(--link-color);
        cursor:pointer;
        opacity: 1;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        }
        a:hover {
        opacity: .7;
        }
        .news-item-box a:hover {
        opacity: 1;
        }
        a.hover100:hover,a.hover100:hover img {
        opacity: 1;
        }
        a img {
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        }
        a:hover img {
        opacity:0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha( opacity=70 )";
        }
        a .white { color:#FEFEFE; }

        .hover-under a:hover {
        text-decoration:underline;
        }

.view_link{
    display: inline-block;
}



.view_more{
display: flex;
  align-items: center; /* ← これで縦中央揃え */
  gap: 8px;            /* テキストと画像の間隔（任意） */
}
.view_more::after {
  content: "";
  display: inline-block;
  width: 40px;   /* 好きなサイズに変更 */
  height: 40px;
  background-image: url("../img/parts/icon_arrow_right.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.day_info{
	text-align: right;
}

.link_title{
display: flex;
  align-items: center; /* ← これで縦中央揃え */
  gap: 8px;            /* テキストと画像の間隔（任意） */   
	font-size: 16px !important;
	line-height: 0%;
}
.link_title::after {
  content: "";
  display: inline-block;
  width: 20px;   /* 好きなサイズに変更 */
  height: 20px;
  background-image: url("../img/parts/icon_arrow_right.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.link_title .insta_icon{
	width: 25px;
}
.link_banner{
	background-color: #6f7332;
    border-radius: 5px;
    padding: 10px 20px;
    color: #fff;
}
.link_banner .links{
    background-image: url(../img/parts/link_icon.svg);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 30px;
}

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

       wrap

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

.wrap-area{
	width: 95%;
	max-width: 1360px;
	margin-left: auto;
	margin-right: auto;
}

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

      　image_zoom

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

.hover-zoom__image {
        overflow: hidden;
        position: relative;
        width:100%;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        }    
        .hover-zoom__image figure {
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        }
        .hover-zoom__image:hover figure,
        a:hover .hover-zoom__image figure {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform:         scale(1.1);
        }
        .hover-zoom__image a:hover img,
        .hover-zoom__image a:hover,
        a:hover .hover-zoom__image img,
        a:hover .hover-zoom__image {
        opacity:1;
        filter: alpha(opacity=100);
        }








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

     TOPへ戻るボタン

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

#page_top{
  width: 65px;
  height: 65px;
  position: fixed;
  right: 0;
  bottom: -150px;
/*背景*/background-color: #211805;
 /* opacity: 0.6;*/
  border-radius: 50%;
	margin-right: 10px;
z-index: 1000;
}
#page_top a{
  position: relative;
  display: block;
  width: 75px;
  height: 75px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 45px;
  color: #fff;
  position: absolute;
  width: 65px;
  height: 65px;
  top: 18px;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
}


#pagetop a:hover {
    background: #666;
}











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

       流れるスライダー

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


@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 5);
}
.scroll-infinity__item>img {
  width: 100%;
}

.scroll-infinity__item:nth-child(1n){
	margin-left: 100px;
	
}
.scroll-infinity__item:nth-child(2n){
	margin-left: 40px;
	margin-top: 60px;
	
}
.scroll-infinity{
	margin: 20px 0 150px;
}




        @media screen and (max-width:1024px) {
.scroll-infinity__item {
  width: calc(100vw / 3);
}
        }
        @media screen and (max-width:767px) {
.scroll-infinity__item {
  width: calc(100vw / 2);
}
.scroll-infinity__item:nth-child(1n){
	margin-left: 50px;
	
}
        }




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

       plan_banner

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

        a.hover100:hover,a.hover100:hover img {
        opacity: 1;
        }
        .plan_banner {
        width:100%;
        position: relative;
        overflow: hidden;
        z-index: 1;
        }
        .plan_banner a {
        display: block;
        overflow: hidden;
        }
        .banner-img {
        background: url("../img/parts/banner_bg.jpg") center center / cover;
        width:100%;
        height:600px;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        }
        .banner-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1
        }
        .banner-text {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:86%;
        max-width:480px;
        background: url("../images/parts/background.jpg") repeat;
        border-radius: 10px;
        text-align: center;
        box-sizing: border-box;
        z-index: 1;
        }
        .banner-text-inner {
        width:80%;
        max-width:320px;
        margin-inline:auto;
        padding:3.5rem 0;
        line-height: 1;
        }

        .more-reservation {
        width:100%;
        height:60px;
        line-height:60px;
        text-align: center;
        color:#FFF;
        border-radius:6px;
        background: url("../images/parts/green.jpg") repeat;
        box-sizing: border-box;
        overflow: hidden;
        font-size:21px;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        letter-spacing: 0em;
        display: inline-block;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .more-reservation span {
        position: relative;
        display: inline-block;
        margin-right: .85rem;
        top:2px;
        width: 21px;
        height: 21px;
        background: url("../images/icons/icon-reservation-2-w.svg") center center / cover;
        z-index: 0;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        }
        .more-reservation:after {
        position: absolute;
        content: "";
        width: 0;
        height:100%;
        bottom:0;
        right: 0;
        z-index: -1;
        border-radius:1px;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:rgb(255 255 255 / .3);
        }      
        .plan_banner a:hover .more-reservation { opacity:1; }
        .plan_banner a:hover .more-reservation:after { left:0; width:100%; }
        .banner-text-inner h2 { color: #fff;
line-height: 160%;}
        .banner-text-inner p { color: #fff; }

.more-icon::after {
    content: "";
    display: inline-block;
    width: 60px;
    height: 60px;
    background-image: url(../img/parts/icon_arrow_right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 30px;
}




        @media screen and (max-width: 1350px) {
        .banner-img { height:450px; }
        .banner-text-inner { padding:3rem 0; }
        }
        @media screen and (max-width:1024px) {
        .banner-img { height:420px; }
        }
        @media screen and (max-width:767px) {
        .banner-img { height:420px; }
        .banner-text-inner { padding:2.5rem 0; }
        .more-reservation { height:56px; line-height:54px; font-size:16px; }
        .more-reservation span { top:4px; }
        }

@media screen and (max-width:525px) {
	
	
.banner-img {
    background: url(../img/parts/banner_bg.jpg) center center / cover;
    width: 100%;
    height: 420px;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
}
	
	
}



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

       table

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





.table-b {
        width:100%;
        border-collapse:collapse;
        border-spacing:0;
        text-align:left;
        letter-spacing:0;
        box-sizing: border-box;
        line-height: 150%;
        font-size:0.8rem;
        overflow: hidden;
        border:1px solid rgb(0 0 0 / .5);
        }
        .table-b tr { }
        .table-b th {
        padding:1.0rem 0.25rem;
        vertical-align: middle;
        font-weight:500;
        box-sizing: border-box;
        border:1px solid rgb(0 0 0 / .3);
        background:rgba(53, 39, 9, 0.15);
			text-align: center;
			width: 25%;
        }
        .table-b td {
        padding:1.0rem 0.25rem;
        font-weight:500;
        vertical-align: middle;
        box-sizing: border-box;
        border:1px solid rgb(0 0 0/ .3);
			text-align: center;
        }
        


        .table-b th.center { text-align:center;}
        .table-b.td-right td { text-align: right;}
        .table-b.th-right th { text-align: right;}
        .table-b.th-left th { text-align: left;}
        .table-b.th-center th { text-align: center;}
        .table-b.td-center td { text-align: center;}
        .table-b th.right { text-align: right;}
        .table-b.center td,.table-b.center th { text-align: center;}






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

       ヘッダーメニュー

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

/* 初期状態：small（リロード時のチラ見え防止） */
.logo h1 {
  opacity: 1;
  color: #fff!important;
  transform: translateY(-10px) scale(0.75);
  padding-left: 5px;
  padding-top: 10px;
  transition: 
    opacity 0.4s ease,
    transform 0.4s ease,
    padding-left 0.4s ease,
    padding-top 0.4s ease;
}

/* スクロール前：大きいロゴ */
.logo.large h1 {
  transform: translateY(0) scale(1);
  padding-left: 25px;
  padding-top: 0;
}





.logo a {
	color: #fff;
}

.logo{
	display: inline;
	position: fixed;
    padding-top: 10px;
    z-index: 10;
	
}


/* 初期状態：上に隠す（リロード時のチラつき防止） */
.menu_tops {
  position: fixed;
  right: 0;
  top: -120px; /* ← 最初から隠す */
  padding-top: 20px;
  padding-bottom: 20px;
  transition: top 0.6s ease, opacity 0.3s ease;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

/* 表示状態（スクロールが500px未満のとき） */
.menu_tops.show {
  top: 0;        /* ← 上から降りてくる */
  opacity: 1;
  pointer-events: auto;
}

/* 隠す状態（500px以上のとき） */
.menu_tops.hide {
  top: -120px;   /* ← 上に戻る */
  opacity: 0;
  pointer-events: none;
}







#menu02{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;

}
#menu02 li{
	margin-right: 25px;
}
#menu02 li a{
    color: #fff;
}

.instagram_icon{
	max-width: 30px;
  filter: brightness(0) invert(1);
}


.reserve_btn{
	background-color: #6e7331;
    display: block;
    border-radius: 5px;
    padding: 5px 30px;
    color: #fff;
    border: solid 1px #fff;
}







@media screen and (max-width:1024px) {
	
.menu_tops.show{
		display: none;
	}
        }

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









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

       ハンバーガーメニュー

===================================================================================================*/
.navigation {
  position: fixed;
  top: -10px;
  width: 100%;
  z-index: 10;
  background: inherit;

  opacity: 0;
  transform: translateY(20px); /* 下から出てくる */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.navigation.show {
  opacity: 1;
  transform: translateY(0);
}




header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  background: inherit; /* ← これだけでOK */
}

.navigation #menuToggle {
}

.navigation.show #menuToggle {
}


#menuToggle {
  isolation: isolate;
  display: block;
  top: 80px;
  right: 30px;
  position: absolute;
  z-index: 10;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #d9d0a9;
}


#menuToggle input{
    display: block;
    width: 105px;
    height: 32px;
    position: absolute;
    top: -60px;
    right: -10px;
    cursor: pointer;
    opacity: 0;
    z-index: 3; /* ← 下げる */
}

#menuToggle span {
  /*mix-blend-mode: difference;*/
  display: block;
  width: 100px;
  height: 2px;
  margin-bottom: 8px;
  position: relative;
  background: #fff; /* ← 黒は絶対NG */
  top: -50px;
  transform-origin: 50% 50%;
	transition: all .5s ease;
  z-index: 2; /* ← input より前に */
}


#menuToggle.white span {
  background: #fff;
	}
	
	
/* チェック時：色変更だけ（transform はここで触らない） */
#menuToggle input:checked ~ span {
  background: #fff;
    transform: rotate(8deg) translate(7px, 5px);
}

/* 上の線（浅い角度） */
#menuToggle input:checked ~ span:first-child {
  transform: rotate(30deg) translate(8px, 6px);
}

/* 真ん中の線 → 消す */
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: scale(0.2);
}

/* 下の線（逆方向の浅い角度） */
#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-8deg) translate(8px, -13px);

}

#menu {
  position: absolute;
  max-width: 400px;
  width: 100vw;
  height: 98vh;
  margin: -100px 0 0 -280px;
  padding: 50px;
  box-sizing: border-box;
  overflow-y: auto;
  transform-origin: 0% 0%;
  transform: translate(110%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  border-radius: 30px;
  background-color: #232323;
	transition: all .5s ease;
}

#menuToggle input:checked ~ #menu {
  transform: translate(0, 0);
}

#menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/parts/bg_leaf_bottom_r.svg) no-repeat bottom right / 85%;
  opacity: 0.3; /* ← 透過度 */
  pointer-events: none;
}
#menu li
{
  padding: 10px 0 20px;
  font-size: 22px;
}

#menu li label
{
  cursor: pointer;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}

#menu a{
  padding: 5px 10px;
}
#menu .nav_overlay{
  display: inline-block; /* ← これが超重要 */
  background-color: #232323; /* ← 透明を完全に消す */
  color: #ffffff;
  font-size: 120%;
  text-decoration: none;
  font-weight: bold;

  background-image: linear-gradient(#232323 50%, #ffffff 50%);
  background-size: 100% 200%;
  background-position: 0 0;
  transition: background-position .3s, color .3s;
}

#menu .nav_overlay:hover{
  background-position: 0 100%;
  color: #232323;
        opacity: 1;
}

.nav_overlay02 {
  padding-bottom: 5px;
  position: relative;
}
.nav_overlay02::before {
  background: #fff;
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.nav_overlay02:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
 
.nav_overlay03 {
  padding-bottom: 5px;
  position: relative;
}
.nav_overlay03::before {
  background: #352709;
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.nav_overlay03:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
 






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

.navigation {
    opacity: 1;
    top: -25px;
}
        }

@media screen and (max-width:525px) {
/* ハンバーガー本体の位置 */
	

.navigation {
    opacity: 1;
    top: -15px;
}
	
	
#menuToggle {
  display: block;
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 10000000000;
  -webkit-user-select: none;
  user-select: none;
}

/* 透明なクリック領域 */
#menuToggle input {
display: block;
        width: 63px;
        height: 32px;
        position: absolute;
        top: -60px;
        right: -10px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  -webkit-touch-callout: none;
}

/* ハンバーガー線 */
#menuToggle span {
  /*mix-blend-mode: difference;*/
  display: block;
  width: 60px;
  height: 2px;
  margin-bottom: 8px;
  position: relative;
  background: #fff;
  z-index: 1;
  top: -50px;
  transform-origin: 50% 50%;    
	transition: all .5s ease;
}

#menuToggle.white span {
  background: #fff;
}

/* チェック時の線アニメーション */
#menuToggle input:checked ~ span {
  background: #fff;
  transform: rotate(8deg) translate(7px, 5px);
}

#menuToggle input:checked ~ span:first-child {
  transform: rotate(30deg) translate(8px, 6px);
}

#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: scale(0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-8deg) translate(8px, -13px);
}

/* ここからメニュー本体 */

#menu {
  position: fixed !important;
  top: -5px !important;
  left: 0 !important;
  width: 100vw !important;
height: 100vh !important;   /* fallback */
height: 100dvh !important;  /* iOS16+ */
  margin: 0 !important;
  padding: 100px 35px 50px 35px;
  box-sizing: border-box;
  overflow-y: auto;
  background-color: #232323;

  border-radius: 0 !important;
  max-width: none !important;

  transform: translateX(100%) !important;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menuToggle input:checked ~ #menu {
  transform: translateX(0) !important;
}

/* 背景画像（透過） */
#menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/parts/bg_leaf_bottom_r.svg) no-repeat bottom right / 85%;
  opacity: 0.3;
  pointer-events: none;
}

/* メニュー項目 */
#menu li {
  padding: 10px 0 20px;
  font-size: 22px;
}

#menu li label {
  cursor: pointer;
}

/* メニュー展開 */
#menuToggle input:checked ~ #menu {
  transform: translateX(0);
}

}






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

       スクロールバー

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

body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(59,59,29,0.50);
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.80);
  border-radius: 5px;
}














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

       モーダル

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

.modal_title{
  font-family: "Noto Sans JP", sans-serif;
	font-size: 20px!important;
	margin-bottom: 20px;
	margin-top: 20px;
    font-weight: 700;
}
/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {    
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 750px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
}

.closeModal {
  position: absolute;
    top: 0.3rem;
    right: 0.7rem;
  cursor: pointer;
}


/* 以下ボタンスタイル */
button {
  cursor: pointer;
    border: none;
    background-color: unset;
}

.party_inner .link_title{
	
    display: inline-flex!important;
    flex-wrap: nowrap;
	
}
.party_inner{
	text-align: left;
}

.party_img{
	margin-bottom: 15px;
}

.popup_line{
	font-weight: bold;
    border-top: 1px solid #8b8271;
    margin-top: 10px;
    padding-top: 10px;
}


.dayuse_banner{
	display: inline-flex;
	color: #fff;
    border: #6d7132 solid 2px;
    position: absolute;
    bottom: 5%;
    left: 50%;
    translate: -50% -50%;
    width: 86%;
    max-width: 225px;
    text-align: center;
    box-sizing: border-box;
    z-index: 1;
    border-radius: 10px;
    justify-content: center;
}
.dayuse_banner .view_link {
    padding: 10px 20px;
}

@media screen and (max-width: 1350px) {
.dayuse_banner{
    bottom: 0%;
}
}