/*
Theme Name: Yamako-web Theme
Theme URI: https://yamamoto-shs.ed.jp/
Author: Your chikara.u
Author URI: https://yamamoto-shs.ed.jp/
Description: A custom theme for Yamako website.
Version: 1.0
*/

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100..900&display=swap');

:root {
	--main: #8c88ba;
	--dark: #4f3a60;
	--sub: #eeedea;
	--accent: #8c88ba;
	--red: #e73a3a;
	--blue: #8db1c4;
	--green: #78b48b;
	--yellow: #cebb6b;
	--white: #fff;
	--text: #434343;
	--black: #434343;
	--silver: #eee;
	--secondary: #696969;
	--gray: #999;
	--grad: linear-gradient(to bottom, #fdfbfb, #ebedee);

	--en-font: 'Jost', sans-serif;
	--jp-font: 'Shippori Mincho', serif;
	--awesome: 'Font Awesome 6 Free';

	--xsmall: 0.8em;
	--small: 0.9em;
	--normal: 1em;
	--large: 1.25em;
	--xlarge: 1.45em;
	--xxlarge: 1.7em;
}

.yet {
	color: red;
}
* {
	min-height: 0;
	min-width: 0;
}

img {
	user-drag: none; /* ドラッグ禁止 */
	user-select: none; /* 選択禁止 */
	-webkit-user-drag: none; /* Webkitブラウザ（ChromeやSafari）向け */
	-webkit-user-select: none;
	-moz-user-select: none; /* Firefox向け */
	-ms-user-select: none; /* IE向け */
	pointer-events: none; /* 右クリックや長押し禁止 */
}

a img {
	pointer-events: auto;
}

a {
	color: var(--accent);
	font-weight: 400;
	text-decoration: underline;
	cursor: pointer;
}
a:hover {
	color: var(--bright);
	cursor: pointer;
}

body,
html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	/* font-family: 'Noto Sans JP', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', sans-serif; */
	font-family: 'Helvetica Neue', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, sans-serif;
	font-weight: 400;
	/* font-size: 1.4rem; */
	font-size: clamp(1.4rem, calc((100vw - 600px) * 0.003 + 1.4rem), 1.6rem);
	color: var(--black);
	font-optical-sizing: auto;
	line-height: 2.3;
	overflow-x: hidden;
	position: relative;
	background-color: #fff;
}

.loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: var(--white);
}
#front .loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: var(--white);
	background-position: center, left top, right bottom;
	background-repeat: no-repeat;
	background-size: 66%, 50%, 50%;
}
@media screen and (min-width: 600px) {
	#front .loader {
		background-size: 33%, 25%, 25%;
	}
}

.wrapper {
	padding: 0;
	margin: 0;
	overflow: hidden;
	overflow: clip;
	position: relative;
}
@media screen and (min-width: 1025px) {
	.wrapper {
		padding-top: 0;
	}
}

.decoration-text {
	position: fixed;
	content: '©yamamoto High School All Rights Reserved.';
	text-transform: capitalize;
	white-space: nowrap;
	letter-spacing: 0.4em;
	font-size: 0.7em;
	font-family: var(--en-font);
	display: inline-block;
	top: 50%;
	left: min(8px, 1%);
	z-index: 100;
	transform-origin: center left;
	transform: rotate(90deg) translate(-50%, -50%);
}
.decoration-text.active {
	color: white;
}

/* ------------------------------------------------------------- */
/* aos設定------------------------------------------------- */
/* ------------------------------------------------------------- */
[data-aos='fade-left'] {
	transform: translate3d(30px, 0, 0);
}
[data-aos='fade-right'] {
	transform: translate3d(-30px, 0, 0);
}
/* ------------------------------------------------------------- */
/* コンテナ設定------------------------------------------------- */
/* ------------------------------------------------------------- */
/* .outerでは横幅100%で左右のパディングのみ設定 */
.outer {
	position: relative;
	margin: 0 auto;
	padding-left: min(5%, 40px);
	padding-right: min(5%, 40px);
}
/* outerの中にinnerを入れることで上下のパディングがつく */
.inner {
	width: auto;
	margin: 0 auto;
	padding-top: min(15.4vw, 80px);
	padding-bottom: min(15.4vw, 80px);
}
/* innerが隣接してる場合、パディングを消去 */
.inner:not(.inner--bg) + .inner:not(.inner--bg) {
	padding-top: 0;
}
.inner--full {
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}
.inner--fill {
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw + 8px);
	margin-right: calc(50% - 50vw + 8px);
}
.inner__section {
	margin-top: min(15.4vw, 80px);
}
.inner--nested {
	margin-top: min(15.4vw, 120px);
}

@media screen and (min-width: 600px) {
	/* .outerでは左右のパディングのみ設定 */
	.outer {
		padding-left: min(8.3vw, 80px);
		padding-right: min(8.3vw, 80px);
	}
}

@media screen and (min-width: 960px) {
	/* .outerでは左右のパディングのみ設定 */
	.outer {
		padding-left: min(8.3vw, 100px);
		padding-right: min(8.3vw, 100px);
		max-width: 1440px;
	}
	.inner {
		width: auto;
		padding-top: 120px;
		padding-bottom: 120px;
	}
	.inner--mini {
		margin-left: auto;
		margin-right: auto;
		max-width: 900px;
	}
	.inner--full {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: calc(50vw - 50%);
		padding-right: calc(50vw - 50%);
	}
}

/* ------------------------------------------------------------- */
/* 背景設定----------------------------------------------------- */
/* ------------------------------------------------------------- */
.bg--gray {
	background-color: #f7f8fb;
}
.bg--yellow {
	background-color: #eaffa8;
}

/* ------------------------------------------------------------- */
/* 汎用テキストスタイル----------------------------------------- */
/* ------------------------------------------------------------- */
.text-area {
	/* padding: 1em 0; */
	/* overflow: hidden; */
	position: relative;
	container-type: inline-size;
}
.text-area p {
	margin: 2em 0;
	text-align: justify;
}
.text-area p:first-child {
	margin-top: 0; /* 一番上の段落に余白を付けない */
}

.text-area p:last-child {
	margin-bottom: 0; /* 一番下の段落に余白を付けない */
}
/* 見出しのスタイル */
.text-area h2,
.text-area h3,
.text-area h4 {
	margin: 4em 0 1em; /* 見出しの上下の余白 */
	font-weight: 500; /* 太字で強調 */
}
@container (max-width:600px) {
	.text-area h2,
	.text-area h3,
	.text-area h4 {
		margin: 2em 0 1em; /* 見出しの上下の余白 */
	}
}

.text-area h2:first-child,
.text-area h3:first-child,
.text-area h4:first-child {
	margin-top: 0; /* 一番上の段落に余白を付けない */
}

