@charset "UTF-8";
/* CSS Document */
:root {
--color-main: #172F2B;
--color-base: #FFFBF3;
--color-base-dark: #E8E4DC;
--color-link: #427A86;
}

html {
font-size: 14.5px;
}

@media (min-width: 992px) {
html {
font-size: 16px;
}
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size: 1rem;
font-weight: 300;
line-height: 1.75;
letter-spacing: 0.05em;
background-color: var(--color-base);
color: var(--color-main);
}
body.no-scroll {
overflow: hidden;
height: 100vh;
}
body > header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1056;
padding: 0.75rem;
background-color: rgba(255,251,243,.75);
backdrop-filter: blur(2rem);
-webkit-backdrop-filter: blur(2rem);
}
main > header.lower {
padding-bottom: 4rem;
;
}
main > header.lower h1 {
padding: 2rem 0 1rem 0;
;
}
h2 {
margin: 1.5rem 0;
}
h3 {
margin: 0 0 1rem 0;
}

h1,h2,h3,h4,h5,h6,dt,li {
text-transform:capitalize;
}

a, a:hover {
color: var(--color-main);
text-decoration: none;
}
a {
transition: 0.25s;
}
a:hover {
opacity: 0.75;
}
hr {
margine: 1.5rem;
border-color: var(--color-base-dark);
}


.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
--bs-gutter-x: 2rem !important;
}

@media (min-width: 1400px) {
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
max-width: 1440px !important;
}
}
#hd-logo img {
height: 1.5rem;
}
@media (min-width: 992px) {
body > header {
padding: 1.25rem;
}
#hd-logo img {
height: 2rem;
}
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
#globalNav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: transparent;
z-index: 1205;
transform: translateY(-100%);
opacity: 0;
transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
}
#globalNav.show {
transform: translateY(0);
opacity: 1;
background-color: var(--color-base);
padding: 0.75rem;
}
#globalNav.show nav > ul {
}
#globalNav.show nav ul li a {
display: block;
padding: 0.5rem 0.25rem;
border-bottom: 1px solid var(--color-base-dark);
}
#globalNav.show nav ul li ul {
margin-left: 1em;
}
#globalNav nav ul .btn-researve a {
border: none;
text-align: center;
margin-top: 3rem;
background-color: var(--color-main);
color: #fff;
padding: 0.75rem !important;
}

@media (min-width: 992px) {
#globalNav nav ul .btn-researve a {
border: none;
margin-top: 3rem;
padding: 0.75rem 1.5rem;
}
}
.lang-sp {
margin-top: 2rem;
}
.lang-sp span {
font-size: 0.75rem;
}
.lang-sp > ul {
margin-left: 0 !important;
column-gap: 1rem;
}
.lang-sp > ul li {
flex: 1;
text-align: center;
}
.lang-sp ul li a {
display: block;
font-size: 0.875rem;
padding-right: 1rem;
padding-left: 1rem;
}

@media (min-width: 992px) {
#globalNav {
position: static;
height: auto;
transform: none;
background-color: transparent;
opacity: 1 !important;
transition: none;
display: block !important;
}
#globalNav .close-btn, #openNavBtn {
display: none !important;
}
}
body > footer {
background-color: var(--color-base-dark);
padding-top: 2rem;
padding-bottom: 2rem;
}
main {
padding-bottom: 8rem;
}
button {
all: unset;
display: inline-block;
line-height: 1;
cursor: pointer;
}
a.a-01 {
display: inline-flex;
line-height: 1;
padding: 0.75rem 0;
color: var(--color-link);
border-bottom: 1px solid var(--color-link);
margin: 0 0 1.5rem 0;
align-items: center;
}
.material-symbols-outlined {
font-size: 1.75rem;
}
.bc {
margin-top: 3.25rem;
}
.bc .breadcrumb {
margin: 0;
font-size: 0.875rem;
height: 2rem;
}
@media (min-width: 992px) {
.bc {
margin-top: 4.5rem;
}
}
#cta-researve {
position: sticky;
bottom: 0;
width: 100%;
background-color: var(--color-base);
padding: 0.75rem;
z-index: 1050; /* globalNavより下に */
transform: translateY(1rem);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* 表示時（下からフェードイン） */
#cta-researve.visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
#cta-researve a {
display: block;
text-align: center;
padding: 0.75rem;
color: #fff;
background-color: var(--color-main);
}

