/* ==============================
   Base
============================== */
:root{
    --ink:#222222;
    --muted:#666666;
    --bg:#FFFFFF;
    --accent:#F29600;
    --accent-deep:#FF7A33;
    --brand:#33475B;
    --paper:#F5F8FA;
    --line:#959494;
    --container:1180px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    color:var(--ink);
    background:#fff;
    font-family:"Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, Arial, sans-serif;
    font-feature-settings:"palt";
  }
  
  .page{min-height:100%}
  .container {
    width:100%; 
    max-width:var(--container); 
    margin-inline:auto; 
  }
  
  /* ==============================
     Layout
  ============================== */
  .detail-layout{
    display:grid;
    grid-template-columns: 1fr 420px;
    gap:48px;
    padding-top:40px;
  }

  .detail-main {
    min-width: 0;
  }
  
  /* ==============================
     Head
  ============================== */
  .detail-head {
    display:flex; 
    flex-direction:column; 
    gap: 8px; 
    padding-bottom:16px
  }
  .eyebrow{color:var(--accent); font-size:18px; font-weight:700; line-height:27px; margin:0}
  .title{color:var(--ink); font-size:24px; font-weight:700; line-height:36px; margin:0}
  
  .tags{display:flex; gap:8px; list-style:none; padding:0; margin:0}
  .tag{padding:8px; outline:1px solid var(--accent); outline-offset:-1px; color:var(--accent); font-size:14px; font-weight:500; line-height:14px}
  
  /* ==============================
     Hero
  ============================== */
  .hero { 
    margin:0 0 32px
  }
  .hero-image { 
    width:100%; 
    height:400px; 
    object-fit:cover; 
    background:#D9D9D9; 
    display:block; 
    border-radius:4px
  }
  
  /* ==============================
     Text blocks
  ============================== */
  .lead{font-size:16px; line-height:24px; color:var(--ink)}

  .lead-sub {
    margin: 0;
    padding-left: 1.2em;
    list-style: disc;
    color: #222222;
  }
  
  /* Divider */
  .section-divider {
    margin-top:32px; 
    padding-bottom:4px; 
    border-bottom:1px solid var(--accent-deep)
  }
  .section-title{font-size:24px; line-height:36px; font-weight:700; margin:0; color:var(--ink)}
  .section-title.with-bar{padding-left:16px; border-left:6px solid var(--accent-deep)}
  
  /* ==============================
     Details (label-value rows)
  ============================== */
  .detail-rows{display:flex; flex-direction:column; gap:16px; margin-top:24px}
  .detail-row{display:flex; gap:16px; align-items:flex-start}
  .detail-row .label{width:160px; font-size:16px; line-height:24px; font-weight:500; color:var(--ink)}
  .detail-row .value {
    flex:1 0 0; 
    font-size:16px; 
    line-height:24px; 
    font-weight:500
  }
  .detail-row + .detail-row {
    border-top:1px solid #7F7F7F;
    padding-top:16px;   /* 余白つけたい場合 */
  }

  .prog-head{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    font-size:16px;
    line-height:24px;
    color:#222;
  }
  
  /* 番号付きリスト本体 */
  .prog-list{
    margin:0;
    padding-left:1.6em;   /* 数字のインデント */
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .prog-list > li{
    font-size:16px;
    line-height:24px;
    color:#222;
  }
  
  /* 各項目のタイトル行（太字） */
  .prog-title{
    display:block;
    font-weight:700;
    margin-bottom:4px;
  }
  
  /* 小項目の箇条書き */
  .prog-sub{
    margin:0;
    padding-left:1.2em;   /* ・ のインデント */
    list-style:disc;
    color:#666;
  }
  .prog-sub li{ margin:4px 0; }

  .prog-item,
    .prog-item * {
    color: #666;
    font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    padding-left: 0;
    gap: 0;
    }
  .prog-item .prog-title {
    color: #222222;
  }


    .prog-section{ margin: 4px 0 12px; }

    /* 親見出し行に「・」を付ける（太字） */
    .prog-section__head{
    display: list-item;     /* 箇条書きの扱いに */
    list-style: none;       /* デフォルトのドットは消す */
    position: relative;
    padding-left: 1em;      /* ぶら下げインデント */
    font-weight: 700;
    }
    .prog-section__head::before{
    content: '・';
    position: absolute;
    left: 0;
    top: -7px;
    font-size: 25px;
    }

    /* 子箇条書き（1段字下げ＋「・」） */
    .prog-bullets{
    list-style: none;
    margin: 6px 0 0 1.25em; /* 左に下げて階層感を作る */
    padding: 0;
    }
    .prog-bullets li{
    position: relative;
    padding-left: 1em;
    font-weight: 400;       /* 子はノーマル */
    }
    .prog-bullets li + li{ margin-top: 4px; }
    .prog-bullets li::before{
    content: '・';
    position: absolute;
    left: 0;
    top: -7px;
    font-size: 25px;
    }
  

  .note{color:var(--muted); font-size:14px; line-height:21px; margin-top:4px}
  
  .sub-rows{display:flex; flex-direction:column; gap:4px; margin-top:4px}
  .sub-row{display:flex; gap:8px}
  .sub-time{width:120px; color:var(--muted); font-size:14px; line-height:21px; font-weight:500}
  .sub-text{color:var(--muted); font-size:14px; line-height:21px; font-weight:500}
  
  /* Program */
  .prog-block{display:flex; flex-direction:column; gap:8px}
  .prog-head{font-weight:500}
  .prog-item{color:var(--muted)}
  .prog-item strong{color:var(--ink)}
  
  
  /* ==============================
     CTA
  ============================== */
  .cta-center{display:flex; justify-content:center; margin:24px 0}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 40px; border-radius:4px; text-decoration:none; border:0; cursor:pointer}
  .btn-primary {
    background:#F08519; 
    color:#fff !important; 
    font-size:14px; 
    font-weight:700; 
    line-height:14px
  }
  .btn-dark{background:var(--brand); color:#fff; border:1px solid var(--brand)}
  .btn-lg {
    font-size:24px; 
    line-height:24px; 
    font-weight:600; 
    padding:13px 25px;
    margin-top: 4px;
  }
  
  /* ==============================
     Speaker cards
  ============================== */
  .speaker-cards{display:flex; flex-direction:column; gap:24px; margin:24px 0}
  .speaker-card{display:flex; gap:24px; align-items:flex-start}
  .speaker-card__img {
    width:240px; 
    height:160px; 
    object-fit:cover;
  }
  .speaker-card__body{flex:1 1 auto; display:flex; flex-direction:column; gap:16px}
  .speaker-card__head{display:flex; align-items:baseline; gap:8px; padding-left:16px; border-left:6px solid var(--accent-deep)}
  .speaker-card__name{font-size:18px; line-height:23.4px; font-weight:700}
  .speaker-card__org{font-size:14px; line-height:18.2px; color:var(--muted); font-weight:500}
  .org{font-size:14px; line-height:18.2px; color:var(--muted); font-weight:500}
  .speaker-card__bio{font-size:14px; line-height:21px; margin:0}

  .speaker + .speaker {
    margin-top:16px;
  }
  
  /* ==============================
     Company section
  ============================== */
  .company-section {
    background:#F2F2F2; 
    padding:24px; 
    border-radius:4px; 
    margin:32px 0;
  }

  .company-row + .company-row {
    border-top:1px solid #7F7F7F;
    padding-top:16px;   /* 余白つけたい場合 */
    margin-top:16px;
  }

  .company-head{margin-bottom:16px}
  .company-title{font-size:20px; line-height:30px; font-weight:700; padding-left:16px; border-left:6px solid var(--accent-deep); margin:0}
  .company-list{margin:0; padding:0}
  .company-row{display:flex; gap:16px; margin:16px 0}
  .company-row dt{width:160px; font-size:16px; line-height:24px; font-weight:500}
  .company-row dd { 
    margin:0; 
    font-size:16px; 
    line-height:24px; 
    font-weight:500;
    flex: 1 0 0;
  }
  .company-row dd strong{font-weight:700}
  
  /* ==============================
     Sidebar form
  ============================== */
  .sidebar{display:flex; flex-direction:column; gap:16px}
  .card {
    padding: 0 16px 24px;
  }
  .form { 
    display:flex; 
    flex-direction:column; 
    gap:18px;
  }
  .form-group {
    display:flex; 
    flex-direction:column; 
    gap:8px; 
    padding-bottom:14px; 
  }
  .form-label{color:var(--brand); font-size:14px; font-weight:300}
  .req{color:#E51520; margin-left:4px}
  .input, .textarea{
    background:var(--paper); border-radius:3px; outline:1px solid var(--line); outline-offset:-1px;
    padding:8px 12px; font-size:16px; color:#222; border:0
  }
  .textarea{line-height:22px}
  .agree{display:flex; gap:4px; align-items:center; color:var(--brand); background:#EAF0F6; padding:0 6px; width:max-content}
  .link{color:#0000EE; text-decoration:underline}
  .form-actions{display:flex; justify-content:center}

  /* 2カラムの親。sidebarが親の中で止まる＝フッターには被らない */
  .detail-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 420px; /* 既存どおり */
    gap:48px;
    align-items:start; /* ← sidebarが上から始まるように */
  }
  
  /* 追従させる本体 */
  .sidebar{
    position: sticky;
    top: 88px;            /* ここをヘッダーの高さ＋余白に合わせて調整 */
    align-self: start;    /* grid内で高さを伸ばさず内容高さのまま */
    height: max-content;  /* 伸び防止。内容の高さに合わせる */
  }
  
  /* WordPress管理バーが出ている時のオフセット補正（任意） */
  body.admin-bar .sidebar{
    top: calc(88px + 32px);  /* 32pxは管理バーの高さ（環境で変える） */
  }
  

/* =========================
   Apply Form (scoped)
   他スタイルに干渉しないよう .apply-form 配下に限定
========================= */
.apply-form {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 55px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
                 "Hiragino Kaku Gothic Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --af-ink: #222222;
    --af-muted: #33475B;
    --af-danger: #E51520;
    --af-hint: #707070;
    --af-accent: #FF7A33;
    --af-brand: #33475B;
    --af-field: #F5F8FA;
    --af-border: #959494;
    --af-radius: 3px;
  }
  
  .apply-form__header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--af-accent);
  }
  
  .apply-form__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    color: var(--af-ink);
  }
  
  .apply-form__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 16px;
    background: #fff;
  }
  
  /* field */
  .af-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .af-field__label {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    padding: 4px 0 2px;
  }
  
  .af-field__label-text {
    color: var(--af-muted);
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
  }
  .af-field__label-text--small {
    font-size: 13.67px; /* Figma の数値に合わせる場合 */
  }
  
  .af-field__req {
    color: var(--af-danger);
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
  }
  
  /* inputs */
  .af-input,
  .af-textarea {
    background: var(--af-field);
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius);
    padding: 8px 12px;
    color: var(--af-hint);
    font-size: 16px;
    font-weight: 300;
  }
  
  .af-textarea {
    line-height: 22px;
    resize: vertical;
    max-width: 720px; /* 元デザイン準拠の横幅上限 */
  }
  
  /* consent */
  .af-consent {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 3.5px 0 2px;
    margin: 0;
  }
  
  .af-policy {
    color: #0000EE !important;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 300;
  }
  
  .af-consent__text {
    background: #EAF0F6;
    color: var(--af-muted);
    font-size: 14px;
    font-weight: 300;
    padding: 0 .25rem;
  }
  
  /* actions */
  .af-actions {
    display: flex;
    justify-content: center;
  }
  
  .af-btn {
    background: var(--af-brand);
    border: 1px solid var(--af-brand);
    color: #fff;
    padding: 13px 25px;
    font-size: 24px;
    font-weight: 600;
    line-height: 24px;
    border-radius: var(--af-radius);
    cursor: pointer;
    margin: 4px 0 48px;
  }
  
  
  /* ==============================
     Footer lite band
  ============================== */
  .footer-lite{background:#4D4D4D; color:#fff; padding:24px 0 32px}
  .footer-lite__inner{display:flex; align-items:center; gap:8px}
  .brand__logo{width:192px; height:64px; object-fit:contain}
  .footer-lite__bottom{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px}
  .footer-link{color:#fff; text-decoration:none; font-size:14px; line-height:14px}
  .footer-link + .footer-link{margin-left:16px}
  .copy{font-size:12px; line-height:14px; color:#fff}
  


    @media (max-width: 768px){
        .detail-layout { 
            grid-template-columns: 1fr; 
            padding: 24px 16px;
            width: auto;
        }
        .sidebar { 
            position: static; 
            top:auto; 
            display: none;
        }

        .hero-image {
            width: 100%;
            height: auto;              /* ← 固定高さをやめる */
            object-fit: contain;       /* ← 画像全体を収める */
            object-position: center;   /* 中央寄せ */
            display: block;
        }

        .company-section {
            padding:16px;
        }

        .footer-lite__bottom {
            flex-direction:column; 
            align-items:flex-start; 
            gap:8px;
        }

        .af-btn { 
            font-size: 20px; 
            margin-bottom: 16px;
        }

        .prog-list { 
            gap:12px; 
        }

        .detail-row {
            flex-direction: column;
            gap: 8px;
        }

        .speaker-card {
            flex-direction: column;
            gap: 8px;
        }

        .speaker-card__head{
            flex-direction: column;
            gap: 2px;
        }

        .company-row {
            flex-direction: column;
            gap: 0;
        }

        .apply-form {
            margin-top: 32px;
        }

    }

    /* 本文とサイドバー両方に適用 */
    #hs-form-main .hs-form, 
    #hs-form-side .hs-form { width: 100%; }

    #hs-form-main .hs-form-field,
    #hs-form-side .hs-form-field { margin-bottom: 18px; }

    #hs-form-main .hs-input,
    #hs-form-side .hs-input,
    #hs-form-main textarea.hs-input,
    #hs-form-side textarea.hs-input{
    width: 100%;
    padding: 8px 12px;
    background: #F5F8FA;
    border: 1px solid #959494;
    border-radius: 3px;
    font-size: 16px;
    box-sizing: border-box;
    }

    #hs-form-main .hs-button,
    #hs-form-side .hs-button{
    display: inline-block;
    padding: 13px 25px;
    background: #33475B;
    color: #fff;
    border: 1px solid #33475B;
    border-radius: 3px;
    font-size: 24px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
    }

    #hs-form-main .hs-error-msgs,
    #hs-form-side .hs-error-msgs{ color:#E51520; font-size: 13px; margin-top: 6px; }

    #hs-form-main .actions {
        padding: 24px;
    }