@charset "UTF-8";
/* google font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;800;900&display=swap');/*font-family: 'Noto Sans JP', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400;600&display=swap');/*font-family: 'Noto Serif JP', serif;*/

html, body{height: 100%;width: 100%;font-size: 62.5%;background-color: #FFFFFF;}/*font size 62.5%=10px 1.0rem=10px*/

/****************************************
Smart phone BASE 767
*****************************************/
.sp_view{display: none;}
.br_hide_sp {display: block;}
.br_hide_pc {display: none;}
.br_sp{display:block}


/*--------------------------
COMMON
--------------------------*/

/*-----------------------
Base Settings
-------------------------*/
:root {
	--color-text: #3B2400;
	--color-base: #3B2400;
	--color-bg: #FFFFFF;
	--font-base: "Noto Sans JP", sans-serif;
	--font-bold: 800;
	--font-size: 2.0rem;
	--font-title: 2.0rem;
	--border-px:3px;
	--padding-base:40px 50px;
	--padding-per:5%;
}

@media screen and (max-width: 768px) {
    :root {
        /* PCの2.0remから小さくする（例：1.6rem = 16px） */
        --font-size: 1.5rem;
		--border-px:2px;
		--padding-base:40px 15px;
		--font-title: 1.7rem;
    }
}

* { box-sizing: border-box; }

body {
	font-family: var(--font-base);
	margin: 0;
	padding: 0;
	color: var(--color-text);
	font-size: var(--font-size);
	line-height:1.9;
	letter-spacing: 0.2rem;
	font-weight: 600;
}

/*fade-in START*/

body {
    animation: fadeIn 2s ease 0s 1 normal;
	background: var(--color-bg);
}

body.beige_mode * {
    color: #071521;
}

body.beige_mode {
  background-color: #DDD7C5;
}


@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*fade-in END*/

#wrapper {
   
}

#container {
	width:1200px;
	margin:0 auto;
	padding:0 30px 70px 30px ;
	}

#contents {
	}

p {
/*	font-family: "Sawarabi Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	line-height: 2.5em;
	text-align:justify;
	color: #FFFFFF;*/
}
/* 見出し：clamp()を使って画面幅に応じて無段階に伸縮させる */
h1 {
  /* スマホで2.4rem(24px) 〜 PCで4.0rem(40px) まで滑らかに変化 */
  font-size: clamp(2.4rem, 4vw + 1rem, 4.0rem);
  font-weight: 700;
  line-height: 1.4;
}

h2 {
  /* スマホで2.0rem 〜 PCで3.2rem */
  font-size: clamp(2.0rem, 3vw + 1rem, 3.2rem);
  font-weight: 700;
}

h3 {
  font-size: 1.8rem;
  font-weight: 700;
}

.ttl_pc {
	width: 1200px;
	text-align: center;
	padding: 0 0 40px 0;
	margin: 0 auto;
	font-family: Raleway , san-serif;
	font-weight: 100;
	font-size: 1.7rem;
	letter-spacing: 0.25em;
	color: #43679e;
}

.ttl_pc img {
width: 82%;
}

.readmore {
	width: 250px;
	font-family: "Almarai", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #FFFFFF;
	border-bottom: #FFFFFF 3px solid;
}

img.svg_black {
  filter: brightness(0) saturate(100%);
}
/*-----------------------
Header
-------------------------*/
.header_top_bar {
    padding: 0;
    display: flex;
    justify-content: space-between; /* ロゴを左、ツールを右へ */
    align-items: stretch;           /* 高さを揃えて縦線を伸ばす */
    border-bottom: 3px solid var(--color-base); /* 下の線 */
    background-color: #fff;
}

/* 左エリア（ロゴ） */
.header_logo_area {
    width: 70px; /* 幅は適宜調整してください */
    display: flex;
    align-items: center;
    justify-content: center;
	margin: 13px 20px;
}
.header_logo_area img {
    width: 100%; 
    height: auto;
}

/* 右エリア（ツール群コンテナ） */
.tool_container {
    display: flex;
    gap: 0; /* 隙間はpaddingとborderで管理するため0にする */
}

/* 各ツールグループ */
.tool_group {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size);
    font-weight: var(--font-bold);
    padding: 0 50px; 
    border-left: 3px solid  var(--color-base); /* ★左側の縦線 */
}

