@charset "utf-8";

/* PCヘッダー */

@media print, screen and (min-width:769px) {
	#pc-header {
		height: 130px;
	}
	#pc-header .inner {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
	}
	#pc-header .block1 {
		height: 80px;
		background: #231815;
		position: relative;
	}
	#pc-header .logo {
		width: 293px;
		height: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 10px 6px 0 rgba(0,0,0,0.1);
		background: #fff;
		position: absolute;
		left: 0;
		top: 0;
	}
	#pc-header .logo img {
		width: 217px;
	}
	#pc-header .h1-wrap {
		width: 270px;
		height: 202px;
		background: #e5e5e5;
		position: absolute;
		left: 352px;
		top: 0;
	}
	#pc-header .h1-wrap2 {
		width: 225px;
		height: 182px;
		margin: 0 auto;
		box-sizing: border-box;
		border: solid 1px #000;
		border-top: none;
	}
	#pc-header h1 {
		padding-top: 38px;
		font-weight: bold;
		text-align: center;
	}
	.pageLevel2 #pc-header h1 {
		padding-top: 18px;
	}
	#pc-header h1 .text1 {
		font-size: 13px;
		letter-spacing: 0.3em;
		display: inline-block;
	}
	#pc-header h1 img {
		width: 47px;
		display: inline-block;
	}
	#pc-header h1 .text2 {
		margin-top: 0;
		font-size: 15px;
		letter-spacing: 0.6em;
		display: inline-block;
		line-height: 2.2;
	}
	.pageLevel2 #pc-header h1 .text2 {
		font-size: 13px;
		line-height: 1.9;
	}
	.pageLevel2 #pc-header h1 .text3 {
		width: 100%;
		margin-top: 12px;
		padding: 0.4em 0;
		font-size: 14px;
		font-weight: 700;
		background: #231815;
		letter-spacing: 0.5em;
		position: relative;
		display: inline-block;
	}
	.pageLevel2.pageID-pe #pc-header h1 .text3::before {
		content: "保健体育";
		color: #bbc5ed;
	}
	.pageLevel2.pageID-math #pc-header h1 .text3::before {
		content: "数学";
		color: #6cc9f4;
	}
	.pageLevel2.pageID-science #pc-header h1 .text3::before {
		content: "理科";
		color: #00cda9;
	}
	.pageLevel2.pageID-dl #pc-header h1 .text3::before {
		content: "資料ダウンロード";
		color: #fff;
	}
	.pageLevel2.pageID-web #pc-header h1 .text3::before {
		content: "ウェブコンテンツ";
		color: #fff;
	}
	.pageLevel2.pageID-digi #pc-header h1 .text3::before {
		content: "デジタル教科書";
		color: #fff;
	}
	.pageLevel2.pageID-faq #pc-header h1 .text3::before {
		content: "よくある質問";
		color: #fff;
	}
	
	#pc-header .annai-black {
		height: 100%;
		padding-left: 30px;
		color: #fff;
		position: absolute;
		left: 293px;
		top: 0;
		display: none;
	}
	#pc-header .annai-black .text-wrap {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#pc-header .annai-black img {
		width: 42px;
		margin-right: 17px;
	}
	#pc-header .annai-black .text1 {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1.6;
	}
	.pageLevel2 #pc-header .annai-black .text1 br {
		display: none;
	}
	.pageLevel2 #pc-header .annai-black .text1 span {
		width: 1em;
		display: inline-block;
	}
	#pc-header .annai-black .text2 {
		margin-top: 0.2em;
		font-size: 23px;
		font-weight: 700;
		letter-spacing: 0.5em;
	}
	.pageID-top #pc-header .annai-black .text2 {
		display: none;
	}
	.pageID-science #pc-header .annai-black .text2 { color: #89f6a3; }
	.pageID-math #pc-header .annai-black .text2 { color: #6cc9f4; }
	.pageID-pe #pc-header .annai-black .text2 { color: #bbc5ed; }
	
	.pageID-science #pc-header .annai-black .text2::before { content: "理科"; }
	.pageID-math #pc-header .annai-black .text2::before { content: "数学"; }
	.pageID-pe #pc-header .annai-black .text2::before { content: "保健体育"; }
	.pageID-dl #pc-header .annai-black .text2::before { content: "資料ダウンロード"; letter-spacing: 0.05em; }
	.pageID-web #pc-header .annai-black .text2::before { content: "ウェブコンテンツ"; letter-spacing: 0.05em; }
	.pageID-digi #pc-header .annai-black .text2::before { content: "デジタル教科書"; letter-spacing: 0.05em; }
	.pageID-faq #pc-header .annai-black .text2::before { content: "よくある質問"; }
	
	#pc-header .nav1 {
		display: flex;
		justify-content: flex-end;
		box-sizing: border-box;
		position: absolute;
		right: 235px;
		top: 35px;
	}
	#pc-header .nav1 li {
		font-size: 11px;
		letter-spacing: 0.5em;
		font-weight: 700;
	}
	#pc-header .nav1 li + li {
		margin-left: 1em;
		padding-left: 1.3em;
		border-left: solid 2px #fff;
	}
	#pc-header .nav1 li a {
		color: #fff;
	}
	#pc-header .faq {
		height: 55px;
		color: #fff;
		letter-spacing: 0.4em;
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
	}
	#pc-header .faq p {
		height: 100%;
		padding-right: 58px;
		display: flex;
		align-items: center;
		background: url(../images/ico_ques.png) no-repeat right center / contain;
		font-size: 11px;
		font-weight: 700;
	}
	#pc-header .block2 {
		height: 50px;
		background: #ffedb0;
	}
	
	.pageID-pe #pc-header .block2 { background: #e4e8f8; }
	.pageID-math #pc-header .block2 { background: #b2ddfb; }
	.pageID-science #pc-header .block2 { background: #c7efdf; }
	.pageID-digi #pc-header .block2{ background: #68c9dc;}
	
	#pc-header .nav2 {
		height: 50px;
		margin-right: 235px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	#pc-header .nav2 li {
		font-size: 13px;
		font-weight: bold;
		letter-spacing: 0.5em;
	}
	#pc-header .nav2 li + li {
		margin-left: 1em;
		padding-left: 1.3em;
		border-left: solid 2px #000;
	}
	
	#pc-header .side-link li {
		text-align: right;
		position: fixed;
		right: 0;
		z-index: 90;
	}
	#pc-header .side-link li:nth-child(1) {
		top: 160px;	/* 185 → 160 */
	}
	#pc-header .side-link li:nth-child(2) {
		top: calc(160px + 102px);	/* 94 → 102 */
	}
	#pc-header .side-link li:nth-child(3) {
		top: calc(160px + (102px * 2));	/* 94 → 102 */
	}
	#pc-header .side-link li:nth-child(4) {
		top: calc(160px + (102px * 3));	/* 94 → 102 */
	}
	
	.pageID-top #pc-header .side-link li:nth-child(1) {
		display: none;
	}
	
	#pc-header .side-link li a {
		/* 少し耳を引っ込める
		padding: 0 14px 0 18px;
		*/
		padding: 0 6px 0 18px;
		display: inline-flex;
		align-items: center;
		height: 78px;
		font-size: 17px;	/* 19 → 17 */
		font-weight: 700;
		letter-spacing: 0.1em;
		border-radius: 39px 0 0 39px / 39px 0 0 39px;
		transition: background 0.3s ease-out;
		box-shadow: 13px 13px 9px 0 rgba(0,0,0,0.2);
	}
	#pc-header .side-link li.t a { background: #ffdc00; }
	#pc-header .side-link li.s a { background: #88f5a2; }
	#pc-header .side-link li.m a { background: #34d0fb; }
	#pc-header .side-link li.pe a { background: #baadee; }
	
	#pc-header .side-link li.t a:hover { background: #ffe88d; }
	#pc-header .side-link li.s a:hover { background: #b8f9c7; }
	#pc-header .side-link li.m a:hover { background: #85e3fd; }
	#pc-header .side-link li.pe a:hover { background: #d6cef5; }
	
	#pc-header .side-link li a span {
		display: inline-block;
		overflow: hidden;
	}
	
	.pageID-pe #pc-header .side-link li.pe a,
	.pageID-math #pc-header .side-link li.m a,
	.pageID-science #pc-header .side-link li.s a {
		background: #e6e6e6;
		color: #999;
	}
	
	#pc-header .nav1 a,
	#pc-header .nav2 a,
	#pc-header .faq {
		transition: text-shadow 0.2s ease-out;
	}
	#pc-header .nav1 a:hover,
	#pc-header .faq:hover {
		text-shadow: 3px 3px 4px rgba(255,255,255,0.8);
	}
	#pc-header .nav2 a:hover {
		text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
	}
}

