/* Start custom CSS for html, class: .elementor-element-9582f66 *//* ==========================================================================
   積凪 MOKURASU棟 PRページ  ／  Elementor 固定ページ用 個別CSS
   --------------------------------------------------------------------------
   ・すべて #mkr 配下にスコープ（ID＋mkr- 接頭辞）。既存サイト（Astra / Elementor）
     のスタイルと干渉しない／既存ページへも影響しない作りです。
   ・フォントは既存サイトと同じ Noto Serif JP / Noto Sans JP / Catamaran / Barlow Condensed。
   ・貼り付け先：固定ページを Elementor で開く → 左下の歯車「ページ設定」→「カスタムCSS」
   ========================================================================== */

/* ---------- 0. 変数 & ベース ---------- */
#mkr{
  --mkr-serif:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --mkr-sans:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --mkr-en:"Catamaran", "Noto Sans JP", sans-serif;
  --mkr-num:"Barlow Condensed", "Catamaran", sans-serif;

  --mkr-ink:#151515;          /* 既存サイトの文字色 */
  --mkr-soft:#4B4F58;         /* 既存サイト本文グレー */
  --mkr-faint:#8b8f97;
  --mkr-line:rgba(21,21,21,.16);
  --mkr-paper:#ffffff;

  --mkr-max:900px;
  --mkr-wide:1180px;

  position:relative;
  display:block;
  width:100%;
  background:var(--mkr-paper);
  color:var(--mkr-ink);
  font-family:var(--mkr-sans);
  font-size:15px;
  font-weight:400;
  line-height:1.9;
  letter-spacing:normal;
  text-align:left;
  text-transform:none;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 1. 内部リセット（テーマ・Elementor側の汎用指定を打ち消す） ---------- */
#mkr, #mkr *, #mkr *::before, #mkr *::after{ box-sizing:border-box; }
#mkr *{ font-style:normal; }
#mkr section, #mkr header, #mkr div{ background:none; }
#mkr section, #mkr header{ margin:0; padding:0; border:0; display:block; }
#mkr h1, #mkr h2, #mkr h3, #mkr p, #mkr dl, #mkr dt, #mkr dd,
#mkr ul, #mkr li, #mkr figure{
  margin:0; padding:0; border:0; background:none;
  text-transform:none; text-shadow:none; letter-spacing:normal; font-weight:400;
}
#mkr ul, #mkr li{ list-style:none; }
#mkr a, #mkr a:hover, #mkr a:focus, #mkr a:visited{
  text-decoration:none; box-shadow:none; outline-offset:3px;
}
#mkr a{ color:inherit; background:none; border-bottom:0; }
#mkr img, #mkr svg{ display:block; max-width:100%; border:0; border-radius:0; box-shadow:none; vertical-align:baseline; }
#mkr svg{ height:auto; }
#mkr img{ height:auto; }
#mkr br{ display:inline; }

/* ---------- 2. レイアウト部品 ---------- */
#mkr .mkr-wrap{ max-width:var(--mkr-wide); margin:0 auto; padding:0 40px; }
#mkr .mkr-col { max-width:var(--mkr-max);  margin:0 auto; padding:0 40px; }
#mkr .mkr-sec { padding:130px 0; }
#mkr .mkr-vline{ width:1px; height:64px; background:var(--mkr-line); margin:0 auto; }

/* 英字見出し（既存サイト "Concept" "Guest House" と同じ Catamaran 200） */
#mkr .mkr-eyebrow{
  display:block;
  font-family:var(--mkr-en);
  font-weight:200;
  font-size:clamp(22px, 2.4vw, 28px);
  line-height:1.4;
  letter-spacing:.06em;
  color:var(--mkr-ink);
  margin:0 0 14px;
}
#mkr .mkr-h2{
  font-family:var(--mkr-serif);
  font-weight:600;
  font-size:clamp(22px, 2.6vw, 32px);
  line-height:1.7;
  letter-spacing:.04em;
  color:var(--mkr-ink);
}
#mkr .mkr-h3{
  font-family:var(--mkr-serif);
  font-weight:600;
  font-size:18px;
  line-height:1.7;
  letter-spacing:.04em;
  color:var(--mkr-ink);
}
#mkr .mkr-title{ text-align:center; margin-bottom:64px; }
#mkr .mkr-label{
  display:block;
  font-family:var(--mkr-en);
  font-weight:400;
  font-size:12px;
  line-height:1.6;
  letter-spacing:.16em;
  color:var(--mkr-faint);
}

