/*
Theme Name: Social Office カラフル金沢
Theme URI: https://www.so-ck.com/
Description: Social Office カラフル金沢の公式Web制作サイトテーマ。
Author: Social Office カラフル金沢
Author URI: https://www.so-ck.com/
Version: 1.0
Text Domain: so-theme
*/

/* =========================================
   Global Base
========================================= */
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333333;
}

a {text-decoration: none;}

/* =========================================
   Header (PC)
========================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.site-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

/* ロゴ全体（画像＋テキスト横並び） */
.site-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #333333;
}

/* ロゴ画像 */
.logo__img img {
    width: 80px;
    height: auto;
    display: block;
}

/* テキストをまとめて縦並びにする */
.logo__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

/* メインテキスト */
.site-logo__main {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    letter-spacing: 0.03em;
}

/* サブテキスト */
.site-logo__sub {
    font-size: 11px;
    color: #777777;
    letter-spacing: 0.1em;
    margin-top: 2px;
}

/* ナビゲーション */
.global-nav__list {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
}

.global-nav a {
    text-decoration: none;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0.06em;
    position: relative;
    padding-bottom: 4px;
    transition: 0.25s;
}

/* 下線アニメーション（キーカラー） */
.global-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #f9be02;
    /* キーカラー */
    transition: width 0.25s ease;
}

.global-nav a:hover::after {
    width: 100%;
}

/* CTA（右端ボタン） */
.header-cta {
    padding: 12px 25px;
    border-radius: 999px;
    background: #0080a3;
    /* CTAカラー */
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.06em;
    white-space: nowrap;
    transition: 0.2s ease;
}

.header-cta:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

/* =========================================
   Hero Section
========================================= */
.hero {
    position: relative;
    background: url("img/fv.webp") no-repeat center/cover;
    height: 80vh;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 左上の斜めパネル */
.hero::before {
    content: "";
    position: absolute;
    top: 10%;
    left: -30%;
    width: 1000px;
    height: 1000px;
    transform: rotate(-50deg);
    background: #0080a3;
    z-index: 1;
}

.hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

/* 見出し */
.hero__title {
    font-size: clamp(40px, 4vw, 60px);
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 20px;
    color: #fff;
}

/* リード文 */
.hero__subtitle {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.8;
    margin-bottom: 36px;
    opacity: 0.95;
    color: #eee;
}

/* 中央寄せボタン */
.hero__buttons {
    display: inline-block;
    margin: 0 auto;
    padding: 16px 40px;
    font-size: 18px;
    border-radius: 8px;
}

/* ボタン */
.btn {
    display: inline-block;
    padding: 14px 32px;
    font-size: 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s;
}

/* 主ボタン（CTA仕様） */
.btn.primary {
    background: #0080a3;
    border: 2px solid #fff;
    color: #fff;
}

.btn.primary:hover {
    opacity: 0.85;
}

/* セカンダリーボタン（アウトライン・キーカラー） */
.btn.secondary {
    border: 2px solid #f9be02;
    background: #fff;
    color: #333333;
    margin-left: 16px;
}

.btn.secondary:hover {
    background: #f9be02;
    color: #333333;
}

/* =====================================
   LOOP SLIDER with Center Zoom
===================================== */

.loop-slider {
    width: 100%;
    padding: 30px 0;
    margin-top: -100px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.loop-track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
    pointer-events: none;
    transform: translateX(0);
    overflow: visible;
}

.loop-slide {
    width: 350px;
    height: 250px;
    flex-shrink: 0;
    overflow: hidden;
    transition: transform 0.25s ease;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
}

.loop-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.loop-slider::before,
.loop-slider::after {
    content: "";
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    pointer-events: none;
}

.loop-slider::after {
    right: 0;
    left: auto;
}

/* =========================================
   ABOUT Section（新デザイン）
========================================= */

.about {
    padding: 140px 0;
    background: #ffffff;
    color: #333333;
}

.about__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* 画像エリア */
.about__image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
    object-fit: cover;
}

/* ラベル（ABOUT） */
.about__label {
    font-size: 14px;
    font-weight: 700;
    color: #0080a3;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    padding-left: 16px;
    border-left: 4px solid #f9be02;
    /* キーカラーの縦ライン */
}

