@charset "UTF-8"; /* CSSファイルの文字コードを指定。文字化けを防ぎます */

/*!
 * Author: (Passion-Creator)
 * License: MIT License
*/

/* ========== 1. 基本設定 & デザイン変数 ========== */
:root { /* サイト全体で使う色やフォントを「変数」として定義します */
    --bg-color: #F5F3EF; /* 背景色用の変数（温かみのあるオフホワイト） */
    --text-color: #333333; /* 文字色用の変数（チャコール） */
    --accent-color: #2F4F4F; /* アクセントカラー用の変数（藍色系） */
    --font-mincho: 'Shippori Mincho', serif; /* 明朝体フォント用の変数 */
    --font-gothic: 'Noto Sans JP', sans-serif; /* ゴシック体フォント用の変数 */
}

body {
    background: var(--bg-color); /* var()を使って背景色に変数を適用 */
    color: var(--text-color); /* var()を使って文字色に変数を適用 */
    font-family: var(--font-gothic); /* サイト全体の基本フォント */
    line-height: 1.8; /* 行間を文字サイズの1.8倍に設定し、読みやすくする */
    margin: 0; /* ブラウザが自動で付けるbodyの余白をリセット */
    -webkit-font-smoothing: antialiased; /* フォントの表示を滑らかにする設定 (Chrome, Safari用) */
    -moz-osx-font-smoothing: grayscale; /* フォントの表示を滑らかにする設定 (Firefox用) */
}

* { box-sizing: border-box; } /* 全ての要素で、padding等を幅(width)に含めて計算する（レイアウト崩れ防止）*/
a { text-decoration: none; color: inherit; } /* リンクの下線を消し、文字色を親要素から引き継ぐ */
img { max-width: 100%; display: block; } /* 画像が親要素からはみ出さず、下の隙間が消えるようにする */
.section-title { /* 各セクションの見出しのデザイン */
    font-family: var(--font-mincho); /* 見出しのフォントは明朝体にする */
    text-align: center; /* テキストを中央揃えにする */
    font-size: 2.5rem; /* 文字サイズを指定 */
    font-weight: 700; /* 文字の太さを指定 */
    margin: 0 0 3rem; /* 下側に余白を設ける */
}

/* ========== 2. ヘッダー & フルスクリーンメニュー ========== */
.header {
    display: flex; /* 中の要素（ロゴ、メニューボタン）を横並びにする */
    justify-content: space-between; /* 両端に配置する（ロゴが左、メニューが右） */
    align-items: center; /* 上下中央に揃える */
    padding: 1.5rem 2rem; /* 内側の余白（上下、左右） */
    position: fixed; /* 画面の上部に固定し、スクロールに追従させる */
    width: 100%; /* 横幅を画面いっぱいに */
    top: 0; /* 上から0の位置に配置 */
    left: 0; /* 左から0の位置に配置 */
    z-index: 100; /* 要素の重なり順。数字が大きいほど手前に表示される */
    background: rgba(245, 243, 239, 0.85); /* 最後の0.85が不透明度。0に近いほど透明になります */
}

/* ★★ JavaScriptによってスクロール時に付与されるクラス ★★ */
.header.scrolled {
    background: var(--bg-color); /* 背景色を元のオフホワイトに戻す */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* スクロール時に少し影を付けると、より立体感が出ます */
}

.logo { font-family: var(--font-mincho); font-size: 1.8rem; font-weight: 700; } /* ロゴのスタイル */
.menu-trigger { background: none; border: none; font-family: var(--font-gothic); cursor: pointer; font-size: 1rem; } /* メニューボタンのデフォルトスタイルを解除 */
.menu-screen {
    position: fixed; /* スクロールしても画面に固定表示 */
    top: 0; left: 0; /* 画面の左上に配置 */
    width: 100vw; height: 100vh; /* 画面全体の幅と高さに広げる */
    background: var(--bg-color); /* 背景色を指定 */
    z-index: 200; /* ヘッダー(100)よりも手前に表示させる */
    display: flex; /* 中のメニューリストを中央揃えにするためflexboxを使う */
    justify-content: center; /* 水平方向の中央に配置 */
    align-items: center; /* 垂直方向の中央に配置 */
    opacity: 0; /* 初期状態では透明にして見えなくする */
    visibility: hidden; /* 操作もできないように隠す */
    transition: opacity 0.4s, visibility 0.4s; /* ふわっと表示させるためのアニメーション設定 */
}
.menu-screen.is-open { opacity: 1; visibility: visible; } /* JavaScriptでこのクラスが付くと、メニューが表示される */
.menu-nav ul { list-style: none; padding: 0; text-align: center; } /* メニューリストのスタイル */
.menu-nav li { margin: 1.5rem 0; } /* メニュー項目の上下の余白 */
.menu-nav a { font-family: var(--font-mincho); font-size: 2rem; } /* メニュー項目の文字スタイル */
.menu-close { position: absolute; top: 2.5rem; right: 2rem; background: none; border: none; font-size: 1rem; cursor: pointer; } /* 閉じるボタンのスタイル */

