@charset "utf-8";

/*******************************
基本設定・変数
*******************************/

@font-face {
  font-family: 'LINE';
  src: url('../fonts/LINESeedSans_W_XBd.woff2') format('woff');
}

:root {
  /* フォントサイズ */
  --body-size: clamp(17px, 1.1rem + 0.2vw, 19px);
  --body-lh: 1.8;
  --small-font-size: 12px;
  --little-font-size: 14px;
  --font18-size: 18px;
  ---font21-size: 21px;
  ---font24-size: 24px;
  ---font30-size: 30px;
  --tablet-font-size: 1.2rem;
  
 
  /* カラー */
  --text-color: #333;
  --link-color: #333;
  --contents-link-color: red;
  --base-color: #152d73;
  --red: #ff0000;
  --orange:#ee7800;
  --gold: #C5A059;
  --gray: #abb8c3;
  --light-gray:#eee;
  --violet: #a40b5d;
  --brown: #663300;
  --white: #FFFFFF;
  --yellow:#ffff00;
  --black: #333;

  /* SNSカラー */
  --fb-color: #1877f2;
  --x-color: #0f1419;
  --insta-color: #CF2E92;
  --yt-color: #DA1725;
  --line-color: #00B900;

  /* 間隔 */
  --space-10: 10px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-60: 60px;

  /* %幅サイズ*/
  --space-10p: 10%;
  --space-20p: 20%;
  --space-30p: 30%;
  --space-40p: 40%;
  --space-46p: 46%;
  --space-50p: 50%;
  --space-60p: 60%;

  /* コンテンツ幅とパディング */
  --max-content-width: 1200px;
  --content-padding-small: 20px;
  --content-padding-medium: clamp(1.25rem, -0.179rem + 7.14vw, 2.5rem);
  --content-padding-large: 40px;
  --content-padding-xlarge: 60px;
  
  /* カラム間隔 */
  --gap-2: 2%;
  --gap-5: 5%;
  
  /* トランジション */
  --transition-fast: 0.25s;
  --transition-slow: 0.5s;

  /* 角丸 */
  --radius5: 5px;
  --radius10: 10px;

  /* 動画・MV */
  --mv-max-h: 720px;
  --mv-min-h: 56vh;
  --mv-safe-pad: clamp(16px, 4vw, 40px);
}

/* リセットと基本設定 */
* {
  margin: 0;
  padding: 0;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  color: var(--text-color);
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}

body {
  font-size: var(--body-size);
  line-height: var(--body-lh);
  letter-spacing: 0.05em;
 font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  scroll-behavior: smooth;
  min-height: 100%; 
    display: flex;
    flex-direction: column;
    margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

blockquote {
  quotes: none;
}
blockquote:before, blockquote:after {
  content: '';
  content: none;
}

del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

address {
  font-style: normal;
}
address p {
  text-decoration: none;
}

article {
  overflow-x: hidden;
}

/* aタグ設定 */
a img {
  border: none;
}
a img:hover {
  opacity: 0.7;
  transition: var(--transition-slow);
}
a {
  color: var(--link-color);
  text-decoration: none;
  transition: var(--transition-fast);
}
.contents a {
  color: var(--gold);
}


/* 文字寄せ */

.txt_left{
text-align: left;
}


.txt_center{
text-align: center;
}

.txt_right{
text-align: right;
}


.little-font-size{
font-size: var(--little-font-size);
}

.pt10{
padding-top:var(--space-10);
}


.pt20{
padding-top:var(--space-20);
}


.pt30{
padding-top:var(--space-30); 
}


.pt40{
padding-top:var(--space-40);
}

.pt60{
padding-top:var(--space-60);
}


.pb10{
padding-bottom:var(--space-10);
}


.pb20{
padding-bottom:var(--space-20);
}


.pb30{
padding-bottom:var(--space-30); 
}


.pb40{
padding-bottom:var(--space-40);
}

.pb60{
padding-bottom:var(--space-60);
}


.white{
color: white!important;
}

.bg_black{
background-color: black;
}


.btn_wrapper{
text-align: center;
padding: var(--space-40) 1em;
}

.g_btn {
       display: inline-block;
    padding: 15px 60px;
    min-width: 280px;
    text-align: center;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
     background-image: radial-gradient(circle, rgba(255, 242, 58, 1), rgba(224, 162, 8, 1) 80%);
    background-size: 200% auto;
    font-size: 21px;
    font-weight: bold;
    letter-spacing: 0.15em;
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: black!important;

}

/* 光の要素（初期状態は左に隠す） */
.g_btn:after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* 開始位置をさらに遠くに */
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
}