/* 大見出し */
.about__title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: 24px;
}

/* テキスト */
.about__text {
    font-size: 16px;
    line-height: 1.9;
    color: #555555;
    margin-bottom: 36px;
}

.about__btn {
    display: block;
    width: fit-content;
    margin: 20px auto 0;
    padding: 14px 36px;
    border-radius: 8px;
}


/* =========================================
   STRENGTHS Section
========================================= */

.strengths {
    padding: 120px 0;
    background: #fafafa;
}

.strengths__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ラベル（ABOUTと統一） */
.strengths__label {
    font-size: 14px;
    font-weight: 700;
    color: #0080a3;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    padding-left: 16px;
    border-left: 4px solid #f9be02;
}

/* 見出し（ABOUTと統一） */
.strengths__title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 48px;
    color: #333333;
}

/* 4カラム */
.strengths__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

/* カード全体 */
.strength-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: 0.25s ease;
}

.strength-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1);
}

/* 画像部分 */
.strength-card__img {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.strength-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.35s ease;
}

.strength-card:hover .strength-card__img img {
    transform: scale(1.06);
}

/* 下のテキスト部分 */
.strength-card__body {
    padding: 24px 20px 28px;
}

/* タイトル */
.strength-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #333333;
}

/* 説明文 */
.strength-card__text {
    font-size: 15px;
    line-height: 1.8;
    color: #555555;
}


/* =========================================
   WORKS Section
========================================= */

.works {
    padding: 120px 0;
    background: #ffffff;
}

.works__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ラベル（ABOUTと統一） */
.works__label {
    font-size: 14px;
    font-weight: 700;
    color: #0080a3;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    padding-left: 16px;
    border-left: 4px solid #f9be02;
    /* キーカラーライン */
}

/* タイトル（ABOUTと統一） */
.works__title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 48px;
    color: #333;
}

/* 4カラムのグリッド */
.works__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

/* ============================
   WORKS（制作実績）
============================ */

.works__grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.work-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: transform .3s ease;
    display: block;
}

.work-card:hover {
    transform: translateY(-5px);
}

.work-card__thumb img {
    width: 100%;
    height: auto;
    display: block;
}

.work-card__title {
    padding: 16px;
    font-size: 18px;
    font-weight: 600;
}

/* ============================
   PRICE MINI（TOP用）
============================ */

.price-mini {
    padding: 120px 0;
    background: #ffffff;
}

.price-mini__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ラベル（ABOUTと同じ） */
.price-mini__label {
    font-size: 14px;
    font-weight: 700;
    color: #0080a3;
    padding-left: 16px;
    border-left: 4px solid #f9be02;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
}

.price-mini__title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
}

.price-mini__lead {
    font-size: 16px;
    color: #555;
    margin-bottom: 48px;
}

/* 3カラム */
.price-mini__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* カード（ミニサイズ） */
.price-mini-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-top: 5px solid #0080a3;
    transition: 0.25s ease;
    text-align: center;
}

.price-mini-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}

.price-mini-card__label {
    font-size: 13px;
    font-weight: 700;
    color: #0080a3;
    margin-bottom: 6px;
    letter-spacing: .05em;
}

.price-mini-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.price-mini-card__price {
    font-size: 24px;
    font-weight: 800;
    color: #333;
}

/* ボタン */
.price-mini__btn {
    display: block;
    width: 240px;
    margin: 50px auto 0;
    border-radius: 8px;
    text-align: center;
}

.templates__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
}

/* タイトル（ABOUTと統一） */
.templates__label {
    font-size: 14px;
    font-weight: 700;
    color: #0080a3;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    padding-left: 16px;
    border-left: 4px solid #f9be02;
}

.templates__title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 48px;
    color: #333;
}

/* 3カラム */
.templates__grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* カード（既存デザイン流用OK） */
.template-card {
    text-decoration: none;
    color: #333;
    transition: 0.25s ease;
}

.template-card:hover {
    transform: translateY(-6px);
}

.template-card__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.template-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease;
}

.template-card:hover .template-card__thumb img {
    transform: scale(1.05);
}

.template-card__tag {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    background: #0080a3;
    color: #fff;
}

.template-card__title {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.6;
}

