@charset "UTF-8";
/* TOPページ（index.html）のレイアウト
 * インターンシップ2026（internship/2026/）のLPに寄せる（分身ナビはメディアなので、作りや装飾は寄せない）
 *   全体は白地／セクション見出しは大きな黒の太字（装飾なし）／ミントはボタン・番号・リンクなど要所だけ
 *   角丸は小さめ（写真 6px、カード 8px、ボタン 5px）、影なし
 * 中身は .tm の中だけ。style.css の html{font-size:10px} の影響を受けないよう px で書く
 */

.tm {
  --tm-mint: #00C8AA;
  --tm-mint-bg: #F2FFFC;
  --tm-text: #4F4C4C;
  --tm-sub: #666;
  --tm-line: #D4D6D6;
  --tm-gray: #F6F7F7;
  color: var(--tm-text);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.9;
}
.tm img { max-width: 100%; height: auto; }
.tm p { margin: 0; }
.tm p + p { margin-top: 12px; }
.tm h1, .tm h2, .tm h3, .tm h4 { color: #111; font-weight: 600; line-height: 1.5; }

.tm-inner { max-width: 1228px; margin: 0 auto; padding: 0 24px; }
.tm-sec { padding: 112px 0; }
.tm-sec-gray { background: var(--tm-gray); }
.tm-center { margin-top: 48px; text-align: center; }

/* 見出し */
.tm-eyebrow { display: block; margin-bottom: 8px; color: var(--tm-mint); font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; line-height: 1.4; }
.tm-head { margin-bottom: 56px; }
.tm-head h2 { position: relative; padding-left: 20px; font-size: 32px; letter-spacing: .02em; }
.tm-head h2::before { content: ""; position: absolute; top: 6px; left: 0; width: 6px; height: calc(100% - 12px); background: var(--tm-mint); }
.tm-sub { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; font-size: 22px; }
.tm-sub::after { content: ""; flex: 1; height: 1px; background: var(--tm-line); }
.tm-cases + .tm-sub { margin-top: 64px; }

/* ボタン */
.tm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 260px; height: 56px; padding: 0 32px; border: 2px solid var(--tm-mint); border-radius: 5px; background: var(--tm-mint); color: #fff; font-size: 16px; font-weight: 700; transition: opacity .3s, background .3s; }
.tm-btn::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.tm-btn-line { background: #fff; color: var(--tm-mint); }
@media (hover: hover) {
  .tm-btn:hover { opacity: .8; }
  .tm-btn-line:hover { opacity: 1; background: var(--tm-mint-bg); }
}


/* PDバナー */
.tm-banner { max-width: 1228px; margin: 72px auto 0; padding: 0 24px; }
.tm-banner a { overflow: hidden; border-radius: 12px; }
@media only screen and (min-width: 805px) { .tm-banner a.pc-on { display: block; } }
.tm-banner img { width: 100%; }

/* 2. コンセプト：写真と文章を左右に */
.tm-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.tm-split + .tm-split { margin-top: 96px; }
.tm-split-rev .tm-split-img { order: 2; }
.tm-split-img { margin: 0; }
.tm-split-img img { display: block; margin: 0 auto; border-radius: 12px; }
.tm-split-img-glow img { max-width: 440px; border-radius: 0; }
.tm-split-body h3 { margin: 0 0 20px; font-size: 26px; }
.tm-lead { font-size: 18px; font-weight: 500; color: #111; }
.tm-quotes { margin: 24px 0; padding: 20px 24px; border-left: 3px solid var(--tm-mint); border-radius: 0 8px 8px 0; background: var(--tm-gray); list-style: none; }
.tm-quotes li { position: relative; padding-left: 1.2em; font-size: 15px; }
.tm-quotes li + li { margin-top: 6px; }
.tm-quotes li::before { content: "「"; position: absolute; left: -.2em; color: var(--tm-mint); font-weight: 700; }
.tm-quotes li::after { content: "」"; color: var(--tm-mint); font-weight: 700; }

/* コンセプトの下のカード2枚 */
.tm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 96px 0 0; padding: 0; list-style: none; }
.tm-card { display: flex; flex-direction: column; padding: 40px 40px 0; border-radius: 12px; background: var(--tm-gray); overflow: hidden; }
.tm-card h3 { margin: 0 0 16px; font-size: 20px; }
.tm-card p { font-size: 15px; }
.tm-card figure { order: 2; display: flex; align-items: flex-end; justify-content: center; flex: 1; margin: 32px 0 0; }
.tm-card figure img { display: block; max-height: 260px; width: auto; }
.tm-card:last-child figure { padding-bottom: 40px; }

/* 3. 特徴 */
.tm-feature { display: grid; grid-template-columns: 5fr 6fr; align-items: center; gap: 64px; }
.tm-feature figure { margin: 0; }
.tm-feature figure img { display: block; border-radius: 12px; }
.tm-points { margin: 0; padding: 0; list-style: none; }
.tm-points li { display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid var(--tm-line); }
.tm-points li:last-child { border-bottom: 1px solid var(--tm-line); }
.tm-no { flex: 0 0 auto; color: var(--tm-mint); font-family: 'Jost', sans-serif; font-size: 32px; font-weight: 400; line-height: 1.1; }
.tm-points h3 { margin: 2px 0 8px; font-size: 20px; }
.tm-points p { font-size: 15px; }

/* 4. 活用例：写真カードを並べる */
.tm-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 32px; margin: 0; padding: 0; list-style: none; }
.tm-cases figure { overflow: hidden; margin: 0 0 20px; border-radius: 12px; aspect-ratio: 16 / 10; }
.tm-cases figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-case-no { color: var(--tm-mint); font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.tm-cases h4 { margin: 2px 0 8px; font-size: 20px; }
.tm-cases li > p:last-child { font-size: 15px; }

/* 5. 導入事例 */
.tm-voice { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; padding: 48px; border-radius: 12px; background: #fff; }
.tm-voice figure { margin: 0; }
.tm-voice figure img { display: block; border-radius: 12px; }
.tm-voice h3 { margin: 0 0 16px; font-size: 20px; }
.tm-voice p { font-size: 15px; }
.tm-voice .tm-btn { margin-top: 32px; }


/* スマホ */
@media only screen and (max-width: 804px) {
  .tm { font-size: 15px; }
  .tm-inner { padding: 0 16px; }
  .tm-sec { padding: 72px 0; }
  .tm-head { margin-bottom: 36px; }
  .tm-head h2 { padding-left: 16px; font-size: 24px; }
  .tm-head h2::before { width: 5px; top: 4px; height: calc(100% - 8px); }
  .tm-sub { font-size: 18px; }
  .tm-cases + .tm-sub { margin-top: 48px; }
  .tm-btn { width: 100%; min-width: 0; }

  .tm-banner { padding: 0 16px; }
  .tm-banner a.sp-on { display: block; }

  .tm-split, .tm-feature, .tm-voice { grid-template-columns: 1fr; gap: 28px; }
  .tm-split + .tm-split { margin-top: 64px; }
  .tm-split-rev .tm-split-img { order: 0; }
  .tm-split-img-glow img { max-width: 280px; }
  .tm-split-body h3 { font-size: 21px; }
  .tm-lead { font-size: 16px; }
  .tm-quotes { padding: 16px; }

  .tm-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 64px; }
  .tm-card { padding: 28px 20px 0; }
  .tm-card h3 { font-size: 18px; }
  .tm-card figure img { max-height: 200px; }
  .tm-card:last-child figure { padding-bottom: 28px; }

  .tm-points h3, .tm-cases h4, .tm-voice h3 { font-size: 18px; }
  .tm-no { font-size: 26px; }
  .tm-cases { grid-template-columns: 1fr; gap: 36px; }
  .tm-voice { padding: 20px 20px 28px; }

}

/* ---- インターンシップLP寄せ（上の指定を上書き） ---- */
.tm-sec { padding: 140px 0 0; }

.tm-sec-gray { background: none; }
.tm-head .tm-eyebrow, .tm-hero-body .tm-eyebrow { display: none; }
.tm-head { margin-bottom: 64px; }
.tm-head h2 { padding-left: 0; color: #000; font-size: 56px; font-weight: 700; letter-spacing: 0; }
.tm-head h2::before { content: none; }
.tm-sub { margin-bottom: 28px; font-size: 30px; font-weight: 700; }
.tm-sub::after { content: none; }
.tm-banner a, .tm-split-img img, .tm-feature figure img, .tm-cases figure, .tm-voice figure img { border-radius: 6px; }
.tm-card { border-radius: 8px; }
.tm-split-body h3 { font-size: 30px; font-weight: 700; }
/* 「職場に置いて…」はインターンシップLPと同じチェックのアイコンで */
.tm-quotes { padding: 0; border: 0; border-radius: 0; background: none; }
.tm-quotes li { padding-left: 30px; font-size: 16px; font-weight: 500; color: #111; }
.tm-quotes li + li { margin-top: 10px; }
.tm-quotes li::before { content: ""; top: .3em; left: 0; width: 22px; height: 22px; background: url(../../internship/2026/img/check-icon.svg) no-repeat center / contain; }
.tm-quotes li::after { content: none; }
.tm-voice { padding: 0; background: none; }
@media only screen and (max-width: 804px) {
  .tm-sec { padding-top: 88px; }

  .tm-head { margin-bottom: 36px; }
  .tm-head h2 { font-size: 32px; }
  .tm-sub { font-size: 22px; }
  .tm-split-body h3 { font-size: 22px; }
  .tm-voice { padding: 0; }
}

/* ---- ファーストビュー：横いっぱいの動画＋上にキャッチコピーと丸い問い合わせボタン ---- */
.tm { overflow-x: clip; }
.tm-hero { position: relative; max-width: none; padding: 0; }
/* 動画の外側の白黒の枠（PC：幅1080に対して28px）をはみ出させて切り落とす */
.tm-hero-media { position: relative; overflow: hidden; aspect-ratio: 1024 / 552; background: #000; }
.tm-hero-media video { position: absolute; top: -5.07%; left: -2.73%; width: 105.47%; height: auto; }
/* 今のTOPと同じく、1行目と2行目の白い帯のあいだに余白をあける */
.tm-hero-copy { position: absolute; left: 64px; bottom: 64px; z-index: 2; margin: 0; font-size: 40px; font-weight: 700; }
.tm-hero-copy span { display: inline-block; padding: 4px 12px 8px; background: #fff; color: #000; line-height: 1.2; }
.tm-hero-copy span:first-child { margin-bottom: 14px; }
.tm-hero-cta { position: absolute; right: 64px; bottom: 56px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 176px; height: 176px; border-radius: 50%; background: var(--tm-mint); color: #fff; font-size: 20px; font-weight: 700; line-height: 1.4; text-align: center; transition: opacity .3s; }
/* 矢印は「こちら」の横に */
.tm-hero-cta-arrow { display: inline-flex; align-items: center; gap: 8px; }
.tm-hero-cta-arrow::after { content: ""; width: 9px; height: 9px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }
@media (hover: hover) { .tm-hero-cta:hover { opacity: .85; } }

/* パイロット募集のバナーは今のTOPと同じくらいの大きさ */
.tm-banner { max-width: 908px; margin-top: 80px; }

/* ---- 写真を画面の端までつける ----
 * .tm-inner からはみ出して画面幅いっぱいの4列（余白｜540｜540｜余白）にし、写真は端から中央まで、文章は中央から内側に置く */
.tm-bleed { display: grid; grid-template-columns: 1fr minmax(0, 590px) minmax(0, 590px) 1fr; gap: 0; width: 100vw; margin-left: calc(50% - 50vw); padding: 0; background: none; border-radius: 0; }
.tm-bleed > figure { margin: 0; }
.tm-bleed > figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-bleed-l > figure { grid-column: 1 / 3; margin-right: 64px; }
.tm-bleed-l > :not(figure) { grid-column: 3 / 4; padding-right: max(0px, 24px - max(0px, 50vw - 590px)); }
.tm-bleed-l > figure img { border-radius: 0 6px 6px 0; }
.tm-bleed-r > figure { grid-column: 3 / 5; grid-row: 1; margin-left: 64px; order: 0; }
.tm-bleed-r > :not(figure) { grid-column: 2 / 3; grid-row: 1; padding-left: max(0px, 24px - max(0px, 50vw - 590px)); }
.tm-bleed-r > figure img { border-radius: 6px 0 0 6px; }
.tm-bleed { align-items: center; }
.tm-split.tm-bleed + .tm-cards, .tm-split + .tm-split.tm-bleed { margin-top: 112px; }
.tm-feature.tm-bleed > figure img { max-height: 640px; }

/* 活用例の写真は少し大きく */
.tm-cases { gap: 56px 40px; }

/* ---- お問い合わせ（分身ナビと同じ：左にグレーの面と文章、右にOriHimeの写真） ---- */
.tm-contact { display: grid; grid-template-columns: 1fr 1fr; margin-top: 140px; background: #F6F7F7; }
.tm-contact-body { display: flex; flex-direction: column; justify-content: center; min-height: 360px; padding: 55px 24px 55px max(24px, calc(50vw - 590px)); }
.tm-contact-body h2 { margin: 0 0 38px; color: var(--tm-text); font-size: 30px; font-weight: 500; line-height: 1.5; }
.tm-jost { font-family: 'Jost', sans-serif; font-weight: 400; }
.tm-contact-body p { margin: 0 0 24px; font-size: 16px; line-height: 1.9; letter-spacing: .05em; }
.tm-contact-btn { align-self: flex-start; width: 100%; max-width: 460px; height: 72px; font-size: 18px; }
.tm-contact-btn::after { content: none; }
.tm-contact-img { overflow: hidden; margin: 0; }
.tm-contact-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media only screen and (max-width: 804px) {
  /* スマホの動画の枠：幅343に対して16px */
  .tm-hero-media { aspect-ratio: 311 / 578; }
  .tm-hero-media video { top: -2.77%; left: -5.14%; width: 110.29%; }
  /* 動画は画面の高さに収め、キャッチコピーはPCと同じく動画の上に重ねる（ボタンは動画の下） */
  .tm-hero-media { aspect-ratio: auto; height: min(calc(100vw * 578 / 311), calc(100svh - 160px)); }
  .tm-hero-media video { top: calc(100vw * -578 / 311 * .0277); } /* 高さを詰めても枠の切り落としは幅基準のまま */
  .tm-hero-copy { left: 16px; right: 16px; bottom: 100px; font-size: 22px; } /* 下のボタン（高さ60＋余白20）の分だけ上げて、動画の下端から20px */
  .tm-hero-copy span { padding: 3px 10px 5px; }
  .tm-hero-copy span:first-child { margin-bottom: 8px; }
  .tm-hero-cta { position: static; width: auto; height: 60px; margin: 20px 16px 0; border-radius: 999px; font-size: 16px; }
  .tm-banner { margin-top: 48px; }

  .tm-bleed { display: block; width: auto; margin-left: 0; }
  .tm-bleed > figure { margin: 0 0 28px; }
  .tm-bleed-l > figure { margin-left: -16px; }
  .tm-bleed-r > figure { margin-right: -16px; }
  .tm-bleed > :not(figure) { padding: 0; }
  .tm-split.tm-bleed + .tm-cards, .tm-split + .tm-split.tm-bleed { margin-top: 64px; }
  .tm-cases { gap: 36px; }

  .tm-contact { display: block; margin-top: 88px; }
  .tm-contact-body { min-height: 0; padding: 45px 25px; }
  .tm-contact-body h2 { margin-bottom: 28px; font-size: 23px; }
  .tm-contact-body p { margin-bottom: 25px; font-size: 14px; }
  .tm-contact-btn { max-width: none; height: 60px; font-size: 16px; }
  .tm-contact-img { height: 300px; }
}

/* ---- コンセプト：写真（OriHime）を左端につけて大きく／太字は強調したいところだけ ---- */
.tm-lead { color: var(--tm-text); font-size: 18px; font-weight: 400; }
.tm-lead strong { color: #111; font-weight: 700; }
.tm-quotes li { color: var(--tm-text); font-weight: 400; }
.tm-split.tm-bleed > figure img { max-height: 680px; }
/* 心のモビリティの2枚組は形を切り抜いた画像なので、角丸をつけない */
.tm-split-rev.tm-bleed > figure img { border-radius: 0; object-fit: contain; height: auto; }

/* 見出しの色：セクションの大見出しだけ黒、それ以外の見出し（カード・事例・特徴など）と強調は文字色 #4F4C4C */
.tm h3, .tm h4, .tm .tm-sub, .tm-lead strong { color: #4F4C4C; }

/* 「OriHimeについてもっと知る」は特徴01〜03の下（右の列）に */
.tm-feature-body .tm-btn { margin-top: 40px; }
@media only screen and (max-width: 804px) { .tm-feature-body .tm-btn { margin-top: 32px; } }

/* セクションの上下の余白を広めに */
.tm-sec { padding-top: 200px; }
.tm-contact { margin-top: 200px; }
@media only screen and (max-width: 804px) {
  .tm-sec { padding-top: 120px; }
  .tm-contact { margin-top: 120px; }
}

/* 「この場に参加できない〜」は1文まるごと太字に */
.tm-lead { font-weight: 700; }

/* セクションの上下の余白をさらに広く */
.tm-sec { padding-top: 260px; }
.tm-contact { margin-top: 260px; }
@media only screen and (max-width: 804px) {
  .tm-sec { padding-top: 140px; }
  .tm-contact { margin-top: 140px; }
}

/* パイロット募集バナーのすぐ下（コンセプト）は余白を小さめに */
.tm-banner + .tm-sec { padding-top: 140px; }

/* 導入事例：見出しは写真の横（会社名の上）に置いて、余白を詰める */
.tm-voice .tm-head { margin-bottom: 40px; }
.tm-voice .tm-head h2 { font-size: 48px; }
@media only screen and (max-width: 804px) {
  .tm-banner + .tm-sec { padding-top: 88px; }
  /* スマホは 見出し → 写真 → 本文 の順に並べる */
  .tm-voice.tm-bleed { display: flex; flex-direction: column; align-items: stretch; }
  .tm-voice.tm-bleed > div { display: contents; }
  .tm-voice .tm-head { order: -1; margin-bottom: 28px; }
  .tm-voice .tm-head h2 { font-size: 28px; }
  .tm-voice h3 { text-align: left; }
  .tm-voice .tm-btn { align-self: stretch; }
}

/* 活用例の下の問い合わせ（一番下より控えめな横長の帯） */
.tm-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: 96px; padding: 36px 48px; border-radius: 8px; background: var(--tm-gray); }
.tm-cta-band p { margin: 0; color: var(--tm-text); font-size: 20px; font-weight: 700; line-height: 1.6; }
.tm-cta-band .tm-btn { flex: 0 0 auto; }
@media only screen and (max-width: 804px) {
  .tm-cta-band { flex-direction: column; align-items: stretch; margin-top: 64px; padding: 28px 20px; text-align: center; }
  .tm-cta-band p { font-size: 17px; }
}

/* 導入事例と一番下のお問い合わせのあいだは詰める */
.tm-contact { margin-top: 140px; }
@media only screen and (max-width: 804px) { .tm-contact { margin-top: 88px; } }

/* 「OriHimeは分身です」は写真の横（右の列の一番上）に置く */
.tm-split-concept .tm-head { margin-bottom: 32px; }
.tm-split-concept .tm-head h2 { font-size: 48px; }
@media only screen and (max-width: 804px) {
  /* スマホは 見出し → 写真 → 本文 の順 */
  .tm-split-concept { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .tm-split-concept > .tm-split-body { display: contents; }
  .tm-split-concept .tm-head { order: -1; margin-bottom: 28px; }
  .tm-split-concept .tm-head h2 { font-size: 32px; }
  .tm-split-concept > figure { margin-bottom: 28px; }
}

/* 「OriHimeは分身です」は「心のモビリティを目指して」と同じ大きさ・色に */
.tm-split-concept .tm-head { margin-bottom: 20px; }
.tm-split-concept .tm-head h2 { color: #4F4C4C; font-size: 30px; font-weight: 700; }
@media only screen and (max-width: 804px) {
  .tm-split-concept .tm-head h2 { font-size: 22px; }
}

/* コンセプトのカード「行きたい場所へ行けない…」：切り抜きのイラストではなく写真に。カードの幅いっぱい・角丸 6px */
.tm-card-photo { align-items: stretch !important; }
.tm-card .tm-card-photo img { width: 100%; max-height: none; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.tm-card:first-child { padding-bottom: 40px; }
@media only screen and (max-width: 804px) { .tm-card:first-child { padding-bottom: 28px; } }

/* Bunshin Naviでよく読まれている事例 */
.tm-popular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 64px 0 0; padding: 0; list-style: none; }
.tm-popular a { display: block; color: #4F4C4C; transition: opacity .3s; }
.tm-popular figure { overflow: hidden; aspect-ratio: 16 / 9; margin: 0 0 14px; border-radius: 6px; }
.tm-popular img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-popular p { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.5; } /* 上の事例（h3）と同じく団体名を見出しにする */
.tm-popular .tm-popular-desc { margin-top: 6px; font-size: 16px; font-weight: 400; line-height: 1.7; }
.tm-popular .tm-popular-tag { display: none; margin-top: 4px; color: #7A7878; font-size: 14px; font-weight: 400; line-height: 1.6; } /* スマホだけ、説明文の代わりに出す1行の要点 */
.tm-popular-more { margin-top: 40px; text-align: center; }
@media (hover: hover) { .tm-popular a:hover { opacity: .7; } }
@media only screen and (max-width: 804px) {
  .tm-popular { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .tm-popular a { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; }
  .tm-popular figure { margin: 0; aspect-ratio: 4 / 3; }
  .tm-popular .tm-popular-desc { display: none; } /* スマホは細い列で長い説明文が読みにくいので、団体名と1行の要点だけにする（くわしくは記事で） */
  .tm-popular .tm-popular-tag { display: block; }
  .tm-popular-more { margin-top: 32px; }
}