/*全体の設定---------------------------------------------------*/
html,body {
	height: 100%;
}


#site-box { Width : 750px ; }

body {
	font-family: "游ゴシック","Meiryo","ヒラギノ角ゴ","ＭＳ Ｐゴシック", sans-serif;	/*フォント種類（ゴシック）*/
	font-size: /*フォントサイズ－設定はしていない－*/
	-webkit-text-size-adjust: none;
	background: #fff; /*背景色*/
	color: #444; /*文字色*/
	line-height: 2; /*行間*/
	border-top: 5px solid #FF0000;	/*上の線の幅、線種、色*/
	animation: opa1 0.3s 0.5s both;	/*0.5秒の間だけ非表示にし、その後0.3秒かけてフェードイン表示*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

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

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

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

/*top画像（video）タグ*/

#top-video {
  position: relative;
  width: 100%;
  height: auto; /* 画像の高さに合わせて調整してください */
  overflow: hidden;
}

#top-vide video {
    width: 140vh;
  object-fit: cover;
}

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

/*他*/
input {font-size: 10.rem;}
section + section {
	margin-top: 3rem;
}


/* ローディング画面 */
/* Loading Block */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #006acd; /* 濃い青 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
/* 中央に寄せるための設定 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner{
  /* margin: 100px auto; */
  width: 50px;
  height 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div{
  background-color: #fff;
  height: 40px;
  width: 6px;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infiniteease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2{
  -webkit-animation-deray: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3{
  -webkit-animation-deray: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4{
  -webkit-animation-deray: -0.9s;
  animation-delay: -0.9s;
}

.spinner ]
.rect5{
  -webkit-animation-deray: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay{
  0%,40%,100%{-webkit-transform: scaleY(0.4)}
  20%{-webkit-transform: scaleY(1.0)}
}

@keyframes sk-stretchdelay{
  0%,40%,100%{
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20%{
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


/* Hide Loading Block */
.loaded {
  opacity: 0;
  visibility: hidden;
}
 

/*雪のエフェクト---------------------------------------------------*/
.snow {
  /*雪の色*/
  color: snow;
  /*雪の大きさ*/
  font-size: 10px;
  /*初期位置*/
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる*/
  text-shadow:
  5vw   -200px 2px,
  10vw  -300px 3px,
  18vw  -400px 6px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 9px,
  63vw  -180px 3px,
  78vw  -550px 4px,
  86vw  -320px 2px,
  94vw  -170px 7px;
  /*雪アニメーション1*/
  animation: roll 5s linear infinite;
}
  /*2つめの雪アニメーション*/
.snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}

/*流れるイラスト---------------------------------------------------*/
/*スクロールコンテナ全体の設定*/
.scroll-container{
   height: 100px;
   /*スクロールバーは表示しない（アニメーションで動かすため）*/
   overflow: hidden;
   padding: 10px 0; /*上下の余白*/
   white-space: nowrap;   
}

/*画像リストの設定*/
.scroll-list{
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   /*リスト全体がコンテナからはみ出すように設定*/
   width: max-content;
   /*【重要】アニメーションの設定*/
   animation: scroll-left 20s linear infinite;
}

/*個々の画像アイテムの設定*/
.scroll-list li{
   /*画像が縮まないようにする*/
   flex-shrink: 0;
   /*アイテム間のスペース*/
   margin-right: 15px;
}

/*画像自体の設定*/
.scroll-list img{
   /*画像の高さと幅を設定*/
   height: 100px; /*.scroll-containerの高さより少し小さくする*/
   width: auto;
   /*画像のフィット方法（任意）*/
   object-fit: cover;
   /*角を丸くする（任意）*/
   border-radius: 8px;
   /*画像間のスペース確保のためのマージン（任意）*/
   vertical-align: middle;
}

/*アニメーションの定義*/
@keyframes scroll-left{
   /*アニメーション開始時（0%）*/
   0%{
      /*現在の位置（移動なし）*/
      transform: translateX(0);
   }
   /*アニメーション終了時(100%)*/
   100%{
      /*リスト全体の半分（複製した部分）の幅だけ左に移動させる*/
      /*これにより、途切れなくループして見える*/
      transform: translateX(-50%);
   }
}

/*ホバー時の停止設定（任意）*/
.scroll-container: hover .scroll-list{
   animation-play-state: paused;
}

/* PCの時のフォントサイズ */
@media (min-width: 600px) {
  .scroll-list li {
    font-size: 2em;
  }
}

/* アニメーション */
@keyframes marquee-left {
  100% {
    transform: translateX(-100%);
  }
}

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

/* マウスオン時に文字を明るく */
a:hover  {
    filter: brightness(1.15);	/*少しだけ明るくする*/
}

/* マウスオン時に画像を拡大 */
a:hover img {
    transform: scale(1.02); /* 画像を1.2倍に拡大 */
    transition: transform 0.2s ease-in-out; /* 拡大するアニメーションを追加 */
}


/*コンテナ（サイト全体を囲むブロック）---------------------------------------------------*/
#container {
	height: 100%;
	display: flex;	/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	max-width: 1500px;	/*サイトの最大幅。これ以上広がらない。*/
	margin: 0 auto;
}


/*コンテンツ（フッター関連「以外」を囲むブロック）---------------------------------------------------*/
#contents {
	flex: 1;
	padding: 0 0% 1px;	/*上、左右、下への余白。下の余白は、ここのbackgroundの画像読み込み分に、適当な余白をプラスして指定しています。*/
	background:  repeat-x center bottom / auto 40px;	/*下部の背景画像の読み込み。最後の40pxというのが画像の高さの指定部分です。*/
}


/*header（ロゴが入った最上段のブロック）---------------------------------------------------*/
/*ヘッダーブロック*/
header {
	padding: 5px 0;	/*上下、左右へのブロック内の余白*/
	position: relative;	/*文字サイズボタンや、言語ボタンを絶対配置する為に必用な指定*/
	min-height: 90px;	/*最低限の高さ*/
}

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

	/*ヘッダーブロック*/
	header {
		display: flex;			/*flexボックスを使う指定*/
		align-items: center;	/*垂直揃えの指定。天地中央に配置されるように。*/
		padding-right: 230px;	/*余白*/
	}
	
	}/*画面幅900px以上の追加指定ここまで*/


/*ロゴ*/
#logo {
	margin: 0;
	margin-bottom: 2px;	/*下に空けるスペース*/
	width: 150px;	/*幅*/
}

#logo2 {
	margin: 0;
	margin-bottom: 2px;	/*下に空けるスペース*/
	width: 150px;	/*幅*/
}

