@charset "utf-8";

/* ==========================================================================
   1. トップヘッダー領域（#top-box-no-126）
   ========================================================================== */
#top-box-no-126 {
	clear: both;
	margin: 0;
	padding: 30px 40px 50px 40px;
	position: relative;
	text-align: left;
	background-color: #ffe5ec;
	color: #fff;
}

/* --- H1の調整（PC時は横並び） --- */
#top-box-no-126 h1.heading-no-126 {
	font-weight: 600;
	font-size: 20px;
	line-height: 20px;
	letter-spacing: 0.08em;
	padding: 0 0 12px 0;
	margin: 0;
	color: #e61a69;
	border-bottom: 1px solid #e61a69;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}

/* ロゴ画像のサイズ設定 */
#top-box-no-126 img.top-educare-logo-no-126 {
	width: 100%;
	max-width: 250px;
	height: auto;
	vertical-align: bottom;
	margin-right: 20px;
}

/* 号数テキストのPCスタイル */
#top-box-no-126 .issue-number {
	font-size: 22px;
	line-height: 1;
	color: #e61a69;
	font-weight: 600;
	white-space: nowrap;
	margin-bottom: -5px;
}

/* 号数内のパーツごとの微調整 */
.year-text { font-size: 120%; vertical-align: -0.04em; margin-right: 0.05em; font-weight: 700;}
.month-text { font-size: 250%; vertical-align: -0.04em; margin-left: 0.1em; font-weight: 700;}
.month-ja-text { font-size: 130%; vertical-align: -0.04em; }
.number-text { font-size: 120%; vertical-align: -0.04em; margin-left: 0.1em; font-weight: 700;}

/* ==========================================================================
   2. メインコンテンツ領域（#edu-top）
   ========================================================================== */
#edu-top {
	clear: both;
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	background-image: linear-gradient(0deg, #ffffff, #ffe5ec 70%);
}

#edu-top.no-126 {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 0 50px 0;
	padding: 0;
}

/* --- 左側：表紙画像エリア --- */
#edu-top.no-126 .top-cover-box {
	width: 42%;
	padding: 0;
	text-align: center;
}

.top-cover-img {
	position: relative;
	max-width: 77%;
	height: auto;
	vertical-align: top;
	margin-left: 20px;
	box-shadow: 0 1px 7px rgba(0, 0, 0, 0.16);
}

/* --- 右側：テキストエリア全体の調整 --- */
#edu-top.no-126 .top-info-box {
	width: 58%;
	padding: 0 40px 0 0;
	box-sizing: border-box;
	font-family: YakuHanJP, "CustomSymbolFont", "Lato", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

/* --- 特集見出しブロック --- */
.top-info-box .main-feature-header {
	margin: 0 0 25px 0;
	padding: 0;
	line-height: 1.2;
	color: #bf0a49;
}

.top-info-box .main-feature-header span {
	display: block;
}

.top-info-box .main-feature-header .feature-label {
	font-size: 20px;
	font-weight: 600;
	margin-top: -4px;
	margin-bottom: 2px;
	line-height: 1.2;
}

.top-info-box .main-feature-header .feature-title {
	margin: 0;
	padding: 0;
	font-weight: 600;
}

.top-info-box .main-feature-header .feature-sub-text {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 0;
	line-height: 1.3;
}

.top-info-box .main-feature-header .feature-main-text {
	font-size: 44px;
	font-weight: 600;
	line-height: 1.2;
}

/* --- 各記事（ピックアップ）リスト --- */
.top-info-box .pickup-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.top-info-box .pickup-item {
	position: relative;
	padding: 0 0 15px 22px; /* 下側の余白と左側の「◉」用の余白 */
	margin: 0;
	line-height: 1.4;
}

.top-info-box .pickup-item:last-child {
	padding-bottom: 0;
}

/* 「◉」マークの位置調整 */
.top-info-box .pickup-item::before {
	content: "◉";
	position: absolute;
	left: 0;
	top: 0.05em;
	color: #bf0a49;
	font-size: 18px;
}

/* 各記事の表示をブロック化して縦に並べる */
.top-info-box .pickup-sub-text,
.top-info-box .pickup-main-text {
	display: block;
}

