@charset "utf-8";

/*
Theme Name: shokukosu
Version: 1.0
Author: Femme Creatives 
*/
html {
	scroll-behavior: smooth;
}

body .pc {
	display: none;
}

@media screen and (min-width: 1024px) {
	body .sp {
		display: none;
	}

	body .pc {
		display: block;
	}
}

/* ----------------------------------------------------
    共通
---------------------------------------------------- */

body {
	font-family: "Noto Serif JP", serif;
	font-weight: 400;
	line-height: 1.5;
	font-size: 15px;
	color: #202020;
}

img {
	width: 100%;
	height: auto;
}

.inner {
	width: 84%;
	margin: 0 8%;
}

.page-inner {
	width: 84%;
	margin: 120px 8% 80px;
}

.page-inner h2 {
	font-size: 24px;
	margin-bottom: 16px;
}

.page-inner h3 {
	font-size: 22px;
	margin-bottom: 12px;
	margin-top: 24px;
}

.section-title {
	text-align: center;
}

.section-title h2 {
	color: #C79739;
	font-family: "Cormorant Garamond", serif;
	font-weight: 600;
	font-size: 27px;
	letter-spacing: 24%;
	margin-bottom: 65px;
}

.section-lead {
	line-height: 2.3;
}

.section-lead p {
	margin-bottom: 1.5em;
	letter-spacing: 3%;
}

@media screen and (min-width: 1024px) {
	.section-title h2 {
		font-size: 34px;
		letter-spacing: 29%;
		margin-bottom: 80px;
	}

	.section-lead p {
		margin-bottom: 2.3em;
	}

	.page-inner {
		max-width: 1120px;
		margin: 160px auto 80px;
		width: 78%;
	}

	.page-inner h2 {
		font-size: 32px;
		margin-bottom: 24px;
	}

	.page-inner h3 {
		margin-bottom: 16px;
		margin-top: 40px;
	}
}

/* ----------------------------------------------------
    header
---------------------------------------------------- */
.header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}

header h1 {
	font-size: 14px;
	font-weight: 400;
	font-family: "Marcellus", serif;
	color: #1D3C57;
}

header a.header-logo {
	text-decoration: none;
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: inherit;
	position: relative;
	padding: 16px;
	background-color: #fff;
	box-shadow: 0px 0px 12px 0px rgba(128, 110, 71, 0.2);
	z-index: 999;
}

.header__nav {
	position: absolute;
	display: flex;
	right: 0;
	left: 0;
	top: 0;
	width: 100%;
	transform: translateX(100%);
	background-color: #E9E9E9;
	transition: ease .4s;
	height: 100vh;
	z-index: 998;
}

.header__nav.active {
	transform: translateX(0);
}

.header__nav ul {
	list-style: none;
}

.nav-items {
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
}

.nav-items__item a {
	color: #1D3C57;
	text-decoration: none;
	letter-spacing: 3px;
}

.nav-items__item {
	text-align: center;
	padding-bottom: 48px;
}

.hamburger {
	position: relative;
	width: 48px;
	height: 48px;
	background-color: #FFFFFF;
	border-radius: 100px;
	cursor: pointer;
	border: none;
	z-index: 999;
}

.hamburger .span {
	height: 100%;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
	display: block;
	display: flex;
	width: 100%;
}

.hamburger .span>span {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 1px;
	background-color: #1D3C57;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.hamburger .span>span:nth-child(1) {
	top: 40%;
}

.hamburger .span>span:nth-child(2) {
	top: 50%;
}

.hamburger .span>span:nth-child(3) {
	top: 60%;
}

.hamburger.active .span>span:nth-child(1) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.hamburger.active .span>span:nth-child(2) {
	opacity: 0;
}

.hamburger.active .span>span:nth-child(3) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (1024px <=width) {
	.header__nav {
		position: static;
		transform: initial;
		background-color: inherit;
		height: inherit;
		display: flex;
		justify-content: end;
		width: 100%;
	}

	.nav__items {
		width: 100%;
		display: flex;
		align-items: center;
		height: initial;
		justify-content: flex-end;
		gap: 48px;
	}

	header h1 {
		font-size: 20px;
		letter-spacing: 8%;
		white-space: nowrap;
	}

	.nav-bg {
		display: none;
	}

	.nav-items {
		position: inherit;
		top: 0;
		left: 0;
		transform: translate(0, 0);
	}

	.nav-items__item {
		padding-bottom: 0;
	}

	.nav-items__item a {
		width: 100%;
		display: block;
		border-top: none;
		padding-top: 0px;
		margin-top: 0px;
		padding-left: 0%;
		transition: all 0.3s;
	}

	.nav-items__item a:hover {
		opacity: 0.7;
	}

	.hamburger {
		display: none;
	}

	.header__inner {
		padding: 18px 80px;
	}
}

