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; width: 100%; margin: 0;}
main, section, header div, footer div { width: 1600px; display: block; margin: 0 auto; line-height: 22px; position: relative;}
article { width: 1600px; display: block; margin: 0 auto; line-height: 22px; position: relative;}
/*------HEADER-----*/
header { background-image: linear-gradient(90deg, #f3f3f2 0%, #fff 28%, #ebedee 100%); padding:0; height: 38px;}
.logo { display: none; width: 135px; position: absolute; top:13px; left: -3px;}
.logo img { width: 100%;}
h1 { display: inline-block; margin: 0; padding: 12px 0 0 0; color: #555; font-size: 22px; line-height: 24px; font-weight: normal;}
header h2 { display: inline-block; margin: 0;  padding: 10px 0 0 18px;color: #327C44; font-size: 14px; line-height: 24px; vertical-align: top;}

header div menu { display: inline-block; position: absolute; right: 20px; top: 17px; padding: 0; margin: 0;}
header div menu a { display: inline-block; color: 555; font-size: 16px; margin: 0 10px 0 0;}
header div menu a i { font-size: 17px; color: #09506F; margin: 0 10px 0 0;}

button#open-menu,button#close-menu { display: none;}
button#open-menu img,button#close-menu img { display: none; width: 100%;}

/*-----NAV------*/
nav {background-image: linear-gradient(90deg, #f3f3f2 0%, #fff 28%, #ebedee 100%);}
nav ul {display: table; padding: 0; margin: 0 0 0 8%;}
nav ul li { display: table-cell; vertical-align: top; padding-right: 30px;}
nav ul li a { display: block; padding: 4px 0; color:#1F578D; font-size: 15px; text-shadow:1px 1px 4px rgba(0,0,0,0.3);}
nav ul li a:hover { color: #0194F9;}
.i1 { color: #F5206B; margin: 0 8px 0 0;}
.closebutton { display: none;}

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

div#lay01 { animation: fadeIn1 20s ease 0s infinite normal; background-image: url('img/lay11.jpg'); background-size: contain;}
@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/lay12.jpg'); background-size: cover;}
@keyframes fadeIn2 {
    0%,35% { opacity:0;}
    51%,85% { opacity:1;} 
    95%,100% { opacity:0;}
}


/*------MAIN FUNCTION ----*/
main { padding: 20px 0; border-bottom: 1px solid #FBBCF9;}
main h2 { margin: 10px 0; color:#1F5EDF; text-shadow: 1px 8px 11px rgba(0,50,100,0.38);}
main h3 { margin: 0; color: #E8629E;}
main aside { margin: 10px 0;}
section { padding: 20px 0;}
section h2 { margin: 10px 0; color: #FF614B;}
section h3 { margin: 10px 0; color: #FF614B;}
section aside { margin: 10px 0;}

/*------UL.in-----*/
.in { display: table; list-style: none; margin: 0; padding: 0;}
.in li { display: table-cell; padding: 0 40px 0 0; vertical-align: top;}
.in li.side-a { width: 50%; padding: 20px 0 0 0;}
.in li.side-a img { width:100%;}
.in li.side-b { width: 50%; padding: 20px 0 0 0;}
.in li.side-b p { margin: 0; padding: 2px 0; font-size: 17px;}
.in li.side-b span {display: block; padding: 15px 0;}

/*------DIV.grid-----*/
.grid { display: grid; margin: 10px 0;}
.wrapper2 { grid-template-columns: 1fr 2fr;}
.wrapper3 { grid-template-columns: 1fr 1.5fr 0.5fr;}
.wrapper4 { grid-template-columns: 1fr 1fr 1fr 1fr;}
.grid div img { width: 100%;}

.grid div.s-left { background: #E6EAEB;}
.grid div img.s { width: 80%; margin: 0 10%;}

.grid div b { display: inline-block; margin: 0; padding: 7px 0; font-size: 17px; color: #7B8386;}
.grid div p { margin: 0; padding: 7px 0; font-size: 17px;}
.grid div span { display: block; padding: 7px 0;}
.grid div ul { margin: 0 0 0 20px; padding: 5px 0;}

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

.wrap-a div span { padding: 4px 12px;}
/*--.wrap-b { border-top: 1px solid #ccc;}--*/
.wrap-b div { border-bottom: 1px solid #ccc;}

/*-------FOOTER-------*/
footer { background: #ddd;}
footer div p { margin: 0; padding: 18px 0 10px 0;}
footer div span { display: block; margin: 0; padding: 0 0 20px 0;}

/*-----------*/
@media (max-width: 1630px) {
main,section, header div, footer div { width: 92%;}
nav ul { margin: 0 4%;}
article { width: 100%;}
}
@media (max-width: 1100px) {
main, section, header div, nav ul, footer div  { width: 1040px; margin: 0 30px;}
article { width: 1100px;}
}
/*-----------*/