@charset "UTF-8";
/*!
 * Author: (Passion-Creator)
 * License: MIT License
*/
/* ==============================================
   基本設定と変数
   Webサイト全体で使う「共通の部品」を定義する場所です。
   ここで色やフォントを決めておくと、後で一括で変更できて便利です。
============================================== */
:root {
    /* `--`で始まるものは「変数」です。サイトのテーマカラーなどを定義します。 */
    /* 本文で使うフォントを指定します。読みやすく、モダンな印象のゴシック体です。 */
    --font-body: 'Zen Kaku Gothic New', sans-serif;
    /* 見出しで使うフォントを指定します。上品で落ち着いた印象の明朝体です。 */
    --font-heading: 'Shippori Mincho', serif;
    
    /* 色の指定も変数に格納しておくと、サイト全体の配色変更が簡単になります。 */
    --color-text: #333333;      /* 基本の文字色 (可読性の高い濃いグレー) */
    --color-bg: #ffffff;        /* 基本の背景色 (白) */
    --color-accent: #b48c42;    /* アクセントカラー (上品なゴールド系) */
    --color-dark-bg: #1a1a1a;   /* 暗い背景色 (フッターなどで使用する黒に近い色) */

    /* サイトのコンテンツが表示される部分の最大幅を定義します。 */
    --container-width: 1200px;
}

/* html要素全体に適用する設定です。 */
html {
    /* ページ内リンク(例: `#top`など)をクリックした際に、滑らかにスクロールするようにします。 */
    scroll-behavior: smooth;
}

/* ==============================================
   基本スタイル
   サイト全体の基本的なデザインルール（土台）を決めます。
============================================== */
body {
    font-family: var(--font-body);      /* 上で定義した本文用フォントを適用 */
    color: var(--color-text);           /* 基本の文字色を適用 */
    background-color: var(--color-bg);  /* 基本の背景色を適用 */
    margin: 0;                          /* ブラウザが標準で持っている余白をなくす */
    font-size: 16px;                    /* サイト全体の基準となる文字サイズ */
    line-height: 1.7;                   /* 行の高さを文字サイズの1.7倍に設定し、行間を広げて読みやすくする */
}

/* .containerはコンテンツの幅を決め、中央に配置するための便利クラスです。 */
.container {
    width: 90%;                         /* PC以外のデバイスも考慮し、基本の幅を画面の90%に設定 */
    max-width: var(--container-width);  /* ただし、最大でも変数で定義した1200pxまでとする */
    margin: 0 auto;                     /* 上下の余白は0、左右の余白は自動(auto)にすることで中央揃えを実現 */
}

/* .sectionは各セクション共通のスタイルです。 */
.section {
    padding: 100px 0; /* 各セクションの上下に100pxの余白を持たせ、コンテンツ間のスペースを確保 */
}

/* .section-titleは各セクションのタイトル文字です。 */
.section-title {
    font-family: var(--font-heading); /* 上で定義した見出し用フォントを適用 */
    font-size: 2.2rem;                /* 文字サイズを基準(16px)の2.2倍に */
    font-weight: 700;                 /* 文字を太字にする */
    margin: 0 0 1rem 0;               /* 下にだけ少し(基準文字サイズの1倍)余白をとる */
    line-height: 1.4;                 /* 見出しの行の高さを少し詰めて、引き締まった印象に */
}

