/*
Theme Name: THREE STARS
Author: ★
Description: Apple AirPods思想ベースのミニマルLPテーマ
Version: 1.0
*/

/* ===============================
   Design Tokens
================================ */
:root{
  /* Colors */
  --white:#fff;
  --black:#1d1d1f;
  --gray:#f5f5f7;
  --text-sub:#555;
  --text-muted:#666;
  --accent:#2b51a1;

  /* Borders & Shadows */
  --border:rgba(0,0,0,.08);
  --border-strong:rgba(0,0,0,.12);
  --shadow:0 30px 80px rgba(0,0,0,.06);

  /* Layout */
  --container:1040px;
  --gutter:24px;
  --radius:22px;
  --radius-lg:24px;

  /* Spacing */
  --section-pad:120px;

  /* Typography */
  --ls-wide:.12em;
  --ls-mid:.08em;
  --ls-tight:.06em;
}

@media (max-width: 768px){
  :root{
    --gutter:20px;
    --section-pad:92px;
  }
}

/* ===============================
   Base
================================ */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:system-ui,-apple-system,"SF Pro Text","SF Pro Display","Hiragino Sans","Noto Sans JP","Segoe UI",Roboto,Arial,sans-serif;
  color:var(--black);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,video{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

::selection{ background:rgba(43,81,161,.16); }

/* ===============================
   Layout
================================ */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

section{ padding:var(--section-pad) 0; }
section#gl-statement { padding:0; }

.bg-gray{ background:var(--gray); }

/* ===============================
   Typography (Tag-based)
================================ */
h1,h2,h3,p{ margin:0; }

h1{
  font-size:clamp(32px,5vw,56px);
  font-weight:650;
  letter-spacing:var(--ls-wide);
  line-height:1.15;
}

h2{
  font-size:clamp(20px,2.2vw,26px);
  font-weight:650;
  letter-spacing:.10em;
  line-height:1.25;
}

h3{
  font-size:18px;
  font-weight:650;
  letter-spacing:var(--ls-mid);
  line-height:1.35;
}

p{
  font-size:18px;
  line-height:1.9;
  letter-spacing:var(--ls-tight);
}

small{
  font-size:14px;
  color:var(--text-muted);
  letter-spacing:var(--ls-tight);
}

@media (max-width: 768px){
  p{ font-size:17px; }
}

/* 互換：既存クラスが残ってても崩れないように */
.h1{ font-size:inherit; font-weight:inherit; letter-spacing:inherit; line-height:inherit; margin:0; }
.text-md{ font-size:inherit; line-height:inherit; letter-spacing:inherit; }
.text-sm{ font-size:16px; line-height:2; color:var(--text-sub); letter-spacing:var(--ls-tight); }

/* ===============================
   Hero（ファーストビューでコピーを見せる）
   ※ front-page.php の HERO section に class="hero-section" を付ける
================================ */
.hero-section{
  padding-top:56px;    
  padding-bottom:88px;
}
@media (max-width: 768px){
  .hero-section{
    padding-top:44px;
    padding-bottom:72px;
  }
}

.hero-section .label{ margin-bottom:10px; }
.hero-section .h1{ margin-top:10px; }
.hero-section .text-md{ margin-top:12px; }






/* ===============================
   Signature Image（強制レイアウト）
================================ */
.message-center{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.message-center .signature{
  width:100%;
  margin-top:32px;
  display:flex;
  justify-content:flex-end;
}
.message-center .signature img{
  width:230px;
  max-width:100%;
  opacity:.75;
}

/* ===============================
   Message Typography（強め・h2相当）
================================ */
.message-left,
.message-right,
.message-center,
.text-sm.message-left{
  font-size:clamp(22px, 3vw, 28px);
  line-height:1.85;
  letter-spacing:.08em;
  font-weight:600;
  color:var(--black);
}
/* ===============================
   Message Size Modifiers（追記）
================================ */
.message-big{
  font-size:clamp(22px, 3vw, 30px);
  font-weight:650;
  line-height:1.85;
  letter-spacing:.08em;
}

.message-mid{
  font-size:clamp(18px, 2.2vw, 22px);
  font-weight:600;
  line-height:1.9;
  letter-spacing:.06em;
  color:rgba(17,17,17,.86);
}

/* 特大（締め2行） */
.message-xbig{
  font-size:clamp(34px, 5.2vw, 56px);
  font-weight:750;
  line-height:1.15;
  letter-spacing:.12em;
}

/* 特大の2行目は少し落ち着かせたい場合（任意） */
.message-xbig-sub{
  font-size:clamp(22px, 3.2vw, 34px);
  font-weight:650;
  line-height:1.35;
  letter-spacing:.08em;
  margin-top:12px;
}

/* SP微調整 */
@media (max-width: 768px){
  .message-big{ line-height:1.8; }
  .message-mid{ line-height:1.85; }
  .message-xbig{ letter-spacing:.10em; }
}

/* 位置だけ分ける */
.message-left{ text-align:left; }
.message-right{ text-align:right; }
.message-center{ text-align:center; }

/* SPは少しだけ抑える */
@media (max-width: 768px){
  .message-left,
  .message-right,
  .message-center,
  .text-sm.message-left{
    font-size:19px;
    line-height:1.8;
  }
}
/* MESSAGEエリアだけ：SPでは <br> を無効化 */
@media (max-width: 900px){
  .message-left br,
  .message-right br,
  .message-center br{
    display:none !important;
  }
}
.message-xbig{
  margin-bottom:4px;
}
.message-xbig-sub{
  margin-top:0;
}

/* ===============================
   Components (Apple-like)
================================ */
.label{
  display:inline-block;
  font-size:12px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  background:var(--white);
  color:var(--black);
  font-weight:650;
  letter-spacing:var(--ls-mid);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  text-decoration:none;
}

.btn:active{ transform:translateY(0); }

.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
}
.btn-primary:hover{
  background:#24458c;
  border-color:#24458c;
}

.btn-ghost{ background:transparent; }

/* ===============================
   Card
================================ */
.card{
  background:var(--white);
  border-radius:var(--radius);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* ===============================
   Hero Video Card (Fixed for Black Borders)
================================ */

/* ベース設定（共通） */
.hero-video-wrap {
    margin-top: 24px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    /* 必須：拡大した動画のはみ出しをカット */
    overflow: hidden; 
    width: 100%;
}

.hero-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* 動画を1.01倍に拡大して黒線を枠外に押し出す */
    transform: scale(1.01);
    transform-origin: center center;
}

/* スマホ版（768px以下）の微調整 */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 12px;
        padding-bottom: 44px;
    }
    .hero-video-wrap {
        margin-top: 0;
    }
}

