@charset "utf-8";


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*lightbox.cssの読み込み
---------------------------------------------------------------------------*/

@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);

/* M PLUS Rounded 1c の読み込み */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100..900&display=swap");


/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}



/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	height: 100%;
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 14px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/

body {
	font-family: "M PLUS Rounded 1c", "M PLUS 1", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;/*フォント種類*/
	font-weight: 300;
	font-optical-sizing: auto;
	letter-spacing: 0.1rem;
	text-indent: 0.1rem;
	-webkit-text-size-adjust: none;
	margin: 0;padding: 0;
	line-height: 1.2;		/*行間*/
	background: #ffffff;		/*背景色*/
	color: #fff;			/*文字色*/
}

/*見出し調整*/
h4 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/*段落追加*/
p.space {
  margin-bottom: 3em;
}

/*段落追加 小*/
p.space-1 {
  margin-bottom: 0.5em;
}

/*段落追加　中*/
p.space-2 {
  margin-bottom: 1em;
}

/*dotted　ライン*/
.line-dotted {
  border-bottom: 2px dotted #ff9bb3;
  padding-bottom: 0px;
}


/*dotted　ライン＋文字太い*/
.line-dotted2 {
  text-decoration: none;
  border-bottom: 2px dotted #ff9bb3;
  color: #333;
  font-weight: 700; /* ← これを追加！ */
}

/*　蛍光ライン*/
.line-2 {
  text-decoration: none;
  background: linear-gradient(transparent 60%, #f8458473 60%);
  display: inline-block;
  font-weight: 700; /* ← これを追加！ */
}

/*　リスト丸*/
.custom-dot {
  list-style: none;
  padding-left: 0;
}

.custom-dot li {
  position: relative;
  padding-left: 1.2em;
}

.custom-dot li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #ff7aa8; /* 好きな色 */
  border-radius: 50%;  /* 丸 */
  position: absolute;
  left: 0;
  top: 0.6em;
}

/*特定フォント*/
h4 {
  font-family: "M PLUS Rounded 1c", sans-serif;
}

h2 {
  font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", sans-serif;
  font-weight: 800; /* ← 太さはここで調整 */
  letter-spacing: 0.03em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}




.red-text {
  font-weight: 600; /* ← 太さはここで調整 */
  color: rgba(230, 53, 53, 0.874);
}

.red-text2 {
  font-weight: 400; /* ← 太さはここで調整 */
  color: rgba(230, 53, 53, 0.874);
}

.bold-link {
  font-weight: 700; /* リンク文字太くする */
}


/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li {margin: 0;padding: 0;}
nav ul {list-style: none;}
h1,h2,h3,h4 {font-weight: 700;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
strong {font-weight: 500;}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #444039;	/*文字色*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	text-decoration: none;
}


/*header（ロゴとメニューが入ったブロック）
---------------------------------------------------------------------------*/
header {
	width: 250px;		/*幅*/
	padding: 0 2vw;		/*ヘッダー内の余白。上下、左右への順番。*/
	margin-top: 0vw;	/*ヘッダーの上に空けるスペース*/
	text-align: center;	/*テキストをセンタリング*/
}

/*ロゴ*/
header #logo img {display: block;}
header #logo {
	padding: 0;margin: 0;
}

/*ロゴ下の小文字*/
header #logo span {
	display: block;
	font-size: 0.7rem;	/*文字サイズを70%に*/
	color: #333;		/*文字色*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	header {
		position: fixed;	/*スクロールしても動かないようにする設定*/
		left: 0px;
		top: 0px;
	}

	}/*追加指定ここまで*/

	/*画面の高さが500px以下の追加指定*/
	@media screen and (max-height:500px) {

	header {
		position: absolute;	/*メニューが切れて見えなくならないように、fixedを中止する*/
	}

	}/*追加指定ここまで*/


/*mainブロック（右側のsectionを囲むブロック）
---------------------------------------------------------------------------*/

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	main {
		margin-left: 250px;	/*headerのwidthに合わせる*/
	}

	}/*追加指定ここまで*/


/*main内のh2*/
main h2 {
	font-size: 2.5rem;	/*文字サイズを2.5倍*/
}

/*main内のh3*/
main h3 {
	font-size: 1.2rem;	/*文字サイズを1.2倍*/
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
#menubar {display: none;}
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}
#menubar_hdr.display-none {display: none;}

