/* スマホ用CSSがベースになっています */
/* PC用は下の方の　@media (min-width: 768px)　で上書　*/

@charset "UTF-8";
html{
	/* メニュー文字サイズに影響 */ /* (20240219)ContentTileと両方に必要 */ /*	20230512 スマホ用に調整 */ /*ユーザー設定の文字サイズを正しく反映*/
	font-size:4vw;

	scroll-behavior: smooth;	/*	(20240215）スムーズスクロール	*/
	scroll-padding-top: 300px;	/*	(20240215）スムーズスクロール	*/
}
*{
    box-sizing:border-box;
}
img{
    max-width:100%;/*画像が親要素からはみ出すのを防ぐ*/
    height:auto;
}
header {
/*  padding-top: 100px;  /* ここで固定ヘッダぶんスペースを確保 */
  padding-top: 90px;  /* ここで固定ヘッダぶんスペースを確保 */
}
body{
    margin:0;
    padding:0;
	padding-bottom: 10px;/* Footerにコンテンツが隠れないように意識的に余白を作る */
	border-radius: 10px;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
a {
	text-decoration: none;
	color: inherit;
}



/* シンプルヘッダー部 https://proengineer.internous.co.jp/content/columnfeature/6491 */
/*	(20230301)	.Header-Simple {*/
.Header-Title-Area {
	position: fixed; /* ヘッダーを固定。タイトルの上のレイヤーになるのが多いので注釈に */
	z-index: 999999;	/* bxSliderが50らしいので */
	top: 0; /* 上部から配置の基準位置を決める */
	left: 0; /* 左から配置の基準位置を決める */
	width: 100%; /* ヘッダーの横幅を指定する */
	/*	(20230301)	height: 130px;	*/ /* ヘッダーの高さを指定する */
	height:9.0vw ; /* ヘッダーの高さを指定する */
	/* padding: 10px; /* ヘッダー内側の余白を指定する(上下左右) */
	/*	(20230328)	background-color: #ffffff; /* ヘッダーの背景色を指定する */
	/*	(20230328)	color: #000000; /* ヘッダーのフォントの色を指定する */
	/* background-color: #223a70; */
	/*background-color: #0099ff;*/
	color: #ffffff;

	/*	(20230414)	border-bottom: 3px solid #000000; /* ヘッダーの境界線（下部）を指定する */
	/* box-shadow:0 7px 10px 2px #696969; */ /* 影を指定（[右][下][ぼかし][広がり][影の色]） */
	display: flex;	/* 横に並べる（タイトルとメニュー） */
	justify-content:space-between; */	/* 両端に並べる（＝左端：タイトル＋右端：メニュー） */
	/* align-items: center;	/* 垂直中央に並べる、のだが警報注意報が上部にくっついたので注釈にした */
/*	z-index: 999998;	/* bxSliderが50らしいので */
	z-index: 2147483647;	/* bxSliderが50らしいので */
	
}
/* （ここまで）シンプルヘッダー部 https://proengineer.internous.co.jp/content/columnfeature/6491 */


.Header-title {
/*font-size: 150%;*/
color: #333333;
text-shadow: 2px 2px 2px silver;
font-weight: bold;
/*position: absolute;*/
/*	(20230315)	left: 36%; */
/*	(20230315)	margin-right: -64%;*/
}
.hero-title{
  display:flex; justify-content:center; align-items:center;
  /* vw任せだと暴れるので clamp で制御 */
/*  font-size: clamp(20px, 4.5vw, 42px); */
  font-size: clamp(20px, 4.5vw, 30px);
  line-height: 1.15;
  letter-spacing: .02em;
  padding: .25em .6em;
}


/* 警報注意報エリア */
/* スマホ基準：警報注意報エリア（style-390相当） */
.warning_area{
  position: fixed;
  z-index: 999999;      /* bxSliderが50らしいので */
  font-size: 130%;
/*	(20251120 1048)  margin: 18px 0 0 0; */
  margin: 0; /* position: fixedだと内容によってずれるのでmargin系は使わない */
  top: 30px; /* position: fixedだと内容によってずれるのでmargin系は使わない */
  left: 0; /* position: fixedだと内容によってずれるのでmargin系は使わない */
  right: 0; /* position: fixedだと内容によってずれるのでmargin系は使わない */
  
  background-color: #fff;
  width: 100%;
  height: 30px;         /* 20230512 スマホ用調整 */
  font-weight: bold;
  line-height: 30px;   /* ← height と同じ値にして縦中央 */
  padding: 0 10px;     /* 左右にだけ少し余白（任意） */
}
/* // 警報注意報エリア */


/* 警報注意報の装飾 */
span.special_warning {
	 font-size:90%;
	 background: #2C2934;
	 color: #ffffff;
/*	 border: 1px solid #000000; */
	 padding:2px 4px;
	}

span.warning {
	 font-size:90%;;
	 background: #F30215;
	 color: #ffffff;
/*	 border: 1px solid #000000; */
	 padding:2px 4px;
	}

span.attention {
/*	display: inline-block; */
	 font-size:90%;
	 font-weight:normal;
	 background: #F4CD26;
	 color: #000000;
/*	 border: 1px solid #000000; */
	 padding:2px 4px;
	}

span.non_attention_warning {
	font-size:90%;
	font-weight:normal;
	background: #d5dcce;
	color: #000000;
/*	border: 1px solid #000000; */
	 padding:2px 4px;
	}
/*  // 警報注意報の装飾 */



/* <!-- メニュー --> */
#menu {
	position: fixed;
/*    margin-top: 45px; */
	top: 60px;  /* position: fixedだと内容によってずれるのでmargin系は使わない */
	left: 0;  /* position: fixedだと内容によってずれるのでmargin系は使わない */
	right: 0;  /* position: fixedだと内容によってずれるのでmargin系は使わない */
	
	padding:10px; /* 内側の余白を指定する(上下左右) */
	
	width: 100%; /* 横幅を指定する */
	overflow: scroll;	/* 画面に隠れた部分はスクロールする */
	white-space: nowrap;	/* 画面に隠れた箇所は折り返ししないように */
/*	left: 0; /* 左から配置の基準位置を決める */
	height: 40px; /*	20230512 スマホ用に調整 */ /* 高さを指定する */
	font-size:160%;
	line-height:10px;
	text-align: left;	/* 左寄せ */
	z-index: 999999;	/* bxSliderが50らしいので */
}

