@charset "UTF-8";
/*
 * internship.css
 * インターンシップページ専用スタイル
 * style.css の後に読み込む。既存の変数・mixinと同じ値をそのまま展開している
 *   font  : Noto Sans CJK JP / Noto Serif JP（style.css で @font-face 済み）
 *   color : 文字 #3e3a39 ／ 罫線・地色はグレースケール ／ アクセントは赤 #f00・青 #1f50ff
 *   bp    : SP = max-width 768px ／ タブレット = 769〜1200px
 *   vw()  : calc(? / 375 * 100vw) に相当
 */

/* -----------------------------------
 * 共通パーツ
 * --------------------------------- */

/* アンカー位置の調整（js-scroll は offset().top を使うため負のtopで吸収する） */
.p-anchor {
  display: block;
  position: relative;
  top: -100px;
  width: 0;
  height: 0;
  visibility: hidden;
}

/* セクション冒頭のリード文 */
.p-internLead {
  text-align: center;
  font-size: 1.7rem;
  line-height: 2.2;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-internLead {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  .p-internLead {
    font-size: calc(13 / 375 * 100vw);
    line-height: 1.9;
    text-align: left;
  }
}

/* 補足（※） */
.p-internNote {
  font-size: 1.4rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: #6b6867;
}
.p-internNote::before {
  content: "※ ";
}
@media screen and (max-width: 768px) {
  .p-internNote {
    font-size: calc(11 / 375 * 100vw);
  }
}

/* -----------------------------------
 * .p-pageHead の内定ページ用調整
 * --------------------------------- */
.p-pageHead.-internship .p-pageHead_img {
  height: 640px;
  overflow: hidden;
}
.p-pageHead.-internship .p-pageHead_img img {
  max-height: none;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-pageHead.-internship .p-pageHead_img {
    height: 520px;
  }
}
/* SPは写真を切り取らず、そのまま縮小して全体を見せる（元画像 2000×900）。
   ヘッダー（ロゴ＋ENTRYボタン2段）に隠れないよう、その高さぶんだけ下げて置く */
@media screen and (max-width: 768px) {
  .p-pageHead.-internship {
    background: #000;
    /* ヘッダー（ロゴ＋ENTRYボタン2段）のぶんだけ写真を下げる */
    padding-top: calc(92 / 375 * 100vw);
  }
  .p-pageHead.-internship .p-pageHead_img {
    height: auto;
    aspect-ratio: 20 / 9;
  }
  .p-pageHead.-internship .p-pageHead_img img {
    object-fit: contain;
  }
  /* 見出しは写真の範囲だけで上下中央に置く */
  .p-pageHead.-internship .p-pageHead_title {
    top: calc(92 / 375 * 100vw);
    bottom: 0;
    height: auto;
    padding-top: 0;
  }
}
.p-pageHead.-internship .p-pageHead_title ._title {
  line-height: 1.5;
}

/* -----------------------------------
 * 01 メッセージ
 * --------------------------------- */
.p-secIntern1 {
  background: #fff;
}
.p-secIntern1_cnt1 {
  margin-top: 50px;
}
@media screen and (max-width: 768px) {
  .p-secIntern1_cnt1 {
    margin-top: calc(25 / 375 * 100vw);
  }
}
.p-secIntern1_cnt1 p + p {
  margin-top: 2em;
}
.p-secIntern1_cnt1 strong {
  font-weight: 700;
}

.p-secIntern1_img {
  margin-top: 60px;
  aspect-ratio: 3 / 1.35;
  overflow: hidden;
}
.p-secIntern1_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
@media screen and (max-width: 768px) {
  .p-secIntern1_img {
    margin-top: calc(30 / 375 * 100vw);
    aspect-ratio: 3 / 2;
  }
}

/* ３つのポイント */
/* 見出しの上の余白を、本文の上の余白（セクションのpadding-top + 本文のmargin-top）と
   同じ量にそろえている。片方だけ数値を変えたら、もう片方も直すこと */
.p-secIntern1_ttl2 {
  margin-top: calc(50px + min(90px, 5.625vw));
}
.p-internPoints {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.p-internPoints_item {
  position: relative;
  /* POINT番号は3枚とも同じ高さに固定し、見出しは残りのスペースの中央に置く */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 82px 20px 36px;
  background: #f8f8f8;
  border-radius: 12px;
  text-align: center;
}
.p-internPoints_item ._num {
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #b5b2b1;
}
.p-internPoints_item ._num ._en {
  font-size: 1.4rem;
  letter-spacing: 0.12em;
}
.p-internPoints_item h3 ._em {
  color: #f00;
}
.p-internPoints_item h3 {
  margin-top: 0;
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #000;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-internPoints {
    gap: 20px;
  }
  .p-internPoints_item {
    padding: 70px 12px 30px;
  }
  .p-internPoints_item ._num {
    top: 28px;
  }
  .p-internPoints_item ._num {
    font-size: 2.8rem;
  }
  .p-internPoints_item h3 {
    font-size: 1.65rem;
  }
}
@media screen and (max-width: 768px) {
  .p-secIntern1_ttl2 {
    /* SPも同様（セクション 10.667vw ＋ 本文 6.667vw） */
    margin-top: calc(65 / 375 * 100vw);
  }
  .p-internPoints {
    display: block;
  }
  .p-internPoints_item {
    padding: calc(50 / 375 * 100vw) calc(16 / 375 * 100vw) calc(20 / 375 * 100vw);
    border-radius: calc(8 / 375 * 100vw);
  }
  .p-internPoints_item + .p-internPoints_item {
    margin-top: calc(12 / 375 * 100vw);
  }
  .p-internPoints_item ._num {
    top: calc(18 / 375 * 100vw);
    gap: calc(6 / 375 * 100vw);
    font-size: calc(24 / 375 * 100vw);
  }
  .p-internPoints_item ._num ._en {
    font-size: calc(11 / 375 * 100vw);
  }
  .p-internPoints_item h3 {
    font-size: calc(16 / 375 * 100vw);
  }
}

/* -----------------------------------
 * 02 コース一覧
 * --------------------------------- */
.p-secIntern2 {
  background: #fff;
}
.p-secIntern2_note {
  margin-top: 12px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-secIntern2_note {
    margin-top: calc(8 / 375 * 100vw);
    text-align: left;
  }
}

/* コース一覧（職種のくくりはやめ、4コースを2列で並べる） */
.p-courseList {
  display: grid;
  /* 1枚あたりの幅は帯レイアウトだった頃と同じ545pxまで。
     広げるとカードが間延びするので、余った分は左右の余白に回す */
  grid-template-columns: repeat(2, minmax(0, 545px));
  justify-content: center;
  gap: 50px 44px;
  margin-top: 60px;
}
/* 日程の行数が違っても「コースの詳細をみる」の位置を揃える */
.p-courseList_item {
  display: flex;
}
.p-courseList .p-courseCard {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.p-courseList .p-courseCard_in {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.p-courseList .p-courseCard_more {
  margin-top: auto;
  padding-top: 20px;
}
/* 縦並びのflexにしたぶん、幅いっぱいに伸びてほしくないものだけ戻す */
.p-courseList .p-courseCard_target {
  align-self: flex-start;
}
/* 日程の会場名は途中で折り返さず、入らなければ行ごと送る */
.p-courseList .p-courseCard_spec ._place {
  display: inline-block;
}
/* 「日程」の行が1行に収まるよう、見出し側の幅を詰める */
.p-courseList .p-courseCard_spec dt {
  flex-basis: 100px;
}
.p-courseList_note {
  margin-top: 30px;
  text-align: center;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-courseList {
    gap: 40px 30px;
  }
}
@media screen and (max-width: 768px) {
  .p-courseList {
    display: block;
    margin-top: calc(28 / 375 * 100vw);
  }
  .p-courseList_item + .p-courseList_item {
    margin-top: calc(24 / 375 * 100vw);
  }
  .p-courseList_note {
    margin-top: calc(15 / 375 * 100vw);
    text-align: left;
  }
}


/* コースカード */
.p-courseCard {
  display: block;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: #3e3a39;
  transition: 0.4s ease-in-out;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
}
/* カード上部の写真帯。番号は写真の上に白で置く */
.p-courseCard_ph {
  position: relative;
  /* 横幅は写真の全幅を使い切っているので、引いた画角にするには帯を高くする */
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.p-courseCard_ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 立っている人物の顔が帯に入るよう、上寄せで切り出す */
.p-courseCard_ph.-c3 img {
  object-position: center 20%;
}
.p-courseCard_ph.-c4 img {
  object-position: center top;
}
/* 上は写真を活かし、番号が乗る下側だけ濃くして白文字を読めるようにする */
.p-courseCard_ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.62) 100%);
}
.p-courseCard_ph ._num {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 4.2rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
  opacity: 0.9;
}
/* 詳細側の「COURSE 01」と同じ表記に揃える */
.p-courseCard_ph ._num ._en {
  font-size: 1.6rem;
  letter-spacing: 0.12em;
}
.p-courseCard_in {
  padding: 26px 30px 30px;
}
@media screen and (min-width: 769px) {
  .p-courseCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px 0 rgba(0, 0, 0, 0.22);
  }
}
@media screen and (max-width: 768px) {
  .p-courseCard_ph ._num {
    right: calc(14 / 375 * 100vw);
    bottom: calc(4 / 375 * 100vw);
    gap: calc(6 / 375 * 100vw);
    font-size: calc(28 / 375 * 100vw);
  }
  .p-courseCard_ph ._num ._en {
    font-size: calc(11 / 375 * 100vw);
  }
  .p-courseCard_in {
    padding: calc(16 / 375 * 100vw) calc(18 / 375 * 100vw) calc(20 / 375 * 100vw);
  }
}