/* PC版（769px以上）の設定上書き */
@media (min-width: 769px) {
    .hero-video-wrap {
        position: relative;
        max-width: 1280px;
        margin: 12px auto 0;
        /* 重要：既存の overflow: visible を hidden に変更して黒線を隠す */
        overflow: hidden; 
        background: var(--white);
        box-shadow: 0 40px 100px rgba(0,0,0,.06);
        border-radius: 24px;
    }

    /* 既存の ::before による擬似背景が不要になる（overflow:hiddenを使うため） */
    .hero-video-wrap::before {
        display: none;
    }

    .hero-video {
        position: relative;
        z-index: 1;
        border-radius: 24px;
        display: block;
        /* PCでも拡大を維持 */
        transform: scale(1.01);
    }
}

/* ===============================
   Section headings（Large & Primary）
================================ */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:36px;
}

.section-title{
  margin:0;
  font-size:clamp(28px,4vw,44px);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--black);
  line-height:1.1;
}
.section-title::after{
  content:"";
  display:block;
  width:48px;
  height:2px;
  background:var(--black);
  margin-top:12px;
  opacity:.15;
}
@media (max-width: 768px){
  .section-title{
    font-size:32px;
    letter-spacing:.14em;
  }
}

/* ===============================
   News list (LP内：minimal)
================================ */
.news-list{
  list-style:none;
  padding:0;
  margin:0;
}
.news-item{
  padding:18px 0;
  border-bottom:1px solid var(--border);
}
.news-item:last-child{ border-bottom:none; }
.news-meta{
  font-size:13px;
  color:var(--text-muted);
  letter-spacing:var(--ls-mid);
}
.news-title{
  margin-top:8px;
  font-size:18px;
  line-height:1.6;
  letter-spacing:var(--ls-mid);
  font-weight:650;
}
.news-title a:hover{
  text-decoration:underline;
  text-decoration-color:rgba(43,81,161,.55);
}

