@charset "utf-8";
/* ==========================================================================
   single.css
   個別ページ（テンプレート）
   記事／自衛CAN NEWSとは／高校生特派員ご紹介／編集ポリシー で共通して使う。
   ※ 記事タイトル上下・見出し上下・本文上下の余白は共通。
   ========================================================================== */

/* リセットの * { margin: 0 auto } を flex の子で打ち消す */
.article__meta > *,
.article__authors > *,
.author > *,
.bubble > * {
	margin-inline: 0;
}

/* ==========================================================================
   記事
   スマホ：白地 ／ PC：グレー地に白いボックス
   ========================================================================== */
.article {
	margin-top: 5.6rem;
	padding: 0 var(--pad) 7.1rem;
	text-align: left;
}

@media screen and (min-width: 900px) {
	.article-bg {
		padding: 5.6rem var(--pad) 7.5rem;
		background: var(--c-bg-gray);
	}

	.article {
		max-width: 90rem;
		margin-top: 0;
		padding: 0;
	}

	.article__box {
		padding: 5.4rem 4.5rem 5.4rem 5.5rem;
		background: var(--c-white);
		border-radius: 1.2rem;
	}
}

/* --- ラベル・日付 ------------------------------------------------------ */
.article__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
}

.article__meta .labels { gap: .65rem; }

.article__meta .label {
	height: 2.9rem;
	padding-inline: 2.1rem;
	font-size: var(--fz-label-article);
}

.article__date {
	margin-left: auto;
	padding-top: .4rem;
	font-family: var(--f-num);
	font-size: var(--fz-article-date);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	font-feature-settings: normal;
	color: var(--c-black);
}

/* --- タイトル ---------------------------------------------------------- */
.article__ttl {
	font-size: var(--fz-article-ttl);
	font-weight: 700;
	line-height: 1.3125;
}

.article__meta + .article__ttl { margin-top: 2.6rem; }

/* --- 動画 -------------------------------------------------------------- */
.article__video {
	position: relative;
	margin-top: 3.4rem;
	aspect-ratio: 16 / 9;
	background: var(--c-video);
}

.article__video iframe,
.article__video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* サムネイル（再生前に表示する画像） */
.article__video-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 動画が未指定の間は再生ボタンを出さない */
.article__video-play[hidden] { display: none; }

/* ショート動画（縦長）用 */
.article__video--vertical {
	max-width: 36rem;
	aspect-ratio: 9 / 16;
	margin-inline: auto;
}

/* 白い丸（透明度 .6）。中の三角は抜き */
.article__video-play {
	position: absolute;
	inset: 0;
	width: 8.6rem;
	height: 8.6rem;
	margin: auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M50 0a50 50 0 1 0 0 100A50 50 0 1 0 50 0ZM40.7 29.1 68.7 49.25 40.7 69.4Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	opacity: .6;
	cursor: pointer;
}

@media screen and (min-width: 900px) {
	.article__video-play {
		width: 15.6rem;
		height: 15.6rem;
	}
}

/* --- 取材者 ------------------------------------------------------------ */
.article__authors {
	display: flex;
	flex-wrap: wrap;
	gap: 1.8rem 3rem;
	margin-top: 9.7rem;
	padding-block: 1.8rem;
	background:
		repeating-linear-gradient(90deg, var(--c-line) 0 2px, transparent 2px 4px) no-repeat left top / 100% 1px,
		repeating-linear-gradient(90deg, var(--c-line) 0 2px, transparent 2px 4px) no-repeat left bottom / 100% 1px;
}

.author {
	display: flex;
	align-items: center;
	gap: 1.8rem;
	font-size: var(--fz-author);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--c-black);
}

.author__img {
	width: 6.1rem;
	border-radius: 50%;
}

@media screen and (min-width: 900px) {
	.article__authors {
		gap: 1.8rem 2.1rem;
		margin-top: 4.5rem;
	}
}

/* --- 本文 -------------------------------------------------------------- */
.article__text {
	font-size: var(--fz-article-body);
	line-height: var(--lh-body);
	text-align: justify;
}

.article__text p + p { margin-top: 1.7em; }

/* 箇条書き */
.article__text ul,
.article__text ul + p { margin-top: 1.7em; }

.article__text li {
	position: relative;
	padding-left: 1.2em;
}

.article__text li::before {
	content: "";
	position: absolute;
	top: calc((1em * var(--lh-body) - .4em) / 2);
	left: .3em;
	width: .4em;
	height: .4em;
	background: var(--c-text);
	border-radius: 50%;
}

/* 本文中のロゴ画像など */
.article__logo { margin-top: 4.5rem; }
.article__logo--center { text-align: center; }
.article__logo img {
	width: 30.6rem;
	margin-left: 0;
}

.article__logo--center img { margin-inline: auto; }

@media screen and (min-width: 900px) {
	.article__logo img { width: 34.6rem; }
}

.article__authors + .article__text { margin-top: 2rem; }
.article__video + .article__text { margin-top: 4.5rem; } /* 取材者の行が無いとき */
.article__ttl + .article__text { margin-top: 3.4rem; }

