/*
Theme Name: hanable-theme
Description: hanable WEB DESIGN & SUPPORT 公式サイト
Version: 1.0.0
Author: hanable
*/

/* 1. フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Baskervville:italic@0;1&family=Noto+Sans+JP:wght@400;700&display=swap');

/* 2. hanable専用・色のルール（変数） */
:root {
    /* メインカラー系統 */
    --main-color: #7B0026;      /* ボルドー */
    --accent-color: #D682A0;    /* ピンク */

    /* 背景・エリア系統 */
    --bg-light: #F4F9F9;        /* ミストブルー（セクション用） */
    --fv-footerbg: #DFEFEF;     /* 爽やかブルー（FV・フッター用） */
    --bg-white: #ffffff;        /* 基本の白 */
    --bg-works: #efeeed;        /* ★万能グレージュ（実績枠用） */

    /* 文字色系統 */
    --text-main: #333333;       /* 基本の黒 */
    --text-title: #4a4546;      /* ★実績タイトル（柔らかい黒） */
    --text-sub: #746D6F;        /* グレー文字 */
}


.section-padding {
    padding: 120px 0;
}

/* 3. 全体的な基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-main);
    line-height: 1.8;
    letter-spacing: 0.05em;
    background-color: #fff;

}

.eng-title {
    font-family: 'Baskervville', serif;
    font-style: italic;
}

/*  スマホ専用要素の表示制御 */
/* HTMLのクラス名に合わせて修正。PC版では非表示にする */
.u-mobile-only,
.u-mobile-only-btn {
    display: none !important;
}

/* スマホ版（767px以下）の時だけ表示する */
@media screen and (max-width: 767px) {
    .u-mobile-only,
    .u-mobile-only-btn {
        display: block !important;
    }
}


/* ============================================================
    ボタン設定：ホバー連動・矢印アニメーション
   ============================================================ */

/* [1] ボタンの土台（すべての状態の基本） */
.btn-primary,
.btn-secondary,
input[type="submit"],
button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    padding: 15px 30px; /* 50pxだとスマホで溢れるので30pxに調整 */
    height: 60px;
    font-size: 16px;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap; /* ★これ追加：文字が絶対に縦に割れないようにする */
}

/* [2] 通常時の色設定（!importantなし） */
/* メインボタン：ボルドー */
.btn-primary,
input[type="submit"],
button[type="submit"] {
    background-color: var(--main-color) !important; /* 強制的にボルドーを維持 */
    color: #ffffff !important;
    border-color: var(--main-color) !important;
}

/* サブボタン：白抜き */
.btn-secondary {
    background-color: #ffffff !important;
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}


/* [3] 【重要】ホバー時：カーソルを当てたときだけ発動 */
/* メインボタン → ピンクへ */
.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--accent-color) !important; 
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
    opacity: 1;
}

/* サブボタン → 薄い水色へ */
.btn-secondary:hover {
    background-color: var(--fv-footerbg) !important;
    color: var(--main-color) !important;
}

/* [4] 矢印（span）の動き：カーソルを当てたときに右へ動く */
.btn-primary span,
.btn-secondary span {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 8px; /* ★これ追加：文字と矢印の間に最低限のスキマを作る */
}

/* ホバーした時に5px右へ */
.btn-primary:hover span,
.btn-secondary:hover span {
    transform: translateX(5px);
}

.btn-work-link:hover {
    background-color: #ffffff;
    border-color: var(--main-color);
    color: var(--main-color);
}


/* [5] スマホ用の調整 */
@media screen and (max-width: 767px) {
    .btn-primary,
    .btn-secondary,
    input[type="submit"],
    button[type="submit"] {
        height: 54px;
        padding: 0 20px; /* 30pxから20pxに減らして文字スペースを確保 */
        font-size: 15px;
        display: flex; /* flexを維持 */
        justify-content: center; /* 文字を真ん中に配置 */
        width: 250px; /* 100%をやめて、スマホでちょうどいい固定幅に */
        margin-left: auto;
        margin-right: auto;
    }
}




/* --- 4. 共通パーツの設定 --- */

/* 全てのセクションのボタンエリアを中央寄せにする */
.concept-btn, .service-footer, .view-more-area, .profile-btn {
    text-align: center;
    width: 100%;
    margin-top: 50px; /* 上との余白もここで統一できます */
}

/* --- セクションタイトル共通 --- */
.section-title-area {
    margin-bottom: 50px; /* タイトルエリアから下のコンテンツまでの距離を固定 */
    display: table;      /* ★重要：inline-blockをtableに変えると、文字幅にピタッと合います */
    margin-left: auto;   /* 中央寄せ魔法 */
    margin-right: auto;  /* 中央寄せ魔法 */
    position: relative;  /* ★透かし文字の配置基準にするために追加 */
    text-align: center;
}