/*大きな端末用のロゴを非表示に*/
.pc-logo {
	display: none;
}


	@media screen and (max-width:770px) {
	
	/*ロゴ*/
	#logo {
		width: calc(100% - 220px);	/*ロゴの幅。*/
	}
	
	}
	

	/*画面幅770px以上の追加指定*/
	@media screen and (min-width:770px) {
	
	/*ロゴ*/
	#logo {
		margin-bottom: 0;
		margin-right: 3%;
		width: 500px;	/*幅*/
	}
	
	/*小さな端末用のロゴを非表示に*/
	.sh-logo {
		display: none;
	}
	
	/*大きな端末用のロゴを表示する*/
	.pc-logo {
		display: block;
	}

	}
	

/*ヘッダーの中央に配置するブロック*/
#header-center {
	display: none;	/*非表示にする*/
	text-align: center;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	
	/*ヘッダーの中央に配置するブロック*/
	#header-center {
		display: flex;				/*flexボックスを使う指定*/
		align-items: center;		/*垂直揃えの指定。天地中央に配置されるように。*/
		width: calc(100% - 100px);	/*pxの数値はロゴのwidth*/
	}
	#header-center * {
		margin: 3px;	
		
	}
	
	}/*画面幅900px以上の追加指定ここまで*/


/*トップ画像---------------------------------------------------*/
.responsive-img {
    width: 200vh;
    padding: 0;
}


/*トップ画像の切替（使用していないが、設定することで、TOP画像の切替が可能）---------------------------------------------------*/
.myChangeImage{
    position: relative;
    width: 140vh;
    border : 1px solid;

}

.myChangeImage img{
    position: absolute;
    top: 0;
    left: 0;
    animation: ChangeImage 10s infinite;
    opacity: 0;
}

