@charset "utf-8";


    .secPage {
      /* :root は使わず、ページクラスに変数を定義 */
      --sec-brown: #231614;
      --sec-brown2: #2a1b18;
      --sec-cream: #f5f3ef;
      --sec-gold: #c8b88a;
      --sec-gold2: #b9a87a;
      --sec-blue: #163e63;
      --sec-ink: #1a1a1a;

      font-family: "Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color: #c5b899;
      background: #ffffff;
		line-height: 2;
    }

    .secWrap {
      width: min(1100px, calc(100% - 32px));
      margin: 0 auto;
    }

    /* ===== Hero ===== */
    .secHero {
      background: radial-gradient(1200px 360px at 50% 20%, #3b2623 0%, var(--sec-brown) 55%, #160d0b 100%);
      color: #c5b899;
      padding: 56px 0 46px;
      text-align: center;
    }

    .secHeroInner { width: min(980px, calc(100% - 32px)); margin: 0 auto; }

    .secHeroTitle {
      margin: 0 0 18px;
      font-family: Georgia, "Times New Roman", serif;
      letter-spacing: 0.18em;
      font-size: clamp(34px, 5vw, 54px);
      font-weight: 100;
		color: #c5b899;
    }

    .secHeroLead {
      margin: 0 0 22px;
      color: rgba(245, 238, 220, 0.92);
      font-size: 24px;
		line-height: 32px;
    }

    .secHeroText {
      margin: 0;
     color: #c5b899;
      font-size: 14px;
		line-height: 24px;
    }

    /* ===== Intro (white area) ===== */
    .secIntro {
      background: #fff;
      padding: 18px 0 34px;
    }

    .secRibbon {
      background: var(--sec-blue);
      color: #fff;
      text-align: center;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 14px 12px;
      font-size: 13px;
    }

    .secIntroInner {width: 100%;max-width: 1200px; padding-top: 22px;text-align: center; }

    .secIntroTitle {
      margin: 0 0 10px;
      text-align: center;
      font-size: clamp(18px, 2.2vw, 24px);
      font-weight: 800;
      color: #173a57;
    }

    .secIntroRow {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      margin-top: 10px;
		text-align: center;
    }

    .secIntroCopy {
      margin: 0;
      color: #c5b899;
      font-size: 12px;
    }

    .secLogoArea {
      display: grid;
      gap: 8px;
      justify-items: end;
      min-width: 160px;
    }

    .secLogoLine {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #c5b899;
      font-size: 11px;
      white-space: nowrap;
    }

    .secLogoDot {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: #e8e2d6;
      border: 1px solid #d6caa9;
    }

    /* ===== Dark details ===== */
    .secDetail {
      background: var(--sec-brown2);
      color: rgba(245, 238, 220, 0.92);
      padding: 34px 0 44px;
    }

    /* top 3 cards */
    .secCardGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .secCard {
      background: transparent;
      border: 1px solid rgba(200, 184, 138, 0.55);
    }

    .secCardHead {
      background: rgba(200, 184, 138, 0.20);
      border-bottom: 1px solid rgba(200, 184, 138, 0.45);
      padding: 12px 10px;
      font-weight: 700;
      font-size: 12px;
      color: #c5b899;
    }

    .secCardBody { padding: 10px; }

    .secMediaBox {
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .secMediaBox img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .secCardList {
      margin: 10px 0 0;
      padding: 0 0 0 1.1em;
      font-size: 12px;
		line-height: 24px;
     color: #c5b899;
    }

    .secCardNote {
      margin: 10px 0 0;
      font-size: 11px;
      color: #c5b899;
    }

    /* 2-column split sections */
    .secSplitGrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 18px;
		      border: 1px solid rgba(200, 184, 138, 0.45);
    }

    .secBlock {

      padding: 14px;
      background: rgba(0,0,0,0.08);
    }

    .secBlockTitle {
      margin: 0 0 10px;
      font-weight: 800;
      font-size: 17px;
      color: #c5b899;
    }

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

    .secBlockText {
      margin: 0;
      font-size: 12px;
		line-height: 24px;
     color: #c5b899;
		text-align: justify;
    }

    .secBlockText + .secBlockText { margin-top: 10px; }

    .secFrameTitle {
      display: inline-block;
      padding: 14px 10px;
      border: 1px solid rgba(200, 184, 138, 0.75);
      color: #c5b899;
      font-weight: 900;
      letter-spacing: 0.06em;
      font-size: 12px;
      margin-bottom: 10px;
      background: rgba(0,0,0,0.10);
    }

    .secCallout {
      border: 1px solid rgba(200, 184, 138, 0.55);
      padding: 10px 12px;
      margin-top: 12px;
      font-size: 12px;
     color: #c5b899;
      background: rgba(0,0,0,0.10);
    }

    .secBulletBox {
      border: 1px solid rgba(200, 184, 138, 0.55);
      padding: 10px 12px;
      margin-top: 14px;
      background: rgba(0,0,0,0.10);
    }

    .secBulletBox ul {
      margin: 0;
      padding-left: 1.1em;
      color: rgba(245, 238, 220, 0.9);
    }

.secBulletBox ul li{
      font-size: 16px;
		line-height: 36px;}

    /* bottom admin */
    .secAdmin {
      margin-top: 18px;
      border: 1px solid rgba(200, 184, 138, 0.45);
      padding: 14px;
      background: rgba(0,0,0,0.08);
    }

    .secAdminTitle {
      margin: 0 0 8px;
      font-weight: 900;
      font-size: 18px;
      color: #c5b899;
    }

    .secAdminText {
      margin: 0 0 12px;
      font-size: 12px;
      color: #c5b899;
    }

    .secAdminList {
      margin: 0;
      padding: 10px 12px 10px 1.2em;
      border: 1px solid rgba(200, 184, 138, 0.55);
      background: rgba(0,0,0,0.10);
      font-size: 12px;
     color: #c5b899;
    }

    /* ===== Responsive ===== */
    @media (max-width: 900px) {
      .secIntroRow { grid-template-columns: 1fr; }
      .secLogoArea { justify-items: start; }
      .secCardGrid { grid-template-columns: 1fr; }
      .secSplitGrid { grid-template-columns: 1fr; }
      .secBlockRow { grid-template-columns: 1fr; }
      .secMediaBox { aspect-ratio: 16 / 10; }
    }

    @media (max-width: 480px) {
      .secHero { padding: 46px 0 40px; }
      .secRibbon { font-size: 12px; }
      .secIntro { padding-bottom: 26px; }
      .secDetail { padding: 26px 0 34px; }
    }
.secHeroTitle { font-size: clamp(60px, 6.6vw, 82px); }
.secHeroLead  { font-size: clamp(20px, 2.4vw, 24px); }

.secIntroTitle { font-size: clamp(20px, 2.6vw, 28px); }
.secRibbon     { font-size: 15px; }

.secCardHead   { font-size: 18px; }
.secCardList,
.secBlockText,
.secIntroCopy,
.secAdminText,
.secAdminList { font-size: 16px;line-height: 24px; }

.secFrameTitle { font-size: 20px; }
.secCallout    { font-size: 14px; }