.section-title-en {
    font-size: 32px;
    color: var(--main-color);
    letter-spacing: 0.15em;
    line-height: 1.4;    /* 重なり解消 */
    position: relative;  /* 透かし文字より上に表示させるため */
    z-index: 2;          /* 透かし文字より上に表示させるため */
    margin-bottom: 10px; /* ★日本語との間の余白をここで統一 */
    font-family: 'Playfair Display', serif; /* もし英語フォントを指定してたらここ */
}

/* ★透かし文字（Watermark）の設定 */
.section-title-en::before {
    /* content: "CONCEPT"; 
       ↑本来はここに入れますが、各セクションで変えたい場合は
       HTML側の各h2に個別のクラスをつけるか、今は一旦共通のデザインだけ定義します */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 真ん中に配置 */
    
    font-size: 80px;      /* メインよりかなり大きく */
    font-weight: 900;
    color: rgba(0, 0, 0, 0.03); /* ★すごく薄いグレー。背景が水色の場所でも馴染みます */
    z-index: 1;           /* メイン(z-index:2)の後ろ、背景より前 */
    white-space: nowrap;
    letter-spacing: 0.1em;
    pointer-events: none; /* 透かし文字がクリックの邪魔をしないように */
}

.section-title-jp {
    display: block;
    font-size: 12px;
    color: var(--accent-color);
    letter-spacing: 0.2em;
    margin-top: 15px; /* 詰まり解消 */
    position: relative;
    z-index: 2;
}

/* 各セクションの透かし文字内容 */
.concept .section-title-en::before { content: "CONCEPT"; }
.problem .section-title-en::before { content: "IS THIS YOU?"; }
.service .section-title-en::before { content: "SERVICE"; }
.works   .section-title-en::before { content: "WORKS"; }
.profile .section-title-en::before { content: "PROFILE"; }
.contact .section-title-en::before { content: "CONTACT"; }
.work-detail .section-title-en::before { content: "WORKS"; }
.other-works .section-title-en::before { content: "OTHER WORKS"; }
.works-archive.other-works .section-title-en::before { content: "WORKS"; }
.about .section-title-en::before { content: "ABOUT"; }
.skill .section-title-en::before { content: "SKILL"; }


/* 共通の青いライン */
.section-title-area::after {
    content: "";
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--fv-footerbg);
    z-index: 1;
}




/* --- ヘッダー全体のデザイン（崩れ防止・保護版） --- */
.site-header {
    background-color: var(--bg-white);
    padding: 20px 0;
    width: 100%;
    position: relative;
    z-index: 100; /* FVより上に表示 */
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* ロゴの保護（青文字にならないように） */
.header-logo a {
    text-decoration: none; 
    display: flex;
    flex-direction: column;
    width: fit-content;
    color: inherit;
}

.logo-main {
    font-family: 'Baskervville', serif;
    font-style: italic;
    font-size: 32px;
    color: var(--main-color);
    line-height: 1;
    display: block;
}

.logo-sub {
    font-size: 8px;
    letter-spacing: 0.1em;
    color: var(--main-color);
    margin-top: 5px;
    text-align: center;
    border-top: 1px solid var(--main-color);
    padding-top: 3px;
    display: block;
}

/* PC用ナビゲーション */
.header-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* PC版ではスマホ専用クラスがついた要素（ボタンなど）を隠す */
@media screen and (min-width: 768px) {
    .u-mobile-only {
        display: none !important;
    }
}

.nav-menu {
    display: flex;
    gap: 40px;
    margin-right: 40px;
    list-style: none;
    padding: 0;
    margin: 0 40px 0 0;
}

.nav-menu li a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 5px 0;
    color: inherit;
}

.nav-menu li a span.menu-en {
    font-family: 'Baskervville', serif;
    font-style: italic;
    font-size: 18px;
    color: var(--main-color);
    line-height: 1.2;
}

.nav-menu li a span.menu-jp {
    font-size: 9px;
    color: var(--text-main);
    margin-top: 14px;
}

.nav-menu li a::after {
    content: "";
    position: absolute;
    top: 48%;
    width: 100%;
    height: 1px;
    background-color: #A3C6C4;
}

/* ============================================================
   スマホ用ナビゲーション（位置調整版）
   ============================================================ */
@media screen and (max-width: 767px) {
    /* ヘッダーを固定するとFVが下に潜り込むので、高さを維持 */
    .site-header {
        position: fixed;
        top: 0;
        /* width: 100%の代わりに左右0指定 */
        left: 0;
        right: 0; 
        z-index: 1000;
        height: 70px;
        padding: 10px 0;
    }
    .header-inner {
        padding: 0 20px;
    }

    /* 右からスライドするメニュー */
    .header-nav {
        position: fixed;
        top: 0;
        /* 画面右端の外側に待機 */
        right: -100%; 
        width: 80%;
        /* 画面の高さ一杯に。 bottom: 0; を使うと高さ計算が安定します */
        bottom: 0; 
        background: #ffffff;
        z-index: 1050;
        padding: 100px 20px 40px;
        transition: right 0.4s ease;
        display: block; 
        margin-left: 0;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }

    /* メニューが開いた状態 */
    .header-nav.is-active {
        right: 0;
    }

    .nav-menu {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin-right: 0;
        width: 100%;
        display: flex; /* 縦並びのflexにする */
    }

    .nav-menu li a::after {
        display: none;
    }

    .nav-menu li a span.menu-jp {
        margin-top: 5px;
    }

    /* PC用のボタンを隠す */
    .u-desktop-only {
        display: none !important;
    }
    .u-mobile-only {
        display: block !important;
    }

}