/* ボタンのデザイン */
.btn_pill {
    padding: 6px 24px;
    border: 1px solid #333;
    border-radius: 50px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.btn_pill.inverse {
    background: var(--color-bg);
    color: var(--color-base);
}

/* タイトルエリア */
.header_title_area {
    text-align: center;
    border-bottom: var(--border-px) solid  var(--color-base);
    padding: 40px 60px;
    margin: 0;
}

.header_title_area h1 {
    padding: 0;
    margin: 0;
}
/* スマホ対応 */
@media screen and (max-width:768px){
	body{min-width:100%;}
	.sp_view{display: block;}
	.pc_view{display: none;}
	.br_hide_pc {display: block;}
	.br_hide_sp {display: none;}/*<br class="br_hide_sp">*/
}

@media screen and (max-width: 768px) {
	
	.header_title_area {
		padding: 40px 15px ;
	}
	
	.header_title_area img {
		display: block;/* 画像の下にできる謎の隙間を消す */
	}
}


/*-----------------------
Nav PC
-------------------------*/
.nav_grid {
	display: grid;
	/* 左：最低380pxは確保、それ以上は1:3の比率 */
	grid-template-columns: minmax(380px, 1fr) 3fr;
	border-bottom: var(--border-px) solid var(--color-base);
	font-size: var(--font-size);
}
.nav_header {
	padding: 15px 30px;
	font-weight: var(--font-bold);
	font-size: var(--font-title);
	border-right: var(--border-px) solid var(--color-base);
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav_list {
	display: flex;
	flex-wrap: wrap;
	padding: 40px 50px;
	gap: 20px 40px;
	flex-shrink: 0;
	
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
	.nav_grid {
	display: grid;
	/* 左：最低380pxは確保、それ以上は1:3の比率 */
	grid-template-columns: minmax(0, 1fr) 3fr;
}
	.nav_header {
		grid-column: 1/-1;
		border-right: 0px solid var(--color-base);
		border-bottom: var(--border-px) solid var(--color-base);
		padding: 10px 30px;
	}
    .nav_list {
		grid-column: 1/-1;
		border-right: 0px solid var(--color-base);
		padding: var(--padding-base);
		gap: 20px;
		flex-direction: column;
		
    }

}

/* -------------------------------------------
   リンク全体の設定
------------------------------------------- */
.access_link {
	width: 100%;				/* 追加: 親要素（グリッド）の幅を超えないようにする */
	display: flex;             /* 横並びにする */
	align-items: center;       /* 上下中央揃え */
	justify-content: flex-start; /* 左揃え（必要に応じて center に変更） */
	gap: 1.5rem;               /* テキストとアイコンの間隔 (15px相当) */
	text-decoration: none;     /* 下線を消す */
	color: var(--color-base);            /* 文字色（画像の茶色に近い色） */
}

/* -------------------------------------------
   テキストの設定（レスポンシブ対応）
------------------------------------------- */
.access_text {
	font-size: var(--font-size);
	line-height: 1.4;
	flex-shrink: 0;
	/* 1. テキストを強制的に折り返す設定 */
	overflow-wrap: break-word; 
	word-break: break-all;      /* 長い単語でも強制改行 */

	/* 2. フレックスアイテムとしての挙動を制御 */
	/*flex: 1; */                   /* 可能な限りの幅を使い、残りをアイコンに譲る */

    flex: 0 1 auto;
    min-width: 0;   /* これを追加すると、狭い場所でも確実に折り返します */

	/* 3. フォントなどの基本設定 */
	font-size: var(--font-size);
}

/* -------------------------------------------
   中のSVG矢印の設定
------------------------------------------- */
.icon_oval svg {
	width: 12px;  /* 矢印の幅 */
	height: auto;
	display: block;
	
}

.icon_oval {
	flex-shrink: 0;
	line-height: 1.4;
	align-self: flex-start; /* 上書きする */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
	.access_link {
		gap: 1.0rem; /* スマホでは間隔を少し狭める */
		width: 100%; /* 追加: 親要素（グリッド）の幅を超えないようにする */
	}

	.icon_oval {
		/* スマホでアイコンを少し小さくしたい場合 */
		width: 25px;
		height: auto;
	}

	.icon_oval svg {
		width: 10px;
	}
}

/*-----------------------
Main Content Hero Image
-------------------------*/
.hero_image_01, .hero_image_02, .hero_image_03 {
	width: 100%;
	height: 350px;
	background-size: cover;
	background-position: center;
}

.hero_image_01 {
	background-image: url("../img/hero_image_01.jpg");
	border-bottom: var(--border-px) solid var(--color-base);
}

.hero_image_02 {
	background-image: url("../img/hero_image_02.jpg");
}

.hero_image_03 {
	background-image: url("../img/hero_image_03.jpg");
}

.museum_eng_name {
	width: 100%;
	text-align: center;
	padding: 40px 0 ;
	line-height: 1;
}

.museum_eng_name img {
	width: 50%;
	max-width: 700px;
	min-width: 500px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
	.hero_image_01, .hero_image_02, .hero_image_03 {
		width: 100%;
		height: 30vw;
		background-size: cover;
		background-position: center;
	}
	.museum_eng_name {
		width: 100%;
		text-align: center;
		padding: 30px 0 ;
		line-height: 1;
	}
	.museum_eng_name img {
		width: 80%;       /* スマホで見せたい幅（例: 80% や 100%） */
		max-width: 100%;  /* 「700px」を無効化し、画面幅を超えないようにする */
		min-width: unset; /* 「500px」を無効化（または 0 でもOK） */
 	}
}


/*-----------------------
Main Content
-------------------------*/

.layout_container {
    display: grid;
    /* 左幅固定・右可変のレイアウト */
    grid-template-columns: minmax(380px, 1fr) 3fr;
}

/* セクションバー（茶色い帯） */
.section_bar {
    grid-column: 1 / -1;
    background-color: var(--color-base);
    color: var(--color-bg);
    text-align: center;
    padding: 15px 0;
    font-weight: 700;
    font-size:var(--font-title);
}

/* 左側の見出しセル */
.row_header {
    color: var(--color-base); /* 茶色文字 */
    display: flex;
    align-items: center;
    justify-content: center; /* 上下左右中央 */
    text-align: center; /* 改行した時用 */
    padding: 40px 20px;
    border-right: var(--border-px) solid var(--color-base); /* 右の縦線を少し太く茶色に */
    border-bottom: var(--border-px) solid var(--color-base); /* 下の線も茶色に統一 */
	font-weight: var(--font-bold);
	font-size: var(--font-title);
	line-height: 3.2rem;
}

/* 右側の内容セル */
.content_cell {
    background-color: #fff;
    border-bottom: var(--border-px) solid var(--color-base); /* 下の線を茶色に統一 */
    padding:0; /* 余白をセル自体につける */
}

/* -------------------------------------------
   中身のレイアウト用クラス
------------------------------------------- */

/* 画像とテキストを左右に分ける（補助犬・受付など） */
.content_block {
    display: flex;
    justify-content: space-between; /* 両端揃え */
    align-items: stretch; /* 上下中央 */
    gap: 30px;
	padding:50px 70px;
}

/* 縦にコンテンツを積む（アクセスなど） */
.content_block_vertical {
    display: flex;
    flex-direction: column;
}

.text_area_vertical {
    display: flex;
    flex-direction: column;
    gap: 25px;
	padding:50px 70px;
}

.text_area {
	display: flex;
    flex-direction: column;
    gap: 25px;
	align-self: center;/* 上書きする */
}

.border_btm {
	border-bottom: var(--border-px) solid var(--color-base);
}

/* グレーの小見出し */
.gray_title {
    background-color: #eee;
    padding: 0 10px;
    margin: 0;
}

/* 注釈テキスト */
.note {
    font-size: 0.8em;
    margin-left: 0.5em;
}

/* ボタン周り */
.btn_group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start; /* 左寄せ */
	
}

.btn_link {
    display: inline-flex;    /* blockの代わりにflexを使う */
    align-items: center;     /* これで強制的に「縦ど真ん中」に揃います */
    justify-content: center; /* 横方向も真ん中寄せ */
    gap: 15px;               /* 文字とアイコンの間隔 */
    padding: 12px 30px;
    border: 1px solid var(--color-base);
    border-radius: 50px;
    background: var(--color-bg);
    color: var(--color-base);
    text-decoration: none;    
    transition: all 0.3s;
    /* ▼▼▼ 不要になる（または邪魔になる）ので削除か無効化 ▼▼▼ */
    /* text-align: center; → flexがやるので不要 */
    /* line-height: 1.9;   → flex配置と喧嘩するので削除、または 1.2〜1.4程度に */
    line-height: 1.4;
}

.btn_link:hover {
    background: var(--color-base);
    color: var(--color-bg);
	opacity: 1;
}

.btn_link:hover img {
    filter: brightness(0) invert(1);
}


/* -------------------------------------------
   中のSVG矢印の設定
------------------------------------------- */
.btn_arrow img {
	width: 15px;  /* 矢印の幅 */
	height: auto;
	display: block;
}

.btn_arrow {
	flex-shrink: 0;
	line-height: 1.4;
	align-self: center; /* 上書きする */
	transform: translate(5px, 0px); /* 【微調整】もし少し上に感じる場合は、数値(px)を増やして下げてください */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {


}

/* 右側のアイコン画像 */
.icon_box {
	height: 110px; /* アイコンサイズ */
	flex-shrink: 0;
	padding: 5px;
}

.icon_box img {
    height: 100%;
}

.support_box {
	width: 275px; /* 画像サイズ */
	display: flex;          /* 画像を縦並びのリストとして扱う */
	flex-direction: column; /* 縦方向に並べる */
	flex-shrink: 0;
	padding: 5px;
	gap: 20px;
	align-self: flex-start; /* 上書きする */
}

.support_box img {
	width: 100%;
}

/* スマホ対応 */
@media screen and (max-width: 900px) {
    .layout_container {
        grid-template-columns: 1fr; /* 1列にする */
    }

    .row_header {
        border-right: none;
        border-right: 0px solid var(--color-base);
		border-bottom: var(--border-px) solid var(--color-base);
		font-size: var(--font-title);
		padding: 10px 30px;
		line-height: 2.5rem;
    }

    .content_block {
        flex-direction: column; /* 縦並びにする */
        align-items: flex-start;
		padding: 40px 15px;
    }
	
	.text_area_vertical {
		display: flex;
		flex-direction: column;
		gap: 25px;
		padding: 40px 15px;
	}

	.text_area {
		display: flex;
		flex-direction: column;
		gap: 25px;
		align-self: center;/* 上書きする */
	}
    
    .btn_link {
        width: 100%; /* スマホではボタンを幅一杯に */
        min-width: unset;
    }
	
	.btn_arrow {
		/* スマホでアイコンを少し小さくしたい場合 */
		width: 15px;
		height: auto;
		transform: translate(0px, 0px);
	}

	.btn_arrow img {
		width: 100%;
	}
	
	.icon_box {
		width: 35%;/* アイコンサイズ */
		height: auto;
		flex-shrink: 0;
		padding: 5px;
		margin: 0 auto;
	}

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

	.support_box {
		width: 100%; /* 画像サイズ */
		display: flex;          /* 画像を縦並びのリストとして扱う */
		flex-direction: column; /* 縦方向に並べる */
		flex-shrink: 0;
		padding: 5px;
		gap: 20px;
		align-self: flex-start; /* 上書きする */
		order: -1;
	}

	.support_box img {
		width: 100%;
	}
}



/*--------------------------
Footer
--------------------------*/
#footer_container {
    width: 100%;
    padding: 60px 55px 30px 55px ;
}

/* コンテンツ幅をサイト全体(1200px)に合わせる */
.footer_inner {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    align-items: flex-end;          /* 下揃え（アイコンを右下に） */
}

/* --- 左側：テキスト情報 --- */
.footer_info {
    font-weight: var(--font-bold);
    color: var(--color-base);
    line-height: 1.9;
    font-family: var(--font-base);
}

.footer_info .note_small {
    font-size: 1.6rem; /* 入館時間の注釈を小さく */
}

.footer_info .copyright {
    font-size: 1.0rem; /* コピーライトを小さく */
    margin-top: 3px;
    font-weight: 400;
}

/* --- 右側：SNSアイコン --- */
.footer_sns_links {
    display: flex;
    gap: 15px; /* アイコン同士の間隔 */
}

.footer_sns_links a {
    display: block;
    width: 45px;  /* アイコンのサイズ */
    height: 45px;
    transition: opacity 0.3s;
}

.footer_sns_links a:hover {
    opacity: 0.7;
}

.footer_sns_links img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    /* 画像自体が茶色でない場合、ここで背景色をつけることも可能 */
    /* background-color: var(--color-base); */
}

