@charset "utf-8";

/*
Theme Name: 阿蘇 五岳ホテル
Author: SIMPLE Inc.
Author URI: https://simple.jp.net/
Description: 阿蘇内牧温泉 阿蘇 五岳ホテル（gogakuhotel.com）のオリジナルテーマ
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: gogaku
*/

:root {
    /* 色の設定 */
    --white: #ffffff;
    --black: #333333;
    --orange: #f46e45;
    --orangeOff: #ea8a59;
    /* 背景がグレーの場合など */
    --navy: #2a315b;
    --gray: #717070;
    /* テキスト黒と背景 */
    --gray-b3: #b3b3b3;
    --warm-gray: #e1d8d1;
    --cream: #fdf5e8;

    /* フォントの設定 */
    /* Google Fonts */
    /* ▼ Adobe Caslon Proの代替え */
    --Caslon: 'Libre Caslon Text', serif;
    --ZenKakuGothicNew: "Zen Kaku Gothic New", "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    /* ▼ DNP 秀英角ゴシック銀 Stdの代替え */
    --NotoSansJP: "Noto Sans JP", "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
}

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

/* =========================================================
    ガイドライン追加分の変数
    ※1rem = 16px
========================================================= */
:root {
    /* ブレイクポイント・コンテンツ幅（ガイドライン 5-5）
        ※@media の中では var() が使えないので、@media には数値を直接書く
        @media (min-width: 768px){ タブレット・PC }
        @media (max-width: 767px){ SP } */
    --breakpoint-tablet: 768px;
    /* タブレット標準（iPad縦幅を想定） */
    --breakpoint-desktop: 1300px;
    /* デスクトップ標準（最大フォントサイズ到達値） */
    --max: 1300px;
    /* コンテンツ最大幅 */

    /* 余白（ガイドライン 5-6）8の倍数ベース */
    --space-8: 0.5rem;
    --space-16: 1rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-48: 3rem;

    /* 流動的な文字サイズ（ガイドライン 5-6 を rem に換算）
        800〜1300px で変動、それ以外は固定。数字は PC での px 値 */
    --fs14: 0.875rem;
    --fs15: clamp(0.875rem, 1.154dvw, 0.9375rem);
    --fs16: clamp(0.875rem, 1.231dvw, 1rem);
    --fs18: clamp(0.9375rem, 1.385dvw, 1.125rem);
    --fs20: clamp(1rem, 1.538dvw, 1.25rem);
    --fs22: clamp(1rem, 1.692dvw, 1.375rem);
    --fs24: clamp(1.125rem, 1.846dvw, 1.5rem);
    --fs25: clamp(1.125rem, 1.923dvw, 1.5625rem);
    --fs26: clamp(1.125rem, 2.000dvw, 1.625rem);
    --fs28: clamp(1.25rem, 2.154dvw, 1.75rem);
    --fs30: clamp(1.375rem, 2.308dvw, 1.875rem);
    --fs32: clamp(1.375rem, 2.462dvw, 2rem);
    --fs34: clamp(1.375rem, 2.615dvw, 2.125rem);
    --fs35: clamp(1.4375rem, 2.692dvw, 2.1875rem);
    --fs36: clamp(1.5rem, 2.769dvw, 2.25rem);
    --fs38: clamp(1.5rem, 2.923dvw, 2.375rem);
    --fs40: clamp(1.875rem, 3.077dvw, 2.5rem);
    --fs44: clamp(1.875rem, 3.385dvw, 2.75rem);
    --fs48: clamp(1.875rem, 3.692dvw, 3rem);
    --fs50: clamp(2rem, 3.846dvw, 3.125rem);
    --fs53: clamp(2rem, 4.077dvw, 3.3125rem);
    --fs60: clamp(2.25rem, 4.615dvw, 3.75rem);
    --fs70: clamp(2.625rem, 5.385dvw, 4.375rem);
    --fs78: clamp(2.75rem, 6.000dvw, 4.875rem);
    --fs80: clamp(3.125rem, 6.154dvw, 5rem);
}


