/*
Theme Name: 旅の百景 カスタムテーマ
Author: Your Name
Description: 鉄道と自転車の風景写真用テーマ
Version: 1.0
*/

/* Google FontsからInterを読み込む */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

html {
    scroll-behavior: smooth;
}
/* 基本設定 */
body {
    background-color: #0a0a0a; /* 深い黒 */
    color: #e0e0e0; /* 少しグレーがかった白（目に優しい） */
    /* 1. まず英語を綺麗に見せるフォント*/
    /* 2. 次に、Windows/Macそれぞれの標準的な日本語フォントを明示 */
    font-family:  "Inter", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho","Noto Serif Japanese", serif;
    margin: 0;
    line-height: 1.8;
    overflow-x: hidden; /* 全体の横揺れ防止 */
    width: 100%; /* 全体の横揺れ防止 */
}

/* ヘッダー */
header {
    padding: 40px 20px;
    text-align: center;
}

header h1 {
    font-weight: 200;
    letter-spacing: 0.2em;
    font-size: 1.8rem;
}

nav ul {
    list-style: none;
    padding: 0;
    flex-wrap: wrap; /* 収まらない場合は折り返す */
    justify-content: center;
    gap: 15px 25px; /* 縦と横の間隔 */
    display: flex;
}

.nav-top a {
    text-decoration: none; /* 標準の下線を消す */
    border-bottom: 1px solid rgba(255, 255, 255, 0.6); /* 少し透過した白 */
    padding-bottom: 2px; /* 文字と線の距離 */
    transition: border-color 0.3s;
}

.nav-symbol {
    font-family: serif; /* 記号を綺麗に見せるためのフォント */
    font-weight: bold;
    margin: 0 5px;
    color: #fff; /* 記号だけパキッと白くする */
}

nav a {
    color: #999;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

nav a:hover {
    color: #fff;
}

/* ホバー時に記号を少し横に揺らす演出 */
.nav-previous a:hover .nav-symbol {
    display: inline-block;
    transform: translateX(-3px);
    transition: transform 0.2s;
}
.nav-next a:hover .nav-symbol {
    display: inline-block;
    transform: translateX(3px);
    transition: transform 0.2s;
}

/* タップした瞬間だけパッと明るく、または少し沈ませる */
.nav-links a:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
}

@media (max-width: 600px) {
    header {
        padding: 40px 10px;
    }
    
    header h1 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    header nav ul {
        gap: 10px 15px; /* スマホでは間隔を少し詰める */
        text-align: center;
    }
}


/* メインビジュアル */
.hero {
    height: 70vh;
    /* 1. ellipse をさらに大きく広げる (farthest-side) */
    /* 2. 中間地点(50%)に色を追加して変化を緩やかにする */
    /* 3. 100% ではなく 120% くらいまで描画して端を馴染ませる */
    background: radial-gradient(
        ellipse farthest-side at center, 
        #1a1a1a 0%, 
        #111111 50%, 
        #0a0a0a 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80px;
}


/* ヒーローセクションの底辺に配置 */
/* Scroll文字と線の塊 */
.scroll-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Scrollの文字 */
.scroll-text {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: #fff;
    opacity: 0.5;
    margin-bottom: 0px;
    text-transform: none; /* Sのみ大文字 */
    display: block;
}

/* アニメーション用コンテナ */
.scroll-line-animation {
    position: relative;
    width: 30px; 
    height: 250px; 
    margin: 0 auto;
    overflow: hidden;
}

/* 縦線 */
.scroll-line-animation::before {
    content: '';
    position: absolute;
    /*top: -155px; */
    bottom: 100px;
    left: 50%;
    width: 1px;
    height: 150px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    /* 一定の速度(linear)で動かす */
    animation: scroll-line-move 2.5s infinite linear;
}

/* カギ（ハネ）の部分 */
.scroll-line-animation::after {
    content: '';
    position: absolute;
    /*top: -155px; */
    bottom: 100px;
    left: 50%;
    width: 8px; 
    height: 1px;
    background: #fff;
    margin-top: 150px; /* 線の長さ分下にずらす */

    /* 基準点を左端に固定 */
    transform-origin: left center;
    /* アニメーション内でも常に斜め30度を維持させる */
    animation: scroll-hook-move 2.5s infinite linear;
}

/* 縦線用のアニメーション */
@keyframes scroll-line-move {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(200px); opacity: 0; }
}