/* 見出しの階層ごとのスタイル */
.text-area h2 {
	font-size: 1.4em; /* メイン見出しの大きさ */
	position: relative;
	padding-left: 0;
}
.text-area h2::after {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 3px;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to right, var(--accent) 20%, #cccccc 20%);
}

.text-area h3 {
	font-size: 1.1em; /* サブ見出しの大きさ */
	border-bottom: 1px solid #666;
	padding-left: 0.2em;
}

.text-area h4 {
	font-size: 1.1em; /* 小さな見出し */
	padding-left: 14px;
	position: relative;
}
.text-area h4::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	height: 80%;
	width: 4px;
	transform: translateY(-50%);
	background-image: linear-gradient(to bottom, var(--accent) 50%, var(--main) 50%);
}

/* 特に重要な内容 */
.text-area strong {
	font-weight: 600;
	color: var(--dark); /* 目立たせたい色 */
}
/* あえて強調 */
.text-area em {
	font-style: normal;
	font-weight: 500;
}
/* 見た目上で強く強調 */
.text-area b {
	color: var(--accent);
	font-style: normal;
	font-weight: 600;
	font-size: 1.1em;
}
/* 控えめに強調 */
.text-area u {
	font-style: underline;
	text-underline-offset: 4px;
	text-decoration-style: dashed;
}
/* 控えめに強調 */
.text-area del {
	text-decoration: none;
	color: #aaa;
}

/* aside全体のスタイル */
.relation-area,
.text-area aside {
	background-color: #f9f9f9; /* 補足部分を区切る背景色 */
	border-left: 4px solid var(--main);
	padding: 1em 2em; /* 内側の余白 */
	margin: 2em 0; /* 上下の余白 */
	font-size: 0.9em; /* 少し小さな文字 */
	color: #555; /* 補足らしい控えめな色 */
}
.relation-area h2,
.relation-area h3,
.relation-area h4,
.text-area aside h2,
.text-area aside h3,
.text-area aside h4 {
	border-bottom: 1px solid #666;
	padding-left: 0.2em;
}

/* 補足情報 */
.text-area small {
	font-size: 0.85em;
	color: #666;
}

/* 補足内の強調部分 */
.text-area small strong {
	font-weight: bold; /* 太字で強調 */
	color: var(--red); /* 目立つ赤系の色を適用 */
}

.text-area small em {
	font-style: normal;
	text-decoration: underline;
	text-decoration-style: dashed; /* 破線スタイル */
	color: #555; /* 若干濃い色 */
}

/* 改行 */
.br--pc {
	display: none;
}
.br--sp {
	display: inline;
}

@media (min-width: 600px) {
	.br--pc {
		display: inline;
	}
	.br--sp {
		display: none;
	}
}

/* 区切り線 */
.text-area hr {
	margin: 5em 0;
}

/* リンクのスタイル */
.text-area a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
}
.text-area a:hover {
	color: #0000cd;
	text-decoration: none;
}
/* ボタン風のリンクノスタイル */
.text-area button {
	display: block;
	background-color: var(--accent);
	color: var(--white);
	font-weight: 500;
	text-decoration: none;
	border-radius: 100px;
	text-align: center;
	position: relative;
	padding: 10px 40px 10px 30px;
	transition: 0.3s;
	margin-top: 1em;
}
.text-area button::after {
	content: '\f138';
	font-family: var(--awesome);
	font-weight: 900;
	color: var(--main);
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	transition: 0.3s;
}
.text-area button:hover::after {
	right: 14px;
}

.text-area button:hover {
	background-color: #0000cd;
}
/* リスト項目もサポートする場合 */
.text-area ul {
	margin: 1.5em 0;
	padding-left: 1.5em; /* インデントを設定 */
}
.text-area ol {
	margin: 1.5em 0;
	padding-left: 0; /* インデントを設定 */
}

.text-area ul li {
	margin-bottom: 0.5em; /* 各リスト項目の間隔 */
}
.text-area ol li {
	margin-bottom: 2em; /* 各リスト項目の間隔 */
}

.text-area ul {
	list-style: disc; /* デフォルトのリストマーク */
	padding-left: 1.5em;
}

.text-area ul ul {
	list-style: circle; /* ネストしたリストのマーク */
	padding-left: 1.5em;
}
/* テーブルもサポートする場合 */
.text-area table {
	width: 100%;
	background-color: #fdfdfd;
}
.text-area table th,
.text-area table td {
	vertical-align: middle;
	padding: 1em 1.5em;
	border: 1px solid #c9c9c9;
}
.text-area table th {
	text-align: center;
	background-color: var(--silver);
	vertical-align: middle;
	font-weight: 500;
}
.text-area table td {
}
.text-area thead th:first-child,
.text-area tbody th:first-child {
	width: 30%;
}
/* 画像スタイル */
.text-area figure {
	margin: 2em 0;
	width: 100%;
}
.text-area figure:first-child {
	margin-top: 0;
}
.text-area figure img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------- */
/* ブロックエディタ用----------------------------------------- */
/* ------------------------------------------------------------- */

.wp-block-table {
	width: 100%;
	border-collapse: collapse;
}
.wp-block-table th,
.wp-block-table td {
	border: 1px solid #ccc;
	padding: 0.75em;
	text-align: left;
}
.wp-block-table thead {
	background: #f4f4f4;
	border-bottom: none;
}
.wp-block p {
	margin: 2em 0;
}

.wp-block-media-text {
}
.wp-block-media-text__media {
}
.wp-block-media-text__content {
}
.wp-block-separator {
	border-top: 1px solid;
	margin: 5em 0;
}
.wp-block-button__link {
	color: #fff;
	background-color: #32373c;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none !important;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	font-size: inherit;
	font-weight: 500 !important;
}
.wp-block-button__link:hover {
	color: #fff !important;
	background-color: var(--main);
}
/* ------------------------------------------------------------- */
/* リードエリアスタイル----------------------------------------- */
/* ------------------------------------------------------------- */
.lead-area {
	margin: 80px auto 80px;
	color: var(--black);
	width: fit-content;
	max-width: 60ch;
	text-align: left;
	line-height: 2.3;
}
.lead-area h2,
.lead-area h3,
.lead-area h4 {
	font-size: clamp(1.8rem, calc((100vw - 600px) * 0.008 + 1.8rem), 2.8rem);
	font-weight: 600;
	text-align: center;
	margin-bottom: 1em;
}
.lead-area span {
	display: inline;
}
.lead-area p {
	margin: 1em 0 1em;
	font-weight: 500;
	font-size: clamp(1.6rem, calc((100vw - 600px) * 0.006 + 1.6rem), 2.4rem);
}
.lead-area p:first-child {
	margin-top: 0;
}

@media screen and (min-width: 600px) {
	.lead-area {
		width: fit-content;
		max-width: 1100px;
		text-align: center;
	}
	.lead-area span {
		display: inline-block;
	}
}

