/* =========================================================
   共通CTA（.cta2）── 嵐山店と同じ構造を、祇園の暗い地に置き換えたもの

   嵐山店の作り：
     section  写真背景 ＋ 薄いベール、padding 88px、角丸0
     └ .cta-in  中央 720px の半透明パネル（不透明度.9）＋1px罫線
        Reservation / コピー（明朝34px）/ 補足 / ボタン2つ / 注記

   祇園版の違いは「地が暗いこと」だけ。
   ベールは明るい和紙色ではなく濃紫、パネルも暗い半透明、罫線は赤金。
   背景は花の写真＋うっすら動くグラデーション。
   ========================================================= */
.cta2{position:relative;isolation:isolate;overflow:hidden;
  padding:112px 0;background:#17102C}
.cta2.cta2--photo{background-color:#2A1150!important}  /* 旧CTAと同じ下地 */
/* skin-machiya.css の交互背景ルール
   `main.site-main > section:nth-of-type(odd){background:…;background-image:none}`
   はクラス1個＋型2個。クラスの数が先に比較されるので、クラス2個にすれば勝てる。 */
/* skin の交互ルールが `background:#…!important` というショートハンドなので、
   background-size / repeat も !important で auto・repeat に戻される。
   その結果、写真が cover にならずタイル状に繰り返される。
   個別プロパティすべてに !important を付けて打ち消す。 */
.cta2.cta2--photo{background-image:var(--cta2-bg)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important}   /* 旧CTAと同じ center/cover の見え方 */

/* 背景の動画（トップページ専用）。パネルの下に敷く */
.cta2-media{position:absolute;inset:0;z-index:0}
.cta2-media video,.cta2-media iframe,.cta2-media img{
  width:100%;height:100%;object-fit:cover;display:block}

/* ベール。
   以前は写真全体に .72〜.78 の暗幕をかけていたため、
   ①花が沈んで「予約」の場として重く・怖い印象になり
   ②グラデーションの動きも暗幕に埋もれて見えなかった。
   考え方を変える：面全体を暗くするのではなく、
   「読ませる場所（パネル）だけ暗くし、まわりの花は明るいまま残す」。
   下端だけ少し締めて、次のセクションとの境目を作る。 */
.cta2-veil{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,
    rgba(23,16,44,.20) 0%,
    rgba(23,16,44,.06) 34%,
    rgba(23,16,44,.12) 70%,
    rgba(23,16,44,.44) 100%)}

/* 動く光源。色面を動かすのではなく、光が左から右へゆっくり通る。
   赤金が主、差し色として赤。面（暗幕）は紫のまま保ち、赤は
   「動く光」と「パネル」だけに置く＝赤い面の上に赤いボタンを乗せない。
   transform だけを動かすので合成のみで済み、描画は発生しない。
   12秒で左端から右端まで。18秒では動いて見えないとの指摘を受けて短縮。 */
.cta2-veil::after{content:"";position:absolute;
  top:-30%;left:0;width:52%;height:160%;
  background:radial-gradient(closest-side,
    rgba(200,154,99,.28) 0%, rgba(176,16,48,.30) 44%, rgba(176,16,48,0) 78%);
  animation:cta2light 12s ease-in-out infinite alternate}
@keyframes cta2light{
  from{transform:translateX(-24%)}
  to  {transform:translateX(116%)}
}
@media(prefers-reduced-motion:reduce){ .cta2-veil::after{animation:none;transform:translateX(46%)} }

/* 中央のパネル。
   文字色は skin-machiya.css の `main.site-main > section p{color:…}`（クラス1個）
   より後に読まれるため、クラス2個に上げて確実に勝たせる。 */
.cta2-in{position:relative;z-index:2;
  max-width:720px;margin:0 auto;padding:46px 52px;
  background:rgba(42,14,30,.78);   /* 濃紫 → 臙脂寄り。赤は面ではなくパネルで温度を出す */
  border:1px solid rgba(200,154,99,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  text-align:center}

.cta2 .cta2-tag{display:block;font-family:'Cormorant Garamond','Zen Kaku Gothic New',sans-serif;
  font-weight:600;font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;
  color:#C89A63;margin-bottom:14px}
.cta2 .cta2-copy{font-family:'Shippori Mincho',serif;font-weight:600;
  font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.6;letter-spacing:.08em;
  color:#fff;margin:0 0 12px}
.cta2 .cta2-sub{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:400;
  font-size:.85rem;line-height:1.95;letter-spacing:.04em;color:#E2D8E8;margin:0 0 26px}

.cta2-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.cta2 .cta2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:200px;padding:15px 26px;text-decoration:none;
  font-family:'Cormorant Garamond','Zen Kaku Gothic New',sans-serif;
  font-weight:600;font-size:.82rem;letter-spacing:.1em;
  border:1px solid transparent;transition:background-color .3s,border-color .3s,color .3s}
.cta2 .cta2-go{background:#B01030;color:#fff;border-color:rgba(255,255,255,.18)}
.cta2 .cta2-go:hover{background:#C8153A}
.cta2-go i{font-style:normal;transition:transform .3s}
.cta2-go:hover i{transform:translateX(4px)}
/* 電話は写真の上に透明で置いていたため、明るい写真では文字が沈んだ。
   副次的な導線なので主導線より控えめのままだが、地を敷いて文字は白にする。 */
.cta2 .cta2-tel{background:rgba(23,16,44,.5);color:#fff;border-color:rgba(200,154,99,.65)}
.cta2 .cta2-tel:hover{color:#fff;border-color:#C89A63;background:rgba(200,154,99,.12)}

/* 外国語ページ：電話は日本語対応のみのため電話ボタンを出さない。
   残った予約ボタン1つを中央に置く。ページCSSで .cta2-acts の
   justify-content が上書きされても中央のままにしたいので明示する。 */
.cta2 .cta2-acts--single{justify-content:center}
.cta2 .cta2-acts--single .cta2-btn{margin-inline:auto}

.cta2 .cta2-note{font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:.72rem;line-height:1.8;letter-spacing:.04em;color:#A99DB4;margin:0}

@media(max-width:900px){
  .cta2{padding:76px 0}
  .cta2-in{margin:0 20px;padding:34px 24px}
  .cta2-acts{flex-direction:column;gap:10px}
  .cta2 .cta2-btn{width:100%;min-width:0}
}