/*
Theme Name: underscore
Theme URI: 
Text Domain: underscore
*/
/*

◼︎CSS INDEX

カスタムプロパティ
reset css
基本設定
ヘッダー
下部ボトムリンク
フッター
ページ上部へ戻る
パーツ：アニメーション
パーツ：基本（inner,pc/spでの表示非表示など）
パーツ：見出しタイトル
パーツ：その他

アニメーションについて
.anime-◯◯などanimeで始まるクラス名を付与すると
JSでanimeという文字列に対してis-visibleクラスを付与します

*/


/*######################################################
カスタムプロパティ
######################################################*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");


/* =====================
フォント
===================== */
:root {
	--font-family-base: "Noto Sans JP", sans-serif;
}

/* =====================
インナー幅の設定
===================== */
:root {
	--width-inner: 1200px;
	--width-inner-sub: 1400px;
}

/* =====================
カラー設定
===================== */
:root {
	--color-main: #af0000;
	--color-main-light: #F6DFDD;
	--color-main-sub: #da3734;
	--color-black: #231815;
	--color-lightgray: #cccccc;
	--color-darkgray: #89898a;
	--color-white: #ffffff;
	--color-red: #c40d23;
	--color-body-bg: #ffffff;
	--color-body-txt: #231815;
}

/* =====================
その他の設定
===================== */
:root {
	--section-margin: clamp(80px, 11.11vw, 160px);
}



/*######################################################
reset css
######################################################*/
html {
	scrollbar-gutter: stable;
	scroll-padding-top: 80px;
}

