@charset "utf-8";
/* CSS Document */

body{
font: 16px/2 "Hiragino Kaku Gothic Pro",Osaka,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
margin:0;
color:#000000;
min-width:1300px;
background-color: #f7f7f7;
}

#body-inside{
overflow-x: hidden;
}
.orverwidth{
margin:0 -200%;
padding:2px 200%;
text-align: center;
}
.orverwidth p{
padding:1em;
}

#wrap{
	margin: 0 auto;
	width: 100%;
}

#contents{
	margin: 0 auto;
	width: 1300px;
}

#main{
	width: 1300px;
	margin: 15px auto;
	padding-top:0px;
	padding-bottom:15px;
}
#textarea{
	width: 1300px;
	margin: 0px auto;
	background:#fff;
}
@media screen and (max-width: 1300px) {
body{
width:100%;
min-width:300px;
}
#contents{
width:100%;
}

#main{
width:100%;
}
#textarea{
width:95%;
}

}


.hometitle{text-align:center; margin-top:3em;}

.header{ margin-bottom:1em;}
.h_menu{float:right; margin-top:-30px;}
.h_achivelogo{float:right; margin-top:30px;}
.header-logo img{width:600px;margin-top: 10px;margin-left:-180px;}
.h_menu ul li{
	margin-top: 0px;
	margin-right: 0px;
	list-style-type: none;
	float: left;
}

.h_menu ul li a,#home ul.h_menu  li a{
	text-decoration:none;
	font-size:1.1em;
	font-weight:bold;
	color:#000;
}
@media screen and (max-width: 780px) {
.h_menu ul li a,#home ul.h_menu  li a{
	font-size:1em;

}
}
.h_menu ul li a:before {
  font: 1em 'FontAwesome';
    content: "\f138";
	color:#F15A22;
	 margin-right:5px;
}

.h_menu i{
	color:#F15A22;
	 margin-right:5px;
}

.block-wrap{
    background-image: url(../images/learning_menubg.png);
    background-size: 110%;
    background-position: -84px 24px;
}
@media screen and (max-width: 780px) {
.header-logo img{width:80%;margin-top: 10px;margin-left:-80px;}

.block-wrap{
    background-image: none;

}

}

.footer{ text-align: center; margin-top:1em;}

a{
	color: blue;
	text-decoration: none;
}

a:hover {
	color: #F5A862;
	text-decoration: underline;
}

.clear {clear:both;}






.history_menu{text-align:center; margin-top:2em;}
.history_menu a{text-align: center;
border: 1px solid #00a99d;
padding: .5em 6em;
font-size: 1.2em;
font-weight: bold;
color:#fff;
border-radius: 8px;
background:#00a99d;

}

#home .goto_help{float:right; margin-top:-10em;position:relative;}

.main_menu ul{display:table; width:1080px;}
.main_menu ul li{display:table-cell; text-align:center;font-size:.8em; width:calc( 1080px - 14px / 7 );}
.main_menu ul li a{ 
text-decoration: none; 
line-height:1.1em;
font-weight:bold; 
background-size: auto auto;
background-color: rgba(223, 241, 254, 1);
background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(240, 249, 255, 1) 2px, rgba(240, 249, 255, 1) 5px );
display:block;
padding:1em 0; 
color:#000; 
margin-left:2px;
border-top:0px solid #EDDD33;
border-radius:3px;

}
div.main_menu{
margin-top:-2px;
}

.main_menu ul li.active a{ 
border-top:3px solid #EDDD33;
border-right:3px solid #EDDD33;
border-left:3px solid #EDDD33;
border-bottom:3px solid #EDDD33;
border-radius:5px;
background-size: auto auto;
background-color: rgba(255, 252, 213, 1);
background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 248, 170, 1) 2px, rgba(255, 248, 170, 1) 5px );
position: relative;
top: -10px;
margin-bottom: -10px;
height: 40px;
box-shadow:#666 1px 1px 2px;
}

