/* -------------------------------------- */
/* ★ 修正案1: HTMLとBODYのマージンをリセット ★ */
/* -------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
    /* bodyのfont-size設定はそのまま */
}
html {
    scroll-padding-top: 80px;
}
:root {
    --header-height: 80px; /* ヘッダーの高さ */
    --search-height: 100px; /* 検索フォームの高さ */
    --transition-duration: 0.4s;
    --push-offset: var(--search-height); /* メインコンテンツの押し下げ量 */
}

body {
font-family: "Noto Sans JP", "HiraKakuPro", -apple-system, "Lucida Grande", "Helvetica Neue", "メイリオ", meiryo, "Hiragino Kaku Gothic ProN", sans-serif;

font-size: 16px; /* 標準フォントサイズ */
    transition: font-size 0.2s; /* 文字サイズ変更を滑らかに */
	
}

/* 🌟 変更点3: 文字サイズ変更用クラス 🌟 */
body.font-large {
    font-size: 18px; 
}
body.font-normal {
    font-size: 16px; 
}
body.font-small {
    font-size: 14px;
}

img{
	vertical-align:bottom;
}
h5{font-size:1.2em;}

h6{font-size:1em;}
@media screen and (max-width: 980px) {
	.pc{display:none!important;}
}

@media screen and (max-width: 780px) {
	.tb{display:none!important;}
}

@media screen and (min-width: 780px) {
	.sp{display:none!important;}
}

/* -------------------------------------- */
/* 1. グローバルヘッダー (固定) */
/* -------------------------------------- */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: #005192;
    border-bottom: 1px solid #ddd;
    z-index: 100; 
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0px 0px 20px;
    box-sizing: border-box;
	height:80px;
}
@media screen and (max-width: 780px) {
.fixed-header {

    padding: 0 0px 0px 5px;

}
}
.short-center-hr {
  width: 10%; 
  margin-left: auto;
  margin-right: auto;

  /* --- リセット・既定のスタイル設定 --- */

  /* 既定のマージンやパディングをリセット */
  margin-top: 2em; /* 上下のマージンは任意で調整 */
  margin-bottom: 2em;

  /* 右寄せなどの可能性を排除するため、text-alignの影響を受けないようにする */
  display: block; 

  /* 既定のボーダーや背景色をリセットし、シンプルな線にする */
  border: none;
  /* 線の太さ（高さ）を設定 */
  height: 3px; 
  /* 線の色を設定 */
  background-color: #ccc; 
}

.float-right-img {
  /* 画像を右側に浮動化させる */
  float: right; 

  /* 周りの文章との間に適切な隙間を作る */
  margin-left: 15px; /* 画像の左側にマージンを追加 */
  margin-bottom: 10px; /* 画像の下側にマージンを追加 */

  /* 必要に応じて画像のサイズも指定 */
  width: 400px;
  height: auto;
}
/* 2. フロート解除用のCSS */
.clearfix {
  /* 右寄せ（float: right;）のみを解除する場合は clear: right; */
  /* 左右両方のフロートを解除する場合は clear: both; */
  clear: both; 
  /* この空の要素が視覚的に表示されないように、高さを0にすることが多い */
  height: auto;
  /* (モダンな方法では height: 0; は不要な場合もあります) */
}

.header-left, .header-right {
    display: flex;
    align-items: center;
}

.site-title {
    margin: 0;
    font-size: 1.5em;
    height: 100%;
    display: flex;
    align-items: center;
}

.site-title img{
    margin:5px;
    max-height: 50px;
    width: 100%;
}

.large-text {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.small-text {
font-size: 14px;
    color: #fff;
    margin-right: 15px;
    text-decoration: none;
    /* 🌟 調整: アイコンが追加されたので、vertical-alignで垂直位置を調整 🌟 */
    line-height: 1.2;
}



/* 🌟 変更点2: 文字サイズ ラベルのスタイル 🌟 */
.font-size-label {
    /* ボタンとテキストの間に余白を持たせる */
    margin-right: 8px; 
    /* 言語選択プルダウンとボタンが並ぶように調整 */
    line-height: var(--header-height); /* ヘッダーの高さで垂直位置を調整 */
}


/* 文字サイズ変更ボタンのスタイル */
.font-size-buttons {
    display: flex;
    margin-right: 20px;
    border: 1px solid #ccc;
    border-radius: 0px;
}

.font-size-button {
    background: #005192;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    color: #fff;
    transition: background-color 0.2s;
    width: 40px;
    height: 30px;
}
.font-size-button.active {
    background-color: #fff; /* アクティブなボタンの背景色 */
    color: #005192;

}
.font-size-button:hover:not(.active) {
    background-color: #fff;
    color: #005192;
}
.font-size-button[data-size="small"],
.font-size-button[data-size="normal"] {
    border-right: 1px solid #ccc;
}

.icon-button {
    background: none;
    border: none;
    /* 🌟 アイコンのサイズを調整 🌟 */
    font-size: 20px; 
    margin-left: 0px;
    cursor: pointer;
    padding: 8px;
    color: #333;
    transition: color 0.2s;
}
.icon-button:hover {
    color: #007bff;
}

/* 🌟 変更点4: よくある質問の前のアイコンのスタイル 🌟 */
.header-icon {
    width: 40px;
    height: 40px;
    margin-right: 5px; /* テキストとの間に少し隙間 */
}

.header-icon_nav {
    width: 60px;
    height: 60px;
    margin-right: 5px; /* テキストとの間に少し隙間 */
}

.header-help img{
	
	height:80%;
}

.menu-toggle{
	background-color: #156700;
}
/* -------------------------------------- */
/* 1. グローバルヘッダー (固定) */
/* -------------------------------------- */

/* 言語選択プルダウンのスタイル */
.language-selector {
    margin-right: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden; 
    height: 28px;
    
    /* 🌟 変更点1: language-selectorの背景色を青に 🌟 */
    background-color: #007bff; /* 青色 */
}
.language-selector select {
    border: none;
    height: 100%;
    padding: 0 5px;
    /* 🌟 変更点2: select要素の背景色と文字色を白に 🌟 */
    background: #005192; /* 青色 */
    color: white; /* 文字を白に */
    cursor: pointer;
    font-size: 14px;
	width:100px;
    
    /* 枠線が二重にならないように調整 */
    border-radius: 4px; 
}
@media screen and (max-width: 780px) {
.language-selector {
    margin-right: 20px;
    border: 0px solid #ccc;
    border-radius: 4px;
    overflow: hidden; 
    height: 28px;
	text-align:left;
    background-color: transparent; /* 青色 */
	margin-top:10px;
}
.language-selector select {
    border: 1px solid #fff;
    height: 100%;
    padding: 0 5px;
    /* 🌟 変更点2: select要素の背景色と文字色を白に 🌟 */
    background: transparent; /* 青色 */
    color: white; /* 文字を白に */
    cursor: pointer;
    font-size: 14px;
	width:100px;
    
    /* 枠線が二重にならないように調整 */
    border-radius: 4px; 
	        margin-left: 2em;
}
}

/* 🌟 変更点3: ドロップダウン内のオプションの文字色も明示的に白に 🌟 */
.language-selector select option {
    background-color: white; /* ドロップダウン展開時は白背景に戻すことが多いですが... */
    color: black;            /* ...選択肢の文字は通常黒で読みやすくします */
    
    /* **注意:** ドロップダウンメニューが開いた時の背景色や文字色は、OSやブラウザの制御下にあり、CSSでの完全な制御が難しい場合があります。特にWindows環境で顕著です。 */
}

/* 補足: ご要望通り、**展開時の背景も青、文字を白**にしたい場合は、以下のようにします。 */
/* ただし、環境依存性が高いため、動作しない場合があることをご了承ください。 */
.language-selector select option {
    background-color: #005192; 
    color: white; 
}

.search-toggle{
margin: 0;
    padding: 0;
    height: 80px;
    width: 80px;
    background-color: #eee;	
}
/* -------------------------------------- */
/* 2. 検索フォーム領域 (プッシュ型) */
/* -------------------------------------- */
.search-form-block {
    position: fixed;
    top: var(--header-height); 
    left: 0;
    width: 100%;
    height: var(--search-height); 
    background-color: #eee;
    z-index: 99; 
    
    position: relative; 
    
    transform: translateY(calc(var(--search-height) * -1)); 
    transition: transform var(--transition-duration) ease-out;
}

.search-form-block.is-open {
    transform: translateY(0); 
}

/* 🌟 変更点3: フォームのFlexbox設定を調整 🌟 */
.search-form {
    /* フォーム全体を縦に並べるFlexboxコンテナに変更 */
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 50px; 
}


@media screen and (max-width: 780px) {
.search-form{
    padding: 0 10px; 
}}

/* 🌟 変更点4: ラジオボタングループのスタイル 🌟 */
.radio-group {
    display: flex;
    gap: 20px; /* ボタン間のスペース */
    margin-bottom: 10px; /* 入力欄とのスペース */
    font-size: 14px;
    color: #555;
}
.radio-group label {
    cursor: pointer;
}

/* 🌟 変更点5: 検索入力とボタンをグループ化 🌟 */
.search-input-group {
    display: flex;
    width: 70%;
    max-width: 500px; /* HTMLの最大幅と一致させる */
}

/* フォームの input と button の親要素を .search-input-group に変更したため、
   関連するセレクタも修正します */

.search-input-group input[type="search"] {
    padding: 12px;
    flex-grow: 1; /* 幅いっぱいまで広げる */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px; 
}

.search-input-group .submit-button {
    padding: 12px 20px;
    background-color: #007bff;
    color: white;
    border: 1px solid #007bff;
    border-left: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 16px;
    height: 43px; 
    transition: background-color 0.2s;
    /* heightの固定は不要になる場合がありますが、ここでは残します */
}

.search-form input[type="search"] {
    padding: 12px;
    width: 70%;
    max-width: 500px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px; 
}

.search-form .submit-button {
    padding: 12px 20px;
    background-color: #007bff;
    color: white;
    border: 1px solid #007bff;
    border-left: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 16px;
    height: 43px; 
    transition: background-color 0.2s;
	line-height: 1;
}
.search-form .submit-button:hover {
    background-color: #0056b3;
}

.close-search-button {
    position: absolute;
    top: 5px; 
    right: 15px; 
    font-size: 30px;
    line-height: 1;
    background: none;
    border: none;
    color: #333; 
    cursor: pointer;
    padding: 10px;
    z-index: 110; 
}


/* -------------------------------------- */
/* 3. ハンバーガーメニュー (右からスライドイン) */
/* -------------------------------------- */
#sideMenu {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background-color: #156700;
    color: white;
    z-index: 1000; 
    padding: 0px;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    
    transform: translateX(100%); 
    transition: transform var(--transition-duration) ease-out;
	    overflow: scroll;
}

