@charset "UTF-8";

/* --- 変数定義 --- */
:root {
    --primary-color: #0F2C25; /* 深い緑 */
    --accent-color: #C5A059;  /* 落ち着いたゴールド */
    --text-color: #333;
    --bg-color: #F9F9F9;
    --white: #ffffff;
    --gray-light: #f4f4f4;
}

/* --- 基本設定 --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    cursor: none; /* デフォルトカーソル削除 */
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: none;
    transition: 0.3s;
}

ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; display: block; }

/* --- カスタムカーソル --- */
.cursor, .cursor-follower {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
    border-radius: 50%; transform: translate(-50%, -50%);
    transition: transform 0.1s, opacity 0.2s;
}
.cursor { width: 8px; height: 8px; background-color: var(--primary-color); }
.cursor-follower {
    width: 40px; height: 40px;
    background-color: rgba(15, 44, 37, 0.1);
    border: 1px solid var(--primary-color);
    transition: transform 0.15s ease-out, top 0.1s, left 0.1s;
}
a:hover ~ .cursor-follower, .cursor-follower.active {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: rgba(197, 160, 89, 0.2);
    border-color: var(--accent-color);
}
/* --- 暗い背景の上でのカーソルスタイル --- */
.cursor.on-dark {
    background-color: var(--accent-color); /* ゴールドに変更（または白 var(--white) でも可） */
    transform: translate(-50%, -50%) scale(1.5); /* 少し大きくして見やすく */
}

.cursor-follower.on-dark {
    border-color: var(--accent-color); /* ゴールドの枠線 */
    background-color: rgba(197, 160, 89, 0.2); /* 薄いゴールド背景 */
}

.cursor-follower.on-dark.active {
    background-color: rgba(197, 160, 89, 0.4);
    transform: translate(-50%, -50%) scale(1.8);
}

/* --- ヘッダー --- */
.header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 50px; position: fixed; width: 100%; top: 0; z-index: 100;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    box-sizing: border-box;
}
.logo {
    font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 0.1em;
    font-size: 1.5rem; color: var(--primary-color); margin: 0;
}
.logo img {width:180px;}
.nav ul { display: flex; gap: 30px; }
.nav a {
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.2rem;
    position: relative;
}
.nav a::after {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px;
    background: var(--accent-color); transition: 0.3s;
}
.nav a:hover::after { width: 100%; }

/* --- ハンバーガーメニュー --- */
.hamburger { display: none; cursor: none; width: 30px; height: 20px; position: relative; z-index: 200; }
.hamburger span {
    display: block; width: 100%; height: 2px; background-color: var(--primary-color);
    position: absolute; transition: 0.3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }

@media (max-width: 768px) {
    .header { padding: 15px 20px; }
    .hamburger { display: block; }
    .nav {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background-color: var(--primary-color);
        display: flex; justify-content: center; align-items: center;
        z-index: 150; opacity: 0; visibility: hidden; transition: 0.4s;
    }
    .nav.active { opacity: 1; visibility: visible; }
    .nav ul { flex-direction: column; gap: 30px; text-align: center; }
    .nav a { color: var(--white); font-size: 1.5rem; }
    
    .hamburger.active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); background-color: var(--white); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); background-color: var(--white); }
}

