@charset "utf-8";
/* ==========================================================================
   setting.css
   リセット / 変数 / ベース設定 / 汎用ユーティリティ
   ※ SP・PCでファイルを分けない。ブレークポイントはこのファイル内で完結。
   ========================================================================== */

/* reset
   ========================================================================== */
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
*:focus {
outline: none;
}
*::after,
*::before {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
overflow-y: scroll;
position: relative;
-webkit-font-smoothing: antialiased;
text-align: center;
}
li {
list-style: none;
}
img {
vertical-align: bottom;
max-width: 100%;
}
table {
font-size: inherit;
font: 100%;
}
a,
a:active,
a:visited,
a[href^="tel:"] {
color: inherit;
text-decoration: inherit;
font-style: inherit;
font-weight: inherit;
}
/* normarize reset
   ========================================================================== */
h1,
button,
input,
optgroup,
select,
textarea {
margin: 0 auto;
}
/* container
   ========================================================================== */
#container {
width: 100%;
overflow: hidden;
opacity: 1;
transition: opacity 2.0s ease;
}
.loading #container {
opacity: 0;
}


/* --------------------------------------------------------------------------
   変数（スマホ基準）
   ※ スマホのデザイン幅 567px ／ PC のデザイン幅 1440px。
      1rem = デザイン上の 10px。数値はデザインの px ÷ 10 で指定している。
   ※ 文字サイズは --fz-* で管理。PC 用は下の @media 内で上書きする。
   -------------------------------------------------------------------------- */
:root {
	/* デザイン幅 */
	--design-sp: 567;
	--design-pc: 1440;

	/* color */
	--c-text:     #222222;
	--c-black:    #000000;
	--c-white:    #ffffff;
	--c-red:      #d9211d;
	--c-red-logo: #d8261b;   /* ロゴの赤 */
	--c-navy:     #243c89;   /* ラベル：シリーズ（○○篇） */
	--c-blue:     #1e89c4;   /* ラベル：種別（HERO / STORY / 横断） */
	--c-green:    #0e9e90;   /* ラベル：DISCOVER JSDF */
	--c-bg:       #ffffff;
	--c-bg-gray:  #f4f4f4;
	--c-bg-dark:  #333333;
	--c-bar:      #222222;
	--c-line:     #aaaaaa;
	--c-hairline: #999999;   /* 0.3px 相当の細い罫線 */
	--c-video:    #eeeeee;

	/* font */
	--f-jp:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--f-en:  "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--f-num: "Roboto", "Helvetica Neue", Arial, sans-serif;

	/* layout */
	--pad: 2.8rem;            /* 左右余白 */
	--radius-card: 2.4rem;    /* サムネイルの角丸 */
	--radius-short: 1.2rem;   /* ショート動画の角丸 */
	--radius-box: 1.4rem;     /* バナーの角丸 */
	--radius-btn: 1rem;       /* パンフレット／相談・応募ボタンの角丸 */

	/* z-index */
	--z-menu:      200;
	--z-hamburger: 210;

	/* motion */
	--ease: cubic-bezier(.22, .61, .36, 1);
	--dur: .3s;
	--zoom-thumb: 1.1;        /* サムネイル・丸ボタンのマウスオーバー時の拡大率（PC） */
	--dur-zoom: .3s;          /* 上記の拡大にかける時間 */

	/* ---------- 文字サイズ（スマホ） ---------- */
	--fz-body:          2rem;     /* 本文 */
	--fz-bread:         1.8rem;   /* パンくず */
	--fz-sec-en:        4rem;     /* セクション見出し（英字） */
	--fz-sec-jp:        2rem;     /* セクション見出し（日本語） */
	--fz-btn:           1.4rem;   /* 「一覧」ボタン */
	--fz-label:         1.4rem;   /* カテゴリーラベル */
	--fz-label-fv:      1.4rem;   /* カテゴリーラベル（FVサムネイル上） */
	--fz-label-short:   1.25rem;  /* カテゴリーラベル（ショート動画上） */
	--fz-label-article: 1.84rem;  /* カテゴリーラベル（個別ページ） */
	--fz-date:          1.6rem;   /* カードの日付 */
	--fz-card-ttl:      2rem;     /* カードのタイトル */
	--fz-lead:          2rem;     /* TOP リード文 */
	--fz-lead-strong:   2.4rem;   /* TOP リード文（太字） */
	--fz-info-cat:      1.4rem;   /* INFORMATION 種別 */
	--fz-info-date:     1.8rem;   /* INFORMATION 日付 */
	--fz-info-ttl:      2rem;     /* INFORMATION タイトル */
	--fz-ext:           1.2rem;   /* 「募集サイト」リンク */
	--fz-article-date:  1.8rem;   /* 個別ページ 日付 */
	--fz-article-ttl:   3.2rem;   /* 個別ページ タイトル */
	--fz-article-h2:    3.2rem;   /* 個別ページ 見出し */
	--fz-article-body:  2rem;     /* 個別ページ 本文 */
	--fz-article-quote: 2.6rem;   /* 個別ページ 吹き出し */
	--fz-author:        1.8rem;   /* 個別ページ 取材者名 */
	--fz-credit:        1.8rem;   /* 個別ページ クレジット */
	--fz-article-link:  1.6rem;   /* 個別ページ 募集サイトへのリンク */
	--fz-readmore:      2.8rem;   /* あわせて読む */
	--fz-menu:          2.4rem;   /* メニュー */
	--fz-fnav:          1.7rem;   /* フッターナビ */
	--fz-copy:          1.6rem;   /* コピーライト */

	/* ---------- 行間 ---------- */
	--lh-body:     1.7;
	--lh-card-ttl: 1.6;
}