span.menuno{font-size:2em;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;font-weight:bold;color:#9B0A1B;}


table.histable{ background:#fff; border:solid #f7f7f7 1px;}

@media screen and (max-width: 780px) {
table.histable{ font-size:.8em;margin:.5em;}

}

.histable td.year{
width:80px;
	background: rgba(255, 255, 255, .1);
	border-right:solid #f7f7f7 1px;
	border-bottom:solid #00a99d 1px;
	text-align:center;
	padding:.5em;
	color:#666;
	font-weight:bold;
}

.histable td.cat01{
width:calc(100% / 4 );
	background: rgba(135, 208, 227, 0.2);
	border-right:solid #f7f7f7 1px;
	border-bottom:solid #00a99d 1px;

}

.histable td.cat02{
width:calc(100%  / 4 );
	background: rgba(135, 227, 160, 0.2);
	border-right:solid #f7f7f7 1px;
	border-bottom:solid #00a99d 1px;

}

.histable td.cat03{
width:calc(100%  / 4 );
	background: rgba(227, 134, 187, 0.2);
	border-right:solid #f7f7f7 1px;
	border-bottom:solid #00a99d 1px;

}


.histable td.cat04{
width:calc(100%  / 4 );
	background: rgba(227, 227, 137, 0.2);
	border-bottom:solid #00a99d 1px;

}

.histable th{
	padding:.8em;
}



.histable th.year{
width:80px;
	background: rgba(150, 150, 150, .4);
	border-right:solid #f7f7f7 1px;
	border-bottom:solid #00a99d 1px;
}

.histable th.cat01{
width:calc(1000px / 4 );
	background: rgba(135, 208, 227, 0.7);
	border-right:solid #f7f7f7 1px;
	border-bottom:solid #00a99d 1px;

}

.histable th.cat02{
width:calc(1000px / 4 );
	background: rgba(135, 227, 160, 0.7);
	border-right:solid #f7f7f7 1px;
	border-bottom:solid #00a99d 1px;

}

.histable th.cat03{
width:calc(1000px / 4 );
	background: rgba(227, 134, 187, 0.7);
	border-right:solid #f7f7f7 1px;
	border-bottom:solid #00a99d 1px;

}


.histable th.cat04{
width:calc(1000px / 4 );
	background: rgba(227, 227, 137, 0.7);
	border-bottom:solid #00a99d 1px;

}

.item{
	background: rgba(255, 255, 255,0.8);
padding:8px;
margin:5px;
border:1px solid #ddd;
font-size:.9em;
line-height: 1.2;
}

@media screen and (max-width: 780px) {
.histable th{
	font-size:.6em;
}


.histable td.year{
font-size:.6em;
}

.item{
background: rgba(255, 255, 255,0.5);
padding:2px;
margin:1px;
border:1px solid #ddd;
font-size:.8em;
line-height: 1.2;
}
}

#textpage .block_l{
float:right;
margin-top:30px;
margin-left:30px;
width:250px;
display:block;
}

@media screen and (max-width: 780px) {
#textpage .block_l{
float:right;
margin-top:0px;
margin-left:30px;
width:250px;
display:block;
}
}

#textpage .block_r{
float:left;
margin-top:30px;
margin-bottom:30px;
margin-right:30px;
width:70%;
display:block;
}

#textpage .cap{
font-size:0.8em;
}

/* #textpage h2{font-size:1.7em; line-height:1em; margin-bottom:0em;}*/
#textpage h3{font-size:1em; margin-bottom:1em;}
.other {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    gap: 20px;
    width: 65%;
}

.other > div {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    width: 100%;
    margin: 0 10px;
}

.other > div a {
    display: block;
    width: 100%;
    padding: .5em;
}

.middle{text-align: end;}

.textarea{
border: 1px solid #00a99d;
}

dl.termdata{
  display:flex;
  flex-wrap: wrap;
}