/* もっと見るボタン */
.templates__btn {
    display: block;
    margin: 40px auto 0;
    /* 上40 / 左右auto / 下0 */
    width: fit-content;
    width: 260px;
    text-align: center;
}

/* =========================================
   FLOW（制作の流れ）
========================================= */

/* FLOW の背景に薄い画像を入れる */
.flow {
    position: relative;
    padding: 140px 0;
    background: #ffffff;
    overflow: hidden;
    margin-top: 100px;
}

/* 背景画像を ::before で追加 */
.flow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: url("img/flow-bg.webp") no-repeat center/cover;
    opacity: 0.08;
    /* ← うすくするポイント！ */

    z-index: 0;
    /* いちばん後ろ */
}

/* 中身が背景より上にくるようにする */
.flow__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

/* タイトル（ABOUTと統一） */
.flow__label {
    font-size: 14px;
    font-weight: 700;
    color: #0080a3;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    padding-left: 16px;
    border-left: 4px solid #f9be02;
}

.flow__title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 48px;
    color: #333;
}

/* 3列 × 2段 */
.flow__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* カード風（影なしで柔らかく） */
.flow-item {
    background: #fafafa;
    border-radius: 14px;
    padding: 32px 28px;
    border-left: 6px solid #0080a3;
    transition: 0.25s ease;
}

.flow-item:hover {
    background: #f3f3f3;
}

/* ナンバー */
.flow-item__number {
    font-size: 22px;
    font-weight: 800;
    color: #0080a3;
    margin-bottom: 12px;
}

/* タイトル */
.flow-item__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

/* 説明文 */
.flow-item__text {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

/* =========================================
   FAQ（刷新デザイン）
========================================= */

.faq {
    padding: 120px 0;
    background: #ffffff;
}

.faq__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* タイトル（ABOUTと揃える） */
.faq__label {
    font-size: 14px;
    font-weight: 700;
    color: #0080a3;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
    padding-left: 16px;
    border-left: 4px solid #f9be02;
}

.faq__title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 40px;
    color: #333;
}

/* リスト全体 */
.faq__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 1つの質問ブロック */
.faq-item {
    border-bottom: 1px solid #e4e4e4;
    padding: 20px 0;
}

/* 質問ボタン（横並び） */
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ＋アイコン */
.faq-icon {
    font-size: 22px;
    font-weight: 900;
    color: #0080a3;
    transition: transform 0.3s ease;
}

/* 回答（閉じた状態） */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding-top: 0;
}

/* 開いた状態 */
.faq-item.open .faq-answer {
    max-height: 300px;
    padding-top: 14px;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
    color: #f9be02;
}

/* ================================
   CONTACT SECTION（背景画像＋暗幕）
================================ */

.contact {
    position: relative;
    padding: 140px 0;
    background: url("img/contact-bg.webp") center/cover no-repeat;
    /* ← 画像パス */
    color: #fff;
    overflow: hidden;
}

/* 暗幕（黒の半透明オーバーレイ） */
.contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    /* ← 好きに濃さ調整してOK */
    z-index: 1;
}

.contact__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
    /* テキストを暗幕の上へ */
}

/* 見出し（ABOUTと統一） */
.contact__label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .15em;
    padding-left: 16px;
    border-left: 4px solid #f9be02;
    color: #0080a3;
    margin-bottom: 16px;
}

.contact__title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #fff;
}

.contact__lead {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 48px;
}

/* 電話/メールの行 */
.contact__info {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.contact__info a {
    color: #f9be02;
    text-decoration: none;
}

.contact__btn {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 36px;
    border-radius: 999px;
    font-weight: 700;
    background: #0080a3;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: 0.25s ease;
    margin: 0 auto;
}

.contact__btn:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}


/* ======================================================
   FOOTER（共通）
====================================================== */

.footer {
    background: #002f36;
    color: #ffffff;
    padding-top: 80px;
}

.footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 60px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    /* ← 3カラム */
    gap: 60px;
}

/* ---- BRAND ---- */
.footer__logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .05em;
}

.footer__desc {
    margin: 18px 0 24px;
    font-size: 14px;
    line-height: 1.8;
    opacity: .9;
}