/* ふわっと表示（JSが動いたときだけ有効＝JSなしでも内容は必ず見える） */
#mkr.mkr-js .mkr-reveal{ opacity:0; transform:translateY(22px); transition:opacity 1.1s ease, transform 1.1s ease; }
#mkr.mkr-js .mkr-reveal.mkr-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  #mkr.mkr-js .mkr-reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- 3. HERO ---------- */
#mkr .mkr-hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:#fff;
  background:#2c231a;
}
#mkr .mkr-hero-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; max-width:none;
  object-fit:cover;
}
#mkr .mkr-hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,8,6,.18) 0%, rgba(10,8,6,.30) 45%, rgba(10,8,6,.68) 100%);
}
#mkr .mkr-hero-inner{
  position:relative; z-index:2;
  width:100%; text-align:center;
  padding:0 32px 120px;
}
#mkr .mkr-hero-quote{
  font-family:var(--mkr-serif);
  font-weight:400;
  font-size:clamp(18px, 2.2vw, 24px);
  line-height:1.8;
  letter-spacing:.08em;
  color:#fff;
  margin:0 0 20px;
}
#mkr .mkr-hero-quote::before{ content:"『"; }
#mkr .mkr-hero-quote::after { content:"』"; }
#mkr .mkr-hero-h1{
  font-family:var(--mkr-serif);
  font-weight:600;
  font-size:clamp(32px, 4.8vw, 56px);
  line-height:1.5;
  letter-spacing:.08em;
  color:#fff;
  margin:0;
}
#mkr .mkr-hero-sub{
  font-family:var(--mkr-sans);
  font-size:14.5px;
  line-height:2;
  letter-spacing:.06em;
  color:rgba(255,255,255,.86);
  margin:28px auto 0;
  max-width:46em;
}
#mkr .mkr-hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:32px; padding:9px 18px;
  border:1px solid rgba(255,255,255,.4);
  font-family:var(--mkr-sans);
  font-size:12px; line-height:1.6; letter-spacing:.1em;
  color:#fff;
}
#mkr .mkr-hero-badge svg{ width:16px; height:16px; flex:none; }
#mkr .mkr-scroll{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mkr-en); font-weight:400;
  font-size:11px; letter-spacing:.24em; line-height:1;
  color:rgba(255,255,255,.7);
}
#mkr .mkr-scroll::after{ content:""; width:1px; height:34px; background:rgba(255,255,255,.55); }

/* ---------- 4. 詩的テキスト（既存サイトの明朝・中央揃え） ---------- */
#mkr .mkr-poetic{ text-align:center; max-width:680px; margin:0 auto; padding:0 24px; }
#mkr .mkr-poetic-p{
  font-family:var(--mkr-serif);
  font-weight:400;
  font-size:clamp(15px, 1.5vw, 17.5px);
  line-height:2.3;
  letter-spacing:.08em;
  color:var(--mkr-ink);
  margin:0 0 2.1em;
}
#mkr .mkr-poetic-p:last-child{ margin-bottom:0; }

/* ---------- 5. 創業・数字 ---------- */
#mkr .mkr-year{
  text-align:center;
  font-family:var(--mkr-en);
  font-weight:200;
  font-size:clamp(64px, 8vw, 110px);
  line-height:1.15;
  letter-spacing:.06em;
  color:var(--mkr-ink);
  margin:0 0 8px;
}
#mkr .mkr-year-label{
  text-align:center;
  font-family:var(--mkr-serif);
  font-size:13px; letter-spacing:.2em; line-height:1.8;
  color:var(--mkr-soft);
  margin:0 0 60px;
}
#mkr .mkr-stats{ display:flex; justify-content:center; flex-wrap:wrap; gap:70px; }
#mkr .mkr-stat{ text-align:center; }
#mkr .mkr-stat-n{
  font-family:var(--mkr-serif); font-weight:600;
  font-size:28px; line-height:1.4; letter-spacing:.06em; color:var(--mkr-ink);
}
#mkr .mkr-stat-n.mkr-is-num{ font-family:var(--mkr-num); font-weight:600; font-size:36px; letter-spacing:.04em; }
#mkr .mkr-stat-l{
  margin-top:8px;
  font-family:var(--mkr-sans); font-size:12px; line-height:1.7; letter-spacing:.08em; color:var(--mkr-soft);
}

/* ---------- 6. THE CRAFT ---------- */
#mkr .mkr-craft-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  border-top:1px solid var(--mkr-line);
  margin-top:80px;
}
#mkr .mkr-craft-card{ padding:48px 30px; text-align:center; border-left:1px solid var(--mkr-line); }
#mkr .mkr-craft-card:nth-child(odd){ border-left:0; }
#mkr .mkr-craft-card:nth-child(n+3){ border-top:1px solid var(--mkr-line); }
#mkr .mkr-craft-card .mkr-label{ margin-bottom:16px; }
#mkr .mkr-craft-photo-wrap{ width:100%; aspect-ratio:4/3; overflow:hidden; margin:0 0 26px; }
#mkr .mkr-craft-photo{ width:100%; height:100%; max-width:none; object-fit:cover; }
#mkr .mkr-craft-card .mkr-text{
  margin-top:12px;
  font-family:var(--mkr-sans); font-size:13.5px; line-height:1.95; letter-spacing:.02em; color:var(--mkr-soft);
}
#mkr .mkr-process{
  display:grid; grid-template-columns:repeat(5, 1fr);
  border-top:1px solid var(--mkr-line);
}
#mkr .mkr-process-step{ padding:32px 16px; text-align:center; border-left:1px solid var(--mkr-line); }
#mkr .mkr-process-step:first-child{ border-left:0; }
#mkr .mkr-process-kanji{ font-family:var(--mkr-serif); font-weight:400; font-size:22px; line-height:1.6; color:var(--mkr-ink); }
#mkr .mkr-process-t{ margin-top:8px; font-family:var(--mkr-sans); font-size:13px; line-height:1.7; letter-spacing:.06em; color:var(--mkr-soft); }