/* ----------------------------------------------------
    ticket-banner
---------------------------------------------------- */
.fixed-ticket-banner {
	position: fixed;
	bottom: 4%;
	right: 0;

	z-index: 9999;

	width: 80px;
	height: auto;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

/* 画像自体の設定 */
.fixed-ticket-banner img {
	width: 100%;
	height: auto;
	display: block;
}


/* ----------------------------------------------------
    mv
---------------------------------------------------- */
/* 基本設定 */
.fv {
	position: relative;
	/* 子要素の基準点になる */
	width: 100%;
	overflow: hidden;
	/* 画像がはみ出た場合に隠す */
	color: #1D3C57;
}

/* 1. 一番下の写真 */
.fv-bg-photo {
	position: absolute;
	top: 32px;
	left: 0;
	width: 100%;
	height: 95%;
	/* FV全体の高さに合わせる */
	z-index: 1;
}

.fv-bg-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58%;
	/* 比率を保って画面いっぱいに広げる */
}

/* 2. 重ねる装飾（白透過部分） */
.fv-bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 124%;
	height: 109%;
	z-index: 2;
	/* 写真より上、テキストより下 */
	pointer-events: none;
	/* 下にあるテキスト選択などを邪魔しない */
}

.fv-bg-decoration img {
	width: 290%;
	height: 100%;
	object-fit: contain;
	/* 装飾全体が見えるように配置（またはcover） */
}


.fv-inner {
	position: relative;
	z-index: 3;
	/* 一番上に表示 */
	text-align: center;
	background: rgba(254, 254, 254, 0.75);
	margin: 112px 0 46px;
	padding-top: 40px;
}

/* メインキャッチ */
.fv-logo {
	font-size: 64px;
	font-weight: 500;
	letter-spacing: 15%;
	margin-bottom: -5px;
}


.fv-sub-title {
	font-family: "Marcellus", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 8%;
	margin-bottom: 40px;
}

.fv-copy {
	letter-spacing: 30%;
	margin-bottom: 46px;
}

.fv-copy .en {
	font-size: 10px;
	margin-top: 12px;
	letter-spacing: 4%;
}

/* 開催概要エリア */
.fv-info {
	background-color: #1D3C57;
	color: #C79739;
	padding: 5px 32px 15px;
}

.info-date .date {
	font-size: 40px;
	font-weight: 600;
	letter-spacing: 13%;
}

.info-date .date span {
	font-size: 15px;
	margin-left: -2px;
	writing-mode: vertical-rl;
	/* SUNを縦に */
}

.time-list {
	list-style: none;
	padding-bottom: 6px;
	border-bottom: 1px solid #fff;
	color: #fff;
	font-size: 0.9rem;
}

.info-place .place-name {
	font-size: 40px;
	letter-spacing: 8%;
	margin-bottom: -1px;
}

.info-place .address {
	font-size: 14px;
	color: #fff;
}

/* リード文 */
.fv-lead {
	padding: 37px 24px 64px;
	line-height: 2.2;
	font-size: 14px;
}

@media screen and (min-width: 1024px) {

	/* 1. 全体的な余白の調整 */
	.fv-inner {
		background-color: inherit;
		/* PCでは少し位置を下げる（またはヘッダーに合わせる） */
	}

	/* 2. 背景装飾（白透過）のPC最適化 */
	.fv-bg-decoration {
		width: 75%;
		max-width: 789px;
		height: 100%;
		left: 50%;
		transform: translateX(-50%);
	}

	.fv-bg-decoration img {
		width: 100%;
		/* PCでは引き伸ばしすぎず100%に */
		object-fit: cover;
	}


	/* 3. メインロゴとコピーのサイズアップ */
	.fv-logo {
		font-size: 90px;
		letter-spacing: 35%;
	}

	.fv-sub-title {
		font-size: 14px;
		letter-spacing: 8%;
		margin-bottom: 5%;
	}

	.fv-copy {
		font-size: 18px;
		letter-spacing: 40%;
		margin-bottom: 55px;
	}

	.fv-copy .en {
		font-size: 12px;
		letter-spacing: 4%;
		margin-top: 11px;
	}

	/* 4. 開催概要エリア（fv-info）の横幅制限 */
	.fv-info {
		max-width: 789px;
		/* PCでは横長になりすぎないよう制限 */
		margin: 0 auto;
		/* 中央に寄せる */
		display: flex;
		/* 日付と場所を横に並べる */
		justify-content: space-between;
		align-items: baseline;
		padding: 0;
	}

	.info-date {
		width: 60%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.info-date .date {
		font-size: 40px;
	}

	.time-list {
		border-bottom: none;
		/* 横に並べるので境界線を消す */
		padding-bottom: 0;
		font-size: 14px;
		text-align: left;
	}

	.info-place {
		border-left: 1px solid #fff;
		width: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 4px 0 16px;
	}

	.info-place .place-name {
		font-size: 40px;
		overflow-wrap: normal
	}

	/* 5. リード文 */
	.fv-lead {
		font-size: 14px;
		line-height: 1.8;
		letter-spacing: 4%;
		padding: 40px 24px 67px;
		max-width: 789px;
		margin: 0 auto;
	}

	.info-place .address {
		text-align: left;
	}
}

/* ----------------------------------------------------
    scroll
---------------------------------------------------- */
.fv-scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 0;
	/* 上下の余白をここで自由に調整 */
	background-color: #fff;
	/* 背景色はデザインに合わせて */
	color: #202020;
}