/* ------------------------------------------------------------- */
/* ボタンライブラリ--------------------------------------------- */
/* ------------------------------------------------------------- */
.btns-container {
	container-type: inline-size;
}
.btns {
	display: flex;
	gap: 20px;
	flex-direction: row;
}
.btns--left {
	justify-content: flex-start;
}
.btns--center {
	justify-content: center;
}
.btns--right {
	justify-content: flex-end;
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	min-width: 120px;
	background-color: var(--accent);
	color: #fff;
	text-align: center;
	font-weight: normal;
	text-decoration: none;
	padding: 1em 40px;
	position: relative;
	transition: 0.3s;
	border: 1px solid transparent;
	line-height: 1;
}

@container (min-width: 600px) {
	.btns {
		flex-direction: row;
	}
	.btns .btns {
		background-color: red; /* 確認用に目立つ色を設定 */
	}
}
.btn--round {
	border-radius: 100px;
}
.btn:hover {
	background-color: #fff;
	text-decoration: none;
	color: var(--accent);
	border: 1px solid var(--accent);
}
.btn.--add-right-arrow::after {
	content: '\f138';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	display: inline-block;
	position: absolute;
	right: 14px;
	transform: translateY(2px);
	transition: 0.3s;
}

.btn.--add-left-arrow::after {
	content: '\f137';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	display: inline-block;
	position: absolute;
	left: 14px;
	transform: translateY(2px);
	transition: 0.3s;
}

/* ボタンバリエーション--------------------------------------------- */

.btn--primarily {
	background-color: var(--red);
	color: var(--white);
	border: 1px solid var(--red);
}
.btn--primarily:hover {
	background-color: #fff;
	color: var(--red);
	border: 1px solid var(--red);
}
.btn--reverse {
	border: 1px solid var(--accent);
	color: var(--accent);
	background-color: #fff;
	transition: 0.3s;
}
.btn--reverse:hover {
	border: 1px solid var(--accent);
	color: #fff;
	background-color: var(--accent);
}
.btn--dark {
	background-color: var(--main);
	color: var(--black);
	border: 1px solid var(--main);
}
.btn--dark:hover {
	background-color: transparent;
	color: var(--main);
	border: 1px solid var(--main);
}
.btn--ghost {
	border: 1px solid #fff;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
	transition: 0.3s;
}
.btn--ghost:hover {
	background-color: rgba(255, 255, 255, 0.3);
	text-decoration: none;
	color: #fff;
	border: 1px solid #fff;
}
.btn--block {
	display: flex;
	width: 100%;
	padding: 1.5em;
}
.btn--wide {
	min-width: 240px;
	max-width: auto;
	padding: 1.5em;
}
.btn--round.btn--wide {
	border-radius: 4em;
}

a[href$='.pdf'].btn::after {
	content: '\f019';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	display: inline-block;
	position: absolute;
	right: 14px;
	transform: translateY(2px);
	transition: 0.3s;
}
a[target='_blank'].btn::after {
	content: '\f2d2';
	font-family: 'Font Awesome 6 Free';
	font-weight: 400;
	display: inline-block;
	position: absolute;
	right: 14px;
	transform: translateY(2px);
	transition: 0.3s;
}
.textbox a[target='_blank']::after {
	content: '\f2d2';
	font-family: 'Font Awesome 6 Free';
	font-weight: 400;
	display: inline;
	margin-left: 0.3em;
	transform: translateY(2px);
}
.textbox a[href$='.pdf']::after,
.doc-list a[href$='.pdf']::after {
	content: '\f019';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	display: inline;
	margin-left: 0.3em;
	transform: translateY(2px);
}

/* a[href$="http"]::after,
a[target="_blank"]::after {
	content: "\f2d2";
	font-family: "Font Awesome 6 Free";
	margin: 0 3px;
} */

/* ------------------------------------------- */
/* 汎用系ルールセット-------------------------- */
/* ------------------------------------------- */

/* 装飾関係----------------------------------- */
.divider {
	border-top: 1px solid #ccc; /* 上部に1pxの線を追加 */
	margin: 3em 0; /* 上下に余白を追加 */
	width: 100%; /* 横幅を100%に設定 */
}