.p-courseCard_head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.p-courseCard_head ._badge {
  flex: 0 0 auto;
  padding: 7px 16px;
  background: #000;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
}
.p-courseCard_head h4 {
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-courseCard_head h4 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .p-courseCard_head {
    gap: calc(10 / 375 * 100vw);
  }
  .p-courseCard_head ._badge {
    padding: calc(4 / 375 * 100vw) calc(9 / 375 * 100vw);
    font-size: calc(11 / 375 * 100vw);
  }
  .p-courseCard_head h4 {
    font-size: calc(16 / 375 * 100vw);
  }
}

/* 応募条件は見落とされると困るので、ENTRYボタンと同じ赤で目立たせる */
.p-courseCard_target {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 14px;
  border: 1px solid #f00;
  color: #f00;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .p-courseCard_target {
    margin-top: calc(10 / 375 * 100vw);
    padding: calc(2 / 375 * 100vw) calc(9 / 375 * 100vw);
    font-size: calc(11 / 375 * 100vw);
  }
}

.p-courseCard_closed {
  margin-top: 16px;
  font-weight: 700;
  font-size: 1.5rem;
}
.p-courseCard_closed::before {
  content: "＊ ";
}

.p-courseCard_body {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-top: 20px;
}
.p-courseCard_body ._detail {
  flex: 1 1 0;
  min-width: 0;
  font-size: 1.5rem;
  line-height: 1.9;
}
.p-courseCard_body ._detail ._label {
  font-weight: 700;
}
/* 折り返した2行目を「・」の後ろに揃える */
.p-courseCard_body ._detail li {
  padding-left: 1em;
  text-indent: -1em;
}
.p-courseCard_body ._detail li::before {
  content: "・";
}
.p-courseCard_body ._detail ._note {
  margin-top: 10px;
  /* 折り返した2行目を「※」の後ろに揃える */
  padding-left: 1.5em;
  text-indent: -1.5em;
  font-size: 1.3rem;
  color: #6b6867;
}
.p-courseCard_body ._detail ._note::before {
  content: "※ ";
}
.p-courseCard_body ._photo {
  flex: 0 0 180px;
  aspect-ratio: 10 / 9;
  overflow: hidden;
}
.p-courseCard_body ._photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-courseCard_body ._photo {
    flex-basis: 140px;
  }
  .p-courseCard_body ._detail {
    font-size: 1.35rem;
  }
}
@media screen and (max-width: 768px) {
  /* SPは写真を本文の下に回して全幅で見せる */
  .p-courseCard_body {
    display: block;
    margin-top: calc(14 / 375 * 100vw);
  }
  .p-courseCard_body ._detail {
    font-size: calc(12 / 375 * 100vw);
  }
  .p-courseCard_body ._detail ._note {
    font-size: calc(10 / 375 * 100vw);
  }
  .p-courseCard_body ._photo {
    margin-top: calc(12 / 375 * 100vw);
    aspect-ratio: 16 / 9;
  }
}