body {
	background-color: var(--color-body-bg);
	color: var(--color-body-txt);
	width: 100%;

	font-family: var(--font-family-base);
	font-weight: 400;
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.75;
	-webkit-text-size-adjust: 100%;
	text-align: justify;

	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

main > * {
	overflow-x: clip;
}

* {
	font-feature-settings: "palt" 1;
	font-size: inherit;
	line-height: inherit;
	line-break: strict;
	box-sizing: border-box;
	position: relative;
}

a {
	color: var(--color-link-txt);
}

html,
body,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
iframe,
blockquote,
pre,
a,
address,
em,
img,
small,
strike,
strong,
sub,
sup,
b,
u,
i,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
ul,
ol,
li,
dl,
dt,
dd,
form,
label,
article,
aside,
canvas,
details,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	position: relative;
	z-index: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

em {
	font-style: normal;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

th,
td {
	text-align: left;
}

ol,
ul {
	padding-left: 1.25em;
}



/*######################################################
基本設定
######################################################*/
/* telリンク無効 */
@media (any-hover: hover) {

	a[href^="tel:"],
	a[href^="tel:"]::after {
		pointer-events: none !important;
		content: none !important;
	}
}

/* =====================
セクション間隔
===================== */
section {
	margin-top: var(--section-margin);
}



/*######################################################
ヘッダー
######################################################*/
.header {
	margin-inline: clamp(10px, 3.33vw, 48px);
	margin-block: 30px;
	position: relative;
	z-index: 9999;
}

.header__title a {
	display: block;
	width: clamp(225px, 17.63vw, 254px);
	height: auto;
	aspect-ratio: 254 / 43;
}

.header__title a img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left;
}

/* リンク */
.header__link-list {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	padding-left: 0;
	margin-right: 48px;
	padding-right: 40px;
}

.header__link-item a {
	display: block;
	text-decoration: none;
	color: var(--color-main-sub);
	font-size: 13px;
	line-height: 1;
	padding: 15px 30px;
	border: 2px solid var(--color-main-sub);
	border-radius: calc(1px * infinity);
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.header__link-item a:hover {
	background-color: var(--color-main-sub);
	color: var(--color-white);
}

@media (max-width:767px) {
	.header {
		margin-bottom: 16px;
	}

	.header__link-list {
		display: none;
	}
}


/* ==============================
  ハンバーガーボタン
  ============================== */
.hum-btn {
	position: fixed;
	z-index: 9999;
	top: 20px;
	right: clamp(10px, 3.33vw, 48px);
	cursor: pointer;
	width: 70px;
	height: 70px;
	border: none;
	background: var(--color-main);
	border-radius: calc(1px * infinity);

	display: grid;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

/*×に変化*/
.hum-btn span,
.hum-btn::before,
.hum-btn::after {
	content: '';
	display: inline-block;
	transition: all 0.3s;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 4px;
	border-radius: 0px;
	background-color: var(--color-white);
	width: 40%;
}

.hum-btn::before {
	transform: translateY(-10px) translateX(-50%);
}

.hum-btn::after {
	transform: translateY(10px) translateX(-50%);
}

.hum-btn[aria-expanded="true"] {
	background-color: rgba(255, 255, 255, 0.3);
}

.hum-btn[aria-expanded="true"] span {
	opacity: 0;
}

.hum-btn[aria-expanded="true"]::before {
	transform: translateY(0) translateX(-50%) rotate(45deg);
}

.hum-btn[aria-expanded="true"]::after {
	transform: translateY(0) translateX(-50%) rotate(-45deg);
}


@media (max-width:767px) {
	.hum-btn {
		width: 53px;
		height: 53px;
	}

	.hum-btn span,
	.hum-btn::before,
	.hum-btn::after {
		height: 3px;
		width: 35%;
	}

	.hum-btn::before {
		transform: translateY(-6px) translateX(-50%);
	}

	.hum-btn::after {
		transform: translateY(6px) translateX(-50%);
	}
}


/**************************************************
  ドロワーメニュー動き
  **************************************************/
/* ドロワーメニューオープン時のスタイル */
html:has(.is-drawerOpen) {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

/* ドロワーメニューのスクロール設定 */
.header__drawer {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* スクロールバー非表示 */
.header__drawer {
	/*IE・Edge*/
	-ms-overflow-style: none;
	/*Firefox*/
	scrollbar-width: none;
}

.header__drawer::-webkit-scrollbar {
	display: none;
}

.header__drawer {
	position: fixed;
	top: 0;
	z-index: 99998;
	right: -400px;
	width: 400px;
	height: 100vh;
	padding-top: 30px;
	padding-bottom: 140px;
	background: var(--color-white);
	transition: all 0.4s;
}

body.is-drawerOpen .header__drawer {
	right: 0;
}

@media (max-width:768px) {
	.header__drawer {
		right: -100%;
		width: 100%;
	}
}



/**************************************************
  ドロワーメニュー中身
  **************************************************/

.header__content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header__drawer {
	background: var(--color-main);
	padding-inline: 40px;
}

.drawer-menu__list {
	list-style: none;
	padding-left: 0;
	display: grid;
	margin-top: 4em;
}

.drawer-menu__list a {
	display: block;
	width: 100%;
	text-decoration: none;
	color: var(--color-white);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	margin-top: 0.75em;
	padding-bottom: 0.75em;
	transition: border-bottom 0.3s ease;
}

.drawer-menu__sns {
	list-style: none;
	padding-left: 0;
	display: flex;
	gap: 15px;
	margin-top: 2em;
}

.drawer-menu__sns a {
	display: block;
	width: 40px;
	height: 40px;
}

.drawer-menu__sns a img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.3s ease;
}

.drawer-menu__link {
	list-style: none;
	padding-left: 0;
	margin-top: 2em;
	display: grid;
	gap: 1em;
}

.drawer-menu__link a {
	display: block;
	width: 100%;
	text-decoration: none;
	border: 1px solid var(--color-white);
	border-radius: calc(1px * infinity);
	color: var(--color-white);
	padding: 1em 2em;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* ホバー */
.drawer-menu__list a:hover {
	border-bottom: 1px solid var(--color-white);
}

.drawer-menu__sns a:hover img {
	opacity: 0.7;
}

.drawer-menu__link a:hover {
	background-color: var(--color-white);
	color: var(--color-main)
}


/*######################################################
下部ボトムリンク
######################################################*/
.bottom-link {
	background-color: var(--color-main);
	margin-top: 200px;
	padding-block: 120px;
}

.bottom-link__list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	list-style: none;
	padding-left: 0;
}

.bottom-link__item {
	width: calc((100% - 30px) / 2);
	max-width: 530px;
}

.bottom-link__item a {
	display: flex;
	align-items: center;
	gap: 1em;
	background-color: var(--color-white);
	text-decoration: none;
	font-size: clamp(16px, 1.52vw, 22px);
	font-weight: 700;
	white-space: nowrap;
	padding: 30px 40px;
	border-radius: 8px;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.bottom-link__item a img {
	width: 5em;
	filter: brightness(0);
	transition: filter 0.3s ease;
}

.bottom-link__item a::after {
	content: "";
	background-image: url(/wpv3/wp-content/themes/underscore/assets/img/common/arrow_right.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 1.5em;
	height: 1.5em;
	margin-left: auto;
	transition: transform 0.3s ease;
}

.bottom-link__item a:hover {
	color: var(--color-main);
	background-color: var(--color-main-light);
}

.bottom-link__item a:hover img {
	filter: brightness(1);
}

.bottom-link__item a:hover::after {
	transform: translateX(0.25em);
}

@media (max-width:767px) {
	.bottom-link {
		margin-top: 110px;
		padding-block: 50px;
	}

	.bottom-link__list {
		flex-direction: column;
		gap: 20px;
	}

	.bottom-link__item {
		width: 100%;
	}

	.bottom-link__item a {
		padding: 20px 30px;
		border-radius: 5px;
	}

	.bottom-link__item a::after {
		width: 1.75em;
		height: 1.75em;
	}

	.bottom-link__item a img {
		width: 5em;
		filter: brightness(0);
		transition: filter 0.3s ease;
	}
}


/*######################################################
フッター
######################################################*/
.footer__logo {
	display: grid;
	place-content: center;
	padding-block: 80px;
}

.footer__logo a {
	display: block;
	width: 310px;
	height: auto;
	aspect-ratio: 254 / 43;
}

.footer__logo a img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ==============================
sns/copyright
============================== */
.footer__info {
	background-color: var(--color-main);
}

.footer__info {
	margin-top: 20px;
}

.footer__info-inner {
	display: flex;
	align-items: center;
	gap: 1em;
	padding-block: 30px;
}

.footer__sns {
	list-style: none;
	padding-left: 0;
	display: flex;
	gap: 12px;
}

.footer__sns a {
	display: block;
	width: 28px;
	height: 28px;
}

.footer__sns a img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.3s ease;
}

.footer__copyright {
	color: var(--color-white);
	font-weight: 700;
	font-size: 15px;
}

.footer__sns a:hover img {
	opacity: 0.8;
}

@media (max-width:767px) {
	.footer__logo {
		padding-block: 40px;
	}

	.footer__logo a {
		width: 260px;
	}

	.footer__info {
		margin-top: 0;
		padding-bottom: 50px;
	}

	.footer__info-inner {
		flex-direction: column;
		gap: 1em;
	}

	.footer__sns {
		justify-content: center;
	}

	.footer__copyright {
		font-size: 10.5px;
	}
}




/*######################################################
ページ上部へ戻る
######################################################*/
.page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 100;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.page-top.is-show {
	opacity: 1;
}

.page-top__link {
	display: block;
	width: 44px;
	height: 44px;
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, 1));
	transition: transform 0.3s ease;
}

.page-top__link img {
	display: block;
	width: 100%;
	height: 100%;
}

html.is-modalOpen .page-top {
	opacity: 0;
	right: calc(var(--scrollbar) + 20px);
}


/* ホバー時のアニメーション */
@media (hover: hover) {
	.page-top__link:hover {
		transform: translateY(-5px);
	}
}




/*######################################################
アニメーション
######################################################*/
/**************************************************
アニメーション
.anime-◯◯などanimeで始まるクラス名を付与すると
JSでanimeという文字列を探してis-visibleクラスを付与します
**************************************************/
/* フェードイン */
.anime-fadeIn {
	opacity: 0;
}

.anime-fadeIn.is-visible {
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}


/* フェードインアップ */
.anime-fadeInUp {
	opacity: 0;
}

.anime-fadeInUp.is-visible {
	animation-name: fadeInUp;
	animation-duration: 0.6s;
	animation-fill-mode: forwards;
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 80px, 0);
		transform: translate3d(0, 80px, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}


/* 左からスライドイン */
.anime-slideInLeft {
	transform: translateX(-200px);
	opacity: 0;
}

.anime-slideInLeft.is-visible {
	animation-name: slideInLeft;
	animation-duration: 0.6s;
	animation-fill-mode: forwards;
}

@keyframes slideInLeft {
	0% {
		transform: translateX(-200px);
		opacity: 0;
	}

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




/*######################################################
パーツ：基本（inner,pc/spでの表示非表示など）
######################################################*/

/* =====================
inner
===================== */
.inner {
	width: 90%;
	max-width: var(--width-inner);
	margin-left: auto;
	margin-right: auto;
}

.inner-sub {
	width: 90%;
	max-width: var(--width-inner-sub);
	margin-left: auto;
	margin-right: auto;
}


/* =====================
.sp でスマートフォンのみ表示
===================== */
@media (min-width: 768px) {
	.sp {
		display: none;
	}
}

/* =====================
.pc でPCのみ表示
===================== */
@media (max-width: 767px) {
	.pc {
		display: none;
	}
}




/*######################################################
パーツ：見出しタイトル
######################################################*/
/* ==============================
section-title
============================== */
.section-title {
	color: var(--color-main-light);
	font-size: clamp(40px, 6.25vw, 90px);
	text-transform: uppercase;
	line-height: 1;
	text-box: trim-both cap alphabetic;
	position: relative;

}

.section-title span {
	display: block;
	line-height: 1;
	text-box: trim-both cap alphabetic;
}

.section-title::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--color-darkgray);
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	overflow-x: hidden;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}

@media (max-width:767px) {
	.section-title span {
		text-align: right;
	}

	/* 左からスライドイン */
	.section-title .anime-slideInLeft {
		transform: translateX(100%);
		opacity: 0;
	}

	.section-title .anime-slideInLeft.is-visible {
		animation-name: slideInLeft;
		animation-duration: 1s;
		animation-fill-mode: forwards;
	}

	@keyframes slideInLeft {
		0% {
			transform: translateX(100%);
			opacity: 0;
		}

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




/*######################################################
パーツ：その他
######################################################*/
/**************************************************
オーディオ
**************************************************/
.player-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.progress-area {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.progress-wrap {
	position: relative;
	display: flex;
	align-items: center;
	height: 40px;
	width: 100%;
}

.progress {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background: #ddd;
	height: 6px;
	border-radius: 3px;
	outline: none;
	--progress: 0%;
}

.progress::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(to right,
			#af0000 0%, #af0000 var(--progress),
			#ddd var(--progress), #ddd 100%);
}

.progress::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: -4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #af0000;
	cursor: pointer;
	border: none;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.progress::-moz-range-thumb,
.progress::-ms-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #af0000;
	cursor: pointer;
	border: none;
}

.progress::-moz-range-progress {
	background-color: #af0000;
	height: 6px;
	border-radius: 3px;
}

.progress::-moz-range-track {
	background-color: #ddd;
	height: 6px;
	border-radius: 3px;
}

.progress::-ms-fill-lower {
	background: #af0000;
	border-radius: 3px;
}

.progress::-ms-fill-upper {
	background: #ddd;
	border-radius: 3px;
}

.progress:focus {
	outline: none;
}

.progress {
	border: none;
	box-shadow: none;
}

.timeDisplay {
	position: absolute;
	right: 0;
	bottom: -10px;
	min-width: 90px;
	font-family: monospace, sans-serif;
	font-size: 14px;
	color: #222;
	text-align: right;
	padding: 0 2px;
	pointer-events: none;
}

.playPauseImg {
	width: 35px;
	height: 23px;
	vertical-align: middle;
}

.playPause {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	outline: none;
	position: relative;
	top: -10px;
	left: 0;
	display: flex;
	align-items: center;
	height: 40px;
}

.volume-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 18px;
	margin-top: 3px;
	margin-left: 0px;
}

.volume-icon {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	display: inline-block;
	object-fit: contain;
}

label[for="volume"] {
	user-select: none;
	line-height: 1;
	padding: 0;
	margin: 0;
}

.volume {
	width: 70px;
	max-width: 120px;
	flex: none;
	appearance: none;
	-webkit-appearance: none;
	height: 3px;
	border-radius: 1.5px;
	background: #ccc;
	outline: none;
	margin: 0 2px;
}

.volume::-webkit-slider-runnable-track {
	height: 3px;
	background: #ccc;
	border-radius: 1.5px;
}

.volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: -3.5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #555;
	cursor: pointer;
	border: none;
}

.volume::-moz-range-thumb,
.volume::-ms-thumb {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #555;
	cursor: pointer;
	border: none;
}

.volume::-moz-range-track {
	background: #ccc;
	height: 3px;
	border-radius: 1.5px;
}

.volume::-ms-fill-lower {
	background: #ccc;
}

.volume::-ms-fill-upper {
	background: #ccc;
}

.volume:focus {
	outline: none;
}

.sp1em {
height: 1em;
}

.sp2em {
height: 2em;
}

.sp3em {
height: 3em;
}

.sp-br{
display: none;
}
	
.pc-br{
display: block;
}

.pc-toggle {
display: block;
}

.sp-toggle {
display: none;
}

.common-h3 {
font-size:clamp(30px, 2.91vw, 42px);
margin: 1.5em 0 1.5em 0;
}

.h4-annualfee {
font-size: 1.7rem;
padding-left: 20px;
border-left: 6px solid #ad0000;
font-weight: bold;
margin-bottom: 20px;
}
.h4-annualfee + p {
padding-left: 26px;
}

.h5-annualfee{
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 0.4em;
}

.bun{
/*font-size: 1.2030075188vw;*/
font-size:18px;
}

.bun_right{
/*font-size: 1.2030075188vw;*/
font-size:18px;
text-align: right;
}

    .animated-button a{
      position: relative;
      display: flex;
      align-items: center;
      gap: 4px;
padding: 0.8rem 2.25rem 0.8rem 3.25rem;
text-align: center;
      border-color: transparent;
      font-size: 16px;
      background-color: var(--color-main);
border: 2px solid var(--color-main);
      border-radius: 100px;
      font-weight: 600;
      color:#fff;
      box-shadow: 0 0 0 1px white;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  width: 21rem;
  max-width: 100%;
	text-decoration: none;
margin-left: 1.5em;
    }
    .animated-button a img {
      position: absolute;
      width: 24px;
      z-index: 9;
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      /* アイコン画像の色変更はSVG側で currentColor を利用して設定してください */
    }
    .animated-button a .arr-1 {
      right: 1.75rem;
width: 10px;
    }
    .animated-button a .arr-2 {
      left: -1.75rem;
width: 10px;
    }
    .animated-button a .circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      color: #af0000;

      border-radius: 50%;
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .animated-button a .text {
      position: relative;
	text-align: center;
	font-size: max(0.75rem, 18px);
      z-index: 1;
      transform: translateX(-12px);
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    padding: 0rem;
  font-weight: bold;
  color: inherit;
  width: 20rem;
  max-width: 100%;
    }
    .animated-button a:hover {
      box-shadow: 0 0 0 12px transparent;
      border-radius: 100px;
border: 2px solid var(--color-main);
	z-index: 5000;
background-color: #FFFFFF;

    }
    .animated-button a:hover .arr-1 {
      right: -25%;
    }
    .animated-button a:hover .arr-2 {
      left: 16px;
    }
    .animated-button a:hover .text {
      transform: translateX(12px);

  font-weight: bold;
color: #af0000 !important;
  width: 20rem;

    }
    /* SVGのfill色はSVGファイル内でcurrentColorを指定した場合、colorで変更可能ですが、
    画像の場合は色変更のためSVG自体を書き換える必要があります 
    .animated-button:hover img {
      filter: invert(1);   ← 必要であればフィルターを使う 
    }
    */
    .animated-button a:active {
      scale: 0.95;
      box-shadow: 0 0 0 4px white;
    }
    .animated-button a:hover .circle {
      width: 520px;
      height: 220px;
      opacity: 1;
    }

    .animated-button_02 a{
      position: relative;
      display: flex;
      align-items: center;
      gap: 4px;
padding: 0.8rem 2.25rem 0.8rem 3.25rem;
text-align: center;
      border-color: transparent;
      font-size: 16px;
      background-color: var(--color-main);
border: 2px solid var(--color-main);
      border-radius: 100px;
      font-weight: 600;
      color:#fff;
      box-shadow: 0 0 0 1px white;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  width: 16rem;
  max-width: 100%;
	text-decoration: none;
margin-left:0em;
margin-bottom: 2.2em;
    }
    .animated-button_02 a img {
      position: absolute;
      width: 24px;
      z-index: 9;
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      /* アイコン画像の色変更はSVG側で currentColor を利用して設定してください */
    }
    .animated-button_02 a .arr-1 {
      right: 1.75rem;
width: 10px;
    }
    .animated-button_02 a .arr-2 {
      left: -1.75rem;
width: 10px;
    }
    .animated-button_02 a .circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      color: #af0000;

      border-radius: 50%;
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }
    .animated-button_02 a .text {
      position: relative;
	text-align: center;
	font-size: max(0.75rem, 18px);
      z-index: 1;
      transform: translateX(-12px);
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    padding: 0rem;
  font-weight: bold;
  color: inherit;
  width: 20rem;
  max-width: 100%;
    }
    .animated-button_02 a:hover {
      box-shadow: 0 0 0 12px transparent;
      border-radius: 100px;
border: 2px solid var(--color-main);
	z-index: 5000;
background-color: #FFFFFF;

    }
    .animated-button_02 a:hover .arr-1 {
      right: -25%;
    }
    .animated-button_02 a:hover .arr-2 {
      left: 16px;
    }
    .animated-button_02 a:hover .text {
      transform: translateX(12px);

  font-weight: bold;
color: #af0000 !important;
  width: 20rem;

    }
    /* SVGのfill色はSVGファイル内でcurrentColorを指定した場合、colorで変更可能ですが、
    画像の場合は色変更のためSVG自体を書き換える必要があります 
    .animated-button:hover img {
      filter: invert(1);   ← 必要であればフィルターを使う 
    }
    */
    .animated-button_02 a:active {
      scale: 0.95;
      box-shadow: 0 0 0 4px white;
    }
    .animated-button_02 a:hover .circle {
      width: 520px;
      height: 220px;
      opacity: 1;
    }

.flex-box-alumniassociation{
/*max-width:1200px;*/
width:100%;
max-width: 1100px;
justify-content: space-between;
margin-left: 20%;
display:flex;
flex-wrap: wrap;
align-items: center;
text-align: center;
margin:0 auto;
align-content: center;
gap:0.1em;
}

.flex-box-alumniassociation .flex-item-alumniassociation{
display: flex;
flex-direction: column;		
width: calc(100% / 4 - 1em);
}

.flex-box-03{
/*max-width:1200px;*/
width:100%;
max-width: 1200px;
justify-content: space-between;
margin-left: 20%;
display:flex;
flex-wrap: wrap;
align-items: center;
text-align: center;
margin:0 auto;
align-content: center;
gap:0.5em;
}

.flex-box-03 .flex-item-03{
display: flex;
flex-direction: column;		
width: calc(100% / 4 - 1em);
}

.form-wrap {

}

.form-box {
width: 100%;
max-width: 980px;
margin: 1em auto 0em;
text-align: center;
/*background-color: #e9ecf2;*/
border-radius: 12px;
padding: 0em 0em 0em 0em;
margin-top: 0em;
}

.form-table {
width: 100%;
max-width: 898px;
margin: 0px auto;
border-collapse: separate;
border-spacing: 10px;
padding: 0em 0em 0em 0em;
margin-top: 2em !important;
}

.form-table img{
display: inline-block;
}

.form-table th {
display: block;
padding: 0.2em 0.5em;
line-height: 180%;
text-align: left;
vertical-align: top;
color: #000;
width: 100%;
font-size: max(1.0625rem, 12px);
font-family: 'Noto Sans JP', sans-serif;
font-weight: normal;
}

.form-table td {
display: block;
padding: 0em 0.5em 0.5em 0em;
line-height: 180%;
text-align: left;
vertical-align: top;
color: #222;
width: 100%;
font-size: max(1.0625rem, 12px);
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
}

::placeholder {
color: #c3c3c3;
}

.doui {
display: block;
padding: 0em 2.8em;
line-height: 180%;
text-align: center;
vertical-align: top;
color: #5f3700;;
width: 100%;
font-size: 18px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
}

.cyuui{
color: red;
font-size: 16px;
}

.douinoue{
color: #000;
font-size: clamp(15.5px, 1.0vw, 21px);
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
line-height: 170%;
word-break: break-all;
text-align: center;
margin-bottom: 3em;
}

.douinoue a{
color: #4169e1;
text-decoration: underline;
}

.btn-contact03{
width: 370px;
margin: 0 auto;
margin-top: 1em;
display: flex;
justify-content: center;
padding: 0.7em;
border: 2px solid;
border-color: #00235f;
/*border-radius: 150px;*/
background-color: #00235f !important;
color: #FFFFFF;
font-weight: 600;
font-size: 20px;
border-radius: 100px;
}

.btn-contact03:hover{
background-color: #FFFFFF !important;
color: #00235f;
border: 2px solid;
border-color: #00235f;
/*border-radius: 150px;*/
}

input, select {
  border: solid 1px #CCC;
background-color: #f2f2f2 !important;
  color: #333333;
  padding: 0.5em;
  margin: 0.5em;
  
  /*cursor: pointer;*/
  vertical-align: middle;
}
textarea {
  border: solid 1px #CCC;
background-color: #f2f2f2;
  color: #333333;
  padding: 0.5em;
  margin: 0.5em;
}
input#submit_button {
  width: 18%;
  cursor: pointer;
}
input#reset_button {
  width: 18%;
  cursor: pointer;
}