/* 蛍光マーカー風ハイライト----------------------------- */
mark {
	position: relative;
	display: inline; /* 必要なら各行を独立ブロック扱いに */
	background: linear-gradient(to bottom, transparent 60%, #d8f984 60%);
	background-size: 0% 100%; /* 初期状態は幅0% */
	background-repeat: no-repeat;
	padding: 0 2px 0 5px; /* 文字の左右に余白を追加 */
	line-height: 1.5; /* 縦の余白を確保 */
	transition: background-size 0.5s ease-in-out;
	color: inherit; /* 親要素の色を引き継ぐ */
}

mark.active {
	background-size: 100% 100%; /* アクティブ時に全幅を適用 */
}

/* 人画像を入れる時の必須クラス-------------- */
.person {
	display: block;
	position: absolute;
}

/* 汎用テーブル設定--------------------------------------- */

.table {
	background-color: #fdfdfd;
	width: 100%;
	font-size: 0.85em;
}
.table th {
	text-align: center;
	vertical-align: middle;
	background-color: var(--silver);
	font-weight: 500;
}
.table td {
	vertical-align: middle;
}
.table th,
.table td {
	border: 1px solid #c9c9c9;
	padding: 1em 1.5em;
}
.table thead th:first-child,
.table tbody th:first-child {
	width: 30%;
}
/* 3列対応テーブル--------------------------------- */
.table--3-cols {
	width: 100%;
	font-size: 0.85em;
	table-layout: fixed;
	line-height: 1.4;
}
.table--3-cols thead th:first-child,
.table--3-cols tbody th:first-child {
	width: 20%;
}

/* Googleマップ汎用ボックス----------------- */
.gmap {
	width: 100%;
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: 0;
}
.gmap iframe {
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 600px) {
	.gmap {
		width: 100%;
		height: 500px;
	}
	.gmap iframe {
		width: 100%;
		height: 100%;
	}
}
/* Googleマップ汎用ボックス----------------- */
.youtube {
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
}
.youtube iframe {
	width: 100%;
	height: 100%;
}

/* 資料ダウンロード汎用リスト--------------------- */
.doc-list {
}
.doc-list li {
	border-bottom: 1px solid var(--main);
}
.doc-list li a {
	display: inline-block;
	padding: 0.5em 0;
	transition: 0.3s;
}

/* ページ内配布文書汎用リスト--------------------- */
.read-list {
}
.read-list dt {
	background-color: whitesmoke;
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
	padding: 1em 0.75em;
	font-weight: normal;
}
.read-list dd {
	padding: 1em 0.75em;
	margin-bottom: 1em;
	font-size: 0.9em;
}

/* ページ内リンク用　選択ボタン ----------------------------- */
.chouse-box {
	display: grid;
	grid-template-columns: 1fr;
	padding: 0 8px;
	gap: 8px;
	width: 100%;
}
.chouse-box__item {
}
.chouse-box__item > a {
	color: #fff;
	background-color: var(--accent);
	text-align: center;
	border-radius: 8px;
	display: block;
	width: 100%;
	height: auto;
	padding: 1em 1em 1.2em 1em;
	text-decoration: none;
	position: relative;
}
.chouse-box__item > a:hover {
	background-color: var(--main);
	color: var(--black);
}
.chouse-box__item > a::after {
	content: '▼';
	font-size: 10px;
	color: inherit;
	display: block;
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
}

@media screen and (min-width: 600px) {
	.chouse-box {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* div囲みのみシンプル罫汎用ボックス */
.empty-box {
	border: 1px solid var(--dark);
	padding: 40px;
}
.empty-box > p {
	margin-bottom: 0;
}
.empty-box > p + p {
	margin-top: 1em;
}

/* タイトルが上にくる汎用その他ボックス */
.etc-box {
	background-color: var(--white);
	border: 2px solid var(--accent);
	padding: 18px 30px 40px;
	border-radius: 8px;
	margin-top: 24px;
	position: relative;
	color: var(--black);
}
.etc-box__ttl {
	font-weight: 500;
	margin-top: -50px;
	margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--accent);
	border: 4px solid #fff;
	border-radius: 100px;
	width: fit-content;
	padding: 8px 34px;
	color: #fff;
	display: flex;
	align-items: center;
}
.etc-box > p {
	margin-bottom: 0;
}
.etc-box > p + p {
	margin-top: 1em;
}

/* ------------------------------------------------------------- */
/* タイトルスタイル--------------------------------------------- */
/* ------------------------------------------------------------- */

/* ------------------------------------------- */
/* ニュースセット-------------------------- */
/* ------------------------------------------- */
/* -----------------ニュースブロック----------------- */
.news {
	flex: 1;
}
.news__item {
	border-bottom: 1px solid #999;
	padding: 16px 0;
	line-height: 1.8;
}
.news__item:last-child {
	border-bottom: none;
}
.news__date {
	font-size: 13px;
	color: #999;
	font-weight: 600;
}
.news__cate {
	background-color: var(--accent);
	border-radius: 30px;
	font-size: 12px;
	padding: 0.3em 1em;
	margin-left: 1.3rem;
}
.news__discription {
	margin-top: 0.2rem;
}
.news__discription a {
	text-decoration: none;
	display: block;
}
.news__discription a:hover {
	text-decoration: underline;
}

/* -----------------重要なお知らせエリア----------------- */
.important-news__wrapper {
}
.important-news__ttl {
}
.important-news {
	background-color: var(--black);
	padding: 2em 2em;
	border-radius: 16px;
}
.important-news.--front a {
	color: var(--white);
	text-decoration: none;
}
.important-news.--front a:hover {
	color: var(--main);
	text-decoration: none;
}
.important-news__item {
	display: flex;
	flex-direction: column;
	gap: 1px;
	border-bottom: 1px solid #999;
	padding-block: 0.4em;
}
.important-news__time {
	display: inline-flex;
	align-items: center;
	color: inherit;
	white-space: nowrap;
	font-size: 0.85em;
	font-weight: 600;
	font-family: var(--en-font);
	line-height: 1.6;
}
.important-news__desc {
	display: block;
	color: inherit;
	text-decoration: none;
	line-height: 1.6;
}
.important-news__desc:hover {
	color: inherit;
}
.important-news__desc.is-sticky::before {
	font-family: 'Font Awesome 6 Free';
	content: '\f08d'; /* fa-thumbtack */
	font-weight: 900; /* solidアイコン用 */
	margin-right: 0.4em;
	color: #e74c3c;
}
/* -----------------重要なお知らせエリア中身----------------- */
.important-news .news__item {
	border-bottom: 1px solid #999;
}
.important-news .news__meta {
}
.important-news .news__date {
}
.important-news .news__cate {
}

.important-news .news__discription {
}
.important-news .news__discription a {
}

@media screen and (min-width: 1200px) {
	.important-news__wrapper {
	}
	.important-news__header {
	}
	.important-news__ttl {
	}
	.important-news {
		flex: 3;
	}
}

/* -----------------通常のお知らせエリア----------------- */
.school-news__wrapper {
}
.school-news__header {
}
.school-news__ttl {
}
.school-news__btns {
}
.school-news {
}
@container (min-width: 400px) {
	.btns {
		flex-direction: column;
	}
}
.school-news .news__item {
	border-bottom: 1px solid #666;
}
.school-news .news__meta {
}
.school-news .news__date {
}
.school-news .news__cate {
}
.school-news .news__discription a {
}

@media screen and (min-width: 1200px) {
	.school-news__wrapper {
	}
	.school-news__header {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		align-self: end;
	}
	.school-news__btns {
		container-type: inline-size;
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	.school-news {
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}
}

/* ------------------------------------------------------------- */
/* その他のメニュー------------------------------------------------- */
/* ------------------------------------------------------------- */
.page-nav__wrapper {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--black);
	border-bottom: 1px solid var(--black);
	padding: 40px 0;
	gap: 20px;
	margin-bottom: 40px;
	margin-top: 80px;
}

.page-nav__ttl {
	text-align: center;
}
.page-nav__ttl::before {
	content: 'other contents';
	font-family: var(--en-font);
	display: block;
	font-size: 1.2em;
	font-weight: 600;
	text-transform: capitalize;
	line-height: 1;
}

.page-nav {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-items: center;
}
.page-nav a {
	text-decoration: none;
	color: var(--black);
}
@media screen and (min-width: 600px) {
	.page-nav__wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-top: 1px solid var(--black);
		padding: 40px 0;
	}
	.page-nav__ttl-wrapper {
		flex: 1;
		border-right: 1px solid var(--black);
		padding: 20px 0;
	}
	.page-nav__ttl {
		text-align: center;
		font-size: 0.85em;
		line-height: 1;
	}
	.page-nav__ttl::before {
		margin-bottom: 10px;
	}
	.content_nav_wrapper {
		flex: 3;
	}
	.page-nav {
		display: flex;
		justify-content: space-evenly;
	}
}

/* ------------------------------------------------------ */
/* -------------------ギャラリーエリア------------------- */
/* ------------------------------------------------------ */
.loop-gallery__wrapper {
	position: relative;
	height: 100%;
	overflow: hidden;
}
.loop-gallery__wrapper::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(./img/bg/paint-01.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	transition: 0.5s;
	clip-path: polygon(0 0, 0 0, 0 0, 0 100%);
}
.loop-gallery__wrapper.active::before {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.loop-gallery {
	margin: 200px 0 160px;
}
.loop-gallery .slick-list,
.loop-gallery .slick-track {
	height: clamp(280px, 50vw, 520px);
	overflow: visible;
}
.loop-gallery .slick-track {
	display: flex;
	gap: 40px;
}
.loop-gallery .slick-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%; /* 高さ調整 */
	position: relative;
}
.loop-gallery .slick-slide:nth-child(3n) {
	top: 10%;
}
.loop-gallery .slick-slide img {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center center;
	position: relative;
	aspect-ratio: 1 / 1.4;
	border-radius: 30px;
}
.loop-gallery .slick-slide:nth-child(even) img {
	aspect-ratio: 3 / 2;
}
.club-single .loop-gallery {
	margin: 0;
}
@media screen and (min-width: 600px) {
	.loop-gallery .slick-track {
		gap: 60px;
	}
}
@media screen and (min-width: 1200px) {
	.loop-gallery .slick-track {
		gap: 100px;
	}
}
/* パンくずリスト */
.breadcrumb {
	font-size: 1.2rem;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 0.5em;
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

.breadcrumb li {
	display: flex;
	align-items: center;
}

.breadcrumb li + li::before {
	content: '＞'; /* 任意の区切り文字 */
	margin: 0 0.5em;
	color: #999;
}
@media screen and (min-width: 960px) {
	.breadcrumb {
		font-size: 1.2rem;
		margin-top: 0;
	}
}

/* -------------------------------------------------------- */
/* --------------------サイト個別の設定-------------------- */
/* -------------------------------------------------------- */

.content-header {
	display: block;
	position: relative;
	background-color: var(--main);
	height: 400px;
}
.content-header::before {
	content: '';
	display: block;
	width: 200px;
	height: 300px;
	position: absolute;
	bottom: 0;
	left: 10%;
	background: url('./img/illust/building2.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
	z-index: 1;
}
.content-header::after {
	content: '';
	display: block;
	width: 300px;
	height: 300px;
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translateX(30%);
	background: url('./img/illust/train@2x.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
	z-index: 1;
}
.content-header__title {
	color: var(--white);
	font-size: 18px;
	position: absolute;
	top: 50%;
	left: 4%;
	transform: translateY(-50%);
	z-index: 2;
}
.content-header__title::before {
	content: attr(data-en) '';
	font-family: var(--en-font);
	font-size: 3rem;
	text-transform: uppercase;
	font-weight: 500;
	display: block;
	line-height: 1;
	margin-bottom: 0;
}
.content-header__bg {
	width: 80%;
	height: 98%;
	background-image: url('./img/DSC01251.jpg');
	background-size: cover;
	position: absolute;
	right: 0;
	bottom: 0;
	border-radius: 300px 300px 0 0;
}
@media screen and (min-width: 600px) {
	.content-header {
		display: block;
		position: relative;
		background-color: var(--main);
		height: 500px;
	}
	.content-header__title {
		color: var(--sub);
		font-size: 18px;
		position: absolute;
		top: 50%;
		left: 20%;
		transform: translateY(-50%);
		z-index: 2;
	}
	.content-header__title::before {
		content: attr(data-en) '';
		font-family: var(--en-font);
		font-size: 5rem;
		text-transform: uppercase;
		font-weight: 500;
		display: block;
		line-height: 1;
		margin-bottom: 0;
	}
	.content-header__bg {
		width: 50%;
		height: 550px;
		background-image: url('./img/facility/facility-06@1600w.jpg');
		background-size: cover;
		position: absolute;
		right: 0;
		bottom: 0;
		border-radius: 1000px 1000px 0 0;
	}
}

.title-en-on-top {
	font-size: clamp(1.8rem, calc((100vw - 900px) * 0.002 + 1.8rem), 2rem);
	padding-bottom: 40px;
	position: relative;
	text-align: center;
	font-weight: 500;
	margin-bottom: 80px;
}
.--no-margin {
	margin-bottom: 0;
}
.title-en-on-top::before {
	content: attr(data-en) '';
	font-family: var(--en-font);
	font-size: clamp(6rem, calc((100vw - 900px) * 0.02 + 6rem), 8rem);
	text-transform: uppercase;
	font-weight: 500;
	display: block;
	line-height: 1;
	margin-bottom: 0;
}
.title-en-on-top::after {
	content: '';
	display: block;
	width: 20px;
	height: 30px;
	border-radius: 20px 20px 0 0;
	background-color: var(--main);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
@container (max-width: 399px) {
	.title-en-on-top {
		font-size: 1.8rem;
	}
	.title-en-on-top::before {
		font-size: 6rem;
	}
}

h2.title-en-bl {
	font-size: clamp(1.6rem, calc((100vw - 900px) * 0.002 + 1.6rem), 1.8rem);
	padding-top: 4px;
	padding-left: clamp(24px, calc((100vw - 900px) * 0.059 + 24px), 30px);
	position: relative;
	text-align: left;
	font-weight: 500;
	width: 100%;
	margin-bottom: 40px;
	/* ↑暫定 */
}
h2.title-en-bl::before {
	content: attr(data-en) '';
	font-family: var(--en-font);
	font-size: clamp(3.4rem, calc((100vw - 900px) * 0.035 + 3.4rem), 7rem);
	text-transform: uppercase;
	font-weight: 500;
	display: block;
	line-height: 1;
	margin-bottom: 0;
}
h2.title-en-bl::after {
	content: '';
	display: block;
	width: clamp(12px, calc((100vw - 900px) * 0.029 + 12px), 15px);
	height: 100%;
	border-radius: 15px 15px 0 0;
	background: var(--main);
	position: absolute;
	top: 0;
	left: 0;
}
@container (max-width: 500px) {
	h2.title-en-bl {
		font-size: 1.6rem;
		padding-left: 24px;
	}
	h2.title-en-bl::before {
		font-size: 3.4rem;
	}
	h2.title-en-bl::after {
		width: 12px;
	}
}

.title-jp-bl {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: clamp(24px, calc((100vw - 900px) * 0.059 + 24px), 30px);
	position: relative;
	text-align: left;
	font-weight: 500;
	width: 100%;
	margin-bottom: 40px;
	/* ↑暫定 */
}
.title-jp-bl .post-title {
	font-size: clamp(2.4rem, calc((100vw - 960px) * 0.017 + 2.4rem), 4rem);
	font-weight: 500;
	display: block;
	line-height: 1.5;
}
.title-jp-bl .post-meta {
	line-height: 1.2;
	font-weight: 600;
	color: #999;
	font-size: clamp(1.2rem, calc((100vw - 960px) * 0.002 + 1.2rem), 1.4rem);
	margin-top: 8px;
}
.title-jp-bl::after {
	content: '';
	display: block;
	width: clamp(12px, calc((100vw - 900px) * 0.029 + 12px), 15px);
	height: 100%;
	border-radius: 15px 15px 0 0;
	background-color: var(--main);
	position: absolute;
	top: 0;
	left: 0;
}
@container (max-width: 500px) {
	.title-jp-bl {
		font-size: 1.6rem;
		padding-left: 24px;
	}
	.title-jp-bl::before {
		font-size: 3.4rem;
	}
	.title-jp-bl::after {
		width: 12px;
	}
}

h1.title-bl,
.title-bl {
	padding-top: 0.6em;
	padding-bottom: 0.6em;
	padding-left: clamp(24px, calc((100vw - 390px) * 0.105 + 24px), 40px);
	position: relative;
	line-height: 1.4;
	text-align: left;
	font-weight: 500;
	width: 100%;
	margin-bottom: clamp(80px, calc((100vw - 390px) * 0.261 + 80px), 120px);
	font-size: clamp(2.4rem, calc((100vw - 960px) * 0.017 + 2.4rem), 4rem);
	/* ↑暫定 */
}

h1.title-bl::after,
.title-bl::after {
	content: '';
	display: block;
	width: clamp(12px, calc((100vw - 390px) * 0.039 + 12px), 18px);
	height: 100%;
	border-radius: 15px 15px 0 0;
	background-color: var(--main);
	position: absolute;
	top: 0;
	left: 0;
}

.title-bb {
	position: relative;
	font-size: 1.4em;
	font-weight: 550;
	padding-bottom: 1em;
	margin: 3em 0 2em;
}
.title-bb::after {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 3px;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to right, var(--accent) 20%, #cccccc 20%);
}
.title-bb:first-child {
	margin-top: 0;
}

.--no-margin {
	margin-bottom: 0;
}

/* カリキュラムテーブル紹介--------------------------------------- */
.curriculum-img {
	position: relative;
}
.curriculum-img__inner {
	width: 90%;
	margin-inline: auto;
}
.curriculum-arrow {
	position: absolute;
	top: 52%;
	right: 78%;
	transform: translate(0, -50%);
	width: clamp(90px, calc((100vw - 390px) * 0.392 + 90px), 150px);
	height: auto;
}
@media screen and (min-width: 750px) {
	.curriculum-img__inner {
		width: 80%;
		max-width: 900px;
		margin-inline: auto;
		transform: translateX(5%);
	}
	.curriculum-arrow {
		top: auto;
		bottom: 0;
		right: 88%;
		width: clamp(90px, calc((100vw - 750px) * 0.598 + 90px), 160px);
		transform: translate(0, 10%);
	}
	@media screen and (min-width: 1300px) {
		.curriculum-arrow {
			top: auto;
			bottom: -10px;
			right: 85%;
			width: 160px;
			transform: translate(0, 0);
		}
	}
}

/* カリキュラムテーブル設定--------------------------------------- */
.curriculum-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* iOSぬるぬるスクロール対応 */
}

.crriculum-table {
	background-color: #fdfdfd;
	width: 100%;
	font-size: 0.85em;
	min-width: 600px; /* ここは実際のテーブル幅に応じて調整 */
	width: max-content; /* 中身に応じて伸びる */
}
@media screen and (min-width: 600px) {
	.curriculum-wrapper {
		overflow-x: visible;
		-webkit-overflow-scrolling: touch; /* iOSぬるぬるスクロール対応 */
	}
	.curriculum-table {
		background-color: #fdfdfd;
		width: 100%;
		font-size: 0.85em;
	}
}
.curriculum-table th {
	text-align: center;
	vertical-align: middle;
	background-color: var(--silver);
	font-weight: 500;
}
.curriculum-table td {
	vertical-align: middle;
	text-align: center;
}
.curriculum-table th,
.curriculum-table td {
	border: 1px solid #c9c9c9;
	padding: 0.5em;
}

/* ----------制服紹介---------- */
.uniform__wrapper {
	display: flex;
	flex-direction: column;
	gap: 40px;
	position: relative;
}

.uniform__item {
	position: relative;
	height: 100%;
}
.uniform__item::before,
.uniform__item::after {
	content: '';
	display: block;
	width: 70%;
	height: 50%;
	border-radius: 300px 300px 0 0;
	background-color: var(--green);
	position: absolute;
	bottom: 6%;
	z-index: -1;
}
.uniform__item::after {
	right: 60%;
}
.uniform__item::before {
	left: 60%;
}
.uniform__img {
	position: relative;
	width: 70%;
	height: 100%;
	margin: 0 auto;
	z-index: 1;
	padding: 0 0%;
}
.uniform__img::before {
	content: '';
	display: block;
	width: 120%;
	height: 90%;
	border-radius: 300px 300px 0 0;
	position: absolute;
	bottom: 6%;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: -1;
}
.--winter .uniform__img::before {
	background-color: var(--yellow);
}
.--summer .uniform__img::before {
	background-color: var(--blue);
}
.uniform__img img {
}

@media screen and (min-width: 900px) {
	.uniform__wrapper {
		display: flex;
		flex-direction: row;
		gap: 0;
		position: relative;
	}
	.uniform__item {
		flex: 1;
		z-index: 0;
	}
	.uniform__item::before,
	.uniform__item::after {
		height: 50%;
	}
	.uniform__item.--winter::before {
		content: none;
		right: 60%;
	}
	.uniform__item.--summer::after {
		left: 60%;
	}
	.uniform__item:nth-child(2) {
		flex: 1;
		transform: translateY(5%);
	}
	.uniform__img::before {
		width: 150%;
		height: 90%;
		border-radius: 600px 600px 0 0;
	}

	.unifrom-detail img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		aspect-ratio: 2 / 1;
	}
}

.one-shose {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-inline: auto;
	max-width: 1000px;
}
.one-shose__ttl {
	font-family: var(--jp-font);
	font-size: 2.4rem;
	font-weight: bold;
	color: var(--main);
	margin-bottom: 1em;
}
.one-shose__text {
}
.one-shose__img {
	width: 80%;
	margin: 0 auto 0;
	animation: kakukaku 1s alternate infinite steps(2);
}
.one-shose__img img {
	object-fit: cover;
	aspect-ratio: 1;
	object-position: center;
	border-radius: 50%;
}
@media screen and (min-width: 600px) {
	.one-shose {
		display: flex;
		flex-direction: row;
		gap: 40px;
		align-items: center;
	}
	.one-shose__text {
		flex: 1.5;
	}
	.one-shose__img {
		flex: 1;
	}
	.one-shose__img img {
		object-fit: cover;
		aspect-ratio: 1;
		object-position: center;
		border-radius: 50%;
	}
}

/* グラデュエーションポリシー */
.graduation-policy-body p {
	text-align: left;
}
@media screen and (min-width: 600px) {
	.graduation-policy-body p {
		text-align: center;
	}
}

/* 沿革 */
dl.timeline {
	padding: 0;
	font-size: 0.95em;
	line-height: 1.6;
}
.timeline dt {
	font-weight: 600;
	font-size: 1em;
}
.timeline dd {
	margin: 0.3em 0 1em 0;
}
/* PC（768px以上）で横並びにする */
@media (min-width: 768px) {
	.timeline {
		display: grid;
		grid-template-columns: 200px 1fr;
		row-gap: 1em;
		column-gap: 2em;
		align-items: start;
	}
	.timeline dt {
		margin-top: 0;
		text-align: right;
	}
	.timeline dd {
		margin: 0;
	}
}

/* 施設紹介 */

.facility-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px 16px;
}
.yamamoto-facility img {
	/* box-shadow: 4px 4px 0 var(--blue); */
}
.yamamoto-facility figcaption {
	margin-top: 16px;
}
.yamamoto-facility figcaption h3 {
	text-align: center;
	font-weight: 600;
	margin-bottom: 16px;
}
@media screen and (min-width: 600px) {
	.facility-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 60px;
	}
	.yamamoto-facility img {
		/* box-shadow: 0 0 0 1px var(--black); */
	}
	.yamamoto-facility figcaption {
		margin-top: 24px;
	}
}

/* ------------------------------------------- */
/* 年間スケジュール--------------------------------- */
/* ------------------------------------------- */

.event {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.event__item {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 40px;
}
.event__month-name {
	text-transform: capitalize;
	position: relative;
	flex: 3;
	font-family: var(--en-font);
	text-align: center;
	line-height: 1;
}
.event__month-name::before {
	content: attr(data-title);
	display: block;
	font-size: 3em;
	margin-bottom: 16px;
}
.event__month-name::after {
	content: '';
	display: block;
	width: 20%;
	height: 2px;
	background-color: var(--main);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0%, -50%);
}
.event__list {
	flex: 7;
	font-size: 0.9em;
	line-height: 2;
}
@media screen and (min-width: 600px) {
	.event {
		display: grid;
		grid-template-columns: repeat(2, minmax(auto, 500px));
		grid-template-rows: repeat(6, 1fr);
		grid-auto-flow: column;
		justify-content: center;
		gap: 20px;
	}
	.event__month-name {
		flex: 4;
	}
	.event__list {
		flex: 6;
	}
}

.dl-info {
	display: flex;
	flex-direction: column;
}
.dl-info > div {
	display: flex;
	padding: 24px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.dl-info dt {
	flex: 1;
	width: max-content;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.5);
}
.dl-info dd {
	flex: 3;
	font-weight: 500;
}

/* ---------進路関係--------- */
.career__events {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, auto));
}
.career__events li::before {
	content: '■ ';
}
/* ---------進路リスト--------- */
.shinro-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.shinro-list li {
	display: inline-block;
	font-size: 1.4rem;
	border-bottom: 1px solid silver;
}
.shinro-list li::before {
	content: '■';
}
@media screen and (min-width: 600px) {
	.shinro-list {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}
}

