@charset "UTF-8";
/* XREAS（クレアス）公式サイト スタイルシート
   デザイン: 案B ナチュラル（ベージュ基調・丸みカード） */

:root{
  --main:#5c4f42;      /* 基本テキスト（ブラウン） */
  --accent:#c9a86a;    /* アクセント（ゴールドベージュ） */
  --pink:#d89aa2;      /* 差し色（ダスティピンク） */
  --pink-bg:#f8ece9;   /* ピンク系背景 */
  --bg:#faf6ef;        /* 背景（クリーム） */
  --bg2:#f6ece4;       /* 背景2（ベージュ＋ほんのりピンク） */
  --white:#fffdf9;     /* カード背景 */
  --line:#06C755;      /* LINEグリーン */
  --hpb:#f25c05;       /* ホットペッパーオレンジ */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{
  font-family:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--main);background:var(--bg);
  line-height:2;letter-spacing:.05em;padding-bottom:64px;
}
.en-serif{font-family:"Cormorant Garamond",Georgia,serif}
img{max-width:100%;height:auto;display:block}
.inner{max-width:960px;margin:0 auto;padding:0 20px}

/* 仮画像プレースホルダー（写真差し替え時にimgタグへ置換） */
.ph{background:linear-gradient(135deg,#e8dcc8,#d9c9a8);display:flex;align-items:center;justify-content:center;color:#a08f70;font-size:13px;text-align:center}

/* ===== ヘッダー ===== */
header{position:sticky;top:0;background:rgba(250,246,239,.96);z-index:100;backdrop-filter:blur(4px)}
.h-in{max-width:960px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;font-weight:600;letter-spacing:.22em;line-height:1.3}
.logo small{display:block;font-size:10px;color:var(--accent);letter-spacing:.08em}
.h-right{display:none;align-items:center;gap:18px}
.h-tel{text-align:right;line-height:1.4}
.h-tel a{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:600;color:var(--main);text-decoration:none;letter-spacing:.04em}
.h-tel small{display:block;font-size:10px;color:#a89a86}
/* ナビバー（エルクラーレ風：茶色帯＋英語タブ） */
.navbar{display:none}
.navbar a{color:#fff;text-decoration:none;text-align:center;padding:10px 30px;font-family:"Cormorant Garamond",Georgia,serif;font-size:15px;letter-spacing:.2em;line-height:1.3;border-left:1px solid rgba(255,255,255,.2);transition:background .3s}
.navbar a:last-child{border-right:1px solid rgba(255,255,255,.2)}
.navbar a:hover{background:rgba(255,255,255,.12)}
.navbar a span{display:block;font-family:"Noto Sans JP",sans-serif;font-size:9px;letter-spacing:.14em;opacity:.75}

/* ハンバーガー */
.menu-btn{width:44px;height:44px;border:none;background:none;cursor:pointer;position:relative;z-index:300}
.menu-btn span{display:block;width:24px;height:2px;background:var(--main);margin:5px auto;transition:.3s}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sp-nav{position:fixed;inset:0;background:rgba(250,246,239,.98);z-index:200;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;opacity:0;visibility:hidden;transition:.3s}
.sp-nav.open{opacity:1;visibility:visible}
.sp-nav a{font-size:16px;color:var(--main);text-decoration:none;letter-spacing:.15em}

@media(min-width:768px){
  .navbar{display:flex;justify-content:center;background:var(--main)}
  .h-right{display:flex}
  .menu-btn{display:none}
}

/* ===== ヒーロー（写真スライダー＋中央キャッチコピー） ===== */
.hero{position:relative;height:72vh;min-height:440px;overflow:hidden}
.hero-slider{position:absolute;inset:0}
.hero-slider .slide{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.4s ease;will-change:opacity,transform}
.hero-slider .slide.active{opacity:1;animation:kenburns 6s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-txt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 20px;background:linear-gradient(rgba(92,79,66,.22),rgba(216,154,162,.18))}
.hero-en{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(13px,1.8vw,17px);letter-spacing:.5em;text-indent:.5em;color:#fff;opacity:.85;text-shadow:0 1px 10px rgba(60,45,35,.5);margin-bottom:6px}
.hero-name{font-family:"Shippori Mincho","Yu Mincho",serif;font-size:clamp(36px,7vw,62px);font-weight:500;letter-spacing:.3em;text-indent:.3em;color:#fff;text-shadow:0 2px 20px rgba(60,45,35,.55);line-height:1.4}
.hero-catch{font-family:"Shippori Mincho","Yu Mincho",serif;font-size:clamp(14px,2.3vw,19px);color:#fff;letter-spacing:.18em;margin-top:14px;text-shadow:0 1px 12px rgba(60,45,35,.55)}
.hero-sub{position:absolute;bottom:16px;left:0;right:0;z-index:2;text-align:center;font-size:clamp(10px,1.5vw,12px);color:#fff;opacity:.72;letter-spacing:.12em;text-shadow:0 1px 8px rgba(60,45,35,.5)}

/* ===== セクション共通 ===== */
section{padding:64px 0}
.sec-alt{background:var(--bg2)}
.sec-t{text-align:center;margin-bottom:40px}
.sec-t .en{font-family:"Cormorant Garamond",Georgia,serif;font-size:34px;font-weight:500;letter-spacing:.18em;color:var(--main);line-height:1.3}
.sec-t .jp{display:block;font-size:12px;color:var(--pink);letter-spacing:.2em;margin-top:4px}

/* ===== コンセプト ===== */
.concept-txt{max-width:640px;margin:0 auto;text-align:center}
.concept-lead{font-size:clamp(17px,3vw,21px);font-weight:600;letter-spacing:.12em;margin-bottom:18px}
.concept-txt p:not(.concept-lead){font-size:14px;color:#7a6c5c;text-align:left}
@media(min-width:768px){.concept-txt p:not(.concept-lead){text-align:center}}

/* ===== 選ばれる理由 ===== */
.reasons{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:768px){.reasons{grid-template-columns:repeat(3,1fr)}}
.reason{background:var(--white);border-radius:18px;padding:28px 22px;text-align:center;box-shadow:0 2px 10px rgba(92,79,66,.06)}
.reason .mark{width:52px;height:52px;border-radius:50%;background:var(--pink-bg);color:var(--pink);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:20px}
.reason h3{font-size:15px;margin-bottom:8px}
.reason p{font-size:13px;text-align:left;color:#7a6c5c}

/* ===== メニュー ===== */
.menu-box{background:var(--white);border-radius:18px;padding:30px 24px;max-width:680px;margin:0 auto 28px;box-shadow:0 2px 10px rgba(92,79,66,.06)}
.menu-box h3{font-size:15px;color:var(--accent);margin-bottom:14px;display:flex;align-items:baseline;gap:10px}
.menu-box h3 .en-sub{font-family:"Cormorant Garamond",Georgia,serif;font-size:13px;color:var(--pink);font-weight:500;letter-spacing:.12em}
.menu-box h3::after{content:"";flex:1;height:1px;background:var(--bg2);align-self:center}
.m-row{display:flex;justify-content:space-between;font-size:14px;padding:10px 2px;border-bottom:1px dashed #e5dac4}
.m-row .price{white-space:nowrap;margin-left:16px;font-weight:600}
.note{font-size:11px;color:#a89a86;text-align:center;margin-top:16px}

/* ===== お客様の声 ===== */
.voices{display:grid;gap:20px;grid-template-columns:1fr;max-width:640px;margin:0 auto}
@media(min-width:900px){.voices{grid-template-columns:repeat(3,1fr);max-width:1000px;align-items:start}}
.voice{background:var(--white);border-radius:18px;padding:28px;font-size:14px;position:relative}
.voice::before{content:"“";position:absolute;top:-6px;left:18px;font-size:56px;color:var(--accent);font-family:Georgia,serif}
.voice .stars{color:var(--accent);margin-bottom:8px}
.voice .who{font-size:12px;color:#a89a86;margin-top:10px}
.badge{text-align:center;margin-bottom:26px;font-size:14px}
.badge strong{font-size:26px;color:var(--accent)}

/* ===== オーナー・サロン紹介 ===== */
.owner-wrap{display:grid;gap:28px;grid-template-columns:1fr;max-width:760px;margin:0 auto;align-items:center}
@media(min-width:768px){.owner-wrap{grid-template-columns:240px 1fr}}
.owner-photo{width:200px;height:340px;object-fit:cover;border-radius:18px;margin:0 auto;display:block;box-shadow:0 2px 12px rgba(92,79,66,.12)}
.owner-txt h3{font-size:16px;margin-bottom:4px}
.owner-txt .role{font-size:12px;color:var(--accent);margin-bottom:12px}
.owner-txt p{font-size:14px;color:#7a6c5c}
/* フォトギャラリー（13枠・HPB準拠） */
.pgallery{display:grid;gap:18px 14px;grid-template-columns:repeat(2,1fr);max-width:900px;margin:0 auto}
@media(min-width:768px){.pgallery{grid-template-columns:repeat(3,1fr)}}
.pgallery figure{margin:0}
.pgallery .ph,.pgallery img{aspect-ratio:4/3;width:100%;border-radius:14px;font-size:11px;object-fit:cover;display:flex}
.pgallery figcaption{padding:8px 4px 0;line-height:1.5}
.pgallery figcaption strong{display:block;font-size:13px}
.pgallery figcaption span{font-size:11px;color:#a89a86}

/* ===== FAQ ===== */
.faq{max-width:680px;margin:0 auto}
.faq details{background:var(--white);border-radius:14px;margin-bottom:12px;padding:16px 20px;font-size:14px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{padding-top:10px;color:#7a6c5c;font-size:13px}

/* ===== 店舗情報 ===== */
.info-wrap{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:768px){.info-wrap{grid-template-columns:1fr 1fr}}
.info-t{width:100%;font-size:14px;border-collapse:collapse}
.info-t th{width:7em;text-align:left;padding:10px 4px;border-bottom:1px solid #e5dac4;vertical-align:top}
.info-t td{padding:10px 4px;border-bottom:1px solid #e5dac4}
.info-t a{color:var(--main)}
.map iframe{width:100%;height:280px;border:0;border-radius:18px}

/* ===== Contact（LINE QR・Instagram・電話） ===== */
.contact-grid{display:grid;gap:20px;grid-template-columns:1fr;max-width:900px;margin:0 auto}
@media(min-width:768px){.contact-grid{grid-template-columns:repeat(2,1fr);max-width:640px}}
.contact-card{background:var(--white);border-radius:18px;padding:28px 22px;text-align:center;box-shadow:0 2px 10px rgba(92,79,66,.06)}
.contact-card h3{font-size:15px;color:var(--accent);margin-bottom:14px}
.contact-card p{font-size:13px;color:#7a6c5c}
.contact-card .qr{width:140px;height:140px;margin:0 auto 14px;border-radius:12px;font-size:11px;display:block;object-fit:contain}
.contact-card p a{color:var(--line);font-weight:600}
.tel-big{margin:18px 0 10px}
.tel-big a{font-size:22px;font-weight:600;color:var(--main);text-decoration:none;letter-spacing:.05em}

/* ===== CTA ===== */
.cta{background:var(--main);color:#fff;text-align:center;padding:52px 20px;border-radius:24px 24px 0 0}
.cta p{margin-bottom:18px}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 30px;font-size:14px;text-decoration:none;color:#fff;border-radius:999px}
.btn-line{background:var(--line)}
.btn-hpb{background:var(--hpb)}
.btn-tel{border:1px solid #fff}

footer{padding:26px 20px 40px;text-align:center;font-size:11px;color:#a89a86}

/* ===== 追従予約バー ===== */
.fixbar{position:fixed;bottom:0;left:0;right:0;display:flex;z-index:150}
.fixbar a{flex:1;text-align:center;padding:16px 4px;color:#fff;font-size:13px;text-decoration:none}
.fb-line{background:var(--line)}
.fb-hpb{background:var(--hpb)}
@media(min-width:768px){.fixbar{max-width:400px;left:auto;right:20px;bottom:20px;border-radius:999px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.18)}}