/* PCヘッダー 中間調整 (グレーのボックスを左に寄せる) */
@media print, screen and (min-width:769px) and (max-width:1600px) {
	#pc-header .h1-wrap {
		left: 293px;
	}
}

/* PCヘッダー 中間調整 (グレーのボックスを一段落とす) */
@media print, screen and (min-width:769px) and (max-width:1315px) {
	#pc-header .logo {
		width: 270px;
		z-index: 10;
	}
	#pc-header .logo img {
		width: 208px;
	}
	#pc-header .h1-wrap {
		left: 0;
		top: 80px;
	}
}

/* PCヘッダー 中間調整 (ロゴ右の案内ボックスを小さくする) */
@media print, screen and (min-width:769px) and (max-width:1230px) {
	#pc-header .annai-black {
		left: 270px;
		padding-left: 15px;
	}
	#pc-header .annai-black img {
		width: 30px;
		margin-right: 8px;
	}
	#pc-header .annai-black .text1 {
		font-size: 10px;
	}
	#pc-header .annai-black .text2 {
		font-size: 12px;
		letter-spacing: 0.3em;
	}
}

/* PCヘッダー 中間調整 (文字サイズ落とす) */
@media print, screen and (min-width:769px) and (max-width:1120px) {
	#pc-header .nav1 {
		right: 200px;
		top: 36px;
	}
	#pc-header .nav1 li {
		font-size: 9px;
	}
	#pc-header .nav2 {
		margin-right: 200px;
	}
	#pc-header .nav2 li {
		font-size: 9px;
		letter-spacing: 0.4;
	}
	#pc-header .faq {
		height: 45px;
	}
	#pc-header .faq p {
		padding-right: 50px;
		font-size: 9px;
	}
}