.career__wrapper {
	display: flex;
	flex-direction: column;
}
.chart__data {
	width: 100%;
}
.chart {
	width: 100%;
	height: auto; /* 高さは自動調整 */
	aspect-ratio: 1; /* 幅と高さの比率を指定 */
}
@media screen and (min-width: 600px) {
	.career__wrapper {
		flex-direction: row;
		gap: 60px;
	}
	.carrer__table {
		flex: 1;
	}
	.chart__data {
		width: auto;
		flex: 1;
	}
}

/* ---------イベント紹介（汎用グリッドなのであとで変更）--------- */
.facility-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 10px;
	margin-top: 80px;
}
.facility-item img {
	object-fit: cover;
	aspect-ratio: 3 / 2;
	position: relative;
}
.facility-item {
	position: relative;
}
.facility-item p:first-of-type {
	font-size: 1.6rem;
	line-height: 1.6;
	margin-top: 0.75em;
	text-align: center;
}
.facility-item p:last-child {
	font-size: 1.4rem;
	line-height: 1.6;
	margin-top: 0.75em;
	color: #696969;
}
@media screen and (min-width: 600px) {
	.facility-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 40px 20px;
		margin-top: 80px;
	}
}

/* -----------------クラブ一覧----------------- */
.club-list__items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}
@media screen and (min-width: 600px) {
	.club-list__items {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 60px 40px;
		list-style: none;
		padding: 0;
		margin: 0;
	}
}