/* ハネ用のアニメーション：常に rotate(-30deg) を含める */
@keyframes scroll-hook-move {
    0% { transform: translateY(0) rotate(-30deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(200px) rotate(-30deg); opacity: 0; }
}



/* --- タグラインの改行制御 --- */
/* 鉄路の音と…のところ */
/* 日本語・英語共通の基本設定 */
.tagline {
    font-size: 1.2rem;
    text-align: center; /* 中央揃えを確実に */
    opacity: 0.8;
    line-height: 2;/* 改行した時に行間が詰まらないように */
    margin-top: 15vh;
    margin-bottom: 15vh;
    display: block;
    width: 100%;
}

/* 日本語の時だけ適用 */
html:not(:lang(en)) .tagline {
    letter-spacing: 0.4em;
}

/* 英語（en）の時だけ適用 */
html:lang(en) .tagline {
    letter-spacing: 0.0em; /* 間隔を詰める */
    font-style: italic;
}


/* 600px以下のスマホ用調整 */
@media (max-width: 600px) {
    .tagline {
        /* 読点の分の余白を補正するために左側を少し増やす */
        /* 数値は 0.2em 〜 0.5em 程度で微調整してみてください */
        width: auto; /* 100%を解除 */
        padding-left: calc(20px + 0.3em); 
        padding-right: 20px;

        /* フォントサイズをスマホに合わせて最適化 */
        font-size: 1.1rem;
        line-height: 1.8;
    }
}

.tagline span {
    display: inline-block; /* 通常は横並び */
}

/* ギャラリーセクションの共通設定 */
.gallery-section {
    width: 100%;
    max-width: 1000px; /* PCでの最大幅 */
    margin: 0 auto 100px;
    padding: 0 20px; /* 左右に最低限の余白を作る */
    box-sizing: border-box; /* パディングを幅に含める */
}

.gallery-section h2 {
    border-left: 1px solid #fff;
    padding-left: 15px;
    font-weight: 300;
    margin-bottom: 40px;
}

.sub-title {
    font-size: 1.0rem;
    color: #a0a0a0;
    margin-left: 10px;
}

/* 写真配置 */
/* index.php の写真アイテム */

/* 写真の横幅を強制的に揃える */
.featured-photo {
    width: 100%;
    display: flex;
    justify-content: center;
}
.featured-photo .photo-item {
    max-width: 900px; /* 全体の横幅の限界 */
    width: 100%; /* 親要素（20px引いた幅）に合わせる */
    margin-bottom: 60px;
    margin: 0 auto 40px;
    text-align: center;
}

.featured-photo .photo-item img {
    /* 縦構図でも画面の 70% 程度に収まるように制限 */
    max-height: 70vh; 
    width: 100%;      /* 横幅は比率を保って自動調整 */
    height: auto;
    object-fit: contain;
    box-shadow: 0 20px 50px rgba(0,0,0,0.7); /* 重厚感のある影 */
    transition: transform 0.5s ease;
}

.featured-photo .photo-item img:hover {
    transform: scale(1.02); /* わずかに浮かび上がる演出 */
    filter: grayscale(0%);
}

/* 写真下のキャプション（タイトル） */
.featured-photo .photo-item a {
    display: block;      /* 必ず改行して写真の下に来るようにする */
    text-decoration: none !important; /* 全ての装飾をリセット */
}

.featured-photo .caption {
    display:block;      /* 必ず改行して写真の下に来るようにする */
    font-family: "Lora", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho","Noto Serif Japanese", serif;
    font-size: 1.1rem;
    color: #dddddd; /* 真っ白より少し落ち着いた色 */
    margin-top: 20px;
    letter-spacing: 0.15em;
    padding-bottom: 5px;
    position: relative;
    border: none; /* デフォルトの下線を消す */
}

/* View Archive と同じようにおしゃれな下線アニメーション */
.featured-photo .caption::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: #ffffff;
    transition: all 0.4s ease;
    transform: translateX(-50%);
}

.featured-photo .photo-item a:hover .caption {
    color: #ffffff;
}

.featured-photo .photo-item a:hover .caption::after {
    width: 50%; /* ホバーした時だけ中央から線がスッと伸びる */
}

.single-post {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
}

.post-header {
    text-align: center;
    margin-bottom: -20px; /* 40pxから半分に */
    margin-top: -20px;    /* もし上も広ければ追加 */
}

