@charset "utf-8";

:root {
	--site-max: 1280px;
	--site-gutter: 16px;
}

/* トップページ：カテゴリーカード */
.home-card-panel {
    position: relative;
    z-index: 2;
    padding: 36px 24px 40px;
    background: #fff;
}

.home-card-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.home-card-item a {
    display: block;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.home-card-image {
    width: 100%;
    max-width: 150px;
    height: 96px;
    margin: 0 auto 8px;
    overflow: hidden;
}

.home-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.home-card-image--contain img {
    object-fit: contain;
}

.home-card-title {
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: 0.03em;
}

.home-card-description {
    margin: 0;
    color: #666;
    font-size: 12px;
    line-height: 1.5;
}

.home-card-item a:hover .home-card-image img,
.home-card-item a:focus-visible .home-card-image img {
    opacity: 0.78;
}

.home-card-item a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

@media (max-width: 600px) {
    .home-card-panel {
        padding: 28px 20px 32px;
    }

    .home-card-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        max-width: 360px;
    }

    .home-card-image {
        height: 92px;
    }
}

html, body {
	overflow-x: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	min-height: 100%;
	background: #fff;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Screen-reader-only page heading */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body {
	max-width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	background: #fff;
	color: #000;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
/* =========================
   共通
========================= */
p {
	line-height: 1.8;
	margin-bottom: 5px;
}
/* 注釈 共通*/
p.note {
	font-size: 15px;
	padding-left: 1.5em;
	text-indent: -1.5em;
	line-height: 1.6;
}
/* 英文の注釈だけ上書き*/
p.note:lang(en) {
	font-size: 16px;
	line-height: 1.5;
}
/* 記号 */
p.note::before {
	content: "※";
	margin-right: 0.3em;
}
a {
	color: #0059b3;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.24s ease;
}
a:active, a:hover {
	color: #2f4f4f;
}
ul {
	list-style-type: disc;
	padding-left: 20px;
	margin: 10px 0;
}
.route-list {
    list-style: none;
    padding-left: 0;
    margin: 10px 0 20px;
}
.route-list li {
    display: grid;
    grid-template-columns: 7.5em 1fr;
    column-gap: 0;
    align-items: start;
    margin-bottom: 5px;
}
.route-list__date {
    white-space: nowrap;
}
.route-list__place {
    min-width: 0;
}
@media (max-width: 560px) {
    .route-list li {
        grid-template-columns: 6.8em 1fr;
    }
}
.number-list {
	padding-left: 20px;
	margin: 10px 0;
}
.number-list li {
	margin-bottom: 5px;
}
/*汎用テキストカラー*/
.blue { color: #007BFF; }
.orange { color: #FF8000; }
.yellow {color: #ffff99; }
.black {color: #454545; }
.pink {color: #ff80ff; }
/* =========================
   Header
========================= */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background: #fff; 
}
.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	height: 60px;
	box-sizing: border-box;
	z-index: 10001; 
}

/*--- 左エリア（ロゴ・タイトルなど） --- */
.left-area {
	display: flex;
	align-items: center;
	gap: 10px; 
	flex: 1; 
}

/*--- 中央エリア（PCナビ） --- */
.pc-nav {
	flex:  0 0 auto;
	display: flex;
	justify-content: center;
}

/* --- 右エリア（ワープ・言語切替） --- */
.right-area {
	flex: 1; 
	display: flex;
	align-items: center;
	justify-content: flex-end; 
	gap: 10px;
}
@media (max-width: 980px) {
	.pc-nav {
		display: none !important;
  	}
  
   /* スマホの時は左エリアが広がってOK */
	.left-area {
		flex: 1; 
	}
	.right-area {
		flex: 0 0 auto;
	}
}
/* =========================
　Header内の設定
========================= */
  /* 左エリア要素 */
.left-area{
	flex: 1;
	display: flex;
	align-items: center;
}
.menubtn, .menu {
	display: none; 
}
.menubtn {
	width: 30px;
	height: 30px;
	padding: 6px 4px;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.logo {
	flex:1; 
	display: flex;
	justify-content: flex-start;
}
.header .logo a {
	display: none;
}
.left-area .page-title {
	display: flex;
	align-items: center;
	height: 60px;
	padding: 0 0 0 5px;
	font-size: 18px;
	line-height: 1;
	opacity: 0.9;
} 
.nav-menu {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 12px;
}
.nav-menu li {
	display: inline-flex;
	align-items: center;
	height: 60px;
	font-family: "Noto Serif JP", serif;
	color: #4a4a4a;
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
}
.nav-menu a {
	display: inline-flex;
	align-items: center;
	height: 100%;
	color: inherit;
	font: inherit;
	text-decoration: none;
	position: relative;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}
.nav-menu a:hover,
.nav-menu a:focus-visible {
	color: #000;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
}
.menubtn span {
	display: block;
	height: 2px;
	width: 100%;
	background: #000;
	margin-bottom: 5px;
	transition: 0.3s;
}
.menubtn span:last-child { margin-bottom: 0; }
.menubtn:hover span,
.menubtn:focus-visible span {
	background: #4a4a4a;
}

/* --- 右エリア --- */
.warp-area, .lang-switch {
	flex: none !important; 
	width: auto;
}

/* Warpボタンのデザイン */
.warp-area {
	display: inline-block;
	padding: 1px 12px;
	font-size: 16px;
	color: #2e2e2e !important;
	border: 1px solid #c0c0c0;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.warp-area a {
	color: #2e2e2e !important;
}
.header .warp-btn {
	font-size: inherit;
}
.warp-area:hover {
	background: #ffffff;
	color: #fff;
	transform: translateY(-1px); 
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header-inner .right-area a.warp-area:hover {
	color: #ffffff;
	background: #4a4a4a;
}

@media (max-width: 980px) {
	.right-area {
		gap: 0; 
	}
	.warp-btn {
		width: 60px; 
		font-size: 16px;
	}
}
/* JP/EN 切替ボタン */
.lang-switch {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}
.lang-switch {
	display: flex; 
	align-items: center;
	justify-content: flex-end;
	z-index: 1000;
	width: 60px;
	text-align: center; 
	font-family: sans-serif;
	font-size: 16px;
	letter-spacing: 0.5px;
	padding: 5px 0;
	border-radius: 20px;
}
.lang-item {
	color: #666;
	text-decoration: none;
	transition: color 0.3s;
}
.lang-item.active {
	color: #000;
	font-weight: bold;
	pointer-events: none; 
}
.lang-switch a.lang-item:hover {
	  color: #000;
	  text-decoration: underline;
}
.lang-divider {
	margin: 0 0px;
	color: #ccc;
}
/* スマホ表示での調整 */
@media (max-width: 980px) {
	.menubtn {
		display: block;
		flex: 0 0 auto;
	}
   	 /* メニュー本体 */
	.menu {
		display: block; 
		position: absolute;
		visibility: hidden; 
		top: 60px;
		left: 4%; 
		width: 92%;         
		background: #ffffff; 
		z-index: 11000;
		border-radius: 15px; 
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 
		box-sizing: border-box;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transform: translateY(-10px); 
		transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
    }

	.menu.active {
		max-height: 500px;
		opacity: 1;
		transform: translateY(0);
		padding: 10px 0;
		visibility: visible;
	}
    	/* リストのデザイン */
	.menu ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.menu li {
		margin: 0;
		text-align: left;
		padding: 0 36px;
		display: flex;
		align-items: center;
		min-height: 38px;
		font-family: "Noto Serif JP", serif;
		color: #4a4a4a;
		font-size: 16px;
		line-height: 1;
		white-space: nowrap;
		border-bottom: 1px solid #f0f0f0;
	}
	.menu li:not(:first-child) {
		padding-left: 56px;
	}
	.menu li a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 38px;
		color: inherit;
		font: inherit;
		text-decoration: none;
		transition: color 0.2s ease, padding-left 0.2s ease, background 0.2s ease;
	}
	.menu li a:hover,
	.menu li a:focus-visible {
		color: #000;
		padding-left: 8px;
		background: #f9f9f9;
	}
	.menu li:last-child {
		border-bottom: none;
	}
	/* 最後の項目の線を消し、角丸を維持 */
	.menu li:last-child a {
		border-bottom: none;
		border-radius: 0 0 15px 15px;
	}
	.menu li:first-child a {
		border-radius: 15px 15px 0 0;
	}
	.menu li a:active {
		background: #f9f9f9;
	}
}

@media (max-width: 980px) {
	.right-area {
		gap: 0; 
	}
	.warp-btn {
		width: 60px; 
		font-size: 13px;
	}  
  }
@media (max-width: 980px) {
	body.menu-open::before {
		content: "";
		position: fixed;
		inset: 60px 0 0;
		z-index: 90;
		background: rgba(0, 0, 0, 0.8);
		opacity: 1;
		animation: menu-screen-fade 0.24s ease;
	}
}

@keyframes menu-screen-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media (max-width: 768px) {
	.lang-switch {
		top: 45px;
		right: 30px;
		font-size: 14px;
	}
}
/* =========================
   Main
========================= */
body.article-page:not(.has-hero-spacer):not(.resilience-page) .main {
	padding-top: 78px;
}
.main {
  position: relative;
  z-index: 10;
  background: #fff;
  width: 100%;
  padding: 50px 15px; 
  margin-bottom: 200px;
  margin-left: auto;
  margin-right: auto;

}
.main > * {
    min-width: 0;
}
/* =========================
   Resilience Header
========================= */
.header--resilience .menubtn {
	display: block;
	flex: 0 0 auto;
}
.header--resilience .logo a {
	display: none;
}
.header--resilience .left-area {
	flex: 1 1 0;
}
.header--resilience .pc-nav {
	flex: 0 1 auto;
}
.header--resilience .right-area {
	flex: 1 1 0;
}
.resilience-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	white-space: nowrap;
}
.resilience-pagination__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 34px;
	color: #777;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	transform: scaleX(0.72);
	transition: color 0.2s ease, transform 0.2s ease;
}
.resilience-pagination__arrow:hover {
	color: #333;
	transform: scaleX(0.72) translateY(-1px);
}
.resilience-pagination__arrow.is-disabled {
	color: rgba(0, 0, 0, 0.22);
	pointer-events: none;
}
.resilience-pagination__status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	color: #444;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	letter-spacing: 0;
}
.header--resilience .menu {
	display: block;
	position: absolute;
	visibility: hidden;
	top: 60px;
	left: 4%;
	width: min(360px, 92%);
	max-height: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	opacity: 0;
	transform: translateY(-8px);
	transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease;
	z-index: 110;
}
.header--resilience .menu.active {
	max-height: 500px;
	opacity: 1;
	transform: translateY(0);
	padding: 10px 0;
	visibility: visible;
}
.header--resilience .menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.header--resilience .menu li {
	margin: 0;
	text-align: left;
	padding: 0 36px;
	display: flex;
	align-items: center;
	min-height: 38px;
	font-family: "Noto Serif JP", serif;
	color: #4a4a4a;
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
	border-bottom: 1px solid #f0f0f0;
}
.header--resilience .menu li:not(:first-child) {
	padding-left: 56px;
}
.header--resilience .menu li a {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 38px;
	color: inherit;
	font: inherit;
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.2s ease, background 0.2s ease;
}
.header--resilience .menu li a:hover,
.header--resilience .menu li a:focus-visible {
	color: #000;
	padding-left: 8px;
	background: #f9f9f9;
}
.header--resilience .menu li:last-child {
	border-bottom: none;
}
body.resilience-page.menu-open::before {
	content: "";
	position: fixed;
	inset: 60px 0 0;
	z-index: 90;
	background: rgba(0, 0, 0, 0.8);
}
@media (max-width: 560px) {
	.resilience-pagination {
		gap: 0;
	}
	.resilience-pagination__arrow {
		width: 24px;
		height: 30px;
		font-size: 20px;
	}
	.resilience-pagination__status {
		min-width: 48px;
		font-size: 13px;
	}
}
@media (max-width: 980px) {
	.header--resilience .pc-nav {
		display: flex !important;
		justify-content: center;
	}
}
/* =========================
   Article ボックス
========================= */
.article {
    width: min(calc(100% - var(--site-gutter) * 2), 720px);
    margin-block: 0;
    margin-inline: auto;
    padding: 0 20px;
    text-align: justify;
    font-size: 16px;
    opacity: 0.9;
    box-sizing: border-box;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro", YuMincho, "Yu Mincho", "MS Mincho", serif;
}

@media (min-width: 840px) {
    .article {
        width: min(calc(100% - var(--site-gutter) * 2), 720px);
        margin-left: auto;
        margin-right: auto;
    }
    .article.w800 {
        width: min(calc(100% - var(--site-gutter) * 2), 800px);
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;  
        padding-right: 0;
    }
    .article.has-two-columns {
        width: 100%;
        max-width: 900px;
    }
    .article.w900 {
        width: 100%;
        max-width: 900px; 
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;  
        padding-right: 0;
    }
}
   
/* 共通パーツ */
.article-title {
	font-size: 16px;
	opacity: 1;
	font-weight: 500;
	margin-top: 10px;
	padding-bottom: 10px;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
.article-text .h2 {
	font-size: 16px;
	font-weight: 500;
}

/* English article typography */
html[lang="en"] .article {
    font-size: 17px;
    line-height: 1.65;
    text-align: left;
}
html[lang="en"] .article-title {
    font-size: 17px;
    line-height: 1.7;
}
html[lang="en"] .section-divider-text {
    font-size: 20px;
}
html[lang="en"] .caption {
    font-size: 18px;
}
html[lang="en"] .caption.right {
    font-size: 14px;
}
/* =========================
   Article Indent
========================= */
.indent.w20 {margin-left: 20px;}
.indent.w40 {margin-left: 40px;}
.indent.w100 {margin-left: 100px;}
/* =========================
   Page Title
========================= */
.page-title,
.content-title {
	margin-left: auto;
	margin-right: auto;
	/*width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	max-width: var(--site-max); */
	align-items: center;
	text-align: center;
	border: none;

}
.page-title.headline,
.content-title.headline {
	font-size: 24px;
	opacity: 0.9;
	font-weight: 600;
	margin: 20px 0 0 0;	
}
.page-title.subtitle,
.content-title.subtitle {
	font-size: 20px;
	opacity: 0.9;
	font-weight: 500;
	margin: 0 0 10px 0;
}


/* =========================
   Section Title
========================= */
.section-title {
	width: 100%;
	margin:20px 0 10px 0;
	font-size: 16px;
	font-weight: 500;    
	opacity: 0.9;
}
/* =========================
  Section Divider
========================= */
.section-divider {
	border: none;
	border-top: 1px solid #ccc;
	margin: 20px 0;
	max-width: 100%;
	opacity: 0.6;
}
.section-divider-text {
	display: flex;
	align-items: center;
	margin: 40px 0 20px 0;
	font-size: 18px;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

.section-divider-text::after {
	content: "";
	flex: 1;
	border-top: 1px solid #ccc;
	margin-left: 10px;
}
/* =========================
  Article 1カラム　中央配置
========================= */
@media (min-width: 640px) {
    .article {
        width: min(calc(100% - var(--site-gutter) * 2), 720px);
        margin-left: auto;
        margin-right: auto;
    }
}
/* =========================
   Article 内の画像配置（共通）
========================= */
.article-image {
    float: left; 
    margin-right: 30px;
    margin-bottom: 10px;
    height: auto;
}
/* 回り込みによるレイアウト崩れ防止 */
.article::after,
.article.w800::after {
    content: "";
    display: block;
    clear: both;
}
/* ====画像の幅バリエーション ===== */
.img-w40 { width: 40px; }
.img-w60 { width: 60px; }
.img-w80 { width: 80px; }
.img-w100 { width: 100px; }
.img-w200 { width: 200px; }
.img-w300 { width: 300px; }
.img-w400 { width: 400px; }
.img-w450 { width: 450px; }
/* 540px指定：スマホ（画面幅540px以下）では回り込み解除し全幅 */
.img-w540 { 
    width: 540px; 
    max-width: 100%; 
}
@media (max-width: 540px) {
    .img-w450 {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
}
/* =========================
  Article 画像を右に配置（reverse）
========================= */
.article-image.reverse {
    float: right;
    margin-right: 0;
    margin-left: 30px; 
    margin-bottom: 10px;
}
/* =========================
  Article figure with caption
========================= */
.article-figure {
    float: left;
    margin: 0 30px 10px 0;
}
.article-figure.reverse {
    float: right;
    margin: 0 0 10px 30px;
}
.article-figure-item {
    margin: 0;
}
.article-figure img,
.cast-figure img {
    display: block;
    width: 100%;
    height: auto;
}
.article-figure .caption.right,
.cast-figure .caption.right {
    width: 100%;
    padding-right: 4px;
    box-sizing: border-box;
}
.cast-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    align-items: start;
    gap: 24px;
    margin: 18px 0 28px;
}
.cast-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.cast-table th,
.cast-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #d8d8d8;
    vertical-align: top;
}
.cast-table th {
    width: 3.5em;
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
}
.cast-names {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
}
.cast-figure {
    width: 100%;
    margin: 0;
}
.production-credits {
    width: min(100%, 660px);
    margin: 20px auto 10px;
    padding: 10px 24px;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    font-size: 15px;
    line-height: 1.85;
}
.production-credits__note {
    margin: 0 0 10px;
    color: #666;
    font-size: 13px;
    text-align: right;
}
.production-credits__row {
    display: grid;
    grid-template-columns: 10em minmax(0, 1fr);
    gap: 1em;
    margin: 0 0 10px;
}
.production-credits__role {
    font-weight: 600;
    color: #333;
    text-align: right;
    white-space: nowrap;
}
.production-credits__names {
    color: #333;
}
.production-credits__names a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(80, 80, 80, 0.35);
}
.production-credits__names a:hover {
    color: #666;
    border-bottom-color: rgba(80, 80, 80, 0.65);
}
.production-credits__director {
    margin-top: 22px;
    margin-bottom: 18px;
}
html[lang="en"] .production-credits {
    width: min(100%, 720px);
}
html[lang="en"] .production-credits__row {
    grid-template-columns: 12.5em minmax(0, 1fr);
}
@media (max-width: 560px) {
    .production-credits {
        width: 100%;
        padding: 18px 4px 20px;
        font-size: 14px;
    }
    .production-credits__note {
        text-align: left;
    }
    .production-credits__row,
    html[lang="en"] .production-credits__row {
        grid-template-columns: 1fr;
        gap: 2px;
        margin-bottom: 12px;
    }
    .production-credits__role {
        text-align: left;
    }
    .production-credits__names {
        padding-left: 1.4em;
    }
}
@media (max-width: 640px) {
    .cast-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .cast-figure {
        width: min(100%, 320px);
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 420px) {
    .cast-table th,
    .cast-table td {
        padding: 10px 6px;
    }
    .cast-names {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}
@media (max-width: 540px) {
    .article-image.img-w450.reverse {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}
/* =========================
  Article 2カラム ボックス（画像なし）両方文章
========================= */
.two-columns-article {
	max-width:1020px;
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.8;    
	gap: 40px;
	box-sizing: border-box; 
}
.two-columns-article .article {
    width: 100%;
    margin-left: auto;
    margin-right: auto;    
    line-height: 1.6;
}
.two-columns-article .article p {
	font-size: 16px;
	margin-bottom: 0.5em;
}
@media (min-width: 768px) {
    .two-columns-article {
        width: min(calc(100% - var(--site-gutter) * 2), 900px);
        flex-direction: row;
        gap: 20px;
    }
.two-columns-article .article {
        width: 50%;
    }
}
/* =========================
   Photo Grid
=========================  */ 
.photo-grid {
    --photo-grid-columns: 1;
    --photo-grid-gap: 5px;

    display: grid;
    grid-template-columns: repeat(var(--photo-grid-columns), minmax(0, 1fr));
    gap: var(--photo-grid-gap);
    width: 100%;
    margin: 0;
    padding: 0;
}

/* PCで3列  */ 
@media (min-width: 768px) {
    .photo-grid {
        --photo-grid-columns: 3;
    }
}

/* 2:3 portrait thumbnails: 3 columns on mobile, 9 columns from 768px. */
.photo-grid--portrait-9 {
    --photo-grid-columns: 3;
}

.photo-grid--portrait-9 .photo-block img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

@media (min-width: 768px) {
    .photo-grid--portrait-9 {
        --photo-grid-columns: 9;
    }
}

/* 2:3 portrait thumbnails: 3 columns on mobile, 5 columns from 768px, no gap. */
.photo-grid--portrait-5 {
    --photo-grid-columns: 3;
    --photo-grid-gap: 0;
}

.photo-grid--portrait-5 .photo-block img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

@media (min-width: 768px) {
    .photo-grid--portrait-5 {
        --photo-grid-columns: 5;
    }
}

/* 2:3 portrait thumbnails: 3 columns at every width, no gap. */
.photo-grid--portrait-3 {
    --photo-grid-columns: 3;
    --photo-grid-gap: 0;
}

.photo-grid--portrait-3 .photo-block img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
}
/* =========================
    画像ブロック
========================= */
.photo-block {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
.photo-block img {
    width: 100%;
    height: auto;
    display: block;
}
.photo-block.portrait img,
.photo-block .portrait img {
    width: auto;
    max-width: 100%;
    max-height: 80vh;
    margin-left: auto;
    margin-right: auto;
}
.photo-block img[data-full],
.photo-block video[data-full],
.article img[data-full],
.article video[data-full] {
    cursor: url('../images/btn-plus.png') 10 10, auto;
}
.photo-block video {
    width: 100%;
    height: auto;
    max-height: 100vh;
    display: block;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーー
   キャプション
ーーーーーーーーーーーーーーーーーーーーーーーー */
.caption {
    width: 100%;
    text-align: left;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro", YuMincho, "Yu Mincho", "MS Mincho", serif;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0;
    opacity: 0.85;
}
.caption.top {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
}
.caption.bottom {
    margin-top: 10px;
    padding: 0;
    font-size: 16px;
}
.caption.bottom.center {
    margin-top: 3px;
    padding-top:0;
    padding-bottom:10px;
    text-align: center;
    font-size: 12px;
    opacity: 0.8;
}
.photo-block .caption.bottom:not(.right) {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.caption:empty {
    display: none;
}
.caption.right{
    margin-top: 5px;
    padding-right:20px;
    text-align: right;
    font-size: 12px;
    opacity: 0.8;
}
.photo-block .caption.right {
    width: calc(100% - 32px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-right: 16px;
}
/* =========================
   画像ブロックで構成するGallery
========================= */
.gallery,
.gallery-auto {
    max-width: 1020px;
    width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
    margin-block: 0;
    margin-inline: auto;
    padding: 0;
    text-align: center;
}
/* =========================
   Spacing utilities
   Numeric values always use hyphens: pt-10, pb-0, ptb-5-10
========================= */
.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: 40px; }
.pt-0 { padding-top: 0; }
.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-40 { padding-top: 40px; }
.pb-0 { padding-bottom: 0; }
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.ptb-0 { padding-top: 0; padding-bottom: 0; }
.ptb-5-0 { padding-top: 5px; padding-bottom: 0; }
.ptb-5-10 { padding-top: 5px; padding-bottom: 10px; }
.ptb-10 { padding-top: 10px; padding-bottom: 10px; }
.ptb-10-0 { padding-top: 10px; padding-bottom: 0; }
.ptb-10-20 { padding-top: 10px; padding-bottom: 20px; }
.ptb-10-30 { padding-top: 10px; padding-bottom: 30px; }
.ptb-20 { padding-top: 20px; padding-bottom: 20px; }
.ptb-20-0 { padding-top: 20px; padding-bottom: 0; }
.ptb-20-20 { padding-top: 20px; padding-bottom: 20px; }
.gap-5 { gap: 5px; }

/* JS-generated galleries keep the historical 40px separation. */
.gallery-auto > .photo-block {
    padding-bottom: 40px;
}

.gallery-wide{
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	margin-left: auto;
	margin-right: auto; 
	padding: 0;   
	text-align: center;
}
.gallery-title{
    width: 100%;
    text-align: left;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro", YuMincho, "Yu Mincho", "MS Mincho", serif;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0;
    opacity: 0.85;
    margin-bottom: 0px;
    padding:0;
    font-weight: 700;
}
/* =========================
   カードギャラリー
========================= */
.card-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;    
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	max-width: var(--site-max);
	padding: 0; 
	box-sizing: border-box;
}
@media (min-width: 640px) {
	.card-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1180px) {
	.card-gallery {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		padding: 0;
	}
}
/* ーーーーーーーーーーーーーーーーーーーーーーーー
   カード本体
ーーーーーーーーーーーーーーーーーーーーーーーー */
.card {
	display: flex;
	flex-direction: column;
	position: relative;
	text-decoration: none;
	color: inherit;
	background: #222;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0,0,0,0.12);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	min-width: 0; 
}
.card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.48) 0%,
		rgba(0, 0, 0, 0.14) 42%,
		rgba(0, 0, 0, 0.58) 100%
	);
	pointer-events: none;
}
.card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
/* ーーーーーーーーーーーーーーーーーーーーーーーー
   画像
ーーーーーーーーーーーーーーーーーーーーーーーー */
.card-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #eee; 
	overflow: hidden;
}
.card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease, opacity 0.35s ease;
}
.card:hover .card-image img {
	transform: scale(1.035);
	opacity: 0.92;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーー
   テキスト
ーーーーーーーーーーーーーーーーーーーーーーーー*/
.card-body {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 12px;
}
.card-title {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	/* font-size: 20px; */
	text-align: left;
	margin: 0;
	font-weight: 600;
	letter-spacing: 0;
	color: #fff;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.card-title .sub {
	color: #ffff99;
	font-size: 14px;
}
@media (min-width: 1180px) {
	.card-title {
		font-size: 18px;
	}
}
.card-text {
	position: absolute;
	top: 48%;
	left: 12px;
	right: 12px;
	font-size: 12px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 8px rgba(0,0,0,0.62);
}
/* --- カードの幅を2倍にする --- */
@media (min-width: 1180px) {
	 .card.wx2 {
		grid-column: span 2;
	}
    .card.hx2 {
		grid-row: auto; 
    }
    .card.whx2 {
		grid-row: auto;
		grid-column: auto;
	}
}
	
/* --- 画像のアスペクト比を調整（任意） --- */
/* 横に2倍広がると16:9では縦が長くなりすぎる場合、比率を調整 */
.whx2 .card-image {
	aspect-ratio: 16 / 9;
}
@media (min-width: 1180px) {
	.card.wx2 .card-image {
		aspect-ratio: 32 / 9;
	}
}
@media (max-width: 639px) {
	.card-gallery {
		gap: 0;
	}
	.card-body {
		padding: 9px;
	}
	.card-title {
		top: 9px;
		left: 9px;
		right: 9px;
		font-size: 16px;
	}
	.card-text {
		top: 55%;
		left: 9px;
		right: 9px;
		font-size: 11px;
		line-height: 1.45;
	}
}

/* =========================
  Gallery Section Divider
========================= */
.gallery-section-divider {
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	max-width: var(--site-max);
	margin: 20px auto;
	border: none;
	border-top: 2px solid #ccc;
	opacity: 0.7;
	box-sizing: border-box;
}
.gallery-section-divider-text {
	display: flex;
	align-items: center;
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	max-width: var(--site-max);
	margin: 10px auto;
	font-size: 16px;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	opacity: 0.9;
	box-sizing: border-box;
}

.gallery-section-divider-text::before{
	content: "";
	flex: 1;
	border-top: 1px solid #ccc;
	margin-left: 0;
}
.gallery-section-divider-text::after {
	content: "";
	flex: 1;
	border-top: 1px solid #ccc;
	margin-right: 0;
}

/* =========================
   フェード
========================= */
.photo-block {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}
.photo-block.show {
    opacity: 1;
    transform: translateY(0);
}
/* 基本設定：スマホ用（2段並び） */
.custom-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  gap: 10px;
}
.custom-list li {
  width: calc(50% - 10px); /* 2列にする設定（gapを考慮） */
  box-sizing: border-box;
  padding: 15px;
  background-color: #f4f4f4;
}

.list-title {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
}

.list-text {
  margin: 0;
  font-size: 0.9rem;
}
@media (min-width: 768px) {
  .custom-list li {
    width: calc(25% - 10px); /* 4列に横並び */
  }
}
/* =========================================
   モーダル（拡大画面）関連
   ========================================= */
 /* 基本設定 */
.modal {
	display: none;     
	position: fixed; 
	z-index: 9999; 
	top: 0;
	left: 0;
	width: 100vw; 
	height: 100vh; 
	background-color: rgba(0, 0, 0, 0.95);
	cursor: zoom-out; 
	justify-content: center;
	align-items: center;
}
/* モーダルの中の画像 */
.modal img {
	max-width: 100%; 
	max-height: 100%; 
	object-fit: contain;
	user-select: none;
	animation: zoom-in-anim 0.2s ease-out; 
	cursor: url('../images/btn-minus.png') 10 10, auto;
}
@keyframes zoom-in-anim {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}
/* ーーーーーーーーーーーーーーーーーーーーーーーー
   通常表示時の設定（画像ブロック側）
ーーーーーーーーーーーーーーーーーーーーーーーー */
.photo-block img:hover {
	opacity: 0.85; 
}
/* ーーーーーーーーーーーーーーーーーーーーーーーー
     スクロール禁止用の制御クラス
ーーーーーーーーーーーーーーーーーーーーーーーー */
body.modal-open {
	overflow: hidden;
	height: 100%;
}
/* =========================
   モーダル関係
========================= */
#image-modal {
	display: none;
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	background: rgba(0,0,0,0.9);
	z-index: 9999;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーー
   ボタンの設定
ーーーーーーーーーーーーーーーーーーーーーーーー */
.nav-btn {
	position: fixed !important;
	top: 50% !important;
	transform: translateY(-50%);
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, 0);
	color: rgba(255, 255, 255, 0.4);
	font-size: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translateY(-50%) scale(0.3, 1); 
	cursor: pointer;
	z-index: 10000 !important;
	transition: all 0.3s ease;
	user-select: none;
}
.nav-btn:hover {
	color: #fff;
	transform: translateY(-50%) scale(0.3, 1.1);
}
#prev-btn { left: 15px !important; }
#next-btn { right: 15px !important; }
#modal-img {
	z-index: 10000;
	max-width: 92vw;
	max-height: 92vh;
}
/*==============================
  ulでタイトルと説明文を入れる(numbering 付)ーResilience目次
===============================*/
/* リスト全体：ブラウザ標準の余白を消して横幅いっぱいに */
.thread-list {
	counter-reset: my-counter;
	list-style: none;
	padding: 0;
	margin-left: auto;
	margin-right: auto;    
	width: 100%;
	max-width:800px;
}
.thread-item {
	width: 100%;
	counter-increment: my-counter; 
	position: relative;
  /* border-bottom: 1px solid #ddd; */
  	display: flex;
	padding: 0 20px 0 20px;
}
/* リンクエリア：（Flexbox）*/
.thread-item a {
	display: flex;
	flex-wrap: wrap; 
	width: 100%; 
	padding: 10px 0 10px 20px;
	text-decoration: none;
	color: inherit;
	box-sizing: border-box; 
	gap: 10px 20px; 
}
/* numberingの設定 */
.thread-item .ul-header::before {
	content: counter(my-counter) ". ";
	margin-right: 5px;
}
/* タイトル部分の設定 */
.thread-item .ul-header {
	flex-basis: 200px;
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 500;
	opacity: 0.9;
}
/* Text部分の設定 */
.thread-item .ul-text {
	flex: 1;
	min-width: 0; 
	font-size: 16px;
	opacity: 0.8;
	line-height: 1.6;
	text-align: justify;
	font-family: "Noto Serif JP", serif;
}
/* スマホ用：600px以下で2段にする */
@media screen and (max-width: 600px) {
	.thread-item a {
		display: block !important; 
		padding: 15px !important;
	}
	.thread-item .ul-header {
		display: block !important;
		flex-basis: auto !important; 
		width: 100% !important; 
		flex-shrink: 1 !important;
		margin-bottom: 8px; 
	}
	.thread-item .ul-text {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
	}
}
/* hover */
.thread-item {
	transition: all 0.3s ease;
	background-color: transparent;
}
.thread-item:hover {
	background-color: #ffffff; 
	box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
	transform: translateY(-2px); 
	z-index: 10; 
	position: relative;
}
.thread-item:hover .ul-text {
	opacity: 1.0;
}

