/* ============================================================
     葬儀社web / エンディング産業展2026 出展ページ
     配色計画（70:25:5の法則）
       ベース(70%) --iro-base   : #F3EEF8  紫みを含む上品な生成り
       メイン(25%) --iro-main   : #2B2049  深紫（信頼・格式、深藍から紫寄りに調整）
       アクセント(5%) --iro-kin : #B9924F  真鍮金（式典・意匠のアクセント）
     文字サイズ：caption 12px / 本文 16px / 小見出し 24px / タイトル 36px
     行間：基本180%
     幅：全体1000px・見出し900px・本文800px（本文の実測行送りは
        本文中の走り文のみ約40字相当=640pxに抑え、視認性を優先）
     ============================================================ */
  :root{
    --iro-base: #F3EEF8;
    --iro-base-shin: #E6D9EF;
    --iro-main: #2B2049;
    --iro-main-usu: #5F5382;
    --iro-kin: #B9924F;
    --iro-kin-usu: #E4D3AC;
    --iro-moji: #2B2438;
    --iro-keisen: #D9CBE3;
    --iro-shiro: #FFFFFF;
    --iro-orange: #F0883E;
    --iro-orange-usu: #FBD3A8;
    --iro-orange-koi: #D9713C;
    --iro-navy: #1E3A5F;
    --iro-navy-koi: #14283F;

    --font-min: "Noto Serif JP", serif;
    --font-gothic: "Noto Sans JP", sans-serif;

    --w-zentai: 1000px;
    --w-midashi: 720px;
    --w-honbun: 720px;

    --gyokan: 1.8;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; overflow-x:hidden; }
  body{
    margin:0;
    background:var(--iro-base);
    color:var(--iro-moji);
    font-family:var(--font-gothic);
    font-size:16px;
    line-height:var(--gyokan);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img,svg{ max-width:100%; display:block; }
  a{ color:inherit; }

  h1,h2,h3{
    font-family:var(--font-min);
    color:var(--iro-main);
    font-weight:700;
    line-height:1.5;
    margin:0;
  }
  .midashi-dai{ font-size:36px; }         /* h1相当 */
  .midashi-chu{ font-size:24px; }         /* 小見出し(h3) */
  .caption{ font-size:12px; color:var(--iro-main-usu); }

  .waku-zentai{ max-width:var(--w-zentai); margin:0 auto; padding:0 24px; }
  .waku-midashi{ max-width:var(--w-midashi); margin:0 auto; }
  .waku-honbun{ max-width:var(--w-honbun); }

  p{ margin:0 0 1em; }
  ul{ margin:0 0 1em; padding-left:1.3em; }
  li{ margin-bottom:.4em; }

  :focus-visible{
    outline:2px solid var(--iro-kin);
    outline-offset:3px;
  }

  /* ---------- ナビ（告知ページ内の目次） ---------- */
  .mokuji{
    background:#800000;
    border-bottom:1px solid var(--iro-keisen);
  }
  .mokuji-naka{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:10px 24px;
    padding:14px 0;
  }
  .mokuji-logo{
    font-family:var(--font-min); font-weight:700; font-size:16px; color:var(--iro-main);
    text-decoration:none; letter-spacing:.02em;
  }
  .mokuji-logo span{ color:var(--iro-kin); }
  .mokuji-list{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 24px; margin:0; padding:0; font-size:13px; }
  .mokuji-list a{ text-decoration:none; color:var(--iro-shiro); }
  .mokuji-list a:hover{ color:var(--iro-kin-usu); }
  .mokuji-botan{
    text-decoration:underline; color:var(--iro-shiro)!important; font-size:13px; font-weight:700;
  }

  /* ---------- 頭部（お知らせ導入部） ---------- */
  .toubu{ padding:48px 0 40px; }
  .toubu-waku{
    display:grid; grid-template-columns:1fr; gap:24px; align-items:center;
  }
  .toubu-e{ max-width:220px; margin:0 auto 8px; order:-1; }
  @media (max-width:820px){
    .toubu-e{ max-width:220px; order:-1; margin-bottom:8px; }
  }
  .annai-label{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; letter-spacing:.14em; color:var(--iro-kin);
    font-weight:700; margin-bottom:16px;
  }
  .annai-label::before{ content:""; width:22px; height:1px; background:var(--iro-kin); display:inline-block; }
  h1.midashi-dai{ margin-bottom:10px; font-size:36px; }
  .toubu-meta{ font-size:13px; color:var(--iro-main-usu); margin-bottom:18px; }
  .catch-bun{
    font-family:var(--font-min); font-size:18px; color:var(--iro-main-usu);
    font-weight:600; line-height:1.7; margin-bottom:22px; max-width:var(--w-midashi);
  }

  .toubu-lead{ max-width:var(--w-honbun); color:var(--iro-moji); font-size:16px; margin-bottom:10px; }
  .toubu-hosoku{ max-width:var(--w-honbun); color:var(--iro-main-usu); font-size:14px; }

  .cta-retsu{ display:flex; justify-content:center; gap:10px 24px; flex-wrap:wrap; align-items:center; margin-top:22px; }
  .botan-shu, .botan-fuku{
    display:inline-block; padding:11px 22px; font-size:14px; letter-spacing:.03em;
    text-decoration:none; border-radius:2px;
  }
  .botan-shu{
    background:var(--iro-orange); color:var(--iro-shiro); font-weight:700; border-radius:999px;
    width:280px; padding:16px 0; text-align:center; font-size:17px;
  }
  .botan-shu:hover{ background:var(--iro-orange-koi); }
  .botan-fuku{ background:transparent; color:var(--iro-main); text-decoration:underline; padding:11px 4px; }
  .botan-fuku:hover{ color:var(--iro-kin); }

  /* ---------- セクション共通 ---------- */
  section{ padding:76px 0; }
  section + section{ border-top:1px solid var(--iro-keisen); }
  main > section:nth-of-type(odd){ background:var(--iro-shiro); }
  main > section:nth-of-type(even){ background:var(--iro-base-shin); }
  .toubu{ background:var(--iro-base-shin); }
  .sec-label{
    font-size:12px; letter-spacing:.14em; color:var(--iro-kin); font-weight:700;
    margin-bottom:10px; display:block;
  }
  .sec-title{ margin-bottom:20px; }
  .sec-lead{
    font-size:16px; color:var(--iro-main-usu); max-width:var(--w-honbun); margin-bottom:36px;
  }

  /* ---------- とは？ ---------- */
  .towa-bun{ max-width:var(--w-honbun); }

  /* ---------- 4大メリット ---------- */
  .meritto-grid{ display:flex; flex-direction:column; }
  .meritto-koma{
    display:grid; grid-template-columns:160px 1fr; gap:32px;
    padding:34px 0; border-top:1px solid var(--iro-keisen);
  }
  .meritto-koma:first-child{ border-top:none; }
  .meritto-koma:nth-child(even){ grid-template-columns:1fr 160px; }
  .meritto-koma:nth-child(even) .icon-fuda{ order:2; }
  .meritto-koma:nth-child(even) > div:last-child{ order:1; }
  .icon-fuda{
    width:160px; height:160px; border-radius:24px; background:var(--iro-main);
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .icon-fuda svg{ width:104px; height:104px; }
  .meritto-ban{
    font-family:var(--font-min); font-size:34px; color:var(--iro-kin); font-weight:700;
    line-height:1; margin-bottom:10px; display:block;
  }
  .meritto-koma h3{ font-size:20px; margin-bottom:12px; line-height:1.6; }
  .meritto-koma .lead-bun{ font-weight:700; color:var(--iro-moji); margin-bottom:10px; }
  .meritto-koma .shousai{ font-size:16px; color:#4E4664; }
  @media (max-width:600px){
    .meritto-koma{ grid-template-columns:1fr; gap:14px; }
    .meritto-koma:nth-child(even){ grid-template-columns:1fr; }
    .meritto-koma:nth-child(even) .icon-fuda{ order:0; }
    .meritto-koma:nth-child(even) > div:last-child{ order:0; }
    .icon-fuda{ width:112px; height:112px; }
    .icon-fuda svg{ width:72px; height:72px; }
  }

  /* ---------- 二刀流特徴 ---------- */
  .tokuchou-retsu{ display:flex; flex-direction:column; gap:0; }
  .tokuchou-koma{
    display:grid; grid-template-columns:96px 1fr; gap:28px;
    padding:34px 0; border-top:1px solid var(--iro-keisen);
  }
  .tokuchou-koma:first-child{ border-top:none; }
  .tokuchou-koma .icon-fuda{
    width:96px; height:96px; border-radius:18px;
    background:var(--iro-kin);
  }
  .tokuchou-koma .icon-fuda svg{ width:56px; height:56px; }
  .tokuchou-ban{
    font-family:var(--font-min); font-size:34px; color:var(--iro-kin); font-weight:700;
    line-height:1; margin-bottom:10px; display:block;
  }
  .tokuchou-koma h3{ font-size:20px; margin-bottom:10px; }
  .tokuchou-koma .lead-bun{ font-weight:700; margin-bottom:8px; }
  .tokuchou-koma .shousai{ font-size:16px; color:#4E4664; }
  .tokuchou-koma .chuuki{ font-size:12px; color:var(--iro-main-usu); margin-top:8px; }
  @media (max-width:600px){ .tokuchou-koma{ grid-template-columns:1fr; gap:14px; } }

  /* ---------- 成果 ---------- */
  .seika-waku{
    width:100%;
    background:var(--iro-shiro); border:1px solid var(--iro-keisen); color:var(--iro-moji);
    padding:48px 36px; display:flex; flex-direction:column; align-items:center; text-align:center;
  }
  .seika-e{ width:240px; margin-bottom:28px; }
  .seika-catch{
    font-family:var(--font-min); font-size:30px; font-weight:700; color:var(--iro-main);
    margin:0 0 16px;
  }
  .seika-waku p.seika-setsumei{ margin:0; font-size:16px; color:#4E4664; max-width:var(--w-honbun); text-align:left; }
  @media (max-width:600px){ .seika-catch{ font-size:24px; } .seika-e{ width:180px; } }

  /* ---------- できること ---------- */
  .dekiru-list{ width:100%; list-style:none; margin:0; padding:0; display:grid; gap:2px; background:var(--iro-keisen); }
  .dekiru-koma{ background:var(--iro-shiro); padding:26px 28px; display:flex; gap:22px; align-items:center; }
  .dekiru-suuji{
    border-radius:50%; width:64px; height:64px; background:var(--iro-navy);
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .dekiru-suuji svg{ width:32px; height:32px; }
  .dekiru-koma p{ margin:0; font-size:16px; }
  .dekiru-hosoku{ margin:20px 0 0; font-size:16px; text-align:left; }

  /* ---------- FAQ ---------- */
  .shitsumon-gun{ margin-bottom:44px; }
  .shitsumon-gun:last-child{ margin-bottom:0; }
  .shitsumon-gun > .midashi-chu{ margin-bottom:6px; font-size:18px; }
  details.toi{
    border-top:1px solid var(--iro-keisen);
  }
  details.toi:last-child{ border-bottom:1px solid var(--iro-keisen); }
  details.toi summary{
    cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative;
    font-weight:700; font-size:16px; color:var(--iro-main);
  }
  details.toi summary::-webkit-details-marker{ display:none; }
  details.toi summary::after{
    content:"+"; position:absolute; right:2px; top:14px; font-size:20px; color:var(--iro-kin);
    font-family:var(--font-min);
  }
  details.toi[open] summary::after{ content:"–"; }
  details.toi .kotae{ padding:0 34px 20px 0; font-size:16px; color:#4E4664; }
  details.toi .kotae p{ margin:0; }

  /* ---------- 小間番号バッジ ---------- */
  .koma-fuda{ width:120px; margin-bottom:24px; }

  /* ---------- 展示会情報テーブル ---------- */
  table.tenjikai-hyou{ width:100%; max-width:var(--w-honbun); border-collapse:collapse; font-size:16px; }
  table.tenjikai-hyou th, table.tenjikai-hyou td{
    text-align:left; padding:14px 16px; border-bottom:1px solid var(--iro-keisen);
  }
  table.tenjikai-hyou th{ width:36%; color:var(--iro-main-usu); font-weight:500; }
  .kouryaku-hosoku{ font-size:12px; color:var(--iro-main-usu); margin-top:14px; }

  /* ---------- 変化セクション ---------- */
  .toi-fukidashi{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:10px; max-width:var(--w-honbun); }
  .toi-fukidashi li{
    background:var(--iro-shiro); border:1px solid var(--iro-keisen);
    border-radius:2px; padding:14px 18px; font-size:16px; color:var(--iro-main);
    position:relative; padding-left:34px;
  }
  .toi-fukidashi li::before{
    content:"?"; position:absolute; left:14px; top:14px; color:var(--iro-kin); font-weight:700;
    font-family:var(--font-min);
  }

  /* ---------- 特典 ---------- */
  .tokuten-waku{
    display:grid; grid-template-columns:120px 1fr; gap:32px; align-items:center;
    background:var(--iro-shiro); border:1px solid var(--iro-keisen); padding:30px 32px; max-width:var(--w-honbun);
  }
  .wa-icon{ width:96px; height:96px; object-fit:contain; }
  @media (max-width:520px){ .tokuten-waku{ grid-template-columns:1fr; text-align:left; } }

  /* ---------- 申込み ---------- */
  .moushikomi{ background:var(--iro-base-shin); }
  .moushikomi-waku{
    background:var(--iro-shiro); border:1px solid var(--iro-keisen); padding:44px;
    max-width:var(--w-midashi); margin:0 auto;
  }
  .moushikomi-waku .lead-bun{ font-weight:700; margin-bottom:10px; }
  .moushikomi-hosoku{ font-size:13px; color:var(--iro-main-usu); margin-top:16px; }

  /* ---------- AI開示 ---------- */
  .ai-kaiji{ font-size:12px; color:var(--iro-main-usu); }

  /* ---------- 作成者クレジット ---------- */
  .sakusei{ background:var(--iro-shiro); padding:28px 0; }
  .sakusei-hyouji{ margin:0 auto; }
  .sakusei-hyouji p{
    margin:0; font-size:12px; color:var(--iro-main-usu);
    max-width:100%; overflow-wrap:break-word; word-break:break-word;
  }

  /* ---------- 展示会ドットコム仕様 フッター ---------- */
  footer { background-color:#800000; color:white; padding:20px; font-size:13px; }
  footer .inner { max-width:1200px; margin:0 auto; }
  footer .menu { list-style:none; padding:0; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
  footer .menu a { color:white; text-decoration:none; }
  .copyright { text-align:center; margin-top:10px; font-size:0.7em; color:#eee; }
  .footer-copy{display: flex; justify-content: center; gap:10px; align-items: flex-end;}
  .tokusyu-kotira{text-align: center; font-size: 0.8em; margin: 10px auto;}
  .tokusyu-kotira a{color: #0056b3; text-decoration: underline;}

  /* ---------- トップへ戻る ---------- */
  #topButton { display:none; position:fixed; bottom:20px; right:10px; z-index:99; font-size:18px; border:none; outline:none; background-color:#555; color:white; cursor:pointer; padding:15px; border-radius:50%; width:50px; height:50px; }
  #topButton:hover { background-color:#007bff; }

  /* ---------- SP表示 (固定フッター) ---------- */
  @media screen and (max-width: 768px) {
      .tokusyu-kotira{font-size: 0.4em; margin-top: 10px;}
      footer { position: fixed; bottom: 0; padding: 5px 20px; left:0; right:0; width: 100%; box-sizing: border-box; z-index:100; }
      footer .copyright { font-size: 0.8em; margin-top: 0; }
      footer .menu { display:none; }
      #topButton { bottom:90px; right:10px; }
      main { margin-bottom: 70px; } /* 固定フッターに隠れないよう余白を設定 */
  }

  /* ---------- スクロール表示 ---------- */
  .arawareru{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
  .arawareru.mieru{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){
    .arawareru{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  @media (max-width:600px){
    .midashi-dai{ font-size:30px; }
    .catch-bun{ font-size:19px; }
    section{ padding:56px 0; }
  }

  /* ---------- 指定セクションの幅をServiceセクションに合わせて統一 ---------- */
  .toubu .catch-bun,
  .toubu .toubu-lead,
  .toubu .toubu-hosoku,
  #towa .towa-bun,
  #henka .sec-lead,
  #henka .toi-fukidashi,
  #henka .waku-honbun,
  #tokuten .tokuten-waku,
  #moushikomi .moushikomi-waku{
    max-width:none;
  }