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

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

/*------HEADER-----*/
header {padding: 0; margin: 0; background-image: linear-gradient(135deg,#dedede 0%, #eee 15%, #fafafa 40%, #eee 70%, #ddd 100%);}
h1 { margin: 0; padding: 12px 0 20px 0; line-height: 28px; color:#777;}
.logo { margin: 0 20px 0 0;}
menu { display: inline-block; z-index: 1000; position: absolute;left: 330px; top: 17px; padding: 0; margin: 0;}

.tel { cursor: auto; border: none; padding: 0;}
header div p { display: block; padding: 0; margin: 0; position: absolute; right: 0; top: 18px;}
header div p a { display: inline-block; margin: 0 20px; font-size: 15px; color: #888;}
header div p a span { display: inline-block; width: 10px; height: 10px;background: radial-gradient(circle at center, red 0, #B02428 15%, #770500 100%); border-radius:5px; margin: -1px 20px 1px 0;}
header div p a:hover span { background: radial-gradient(circle at center, #FF625E 0, #FF200D 15%, #BA2810 100%);}

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

/*-----NAV------*/
nav { background: #f0f0f1;}
nav ul {display: table; padding: 0;}
nav ul li { display: table-cell; vertical-align: top;}
nav ul li a { display: block; padding: 4px 0; color: #586587; text-align: center;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 { display: none;}

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

div#lay01 { animation: fadeIn1 33s ease 0s infinite normal; background-image: url('img/lay1.jpg'); background-size: contain;}
@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/lay2.jpg'); background-size: contain;}
@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/lay4.jpg'); background-size: contain;}
@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;}

main {}
div.wrap { display: grid; grid-template-columns: 17% 23% 60%;}
div.wrap div { padding: 25px 0; border-bottom: 1px solid #ddd;}
div.grid-1 {grid-column: 1 / 3;}
img.top {width: 100%;}
img.pc {}
img.mobile {display: none;}
h2 { margin: 18px 0 18px 48px; padding: 0; color:#bbb; line-height: 28px;}
h3 { margin: 18px 0 18px 48px;font-size: 18px; color: #666; line-height: 24px;}
h4 { margin: 18px 0 18px 48px;font-weight: normal; font-size: 16px; line-height: 24px;}
div.wrap p { margin: 18px 0 18px 48px; line-height: 23px;}

/*---- SECTION ---*/
section div { padding: 30px 0 0 0; line-height: 27px; font-size: 15px;}

div.wrap-p { display: grid; grid-template-columns: 30% 70%;}
div.wrap-p div { padding: 15px 0; border-bottom: 1px solid #ddd;}
div.grid-p1 {grid-column: 1 / 3;}
img.page {width: 100%;}
h5 { margin: 10px 20px 20px 55px; padding: 0; font-size: 30px; line-height: 35px;}
h6 { margin: 20px 20px 30px 55px; padding:0; font-size: 25px; line-height: 27px; color:#2A7128;}
div.wrap-p div p { margin: 20px 20px 10px 55px; padding: 0; font-size: 18px; line-height: 24px;}
div.wrap-p div span { display: block; margin: 20px 20px 10px 55px; 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: 30px 0; text-align: center; font-size: 15px;}
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%;}
article, nav ul { width: 100%;}
}
@media (max-width: 1100px) {
main, section, header div, footer div  { width: 1040px; margin: 0 30px;}
article, nav ul { width: 1100px;}
}
/*-----------*/