/* ============================================================
   ハンバーガーボタンの見た目（追加）
   ============================================================ */
.hamburger {
    display: none; /* 基本は隠す */
}

@media screen and (max-width: 767px) {
    .hamburger {
        display: block; /* 確実に出す */
        position: fixed; /* relativeからfixedに変更して、画面の右上に固定 */
        top: 23px;      /* ヘッダーの中央に見えるように調整 */
        right: 20px;    /* 右端からの距離 */
        z-index: 2000;  /* どの要素よりも一番上にくるように数字を大きく */
        width: 30px;
        height: 24px;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
    }

    /* 三本線の色を確実に見せる（変数が効いていない場合に備えて直接指定もアリ） */
    .hamburger span {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #7B0026; /* 直接ボルドーを指定 */
        transition: all 0.4s;
    }

    /* 1本目、2本目、3本目の位置 */
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 11px; }
    .hamburger span:nth-child(3) { bottom: 0; }

    /* メニューが開いた時の「×」の形 */
    .hamburger.is-active span:nth-child(1) {
        transform: translateY(11px) rotate(-45deg);
    }
    .hamburger.is-active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.is-active span:nth-child(3) {
        transform: translateY(-11px) rotate(45deg);
    }
}

/* Safariでのクリック反応を確実にするおまじない */
#js-hamburger {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


/* ============================================================
    メインページ
   ============================================================ */


/* ============================================================
   FV（メインビジュアル）セクション
   ============================================================ */



/* FV全体の土台（横揺れ防止を含む） */
.fv {
    background-color: var(--fv-footerbg);
    padding: 100px 0 0;
    position: relative;
    text-align: center;
    width: 100%; /* ここは消してもいいですが、あっても問題ない場所です */
    overflow: hidden; /* ★これが重要！中の画像が180%あっても、ここで切り取ります */
}

.fv-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 80vh;
    position: relative;
}

/* FV文字コンテンツエリア */
.fv-content {
    width: 100%;
    max-width: 100vw;
    z-index: 2;
    margin-top: 50px;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 各テキストの共通設定 */
.fv-sub, .fv-sub-2, .fv-main {
    max-width: 100%;
    word-wrap: break-word;
}

.fv-sub {
    font-family: 'Baskervville', serif;
    font-style: normal;
    font-size: 24px;
    color: var(--main-color);
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    text-transform: uppercase;
    animation: fadeInUp 1.2s ease-out 0.8s forwards;
    opacity: 0;
}

.fv-sub-2 {
    font-size: 16px;
    color: var(--accent-color);
    margin-bottom: 30px;
    animation: fadeInUp 1.2s ease-out 0.8s forwards;
    opacity: 0;
}

.fv-main {
    font-size: 72px;
    color: var(--main-color);
    letter-spacing: 0.15em;
    padding-left: 0.25em;
    text-shadow: 0 0 20px #fff, 0 0 40px rgba(223, 239, 239, 0.9);
    display: inline-block;
    width: 100%;
    text-align: center;
    animation: fadeInUp 1.2s ease-out 0.5s forwards;
    opacity: 0;
}

/* 4. 装飾と画像 */
.fv-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    color: var(--main-color);
    opacity: 0.6;
}

.fv-decoration .line {
    width: 40px;
    height: 1px;
    background-color: var(--main-color);
}

.fv-decoration .dec-text {
    font-size: 12px;
    letter-spacing: 0.3em;
    font-family: 'Baskervville', serif;
}

.fv-image {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    max-width: 1800px;
    z-index: 1;
    pointer-events: none;
    animation: fadeInUpFlower 1.5s ease-out forwards;
}

.fv-image img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: -400px;
    opacity: 0.9;
}

/* 5. スクロール案内 */
.scroll-en {
    position: absolute;
    bottom: 40px;
    right: 50px;
    writing-mode: vertical-rl;
    font-family: 'Baskervville', serif;
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--main-color);
    z-index: 10;
}

.scroll-en::after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 50%;
    width: 1px;
    height: 40px;
    background: var(--main-color);
    animation: scrollLine 2s infinite;
}

/* --- アニメーション定義 --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUpFlower {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- 6. スマホ用の調整（上書き） --- */
@media screen and (max-width: 767px) {
    .fv-inner {
        min-height: 70vh; /* 高さを抑える */
        justify-content: flex-start; /* 文字を上に逃がす */
    }

    .fv-content {
        margin-top: 20px; /* 文字の位置を上げる */
    }

    .fv-main {
        font-size: 32px; /* スマホサイズ */
    }

    .fv-image {
        width: 180%; 
        bottom: -20px;
    }

    .fv-image img {
        margin-top: -150px;
    }
}

