/* ==========================================================
   Base
   ========================================================== */
:root{
  --tiffany: #81d8d0;
  --paper: #f2f2f2;
  --ink: #101010;
  --inkSoft: rgba(16,16,16,.66);
  --labelH: 118px;
  --outerPad: 0px;

  --curtainColor: #BA4809;
  --curtainDur: 3.2s;
  --marqueeDur: 80s;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color: var(--ink);
  background: #1b1b1b;
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; }

/* ==========================================================
   Layout: full-screen split (left slideshow / right contents)
   ========================================================== */
.page{
  min-height: calc(100vh - var(--labelH));
}

.fv_ticket{
  width: 100%; /* ← 100vw から変更 */
  height: calc(100vh - var(--labelH));
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

/* Right wave divider (requested snippet style) */
.shapedividers_com-9315{
  overflow:hidden;
  position:relative;
}
.shapedividers_com-9315::before{
  content:'';
  position:absolute;
  z-index: 3;
  pointer-events:none;
  background-repeat:no-repeat;
  bottom:-0.1vw;
  left:-0.1vw;
  right:-0.1vw;
  top:-0.1vw;
  background-size:59px 100%;
  background-position:100% 50%;
  /* the fill is already encoded as %2381d8d0 (tiffany) */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20preserveAspectRatio='xMinYMid%20slice'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2084%202000.4'%3E%3Cg%20fill='%2381d8d0'%3E%3Cpath%20d='M35%2063h38l1-1%2010-17V16L75%200H34L16%2030l19%2033z'%20opacity='.5'/%3E%3Cpath%20d='M54%20133h30V74H54l-17%2030%2017%2029z'/%3E%3Cpath%20d='M24%20284h49l1-2%205-8%205-9v-45l-9-15-1-2-1-2H24L0%20242l24%2042zM40%20157H20l-10-17%2010-18h20l10%2018-10%2017z'%20opacity='.75'/%3E%3Cpath%20d='M25%20189H12l-6-10%206-11h13l6%2011-6%2010z'/%3E%3Cpath%20d='M52%20205h32v-59H52l-17%2029%2015%2026%202%204z'%20opacity='.5'/%3E%3Cpath%20d='M75%20186h9v-59h-9l-1%203-2%203-7%2013-6%2011%2015%2027%201%202zM34%2099H15L6%2082l9-16h19l10%2016-10%2017zM41%20340h38l5-8v-50l-5-8H41l-6%2010-13%2023%2019%2033z'/%3E%3Cpath%20d='M60%20410h24v-59H60l-17%2029%2017%2030z'%20opacity='.5'/%3E%3Cpath%20d='M30%20569h49l3-5%202-4v-66l-3-5-2-4H30L6%20527l21%2037%203%205zM46%20433H26l-10-17%2010-17h20l10%2017-10%2017zM31%20466H18l-6-11%206-11h13l6%2011-6%2011z'/%3E%3Cpath%20d='M56%20496h28v-63H56l-18%2031%2016%2028%202%204z'/%3E%3Cpath%20d='M82%20463h2v-59h-2l-4%206-4%207-3%205-6%2011%209%2017%208%2013z'/%3E%3Cpath%20d='M40%20375H21l-9-16%209-17h19l10%2017-10%2016z'%20opacity='.5'/%3E%3Cpath%20d='M41%20837h38l5-8v-50l-5-8H41l-19%2033%2019%2033zM46%20677H26l-10%2018%2010%2017h20l10-17-10-18z'/%3E%3Cpath%20d='M31%20645H18l-6%2010%206%2011h13l6-11-6-10z'%20opacity='.5'/%3E%3Cpath%20d='M17%20546H6l-6%209%206%2010h11l5-10-5-9z'%20opacity='.75'/%3E%3Cpath%20d='M58%20688h26v-58H58l-2%204-15%2025%2017%2029z'/%3E%3Cpath%20d='M82%20707h2v-59h-2l-8%2013-9%2016%206%2011%203%206%204%207%204%206z'/%3E%3Cpath%20d='M82%20791h2v-58h-2l-8%2013-9%2016%206%2011%203%205%204%208%204%205z'%20opacity='.5'/%3E%3Cpath%20d='M40%20736H21l-9%2016%209%2016h19l10-16-10-16z'/%3E%3Cpath%20d='M37%20918h38l9-16v-35l-9-15H37l-19%2033%2019%2033z'%20opacity='.75'/%3E%3Cpath%20d='M55%20988h29v-59H55l-17%2029%2017%2030z'/%3E%3Cpath%20d='M26%201139h48l6-11%204-6v-50l-7-13-3-4H26l-24%2042%2024%2042z'%20opacity='.5'/%3E%3Cpath%20d='M42%201011H22l-10-17%2010-17h20l10%2017-10%2017zM24%20858H9l-8-14%208-13h15l8%2013-8%2014z'%20opacity='.75'/%3E%3Cpath%20d='M84%20868v-39l-10%2017-1%202%201%203%2010%2017zM76%20293h8v-39h-8l-2%203-9%2017%209%2016%202%203zM76%20359h8v-39h-8l-2%203-9%2017%209%2016%202%203zM84%20226v-38l-10%2017-1%202%201%202%2010%2017zM84%2081V43L74%2060l-1%202%201%202%2010%2017zM84%20940v-39l-10%2017-1%202%201%203%2010%2017zM75%201081h9v-39h-9l-1%203-10%2016%2010%2017%201%203zM84%201147v-38l-10%2017-1%202%201%202%2010%2017zM84%201642v-39l-10%2017-1%202%201%203%2010%2017zM67%201722h17v-38H67l-11%2019%2011%2019zM77%201794h7v-38h-7l-3%205-8%2014%205%208%203%206%203%205zM26%201044H14l-7-11%207-11h12l6%2011-6%2011z'/%3E%3Cpath%20d='M54%201059h30v-59H54l-17%2030%2015%2025%202%204z'/%3E%3Cpath%20d='M77%201041h7v-59h-7l-3%205v1l-8%2012-6%2011%2014%2024%203%206z'/%3E%3Cpath%20d='M36%20953H17L7%20937l10-17h19l9%2017-9%2016z'%20opacity='.5'/%3E%3Cpath%20d='M43%201194h38l3-5v-56l-3-5H43l-6%2011-13%2022%2019%2033z'/%3E%3Cpath%20d='M61%201264h23v-59H61l-17%2030%2017%2029zM32%201415h48l3-5%201-1v-71l-1-3-3-4H32l-24%2042%2021%2037%203%205zM48%201288H28l-10-18%2010-17h20l10%2017-10%2018z'%20opacity='.5'/%3E%3Cpath%20d='M32%201320H20l-6-10%206-11h12l6%2011-6%2010zM60%201335h24v-58H60l-17%2029%2015%2025%202%204z'/%3E%3Cpath%20d='M83%201317h1v-59h-1l-3%206-6%2010-2%203-6%2011%208%2013%209%2016zM83%201222h1v-59h-1l-3%206-6%2010-2%203-6%2011%208%2013%209%2016z'/%3E%3Cpath%20d='M42%201230H23l-9-17%209-16h19l9%2016-9%2017z'%20opacity='.75'/%3E%3Cpath%20d='M43%201691h38l3-5v-55l-3-5H43l-19%2032%2019%2033z'%20opacity='.5'/%3E%3Cpath%20d='M61%201614h23v-59H61l-17%2030%2017%2029zM32%201488h48l3-4%201-2v-71l-1-1-3-6H32l-3%206-21%2036%2024%2042z'/%3E%3Cpath%20d='M48%201532H28l-10%2017%2010%2017h20l10-17-10-17z'%20opacity='.75'/%3E%3Cpath%20d='M32%201499H20l-6%2011%206%2011h12l6-11-6-11z'%20opacity='.5'/%3E%3Cpath%20d='M18%201400H7l-5%2010%205%209h11l6-9-6-10z'/%3E%3Cpath%20d='M60%201543h24v-59H60l-2%204-15%2025%2017%2030z'%20opacity='.75'/%3E%3Cpath%20d='M83%201561h1v-59h-1l-9%2016-8%2014%206%2011%202%202%206%2010%203%206z'%20opacity='.75'/%3E%3Cpath%20d='M42%201590H23l-9%2016%209%2017h19l9-17-9-16z'%20opacity='.5'/%3E%3Cpath%20d='M41%201772h38l5-8v-50l-5-8H41l-19%2033%2019%2033z'/%3E%3Cpath%20d='M60%201842h24v-59H60l-17%2030%2017%2029z'%20opacity='.5'/%3E%3Cpath%20d='M30%201988h49l5-10v-65l-3-5-2-4H30l-24%2042%2024%2042zM46%201866H26l-10-17%2010-18h20l10%2018-10%2017z'/%3E%3Cpath%20d='M30%201898H18l-6-10%206-11h12l7%2011-7%2010zM17%201997H6l-6-9%206-10h11l5%2010-5%209z'%20opacity='.5'/%3E%3Cpath%20d='M58%201913h26v-58H58l-17%2029%2015%2025%202%204z'%20opacity='.75'/%3E%3Cpath%20d='M81%201895h3v-59h-3l-3%206-4%207-3%206-7%2011%2010%2016%207%2013zM75%202000h9v-42l-5%204-5%205-11%209%206%2012%203%207%202%203%201%202z'/%3E%3Cpath%20d='M40%201808H21l-9-17%209-16h19l9%2016-9%2017z'%20opacity='.75'/%3E%3Cpath%20d='M29%201709H14l-7-13%207-12h15l7%2012-7%2013z'/%3E%3Cpath%20d='M30%20634h49l2-4%203-5v-66l-2-4-3-5H30l-3%205-21%2037%2024%2042z'%20opacity='.75'/%3E%3Cpath%20d='M74%203l-1-2V0h11v20L74%203z'/%3E%3Cpath%20d='M60%20760h24v-59H60l-17%2029%2017%2030z'%20opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Center seam / perforation */
.fv_ticket::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width: 26px;
  transform: translateX(-50%);
  z-index: 2;
  background:
    radial-gradient(circle at 50% 18px, rgba(0,0,0,.35) 0 3px, transparent 3.5px) 50% 0/100% 36px repeat-y,
    linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,.02), rgba(0,0,0,.10));
  mix-blend-mode: multiply;
  opacity: .65;
}

