/* 全体の基本設定 */
body {
    font-family: 'Zen Maru Gothic', sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #fffaf0;
}

/* ヘッダーのレイアウト */
header {
    background-color: #ffffff;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    font-weight: bold;
    font-size: 1.2rem;
    color: #ff8c00;
}

/* ナビゲーション（PC用） */
#main-nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

#main-nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 0.95rem;
}

/* スマホ用ハンバーガーボタンの設定 */
.mobile-menu-btn {
    display: none; /* PCでは隠す */
    background: #ff8c00; /* ボタン自体に色をつける */
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    position: relative;
}

/* 三本線のデザイン */
.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 10px;
    transition: 0.3s;
}

.mobile-menu-btn span:nth-child(1) { top: 14px; }
.mobile-menu-btn span:nth-child(2) { top: 21px; }
.mobile-menu-btn span:nth-child(3) { top: 28px; }

/* スマホ表示（画面幅が768px以下のとき） */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block; /* スマホでボタンを表示 */
    }

    #main-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 画面の外に隠す */
        width: 70%;
        height: 100vh;
        background-color: #fff;
        padding-top: 80px;
        transition: 0.4s;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }

    /* メニューが開いたとき */
    #main-nav.active {
        right: 0;
    }

    #main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
}


/* 特徴セクションのスタイル（賑やかさをプラス） */
#features {
    padding: 60px 20px;
    text-align: center;
    background-color: #fff;
}

#features h2 {
    color: #ff8c00;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

/* 文字の下に賑やかなラインを引く */
#features h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 5px;
    background: repeating-linear-gradient(45deg, #ff8c00, #ff8c00 5px, #ffeb3b 5px, #ffeb3b 10px);
}

.feature-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.feature-item {
    background: #fff;
    border: 3px solid #fecfef;
    border-radius: 20px;
    padding: 30px;
    width: 250px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* フォトギャラリー：LIFE DESIGN風のランダム感 */
#gallery {
    padding: 60px 5%;
    background-color: #fffaf0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.photo img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* 画像の比率を保ったまま切り抜き */
    border-radius: 15px;
    border: 5px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

/* マウスを乗せた時に少し傾く遊び心 */
.photo img:hover {
    transform: scale(1.05) rotate(2deg);
}

/* ロゴテキストに少しだけ色を付ける */
.logo-text {
    background: linear-gradient(transparent 60%, #ffeb3b 60%); /* 文字にマーカーを引いたようなデザイン */
}

/* 画像に「ポラロイド写真」のような枠をつける（ギャラリー用） */
.photo img {
    border: 8px solid #fff;
    transform: rotate(-2deg); /* 少し傾ける */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.photo:nth-child(even) img {
    transform: rotate(2deg); /* 偶数番目の画像は逆に傾ける */
}

/* 吹き出しの本体（しっぽの土台） */
.interview-bubble {
    position: relative;
    background: #fecfef; /* ピンクの色 */
    padding: 25px;
    border-radius: 20px;
    color: #333;
    line-height: 1.8;
    margin-left: 20px; /* しっぽのスペースを空ける */
}

/* 吹き出しの「しっぽ」を作る（三角形） */
.interview-bubble::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -20px; /* 吹き出しの左側に配置 */
    margin-top: -10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 20px solid #fecfef; /* 吹き出しと同じ色にする */
}

/* 写真のコンテナ（枠）の設定 */
.photo-container {
    overflow: hidden; /* 拡大した時に枠からはみ出さないようにする */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.5s ease; /* 動きをなめらかに */
}

/* 1. ページ読み込み時の動き（アニメーション） */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.photo-container img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease; /* マウスを乗せた時の動き用 */
    animation: fadeInUp 1.2s ease-out; /* 1.2秒かけて浮かび上がる */
}

/* 2. マウスを乗せた時にゆっくり拡大する */
.photo-container:hover img {
    transform: scale(1.08); /* 1.08倍に拡大 */
}

/* 最初に透明にして、少し下に下げておく設定 */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out; /* 0.8秒かけて動く */
}

/* 画面内に入った時に追加される「現れる」設定 */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- 共通ヘッダー・スマホメニュー設定 --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.logo a { display: flex; align-items: center; text-decoration: none; color: #333; font-weight: bold; }
.logo img { height: 40px; margin-right: 10px; }

#main-nav ul { display: flex; list-style: none; gap: 20px; margin: 0; align-items: center; }
#main-nav a { text-decoration: none; color: #333; font-size: 0.95rem; font-weight: bold; }
.nav-btn { background: #ff8c00; color: #fff !important; padding: 8px 20px; border-radius: 50px; }

/* ハンバーガーボタン形状 */
.menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px; height: 20px;
    background: none; border: none; cursor: pointer; z-index: 1100;
}
.menu-btn span { width: 100%; height: 3px; background: #333; border-radius: 10px; transition: 0.3s; }

/* スマホレイアウト (768px以下) */
@media (max-width: 768px) {
    .menu-btn { display: flex; }
    #main-nav {
        position: fixed; top: 0; right: -100%; width: 70%; height: 100vh;
        background: #fff; z-index: 1050; transition: 0.4s; padding-top: 80px;
    }
    #main-nav.active { right: 0; }
    #main-nav ul { flex-direction: column; gap: 30px; }
    .nav-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 1040; display: none;
    }
    .nav-overlay.active { display: block; }
    
    /* ボタンが×になるアニメーション */
    .menu-btn.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
    .menu-btn.active span:nth-child(2) { opacity: 0; }
    .menu-btn.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
}