@charset "UTF-8";
@import url("reset.css");

/* ==================================================
   1. 全体のレイアウト幅・余白調整
================================================== */
.ef-cafe-mv_special picture,
.ef-cafe-mv_special img {
	display: block !important;
	width: 100% !important;
	max-width: 800px !important;
	margin: 0 auto !important;
}

#ef-cafe-_ac-mv_special {
	width: 100% !important;
	max-width: 900px !important;
	margin: 0 auto !important;
	padding: 0 5% !important;
	box-sizing: border-box !important;
}

.c-page-sub__content-detail {
	width: 100% !important;
	max-width: 880px !important;
	margin: 0 auto !important;
	padding: 0 15px !important;
	box-sizing: border-box !important;
}

.c-content-main .bge-contents {
	overflow: visible !important;
}

/* ==================================================
   2. タイムラインのデザイン（第201回ベース）
================================================== */
.custom-timeline-wrapper {
	display: block !important;
	width: 100% !important;
	margin-bottom: 50px !important;
	position: relative !important;
	z-index: auto !important;
}

/* 【重要】元のテーマの縦線を消すための記述（復元） */
.custom-timeline-wrapper::before,
.custom-timeline-wrapper::after {
	display: none !important;
}

.custom-wrapper-bottom {
	margin-bottom: -15px !important;
}

.custom-timeline-box {
	background-color: #fff !important;
	border: 3px solid #ffcc00 !important;
	border-radius: 15px !important;
	padding: 20px !important;
	margin: 0 !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 20px;
	position: relative;
	width: 100% !important;
	box-sizing: border-box !important;
	overflow: visible !important;
	z-index: 1 !important;
}

/* ヘッダー・タイトル */
.custom-full-header {
	border-bottom: 2px solid #24cec9 !important;
	padding-bottom: 10px !important;
	margin-bottom: 5px !important;
}

.custom-full-title {
	color: #24cec9 !important;
	font-size: 24px !important;
	font-weight: bold !important;
}

/* 本文テキスト */
.custom-full-text p,
.custom-upper-section p {
	font-size: 18px !important;
	line-height: 1.4 !important;
	color: #333 !important;
	font-weight: normal !important;
	margin: 0 !important;
	text-align: left !important;
	letter-spacing: 0.05em !important;
}

/* フル幅ボックス */
.custom-box-no-time {
	display: block !important;
}

.custom-content-full {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
}

/* 第201回：時計なしレイアウトのインデント解除 */
.custom-box-201 .custom-content-full>div:not(.custom-full-header) {
	margin-left: 0 !important;
	width: 100% !important;
}

/* ==================================================
   3. 複雑なレイアウト用（右側コンテンツ画像群）
================================================== */
/* 上段：テキストと画像の横並び（共通） */
.custom-upper-section {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 20px !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	width: 100% !important;
}

.custom-upper-section p {
	flex: 1 1 auto !important;
	width: auto !important;
}

/* 上段のテキストと画像の間隔・幅調整 */
.custom-box-201 .custom-upper-section {
	align-items: flex-start !important;
}

/* 画像群の共通スタイル */
.custom-main-img {
	width: 35% !important;
	/* 右上の画像の幅 */
	flex-shrink: 0 !important;
	display: block !important;
}

.custom-lower-imgs-2 {
	display: flex !important;
	gap: 10px !important;
	justify-content: space-between !important;
	width: 100% !important;
	flex-shrink: 0 !important;
}

.custom-lower-imgs,
.custom-timeline-lower-imgs-4 {
	display: flex !important;
	gap: 10px !important;
	justify-content: space-between !important;
}

/* 画像自体のスタイルと枠線 */
.custom-main-img img,
.custom-lower-imgs-2 img,
.custom-lower-imgs img,
.custom-timeline-lower-imgs-4 img {
	height: auto !important;
	display: block !important;
	border-radius: 5px !important;
	border: 2px solid #24cec9 !important;
	/* 枠線 */
	box-sizing: border-box !important;
	margin: 0 !important;
}

/* 個別の画像幅 */
.custom-main-img img {
	width: 100% !important;
}

.custom-lower-imgs-2 img {
	width: calc(50% - 5px) !important;
}

.custom-lower-imgs img {
	width: calc(33.333% - 6.6px) !important;
}

.custom-timeline-lower-imgs-4 img {
	width: calc(25% - 7.5px) !important;
}