/* SNS */
.footer__sns {
    display: flex;
    gap: 12px;
}

.footer__sns a {
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 12px;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    transition: 0.25s ease;
}

.footer__sns a:hover {
    background: #0080a3;
}

/* ---- MENU ---- */
.footer__title {
    font-size: 16px;
    font-weight: 700;
    color: #f9be02;
    margin-bottom: 16px;
}

.footer__nav {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 10px;
}

.footer__nav li a {
    color: #fff;
    opacity: .85;
    font-size: 14px;
    text-decoration: none;
    transition: 0.25s ease;
}

.footer__nav li a:hover {
    opacity: 1;
    color: #f9be02;
}

/* ---- CTA ---- */
.footer__cta-text {
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.8;
}

.footer__btn {
    width: 200px;
    border-radius: 999px;
    display: block;
    text-align: center;
}

/* ---- BOTTOM ---- */
.footer__bottom {
    background: #001f23;
    text-align: center;
    padding: 18px 0;
    font-size: 12px;
    opacity: .8;
    margin-top: 20px;
}


/* ======================================================
   RESPONSIVE
====================================================== */
@media (max-width: 768px) {

    .footer {
        padding-top: 60px;
    }

    .footer__inner {
        padding: 0 24px 40px;
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer__btn {
        margin-top: 12px;
    }
}

/* PC/SP 切り替え */
.pc-only {
    display: inline-flex;
}

.sp-only {
    display: none;
}

@media (max-width: 768px) {
    .pc-only {
        display: none;
    }

    .sp-only {
        display: inline-flex;
    }
}

/* ============================
   ハンバーガーボタン（SP）
============================ */
.hamburger {
    width: 32px;
    height: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1100;
}

.hamburger span {
    width: 32px;
    height: 3px;
    background: #333;
    border-radius: 3px;
    transition: 0.3s ease;
}

/* 開いた状態 */
.hamburger.active span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}


/* ============================
   SPメニュー（右からスライド）
============================ */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    max-width: 300px;
    height: 100vh;
    background: #ffffff;
    padding: 80px 30px;
    box-shadow: -2px 0 20px rgba(0, 0, 0, 0.15);
    transition: right 0.35s ease;
    z-index: 1050;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mobile-menu li a {
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    color: #333;
    position: relative;
}

/* CTAっぽいリンク */
.mobile-contact {
    display: block;
    background: #0080a3;
    color: #fff !important;
    text-align: center;
    padding: 14px 0;
    margin-top: 20px;
    border-radius: 999px;
}

/* -----------------------------
   PC/SP 切り替え（決定版）
----------------------------- */

/* 初期状態 → PC想定（ハンバーガー非表示） */
.hamburger,
.mobile-menu {
    display: none;
}

/* PC用の項目 */
.pc-only {
    display: inline-flex;
}

/* SP用の項目（ハンバーガー表示） */
.sp-only {
    display: none;
}


/* -------- 768px以下でスマホ表示に切り替え -------- */
@media (max-width: 768px) {

    /* ハンバーガー表示 */
    .hamburger {
        display: flex;
    }

    /* SP only 表示 */
    .sp-only {
        display: inline-flex;
    }

    /* PC only 非表示 */
    .pc-only {
        display: none !important;
    }

    /* モバイルメニュー表示可能に */
    .mobile-menu {
        display: block;
    }

    /* PCナビは非表示 */
    .global-nav {
        display: none;
    }
}

/* ---- ハンバーガー（初期は非表示） ---- */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.hamburger span {
    width: 100%;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: 0.3s;
}

/* アニメーション（開いたとき） */
.hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* ---- モバイルメニュー（初期は隠す） ---- */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    max-width: 300px;
    height: 100vh;
    background: #fff;
    padding: 80px 30px;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    z-index: 999;
    transition: right 0.35s ease;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mobile-menu li a {
    color: #333;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.mobile-contact {
    margin-top: 20px;
    padding: 14px 0;
    display: block;
    text-align: center;
    background: #0080a3;
    border-radius: 999px;
    color: #fff !important;
}


/* =========================================================
   RESPONSIVE（768px 以下）
========================================================= */

