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, #341E00 0%, #8C6F01 25%, #341E00 100%);}
.logo { display: inline-block; width: 38px; position: absolute; top:5px; left: 5px;}
.logo img { width: 100%;}
h1 {margin: 0; padding: 5px 0 0 54px; color: ivory; font-size: 19px; line-height: 25px;}
header h2 { position: absolute; left:130px; top:9px;  margin: 0; color: #aaa; font-size: 16px; line-height: 18px;}
header p.japanese {margin: -1px 0 0 54px; color:#F8F0C5; font-size: 17px; letter-spacing: -0.5px;}

header a.tel { display: inline-block; color:#FFE8A2; font-size: 19px; position: absolute; bottom: 1px; left: 240px;}
header span.tel { display: none;}
header a.address { display: inline-block; color:#F8F0C5; font-size: 14px; z-index: 3000; margin: 0 0 0 8px;}
header a.address small {display:none;}

header div menu { display: inline-block; position: absolute; bottom: 1px; right: 10px; margin: 0; padding: 0;}
header div menu a { display: inline-block; margin: 0 7px 0 0; color: #66AF34; font-size: 15px;}

button#open-menu,button#close-menu {display: block;position: fixed; z-index: 3000; 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: #C9B46E; 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: fixed; 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: 280px;}
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-new/overview-s.jpg'); background-size: cover; background-position: center top;}
@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-new/view2-s.jpg'); background-size: cover; background-position: center top;}
@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-new/view3.jpg'); background-size: cover; background-position: center top;}
@keyframes fadeIn3 {
    0%,51% { opacity:0;}
    66%,85% { opacity:1;}
    100%,100% { opacity:0;}
}

article h2 { color: #fff; background-image: linear-gradient(135deg, #604701 0%, #8C6F01 30%, #341E00 100%); padding: 10px 3%; width: 94%; font-size: 16px; margin: 0 0 0 0;}
article h2 span {display: block; font-weight: normal; font-size: 15px; margin: 15px 0 0 0; line-height: 18px;}

article h3 { color: #6E5C16; padding: 0; margin: 8px 0 0 0; font-weight: normal;}
article h3 ul.wrap-time { display: table; margin: 0 0 1px 0; padding: 0;background: rgba(255,255,255,0.82); width: 100%; font-size: 16px; border-top: 1px solid  rgba(0,0,0,0.2);}
article h3 ul.end { border-bottom:  1px solid  rgba(0,0,0,0.2);}
article h3 ul.wrap-time li { display: table-cell; padding: 4px; text-align: center; width: 11.5%; border-right: 1px solid rgba(0,0,0,0.2);}
article h3 ul.wrap-time li.s { width: 31%;}
article h3 span { display: block; margin: 15px 0 0 10px; padding: 0; color: #D9627C; font-size: 14px;}

/*------MAIN FUNCTION ----*/
main { padding: 12px 10px; border-bottom: 1px solid #FBBCF9;}
main h2 { margin: 10px 0; color:#C8B6FF; 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;}
main a { display: block; width: 94%; padding: 5px 0 3px 0; margin: 15px 3% 0 3%; text-align: center; color: #fff; font-size: 15px; background-image: linear-gradient(180deg, #DB4F09 0%, #E78D09 100%); border-radius: 8px; border: 1px solid #472A09;}
main a:hover { background: #EF8F09;}

section { padding: 12px 14px; padding: 4px 12px; background-image: linear-gradient(135deg, #604701 0%, #8C6F01 30%, #341E00 100%);}
section h2 { margin: 10px 0; color: #FFE6DF; font-size: 20px; text-shadow:1px 1px 5px rgba(10,10,10,0.22);}
section h3 { margin: 0;}
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.news-title { display: none;}
.in li.side-a img { width:100%; max-width: 400px;}
.in li.side-b {}
.in li.side-b p { margin: 10px 0 5px 0; padding: 2px 0 5px 0; font-size: 18px; color: #6F5900; font-weight: bold; letter-spacing: 0.8px; border-bottom: 1px dotted #E73B09;}
.in li.side-b span {display: block; padding: 5px 0 15px 0; line-height: 24px; font-size: 16px;}
.in li.side-b span b { color:#E43100;}

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

.grid div ul {margin: 0 10px; padding: 5px 10px; background-image: linear-gradient(135deg, #604701 0%, #8C6F01 30%,#341E00 100%); height: 90%;}
.grid div ul li { margin: 0; padding: 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 {}

.wrap-b {}
.wrap-b div { color:#FFF8F3; border-bottom: 1px solid ivory;}
.wrap-b div img { width: 100%;}

/*-----PAGE-----*/
main.page {margin-top: -5px;}
main.page div.page {height:300px; overflow:hidden; background-size:cover; background-position: center 50%;}
main.page div.side-a { position: relative;}
main.page div.side-a p {display: block; margin:0; padding: 0; width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: 100;}

h5.page {display: block; margin:0; padding: 12px 10px; position: absolute; top:18px; left: 12px;  z-index: 101; color:#fff; font-size: 18px; font-weight: normal; letter-spacing: 1.8px;  background-image: linear-gradient(135deg, #3A1A00 0%, #7A5100 20%,#250D00 100%); opacity:72%;}
h5.page small {display: block; margin:0 0 5px 0; padding: 0; font-size: 13px; letter-spacing: 0;}
h5.page span {display: block; margin:14px 0 5px 0; padding: 13px 0 0 0; font-size:15px; line-height: 22px; border-top:1px solid #D0C7AE;}

section.page { background: #fff;}
section.page div.side-a { display: none;}
section.page div.side-b {padding: 15px 10px 0 10px;}
h3.page {display: block; padding: 0 0 10px 0;  margin: 0 0 15px 0; color:#666100; border-bottom: 1px solid #DE4B00; letter-spacing: 1.8px;}
aside.page {display: block; margin: 0 0 30px 0; color:#3F2100; line-height: 25px;}
section.page ul.page {height: auto; color: #fff; margin: 0 -7px; padding: 10px;}
section.page ul.page li { margin: 0 10px;}

/*----TRAIL----*/

ul.run { display: block; margin: 5px 0 0 0; padding: 0; background: none;}
ul.run li { display: block; vertical-align: top;}
ul.run li.left-side {}
ul.run li.left-side span { display: block; margin-bottom: 30px; color: #5D4609; line-height: 30px;}
ul.run li.left-side span b { display: block; color:#6DA748; font-size: 18px; margin-bottom: 11px;}
ul.run li.left-side img.thum { width: 23%; margin: 0 2% 2% 0; border: 1px solid #aaa;}
div.wrap-run {display:grid; grid-template-columns: 1fr 1fr; margin:0 0 0 0; padding: 0; width: 100%;}
div.wrap-run div { padding: 10px;}
div.wrap-run div img { width: 100%; border: 1px solid #B88B0F;}

img.running { width: 100%; max-width: 400px; margin: 0 0 10px 0; display: block;}
img.running-s { width: 80%; max-width: 400px; margin: 0 0 10px 0; border: 1px solid #ddd; padding: 7px;}

/*-------FOOTER-------*/
footer { background: #FFEFCA;}
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;}

/*-------CASE-------*/
ol#case { margin: 0 25px; padding: 0;}
ol#case li { margin: 7px 10px; color: green; font-size: 15px; font-weight:normal;}