html, body {
    overflow-x: hidden; /* 横方向のはみ出し（余白の原因）をカットする */
    /* width: 100%; は消してOKです */
}


/* ============================================================
   お知らせバナーセクション（PC・スマホ共通）
   ============================================================ */
.news-banner {
    background: linear-gradient(90deg, #8E76B2 0%, #614682 100%); 
    color: #ffffff;
    padding: 25px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.banner-inner p {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin: 0;
    line-height: 1.2;
}

.news-banner::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 25%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    pointer-events: none;
    animation: shine 4s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}


/* --- CONCEPTセクション全体 --- */
.concept {
    padding: 100px 0;
    background-color: var(--bg-white);
    text-align: center; /* 基本は中央揃え */
}

.concept-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}


/* 文章エリアと引用マーク（始まりと終わり） */
.concept-body {
    position: relative;
    padding: 60px 0;
    max-width: 700px; /* 文章を少し中央に寄せて読みやすく */
    margin: 0 auto;
}

/* 引用マーク共通設定 */
.concept-body::before,
.concept-body::after {
    font-size: 100px;
    color: var(--accent-color);
    opacity: 0.15;
    font-family: 'Baskervville', serif;
    position: absolute;
    line-height: 1;
}

/* 始まりのマーク（左上） */
.concept-body::before {
    content: "“";
    top: -10px;
    left: -40px;
}

/* 終わりのマーク（右下） */
.concept-body::after {
    content: "”";
    bottom: -30px;
    right: -40px;
}

.concept-text {
    font-size: 16px;
    line-height: 2.2;
    margin-bottom: 30px;
    color: var(--text-main);
    text-align: center; /* 文章も中央揃え */
}


/* --- サブボタン（白抜き・青枠・ボルドー文字） --- */
.concept-btn {
    margin-top: 50px;
}


/* --- お悩みチェックセクション --- */
.problem {
    padding: 120px 0; /* ★スペースを広めに確保（100px → 120px） */
    background-color: var(--bg-light); 
    text-align: center;
}

.problem-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}


/* メインの問いかけ */
.problem-lead {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    color: var(--main-color); 
}

.problem-sub-lead {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 2.0; /* 行間を広げて「ゆとり」を */
    margin-bottom: 60px;
}

/* チェックリスト（画像使用版） */
.check-list {
    list-style: none;
    text-align: left;
    max-width: 620px;
    margin: 0 auto 100px;
}

.check-list li {
    position: relative;
    padding-left: 50px; /* 画像のスペース */
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-main);
    display: flex;
    align-items: center;
    min-height: 30px;
}

/* ★チェックマークの画像設定 */
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; /* 画像のサイズに合わせて調整してください */
    height: 30px;
    /* ここにチェックマーク画像をセット */
    background-image: url('images/check-icon.png'); 
    background-size: contain;
    background-repeat: no-repeat;
}

/* 下部のメッセージエリア */
.problem-message {
    margin-top: 120px;
}

/* 「一つでも当てはまるなら、」 */
.message-highlight {
    display: block;
    color: var(--main-color);
    font-weight: bold;
    font-size: 18px; /* ★あえて少し小さくして、次への「溜め」を作ります */
    margin-bottom: 25px;/* 下との間隔を少し広げた */
}

/* メインメッセージ */
.message-main {
    font-size: 28px;
    line-height: 2.0;
    color: var(--main-color);
    display: inline-block;
}

.message-main span {
    position: relative;
    z-index: 1;
}

/* 青いバー（マーカー）の設定 */
.message-main span.marker {
    position: relative;
    z-index: 1;
    display: inline-block; /* バーを文字幅に合わせるため */
    padding: 0 4px;
}

/* ★「想い」「情報」「整えるところ」すべてに青いバーを引く */
.message-main span::after {
    content: "";
    position: absolute;
    bottom: 6px; /* バーの位置 */
    left: 0px;
    width: 100%;
    height: 10px; /* バーの太さ */
    background-color: var(--fv-footerbg); /* #DFEFEF */
    z-index: -1; /* 文字の下に潜り込ませる */
    opacity: 0.8;
}

/* style.css の .message-main もしくはレスポンシブ部分 */
.message-main {
    word-break: keep-all; /* 単語の途中（。や、や括弧の前後）以外で改行しにくくする */
}


/* --- SERVICEセクション --- */
.service {
    padding: 120px 0;
    background-color: var(--bg-white);
    text-align: center;
}

.service-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.service-lead {
    font-size: 18px;
    color: var(--text-title); /* 1行目は基本の黒に変更 */
    font-weight: bold;
    line-height: 2; /* 少しゆとりを持たせる */
    margin-bottom: 80px;
}

/* 2行目の強調（.u-highlight）にボルドーを適用 */
.service-lead .u-highlight {
    color: var(--main-color);
}


