/*全体の設定---------------------------------------------------*/
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 #0000cd;	/*上の線の幅、線種、色*/
	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;
}
.spinner {
  width: 100px;
  height: 100px;
  margin: 200px auto;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
/* Loading Animation */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 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%;}
}

/*流れる文字---------------------------------------------------*/
/* ulタグ */
.scroll-list {
  display: flex;
  list-style: none;
  padding-inline: 0;
  margin-inline: 0;
  gap: 0;
  background-color: #00bfff;
  overflow: hidden;
}

/* liタグ */
.scroll-list li {
  color: #000;
  font-size: 0.9em;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 1em 0 0;
  margin: 0;
  animation: marquee-left 10s linear infinite;
}

/* 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: 145vh;
    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 {
	padding: 10px;			/*メニュー内の余白*/
	background: #006acd;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*「大」の文字の選択時のメニューブロック*/
.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: #4682b4;/*文字の色*/
}

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



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


.center {
  text-align: center;
}

.right {
  text-align: right;
}




/*画像の拡大表示（年間スケジュールとか）---------------------------------------------------*/
.overlay {
  position: fixed; /* 背景 */
  background: rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.pop-up {
  display: none;
}
.pop-up:checked + .overlay {
  visibility: visible;
  opacity: 1;
  z-index: 100000;
  background-color: #000000E0;
  width: 100%;
}
.popWindow {
  max-height: 95%;
  max-width: 95%;  
  transform: scale(0.3); /* クリックした直後のサイズ */
  z-index: 100010;
  font-size: 13px;
  line-height: 18px;
  margin: 10px auto;
  padding: 4px 10px;
  text-align: center;
  transition: all 0.5s 0s ease;
  display: flex; /* 中央 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pop-up:checked + .overlay .popWindow {
  transform: scale(1); /* 最終的なサイズ */
  height: 100%;
}
.pbox {
  display: flex; /* 中央 */
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 5px;
  overflow: auto;
}
.popWindow .ptitle {
  font-size: 15px;
  margin: 8px;
  color: #FFF;
}
.popWindow .close {
  position: relative;
  float: right;
  transition: all 5ms;
  font-size: 24px;
  line-height: inherit;
  font-weight: bold;
  text-decoration: none;
  color: #FFF;
  padding: 2px;
}
.popWindow .close:hover {
  color: #06D85F;
}
.pbox::-webkit-scrollbar-track {
  background: none;
}
.pbox::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.pbox::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 5px;
}
.clickable:hover {
  cursor: pointer;
}
@media screen and (max-width: 900px){
  .pop-up:checked + .overlay {
    visibility: hidden;
    opacity: 0;
  }
}



/*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: #444;	/*背景色*/
	color: #fff;		/*文字色*/
	padding: 20px 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: #333;
    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: #222;
    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;}




/*トップ画面のアイコン内に更新通知・更新日を通知するためのバッチ（赤）---------------------------------------------------*/
	
	/*マーク（共通設定）*/
	.watch dt span {
		display: inline-block;	/*表示させる*/
		width: 10em;				/*幅。7文字(em)分。*/
		background: #999;		/*背景色*/
		color: #fff;			/*文字色*/
		font-size: 1.0em;		/*文字サイズを親要素の80%に。*/
		text-align: center;		/*文字をセンタリング*/
		margin-right: 1em;		/*アイコンの右側に空けるスペース*/
		align-self: flex-start;	/*高さを間延びさせない指定*/
		line-height: 1.8;		/*行間を少し狭く*/
		position: relative;top: 0.1em;	/*上下の配置バランスの微調整*/
		border-radius: 5px;		/*角を丸くする指定*/
	}

	/*icon-bg1設定*/
	.watch dt span.icon-bg1 {
		background: #cd0000;	/*背景色赤*/
	}

	/*icon-bg2設定*/
	.watch dt span.icon-bg2 {
		background: #006acd;	/*背景色青*/
	}

	/*記事(dd)設定*/
	.watch dd {
	
		font-size: 1.2em;		/*文字サイズ*/
		width: calc(100% - 1em);	
	}


/*.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以上の追加指定ここまで*/


/*任官実績の表の枠組み---------------------------------------------------*/
table {
    width: 90%;
    margin-left: 5%;
    border: 2px solid #000; /* テーブル全体に境界線を設定 */
    border-collapse: collapse;
    table-layout: fixed;
}
th ,td{
    border: 1px solid #000; /* セルごとに境界線を設定 */
    padding: 5px;
    text-align: center;
}

/* スクリーンサイズが小さい場合のスタイル */
@media screen and (max-width: 600px) {
    /* テーブルのヘッダー（列の名前）を表示にする */
    th {
        display: done;
    }
    /* その他のテーブル行を中央寄せにする */
    td {
        text-align: center;
    }
}

