/*
 * base css 
 * pc width 1000px fixed
 */

/* ---------------------------------------- fonts */

/* noto-serif-jp-200 - japanese_latin ExtraLight */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/noto-serif-jp/noto-serif-jp-v32-japanese_latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-300 - japanese_latin Light */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/noto-serif-jp/noto-serif-jp-v32-japanese_latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-regular - japanese_latin Regular */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-serif-jp/noto-serif-jp-v32-japanese_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-500 - japanese_latin Medium */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-serif-jp/noto-serif-jp-v32-japanese_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-600 - japanese_latin SemiBold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/noto-serif-jp/noto-serif-jp-v32-japanese_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-700 - japanese_latin Bold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-serif-jp/noto-serif-jp-v32-japanese_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-800 - japanese_latin ExtraBold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/noto-serif-jp/noto-serif-jp-v32-japanese_latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-serif-jp-900 - japanese_latin Black */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/noto-serif-jp/noto-serif-jp-v32-japanese_latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ---------------------------------------- common */

:root {
	--color-1c2d5a: #1c2d5a;
	--color-ededed: #ededed;
	--color-f7f8fa: #f7f8fa;
	--color-a33a3a: #a33a3a;
	--color-c4a159: #c4a159;
	--color-b4b4b4: #b4b4b4;
	--color-70665a: #70665a;
	
	--color-d5485b: #d5485b;
}

@media (max-width: 767px) {
	section {
		/* font-size: clamp(0.813rem, 0.678rem + 0.67vw, 1rem); */
		font-size: clamp(0.813rem, -0.278rem + 5.45vw, 1rem);
		padding: 3.125em 0 5em;
	}
	section .inner {
		padding: 0 1em;
	}
}

@media (min-width: 768px) {
	section {
		font-size: clamp(0.813rem, 0.454rem + 0.75vw, 1rem);
		padding: 5em 1em 6.25em;
	}
	section .inner {
		max-width: 1170px;
		margin: 0 auto;
	}
}

/* title */

section h2 {
	text-align: center;
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 400;
	margin: 0 0 2em;
}
section h2 span {
	display: inline-block;
	color: var( --color-c4a159 );
	line-height: 1;
}
section h2 small {
	display: block;
	width: 100%;
	text-align: center;
	line-height: 1.2;
	-webkit-transform: translateY(-40%);
	transform: translateY(-40%);
}

@media (max-width: 767px) {
	section h2 span {
		font-size: clamp(2rem, -0.909rem + 14.55vw, 2.5rem);
	}
	section h2 small {
		font-size: clamp(1.188rem, 0.097rem + 5.45vw, 1.375rem);
	}
}

@media (min-width: 768px) {
	section h2 span {
		font-size: clamp(2.5rem, 0.112rem + 4.98vw, 3.75rem);
	}
	section h2 small {
		font-size: clamp(1.375rem, 0.181rem + 2.49vw, 2rem);
	}
}

/* pagelink */

.pagelink { text-align: center; }
.pagelink a,
.pagelink button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 13em;
	color: #fff;
	background: var( --color-a33a3a );
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 400;
	padding: 1em;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	overflow: hidden; 
	transition: color 0.4s, border-color 0.4s;
}
.pagelink a::after, 
.pagelink button::after {
	display: block;
  content: "";
  position: absolute;
  top: 0;
  left: -100%;         /* 左側に隠しておく */
  width: 100%;
  height: 100%;
  background-color: #fff; /* スライドしてくる背景色（白） */
  z-index: -1;         /* テキストの背面に配置 */
  transition: all 0.4s;
}
.pagelink a:hover, 
.pagelink button:hover {
  color: #a33a3a;        /* 文字色を赤に */
  border-color: #a33a3a; /* 枠線を赤に */
}
.pagelink a:hover::after, 
.pagelink button:hover::after {
  left: 0;               /* 背景を中央へスライド */
}

/* svg */
.pagelink a .arrow_more,
.pagelink button .arrow_more_under {
	margin: 0 0 0 .5em;
}
.pagelink a .arrow_more,
.pagelink button .arrow_more_under {
	fill: #fff;
}
.pagelink a:hover .arrow_more,
.pagelink button:hover .arrow_more_under {
	fill: #a33a3a;
}

