@charset "UTF-8";

/* ページ全体でスクロールを滑らかにする */
html {
    scroll-behavior: smooth;
}

/* アンカー移動時にヘッダーと被らないように調整（お好みで） */
:target {
    scroll-margin-top: 100px;
    /* ヘッダーの高さ分だけ余裕を持たせる */
}

/* --- 1. 定数・リセット --- */
:root {
    --bg-light: #fafafa;
    /* 柔らかなオフホワイト */
    --text-main: #222222;
    /* 深いグレー */
    --text-sub: #666666;
    /* 控えめなグレー */
    --border-color: #e0e0e0;
    /* 繊細な区切り線 */
    --accent-color: #333333;
    --font-serif: "Noto Serif JP", serif;
    --font-sans: "Hiragino Kaku Gothic ProN", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    font-family: var(--font-sans);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

li {
    list-style: none;
}

/* --- 2. 共通ヘッダー --- */
.global-header {
    width: 100%;
    padding: 25px 40px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgba(250, 250, 250, 0.8);
    /* 背景に合わせた透過 */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.global-nav ul {
    display: flex;
    gap: 30px;
}

.global-nav a {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* --- 3. メインビジュアル (Hero) --- */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}

.hero-content {
    max-width: 1000px;
    width: 100%;
    text-align: left;
}

.hero-subline {
    font-size: 13px;
    letter-spacing: 0.4em;
    color: var(--text-sub);
    margin-bottom: 24px;
    text-transform: uppercase;
}

.hero-mainline {
    font-family: var(--font-serif);
    font-size: clamp(32px, 5.5vw, 64px);
    line-height: 1.25;
    margin-bottom: 32px;
    font-weight: 500;
}

.hero-description {
    font-size: 16px;
    color: var(--text-sub);
    max-width: 500px;
    line-height: 2;
}

.hero {
    height: 100vh;
    /* 画面いっぱいに表示 */
    width: 100%;
    background-image: url('../../assets/images/main-visual.png');
    /* 生成した画像を指定 */
    background-size: cover;
    background-position: center right;
    /* 右側のアイテムが見えるように固定 */
    display: flex;
    align-items: center;
    /* 上下中央 */
    justify-content: flex-start;
    /* 左寄せ */
    position: relative;
    padding-left: 8%;
    /* 左端から少し離す（心地よい余白） */
}

/* 文字に少しだけ「奥行き」と「可読性」を持たせる */
.hero-content {
    max-width: 600px;
    z-index: 2;
}

.hero-subline {
    font-size: 14px;
    letter-spacing: 0.2em;
    color: #888;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-mainline {
    font-size: 3.5rem;
    /* 大きく、力強く */
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 30px;
    color: #1a1a1a;
}

.hero-description {
    font-size: 18px;
    line-height: 1.8;
    color: #444;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .hero {
        background-position: 70% center;
        /* スマホでは少し右側に寄せて背景を見せる */
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-mainline {
        font-size: 2.2rem;
    }
}

/* --- 4. 事業一覧ゲートウェイ --- */
.service-gateway {
    padding: 0;
    /* ボーダーで区切るため0に */
    border-top: 1px solid var(--border-color);
}

.gateway-grid {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
    /* 5列並びを目指す */
}

.gateway-item {
    padding: 80px 40px;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: #fff;
}

.gateway-item:last-child {
    border-right: none;
}

.gateway-item .num {
    font-size: 11px;
    font-family: var(--font-serif);
    color: var(--text-sub);
}

.gateway-item h3 {
    font-size: 22px;
    font-family: var(--font-serif);
    font-weight: 500;
}

.gateway-item p {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.7;
}

/* --- トップページ：ゲートウェイパネル（テキスト）のホバー --- */

/* 1. 通常の状態 */
.gateway-item.hover-effect {
    background-color: #fff;
    /* 白ベース */
    border: 1px solid #eee;
    /* 薄い境界線 */
    padding: 40px 30px;
    display: block;
    text-decoration: none;
    color: #333;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        border-color 0.6s ease;
    z-index: 1;
}

/* 2. ホバー時のアクション */
.gateway-item.hover-effect:hover {
    transform: translateY(-5px);
    /* 浮き上がり */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    /* 上品な影 */
    border-color: #eee;
    /* 枠線を少し濃くして強調 */
    z-index: 2;
    color: #333;
    /* 文字色をパキッとさせる */
}

/* 番号（01, 02...）の演出 */
.gateway-item .num {
    display: block;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: #999;
    margin-bottom: 15px;
    transition: color 0.6s ease;
}

.gateway-item.hover-effect:hover .num {
    color: #1a1a1a;
    /* ホバー時に番号も濃くする */
}

/* --- 1. 外枠：窓の位置は「固定」して動かさない --- */
.cat-visual.hover-effect,
.product-visual.hover-effect {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: #fff;
    transition: box-shadow 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
    backface-visibility: hidden;
}

/* 枠は動かさず、影だけを深くして「浮揚感」を出す */
.cat-visual.hover-effect,
.product-visual.hover-effect:hover {
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
    z-index: 2;
}

/* --- 2. 画像：ここだけを「上＋ズーム」で動かす --- */
.cat-visual.hover-effect,
.product-visual.hover-effect img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%) contrast(90%);
    /* 画像の動きに全ての transition を集約 */
    transition: filter 0.8s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    transform: scale(1) translateY(0);
    will-change: transform, filter;
}

