@charset "utf-8";

/* root/utsunomiya/maturity/
------------------------------------------ */

/* デザイン共通設定 */
:root {
  --color-main-green: #369438;      /* 濃い緑（アクティブタブ） */
  --color-light-green: #e1f5ad;     /* 薄い黄緑（非アクティブタブ） */
  --color-navy: #0b3084;            /* 紺（期限ラベル） */
  --color-light-blue: #e1efff;      /* 水色（注意事項背景） */
}


/* ヘッダー内 サブメニュー　PC only
------------------------------------------ */
header dl.submenu{
	width: 100%;
	max-width: 960px;
	margin: 2% auto 0;
	display: table;
}

header dl.submenu dt{
	display: table-cell;
	width: 14em;
	background-color: #368b38;
	color: #ffffff;
	padding: 2px 2px;
	border-radius: 5px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

header dl.submenu dd{
	display: table-cell;
	vertical-align: middle;
	padding-top: 2px;
}

header dl.submenu dd ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	margin-left: 1em;
	padding-top: 1px;
}

header dl.submenu dd ul li{
	margin-right: 1em;
	background:url(/ikebukuro/img/icon_link.png) no-repeat left 0px;
	background-size: 12px;
	padding: 0 0 0 14px;
	margin-bottom: 2px;
}


header dl.submenu dd ul li:nth-of-type(1){
	background:url(/ikebukuro/img/icon_anchor.png) no-repeat left 0px;
	background-size: 13px;
}


header dl.submenu a{
	color: #368138;
	text-decoration: none;
}

header dl.submenu a:hover{
	color: #ff8138;
}

@media screen and (max-width:768px) {
	header dl.submenu{
		display: none;
	}
}



/* ============================================================
   メインビジュアル・キャッチコピー
   ============================================================ */
/* --- 共通・スマホ表示 --- */
.main-visual-area,
.catchphrase-area {
  	width: 100%;
  	text-align: center;
}

/* メイン画像 */
.mv-image {
  	width: 100%;
  	height: auto;
  	display: block;
}

/* キャッチコピー（左右に少し余白を持たせる場合） */
.catch-image {
  	width: 76%; /* スマホ画面の端に少し余白を作る */
  	max-width: 850px; /* PC表示時に画像が巨大化するのを防ぐ上限値 */
  	height: auto;
  	display: block;
  	margin: 20px auto; /* 上下の余白と中央寄せ */
}

/* --- PC表示 --- */
@media (min-width: 769px){
  /* PC表示時の余白調整 */
  .catch-image {
	  width: 96%;
	  margin: 40px auto; 
  	}
}


/* =========================================
   おトク1（.benefit-card-first）専用の上書き設定
   ========================================= */

/* 1. 外枠と背景の白塗りを消す */
.benefit-card.benefit-card-first {
	border: none;                  /* 枠線を消去 */
  	background-color: transparent; /* 背景の白塗りを透明にする */
  	border-radius: 0;              /* 角丸の指定も完全にリセット */
  	box-shadow: none;              /* 念のため影の指定もリセット */
  	/*padding: 0;*/                /* 内側の余白をリセット */
}

/* 2. タイトル両サイドの装飾（SVG）を非表示にする */
.benefit-card-first .benefit-title::before,
.benefit-card-first .benefit-title::after {
  	display: none;
}

/* 3. タイトルのテキストサイズ調整（スマホ用） */
.benefit-card-first .benefit-title {
	justify-content: flex-start;
  	font-size: 20px; /* ★スマホでのサイズ */
  	gap: 0; /* 装飾がないため隙間設定をリセット */
}

.benefit-card-first .benefit-title span {
  	text-align: left; /* 共通設定の中央揃えルールを上書き */
}

/* -----------------------------------------
   PC表示時の上書き設定
   ----------------------------------------- */
@media screen and (min-width:769px) {
  
	/* おトク1のマークとタイトルをセットで中央寄せ */
	.benefit-card-first .benefit1-header {
		justify-content: center; 
  	}
	
	/* PC表示時はテキストの揃えを中央に戻す */
  	.benefit-card-first .benefit-title span {
    	text-align: center;
  	}
	
  /* タイトルのテキストサイズ調整（PC用） */
  	.benefit-card-first .benefit-title {
    	font-size: 32px; /* ★PCでのサイズ */
  	}
  
}