.fv-scroll span {
	font-size: 14px;
	letter-spacing: 0.1em;
}

/* スクロールの縦線 */
.fv-scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 150px;
	/* 線の長さ */
	background-color: #202020;
	margin-top: 15px;

	/* アニメーションを入れるとより本格的になります（任意） */
	animation: scroll-line 2s infinite;
}

@keyframes scroll-line {
	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;
	}
}

@media screen and (min-width: 1024px) {
	.fv-scroll {
		padding: 60px 0;
	}
}

/* ----------------------------------------------------
    concept
---------------------------------------------------- */
.concept {
	position: relative;
	padding: 120px 24px;
	background-color: #fff;
	text-align: center;
	overflow: hidden;
}

.concept-start h2 {
	font-size: 40px;
	font-weight: 600;
	letter-spacing: 2px;
	margin-bottom: 100px;
	white-space: nowrap;
}

.concept-message {
	margin-bottom: 200px;
	line-height: 3;
}

.concept-definition h3 {
	font-size: 36px;
	font-weight: 600;
	letter-spacing: 2px;
	margin-bottom: 100px;
	text-transform: uppercase;
}

.definition-text {
	line-height: 2.6;
	margin-bottom: 78px;
}

.definition-text p+p {
	margin-top: 40px;
}

/* === 画像のレイアウト（1枚に統合した場合） === */
.concept-images {
	width: 100%;
	/* 横幅いっぱいを基準に */
	max-width: 600px;
	/* PC版で広がりすぎないように上限を設定 */
	margin: 0 auto 60px;
	/* 中央寄せと下部への余白 */
}

.concept-images img {
	width: 100%;
	height: auto;
	display: block;
}

/* CTAエリア */
.concept-cta p {
	font-size: 14px;
	margin-bottom: 20px;
	color: #6c6c6c;
}

.btn-ticket-nv {
	display: block;
	width: 100%;
	max-width: 300px;
	padding: 15px;
	background: linear-gradient(to right, #4a6683, #1a3652);
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 0.08em;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	margin: 0 auto;
}

.btn-ticket-nv2 {
	display: block;
	width: 100%;
	max-width: 300px;
	padding: 15px;
	color: #1D3C57;
	border: #1D3C57 1px solid;
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 0.08em;
	border-radius: 4px;
	margin: 8px auto 0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 1024px) {
	.concept {
		padding-bottom: 160px;
	}

	.concept-start h2 {
		font-size: 58px;
		font-weight: 600;
		letter-spacing: 0.08em;
	}

	.concept-message {
		font-size: 20px;
		line-height: 3;
	}

	.concept-definition h3 {
		font-size: 36px;
		font-weight: 600;
		letter-spacing: 0.08em;
		margin-bottom: 100px;
		text-transform: uppercase;
	}

	.definition-text {
		font-size: 18px;
		line-height: 2.4;
		margin-bottom: 78px;
	}

	.concept-images {
		margin: 0 auto 120px;
	}

	.concept-cta p {
		font-size: 17px;
		margin-bottom: 20px;
	}

	.concept-cta .flex-inner {
		display: flex;
		gap: 16px;
		justify-content: center;
	}

	.btn-ticket-nv {
		padding: 21px 111px;
		font-size: 18px;
		transition: all 0.3s;
		margin: 0;
		width: 260px;
	}

	.btn-ticket-nv:hover {
		opacity: 0.8;
	}

	.btn-ticket-nv2 {
		padding: 21px 111px;
		font-size: 18px;
		transition: all 0.3s;
		margin: 0;
		width: 260px;
	}

	.btn-ticket-nv2:hover {
		background-color: #1D3C57;
		color: #fff;
	}
}

/* ----------------------------------------------------
	experience
---------------------------------------------------- */
.experience {
	padding: 100px 20px 40px;
	background-color: #f9f9f7;
}

.experience-inner {
	max-width: 600px;
	margin: 0 auto;
}


.section-lead {
	margin: 0 25px;
}


/* 各トピック共通 */
.topic-item {
	margin-bottom: 60px;
}

.topic-label {
	color: #C79739;
	font-size: 20px;
	letter-spacing: 0.08em;
	font-family: "Cormorant Garamond", serif;
	font-style: italic;
	margin-bottom: 1px;
}

/* Topic 02を右寄せにする（デザインの再現） */
.topic-item:nth-of-type(odd) {
	text-align: left;
}

.topic-item:nth-of-type(even) {
	text-align: right;
}

.topic-item h3 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 15px;
	letter-spacing: 0.03em;
}