::placeholder {
  color:#CCC;
  font-size: 1em;
}

.hissu {
  text-align: center;
  line-height: 140%;
  color: #f15a24;
  display: inline-block;
  margin: 0px 0 0 0px;
}

.consent-text{
    display: block;
    padding: 0.2em 0.5em;
    line-height: 180%;
    text-align: center;
    vertical-align: top;
    color: #000;
    width: 100%;
    font-size: max(1.0625rem, 12px);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: normal;
}

.form-privacy__agree{
color: #000;
font-size: max(1.0625rem, 12px);
font-family: 'Noto Sans JP', sans-serif;
font-weight: normal;
}

/* ラッパー */
.btn-nyu-wrap{
  position:relative;
  display:inline-block;
  /* ─ ホバー時にまとめて拡大 ─ */
  border-radius:100px;     /* ボタンと同じ半径にする */
  background:var(--color-main);      /* ボタン色を塗っておく */
  overflow:hidden;         /* 角丸外を隠す */
  transition:.5s;
margin-top: 2.5em;
}

/* input 本体 */
.btn-nyu{
  padding:15px 90px 15px 70px;
  border:0;
  border-radius:100px;
  background:var(--color-main)!important;
  color:#fff;
  font:normal max(1.0625rem,12px)/1 'Noto Sans JP',sans-serif;
  cursor:pointer;
  transition:.5s;                 /* ← アニメ時間はラッパーと合わせる */
}

