@charset "UTF-8";
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  background-color: #e9e6dd;
  color: #3c3c3c;
}

.font-english {
  font-family: "Be Vietnam Pro", sans-serif;
}

.font-number {
  font-family: "Inter", sans-serif;
}

a {
  transition: opacity 0.3s;
  text-decoration: none;
  color: #000;
}

a:hover {
  opacity: 0.8;
}

img {
  width: 100%;
  vertical-align: bottom;
}

.tab-show {
  display: none;
}

@media screen and (max-width: 900px) {
  .tab-show {
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .tab-hide {
    display: none;
  }
}

.tab-sm-show {
  display: none;
}

@media screen and (max-width: 750px) {
  .tab-sm-show {
    display: block;
  }
}

@media screen and (max-width: 750px) {
  .tab-sm-hide {
    display: none;
  }
}

.pc-show {
  display: none;
}

@media screen and (max-width: 1200px) {
  .pc-show {
    display: block;
  }
}

@media screen and (max-width: 1200px) {
  .pc-hide {
    display: none;
  }
}

.sp-show {
  display: none;
}

@media screen and (max-width: 500px) {
  .sp-show {
    display: block;
  }
}

@media screen and (max-width: 500px) {
  .sp-hide {
    display: none;
  }
}

.container {
  max-width: 1420px;
  margin: auto;
  padding: 0 20px;
}

header {
  width: 100%;
  display: flex;
  position: absolute;
  z-index: 100;
  top: 45px;
  padding-left: 55px;
  padding-right: 45px;
}

@media screen and (max-width: 900px) {
  header {
    padding-left: 25px;
    padding-right: 0px;
    top: 20px;
  }
}

@media screen and (max-width: 500px) {
  header {
    padding-left: 30px;
  }
}

header .header-logo {
  max-width: 190px;
  margin-top: 20px;
}

@media screen and (max-width: 900px) {
  header .header-logo {
    max-width: 140px;
  }
}

@media screen and (max-width: 500px) {
  header .header-logo {
    max-width: 120px;
    margin-top: 15px;
  }
}

header .header-right {
  margin-left: auto;
  position: fixed;
  top: 45px;
  right: 45px;
}

@media screen and (max-width: 900px) {
  header .header-right {
    top: 25px;
    right: 20px;
  }
}

@media screen and (max-width: 500px) {
  header .header-right {
    top: 17px;
  }
}

header .header-right .hambarger-btn {
  cursor: pointer;
  font-family: "Be Vietnam Pro", sans-serif;
  display: flex;
  align-items: center;
  padding: 12px 0px;
  padding-left: 33px;
  padding-right: 21px;
  background-color: black;
  border-radius: 100vh;
  transition: opacity 0.3s;
}

@media screen and (max-width: 500px) {
  header .header-right .hambarger-btn {
    padding-left: 25px;
    padding-right: 15px;
  }
}

header .header-right .hambarger-btn:hover {
  opacity: 0.8;
}

header .header-right .hambarger-btn .btn-text {
  color: white;
  font-size: 16px;
  letter-spacing: 0.08em;
  margin-right: 12px;
}

@media screen and (max-width: 500px) {
  header .header-right .hambarger-btn .btn-text {
    font-size: 13px;
    margin-right: 8px;
  }
}

header .header-right .hambarger-btn .btn-lines {
  width: 44px;
}

header .header-right .hambarger-btn .btn-lines .line {
  width: 44px;
  height: 1px;
  display: block;
  background-color: white;
}

header .header-right .hambarger-btn .btn-lines .line1 {
  margin-bottom: 8px;
}

header .header-right .hambarger-btn .btn-lines .line1.on {
  transform: translateX(5px) translateY(9px) rotate(25deg);
}

header .header-right .hambarger-btn .btn-lines .line2 {
  margin-bottom: 8px;
}

header .header-right .hambarger-btn .btn-lines .line2.on {
  opacity: 0;
}

header .header-right .hambarger-btn .btn-lines .line3.on {
  transform: translateX(5px) translateY(-9px) rotate(-25deg);
}

header .header-right .header-btn {
  padding: 12.5px 40px;
  margin-top: 10px;
  background-color: #cdb271;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: white;
  border-radius: 100vh;
  display: block;
}

@media screen and (max-width: 500px) {
  header .header-right .header-btn {
    font-size: 13px;
    padding: 10px 29px;
    margin-top: 7px;
  }
}

header .header-right .header-btn img {
  width: 18px;
  margin-left: 6px;
}

.header-content {
  height: 100vh;
  min-height: 700px;
  overflow: scroll;
  background-image: url(../images/header-content-bg.png);
  background-size: cover;
  background-color: #e9e6dd;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  z-index: 99;
}

@media screen and (max-width: 900px) {
  .header-content {
    background-image: url(../images/header-content-bg-sp.png);
  }
}

.header-content .header-content-wrapper {
  height: 90vh;
  min-height: 700px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

@media screen and (max-width: 900px) {
  .header-content .header-content-wrapper {
    height: 100%;
    padding-top: 100px;
  }
}

.header-content .container {
  max-width: 1420px;
  width: 100%;
  margin: auto;
  padding: 0 20px;
  display: flex;
}

@media screen and (max-width: 900px) {
  .header-content .container {
    flex-direction: column;
    align-items: center;
    padding-bottom: 110px;
  }
}

.header-content .container .footer-left {
  display: flex;
  gap: 48px;
}

@media screen and (max-width: 1200px) {
  .header-content .container .footer-left {
    flex-direction: column;
  }
}

@media screen and (max-width: 900px) {
  .header-content .container .footer-left {
    gap: 27px;
  }
}

.header-content .container .footer-left .footer-icons {
  max-width: 454px;
  margin-top: 16px;
}

@media screen and (max-width: 900px) {
  .header-content .container .footer-left .footer-icons {
    max-width: 173px;
    margin: auto;
  }
}

.header-content .container .footer-left .footer-icons h2 {
  max-width: 294px;
  margin: auto;
}

.header-content .container .footer-left .footer-icons .footer-btns {
  display: flex;
  gap: 10px;
  max-width: 350px;
  margin: auto;
  margin-top: 40px;
}

@media screen and (max-width: 900px) {
  .header-content .container .footer-left .footer-icons .footer-btns {
    display: none;
  }
}

.header-content .container .footer-left .instagram-icon {
  max-width: 58px;
  margin: auto;
  margin-top: 40px;
}

@media screen and (max-width: 900px) {
  .header-content .container .footer-left .instagram-icon {
    display: none;
  }
}

.header-content .container .footer-left .footer-texts {
  font-weight: 500;
  margin-top: 60px;
}

@media screen and (max-width: 900px) {
  .header-content .container .footer-left .footer-texts {
    margin-top: 20px;
  }
}

.header-content .container .footer-left .footer-texts h3 {
  letter-spacing: 0.03em;
  line-height: 1.8;
}

@media screen and (max-width: 900px) {
  .header-content .container .footer-left .footer-texts h3 {
    text-align: center;
    font-size: 16px;
  }
}

.header-content .container .footer-left .footer-texts .mb8 {
  margin-bottom: 8px;
}

.header-content .container .footer-left .footer-texts .mb16 {
  margin-bottom: 16px;
}

@media screen and (max-width: 900px) {
  .header-content .container .footer-left .footer-texts .mb16 {
    margin-bottom: 12px;
  }
}

.header-content .container .footer-left .footer-texts .text {
  font-size: 16px;
  margin-top: 8px;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 900px) {
  .header-content .container .footer-left .footer-texts .text {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media screen and (max-width: 900px) {
  .header-content .container .footer-left .footer-texts .text.text-large {
    font-size: 22px;
  }
}

.header-content .container .footer-left .footer-texts .text-flex {
  display: flex;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 900px) {
  .header-content .container .footer-left .footer-texts .text-flex.tab-column {
    flex-direction: column;
    font-size: 14px;
  }
}

.header-content .container .footer-left .footer-texts .text-flex .text-flex-left {
  min-width: 81px;
}

.header-content .container .footer-left .footer-texts .text-flex .text-flex-right img {
  min-width: 13.3px;
  width: 13.3px;
  transform: translateY(-6px);
  margin-right: 7px;
}

.header-content .container .footer-nav {
  max-width: 531px;
  margin-left: auto;
}

@media screen and (max-width: 900px) {
  .header-content .container .footer-nav {
    margin-right: auto;
    margin-top: 32px;
    margin-bottom: 32px;
  }
}

.header-content .container .footer-nav ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 80px;
  font-weight: 500;
}

@media screen and (max-width: 900px) {
  .header-content .container .footer-nav ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 60px;
  }
}

.header-content .container .footer-nav ul span {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-style: italic;
}

.header-content .container .sp-btn-wrapper {
  display: none;
}

@media screen and (max-width: 900px) {
  .header-content .container .sp-btn-wrapper {
    display: flex;
    max-width: 350px;
    margin: auto;
    gap: 10px;
  }
}

.header-content .container .sp-instagram-icon {
  max-width: 320px;
  width: 100%;
  text-align: left;
  margin: auto;
  margin-top: 24px;
  display: none;
}

@media screen and (max-width: 900px) {
  .header-content .container .sp-instagram-icon {
    display: block;
  }
}

.header-content .container .sp-instagram-icon a {
  display: inline-block;
  max-width: 58px;
  margin-right: initial;
  margin-left: initial;
}

@media screen and (max-width: 900px) {
  .header-content .section-flow-text {
    position: fixed;
    bottom: 0;
  }
}

.top-fv {
  margin: 20px;
  margin-bottom: 0;
  height: calc(100vh - 20px);
  min-height: 550px;
  position: relative;
}

@media screen and (max-width: 900px) {
  .top-fv {
    margin-top: 9px;
    margin: 10px;
    margin-bottom: 0;
    height: calc(100vh - 10px);
  }
}

.top-fv .swiper {
  width: 100%;
  height: calc(100vh - 20px);
  min-height: 550px;
  border-radius: 20px;
}

@media screen and (max-width: 900px) {
  .top-fv .swiper {
    height: calc(100vh - 10px);
    border: 10px;
  }
}

.top-fv .swiper .swiper-slide {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.top-fv .top-fv-item-wrapper {
  display: flex;
  position: absolute;
  gap: 8px;
  left: 60px;
  bottom: 48px;
  z-index: 2;
}

@media screen and (max-width: 900px) {
  .top-fv .top-fv-item-wrapper {
    left: 10px;
    bottom: 10px;
  }
}

@media screen and (max-width: 750px) {
  .top-fv .top-fv-item-wrapper {
    flex-direction: column;
    max-width: 300px;
  }
}

.top-fv .top-fv-item-wrapper .top-fv-item-left {
  padding: 10px 16px;
  background: white;
  border-radius: 5px;
}

@media screen and (max-width: 750px) {
  .top-fv .top-fv-item-wrapper .top-fv-item-left {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
  }
}

.top-fv .top-fv-item-wrapper .top-fv-item-left h2 {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  margin-bottom: 5px;
}

@media screen and (max-width: 750px) {
  .top-fv .top-fv-item-wrapper .top-fv-item-left h2 {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.36;
  }
}

.top-fv .top-fv-item-wrapper .top-fv-item-left .top-fv-item-left-flex {
  display: flex;
  align-items: center;
}

.top-fv .top-fv-item-wrapper .top-fv-item-left .top-fv-item-left-flex .left-flex-icon {
  width: 38px;
}

@media screen and (max-width: 750px) {
  .top-fv .top-fv-item-wrapper .top-fv-item-left .top-fv-item-left-flex .left-flex-icon {
    width: 34px;
  }
}

.top-fv .top-fv-item-wrapper .top-fv-item-left .top-fv-item-left-flex .left-flex-icon.icon1 {
  margin-right: 8px;
}

.top-fv .top-fv-item-wrapper .top-fv-item-left .top-fv-item-left-flex .left-flex-text1 {
  margin-right: 8px;
  font-size: 22px;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.top-fv .top-fv-item-wrapper .top-fv-item-left .top-fv-item-left-flex .left-flex-text1 span {
  font-size: 13px;
  margin-left: 1px;
}

.top-fv .top-fv-item-wrapper .top-fv-item-left .top-fv-item-left-flex .left-flex-text2 {
  font-size: 22px;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.top-fv .top-fv-item-wrapper .top-fv-item-left .top-fv-item-left-flex .left-flex-text2 span {
  font-size: 13px;
  margin-left: 1px;
}

.top-fv .top-fv-item-wrapper .top-fv-item-news {
  background-color: #fff;
  border-radius: 5px;
  padding: 21px 16px;
  max-width: 337px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 750px) {
  .top-fv .top-fv-item-wrapper .top-fv-item-news {
    padding: 14px;
  }
}

.top-fv .top-fv-item-wrapper .top-fv-item-news .top-fv-item-news-icon {
  min-width: 15px;
  width: 15px;
  margin-right: 8px;
}

@media screen and (max-width: 750px) {
  .top-fv .top-fv-item-wrapper .top-fv-item-news .top-fv-item-news-icon {
    transform: translateY(-3px);
    width: 16px;
    min-width: 16px;
  }
}

.top-fv .top-fv-item-wrapper .top-fv-item-news .top-fv-item-news-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.36;
}

@media screen and (max-width: 750px) {
  .top-fv .top-fv-item-wrapper .top-fv-item-news .top-fv-item-news-title {
    font-size: 12px;
  }
}

.top-concept {
  padding: 160px 0;
  padding-left: 250px;
  display: flex;
}

@media screen and (max-width: 1600px) {
  .top-concept {
    padding-left: 50px;
  }
}

@media screen and (max-width: 1200px) {
  .top-concept {
    flex-direction: column-reverse;
    padding: 100px 0;
  }
}

@media screen and (max-width: 750px) {
  .top-concept {
    padding: 60px 0;
  }
}

.top-concept .left-texts {
  min-width: 648px;
}

@media screen and (max-width: 1600px) {
  .top-concept .left-texts {
    min-width: 580px;
  }
}

@media screen and (max-width: 1200px) {
  .top-concept .left-texts {
    min-width: initial;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 750px) {
  .top-concept .left-texts {
    margin-top: 25px;
  }
}

.top-concept .left-texts h2 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.top-concept .left-texts h2 span {
  letter-spacing: 0.08em;
  border-right: 1px dotted;
  padding-right: 14px;
  margin-right: 14px;
  font-style: italic;
  font-weight: 300;
}

.top-concept .left-texts h3 {
  margin-top: 64px;
  letter-spacing: 0.03em;
  line-height: 1.15;
  font-size: 44px;
}

@media screen and (max-width: 1600px) {
  .top-concept .left-texts h3 {
    font-size: 36px;
    margin-top: 54px;
  }
}

@media screen and (max-width: 1200px) {
  .top-concept .left-texts h3 {
    margin-top: 45px;
  }
}

@media screen and (max-width: 750px) {
  .top-concept .left-texts h3 {
    margin-top: 32px;
    font-size: 30px;
    letter-spacing: 0;
  }
}

.top-concept .left-texts h3 .ex-large {
  font-size: 160px;
  letter-spacing: 0;
}

@media screen and (max-width: 1600px) {
  .top-concept .left-texts h3 .ex-large {
    font-size: 140px;
  }
}

@media screen and (max-width: 1200px) {
  .top-concept .left-texts h3 .ex-large {
    font-size: 100px;
  }
}

.top-concept .left-texts h3 .large {
  font-size: 76px;
}

@media screen and (max-width: 1600px) {
  .top-concept .left-texts h3 .large {
    font-size: 68px;
  }
}

@media screen and (max-width: 750px) {
  .top-concept .left-texts h3 .large {
    font-size: 30px;
    letter-spacing: 0.03em;
  }
}

@media screen and (max-width: 750px) {
  .top-concept .left-texts h3 .daisizen {
    letter-spacing: 0.08em;
  }
}

.top-concept .left-texts .text {
  font-size: 20px;
  line-height: 2.2;
  letter-spacing: 0.03em;
  margin-top: 48px;
}

@media screen and (max-width: 1600px) {
  .top-concept .left-texts .text {
    font-size: 18px;
  }
}

@media screen and (max-width: 1200px) {
  .top-concept .left-texts .text {
    font-size: 17px;
    line-height: 2.1;
  }
}

@media screen and (max-width: 750px) {
  .top-concept .left-texts .text {
    font-size: 15px;
    line-height: 2;
    margin-top: 40px;
  }
}

.top-concept .left-texts .btn-wrapper {
  max-width: 348px;
  margin-top: 64px;
}

@media screen and (max-width: 1200px) {
  .top-concept .left-texts .btn-wrapper {
    margin-top: 50px;
  }
}

@media screen and (max-width: 750px) {
  .top-concept .left-texts .btn-wrapper {
    max-width: 300px;
    margin: auto;
    margin-top: 32px;
  }
}

.top-facilities {
  padding-bottom: 60px;
}

@media screen and (max-width: 900px) {
  .top-facilities {
    padding-bottom: 24px;
  }
}

.top-facilities .top-facilities-bg-item {
  background-position: center bottom;
  background-size: cover;
  background-image: url(../images/top-facilities-bg-item.png);
  height: 755px;
  position: relative;
}

@media screen and (max-width: 500px) {
  .top-facilities .top-facilities-bg-item {
    background-image: url(../images/top-facilities-bg-item-sp.png);
    height: 435px;
  }
}

.top-facilities .top-facilities-bg-item .section-title {
  color: white;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.top-facilities .section-title {
  color: white;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

@media screen and (max-width: 500px) {
  .top-facilities .top-facilities-bg-item .section-title {
    top: 120px;
  }
}

.top-facilities .top-facilities-bg-item .section-title h2 {
  font-size: 30px;
  font-style: italic;
  font-weight: 300;
  letter-spacing: .08em;
}
.top-facilities .section-title h2 {
  font-size: 30px;
  font-style: italic;
  font-weight: 300;
  letter-spacing: .08em;
}

.top-facilities .top-facilities-bg-item .section-title .lead {
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .03em;
}
.top-facilities .section-title .lead {
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .03em;
}

.top-facilities .facilities-card-wrapper {
  display: flex;
  gap: 10px;
  margin-top: -250px;
  z-index: 11;
  position: relative;
}

@media screen and (max-width: 1200px) {
  .top-facilities .facilities-card-wrapper {
    display: none;
  }
}

.top-facilities .facilities-card-wrapper .card1 {
  transform: translateY(-55px);
  margin-left: 25px;
  margin-right: 25px;
}

.top-facilities .facilities-card-wrapper .card2, .top-facilities .facilities-card-wrapper .card3 {
  transform: translateY(-50px);
}

.top-facilities .swiper {
  display: none;
  padding: 30px 0;
}

@media screen and (max-width: 1200px) {
  .top-facilities .swiper {
    display: block;
    margin-top: -300px;
  }
}

@media screen and (max-width: 500px) {
  .top-facilities .swiper {
    margin-top: -200px;
  }
}

.top-facilities .swiper-slide-prev {
  transform: rotate(-5deg) !important;
  margin-top: 30px;
}

@media screen and (max-width: 750px) {
  .top-facilities .swiper-slide-prev {
    margin-top: 20px;
  }
}

.top-facilities .swiper-slide-next {
  transform: rotate(5deg) !important;
  margin-top: 30px;
}

@media screen and (max-width: 750px) {
  .top-facilities .swiper-slide-next {
    margin-top: 20px;
  }
}

.top-facilities .btn-wrapper {
  max-width: 348px;
  margin: auto;
  margin-top: 30px;
}

.top-facilities .map-img {
  max-width: 1420px;
  padding: 0 20px;
  margin: auto;
  margin-top: 60px;
}

@media screen and (max-width: 900px) {
  .top-facilities .map-img {
    padding: 0;
    margin-top: 24px;
  }
}

.top-go-can {
  padding: 160px 0;
  background-color: #fff;
}

@media screen and (max-width: 1200px) {
  .top-go-can {
    padding: 100px 0;
  }
}

@media screen and (max-width: 750px) {
  .top-go-can {
    padding: 60px 0;
  }
}

@media screen and (max-width: 900px) {
  .top-go-can {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
  }
}

.top-go-can .texts {
  padding-left: 270px;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 1600px) {
  .top-go-can .texts {
    padding-left: 100px;
  }
}

@media screen and (max-width: 1200px) {
  .top-go-can .texts {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.top-go-can .texts h2 {
  font-weight: 600;
  font-style: italic;
  font-size: 80px;
  letter-spacing: 0.03em;
  line-height: 1;
}

@media screen and (max-width: 900px) {
  .top-go-can .texts h2 {
    font-size: 60px;
  }
}

@media screen and (max-width: 750px) {
  .top-go-can .texts h2 {
    font-size: 32px;
  }
}

.top-go-can .texts .lead {
  font-size: 44px;
  line-height: 1.36;
  letter-spacing: 0.03em;
  font-weight: 500;
  margin-top: 20px;
}

@media screen and (max-width: 900px) {
  .top-go-can .texts .lead {
    font-size: 36px;
  }
}

@media screen and (max-width: 750px) {
  .top-go-can .texts .lead {
    font-size: 22px;
    margin-top: 16px;
  }
}

.top-go-can .texts .text {
  margin-top: 24px;
  font-size: 20px;
  line-height: 2.2;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 900px) {
  .top-go-can .texts .text {
    font-size: 15px;
    line-height: 2;
    margin-top: 16px;
  }
}

.top-go-can .texts .btn-wrapper {
  margin-top: 40px;
  max-width: 348px;
}

@media screen and (max-width: 750px) {
  .top-go-can .texts .btn-wrapper {
    max-width: 300px;
    margin: auto;
    margin-top: 40px;
  }
}

.top-go-can .img {
  margin-top: -160px;
}

@media screen and (max-width: 1600px) {
  .top-go-can .img {
    margin-top: -120px;
  }
}

@media screen and (max-width: 1200px) {
  .top-go-can .img {
    margin-top: -60px;
  }
}

@media screen and (max-width: 900px) {
  .top-go-can .img {
    margin-top: 0;
  }
}

.section-flow-text {
  width: 100%;
  display: flex;
  overflow: hidden;
  padding: 24px 0;
  background-color: #f2f2e9;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

@media screen and (max-width: 900px) {
  .section-flow-text {
    padding: 13px 0;
  }
}

.section-flow-text .sec1__title--first,
.section-flow-text .sec1__title--second {
  flex-shrink: 0;
  width: auto;
  height: auto;
  display: inline-block;
  text-wrap: nowrap;
  white-space: nowrap;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: 300;
  font-style: italic;
}

@media screen and (max-width: 900px) {
  .section-flow-text .sec1__title--first,
  .section-flow-text .sec1__title--second {
    font-size: 20px;
  }
}

.section-flow-text .sec1__title--first {
  animation: anim--first 100s infinite linear 0.1s both;
}

.section-flow-text .sec1__title--second {
  animation: anim--second 100s infinite linear 0.1s both;
}

@keyframes anim--first {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes anim--second {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.flow-swiper-section {
  background-color: #3c3c3c;
  padding: 160px 0;
  position: relative;
}

@media screen and (max-width: 750px) {
  .flow-swiper-section {
    padding: 60px 0;
  }
}

.flow-swiper-section .flow-swiper .swiper-wrapper {
  transition-timing-function: linear;
}

.flow-swiper-section .texts-wrapper {
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 5;
  background-color: #3c3c3c;
  left: 270px;
  max-width: 600px;
  padding-left: 80px;
  padding-right: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (max-width: 1600px) {
  .flow-swiper-section .texts-wrapper {
    left: 100px;
  }
}

@media screen and (max-width: 1200px) {
  .flow-swiper-section .texts-wrapper {
    padding-left: 20px;
    padding-right: 20px;
    left: 50px;
  }
}

@media screen and (max-width: 750px) {
  .flow-swiper-section .texts-wrapper {
    display: none;
  }
}

.flow-swiper-section .texts-wrapper .texts {
  color: white;
}

.flow-swiper-section h2 {
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: 300;
  color: white;
}

@media screen and (max-width: 750px) {
  .flow-swiper-section h2 {
    padding: 0 20px;
    font-size: 20px;
  }
}

.flow-swiper-section .text {
  margin-top: 20px;
  line-height: 1.5;
  font-size: 26px;
  letter-spacing: 0.03em;
  color: white;
}

@media screen and (max-width: 1200px) {
  .flow-swiper-section .text {
    font-size: 22px;
  }
}

@media screen and (max-width: 750px) {
  .flow-swiper-section .text {
    padding: 0 20px;
    font-size: 20px;
    margin-bottom: 32px;
  }
}

.flow-swiper-section .btn-wrapper {
  max-width: 348px;
  margin-top: 48px;
}

@media screen and (max-width: 1200px) {
  .flow-swiper-section .btn-wrapper {
    max-width: 300px;
    margin-top: 35px;
  }
}

@media screen and (max-width: 750px) {
  .flow-swiper-section .btn-wrapper {
    margin: auto;
    margin-top: 32px;
  }
}

.top-topics {
  padding-top: 160px;
}

@media screen and (max-width: 900px) {
  .top-topics {
    padding-top: 40px;
  }
}

.top-topics .top-topics-img1 {
  padding-left: 50px;
  padding-right: 50px;
}

@media screen and (max-width: 900px) {
  .top-topics .top-topics-img1 {
    padding-left: 0;
    padding-right: 0;
  }
}

.top-topics .top-topics-img2 {
  padding-left: 50px;
  padding-right: 50px;
  margin-top: 160px;
}

@media screen and (max-width: 900px) {
  .top-topics .top-topics-img2 {
    padding-left: 0;
    padding-right: 0;
    margin-top: 60px;
  }
}

.top-topics .top-topics-img3 {
  margin-top: 160px;
}

@media screen and (max-width: 900px) {
  .top-topics .top-topics-img3 {
    margin-top: 60px;
  }
}

.top-topics .top-topics-item-wrapper {
  display: flex;
  gap: 80px;
  max-width: 1320px;
  margin: auto;
  padding: 0 20px;
  margin-top: 44px;
}

@media screen and (max-width: 1200px) {
  .top-topics .top-topics-item-wrapper {
    gap: 40px;
  }
}

@media screen and (max-width: 900px) {
  .top-topics .top-topics-item-wrapper {
    flex-direction: column;
    margin-top: 32px;
    gap: 32px;
  }
}

.top-topics .top-topics-item-wrapper .left {
  min-width: 348px;
  width: 348px;
}

@media screen and (max-width: 1200px) {
  .top-topics .top-topics-item-wrapper .left {
    min-width: 275px;
    width: 275px;
  }
}

@media screen and (max-width: 900px) {
  .top-topics .top-topics-item-wrapper .left {
    text-align: center;
    margin: auto;
    min-width: initial;
    width: 100%;
    max-width: 300px;
  }
}

.top-topics .top-topics-item-wrapper .left h2 {
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.08em;
  font-style: italic;
  font-weight: 400;
}

.top-topics .top-topics-item-wrapper .left .lead {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-top: 8px;
}

.top-topics .top-topics-item-wrapper .left .btn-wrapper {
  margin-top: 50px;
}

@media screen and (max-width: 900px) {
  .top-topics .top-topics-item-wrapper .left .btn-wrapper {
    margin-top: 32px;
  }
}

.top-topics .top-topics-item-wrapper .right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

@media screen and (max-width: 750px) {
  .top-topics .top-topics-item-wrapper .right {
    gap: 10px;
  }
}

.top-topics .top-topics-item-wrapper .right a {
  background-color: #f8f6f3;
  border-radius: 5px;
  display: block;
  padding: 24px 32px;
}

@media screen and (max-width: 750px) {
  .top-topics .top-topics-item-wrapper .right a {
    padding: 16px 10px;
  }
}

.top-topics .top-topics-item-wrapper .right a .top-news-item {
  display: flex;
  gap: 40px;
}

@media screen and (max-width: 1200px) {
  .top-topics .top-topics-item-wrapper .right a .top-news-item {
    gap: 30px;
  }
}

@media screen and (max-width: 750px) {
  .top-topics .top-topics-item-wrapper .right a .top-news-item {
    gap: 12px;
    /* 縦積み時は中央寄せだと文字だけ内側にズレて見えるので左揃えにする（2026-09-02 修正） */
    align-items: stretch;
    flex-direction: column;
  }
  /* テキスト側にも幅を持たせて画像と左端を揃える */
  .top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-right {
    width: 100%;
  }
}

.top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-left {
  min-width: 254px;
  width: 254px;
}

@media screen and (max-width: 1200px) {
  .top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-left {
    min-width: 225px;
    width: 225px;
  }
}

@media screen and (max-width: 750px) {
  .top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-left {
/*     min-width: 170px; */
    width: 100%
  }
}

@media screen and (max-width: 500px) {
  .top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-left {
/*     min-width: 130px; */
/*     width: 130px; */
  }
}

.top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-right {
  margin-top: 16px;
}

@media screen and (max-width: 750px) {
  .top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-right {
    margin-top: 0;
  }
}

.top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-right .date-category {
  display: flex;
  align-items: center;
}

.top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-right .date-category time {
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 400;
  line-height: 1;
}

.top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-right .date-category .category {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: white;
  background-color: #3f4d82;
  padding: 3px 6px 3px;
  border-radius: 3px;
  margin-left: 10px;
}

.top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-right h3 {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
}

@media screen and (max-width: 1200px) {
  .top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-right h3 {
    font-size: 17px;
    margin-top: 17px;
  }
}

@media screen and (max-width: 750px) {
  .top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-right h3 {
    font-size: 14px;
    line-height: 1.36;
    letter-spacing: 0.03em;
    margin-top: 8px;
  }
}

@media screen and (max-width: 500px) {
  .top-topics .top-topics-item-wrapper .right a .top-news-item .top-news-item-right h3 {
    font-size: 12px;
  }
}

footer {
  padding: 160px 0 100px;
}

@media screen and (max-width: 1200px) {
  footer {
    padding: 100px 0 100px;
  }
}

@media screen and (max-width: 900px) {
  footer {
    padding: 60px 0 40px;
  }
}

footer .container {
  max-width: 1420px;
  margin: auto;
  padding: 0 20px;
  display: flex;
}

@media screen and (max-width: 900px) {
  footer .container {
    flex-direction: column;
    align-items: center;
  }
}

footer .container .footer-left {
  display: flex;
  gap: 48px;
}

@media screen and (max-width: 1200px) {
  footer .container .footer-left {
    flex-direction: column;
  }
}

@media screen and (max-width: 900px) {
  footer .container .footer-left {
    gap: 27px;
  }
}

footer .container .footer-left .footer-icons {
  max-width: 293px;
  margin-top: 16px;
}

@media screen and (max-width: 900px) {
  footer .container .footer-left .footer-icons {
    max-width: 173px;
    margin: auto;
  }
}

footer .container .footer-left .footer-icons .footer-btns {
  margin-top: 60px;
  display: flex;
  gap: 10px;
}

@media screen and (max-width: 900px) {
  footer .container .footer-left .footer-icons .footer-btns {
    display: none;
  }
}

footer .container .footer-left .instagram-icon {
  max-width: 58px;
  margin: auto;
  margin-top: 40px;
}

@media screen and (max-width: 900px) {
  footer .container .footer-left .instagram-icon {
    display: none;
  }
}

footer .container .footer-left .footer-texts {
  font-weight: 500;
}

footer .container .footer-left .footer-texts h3 {
  letter-spacing: 0.03em;
  line-height: 1.8;
}

@media screen and (max-width: 900px) {
  footer .container .footer-left .footer-texts h3 {
    text-align: center;
    font-size: 16px;
  }
}

footer .container .footer-left .footer-texts .mb8 {
  margin-bottom: 8px;
}

footer .container .footer-left .footer-texts .mb16 {
  margin-bottom: 16px;
}

@media screen and (max-width: 900px) {
  footer .container .footer-left .footer-texts .mb16 {
    margin-bottom: 12px;
  }
}

footer .container .footer-left .footer-texts .text {
  font-size: 16px;
  margin-top: 8px;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 900px) {
  footer .container .footer-left .footer-texts .text {
    font-size: 14px;
    margin-top: 12px;
  }
}

footer .container .footer-left .footer-texts .text-flex {
  display: flex;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 900px) {
  footer .container .footer-left .footer-texts .text-flex.tab-column {
    flex-direction: column;
    font-size: 14px;
  }
}

footer .container .footer-left .footer-texts .text-flex .text-flex-left {
  min-width: 81px;
}

footer .container .footer-left .footer-texts .text-flex .text-flex-right img {
  min-width: 13.3px;
  width: 13.3px;
  transform: translateY(-6px);
  margin-right: 7px;
}

footer .container .footer-nav {
  max-width: 321px;
  margin-left: auto;
}

@media screen and (max-width: 900px) {
  footer .container .footer-nav {
    margin-right: auto;
    margin-top: 32px;
    margin-bottom: 32px;
  }
}

footer .container .footer-nav ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 80px;
  font-weight: 500;
}

footer .container .footer-nav ul span {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-style: italic;
}

footer .container .sp-btn-wrapper {
  display: none;
}

@media screen and (max-width: 900px) {
  footer .container .sp-btn-wrapper {
    display: flex;
    max-width: 350px;
    margin: auto;
    gap: 10px;
  }
}

footer .container .sp-instagram-icon {
  max-width: 320px;
  width: 100%;
  text-align: left;
  margin: auto;
  margin-top: 24px;
  display: none;
}

@media screen and (max-width: 900px) {
  footer .container .sp-instagram-icon {
    display: block;
  }
}

footer .container .sp-instagram-icon a {
  display: inline-block;
  max-width: 58px;
  margin-right: initial;
  margin-left: initial;
}

footer .copyright {
  max-width: 1420px;
  margin: auto;
  padding: 0 20px;
  margin-top: 120px;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

@media screen and (max-width: 900px) {
  footer .copyright {
    text-align: left;
    margin-top: 60px;
  }
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  下層共通クラス開始
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.bottom-fv {
  margin: 20px;
  margin-bottom: 0;
  height: 600px;
  position: relative;
  border-radius: 20px;
  background-image: url(../images/concept-bottom-fv-bg.png);
  background-size: cover;
  background-position: center;
}

@media screen and (max-width: 900px) {
  .bottom-fv {
    margin-top: 9px;
    margin: 10px;
    margin-bottom: 0;
    height: 400px;
  }
}

@media screen and (max-width: 750px) {
  .bottom-fv {
    height: 300px;
  }
}

@media screen and (max-width: 500px) {
  .bottom-fv {
    height: 240px;
  }
}

.bottom-fv h2 {
  font-size: 100px;
  font-style: italic;
  letter-spacing: 0.08em;
  color: white;
  font-weight: 300;
  position: absolute;
  bottom: 40px;
  left: 80px;
}

@media screen and (max-width: 1200px) {
  .bottom-fv h2 {
    font-size: 80px;
    left: 40px;
    bottom: 20px;
  }
}

@media screen and (max-width: 900px) {
  .bottom-fv h2 {
    font-size: 60px;
    left: 20px;
  }
}

@media screen and (max-width: 500px) {
  .bottom-fv h2 {
    font-size: 40px;
  }
}

.bottom-top-text-section {
  padding: 120px 0;
}

@media screen and (max-width: 1200px) {
  .bottom-top-text-section {
    padding: 100px 0;
  }
}

@media screen and (max-width: 900px) {
  .bottom-top-text-section {
    padding: 80px 0;
  }
}

@media screen and (max-width: 750px) {
  .bottom-top-text-section {
    padding: 60px 0;
  }
}

.bottom-top-text-section .container h2 {
  font-size: 44px;
  line-height: 1.55;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 1200px) {
  .bottom-top-text-section .container h2 {
    font-size: 35px;
  }
}

@media screen and (max-width: 900px) {
  .bottom-top-text-section .container h2 {
    font-size: 30px;
  }
}

@media screen and (max-width: 750px) {
  .bottom-top-text-section .container h2 {
    font-size: 22px;
  }
}

@media screen and (max-width: 750px) {
  .bottom-top-text-section .container h2.tab-tac {
    text-align: center;
  }
}

.bottom-top-text-section .container .text {
  font-size: 20px;
  line-height: 2.2;
  letter-spacing: 0.03em;
  margin-top: 32px;
}

@media screen and (max-width: 1200px) {
  .bottom-top-text-section .container .text {
    font-size: 18px;
  }
}

@media screen and (max-width: 900px) {
  .bottom-top-text-section .container .text {
    font-size: 16px;
    line-height: 2.1;
  }
}

@media screen and (max-width: 750px) {
  .bottom-top-text-section .container .text {
    font-size: 15px;
    line-height: 2;
    margin-top: 40px;
  }
}

.bottom-top-text-section .container .text.tar {
  text-align: right;
}

@media screen and (max-width: 750px) {
  .bottom-top-text-section .container .text.tar {
    text-align: left;
  }
}

.bottom-top-text-section .container .text.tac {
  text-align: center;
  margin-top: 0;
}

@media screen and (max-width: 750px) {
  .bottom-top-text-section .container .text.tac {
    text-align: left;
  }
}

.bottom-top-text-section .container .text.tal {
  text-align: left;
}

@media screen and (max-width: 750px) {
  .bottom-top-text-section .container .text.tal {
    margin-top: 24px;
  }
}

.bottom-top-text-section .container .text.tal span {
  padding-left: 20px;
  position: relative;
  display: inline-block;
}

.bottom-top-text-section .container .text.tal span::before {
  content: "・";
  font-size: 42px;
  color: #cdb271;
  position: absolute;
  top: -27px;
  left: -12px;
}

.concept-go-can-bg-section {
  width: 100%;
}

.concept-go-can-bg-section .top-fv-swiper {
  height: 700px;
  width: 100%;
}

@media screen and (max-width: 900px) {
  .concept-go-can-bg-section .top-fv-swiper {
    height: 500px;
  }
}

@media screen and (max-width: 750px) {
  .concept-go-can-bg-section .top-fv-swiper {
    height: 280px;
  }
}

.concept-go-can-bg-section .swiper-slide {
  height: 700px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
}

@media screen and (max-width: 900px) {
  .concept-go-can-bg-section .swiper-slide {
    height: 500px;
  }
}

@media screen and (max-width: 750px) {
  .concept-go-can-bg-section .swiper-slide {
    height: 280px;
  }
}

.concept-go-can-bg-section .swiper-slide .text-wrapper {
  color: white;
  position: absolute;
  bottom: 80px;
  left: 170px;
}

@media screen and (max-width: 1200px) {
  .concept-go-can-bg-section .swiper-slide .text-wrapper {
    left: 40px;
    bottom: 40px;
  }
}

@media screen and (max-width: 750px) {
  .concept-go-can-bg-section .swiper-slide .text-wrapper {
    left: 20px;
    width: calc(100% - 40px);
    bottom: 20px;
  }
}

.concept-go-can-bg-section .swiper-slide .text-wrapper h2 {
  font-size: 80px;
  letter-spacing: 0.03em;
  line-height: 1;
}

@media screen and (max-width: 1200px) {
  .concept-go-can-bg-section .swiper-slide .text-wrapper h2 {
    font-size: 68px;
  }
}

@media screen and (max-width: 900px) {
  .concept-go-can-bg-section .swiper-slide .text-wrapper h2 {
    font-size: 50px;
  }
}

@media screen and (max-width: 750px) {
  .concept-go-can-bg-section .swiper-slide .text-wrapper h2 {
    font-size: 32px;
  }
}

.concept-go-can-bg-section .swiper-slide .text-wrapper .text {
  text-align: right;
  font-size: 30px;
  font-style: italic;
  letter-spacing: 0.08em;
  margin-top: 25px;
  font-weight: 300;
}

@media screen and (max-width: 1200px) {
  .concept-go-can-bg-section .swiper-slide .text-wrapper .text {
    font-size: 26px;
  }
}

@media screen and (max-width: 900px) {
  .concept-go-can-bg-section .swiper-slide .text-wrapper .text {
    font-size: 22px;
    margin-top: 16px;
  }
}

@media screen and (max-width: 750px) {
  .concept-go-can-bg-section .swiper-slide .text-wrapper .text {
    font-size: 20px;
  }
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  下層共通クラス終了
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  page-concept.html開始
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.page-concept-camp {
  background-color: #fff;
  padding-top: 160px;
  padding-bottom: 100px;
}

@media screen and (max-width: 1200px) {
  .page-concept-camp {
    padding-top: 100px;
    padding-bottom: 70px;
  }
}

@media screen and (max-width: 900px) {
  .page-concept-camp {
    padding-top: 60px;
  }
}

.page-concept-camp .camp-item-flex {
  display: flex;
  gap: 55px;
  padding: 0 110px;
}

@media screen and (max-width: 1600px) {
  .page-concept-camp .camp-item-flex {
    padding: 0 20px;
  }
}

@media screen and (max-width: 900px) {
  .page-concept-camp .camp-item-flex {
    flex-direction: column;
    padding: 0;
    gap: 0;
  }
}

.page-concept-camp .camp-item-flex .first-text {
  font-size: 30px;
  letter-spacing: 0.08em;
  line-height: 1;
}

@media screen and (max-width: 1200px) {
  .page-concept-camp .camp-item-flex .first-text {
    font-size: 22px;
  }
}

@media screen and (max-width: 900px) {
  .page-concept-camp .camp-item-flex .first-text {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 20px;
  }
}

.page-concept-camp .camp-item-flex h3 {
  font-size: 44px;
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: 0.04em;
  margin-top: 20px;
  margin-bottom: 24px;
}

@media screen and (max-width: 1200px) {
  .page-concept-camp .camp-item-flex h3 {
    font-size: 34px;
    margin-top: 16px;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 900px) {
  .page-concept-camp .camp-item-flex h3 {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 28px;
    margin-bottom: 16px;
  }
}

@media screen and (max-width: 750px) {
  .page-concept-camp .camp-item-flex h3 {
    font-size: 22px;
  }
}

.page-concept-camp .camp-item-flex .text {
  font-size: 18px;
  line-height: 1.8;
}

@media screen and (max-width: 1200px) {
  .page-concept-camp .camp-item-flex .text {
    font-size: 16px;
  }
}

@media screen and (max-width: 900px) {
  .page-concept-camp .camp-item-flex .text {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 15px;
  }
}

.page-concept-camp .camp-item-flex .texts1 {
  max-width: 647px;
  margin-left: 160px;
}

@media screen and (max-width: 1600px) {
  .page-concept-camp .camp-item-flex .texts1 {
    margin-left: 100px;
  }
}

@media screen and (max-width: 1200px) {
  .page-concept-camp .camp-item-flex .texts1 {
    margin-left: 30px;
  }
}

@media screen and (max-width: 900px) {
  .page-concept-camp .camp-item-flex .texts1 {
    max-width: initial;
    margin-left: 0;
  }
}

.page-concept-camp .camp-item-flex .img1 {
  margin-right: 110px;
  margin-top: 58px;
}

@media screen and (max-width: 900px) {
  .page-concept-camp .camp-item-flex .img1 {
    margin-right: 0;
    margin-top: 24px;
  }
}

.page-concept-camp .camp-item-flex .child-flex {
  display: flex;
  gap: 60px;
  margin-top: 90px;
}

@media screen and (max-width: 1200px) {
  .page-concept-camp .camp-item-flex .child-flex {
    margin-top: 70px;
    gap: 35px;
  }
}

@media screen and (max-width: 900px) {
  .page-concept-camp .camp-item-flex .child-flex {
    flex-direction: column;
    gap: 24px;
    margin-top: 48px;
  }
}

@media screen and (max-width: 900px) {
  .page-concept-camp .camp-item-flex .img2 {
    padding: 0 30px;
  }
}

.page-concept-camp .camp-item-flex .texts3 {
  margin-top: 80px;
}

@media screen and (max-width: 900px) {
  .page-concept-camp .camp-item-flex .texts3 {
    margin-top: 48px;
    margin-bottom: 24px;
  }
}

.page-concept-camp .camp-item-flex .camp-item-flex-left {
  width: 57.3%;
}

@media screen and (max-width: 900px) {
  .page-concept-camp .camp-item-flex .camp-item-flex-left {
    width: 100%;
  }
}

.page-concept-camp .camp-item-flex .camp-item-flex-right {
  width: calc(100% - 57.3%);
}

@media screen and (max-width: 900px) {
  .page-concept-camp .camp-item-flex .camp-item-flex-right {
    width: 100%;
  }
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  page-concept.html終了
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  page-go-can.html開始
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.go-can-bottom-fv {
  background-image: url(../images/go-can-bottom-fv.png);
}

.go-can-event {
  padding: 160px 0;
}

@media screen and (max-width: 1200px) {
  .go-can-event {
    padding: 110px 0;
  }
}

@media screen and (max-width: 900px) {
  .go-can-event {
    padding: 80px 0;
  }
}

@media screen and (max-width: 750px) {
  .go-can-event {
    padding: 60px 0;
  }
}

.go-can-event .container .section-title {
  text-align: center;
  margin-bottom: 64px;
}

@media screen and (max-width: 900px) {
  .go-can-event .container .section-title {
    margin-bottom: 32px;
  }
}

.go-can-event .container .section-title .lead {
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.08em;
  font-size: 30px;
  font-weight: 300;
  font-style: italic;
}

@media screen and (max-width: 900px) {
  .go-can-event .container .section-title .lead {
    font-size: 20px;
  }
}

.go-can-event .container .section-title h2 {
  font-size: 38px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin-top: 8px;
  font-weight: 500;
}

@media screen and (max-width: 900px) {
  .go-can-event .container .section-title h2 {
    font-size: 26px;
  }
}

@media screen and (max-width: 750px) {
  .go-can-event .container .section-title h2 {
    font-size: 18px;
  }
}

.go-can-event .container .go-can-event-item {
  margin-top: 48px;
  display: flex;
  padding: 48px;
  gap: 80px;
  background-color: #f8f6f3;
  border: 1px solid #3c3c3c;
}

@media screen and (max-width: 1200px) {
  .go-can-event .container .go-can-event-item {
    margin-top: 35px;
    padding: 48px 25px;
    gap: 40px;
  }
}

@media screen and (max-width: 900px) {
  .go-can-event .container .go-can-event-item {
    padding: 24px;
    flex-direction: column;
    gap: 24px;
  }
}

.go-can-event .container .go-can-event-item .left {
  min-width: 450px;
  width: 45%;
}

@media screen and (max-width: 1200px) {
  .go-can-event .container .go-can-event-item .left {
    min-width: 350px;
  }
}

@media screen and (max-width: 900px) {
  .go-can-event .container .go-can-event-item .left {
    min-width: initial;
    width: 100%;
  }
}

.go-can-event .container .go-can-event-item .right {
  width: 55%;
}

@media screen and (max-width: 900px) {
  .go-can-event .container .go-can-event-item .right {
    min-width: initial;
    width: 100%;
  }
}

.go-can-event .container .go-can-event-item .right .category {
  display: inline-block;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: white;
  background-color: #3c3c3c;
  padding: 2px 14px;
  border-radius: 100vh;
}

.go-can-event .container .go-can-event-item .right h3 {
  padding-top: 8px;
  padding-bottom: 24px;
  font-size: 32px;
  font-weight: 500;
  border-bottom: 1px solid #cbcbcb;
}

@media screen and (max-width: 1200px) {
  .go-can-event .container .go-can-event-item .right h3 {
    font-size: 28px;
    padding-bottom: 20px;
  }
}

@media screen and (max-width: 900px) {
  .go-can-event .container .go-can-event-item .right h3 {
    padding-bottom: 16px;
    font-size: 24px;
    letter-spacing: 0.03em;
  }
}

@media screen and (max-width: 750px) {
  .go-can-event .container .go-can-event-item .right h3 {
    font-size: 18px;
  }
}

.go-can-event .container .go-can-event-item .right .text {
  font-size: 18px;
  line-height: 1.8;
  margin-top: 24px;
}

@media screen and (max-width: 1200px) {
  .go-can-event .container .go-can-event-item .right .text {
    font-size: 16px;
  }
}

@media screen and (max-width: 900px) {
  .go-can-event .container .go-can-event-item .right .text {
    margin-top: 16px;
    font-size: 14px;
    letter-spacing: 0.03em;
  }
}

.go-can-event .container .go-can-event-item .right .btn-wrapper {
  max-width: 160px;
  margin-left: auto;
  margin-top: 32px;
}

@media screen and (max-width: 900px) {
  .go-can-event .container .go-can-event-item .right .btn-wrapper {
    margin-top: 24px;
  }
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  page-go-can.html終了
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  page-feature.html開始
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.feature-bottom-fv h2 {
  font-size: 100px;
  font-style: italic;
  letter-spacing: 0.08em;
  color: white;
  font-weight: 300;
  position: absolute;
  bottom: 40px;
  left: 80px;
}

@media screen and (max-width: 1600px) {
  .feature-bottom-fv h2 {
    font-size: 80px;
    left: 40px;
    bottom: 20px;
  }
}

@media screen and (max-width: 1200px) {
  .feature-bottom-fv h2 {
    font-size: 60px;
    left: 40px;
    bottom: 20px;
  }
}

@media screen and (max-width: 900px) {
  .feature-bottom-fv h2 {
    font-size: 40px;
    left: 20px;
  }
}

@media screen and (max-width: 500px) {
  .feature-bottom-fv h2 {
    font-size: 40px;
  }
}

.page-feature-section {
  background-color: #f8f6f3;
  padding: 120px 0;
}

@media screen and (max-width: 900px) {
  .page-feature-section {
    padding: 90px 0;
  }
}

@media screen and (max-width: 750px) {
  .page-feature-section {
    padding: 60px 0;
  }
}

.page-feature-section .container {
  max-width: 1116px;
}

.page-feature-section .container .section-title {
  text-align: center;
  margin-bottom: 64px;
}

.page-feature-section .container .section-title .lead {
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.08em;
  font-size: 30px;
  font-weight: 300;
  font-style: italic;
}

@media screen and (max-width: 900px) {
  .page-feature-section .container .section-title .lead {
    font-size: 20px;
  }
}

.page-feature-section .container .section-title h2 {
  font-size: 38px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin-top: 8px;
  font-weight: 500;
}

@media screen and (max-width: 900px) {
  .page-feature-section .container .section-title h2 {
    font-size: 26px;
  }
}

@media screen and (max-width: 750px) {
  .page-feature-section .container .section-title h2 {
    font-size: 18px;
  }
}

.page-feature-section .container .link-item-wrapper {
  display: grid;
  /* 2026-09-02「場内設備」を追加して5件になったため4→5列 */
  grid-template-columns: repeat(5, 1fr);
  gap: 12px 16px;
}

@media screen and (max-width: 900px) {
  .page-feature-section .container .link-item-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 2列だと「オートキャンプ」等が収まらず横にはみ出すため1列にする */
@media screen and (max-width: 600px) {
  .page-feature-section .container .link-item-wrapper {
    grid-template-columns: 1fr;
  }
}

.page-feature-content-section {
  padding: 120px 0 168px;
}

@media screen and (max-width: 900px) {
  .page-feature-content-section {
    padding: 90px 0;
  }
}

@media screen and (max-width: 750px) {
  .page-feature-content-section {
    padding: 60px 0;
  }
}

@media screen and (max-width: 900px) {
  .page-feature-content-section#feature-section4 {
    padding-bottom: 0;
  }
}

.page-feature-content-section h2 {
  font-size: 100px;
  font-style: italic;
  letter-spacing: 0.08em;
  font-weight: 300;
  padding-left: 100px;
}

@media screen and (max-width: 1600px) {
  .page-feature-content-section h2 {
    font-size: 90px;
    padding-left: 40px;
  }
}

@media screen and (max-width: 1200px) {
  .page-feature-content-section h2 {
    font-size: 75px;
  }
}

@media screen and (max-width: 900px) {
  .page-feature-content-section h2 {
    font-size: 55px;
  }
}

@media screen and (max-width: 750px) {
  .page-feature-content-section h2 {
    font-size: 40px;
  }
}

.page-feature-content-section .swiper-container {
  position: relative;
  z-index: 10;
  padding-bottom: 60px;
  /* 次への矢印 */
  /* ページネーション */
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .swiper-container {
    padding-bottom: 40px;
  }
}

.page-feature-content-section .swiper-container .swiper-button-prev {
  width: 12px;
  top: initial;
  bottom: -12px;
  left: 45%;
}

@media screen and (max-width: 1600px) {
  .page-feature-content-section .swiper-container .swiper-button-prev {
    left: 42%;
  }
}

@media screen and (max-width: 1200px) {
  .page-feature-content-section .swiper-container .swiper-button-prev {
    left: 40%;
  }
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .swiper-container .swiper-button-prev {
    left: 36%;
  }
}

@media screen and (max-width: 500px) {
  .page-feature-content-section .swiper-container .swiper-button-prev {
    left: 32%;
  }
}

.page-feature-content-section .swiper-container .swiper-button-next {
  width: 12px;
  top: initial;
  bottom: -12px;
  right: 45%;
}

@media screen and (max-width: 1600px) {
  .page-feature-content-section .swiper-container .swiper-button-next {
    right: 42%;
  }
}

@media screen and (max-width: 1200px) {
  .page-feature-content-section .swiper-container .swiper-button-next {
    right: 40%;
  }
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .swiper-container .swiper-button-next {
    right: 36%;
  }
}

@media screen and (max-width: 500px) {
  .page-feature-content-section .swiper-container .swiper-button-next {
    right: 32%;
  }
}

.page-feature-content-section .swiper-container .swiper-button-prev::after,
.page-feature-content-section .swiper-container .swiper-button-next::after {
  color: #3c3c3c;
  font-size: 14px;
}

.page-feature-content-section .swiper-container .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 0;
}

.page-feature-content-section .swiper-container .swiper-pagination-bullet {
  background-color: #3c3c3c;
  height: 10px;
  width: 10px;
}

.page-feature-content-section .swiper-container .swiper {
  margin-top: 100px;
}

@media screen and (max-width: 1200px) {
  .page-feature-content-section .swiper-container .swiper {
    margin-top: 70px;
  }
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .swiper-container .swiper {
    margin-top: 55px;
  }
}

@media screen and (max-width: 500px) {
  .page-feature-content-section .swiper-container .swiper {
    margin-top: 30px;
  }
}

.page-feature-content-section .container {
  margin-top: 140px;
}

@media screen and (max-width: 900px) {
  .page-feature-content-section .container {
    margin-top: 100px;
  }
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container {
    margin-top: 60px;
  }
}

.page-feature-content-section .container .feature-content-section-flex {
  display: flex;
  gap: 120px;
}

@media screen and (max-width: 1200px) {
  .page-feature-content-section .container .feature-content-section-flex {
    gap: 40px;
  }
}

@media screen and (max-width: 900px) {
  .page-feature-content-section .container .feature-content-section-flex {
    flex-direction: column;
    gap: 48px;
  }
}

.page-feature-content-section .container .feature-content-item {
  width: 100%;
}

.page-feature-content-section .container .feature-content-item.bg-white {
  background-color: #fff;
  padding: 40px;
  border-radius: 20px;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .feature-content-item.bg-white {
    padding: 24px 16px;
    border-radius: 10px;
  }
}

.page-feature-content-section .container .feature-content-item .first-h3 {
  background-color: #3c3c3c;
  color: white;
  text-align: center;
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: 0.03em;
  font-size: 32px;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .feature-content-item .first-h3 {
    font-size: 22px;
    padding: 8px 0;
  }
}

.page-feature-content-section .container .feature-content-item .h3-bottom-text {
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-top: 24px;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .feature-content-item .h3-bottom-text {
    font-size: 20px;
    margin-top: 16px;
  }
}

.page-feature-content-section .container .feature-content-item .h3-bottom-text span {
  font-size: 0.8em;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .feature-content-item .h3-bottom-text span {
    font-size: 0.9em;
  }
}

.page-feature-content-section .container .feature-content-item h4 {
  font-size: 20px;
  font-weight: bold;
  line-height: 2.2;
  letter-spacing: 0.03em;
  padding-bottom: 10px;
  border-bottom: 1px solid #3c3c3c;
  text-align: center;
  margin-top: 50px;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .feature-content-item h4 {
    font-size: 16px;
    margin-top: 32px;
  }
}

.page-feature-content-section .container .feature-content-item h4 img {
  width: 18px;
  margin-right: 10px;
  vertical-align: baseline;
}

.page-feature-content-section .container .feature-content-item ul {
  margin-top: 16px;
}

.page-feature-content-section .container .feature-content-item ul li {
  list-style-type: disc;
  list-style-position: inside;
  line-height: 1.6;
  font-size: 20px;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .feature-content-item ul li {
    font-size: 14px;
    line-height: 1.8;
  }
}

.page-feature-content-section .container .feature-content-item .price-flex {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 18px;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .feature-content-item .price-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
}

.page-feature-content-section .container .feature-content-item .price-flex .left {
  min-width: 124px;
  width: 124px;
  background-color: #3c3c3c;
  color: white;
  text-align: center;
  padding: 2px;
  font-size: 18px;
  line-height: 1.5;
}

.page-feature-content-section .container .feature-content-item .price-flex .right {
  transform: translateY(-3px);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.03em;
  width: 100%;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .feature-content-item .price-flex .right {
    font-size: 20px;
  }
}

.page-feature-content-section .container .feature-content-item .price-flex .right .font-sm {
  font-size: 0.75em;
}

.page-feature-content-section .container .feature-content-item .price-flex .right .right-text {
  width: 100%;
}

.page-feature-content-section .container .feature-content-item .price-flex .right .right-text .left-span {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.03em;
  display: inline-block;
  min-width: 265px;
  width: 265px;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .feature-content-item .price-flex .right .right-text .left-span {
    min-width: initial;
    width: initial;
    display: block;
    font-size: 18px;
    line-height: 1.36;
  }
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .feature-content-item .price-flex .right .right-text .right-span {
    display: block;
    font-size: 24px;
    margin-top: 8px;
    margin-bottom: 16px;
  }
}

.page-feature-content-section .container .feature-content-item .price-flex .right .caution-text {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  margin-top: 6px;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .feature-content-item .price-flex .right .caution-text {
    margin-top: 16px;
  }
}

.page-feature-content-section .container .feature-content-item .flex-wrapper {
  display: flex;
  gap: 40px;
}

@media screen and (max-width: 900px) {
  .page-feature-content-section .container .feature-content-item .flex-wrapper {
    flex-direction: column;
    gap: 0;
  }
}

.page-feature-content-section .container .feature-content-item .flex-wrapper div {
  width: 100%;
}

.page-feature-content-section .container .btn-wrapper {
  max-width: 348px;
  margin: auto;
}

.page-feature-content-section .container .btn-wrapper.mt-88 {
  margin-top: 88px;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .btn-wrapper.mt-88 {
    margin-top: 40px;
  }
}

.page-feature-content-section .container .btn-wrapper.mt-48 {
  margin-top: 48px;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .btn-wrapper.mt-48 {
    margin-top: 40px;
  }
}

.page-feature-content-section .container .btn-wrapper.mt-40 {
  margin-top: 40px;
}

.page-feature-content-section .container .rental-h3 {
  margin-top: 128px;
  text-align: center;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.03em;
  position: relative;
}

@media screen and (max-width: 900px) {
  .page-feature-content-section .container .rental-h3 {
    margin-top: 60px;
  }
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .rental-h3 {
    font-size: 22px;
  }
}

.page-feature-content-section .container .rental-h3::before {
  content: "";
  width: calc(50% - 200px);
  height: 1px;
  background-color: #3c3c3c;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .rental-h3::before {
    width: 32px;
  }
}

.page-feature-content-section .container .rental-h3::after {
  content: "";
  width: calc(50% - 200px);
  height: 1px;
  background-color: #3c3c3c;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .rental-h3::after {
    width: 32px;
  }
}

.page-feature-content-section .container .rental-item-wrapper {
  display: flex;
  gap: 56px;
  margin-top: 64px;
}

@media screen and (max-width: 900px) {
  .page-feature-content-section .container .rental-item-wrapper {
    flex-direction: column;
    gap: 40px;
    margin-top: 32px;
  }
}

.page-feature-content-section .container .rental-item-wrapper .rental-item {
  text-align: center;
}

.page-feature-content-section .container .rental-item-wrapper .rental-item h4 {
  font-size: 24px;
  letter-spacing: 0.03em;
  line-height: 1.6;
  margin-top: 16px;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .rental-item-wrapper .rental-item h4 {
    font-size: 18px;
  }
}

.page-feature-content-section .container .rental-item-wrapper .rental-item .rental-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.03em;
  margin-top: 3px;
}

@media screen and (max-width: 750px) {
  .page-feature-content-section .container .rental-item-wrapper .rental-item .rental-text {
    font-size: 14px;
  }
}

.page-feature-content-section .bottom-img {
  padding: 0 50px;
  margin-top: 108px;
}

@media screen and (max-width: 900px) {
  .page-feature-content-section .bottom-img {
    padding: 60px 0;
    margin-top: 60px;
    background-color: #e9e6dd;
  }
}

.page-feature-rental-section {
  background-color: #3c3c3c;
  padding-bottom: 120px;
}

@media screen and (max-width: 900px) {
  .page-feature-rental-section {
    padding-bottom: 100px;
  }
}

@media screen and (max-width: 750px) {
  .page-feature-rental-section {
    padding-bottom: 60px;
  }
}

.page-feature-rental-section .container h2 {
  font-size: 100px;
  letter-spacing: 0.08em;
  color: white;
  padding-top: 120px;
  margin-bottom: 64px;
  font-weight: 300;
  font-style: italic;
}

@media screen and (max-width: 1600px) {
  .page-feature-rental-section .container h2 {
    font-size: 85px;
  }
}

@media screen and (max-width: 1200px) {
  .page-feature-rental-section .container h2 {
    font-size: 70px;
  }
}

@media screen and (max-width: 900px) {
  .page-feature-rental-section .container h2 {
    font-size: 55px;
    padding-top: 100px;
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 750px) {
  .page-feature-rental-section .container h2 {
    font-size: 40px;
    padding-top: 60px;
    margin-bottom: 32px;
  }
}

.page-feature-rental-section .container .rental-item-wrapper {
  display: flex;
  gap: 56px;
}

@media screen and (max-width: 900px) {
  .page-feature-rental-section .container .rental-item-wrapper {
    flex-direction: column;
    gap: 40px;
  }
}

.page-feature-rental-section .container .rental-item-wrapper .rental-item {
  text-align: center;
  color: white;
}

.page-feature-rental-section .container .rental-item-wrapper .rental-item h3 {
  font-size: 24px;
  letter-spacing: 0.03em;
  line-height: 1.6;
  margin-top: 16px;
}

@media screen and (max-width: 750px) {
  .page-feature-rental-section .container .rental-item-wrapper .rental-item h3 {
    font-size: 18px;
  }
}

.page-feature-rental-section .container .rental-item-wrapper .rental-item .rental-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.03em;
  margin-top: 3px;
}

@media screen and (max-width: 750px) {
  .page-feature-rental-section .container .rental-item-wrapper .rental-item .rental-text {
    font-size: 14px;
  }
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  page-feature.html終了
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  page-archive.html開始
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.archive-bottom-fv {
  background-image: url(../images/archive-bottom-fv-bg.png);
}

.page-topics-section {
  padding: 160px 0;
}

@media screen and (max-width: 1200px) {
  .page-topics-section {
    padding: 110px 0;
  }
}

@media screen and (max-width: 900px) {
  .page-topics-section {
    padding: 90px 0;
  }
}

@media screen and (max-width: 750px) {
  .page-topics-section {
    padding: 60px 0;
  }
}

.page-topics-section .container {
  max-width: 1320px;
}

.page-topics-section .container .topics-category-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}

@media screen and (max-width: 750px) {
  .page-topics-section .container .topics-category-wrapper {
    margin-bottom: 40px;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
  }
}

.page-topics-section .container .topics-category-wrapper .topics-category {
  cursor: pointer;
  width: 100%;
  padding: 16px 0;
  text-align: center;
  color: white;
  font-size: 20px;
  font-weight: 400;
  transition: opacity 0.3s;
}

.page-topics-section .container .topics-category-wrapper .topics-category:hover {
  opacity: 0.8;
}

.page-topics-section .container .topics-category-wrapper .topics-category#news-category {
  background-color: #cdb271;
}

.page-topics-section .container .topics-category-wrapper .topics-category#event-category {
  background-color: #3f4d82;
}

.page-topics-section .container .topics-category-wrapper .topics-category#camp-category {
  background-color: #4f815d;
}

.page-topics-section .container .topics-category-wrapper .topics-category#activity-category {
  background-color: #3c3c3c;
}

.page-topics-section .container .topics-item-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 40px;
}

@media screen and (max-width: 900px) {
  .page-topics-section .container .topics-item-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 750px) {
  .page-topics-section .container .topics-item-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.page-topics-section .container .topics-item-wrapper .topics-item {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.page-topics-section .container .topics-item-wrapper .topics-item .left {
  width: 100%;
}

.page-topics-section .container .topics-item-wrapper .topics-item .left .img {
  overflow: hidden;
}

.page-topics-section .container .topics-item-wrapper .topics-item .left .img img {
  object-fit: cover;
  /* aspect-ratio: 1/1; */
  transition: all 0.3s;
}

.page-topics-section .container .topics-item-wrapper .topics-item .left .topics-item-date {
  margin-top: 16px;
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.page-topics-section .container .topics-item-wrapper .topics-item .left h2 {
  font-size: 18px;
  line-height: 1.4;
  font-size: 18px;
  font-weight: 500;
}

.page-topics-section .container .topics-item-wrapper .topics-item .right-category {
  writing-mode: vertical-rl;
  padding: 16px 8px;
  color: white;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.03em;
}

.page-topics-section .container .topics-item-wrapper .topics-item .right-category.right-category-news {
  background-color: #cdb271;
}

.page-topics-section .container .topics-item-wrapper .topics-item .right-category.right-category-event {
  background-color: #3f4d82;
}

.page-topics-section .container .topics-item-wrapper .topics-item .right-category.right-category-camp {
  background-color: #4f815d;
}

.page-topics-section .container .topics-item-wrapper .topics-item .right-category.right-category-activity {
  background-color: #3c3c3c;
}

.page-topics-section .container .more-btn {
  max-width: 350px;
  margin: auto;
  margin-top: 64px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.page-topics-section .container .more-btn:hover {
  opacity: 0.8;
}

#all-item-wrapper {
  display: none;
}

#all-item-wrapper.on {
  display: block;
}

#all-item-wrapper .topics-item-wrapper a:nth-of-type(n + 10) {
  display: none;
}

#all-item-wrapper .topics-item-wrapper a:hover .img img {
  transform: scale(1.1);
}

#all-item-wrapper .topics-item-wrapper a.on {
  display: block;
}

#news-item-wrapper {
  display: none;
}

#news-item-wrapper.on {
  display: block;
}

#news-item-wrapper .topics-item-wrapper a:nth-of-type(n + 10) {
  display: none;
}

#news-item-wrapper .topics-item-wrapper a:hover .img img {
  transform: scale(1.1);
}

#news-item-wrapper .topics-item-wrapper a.on {
  display: block;
}

#event-item-wrapper {
  display: none;
}

#event-item-wrapper.on {
  display: block;
}

#event-item-wrapper .topics-item-wrapper a:nth-of-type(n + 10) {
  display: none;
}

