@charset "utf-8";

/*------------------------------------------------------*/
/*content*/
/*------------------------------------------------------*/

.container img, img.image {
	max-width: 100% !important;
}

a:hover {
	opacity: 0.7;
}

div.container {
	margin: auto;
	padding: 0;
	font-size: min(10px, 0.9765625vw); /* 10/1024 ≈ 0.9765625 */
	font-family: "Zen Old Mincho", 'HelveticaNeue', 'Helvetica', 'HiraginoKakuGothicProN', YuGothic, 'YuGothicMedium', Meiryo, sans-serif;
	text-align: center;
	max-width: 1024px;
	color: #000000;
	line-height: 1.6;
}

@media screen and (min-width: 1025px) {
  div.container {
		font-size: 5.85938px;
		width: 600px;
		margin-inline: auto;
  }
}


div.container * {
	box-sizing: border-box;
}

div.container .noto	{
	font-family: "Noto Sans JP", 'HelveticaNeue', 'Helvetica', 'HiraginoKakuGothicProN', YuGothic, 'YuGothicMedium', Meiryo, sans-serif;
}

div.container .lexend	{
	font-family: "Lexend", 'HelveticaNeue', 'Helvetica', 'HiraginoKakuGothicProN', YuGothic, 'YuGothicMedium', Meiryo, sans-serif;
}

.image {
	width: 100%;
	height: auto;
}

.section_inner {
	margin: 0 auto;
}

.black-scroll-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.black-scroll-in.is-scroll-in {
	opacity: 1;
	transform: translateY(0);
}

/*------------------------------------------------------*/
/*mainvisual*/
/*------------------------------------------------------*/
.mainvisual {
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
}

.mainvisual_image {
	line-height: 0;
	margin: 0 auto;
}

.mainvisual_text { 
  position: absolute;
	width: calc( 764 / 1024 * 100%);
  bottom: -6.5%;
  left: 0;
}

.mainvisual_text_sub{

	display: block;
	padding-block: calc(12 / 764 * 100%) calc(14 / 764 * 100%);
	padding-inline: calc(20 / 764 * 100%) calc(19 / 764 * 100%);
	background-color: #000;
	color: #fff;
	font-size: 400%;
	line-height: calc(42/30);
	letter-spacing: 0.23em;
	margin-bottom: calc(12 / 764 * 100%);
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
}

.mainvisual_text_main {
	text-align: left;
	margin: 0;
	padding: 0;
	font-weight: bold;
	line-height: calc(188 / 211* 100%);
	letter-spacing: 0.02em;
	font-size: 2100%;
	margin-left: -0.1em;
}

.mainvisual_scroll-line {
  position: absolute;
  right: 10%;
	bottom: -8.8%;
  height: min(210px, calc(210 / 1020 * 100%));
  width: min(5px, calc(5 / 1020 * 100%));
  background-color: #000000;
  margin-inline: auto;
  animation: bg 2.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  transform: scaleY(0);
}

@keyframes bg {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}


/*------------------------------------------------------*/
/*season*/
/*------------------------------------------------------*/
.season {
	padding: 0 0 0 0;
}


/* season discription */
/*------------------------------------------------------*/
.season_discription {
	background: url(/ec/images/category/2026blackframe/bg-ground.jpg) repeat;
	background-size: 60px;
}
.season_discription_txt {
	font-size: 400%;
	line-height: calc(93 / 40);
	font-weight: bold;
	font-weight: 500;
	text-align: center;
	padding-block: calc(328 / 1024 * 100%) calc(191 / 1024 * 100%);
	letter-spacing: 0.23em;
}

/* season block */
/*------------------------------------------------------*/
.season_block_top {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
	padding-block-start: calc(88 / 1024 * 100%);
}

.season_block_top::before {
	position: absolute;
	content: '';
	inset: 0 0 auto;
	height: 64%;
	background: url(/ec/images/category/2026blackframe/bg-ground.jpg) repeat;
	background-position: top center;
	background-size: 60px;
}