/* =========================
   Translate Panel
========================= */
.translate-panel {
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	margin: 0 auto 18px;
	padding: 0 20px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
}
.content-title.headline + .translate-panel {
	margin-top: 10px;
}
.translate-panel__label {
	white-space: nowrap;
}
.translate-panel__credit {
	white-space: nowrap;
	font-size: 11px;
	color: #888;
}
.translate-select {
	min-width: 220px;
	max-width: min(320px, calc(100vw - 48px));
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 1px solid #c9c9c9;
	background: #fff;
	color: #333;
	padding: 5px 8px;
	border-radius: 2px;
}
.translate-select:focus-visible {
	outline: 2px solid rgba(90, 120, 160, 0.35);
	outline-offset: 2px;
}
@media (max-width: 600px) {
	.translate-panel {
		justify-content: center;
		padding: 0 14px;
		font-size: 11px;
	}
	.translate-panel__credit {
		flex-basis: 100%;
		text-align: center;
	}
}
/* =========================
  Footer
========================= */
#site-footer {
	margin-top: auto;
}
.site-footer {
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	margin-left: auto;
	margin-right: auto;
	padding: 20px 20px 100px 20px;
	background: #bbbbbb;
	color: #ececec;
	font-size: 14px;
}
.footer-inner {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
  	gap: 28px;
	flex-wrap: wrap;
	line-height: 1; 
}
.footer-link {
	display: inline-flex;
	align-items: flex-end;
	color: inherit;
	text-decoration: none;
}
.footer-4travel,
.footer-policy,
.footer-contact {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}
/* 共通 */
.footer-item {
	display: inline-flex;
	align-items: flex-end;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
/* リンク */
.site-footer a {
	color: inherit;
	text-decoration: none;
}
.copyright {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
}
.copy-mark {
	display: inline-block; 
	font-size: 0.9em; 
	transform: translateY(-0.5px); 
}
.copy-text {
	display: inline-block; 
	transform: translateY(-0.5px);
}
.footer-item.icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	display: block;
	transform: translateY(2px); 
}
.ft-4travel {
	letter-spacing: 0.05em;
}
.ft-4 {
	font-weight: 400;
	font-size: 1.4em;
	line-height: 1;
	vertical-align: baseline;
}
/* hover */
.site-footer a:hover .footer-item {
	opacity: 0.6;
	transform: translateY(-2px);
}


