@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */
/* ---------------------------------------------------
	Common parts
------------------------------------------------------ */
.btn a { display: block; min-width: 300px; padding: 20px 10px; background: var(--brand-orange); color: var(--neutral-white); font-size: 16px; line-height: 1.88; text-align: center; transition: background-color .5s;}
@media screen and (min-width: 601px) and (hover: hover) {
	.btn a:hover { opacity: 1; background: var(--brand-orange2);}
}

@media screen and (max-width: 600px) {
	.btn { width: 100%;}
	.btn a { min-width: 0; padding: 15px 10px;}
}


/* ---------------------------------------------------
	Main img
------------------------------------------------------ */
#main_img { position: relative;}
#main_img .slider .slick-track { display: flex;}
#main_img .slider .slick-slide { height: auto;}
#main_img [class^="item"] { position: relative; overflow: hidden; color: var(--neutral-white);}
#main_img [class^="item"] > img { position: absolute; top: 0; left: 0;}
#main_img [class^="item"]::before { content: ''; position: absolute; inset: 0; z-index: 1;}
#main_img .item01::before { background: var(--neutral-black-opacity-30);}
#main_img .item02::before { background: var(--neutral-black-opacity-50);}

#main_img .inner { display: flex; align-items:center; justify-content: space-between; min-height: 90vh; padding: 30px 0 30px 38px; position: relative; z-index: 2;}
#main_img .book { flex-shrink: 0; width: 471px; height: auto; aspect-ratio: 471 / 682;  }
#main_img .book img { display: block; width: 100%; height: 100%; object-fit: contain; }
#main_img .txt { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; font-size: 20px; line-height: 1.7; position: relative; width: max(560px, 53%); }
#main_img .tit_box { display: flex; flex-direction: column; align-items: flex-start; gap: 20px;}
#main_img .label { padding: 5px 20px; border: 1px solid var(--neutral-white);}
#main_img .tit { font-size: 70px; line-height: 1.14;}
#main_img .item02 .tit { display: flex; align-items: center; gap: 20px;}
#main_img .item02 .tit span { font-size: 20px; line-height: 1.7;}
#main_img .name { font-size: 16px; line-height: 1.88;}

#main_img .emblem {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 151px; height: auto; aspect-ratio: 1 / 1; position: absolute; top: 106px; right: 0;
	background: #B49540; text-align: center; border-radius: 100vmax;
}
#main_img .emblem p { font-size: 20px; line-height: 1.2;}
#main_img .emblem .small_txt { font-size: 12px; }
#main_img .emblem .num { letter-spacing: -0.1em;}
#main_img .emblem .rank { font-size: 32px; line-height: 1.56;}
#main_img .emblem .rank em { font-size: 51px; font-style: normal; line-height: 0.98;}

#main_img .bar { width: 100%; height: 5px; position: absolute; bottom: 0; left: 0; z-index: 2; background: rgba(255, 255, 255, 0.5); transform: scaleX(0); transform-origin: left center;}
#main_img .is_play .bar { animation: main_bar 5.6s linear forwards;}
@keyframes main_bar {
	0% { transform: scaleX(0);}
	100% { transform: scaleX(1);}
}

#main_img .thumb { display: flex; gap: 11px; position: absolute; bottom: -40px; left: calc(50% + 294px); z-index: 3;}
#main_img .thumb button { display: block; width: 125px; height: 80px; padding: 0; position: relative; background: var(--neutral-black); border: none; border-radius: 0; appearance: none; cursor: pointer;}
#main_img .thumb button::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); transition: opacity 1.4s ease-in-out;}
#main_img .thumb button.active::after { opacity: 0;}
#main_img .thumb img { display: block;}

@media screen and (max-width: 600px) {
	#main_img .inner { flex-direction: column; justify-content: center; align-items: center; gap: 20px; padding: 20px 0; }
	#main_img .book { width: 150px; }
	#main_img .txt { gap: 15px; width: 100%; font-size: 15px;}
	#main_img .tit_box { gap: 10px;}
	#main_img .label { padding: 3px 15px; font-size: 14px;}
	#main_img .tit { font-size: 26px; line-height: 1.4; }
	#main_img .item02 .tit { gap: 10px;}
	#main_img .item02 .tit span { font-size: 14px;}
	#main_img .name { font-size: 14px;}
	#main_img .emblem { top: calc(50% - 60px); right: 0; left: auto; transform: scale(0.6); transform-origin: right top;}
	#main_img .thumb { top: auto; bottom: -25px; right: 6%; left: auto; gap: 8px;}
	#main_img .thumb button { width: 80px; height: 51px;}
}


/* ---------------------------------------------------
	Lead
------------------------------------------------------ */
#lead { padding: 120px 0 0; font-size: 20px; line-height: 1.7; text-align: center;}
#lead h1 { margin: 30px 0; color: var(--brand-orange); font-size: 40px; line-height: 1.38;}
#lead .cnav { display: flex; justify-content: center; gap: 20px; margin: 47px 0 0;}
#lead .cnav a { display: block; min-width: 300px; padding: 20px 30px; background: var(--surface-neutral-01); font-size: 16px; line-height: 1.88;}
#lead .cnav li:nth-child(2) a { background: var(--surface-neutral-03); color: var(--neutral-black-opacity-50);}

@media screen and (max-width: 600px) {
	#lead { padding: 80px 6% 30px; font-size: 15px;}
	#lead h1 { margin: 20px 0; font-size: 20px; line-height: 1.5;}
	#lead .cnav { flex-direction: column; gap: 10px; margin: 30px 0 0;}
	#lead .cnav a { min-width: 0; padding: 15px 20px;}
}