/* 記事サブタイトル */
.top-info-box .pickup-sub-text {
	font-size: 18px;
	color: #bf0a49;
	font-weight: 600;
	margin-bottom: 0;
}

/* 記事メインタイトル */
.top-info-box .pickup-main-text {
	font-size: 24px;
	color: #bf0a49;
	font-weight: 600;
}

/* 特殊フォント（α）と（プラスアルファ）の微調整 */
.top-info-box .pickup-sub-text .small-text {
	font-size: 0.65em;
	font-weight: 600;
}

.top-info-box .pickup-sub-text .symbol-text {
	font-family: "CustomSymbolFont", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
	font-size: 1.1em;
	margin-left: -0.15em;
}


/* ==========================================================================
   4. スペックとサンプルページ（ベース・PC用の設定）
   ========================================================================== */
.box-edu-flex-100 { 
	display: flex; 
	flex-wrap: wrap; 
	width: 100%; 
	margin: 0 0 25px 0; 
	padding: 0; 
	justify-content: space-between; 
}

/* 50%幅の要素（テキスト部分） */
.box-edu-info { 
	width: 48%; 
	margin: 0 0 25px 0; 
	padding: 0; 
}

/* 見開きの親要素 */
.box-edu-page-50 { 
	width: 48%; 
	margin: 0 0 25px 0;  
	padding: 0; 
	text-align: center;
	align-self: flex-start; /* 左側のテキストと頭を揃える */
}

/* sample テキスト（左寄せ、黒、16px） */
.box-edu-page-50 .sample-page-text {
	text-align: left;
	margin: 0 0 6px 0;
	padding: 0;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.2em;
}

/* 画像だけを包む枠（影の基準線） */
.edu-photo-wrap {
	position: relative; 
	width: 100%;
	display: block;
}

/* 見開きの中央影 */
.edu-photo-wrap::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	z-index: 10;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.05) 45%,
		rgba(0, 0, 0, 0.1) 50%,
		rgba(0, 0, 0, 0.05) 55%,
		rgba(0, 0, 0, 0) 100%
	) !important;
}

/* 25%幅の要素（1ページ×4並び） */
.box-edu-page-25 { 
	width: 22%; /* 左右に合計12%分の余白が自動で3等分されます */
	margin: 0 0 25px 0; 
	padding: 0; 
	text-align: center;
}

/* すべての画像共通設定（枠いっぱいに表示 ＋ 指定の影） */
.box-edu-flex-100 img.edu-2page-sample,
.box-edu-flex-100 img.edu-1page-sample { 
	position: relative; 
	z-index: 1;
	width: 100%; 
	height: auto; 
	vertical-align: top; 
	box-shadow: 0 1px 7px rgba(0,0,0,0.16);
}

/* 目次ボタン
*****************************************************/
.edu-contents-button a {
	background: #fff;
	border-radius: 50px;
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0 0 25px 0;
	width: 75%;
	padding: 15px 16px 17px 16px;
	color: #e61a69;
	border: 2px solid #e61a69;
	transition: all 0.4s ease-in-out;
	font-weight: 500;
	font-size: 16px; 
	line-height: 1.0em; 
	box-sizing: border-box; /* パディングでの幅崩れを防止 */
}

.edu-contents-button a:hover {
	background: #e61a69;
	color: #fff;
}

.edu-contents-button a:after {
	content: '';
	width: 8px;
	height: 8px;
	border-top: 3px solid #e61a69;
	border-right: 3px solid #e61a69;
	transform: rotate(45deg) translateY(-50%);
	position: absolute;
	top: 48%;
	right: 25px;
	border-radius: 1px;
	transition: all 0.4s ease-in-out;
}

.edu-contents-button a:hover:after {
	border-color: #fff;
}

hr.edu-last-no-126 { 
	border: none;
	border-top: 1px solid #e61a69; 
	margin-top: 40px; 
	margin-bottom: 40px; 
}

/* h2タイトル
*****************************************************/
.heading-wrap {
	margin: -5px 0 35px 0;
	}

/* 見出し全体のベース */
h2.section-title {
	display: flex;
	align-items: center;
	margin: 0;
	}