/* チェックボックスは非表示 */
.toggle {
  display: none;
}

/*メニューブロック初期設定
---------------------------------------------------------------------------*/
#menubar {display: none;}
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}
#menubar_hdr.display-none {display: none;}

/* チェックボックスは非表示 */
.toggle {
  display: none;
}

/*メニュー（親メニューのデザイン）
---------------------------------------------------------------------------*/
#menubar ul {
  margin: 3rem 0;
}

/* ▼ a と label を同じデザインに統一する（親メニュー） */
#menubar nav a,
#menubar nav .menu-label {
  text-decoration: none;
  display: block;
  background-color: rgba(255, 255, 255, 0); /* ← 半透明の白 */
  color: #333;
  padding: 0.5rem;
  margin: 0.5rem 0;   /* ← 親メニュー同士の間隔 */
  border-radius: 10px;
  cursor: pointer;
}

/* hover 色も統一 */
#menubar nav a:hover,
#menubar nav .menu-label:hover {
  color: #ff7d45;
}



/* サブメニュー（ここから下がサブメニュー専用）
---------------------------------------------------------------------------*/

/* サブメニュー初期状態：閉じる */
.sub-menu {
  display: none;
  list-style: none;
  padding: 0 0 0 15px;
  margin: 0; /* ← サブメニュー全体の隙間をなくす */
}



/* チェックが入ったら開く */
.toggle:checked + .menu-label + .sub-menu {
  display: block;
}

/* 開閉アイコン（▶） */
.menu-label::after {
  content: "";
}

/* 開いたときは回転 */
.toggle:checked + .menu-label::after {
  transform: rotate(90deg);
}

/* PC hover でも開く */
@media (min-width: 900px) {
  .has-sub:hover .sub-menu {
    display: block;
  }
}

/* ハンバーガーアイコン */
#menubar_hdr {
  position: fixed;
  top: 15px;
  right: 15px;
  width: 46px;
  height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* ← 中央に寄せる */
  align-items: center;
  gap: 7px; /* ← 3 本の間隔を固定 */
  background: #f8cc8b;
  cursor: pointer;
  z-index: 2000;
  border-radius: 4px;
  padding: 0; /* ← これが超重要！ */
}

/* バーの基本 */
#menubar_hdr span {
  display: block;
  height: 2px;
  width: 26px;
  background: #438f00;
  transition: 0.3s;
}

/* 開いたときのアニメーション */
#menubar_hdr.ham span:nth-of-type(1){
  transform: rotate(45deg) translate(6px, 6px);
}

#menubar_hdr.ham span:nth-of-type(2){
  opacity: 0;
}

#menubar_hdr.ham span:nth-of-type(3){
  transform: rotate(-45deg) translate(6px, -6px);
}

/* メニュー全体 */
nav {
  position: fixed;
  top: 70px;          /* ハンバーガーの下に配置 */
  right: 0;
  left: 0;
  background: #fff;
  display: none;      /* 初期状態は非表示 */
  flex-direction: column;
  text-align: center;
  z-index: 1500;
}

/* ハンバーガーを押したら表示 */
nav.active {
  display: flex;
}

/* PC用（900px以上） */
@media screen and (min-width:900px) {
  nav {
    position: static;   /* 固定解除 */
    display: flex;      /* 常に表示 */
    flex-direction: row;
    justify-content: flex-start;
    background: transparent;
  }
}

/*メニュー内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
ul.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	justify-content: center;
	
}
ul.icons li {
	margin-right: 10px;	/*アイコン同士の余白*/
}
ul.icons i {
  font-size: 20px;
  color: #b55263;/*アイコンの色*/
  transition: color 0.3s ease; /* ← これが“ふわっと”の正体 */
}

ul.icons i:hover {
  color: #d8bbe7; /* ← ホバー時の色 */
}


/*section
---------------------------------------------------------------------------*/
/*フェード設定*/
.section::before {
	opacity: 0; /* 初期状態では非表示 */
	transition: opacity 1s; /* 1秒かけてフェードイン/フェードアウト */
}
.section.active::before {
	opacity: 1; /* フェードイン状態 */
}
.section.inactive::before {
	opacity: 0; /* フェードアウト状態 */
}