/* Left side slideshow */
.mainVisual{
  width:100%;
  height:100%;
  position: relative;
  z-index: 0;
  background: #2a2a2a;
}
.mainVisual .swiper-wrapper{ height:100%; }
.mainVisual_slide,
.mainVisual .swiper-slide{ height:100%; }
.mainVisual_slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right side content */
.mainContents{
  position: relative;
  z-index: 1;
  padding: clamp(18px, 2.2vw, 38px) clamp(18px, 3vw, 52px);
  background:
    radial-gradient(circle at 18% 16%, rgba(0,0,0,.06), transparent 45%),
    radial-gradient(circle at 82% 86%, rgba(0,0,0,.05), transparent 48%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 6px),
    var(--paper);
}

.contents{
  height:100%;
  display:flex;
  flex-direction:column;
}

.logo_mainvisual{
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo_mainvisual img{
  display: block;
  margin-inline: auto;
  width: min(560px, 92%);
}

.line_logo{
  height: 2px;
  background: rgba(0,0,0,.40);
  margin: 14px 0 10px;
}






/* =========================================
   BLOGの左側：回転リング（2枚重ね）
   触るのは --ringTop / --ringRightExtra / --ringSize だけでOK
========================================= */

/* 絶対配置の基準 */
.contents_under{
  position: relative;

  /* 右カラム(BLOG)の幅・列gap（あなたのgridに合わせる） */
  --blogW: 104px;
  --colGap: 18px;

  /* ↓調整ポイント */
  --ringTop: 80px;                 /* 上下（大きいほど下へ） */
  --ringRightExtra: 150px;           /* BLOGからどれだけ左へ離すか */
  --ringSize: clamp(200px, 14vw, 250px); /* 大きさ */
}

/* ※旧仕様の丸は使わない（残ってたら消す） */
.orbit_deco,
.irast_ring{ display: none !important; }

/* リングの箱（BLOGの左側に固定） */
.rings{
  position: absolute;
  top: var(--ringTop);
  right: calc(var(--blogW) + var(--colGap) + var(--ringRightExtra));
  left: auto;        /* 以前のleft指定を殺す */
  bottom: auto;
  width: var(--ringSize);
  height: var(--ringSize);
  pointer-events: none;
  z-index: 2;
  /* opacity: .55; */
}

/* 2枚とも同じ箱で重ねる */
.rings .ring{
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform-origin: 50% 50%;
}

/* 大リング：時計回り */
.rings .ring--cw{
  animation: ringSpinCW 80s linear infinite;
}

/* 小リング：少し右下にずらして逆回り */
.rings .ring--ccw{
  width: 80%;
  height: 80%;
  inset: auto;
  right: -24px;
  bottom: -24px;
  /* opacity: .85; */
  animation: ringSpinCCW 60s linear infinite;
}

@keyframes ringSpinCW{ to{ transform: rotate(360deg); } }
@keyframes ringSpinCCW{ to{ transform: rotate(-360deg); } }

/* BLOGは最前面 */
.contents_blog{ position: relative; z-index: 5; }
.contents_information{ position: relative; z-index: 3; }

/* SPは非表示（既にBLOGも消してるなら合わせる） */
@media (max-width: 768px){
  .rings{ display:none; }
}

/* 動きを減らす設定の人には止める（任意） */
@media (prefers-reduced-motion: reduce){
  .rings .ring{ animation:none; }
}




















/* ------------------------------
  ロゴ＆タイトル：左→右マスクで出す
------------------------------ */

/* 速度・色の調整はここ */
:root{
  --revealDur: 1.2s;                  /* マスクが走る時間 */
  --revealMask: linear-gradient(
    to right,
    rgba(200, 230, 228, 0.0) 0%,
    rgba(200, 230, 228, 0.95) 45%,
    rgba(200, 230, 228, 0.95) 55%,
    rgba(200, 230, 228, 0.0) 100%
  );
}

/* 共通：マスクの器 */
.mask-reveal{
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}

/* 中身はマスクの下に */
.mask-reveal > *{
  position: relative;
  z-index: 1;
}

/* 走るマスク */
.mask-reveal::after{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--revealMask);
  transform: translateX(-101%);
}

