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 { width: 100%; 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: 28px; position: absolute; top:4px; left: 15px;}
.logo img { width: 100%;}
h1 { margin: 0; padding: 4px 0 0 57px; color: #646F71; font-size: 20px; line-height: 28px;}
header h2 { margin: 0 0 2px 90px; color: #aaa; font-size: 16px; line-height: 18px;}
header p {}
header div menu { display: block; margin: 0 0 0 57px; padding: 0;}
header div menu a { display: inline-block; margin: 0 7px 0 0; color: #aaa; font-weight: bold; font-size: 15px;}
.tel { cursor: auto; border: none; padding: 0;}
header div p { display: none;}


button#open-menu,button#close-menu {display: block;position: absolute; top: 7px; 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: 240px; position: absolute; top:55px; 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: 70%; 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: 7px; z-index: 111;}

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

div#lay01 { animation: fadeIn1 33s ease 0s infinite normal; background-image: url('img/lay1m.jpg'); background-size: cover;}
@keyframes fadeIn1 {
    0%,20% { opacity:1;}
    31%,85% { opacity:0;}
    100%,100% { opacity:1;}
}
div#lay02 { animation: fadeIn2 33s ease 0s infinite normal; background-image: url('img/lay2m.jpg'); background-size: cover;}
@keyframes fadeIn2 {
    0%,20% { opacity:0;}
    35%,49% { opacity:1;} 
    85%,100% { opacity:0;}
}
div#lay03 {animation: fadeIn3 33s ease 0s infinite normal; background-image: url('img/lay4m.jpg'); background-size: cover;}
@keyframes fadeIn3 {
    0%,51% { opacity:0;}
    66%,85% { opacity:1;}
    100%,100% { opacity:0;}
}

/*------MAIN ----*/

main a, section a { display: inline-block; margin: 0 0 5px 0; padding: 2px 0 0 9px; color:#053E86; border-left: 5px #84DBFF solid; vertical-align: text-bottom; line-height: 17px;}
main a:hover, section a:hover { border-color:#F83720;}

div.grid2 { border-top: 1px solid #ccc; padding: 25px 0 0 0;}
img.top {width:100%; max-width:350px;}
img.pc {display: none;}
img.mobile { max-width:400px;}

main { padding: 12px 14px; border-bottom: 1px solid #FBBCF9;}
main h2 { margin: 10px 0; color:#999; font-size: 20px; text-shadow:1px 1px 5px rgba(10,10,10,0.22);}
main h3 { margin: 0; color: #E8629E;}
main aside { margin: 10px 0;}

/*---- SECTION ---*/

section div { padding: 10px; line-height: 25px;}

div.wrap-p { padding: 0 10px;}
div.wrap-p div {}
div.grid-p1 {}
img.page {width: 100%; max-width: 420px;}
h5 { margin: 15px 10px 10px 10px; padding: 0; font-size: 20px; line-height: 30px;}
h6 { margin: 0 10px 10px 10px; padding:0; font-size: 18px; line-height: 27px; color:#2A7128;}
div.wrap-p div p { margin: 0 10px; padding: 0; font-size: 16px; line-height: 24px;}
div.wrap-p div span { display: block; margin: 0 10px; padding: 10px 0 0 0; font-size: 16px; line-height: 34px; border-top: 1px solid coral;}
div.wrap-p div b { display: block; font-size: 18px; color: #FF4128; margin: 10px 0;}


/*-------FOOTER-------*/
footer { padding: 15px 0; text-align: center; font-size: 14px; border-top: 1px solid #ccc;}
footer div p { margin: 0; padding: 18px 0 10px 0;}
footer div span { display: block; margin: 0; padding: 0 0 20px 0;}