@charset "utf-8";

/* Site Contents */
#site-wrap {
	overflow: hidden;
}
.lower-container {
	margin: auto;
}
@media screen and (min-width: 835px) {
	.lower-container {
		width: 800px;
	}
}
@media screen and (max-width: 834px) {
	.lower-container {
		width: 92%;
		max-width: 600px;
	}
}
/* loading */
#overlay{position:fixed;z-index:9999;width:100%;height:100%;background:#FFF;text-align:center;}
/* 背景共通 */
@media screen and (min-width: 835px) {
	.primary {
		padding: 120px 0 300px;
	}
}
@media screen and (max-width: 834px) {
	.primary {
		padding: 60px 0 130px;
	}
}
.primary::before {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	background-repeat: repeat-x;
	background-size: contain;
}
@media screen and (min-width: 835px) {
	.primary::before {
		height: 25px;
	}
}
@media screen and (max-width: 834px) {
	.primary::before {
		height: 12px;
	}
}
.primary::before {
	top: 0;
	background-image: url("/books/chuten/img/common/primary-bg-border-top.png");
}


/* ヘッダーコンテンツ */
.header-wrap {
	background: #05306b;
}
@media screen and (min-width: 835px) {
	.header-wrap {
		display: flex;
		justify-content: center;
		gap: 40px;
	}
}
@media screen and (min-width: 835px) {
	.navigation-logo{
		margin-left: 10px;
	}
}
@media screen and (min-width: 835px) {
	.navigation-list {
		width: 600px;
		gap: 15px;
		padding: 20px 0;
	}
}
@media screen and (max-width: 834px) {
	.navigation-list {
		gap: 10px 3px;
		max-width: 500px;
		margin: auto;
		padding: 22.5px 8px;
	}
}
@media screen and (min-width: 835px) {
	.navigation-list li {
		width: 130px;
	}
}


/* ストーリーコンテンツ */
.story-text-box p {
	padding-top: 3em;
	line-height: 2.3;
}
.story-text-box .text1::first-letter {
	font-weight: 600;
	line-height: 1;
}
@media screen and (min-width: 835px) {
	.story-text-box .text1::first-letter {
		font-size: 32px;
	}
}
.story-text-box1 .text1::first-letter {
	letter-spacing: .2em;
}
@media screen and (min-width: 835px) {
	.story-img2 {
		margin-top: 100px;
	}
}
@media screen and (max-width: 834px) {
	.story-img2 {
		margin-top: 50px;
	}
}
.story .button-link-bb {
	text-align: center;
}
@media screen and (min-width: 835px) {
	.story .button-link-bb {
		padding-top: 100px;
	}
}
@media screen and (max-width: 834px) {
	.story .button-link-bb {
		padding-top: 50px;
	}
}
@media screen and (max-width: 834px) {
	.story .button-link-bb a {
		width: 70%;
		max-width: 300px;
	}
}