/* サービスカードの並び */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 100px;
    align-items: stretch; /* 中のカードの高さを強制的に揃える */
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    height: 100%;
    justify-content: flex-start; /* 上揃えを起点にする */
}

.card-desc {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: center; /* 左寄せから中央寄せに変更し、アイコンとの軸を合わせます */
    width: 100%;
}

.card-title-en {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--main-color);
    letter-spacing: 0.05em;
    line-height: 1.4;
    margin-bottom: 5px;
    /* ★ここを追加：2行分（1.4 * 2 = 2.8rem）の高さを持たせる */
    min-height: 2.8em; 
    display: flex;
    align-items: center; /* 1行の時でも中央に来るように */
    justify-content: center;
}

/* 日本語タイトルの位置を安定させる */
.card-title-jp {
    font-size: 13px;
    color: var(--text-sub);
    margin-bottom: 30px; /* 15pxから20pxへ少し広げて呼吸させる */
    letter-spacing: 0.05em;
    margin-top: 8;
}

/* アイコンを円で囲む */
.card-icon {
    width: 160px;
    height: 160px;
    background-color: var(--bg-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom:40px; /* ★25pxから30pxへ微増。これで「Web制作」の浮きを抑えます */
    flex-shrink: 0;
}

.card-icon img {
    width: 95px; /* 70pxから95pxへアップ！円とのバランスを整えます */
    height: auto;
    /* アイコンの色をボルドーにするフィルター（画像自体が黒い場合） */
    /* filter: sepia(100%) saturate(2000%) hue-rotate(315deg) brightness(50%) contrast(100%); */
}

.card-desc {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: left; /* 説明文は左寄せ */
}

.card-example {
    text-align: left;
    width: 100%;
}

.example-label {
    font-size: 13px;
    font-weight: bold;
    color: var(--text-main); /* キリッとした黒に変更 */
    margin-bottom: 5px;
}

.card-example p:last-child {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.6;
}

/* サービス下のメッセージ */
.service-footer {
    margin-top: 100px;
    border-top: 1px solid var(--fv-footerbg);
    padding-top: 80px;
}

.footer-sub {
    font-size: 18px;
    font-weight: bold;
    color: var(--main-color);
    margin-bottom: 30px;
}

.footer-text {
    font-size: 14px;
    line-height: 2.2; /* ★行間を広げて「読み物」として整える */
    color: var(--text-sub);
    margin-bottom: 80px;
}

/* 相談CTAエリア */
.service-cta {
    background-color: #fff;
    padding: 20px 0;
}

.cta-msg {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 15px;
}

.cta-sub {
    font-size: 13px;
    color: var(--text-sub);
    margin-bottom: 40px;
}

.profile-text .u-highlight {
    color: var(--main-color);
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
    .service-grid {
        grid-template-columns: 1fr; /* 1列にする */
    }
    .service-grid {
        gap: 60px; /* カードとカードの間を少し広げて、別々の情報だと認識させる */
    }
    .card-icon {
        width: 140px;  /* スマホでは一回り小さく */
        height: 140px;
        margin-bottom: 20px;
    }
    .card-icon img {
        width: 80px;   /* 中のアイコンも調整 */
    }
}

/* SP特化型（PC画像がない時）のスタイル */
section.work-detail .work-detail-scroll-area.only-sp {
    justify-content: center;
    width: 100%;
}

section.work-detail .work-detail-scroll-area.only-sp .window-sp {
    max-width: 450px; /* 少し大きめに表示して見やすくする */
    height: 700px;   /* 高さも少し出す */
    border: 8px solid #333; /* スマホ本体っぽく太めの枠に */
    border-radius: 30px;    /* 角を丸くしてスマホ感を出す */
}

/* ============================================================
PROFILE
   ============================================================ */

.profile {
    background-color: var(--bg-white);
}

.profile-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
}

.profile-container {
    display: flex;
    align-items: center; /* 上下中央揃え */
    gap: 60px;
    margin-top: 60px;
}

/* 左側：画像エリア */
.profile-image {
    flex: 0 0 350px; /* 幅を350pxで固定 */
}

.profile-image img {
    width: 100%;
    height: auto;
}

/* 右側：文章エリア */
.profile-content {
    flex: 1;
    text-align: left;
}

.profile-name-area {
    margin-bottom: 30px;
}

.name-ruby {
    display: block;
    font-size: 14px;
    color: var(--accent-color);
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    
}

.profile-name {
    font-size: 24px;
    color: var(--main-color);
    letter-spacing: 0.2em;
}

.profile-text {
    font-size: 15px;
    line-height: 2.0;
    color: var(--text-main);
    margin-bottom: 25px;
}

.profile-text:last-of-type {
    margin-bottom: 40px;
}
 
.profile-btn-area {
    margin-top: 30px;
}