#event-item-wrapper .topics-item-wrapper a:hover .img img {
  transform: scale(1.1);
}

#event-item-wrapper .topics-item-wrapper a.on {
  display: block;
}

#camp-item-wrapper {
  display: none;
}

#camp-item-wrapper.on {
  display: block;
}

#camp-item-wrapper .topics-item-wrapper a:nth-of-type(n + 10) {
  display: none;
}

#camp-item-wrapper .topics-item-wrapper a:hover .img img {
  transform: scale(1.1);
}

#camp-item-wrapper .topics-item-wrapper a.on {
  display: block;
}

#activity-item-wrapper {
  display: none;
}

#activity-item-wrapper.on {
  display: block;
}

#activity-item-wrapper .topics-item-wrapper a:nth-of-type(n + 10) {
  display: none;
}

#activity-item-wrapper .topics-item-wrapper a:hover .img img {
  transform: scale(1.1);
}

#activity-item-wrapper .topics-item-wrapper a.on {
  display: block;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  page-archive.html終了
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  page-contact.html開始
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.contact-bottom-fv {
  background-image: url(../images/contact-bottom-fv-bg.png);
}

.bottom-contact {
  padding: 160px 20px;
}

@media screen and (max-width: 1200px) {
  .bottom-contact {
    padding: 110px 20px;
  }
}

