@charset "utf-8";
/********************************************************************

 メイン用スタイルシート

********************************************************************/

@import url("reset.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/********************************************************************
 全体設定
********************************************************************/

:root {
	--base-font-size: 16px;
	--hero-height: min(60vh, 600px);
}

html {
	/* scroll-behavior: smooth; */
	font-size: var(--base-font-size);

	/* ブラウザによる自動的なテキストサイズ調整を禁止する */
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

html,
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;

	/* 文字の端を滑らかにし、ブラウザ間の差異を減らす */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	letter-spacing: 0.02em;
}

body {
	font-family:
		"ヒラギノ丸ゴ Pro",
		"Hiragino Maru Gothic Pro",
		"メイリオ",
		Meiryo,
		Osaka,
		"ＭＳ Ｐゴシック",
		"MS PGothic",
		sans-serif;

	background: #fff;
	color: #444444;
	line-height: 1.8;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

figure,
dd,
nav {
	margin: 0;
}

nav {
	padding: 0;
}

table {
	border-collapse: collapse;
}

img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

iframe {
	width: 100%;
}

section + section {
	margin-top: var(--sp-lg);
}

section {
	margin-bottom: 20px;
}

.pc {
	position: absolute;
	display: none;
	visibility: hidden;
}

/* オーバーレイ */
#modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .45);
	z-index: 80;
}

.mb a {
	text-decoration: none;
}

.mb img {
	max-width: 100%;
	height: auto;
}

/********************************************************************
 メニュー
********************************************************************/

#menubar ul {
	display: flex;
	justify-content: space-around;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.6;
}

#menubar li {
	flex: 1;
	background: linear-gradient(#3498db 50%, #8b5cf6);
}

#menubar a {
	display: block;
	padding: 0.875rem 0;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

#menubar span {
	display: block;
	font-size: 0.6rem;
	opacity: .6;
}

@media (hover:hover) {

	#menubar li:hover {
		box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, .08);
	}

	#menubar li a:hover {
		transform: scale(1.02);
	}

}

#mainmenu li {
	position: relative;
}

.menu-desc {
	position: absolute;
	top: calc(100% + 0.625rem);
	left: 2%;

	width: 90%;
	padding: 0.8em 1em;

	background: #fff;
	border: 1px solid #d7dde7;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);

	color: #555;
	font-size: 0.8rem;
	line-height: 1.5;
	text-align: left;

	z-index: 100;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition: opacity .5s ease, visibility 0s linear .5s !important;
}

#mainmenu li:hover .menu-desc {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .5s ease, visibility 0s !important;
}

/********************************************************************
 ギャラリー
********************************************************************/

#galleryframe {
	overflow: auto;
	width: 95%;
	height: 18.75rem;
	margin: 1.25rem auto 0;
	padding: 1rem;

	background-color: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
	box-shadow: rgba(7, 23, 43, .7) 2px 2px 6px -1px inset;
}

#galleryframe dl {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.375rem;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#galleryframe dt {
	grid-column: 1;
	display: flex;
	align-items: center;
	position: relative;

	padding: 0.5rem 0;

	white-space: nowrap;
	font-weight: bold;
	color: #333;
}

#galleryframe dd {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;

	margin: 0;
	padding: 0.5rem 0;

	word-break: break-all;
}

#galleryframe dd span {
	display: block;
	margin-top: 0.25rem;

	color: #dd3333;
	font-size: 0.9rem;
	font-weight: normal;
	line-height: 1.3;
}

#galleryframe dd::after {
	content: "";
	position: absolute;
	left: -12.5rem;
	right: 0;
	bottom: 0;

	height: 1px;
	background: #e2e8f0;
	z-index: 1;
}

#galleryframe dd a {
	color: #0066cc;
	line-height: 1.3;
	text-decoration: none;
}

#galleryframe dd a:hover {
	text-decoration: underline;
}

#galleryframe .current {
	font-weight: bold;
	outline: none !important;
}

/* ギャラリー用ボックス */

.gallery-content {
	background-image: url("/images/gallery/cork.jpg") !important;
	background-repeat: repeat !important;
	background-attachment: fixed !important;
	background-color: #cd9a62 !important;
	margin: 0 4px 4px 0;
	padding: 15px 0;
	border-radius: 6px;
	box-shadow: rgba(7,23,43,0.7) 4px 3px 9px -1px;
}

.galleryBox {
	display: flex;
	flex-direction: column; /* タグの順番通りに上から下へ並べる */
	align-items: center;
	margin: 20px auto;
	padding: 15px;
	width: 327px;
	box-sizing: border-box;
}

/* 画像を包んでいる「裸のdiv」の設定 */

.galleryBox > div:first-child:not(.galleryText),
.galleryBox > div:last-child:not(.galleryText) {
	display: block !important;
	flex-shrink: 0 !important;
	width: auto !important;
	height: auto !important;
	isolation: isolate !important; 
	position: relative !important;
	padding-bottom: 8px !important;
}

/* 画鋲の合成 */

.galleryBox > div:first-child:not(.galleryText)::before,
.galleryBox > div:last-child:not(.galleryText)::before {
	content: "";
	position: absolute !important;
	top: -1px;
	left: 50%;

	display: block !important;

	width: 24px;
	height: 24px;

	background: url("/images/gallery/thumbtack.svg") center / contain no-repeat !important;

	transform: translateX(-50%);
	z-index: 999 !important;
}

/* 写真のめくれ */

.galleryBox > div:first-child:not(.galleryText)::after,
.galleryBox > div:last-child:not(.galleryText)::after {
	content: "" !important;
	position: absolute !important;
	height: 12px !important; 
	width: 60% !important; 
	bottom: 17px !important;
	box-shadow: 0 10px 4px rgba(0, 0, 0, 0.45) !important;
	z-index: -1 !important;
}