@media (max-width: 768px) {

    /* 内側余白を縮める */
    .site-header__inner {
        padding: 12px 20px;
    }

    /* ロゴ縮小 */
    .logo__img img {
        width: 40px;
        height: 40px;
    }

    .site-logo__main {
        font-size: 16px;
    }

    .site-logo__sub {
        font-size: 11px;
    }

    /* PCナビ非表示 */
    .global-nav {
        display: none;
    }

    /* PC CTA 非表示 */
    .header-cta {
        display: none;
    }

    /* ハンバーガー表示 */
    .hamburger {
        display: flex;
    }

    /* モバイルメニュー表示可能に */
    .mobile-menu {
        display: block;
    }
}

/* =========================================================
   PC（769px以上）ではスマホ要素は確実に消す！
========================================================= */
@media (min-width: 769px) {

    .hamburger,
    .mobile-menu {
        display: none !important;
    }
}


/* =========================================================
   HERO（SP）
========================================================= */
@media (max-width: 768px) {

    .hero {
        height: 80vh;
        padding: 0 16px;
        text-align: center;
    }

    /* 斜めパネルを小さく */
    .hero::before {
        width: 600px;
        height: 600px;
        top: 0%;
        left: -40%;
        transform: rotate(-45deg);
    }

    .hero__inner {
        max-width: 100%;
        padding: 0 10px;
    }

    .hero__title {
        font-size: 30px;
        line-height: 1.4;
        margin-bottom: 16px;
    }

    .hero__subtitle {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 28px;
    }

    .hero__buttons {
        padding: 0;
    }

    .btn {
        padding: 12px 26px;
        font-size: 15px;
    }

    .btn.secondary {
        margin-left: 12px;
    }
}