/* ローディングオーバーレイの基本設定 */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* サイトの背景色に合わせる (例: ポートフォリオは黒系、旅は白系) */
    background-color: #fff; 
    z-index: 99999; /* 最前面に配置 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}
/* 読み込み完了時のスタイル */
#loading-overlay.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* クリックを透過させる */
}
.loading-content {
    text-align: center;
}
.loading-text {
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif; /* サイトのフォントに合わせる */
    font-weight: 600;
    letter-spacing: 0.1em;
    /* テキスト色もサイトに合わせる */
    color: #333;
}
/* オーバーレイの背景色をダーク系に（サイトに合わせて調整） */
#loading-overlay {
    background-color: #1a1a1a; /* ダーク背景 */
}
#loading-overlay .loading-text {
    color: #fff; /* 白テキスト */
}
/* ローダー本体 */
.portfolio-loader {
    width: 80px;
    height: 80px;
    position: relative;
    margin: 0 auto;
}
.cube-box {
    width: 100%;
    height: 100%;
    position: relative;
    animation: rotateBox 2s infinite linear;
}
/* 4つの正方形 */
.cube {
    width: 25px;
    height: 25px;
    background-color: transparent;
    border: 3px solid #4e73df; /* アクセントカラー (青) */
    position: absolute;
    top: 0;
    left: 0;
    animation: cubeBuild 2s infinite ease-in-out;
}
/* それぞれの位置とタイミングをずらす */
.cube:nth-child(1) { animation-delay: 0.0s; }
.cube:nth-child(2) { left: 30px; animation-delay: 0.2s; border-color: #fff; /* 2つ目は白 */ }
.cube:nth-child(3) { top: 30px; animation-delay: 0.4s; }
.cube:nth-child(4) { top: 30px; left: 30px; animation-delay: 0.6s; border-color: #fff; /* 4つ目は白 */ }
.percent-text {
    font-family: 'Montserrat', sans-serif; /* 英語フォント */
    font-size: 1.5rem;
    font-weight: 700;
    color: #4e73df; /* アクセントカラー（青） */
    margin-top: 20px;
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}
/* 下のLoading...テキスト */
.loading-text {
    font-size: 0.9rem;
    color: #888; /* 少し控えめに */
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
/* 全体の回転アニメーション */
@keyframes rotateBox {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* 個々の四角形の構築アニメーション */
@keyframes cubeBuild {
    0% { transform: scale(0); opacity: 0; }
    30% { transform: scale(1); opacity: 1; }
    70% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* --- ヒーローセクション --- */
/* 1. 枠組みの設定 */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    overflow: hidden; /* はみ出し防止 */
    /* ここにあった background-image 関連は削除 */
}

/* 2. 背景画像（パララックス用） */
/* iPhoneでも拡大されないよう、擬似要素を fixed にします */
.hero::before {
    content: '';
    position: fixed; /* これがパララックスの正体 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* 画像設定をここに移動 */
    background-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=2000&auto=format&fit=crop'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2; /* 一番後ろへ */
    will-change: transform; /* スマホでの描画最適化 */
}

/* 3. 深緑のフィルター（オーバーレイ） */
/* 画像の上に重ねるフィルター */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 44, 37, 0.4); /* 深緑のフィルター */
    z-index: -1; /* 画像より前、文字より後ろ */
}

/* 4. 文字コンテンツ */
.hero-content { 
    position: relative; 
    z-index: 1; /* 最前面 */
}

/* フォント設定（変更なし） */
.hero h2 {
    font-family: 'Montserrat', sans-serif; 
    font-size: 3.5rem; 
    margin-bottom: 20px;
    letter-spacing: 0.05em; 
    line-height: 1.2;
}
.hero p { 
    font-family: 'Montserrat', sans-serif; 
    letter-spacing: 0.2em; 
    font-size: 1rem; 
    opacity: 0.9;
}

/* --- 【重要】ここを追加してください --- */
/* パララックス画像が透けないように、下のセクションには背景色が必要です */
body, .section {
    background-color: #fff; /* サイトの背景色に合わせて変更してください */
    position: relative;
    z-index: 10; /* 画像の上を滑るようにする */
}
.dark-bg {
    background-color: #1a1a1a; /* worksなどの暗い背景セクション用 */
}

/* --- 共通セクション --- */
.section { padding: 100px 5%; }
.container { max-width: 1000px; margin: 0 auto; }
.section-title {
    font-family: 'Montserrat', sans-serif; font-size: 2.5rem; text-align: center;
    margin-bottom: 60px; color: var(--primary-color); position: relative;
}
.section-title::after {
    content: ''; display: block; width: 60px; height: 3px;
    background-color: var(--accent-color); margin: 15px auto 0;
}
.dark-bg { background-color: var(--primary-color); color: var(--white); }
.dark-bg .section-title { color: var(--white); }
.center-text { text-align: center; }

/* --- About --- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-img img { width: 100%; border-radius: 4px; box-shadow: 15px 15px 0 var(--accent-color); }
.about-text p { line-height: 1.8; margin-bottom: 20px; }
.tags { display: flex; gap: 15px; color: var(--primary-color); font-weight: bold; font-family: 'Montserrat', sans-serif; }

/* --- Works (Swiper) --- */
.works-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 50px; }
.category-card {
    position: relative; height: 150px; border-radius: 8px; overflow: hidden;
    transition: 0.3s; opacity: 0.7; border: 2px solid transparent;
}
.category-card.active, .category-card:hover { transform: scale(1.05); opacity: 1; border-color: var(--accent-color); }
.category-card img { width: 100%; height: 100%; object-fit: cover; }
.cat-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 44, 37, 0.8); color: var(--white);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.works-display-area { min-height: 400px; position: relative; }
.hidden-swiper { display: none; }
.swiper { width: 100%; padding-bottom: 50px; animation: fadeInSlide 0.6s ease-out; }
@keyframes fadeInSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.swiper-slide { background: var(--white); color: var(--text-color); border-radius: 8px; overflow: hidden; }
.swiper-slide img { width: 100%; height: 220px; object-fit: cover; }
.slide-content { padding: 20px; }
.slide-content h4 { margin: 0 0 5px; font-size: 1.1rem; color: var(--primary-color); }
.slide-content p { margin: 0; font-size: 0.85rem; color: #666; font-family: 'Montserrat', sans-serif; }

.swiper-button-next, .swiper-button-prev {
    color: var(--accent-color); background-color: rgba(255,255,255,0.1);
    width: 50px; height: 50px; border-radius: 50%; transition: 0.3s;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: var(--accent-color); color: var(--primary-color);
}
.swiper-pagination-bullet-active { background: var(--accent-color); }

/* --- Blog List (Top & Archive) --- */
.blog-list { display: flex; flex-direction: column; gap: 0; }
.blog-item {
    display: flex; align-items: baseline;
    border-bottom: 1px solid #e0e0e0; transition: 0.3s;
}
.blog-item:hover { border-color: var(--accent-color); background: #fbfbfb; padding-left: 15px; }
.blog-item .date {
    font-family: 'Montserrat', sans-serif; font-size: 0.9rem; color: var(--accent-color);
    width: 140px; font-weight: 600;
}
.blog-item .title { font-weight: 700; font-size: 1.1rem; color: var(--primary-color); }
.blog-item .cat-label {
    font-size: 0.7rem; padding: 3px 8px; border: 1px solid var(--primary-color);
    border-radius: 20px; margin-left: 15px; color: var(--primary-color);
}

/* --- Blog Detail & Common Inner Page --- */
.page-header {
    background: var(--primary-color); color: var(--white);
    padding: 120px 0 60px; text-align: center;
}
.page-header h1 { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; margin: 0; }
.page-header p { color: var(--accent-color); margin-top: 10px; font-family: 'Montserrat', sans-serif; }

.post-content {
    background: var(--white); padding: 60px; border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-bottom: 60px;
}
.post-content h2 {
    font-size: 1.8rem; border-left: 5px solid var(--accent-color);
    padding-left: 15px; margin: 50px 0 20px; color: var(--primary-color);
}
.post-content h3 { font-size: 1.5rem; margin: 40px 0 15px; color: var(--primary-color); }
.post-content p { line-height: 1.8; margin-bottom: 30px; }
.post-content img { border-radius: 4px; margin: 30px auto; }

/* --- Contact Form --- */
.contact-form { max-width: 600px; margin: 0 auto; display: grid; gap: 20px; }
.form-group label {
    display: block; font-family: 'Montserrat', sans-serif; font-weight: bold;
    color: var(--white); margin-bottom: 8px;
}
.form-control {
    width: 100%; padding: 15px; border: none; background: rgba(255,255,255,0.9);
    border-radius: 4px; font-size: 1rem; box-sizing: border-box;
}
.form-control:focus { outline: 2px solid var(--accent-color); }

.btn-primary {
    display: inline-block; padding: 15px 50px;
    border: 1px solid var(--accent-color); color: var(--accent-color);
    font-family: 'Montserrat', sans-serif; font-weight: bold;
    background: transparent; transition: 0.3s; cursor: none;
}
.btn-primary:hover { background: var(--accent-color); color: var(--white); }

/* --- Blog Search & Filter --- */
.search-area {
    background: var(--gray-light); padding: 40px 0; border-bottom: 1px solid #ddd;
    margin-bottom: 60px;
}
.search-form { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
.search-input { padding: 10px 20px; border: 1px solid #ccc; width: 300px; }
.search-btn { background: var(--primary-color); color: #fff; border: none; padding: 10px 30px; }
.cat-pill {
    padding: 5px 15px; border: 1px solid var(--primary-color); color: var(--primary-color);
    border-radius: 20px; margin: 0 5px; font-size: 0.9rem; transition: 0.3s;
}
.cat-pill.active, .cat-pill:hover { background: var(--primary-color); color: #fff; }

/* --- Footer --- */
.footer {
    background: #0a1f1a; color: #888; text-align: center;
    padding: 30px; font-size: 0.8rem; border-top: 3px solid var(--accent-color);
}
.footer {
    background-color: #051410; /* 非常に深い緑（ほぼ黒） */
    color: #ccc;
    padding: 80px 0 20px;
    font-size: 0.9rem;
    position: relative;
    border-top: 4px solid var(--primary-color); /* アクセントライン */
}
.footer a {
    text-decoration: none;
    color: #ccc;
    transition: 0.3s;
}
.footer a:hover {
    color: var(--accent-color); /* ゴールド */
    padding-left: 5px; /* 右に少し動く */
}
/* グリッドレイアウト */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr; /* ロゴエリアを少し広く */
    gap: 40px;
    margin-bottom: 60px;
}
/* 1. ロゴエリア */
.footer-logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    color: var(--white);
    margin: 0 0 20px;
    letter-spacing: 0.1em;
}
.footer-desc {
    line-height: 1.8;
    font-size: 0.85rem;
    opacity: 0.7;
}
/* 2-3. ナビゲーションリスト */
.footer-title {
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: inline-block;
}
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav li {
    margin-bottom: 12px;
}
/* 4. Travelリンク (特別装飾) */
.travel-link {
    display: block;
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.3s;
}
.travel-link:hover {
    background: var(--primary-color);
    border-color: var(--accent-color);
    color: var(--white);
    padding-left: 15px; /* 通常のリンクの動きを打ち消し */
    transform: translateY(-3px); /* 浮き上がる */
}
.travel-link i {
    color: var(--accent-color);
    margin-right: 8px;
}
.travel-link .sub-text {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-top: 5px;
    margin-left: 24px; /* アイコン分ずらす */
}
.travel-link:hover .sub-text {
    color: #ccc;
}
/* コピーライトエリア */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    padding-top: 20px;
    font-size: 0.8rem;
    color: #666;
    font-family: 'Montserrat', sans-serif;
}
/* レスポンシブ対応 */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* 2カラムに */
    }
}
@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr; /* スマホは1カラム */
        gap: 40px;
    }
    .footer-brand {
        text-align: center;
    }
}