/* 画像自体のスタイル（サイズ絶対固定） */
.galleryPhoto {
	background-color: #fff;
	padding: 6px;
	display: block !important;
	position: relative !important;
	z-index: 1 !important; 
	box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px 0px !important;
	/* ブラウザによる自動縮小を止める */
	width: attr(width px) !important;
	height: attr(height px) !important;
	flex-shrink: 0 !important;
	max-width: none !important;
	max-height: none !important;
	box-sizing: border-box;
}

/* 横向き写真（315x235）のサイズ維持 */
.galleryPhoto[width="315"] {
	min-width: 315px !important;
	min-height: 235px !important;
}

/* 縦向き写真（235x315）のサイズ維持 */
.galleryPhoto[width="235"] {
	min-width: 235px !important;
	min-height: 315px !important;
}

/* ワイド（縦）写真（177x315）のサイズ維持 */
.galleryPhoto[height="177"] {
	min-width: 315px !important;
	min-height: 180px !important;
}

/* コメント */

.galleryText {
	width: 100%;
	padding: 0.9375rem 0 0.3125rem;

	box-sizing: border-box;

	font-size: 0.95rem;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	color: #000 !important;

	text-shadow:
		1px 1px 2px #fff,
		-1px 1px 2px #fff,
		1px -1px 2px #fff,
		-1px -1px 2px #fff,
		0 0 4px #fff !important;
}

/* 写真の傾斜 */

.r-3 { transform: rotate(-1.5deg); }
.r-2 { transform: rotate(-1deg); }
.r3   { transform: rotate(1.5deg); }
.r2   { transform: rotate(1deg); }

/* めくれ用の陰 */
/* めくれ用の陰の傾斜 */
/* 画像が真っ直ぐ */
.galleryBox > div:not(:has(.r2)):not(:has(.r3)):not(:has(.r-2)):not(:has(.r-3))::after {
	bottom: 17px !important; right: 4px !important; left: auto !important;
	transform-origin: left bottom !important;
	transform: rotate(1.5deg) !important;
}

/*画像が左に1度傾く（r-2） */
.galleryBox > div:has(.r-2)::after {
	bottom: 10px !important; right: 4px !important; left: auto !important;
	transform-origin: left bottom !important;
	transform: rotate(1.2deg) !important;
}

/* 画像が左に1.5度傾く（r-3）*/
.galleryBox > div:has(.r-3)::after {
	bottom: 65px !important; right: 4px !important; left: auto !important;
	transform-origin: left bottom !important;
	transform: rotate(1.5deg) !important;
}

/* 画像が右に1度傾く（r2）*/
.galleryBox > div:has(.r2)::after {
	bottom: 10px !important; left: 4px !important; right: auto !important;
	transform-origin: right bottom !important;
	transform: rotate(-1.2deg) !important;
}

/* 画像が右に1.5度傾く（r3） */
.galleryBox > div:has(.r3)::after {
	bottom: 0px !important; left: 4px !important; right: auto !important;
	transform-origin: right bottom !important;
	transform: rotate(-1.0deg) !important;
}

/********************************************************************
 リンクテキスト
********************************************************************/

a {
	color: #555;
	transition: color .3s;
}

a:hover {
	color: #002ade;
}

/********************************************************************
 コンテナ
********************************************************************/

#container {
	max-width: 1500px;
	margin: 0 auto;
}

/********************************************************************
 ヘッダ
********************************************************************/

header {
	position: fixed;
	top: 0;
	z-index: 50;

	display: flex;
	width: 100%;
	padding: 0.625rem 3%;

	line-height: 1;

	background: #fff;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .1);
}

header #logo {
	width: 100%;
	min-width: 270px !important;
}

#tel {
	font-size: 1.3rem;
}

#headerContact {
	float: right;
	width: 100%;
	height: 3.125rem;
	margin-top: 0.3125rem;
}

#headerContact ul {
	float: right;
	width: 6.875rem;
	margin-right: 0.3125rem;
}

#headerContact ul li {
	float: left;
	margin-left: 0.3125rem;
}

#contents-top {
	padding: 0.625rem 0 0;
}

#contents {
	margin-top: 4.0625rem;
	padding: 0.625rem 0.625rem 0;
}

#headerContact mb {
	margin-left: 6.25rem;
}

.no-transition {
	transition: none !important;
}

/* コンタクトアイコンエリア全体の枠 */

.nav-contact {
	display: flex;
	justify-content: center;
	gap: 3.125rem;

	width: 100%;
	margin-top: 1.25rem;

	border-top: 1px solid #fff;
	box-shadow: 0 -1px 0 #ccc;
}

/* 各アイコンボタンの基本設定 */

.contact-item {
	display: flex;
	flex-direction: column;
	align-items: center;

	margin-top: 0.625rem;

	transition: transform .2s;
}

.contact-item:active {
	transform: scale(.9);
}

/* コンタクトアイコン */

.contact-item img {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 3.125rem;
	height: 3.125rem;
}

/* ラベルテキスト */

.contact-item .label {
	display: block !important;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	font-weight: bold;
	color: #666;
}

/********************************************************************
 ハンバーガーアイコン設定
********************************************************************/

#menu_trigger {
	position: fixed;
	top: 10px;
	right: 15px;
	z-index: 100;

	display: none;
	width: 60px;
	height: 60px;

	cursor: pointer;

	background: #fff;
	border: 4px solid #3498db;
	border-radius: 6px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .2);

	opacity: .8;

	transition: filter .3s;
}

@media (hover:hover) {

	#menu_trigger:hover {
		filter: brightness(1.5);
	}

}

#menu_trigger span {
	position: absolute;
	left: 5px;
	width: 42px;
	height: 4px;
	background: #3498db;
	border-radius: 3px;
	transition: transform .4s, opacity .4s;
}

#menu_trigger span:nth-child(1) {
	top: 13px;
}

#menu_trigger span:nth-child(2) {
	top: 24px;
}

#menu_trigger span:nth-child(3) {
	top: 35px;
}

#menu_trigger.active span:nth-child(1) {
	transform: translateY(0.6875rem) rotate(-405deg);
}

#menu_trigger.active span:nth-child(2) {
	opacity: 0;
}

