/* -----------------------------------------------
= page-title
----------------------------------------------- */
.page-title {
	position: relative;
	height: 330px;
	color: #fff;
	overflow: hidden;
}
.page-title .set {
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 40px;
}
.page-title p {
	margin-bottom: 12px;
	padding-left: 18px;
	font-family: var(--libre);
	font-size: calc(1rem / 1.6);
	text-transform: uppercase;
}
.page-title p::before {
	content: "";
	position: absolute;
	top: .1em;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--red);
}
.page-title h1 {
	font-size: calc(2.5rem / 1.6);
	line-height: calc(32 / 25);
}
.page-title img {
	height: 330px;
	object-fit: cover;
	border-radius: 0 0 90px 0;
}
.page-title.js-inview img {
	transform: scale(1.1);
	transition: transform .8s .4s;
}
.page-title.js-inview.is-show img {
	transform: scale(1);
}
@media print, screen and (min-width: 768px) {/* PC */
.page-title {
	height: clamp(400px,calc(503 / 1400 * 100vw), 503px);
}
.page-title .set {
	left: 100px;
	right: 100px;
	bottom: 80px;
}
.page-title p {
	margin-bottom: 16px;
	padding-left: 24px;
	font-size: calc(1.4rem / 1.6);
}
.page-title p::before {
	top: .2em;
	width: 12px;
	height: 12px;
}
.page-title h1 {
	font-size: calc(5rem / 1.6);
}
.page-title img {
	height: clamp(400px,calc(503 / 1400 * 100vw), 503px);
	border-radius: 0 0 360px 0;
}
}/* @media */
/* -----------------------------------------------
= container
----------------------------------------------- */
.contents {
	padding: 0 20px 100px;
}
.side {
	scroll-margin-top: 30px;
}
@media print, screen and (min-width: 768px) {/* PC */
.container {
	display: flex;
	gap: 0 min(77px, calc(77 / 1400 * 100vw));
	max-width: 1200px;
	margin-inline: auto;
	padding: 92px 20px 200px;
}
.side {
	width: min(263px, calc(263 / 1400 * 100vw));
}
.contents {
	flex: 1;
	padding: 0;
}
}/* @media */
/* -----------------------------------------------
= page-nav
----------------------------------------------- */
.page-nav {
	padding: 60px 30px;
}
.page-nav h2 {
	margin-bottom: 20px;
	font-family: var(--hanken);
	font-size: calc(1.6rem / 1.6);
}
.page-nav li {
	font-size: calc(1.8rem / 1.6);
	line-height: calc(24 / 18);
}
.page-nav a {
	display: block;
	position: relative;
	padding: 16px 36px 16px 20px;
}
.page-nav a::before {
	content: "";
	position: absolute;
	top: 1.5em;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--red);
}
.page-nav a::after {
	content: "";
	position: absolute;
	top: 1.5em;
	right: 10px;
	width: 8px;
	height: 6px;
	background: #aaa;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.page-nav .sub {
	border-top: 1px solid var(--border-gray);
}
.page-nav > nav > .sub {
	margin-top: -20px;
	border-top: none;
}
.page-nav .sub li {
	font-size: calc(1.2rem / 1.6);
	line-height: calc(18 / 12);
	border-bottom: 1px solid var(--border-gray);
}
.page-nav .sub a::before {
	top: 2em;
	left: 0;
	width: 10px;
	height: 1px;
	border-radius: 0;
}
.page-nav .sub a::after {
	top: 2em;
}
@media print, screen and (min-width: 768px) {/* PC */
.page-nav {
	position: sticky;
	top: 108px;
	padding: 0;
}
.page-nav h2 {
	margin-bottom: 25px;
	font-size: calc(1.8rem / 1.6);
}
.page-nav nav {
	max-height: calc(100vh - 170px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.page-nav li {
	margin-bottom: 4px;
	font-size: calc(1.4rem / 1.6);
	line-height: calc(20 / 14);
}
.page-nav a {
	padding: 20px 20px 20px 37px;
	background: var(--bg-gray);
	border-radius: 4px;
}
.page-nav .is-current {
	color: #fff;
	background: var(--black);
}
.page-nav a::before {
	top: 1.8em;
	left: 18px;
}
.page-nav a::after {
	display: none;
}
.page-nav .sub {
	margin-top: 4px;
	border-top: none;
}
.page-nav > nav > .sub {
	margin-top: 0;
}
.page-nav .sub li {
	border-bottom: none;
}
.page-nav .sub a {
	padding: 12px 19px 12px 37px;
}
.page-nav .sub a::before {
	top: 1.7em;
	left: 15px;
}
}/* @media */
@media(hover:hover) {
.page-nav a {
	transition: opacity .3s;
}
.page-nav a:hover {
	opacity: .8;
}
}/* @media */
/* -----------------------------------------------
= fix-index
----------------------------------------------- */
.fix-index {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 5;
}
.fix-index a {
	display: block;
	width: 98px;
	padding: 11px 20px;
	background: #f7f7f7;
	border: 1px solid var(--border-gray);
	border-radius: 4px;
	font-family: var(--hanken);
	font-size: calc(1.4rem / 1.6);
}
.fix-index a::after {
	content: "";
	position: absolute;
	top: 1.5em;
	right: 10px;
	width: 8px;
	height: 6px;
	background: #aaa;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* -----------------------------------------------
= block title / sub-title
----------------------------------------------- */
.block-title {
	position: relative;
	margin-bottom: 30px;
	padding: 0 0 14px 22px;
	border-bottom: 1px solid var(--border-gray);
	font-size: calc(2.2rem / 1.6);
	line-height: calc(30 / 22);
}
.block-title::before {
	content: "";
	position: absolute;
	top: .5em;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--red);
}
.block-sub-title {
	position: relative;
	margin-bottom: 24px;
	padding-left: 16px;
	font-size: calc(1.8rem / 1.6);
	line-height: calc(28 / 18);
}
.block-sub-title::before {
	content: "";
	position: absolute;
	top: .3em;
	left: 0;
	width: 4px;
	height: 20px;
	background: var(--red);
}
@media print, screen and (min-width: 768px) {/* PC */
.block-title {
	margin-bottom: 40px;
	padding: 0 0 19px 32px;
	font-size: calc(3rem / 1.6);
}
.block-title::before {
	width: 12px;
	height: 12px;
}
.block-sub-title {
	margin-bottom: 27px;
	padding-left: 22px;
	font-size: calc(2.4rem / 1.6);
}
.block-sub-title::before {
	top: .3em;
	width: 6px;
	height: 29px;
}
}/* @media */
/* -----------------------------------------------
= accordion
----------------------------------------------- */
.js-accordion .js-accordion-panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.4s ease;
}
/* -----------------------------------------------
= related
----------------------------------------------- */
.related {
	padding: 73px 0 80px 34px;
	color: #fff;
	background: var(--black);
}
.related h2 {
	margin-bottom: 40px;
}
.related h2 .en {
	display: block;
	position: relative;
	margin-bottom: 12px;
	padding-left: 18px;
	font-family: var(--libre);
	font-size: calc(2.1rem / 1.6);
}
.related h2 .en::before {
	content: "";
	position: absolute;
	top: .3em;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--red);
}
.related h2 .jp {
	display: block;
	padding-left: 18px;
	font-size: calc(1.3rem / 1.6);
}
.related .swiper-slide {
	width: 155px;
	margin-right: 13px;
	padding-bottom: 30px;
}
.related p {
	margin-top: 10px;
	font-size: calc(1.2rem / 1.6);
}
.related .swiper-button-prev,
.related .swiper-button-next {
	top: 34px;
	width: 36px;
	height: 36px;
	margin-top: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	backdrop-filter: blur(30px) brightness(115%);
}
.related .swiper-button-prev::before,
.related .swiper-button-next::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	background: #fff;
	font-size: 0;
}
.related .swiper-button-prev::before {
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.related .swiper-button-next::before {
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.related .swiper-button-disabled {
	display: none;
}
.related .swiper-button-prev::after,
.related .swiper-button-next::after {
	display: none;
}
.related .swiper-scrollbar {
	width: calc(100% - 34px);
	height: 1px;
	background: #707070;
}
.related .swiper-scrollbar-drag {
	background: #fff;
}
@media print, screen and (min-width: 768px) {/* PC */
.related {
	padding: 110px 20px 160px;
}
.related .inner {
	display: flex;
	gap: 0 24px;
	max-width: 1213px;
	margin-inline: auto;
}
.related h2 {
	flex: 1;
	margin-bottom: 0;
}
.related h2 .en {
	margin-bottom: 27px;
	padding-left: 36px;
	font-size: calc(3rem / 1.6);
}
.related h2 .en::before {
	top: .3em;
	width: 12px;
	height: 12px;
}
.related h2 .jp {
	padding-left: 36px;
	font-size: calc(1.8rem / 1.6);
}
.related .swiper {
	width: calc(918 / 1213 * 100%);
}
.related .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.related .swiper-slide {
	width: auto;
	margin-right: 0;
	padding-bottom: 0;
}
.related .swiper-button-prev,
.related .swiper-button-next {
	display: none;
}
.related p {
	margin-top: 15px;
	font-size: calc(1.5rem / 1.6);
}
}/* @media */
@media(hover:hover) {
.related a {
	transition: color .3s;
}
.related a:hover {
	color: var(--red);
}
.related a img {
	transition: opacity .3s;
}
.related a:hover img {
	opacity: .8;
}
}/* @media */
/* -----------------------------------------------
= pickup
----------------------------------------------- */
.pickup {
	padding: 73px 34px 80px;
	background: url(../img/shared/bg-pickup-sp.jpg) no-repeat 50% / cover;
}
.pickup h2 {
	margin-bottom: 40px;
}
.pickup h2 .en {
	display: block;
	position: relative;
	margin-bottom: 12px;
	padding-left: 18px;
	font-family: var(--libre);
	font-size: calc(2.1rem / 1.6);
}
.pickup h2 .en::before {
	content: "";
	position: absolute;
	top: .3em;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--red);
}
.pickup h2 .jp {
	display: block;
	padding-left: 18px;
	font-size: calc(1.3rem / 1.6);
}
.pickup ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 13px;
}
.pickup p {
	margin-top: 10px;
	font-size: calc(1.2rem / 1.6);
}
.pickup img {
	object-fit: cover;
	aspect-ratio: 155 / 105;
}
@media print, screen and (min-width: 768px) {/* PC */
.pickup {
	padding: 110px 20px 160px;
	background-image: url(../img/shared/bg-pickup-pc.jpg);
}
.pickup .inner {
	display: flex;
	gap: 0 24px;
	max-width: 1213px;
	margin-inline: auto;
}
.pickup h2 {
	flex: 1;
	margin-bottom: 0;
}
.pickup h2 .en {
	margin-bottom: 27px;
	padding-left: 36px;
	font-size: calc(3rem / 1.6);
}
.pickup h2 .en::before {
	top: .3em;
	width: 12px;
	height: 12px;
}
.pickup h2 .jp {
	padding-left: 36px;
	font-size: calc(1.8rem / 1.6);
}
.pickup ul {
	gap: 24px;
	width: calc(918 / 1213 * 100%);
}
.pickup p {
	margin-top: 15px;
	font-size: calc(1.5rem / 1.6);
}
.pickup img {
	aspect-ratio: 447 / 197;
}
}/* @media */
@media(hover:hover) {
.pickup a {
	transition: color .3s;
}
.pickup a:hover {
	color: var(--red);
}
.pickup a img {
	transition: opacity .3s;
}
.pickup a:hover img {
	opacity: .8;
}
}/* @media */