/* =========================================================
   LOOP SLIDER（SP）
========================================================= */
@media (max-width: 768px) {

    .loop-slider {
        padding: 20px 0;
        margin-top: -40px;
    }

    .loop-track {
        gap: 16px;
    }

    .loop-slide {
        width: 230px;
        /* 小さめに */
        height: 160px;
        /* 比率維持 */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    .loop-slider::before,
    .loop-slider::after {
        width: 80px;
        /* フェード幅を狭く */
    }
}

/* =========================================================
   HERO（400px以下）
========================================================= */
@media (max-width: 400px) {

    .hero {
        height: 80vh;
        padding: 0 12px;
    }

    .hero::before {
        width: 500px;
        height: 500px;
        top: -10%;
        left: -45%;
        transform: rotate(-45deg);
    }

    .hero__inner {
        padding: 0 6px;
    }

    .hero__title {
        font-size: 24px;
        line-height: 1.35;
        margin-bottom: 14px;
    }

    .hero__subtitle {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 22px;
    }

    .btn {
        padding: 10px 22px;
        font-size: 14px;
    }

    .btn.secondary {
        margin-left: 8px;
    }
}


/* =========================================================
   LOOP SLIDER（400px以下）
========================================================= */
@media (max-width: 400px) {

    .loop-slider {
        padding: 16px 0;
        margin-top: -28px;
    }

    .loop-track {
        gap: 12px;
    }

    .loop-slide {
        width: 180px;
        height: 120px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
        border-radius: 6px;
    }

    .loop-slider::before,
    .loop-slider::after {
        width: 60px;
        /* フェード幅さらに縮小 */
    }
}


/* =========================================================
   ABOUT（768px 以下）
========================================================= */
@media (max-width: 768px) {

    .about {
        padding: 100px 0;
    }

    .about__inner {
        padding: 0 24px;
        grid-template-columns: 1fr;
        /* 画像 → テキストの縦並び */
        gap: 48px;
    }

    .about__image img {
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
        height: auto;
    }

    .about__label {
        font-size: 13px;
        margin-bottom: 12px;
        padding-left: 14px;
    }

    .about__title {
        font-size: 26px;
        margin-bottom: 18px;
        line-height: 1.4;
    }

    .about__text {
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 28px;
    }

    .about__btn {
        padding: 12px 28px;
        font-size: 15px;
    }
}

/* =========================================================
   ABOUT（400px 以下）
========================================================= */
@media (max-width: 400px) {

    .about {
        padding: 80px 0;
    }

    .about__inner {
        padding: 0 18px;
        gap: 36px;
    }

    .about__label {
        font-size: 12px;
        padding-left: 12px;
        margin-bottom: 10px;
    }

    .about__title {
        font-size: 22px;
        line-height: 1.35;
        margin-bottom: 14px;
    }

    .about__text {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 22px;
    }

    .about__btn {
        padding: 10px 22px;
        font-size: 14px;
        border-radius: 6px;
    }
}


/* =========================================================
   STRENGTHS（768px 以下）
========================================================= */
@media (max-width: 768px) {

    .strengths {
        padding: 100px 0;
    }

    .strengths__inner {
        padding: 0 24px;
    }

    .strengths__label {
        font-size: 13px;
        margin-bottom: 12px;
        padding-left: 14px;
    }

    .strengths__title {
        font-size: 26px;
        margin-bottom: 36px;
    }

    /* 4カラム → 2カラム */
    .strengths__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .strength-card {
        border-radius: 12px;
    }

    .strength-card__img {
        height: 130px;
    }

    .strength-card__body {
        padding: 20px 16px 24px;
    }

    .strength-card__title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .strength-card__text {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* =========================================================
   STRENGTHS（400px 以下）
========================================================= */
@media (max-width: 400px) {

    .strengths {
        padding: 80px 0;
    }

    .strengths__inner {
        padding: 0 18px;
    }

    .strengths__label {
        font-size: 12px;
        padding-left: 12px;
    }

    .strengths__title {
        font-size: 22px;
        margin-bottom: 28px;
    }

    /* 1列に落とす方が読みやすい */
    .strengths__grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .strength-card__img {
        height: 140px;
    }

    .strength-card__title {
        font-size: 15px;
    }

    .strength-card__text {
        font-size: 13.5px;
        line-height: 1.65;
    }
}

/* =========================================================
   WORKS（768px 以下）
========================================================= */
@media (max-width: 768px) {

    .works {
        padding: 100px 0;
    }

    .works__inner {
        padding: 0 24px;
    }

    .works__label {
        font-size: 13px;
        padding-left: 14px;
        margin-bottom: 12px;
    }

    .works__title {
        font-size: 26px;
        margin-bottom: 36px;
    }

    /* ▼ 3カラム or 4カラム → 2カラムへ */
    .works__grid,
    .works__grid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* サムネの高さ調整（縦長になりすぎ防止） */
    .work-card__thumb {
        aspect-ratio: 4 / 3;
    }

    .work-card__title {
        font-size: 14px;
        margin-top: 10px;
        line-height: 1.5;
    }
}

/* =========================================================
   WORKS（400px 以下）
========================================================= */
@media (max-width: 400px) {

    .works {
        padding: 80px 0;
    }

    .works__inner {
        padding: 0 18px;
    }

    .works__title {
        font-size: 22px;
        margin-bottom: 28px;
    }

    /* ▼ 1カラムに落とす（見やすさ重視） */
    .works__grid,
    .works__grid--3 {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .work-card__thumb {
        aspect-ratio: 4 / 3;
        border-radius: 8px;
    }

    .work-card__title {
        font-size: 14px;
        margin-top: 8px;
    }
}

/* =========================================================
   PRICE-MINI（768px 以下）
========================================================= */
@media (max-width: 768px) {

    .price-mini {
        padding: 100px 0;
    }

    .price-mini__inner {
        padding: 0 24px;
    }

    .price-mini__label {
        font-size: 13px;
        margin-bottom: 12px;
        padding-left: 14px;
    }

    .price-mini__title {
        font-size: 26px;
        margin-bottom: 6px;
    }

    .price-mini__lead {
        font-size: 14px;
        margin-bottom: 36px;
        line-height: 1.8;
    }

    /* ▼ 3 → 2カラムへ */
    .price-mini__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .price-mini-card {
        padding: 28px 20px;
        border-radius: 12px;
    }

    .price-mini-card__label {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .price-mini-card__title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .price-mini-card__price {
        font-size: 22px;
    }

    .price-mini__btn {
        width: 220px;
        margin-top: 40px;
    }
}

/* =========================================================
   PRICE-MINI（400px 以下）
========================================================= */
@media (max-width: 400px) {

    .price-mini {
        padding: 80px 0;
    }

    .price-mini__inner {
        padding: 0 18px;
    }

    /* ▼ 2 → 1カラムに */
    .price-mini__grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .price-mini-card {
        padding: 26px 18px;
    }

    .price-mini-card__title {
        font-size: 15px;
    }

    .price-mini-card__price {
        font-size: 20px;
    }

    .price-mini__btn {
        width: 200px;
    }
}

/* =========================================
   TEMPLATES（768px 以下）
========================================= */
@media (max-width: 768px) {

    .templates {
        padding: 100px 0;
    }

    .templates__inner {
        padding: 0 24px;
    }

    /* タイトル下の余白を調整 */
    .templates__title {
        font-size: 28px;
        margin-bottom: 36px;
    }

    /* 3カラム → 2カラムに変更 */
    .templates__grid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* カード */
    .template-card__thumb {
        aspect-ratio: 4 / 3;
        border-radius: 10px;
    }

    .template-card__tag {
        font-size: 11px;
        padding: 3px 10px;
        margin-top: 10px;
    }

    .template-card__title {
        font-size: 14px;
        margin-top: 6px;
    }

    /* もっと見るボタン */
    .templates__btn {
        margin-top: 36px;
        font-size: 15px;
        width: 240px;
    }
}

/* =========================================
   TEMPLATES（400px 以下）
========================================= */
@media (max-width: 400px) {

    .templates {
        padding: 80px 0;
    }

    .templates__inner {
        padding: 0 18px;
    }

    /* 見出し縮小 */
    .templates__title {
        font-size: 24px;
        margin-bottom: 28px;
    }

    /* 2カラム → 1カラムに */
    .templates__grid--3 {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* カード大きめに見せる */
    .template-card__thumb {
        border-radius: 12px;
    }

    .template-card__tag {
        font-size: 12px;
        padding: 4px 12px;
    }

    .template-card__title {
        font-size: 15px;
    }

    /* ボタン横幅を自然に */
    .templates__btn {
        width: 100%;
        max-width: 260px;
        font-size: 15px;
    }
}


/* =========================================================
   FLOW（768px 以下）
========================================================= */
@media (max-width: 768px) {

    .flow {
        padding: 100px 0;
        margin-top: 60px;
    }

    .flow__inner {
        padding: 0 24px;
    }

    .flow__label {
        font-size: 13px;
        margin-bottom: 12px;
        padding-left: 14px;
    }

    .flow__title {
        font-size: 26px;
        margin-bottom: 36px;
    }

    /* ▼ 3→1カラムに */
    .flow__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .flow-item {
        padding: 26px 20px;
        border-left-width: 4px;
    }

    .flow-item__number {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .flow-item__title {
        font-size: 17px;
        margin-bottom: 6px;
    }

    .flow-item__text {
        font-size: 15px;
        line-height: 1.7;
    }
}

/* =========================================================
   FLOW（400px 以下）
========================================================= */
@media (max-width: 400px) {

    .flow {
        padding: 80px 0;
    }

    .flow__inner {
        padding: 0 18px;
    }

    .flow__title {
        font-size: 24px;
    }

    .flow-item {
        padding: 22px 18px;
    }

    .flow-item__number {
        font-size: 17px;
    }

    .flow-item__title {
        font-size: 16px;
    }

    .flow-item__text {
        font-size: 14px;
        line-height: 1.8;
    }
}

/* =========================================================
   FAQ（768px 以下）
========================================================= */
@media (max-width: 768px) {

    .faq {
        padding: 100px 0;
    }

    .faq__inner {
        padding: 0 24px;
    }

    .faq__label {
        font-size: 13px;
        margin-bottom: 12px;
        padding-left: 14px;
    }

    .faq__title {
        font-size: 26px;
        margin-bottom: 30px;
    }

    /* 質問ブロック */
    .faq-item {
        padding: 18px 0;
    }

    /* 質問テキスト */
    .faq-question {
        font-size: 16px;
    }

    /* ＋アイコン */
    .faq-icon {
        font-size: 20px;
    }

    /* 回答テキスト */
    .faq-answer {
        font-size: 15px;
        line-height: 1.8;
        padding-right: 6px;
    }

    /* 開いたとき */
    .faq-item.open .faq-answer {
        max-height: 260px;
        padding-top: 12px;
    }
}

/* =========================================================
   FAQ（400px 以下）
========================================================= */
@media (max-width: 400px) {

    .faq {
        padding: 80px 0;
    }

    .faq__inner {
        padding: 0 18px;
    }

    .faq__title {
        font-size: 24px;
        margin-bottom: 26px;
    }

    .faq-question {
        font-size: 15px;
    }

    .faq-icon {
        font-size: 18px;
    }

    .faq-answer {
        font-size: 14px;
        line-height: 1.9;
    }

    .faq-item.open .faq-answer {
        max-height: 230px;
    }
}

/* =========================================================
   CONTACT（768px 以下）
========================================================= */
@media (max-width: 768px) {

    .contact {
        padding: 100px 0;
        background-position: center;
        background-size: cover;
    }

    .contact__inner {
        padding: 0 24px;
    }

    .contact__label {
        font-size: 13px;
        margin-bottom: 12px;
        padding-left: 12px;
        border-left-width: 3px;
    }

    .contact__title {
        font-size: 26px;
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .contact__lead {
        font-size: 15px;
        margin-bottom: 36px;
        line-height: 1.8;
    }

    .contact__info {
        font-size: 18px;
        line-height: 1.7;
        margin-bottom: 24px;
    }

    .contact__btn {
        padding: 14px 20px;
        width: 100%;
        max-width: 260px;
        font-size: 16px;
        margin: 26px auto 0;
        text-align: center;
    }
}

/* =========================================================
   CONTACT（400px 以下）
========================================================= */
@media (max-width: 400px) {

    .contact {
        padding: 80px 0;
    }

    .contact__inner {
        padding: 0 18px;
    }

    .contact__title {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .contact__lead {
        font-size: 14px;
        margin-bottom: 30px;
    }

    .contact__info {
        font-size: 17px;
    }

    .contact__btn {
        padding: 12px 18px;
        font-size: 15px;
        max-width: 240px;
        margin: 0 auto;
        display: inline-block;
    }
}

/* ======================================================
   FOOTER（768px 以下）SP
====================================================== */
@media (max-width: 768px) {

    .footer {
        padding-top: 60px;
    }

    .footer__inner {
        padding: 0 24px 40px;
        display: grid;
        grid-template-columns: 1fr;
        /* ← スマホは1カラム */
        gap: 40px;
        text-align: left;
    }

    /* MENU（768px以下は非表示） */
    .footer__col--menu {
        display: none;
    }

    /* BRAND 調整 */
    .footer__logo {
        font-size: 20px;
    }

    .footer__desc {
        font-size: 13px;
        line-height: 1.8;
        margin: 14px 0 20px;
    }

    /* SNS */
    .footer__sns a {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* CTA */
    .footer__cta {
        text-align: center;
    }

    .footer__title {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .footer__cta-text {
        font-size: 13px;
        line-height: 1.7;
        margin-bottom: 12px;
    }

    .footer__btn {
        width: 100%;
        max-width: 260px;
        margin: 0 auto;
        display: block;
    }

    .footer__bottom {
        padding: 16px 0;
        font-size: 12px;
    }
}


/* ======================================================
   FOOTER（400px 以下）
====================================================== */
@media (max-width: 400px) {

    .footer {
        padding-top: 50px;
    }

    .footer__inner {
        padding: 0 18px 36px;
        gap: 32px;
    }

    .footer__logo {
        font-size: 18px;
    }

    .footer__desc {
        font-size: 12px;
    }

    .footer__title {
        font-size: 14px;
    }

    .footer__nav li a {
        font-size: 13px;
    }

    .footer__btn {
        max-width: 230px;
        padding: 12px 0;
        font-size: 14px;
    }

    .footer__bottom {
        font-size: 10px;
    }
}



.work-archive__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.work-card {
    display: block;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform .3s ease, box-shadow .3s ease;
}

.work-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 28px rgba(0,0,0,0.12);
}

.work-card__thumb img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}

.work-card__body {
    padding: 16px;
}

.work-card__title {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 8px;
}

.meta-tag,
.meta-client {
    display: inline-block;
    background: #eef3f7;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    margin-right: 6px;
}