#menu_trigger.active span:nth-child(3) {
	transform: translateY(-11px) rotate(405deg);
}

/********************************************************************
 検定バナー
********************************************************************/

#img-kentei {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;

	width: 100%;
	padding: 1.25rem 0;
	gap: 0.9375rem;

	box-sizing: border-box;
}

#img-kentei img {
	flex-shrink: 0;
}

/********************************************************************
 ダウンロード
********************************************************************/

.download {
	margin: 0.9375rem 0.3125rem;
	padding: 1rem 1rem 0;

	background: #f7f7f7;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
}

.download p a {
	display: inline-flex;
	align-items: center;

	padding: 0;

	color: #333;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
}

.download p a::before {
	content: "";

	display: inline-block;
	flex-shrink: 0;

	width: 24px;
	height: 24px;
	margin-right: 0.5rem;

	background: url("/images/PDF_file_icon_svg.webp") center / contain no-repeat;
}

.download p a:hover {
	text-decoration: underline;
}

/********************************************************************
 塾だよりレイアウト（スマホ時は背景重ね / PC時は左右並び）
********************************************************************/

.jukudayori-container {
	position: relative;
	width: 95%;
	margin: 1.25rem auto;
	box-sizing: border-box;
}

/* 画像を最背面に配置して薄く透けさせる */

.jukudayori-img {
	position: absolute;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	opacity: .3;
	pointer-events: none;
	z-index: 0;
}

.jukudayori-img img {
	width: auto;
	height: auto;
	max-width: 85%;
	max-height: 85%;
	object-fit: contain;
}

/* ダウンロードリストを前面に出す */

.jukudayori-dl {
	position: relative;
	z-index: 2;
	overflow: hidden;

	margin: 1.25rem 0;
	padding: 0.625rem 0.3125rem;

	border: 1px solid #e5e5e5;
	border-radius: 6px;
}

.jukudayori-dl p,
.jukudayori-dl a {
	position: relative;
	z-index: 1;
}

.jukudayori-dl a {
	font-size: clamp(0.93rem, 3vw, 1rem);
	font-weight: bold;
	line-height: 2.2;
}

.jukudayori-dl p a {
	display: inline-flex;
	align-items: center;

	color: #333;
	text-decoration: none;
	letter-spacing: -0.02em;
}

/* Adobeアイコンを表示 */

.jukudayori-dl p a::before {
	content: "";

	display: inline-block;
	flex-shrink: 0;

	width: 24px;
	height: 24px;
	margin-right: 0.5rem;

	background: url("/images/PDF_file_icon_svg.webp") center / contain no-repeat;
}

.jukudayori-dl p a:hover {
	text-decoration: underline;
}

/********************************************************************
 mainブロック設定
********************************************************************/

main {
	order: 0;
	margin: 0.9375rem 0 1.25rem;
}

main p {
	margin: 0 0.625rem 0.3125rem;
}

main h2 {
	min-height: 2.5rem;
	margin: 0 0 1.25rem;
	padding: 0.3125rem;

	background: #f7f7f7;
	border: 1px solid #e5e5e5;
	border-radius: 6px;

	font-size: clamp(1.125rem, 3.8vw, 1.25rem);
	font-weight: bold;
	line-height: 2.4;
	white-space: nowrap;
}

main h2 img {
	margin-right: 1rem;
	flex-shrink: 0;
}

main h3 {
	display: flex;

	min-height: 2.5rem;
	margin: 0.625rem 0 1.25rem;
	padding: 0.625rem 1.25rem;

	background: #e0f2fe;
	border: 1px solid #e5e5e5;
	border-radius: 6px;

	font-size: clamp(1rem, 3.8vw, 1.125rem);
	font-weight: bold;
	line-height: 1.3;

	/* box-shadow: 0 2px 2px rgba(0,0,0,0.1); */
}

main h4 {
	display: flex;
	align-items: center;
	position: relative;

	min-height: 2.25rem;
	margin: 0 0 1.25rem;
	padding: 0.5rem 1.25rem;

	background: #fafad2;
	border: 1px solid #b3d465;
	border-radius: 6px;
	box-shadow: 0 2px 5px rgba(0,0,0,.04);

	color: #800000;
	font-size: clamp(1rem, 3.8vw, 1.125rem);
	font-weight: bold;
	line-height: 1.2;
}

main h5 {
	display: flex;
	align-items: center;
	position: relative;

	min-height: 1.875rem;
	margin: 0 0 1.25rem;
	padding: 0.5rem 0.625rem 0.5rem 1.25rem;

	background: transparent;
	border-left: 6px solid #b3d465;
	border-bottom: 2px solid #e2f0c2;

	color: #333;
	font-size: clamp(1rem, 3.8vw, 1.125rem);
	font-weight: bold;
	line-height: 1.1;
}

.check-list {
	list-style: none;

	margin-bottom: 0.625rem;
	padding: 0.625rem 0.625rem 0;

	background: #e0f2fe;
	border-radius: 6px;
	box-shadow: 0 2px 2px rgba(0,0,0,.1);
}

.check-list li {
	position: relative;

	padding: 0 0.625rem 0.5rem 3.125rem;

	background: url("/images/icon_check.svg") no-repeat 0 -5px / 40px 40px;

	color: #333;
	font-size: clamp(1rem, 3.8vw, 1.125rem);
	font-weight: bold;
	line-height: 1.7;
}

.reverse {
	margin-right: 0.5rem;
	padding: 0 0.5rem;

	background: gray;
	border-radius: 3px;

	color: #fff;
}

.underline {
	text-decoration: underline red 2px;
	text-underline-offset: 4px;
}

.check-list li:last-child,
.check-list_sub li:last-child {
	margin-bottom: 0;
}

.check-list_sub {
	list-style: none;

	margin-bottom: 0.625rem;
	padding: 0.625rem 0.625rem 0 0.9375rem;
}