/* アニメ開始（JSで .is-animated を付与する想定） */
.mask-reveal.is-animated::after{
  animation: mask-sweep var(--revealDur) cubic-bezier(0.8, 0, 0.17, 1) var(--revealDelay, 0s) both;
}

/* 左→右に走って消える */
@keyframes mask-sweep{
  0%   { transform: translateX(-101%); }
  40%,
  60%  { transform: translateX(0%); }
  100% { transform: translateX(101%); }
}

/* ------------------------------
  ふわっと浮かび上がる（ロゴ画像 / タイトル）
------------------------------ */
@keyframes fade-up{
  0%   { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0);  filter: blur(0); }
}

/* ロゴ画像：マスクが少し走ってから出す */
.mask-reveal--logo{
  --revealDelay: 0.15s;
}
.mask-reveal--logo img{
  opacity: 0;
  transform: translateY(8px);
}
.mask-reveal--logo.is-animated img{
  animation: fade-up 0.8s ease calc(var(--revealDelay) + 0.35s) forwards;
}

/* タイトル文字：色はマスク後に出す＋ふわっと */
.mask-reveal--text{
  color: transparent;
  transition: color 0ms var(--revealColorDelay, 0.55s);
}
.mask-reveal--text.is-animated{
  color: #111; /* タイトル文字色（必要なら変更） */
}

.mask-reveal--title{
  --revealDelay: 0.30s;
  --revealColorDelay: calc(var(--revealDelay) + 0.55s); /* マスクが抜けた頃に色が出る */
  opacity: 0;
  transform: translateY(8px);
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-weight: 400;
  letter-spacing: .06em; /* お好みで */
}
.mask-reveal--title.is-animated{
  animation: fade-up 0.9s ease calc(var(--revealDelay) + 0.35s) forwards;
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .mask-reveal, .mask-reveal *{ animation: none !important; transition: none !important; }
  .mask-reveal::after{ display: none; }
  .mask-reveal--text{ color: #111; }
  .mask-reveal--logo img,
  .mask-reveal--title{ opacity: 1; transform: none; filter: none; }
}


.title{
  margin: 0 0 18px;
  text-align:center;
  font-weight: 900;
  letter-spacing: .10em;
  font-size: clamp(22px, 2.8vw, 44px);
}








/* =========================================
   MENU（2段・参考サイト風）
========================================= */
.menu{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.menu_1,
.menu_2{
  display:flex;
  gap: 12px;
  width: 100%;
}

/* SP */
@media (max-width: 768px){
  .menu{ gap: 8px; }
  .menu_1,
  .menu_2{ gap: calc(8/312*100vw); }
}




/* =========================================
   BUTTON（縁取りを綺麗に：穴の中に影を出さない版）
   - 塗り：ボタン背景と同色
   - 縁取り：text-shadow 8方向（ポ/サ等が潰れにくい）
   - “重なり”は文字ではなくボタンbox-shadowで表現
========================================= */
.btn_gallery,
.btn_goods{
  /* 背景色（ボタン）と文字の塗り色を必ず一致させる */
  --bg-fallback: rgba(129,216,208,.30);
  --bg: color-mix(in srgb, var(--tiffany) 30%, var(--paper)); /* 対応ブラウザはこっちで一致 */

  --outline: var(--ink);                         /* 縁の色 */
  --out: clamp(1px, .12vw, 2px);                 /* 縁の太さ */

  flex: 1;
  min-width: 0;
  height: clamp(54px, 6vw, 84px);
  display:flex;
  align-items:center;
  justify-content:center;

  /* 矢印を右へ */
  flex-direction: row-reverse;
  gap: .55em;

  position:relative;
  overflow:hidden;
  z-index: 0;

  text-decoration:none;
    font-family:"Poppins","Noto Sans JP",sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 30px);
  letter-spacing: .04em; /* マイナスは潰れやすいので避ける */
  line-height: 1;

  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.30);

  /* 背景 */
  background: var(--bg-fallback);
  background: var(--bg);

  /* ▼文字の中をボタン色に（＝穴の中も“同色”に見える） */
  color: var(--bg-fallback);
  color: var(--bg);

  /* ▼縁取り（あなたのoutline方式：8方向） */
  text-shadow:
       var(--out)  var(--out) 0 var(--outline),
      calc(var(--out) * -1)  var(--out) 0 var(--outline),
       var(--out) calc(var(--out) * -1) 0 var(--outline),
      calc(var(--out) * -1) calc(var(--out) * -1) 0 var(--outline),
       var(--out) 0 0 var(--outline),
      calc(var(--out) * -1) 0 0 var(--outline),
       0 var(--out) 0 var(--outline),
       0 calc(var(--out) * -1) 0 var(--outline);

  /* ▼“重なり”は文字じゃなくボタンに付ける（穴の中に影が出ない） */
  box-shadow: 2px 2px 0 rgba(0,0,0,.28);
}


