/* =====================================
   Global & Variables [38-41]
   ===================================== */
:root {
  --ink:#1e2a36; --ink-soft:#143a66; --brand:#ff7a00;
  --line:#e5eefb; --bg:#f7f9fb; --shadow:0 1px 2px rgba(0,0,0,.06);
}
html { scroll-behavior:smooth; box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:sans-serif; line-height:1.8; background:var(--bg); }
main { max-width:1440px; margin:0 auto; padding:0 24px 72px; }

/* =====================================
   Hero Section (Text 2x size) [42-45]
   ===================================== */
.head {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  margin-top: 24px; margin-bottom: 28px; overflow: hidden;
  padding: 3.5rem 40px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)),
              url(../images/2_head.png) center/cover no-repeat;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 2px rgba(0,0,0,.45), 0 0 12px rgba(0,0,0,.25);
}
#hero_title { text-align: center; font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 800; margin-bottom: 1.5rem; line-height: 1.3; }

#header_txt {
  width: 100%; max-width: 1200px; margin: 0; padding: 0;
  font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 600; line-height: 1.4; text-align: justify; text-justify: inter-ideograph;
}
#header_txt span { display: block; text-indent: 1em; }

/* =====================================
   Quick Icons (Specific Gradient & PP 2x) [46-52]
   ===================================== */
.quick-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; padding: 16px 0 24px; }
.quick-icons__item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; width: fit-content; justify-self: center;}

.quick-icons__circle {
  position: relative; width: clamp(165px, 18vw, 210px); aspect-ratio: 2.9/4;
  border: 2px solid transparent; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: transform .18s;
}
.quick-icons__item:hover .quick-icons__circle { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.12); }

/* 背景グラフィック共通設定 [52] */
.quick-icons__circle .icon-bg-graphic {
  position: absolute; height: auto; opacity: 0.7; z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px; /* 下からの位置を統一する場合 */
}