/* スマホ対応 */
@media screen and (max-width: 767px) {
    .profile-container {
        flex-direction: column; /* 縦並びに変更 */
        gap: 40px;
    }
    .profile-inner {
        padding: 0 20px;
    }

    .profile-image {
        flex: 0 0 auto;
        width: 250px; /* スマホでは少し小さく */
    }
    .profile-content {
        text-align: center; /* スマホでは中央揃えが綺麗 */
    }
    .profile-text {
        text-align: left; /* 文章自体は左寄せで読みやすく */
    }
}

/* --- CONTACTセクション --- */
.contact {
    background-color: var(--bg-light); /* 薄い水色の背景 */
}

.contact-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
}

.contact-lead-area {
    text-align: center;
    margin-bottom: 80px;
}

.contact-lead {
    font-size: 18px;
    font-weight: bold;
    color: var(--main-color);
    margin-bottom: 10px;
}

.contact-sub-lead, .contact-note {
    font-size: 15px;
    line-height: 2.2;
    color: var(--text-sub);
}

.contact-note {
    margin-top: 30px;
}

/* フォーム全体：幅を800pxに広げてゆったりさせる */
.wpcf7-form {
    max-width: 800px; 
    margin: 0 auto;
}

/* 各項目のコンテナ */
.form-item {
    display: block !important; /* 縦並びなら block で十分安定します */
    margin-bottom: 25px; /* 項目ごとの間隔を少し調整 */
    width: 100%;
}

/* ラベル：文字そのものの上下余白を削り取る */
.form-item label {
    display: inline-block !important;
    margin: 0 !important;        /* 全方向の余白をゼロに強制 */
    padding: 0 !important;
    line-height: 1.0 !important; /* 行間を限界まで詰める */
    font-size: 15px;
    font-weight: bold;
    color: var(--text-title);
}

/* ラベル直後の「目に見えない隙間（改行など）」を完全に消す */
.form-item label br,
.form-item label + br {
    display: none !important;
}

/* 入力欄を包む箱の「上の余白」をマイナスに振って無理やり引き寄せる */
.form-item .wpcf7-form-control-wrap {
    display: block !important;
    margin-top: 2px !important; /* マイナス指定で上のラベルに吸い付かせます */
    padding: 0 !important;
}

/* 入力欄共通 */
.form-item .wpcf7-form-control {
    display: block !important;
    width: 100% !important;
    padding: 12px 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    font-family: inherit;
    font-size: 16px;
    box-sizing: border-box !important;
}

/* ボタン付近：中央寄せを保証 */
.contact-btn {
    margin-top: 50px;
    text-align: center;
    width: 100%;
}

.form-monitor {
    text-align: center;
    display: block;
    color: var(--accent-color);
    width: 100%;
}

/* CF7の送信ボタンを中央へ */
.wpcf7-submit {
    display: block !important; /* inline-blockだと隙間ができることがあるためblockに変更 */
    margin: 0 auto !important;
    padding: 15px 50px; /* ボタン内の余白を左右均等にする */
    border: none;
}

/* textarea 本体の外側の余白を完全にゼロにする */
.form-item textarea.wpcf7-form-control {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* スマホ対応 */
@media screen and (max-width: 767px) {
    .form-item {
        flex-direction: column; /* 縦並びにする */
    }

    .contact-inner {
        padding: 0 20px;
    }

    .form-item label {
        flex: 0 0 auto;
        margin-bottom: 10px;
        padding-top: 0;
    }

    /* スマホ時は横幅をいっぱいにする */
    .form-item .wpcf7-form-control-wrap {
        width: 100%;
    }
}

.contact-casual {
    margin-top: 60px; /* ボタンとの距離 */
    text-align: center;
}

.casual-text {
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 15px;
}

.sns-icon {
    width: 30px; /* アイコンのサイズ */
    height: auto;
    transition: opacity 0.3s;
}

.sns-icon:hover {
    opacity: 0.7;
}

/* --- フッター全体のデザイン --- */
.site-footer {
    background-color: var(--fv-footerbg); /* FVと同じ水色でサンドイッチして統一感を */
    padding: 60px 0 30px;
    text-align: center;
}

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

/* メニューの配置（基本はヘッダーの .nav-menu を流用） */
.footer-nav {
    margin-bottom: 40px;
}

.footer-nav .nav-menu {
    justify-content: center; /* 中央寄せ */
}

/* フッターの時だけは、中のメニューのラインを消す */
.site-footer .nav-menu li a::after {
    display: none; 
}

/* ついでに英語と日本語の隙間をフッター用に少し詰める */
.site-footer .nav-menu li a span.menu-jp {
    margin-top: 5px; /* ラインがなくなった分、少し上に寄せる */
}




@media screen and (max-width: 767px) {
    /* site-footerの中にあるnav-menu、と指定を限定することで優先度を確保 */
    .site-footer .nav-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;        /* autoではなく0でリセット */
        padding: 0;
        width: 100%;
        list-style: none;
        gap: 20px;        /* スマホ時のメニュー間の隙間 */
    }

    .footer-inner {
        padding: 0 20px;
    }

    .site-footer .nav-menu li {
        margin: 0;        /* PCでの margin-right: 40px 等を打ち消す */
        width: 100%;
        text-align: center;
    }
}