/* ▶ を置く */
.btn-nyu-wrap::after{
  content:"▶";
  position:absolute;
  top:50%;
  right:30px;
  transform:translateY(-50%);
  font-size:1.1em;
  color:#fff;
  font-family:'Segoe UI Symbol','Arial Unicode MS',sans-serif;
  pointer-events:none;
  transition:.5s;                 /* ← 同じ時間で拡大させる */
}

/* ────────── ホバー時の拡大 ────────── */
.btn-nyu-wrap:hover{
  transform:scale(1.1);           /* ラッパーごと拡大 */
  box-shadow:0 0 20px #6fc5ff50;  /* 影もここに移動した方が自然 */
}

/* 押下時（クリック）の収縮もラッパーに集約 */
.btn-nyu-wrap:active{
  transform:scale(.98);
  box-shadow:none;
  transition:.25s;
}

.btnnin{
background-color: #ff9000;
border-radius: 16px;
padding: 3px 14px;
color: #FFFFFF;
font-weight: normal;
border: 2px solid #ff9000 !important;
}

























/*-----iPadPro用------*/
/*　画面サイズが980pxから1024pxまではここを読み込む　*/	
@media screen and (min-width:769px) and ( max-width:1024px) {

.flex-box-alumniassociation{
/*max-width:1200px;*/
width:100%;
/*justify-content: center;*/
margin-left: 20%;
display:flex;
flex-wrap: wrap;
align-items: center;
text-align: center;
margin:0 auto;
align-content: center;
}

.flex-box-alumniassociation .flex-item-alumniassociation{
display: flex;
flex-direction: column;		
width: calc(100% / 1 - 1em);
}


}


