/* ===========================================================
   マサル 70年の歴史 — スタイル
   グレースケール基調 / 現サイトのトンマナを踏襲
   =========================================================== */
:root{
  --ink:#1c1c1b;
  --ink-soft:#3a3a38;
  --sub:#74746f;
  --faint:#9a9a94;
  --line:#dcdcd8;
  --line-soft:#ebebe7;
  --bg:#ffffff;
  --panel:#eeeeec;
  --panel-2:#e6e6e3;
  --accent:#284a73;        /* コーポレートブルー */
  --orange:#e8731c;        /* 周年オレンジ（カード背景） */
  --orange-deep:#7a2e00;
  --on-orange:#2a1606;
  --accent-soft:#3a608c;
  --ph-a:#dadad7;
  --ph-b:#c4c4c0;
  --serif:'Jost',sans-serif;
  --jp:'Noto Sans JP',sans-serif;
  --jp-head:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--jp);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.85;
}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:#cdd7e3;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.tracked{letter-spacing:.42em;}
.tracked-sm{letter-spacing:.22em;}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.hd-inner{
  display:flex;align-items:center;justify-content:center;gap:38px;
  height:74px;position:relative;
}
.hd-nav{display:flex;align-items:center;gap:30px;}
.hd-nav a{
  font-family:var(--jp-head);font-weight:500;font-size:13.5px;letter-spacing:.06em;
  color:var(--ink-soft);text-decoration:none;white-space:nowrap;
  position:relative;padding:6px 0;transition:color .2s;
}
.hd-nav a:hover{color:var(--accent);}
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .25s;}
.hd-nav a:hover::after{transform:scaleX(1);}
.brand-logo{display:flex;align-items:center;gap:9px;text-decoration:none;padding:0 6px;}
.brand-logo .sun{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 50% 38%, #f08a26 0 58%, #e2670f 60% 100%);
  position:relative;box-shadow:0 0 0 0 rgba(0,0,0,0);
}
.brand-logo .sun::after{content:"";position:absolute;left:14%;right:14%;top:54%;height:3px;border-radius:2px;background:#fff;opacity:.9;}
.brand-logo .wm{font-family:'Jost',sans-serif;font-style:italic;font-weight:600;font-size:23px;letter-spacing:.04em;color:#1f7a4d;}
.brand-logo.light .wm{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.3);}
.hd-menu-btn{display:none;}

/* 既存glonaviを詳細モックの白いコンパクトヘッダーとして使用 */
.history-detail-header{
  position:fixed;
  top:0;
  right:0;
  left:0;
  z-index:40;
  min-height:74px;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:saturate(140%) blur(8px);
}
@media(min-width:769px){
  .history-detail-header .glonav,
  .history-detail-header .glonav.fixed{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    height:74px;
    margin:0;
  }
  .history-detail-header .glonav-ul{
    box-sizing:border-box;
    height:74px;
    padding-top:10px;
    font-size:13.5px;
  }
  .history-detail-header .glonav-li > a{
    color:var(--ink-soft);
    font-family:var(--jp-head);
    font-weight:500;
    letter-spacing:.06em;
    text-shadow:none;
  }
  .history-detail-header .glonav-li > a:hover{
    color:var(--accent);
  }
  .history-detail-header .glonav-li.logo{
    height:49px;
    margin-top:0;
  }
  .history-detail-header .glonav-sub{
    top:74px;
  }
  .history-detail-header .glonav.fixed .glonav-ul{
    height:74px;
    padding-top:10px;
    font-size:13.5px;
  }
}
@media(max-width:768px){
  .history-detail-header{
    min-height:50px;
    background:#fff;
  }
}

/* オーバーレイヘッダー（ヒーロー上に重ねる・現サイト踏襲） */
.overlay-header{position:absolute;top:0;left:0;right:0;z-index:30;background:transparent;backdrop-filter:none;border-bottom:none;}
.overlay-header .hd-nav a{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.32);}
.overlay-header .hd-nav a:hover{color:#fff;}
.overlay-header .hd-nav a::after{background:#fff;}
.overlay-header .hd-menu-btn span{background:#fff;}

/* ============ HERO（沿革ページ構成） ============ */
.hero-dev{position:relative;background:#3f86c4;overflow:hidden;}
.hero-bg{position:relative;height:clamp(440px,52vw,660px);}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.hero-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,58,96,.46) 0%,rgba(28,58,96,.12) 24%,rgba(28,58,96,0) 46%);}

/* 中央タイトル */
.hero-center{position:absolute;z-index:5;left:0;right:0;top:clamp(120px,17vw,210px);text-align:center;}
.hero-jp{
  font-family:var(--jp-head);font-weight:600;color:#fff;margin:0;
  font-size:clamp(30px,4.6vw,56px);letter-spacing:.5em;text-indent:.5em;
  text-shadow:0 3px 26px rgba(0,0,0,.4);
}
.hero-en{
  font-family:'Jost',sans-serif;font-weight:300;color:rgba(255,255,255,.95);
  font-size:clamp(15px,1.7vw,22px);letter-spacing:.5em;text-indent:.5em;margin-top:14px;
  text-shadow:0 2px 14px rgba(20,40,70,.7),0 0 30px rgba(20,40,70,.5);
}

/* 右側ウィジェット */
.hero-widgets{position:absolute;z-index:6;right:clamp(20px,4vw,56px);top:clamp(96px,12vw,150px);display:flex;flex-direction:column;gap:12px;align-items:flex-end;}
.fontsize{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:3px;padding:7px 12px;backdrop-filter:blur(2px);}
.fontsize .fs-label{font-family:var(--jp);font-size:11px;letter-spacing:.06em;color:#fff;}
.fs-btn{color:#fff;font-family:'Jost',sans-serif;line-height:1;border-bottom:1px solid rgba(255,255,255,.7);padding:0 1px;}
.fs-btn.sm{font-size:12px;}
.fs-btn.lg{font-size:17px;}
.contact-box{display:flex;flex-direction:column;align-items:center;gap:5px;background:rgba(28,40,55,.42);border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:12px 22px;backdrop-filter:blur(2px);}
.contact-box .cb-head{font-family:var(--jp);font-size:10.5px;letter-spacing:.12em;color:rgba(255,255,255,.85);}
.contact-box .cb-tel{font-family:'Jost',sans-serif;font-weight:500;font-size:23px;letter-spacing:.06em;color:#fff;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.contact-box .cb-tel .ico{font-size:15px;opacity:.9;}
.contact-box .cb-time{font-family:var(--jp);font-size:10.5px;letter-spacing:.04em;color:rgba(255,255,255,.8);}

/* パンくず */
.hero-crumbs{position:absolute;z-index:6;left:0;right:0;bottom:clamp(34px,6vw,74px);display:flex;justify-content:center;gap:12px;align-items:center;}
.hero-crumbs a,.hero-crumbs .cur{font-family:var(--jp);font-size:12.5px;letter-spacing:.06em;color:#fff;text-decoration:none;text-shadow:0 1px 8px rgba(20,40,70,.85),0 0 16px rgba(20,40,70,.6);}
.hero-crumbs a{opacity:.86;}
.hero-crumbs a:hover{opacity:1;}
.hero-crumbs .ar{color:rgba(255,255,255,.7);}

/* 下部の白い曲線 */
.hero-curve{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(56px,7vw,100px);z-index:4;display:block;}

/* 導入セクション（70thロゴ＋リードコピー） */
.hero-intro-sec{background:#fff;text-align:center;padding:18px 32px 84px;}
.intro-anniv{display:block;height:clamp(120px,14vw,168px);width:auto;margin:0 auto 22px;}
.hero-intro{max-width:760px;margin:0 auto;text-align:center;}
.hero-intro p{font-size:15px;line-height:1.95;letter-spacing:.04em;color:var(--ink-soft);margin:0 0 16px;}
.hero-intro p:last-child{margin-bottom:0;}

/* anniversary mark */
.anniv-mark{display:inline-flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);}
.anniv-mark .num{font-family:var(--serif);font-weight:300;font-size:60px;line-height:.8;letter-spacing:-.02em;position:relative;}
.anniv-mark .num sup{font-size:.26em;vertical-align:super;letter-spacing:.05em;font-weight:400;}
.anniv-mark .cap{font-family:var(--serif);font-size:11px;letter-spacing:.42em;text-indent:.42em;color:var(--sub);}
.anniv-mark .rule{width:42px;height:1px;background:var(--line);margin:3px 0;}
.anniv-mark.on-dark{color:#fff;}
.anniv-mark.on-dark .cap{color:rgba(255,255,255,.8);}
.anniv-mark.on-dark .rule{background:rgba(255,255,255,.5);}

/* ============ HISTORY SECTION ============ */
.history{background:#fff;padding:96px 0 110px;}
.hist-head{text-align:center;margin-bottom:64px;}
.hist-head .jp{font-family:var(--jp-head);font-weight:700;font-size:clamp(28px,3.4vw,40px);letter-spacing:.34em;text-indent:.34em;color:var(--ink);}
.hist-head .en{font-family:var(--serif);font-weight:300;font-size:clamp(15px,1.6vw,20px);letter-spacing:.52em;text-indent:.52em;color:var(--sub);margin-top:10px;}
.hist-head .rule{width:30px;height:2px;background:var(--accent);margin:26px auto 0;}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;}

/* ============ CHAPTER CARD（周年オレンジ） ============ */
.card{
  background:var(--orange);border:1px solid rgba(0,0,0,.08);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:box-shadow .35s, border-color .35s;
}
.card.open{box-shadow:0 22px 60px -26px rgba(120,46,0,.5);border-color:rgba(0,0,0,.14);grid-column:1 / -1;}
.card.wide{grid-column:1 / -1;}
.card.open .card-head{grid-template-columns:1fr 46%;min-height:340px;}

/* オレンジカード上の文字色・装飾（白系で統一） */
.card .no{color:#fff;}
.card h3{color:#fff;}
.card .era{color:rgba(255,255,255,.82);}
.card .lead{color:rgba(255,255,255,.95);}
.card .tap .label{color:#fff;}
.card .tap .label .chev{border-color:#fff;}
.card .tap .stem{background:#fff;}
.card .timeline{border-top-color:rgba(255,255,255,.32);}
.card .tl-line{background:rgba(255,255,255,.3);}
.card .tl-line::after{background:#fff;}
.card .episode + .episode{border-top-color:rgba(255,255,255,.28);}
.card .episode .dot{background:var(--orange);border-color:#fff;}
.card .episode .dot::after{background:#fff;}
.card .ep-body .yr{color:#fff;}
.card .ep-body h4{color:#fff;}
.card .ep-body p{color:rgba(255,255,255,.95);}
.card .ep-more{color:#fff;}
.card .ep-more:hover{border-color:#fff;}
.card-head{
  display:grid;grid-template-columns:1fr 42%;min-height:300px;
  cursor:pointer;position:relative;flex:1 0 auto;
}
.card-head .meta{padding:34px 32px 30px;display:flex;flex-direction:column;}
.card-head .no{font-family:var(--jp-head);font-weight:500;font-size:13px;letter-spacing:.18em;color:#fff;margin-bottom:10px;}
.card-head h3{
  font-family:var(--jp-head);font-weight:700;margin:0 0 6px;color:#fff;
  font-size:clamp(22px,2.3vw,28px);letter-spacing:.12em;line-height:1.3;
}
.card-head .era{font-family:var(--serif);font-size:12.5px;letter-spacing:.16em;color:rgba(255,255,255,.82);margin-bottom:18px;}
.card-head .lead{font-size:13.5px;line-height:1.95;color:rgba(255,255,255,.95);letter-spacing:.02em;}
.card-head .cover{position:relative;}
.card-head .cover .ph-img{position:absolute;inset:0;height:100%;width:100%;}

/* TAP 導線 */
.tap{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:0;width:max-content;}
.tap .label{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:500;font-size:12px;letter-spacing:.32em;color:var(--accent);transition:color .25s;}
.tap .label .chev{width:8px;height:8px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg);transition:transform .35s;margin-top:-3px;}
.card.open .tap .label .chev{transform:rotate(-135deg);margin-top:2px;}
.tap .stem{width:1px;height:22px;background:var(--accent);margin-top:6px;margin-left:2px;opacity:.55;}
.card-head:hover .tap .label{color:var(--accent-soft);}

/* ============ ACCORDION TIMELINE ============ */
/* CSS の max-height トグルで開閉（クラス依存で必ず表示）。
   JSは実寸を --panel-max にセットしてイージングを引き締めるだけ。 */
.panel{max-height:0;overflow:hidden;background:#f0954e;transition:max-height .55s cubic-bezier(.4,0,.2,1);}
.card.open .panel{max-height:var(--panel-max,3200px);}
.timeline{padding:8px 36px 50px;position:relative;border-top:1px solid var(--line-soft);}
.tl-inner{position:relative;padding-left:0;max-width:1040px;}

/* 縦ライン（基本は描画済み＝scaleY(1)） */
.tl-line{position:absolute;left:7px;top:30px;bottom:24px;width:2px;background:var(--line);overflow:hidden;}
.tl-line::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleY(1);transform-origin:top;}

.episode{
  position:relative;padding:26px 0 26px 46px;
  display:grid;grid-template-columns:1fr 230px;gap:30px;align-items:start;
  opacity:1;
}
.episode + .episode{border-top:1px dashed var(--line-soft);}
.episode .dot{
  position:absolute;left:0;top:34px;width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:2px solid var(--ink);transform:scale(1);
}
.episode .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink);transform:scale(1);}

/* タイムライン描画演出（モーション許可時のみ・hidden→visible へ） */
@media (prefers-reduced-motion: no-preference){
  .card.open .tl-line::after{animation:tlDraw 1.15s cubic-bezier(.45,0,.1,1) .2s both;}
  .card.open .episode{animation:epIn .62s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s);}
  .card.open .episode .dot{animation:dotPop .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--d,0s) + .18s);}
  .card.open .episode .dot::after{animation:dotFill .35s ease both;animation-delay:calc(var(--d,0s) + .34s);}
}
@keyframes tlDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes epIn{from{transform:translateY(16px)}to{transform:none}}
@keyframes dotPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes dotFill{from{transform:scale(0)}to{transform:scale(1)}}
.ep-body .yr{font-family:var(--serif);font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--accent);margin-bottom:4px;}
.ep-body h4{font-family:var(--jp-head);font-weight:600;font-size:18px;letter-spacing:.04em;margin:0 0 10px;color:var(--ink);line-height:1.4;}
.ep-body p{font-size:13.5px;line-height:1.95;color:var(--ink-soft);margin:0 0 14px;letter-spacing:.01em;}
.ep-more{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-family:var(--jp-head);font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--accent);padding:5px 0;border-bottom:1px solid transparent;transition:border-color .2s,gap .2s;}
.ep-more:hover{border-color:var(--accent);gap:11px;}
.ep-more .arr{font-family:var(--serif);}
.ep-pic{position:relative;height:150px;}
.ep-pic .ph-img{position:absolute;inset:0;height:100%;width:100%;}

/* ============ PLACEHOLDER IMAGE ============ */
.ph-img{position:relative;background:linear-gradient(125deg,var(--ph-a),var(--ph-b));overflow:hidden;}
.ph-img.dark{background:linear-gradient(125deg,#3a3a3a,#1d1d1d);}
.ph-img .stripe{position:absolute;inset:0;background-image:repeating-linear-gradient(125deg,rgba(255,255,255,.16) 0 1px,transparent 1px 12px);}
.ph-img .cap{
  position:absolute;left:0;right:0;bottom:12px;padding:0 14px;text-align:center;
  font-family:'Jost',monospace;font-size:10px;letter-spacing:.12em;line-height:1.5;
  color:rgba(40,40,40,.62);text-transform:none;
}
.ph-img.dark .cap{color:rgba(255,255,255,.66);}
.ph-img .badge{
  position:absolute;left:14px;top:12px;font-family:'Jost',sans-serif;font-size:9px;
  letter-spacing:.22em;color:rgba(40,40,40,.5);border:1px solid rgba(40,40,40,.28);
  padding:2px 7px;border-radius:2px;
}
.ph-img.dark .badge{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.4);}
.ph-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ============ DETAIL OVERLAY ============ */
.ov-backdrop{position:fixed;inset:0;z-index:80;background:rgba(20,20,19,.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .35s;}
.ov-backdrop.show{opacity:1;pointer-events:auto;}
.overlay{
  position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(620px,94vw);
  background:var(--bg);box-shadow:-30px 0 80px -30px rgba(0,0,0,.5);
  transform:translateX(100%);transition:transform .45s cubic-bezier(.4,0,.15,1);
  display:flex;flex-direction:column;
}
.overlay.show{transform:none;}
.ov-top{display:flex;align-items:center;justify-content:space-between;padding:20px 30px;border-bottom:1px solid var(--line-soft);flex:none;}
.ov-top .ch{font-family:var(--jp-head);font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--accent);}
.ov-close{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:12px;letter-spacing:.18em;color:var(--sub);padding:6px;transition:color .2s;}
.ov-close:hover{color:var(--ink);}
.ov-close .x{font-size:18px;line-height:1;}
.ov-scroll{overflow-y:auto;flex:1;}
.ov-hero{position:relative;height:280px;}
.ov-hero .ph-img{height:100%;width:100%;}
.ov-content{padding:40px 50px 64px;}
.ov-content .yr{font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.18em;color:var(--accent);margin-bottom:12px;}
.ov-content h2{font-family:var(--jp-head);font-weight:700;font-size:28px;letter-spacing:.06em;line-height:1.4;margin:0 0 24px;color:var(--ink);}
.ov-content .ov-rule{width:34px;height:2px;background:var(--accent);margin-bottom:28px;}
.ov-content p{font-size:15px;line-height:2.15;color:var(--ink-soft);letter-spacing:.02em;margin:0;}
.ov-nav{display:flex;border-top:1px solid var(--line-soft);flex:none;}
.ov-nav button{flex:1;padding:18px 24px;font-family:var(--jp-head);font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--ink-soft);transition:background .2s,color .2s;display:flex;flex-direction:column;gap:3px;}
.ov-nav button:hover:not(:disabled){background:var(--panel);color:var(--accent);}
.ov-nav button:disabled{opacity:.3;cursor:default;}
.ov-nav button.next{text-align:right;align-items:flex-end;border-left:1px solid var(--line-soft);}
.ov-nav .dir{font-family:var(--serif);font-size:10px;letter-spacing:.2em;color:var(--faint);}

/* ============ FOOTER ============ */
.site-footer-mock{display:block;font-size:0;line-height:0;}
.site-footer-mock img{width:100%;height:auto;display:block;}
.site-footer{background:#1c1c1b;color:#cfcfca;}
.ft-top{padding:64px 0 48px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;}
.ft-brand .mark{display:flex;align-items:center;gap:9px;margin-bottom:18px;}
.ft-brand .dot{width:24px;height:15px;border-radius:50%;background:#fff;transform:skewX(-12deg);}
.ft-brand .wm{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:.16em;color:#fff;}
.ft-brand p{font-size:12.5px;line-height:1.9;color:#9a9a94;letter-spacing:.03em;margin:0;}
.ft-col h5{font-family:var(--jp-head);font-weight:600;font-size:12px;letter-spacing:.16em;color:#fff;margin:0 0 16px;}
.ft-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.ft-col a{font-size:12.5px;letter-spacing:.04em;color:#bdbdb8;text-decoration:none;transition:color .2s;}
.ft-col a:hover{color:#fff;}
.ft-bottom{border-top:1px solid #333330;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.ft-bottom small{font-family:var(--serif);font-size:11px;letter-spacing:.12em;color:#74746f;white-space:nowrap;}
.ft-bottom .anniv-sm{font-family:var(--serif);font-size:11px;letter-spacing:.3em;color:#9a9a94;white-space:nowrap;}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .wrap{padding:0 20px;}
  .hd-nav{display:none;}
  .hd-inner{justify-content:space-between;height:62px;}
  .hd-menu-btn{display:flex;flex-direction:column;gap:4px;padding:8px;}
  .hd-menu-btn span{width:22px;height:1.5px;background:var(--ink);}
  .overlay-header .hd-menu-btn span{background:#fff;}
  .hero-widgets{display:none;}
  .hero-center{top:38%;}
  .grid{grid-template-columns:1fr;gap:20px;}
  .card-head{grid-template-columns:1fr;min-height:0;}
  .card-head .cover{height:200px;order:-1;}
  .card-head .cover .ph-img{position:relative;height:200px;}
  .card-head .meta{padding:28px 24px 26px;}
  .episode{grid-template-columns:1fr;gap:16px;}
  .ep-pic{height:180px;order:-1;}
  .timeline{padding:8px 22px 40px;}
  .ov-content{padding:34px 30px 50px;}
  .ft-top{grid-template-columns:1fr;gap:32px;padding:48px 0 36px;}
  .history{padding:64px 0 76px;}
}
@media(max-width:560px){
  .hero-jp{letter-spacing:.32em;text-indent:.32em;}
  .hero-en{letter-spacing:.36em;text-indent:.36em;}
  .hero-intro-sec{padding-bottom:60px;}
}


/* ===========================================================
   マサル 70年の歴史 — 下層ページ（小章詳細）
   WordPress カスタムフィールド想定の CMS テンプレート
   ブロック：見出し / テキスト / 写真 / 引用 / 2カラム写真 など
   styles.css の :root 変数・ヘッダー・フッターを継承
   =========================================================== */

.detail-main{padding-top:74px;background:var(--bg);}

/* ---- パンくず ---- */
.crumbs{max-width:1180px;margin:0 auto;padding:22px 32px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.crumbs a,.crumbs span{font-family:var(--jp);font-size:12px;letter-spacing:.04em;color:var(--sub);text-decoration:none;white-space:nowrap;}
.crumbs a:hover{color:var(--accent);}
.crumbs .sep{color:var(--faint);}
.crumbs .cur{color:var(--ink);}

/* ---- 記事ヘッダー ---- */
.art-head{max-width:820px;margin:0 auto;padding:46px 32px 40px;text-align:center;}
.art-head .eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:24px;}
.art-head .eyebrow .ch{font-family:var(--jp-head);font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--accent);white-space:nowrap;}
.art-head .eyebrow .no{font-family:var(--serif);font-size:12px;letter-spacing:.18em;color:var(--faint);border:1px solid var(--line);border-radius:2px;padding:3px 9px;white-space:nowrap;}
.art-head h1{font-family:var(--jp-head);font-weight:700;font-size:clamp(30px,4vw,46px);letter-spacing:.06em;line-height:1.4;margin:0 0 18px;color:var(--ink);text-wrap:balance;}
.art-head .era{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.2em;color:var(--sub);margin-bottom:22px;}
.art-head .lead{font-size:16px;line-height:2.1;color:var(--ink-soft);letter-spacing:.02em;text-align:left;text-wrap:pretty;}
.art-head .rule{width:30px;height:2px;background:var(--accent);margin:30px auto 0;}

/* ---- メインビジュアル ---- */
.art-visual{max-width:1120px;margin:8px auto 0;padding:0 32px;}
.art-visual .frame{position:relative;height:clamp(320px,42vw,520px);}
.art-visual .frame .ph-img{position:absolute;inset:0;height:100%;width:100%;}
.figcap{font-family:var(--jp);font-size:12px;letter-spacing:.04em;color:var(--sub);margin-top:12px;padding-left:2px;display:flex;gap:10px;}
.figcap::before{content:"";flex:none;width:18px;height:1px;background:var(--line);margin-top:10px;}

/* ---- 本文ラッパ（ブロック群） ---- */
.art-body{max-width:760px;margin:0 auto;padding:60px 32px 20px;}
.art-body > * + *{margin-top:34px;}

/* WordPress article editor elements */
.art-body{
  counter-reset:article-heading;
}
.art-body > p{
  margin:0 0 22px;
  font-size:15.5px;
  line-height:2.15;
  letter-spacing:.02em;
  color:var(--ink-soft);
  text-wrap:pretty;
}
.art-body > p + p{
  margin-top:0;
}
.art-body strong{
  font-weight:700;
  color:var(--ink);
}
.art-body h2{
  counter-increment:article-heading;
  margin:64px 0 30px;
  padding:0 0 16px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--jp-head);
  font-weight:700;
  font-size:clamp(22px,2.6vw,28px);
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--ink);
}
.art-body h2::before{
  content:counter(article-heading, decimal-leading-zero);
  display:block;
  margin-bottom:10px;
  font-family:var(--serif);
  font-size:12px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:.22em;
  color:var(--accent);
}
.art-body h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin:48px 0 0;
  padding:30px 34px 14px;
  background:var(--panel);
  font-family:var(--jp-head);
  font-size:14px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.08em;
  color:var(--ink);
}
.art-body h3::before{
  content:"";
  flex:none;
  width:10px;
  height:10px;
  background:var(--accent);
  transform:skewX(-12deg);
}
.art-body h3 + ul{
  margin-top:0;
  padding-top:0;
}
.art-body ul{
  margin:48px 0;
  padding:30px 34px;
  list-style:none;
  background:var(--panel);
}
.art-body ul li{
  position:relative;
  margin:0;
  padding-left:20px;
  font-size:13.5px;
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--ink);
}
.art-body ul li + li{
  margin-top:10px;
}
.art-body ul li::before{
  content:"";
  position:absolute;
  top:.7em;
  left:0;
  width:7px;
  height:7px;
  background:var(--accent);
  transform:skewX(-12deg);
}
.art-body ul li strong{
  display:inline-block;
  min-width:8em;
  margin-right:18px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--sub);
}
.art-body blockquote{
  margin:54px auto;
  padding:0 0 0 28px;
  border:0;
  border-left:2px solid var(--accent);
  background:none;
}
.art-body blockquote p{
  margin:0;
  font-family:var(--jp-head);
  font-weight:500;
  font-size:clamp(19px,2.2vw,24px);
  line-height:1.85;
  letter-spacing:.03em;
  color:var(--ink);
  text-wrap:balance;
}
.art-body blockquote cite{
  display:block;
  margin-top:16px;
  font-family:var(--jp);
  font-size:13px;
  font-style:normal;
  line-height:1.7;
  letter-spacing:.06em;
  color:var(--sub);
}

/* 見出しブロック */
.block-heading{margin-top:64px;}
.block-heading .kicker{font-family:var(--serif);font-size:12px;letter-spacing:.22em;color:var(--accent);margin-bottom:10px;}
.block-heading h2{font-family:var(--jp-head);font-weight:700;font-size:clamp(22px,2.6vw,28px);letter-spacing:.04em;line-height:1.5;margin:0;color:var(--ink);padding-bottom:16px;border-bottom:1px solid var(--line-soft);}
.block-heading + *{margin-top:30px;}

/* テキストブロック */
.block-text p{font-size:15.5px;line-height:2.15;color:var(--ink-soft);letter-spacing:.02em;margin:0 0 22px;text-wrap:pretty;}
.block-text p:last-child{margin-bottom:0;}
.block-text strong{font-weight:700;color:var(--ink);}

/* 引用ブロック */
.block-quote{margin:54px auto;padding:0 0 0 28px;border-left:2px solid var(--accent);}
.block-quote p{font-family:var(--jp-head);font-weight:500;font-size:clamp(19px,2.2vw,24px);line-height:1.85;letter-spacing:.03em;color:var(--ink);margin:0;text-wrap:balance;}
.block-quote cite{display:block;margin-top:16px;font-family:var(--jp);font-style:normal;font-size:13px;letter-spacing:.06em;color:var(--sub);}

/* 写真ブロック（本文幅・全幅） */
.block-figure{margin:48px 0;}
.block-figure.bleed{max-width:1120px;margin-left:50%;transform:translateX(-50%);padding:0 32px;width:100vw;box-sizing:border-box;}
.block-figure .frame{position:relative;height:clamp(280px,36vw,440px);}
.block-figure .frame .ph-img{position:absolute;inset:0;height:100%;width:100%;}

/* 2カラム写真ブロック */
.block-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:48px 0;}
.block-gallery .frame{position:relative;height:clamp(200px,24vw,300px);}
.block-gallery .frame .ph-img{position:absolute;inset:0;height:100%;width:100%;}

/* データ／補足ブロック */
.block-note{background:var(--panel);padding:30px 34px;margin:48px 0;}
.block-note h4{font-family:var(--jp-head);font-weight:600;font-size:14px;letter-spacing:.08em;color:var(--ink);margin:0 0 14px;display:flex;align-items:center;gap:10px;}
.block-note h4::before{content:"";width:10px;height:10px;background:var(--accent);transform:skewX(-12deg);}
.block-note dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:10px 26px;}
.block-note dt{font-family:var(--jp);font-size:13px;color:var(--sub);letter-spacing:.04em;}
.block-note dd{margin:0;font-family:var(--jp);font-size:13.5px;color:var(--ink);letter-spacing:.02em;}

/* CMS ブロック注記（編集者向け・本番では非表示にできる） */
.cms-tag{display:inline-block;font-family:'Jost',monospace;font-size:10px;letter-spacing:.12em;color:var(--accent);background:rgba(40,74,115,.08);border:1px dashed rgba(40,74,115,.4);border-radius:2px;padding:2px 8px;margin-bottom:14px;}
body:not(.show-cms) .cms-tag{display:none;}

/* ---- 小章ナビ ---- */
.art-nav{max-width:980px;margin:70px auto 0;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.art-nav a{display:flex;flex-direction:column;gap:6px;padding:26px 28px;border:1px solid var(--line-soft);text-decoration:none;background:var(--bg);transition:border-color .25s,background .25s;}
.art-nav a:hover{border-color:var(--line);background:#fafafa;}
.art-nav a.next{text-align:right;align-items:flex-end;}
.art-nav a.next:first-child{grid-column:2;}
.art-nav .dir{font-family:var(--serif);font-size:11px;letter-spacing:.2em;color:var(--faint);}
.art-nav .t{font-family:var(--jp-head);font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--ink);}
.art-nav .nono{font-family:var(--serif);font-size:11px;letter-spacing:.14em;color:var(--accent);white-space:nowrap;}

/* ---- 一覧へ戻る ---- */
.art-back{text-align:center;padding:48px 32px 90px;}
.art-back a{display:inline-flex;align-items:center;gap:12px;font-family:var(--jp-head);font-weight:500;font-size:13.5px;letter-spacing:.1em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding:8px 4px;transition:gap .25s,color .25s,border-color .25s;}
.art-back a:hover{color:var(--accent);border-color:var(--accent);gap:18px;}

/* ---- CMS 表示トグル（プレビュー用フローティング） ---- */
.cms-toggle{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border-radius:30px;padding:10px 16px;font-family:var(--jp);font-size:12px;letter-spacing:.04em;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);cursor:pointer;user-select:none;}
.cms-toggle .sw{width:30px;height:16px;border-radius:10px;background:rgba(255,255,255,.28);position:relative;transition:background .2s;}
.cms-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s;}
body.show-cms .cms-toggle .sw{background:var(--accent-soft);}
body.show-cms .cms-toggle .sw::after{transform:translateX(14px);}

@media(max-width:760px){
  .detail-main{padding-top:50px;}
  .art-body{padding:44px 22px 16px;}
  .art-body h2{margin-top:52px;}
  .art-body h3{margin-top:40px;padding:24px 22px 12px;}
  .art-body ul{margin:40px 0;padding:24px 22px;}
  .art-body h3 + ul{margin-top:0;padding-top:0;}
  .art-body ul li strong{display:block;min-width:0;margin:0 0 2px;}
  .art-body blockquote{margin:44px auto;padding-left:20px;}
  .block-gallery{grid-template-columns:1fr;}
  .art-nav{grid-template-columns:1fr;}
  .art-nav a.next:first-child{grid-column:1;}
  .block-figure.bleed{padding:0 20px;}
  .crumbs{padding:18px 22px 0;}
  .art-head{padding:36px 22px 30px;}
}

/* company history: existing site image assets */
.hd-logo img{
  display:block;
  width:143px;
  height:auto;
}
.art-visual .frame img,
.block-figure .frame img,
.block-gallery .frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.block-figure .frame img{
  object-position:center;
}
.site-footer-mock{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
  padding:48px 24px;
  background:#edf3f7 url('/img/common/bg_footer.png') center/cover no-repeat;
  box-sizing:border-box;
}
.site-footer-mock a{
  display:block;
  width:min(220px,55vw);
}
.site-footer-mock img{
  width:100%;
  height:auto;
}
@media(max-width:640px){
  .hd-logo img{width:112px;}
  .site-footer-mock{min-height:160px;padding:36px 20px;}
}