.post-header h1 {
    font-family: "Lora", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho","Noto Serif Japanese", serif;
    margin: 0; /* h1が元々持っている大きな上下余白をゼロにする */
}

.post-image img {
    display: block;
    margin: 0 auto 40px; /* 中央寄せ */
    
    /* 横幅の制限：親要素（100%）より大きくならない */
    width: auto;
    max-width: 100%;
    
    /* 高さの制限：画面の高さの70%より大きくならない */
    height: auto;
    max-height: 70vh;
    
    /* 縦横比を維持しながら枠内に収める */
    object-fit: contain;
}

/* メタ情報（No, タグ, 日付）を一列に */
.post-meta-container {
    font-size: 0.8rem; /* かなり小さく */
    color: #666; /* 目立たないグレー */
    letter-spacing: 0.15em;
    text-transform: none;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    gap: 15px; /* 項目間の適度な距離 */
}

.post-content { 
    font-size: 1rem; 
    line-height: 2; 
    letter-spacing: 0.05em;
    text-align: justify; /* 文字の端を揃える */
}

/* Diary投稿内の画像余白と本文の修正 */
/* 「is-diary-post」というクラスがある時だけ適用 */
.is-diary-post .post-content img {
    margin: 60px auto;
    max-width: 100%;
    height: auto;
    display: block;
}

.is-diary-post .post-content p {
    margin-bottom: 2.5em;
    font-size: 0.95rem;
    line-height: 2;
}

/* Exif情報用 */
.exif-data {
    margin: -10px auto 50px;
    text-align: center;
    font-family: "Yu Mincho", serif;
    font-size: 0.8rem;
    color: #999;
    letter-spacing: 0.1em;
    line-height: 2; /* 改行した時の行間を確保 */
}

/* PC：横並び */
.exif-item {
    display: inline-block;
    /* 長いレンズ名が来ても崩れにくいよう、少し余裕を持たせる */
    max-width: 100%; 
    word-wrap: break-word;
}

.sep {
    margin: 0 15px;
    opacity: 0.4;
    display: inline-block;
}

/* レスポンシブ：画面が狭い場合 */
@media (max-width: 600px) {
    .exif-item {
        display: block; /* 強制的に改行 */
    }

    /* 機材名（3番目の要素など）だけを特定して調整 */
    .exif-item:last-child {
        display: block;
        white-space: nowrap; /* 1行を維持 */
        /* 機材名だけ、画面幅に合わせて少し小さくなるように調整 */
        font-size: clamp(10px, 3.2vw, 1.0em); 
        letter-spacing: 0.02em;
    }

    .exif-data {
        /* スマホでは項目が縦に並ぶので、カメラ＋レンズが長くても安心 */
        line-height: 1.6;
    }
    .sep {
        display: none; /* 「 | 」を非表示にする */
    }
}


/*アーカイブへ移動させるためのリンク*/
.view-archive-link {
    margin-top: 15px;
    text-align: right; /* 写真の右下に配置 */
}

.view-archive-link a {
    font-size: 0.75rem; /* 小さめの文字で品良く */
    color: #777;
    text-decoration: none;
    letter-spacing: 0.15em;
    transition: color 0.4s ease;
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
}

.view-archive-link a:hover {
    color: #ffffff;
    border-bottom: 1px solid #ffffff; /* ホバー時にスッと線が出る */
}


/* Previous/Nextの実装 */
.post-navigation {
    margin-top: 100px;
    padding: 30px 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333; /* 下線も入れると区切りが明確になります */
}

.nav-links {
    display: flex;
    justify-content: space-between; /* 均等に配置 */
    align-items: center;
}

.nav-previous, .nav-next, .nav-top {
    flex: 1; /* 幅を均等に持つ */
}

.nav-previous { text-align: left; }
.nav-top { text-align: center; }
.nav-next { text-align: right; }

.nav-links a {
    color: #888;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    transition: 0.3s;
    text-transform: uppercase; /* 小文字で書いても大文字にする（お好みで） */
}

.nav-links a:hover {
    color: #ffffff;
}