.non-scrollbar {	/* https://www.yoheim.net/blog.php?q=20190801 */
	overflow-x: scroll;	/* 画面に隠れた部分はスクロールする */
	-ms-overflow-style: none;    /* スクロールバーを消す：IE, Edge 対応 */
	scrollbar-width: none;       /* スクロールバーを消す：Firefox 対応 */
}
.non-scrollbar::-webkit-scrollbar {  /* スクロールバーを消す：Chrome, Safari 対応 */
display:none;
}
/* <!-- // メニュー --> */





/* フッター部 https://proengineer.internous.co.jp/content/columnfeature/6491 */
#Footer {
overflow: scroll;	/* 画面に隠れて部分はスクロール出来るように */
white-space: nowrap;	/* 画面に隠れた箇所は折り返ししないように */
position: fixed; /* フッターを固定する */
bottom: 0; /* 下部から配置の基準位置を決める */
left: 0; /* 左から配置の基準位置を決める */
width: 100%; /* フッターの横幅を指定する */
/*	(20240216)	height: 110px; /* フッターの高さを指定する */
height: 160px; /* フッターの高さを指定する */
/*padding:10px; /* フッター内側の余白を指定する(上下左右) */
font-size:80%;
/*color: #FFFFFF; /* フッターのフォントの色を指定する */
/*	(20240216)	line-height:90px;*/
line-height:50px;
/*text-align: right;*/	/* 右寄せ */
/*	(20240216)	background-color: rgba( 255, 255, 255, 1.0 );	*/
background-color: rgba( 255, 255, 255, 0.8 );
border-top:solid 6px #000000;
}
/*	(20240216)	#Footer::before,
/*	(20240216)	#Footer::after {
/*	(20240216)	    content: "";
/*	(20240216)	    position: fixed;
/*	(20240216)	    top: 0;
/*	(20240216)	    right: 0;
/*	(20240216)	    width: 100px; /* フッターの内側左右端の幅を指定 */
/*	(20240216)	    height: 100%;
/*	(20240216)	    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* 左右端に透明から不透明へのグラデーション */
/*	(20240216)	    z-index: 1;
/*	(20240216)	}

/*	(20240216)	#Footer::before {
/*	(20240216)	    content: "";
/*	(20240216)	    top: 0;
/*	(20240216)	    left: 0;
/*	(20240216)	    width: 100px; /* 左端の霞がかった効果を固定するための幅 */
/*	(20240216)	    height: 100%;
/*	(20240216)	    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* 左端から右に向かって薄くなる効果 */
/*	(20240216)	    z-index: 1;
/*	(20240216)	}

/*	(20240216)	#Footer::after {
/*	(20240216)	    right: 0;
/*	(20240216)	}
/*	(20240216)	#Footer .content {
/*	(20240216)	    overflow-x: hidden; /* コンテンツの横方向のオーバーフローを非表示にする */
/*	(20240216)	    height: 100%; /* フッター内のコンテンツがフッターの高さいっぱいになるように */
/*	(20240216)	    position: relative; /* 相対位置指定 */
/*	(20240216)	    z-index: 2; /* 透明な部分の上に表示する */
/*	(20240216)	}

.non-scrollbar { /* https://www.yoheim.net/blog.php?q=20190801 */
	overflow-x: scroll;	/* 画面に隠れた部分はスクロールする */
	-ms-overflow-style: none;    /* スクロールバーを消す：IE, Edge 対応 */
	scrollbar-width: none;       /* スクロールバーを消す：Firefox 対応 */
}
.non-scrollbar::-webkit-scrollbar {  /* スクロールバーを消す：Chrome, Safari 対応 */
display:none;
}
/* フッター部（ここまで） */