@keyframes ChangeImage{
    0%{ opacity: 0;}
    10%{ opacity: 1;}
    20%{ opacity: 1;}
    30%{ opacity: 0;}
    100%{ opacity: 0;}
}

.myChangeImage img:nth-of-type(1) {
     animation-delay: 0s;
}
.myChangeImage img:nth-of-type(2) {
    animation-delay: 2s;
}
.myChangeImage img:nth-of-type(3) {
    animation-delay: 4s;
}
.myChangeImage img:nth-of-type(4) {
    animation-delay: 6s;
}
.myChangeImage img:nth-of-type(5) {
    animation-delay: 8s;
}


/*アニメーションコンテンツ部分---------------------------------------------------*/ 
/* レイアウトや見た目のスタイル */
/* ---------------------------- */

.multiple-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.multiple-item{
    width: 49%;
    margin-top: 20px;
}

.multiple-item:nth-child(-n+2){
    margin-top: 0;
}



/*インナー画像---------------------------------------------------*/
.img__inner {
   display: flex;
   gap: 8px;
   padding: 10px 0;
   max-width: 1000px;
   margin: 0 auto;
}

.img__card {
   width: 93.333%;
}

.img-item {
   width: 100%;
   height: auto;
   object-fit: cover; 
   border: 1px solid #111;
}


/*写真の横並び */---------------------------------------------------*/
div.parent_box {
  width: 10px;
  display: flex;
  align-items: center;
}

.flex {
  display: flex; /*横並び*/
}
.flex .image2 {
  width: 520px; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex .right2 {
  margin: 0 0 0 1px;
  padding: 0;
}
.flex .title {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 18px;
}
.flex .text {
  margin: 10px 0 0;
  padding: 0;
}


/*PDF挿入設定---------------------------------------------------*/
.iframe[src$=".pdf"]{
    width:100%;
    height:80vh;
}

/*メニューブロック設定---------------------------------------------------*/
#menubar a {display: block;text-decoration: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;font-family: "Font Awesome 5 Free";}
#menubar.d-n, #menubar_hdr.d-n, #menubar .ddmenu_parent ul {display: none;}
#menubar.d-b {display: block;}
#menubar_hdr.d-b {display: flex;}
#menubar {position: relative;z-index: 1;}

/*ドロップダウンメニューのリンクタグ*/
#menubar .ddmenu {
	cursor: default;	/*リンク要素のカーソルを矢印に変更しておく*/
}

/*ナビ（大きな端末用のメニューブロック設定）---------------------------------------------------*/
.p #menubar > nav > ul {
	display: flex;					
	justify-content: space-between;	
	margin: 0 auto;
}

/* ナビに対して位置指定を追加 */
.p #menubar {
    margin: 0;
    padding: 0;
}

/*メニュー単体での設定*/
.p #menubar li {
	text-align: center;	/*テキストをセンタリング*/
	flex: 1;			
	position: relative;	
}
.p #menubar a {
      font-size: 14px;
	padding: 5px;			/*メニュー内の余白*/
	background: #0066CC;	/*背景色*/
	color: #fff;			/*文字色*/
      height: 30px;
}

/*「大」の文字の選択時のメニューブロック*/
.f-large #menubar nav ul {
	flex-wrap: wrap;	/*メニューの折り返しを許可する*/
}

/*「大」の文字の選択時のメニュー１個あたり*/
.f-large #menubar nav > ul > li {
	flex: auto;
	width: 33%;	/*幅*/
}

@media (max-width: 768px) {
    /* スマートフォンやタブレット用のスタイル */
    #menubar {
        display: none; /* 例えば、画面幅が768px以下の時にメニューを非表示にする */
    }
}

@media (min-width: 769px) {
    /* デスクトップ用のスタイル */
    #menubar {
        display: block; /* 画面幅が769px以上の時にメニューを表示する */
    }
}


/*大きな端末用のドロップダウンメニュー---------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.p #menubar ul ul {
	position: absolute;z-index: 100;
	width: 100%;
}





/*小さな端末用の開閉ブロック---------------------------------------------------*/
/*メニューブロック設定*/
.s #menubar.d-b {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 100px 20px 20px;			/*ブロック内の余白。上、左右、下。*/
	background: rgba(0,0,0,0.9);		/*背景色。0,0,0は黒の事で0.9は色が90%出た状態。*/
	text-align: center;					/*内容をセンタリング*/
	animation: animation1 0.2s both;	/*animation.cssのanimation1を実行する0.2秒*/
}