.topic-img {
	width: 100%;
	margin-bottom: 15px;
}

.topic-img img {
	width: 100%;
	height: auto;
	display: block;
}

.topic-text {
	font-size: 15px;
	/* font-family: "Noto Sans JP", sans-serif; */
	font-weight: 400;
	line-height: 2;
	letter-spacing: 1px;
	text-align: justify;
	/* 文章の端を揃える */
}

@media screen and (min-width: 1024px) {
	.experience {
		padding: 120px 0;
	}

	.experience-inner {
		max-width: 1100px;
		margin: 0 auto;
	}

	/* 1. 各トピック（文章＋画像）を横並びにする親要素 */
	.topic-content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 120px;
		/* トピック間の余白 */
		gap: 60px;
		/* 文章と画像の間の隙間 */
	}

	/* 2. Topic 02 (2つ目のコンテンツ) のみ左右を反転させる */
	.topic-content:nth-of-type(even) {
		flex-direction: row-reverse;
	}

	/* 3. 文章エリア：余計な absolute 設定を消し、幅を調整 */
	.topic-item {
		flex: 1;
		position: static;
		/* 絶対配置を解除 */
	}

	/* 4. 画像エリア：幅を固定して縮ませない */
	.topic-img {
		flex: 0 0 500px;
		/* 画像の横幅を500pxに固定 */
		position: static;
		/* 絶対配置を解除 */
		max-width: none;
	}

	.topic-img img {
		width: 80%;
		height: auto;
		display: block;
	}

	/* テキスト周りの微調整 */
	.topic-label {
		font-family: "Cormorant Garamond", serif;
		font-style: italic;
		color: #C79739;
		font-size: 24px;
		margin-bottom: 15px;
		display: block;
	}

	.topic-item h3 {
		font-size: 32px;
		font-weight: 600;
		margin-bottom: 30px;
		white-space: normal;
		line-height: 1.4;
	}

	.topic-text p {
		font-size: 16px;
		line-height: 2;
		text-align: justify;
		/* 両端揃えで美しく */
	}
}

/* ----------------------------------------------------
	library
---------------------------------------------------- */

.library {
	background-color: #1D3C57;
	color: #fff;
	padding: 100px 20px;
	text-align: left;
	font-family: "Noto Serif JP", serif;
}

.library-inner {
	max-width: 600px;
	margin: 0 auto;
}

/* 見出し部分 */
.library-sub {
	color: #C79739;
	font-size: 20px;
	font-family: "Cormorant Garamond", serif;
	font-style: italic;
	margin-bottom: 5px;
	letter-spacing: 0.1em;
}

.library-title {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 50px;
	letter-spacing: 0.25em;
}

/* リード文 */
.library-lead {
	line-height: 2.5;
	margin-bottom: 80px;
	letter-spacing: 1.5px;
	/* リード文は左寄せ（または均等割付）が見やすいです */
}


/* まとめた画像 */
.library-visual {
	width: 100%;
	margin-bottom: 80px;
}

.library-visual img {
	width: 100%;
	height: auto;
	display: block;
}

/* ボタン部分 */
.library-cta {
	margin-top: 40px;
	text-align: center;
}

.btn-library {
	display: block;
	position: relative;
	border: 1px solid #fff;
	padding: 20px;
	margin: 0 30px;
	color: #fff;
	text-decoration: none;
	font-size: 1.1rem;
	letter-spacing: 0.2em;
	transition: background-color 0.3s;
}

/* ボタン左側のゴールドライン */
.btn-library::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 4px;
	height: 103%;
	background-color: #C79739;
}


