/* -------- リセットCSS -------- */
/* -------- リセットCSS & 基本設定 -------- */
body, menu, div, p, h1, h2, h3, header, section, footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'TsunagiGothic';
    src: url('fonts/TsunagiGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: rgb(243, 231, 220); /* 元のベージュ */
    font-family: 'TsunagiGothic', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: rgb(54, 43, 22); /* 文字色を深い茶色に統一して高級感を出す */
}

/* -------- ヘッダー（横幅いっぱい＆洗練されたデザイン） -------- */
header {
    background-color: rgb(185, 169, 156); /* 元のグレーブラウン */
    width: 100%;
}
.header {
    background-color: antiquewhite; /* 元のアンティークホワイト */
    max-width: 800px; /* 500pxから800pxに広げてゆったりと */
    margin: 0 auto;
    padding: 25px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-bottom: 3px solid rgb(112, 101, 92);
}
.header img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* -------- メニュー（押しやすい立体的なボタンに） -------- */
menu {
    background-color: rgb(112, 101, 92);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
}
.menu {
    background-color: rgb(99, 185, 235); /* 元のブルー */
    max-width: 800px;
    margin: 0 auto;
    display: flex;
}
.menu a {
    display: block;
    background-color: rgb(54, 43, 22); /* 元の深い焦げ茶 */
    color: white;
    text-decoration: none;
    padding: 14px 10px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.3s ease;
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.menu a:last-child {
    border-right: none;
}
.menu a:hover {
    background-color: rgb(126, 117, 102); /* 元のホバーカラー */
    padding-top: 12px;
    padding-bottom: 16px; /* 踏んだような少し沈むアニメーション */
}

/* -------- コンテンツ全体のレイアウト（最大800pxまで広げて優雅に） -------- */
.content-section {
    background-color: rgb(134, 128, 114);
    width: 100%;
    padding: 30px 10px;
}
.content {
    background-color: rgb(134, 128, 114);
    max-width: 800px;
    margin: 0 auto;
}

/* 本文を包むメインの白い箱（余白を美しく広げました） */
.honmon {
    background-color: antiquewhite;
    border-radius: 20px;
    padding: 35px 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    margin-bottom: 25px;
}

/* 見出し */
h2.mt0, .section-title {
    color: antiquewhite !important;
    font-size: 1.5rem;
    text-align: center;
    margin: 35px 0 15px 0 !important;
    letter-spacing: 1px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
h2.mt0 {
    margin-top: 0 !important;
}

/* -------- 【豪華トップ用】特大ヒーロー画像エリア -------- */
.hero-box {
    width: 100%;
    position: relative;
    margin-bottom: 30px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.hero-img-main {
    width: 100%;
    height: 400px; /* パソコンで見栄えがする高さに拡張 */
    object-fit: cover;
    display: block;
}
.hero-catch {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(54, 43, 22, 0.8);
    color: antiquewhite;
    margin: 0 !important;
    padding: 20px;
    font-size: 1.3rem !important;
    text-align: center;
    backdrop-filter: blur(3px); /* 背景をほんのりボカす高級感演出 */
}

/* 機嫌カウンター */
.news-box {
    text-align: center;
}
.news-badge {
    background-color: rgb(112, 101, 92);
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 12px;
}
.counter-display {
    font-size: 1.6rem;
    font-weight: bold;
    color: rgb(54, 43, 22);
    margin-bottom: 12px;
}

/* 今日の一枚 */
.highlight-photo-box {
    max-width: 450px;
    margin: 0 auto 30px auto;
    text-align: center;
}

/* ショート動画サムネイル3連（横並び＆スマホ時は縦並びに自動切り替え） */
.thumb-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 自動レスポンシブ */
    gap: 20px;
}
.thumb-card {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.thumb-card:hover {
    transform: translateY(-5px);
}
.thumb-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
}
.thumb-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(54, 43, 22, 0.8);
    color: antiquewhite;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    padding-left: 3px;
}

/* -------- 【1ページ目：プロフィール】デザインブラッシュアップ -------- */
.profile-photo {
    text-align: center;
    margin-bottom: 25px;
}
.profile-img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgb(112, 101, 92);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
.profile-card {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 15px;
    padding: 15px 25px;
}
.profile-row {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px dashed rgb(185, 169, 156);
}
.profile-row:last-child {
    border-bottom: none;
}
.profile-label {
    font-weight: bold;
    color: rgb(54, 43, 22);
    width: 140px;
    flex-shrink: 0;
}

/* -------- 【2ページ目：ギャラリー】並びを美しく調整 -------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* スマホとPCで自動最適化 */
    gap: 20px;
}
.gallery-card {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.gallery-img-wrapper {
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 1 / 1;
}

/* -------- 【3ページ目：ムービー】プレイヤーを画面中央に綺麗に固定 -------- */
.video-container {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 25px;
    margin: 0 auto;
    max-width: 340px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.video-wrapper {
    overflow: hidden;
    border-radius: 15px;
    background-color: #000;
    aspect-ratio: 9 / 16;
}

/* -------- 【4ページ目：お気に入り】横長リストをスタイリッシュに -------- */
.fav-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.fav-item-card {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    gap: 20px;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.fav-img-wrapper {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 12px;
}
.fav-tag {
    background-color: rgb(112, 101, 92);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 6px;
}

/* -------- フッター設定 -------- */
.site-footer {
    text-align: center;
    margin-top: 50px;
    padding-top: 25px;
    border-top: 2px dashed rgb(112, 101, 92);
    color: rgb(54, 43, 22);
}
/* --- ビデオ本体のサイズを枠にピタッと合わせる設定 --- */
.short-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦長動画が隙間なく綺麗に収まります */
    display: block;
}

/* 今日の一枚（.gallery-img）の画像を枠の幅に合わせる設定 */
.gallery-img {
    width: 100%;    /* 枠の幅いっぱいに広げる */
    height: auto;   /* 縦横比を保って自動で高さを調整 */
}
/* お気に入りページの画像を枠内に固定する */
.fav-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠の形に合わせて綺麗にトリミング */
}

/* 画像を囲む枠自体のサイズも崩れないように固定 */
.fav-img-wrapper {
    width: 120px;     /* お好みの横幅に調整OK */
    height: 120px;    /* お好みの高さに調整OK */
    overflow: hidden; /* はみ出た部分をカット */
    flex-shrink: 0;   /* カード内で潰れるのを防ぐ */
}

/* カードにカーソルを乗せた時の動き */
.gallery-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* モーダル背景（暗くするやつ） */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px); /* 背景を少しぼかすおしゃれ加工 */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
.modal-overlay.active {
    display: flex;
}

