@charset "utf-8";
/*------------------------------------------------------------------------------
 ROOT（CSS変数を設定）
 -------------------------------------------------------------------------------*/
:root {
	--color1: #2d2d2d;
	--color2: #b8a172;
    --color3: #9784ad;
    --bg1: #b1a3c2;
    --txtred: #c60000;
  }
/*------------------------------------------------------------------------------
 HEADER
 -------------------------------------------------------------------------------*/
header {
	width: 100%;
	position: fixed;
	z-index: 9999;
}
.original-nav__wrap_sp {
    display:none;
}
.original-nav__wrap {
    width: 100%;
    display:flex;
    padding: 0 5px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    margin:0 auto;
    /* max-width: 1000px; */
    height: 75px;
    background-color: #fff;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.20);
    gap: 2.6%;
}
.original-nav__wrap .logo {
    margin-left: 10px;
    max-width: 394px;
    width: 30%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url(../img/logo.webp) no-repeat center center/contain;
    height: 54px;
}
.original-nav__wrap nav{
    width: 65%;
    margin-right: 4vw;
    height: 75px;
}
.original-nav__wrap nav > ul {
    display:flex;
    align-items: center;
    /* gap: 3.2vw; */
    justify-content: flex-end;
    height: 75px;
}
.original-nav__wrap nav > ul li:hover {
    color: #ad3d7f;
}
.original-nav__wrap nav > ul li a:hover {
    color: #ad3d7f;
}
.original-nav__wrap nav > ul li.original-nav_lavel {
    text-align: center;
    font-size: 28px;
    letter-spacing: 0.02em;
    font-family: freight-display-pro, serif;
    font-weight: 700;
    font-style: normal;
    font-weight: bold;
    line-height: 0.7;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
     span{
        font-size: 11px;
        white-space: nowrap;
        color: var(--color2);
        font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W6", "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif, Helvetica, serif, Helvetica;
        font-weight: bold;
     }
     a{
        color: var(--color1);
        text-decoration: none;
     }
     &:nth-of-type(1){
        margin-right: 16px;
     }
     &:nth-of-type(n+2){
        width: 120px;
     }
}
.original-nav__wrap nav > ul li.original-nav_lavel.arrow {
    position: relative;
}
.original-nav__wrap nav > ul li.original-nav_lavel.arrow:after {
    display: inline-block;
    content: "";
    border-left: 2px solid var(--color1);
    border-bottom: 2px solid var(--color1);
    transform: translateY(25%) rotate(-45deg);
    width: 0.5em;
    height: 0.5em;
    font-size: 0.8rem;
    margin-right: 0.5em;
    margin-left: 0.5em;
    vertical-align: text-top;
    position: absolute;
    top: 22px;
    right: 12px;
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
  transform: scaleY(1); /* ドロップダウンメニューの表示 */
}

.menu-item:hover {
  background-color: var(--color1); /* メニューアイテムのホバー時の背景色 */
  transition: background-color .3s; /* 背景色の変化をアニメーション化 */
}
.menu-item:hover > a{
    color: #fff!important;
}
.arrow:hover::after{
    border-left: 2px solid #fff!important;
    border-bottom: 2px solid #fff!important;
}

.drop-menu-item:hover {
  opacity: .8; /* ドロップダウンメニューアイテムのホバー時の不透明度 */
  transition: opacity .3s; /* 不透明度の変化をアニメーション化 */
}

.menu-item > a{
    width: 80px;
    text-align: left;
}
.drop-menu-item a {
  align-items: center;
  color: #fff!important; /* メニューアイテム内のリンクテキストの色 */
  display: flex;
  height: 50px;
  justify-content: center;
  width: 120px;
  font-size: 20px;
  position: relative;
  &::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 0;/*線の上下位置*/
    display: inline-block;
    width: 100px;/*線の長さ*/
    height: 1%;/*線の太さ*/
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);/*位置調整*/
    background-color: var(--color2);/*線の色*/
  }
}

/* ドロップダウンメニュー */
.drop-menu {
  position: relative;
}

.drop-menu-list {
  left: 0;
  position: absolute;
  top: 100%;
  transform: scaleY(0); /* ドロップダウンメニューの非表示 */
  transform-origin: center top; /* 変形を適応する基準を設定 */
  transition: transform .3s; /* 表示の変化をアニメーション化 */
  width: max-content;
  z-index: 1;
}

.drop-menu-item {
  background-color: var(--color1); /* ドロップダウンメニューの背景色 */
  transition: opacity .3s; /* 不透明度の変化をアニメーション化 */
}