/* Footer Mark */
.site-footer {
	position: relative;
}
.footer-mark {
	position: absolute;
	left: var(--footer-mark-left, 20px);
	top: var(--footer-mark-top, 20px);
	width: var(--footer-mark-size, 20px);
	height: auto;
	display: block;
	pointer-events: none;
}
.index-page .footer-mark {
	top: var(--footer-mark-top-index, 12px);
}

@media (max-width: 600px) {
	.footer-mark {
		left: var(--footer-mark-left-sp, var(--footer-mark-left, 16px));
		top: var(--footer-mark-top-sp, var(--footer-mark-top, 20px));
		width: var(--footer-mark-size-sp, var(--footer-mark-size, 18px));
	}
}

@media (max-width: 600px) {
	.footer-inner {
		flex-direction: row;
		align-items: center;
		gap: 14px;
  }
}
/* =========================
   Image Hero - Common
   Real image hero used by category/article pages.
========================= */
.image-hero {
	--image-hero-text-color: #fff;
	--image-hero-text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
	position: fixed;
	top: 0;
	left: 50%;
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	transform: translateX(-50%);
	background: #fff;
	color: var(--image-hero-text-color);
	z-index: 1;
}
.image-hero--dark-text {
	--image-hero-text-color: #000;
	--image-hero-text-shadow: none;
}
.image-hero__image {
	width: 100%;
	height: auto;
	display: block;
}
.image-hero .caption.right {
	position: absolute;
	right: 20px;
	bottom: 8px;
	z-index: 2;
	margin-top: 0;
	padding-right: 0;
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}
.image-hero__title,
.image-hero__text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.image-hero__title {
	top: 200px;
	font-size: 28px;
	font-weight: 600;
	white-space: nowrap;
	text-shadow: var(--image-hero-text-shadow);
}
.image-hero__text {
	top: 250px;
	max-width: 550px;
	font-size: 20px;
	font-family: "Noto Serif JP", serif;
	text-align: left;
	text-shadow: var(--image-hero-text-shadow);
}
.hero-spacer {
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	margin-left: auto;
	margin-right: auto;
	visibility: hidden;
	pointer-events: none;
}
.hero-spacer img {
	width: 100%;
	height: auto;
	display: block;
}
.has-hero-spacer .main {
	margin-top: 0;
}
.has-hero-spacer #site-footer {
	position: relative;
	z-index: 10;
}
@media screen and (max-width: 768px) {
	.image-hero__title {
		top: 85px;
		font-size: 20px;
	}
	.image-hero__text {
		top: 110px;
		width: min(560px, calc(100% - 40px));
		max-width: 100%;
		font-size: 16px;
		line-height: 1.45;
		text-align: center;
	}
}