/* ホバー時：画像だけが窓の中で少し上がりつつ拡大する */
.cat-visual.hover-effect,
.product-visual.hover-effect:hover img {
    filter: grayscale(0%) contrast(100%);
    /* scale と translateY を同時にかけることで、ズレを防ぎつつ奥行きを出します */
    transform: scale(1.08) translateY(-5px);
}

/* --- 3. PATENTEDタグ：位置を完全に固定 --- */
.patent-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    pointer-events: none;

    /* デザイン */
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    padding: 5px 14px;
    font-size: 10px;
    letter-spacing: 0.15em;
    border: 1px solid #000;
    /* 親のホバーの影響を受けないよう transition を設定しない、もしくは固定する */
    transition: none;
}

/* モバイル対応：画面が狭くなったら2列や1列に */
@media (max-width: 1024px) {
    .gateway-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .gateway-item {
        border-right: none;
    }
}

/* --- 共通ヘッダーの微調整 --- */
.nav-company {
    margin-left: 20px;
    /* 事業メニューと少し距離を置く */
    padding-left: 20px;
    border-left: 1px solid var(--border-color);
    /* 縦線を入れて別枠感を出す */
}

/* --- トップページ末尾の導線 --- */
.bottom-info {
    padding: 120px 40px;
    background-color: #fff;
    text-align: center;
}

.info-inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.info-text h2 {
    font-size: 32px;
    margin-bottom: 16px;
    font-weight: 500;
}

.info-text p {
    color: var(--text-sub);
    font-size: 15px;
}

/* ボタンデザイン：白ベースに映えるミニマルな黒枠 */
.btn-outline {
    display: inline-block;
    padding: 16px 48px;
    border: 1px solid var(--text-main);
    color: var(--text-main);
    font-size: 13px;
    letter-spacing: 0.1em;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: var(--text-main);
    color: #fff;
}

/* フッターの強化 */
.global-footer {
    padding: 60px 40px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 11px;
    color: var(--text-sub);
    letter-spacing: 0.05em;
}