.btn_gallery,
.btn_goods{
  /* 重なっている影の演出 */

  /* 追加：文字の右下に“うっすら”影（ここだけ調整すればOK） */
  --txt-x: calc(var(--out) + 2px);
  --txt-y: calc(var(--out) + 2px);
  --txt-blur: 0px;
  --txt-shadow: rgba(0,0,0,.90);

  /* ▼縁取り（8方向）＋ 右下影（最後の1本） */
  text-shadow:
     var(--out) 0 0 var(--outline),
     calc(var(--out) * -1) 0 0 var(--outline),
     0 var(--out) 0 var(--outline),
     0 calc(var(--out) * -1) 0 var(--outline),
     var(--out) var(--out) 0 var(--outline),
     calc(var(--out) * -1) var(--out) 0 var(--outline),
     var(--out) calc(var(--out) * -1) 0 var(--outline),
     calc(var(--out) * -1) calc(var(--out) * -1) 0 var(--outline),
     var(--txt-x) var(--txt-y) var(--txt-blur) var(--txt-shadow);
}

/* hover時：背景が黒になるので、影だけ白寄りに */
.btn_gallery:hover,
.btn_goods:hover{
  --txt-shadow: rgba(255,255,255,.18);

  text-shadow:
     var(--out) 0 0 var(--paper),
     calc(var(--out) * -1) 0 0 var(--paper),
     0 var(--out) 0 var(--paper),
     0 calc(var(--out) * -1) 0 var(--paper),
     var(--out) var(--out) 0 var(--paper),
     calc(var(--out) * -1) var(--out) 0 var(--paper),
     var(--out) calc(var(--out) * -1) 0 var(--paper),
     calc(var(--out) * -1) calc(var(--out) * -1) 0 var(--paper),
     var(--txt-x) var(--txt-y) var(--txt-blur) var(--txt-shadow);
}


/* 矢印（SVG） */
.btn_gallery::before,
.btn_goods::before{
  content:"";
  width: clamp(14px, 1.2vw, 20px);
  height: clamp(18px, 1.6vw, 26px);
  /* background: url(../image/TOP/Button_Arrow.svg) no-repeat center / contain; */
}

/* hoverの黒塗り（左→右に伸びる） */
.btn_gallery::after,
.btn_goods::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index:-1;
}
.btn_gallery:hover::after,
.btn_goods:hover::after{
  transform: scaleX(1);
}

/* hover時：塗り＝黒（背景と同化）／縁を白に */
.btn_gallery:hover,
.btn_goods:hover{
  color: var(--ink);
  text-shadow:
       var(--out)  var(--out) 0 var(--paper),
      calc(var(--out) * -1)  var(--out) 0 var(--paper),
       var(--out) calc(var(--out) * -1) 0 var(--paper),
      calc(var(--out) * -1) calc(var(--out) * -1) 0 var(--paper),
       var(--out) 0 0 var(--paper),
      calc(var(--out) * -1) 0 0 var(--paper),
       0 var(--out) 0 var(--paper),
       0 calc(var(--out) * -1) 0 var(--paper);
}

/* 矢印が黒SVGで黒背景で消える場合だけ */
.btn_gallery:hover::before,
.btn_goods:hover::before{
  filter: invert(1);
}

/* SP：縁と影を弱めて潰れ防止 */
/* @media (max-width: 768px){
  .btn_gallery,
  .btn_goods{
    height: 4rem;
    font-size: clamp(20px, 8vw, 34px);
    --out: 1px;
    box-shadow: 2px 2px 0 rgba(0,0,0,.25);
  }
  .btn_gallery::after,
  .btn_goods::after{
    transition: none;
  }
} */

.menu_2{ display:none; } /* desktop uses right-side ABOUT */



/* ==========================================================
   PC(1601px〜)：メニューボタンの文字が大きくなって改行するのを防ぐ
   ========================================================== */
@media (min-width: 1601px){
  .btn_gallery,
  .btn_goods{
    white-space: nowrap;                 /* 2行にしない */
    font-size: clamp(28px, 1.4vw, 32px); /* 1601px以上でもデカくしすぎない */
    letter-spacing: .02em;
    padding-inline: clamp(8px, .9vw, 14px);
    line-height: 1.1;
  }

  .btn_gallery::before,
  .btn_goods::before{
    width: clamp(10px, .9vw, 16px);
    height: clamp(14px, 1.1vw, 20px);
  }
}




/* ==========================================================
   MENU文字サイズ調整（1440px〜781px）
   - タブレット付近で長い文言が潰れやすいので、ここだけ読みやすさ優先
   ========================================================== */
@media (max-width: 1440px) and (min-width: 781px){
  .btn_gallery,
  .btn_goods{
    /* 769px: 16px前後 / 1024px: 18〜19px / 1440px: 24px程度 */
    font-size: clamp(14px, 1.8vw, 24px);
    line-height: 1.15;
    letter-spacing: .02em;

    /* 文字が端に寄って見えないように、左右に少し余白 */
    padding-inline: clamp(10px, 1.2vw, 18px);

    /* 高さも文字サイズに合わせて調整 */
    height: clamp(56px, 5.4vw, 74px);
  }

  /* 矢印SVGも少し小さめにしてバランス調整 */
  .btn_gallery::before,
  .btn_goods::before{
    width: clamp(12px, 1.1vw, 18px);
    height: clamp(16px, 1.35vw, 24px);
  }
}


/* ==========================================================
   PC(1200px〜769px)：メニューボタンの文字を「1行固定」で見やすく
   - 長い「制作実績ポートフォリオ」が2行に割れないように
   ========================================================== */