/*-----iPad用------*/
/*　画面サイズが768pxから979pxまではここを読み込む　*/	
@media screen and (min-width:768px) and ( max-width:979px) {

#ag-prev{
left:-20px !important;
z-index:9999 !important;
}

#ag-next{
right:-20px !important;
z-index:9999 !important;
}

.animated-button a{
width:19rem;
margin-left: 1em;
}

.animated-button_02 a{
width:19rem;
margin-left: 1em;
}

.flex-box-03 .flex-item-03{
display: flex;
flex-direction: column;		
width: calc(100% / 3 - 1em);
}

.flex-box-03{
justify-content: flex-start;
}

.flex-box-alumniassociation{
/*max-width:1200px;*/
width:100%;
/*justify-content: center;*/
margin-left: 20%;
display:flex;
flex-wrap: wrap;
align-items: center;
text-align: center;
margin:0 auto;
align-content: center;
}

.flex-box-alumniassociation .flex-item-alumniassociation{
display: flex;
flex-direction: column;		
width: calc(100% / 2 - 1em);
}

}


/*******SMART用*********/
@media print, screen and (max-width: 767px) {

.sp1em {
height: 1em;
}

.sp2em {
height: 2em;
}

.sp3em {
height: 3em;
}

.sp-br{
display: block;
}
	
.pc-br{
display: none;
}

.pc-toggle {
display: none;
}

.sp-toggle {
display: block;
}

.playPause {
flex-shrink: 0;
background: none;
border: none;
padding: 0;
cursor: pointer;
outline: none;
position: relative;
top: 1px;
left: 0;
display: flex;
align-items: center;
height: 40px;
}

.common-h3 {
font-size:clamp(25px, 1.5vw, 35px);
margin: 1.5em 0 1em 0;
}	
	
.h4-annualfee {
font-size: 1.3rem;
padding-left: 10px;
border-left: 6px solid #ad0000;
font-weight: bold;
margin-bottom: 20px;
}
.h4-annualfee + p {
padding-left: 26px;
}	
	
.h5-annualfee{
font-size: 1.1rem;
font-weight: bold;
line-height: 140%;
}	
	
.bun{
font-size: 16px;
}	
	
.bun_right{
/*font-size: 1.2030075188vw;*/
font-size:16px;
text-align: right;
}	
	
.yohaku_sp{
margin-bottom: 4em;
}	
	
.animated-button a{
width:90%;
margin-left: 1em;
}

.animated-button_02 a{
width:90%;
margin-left: 1em;
}	
	
.flex-box-03{
/*max-width:1200px;*/
width:100%;
justify-content: center;
margin-left: 20%;
display:flex;
flex-wrap: wrap;
align-items: center;
text-align: center;
margin:0 auto;
align-content: center;
}

.flex-box-03 .flex-item-03{
display: flex;
flex-direction: column;		
width: calc(100% / 1 - 1em);
}	

.flex-box-alumniassociation{
/*max-width:1200px;*/
width:100%;
justify-content: center;
margin-left: 20%;
display:flex;
flex-wrap: wrap;
align-items: center;
text-align: center;
margin:0 auto;
align-content: center;
}

.flex-box-alumniassociation .flex-item-alumniassociation{
display: flex;
flex-direction: column;		
width: calc(100% / 1 - 1em);
}

.form-wrap {

}

.form-box {
width: 100%;
max-width: 980px;
margin: 1em auto 0em;
text-align: center;
/*background-color: #e9ecf2;*/
border-radius: 12px;
padding: 0em 0em 0em 0em;
margin-top: 0em;
}

.form-table {
width: 100%;
margin: 0px auto;
border-collapse: separate;
border-spacing: 10px;
padding: 0em 0em 0em 0em;
margin-top:0em !important;
}

.form-table th {
display: block;
padding: 0.2em 0.5em;
line-height: 180%;
text-align: left;
vertical-align: top;
color: #000;
width: 100%;
font-size: max(1.0625rem, 12px);
font-family: 'Noto Sans JP', sans-serif;
font-weight: normal;
}

.form-table td {
display: block;
padding: 0em 0.5em 0.5em 0em;
line-height: 180%;
text-align: left;
vertical-align: top;
color: #222;
width: 95%;
font-size: max(1.0625rem, 12px);
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
}

::placeholder {
color: #c3c3c3;
}

.doui {
display: block;
padding: 0em 2.8em;
line-height: 180%;
text-align: center;
vertical-align: top;
color: #5f3700;;
width: 100%;
font-size: 18px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
}

.cyuui{
color: red;
font-size: 16px;
}

.douinoue{
color: #000;
font-size: max(1.0625rem, 12px);
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
line-height: 170%;
word-break: break-all;
text-align: center;
margin: 0 auto;
margin-bottom: 2em;
width: 90%;
}

.douinoue a{
color: #4169e1;
text-decoration: underline;
}

.btn-contact03{
width: 80%;
margin: 0 auto;
margin-top: 1em;
display: flex;
justify-content: center;
padding: 0.7em;
border: 2px solid;
border-color: #00235f;
/*border-radius: 150px;*/
background-color: #00235f !important;
color: #FFFFFF;
font-weight: 600;
font-size: max(1.0625rem, 12px);
border-radius: 100px;
}

.btn-contact03:hover{
background-color: #FFFFFF !important;
color: #00235f;
border: 2px solid;
border-color: #00235f;
/*border-radius: 150px;*/
}

input, select {
  border: solid 1px #CCC;
background-color: #f2f2f2 !important;
  color: #333333;
  padding: 0.5em;
  margin: 0.5em;
  
  /*cursor: pointer;*/
  vertical-align: middle;
}
textarea {
  border: solid 1px #CCC;
background-color: #f2f2f2;
  color: #333333;
  padding: 0.5em;
  margin: 0.5em;
}
input#submit_button {
  width: 18%;
  cursor: pointer;
}
input#reset_button {
  width: 18%;
  cursor: pointer;
}