/* ---------- 7. こんな人に ---------- */
#mkr .mkr-persona-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--mkr-line); border-bottom:1px solid var(--mkr-line);
}
#mkr .mkr-persona-card{ padding:40px 26px; text-align:center; border-left:1px solid var(--mkr-line); }
#mkr .mkr-persona-card:first-child{ border-left:0; }
#mkr .mkr-persona-card .mkr-label{ margin-bottom:22px; }
#mkr .mkr-persona-icon{ width:100%; max-width:168px; margin:0 auto 22px; }
#mkr .mkr-persona-card .mkr-text{
  font-family:var(--mkr-serif); font-size:14.5px; line-height:2; letter-spacing:.05em; color:var(--mkr-ink);
}

/* ---------- 8. THE SPACE ---------- */
#mkr .mkr-gallery{ display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:130px; gap:2px; }
#mkr .mkr-g{ position:relative; overflow:hidden; }
#mkr .mkr-g img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
#mkr .mkr-g-cap{
  position:absolute; left:16px; bottom:14px; z-index:1;
  font-family:var(--mkr-sans); font-size:11px; line-height:1.6; letter-spacing:.05em;
  color:var(--mkr-soft); background:rgba(255,255,255,.8); padding:4px 9px;
}
#mkr .mkr-g1{ grid-column:span 4; grid-row:span 3; }
#mkr .mkr-g2, #mkr .mkr-g3, #mkr .mkr-g4, #mkr .mkr-g5, #mkr .mkr-g6{ grid-column:span 2; grid-row:span 2; }

/* ---------- 9. EXPERIENCE ---------- */
#mkr .mkr-list{ max-width:720px; margin:0 auto; padding:0 24px; border-top:1px solid var(--mkr-line); box-sizing:content-box; }
#mkr .mkr-exp-row{
  display:grid; grid-template-columns:120px 1fr; gap:30px; align-items:baseline;
  padding:34px 0; border-bottom:1px solid var(--mkr-line);
}
#mkr .mkr-exp-row .mkr-h3{ margin-bottom:6px; }
#mkr .mkr-exp-row .mkr-text{ font-family:var(--mkr-sans); font-size:14.5px; line-height:1.9; color:var(--mkr-soft); }

/* ---------- 10. BRANDS ---------- */
#mkr .mkr-brands{ display:grid; grid-template-columns:1fr 1fr; max-width:820px; margin:0 auto; border-top:1px solid var(--mkr-line); }
#mkr .mkr-brand-card{ padding:44px 36px; text-align:center; border-left:1px solid var(--mkr-line); }
#mkr .mkr-brand-card:first-child{ border-left:0; }
#mkr .mkr-brand-en{ font-family:var(--mkr-en); font-weight:400; font-size:15px; line-height:1.6; letter-spacing:.2em; color:var(--mkr-faint); }
#mkr .mkr-brand-card .mkr-h3{ margin-top:10px; font-size:20px; }
#mkr .mkr-brand-card .mkr-text{ margin-top:14px; font-family:var(--mkr-sans); font-size:13.5px; line-height:1.95; color:var(--mkr-soft); }

/* ---------- 11. 施設概要 ---------- */
#mkr .mkr-spec{ max-width:720px; margin:0 auto; padding:0 24px; border-top:1px solid var(--mkr-line); box-sizing:content-box; }
#mkr .mkr-spec-row{ display:grid; grid-template-columns:160px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--mkr-line); }
#mkr .mkr-spec-dt{ font-family:var(--mkr-sans); font-size:12.5px; line-height:1.9; letter-spacing:.08em; color:var(--mkr-faint); }
#mkr .mkr-spec-dd{ font-family:var(--mkr-sans); font-size:15px; line-height:1.9; color:var(--mkr-ink); }

