/* ==========================================================================
   KAGOSIMAhayato LP — common.css
   トークン + shell（帯レイアウト）+ button + section-heading
   ========================================================================== */

:root {
  /* 色 */
  --kh-color-bg: #1e1e1e;
  --kh-color-main: #ffffff;
  --kh-color-second: #000000;
  --kh-color-accent: #de3336;
  --kh-color-menu-text: #642c2b;
  --kh-color-menu-bg: #e6d7c0;

  /* 派生 */
  --kh-color-bg-outer: var(--kh-color-bg);
  --kh-bg-outer-image: url(img/common/resposibbg.webp);
  --kh-color-bg-band: var(--kh-color-main);
  --kh-color-text: var(--kh-color-second);
  --kh-color-text-light: #666666;
  --kh-color-text-inverse: var(--kh-color-main);
  --kh-color-bg-muted: var(--kh-color-menu-bg);
  --kh-color-border: rgba(0, 0, 0, 0.12);

  /* フォント */
  --kh-font-main: "hellofont-id-hunyuanti", sans-serif;
  --kh-font-second: "taw-takedajyoato", sans-serif;
  --kh-font-second-weight: 400;
  --kh-font-taw-taledakupayo: "taw-takedajyoato", sans-serif;
  --kh-font-kokuryu: "kokuryu", sans-serif;
  --kh-font-noto-sans: "Noto Sans JP", sans-serif;
  --kh-font-noto-serif: "Noto Serif JP", serif;
  --kh-font-noto: var(--kh-font-noto-sans);
  --kh-font-description: var(--kh-font-noto-sans), "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --kh-font-size-section-heading-title: 3rem;
  --kh-font-size-section-sub-title: 1.8rem;
  --kh-font-size-small: 2rem;

  /* テキスト縁取り */
  --kh-text-outline-color: var(--kh-color-main);
  --kh-text-outline-width: 2px;
  --kh-text-outline-shadow:
    calc(-1 * var(--kh-text-outline-width)) 0 0 var(--kh-text-outline-color),
    var(--kh-text-outline-width) 0 0 var(--kh-text-outline-color),
    0 calc(-1 * var(--kh-text-outline-width)) 0 var(--kh-text-outline-color),
    0 var(--kh-text-outline-width) 0 var(--kh-text-outline-color),
    calc(-1 * var(--kh-text-outline-width)) calc(-1 * var(--kh-text-outline-width)) 0 var(--kh-text-outline-color),
    var(--kh-text-outline-width) calc(-1 * var(--kh-text-outline-width)) 0 var(--kh-text-outline-color),
    calc(-1 * var(--kh-text-outline-width)) var(--kh-text-outline-width) 0 var(--kh-text-outline-color),
    var(--kh-text-outline-width) var(--kh-text-outline-width) 0 var(--kh-text-outline-color);
  --kh-text-outline-color-cream: #f6e4d0;
  --kh-text-outline-shadow-cream:
    calc(-1 * var(--kh-text-outline-width)) 0 0 var(--kh-text-outline-color-cream),
    var(--kh-text-outline-width) 0 0 var(--kh-text-outline-color-cream),
    0 calc(-1 * var(--kh-text-outline-width)) 0 var(--kh-text-outline-color-cream),
    0 var(--kh-text-outline-width) 0 var(--kh-text-outline-color-cream),
    calc(-1 * var(--kh-text-outline-width)) calc(-1 * var(--kh-text-outline-width)) 0 var(--kh-text-outline-color-cream),
    var(--kh-text-outline-width) calc(-1 * var(--kh-text-outline-width)) 0 var(--kh-text-outline-color-cream),
    calc(-1 * var(--kh-text-outline-width)) var(--kh-text-outline-width) 0 var(--kh-text-outline-color-cream),
    var(--kh-text-outline-width) var(--kh-text-outline-width) 0 var(--kh-text-outline-color-cream);

  /* レイアウト — FAVTOWN 型（https://www.favtown.jp/）帯幅のみ 430px に調整 */
  --kh-layout-band-max: 430px;
  --kh-layout-fixed-footer-height: 61px;
  --kh-layout-inner-padding: 20px;
  --kh-layout-text-width: 95%;
  --kh-breakpoint-tablet: 1199px;
  --kh-breakpoint-sp: 430px;
  --kh-breakpoint-pc: 431px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--kh-font-description);
  color: var(--kh-color-text);
  line-height: 1.7;
  background-color: var(--kh-color-bg-outer);
}