@media screen and (max-width: 900px) {
  .bottom-contact {
    padding: 90px 20px;
  }
}

@media screen and (max-width: 750px) {
  .bottom-contact {
    padding: 60px 20px;
  }
}

.bottom-contact .container {
  max-width: 1320px;
  background-color: #f8f6f3;
  padding: 80px;
  border: 1px solid #3c3c3c;
}

@media screen and (max-width: 1200px) {
  .bottom-contact .container {
    padding: 60px;
  }
}

@media screen and (max-width: 900px) {
  .bottom-contact .container {
    padding: 40px;
  }
}

@media screen and (max-width: 750px) {
  .bottom-contact .container {
    padding: 32px 16px;
  }
}

.bottom-contact .container label {
  cursor: pointer;
}

.bottom-contact .container .bottom-contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .bottom-contact-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

.bottom-contact .container .bottom-contact-item .left {
  min-width: 310px;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .bottom-contact-item .left {
    min-width: initial;
    font-size: 16px;
  }
}

.bottom-contact .container .bottom-contact-item .left span {
  font-size: 16px;
  padding: 2px 6px;
  line-height: 1.2;
  display: inline-block;
  background-color: #cdb271;
  border-radius: 3px;
  color: white;
  margin-right: 8px;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .bottom-contact-item .left span {
    font-size: 14px;
  }
}