/*
.example{
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #333;
    padding: 10px;
    background: #f5f5f5;
}
.example>div{
    border: 1px solid #333;
    padding: 10px;
    width: 50%;
    box-sizing: border-box;
    background: #FFF;
}
*/

/* 枠部分。https://www.ipentec.com/document/css-flex-wrap */
.Frame {
/*  margin-top: 100px; */
  display: flex;
  justify-content: space-around;
  flex-wrap:wrap;
}

.ContentTile{
  /* 既存 4vw を活かしつつ暴れ防止 */
  font-size: clamp(14px, 4vw, 18px);

  background-color: #fff;
  width: calc(100% - 6vw);

  /* 太線→細い薄線へ */
  border: 1px solid rgba(0,0,0,.12);

  /* 角丸を少し大きめに */
  border-radius: 16px;

  /* にじむタイプの自然な影 */
  box-shadow: 0 6px 18px rgba(0,0,0,.08);

  margin-top: .1rem;
  margin-bottom: .3rem;
  margin-left: .1rem;
  margin-right: .1rem;
  padding: .1rem .5rem;

  /* ふるまい */
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* 初期値を明示 */
.ContentTile { position: relative; top: 0; }

/* transform の代わりに relative の top を使う */
.ContentTile:hover,
.ContentTile:focus-within {
  top: -2px; /* 視覚的に2px持ち上げる（レイアウト崩れは起きにくい） */
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.18);
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .ContentTile:hover,
  .ContentTile:focus-within { top: 0; }
}

.ContentTileImage {
	background-color: #ffffff;
	width:85vw;
	text-align: left;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}


.ContentTileImage img {
  width:100%;
 }

@media screen and (max-width:300px){
html{
    font-size:100%;
}
.ContentTile {
	width:49vw;
}
.ContentTileImage {
	width:48vw;
}
}

/*
@media screen and (max-width:700px){
html{
    font-size:80%;
}
.ContentTile {
	width:80vw;
}
.ContentTileImage {
	width:78vw;
}
}
*/

@media screen and (max-width:700px){
html{
    font-size:70%;
}
}


/* （ここまで）枠部分。https://www.ipentec.com/document/css-flex-wrap */ 
 

/* 注意報を最前面に出す場合の仕組み（未使用） */
 #fullOverlay{	/* overlay */
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
/*  background: rgba(100, 100, 100, .8); */
  background: rgba(255, 255, 0, .8);
  z-index: 2147483647;
}
#fullOverlay .text{
  position: absolute;
  left: 50%; top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: rgba(0,0,0, 1);
  font-size: 400%;
  text-align: center;
}
/* （ここまで）注意報を最前面に出す場合の仕組み（未使用） */