.termdata dt{width: 10%;box-sizing: border-box;padding:auto; margin-top:2em;padding-right:1em; border-right:3px #666 solid;}
.termdata dd{width: 90%;box-sizing: border-box; margin-top:2em;padding-left:1em; text-align:left;}

.data_head{
font-weight:bold;
}

@media screen and (max-width: 780px) {
.other {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    gap: 20px;
    width: 100%;
}
.other > div {
    display: inline-block;
    padding: 0px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    width: 100%;
    margin: 0;
}

.middle{text-align: left;}

dl.termdata{
  display:block;
}	
.data_head{
writing-mode:unset;
  display:block;
}
.termdata dd{width: 100%;box-sizing: border-box; margin-top:0em;padding-left:0em; text-align:left;}
.termdata dt{width: 100%;box-sizing: border-box;margin-top:2em;padding:0; border-right:0px #666 solid;}


}
.viewphoto a{border-radius:1em; background:#00A9E0;color:#fff; float:left;width:30%;text-align: center;margin-right:1em;}
.viewtxt a{border-radius:1em; background:#01B717;color:#fff; float:left;width:30%;text-align: center;}

.photosp img {width:200px;}


#home .menuno{ 
background:#9B0A1B;
width: 20%;
color:#fff;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 2.4em;
position: relative;
top: -10px;
left: 20px;
line-height: 1.6;
float:left;
box-shadow: #000 1px 3px 5px;
}


#home .menuttl{
text-align: left;
margin-left: 35%;
font-size: 1.2em;
line-height: 1.3;
padding-top: 1.3em;}

.item {
    position: relative;
    z-index: 1; /* 必要であればリンク要素の重なりのベース順序指定 */
}
.item a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 2; /* 必要であればリンク要素の重なりのベース順序指定 */

}

.item:hover {
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
    zoom:1;/*IE*/
}

#textpage .text{
padding:2em;
}

#textpage .textdesc{
margin:1.5em 0em;
}

#textpage .textdesc p{
border:1px dashed #ccc;
padding:.5em 1em;
display: inline;
}

.h_menu a.close {
 color: white;
background-color:#666;
text-decoration: none;
padding: 3px;
border-radius: 5px;
border: 2px solid #000;
margin: 0em;
}




/* 2025 */
.heading-block {
  /* ブロックの最大幅を設定 (任意) */
  max-width: 100%; 
  margin: 60px auto 20px -160px !important;
  text-align: center; /* タイトルとサブタイトルを中央寄せにする */
  background-color: transparent !important;
  padding: 0 !important;
  background-image: none !important;
}

	
.heading-block img{
  /* ブロックの最大幅を設定 (任意) */
  max-width: 100%; 

}

.main-heading {
  /* 擬似要素(線)とタイトルを配置するための基準 */
  position: relative;
  height: 40px; /* 線とタイトルを収めるための高さ */
  margin-bottom: 20px;
}

/* 3emのタイトルテキスト */
.title-text {
  font-size: 3em;
  font-weight: bold;
  color: #333;
  
  /* 線の上に配置するための設定 */
  position: absolute;
  top: 50%; /* 親要素の縦中央に移動 */
  left: 50%; /* 親要素の横中央に移動 */
  transform: translate(-50%, -50%); /* 自身のサイズを考慮して完全な中央に調整 */
  
  /* タイトルが線の上に重なるようにする */
  z-index: 10;
  /* タイトルと線の重なりが目立たないように、背景を白くする */
  background-color: white; 
  padding: 0 15px; /* タイトルの左右に隙間を作り、線が途切れているように見せる */
}
/* 矢印の線部分 */
.main-heading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  /* 線全体を右端まで伸ばす */
  width: calc(100% - 20px); 
  height: 15px; /* 線の太さ */
  background-color: #555; /* 線の色 */
  transform: translateY(-50%);
}

/* 矢印の先端（三角形）部分 */
.main-heading::after {
    content: "";
    position: absolute;
    top: 25%;
    right: -50px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 35px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 70px solid #555;
}
.sub-title {
  font-size: 1.1em;
  color: #777;
  margin-top: 10px; /* タイトル行とサブタイトルの間隔を調整 */
}

