html,body,div,span,iframe,h1,h2,h3,h4,p,pre,del,em,img,b,i,dl,dt,dd,ol,ul,li,form,table,tbody,tr,th,td,article,aside,footer,header,nav,section{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;box-sizing:border-box;}
article,aside,footer,header,nav,section{	display:block;	}
body{	line-height:1;	overflow-wrap:break-word;	word-wrap:break-word;	}

input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;vertical-align:middle;box-sizing:border-box;}

a{margin:0;padding:0;text-decoration:none;outline:none;font-size:100%;vertical-align:baseline;background:transparent;}
a img{border-style:none;}

ul,li{list-style-type:none;}
.cf:before,.cf:after{content:" ";display:table;}
.cf:after{clear:both;}


/* ウェブフォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');


/* ===================================
背景,文字,リンク設定
=================================== */

html{	font-size:62.5%	}
body{
	background:#efefef;	/* 背景 */
	color:#000;		/* 文字色 */
	font-size:1.2em;	/* 文字の大きさ */
	font-family:'Segoe UI','游ゴシック Medium','Yu Gothic Medium','游ゴシック体',YuGothic,'Hiragino Kaku Gothic ProN',sans-serif;
	letter-spacing:.1em;	line-height:1.5;	text-align:center;	}

img{	height:auto;	max-width:100%;		}

/*  リンク
------------------------------ */

a:link 		{ color: #C9AB53; }	/* 未訪問リンク */
a:visited 	{ color: #000000; }	/* 既訪問リンク */
a:hover 	{ color: #C9AB53; }	/* マウスが載ったとき */

#contents a{	  color:#C9AB53;	text-decoration:underline;	}



/* ================================
基本
=================================== */

#wrapper{
	background:#fff;
	border:1px solid #000;
	margin:120px auto 40px;
	text-align:left;
	border-radius: 10px;
	width:600px; /* 全体の幅・大きさはここで変更 */
}
#contents{
	border-radius:10px;
	padding:30px 20px;
	background:#fff;	/* 背景 */
}

footer{
	padding:3em 0em;
	text-align:center;
	background-color:#333333;
}


.footer-sub{
	margin:0 0px;
	padding:5px 10px;
}



/* ===================================
●自作追加CSS
=================================== */


.memo{margin-bottom:10px;padding:0px 20px;}

.ss{	margin-bottom:10px;padding:10px 20px;
	font-family: "Zen Old Mincho", serif;
	letter-spacing:0.10em;	line-height:1.8;
	font-weight: 200;}

p {	padding:5px 2px;}


.menu{	margin: 10px;	letter-spacing:2.4em;	}



header{	border-radius: 0px;
	background-color:#333333;
	color:#fff;
	margin:0;
	padding:5px;
	position:fixed; 
	height: 90px;	/*高さ指定*/
	width:100%;	/*横幅指定*/
	z-index: 9999;  /*どの要素よりも上にくるように*/
	top: 0px;　/*一番上に設置*/
	left: 50%; /*　左50％　*/
}



#header_menu{

	display: block; 
	position: fixed; /*ポジションを固定する*/
	top: 0px;　/*一番上に設置*/
	left: 0px;
	z-index: 9999;  /*どの要素よりも上にくるように*/
	/* background-color: rgba(110,169,36,0.78);　　メニューバー背景色*/
	width: 100%; /*横幅を100%に*/
	padding: 0 0;
}


#header_menu a {
	float: left; /*メニューを横並びにする*/
	font-size: 16px;
	color: #FFF;
	padding: 10px;
}

#header_menu a:after { /*floatでデザインが崩れないように*/
display:block;	clear: both;	content:"";　　　
}


/* ===================================
●グリッドレイアウト
=================================== */

.grid_box{	width:100%;
		display:grid;
		grid-template-columns:48% 48%;
		grid-template-rows:200px 200px;
		column-gap:20px;
		row-gap:10px;}

.box01{}
.box02{}
.box03{}
.box04{}
.box05{}
.box06{}





/* ================================
●メールフォーム
=================================== */

#form{	background-color:skyblue;	}
#formlink{	background-color:pink;	}



/* ================================
●SVGアイコン
=================================== */