/* ==============================================
   ヘッダー
   ページ上部に固定表示されるメニューバーのデザインです。
============================================== */
.header {
    background-color: rgba(255, 255, 255, 0.85); /* 背景を少しだけ透けた白に */
    backdrop-filter: blur(8px);                  /* 背景に「すりガラス」効果を加え、モダンな印象に(対応ブラウザのみ) */
    position: sticky;                            /* スクロールしても画面上部にくっついてくるようにする */
    top: 0;                                      /* 画面の一番上に配置 */
    z-index: 100;                                /* 他の要素より手前に表示させるための重なり順の指定 */
    border-bottom: 1px solid #eee;               /* ヘッダーの下に薄い境界線を引いてコンテンツと区切る */
}
.header .container {
    display: flex;                      /* 子要素(ロゴとナビ)を横並びにする */
    justify-content: space-between;     /* 両端に配置する */
    align-items: center;                /* 垂直方向の中央に揃える */
    height: 80px;                       /* ヘッダーの高さを80pxに固定 */
}
.logo {
    font-family: var(--font-heading);   /* ロゴにも見出し用フォントを適用 */
    font-weight: 700;
    font-size: 1.8rem;
    text-decoration: none;              /* リンクの下線を消す */
    color: var(--color-text);
}
.nav ul {
    list-style: none; /* リストの先頭にある「・」を消す */
    margin: 0;
    padding: 0;
    display: flex;    /* ナビゲーション項目を横並びにする */
}
.nav li {
    margin-left: 40px; /* 各メニュー項目の左側に余白を作り、間隔を調整 */
}
.nav a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.1em;      /* 文字と文字の間隔を少し広げて、洗練された印象に */
    padding-bottom: 5px;        /* 下に引くアニメーション用の線のスペースを確保 */
    position: relative;         /* アニメーション用の線の基準位置とするため */
}

/* `::after`は、要素の直後に仮想的な要素を追加するCSSの機能です。ここではホバー時の下線に使います。 */
.nav a::after {
    content: '';                    /* 中身は空にするのがルール */
    position: absolute;             /* 親要素(.nav a)を基準に位置を決める */
    bottom: 0;                      /* 親要素の一番下に配置 */
    left: 50%;                      /* 親要素の左から50%の位置に配置 */
    width: 0;                       /* 初期状態では幅を0にして見えなくする */
    height: 1px;                    /* 線の太さを指定 */
    background: var(--color-accent);/* 線の色をアクセントカラーに */
    transition: all 0.4s;           /* 幅や位置の変化を0.4秒かけて滑らかにするアニメーション */
    transform: translateX(-50%);    /* 要素自体の幅の半分だけ左にずらし、中央から広がるように見せるテクニック */
}
/* マウスカーソルが乗った(hover)ときのスタイル */
.nav a:hover::after {
    width: 100%; /* 下線の幅を100%にして表示する */
}

/* ==============================================
   ヒーローセクション (トップページのメインビジュアル)
============================================== */
#hero {
    /* 背景画像の上に半透明の黒い膜(linear-gradient)を重ね、文字を読みやすくするテクニック */
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/sample1.jpg');
    background-size: cover;         /* 画像が常に要素全体を覆うように調整 */
    background-position: center;    /* 画像の中央が表示されるように調整 */
    background-attachment: fixed;   /* 背景画像を固定し、スクロール時に奥行きを感じさせるパララックス効果を生む */
    height: 90vh;                   /* 高さを画面の高さ(viewport height)の90%に設定 */
    display: flex;                  /* 子要素(テキスト)を中央に配置するためにflexboxを使う */
    justify-content: center;        /* 水平方向の中央揃え */
    align-items: center;            /* 垂直方向の中央揃え */
    color: #fff;                    /* 文字色を白に */
    text-align: center;
}
#hero h1 {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.1em;
}
#hero p {
    font-size: 1.2rem;
    letter-spacing: 0.2em; /* キャッチコピーの文字間をさらに広げて印象的に */
}

/* ==============================================
   コンセプトセクション
============================================== */
.concept-content {
    display: flex;          /* テキストと画像を横並びにする */
    align-items: center;    /* 上下中央揃え */
    gap: 5%;                /* 要素間の隙間を5%に設定 */
}
/* `flex: 1;` は、利用可能なスペースを分け合う比率を指定します。ここでは両方1なので均等になります。 */
.concept-text {
    flex: 1;
    padding-right: 5%; /* 画像との間に少し余白を設ける */
}
.concept-image {
    flex: 1;
}
.concept-image img {
    width: 100%;        /* 親要素の幅いっぱいに表示 */
    height: auto;       /* 高さは自動で調整し、画像の比率を保つ */
    display: block;     /* 画像の下にできることがある謎の隙間を消すためのおまじない */
}

