@charset "UTF-8";

/*""*/
body{
    font-family: "メイリオ",meiryo;
    font-size: 16px;
    line-height: 26px;
}
body,p,div,h1,h2,ul,li{
    background-color: white;
    color: black;
    margin: 0;
}
div#build-menu-page{
    background-color: white;
}
.hr{
    clear: both;
    height: 0px;
    background-color: white;
}
a{
	text-decoration: none;
color: dimgray;
}
ul{
	list-style: none;
padding:0px;
margin:0px;
}
/*"上、ulにはデフォルトで左マージンがつい
ていて、右寄せになるのを避ける"*/

h1{
	font-size:24px;
text-align:center;
    margin: 20px auto 4px auto;
}
h2{
	text-align:center;
text-shadow: 4px 6px 10px goldenrod;
    font-size: 26px;
	padding-top: 120px;

}
h3{
	text-align:center;
padding:20px;
}
img{
	max-width:100%;
margin: 0 auto;
}

.txtbox{
	width:80%;
height: auto;
margin:20px auto;
padding:10px;
}
.minitxt{
	width:80%;
margin:20px auto;
font-size: 0.8em;
padding:10px;
}
#logo1{
    margin: 0 auto;
    width: 200px;
    background: none;
}
#logo{
    position: absolute;
    z-index: 1;
	 width: 40%;
    left: 33%;
	bottom:20%;
	color:white;
    text-align: center;
    background:none;
}
header{
	position:relative;
    width: 100%;
		max-height:600px;
		overflow:hidden;
}
header img{
	margin:0 auto;
width:inherit;
	height:auto;

}
a#build-menu-button{
    border: blue 1px solid;
    font-size: 20px;
    border-radius: 8px;
    padding: 6px;
    margin: 12px 12px;
}
nav#mobile-bar{
    margin: 24px;
}
#drop{
    display: none;
}
ul.mobile-nav-0{
    line-height: 35px;
}
.center{
	text-align: center;
padding: 60px;
}
.imgcenter{
	text-align: center;
margin: 0 auto;
}
.half{
	width: 40%;
float: left;
margin: 5%;
}
.box1{
    border: dotted 2px silver;
    box-shadow: 0 0 0 2px #fff, 0 0 0 8px #888;
    border-radius: 10px;
margin: 0 auto;
width:100%;
height:auto;

}
ul.col3{
    text-align: center;
    height: 640px;
    border-top: 1px solid wheat;
}

.layer{
    width;100%;
    height: 100px;
    padding:100px;
    background: url(1848aji.JPG) no-repeat 100% 100% fixed;
    }
footer{
    background-color: gray;
}
.foot{

    background: gray; 
    width:100%;
    margin:0 auto;
 
}
.foot li{
    background-color: gray;
}


/*"タブレットもタップ操作なのでメニューボタンは必要。それ以上は無用。以下は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: 140px;          /* メニュー項目の横幅 */
   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;
}

}




/*"パソコン用の指定"*/
@media (min-width: 800px){
    .box1{
        width: 400px;
        padding: 80px;
    }
.txtbox{
	width:60%;
}
.minitxt{
	width:60%;
}
    ul.col3{
        width: 1080px;
        height:360px;
        margin: 0 auto;
        background-color: black；
    }
    ul.col3 li{
        float:left;
        width:320px;
        height:auto;
        margin:20px;

    }
    .layer{
    height: 400px;
    padding:100px;
    background: url(1848aji.JPG) no-repeat 100% 100% fixed;
    }
.layer div{
    text-align: center;
    font-size: 10px;
    color: wheat;
    font-family: serif;
}
.inlayer{
    background: none;
}
.foot{
    width: 600px;
       padding: 20px;
}
}
ing: 200px;
}
}