/* ---------- 12. ACCESS ---------- */
#mkr .mkr-access{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#mkr .mkr-access-map{
  position:relative; overflow:hidden;
  aspect-ratio:4/3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:#f3f3f1; border:1px solid var(--mkr-line); text-align:center;
}
#mkr .mkr-map-lines{ position:absolute; inset:0; width:100%; height:100%; max-width:none; }
#mkr .mkr-map-lines path{ fill:none; stroke:var(--mkr-faint); stroke-width:1; opacity:.55; }
#mkr .mkr-map-lines .mkr-coast{ stroke:var(--mkr-ink); opacity:.45; stroke-width:1.3; }
#mkr .mkr-map-lines .mkr-faint{ opacity:.25; }
#mkr .mkr-map-pin{ position:relative; width:26px; }
#mkr .mkr-map-pin svg{ width:26px; height:34px; fill:#fff; stroke:var(--mkr-ink); stroke-width:1.6; }
#mkr .mkr-map-label{ position:relative; font-family:var(--mkr-serif); font-size:15px; line-height:1.7; color:var(--mkr-ink); }
#mkr .mkr-map-label small{ display:block; font-family:var(--mkr-sans); font-size:11.5px; letter-spacing:.04em; color:var(--mkr-soft); }
#mkr .mkr-map-btn{
  position:relative; padding:9px 20px;
  font-family:var(--mkr-serif); font-size:13px; letter-spacing:.1em; line-height:1.6;
  border:1px solid var(--mkr-ink); background:#fff; color:var(--mkr-ink);
  transition:background .25s ease, color .25s ease;
}
#mkr .mkr-access-map:hover .mkr-map-btn{ background:var(--mkr-ink); color:#fff; }
#mkr .mkr-access .mkr-eyebrow{ margin-bottom:6px; }
#mkr .mkr-access .mkr-h2{ font-size:24px; margin:0 0 28px; }
#mkr .mkr-access-list{ border-top:1px solid var(--mkr-line); }
#mkr .mkr-access-list li{
  display:grid; grid-template-columns:96px 1fr; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--mkr-line);
  font-family:var(--mkr-sans); font-size:14px; line-height:1.9; color:var(--mkr-ink);
}
#mkr .mkr-access-list .mkr-k{ font-size:12.5px; color:var(--mkr-faint); }

/* ---------- 13. CTA（既存サイトのボタン＝角丸なし・1px罫線） ---------- */
#mkr .mkr-cta{ text-align:center; background:var(--mkr-ink); color:#fff; padding:140px 0 110px; }
#mkr .mkr-cta .mkr-eyebrow{ color:rgba(255,255,255,.85); }
#mkr .mkr-cta .mkr-h2{ color:#fff; font-size:clamp(26px, 3.4vw, 42px); margin-top:6px; }
#mkr .mkr-cta .mkr-text{
  margin:24px auto 46px; max-width:44ch;
  font-family:var(--mkr-serif); font-size:15px; line-height:2.1; letter-spacing:.06em; color:rgba(255,255,255,.75);
}
#mkr .mkr-btns{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }
#mkr .mkr-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 34px; border-radius:0;
  font-family:var(--mkr-serif); font-weight:400; font-size:15px; line-height:1.6; letter-spacing:.1em;
  color:#fff; background:transparent; border:1px solid #fff;
  transition:background .25s ease, color .25s ease;
}
#mkr .mkr-btn:hover, #mkr .mkr-btn:focus{ background:#fff; color:var(--mkr-ink); }
#mkr .mkr-btn.mkr-btn-line{ border-color:rgba(255,255,255,.45); }
#mkr .mkr-btn.mkr-btn-line:hover{ border-color:#fff; }

/* ---------- 14. スマホ ---------- */
@media (max-width:860px){
  #mkr .mkr-sec{ padding:90px 0; }
  #mkr .mkr-wrap, #mkr .mkr-col{ padding:0 24px; }
  #mkr .mkr-hero-inner{ padding:0 24px 110px; }
  #mkr .mkr-craft-grid{ grid-template-columns:1fr; }
  #mkr .mkr-craft-card{ border-left:0; }
  #mkr .mkr-craft-card:nth-child(n+2){ border-top:1px solid var(--mkr-line); }
  #mkr .mkr-process{ grid-template-columns:1fr; }
  #mkr .mkr-process-step{ border-left:0; border-top:1px solid var(--mkr-line); }
  #mkr .mkr-process-step:first-child{ border-top:0; }
  #mkr .mkr-persona-grid{ grid-template-columns:1fr; }
  #mkr .mkr-persona-card{ border-left:0; border-top:1px solid var(--mkr-line); }
  #mkr .mkr-persona-card:first-child{ border-top:0; }
  #mkr .mkr-exp-row{ grid-template-columns:1fr; gap:6px; }
  #mkr .mkr-brands{ grid-template-columns:1fr; }
  #mkr .mkr-brand-card{ border-left:0; border-top:1px solid var(--mkr-line); }
  #mkr .mkr-brand-card:first-child{ border-top:0; }
  #mkr .mkr-gallery{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:150px; }
  #mkr .mkr-g1, #mkr .mkr-g2, #mkr .mkr-g3, #mkr .mkr-g4, #mkr .mkr-g5, #mkr .mkr-g6{ grid-column:span 2; grid-row:span 2; }
  #mkr .mkr-spec-row{ grid-template-columns:1fr; gap:4px; }
  #mkr .mkr-access{ grid-template-columns:1fr; gap:40px; }
  #mkr .mkr-stats{ gap:40px; }
}/* End custom CSS */
/* Start custom CSS *//* ==========================================================================
   積凪 MOKURASU棟 PRページ  ／  Elementor 固定ページ用 個別CSS
   --------------------------------------------------------------------------
   ・すべて #mkr 配下にスコープ（ID＋mkr- 接頭辞）。既存サイト（Astra / Elementor）
     のスタイルと干渉しない／既存ページへも影響しない作りです。
   ・フォントは既存サイトと同じ Noto Serif JP / Noto Sans JP / Catamaran / Barlow Condensed。
   ・貼り付け先：固定ページを Elementor で開く → 左下の歯車「ページ設定」→「カスタムCSS」
   ========================================================================== */