/* Aboutセクションのプレビュー */
.about-text {
    font-size: 0.95rem;
    line-height: 2.2;
    color: #ccc;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

/* Detailsボタンのデザイン */
.detail-button {
    display: inline-flex;
    padding: 12px 40px;
    border: 1px solid #444;
    color: #888;
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: none;
    transition: all 0.4s ease;
    justify-content: center;
}

.detail-button:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}
.detail-button-area {
    text-align: center;
    padding: 0px 20px;
}
/* スマホ対応 */
@media (max-width: 600px) {
    .about-text {
        font-size: 0.85rem;
        line-height: 2;
        padding: 0 10px;
    }
}

/* フッター */
.site-footer {
    padding: 60px 0 40px;
    text-align: center;
    border-top: 1px solid #222; /* 境界線を薄く入れる */
    margin-top: 100px;
}

.footer-content p {
    color: #555; /* 文字を暗くして目立たなくする */
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}


/* アーカイブ全体のレイアウト */
.archive-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

/* アーカイブヘッダー全体の余白 */
.archive-header {
    margin-bottom: 0px;
    text-align: center;
}

/* 1. 鉄路の轍（メイン） */
.archive-sub-title {
    font-size: 2.2rem;    /* さらに少し大きくして存在感を出す */
    font-weight: 400;
    color: #ffffff;
    margin: 0 0 15px 0;    /* 下に少し隙間を作る */

}

/* 日本語の時だけ適用 */
html:not(:lang(en)) .archive-sub-title {
    letter-spacing: 0.5em;
    text-indent: 0.5em;    /* 中央揃えを維持するための調整 */
}


/* 2. #railway（サブ） */
.archive-cat-name {
    font-size: 1.1rem;     /* 前回より少し大きく調整 */
    color: #888;          /* 少し明るめのグレーにして読みやすく */
    letter-spacing: 0.2em;
    text-transform: lowercase;
    margin: 0;
}

.archive-cat-name .hash {
    color: #555;          /* ハッシュタグだけ少し暗くして奥行きを出す */
    margin-right: 2px;
}

/* スマホ用のレスポンシブ調整 */
@media (max-width: 600px) {
    .archive-sub-title {
        font-size: 1.6rem;
        letter-spacing: 0.3em;
    }
    .archive-cat-name {
        font-size: 0.9rem;
    }
    .tagline span {
        display: block; /* 画面が狭い時は強制改行 */
        margin-top: 10px;
    }
    .detail-item {
        flex-direction: column;
    }
    .detail-item h3 {
        margin-bottom: 5px;
    }
}

/* フォトグリッド */

/* グリッドではなく、柔軟な並び（Flex）に変更 */
.archive-grid {
    display: flex;
    flex-wrap: wrap; /* 横に並びきらなくなったら改行 */
    gap: 40px;
    justify-content: center; /* 中央寄せ */
}

.archive-grid .grid-item {
    /* 高さを固定することで、縦・横・正方形のラインを揃える */
    height: 350px; 
    margin-bottom: 20px;
    flex-grow: 1; /* 隙間を埋めるように少し広がる設定 */
    max-width: fit-content; /* 画像の本来の幅以上に広がらないようにする */
}

.archive-grid .grid-item:hover {
    opacity: 0.7;
}

/* アーカイブのリンク全体から下線を消す */
.archive-grid .grid-item a {
    text-decoration: none;
    display: block;
}

.archive-grid .grid-image {
    height: 280px; /* 写真自体の表示領域の高さを固定 */
    display: flex;
    align-items: flex-end; /* 写真を下に接地させる（安定感が出る） */
    justify-content: center;/* 写真自体を枠の中の真ん中に置く */
}

.archive-grid .grid-image img {
    max-height: 70vh; 
    height: 100%;    /* 高さは親要素に合わせる */
    width: auto;     /* 横幅は比率を維持して自動計算 */
    object-fit: contain; /* 画像を一切削らず、全体を表示する */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* 写真に深みを出す影 */
}

.archive-grid .grid-meta {
    margin-top: 15px;
    text-align: left;
}



/* No. の部分 */
.grid-no {
    font-size: 0.75rem;
    color: #666; /* 控えめなグレー */
    margin-bottom: 5px;
    display: block;
}

/* タイトルの部分 */
.grid-title {
    font-size: 0.95rem;
    color: #eeeeee; /* 明るいグレー */
    font-weight: normal;
    line-height: 1.6;
    margin: 0;
    /* リンクのデフォルト色を上書き */
    text-decoration: none;
}

/* ホバー時に色を変える（お好みで） */
.grid-item a:hover .grid-title {
    color: #ffffff;
    text-decoration: underline; /* ホバー時のみ線を出すのもあり */
}