/* <!-- lightbox風 https://oneuro.net/lightbox-css-coding#overlay --> */
#sample figure{
  margin: 0;     /* マージンの初期化 */
  display: none; /* 最初に画像を隠しておく */
}
#sample figure:target{
  display: block;  /* 画像を表示する */
  position: fixed; /* スクロールしても画像を動かさない */
  top: 0;          /* 画面全体に対して画像を中央に設置する */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000000;   /* 画像を一番前に表示する */
}
#sample figure:target #overlay{
  position: absolute;        /* 画像が重なるように */
  top: 0;                    /* 4つを0にして画面全体に広げる */
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;     /* フレックスアイテムの並びを縦にする */
  justify-content: center;    /* 左右中央に設置 */
  align-items: center;        /* 上下中央に設置 */
  background: rgba(0, 0, 0, 0.7); /* 画像を見やすくするため透過の黒背景 */
  text-decoration: none;      /* リンクなので文字に下線など装飾が付かないようにする */
  color: #ffffff;
}
#sample figure:target img{
  animation: fadein .3s;   /* 0.3秒かけたフェードイン効果 */
  transform: scale(0.8);
}
@keyframes fadein{         /* フェードイン効果の中身 */
  0%{
    transform: scale(0.2);
    opacity: 0.2;
  }
  100%{
    transform: scale(0.8);
    opacity: 1;
  }
}
/* <!-- /lightbox風 --> */



/* <!-- アコーディオン -->*/
/* 好みで数値だけ変えればOK */
:root{
  --acc-pad-y: 12px;  /* 上下の余白 */
  --acc-pad-x: 16px;  /* 左右の余白 */
}

/* 外枠 */
details{
  margin-top: .3em;
  font-size: 80%;
  background: #fff;
  border: 1.5px solid #c0c0c0;
  border-radius: 20px;
}

/* 見出し（クリック帯） */
summary{
/*  background: #fff;*/
  color: #223a70;
  border: #223a70;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
/*  margin: 2px; */
  padding: 5px;
}
summary:hover{
  color:#fff;
  background:#004080;
}

/* ▼ 開いたときだけ、枠の内側に余白を付ける（本文の左右・上下） */
details[open]{ 
  padding: var(--acc-pad-y) var(--acc-pad-x);
}

/* 開いたとき、summary は枠の内側余白分を“打ち消して”外周いっぱいに見せる */
details[open] > summary{
  /* 上下左右をマイナスして details の padding を無効化 */
  margin: calc(var(--acc-pad-y) * -1) calc(var(--acc-pad-x) * -1) 8px;
  /* 見出しと本文の区切り（任意） */
  border-bottom: 1px solid #cfcfcf;
  /* 外枠より気持ち小さい角丸で自然に */
  border-radius: 32px;
}

/* summary 内の段落などの微調整（任意） */
summary p{ margin: 0; }
/* <!-- // アコーディオン -->*/


/* <!-- svg -->*/
title {
	background-color: black;
	color: white;
	font-size: 12px;
	padding: 5px;
	border-radius: 5px;
}
title {
	pointer-events: all;
}
svg .svg-title{ font-size: 3rem; }
svg .svg-stamp{ font-size: 2.5rem; }
svg .svg-label{ font-size: 1.5rem; }
/* <!-- // svg -->*/


/* <!-- タブ：選択中 -->*/
.tab-selected{
    width:150px;
    height:30px;
    line-height:30px;
}
.tab-selected a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#FFFFFF;
    text-align:center;
    border-top:4px solid #000000;
    border-left:4px solid #000000;
    border-right:4px solid #000000;
    color:#666666;
    font-size:14px;
    font-weight:bold;
    border-top-right-radius:26px;
    -webkit-border-top-right-radius:26px;
    -moz-border-radius-topright:26px;
    border-top-left-radius:26px;
    -webkit-border-top-left-radius:26px;
    -moz-border-radius-topleft:26px;
    transition: all 0.5s ease;
}
.tab-selected a:hover{
    background:#000000;
    color:#FFFFFF;
    margin-left:0px;
    margin-top:0px;
    border-top:4px solid #FFFFFF;
    border-left:4px solid #FFFFFF;
    border-right4px solid #FFFFFF;
    box-shadow:none;
}
/* <!-- //タブ：選択中 -->*/


/* <!-- タブ：非選択 --> */
.tab-non-selected{
    width:150px;
    height:30px;
    line-height:30px;
}
.tab-non-selected a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#000000;
    text-align:center;
    border-top:4px solid #000000;
    border-left:4px solid #000000;
    border-right:4px solid #000000;
    color:#ffffff;
    font-size:14px;
    font-weight:bold;
    border-top-right-radius:26px;
    -webkit-border-top-right-radius:26px;
    -moz-border-radius-topright:26px;
    border-top-left-radius:26px;
    -webkit-border-top-left-radius:26px;
    -moz-border-radius-topleft:26px;
    transition: all 0.5s ease;
}
.tab-non-selected a:hover{
    background:#ffffff;
    color:#000000;
    margin-left:0px;
    margin-top:0px;
    border-top:4px solid #000000;
    border-left:4px solid #000000;
    border-right4px solid #000000;
    box-shadow:none;
}
/*	<!-- //タブ：非選択 -->*/