/* (オプション) レスポンシブ対応：スマホで縦並びにする場合 */
@media screen and (max-width: 900px) {
	#footer_container {
		width: 100%;
		/* 茶色の太線に変更 */
		padding: 60px 25px ;
	}
    .footer_inner {
        width: 100%;
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 40px;
    }
    
    .footer_sns_links {
        align-self: flex-start; /* 左寄せに変更 */
    }
}


/* =========================================
   色反転（ダークモード）設定
   ========================================= */

/* 通常時の変数定義（既存の記述の再確認・参考用）
:root {
    --color-text: #3B2400;
    --color-base: #3B2400;
    --color-bg: #FFFFFF;
}
*/

/* ★反転モード時の変数上書き */
body.inverse_mode {
    --color-text: #E8F0F5;    /* 文字色を白に */
    --color-base: #E8F0F5;    /* 線の色などを白に */
    --color-bg: #39312A;      /* 背景色を濃い茶色に */
}

/* 変数だけでは対応しきれない箇所の個別調整 */
body.inverse_mode,
body.inverse_mode .header_top_bar,/* ヘッダー背景を茶色にする */
body.inverse_mode .header_title_area,
body.inverse_mode .museum_eng_name,
body.inverse_mode #footer_container{
    background-color: var(--color-bg);
    border-color: var(--color-text);
}