.block-container {
  /* Flexboxで横並びにする */
  display: flex;
  /* ★これが重要！アイテム数が幅を超えたら次の行に折り返す */
  flex-wrap: wrap; 
  
  /* アイテム間の縦横の隙間 */
  gap: 90px 40px; 
  
  max-width: 1200px; 
  margin: 0 auto; 
}



.info-link {
  /* <a>タグをFlexアイテムにする */
  flex-basis: calc(31.333% - 13.333px); /* ブロックの幅に合わせて設定 */
  box-sizing: border-box;
  
  /* リンクの下線を非表示にする */
  text-decoration: none; 
  /* リンクの色を親要素から継承させる */
  color: inherit; 
}

.info-block {
  /* <a>タグがブロック全体を覆うように幅を設定 */
  width: 100%;
  height: 100%; 
  
  /* Flexboxで囲まれているため、borderやpaddingはinfo-blockに残してOK */
  border: 1px solid #00a99d; 
  padding: 15px 0 15px 15px;
  box-sizing: border-box; 
  /* リンクホバー時の見た目を制御するため、transitionを追加すると滑らかになります */
  transition: all 0.3s ease; 
  background-color:#fff;
}

/* リンクにマウスが乗ったときの効果 */
.info-link:hover .info-block {
  /* ブロック全体が押せることを示すために背景色を変える */
  /* 枠線を強調する */
  /* (必要に応じてシャドウを追加しても良い) */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* リンクにマウスが乗ったとき、数字の色などを変える (より分かりやすく) */
.info-link:hover .number {
}

/* 1行目: 2emの数字と細い線 */
.header-line {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.number {
  font-size: 3.5em;
  font-weight: bold;
  margin-right: 10px;
  flex-shrink: 0;
  color: #00a99d; /* 数字に色をつけて目立たせる */
  font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
  line-height: 1em;
}

/* 数字の右側に線を作成 */
.header-line::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #00a99d;
}

/* 2行目: 1.2emの見出し */
.main-title {
  font-size: 1.5em;
  margin: 0px 0;
  padding: 0;
  font-weight: bold;
  color: #333;
  text-align:center;

}



/* 3行目: 右寄せで斜体数字 */
.footer-data {
  text-align: right;
  margin-top: 10px;
}

.italic-number {
  font-style: italic;
  font-size: 1.3em;
  color: #777;
  padding-right:15px;
  font-family: "Times New Roman";
  font-weight:bold;
}
@media screen and (max-width: 780px) {
/* 2025 */
.heading-block {
  /* ブロックの最大幅を設定 (任意) */
  max-width: 100%; 
  margin: 20px auto 0px -60px !important;
  text-align: center; /* タイトルとサブタイトルを中央寄せにする */
  background-color: transparent !important;
  padding: 0 !important;
  background-image: none !important;
}

	.home_caption{
		padding:10px;
		line-height:1.4;
	}
	
	.home_caption img{
        width: 60%;
        display: block;
        margin: 0 auto;
	}
	
.block-container {
  gap: 10px;
width:95%;
margin:0 auto;  
}

.info-link {
  /* <a>タグをFlexアイテムにする */
  flex-basis: calc(49% - .5%); /* ブロックの幅に合わせて設定 */
}
.number {
  font-size: 8vw;

}

.main-title {
  font-size: 3.3vw;
text-align:left;
margin-left:1em;
}
.footer-data {
  margin-top: 0px;
}
.home_caption{
	font-size:.8em!important;
		padding:.5em!important;
		line-height:1.4!important;
		margin:0px!important;
		}

.caption{
	font-size:.8em!important;
		padding:.5em!important;
		line-height:1.4!important;
		margin:0px!important;
		}		
}
	
/* menu */
.menu-container {
  /* Flexboxで横並び、折り返しなし */
  display: flex;
  flex-wrap: wrap; 
  
  /* アイテム間の縦横の隙間 */
  gap: 15px; /* 6列にすると隙間を少し狭くした方が見やすい */
  
  /* コンテナの幅を広めに設定 (例: 1200px) */
  max-width: 1300px; 
  margin: 0 auto 1em; 
}

@media screen and (max-width: 780px) {
.menu-container {
  display: flex;
  flex-wrap: wrap; 
    gap: 10px; /* 6列にすると隙間を少し狭くした方が見やすい */
    max-width: 95%; 
  margin: 0 auto 1em auto; 
}
}

/* リンク要素 (ブロック全体を覆う) */
.menu-link {
  /* ★これが重要！100% / 6 から gapの計算分を引く */
  flex-basis: calc(16.666% - 12.5px); 
  box-sizing: border-box;
  
  /* リンク装飾の削除 */
  text-decoration: none; 
  color: inherit; 
}

.menu-item {
  /* リンクとブロックのサイズ設定 */
  width: 100%;
  height: 100%; 
  
  /* 各ブロックの装飾 */
  border: 0px solid #ccc; 
  padding: 0px;
  box-sizing: border-box; 
  font-family: sans-serif;
  transition: all 0.3s ease;
}
/* --------------------------------------
 * 1行目: 2emの数字と細い線
 * -------------------------------------- */


.menu-number {
  font-size: 3em;
  font-weight: bold;
  margin-right: 10px;
  flex-shrink: 0;
  color: #00a99d;
      line-height: 1;
}

/* 数字の右側に線を作成 */
.header-line::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #00a99d;
}

