@charset "utf-8";

/* --------------------------------------------
	変数(色・フォント)
-------------------------------------------- */
:root {
	/* color */
	--c-text: #141414;
	--c-white: #fff;
	--c-blue: #004ea2;
	--c-deep-blue: #003673;
	--c-red: #d91d38;
	--c-deep-red: #a81227;
	--c-pail-red: #fff6f8;
	--c-green: #09662e;
	--c-bg: #eaf3fa;

	/* font family */
	--font-base: "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;

	/* font size(1rem = html の font-size) */
	--fz-xs: 1rem;
	--fz-s: 1.3rem;
	--fz-m: 1.6rem;
	--fz-l: 1.8rem;
	--fz-xl: 2rem;
	--fz-xxl: 2.4rem;
	--fz-3xl: 3.2rem;

	/* font weight */
	--fw-light: 300;
	--fw-medium: 500;
	--fw-bold: 700;
}

/* --------------------------------------------
	基本設定(html / body)
-------------------------------------------- */
html {
	font-size: clamp(8.75px, 0.186vw + 7.32px, 10px);
}

@media (min-width: 1440px) {
	html {
		font-size: clamp(10px, 0.26vw + 6.25px, 11.25px);
	}
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: var(--font-base);
	font-size: var(--fz-m);
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--c-text);
}

input,
select,
textarea {
	letter-spacing: inherit;
	font-feature-settings: inherit;
}

/* --------------------------------------------
	共通要素
-------------------------------------------- */
a {
	color: inherit;
	text-decoration: none;
}

p {
	text-align: justify;
}

::selection {
	background: #d6daea;
	color: inherit;
}

:focus-visible {
	outline: 3px solid #ffbf47;
	outline-offset: 2px;
}

/* --------------------------------------------
	ユーティリティ
-------------------------------------------- */
.showSp {
	display: none !important;
}

@media (max-width: 640px) {
	.showPc {
		display: none !important;
	}

	.showSp {
		display: block !important;
	}
}

.note-red {
	color: var(--c-red);
}

/* --------------------------------------------
	レイアウト
-------------------------------------------- */
.main-content {
	flex: 1 0 auto;
}

/* --------------------------------------------
	外部リンク一覧
-------------------------------------------- */
.external-links {
	margin-top: 20px;
}

.external-links li {
	position: relative;
	margin-bottom: 6px;
}

.external-links li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background-image: url('../image/common/icon-link.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

.external-links a {
	margin-left: 20px;
	color: var(--c-blue);
	border-bottom: 1px dotted var(--c-blue);
}

/* --------------------------------------------
	注意事項エリア
-------------------------------------------- */
.alert-box-red {
	margin-top: 80px;
	padding: 24px 32px;
	border: 4px solid var(--c-red);
	border-radius: 10px;
	background-color: var(--c-pail-red);
}

.alert-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: var(--fz-l);
	font-weight: bold;
	color: var(--c-red);
}

.alert-title::before {
	content: "■";
}

.alert-text {
	line-height: 1.7;
}

/* --------------------------------------------
	リンクボタン
-------------------------------------------- */
.sub-links-section {
	padding: clamp(24px, 2.5vw, 48px);
	border-radius: 12px;
	background-color: var(--c-white);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	text-align: center;
}

.sub-links-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 1.2vw, 24px);
}

.pill-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(10px, 1vw, 16px) 44px clamp(10px, 1vw, 16px) clamp(16px, 1.5vw, 28px);
	border-radius: 50px;
	color: var(--c-white);
	font-weight: bold;
	transition: background-color 0.2s ease;
}

.pill-btn.btn-blue {
	background-color: var(--c-blue);
}

.pill-btn.btn-blue:hover {
	background-color: var(--c-deep-blue);
}

.pill-btn.btn-red {
	padding-right: clamp(16px, 1.5vw, 28px);
	background-color: var(--c-red);
}

.pill-btn.btn-red:hover {
	background-color: var(--c-deep-red);
}

.pill-btn.btn-red-outline {
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
    padding-right: clamp(16px, 1.5vw, 28px);
    background-color:var(--c-white);
	text-align: center;
    color: var(--c-red);
    border: 3px solid var(--c-red);
    transition: background-color 0.2s ease;
}

.pill-btn.btn-red-outline .small {
    display: block;
    font-size: 0.7em;
    font-weight: normal;
	line-height: 1;
}

.pill-btn.btn-red-outline:hover {
    background-color: #fff0f0;
}

.pill-btn .arrow {
	position: absolute;
	right: 18px;
}

@media (max-width: 1024px) {
	.sub-links-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.sub-links-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------
	ページトップへ戻るボタン
-------------------------------------------- */
#pageTop {
	display: none;
	position: fixed;
	right: 0;
	bottom: 100px;
	z-index: 999;
}

#pageTop.fixed {
	display: block;
	animation: pageTopFixed 1s forwards;
}

#pageTop a {
	position: relative;
	display: block;
	border-bottom: none;
	transition: 0.3s;
}

@keyframes pageTopFixed {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	#pageTop.fixed {
		animation: none;
	}

	.pill-btn,
	#pageTop a {
		transition: none;
	}
}

/* --------------------------------------------
	印刷時
-------------------------------------------- */
@media print {
	.header,
	#pageTop {
		display: none;
	}
}