/* ============================================================
   おトク1
   ============================================================ */
/* ヘッダーの横並び（マークの中央とタイトルの高さを合わせる） */
.benefit1-header {
  	display: flex;
  	align-items: center; /* これで縦の中央がピタッと揃う */
  	gap: 15px; /* マークとタイトルの間の余白 */
  	margin-bottom: 20px;
}

/* インライン用マーク（既存の絶対配置を解除） */
.benefit-badge.is-inline {
  	position: static; 
  	box-shadow: none; /* 横並びの時は影を無くすとスッキリ */
  	flex-shrink: 0; /* タイトルが長くなってもマークが潰れないようにする */
}

/* 説明テキストエリアの余白調整 */
.benefit1-text {
  	margin-bottom: 25px;
}


/* =========================================
   スライダー（Swiper）の画像はみ出し防止
   ========================================= */
/* 1. スライダーの大枠が画面外に飛び出すのを防ぐ */
.swiper.courseSwiper {
  	width: 100%;
  	max-width: 100%;
  	overflow: hidden; /* コンテナからはみ出た部分を強制的にカット */
}

/* 2. 各スライドの枠を親要素にピッタリ合わせる */
.swiper-slide {
  	width: 100%;
  	box-sizing: border-box;
}

/* 3. 画像を枠内に100%収めるための強力な指定（ここが重要） */
.slide-image {
  	width: 100%;
  	max-width: 100%; /* 親の枠を絶対に超えないようにする */
  	height: auto;    /* 縦横比を維持して縮小 */
  	display: block;  /* 画像の下にできる謎の数ピクセルの隙間を消す */
  	border-radius: 8px; /* 角丸（既存のまま） */
  	object-fit: cover; /* 画像が歪むのを防ぐ保険 */
}

/* =========================================
   おトク1 スライダー・コントロールエリア（プログレス・カプセル版）
   ========================================= */
.slider-control-area {
  	display: flex;
  	align-items: center;
  	justify-content: center; 
  	gap: 20px;
  	margin-top: 15px;
  	margin-bottom: 25px;
}

/* --- カプセル＋ドット（ページネーション）のカスタム --- */
.custom-pagination {
  	position: relative !important; 
  	bottom: auto !important;
  	left: auto !important;
  	width: auto !important; 
  	display: flex;
  	align-items: center;
  	gap: 8px; 
}

/* 通常のドット（非アクティブ：グレーの土台） */
.custom-pagination .swiper-pagination-bullet {
  	position: relative; /* 内部のゲージの基準にするため必須 */
  	width: 8px;
  	height: 8px;
  	background-color: #dcdcdc; 
  	opacity: 1; 
  	border-radius: 4px;
  	margin: 0 !important; 
  	overflow: hidden; /* はみ出たインナーゲージを隠す */
  	transition: width 0.3s; /* カプセル化する時の横幅のスムーズな変化 */
}

/* アクティブなドット（現在位置：横長のカプセル型に変形） */
.custom-pagination .swiper-pagination-bullet-active {
  	width: 35px; /* ゲージが動く長さとして少しだけ広めに確保 */
  	background-color: #dcdcdc; /* 土台はグレーのままにして、上に緑を走らせます */
}

/* 【魔法の仕込み】アクティブなカプセルの内部を走る緑色のゲージ本体 */
.custom-pagination .swiper-pagination-bullet-active::after {
  	content: "";
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	background-color: #009744; /* カラー緑 */
  	transform-origin: left center; /* 左側を起点にして伸びる */
  
  /* 3.5秒（JSのdelay時間）かけて左から右へ満たすアニメーションを実行 */
  	animation: bulletProgress 5s linear forwards;
}

/* 一時停止ボタンが押された時、ゲージの進捗アニメーションもその場でストップさせる設定 */
.custom-pagination.is-paused .swiper-pagination-bullet-active::after {
  	animation-play-state: paused;
}

/* 左から右へ、サイズ（横幅）を0から1へリニアに拡大させるアニメーションの定義 */
@keyframes bulletProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}


