@charset "UTF-8";

  :root{
    --ink:#113a57;
    --navy:#113a57;
    --panel:#1c1c1c;
    --ivory:#f1f1f1;
    --mist:#a3a3a3;
    --brass:#8f8f8f;
    --white:#ffffff;
    --wine:#262626;
    --pink:#e778a5;
    --white:#ffffff;
    --red-alert:#cc0000;
    --serif-jp:'Noto Serif JP', serif;
    --sans-jp:'Noto Sans JP', sans-serif;
    --serif-en:'Noto Sans JP', sans-serif;
    --vh:100vh;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  
  /* ベースフォントサイズを拡大（18px基準） */
  html{
    font-size:18px;
    scroll-behavior:smooth;
  }
  body{
    background:var(--ivory);
    color:var(--ink);
    font-family:var(--sans-jp);
    font-size:1rem;
    line-height:1.85;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--brass);color:var(--ink);}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  /* ---------- 共通ユーティリティ (余白) ---------- */
  .spacer-50{height:50px;width:100%;}
  .spacer-100{height:100px;width:100%;}

  @media (max-width:768px){
    .spacer-50{height:30px;}
    .spacer-100{height:60px;}
  }

  /* ---------- ヘッダー ---------- */
  header.sub-nav{
    position:sticky;top:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:16px clamp(20px,5vw,56px);
    background:rgba(12,12,12,0.94);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(143,143,143,0.25);
  }
  .brand-logo{
    font-family:var(--serif-jp);
    font-size:1.1rem;
    font-weight:500;
    letter-spacing:0.08em;
    color:var(--ivory);
  }
  .nav-back{
    font-size:0.84rem;
    letter-spacing:0.08em;
    color:var(--white);
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:color .3s ease;
  }
  .nav-back:hover{color:var(--ivory);}

  /* ---------- サブページ ヒーロー ---------- */
  .subpage-hero{
    background:var(--navy);
    color:var(--white);
    padding:clamp(64px, 10vw, 108px) clamp(20px, 5vw, 56px) clamp(44px, 8vw, 76px);
    text-align:center;
    position:relative;
    border-bottom:1px solid rgba(143,143,143,0.2);
  }
  .eyebrow{
    font-family:var(--serif-en);
    font-style:italic;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-size:.8rem;
    color:var(--white);
    margin-bottom:14px;
  }
  
  /* ---------- 見出し要素 (h1〜h4) ---------- */
  h1.subpage-title{
    font-family:var(--sans-jp);
    font-weight:300;
    font-size:clamp(1.9rem, 4.6vw, 3rem);
    letter-spacing:0.06em;
    line-height:1.35;
    margin-bottom:14px;
  }
  .subpage-lead{
    font-size:clamp(0.9rem, 1.6vw, 1.02rem);
    color:var(--white);
    letter-spacing:0.04em;
    max-width:640px;
    margin:0 auto;
    line-height:1.9;
  }

  .content-container{
    max-width:920px;
    margin:0 auto;
    padding:0 clamp(20px, 4vw, 40px);
  }

  h2.content-h2{
    font-family:var(--serif-jp);
    font-size:clamp(1.45rem, 2.8vw, 1.95rem);
    font-weight:500;
    letter-spacing:0.04em;
    color:var(--ink);
    padding-bottom:14px;
    border-bottom:2px solid var(--ink);
    margin-bottom:30px;
    display:flex;
    align-items:baseline;
    gap:14px;
    flex-wrap:wrap;
  }
  h2.content-h2 .en{
    font-family:var(--serif-en);
    font-style:italic;
    font-size:1rem;
    font-weight:400;
    color:var(--brass);
    letter-spacing:0.12em;
    text-transform:uppercase;
  }

  h3.content-h3{
    font-family:var(--serif-jp);
    font-size:clamp(1.18rem, 2.2vw, 1.42rem);
    font-weight:500;
    letter-spacing:0.03em;
    color:var(--ink);
    margin:30px 0 18px;
    padding-left:14px;
    border-left:3px solid var(--brass);
  }

  h4.content-h4{
    font-family:var(--sans-jp);
    font-size:1.02rem;
    font-weight:700;
    letter-spacing:0.02em;
    color:var(--ink);
    margin:22px 0 12px;
  }

  p.text-block{
    font-size:0.96rem;
    line-height:1.95;
    color:#2a2a2a;
    margin-bottom:20px;
  }

  /* ---------- リスト (ul / ol) ---------- */
  ul.custom-bullet-list{
    list-style:none;
    margin:18px 0 26px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  ul.custom-bullet-list li{
    position:relative;
    padding-left:24px;
    font-size:0.94rem;
    line-height:1.8;
    color:var(--navy);
  }
  ul.custom-bullet-list li::before{
    content:'';
    position:absolute;
    left:5px;
    top:11px;
    width:6px;
    height:6px;
    background:var(--navy);
    border-radius:50%;
  }

  ol.custom-num-list{
    list-style:none;
    counter-reset:item-counter;
    margin:18px 0 26px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  ol.custom-num-list li{
    position:relative;
    padding-left:40px;
    font-size:0.94rem;
    line-height:1.8;
    color:#333333;
  }
  ol.custom-num-list li::before{
    counter-increment:item-counter;
    content:counter(item-counter);
    position:absolute;
    left:0;
    top:2px;
    width:26px;
    height:26px;
    background:var(--wine);
    color:var(--ivory);
    font-family:var(--serif-en);
    font-style:italic;
    font-size:0.82rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
  }

  /* ---------- リンク (3種類) ---------- */
  .link-group{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:18px 0;
  }

  /* 1. 通常のテキストリンク */
  a.link-text{
    color:var(--ink);
    text-decoration:underline;
    text-underline-offset:4px;
    font-weight:500;
    transition:color .25s ease, text-decoration-color .25s ease;
  }
  a.link-text:hover{
    color:var(--brass);
    text-decoration-color:var(--brass);
  }

  /* 2. 外部リンク (アイコン付き) */
  a.link-external{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--ink);
    font-size:0.94rem;
    border-bottom:1px solid rgba(12,12,12,0.3);
    padding-bottom:3px;
    width:fit-content;
    transition:all .3s ease;
  }
  a.link-external svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    transition:transform .3s ease;
  }
  a.link-external:hover{
    color:var(--brass);
    border-color:var(--brass);
  }
  a.link-external:hover svg{
    transform:translate(2px, -2px);
  }

  /* 3. PDFリンク (バッジ・アイコン付き) */
  a.link-pdf{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#ffffff;
    border:1px solid rgba(143,143,143,0.35);
    padding:10px 18px;
    border-radius:2px;
    font-size:0.9rem;
    color:var(--ink);
    width:fit-content;
    box-shadow:0 2px 8px rgba(0,0,0,0.04);
    transition:all .3s ease;
  }
  a.link-pdf .pdf-tag{
    background:#8b1111;
    color:#ffffff;
    font-family:var(--serif-en);
    font-size:0.72rem;
    font-weight:700;
    padding:2px 7px;
    border-radius:2px;
    letter-spacing:0.04em;
  }
  a.link-pdf svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    transition:transform .3s ease;
  }
  a.link-pdf:hover{
    border-color:var(--ink);
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
    transform:translateY(-2px);
  }
  a.link-pdf:hover svg{
    transform:translateY(2px);
  }

  /* ---------- 罫線 (hr) ---------- */
  hr.custom-hr{
    border:0;
    height:1px;
    background:linear-gradient(to right, transparent, rgba(143,143,143,0.5), transparent);
    margin:0 auto;
    width:100%;
  }

  /* ---------- Attention (警告・重要注意エリア) ---------- */
  .attention-box{
    border:1px solid var(--red-alert);
    background:var(--white);
    border-radius:2px;
    padding:clamp(20px, 3vw, 28px);
    box-shadow:0 4px 16px rgba(139,17,17,0.06);
  }
  .attention-box-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
  }
  .attention-badge{
    background:var(--red-alert);
    color:#ffffff;
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.12em;
    padding:3px 10px;
    border-radius:2px;
  }
  .attention-title{
    font-family:var(--serif-jp);
    color:var(--red-alert);
    font-size:1.1rem;
    font-weight:700;
    letter-spacing:0.04em;
  }
  .attention-box p{
    color:var(--red-alert);
    font-size:0.92rem;
    line-height:1.85;
  }
  .attention-box ul{
    margin-top:12px;
    list-style:none;
  }
  .attention-box ul li{
    position:relative;
    padding-left:20px;
    color:var(--red-alert);
    font-size:0.9rem;
    line-height:1.8;
  }
  .attention-box ul li::before{
    content:'※';
    position:absolute;
    left:0;
    top:0;
    font-weight:700;
  }

  /* ---------- ボタンリンク (hoverあり 2種類) ---------- */
  .btn-container{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin:24px 0;
  }

  /* ボタン1: 塗りつぶし・真鍮カラー (Primary) */
  .btn-style-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--brass);
    color:var(--ink);
    padding:15px 36px;
    font-size:0.88rem;
    letter-spacing:0.12em;
    font-weight:500;
    border-radius:2px;
    border:1px solid var(--brass);
    transition:all .35s ease;
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
    cursor:pointer;
  }
  .btn-style-primary:hover{
    background:#777777;
    border-color:#777777;
    color:#ffffff;
    transform:translateY(-3px);
    box-shadow:0 8px 22px rgba(0,0,0,0.18);
  }

  /* ボタン2: アウトライン・ダークシック (Ghost/Outline) */
  .btn-style-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:transparent;
    color:var(--navy);
    padding:15px 36px;
    font-size:0.88rem;
    letter-spacing:0.12em;
    font-weight:500;
    border-radius:2px;
    border:1px solid var(--navy);
    transition:all .35s ease;
    cursor:pointer;
    text-align: center;
  }
  .btn-style-outline:hover{
    background:var(--navy);
    color:var(--white);
    transform:translateY(-3px);
    box-shadow:0 8px 22px rgba(12,12,12,0.15);
  }

  /* ---------- YouTube 埋め込みセクション ---------- */
  .youtube-section{
    background:#ffffff;
    border:1px solid rgba(143,143,143,0.3);
    border-radius:2px;
    padding:clamp(18px, 3vw, 30px);
    box-shadow:0 8px 24px rgba(0,0,0,0.04);
  }
  .video-container{
    position:relative;
    width:100%;
    padding-top:56.25%; /* 16:9 Aspect Ratio */
    background:#000000;
    border-radius:2px;
    overflow:hidden;
  }
  .video-container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
  }
  .video-caption{
    margin-top:14px;
    font-size:0.86rem;
    color:var(--mist);
    text-align:right;
    letter-spacing:0.04em;
  }

  /* ---------- 画像セクション ---------- */
  .image-card{
    background:#ffffff;
    border:1px solid rgba(143,143,143,0.25);
    border-radius:2px;
    overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,0.05);
    width:100%;
  }
  .image-card-visual{
    width:100%;
    /* aspect-ratio:16/9; */
    position:relative;
    overflow:hidden;
    background:#ffffff;
  }
  .image-card-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    /* filter:grayscale(0.5) contrast(1.05);
    transition:transform .5s ease, filter .5s ease; */
  }
  /* .image-card:hover .image-card-visual img{
    transform:scale(1.03);
    filter:grayscale(0) contrast(1);
  } */
  .image-card-caption{
    padding:18px 22px;
    font-size:0.88rem;
    line-height:1.75;
    color:#555555;
    border-top:1px solid rgba(143,143,143,0.15);
    background:#ffffff;
  }

