.container {
    width: 95%; 
    margin: auto auto;
	overflow-wrap: break-word;
	/*実際はgridlayoutを使用 20230424*/
}

.header {
	margin: 0;
	padding: 0;
	background: #fff;
}

.header img {
	/* display: block; */
	width: 70%;
	margin: 0;
	padding: 0;
}

.main {
  /*position: absolute;*/
  top: 500px;
}

/* ここからの下がハンバーガーメニューに関するCSS */

nav {
  display: block;
  position: fixed;
  background-color: #ffffff;
  width: 220px;
  top: 0;
  left: -300px;
  bottom: 0;
  transition: all 0.5s;
  z-index: 3;
  opacity: 0;
  overflow-y: auto; /* 追加: nav自体にスクロールを許可 */
}

.open nav {
  left: 0;
  opacity: 1;
}

nav .inner {
	padding: 20px;
	overflow-y: auto; /* 変更: scrollからautoへ */
  max-height: 100vh; /* 追加: 高さ制限を設定 */
}

nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav .inner ul li {
  margin: 0;
  border-bottom: 1px solid #333;
}

nav .inner ul li a {
  display: block;
  /*color: #333;*/
  color: #0095d9;
  font-size: 14px;
  padding: 1rem;
  text-decoration: none;
  transition-duration: 0.2s;
}

nav .inner ul li a:hover {
  background: #e4e4e4;
}

.toggle-btn {
  display: block;
  position: fixed;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  z-index: 3;
  cursor: pointer;
}

.toggle-btn span {
	position: absolute;
	display: block;
	left: 0;
	width: 30px;
	height: 2px;
	/*background-color: #333;*/
	background-color: #0095d9;
	transition: all 0.5s;
	border-radius: 4px;
}

.toggle-btn span:nth-child(1) {
  top: 0; /* 1本目の線を親要素の最上部に配置 */
}
.toggle-btn span:nth-child(2) {
  top: 14px; /* 1本目の線の下端 + 12pxの間隔 (0 + 2px + 12px = 14px) */
}
.toggle-btn span:nth-child(3) {
  top: 28px; /* 2本目の線の下端 + 12pxの間隔 (14px + 2px + 12px = 28px) */
}

.open .toggle-btn span {
  background-color: #fff;
}


.open .toggle-btn span:nth-child(1) {
  /* 1本目の線が中央に移動し、回転するように調整 */
  transform: translateY(14px) rotate(-315deg);
}

.open .toggle-btn span:nth-child(2) {
  /* 2本目の線は非表示のまま */
  opacity: 0;
}

.open .toggle-btn span:nth-child(3) {
  /* 3本目の線が中央に移動し、回転するように調整 */
  transform: translateY(-14px) rotate(315deg);
}



#mask {
  display: none;
  transition: all 0.5s;
}

.open #mask {
  display: block;
  background: #000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  opacity: 0.8;
  z-index: 2;
  cursor: pointer;
}

/* ここまでの上がハンバーガーメニューに関するCSS */


.itiran{    
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
    list-style: none;
	/*margin: 0 auto;*/
	text-align: justyfy;
	padding: 0;
	margin-bottom: 10px;
}

.btn{
	width: calc(33.3333% - 5px);
	margin-bottom: 5px;
	padding: 10px;
    background-color: #87ceeb;
	/*color: #fff;*/
	color: #364e96;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
}

.btn02{
	width: calc(33.3333% - 5px);
	margin-bottom: 5px;
	padding: 10px;
    background-color: #87ceeb;
	color: #fff;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
}

.btn_sichouson{
	width: calc(33.3333% - 5px);
	margin-bottom: 5px;
	padding: 10px;
    background-color: #F5F5F5;
	color: #fff;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    font-size: 12px;
	/*border: 2px solid red;*/
	border: solid 3px #364e96;
}


.kensichouson {
	font-size:0.8rem;
}


h2 {
	/*display: inline-block; */
	/*text-align:center; */
    width: 220px;
    font-size: 15px;
    font-weight:bold;;
    color: #6C4747;
    margin: 0 0 15px 20px;
}

.h2mitouroku {
    width: 600px;
}