.bottom-contact .container .bottom-contact-item .right {
  width: 100%;
}

.bottom-contact .container .bottom-contact-item .right input[type="text"],
.bottom-contact .container .bottom-contact-item .right input[type="email"],
.bottom-contact .container .bottom-contact-item .right input[type="tel"] {
  display: block;
  width: 100%;
  border: 1px solid #888888;
  padding: 18px 16px;
  font-size: 20px;
  background-color: #fff;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .bottom-contact-item .right input[type="text"],
  .bottom-contact .container .bottom-contact-item .right input[type="email"],
  .bottom-contact .container .bottom-contact-item .right input[type="tel"] {
    font-size: 14px;
    padding: 16px;
  }
}

.bottom-contact .container .bottom-contact-item .right input[type="text"]::placeholder,
.bottom-contact .container .bottom-contact-item .right input[type="email"]::placeholder,
.bottom-contact .container .bottom-contact-item .right input[type="tel"]::placeholder {
  color: #ccc;
}

.bottom-contact .container .bottom-contact-item .right input[type="radio"] {
  transform: scale(1.8);
  display: inline-block;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .bottom-contact-item .right input[type="radio"] {
    transform: scale(1.5);
  }
}

.bottom-contact .container .bottom-contact-item .right label {
  margin-left: 10px;
  margin-right: 40px;
  font-size: 20px;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .bottom-contact-item .right label {
    font-size: 16px;
    margin-left: 7px;
  }
}