.season_block_top > * {
	position: relative;
}

.season_block_top_sub {
	display: flex;
	align-items: center;
	position: relative;
	font-size: 270%;
	line-height: calc(27 / 10);
	letter-spacing: 0.23em;
	writing-mode: vertical-rl;
	text-orientation: sideways;
	white-space: nowrap;
}

.season_block_top_sub::before {
	content: '';
	display: block;
	margin-inline-end: 1em;
	width: 2px;
	height: 2em;
	background-color: #000;
	top: 0;
	left: 0;
}

.season_block_top_text {
	position: absolute;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	top: 0;
	right: 0;
	color: #fff;
	padding-block-start: calc(35 / 1024 * 100%);
}

.container .season_block_top_text_main {
	display: block;
	font-size: 700%;
	text-align: right;
	height: auto;
	line-height: 1;
	letter-spacing: 0.01em;
	padding-inline-end: 0.3em;
	margin: 0 0 calc(6 / 1024 * 100%);
}

.season_block_top_text_sub {
	display: block;
	font-size: 300%;
	line-height: calc(42 / 30);
	letter-spacing: 0.23em;
	text-align: right;
}

.season_block_top_text._reverse {
	right: auto;
	left: 0;
	padding-inline-start: 2.1em;
}

.season_block_top_text._reverse .season_block_top_text_main{
	text-align: left;
}

.season_block_top_text._reverse .season_block_top_text_sub{
	text-align: left;
}


.season_block_content {
	width: calc(887 / 1024 * 100%);
	margin-block-start: calc(120 / 887 * 100%);
	padding-block-end: calc(118 / 887 * 100%);
	margin-inline: auto;
	border-bottom: #000 2px solid;
}

.season_block_content:last-child {
	border-bottom: none;
}

.content_item_detail {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.content_item_main {
	width: calc(480 / 880 * 100%);
	text-align: left;
}

.content_item_image {
	margin-block-end: calc(40 / 887 * 100%);
}

.content_item_slider {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: calc(20 / 887 * 100%);
}

.content_item_slider picture {
	position: relative;
	display: flex;
	grid-column: 1 / 4;
	align-items: center;
	justify-content: center;
	aspect-ratio: 880 / 600;
	background-color: #f5f5f5;
}

.content_item_slider > :not(.content_item_thumbnails) {
	margin-block-end: 2.25479%;
}

.content_item_main_image {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.content_item_thumbnails {
	display: contents;
}

.content_item_thumbnail {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border: 0;
    cursor: pointer;
    background-color: #f5f5f5;
    overflow: hidden; /* 追加 */
}

.content_item_thumbnail:not(.is-active):before {
	content: '';
	display: block;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1);
}

.content_item_thumbnail_image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.4); /* 追加 */
}

.content_item_name {
	font-size: 800%;
	line-height: calc(100 / 80);
	margin-block-end: min(12px, calc(12 / 480 * 100%));
	letter-spacing: 0.08em;
}

.content_item_note {
	font-size: 250%;
	line-height: calc(37 / 25);
	letter-spacing: 0.01em;
	color: #3E3E3E;
}

.content_item_button {
	width: calc(400 / 880 * 100%);
	text-align: left;
}

.content_item_button_link {
	display: inline-block;
	cursor: pointer; 
}

/* content_button_link */
/*------------------------------------------------------*/
.content_button_area {
	display: block;
	padding-block-start: min(123px, calc(123 / 880 * 100%));
	margin-block-end: min(123px, calc(123 / 880 * 100%));
	width: calc(887 / 1024 * 100%);
	margin-inline: auto;
	border-top: #000 2px solid;
}

.bnr-bottom-link {
	padding: 0 5% 11%;
}
.bnr-bottom-link a {
	display: block;
	margin-bottom: 1%;
}