/*メニュー単体あたりの設定*/
.s #menubar a {
	padding: 10px;		/*メニュー内の余白*/
	color: #fff;		/*文字色*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*大きな端末では非表示にしておく*/
	.p #menubar_hdr {display: none;}

/*３本バーを囲むブロック*/
.s #menubar_hdr {
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 35px; /*右からの配置場所指定*/
	top: 25px; /*上からの配置場所指定*/
	padding: 16px 14px; /*上下、左右への余白*/
	width: 30px; /*幅（３本バーが出ている場合の幅になります）*/
	height: 30px; /*高さ*/
	display: flex; /*flexボックスを使う指定*/
	flex-direction: column; /*子要素（３本バー）を縦並びにする*/
	justify-content: space-between; /*並びかたの種類の指定*/
	background: #191970; /*背景色*/
	color: #fff; /*文字色*/
	transform: scale(1.3); /*実寸の130%に。*/
}


/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s; /*アニメーションにかける時間。0.3秒。*/
	border-top: 2px solid #fff; /*線の幅、線種、色*/
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center; 
	width: 20px; /*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px); /*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px); /*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none; /*２本目は使わないので非表示にする*/
}



/*パンくずリスト---------------------------------------------------*/
.breadcrumb {
  margin: -15px;
  padding: -10px;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #555;/*>の色*/
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #808080;/*文字の色*/
}

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



/*着色マーカー---------------------------------------------------*/
.mark2 {
 background: linear-gradient(transparent 40%, #ffff00 150%);
}

.mark3 {
 background: linear-gradient(transparent 40%, rgba(255, 0, 0, 0.5) 150%);
}


.center {
  text-align: center;
}

.right {
  text-align: right;
}

.pic_frame{
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    font-size: 20px;
}


/*mainブロック設定---------------------------------------------------*/
/*mainブロックの設定*/
main {
	margin: 1rem 0;	/*ブロックの外側に空けるスペース*/
}

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

	/*2カラムで使う為の指定*/
	main.c2 {
		display: flex;	/*flexボックスを使う指定*/
		justify-content: space-between;	/*並びかたの種類の指定*/
	}
	
	/*2カラムの中にある.main要素*/
	main.c2 .main {
		width: calc(100% - 260px);	/*幅*/
		order: 1;
	}
	
	/*2カラムの中にある.sub要素*/
	main.c2 .sub {
		width: 230px;	/*幅*/
	}

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


/*mainブロック内のh2タグ*/
main h2 {
	margin: 0 0 1rem;		/*h2の外側にとるスペース。上、左右、下への順番。*/
	padding-left: 1rem;		/*左側に１文字分の余白を作る*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	background: #669CCC;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*h3タグ*/
main h3 {
	margin: 0 0 1rem;				/*h2の外側にとるスペース。上、左右、下への順番。*/
	letter-spacing: 0.1em;			/*文字間隔を少しだけ広くとる*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
}

/*h3の左側のアクセントライン*/
main h3::before {
	content: "";
	border-left: 6px solid #669ccc;		/*左側のアクセントラインの幅、線種、色*/
	padding-right: calc(1rem - 6px);	/*右側への余白。上の6pxの線幅を変更する場合は、ここの6pxも合わせて変更して下さい*/
}

/*h4タグ*/
main h4 {
	margin: 0 1rem 1rem;	/*h4の外側にとるスペース。上、左右、下への順番。*/
}

/*h5タグ*/
main h5 {
	font-size: 1.5em;
	margin: 0 1rem 0;	/*h4の外側にとるスペース。上、左右、下への順番。*/
}


/*pタグ*/
main p {
	margin: 0 1rem 2rem;	/*pの外側にとるスペース。上、左右、下への順番。*/
}

/*微調整*/
main p + p {
	margin-top: -1rem;	/*段落が続いた場合に、少し上に詰める。*/
}



/*box1設定---------------------------------------------------*/
/*ボックス全体の設定*/
.box1 {
	background: rgba(0,0,0,0.05);	/*背景色。0,0,0は黒の事で0.05は色が5%出た状態。*/
	padding: 10px;					/*ボックス内の余白*/
	border-radius: 5px;				/*角を丸くする指定*/
	margin-bottom: 1rem;			/*ボックスの下に空けるスペース*/
}

/*box1内で使った場合、下のマージンをなくす*/
.sub .box1 .submenu {
	margin-bottom: 0;
}



/*フッターのコンテンツ---------------------------------------------------*/
/*ブロック全体*/
#footer-contents {
	background: #00336;	/*背景色*/
	color: #fff;		/*文字色*/
	padding: 10px 1%;	/*上下、左右へのボックス内の余白*/
}
#footer-contents a {
	color: inherit;
}


	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	
	#footer-contents {
		display: flex;					/*flexボックスを使う指定*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		align-items: center;			/*垂直揃えの指定*/
	}
	


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