/* 上段右側の縦並び画像用レイアウト */
.custom-img-vertical {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

/* PC/SP 画像切り替え用クラス */
.custom-lower-imgs img.img-sp-only {
	display: none !important;
}

/* ==================================================
   4. 見出しのスタイル
================================================== */
#ef-cafe-special #thanks .title {
	font-weight: bold !important;
	font-size: 2.5vw !important;
	background: #fce333 !important;
	color: #da6f82 !important;
	margin: 0 calc(50% - 50vw) !important;
	width: 100vw !important;
	padding: 10px 0 !important;
	text-align: center !important;
}

#ef-cafe-special #container_special {
	padding-bottom: 0 !important;
}

/* ==================================================
   5. 動画プレイヤー（Plyr）用スタイル
================================================== */
:root {
	--plyr-color-main: #e60012;
}

/* 1つ目の動画（横長）用のスタイル */
.movie-box-1 {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	/* 横長固定 */
	overflow: hidden;
	border-radius: 5px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.movie-box-1 video {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

/* 2つ目の動画（縦長）用のスタイル */
.movie-box-3 {
	display: block;
	margin: 0 auto;
	padding-bottom: 10px;
	width: 100%;
	text-align: center;
}

/* 第82回と同じ wp-style-video の定義 */
.wp-style-video {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
	max-height: 600px;
	object-fit: contain;
	background-color: #000;
	border-radius: 5px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 770px) {
	.wp-style-video {
		max-height: none;
		background-color: transparent;
		display: block;
		margin: 0 auto;
		max-width: 80%;
		box-shadow: none;
	}
}

/* ==================================================
   6. メッセージ枠（第201回専用）
================================================== */
#hq-message-final-201 {
	width: 100%;
	padding: 50px 15px;
	box-sizing: border-box;
	background-color: #ffffff !important;
}

.message-wrapper-201 {
	max-width: 800px;
	margin: 0 auto;
}

.message-top-img img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 30px;
}

.message-content-201 p {
	font-size: 16px;
	line-height: 2.0;
	color: #333;
	margin-bottom: 25px;
	font-weight: bold;
}

/* テキストの背景色（薄いオレンジ） */
.message-content-201 .bg-orange {
	background-color: #ffecd4;
	font-weight: bold !important;
}

/* 署名エリア */
.message-signature-201 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 40px;
}

.signature-photo-201 img {
	width: 80px;
	height: auto;
	display: block;
}

.signature-name-201 {
	font-size: 18px;
	font-weight: bold;
	font-family: serif !important;
}

.signature-name-201 span {
	font-size: 24px;
	margin-left: 15px;
	font-weight: bold;
}

/* ==================================================
   7. 活動記録リンク用スタイル（PC・スマホ共通）
================================================== */
#ef-cafe-_ac-link_wrap {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 50px 15px !important;
	box-sizing: border-box;
	background-color: #ffde7f;
	background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0px 15px, transparent 15px 30px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0px 15px, transparent 15px 30px);
}

.ef-hq_btmlink_wrap,
.ef-hq_btm-yearlink_wrap {
	max-width: 900px;
	margin: 0 auto;
}

.ef-hq_btmlink_wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* 第199回に合わせたサイズ調整 */
#ef-cafe-_ac-link_wrap .btn_after,
#ef-cafe-_ac-link_wrap .btn_before {
	display: flex;
	width: 46%;
	margin-bottom: 15px;
	background-color: #439daf;
	color: #FFFFFF !important;
	border-radius: 15px;
	padding: 30px 10px;
	align-items: center;
	justify-content: space-between;
	font-size: 2.5rem;
	text-align: left;
	letter-spacing: 0;
	box-sizing: border-box;
	text-decoration: none;
}

#ef-cafe-_ac-link_wrap .btn_after p,
#ef-cafe-_ac-link_wrap .btn_before p {
	margin: 0 auto 0 20px;
	font-weight: bold;
}

/* 【重要】テキストの右寄せを復元 */
.ef-hq_btmlink__left {
	margin: 0 20px 0 auto;
}

#ef-cafe-_ac-link_wrap .ef-hq_btmlink_flexbox-arrow {
	display: inline-block;
	height: 1.2em;
	width: 20%;
	max-width: none;
}

.ef-hq_btmlink_flexbox-arrow-reverse {
	transform: rotate(180deg) !important;
}

