@charset "utf-8";
/* ==========================================================================
   広告ボタン（almond-btn.css）・PR 広告カード（almond-pr.css）の GUIDE 用の差分
   2 つの CSS は本体コラム swell_child/css の同名ファイルをそのまま置いている。
   ここには、GUIDE（JIN・記事ページの CSS）の中で本体と同じ見た目にするための指定だけを書く。
   ========================================================================== */

/* 本体で SWELL の本文から受け継いでいる文字の大きさ・行の高さ・書体（PC 16px、スマホ 3.8vw、行の高さ 1.8）。
   GUIDE の記事本文は 14px・1.9 なので、そのままだと em で決まる余白やアイコンの大きさが小さくなる */
.almond-btn,
.almond-pr {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	line-height: 1.8;
}

@media (max-width: 599px) {

	.almond-btn,
	.almond-pr {
		font-size: 3.8vw;
	}
}

/* 追加費用の項目名：スマホでは本体（SWELL の dt）と同じ太字。PC は almond-pr.css の 500 が効く */
:where(.almond-pr) dt {
	font-weight: 700;
}

/* SWELL は全要素・::before・::after が border-box、JIN の ::before・::after は content-box（ボタン内側の白い線が 2px ずれる） */
.almond-btn::before,
.almond-btn::after,
.almond-pr::before,
.almond-pr::after,
.almond-pr *,
.almond-pr *::before,
.almond-pr *::after {
	box-sizing: border-box;
}

/* JIN は本文を antialiased にしている（Mac だけで効く）。本体と同じ auto に */
.almond-btn,
.almond-pr {
	-webkit-font-smoothing: auto;
}

/* GUIDE のリンク共通の指定（guide-common.css の .acg-main a・a:hover・:focus-visible）は詳細度が高く、本体の指定を上書きしてしまう。
   ボタン・PR カードのリンクだけ、本体（almond-btn.css・almond-pr.css）の値に戻す */
.acg-main a.almond-btn {
	touch-action: auto;
	transition: transform .2s, box-shadow .2s, filter .2s;
}

.acg-main .almond-btn:hover {
	color: #fff;
}

.acg-main .almond-btn:focus-visible {
	outline: 3px solid #222;
	outline-offset: 4px;
}

.acg-main .almond-pr a.almond-pr__cta {
	touch-action: auto;
	transition: background-color .2s, box-shadow .2s, transform .2s;
}

.acg-main .almond-pr__image a {
	touch-action: auto;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {

	.acg-main a.almond-btn,
	.acg-main .almond-pr a.almond-pr__cta {
		transition: none;
	}
}