/* PC 上書き */
@media screen and (min-width: 900px) {
	:root {
		--pad: 4.9rem;
		--radius-box: .6rem;
		--radius-btn: .6rem;

		/* ---------- 文字サイズ（PC） ---------- */
		/* 本文・カードのタイトル・TOPリード文・INFORMATIONのタイトルは 1.8rem（18px）で揃える */
		--fz-body:          1.8rem;
		--fz-bread:         max(1.1rem, 10px);
		--fz-sec-en:        4.8rem;
		--fz-sec-jp:        2rem;
		--fz-btn:           max(1.4rem, 11px);
		--fz-label:         1.6rem;
		--fz-label-fv:      1.8rem;
		--fz-label-short:   max(1.25rem, 10px);
		--fz-label-article: 1.84rem;
		--fz-date:          1.8rem;
		--fz-card-ttl:      1.8rem;
		--fz-lead:          1.8rem;
		--fz-lead-strong:   2.4rem;
		--fz-info-cat:      max(1.4rem, 11px);
		--fz-info-date:     1.8rem;
		--fz-info-ttl:      1.8rem;
		--fz-ext:           max(1.2rem, 10px);
		--fz-article-date:  1.8rem;
		--fz-article-ttl:   3.2rem;
		--fz-article-h2:    3.2rem;
		--fz-article-body:  1.8rem;
		--fz-article-quote: 2.6rem;
		--fz-author:        1.8rem;
		--fz-credit:        1.8rem;
		--fz-article-link:  1.6rem;
		--fz-readmore:      2.8rem;
		--fz-menu:          2.4rem;
		--fz-fnav:          1.7rem;
		--fz-copy:          1.6rem;
	}
}

/* --------------------------------------------------------------------------
   ベース
   ※ スマホ：画面幅に比例して拡大縮小（リキッド）。567px 以上は等倍で幅だけ可変。
   ※ PC（900px 以上）：1440px 未満は画面幅に比例して縮小。
      1008px 未満は縮小を 0.7 倍で止め、幅だけ可変にしている。
   -------------------------------------------------------------------------- */
html {
	font-size: calc(100vw / var(--design-sp) * 10);
	scroll-behavior: smooth;
}

@media screen and (min-width: 567px) {
	html { font-size: 10px; }
}

@media screen and (min-width: 900px) {
	html { font-size: clamp(7px, calc(100vw / var(--design-pc) * 10), 10px); }
}

body {
	font-family: var(--f-jp);
	font-size: var(--fz-body);
	font-weight: 400;
	line-height: var(--lh-body);
	letter-spacing: .025em;
	color: var(--c-text);
	background: var(--c-bg);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

/* メニュー展開中のスクロールロック */
body.is-fixed {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

a {
	transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

@media (hover: hover) {
	a:hover { opacity: .7; }
}

/* --------------------------------------------------------------------------
   レイアウト
   -------------------------------------------------------------------------- */
.l-inner {
	width: 100%;
	padding-inline: var(--pad);
}

.l-main {
	display: block;
}

/* --------------------------------------------------------------------------
   汎用ユーティリティ
   -------------------------------------------------------------------------- */
.u-pc { display: none; }
.u-sp { display: block; }

@media screen and (min-width: 900px) {
	.u-pc { display: block; }
	.u-sp { display: none; }
}

.u-ta-c { text-align: center; }
.u-ta-r { text-align: right; }
.u-ta-l { text-align: left; }

.u-mt0 { margin-top: 0 !important; }
.u-mb0 { margin-bottom: 0 !important; }

.u-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.u-obf {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   フォント
   ※ Noto Sans JP / Montserrat / Roboto は Google Fonts を <head> で読み込む。
      それ以外の書体（見出しコピー、バッジ、バナーなど）は画像にしている。
   -------------------------------------------------------------------------- */
.f-en {
	font-family: var(--f-en);
	letter-spacing: 0;
}

.f-num {
	font-family: var(--f-num);
	letter-spacing: 0;
	font-feature-settings: normal;
}