@media (max-width: 1600px) and (min-width: 1201px){
  .btn_gallery,
  .btn_goods{
    white-space: nowrap;                 /* 文字を2行にしない */
    font-size: clamp(22px, 1.6vw, 26px); /* この帯だけ少し小さく */
    letter-spacing: .02em;
    padding-inline: clamp(8px, 1vw, 12px);
  }

  .btn_gallery::before,
  .btn_goods::before{
    width: clamp(10px, 1.0vw, 16px);
    height: clamp(14px, 1.2vw, 20px);
  }
}


/* ==========================================================
   PC(1200px〜769px)：メニューボタンの文字を「1行固定」で見やすく
   - 長い「制作実績ポートフォリオ」が2行に割れないように
   ========================================================== */
@media (max-width: 1200px) and (min-width: 769px){
  .btn_gallery,
  .btn_goods{
    white-space: nowrap;                 /* 文字を2行にしない */
    font-size: clamp(18px, 1.6vw, 24px); /* この帯だけ少し小さく */
    letter-spacing: .02em;
    padding-inline: clamp(8px, 1vw, 12px);
  }

  .btn_gallery::before,
  .btn_goods::before{
    width: clamp(10px, 1.0vw, 16px);
    height: clamp(14px, 1.2vw, 20px);
  }
}



/* 510px以下：事業メニューを2カラム→1カラム（縦積み） */
@media (max-width: 510px){
  .menu{ gap: 10px; }

  .menu_1,
  .menu_2{
    flex-direction: column;
    gap: 10px;
  }

  .btn_gallery,
  .btn_goods{
    width: 100%;
    flex: none; /* 横並び用の flex:1 を解除 */
    font-size: clamp(17px, 5.0vw, 24px); /* ← 少しだけUP */
    height: clamp(52px, 13.5vw, 66px);   /* ← 文字UP分だけ高さも微増 */
  }
}





























.line_menu{
  height: 1px;
  background: rgba(0,0,0,.20);
  margin: 18px 0 0;
}

.contents_under{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 104px;
  gap: 18px;
  align-items:start;
}

.contents_information{ min-width: 0; }

/* No. の下に NEWS を左寄せで積む（参考サイト寄せ） */
.information_fv{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;            /* No.とNEWSの間隔 */
}

.decolation_1{
  margin: 0;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: clamp(12px, 1.2vw, 16px);
  color: rgba(0,0,0,.72);
}

.news{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 56px 1fr;
  border: 2px solid rgba(0,0,0,.30);
  border-radius: 12px;
  overflow:hidden;
  background: #fff;
}
.title_news{
  background: rgba(129,216,208,.55);
  display:flex;
  align-items:center;
  justify-content:center;
}
.titleText_news{
  margin:0;
  font-weight: 900;
  letter-spacing: .22em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: rgba(0,0,0,.78);
    writing-mode: vertical-rl;
  transform: rotate(186deg); /* ← 180→186（+6°）で斜め右に少し傾く */
}

.text_news{
  padding: 14px 16px;
  display:flex;
  gap: 18px;
  align-items:flex-start;
}
.date_news{
  margin:0;
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(0,0,0,.75);
  white-space: nowrap;
}
.text_news_jp{ display:flex; flex-direction:column; gap: 6px; }
.event_news{ font-weight: 900; text-decoration:none; border-bottom: 1px solid rgba(0,0,0,.25); width: fit-content; }
.maintext_news{ margin:0; font-weight:700; }


/* ==========================================================
   NEWS（文字サイズ調整：1440px〜981px）
   ========================================================== */
@media (max-width: 1440px) and (min-width: 981px){
  .news{
    grid-template-columns: clamp(56px, 4.2vw, 76px) 1fr;
  }
  .titleText_news{
    font-size: clamp(15px, 1.25vw, 20px);
    letter-spacing: clamp(.16em, .2vw, .22em);
  }
  .text_news{
    padding: clamp(12px, 1.2vw, 16px) clamp(12px, 1.4vw, 18px);
    gap: clamp(12px, 1.4vw, 18px);
  }
  .date_news{ font-size: clamp(12px, 1.05vw, 14px); }
  .event_news{ font-size: clamp(14px, 1.15vw, 18px); }
  .maintext_news{
    font-size: clamp(12px, 1.05vw, 16px);
    line-height: 1.35;
  }
}

@media (max-width: 1200px) and (min-width: 769px){
  .date_news{
    display:flex;
    flex-direction:column;  /* 縦に積む */
    line-height:1.05;
  }
  .date_news__y,
  .date_news__md{
    display:block;
  }
}



/* ==========================================================
   980px以下：NEWSは横ラベル＋縦積みで読みやすく
   ========================================================== */
@media (max-width: 980px){
  .news{ grid-template-columns: 1fr; }
  .title_news{ padding: 6px 0; }

  .titleText_news{
    writing-mode: horizontal-tb;
    transform:none;
    font-size: clamp(18px, 3.2vw, 22px);
    letter-spacing: .18em;
  }

  .text_news{
    padding: 12px 14px;
    flex-direction: column;
    gap: 8px;
  }

  .date_news{
    font-size: clamp(12px, 2.4vw, 14px);
    white-space: normal;
  }
  .event_news{ font-size: clamp(14px, 3.0vw, 18px); }
  .maintext_news{ font-size: clamp(12px, 2.8vw, 16px); line-height: 1.35; }
}


/* SPだけ：NEWS本文を少し大きくして読みやすく */
@media (max-width: 769px){
  .event_news{
    font-size: clamp(15px, 3.8vw, 18px);
  }
  .maintext_news{
    font-size: clamp(13px, 3.4vw, 16px);
    line-height: 1.4;
  }
}











/* =========================================
   CTA（CONTACT / X / Instagram）：黒背景＋白
========================================= */
.btn_link{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}

/* CONTACT：文字＋↗（横長） */
.btn_link .btn_contact{
  height: 54px;
  padding: 0 18px;
  border-radius: 12px;

  background: #111;
  color: #fff;
  border: 2px solid #111;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .45em;

  text-decoration:none;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;

  transition: transform .15s ease,  background-color .15s ease;
}