/* ===============================
   Single post (reading)
================================ */
.post-wrap{
  max-width:820px;
  margin:0 auto;
  padding:0 var(--gutter);
}
.post-hero{ padding:96px 0 40px; }
.post-h1{
  font-size:clamp(28px,4vw,44px);
  font-weight:650;
  letter-spacing:.10em;
  line-height:1.25;
  margin:14px 0 0;
}
.post-date{
  font-size:13px;
  color:var(--text-muted);
  letter-spacing:var(--ls-mid);
}
.post-content{
  font-size:18px;
  line-height:1.95;
  letter-spacing:var(--ls-tight);
  padding:40px 0 110px;
}
.post-content p{ margin:0 0 1.2em; }
.post-content h2{
  margin:2.2em 0 .9em;
  font-size:22px;
  letter-spacing:var(--ls-mid);
}
.post-content a{ color:var(--accent); }

/* ===============================
   Header（Apple Minimal）
================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(0,0,0,.05);
}

.header-inner{
  max-width:1280px;
  margin:0 auto;
  padding:16px var(--gutter);
  display:flex;
  align-items:center;
  gap:18px;
}

.header-logo{
  display:flex;
  align-items:center;
}

.header-logo img {
  height: 40px;      /* 高さ基準で揃える */
  width: auto;       /* 比率キープ */
  max-width: 100%;
  display: block;
}

/* ===============================
   Header Nav (PC inline / SP hamburger)
   ★ 黒丸（・）を絶対出さない Reset を先に置く
================================ */
.site-nav{ margin-left:auto; }

.site-nav ul,
.site-nav ol,
.site-nav li{
  list-style:none !important;
  margin:0;
  padding:0;
}
.site-nav li::marker{ content:"" !important; }

/* PC: inline menu */
.site-nav .menu{
  display:flex;
  align-items:center;
  gap:28px;
  margin:0;
  padding:0;
}
.site-nav .menu a{
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
}
.site-nav .menu a:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

/* ===== Hamburger Button（大きめ＆×が出る安定版） ===== */
.menu-toggle{
  display:none;
  margin-left:auto;
  width:48px;
  height:48px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  padding:0;
  position:relative;
  -webkit-tap-highlight-color: transparent;
}
.hamburger{
  position:absolute;
  left:50%;
  top:50%;
  width:26px;
  height:18px;
  transform:translate(-50%,-50%);
}
.hamburger::before,
.hamburger::after,
.hamburger i{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:3px;
  background:#111;
  border-radius:999px;
  transition:transform .25s ease, top .25s ease, opacity .2s ease;
}
.hamburger::before{ top:0; }
.hamburger i{ top:8px; }
.hamburger::after{ top:16px; }

.menu-toggle.is-open .hamburger i{ opacity:0; }
.menu-toggle.is-open .hamburger::before{ top:8px; transform:rotate(45deg); }
.menu-toggle.is-open .hamburger::after{ top:8px; transform:rotate(-45deg); }

/* Backdrop */
.menu-backdrop{ display:none; }

/* SP */
@media (max-width: 900px){
  .site-nav{
    position:fixed;
    top:36px;
    left:0;
    right:0;
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.06);
    box-shadow:0 30px 80px rgba(0,0,0,.08);
    transform:translateY(-120%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
    padding:18px 20px 24px;
    z-index:1001;
  }
  .site-nav.is-open{ transform:translateY(0); }
  .site-nav .menu{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .menu-toggle{ display:block; z-index:1002; }

  .menu-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.18);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:1000;
  }
  .menu-backdrop.is-open{
    opacity:1;
    pointer-events:auto;
  }
}