/* =========================
   Index-style Page Shell
   Used by top/category index layouts below the hero.
========================= */
.index-page .main {
	padding: 12px 0 0;
	background: rgba(255, 255, 255, 1);
	margin-bottom: 0;
}
.index-page .card-gallery {
	margin-top: 0;
	margin-bottom: 24px;
}
.index-page #site-footer {
	margin-top: 0;
}
.index-page .site-footer {
	padding: 12px 20px 40px 20px;
}

/* =========================
   Home Page Header
   Top index only. Requires body.home-page.
========================= */
.home-page .header {
	background: transparent;
}
.home-page .header-inner {
	padding-left: 10px;
	padding-right: 10px;
}
.home-page .pc-nav {
	display: none;
}
.home-page .menubtn span {
	background: #fff;
}
.home-page .menubtn:hover span,
.home-page .menubtn:focus-visible span {
	background: #d8d2c8;
}
.home-page .lang-item,
.home-page .lang-item.active,
.home-page .lang-divider {
	color: #fff;
}
.home-page .lang-switch a.lang-item:hover {
	color: #d8d2c8;
}
.home-page.menu-open::before {
	inset: 0;
}

/* =========================
   Index Hero Intro
   Top index only. Requires .image-hero.index-hero.
========================= */
.index-hero .image-hero__title {
	display: none;
}
.index-hero {
	--index-hero-area-width: 600px;
	--index-hero-area-top: 70px;
	--index-hero-gap: 28px;
	--index-hero-font-family:  "Noto Serif JP", serif;
	--index-hero-text-size: 22px;
	--index-hero-my-color: #ffffff;
	--index-hero-my-size: 36px;
	--index-hero-indent: 56px;
	--index-hero-logo-size: 50px;
	--index-hero-logo-offset-x:-60px;
	--index-hero-logo-offset-y:10px;
}
.index-hero .intro-area {
	position: absolute;
	top: var(--index-hero-area-top);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: flex-start;
	gap: var(--index-hero-gap);
	width: min(var(--index-hero-area-width), calc(100% - 96px));
	max-width: none;
	font-family: var(--index-hero-font-family);
	font-size: var(--index-hero-text-size);
	line-height: 1.6;
	text-align: left;
	letter-spacing: 0;
	box-sizing: border-box;
	padding: 0;
	z-index: 2;
}
.index-hero__copy {
	flex: 1 1 auto;
	min-width: 0;
}
.index-hero__portrait {
	flex: 0 0 auto;
	width: var(--index-hero-logo-size);
	height: auto;
	transform: translate(var(--index-hero-logo-offset-x), var(--index-hero-logo-offset-y));
}
.index-hero__my {
	color: var(--index-hero-my-color);
	font-size: var(--index-hero-my-size);
	font-weight: 500;
	line-height: 1;
	margin-bottom: 8px;
}
.index-hero__intro a {
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}
.index-hero__intro a:hover,
.index-hero__intro a:focus-visible {
	color: #d8d2c8;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.index-hero__lines,
.index-hero__tail {
	padding-left: var(--index-hero-indent);
}
.index-hero__tail {
	margin-top: 4px;
}
@media screen and (max-width: 768px) {
	.index-hero {
		--index-hero-area-width: 100%;
		--index-hero-area-top: 60px;
		--index-hero-gap: 18px;
		--index-hero-text-size: 16px;
		--index-hero-my-size: 27px;
		--index-hero-indent: 30px;
		--index-hero-logo-size: 40px;
	}
	.index-hero .intro-area {
		left: 50%;
		width: calc(100% - 48px);
		line-height: 1.42;
	}
	.index-hero__my {
		margin-bottom: 6px;
	}
}
@media screen and (max-width: 420px) {
	.index-hero {
		--index-hero-text-size: 12px;
		--index-hero-my-size: 24px;
		--index-hero-indent: 26px;
		--index-hero-logo-size: 72px;
		--index-hero-gap: 10px;
	}
	.index-hero .intro-area {
		width: calc(100% - 36px);
	}
}


/* =========================
   Main Warp Button
========================= */
.main .warp-area {
	display: block;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
	text-align: center;
	max-width: 150px;
	padding: 3px 12px;
	font-size: 16px;
	color: #2e2e2e !important;
	border: 1px solid #c0c0c0;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.main .warp-area a {
	color: #2e2e2e !important;
}
.main .warp-area:hover {
	background: #ffffff;
	color: #fff;
	transform: translateY(-1px); 
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* =========================
   Page Top Button
========================= */
.page-top-button {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 90;
  width: var(--page-top-size, 46px);
  height: var(--page-top-size, 46px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease, right 0.2s ease, bottom 0.2s ease;
}
.page-top-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.page-top-button img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .page-top-button {
    --page-top-size: 40px;
    right: 16px;
    bottom: 18px;
  }
}
/* English resilience pages */
html[lang="en"] .thread-item .ul-header {
	position: relative;
	flex-basis: 260px;
	padding-left: 2.2em;
	text-indent: 0;
}
html[lang="en"] .thread-item .ul-header::before {
	position: absolute;
	left: 0;
	width: 1.8em;
	text-align: right;
}
html[lang="en"] .thread-item .ul-text {
	font-family: inherit;
	text-align: left;
}
.resilience-page .translate-panel {
	margin-top: 28px;
}
.has-hero-spacer .translate-panel {
	margin-top: 18px;
}
/* =========================
   Home Updates
========================= */
.home-update-panel {
	position: relative;
	z-index: 10;
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	margin: 0 auto;
	padding: 24px 0 0;
	background: #fff;
	box-sizing: border-box;
}
.home-update-inner {
	width: min(calc(100% - var(--site-gutter) * 2), 800px);
	margin: 0 auto;
	padding: 0 16px 18px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}
.home-update-heading {
	font-size: 17px;
	font-weight: 500;
	opacity: 0.92;
	letter-spacing: 0;
	margin-bottom: 8px;
}
.home-update-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.home-update-item {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 14px;
	padding: 4px 0;
	font-family: "Noto Serif JP", serif;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}
.home-update-date {
	font: inherit;
	opacity: 0.92;
	white-space: nowrap;
}
.home-update-text {
	min-width: 0;
}
.home-update-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.home-update-text a:hover {
	color: #2f4f4f;
}
@media screen and (max-width: 600px) {
	.home-update-panel {
		padding-top: 18px;
	}
	.home-update-inner {
		width: 100%;
		padding: 0 var(--site-gutter) 16px;
	}
	.home-update-item {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 6px 0;
		font-size: 14px;
	}
}
/* =========================
   Home Thread Layout
========================= */
.home-thread-list {
	list-style: none;
	padding: 0;
	margin: 0 auto 28px;
	width: min(calc(100% - var(--site-gutter) * 2), 800px);
	max-width: 800px;
}
.home-thread-item {
	width: 100%;
	position: relative;
	display: flex;
	padding: 0 16px;
	transition: all 0.3s ease;
	background-color: transparent;
	box-sizing: border-box;
}
.home-thread-item:hover {
	background-color: #ffffff;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	transform: translateY(-2px);
	z-index: 10;
}
.home-thread-item a {
	display: grid;
	grid-template-columns: 128px 150px minmax(0, 1fr);
	align-items: center;
	gap: 16px 22px;
	width: 100%;
	padding: 10px 0;
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
}
.home-thread-image {
	width: 128px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #eee;
}
.home-thread-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease, opacity 0.35s ease;
}
.home-thread-item:hover .home-thread-image img {
	transform: scale(1.035);
	opacity: 0.92;
}
.home-thread-title {
	font-size: 17px;
	font-weight: 500;
	opacity: 0.92;
	letter-spacing: 0;
}
.home-thread-text {
	min-width: 0;
	font-family: "Noto Serif JP", serif;
	font-size: 16px;
	line-height: 1.6;
	text-align: justify;
	opacity: 0.8;
}
.home-thread-item:hover .home-thread-text {
	opacity: 1;
}
@media screen and (max-width: 600px) {
	.home-thread-list {
		width: 100%;
		max-width: none;
	}
	.home-thread-item {
		padding: 0;
	}
	.home-thread-item a {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 12px 0;
	}
	.home-thread-image {
		width: 100%;
		aspect-ratio: 21 / 8;
	}
	.home-thread-title,
	.home-thread-text {
		padding-left: var(--site-gutter);
		padding-right: var(--site-gutter);
		box-sizing: border-box;
	}
	.home-thread-title {
		font-size: 18px;
		font-weight: 600;
		line-height: 1.35;
		padding-top: 10px;
		padding-bottom: 2px;
	}
	.home-thread-text {
		font-size: 14px;
		line-height: 1.55;
		text-align: left;
	}
}
.home-thread-image--contain img {
	object-fit: cover;
	object-position: center bottom;
	background: #eee;
}


/* =========================
   Home Second Background
========================= */
.home-page--second-bg.index-page .main {
	position: relative;
	z-index: 10;
	background: #fff;
	padding: 0;
}
.home-thread-panel {
	position: relative;
	z-index: 10;
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	margin: 0 auto;
	padding: 24px 0 28px;
	background: #fff;
	box-sizing: border-box;
	border: 0;
	box-shadow: none;
}
.home-page--second-bg .home-thread-list {
	position: relative;
	z-index: 2;
	margin-bottom: 0;
}
.home-page--second-bg .home-thread-item {
	background: #fff;
}
.home-page--second-bg .home-thread-item + .home-thread-item {
	margin-top: 0;
}
.home-page--second-bg .home-thread-item:hover {
	background: #fff;
}
.home-second-hero-reveal {
	position: relative;
	z-index: 1;
	width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
	aspect-ratio: 1920 / 800;
	margin: 0 auto;
	background-image: url("../images/hero-index-02.webp");
	background-attachment: fixed;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: min(calc(100% - var(--site-gutter) * 2), var(--site-max)) auto;
}
.home-second-hero-reveal img {
	display: none;
}
.home-page--second-bg #site-footer {
	position: relative;
	z-index: 10;
	padding-top: var(--home-footer-gap, 30px);
	background: #fff;
}
@media screen and (max-width: 600px) {
	.home-thread-panel {
		padding: 18px 0 22px;
	}
	.home-second-hero-reveal {
		display: none;
	}
}