/* ---------- 左右分割レイアウト（左:画像＋キャプション / 右:テキスト） ---------- */
  .media-text-section {
    display: flex;
    gap: clamp(24px, 4vw, 40px); /* 画面サイズに応じて隙間を調整 */
    background: var(--white);
    border: 1px solid rgba(143, 143, 143, 0.25);
    border-radius: 2px;
    padding: clamp(20px, 4vw, 32px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    align-items: flex-start; /* 上部揃え */
  }

  /* 左側のエリア（画像とキャプション） */
  .media-text-left {
    flex: 0 0 45%; /* PC表示時、全体の45%の幅を確保 */
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .media-text-left img {
    width: 100%;
    height: auto;
    border-radius: 2px;
    object-fit: cover;
    display: block;
  }

  .media-text-caption {
    font-size: 0.86rem;
    color: #555555;
    line-height: 1.6;
    margin-top: 10px;
    border-left: 3px solid var(--brass); /* 既存のアクセントカラーを使用 */
    padding-left: 10px;
  }

  /* 右側のエリア（テキスト） */
  .media-text-right {
    flex: 1; /* 残りのスペースを全て埋める */
  }
  
  .media-text-right .text-block:last-child {
    margin-bottom: 0; /* 最後の段落の下余白を消して揃える */
  }

  /* レスポンシブ対応（768px以下で縦積みに変更） */
  @media (max-width: 768px) {
    .media-text-section {
      flex-direction: column; /* 縦並びに変更 */
    }
    .media-text-left {
      flex: 0 0 100%; /* 横幅いっぱいにする */
      width: 100%;
    }
  }

  /* ---------- フッター ---------- */
  footer.subpage-footer{
    background:#0c0c0c;
    color:rgba(241,241,241,0.55);
    padding:54px clamp(20px,5vw,56px) 26px;
    font-size:0.84rem;
    text-align:center;
  }
  footer.subpage-footer a{
    color:var(--brass);
    transition:color .2s;
  }
  footer.subpage-footer a:hover{color:var(--ivory);}
  .fcopy{
    margin-top:32px;
    padding-top:22px;
    border-top:1px solid rgba(143,143,143,0.15);
    font-size:0.74rem;
    letter-spacing:0.06em;
    color:rgba(241,241,241,0.35);
  }