@charset "utf-8"; 
a, abbr, acronym, address, applet, article, aside, audio,b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video{font-size:100%; vertical-align:baseline; white-space:normal; margin:0; padding:0; border:0; outline:0; background:transparent;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;} ol, ul{list-style:none;} blockquote, q{quotes:none;}table{border-collapse:collapse; border-spacing:0;} *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; -webkit-text-size-adjust:100%;} img{vertical-align:top; width: 100%;height: auto;} h1, h2, h3, h4, h5, h6{font-weight:normal;}


/*---------------------------
Link
---------------------------*/
a{outline:none; text-decoration: none; color: #302210;}
a:hover{ opacity: 0.8;}
a img:hover{ opacity: 0.8;}
a:hover{-webkit-transition:all .5s ease; transition:all .5s ease;}


@media screen and (max-width: 450px) {
a:hover{ opacity:1;}
}


/*---------------------------
Body
---------------------------*/

html{scroll-behavior: smooth;}
body{font-family:"gravesend-sans", sans-serif; font-style: normal; font-weight: 700; color: #fff; word-wrap:break-word; font-kerning:normal;font-size:20px;letter-spacing: 0.05em;overflow-x: hidden;background: #EB20A9;}







/*---------------------------
共通
---------------------------*/
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf{*zoom: 1;}

.pc{display:block;}
.sp{display:none;}



@media screen and (max-width: 750px) {
.pc{display:none;}
.sp{display:block;}
}

#page-wrapper {
  opacity: 0;                 /* 最初は非表示 */
  transition: opacity 0.8s ease-out; /* 後でふわっと表示 */
}

/*---------------------------
コンテンツ
---------------------------*/

/* Heroエリア フェードイン */
.hero {
position: fixed;
display: flex;
justify-content: center; align-items:center;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh; /* iPhone のツールバー分も含めて画面いっぱいに */
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
background:url("../img/bg_hero.jpg") no-repeat center; background-size: cover;;
z-index: 9999;
opacity: 0;
animation: heroInOut 3.8s ease-out forwards;
}

.hero .pict{width: 400px;}

@media screen and (max-width: 750px) {
.hero .pict{width: 300px;}
}


@keyframes heroInOut {
      0% {
        opacity: 0;
      }
      40% {
        opacity: 1;   /* 1.6s地点で完全に表示 */
      }
      80% {
        opacity: 1;   /* ここまで表示を維持（約2秒キープ） */
      }
      100% {
        opacity: 0;   /* 最後にフェードアウト */
      }
    }

    /* Heroが消えた後にクリックできるようにするため、display:noneにする */
    .hero.is-hidden {
      display: none;
    }

/* スクロールでふわっと出るアニメーション */
.fade-trigger {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s ease-out;
}
.fade-trigger.show {
opacity: 1;
transform: translateY(0);
}


.kv{margin-top: 116px; position: relative;} /* 2026-10 ヘッダー高さ116に合わせた */
/* KV下の柄の帯（2026-10 band_about.jpg に差し替え。URLは page-top.php で tkd_img が出す）横100%・高さは画像の比率 2880×250 */
.kv .bg{width: 100%; aspect-ratio: 2880 / 250; background: no-repeat center / 100% auto;}
.kv .bg2{width: 100%; height: 90px; background: #fff;}

@media screen and (max-width: 750px) {
.kv{margin-top: 70px; position: relative;}
}


.contact{max-width: 1110px; width: 90%; margin: 200px auto 0; padding-bottom: 200px;}
.contact h2{font-size: 65px;text-align: center; margin-bottom: 50px;}

/* 2026-10-19 PCのCONTACTだけ 0.8倍にする。
   旧サイトは1500px以下で画面全体を transform: scale(0.8) で縮めて表示していたため、本番の見た目は下の数値の0.8倍。
   今回のリニューアルで1440を等倍表示にしたので、このセクションだけ本番と同じ大きさに戻す（ヘッダー・フッターは新しい等倍のまま） */
@media screen and (min-width: 751px) {
.contact{zoom: 0.8;}
}

@media screen and (max-width: 750px) {
.contact{margin: 120px auto 0; padding-bottom: 50px;}
.contact h2{font-size: 30px; text-align: center; margin-bottom: 30px;}
}

footer{background: #000; padding: 15px;} /* 2026-10 高さ68（y10751〜10818） */
footer p{font-size: 17px; line-height: 38px; letter-spacing: 0.065em; text-align: center;font-family: "futura-pt", sans-serif; font-weight: 500;}

@media screen and (max-width: 750px) {
footer p{font-size: 12px;}
}


header{width: 100%; position: fixed; top: 0; z-index: 100; /* 本文の重なり（EVENT の唇 z-index:3 など）より必ず上に */ height: 116px;}




#btn {
  display: none;
}


/* --- ヘッダー（PC）2026-10 イラレ1440基準の実測で組み直し ---
   ナビ文字 上端y55・26px／白線 y101〜106（6px）／ピンク地は y116 まで（＝KVの開始位置）
   RESERVATIONS 白箱 x1124〜1402・y101〜162／SNS y178〜 */
nav {
  position: fixed; z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background:#EB20A9;
  padding-bottom: 10px;
}
nav a {
  font-size: 26px;
  line-height: 31px;
  letter-spacing: 0;
  color: #fff;
}
/* 1440より広い画面でも枠で囲まない：ロゴは画面の左端から、メニュー・RESERVATIONS・SNSは右端から（既存サイトと同じ。2026-10-19 たもつ） */
nav .box{position: relative; padding: 0 38px 0 245px;}
nav .nav-links{display: flex; justify-content: flex-end; padding: 55px 0 15px; border-bottom: 6px solid #fff;}
nav .nav-links a + a{margin-left: 30px;}
/* 2026-10-21 CONTACT を追加して8項目に。26px・間35pxだと1440でロゴに食い込み2行に折れるため、22px・間30pxに（1440でロゴとの間が約55px）。折り返しも禁止 */
nav .nav-links a{font-size: 22px; white-space: nowrap;}

nav a.re{position: absolute; right: 38px; top: 101px; background: #fff; padding: 19px 23px 18px; line-height: 0;}
nav a.re img{width: 232px;}

nav .box .logo{width: 210px; position: absolute; left: 40px; top: 45px;}
/* SNS：画像の白い角丸は画像幅の約63%（外側は光彩）。白い角丸の中心 x1301.5／1370.5・y208.5 に合わせる */
nav .box .sns-box{display: flex; position: absolute; right: 28px; top: 167px;}
nav .box .sns-box a{ width: 83px;}
nav .box .sns-box a + a{ margin-left: -14px;}
nav .box .logo img:hover { opacity: 1}
nav .logo a:hover{
border-bottom: none;
}

header .logo a:hover{opacity: 1;}


@media screen and (max-width: 750px) {
header{height: 70px; position: fixed; z-index: 100; top: 0;background:#EB20A9;}
header .logo{width: 100px; display: flex; align-items: center; height: 70px;margin: 0 auto; padding-left: 0;}
nav{margin-top: 0; display: block; border: none; background:#EB20A9; padding: 0;}
nav .box{display: block; padding:0 20px; margin: 0 auto;height: 70px;width: 100%;border-bottom:none; }
nav .box .sns-box{display: flex; justify-content: center; align-items: center; position:relative; right: auto; top: auto; width: 200px; margin: 0 auto;}
nav .box .sns-box a{ width: 70px; margin: 0 auto;}
nav::before{display: none;}
  #btn {
    position: fixed;
    top: 12px;
    right: 10px;
    width: 44px;
    height: 44px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
  }
  #btn span {
    display: block;
    background-color: #fff;
    width: 36px;
    height: 2px;
    transition: all 0.5s ease;
  }
  #btn.on span {
    background-color: #fff;
  }
  #btn.on span:nth-of-type(1) {
    transform: translateY(11px) rotate(45deg);
  }
  #btn.on span:nth-of-type(2) {
    transform: scale(0);
  }
  #btn.on span:nth-of-type(3) {
    transform: translateY(-12px) rotate(-45deg);
  }
  nav {
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    transition: all 0.5s ease;
    top: -130vh;
    height: 100vh;
  }
  nav.on {
    top: 0;
    height: 100vh;
    overflow-x: scroll;
  }
  nav a {
    margin: 50px auto;
    display: block;
    text-align: center;
    font-size: 20px;
    border: none;
  }
}


