/* ============================================================
   style.css — 青春出版社の自費出版 共通スタイル
   全ページ共通のヘッダー・フッター・追従CTAなどを管理。
   ページ固有のスタイルは各HTMLの<style>タグに残す。
   ============================================================ */

/* ── 変数 ── */
:root {
    --main-color:    #1a365d;
    --accent-color:  #c53030;
    --request-color: #276749;
    --bg-light:      #f7fafc;
    --text-color:    #2d3748;
}

/* ── ベース ── */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: var(--text-color);
    font-size: 18px;
    line-height: 1.9;
    margin: 0; padding: 0;
    background-color: #fff;
    scroll-behavior: smooth;
}
p   { margin-top: 0; margin-bottom: 1.2em; }
img { max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }

/* ── 最上部固定 電話バナー ── */
.tel-banner-top {
    position: fixed; top: 0; left: 0; width: 100%;
    height: 38px;
    background: var(--main-color); color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 32px;
    z-index: 1002; font-size: 14px;
}
.tel-banner-top span { opacity: 0.9; }
.tel-banner-top a {
    color: #fff; font-size: 20px; font-weight: bold;
    letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 6px;
}
.tel-banner-top a:hover { opacity: 0.8; }

/* ── ヘッダー ── */
header {
    position: fixed;
    top: 38px; left: 0; width: 100%;   /* バナー38px分下 */
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1001;
    display: flex; justify-content: center; gap: 50px; align-items: center;
    padding: 10px 40px; box-sizing: border-box; height: 70px;
}

/* ── ロゴ ── */
.logo { display: flex; align-items: center; }
.logo a { transition: opacity 0.3s; display: flex; align-items: center; }
.logo a:hover { opacity: 0.7; }
.logo img { height: 40px; width: auto; }

/* ── PCナビゲーション ── */
.nav-links ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav-links a  { font-size: 16px; font-weight: bold; color: var(--text-color); transition: color 0.3s; }
.nav-links a:hover { color: var(--accent-color); }

/* ── ボタン ── */
.btn-tel     { background: var(--main-color);    color: #fff; }
.btn-mail    { background: var(--accent-color);  color: #fff; }
.btn-request { background: var(--request-color); color: #fff; }

/* ── アイコン ── */
.icon-svg {
    width: 1.2em; height: 1.2em;
    vertical-align: -0.2em; margin-right: 0.3em;
    fill: currentColor;
}

/* ── ハンバーガー（PCでは非表示） ── */
.menu-btn { display: none; }

/* ── スマホナビ内の問い合わせエリア（PCでは非表示） ── */
.mobile-contact { display: none; }

/* ── 追従CTA（3ボタン横並び・高さ固定） ── */
.floating-cta {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: rgba(255,255,255,0.97);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.12);
    display: flex; flex-direction: row; flex-wrap: nowrap;
    justify-content: center; align-items: stretch;
    gap: 8px; padding: 8px;
    z-index: 1000; box-sizing: border-box; height: 64px;
}
.floating-cta .btn-large {
    flex: 1; max-width: 340px; padding: 0 16px;
    font-size: 15px; font-weight: bold; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    line-height: 1.2; white-space: nowrap;
}

/* ── フッター ── */
.site-footer {
    background-color: var(--main-color); color: #fff;
    padding: 40px 20px 80px; text-align: center;
}
.footer-container { max-width: 1000px; margin: 0 auto; }
.footer-links {
    list-style: none; padding: 0; margin: 0 0 25px;
    display: flex; justify-content: center; flex-wrap: wrap; gap: 15px 40px;
}
.footer-links a { color: #fff; font-size: 16px; transition: opacity 0.3s; }
.footer-links a:hover { opacity: 0.7; }
.footer-sns { margin-bottom: 25px; }
.sns-link { display: inline-flex; align-items: center; color: #fff; font-size: 15px; transition: opacity 0.3s; }
.sns-link:hover { opacity: 0.7; }
.sns-link svg { width: 16px; height: 16px; margin-right: 6px; }
.copyright { margin: 0; font-size: 13px; opacity: 0.8; }

/* ============================================================
   スマホ対応（共通パーツ分）
   ============================================================ */
@media (max-width: 768px) {
    body { font-size: 18px; }

    /* 電話バナー：コンパクト化 */
    .tel-banner-top { height: 32px; font-size: 12px; gap: 10px; }
    .tel-banner-top a { font-size: 16px; }
    .tel-hours { display: none; } /* 受付時間テキストは省略 */

    /* ヘッダー */
    header { padding: 10px 20px; height: 60px; justify-content: center; top: 32px; }
    .logo  { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    .logo img { height: 30px; }

    /* ハンバーガーボタン */
    .menu-btn {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        cursor: pointer; z-index: 1002;
        width: 52px; height: 52px;  /* 44px以上のタップ領域 */
        position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    }
    .menu-btn .bar       { width: 26px; height: 3px; background-color: var(--main-color); margin: 3px 0; transition: 0.3s; }
    .menu-btn .menu-text { font-size: 11px; color: var(--main-color); margin-top: 2px; font-weight: bold; transition: 0.3s; }
    .menu-btn.active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg);  background-color: #fff; }
    .menu-btn.active .bar:nth-child(2) { opacity: 0; }
    .menu-btn.active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background-color: #fff; }
    .menu-btn.active .menu-text        { opacity: 0; }

    /* フルスクリーンナビ */
    .nav-links {
        position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
        background-color: rgba(26,54,93,0.98);
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        transition: right 0.4s ease-in-out; z-index: 1001;
    }
    .nav-links.active { right: 0; }
    .nav-links ul { flex-direction: column; gap: 28px; text-align: center; display: flex; }
    .nav-links a  { font-size: 22px; color: #fff; display: block; padding: 10px; }

    /* ナビ内 問い合わせボタン */
    .mobile-contact {
        display: flex; flex-direction: column;
        gap: 15px; margin-top: 40px; width: 80%;
    }
    .mobile-contact .btn-large {
        font-size: 18px; padding: 16px;
        width: 100%; box-sizing: border-box;
        border-radius: 8px; font-weight: bold;
        text-align: center; display: block;
    }

    /* 追従CTA */
    .floating-cta { gap: 5px; padding: 6px; height: 58px; }
    .floating-cta .btn-large { font-size: 12px; padding: 0 8px; border-radius: 4px; }

    /* フッター */
    .site-footer { padding: 30px 15px 74px; }
    .footer-links { flex-direction: column; gap: 15px; margin-bottom: 20px; }
    .footer-links a { font-size: 17px; }

    /* ── 制作実績：2カラムグリッド表示（横スクロールはWordPressテーマと干渉するため使用しない） ── */
    #works .works-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        overflow-x: visible;
    }
    #works .work-item {
        flex: unset;
        max-width: none;
        margin: 0;
        padding: 10px;
    }
    #works .work-img-wrap {
        height: 180px;
    }
}