@media screen and (min-width: 1024px) {
	.library {
		padding: 160px 0;
	}

	.library-inner {
		max-width: 1120px;
		margin: 0 auto;
		width: 78%;
	}

	.library-container {
		display: flex;
		justify-content: space-between;
		gap: 18%;
	}

	.library-container .library-lead {
		width: 37%;
		font-size: 20px;
		letter-spacing: 0.03em;
		line-height: 3;
	}

	.library-container .library-visual {
		width: 45%;
		/*画像サイズ指定*/
		margin: 0;
		padding: 0;
		overflow: hidden;
		position: relative;
	}


	.library-sub {
		font-size: 24px;
	}

	.library-title {
		font-size: 32px;
		margin-bottom: 80px;
		letter-spacing: 0.3em;
	}

	/* 5. 枠線付きボタンの調整 */
	.btn-library {
		display: inline-block;
		padding: 15px 50px;
		border: 1px solid #C79739;
		color: #fff;
		text-decoration: none;
		transition: all 0.3s;
	}

	.btn-library:hover {
		background-color: #C79739;
		color: #1D3C57;
	}
}


/* ----------------------------------------------------
    brands
---------------------------------------------------- */
.brands {
	padding: 120px 15px;
	background-image: url('./images/brands-bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #fcfcfc;
	text-align: center;
}

.brands-inner {
	max-width: 600px;
	margin: 0 auto;
}


.section-lead {
	margin-bottom: 80px;
}

/* 一覧のレイアウト */
.brand-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 10px;
	justify-content: space-between;
}

/* 個別のカード：背景画像の上で見やすくするために白背景と影を追加 */
.brand-card {
	width: calc(50% - 5px);
	background: #ffffff;
	/* カード本体は白 */
	padding-bottom: 20px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
}

.brand-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 15px;
}

.brand-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.brand-name {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.1em;
}

.brand-kana {
	font-size: 10px;
	margin-bottom: 16px;
	font-weight: 300;
}

.brand-copy {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 300;
	margin-bottom: 16px;
	min-height: 2.4em;
}

/* Websiteボタン */
.btn-website {
	display: inline-block;
	padding: 5px 20px;
	border: 0.5px solid #C79739;
	color: #C79739;
	text-decoration: none;
	font-family: "Cormorant Garamond", serif;
	font-size: 14px;
	font-style: italic;
	transition: all 0.3s;
}

.btn-website:hover {
	background-color: #C79739;
	color: #fff;
}

.order-notice {
	text-align: left;
	font-size: 16px;
	margin-top: 5px;
}

@media screen and (min-width: 1024px) {

	/* 1. セクション全体の余白調整 */

	.brands-inner {
		max-width: 1120px;
		margin: 0 auto;
		width: 78%;
	}

	.section-lead p {
		margin-bottom: 95px;
	}

	/* 3. ブランドリスト：5列（5カラム）のグリッド */
	.brand-list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		/* 5つ並べる */
		gap: 32px;

	}

	/* 4. ブランドカード：浮き上がるようなデザイン */
	.brand-card {
		padding-bottom: 28px;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		/* 高さを揃える */
		display: flex;
		flex-direction: column;
		width: auto;
	}

	/* マウスを乗せた時の動き */
	.brand-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
	}

	.brand-img {
		margin-bottom: 20px;
	}

	/* 5. テキスト情報の調整 */
	.brand-name {
		font-size: 17px;
		font-weight: 500;
		padding: 0 10px;
	}

	.brand-kana {
		font-size: 11px;
		font-weight: 300;
		letter-spacing: 0.15em;
		margin-bottom: 15px;
	}

	.brand-copy {
		font-size: 16px;
		/* font-family: "Noto Sans JP", sans-serif; */
		font-weight: 300;
		padding: 0 10px;
		margin-bottom: 20px;
		flex-grow: 1;
		/* ボタンの位置を下辺に揃える */
	}

	/* 6. Websiteボタン */
	.btn-website {
		display: inline-block;
		font-size: 11px;
		color: #C79739;
		text-decoration: none;
		border: 0.5px solid #C79739;
		padding: 4px 15px;
		margin: 0 auto;
		transition: all 0.3s;
	}

	.btn-website:hover {
		background-color: #C79739;
		color: #fff;
	}

	/* 7. 「順不同」の注釈 */
	.order-notice {
		font-size: 14px;
		margin-top: 10px;
		letter-spacing: 0.1em;
	}
}

/* ----------------------------------------------------
    outline
---------------------------------------------------- */
.outline {
	padding: 100px 45px 80px;
	background-color: #F9F8F6;
}

.outline-inner {
	max-width: 600px;
	margin: 0 auto;
}


/* リスト全体のスタイル */

.outline-item {
	border-bottom: 0.5px solid #D9D9D9;
	/* 項目ごとの区切り線 */
	padding: 18px 0 10px;
	text-align: left;
}

/* 項目名（名称、開催日時など） */
.outline-item dt {
	font-size: 14px;
	margin-bottom: 5px;
	letter-spacing: 0.2em;
}

/* 内容 */
.outline-item dd {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.03em;
	margin-left: 0;
	/* デフォルトのインデントをリセット */
}

.outline-item.accsess dd {
	margin-bottom: 8px;
}