.waku-black{
  --band: 24px;                 /* 太い上帯の厚み */
  position: relative;
  padding: 6px 8px 6px;         /* 下 6px */
  margin: 0.5em 0;
  color: #000;                  /* 本文色 */
  background: #fff;
  border: 3px solid #000;       /* 細枠は黒 */
  border-top-width: var(--band);/* 上だけ太枠 */
  box-sizing: border-box;
  line-height: 1.2;
}

/* タイトル（必要なときだけ：黒帯上は白字が見やすい） */
.waku-black .title{
  position: absolute;
  top: calc(-1 * var(--band));
  left: 8px;
  height: var(--band);
  line-height: var(--band);
  color: #fff;                  /* 白字 */
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}


.waku-purple{
  --band: 24px;                 /* 太い上帯の厚み */
  position: relative;
  padding: 6px 8px 6px;         /* 下 6px */
  margin: 0.5em 0;
  color: #000;                  /* 本文色 */
  background: #fff;
  border: 3px solid #b40068;    /* 細枠は紫 */
  border-top-width: var(--band);/* 上だけ太枠 */
  box-sizing: border-box;
  line-height: 1.2;
}

/* タイトル（必要なときだけ：濃い紫帯上は白字が見やすい） */
.waku-purple .title{
  position: absolute;
  top: calc(-1 * var(--band));
  left: 8px;
  height: var(--band);
  line-height: var(--band);
  color: #fff;                  /* 白字 */
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}


.waku-red{
  --band: 24px;                /* 太い上帯の厚み */
  position: relative;
  padding: 6px 8px 6px;        /* 下 6px */
  margin: 0.5em 0;
  color: #000;                 /* 本文色 */
  background: #fff;
  border: 3px solid #f00;      /* 細枠は赤 */
  border-top-width: var(--band); /* 上だけ太枠 */
  box-sizing: border-box;
  line-height: 1.2;
}

/* タイトル（必要なときだけ：赤帯上は白字が見やすい） */
.waku-red .title{
  position: absolute;
  top: calc(-1 * var(--band));
  left: 8px;
  height: var(--band);
  line-height: var(--band);
  color: #fff;                 /* 白字 */
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}


.waku-orange{
  --band: 24px;                 /* 太い上帯の厚み */
  position: relative;
  padding: 6px 8px 6px;         /* 下 6px */
  margin: 0.5em 0;
  background: #fff;
  border: 3px solid #ff9900;    /* 細枠はオレンジ */
  border-top-width: var(--band);/* 上だけ太枠 */
  box-sizing: border-box;
  line-height: 1.2;
}