.check-list_sub li {
	position: relative;

	margin-bottom: 0.9375rem;
	padding: 0 1.875rem 0 2.5rem;

	background: url("/images/icon_note.svg") no-repeat 0 -4px / 30px 30px;

	color: #333;
	font-size: clamp(1rem, 3.8vw, 1.125rem);
	font-weight: bold;
	line-height: 1.8;

	text-decoration: underline red 2px;
	text-underline-offset: 4px;
}

.indent1 {
	margin-left: 1rem;
}

/********************************************************************
 sub・sideブロック設定
********************************************************************/

#sub {
	order: 1;
}

#side {
	order: 2;
}

#sub,
#side {
	font-size: 0.9rem;
}

#sub h2,
#side h2 {
	margin-bottom: 0.625rem;
	padding: 0.25rem 0;

	align-items: center;
	vertical-align: middle;

	color: #fff;
	font-size: 1.1rem;

	background-image: linear-gradient(#3498db 50%, #8b5cf6);
	border-radius: 2px;
}

#sub h2::before,
#side h2::before {
	content: "";
}

#sub .submenu,
#side .submenu {
	margin-bottom: 0.625rem;
	text-align: center;
}

.submenu img {
	padding: 0.3125rem 0;
}

.submenu a:hover,
.side a:hover {
	opacity: .7;
}

/* 教室紹介用 */

.school_info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 0.625rem 0.9375rem;

	margin: 0 0.625rem 0.625rem;
	padding: 0.9375rem;

	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
}

.school_info img.photo4 {
	grid-column: 1;
	grid-row: 1 / span 2;

	width: 100%;
	max-width: 160px;
	height: auto;

	aspect-ratio: 4 / 3;
	object-fit: cover;

	border-radius: 4px;
	justify-self: center;
}

.school_info span {
	grid-column: 2;
	grid-row: 1;

	border-bottom: 2px solid #ccc;

	color: #333;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
}

.school_info .addr {
	grid-column: 2;
	grid-row: 2;

	display: flex;
	flex-direction: column;
	justify-content: center;

	width: 100%;

	line-height: 1.5;
	font-size: 0.75rem;
	text-align: center;
	white-space: nowrap;
}

/* 電話マーク */

.school_info .addr .mb a::after,
.map .mb a::after {
	content: "\f098";

	display: inline-block;
	padding-left: 0.3125rem;

	font-family: "Font Awesome 5 Free";
	font-size: 1rem;
	font-weight: bold;
	color: #4CC764;
}

/********************************************************************
 サブページのトップ画像
********************************************************************/

.image-container {
	position: relative;
	overflow: hidden;

	width: 100%;
	margin: 0 0 1.25rem;

	border-radius: 6px;

	aspect-ratio: 1408 / 768;
}

.responsive-img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	z-index: 10 !important;
}

.image-overlay-text {
	position: absolute;

	width: 100%;
	padding: 1.875rem 1.25rem 1.25rem;

	box-sizing: border-box;

	color: #1a2a3a;
}

.image-overlay-text h6 {
	margin: 0 0 0.5rem;
	padding: 0;

	font-size: clamp(2.125rem, 4.5vw, 2.625rem);
	font-weight: bold;
	letter-spacing: .05em;

	text-shadow:
		0 0 4px rgba(255,255,255,.9),
		0 0 8px rgba(255,255,255,.8),
		0 0 12px rgba(255,255,255,.7);

	opacity: 0;
	transform: translateY(10px);
	animation: fadeUpText 1s ease-out forwards;
}

.image-overlay-text p {
	margin: 0;
	padding: 0;

	font-size: clamp(0.875rem, 4.5vw, 1rem);
	font-weight: bold;
	line-height: 1.5;

	text-shadow:
		1px 1px 0 #fff,
		-1px 1px 0 #fff,
		1px -1px 0 #fff,
		-1px -1px 0 #fff;

	opacity: 0;
	transform: translateY(10px);
	animation: fadeUpText 1s ease-out forwards;
	animation-delay: .3s;
}

.map {
	margin-top: 1.25rem;
}

.address {
	margin-bottom: 0.625rem;
	font-size: 1.1rem;
}

.contact {
	display: flex;
	gap: 1.875rem;
	margin-bottom: 1.25rem;
}

.contact span {
	margin-left: 1em;
}

.map-container {
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
}

.map-card {
	display: flex;
	flex: 1;
	flex-direction: column;

	overflow: hidden;

	background: #fff;
	border: 1px solid #b3d465;
}

.map-image {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;

	padding: 1.25rem;
}

.map-title {
	padding: 0.25rem;

	background: #fafad2;
	border-bottom: 1px solid #b8d9ef;

	color: #2b5c7f;
	text-align: center;
	letter-spacing: .05em;
}

.map-card img {
	display: block;
	width: 100%;
	max-width: 500px;
	margin: auto;
}

.map-card iframe {
	display: block;

	width: 100%;
	height: 100%;
	min-height: 360px;

	border: none;
}

.map-button {
	margin-top: 1.125rem;
	text-align: center;
}

.map-button a {
	display: inline-block;

	padding: 0.625rem 1.5rem;

	background: #8dbfe5;
	border: 1px solid #7db2db;
	border-radius: 3px;

	color: #fff;
	font-weight: bold;
	text-decoration: none;

	transition: .25s;
}

@media (hover:hover) {

	.map-button a:hover {
		background: #7db2db;
		transform: translateY(-1px);
	}

}

/********************************************************************
 サイトマップ
********************************************************************/

.sitemap {
	list-style:none;
	margin:0 0 2rem;
	padding: 0 2rem;
}

.sitemap_sub {
	padding: 0 2rem;
}

.sitemap li {
	border-bottom:1px dotted #ccc;
}

.sitemap>li {
	font-size: 1.1rem;
}

.sitemap a, .sitemap_sub a {
	display:block;
	padding:.8rem 1rem;
	text-decoration:none;
	font-weight:bold;
}

.sitemap_sub a::before{
	content:"▶ ";
	color:#3498db;
}

.sitemap a:hover {
	background:#f7f7f7;
}