.nakamidasi{
	color: #364e96;/*文字色*/
	border: solid 3px #364e96;/*線色*/
	padding: 0.5em;/*文字周りの余白*/
	border-radius: 0.5em;/*角丸*/
	/*background-color: #87ceeb;*/
	text-align: center;
	margin: 20px auto 10px; 
	word-break: break-word; /* 長い単語を改行する */
}

.nakamidasikensakumoji{
	color: #364e96;/*文字色*/
	border: solid 3px #364e96;/*線色*/
	padding: 0.5em;/*文字周りの余白*/
	border-radius: 0.5em;/*角丸*/
	background-color: #87ceeb;
	text-align: center;
	margin: 20px auto 10px; 
	word-break: break-word; /* 長い単語を改行する */
}

.nakamidasimaster{
  color: #fff;/*文字色*/
  /*color: #364e96;文字色*/
  border: solid 3px #364e96;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  background-color: #87ceeb;
  text-align: center;
  margin: 20px auto 10px; 
}


.daikoumoku01 {
	  list-style: none;
}

.syoukoumoku {
	/*border-top: 1px solid black;*/
	line-height: 1.2;
	padding-top: 0.5em;
	margin-top: 10px;
	margin-bottom: 20px;
	list-style: none;
}

/* リンクでスペースを右に10pxあける */
.mgr-10 {
	margin-right: 10px;
}
.mgr-top-10 {
	margin-top: 10px;
}
.mgr-left-10 {
	padding-left: 0.25em;
}

hr.syoukugiri{
	border-bottom: 0.5px dotted black;
	margin-bottom: 0.25em;
}

/* 一覧表のtableの背景色を薄いグレーにする */
/* hyou01は,divタグでtableを囲み、tableとその上10pxの背景色を薄いグレーにする */
.hyou01 {
	background-color: #F5F5F5;
	/*padding-top: 10px;*/
	border-collapse: separate;
}

.hyou01 table {
	word-break: break-word;
	text-align: left;
	border: 2px solid #87ceeb /*20240103*/;
}

.hyou01 tr,td {
	padding: 3px 10px;/*上下3pxで左右10px*/
	border: 1px solid #87ceeb;
}

.hyou01center {
	text-align: center;
}

.hyou01naiyou {
	line-height: 1.5;
	text-align: left;
}

.hyou01moji01 {
	line-height:1.5;
	background-color:#87ceeb; 
	color:#ffffff;
}

.hyou01br01 {
	display: block;
	content: "";
	padding: 3px 0;
}

.hyou01br02 {
	display: block;
	content: "";
	padding: 15px 0;
}



.hyou01master {
	line-height: 1.5;
	text-align: left;
}



/* 修正：ichiranhyoukoumokuクラスが適用されているtr要素の最後に白い線を表示 */
.ichiranhyoukoumoku:last-child td {
    border-bottom: 7px solid #F5F5F5;
}

.ichiranhyoukoumoku {
	text-align: left;
	line-height: 1.5;
}

/* single.php　の画像部分を中央に表示 */
.img-single {
	text-align:center;
}

/* page_bottom.php　のページ表示 */
.page {
	margin-top: 50px;
	text-align:center;
}


.figure_bottom {
	display:flex;
	justify-content:center;
	flex-wrap: wrap; 
	gap:10px;/* 隙間を指定する */
}

.figure_bottom img {
  flex: 0 0 33.33%; /* 各要素の幅を33.33%に設定 */
  max-width: 33.33%; /* 各要素の最大幅を33.33%に設定 */
}

.bottom_top {
	margin-top: 40px;
}


/* 検索窓のCSS */
/*フォーム全体を中央へ*/
#form1{
	display: flex;
	justify-content: center; /*中央へ固定*/	
	height:70px;/*高さ*/	
	margin-top: 50px;
	margin-bottom: 50px;
}
/*入力フォーム*/
#sbox1{
	width:600px;/*横幅*/
	padding:0 15px;/*プレースホルダーの位置調整*/
	border-radius:4px 0 0 4px;/*左側の角を少し丸める*/		
	background:#eee;/*検背景カラー*/
	border:none;/*枠線を消す*/ 
	outline:0;/*クリック時の青い枠線消す*/	
}
/*検索ボタン*/
#sbtn1{
	width:70px;/*横幅*/ 
	border-radius:0 4px 4px 0;/*右側の角を少し丸める*/ 
	background:#7fbfff;/*背景カラー*/ 
	border:none;/*枠線を消す*/ 
	color:#fff;/*テキストカラー*/ 
	font-size:16px;/*フォントサイズ指定*/ 
	cursor: pointer;/*マウスを乗せると指差しポインターになる*/
}
/*検索ボタンマウスオーバー時*/
#sbtn1:hover {
	background: #92dbff;/*背景カラー変更*/
}
/* 検索窓のCSS以上 */