/* ---------- 0. 変数 & ベース ---------- */
#mkr{
  --mkr-serif:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --mkr-sans:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --mkr-en:"Catamaran", "Noto Sans JP", sans-serif;
  --mkr-num:"Barlow Condensed", "Catamaran", sans-serif;

  --mkr-ink:#151515;          /* 既存サイトの文字色 */
  --mkr-soft:#4B4F58;         /* 既存サイト本文グレー */
  --mkr-faint:#8b8f97;
  --mkr-line:rgba(21,21,21,.16);
  --mkr-paper:#ffffff;

  --mkr-max:900px;
  --mkr-wide:1180px;

  /* ★画面幅いっぱい（親コンテナが boxed でも左右にはみ出して全幅にする） */
  position:relative;
  display:block;
  width:100vw;
  max-width:100vw;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  background:var(--mkr-paper);
  color:var(--mkr-ink);
  font-family:var(--mkr-sans);
  font-size:15px;
  font-weight:400;
  line-height:1.9;
  letter-spacing:normal;
  text-align:left;
  text-transform:none;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* 100vw はスクロールバー分はみ出すため、このページに限り横スクロールを防ぐ */
body{ overflow-x:clip; }

/* ---------- 1. 内部リセット（テーマ・Elementor側の汎用指定を打ち消す） ---------- */
#mkr, #mkr *, #mkr *::before, #mkr *::after{ box-sizing:border-box; }
#mkr *{ font-style:normal; }
#mkr section, #mkr header, #mkr div{ background:none; }
#mkr section, #mkr header{ margin:0; padding:0; border:0; display:block; }
#mkr h1, #mkr h2, #mkr h3, #mkr p, #mkr dl, #mkr dt, #mkr dd,
#mkr ul, #mkr li, #mkr figure{
  margin:0; padding:0; border:0; background:none;
  text-transform:none; text-shadow:none; letter-spacing:normal; font-weight:400;
}
#mkr ul, #mkr li{ list-style:none; }
#mkr a, #mkr a:hover, #mkr a:focus, #mkr a:visited{
  text-decoration:none; box-shadow:none; outline-offset:3px;
}
#mkr a{ color:inherit; background:none; border-bottom:0; }
#mkr img, #mkr svg{ display:block; max-width:100%; border:0; border-radius:0; box-shadow:none; vertical-align:baseline; }
#mkr svg{ height:auto; }
#mkr img{ height:auto; }
#mkr br{ display:inline; }

/* ---------- 2. レイアウト部品 ---------- */
#mkr .mkr-wrap{ max-width:var(--mkr-wide); margin:0 auto; padding:0 40px; }
#mkr .mkr-col { max-width:var(--mkr-max);  margin:0 auto; padding:0 40px; }
#mkr .mkr-sec { padding:130px 0; }
#mkr .mkr-vline{ width:1px; height:64px; background:var(--mkr-line); margin:0 auto; }

/* 英字見出し（既存サイト "Concept" "Guest House" と同じ Catamaran 200） */
#mkr .mkr-eyebrow{
  display:block;
  font-family:var(--mkr-en);
  font-weight:200;
  font-size:clamp(22px, 2.4vw, 28px);
  line-height:1.4;
  letter-spacing:.06em;
  color:var(--mkr-ink);
  margin:0 0 14px;
}
#mkr .mkr-h2{
  font-family:var(--mkr-serif);
  font-weight:600;
  font-size:clamp(22px, 2.6vw, 32px);
  line-height:1.7;
  letter-spacing:.04em;
  color:var(--mkr-ink);
}
#mkr .mkr-h3{
  font-family:var(--mkr-serif);
  font-weight:600;
  font-size:18px;
  line-height:1.7;
  letter-spacing:.04em;
  color:var(--mkr-ink);
}
#mkr .mkr-title{ text-align:center; margin-bottom:64px; }
#mkr .mkr-label{
  display:block;
  font-family:var(--mkr-en);
  font-weight:400;
  font-size:12px;
  line-height:1.6;
  letter-spacing:.16em;
  color:var(--mkr-faint);
}