/* ホバー時のアクション */
.g_btn:hover {
    color: #000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px); /* わずかに浮き上がる */
}

/* ホバー時のみアニメーションを実行 */
.g_btn:hover:after {
    animation: shine 0.8s forwards;
}

@keyframes shine {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}

/* --- ヘッダー本体 --- */
.site-header {
    width: 100%;
	position: fixed;
    z-index: 999;
}

.header-inner {
    max-width: 1920px;
    margin: 0 auto;
    height: 115px; /* PC時の高さ */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
    transition: height 0.3s ease;
}

/* ロゴ設定 */

.header-logo{
margin-top: 15px;
}

.header-logo img {
    height: auto;
    max-height: 90px; /* ロゴの最大高さを調整 */
    display: block;
    width: auto;
}


.header-right {
    display: flex;
    align-items: center;
}

.header-map-btn,
.header-tel-btn {
    display: none; /* PCでは非表示 */
    color: #fff;
    font-size: 26px; /* ★基本サイズを30pxから少し小さく調整 */
    margin-right: 25px; /* ★ボタン同士の間隔 */
    transition: opacity 0.3s;
    line-height: 1;
}

.header-map-btn:hover,
.header-tel-btn:hover {
    opacity: 0.7;
}

/* --- スマホ表示（700px以下） --- */
@media screen and (max-width: 700px) {
    .header-map-btn, .header-tel-btn {
        display: block; /* スマホで表示 */
    }
}

/* --- ハンバーガーボタン --- */
.hamburger-btn {
    position: relative;
    width: 45px;
    height: 35px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001; /* メニューより上に配置 */
    padding: 0;
}

.hamburger-btn span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #fff; /* 線の色：白 */
    border-radius: 2px;
    left: 0;
    transition: all 0.4s ease;
}

/* 3本線の位置 */
.hamburger-btn span:nth-child(1) { top: 0; }
.hamburger-btn span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger-btn span:nth-child(3) { bottom: 0; }