@media screen and (min-width: 1024px) {

	.outline {
		padding: 120px 0;
	}

	.outline-inner {
		max-width: 830px;
	}

	/* 3. 各項目を横並びにし、上下の線を整える */

	.outline-item {
		display: flex;
		align-items: flex-start;
		padding: 20px 0;
		border-bottom: 0.5px solid #D9D9D9;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 8px;
	}

	.outline-item dt {
		flex: 0 0 250px;
		font-size: 14px;
		margin-bottom: 0;
		color: #333;
	}

	/* 5. 内容（右側）の調整 */
	.outline-item dd {
		font-size: 16px;
		line-height: 2;
		letter-spacing: 0.03em;
		margin-top: -8px;
	}

	.outline-item dd.img {
		width: 49%;
		background-color: #fff;
	}


}

/* ----------------------------------------------------
	faq
---------------------------------------------------- */
.faq {
	padding: 100px 20px;
	/* 背景画像の設定 */
	background-image: url('./images/faq-bg.jpg');
	/* 背景画像のパス */
	background-size: cover;
	background-position: center;
	font-family: "Noto Serif JP", serif;
	text-align: center;
}

.faq-inner {
	max-width: 600px;
	margin: 0 auto;
}


/* 各質問のボックス */
.faq-item {
	background-color: #E9E9E9;
	margin-bottom: 15px;
	text-align: left;
}

.faq-item summary {
	list-style: none;
	/* デフォルトの矢印を消す */
	padding: 18px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	position: relative;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.5;
}

/* サマリーのQ.という文字を疑似要素で追加 */
.q-text::before {
	content: "Q. ";
	margin-right: 1px;
}

/* プラスアイコンの作成 */
.icon {
	position: relative;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-left: 15px;
}

.icon::before,
.icon::after {
	content: "";
	position: absolute;
	background-color: #202020;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.icon::before {
	width: 100%;
	height: 1px;
}

/* 横線 */
.icon::after {
	width: 1px;
	height: 100%;
	transition: 0.3s;
}

/* 縦線 */

/* 開いている時は縦線を消して「ー」にする */
.faq-item[open] .icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

/* 回答エリア */
.faq-answer {
	padding: 0 20px 25px;
	font-size: 14px;
	letter-spacing: 0.03em;
	font-weight: 400;
	line-height: 1.5;
}

/* 回答エリアのテキスト */
.faq-answer p {
	position: relative;
	padding-left: 22px;
	/* A. の分だけ左に余白を空ける */
}

.faq-answer p::before {
	content: "A. ";
	position: absolute;
	left: 0;
	color: #C79739;
	/* ゴールドにするとQ.と対比が出て綺麗です */
	font-weight: bold;
}

@media screen and (min-width: 1024px) {

	/* 1. セクション全体の余白を広げる */
	.faq {
		padding: 120px 0;
	}

	/* 2. PCでの読みやすさを考慮し、中央のコンテンツ幅を少し広げる */
	.faq-inner {
		max-width: 900px;
	}


	.faq-item {
		margin-bottom: 24px;
		transition: background-color 0.3s;
	}

	.faq-item:hover {
		background-color: #dfdfdf;
	}

	.faq-item summary {
		padding: 28px 40px;
		font-size: 18px;
		letter-spacing: 0.03em;
	}

	.faq-answer {
		padding: 0 64px 35px 40px;
		font-size: 16px;
		letter-spacing: 0.03em;
		line-height: 1.8;
	}

	.faq-answer p {
		padding-left: 28px;
	}

	/* 6. アイコンのサイズ微調整 */
	.icon {
		width: 24px;
		height: 24px;
	}
}

/* ----------------------------------------------------
    vision
---------------------------------------------------- */

.vision {
	padding: 100px 32px;
	background-color: #fff;
	text-align: center;
}

.vision-inner {
	max-width: 600px;
	margin: 0 auto;
}


.vision-lead,
.vision-text {
	font-weight: 500;
	line-height: 2.3;
	letter-spacing: 0.02em;
	margin-bottom: 40px;
	color: #1D3C57;
}


.highlight {
	font-weight: 800;
}

.vision-img {
	width: 100%;
	margin-bottom: 40px;
}

.vision-img img {
	width: 100%;
	height: auto;
	display: block;
}

.vision-text:last-child {
	margin-bottom: 0;
}

.vision-closing {
	margin-top: 40px;
}

@media screen and (min-width: 1024px) {
	.vision {
		padding: 160px 32px;
		background-color: #fff;
		text-align: center;
	}

	.vision-inner {
		max-width: 718px;
	}

	.vision-lead,
	.vision-text {
		font-size: 18px;
		line-height: 2.4;
		letter-spacing: 0.02em;
		margin-bottom: 60px;
	}

	.vision-img {
		width: 100%;
		margin-bottom: 60px;
	}
}