/*吹き出し（左：丸み有）---------------------------------------------------*/
.balloon1-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
　border-radius: 10px;
}

.balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
}

.balloon1-left p {
  margin: 0;
  padding: 0;
}

/*吹き出し（右：丸み有）---------------------------------------------------*/
.balloon1-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
　border-radius: 10px;
}

.balloon1-right:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #e0edff;
}

.balloon1-right p {
  margin: 0;
  padding: 0;
}


/*アイコン付き吹き出し（左吹き出し-文書長め）---------------------------------------------------*/
.balloon-008 {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
}

.balloon-008 img {
    max-width: 120px;
    height: 100%;
    border: 3px solid #f2f2f2;
    border-radius: 50%;
}

.balloon-008 p {
    position: relative;
    max-width: 700px;
    margin: 3px 0 0;
    padding: .8em 1em;
    border-radius: 5px;
    background-color: #f2f2f2;
    color: #333333;
}

.balloon-008 p::before {
    position: absolute;
    left: -15px;
    width: 15px;
    height: 30px;
    background-color: #f2f2f2;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}



/*アイコン付き吹き出し（左吹き出し）---------------------------------------------------*/
.balloon-009 {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
}

.balloon-009 img {
    max-width: 70px;
    height: 100%;
    border: 3px solid #f2f2f2;
    border-radius: 50%;
}

.balloon-009 p {
    position: relative;
    max-width: 700px;
    margin: 3px 0 0;
    padding: .8em 1em;
    border-radius: 5px;
    background-color: #f2f2f2;
    color: #333333;
}

.balloon-009 p::before {
    position: absolute;
    left: -15px;
    width: 15px;
    height: 30px;
    background-color: #f2f2f2;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    content: '';
}


/*アイコン付き吹き出し（右吹き出し）---------------------------------------------------*/
.balloon-010 {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
}

.balloon-010 img {
    max-width: 70px;
    height: 100%;
    border: 3px solid #2589d0;
    border-radius: 50%;
}

.balloon-010 p {
    position: relative;
    max-width: 300px;
    margin: 3px 0 0;
    padding: .8em 1em;
    border-radius: 5px;
    background-color: #b4d1fd;
    color: #333333;
}

.balloon-010 p::before {
    position: absolute;
    right: -15px;
    width: 15px;
    height: 30px;
    background-color: #b4d1fd;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}

/*アイコン付き吹き出し（右吹き出し）---------------------------------------------------*/
.balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 2px 0 0 100px;
  padding: 20px 15px;
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -23px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.says p {
  margin: 0;
  padding: 0;
}

*対談用インタビュー記事部分-----------------------*/
.conversation-container {
  padding: 1000px; /* インナー余白を追加 */
}

.conversation-container h4{
  font-size: 18px;  /*インタビュアー部分の文字サイズ*/
  letter-spacing: 0.01em;	/*文字間隔を少しだけ広くとる*/
  border-left: 6px solid #a9a9a9;	/*左側のアクセントラインの幅、線種、色*/
  padding-right: calc(1rem - 6px);	/*右側への余白。上の6pxの線幅を変更する場合は、ここの6pxも合わせて変更して下さい*/
  padding-left: 10px; /* アクセントラインと文字の間隔を調整 */
}

.conversation {
  display: flex;
  justify-content: flex-start; /* 縦方向に上部に配置 */
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin: 10px 10px; /* 両側に適切なマージンを設定 */
  margin-bottom: 20px; /* 対談間の余白を追加 */
}

@media (max-width: 600px) {
  .conversation {
    margin-left: 10px; /* スマホ画面での左マージンを調整 */
    margin-right: 10px; /* スマホ画面での右マージンを調整 */
  }
}

.profile {
  flex: 1;
  display: flex; /* Flexboxを有効にする */
  flex-direction: column; /* 縦方向にアイテムを配置 */
  align-items: flex-start; /* 横方向に上部に配置 */
  justify-content: flex-start; /* 縦方向に上部に配置 */
  padding: 2px; /* プロフィールエリアの余白を追加 */
  height: 100%; /* プロフィールエリアの高さを指定 */
}

.profile h5 {
  margin: 20px;
  margin-left: 25%;
  font-size: 17px;
}

.content {
  flex: 3.5;
  padding: 10px;
}


/*jobインタビューのＴＯＰ写真＆文字(３枚並べ）--※使ってない※--------*/
  .job_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .job_frame {
    width: calc(30.0% - 8px); /* 3列に分割して余白を考慮 */
    background-color: white;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); /* 影の追加 */
    padding: 20px;
    text-align: center;
    margin-bottom: 30px; /* フレーム間の間隔を調整 */
  }
  .job_photo {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px; /* テキストとの間隔を調整 */
  }
  .job_text {
    font-size: 22px;
    color: #333;
  }



/*jobインタビューのＴＯＰ写真＆文字(２枚並べ）---※使ってない--------------------*/
  .job2_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 200px  /* 左右の余白 */
  }
  .job2_frame {
    width: calc(45.0% - 20px); /* 2列に分割して余白を考慮 */
    background-color: white;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); /* 影の追加 */
    padding: 20px;
    text-align: center;
    margin-bottom: 30px; /* フレーム間の間隔を調整 */
  }
  .job2_photo {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px; /* テキストとの間隔を調整 */
  }
  .job2_text {
    font-size: 22px;
    color: #333;
  }