.ef-hq_btm-yearlink_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-top: 30px;
	gap: 10px;
}

.ef-hq_btm-yearlink {
	display: flex;
	width: 15%;
	/* 6列に並べるため */
	flex-grow: 1;
	margin-bottom: 15px;
	border-radius: 15px;
	padding: 15px 10px;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	text-align: left;
	box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.6);
	box-sizing: border-box;
	text-decoration: none;
}

a.ef-hq_btm-yearlink {
	color: #FFFFFF !important;
}

.ef-hq_btm-yearlink p {
	margin: 0 auto;
	font-weight: bold;
	line-height: 1.2;
}

.ef-hq_btm-yearlink span {
	font-size: 22px;
	font-weight: bold;
}

.ef-hq_btm-yearlink__c-2026 {
	background-image: linear-gradient(163deg, rgba(165, 89, 152, 1) 50%, rgba(148, 72, 136, 1) 50%);
}

.ef-hq_btm-yearlink__c-2025 {
	background-image: linear-gradient(163deg, rgba(202, 75, 80, 1) 50%, rgba(181, 57, 66, 1) 50%);
}

.ef-hq_btm-yearlink__c-2024 {
	background-image: linear-gradient(163deg, rgba(243, 152, 0, 1) 50%, rgba(232, 129, 33, 1) 50%);
}

.ef-hq_btm-yearlink__c-2023 {
	background-image: linear-gradient(163deg, rgba(88, 148, 160, 1) 50%, rgba(0, 125, 138, 1) 50%);
}

.ef-hq_btm-yearlink__c-2022 {
	background-image: linear-gradient(163deg, rgba(125, 181, 160, 1) 50%, rgba(111, 154, 139, 1) 50%);
}

.ef-hq_btm-yearlink__c-2021 {
	background-image: linear-gradient(163deg, rgba(231, 159, 159, 1) 50%, rgba(192, 131, 144, 1) 50%);
}

