/*
Theme Name: エステサロン凛（Lightning子テーマ・試作）
Template: lightning
Version: 0.1
Description: 元テーマ salonrin の見た目を Lightning 上に再現する試作（2026-10-08 松野）
*/
:root{
  --rin-green:#b8975a; --rin-green-d:#3a342c; --rin-green-l:#f3f0ea; --rin-pink:#a8843f; --rin-orange:#8a7a63; --rin-text:#333;
}
body{ color:var(--rin-text); font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,sans-serif; background:#fff; }

/* ---- 上の帯（h1相当の説明文） ---- */
.rin-topbar{ background:var(--rin-green-d); color:#fff; font-size:11px; line-height:1.4; text-align:center; padding:4px 10px; }

/* ---- ヘッダー ---- */
.site-header{ background:#fff url(../salonrin/img/common/header_bg.png) repeat-x bottom; border:0; box-shadow:none; position:relative; }
.site-header-container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; position:relative; padding-top:10px; }
.site-header-logo{ margin:0 auto; text-align:center; flex:0 1 auto; padding:6px 0; }
.site-header-logo img{ max-height:96px; width:auto; }
.rin-tel{ position:absolute; right:12px; top:50%; transform:translateY(-50%); height:64px; width:auto; }

/* ---- グローバルナビ（緑のグラデーション帯） ---- */
.global-nav{ flex:0 0 100%; width:100%; margin-top:8px; background:linear-gradient(#dcc48c,#a8843f); border-top:1px solid #e6d6ac; border-bottom:3px solid var(--rin-green-d); box-shadow:0 0 0 100vmax #c9ab6a; clip-path:inset(0 -100vmax); }
.global-nav-list{ display:flex; justify-content:center; gap:0; margin:0 auto; max-width:1100px; padding:0; }
.global-nav-list > li{ border-left:1px solid rgba(255,255,255,.35); flex:1 1 0; text-align:center; position:relative; }
.global-nav-list > li:last-child{ border-right:1px solid rgba(255,255,255,.35); }
.global-nav-list > li > a{ color:#fff !important; font-weight:bold; font-size:15px; padding:16px 6px; display:block; text-shadow:0 1px 1px rgba(0,0,0,.3); }
.global-nav-list > li > a:hover{ background:rgba(255,255,255,.18); }
.global-nav-list > li > a .global-nav-name{ color:#fff; }
.global-nav-list > li > a::after, .global-nav-list > li > a .global-nav-description{ display:none; }
.global-nav-list .sub-menu{ background:#3a342c; }
.global-nav-list .sub-menu a{ color:#fff !important; }

/* ---- トップ：メインビジュアル ---- */
.rin-hero{ position:relative; width:100%; aspect-ratio:1300/500; max-height:520px; overflow:hidden; background:#f7f4ee; }
.rin-hero .slide{ position:absolute; inset:0; opacity:0; animation:rinfade 18s infinite; background-size:cover; background-position:center; }
.rin-hero .slide:nth-child(1){ animation-delay:0s; } .rin-hero .slide:nth-child(2){ animation-delay:6s; } .rin-hero .slide:nth-child(3){ animation-delay:12s; }
@keyframes rinfade{ 0%{opacity:0} 6%{opacity:1} 30%{opacity:1} 36%{opacity:0} 100%{opacity:0} }
.rin-hero .copy{ position:absolute; left:6%; top:50%; transform:translateY(-50%); max-width:52%; z-index:2; }
.rin-hero .copy h2{ margin:0 0 14px; font-family:'游明朝',YuMincho,'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN',serif; font-size:clamp(16px,2.1vw,28px); line-height:1.5; color:#444; font-weight:normal; border:0; padding:0; background:none; }
.rin-hero .copy h2 em{ font-style:normal; color:var(--rin-pink); font-weight:bold; }
.rin-hero .copy ul{ margin:0; padding:0; list-style:none; }
.rin-hero .copy li{ font-size:clamp(11px,1.2vw,15px); color:#555; border-bottom:1px dotted #aaa; padding:5px 0; margin:0; }

/* ---- トップ：店舗バナー・メニュータイル ---- */
.rin-bg2{ background:var(--rin-green-l); padding:34px 0 40px; }
.rin-wrap{ max-width:1100px; margin:0 auto; padding:0 16px; }
.rin-shops{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.rin-shops a{ flex:1 1 380px; max-width:534px; } .rin-shops img{ width:100%; height:auto; display:block; }
.rin-tiles{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.rin-tiles{ flex-wrap:nowrap; gap:10px; } .rin-tiles a{ flex:1 1 0; max-width:203px; min-width:0; } .rin-tiles img{ width:100%; height:auto; display:block; }

/* ---- トップ：本文＋サイド ---- */
.rin-cols{ max-width:1100px; margin:0 auto; padding:34px 16px 20px; display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:40px; align-items:start; }
.rin-video{ position:relative; padding-top:56.25%; margin-bottom:30px; } .rin-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.rin-h3{ background:linear-gradient(#dcc48c,#a8843f); color:#fff; font-size:18px; padding:9px 14px 9px 46px; margin:28px 0 8px; position:relative; border:0; border-radius:2px; }
.rin-h3::before{ content:'⚜'; position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:22px; color:#efe3c3; }
.rin-list{ margin:0; padding:0; list-style:none; }
.rin-list li{ display:flex; gap:14px; align-items:baseline; padding:11px 4px; border-bottom:1px dashed #aaa; margin:0; font-size:15px; }
.rin-date{ flex:0 0 auto; background:var(--rin-pink); color:#fff; font-size:11px; padding:1px 6px; border-radius:2px; }
.rin-sem .rin-date{ background:var(--rin-orange); }
.rin-list a{ color:#7a5f2b; text-decoration:none; } .rin-list a:hover{ text-decoration:underline; }
.rin-side img{ width:100%; height:auto; display:block; margin-bottom:12px; }
.rin-info{ border:1px solid #bbb; background:#fff; text-align:center; font-size:13px; }
.rin-info p{ margin:0; padding:8px 6px; } .rin-info .shop{ border-top:1px solid #ddd; padding:8px 6px; }
.rin-info .line{ color:#8a3b2a; font-weight:bold; }
.rin-info a.map{ display:inline-block; background:#b8975a; color:#fff; font-size:12px; padding:3px 12px; border-radius:2px; text-decoration:none; margin-top:4px; }

/* ---- フッター ---- */
.site-footer{ background:#2f2a25; color:#fff; border:0; }
.rin-footer{ max-width:1100px; margin:0 auto; padding:26px 16px 14px; display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; font-size:13px; line-height:1.8; }
.rin-footer a{ color:#fff; text-decoration:none; } .rin-footer a:hover{ text-decoration:underline; }
.rin-footer ul{ margin:0; padding:0 0 0 18px; list-style:disc; } .rin-footer .cols{ display:flex; gap:40px; }
.site-footer-copyright{ background:#1c1916; color:#fff; font-size:11px; padding:5px 0; } .site-footer-copyright p{ margin:0; text-align:center; }

/* 既定の要素を整理（トップのみ） */
.home .site-body{ padding:0; } .home .site-body-container{ max-width:none; padding:0; } .home .main-section{ width:100%; max-width:none; margin:0; padding:0; flex:1 1 100%; } .home .sub-section{ display:none; }

@media (max-width:900px){
  .rin-tiles{ flex-wrap:wrap; } .rin-tiles a{ flex:0 1 30%; }
  .global-nav-list{ flex-wrap:wrap; }
  .rin-cols{ grid-template-columns:1fr; gap:24px; }
  .rin-tel{ position:static; transform:none; height:46px; margin:0 auto; display:block; }
  .site-header-container{ flex-direction:column; padding:8px 0; }
  .rin-hero .copy{ max-width:90%; left:5%; } .rin-hero{ aspect-ratio:auto; min-height:300px; }
  .rin-hero .slide{ background-position:70% center; }
}

/* ---- Lightning の標準色を凛の緑に ---- */
:root{ --vk-color-primary:#b8975a; --vk-color-primary-dark:#3a342c; --vk-color-primary-vivid:#dcc48c; --vk-color-text-link:#7a5f2b; }
.page-header{ background:linear-gradient(#dcc48c,#a8843f); } .page-header_pageTitle{ color:#fff; }
.breadcrumb{ background:#faf8f4; }
.widget_title, .sub-section .widget h4{ border-color:var(--rin-green); }

/* 旧テーマの本文を載せるページ：Lightning側の余白と干渉しないよう最低限だけ整える */
.rin-legacy{ font-size:14px; line-height:1.8; overflow:hidden; text-align:left; }
.rin-legacy img{ max-width:100%; height:auto; }
.rin-legacy .f_left{ float:left; } .rin-legacy .f_right{ float:right; }
.rin-legacy::after{ content:""; display:block; clear:both; }
.entry-body .rin-legacy h3, .entry-body .rin-legacy h4{ margin-top:0; }
@media (max-width:700px){ .rin-legacy [class*="w"][class*="imgbox"], .rin-legacy .photoimg{ float:none; width:100% !important; } }

/* ヘッダーはスクロールしても固定しない（元サイトと同じ。固定すると高さが崩れる） */
.site-header, .header_scrolled .site-header, .site-header.site-header--fixed { position:static !important; top:auto !important; height:auto !important; transform:none !important; animation:none !important; box-shadow:none; }
.header_scrolled .site-header-container{ padding-top:10px; }
.header_scrolled .site-header-logo img{ max-height:96px; }
body{ padding-top:0 !important; }

/* 下層ページのサイド */
.rin-side-sub{ margin-bottom:20px; } .rin-side-sub img{ width:100%; height:auto; display:block; margin-bottom:10px; }
/* 予約フォームの表示（旧テーマの dl 表を最低限整える） */
.rin-legacy.reserve dl.dl1{ display:flex; gap:10px; border-bottom:1px dotted #bbb; padding:10px 0; margin:0; }
.rin-legacy.reserve dl.dl1 dt{ flex:0 0 26%; font-weight:bold; margin:0; } .rin-legacy.reserve dl.dl1 dd{ flex:1; margin:0; }
.rin-legacy.reserve input[type=text], .rin-legacy.reserve select{ padding:6px; border:1px solid #bbb; border-radius:3px; max-width:100%; }
.rin-legacy.reserve .send_btn{ background:#b8975a; color:#fff; border:0; padding:12px 34px; font-size:17px; border-radius:4px; cursor:pointer; margin:14px 6px; }
.rin-legacy.reserve .update_btn{ background:#888; }
@media (max-width:700px){ .rin-legacy.reserve dl.dl1{ display:block; } .rin-legacy.reserve dl.dl1 dt{ margin-bottom:4px; } }


/* ================= 配色：大理石風＋白＋ゴールド（ホットペッパーの雰囲気に合わせる） 2026-10-09 ================= */
:root{ --rin-green:#b8975a; --rin-green-d:#3a342c; --rin-green-l:#f3f0ea; --rin-gold:#b8975a; --rin-gold-d:#a8843f; --rin-ink:#2f2a25; }
body{ color:#3a342c; }
.rin-bg2{ background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='460'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.006 0.011' numOctaves='5' seed='11'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.52  0 0 0 0 0.48  0 0 0 -2.4 1.45'/></filter><rect width='100%' height='100%' fill='%23f6f3ee'/><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>"); background-size:700px 460px; }
.rin-topbar{ background:#2f2a25; color:#e6d6ac; letter-spacing:.04em; }
.site-header{ background:#fff; }
.global-nav{ background:linear-gradient(#dcc48c,#a8843f); border-top:1px solid #efe3c3; border-bottom:3px solid #8a6a2f; box-shadow:0 0 0 100vmax #c9ab6a; }
.global-nav-list > li{ border-left:1px solid rgba(255,255,255,.45); }
.global-nav-list > li > a{ text-shadow:0 1px 1px rgba(80,55,15,.35); }
.global-nav-list .sub-menu{ background:#8a6a2f; }
.rin-h3{ background:linear-gradient(#dcc48c,#a8843f); font-family:'游明朝',YuMincho,'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN',serif; letter-spacing:.06em; }
.rin-h3::before{ color:#fbf3dc; }
.rin-hero .copy h2 em{ color:#a8843f; }
.rin-date, .rin-sem .rin-date{ background:#b8975a; }
.page-header{ background:linear-gradient(#dcc48c,#a8843f); } .page-header_pageTitle{ font-family:'游明朝',YuMincho,'ヒラギノ明朝 ProN W3','Hiragino Mincho ProN',serif; letter-spacing:.08em; }
.breadcrumb{ background:#faf8f4; }
.site-footer{ background:#2f2a25; color:#e6d6ac; } .rin-footer a{ color:#e6d6ac; }
.site-footer-copyright{ background:#1c1916; color:#c9ab6a; }
.rin-info a.map, .rin-legacy.reserve .send_btn{ background:#a8843f; }
.rin-legacy th{ background:#b8975a !important; }
.rin-legacy.menu .c_lb, .rin-legacy.menu h4{ border-left-color:#b8975a; }

/* ===== 配色の調整 2026-10-09：茶色寄りのゴールド → 明るいシャンパンゴールド（ホットペッパーの写真の色合いに合わせる） ===== */
:root{ --rin-gold:#c5a572; --rin-gold-l:#efe4cb; --rin-gold-d:#9a7c4f; --rin-ink:#4a3b2a; }
body{ color:#4a4038; }
.rin-topbar{ background:#3b332b; color:#efe4cb; }
.global-nav{ background:linear-gradient(180deg,#f6eedb 0%,#e3cfa4 55%,#cdb07c 100%); border-top:1px solid #fbf6ea; border-bottom:2px solid #b0915f; box-shadow:0 0 0 100vmax #e6d4ad; }
.global-nav-list > li{ border-left:1px solid rgba(255,255,255,.75); } .global-nav-list > li:last-child{ border-right:1px solid rgba(255,255,255,.75); }
.global-nav-list > li > a, .global-nav-list > li > a .global-nav-name{ color:#4a3b2a !important; text-shadow:0 1px 0 rgba(255,255,255,.7); }
.global-nav-list > li > a:hover{ background:rgba(255,255,255,.35); }
.global-nav-list .sub-menu{ background:#f6eedb; } .global-nav-list .sub-menu a{ color:#4a3b2a !important; }
.rin-h3{ background:none; color:#7d6340; border:0; border-top:1px solid #efe4cb; border-bottom:1px solid #c5a572; padding:10px 14px 10px 40px; font-weight:normal; }
.rin-h3::before{ color:#c5a572; }
.rin-hero .copy h2 em{ color:#9a7c4f; }
.rin-date, .rin-sem .rin-date{ background:#9a7c4f; }
.page-header{ background:linear-gradient(180deg,#f6eedb,#e3cfa4); } .page-header_pageTitle{ color:#4a3b2a; text-shadow:0 1px 0 rgba(255,255,255,.6); }
.site-footer{ background:#3b332b; color:#efe4cb; } .rin-footer a{ color:#efe4cb; } .site-footer-copyright{ background:#2a241f; color:#d8c39a; }
.rin-info a.map, .rin-legacy.reserve .send_btn{ background:#9a7c4f; }
.rin-legacy th{ background:#c5a572 !important; color:#fff; }
a{ color:#8a6a3c; }

/* ===== 読みやすさの修正 2026-10-09：明るいゴールドの上は白字をやめ、濃い茶色の文字にする（コントラスト比4.5以上） ===== */
.page-header .page-header-title, .page-header h1{ color:#3f3224 !important; text-shadow:0 1px 0 rgba(255,255,255,.7); }
.rin-legacy th, .rin-legacy table th{ background:#efe4cb !important; color:#3f3224 !important; border:1px solid #e2d2ad !important; }
.global-nav-list .sub-menu, .global-nav-list .sub-menu li, .global-nav-list .sub-menu a{ background:#fbf6ea !important; color:#3f3224 !important; }
.global-nav-list .sub-menu a:hover{ background:#efe4cb !important; }
.rin-date, .rin-sem .rin-date, .rin-info a.map, .rin-legacy.reserve .send_btn{ background:#7a5f3c !important; color:#fff !important; }

/* ===== LINE のお問い合わせボタン（2026-10-09：問い合わせは電話ではなく LINE へ） ===== */
.rin-line-btn{ display:inline-flex; align-items:center; gap:8px; background:#7a5f3c; color:#fff !important; text-decoration:none !important; font-weight:bold; padding:8px 16px; border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.15); letter-spacing:.03em; }
.rin-line-btn:hover{ background:#5f4a2e; }
.rin-line-mark{ display:inline-block; background:#06c755; color:#fff; font-size:10px; font-weight:bold; line-height:1; padding:4px 5px; border-radius:5px; letter-spacing:0; }
.rin-head-cta{ display:flex; flex-direction:column; align-items:center; gap:4px; height:auto !important; }
.rin-head-cta .rin-head-lead{ font-size:12px; color:#4a3b2a; }
.rin-head-cta .rin-line-btn{ font-size:14px; padding:7px 14px; }
.rin-head-cta .rin-head-hours{ font-size:11px; color:#5a4a38; }
.rin-line-cta{ text-align:center; margin:14px 0; clear:both; }
.rin-line-cta .rin-line-btn{ font-size:16px; padding:12px 26px; }
@media (max-width:900px){ .rin-head-cta{ margin:6px auto 0; } }