/* =========================================================
    五岳ホテル 固有の設定
    ・ブレイクポイント（ガイドライン 5-5）
        @media (max-width: 767px){ SP }
        @media (min-width: 768px){ タブレット・PC }
    ・SP カンプは幅 390px。SP は最小 375px で設計し、縮む要素も 375px の大きさで止める（360px でもギリギリ収まる）
    ・文字はすべて rem。html の font-size をヘッダーの「Text size」で切り替える
        標準 16px / 大 18px / 特大 24px（カンプは「標準」= 1rem 16px で作成）
        rem の値 = カンプの px ÷ 16（コメントにカンプの px を併記）
    ・画像・枠・余白・ボタン幅・アイコンはカンプどおりの px 固定
        文字が大きくなったら行が増え、包む要素が縦に伸びる
    ・1920px の素材は縮小せず左右中央に置き、はみ出した分は切る（.wide-image）
    ・CSS の分け方：style.css（共通）/ css/header.css / css/footer.css / css/[ページ名].css
========================================================= */
:root {
    --bg: #f7f4ed;              /* ベージュの地色 */
    --text: #1a1a1a;            /* 文字色 */
    --dark: #333333;            /* 黒ボタン */
    --footer: #1a1a1a;          /* フッターの黒 */
    --yellow: #e2c414;          /* 黄色（お知らせ・MENU・ボタン） */
    --green: #0c5f55;           /* 深緑（ご予約タブ） */
    --red: #be2c3f;             /* プラン一覧ボタン */
    --shadow: rgba(215, 190, 130, 0.2);  /* 写真の影（半透明。客室などの画像の影と同じ色） */

    --Mincho: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

/* =========================================================
    ベース
========================================================= */
/* 文字サイズの切り替え（main.js が data-text-size を書き換える） */
html[data-text-size="large"] {
    font-size: 20px;
}

html[data-text-size="xlarge"] {
    font-size: 24px;
}

html {
    /* Safari：iPhone横向きで文字が勝手に拡大されるのを防ぐ */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Safari：タップ時の灰色ハイライトを消す（子要素にも継承される） */
    -webkit-tap-highlight-color: transparent;
}

body {
    width: min(1920px, 100%);
    margin: 0 auto;
    height: auto;
    background: var(--bg);
    color: var(--text);
    font-family: var(--ZenKakuGothicNew);
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.8;
    letter-spacing: 0.05em;
    text-align: left;
    /* hidden だと Safari で position: sticky が効かなくなるため clip */
    overflow-x: clip;
}

/* h1 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

h2 {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 2rem;
}

h3 {
    font-size: 1.17rem;
}

h4 {
    font-size: 1.5rem;
}

p {
    font-size: 1rem;
    font-weight: normal;
    font-style: normal;
}

small {
    font-size: 0.875rem;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

address {
    font-style: normal;
}

/* =========================================================
    リンク・ボタン
========================================================= */
a {
    /* font-size は書かない（見出しの中のリンクが 1rem に縮むため）。親から継承 */
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
    touch-action: manipulation;
}

button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    /* Safari：ボタンの文字が青・小さい文字になるのを防ぐ */
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition: opacity 0.3s ease;
    touch-action: manipulation;
}

/* マウス操作（PC）のときだけホバー
    ※iPhone Safari ではタップ後に :hover が残り続けるので、hover は必ずこの中に書く */
@media (hover: hover) {
    a:hover,
    button:hover {
        opacity: 0.75;
    }
}

/* タッチ端末：押している間だけ薄くする
    ※iPhone Safari では JS で touchstart を登録しないと :active が効かない（main.js 側で対応） */
@media (hover: none) {
    a:active,
    button:active {
        opacity: 0.75;
    }
}

/* クリック後の枠線は出さず、キーボード操作のときだけ枠線を出す */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* =========================================================
    フォーム（Safari の独自装飾を消す）
========================================================= */
input,
textarea,
select {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    color: inherit;
    font: inherit;
    /* iPhone Safari：16px 未満だと入力時に画面がズームするため 1rem 以上にする */
    font-size: 1rem;
}