/* ×印アニメーション（クラスが付与された時） */
.hamburger-btn.is-active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.hamburger-btn.is-active span:nth-child(2) {
    opacity: 0;
}
.hamburger-btn.is-active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* --- ナビゲーションメニュー（オーバーレイ） --- */
.global-nav {
    position: fixed;
    top: 0;
    right: 0; /* 右から出てくるように配置 */
    width: 100vw;
    height: 100vh;
	background-image: url("../images/menu_bg.webp");
	background-size: cover;
	background-position: bottom;
    z-index: 1000;
    transform: translateX(100%); /* 初期状態は画面右外 */
    transition: transform 0.5s ease; /* スライドのアニメーション */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* メニューが開いた時 */
.global-nav.is-active {
    transform: translateX(0);
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.nav-list li {
    margin: 20px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
}

/* メニューが開いた時にリンクをふわっと表示 */
.global-nav.is-active .nav-list li {
    opacity: 1;
    transform: translateY(0);
}

/* 遅延させて順番に表示 */
.global-nav.is-active .nav-list li:nth-child(1) { transition-delay: 0.1s; }
.global-nav.is-active .nav-list li:nth-child(2) { transition-delay: 0.2s; }
.global-nav.is-active .nav-list li:nth-child(3) { transition-delay: 0.3s; }
.global-nav.is-active .nav-list li:nth-child(4) { transition-delay: 0.4s; }
.global-nav.is-active .nav-list li:nth-child(5) { transition-delay: 0.5s; }
.global-nav.is-active .nav-list li:nth-child(6) { transition-delay: 0.6s; }

.nav-list a {
    color: #fff;
    text-decoration: none;
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    font-family: "Dancing Script", cursive;
    display: block;
    padding: 10px;
}
.nav-list a:hover {
    color: var=(--gold); /* ホバー時はゴールド系 */
}

/* --- レスポンシブ (700px以下) --- */
@media screen and (max-width: 700px) {
    .header-inner {
        height: 75px; /* SP時の高さ */
        padding: 0 15px;
    }
    
    .hamburger-btn {
        width: 40px;
        height: 30px;
    }

    .header-logo img {
        max-height: 50px; /* SP時のロゴサイズ調整 */
    }

    .nav-list a {
        font-size: 1.5rem; /* SP時はフォントサイズを少し小さく */
    }
}



@media screen and (max-width: 399px) {
    /* アイコンを少し小さく */
    .header-map-btn,
    .header-tel-btn {
        font-size: 20px; 
        margin-right: 15px; /* 間隔を詰める */
    }

    /* ハンバーガーボタンも少し小さくして収まりを良くする */
    .hamburger-btn {
        width: 35px;
        height: 25px;
    }
    
    /* ハンバーガーの線の太さなどを微調整（バランス用） */
    .hamburger-btn span {
        height: 2px;
    }
}


/* ---フッター --- */
.site-footer{
background: var(--base-color);
color: white;
padding: 0.5em 1em;
    }

.site-footer__copy{
display: block;
font-size: 14px;
text-align: center;
}



/* --- MVセクション全体（外枠） --- */
.mv-section {
    width: 100%;
    height: 100svh;      /* 画面の高さいっぱい */
    background-color: #000; /* ★重要：1440pxを超えた左右の余白は「黒」にする */
    display: flex;
    justify-content: center; /* コンテンツを画面中央に寄せる */
}

/* --- 幅制限を行うラッパー（中枠） --- */
.mv-wrapper {
    position: relative; /* 子要素の基準位置 */
    width: 100%;
    max-width: 1600px;  /* ★重要：画像の最大幅 */
    height: 100%;       /* 親の高さに合わせる */
    overflow: hidden;   /* はみ出し防止 */
}

/* --- 画像の設定 --- */
.mv-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.mv-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 比率を保ってトリミング */
    object-position: center;
    display: block;
}

/* --- 黒いフィルター --- */
.mv-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.35) 100%);
    z-index: 2;
    pointer-events: none; /* クリックを邪魔しない */
}

/* --- コンテンツ（文字部分） --- */
.mv-content {
 position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #fff;
    text-align: center;
    padding-bottom: 200px;
}

/* ※以下、文字装飾は前回と同じですが、クラス名を .mv- に合わせて調整 */

.sub-title {
    font-size: 30px;
    color: #d4af37;
    margin-bottom: 20px;
    padding: 0 1em;
    display: inline-block;
    border-bottom: 1px #d4af37 solid;
    border-top: 1px #d4af37 solid;
}

.main-title {
    font-size: 3rem;
    line-height: 1.6;
    margin-bottom: 40px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
	font-weight: normal;
}


.main-title p {
    font-size: 5rem;
	display: inline;
	line-height: 1;
}