/*検事の仕事＞検事インタビューの中の写真とタイトル（○○検事）の設定（ギャラリー）-----*/
    .gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0;
        list-style: none;
    }

    .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; /* 高さを自動にして文字が収まるようにする */
	    }
	}

/*インタビューページ（子ページ）の上部の文字と写真のゾーン-----*/
/* container */
.wrapper{
    width:100%;
    background-color:#f5f5f5;
}
.wrapper .container{
    max-width:1000px;
    margin:0px auto;
    padding:0.1rem 0.1rem;
}
/* content */
@media (min-width: 900px) {
    .wrapper .container .content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* PC時のみ順番を入れ替える */
@media (min-width: 900px) {
    .wrapper .content {
        flex-direction:row-reverse;
    }
}
.wrapper .content-item {
    width:100%;
}
@media (min-width: 900px) {
    .wrapper .content-item {
        width:50%;
    }
}
.wrapper .image{
    display:block;
    max-width:100%;
    margin:0px auto;
    border-radius: 10px  /* 写真の丸み */
}
.wrapper .text{
    padding:30px;
}
.wrapper .text .heading{
    margin:0px 0px 40px 0px;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
}


/*ポイント表示（ボックス）---------------------------------------------------*/
.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #ffc107;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #ffc107;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}

/*ポイント表示（ボックス）---------------------------------------------------*/
.box29 {
    position: relative; 
    margin: 1em 0;
    margin-left: 4%;
    margin-right: 4%;
    padding: 25px 10px 7px;
    border: solid 2px #555555;
}
.box29 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #ffc107;
    color: #ffffff;
    font-weight: bold;
}
.box29 p {
    margin: 0; 
    padding: 0;
}
.box29 a {
    font-size: 12px;
    display: block;
    text-align: right; /* テキストを右寄せに */
}




/*プロフィールカード２（中央２人分横並び）--------------------------------------*/
  .profile-card-container3 {
    display: flex;

     justify-content: space-around; /* 横方向の中央寄せ */
    align-items: center;
    height: calc(50vh - -200px);
    padding-bottom: 100px;
  }
  
  .profile-card3 {
    width: calc(50% - 20px); /* カードの幅を50%に設定し、間隔を追加 */
    margin: 50px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 1, 0.5);
    text-align: center;
  }

  @media screen and (min-width: 768px) {
    .profile-card3 {
      width: calc(40% - 10px); /* 画面が768px以上の場合、カードを40%に変更 */
    }
    .profile-card-container3 {
      flex-direction: row; /* 横方向に並べる */
    }
  }

  @media screen and (max-width: 767px) {
    .profile-card3 {
      width: calc(40% - 50px); /* 画面が767px以下の場合、カードを100%に変更 */
    }
    .profile-card-container3 {
      flex-direction: row; /* 縦方向に並べる */
    }
  }
  
  .profile-card3 img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-top: -75px;
    border: 4px solid #ffffff;
  }
  
  .profile-text3 {
    padding: 20px;
  }
   

/*プロフィールカード（中央２人分横並び）--------------------------------------*/
.container2 {
  display: flex;
  flex-wrap: wrap;
}

.profile-card2 {
  flex: 1 1 40%;
  margin: 10px;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  text-align: center;
}

.profile-card2 img {
  width: 190px;
  height: 190px;
  border-radius: 50%;
}

.profile-info2 {
  margin-top: 20px;
}

.profile-card2 p {
  text-align: left; /*テキストを左寄せにする */
}

.conversation2 {
  flex: 1 1 100%;
  margin: 10px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
}


@media (max-width: 767px) {
  .container2 {
    flex-direction: column;
  }

  .profile-card2 {
    flex-basis: 100%;
  }
  .profile-card2 img {
    width: 50%;
    height: auto;
    border-radius: 50%;
  }
}