.bottom-contact .container .bottom-contact-item .right textarea {
  display: block;
  width: 100%;
  border: 1px solid #888888;
  padding: 18px 16px;
  font-size: 20px;
  background-color: #fff;
  height: 240px;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .bottom-contact-item .right textarea {
    font-size: 14px;
    padding: 16px;
  }
}

.bottom-contact .container .bottom-contact-item .right textarea::placeholder {
  color: #ccc;
}

.bottom-contact .container .privacy-policy {
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 32px;
  background-color: #fff;
  border: 1px solid #888;
  height: 360px;
  overflow: scroll;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .privacy-policy {
    padding: 16px 16px;
  }
}

.bottom-contact .container .privacy-policy h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 2.2;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #888;
  padding-bottom: 8px;
  margin-bottom: 24px;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .privacy-policy h3 {
    font-size: 15px;
  }
}

.bottom-contact .container .privacy-policy .privacy-policy-text {
  line-height: 1.5;
  font-size: 16px;
  font-weight: 500;
  margin-top: 16px;
  padding-left: 16px;
  position: relative;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .privacy-policy .privacy-policy-text {
    font-size: 12px;
    margin-top: 8px;
  }
}

.bottom-contact .container .privacy-policy .privacy-policy-text span {
  position: absolute;
  left: 0px;
}