/* ==============================================
   特集 (Feature) セクション
============================================== */
.bg-dark {
    background-color: var(--color-dark-bg); /* 背景色を暗い色に */
    color: #fff;                            /* 文字色を白に */
}
.feature-content {
    display: flex;
    align-items: center;
    gap: 5%;
}
.feature-image {
    flex: 1;
}
.feature-image img {
    width: 100%;
}
.feature-text {
    flex: 1;
    padding-left: 5%; /* 画像との間に少し余白を設ける */
}
.section-title-light {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: #fff;
    margin: 0 0 1rem 0;
}
.feature-text h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-accent); /* 文字色をアクセントカラーにして目立たせる */
    margin: 0 0 1rem 0;
}

/* 汎用的なボタンのスタイル */
.btn {
    display: inline-block;        /* widthやheight、paddingなどを有効にするため */
    background: transparent;      /* 背景を透明にする */
    color: #fff;
    border: 1px solid #fff;       /* 白い枠線をつける */
    padding: 12px 35px;           /* 内側の余白を上下左右に設定 */
    text-decoration: none;
    margin-top: 20px;
    transition: all 0.3s;         /* ホバー時の色の変化を0.3秒かけて滑らかに */
    letter-spacing: 0.1em;
}
.btn:hover {
    background: #fff;             /* ホバー時に背景を白に */
    color: var(--color-dark-bg);  /* 文字色を暗い色にする */
}

/* ==============================================
   メニューセクション
============================================== */
.menu-grid {
    display: grid;                                    /* CSS Gridレイアウトを使用 */
    grid-template-columns: repeat(3, 1fr);            /* 3つの均等な幅の列(カラム)を作成する */
    gap: 40px;                                        /* グリッドアイテム(カード)間の隙間を指定 */
}
.menu-card {
    background: #fff;
    overflow: hidden;                                 /* はみ出した要素(ホバーで拡大する画像など)を隠す */
    transition: box-shadow 0.4s;                      /* 影の変化を滑らかにする */
}
.menu-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);          /* ホバー時に影を付けて、カードが浮かび上がって見えるように演出 */
}
.menu-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;                                /* 画像の比率を保ったまま、指定した高さ・幅を完全に覆うように表示 */
    transition: transform 0.4s;                       /* 変形(拡大)のアニメーションを滑らかにする */
}
.menu-card:hover img {
    transform: scale(1.05); /* ホバー時に画像を1.05倍に少しだけ拡大し、動きを出す */
}
.menu-card-body {
    padding: 25px; /* カードのテキスト部分に余白を持たせる */
}
.menu-card-body h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin: 0 0 10px 0;
}

/* ==============================================
   アクセスセクション
============================================== */
.access-container {
    display: flex;
    align-items: center;
    gap: 5%;
}
.access-info {
    flex: 1;
}
.access-info .section-title {
    text-align: left; /* このセクションの見出しだけ特別に左揃えにする */
}
.map {
    flex: 1.2;              /* 地図のエリアをテキストより少しだけ広く取る */
    height: 400px;
}
.map iframe {
    width: 100%;
    height: 100%;
    border: none; /* Googleマップ埋め込み時に表示される枠線を消す */
}