@media all and (max-width:999px){
    .original-nav__wrap{
        display: none;
    }
    .original-nav__wrap_sp{
		position: fixed;
		width: 100%;
		z-index: 1000;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 75px;
        box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.20);
		>.logo{
            max-width: min(70vw,394px);
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            background: url(../img/logo.webp) no-repeat center center/contain;
            height: min(9.59vw,54px);
			margin-left: 10px;
            img{
                width: 100%;
            }
		}
		
	}
	.hamburger-overlay {
	position: relative;
	background-color: #fff;
	top: 0;
	right: 0;
	z-index: 1000;
	width: 70px;
	height: 70px;
	border: none;
	cursor: pointer;
	}

	.hamburger-overlay__line {
	position: absolute;
	left: 15px;
	width: 38px;
	height: 2px;
	background-color: var(--color2);
	transition: all .6s;
	}

	.hamburger-overlay__line:nth-of-type(1) { top: 28px; }
	.hamburger-overlay__line:nth-of-type(2) { top: 40px; }

	.hamburger-overlay.active .hamburger-overlay__line {
	background-color: var(--color2);
	}

	.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
	transform: translateY(14px) rotate(-45deg);
    top: 19px;
	}
	.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
	transform: translateY(-12px) rotate(45deg);
    top: 45px;
	}

	.nav-overlay {
	position: fixed;
	top: 75px;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--color2);
	visibility: hidden;
	opacity: 0;
	transition: all .6s;
	z-index: 900;
	}

	.nav-overlay.active {
	visibility: visible;
	opacity: 1;
	}

	.nav-overlay__list {
	position: absolute;
	top: 5%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 100%;
	}

	.nav-overlay__item {
	opacity: 0;
	transform: translateY(20px);
	transition: all .6s;
	position: relative;
	border-bottom: solid 1px #c9bd99;
        &:first-of-type{
            border-top: solid 1px #c9bd99;
        }
        &::after{
            content: "";
            background: url(../img/icon_nav.png) no-repeat center center/contain;
            width: min(5.13vw , 21.25px);
            height: min(5.13vw , 21.25px);
            position: absolute;
            top: 33px;
            left: 0;
            margin-left: 4%;
        }
        &:nth-of-type(2) a{
        padding: 30px 12% 20px;
        }
	}

	.nav-overlay.active .nav-overlay__item {
	opacity: 1;
	transform: translateY(0);
	}

	.nav-overlay.active .nav-overlay__item:nth-child(1) { transition-delay: 0.1s; }
	.nav-overlay.active .nav-overlay__item:nth-child(2) { transition-delay: 0.2s; }
	.nav-overlay.active .nav-overlay__item:nth-child(3) { transition-delay: 0.3s; }
	.nav-overlay.active .nav-overlay__item:nth-child(4) { transition-delay: 0.4s; }
    .nav-overlay.active .nav-overlay__item:nth-child(5) { transition-delay: 0.5s; }
    .nav-overlay.active .nav-overlay__item:nth-child(6) { transition-delay: 0.5s; }

	a.nav-overlay__link {
	display: flex;
	align-items: center;
	gap: 3%;
	padding: 30px 20px;
	color: #fff;
	font-family: freight-display-pro, serif;
    font-weight: 700;
    font-style: normal;
    font-weight: bold;
	font-size: 28px;
    letter-spacing: 0.02em;
	transition: color .3s;
	padding-left: 12%;
    span{
        font-size: 12px;
        color: #fff;
        margin-top: 7px;
        font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W6", "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif, Helvetica, serif, Helvetica;
        font-weight: bold;
        }
	}
    .menu-list-sp{
        display: flex;
        gap: 20px;
        padding-left: 12%;
        padding-bottom: 30px;
        .menu-item-sp{
            border: 1px solid #fff;
            padding: 10px 0;
            >a{
                color: #fff;
                font-family: freight-display-pro, serif;
                font-weight: 700;
                font-style: normal;
                font-size: 24px;
                letter-spacing: 0.02em;
                padding: 10px 30px;
            }
        }
    }
}
/*------------------------------------------------------------------------------
body
 -------------------------------------------------------------------------------*/
 body{
    background-color: #fff;
    color: #2d2d2d;
    font-family: "Noto Sans JP", sans-serif;
 }
 img{
    width: 100%;
 }
 .br_sp{
    display: none;
 }
 .br_sp_2{
    display: none;
}
 a{
    text-decoration: none;
 }
 section{
    width: 100%;
    position: relative;
    padding: 100px 0;
    &:nth-of-type(odd){
        background: var(--bg1) url(../img/dotted.png) repeat center center/55px;
        &::before{
            content: "";
            width: 100%;
            border: 1px solid var(--color1);
            position: absolute;
            top: 26px;
            right: 0;
        }
        &::after{
            content: "";
            width: 100%;
            border: 1px solid var(--color1);
            position: absolute;
            bottom: 26px;
            right: 0;
        }
    }
    &:nth-of-type(1) h2{
        max-width: 196px;
        margin: 0 0 26px 45px;
    }
    &:nth-of-type(2) h2{
        max-width: 518.5px;
        margin: 0 auto 50px;
    }
    &:nth-of-type(3) h2{
        max-width: 518.5px;
        margin: 0 auto;
    }
    &:nth-of-type(4) h2{
        max-width: 392.5px;
        margin: 0 auto 40px;
    }
    &:nth-of-type(5) h2{
        max-width: 398.5px;
        margin: 0 auto 40px;
    }
    h3{
        font-size: 22px;
    }
    h4{
        font-size: 20px;
        padding-left: 26px;
        position: relative;
        line-height: 1.2;
        margin-bottom: 8px;
        &::after{
            content: "";
            background: url(../img/icon_order.png) no-repeat center center/contain;
            width: 21.25px;
            height: 21.25px;
            position: absolute;
            top: 1px;
            left: 0;
        }
    }
    .price{
        font-size: 20px;
        >span{
            font-size: 16px!important;
        }
    }
    ul{
        list-style-position: inside;
    }
    p,li{
        font-size: 18px;
        line-height: 2;
    }
    .frame{
        border: 2px solid var(--color1);
        width: fit-content;
        padding: 0 6px;
        font-size: 16px;
        line-height: 1.6;
    }
    .txt_red{
        color: var(--txtred);
    }
    .txt_indent{
        padding-left: 1em;
    }
    .txt-bold{
        font-weight: 700;
    }
 }
 .news_wrapper,.info_wrapper,.menu_wrapper,.goods_wrapper,.notice_wrapper,.footer_wrapper{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 45px;
    box-sizing: border-box;
 }
 footer{
    width: 100%;
    position: relative;
    padding: 100px 0 40px;
    h2{
        width: 398.5px;
        margin: 0 auto 40px;
    }
    p{
        font-size: 18px;
        line-height: 2;
        margin-bottom: 40px;
    }
 }
 button{
    transition: opacity .3s;
 }
 button:hover{
    opacity: .8; /* ドロップダウンメニューアイテムのホバー時の不透明度 */
    transition: opacity .3s;
 }

 @media all and (max-width:768px){
     .br_sp{
        display: block;
     }
     .br_pc{
        display: none;
     }
     section{
        padding: 14% 0;
        &:nth-of-type(odd){
            background: var(--bg1) url(../img/dotted.png) repeat center center/45px;
            &::before{
                top: 10px;
            }
            &::after{
                bottom: 10px;
            }
        }
        &:nth-of-type(1) h2{
            max-width: min(26vw,196px);
            margin: 0 0 4% 0;
        }
        &:nth-of-type(2) h2{
            max-width: min(125.24vw,518.5px);
            margin: 0 auto 8%;
        }
        &:nth-of-type(3) h2{
            max-width: min(88vw,660px);
            margin: 0 auto;
        }
        &:nth-of-type(4) h2{
            max-width: min(67.46vw,506px);
            margin: 0 auto 8%;
        }
        &:nth-of-type(5) h2{
            max-width: min(68vw,510px);
            margin: 0 auto 8%;
        }
        h3{
            font-size: clamp(18px,4.83vw,22px);
        }
        h4{
            font-size: clamp(16px,4.34vw,20px);
            padding-left: 24px;
            position: relative;
            line-height: 1.2;
            &::after{
                content: "";
                background: url(../img/icon_order.png) no-repeat center center/contain;
                width: 18.25px;
                height: 18.25px;
                position: absolute;
                top: 0.3vw;
                left: 0;
            }
        }
        .price{
            font-size: clamp(17px,4.34vw,20px);
            >span{
                font-size: clamp(14px,3.38vw,18px)!important;
            }
        }
        ul{
            list-style-position: inside;
        }
        p,li{
            font-size: clamp(15px,3.86vw,18px);
            line-height: 1.8;
        }
        .frame{
            border: 1.6px solid var(--color1);
            font-size: clamp(11px,3.38vw,16px);
            letter-spacing: -0.08rem;
        }
        .txt_red{
            color: var(--txtred);
        }
        .txt_indent{
            padding-left: 1em;
        }
    }
    /* 95,5%変更あり↓ */
    .news_wrapper{
        max-width: 95%;
        margin: 0 auto;
        padding: 0 5%;
        box-sizing: border-box;
    }
    .info_wrapper,.menu_wrapper,.goods_wrapper,.notice_wrapper,.footer_wrapper{
        max-width: 95%;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }
    footer{
        width: 100%;
        position: relative;
        padding: 14% 0 10%;
        h2{
            width: min(75.06vw,562px);
            margin: 0 auto 8%;
        }
        p{
            font-size: clamp(15px,3.86vw,18px);
            line-height: 1.8;
            margin-bottom: 4%;
        }
    }
    button{
        transition: opacity .3s;
    }
    button:hover{
        opacity: .8; /* ドロップダウンメニューアイテムのホバー時の不透明度 */
        transition: opacity .3s;
    }
 }
  @media all and (max-width:450px){
    .br_sp_2{
        display: block;
    }
  }
 /*------------------------------------------------------------------------------
 mv
 -------------------------------------------------------------------------------*/
 #mv{
    width: 100%;
    padding-top: 75px;
 }
 .bg{
    background: url(../img/bg.webp) no-repeat center center/cover;
    position: relative;
    z-index: 2;
    &::after{
        content: "";
        background: url(../img/bg-object.png) no-repeat center center/contain;
        width: 527px;
        height: 435px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
 }
 .lead_wrapper{
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 100px 0;
    position: relative;
    &::before{
        content: "";
        background: url(../img/petal01.png) no-repeat center center/contain;
        width: min(9.30vw,121px);
        height: min(10vw,130px);
        position: absolute;
        top: 0;
        left: min(86vw,962px);
    }
    &::after{
        content: "";
        background: url(../img/petal02.png) no-repeat center center/contain;
        width: min(8.30vw,108px);
        height: min(10.7vw,140px);
        position: absolute;
        top: min(12vw,156px);
        right: min(90vw,930px);
        z-index: 1;
    }
    >.lead{
        max-width: 661px;
        margin: 0 auto;
    }
    >p{
        font-size: 22px;
        margin: 70px 0;
        line-height: 2.2;
        position: relative;
        >span{
            color: var(--color3);
        }
        &::before{
        content: "";
        background: url(../img/petal03.png) no-repeat center center/contain;
        width: min(11.61vw,151px);
        height: min(14.38vw,187px);
        position: absolute;
        top: min(6.84vw,50px);
        left: min(86.84vw,830px);
        }
        &::after{
            content: "";
            background: url(../img/petal04.png) no-repeat center center/contain;
            width: min(9.92vw,129px);
            height: min(12.07vw,157px);
            position: absolute;
            top: min(12vw,120px);
            right: min(88vw,880px);
            z-index: 1;
        }
    }
    >.btn_reserve {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        margin: 0 auto;
        padding: 1em 2em;
        border: 3px solid #fff;
        box-shadow: 0 0 0 1px var(--color1);
        background-color: var(--color2);
        font-weight: 600;
        font-size: 1em;
        position: relative;
        >a{
            width: 100%;
            color: var(--color1);
            font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W6", "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif,Helvetica, serif,Helvetica;
            font-weight: bold;
            font-size: 23px;
        }
        &::after{
            transform: rotate(45deg);
            width: 14px;
            height: 14px;
            border-top: 3px solid var(--color1);
            border-right: 3px solid var(--color1);
            content: '';
            position: absolute;
            right: 14px;
        }
    }
 }
 @media all and (max-width:768px){
    .bg{
        &::after{
            background: url(../img/bg-object-sp.png) no-repeat center center/contain;
            width: min(48vw,360px);
            height: min(58.86vw,434px);
            bottom: -0.15%;
        }
    }
    .lead_wrapper{
        max-width: 95%;
        padding: 10% 0 20%;
        &::before{
            background: url(../img/petal01_sp.png) no-repeat center center/contain;
            width: min(28.93vw,217px);
            height: min(40.26vw,302px);
            top: initial;
            bottom: -20px;
            left: min(64.66vw,500px);
        }
        >.lead{
            max-width: 95%;
        }
        >p{
            width: 95%;
            font-size: clamp(14px,4.34vw,22px);
            margin: 10% auto;
            line-height: 2;
        }
        &::after{
            background: url(../img/petal02_sp.png) no-repeat center center/contain;
            width: min(13.33vw,100px);
            height: min(19.46vw,146px);
            top: inherit;
            bottom: min(64vw, 255px);
            right: min(82vw,610px);
        }
        >p{
            &::before{
            display: none;
            }
            &::after{
            display: none;
            }
        }
        >.btn_reserve {
            width: 60%;
            padding: 0.8em 2em;
            >a{
                font-size: clamp(16px,4.58vw,23px);
            }
            &::after{
                width: 10px;
                height: 10px;
            }
        }
    }
 }
 /*------------------------------------------------------------------------------
 news
 -------------------------------------------------------------------------------*/
 #news{
     .news_box{
        max-width: 910px;
        margin: 0 auto;
        border: 2px solid var(--color1);
        background-color: #fff;
        overflow-y: scroll;
        height: 352px;
        border-radius: 10px;
        >dl{
            font-size: 18px;
            width: 90%;
            margin: 35px auto;
            >dd{
                border-bottom: 1px solid var(--color3);
                padding: 24px 0;
                margin-bottom: 20px;
                line-height: 1.6;
            }
        }
    }
 }
 /* スクロールバー */
