@charset "UTF-8";

/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
input, button, select, textarea {-webkit-appearance: none;border-radius:0;}

/*================================================
 *  一般・共通設定
 ================================================*/
body {
	font-size:14px;
	color:#333;
	font-family:"BIZ UDゴシック Regular","メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	line-height:1.6;
	background:#fff;
}

.inner {
	position:relative;
	width:980px;
	margin:0 auto;
}

header {
	box-sizing:border-box;
	position:relative;
	width:100%;
}


#contents {
	position: relative;
	overflow:hidden;
	width:960px;
	margin:35px auto 50px auto;
	background:#fff;
}



#main {
	box-sizing:border-box;
	overflow:hidden;
	float:left;
	width:680px;
}

#main ul {
	list-style-type: disc; /* 丸印（デフォルトの順序なしリストマーカー） */
}

#main li {
	font-size:25px; /* 各項目のフォントサイズ */
	margin:10px auto;
}

#sub {
	box-sizing:border-box;
	overflow:hidden;
	float:right;
	width:240px;
	background:#faf9f7;
	border: 2px solid #65c469; /* 2pxの太さで、実線の、緑の線 */
	border-radius: 5px; /* 5ピクセル丸める */
}

#sub ul {
	list-style-type: disc; /* 丸印（デフォルトの順序なしリストマーカー） */
}

#sub li {
   	padding-left: 2px; /* マーカーとリスト内容の間の余白 */
	font-size:18px; /* 各項目のフォントサイズ */
	margin:7px auto;
}

footer {
	box-sizing:border-box;
	width:100%;
	margin:0 auto;
}

a {
	color:#333;
	text-decoration:underline;
}

a:hover {
	color:#333;
	text-decoration:none;
}

h2 {
	margin:0 0 1em 0;
}

h2 a{text-decoration:none}


p {
	margin:0 0 1em 0;
}

img {
	vertical-align:bottom;
}

em {
	font-weight:bold;
}

strong {
	font-weight:bold;
	color:#ff0000;
}

pre {
	margin:1em 0;
	padding:1em;
}

blockquote {
	margin-bottom:1em;
	padding:1em;
	border:1px dotted #ddd;
	border-left:5px solid #ddd;
}

ul,ol,dl {
	margin:0 0 1em 0;
}

/*================================================
 * バナーメニュー
 ================================================*/

/* マーカーを消したいリストの親要素に no-marker クラスを付けて HTML側で指定 */
/* 例： <ul class="no-marker"><li>...</li></ul> */
.no-marker li {
    list-style: none;
}
ol li {
	list-style:none;
}
li {
	margin:0;
}

dl{
	width:100%;
	text-align:left;
	font-size:108%;
	line-height:1.4em;
}
dt {
	float:left;
	clear:left;
	width:30%;
	padding:0.7em 0;
	font-weight:bold;
}
dd {
	padding:0.7em 0;
	padding-left:31%;
	border-bottom:1px dotted #999;
	word-break: break-all
}

table {
	width:100%;
	margin-bottom:1em;
	border-collapse:collapse;
	border:1px solid #ddd;
	background:#fff;
}
th {
	padding:10px;
	text-align:center;
	vertical-align:middle;
	border:1px solid #ddd;
	background:#eee;
}
td {
	padding:10px;
	text-align:left;
	border:1px solid #ddd;
}

.clear:after {
  content: "";
  clear: both;
  display: block;
}

/*================================================
 *  ヘッダー
 ================================================*/
header {
	background:#f1efe9;
	border-top:3px solid #65c469;
}

header .inner{
	/* background:url(../images/top/pic_header.jpg) no-repeat top right; */
	height:110px;
	border-top:1px solid #fff;
}

header h1 {
	margin-top:25px;
}

/*================================================
 *  フッター
 ================================================*/
footer {
	clear:both;
	border-top:3px solid #65c469;
}

.copyright {
	clear:both;
	padding:20px 0 20px 0;
	font-size:11px;
	text-align:center;
}

/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {
	position:fixed;
	bottom:15px;
	right:15px;
}
.totop a {
	display:block;
	text-decoration:none;
}
.totop img {
	background:#65c469
}
.totop img:hover {
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter:"alpha( opacity=80 )";
}


/*================================================
 *  総合メニュー 
================================================*/

.comprehensive_menu{
	width:980px;
       margin:20px auto;
	
}

.comprehensive_menu ul{
	padding:0px;
	display: grid; /* Gridを有効にする */
  	gap: 10px; /* 画像と画像の間隔を設定（任意） */
  	/* 画像が3枚なら3つの列を定義。fr単位を使うと残りのスペースを均等に分割 */
  	grid-template-columns: repeat(6, 1fr);
  	/* または具体的なピクセル幅を指定: grid-template-columns: 200px 200px 200px; */
  	/* または異なる幅: grid-template-columns: 1fr 2fr 1fr; */
}

.comprehensive_menu ul img {
  	width: 100%; /* 親要素のグリッドセルに合わせて幅を100%にする */
  	height: auto; /* 高さは元の比率を維持 */
  	display: block;
  	object-fit: cover; /* 画像の比率を保ちつつ、要素に収まるようにトリミング（任意） */
}

.comprehensive_menu li{
	background:#CEE0A2;  /* 画像の下の色を指定（緑）*/
}

.comprehensive_menu li img:hover{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter:"alpha( opacity=80 )";  /*"マウスオーバーされたとき（ホバーしたとき）に、
                                           その画像の透明度を80%に下げる"*/
}

.comprehensive_menu_border{
  border: 2px solid #f1efe9; /* 幅2px、実線、灰色のボーダー */
}