/* --- PAGE TOP (トップへ戻る) --- */
.page-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--main-color);
    border-radius: 50%;
    z-index: 99;
    opacity: 0; /* 最初は隠す */
    visibility: hidden;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

/* スクロールした時にJSでこのクラスを付与する */
.page-top.is-show {
    opacity: 1;
    visibility: visible;
}

/* 矢印（↑）のデザイン */
.page-top span {
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(-45deg);
    margin-top: 4px;
}

.page-top:hover {
    background-color: var(--accent-color);
    transform: translateY(-5px); /* 少し上に跳ねる遊び心 */
}

@media screen and (max-width: 767px) {
    .page-top {
        right: 15px;
        bottom: 15px;
        width: 45px;
        height: 45px;
    }
}

/* コピーライト */
.copyright p {
    font-size: 12px;
    color: var(--main-color);
    letter-spacing: 0.1em;
}


/* ============================================================
    WORKS (共通一覧ルール：TOP / ARCHIVE / OTHER WORKS)
   ============================================================ */

/* 1. 全体レイアウト */
.works-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. グリッド：PCは2列 */
.works-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* PCは2列 */
    gap: 60px 40px;
    margin-bottom: 60px;
}

/* 3. 展示ボックス（グラデーション背景） */
.works-img {
    background: radial-gradient(circle at center, var(--bg-white) 30%, var(--bg-works) 100%);
    border: 1px solid rgba(0, 0, 0, 0.05); 
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.02);
    /* パディングを 20px → 10px に。これで画像が少し大きく表示されます */
    padding: 10px; 
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
}

/* 4. 画像の収まり（はみ出し防止） */
.works-img img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain; 
    transition: transform 0.5s ease;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

.works-item:hover .works-img img {
    transform: scale(1.05);
}

/* 5. テキスト周り：リンク装飾を消して上品に */
.works-item a {
    text-decoration: none !important; /* 下線を消す */
    color: inherit !important;       /* 青色を防ぎ、文字色を継承 */
    display: block;
}

.works-title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
    color: var(--text-title);
    text-align: left;
    transition: color 0.3s ease; /* ホバー時の変化を滑らかに */
}

/* ホバーした時だけボルドーにする */
.works-item a:hover .works-title {
    color: #b0304a; 
}

.works-details {
    font-size: 13px;
    color: var(--text-sub);
    text-align: left;
    text-decoration: none; /* 詳細側の念のため下線防止 */
}


/* 6. フィルタリング用 */
.works-item.is-hidden,
.works-item.is-hide {
    display: none !important;
}

.works-filter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 25px; /* ボタン同士の間隔を少し広げてゆとりを出す */
    margin-bottom: 40px;
}

.filter-btn {
    background: none;
    border: none;
    padding: 5px 0;
    cursor: pointer;
    font-size: 14px;
    color: #999;
    letter-spacing: 0.05em;
    position: relative;
    transition: color 0.3s, opacity 0.3s; /* transitionを少し拡張 */
}

/* ホバーした時にボルドーにする */
.filter-btn:hover {
    color: var(--main-color);
    opacity: 0.8; /* わずかに透けさせて「押せる感」を出す */
}


/* アクティブな項目に細い下線をつける（タグ感を消す演出） */
.filter-btn.active {
    color: var(--main-color);
    font-weight: bold;
}

.filter-btn.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--main-color);
}

.filter-sep {
    color: #eee; /* 区切り棒を極限まで薄くして存在感を消す */
}

/* --- レスポンシブ：実績一覧（セクションの最後） --- */
@media screen and (max-width: 767px) {
    .works-grid {
        grid-template-columns: 1fr !important; /* スマホは1列 */
        gap: 40px 0;
    }
}

/* ============================================================
    実績詳細（single-works 専用スタイル）
   ============================================================ */

.work-detail-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 1. ビジュアルエリア（メイン画像） */
.work-detail-visual {
    margin: 0 auto 60px;
    background: radial-gradient(circle at center, var(--bg-white) 30%, var(--bg-works) 100%);
    border: 1px solid rgba(0, 0, 0, 0.05); 
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.02);
    width: 100%;
    aspect-ratio: 4 / 3; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 4px;
    overflow: hidden;
}

.work-detail-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.12));
}

/* 2. テキスト情報エリア */
.work-detail-info {
    margin-bottom: 60px;
}

.work-name {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-title); /* どぎつくない柔らかい黒 */
    margin-bottom: 10px;
}

.work-category {
    font-size: 1rem;
    color: var(--text-sub);
    margin-bottom: 40px;
}

/* 項目リスト：細いラインと広い行間 */
.works-detail-list {
    margin-bottom: 60px;
}

.works-detail-list dl {
    display: flex;
    flex-wrap: wrap;
    padding: 1.5rem 0; /* 行間をゆったり確保 */
    border-bottom: 1px solid #e0e0e0; /* 雲澤寺様風の繊細なライン */
    margin: 0;
}