:root{
  --tiffany: #81D8D0;
}

/* CONTACT：hoverでティファニーブルー＋拡大 */
.btn_link .btn_contact:hover{
  background: var(--tiffany);
  border-color: var(--tiffany);
  color: #111;
  transform: scale(1.05);
}

/* ↗ */
.btn_contact__arrow{
  font-size: .95em;
  transform: translateY(-.05em);
}

/* X / Instagram：黒い四角アイコンCTA */
.btn_link .btn_x,
.btn_link .btn_instagram{
  width: 54px;
  height: 54px;
  border-radius: 12px;

  background: #111;
  border: 2px solid #111;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  transition: transform .15s ease,  background-color .15s ease;
}

/* X / Instagram：hoverでティファニーブルー＋拡大 */
.btn_link .btn_x:hover,
.btn_link .btn_instagram:hover{
  background: var(--tiffany);
  border-color: var(--tiffany);
  transform: scale(1.05);
}

.btn_link .btn_x img,
.btn_link .btn_instagram img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* アイコンが「白PNG」なので、ティファニー背景だと見えにくい → hover時だけ黒に反転 */
.btn_link .btn_x:hover img,
.btn_link .btn_instagram:hover img{
  filter: invert(1);
}

/* フォーカス（キーボード操作時）も入れるなら */
.btn_link .btn_contact:focus-visible,
.btn_link .btn_x:focus-visible,
.btn_link .btn_instagram:focus-visible{
  outline: 3px solid rgba(129,216,208,.65);
  outline-offset: 3px;
}

/* もしアイコン画像が黒系で見えない場合だけON
.btn_link .btn_x img,
.btn_link .btn_instagram img{
  filter: invert(1);
}
*/

/* X / Instagram / LINE：黒い四角アイコンCTA */
.btn_link .btn_x,
.btn_link .btn_instagram,
.btn_link .btn_line{
  width: 54px;
  height: 54px;
  border-radius: 12px;

  background: #111;
  border: 2px solid #111;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  transition: transform .15s ease,  background-color .15s ease;
}

/* hoverでティファニーブルー＋拡大 */
.btn_link .btn_x:hover,
.btn_link .btn_instagram:hover,
.btn_link .btn_line:hover{
  background: var(--tiffany);
  border-color: var(--tiffany);
  transform: scale(1.05);
}