/*フッターメニュー設定---------------------------------------------------*/
/* フッター設定 */
footer {
    background: #003366;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 1rem;
    margin-top: auto; /* コンテンツが少ない場合にフッターを画面の下部に押し付ける */
}

/* フッター内のコンテンツ */
#footer-contents {
    display: flex;
    flex-wrap: wrap; /* コンテンツが画面幅に合わせて折り返す */
    justify-content: space-around;
    margin-bottom: 10px;
}

.footer-column {
    flex: 1;
    min-width: 20px;
    padding: 10px;
    box-sizing: border-box; /* パディングを含めた幅の計算 */
}

.footer-column h4 {
    margin-top: 0;
}

.footer-column p {
    margin: 5px 0;
}

.footer-image {
    max-width: 100%; /* 画像が親要素の幅に合わせてリサイズ */
    height: auto;    /* アスペクト比を維持しながら高さを自動調整 */
    display: block;
    margin-top: 10px; /* 画像とテキストの間にスペースを追加 */
}

/* フッターメニュー設定 */
#footermenu {
    background: #003366;
    padding: 5px;
    font-size: 0.8rem;
}

/* レスポンシブデザイン */
@media screen and (max-width: 600px) {
    #footer-contents {
        flex-direction: column; /* スマートフォンでは縦に並べる */
        align-items: center;
    }

    .footer-column {
        text-align: center;
        margin-bottom: 20px;
    }

    .social-icons {
        flex-direction: column;
    }
}

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

/*著作部分*/
footer .pr {display: block;}


/*.listブロック共通---------------------------------------------------*/
.list {
	position: relative;	/*子要素のアイコンを絶対配置する為の設定*/
}

.list a:hover {
  font-size: 1.02em;
  color: #808080;
}

/*ボックス内のアイコン*/
.list .list-icon {
	font-size: 10.5rem;		/*文字サイズ*/
	background: #0000cd;	/*背景色*/
	color: #fff;			/*文字色*/
	width: 50px;			/*幅*/
	line-height: 50px;		/*高さ*/
	border-radius: 100%;		/*角丸のサイズ*/
	text-align: center;		/*テキストをセンタリング*/
	position: absolute;		/*親のブロックのrelative（この場合は.list）に対して絶対配置する*/
	left: 50px;			/*listブロックに対して左からの配置場所の指定*/
	top: 50px;				/*listブロックに対して上からの配置場所の指定*/
}

/*figure画像*/
.list figure {
	margin-bottom: 2rem;	/*下に空けるスペース。２文字分。*/
}


/*３列タイプのボックス---------------------------------------------------*/
/*ボックス１個あたり*/
.list-grid .list {
        margin-bottom: 20px;  /* ボックス同士の上下間に空けるスペース */
	padding: 10px;			/*ボックス内の余白*/
	padding-left: 40px;   /* ボックス内の左側の余白を40pxに設定 */
	background: #fff;		/*背景色*/
	font-size:1.4em;	/*文字サイズ*/
	box-shadow: 10px 5px 20px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が10%出た状態。*/
	transform: translateX(5px);  /* ボックス全体を左に5px移動 */
}