/********************************************************************
 フッター設定
********************************************************************/

footer {
	padding: 0.625rem;

	background: #3498db;

	color: #fff;
	font-size: 0.6rem;
	text-align: center;
}

footer a {
	color: #fff;
	text-decoration: none;
}

footer a:hover {
	color: #fff;
}

.footer-links {
	margin: 0.4rem 0 0.3rem;
	font-size: 0.75rem;
}

.footer-links a:hover {
	text-decoration: underline;
}

.copyright {
	font-size: 0.65rem;
}

.border-dent {
	position: relative;
}

.border-dent::after {
	content: "";

	position: absolute;
	top: 20%;
	right: 0;

	height: 60%;

	border-right: 1px solid #ccc;
	box-shadow: 1px 0 0 #fff;
}

/********************************************************************
 スライドショー（Swiper）
********************************************************************/

.mainimg {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.swiper {
	width: 100%;
	aspect-ratio: 2.5 / 1;
}

.swiper-slide {
	position: relative;

	display: flex !important;
	align-items: center;
	justify-content: center;

	height: 100%;
	overflow: hidden;
}

.swiper-slide::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 1;

	background-position: center;
	background-size: cover;

	transform: scale(1);
	transition: transform 6s linear;
}

.slide01::before {
	background-image: url("/images/top_image_l_01.jpg");
}

.slide02::before {
	background-image: url("/images/top_image_l_02.jpg");
}

.slide03::before {
	background-image: url("/images/top_image_l_05.jpg");
}

.slide_summer::before {
	background-image: url("/images/top_image_summer.jpg");
}

.swiper-slide-active::before {
	transform: scale(1.15);
}

/* 画像を少し暗くするオーバーレイ */

.swiper-slide::after {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 2;

	background: rgba(0, 0, 0, .2);
}

/* 重ねるテキスト */

.slide-content {
	position: relative;
	z-index: 3;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	color: #fff;
	text-align: center;
	text-shadow: 2px 2px 10px rgba(0, 0, 0, .5);
}

.slide-content h2 {
	margin-bottom: 0.625rem;
	font-size: clamp(2.5rem, 5vw, 3em);
	font-weight: bold;
	opacity: 0;
	transform: translateY(10px);
}

.slide-content .col1,
.slide-content .col2  {
	text-shadow:
	 -1px -1px 0 #fff,
	  1px -1px 0 #fff,
	 -1px  1px 0 #fff,
	  1px  1px 0 #fff;
}

.slide-content .col1 {
	color: #1f4e79;
}

.slide-content .col2 {
	color: #b71c1c;
}

/* Swiperがアクティブになったら表示 */

.swiper-slide-active .slide-content h2 {
	animation: fadeUpText 1s ease-out forwards;
}

/* 1行ずつタイミングをずらす */

.swiper-slide-active .slide-content h2:nth-child(1) {
	animation-delay: 0s;
}

.swiper-slide-active .slide-content h2:nth-child(2) {
	animation-delay: 1s;
}

.swiper-slide-active .slide-content h2:nth-child(3) {
	animation-delay: 2s;
}

/* 文字のフェード */

@keyframes fadeUpText {

	0% {
		opacity: 0;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}

}

.slide-button {
	position: absolute;
	left: 50%;
	bottom: 50px;
	z-index: 4;

	transform: translateX(-50%);

}

/********************************************************************
 クラス紹介
********************************************************************/

.class_info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 0.75rem 0.9375rem;

	margin: 0 0.625rem 0.625rem;
	padding: 0.3125rem 0.9375rem;

	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
}

.class_info img {
	grid-column: 1;
	grid-row: 1 / span 3;

	order: 0;
	align-self: center;
	justify-self: center;

	height: 100%;
	max-height: 100px;

	padding: 0;

	object-fit: cover;
	border-radius: 4px;
}

.class_text {
	grid-column: 2;
	grid-row: 1;

	order: 0;
	width: 100%;
}

.class_info .class_text span {
	margin-left: 0;

	color: #333;
	font-size: 1rem;
	font-weight: bold;
}

.class_text span {
	display: block;

	margin: 0 0 0.625rem;
	padding: 0 0.625rem;

	border-bottom: 2px solid #ccc;
}

.class_info .class_text p {
	margin: 0;

	color: #666;
	font-size: 0.85rem;
}

.class_info a {
	display: block;
	grid-column: 2;
	grid-row: 2;

	order: 0;
	justify-self: center;

	width: 100%;
	max-width: 150px;
	padding: 0.125rem;

	background-image: linear-gradient(#ef4444 50%, #b91c1c);
	border-radius: 4px;

	color: #fff;
	font-size: 0.9rem;
	text-align: center;
	text-decoration: none;
}

.class_info a::after {
	content: "\f0a9";

	display: inline-block;
	padding-left: 0.625rem;

	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	color: #fff;

	transform: scale(1.4);
	transition: transform .3s;
}

.class_info a:hover::after {
	transform: scale(1.5);
}

/********************************************************************
 更新情報
********************************************************************/

#new {
	display: grid;
	grid-template-columns: 10rem 1fr;
	gap: 0.25rem 0;

	margin: 0 0 1.25rem;
	padding: 0 0.3125rem;

	font-size: clamp(0.93rem, 3vw, 1.1rem);
}

#new dt,
#new dd {
	padding: 0.3125rem 0;
}

#new dt {
	display: flex;
	flex-direction: column;
	justify-content: center;

	grid-column: 1;
	gap: 0;

	border-bottom: 1px dotted #999;
}

#new dt span {
	display: inline-block;

	width: 85%;
	padding: 0.125rem 0.5rem;

	border-radius: 3px;

	color: #fff;
	font-size: 75%;
	line-height: 1.4;
	text-align: center;
}

#new dd {
	grid-column: 2;

	margin-left: 0;

	line-height: 1.6;

	border-bottom: 1px dotted #999;
}

#new dt span.icon-bg1 {
	background: #002ade;
}

#new dt span.icon-bg2 {
	background: #e57373;
}