h1,
h2,
h3,
h4 {
  font-family: var(--kh-font-main);
  font-weight: 400;
  font-style: normal;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Shell — FAVTOWN ContentWrapper 型
   SP（430px 以下）: 帯が画面全幅
   PC（431px 以上）: 帯を中央固定 + 左右ボーダー、外側は背景画像を画面いっぱいに表示
   -------------------------------------------------------------------------- */

.kh-shell {
  min-height: 100vh;
  background-color: var(--kh-color-bg-outer);
}
.kh-small-text{
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.kh-shell__band {
  width: 100%;
  max-width: var(--kh-layout-band-max);
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: var(--kh-layout-fixed-footer-height);
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-width: 0;
}

@media (min-width: 431px) {
  .kh-shell {
    background-color: var(--kh-color-bg-outer);
    background-image: var(--kh-bg-outer-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

}

/* --------------------------------------------------------------------------
   __inner — 横余白
   -------------------------------------------------------------------------- */

[class*="__inner"] {
  width: 100%;
  padding-left: var(--kh-layout-inner-padding);
  padding-right: var(--kh-layout-inner-padding);
}

/* --------------------------------------------------------------------------
   text-width
   -------------------------------------------------------------------------- */

.kh-text-width {
  width: var(--kh-layout-text-width);
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   text-outline — テキスト外側の白縁取り
   -------------------------------------------------------------------------- */

.kh-text-outline {
  text-shadow: var(--kh-text-outline-shadow);
}

.kh-text-outline--stroke {
  -webkit-text-stroke: var(--kh-text-outline-width) var(--kh-text-outline-color);
  paint-order: stroke fill;
}

.kh-text-outline--cream {
  text-shadow: var(--kh-text-outline-shadow-cream);
}

.kh-text-outline--cream.kh-text-outline--stroke {
  -webkit-text-stroke: var(--kh-text-outline-width) var(--kh-text-outline-color-cream);
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

/* 価格の「円」— 表示専用（読み上げは親要素の aria-label で提供） */
.kh-price__unit {
  font-family: var(--kh-font-second);
}

/* 装飾テキスト分割 — 表示専用（読み上げは親要素の aria-label で提供） */
.kh-text-split {
  /* スタイルは各セクションの CSS で指定 */
}

/* --------------------------------------------------------------------------
   font utility
   -------------------------------------------------------------------------- */

.kh-font-main {
  font-family: "hellofont-id-hunyuanti", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.kh-font-second {
  font-family: "taw-takedajyoato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.kh-font-description {
  font-family: var(--kh-font-description);
}

.kh-font-taw-taledakupayo {
  font-family: var(--kh-font-taw-taledakupayo);
  font-weight: 400;
  font-style: normal;
}

.kh-font-kokuryu {
  font-family: var(--kh-font-kokuryu);
  font-weight: 400;
  font-style: normal;
}

.kh-font-noto-sans {
  font-family: var(--kh-font-noto-sans);
  font-style: normal;
}

.kh-font-noto-serif {
  font-family: var(--kh-font-noto-serif);
  font-style: normal;
}

.kh-font-noto {
  font-family: var(--kh-font-noto);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   color utility
   -------------------------------------------------------------------------- */

.kh-color-accent {
  color: var(--kh-color-accent);
}

.kh-color-menu-text {
  color: var(--kh-color-menu-text);
}

.kh-text-brown {
  color: var(--kh-color-menu-text);
}

.kh-small {
  font-size: var(--kh-font-size-small);
  letter-spacing: -.1em;
  font-feature-settings: "palt";
}

.kh-section-heading__title span.kh-small,
.kh-section-strong__title span.kh-small,
.kh-section-strong__title-secondary span.kh-small {
  font-size: var(--kh-font-size-small);
}

/* --------------------------------------------------------------------------
   section-heading
   -------------------------------------------------------------------------- */

.kh-section-heading {
  text-align: center;
}

.kh-section-heading__en {
  display: block;
  font-family: var(--kh-font-second);
  font-size: 0.75rem;
  font-weight: var(--kh-font-second-weight);
  letter-spacing: 0.15em;
  color: var(--kh-color-accent);
  text-transform: uppercase;
}

.kh-section-heading__title {
  margin-top: 8px;
  font-family: var(--kh-font-main);
  font-size: var(--kh-font-size-section-heading-title);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--kh-color-second);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   button
   -------------------------------------------------------------------------- */

.kh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 32px;
  font-family: var(--kh-font-second);
  font-size: 0.875rem;
  font-weight: var(--kh-font-second-weight);
  letter-spacing: 0.05em;
  color: var(--kh-color-main);
  background-color: var(--kh-color-second);
  border: 2px solid var(--kh-color-second);
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.kh-button:hover {
  opacity: 0.8;
}

.kh-button--outline {
  color: var(--kh-color-second);
  background-color: transparent;
}

.kh-button--accent {
  color: var(--kh-color-main);
  background-color: var(--kh-color-accent);
  border-color: var(--kh-color-accent);
}

.kh-button--block {
  display: flex;
  width: 100%;
}

/* 赤：bg 赤 / color 白 / border なし / 影なし / 右端に > */
.kh-button--red {
  position: relative;
  justify-content: center;
  padding-right: 40px;
  padding-block: 1rem;
  color: var(--kh-color-main);
  background-color: var(--kh-color-accent);
  font-family: var(--kh-font-description);
  font-size: .9rem;
  border: none;
  box-shadow: none;
  border-radius: 0;
  width: 90%;
  margin-inline: auto;
}

.kh-button--red::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
}

.kh-button--red:hover {
  opacity: 0.85;
}

.kh-button--red.kh-button--map::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 19px;
  background: url("img/common/map.svg") no-repeat center / contain;
}

/* 白：bg 透明 / color 白 / border 白 / 影なし */
.kh-button--white {
  color: var(--kh-color-main);
  background-color: transparent;
  border: 1px solid var(--kh-color-main);
  box-shadow: none;
  font-family: var(--kh-font-description);
  border-radius: 0;
  width: 100%;
  margin-inline: auto;
  padding-block: 1rem;
  font-size: 18px;
}

.kh-button--white::before {
  content: "";
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  background: url("img/common/news.svg") no-repeat center / contain;
}

.kh-button--white:hover {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Utility — SP
   -------------------------------------------------------------------------- */

@media (max-width: 430px) {
  :root {
    --kh-layout-inner-padding: 16px;
    --kh-font-size-section-heading-title: clamp(1.75rem, 8vw, 3rem);
    --kh-font-size-section-sub-title: clamp(1.125rem, 4.5vw, 1.8rem);
    --kh-font-size-small: clamp(1.25rem, 5vw, 2rem);
  }

  .kh-u-sp-hidden {
    display: none !important;
  }
}