/* ---------------------------------------- visual */

#visual::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
/* 	background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(51, 51, 51, 1) 100%); */
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 88;
}
#visual img {
	width: 100%;
	height: auto;
	vertical-align: text-top;
	line-height: 1;
}
#visual .catch {
	position: absolute;
	left: 50%;
	z-index: 99;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#visual .catch img {
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	#visual .catch {
		top: 10%;
		width: 61.33333%;
		max-width: 230px;
	}
}

@media (min-width: 768px) {
	#visual .catch {
		top: 10%;
		width: 36.8%;
		max-width: 530px;
	}
}

/* ---------------------------------------- news */

#news {
	background: var( --color-1c2d5a );
}
#news h2 span { opacity: .5; }
#news h2 small { color: #fff; }

#sliders .splide__track ul li { 
	background: #fff; 
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 400;
}
#sliders ul li a { display: block; }
#sliders ul li a img {
	width: 100%;
	aspect-ratio: 1 / 0.754;
	object-fit: cover;
	object-position: top;
}
#sliders ul li div {
	padding: .75em 1em; 
}
#sliders ul li div .date { margin: 0 0 .5em; }

#news .pagelink { margin: 2em 0 0; }

@media (max-width: 767px) {

	#news .inner { padding: 0; }
	#sliders { padding: 0 0 2.5em; }
	#sliders .splide__track ul li {
		width: 60%;
		max-width: 358px;
	}
	#sliders ul li div .date { font-size: var( --small-size-sp ); }
}

@media (min-width: 768px) {

	#sliders .splide__track ul {
		display: flex;
		justify-content: space-between;
	}
	#sliders .splide__track ul li {
		width: 30.598%;
		max-width: 358px;
	}
	#sliders ul li div .date { font-size: var( --small-size-pc ); }
}

/* ---------------------------------------- database */

#database {
	background: #EDEDED url( ../images/opera/pattern_back.svg );
}
#database h2 span { opacity: .6; }

@media (max-width: 767px) {
	#database h2 span { 
		font-size: clamp(1.625rem, 0.17rem + 7.27vw, 1.875rem);
		opacity: .6; 
	}
}

#database h2 small { color: var( --color-1c2d5a ); }

#database ul > li a { display: block; }
#database ul > li figure { 
	position: relative; 
	width: 100%;
	aspect-ratio: 1 / 0.75;
}
#database ul > li figure::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(51,51,51,.75);
	border-radius: 0 0 0 2em;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#database ul > li a:hover figure::before {
	background: rgba(51,51,51,.45);
}

#database ul > li figure figcaption {
	display: block;
	width: 100%;
	color: #fff;
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 400;
	text-align: right;
	padding: 1em;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
}
#database ul > li figure img {
	width: 100%;
	aspect-ratio: 1 / 0.75;
	vertical-align: text-top;
	object-fit: cover;
	border-radius: 0 0 0 2em;
}
#database .pagelink { margin: 1.5em 0 0; }

@media (max-width:499px) {

	#database ul {
		text-align: center;
	}
	#database ul > li { margin: 0 0 1.5em; }
	#database ul > li a {
		width: 75%;
		max-width: 260px;
		margin: 0 auto;
	}
	#database ul > li figure {
		width: 100%;
		aspect-ratio: 1 / 0.346;
	}
	#database ul > li figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

@media (min-width: 500px) and (max-width:767px) {

	#database ul {
		display: flex;
		flex-wrap: wrap;
	}
	#database ul > li { 
		width: 48%;
		margin: 0 4% 4% 0; 
	}
	#database ul > li:nth-child( 2n+2 ){ margin: 0 0 4% 0; }
	#database ul > li figure {
		width: 100%;
		aspect-ratio: 1 / 0.52;
	}
}