/* 丸いバッジ */
.title-badge {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-indent: 0.1em;
	line-height: 1;
	color: #fff;
	flex-shrink: 0;
	background-color: #e61a69;
	position: relative;
	z-index: 2; /* 線より上に重ねる */
	}

/* 右側のテキストと上下の線 */
.title-text {
	flex-grow: 1;
	border-top: 1px solid #e61a69;
	border-bottom: 1px solid #e61a69;
	margin-left: -20px;        /* 線を丸の内側へめり込ませる */
	padding: 15px 0 15px 35px;   /* 上下の空きを小さく・文字が被らないよう左は広めに */
	font-size: 20px;
	font-weight: 600;
	color: #e61a69;
	line-height: 1;
	}

/* カテゴリータイトル
*****************************************************/
.post h2.category-heading {
	position: relative;
	padding: .9em 1em .9em 1.4em;
	border-top: 1px solid #e61a69; 
	border-bottom: 1px solid #e61a69;
	margin: 0 0 30px 0; 
	font-size: 16px; 
	font-weight: 500; 
	line-height: 1;
	color: #e61a69;
	font-family: YakuHanJPs, "CustomSymbolFont", "Lato", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
	}

.post h2.category-heading::after {
	position: absolute;
	top: .5em;
	left: .4em;
	content: '';
	width: 6px;
	height: -webkit-calc(100% - 1em);
	height: calc(100% - 1em);
	background-color: #e61a69;
	border-radius: 4px;
	}

/* ===================================================
特集エリア
=================================================== */

.post .tokushu-container { display: block; padding: 0; margin: 0 0 30px 0; }

.post .tokushu-container .tokushu-box { display: block; float: none; clear: both; margin: 0 0 20px 0; padding: 0; height: auto; }

.post .tokushu-container h3.tokushu-title {
	display: flex;
	flex-direction: column;
	float: none;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	height: auto;
	}

.post .tokushu-container .tokushu-sub {
	display: block;
	font-size: 18px;
	color: #000;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 0;
	padding: 0;
	text-indent: 0;
	padding-left: 22px;
	text-indent: -22px;
	}

.post .tokushu-container .tokushu-sub::before {
	content: "◉";
	display: inline; 
	margin-left: 2px;
	margin-right: 4px;
	color: #e61a69;
	font-size: 16px;
	vertical-align: 0px;
	/* 高さに調整 */
	position: relative;
	top: -1px; 
	}