#new dt span.icon-bg3 {
	background: #00552e;
}

#new a {
	font-weight: bold;
	text-decoration: none;
}

#new a:hover {
	text-decoration: underline;
}

/********************************************************************
 過去の更新情報
********************************************************************/

#whatsnew {
	overflow: auto;

	width: 95%;
	height: 27.7rem;
	margin: 1.25rem auto;
	padding: 1rem;

	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 4px;

	box-shadow: rgba(7, 23, 43, .7) 2px 2px 6px -1px inset;
}

/*******************************************************************
 テーブル
*******************************************************************/

caption {
	font-size: clamp(0.8rem, 3.8vw, 0.875rem);
	font-weight: bold;
	text-align: center;
	text-indent: 0;
}

/* 文章中のテーブル・スタイル */

.text_table {
	table-layout: fixed;

	width: 95%;
	margin: 0 auto 1.875rem;

	border: 4px solid #f1fafe;
	border-spacing: 1px;

	font-size: clamp(0.75rem, 3.8vw, 0.875rem);
	line-height: 1.8;
	text-align: center;
	text-indent: 0;
}

.text_table tr {
	background: #10a0e0;
}

.text_table th {
	border: 4px solid #fff;

	color: #fff;
	font-weight: bold;
	line-height: 2.5;
	text-align: center;
}

.text_table td {
	padding: 1em;

	background: #f0f8ff;
	border: 4px solid #fff;
}

.fix_width1 {
	width: 10%;
}

.fix_width2 {
	width: 25%;
}

/********************************************************************
 ボタン
********************************************************************/

.btn {
	text-align: center;
}

.btn a,
.btn input {
	display: inline-block;

	padding: 0.3125rem 1.25rem;

	background: #DE4616;
	border: none;
	border-radius: 3px;

	color: #fff;
	font-size: 1rem;
	letter-spacing: 0.1rem;
	text-decoration: none;
}

.btn a:hover,
.btn input:hover {
	cursor: pointer;
	filter: brightness(1.1);
	color: #fff;
}

.btn.arrow a::after {
	content: "\f0a9";

	display: inline-block;
	padding-left: 0.9375rem;

	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	color: #fff;

	transform: scale(1.4);
	transition: transform .3s;
}

.btn.arrow a:hover::after {
	transform: scale(1.6);
}

/********************************************************************
 先頭へ戻るボタン
********************************************************************/

#goTop {
	position: fixed;
	right: 0.3rem;
	bottom: 0.3rem;
	z-index: 10;

	width: 4.0rem;
	height: 4.0rem;

	cursor: pointer;

	background: url("/images/icon_gotop.svg") no-repeat;

	opacity: 0;
	transition: all 1s;
}

#goTop a {
	display: none;
	text-indent: -9999px;
}

/*******************************************************************
 ダイアログ（モーダルウインドウ）用
*******************************************************************/

#modal-content {
	position: fixed;
	z-index: 99;

	display: none;

	width: auto;
	margin: 0 auto;
	padding: 1.25rem;

	background: #fff;
	border: 1px solid #dcdcdc;
}

#modal-content .button {
	background: #3498db;
	color: #fff;
}

#modal-content-innar {
	width: 100%;
	margin: 0 auto;
}

#modal-overlay2 {
	position: fixed;
	inset: 0;
	z-index: 50;

	display: none;
	width: 100%;
	height: 120%;

	background: rgba(0, 0, 0, .75);

	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/*******************************************************************
 ブリンク
*******************************************************************/

.blinking {
	animation: blink 1s ease-in-out infinite alternate;
}

@keyframes blink {

	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}

}

/********************************************************************
 その他
********************************************************************/

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.bold { font-weight: bold; }