/* ===============================
   Footer
================================ */
footer.container{
  padding:20px 0;
  text-align:center;
  color:var(--text-muted);
}

footer.container p{
  font-size:14px !important;
  letter-spacing:.18em; /* 14px用に少し広め */
  line-height:1.3;      /* 行間を締めて軽く */
  margin:0;
  font-weight:400;
}


/* ===============================
   Fade-in Animation (clean)
================================ */
.reveal{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.8,.2,1);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
.reveal.delay-1{ transition-delay:.10s; }
.reveal.delay-2{ transition-delay:.20s; }
.reveal.delay-3{ transition-delay:.30s; }
.reveal.delay-4{ transition-delay:.40s; }
.reveal.soft{ transform:translate3d(0,8px,0); }

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ===============================
   News Archive (Apple-ish)
================================ */
.news-hero{
  padding:120px 0 64px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.news-eyebrow{
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(17,17,17,.6);
  margin:0 0 12px;
}
.news-archive-title{
  font-size:48px;
  line-height:1.1;
  margin:0 0 12px;
  letter-spacing:-.02em;
}
.news-lead{
  margin:0;
  max-width:56ch;
  font-size:16px;
  color:rgba(17,17,17,.7);
}
.news-archive{
  padding:64px 0 120px;
}
.news-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
.news-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  background:#fff;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.news-link{
  display:block;
  padding:22px 22px 20px;
  text-decoration:none;
  color:inherit;
  position:relative;
}
.news-archive-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:rgba(17,17,17,.6);
  margin-bottom:12px;
}
.news-dot{ opacity:.6; }
.news-card-title{
  font-size:18px;
  line-height:1.35;
  margin:0 0 10px;
  letter-spacing:-.01em;
}
.news-excerpt{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:rgba(17,17,17,.7);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.news-arrow{
  position:absolute;
  right:18px;
  bottom:16px;
  font-size:18px;
  color:rgba(17,17,17,.55);
}
.news-card:hover{
  transform:translateY(-2px);
  border-color:rgba(0,0,0,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.08);
}
.news-pagination{
  margin-top:34px;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.news-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  color:rgba(17,17,17,.8);
  text-decoration:none;
}
.news-pagination .page-numbers.current{
  background:rgba(17,17,17,.92);
  color:#fff;
  border-color:rgba(17,17,17,.92);
}
@media (max-width: 960px){
  .news-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .news-archive-title{ font-size:40px; }
}
@media (max-width: 640px){
  .news-hero{ padding:92px 0 44px; }
  .news-grid{ grid-template-columns:1fr; }
  .news-archive-title{ font-size:34px; }
}

/* ===============================
   Advisory (English) Block
================================ */
/* ===== Advisory Gradient (LAST) ===== */
section.bg-advisory{
  background:
    radial-gradient(
      900px 500px at 20% -10%,
      rgba(255,255,255,.18),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #0a1430 0%,
      #173a7a 45%,
      #0f1f3a 100%
    );
  color:#fff;
}



.advisory-title{
  font-size:clamp(26px,3.6vw,38px);
  font-weight:700;
  letter-spacing:.08em;
  margin-bottom:32px;
  color:#ffffff;
}

.advisory-title small{
  display:block;
  font-size:14px;
  font-weight:500;
  letter-spacing:.14em;
  color:rgba(255,255,255,.7);
  margin-top:10px;
}

.advisory-text p{
  font-size:20px;
  line-height:1.9;
  letter-spacing:.02em;
  margin-bottom:1.6em;
  color:rgba(255,255,255,.85);
}

.advisory-text p:last-child{
  margin-bottom:0;
}

/* CONTACT */
.contact-card{
  background:#f5f5f7;
  border-radius:18px;
  padding:34px;
}

.contact-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:28px;
  align-items:center;
}

/* LEFT（全体は左寄せ固定） */
.contact-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.contact-ja{
  margin:0 0 14px 0;
  font-size:14px;
  line-height:1.9;
  color:#111;
  font-weight:600;
}

.contact-en{
  margin:0 0 18px 0;
  font-size:13px;
  line-height:1.7;
  color:rgba(0,0,0,.72);
  font-weight:600;
}