/* ---------------------------------------------------
	Books（sec01 / sec02）
------------------------------------------------------ */
#sec01 { padding: 120px 0 150px; background: var(--surface-neutral-01);}
#sec02 { padding: 120px 0 150px;}
:is(#sec01, #sec02) .inner { display: flex; flex-direction: column; align-items: center; gap: 100px;}

:is(#sec01, #sec02) .book_box { display: flex; align-items: center; gap: 80px; width: 100%;}
:is(#sec01, #sec02) .book_box .img { flex-shrink: 0; width: 471px; height: auto; aspect-ratio: 471 / 682; }
:is(#sec01, #sec02) .book_box .img img { display: block; width: 100%; height: 100%; object-fit: contain; }
:is(#sec01, #sec02) .txt_box { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 0 10px;}
:is(#sec01, #sec02) .txt_box .tit { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding: 0 0 30px; color: var(--text-brand-01);}
:is(#sec01, #sec02) .txt_box h2 { font-size: 60px; line-height: 1.17;}
:is(#sec01, #sec02) .txt_box .sub { font-size: 20px; line-height: 1.7;}
:is(#sec01, #sec02) .txt_box .name { font-size: 18px;}
:is(#sec01, #sec02) .txt_box .name a { color: var(--text-brand-01);}
:is(#sec01, #sec02) .txt_box .txt { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; color: var(--neutral-black-opacity-60);}
:is(#sec01, #sec02) .txt_box .spec { font-family: var(--font-gothic); font-size: 14px; line-height: 1.71;}

#sec01 .toc { display: flex; align-items: center; gap: 40px; width: 100%; padding: 40px 60px; background: var(--neutral-white); border-radius: 20px;}
#sec01 .toc h3 { flex-shrink: 0; padding: 0 30px; font-size: 24px; line-height: 1.25;}
#sec01 .toc .list { display: flex; gap: 10px; flex: 1; color: var(--neutral-black-opacity-60); font-family: var(--font-gothic); font-size: 14px; font-weight: 700; line-height: 2.14;}
#sec01 .toc .list p { flex: 1;}

#sec02 .excerpt { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 40px 60px; background: var(--surface-neutral-01); border-radius: 20px; color: var(--neutral-black-opacity-60); font-family: var(--font-gothic); font-size: 14px; font-weight: 700; line-height: 2.14;}
#sec02 .excerpt .cite { color: var(--neutral-black-opacity-30); text-align: right;}

:is(#sec01, #sec02) .movie { display: flex; flex-direction: column; align-items: center; gap: 30px;}
:is(#sec01, #sec02) .movie h3 { padding: 10px; color: var(--text-brand-01); font-size: 30px; line-height: 1.13; text-align: center;}
:is(#sec01, #sec02) .movie iframe { display: block; width: 900px; height: auto; aspect-ratio: 16 / 9; border: none;}

@media screen and (max-width: 600px) {
	#sec01,
	#sec02 { padding: 60px 0 70px;}
	:is(#sec01, #sec02) .inner { gap: 50px;}

	:is(#sec01, #sec02) .book_box { flex-direction: column; gap: 30px;}
	:is(#sec01, #sec02) .book_box .img { width: 70%;}
	:is(#sec01, #sec02) .book_box .img img { height: auto;}
	:is(#sec01, #sec02) .txt_box { width: 100%; padding: 0;}
	:is(#sec01, #sec02) .txt_box .tit { gap: 10px; padding: 0 0 15px; }
	:is(#sec01, #sec02) .txt_box h2 { font-size: 32px; line-height: 1.4; }
	:is(#sec01, #sec02) .txt_box .sub { font-size: 16px; line-height: 1.6; }
	:is(#sec01, #sec02) .txt_box .name { font-size: 15px; line-height: 1.6; }
	:is(#sec01, #sec02) .txt_box .spec { font-size: 13px;}

	#sec01 .toc { flex-direction: column; align-items: stretch; gap: 15px; padding: 25px 20px;}
	#sec01 .toc h3 { padding: 0; font-size: 20px; text-align: center;}
	#sec01 .toc .list { flex-direction: column; gap: 0; font-size: 13px; line-height: 1.85;}

	#sec02 .excerpt { padding: 25px 20px; font-size: 13px; line-height: 1.85;}

	:is(#sec01, #sec02) .movie { gap: 15px; width: 100%;}
	:is(#sec01, #sec02) .movie h3 { padding: 0; font-size: 22px;}
	:is(#sec01, #sec02) .movie iframe { width: 100%;}
}


/* ---------------------------------------------------
	Author（sec03）
------------------------------------------------------ */
#sec03 { padding: 150px 0; background: var(--surface-neutral-01);}
#sec03 .inner { display: flex; flex-direction: column; gap: 40px;}
#sec03 h2 { color: var(--text-brand-01); font-size: 30px; line-height: 1.13;}
#sec03 .box { display: flex; align-items: center; gap: 50px;}
#sec03 .img { flex-shrink: 0; width: 400px; height: 470px;}
#sec03 .img img { display: block; object-position: bottom;}
#sec03 .txt { display: flex; flex-direction: column; gap: 20px; flex: 1;}
#sec03 h3 { color: var(--text-brand-01); font-size: 24px; line-height: 1.25;}
#sec03 .txt p { color: var(--neutral-black-opacity-60);}
#sec03 .txt p + p { margin: 10px 0 0;}

@media screen and (max-width: 600px) {
	#sec03 { padding: 60px 0 70px;}
	#sec03 .inner { gap: 25px;}
	#sec03 h2 { font-size: 24px; text-align: center; }
	#sec03 .box { flex-direction: column; gap: 25px;}
	#sec03 .img { width: 80%; height: auto; aspect-ratio: 400 / 470;}
	#sec03 .txt { width: 100%; gap: 10px; }
	#sec03 h3 { font-size: 20px; line-height: 1.5; }
}