/* ページCSSチェック用 */
		#loading {
			display: none !important;
		}

#loading {
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
    background: #fdfdfd;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3%;
}



#loading .TopAnimation {
	width: 50%;
	height: auto;
}
#loading .TopLogo {
	width: 20%;
	height: auto;
}
#loading img {
	width: 100%;
	height: auto;
}
#wrapper {
	opacity: 1;
}
#wrapper {
	position: relative;
	/*z-index: 100;*/
}
.loaded #wrapper {
	opacity: 1;
}
.none {
	display: none !important;
}
.no-js #loading {
	display: none !important;
}
.js .none {
	display: none !important;
}
.js #wrapper {
	opacity: 0;
}
@keyframes fade_out {
	0% { left:0% }
	100% { left:-100vw }
}
.loading_off #loading {
	animation:fade_out .75s 1.5s forwards;
}
.fadein_L-to-R {
  opacity : 0;
  transform: translateX(-30px);
  transition: all 0.7s;
}
.fadein_B-to-T {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}

/*!!!!! https://front-end-tools.com/generateButton/ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.original-button {
		font-size: 18px;
		width: 200px;
		height: 75px;
		cursor: pointer;
		background-color: transparent;
		margin: 50px auto;
		border: none;
		display: block;
		text-decoration: none;
		position: relative;
		transition: 0.3s;
	}
		.original-button a {
			width: 100%;
			height: 100%;
			color: #333;
			font-weight: bold;
			position: relative;
			z-index: 1;
			justify-content: center;
			align-items: center;
		}

	.original-button::before, .original-button::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		border: 2px solid #000000;
		position: absolute;
		transition: .3s;
	}
		.original-button::before {
			top: -4px;
			left: -4px;
		}
		.original-button::after {
			top: 4px;
			left: 4px;
		}


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

#contents_body {
	background: none;
	padding: 0;
}

strong {  }

#contents article {
}
article section {
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

aside.supplement {
	color:white;
	background: #3c3c3c;
	margin-bottom: 30px;
    padding: 12px;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

section.E-books {
	padding: 0px 15px 70px;
}
	section.E-books_01 {
		background: -webkit-linear-gradient(135deg, rgb(144, 57, 173), transparent);
		background: linear-gradient(135deg, rgb(144, 57, 173), transparent);
	}
	section.E-books_empty {
		background: -webkit-linear-gradient(135deg, rgb(80, 80, 80), transparent);
		background: linear-gradient(135deg, rgb(80, 80, 80), transparent);
	}
	section.E-books_related {
		display: none;/* 2冊目以降作ってから表示して */
	}
	section.E-books_related {
		padding: 0px 0px 0px;
	}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.E-books h2 {
	z-index: 1;
	width: fit-content;
	margin: 0 auto;
	padding: 15px 0;
	font-weight: normal;
    color: #fdfdfd;
	background:rgba(0,0,0,0);
	position: relative;
	/*word-break: keep-all; <wbr>したかったけど横線で改行される */
}
	.E-books_empty h2 {
		color: #ccc;
	}
	.E-books_related h2 {
		color: #333;
	}

