/*RESET----------*/


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

h1, h2, h3, h4, h5, h6 {
font-size: 15px;
font-weight: normal   }

img  {
text-decoration: none;
max-width: 100%;
margin:           0;
padding:          0;
border-style:     none  }

input:focus, texarea:focus, select:focus {
background-color: #fffaf0 }

fieldset, img, hr, abbr, acronym {
border: 0 }
input::-moz-focus-inner { /* Firefoxのボーダーとパディングをリセット */
  border: 0;
  padding: 0;
}

address {
font-size:  11px;
font-style:  normal;
padding-top: 10px }

fieldset, img, hr, abbr, acronym {
border: 0 }

input  {
font-weight: bold !important; }

strong {
font-style: normal;
font-weight: bold }

/*Selected Text--------*/


::selection {
background: #ffe2e2;

 /* Safari */
}
::-moz-selection {
background:#ffe2e2; /* Firefox */
}

/*　iOSの装飾をリセット*/
input  {
-webkit-appearance: none;
 }



/*BASIC----------*/
body     {
color: #8b4513;
font-size:1em;
font-family: "M PLUS Rounded 1c", Verdana, "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
-webkit-text-size-adjust:100%;
line-height: 1.2em;
background-repeat: no-repeat;
background-position: center -35px;
text-align: center;
letter-spacing: 0.1em;
margin: 0;
padding: 0 
 }

a:link {color: #0000EE;
text-decoration: none }
a:visited {color: #551A8B }
a:hover   {color: #FF0000; }
a:active  {color: #8b4513 }
a:hover img {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}

.cmnTtl {
color: #db7093;
font-size: 3.5em;
font-weight: 100;
line-height: 1em;
background-repeat: no-repeat;
background-position: center bottom;
padding-bottom: 50px; }

.cmnTtlM {
color: #008dcc;
font-size:           1.3em;
font-weight: 400;
line-height: 1.5em;
margin-bottom: 1.2em;
padding-bottom: 15px;
border-bottom: 1px dashed #008dcc; }


.cmnBlockCenter {
font-size: 1.3em;
text-align: center;
max-width: 800px;
margin-right: auto;
margin-bottom: 100px;
margin-left: auto; }

.cmnBlockLeft {font-size:     1.3em;
text-align:    left;
margin-right:  auto;
margin-bottom: 100px;
margin-left:   auto;
max-width:     800px; }


main p {
font-size: 1em;
line-height: 1.8em;
margin-bottom: 1.8em; }



.Bt01 {
color: #fff;
font-size: 2em;
line-height: 1.2em;
background-color: #ff0083;
max-width: 450px;
margin-right: auto;
margin-bottom: 100px;
margin-left: auto;
padding: 10px 25px;
display: block;
border-radius: 20px; }

.Bt01:visited {
color: #fff !important;
 }
.Bt01:link {color: #fff !important; }

/*HEADER--------------------*/

.HD {
position: relative;
color: #008dcc ; }

.HDM {
color: #fff;
font-size: 3.5em;
font-weight: 700;
position: absolute;
/* left: 50%; */
top: 50%;
transform: translate(0%, -50%);
width: 46%;
text-align: left;
line-height: 1.2em;
padding-left: 3%;
text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2); }

.HDM span {
font-size:    0.5em;
font-weight: 100; }

.HDimg {
background-size:  contain;
width: 100%; }


/*MENU--------------------*/

/*
.MNB {
max-width: 1000px;
margin-right: auto;
margin-bottom: 100px;
margin-left: auto;
padding-top: 100px;
padding-bottom: 100px;
display: grid;
align-items: stretch;
grid-template-columns: repeat(5, 1fr);
gap: 0; }
.MN {
list-style-type: none; }
.MN a:link {
display: block; }
.MN a:hover {
background-color: #ff0; }
*/

/*MENU-NEW--------------------*/

/* ヘッダー全体の背景設定（白に変更）と中央寄せ */
.header-nav-container {
	background-color: #ffffff;
	padding: 15px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap; /* 折り返しを許可 */
	gap: 10px; /* ボックス間の余白 */
	max-width: 1200px; /* 220px × 5列 + 余白10px = 計1140pxに収まる最大幅 */
	margin: 0 auto 25px 
}

/* 各リンクボックスのスタイル */
.nav-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24%; /* パソコン時の横幅220px固定 */
	height: 65px; /* 改行に対応するため高さを少し広げました */
	background-color: #ffd700; /* ボタンの背景色（灰色） */
	border: solid 1px #b49b68; /* 枠線を薄いグレーに */
	border-radius: 4px;
	color: #333333; /* 文字の色（濃いグレー） */
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.3s;
	margin-bottom: 5px;
}

/* マウスホバー時のエフェクト */
.nav-box:hover {
color: #b49b68;
background-color: #ff0; }

/* カテゴリ文字のスタイル */
.nav-label {
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	padding: 0 8px;
	/* 文字を省略せず、枠内で改行させる設定 */
	word-break: break-all;
	overflow: visible;
}

/* ハンバーガーメニュー用のスイッチ（通常時は非表示） */
.menu-switch, .hamburger-btn {
	display: none;
}

/* レスポンシブ対応（画面幅が狭いタブレット向けの調整） */
@media screen and (max-width: 1150px) {
	.header-nav-container {
		max-width: 100%;
		padding: 10px;
		gap: 1%; /* 画面幅に対して隙間をパーセントで調整 */
	}
	.nav-box {
		/* 「1行5個（幅約19%）」をキープして2行を維持 */
		width: 24%; 
		height: auto; /* スマホ時は文字の改行に合わせて高さを自動調整 */
		min-height: 50px; /* 最低限の高さを確保 */
		padding: 4px 0;
	}
	.nav-label {
		font-size: 11px; /* スマホで見切れないよう文字を少し小さく */
	}
}

/* スマホ画面用の設定（ハンバーガーメニューを右上に固定） */
@media screen and (max-width: 600px) {
	/* メニュー固定に伴い、コンテンツがボタンに被るのを防ぐための余白を親要素に付与 */
	.nav-wrapper {
		box-sizing: border-box;
		padding-top: 60px; 
	}

	/* ハンバーガーアイコンをブラウザ右上部に固定 */
	.hamburger-btn {
		display: block;
		width: 50px;
		height: 50px;
		position: fixed; /* 画面に対して固定 */
		top: 10px;       /* 上部からの位置 */
		right: 10px;     /* 右側からの位置 */
		background-color: rgba(255, 255, 255, 0.9); /* スクロール時に下の文字と被っても見やすいよう背景を白に */
		border-radius: 4px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.15);
		cursor: pointer;
		z-index: 100; /* メニューや他の要素より手前に表示 */
	}
	/* 三本線の共通スタイル */
	.hamburger-btn span {
		display: block;
		position: absolute;
		left: 13px;
		width: 24px;
		height: 2px;
		background-color: #333333;
		transition: all 0.3s;
	}
	.hamburger-btn span:nth-child(1) { top: 16px; }
	.hamburger-btn span:nth-child(2) { top: 24px; }
	.hamburger-btn span:nth-child(3) { top: 32px; }

	/* ナビゲーションメニュー本体（画面全体に固定配置） */
	.header-nav-container {
		display: none; /* メニューを隠す */
		position: fixed; /* 画面に対して固定 */
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh; /* 画面いっぱいに広げる */
		overflow-y: auto; /* メニューが多い場合にスクロール可能にする */
		flex-direction: column; /* 縦並び */
		align-items: center; /* 中央寄せ */
		justify-content: flex-start; /* 上詰めで配置 */
		gap: 12px;
		padding: 80px 20px 40px 20px; /* ボタンと被らないよう上部に広めの余白 */
		background-color: rgba(255, 255, 255, 0.95); /* 少し後ろが透ける上品な白背景 */
		box-sizing: border-box;
		z-index: 99; /* ボタンのすぐ後ろに配置 */
		margin-bottom: 0;
	}

	/* ボタン幅の調整 */
	.nav-box {
		width: 100%; /* 横幅いっぱいに広げる */
		max-width: 400px; /* スマホで広がりすぎないよう最大幅を制限 */
		height: 48px;
		min-height: unset;
		padding: 0;
		margin-bottom: 0;
	}
	.nav-label {
		font-size: 14px;
		padding: 0 10px;
	}

	/* 【開閉システム】チェックボックスがONのときの動き */
	.menu-switch:checked ~ .header-nav-container {
		display: flex; /* メニューを表示する */
	}

	/* 【開閉システム】メニューが開いているときの三本線のアニメーション（✕にする） */
	.menu-switch:checked ~ .hamburger-btn span:nth-child(1) {
		transform: translateY(8px) rotate(-45deg);
	}
	.menu-switch:checked ~ .hamburger-btn span:nth-child(2) {
		opacity: 0;
	}
	.menu-switch:checked ~ .hamburger-btn span:nth-child(3) {
		transform: translateY(-8px) rotate(45deg);
	}
}


/*OSHIRASE--------------------*/

.oshirase01{
display: grid;
margin-right: auto;
margin-left: auto;
max-width: 1000px;
grid-template-columns: 1fr 2fr;
gap: 10px;
}

/*TABLE--------------------*/

.tbl01B {
font-size: 1.2em;
line-height: 1.5em;
text-align: left;
display:               grid;
margin-right:          auto;
margin-bottom:         100px;
margin-left:           auto;
max-width:             800px;
grid-template-columns: 1fr 3fr;
gap:                   0px; }

.tbl01B div {
padding: 15px;
border-bottom: 1px dashed #dcdcdc; }

.tbl01L {
white-space: nowrap; }
/*++++++++++++*/

.tbl02B {
font-size: 1.1em;
line-height: 1.3em;
text-align: left;
display:               grid;
margin-right:          auto;
margin-bottom:         100px;
margin-left:           auto;
max-width:             800px;
grid-template-columns: 1fr 3fr;
gap:                   10px; }

.tbl02L {background-color: #ffe4e1;
text-align:       right;
white-space:      nowrap;
padding:          15px; }

.tbl02R {
padding: 15px;
border-bottom: 1px dotted #666;
 }
 

/*++++++++++++*/

.tbl03B {
font-size: 1.1em;
line-height: 1.3em;
text-align: left;
display:               grid;
margin-right:          auto;
margin-bottom:         100px;
margin-left:           auto;
max-width:             800px;
grid-template-columns: 1fr 3fr;
gap:                   10px; }
.tbl03L {background-color: #f8f8ff;
text-align:       right;
white-space:      nowrap;
padding:          15px; }
.tbl03R {
padding: 15px;
border-bottom: 1px dotted #666;
 }
/*++++++++++++*/
.tbl04B {font-size:             1.2em;
line-height:           1.5em;
text-align:            left;
display:               grid;
margin-right:          auto;
margin-bottom:         100px;
margin-left:           auto;
max-width:             1000px;
grid-template-columns: repeat(2, 1fr);
gap:                   0px; }

.tbl04B div {padding:       15px;
border-bottom: 1px dashed #dcdcdc; }

/*FOOTER--------------------*/
footer {
position: relative;
padding-top: 50px; }

.FTB {
text-align: left;
display:               grid;
margin-right:          auto;
margin-bottom:         100px;
margin-left:           auto;
max-width:             1000px;
grid-template-columns: repeat(4, 1fr);
gap:                   25px 30px; }

.FT {
 }

.FTttl {
font-size: 1.2em;
font-weight: 500;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #666;

 }

.FT li {
line-height: 1.2em;
margin-bottom: 1.5em;
list-style-type: none; }

.FTTop {
color: #666;
font-size: 0.8em;
position: absolute;
right: 20px;
bottom: 7px; }

.FTD {
color: #666;
font-size: 0.9em;
background-color: #ffd700;
text-align: left;
margin-top: 25px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px; }

/*@media screen and (max-width:1200px){*/
@media screen and (max-width:1200px){



}
@media screen and (max-width:850px){

/*RESET-HTML----------*/
html,body {
width: 100% !important;
 }
/*BASIC----------*/
main {
padding-right: 3%;
padding-left: 3%; }
.toumei {padding-right: 3%;
padding-left:  3%; }

/*HEADER--------------------*/
.HDM {font-size:    2.5em; }

/*MENU--------------------*/
.MNtxt {
font-size:    2em;
font-weight: 200; }

/*OSHIRASE--------------------*/
.oshirase01{
display: block;
}

/*FOOTER--------------------*/
.FTB {
padding-right: 3%;
padding-left: 3%; }

}
@media screen and (max-width:640px){
/*DEPEND ON YOUTUBE WIDTH*/
/*FOR-YOUTUBE-SMARTPHONE----------*/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*RESET-HTML----------*/

/*BASIC----------*/

/*HEADER--------------------*/
.HDM {
color: #008dcc;
font-size:    1.5em;
text-align:   center;
padding-left: 0;
position:     relative;
top:          0;
width:        100%;
padding-top: 25px;
padding-bottom: 25px;
transform:    translate(0%, 0%); }
/*MENU--------------------*/
.MNB {grid-template-columns: repeat(1, 80%);
gap: 15px 0px;
justify-content: center; }


/*TABLE--------------------*/

.tbl01B {
display: grid;
grid-template-columns: repeat(1, 100%); }
.tbl01B div {
border-bottom-color: #fff;
 }

.tbl01R {
padding-top: 0 !important;
border-bottom: 1px solid #696969 !important; }

/*+++++++++++++++++++*/

.tbl02B {grid-template-columns: 1fr;
gap:                   0px; }

.tbl02L {text-align: left; }

.tbl02R {margin-bottom:       25px;
border-bottom-style: none;
border-bottom-width: 0; }

/*+++++++++++++++++++*/

.tbl03B {grid-template-columns: 1fr;
gap:                   0px; }

.tbl03L {text-align: left; }

.tbl03R {margin-bottom:       25px;
border-bottom-style: none;
border-bottom-width: 0; }

/*+++++++++++++++++++*/

.tbl04B {
display: grid;
grid-template-columns: repeat(1, 100%); }
.tbl04B div {
border-bottom-color: #fff;
 }





/*FOOTER--------------------*/
.FTB {
padding-right: 3%;
padding-left: 3%;
display:               grid;
grid-template-columns: repeat(2, 1fr); }

.FTTop {color:     #008dcc;
position:  relative;
right:     0;
bottom:    0; }

}
@media screen and (max-width:450px){
/*RESET-HTML----------*/
/*BASIC----------*/
/*HEADER--------------------*/
/*FOOTER--------------------*/
.FTB {grid-template-columns: repeat(1, 1fr); }
}