@charset "UTF-8";
html{font-size:2.22vw/*1.63vw*/;width:50%;max-width:1000px;margin:auto;}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family: 'Noto Sans JP', sans-serif;}
address {font-style:normal;}
strong{font-weight:bold;}
h1,h2,h3,h4,h5{font-weight:bold;font-family: 'M PLUS Rounded 1c', sans-serif;}
h2,h3,h4,h5,h6{margin-bottom:0.5em;}
ul,ol,dl,blockquote{margin-bottom:0.5em;}
p,li,dt,dd,th,td,input,textarea,address{/*font-size:1.6rem;*/margin-bottom:0.5em;line-height:1.7em;}


h2{font-size:/*2.2em;*/calc(1rem*1.375);line-height:1em;margin:2em 0;background:url(img/title-bg.svg) no-repeat 0 12%;/*background-position: center;*/}
h2 span.br{font-size:1rem;font-weight:300;}
h3{font-size:/*2.2em;*/calc(1rem*1.375);line-height:1em;margin:2em 0;background:url(img/title-bg.svg) no-repeat 0 12%;/*background-position: center;*/letter-spacing: 0.25em;}
h3 span.br{font-size:0.46em;font-weight:300;}
.br::before {content:"\A";white-space:pre;}/*不要なら削除*/
.br::after {content:"\A";border-top:solid 1px rgba(255,255,255,0.8);}/*不要なら削除*/
/*header*/
header {width:100%;/*height:31.25%; */aspect-ratio:3.0/1.0;background: url(img/header.svg) no-repeat;background-size:contain;display: flex;position: sticky;z-index:9}
#logo {width:51%;margin:3vw 10%;position: absolute;}
nav.globalMenuSp{}


/*main*/
main{position:relative;z-index: 1;}
#mainimg{width:100%;top:22%;margin-top:-11%;position: inherit;}
hr{border:none; background: url(img/hr.svg) no-repeat;width:100%;aspect-ratio: 4.6/1;}
.hr2{border:none; background: url(img/hr2.svg) no-repeat;width:100%;aspect-ratio: 25/1;margin:3em auto;width:80%;}