input[type="checkbox"],
input[type="radio"] {
    /* チェックボックス・ラジオは標準の見た目を残す */
    appearance: auto;
    -webkit-appearance: auto;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

textarea {
    resize: vertical;
}

/* details / summary（FAQ等）：Safari の三角マーカーを消す */
summary {
    display: block;
    list-style: none;
    cursor: pointer;
}

summary::-webkit-details-marker {
    display: none;
}

/* =========================================================
    画像
========================================================= */
img {
    display: block;
    /* 画像下の隙間を消す */
    width: 100%;
    /* height: 100% だと Safari で flex の中の画像が縦に伸びるため auto
        トリミングしたいときは height か aspect-ratio を個別に指定する */
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* 幅の広い素材（1920px など）：縮小せず左右中央に置き、画面からはみ出した分は切る
    <div class="wide-image"><picture>…<img></picture></div> の img に幅を指定して使う */
.wide-image {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.wide-image picture {
    display: contents;
}

.wide-image img {
    flex: none;
    max-width: none;
}

/* =========================================================
    共通パーツ
========================================================= */
/* コンテンツ幅（ガイドライン 5-7）：SP 90% / PC 80%、最大 1300px */
.inner {
    width: 90%;
    max-width: var(--max);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .inner {
        width: 80%;
    }
}

/* 見出し（お知らせ・おすすめ情報・アクセス 共通） */
.section-title {
    text-align: center;
}

.section-title img {
    width: 42.24px;
    margin-inline: auto;
}

.section-title-ja {
    margin: 10px 0 0;
    font-family: var(--Mincho);
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.section-title-en {
    margin-top: 2px;
    font-size: 1.25rem; /* 20px */
    line-height: 1.3;
    letter-spacing: 0.08em;
}

/* ボタン
    ・幅・アイコン・アイコンとの間隔はカンプどおり固定。文字は折り返さない
    ・内側の上下の余白は em（文字が大きくなるとボタンの高さも伸びる） */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    width: 330px;
    min-height: 50px;
    padding: 0.7em 0.5em;
    border-radius: 6px;
    background: var(--dark);
    color: var(--white);
    font-size: min(1.125rem,24px); /* 18px～24px */
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

.btn img {
    flex-shrink: 0;
    width: 20px;
    height: auto;
}

/* 文字の位置：ボタンの左右中央から 0.75em 左に寄せる
    文字の左の見えない余白（幅 0 ＋ margin ＋ gap）を「矢印 20px ＋ gap − 0.75em × 2」にすると、文字の中心が 0.75em 左になる
    （gap は文字の左右に同じだけ入るので、margin は gap の値に関係なく「20px − 1.5em」。寄せる量を変えるときは 1.5em を「寄せる量 × 2」に） */
.btn::before {
    content: "";
    flex-shrink: 0;
    width: 0;
    margin-right: calc(20px - 1.5em);
}

.btn-short {
    width: 300px;
}

.btn-yellow {
    background: var(--yellow);
    color: var(--text);
}

/* 中央に置くボタン（お知らせ・アクセス・Instagram）：幅はお知らせの記事画像と同じ 340px
    SP で画面が狭いときは、375px の画面のときの幅（325px）より小さくしない */
.btn-wrap {
    text-align: center;
}

.btn-wrap .btn {
    width: 340px;
    max-width: 100%;
    min-width: 325px;
}

/* 住所などの行：1 項目を 1 行のまま表示する
    1 項目だけで画面に入りきらないとき（文字サイズ大・特大）は、項目の途中でも折り返す（はみ出すと画面が横にずれるため） */
.info-lines > span {
    display: inline-block;
    max-width: 100%;
}

/* 住所：折り返すときは「〒869-2301」と「熊本県阿蘇市内牧264」の間で改行する（それぞれの途中では折り返さない）
    それぞれが画面に入りきらないとき（文字サイズ大・特大）だけ、途中でも折り返す */
.address-part {
    display: inline-block;
    max-width: 100%;
}

/* PC / SP の出し分け */
@media (min-width: 768px) {
    .sp-only {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .pc-only {
        display: none !important;
    }
}

/* ページトップへ戻る */
.page-top {
    position: fixed;
    right: var(--space-16);
    bottom: var(--space-16);
    z-index: 100;
    width: 3rem;
}

/* =========================================================
    スクロールでふわっと出す（最初に画面に入ったときだけ。main.js が .is-shown を付ける）
    出し方はクラス名で選ぶ
        class="fadein-up"    下から
        class="fadein-left"  左から
        class="fadein-right" 右から
========================================================= */
.fadein-up,
.fadein-left,
.fadein-right {
    opacity: 0;
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.fadein-up {
    transform: translateY(40px);
}

.fadein-left {
    transform: translateX(-40px);
}

.fadein-right {
    transform: translateX(40px);
}

.fadein-up.is-shown,
.fadein-left.is-shown,
.fadein-right.is-shown {
    opacity: 1;
    transform: none;
}

/* 「視差効果を減らす」設定の人には動きを付けない */
@media (prefers-reduced-motion: reduce) {
    .fadein-up,
    .fadein-left,
    .fadein-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
    ローディング
    ・<div id="loading"> がページにあるときだけ、読み込み完了（body.is-loaded）まで中身を隠す
    ・ロゴ → くるくる → 山の絵 を縦に並べ、画面が低いときはロゴだけが縮む
        （どのスマホでも山の絵が切れず、くるくるがロゴや絵に重ならない）
    ・終わり方（main.js が順にクラスを付ける。開始から 3.6 秒でサイトが表示し終わる）
        1. .is-fading：ロゴ・くるくる・山の絵が消えて、画面が真っ白になる（0.4 秒）
        2. .is-hidden と body.is-loaded：白い画面が消えながら、サイトが少し下からふわっと現れる（1.2 秒）
========================================================= */
#loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    overflow: hidden;
    background: var(--white);
    opacity: 1;
    visibility: visible;
    transition: opacity 1.2s ease, visibility 1.2s ease;
}

#loading > * {
    transition: opacity 0.4s ease;
}

#loading.is-fading > * {
    opacity: 0;
}

#loading.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ローディング中のスクロール止めは main.js で行う（スクロールバーを消すとページの幅が変わるため、CSS の overflow: hidden は使わない） */

.loading-logo {
    flex: 0 1 347px;
    width: 973px;
    min-height: 0;
    margin-top: auto;
}

.loading-logo picture {
    display: block;
    height: 100%;
}

.loading-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.loading-progress {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 24px 0 auto;
    padding-bottom: 24px;
}

.loading-spinner {
    width: 22px;
    height: 22px;
    border: 2px dotted #777777;
    border-radius: 50%;
    animation: loading-spin 2.5s linear infinite; /* 1 周 2.5 秒 */
}

.loading-percent {
    font-size: 0.875rem; /* 14px */
    line-height: 1;
}

/* 画像のいちばん下の 1px が半透明で、下端に白いすき間があるように見えるので、1px 下へずらして画面の外に出す */
.loading-bottom {
    flex: none;
    width: 100%;
    margin-bottom: -1px;
}

.loading-bottom img {
    width: 1920px;
}

@keyframes loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 767px) {
    /* ロゴがなるべく縮まないよう、上下の余白を詰める */
    #loading {
        padding-top: 16px;
    }

    .loading-logo {
        flex-basis: 391px;
        width: 331px;
    }

    .loading-progress {
        position: relative;
        z-index: 1;
        margin-top: 10px;
        padding-bottom: 0;
    }

    /* 山の絵の画像は上から約 80px が空いている（雲だけ）ので、くるくるをその空いた部分に重ねる
        （くるくるが建物や山に重ならない範囲） */
    .loading-bottom {
        margin-top: -50px;
    }

    /* 画面幅いっぱいに広げる（390px より狭い画面では左右を切る） */
    .loading-bottom img {
        width: max(100%, 391px);
    }
}

/* サイトの現れ方：少し下から定位置へ、ふわっと */
#header,
#mainvisual,
main,
#footer {
    transition: opacity 1.2s ease, transform 1.2s ease;
}

body:has(#loading):not(.is-loaded) :is(#header, #mainvisual, main, #footer) {
    opacity: 0;
    transform: translateY(40px);
}