::placeholder {
  color:#CCC;
  font-size: 1em;
}

.hissu {
  text-align: center;
  line-height: 140%;
  color: #f15a24;
  display: inline-block;
  margin: 0px 0 0 0px;
border-radius: 4px;
}
	
.btn-nyu{
padding:15px 50px 15px 30px;

}	
	
.btnnin{
background-color: #ff9000;
border-radius: 16px;
padding: 3px 14px;
color: #FFFFFF;
font-weight: normal;
border: 2px solid #ff9000 !important;
margin-bottom:0.5em;
margin-top:1em;
font-size: 1em;
}	
	
.btn-nyu-wrap{
margin-top: 0.5em;
}
	
.consent-text{
text-align: left;
}	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}



/*iphone5&SE用*/
@media screen and (min-width: 320px) and (max-width: 374px){
	
.form-table td {
width: 83%;
}

.bottom-link__item a {
padding: 20px 10px;
border-radius: 5px;
}

}














/* ==== サムネイル 4 列 ======================================= */
.ag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ag-grid img{width:100%;height:auto;border-radius:4px;cursor:pointer;transition:.2s}
.ag-grid img:hover{opacity:.8}

/* ==== モーダル ============================================== */
#ag-modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:#000c;z-index:9999;user-select:none
}
/* 画像を包む枠 */
.ag-frame{position:relative;display:inline-flex;align-items:center}