/* 個別カラーと2/3白グラデーション設定 [48, 49] */
.sfty-btn .quick-icons__circle { border-color: #00B050; background: linear-gradient(180deg, #FFF 0%, #FFF 66.6%, #29FF8A 100%); }
.sfty-btn .icon-main-title, .sfty-btn .icon-sub-title, .sfty-btn .icon-custom-list li::before { color: #00B050; }

.rp-btn .quick-icons__circle { border-color: #00B0F0; background: linear-gradient(180deg, #FFF 0%, #FFF 66.6%, #CAF1FF 100%); }
.rp-btn .icon-main-title, .rp-btn .icon-sub-title, .rp-btn .icon-custom-list li::before { color: #00B0F0; }

.pp-btn .quick-icons__circle { border-color: #FFAA42; background: linear-gradient(180deg, #FFF 0%, #FFF 66.6%, #FFD8A7 100%); }
.pp-btn .icon-main-title, .pp-btn .icon-sub-title, .pp-btn .icon-custom-list li::before { color: #FFAA42; }
/* サイズ */
.sfty-btn .icon-bg-graphic { width: 60% !important; }
.rp-btn .icon-bg-graphic { width: 50% !important; }
.pp-btn .icon-bg-graphic { width: 80% !important; }

/* アイコン内テキスト装飾 [50-52] */
.icon-text-area { position: relative; z-index: 2; padding: 2px 10px 12px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.icon-main-title { margin-top: 0; text-align: center; font-weight: 800; font-size: 1.15rem; margin-bottom: 4px; border-bottom: 1px solid rgba(0,0,0,0.05);  min-height: 3.2em; padding-bottom: 0; display: flex; line-height: 1.2; flex-direction: column;
    justify-content: center; margin-bottom: 0; line-height: 1.2; }
.icon-main-title-sub { font-size: 0.85rem; font-weight: 600; display: block; margin-top: 0; margin-bottom: 0; }
.icon-sub-title { text-align: left; font-weight: 700; font-size: 0.95rem; margin-top: 2px; }
.icon-custom-list { list-style: none; padding: 0; margin: 2px 0 4px 0; }
.icon-custom-list li { position: relative; padding-left: 1.4em; font-size: 0.75rem; line-height: 1.4; text-align: left; font-weight: 600; color: var(--ink); }
.icon-custom-list li::before { content: "✔"; position: absolute; left: 0; font-weight: 800; font-size: 0.85rem; }

/* =====================================
   Accordion & Layout Details [53-60]
   ===================================== */
.card { background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:8px; margin-bottom:28px; overflow: hidden; }
.acc-wrap input[type="checkbox"] { display: none; }
.acc-body { display:none; border-top: 4px solid var(--line); /* 内側と外側を区切る線を追加 */
    padding-top: 8px;                 /* 線と中のコンテンツとの間の余白を確保 */}
.acc-wrap:has(input:checked) .acc-body { display:block; }
.notice .split__text,
.sfty-wrap .split__text,
.pp-wrap .split__text {
  padding-left: 2em;
}
/* 不足していた figure-grid の定義を追加 [HTMLソース [19, 61] 対応] */
.figure-grid {
  display: grid;
  grid-template-columns: repeat( 2,1fr);
  gap: 12px;
  width: 100%;
}

.figure-grid2 {
  display: grid;
  grid-template-columns: repeat( 1fr);
  gap: 12px;
  width: 100%;
}
.acc-body__gallery img { width: 100%; height: 400px; object-fit: contain; border-radius: 6px; }
.sfty-wrap .acc-body__gallery img, .pp-wrap .acc-body__gallery img { height: 200px; }

.btn { display: inline-block; background: var(--brand); border: 2px solid #ffa64d; color: #fff; font-weight: 700; padding: 12px 20px; border-radius: 12px; transition: all .2s; text-decoration: none; cursor: pointer; }
.btn::after { content: " ＋"; }
.acc-wrap:has(input:checked) .btn::after { content: " －"; }

.section__title {
    margin-top: 0; /* これを追加して、タイトルより上の余白をなくします */
    margin-bottom: 2px; /* 下側の文章との間隔を調整 */
}

/* アコーディオン内のリード文章のスタイル調整 */
.section-lead {
    text-align: center;     /* タイトルと同じく中央揃えにする */
    font-size: 1.6rem;       /* .card__title と同じ大きさに設定 */
    font-weight: 700;        /* リード文として目立たせるため太字を推奨 */
    color: var(--ink-soft);  /* タイトルと同じ色にする場合 */
    margin-top: 0;     /* タイトルとの距離が空きすぎる場合は調整 */
    margin-bottom: 1rem;     /* 下のコンテンツとの間隔 */
}

.split { display:flex; position: relative; align-items: center;}
.split__text { flex:0 0 50%; padding:0px 8px; }
.split__media { flex:0 0 45%; min-height:240px;}
.split__media img {
    width: calc(100% - 32px);
    height: 300px; /* .split__media の min-height と同じ高さに固定します */
    object-fit: contain; /* 画像のアスペクト比を維持したまま、指定したサイズで枠を埋めます */
    display: block;
  }
.split.rp, .split.sg { flex-direction:row-reverse; }

/* 「3_sfty.png」と「5_pp.JPG」の右側（カードの右端側）に余白を作る */
.split.sfty .split__media,
.split.pp .split__media {
    display: flex;
    justify-content: flex-end; /* 画像を右に寄せる */
     padding-right: 32px;      /* 以前提案した右余白 */
}

/* 「4_rp.jpg」と「6_sg.png」の左側（カードの左端側）に余白を作る */
.split.rp .split__media,
.split.sg .split__media {
     display: flex;
    justify-content: flex-start; /* 画像を左に寄せる */
    padding-left: 32px;          /* 以前提案した左余白 */
}

/* お知らせセクションのテキスト幅をカードいっぱいに広げる */
.notice .split__text {
    flex: 0 0 100%;      /* 50%制限を解除して100%に設定 [1] */
    max-width: 100%;
    padding: 8px 16px;   /* 左右に適切な余白を確保 */
}

/* お知らせセクションの文章に1文字下げを適用 */
#recruit_exp span {
    display: block;
    text-indent: 1em; /* 安全管理と同じ1文字下げの設定 */
}

.acc-two-cols { display: grid; grid-template-columns: 2fr 720px; gap: 28px; padding: 10px; }
.card__title { font-size: 1.6rem; color: var(--ink-soft); text-align: center; margin: 0.5rem 0 0.2rem; }
.card__title2 { font-size: 1.2rem; margin: 1rem; margin-bottom: 0; }
.acc-list {
    margin-top: 4px;    /* 小見出しのすぐ下に配置 */
    padding-left: 0;
}
.acc-list li { position: relative; padding-left: 1.6em; margin: .2rem 0; list-style: none; }
.acc-list li::before { content: "✔"; position: absolute; left: 0; color: #15a46b; font-weight: 800; }

/* 各種余白と説明文インデント [56, 59] */
.spacer-m { height: 48px; }
.spacer-l { height: 150px; }
#sfty_exp span, #rp_exp span, #pp_exp span, #sg_exp span { display: block; text-indent: 1em; }

.page-top { position: fixed; right: 24px; bottom: 24px; width: 60px; height: 60px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; font-weight: bold; z-index: 10000; }

/* お知らせセクションの実績情報をカード状に装飾 */
.notice .event {
    background: #ffffff;
    border: 1px solid var(--line); /* 既存のカードと同じ線色 [1, 2] */
    border-radius: 10px;           /* 角丸の統一 [2, 3] */
    padding: 16px 20px;
    margin: 12px 0;
    box-shadow: var(--shadow);     /* 軽い影で浮かせる [1, 2] */
}

/* お知らせセクション内のリストからチェックマークを消す */
.notice .acc-list li::before {
    content: none; /* チェックマークを非表示にする */
}

/* チェックマーク用の余白（左側のパディング）を解除する */
.notice .acc-list li {
    padding-left: 0;
}

/* 「第1回」などの見出しを強調 */
.event__title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--brand);           /* ブランドカラーのオレンジで強調 [1, 4] */
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--line); /* 項目との区切り */
    padding-bottom: 4px;
}

/* 開催日、拠点、人数などの各項目 */
.event__item {
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: var(--ink);             /* 基本の文字色 [1] */
    line-height: 1.6;
}

/* 最後の項目の余白を調整 */
.event__item:last-child {
    margin-bottom: 0;
}

/* リスト内の補足文章（学生の感想など）の読みやすさ向上 */
.notice .acc-list p {
    margin-top: 0.1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.1rem;  /* 段落間の余白を調整 */
    text-indent: 1em;              /* 他のセクションと同様の1文字下げを適用 [5-7] */

  }



/* インターンシップのタイトル（h3）の調整 */
.notice h3 {
    font-size: 1.2rem;    /* 他の小見出し（.card__title2）と統一 [3] */
    color: var(--ink-soft); /* ブランドカラーの紺色を適用 [3, 4] */
    margin-bottom: 12px;
    line-height: 1.5;
    border-left: 4px solid var(--brand); /* アクセントにオレンジの縦線を付与 [4] */
    padding-left: 10px;
}

/* お知らせ欄のコンテンツエリアを固定高にしてスクロール可能にする */
.notice .related-links {
    max-height: 200px;           /* 表示したい高さを指定（今の半分程度を想定） */
    overflow-y: auto;            /* 縦方向に中身がはみ出した場合にスクロールを表示 */
    overflow-x: hidden;          /* 横スクロールは防止 */
    border: 1px solid var(--line); /* スクロールエリアを枠線で区切る [1] */
    padding: 16px;               /* 枠内の余白 */
    background-color: #ffffff;   /* 背景を白にして読みやすくする */
    border-radius: 8px;          /* 角丸の統一 [2] */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); /* 内側に軽い影を付けて凹凸を出す */
}

/* スクロールバー自体のデザイン（任意：細くして目立たなくする） */
.notice .related-links::-webkit-scrollbar {
    width: 6px;
}
.notice .related-links::-webkit-scrollbar-thumb {
    background-color: var(--line); /* 変数から色を取得 [1] */
    border-radius: 10px;
}


/* レスポンシブ [62, 63] */
@media (max-width: 960px) {
  .acc-two-cols { grid-template-columns: 1fr; }
  .figure-grid { grid-template-columns: 1fr; }
  .acc-body__gallery img { height: 260px; }
}

/* 関係リンクのスタイル */
.related-links {
    margin: 20px;
    padding-top: 20px;
    border-top: 2px dashed var(--line); /* 区切り線を入れて分かりやすくします */
}

.link-text {
    color: var(--ink-soft); /* タイトルと同じ紺色系を使用 [4] */
    text-decoration: underline;
    font-weight: 600;
}

.link-text:hover {
    color: var(--brand); /* ホバー時はブランドカラーのオレンジに [4, 5] */
}