/* ==================================================
   8. メディアクエリ：スマホ表示（max-width: 599px）
================================================== */
@media (max-width: 599px) {

	/* 全体・MV */
	.ef-cafe-mv_special picture,
	.ef-cafe-mv_special img {
		width: 90% !important;
		margin: 0 auto !important;
	}

	.mvtxt_special_201 {
		font-size: 3.5vw !important;
		line-height: 5.5vw !important;
		width: 100% !important;
	}

	.mvtxt_special_201_normal {
		font-weight: normal;
	}

	.ef-cafe-mv_special {
		padding-bottom: 8vw !important;
	}

	#ef-cafe-_ac-mv_special,
	.c-page-sub__content-detail {
		padding: 0 15px !important;
	}

	/* 見出し・テキスト */
	#ef-cafe-special #thanks .title {
		font-size: 4.5vw !important;
		padding: 10px 0 !important;
	}

	.custom-full-text p,
	.custom-upper-section p {
		font-size: 3.5vw !important;
		line-height: 5vw !important;
		letter-spacing: 1px !important;
	}

	/* インデント解除（共通） */
	.custom-box-no-time .custom-content-full {
		box-sizing: border-box !important;
	}

	.custom-box-no-time .custom-content-full>div:not(.custom-full-header) {
		margin-left: 0 !important;
		width: 100% !important;
	}

	/* タイムラインの構造変更 */
	.custom-timeline-box {
		flex-direction: column !important;
	}

	.custom-upper-section {
		flex-direction: column !important;
	}

	/* お弁当の準備セクションのSP個別調整（並び順の変更） */
	.custom-preparation {
		display: flex !important;
		flex-direction: column !important;
	}

	.custom-preparation .custom-full-header {
		order: 1;
	}

	.custom-preparation .custom-upper-section {
		order: 2;
		flex-direction: column-reverse !important;
	}

	.custom-preparation .custom-main-img {
		width: 100% !important;
	}

	.custom-preparation .custom-lower-imgs-preparation {
		order: 3;
	}

	.custom-preparation .custom-full-text {
		order: 4;
		margin-top: 0 !important;
	}

	/* 画像群のSP用幅調整 */
	.custom-main-img {
		width: 100% !important;
	}

	.custom-lower-imgs,
	.custom-lower-imgs-2,
	.custom-timeline-lower-imgs-4 {
		flex-direction: row !important;
		flex-wrap: wrap !important;
	}

	.custom-lower-imgs img,
	.custom-lower-imgs-2 img,
	.custom-timeline-lower-imgs-4 img,
	.custom-lower-imgs-preparation img {
		width: calc(50% - 5px) !important;
	}

	/* SP時の画像切り替え（PCのみ表示/SPのみ表示） */
	.custom-lower-imgs img.img-pc-only {
		display: none !important;
	}

	.custom-lower-imgs img.img-sp-only {
		display: block !important;
	}

	/* 動画間隔調整 */
	.custom-movie-wrap {
		gap: 15px !important;
	}

	/* 第201回専用：メッセージ枠のSP調整 */
	.message-signature-201 {
		flex-direction: row;
		gap: 15px;
	}

	.signature-photo-201 img {
		width: 60px;
	}

	.signature-name-201 {
		font-size: 4vw;
		margin-left: 35px !important;
	}

	.signature-name-201 span {
		display: block !important;
		text-align: right !important;
		margin-top: 5px !important;
		margin-left: 0 !important;
		font-size: 5vw;
	}

	#ef-cafe-_ac-link_wrap {
		width: 100% !important;
		padding: 30px 0 !important;
	}

	.ef-hq_btmlink_wrap,
	.ef-hq_btm-yearlink_wrap {
		width: 85% !important;
		margin: 30px auto 0 !important;
	}

	#ef-cafe-_ac-link_wrap .btn_after,
	#ef-cafe-_ac-link_wrap .btn_before {
		width: 49% !important;
		line-height: 5vw !important;
		font-size: 3.2vw !important;
		padding: 20px 2px !important;
		border-radius: 3vw !important;
	}

	#ef-cafe-_ac-link_wrap .btn_after p,
	#ef-cafe-_ac-link_wrap .btn_before p {
		margin: 0 auto 0 10px;
	}

	.ef-hq_btm-yearlink_wrap {
		justify-content: flex-start !important;
		gap: 6px !important;
	}

	.ef-hq_btm-yearlink {
		width: 32% !important;
		line-height: 5vw !important;
		font-size: 3.2vw !important;
		padding: 20px 2px !important;
		border-radius: 3vw !important;
		margin-bottom: 15px !important;
	}

	.ef-hq_btm-yearlink span {
		font-size: 4vw !important;
		font-weight: bold !important;
	}

	/* 矢印のサイズリセット（第199回の記述に合わせる） */
	#ef-cafe-_ac-link_wrap .ef-hq_btmlink_flexbox-arrow {
		width: 20% !important;
		height: 1.2em !important;
	}

	.ef-hq_btm-yearlink img.ef-hq_btmlink_flexbox-arrow {
		width: 10px !important;
	}

	/* 第201回：開催場所の選定セクションのSP個別調整（並び順の変更） */
	.custom-location {
		display: flex !important;
		flex-direction: column !important;
	}

	/* 1. タイトル */
	.custom-location .custom-full-header {
		order: 1;
	}

	/* 2. 上段右側だった画像2枚縦並びを、テキストより上に持ってくる */
	.custom-location .custom-upper-section {
		order: 2;
		flex-direction: column-reverse !important;
	}

	.custom-location .custom-main-img {
		width: 100% !important;
	}

	.custom-location .custom-img-vertical {
		flex-direction: row !important;
		gap: 10px !important;
	}

	.custom-location .custom-img-vertical img {
		width: calc(50% - 5px) !important;
	}

	/* 3. 下半分の横長画像4枚 */
	.custom-location .custom-timeline-lower-imgs-4 {
		order: 3;
	}

	/* 4. 後半のテキストを一番下へ */
	.custom-location .custom-full-text {
		order: 4;
		margin-top: 0 !important;
	}

	/* 第201回：お弁当の配布セクションのSP個別調整（並び順とレイアウト変更） */
	.custom-distribution {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
		justify-content: space-between !important;
	}

	/* 1. タイトルを一番上 */
	.custom-distribution .custom-full-header {
		order: 1;
		width: 100% !important;
	}

	/* 3. テキストを画像1の下へ */
	.custom-distribution .custom-full-text {
		order: 3;
		margin-top: 5px !important;
		margin-bottom: 15px !important;
		width: 100% !important;
	}

	/* 画像を包む親要素の枠を取り払い、直接子要素として扱う（orderを効かせるため） */
	.custom-distribution .custom-dist-imgs-upper,
	.custom-distribution .custom-dist-imgs-lower {
		display: contents !important;
	}

	/* 2. 画像1を幅100%でテキストの上（タイトルの下）に配置 */
	.custom-distribution .dist-img-1 {
		order: 2;
		width: 100% !important;
	}

	/* 4. 残りの画像4枚をテキストの下に2x2で配置 */
	.custom-distribution .dist-img-2 {
		order: 4;
		width: calc(50% - 5px) !important;
	}

	.custom-distribution .dist-img-3 {
		order: 5;
		width: calc(50% - 5px) !important;
	}

	.custom-distribution .dist-img-4 {
		order: 6;
		width: calc(50% - 5px) !important;
	}

	.custom-distribution .dist-img-5 {
		order: 7;
		width: calc(50% - 5px) !important;
	}

	/* 第201回：食事の様子セクションのSP個別調整 */
	.custom-meal {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
		justify-content: space-between !important;
	}

	/* タイトルを横幅100%で一番上（order: 1）に配置 */
	.custom-meal .custom-full-header {
		order: 1;
		width: 100% !important;
	}

	/* 画像を直接 .custom-meal の子要素として扱うためラッパーを無効化 */
	.custom-meal .custom-timeline-lower-imgs-4,
	.custom-meal .custom-lower-imgs {
		display: contents !important;
	}

	/* 2枚目の画像を横幅100%でタイトルの下（order: 2）に配置 */
	.custom-meal .meal-img-2 {
		order: 2;
		width: 100% !important;
	}

	/* その他の画像（1, 3, 4, 5, 6, 7枚目）を2列で配置（order: 3） */
	.custom-meal img:not(.meal-img-2) {
		order: 3;
		width: calc(50% - 5px) !important;
	}

	/* 第201回：海の上の暮らしセクションのSP個別調整 */
	.custom-sea {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
		justify-content: space-between !important;
	}

	/* 1. タイトルを横幅100%で一番上に配置 */
	.custom-sea .custom-full-header {
		order: 1;
		width: 100% !important;
	}

	/* 各ラッパー要素（上段のテキストと画像1、中段・下段の画像群）を無効化し、子要素を直接並び替える */
	.custom-sea .custom-upper-section,
	.custom-sea .custom-lower-imgs {
		display: contents !important;
	}

	/* 2. 画像1枚目を横幅100%でタイトルの下（order: 2）に配置 */
	.custom-sea .custom-main-img {
		order: 2;
		width: 100% !important;
	}

	/* 3. 上段のテキストを画像1枚目の下（order: 3）に配置 */
	.custom-sea .custom-upper-section p {
		order: 3;
		width: 100% !important;
	}

	/* 4. 残りの6枚の画像を2列（横幅50% - 5px）で配置（order: 4） */
	.custom-sea .custom-lower-imgs img {
		order: 4;
		width: calc(50% - 5px) !important;
	}

	/* 5. 最下段のテキストを一番下（order: 5）に配置 */
	.custom-sea .custom-full-text {
		order: 5;
		width: 100% !important;
		margin-top: 5px !important;
	}
}

/* ==================================================
   9. フッターエリア（TOPへ戻るボタン ＆ コピーライト）
================================================== */
#ef-cafe_ac-topback-wrap {
	background-color: #FFFFD7;
	padding: 30px 0;
}

#ef-cafe_ac-topback-wrap a {
	display: block;
	border-radius: 70px;
	height: auto;
	width: 350px;
	color: #FFF;
	font-size: 21px;
	line-height: 50px;
	background-color: #da6f82;
	text-align: center;
	margin: 0 auto;
	vertical-align: middle;
	letter-spacing: 0px !important;
	text-decoration: none;
}

footer {
	padding: 20px;
	text-align: center;
	background: #313131;
	color: #fff;
	font-size: 12px;
	letter-spacing: 0px !important;
	margin: 0;
}

/* スマホ表示用調整 */
@media (max-width: 1024px) {
	#ef-cafe_ac-topback-wrap a {
		max-width: 350px;
		width: 70%;
		font-size: 3vw;
		line-height: 10vw;
	}
}

/* タブレット表示用調整 */
@media (min-width: 768px) and (max-width: 1024px) {
	#ef-cafe_ac-topback-wrap a {
		font-size: 2vw;
	}
}