/* ふわっと表示（JSが動いたときだけ有効＝JSなしでも内容は必ず見える） */
#mkr.mkr-js .mkr-reveal{ opacity:0; transform:translateY(22px); transition:opacity 1.1s ease, transform 1.1s ease; }
#mkr.mkr-js .mkr-reveal.mkr-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  #mkr.mkr-js .mkr-reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- 3. HERO ---------- */
#mkr .mkr-hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:#fff;
  background:#2c231a;
}
#mkr .mkr-hero-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; max-width:none;
  object-fit:cover;
}
#mkr .mkr-hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,8,6,.18) 0%, rgba(10,8,6,.30) 45%, rgba(10,8,6,.68) 100%);
}
#mkr .mkr-hero-inner{
  position:relative; z-index:2;
  width:100%; text-align:center;
  padding:0 32px 120px;
}
#mkr .mkr-hero-quote{
  font-family:var(--mkr-serif);
  font-weight:400;
  font-size:clamp(18px, 2.2vw, 24px);
  line-height:1.8;
  letter-spacing:.08em;
  color:#fff;
  margin:0 0 20px;
}
#mkr .mkr-hero-quote::before{ content:"『"; }
#mkr .mkr-hero-quote::after { content:"』"; }
#mkr .mkr-hero-h1{
  font-family:var(--mkr-serif);
  font-weight:600;
  font-size:clamp(32px, 4.8vw, 56px);
  line-height:1.5;
  letter-spacing:.08em;
  color:#fff;
  margin:0;
}
#mkr .mkr-hero-sub{
  font-family:var(--mkr-sans);
  font-size:14.5px;
  line-height:2;
  letter-spacing:.06em;
  color:rgba(255,255,255,.86);
  margin:28px auto 0;
  max-width:46em;
}
#mkr .mkr-hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:32px; padding:9px 18px;
  border:1px solid rgba(255,255,255,.4);
  font-family:var(--mkr-sans);
  font-size:12px; line-height:1.6; letter-spacing:.1em;
  color:#fff;
}
#mkr .mkr-hero-badge svg{ width:16px; height:16px; flex:none; }
#mkr .mkr-scroll{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mkr-en); font-weight:400;
  font-size:11px; letter-spacing:.24em; line-height:1;
  color:rgba(255,255,255,.7);
}
#mkr .mkr-scroll::after{ content:""; width:1px; height:34px; background:rgba(255,255,255,.55); }

/* ---------- 4. 詩的テキスト（既存サイトの明朝・中央揃え） ---------- */
#mkr .mkr-poetic{ text-align:center; max-width:680px; margin:0 auto; padding:0 24px; }
#mkr .mkr-poetic-p{
  font-family:var(--mkr-serif);
  font-weight:400;
  font-size:clamp(15px, 1.5vw, 17.5px);
  line-height:2.3;
  letter-spacing:.08em;
  color:var(--mkr-ink);
  margin:0 0 2.1em;
}
#mkr .mkr-poetic-p:last-child{ margin-bottom:0; }

/* ---------- 5. 創業・数字 ---------- */
#mkr .mkr-year{
  text-align:center;
  font-family:var(--mkr-en);
  font-weight:200;
  font-size:clamp(64px, 8vw, 110px);
  line-height:1.15;
  letter-spacing:.06em;
  color:var(--mkr-ink);
  margin:0 0 8px;
}
#mkr .mkr-year-label{
  text-align:center;
  font-family:var(--mkr-serif);
  font-size:13px; letter-spacing:.2em; line-height:1.8;
  color:var(--mkr-soft);
  margin:0 0 60px;
}
#mkr .mkr-stats{ display:flex; justify-content:center; flex-wrap:wrap; gap:70px; }
#mkr .mkr-stat{ text-align:center; }
#mkr .mkr-stat-n{
  font-family:var(--mkr-serif); font-weight:600;
  font-size:28px; line-height:1.4; letter-spacing:.06em; color:var(--mkr-ink);
}
#mkr .mkr-stat-n.mkr-is-num{ font-family:var(--mkr-num); font-weight:600; font-size:36px; letter-spacing:.04em; }
#mkr .mkr-stat-l{
  margin-top:8px;
  font-family:var(--mkr-sans); font-size:12px; line-height:1.7; letter-spacing:.08em; color:var(--mkr-soft);
}

/* ---------- 6. THE CRAFT ---------- */
#mkr .mkr-craft-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  border-top:1px solid var(--mkr-line);
  margin-top:80px;
}
#mkr .mkr-craft-card{ padding:48px 30px; text-align:center; border-left:1px solid var(--mkr-line); }
#mkr .mkr-craft-card:nth-child(odd){ border-left:0; }
#mkr .mkr-craft-card:nth-child(n+3){ border-top:1px solid var(--mkr-line); }
#mkr .mkr-craft-card .mkr-label{ margin-bottom:16px; }
#mkr .mkr-craft-photo-wrap{ width:100%; aspect-ratio:4/3; overflow:hidden; margin:0 0 26px; }
#mkr .mkr-craft-photo{ width:100%; height:100%; max-width:none; object-fit:cover; }
#mkr .mkr-craft-card .mkr-text{
  margin-top:12px;
  font-family:var(--mkr-sans); font-size:13.5px; line-height:1.95; letter-spacing:.02em; color:var(--mkr-soft);
}
#mkr .mkr-process{
  display:grid; grid-template-columns:repeat(5, 1fr);
  border-top:1px solid var(--mkr-line);
}
#mkr .mkr-process-step{ padding:32px 16px; text-align:center; border-left:1px solid var(--mkr-line); }
#mkr .mkr-process-step:first-child{ border-left:0; }
#mkr .mkr-process-kanji{ font-family:var(--mkr-serif); font-weight:400; font-size:22px; line-height:1.6; color:var(--mkr-ink); }
#mkr .mkr-process-t{ margin-top:8px; font-family:var(--mkr-sans); font-size:13px; line-height:1.7; letter-spacing:.06em; color:var(--mkr-soft); }