/* =========================
   Galapagos Photo Gallery
========================= */
.galapagos-photo-page .image-hero__title {
    top: 150px;
}

.galapagos-photo-page .image-hero__text {
    --galapagos-hero-text-top: 200px;
    --galapagos-hero-text-size: 18px;
    --galapagos-hero-text-width: 600px;
    display: block;
    top: var(--galapagos-hero-text-top);
    max-width: var(--galapagos-hero-text-width);
    font-size: var(--galapagos-hero-text-size);
}

.galapagos-photo-page .hero-spacer {
    margin-bottom: 0;
}

.galapagos-photo-page .main {
    background: #fff;
    padding-bottom: 48px;
}

.galapagos-photo-page #site-footer {
    --galapagos-footer-cover-height: 250px;
    position: relative;
    z-index: 10;
    background: #fff;
}

.galapagos-photo-page #site-footer::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: calc(100% + 6px);
    height: var(--galapagos-footer-cover-height);
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}

.galapagos-photo-page .species-list {
    width: min(calc(100% - var(--site-gutter) * 2), 800px);
    margin: 70px auto 48px;
    color: #333;
}

.galapagos-photo-page .species-list h2 {
    margin: 32px 0 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
}

.galapagos-photo-page .species-list p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.7;
    color: #666;
}