.price-badge {
    display: inline-block;
    padding: 45px 40px;
	background: url("../images/price-badge.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
    position: relative;
}



.price-badge .min {
    display: block;
    font-size: 1.5rem;
}
.price-badge .price {
    display: block;
    font-size: 2.5rem;
}


@media screen and (max-width: 1199px) {
.main-title p {
    font-size: clamp(2.25rem, 1.431rem + 4.1vw, 4.5rem);
}
}

@media (min-width: 701px) and (max-width: 11199px) {


.sub-title {
font-size: clamp(1.875rem, 1.347rem + 1.2vw, 2.25rem);
}


 .main-title {
    font-size: clamp(2.5rem, 1.796rem + 1.61vw, 3rem);
}


}

/* --- レスポンシブ (SP) --- */
@media screen and (max-width: 700px) {

.mv-content {
    padding-bottom: clamp(6.25rem, 0.987rem + 26.32vw, 12.5rem);
}

.sub-title {
font-size: clamp(1.125rem, 0.493rem + 3.16vw, 1.875rem);
}
    .main-title {
        font-size: clamp(1.5rem, 0.658rem + 4.21vw, 2.5rem);
    }
    .price-badge {
        padding: 35px 35px;
    }
    .price-badge .price {
        font-size: 2rem;
    }
}





.particles-area {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
}


.scrolldown {
    position: absolute;
    bottom: 0;       /* 下端に合わせる */
    right: 60px;     /* 右からの位置 */
    z-index: 20;
    
    /* 縦並びにする設定 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* "Scroll"のテキスト部分 */
.scrolldown span {
    /* ご提示のデザインを適用 */
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-family: "Noto Serif JP", serif; /* サイトのフォントに合わせる */
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    writing-mode: vertical-rl; /* 縦書き */
    
    padding-bottom: 10px; /* 線との隙間 */
}

/* 伸び縮みするライン */
.scrolldown::after {
    content: "";
    display: block;
    width: 1px;        /* 線の太さ */
    height: 100px;     /* 線の長さ */
    background: #fff;  /* 線の色 */
    
    /* アニメーション設定（ご提示のコードそのまま） */
    animation: liner 2.5s cubic-bezier(1, 0, 0, 1) infinite;
}

/* アニメーションキーフレーム（ご提示のコードそのまま） */
@keyframes liner {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;      /* 上を起点に */
    }
    30% {
        transform: scale(1, 1);
        transform-origin: 0 0;      /* 上を起点に伸び切る */
    }
    70% {
        transform: scale(1, 1);
        transform-origin: 0 100%;   /* 起点を下に切り替え */
    }
    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;   /* 下に向かって消える */
    }
}

/* --- レスポンシブ (スマホ調整) --- */
@media screen and (max-width: 700px) {
    .scrolldown {
        right: 20px; /* スマホでは右端に寄せる */
    }
    
    .scrolldown span {
        font-size: 12px;
    }
    
    .scrolldown::after {
        height: 85px; /* スマホでは線を少し短くする */
    }
}





/* --- コンセプト --- */
.concept-section {
    position: relative;
    width: 100%;
    max-width: 1920px;
	height: 80vh;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
	background: black;
}

/* 背景画像の設定 (PC) */
.background-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%; /* 画面の左側60%を占有 */
    height: 100%;
	background-image: url("../images/rose-outside.bg.webp");
    background-size: cover;
    background-position: left bottom;
    z-index: 1;
    
    /* 上と右をフェードアウトさせる */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%),
                        linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%),
						linear-gradient(to left, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%),
                linear-gradient(to top, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%),
				linear-gradient(to left, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
}

/* コンテンツ配置 */
.container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px; /* 読みやすい幅に制限 */
    margin: 0 auto;
    padding: 40px;
	color: white;
}

.content-wrapper {
    display: flex;
    justify-content: flex-end; /* テキストを右側に寄せる */
}

.text-content {
    width: 50%; /* 提案：PCでは45〜50%がバランスが良いです */
    text-align: left;
}

.title {
font-family: "Dancing Script", cursive;
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 40px;
}


.title_h3 {
font-size: clamp(1.5rem, 1.425rem + 0.38vw, 1.875rem);
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
  text-align: center;
  color: white;
}


.title_h3:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 2px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color:white;
}