/* ポップアップカード本体 */
.modal-content {
    background: #fffdf9;
    border: 3px solid #f3e5d8;
    border-radius: 20px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popUp {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 閉じるボタン */
.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #e8d5c4;
    color: #5d4037;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
}

/* アルバムタイトル */
.modal-title {
    text-align: center;
    color: #5d4037;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* ポップアップ内の写真配置（ポラロイド・フォトカード風） */
.modal-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1px));
    gap: 12px;
    justify-content: center;
}

.modal-photo {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 12px;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.modal-photo:hover {
    transform: scale(1.05) rotate(1deg);
}
/* ギャラリーカード全体のレイアウト */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* カード1枚ずつの枠 */
.gallery-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.gallery-card:hover {
    transform: translateY(-4px);
}

/* ★画像が巨大化・拡大するのを防ぐ設定★ */
.gallery-img-wrapper {
    width: 100%;
    height: 200px; /* カード内の画像の高さを固定 */
    overflow: hidden;
    border-radius: 12px;
    background-color: #f8f8f8;
}

.gallery-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせて綺麗に収める */
    display: block;
}

/* キャプション（画像下のテキスト） */
.gallery-caption {
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 4px;
    color: #4a3b32;
}
/* 今日の一枚の画像を枠内に綺麗に納める修正 */
.highlight-photo-box {
    overflow: hidden; /* 枠外へのはみ出しを防止 */
}

.highlight-photo-box img,
.highlight-img {
    width: 100% !important;     /* 枠の幅いっぱいに収める */
    height: auto !important;    /* 縦横比を崩さず自動調整 */
    max-height: 450px !important;/* 大きくなりすぎるのを防止 */
    object-fit: contain !important; /* 切れないように全体表示 */
    display: block;
    margin: 0 auto 15px auto;
    border-radius: 12px;
}

/* ==========================================
   パンちゃん写真館（正方形・角丸・切れない完璧設定）
   ========================================== */

/* カード枠：きれいな正方形（1:1）で統一 */
.gallery-img-wrapper {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;    /* 常に正方形 */
    border-radius: 16px !important;    /* 枠自体をまるくする */
    overflow: hidden !important;        /* はみ出た角をしっかりカット */
    background-color: #f8f8f8 !important; /* 隙間ができた時のおしゃれな背景 */
    display: block !important;
}

/* 写真本体：枠いっぱいに広げて中央配置 */
.gallery-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;        /* 枠いっぱいに美しくフィット */
    object-position: center 30% !important; /* パンちゃんのお顔を中心に！ */
    border-radius: 16px !important;
    display: block !important;
}