@media screen and (max-width: 780px) {
#sideMenu{
    width: 100%;
}
}

#sideMenu.is-open {
    transform: translateX(0); 
}

.close-menu-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.side-menu ul {
    list-style: none;
    padding: 40px 0 0 0;
    margin: 0;
}
@media screen and (max-width: 780px) {

.side-menu ul {
    padding: 0px 0 0 0;
}}
.side-menu ul li > a {
    display: block;
    padding: 20px 30px;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    transition: background-color 0.2s;
}

.side-menu ul li > ul{
    list-style: none;
    padding: 0px 0 0 0;
    margin: 0;
}
.side-menu ul li > ul li > a{
    display: block;
    padding: 10px 30px 10px 50px;
    color: #666;
    text-decoration: none;
    border-bottom: 1px solid #555;
    transition: background-color 0.2s;
	background-color:#e7e7e7;
}


.side-menu a:hover {
    background-color: #fff;
    color: #555;
}

.sidemenu_footer{
	padding:1em;
	background-color:#fff;
}

.sidemenu_footer a{
	color: #555;
	text-decoration:none;
}

.sidemenu_footer a:hover {
	color: #e7e7e7;
	text-decoration:none;
}

/* -------------------------------------- */
/* 4. メインコンテンツ (プッシュアニメーション) */
/* -------------------------------------- */
.main-content {
    /* これが隙間を作らないようにする核です */
    margin-top: -20px; 
    width: 100%; 
    padding: 0; 
    
    transform: translateY(0);
    transition: transform var(--transition-duration) ease-out;
}

/* 🌟 修正点2: 本文の幅を制御するラッパー 🌟 */
.content-wrapper {
    max-width: 1300px; 
    margin: 0 auto; /* margin/paddingは上下左右0 */
    padding: 0 20px; /* 左右の余白は確保 */
    box-sizing: border-box; 

}

@media screen and (max-width: 780px) {
.content-wrapper {

    padding: 0 10px; /* 左右の余白は確保 */

}
}

/* -------------------------------------- */
/* 5. 本文の押し下げの再確認 */
/* -------------------------------------- */
#main-title {
    /* ヘッダーの高さ分 + 本文の余白20pxで押し下げる */
    padding-top: calc(var(--header-height) + 0px); 
    margin-top: 0; /* h2のデフォルトmarginをリセット */
    margin-bottom: 20px;
}


/* 検索フォームが開いた時にメインコンテンツを押し下げる */
.main-content.is-pushed {
    /* 🌟 修正点4: transformでグローバルメニューと検索フォームの合計分、押し下げる 🌟 */
    transform: translateY(calc(var(--push-offset))); 
}

/* 検索フォームが開いていない時の #main-title のパディングはそのまま */
.main-content:not(.is-pushed) #main-title {
    /* header-height(60px) + 20px = 80px */
    padding-top: calc(var(--header-height) + 0px); 
}

/* -------------------------------------- */
/* 5. フッター */
/* -------------------------------------- */
.site-footer {
    padding: 20px;
    background-color: #333;
    color: white;
}

.footer-left {
    line-height: 1.6;
}

.logo-mark {
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}


/* -------------------------------------- */
/* ★ メインコンテンツ内のブロックレイアウト ★ */
/* -------------------------------------- */

/* Block 1: ボタン、見出し、検索エリア */
.main-block-one {
    padding-bottom: 40px;
}


/* -------------------------------------- */
/* Block 1: ボタン、見出し、検索エリア */
/* -------------------------------------- */
.main-block-one {
    /* 🌟 修正点3: paddingを削除し、relativeを設定 🌟 */
    padding: 0; 
    position: relative; 
    overflow: hidden; 
    border-bottom: 1px solid #ddd;
    
    /* 背景画像を削除 */
    background: none; 
}

/* 🌟 修正点4: 背景レイヤーの設定 🌟 */
.background-layer {
    position: absolute;
    top: 0;
    left: -50px;
    width: 100%;
    height: 100%;
    z-index: 1; /* コンテンツより後ろに配置 */
    
    /* 背景画像の設定をここに移動 */
    background-image: url('../images/top_bg2.png'); 
    background-size: cover; 
    background-position: center 41%; 
    background-repeat: no-repeat;
    
    /* 🌟 アニメーションのトランジション設定 🌟 */
    transition: filter 2s ease-out, transform 2s ease-out; /* 動作を滑らかに */
}
@media screen and (max-width: 780px) {
.background-layer{
    left: 0px;
    background-size: 140%; 
	background-position: -50px 10%;; 

}}