/* --- レスポンシブ (スマホ: 700px以下) --- */
@media (max-width: 1199px) {
    .concept-section {
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
    }

    .background-image {
        position: relative;
        width: 100%;
        height: 50vh; /* 画像の高さを確保 */
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
        order: 2; /* 画像を下に配置 */
        margin-top: -80px; /* コンテンツの下に少し潜り込ませる */
    }

    .container {
        padding: 60px 100px;
        order: 1; /* テキストを上に配置 */
    }

    .content-wrapper {
        justify-content: center;
    }

    .text-content {
        width: 100%;
    }

    .title {
        font-size: 3.5rem;
        margin-bottom: 30px;
		text-align: center;
    }
}



@media (max-width: 980px) {
    

    .container {
        padding: 60px 40px;
        order: 1; /* テキストを上に配置 */
    }

 
}




/* --- セクション背景 --- */
.system-section {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden; /* はみ出し防止 */
}

/* --- コンテンツ共通 --- */
.system-inner {
    text-align: center;
    position: relative;
	color: white;
}



/* 装飾画像 */
.ornament-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* 下の装飾は180度回転 */
.ornament-bottom img {
    transform: rotate(180deg);
}

/* 価格エリア全体 */
.price-content {
    margin-left: auto;
    margin-right: auto;
}

/* 1set 60min */
.price-head {
    line-height: 1;
}

/* 区切り線（白線） */
.price-divider {
    width: 100%;
    height: 1px;
    background-color: #fff;
}

/* 価格リスト */
.price-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    line-height: 1.2;
}

.price-row dt {
    text-align: left;
}

.price-row dd {
    margin: 0;
    text-align: right;
    letter-spacing: 0.05em;
}

/* --- 微調整クラス --- */

/* min.の小文字化 */
.min-small {
    font-size: 0.7em;
    margin-left: 0.1em;
}

/* ¥マークの調整 */
.yen {
    font-size: 0.75em;     /* 数字に対して75%のサイズ */
    margin-right: 0.15em;  /* 数字との間隔 */
    vertical-align: 0.1em; /* 少し上に持ち上げる */
    font-weight: 400;      /* 太くなりすぎないように */
    font-family: 'Noto Serif JP', serif; /* 円マークは明朝体の方が綺麗な場合が多い */
}


/* =========================================
   PC用スタイル (701px以上)
   幅720px固定 / フォントサイズはpx指定
   ========================================= */
@media screen and (min-width: 701px) {
    .system-section {
        padding: 80px 0;
    }

    .system-inner {
        width: 720px;
    }

   

    /* 飾りとコンテンツの距離 */
    .ornament-top { margin-bottom: 20px; }
    .ornament-bottom { margin-top: 40px; }

    /* 1set 60min */
    .price-head {
        font-size: 40px;
        margin-bottom: 15px;
    }
    .price-head .num { font-size: 1.1em; margin-right: 5px; }
    .price-head .unit { font-size: 0.6em; margin-right: 15px; }
    .price-head .unit:last-child { margin-right: 0; }

    /* 線 */
    .price-divider {
        margin: 15px 0 30px 0;
    }

    /* リスト */
    .price-list { gap: 21px; }
    
    .price-row {
        font-size: 30px;
        padding: 0 20px; /* 左右に少し余白 */
    }
}


/* =========================================
   SP用スタイル (700px以下)
   コンテンツ幅600px相当 (85.714vw)
   全てのサイズをvwで指定して比率維持
   ========================================= */
@media screen and (max-width: 700px) {
    .system-section {
        padding: 10vw 0; /* 上下の余白 */
    }

    .system-inner {
        /* 700pxの時に600px幅 = 85.714vw */
        width: 82vw;
    }

   

    .ornament-top { margin-bottom: 6vw; }
    .ornament-bottom { margin-top: 8vw; }

    .price-head {
        font-size: 8vw;
        margin-bottom: 2vw;
    }
    .price-head .num { font-size: 1.1em; margin-right: 0.5vw; }
    .price-head .unit { font-size: 0.6em; margin-right: 2vw; }
    .price-head .unit:last-child { margin-right: 0; }

    .price-divider {
        margin: 3vw 0 5vw 0;
    }

    .price-list {
        gap: 5vw; /* 行間 */
    }

    .price-row {
        font-size: 5.5vw; /* 価格などの文字サイズ */
    }
}