.btn_link .btn_x img,
.btn_link .btn_instagram img,
.btn_link .btn_line img{
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* X/Instagramは白PNG想定：hover時だけ黒に反転 */
.btn_link .btn_x:hover img,
.btn_link .btn_instagram:hover img{
  filter: invert(1);
}

/* ★LINEアイコンは黒なので：通常時は白に反転 → hoverで黒に戻す */
.btn_link .btn_line img{
  filter: invert(1);
}
.btn_link .btn_line:hover img{
  filter: none;
}

/* フォーカス */
.btn_link .btn_contact:focus-visible,
.btn_link .btn_x:focus-visible,
.btn_link .btn_instagram:focus-visible,
.btn_link .btn_line:focus-visible{
  outline: 3px solid rgba(129,216,208,.65);
  outline-offset: 3px;
}

/* 769px以下：SNS/LINEアイコン画像だけ大きくして視認性UP */
@media (max-width: 769px){
  .btn_link .btn_x img,
  .btn_link .btn_instagram img,
  .btn_link .btn_line img{
    width: clamp(30px, 8vw, 36px);
    height: clamp(30px, 8vw, 36px);
  }
}














/* 想い（左）＋アイコン（右）を必ず1段で見せる */
.omoiWrap{
  margin-top: 14px;
  width: min(560px, 100%);
  margin-left: auto;
  margin-right: auto;

  display: grid;
  grid-template-columns: 1fr 96px; /* 右にアイコン枠 */
  gap: 14px;
  align-items: center;
}

.omoiImage img{
  width: 100%;
  height: auto;
  display: block;
}

.omoiIcon img{
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* スマホだけ縦並びに */
@media (max-width: 520px){
  .omoiWrap{
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .omoiIcon img{
    width: 88px;
    height: 88px;
  }
  .omoiImage img{
    width: min(420px, 100%);
  }
}


/* 顔アイコン：一定時間ごとに ちょい上→戻る */
.omoiIcon img{
  animation: iconFloat 6.5s ease-in-out 2s infinite;
}

/* ほとんど止まってて、たまにだけ動く */
@keyframes iconFloat{
  0%, 78%, 100% { transform: translateY(0); }
  84%           { transform: translateY(-6px); } /* 上にちょい */
  90%           { transform: translateY(0); }    /* 戻る */
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .omoiIcon img{ animation: none; }
}




/* 中身（箱） */
.about,
.blog{
  width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 8px;

  background: rgba(129,216,208,.30);
  border: 2px solid rgba(0,0,0,.30);
  border-radius: 10px;

  position: relative;
  overflow: hidden;
}

/* hover黒塗り（参考サイトっぽい演出） */
.about::after,
.blog::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.92);
  transform: scaleY(0);
  transform-origin: top;
  transition: .2s cubic-bezier(0.45,0,0.55,1);
  z-index: 0;
}
.about:hover::after,
.blog:hover::after{
  transform: scaleY(1);
}

/* 縦書きテキスト：メニューと同系の「縁取り＋右下シャドー」 */
.btn_about,
.btn_blog{
  writing-mode: vertical-rl;   /* ★縦書き維持 */
  transform: rotate(180deg);
  text-decoration: none;

  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1;

  font-size: 32px;

  /* ★塗り＝ボタン背景と同色（中抜き感を消す） */
  color: rgba(129,216,208,.30);

  /* ★縁取り（黒） */
  -webkit-text-stroke: 2px rgba(0,0,0,.92);

  /* ★右下に小さく影 */
  text-shadow: 1px 1px 0 rgba(0,0,0,.35);

  position: relative;
  z-index: 1;
}

/* hover時：黒背景に合わせて、縁と影を白へ */
.about:hover .btn_about,
.blog:hover .btn_blog{
  color: rgba(0,0,0,.92); /* 背景と同化 */
  -webkit-text-stroke-color: #fff;
  text-shadow: 1px 1px 0 rgba(255,255,255,.35);
}

/* バーコード */
.barcode_about,
.barcode_blog{
  width: 48px;
  opacity: .65;
  position: relative;
  z-index: 1;
}
.barcode_about img,
.barcode_blog img{
  width: 100%;
  height: auto;
  display: block;
}

/* hover時にバーコードも見えるように（必要なら） */
.about:hover .barcode_about,
.blog:hover .barcode_blog{
  filter: invert(1);
  opacity: .9;
}


/* BLOG CTA：ふわふわ揺れる（箱ごと） */
.blog{
  animation: fuwafuwaBlog 3s ease-in-out infinite alternate;
  transform-origin: 50% 70%;
  will-change: transform;
}

/* hover中は止めたい場合（任意） */
.blog:hover{
  animation-play-state: paused;
}

/* 揺れの定義 */
@keyframes fuwafuwaBlog{
  0%   { transform: translateY(0) rotate(-3deg); }
  50%  { transform: translateY(-6px) rotate(0deg); }
  100% { transform: translateY(0) rotate(3deg); }
}

/* スマホは酔いやすいので弱める or 停止（任意） */
@media (max-width: 768px){
  .blog{ animation: none; }
}

/* OS設定でアニメ減らす人への配慮（任意だけど推奨） */
@media (prefers-reduced-motion: reduce){
  .blog{ animation: none; }
}


/* BLOG text responsive (1440px-769px) */
@media (max-width: 1440px) and (min-width: 769px){
  .btn_blog{
    font-size: clamp(20px, 2.2vw, 32px);
    -webkit-text-stroke-width: clamp(1px, 0.15vw, 2px);
    text-shadow: clamp(0.5px, 0.12vw, 1px) clamp(0.5px, 0.12vw, 1px) 0 rgba(0,0,0,.35);
  }

  .blog:hover .btn_blog{
    -webkit-text-stroke-width: clamp(1px, 0.15vw, 2px);
    text-shadow: clamp(0.5px, 0.12vw, 1px) clamp(0.5px, 0.12vw, 1px) 0 rgba(255,255,255,.35);
  }
}



@media (max-width: 980px){
  /* BLOGをNEWSの上に移動（中央寄せ） */
  .contents_under{
    grid-template-columns: 1fr;
    grid-template-areas:
      "blog"
      "info";
  }

  .contents_information{ grid-area: info; }

  .contents_blog{
    display: flex;              /* 768px以下で消してたのを表示 */
    justify-content: center;    /* 中央寄せ */
    grid-area: blog;
    margin: 0 auto 10px;
  }

  /* BLOG：横書き＋hover演出あり（黒塗り・縁取り・影） */
  .blog{
    width: auto;
    flex-direction: row;
    justify-content: center;
    gap: 0;
    padding: 10px 18px;
    animation: none;
  }

  /* 黒塗りエフェクトON（hover用の黒塗り） */
  .blog::after{ display:block; }

  /* 縁取り＋影で視認性UP */
  .btn_blog{
    writing-mode: horizontal-tb;
    transform: none;
    font-size: clamp(22px, 5vw, 30px);
    letter-spacing: .10em;

    color: rgba(129,216,208,.30);
    -webkit-text-stroke: clamp(1.5px, .35vw, 3px) rgba(0,0,0,.92);
    text-shadow: clamp(1px, .3vw, 2px) clamp(1px, .3vw, 2px) 0 rgba(0,0,0,.35);
  }

  .blog:hover .btn_blog{
    color: rgba(0,0,0,.92);
    -webkit-text-stroke-color: #fff;
    text-shadow: clamp(1px, .3vw, 2px) clamp(1px, .3vw, 2px) 0 rgba(255,255,255,.35);
  }

  .barcode_blog{ display:none; }
}




@media (max-width: 980px){

  /* リング装飾：980以下でもNEWS・アイコン右側に表示 */
  .rings{
    display:block;
    right: clamp(10px, 2vw, 22px);
    top: clamp(140px, 18vw, 220px);
    width: clamp(160px, 30vw, 230px);
    height: clamp(160px, 30vw, 230px);
    z-index: 1;
    opacity: .55;
  }

  /* 小画面ではみ出し防止 */
  .rings .ring--ccw{
    right: -18px;
    bottom: -18px;
  }

}








/* ==========================================================
   Bottom marquee (single row)
   ========================================================== */
.textLabel{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--labelH);
  background: var(--tiffany);
  display:flex;
  align-items:center;
  overflow:hidden;
  z-index: 50;
  border-top: 1px solid rgba(0,0,0,.18);
}

.textLabel .inner{
  display:flex;
  gap: 60px;
  white-space: nowrap;
  will-change: transform;
  animation: labelMarquee var(--marqueeDur) linear infinite;
  padding-left: 60px;
}

.textLabel .marquee{
  font-family: "Anton", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 1;
  color: rgba(0,0,0,.82);
}

@keyframes labelMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ==========================================================
   Curtain opening transition
   ========================================================== */
html.is-curtain-lock,
html.is-curtain-lock body{ overflow: hidden; }

.curtain{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: auto;
}

.curtain__panel{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50vw;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 10px, rgba(0,0,0,.12) 10px 20px),
    var(--curtainColor);
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.50),
    0 26px 80px rgba(0,0,0,.55);
  transform: translateX(0);
  will-change: transform;
}
.curtain__panel--left{ left: 0; }
.curtain__panel--right{ right: 0; }

.curtain__skip{
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
}

@keyframes curtainLeft{
  0%{ transform: translateX(0); }
  80%{ transform: translateX(-102%); }
  100%{ transform: translateX(-110%); }
}
@keyframes curtainRight{
  0%{ transform: translateX(0); }
  80%{ transform: translateX(102%); }
  100%{ transform: translateX(110%); }
}

.curtain.is-open .curtain__panel--left{ animation: curtainLeft var(--curtainDur) cubic-bezier(.2,.9,.2,1) forwards; }
.curtain.is-open .curtain__panel--right{ animation: curtainRight var(--curtainDur) cubic-bezier(.2,.9,.2,1) forwards; }

.curtain.is-fade{ opacity: 0; transition: opacity .28s linear; }

@media (prefers-reduced-motion: reduce){
  .curtain{ display:none !important; }
  .textLabel .inner{ animation: none !important; }
}