.scroll-b::-webkit-scrollbar {
  width: 16px;
}

.scroll-b::-webkit-scrollbar-thumb {
  background: #e2e2e2;
  border-radius: 8px;
  border-right: 4px solid transparent; /* 透明なボーダーをつける */
  border-left: 4px solid transparent; /* 透明なボーダーをつける */
  background-clip: padding-box; /* 背景を切り取る */
}

.scroll-b::-webkit-scrollbar-track {
  /* 上下に余白を付ける */
  margin-top: 4px;
  margin-bottom: 4px;
}
  @media all and (max-width:768px){
    #news{
        .news_box{
            max-width: 100%;
            aspect-ratio: 63 / 35;
            height: auto;
            >dl{
                font-size: clamp(15px,3.86vw,18px);
                margin: 6% auto;
                >dd{
                    padding: 4% 0;
                    margin-bottom: 4%;
                }
            }
        }
    }
}
 /*------------------------------------------------------------------------------
 information
 -------------------------------------------------------------------------------*/
 #information{
     dl{
        line-height: 2;
        >dt{
            font-size: 22px;
            font-weight: 500;
            position: relative;
            padding-left: 26px;
            &::after{
                content: "";
                background: url(../img/icon.png) no-repeat center center/contain;
                width: 21.25px;
                height: 21.25px;
                position: absolute;
                top: 12px;
                left: 0;
            }
        }
        >dd{
            font-size: 18px;
            >span{
                font-size: 16px;
            }
            &:first-of-type{
                margin-bottom: 20px;
            }
            a{
                text-decoration: underline;
                color: var(--color2);
                font-weight: 500;
            }
        }
        &:first-of-type{
            margin-bottom: 40px;
        }
        &:first-of-type>dd>span{
            font-size: 21px;
            font-weight: 500;
        }
        &:last-of-type span{
            &:nth-of-type(4){
                display: inline-block;
                font-size: 18px;
                padding-left: 1em;
            }
            &:nth-of-type(5){
                display: inline-block;
                font-size: 18px;
            }
        }
    }
    .map{
        max-width: 910px;
        aspect-ratio: 91/51;
        border: 2px solid var(--color1);
        margin-bottom: 30px;
        >iframe{
            width: 100%;
            height: 100%;
        }
    }
    .btn_access{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 600px;
        margin: 0 auto 50px;
        padding: 1em 2em;
        border: 3px solid #fff;
        box-shadow: 0 0 0 1px var(--color1);
        background-color: var(--color2);
        font-weight: 600;
        font-size: 1em;
        position: relative;
        >a{
            width: 100%;
            color: var(--color1);
            font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W6", "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif,Helvetica, serif,Helvetica;
            font-weight: bold;
            font-size: 23px;
        }
        &::after{
            background: url(../img/icon_site.svg) no-repeat center center/contain;
            width: 33px;
            height: 27px;
            content: '';
            position: absolute;
            right: 14px;
        }
    }
    .shop-tel{
        margin-bottom: 40px;
        >p:nth-of-type(1){
            font-size: 20px;
            color: var(--color2);
            background-color: var(--color1);
            width: fit-content;
            font-weight: 500;
            padding: 0 8px;
            margin-bottom: 20px;
            line-height: 1.6;
            span{
                color: #fff;
            }
        }
        >p:nth-of-type(2){
            margin-bottom: 40px;
        }
        >div{
            width: 684px;
            margin: 0 auto;
        }
    }
 }
   @media all and (max-width:768px){
    #information{
        dl{
            padding: 0 5%;
            line-height: 1.8;
            >dt{
                font-size: clamp(16px,4.34vw,22px);
                padding-left: 24px;
                &::after{
                    top: min(1.8vw, 11px);
                    width: 18.25px;
                    height: 18.25px;
                }
            }
            >dd{
                font-size: clamp(15px,3.86vw,18px);
                >span{
                    font-size: clamp(15px,3.86vw,16px);
                }
                &:first-of-type{
                    margin-bottom: 2%;
                }
                a{
                    text-decoration: underline;
                    color: var(--color2);
                }
            }
            &:first-of-type{
                margin-bottom: 4%;
            }
            &:first-of-type>dd>span{
                font-size: clamp(15px,4.10vw,20px);
            }
            &:last-of-type span{
                &:nth-of-type(5){
                    padding-left: 1em;
                }
                &:nth-of-type(n+4){
                    font-size: clamp(15px,3.86vw,18px);
                }
            }
        }
        .map{
            max-width: 100%;
            margin: 0 5%;
            margin-bottom: 4%;
        }
        .btn_access{
            max-width: 600px;
            width: 90%;
            margin: 0 auto 6%;
            padding: 0.8em 2em;
            >a{
                font-size: clamp(15px, 4.58vw, 23px);
            }
            &::after{
                width: min(5.39vw,33px);
                height: min(4.59vw,27px);
            }
        }
        .shop-tel{
            width: 90%;
            margin: 0 auto 4%;
            >p:nth-of-type(1){
                font-size: clamp(16px, 4.34vw, 20px);
                margin-bottom: 2%;
            }
            >p:nth-of-type(2){
                margin-bottom: 4%;
            }
            >div{
                width: 100%;
                margin: 0 auto;
            }
        }
    }
}
/* 店舗電話番号 */
@media (hover: hover) and (pointer: fine) {
  .tel-link {
    pointer-events: none;
    text-decoration: none;
    color: inherit;
    cursor: default;
  }
}
 /*------------------------------------------------------------------------------
 menu
 -------------------------------------------------------------------------------*/
 #menu{
    overflow: hidden;
    h2:last-of-type{
        padding: 100px 0 50px;
    }
    h3{
        margin-top: 50px;
    }
    ul{
        margin-bottom: 6px;
    }
    .tokuten-txt>span{
        background-color: #fff;
        padding: 0 4px;
        font-weight: 500;
    }
    .frame{
        margin: 20px 0;
    }
    .drink-main{
        box-sizing: border-box;
        width: 99.5%;
        margin: 0 auto 90px;
        position: relative;
        &::after{
            content: "";
            background: url(../img/badge-postcard.webp) no-repeat center center / contain;
            width: 138px;
            height: 143.5px;
            position: absolute;
            top: -34px;
            left: -16px;
            z-index: 500;
        }
        img{
            border: 2px solid var(--color1);
        }
        h3{
            margin-top: 30px;
            >span{
                font-size: 20px;
            }
        }
    }
    .subttl-drink{
        max-width: 284px;
        margin: 0 auto 40px;
    }
    .menu-txt_wrapper{
        h4:nth-of-type(1){
            margin-top: 16px;
        }
        ul{
            list-style: none;
            margin-bottom: 30px;
        }
        li{
            font-weight: 600;
            position: relative;
            padding-left: 1.2em;
            ::before{
                content: "";
                position: absolute;
                top: 0.9em; 
                left: 0.6em;
                width: 4px;  
                height: 4px; 
                background-color: var(--color1);
                border-radius: 50%; 
            }
            >span{
                display: inline-block;
                padding-left: 1rem;
                font-weight: normal;
            }
        }
        .s-txt{
            font-size: 16px;
            padding-left: 0;
            font-weight: 600;
            &::before{
                display: none;
            }
        }
    }
    .drink_wrapper{
        display: flex;
        justify-content: center;
        gap: 60px 20px;
        flex-wrap: wrap;
        margin-bottom: 90px;
        >.drink_box{
            width: calc((100% - 20px) / 2);
            img{
                border: 2px solid var(--color1);
                box-sizing: border-box;
            }
            h3{
                margin-top: 10px;
                margin-bottom: 14px;
                >span{
                    font-size: 16px;
                }
            }
            .frame{
                margin: 14px 0 0;
            }
            .drink-txt{
                line-height: 1.8;
            }
        }
        &:last-of-type{
            margin-bottom: 40px;
        }
    }
    .allergie-txt{
        margin-bottom: 30px;
        line-height: 1.6;
    }
    .menu-notes{
        list-style: none;
        margin-bottom: 30px;
        margin-top: -40px;
        a{
            color: #2d2d2d;
            text-decoration: underline;
        }
    }
 }
 /* アフタヌーンティー画像スライド */
 .swiper {
  width: 100%;
  padding: 50px 0 10px!important;
  overflow: visible!important;
  &::after{
    content: "";
    background: url(../img/badge-ss.webp) no-repeat center center/contain;
    width: 132px;
    height: 137px;
    position: absolute;
    top: 16px;
    left: -14px;
    z-index: 500;
  }
}
.swiper-wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: auto!important;
  aspect-ratio: 91 / 61!important;
  img{
    border: 2px solid var(--color1);
  }
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  width: 100%;
  height: 100%;
  >img{
    width: 100%;
    height: auto;
  }
}
/* 点 */
.swiper-pagination-bullet {
  width: 6px !important;
  height: 6px !important;
  margin: 0 0 0 8px !important;
  background: #fff !important;
  border: 2px solid var(--color1);
  opacity: 1!important;
}
.swiper-pagination-bullet-active{
    background: var(--color2) !important;
}
.swiper-pagination-bullet:first-child {
  margin: 0 !important;
}
.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {
    bottom: inherit!important;
}
/* 矢印 */
.swiper-button-prev,
.swiper-button-next {
  width: min(3.46vw, 26px) !important; /* ボタンの幅 */
  height: 26px!important; /* ボタンの高さ */
  background-size: 16px 26px; /* 表示したいサイズ */
  transform: translateY(-50%);
  position: absolute!important;
}
.swiper-button-prev{
    left: -40px!important;
}
.swiper-button-next{
    right: -40px!important;
}
.swiper-horizontal {
    .swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev {
        margin-top: calc(0px - -26px / 2)!important;
    }
}

