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

/*======================================================================

タイトルアニメーション

======================================================================*/

/* タイトルアニメーション領域
-------------------------------------------------*/
#titleAnime {
	background-color: darkgray;/*#FFFFFF*/
	position: relative;
	opacity: 0;
	/*max-width: 1020px;*/
}
#catchcopy, #copy, #white, #title, #ta05, #ta06, #downwards {
	position: absolute;
	top: 0;
	left: 0;
}

/* キャッチコピー
-------------------------------------------------*/
#catchcopy {
	opacity: 0;
}
#catchcopy p {
	position: absolute;
	font-family: "Noto Serif JP";
	writing-mode: vertical-rl;
	color: #D81B60;
	/*border: 1px solid #000;*/
}

/* コピー
-------------------------------------------------*/
#copy {}
#copy p {
	position: absolute;
	font-family: "Noto Serif JP";
	font-weight: 500;
	text-shadow: 0 0 7px #FFFFFF;
	/*border: 1px solid #000;*/
}
#copy0, #copy1, #copy2 {
	opacity: 0;
}

/* 白板
-------------------------------------------------*/
#white {
	background-color: #FFF;
	opacity: 1;
}

/* ▼マーク
-------------------------------------------------*/
#downwards {
	opacity: 0;
}

/* タイトル
-------------------------------------------------*/
#title {
	background-color: #FBFAF1;
	height: 134px;
	width: 100%;
	border-top: 1px solid #F06292;
	border-bottom: 1px solid #F06292;
	/*opacity: 0;*/
}
#title img {
	position: absolute;
}

/* メイン画像a
-------------------------------------------------*/
#img_a{
	position: absolute;
	background-image: url("../images/titlebackBg-amber.jpg");
	background-repeat: no-repeat;
}

/* メイン画像b
-------------------------------------------------*/
#img_b{
	position: absolute;
	background-image: url("../images/titlebackBg.jpg");
	background-repeat: no-repeat;	
}


/*======================================================================

コンテンツ

======================================================================*/

/* index.html／監修者テーブル／リード	（202407改修）
------------------------------------------*/
#wrapper .adminWrap {
	padding: 0 1.5em 0 1.5em;
	font-size: 1.2em;
}
#wrapper .adminWrap p {
	line-height: 2em;
}

/* index.html／見出し
------------------------------------------------------------*/
.heading-wrap {
	font-size: 0;
	padding: 0;
	margin: 2rem 0;
	border-bottom: 3px solid #D81B60;	
	width: 100%;
}
.heading {
	display: inline-block;
	color: #D81B60;
	font-size: 1.2rem;
	font-weight: 700;
	padding: 0;
	/*border-bottom: 1px solid #D81B60;*/
}

/*.container {
	padding: 0;
	margin: 4rem 0;
	width: 100%;
}*/
.keireki p {
	line-height: 1.5em;
	margin-bottom: 1em;
}

@media (max-width: 380px) {
	/* 縦2、横3のグリッド */
	.container {
		display: grid;
		place-items: center start;
		grid-template-rows: 190px 1fr;
		grid-template-columns: 1fr 43%;
	}
	.katagaki {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
	}
	.facePhoto {
		grid-row: 1 / 2;
		grid-column: 2 / 3;
	}
	.keireki {
		grid-row: 2 / 3;
		grid-column: 1 / span 3;
	}
	.facePhoto img {
		max-height: 165px;
		width: auto;
	}
}
@media (min-width: 381px) and  (max-width: 410px) {
	/* 縦2、横3のグリッド */
	.container {
		display: grid;
		place-items: center start;
		grid-template-rows: 200px 1fr;
		grid-template-columns: 1fr 5% 40%;
	}
	.katagaki {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
	}
	.facePhoto {
		grid-row: 1 / 2;
		grid-column: 2 / 3;
	}
	.keireki {
		grid-row: 2 / 3;
		grid-column: 1 / span 3;
	}
	.facePhoto img {
		max-height: 175px;
		width: auto;
	}
}
@media (min-width: 411px) and (max-width: 430px) {
	/* 縦2、横3のグリッド */
	.container {
		display: grid;
		place-items: center start;
		grid-template-rows: 225px 1fr;
		grid-template-columns: 1fr 5% 42%;
	}
	.katagaki {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
	}
	.facePhoto {
		grid-row: 1 / 2;
		grid-column: 3 / 4;
	}
	.keireki {
		grid-row: 2 / 3;
		grid-column: 1 / span 3;
	}
	.facePhoto img {
		max-height: 190px;
		width: auto;
	}
}
@media (min-width: 431px) and (max-width: 470px) {
	/* 縦2、横3のグリッド */
	.container {
		display: grid;
		place-items: center start;
		grid-template-rows: 235px 1fr;
		grid-template-columns: 1fr 5% 44%;
	}
	.katagaki {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
	}
	.facePhoto {
		grid-row: 1 / 2;
		grid-column: 3 / 4;
	}
	.keireki {
		grid-row: 2 / 3;
		grid-column: 1 / span 3;
	}
	.facePhoto img {
		max-height: 210px;
		width: auto;
	}
}
@media (min-width: 471px) and (max-width: 500px) {
	/* 縦2、横3のグリッド */
	.container {
		display: grid;
		place-items: center start;
		grid-template-rows: 250px 1fr;
		grid-template-columns: 1fr 5% 47%;
	}
	.katagaki {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
	}
	.facePhoto {
		grid-row: 1 / 2;
		grid-column: 3 / 4;
	}
	.keireki {
		grid-row: 2 / 3;
		grid-column: 1 / span 3;
	}
	.facePhoto img {
		max-height: 225px;
		width: auto;
	}
}
@media (min-width: 501px) and (max-width: 700px) {
	/* 縦2、横3のグリッド */
	.container {
		display: grid;
		place-items: center start;
		grid-template-rows: 265px 1fr;
		grid-template-columns: 1fr 5% 50%;
	}
	.katagaki {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
	}
	.facePhoto {
		grid-row: 1 / 2;
		grid-column: 3 / 4;
	}
	.keireki {
		grid-row: 2 / 3;
		grid-column: 1 / span 3;
	}
	.facePhoto img {
		max-height: 240px;
		width: auto;
	}
}
@media (min-width: 701px) {	
	/* 縦1、横3のグリッド */
	.container {
		display: grid;
		grid-template-rows: 1fr ;
		grid-template-columns: 180px 180px 30px 1fr;
	}
	.katagaki {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
	}
	.facePhoto {
		grid-row: 1 / 2;
		grid-column: 2 / 3;
	}
	.keireki {
		grid-row: 1 / 2;
		grid-column: 4 / 5; 
	}
}