@charset "UTF-8";
/*!
 * Author: (Passion-Creator)
 * License: MIT License
*/
/* ===============================================
   基本設定
   サイト全体のデザインの基礎となる部分です。
=============================================== */

/* :rootは、CSS全体で使える「変数」を定義する場所です。
 * 色やフォントなどをここで一括管理すると、後からデザイン変更するのがとても楽になります。
 */
:root {
    --primary-color: #d3a24e; /* メインカラー（金色）*/
    --dark-bg: #141414;       /* 背景色（濃いグレー）*/
    --text-color: #e0e0e0;    /* 基本の文字色（白に近いグレー）*/
    --font-serif: 'Noto Serif JP', serif; /* 見出しなどに使う明朝体フォント */
}

/* bodyは、ページ全体の基本的なスタイルを設定します。 */
body {
    /* サイト全体の基本フォントを指定 */
    font-family: 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    margin: 0; /* ブラウザ標準の余白をリセット */
    background: var(--dark-bg); /* 背景色を:rootで定義した変数で指定 */
    color: var(--text-color);   /* 文字色を:rootで定義した変数で指定 */
    line-height: 1.8;           /* 行の高さを文字サイズの1.8倍に設定。読みやすくなります */
}

/* 画像に関する設定 */
img {
    max-width: 100%;  /* 画像が親要素の幅を超えないようにする（レスポンシブ対応の基本）*/
    height: auto;     /* 高さは自動調整 */
    vertical-align: bottom; /* 画像の下にできる謎の隙間を消すおまじない */
}

/* リンク（aタグ）に関する設定 */
a {
    text-decoration: none; /* リンクの下線を消す */
    color: inherit;        /* 親要素の色を継承する（文字色がバラバラになるのを防ぐ）*/
    transition: opacity 0.3s; /* 0.3秒かけてフワッと変化させる */
}
a:hover {
    opacity: 0.8; /* マウスを乗せたときに少し透明にする */
}

/* .containerは、コンテンツを中央に寄せるための箱です。 */
.container {
    max-width: 1100px; /* コンテンツの最大幅を指定 */
    margin: 0 auto;    /* 上下0、左右autoで中央寄せにするテクニック */
    padding: 4% 4%;    /* 内側に余白を作る */
}

/* h2タグは、各セクションの大見出しです。 */
h2 {
    font-family: var(--font-serif); /* 見出し用のフォントを適用 */
    font-size: 2.5rem;    /* 文字サイズを2.5倍に */
    text-align: center;   /* 中央揃え */
    margin: 0 0 60px 0;   /* 下に60pxの余白を空ける */
}

/* .btnは、サイト内で使うボタンの基本デザインです。 */
.btn {
    display: inline-block; /* インライン要素だが幅や高さを指定できるようにする */
    padding: 10px 30px;    /* 内側の余白 */
    border: 1px solid var(--primary-color); /* 金色の枠線 */
    color: var(--primary-color);            /* 金色の文字 */
    text-align: center;
    border-radius: 5px;   /* 角を少し丸くする */
    transition: all 0.3s; /* 全てのプロパティを0.3秒で変化させる */
}
.btn:hover {
    background: var(--primary-color); /* マウスを乗せたら背景を金色に */
    color: var(--dark-bg);            /* 文字を濃いグレーに */
}
/* .btn-primaryは、通常とは違う「強調」したいボタンのデザインです。 */
.btn.btn-primary {
    background: var(--primary-color); /* 最初から背景が金色 */
    color: var(--dark-bg);            /* 最初から文字が濃いグレー */
    font-weight: bold;
}

/* .center-btnは、ボタンを中央に配置するためのクラスです。 */
.center-btn {
    text-align: center;
    margin-top: 40px;
}


/* ===============================================
   ヘッダー
   サイトの上部に固定表示されるナビゲーション部分です。
=============================================== */
.header {
    position: fixed; /* スクロールしても画面上部に固定する */
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.7); /* 少し透けた黒 */
    z-index: 105;    /* この数値はメニュー(.sp-nav)の100より大きくします。 */
    padding: 15px 0;
}
/* .header-containerは、ヘッダーの中身を中央寄せにするための箱です。 */
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
    display: flex; /* 横並びにする */
    justify-content: space-between; /* 両端に寄せる */
    align-items: center;            /* 上下中央に揃える */
}
.logo {
    font-size: 1.8rem;
    font-weight: bold;
    font-family: var(--font-serif);
}
/* .pc-navは、PC表示の時のナビゲーションメニューです。 */
.pc-nav ul {
    display: flex; /* 横並びにする */
    list-style: none; /* liタグの黒点を消す */
    margin: 0; padding: 0;
}
.pc-nav li {
    margin-left: 30px; /* 各メニュー項目の左側に余白 */
}
.pc-nav a {
    font-size: 1rem;
}
.pc-btn {
    display: block;
}


/* ===============================================
   ハンバーガーメニュー
   スマートフォン表示の時に現れるメニューです。
=============================================== */

/* .sp-menu-btnは、三本線のハンバーガーアイコンです。 */
.sp-menu-btn {
    display: none; /* ★PCでは非表示にしておく */
    background: none;
    border: none;
    cursor: pointer; /* カーソルを指の形にする */
    z-index: 110;  /* ヘッダー(105)より手前に */
}
.sp-menu-btn span {
    display: block;
    width: 30px;
    height: 2px;
    background: white;
    margin: 6px 0;
    transition: 0.4s; /* 0.4秒かけてアニメーション */
}

