@charset "UTF-8";
 
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
 
 
/*------------------------------------------------------
 Base (Mobile First)
------------------------------------------------------*/

body{user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

body{
    color: #333;
	//background-color: #ffffef;
	background-color: #ffffff;
    width: 100%;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

 
h1 {
    font-size: 2em;
	font-family: 'Hiragino Sans', serif;
    color: #009999;
	text-align: center;
}
 
h2 {
    font-size: 1.5em;
	font-family: 'Hiragino Sans', serif;
	text-align: center;
}
 
h3 {
    font-size: 1.17em;
	text-align: center;
}
 
h4 {
    font-size: 1.12em;
	text-align: center;
}
 
h5 {
    font-size: .83em;
	text-align: center;
}
 
h6 {
    font-size: .75em;
}
 
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: 1.4;
}
 

em {
    font-weight: bold;
}
 
/* clearfix */
.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
}
 
.clearfix:after {
    clear: both;
}
 
/* For IE 6/7 only */
.clearfix {
    *zoom: 1;
}

#wrapper {
	position: relative;
	width: 100%;
	//display: flex;
	min-height: 100vh;
	background-color: #bbddee;  /* RGB */
	margin: 0 auto;
}

 
/* header
================================================ */

.header-menu {
    margin-top: 20px;
}

.menu {
    position: relative;
    width: 100%;
    //height: 50px;
    //max-width: 1000px;
    margin: 5px;
}


.menu > li {
    float: left;
    width: 23%; /* グローバルナビ4つの場合 */
    height: 45px;
    line-height: 45px;
    background: rgb(150, 170, 120);
    border: 1px solid #666;
    display: block;
    //color: #fff;
    color: #111;
}

.menu > li:hover {
    //color: #999;
    color: #111;
    //background: #072A24;
	background-color: #aaccbb;
    -webkit-transition: all .5s;
    transition: all .5s;
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}



.menu__second-level li {
    border-top: 1px solid #111;
}

.menu__second-level li:hover {
    background: #999;
}


/* 下矢印 */
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {
    clear: both;
}

.menu {
    *zoom: 1;
}

.menu > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
    position: absolute;
    top: 40px;
    width: 100%;
	min-width :150px;
    //background: #072A24;
	background-color: #aaccee;

    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

li.menu__single:hover ul.menu__second-level {
    top: 45px;
    visibility: visible;
    opacity: 1;
}
 
/* contents
================================================ */
main {
	width: 100%;
	margin: 0 auto;
	//background-color: #bbddee;
	background-color: #ccddee;    /* RGB */
	padding-bottom: 90px;

}

.menu_list {
	background-color: #cceeee;    /* RGB */
	//background: -webkit-linear-gradient(left,#ddeeff,#cceeee);
	//background: -moz-linear-gradient(left,#ddeeff,#cceeee);
	//background: linear-gradient(left,#ddeeff,#cceeee);

	//background: -webkit-linear-gradient(top,#ffeeff,#f2d6f2);
	//background: -moz-linear-gradient(top,#ffeeff,#f2d6f2);
	//background: linear-gradient(top,#ffeeff,#f2d6f2);

	margin: 10px;
}

.menu_list li {
    height: 40px;
	//background-color: #ddeeff;    /* RGB */
	background-color: #cceeee;    /* RGB */
    border: 1px solid #666;
	text-align: center;
}

.menu_list li:hover {
	background-color: #aabbbb;    /* RGB */
}

#naiyou {
	background-color: #e8eeff;    /* RGB */
	//background: -webkit-linear-gradient(left,#ddffff,#bbdddd);
	//background: -moz-linear-gradient(left,#ddffff,#bbdddd);
	//background: linear-gradient(left,#ddffff,#bbdddd);

	//background: -webkit-linear-gradient(left,#ffeeff,#eeccee);
	//background: -moz-linear-gradient(left,#ffeeff,#eeccee);
	//background: linear-gradient(left,#ffeeff,#eeccee);

	padding: 10px 10px 50px 10px;
}

.imgtbl {
	width: 100%;
 	text-align: center;
 	display: flex;
    //justify-content: space-between;
    //justify-content: space-around;
    justify-content: space-evenly;
}

.chuo {
	font-size: 1.17em;
 	text-align: center;
}

/* footer
================================================ */
footer {
	width: 100%;
	height: 80px;
	margin: 0 auto;
	position: absolute;
	bottom: 0;
 }
 

#cntVisit {
	position: absolute;
	right: 0;
}


/*------------------------------------------------------
 Tablet ~
------------------------------------------------------*/
@media screen and (min-width:568px) {
 
    /* モバイル横から効くスタイル */

#wrapper {
	width: 100%;
	min-height: 100vh; 
}

.menu > li {
	text-align: center;
}

#sidemenu {
    float: left;
    width: 25%;
}

article {
    float: right;
    width: 73%;
}


.clearfix:after { /*floatの解除、ここがポイント*/
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	min-height: 1px; /*IE6、7対策*/
}
* html .clearfix {
	height: 1px;
	/*\*//*/ /*MAC IE5.x対策*/
	height: auto;
	overflow: hidden;
	/**/
} 


/*------------------------------------------------------
 Tablet ~
------------------------------------------------------*/
@media screen and (min-width:768px) {
 
    /* タブレット端末から効くスタイル */



 
}
 
 
/*------------------------------------------------------
 PC
------------------------------------------------------*/
@media screen and (min-width:920px) {

  /* PCから効くスタイル */
 
#wrapper {
	width: 80%;
}

header {
	width: 100%;
}

main {
	width: 100%;
}

footer {
	width: 100%;
}

.menu_button {
	width: 25%;
	display: inline-Block;
	margin: 0 10px;
}



}