/*区切り線（グラデーションで先端薄く）---------------------------------------------------*/
.cp_hr01 {
	position: relative;
	height: 1px;
	border-width: 0;
	background-image: -webkit-linear-gradient(left,
	transparent 0%,#283593 50%,transparent 100%);
	background-image:         linear-gradient(90deg,
	transparent 0%,#283593 50%,transparent 100%);
}

/*区切り線（ドット）---------------------------------------------------*/
.dots {
  border-width: 0 0 8px;
  border-style: solid;
  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="hsla(0, 0%, 65%, 1.0)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
   width: 216px;
}


/*セクションカラー（検事インタビューの背景の色分け）-----*/

/* セクション共通のスタイル */
section {
  margin-bottom: 2px; /* 下の余白を一定にする */
  padding: 0px; /* セクション内の余白を設定 */
}

/*白*/
.section1{
background-color: #fff;
}

/*グレー*/
.section2{
background-color: #f5f5f5;
}

/*予備（使ってない）*/
.section3{
background-color: #e8f7f0;
}


/*インタビューの文字の配置-----*/
.middle {
  /*真ん中の要素*/
  background: ;
  /*左と右だけ*/
  margin: 2px auto;
  /*下と左だけ*/
  padding: 5px 2px;
}

/* 写真５列並び */--------------------------------------*/
*, *:before, *:after {
    box-sizing: border-box;
}
.col_5{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.col_5 > *{
    width: calc( 20% - 20px );
    margin-right: 25px;
    margin-bottom: 25px;
}
.col_5 > *:nth-child(5n){
    margin-right: auto;
}
@media screen and (max-width: 900px) {
    .col_5 > *{
        width: calc( 25% - 9px );
        margin-right: 12px;
        margin-bottom: 12px;
    }
    .col_5 > *:nth-child(5n){
        margin-right: 12px;
    }
    .col_5 > *:nth-child(4n){
        margin-right: auto;
    }
}
@media screen and (max-width: 767px) {
    .col_5 > *{
        width: calc( 33.33333% - 8px ) ;
    }
    .col_5 > *:nth-child(5n){
        margin-right: 12px;
    }
    .col_5 > *:nth-child(4n){
        margin-right: 12px;
    }
    .col_5 > *:nth-child(3n){
        margin-right: auto;
    }
}

/* 写真４列並び */--------------------------------------*/
*, *:before, *:after {
    box-sizing: border-box;
}
.col_4{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.col_4 < *{
    width: calc( 25% - 9px );
    margin-right: 12px;
    margin-bottom: 12px;
}
.col_4 < *:nth-child(4n){
    margin-right: auto;
}
@media screen and (max-width: 125px) {
    .col_4 < *{
        width: calc( 33.33333% - 8px ) ;
    }
    .col_4 < *:nth-child(4n){
        margin-right: 12px;
    }
    .col_4 < *:nth-child(3n){
        margin-right: auto;
    }
}
@media screen and (max-width: 767px) {
    .col_4 < *{
        width: calc( 50% - 6px ) ;
    }
    .col_4 < *:nth-child(3n){
        margin-right: 12px;
    }
    .col_4 < *:nth-child(2n){
        margin-right: auto;
    }
}


/* 写真３列並び */--------------------------------------*/
*, *:before, *:after {
    box-sizing: border-box;
}
.col_3{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.col_3 > *{
    width: calc( 33.33333% - 12px ) ;
    margin-right: 12px;
    margin-bottom: 12px;
}
.col_3 > *:nth-child(3n){
    margin-right: auto;
}
.col_3 > * > *{
    background: #ff0000;
    height: 120px;
    position: relative;
    overflow: hidden
}
@media screen and (max-width: 900px) {
    .col_3 > *{
        width: calc( 50% - 6px ) ;
    }
    .col_3 > *:nth-child(3n){
        margin-right: 12px;
    }
    .col_3 > *:nth-child(2n){
        margin-right: auto;
    }
}
@media screen and (max-width: 767px) {
    .col_3 > *{
        width: 100%;
        margin-right: auto;
    }
    .col_3 > *:nth-child(3n){
        margin-right: auto;
    }
}




/*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;
    }

}


/*youtube埋め込み---------------------------------------------------*/

.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* アスペクト比16:9の場合 */
    padding-top: 2px;
    height: 0;
    overflow: hidden;
    margin-bottom: 2rem; /* YouTubeの下に余白をつける */
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*youtube埋め込み2---------------------------------------------------*/


.video-wrap {
  max-width: 50%; /* ここに動画の横幅を指定 */
}

/* 動画を囲うdiv */
.video {
  position: relative;
  width:100%; /* 横幅は100%で固定 */
  height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
  padding-top: 56.25%; /* 高さを指定(16:9) */
}

/* YouTube埋め込み用のiframe */
.video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/*その他---------------------------------------------------*/
.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以上の追加指定ここまで*/