/* 画像本体 */
.ag-frame img{max-width:90vw;max-height:90vh;border-radius:6px;display:block}

/* × ボタン --------------------------------------------------- */
#ag-close{
  position:absolute;top:-36px;right:-36px;width:32px;height:32px;
  border-radius:50%;background:#000a;color:#fff;font-size:26px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none
}
#ag-close:hover{background:#000d}

/* 矢印ボタン（中央揃え版） ---------------------------------- */
/* ── 矢印ボタン ───────────────────────────── */
.ag-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);   /* 高さ中央 */
  width:48px; height:48px;
  border-radius:50%;
  background:#000a;
  color:#fff;
  font-size:28px;
  line-height:1;               /* ← ❶ 行間を詰める */
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:0px;             /* ← ❷ 1px 上に押し上げる */
  cursor:pointer;
  user-select:none;
  transition:.2s;
}
/* 白線（‹ / ›）だけを 1px 上にずらす ------------- */
.ag-arrow .ag-i{
  position:relative;
  top:5px;              /* 好みで -2px などに調整可 */
}
.ag-arrow:hover{background:#000d}
#ag-prev{left:-64px}
#ag-next{right:-64px}

/* スマホ幅（サイズ縮小時） ------------------- */
@media(max-width:600px){
  #ag-prev,#ag-next{
    left:-48px; right:-48px;
    width:40px; height:40px;
    font-size:24px;
    /* ↓ 同じく中央補正 */
    line-height:1;
    padding-top:1px;
  }

  
}

}