/*================================================
 *  主題
================================================*/
.main_subject{
	font-size:50px;
	text-align: center;/* 文字の位置を中央を指定 */
	text-decoration: underline; /* 下線を引くことを指定 */
  	text-decoration-style: double; /* 二重線にする */
 	text-underline-offset: 5px; /* 二重線を文字から5px離す */
  	text-decoration-thickness: 3px; /* 二重線の太さ */
  	text-decoration-color: #65c469; /* 線の色（緑） */
}

/*================================================
 *  各題目（メイン）
================================================*/
.main_theme{
	background-color: #f1efe9;
	margin:55px auto 15px;
	padding: 5px 5px 5px 10px; /* 文字と枠線の間に余白（任意） */
 	border-left: 15px solid #65c469; /* 左側に緑の線を追加 */
	font-size:30px;
	border-radius: 5px; /* 10ピクセル丸める */
}

/* メインの題目に高さを合わせるためのもの*/
.main_theme_a{
	background-color: #f1efe9;
	margin:0px auto 15px;
	padding: 5px 5px 5px 10px; /* 文字と枠線の間に余白（任意） */
 	border-left: 15px solid #65c469; /* 左側に緑の線を追加 */
	font-size:30px;
	border-radius: 5px; /* 10ピクセル丸める */
}

#main img{
	width: 100%;
}
/*================================================
 *  各題目（サブ）
================================================*/
.sub_theme{
	margin:30px auto 0px;
	padding: 5px 5px 0px 10px; /* 文字と枠線の間に余白（任意） */
	font-size:20px;
	border-radius: 5px; /* 10ピクセル丸める */
}

/* メインの題目に高さを合わせるためのもの*/
.sub_theme_a{
	margin:0px auto 0px;
	padding: 5px 5px 0px 10px; /* 文字と枠線の間に余白（任意） */
 	font-size:20px;
	border-radius: 5px; /* 10ピクセル丸める */
}

/* 題目の下線*/
.sub_theme_border{
	background-color: #d4d1c9;
	height: 5px; /* ボックスの高さ */
	margin:0px 7px 15px 7px;
 	border-left: 60px solid #65c469; /* 左側に緑の線を追加 */
	border-radius: 5px; /* 10ピクセル丸める */
}

/*================================================
 *  ハンバーガーメニュー（スマホの場合のみ表示）
 ================================================*/
/* チェックボックスを非表示にする */
.hidden-checkbox {
    display: none;
}

/* メニューボタンのスタイル（ハンバーガーアイコン） */
.menu-button {
    position: fixed; /* 画面に固定 */
    top: 1px;
    right: 0px;
    width: 40px;
    height: 77px;
    border: 3px solid #65c469;
    background-color: #f1efe9;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    z-index: 1001; /* メニューより手前に表示 */
}

.burger-icon {
    display: block;
    width: 28px;
    height: 3px;
    background-color: #65c469;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* メニューのスタイル */
.main-menu {
    position: fixed;
    top: 0;
    right: -300px; /* 初期状態では画面外に隠す */
    width: 300px;
    height: 100%;
    background-color: #65c469;
    padding-top: 80px; /* ボタンと被らないように */
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    transition: right 0.3s ease; /* スライドのアニメーション */
    z-index: 1000;
}

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

.main-menu ul li a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #444;
    transition: background-color 0.2s;
}

.main-menu ul li a:hover {
    background-color: #555;
}

/* チェックボックスがチェックされたときのメニュー表示 */
#menu-toggle:checked ~ .main-menu {
    right: 0; /* 画面内にスライドイン */
}

/* チェックボックスがチェックされたときのハンバーガーアイコンの変化 */
#menu-toggle:checked ~ .menu-button .burger-icon:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#menu-toggle:checked ~ .menu-button .burger-icon:nth-child(2) {
    opacity: 0; /* 真ん中の線を消す */
}

#menu-toggle:checked ~ .menu-button .burger-icon:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/*================================================
 *  sp pc 表記切替
 ================================================*/

.pc { display: block !important; }
.sp { display: none !important; }

@media only screen and (max-width: 479px) {
.pc { display: none !important; }
.sp { display: block !important; }

}


/*================================================
 *  スマートフォン縦用
 ================================================*/

@media only screen and (max-width: 479px) {
	header{
	float:none;
	position: fixed;
	top: 0;          /* 画面の上端から0pxの位置 */
 	left: 0;         /* 画面の左端から0pxの位置 */
	z-index: 1000;   /* 他の要素の上に表示したい場合 */
	}
	header h1 {
	text-align:center;
	margin-top:20px;
	}
	header h1 img{
	width:75%;
	}
	header .inner{
		background: none;
		height: 95px
	}
	#contents{
		margin-top:0px;
	}
	#main{
		float:none;
		width:100%;
	}
	#sub{
		display:none;
		width:100%;
	}
	body , header, header .inner , footer , .tab_content , .tabmenu  {
		width:100%;
	}
	#contents {
		margin-top: 99px;
		width:90%;
		padding:5%;
	}
}
/*================================================
 *  タブレット用
 ================================================*/

@media screen and (max-width:768px) {
 
}

/* ==================================== 
 * 印刷時のみ適用されるスタイル *
 ==================================== */
@media print {
    body {
        /* 背景色を強制的に印刷 */
        background-color: #f1efe9 !important;
        /* -webkit-print-color-adjust: exact; はWebKit系のブラウザ（Chrome, Safariなど）で特に重要 */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact; /* 標準プロパティ (まだ広くサポートされていない) */
    }

    .my-box {
        background-color: lightblue !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        /* 背景画像の場合 */
        /* background-image: url('path/to/your/image.png') !important; */
    }