/* 🌟 修正点5: コンテンツを前面に、paddingをここで設定 🌟 */
.block-content-wrapper {
    position: relative;
    z-index: 2; /* 背景レイヤーより前に配置 */
    padding: 20px 0px; /* 元々 main-block-one にあったパディングをここに移動 */
}

/* 🌟 修正点6: 初期状態でのぼかし 🌟 */
.initial-blur .background-layer {
    filter: blur(10px); 
    /* ぼかし中に少し拡大して端の処理をごまかすテクニック */
    transform: scale(1.05); 
}

/* 🌟 修正点7: アニメーション後の状態（ぼかし解除） 🌟 */
.background-layer.reveal-image {
    filter: blur(0); 
    transform: scale(1); /* 元のサイズに戻す */
}


/* 既存のコンテンツスタイルは、背景画像とのコントラストを考慮して調整が必要かもしれません */
/* 例: テキストに影をつけるなど */
.block-title, .block-subtitle, .search-area-title {
    color: #000; /* 背景画像の上に白文字 */
}

.search-area {
    /* 90%幅と中央寄せ */
width: 100%;
    margin: 0 auto 0px auto;
    background-color: #dfdfdf85;
    padding: 20px 0;
    border-radius: 8px;
    border: 0px solid #ffffff;
}


/* search-area の背景は元の水色なので、テキスト色を適宜調整 */

.search-area-title {
    font-size: 1.1em;
    color: #000000;
    display: flex;
    align-items: center;
    width: 80%;
    margin: 0 auto .5em;

}
/* 🌟 修正点1: フォーム全体は縦並びを想定した配置に戻します 🌟 */
.area-form {
    display: block;
    width: 80%;
    margin: 0 auto;
	}

@media screen and (max-width: 780px) {
.search-area {
width: 100%;
    margin: 0 auto 0px auto;
    background-color: #fff;
    padding: 0px 0;
    border-radius: 8px;
    border: 0px solid #ffffff;
}
.search-area-title {
    font-size: 1.1em;
    color: #000000;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto .5em;

}
/* 🌟 修正点1: フォーム全体は縦並びを想定した配置に戻します 🌟 */
.area-form {
    display: block;
    width: 100%;
    margin: 0 auto;
	}


}
@media screen and (max-width: 980px) {
.header-left-buttons{
	font-size:0.8em;
}

}

/* Block 1 ヘッダー: ボタンとSNSアイコンの左右配置 */
.block-header {
    display: flex;
    justify-content: space-between; /* 左右寄せ */
    align-items: center;
    margin-bottom: 20px;
}
.header-right-sns {
    display: flex;
    align-items: center; /* アイコンを垂直方向中央に揃える */
}

.header-right-sns img{
    width:50px;
}

.action-button {
display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 20px 8px 50px;
    margin-right: 30px;
    background-image: url(../images/arrow_white.png);
    background-color: #156700;
    color: #fff;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s;
    background-repeat: no-repeat;
    background-size: 33px;
    background-position: 10px 42%;
	font-weight: normal;
    width: 16em;
	font-size: 1.1em;
}

@media screen and (max-width: 980px) {
.action-button {
display: inline;
	line-height: 3em;
}
}

.action-button:hover {
    background-color: #e6f4ff; /* ホバー時に薄い青の背景 */
    color: #005192; /* ホバー時に薄い青の背景 */
}

.sns-icon-circle1 {
    display: flex; 
    justify-content: center;
    align-items: center;
    
    width: 50px;  
    height: 50px; 
    border-radius: 50%; 
    border: 0px solid #ccc; 
    
    margin-left: 15px; /* アイコン間の間隔はこれで確保 */
    text-decoration: none; 
    transition: all 0.2s;
}

.sns-icon-circle2 {
    display: flex; 
    justify-content: center;
    align-items: center;
    
    width: 50px;  
    height: 50px; 
    border-radius: 50%; 
    border: 0px solid #ccc; 
    
    margin-left: 15px; /* アイコン間の間隔はこれで確保 */
    text-decoration: none; 
    transition: all 0.2s;
}

.sns-icon-circle3 {
    display: flex; 
    justify-content: center;
    align-items: center;
    
    width: 50px;  
    height: 50px; 
    border-radius: 50%; 
    border: 0px solid #ccc; 
    
    margin-left: 15px; /* アイコン間の間隔はこれで確保 */
    text-decoration: none; 
    transition: all 0.2s;
}
.sns-icon-circle4 {
    display: flex; 
    justify-content: center;
    align-items: center;
    
    width: 50px;  
    height: 50px; 
    border-radius: 50%; 
    border: 0px solid #ccc; 
    
    margin-left: 15px; /* アイコン間の間隔はこれで確保 */
    text-decoration: none; 
    transition: all 0.2s;
}

.sns-icon-circle1:hover,.sns-icon-circle2:hover,.sns-icon-circle3:hover {
    background-color: #f0f0f0;
    border-color: #fff;
}

/* 🌟 修正点2: SVGアイコン自体のスタイル 🌟 */
.sns-icon-circle1 svg ,.sns-icon-circle2 svg ,.sns-icon-circle3 svg {
    width: 40px; /* SVGのサイズ */
    height: 40px; /* SVGのサイズ */
    fill: #fff; /* SVGの色（パスの色） */
    transition: fill 0.2s;
}

.sns-icon-circle:hover svg {
    fill: #007bff; /* ホバー時に青色に */
}

/* Block 1 見出し */
.block-title {
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 50px;
    margin-bottom: 30px;
	color: #156700;
}




.block-subtitle {
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.5;
    color: #1c1c1c;
    margin-bottom: 40px;
	width:60%;
}
@media screen and (max-width: 980px) {
.block-title {
}


.block-subtitle {
    font-size: 0.9em;
	width:60%;
}
}
@media screen and (max-width: 780px) {
.block-title {
    font-size: 7vw;
    margin-top: 0px;

}
.block-subtitle {
	width:100%;
}

}
/* -------------------------------------- */
/* Block 1 検索エリア */
/* -------------------------------------- */




/* 🌟 修正点1: 検索タイトル前のアイコンを画像に合わせる 🌟 */
.search-title-icon {
    width: 30px; /* 画像の幅 */
    height: 30px; /* 画像の高さ */
    margin-right: 8px; /* テキストとの間隔 */
    vertical-align: middle; /* テキストと垂直方向中央に揃える */
}


/* 🌟 修正点2: 検索入力とサブミットボタンのグループ化 🌟 */
.input-submit-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* メニューとの間に隙間 */
}

.area-form input {
    /* inputを input-submit-group の子要素にすることでセレクタを変更 */
    flex-grow: 1;
    padding: 15px;
    font-size: 20px;
    border: 1px solid #007bff;
    border-radius: 4px 0 0 4px; /* サブミットボタンに接続 */
    margin-right: 0; /* 次の要素と接続するためマージンを解除 */
}



.input-submit-group .search-submit-button {
    /* 🌟 修正点3: ボタンの装飾をリセットし、画像サイズを調整 🌟 */
    padding: 7px 15px; /* パディングを調整してボタンの高さを制御 */
    background-color: #007bff; /* 背景色は維持し、画像に影響が出ないように */
    border: 1px solid #007bff;
    border-left: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    
    /* ボタンのテキスト（今回は画像）を中央に */
    display: flex;
    align-items: center;
    justify-content: center;
    
    height: 55px; 
    transition: background-color 0.2s;
}