/* PCでは非表示 */
@media (min-width: 992px) {
#cta-researve {
display: none !important;
}
}
.lang a {
display: flex;
align-items: center;
font-size: 0.875rem;
}
.lang a .material-symbols-outlined {
font-size: 1.5rem !important;
}
footer address p:first-of-type {
font-size: 1.25rem;
}
footer address p {
margin: 0;
}
footer ul {
display: flex;
flex-wrap: wrap;
}
footer ul li {
min-width: 50%;
}

@media (min-width: 992px) {
footer ul li {
min-width: 25%;
}
}
.share {
display: flex;
justify-content: flex-end;
column-gap: 0.75rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.share a img {
height: 1.75rem;
opacity: 0.5;
}
.copyright {
text-align: center;
margin-top: 1rem;
padding: 1rem 0;
opacity: 0.75;
font-size: 0.75;
border-top: 1px solid var(--color-main);
}
article > section {
padding: 6rem 0 4rem 0;
margin-top: -4rem;
}
.intro {
width: 100%;
overflow: hidden;
display: block;
}
.intro p {
margin: 2rem 0;
}
/* 比率維持用の img ラッパー（使うなら） */
.intro img {
width: 100%;
height: auto; /* ここが重要！ */
aspect-ratio: 3 / 4; /* デフォルト：スマホ 3:4 */
object-fit: cover;
display: block;
}

@media (min-width: 992px) {
.intro img {
aspect-ratio: 16 / 9; /* PCでは4:3に変更 */
}
}
.article-content {
padding: 2rem 0;
}

@media (min-width: 992px) {
.article-content {
padding: 2rem 4rem;
}
}
.article-content ol {
padding: 0;
}
.article-content ol li {
list-style: decimal;
list-style-position: inside;
}
.article-content ol li a {
display: block;
padding: 0.5rem;
color: var(--color-link);
border-bottom: 1px dotted var(--color-base-dark);
}
.article-info {
display: flex;
justify-content: end;
gap: 0.75rem;
font-size: 0.875rem;
}
.article-related {
padding-top: 2rem;
}
.article-related a {
color: var(--color-link);
}
.article-related .article-tags {
border-top: 1px solid var(--color-base-dark);
}
.article-related .article-tags ul {
padding-top: 1rem;
display: flex;
gap: 0.75rem;
}
.article-related .article-nav {
padding-top: 2rem;
}
.article-related .article-nav a {
display: flex;
align-items: center;
}
.article-related .article-nav .material-symbols-outlined {
line-height: 1;
}
.swiper-fade {
  position: relative;
  overflow: hidden;
}

#home .swiper-fade {
height: 88vh;
}

.swiper-fade .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-fade .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 8s ease;
}

.swiper-fade .swiper-slide.swiper-slide-active img {
  transform: scale(1.1);
}

/* ★ オーバーレイテキスト */
.swiper-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: brightness(0.75);
  padding: 2rem;
  box-sizing: border-box;
}

.swiper-overlay h1 img {
  width: 16rem;
  margin-bottom: 1rem;
}

.swiper-overlay p {
  font-size: 1.25rem;
  line-height: 1.75;
}

.swiper-right {
  padding-bottom: 2rem;
}

/* デフォルト（モバイル）：1:1にする */
.swiper-right .swiper-slide {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0.5rem;
}

.swiper-right .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 992px以上（PC）：4:3にする */
@media (min-width: 992px) {
  .swiper-right .swiper-slide {
    aspect-ratio: 4 / 3;
  }
}
/* ナビゲーション矢印（細い線） */
.swiper-button-prev,
.swiper-button-next {
  color: var(--color-main);
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  opacity: 0.9;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 1.25rem;
  font-weight: 100;
}