.p-courseCard_spec {
  margin-top: 20px;
}
.p-courseCard_spec dl {
  display: flex;
  font-size: 1.5rem;
  line-height: 1.8;
}
.p-courseCard_spec dl + dl {
  margin-top: 12px;
}
/* 締め切りも同じ赤で強調する */
.p-courseCard_spec dl.-deadline dd {
  font-weight: 700;
  color: #f00;
}
.p-courseCard_spec dt {
  flex: 0 0 110px;
  font-size: 1.35rem;
  color: #6b6867;
  white-space: nowrap;
}
.p-courseCard_spec dt::after {
  content: "：";
}
.p-courseCard_spec dd {
  flex: 1 1 0;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .p-courseCard_spec {
    margin-top: calc(14 / 375 * 100vw);
    padding-top: calc(12 / 375 * 100vw);
  }
  .p-courseCard_spec dl {
    font-size: calc(11 / 375 * 100vw);
  }
  .p-courseCard_spec dt {
    flex-basis: calc(78 / 375 * 100vw);
    font-size: calc(10 / 375 * 100vw);
  }
}

.p-courseCard_more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 20px;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
}
.p-courseCard_more::after {
  content: "";
  display: block;
  width: 28px;
  height: 13px;
  background: url(../img/common/ico_arrow_btn.svg) no-repeat center / contain;
  transition: 0.4s ease-in-out;
}
@media screen and (min-width: 769px) {
  .p-courseCard:hover .p-courseCard_more::after {
    transform: translateX(8px);
  }
}
@media screen and (max-width: 768px) {
  .p-courseCard_more {
    margin-top: calc(14 / 375 * 100vw);
    font-size: calc(11 / 375 * 100vw);
  }
  .p-courseCard_more::after {
    width: calc(22 / 375 * 100vw);
    height: calc(10 / 375 * 100vw);
  }
}