/* ---------- 7. こんな人に ---------- */
#mkr .mkr-persona-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--mkr-line); border-bottom:1px solid var(--mkr-line);
}
#mkr .mkr-persona-card{ padding:40px 26px; text-align:center; border-left:1px solid var(--mkr-line); }
#mkr .mkr-persona-card:first-child{ border-left:0; }
#mkr .mkr-persona-card .mkr-label{ margin-bottom:22px; }
#mkr .mkr-persona-icon{ width:100%; max-width:168px; margin:0 auto 22px; }
#mkr .mkr-persona-card .mkr-text{
  font-family:var(--mkr-serif); font-size:14.5px; line-height:2; letter-spacing:.05em; color:var(--mkr-ink);
}

/* ---------- 8. THE SPACE ---------- */
#mkr .mkr-gallery{ display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:130px; gap:2px; }
#mkr .mkr-g{ position:relative; overflow:hidden; }
#mkr .mkr-g img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
#mkr .mkr-g-cap{
  position:absolute; left:16px; bottom:14px; z-index:1;
  font-family:var(--mkr-sans); font-size:11px; line-height:1.6; letter-spacing:.05em;
  color:var(--mkr-soft); background:rgba(255,255,255,.8); padding:4px 9px;
}
#mkr .mkr-g1{ grid-column:span 4; grid-row:span 3; }
#mkr .mkr-g2, #mkr .mkr-g3, #mkr .mkr-g4, #mkr .mkr-g5, #mkr .mkr-g6{ grid-column:span 2; grid-row:span 2; }

/* ---------- 9. EXPERIENCE ---------- */
#mkr .mkr-list{ max-width:720px; margin:0 auto; padding:0 24px; border-top:1px solid var(--mkr-line); box-sizing:content-box; }
#mkr .mkr-exp-row{
  display:grid; grid-template-columns:120px 1fr; gap:30px; align-items:baseline;
  padding:34px 0; border-bottom:1px solid var(--mkr-line);
}
#mkr .mkr-exp-row .mkr-h3{ margin-bottom:6px; }
#mkr .mkr-exp-row .mkr-text{ font-family:var(--mkr-sans); font-size:14.5px; line-height:1.9; color:var(--mkr-soft); }

/* ---------- 10. BRANDS ---------- */
#mkr .mkr-brands{ display:grid; grid-template-columns:1fr 1fr; max-width:820px; margin:0 auto; border-top:1px solid var(--mkr-line); }
#mkr .mkr-brand-card{ padding:44px 36px; text-align:center; border-left:1px solid var(--mkr-line); }
#mkr .mkr-brand-card:first-child{ border-left:0; }
#mkr .mkr-brand-en{ font-family:var(--mkr-en); font-weight:400; font-size:15px; line-height:1.6; letter-spacing:.2em; color:var(--mkr-faint); }
#mkr .mkr-brand-card .mkr-h3{ margin-top:10px; font-size:20px; }
#mkr .mkr-brand-card .mkr-text{ margin-top:14px; font-family:var(--mkr-sans); font-size:13.5px; line-height:1.95; color:var(--mkr-soft); }

/* ---------- 11. 施設概要 ---------- */
#mkr .mkr-spec{ max-width:720px; margin:0 auto; padding:0 24px; border-top:1px solid var(--mkr-line); box-sizing:content-box; }
#mkr .mkr-spec-row{ display:grid; grid-template-columns:160px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--mkr-line); }
#mkr .mkr-spec-dt{ font-family:var(--mkr-sans); font-size:12.5px; line-height:1.9; letter-spacing:.08em; color:var(--mkr-faint); }
#mkr .mkr-spec-dd{ font-family:var(--mkr-sans); font-size:15px; line-height:1.9; color:var(--mkr-ink); }