/* 🌟 修正点4: ボタン内の画像スタイル 🌟 */
.input-submit-group .search-submit-button img{
    width: 40px;
    height: 40px;
    /* 画像を置いた際に上下左右のパディングが均等になるように調整 */
}
.input-submit-group .submit-button:hover {
    background-color: #0056b3;
}

/* 🌟 修正点3: メニュー群を右寄せ 🌟 */
.area-menu-links {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    gap: 15px;
    margin-top: 5px; /* 上のフォームとの間隔 */
width: 90%;
}
.area-menu-links a {
    text-decoration: none;
    color: #005192;
    white-space: nowrap; 
}

@media screen and (max-width: 780px) {
.area-menu-links {
    display: block;
width: 100%;
}
}
/* -------------------------------------- */
/* Block 2: 画面いっぱいの水色背景 */
/* -------------------------------------- */
.main-block-two {
    /* 🌟 画面いっぱいの水色背景 🌟 */
    width: 100%;
    background-color: #d4e6ef; 
    background-image: url(../images/logo_bg.png);
    padding: 10px 0; /* 上下のパディングはここで調整 */
    background-repeat: no-repeat;
    background-position: right;
	}	}

/* Block 2 内部のコンテンツラッパー (幅1200pxに制限) */
.main-block-two .inner-wrapper {
    /* 🌟 修正点1: 配置を縦方向に変更 🌟 */
    display: flex;
    flex-direction: column; /* これでバナーエリアとメニューが縦に並ぶ */
    
    /* justify-content: space-between; は不要に */
    align-items: flex-start; /* 左寄せに戻す（横方向の基準） */
    padding: 20px;
    /* content-wrapperはmargin: 0 auto; で中央寄せされています */
}

.main-block-two_title{
font-size: 1.5em;
    display: block;
    width: 100%;
    margin: 15px auto;
    font-weight: bold;
    color: #000;
}
/* バナー2列 */
.banner-area {
    display: flex;
    gap: 20px;
    /* 🌟 修正点2: 幅を100%に広げ、inner-wrapperの幅いっぱい使う 🌟 */
    width: 100%; 
    margin-bottom: 20px; /* メニューとの間に隙間 */
}

.banner-item {
flex-grow: 1;
    height: auto;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 15px;
	width:48%;
}

.banner-item a{
text-decoration:none;
}

.item_title{
display: inline-block;
    text-align: left;
    font-size: 1.8em;
    font-weight: bold;
    margin-top: 0px;
    color: #000;
    margin-right: 1em;
}

@media screen and (max-width: 980px) {
.item_title{
    font-size: 1.1em;
}
.item_title_sub{
	    font-size: 0.7em;
}
}

@media screen and (max-width: 780px) {
.banner-area {
    gap: 10px;
}
.banner-item {
flex-grow: 1;
    border: 0px solid #ccc;
    border-radius: 0px;
}
.item_title{
    font-size: 3.2vw;
}
}


.item_title_sub{
    display: inline-block;
    /* text-align: center; */
    border-radius: 29px;
    border: 0px solid #9f9f9f;
    margin: 0 0 0 auto;
    padding: 2px 27px;
    color: #fff;
    background-color: #000000;
}


.banaArea {
  /* 切り抜きたいサイズを設定 */
    width: 96%;
    height: 300px;
    overflow: hidden;
    position: relative;
    margin: 10px auto;
}
@media screen and (max-width: 980px) {
.banaArea {
  /* 切り抜きたいサイズを設定 */
    height: 220px;

}
}
@media screen and (max-width: 680px) {
.banaArea {
  /* 切り抜きたいサイズを設定 */
    height: 100px;

}
}
.banaArea img {
  width: 100%;
  height: auto; 
  position: absolute;
  top: 0; /* 変更点：上端に固定 */
  left: 0;
  /* transformは不要 */
}


#contact {
    /* 横幅いっぱいの濃い青背景 */
    background-color: #005192; 
    color: white; 
    padding: 40px 0;
    background-image: url(../images/logo_bg.png);
    background-repeat: no-repeat;
    background-position: top left;

}

.contact-inner {
    /* メインコンテンツの幅に合わせ中央寄せ */
    max-width: 1300px; 
    margin: 0 auto;
    padding: 0 0px; 
    
    /* 70%と30%の2カラムレイアウト */
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
@media screen and (max-width: 980px) {
#contact {
    padding: 10px 0;
}

.contact-inner {
    display: block;
}
}

.news-list {
    flex-basis: 70%; /* 70%幅 */
}


.news-list h2 {
    border-bottom: 0px solid white;
    padding-bottom: 5px;
}

.news_area{
    background-color: white;
    padding: 15px 20px; 
    border-radius: 5px; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
height: 20em;    
    padding-top: 15px; 
overflow-y: auto;
}
.important-news{
	margin:.5em auto 1em;
	border:1px solid #e0f2f9;
	padding:1em;
    background: #e0f2f9	
}
/* 新着情報リスト (ul.news-items) - 白背景化 */
.news-items {
    border-radius: 5px; 
	padding:0;
}


.news-items li {
    display: flex;
    margin-bottom: 10px;
    padding-bottom: 5px;
    /* ドット線の色をグレーに戻す */
    border-bottom: 1px dotted #ccc; 
    font-size: 0.95em;
    color: #333; /* 文字色を濃いグレーに */
}

@media screen and (max-width: 780px) {
.news-items li {
    display: block;
    margin-bottom: 10px;
    padding-bottom: 5px;
    /* ドット線の色をグレーに戻す */
    border-bottom: 1px dotted #ccc; 
    font-size: 0.95em;
    color: #333; /* 文字色を濃いグレーに */
}
}

.news-date {
    flex-shrink: 0;
    margin-right: 15px;
    font-weight: bold;
    /* 日付の色を濃い色にする */
    color: #005192; 
}

.news-items a {
    /* リンクの色を濃い色にする */
    color: #333;
    text-decoration: none;
}

.news-items a:hover {
    text-decoration: underline;
}

.news-archive-link {
    text-align: right;
    margin-top: 20px;
    font-weight: bold;
}


.news-archive-link a{
    text-decoration: none;
    color: #005192;
    font-size: 16px;
    display: inline-block;
    border: 1px solid #005192;
    padding: .5em 1em;
    border-radius: 30px;
    background: #fff;
}

/* 30%幅のサイドバーバナー */
.sidebar-banners {
    flex-basis: 30%; /* 30%幅 */
    display: flex;
    flex-direction: column; 
    gap: 15px;
	padding-top:17px;
}

.sidebar-banner {
    display: block;
    padding: 20px;
    border-radius: 5px;
    color: #333;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s;
}

.sidebar-banner:hover {
    opacity: 0.9;
}

/* バナーごとのスタイル（デモ用） */
.banner-c {
    background-color: #f0f8ff; 
}
.banner-d {
    background-color: #fffacd; 
}



/* 右寄せメニュー */
.side-menu-container {
    /* 🌟 修正点3: 右寄せの核となる設定 🌟 */
    width: auto; /* 幅制限を解除 */
    margin-left: auto; /* これで残りのスペースを使って右端に寄せる */
    padding-top: 0px;
	text-align: right;
}

.side-menu-item {
text-decoration: none;
    color: #fff;
    font-size: 16px;
    display: inline-block;
    /* border: 2px solid #005192; */
    padding: .2em 1em;
    border-radius: 30px;
    background-color: #005192;
}


/* -------------------------------------- */
/* 5. フッター */
/* -------------------------------------- */
.site-footer {
    padding: 0; /* パディングをラッパーに移す */
    background-color: #333;
    color: white;
}