/* -----------------------------------
 * 03 コースの詳細
 * --------------------------------- */
.p-secIntern3 {
  background: #fff;
}
.p-secIntern3_list {
  margin-top: 90px;
}
@media screen and (max-width: 768px) {
  .p-secIntern3_list {
    margin-top: calc(35 / 375 * 100vw);
  }
}

/* コースごとの色。ロゴ（ティール・オレンジ・ピンク）の色相をもとに、
   白抜き文字が読める濃さに落としたもの。すべて白文字とのコントラスト比 4.5:1 以上。
   ロゴの値そのままだと 2.8〜3.5:1 で、COURSE番号（16px）には足りない。
   03 のグリーンだけサイトに元の色が無く、他3色と並ぶ濃さで新しく決めている。
   文字色ではなく、COURSE番号とコース名の地色、ポイントの先頭の丸に使う */
.p-courseDetail.-c1 {
  --course: #1d6ea8;
}
.p-courseDetail.-c2 {
  --course: #b85400;
}
.p-courseDetail.-c3 {
  --course: #2f7a4f;
}
.p-courseDetail.-c4 {
  --course: #c33a6b;
}

.p-courseDetail + .p-courseDetail {
  margin-top: 120px;
  padding-top: 120px;
  border-top: 1px solid #ddd;
}
@media screen and (max-width: 768px) {
  .p-courseDetail + .p-courseDetail {
    margin-top: calc(45 / 375 * 100vw);
    padding-top: calc(45 / 375 * 100vw);
  }
}

/* 左に本文、右に写真の2カラム。
   写真の上端を「見出しの下の説明」の行にそろえたいので、grid で行を指定している。
   _main を display: contents で透過させると、その中身と写真が同じ grid に並ぶ。
   説明は _main の4番目の子（_num / h3 / _catch の次）なので grid-row: 4。
   **_main の子の順番を変えたら、この 4 も直すこと。** */
@media screen and (min-width: 769px) {
  .p-courseDetail_top {
    display: grid;
    grid-template-columns: 1fr 480px;
    column-gap: 56px;
    align-items: start;
  }
  .p-courseDetail_main {
    display: contents;
  }
  .p-courseDetail_main > * {
    grid-column: 1;
  }
  .p-courseDetail_side {
    grid-column: 2;
    grid-row: 4 / span 10;
    /* 説明（._about）の margin-top と同じだけ下げて、写真の上端を本文の1行目にそろえる */
    margin-top: 20px;
  }
  /* 偶数番のコースは左右を入れ替える */
  .p-courseDetail:nth-of-type(even) .p-courseDetail_top {
    grid-template-columns: 480px 1fr;
  }
  .p-courseDetail:nth-of-type(even) .p-courseDetail_main > * {
    grid-column: 2;
  }
  .p-courseDetail:nth-of-type(even) .p-courseDetail_side {
    grid-column: 1;
  }
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-courseDetail_top {
    grid-template-columns: 1fr 360px;
    column-gap: 34px;
  }
  .p-courseDetail:nth-of-type(even) .p-courseDetail_top {
    grid-template-columns: 360px 1fr;
  }
}
@media screen and (max-width: 768px) {
  .p-courseDetail_top {
    display: block;
  }
}