/* ワールドコンテンツ */
@media screen and (min-width: 835px) {
	.world-box-airship {
		padding-top: 300px;
	}
}
@media screen and (max-width: 834px) {
	.world-box-airship {
		padding-top: 120px;
	}
}
.world h3 {
	text-align: center;
}
@media screen and (max-width: 834px) {
	.world h3 {
		width: 65%;
		margin: auto;
	}
}
@media screen and (min-width: 835px) {
	.world-box-img {
		padding-top: 90px;
	}
}
@media screen and (max-width: 834px) {
	.world-box-img {
		padding-top: 45px;
	}
}
@media screen and (min-width: 835px) {
	.world-explan-list {
		width: 650px;
		margin: auto;
		padding-top: 90px;
	}
}
@media screen and (max-width: 834px) {
	.world-explan-list {
		padding-top: 45px;
	}
}
@media screen and (min-width: 835px) {
	.world-explan-list li:nth-child(n + 2) {
		padding-top: 70px;
	}
}
@media screen and (max-width: 834px) {
	.world-explan-list li:nth-child(n + 2) {
		padding-top: 35px;
	}
}
.world-explan-list-title {
	padding-bottom: 10px;
	border-bottom: 1px solid #fff;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}
@media screen and (min-width: 835px) {
	.world-explan-list-title {
		font-size: 24px;
	}
}
@media screen and (max-width: 834px) {
	.world-explan-list-title {
		font-size: 20px;
	}
}
.world-box-map .world-explan-list-title p {
	border-top:4px solid #d6c9a5;
	border-bottom:4px solid #d6c9a5;
}
.world-box-map .hamin .world-explan-list-title p {
	background: #22bd96;
}
.world-box-map .seikyu .world-explan-list-title p {
	background: #2a2f8c;
}
.world-box-map .kokushi .world-explan-list-title p {
	background: #1a1a1a;
}
.world-box-airship .world-explan-list-title p {
	background: #fff;
	color: #002040;
}
.world-explan-list-title p span {
	display: inline-block;
}
.world-box-map .world-explan-list-title p span {
	padding: 1em 0 .7em;
}
.world-box-airship .world-explan-list-title p span {
	padding: .7em 0;
}
.world-explan-list-text {
	padding: 1em .5em 0;
	line-height: 2;
}


/* キャラクターコンテンツ */
.character-list li {
	position: relative;
}
@media screen and (min-width: 1001px) {
	.character-list li {
		display: flex;
		align-items: center;
	}
}
@media screen and (max-width: 1000px) {
	.character-list li:first-child {
		padding-bottom: max(50px, 13.333vw);
	}
}
@media screen and (max-width: 1000px) {
	.character-list li:nth-child(n + 2) {
		padding-bottom: max(70px, 18.667vw);
	}
}
@media screen and (min-width:1001px) {
	.character-list li:first-child {
		margin-top: -80px;
	}
}
@media screen and (max-width: 1000px) {
	.character-list li:first-child {
		margin-top: -100px;
	}
}
@media screen and (min-width:1001px) {
	.character-list li::before {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: max(950px, 81.5%);
		height: clamp(300px, 36.7%, 350px);
		content: '';
	}
	.character-list li.left::before {
		left: 0;
	}
	.character-list li.right::before {
		right: 0;
	}
	.character-list li.hamin::before {
		background: rgba(50, 199, 149, .9);
	}
	.character-list li.milles::before {
		background: rgba(222, 152, 31, .9);
	}
	.character-list li.sekyu::before {
		background: rgba(54, 55, 125, .9);
	}
	.character-list li.kokushi::before {
		background: rgba(24, 25, 28, .9);
	}
	.character-list li div {
		position: relative;
		z-index: 2;
	}
}
@media screen and (min-width: 1001px) {
	.character-list li.sekyu {
		padding-top: max(80px, 5.263vw);
	}
}
@media screen and (min-width: 1001px) {
	.character-list li.right {
		flex-direction: row-reverse;
	}
}
@media screen and (min-width:1001px) {
	.character-list-person {
		width: max(600px, 50.316vw);
	}
}
@media screen and (min-width:1001px) {
	.left .character-list-person {
		margin: 0 clamp(-150px, -7.895vw, -120px) 0 clamp(-250px, -13.158vw, -180px);
	}
}
@media screen and (min-width:1001px) {
	.right .character-list-person {
		margin: 0 clamp(-250px, -13.158vw, -180px) 0 clamp(-150px, -7.895vw, -120px);
	}
}
@media screen and (max-width: 1000px) {
	.character-list-person {
		width: 170vw;
		transform: translateX(-35vw);
		margin: auto;
		text-align: center;
	}
}
@media screen and (min-width:1001px) {
	.character-list-country {
		width: clamp(210px, 14.474vw, 275px);
	}
}
@media screen and (min-width:1001px) {
	.left .character-list-country {
		margin-left: clamp(70px, 7vw, 160px);
	}
}
@media screen and (min-width:1001px) {
	.right .character-list-country {
		margin-right: clamp(70px, 7vw, 160px);
	}
}
@media screen and (min-width:1301px) {
	.character-list-intro-box {
		gap: min(100px, 5.263vw);
	}
}
@media screen and (min-width:1001px) and (max-width: 1300px) {
	.character-list-intro-box {
		gap: 1vw;
	}
}
@media screen and (min-width:1001px) {
	.character-list-intro-box {
		display: flex;
	}
}
@media screen and (min-width:1001px) {
	.character-list-intro {
		width: clamp(320px, 22.632vw, 430px);
	}
}
@media screen and (max-width: 1000px) {
	.character-list-intro {
		width: 85%;
		max-width: 400px;
		margin: auto;
		padding: 2em 1em 1em 1em;
	}
}
@media screen and (min-width:1001px) {
	.kokushi .character-list-intro {
		margin-right: 20vw;
	}
}
@media screen and (max-width: 1000px) {
	.person .character-list-intro {
		position: absolute;
		top: max(410px, 64%);
		right: 0;
		left: 0;
		transform: translateY(-50%);
	}
}
@media screen and (max-width: 1000px) {
	.hamin .character-list-intro {
		background: rgba(50, 199, 149, .9);
	}
}
@media screen and (max-width: 1000px) {
	.milles .character-list-intro {
		background: rgba(222, 152, 31, .9);
	}
}
@media screen and (max-width: 1000px) {
	.sekyu .character-list-intro {
		background: rgba(54, 55, 125, .9);
	}
}
@media screen and (max-width: 1000px) {
	.kokushi .character-list-intro {
		background: rgba(24, 25, 28, .9);
	}
}
@media screen and (max-width: 1000px) {
	.hamin .character-list-intro:nth-child(2) {
		padding-top: 1em;
	}
}
@media screen and (min-width:1001px) {
	.character-list-intro .text {
		padding: min(40px, 2.105vw) 1.5em 0;
	}
}
@media screen and (max-width: 1000px) {
	.character-list-intro h3,
	.character-list-intro .text {
		width: 95%;
		margin: auto;
	}
}
@media screen and (max-width: 1000px) {
	.character-list-intro .text {
		padding: 1.5em 0 2em;
	}
}
@media screen and (max-width: 1000px) {
	.character-list-intro-country {
		width: 60%;
		margin-left: auto;
	}
}


/* 試し読みコンテンツ */
.sample-box {
	line-height: 2.8;
}
.sample-page {
	display: flex;
	justify-content: center;
	gap: 1em;
}
@media screen and (min-width: 835px) {
	.sample-page {
		padding-top: 100px;
	}
}
@media screen and (max-width: 834px) {
	.sample-page {
		padding-top: 50px;
	}
}
.sample-page li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3em;
	height: 3em;
	border: 2px #03347c solid;
	border-radius: 50%;
	color: #03347c;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	transition: .4s ease-out;
}
.sample-page li.current a,
.sample-page li a:hover {
	border-radius: 50%;
	background: #03347c;
	color: #fff;
}
@media screen and (min-width: 835px) {
	.sample-book {
		padding-top: 150px;
	}
}
@media screen and (max-width: 834px) {
	.sample-book {
		padding-top: 100px;
	}
}