/* 次ページボタンのスタイル */
.swiper-button-next {
background-image: url('../img/img_arrow_black_01.png');
background-repeat: no-repeat;
transform: translateY(-50%) scale(-1, 1); /* 左右反転 */
}

/* 前ページボタンのスタイル */
.swiper-button-prev {
  background-image: url('../img/img_arrow_black_01.png');
  background-repeat: no-repeat;
}

.swiper-button-prev svg,
.swiper-button-next svg{
 display: none!important;
}

 @media all and (max-width:768px){
    #menu{
        width: 100%;
        .menu-txt_wrapper{
            width: 90%;
            margin: 0 auto;
            ul{
                margin-bottom: 8%;
            }
            h4:nth-of-type(1){
                margin-top: 4%;
            }
            .s-txt{
                font-size: clamp(14px,3.38vw,16px);
            }
            li{
                ::before{
                    top: 0.8em;  
                }
                >span{
                    padding-left: 0.4rem;
                }
            }
        }
        h2:last-of-type{
            padding: 18% 0 8%;
        }
        h3{
            margin-top: 12%;
        }
        ul{
            margin-bottom: 1%;
        }
        .frame{
            margin: 3% 0;
        }
        .price{
            margin-bottom: 1%;
        }
        .drink-main{
            width: 90%;
            margin: 0 auto 14%;
            &::after{
                width: min(19.6vw,147px);
                height: min(20.4vw,153px);
                top: -5vw;
                left: -4vw;
            }
            h3{
                margin-top: 4%;
                >span{
                    font-size: clamp(16px, 4.34vw, 20px);
                }
            }
        }
        .subttl-drink{
            max-width: min(48vw,326px);
            margin: 0 auto 6%;
        }
        .drink_wrapper{
            width: 90%;
            gap: 8vw;
            align-items: center;
            margin: 0 auto 14%;
            flex-direction: column;
            >.drink_box{
                max-width: 630px;
                width: 100%;
                h3{
                    margin-top: 1.2%;
                    margin-bottom: 1.6%;
                    line-height: 1.2;
                }
                .frame{
                    margin: 1.6% 0 0;
                }
            }
            &.last{
                margin-bottom: 4%;
            }
        }
        .allergie-txt{
            margin-bottom: 6%;
        }
        .menu-notes{
            width: 90%;
            margin: 0 auto 6%;
            list-style: none;
            a{
                color: #2d2d2d;
                text-decoration: underline;
            }
        }
        .tokuten-txt-wrapper{
            width: 90%;
            margin: 0 auto;
        }
    }
 /* アフタヌーンティー画像スライド */
 .swiper {
    width: 90%!important;
    padding: 10% 0.3% 1% 0!important;
    &::after{
        content: "";
        background: url(../img/badge-ss.webp) no-repeat center center/contain;
        width: min(20.4vw,153px);
        height: min(19.46vw,146px);
        position: absolute;
        top: 5vw;
        left: -5vw;
        z-index: 500;
        }
    }
    /* 点 */
    .swiper-pagination-bullet {
    width: 4px !important;
    height: 4px !important;
    margin: 0 0 0 10px !important;
    }
    /* 矢印 */
    .swiper-button-prev,
    .swiper-button-next {
    background-size: 12px 20px; /* 表示したいサイズ */
    }
    .swiper-button-prev{
        left: initial!important;
        right: 101.2%!important;
    }
    .swiper-button-next{
        right: initial!important;
        left: 102%!important;
    }
}
/*------------------------------------------------------------------------------
 goods
 -------------------------------------------------------------------------------*/
 #goods{
    .goods-lead{
        margin-bottom: 40px;
    }
    .item_wrapper{
        display: flex;
        justify-content: center;
        gap: 80px 110px;
        flex-wrap: wrap;
        margin-bottom: 50px;
        >p{
            margin-top: -40px;
        }
        >.item_box{
            width: calc((100% - 110px) / 2);
            text-align: center;
            img{
                border: 3px solid var(--color2);
                outline: 2px solid var(--color2);
                outline-offset: -12px;
                box-sizing: border-box;
            }
            >.item_img{
                margin-bottom: 4px;
            }
            h3{
                line-height: 1.2;
            }
            h3>span{
                font-size: 20px;
            }
            .price>span{
                font-size: 18px;
            }
        }
    }
    .bn-store{
        max-width: 716px;
        margin: 0 auto;
    }
 }
  @media all and (max-width:768px){
    #goods{
        .goods-lead{
            width: 90%;
            margin: 0 auto 8%;
        }
        .item_wrapper{
            width: 90%;
            gap: 5%;
            margin: 0 auto 2%;
            >p{
                margin-top: 0;
            }
            >.item_box{
                max-width: 300px;
                width: calc(95% / 2);
                margin-bottom: 8%;
                img{
                    border: 2px solid var(--color2);
                    outline: 1px solid var(--color2);
                    outline-offset: -6px;
                }
                >.item_img{
                    margin-bottom: 0;
                }
                h3{
                    font-size: clamp(13px, 4vw, 22px);
                    margin-bottom: 1%;
                }
                h3>span{
                    font-size: clamp(12px,3.6vw,20px);
                }
                .price {
                    font-size: clamp(12px, 3.6vw, 20px);
                }
                .price>span{
                    font-size: clamp(10px,2.89vw,18px)!important;
                }
            }
        }
    }
}
 /*------------------------------------------------------------------------------
 notice
 -------------------------------------------------------------------------------*/
 #notice{
    .notice_box{
        background-color: #fff;
        border: 2px solid var(--color1);
        box-sizing: border-box;
        padding: 20px 24px;
        margin-bottom: 40px;
        >p{
            font-weight: 500;
        }
        >ul{
            margin-bottom: 10px;
            list-style: none;
            >li{
                font-size: 16px;
                position: relative;
                padding-left: 1.2em;
                &::before {
                    content: "";
                    position: absolute;
                    top: 0.9em;
                    left: 0.4em;
                    width: 4px;
                    height: 4px;
                    background-color: var(--color1);
                    border-radius: 50%;
                }
            }
        }
    }
 }
  @media all and (max-width:768px){
    #notice{
        .notice_box{
            width: 90%;
            padding: 18px 20px;
            margin: 0 auto 8%;
            >p{
                font-size: clamp(14px,4.10vw,18px);
            }
            >ul{
                >li{
                    font-size: clamp(13px,3.62vw,16px);
                    &::before {
                        top: 0.8em;
                    }
                }
            }
        }
    }
}
 /*------------------------------------------------------------------------------
 reserveバナー
 -------------------------------------------------------------------------------*/
 .bn_reserve{
    background-color: var(--color1);
    line-height: 1.1;
    width: 210px;
    height: 130px;
    outline: 2px solid var(--color2);
    outline-offset: -12px;
    border: 0;
    box-sizing: border-box;
    padding-right: 10px;
    position: fixed;
    right: -20px;
    bottom: 30px;
    z-index: 10;
    transform: translatex(50px);
    opacity: 0;
    transition: 0.4s ease-out 0.4s;
    p:first-of-type{
        font-size: 44px;
        letter-spacing: 0.04em;
    }
    p:last-of-type{
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 0.02em;
        font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W6", "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif, Helvetica, serif, Helvetica;
        font-weight: bold;
        span{
            font-size: 8px;
            padding: 0 4px;
        }
    }
    a{
        color: #fff;
        font-family: freight-display-pro, serif;
        font-weight: 700;
        font-style: normal;
    }
 }
 .bn_reserve.active {
    transform: translatex(0);
    opacity: 1;
}
 @media all and (max-width:768px){
    .bn_reserve{
        width: 160px;
        height: 105px;
        outline-offset: -8px;
        right: -15px;
        p:first-of-type{
            font-size: 34px;
        }
        p:last-of-type{
            font-size: 13px;
            span{
                font-size: 6px;
            }
        }
    }
 }
 /*------------------------------------------------------------------------------
 footer
 -------------------------------------------------------------------------------*/
 footer{
    .btn_contact {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        margin: 0 auto 40px;
        padding: 1em 2em;
        border: 3px solid #fff;
        box-shadow: 0 0 0 1px var(--color1);
        background-color: var(--color2);
        font-weight: 600;
        font-size: 1em;
        position: relative;
        >a{
            width: 100%;
            color: var(--color1);
            font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W6", "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif,Helvetica, serif,Helvetica;
            font-weight: bold;
            font-size: 23px;
        }
        &::after{
            transform: rotate(45deg);
            width: 14px;
            height: 14px;
            border-top: 3px solid var(--color1);
            border-right: 3px solid var(--color1);
            content: '';
            position: absolute;
            right: 14px;
        }
    }
    .contact_list{
        margin-bottom: 50px;
        >li{
            list-style: none;
            font-size: 16px;
            line-height: 2;
        }
    }
    .bn_list{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        margin-bottom: 60px;
        >li{
            list-style: none;
            &:nth-of-type(1){
                img{
                    border: 1px solid #a5a5a5;
                    box-sizing: border-box;
                }
            }
            &:nth-of-type(n+1){
                width: 352px;
            }
            &:nth-of-type(3){
                width: 346px;
            }
            &:nth-of-type(4){
                width: 270px;
                height: auto;
                img{
                    border: 1px solid #a5a5a5;
                    box-sizing: border-box;
                }
            }
        }
    }
    .logo{
        width: 422px;
        margin: 0 auto 50px;
    }
    .share_area{
        margin-bottom: 80px;
        >p{
            font-size: 20px;
            text-align: center;
            letter-spacing: 0.14em;
            font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W6", "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif, Helvetica, serif, Helvetica;
            font-weight: bold;
            margin-bottom: 18px;
        }
        >.share_list{
            display: flex;
            list-style: none;
            align-items: center;
            justify-content: center;
            gap: 40px;
            >li{
                width: 47px;
                height: 48px;
                &:nth-of-type(1){
                    width: 42px;
                }
            }
        }
    }
    .copyright{
        font-size: 15px;
        text-align: center;
        margin-bottom: 0;
    }
 }
  @media all and (max-width:820px){
    footer{
        .bn_list{
            gap: 1.8vw;
            flex-direction: column;
            align-items: center;
            >li{
                max-width: 300px;
                width: 100%;
                &:nth-of-type(n+1){
                    width: 100%;
                }
                &:nth-of-type(3){
                    width: 100%;
                }
                &:nth-of-type(4){
                    width: 100%;
                }
            }
        }
    }
  }
  @media all and (max-width:768px){
     footer{
        .contact_area{
            width: 90%;
            margin: 0 auto;
        }
        .btn_contact {
            max-width: 400px;
            width: 100%;
            margin: 0 auto 4%;
            >a{
                font-size: clamp(15px, 4.58vw, 23px);
            }
            &::after{
                width: 10px;
                height: 10px;
            }
        }
        .contact_list{
            margin-bottom: 8%;
            >li{
                list-style: none;
                font-size: clamp(13px,3.62vw,16px);
                line-height: 1.8;
            }
        }
        .bn_list{
            gap: 3vw;
            width: 90%;
            margin: 0 auto 12%;
            >li{
                max-width: 400px;
            }
        }
        .logo{
            width: min(86vw,400px);
            margin: 0 auto 10%;
        }
        .share_area{
            margin-bottom: 130px;
            >p{
                margin-bottom: 3%;
                font-size: clamp(16px,4.83vw,20px);
            }
            >.share_list{
                gap: 16px;
            }
        }
        .copyright{
            font-size: clamp(12px,2.89vw,15px);
        }
    }
}