/* ===================================================================
   yorutenLP 共通パーツ (2026-08新設)
   固定ナビ / お問い合わせフォーム / legalページ
   全ページから <link rel="stylesheet" href="/assets/common.css"> で読み込む
   ここを直すと全ページに反映される
   =================================================================== */

:root{
  --yl-gold:#D8B24A; --yl-gold-deep:#B3902F; --yl-night:#101216;
  --yl-night2:#181B22; --yl-paper:#F7F4EC; --yl-mute:#B9B2A0; --yl-mute2:#8A8272;
}

/* ========== 固定ナビゲーション ========== */
.yl-nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  background:rgba(16,18,22,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(216,178,74,.22);
  transform:translateY(-100%); transition:transform .32s ease;
}
.yl-nav.is-visible{transform:translateY(0)}
.yl-nav-inner{
  max-width:860px; margin:0 auto; height:46px;
  display:flex; align-items:center; gap:4px; padding:0 10px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.yl-nav-inner::-webkit-scrollbar{display:none}
.yl-nav-home{
  flex:none; font-family:'Outfit',sans-serif; font-weight:800; font-size:12px;
  letter-spacing:.08em; color:var(--yl-gold); text-decoration:none;
  padding:6px 10px 6px 4px; margin-right:2px; white-space:nowrap;
}
.yl-nav a.yl-nav-link{
  flex:none; font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:12px; font-weight:700; color:#E7DCC2; text-decoration:none;
  padding:7px 11px; border-radius:999px; white-space:nowrap; transition:.18s;
}
.yl-nav a.yl-nav-link:hover,.yl-nav a.yl-nav-link:focus-visible{
  background:rgba(216,178,74,.15); color:var(--yl-gold);
}
/* お問い合わせだけは、ナビが横スクロールしても常に右端に見えるよう固定する
   (スマホ幅で一番押してほしいボタンが画面外に隠れるのを防ぐ) */
.yl-nav a.yl-nav-cta{
  background:linear-gradient(135deg,var(--yl-gold),var(--yl-gold-deep));
  color:var(--yl-night); margin-left:auto;
  position:sticky; right:0; flex:none;
}
.yl-nav a.yl-nav-cta:hover,.yl-nav a.yl-nav-cta:focus-visible{
  background:linear-gradient(135deg,#E5C25F,var(--yl-gold)); color:var(--yl-night);
}

/* スマホでは短いラベルに切り替えて、5項目すべてを画面内に収める */
.yl-t-short{display:none}
@media (max-width:560px){
  .yl-t-full{display:none}
  .yl-t-short{display:inline}
  .yl-nav-inner{gap:1px; padding:0 8px}
  .yl-nav-home{font-size:11px; padding:6px 6px 6px 2px; margin-right:0}
  .yl-nav a.yl-nav-link{font-size:11.5px; padding:7px 8px}
  .yl-nav a.yl-nav-cta{box-shadow:-10px 0 10px rgba(16,18,22,.92)}
}
@media (prefers-reduced-motion:reduce){
  .yl-nav{transition:none}
}

/* ========== お問い合わせフォーム ========== */
.yl-contact{
  padding:56px 20px 60px;
  background:var(--yl-night);
  border-top:1px solid rgba(216,178,74,.18);
}
.yl-contact-inner{max-width:560px; margin:0 auto}
.yl-contact .yl-label{
  font-family:'Outfit',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--yl-gold);
  text-align:center; margin:0 0 14px;
}
.yl-contact h2{
  font-family:'Noto Serif JP',serif; font-weight:900;
  font-size:clamp(20px,5.6vw,26px); line-height:1.65; text-align:center;
  color:var(--yl-paper); margin:0 0 12px; word-break:keep-all;
}
.yl-contact h2 span{color:var(--yl-gold)}
.yl-contact .yl-lead{
  font-size:13px; color:var(--yl-mute); text-align:center;
  line-height:1.95; margin:0 0 26px;
}
.yl-form{
  background:rgba(247,244,236,.04);
  border:1px solid rgba(216,178,74,.25);
  border-radius:14px; padding:24px 20px 26px;
}
.yl-field{margin-bottom:18px}
.yl-field:last-of-type{margin-bottom:22px}
.yl-field label{
  display:block; font-size:12.5px; font-weight:700; color:#E7DCC2;
  margin-bottom:7px; letter-spacing:.02em;
}
.yl-req{
  display:inline-block; font-size:9.5px; font-weight:700; vertical-align:middle;
  background:rgba(216,178,74,.9); color:var(--yl-night);
  border-radius:3px; padding:2px 6px; margin-left:6px;
}
.yl-any{
  display:inline-block; font-size:9.5px; font-weight:700; vertical-align:middle;
  background:rgba(247,244,236,.14); color:var(--yl-mute);
  border-radius:3px; padding:2px 6px; margin-left:6px;
}
.yl-form input[type=text],
.yl-form input[type=email],
.yl-form input[type=tel],
.yl-form select,
.yl-form textarea{
  width:100%; font-family:'Zen Kaku Gothic New',sans-serif; font-size:16px;
  color:var(--yl-paper); background:rgba(16,18,22,.75);
  border:1px solid rgba(216,178,74,.3); border-radius:9px;
  padding:12px 13px; line-height:1.6; -webkit-appearance:none; appearance:none;
}
.yl-form select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23D8B24A' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px;
}
.yl-form textarea{min-height:120px; resize:vertical}
.yl-form input:focus,.yl-form select:focus,.yl-form textarea:focus{
  outline:none; border-color:var(--yl-gold); background:rgba(16,18,22,.95);
  box-shadow:0 0 0 3px rgba(216,178,74,.16);
}
.yl-form input::placeholder,.yl-form textarea::placeholder{color:#6E6A5E}
.yl-hint{font-size:11px; color:var(--yl-mute2); margin:6px 0 0; line-height:1.7}
.yl-submit{
  display:block; width:100%; cursor:pointer;
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:15.5px; font-weight:700;
  color:var(--yl-night); background:linear-gradient(135deg,var(--yl-gold),var(--yl-gold-deep));
  border:none; border-radius:999px; padding:16px 20px; letter-spacing:.02em;
  transition:transform .15s, filter .15s;
}
.yl-submit:hover{filter:brightness(1.08)}
.yl-submit:active{transform:scale(.98)}
.yl-submit small{display:block; font-size:11px; font-weight:500; margin-top:3px; opacity:.75}
.yl-privacy{
  font-size:11px; color:var(--yl-mute2); text-align:center;
  margin:14px 0 0; line-height:1.8;
}
.yl-privacy a{color:var(--yl-mute); text-decoration:underline}
.yl-privacy a:hover{color:var(--yl-gold)}
.yl-or{
  text-align:center; font-size:12px; color:var(--yl-mute2);
  margin:26px 0 14px; position:relative;
}
.yl-or::before,.yl-or::after{
  content:""; position:absolute; top:50%; width:calc(50% - 46px); height:1px;
  background:rgba(216,178,74,.2);
}
.yl-or::before{left:0} .yl-or::after{right:0}
.yl-alt{display:flex; flex-direction:column; gap:10px}
.yl-alt a{
  display:block; text-align:center; text-decoration:none; font-weight:700;
  font-size:14px; padding:13px 18px; border-radius:999px;
}
.yl-alt a small{display:block; font-size:11px; font-weight:500; opacity:.85; margin-top:2px}
.yl-alt .yl-line{background:#06c755; color:#fff}
.yl-alt .yl-tel{
  background:rgba(247,244,236,.06); color:var(--yl-paper);
  border:1px solid rgba(216,178,74,.35);
}
/* 試着室からの引き継ぎ表示 */
.yl-carry{
  display:none; background:rgba(216,178,74,.1);
  border:1px dashed rgba(216,178,74,.5); border-radius:10px;
  padding:12px 14px; margin-bottom:18px; font-size:12.5px; color:#F1E9D6; line-height:1.8;
}
.yl-carry.is-on{display:block}
.yl-carry b{color:var(--yl-gold)}

/* ========== legal ページ ========== */
.yl-legal-body{
  font-family:'Zen Kaku Gothic New',sans-serif; color:var(--yl-paper);
  background:var(--yl-night); line-height:1.9; margin:0;
}
.yl-legal-wrap{max-width:680px; margin:0 auto; padding:0 22px 70px}
.yl-legal-head{
  padding:78px 22px 34px; text-align:center;
  background:radial-gradient(120% 70% at 50% -10%,rgba(216,178,74,.14),transparent 60%);
}
.yl-legal-head .yl-label{
  font-family:'Outfit',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--yl-gold); margin:0 0 14px;
}
.yl-legal-head h1{
  font-family:'Noto Serif JP',serif; font-weight:900;
  font-size:clamp(22px,6.2vw,30px); line-height:1.6; margin:0; word-break:keep-all;
}
.yl-legal-head p{font-size:13px; color:var(--yl-mute); margin:14px 0 0}
.yl-legal-wrap h2{
  font-family:'Noto Serif JP',serif; font-size:17px; font-weight:700;
  color:var(--yl-gold); margin:42px 0 12px; padding-bottom:8px;
  border-bottom:1px solid rgba(216,178,74,.25); line-height:1.6;
}
.yl-legal-wrap h2:first-child{margin-top:34px}
.yl-legal-wrap p{font-size:13.5px; color:#DDD6C6; margin:0 0 14px}
.yl-legal-wrap ul,.yl-legal-wrap ol{margin:0 0 16px; padding-left:1.3em}
.yl-legal-wrap li{font-size:13.5px; color:#DDD6C6; margin-bottom:7px}
.yl-legal-wrap a{color:var(--yl-gold); text-decoration:underline}
.yl-legal-table{
  width:100%; border-collapse:collapse; margin:0 0 18px; font-size:13px;
  border:1px solid rgba(216,178,74,.22); border-radius:10px; overflow:hidden;
}
.yl-legal-table th,.yl-legal-table td{
  text-align:left; padding:13px 14px; vertical-align:top; line-height:1.85;
  border-bottom:1px solid rgba(216,178,74,.16);
}
.yl-legal-table th{
  background:rgba(216,178,74,.09); color:var(--yl-gold);
  font-weight:700; width:34%; white-space:nowrap;
}
.yl-legal-table td{color:#DDD6C6}
.yl-legal-table tr:last-child th,.yl-legal-table tr:last-child td{border-bottom:none}
@media (max-width:520px){
  .yl-legal-table,.yl-legal-table tbody,.yl-legal-table tr,
  .yl-legal-table th,.yl-legal-table td{display:block; width:100%}
  .yl-legal-table th{border-bottom:none; padding-bottom:4px}
  .yl-legal-table td{padding-top:4px}
}
.yl-legal-note{
  background:rgba(247,244,236,.04); border:1px solid rgba(216,178,74,.22);
  border-radius:12px; padding:18px 20px; margin:0 0 18px;
}
.yl-legal-note p:last-child{margin-bottom:0}
.yl-legal-updated{
  font-size:12px; color:var(--yl-mute2); text-align:right;
  margin:34px 0 0; padding-top:16px; border-top:1px solid rgba(216,178,74,.15);
}

/* ========== legal リンク行(全ページのフッターに追加) ========== */
.yl-footer-legal{
  margin-top:12px; font-size:11.5px; line-height:2;
}
.yl-footer-legal a{color:#9A9384; text-decoration:none}
.yl-footer-legal a:hover{color:var(--yl-gold); text-decoration:underline}

/* 固定ナビ分の余白: 固定CTAがあるページと衝突しないよう bottom は触らない */
html{scroll-padding-top:56px}