/* スペシャルコンテンツ */
.special h3 {
	text-align: center;
}
@media screen and (min-width: 835px) {
	.special h3 {
		padding-bottom: 90px;
	}
}
@media screen and (max-width: 834px) {
	.special h3 {
		width: 65%;
		margin: auto;
		padding-bottom: 45px;
	}
}
@media screen and (min-width: 835px) {
	.special-box:nth-child(n + 2) {
		padding-top: 300px;
	}
}
@media screen and (max-width: 834px) {
	.special-box:nth-child(n + 2) {
		padding-top: 120px;
	}
}
.special-box-link-list {
	display: flex;
	justify-content: center;
}
.special-gallery .special-box-link-list {
	flex-wrap: wrap;
}
@media screen and (min-width: 835px) {
	.special-gallery .special-box-link-list {
		gap: 80px 20px;
	}
}
@media screen and (max-width: 834px) {
	.special-gallery .special-box-link-list {
		gap: 20px;
	}
}
@media screen and (min-width: 835px) {
	.special-comment .special-box-link-list {
		gap: min(6.25vw, 120px);
	}
}
@media screen and (max-width: 834px) {
	.special-comment .special-box-link-list {
		align-items: center;
		flex-direction: column;
		gap: 50px;
		width: 75%;
		margin: auto;
	}
}
@media screen and (min-width: 835px) {
	.special-icon .special-box-link-list {
		gap: min(2.344vw, 45px);
	}
}
@media screen and (max-width: 834px) {
	.special-icon .special-box-link-list {
		flex-wrap: wrap;
		gap: 20px;
	}
}
@media screen and (min-width: 835px) {
	.special-gallery .special-box-link-list .large {
		width: 100%;
		text-align: center;
	}
}
@media screen and (max-width: 834px) {
	.special-gallery .special-box-link-list .large {
		padding-bottom: 25px;
	}
}
@media screen and (max-width: 834px) {
	.special-gallery .special-box-link-list .small {
		width: 38%;
		max-width: 187px;
	}
}
@media screen and (max-width: 834px) {
	.special-icon .special-box-link-list li {
		width: 35%;
		max-width: 120px;
	}
}
.special-comment .special-box-link-list .text {
	padding-bottom: .5em;
	text-align: center;
}
@media screen and (min-width: 835px) {
	.special-comment .special-box-link-list .text {
		font-size: 20px;
	}
}
@media screen and (max-width: 834px) {
	.special-comment .special-box-link-list .text {
		font-size: 16px;
	}
}