/*
Theme Name: SYN Ownd Child
Template: syn-ownd
Theme URI: https://syn.design
Author: 株式会社ウェブライダー
Author URI: https://web-rider.jp
Description: SYN Ownd の子テーマ
Version: 1.0.0
Text Domain: syn-ownd-child
License: GPLv2 or later
License URI: https://gnu.org
*/
@charset "utf-8";

/* =================================================================
   最新ニュース（撮影実績）キッチリとしたカード型デザイン（黒太字統一版）
================================================================= */
/* 横並びニュースのコンテナ設定（全体幅を1200pxから1080pxに狭めてキュッと引き締める） */
.news-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px; /* カード同士の間隔を少し広げてメリハリをつける */
    width: 100%;
    max-width: 1080px; /* 横に広がりすぎないように制限 */
    margin: 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
}

/* カード全体のスタイル（横幅をキッチリ3等分に最適化） */
.news-card {
    width: calc(33.333% - 16px); /* 隙間24pxを計算に入れたキッチリ3等分の幅 */
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ccd0d5; /* 枠線を少し濃くしてキッチリ感を強調 */
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0,0,0,0.06); /* 軽い影で立体感を出す */
    text-decoration: none; /* カード全体から下線を消す */
}

/* スマートフォン対応（スマホでは横幅いっぱいの美しい縦並びにする） */
@media (max-width: 768px) {
    .news-container {
        flex-direction: column;
        gap: 20px;
    }
    .news-card {
        width: 100%;
    }
}

/* 上部のグレー背景の画像枠（縦長写真対応） */
.news-card__img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #f4f5f7; /* グレー背景を少し引き締まった色に */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #e2e8f0; /* 画像とテキストの境界線 */
}

/* 縦長の写真全体を枠内に収める */
.news-card__img-wrap img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* 雑誌の存在感を出す影 */
    display: block;
    transition: transform 0.3s ease;
}

.news-card:hover .news-card__img-wrap img {
    transform: scale(1.03); /* ホバー時に上品に少しだけ拡大 */
}

/* テキストエリア */
.news-card__body {
    padding: 18px 15px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 日付・NEWバッジ・都道府県エリア */
.news-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #111111; /* 【変更】全体をシャープな黒字に */
    font-weight: bold; /* 【変更】すべて太字に統一 */
}

/* 日付（黒の太字） */
.news-card__date {
    color: #111111;
    font-weight: bold;
    letter-spacing: 0.02em;
}

/* NEWバッジ（視認性の高いはっきりとした赤太字） */
.news-card__badge {
    background: #e53e3e;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    line-height: 1;
}

/* 都道府県リンク（ピンアイコン含む黒の太字） */
.news-card__pref {
    margin-left: auto;
    text-decoration: none;
    color: #111111 !important; /* 【変更】都道府県名も完全な黒字に */
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.news-card__pref:hover {
    color: #0044cc !important; /* ホバー時のみ上品な青色に変化 */
}

.news-card__pref-icon {
    color: #e53e3e; /* ピンマークの色 */
    font-size: 13px;
}

/* 記事タイトル（下線とテキストをすべて黒の太字に統一） */
.news-card__title-link {
    text-decoration: none;
}

.news-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: bold; /* 【変更】タイトルを力強い太字に */
    color: #111111; /* 【変更】青文字から引き締まった黒文字に変更 */
    padding-bottom: 8px;
    border-bottom: 2px solid #111111; /* 【変更】下線も黒の太い線にしてキッチリ感を出す */
    display: inline-block;
    width: 100%;
    line-height: 1.5;
}

/* 撮影実績詳細データテーブル（single-news.php用） */
.achievement-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    background: #fff;
}
.achievement-detail__heading {
    font-size: 18px;
    color: #3366cc;
    border-bottom: 2px solid #3366cc;
    padding-bottom: 8px;
    margin-bottom: 15px;
}
.achievement-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
}
.achievement-table th, .achievement-table td {
    border: 1px solid #ddd;
    padding: 12px;
    font-size: 14px;
    text-align: left;
}
.achievement-table th {
    background-color: #f9f9f9;
    width: 25%;
    color: #555;
    font-weight: normal;
    text-align: center;
}
.achievement-main-img {
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
}
.achievement-main-img img {
    max-width: 100%;
    height: auto;
}
.achievement-btn-wrap {
    text-align: center;
}
.achievement-btn {
    display: inline-block;
    background: #3366cc;
    color: #fff;
    text-decoration: none;
    padding: 12px 35px;
    border-radius: 4px;
    font-size: 15px;
    transition: background 0.2s;
}
.achievement-btn:hover {
    background: #254e99;
}

/* スマホ対応（縦並びにする） */
@media (max-width: 768px) {
    .news-container {
        flex-direction: column;
    }
}

/* =================================================================
   詳細ページ（single-news.php）写真3枚横並び＆2つボタンデザイン
================================================================= */
.achievement-photos-wrap {
    display: flex;
    gap: 15px;
    width: 100%;
    margin-top: 35px;
    box-sizing: border-box;
}

.achievement-photo-item {
    flex: 1;
    background: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.achievement-photo-item img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

.achievement-btn-wrap {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.achievement-btn-wrap .achievement-btn {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
    transition: background 0.2s;
    text-align: center;
    min-width: 240px;
    box-sizing: border-box;
}

.achievement-btn-wrap .btn-blue {
    background: #225599;
}

.achievement-btn-wrap .btn-blue:hover {
    background: #173d70;
}

.achievement-btn-wrap .btn-gray {
    background: #666666;
}

.achievement-btn-wrap .btn-gray:hover {
    background: #4d4d4d;
}

@media (max-width: 768px) {
    .achievement-photos-wrap {
        flex-direction: column;
        gap: 15px;
    }
    .achievement-btn-wrap {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    .achievement-btn-wrap .achievement-btn {
        width: 100%;
        max-width: 300px;
    }
}

/* =================================================================
   【最優先解決】JavaScriptのバグを完全に無視して固定ページの本文を強制表示
================================================================= */
.type-page .entry-content,
.type-page article,
.type-page main,
.type-page #main,
.type-page .l-content,
.type-page div[class*="content"],
.type-page div[class*="body"],
.type-page h1 ~ div,
.type-page h1 ~ p,
.type-page h1 ~ select,
.type-page h1 ~ *,
.news-list-container,
.news-list-item {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* =================================================================
   カードのタイトルと下線をセンター中央配置にする設定
================================================================= */
.news-card__title-link {
    text-decoration: none;
    width: 100%;
    display: block;
    text-align: center; /* リンクエリア全体をセンター揃えにします */
}

.news-card__title {
    margin: 0 auto; /* 中央に配置 */
    font-size: 15px;
    font-weight: bold;
    color: #111111;
    padding-bottom: 8px;
    border-bottom: 2px solid #111111;
    display: inline-block; /* 横幅を文字の長さに合わせて下線をセンターに収めます */
    width: max-content; /* 文字の幅にぴったり下線を合わせる設定 */
    max-width: 100%; /* カードからはみ出さないための保険 */
    line-height: 1.5;
}