/* 画像（ロゴやアイコン）の色を白くするフィルター
   ※黒や茶色の画像を、強制的に「白」に反転させます */
body.inverse_mode img,
body.inverse_mode .icon_oval svg
body.inverse_mode .btn_arrow svg {
    filter: brightness(0) invert(83%) sepia(23%) saturate(67%) hue-rotate(160deg) brightness(127%) contrast(72%);
}

/* 色反転モードでホバーした時、矢印の白化フィルタを解除する（元の色に戻す） */
body.inverse_mode .btn_link:hover img {
    filter: none;
}

/* 写真（展示物など）は色反転させない（フィルターを解除） */
body.inverse_mode .hero_image_01, 
body.inverse_mode .hero_image_02, 
body.inverse_mode .hero_image_03,
body.inverse_mode .support_box img, /* その他写真が含まれるクラスがあれば追加 */
body.inverse_mode .hojyoken img{
    filter: none;
}

/* ボタンのスタイル反転 */
body.inverse_mode .btn_pill {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-text);
}

body.inverse_mode .btn_pill.inverse {
    background-color: var(--color-text); /* 反転ボタン自体は白背景黒文字で見やすく */
    color: var(--color-bg);
}

/* グレー背景の小見出し調整 */
body.inverse_mode .gray_title {
    background-color: #594a3a; /* 少し明るい茶色に */
    color: var(--color-text);
}

body.inverse_mode .row_header {
    background-color: var(--color-bg); /* 背景を茶色に */
    color: var(--color-text);
}

body.inverse_mode .content_cell {
    background-color: var(--color-bg);
}






/* =========================================
   文字サイズ拡大機能
   ========================================= */
body.large_mode {
    --font-size: 3.0rem; /* 通常2.0rem + 1.0rem */
}

/* 拡大時、ボタンの「拡大」の方を反転色（アクティブ状態）にする */
body.large_mode .btn_pill.js-font-large {
    background: #333;
    color: #fff;
}

/* 拡大時、ボタンの「標準」の方は白に戻す */
body.large_mode .btn_pill.js-font-std {
    background: #fff;
    color: #3B2400;
}

/* 色反転モードと拡大モードが重なった時のボタンの色の調整 */
body.inverse_mode.large_mode .btn_pill.js-font-large {
    background: #fff;
    color: #3B2400;
    border-color: #fff;
}
body.inverse_mode.large_mode .btn_pill.js-font-std {
    background: #3B2400;
    color: #fff;
}