/* --- 下層ページ共通設定 --- */
.lower-page {
    padding-top: 120px;
    /* ヘッダー分空ける */
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- ページヘッダー --- */
.page-header {
    padding: 100px 40px 60px;
    text-align: center;
}

.page-header .en-title {
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--text-sub);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.page-header h1 {
    font-size: 36px;
    font-weight: 500;
}

/* --- 会社概要テーブル (dl, dt, dd) --- */
.company-details {
    padding: 60px 0;
}

.info-list {
    border-top: 1px solid var(--border-color);
}

.info-row {
    display: flex;
    padding: 32px 0;
    border-bottom: 1px solid var(--border-color);
}

.info-row dt {
    width: 200px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.info-row dd {
    flex: 1;
    font-size: 15px;
    color: var(--text-sub);
    line-height: 1.8;
}

/* --- メッセージエリア --- */
.company-message {
    padding: 100px 0 150px;
    text-align: center;
}

.company-message h2 {
    font-size: 24px;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.company-message p {
    font-size: 15px;
    line-height: 2.2;
    color: var(--text-sub);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .info-row {
        flex-direction: column;
        gap: 10px;
    }

    .info-row dt {
        width: 100%;
    }
}

/* --- デザインページ特有のスタイル --- */
.container-mid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.service-intro {
    padding: 60px 0;
    text-align: center;
}

.service-intro h2 {
    font-size: 28px;
    margin-bottom: 24px;
}

.service-intro p {
    color: var(--text-sub);
    font-size: 16px;
    line-height: 2;
}

.design-categories {
    padding: 100px 0;
}

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

.cat-item h3 {
    font-size: 20px;
    font-family: var(--font-serif);
    margin-bottom: 15px;
    padding-top: 20px;
}

.cat-item p {
    font-size: 14px;
    color: var(--text-sub);
}

/* 写真の代わりに使う「概念ビジュアル」の箱 */
.cat-visual {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f0f0f0;
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #bbb;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

/* 装飾的なライン */


@media (max-width: 900px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 撮影ページ特有のスタイル --- */

.photo-philosophy {
    padding: 80px 0;
    text-align: center;
}

.photo-philosophy h2 {
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.photo-spec {
    padding: 60px 0 150px;
}

.spec-layout {
    display: flex;
    align-items: center;
    gap: 80px;
}

.spec-image {
    flex: 1.2;
    aspect-ratio: 4 / 5;
    /* 縦長の写真や機材が映える比率 */
    background-color: #f0f0f0;
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #ccc;
    letter-spacing: 0.3em;
}

.spec-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.spec-item .label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--text-sub);
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    width: fit-content;
}

.spec-item p {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.6;
}

/* スマホ対応 */
@media (max-width: 900px) {
    .spec-layout {
        flex-direction: column;
        gap: 40px;
    }

    .spec-image {
        width: 100%;
        aspect-ratio: 1 / 1;
    }
}

/* --- イベントページ特有のスタイル --- */

.event-concept {
    padding: 80px 0;
    text-align: center;
}

.event-concept h2 {
    font-size: 32px;
    margin-bottom: 24px;
}

.event-process {
    padding: 60px 0 150px;
}

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

.process-item {
    padding: 50px 30px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-num {
    font-size: 11px;
    font-family: var(--font-serif);
    color: var(--text-sub);
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.process-item h3 {
    font-size: 20px;
    font-family: var(--font-serif);
    margin-bottom: 15px;
}

.process-item p {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.8;
}

/* スマホ対応 */
@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 画材ページ特有のスタイル --- */

.art-concept {
    padding: 80px 0;
    text-align: center;
}

.product-feature {
    padding: 60px 0 150px;
}

.product-card {
    display: flex;
    align-items: center;
    gap: 80px;
    background-color: #fff;
    padding: 60px;
    border: 1px solid var(--border-color);
}

.product-visual {
    flex: 1;
    aspect-ratio: 1 / 1;
    background-color: #f9f9f9;
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #ddd;
    position: relative;
}

.patent-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border: 1px solid #ccc;
    color: var(--text-sub);
}

.product-info {
    flex: 1;
}

.product-info h2 {
    font-size: 36px;
    margin-bottom: 10px;
}

.product-tagline {
    font-size: 16px;
    font-weight: 600;
    color: #888;
    margin-bottom: 30px;
}

.product-desc {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--text-sub);
}

.product-specs {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    font-size: 13px;
    color: #999;
}

/* スマホ対応 */
@media (max-width: 900px) {
    .product-card {
        flex-direction: column;
        padding: 40px 20px;
        gap: 40px;
    }
}

/* 3:2の比率を固定するクラス */
.cat-visual.is-photo {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: #f4f4f4;
    /* 万が一画像が読み込まれなくてもグレーの窓を維持 */
    position: relative;
    overflow: hidden;
}

/* 画像を窓いっぱいに広げ、中心で合わせる */
.product-visual,
.product-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 特許タグを、プロ仕様の控えめな主張で配置 */
.patent-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 4px 12px;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
    z-index: 10;
}

/* PC版のレイアウト */
.product-unit {
    display: flex;
    flex-direction: row;
    /* 横並び */
    align-items: flex-start;
    gap: 60px;
    /* 画像とテキストの間の余白 */
    margin-bottom: 120px;
}

.product-visual-container {
    flex: 0 0 50%;
    /* 画像を50%の幅に固定 */
}

.product-info-container {
    flex: 1;
    /* 残りの幅をテキストに */
}

/* テキストの微調整 */
.product-info h2 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.product-tagline {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 2rem;
    font-weight: 500;
}

.product-desc p {
    margin-bottom: 1.2rem;
    line-height: 1.8;
}

.product-note {
    font-size: 0.9rem;
    color: #888;
    margin-top: 2rem;
}

.vendor-info {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    font-size: 0.95rem;
}

.product-specs {
    margin-top: 2rem;
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
}

/* スマホ版（画面幅が860px以下） */
@media (max-width: 860px) {
    .product-unit {
        flex-direction: column;
        /* 縦並び */
        gap: 30px;
    }

    .product-visual-container {
        width: 100%;
    }
}

/* PC版のレイアウト：確実に横並びにする設定 */
.product-flex-layout {
    display: flex !important;
    /* 強制的にFlexを適用 */
    flex-direction: row !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
    /* 画像とテキストの間の十分な余白 */
    margin-top: 40px;
    margin-bottom: 100px;
}

/* 画像側：幅を50%に固定 */
.product-visual-side {
    flex: 0 0 50% !important;
    width: 50%;
}

/* テキスト側：残りの幅 */
.product-info-side {
    flex: 1;
}

/* 画像が窓を突き抜けないためのガード */
.product-visual-side .cat-visual {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.product-visual-side img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* スマホ版（画面幅が860px以下） */
@media (max-width: 860px) {
    .product-flex-layout {
        flex-direction: column !important;
        gap: 30px;
    }

    .product-visual-side,
    .product-info-side {
        width: 100% !important;
        flex: none !important;
    }
}

/* --- コンサルページ特有のスタイル --- */

.consulting-concept {
    padding: 80px 0;
    text-align: center;
}

.consulting-values {
    padding: 60px 0 150px;
}

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

.value-item {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.value-icon {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--text-sub);
    text-transform: uppercase;
    margin-bottom: 24px;
    padding-left: 15px;
    border-left: 2px solid var(--text-main);
    /* 縦線のアクセント */
}

.value-item h3 {
    font-size: 20px;
    font-family: var(--font-serif);
    margin-bottom: 20px;
    font-weight: 500;
}

.value-item p {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.9;
}

/* スマホ対応 */
@media (max-width: 900px) {
    .value-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

/* ========================================
   Responsive Optimization (Mobile & Tablet)
   ======================================== */

@media (max-width: 1024px) {

    /* ヘッダーの余白調整 */
    .global-header {
        padding: 15px 20px;
    }

    .global-nav ul {
        gap: 15px;
    }

    .global-nav a {
        font-size: 11px;
    }

    .nav-company {
        margin-left: 10px;
        padding-left: 10px;
    }

    /* 5列グリッドを2列〜3列に調整 */
    .gateway-grid {
        grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
    }
}

@media (max-width: 768px) {

    /* 全体的な文字サイズの最適化 */
    .hero-mainline {
        font-size: 32px;
        /* スマホで読みやすいサイズに固定 */
        line-height: 1.4;
    }

    .hero-description {
        font-size: 14px;
    }

    .page-header h1 {
        font-size: 28px;
    }

    /* 事業一覧を1列にして可読性を上げる */
    .gateway-grid {
        grid-template-columns: 1fr;
    }

    .gateway-item {
        padding: 40px 20px;
        border-right: none;
        /* 縦線を消してスッキリさせる */
    }

    /* 各個別ページのレイアウト調整 */
    .spec-layout,
    .product-card,
    .process-grid,
    .value-grid {
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0;
    }

    /* 画像・ビジュアルエリアの比率調整 */
    .spec-image,
    .product-visual,
    .cat-visual {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    /* 会社概要テーブルを縦並びに */
    .info-row {
        flex-direction: column;
        padding: 20px 0;
    }

    .info-row dt {
        width: 100%;
        margin-bottom: 8px;
        font-size: 12px;
        color: var(--text-sub);
    }

    .info-row dd {
        font-size: 14px;
    }

    /* ナビゲーションを折り返す（または非表示にするための準備） */
    .global-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 15px;
    }
}

@media (max-width: 480px) {

    /* 極小デバイス（iPhone SE等）への対応 */
    .hero {
        padding: 0 20px;
    }

    .hero-mainline {
        font-size: 26px;
    }

    .btn-outline {
        width: 100%;
        /* ボタンを横幅いっぱいに */
        text-align: center;
        padding: 14px 0;
    }
}

/* 初期状態：少し下げて透明にする */
.reveal-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示時：元の位置に戻る */
.reveal-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* スクロール後のヘッダーの状態 */
.global-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    /* ほんのり透ける白 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* 軽い影で浮遊感を出す */
    padding: 10px 40px;
    /* 少しだけ細くしてスッキリさせる */
}

.art-contact {
    padding: 100px 0 150px;
    background-color: #fafafa;
    /* ほんのりグレーでセクションを分ける */
    text-align: center;
}

.contact-box h2 {
    font-size: 32px;
    margin-bottom: 24px;
}

.contact-box p {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 2;
    margin-bottom: 40px;
}

/* ボタンのホバー演出（JSで入れたスムーズさを活かす） */
.btn-outline {
    display: inline-block;
    padding: 18px 60px;
    border: 1px solid var(--text-main);
    color: var(--text-main);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

/* お問い合わせセクション全体 */
.art-contact {
    padding: 100px 0;
    background-color: #fff;
    /* 背景を白に統一してフォームと一体化させる */
}

.contact-intro {
    text-align: center;
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 50px;
}

/* フォームを囲う枠（ここでサイズを制御） */
.form-wrapper {
    max-width: 640px;
    /* Googleフォームの標準幅に合わせるのが一番綺麗 */
    margin: 0 auto;
    border: 1px solid #eee;
    /* ほんのり境界線をつけて「枠内」であることを示す */
    border-radius: 8px;
    overflow: hidden;
    /* フォームの角丸からはみ出さないように */
    background-color: #fff;
}

/* iframe自体の調整 */
.form-wrapper iframe {
    display: block;
    /* フォームの長さに合わせてheightを調整してください */
    min-height: 800px;
}

/* サービス詳細のレイアウト */
.service-detail {
    padding: 120px 0;
}

.service-visual {
    margin-bottom: 60px;
    text-align: center;
}

.main-img {
    width: 100%;
    max-width: 1000px;
    /* 広がりすぎないように制限 */
    height: auto;
    /* 白い背景に馴染ませるための薄い影 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-radius: 2px;
}

.service-content {
    max-width: 600px;
    margin: 0 auto;
    /* テキストを中央に寄せて読みやすく */
}

.category-num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 0.3em;
    color: #ccc;
    margin-bottom: 10px;
}

.service-content h1 {
    font-size: 36px;
    margin-bottom: 30px;
}

.description {
    line-height: 2.2;
    color: var(--text-sub);
    font-size: 15px;
}

/* デザインカテゴリーセクション */
.design-categories {
    padding: 100px 0;
    background-color: #fff;
    /* 必要に応じて調整 */
}

/* 3カラムのグリッド */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3等分 */
    gap: 40px;
    /* 項目間の余白 */
}

/* 各項目 */
.cat-item {
    text-align: center;
    /* 中央揃え */
}

/* 画像が入るコンテナ */
/* 写真の代わりに使う「概念ビジュアル」の箱 */
.cat-visual {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f0f0f0;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    /* はみ出した画像を隠す（ズーム演出に必須） */
    cursor: pointer;
}

/* 中の画像：ここに「滑らかさ」の設定を書く */
.cat-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.6s ease;

    /* ↓ これがスムーズさの正体です。0.6秒かけて、心地よい速度曲線で変化させます ↓ */
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), filter 0.6s ease;
}

/* マウスを当てた時（hover）の挙動 */
.cat-item:hover .cat-visual img {
    transform: scale(1.08);
    /* ほんの少しだけ拡大 */
    filter: brightness(0.9);
    /* わずかに暗くして質感を出す（お好みで） */
}

/* 見出し (h3) */
.cat-item h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--text-main);
    letter-spacing: 0.1em;
}