@media (min-width: 768px) {

	#database ul {
		display: flex;
		flex-wrap: wrap;
	}
	#database ul > li {
		width: 22.393%;
		max-width: 262px;
		margin: 0 3.476% 3.476% 0;
	}
	#database ul > li:nth-child( 4n + 4 ) { margin: 0 0 3.476% 0; }
	#database ul > li figure {
		width: 100%;
		aspect-ratio: 1 / 0.694;
	}
}

/* ---------------------------------------- concert */

#concert { 
	background: var( --color-f7f8fa );
}
#concert > figure {
	text-align: left;
}

#concert h2 span { color: #B4B4B4; }
#concert h2 small { 
	color: var( --color-1c2d5a ); 
	-webkit-transform: none;
	transform: none;
}
#concert .detail p { 
	line-height: 1.6;
	text-align: left;
}

@media (max-width: 767px) {

	#concert { 
		padding: 23em 0 5em;
		position: relative;
		overflow: hidden;
	}

	#concert .decoimg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 1 / 1.067;
	}
	#concert .decoimg figure {
		width: 100%;
		height: 100%;
		position: relative;
	}
	#concert .decoimg figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#concert .decoimg figure::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(247, 248, 250, 1) 100%);
		position: absolute;
		top: 0;
		left: 0;
	}
	#concert h2,
	#concert .detail {
		position: relative;
		z-index: 10;
	}
	#concert .detail .pagelink {
		margin: 2em 0 0;
	}
}

@media (min-width: 768px) {

	#concert { 
		text-align: right; 
		padding: 7.5em 0 10em;
		position: relative;
		overflow: hidden;
	}
	#concert .inside { padding: 0 1em; }
	#concert h2 {
		display: inline-block;
		margin: 0 0 2em;
	}
	#concert .detail {
		display: flex;
		align-items: center;
		width: 64%;
		max-width: 750px;
		margin: 0 0 0 auto;
		position: relative;
		z-index: 10;
	}
	#concert .detail p { 
		margin: 0 2em 0 0; 
	}

	#concert .decoimg {
		position: absolute;
		top: 0;
		left: 0;
		width: 46%;
		height: 100%;
	}
	#concert .decoimg figure {
		width: 100%;
		height: 100%;
		position: relative;
	}
	#concert .decoimg figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#concert .decoimg figure::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(247, 248, 250, 1) 100%);
		position: absolute;
		top: 0;
		left: 0;
	}

}

/* ---------------------------------------- about */

#about { 
	color: #fff;
	background: var( --color-1c2d5a );
	padding: 5em 0 6.25em; 
}
#about > figure {
	text-align: right;
}

#about h2 span { opacity: .5; }
#about h2 small { 
	color: #fff; 
	-webkit-transform: none;
	transform: none;
}
#about .detail p { 
	line-height: 1.6;
	text-align: left;
}

@media (max-width: 767px) {

	#about { 
		padding: 23em 0 5em;
		position: relative;
		overflow: hidden;
	}

	#about .decoimg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 1 / 1.45;
	}
	#about .decoimg figure {
		width: 100%;
		height: 100%;
		position: relative;
	}
	#about .decoimg figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#about .decoimg figure::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(28, 45, 90, 1) 100%);
		position: absolute;
		top: 0;
		left: 0;
	}
	#about h2,
	#about .detail {
		position: relative;
		z-index: 10;
	}
	#about .detail .pagelink {
		margin: 2em 0 0;
	}

}

@media (min-width: 768px) {

	#about { 
		text-align: left; 
		padding: 7.5em 0 10em;
		position: relative;
		overflow: hidden;
	}
	#about .inside { padding: 0 1em; }
	#about h2 {
		display: inline-block;
		margin: 0 0 2em;
	}
	#about .detail {
		display: flex;
		align-items: center;
		width: 64%;
		max-width: 750px;
		margin: 0 auto 0 0;
		position: relative;
		z-index: 10;
	}
	#about .detail p { 
		margin: 0 2em 0 0; 
	}

	#about .decoimg {
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		height: 100%;
	}
	#about .decoimg figure {
		width: 100%;
		height: 100%;
		position: relative;
	}
	#about .decoimg figure img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#about .decoimg figure::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(28, 45, 90, 1) 100%);
		position: absolute;
		top: 0;
		left: 0;
	}

}