/* ✅ QR / ID / LINE だけセンター */
.contact-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin:0 0 16px;
}

/* QR */
.contact-qr{
  display:inline-block;
  width:170px;
  background:#fff;
  border-radius:14px;
  padding:12px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  text-decoration:none;
}
.contact-qr img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}

/* LINE ID */
.contact-id{
  margin:10px 0 14px;
  font-size:12px;
  color:rgba(0,0,0,.55);
  font-weight:600;
}

/* LINE ボタン（伸びないように固定） */
.contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  width:180px;      /* ← 固定 */
  min-width:0;      /* ← 念のため */
  padding:0 18px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.14);
  color:#111;
  text-decoration:none;
  font-weight:700;
}

/* ✅ 注意文は左寄せ（センターにしない） */
.contact-note{
  margin:0;                 /* ← contact-centerの下に来るので0でOK */
  font-size:11px;
  line-height:1.7;
  color:rgba(0,0,0,.6);
  text-align:left;
  align-self:flex-start;    /* ← flexの保険 */
}

/* 右画像 */
.contact-cover{
  width:100%;
  height:auto;
  display:block;
}

@media (max-width: 820px){
  .contact-card{ padding:22px; }
  .contact-grid{ grid-template-columns:1fr; gap:18px; }
  .contact-right{ order:-1; }
  .contact-qr{ width:160px; }
  .contact-btn{ width:160px; }
}
/* 左カラムは左基準に固定 */
.contact-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* センターしたい塊は「中身だけ」センター */
.contact-center{
  align-items:center;
  align-self:flex-start;   /* ← これが決定打 */
  text-align:center;
  margin:0 0 16px;
}

/* 注意文は完全に左寄せ固定 */
.contact-note{
  text-align:left !important;
  margin-left:0 !important;
  align-self:flex-start;
}
/* ===== CONTACT 強制FIX（最後に追記） ===== */

/* 左カラムを grid 化して制御する */
.contact-left{
  display:grid !important;
  grid-template-columns: 1fr !important;
  row-gap: 0 !important;
  align-items:start !important;
  text-align:left !important;
}

/* QR / ID / LINE だけセンター（ブロック自体も中央に置く） */
.contact-center{
  justify-self:center !important;  /* ← ブロックを中央に */
  text-align:center !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;

  margin:0 0 16px !important;
  width:fit-content !important;
}

/* 注意文：絶対に左寄せ（幅も縛らない） */
.contact-note{
  justify-self:start !important;
  text-align:left !important;

  width:100% !important;
  max-width:none !important;
  margin:16px 0 0 !important;
}






/* MESSAGEエリアだけ：SPでは <br> を無効化（他のbrは触らない） */
@media (max-width: 900px){
  .message-left br,
  .message-right br,
  .message-center br{
    display:none !important;
  }
}

/* 一覧（カテゴリーNEWS） */
body.category-news section{
  padding-top:64px !important;
  padding-bottom:80px !important;
}
body.category-news .post-hero{
  padding:56px 0 28px !important;
}

/* 詳細（投稿 single） */
body.single section{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
body.single .post-hero{
  padding:72px 0 32px !important; /* PC */
}

/* SPはもう少し詰める */
@media (max-width: 900px){
  body.category-news section{
    padding-top:44px !important;
    padding-bottom:60px !important;
  }
  body.category-news .post-hero{
    padding:40px 0 20px !important;
  }
}


/* Google Map：必ず中央＆レスポンシブにする（強制） */
.map-embed{
  width:100% !important;
  max-width:100% !important;
  margin:18px auto 0 !important;
  aspect-ratio:16 / 9 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.06) !important;
}

.map-embed iframe{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
}