/* =========================================
   再生・一時停止ボタン（形状崩れ防止の完全版）
   ========================================= */

/* ボタンの外枠（丸い背景）を確実に維持する */
.slider-toggle-btn {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 32px;
  	height: 32px;
  	border-radius: 50%;
  	background-color: #f0f0f0;
  	border: none;
  	cursor: pointer;
  	flex-shrink: 0; /* 画面が狭くてもボタンが潰れないようにする */
  	padding: 0;     /* 既存CSSの余計な余白をリセット */
}

.slider-toggle-btn:hover {
  	background-color: #e0e0e0;
}

/* アイコンの共通設定（既存のCSSリセットの影響を防ぐ） */
.toggle-icon {
  	display: block;
  	box-sizing: content-box !important; 
}

/* 一時停止ボタン（縦線2本） */
.toggle-icon.is-pause {
  	width: 4px; /* 線と線の間の隙間 */
  	height: 12px;
  	border-left: 2.5px solid #333333;
  	border-right: 2.5px solid #333333;
  	border-top: none;
  	border-bottom: none;
  	background-color: transparent;
}

/* 再生ボタン（右向き三角形） */
.toggle-icon.is-play {
  	width: 0;
  	height: 0;
  	border-top: 6px solid transparent;
  	border-bottom: 6px solid transparent;
  	border-left: 10px solid #333333;
  	border-right: none;
  	margin-left: 3px; /* 三角形を視覚的なド真ん中に寄せる */
  	background-color: transparent;
}


/* -----------------------------------------
   PC表示時の上書き設定
   ----------------------------------------- */
@media screen and (min-width:769px) {
	/* ▼ 追加：PC表示時のスライダー領域を50%にする設定 ▼ */
	.swiper.courseSwiper {
		width: 50%;
    	margin: 0 auto; /* 幅を50%に縮めた上で、左右の余白を自動計算して中央に配置 */
  	}
}


/* =========================================
   おトク1（.benefit-card-first）専用の強調ボタン
   ========================================= */

/* ボタンを囲むエリアの余白調整 */
.benefit-card-first .benefit-action {
  	margin-top: 20px; /* スライダーとの距離をしっかり取る */
  	text-align: center;
}

/* 強調ボタン本体のデザイン */
.benefit-card-first .benefit-link,
.benefit-card-first .benefit-link:visited {
  	display: inline-flex;
  	justify-content: center;
  	align-items: center;
  	width: 70%; /* スマホ画面でタップしやすいよう幅を広めに */
  	max-width: 320px; /* 広がりすぎ防止 */
  	min-height: 44px; /* ★Apple推奨のタップしやすい高さ（44px以上）をクリア */
  
  	background-color: #009744; /* 東武友の会のブランドグリーン */
  	color: #ffffff!important; /* テキストは白抜きで目立たせる */
  
  	font-size: 20px; /* スマホ用フォントサイズ */
  	font-family: "LINE Seed JP", sans-serif;
  	font-weight: 800;
  	font-style: normal;
  	text-decoration: none; /* 下線を消す */
  
  	border-radius: 30px; /* 角丸（ピル型）にしてクリックできる要素であることを強調 */
  	box-shadow: 0 4px 10px rgba(0, 151, 68, 0.25); /* 緑色の淡い影を落としてリッチな立体感を演出 */
  	transition: all 0.3s ease; /* ホバー時のフワッとした動き */
}

/* -----------------------------------------
   PC表示時の上書き設定（メディアクエリ内）
   ----------------------------------------- */
@media screen and (min-width:769px) {

  /* PC向けにボタンをさらに大きく、押しやすくする */
	.benefit-card-first .benefit-link {
    	font-size: 18px; /* ★PC用フォントサイズ（少し大きく） */
    	max-width: 300px; /* PCでは横幅も少しゆったりと */
    	min-height: 60px; /* 高さも余裕を持たせる */
  	}

  /* PC特有のホバーアクション（マウスを乗せた時の動き） */
  	.benefit-card-first .benefit-link:hover {
    	background-color: #007a37; /* 色を少し濃くする */
    	box-shadow: 0 6px 15px rgba(0, 151, 68, 0.4); /* 影を広げる */
    	transform: translateY(-2px); /* ボタンがフワッと上に浮く動き */
  	}
  
}



