html{scroll-behavior:smooth;}
body{margin:0px;padding:1.5em 0 0px;font-size:20px;line-height:1.75;font-family:YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;font-feature-settings:"palt";background:#bbcc95;}
img{border:none;margin:0px auto;padding:0px;display:block;z-index:1;height:auto;width:100%;max-width:100%;}
a{text-decoration:none;color:black;}
a img:hover,a:hover p{opacity:.6;transition-duration:.3s;z-index:9999;transform:translate(5px,5px)}
ol{margin:0px;padding:0px;list-style-type:none;}
h1,h2,h3,h4,h5{text-align:center;font-weight:normal;padding:0;margin:0;}
table{border-collapse: collapse;}
.pc{display:block;}
.sp{display:none;}

header,article,footer{width:60em;margin:0 auto;overflow:hidden;background:white;}
section{width:90%;margin:3em auto;display:block;}
#main h1{font-size:2em;color:#754a18;text-align:center;margin:0 0 1em;}
#main p{font-size:1em;width:90%;margin:0 auto;}

#info h1,#about h1{background:url(img/info_bg.jpg) no-repeat;background-size:contain;color:white;width:100%;height:2.7em;margin:1em 0 .5em;text-shadow:0 0 .25em #f0aa4a,0 0 .25em #f0aa4a;}
#about h1{background:url(img/about_bg.jpg) no-repeat;background-size:contain;text-shadow:0 0 .25em #08a8fc,0 0 .25em #08a8fc;}
#info h1 span,#about h1 span{font-size:1.25em;line-height:1.25em;}
#info ul {width:80%;margin:1em auto;display:block;background:#f7f2e0;padding:1em 1em .1em 1em;border-radius:1em;list-style-type:none;}
#info ul > p{text-align:center;}
#info ul li{margin:.5em .5em 3em .5em;}
#info ul li p{padding:0 .5em}
#info ul li h2{background:#f0aa4a;color:white;}
#info ul li h3{text-align:left;padding:0 1em}
#info ul li a{color:#08a8fc}
#info ul li img{width:90%;max-width:30em;margin:.5em auto;}

#about ol{display:grid;grid-template-columns: repeat(4, 1fr);column-gap:1em;row-gap:1em;}
#about p{font-size:1em;margin:1em auto;text-align:left;border-bottom:1px solid #754a18;padding-bottom:1em;}
#about table{width:calc(50% - 2em);margin:0 2em 0 0;display:inline-block;vertical-align:top;line-height:1.3;}
#about table th{width:8em;font-weight:normal;text-align:left;padding-bottom:1em;}
#about table td{padding-bottom:1em;}
#about iframe{width:49%;display:inline-block;height:13em;vertical-align:top;}

footer{background:url(img/footer_bg.jpg) no-repeat;background-size:cover;color:white;position:relative;height:5em;line-height:1;}
footer h1,footer h2,footer h3{position:absolute;bottom:.75em;font-size:1em;}
footer h1{left:1em;}
footer h1 span{font-weight:bold;}
footer h2{right:1em;}
footer h3{left:50%;transform:translateX(-50%);color:white;}

#banner h2{font-size:1em;margin:1em auto;text-align:left;width:80%;border-bottom:1px solid #754a18;padding-bottom:1em;}
#banner a{display:block;width:20em;margin:1em auto;}
#banner a img{box-shadow:.25em .25em .25em rgba(0,0,0,.35)}
#banner p{display:block;text-align:center;font-size:.75em;margin:.5em 0 0;padding:0;}

@media all and (min-width: 750px) and (max-width: 1199px)  {
body{font-size:1.66vw;}
header,article,footer{width:100%;}
}

@media all and (min-width: 0) and (max-width: 749px)  {
body{font-size:2.66vw;}
header,article,footer{width:100%;}
.sp{display:block;}
.pc{display:none!important;}
#main p{font-size:1.5em;}
#about ol{grid-template-columns:repeat(2, 1fr);}
#info h1,#about h1{background-size:cover;}
#info h1 span,#about h1 span{line-height:2em;font-weight:bold;}
#info ul {width:90%;}
#info ul p{font-size:1.2em;}
#about table{font-size:1.25em;width:auto;display:block;margin:0em auto;}
footer h1,footer h2,footer h3{font-size:2vw;}
#about iframe{width:90%;display:block;height:20em;margin:1em auto;}
}