/* ページネーション */
.pagination {
    margin-top: 80px;
    text-align: center;
}
.pagination a, .pagination span {
    padding: 10px 15px;
    color: #888;
    text-decoration: none;
}

/* アーカイブ下のナビゲーション */
.archive-nav {
    margin-top: 100px;
    padding-top: 40px;
    border-top: 1px solid #222;
    text-align: center;
}

.archive-nav-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* 項目間の距離 */
}

.archive-nav-list li a {
    text-decoration: none;
    font-size: 0.8rem;
    color: #666;
    letter-spacing: 0.2em;
    transition: 0.3s;
    text-transform: uppercase;
}

/* スマホ用に最適化（アーカイブページ） */
@media (max-width: 600px) {
    .archive-grid {
        display: block; /* Flexを解除して1列に */
    }

    .archive-grid .grid-item {
        max-width: 100%; /* 横幅いっぱいを許容 */
        height: auto;    /* 高さを自由にする */
        margin-bottom: 60px; /* 写真同士の間隔を広げる */
    }

    .archive-grid .grid-image {
        height: auto;    /* 280px固定を解除 */
        display: block;  /* 中央寄せを解除して幅に合わせる */
    }

    .archive-grid .grid-image img {
        width: 100%;     /* 横幅を画面幅（余白除く）に合わせる */
        height: auto;    /* 高さは比率に応じて自動決定 */
        max-height: 70vh; /* 制限を外す */
    }
}

.archive-nav-list li a:hover {
    color: #fff;
}

/* 「Top / 表紙へ戻る」だけ少し強調する場合 */
.archive-nav-list li:first-child a {
    color: #888;
    font-weight: bold;
}


/* Aboutページ全体のレイアウト */
.about-container {
    max-width: 800px;
    margin: 100px auto;
    padding: 0 20px;
}

.about-hero {
    text-align: center;
    margin-bottom: 80px;
}

.about-title {
    font-size: 2.5rem;
    font-weight: 200;
    letter-spacing: 0.3em;
    margin-bottom: 10px;
}

.about-subtitle {
    font-size: 0.8rem;
    color: #888;
    letter-spacing: 0.2em;
}

/* 本文エリア */
.about-text {
    font-size: 1rem;
    line-height: 2.2;
    letter-spacing: 0.05em;
    margin-bottom: 80px;
    text-align: justify; /* 両端揃えで綺麗に見せる */
}

/* 箇条書き風の詳細エリア */
.about-details {
    border-top: 1px solid #333;
    padding-top: 40px;
}

.detail-item {
    display: flex;
    margin-bottom: 25px;
}

.detail-item h3 {
    width: 150px;
    font-size: 0.85rem;
    color: #888;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin: 0;
}

.detail-item p {
    flex: 1;
    margin: 0;
    font-size: 0.95rem;
    color: #ccc;
}

/* トップに戻るボタンの基本スタイル */
/* --- トップに戻るボタン：修正版 --- */
.page-top-btn {
    position: fixed;
    /* 右下からの距離を十分に確保し、はみ出しを防ぐ */
    right: 20px; 
    bottom: 25px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.6); /* 赤から本来の暗い背景へ */
    border-radius: 50%;
    
    /* 強制表示設定 */
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9999;
    
    /* 配置を安定させる設定 */
    display: flex !important;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* 内側にサイズを収める */
    text-decoration: none;
}

.arrow {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(45deg);
    /* 矢印の位置を中央より少し下にずらしてバランスを取る */
    margin-top: 4px;
    box-sizing: border-box;
}

/* スマホ対応：はみ出しを徹底ガード */
@media (max-width: 600px) {
    .page-top-btn {
        right: 15px; /* 右端に寄せつつ、絶対に突き抜けない位置 */
        bottom: 20px;
        width: 40px;
        height: 40px;
    }
    .arrow {
        width: 8px;
        height: 8px;
    }
}

/* 言語切替スイッチ */

.lang-switch {
    text-align: right; /* 右寄せ */
    padding: 10px 20px;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    font-family: sans-serif; /* 英字はサンセリフが綺麗です */
}

.lang-switch a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.lang-switch a.is-active {
    color: #fff;
    pointer-events: none; /* 現在の言語はクリック不可に */
}

.lang-switch .sep {
    margin: 0 8px;
    color: #333;
}