/*ボックス内のfigure画像*/
.list-grid .list figure {
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

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

	/*listブロック全体を囲むブロック*/
	.list-grid {
		display: flex;		/*flexボックスを使う指定*/
		flex-wrap: wrap;	/*折り返す指定*/
	}

	/*単体のボックス設定*/
	.list-grid .list {
		width: 39%;			/*幅２列*/
		margin-left: 2%;	/*左側のマージン*/
		margin-right: 3%;	/*ボックス同士の余白*/
	}
	
	/*1カラムにしたい*/
	.list-grid.c1 .list {
		width: 100%;
		margin-right: 0;
	}
	/*dtとddを囲むブロック*/
	.list-grid.c1 .list dl {
		height: auto;
	}



	/*ボックス内のtextブロック*/
	.list-grid .list .text {
		flex: 1;
	}

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




/*テーブル（ta1）---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*/
	background: #555;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	border-top: 1px solid #999;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 2rem;		/*２文字分。*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #999;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 5px 5px;		/*上下、左右へのボックス内の余白**/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
}

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

		/*テーブル１行目に入った見出し部分（※caption）*/
		.ta1 caption {
			padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
		}

		/*th（左側）、td（右側）の共通設定*/
		.ta1 th, .ta1 td {
			padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
		}

		/*th（左側）のみの設定*/
		.ta1 th {
			width: 20%;		/*幅*/
		}

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


/*PAGE TOP---------------------------------------------------*/
html {
    scroll-behavior: auto;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color: #3293e7;
    }

}

/*その他---------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #0000cd !important;}
.color-theme, .color-theme a {color: #ff4242 !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 98%;display: block;}
.wl {width: 98%;display: block;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.large {font-size: 8em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.img {margin: 0 0 1rem;}
.block {display: block !important;}

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

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

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



/* 検察事務官の本音----------------------------------------------- */
html{
   scroll-behavior: smooth;
}

.btn-group{
   display: flex;
   flex-direction: column; /* 最初から縦並びに設定 */
   align-items: center;
   gap: 10px; /* ボタンの間隔 */
   justify-content: center; /* 中央揃え */
   width: 100%;
}

.btn{
    display: block;
    text-align: center;
    position: relative;
    padding: 10px 25px;
    background: #7474BF;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #348AC7, #7474BF);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #348AC7, #7474BF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    border: 3px solid #eee;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
    text-decoration: none;
}

/* PCサイズ（例えば769px以上）では横並びにしたい場合 */
@media(min-width: 769px){
  .btn-group{
    flex-direction: row; /* 横並びに戻す */
    justify-content: center;
  }
  .btn{
    width: 200px; /* PCでは幅を固定 */
  }
} 

.btn:hover::before{
   width: 100%;	
}

/* 画像全体のコンテナ設定 */
.image-grid{
   display: grid;
   gap: 10px; /* 画像同士の間隔（お好みで調整） */
   grid-template-columns: 1fr; /* スマホでは1列（1枚ずつ縦並び） */
}

/* 画像のサイズ調整 */
.grid-item img{
   width: auto;
   height: auto;
   display: block;
}

/* PC・タブレット向けの設定（画面幅が768px以上の場合） */
@media（min-width: 768px）{
   .image-grid{
     grid-template-columns: 1fr 1fr; /* PCでは2列ずつ横並び */
   }
}


/*検察事務官の仕事 -------------------------------------------------------*/
    .gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0;
        list-style: none;
    }

/*サムネイル画像*/
.thumbnail{
   width: 390px;
   height: 225px;
   object-fit: cover; /*画像が歪まないように調整*/
   cursor: pointer;
   transition: opacity 0.3s;
   border: 1px solid #ccc;
   border-radius: 10px; /* 写真の丸み */
   box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
   flex: 0 0 calc(33.33% - 20px);
   margin: 10px;
   position: relative;
}

.thumbnail_air{
    content: "";
    display: block;
    width: 390px;  /* .boxに指定したwidthと同じ幅を指定する */
    margin: 10px;
    height: 0;
}

