@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.1.0
*/

/* --- ギャラリー専用の全幅設定 --- */
.single-gallery_cpt #content,
.single-gallery_cpt #main,
.single-gallery_cpt .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: #fcfaf7 !important; /* 柔らかいオフホワイト */
}

/* Cocoonの不要な要素（サイドバーやタイトル）を非表示にする */
.single-gallery_cpt .sidebar,
.single-gallery_cpt .breadcrumb,
.single-gallery_cpt .sns-share,
.single-gallery_cpt .author-info,
.single-gallery_cpt .entry-title {
    display: none !important;
}

/* --- ヒーローエリア --- */
.gallery-hero {
    height: 100vh; /* 画面一杯に表示 */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25); /* 画像を見やすくする薄い膜 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-content {
    text-align: center;
    z-index: 2;
}

.hero-cat {
    letter-spacing: 0.3em;
    font-size: 0.8rem;
    margin-bottom: 20px;
}

.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5rem;
    font-weight: 300;
    margin: 0;
    letter-spacing: 0.1em;
}

.hero-client {
    margin-top: 15px;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    font-weight: 300;
}

/* --- ボタンデザイン --- */
.btn-pixie-gold {
    margin-top: 40px;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 15px 45px;
    letter-spacing: 0.3em;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.5s ease;
    text-transform: uppercase;
}

.btn-pixie-gold:hover {
    background: #fff;
    color: #333;
}

/* --- メインコンテンツ領域 --- */
.gallery-main-container {
    max-width: 1400px; /* 少し広めにとって開放感を出す */
    margin: 0 auto;
    padding: 80px 20px;
}

.gallery-intro {
    text-align: center;
    margin-bottom: 80px;
    font-family: 'Cormorant Garamond', serif;
}

.ornament {
    color: #d4af37; /* ゴールド系 */
    margin-bottom: 20px;
}

.intro-text {
    font-size: 1.2rem;
    line-height: 2;
    color: #555;
    font-weight: 300;
}

/* --- フォトグリッド（Masonry風） --- */
.photo-grid {
    column-count: 3;
    column-gap: 15px;
}

.grid-item {
    break-inside: avoid;
    margin-bottom: 15px;
    overflow: hidden;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

.grid-item:hover img {
    transform: scale(1.05);
}

/* --- フッター --- */
.gallery-footer {
    padding: 100px 0;
    text-align: center;
    border-top: 1px solid #eee;
    margin-top: 80px;
}

.footer-thanks {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-style: italic;
    color: #777;
}

/* --- アニメーション効果（Reveal） --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- パスワード画面の特別装飾 --- */
.gallery-login-wrapper {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfaf7;
}

.login-box {
    text-align: center;
    max-width: 400px;
}

.post-password-form input[type="password"] {
    display: block;
    width: 100%;
    margin: 20px 0;
    padding: 12px;
    border: none;
    border-bottom: 1px solid #333;
    background: transparent;
    text-align: center;
}

.post-password-form input[type="submit"] {
    background: #333;
    color: #fff;
    border: none;
    padding: 10px 30px;
    letter-spacing: 0.2em;
    cursor: pointer;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) { .photo-grid { column-count: 2; } }
@media screen and (max-width: 600px) { 
    .photo-grid { column-count: 1; }
    .hero-title { font-size: 2.2rem; }
}

/* --- フロントページ専用スタイル（精査済み） --- */

/* Cocoonの標準余白をリセットして全幅デザインを保証 */
.home.single-gallery_cpt #content,
.home.single-gallery_cpt #main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.front-gallery-index {
    background-color: #fcfaf7;
    overflow-x: hidden; /* スマホでの横揺れ防止 */
}

/* ヒーローエリアのブラッシュアップ */
.front-hero {
    height: 70vh; /* 60より少し高くして開放感をアップ */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
    padding: 0 20px;
    border-bottom: 1px solid #eee; /* 境界をさりげなく強調 */
}

.site-logo-elegant {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 8vw, 3.5rem); /* 画面幅に合わせて自動リサイズ */
    font-weight: 300;
    letter-spacing: 0.25em;
    margin-bottom: 15px;
    color: #333;
}

.site-tagline {
    font-size: 0.75rem;
    letter-spacing: 0.5em; /* より広くして高級感を出す */
    color: #999;
    text-transform: uppercase;
    margin-left: 0.5em; /* センター揃えの微調整 */
}

/* スクロールを促すアニメーション */
.scroll-down-hint {
    margin-top: 50px;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    color: #bbb;
    position: relative;
    padding-bottom: 40px;
}
.scroll-down-hint::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 30px;
    background: #ddd;
}

/* --- アーカイブコンテナ --- */
.archive-container {
    max-width: 1300px; /* 少し広げてモダンに */
    margin: 0 auto;
    padding: 120px 40px;
}

.section-title {
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    margin-bottom: 80px;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: #444;
}

/* --- カードグリッド（2カラム固定から柔軟なレスポンシブへ） --- */
.gallery-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); /* 画面幅に応じて調整 */
    gap: 60px 40px; /* 縦の余白を広めにとってタイトルを読みやすく */
}

.gallery-card {
    position: relative;
    text-decoration: none !important;
}

.card-image-wrapper {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f0f0f0;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.15); /* 暗くしすぎず、高級感を維持 */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.6s ease;
}

.view-gallery {
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 30px;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    backdrop-filter: blur(2px); /* 背景を少しぼかして今っぽく */
}

/* ホバー演出を滑らかに */
.gallery-card:hover .card-image-wrapper img { transform: scale(1.04); }
.gallery-card:hover .card-overlay { opacity: 1; }

.card-info {
    margin-top: 25px;
    text-align: center; /* タイトルも中央揃えにするとよりギャラリーらしい */
}

.card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    margin: 0;
    font-weight: 400;
    color: #333;
    letter-spacing: 0.05em;
}

.card-date {
	
	/* ロゴのクリック（トップページへの導線）を無効化 */
.site-name-text a,
.site-logo-image a,
.hero-title-link a {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
}

/* もしモバイルフッターにホームが残ってしまった場合の強制非表示 */
.mobile-footer-menu-items .menu-item-home,
.mobile-footer-menu-items .fa-home {
    display: none !important;
}

/* 検索ボタン等の不要な要素も非表示 */
.mobile-footer-menu-items .menu-item-search,
.mobile-footer-menu-items .fa-search {
    display: none !important;
}