.svg-object {    width : 2em;    height: 2em; }

.svg-object svg .svg-fill {    fill: #FFD700; /* 薄いゴールドの色 */ }


.filter-white{	filter: brightness(0) saturate(100%) invert(84%) sepia(94%) saturate(5%) hue-rotate(214deg) brightness(114%) contrast(100%);
	width : 20px;	height: 20px;	}

.filter-gray{	filter: brightness(0) saturate(100%) invert(18%) sepia(12%) saturate(15%) hue-rotate(9deg) brightness(95%) contrast(93%);
   	width : 1.8em; 	height: 1.8em;    }



/* ===================================
メニュー
=================================== */


#menu{	line-height:1;	text-align:center;	margin:20px 0;	padding:5px 0px;	position:relative;	width:100%;	}


nav li{	display:inline-block; /* 横並び */
	margin:0 6px;	height:2em;
	line-height:2em /* メニュー高さ */}
nav li a,nav li span{	color:#000;	display:block;	font-weight:700;	text-decoration:none;	}
nav li a:hover,nav li span:hover{	background:rgba(0,0,0,.8);	color: #fff;	transition:.6s;	}





/* ===================================
見出し、枠、線
=================================== */

h1,h2,h3,h4{	font-family: 'New Tegomin';	}

h2{	border-radius: 10px;
	background-color:#333333;
	font-size:1.5em;	color:#ffffff;
	margin:35px 0px 20px 0px;	padding: 5px 15px; }

h3{	background-color:#ffffff;	border-bottom:1px dotted;
	font-size:1.2em;	margin:12px 10px;	padding-left:10px; }



/* ===================================
テーブル、テキストエリア
=================================== */

dt{	clear:both;	font-weight:400;	float:left;	margin:0 20px;	width:160px;	}

dd{	border-bottom:1px dotted;	margin:0px 30px 10px 180px;	padding:0px 10px;	}


dt.up{	font-family: 'New Tegomin';	font-weight:700;	}

input,textarea{	background:#fff;	border:1px solid;	margin:3px 0;	width:80%;	}

textarea{	height:50px;	}


/* ===================================
テキスト装飾
=================================== */

.horizon{
	border:0;
	border:none;
	border-top:1px dotted #333333;
	display:block;
	margin:1em 20px;
	padding:0px;
	height:5px;　}


/* 強調 */
em{	background-color:#cccccc;	font-weight:700;}


 /* 古いブラウザ用の単色背景 */
 /* 標準の線形グラデーション */
.marker {
    background: #EBE1A9;
    background: linear-gradient(rgba(215,236,239,0) 60%, #EBE1A9 0%);
    padding: 1px 1px;	}

/* 文字の横に見出し線 */
.dcline{	border-left:10px solid;	margin:5px 0;	padding:3px;}

/* 文字の横に破線 */
.txt{	margin:10px 0;	padding:5px;}


/* テキストボックス（囲み枠） */
.textbox{	border:1px dashed;	margin:10px 0;	padding:3px;	text-align:center;}

/* タイトル（サイト名や作品名） */
.title{	font-size:2.2em;	margin:0.1em;
	font-weight:700;
	font-family:'New Tegomin';}

/* 画像に枠 */
.frame{	background:#fff;	border:1px solid;	padding:5px;	}



/* ===================================
スマホ、タブレット用
横幅600pxで切り替え
=================================== */

@media screen and (max-width: 600px){
body{
	font-size:1.2em;
	padding:20px 10px 60px 0px;
}

#indexta,#wrapper{
	margin:20px 0px;
	position:relative;
	width:100%;
}

#wrapper{margin:100px 5px 10px 5px;}

h1{
	padding-right:50px;
	min-height:40px;
}
/* 画像の縮小表示 */

dt{	float:none;clear:none; width:auto;	}
dd{	margin-left:20px;	}



/* ===================================
スマホ、タブレット用メニュー
=================================== */

/*  スライド
------------------------------ */
#menu{
	background:rgba(0,0,0,.8);
	border:none;
	display:none;
	position:absolute; /* 表示位置固定 */
	width:100%;
	left:0;
	z-index:20;
}