.thumbnail:hover{
   opacity: 0.8;
}

    .g_photo {
        flex: 0 0 calc(33.33% - 20px);
        margin: 10px;
        position: relative;
    }

    .g_photo img {
        width: 100%;
        height: auto;
 	  border-radius: 10px; /* 写真の丸み */

    }

    .g_text-space {
	text-align: center;
	font-size: 20px;
        height: 45px; /* テキストスペースの高さ */
    }

    /* 5枚の写真の場合のスタイル */
    @media (min-width: 900px) and (max-width: 900px) {
        .g_photo:nth-child(4),
        .g_photo:nth-child(5) {
            margin-top: 20px; /* 2段目の写真の上のマージン */
        }
    }

    /* 6枚の写真の場合のスタイル */
    @media (min-width: 900px) {
        .g_photo:nth-child(4),
        .g_photo:nth-child(5),
        .g_photo:nth-child(6) {
            margin-top: 20px; /* 2段目の写真の上のマージン */
        }
    }

	/*スマートフォン用の文字のサイズ変更 */
	@media (max-width: 600px) {
	    .g_text-space {
	        font-size: 14px; /* スマートフォンでの文字サイズ */
	        height: auto; /* 高さを自動にして文字が収まるようにする */
	    }
	}

/*----------------------
  モーダル全体のスタイル
  ----------------------*/
.modal{
   display: none; /*初期状態では非表示*/
   position: fixed; /*画面に固定*/
   z-index: 2000; /*他の要素より手前に表示*/
   left: 0;
   top: 0;
   width: 100%; /*全幅*/
   height: 100%; /*全高*/
   background-color: rgba(0,0,0,0.9); /*半透明の黒い背景（オーバーレイ）*/
   overflow: auto;
}

/*----------------------------
  モーダルコンテンツ（画像とキャプション）
  ----------------------------*/
.modal-content{
   margin: auto;
   display: flex;
   flex-direction: column;
   justtify-content: center;
   height: 100%
   width: 80%;
   max-width: 800px; /*最大幅*/
   /*画像をフェードインさせるためのアニメーション（任意）*/
   animation-name: zoom 0.4s;
   animation-duration: 0.6s;
}

/*画像拡大*/
.modal-image{
   width: 100%;
   height: auto;
   display: block;
}

/*画像の説明文*/
.caption{
   margin-top: 10px;
   text-align: center;
   color: #ccc;
   padding: 10px 0;
   height: 50px;
}

/*--------------------------
  背景スクロール禁止用クラス
  --------------------------*/
.modal-open{
   overflow: hidden; /*スクロールバーを非表示にし、スクロール操作を無効にする*/
}

/* 矢印ボタン */
.prev, .next{
    cursor: pointer;
    position: absolute;
    top: 10%;
    width: auto;
    padding: 20px;
    margin-top:20%;
    color: white;
    font-weight: bold;
    font-size: 50px;
    transition: 0.3s;
    user-select: none;
    text-decoration: none;
}

.next { right: 20px; }
.prev { left: 20px; }


.prev:hover, .next:hover{
    color: #bbb;
}

/*-------------------
  クローズボタン（×）
  -------------------*/
.close{
   position: absolute;
   top: 15px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
   cursor: pointer;
}

.close:hover,
.close:focus{
   color: #bbb;
   text-decoration: none;
   cursor: pointer;
}

/*アニメーションキーフレーム（任意）*/
@keyframes zoom{
   from{transform: scale(0.1)}
   to{transform: scale(1)}
}