/* 説明文 (p) */
.cat-item p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-sub);
    max-width: 90%;
    margin: 0 auto;
    /* 中央揃え */
}

/* レスポンシブ対応（スマホの時は縦並びに） */
@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: 1fr;
        /* 1カラムに */
        gap: 60px;
    }

    .cat-visual {
        height: 200px;
        /* スマホでは少し低く */
    }
}

/* 下層ページ全体の共通設定 */
.lower-page {
    padding-top: 120px;
    /* ヘッダー分 */
    padding-bottom: 100px;
    /* ★これを追加：フッターとの最低限の余白 */
    min-height: 80vh;
    /* コンテンツが少なくてもフッターを下に押し下げる */
}

/* 写真ページ用のビジュアルコンテナ */
.cat-visual.is-photo {
    aspect-ratio: 3 / 2;
    /* 35mmフルサイズの黄金比 */
}

/* モノクロからカラーへの変化 */
.cat-visual.is-photo img {
    filter: grayscale(1) brightness(0.9);
    /* 最初はモノクロで少し暗め */
    transition:
        transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
        filter 0.8s ease;
    /* 変化を少しゆっくりにすると情緒が出ます */
}

/* ホバー時の演出 */
.cat-item:hover .cat-visual.is-photo img {
    filter: grayscale(0) brightness(1);
    /* カラーに戻り、明るくなる */
    transform: scale(1.05);
    /* 控えめなズーム */
}