/* --------------------------------------
 * 2行目: 1.2emの見出し
 * -------------------------------------- */
.menu-title {
  font-size: 1.1em;
  /* マージンを調整 10→5 */
  margin: 10px 0 0 0; 
  padding: 0;
  font-weight: bold;
  color: #333;
}

/* --------------------------------------
 * 3行目: 1.0emの見出し（西暦追加）
 * -------------------------------------- */
.menu-year {
  font-size: 0.9em;
  margin: 0 0 0 0; 
  padding: 0;
  font-weight: normal;
  color: #333;
}

@media screen and (max-width: 780px) {
.menu-link {
    flex-basis: calc(32% - 1%);
	}

.menu-number {
	font-size: 4vw;
	margin-right:0px;
}

.menu-title {
		font-size: 2.3vw;
        margin: 0 0 0 2em;
		}

.menu-year {
		font-size: 1.9vw;
        margin: 0 0 0 2.6em;
		}
		
}
/* --------------------------------------
 * ホバー時のデザイン設定
 * -------------------------------------- */
.menu-link:hover .menu-item {
  background-color: #f7f7f7; 
  border-color: #3498db; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.menu-link:hover .number {
  color: #e74c3c;
}	

/* term */
.centered-heading {
  /* 全体のテキストを中央寄せにする */
  text-align: center;
  font-family: sans-serif;
  padding: 20px;
}

/* 1em normal の日付 */
.date {
  font-size: 1.2em; /* デフォルトサイズ（normal） */
  font-weight: normal;
  color: #333; /* 少し控えめな色 */
  margin: 0 0 5px 0;
}

/* 2. タイトルと線を含むコンテナ */
.title-container {
  /* タイトルが線の上に重なるようにするために必要 */
  position: relative;
  /* タイトルと線が中央で独立して配置されるようにFlexboxを使用 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

.item_title {
  font-size: 2em!important; /* タイトルサイズ（お好みのサイズに調整してください） */
  font-weight: bold;
  color: #333;
  margin: 0!important;
  padding: 0 10px; /* 線と重ならないように左右にパディング */
  
  /* 線の上に表示するための設定 */
  position: relative;
  z-index: 2; /* 線(z-index: 1)よりも手前に配置 */
  line-height: 1.5;
}

.title-container::after {
content: "";
    position: absolute;
    width: 150px;
    height: 4px;
    background-color: #00a99d;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* 4. ふりがな */
.ruby {
  font-size: 1.2em;
  color: #333;
  margin: 0;
}

.gsc-input-box {
    padding: 0!important;
}