/* --- Animation Class --- */
.js-fade { opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1s; }
.js-fade.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; }
    .hero h2 { font-size: 2.2rem; }
    .works-categories { grid-template-columns: 1fr; }
    .swiper-button-next, .swiper-button-prev { display: none; }
    .post-content { padding: 30px 20px; }
}


/* --- Blog Detail Page Styles --- */
/* 1. ブログヒーローエリア (タイトル部分) */
.blog-hero {
    background-color: var(--primary-color); /* 深緑 */
    color: var(--white);
    padding: 120px 20px 80px; /* ヘッダー分を開ける */
    text-align: center;
    position: relative;
}

/* タイトル下の装飾線（Logic感） */
.blog-hero::after {
    content: '';
    display: block;
    width: 2px;
    height: 40px;
    background-color: var(--accent-color); /* ゴールド */
    margin: 30px auto 0;
}

.blog-meta {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.blog-title {
    font-size: 2rem;
    line-height: 1.4;
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
}

/* 2. 記事本文エリア */
.blog-container {
    max-width: 800px; /* 読みやすい幅に制限 */
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Summernote等のエディタから出力されるHTMLの整形 */
.post-content {
    line-height: 1.8;
    font-size: 1rem;
    color: var(--text-color);
}

.post-content h2 {
    font-size: 1.6rem;
    margin: 50px 0 20px;
    padding-left: 15px;
    border-left: 5px solid var(--accent-color); /* 左にゴールドの線 */
    color: var(--primary-color);
}

.post-content h3 {
    font-size: 1.3rem;
    margin: 40px 0 20px;
    font-weight: bold;
}

.post-content p {
    margin-bottom: 2em;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 20px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.post-content blockquote {
    background: #f4f4f4;
    border-left: 4px solid var(--primary-color);
    margin: 20px 0;
    padding: 20px;
    font-style: italic;
}

/* 戻るボタンエリア */
.blog-footer-actions {
    margin-top: 60px;
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 40px;
}

.btn-back {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid #ddd;
    color: #666;
    border-radius: 30px;
    transition: 0.3s;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}
.btn-back:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}


/* 3. 前後ナビゲーション (Previous / Next) */
.post-navigation {
    padding: 60px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.nav-grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.nav-item {
    flex: 1;
}

.nav-item.next {
    text-align: right;
}

.nav-item a {
    display: block;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    transition: 0.3s;
    background: rgba(255,255,255,0.05); /* わずかに明るく */
    color: var(--white);
    height: 100%; /* 高さ揃え */
    box-sizing: border-box;
}

.nav-item a:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--white);
}

.nav-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 5px;
}