/* ページネーション：横線で表示 */
.swiper-pagination {
    text-align: left;
}
.swiper-pagination-bullet {
  position: relative;
  width: 2rem;
  height: 2px;
  background: var(--color-main);
  border-radius: 0;
  opacity: 0.25;
  transition: opacity 0.3s;
  cursor: pointer;
  z-index: 1; /* タッチ優先 */
}

/* クリック領域を透明な::beforeで拡大 */
.swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  bottom: -0.75rem;
  left: -0.5rem;
  right: -0.5rem;
  background: transparent;
}

.swiper-pagination-bullet-active {
  opacity: 0.75;
}
.swiper-full-auto {
  padding: 1rem 0;
}

.swiper-full-auto .swiper-slide {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.5rem;
}

.swiper-full-auto .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.swiper-full-auto .swiper-wrapper{
    transition-timing-function: linear;
}

/* 共通スタイル */
.fade-in,
.fade-up,
.fade-down,
.fade-left,
.fade-right {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

/* 方向別 初期状態 */
.fade-up    { transform: translateY(2rem); }
.fade-down  { transform: translateY(-2rem); }
.fade-left  { transform: translateX(-2rem); }
.fade-right { transform: translateX(2rem); }

/* 表示時 */
.fade-in.visible,
.fade-up.visible,
.fade-down.visible,
.fade-left.visible,
.fade-right.visible {
  opacity: 1;
  transform: none;
}

ul.amenity-list{
border-bottom: 1px dotted var(--color-base-dark);
margin: 2rem 0;
}

.amenity-list li{
padding: 1rem 0;
border-top: 1px dotted var(--color-base-dark);
}

.access ol li{
list-style: decimal;
}

.faq h2 {
font-size: 1.25rem;
margin-top: 0;
padding-right: 2rem;
}

.faq h3.accordion-header {
font-weight: 400;
}

.faq .accordion-item {
background-color: transparent;
border: 0;
padding-bottom: 1rem;
}

.faq .accordion-button {
padding: 0 0 1rem 0;
background-color: transparent;
border: 0;
}

.faq .accordion-button:not(.collapsed) {
box-shadow: none;
}

.faq .accordion-body {
padding: 0 1.5rem 1.5rem 1.5rem;
}

.location-spot {
padding: 1rem 1rem 0 1rem;
border-left: 1px solid var(--color-base-dark);
}

.location-spot h4{
font-size: 1rem;
font-weight: bold;
}

.location-spot .address{
font-size: 0.875rem;
opacity: 0.75;
margin-bottom: 0.25rem;
line-height: 1;
}


.article-list li {
margin-bottom: 2rem;
}

.article-list li:hover {
opacity: 0.75;
}

.article-list li dl{
padding: 2rem;;
margin: 0;
}

.article-list li dt{
font-size: 1.5rem;
}

.article-list li dd aside{
margin-top: 1rem;
}

.article-list li img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 0.5rem;
}


@media (min-width: 992px) {
.article-list li .list-cnt {
display: flex;
align-items: center;
}

.article-list li img {
min-height: 15rem;
min-width: 20rem;
max-height: 15rem;
max-width: 20rem;
}

.article-list li dl{
padding: 0 0 0 2rem;;
}
}

.article-list-nav{
padding-top: 2rem;
}

.article-list-nav > a, .article-list-nav > span{
display: flex;
align-items: center;
padding: 1rem;
line-height: 1;
color: var(--color-link);
}

.article-list-nav > .current{
background-color: var(--color-base-dark);
}

.contact-box h2{
font-size: 1.75rem;
}

.contact-box h2 span{
display: block;
font-size: 1.25rem;
}

.contact-box img{
width: 100%;
margin-bottom: 1rem;
}

.contact-box p{
font-size: 1.25rem;
}

.contact-box .cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-top: 2rem;
}

.contact-box a {
padding: 1em 2em;
line-height: 1;
background-color: var(--color-main);
display: block;
width: 75%;;
border-radius: 4rem;
color: #fff;
}