.p-courseDetail_main {
  min-width: 0;
}
.p-courseDetail_main ._num {
  display: inline-block;
  /* grid の子だと inline-block が block 化して横いっぱいに伸びるため */
  justify-self: start;
  width: -moz-fit-content;
  width: fit-content;
  padding: 7px 14px;
  background: var(--course, #000);
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
}
/* コース名もコースの色で塗る。COURSE番号と同じく grid の子なので幅を文字幅に留める */
.p-courseDetail_main h3 {
  display: inline-block;
  justify-self: start;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 8px;
  padding: 10px 18px;
  background: var(--course, #000);
  font-weight: 700;
  font-size: 3.8rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: #fff;
}
.p-courseDetail_main ._catch {
  margin-top: 18px;
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: #000;
  /* body の "palt" だと「、」「。」が詰まりすぎるので、この行だけ等幅に戻す */
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-courseDetail_main h3 {
    font-size: 3rem;
  }
  .p-courseDetail_main ._catch {
    font-size: 1.9rem;
  }
}
@media screen and (max-width: 768px) {
  /* SPは親が grid ではなくなるので、inline-block のままだと
     COURSE番号とコース名が横に並んでしまう。行を分ける */
  .p-courseDetail_main ._num,
  .p-courseDetail_main h3 {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
  }
  .p-courseDetail_main ._num {
    padding: calc(5 / 375 * 100vw) calc(10 / 375 * 100vw);
    font-size: calc(12 / 375 * 100vw);
  }
  .p-courseDetail_main h3 {
    margin-top: calc(5 / 375 * 100vw);
    padding: calc(6 / 375 * 100vw) calc(11 / 375 * 100vw);
    font-size: calc(21 / 375 * 100vw);
  }
  .p-courseDetail_main ._catch {
    margin-top: calc(10 / 375 * 100vw);
    font-size: calc(14 / 375 * 100vw);
  }
}

/* 関わる職種 */
/* 見出しの下の「そもそもどんな分野か」の説明。この下に関わる職種が続く */
.p-courseDetail_about {
  margin-top: 20px;
  font-size: 1.7rem;
  line-height: 2;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-courseDetail_about {
    font-size: 1.55rem;
  }
}
@media screen and (max-width: 768px) {
  .p-courseDetail_about {
    margin-top: calc(12 / 375 * 100vw);
    font-size: calc(12 / 375 * 100vw);
    line-height: 1.9;
  }
}

.p-courseDetail_tagsTtl {
  margin-top: 24px;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: #6b6867;
}
.p-courseDetail_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.p-courseDetail_tags li {
  padding: 8px 18px;
  background: #f0efef;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
  .p-courseDetail_tagsTtl {
    margin-top: calc(14 / 375 * 100vw);
    font-size: calc(11 / 375 * 100vw);
  }
  .p-courseDetail_tags {
    gap: calc(5 / 375 * 100vw);
    margin-top: calc(6 / 375 * 100vw);
  }
  .p-courseDetail_tags li {
    padding: calc(4 / 375 * 100vw) calc(10 / 375 * 100vw);
    font-size: calc(10 / 375 * 100vw);
  }
}

/* ポイント。項目名の頭にコース色のドットを置く */
.p-courseDetail_points {
  position: relative;
  margin-top: 44px;
  padding-left: 34px;
}
.p-courseDetail_points.-noNum {
  padding-left: 0;
}
.p-courseDetail_points > li {
  position: relative;
}
.p-courseDetail_points > li + li {
  margin-top: 32px;
}
.p-courseDetail_points:not(.-noNum) > li::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--course, #000);
}
.p-courseDetail_points h4 {
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: #000;
}
.p-courseDetail_points p {
  margin-top: 8px;
  font-size: 1.7rem;
  line-height: 2;
}
.p-courseDetail_points ._note {
  display: block;
  font-size: 1.3rem;
  color: #6b6867;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-courseDetail_points h4 {
    font-size: 1.9rem;
  }
  .p-courseDetail_points p {
    font-size: 1.55rem;
  }
}
@media screen and (max-width: 768px) {
  .p-courseDetail_points {
    margin-top: calc(22 / 375 * 100vw);
    padding-left: calc(18 / 375 * 100vw);
  }
  .p-courseDetail_points > li + li {
    margin-top: calc(20 / 375 * 100vw);
  }
  .p-courseDetail_points:not(.-noNum) > li::before {
    left: calc(-18 / 375 * 100vw);
    top: calc(7 / 375 * 100vw);
    width: calc(8 / 375 * 100vw);
    height: calc(8 / 375 * 100vw);
  }
  .p-courseDetail_points h4 {
    font-size: calc(14 / 375 * 100vw);
  }
  .p-courseDetail_points p {
    margin-top: calc(4 / 375 * 100vw);
    font-size: calc(12 / 375 * 100vw);
  }
  .p-courseDetail_points ._note {
    font-size: calc(10 / 375 * 100vw);
  }
}