/* フッターのコンテンツを中央寄せ（max-width: 1200px）にするためのラッパー */
.footer-wrapper {
    /* content-wrapperはmax-width: 1200px; margin: 0 auto; が既に適用されている前提 */
    padding: 20px; /* 上下にパディングを追加 */
}


/* -------------------------------------- */
/* 1. 左右分割の親 (.footer-top-row) */
/* -------------------------------------- */
.footer-top-row {
    display: flex;
    /* align-items: stretch; がデフォルトなので、自動的に高さが揃う */
    width: 100%;
    padding: 0px 0;
    /* Flexアイテムの間にスペースを空ける場合は justify-content: space-between; */
    justify-content: space-between;
}
@media screen and (max-width: 980px) {
.footer-top-row {
    display: block;
    /* align-items: stretch; がデフォルトなので、自動的に高さが揃う */
    width: 100%;
    padding: 0px 0;
    /* Flexアイテムの間にスペースを空ける場合は justify-content: space-between; */
    justify-content: space-between;
}
}
.footer-left {
    flex-grow: 1; /* 左ブロックに柔軟な幅を与える */
    padding-right: 30px; 
}

/* -------------------------------------- */
/* 2. 右側コンテナ (.footer-right-container) - 上下寄せの土台 */
/* -------------------------------------- */
.footer-right-container {
    /* 右側もFlexアイテムだが、高さは左ブロックに合わせて自動的に伸びる */
    flex-shrink: 0; /* 幅が縮まないように固定 */

    /* 🌟 ここが重要: 内部で上下に分割するために縦Flexにする 🌟 */
    display: flex;
    flex-direction: column; 
}

/* -------------------------------------- */
/* 3. コピーライト (.footer-copyright) - 下寄せの実現 */
/* -------------------------------------- */
.footer-copyright {
    /* 🌟 最重要: 上部のコンテンツ (ナビ) の下にスペースをすべて押しやる 🌟 */
    margin-top: auto;
    
    padding-top: 10px; 
    text-align: right; /* 右端揃え */
    /* 必要に応じて border-top: 1px solid #eee; */
}




/* 🌟 修正点2: ロゴと住所を横並びにするグループ 🌟 */
.logo-address-group {
    display: block;
    align-items: center; /* 垂直方向中央寄せ */
    gap: 20px; /* ロゴと住所の間隔 */
}

.logo-mark {
    font-size: 18px;
    font-weight: bold;
    /* display: block; は Flex item になったため不要。削除 */
    margin: 0; /* 不要なマージンをリセット */
    white-space: nowrap; /* ロゴマークが折り返さないように */
}

@media screen and (max-width: 780px) {
.logo-mark img{
width:100%;
}
}


.address {
    font-size: 14px;
    margin: 0;
}

/* 右側: メニュー4つ */
.footer-right-nav {
    display: flex;
    gap: 20px; /* メニュー間のスペース */
    font-size: 14px;
}