/*section要素*/
section {
	padding: 1vw 5vw;	/*ボックス内の余白。上下、左右への順番。*/
}

/*４つのsectionブロックの共通設定*/
#section1,#section2,#section3-1,#section3-2,#section3-3,#section4 {
	min-height: calc(100dvh - 50px);	/*最低の高さ。100dvhは画面の高さ100%のこと。50pxは下のmarginの値。*/
	 padding: 3vw 3vw 50px 3vw; /* 下余白はpaddingで確保 */
  margin-bottom: 0;          /* marginを消す *
	padding: 3vw;			/*ボックス内の余白*/
}

#section2::before,
#section3-1::before,
#section3-2::before,
#section3-3::before,
#section4::before,
#section5::before,
#section6::before,
#section7::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}


	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	#section1,#section2,#section3-1,#section3-2,#section3-3,#section4 {
		border-radius: 3vw 0 0 3vw;	/*角丸の指定。左上、右上、右下、左下への順番。*/
	}

	}/*追加指定ここまで*/


/*section1の設定*/

#section1 {
	color: #fff;	/*文字色*/
}
#section1::before {
  content: '';
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url('../image/section1.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;

}
@media (max-width: 600px) {
  #section1::before {
    background-size: 210%;
     background-position: center;
  }
  
}

@media (max-width: 600px) {
  #section1 {
    height: 40vh; /* 画面の60%の高さにする */
  }
}






/*section2の設定*/
#section2 {
	color: #4a4040;	/*文字色*/
  background-color: #2ec42e68;	/*section4だけは背景画像ではなく、単に背景色だけ指定しました。*/
}


/*背景色を入れない場合（画像だけを表示したい場合）*/
.no-bgcolor {background-color: transparent !important;}

/*スライドショーの設定*/
.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slide-track {
  display: flex;
  width: calc(300px * 6); /* 画像幅×枚数（3枚×2周分） */
  animation: scroll 20s linear infinite;
}

.slider img {
  width: 300px;   /* ← 好きな幅に調整できる */
  height: auto;
  margin-right: 10px;
  border-radius: 8px; /* 角丸はお好みで */
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-120vw); /* 40vw × 3枚 */
  }
}


/*section3-1の設定*/
#section3-1 {
	color: #4a4040;	/*文字色*/
background-color:  #ffc296ef;	/*section4だけは背景画像ではなく、単に背景色だけ指定しました。*/
  
}

.no-bgcolor {background-color: transparent !important;}
#section3-1 h3 {
  background: linear-gradient(transparent 60%, #feffe4 60%);
  display: inline-block;

}


#section3-1 .flow-box {
  display: flex;
  align-items: flex-start;
  background: #ffffffc8;
  border-radius: 12px;
  padding: 1.5em;
  margin: 1.5em 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  gap: 1.2em;
}

#section3-1 .flow-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
}

/* スマホ用（例：600px以下） */
@media screen and (max-width:600px) {
#section3-1 .flow-img {
    width: 40%;       /* 横幅を縮める */
    height: auto;
    display: block;
    margin: 0 auto;   /* 中央寄せ */
  }
}

#section3-1 .flow-text {
  flex: 1;
  color: #333;
}

#section3-1 .flow-title {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0.4em;
}

@media (max-width: 600px) {
  #section3-1 .flow-box {
    flex-direction: column;
  }
  
}


/*section3-2の設定*/
#section3-2 {
	color: #4a4040;	/*文字色*/
background-color:  #ffc296ef;	/*section4だけは背景画像ではなく、単に背景色だけ指定しました。*/
}

.no-bgcolor {background-color: transparent !important;}
#section3-2 .flow-box {
  display: flex;
  align-items: flex-start;
  background: #ffffffc8;
  border-radius: 12px;
  padding: 1.5em;
  margin: 1.5em 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  gap: 1.2em;
}

#section3-2 .flow-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
}

/* スマホ用（例：600px以下） */
@media screen and (max-width:600px) {
#section3-2 .flow-img {
    width: 40%;       /* 横幅を縮める */
    height: auto;
    display: block;
    margin: 0 auto;   /* 中央寄せ */
  }
}



#section3-2 .flow-text {
  flex: 1;
  color: #333;
}

#section3-2 .flow-title {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0.4em;
}

@media (max-width: 600px) {
  #section3-2 .flow-box {
    flex-direction: column;
  }
  
}