.caution { color: #ff0000; font-weight: bold; }

.img_center {
	display: block;
	margin: 0 auto;
}

.photo4 {
	display: block;
	box-sizing: border-box;

	margin: 0 auto 0.3125rem;
	padding: 0.375rem !important;

	background: #fff;
	border: 1px solid #dcdcdc;
}

/********************************************************************
 スクロールトリガーアニメーション
********************************************************************/

.fade-in-up {
	opacity: 0;
	transform: translateY(2.5rem);
	transition: none;
}

.fade-in-up.is-show {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 1s ease,
		transform 1s ease;
}

/********************************************************************
 横スクロール・タブ型メニュー
********************************************************************/

.page-menu-scroll-wrapper {
	position: relative;
	overflow: hidden;

	width: 100%;
	margin: 0 auto 0.9375rem;

	background: #3498db;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .08);
}

.page-menu-scroll {
	display: flex;
	overflow-x: auto;

	width: 100%;

	scroll-behavior: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.page-menu-scroll::-webkit-scrollbar {
	display: none;
}

.scroll-queue {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;

	width: max-content;
	white-space: nowrap;
}

.scroll-queue a {
	display: block;
	flex: 0 0 9.375rem;

	box-sizing: border-box;
	width: 9.375rem;
	min-width: 9.375rem;
	padding: 1rem 0;

	border-right: 1px solid rgba(255, 255, 255, .3);

	color: #fff;
	font-size: 0.875rem;
	font-weight: bold;
	letter-spacing: .05em;
	text-align: center;
	text-decoration: none;

	transition:
		background-color .2s ease,
		color .2s ease,
		transform .2s ease;
}

/* 全項目が画面内に収まる場合 */

.page-menu-scroll.is-fit {
	overflow-x: hidden;
}

.page-menu-scroll.is-fit .scroll-queue {
	display: none;
}

/* 中央の本体だけ表示 */
.page-menu-scroll.is-fit .scroll-queue-main {
	display: flex;
	flex: 0 0 100%;

	width: 100%;
}

/* リンクを均等幅にする */
.page-menu-scroll.is-fit .scroll-queue-main a {
	flex: 1 1 0;

	width: auto;
	min-width: 0;
}

/* 右端の線を消す */
.page-menu-scroll.is-fit .scroll-queue-main a:last-child {
	border-right: none;
}

/* 矢印 */

.scroll-queue a::after {
	content: "\f0a9";

	display: inline-block;
	padding-left: 0.9375rem;

	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	color: #fff;

	transform: scale(1.1);
	transition: transform .3s;
}

.scroll-queue a:hover {
	background: #2980b9;
	color: #fafad2;
}

.scroll-queue a:active {
	background: #b3d465 !important;
	color: #fff !important;
	transform: scale(.95);
}

/********************************************************************
 スマホ・タブレットの設定
********************************************************************/

@media (max-width: 999px) {

	html,
	body {
		font-size: 15px;
	}

	.mb img {
		max-width: 100%;
		height: auto;
	}

	.mainimg {
		position: fixed !important;
		top: 80px !important;
		width: 100%;
		height: 500px !important;
		max-height: 500px !important;
		overflow: hidden;
		transform: translate3d(0, 0, 0);
	}

	.swiper {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}

	.swiper-wrapper,
	.swiper-slide {
		height: 100%;
	}

	#mainmenu .menu-desc {
		position: static;

		display: block;
		visibility: visible;
		opacity: 0;		/* リサイズで残像が出るのを防ぐ */

		margin-top: 0.25rem;

		color: #666;
		font-size: 0.8rem;
	}

	#mainmenu.open .menu-desc {
		opacity: 1;
	}

	/* リサイズで綺麗に遷移するように */

	#mainmenu a {
		color: #fff;
		font-weight: normal;
	}

	#mainmenu.open a {
		color: #000;
		font-weight: bold;
	}

	#menu_trigger {
		display: block;
	}

	#menubar {
		position: fixed;
		top: 80px;
		right: 0;
		z-index: 90;

		overflow-y: auto;

		width: 100%;
		height: 100%;
		padding: 0.625rem;

		background: rgba(247,247,247,.98);

		opacity: .98;
		visibility: visible;

		transform: translateX(100%);
		transition: transform .3s ease;
	}

	#menubar.open {
		transform: translateX(0);
	}

	#menubar ul {
		display: block;
		max-width: 500px;
		margin: auto;
	}

	#menubar li {
		margin-bottom: 0.5rem;
		padding-top: 0.625rem;
		padding-bottom: 0;

		background: #cccfff;
		border-radius: 6px;
		box-shadow: 0 2px 8px rgba(0,0,0,.06);
	}

	#menubar a {
		display: block;

		padding-top: 0.3125rem;

		color: #fff;
		font-size: 1.1rem;
		font-weight: bold;
		line-height: 1;

		-webkit-tap-highlight-color: transparent;
	}

	#menubar span {
		display: none;
	}

	#menubar ul ul {
		position: relative;
	}

	#menubar ul ul li {
		margin: 0.3125rem;
		border: none;
	}

	.menu-desc {
		position: static;

		display: block;
		width: auto;

		margin-top: 0.25rem;
		padding: 0.3125rem 0.625rem;

		background: none;
		border: none;
		box-shadow: none;

		visibility: visible;
		opacity: 1;
		pointer-events: auto;

		color: #666;
		font-size: 0.75rem;
		line-height: 1.2;
		text-align: center;
	}

	#contents-top {
		position: relative;
		z-index: 10;
		margin-top: 580px !important;
		padding: 0.625rem 0.625rem 0;
		background: #fff;
		border-radius: 8px;
	}

	#contents {
		position: relative;
	}

	.slide01::before,
	.slide02::before,
	.slide03::before {
		background-position: 60% center !important;
	}

	.slide-content {
		position: relative;
		top: 0;
		left: 0;

		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		width: 100%;
		height: 100%;

		text-align: center;

		transform: none;
	}

	.slide-content h2 {
		font-size: clamp(1.7rem, 4.5vw, 2.0rem);
		line-height: 5vh;
		letter-spacing: -0.02em;
	}

	header {
		position: fixed;
		top: 0;
		left: 0;

		width: 100%;
		height: 80px;
	}

	header #logo img {
		min-width: 160px !important;
	}

	.mb_tell {
		display: none;
		visibility: hidden;
	}

	.fade-in-up-sp {
		opacity: 0;
		transform: translateY(2.5rem);
		transition: none;
	}

	.fade-in-up-sp.is-show {
		opacity: 1;
		transform: translateY(0);
		transition: opacity 1s ease, transform 1s ease;
	}

	.fade-in-side-sp {
		opacity: 0;
		transform: translateX(2.5rem);
		transition: none;
	}

	.fade-in-side-sp.is-show {
		opacity: 1;
		transform: translateX(0);
		transition: opacity 1s ease, transform 1s ease;
	}

	.image-overlay-text {
		top: 2.5rem;
		left: 0.3125rem;
	}

	.gallery-content {
		display: grid;
		grid-template-columns: repeat(
			auto-fit,
			minmax(min(327px, 100%), 1fr)
		);
		gap: 10px;
		margin: 0 auto;
		padding: 20px 5px;
	}

	.galleryBox {
		width: min(327px, 100%);
		max-width: 100%;
		margin: 0 auto;
		padding: 6px;
		box-sizing: border-box;
		align-items: center;
	}

	.contact {
		display: block;
	}

	.contact span {
		display: block;
		margin-bottom: 0.375rem;
	}

	.map-container {
		flex-direction: column;
	}

	.map-card iframe {
		min-height: 300px;
	}

	.text_table {
		border-width: 2px;
	}

	.text_table th,
	.text_table td {
		border-width: 2px;
	}

}

/********************************************************************
 画面幅1000px以上の設定
********************************************************************/