/* ==============================================
   フッター
   ページの一番下に表示される部分のデザインです。
============================================== */
.footer {
    background-color: var(--color-dark-bg);
    color: #fff;
    padding: 60px 0;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.footer .logo {
    color: #fff; /* フッター内のロゴは白文字に */
}
.social-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.social-links li {
    margin-left: 20px;
}
.social-links a {
    color: #fff;
    font-size: 1.2rem;
    transition: color 0.3s;
}
.social-links a:hover {
    color: var(--color-accent); /* SNSアイコンはホバー時にアクセントカラーに */
}
.copyright {
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.7; /* 少しだけ透明にして、主張を弱める */
}

/* ==============================================
   アニメーション
   スクロールに応じて要素をふわっと表示させます。
============================================== */
/* .slide-inクラスは、アニメーションさせたい要素の「初期状態」を定義します。 */
.slide-in {
    opacity: 0;                       /* 最初は透明で見えない状態 */
    transform: translateY(50px);      /* 最初はY軸(垂直方向)に50px下にずらした状態 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 透明度と位置の変化を0.8秒で滑らかに(ease-outは最後に少し減速する動き) */
}
/* JavaScriptによって画面内に入ったら`.visible`クラスが追加され、この「最終状態」になります。 */
.slide-in.visible {
    opacity: 1;                       /* 透明度を100%にして表示 */
    transform: translateY(0);         /* Y軸の位置を元の場所に戻す */
}
/* アニメーションに遅延を設定: 2番目、3番目のメニューカードが少し遅れて表示されるようにします。 */
.menu-card:nth-child(2) {
    transition-delay: 0.2s; /* 2番目のカードは0.2秒遅れてアニメーション開始 */
}
.menu-card:nth-child(3) {
    transition-delay: 0.4s; /* 3番目のカードは0.4秒遅れてアニメーション開始 */
}

/* ==============================================
   ハンバーガーメニュー（スマホ用）
============================================== */
/* PC表示では非表示にします。 */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 150; /* メニュー本体より手前に表示 */
}
/* ハンバーガーアイコンの3本線 */
.hamburger-menu span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--color-text);
    margin: 6px 0;
    transition: transform 0.4s, opacity 0.4s; /* 変形と透明度の変化をアニメーションさせる */
}
/* JavaScriptで`.active`クラスが付いた時(クリック時)、「×」印に変形させます。 */
.hamburger-menu.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg); /* 1番目の線を下に移動して45度回転 */
}
.hamburger-menu.active span:nth-child(2) {
    opacity: 0; /* 2番目の線を透明にして見えなくする */
}
.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); /* 3番目の線を上に移動して-45度回転 */
}

/* ==============================================
   レスポンシブ対応
   画面幅が狭い（タブレットやスマホ）のときのデザインを調整します。
============================================== */
@media (max-width: 768px) {
    body {
        font-size: 15px; /* スマホでは少し文字を小さくする */
    }
    .section {
        padding: 60px 0; /* セクションの余白を少し狭くする */
    }
    .section-title {
        font-size: 1.8rem;
    }
    #hero h1 {
        font-size: 2.5rem; /* メインビジュアルの文字を小さく */
    }
    
    /* ハンバーガーメニューを表示状態にする */
    .hamburger-menu {
        display: block;
    }
    
    /* PC用のナビゲーションを画面外に隠し、スマホ用の全画面メニューとして設定 */
    .nav {
        position: fixed; /* 画面に固定 */
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh; /* 画面全体の高さ */
        background: var(--color-bg);
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateX(100%); /* 初期状態では画面の右側に隠しておく */
        transition: transform 0.4s;
    }
    /* JavaScriptで`.active`クラスが付いた時に、メニューを画面内に表示(transformを元に戻す) */
    .nav.active {
        transform: translateX(0);
    }
    
    /* ナビゲーションの項目を縦並びにする */
    .nav ul {
        flex-direction: column;
        text-align: center;
    }
    .nav li {
        margin: 25px 0; /* 上下の間隔を調整 */
    }
    .nav a {
        font-size: 1.1rem;
    }

    /* 横並びのレイアウト(`display:flex`)を縦並び(`flex-direction: column`)に変更 */
    .concept-content, .feature-content, .access-container {
        flex-direction: column;
    }
    .feature-content {
        flex-direction: column-reverse; /* 画像が上に来るように順番を逆にする */
    }
    .concept-text {
        padding: 0 0 30px 0; /* 画像との間に下余白を追加 */
    }
    .feature-text {
        padding: 30px 0 0 0; /* 画像との間に上余白を追加 */
    }
    
    /* メニューのグリッドを3列から1列にする */
    .menu-grid {
        grid-template-columns: 1fr;
    }
    
    .access-info {
        margin-bottom: 30px; /* 地図との間に余白を追加 */
    }
    .access-info .section-title {
        text-align: center; /* スマホでは見出しを中央揃えに戻す */
    }
}

/* ▼▼▼▼▼ 姉妹サイト誘導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; /* PC表示の際に、画像(flex:1)より広い幅を確保 */
}

.sister-cta-lead {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color, #e67e22); /* メインのテーマカラーがあればそれ、なければオレンジ色を適用 */
    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 を有効にするため */
    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です。)  ▲▲▲▲▲ */