/* 2026-10-19 751〜1439px は画面幅に合わせてなめらかに縮小する（倍率 = 画面幅 ÷ 1440）
   倍率は header.php の短いスクリプトが html の zoom に入れる。
   旧方式は transform: scale で 0.8／0.7／0.5 の3段階だったため、境目でガクッと縮み、左右に余白が出ていた。
   zoom は transform と違ってレイアウトごと縮むので、スクロールの長さやアンカー位置がずれない */



.wpcf7 dl{display:flex; flex-wrap: wrap;}
.wpcf7 dt{width: 18%; text-align: right; margin-right: 2%; margin-bottom: 40px;font-size: 27px}
/* 2026-10-21 PHONE NUMBER 追加。ラベル列(18%)に収まらないので、右揃えのまま左へはみ出させる（デザインもそうなっている）。
   CF7 がラベルを <p> で包む／text-align:right だと溢れた分は右に出るので、flex の右寄せで左へ溢れさせる。SP は縦積みなので PC のみ */
@media screen and (min-width: 751px) {
.wpcf7 dt{display: flex; justify-content: flex-end;}
.wpcf7 dt p{white-space: nowrap;}
}
.wpcf7 dd{width: 80%;margin-bottom: 40px; padding-right: 16.5%;}

.wpcf7 input{border: 1px solid #fff; background: none; padding:10px; width: 100%;font-size: 18px; color: #fff;outline:none;font-family: "futura-pt", sans-serif;font-weight: 500;}
.wpcf7 textarea{border: 1px solid #fff; background: none; padding: 10px;width: 100%;font-size: 18px;height: 350px;color: #fff;outline:none;font-family: "futura-pt", sans-serif;font-weight: 500;}
.wpcf7 input.wpcf7-submit{font-size: 27px; color: #fff;font-family: "gravesend-sans", sans-serif; cursor: pointer;}

.wpcf7 input[type="checkbox"]{height: 30px; width: 30px;border: 1px solid #fff; background: none; margin-right: 10px;outline:none!important;}
.wpcf7 input[type="checkbox"]:focus {outline: none;}
.wpcf7 .wpcf7-list-item{display: flex; align-items: center;font-family: "futura-pt", sans-serif;font-weight: 500; margin: 0;}

.wpcf7-not-valid-tip{color: #fff;font-family: "futura-pt", sans-serif;font-weight: 500; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{color: #fff; border: none;font-family: "futura-pt", sans-serif;font-weight: 500; padding-left: 20%;}
.wpcf7 form.sent .wpcf7-response-output{color: #fff; text-align: center; border: none;font-family: "futura-pt", sans-serif;font-weight: 500;}
.wpcf7 .wpcf7-spinner {display: none;}


@media screen and (max-width: 750px) {
.wpcf7 dl{display:block;}
.wpcf7 dt{width: 100%; text-align: left; margin-right:0%; margin-bottom: 10px;font-size: 18px}
.wpcf7 dd{width: 100%;margin-bottom: 40px; padding-right:0;}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{padding-left: 0;}

}


/* =========================================================
   2026-10 リニューアル（PC・1440px基準）エスパ
   数値はすべて TOKIODELIC_2608修正++.ai（1ページ目 1440×10819）の実測。
   コメントの y は イラレ上の絶対座標。
   1440pxより広い画面：中身は1440で中央寄せ／柄の帯は横100%／画面の端に付く白枠（FOOD・DRINK）は端まで伸ばす（2026-10-19 たもつ確定）
   ========================================================= */

.l-inner{position: relative; max-width: 1440px; margin: 0 auto;}
section[id]{scroll-margin-top: 116px;} /* 固定ヘッダーの高さぶん、アンカー位置をずらす */

/* 柄の帯（横100%・高さは画像の比率まかせ。1440より広い画面でも横いっぱい） */
.c-band{width: 100%;}
.c-band img{display: block;}

/* 白い帯の小見出し（SQUARE SUSHI など）白帯 x88〜1351・高さ41 */
.c-subbar{margin: 0 88px; background: #fff; color: #EB20A9; font-family: "gravesend-sans", sans-serif; font-weight: 700; font-size: 47px; line-height: 41px; letter-spacing: 0.015em; padding-left: 68px; position: relative; white-space: nowrap;}
.c-subbar span{display: block; position: relative; top: -2px;}
.c-subbar::before{content: ''; position: absolute; left: 17px; top: 7px; width: 44px; aspect-ratio: 88 / 54; background: no-repeat center / 100% auto; /* 画像URLは page-top.php で指定 */}

/* 二重線のボタン（外3px・内2px・内側の線は外から13px内側） */
.c-btn{display: inline-flex; justify-content: center; align-items: center; position: relative; border: 3px solid #fff; border-radius: 999px; color: #fff; font-family: "gravesend-sans", sans-serif; font-weight: 700; font-size: 31px; line-height: 37px; letter-spacing: 0.01em; padding: 26px 0; text-align: center; white-space: nowrap;}
.c-btn::before{content: ''; position: absolute; inset: 9px; border: 2px solid #fff; border-radius: 999px; pointer-events: none;}
/* 小さい方（VIEW ALL EVENTS）外2px・内2px・高さ79 */
.c-btn--s{border-width: 2px; font-size: 32px; line-height: 39px; padding: 18px 0;}
.c-btn--s::before{inset: 9px;}

/* リップの区切り（白3つ） */
.c-lips img{display: block;}

/* 白い大見出しの枠（FOOD MENU／DRINK MENU）枠線6px */
.c-titlebox{position: relative; z-index: 1; background: #EB20A9; border: 6px solid #fff;}
.c-titlebox--left{border-left: none; width: 955px;}
.c-titlebox--right{border-right: none; margin-left: 498px;}
/* 1440より広い画面では、枠の欠けている側を画面の端まで伸ばす（デザインでは枠が画面の端に付いている）
   はみ出し量 = (画面幅 − 1440) ÷ 2。1440以下では 0 になる */
@media screen and (min-width: 1441px){
	.c-titlebox--left{margin-left: calc((1440px - 100vw) / 2); width: calc(955px + (100vw - 1440px) / 2);}
	.c-titlebox--right{margin-right: calc((1440px - 100vw) / 2);}
}

/* スライダーの矢印と点 */
.c-slnav{position: absolute; left: 0; right: 0; display: flex; justify-content: center; align-items: center;}
/* slick-theme.css の既定（点の位置・•の文字・下余白30px）を打ち消す */
.about__card .slick-dotted.slick-slider, .event__arch .slick-dotted.slick-slider{margin-bottom: 0;}
.c-slnav .c-slnav__arrow--prev{order: 1;}
.c-slnav .slick-dots{order: 2; position: static; display: flex; align-items: center; width: auto; bottom: auto;}
.c-slnav .slick-dots li{width: auto; height: auto; margin: 0;}
.c-slnav .slick-dots li button:before{display: none;}
.c-slnav .c-slnav__arrow--next{order: 3;}
.c-slnav__arrow{display: block; padding: 0; border: none; background: none; cursor: pointer; line-height: 0;}
.c-slnav__arrow svg{width: 100%; height: auto; fill: #fff; stroke: #fff; stroke-width: 3; stroke-linejoin: round;}
.c-slnav__arrow--prev svg{transform: scaleX(-1); opacity: 0.5;}
.c-slnav .slick-dots li{line-height: 0;}
.c-slnav .slick-dots button{display: block; padding: 0; border: none; border-radius: 50%; background: #fff; font-size: 0; cursor: pointer; opacity: 0.5;}
.c-slnav .slick-dots .slick-active button{opacity: 1;}
/* ABOUT：点8px・間隔35.5・中心は下端から48px（y2192） */
.c-slnav--about{bottom: 25px;}
.c-slnav--about .c-slnav__arrow{width: 26px;}
.c-slnav--about .slick-dots{margin: 0 21px;}
.c-slnav--about .slick-dots li + li{margin-left: 27px;}
.c-slnav--about .slick-dots button{width: 8px; height: 8px;}
/* EVENT：点10px・間隔45・中心はy7110 */
.c-slnav--event{bottom: 27px;}
.c-slnav--event .c-slnav__arrow{width: 32px;}
.c-slnav--event .slick-dots{margin: 0 31px;}
.c-slnav--event .slick-dots li + li{margin-left: 35px;}
.c-slnav--event .slick-dots button{width: 10px; height: 10px;}

/* 本文（Futura PT 25px） */
/* Futura PT はイラレの Futura Medium より字幅が約6%狭い。実測で字送りを足して幅を合わせる（ブロックごとに実測） */
.about__txt, .event__desc, .private__txt, .menu-list__name{font-family: "futura-pt", sans-serif; font-weight: 500; letter-spacing: 0.065em;}


/* ---------- ABOUT ---------- */
/* 見出し枠 x746〜1370・y1274〜1368（白帯 y1202〜1292 に18px食い込む）。ABOUT US 画像は y1205〜1350 */
.about__titlebox{position: relative; z-index: 1; width: 624px; margin: -18px 0 0 746px; padding-bottom: 13px; background: #EB20A9; border: 5px solid #fff;}
/* 書き出し 1159×253（2x）→ 表示580。文字の位置はイラレ x834・y1228 */
.about__title{width: 580px; margin: -51px 0 -5px 83px;}
.about__title img{display: block;}
/* TOKYO FOOD… 51px（文字の上端 y1397） */
.about__lead{margin-top: 28px; font-size: 51px; line-height: 61px; text-align: center; letter-spacing: 0; white-space: nowrap;}
.about__body{display: flex; align-items: flex-start; margin-top: 48px;}
/* 写真カード x61〜793・y1506〜（白枠6px・角丸） */
.about__card{position: relative; width: 733px; margin-left: 61px; border: 6px solid #fff; border-radius: 30px; overflow: hidden; background: #fff;}
/* slick が足す inline-block の包みでできる下のすき間を消す */
.about__slider .slick-slide div, .event__slider .slick-slide div{vertical-align: top; line-height: 0;}
.about__slider img{display: block; aspect-ratio: 1 / 1; object-fit: cover;}
/* 本文 x863・幅503・行送り36 */
.about__right{width: 503px; margin-left: 69px; padding-top: 6px;}
.about__txt{font-size: 25px; line-height: 36px; white-space: nowrap;}
/* READ MORE x991〜1351・y2205〜2299 */
.about__more{width: 361px; margin: 45px 0 0 128px; font-size: 39px; line-height: 37px;}
/* リップ区切り x455〜985・y2394 */
.about__lips{width: 536px; margin: 95px 0 0 452px;} /* 書き出し 1072×90 の1x。中心は据え置き */


/* ---------- FOOD ---------- */
/* 柄の帯 y2546〜2830 */
.food{margin-top: 108px;}
/* FOOD MENU 枠 y2782〜2892（帯に48px重なる）。画像 x85〜890・y2715〜2880 */
.food__titlebox{margin-top: -48px; padding-bottom: 6px;}
/* 書き出し 1608×293 → 表示804。イラレ x88・y2743 */
.food__title{width: 804px; margin: -45px 0 -10px 88px;}
.food__title img, .drinks__title img, .event__title img, .private__title img, .location__title img{display: block;}

/* 料理の並び */
.menu-block{margin-top: 46px;}
.menu-block--bites{margin-top: 48px;}
.drinks .menu-block--mocktail{margin-top: 41px;} /* イラレでは前の段との間隔が狭い */
.food__titlebox + .menu-block, .drinks__titlebox + .menu-block{margin-top: 45px;}
/* 各皿の幅と横位置は page-top.php の $food_menu（イラレの中心x）から li の style に出している */
.menu-list{display: flex; align-items: flex-start;}
.menu-list li{flex: none; text-align: center;}
.menu-list__img img{display: block; width: 100%;}
/* 料理名は皿より広いことがある（Shinjuku Old Fashion など）ので、左右にはみ出させて中央を保つ */
.menu-list__name{position: relative; margin: 8px -100px 0; font-size: 25px; line-height: 29px; white-space: nowrap;}
/* 段ごと：白帯の下〜画像の上端（--gap）、画像の下端〜料理名（--name）。イラレの実測 */
.menu-block--sushi{--gap: 34px; --name: 14px;}
.menu-block--bites{--gap: 46px; --name: 12px;}
.menu-block--comfort{--gap: 28px; --name: 16px;}
.menu-block--sweets{--gap: 33px; --name: -2px;}
.menu-block--cocktail{--gap: 50px; --name: 47px;}
.menu-block--mocktail{--gap: 42px; --name: 13px;}
.menu-list{margin-top: var(--gap, 22px);}
.menu-list__name{margin-top: var(--name, 8px);}


/* ---------- DRINKS ---------- */
/* DRINK MENU 枠 x498〜・y4727〜4837。画像 x555〜1395・y4655〜4830 */
.drinks__titlebox{margin-top: 82px; padding-bottom: 1px;}
/* 書き出し 1683×294 → 表示842。イラレ x556・y4688 */
.drinks__title{width: 842px; margin: -45px 0 -5px 52px;}
/* MENU BOOK ボタン y5963〜6057 */
.drinks__foot{position: relative; display: flex; margin-top: 102px; padding-left: 103px;}
.drinks__book--lunch{width: 380px;}
.drinks__book--dinner{width: 389px; margin-left: 20px;}
.drinks__lips{position: absolute; left: 1116px; top: 28px; width: 201px;}


/* ---------- EVENT ---------- */
/* 柄の帯 y6188〜6578（390） */
.event{margin-top: 130px;}
/* 帯の上に重ねる（帯の高さぶん戻す） */
.event__stage{position: relative; margin-top: -390px; padding-top: 68px;} /* 見出しの上42pxは padding（margin だと親の外に抜けて基準がずれる） */
/* 書き出し 954×319 → 表示477。イラレ x481・y6256 */
.event__title{position: relative; z-index: 2; width: 477px; margin-left: 481px;}
/* アーチ x380〜1059・y6370〜7156（白枠5px） */
.event__arch{position: relative; z-index: 1; width: 680px; margin: -46px 0 0 380px; border: 5px solid #fff; border-radius: 50% 50% 0 0 / 200px 200px 0 0; overflow: hidden; background: #fff;}
.event__slider img{display: block; aspect-ratio: 670 / 776; object-fit: cover;}

.event__item{position: absolute; z-index: 3;}
.event__item--sake{left: 62px; top: 282px; width: 310px;}
.event__item--karaoke{left: 1044px; top: 487px; width: 360px;}
.event__item--special{left: 69px; top: 771px;}

/* 色リップ：形（白フチ・下の白い厚みごと）は画像 661×443 → 表示331、文字はWebフォント */
.c-liplabel{position: relative; display: block; color: #fff;}
.c-liplabel img{display: block;}
.c-liplabel span{position: absolute; left: 0; right: 0; font-family: "gravesend-sans", sans-serif; font-weight: 700; font-size: 37px; line-height: 32px; letter-spacing: 0.01em; text-align: center;}
.c-liplabel--purple, .c-liplabel--orange, .c-liplabel--green{width: 331px;}
.c-liplabel--purple{margin-left: 20px;} /* 紫の唇は x82、下の文字は x62 から */
.c-liplabel--purple span{top: 71px; padding-left: 5px;}
.c-liplabel--orange span{top: 57px; padding-left: 4px;}
.c-liplabel--green span{top: 76px; padding-left: 6px;}
/* VIEW MORE（斜め27°） 外接 x1250〜1403・y6626〜6719 */
.event__viewmore{position: absolute; left: 282px; top: -2px; transform: translate(-50%, -50%) rotate(27deg); font-style: normal; font-family: "futura-pt", sans-serif; font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap;}

/* aiは Futura Bold。kit に futura-pt 700 を追加済み（2026-10-19 たもつ。太すぎたら 600） */
.event__when{font-family: "futura-pt", sans-serif; font-weight: 700; font-size: 26px; line-height: 29px; letter-spacing: 0.02em;}
.event__desc{font-size: 25px; line-height: 36px; letter-spacing: 0.03em;}
.event__select .event__desc{letter-spacing: 0.01em;}
.event__item--sake .event__when{margin-top: 26px;}
.event__item--sake .event__desc{margin-top: 8px;}
.event__item--karaoke .event__when{margin: 13px 0 0 57px;}
.event__item--karaoke .event__desc{margin: 10px 0 0 58px;}

/* SELECT DATES y7196 */
.event__select{display: flex; margin-top: 40px; padding-left: 46px;}
.event__select .event__when{width: 204px; padding-top: 3px;}

/* UPCOMING EVENTS 白線 x122〜1317・y7343〜7363 */
.upcoming__title{position: relative; margin-top: 49px; text-align: center; font-family: "gravesend-sans", sans-serif; font-weight: 700; font-size: 63px; line-height: 63px; color: #EB20A9; letter-spacing: 0.048em;}
.upcoming__title::before{content: ''; position: absolute; left: 122px; right: 123px; top: 50%; height: 21px; margin-top: -10px; background: #fff;}
.upcoming__title span{position: relative; top: -2px; -webkit-text-stroke: 6px #fff; paint-order: stroke fill;} /* 後ろの白線に対して天地中央に見えるよう2px上げ（2026-10-19 たもつ） */
/* 枠 287角・白9px・間隔58 y7411〜7697 */
.upcoming__list{display: flex; justify-content: center; margin-top: 31px;}
.upcoming__item{width: 287px; aspect-ratio: 1 / 1; border: 9px solid #fff; overflow: hidden;}
.upcoming__item + .upcoming__item{margin-left: 58px;}
.upcoming__item a, .upcoming__item img{display: block; width: 100%; height: 100%; object-fit: cover;}
/* ピックアップ（2026-10-26 先方追加依頼）: 3枠の上に1件だけ縦長 4:5 で大きく。幅は先方イメージの比（3枠全体に対して約0.65）から 638px */
.upcoming__pickup{width: 638px; aspect-ratio: 4 / 5; margin: 31px auto 0; border: 9px solid #fff; overflow: hidden;}
.upcoming__pickup a, .upcoming__pickup img{display: block; width: 100%; height: 100%; object-fit: cover;}
.upcoming__list--afterpick{margin-top: 58px;}
/* VIEW ALL EVENTS x527〜912・y7734〜7812 */
.upcoming__more{margin-top: 37px; text-align: center;}
.upcoming__more .c-btn{width: 386px;}


/* ---------- PRIVATE EVENTS ---------- */
/* PRIVATE EVENTS 画像 x50〜1045・y7885〜8005 */
.private{margin-top: 72px;}
/* 書き出し 1970×268 → 表示985。イラレ x50・y7874 */
.private__title{position: relative; z-index: 2; width: 985px; margin: -11px 0 0 50px;}
/* 動画の枠（2026-10-20 先方修正。デザインは横1920で来たので ×0.75 で1440に換算）
   外寸 x896〜1355（幅460）・タイトル上端から +135〜+947。白枠6px・上の左右だけ角丸。中身は縦長 9:16（素材 360×640） */
.private__photo{position: absolute; left: 896px; top: 154px; width: 460px; border: 6px solid #fff; border-radius: 52px 52px 0 0; overflow: hidden; background: #000;}
.private__photo video{display: block; width: 100%; height: 801px; object-fit: cover;}
/* 左の文字の塊は 2026-10-20 デザインで右へ +51・下へ +81 */
.private__body{padding-left: 108px;}
/* CELEBRATE AT TOKIODELIC 45px y8025 */
.private__lead{margin-top: 98px; font-size: 45px; line-height: 54px; letter-spacing: 0.045em; white-space: nowrap;}
/* 箇条書き 33px・行送り47・リップの点 28×18 */
.private__list{margin-top: 33px; padding-left: 5px; font-family: "futura-pt", sans-serif; font-weight: 500; font-size: 33px; line-height: 47px; letter-spacing: 0.06em;}
.private__list span{display: inline-block;}
.private__list span::before{content: ''; display: inline-block; width: 30px; aspect-ratio: 59 / 37; margin-right: 8px; background: no-repeat center / 100% auto; /* 画像URLは page-top.php で指定 */ vertical-align: 2px;}
.private__list span + span{margin-left: 20px;}
.private__txt{margin-top: 13px; padding-left: 2px; font-size: 25px; line-height: 36px; letter-spacing: 0.01em;} /* この段だけイラレの字送りが詰まっている */
/* PLAN YOUR EVENT… 枠 x107〜578（2026-10-20 デザインで左寄せに。文字の塊の左端と揃う） */
.private__plan{display: inline-block; margin: 38px 0 0 0; padding: 0 11px 0 13px; border: 3px solid #fff; font-size: 26px; line-height: 31px; letter-spacing: 0.013em;}
/* リップボタン：書き出し 543×369（左右に透明の余白22px）→ 表示272。OpenTable x157・CONTACT x415・y8459 */
.private__btns{display: flex; margin: 62px 0 0 100px;} /* 2026-10-20 デザインで枠との間が +54 */
.private__btns .c-lipbtn + .c-lipbtn{margin-left: -14px;}
.c-lipbtn{display: block; width: 272px;}
.c-lipbtn img{display: block;}
/* リップ区切りは 2026-10-20 デザインで削除（page-top.php からも外した） */


/* ---------- LOCATION ---------- */
/* 柄の帯 y8724〜9113 */
.location{margin-top: 160px;} /* 2026-10-20 動画の枠が縦長になり、ボタンから柄の帯まで +76 */
/* 書き出し 1304×285 → 表示652。イラレ y8832。原稿は LACATION なので、文字の中心をイラレ（x717.5）に合わせて x392 */
.location__title{width: 652px; margin: -284px 0 0 392px;}
/* 白い表 x196〜1243（幅1048）・各段の間8px */
.location__info{position: relative; width: 1048px; margin: 19px 0 0 196px; color: #EB20A9; font-family: "futura-pt", sans-serif; font-weight: 500;}
.location__row{display: flex; background: #fff; font-size: 39px; line-height: 53px; letter-spacing: 0.03em; padding-left: 22px;}
.location__row dt, .location__label{letter-spacing: 0.06em;}
.location__row + .location__row{margin-top: 7px;}
.location__row dt, .location__label{display: flex; align-items: center;}
.location__row dt{width: 343px;}
/* アイコン（SVG）電話 x220・32px／時計 x221・31px。文字は x263 から */
.location__icon--phone{width: 32px; margin: 0 9px 0 2px;}
.location__icon--clock{width: 31px; margin: 0 9px 0 3px;}
.location__row--noicon dt{padding-left: 43px;} /* Location の行はアイコン無し（イラレ原稿どおり）。文字の位置だけ揃える */
.location__row dd a{color: #EB20A9;}
.location__row--hours{display: block; padding-bottom: 11px;}
.location__hours{margin: 2px 0 0 45px; font-size: 30px; line-height: 47px; letter-spacing: 0.05em; text-align: left;}
.location__hours th{width: 155px; font-weight: 500; text-align: left; vertical-align: top;}
.location__hours td{white-space: nowrap;}
/* RESERVE 丸 x1158〜1358・y9298 */
/* 書き出し 371×371 → 表示186。イラレ x1172・y9310 */
.location__reserve{position: absolute; left: 976px; top: 316px; width: 186px;}
.location__reserve img{display: block;}
/* リップ区切り x619・y9523 */
.location__lips{width: 201px; margin: 107px 0 0 619px;}
/* リップボタン x288／604／920・y9693 */
/* Instagram x268・OpenTable x584（y9676）・Order Online x922（y9695・書き出し 455×283 → 表示228） */
.location__btns{display: flex; align-items: flex-start; margin: 115px 0 0 268px; padding-bottom: 118px;}
.location__btns .c-lipbtn + .c-lipbtn{margin-left: 44px;}
.location__btns .c-lipbtn + .c-lipbtn--order{width: 228px; margin: 19px 0 0 66px;}


/* ---------- OUR PRODUCER（2ページ目 1440×1224）---------- */
.producer{padding: 235px 0 142px;}
.producer .inner{display: flex; align-items: flex-start; max-width: 1440px; margin: 0 auto;}
.producer .left{width: 503px; margin-left: 201px;}
/* OUR PRODUCER 画像 x195〜880・y235〜315（写真に重なる） */
.producer h2{position: relative; z-index: 1; width: 685px; margin-left: -6px; margin-bottom: -16px;} /* 書き出し(1365×191)は下に約16pxの余白があるぶん詰める */
/* PRODUCER／Sebastian Masuda 35px・行送り38・下線2px 幅352 */
.producer h3{display: inline-block; width: 352px; margin-top: 27px; padding-bottom: 5px; border-bottom: 2px solid #fff; font-family: "futura-pt", sans-serif; font-weight: 500; font-size: 35px; line-height: 38px; letter-spacing: 0.065em;}
.producer p{margin-top: 25px; font-family: "futura-pt", sans-serif; font-weight: 500; font-size: 25px; line-height: 30.7px; letter-spacing: 0.065em; white-space: nowrap;}
/* 写真 x740〜1238・y262〜 */
.producer .right{width: 499px; margin: 27px 0 0 36px;}
.producer .right img{display: block;}


/* ---------- COMING SOON ---------- */
/* 本文が短いページでもフッターを画面下に置くため min-height を使う（ヘッダー116＋フッター68） */
.coming{display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: calc(100vh - 68px); padding: 176px 20px 60px;}
.coming__logo{width: 400px;}
.coming__txt{margin-top: 60px; font-size: 65px; line-height: 1.2; letter-spacing: 0; text-align: center;}


/* ---------- EVENTS 一覧（2026-10-21 新規。イラレ TOKIODELIC_261020修正 7ページ目・1920幅 → ×0.75 で1440換算）---------- */
/* 見出し EVENT：文字の外形 x695〜1202・y288〜409（1920）→ 幅 380・上 216（1440）。画像は左右に余白があるので、文字の外形が約380になる幅（実測 396→外形387）にする */
.events{padding: 196px 0 160px;} /* 下はイラレだと空きが約540あるが、アートボードの余りと見て詰めている（判断待ち） */
.events__title{width: 396px; margin: 0 auto;}
.events__title img{display: block;}
/* カード：外形 524×653（1920）→ 393×490（1440）＝ 4:5。左右の余白 67・列の間 64・段の間 57。白枠はトップのカードと同じ 9px */
.events__list{display: grid; grid-template-columns: repeat(3, 393px); justify-content: center; column-gap: 64px; row-gap: 57px; margin-top: 32px;}
.events__item{aspect-ratio: 4 / 5; border: 9px solid #fff; overflow: hidden;}
.events__item a, .events__item img{display: block; width: 100%; height: 100%; object-fit: cover;}


/* =========================================================
   SP（750px以下）2026-10-19 エスパ
   SPデザインは無い（先方は作らない）。PCデザインをスマホ向けにコードで最適化したもの。
   基準は 375px 幅・左右の余白 20px（--g）。画像は PC の 2x 書き出しを幅％で流用。
   PC（751px以上）のルールには一切触れない。ここより上の PC ルールを上書きするだけ。
   PHP の style 属性（皿の幅・位置）は PC 専用の値なので、SP では !important で打ち消す。
   ========================================================= */
@media screen and (max-width: 750px) {
:root{--g: max(20px, (100vw - 560px) / 2);} /* 左右の余白。基本20px、幅が広い端末（〜750）では中身を560pxに収めて中央寄せ */
.u-pcbr{display: none;} /* 文の途中の改行は PC の行送り合わせ専用。SP は自然に折り返す */

/* ---------- ヘッダー（ハンバーガー）---------- */
nav .box{height: auto; padding: 90px var(--g) 40px;}
nav .nav-links{display: block; padding: 0; border: none;}
nav .nav-links a{margin: 0 auto; padding: 14px 0; font-size: 20px; line-height: 24px;}
nav .nav-links a + a{margin-left: auto;}
nav a.re{position: static; display: table; margin: 24px auto 0; padding: 14px 17px 13px; background: #fff; line-height: 0;} /* PC と同じ白い箱（PC の 0.75倍） */
nav a.re img{width: 174px;}
nav .box .sns-box{margin-top: 20px;}
nav .box .sns-box a{width: 64px; margin: 0;}
nav .box .sns-box a + a{margin-left: -8px;}
section[id]{scroll-margin-top: 70px;}

/* ---------- 共通 ---------- */
.l-inner{overflow-x: clip;} /* 念のため（横スクロールを出さない） */
.c-subbar{margin: 0 var(--g); font-size: 19px; line-height: 28px; letter-spacing: 0.015em; padding-left: 40px; white-space: normal;}
.c-subbar span{top: -1px;}
.c-subbar::before{left: 9px; top: 6px; width: 25px;}
.c-btn{border-width: 2px; font-size: 18px; line-height: 22px; padding: 15px 0;}
.c-btn::before{inset: 5px; border-width: 1.5px;}
.c-btn--s{font-size: 16px; line-height: 20px; padding: 13px 0;}
.c-btn--s::before{inset: 5px;}
.c-titlebox{border-width: 3px;}
.c-titlebox--left{border-left: none; width: 88%;}
.c-titlebox--right{border-right: none; margin-left: 12%;}
.about__txt, .event__desc, .private__txt, .menu-list__name{letter-spacing: 0.03em;}

/* スライダーの矢印と点（PCの約0.55倍） */
.c-slnav--about{bottom: 12px;}
.c-slnav--about .c-slnav__arrow, .c-slnav--event .c-slnav__arrow{width: 18px;}
.c-slnav--about .slick-dots, .c-slnav--event .slick-dots{margin: 0 14px;}
.c-slnav--about .slick-dots li + li, .c-slnav--event .slick-dots li + li{margin-left: 14px;}
.c-slnav--about .slick-dots button, .c-slnav--event .slick-dots button{width: 7px; height: 7px;}
.c-slnav--event{bottom: 14px;}

/* ---------- ABOUT ---------- */
/* 見出し枠は PC と同じく右寄せ・KV下の帯に少し食い込む。ABOUT US の画像は枠の上にはみ出す */
.about__titlebox{width: 72%; margin: -8px var(--g) 0 auto; padding-bottom: 6px; border-width: 3px;}
.about__title{width: 96%; margin: -9% 0 -2% 8%;}
.about__lead{margin-top: 22px; padding: 0 var(--g); font-size: 18px; line-height: 25px; letter-spacing: 0.02em; white-space: normal;}
.about__body{display: block; margin-top: 22px;}
.about__card{width: auto; margin: 0 var(--g); border-width: 4px; border-radius: 20px;}
.about__right{width: auto; margin: 22px var(--g) 0; padding: 0;}
.about__txt{font-size: 15px; line-height: 1.6; white-space: normal;}
.about__more{display: flex; width: 240px; margin: 28px auto 0;}
.about__lips{width: 64%; max-width: 300px; margin: 44px auto 0;}

/* ---------- FOOD ---------- */
.food{margin-top: 56px;}
.food__titlebox{margin-top: -18px; padding-bottom: 3px;}
.food__title{width: 90%; margin: -6% 0 -1% 5%;}
.menu-block, .menu-block--bites, .drinks .menu-block--mocktail, .food__titlebox + .menu-block, .drinks__titlebox + .menu-block{margin-top: 30px;}
/* 2列のグリッド（3品は 2＋1 で中央）。皿の幅・位置・ずらしは PC 用の style 属性なので打ち消す */
.menu-list{flex-wrap: wrap; justify-content: center; gap: 18px 16px; margin: 18px var(--g) 0;}
.menu-list li{width: calc((100% - 16px) / 2) !important; margin-left: 0 !important;}
.menu-list__img{transform: none !important; margin: 0 auto;}
.menu-list__name{left: 0 !important; margin: 4px 0 0; font-size: 14px; line-height: 18px; white-space: normal;}
/* 皿の画像は段ごとにキャンバスの余白が違うので、見た目の大きさが揃うよう幅を調整 */
.menu-block--cocktail .menu-list__img{width: 74%;}
.menu-block--mocktail .menu-list__img{width: 90%;}
.menu-block--sweets .menu-list__img{width: 92%;}
/* モチケーキ（3品目）はキャンバスの上下に約25%ずつ透明の余白があり、1品だけの段で上がぽっかり空くので詰める（2026-10-19 たもつ）
   margin の % は横幅基準。キャンバス 621×745 なので、高さの約18% ≒ 横幅の22% */
.menu-block--sweets li:nth-child(3) .menu-list__img{margin-top: -22%; margin-bottom: -16%;}

/* ---------- DRINKS ---------- */
.drinks__titlebox{margin-top: 50px; padding-bottom: 1px;}
.drinks__title{width: 92%; margin: -6% 0 -1% 4%;}
/* MENU BOOK：横並びだと文字が14px未満になるので縦に積む */
.drinks__foot{display: block; margin-top: 40px; padding: 0 var(--g);}
.drinks__book--lunch, .drinks__book--dinner{display: flex; width: 100%; max-width: 300px; margin: 0 auto;}
.drinks__book--dinner{margin-top: 12px;}
.drinks__lips{position: static; width: 100px; margin: 40px auto 0;}

/* ---------- EVENT（SP）唇3つをアーチの下に横一列、説明はその下にまとめる（2026-10-19 オーナー決定。縦に並べる案Aは廃止）---------- */
.event{margin-top: 64px;}
/* 帯の上に見出しを重ねる（帯の高さ＝幅の 390/1440。そのうち 70% ぶん戻す） */
.event__stage{display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 6px; margin-top: -19%; padding: 0 var(--g);}
.event__title, .event__arch{grid-column: 1 / -1;}
.event__title{width: 62%; margin: 0 auto;}
.event__arch{width: auto; margin: -6% 0 0; border-width: 3px; border-radius: 50% 50% 0 0 / 100px 100px 0 0;}
.event__item{display: contents;} /* 唇と説明を別々の段に置くため、包みを外す */
.event__stage .c-liplabel{grid-row: 3; width: 100%; margin: 22px 0 0;}
.event__item--sake .c-liplabel{grid-column: 1;}
.event__item--karaoke .c-liplabel{grid-column: 2;}
.event__item--special .c-liplabel{grid-column: 3;}
/* 唇の中の文字（Webフォント）。位置は唇の高さに対する％ */
.c-liplabel span{font-size: 12px; line-height: 11px;}
.c-liplabel--purple span{top: 32%; padding-left: 2px;}
.c-liplabel--orange span{top: 25%; padding-left: 2px;}
.c-liplabel--green span{top: 34%; padding-left: 3px;}
.event__viewmore{display: none;} /* 斜めの VIEW MORE は SP では出さない（オーナー決定） */
.event__when{font-size: 15px; line-height: 19px;}
.event__desc{font-size: 15px; line-height: 1.6;}
.event__stage .event__when, .event__stage .event__desc{grid-column: 1 / -1; text-align: left;}
.event__item--sake .event__when{grid-row: 4; margin: 22px 0 0;}
.event__item--sake .event__desc{grid-row: 5; margin: 6px 0 0;}
.event__item--karaoke .event__when{grid-row: 6; margin: 22px 0 0;}
.event__item--karaoke .event__desc{grid-row: 7; margin: 6px 0 0;}
/* 唇から離れるので、説明の頭に名前と唇の色の点を付ける */
.event__item--sake .event__when::before, .event__item--karaoke .event__when::before, .event__select .event__when::before{display: block; margin-bottom: 4px; padding-left: 22px; font-family: "gravesend-sans", sans-serif; font-size: 16px; line-height: 20px; background: radial-gradient(circle at 8px 50%, var(--lip) 0 5px, #fff 5.5px 7.5px, transparent 8px) no-repeat;}
.event__item--sake .event__when::before{content: "TOKYO SAKE NIGHT"; --lip: #6c5cff;}
.event__item--karaoke .event__when::before{content: "TOKYO KARAOKE NIGHT"; --lip: #ff8a1c;}
.event__select .event__when::before{content: "SPECIAL EVENTS"; --lip: #a6d94c;}
.event__select{display: block; margin-top: 22px; padding: 0 var(--g); text-align: left;}
.event__select .event__when{width: auto; padding: 0;}
.event__select .event__desc{margin-top: 6px;}

/* ---------- UPCOMING EVENTS（3枠を小さい正方形で横一列）---------- */
.upcoming__title{margin: 44px var(--g) 0; font-size: 25px; line-height: 30px; letter-spacing: 0.04em;}
.upcoming__title::before{left: 0; right: 0; height: 8px; margin-top: -4px;}
.upcoming__title span{top: -1px; -webkit-text-stroke: 3px #fff;}
.upcoming__list{gap: 10px; margin: 18px var(--g) 0;}
.upcoming__item{flex: 1 1 0; width: auto; min-width: 0; border-width: 4px;}
.upcoming__item + .upcoming__item{margin-left: 0;}
.upcoming__pickup{width: auto; margin: 18px var(--g) 0; border-width: 4px;}
.upcoming__list--afterpick{margin-top: 10px;}
.upcoming__more{margin-top: 24px; padding: 0 var(--g);}
.upcoming__more .c-btn{width: 240px;}

/* ---------- PRIVATE EVENTS ---------- */
.private{margin-top: 56px;}
.private__title{width: auto; margin: 0 var(--g);}
/* 動画（SPデザインなし）: 縦長 9:16 なので画面いっぱいにせず中央に置く。角丸は PC と同じ比率（52/460） */
.private__photo{position: static; width: 64%; max-width: 300px; margin: 20px auto 0; border-width: 3px; border-radius: 13% 13% 0 0 / 7.3% 7.3% 0 0;}
.private__photo video{height: auto; aspect-ratio: 9 / 16;}
.private__body{padding: 0 var(--g);}
.private__lead{margin-top: 20px; font-size: 19px; line-height: 24px; letter-spacing: 0.03em; white-space: normal;}
.private__list{margin-top: 12px; padding-left: 0; font-size: 16px; line-height: 28px; letter-spacing: 0.04em;}
.private__list br{display: none;}
.private__list span{margin-right: 14px;}
.private__list span + span{margin-left: 0;}
.private__list span::before{width: 20px; margin-right: 6px; vertical-align: 1px;}
.private__txt{margin-top: 12px; padding-left: 0; font-size: 15px; line-height: 1.6;}
.private__plan{display: table; margin: 26px auto 0; padding: 2px 10px; border-width: 2px; font-size: 15px; line-height: 20px; text-align: center;}
.private__btns{justify-content: center; margin: 8px 0 0;}
.private__btns .c-lipbtn{width: 46%; max-width: 200px;}
.private__btns .c-lipbtn + .c-lipbtn{margin-left: -2%;}

/* ---------- LOCATION ---------- */
.location{margin-top: 56px;}
.location__title{width: 74%; margin: -20% auto 0;}
.location__info{width: auto; margin: 10px var(--g) 0;}
.location__row{display: block; padding: 8px 12px; font-size: 16px; line-height: 22px;}
.location__row + .location__row{margin-top: 5px;}
.location__row dt{width: auto; font-size: 13px; line-height: 18px;}
.location__label{font-size: 13px; line-height: 18px;}
.location__row--noicon dt{padding-left: 0;}
.location__icon--phone, .location__icon--clock{width: 14px; margin: 0 5px 0 0;}
.location__row dd{margin-top: 2px;}
/* 営業時間：曜日の列＋本文（本文は折り返す）。右下は RESERVE の丸が重なるので余白をとる */
.location__row--hours{padding-bottom: 30px;}
.location__hours{margin: 4px 0 0; font-size: 14px; line-height: 20px; letter-spacing: 0.02em;}
.location__hours tr + tr th, .location__hours tr + tr td{padding-top: 6px;}
.location__hours th{width: 72px; padding-right: 6px;}
.location__hours td{white-space: normal;}
.location__reserve{left: auto; right: -6px; top: auto; bottom: -56px; width: 96px;}
.location__lips{width: 100px; margin: 86px auto 0;}
.location__btns{justify-content: center; margin: 40px var(--g) 0; padding-bottom: 56px;}
.location__btns .c-lipbtn{width: 33%;}
.location__btns .c-lipbtn + .c-lipbtn{margin-left: 1%;}
.location__btns .c-lipbtn + .c-lipbtn--order{width: 28%; margin: 2.3% 0 0 2.5%;}

/* ---------- OUR PRODUCER（縦積み：見出し・名前・本文・写真）---------- */
.producer{padding: 110px 0 60px;}
.producer .inner{display: block;}
.producer .left{width: auto; margin: 0 var(--g);}
.producer h2{width: 100%; margin: 0;}
.producer h3{width: auto; margin-top: 18px; padding-bottom: 4px; font-size: 19px; line-height: 24px; letter-spacing: 0.04em;}
.producer p{margin-top: 16px; font-size: 15px; line-height: 1.6; letter-spacing: 0.03em; white-space: normal;}
.producer .right{width: auto; margin: 28px var(--g) 0;}

/* ---------- COMING SOON ---------- */
.coming{min-height: calc(100vh - 68px); padding: 100px var(--g) 60px;}
.coming__logo{width: 220px;}
.coming__txt{margin-top: 36px; font-size: 30px;}

/* ---------- EVENTS 一覧（SPデザインは無い。2列・余白はトップの UPCOMING EVENTS に合わせる）---------- */
.events{padding: 100px 0 60px;}
.events__title{width: 62%; max-width: 260px;}
.events__list{grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 28px var(--g) 0;} /* SPは1列（2026-10-21 先方） */
.events__item--empty{display: none;} /* 1列では空の枠を並べない */
.events__item{border-width: 4px;}
}

/* =========================================================
   スクロールで出てくるアニメーション（2026-10-19 エスパ）
   wow.js が画面に入った要素に .animated を付ける。動かすのは opacity と transform だけ（レイアウトは動かない）。
   fill-mode を backwards にして、終わったあとは要素の元の transform（皿のずらし等）に戻す。
   ヘッダーと KV は動かさない。?shot=1（ローカルのスクショ用）では mu-plugin が全部止める。
   ========================================================= */
.tkd-up{animation-name: tkdUp;}
.tkd-fade{animation-name: tkdFade;}
.tkd-up.animated, .tkd-fade.animated{animation-duration: 0.7s; animation-timing-function: ease-out; animation-fill-mode: backwards;}
@keyframes tkdUp{from{opacity: 0; transform: translate3d(0, 24px, 0);} to{opacity: 1; transform: translate3d(0, 0, 0);}}
@keyframes tkdFade{from{opacity: 0;} to{opacity: 1;}}
/* 動きを減らす設定の端末では、最初から全部表示して動かさない */
@media (prefers-reduced-motion: reduce){
	.wow{visibility: visible !important; animation: none !important;}
}