.works-detail-list dt {
    width: 160px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--main-color); /* 項目名はボルドーでアクセント */
    letter-spacing: 0.05em;
}

.works-detail-list dd {
    flex: 1;
    min-width: 250px;
    font-size: 1rem;
    color: var(--text-main);
    margin: 0;
    line-height: 1.8;
}

/* 3. 制作のポイント */
.works-point-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-title);
    margin: 4rem 0 1.5rem;
    padding-left: 1rem;
    border-left: 4px solid var(--main-color);
}

.works-point-content {
    background-color: var(--bg-light); /* 薄いミストブルー */
    padding: 2.5rem;
    border-radius: 8px;
    white-space: pre-wrap; /* 改行を反映 */
    color: var(--text-main);
    line-height: 2; /* 本文の行間をさらに広く */
}

.work-link-area {
    margin-top: 60px;
    text-align: center;
}

/* 4. LPスクロールエリア */
.work-detail-scroll-area {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin: 80px auto;
    position: relative;
}

.lp-scroll-window {
    flex: 1;
    max-width: 600px;
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #ddd;
    background: #fff;
}

.work-detail-scroll-area.only-sp .window-sp {
    flex: 0 1 450px;
    height: 700px;
    border: 8px solid #333;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.lp-scroll-window img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- レスポンシブ：詳細（セクションの最後） --- */
@media screen and (max-width: 767px) {
    .work-detail-visual {
        aspect-ratio: auto;
        min-height: 350px;
    }
    .works-detail-list dt {
        width: 100%;
        margin-bottom: 5px;
    }
    .work-detail-scroll-area {
        flex-direction: column;
        align-items: center;
    }
    .window-pc { display: none; }
}


/* ============================================================
    about.html
   ============================================================ */

/* --- ABOUTセクション --- */
.about {
    background-color: var(--bg-white);
    /* 他の単独ページのヘッダー余白 120px〜140px 前後に合わせ、上下の余白を統一 */
    padding: 120px 0; 
}


   /* ABOUTページ独自のコンセプトタイトル */
.about-concept-title {
    color: var(--main-color);
    font-size: 24px;
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
}

@media screen and (max-width: 767px) {
    /* 固定ヘッダー（70px）の分、最初のセクションの上余白を増やす */
    .about.section-padding {
        padding-top: 120px; /* ヘッダー70px + 余裕分50px */
    }
}

/*-------------------------------------------
SKILLセクション
-------------------------------------------*/
.skill {
    background-color: #F4F9F9;
    /* はみ出しによる線（ゴースト）を防ぐ */
    overflow: hidden; 
}

.skill-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    padding-bottom: 80px; /* ボタンの下に余白を作る */
}

/* タイトルエリアが他からの線を継承しないようにリセット */
.skill .section-title-area {
    border: none !important;
    outline: none !important;
    margin-bottom: 60px;
}

.skill-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
    margin-bottom: 50px; /* ボタンとの距離 */
}

.skill-card {
    background-color: #ffffff;
    padding: 50px 30px;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    /* カード自体に線がつかないようリセット */
    border: none;
    outline: none;
}

/* 英語タイトル：SERVICE同様に斜体 */
.skill-card-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    color: var(--main-color);
    font-weight: bold;
    font-style: italic;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

/* 日本語サブ：グレー */
.skill-card-sub {
    font-size: 13px;
    color: var(--text-sub);
    margin-bottom: 30px;
}

.skill-icon {
    width: 140px;
    height: 140px;
    background-color: #F4F9F9;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 30px;
    flex-shrink: 0;
}

.skill-icon img {
    width: 84px; /* 土台140pxに対してSERVICE比率の60% */
    height: auto;
}

.skill-desc {
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 25px;
    color: var(--text-main);
}

.skill-scope {
    text-align: left;
    border-top: 1px dotted #eee;
    padding-top: 20px;
    margin-top: auto;
    width: 100%;
}

.scope-title {
    font-size: 13px;
    color: var(--main-color);
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
}

.scope-text {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.6;
    display: block;
}

/* ボタンの位置調整 */
.skill-btn {
    text-align: center;
}

/* --- SKILLスマホ対応：セクションの最後に配置 --- */
@media screen and (max-width: 767px) {
    .skill-inner {
        padding-bottom: 60px; /* スマホでは余白を少し詰める */
    }

    .skill-grid {
        grid-template-columns: 1fr; /* 1列にする */
        gap: 50px; /* SERVICEの60pxを参考に、カード同士の境界を明確にする */
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .skill-card {
        padding: 40px 20px; /* 内側の余白をスマホ用に調整 */
    }

    .skill-icon {
        /* SERVICE（140px）と同じサイズに合わせる */
        width: 140px; 
        height: 140px;
        margin-bottom: 20px;
    }

    .skill-icon img {
        /* SERVICE（80px）と同じサイズに合わせる */
        width: 80px; 
    }

    .skill-card-sub {
        margin-bottom: 20px; /* スマホでは少し間隔を詰めてコンパクトに */
    }
}