/* ========== 3. ヒーローセクション ========== */
.hero {
    display: flex; /* 中の画像とタイトルを横並びにする */
    align-items: center; /* 上下中央揃え */
    justify-content: space-between; /* 両端に均等配置 */
    padding: 10rem 5% 5rem; /* 内側の余白（上、左右、下）。上の余白を大きく取り、固定ヘッダーと被らないようにする */
    min-height: 80vh; /* 最低でも画面の高さの80%を確保 */
}
.hero__image {
    width: 55%; /* 親要素に対して55%の幅 */
}
.hero__image img {
    width: 100%;
    height: 70vh; /* 画像の高さを画面の70%に */
    object-fit: cover; /* 画像の比率を保ったまま、指定したサイズに収まるようトリミング */
}
.hero__title {
    width: 40%; /* 親要素に対して40%の幅 */
    position: relative; /* 縦書きテキストを配置する際の基準点にする */
    padding-left: 2rem;
    padding-right: 3rem;
}
.hero__title h1 {
    font-family: var(--font-mincho);
    font-size: clamp(2.5rem, 6vw, 4rem); /* 画面幅に応じて文字サイズを自動調整（最小, 推奨, 最大） */
    line-height: 1.4;
    font-weight: 700;
    margin: 0;
}
.hero__title--vertical {
    font-family: var(--font-mincho);
    writing-mode: vertical-rl; /* テキストを縦書き（右から左へ）にする */
    position: absolute; /* 親要素を基準に絶対位置で配置 */
    top: 0; /* 親要素の上辺に合わせる */
    right: 0; /* 親要素の右辺に合わせる */
    font-size: 1.1rem;
    color: #999;
}

/* ========== 4. Works & Information ========== */
.works-grid { padding: 5rem 5%; }
.works-grid__container {
    display: grid; /* グリッドレイアウト（タイル状に並べる）を適用 */
    grid-template-columns: repeat(2, 1fr); /* 均等な幅(1fr)の列を2つ作成 */
    gap: 1rem; /* アイテム間の隙間 */
}
.works-grid__item { overflow: hidden; } /* はみ出した部分を隠す（ホバー時の画像拡大のため） */
.works-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } /* 変形(transform)に0.8秒かけてアニメーション */
.works-grid__item a:hover img { transform: scale(1.05); } /* マウスを乗せたら画像を1.05倍に拡大 */

.information-section { padding: 5rem 5%; background: #fff; }
.info-container { display: flex; align-items: center; gap: 3rem; }
.info-map { width: 50%; }
.info-map iframe { width: 100%; height: 400px; filter: grayscale(100%) contrast(90%); } /* Googleマップ等を白黒にしてデザインに馴染ませる */
.info-details { width: 50%; }
.info-details dt { font-weight: bold; margin-top: 1rem; }
.info-details dd { margin-left: 0; }
.btn {
    display: inline-block;
    background: var(--accent-color);
    color: #fff;
    padding: 1rem 2rem;
    margin-top: 2rem;
    transition: opacity 0.3s; /* 透明度(opacity)に0.3秒のアニメーション */
}
.btn:hover { opacity: 0.8; color:#fff; } /* マウスを乗せたら少し透明にする */

/* ========== 5. フッター & 予約ページ ========== */
.footer { text-align: center; padding: 2rem; font-size: 0.9rem; }
.booking-section { padding: 120px 2rem 5rem; max-width: 500px; margin: 0 auto; text-align: center; } /* 横幅を最大500pxに制限し、中央揃えに */
.booking-form { margin-top: 2rem; }
.booking-form input, .booking-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ccc;
    background: #fff;
    font-family: var(--font-gothic);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* ========== 6. レスポンシブ対応 ========== */
@media (max-width: 768px) { /* 画面幅が768px以下の時（スマホなど）に適用するスタイル */
    .hero { flex-direction: column; padding: 8rem 5% 3rem; } /* 横並びを「縦並び」に変更 */
    .hero__image, .hero__title { width: 100%; } /* 幅を100%に */
    .hero__image { margin-bottom: 2rem; }
    .hero__title--vertical { display: none; } /* スマホでは縦書きテキストを非表示にする */
    .works-grid__container { grid-template-columns: 1fr; } /* グリッドを2列から「1列」に変更 */
    .info-container { flex-direction: column; } /* 横並びを「縦並び」に変更 */
    .info-map, .info-details { width: 100%; }
}

/* ▼▼▼▼▼ 姉妹サイト誘導CTAセクションのスタイル(不要な場合はそのまま削除してOKです。) ▼▼▼▼▼ */

.sister-cta-section {
    background-color: #f8f9fa; /* 薄い背景色 */
    padding: 5rem 2rem;
    margin-top: 4rem; /* フォームとの間隔 */
    border-top: 1px solid #e9ecef;
}

.sister-cta-content {
    display: flex;
    flex-direction: column-reverse; /* スマホではテキストが先 */
    align-items: center;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.sister-cta-text {
    flex: 2; /* テキストエリアの幅を広めに */
}

.sister-cta-lead {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color, #e67e22); /* テーマカラー or オレンジ */
    margin: 0 0 0.5rem 0;
}

.sister-cta-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.sister-cta-text p {
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 2.5rem;
}

.sister-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 1rem 3rem;
    border-radius: 50px;
    color: #fff;
    background: linear-gradient(135deg, #f39c12, #e67e22); /* グラデーションボタン */
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(230, 126, 34, 0.3);
}

.sister-cta-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(230, 126, 34, 0.4);
    opacity: 1; /* a:hoverのデフォルトopacityを上書き */
}

.sister-cta-image {
    flex: 1;
    max-width: 250px;
}
.sister-cta-image img {
    width: 100%;
    border-radius: 12px;
}

/* PC表示でのレイアウト調整 */
@media (min-width: 768px) {
    .sister-cta-content {
        flex-direction: row; /* PCでは横並び */
        gap: 4rem;
        text-align: left;
    }
}

/* ▲▲▲▲▲ 姉妹サイト誘導CTAセクションのスタイル(不要な場合はそのまま削除してOKです。)  ▲▲▲▲▲ */