.footer-right-nav a {
    color: white;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-right-nav a:hover {
    color: #007bff;
}

/* 🌟 中間行: 区切り線 🌟 */
.footer-divider {
    border: 0;
    border-top: 1px solid #555;
    margin: 15px 0;
}

/* 🌟 ボトム行: コピーライト（中央寄せ） 🌟 */
.footer-bottom-row {
    text-align: center; /* 中央寄せ */
    padding-top: 10px;
}

.copyright {
    font-size: 12px;
    color: #aaa;
    margin: 0;
}
@media screen and (max-width: 780px) {
.footer-copyright { 
    text-align: left;
	line-height:1;
	font-size: .8em;
}
.footer-right-nav {
    display: block;
}
.footer-right-nav a {
    display: block;
}
}

/* -------------------------------------- */
/* 4. ページヘッダーブロック (幅100%のパンくず・タイトル) */
/* -------------------------------------- */
.heading-block {
    width: 100%;
    background-color: #007bff; 
    padding: 40px 0; 
    color: #000; 
    /* パンくずリストとの間隔は、パンくずブロックのmarginか、このpaddingで調整 */
background-image: url('../images/bar2.jpg'); /* 実際の画像URLに置き換える */
    background-position: right;
    background-size: cover;
margin-bottom: 2em;
}



/* 見出しの内容物 (幅1200pxに制限し中央寄せする) */
.inner-heading-wrapper {
    padding: 0 20px; 
}

/* --- ページメイン見出し --- */
.page-main-heading {
    font-size: 2em; 
    font-weight: bold;
    color: #000; 
    margin: 0; 
    padding-bottom: 0px;

}
@media screen and (max-width: 980px) {
.heading-block {
    padding: 20px 0; 
background-image: url('../images/bar2.jpg'); /* 実際の画像URLに置き換える */
    background-position: right;
    background-size: cover;
margin-bottom: 0em;
}
.page-main-heading {
    font-size: 1.2em; 


}
}
/* --- パンくずリスト --- */
/* 🌟 修正点1: パンくずリスト専用の幅100%ブロック (背景白) 🌟 */
.breadcrumb-block {
    width: 100%;
    background-color: white; 
    /* パンくずリスト本体の上下余白はここで確保 */
    padding: 10px 0; 
}

/* パンくずリストの内容物 (幅1200pxに制限し中央寄せする) */
.inner-breadcrumb-wrapper {
    /* .content-wrapper クラスが max-width: 1200px; margin: 0 auto; を持っている前提 */
    padding: 0 20px; 
}

/* --- パンくずリスト --- */
.breadcrumb {
    /* 🌟 背景色は親ブロックが担当するため、背景設定をリセット/調整 🌟 */
    background-color: transparent; 
    padding: 0; /* 親ブロックで確保したためpaddingをリセット */
    margin: 0; 
    font-size: 14px;
}
@media screen and (max-width: 780px) {
	.breadcrumb {
    font-size: .5em;
}
	}
.breadcrumb ol {
    display: flex;
    list-style: none; 
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    margin-right: 10px;
    color: #666; 
    display: flex;
    align-items: center;
}


.breadcrumb li a {
    color: #007bff; 
}

.breadcrumb li a:hover {
    text-decoration: underline;
}

.breadcrumb li[aria-current="page"] {
    color: #333;
    font-weight: bold;
}


/* -------------------------------------- */
/* 5. メインコンテンツ内のリンクブロック */
/* -------------------------------------- */

/* ブロック全体のコンテナ */
.main-blocks-container {
    /* content-wrapper (max-width: 1200px) の中に配置 */
    padding: 30px 20px;
    background-color: white;
}

/* 各行のラッパー */
.block-row {
    display: flex;
    flex-wrap: wrap; /* 画面が狭くなった場合に折り返す */
justify-content: flex-start;
    gap: 20px 1.5%; /* ブロック間の間隔 */
    margin-bottom: 20px;
}

/* 🌟 新規追加: 中央寄せ用の修飾クラス 🌟 */
.block-row.center-blocks {
    justify-content: center; /* 3の倍数じゃないブロックを中央に配置する */
}

/* 最後のブロック行の下マージンを調整したい場合 */
.main-blocks-container .block-row:last-child {
    margin-bottom: 0; /* 最後のブロック行のデフォルトの下マージンをリセット */
}

/* リンク付きの四角いブロック */
.square-block {
    width: calc( (100% - 4% ) / 3 );
    min-height: 250px;
    
background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    
    overflow: hidden; 
    transition: all 0.2s;
}

@media screen and (max-width: 1100px) {
.square-block {
    width: calc((100% - 4%) / 2);
	}
}	

@media screen and (max-width: 600px) {
.square-block {
    width: calc((100% - 4%) / 1);
	}
}	
.square-block:hover {
    /* background-color: #e0e0e0; */
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 🌟 修正点2: ブロック内の画像 🌟 */
.block-image {
width: 90%;
    height: 190px;
    object-fit: cover;
    display: block;
    margin: 15px auto;
object-position: top;
}

.block-content-area {
/* 画像下の残りのスペース全体を占有 */
    flex-grow: 1; 
    display: flex;
    flex-direction: column; /* タイトルと説明文を縦並びにする */
    
    /* 🌟 修正1: justify-content を削除または flex-start に変更 🌟 */
    /* 説明文とタイトルエリアが上から順に詰まって配置される */
    justify-content: flex-start; 
    
    padding: 5px 20px 15px 20px;
}

/* 🌟 修正点3: タイトルと矢印のエリア 🌟 */
.block-text-area {
display: flex;
    justify-content: space-between; 
    align-items: center; 
    /* 説明文がすぐ下にくるように、下のマージンを調整 */
    margin-bottom: 5px; 
    padding: 0;
}

/* 🌟 修正点4: ブロックのタイトルテキスト 🌟 */
.block-title-text {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    white-space: normal; /* タイトルが折り返さないように */
    overflow: visible; /* はみ出した部分は隠す */
    /* text-overflow: ellipsis;*/ /* ...で表示 */
    flex-grow: 1; /* 矢印のスペースを確保しつつタイトルが広がる */
    margin-right: 10px; /* タイトルと矢印の間隔 */
max-height: 2.8em; /* フォントサイズ16pxで lineHeight 1.4 の場合の2行分の目安 */
    line-height: 1.4; /* 行高さを明示的に指定 */
	width:95%;
}

/* 🌟 修正点5: 矢印アイコン 🌟 */
.block-arrow {
    /* 矢印アイコンのスタイル調整 */
    font-size: 0; /* 元の → を非表示にする */
    position: relative; /* 擬似要素の基準にする */
    
    display: flex; /* 中央寄せのためにFlexboxを使用 */
    justify-content: center;
    align-items: center;
    
    /* 🌟 角丸四角形の背景 🌟 */
    width: 28px; /* 四角形の幅 */
    height: 28px; /* 四角形の高さ */
    background-color: #0053ad; /* 背景色 */
    border-radius: 4px; /* 角丸の半径 */
   
    transition: background-color 0.2s; /* ホバーエフェクト */
}
/* 🌟 修正点4: 説明テキストのスタイル 🌟 */
.block-description {
    font-size: .9em; /* 小さめのフォントサイズ */
    color: #666;
    line-height: 1.4;
    margin: 0;
    /* 重要な点: Flexboxの特性により、テキストの行数に関わらず、
       .block-content-area が親 (.square-block) の残りの高さを占有し、
       .block-row の align-items: stretch (デフォルト) によって、
       横のブロックと高さが揃います。 */
flex-grow: 1;
}
/* 🌟 矢印がホバーされた時の背景色 🌟 */
.square-block:hover .block-arrow {
    background-color: #0053ad;
}

/* 🌟 「くの字」の矢印をCSSで作成 🌟 */
.block-arrow::after {
    content: ''; /* 擬似要素には content が必要 */
    display: block;
    
    /* 「くの字」の形状 (borderで作成) */
    width: 8px; /* 矢印の幅 */
    height: 8px; /* 矢印の高さ */
    border-top: 2px solid white; /* 上の線 */
    border-right: 2px solid white; /* 右の線 */
    
    transform: rotate(45deg); /* 45度回転させて「くの字」にする */
    /* 矢印を四角形の中央に微調整する場合 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 行の区切り線 */
.block-divider {
    /* 線のスタイルは削除し、高さを設定 */
    border: none;
    
    /* 🌟 要件1: 高さ30px 🌟 */
    height: 100px; 
    
    /* 🌟 要件2: 横幅画面いっぱいにするための調整 🌟 */
    width: 100vw; /* ビューポートの幅いっぱい */
    margin-left: calc(50% - 50vw); /* content-wrapperの中央から画面左端まで戻す計算 */
    margin-right: calc(50% - 50vw); /* content-wrapperの中央から画面右端まで戻す計算 */
    
    /* 🌟 要件3: 1段目のブロックに10px重なるように配置 🌟 */
    /* 上の要素のmargin-bottom (20px) + hrの高さ (30px) - 重なり (10px) = 40px */
    margin-top: -60px; 
    
    margin-bottom: 40px; /* hrの下の要素との間隔（例として40pxを維持）*/

background-image: url('../images/bar1.jpg'); /* 実際の画像URLに置き換える */
    background-size: cover; /* 背景画像を要素いっぱいに広げる */
    background-position: center; /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
	
    /* デバッグとデザインのための背景色（例としてグレー） */
    background-color: #ccc; 
    
    /* 既存の dashed border のスタイルを継承しないようにリセット */
    border-top: none; 
}


/* -------------------------------------- */
/* 5. メインコンテンツ内のリンクブロック */
/* -------------------------------------- */

/* 🌟 新規追加: 左画像・右テキストブロックのスタイル 🌟 */
.left-image-right-text-block {
    display: flex;
    align-items: center; /* 垂直方向中央寄せ */
    justify-content: space-between;
    
    padding: 30px 20px;
    margin-bottom: 30px; /* 下のブロックとの間隔 */
    
    background-color: #f8f8f8; /* 背景色 */
    border: 1px solid #ddd;
    border-radius: 8px;
    
    gap: 30px; /* 画像とテキストの間隔 */
}

/* 左側エリア (画像) */
.left-image-area {
    /* 画面幅の約40%を画像に割り当てる */
    flex: 0 0 40%; 
    max-width: 400px;
    overflow: hidden; 
    border-radius: 4px;
}

.feature-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 右側エリア (テキスト) */
.right-text-area {
    /* 残りのスペース (約60%) をテキストに割り当てる */
    flex: 1 1 60%;
    padding: 10px 0;
}

.feature-title {
font-size: 1.5em;
    color: #0053ad;
    margin-top: 0;
    margin-bottom: 15px;
    /* border-bottom: 2px solid #007bff; */
    padding-bottom: 5px;
}

.feature-text {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
}

.feature-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0053ad;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s;
    font-weight: bold;
}

.feature-button:hover {
    background-color: #0056b3;
}

/* --- レスポンシブ対応 (例: 画面幅600px以下で縦並びにする) --- */
@media (max-width: 600px) {
    .left-image-right-text-block {
        flex-direction: column; /* 縦並びにする */
        gap: 20px;
    }

    .left-image-area,
    .right-text-area {
        flex: 1 1 100%; /* 幅を100%にする */
        max-width: 100%;
    }
}


/* -------------------------------------- */
/* 6. セクション区切り線と明朝体タイトル */
/* -------------------------------------- */

.section-separator {
    display: flex;
    align-items: center; /* タイトルと線を垂直方向で揃える */
    gap: 15px; /* タイトルと線、または線と線の間隔 */
    margin: 60px 0 30px 0; /* 上下の余白 */
    padding: 0 20px; /* content-wrapperのパディングに合わせる */
}

/* 🌟 明朝体タイトル 🌟 */
.separator-title {
    font-size: 2em;
    color: #333;
    /* 🌟 明朝体（serif）のフォントを指定 🌟 */
    font-family: 'serif', 'Hiragino Mincho ProN', 'MS Mincho', serif;
    font-weight: bold;
    margin: 1em 0 1em;
    /* タイトルが線に影響されないように、固定で縮まないようにする */
    flex-shrink: 0;
}

/* 🌟 タイトル横の線 🌟 */
.separator-line {
    /* 残りのスペースをすべて線が埋めるようにする */
    flex-grow: 1; 
    height: 1px; /* 線の太さ */
    background-color: #333; /* 線の色 */
    
    /* 左右に線を引きたい場合は、この要素を2つ配置し、左右の線にすれば実現できます */
}

/* -------------------------------------- */
/* 7. 横並びメニューボタン */
/* -------------------------------------- */

.horizontal-menu-buttons {
    display: flex;
    justify-content: center; /* 中央に寄せる */
    gap: 15px; /* ボタン間の隙間 */
    margin: 50px 0; /* 上下の余白 */
    padding: 0 20px; /* content-wrapperのパディングに合わせる */
}

.menu-button {
    /* Flexアイテムとして、利用可能なスペースを均等に分割 */
flex: 1 1 0;
    max-width: 300px; /* ボタンの最大幅を制限 (任意) */
    
    /* デザイン */
    padding: 12px 20px;
    background-color: #0053ad;
    color: #fff;
    border: 1px solid #ccc;
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap; /* ボタン内のテキストが折り返さないように */
    transition: all 0.2s;
}
@media screen and (max-width: 780px) {

.horizontal-menu-buttons {
    display: flex;
    justify-content: center; /* 中央に寄せる */
    gap: 5px; /* ボタン間の隙間 */
    margin: 50px 0; /* 上下の余白 */
    padding: 0 20px; /* content-wrapperのパディングに合わせる */
}

.menu-button {
    /* Flexアイテムとして、利用可能なスペースを均等に分割 */
flex: 1 1 0;
    max-width: 300px; /* ボタンの最大幅を制限 (任意) */
    
    /* デザイン */
    padding: 12px 15px;
    background-color: #0053ad;
    color: #fff;
    border: 1px solid #ccc;
    text-decoration: none;
    text-align: center;
    border-radius: 10px;
    font-size: 1em;
    font-weight: normal;
}
}
.menu-button:hover {
    background-color: #ddd;
    border-color: #007bff;
    color: #007bff;
}

/* アクティブなボタンのスタイル */
.menu-button.active {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.menu-button.active:hover {
    background-color: #0056b3;
}



/* -------------------------------------- */
/* 8. 本文エリアの構造 (見出しとメニュー) */
/* -------------------------------------- */
.article-heading {
    /* 大見出し */
    font-size: 32px;
    font-weight: bold;
color: #0053ad;
    margin: 20px 0px;
    padding-bottom: 5px;
    border-bottom: 0px solid #007bff; /* 区切り線 */
}

.sub-heading-container {
    /* 小見出しとメニューを横並びにする Flexbox コンテナ */
    display: flex;
    justify-content: flex-start; /* 両端寄せ */
    align-items: flex-end; /* 垂直方向を下揃え */
    
    margin: 50px 20px 20px 20px;
    padding-bottom: 5px;
    border-bottom: 0px solid #ccc;
}

.sub-heading {
    /* 小見出し */
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    margin: 0 1em 0 0 ;
    flex-shrink: 0; /* 縮小させない */
	background-color:#0053ad;
	padding:.5em 1em;
}
@media screen and (max-width: 780px) {
.article-heading {
    /* 大見出し */
    font-size: 1.2em;
    margin: 1em 0px;
}

.sub-heading-container {
    /* 小見出しとメニューを横並びにする Flexbox コンテナ */
    display: block;
    margin: 50px 0px 20px 0px;

}
.sub-heading {
    /* 小見出し */
    font-size: 1em;
    margin: 0 ;
    flex-shrink: 0; /* 縮小させない */
	background-color:#0053ad;
	padding:.5em;
	margin: .5em 0;
}

}
/* 横並びメニュー (2つ) */
.sub-menu {
    display: flex;
    gap: 15px;
}

.sub-menu-item {
    /* メニューボタンのスタイル */
    display: block;
    padding: 8px 15px;
    background-color: #fff;
    color: #007bff;
    text-decoration: none;
    border: 2px solid #007bff;
    border-radius: 20px;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.2s;
}

.sub-menu-item.active {
    /* アクティブなメニュー */

}

.sub-menu-item:hover {
    background-color: #ddd;
}

/* 本文テキスト */
.article-head-text {
    font-size: 1.3em;
    line-height: 1.7;
    color: #444;
    margin: 15px 0px;
}
/* 本文テキスト */
.article-body-text {
    font-size: 1.1em;
    line-height: 1.7;
    color: #444;
    margin: 15px 0px;
}
@media screen and (max-width: 780px) {
.article-head-text {
    font-size: 1em;
    line-height: 1.7;
    color: #444;
    margin: 0px 0px;
}
/* 本文テキスト */
.article-body-text {
    font-size: 1em;
    line-height: 1.7;
    color: #444;
    margin: 1em 0px;
}
}
#contents p{
    font-size: 1.1em;
    line-height: 1.7;
    color: #444;
    margin: 15px 20px;	
}
/* -------------------------------------- */
/* 9. 標準テーブル (Table) 仕様 */
/* -------------------------------------- */

.standard-table {
    /* width: calc(100% - 40px); */ /* content-wrapperのパディング(左右20px)を考慮 */
    max-width: 100%;
    border-collapse: collapse; /* セルの境界線を一つにする */
    margin: 30px 20px; /* 上下の余白と左右のパディング調整 */
    font-size: 1em;
    table-layout: fixed; /* テーブル幅の固定 */
}

/* --- ヘッダー (thead) --- */
.standard-table thead th {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #0056b3;
}

/* --- ボディ (tbody) --- */
.standard-table tbody tr {
    transition: background-color 0.2s;
}

.standard-table tbody td {
    padding: 10px 15px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}

@media screen and (max-width: 780px) {
.teikyo tbody td {
    border-top: 0px solid #ddd;
    border-bottom: 0px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
.standard-table tbody td.head {
    background-color: #ddd; /* 薄い黄色 */
}	
}

/* 🌟 ホバーエフェクト (マウスオーバーで色を変える) 🌟 */
.standard-table tbody tr:hover {
    background-color: #f0f0ff;
    cursor: pointer;
}

/* 🌟 強調したい行 (例: 合計行) 🌟 */
.standard-table .highlight-row {
    background-color: #fffacd; /* 薄い黄色 */
    font-weight: bold;
    border-top: 2px solid #ffcc00;
}

/* 🌟 モバイル対応 (横スクロール) 🌟 */
/* テーブルが親要素からはみ出す場合に対応するため、テーブルを囲むラッパーが必要 */
/* HTML側に <div class="table-responsive">...</table> が必要ですが、今回はCSSのみ定義 */
.table-responsive {
    overflow-x: auto;
    width: 100%;
    margin-top: 20px;
}
/* このCSSを適用する場合、HTMLのtable全体をこのdivで囲んでください。 */


/* -------------------------------------- */
/* 10. アコーディオン仕様 */
/* -------------------------------------- */

/* --- 大アコーディオン (外枠) --- */
.main-accordion-area {
    margin: 40px 20px 0 20px;
}

.main-accordion-group {
    border: 0px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
    padding: 0;
}

.main-accordion-summary {
    display: block; /* Flexboxで制御するため */
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    background-color: #f0f0f0;
    cursor: pointer;
    position: relative;
    /* デフォルトのマーカーを非表示にし、カスタムの矢印を使用 */
    list-style: none;
}



/* カスタムの開閉矢印 */
.main-accordion-summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    font-size: 24px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s;
}

/* 開いている状態の矢印 */
.main-accordion-group[open] > .main-accordion-summary::after {
    content: '–';
}


/* --- 小アコーディオン (内側) --- */
.sub-accordion-list {
    padding: 10px 0;
    /* 🌟 修正点1: トランジション設定 🌟 */
    overflow: hidden; /* コンテンツがはみ出さないように */
    transition: height 0.4s ease-in-out, opacity 0.4s ease-in-out; 
    /* 初期状態の height/opacity はJSで制御するため、CSSでは設定しません */
}

/* -------------------------------------- */
/* 10. アコーディオン仕様 (リンク化調整) */
/* -------------------------------------- */

/* ... (大アコーディオンのスタイルは省略) ... */

/* --- 小アコーディオン (内側) --- */
/* 🌟 修正点1: sub-accordion-item をリンクとして調整 🌟 */
.sub-accordion-item.link-item { 
    display: block; /* <a>タグはデフォルトでinlineなので、blockに変更 */
    text-decoration: none; /* リンクの下線を削除 */
    color: inherit; /* テキストの色を親から継承 */
    border: 1px solid #ddd;
    margin: 10px;
    background-color: transparent; /* 背景透過 */
    transition: background-color 0.2s;
}

.sub-accordion-item.link-item:last-child {
}

/* ホバーエフェクト */
.sub-accordion-item.link-item:hover {
    background-color: #f5f5ff; /* ホバー時に薄い背景色を付ける */
}

/* sub-accordion-summary のスタイルは維持 (flexboxなど) */
.sub-accordion-summary {
    display: flex; 
    justify-content: flex-start;
    align-items: center;
    padding: 1em 1em 0px  2em;
    cursor: pointer; 
    list-style: none;
    font-size: 1.2em;
	font-weight:bold;
    color: #005192;
    position: relative;
}



/* 🌟 修正点2: メニューボタンをラップする要素を追加 🌟 */
.sub-menu-button-wrapper {
flex-shrink: 0;
    z-index: 10;
    font-size: .8em;
    font-weight: normal;
    border: 1px solid #005192;
    padding: .2em 1em;
    border-radius: 1em;
}

/* 🌟 修正点3: メニューボタンのクリック干渉防止 🌟 */
/* HTML側で onclick="event.stopPropagation()" の追加も推奨されますが、
   CSSで見た目を維持します。 */

/* ... (sub-accordion-content のスタイルは省略) ... */

/* 本文エリア (常に表示) */
.sub-accordion-content {
    /* padding: 10px 20px 15px 40px; <--- これを修正 */
    padding: 5px 20px 15px 40px; /* タイトルと本文の間のスペースを調整 */
    font-size: 14px;
    line-height: 1.6;
    background-color: #fff;
    /* 🌟 修正点3: open 属性による表示制御は不要 🌟 */
    background-image: url(../images/nlarrow.png);
background-position: right 80%;
    background-size: 80%;
    min-height: 5em;
    background-repeat: no-repeat;
	
}

.sub-accordion-content p,
.sub-accordion-content ul {
    margin-top: 5px;
    margin-bottom: 5px;
}

@media screen and (max-width: 780px) {
.main-accordion-area {
    margin: 0;
}
.main-accordion-summary {
    padding: 5px;

}
.sub-accordion-item.link-item { 
    display: block; /* <a>タグはデフォルトでinlineなので、blockに変更 */
    text-decoration: none; /* リンクの下線を削除 */
    color: inherit; /* テキストの色を親から継承 */
    margin: 0px;
	border-bottom: 1px solid #aaa;
    border-top: 0px solid #ddd;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;

}

.sub-accordion-summary {
    padding: 1em 0em;
    font-size: 1em;

}
.sub-accordion-content {
    /* padding: 10px 20px 15px 40px; <--- これを修正 */
    padding: 0px; /* タイトルと本文の間のスペースを調整 */
    font-size: .8em;
	
}
}

.contact a{
	text-decoration:none;
	/* color:#666;*/
}

.contact .btn{
margin:1em 1em 2em;
text-align:center;
display:block;
 font-size:1.2em;
}


.contact .btn a{
border:1px solid #aaa;
  box-shadow: 0 3px 0 #aaa;
padding:10px 15px;
border-radius:5px;
background:#fff;
width:50%;
min-width:300px;
display:block;
font-weight:bold;
color#000;
}


.contact .col2 .btn a{

width:90%;
}


.colouter{
	display:table;
	width:100%;
}
.colouter .inner{
    display: inline-block;
    margin-right: 1%;
}
.colouter .col2{
	width: 48.5%;
    border: 0px solid #ccc;
    vertical-align: top;
}
.colouter .col3{
width: 32%;
    border: 0px solid #ccc;
    vertical-align: top;
    margin-bottom: 1em;
}

.link h3,.contact h3{
   color: #fff;
	font-size:1.2em;
	padding:7px 10px;
	background-color:#1472ca;
	border-radius:8px;
	font-weight:bold;
	margin-bottom:.8em;
	margin-top:0em;
	display:block;
}

.link a{
   text-decoration:none;
}


.link h4{
   color: #1472ca;
	font-size:1em;
	padding:5px 10px;
	background-color:#fff;
	border-radius:8px;
	border:1px solid #1472ca;
	margin-bottom:1rem;
	font-weight:bold;

}

.link h4::first-letter{
   color: #1472ca;
	font-size:1em;
}


.link .colouter h5{
border-bottom:1px dotted #1472ca;
font-weight:bold;
background:#fff;
padding:3px;
margin-bottom:0.2em;
color:#1472ca;
font-size:1em;
}

.link h5:before{
font-family: "Font Awesome 5 Free"; /*←ココ！！！！！！！*/
  content: "\f192";
margin-right:0.5em;
}

.link h6{
border-bottom:0px dotted #1472ca;
font-weight:bold;
padding:3px;
margin-bottom:0.5em;
color:#000;
}

.link .colouter dt{
font-weight:normal;
margin-left:1em;
margin-bottom:.5em;
}

.link .colouter dd{
margin-left:2em;
margin-bottom:.5em;
}

.link .colouter dt a, .link .colouter dd a{
color:#666;
}

.link .colouter dt a:hover,.link .colouter dd a:hover{
background:#eee;
}

.link .colouter dt a:after{
font-family:"Font Awesome 5 Free";
content:"\f35d";
margin-left:0.5em;
		font-weight:bold;

}

.link dd a:after{
font-family:"Font Awesome 5 Free";
content:"\f35d";
margin-left:0.5em;
		font-weight:bold;

}

.social-sidebar {
  /* 画面に固定する */
  position: fixed; 
  /* 画面の右端に配置 */
  right: 0em; 
  /* 画面の上端からどれくらいの位置に配置するか (例: 中央より少し上) */
  bottom: 10%; 
  /* ボタンを縦に並べるためにFlexboxを使用 */
  display: flex;
  flex-direction: column; /* 縦方向の並びにする */
  gap: 0px; /* ボタン間の縦の隙間 */
  
  /* 最前面に表示 */
  z-index: 999; 
    background-color: #efefefad;
    padding: 0 10px 10px 0;
    border-radius: 10px 0 0 10px;
	text-align: center;
}
.social-sidebar img{
  width: 30px;
  height: 30px;	
}
.social-btn {
  /* ボタンの形とサイズ */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 5px; /* 角を丸くする */
  text-decoration: none;
  color: white; /* アイコンの色 */
  transition: opacity 0.3s;
}

/* アイコンのサイズ */
.social-btn i {
  font-size: 20px;
}

/* ホバー時の透明度調整 */
.social-btn:hover {
  opacity: 0.8;
}


/* --- 各SNSごとの色設定 --- */

.sitemap ul li{list-style: none;}
.sitemap ul li a{text-decoration: none;}

@media screen and (max-width:640px){
    .teikyo th,
    .teikyo td{
        display: block;
        text-align: left;
    }
	.movie iframe{
		width:100%;
	}
	#contents img{
		float: none;
	}
	input::placeholder {
 font-size: 10px;
}
}