/* ---スマホ向け（画面幅600px以下）の調整---*/
@media(max-width: 600px){

   /* 1.クローズボタンの調整 */
   .close{
       top: 10px; /* 少し上に詰める */
       right: 15px; /*} 少し右に詰める */
       font-size: 45px; /* 指で押しやすいように大きくする */
       padding: 10px; /* タップ範囲を広げる */
       background-color: rgba(0,0,0,0.3); /* 背景を少し暗くして視認性アップ */
       border-radius: 50%
       line-height: 0.8;
       width: 50px;
       height: 50px;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   /* 2.左右矢印の調整 */
   .prev,.next{
       font-size: 35px; /* 文字を少し小さくしてバランスを取る */
       padding: 15px 10px; /* タップしやすく、かつ横幅を取り過ぎない */
       background-color: rgba(0,0,0,0.4); /* 背景を付けて画像の上でも見やすく */
       margin-top: 50px; /* 中央配置の微調整 */
   }

   .prev{
       left: 5px; /* 画面端に寄せる */
       border-radius: 0 5px 5px 0;
   }

   .next{
       right: 5px; /* 画面端に寄せる */
       border-radius: 5px 0 0 5px;
   }

   /* 3.モーダル内の画像サイズ微調整 */
   .modal-content{
       width: 95%; /* スマホでは横幅いっぱいに使う */
       margin-top: 10px;
   }
}



/*-----------------------
  アクションボタン（次へ）
  -----------------------*/
.modal-button{
   padding: 10px 25px;
   margin-top: 20px;
   cursor: pointer;
   background-color: #007bff;
   color: white;
   border: none;
   border-radius: 5px;
   font-size: 16px;
   transition: background-color 0.3s;
}

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


/* 管内地方検察庁ページ ----------------------------------------------------*/

/* イメージマップ（地図上の検察庁名をクリックすればＨＰにアクセス） */
.map-container{
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 750px; /* 画像の元の幅 */
  margin: 0 auto;
}

.map-container img{
  width: 100%;
  height: auto;
  display: block;
}

.map-area{
  position: absolute;
  display: block;
  content: "";
  text-decoration: none;
  background: transparent; /* 普段は透明 */
  /* 調整中に場所を確認したい場合は、下のコメントアウトを外してください。 */
  /* background: rgba(255,0,0,0.4); border: 1px solid red; */
}

/* タップした時に少し反転させる（スマホ向け） */
.map-area: active{
  background: rgba(255,255,255,0.3);
}

/* コンテナの設定 */
.container{
  display: grid;
  gap: 0px; /* 画像同士の隙間（お好みで調整） */
  padding: 0,0,100px,100px; /* コンテナ自体の内側の余白 */
  max-width: 1000px; /* コンテナの最大横幅（PCで広がりすぎないよう） */
  margin: 0 auto; /* コンテナ自体を画面中央に寄せる */
  justify-content: center;
}

/* 各アイテム（画像＋文字のセット）の設定 */
.item{
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center; /* 画像と文字を左右中央に寄せる */
  text-align: center; /* 文字を中央寄せにする */
}

/* 画像のサイズと形 */
.item img{
  width: 300%;
  max-width: 150px;
  height: auto; 
  border-radius: 8px; /* 角を丸くする */
}

/* テキストのスタイル */
.item p{
  margin-top: 10px;
  font-size: 15px;
}

/* 【PCの場合】横に3枚ずつ並べる */
@media(min-width: 769px){
  .container{
    grid-template-columns: repeat(3,1fr); /* 横に3つ均等に並べる */
  }
}

/* 【スマホの場合】横に2枚ずつ並べる */
@media(max-width: 768px){
  .container{
    grid-template-columns: repeat(2,1fr); /* 横に2つ均等に並べる */
  }
}


/* 採用情報・説明会ページ -----------------------------------------------*/

/* コンテナの設定 */
.image-container{
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 0px; /* 画像同士の隙間（お好みで調整） */
  padding: 0px; /* コンテナ自体の内側の余白 */
  max-width: 1000px; /* コンテナの最大横幅（PCで広がりすぎないよう） */
  text-align: center;
  margin: 0 auto; /* コンテナ自体を画面中央に寄せる */
  justify-content: center;
}


/* 各アイテム（画像＋文字のセット）の設定 */
.image-item{
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center; /* 画像と文字を左右中央に寄せる */
  text-align: center; /* 文字を中央寄せにする */
}

/* 画像のサイズと形 */
.image-item img{
  width: 100%;
  height: auto;
  display: block;
}

/* テキストのスタイル */
.image-item p{
  margin: 0px;
  text-align: left;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* 【PCの場合】横に7枚ずつ並べる */
@media(min-width: 769px){
  .image-container{
    grid-template-columns: repeat(7,1fr); /* 横に7つ均等に並べる */
  }
}

/* 【スマホの場合】横に4枚ずつ並べる */
@media(max-width: 768px){
  .image-container{
    grid-template-columns: repeat(3,1fr); /* 横に3つ均等に並べる */
  }
}

/* 新着情報 ------------------------------------------------*/
.news li {
    list-style-type: none;
	border-bottom: 1px solid var(--border-color);
	padding: 0.5rem 0;