/* PCヘッダー 最小サイズ調整 */
@media print, screen and (min-width:769px) and (max-width:1020px) {
	#pc-header .nav1 {
		right: 2%;
		top: auto;
		bottom: 20px;
	}
	#pc-header .nav2 {
		margin-right: 2%;
	}
	#pc-header .faq {
		height: 22px;
		top: 25px;
		right: 2%;
	}
	#pc-header .faq p {
		padding-right: 30px;
		letter-spacing: 0.3em;
	}
}

/* SPヘッダー */

@media screen and (max-width:768px) {
	#sp-header {
		padding-top: calc(95 / 640 * 100vw);
	}
	#sp-header .bg-white {
		width: 100%;
		height: calc(95 / 640 * 100vw);
		background: #fff;
		position: fixed;
		z-index: 90;
		left: 0;
		top: 0;
	}
	#sp-header .logo {
		width: calc(240 / 640 * 100vw);
		display: block;
		position: absolute;
		left: calc(30 / 640 * 100vw);
		top: calc(30 / 640 * 100vw);
	}
	
	#sp-header .goannai {
		padding: calc(35 / 640 * 100vw) 0;
		text-align: center;
		box-sizing: border-box;
		background: #e5e5e5;
		transition: padding 0.3s ease-out;
	}
	.pageID-dl #sp-header .goannai,
	.pageID-web #sp-header .goannai,
	.pageID-digi #sp-header .goannai,
	.pageID-faq #sp-header .goannai {
		display: none;
	}
	#sp-header .goannai .text1 {
		font-size: calc(22 / 640 * 100vw);
		font-weight: 700;
		letter-spacing: 0.2em;
	}
	#sp-header .goannai img {
		width: 7.5vw;
		display: inline-block;
		margin: 3vw 0 1vw;
	}
	#sp-header .goannai .text2 {
		font-size: calc(25 / 640 * 100vw);
		font-weight: 700;
		line-height: 2;
		letter-spacing: 0.5em;
	}
	.pageLevel2 #sp-header .goannai .text3 {
		margin-top: 3vw;
		padding: 0.4em 0;
		font-size: calc(42 / 640 * 100vw);
		font-weight: 700;
		background: #231815;
		letter-spacing: 0.5em;
		position: relative;
	}
	.pageLevel2.pageID-pe #sp-header .goannai .text3::before {
		content: "保健体育";
		color: #bbc5ed;
	}
	.pageLevel2.pageID-math #sp-header .goannai .text3::before {
		content: "数学";
		color: #6cc9f4;
	}
	.pageLevel2.pageID-science #sp-header .goannai .text3::before {
		content: "理科";
		color: #00cda9;
	}
	.pageLevel2 #sp-header .goannai .text3 .arrow {
		display:inline-block;
		position: absolute;
		right: 6vw;
		top: 15%;
		transform: scaleX(0.85);
		transition: all 0.3s ease-out;
	}
	.pageLevel2 #sp-header .goannai.on .text3 .arrow {
		transform: scaleX(0.85) rotate(180deg);
		top: 42%;
	}
	.pageLevel2 #sp-header .goannai .text3 .arrow::before {
		content: "";
		width: 0.8em;
		height: 0.8em;
		box-sizing: border-box;
		display: block;
		border-bottom: solid 2px #fff;
		border-right: solid 2px #fff;
		transform: rotate(45deg);
		position: relative;
	}
	
	#menu-btn {
		width: calc(47 / 640 * 100vw);
		position: absolute;
		right: 3vw;
		top: 3vw;
	}
	#menu-close {
		width: calc(50 / 640 * 100vw);
		position: absolute;
		right: 3vw;
		top: 3vw;
	}
	#menu-panel {
		width: calc(420 / 640 * 100vw);
		padding: calc(110 / 640 * 100vw) 0 calc(60 / 640 * 100vw);
		position: fixed;
		z-index: 200;
		right: calc(-420 / 640 * 100vw);
		top: 0;
		background: #000;
		transition: right ease-out 0.3s;
	}
	.on #menu-panel {
		right: 0;
	}
	#menu-panel ul li {
		letter-spacing: 0.3em;
	}
	#menu-panel .nav1 {
		padding-left: calc(60 / 640 * 100vw);
	}
	#menu-panel .nav1 li {
		font-size: calc(22 / 640 * 100vw);
	}
	#menu-panel .nav1 li + li {
		margin-top: 2.2em;
	}
	#menu-panel .nav1 li:nth-child(2) {
		margin-top: 1.4em;
	}
	#menu-panel .nav1 li a {
		color: #fff;
	}
	#menu-panel .nav1 li a.faq {
		height: calc(60 / 640 * 100vw);
		padding-right: calc(85 / 640 * 100vw);
		background: url(../images/ico_ques.svg) no-repeat right center / contain;
		display: inline-flex;
		align-items: center;
	}
	#menu-panel .nav2 {
		margin-top: calc(60 / 640 * 100vw);
		padding: calc(60 / 640 * 100vw) 0 0 calc(60 / 640 * 100vw);
		border-top: solid 1px #fff;
	}
	#menu-panel .nav2 li {
		font-size: calc(30 / 640 * 100vw);
		font-weight: 700;
	}
	#menu-panel .nav2 li + li {
		margin-top: 1.5em;
	}
	#menu-panel .nav2 li.science a {
		color: #00cda9;
	}
	#menu-panel .nav2 li.math a {
		color: #6cc9f4;
	}
	#menu-panel .nav2 li.pe a {
		color: #bbc5ed;
	}
	#menu-panel .nav2 li.top a {
		color: #ffd03a;
	}
}





/* デジタル教科書のご案内：20240216 */
#pc-header .nav2 li#digi a{
	line-height: 2;
	padding: 0;
	position: relative;
	/*
	background-color: greenyellow;
	*/
}
#pc-header .nav2 li#digi a::before{
	content: "";
	position: absolute;
	display: inline-block;
	padding: 0;
	background: url("../../common/SVG/ico_tsubasa_header.svg") no-repeat left center / 2.75em ;
	width: 3em;
	height: 2em;
	left: -3.5em;
	/*
	width: 40px;
	top: 0px;
	left: 0px;
	background-color: yellow;
	*/
}