.bottom-contact .container .privacy-policy ul {
  margin-top: 8px;
}

.bottom-contact .container .privacy-policy ul li {
  margin-left: 38px;
  list-style-type: disc;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  font-weight: 500;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .privacy-policy ul li {
    font-size: 12px;
    margin-bottom: 8px;
  }
}

.bottom-contact .container .privacy-bottom-text {
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #888;
  font-weight: 500;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .privacy-bottom-text {
    font-size: 12px;
  }
}

.bottom-contact .container .check-btn-item {
  max-width: 446px;
  margin: auto;
  margin-top: 16px;
}

.bottom-contact .container .check-btn-item input {
  display: inline-block;
  width: 22px;
  height: 22px;
  transform: translateY(4px);
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .check-btn-item input {
    width: 18px;
    height: 18px;
  }
}

.bottom-contact .container .check-btn-item label {
  font-size: 20px;
  letter-spacing: 0.03em;
  font-weight: 500;
  margin-left: 10px;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .check-btn-item label {
    font-size: 15px;
    margin-left: 5px;
  }
}

@media screen and (max-width: 500px) {
  .bottom-contact .container .check-btn-item label {
    font-size: 13px;
  }
}

.bottom-contact .container .wpcf7-list-item.first {
  margin: 0 !important;
}