/* ============================================================
   おトク2からおトク5
   ============================================================ */
/* --- スマホ表示（デフォルト） --- */
/* 親要素は通常のブロックレベルなので、articleは自然と縦並びに */
.benefits-container {
  	display: block; 
	/* 【追加】画面端に余白を作り、全体を中央寄せ */
  	width: 90%;
	/*width: 100%;*/
  	max-width: 1000px; /* PC表示時に横に広がりすぎないための最大幅（数値は任意） */
	padding: 5% 5% 5% 5%;
  	/*margin: 5% auto 0;*/
	background-color: #d5e5ad;
}

/* カード全体の大枠 */
.benefit-card {
	/* 【追加】paddingを含めて幅を100% */
  	width: 100%; 
  	box-sizing: border-box; 
  	position: relative; /* 左上バッジの基準位置に */
  	background-color: #ffffff;
  	border: 2px solid #e0e0e0; /* 枠線（デザインに合わせて調整） */
  	border-radius: 12px; /* 角丸 */
  	padding: 20px 20px 20px; /* バッジと被らないように上部の余白を多めに */
  	margin-bottom: 40px;
	/* ▼ 追加 ▼ */
  	display: flex;
  	flex-direction: column; /* 中身を上から下へ縦に並べる設定 */
}

.benefit-badge {
  	position: absolute;
  	top: -10px;
  	left: -10px;
  	background-color: #009744;
  	font-family: "LINE Seed JP", sans-serif;
  	font-weight: 800;
  	font-style: normal;
	color: #ffe000;
  	padding: 8px 12px;
  	border-radius: 4px;
  	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  
  /* --- ここから下が縦並び・中央揃えの変更点 --- */
  	display: flex;
  	flex-direction: column; /* 要素を縦並びにする */
  	align-items: center;    /* 横方向の中央揃え */
  	justify-content: center;/* 縦方向の中央揃え */
  	gap: 2px;               /* 「おトク」と「2」の縦の隙間 */
  	line-height: 1;         /* 縦並びの時は行間を1にして余白をなくすと綺麗 */
}

.benefit-badge .badge-small {
  	font-size: 12px;
}

.benefit-badge .badge-large {
  	font-size: 28px;
}

/* タイトルエリア */
.benefit-header {
  	text-align: center;
  	margin-bottom: 15px;
}

.benefit-title {
  	font-size: 20px;
	font-family: "LINE Seed JP", sans-serif;
  	font-weight: 800;
  	font-style: normal;
  	color: #009744;
  	display: inline-flex;
  	align-items: center;
  	gap: 5px; /* 装飾と文字の隙間 */
}

/* タイトルのテキスト部分（span）を直接コントロール */
.benefit-title span {
  	display: inline-block; /* フレックスアイテム内で独立したブロックにする */
  	line-height: 1.5;      /* ここでお好みの行間を指定（1.4〜1.6あたり） */
  	text-align: center;    /* 複数行になった際に文字を中央で揃える */
}

/* 左右の装飾の共通設定（SVGの枠組みを作る） */
.benefit-title::before,
.benefit-title::after {
  	content: "";
  	display: inline-block;
  	width: 24px;  /* 書き出したSVGサイズに合わせて調整 */
  	height: 60px;
  
  /* ★ここで色を指定（後から変更可能） */
  	background-color: #009944; 
  
  /* SVGをマスク（型抜き）として読み込む */
  	-webkit-mask-image: url('../img/deco-left.svg');
  	mask-image: url('../img/deco-left.svg');
  	-webkit-mask-size: contain;
  	mask-size: contain;
  	-webkit-mask-repeat: no-repeat;
  	mask-repeat: no-repeat;
  	-webkit-mask-position: center;
  	mask-position: center;
}

/* 右側の装飾（反転させる） */
.benefit-title::after {
  	/* 左用のSVGをCSSの力で左右反転（鏡写し） */
  	transform: scaleX(-1); 
}