.nav-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.empty-nav {
    display: none; /* 端の記事の場合は表示しない */
}

/* 4. パララックス要素の初期スタイル */
.parallax-scroll-low,
.parallax-scroll-high,
.parallax-text {
    will-change: transform; /* パフォーマンス最適化 */
    transition: transform 0.1s linear; /* カクつき防止 */
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .blog-title {
        font-size: 1.5rem;
    }
    .nav-grid {
        flex-direction: column;
        gap: 20px;
    }
    .nav-item.next {
        text-align: left; /* スマホでは左揃えに戻す */
    }
}


/* --- Works Detail Page Styles --- */
/* 1. ヒーローエリア (没入感のあるフルスクリーン気味のデザイン) */
.detail-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--white);
    text-align: center;
}

/* 背景画像（ぼかしを入れて文字を見やすく） */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(3px) brightness(0.6); /* 少し暗く、ぼかす */
    transform: scale(1.1); /* 端がぼけないように拡大 */
    z-index: 0;
}

.hero-container {
    position: relative;
    z-index: 2;
    padding-top: 60px; /* ヘッダー被り防止 */
}

.detail-cat {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    background: var(--accent-color);
    color: var(--white);
    padding: 5px 15px;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.detail-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    margin: 0 0 10px;
    font-weight: 700;
}

