@charset "utf-8";

/**************************
/* トップのタイトル
**************************/
#top-box-no-132{
	clear:both;
	margin:0;
	padding:30px 40px 50px 40px;
	position:relative;
	text-align:left;
	background-color: #e6fae1;
	color:#fff;
	}

#top-box-no-132 h1.heading-no-132 { font-weight:600; font-size:20px; line-height:20px; letter-spacing: 0.08em; padding:0 0 10px 0px; margin:0; color: #8b3726; border-bottom:1px solid #8b3726; }
#top-box-no-132 img.top-educare-logo-no-132 { width:64%; height:auto; }

/* トップのグラデーションボックス
*****************************************************/
#edu-top{
	clear:both;
	width: 100%; 
	margin:0;
	padding:0;
	position:relative;
	background-image: linear-gradient(0deg, #ffffff, #e6fae1 70%);
	}

#edu-top.no-132 { display: flex; flex-wrap: wrap; width: 100%; margin: 0 0 40px 0; padding: 0; }
#edu-top.no-132 .top-books { width: 42%; padding: 0; text-align:center; }
#edu-top.no-132 .top-info { width: 58%; padding: 0;}

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

/* ===================================================
   スペックとサンプルページ　ベース・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 30px 0;
    width: 75%;
    padding:15px 16px 17px 16px;
    color: #8b3726;
    border: 2px solid #8b3726;
    transition: all 0.4s ease-in-out;
    font-weight: 500;
	font-size:16px; 
	line-height:1.0em; 
	}
.edu-contents-button a:hover {
    background: #8b3726;
    color: #fff;
    }
.edu-contents-button a:after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 3px solid #8b3726;
    border-right: 3px solid #8b3726;
    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-132{ border-top: 1px solid #8b3726; 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: #8b3726;
	position: relative;
	z-index: 2; /* 線より上に重ねる */
	}

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

/* カテゴリータイトル
*****************************************************/
.post h2.category-heading {
	position: relative;
	padding: .9em 1em .9em 1.4em;
	border-top: 1px solid #8b3726; 
	border-bottom: 1px solid #8b3726;
	margin: 0 0 30px 0; 
	font-size: 16px; 
	font-weight: 500; 
	line-height: 1;
	color: #8b3726;
	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: #8b3726;
	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: #8b3726;
	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 #8b3726;
	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: #8b3726;
	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; }


@media only screen and (max-width:959px){
	.edu-contents-button a { width: 85%; }
	
	#top-box-no-132 { padding: 30px 3% 40px 3%; }
}

@media only screen and (max-width:640px){
	
	#top-box-no-132 img.top-educare-logo-no-132 { width:80%; }
	
	#edu-top.no-132 { padding: 0; }
	#edu-top.no-132 .top-books { width: 100%; padding: 0; text-align:center; margin-bottom:35px; }
	#edu-top.no-132 .top-info { width: 100%; padding: 0 2% 0 2%; text-align:center; }
	
	.top-books-photo { max-width:70%; margin-left:0; }
	.top-info-photo { width:90%; margin-top:0; }

}

@media only screen and (max-width:480px){
	
	#top-box-no-132 { padding: 30px 3% 30px 3%; }
	#top-box-no-132	{ text-align:center; }
	#top-box-no-132 img.top-educare-logo-no-132 { width:70%; }
	
	#edu-top.no-132 { padding: 0; }
	.top-books-photo { max-width:94%; }
  
	/* 書籍情報を100%幅に */
	.box-edu-info {
		width: 100%;
		margin: 0 0 10px 0;
	}
	
	.box-edu-page-50 {
    width: 100%;
    margin: 0 0 25px 0;
  }

	/* 1ページものを2個並びに（space-betweenで左右ぴったり揃います） */
	.box-edu-page-25 {
		width: 47%; /* 間の隙間は自動的に4%分空きます */
		margin: 0 0 25px 0;
	}
	
	.edu-contents-button a { width: 100%; }
}