/* コンテンツエリア（回り込みの肝） */
.benefit-content {
  	margin-bottom: 10px;
  	/* 画像よりテキストが短い場合でも、レイアウトが崩れないようにする*/
  	overflow: hidden;
}

/* 右側に回り込ませる画像 */
.benefit-icon {
  	float: right;
  	width: 100px; /* スマホに合わせた画像の幅（適宜調整） */
  	margin-left: 5px; /* テキストとの隙間 */
  	margin-bottom: 5px;
}

/* 説明テキスト */
.benefit-desc {
  	font-size: 16px;
  	line-height: 1.6;
  	color: #232323;
  	margin-bottom: 8px;
	font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 500;
  	font-style: normal;
}

/* 注意書きテキスト */
.benefit-note {
  	font-size: 14px;
  	color: #666666;
	font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 500;
  	font-style: normal;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.4;
}

/* リンクエリア */
.benefit-action {
  	clear: both; /* 画像の回り込み（float）をここで完全に解除 */
  	text-align: center;
  	margin-top: auto; /* ★自動で余白を計算し、ボタンを枠の一番下へ押し付ける */
  	padding-top: 5px; /* テキストや画像とボタンが近づきすぎないための最低限の余白 */
}

/* テキストリンク（タップしやすいようにpaddingを持たせる） */
.benefit-link,
.benefit-link:visited{
  	display: inline-block;
  	padding: 10px 20px; /* 文字の周りに見えないタップ領域を作る */
 	color: #009744;
  	text-decoration: none;
  	font-family: "LINE Seed JP", sans-serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 14px;
}


@media (min-width: 769px){
	.main-container{
		max-width: 960px;
		margin: 0 auto;
	}
	
	.benefits-container {
		padding: 5%;
		/*margin-top: 5%;*/
    	display: grid;
    	grid-template-columns: repeat(2, 1fr); /* 均等に2列を生成 */
    	gap: 30px; /* カード同士の縦横の隙間（適宜調整） */
  	}
	
	/* 最後の1つが奇数番目だった場合のみ適用 */
  	.benefits-container .benefit-card:last-child:nth-child(odd) {
    	grid-column: 1 / -1;      /* 2列分のスペースを1つのカードでぶち抜いて占有する */
    	justify-self: center;     /* その占有したスペースのド真ん中に配置する */
    	width: 100%;
    	max-width: calc(50% - 15px); /* ★他のカードとサイズを完璧に合わせる計算式 */
  	}
  
  	/* グリッドレイアウトにすれば、下のmargin-bottomは不要になるためリセット */
  	.benefit-card {
    	margin-bottom: 0; 
  	}
	
	.benefit-title {
  		gap: 10px; /* 装飾と文字の隙間 */
	}
	
	/* PC表示時のみ、コンテンツ下の余白をなくす */
  	.benefit-content {
    	margin-bottom: 0;
  	}
	
	.benefit-icon {
  		margin-bottom: 0px;
	}

	.benefit-link {
  		padding: 5px 20px; /* 文字の周りに見えないタップ領域を作る */
	}
}


/* =========================================
   注釈記号（上付き文字）の美しいスタイリング
   ========================================= */
sup {
  font-size: 75%; /* 文字の大きさを元の75%に縮小（お好みで調整可） */
  vertical-align: super; /* しっかりと上付きに配置 */
  line-height: 0; /* ★一番のポイント：上付き文字による行間の崩れを防ぐ */
}


/* =========================================
   おトク1 スライダーの矢印ボタン（ナビゲーション）修正版
   ========================================= */
.swiper-button-next.custom-arrow,
.swiper-button-prev.custom-arrow {
  --swiper-navigation-size: 16px; /* アイコン自体を上品なサイズに */
  color: #333333; /* 矢印の色をダークグレーに統一 */
  
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.9); /* 白背景で画像の上でもクッキリ */
  border-radius: 50%; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* ほんのり影をつけてクリックしやすさを強調 */
  
  margin-top: 0;
  top: calc(50% - 35px); /* 画像のド真ん中に配置する微調整 */
}

/* 矢印アイコンの太さを調整 */
.swiper-button-next.custom-arrow::after,
.swiper-button-prev.custom-arrow::after {
  font-weight: bold;
}