/*footer*/
footer{width:100%;background: url(img/footer.svg) top no-repeat #00B3ED;backgrond-size:contain;text-align: center;color:#fff;padding:30% 10%;font-family: 'M PLUS Rounded 1c', sans-serif;}
footer strong{font-size:1.4em;font-weight:bold;}
footer address{}
footer address a {font-size:1.7em; color:#fff; text-decoration: none; border-bottom:1px solid #fff}
iframe {width:100%; aspect-ratio:1/1;border:0.125em solid #004094;margin-top:3em;}




/*index.html*/
.greeting{width:100%;background: url(img/greeting-bg.svg) no-repeat;background-size:contain;aspect-ratio: 3.0/3.9;top:10%;margin-top:-5%;position:relative;padding:10vw 10%;color:#fff;text-align:center;}
.greeting h2{background: none; letter-spacing: -0.125em;}

.howtoenjoy{width:80%;margin:auto;text-align: center;}
.howtoenjoy ul{display: flex; flex-wrap: wrap; justify-content: space-between;margin-bottom:5em;}
.howtoenjoy ul li{list-style:none;width:49%;padding:0.5em;}
.howtoenjoy ul li a{background:rgba(255,255,255,0.75);color:#000; text-decoration: none;font:1.2em bold;padding:0.125em;width:100%;line-height: 1em;font-family: 'M PLUS Rounded 1c', sans-serif;}
.howtoenjoy ul li a:hover{background:rgba(255,255,0,0.8);border:1px solid #fff;}

.howtoenjoy ul li.lure{background:  url(img/btn-lure.svg) #F08C00 0.5em 1.22em no-repeat;background-size:95%;aspect-ratio: 1/1.1;display: flex;align-items: flex-end;}
.howtoenjoy ul li.lure span{font-size:0.6em;color:#F08C00;}

.howtoenjoy ul li.mstream{background:  url(img/btn-mstream.svg) #00AB88 0.5em 1.22em no-repeat;background-size:92%;aspect-ratio: 1/1.1;display: flex;align-items: flex-end;}
.howtoenjoy ul li.mstream span{font-size:0.6em;color:#00AB88;}

.howtoenjoy ul li.fishingpond {background:url(img/btn-fishing.svg) #00B8EE 0.5em 1.22em no-repeat; no-repeat;background-size:90%;aspect-ratio: 1/1.1;display: flex;align-items: flex-end;}
.howtoenjoy ul li.fishingpond span{font-size:0.6em; color:#00B8EE;}

.howtoenjoy ul li.bbq{background:  url(img/btn-bbq.svg) #FFEB00 0.5em 1.22em no-repeat;background-size:85%;aspect-ratio: 1/1.1;display: flex;align-items: flex-end;}
.howtoenjoy ul li.bbq span{font-size:0.6em;color:#F29600;}

.reserve {width:80%;margin:auto;text-align: center;}
.btn-reserve{margin:5em auto;background: url(img/click.svg) no-repeat; width:33%;background-size:contain;aspect-ratio: 3.0/1.1;text-align: center; display: flex;align-items: center;justify-content: center;padding:0 1.5em 0 0;}
.btn-reserve a{color: #fff;font-weight:bold;font-family: 'M PLUS Rounded 1c', sans-serif;/*font-size:1.6em; */text-decoration: none;}
.btn-reserve a:hover{color: #ffff00;}




/*lure.html*/
.lurefishing{width:80%;margin:auto;}
.lurefishing h2{top:2vw;left:50%;/*margin:0 0 0 -25%;*/transform: translateX(-50%);width:100%;position:absolute;background:none;color:#F18D00;text-align:center;text-shadow: 
    white 2px 0px 0px, white -2px 0px 0px,
    white 0px -2px 0px, white 0px 2px 0px,
    white 2px 2px 0px, white -2px 2px 0px,
    white 2px -2px 0px, white -2px -2px 0px,
    white 1px 2px 0px, white -1px 2px 0px,
    white 1px -2px 0px, white -1px -2px 0px,
    white 2px 1px 0px, white -2px 1px 0px,
    white 2px -1px 0px, white -2px -1px 0px,
    white 1px 1px 0px, white -1px 1px 0px,
    white 1px -1px 0px, white -1px -1px 0px;}
.lurefishing h2 span{text-shadow:none;color:rgba(255,255,255,0.8);font-size:0.55em;}
.guide{width:100%;background: url(img/hr.svg) no-repeat;background-size:contain;top:24%;margin-top:-12%;position:relative;padding:10vw 10%;}
.guide h2{}
.guide h3{margin:4em auto;letter-spacing: 0.25em;text-align:center;}
.guide h3 span{margin:4em auto;}
.guide dl{ display: flex; flex-wrap: wrap;}
.guide dl:nth-of-type(1){border-bottom:1px solid #004094;}
.guide dt{width:40%;}
.guide dd{width:60%;}
.guide dd li{line-height:1.2em; list-style: inside;}
.price {width:100%;background: url(img/hr.svg) no-repeat;background-size:contain;top:24%;margin-top:-12%;position:relative;padding:10vw 10%;}
.price h3{margin:4em auto;letter-spacing: 0.25em;text-align:center;}
.price dl{ display: flex; flex-wrap: wrap;padding:0.25em}
.price dt{width:60%;border-bottom:1px solid #004094;}
.price dd{width:40%;border-bottom:1px solid #004094;text-align:right;}
.price h4{border-bottom:2px solid #004094;}




/*mtstream.html*/

.mtstream{width:80%;margin:auto;}
.mtstream h2{top:2vw;left:50%;/*margin:0 0 0 -25%;*/transform: translateX(-50%);width:100%;position:absolute;background:none;color:#00AB88;text-align:center;text-shadow: 
    white 2px 0px 0px, white -2px 0px 0px,
    white 0px -2px 0px, white 0px 2px 0px,
    white 2px 2px 0px, white -2px 2px 0px,
    white 2px -2px 0px, white -2px -2px 0px,
    white 1px 2px 0px, white -1px 2px 0px,
    white 1px -2px 0px, white -1px -2px 0px,
    white 2px 1px 0px, white -2px 1px 0px,
    white 2px -1px 0px, white -2px -1px 0px,
    white 1px 1px 0px, white -1px 1px 0px,
    white 1px -1px 0px, white -1px -1px 0px;}
.mtstream h2 span{text-shadow:none;color:rgba(255,255,255,0.8);font-size:0.55em;}


    /*fishingpond.html*/
.fishingpond{width:80%;margin:auto;}
.fishingpond h2{top:2vw;left:50%;/*margin:0 0 0 -25%;*/transform: translateX(-50%);width:100%;position:absolute;background:none;color:#00B9EF;text-align:center;text-shadow: 
    white 2px 0px 0px, white -2px 0px 0px,
    white 0px -2px 0px, white 0px 2px 0px,
    white 2px 2px 0px, white -2px 2px 0px,
    white 2px -2px 0px, white -2px -2px 0px,
    white 1px 2px 0px, white -1px 2px 0px,
    white 1px -2px 0px, white -1px -2px 0px,
    white 2px 1px 0px, white -2px 1px 0px,
    white 2px -1px 0px, white -2px -1px 0px,
    white 1px 1px 0px, white -1px 1px 0px,
    white 1px -1px 0px, white -1px -1px 0px;}
.fishingpond h2 span{text-shadow:none;color:rgba(255,255,255,0.8);font-size:0.55em;}


    /*bbq.html*/
.bbq{width:80%;margin:auto;}
.bbq h2{top:2vw;left:50%;/*margin:0 0 0 -25%;*/transform: translateX(-50%);width:100%;position:absolute;background:none;color:#FFDA01;text-align:center;text-shadow: 
    white 2px 0px 0px, white -2px 0px 0px,
    white 0px -2px 0px, white 0px 2px 0px,
    white 2px 2px 0px, white -2px 2px 0px,
    white 2px -2px 0px, white -2px -2px 0px,
    white 1px 2px 0px, white -1px 2px 0px,
    white 1px -2px 0px, white -1px -2px 0px,
    white 2px 1px 0px, white -2px 1px 0px,
    white 2px -1px 0px, white -2px -1px 0px,
    white 1px 1px 0px, white -1px 1px 0px,
    white 1px -1px 0px, white -1px -1px 0px;}
.bbq h2 span{text-shadow:none;color:rgba(255,255,255,0.8);font-size:0.55em;}
h4 span {font-size:0.7em; font-weight:normal;}

 /*-----以下ハンバーガーメニュー-----*/
/*グローバルナビ用CSS*/
 nav.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    color: #000;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
}
 
nav.globalMenuSp ul {
    background: rgba(0,179,237,0.8);
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
 
nav.globalMenuSp ul li {
    /*font-size: 1.1em;*/
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px dotted #fff;
}
 
/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
 
nav.globalMenuSp ul li a {
    display: block;
    color: #fff;
    padding: 0.5em 0;
}
 
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0%);
}


/*ハンバーガー用*/
.navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 30%/*調整*/;
    top: 12px/*調整*/;
    width: 3em/*調整*/;
    height: 3em/*調整*/;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    background: #00B3ED;
    text-align: center;
}
 
.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 60%/*調整*/;
    border-bottom: solid 0.125em #eee;/*調整*/
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 20%/*調整*/;
}
 
.navToggle span:nth-child(1) {
    top: 0.75em/*調整*/;
}
 
.navToggle span:nth-child(2) {
    top: 1.25em/*調整*/;
}
 
.navToggle span:nth-child(3) {
    top: 1.75em;
}
 
.navToggle span:nth-child(4) {
    border: none;
    color: #eee;
    font-size: 0.5em;
    font-weight: bold;
    top: 4em/*調整*/;
}




/*タップしたあと*/
/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top:1.25em/*調整*/;
    left: 20%/*調整*/;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 1.25em/*調整*/;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}