/* 右（偶数は左）の写真カラム */
@media screen and (max-width: 768px) {
  .p-courseDetail_side {
    margin-top: calc(22 / 375 * 100vw);
  }
}
.p-courseDetail_photo {
  aspect-ratio: 29 / 20;
  overflow: hidden;
}
.p-courseDetail_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 昨年の実施写真（後日差し替え） */
.p-courseDetail_last {
  margin-top: 24px;
}
.p-courseDetail_last ._label {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}
.p-courseDetail_last ._img {
  aspect-ratio: 29 / 16;
  overflow: hidden;
}
.p-courseDetail_last ._img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-courseDetail_last ._ph {
  aspect-ratio: 29 / 16;
  background: repeating-linear-gradient(-45deg, #f4f3f3 0 8px, #efeeee 8px 16px);
  border: 1px solid #e0dfdf;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: #a3a09f;
}
@media screen and (max-width: 768px) {
  .p-courseDetail_last {
    margin-top: calc(14 / 375 * 100vw);
  }
  .p-courseDetail_last ._label {
    font-size: calc(11 / 375 * 100vw);
  }
  .p-courseDetail_last ._ph {
    font-size: calc(11 / 375 * 100vw);
  }
}

/* 参加者の声 */
.p-voice {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin-top: 48px;
}
.p-voice_avatar {
  flex: 0 0 124px;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: #ebeaea;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-voice_avatar svg {
  width: 60px;
  height: 60px;
  fill: #9a9796;
}
.p-voice_body {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: #f4f3f3;
  padding: 26px 30px;
}
.p-voice_body::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 30px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 18px solid #f4f3f3;
}
.p-voice_body ._ttl {
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: 0.1em;
  color: #000;
}
.p-voice_body p {
  font-size: 1.5rem;
  line-height: 2.1;
}
@media screen and (max-width: 768px) {
  .p-voice {
    gap: calc(12 / 375 * 100vw);
    margin-top: calc(24 / 375 * 100vw);
  }
  .p-voice_avatar {
    flex-basis: calc(66 / 375 * 100vw);
    width: calc(66 / 375 * 100vw);
    height: calc(66 / 375 * 100vw);
  }
  .p-voice_avatar svg {
    width: calc(32 / 375 * 100vw);
    height: calc(32 / 375 * 100vw);
  }
  .p-voice_body {
    padding: calc(15 / 375 * 100vw) calc(16 / 375 * 100vw);
  }
  .p-voice_body::before {
    left: calc(-10 / 375 * 100vw);
    top: calc(18 / 375 * 100vw);
    border-top-width: calc(6 / 375 * 100vw);
    border-bottom-width: calc(6 / 375 * 100vw);
    border-right-width: calc(10 / 375 * 100vw);
  }
  .p-voice_body ._ttl {
    font-size: calc(13.5 / 375 * 100vw);
  }
  .p-voice_body p {
    font-size: calc(12 / 375 * 100vw);
  }
}

/* -----------------------------------
 * 04 よくある質問
 * --------------------------------- */
.p-secIntern4 {
  background: #f8f8f8;
}
.p-secIntern4_list {
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .p-secIntern4_list {
    margin-top: calc(25 / 375 * 100vw);
  }
}
.p-faq {
  display: flex;
  gap: 26px;
  padding: 34px 44px;
  background: #fff;
}
.p-faq + .p-faq {
  margin-top: 16px;
}
.p-faq_q {
  flex: 0 0 auto;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1.5;
  color: #b5b2b1;
}
.p-faq_a h3 {
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #000;
}
.p-faq_a p {
  margin-top: 12px;
  font-size: 1.5rem;
  line-height: 2;
}
.p-faq_a ._note {
  font-size: 1.3rem;
  color: #6b6867;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-faq_a h3 {
    font-size: 1.7rem;
  }
}
@media screen and (max-width: 768px) {
  .p-faq {
    gap: calc(12 / 375 * 100vw);
    padding: calc(18 / 375 * 100vw) calc(16 / 375 * 100vw);
  }
  .p-faq + .p-faq {
    margin-top: calc(10 / 375 * 100vw);
  }
  .p-faq_q {
    font-size: calc(17 / 375 * 100vw);
  }
  .p-faq_a h3 {
    font-size: calc(14 / 375 * 100vw);
  }
  .p-faq_a p {
    margin-top: calc(8 / 375 * 100vw);
    font-size: calc(12 / 375 * 100vw);
  }
  .p-faq_a ._note {
    font-size: calc(10 / 375 * 100vw);
  }
}

/* -----------------------------------
 * 05 エントリー
 * --------------------------------- */
/* ===== 参加までの流れ =====
   よくある質問（#f8f8f8 の地に白カード）の反転で、白地にグレーのカード。
   カード上辺の黒罫と Oswald のグレー数字は職種一覧のカテゴリ枠と同じ語彙 */