/* ───────── PC 共通 ───────── */
.ag-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);   /* PC 4 列 */
  gap:8px;
}

/* ───────── スマホ (～767px) ───────── */
@media (max-width:767px){

  /* サムネイルを 2 列に */
  .ag-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }

  /* モーダルのレイアウトを縦並びにして矢印を画像の下へ */
  .ag-frame{                              /* ←モーダル内の画像と矢印を包む要素 */
    display:flex         !important;
    flex-direction:column!important;      /* 画像 → 矢印 の順 */
    align-items:center   !important;
  }

  /* 矢印ボタンを通常フローに置く */
  #ag-prev,
  #ag-next{
    position:static      !important;      /* 絶対配置を解除 */
    transform:none       !important;
    margin:16px 8px 0    !important;      /* 上に余白、左右少し開ける */
    width:44px           !important;      /* お好みで */
    height:44px          !important;
    font-size:26px       !important;
  }

  #ag-prev{
margin-bottom:15px !important;
  }

#ag-close{top:25px !important;right:0px !important;}
}

/* ──────────────────────────────────────
   サムネイルを統一サイズにする（中央トリミング）
   ※ .ag-grid 内の <img> を対象にしています。
     クラス名が違う場合は変更してください。
────────────────────────────────────── */
.ag-grid img{
  width:100%;               /* グリッドのセルいっぱいに広げる          */
  aspect-ratio:4/3;         /* ← ここで統一したいアスペクト比を指定     */
  object-fit:cover;         /* 縦横比が違う画像は中央をトリミングして充填 */
  object-position:center;   /* 中央を基準に切り取る（デフォルトですが念のため） */
  display:block;            /* 余計な隙間を消す                            */
}



/* 画像の余白調整 */
.gallery-five{
display:grid;
grid-template-columns:repeat(5,1fr); / ５列 /
gap:16px; 
}

/* 画像を枠いっぱいに */
.gallery-five img{
width:100%;
height:auto;
display:block;
}

/*画面幅に応じて列数を減らす（必要に応じて調整）*/
@media (max-width:1024px){
.gallery-five{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:768px){ 
.gallery-five{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:576px){ 
.gallery-five{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:400px){ 
.gallery-five{grid-template-columns:2,1fr;}
}