/* --- Information セクション全体設定 --- */
.info-section {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 80vh; /* PCでの高さ */
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: black;
}

/* --- 背景画像設定 (PC: 右寄せ) --- */
.info-background-image {
    position: absolute;
    bottom: 0;
    right: 0; /* ★変更: 右寄せ */
    left: auto; /* 左指定を解除 */
    width: 60%; 
    height: 100%;
    /* 指定された画像パス */
    background-image: url("../images/lounge_image2.webp");
    background-size: cover;
    background-position: center; /* 画像の中心を表示 */
    z-index: 1;

    /* ★変更: 左側に向けてフェードアウトさせるマスク設定 */
    -webkit-mask-image: 
        linear-gradient(to left, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%), /* 左へ透明に */
        linear-gradient(to top, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%), /* 上も少しぼかす */
        linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); 
    mask-image: 
        linear-gradient(to left, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%),
        linear-gradient(to top, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%),
		linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);

    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
}

/* --- コンテンツエリア --- */
.info-section .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    color: white;
}

.info-section .content-wrapper {
    display: flex;
    justify-content: flex-start; /* ★変更: 左寄せ (テキストを左に置くため) */
}

.info-section .text-content {
    width: 50%; /* PCでは画面半分の幅を使う */
    text-align: left;
}

.info-section .title {
    font-size: 3rem;
    letter-spacing: 0.1em;
    margin-bottom: 50px;
    text-align: center; /* タイトルは中央寄せ（デザイン画準拠） */
}

/* --- Information リスト (DL, DT, DD) のスタイル --- */
.info-list-container {
    width: 100%;
    font-family: serif; /* 明朝体系で高級感を出す */
}

.info-list {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 行ごとの設定 */
.info-row {
    display: flex;
    align-items: center; /* 上下中央揃え */
    padding: 20px 0;
    /* ★要望: ドット線 */
    border-bottom: 1px dotted #ffffff;
}

/* 最後の行だけ線消す場合（お好みで有効化してください） */
/* .info-row:last-child { border-bottom: none; } */

.info-row dt {
    width: 30%; /* ラベル幅 */
    font-weight: normal;
    padding-right: 20px;
    box-sizing: border-box;
    text-align: right; /* ラベル右寄せ */
    letter-spacing: 0.1em;
}

.info-row dd {
    width: 70%; /* データ幅 */
    margin: 0;
    line-height: 1.8;
    letter-spacing: 0.05em;
}


/* --- レスポンシブ (スマホ・タブレット) --- */
@media (max-width: 1199px) {
    .info-section {
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
        padding-bottom: 60px;
    }

    /* スマホでは画像を上に配置 */
    .info-background-image {
        position: relative;
        width: 100%;
        height: 40vh; /* スマホ時の画像の高さ */
        right: auto;
        left: 0;
        
        /* 下側に向けてフェードアウト */
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
        
        order: 1; /* 順序：1番目 */
    }

    .info-section .container {
        padding: 40px 20px;
        order: 2; /* 順序：2番目 */
    }

    .info-section .content-wrapper {
        justify-content: center;
    }

    .info-section .text-content {
        width: 100%;
    }

    .info-section .title {
        font-size: 2.5rem;
        margin-bottom: 30px;
        text-align: center;
    }

    /* スマホ時のリスト調整 */
    .info-row {
        padding: 15px 0;
    }
    
    .info-row dt {
        width: 35%;
        text-align: left; /* スマホなら左寄せの方が見やすい場合も */
        font-size: 0.9rem;
    }
    
    .info-row dd {
        width: 65%;
        font-size: 0.9rem;
    }
}

/* さらに画面が小さい場合 (SP縦など) */
@media (max-width: 768px) {
    .info-row {
        /* 必要に応じて縦並びにする場合 */
        /* flex-direction: column; */
        /* align-items: flex-start; */
    }
    .info-row dt {
        /* width: 100%; */
        /* margin-bottom: 5px; */
    }
    .info-row dd {
        /* width: 100%; */
        /* padding-left: 0; */
    }
}



/* =========================================
   ドリンクメニュー
   ========================================= */
   
   .drink-section_wrapper{
    background-image: url('../images/system_bg.webp');
    background-repeat: repeat;
    background-position: center;
    background-size: auto; 
	}
   
   
   .drink-section {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    overflow: hidden; /* はみ出し防止 */
}
   

/* 全体のコンテナ */
.drink-menu-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    color: #fff; /* 文字色 白 */
    
}