#section3-2 h3 {
  background: linear-gradient(transparent 60%, #feffe4 60%);
  display: inline-block;

}
.no-bgcolor {background-color: transparent !important;}

/*section4の設定*/
#section4 {
	color: #4a4040;	/*文字色*/
background-color:  #2ec42e68;	/*section4だけは背景画像ではなく、単に背景色だけ指定しました。*/
}

.no-bgcolor {background-color: transparent !important;}


/*section5の設定*/
#section5 {
	color: #4a4040;	/*文字色*/
background-color:  #ffc296ef;	/*section4だけは背景画像ではなく、単に背景色だけ指定しました。*/
}

/*section6の設定*/
#section6 {
	color: #fff;	/*文字色*/
}
#section6::before {
	background: #daaa96;	/*section4だけは背景画像ではなく、単に背景色だけ指定しました。*/
}

/*section7の設定*/
#section7 {
	color: #fff;	/*文字色*/
}
#section7::before {
	background: #daaa96;	/*section4だけは背景画像ではなく、単に背景色だけ指定しました。*/
}


/*背景色を入れない場合（画像だけを表示したい場合）*/
.no-bgcolor {background-color: transparent !important;}


/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 0.8rem;
	text-align: center;		/*内容をセンタリング*/
	padding-bottom: 1rem;
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}


/*お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.new dd {
	padding-bottom: 1rem;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0 0.5rem;		/*上下、左右へのブロック内の余白*/
	width: 6rem;			/*幅。６文字分。*/
	transform: scale(0.8);	/*80%のサイズに縮小*/
	background: rgba(255,255,255,0.8);		/*背景色*/
	color: #333;			/*文字色*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	.new {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
	}

	}/*追加指定ここまで*/


/*list-grid（gallery.htmlでサムネイルを表示している部分の設定です）
---------------------------------------------------------------------------*/
/*listブロックを囲む外側のボックス*/
.list-grid-trimming {
	display: grid;
	grid-template-columns: repeat(4, 1fr);	/*ここの「4」の数字が横に並べる数です。3列がいいなら(3, 1fr)です。*/
	gap: 1rem;	/*マージン的な数値。サムネイル間を１文字分あけます。*/
}

/*ボックスを正方形にトリミングする為の指定なので変更しない。*/
.list-grid-trimming .list {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-top: 100%;
}
.list-grid-trimming .list a {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
.list-grid-trimming .list img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: 0.5s;	/*マウスオン時にかける時間。0.5秒。*/
}

/*マウスオン時の画像*/
.list-grid-trimming .list img:hover {
	transform: scale(1.1);	/*1.1倍に拡大*/
	filter: contrast(1.3);	/*コントラストを1.3倍*/
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 0.2s 0.2s both;	/*一瞬ボタンが出ちゃうのを隠す為の応急措置*/
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #000;border: 1px solid #fff;border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.color-check, .color-check a {color: #ffcf0d;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		.ws {width: 48%;display: inline;}
		.sh {display: none;}
		.pc {display: block;}

	}/*画面幅900px以上の追加指定ここまで*/


/*更新履歴
---------------------------------------------------------------------------*/

  /* PC用（デフォルト） */
.update-log {
  position: absolute; 
  top: 20px;
  right: 20px;
  width: 30%;
  max-width: 400px;
  min-width: 200px;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255, 255, 255, 0.7);
  padding: 10px;
  border-radius: 8px;
  font-size: 0.8em;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
}

@media (max-width: 600px) {
  .update-log {
    position: fixed;   /* ← ここが超重要！ */
    bottom: 0;
    right: 0;
    top: auto;         /* ← top を無効化 */
    width: auto;
    max-width: 90%;
    background: rgba(255,255,255,0.7);
    padding: 10px;
    border-radius: 8px 0 0 0;
    z-index: 9999;
  }
}





/* ▼ スクロールバー全体 */
.update-log::-webkit-scrollbar {
  width: 12px;
  background: rgba(255, 255, 255, 0.7);
}

/* ▼ 上下ボタン（通常時は透明） */
.update-log::-webkit-scrollbar-button {
  height: 12px;
  background: rgba(255, 255, 255, 0); /* 完全透明 */
  color: rgba(0, 0, 0, 0);            /* 文字も透明 */
  font-size: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, background 0.3s ease;
}