.post .tokushu-container .tokushu-main { display: block; font-size: 26px; color: #000; font-weight: 600; line-height: 1.4; margin: 0; padding-left: 22px; }

.post .tokushu-container .tokushu-main-sub { display: block; font-size: 16px; color: #000; font-weight: 600; line-height: 1.5; margin: 0; padding-left: 22px; }

.post .tokushu-container .tokushu-author { display: block; font-size: 14px; color: #000; margin: 0; padding-left: 22px; }

.post .tokushu-container .tokushu-lead { display: block; font-size: 15px; color: #000; margin: 12px 0 0 0; padding-left: 22px; }

/* ===================================================
各記事エリア
=================================================== */

.post .article-container { display: block; padding: 0; margin: 0 0 30px 0; }

.post .article-container .article-box {
	display: block;
	float: none;
	clear: both;
	margin: 0 0 25px 0;    /* 記事と記事の縦のすき間 */
	padding: 0 0 20px 0;   /* 内側のすき間 */
	border-bottom: 1px dashed #e61a69;
	height: auto;          /* 文字量に合わせて自動で広げる */
	}

/* 一番最後の記事ボックスだけ、点線と下余白をなしにする */
.post .article-container .article-box:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
	}

.post .article-container h3.article-title {
	display: flex;
	flex-direction: column;
	float: none;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	height: auto;
	}

.post .article-container .article-sub {
	display: block;
	font-size: 16px;
	color: #000;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 0;
	padding: 0;
	text-indent: 0;
	padding-left: 22px;
	text-indent: -22px;
	}

.post .article-container .article-sub::before {
	content: "◉";
	display: inline; 
	margin-left: 2px;
	margin-right: 4px;
	color: #e61a69;
	font-size: 16px;
	vertical-align: 0px;
	position: relative;
	top: 0px; 
	}

.post .article-container .article-main {
	display: block;
	font-size: 22px;
	color: #000;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
	padding-left: 22px;
	}

.post .article-container .article-main-sub {
	display: block;
	font-size: 16px;
	color: #000;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
	padding-left: 22px;
	}

.post .article-container .article-author {
	display: block;
	font-size: 14px;
	color: #000;
	margin: 3px 0 0 0;
	padding-left: 22px;
	}

.post .article-container .article-lead { display: block; font-size: 15px; color: #000; margin: 12px 0 0 0; padding-left: 22px; }


.post .article-container .article-kome {
	display: flex;       /* 横並びにして、※とテキストのエリアを分離 */
	align-items: flex-start; /* 複数行になっても※を1行目の上部に固定 */
	font-size: 13px;
	color: #000;
	margin: 5px 0 0 0;
	padding-left: 22px;  /* 他の要素と左端を揃える */
	text-align: justify; /* 両端揃えを維持 */
}

.post .article-container .article-kome::before {
	content: "※";
	flex-shrink: 0;      /* ※が画面幅で潰れるのを防ぐ */
	width: 1.2em;        /* ※の横幅を固定して、2行目の開始位置を確定させる */
}

/* ==========================================================================
   メディアクエリ（レスポンシブ対応）
   ========================================================================== */
@media only screen and (max-width:959px){
	.edu-contents-button a { width: 85%; }
	
	#top-box-no-126 { padding: 30px 3% 40px 3%; }
	}

/* --- スマートフォン・タブレット縦（640px以下） --- */
@media only screen and (max-width: 640px) {
	/* 上部ヘッダー */
	#top-box-no-126 {
		padding: 30px 3% 30px 3%;
	}
	
	#top-box-no-126 h1.heading-no-126 {
		display: block;
		text-align: center;
		padding: 0 0 10px 0;
	}
	
	#top-box-no-126 img.top-educare-logo-no-126 {
		display: inline-block;
		width: 50%;
		max-width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}
	
	#top-box-no-126 .issue-number {
		display: block;
		font-size: 20px;
		margin-bottom: 0px;
	}
	
	/* メインエリア */
	#edu-top.no-126 { 
		padding: 0; 
		flex-direction: column;
		margin: 0 0 40px 0;
	}
	
	#edu-top.no-126 .top-cover-box {
		width: 100%;
		padding: 0;
		text-align: center;
		margin-bottom: 30px;
	}

	.top-cover-img {
		margin-left: 0;
		max-width: 70%;
	}

	#edu-top.no-126 .top-info-box {
		width: 100%;
		padding: 0 2% 0 4%;
		box-sizing: border-box;
	}

	.top-info-box .main-feature-header {
		text-align: left;
	}
}

/* --- スマートフォン（480px以下） --- */
@media only screen and (max-width: 480px) {
	#top-box-no-126 {
		padding: 30px 3% 30px 3%; 
	}
	
	#top-box-no-126 img.top-educare-logo-no-126 {
		width: 55%;
		margin-bottom: 6px;
	}

	#top-box-no-126 .issue-number {
		font-size: 17px;
	}
	
	#edu-top.no-126 { 
		padding: 0; 
	}

	.top-cover-img { 
		max-width: 94%; 
	}
	
	#edu-top.no-118 .top-info-box {
		padding: 0 1% 0 4%;
	}
	
	.top-info-box .main-feature-header .feature-main-text {
	font-size: 42px;
	}
  
	/* スペック部分を100%幅にし、縦に落とす */
	.box-edu-info {
		width: 100%;
		margin: 0 0 25px 0;
	}
	
	/* サンプル見開きページ（50%）をスマホで100%幅に */
	.box-edu-page-50 {
		width: 100%;
		margin: 0 0 25px 0;
	}

	/* ★修正：1ページものサンプル（25%）をスマホで2列並びにぴったり配置 */
	.box-edu-page-25 {
		width: 47%; /* 左右ぴったり余白を取るため47%（隙間は6%分自動調整されます） */
		margin: 0 0 20px 0;
	}
	
	/* 目次ボタンをスマホで100%幅いっぱいに広げる */
	.edu-contents-button a { 
		width: 100%; 
	}
}