*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --white: #ffffff;
  --bg: #fafafa;
  --text: #2c2c2c;
  --text-light: #666;
  --border: #e0e0e0;
  --yellow: #d4c832;
  --pink: #e8a0a0;
  --font: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
}
h1, h2 {font-weight: 500;}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.9; letter-spacing: .04em; background: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.site-header { position: fixed; z-index: 50; top: 42px; left: 56px; right: 56px; display: flex; justify-content: space-between; align-items: center; color: #fff; }
.site-header--dark { color: #111; }
.site-header__logo { font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.site-header__menu { width: 38px; height: 22px; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
.site-header__menu span { display: block; height: 1px; margin-left: auto; background: currentColor; }
.site-header__menu span:first-child { width: 38px; }
.site-header__menu span:last-child { width: 24px; margin-top: 12px; }

.global-menu { position: fixed; z-index: 100; inset: 0 0 0 auto; width: 360px; padding: 128px 0 0 78px; color: #fff; background: rgba(23,71,76,.92); transform: translateX(100%); transition: transform .35s ease; }
.global-menu.is-open { transform: translateX(0); }
.global-menu__close { position: absolute; top: 46px; right: 58px; width: 56px; height: 56px; border: 0; background: transparent; cursor: pointer; }
.global-menu__close::before, .global-menu__close::after { content: ""; position: absolute; top: 27px; left: 0; width: 70px; height: 1px; background: #fff; }
.global-menu__close::before { transform: rotate(45deg); }
.global-menu__close::after { transform: rotate(-45deg); }
.global-menu__list { list-style: none; padding: 0; margin: 0; }
.global-menu__list a { display: block; margin-bottom: 28px; font-size: 28px; font-weight: 700; }
    
.breadcrumb { width: min(1360px, calc(100% - 160px)); margin: 22px auto 96px; font-size: 10px; color: #6b7fc6; }
.breadcrumb a::after { content: "/"; margin: 0 12px; color: #aaa; }
    
/* KV */
.kv {
  width: 100%;
  background: var(--bg);
  padding: 40px 20px;
  text-align: center;
}

.kv__label {
  font-size: 12px;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  color: var(--text-light);
}

.kv__img {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 700 / 400;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 13px;
  border-radius: 4px;
}

.kv__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

/* INTRO */
.intro {
  max-width: 680px;
  margin: 60px auto;
  padding: 0 24px;
  text-align: center;
}

.intro__logo {
  margin: 0 auto 32px;
  width: 200px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 12px;
  border-radius: 4px;
}

.intro__logo img { width: 100%; }

.intro__text {
  font-size: 14px;
  line-height: 2.4;
  color: var(--text);
}

/* OVERVIEW */
.overview {
  max-width: 800px;
  margin: 0 auto 60px;
  padding: 0 24px;
}

.section-title {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-align: center;
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.overview__table {
  width: 100%;
  border-collapse: collapse;
}

.overview__table tr {
  border-bottom: 1px solid var(--border);
}

.overview__table th {
  width: 120px;
  padding: 20px 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-light);
  vertical-align: top;
  white-space: nowrap;
}

.overview__table td {
  padding: 20px 0;
  font-size: 13px;
  line-height: 2;
}

/* HARMONIA */
.harmonia {
  max-width: 800px;
  margin: 0 auto 120px;
  padding: 0 24px;
}

.harmonia__logo {
  text-align: center;
  margin-bottom: 40px;
}

.harmonia__logo-img {
  width: 360px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 12px;
  border-radius: 4px;
}

.harmonia__logo-img img { width: 100%; }

.access {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

.access__text { font-size: 12px; line-height: 2; color: var(--text); }
.access__text p { margin-bottom: 16px; }
.access__text strong { font-weight: 500; display: block; margin-bottom: 4px; }

.access__map {
  border-radius: 4px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 12px;
  overflow: hidden;
}

.access__map img { width: 100%; height: 100%; object-fit: cover; }

.entrance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

.entrance__text { font-size: 12px; line-height: 2; }
.entrance__text h3 { font-size: 13px; font-weight: 500; margin-bottom: 12px; }

.entrance__img {
  border-radius: 4px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 12px;
  overflow: hidden;
}

.entrance__img img { width: 100%; height: 100%; object-fit: cover; }

/* GOODS */
.goods {
  max-width: 800px;
  margin: 0 auto 60px;
  padding: 0 24px;
}

.goods__text {
  font-size: 16px;
  line-height: 2.2;
  text-align: center;
  margin-bottom: 40px;
  color: var(--text);
}

.goods__note {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 8px;
}

/* GALLERY */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 60px;
}

.gallery__item {
  aspect-ratio: 1;
  background: #e8e8e8;
  overflow: hidden;
}

.gallery__item img { width: 100%; height: 100%; object-fit: cover; }

.gallery__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 12px;
}

/* CAFE */
.cafe {
  max-width: 1000px;
  margin: 0 auto 80px;
  padding: 0 24px;
  text-align: center;
}

.cafe__logo {
  margin: 0 auto 60px;
  width: 360px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 4px;
}

.cafe__logo img { width: 100%; }

.cafe__text {
  font-size: 16px;
  line-height: 2.2;
  margin-bottom: 32px;
}

.cafe__img {
  max-width: 500px;
  margin: 0 auto 32px;
  background: #e8e8e8;
  aspect-ratio: 16/9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 12px;
  overflow: hidden;
}

.cafe__img img { width: 100%; height: 100%; object-fit: cover; }

.cafe__info {
  font-size: 12px;
  line-height: 2.4;
  color: var(--text);
}

@media (max-width: 767px) {
    .character-hero__inner {
        width: 100%;
        height: 400px;
        padding: 72px 22px 28px;
    }
    .breadcrumb {
        display: none;
    }
  .section-title {
        font-size: 28px;
  }
}

/* RESPONSIVE: iPad以上はPC */
@media (max-width: 767px) {
  .access { grid-template-columns: 1fr; }
  .entrance { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .overview__table th { width: 80px; font-size: 12px; }
  .overview__table td { font-size: 12px; }
}