.E-books h2 strong {
	font-weight: normal;
	vertical-align:middle;
	font-size: 130%;
	position: relative;
}
	.E-books h2:before {/* 球 */
		z-index: -1;
		content: "";
		width: 50px;
		height: 50px;
		left: -10px;
		top: 10px;
		border-radius: 50%;
		position: absolute;
	}
		.E-books_01 h2:before {/* 球の色 */
			background: #a27bff;
		}
		.E-books_empty h2::before {
			display: none;
		}

	.E-books h2::after {/* 下線 */
		display: block;
	    width: 100%;
	    height: 3px;
	    content: '';
	    position: absolute;
	    bottom: 15px;
	    left: 0%;
	}
		.E-books_01 h2::after {/* 下線の色 */
			background: purple;
			background: -webkit-linear-gradient(-45deg, transparent, purple 10%, purple 90%, transparent);
			background: linear-gradient(-45deg, transparent, purple 10%, purple 90%, transparent);
		}
		.E-books_empty h2::after {
			background: #ccc;
			background: -webkit-linear-gradient(-45deg, transparent, #ccc 10%, #ccc 90%, transparent);
			background: linear-gradient(-45deg, transparent, #ccc 10%, #ccc 90%, transparent);
		}



/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

ul.BookList {
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

	.BookList li {
		aspect-ratio: 3 / 4;
	    list-style: none;
	    border: 1px solid #eee;
	}
		.BookList li.comingsoon {
			align-items: center;
		    justify-content: center;
		}
			.BookList li.comingsoon p {/* comming soon */
				line-height: 1;
				text-align: center;
				color: #eee;
			}

		.BookList li a img {
			width: 100%;
			height: 100%;
		}
		/*!!!!!!!!!!!!!!!!!!!!!*//*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
			/* chatGPT 光エフェクト */
			.BookList li.EffectOn {
				position: relative;
				overflow: hidden; /* 光がはみ出さないようにする */
			}
			.BookList li.EffectOn::before {
				content: "";
				cursor: pointer;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); /* 白い光の効果 */
				transition: left 0.3s ease; /* きらっと光る速度 */
				position: absolute;
				top: 0;
				left: -100%;
				opacity: 0;/* ホバー外れると見えない */
			}
				.BookList li.EffectOn:hover::before {
					left: 100%; /* ホバー時に右から左へ光が走る */
					opacity: 1;/* ホバー時現れる */
				}
				/*.BookList li.EffectOn {
					filter: grayscale(1);
				}
				.BookList li.EffectOn:hover {
					filter: grayscale(0);
				}*/
		/*!!!!!!!!!!!!!!!!!!!!!*//*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*//*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*//*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*//*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*//*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.ContentArea {
	width: 100%;
    height: auto;
	list-style:none;
	text-align:center;
	border: 1px solid #eee;
    margin: 0 auto;
}
	.ContentArea .Cover { grid-column: 1; grid-row: 1 / 3; }
	.ContentArea .Intro { grid-column: 2; grid-row: 1; }
	.ContentArea .Title { grid-column: 2; grid-row: 2; }

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.Cover {
	position:relative;
	overflow: hidden;
}
.Cover img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* コンテナを埋めつつアスペクト比を維持 */
  object-position: center; /* 画像の中央を表示 */
    transition-duration: 0.3s;
}
.Cover img.zoom-up {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	-moz-transition-duration:0.3s;
	-webkit-transition-duration:0.3s;
	-o-transition-duration:0.3s;
	-ms-transition-duration:0.3s;
	transition-duration: 0.3s;
}

.Cover .readmore {
	width: 80%;
	height: auto;
	position: absolute;
	top:80%;
	right:-80%;
	background: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)); /* 円形グラデーション */
	-moz-transition-duration:0.3s;
	-webkit-transition-duration:0.3s;
	-o-transition-duration:0.3s;
	-ms-transition-duration:0.3s;
	transition-duration: 0.3s;
	background: radial-gradient(rgba(0, 0, 0, 0.6), #000000); /* けっこう暗くしないと文字が見にくいので注意 */
	font-size: 30px;
	line-height:1.6;
	color: #fdfdfd;
	opacity:0;
}
.readmore.fadeIn {right:0%;opacity:1;}
.readmore span {text-shadow: 0 0 2px #000;filter: blur(4px);}
.readmore.fadeIn span {filter: blur(0);}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.Intro {
	background: #fdfdfd;
	border-left: 1px solid;
}
.Intro p {
    text-align:justify;
    margin: 20px 20px;
    line-height: 1.3;
}
.Intro h6 {
    background: #d7d7d7;
    padding: 10px 0;
    line-height: 1;
}



/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.Title {
	border-top: 1px solid;
	display: grid;
	grid-template-rows: 45% 25% 30%;
	align-items: center;
}
	.Title h3 { grid-row: 1; }
	.Title .btn-area { grid-row: 2; }
	.Title aside { grid-row: 3; }

	.Title {
		background: #3c3c3c;
	}
	.comingsoon .Title {
		background: none;
	}

	.Title h3, .Title aside {
	    color:white;
	}

.Title .btn-area {
	height: 100%;
}
.Title .ReadTrial_btn {
    font-size: 18px;
    border-radius: 20px;
    display: flex;
    font-family: Arial;
    color: #fdfdfd;
    width: 180px;
    height: 100%;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}
.Title .ReadTrial_btn {
	cursor:pointer;
	position:relative;
	text-shadow:1px 1px 0px #2f6627;
	background-image: linear-gradient(to right, #e54cca 0%, #998bfa 51%, #70d0e0 100%);
	transition: all  0.3s ease-out;
    background-size: 200% auto;
}
	.ReadTrial_btn:visited:hover,
	.ReadTrial_btn:visited,.ReadTrial_btn:visited:active { color: #fdfdfd; }
/*	.ReadTrial_btn:active {color:gray;}
	.ReadTrial_btn:visited:active {color:gray;}
	.ReadTrial_btn:active span::before,
	.ReadTrial_btn:visited:active span::before {color:gray;}*/


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↑↑↑共通部分↑↑↑ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( font-size )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	aside.supplement, .Title aside {
		font-size: 1rem;     /* 16px */
	}

	.E-books h2, .Title h3 {
		font-size: 1.5rem;   /* 24px */
	}
	.BookList li.comingsoon p {/* comming soon */
		font-size: 1.25rem;  /* 20px */
	}

	.Intro p, .Intro h6 {
		font-size: 1.125rem; /* 18px */
	}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( 各種条件分岐 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	.ContentArea {
	    grid-template-rows: 7fr 3fr;
	}

@media screen and (orientation: landscape) {

	#loading .TopAnimation {
		width: 50%;
	}
	#loading .TopLogo {
		width: 25%;
	}

	.ContentArea {
        grid-template-columns: 50% 50%;
		max-width: 750px;
	}

	.BookList li {
	    width: calc((100% - 10* 3px) / 4);/*間のgapの個数分引いて等分*/
	}

}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

@media screen and (orientation: portrait) {

	#loading .TopAnimation {
		width: 100%;
	}
	#loading .TopLogo {
		width: 50%;
	}

	.ContentArea {
        grid-template-columns: 60% 40%;
	}

	.BookList li {
	    width: calc((100% - 10* 2px) / 3);/*間のgapの個数分引いて等分*/
	}

} @media screen and (width < 768px) and (orientation: portrait) {

	.ContentArea {
		grid-template-columns: 100%;
		grid-template-rows: auto auto 150px;
	}
		.ContentArea .Cover { grid-column: 1; grid-row: 1; }
		.ContentArea .Intro { grid-column: 1; grid-row: 2; }
		.ContentArea .Title { grid-column: 1; grid-row: 3; }

	.BookList li {
	    width: calc((100% - 10* 1px) / 2);/*間のgapの個数分引いて等分*/
	}

}
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↑↑↑（共通スタイル）↑↑↑ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓特殊３カラム（ノートPC--iPadpro横）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (1280px <= width <= 1366px) and (orientation: landscape) {


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓２カラム（タブ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (933px <= width < 1280px) and (orientation: landscape),
       screen and (768px <= width < 1280px) and (orientation: portrait) {/* ２カラム共通スタイル */



/*:::::２カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (933px <= width < 1280px) and (orientation: landscape) {


/*:::::２カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (768px <= width < 1280px) and (orientation: portrait) {


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓１カラム（スマホ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (width < 933px) and (orientation: landscape),
       screen and (width < 768px) and (orientation: portrait) {/* １カラム共通スタイル */


/*:::::１カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 933px) and (orientation: landscape) {

} @media screen and (width < 700px) and (orientation: landscape) {/* iPhoneSE横 */

/*:::::１カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 768px) and (orientation: portrait) {

} @media screen and (width <= 480px) and (orientation: portrait) {

} @media screen and (width <= 375px) and (orientation: portrait) {/* iPhoneSE縦 */

} @media screen and (width <= 320px) and (orientation: portrait) {

}
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


/*::::::::::::::::::::::::::::::( ホバー時の挙動 )::::::::::::::::::::::::::::::::::*/
/* https://pengi-n.co.jp/blog/hover/ */

@media (hover: hover) {

	.ReadTrial_btn:hover {
	    background-color: #998bfa;
	    background-position: right center;
		padding-left: 18px;/* 右へ15px移動 */
	}
	.ReadTrial_btn span::before {
		content:"\03e"; /* ←16進数で「>」 */
		color:white;
		position:absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    left: 30px;
	    opacity: 0;
	}
	.ReadTrial_btn:hover span::before,
	.ReadTrial_btn:visited:hover span::before {
		transition-delay: .05s; /* 「試」の文字と重なるのでディレイ */
		opacity: 1;
	}


			.original-button:hover::before, .original-button:hover::after {
				top: 0;
				left: 0;
				border-color: red;
			}
			.original-button:hover a, .original-button:visited:hover a {
				color: red;
			}





}


/*::::::::::::::::::::::::::::::( ホバーできない機種の挙動 )::::::::::::::::::::::::::::::::::*/

@media (hover: none) {

.Cover .readmore { display: none; }

	.ReadTrial_btn:active {
	    background-color: #998bfa;
	    background-position: right center;
	}
	.ReadTrial_btn span::before {
		 display: none;
 	}



			.original-button:active::before, .original-button:active::after {
				top: 0;
				left: 0;
				border-color: red;
			}
			.original-button:active a, .original-button:visited:active a {
				color: red;
			}



}