.footer {
	background:#eee;/*検背景カラー*/
}


.last {
	background:	#F5F5F5;/*検背景カラー*/
	/*margin-top:100px;*/
}

.itiran-item { /* bottomのメニュー */
  flex-basis: calc(50% - 10px); /* 2列にするために50%に */
  margin: 5px; /* マージンを調整 */
  box-sizing: border-box; /* ボックスサイズを調整 */
}

.btn_bottom {
	width: calc(33.3333% - 5px);
	margin-top: 10px;
	margin-bottom: 5px;
	padding: 10px;
    background-color: #fff;
    /*background-color: #87ceeb;*/
	/*color: #fff;*/
	color: #364e96;
    border-radius: 5px;
	border-color: #eee;
    text-align: center;
    box-sizing: border-box;
}


.itiran_bottom {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.itiran_bottom li {
    flex: 0 0 50%; /* 各アイテムがコンテナ幅の50%を占める */
    box-sizing: border-box;
    padding: 10px;
    text-align: center; /* 文字を中央揃えにする */
    margin: 0; /* 上下に20pxの余白を追加する */
}

.itiran_bottom a {
    text-decoration: none; /* アンダーラインを取り除く */
    color: #f7506; /* 少しだけ色を変える */
}


.info {
	line-height: 1.5;
}

.info_table {
    border: 1px solid gray;
    width: 70%;
	margin: 0 auto;
}

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

.gai_youtuber li {
  margin: 0;
  border-bottom: 1px solid #333;
}

.footer-menu {
    text-align: center;
    margin: 0 auto;
}

.footer-menu a {
    display: inline-block;
    padding: 10px;
    text-decoration: none;
    color: #000; /* 必要に応じて色を変更 */
    border-radius: 20px; /* 長円形にするための設定 */
    border: 2px solid #000; /* 必要に応じて色を変更 */
}

.nakamidasi_bottom {
    color: #364e96;/*文字色*/
    border: solid 3px #364e96;/*線色*/
    padding: 0.5em;/*文字周りの余白*/
    border-radius: 0.5em;/*角丸*/
    /*background-color: #87ceeb;*/
    text-align: center;
    margin: 20px auto 10px;
    width: 95%;  /* これを必要な幅に変更します */
    white-space: nowrap;  /* テキストの折り返しを防ぎます */
    word-break: break-word; /* 長い単語を改行する */
}

.table_toiawase {
    border: 1px solid; /* ボーダーの太さとスタイルを指定 */
    width: 100%; /* 幅を100%に設定 */
}

.toiawase01 {
    line-height: 1.5em;
}

/* セレクトメニューのスタイル */
select[name="subject"] {
    display: block;
    margin: 20px auto; /* 上下に20pxの余白を追加し、中央揃え */
    font-size: 1.5em; /* 文字の大きさを1.5倍 */
    padding: 10px; /* セレクトボックス内のテキストに余白を追加 */
    width: 80%; /* セレクトボックスの幅を80%に設定 */
}

/* 「報告・お問い合わせ」のスタイル */
h1 {
    font-size: 1.5em; /* 文字の大きさを1.5倍 */
    margin: 1em 0; /* 上下に1文字分の余白を追加 */
}

/* 報告の内容の上に1行分のスペースを追加 */
.contact_form p {
    margin-top: 20px;
}

/* テキストエリアのスタイル */
textarea[name="maintext"] {
    width: 90%; /* テキストエリアの幅を90%に設定 */
    height: 8em; /* テキストエリアの高さを8emに設定 */
    display: block;
    margin: 0 auto; /* テキストエリアを中央揃え */
}

/* 「入力内容確認」ボタンのスタイル */
.contact_submit {
    display: block;
    margin: 1em auto; /* テキストエリアと下の文字から1em分の余白を追加し、中央揃え */
    padding: 10px 20px; /* ボタン内の余白を調整 */
    background-color: #364e96; /* 背景色を#364e96に設定 */
    color: #fff; /* 文字色を白に設定 */
    border: none; /* ボーダーを削除 */
    cursor: pointer; /* ポインターを変更 */
    font-size: 1.2em; /* 文字の大きさを調整 */
}

.contact_info {
    margin-top: 30px;
	line-height: 1.5em;
}

/* Adjusting the input box */
input[name="ninsyou"] {
    padding-left: 0.8em; /* Move text box 3 characters to the right */
    height: 2.5em; /* Set the height to match the text height */
    box-sizing: border-box; /* Include padding in the element's total width and height */
}

/* 以下の２つは 404の時の対応　20251008 */
/* 中央寄せ用の汎用コンテナ */
.center-container {
    text-align: center;
}

/* 以下の２つは 404の時の対応　20251008 */
/* 以下の２つは 404の時の対応　20251008 */
/* 1. top01_jp.svg（上に、小さいヘッダー画像） */
.img-header {
    /* 🔴 画面（ビューポート）の高さの20%を上の余白に設定 */
    margin-top: 10vh; /* 👈 上の余白（高さ） */
    
    /* 必須: 1行を独占させ、上下の余白が機能するようにする */
    display: block; 
    
    /* 余白をリセットして左右の中央寄せを妨げないように */
    margin-left: auto;
    margin-right: auto;
    
    /* 💡 修正点: 画像の幅を設定する */
    /* 例えば、幅を200pxにする */
    /* width: 500px; /* <--- この行を追加/修正 */
	/* 20251025 width: 350px; */
	width: 60%;

    
    /* または、ビューポートの幅の30%にする */
    /* width: 30vw; */
}

/* 2. 404.png（下に、大きく中央の画像） */
.img-404 {
    /* 🔴 幅を親要素の50%に設定 */
    /* width: 60%; */
	/* 20251025 width: 350px; */
	/* 20251025 width: 350px; */
	width: 40%;
    
    /* 必須: 1行を独占させ、中央寄せが機能するようにする */
    display: block; 
    
    /* 中央寄せにする場合 (widthが50%なので機能する) */
    margin-left: auto;
    margin-right: auto;
    
    /* 高さが自動調整されるようにする (元の比率を保持) */
    height: auto; 
}

.message-404 {
    /* テキストを中央寄せにする */
    text-align: center;
    /* フォントサイズを調整したい場合はここに記述 */
    /* font-size: 1.1em; */ 
}

.back-to-top {
    /* フォントサイズを普通（1em）の1.5倍にする */
    font-size: 1.5em; 
    
    /* display: block;にして幅を持たせ、margin: autoで中央寄せする方法もありますが、*/
    /* 親の .center-container の text-align: center; を利用するため、不要です */
    
    /* リンクの下線を消す */
    text-decoration: none;
    
    /* 色を既存のリンク色に合わせるなど */
    /* color: #0095d9; */ 
}


/* ===== スマートフォン向けのスタイル ===== */
/* 画面の横幅が767px以下の場合に適用されます */
@media screen and (max-width: 767px) {

    /* 1. ヘッダー画像 (top01_jp.svg) */
    .img-header {
        /* 元の500pxから20%減らしたサイズ */
        /* width: 400px;*/
		width:  60%;
    }

    /* 2. 404画像 (404.png) */
    .img-404 {
        /* 元の30%から2倍にしたサイズ */
        width: 70%;
    }
}


/* ===== タブレット向けのスタイル ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .itiran_bottom li {
        flex: 0 0 16.66%; /* 6列 */
        margin: 0;
    }

    .nakamidasi_bottom {
        width: 70%;
        font-size: 1.2em;
    }

    .form-label, .form-input {
        flex: 0 0 50%;
    }
}


/* ===== PC向けのスタイル ===== */
@media screen and (min-width: 1025px) {
    .itiran_bottom li {
        flex: 0 0 20%; /* 5列 */
        margin: 0;
    }

    .nakamidasi_bottom {
        width: 60%;
        font-size: 1.5em;
    }

	.header img {
		width: 50%;
		margin: 0;
		padding: 0;
	}
}