.detail-role {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 30px;
}

/* Visit Website Button */
.visit-btn {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid var(--white);
    color: var(--white);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s;
    border-radius: 50px;
}
.visit-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--white);
}

/* 2. コンテンツエリア */
.detail-content {
    background: var(--white);
}

.content-block {
    margin-bottom: 60px;
}

.block-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    color: var(--primary-color);
    border-left: 4px solid var(--accent-color);
    padding-left: 15px;
    margin-bottom: 25px;
}

.block-text {
    line-height: 2;
    color: #555;
    font-size: 1.05rem;
}

/* Tech Tags */
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tech-tag {
    background: #f4f4f4;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-color);
    border: 1px solid #ddd;
}

/* 3. ギャラリーエリア */
.detail-gallery {
    background-color: #f9f9f9;
}

.gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* 立体感 */
    border-radius: 4px;
}

.caption {
    text-align: center;
    margin-top: 15px;
    color: #888;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
}

/* 4. 戻るリンクエリア */
.back-link-area {
    padding: 40px 0 80px;
    text-align: center;
    background-color: #f9f9f9;
}

/* --- Indexのカード用追加スタイル --- */
.work-link {
    display: block;
    color: inherit;
    transition: opacity 0.3s;
}
.work-link:hover {
    opacity: 0.9;
}
/* 画像ホバー時の拡大演出 */
.img-wrapper {
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}
.swiper-slide img {
    transition: transform 0.5s ease;
}
.work-link:hover img {
    transform: scale(1.05); /* 画像が少しズームする */
}