.club-list__item {
	width: 100%;
}

.club-list__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.club-list__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: #f0f0f0;
}

.club-list__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: 0.3s;
}
.club-list__image:hover img {
	transform: scale(1.04);
}

.club-list__image.is-empty {
	background-color: #e0e0e0;
}

.club-list__title {
	margin-top: 0.5rem;
	text-align: left;
	position: relative;
	padding-left: 12px;
	padding-top: 5px;
	font-size: 0.9em;
	font-weight: 600;
	letter-spacing: 0.03em;
}
.club-list__title::before {
	content: attr(data-en);
	font-family: var(--en-font);
	text-transform: uppercase;
	display: block;
	font-weight: 500;
	color: var(--main);
	line-height: 1;
}
.club-list__title::after {
	content: '';
	display: block;
	width: 3px;
	height: 100%;
	background: var(--main);
	position: absolute;
	top: 0;
	left: 0;
}

.club-list__empty {
	font-style: italic;
	color: #999;
	padding: 1rem;
	text-align: center;
}

.simple-swiper {
	overflow: hidden;
	position: relative; /* ナビボタンとか置く場合もrelative入れとくといい */
}

.blog-swiper {
	width: 100%;
	overflow: hidden;
}

.swiper-slide {
	box-sizing: border-box;
}