/* ----------------------------------------------------
    members
---------------------------------------------------- */

/* --- セクション全体の土台 --- */
.members {
	position: relative;
	padding: 100px 0;
	background-image: url('./images/members-bg.jpg');
	background-size: cover;
	overflow: hidden;
	/* 斜線が画面からはみ出さないようにガード */
	z-index: 1;
}

/* --- 背景のゴールド斜線（絶対配置で背面に送る） --- */
.members::before,
.members::after {
	content: "";
	position: absolute;
	width: 150%;
	height: 1px;
	background-color: #C79739;
	z-index: -1;
	/* 文字やカードより後ろに配置 */
	opacity: 0.6;
}

.members::before {
	top: 0;
	left: -50%;
	transform: rotate(-45deg);
	/* 左上からのライン */
}

.members::after {
	bottom: 0%;
	right: -50%;
	transform: rotate(-45deg);
	/* 右下へのライン */
}

/* --- コンテンツエリア --- */
.members-inner {
	max-width: 600px;
	/* スマホ時のコンテンツ幅 */
	margin: 0 auto;
	text-align: center;
}

.members-title {
	margin-bottom: 65px;
}

.members-lead {
	line-height: 2.3;
	letter-spacing: 1px;
	padding: 0 35px;
}

.members-lead p+p {
	margin-top: 40px;
}

.member-list {
	padding: 80px 0;
}

.slick-list {
	overflow: visible !important;
}

.member-card {
	flex-shrink: 0;
	margin: 0 8px;
	background: #fff;
	padding: 25px 32px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	text-align: center;
	scroll-snap-align: center;
	height: 260px !important;
}

.member-img {
	margin-bottom: 13px;
}

.member-img img {
	aspect-ratio: 1/1;
	object-fit: cover;
}

.member-name {
	font-size: 18px;
	letter-spacing: 0.03em;
	margin-bottom: 4px;
}

.member-role {
	font-size: 12px;
	color: #818181;
	letter-spacing: 0.08em;
	margin-bottom: 13px;
}

.btn-more {
	color: #C79739;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.03em;
	font-weight: 500;
}

.member-info {
	display: flex;
	flex-direction: column;

}

/* --- 下部ボタン --- */
.btn-all-members {
	display: inline-block;
	background-color: #1D3C57;
	color: #fff;
	padding: 15px 50px;
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 0.08em;
	border-radius: 4px;
}

.member-list-container {
	overflow: hidden;
}

.members-cta {
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.members {
		padding: 160px 0;
	}

	.members-inner {
		max-width: 1200px;
	}

	/* PC 時はコンテンツ幅を広げる */

	.members::before {
		top: 0;
		left: -60%;
	}

	.members::after {
		right: -60%;
	}

	/* slick 破棄後、フレックスで全カードを横並び表示 */
	.member-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px;
		padding: 80px 0;
		max-width: 820px;
		margin: 0 auto;
		width: 78%;
	}

	/* PC では overflow: visible の上書きを解除 */
	.slick-list {
		overflow: hidden !important;
	}

	.member-list .member-card {
		box-sizing: border-box;
		width: calc((100% - 48px) / 3) !important;
		flex: 0 0 calc((100% - 48px) / 3) !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 24px 25px;
		height: auto !important;
	}
}

/* ----------------------------------------------------
	attention
---------------------------------------------------- */

.attention {
	padding: 100px 0 80px;
	overflow: hidden;
	background-color: #fff;
	text-align: center;
}

.attention-inner {
	max-width: 600px;
	padding: 0 32px;
	margin: 0 auto;
}

.attention-title {
	margin-bottom: 65px;
}

.attention-text {
	line-height: 2.6;
	letter-spacing: 0.03em;
}

.attention-text p {
	margin-bottom: 65px;
}

.attention-image-box {
	margin-left: -32px;
	width: calc(100% + 32px);
}

.attention-image-box img {
	width: 100%;
	display: block;
}

@media screen and (min-width: 1024px) {
	.attention {
		padding: 160px;
	}

	.attention-inner {
		max-width: 884px;
	}

	.attention-text {
		font-size: 20px;
		line-height: 2.9;
	}

	.attention-text p {
		margin-bottom: 65px;
	}

	.attention-image-box img {
		margin-top: 55px;
	}
}


/* ----------------------------------------------------
	cta
---------------------------------------------------- */
.cta {
	position: relative;
	padding: 120px 27px;
	background-image: url('./images/cta-bg.jpg');
	background-size: cover;
	background-position: center;
	text-align: center;
	color: #fff;
}

.cta-main-copy {
	font-size: 28px;
	line-height: 2;
	letter-spacing: 0.04em;
	margin-bottom: 40px;
}