/* SP対応 */
@media (max-width: 768px) {
    .detail-title { font-size: 2rem; }
    .detail-hero { height: 50vh; }
}



/* =========================================
   Works Detail : モックアップギャラリースタイル
   ========================================= */

/* セクション全体 */
.detail-gallery {
    /* 既存のスタイルを上書き */
    background-color: #f9f9f9; /* 既存と同じ背景色 */
    padding: 100px 5% 140px; /* 下部の重なりを考慮して少し広めに */
    overflow: hidden; /* 横にはみ出た部分を隠す */
}

/* コンテナ（既存のnarrowより少し広げても良いかもですが、一旦合わせます） */
.detail-gallery .container.narrow {
    max-width: 1000px; /* モックアップが映えるよう少し広めに調整 */
}

/* モックアップショーケースのコンテナ */
.mockup-showcase {
    position: relative;
    margin: 50px auto 0; /* タイトルとの間隔 */
}

/* 注意書きテキスト */
.mockup-notice {
    text-align: center;
    margin-bottom: 30px;
    font-size: 0.9rem;
    color: #888;
    font-family: 'Montserrat', sans-serif; /* 欧文フォント合わせ */
    letter-spacing: 0.05em;
}

/* --- デバイス枠とスクロール機構 --- */

/* デバイス画面の枠（共通） */
.mockup-device-frame {
    position: relative;
    width: 100%;
    background-color: #fff; /* 画像読み込み中の背景 */
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); /* よりリッチな影 */
    overflow: hidden; /* 角丸からはみ出た部分をカット */
}

/* PCのアスペクト比と枠線 */
.mockup-device-frame--pc {
    padding-top: 56.25%; /* 16:9 */
    border-radius: 8px;
    border: 1px solid #d1d5db; /* 少し温かみのあるグレー */
}

/* SPのアスペクト比と枠線 */
.mockup-device-frame--sp {
    padding-top: 180%; /* 縦長スマホ比率 */
    border-radius: 24px; /* 強めの角丸 */
    border: 6px solid var(--text-color); /* サイトの文字色に合わせた黒枠 */
}

/* 実際にスクロールする領域（絶対配置） */
.mockup-scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto; /* 縦スクロール有効 */
    -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
    scrollbar-width: thin; /* Firefox用細いスクロールバー */
    scrollbar-color: #ccc transparent;
}

/* 中身の長い画像 */
.mockup-scroll-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- スクロールバーの装飾 (Webkit) --- */
.mockup-scroll-container::-webkit-scrollbar {
    width: 6px;
}
.mockup-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
.mockup-scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}
.mockup-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.4);
}

/* --- レイアウト調整 --- */

/* SP版（デフォルト・モバイル表示） */
.mockup-showcase__sp {
    width: 80%;
    max-width: 300px; /* 大きくなりすぎないように */
    margin: -40px auto 0; /* PC画像に少し重ねる */
    position: relative;
    z-index: 2; /* PCより手前 */
}

/* PC版（デフォルト・モバイル表示） */
.mockup-showcase__pc {
    width: 100%;
    position: relative;
    z-index: 1;
}

/* --- レスポンシブ対応 (PC表示) --- */
@media (min-width: 768px) {
    .detail-gallery .section-title {
        margin-bottom: 80px;
    }

    /* 横並びレイアウト */
    .mockup-showcase {
        display: flex;
        align-items: flex-start; /* 上揃え */
        justify-content: center;
    }

    /* PC版配置 */
    .mockup-showcase__pc {
        width: 75%;
        margin-right: auto; /* 左寄せ */
    }

    /* SP版配置（絶対配置で重ねる） */
    .mockup-showcase__sp {
        width: 28%; /* 少しスマートに */
        max-width: none;
        margin: 0;
        position: absolute;
        right: 0; /* コンテナの右端に合わせる */
        bottom: -80px; /* 下にはみ出させる量 */
    }
}