/* タイトル（必要なときだけ：オレンジ帯上は白字が見やすい） */
.waku-orange .title{
  position: absolute;
  top: calc(-1 * var(--band));
  left: 8px;
  height: var(--band);
  line-height: var(--band);
  color: #fff;                  /* 白字 */
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 段落の余白は用途に応じて。既定のままでOKなら下記は不要 */
.waku-orange p{
  margin: 0; 
  padding: 0;
}


.waku-yellow{
  --band: 24px;                 /* 太い上帯の厚み */
  position: relative;
  padding: 6px 8px 6px;         /* 下 6px */
  margin: 0.5em 0;
  color: #2c2c2f;               /* 本文色（従来どおり） */
  background: #fff;
  border: 3px solid #f7f711;    /* 細枠は黄色 */
  border-top-width: var(--band);/* 上だけ太枠 */
  outline: 1px solid rgba(0,0,0,.14);
  outline-offset: -1px;
  box-sizing: border-box;
  line-height: 1.2;
}

/* タイトル（必要なときだけ：黄色帯上は濃色文字が見やすい） */
.waku-yellow .title{
  position: absolute;
  top: calc(-1 * var(--band));
  left: 8px;
  height: var(--band);
  line-height: var(--band);
  color: #1a1a1a;               /* 視認性の高い濃色 */
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}


.waku-blue{
  --band: 24px;
  position: relative;
  padding: 6px 8px 6px;     /* ← 下 6px */
  margin: 0.5em 0;
  background: #fff;
  border: 3px solid #00f;   /* 青の細枠 */
  border-top-width: var(--band); /* 上だけ太枠 */
  box-sizing: border-box;
  line-height: 1.2;
}

/* タイトル（必要なときだけ） */
.waku-blue .title{
  position: absolute;
  top: calc(-1 * var(--band));
  left: 8px;
  height: var(--band);
  line-height: var(--band);
  color: #fff;              /* 青帯上で映える白字 */
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}


.waku-blue2{
  --band: 24px;                  /* 太い上帯の厚み */
  position: relative;
  padding: 6px 8px 6px;          /* 下 6px */
  margin: 0.5em 0;
  background: #fff;
  border: 3px solid #218cff;     /* 細枠は薄めの青 */
  border-top-width: var(--band); /* 上だけ太枠 */
  box-sizing: border-box;
  line-height: 1.2;
}

/* タイトル（必要なときだけ） */
.waku-blue2 .title{
  position: absolute;
  top: calc(-1 * var(--band));
  left: 8px;
  height: var(--band);
  line-height: var(--band);
  color: #fff;                   /* 青帯上で映える白字 */
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 段落の初期余白を消したい場合だけ使用（不要なら削除） */
.waku-blue2 p{
  margin: 0;
  padding: 0;
}


.waku-blue3{
  --band: 24px;                   /* 太い上帯の厚み */
  position: relative;
  padding: 6px 8px 6px;           /* 下 6px */
  margin: 0.5em 0;
  background: #fff;
  border: 3px solid #a0d2ff;      /* 細枠は淡い青 */
  border-top-width: var(--band);  /* 上だけ太枠 */
  outline: 1px solid rgba(0,0,0,.14);
  outline-offset: -1px;
  box-sizing: border-box;
  line-height: 1.2;
}

/* タイトル（必要なときだけ：淡色帯なので濃色が読みやすい） */
.waku-blue3 .title{
  position: absolute;
  top: calc(-1 * var(--band));
  left: 8px;
  height: var(--band);
  line-height: var(--band);
  color: #0f2a5a;                /* 濃い青系文字 */
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 段落の初期余白を消したい場合だけ使用（不要なら削除） */
.waku-blue3 p{
  margin: 0;
  padding: 0;
}


.waku-blue4{
  --band: 24px;                   /* 太い上帯の厚み */
  position: relative;
  padding: 6px 8px 6px;           /* 下 6px */
  margin: 0.5em 0;
  background: #fff;
  border: 3px solid #C5FFFF;      /* 細枠は淡いシアン */
  border-top-width: var(--band);  /* 上だけ太枠 */
  outline: 1px solid rgba(0,0,0,.14);
  outline-offset: -1px;
  box-sizing: border-box;
  line-height: 1.2;
}

/* タイトル（必要なときだけ：淡色帯なので濃色文字が読みやすい） */
.waku-blue4 .title{
  position: absolute;
  top: calc(-1 * var(--band));
  left: 8px;
  height: var(--band);
  line-height: var(--band);
  color: #0f2a5a;                /* 濃い青系文字（お好みで #000 でもOK） */
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 段落の初期余白を消したい場合だけ使用（不要なら削除） */
.waku-blue4 p{
  margin: 0;
  padding: 0;
}


.waku-green{
  --band: 24px;                 /* 太い上帯の厚み */
  position: relative;
  padding: 6px 8px 6px;         /* 下 6px */
  margin: 0.5em 0;
  background: #fff;
  border: 3px solid #008000;    /* 細枠はグリーン */
  border-top-width: var(--band);/* 上だけ太枠 */
  box-sizing: border-box;
  line-height: 1.2;
}

/* タイトル（必要なときだけ：濃い緑帯上は白字が見やすい） */
.waku-green .title{
  position: absolute;
  top: calc(-1 * var(--band));
  left: 8px;
  height: var(--band);
  line-height: var(--band);
  color: #fff;                  /* 白字 */
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 段落初期余白を消したい場合だけ（不要なら削除） */
.waku-green p{
  margin: 0;
  padding: 0;
}


.waku-green2{
  --band: 24px;                  /* 太い上帯の厚み */
  position: relative;
  padding: 6px 8px 6px;          /* 下 6px */
  margin: 0.5em 0;
  background: #fff;
  border: 3px solid #3BAB68;     /* 細枠はグリーン */
  border-top-width: var(--band); /* 上だけ太枠 */
  box-sizing: border-box;
  line-height: 1.2;
}

/* タイトル（必要なときだけ：緑帯上は白字が見やすい） */
.waku-green2 .title{
  position: absolute;
  top: calc(-1 * var(--band));
  left: 8px;
  height: var(--band);
  line-height: var(--band);
  color: #fff;                   /* 白字 */
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 段落の初期余白を消したい場合だけ（不要なら削除） */
.waku-green2 p{
  margin: 0;
  padding: 0;
}


.waku-gray{
  --band: 24px;
  position: relative;
  padding: 6px 8px 6px;   /* ← 下 6px */
  margin: 0.5em 0;
  background: #fff;
  border: 3px solid #ccc;
  border-top-width: var(--band);
  box-sizing: border-box;
  line-height: 1.2;
}

/* タイトル（必要なときだけ） */
.waku-gray .title{
  position: absolute;
  top: calc(-1 * var(--band));
  left: 8px;
  height: var(--band);
  line-height: var(--band);
  color: #333; font-weight: 700;
  white-space: nowrap; max-width: calc(100% - 16px);
  overflow: hidden; text-overflow: ellipsis;
}

.waku{
/*    padding: 8px 19px; */
    padding: 8px 5px;
    margin: 0.5em 0;
    background: #ffffff;
	border-top: solid 1px #00ffff;
	border-right: solid 1px #00ffff;
	border-bottom: solid 1px #00ffff;
    border-left: solid 1px #00ffff;
}
.waku p {
    margin: 0;
/*    padding: 0;*/
    padding: 0;
}
/* <!-- // 参考サイト https://saruwakakun.com/html-css/reference/box --> */


/* <!-- クリックした時のモーダルウィンドウ（サイズ調整版） --> */
.modal-wrapper{
  z-index: 999999;
  position: fixed; inset: 0;
  padding: 6vh 3vw;          /* ← 余白を viewport 基準にして画面に馴染ませる */
  text-align: center;
}
.modal-wrapper:not(:target){
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.modal-wrapper:target{
  opacity: 1; visibility: visible;
  transition: opacity .4s, visibility .4s;
}
.modal-wrapper::after{
  display:inline-block; height:100%;
  margin-left:-.05em; vertical-align:middle; content:"";
}

/* ★ここが本体サイズ */
.modal-wrapper .modal-window{
  box-sizing: border-box;
  display:inline-block; vertical-align:middle;
  position:relative; z-index:20;

  /* 幅は「画面の96%」か「720px」の小さい方に自動調整 */
  /* min() が不安なら下の “代替” を使ってOK */
  width: auto;
  max-width: min(96vw, 720px);

  max-height: 90vh;            /* 画面に収める上限（重要） */
  overflow: hidden;            /* 中身は .modal-content 側でスクロール */
  padding: 16px 16px 12px;     /* 余白を少し控えめに */
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

/* 幅の min() が使えない環境向けの代替（必要なら有効化）
.modal-wrapper .modal-window{
  width: 96vw;
  max-width: 720px;
}
*/

.modal-wrapper .modal-window .modal-content{
  max-height: calc(90vh - 48px);  /* 余白・ボタン分を差し引いて内部スクロール */
  overflow-y: auto;
}

/* 画像をきれいに収める */
.modal-wrapper .modal-window .modal-content img{
  display:block;
  width:100%; height:auto;
  max-height: calc(90vh - 80px);  /* タイトルや余白ぶんを差し引き */
  object-fit: contain;            /* 切らずに全体表示 */
}

/* オーバーレイ */
.modal-overlay{
  z-index:10; position:absolute; inset:0;
  background: rgba(0,0,0,.55);    /* 少し明るめに */
}

/* 閉じるボタン */
.modal-wrapper .modal-close{
  z-index: 30; position:absolute;
  top: 8px; right: 10px;
  width:auto; padding: 0 6px;
  color:#666 !important; font-size:24px; line-height:1;
  text-decoration:none; text-indent:0;
}
.modal-wrapper .modal-close:hover{ color:#000 !important; }

/* スマホは“ほぼ全画面”寄りに */
@media (max-width: 767px){
  .modal-wrapper{ padding: 4vh 2vw; }
  .modal-wrapper .modal-window{
    max-width: 96vw;            /* ほぼ横いっぱい */
    max-height: 86vh;           /* 指が届く余白を残す */
    border-radius: 10px;
  }
  .modal-wrapper .modal-window .modal-content{
    max-height: calc(86vh - 44px);
  }
  .modal-wrapper .modal-window .modal-content img{
    max-height: calc(86vh - 76px);
  }
}
/* <!-- // クリックした時のモーダルウィンドウ --> */


a.anchor{
    display: block;
    padding-top: 300px;
	margin-top:-300px;
}




/* css統合 */
/* ===== PC overrides (Phase 1) — from style-1000px_background.css ===== */
@media (min-width: 768px){

  /* 文字スケール */
  html{ font-size: 100%; }

header {
  padding-top: 20px;  /* ここで固定ヘッダぶんスペースを確保 */
}

/* ヘッダー：固定をやめて高さ50px・白背景 */
.Header-Title-Area{
/*    position: static; height: 50px; */
    background-color: rgba(255,255,255,1.0);
/*    z-index: 0; */
    top: 0px;
	height: 40px;
  }

/* 注警報帯：通 */
.warning_area{
    height: 35px;
/*    margin: 17px 0 0 0; */
    margin: 10px 0 0 0;
	font-size: 100%;
  }

/* メニュー：通常フロー・高さ29px */
#menu{
/*	margin-top: 50px; */
	margin-top: 15px;
	height: 29px;
	color: #000;
	font-size:120%;
}

/* 本文オフセットを解除（上3ブロック分の余白を外す） */
/*  .Frame{ padding: 0; } */
  .Frame{ 
/*  	padding: 100px 0 0 0;  */
	padding-top: 90px;	/* marginとmargin-topは別扱いされるので上書きするなら揃えること */
  	}

  /* カード幅：PCは横並び */
  .ContentTile{ width: 32vw; font-size: 1rem; }
  .ContentTileImage{ width: 30vw; }

  /* SVG */
  svg .svg-title{ font-size: 30px; }
/*  svg .svg-stamp{ font-size: 24px; } */
  svg .svg-stamp{ font-size: 28px; }
  svg .svg-label{ font-size: 18px; }
  
  /* フッター：PCは 40px 黒・fixed（元CSS準拠）＋被り防止 */
  #Footer{ position: fixed; left: 0; right: 0; bottom: 0; height: 40px; background-color: #000; }
  body{ padding-bottom: 40px; }

  /* よく差が出る細部（必要最低限） */
  .heder-Area-Right div{ margin-left: 8px; margin-right: 8px; font-size: 12px; }
  .menu-item{ padding: .32rem .4rem; }
  .circle{ width: 20px; height: 20px; }
  .circle-text{ font-size: 12px; line-height: 20px; }
  .IMG-fileName{ font-size: 12px; }
  .IMG-DateTime{ font-size: 18px; padding: 0 8px; }
  .Btn-L{ font-size: 20px; }
  .Btn-M{ font-size: 16px; }

  /* 1) 画面の外側余白を控えめにして、中身に高さを回す */
  .modal-wrapper{
    padding: 4vh 2.5vw;  /* ←上下/左右の余白。大きいと中身が小さくなる */
  }

  /* 2) 本体サイズの上限（横＆縦） */
  .modal-wrapper .modal-window{
    /* 横は「画面の96%」か「1100px」の小さい方まで広げる */
    width: auto;
    max-width: min(96vw, 1100px);    /* ← 720px では小さければ上げる。900/1100など好みで */
    /* 縦は画面の92%まで（はみ出し禁止） */
    max-height: 92vh;
    overflow: hidden;                /* 中身のスクロールは .modal-content に任せる */
    padding: 16px 16px 12px;         /* 以降の calc() と一致させるため固定 */
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
  }

  /* 3) 内部スクロール領域（窓の余白ぶんを差し引く） */
  .modal-wrapper .modal-window .modal-content{
    max-height: calc(92vh - 44px);   /* 16px+16px+ボタン周り少々 ≒ 44px */
    overflow-y: auto;
  }

  /* 4) 画像は“ギリギリまで”拡大、比率維持で切らない */
  .modal-wrapper .modal-window .modal-content img{
    width: 100%;
    height: auto;
    max-height: calc(92vh - 76px);   /* タイトル/余白込みの見積り。はみ出すなら数値↑ */
    object-fit: contain;
    display: block;
  }

}