@media (min-width: 1000px) {

	html,
	body {
		font-size: 16px;
	}

	main {
		flex: 1;
		order: 1;
		//margin: 0 1.875rem 1.25rem 0.625rem;
		margin: 0 1.675rem 1.25rem 1.675rem;
	}

	.pc {
		position: relative;
		display: block;
		visibility: visible;
	}

	.mb {
		display: none;
		visibility: hidden;
	}

	#menubar {
		position: static;
		display: block;
		transform: none !important;
		transition: none;
	}

	.menu-desc::before {
		content: "";

		position: absolute;
		top: -10px;
		left: 50%;

		transform: translateX(-50%);

		border-right: 10px solid transparent;
		border-bottom: 10px solid #d7dde7;
		border-left: 10px solid transparent;
	}

	.menu-desc::after {
		content: "";

		position: absolute;
		top: -8px;
		left: 50%;

		transform: translateX(-50%);

		border-right: 9px solid transparent;
		border-bottom: 9px solid #fff;
		border-left: 9px solid transparent;
	}

	.menu-en {
		display: block;
	}

	.slide-content h2 {
		line-height: 7vh;
	}

	/* PC時はスマホ専用アニメーションを無効化 */

	.fade-in-up-sp,
	.fade-in-side-sp {
		opacity: 1;
		transform: none;
		transition: none;
	}

	#contents,
	#contents-top {
		display: flex;
		margin: 0.625rem;
	}

	/* 教室紹介 */

	.school_info {
		display: grid;
		grid-template-columns: 160px;
		justify-content: center;
		gap: 0;

		padding: 0.3125rem 0.9375rem 0;
	}

	.school_info img.photo4,
	.school_info span,
	.school_info .addr {
		grid-column: auto;
		grid-row: auto;
		justify-self: auto;
	}

	.school_info img.photo4 {
		display: block;

		width: 160px;
		height: 120px;
		margin-top: 0.625rem;
	}

	.school_info .addr {
		width: 100%;
		margin: 0 0 0.625rem 0.625rem;

		line-height: 1.5;
		text-align: left;
	}

	/* クラス紹介 */

	.class_info {
		display: flex;
		flex-direction: column;
		align-items: center;

		margin: 0 0.625rem 0.625rem;
		padding: 0.3125rem 0.9375rem 0.625rem;
	}

	.class_info img,
	.class_text,
	.class_info a {
		grid-column: auto;
		grid-row: auto;
	}

	.class_info .class_text span {
		display: block;
		order: 1;
		text-align: center;
	}

	.class_info img {
		order: 2;

		height: 100%;
		max-height: 150px;
		margin: 0 auto;
	}

	.class_info .class_text p {
		order: 3;

		margin-bottom: 0;

		line-height: 1.2;
		text-align: center;
	}

	.class_info a {
		order: 4;

		width: 100%;
		max-width: 250px;
		margin: 0 auto;
	}

	header {
		position: relative;

		display: flex;
		flex-direction: row;
		justify-content: space-between;

		margin: 0;
		padding: 0.625rem 0.9375rem;
	}

	header #logo {
		float: left;

		width: 100% !important;
		margin: 0;

		text-align: left;
	}

	#headerContact img {
		float: right;
	}

	footer {
		margin-bottom: 0;
		font-size: 90%;
	}

	#footerNav {
		display: none;
		visibility: hidden;
	}

	#goTop {
		bottom: 0.625rem;
	}

	#sub {
		order: 0;
		width: 200px;
	}

	#side {
		order: 2;
		width: 200px;
	}

	/* 更新情報 */

	#new {
		grid-template-columns: 15rem 1fr;
		gap: 0;

		padding: 0 1.25rem;
	}

	#new dt,
	#new dd {
		padding: 0.9375rem 0;
	}

	#new dt {
		flex-direction: row;
		justify-content: space-between;

		border-bottom: 1px dotted #999;
	}

	#new dt span {
		position: relative;
		top: 0.3rem;

		align-self: flex-start;

		width: 6em;
		margin-right: 1.2rem;
		padding: 0;

		background: #999;

		line-height: 1.7;
	}

	#new dt span.icon-bg1,
	#new dt span.icon-bg2,
	#new dt span.icon-bg3 {
		font-size: 70%;
	}

	#new dd {
		border-bottom: 1px dotted #999;
	}

	/* 横スクロールメニュー */

	.page-menu-scroll {
		justify-content: center;
		width: 100%;
	}

	.page-menu-scroll-wrapper {
		width: 100%;
		max-width: 100%;
		border-radius: 0;
	}

/*
	.scroll-queue {
		width: 100%;
		animation: none !important;
	}
*/
.scroll-queue {
	width:max-content;
	min-width:100%;
}
	.scroll-queue[aria-hidden="true"] {
		display: none !important;
	}

	.scroll-queue a {
		flex: 1 1 0% !important;
		width: auto !important;
	}

	.scroll-queue a:last-child {
		border-right: none;
	}

	.text_table {
		width: 80%;
		line-height: 1.9;
	}

	.image-container {
		height: 384px;
		aspect-ratio: auto;
	}

	.responsive-img {
		object-position: left 25%;
	}

	.image-overlay-text {
		top: 50px !important;
		left: 0.625rem;
	}

	.download {
		margin: 0.9375rem 0.9375rem 0.9375rem 2rem;
		padding: 1rem 1rem 0;
	}

	.download p a::before {
		background-image: url("/images/Adobe_PDF_file_icon_24x24.png");
	}

	/* 塾だより */

	.jukudayori-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2.5rem;

		padding: 1.25rem 0;
	}

	.jukudayori-img {
		position: static;

		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;

		opacity: 1;
		transform: none;
	}

	.jukudayori-img img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	.jukudayori-dl {
		display: inline-block;
		flex: 0 0 auto;

		width: fit-content;
		margin: 0;
		padding: 2em 1.5em;

		background: #f7f7f7;

		white-space: nowrap;
	}

	.jukudayori-dl a {
		font-size: 1rem;
		font-weight: bold;
		line-height: 2;
	}

	.jukudayori-dl p a::before {
		background-image: url("/images/Adobe_PDF_file_icon_24x24.png");
	}

	/* ギャラリー */

	.gallery-content {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
		gap: 0.3125rem;

		margin: 0 auto;
		padding: 1.25rem 0.625rem !important;
	}

	.galleryBox {
		justify-content: flex-start;

		width: 100%;
		max-width: none;
		margin: 0;
	}

}