/* カテゴリー見出し */
.drink-category-title {
    text-align: center;
    margin-bottom: 40px;
}

.drink-category-title h2 {
    font-size: 24px;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
	font-weight: bold;
}

.drink-category-title .cate-border {
    width: 60px;
    height: 1px;
    background: #fff;
    margin: 0 auto;
}

/* グリッドレイアウト (PC 3カラム) */
.drink-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3等分 */
    gap: 60px 40px; 
}

/* カード単体 */
.drink-card {
    display: flex;
    width: 100%;
}

/* 画像ラッパー (提案：縦長で統一) */
.drink-image-wrapper {
    width: 100%;
    position: relative;
    margin: 0 0 20px 0;
    overflow: hidden;
}

.drink-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 画像全体を収める（切り取らない） */
    object-position: center bottom; /* 下揃えにするとボトルが並んでいる感が出ます。真ん中ならcenter centerで */
}

/* テキストエリア */
.drink-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 下揃えのために伸ばす */
}

/* タイトル */
.drink-title {
    font-size: 18px; /* 基本サイズ */
    line-height: 1.6;
    margin: 0 0 15px 0;
    font-weight: normal;
}

/* タイトル内のカッコ書き (PHPで生成したクラス) */
.drink-title-sub {
    font-size: 0.8em; /* 80%小さく */
    opacity: 0.9; /* 少しだけ色を薄くして階層感を出す（任意） */
}

/* 価格 */
.drink-price {
    margin-top: auto; /* 上の要素との距離を最大にとる（右下に配置するため） */
    align-self: flex-end; /* 右端に配置 */
    font-size: 20px;
    font-family: 'Times New Roman', serif; /* 数字は明朝系が合います */
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

/* ￥マーク */
.drink-price .yen {
    font-size: 0.8em; /* 数字より80%小さく */
    margin-right: 4px;
}

/* --- レスポンシブ対応 (700px以下) --- */
@media screen and (max-width: 700px) {
    .drink-grid {
        grid-template-columns: repeat(2, 1fr); /* 2カラム */
        gap: 40px 20px; /* スマホ用に隙間を調整 */
    }
    
    .drink-title {
        font-size: 15px; /* スマホ用に少し小さく */
    }
}



/* 地図*/
.dark-map {
    /* --- PC・基本設定 --- */
    width: 100%;            /* 横幅いっぱい */
    height: 450px;          /* PCでの高さ（お好みで調整してください） */
    object-fit: cover;
    
    /* --- 黒基調（ダークモード）にするフィルター --- */
    filter: invert(100%) hue-rotate(180deg) contrast(90%) grayscale(30%);
    
    /* 枠線消去 */
    border: none;
    display: block;
}

/* --- スマホ・レスポンシブ設定 (700px以下) --- */
@media screen and (max-width: 700px) {
    .dark-map {
        height: auto;        /* 高さを自動計算に切り替え */
        aspect-ratio: 4 / 3; /* 比率を4:3に固定 */
    }
}





/* ベースセクション */
.contact-section {
    width: 100%;
	padding: 40px 0 60px 0;
    min-height: 500px;
    background: url("../images/contact_bg.webp") repeat center center;
}



/* お問い合わせボックス本体 */
.contact-box {
    display: flex;
    width: 920px;
    max-width: 95%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.80);
    justify-content: center;
    align-items: stretch; /* 高さを揃える */
    transition: background 0.3s;
	padding: 20px 0;
}