/* クラブ活動シングルページ */
.single-club__photo img {
	object-fit: cover;
	object-position: center;
	aspect-ratio: 4 / 3;
}

.blog__list {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}
.blog-card {
	flex: 0 1 calc((100% - 2rem * 1) / 2);
	height: 100%;
	/* カードの中身の装飾は今まで通り */
	background: #fff;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
}

.blog-card a {
	color: inherit;
	display: block;
	text-decoration: none;
}

.blog-card.is-sticky .blog-card__title a::before {
	font-family: 'Font Awesome 6 Free';
	content: '\f08d'; /* fa-thumbtack */
	font-weight: 900; /* solidアイコン用 */
	margin-right: 0.4em;
	color: #e74c3c;
	display: inline;
}

.blog-card__image {
	overflow: hidden;
	border-radius: 0;
}
.blog-card__image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.blog__list--archives .blog-card__image img {
	aspect-ratio: 4 / 3;
}
.blog-card:hover .blog-card__image img {
	transform: scale(1.05);
}
.blog-card__body {
	padding: 1rem 0;
}
.blog-card__meta {
	display: flex;
	flex-direction: column-reverse;
	gap: 4px;
	margin-block-end: 8px;
}
.blog-card__body time {
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1;
	font-family: var(--en-font);
	font-weight: 500;
}
.blog-card__category-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.blog-card__category-list li {
	background-color: var(--main);
	color: #fff;
	padding: 0.5em 0.5em;
	border-radius: 4px;
	line-height: 1;
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
}
.blog-card__category-list li a {
	color: #fff;
	text-decoration: none;
}
.blog-card__title {
	font-size: clamp(1.4rem, calc((100vw - 960px) * 0.001 + 1.4rem), 1.5rem);
	font-weight: 500;
	line-height: 1.5;
	color: var(--black);
}
.blog-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
@media screen and (min-width: 1200px) {
	.blog-wrapper {
		display: grid;
		grid-template-columns: 1fr 320px;
		gap: 80px;
	}
	.blog__list {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
	}
	.blog-card {
		flex: 0 1 calc((100% - 2rem * 2) / 3);
		height: 100%;
		/* カードの中身の装飾は今まで通り */
		background: #fff;
		overflow: hidden;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	.blog-card__meta {
		display: flex;
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 8px;
		margin-block-end: 4px;
	}
}

.sidebar {
}
.latest-posts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.latest-posts .post-title {
	font-size: 1.4rem;
	line-height: 1.4;
}
.latest-posts .post-date {
	font-size: 0.85em;
	line-height: 1;
	font-weight: 600;
	padding-top: 4px;
}
.latest-posts li {
	padding: 8px 0;
	border-bottom: 1px solid #999;
	font-size: 0.9em;
}
.latest-posts li:last-child {
	border: none;
}
.latest-posts a {
	text-decoration: none;
}
.latest-posts__item a {
	display: flex;
	gap: 16px;
	align-items: center;
}
.latest-posts__item .thumbnail {
	flex: 1;
}
.latest-posts__item .thumbnail img {
	object-fit: cover;
	object-position: center;
	aspect-ratio: 1;
}
.latest-posts__item .post-body {
	flex: 2;
}

/* 重要なお知らせ */
.sidebar-important li {
	font-size: 1.4rem;
	line-height: 2;
}
/* カテゴリ一覧 */
.sidebar-category-list {
	font-size: 1.4rem;
}
.sidebar-category-list .cat-item {
	line-height: 2;
}
.sidebar-category-list .children {
	padding-left: 8px;
}
/* タククラウド */
.sidebar-tag-cloud a {
	display: inline-block;
	margin: 4px 6px;
	padding: 4px 8px;
	background-color: #f5f5f5;
	border-radius: 4px;
	text-decoration: none;
	color: #333;
	transition: background-color 0.3s;
	font-weight: 500;
}

.sidebar-tag-cloud a:hover {
	background-color: #ddd;
}

/* 時計表示 */
.clock__wrapper {
	display: none;
}
@media screen and (min-width: 600px) {
	.clock__wrapper {
		display: block;
		background-color: #cb876e;
		padding-top: 10px;
		padding-bottom: 20px;
		border-radius: 200px 200px 0 0;
	}
	.clock {
		position: relative;
		width: 150px;
		height: 150px;
		border-radius: 50%;
		margin: 50px auto;
		background: #eee;
	}

	.hand {
		position: absolute;
		top: 50%;
		left: 50%;
		transform-origin: 0% 50%;
		background: black;
	}

	/* 共通のクリップパス（とんがった三角形） */
	.hour,
	.minute {
		width: 60px;
		height: 8px;
		clip-path: polygon(100% 50%, 0 0, 0 100%);
	}

	/* 時針だけちょっと短く */
	.hour {
		width: 40px;
	}
}

.title-widget {
	background-color: var(--black);
	color: #fff;
	padding: 8px;
	line-height: 1.4;
	border-radius: 4px 4px 0 0;
	font-size: 0.85em;
}

.post-navigation {
	display: flex;
	justify-content: space-between;
	margin: 3em 0;
	border-top: 1px solid #999;
	gap: 30%;
}
.post-navigation__prev,
.post-navigation__next {
	font-weight: bold;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 2em;
}
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 2em;
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 8px;
	text-decoration: none;
	color: #333;
	font-weight: bold;
}