.bottom-contact .container .wpcf7-list-item.last {
  margin: 0 !important;
}

.bottom-contact .container .contact-btn {
  max-width: 348px;
  margin: auto;
  margin-top: 56px;
  transition: opacity 0.3s;
}

@media screen and (max-width: 900px) {
  .bottom-contact .container .contact-btn {
    margin-top: 48px;
  }
}

.bottom-contact .container .contact-btn:hover {
  opacity: 0.8;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  page-contact.html終了
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/




  .video-bg {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  .video-bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1;
  }

  .content {
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: center;
  }

  .video-bg {
    height: 755px;
  }
  .video-bg::after {
    content: " ";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45); /* ←ここがポイント */
  }

  .video-bg {
    position: relative;
    height: 65vh;
    overflow: hidden;
  }

  /* 動画の下に白いカーブを重ねる */
  .video-bg::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -180px;           /* ← 深くする */
    transform: translateX(-50%);
    width: 120%;             /* ← 横も少し広げると自然 */
    height: 320px;           /* ← 山の高さ（ここが一番重要） */
    background: #e9e6dd; /* 下のセクション背景色 */
    border-radius: 50% 50% 0 0;
    z-index: 1;
  }


.section-title {
  z-index: 1000;
}


.news_container {
  max-width: 940px;
  margin: auto;
  padding: 0 20px;
}
.news-main__inner {
  padding-top: 80px;
}
.row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.news-main__time {
  font-family: "Be Vietnam Pro", sans-serif;
}
.news-main__category {
  display: inline-block;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: white;
  background-color: #cdb271;
  padding: 2px 14px;
  border-radius: 5px;
  margin-left: 20px;
}
.news-main__category.right-category-news {
  background-color: #cdb271;
}

.page-topics-section .container .topics-item-wrapper .topics-item .right-category.right-category-event {
  background-color: #3f4d82;
}

.page-topics-section .container .topics-item-wrapper .topics-item .right-category.right-category-camp {
  background-color: #4f815d;
}

.page-topics-section .container .topics-item-wrapper .topics-item .right-category.right-category-activity {
  background-color: #3c3c3c;
}

.news-main__content {
  margin-top: 40px;
}

@media screen and (max-width: 900px) {
  .news-main__title {
    font-size: 25px;
  }
}

.top_sum img {
	height: auto!important;
}


.grecaptcha-badge {
	opacity: 0;
}

/* ---- グッズスライダー：画像の比率を固定（2026-09-01 追加）----
   ECから持ってくる商品写真は縦長なので、そのまま入れるとスライドの高さが揃わない。
   1:1に固定して中央を表示することで、今後どの比率の画像を入れてもレイアウトが崩れない。 */
.flow-swiper-section .flow-swiper .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ================================================================
   共通ボタン（2026-09-01 追加）
   従来は「ECサイトを見る」等が全部PNG画像だった。文言修正のたびに
   画像を作り直す必要があり、実際に page-feature の「すぼらキャンプ」
   のような誤記が残っていた。テキストにして修正可能にする。
   使い方: <a class="kz-btn" href="..."><span class="kz-btn__icon">…svg…</span>ラベル</a>
           濃色背景の上では .kz-btn--dark を併用
   ================================================================ */
.kz-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 22px 28px;
  border-top: 1px dashed #3c3c3c;
  border-bottom: 1px dashed #3c3c3c;
  background-color: #fff;
  color: #3c3c3c;
  font-size: 17px;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

.kz-btn__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.kz-btn__icon svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
}

.kz-btn__label {
  flex: 1;
}

/* 右端の矢印 */
.kz-btn::after {
  content: "";
  flex-shrink: 0;
  width: 34px;
  height: 8px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 8'%3E%3Cpath d='M0 4h32M28 1l4 3-4 3' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 8'%3E%3Cpath d='M0 4h32M28 1l4 3-4 3' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .25s ease;
}

.kz-btn:hover {
  background-color: #3c3c3c;
  color: #fff;
}

.kz-btn:hover::after {
  transform: translateX(6px);
}

/* 濃色背景の上に置く場合（背景は透過、文字と枠を白に） */
.kz-btn--dark {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

/* 明るい背景の上に置く、塗りつぶしのボタン
   （元のボタン画像が濃グレー地＋白文字だったものはこちら） */
.kz-btn--solid {
  background-color: #3c3c3c;
  border-color: rgba(255,255,255,.45);
  color: #fff;
}

.kz-btn--solid:hover {
  background-color: #2b2b2b;
  color: #fff;
}

.kz-btn--dark:hover {
  background-color: #fff;
  color: #3c3c3c;
}

@media screen and (max-width: 750px) {
  .kz-btn {
    padding: 18px 20px;
    font-size: 15px;
    gap: 10px;
  }
  .kz-btn__icon svg { width: 19px; height: 19px; }
  .kz-btn::after { width: 26px; }
}

/* ---- 角丸ソリッド型（予約する / アクセス / 送信する）---- */
.kz-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 40px;
  border-radius: 999px;
  background-color: #3c3c3c;
  color: #fff;
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
}

.kz-pill:hover { opacity: .78; }

/* ゴールド（予約系） */
.kz-pill--gold { background-color: #d3b96c; }

.kz-pill svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* ---- ページ内アンカー型（/feature/ のカテゴリナビ）---- */
.kz-anchor {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 24px 12px;
  border-top: 1px dashed rgba(60,60,60,.45);
  border-bottom: 1px dashed rgba(60,60,60,.45);
  color: #3c3c3c;
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .25s ease;
}

.kz-anchor:hover { background-color: rgba(60,60,60,.06); }

/* 濃色背景の上に置く場合 */
.kz-anchor--dark {
  color: #fff;
  border-top-color: rgba(255,255,255,.5);
  border-bottom-color: rgba(255,255,255,.5);
}

.kz-anchor--dark:hover { background-color: rgba(255,255,255,.08); }

.kz-anchor svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}

.kz-anchor__label {
  flex: 1;
  white-space: nowrap;
}

/* 5列に増えて幅が狭くなったため、狭い画面では文字を少し詰める */
@media screen and (max-width: 1200px) {
  .kz-anchor { font-size: 14px; padding: 20px 8px; gap: 8px; }
  .kz-anchor svg { width: 18px !important; height: 18px !important; }
  .kz-anchor::after { width: 9px; }
}

/* スマホでは折り返しを許可（nowrapのままだと列幅を超えてページがはみ出す） */
@media screen and (max-width: 900px) {
  .kz-anchor__label { white-space: normal; }
  .kz-anchor { font-size: 13.5px; padding: 16px 6px; gap: 6px; }
}

/* 下向き矢印 */
.kz-anchor::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 26'%3E%3Cpath d='M6 0v24M2 20l4 4 4-4' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 26'%3E%3Cpath d='M6 0v24M2 20l4 4 4-4' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .25s ease;
}

.kz-anchor:hover::after { transform: translateY(4px); }

@media screen and (max-width: 750px) {
  .kz-pill { padding: 16px 28px; font-size: 16px; }
  .kz-anchor { padding: 18px 20px; font-size: 15px; }
}

/* ---- 既存ボタン内のインラインSVG（画像アイコンの置き換え分）----
   .header-btn / .footer-btns .btn / .sp-btn は既にボタンとしてのスタイルを
   持っているので、中身は「テキスト＋アイコン」を横並びにするだけでよい。 */
header .header-right .header-btn,
.footer-btns .btn,
.sp-btn-wrapper .sp-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none;
}

/* フッター／SPのボタンは、元は画像自体がボタンの見た目を持っていた。
   画像を外したのでボタンとしての体裁をCSS側で作り直す。 */
.footer-btns,
.sp-btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.footer-btns .btn,
.sp-btn-wrapper .sp-btn {
  padding: 14px 28px;
  border-radius: 100vh;
  background-color: #3c3c3c;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 1;
  transition: opacity .25s ease;
}

.footer-btns .btn:hover,
.sp-btn-wrapper .sp-btn:hover { opacity: .78; }

/* 予約系（なっぷ）はゴールド */
.footer-btns .btn[href*="nap-camp"],
.sp-btn-wrapper .sp-btn[href*="nap-camp"] {
  background-color: #cdb271;
}