/* カーテンが開いている間、下のCTAをクリック可能にする */
.curtain.is-open{
  pointer-events: none;
}

/* SKIPボタンだけは押せるようにする */
.curtain__skip{
  pointer-events: auto;
}

.curtain__skip{ display:none !important; }


/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 980px){
  :root{ --labelH: 96px; }

  .fv_ticket{
    grid-template-columns: 1fr;
    grid-template-rows: 44vh 1fr;
    height: calc(100vh - var(--labelH));
  }

  .fv_ticket::after{ display:none; }
  .shapedividers_com-9315::before{ display:none; }

  .contents_under{ grid-template-columns: 1fr; }
  .contents_about{ display:none; }

  .menu_2{ display:block; }

  .titleText_news{ writing-mode: horizontal-tb; transform:none; }

  .btn_contact{ display:none; }
  .btn_contact_sp{ display:inline-flex; }
}






/* PCレスポンシブ：右カラムの文章が途切れないように 縦のスクロール追加 */
@media (min-width: 769px){
  .mainContents{
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .contents{
    height: auto;
    min-height: 100%;
  }
}

/* 高さが低いPCでは、余白とサイズを少し圧縮 */
@media (min-width: 769px) and (max-height: 820px){
  .mainContents{ padding: 14px 26px; }

  .line_logo{ margin: 10px 0 8px; }
  .title{ margin: 0 0 12px; font-size: clamp(20px, 2.4vw, 36px); }
  .line_menu{ margin: 12px 0 0; }

  .contents_under{ margin-top: 12px; gap: 14px; }
  .news{ margin-top: 6px; }
  .text_news{ padding: 10px 12px; gap: 12px; }

  .btn_link{ margin-top: 10px; gap: 10px; }
  .btn_link .btn_contact{ height: 48px; padding: 0 16px; }
  .btn_link .btn_x,
  .btn_link .btn_instagram,
  .btn_link .btn_line{ width: 48px; height: 48px; }

  .omoiWrap{ margin-top: 10px; gap: 12px; }
}



/* ==========================================================
   FIX: 769px以下で下スクロールできない（中身が切れる）対策
   ========================================================== */
@media (max-width: 769px){
  /* 固定フッター(マルキー)分だけ下に余白を確保 */
  .page{ padding-bottom: var(--labelH); }

  /* チケット全体を“伸びる”ようにして body スクロールを有効化 */
  .fv_ticket{
    height: auto;
    min-height: calc(100vh - var(--labelH));
    overflow-x: hidden;
    overflow-y: visible;
    grid-template-rows: 44vh auto; /* 2段目は中身の高さに合わせる */
  }

  /* 右側コンテンツの押し込みを解除 */
  .mainContents{ height: auto; }
  .contents{ height: auto; }
}






/* =========================
   BLOG文字：メニュー（btn_gallery / btn_goods）と同じ見え方にする
   ========================= */
.btn_blog{
  /* BLOG箱の背景と“文字の塗り”を一致させる（＝中が抜けて見えない） */
  --bg-fallback: rgba(129,216,208,.30);
  --bg: color-mix(in srgb, var(--tiffany) 30%, var(--paper));

  --outline: var(--ink);
  --out: clamp(1px, .14vw, 2px);

  /* 右下の“うっすら”影 */
  --txt-x: calc(var(--out) + 2px);
  --txt-y: calc(var(--out) + 2px);
  --txt-blur: 0px;
  --txt-shadow: rgba(0,0,0,.85);

  font-family: "Poppins","Noto Sans JP",sans-serif;
  font-weight: 800;

  /* 縦書き時にアルファベットを立てる（必要なら） */
  text-orientation: upright;

  /* ここが肝：strokeは使わない */
  -webkit-text-stroke: 0 transparent;

  color: var(--bg-fallback);
  color: var(--bg);

  text-shadow:
     var(--out) 0 0 var(--outline),
     calc(var(--out) * -1) 0 0 var(--outline),
     0 var(--out) 0 var(--outline),
     0 calc(var(--out) * -1) 0 var(--outline),
     var(--out) var(--out) 0 var(--outline),
     calc(var(--out) * -1) var(--out) 0 var(--outline),
     var(--out) calc(var(--out) * -1) 0 var(--outline),
     calc(var(--out) * -1) calc(var(--out) * -1) 0 var(--outline),
     var(--txt-x) var(--txt-y) var(--txt-blur) var(--txt-shadow);
}

/* hover時：黒塗りに合わせて、縁を白＋影も白寄り */
.blog:hover .btn_blog{
  --txt-shadow: rgba(255,255,255,.18);
  color: var(--ink);

  text-shadow:
     var(--out) 0 0 var(--paper),
     calc(var(--out) * -1) 0 0 var(--paper),
     0 var(--out) 0 var(--paper),
     0 calc(var(--out) * -1) 0 var(--paper),
     var(--out) var(--out) 0 var(--paper),
     calc(var(--out) * -1) var(--out) 0 var(--paper),
     var(--out) calc(var(--out) * -1) 0 var(--paper),
     calc(var(--out) * -1) calc(var(--out) * -1) 0 var(--paper),
     var(--txt-x) var(--txt-y) var(--txt-blur) var(--txt-shadow);
}


/* PC：BLOGの回転解除＋文字間隔を詰める（最優先で効かせる） */
@media (min-width: 981px){
  .blog .btn_blog{
    transform: none !important;       /* 180度回転を確実に打ち消す */
    text-orientation: upright;
    letter-spacing: -0.36em !important;
    line-height: .78 !important;  /* 0.95 → 0.78 くらいまで詰められる */
  }
}




/* 980以下で横書きにしてる時も同じ見え方のまま、サイズだけ少しUP */
@media (max-width: 980px){
  .btn_blog{
    font-size: clamp(26px, 6vw, 36px);
    letter-spacing: .10em;
  }
}





/* メニューボタン：中の文字（▶含む）をど真ん中に */
.btn_gallery,
.btn_goods{
  flex-direction: row; /* row-reverse をやめる */
  gap: 0;              /* 余計なズレ防止（念のため） */
  text-align: center;
}

/* “空の矢印”がズレ原因なので無効化 */
.btn_gallery::before,
.btn_goods::before{
  content: none;       /* or display:none; でもOK */
}