/* .sp-navは、開いたときのメニュー画面です。 */
.sp-nav {
    position: fixed;
    top: 0;
    right: -100%; /* ★初期状態では画面の右側に隠しておく */
    width: 100%;
    height: 100vh; /* 画面の高ささいっぱいに広げる */
    background: rgba(0,0,0,0.95);
    z-index: 100;
    transition: right 0.5s; /* 0.5秒かけてスライドイン */
    padding-top: 80px;
}
.sp-nav ul {
    list-style: none;
    text-align: center;
    padding: 0;
}
.sp-nav li {
    margin-bottom: 25px;
}
.sp-nav a {
    font-size: 1.2rem;
}

/* --- メニューオープン時のスタイル --- */
/* JavaScriptでbodyに.menu-openクラスが付いた時の変化を指定します。 */

/* アイコンの1本目の線を傾けて移動させる */
.menu-open .sp-menu-btn span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
/* アイコンの2本目の線を透明にする */
.menu-open .sp-menu-btn span:nth-child(2) {
    opacity: 0;
}
/* アイコンの3本目の線を傾けて移動させ、×印を作る */
.menu-open .sp-menu-btn span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
/* 隠れていたメニューを画面内に表示する */
.menu-open .sp-nav {
    right: 0;
}


/* ===============================================
   メインビジュアル
   ページの顔となる一番最初の大きな画像セクションです。
=============================================== */
#hero {
    height: 100vh; /* 画面の高さいっぱいに広げる */
    /* 背景画像を指定し、中央に配置、画面サイズに合わせて調整、繰り返しなし */
    background: url('../images/sample1.jpg') center center/cover no-repeat;
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center;     /* 垂直方向の中央揃え */
    text-align: center;
    color: white;
}
.hero-text {
    background: rgba(0,0,0,0.5); /* 文字が読みやすいように、少し透けた黒い背景を敷く */
    padding: 40px;
    border-radius: 5px;
}
.hero-text h1 {
    font-family: var(--font-serif);
    font-size: 3rem;
    margin: 0 0 20px 0;
    line-height: 1.4;
}
.hero-text p {
    font-size: 1.1rem;
    margin: 0 0 30px 0;
}


/* ===============================================
   各セクションの共通設定
=============================================== */
main section {
    padding: 100px 0; /* 各セクションの上下に余白を設ける */
}

/* --- こだわりセクション --- */
.concept-grid {
    display: grid; /* グリッドレイアウトを適用 */
    grid-template-columns: repeat(3, 1fr); /* 均等な3つの列を作成 */
    gap: 30px; /* 列と行の間の隙間 */
}
.concept-item {
    text-align: center;
}
.concept-item h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin: 15px 0 10px 0;
}

/* --- お品書きセクション --- */
#menu {
    background: #1a1a1a; /* 少し明るい背景色 */
}
.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列のグリッド */
    gap: 30px;
}
.menu-item {
    background: var(--dark-bg);
    border-radius: 5px;
    overflow: hidden; /* はみ出した画像を角丸に合わせて切り取る */
}
.menu-item img {
    width: 100%;
}
.menu-item h3, .menu-item p, .menu-item span {
    padding: 0 20px; /* テキスト要素に左右の余白を追加 */
}
.menu-item h3 {
    font-size: 1.4rem;
    margin: 20px 0 10px 0;
}
.menu-item p {
    font-size: 0.9rem;
    color: #aaa;
}
.menu-item span {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-color);
    text-align: right; /* 右揃え */
    padding-bottom: 20px;
}

/* --- アクセスセクション --- */
.access-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2つの均等な列を作成 */
    gap: 40px;
    align-items: center; /* 上下中央揃え */
}
.access-map iframe {
    width: 100%;
    height: 350px;
    border: none; /* Googleマップの枠線を消す */
}
.access-info p {
    margin: 0 0 15px 0;
}


/* ===============================================
   予約ページ
   入力フォームに関するスタイルです。
=============================================== */
#reservation {
    padding-top: 150px; /* ヘッダーに隠れないように上部に大きな余白 */
}
.reservation-lead {
    text-align: center;
    margin-bottom: 40px;
}
.reservation-form {
    max-width: 700px; /* フォームが横に広がりすぎないように */
    margin: 0 auto;
}
.form-group {
    margin-bottom: 25px; /* 各入力項目ごとの下の余白 */
}
.form-group label {
    display: block; /* ラベルをブロック要素にして改行させる */
    margin-bottom: 8px;
}
/* 「必須」マークのスタイル */
.form-group label span {
    background: #c0392b;
    color: white;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
}
/* 入力欄（input, textarea）のスタイル */
.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px;
    background: #2c2c2c;
    border: 1px solid #555;
    border-radius: 5px;
    color: white;
    font-size: 1rem;
}


/* ===============================================
   フッター
   サイトの一番下の部分です。
=============================================== */
.footer {
    background: #000;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
    color: #777;
}


/* ===============================================
   レスポンシブ対応
   画面幅が768px以下（タブレットやスマホ）の場合に適用するスタイルです。
=============================================== */
@media (max-width: 768px) {
    h2 { font-size: 2rem; }

    /* --- ヘッダー --- */
    .pc-nav, .pc-btn { display: none; } /* PC用メニューを隠す */
    .sp-menu-btn { display: block; }    /* スマホ用メニューボタンを表示 */
    
    /* --- メインビジュアル --- */
    .hero-text h1 { font-size: 2.2rem; }
    .hero-text { padding: 25px; }

    /* --- こだわり・お品書き --- */
    .concept-grid, .menu-grid {
        grid-template-columns: 1fr; /* 3列だったものを1列に変更 */
    }

    /* --- アクセス --- */
    .access-grid {
        grid-template-columns: 1fr; /* 2列だったものを1列に変更 */
    }
}

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

.sister-cta-section {
    background-color: #696969; /* 薄い背景色 */
    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です。)  ▲▲▲▲▲ */