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

#single article #ichiran  {
	background-color: #eaeae2;
	max-width: 460px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	font-weight: 500;
	height: 3em;
	margin: 30px auto;
	border-radius: 20px;
}

#sec01 dl,#sec05 dl {
	padding: 1em 0;
}
#sec01 dt,#sec05 dt {
	font-size:21px;
	font-weight: 500;
	border-bottom: #ea5c71 solid 1px;
	padding-bottom: 0.2em;
	margin-bottom: 0.4em;
}
#sec01 dd,#sec05 dd {
	font-size: 18px;
}
.mangaBox {
	margin-bottom: 5%;
}
.endBox {
	margin-bottom: 2%;
}
.linkMov {
	position: relative;
}
.linkMov a {
	display: block;
	position: absolute;
	width: 7%;
	left: 19%;
	bottom: 48%;
}

#sec03 h5 {
	font-size: 21px;
	font-weight: 500;
	padding: 0.5em 0;
}
#sec03 .desc{
	padding-bottom: 0!important;
}
#sec03 .btnBox {
	padding: 10px;
}
#sec03 .btnBox a {
  border: #000 solid 1px;
  width: 40px;
  margin: 5px;
  border-radius: 100%;
}
#sec03 .btnBox a:hover {
  background-color: #eee;
}
.awasete {
	background-color: #fff5c4;
    padding: 25px 20px;
    max-width: 800px;
    margin: 0 auto;
}

#single .sec .awasete h3 {
	font-size: 21px;
	font-weight: 600;
	padding: 0;
	padding-bottom: 0.2em;
	border: none;
}
#single .sec .awasete h3::before {
	content: "▼";
	color: #ea5c71;
	transform: rotateZ(-90deg);
	display: inline-block;
	margin-right: 0.3em;
}
.awasete .flex {
	
}
.awasete .flex .imgBox {
	width: 46.2%;
	max-width: 350px;
	padding-bottom: 0!important;
	position: relative;
}
.awasete .flex .imgBox a {
	display: block;
	position: absolute;
	width: 16%;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.awasete .flex .txtBox {
	width: 50%;
}
.awasete .flex .txtBox .cap {
	font-size: 13px;
	border: #000 solid 1px;
	display: inline-block;
	line-height: 1;
	height: 2em;
	width: 15em;
	font-weight: 300;
	display: flex;
justify-content: center;
align-items: center;
	padding: 0;
	margin-bottom: 10px;
	
}
.awasete .flex .txtBox p {
	font-size: 24px;
	font-weight: 500;
	padding: 0 0 0.8em 0;
}
.awasete .flex .txtBox p span {
	display: block;
	font-size: 75%;
}
.awasete .flex .txtBox a {
	display: block;
	width: 100%;
	max-width: 200px;
	filter: brightness(100%) contrast(100%) saturate(90%);
	transition: 0.5s;
}
.awasete .flex .txtBox a :hover{
	filter: brightness(80%) contrast(160%) saturate(120%);
}
.awasete02 {
	margin-bottom: 30px!important;
}
#sec04 {}
#sec04 .flex01 {
	padding-bottom: 30px;
}
#sec04 .flex01 .imgBox {
	width: 49%;
	max-width: 390px;
}
#sec04 .flex01 .imgBox p {
	font-size: 18px;
}

@media screen and (max-width : 959px ){
	.awasete .flex .txtBox p {
    font-size: clamp(20px, 2.7vw, 22px);
	}
}



@media screen and (max-width : 599px ){
	#sec01 dt,#sec05 dt {
		font-size: clamp(16px, 4.6vw, 18px);
	}
	#sec01 dd,#sec05 dd {
		font-size: clamp(14px, 4vw, 16px);
	}
	#sec02 .imgBox {
		width: 110%;
		margin-left: -5%;
	}
	.prfBox a {
		display: block;
	}
	
	.awasete .flex {
		display: block;
	}
	.awasete .flex .imgBox {
		width: 90%;
		max-width: 320px;
		padding-bottom: 15px!important;
		margin: 0 auto;
	}
	.awasete .flex .txtBox {
		width: 100%;
	}
	.awasete .flex .txtBox h5 {
		margin: 0 auto;
	}
	.awasete .flex .txtBox h4,#aboutBox dl.dl01 dt {
		font-size: clamp(16px, 4.4vw, 18px);
		text-align: center;
	}

	.awasete .flex .txtBox .cap {
		margin: 0 auto 10px;
	}
	.awasete .flex .txtBox p {
    font-size: clamp(17px, 4.8vw, 19px);
		text-align: center;
	}
	.awasete .flex .txtBox a {
		margin: 0 auto;
	}
	#sec04 .flex01 {
		width: 90%;
		max-width: 350px;
		margin: 0 auto;
	}
	#sec04 .flex01 .imgBox {
    width: 100%;
    max-width: 390px;
		padding-bottom: 10px;
	}
	#sec04 .flex01 .imgBox p {
		font-size: clamp(13px, 3.7vw, 15px);
	}
}