@charset "utf-8";

section,
[id] {
  scroll-margin-top: 90px; /* ヘッダーの高さ分 */
}
/*スマホ*/
@media screen and (max-width:768px){

hr.line {
height: 1px;
border: none;
border-top: 1px #fff solid;margin:7% auto 6%;width:100%;
}
.txt1{ font-size: clamp(1.0rem, 1.7vw, 3.0rem); line-height: 1.8; margin-top:5%;margin-bottom: 4%;font-weight: normal;color:#fff }
.txt2{ font-size: clamp(0.9rem, 1.0vw, 1.1rem); line-height: 1.8;;margin-bottom: 0%;color:#fff;text-align:left}
.txt22{ font-size: clamp(0.9rem, 1.0vw, 1.1rem); line-height: 1.8;;margin-bottom: 0%;margin-top: 0%;color:#fff;text-align:left}
.txt3{ font-size: clamp(1.0rem, 1.4vw, 2.2rem); line-height: 1.8; margin-top: 1.5%;margin-bottom: 2%;font-weight: normal;color:#fff ;text-align:left}
.mark {width:20%;max-width:120px;height:auto;margin:6% auto 0% auto;padding: 0% 0px 0% 0px;text-align:center;}
.mark img{width:100%;max-width:120px;height:auto;margin:0 auto 0 auto;padding: 0% 0px 0% 0px;}
.title {margin: 7% auto 5% auto;font-size: clamp(1.0rem, 1.4vw, 1.6em); color:#fff;font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;line-height: 150%;font-weight: 400; letter-spacing: 5px; }
.title1 {margin: 3% auto 3% auto;font-size: clamp(1.0rem, 1.4vw, 1.6em); color:#fff;font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;line-height: 150%;font-weight: 400; letter-spacing: 5px; }

.locationbg {width:100%;height:auto;margin:70px auto 0% auto;padding: 0% 0% 0% 0%;text-align:center;background:#231815}
.location {width:90%;height:auto;margin:0% auto 0% auto;padding: 1% 5% 0% 5%;text-align:center;background:#231815}
.location2 {width:90%;height:auto;margin:0% auto 0px auto;padding: 2% 0px 3% 0px;text-align:center;}
	
.locanavi{width:100%;height:auto;margin:10% auto 0px auto;padding: 0% 0px 0% 0;text-align:center;}
.locanavi a {display: block;text-decoration: none;color:#000;}
.locanavi ul{list-style: none;padding: 0px 0px 0px 0px;margin: 0px; }
.locanavi li {float: left;list-style: none;width: 100%;text-align: center;line-height: 120%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;font-size:90%;  margin: 0px 1% 0px 1%;letter-spacing:0px;padding: 20px 0% 15px 0%;}

.hvr4 {
display: inline-block;height: auto;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);padding: 20px 0px 20px 0px;box-shadow: 0 0 1px transparent;position: relative;background:#9fa0a0;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;color:#fff!important;}

.hvr4:before {content: "";position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;background: #9fa0a0;-webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transform-origin: 50%;transform-origin: 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;color:#fff!important;}

.hvr4:hover, .hvr4:focus, .hvr4:active {color:#fff;}
.hvr4:hover:before, .hvr4:focus:before, .hvr4:active:before {-webkit-transform: scaleX(0);transform: scaleX(0);}


.hvr5 {
display: inline-block;height: auto;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);padding: 20px 0px 20px 0px;box-shadow: 0 0 1px transparent;position: relative;background:#ccc;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}
.hvr5:before {content: "";position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;background: #fff;-webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transform-origin: 50%;transform-origin: 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.hvr5:hover:before, .hvr5:focus:before, .hvr5:active:before {-webkit-transform: scaleX(0);transform: scaleX(0);}
#page-link{display: flex;justify-content: center;padding: 10px;}
#page-link li{list-style: none;border: 1px solid #ccc}
#page-link li a{padding:0 20px;text-decoration: none;}
#page-link li a::before{content:'▼';font-size:0.8rem;padding:0 0px 0 0;}
	
.map{width:80%;height:auto;margin:0% auto 0% auto;padding: 5% 0% 5% 0%;text-align:center;}
.locationbg3{
        margin: 0 0 5%;
        padding: 0% 0 3%;
        width: 100%;
        background: url('../location/img/locabg.webp') no-repeat top center;
        background-size: cover;
        color: #fff;
    
 }.locationbg4{
        margin: 0 0 5%;
        padding: 0% 0 3%;
        width: 100%;
        background: url('../location/img/bg2png.webp') no-repeat top center;
        background-size: cover;
        color: #fff;
    
 }
.location3 {width:90%;height:auto;margin:0% auto 0px auto;padding: 3% 0px 0% 0px;text-align:center;}
.location4 {width:80%;height:auto;margin:0% auto 0px auto;padding: 3% 0px 5% 0px;text-align:center;}
	img {padding: 0px 0px 10px 0px;text-align:center;}
.map{width:96%;height:auto;margin:0% auto 0% auto;padding: 5% 0% 3% 0%;text-align:center;}
.locacap{width:96%;margin: 0px auto 0px auto;text-align:left;padding:5% 0px 3% 0px;font-size:80%;line-height: 170%;color: #fff}
	
	
}

/*PC*/
@media print, screen and (min-width:769px){
	
.txt1{ font-size: clamp(1.0rem, 1.7vw, 3.0rem); line-height: 1.8; margin-top:2%;margin-bottom: 2%;font-weight: normal;color:#fff; letter-spacing: 5px;  }
.txt2{ font-size: clamp(0.9rem, 1.0vw, 1.1rem); line-height: 1.8;;margin-bottom: 0%;color:#fff}
.txt22{ font-size: clamp(0.9rem, 1.0vw, 1.1rem); line-height: 1.8;;margin-bottom: 0%;margin-top: 0%;color:#fff}
.txt3{ font-size: clamp(1.0rem, 1.2vw, 1.75rem); line-height: 1.8; margin-top: 1.5%;margin-bottom: 1%;font-weight: normal;color:#fff; letter-spacing: 5px;  }
.mark {width:20%;max-width:120px;height:auto;margin:4% auto 0% auto;padding: 0% 0px 0% 0px;text-align:center;}
.mark img{width:100%;max-width:120px;height:auto;margin:0 auto 0 auto;padding: 0% 0px 0% 0px;}
.title {margin: 3% auto 0% auto;font-size: clamp(1.0rem, 1.4vw, 1.6em); color:#fff;font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;line-height: 150%;font-weight: 400; letter-spacing: 5px; }
.title1 {margin: 3% auto 3% auto;font-size: clamp(1.0rem, 1.4vw, 1.6em); color:#fff;font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;line-height: 150%;font-weight: 400; letter-spacing: 5px; }
hr.line {
height: 1px;
border: none;
border-top: 1px #fff solid;margin:2% auto 2%;width:70%;}
.locationbg {width:100%;height:auto;margin:90px auto 0% auto;padding: 0% 0% 0% 0%;text-align:center;background:#231815}
.location {width:70%;height:auto;margin:0% auto 0% auto;padding: 1% 5% 1% 5%;text-align:center;background:#231815}
.location2 {width:90%;height:auto;margin:0% auto 0px auto;padding: 2% 0px 3% 0px;text-align:center;}
	
	
.locanavi{max-width:980px;width:80%;height:auto;margin:0px auto 0px auto;padding: 0px 0px 0px 0;text-align:center;}
.locanavi a {display: block;text-decoration: none;color:#000;}
.locanavi ul{list-style: none;padding: 0px 0px 0px 0px;margin: 0px; }
.locanavi li {float: left;list-style: none;width: 100%;text-align: center;line-height: 120%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;font-size:120%;  margin: 0px 1% 0px 1%;letter-spacing:0px;padding: 20px 0% 15px 0%;}
	
.hvr4 {
display: inline-block;height: auto;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);padding: 20px 0px 20px 0px;box-shadow: 0 0 1px transparent;position: relative;background:#9fa0a0;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;color:#fff;}
.hvr4:before {content: "";position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;background: #9fa0a0;-webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transform-origin: 50%;transform-origin: 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;color:#fff;}
.hvr4:hover, .hvr4:focus, .hvr4:active {color:#fff;}
.hvr4:hover:before, .hvr4:focus:before, .hvr4:active:before {-webkit-transform: scaleX(0);transform: scaleX(0);}
	
.hvr5 {
display: inline-block;height: auto;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);padding: 20px 0px 20px 0px;box-shadow: 0 0 1px transparent;position: relative;background:#ccc;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}
.hvr5:before {content: "";position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;background: #fff;-webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transform-origin: 50%;transform-origin: 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.hvr5:hover:before, .hvr5:focus:before, .hvr5:active:before {-webkit-transform: scaleX(0);transform: scaleX(0);}
#page-link{display: flex;justify-content: center;padding: 20px;}
#page-link li{list-style: none;border: 1px solid #ccc}
#page-link li a{padding:0 20px;text-decoration: none;}
#page-link li a::before{content:'▼';font-size:0.8rem;padding:0 10px 0 0;}

.locationbg3{
        margin: 0 0 5%;
        padding: 0% 0 3%;
        width: 100%;
        background: url('../location/img/locabg.webp') no-repeat top center;
        background-size: cover;
        color: #fff;
    
 }
	.locationbg4{
        margin: 0 0 5%;
        padding: 0% 0 3%;
        width: 100%;
        background: url('../location/img/bg2png.webp') no-repeat top center;
        background-size: cover;
        color: #fff;
    
 }
	
.location3 {width:90%;height:auto;margin:0% auto 0px auto;padding: 3% 0px 0% 0px;text-align:center;}
.location4 {width:50%;height:auto;margin:0% auto 0px auto;padding: 3% 0px 5% 0px;text-align:center;}
img {padding: 0px 0px 10px 0px;text-align:center;}
.map{width:70%;height:auto;margin:0% auto 0% auto;padding: 5% 0% 3% 0%;text-align:center;}
.locacap{width:96%;margin: 0px auto 0px auto;text-align:center;padding:5% 0px 3% 0px;font-size:80%;line-height: 170%;color: #fff}

}

@media (min-width: 769px) and (max-width: 1200px) {
.civic-section  {width: 96%;margin: 0 auto;}
 .wrapper {
  width: 96%;
  margin: 0 auto;
}
 .outline {
  width: 96%;
  margin: 0 auto;
}
.location {width:90%;margin: 0 auto;}


.beach-section {
width: 96%;
  margin: 0 auto;
  }
  .gourmet-section {
   width: 96%;
  margin: 0 auto;
  }

  .map {
   width: 90%;
  margin: 0 auto;
  }
 .fireworks-section {width: 96%;
  margin: 0 auto; }
	
.location3{width: 96%;margin: 0 auto; }
.location4 {width: 96%;margin: 0 auto; }
.lusca-section { width: 96%;margin: 0 auto;}
  .large-section { width: 90%;margin: 0 auto;
  } 
	.civic-section {
    width: 90%;margin: 0 auto;
  }  .lower-section {width: 90%;margin: 0 auto;}
@media print {
.hidden-print { display: none;}
.content-print{top:0 !IMPORTANT;left:0 !IMPORTANT;width:172mm !IMPORTANT; height:251mm !IMPORTANT;}
}