header .header-right .header-btn svg,
.footer-btns .btn svg,
.sp-btn-wrapper .sp-btn svg,
.kz-btn svg,
.kz-anchor svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  vertical-align: middle;
}

/* .kz-anchor のアイコンは塗りつぶし系なので個別指定 */
.kz-anchor svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px;
  fill: currentColor;
  stroke: none;
}

/* .kz-btn のアイコンサイズ */
.kz-btn__icon svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px;
}

/* ---- 施設ページ等の「予約する」ボタン ----
   .btn-wrapper 内の <a> にはクラスが無く、画像自体がボタンの見た目だった。
   画像を外したのでCSSで体裁を作る。 */
.kz-reserve {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 44px;
  border-radius: 100vh;
  background-color: #cdb271;
  color: #fff;
  font-size: 17px;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .25s ease;
}

.kz-reserve:hover { opacity: .78; }

.kz-reserve svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
}

.btn-wrapper:has(.kz-reserve) { text-align: center; }

@media screen and (max-width: 750px) {
  .kz-reserve { padding: 15px 32px; font-size: 15px; }
}

/* ---- 場内設備・サービス（2026-09-02 追加）----
   公式サイトに設備情報が一切無く、なっぷを見ないと分からない状態だったため新設。 */
.feature-amenity .amenity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
}

.feature-amenity h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  margin-bottom: 14px;
  font-size: 17px;
  letter-spacing: 0.04em;
}

.feature-amenity .amenity-col > h4:first-child { margin-top: 0; }

.feature-amenity h4 svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px;
  flex: 0 0 auto;
}

.feature-amenity ul {
  padding-left: 1.2em;
  list-style: disc;
}

.feature-amenity ul li {
  margin-bottom: 8px;
  line-height: 1.7;
  font-size: 15px;
}

.feature-amenity ul li.is-caution {
  color: #b4482f;
  font-weight: 500;
  margin-top: 14px;
}

.feature-amenity ul li.is-caution::marker { color: #b4482f; }

/* レンタル料金の行 */
.feature-amenity .amenity-price {
  border-top: 1px solid rgba(60,60,60,.18);
}

.feature-amenity .amenity-price__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(60,60,60,.18);
  font-size: 15px;
}

.feature-amenity .caution-text {
  margin-top: 12px;
  font-size: 13px;
  opacity: .8;
}

@media screen and (max-width: 900px) {
  .feature-amenity .amenity-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .feature-amenity .amenity-col > h4:first-child { margin-top: 0; }
  .feature-amenity h4 { font-size: 16px; }
  .feature-amenity ul li,
  .feature-amenity .amenity-price__row { font-size: 14px; }
}

/* ---- スクロール時にヘッダー右（MENU／予約する）を隠す（2026-09-02 追加）----
   スマホで常時追従していて閲覧の邪魔になるため、
   下方向スクロール中だけフェードで隠し、停止／上スクロールで戻す。 */
header .header-right {
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

header .header-right.is-hidden-onscroll {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
}

/* 動きを減らす設定の場合は、移動アニメーションだけ無くす。
   （表示/非表示そのものは機能として残す） */
@media (prefers-reduced-motion: reduce) {
  header .header-right {
    transition: none;
  }
  header .header-right.is-hidden-onscroll {
    transform: none;
  }
}

/* ---- サイト比較表（2026-09-02 追加）----
   4種のサイトを一件ずつ長文で読まないと違いが分からなかったため、
   ページ上部で横並びに比較できるようにする。 */
.site-compare {
  margin-top: 56px;
}

.site-compare__note {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.site-compare__note--sub {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 13px;
  opacity: .85;
}

/* 狭い画面では横スクロールさせる */
.site-compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* これが無いと min-width のテーブルが親を押し広げ、ページ全体が横スクロールする */
  max-width: 100%;
  width: 100%;
}

.site-compare { max-width: 100%; }

.site-compare__table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 15px;
  background-color: #fff;
}

.site-compare__table th,
.site-compare__table td {
  padding: 16px 14px;
  border-bottom: 1px solid rgba(60,60,60,.14);
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
}

.site-compare__table thead th {
  background-color: #3c3c3c;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-bottom: none;
  white-space: nowrap;
}

.site-compare__table thead th:first-child { text-align: left; }

.site-compare__table .th-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  opacity: .75;
  font-weight: 400;
}

/* 行見出し（サイト名） */
.site-compare__table tbody th {
  text-align: left;
  white-space: nowrap;
  font-weight: 500;
}

.site-compare__table tbody th a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.site-compare__table tbody th a:hover { opacity: .65; }

.site-compare__table .row-sub,
.site-compare__table .cell-sub {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  opacity: .7;
  font-weight: 400;
}

.site-compare__table tbody tr:nth-child(odd) { background-color: #faf9f7; }

.site-compare__table .is-ok  { color: #3f7d52; font-weight: 500; }
.site-compare__table .is-no  { color: #9a9a9a; }

.site-compare__table .is-price {
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap;
}

@media screen and (max-width: 900px) {
  .site-compare { margin-top: 36px; }
  .site-compare__table { font-size: 14px; }
  .site-compare__table th,
  .site-compare__table td { padding: 13px 11px; }
  .site-compare__table .is-price { font-size: 15px; }
  /* 横スクロールできることを示す */
  .site-compare__scroll {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
  }
}

/* ---- GO&CAN 体験一覧（2026-09-02 追加）----
   ページにキャッチコピーしか無く、何ができるか一切書かれていなかったため新設。
   「いつでも楽しめること」と「不定期の催し」を分け、
   未確定のものを提供中と誤認させないようにしている。 */
.go-can-activities {
  padding: 100px 0 40px;
}

.go-can-activities .gc-heading {
  margin: 48px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(60,60,60,.2);
  font-size: 19px;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.go-can-activities .gc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
}

.go-can-activities .gc-grid--event {
  grid-template-columns: 1fr 1fr;
}

.go-can-activities .gc-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.go-can-activities .gc-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #3c3c3c;
  color: #fff;
}

.go-can-activities .gc-icon svg {
  width: 19px !important;
  height: 19px !important;
  max-width: 19px;
}

.go-can-activities .gc-item b {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.go-can-activities .gc-item p {
  font-size: 14.5px;
  line-height: 1.75;
}

.go-can-activities .gc-note {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  opacity: .75;
}

.go-can-activities .gc-info {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid rgba(60,60,60,.2);
  font-size: 14px;
  line-height: 1.9;
}

.go-can-activities .gc-info a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.go-can-activities .gc-info a:hover { opacity: .65; }

@media screen and (max-width: 900px) {
  .go-can-activities { padding: 60px 0 20px; }
  .go-can-activities .gc-grid,
  .go-can-activities .gc-grid--event {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .go-can-activities .gc-heading { font-size: 17px; margin: 36px 0 16px; }
  .go-can-activities .gc-item p { font-size: 14px; }
}

/* ---- GOODSセクションのサブコピー（2026-09-02 追加）----
   主コピー「ここで使う。ここを、持ち歩く。」の下に置く説明文。 */
.flow-swiper-section .goods-sub {
  display: block;
  margin-top: 14px;
  font-size: .72em;
  line-height: 1.8;
  opacity: .85;
}

@media screen and (max-width: 750px) {
  .flow-swiper-section .goods-sub {
    margin-top: 10px;
    font-size: .78em;
  }
}

/* ---- ZAKI PORT の写真とロゴ（2026-09-02 追加）----
   受付・管理棟＝ZAKI PORT であることを写真で示す。
   ロゴはECサイト（zaki-port.com）と同一のものを使用。 */
.feature-amenity .zp-figure {
  margin: 0 0 26px;
}

.feature-amenity .zp-figure > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
}

.feature-amenity .zp-figure figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  opacity: .85;
}

.feature-amenity .zp-figure .zp-logo {
  width: 76px !important;
  height: auto !important;
  max-width: 76px;
  flex: 0 0 auto;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
}

@media screen and (max-width: 900px) {
  .feature-amenity .zp-figure { margin-bottom: 20px; }
  .feature-amenity .zp-figure figcaption { font-size: 12.5px; gap: 10px; }
  .feature-amenity .zp-figure .zp-logo { width: 64px !important; max-width: 64px; }
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
  404ページ（2026-09-02 追加）
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.notfound-bottom-fv h2 {
  letter-spacing: 0.12em;
}

.bottom-top-text-section .notfound-lead {
  margin-top: 24px;
  line-height: 2;
}

.notfound-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
  max-width: 900px;
  margin: 56px auto 0;
}

@media screen and (max-width: 900px) {
  .notfound-links {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 40px;
  }
}

/* 最後の1件が奇数で余るときは2カラム分使う */
.notfound-links .kz-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media screen and (max-width: 900px) {
  .notfound-links .kz-btn:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

.notfound-recent {
  max-width: 900px;
  margin: 72px auto 0;
}

.notfound-recent h3 {
  font-size: 15px;
  letter-spacing: 0.14em;
  color: #8c8778;
  margin-bottom: 18px;
}

.notfound-recent ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ddd9cd;
}

.notfound-recent li {
  border-bottom: 1px solid #ddd9cd;
}

.notfound-recent a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 4px;
  color: #3c3c3c;
  text-decoration: none;
  transition: opacity .25s ease;
}

.notfound-recent a:hover {
  opacity: 0.6;
}

.notfound-recent time {
  flex-shrink: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #8c8778;
}

.notfound-recent span {
  font-size: 16px;
  line-height: 1.6;
}

@media screen and (max-width: 600px) {
  .notfound-recent {
    margin-top: 56px;
  }
  .notfound-recent a {
    flex-direction: column;
    gap: 6px;
    padding: 16px 4px;
  }
  .notfound-recent span {
    font-size: 15px;
  }
}

/* PC版のメニューを開いたとき、ナビ1行目が右上のMENU/予約するボタンの下に隠れていた。
   モバイル(≤900px)は .header-content-wrapper に padding-top:100px があって回避済みだが、
   PC側に同等の指定が無かった。ボタンの下端(約143px)＋余白ぶんだけナビを下げる。
   下げるのはナビだけ。左のロゴ・住所ブロックは元の位置のまま。 */
@media screen and (min-width: 901px) {
  .header-content .container .footer-nav {
    padding-top: 96px;
  }
}

/* FACILITIES のセクションタイトルが中央カードに重なっていた。
   1200pxより上では扇状の静的カードになり、中央の .card1 が translateY(-55px) で
   持ち上がるため、top:40% のタイトルの上に乗り上げていた（「FREE SITE【A】」と衝突）。
   カードの扇形は意匠なので触らず、タイトル側を上に逃がす。
   40%は親要素の高さに依存して不安定なので、カードと同じくpx指定に揃える。 */
@media screen and (min-width: 1201px) {
  .top-facilities .section-title {
    top: 140px;
  }
}

/* お問い合わせの送信ボタンを画像から .kz-btn に変更（2026-09-02）。
   画像1枚に送信が依存していて、移管時のURL破損で送信不能になった事故の再発防止。
   <button> はブラウザ既定の枠・フォント・余白を持つので、<a> 用の .kz-btn に揃える。 */
.bottom-contact .container .contact-btn button.kz-btn {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  font: inherit;
  font-size: 17px;
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* reset.css の [type="submit"]{color:inherit} が .kz-btn--solid と同じ強さで後勝ちするため明示 */
  background-color: #3c3c3c;
  color: #fff;
  text-align: left; /* <button> は既定で中央揃え。他の .kz-btn（<a>）と揃える */
}
.bottom-contact .container .contact-btn button.kz-btn:hover {
  background-color: #2b2b2b;
  color: #fff;
}
.bottom-contact .container .contact-btn p {
  margin: 0;
}
/* 送信中はCF7が disabled を付ける。押せないことを見た目でも伝える */
.bottom-contact .container .contact-btn button.kz-btn:disabled {
  opacity: .5;
  cursor: wait;
}