.p-secIntern5 {
  background: #fff;
}
.p-internFlow {
  display: flex;
  margin-top: 60px;
}
.p-internFlow_item {
  position: relative;
  flex: 1 1 0;
  /* 枠の高さは揃うので、中身は縦横とも中央に置く */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* STEPラベルは全枠で同じ高さに来るよう上端に固定し、残りを中央に置く */
  padding: 74px 24px 34px;
  background: #f8f8f8;
  border-radius: 16px;
  text-align: center;
}
.p-internFlow_item + .p-internFlow_item {
  margin-left: 48px;
}
/* ステップ間の矢印。カード同士の余白の中央に置く */
.p-internFlow_item + .p-internFlow_item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -32px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-top: 4px solid #000;
  border-right: 4px solid #000;
  transform: rotate(45deg);
}
.p-internFlow_item ._step {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #b5b2b1;
}
.p-internFlow_item ._step span {
  font-size: 2.6rem;
  letter-spacing: 0.04em;
}
.p-internFlow_item h3 {
  margin-top: 0;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #000;
}
.p-internFlow_item ._txt {
  margin-top: 12px;
  font-size: 1.5rem;
  line-height: 2;
}
.p-internFlow_item ._deadline {
  font-weight: 700;
  color: #f00;
}
.p-internFlow_item ._note {
  margin-top: 6px;
  font-size: 1.3rem;
  line-height: 1.7;
  color: #6b6867;
}
/* ヘッダーのENTRYボタンと同じ見た目・同じホバーに揃え、枠に対して中央に置く */
.p-internFlow_item ._btn {
  width: 100%;
  margin-top: 18px;
}
.p-internFlow_item ._btn a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 230px;
  height: 46px;
  margin: 0 auto;
  background-color: #fff;
  background-image: url(../img/common/ico_arrow_btn.svg);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px auto;
  color: #f00;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  transition: 0.4s ease-in-out;
}
.p-internFlow_item ._btn a::before {
  content: "";
  display: block;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-left: 1px solid #f00;
  border-top: 1px solid #f00;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  transition: 0.4s ease-in-out;
}
.p-internFlow_item ._btn a::after {
  content: "";
  display: block;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-right: 1px solid #1f50ff;
  border-bottom: 1px solid #1f50ff;
  position: absolute;
  z-index: 1;
  bottom: 2px;
  right: 2px;
  transition: 0.4s ease-in-out;
}
@media (hover: hover) {
  .p-internFlow_item ._btn a:hover {
    background-color: #f00;
    background-image: url(../img/common/ico_arrow_btn_wh.svg);
    color: #fff;
  }
  .p-internFlow_item ._btn a:hover::before {
    border-left-color: #fff;
    border-top-color: #fff;
  }
  .p-internFlow_item ._btn a:hover::after {
    border-right-color: #fff;
    border-bottom-color: #fff;
  }
}
.p-internFlow_item ._btn a:active {
  background-color: #f00;
  background-image: url(../img/common/ico_arrow_btn_wh.svg);
  color: #fff;
}
.p-internFlow_item ._btn a:active::before {
  border-left-color: #fff;
  border-top-color: #fff;
}
.p-internFlow_item ._btn a:active::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-internFlow_item {
    padding: 62px 16px 28px;
  }
  .p-internFlow_item ._step {
    top: 24px;
  }
  .p-internFlow_item + .p-internFlow_item {
    margin-left: 36px;
  }
  .p-internFlow_item + .p-internFlow_item::before {
    left: -26px;
    width: 15px;
    height: 15px;
    margin-top: -7px;
    border-top-width: 3px;
    border-right-width: 3px;
  }
  .p-internFlow_item h3 {
    font-size: 1.7rem;
  }
  .p-internFlow_item ._txt {
    font-size: 1.4rem;
  }
  .p-internFlow_item ._btn a {
    height: 42px;
    font-size: 1.2rem;
  }
}
/* SPは縦積み。矢印も下向きに回す */
@media screen and (max-width: 768px) {
  .p-internFlow {
    display: block;
    margin-top: calc(25 / 375 * 100vw);
  }
  .p-internFlow_item {
    padding: calc(46 / 375 * 100vw) calc(16 / 375 * 100vw) calc(20 / 375 * 100vw);
    border-radius: calc(10 / 375 * 100vw);
  }
  .p-internFlow_item + .p-internFlow_item {
    margin-left: 0;
    margin-top: calc(36 / 375 * 100vw);
  }
  .p-internFlow_item + .p-internFlow_item::before {
    top: calc(-26 / 375 * 100vw);
    left: 50%;
    width: calc(14 / 375 * 100vw);
    height: calc(14 / 375 * 100vw);
    margin-top: 0;
    margin-left: calc(-8 / 375 * 100vw);
    border-top-width: 3px;
    border-right-width: 3px;
    transform: rotate(135deg);
  }
  .p-internFlow_item ._step {
    top: calc(18 / 375 * 100vw);
    gap: calc(5 / 375 * 100vw);
    font-size: calc(11 / 375 * 100vw);
    justify-content: center;
  }
  .p-internFlow_item ._step span {
    font-size: calc(19 / 375 * 100vw);
  }
  .p-internFlow_item h3 {
    font-size: calc(15 / 375 * 100vw);
  }
  .p-internFlow_item ._txt {
    margin-top: calc(8 / 375 * 100vw);
    font-size: calc(12 / 375 * 100vw);
  }
  .p-internFlow_item ._note {
    margin-top: calc(5 / 375 * 100vw);
    font-size: calc(10 / 375 * 100vw);
  }
  .p-internFlow_item ._btn {
    margin-top: calc(13 / 375 * 100vw);
  }
  .p-internFlow_item ._btn a {
    max-width: calc(220 / 375 * 100vw);
    height: calc(44 / 375 * 100vw);
    font-size: calc(13 / 375 * 100vw);
  }
}

