@charset "utf-8";

h2.ttl{color:#fff;letter-spacing:.1em}
.txtbox{padding:1em;background:#fff;border-radius:0 0 1em 1em}

h3.ttl{color:var(--d_brown,#5d3618);font-size:1.2em;margin:1em auto;padding:.2em;border-bottom:2px var(--orange,#fbc64c) solid;font-weight:bold}

.flex{display:flex;flex-wrap:wrap;justify-content:space-between;}
.flex.rev{flex-direction:column-reverse}

/*--facility--*/
#facility section figure{text-align:center;margin:.5em auto}
#facility figcaption{padding:.5em}
#facility .pic{margin:1em auto;display:flex;flex-wrap:wrap;justify-content:space-evenly;}
#facility .pic figure{width:40%;}
#facility section figure img{border-radius:1.5em}
#facility .txt{width:90%;margin:0 auto}
#facility .txt p{text-indent:1em}
#facility  .pic+figure{padding:1em;border:2px var(--orange,#fbc64c) solid;border-radius:1.5em;}
#facility  .pic+figure figcaption{background:var(--d_brown,#341000);color:#fff;border-radius:1em 1em 0 0;margin-bottom:1em}

/*--charge--*/
h4.ttl{display:inline-block;border:2px #fff solid;font-weight:bold;color:#fff;background:#b3954f;padding:.2em .5em;border-radius:.5em;box-shadow:1px 1px 2px #ccc}
#charge .flex{width:85%;margin:1em auto}
#charge .flex.pics{width:100%}
#charge .flex div{width:45%;margin:.5em auto}
#charge .flex.pics figure{width:49%}
#charge figure img{border-radius:1em}
table.tbl{border-collapse:collapse;border-top:1px var(--d_brown,#341000) solid;border-left:1px var(--d_brown,#341000) solid;margin:.5em 1em}
table.tbl th,table.tbl td{padding:.2em .5em;border-right:1px var(--d_brown,#341000) solid;border-bottom:1px var(--d_brown,#341000) solid;}
table.tbl th{font-weight:bold;text-align:center;background:#f0e8d3}
#charge table td+td{text-align:center}
#charge table td:last-child{text-align:right}
table.tbl tr:nth-child(odd) td{background:#fafafa}
#charge table .dbl,#charge table .dbl td{border-bottom:3px var(--d_brown,#341000) double}

#charge h5.ttl{display:inline-block;border:1px #cda342 solid;padding:.5em 1em;border-left-width:.5em}
div.scrl{width:95%;height:auto;margin:1em auto 2em; overflow:auto;white-space: nowrap;position:relative}
div.scrl p{width:95%;margin:0 auto;font-size:.9em;padding-left:1em;text-indent:-1em}
#charge div.scrl table.tbl{width:95%;}
#charge div.scrl table.tbl td{text-align:right}
#charge div.scrl table.tbl td[rowspan],#charge div.scrl table.tbl td.t_c,#charge div.scrl.bbq table.tbl td:last-child{text-align:center;vertical-align:middle}
#charge div.scrl.bbq table.tbl td:first-child,#charge div.scrl:last-child table.tbl td:last-child{text-align:left}
#charge dl.note{width:90%;margin:1em auto 2em;display:flex;flex-wrap:wrap;}
#charge dl.note dt{flex:1 1 20%;background:#f0e8d3;text-align:center;padding:.2em 0;margin-bottom:.2em;border-radius:.5em 0 0 .5em}
#charge dl.note dd{flex:1 1 25%;padding:.2em 1em}
#charge dl.note dd.w100{flex:1 1 80%}
#charge dl.note dd.w75{flex:1 1 75%}

/*--usage--*/
#usage .flex{align-items:center}
#usage .flex table{width:63%}
#usage .flex figure{width:33%}
#usage figure{text-align:center;}
#usage figure h4{font-weight:bold;margin:.5em auto}
#usage figure p{text-align:left;font-size:.9em;width:90%;margin:0 auto}

#usage .flex div{width:33%}
#usage .flex div figure{width:100%;margin:1em auto}
#usage ul.tile{margin:2em auto;display:flex;flex-wrap: wrap;justify-content:space-between}
#usage ul.tile li{width:32%}
#usage ul.tile li a{display:block;background:#fff;overflow:hidden;color:#000;border:1px #999 solid}
#usage ul.tile li a img{transition: .4s}
#usage ul.tile li figcaption{padding:1em;position:relative;font-weight:bold;background:#fff;text-align:left}
#usage ul.tile li figcaption:before{content:"";width:15%;height:5px;display:inline-block;background:var(--green);position:absolute;top:0;left:0;transition:.4s}
#usage ul.tile li a:hover img{transform:scale(1.05)}
#usage ul.tile li a:hover figcaption:before{width:30%;background:/*#ffc107*/var(--orange)}


/*--download--*/
#download ul.dl{width:100%;margin:1em auto;padding:.5em 1em;background:url(../img/common/bg.png);border-radius:2em}
#download ul.dl li{margin:.5em auto}
#download ul.dl a{display:block;padding:.5em 1em;background:#fff;border-radius:1em;color:var(--d_brown,#34100);}
#download ul.dl a:before{content:"";display:inline-block;width:.8em;height:.8em;background:var(--orange,#fbc64c);clip-path:polygon(0 0, 100% 50%, 0 100%);margin-right:1em;margin-left:0;transition:.4s}
#download ul.dl a:hover{color:var(--orange,#fbc64c);background:#fffdf8;box-shadow:1px 1px 0px #f69}
#download ul.dl a:hover:before{background:#f69;margin-left:.5em}

/*--access--*/
#access iframe{width:100%}
#access div.flex{margin:1em auto;display:flex;flex-wrap:wrap;justify-content:space-around}
#access .flex dl{padding:.5em 1em;border:1px #cda342 solid;border-radius:1em;margin:.5em auto}
#access .flex dl dt{font-weight:bold;padding:.2em .5em;border-bottom:2px #ffc107 solid;margin-bottom:.5em}
#access .flex dl dd{padding-left:1em;margin-top:.5em}
#access .flex dl dd b{display:block;padding:.2em .5em;width:max-content;background:#cda342;color:#fff;margin-left:-1em;border-radius:.5em}

/*--news--*/
#news .txtbox dl,#usage .txtbox dl{width:95%;margin:0 auto;}
#news .txtbox dt,#usage .txtbox dt{display:flex;flex-wrap:wrap;padding:.5em 0;border-bottom:2px var(--d_brown,#341000) solid;}
#news .txtbox dt time{padding:0 .5em;background:var(--d_brown,#341000);color:#fff;text-align:center;margin:0 1em .5em 0;border-radius:.5em}
#news .txtbox dt h3,#usage .txtbox dt h3{font-weight:bold;font-size:1.1em;color:var(--d_brown,#341000)}
#news .txtbox dd,#usage .txtbox dd{padding:1em;display:flex;flex-wrap:wrap;justify-content:space-around;margin-bottom: 1em;border-bottom:1px var(--d_brown,#341000) dashed}
#news .txtbox dd figure,#usage .txtbox dd figure{flex-basis:35%;margin:0 1em 1em 0}
#news .txtbox dd figcaption,#usage .txtbox dd figcaption{padding:.2em;font-size:.8em}
#news .txtbox dd div,#usage .txtbox dd div{flex:1 1 60%}
#news .txtbox dd div p,#usage .txtbox dd div p{text-indent:1em}

/*--reserve--*/
#reserve ul.order{margin:0 auto 2em;width:95%;}
#reserve ul.order li{margin-bottom:.5em}
#reserve ul.order a{display:block;padding:.2em 1em;color:#fff;position:relative;background:linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);border-radius:.5em}
#reserve ul.order a:before{content:"";display:inline-block;width:.8em;height:.8em;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);margin-right:.5em}
#reserve ul.order a:hover{color:#fbc64c}
#reserve ul.order a:hover:before{background:#fbc64c}
#reserve ul.order a b{position:absolute;right:.5em;display:inline-block;padding:0 .5em;color:#fbc64c;background:#fff;border-radius:.5em}
#reserve div.tel{text-align:center;font-size:1.5em}
#reserve div.tel h4,#reserve div.tel a{font-weight:bold}


@media screen and (max-width: 540px){ 
.txtbox{padding:.5em}
#facility .pic figure{width:100%}    
#charge .flex{width:100%;}
#charge .flex div{width:100%}
#charge table{margin:.5em auto 1em}
div.scrl:before,div.scrl:after{content:"テーブルは左右にスクロールできます";display:inline-block;margin:1em auto;padding:0 1em;border:1px #666 solid;}
#charge dl.note dt,#charge dl.note dd,#charge dl.note dd.w100{flex:1 1 100%}
    
#usage .flex div,#usage .flex table,#usage .flex figure{width:98%;margin:.5em auto}
#usage ul.tile li{width:95%;margin:1em auto}
#news .txtbox dd,#usage .txtbox dd{padding:1em .5em}
#news .txtbox dd figure,#news .txtbox dd div,#usage .txtbox dd figure,#usage .txtbox dd div{flex:1 1 auto;margin:0 auto}
#news .txtbox dd figcaption,#usage .txtbox dd figcaption{margin-bottom:.5em;border-bottom:1px #ccc dotted}
}