.galapagos-photo-page .species-list table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 34px;
    font-size: 14px;
    line-height: 1.55;
}

.galapagos-photo-page .species-list th,
.galapagos-photo-page .species-list td {
    padding: 8px 10px;
    border-bottom: 1px solid #e2e2e2;
    text-align: left;
    vertical-align: top;
}

.galapagos-photo-page .species-list th {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    color: #555;
    background: #f7f7f7;
}

.galapagos-photo-page .species-list td:first-child,
.galapagos-photo-page .species-list th:first-child {
    width: 46%;
}
.galapagos-photo-page .species-link {
    display: inline-block;
    padding: 3px 8px 4px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: #fff;
    color: #333;
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.galapagos-photo-page .species-link:hover,
.galapagos-photo-page .species-link:focus-visible {
    color: #1f3440;
    border-color: #e8e8e8;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.galapagos-photo-page .species-link:focus-visible {
    outline: 1px solid rgba(47, 72, 88, 0.28);
    outline-offset: 3px;
}

.galapagos-photo-page .species-link.is-disabled {
    border-color: transparent;
    background: transparent;
    color: inherit;
    box-shadow: none;
    cursor: default;
    transform: none;
}

@media screen and (max-width: 640px) {
    .galapagos-photo-page .image-hero__title {
        top: 94px;
        font-size: 24px;
    }

    .galapagos-photo-page .image-hero__text {
        --galapagos-hero-text-top: 122px;
        --galapagos-hero-text-size: 18px;
        --galapagos-hero-text-width: min(520px, calc(100% - 48px));
        line-height: 1.42;
    }
.galapagos-photo-page .species-list {
        margin-top: 48px;
    }

    .galapagos-photo-page .species-list h2 {
        font-size: 18px;
    }

    .galapagos-photo-page .species-list table {
        font-size: 13px;
    }

    .galapagos-photo-page .species-list th,
    .galapagos-photo-page .species-list td {
        padding: 7px 6px;
    }
}
/* =========================
   Photo Collection Common
   Shared gallery pattern for grouped photo pages.
========================= */
.photo-collection-page .section-divider-text {
    width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
    max-width: var(--site-max);
    margin: 10px auto;
}

.photo-collection-copy {
    position: relative;
    cursor: pointer;
    transition: max-height 0.35s ease;
}

.photo-collection-copy.is-collapsed {
    max-height: calc(1.75em * 3 + 18px);
    overflow: hidden;
}

.photo-collection-copy.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.4em;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 82%);
}