.p-secIntern6 {
  position: relative;
  z-index: 0;
  background: #000;
  text-align: center;
  padding-top: min(120px, 7.5%);
  padding-bottom: min(120px, 7.5%);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .p-secIntern6 {
    padding: calc(50 / 375 * 100vw) calc(20 / 375 * 100vw);
  }
}
.p-secIntern6_lead {
  color: #fff;
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: 0.1em;
  line-height: 1.9;
}
@media screen and (max-width: 768px) {
  .p-secIntern6_lead {
    font-size: calc(14 / 375 * 100vw);
  }
}
.p-secIntern6_btn {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}
.p-secIntern6_btn a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 460px;
  height: 96px;
  background-color: #fff;
  background-image: url(../img/common/ico_arrow_btn.svg);
  background-repeat: no-repeat;
  background-position: right 26px center;
  background-size: 28px auto;
  color: #f00;
  text-decoration: none;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 0.14em;
  transition: 0.4s ease-in-out;
}
.p-secIntern6_btn a::before {
  content: "";
  display: block;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-left: 1px solid #f00;
  border-top: 1px solid #f00;
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 4px;
}
.p-secIntern6_btn a::after {
  content: "";
  display: block;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-right: 1px solid #1f50ff;
  border-bottom: 1px solid #1f50ff;
  position: absolute;
  z-index: 1;
  bottom: 4px;
  right: 4px;
}
@media (hover: hover) {
  .p-secIntern6_btn a:hover {
    background-color: #f00;
    background-image: url(../img/common/ico_arrow_btn_wh.svg);
    color: #fff;
  }
  .p-secIntern6_btn a:hover::before {
    border-left-color: #fff;
    border-top-color: #fff;
  }
  .p-secIntern6_btn a:hover::after {
    border-right-color: #fff;
    border-bottom-color: #fff;
  }
}
/* スマホはホバーがないので、タップ中の反転で手応えを返す */
.p-secIntern6_btn a:active {
  background-color: #f00;
  background-image: url(../img/common/ico_arrow_btn_wh.svg);
  color: #fff;
}
.p-secIntern6_btn a:active::before {
  border-left-color: #fff;
  border-top-color: #fff;
}
.p-secIntern6_btn a:active::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .p-secIntern6_btn {
    gap: 20px;
  }
  .p-secIntern6_btn a {
    width: 360px;
    height: 84px;
    font-size: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .p-secIntern6_btn {
    display: block;
    margin-top: calc(20 / 375 * 100vw);
  }
  .p-secIntern6_btn a {
    width: 100%;
    height: calc(60 / 375 * 100vw);
    font-size: calc(16 / 375 * 100vw);
    background-position: right calc(16 / 375 * 100vw) center;
    background-size: calc(22 / 375 * 100vw) auto;
  }
  .p-secIntern6_btn a.-intern {
    margin-bottom: calc(12 / 375 * 100vw);
  }
}
.p-secIntern6_note {
  margin-top: 24px;
  color: #b5b2b1;
}
.p-secIntern6_note.p-internNote {
  color: #b5b2b1;
}
@media screen and (max-width: 768px) {
  .p-secIntern6_note {
    margin-top: calc(14 / 375 * 100vw);
    text-align: left;
  }
}