/* --- 本文ボックス（2つ目以降） ---------------------------------------- */
.article__body { margin-top: 6.5rem; }

@media screen and (min-width: 900px) {
	.article__body {
		margin-top: 2.4rem;
		padding-top: 5.9rem;
		padding-bottom: 7.2rem;
	}
}

/* --- 見出し ------------------------------------------------------------ */
.article__h2 {
	position: relative;
	margin-top: 6.5rem;
	padding-left: 3rem;
	font-size: var(--fz-article-h2);
	font-weight: 700;
	line-height: 1.3125;
}

/* 線は文字の見た目（漢字の上端〜下端）に対して上下均等にはみ出すように置く */
.article__h2::before {
	content: "";
	position: absolute;
	top: .12em;
	bottom: .02em;
	left: 0;
	width: 1rem;
	background: var(--c-h2-bar, var(--c-blue));
}

/* DISCOVER JSDF の記事はカテゴリーの色（青緑）、自衛CAN NEWSとはページはロゴの赤 */
.article--discover { --c-h2-bar: var(--c-green); }
.article--about    { --c-h2-bar: var(--c-red-logo); }

.article__h2:first-child { margin-top: 0; }
.bubble + .article__h2 { margin-top: 3.7rem; }
.article__h2 + .article__text { margin-top: 2.9rem; }

@media screen and (min-width: 900px) {
	.article__h2 {
		margin-top: 6rem;
		padding-left: 4rem;
	}

	.bubble + .article__h2 { margin-top: 2.8rem; }
	.article__h2 + .article__text { margin-top: 3.8rem; }
}

/* --- 吹き出し ---------------------------------------------------------- */
.bubble {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-top: 3.2rem;
}

.bubble__txt {
	position: relative;
	align-self: stretch;
	margin: 0 3.8rem 0 3.2rem;
	padding: 2.4rem 2.8rem 2.6rem;
	font-size: var(--fz-article-quote);
	font-weight: 500;
	line-height: 1.46;
	text-align: justify;
	border: 1px dashed var(--c-line);
	border-radius: 1.2rem;
}

/* しっぽ */
.bubble__txt::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 12.6rem;
	width: 5.7rem;
	height: 4.1rem;
	margin-top: -1.5px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 57 41' preserveAspectRatio='none'%3E%3Cpath d='M0 0 56 40.5 42.5 0Z' fill='%23fff'/%3E%3Cpath d='M.5 .5 56 40.5 42 .5' fill='none' stroke='%23aaa' stroke-dasharray='2 2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.bubble__img {
	width: 11.2rem;
	margin-top: 2rem;
	border-radius: 50%;
}

@media screen and (min-width: 900px) {
	/* PC のデザインでは本文と吹き出しの間が大きく空いている */
	.bubble { margin-top: 10.8rem; }

	.bubble__txt {
		margin: 0;
		padding: 1.8rem 3rem 2.9rem;
	}
}

/* --- 募集サイトへのリンク --------------------------------------------- */
.article__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.6rem;
	margin-top: 5rem;
}

.article__links > * { margin-inline: 0; }

.article__links .btn-more {
	height: 4.6rem;
	padding: 0 2.6rem 0 2.2rem;
	font-size: var(--fz-article-link);
}

@media screen and (min-width: 900px) {
	.article__links {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1.6rem 2rem;
		margin-top: 6rem;
	}
}

/* --- クレジット -------------------------------------------------------- */
.article__credit {
	margin-top: 2.5rem;
	padding-top: 2.2rem;
	font-size: var(--fz-credit);
	line-height: 1.2;
	letter-spacing: 0;
	text-align: right;
	color: var(--c-black);
	background: repeating-linear-gradient(90deg, var(--c-line) 0 2px, transparent 2px 4px) no-repeat left top / 100% 1px;
}

.article__links + .article__credit { margin-top: 5rem; }

@media screen and (min-width: 900px) {
	.article__credit { margin-top: 4.1rem; }
	.article__links + .article__credit { margin-top: 6rem; }
}

/* ==========================================================================
   あわせて読む
   ========================================================================== */
.readmore {
	padding-top: 6.2rem;
	border-top: 1.2rem solid var(--c-bg-gray);
}

.readmore__ttl {
	display: inline-block;
	padding-bottom: .4rem;
	font-size: var(--fz-readmore);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .05em;
	border-bottom: .33rem solid var(--c-text);
}

.readmore__ttl em {
	font-style: normal;
	color: var(--c-red);
}

.readmore .card-list { margin-top: 4rem; }

@media screen and (min-width: 900px) {
	.readmore {
		padding-top: 7.5rem;
		border-top: 0;
	}

	.readmore .card-list { margin-top: 6.2rem; }
}

/* --- 募集サイト／パンフレット／相談・応募（上の余白） ------------------- */
.cta { margin-top: 10.3rem; }
.article-bg + .cta { margin-top: 7.3rem; }

@media screen and (min-width: 900px) {
	.cta { margin-top: 13.8rem; }
	.article-bg + .cta { margin-top: 13rem; }
}