body {-webkit-text-size-adjust: 100%; margin: 0; color:#444; font-size: 16px; font-family: 'meiryo', "Hiragino Kaku Gothic Pro W3", sans-serif; background:  #FCF8F9;}
img { vertical-align: bottom;}
a { text-decoration: none;}

/*------TAG width ------*/
header,nav,footer { display: block; margin: 0;}
main, section, header div, footer div { display: block; margin: 0; line-height: 22px; position: relative;}
article, nav ul { width: 100%; display: block; margin: 0 auto; line-height: 22px; position: relative;}

/*------HEADER-----*/
header { background-image: linear-gradient(135deg, #f3f3f2 0%, #fff 28%, #ebedee 100%);}
.logo { display: inline-block; width: 78px; position: absolute; top:10px; left: 5px;}
.logo img { width: 100%;}
h1 { margin: 0; padding: 11px 0 0 90px; color: #3F6BAA; font-size: 20px; line-height: 28px;}
header h2 { margin: 9px 0 2px 7px; color: #aaa; font-size: 15px; line-height: 18px;}
header p {}
header div menu { display: inline-block; position: absolute; top: 30px; right: 8px;}
header div menu a { display: inline-block; margin: 0 5px 0 0; color: #2C64F0; font-size: 16px;}
header div menu a i {margin: 0 2px 0 0; color: #66AF34;}

button#open-menu,button#close-menu {display: block;position: absolute; top: 5px; right: 14px; width: 38px; padding: 2px 2px; vertical-align: top; font-size: 16px; color: #7C6F4A; background: #fff; border-width: 1px 1px 1px 1px; border-style:solid; border-color: #F58361; cursor: pointer;}
button#close-menu {display: none;}
button#open-menu img,button#close-menu img {width: 100%;}

/*-----NAV------*/
nav {
display: none; margin: 0; padding: 0; width: 270px; position: absolute; top:70px; left:0; background: rgba(225,225,225,1); z-index: 110; animation: fadeInmenu 0.5s ease 0s 1 normal;}
@keyframes fadeInmenu {
    0% { left:-100px;}
    100% { left:0;}
}
nav ul {display: block; padding: 0; margin: 0;}
nav ul li { display: block; padding: 0; margin: 0;}
nav ul li a { display: block; width: 80%; padding: 5px 14px; margin: 0; color: #586587; background-image: linear-gradient(180deg, #fdfbfb 0%, #ebedee 100%); }
nav ul li a:hover {background-image: linear-gradient(180deg, #dfdfdf 0%, #ebedee 100%);}
.i1 { color: #9AC7FF; margin: 0 8px 0 0;}
.closebutton { width: 18px; height: 18px; padding: 0; color:#999; font-size:15px; background: transparent; border: none; position: absolute; top:7px; right: 2px; z-index: 111;}

/*------ARTICLE animation-----*/
article {}
article img { width: 100%;  height: 320px;}
article div { position: absolute; top: 0; left: 0; z-index:99;}

div#lay01 { animation: fadeIn1 20s ease 0s infinite normal; background-image: url('img/lay1.jpg'); background-size: cover;}
@keyframes fadeIn1 {
    0%,35% { opacity:1;}
    51%,85% { opacity:0;}
    95%,100% { opacity:1;}
}
div#lay02 { animation: fadeIn2 20s ease 0s infinite normal; background-image: url('img/lay2.jpg'); background-size: cover;}
@keyframes fadeIn2 {
    0%,20% { opacity:0;}
    51%,85% { opacity:1;} 
    95%,100% { opacity:0;}
}

/*------MAIN FUNCTION ----*/
main { padding: 12px 14px; border-bottom: 1px solid #FBBCF9;}
main h2 { margin: 10px 0; color:#3F76EB; font-size: 19px; text-shadow:1px 1px 5px rgba(10,10,10,0.22); line-height: 28px;}
main h3 { margin: 0; color: #E8629E;}
main aside { margin: 10px 0;}
section { padding: 12px 14px;}
section h2 { margin: 10px 0; color: #FF3EA2; font-size: 19px; text-shadow:1px 1px 5px rgba(10,10,10,0.22); line-height: 28px;}
section h3 { color: #fff; font-size: 19px; line-height: 28px; position: absolute; top: 9px; left: 29px; z-index: 99; font-weight: normal;}
section aside { margin: 10px 0;}

/*------UL.in-----*/
.in { display: block; list-style: none; margin: 0; padding: 0;}
.in li { display: block; padding: 0; vertical-align: top;}
.in li.side-a { }
.in li.side-a img { width:185px;}
.in li.side-b {}
.in li.side-b p { margin: 0; padding: 5px 0 0 0; font-size: 17px;}
.in li.side-b span {display: block; padding: 5px 0;}

/*------DIV.grid-----*/
.grid { margin: 10px 0;}
.wrapper2 { }
.wrapper3 { }
.wrapper4 { }
.grid div img { width: 100%; max-width: 400px;}
.grid div b { display: inline-block; margin: 0; padding: 7px 0; font-size: 17px; color: #7B8386;}
.grid div p { margin: 0; padding: 5px 0; font-size: 17px;}
.grid div span { display: block; padding: 5px 0;}
.grid div ul { margin: 0 0 0 20px; padding: 5px 0;}

.wrap-a { margin: 5px 0;}
.wrap-a div { margin: 4px 0; padding: 0; background: #fff; border: 1px solid #aaa;}
.wrap-a div p { padding: 5px 12px; font-size: 17px;}

.wrap-a div span { padding: 4px 12px;}
.wrap-b { border-top: 1px solid #ccc;}
.wrap-b div { }
.wrap-b div img { width: 180px;}

/*-------FOOTER-------*/
footer { background: #ddd;}
footer div p { margin: 0; padding: 10px 14px 5px 14px; font-size: 15px;}
footer div span { display: block; margin: 0; padding: 0 14px 15px 14px; font-size: 15px;}