/* ---------- 12. ACCESS ---------- */
#mkr .mkr-access{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
#mkr .mkr-map-frame{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#f3f3f1; border:1px solid var(--mkr-line); }
#mkr .mkr-map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; max-width:none; border:0; display:block; }
#mkr .mkr-access-map{
  position:relative; overflow:hidden;
  aspect-ratio:4/3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:#f3f3f1; border:1px solid var(--mkr-line); text-align:center;
}
#mkr .mkr-map-lines{ position:absolute; inset:0; width:100%; height:100%; max-width:none; }
#mkr .mkr-map-lines path{ fill:none; stroke:var(--mkr-faint); stroke-width:1; opacity:.55; }
#mkr .mkr-map-lines .mkr-coast{ stroke:var(--mkr-ink); opacity:.45; stroke-width:1.3; }
#mkr .mkr-map-lines .mkr-faint{ opacity:.25; }
#mkr .mkr-map-pin{ position:relative; width:26px; }
#mkr .mkr-map-pin svg{ width:26px; height:34px; fill:#fff; stroke:var(--mkr-ink); stroke-width:1.6; }
#mkr .mkr-map-label{ position:relative; font-family:var(--mkr-serif); font-size:15px; line-height:1.7; color:var(--mkr-ink); }
#mkr .mkr-map-label small{ display:block; font-family:var(--mkr-sans); font-size:11.5px; letter-spacing:.04em; color:var(--mkr-soft); }
#mkr .mkr-map-btn{
  position:relative; padding:9px 20px;
  font-family:var(--mkr-serif); font-size:13px; letter-spacing:.1em; line-height:1.6;
  border:1px solid var(--mkr-ink); background:#fff; color:var(--mkr-ink);
  transition:background .25s ease, color .25s ease;
}
#mkr .mkr-access-map:hover .mkr-map-btn{ background:var(--mkr-ink); color:#fff; }
#mkr .mkr-access .mkr-eyebrow{ margin-bottom:6px; }
#mkr .mkr-access .mkr-h2{ font-size:24px; margin:0 0 28px; }
#mkr .mkr-access-list{ border-top:1px solid var(--mkr-line); }
#mkr .mkr-access-list li{
  display:grid; grid-template-columns:96px 1fr; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--mkr-line);
  font-family:var(--mkr-sans); font-size:14px; line-height:1.9; color:var(--mkr-ink);
}
#mkr .mkr-access-list .mkr-k{ font-size:12.5px; color:var(--mkr-faint); }

/* ---------- 13. CTA（既存サイトのボタン＝角丸なし・1px罫線） ---------- */
#mkr .mkr-cta{ text-align:center; background:var(--mkr-ink); color:#fff; padding:140px 0 110px; }
#mkr .mkr-cta .mkr-eyebrow{ color:rgba(255,255,255,.85); }
#mkr .mkr-cta .mkr-h2{ color:#fff; font-size:clamp(26px, 3.4vw, 42px); margin-top:6px; }
#mkr .mkr-cta .mkr-text{
  margin:24px auto 46px; max-width:44ch;
  font-family:var(--mkr-serif); font-size:15px; line-height:2.1; letter-spacing:.06em; color:rgba(255,255,255,.75);
}
#mkr .mkr-btns{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }
#mkr .mkr-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 34px; border-radius:0;
  font-family:var(--mkr-serif); font-weight:400; font-size:15px; line-height:1.6; letter-spacing:.1em;
  color:#fff; background:transparent; border:1px solid #fff;
  transition:background .25s ease, color .25s ease;
}
#mkr .mkr-btn:hover, #mkr .mkr-btn:focus{ background:#fff; color:var(--mkr-ink); }
#mkr .mkr-btn.mkr-btn-line{ border-color:rgba(255,255,255,.45); }
#mkr .mkr-btn.mkr-btn-line:hover{ border-color:#fff; }

/* ---------- 14. スマホ ---------- */
@media (max-width:860px){
  #mkr .mkr-sec{ padding:90px 0; }
  #mkr .mkr-wrap, #mkr .mkr-col{ padding:0 24px; }
  #mkr .mkr-hero-inner{ padding:0 24px 110px; }
  #mkr .mkr-craft-grid{ grid-template-columns:1fr; }
  #mkr .mkr-craft-card{ border-left:0; }
  #mkr .mkr-craft-card:nth-child(n+2){ border-top:1px solid var(--mkr-line); }
  #mkr .mkr-process{ grid-template-columns:1fr; }
  #mkr .mkr-process-step{ border-left:0; border-top:1px solid var(--mkr-line); }
  #mkr .mkr-process-step:first-child{ border-top:0; }
  #mkr .mkr-persona-grid{ grid-template-columns:1fr; }
  #mkr .mkr-persona-card{ border-left:0; border-top:1px solid var(--mkr-line); }
  #mkr .mkr-persona-card:first-child{ border-top:0; }
  #mkr .mkr-exp-row{ grid-template-columns:1fr; gap:6px; }
  #mkr .mkr-brands{ grid-template-columns:1fr; }
  #mkr .mkr-brand-card{ border-left:0; border-top:1px solid var(--mkr-line); }
  #mkr .mkr-brand-card:first-child{ border-top:0; }
  #mkr .mkr-gallery{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:150px; }
  #mkr .mkr-g1, #mkr .mkr-g2, #mkr .mkr-g3, #mkr .mkr-g4, #mkr .mkr-g5, #mkr .mkr-g6{ grid-column:span 2; grid-row:span 2; }
  #mkr .mkr-spec-row{ grid-template-columns:1fr; gap:4px; }
  #mkr .mkr-access{ grid-template-columns:1fr; gap:40px; }
  #mkr .mkr-stats{ gap:40px; }
}/* End custom CSS */