.cta-sub-copy {
	line-height: 2.1;
	margin-bottom: 12px;
	letter-spacing: 0.02em;
}

.btn-ticket {
	display: inline-block;
	width: 100%;
	max-width: 300px;
	padding: 21px 0;
	background: linear-gradient(90deg, #ffe9bd, #c79739 60%);
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 0.02em;
	border-radius: 2px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	margin-bottom: 16px;
}

.btn-ticket:hover {
	opacity: 0.8;
}

.btn-ticket2 {
	display: inline-block;
	width: 100%;
	max-width: 300px;
	padding: 21px 0;
	border: #fff 1px solid;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 0.02em;
	border-radius: 2px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transition: all 0.3s;
}

.btn-ticket:hover {
	opacity: 0.8;
}

.cta-note {
	margin-bottom: 40px;
	font-size: 12px;
	letter-spacing: 0.02em;
}


@media screen and (min-width: 1024px) {
	.cta {
		padding: 160px 160px;
	}

	.cta-main-copy {
		font-size: 32px;
		letter-spacing: 0.1em;
		margin-bottom: 56px;
	}

	.cta-sub-copy {
		font-size: 20px;
		line-height: 2.1;
		margin-bottom: 16px;
		letter-spacing: 0.02em;
	}

	.cta-note {
		font-size: 14px;
		letter-spacing: 0.03em;
		margin-bottom: 56px;
	}

	.cta-action {
		display: flex;
		gap: 16px;
		justify-content: center;
	}

	.btn-ticket {
		font-size: 18px;
		border-radius: 4px;
		margin-bottom: 0;
		width: 416px;
		padding: 16px;
		transition: all 0.3s;
	}

	.btn-ticket2 {
		font-size: 18px;
		border-radius: 4px;
		width: 416px;
		padding: 16px;
		transition: all 0.3s;
	}

	.btn-ticket2:hover {
		background-color: #fff;
		color: #1D3C57;
		border: #fff 1px solid;
	}
}


/* ----------------------------------------------------
    footer
---------------------------------------------------- */

footer {
	padding-top: 40px;
	background-color: #fff;
	text-align: center;
	color: #1D3C57;
}

.footer-inner {
	margin: 0 auto;
	padding: 0 24px;
}

/* イベント名・ロゴ */
.footer-event-name {
	font-size: 20px;
	letter-spacing: 0.03em;
	margin-bottom: 5px;
	font-weight: 500;
}

.footer-event-sub {
	font-size: 12px;
	font-family: "Marcellus", serif;
	letter-spacing: 0.1em;
	margin-bottom: 40px;
	display: block;
}

/* SNSアイコン */
.footer-sns {
	display: flex;
	justify-content: center;
	gap: 48px;
	margin-bottom: 40px;
}

.sns-link {
	width: 35px;
	/* アイコンのサイズ */
	height: auto;
	transition: opacity 0.3s;
}

.sns-link:hover {
	opacity: 0.7;
}

.sns-link img {
	width: 100%;
	height: auto;
}

.footer-map {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	/* 16:9のアスペクト比 */
	height: 0;
}

.footer-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.privacy-link {
	color: #1D3C57;
	margin-top: 12px;
	display: block;
}

/* コピーライト */
.footer-copyright {
	padding: 15px 0;
}

.footer-copyright small {
	font-size: 12px;
	font-family: "Noto Sans JP", sans-serif;
	letter-spacing: 0.02em;
	display: block;
}

@media screen and (min-width: 1024px) {
	.footer {
		padding: 100px 0;
		background-color: #fff;
		/* 背景色に合わせて調整してください */
	}

	.footer-container.pc {
		display: flex;
		justify-content: space-between;
		/* 左右の端に寄せる */
		align-items: center;
		/* 垂直方向を中央で揃える */
		max-width: 1200px;
		/* 全体の最大幅 */
		margin: 0 auto;
		padding: 0 40px;
	}

	.footer-left-content {
		flex: 1;
		text-align: left;
	}

	.footer-inner {
		padding: 80px 32px;
	}

	.footer-event-name {
		font-size: 32px;
		letter-spacing: 0.03em;
		margin-bottom: 8px;
		font-weight: 500;
	}

	.footer-event-sub {
		font-size: 16px;
		letter-spacing: 0.1em;
		margin-bottom: 40px;
	}

	.footer-sns {
		display: flex;
		justify-content: flex-start;
		gap: 40px;
		margin-bottom: 40px;
	}

	.footer-sns img {
		width: 35px;
		/* アイコンサイズを調整 */
		height: auto;
	}

	.footer-copyright {
		font-size: 14px;
		color: #1D3C57;
	}

	.footer-map {
		width: 40%;
		padding-top: 26.25%;
	}
}