@charset "utf-8";
/* CSS Document */
.sp { display: none;}

body {
	font-family: 'Zen Maru Gothic', serif;
	font-feature-settings : "palt";
	color: #595656;
	font-size: 16px;
	background: #FFF;
}
a{ color: #595656;}
a:hover{ }
a:before { transition-delay: .3s; }
a:visited{ color: #595656; }

img{ max-width: 100%; height: auto;}

.mb01{ margin-bottom: 90px;}

#bookheader{position: fixed;z-index: 9; width: 100%;}
.bookheader{background: #8fc31f; width: 100%; padding: 5px 0;}
.bookheader .bookheaderImg{width: 95%; max-width: 690px;}
.bookheader02{background: #3d4144; width: 100%; padding: 5px 0;}
.bookheader02 .bookheaderImg{width: 85%; max-width: 642px;}

.MainChimg {
    width: 100%;
    position: relative;
    padding-top: 108px;
    background: #fff8a5;
}

.w1200 {
	max-width: 1200px;
	margin: 0 auto;
	width: 80%;
}

section { 
	padding: 3rem 0;
	font-weight: bold;
}
section h2 { 
	margin-bottom: 2rem;
	text-align: center;
}

.movieWrap {
	width: 60%;
	margin: 0 auto;
}
.movieWrap a { position: relative;}
.movieWrap a i {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	transition: 0.3s all;
}
.movieWrap a:hover i {
	transform:scale(1.2,1.2);
	transition: 0.3s all;	
}

#bookmenu { background: #8fc31f;}
.bookmenu {
	display: flex;
	justify-content: center;
	gap: 1rem;
	width: 80%;
	margin: 0 auto;
}


#about {
	/*padding: 400px 0;*/
	/*background: url("../img/book/04/about-bg.jpg") left top;*/
	background-size: auto;
	text-align: center;
}
#about .w1200 { padding: 3rem 0;}
#about h3 {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 1.5rem;
}
#about h3 span { background: #ffe900;}
#about p {
	font-size: max(2.2vw, 24px);
	margin: 4rem 0;
	line-height: 1.8;
}


#creater { 
	background: #c7e782;
	text-align: left;
}
.createrWrap {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 3rem;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	/*border-bottom: dashed 2px #FFF;*/
}
.photo { 
	font-weight: normal;
	text-align: center;
	width: 20%;
}
.photo strong {
	font-weight: bold;
	font-size: 1.2rem;
	color: #FFF;
	display: block;
}
.comment {
	width: calc( 80% - 3rem);
	background: #FFF;
	padding: 2rem;
	border-radius: 1rem;
	font-size: 1.1rem;
	line-height: 1.8;
	position: relative;
}
/*.comment::after {
	content: "";
	position: absolute;
	top: 4rem;
	left: -1.3rem;
	background: #ffffff;
	height: calc(tan(60deg) * 1.8rem / 2);
	width: 1.5rem;
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
}*/
.aboutCR h3 {
	font-weight: bold;
	color: #FFF;
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
}
.aboutCR p { font-size: 1.1rem;}

/*スマホ・タブレット用の設定*/
@media screen and (max-width:1600px){
	/*#about {
		background-size: 100% auto;
		padding: 24vw 0;
	}*/
}
@media screen and (max-width:960px){
	.w1200 { width: 90%;}
	#about .w1200 { padding: 0;}
	.bookmenu { flex-wrap: wrap;}
}
@media screen and (max-width:800px) {	
}
@media screen and (max-width:782px){
	section h2 img { width: auto; height: 3rem;}
	
	.MainChimg { 
		background: none;
		padding-top: 70px;
	}
	.movieWrap a i img { width: 20%; }
	#about h3 { font-size: 1.5rem;}
	#about p { 
		font-size: max(3.8vw, 18px);
		/*text-align: left;*/
	}
	
	.createrWrap { 
		flex-direction: column;
		align-items: center;
	}
	.photo { width: 60%; }
	.comment { 
		width: 100%;
		box-sizing: border-box;
		font-size: 1rem;
	}
	
	.comment::after { 
		top: -1.5rem;
		left: calc(50% - 1.5rem);
		width: 3rem;
		clip-path: polygon(50% 0, 100% 100%, 0 100%);
	}
	.aboutCR p { font-size: 1rem;}
	
	.aboutCR h3 { text-align: center;}
}