@charset "UTF-8";

/*""*/

a{
	text-decoration: none;
color: dimgray;
}
ul{
	list-style: none;
padding:0px;
margin:0px;
}
/*"上、ulにはデフォルトで左マージンがつい
ていて、右寄せになるのを避ける"*/

h1{
	font-size:8px;
text-align:right;
height:60px;
}
h2{
	text-align:center;

    font-size: 26px;
	padding: 0px 60px;
	font-family:serif;

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

hr{
	width:90%;
height:1.8px;
margin-top:40px;
background-image: linear-gradient(to right,black,gray,white);
}

body{
	font-family:meiryo;
}
#logo{
    position: absolute;

	 width : 60%;
    left : 24%;
	top:300px;
	color:white;
	text-align: center;
font-size:40px;
}
header{
	position:relative;
    width: 100%;
		max-height:800px;
		overflow:hidden;
margin-top: 57px;
}
header img{
	margin:0 auto;
width:inherit;
	height:auto;

}
footer {
    font-size: 10px;
}
footer a{
color:blue;s
}
.open{
    border: gray 1px solid;
    font-size: 20px;
    border-radius: 8px;
    padding: 4px;
    margin: 8px 8px;
}
nav#mobile-bar{
    margin: 24px;
}
#drop{
    display: none;
}
ul.mobile-nav-0{
    line-height: 35px;
}
.center{
	text-align: center;
}
.textplain{
	width:80%;
margin:20px auto;
}
.imgcenter{
	text-align: center;
margin: 0 auto;
}
.half{
	width: 40%;
float: left;
margin: 5%;
}
.box1{
	margin:80px auto;
}
.upbox{
          width: 320px;
        margin: 8px auto;
}
.downbox{
    width: 320px;
    margin: 8px auto;
}


/*ドロワーメニューhttp://lopan.jp/css-animation/サイトから学習*/

.open,
.close{
	/* ドロワー三本線ボタンの状態*/
  position: fixed;
  top: 0;
  left: 0;
  }
 .menu{
  z-index: 4;/* 引き出しをすべての上レイヤーに表示 */
  position: fixed;
  top: 60px;
  left: 0;
  width: 220px;

  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);/* 引き出しの初期位置 */
  -webkit-transition: -webkit-transform 1s;
  transition: transform 0.3s;/* 引き出しの開けるスピード */
}
 #tgl:checked ~ .menu {/* チェックされたとき後続要素のnavーmenuが展開 */
  -webkit-transform: translateX(0);
  transform: translateX(0);/* 初期位置-100%から通常位置０（表示圏内）に */
}
.drawer li{
	font-size:18px;
padding:8px 20px;
    border-bottom: black 1px solid;
}
.drawer{
  background-color: beige;
}/* スマホで反映されない？？ */
#tgl{
	display:none;
}


/*"タブレットもタップ操作なのでメニューボタンは必要。それ以上は無用。以下はhttps://allabout.co.jp/gm/gc/416557/からの借用。ただ、メニューhtmlがパソコン用（別CSS)とタブレット用（以下）に２回書いているので、統合したい。　"*/
@media screen and (min-width: 1000px){
#drop{
    display: block;
}
nav#mobile-bar{
    display: none;
}
ul.ddmenu{
    display: block;

   margin: 0px;               /* メニューバー外側の余白(ゼロ) */
   padding: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
   background-color: dimgray ; /* バーの背景色(濃い赤色) */
}
ul.ddmenu li{
   width: 200px;          /* メニュー項目の横幅 */
   display: inline-block; /* ★横並びに配置する */
   list-style-type: none; /* ★リストの先頭記号を消す */
   position: relative;    /* ★サブメニュー表示の基準位置にする */
}
ul.ddmenu a{
   background-color: dimgray ; /* メニュー項目の背景色(濃い赤色) */
   color: white;              /* メニュー項目の文字色(白色) */
   line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-weight: bold;         /* 太字にする */
   display: block;            /* ★項目内全域をリンク可能にする */
}
ul.ddmenu a:hover{
   background-color: gray; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
   color: gainsboro ;            /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
}
ul.ddmenu ul{
   margin: 0px;        /* ★サブメニュー外側の余白(ゼロ) */
   padding: 0px;       /* ★サブメニュー内側の余白(ゼロ) */
   display: none;      /* ★標準では非表示にする */
   position: absolute; /* ★絶対配置にする */
}
ul.ddmenu ul li{
   width: 196px;               /* サブメニュー1項目の横幅*/
   border-top: 1px solid pink; /* 項目上側の枠線(ピンク色で1pxの実線) */
}
ul.ddmenu ul li a{
   line-height: 35px;   /* サブメニュー1項目の高さ(35px) */
   text-align: left;    /* 文字列の配置(左寄せ) */
   padding-left: 5px;   /* 文字列前方の余白(5px) */
   font-weight: normal; /* 太字にはしない */
}
ul.ddmenu ul li a:hover{
   background-color: gray; /* サブメニュー項目にマウスが載ったときの背景色(淡い黄色) */
   color: gainsboro ;            /* サブメニュー項目にマウスが載ったときの文字色(濃い緑色) */
}
ul.ulsub{
	/* 追加分、ロゴをzindex＝１にしたため、下に隠れるのを防ぐ */
    z-index: 3;
}
h2{
	padding:40px 40px;

}
img{

}
label.open {
   /* display: none; パソコンではドロワーを表示しない */
}
.textplain{
	width:50%;
margin:0px auto;
padding:0px;
}
.center{
	padding:40px;
}
/*"画像文字横並び"*/
.box1{
	margin: 80px auto;
width: 920px;
height: 220px;
clear: both;
}
.upbox{
    width: 320px;
    margin: -10px auto;
    float: left;
    padding:4px 24px;
}
.downbox{
    width: 438px;
    margin: 8px auto;
    float: left;
    padding:4px 24px;
}
.box1 img{
    margin-top: 20px;
}
}



@media screen and (max-width: 600px){
#logo{
    top: 160px;
}

}