.photo-collection-copy.is-expanded {
    max-height: 1600px;
}

.photo-collection-gallery {
    --photo-grid-columns: 2;
    --photo-grid-gap: 0;

    width: min(calc(100% - var(--site-gutter) * 2), var(--site-max));
    max-width: var(--site-max);
    margin: 20px auto 70px;
}

.photo-collection-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: #111;
    cursor: url('../images/btn-plus.png') 10 10, pointer;
}

.photo-collection-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.photo-collection-thumb-caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px;
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    opacity: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.66), rgba(0,0,0,0.18) 54%, rgba(0,0,0,0));
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.photo-collection-thumb:hover img,
.photo-collection-thumb:focus-visible img {
    transform: scale(1.035);
    opacity: 0.86;
}

.photo-collection-thumb:hover .photo-collection-thumb-caption,
.photo-collection-thumb:focus-visible .photo-collection-thumb-caption {
    opacity: 1;
}

.photo-collection-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 12000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.96);
    color: #fff;
}

.photo-collection-modal.is-open {
    display: flex;
}

.photo-collection-modal__figure {
    width: min(96vw, 1700px);
    height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(42px, auto) minmax(0, 1fr) minmax(40px, auto);
    align-items: center;
    justify-items: center;
    padding: 12px 72px 14px;
    box-sizing: border-box;
}