/* 現在ページだけハイライト */
.pagination .current {
	background: var(--main);
	color: #fff;
	border-color: var(--main);
}

/* 前へ・次へのリンクだけ違うスタイルに */
.pagination a.prev,
.pagination a.next {
	width: auto;
	height: auto;
	padding: 0 12px;
	border: none;
	background: none;
	color: #333;
}
.pagination .dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 4px;
	color: #999;
	font-size: 18px;
	font-weight: bold;
}

.faq {
	margin-inline: auto;
	max-width: 900px;
}
.faq__q {
	background-color: var(--silver);
	color: var(--main);
	font-weight: 600;
	padding: 10px;
	padding-left: 60px;
	position: relative;
}
.faq__q::before {
	content: 'Q.';
	position: absolute;
	top: 10px;
	left: 12px;
}
.faq__a {
	padding-left: 60px;
	position: relative;
	margin-top: 20px;
	margin-bottom: 40px;
	font-size: 1.2em;
}
.faq__a:last-child {
	margin-bottom: 0;
}
.faq__a::before {
	content: 'A.';
	position: absolute;
	top: 0;
	left: 12px;
}

/* フォーム全体 */
.wpcf7 {
	max-width: 600px;
	margin: 0 auto;
	padding: 40px 20px;
	background-color: #fff;
	border: 1px solid var(--dark);
}

/* 各フィールドのラッパー */
.wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 20px;
}

/* テキスト入力、テキストエリア、セレクトボックス */
.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 input[type='tel'],
.wpcf7 input[type='url'],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 0;
	font-size: 16px;
	box-sizing: border-box;
	background-color: #fff;
	transition: border-color 0.3s, background-color 0.3s;
}

/* フォーカス時の効果 */
.wpcf7 input[type='text']:focus,
.wpcf7 input[type='email']:focus,
.wpcf7 input[type='tel']:focus,
.wpcf7 input[type='url']:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	border-color: var(--accent);
	background-color: var(--sub);
	outline: none;
}

/* チェックボックス・ラジオボタン */
.wpcf7-form-control.wpcf7-checkbox label,
.wpcf7-form-control.wpcf7-radio label {
	display: inline-block;
	margin-right: 15px;
	font-size: 15px;
	cursor: pointer;
	color: var(--dark);
}

/* 送信ボタン */
.wpcf7 input[type='submit'] {
	background-color: var(--dark);
	color: #fff;
	border: none;
	padding: 12px 28px;
	font-size: 16px;
	cursor: pointer;
	letter-spacing: 0.05em;
	transition: background-color 0.3s, opacity 0.3s;
	border-radius: 0;
}

.wpcf7 input[type='submit']:hover {
	background-color: var(--accent);
	opacity: 0.9;
}

/* バリデーションエラー */
.wpcf7-not-valid-tip {
	color: var(--red);
	font-size: 14px;
	margin-top: 5px;
}

/* 送信完了メッセージ */
.wpcf7-mail-sent-ok {
	color: var(--accent);
	font-size: 16px;
	margin-top: 20px;
	text-align: center;
}

/* エラーメッセージ */
.wpcf7-validation-errors {
	color: var(--red);
	font-size: 16px;
	margin-top: 20px;
	text-align: center;
}