.contact-box:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 電話ブロック */
.contact-box-tel {
    display: block;
    width: 50%;
    text-align: center;
    border-right: solid 2px var(--gold);
    padding: 30px 0;
}

.contact-box-tel-title {
    font-size: 26px;
    font-weight: bold;
}

.contact-tel {
    font-size: 30px;
    color:  var(--base-color);
    display: block;
    text-align: center;
	font-weight: bold;
}

.contact-tel a {
    color: inherit;
    text-decoration: none;
}

/* メール/フォームブロック */
.contact-box-mail {
    display: block;
    width: 50%;
    text-align: center;
    padding: 30px 0;
    text-decoration: none;
    color: inherit;
}

.contact-box-mail-title {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
}

.contact-mail {
       text-decoration: none;
    transition: all 0.3s ease;
    background-image: radial-gradient(circle, rgba(255, 242, 58, 1), rgba(224, 162, 8, 1) 80%);
    background-size: 200% auto;
    font-size: 24px;
	font-weight: bold;
    padding: 10px 40px;
    width: 80%;
    margin: 0 auto 15px;
}

/* 700px以下のレスポンシブ対応（縦並び） */
@media only screen and (max-width: 700px) {
    .contact-section {
        height: auto;
        padding: 0px 20px 100px;
    }

    .contact-box {
        display: block;
        width: 100%;
    }

    .contact-box-tel, 
    .contact-box-mail {
        width: 100%;
        display: block;
    }

    .contact-box-tel {
        border-right: none;
        border-bottom: solid 1px #CCCCCC;
    }

    .contact-mail {
        width: 90%;
        padding: 10px;
    }
}



/* ページ設定 */
.page_wrapper{
flex: 1 0 auto;
padding-top: 135px;
background-image: url("../images/system_bg.webp");
background-repeat: repeat;
color: white;
}


.page_inner{
max-width: 1200px;
margin: 0 auto;
padding:0 20px;
}


/* リスト */

ul.item-list {
		margin: 1.5em;
		list-style: none;
		padding-left: 1.5em;
		font-size: 0.95em;
	}
	ul.item-list li {
		margin-bottom: 0.5em;
		border: none;
		width: 100% !important;
		position: relative;
		padding-left: 1em;
		list-style: none;
	}
	ul.item-list li::before {
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		content: "\f058";
		position: absolute;
		left: -1.5em;
		top: 0;
	}
	@media only screen and (max-width: 980px) {
		ul.item-list {
			margin: 1em 0;
			list-style: none;
			padding-left: 1em;
		}
		ul.item-list li::before {
			left: -0.5em;
		}
	}



/* dl dt dd*/

dl.information dt{
	font-size: clamp(1.125rem, 1.087rem + 0.19vw, 1.313rem);
	padding: 0.25em;
	margin-bottom: 0.5em;
	border-bottom: dotted var(--gray) 1px;
	line-height: 1.5em;
	padding-left: 1.5em;
  text-indent: -1.4em;
	font-weight: bold;
}


dl.information dd{
	margin-bottom:30px;
}

dl.information dd a{
	color: var(--text-color);
}

	
dl.information dd:last-child{
	margin-bottom:0;
}



/* パーツ*/

/* パンくずリスト*/
.breadcrumbs{
	
	font-size: var(--little-font-size);
	padding: 0.5em 0;

}



.breadcrumbs a{
color: var(--gold);
}