/* ▼ ホバー時にふわっと表示 */
.update-log::-webkit-scrollbar-button:hover {
  background: rgba(255, 255, 255, 0.7); /* BOX と同じ白 */
  color: #484848;                          /* グレーの矢印がふわっと出る */
}

/* ▼ 上ボタン（▲） */
.update-log::-webkit-scrollbar-button:single-button:vertical:decrement {
  content: "▲";
}

/* ▼ 下ボタン（▼） */
.update-log::-webkit-scrollbar-button:single-button:vertical:increment {
  content: "▼";
}

/* ▼ つまみ（thumb）白くて控えめ */
.update-log::-webkit-scrollbar-thumb {
  background: #e7dbdb;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1);
  transition: background 0.3s ease;
}

.update-log::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.9);
}
  


.update-log h2 {
  font-size: 1.4em;              /* ← 小さめ */
  margin-bottom: 8px;
  border-bottom: 1px solid #555;
  padding-bottom: 3px;
  color: #555;
}

.update-log ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.update-log li {
  margin-bottom: 10px;           /* ← 高さを圧縮 */
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.update-log time {
  font-weight: bold;
  color: #333;
  display: block;
  font-size: 0.9em;              /* ← 少し小さめ */
}

.update-title {
  font-size: 1em;                /* ← 小さめ */
  display: block;
  margin-top: 3px;
  color: #444;
}

.update-note {
  margin: 3px 0 0;
  color: #555;
  line-height: 1.3;              /* ← 行間を詰めて高さを縮める */
  font-size: 0.9em;

}

/* タイトル付きボックス（ラベル） */
.cstm-box-label {
  position: relative;
  margin: 2em 0;
  max-width: 800px;
  color: #889079; /* 枠・ラベルの基準色 */
  border: 2px solid currentColor;
  border-radius:4px;
}

.cstm-box-label .box-title {
  position: absolute;
  top: -0.6em;
  left: 1em;
  background: #fff;
  color: currentColor; /* 枠と同色 */
  padding: 0 .7em;
  font-weight: bold;
}

.cstm-box-label .box-content {
  padding: 2em;
  background: #ffffffc5;
  color: #111; /* 中身だけ別色 */
}

/* 段落余白リセット */
.cstm-box-label p {
  margin: 1;
}

/*2カラム
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {
  body {
    display: flex;
  }

  header {
    width: 250px; /* 既存の幅をそのままサイド幅に */
    flex-shrink: 0; /* サイドが潰れないように固定 */
    height: 100vh; /* 画面いっぱいの高さに */
    position: fixed; /* 左に固定 */
    top: 0;
    left: 0;
    overflow-y: auto; /* サイドメニューが長くなってもスクロール可能 */
	background-color: rgba(255, 255, 255, 0.6); /* ← 半透明の白 */


  }

  main {
    margin-left: 250px; /* サイドの幅だけ右にずらす（既存の指定を活かす） */
    flex-grow: 1; /* 右側を広げる */
  }
}
.event-table {
  background: #ffffffcc;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 12px 16px;
  max-width: 600px;
  margin: 20px 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.event-table .row {
  display: flex;
  padding: 8px 0;
  border-bottom: 2px dotted #eac2c2; /* ← グレーの点線罫線 */
}

.event-table .row:last-child {
  border-bottom: none; /* 最後の行は線なし */
}

.event-table .label {
  width: 110px;
  font-weight: 600;
  color: #444;
}

.event-table .value {
  flex: 1;
  color: #555;
}

/* サブメニューの上の隙間を消す（親メニューには影響なし） 絶対一番うしろ！　*/ 
#menubar nav li.has-sub {
  margin-bottom: 0 !important;
}

#menubar nav ul li.has-sub > .menu-label {
  margin: 0 !important;
  padding-bottom:1 rem !important;
  line-height: 1 !important;
}

.sub-menu {
  padding-top: 0 !important;
  padding-bottom: 0 !important;   /* ← これが決定打 */
  margin-bottom: 0 !important;    /* ← これも必要 */
  margin-top: 0 !important;    /* ← これも必要 */

}

.sub-menu li a {
  background: #ffffff00 !important;
  color: #ff7d45 !important;

}

/* 更新履歴を強制的に非表示にするクラス */
.update-log.hidden {
  display: none !important;
}