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

/*------TAG width ------*/
header,footer, nav { width: 100%; margin: 0;}

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

/*------HEADER-----*/
header { background-image: linear-gradient(135deg, #341E00 0%, #8C6F51 30%, #341E00 100%); padding: 10px 0 0 0; margin: 0 0 30px 0;}
.logo { display: inline-block; width: 70px; position: absolute; top:3px; left: 0;}
.logo img { width: 100%;}
h1 { margin: 0; padding: 12px 0 0 150px; color: #F8F0E3; line-height: 39px; text-shadow:1px 1px 5px rgba(10,10,10,0.22);}
header h2 { margin: 0 0 2px 150px; color: #bbb; font-size: 22px; line-height: 28px;}
header p.japanese { position: absolute; left: 320px; top: 21px; margin: 0; color:#F8F0C5; font-size: 22px;}
header span.tel { display: block; position: absolute; left: 70%; top: 23px;color:#F8F0C5; font-size: 26px;}
header a.tel { display: none;}
header a.address { display: block; position: absolute; left: 70%; top: 80px;color:#F8F0C5; font-size: 19px; z-index: 3000;}
header a.address small { padding: 0 15px 0 0;}

header menu { display: inline-block; position: absolute; top: 12px; right: 0;}
header menu a { display: inline-block; color: #4BC189; font-size: 22px; 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: #fff; width: 100%;}
nav ul {display: table; padding: 0; margin: 0;}
nav ul li { display: table-cell; vertical-align: top; padding: 0;}

nav ul li a { display: block; padding: 7px 7px; margin: 3px 0; color: #E4C83D; text-align: center;background-image: linear-gradient(180deg, #fdfbfb 0%, #ebedee 100%);  background: transparent;}
nav ul li a:hover { background: rgba(255,255,255,0.2);}
.i1 { color: orangered; 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;}

article h2 { position: absolute; top: 5.3%; left: 2.5%; color: #fff; background: rgba(50,25,0,0.71); z-index: 2000; padding: 2.8% 30px; width: 20%; min-height: 55%;}
article h2 span {display: block; font-weight: normal; font-size: 18px; margin: 42px 0 0 0; line-height: 32px;}
article h3 { position: absolute; bottom: 2.3%; right: 2.5%; color: #6E5C16; z-index: 2000; padding: 0; margin: 0; font-weight: normal;}
article h3 ul.wrap-time { display: table; margin: 0 0 1px 0; padding: 0;background: rgba(255,255,255,0.88); width: 100%;}
article h3 ul.wrap-time li { display: table-cell; padding: 8px 8px; text-align: center; width: 12%; border-right: 1px solid rgba(0,0,0,0.2);}
article h3 ul.wrap-time li.s { width: 28%;}
article h3 span { display: block; margin: 15px 0 0 0; padding: 0; color: #fff;}


div#lay01 { animation: fadeIn1 33s ease 0s infinite normal; background-image: url('img-new/overview.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-new/view3.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-new/view2.jpg'); background-size: contain;}
@keyframes fadeIn3 {
    0%,51% { opacity:0;}
    66%,85% { opacity:1;}
    100%,100% { opacity:0;}
}

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

section { padding: 20px 0;}
section h2 { margin: 10px 0; color: #C8B6FF; text-shadow:1px 1px 5px rgba(10,10,10,0.22);}
section h3 { margin: 0;}
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: 40%;}
.in li.side-a img { width:100%;}
.in li.side-b {}
.in li.side-b p { margin: 10px 0 5px 0; padding: 2px 0 4px 0; font-size: 18px; color: #6F5900; font-weight: bold; letter-spacing: 1.7px; border-bottom: 1px dotted #B30B09;}
.in li.side-b span {display: block; padding: 5px 0 15px 0; line-height: 27px; font-size: 16px;}
.in li.side-b span b { color:#E43100;}

/*------DIV.grid-----*/
.grid { display: grid; margin: 10px 0;}
.wrapper2 { grid-template-columns: 1fr 2.5fr;}
.wrapper3 { grid-template-columns: 1fr 1fr 1fr;}
.wrapper4 { grid-template-columns: 1fr 1fr 1fr 1fr; background: #533505; color: #fff; overflow: hidden;}

.grid div img { width: 100%;}
.grid div b { display: inline-block; margin: 0; padding: 15px 20px;; font-size: 17px; color: #F0F4E4;}
.grid div p { margin: 0; padding: 15px 20px;; font-size: 17px;}
.grid div span { display: block; padding: 15px 20px;}
.grid div ul { margin: 0; padding: 20px 25px; background-image: linear-gradient(135deg, #604701 0%, #8C6F01 30%,#341E00 100%); height: 90%;}
.grid div ul li { margin: 0 15px; padding: 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 {}
.wrap-b div {}

/*-----PAGE-----*/
main.page {margin-top: 0;}
main.page div.page {height:400px; overflow:hidden; background-size:cover; background-position: left 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; background-image: linear-gradient(135deg, #3A1A00 0%, #7A5100 20%,#250D00 100%); opacity:72%;}

h5.page {display: block; margin:40px 45px 0 45px; padding: 0; position: absolute; top:0; left: 0;  z-index: 101; color:#fff; font-size: 27px; font-weight: normal; letter-spacing: 1.8px; position: relative;}
h5.page small {display: block; margin:0 0 20px 0; padding: 0; font-size: 14px; letter-spacing: 0;}
h5.page span {display: block; margin:38px 0; padding: 25px 0 0 0; font-size:16px; line-height: 30px; border-top:1px solid #C9B693;}

section.page {}
section.page div.side-b {padding: 0 50px;}
h3.page {display: block; padding: 0 0 15px 0;  margin: 0 0 20px 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: 32px;}
section.page ul.page {height: auto; color: #fff;}

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

ul.run { display: table; margin: 40px 0 0 0; padding: 0; background: none;}
ul.run li { display: table-cell; vertical-align: top;}
ul.run li.left-side { width: 37%; padding: 0 5% 0 0;}
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 { float: right; width: 30%; margin: 0 0 10px 90px;}
img.running-s {float: left; width: 30%;}
/*-------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) {
header { margin:0;}
main,section, header div, header nav ul, footer div { width: 92%;}
article { width: 100%;}
}
@media (max-width: 1100px) {
header { margin:0;}
main, section, header div, header nav ul, footer div  { width: 1040px; margin: 0 30px;}
article { width: 1100px;}
}
/*-----------*/

/*-------CASE-------*/

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