@charset "UTF-8";
* html .clearfix { zoom: 1; }
* { margin: 0; padding: 0; }
*, *:before, *:after { box-sizing: border-box; }
html, body { width: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
img { max-width: 100%; height: auto; vertical-align: bottom; border: 0; display: block; }
li { list-style: none; }
ul { margin: 0; padding: 0; }
dl, dt, dd { margin: 0; }
a { -webkit-tap-highlight-color: transparent; text-decoration: none; }
p { padding: 0; margin: 0; text-align: justify; text-justify: inter-ideograph; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #d8d8d8; margin: 1em 0; padding: 0; }
input[type=submit], input[type=button] { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; -moz-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; }
input[type=submit]::-webkit-search-decoration, input[type=button]::-webkit-search-decoration { display: none; }
input[type=submit]::focus, input[type=button]::focus { outline-offset: -2px; }
.clearfix { min-height: 1px; overflow: hidden; }
.clearfix:after { content: "."; display: block; visibility: hidden; height: 0; clear: both; }
#loading{position: absolute;left: calc(50% - 100px);top: calc(50% - 100px);height:200px;width:200px;text-align:center;}
section { width: 100%; margin-top: 10vh; }
@media screen and (min-width: 600px) and (max-width: 960px) { section { margin-top: 20vh; } }
@media screen and (min-width: 960px) and (max-width: 1280px) { section { margin-top: 20vh; } }
@media screen and (min-width: 1280px) { section { margin-top: 20vh; } }
section.block { position: relative; }
section.block > h3 { text-align: center; padding: 25px; }
section.block > h3 > img { display: inline; width: 100%; margin-top: 1vh; }
section.block#contents01 > h3 > img { max-width: 272px; }
section.block#contents02 > h3 > img { max-width: 133px; }
section.block#contents03 > h3 { padding-left: 85px; padding-right: 85px; }
section.block#contents03 > h3 > img { width: 80%; }
@media screen and (min-width: 600px) and (max-width: 960px) {
  section.block#contents03 > h3 { padding: 25px; }
}
@media screen and (min-width: 960px) and (max-width: 1280px) {
  section.block#contents03 > h3 > img { width: 100%; }
  section.block#contents03 > h3 { padding: 25px; }
}
@media screen and (min-width: 1280px) {
  section.block#contents03 > h3 > img { width: 100%; }
  section.block#contents03 > h3 { padding: 25px; }
}
section.block#contents03 > h3 > img { max-width: 205px; }
section.block#contents04 > h3 > img { max-width: 159px; }
section.block > ul:nth-of-type(1) { position: absolute; top: 0; left: 0; right: 0; width: 90%; max-width: 960px; padding: 10px; margin: 0 auto; }
section.block > ul:nth-of-type(1) > li:nth-of-type(1) { float: right; width: 10%; max-width: 76px; }
section.block > ul:nth-of-type(1) > li:nth-of-type(2) { float: left; width: 22%; }
section.block > ul:nth-of-type(1) > li:nth-of-type(2) > a > img { width: 100%; max-width: 245px; }
@media screen and (min-width: 600px) and (max-width: 960px) { section.block > ul:nth-of-type(1) > li:nth-of-type(2) { width: 17.3%; } }
@media screen and (min-width: 960px) and (max-width: 1280px) { section.block > ul:nth-of-type(1) > li:nth-of-type(2) { width: 17.3%; } }
@media screen and (min-width: 1280px) { section.block > ul:nth-of-type(1) > li:nth-of-type(2) { width: 17.3%; } }
section.block > dl { position: relative; height: auto; width: 100%; }
@media screen and (min-width: 600px) and (max-width: 960px) { section.block > dl { margin-top: 8vh; } }
@media screen and (min-width: 960px) and (max-width: 1280px) { section.block > dl { margin-top: 8vh; } }
@media screen and (min-width: 1280px) { section.block > dl { margin-top: 8vh; } }
section.block > dl > dt { position: absolute; width: 100%; z-index: 1; margin: auto;}
section.block > dl > dt > span { display:block; position: relative; width:100%; padding-top: 20%; margin:0 auto;}
section.block > dl > dt > span > svg { position: absolute; top:0; left: 0; width:90%; height:auto; margin:0 5%;}
section#contents04 > dl > dt > span > svg { position: absolute; top:-80px;}
section.block > dl > dt > img { width: 100%; max-width: 995px; margin: 0 auto; }
section.block > dl.cls-1 { fill: #070002; fill-rule: evenodd; opacity: .1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; }
section.block > dl:nth-of-type(1) > dt > img { max-width: 995px; }
section.block > dl:nth-of-type(2) > dt > img { max-width: 762px; }
section.block > dl:nth-of-type(3) > dt > img { max-width: 1003px; }
section.block > dl:nth-of-type(4) > dt > img { max-width: 991px; }
section.block > dl > dd { position: absolute; float: left; width: 100%; text-align: center; z-index: 2; }
section.block > dl > dd > p:nth-of-type(1) { text-align: center; padding-bottom: 2em; line-height: 1.5; letter-spacing: .1em; font-size: 2.5vw; padding-left: 1em; padding-right: 1em; }
section.block > dl > dd > address { font-style: normal; line-height: 1.5; padding-bottom: 4em; letter-spacing: .1em; font-size: 2.5vw; }
@media screen and (min-width: 600px) and (max-width: 960px) { section.block > dl > dd > address { padding-bottom: 8em; } }
@media screen and (min-width: 960px) and (max-width: 1280px) {
  section.block > dl > dt > span {max-width:1000px; margin:0 auto;}
  section.block > dl > dd > address { padding-bottom: 8em; }
}
@media screen and (min-width: 1280px) {
  section.block > dl > dt > span {max-width:1000px;}
  section.block > dl > dd > address { padding-bottom: 8em; }
}
section.block > dl > dd > ul { text-align: center; font-size: 0; }
section.block > dl > dd > ul > li { width: 100%; display: inline-block; font-size: 14px; font-size: 1.4rem; }
section.block > dl > dd > ul > li.streetview > iframe { width: 100% !important; height: 300px !important; }
section.block > dl > dd > p.btn { margin-top: 4em; }
section.block > dl > dd > p.btn > a { display: block; margin: 0 auto; width: 65%; }
section.block > dl > dd > p.btn > a > img { width: 100%; }
@media screen and (min-width: 600px) and (max-width: 960px) { section.block > dl > dd > p.btn > a { width: 100%; max-width: 350px; padding: 10px; } }
@media screen and (min-width: 960px) and (max-width: 1280px) { section.block > dl > dd > p.btn > a { width: 100%; max-width: 350px; padding: 10px; } }
@media screen and (min-width: 1280px) { section.block > dl > dd > p.btn > a { width: 100%; max-width: 350px; padding: 10px; } }
@media screen and (min-width: 600px) and (max-width: 960px) { section.block > h3 { padding: 0; }
  section.block > img { display: inline; width: 100%; margin-top: 1vh; }
  section.block > ul:nth-of-type(1) { max-width: 892px; padding: 0; }
  section.block > dl > dd > p:nth-of-type(1) { padding-left: 0; padding-right: 0; font-size: 14px; font-size: 1.4rem; }
  section.block > dl > dd > address { font-size: 14px; font-size: 1.4rem; }
  section.block > dl > dd > ul > li { width: 50%; }
  section.block > dl > dd > ul > li.streetview > iframe { width: 50%; height: 553px !important; }
  section.block > dl > dd > p.btn > a { padding: 0; } }
@media screen and (min-width: 960px) and (max-width: 1280px) { section.block > h3 { padding: 0; }
  section.block > img { display: inline; width: 100%; margin-top: 1vh; }
  section.block > ul:nth-of-type(1) { max-width: 892px; padding: 0; }
  section.block > dl > dd > p:nth-of-type(1) { padding-left: 0; padding-right: 0; font-size: 14px; font-size: 1.4rem; }
  section.block > dl > dd > address { font-size: 14px; font-size: 1.4rem; }
  section.block > dl > dd > ul > li { width: 50%; }
  section.block > dl > dd > ul > li.streetview > iframe { width: 50%; height: 553px !important; }
  section.block > dl > dd > p.btn > a { padding: 0; } }
@media screen and (min-width: 1280px) { section.block > h3 { padding: 0; }
  section.block > img { display: inline; width: 100%; margin-top: 1vh; }
  section.block > ul:nth-of-type(1) { max-width: 892px; padding: 0; }
  section.block > dl > dd > p:nth-of-type(1) { padding-left: 0; padding-right: 0; font-size: 14px; font-size: 1.4rem; }
  section.block > dl > dd > address { font-size: 14px; font-size: 1.4rem; }
  section.block > dl > dd > ul > li { width: 50%; }
  section.block > dl > dd > ul > li.streetview > iframe { width: 50%; height: 553px !important; }
  section.block > dl > dd > p.btn > a { padding: 0; } }
section#facebook { position: relative; background-image: url(../images/facebook_bg.png); background-size: cover; }
section#facebook > h3 { text-align: center; }
section#facebook > h3 > img { margin-top: 160px; margin-bottom: 60px; width: 100%; max-width: 80px; display: inline; }
section#facebook > p:nth-of-type(1) { text-align: center; line-height: 1.8em; font-size: 3vw; }
@media screen and (min-width: 600px) and (max-width: 960px) { section#facebook > p:nth-of-type(1) { font-size: 14px; font-size: 1.4rem; } }
@media screen and (min-width: 960px) and (max-width: 1280px) { section#facebook > p:nth-of-type(1) { font-size: 14px; font-size: 1.4rem; } }
@media screen and (min-width: 1280px) { section#facebook > p:nth-of-type(1) { font-size: 14px; font-size: 1.4rem; } }
section#facebook > p:nth-of-type(2) { position: absolute; top: 105px; right: 0; left: 0; margin: 0 auto; width: 100%; max-width: 90%; text-align: right; }
section#facebook > p:nth-of-type(2) > img { display: inline; width: 100%; max-width: 40px; }
@media screen and (min-width: 960px) and (max-width: 1280px) { section#facebook > p:nth-of-type(2) { max-width: 1000px; font-size: 14px; font-size: 1.4rem; }
  section#facebook > p:nth-of-type(2) > img { width: 100%; max-width: 76px; padding-right: 0; } }
@media screen and (min-width: 1280px) { section#facebook > p:nth-of-type(2) { max-width: 1000px; font-size: 14px; font-size: 1.4rem; }
  section#facebook > p:nth-of-type(2) > img { width: 100%; max-width: 76px; padding-right: 0; } }
section#facebook > p { text-align: center; color: #fff; }
section#facebook > dl { width: 92%; max-width: 1000px; padding-bottom: 150px; margin: 0 auto; display: table; }
section#facebook > dl:nth-of-type(1) { margin-top: 10vh; }
section#facebook > dl:nth-of-type(1) > dt > span > img { max-width: 161px; }
@media screen and (min-width: 600px) and (max-width: 960px) { section#facebook > dl:nth-of-type(1) { margin-top: 170px; } }
@media screen and (min-width: 960px) and (max-width: 1280px) { section#facebook > dl:nth-of-type(1) { margin-top: 170px; } }
@media screen and (min-width: 1280px) { section#facebook > dl:nth-of-type(1) { margin-top: 170px; } }
section#facebook > dl:nth-of-type(2) > dt > span > img { max-width: 162px; }
section#facebook > dl:nth-of-type(3) > dt > span > img { max-width: 289px; }
section#facebook > dl:nth-of-type(4) > dt > span > img { max-width: 266.5px; }
section#facebook > dl dt { display: block; width: 100%; }
section#facebook > dl dt > span{ display:block; position: relative; width: 100%; padding-top: 20%;}
section#facebook > dl dt > span > svg{position: absolute; width: 45%; height:auto; top: 0; left: 0;}
section#facebook > dl#fbHitoariki dt > span > svg{width: 70%;}
section#facebook > dl#fbSansan dt > span > svg{width: 70%;}
section#facebook > dl dt > img { width: 70%; max-width: 100%; margin: 0 auto; padding-bottom: 10%; }
section#facebook > dl > dd > div{ display:block; margin:0 auto; max-width: 500px; background-color: #fff;}
section#facebook > dl dd { display: block; vertical-align: top; width: 100%; padding-top: 2%; padding-bottom: 2%; }
section#facebook > dl dd > div > div.fb-page { display: block !important; width: 100%; max-width: 465px; margin: 0 auto; height: auto;}
section#facebook > dl > dd > div{ display:block; margin:0 auto; max-width: 490px; background-color: #fff; padding:2%;}
@media screen and (min-width: 960px) and (max-width: 1280px) {
  section#facebook > dl { width: 100%; }
  section#facebook > dl dt { display: table-cell; width: 40%; padding-left: 2%; padding-right: 2%; }
  section#facebook > dl dt > img { width: 100%; max-width: 400px; }
  section#facebook > dl dd { display: table-cell; width: 50%; margin: 5%; padding-top: 0; padding-bottom: 0; }
  section#facebook > dl dd > div > div.fb-page { width: 100%;}
  section#facebook > dl > dd > div{ display:block; margin:0 auto; max-width: 490px; background-color: #fff; padding:2%;}
}
@media screen and (min-width: 1280px) {
  section#facebook > dl { width: 100%; }
  section#facebook > dl dt { display: table-cell; width: 40%; padding-left: 2%; padding-right: 2%; }
  section#facebook > dl dt > img { width: 100%; max-width: 400px; }
  section#facebook > dl dd { display: table-cell; width: 50%; margin: 5%; padding-top: 0; padding-bottom: 0; }
  section#facebook > dl dd > div > div.fb-page { width: 100%;}
  section#facebook > dl > dd > div{ display:block; margin:0 auto; max-width: 490px; background-color: #fff; padding:2%;}
}
footer { width: 100%; position: absolute; line-height: 40px; bottom: 0; }
footer > dl {width:100%; margin:0 auto; padding-top:100px; padding-bottom:100px; border-bottom: 5px solid red;}
footer > dl > dt {text-align:center; margin-bottom: 60px;}
footer > dl > dt > img {width:100%; max-width: 325px; display:inline;}
footer > dl > dd {font-size:2.5vw; line-height:1.5 !important;}
footer > dl > dd > h4{text-align:center;}
footer > dl > dd > p{text-align:center;}
footer > dl > dd > p:nth-of-type(1){padding:5%;}
footer > dl > dd > p:nth-of-type(2) > a > img{display:inline; max-width:280px; text-align:center; margin-top: 60px;}

@media screen and (min-width: 600px) and (max-width: 960px) {
}
@media screen and (min-width: 960px) and (max-width: 1280px) {
  footer > dl > dd {font-size:1.4rem; line-height:1.8 !important;}
  footer > dl > dd > p:nth-of-type(2) > a > img{max-width:350px;}
}
@media screen and (min-width: 1280px) {
  footer > dl > dd {font-size:1.4rem; line-height:1.8 !important;}
  footer > dl > dd > p:nth-of-type(2) > a > img{max-width:350px;}
}

footer > h3 { width: 100%; max-width: 80%; margin: 50px auto 37.5px; }
footer > h3 > img { width: 100%; }
footer > ul { display: none; text-align: center; margin-top: 37.5px; font-size: 0; }
footer > ul > li { display: inline-block; margin-right: 2.5em; font-size: 1.8vw; }
footer > ul > li > a { position: relative; line-height: 1.5; }
footer > ul > li > a:before { position: absolute; top: 0; left: -1.2em; content: ""; display: inline-block; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 10px solid red; padding-right: .5em; }
@media screen and (min-width: 600px) and (max-width: 960px) { footer > h3 { max-width: 408px; margin: 50px auto 37.5px; }
  footer > ul { display: block; }
  footer > h3 > img { width: 100%; } }
@media screen and (min-width: 960px) and (max-width: 1280px) { footer > h3 { max-width: 408px; margin: 50px auto 37.5px; }
  footer > h3 > img { width: 100%; } }
@media screen and (min-width: 1280px) { footer > h3 { max-width: 408px; margin: 50px auto 37.5px; }
  footer > h3 > img { width: 100%; } }
@media screen and (min-width: 960px) and (max-width: 1280px) {
  footer > ul { display: block; }
  footer > ul > li { font-size: 14px; font-size: 1.4rem; }
}
@media screen and (min-width: 1280px) { footer > ul { display: block; }
  footer > ul > li { font-size: 14px; font-size: 1.4rem; } }
footer > p { width: 100%; border-top: 5px solid red; margin-top: 2em; line-height: 60px; text-align: center; }
header { position: relative; }
header > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 100%; max-width: 1000px; }
header > div > h1 { width: 100%; text-align: center; }
header > div > h1 > img { display: inline; width: 28%; max-width: 303px; padding-top: 10%; }
header > div > h1 > span { display: none; }
@media screen and (min-width: 600px) and (max-width: 960px) { header > div > h1 > span { display: block; width: 10%; max-width: 75px; position: absolute; top: 0; right: 0; text-align: right; }
  header > div > h1 > span > img { display: block; width: 100%; max-width: 75px; } }
@media screen and (min-width: 960px) and (max-width: 1280px) { header > div > h1 > span { display: block; width: 10%; max-width: 75px; position: absolute; top: 0; right: 0; text-align: right; }
  header > div > h1 > span > img { display: block; width: 100%; max-width: 75px; } }
@media screen and (min-width: 1280px) { header > div > h1 > span { display: block; width: 10%; max-width: 75px; position: absolute; top: 0; right: 0; text-align: right; }
  header > div > h1 > span > img { display: block; width: 100%; max-width: 75px; } }
header > div > nav { width: 100%; }
header > div > nav > ul { padding-top: 5vh; padding-bottom: 2vh; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; max-width: 714px; margin: 0 auto; }
header > div > nav > ul > li > a > img { width: 100%; padding: 0 20% 12%; }
header > div > p { width: 100%; max-width:31.5px; margin:0 auto; text-align: center; }
header > div > p > a{display:block;}
header > div > p > a > img { width: 100%; cursor: pointer;}
header > ul { position: absolute; top: 0; right: 0; left: 0; height: 42px; width: 100%; max-width: 1000px; margin: 0 auto; text-align: left; font-size: 0; }
/*smp*/
header > ul.smpMode{position:fixed;z-index:999;background-image:url(../images/bg_top.png);}
header > ul.smpMode>li.menu{display:block;}
header > ul > li { display: inline-block; padding-bottom: 2px; }
header > ul > li > a { display: block; line-height: 40px; margin-left: 1.5em; letter-spacing: .02em; font-size: 3.5vw; }
header > ul > li > a.now { border-bottom: 2px solid red; }
header > ul > li.menu { position: relative; display: none; float: right; font-size: 14px; font-size: 1.4rem; height: 42px; width: 46px; background-color: #000; }
header > ul > li.menu.open > div#smp-btn > span:nth-of-type(1) {-webkit-transform: translateY(12px) rotate(-315deg); transform: translateY(12px) rotate(-315deg); background-color: #fff;}
header > ul > li.menu.open > div#smp-btn > span:nth-of-type(2) {opacity: 0;}
header > ul > li.menu.open > div#smp-btn > span:nth-of-type(3) {-webkit-transform: translateY(-10px) rotate(315deg); transform: translateY(-10px) rotate(315deg); background-color: #fff;}
header > ul > li.menu > span { height: 2px; width: 80%; background-color: #fff; }
header > ul > li.disp { display: block; }
@media screen and (min-width: 600px) and (max-width: 960px) { header > ul { height: auto; padding-top: 2%; }
  header > ul > li > a { line-height: 30px; font-size: 14px; font-size: 1.4rem; } }
@media screen and (min-width: 960px) and (max-width: 1280px) { header > ul { height: auto; padding-top: 2%; }
  header > ul > li > a { line-height: 30px; font-size: 14px; font-size: 1.4rem; } }
@media screen and (min-width: 1280px) { header > ul { height: auto; padding-top: 2%; }
  header > ul > li > a { line-height: 30px; font-size: 14px; font-size: 1.4rem; } }
div#smp-btn { display: block; width: 15%; position: relative; height: 36px; width: 36px; cursor: pointer; float: right; margin: 8px 5px 2px 2px; }
div#smp-btn > span { display: block; position: absolute; height: 4px; width: 100%; background: #fff; left: 0; transition: .35s ease-in-out; }
div#smp-btn > span:nth-child(1) { top: 0; }
div#smp-btn > span:nth-child(2) { top: 11px; }
div#smp-btn > span:nth-child(3) { top: 22px; }
div#smp-btn.open > span:nth-child(1) { transform: translateY(10px) rotate(-315deg); }
div#smp-btn.open > span:nth-child(2) { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
div#smp-btn.open > span:nth-child(3) { transform: translateY(-12px) rotate(315deg); }
ul#slideMenu { display: none; position: fixed !important; z-index: 999; top: 42px; }
ul#slideMenu.open { display: block; }
ul#slideMenu > li { display: block; background-color: rgba(7, 13, 19, 0.9); border-bottom: 1px solid #fff; }
ul#slideMenu > li:last-child { border-bottom: none; }
ul#slideMenu > li > a { position: relative; line-height: 2.5; color: #fff; font-size: 14px; font-size: 1.4rem; }
ul#slideMenu > li > a:before { position: absolute; top: calc(50% - 7.5px); left: -1em; content: ""; display: inline-block; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid red; padding-right: .5em; }
html { font-size: 62.5%; }
body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; line-height: 1.25; font-family: Noto Sans Japanese,Noto Serif TC,serif; font-size: 14px; font-size: 1.4rem; }
a { transition: color .3s; color: #000; }
a:link { color: #000; }
a:visited { color: #000; }
a:hover { color: red; }
div#wrapper {width: 100%; position: relative; overflow: hidden; background-image: url(../images/bg_top.png); }
.pagetop { position: fixed; right: 20px; display: none; background-color: rgba(39, 31, 20, 0.9); color: red; text-decoration: none; font-weight: 700; font-size: 11px; width: 60px; height: 60px; text-align: center; line-height: 22px; border-radius: 30px; box-sizing: border-box; cursor: pointer; border: 4px solid #000; z-index: 2; }
.pagetop > a { line-height: 7; color: #fff; font-family: '游ゴシック体',Yu Gothic,'ヒラギノ角ゴシック Pro',Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,Osaka,'ＭＳ Ｐゴシック',MS PGothic,sans-serif; }
.pagetop:before { content: '\25B2'; position: absolute; top: 10px; left: 0; width: 100%; text-align: center; font-size: 20px; }
.pagetop:hover { opacity: .7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
@keyframes fadeIn { 0% { opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  100% { opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }
.scroll-animation { animation-duration: 3s; animation-delay: 1s; animation-iteration-count: 1; fadeIn: 8s ease 0s 1 normal; }
path.svgAnimation {fill-opacity: 0; transition: fill-opacity 1.5s;}
svg.fill path{fill: #070002; fill-opacity: .1; stroke:none;}
svg.fill_fb path{fill: #fff; fill-opacity: 1; stroke:none;}
@keyframes st0_anime {
  0% { opacity: .5;}
  100% {stroke-dashoffset: 0; fill:#fff; opacity: 1;}
}
/* slider Pro */
.sp-buttons {bottom:10px !important;}
@media only screen and (min-width: 768px) and (max-width: 1024px) {.sp-button {width: 10px !important;height: 10px !important;}}
@media only screen and (min-width: 568px) and (max-width: 768px) {.sp-button {width: 10px !important;height: 10px !important;}}
@media only screen and (min-width: 320px) and (max-width: 568px) {.sp-button {width: 10px !important;height: 10px !important;}}