@media (max-width: 900px){
  .map-embed{
    aspect-ratio:4 / 3 !important;
  }
}
/* PCのみ：ヘッダー完全FIX */
@media (min-width: 901px){
  /* toggle はPCでは存在させない */
  .menu-toggle{
    display:none !important;
  }

  .header-inner{
    position:relative;
    width:100%;
    max-width:none;
    margin:0;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
    height:72px;
  }

  /* ロゴ：左 */
  .header-logo{
    position:absolute;
    left:var(--gutter);
    top:50%;
    transform:translateY(-50%);
  }

  /* メニュー：右 */
  .site-nav{
    position:absolute;
    right:var(--gutter);
    top:50%;
    transform:translateY(-50%);
    margin:0;
  }
}
	
	/* PC：ヘッダーを端まで使って美しく整える */
@media (min-width: 901px){
  .header-inner{
    max-width:none;          /* コンテナ制限解除 */
    padding:12px 32px;       /* ← ここが効く */
    height:64px;             /* Apple寄せ */
  }

  .header-logo{
    margin-right:auto;
  }

  .site-nav .menu{
    gap:32px;                /* メニューの品格 */
  }
}
/* =============================================
   Message Page Template Styles
   (Add to the bottom of style.css)
============================================= */

/* ページ全体のラッパー（ヘッダー被り調整含む） */
.page-message-wrapper {
    /* 既存CSSの section-pad 変数を使用しつつ、上部はヘッダー分確保 */
    padding-top: 60px; 
    background-image: linear-gradient(1deg, #ffffff, #ffffff 90%, #fafafa);
}

/* タイトルエリア */
.page-message-hero {
    padding: 80px 0 60px;
    text-align: center;
}

.page-message-title {
    font-size: clamp(36px, 5vw, 64px); /* 既存のh1より少し落ち着きを持たせるか、同等に */
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    line-height: 1.1;
    margin-bottom: 16px;
    color: var(--black);
}

.page-message-subtitle {
    font-size: 14px;
    letter-spacing: .2em;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
}

/* 本文エリア */
.page-message-body {
    padding-bottom: 120px; /* 下部に十分な余白 */
}

/* 読み物用の幅狭カラム（可読性向上） */
.message-read-layout {
    max-width: 740px; /* 広すぎない幅に制限 */
    margin: 0 auto;
}

/* 導入文 */
.message-lead-block {
    margin-bottom: 80px;
    text-align: center;
}

.message-lead-text {
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 600;
    line-height: 2;
    letter-spacing: var(--ls-mid);
    color: var(--black);
}

/* 各セクション */
.message-section {
    margin-bottom: 80px;
}

/* 見出し H2 */
.message-h2 {
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 650;
    letter-spacing: var(--ls-mid);
    margin-bottom: 32px;
    color: var(--black);
}

/* 本文 P */
.message-section p {
    font-size: 17px; /* 既存より1px下げて長文を読みやすく */
    line-height: 2;
    letter-spacing: var(--ls-tight);
    color: rgba(29, 29, 31, 0.9); /* #1d1d1f の透過版で少し柔らかく */
    margin-bottom: 2em; /* 段落間を広めに */
    text-align: justify; /* 両端揃えで美しく（日本語のみ） */
    text-justify: inter-ideograph;
}
.message-section p:last-child {
    margin-bottom: 0;
}

/* 署名ブロック */
.message-signature-block {
    margin-top: 100px;
    text-align: right; /* 右寄せ */
}

.msg-sign-catch {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: var(--ls-mid);
}

.msg-sign-company {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 500;
}

.msg-sign-role {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.msg-sign-name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* SPレスポンシブ調整 */
@media (max-width: 768px) {
    .page-message-hero {
        padding: 60px 0 40px;
    }
    .page-message-body {
        padding-bottom: 80px;
    }
    .message-read-layout {
        padding: 0 4px; /* コンテナgutterがあるため微調整 */
    }
    .message-lead-block {
        margin-bottom: 50px;
        text-align: left; /* SPでは左寄せの方が自然な場合が多い */
    }
    .message-lead-text br {
        display: none; /* SPでは改行を無視して流し込む */
    }
    .message-section {
        margin-bottom: 60px;
    }
    .message-section p {
        font-size: 16px;
        text-align: left; /* SPは左寄せに戻す */
    }
    .message-signature-block {
        margin-top: 60px;
        text-align: left; /* SPでは左寄せが見やすい */
    }
}