.photo-collection-modal__image {
    max-width: 100%;
    max-height: calc(100vh - 106px);
    width: auto;
    height: auto;
    object-fit: contain;
}

.photo-collection-modal__caption {
    width: 100%;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
    line-height: 1.45;
    font-family: Arial, Helvetica, sans-serif;
}

.photo-collection-modal__caption--top {
    align-self: end;
    padding-bottom: 8px;
    font-size: 18px;
}

.photo-collection-modal__caption--bottom {
    align-self: start;
    padding-top: 8px;
    font-size: 16px;
}

.photo-collection-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 88px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 56px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.photo-collection-modal__nav:hover,
.photo-collection-modal__nav:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.photo-collection-modal__nav--prev {
    left: 12px;
}

.photo-collection-modal__nav--next {
    right: 12px;
}

@media screen and (min-width: 641px) {
    .photo-collection-gallery {
        --photo-grid-columns: 3;
    }
}

@media screen and (min-width: 1025px) {
    .photo-collection-gallery {
        --photo-grid-columns: 4;
    }
}

@media screen and (max-width: 640px) {
    .photo-collection-gallery {
        margin: 16px auto 48px;
    }

    .photo-collection-thumb-caption {
        padding: 8px;
        font-size: 12px;
    }

    .photo-collection-modal__figure {
        width: 100vw;
        padding: 10px 48px 12px;
    }

    .photo-collection-modal__caption--top {
        font-size: 16px;
    }

    .photo-collection-modal__caption--bottom {
        font-size: 14px;
    }

    .photo-collection-modal__nav {
        width: 40px;
        height: 72px;
        font-size: 42px;
    }

    .photo-collection-modal__nav--prev {
        left: 4px;
    }

    .photo-collection-modal__nav--next {
        right: 4px;
    }
}