/*
Theme Name: Certify
Author: APEX Llc
Version: 0.0.1
*/

/* =========================================
Variables & Reset (共通スタイル)
========================================= */
:root {
    /* Base Colors */
    --bg                  : #ffffff;

    /* Colors */
    --color-primary       : var(--primary, #0f2e46); /* 深いネイビー */
    --color-primary-light : var(--primary-light, #1a3b5c); /* 少し明るいネイビー */
    --color-text-main     : var(--text, #1a1a1a);
    --color-text-gray     : var(--text-light, #666666);
    --color-white         : var(--white, #ffffff);
    --color-accent        : var(--accent, #c5a059); /* ゴールド */
    --color-bg-light      : var(--bg-light, #f8f9fa); /* より明るいグレー */

    /* Fonts */
    --font-serif          : 'Shippori Mincho', serif;
    --font-sans           : 'Noto Sans JP', sans-serif;

    /* Spacing */
    --container-width     : 1280px;
    --container-padding   : 40px;
    --section-spacing     : 180px;
    --header-height       : 100px;
}

/* スマホ用変数上書き */
@media (max-width : 768px) {
    :root {
        --container-padding : 24px;
        --section-spacing   : 100px;
    }
}

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

html {
    scroll-behavior : smooth;
}

body {
    font-family            : var(--font-sans);
    color                  : var(--color-text-main);
    background-color       : var(--bg);
    line-height            : 2.0;
    font-size              : 16px;
    letter-spacing         : 0.08em;
    -webkit-font-smoothing : antialiased;
    overflow-x             : hidden;
    position               : relative;
}

/* 全体のつながりを作る背景ライン */
body::before {
    content          : '';
    position         : fixed;
    top              : 0;
    left             : 6%;
    width            : 1px;
    height           : 100vh;
    background-color : rgba(0, 0, 0, 0.05);
    z-index          : -1;
}

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

img {
    max-width      : 100%;
    height         : auto;
    vertical-align : bottom;
    display        : block;
}

ul {
    list-style : none;
}

/* Utility Classes */
.container {
    max-width : var(--container-width);
    margin    : 0 auto;
    padding   : 0 var(--container-padding);
    position  : relative;
    z-index   : 2;
}

.fade-in-up {
    opacity    : 0;
    transform  : translateY(40px);
    transition : opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.is-visible {
    opacity   : 1;
    transform : translateY(0);
}

.parallax-wrapper {
    position    : relative;
    will-change : transform;
    z-index     : 1;
}

.en-title {
    font-family    : var(--font-sans);
    font-size      : 13px;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : 0.25em;
    color          : var(--color-accent);
    display        : block;
    margin-bottom  : 24px;
    position       : relative;
    padding-left   : 60px;
}

.en-title::before {
    content          : '';
    position         : absolute;
    left             : 0;
    top              : 50%;
    width            : 40px;
    height           : 1px;
    background-color : var(--color-accent);
}

.jp-title {
    font-family   : var(--font-serif);
    font-size     : 3.5rem;
    font-weight   : 500;
    line-height   : 1.4;
    margin-bottom : 50px;
}

@media (max-width : 768px) {
    .jp-title {
        font-size : 2.2rem;
    }

    .en-title {
        padding-left : 0;
    }

    .en-title::before {
        display : none;
    }

    body::before {
        display : none;
    }
}

/* Buttons */
.btn-primary {
    display          : inline-flex;
    align-items      : center;
    justify-content  : center;
    padding          : 18px 48px;
    background-color : var(--color-primary);
    color            : var(--color-white);
    font-size        : 1rem;
    font-weight      : 500;
    letter-spacing   : 0.1em;
    border-radius    : 4px;
    transition       : all 0.3s ease;
    position         : relative;
    overflow         : hidden;
    box-shadow       : 0 10px 20px rgba(15, 46, 70, 0.15);
}

.btn-primary:hover {
    background-color : var(--color-accent);
    transform        : translateY(-2px);
    box-shadow       : 0 15px 30px rgba(197, 160, 89, 0.3);
    color            : var(--color-white);
}

.btn-primary .arrow {
    margin-left : 12px;
    transition  : transform 0.3s ease;
}

.btn-primary:hover .arrow {
    transform : translateX(5px);
}

/* Header (Common) */
.header {
    position         : fixed;
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : var(--header-height);
    z-index          : 1000;
    display          : flex;
    align-items      : center;
    justify-content  : space-between;
    padding          : 0 60px;
    background-color : rgba(255, 255, 255, 0.85);
    backdrop-filter  : blur(12px);
    transition       : height 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}

.header.is-scrolled {
    height     : 80px;
    padding    : 0 40px;
    box-shadow : 0 2px 20px rgba(0, 0, 0, 0.03);
}

.logo {
    font-family    : var(--font-serif);
    font-size      : 1.5rem;
    font-weight    : 700;
    letter-spacing : 0.1em;
    color          : var(--color-primary);
    z-index        : 1001;
    position       : relative;
}

.nav {
    display     : flex;
    align-items : center;
}

.nav__inner {
    display     : flex;
    align-items : center;
    width       : 100%;
}

.nav__list {
    display     : flex;
    align-items : center;
    gap         : 40px;
    margin      : 0;
    padding     : 0;
}

.nav__item {
    position : relative;
}

.nav__link {
    font-size      : 0.95rem;
    font-weight    : 500;
    color          : var(--color-text-main);
    position       : relative;
    padding-bottom : 5px;
    display        : block;
}

.nav__link::after {
    content          : '';
    position         : absolute;
    bottom           : 0;
    left             : 0;
    width            : 0;
    height           : 1px;
    background-color : var(--color-accent);
    transition       : width 0.3s ease;
}

.nav__link:hover::after {
    width : 100%;
}

.nav__sub, .nav__toggle, .nav__link-ja {
    display : none;
}

.nav__footer {
    margin-left : 40px;
}

.header-contact {
    font-family   : var(--font-sans);
    font-size     : 0.9rem;
    font-weight   : 700;
    color         : var(--color-white);
    background    : linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    padding       : 12px 32px;
    border-radius : 50px;
    transition    : all 0.3s ease;
    box-shadow    : 0 5px 15px rgba(15, 46, 70, 0.2);
    border        : 1px solid rgba(255, 255, 255, 0.1);
    display       : inline-flex;
    align-items   : center;
    gap           : 8px;
    position      : relative;
    overflow      : hidden;
    white-space   : nowrap;
}

.header-contact::before {
    content          : '';
    display          : inline-block;
    width            : 6px;
    height           : 6px;
    background-color : var(--color-accent);
    border-radius    : 50%;
    transition       : background-color 0.3s ease;
}

.header-contact:hover {
    transform    : translateY(-2px);
    box-shadow   : 0 8px 20px rgba(15, 46, 70, 0.3);
    background   : var(--color-accent);
    border-color : var(--color-accent);
    color        : var(--color-white);
}

.header-contact:hover::before {
    background-color : var(--color-white);
}

.hamburger {
    display  : none;
    width    : 30px;
    height   : 20px;
    position : relative;
    cursor   : pointer;
    z-index  : 1002;
}

.hamburger span {
    position         : absolute;
    width            : 100%;
    height           : 2px;
    background-color : var(--color-primary);
    transition       : all 0.3s;
    right            : 0;
}

.hamburger span:nth-child(1) {
    top : 0;
}

.hamburger span:nth-child(2) {
    top : 9px;
}

.hamburger span:nth-child(3) {
    bottom : 0;
}

.hamburger.is-active span:nth-child(1) {
    transform        : rotate(45deg);
    top              : 9px;
    background-color : var(--color-white);
}

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

.hamburger.is-active span:nth-child(3) {
    transform        : rotate(-45deg);
    bottom           : 9px;
    background-color : var(--color-white);
}

@media (max-width : 900px) {
    .header {
        padding : 0 20px;
    }

    .hamburger {
        display : block;
    }

    .nav {
        display          : block;
        position         : fixed;
        top              : 0;
        left             : 0;
        width            : 100%;
        height           : 100vh;
        background-color : rgba(15, 46, 70, 0.98);
        z-index          : 1001;
        opacity          : 0;
        visibility       : hidden;
        transition       : opacity 0.4s ease, visibility 0.4s ease;
        overflow-y       : auto;
        padding          : 100px 40px 60px;
    }

    .nav.is-active {
        opacity    : 1;
        visibility : visible;
    }

    .nav__inner {
        max-width      : 400px;
        margin         : 0 auto;
        height         : 100%;
        display        : flex;
        flex-direction : column;
    }

    .nav__list {
        flex-direction : column;
        align-items    : flex-start;
        gap            : 0;
        width          : 100%;
        border-bottom  : 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav__item {
        width      : 100%;
        border-top : 1px solid rgba(255, 255, 255, 0.1);
        opacity    : 0;
        transform  : translateY(20px);
        transition : opacity 0.4s ease, transform 0.4s ease;
    }

    .nav.is-active .nav__item {
        opacity   : 1;
        transform : translateY(0);
    }

    .nav.is-active .nav__item:nth-child(1) {
        transition-delay : 0.1s;
    }

    .nav.is-active .nav__item:nth-child(2) {
        transition-delay : 0.2s;
    }

    .nav.is-active .nav__item:nth-child(3) {
        transition-delay : 0.3s;
    }

    .nav.is-active .nav__item:nth-child(4) {
        transition-delay : 0.4s;
    }

    .nav__link-wrapper {
        display         : flex;
        justify-content : space-between;
        align-items     : center;
        width           : 100%;
        position        : relative;
    }

    .nav__link {
        color          : var(--color-white);
        font-family    : var(--font-serif);
        font-size      : 1.5rem;
        padding        : 20px 0;
        display        : flex;
        flex-direction : column;
        width          : 100%;
        line-height    : 1.2;
    }

    .nav__link::after {
        display : none;
    }

    .nav__link-ja {
        display     : block;
        font-family : var(--font-sans);
        font-size   : 0.8rem;
        color       : rgba(255, 255, 255, 0.5);
        margin-top  : 5px;
        font-weight : normal;
    }

    .nav__toggle {
        display       : block;
        width         : 40px;
        height        : 40px;
        position      : absolute;
        right         : 0;
        top           : 50%;
        transform     : translateY(-50%);
        cursor        : pointer;
        border        : 1px solid rgba(255, 255, 255, 0.2);
        border-radius : 50%;
        transition    : all 0.3s ease;
    }

    .nav__toggle::before,
    .nav__toggle::after {
        content          : '';
        position         : absolute;
        background-color : var(--color-white);
        top              : 50%;
        left             : 50%;
        transform        : translate(-50%, -50%);
        transition       : all 0.3s ease;
    }

    .nav__toggle::before {
        width  : 12px;
        height : 1px;
    }

    .nav__toggle::after {
        width  : 1px;
        height : 12px;
    }

    .nav__item.is-open .nav__toggle {
        background-color : var(--color-white);
    }

    .nav__item.is-open .nav__toggle::before {
        background-color : var(--color-primary);
    }

    .nav__item.is-open .nav__toggle::after {
        height : 0;
    }

    .nav__sub {
        display          : block;
        max-height       : 0;
        overflow         : hidden;
        transition       : max-height 0.4s ease;
        background-color : rgba(0, 0, 0, 0.1);
    }

    .nav__item.is-open .nav__sub {
        max-height : 300px;
    }

    .nav__sub li {
        border-top : 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav__sub a {
        display      : block;
        padding      : 15px 20px;
        color        : rgba(255, 255, 255, 0.8);
        font-size    : 0.95rem;
        padding-left : 20px;
        position     : relative;
    }

    .nav__sub a::before {
        content      : '-';
        margin-right : 8px;
        color        : var(--color-accent);
    }

    .nav__footer {
        margin-left : 0;
        margin-top  : auto;
        padding-top : 60px;
        width       : 100%;
        opacity     : 0;
        transform   : translateY(20px);
        transition  : opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;
    }

    .nav.is-active .nav__footer {
        opacity   : 1;
        transform : translateY(0);
    }

    .header-contact {
        margin-left      : 0;
        color            : var(--color-white);
        border-color     : var(--color-white);
        font-size        : 1rem;
        padding          : 18px;
        width            : 100%;
        display          : flex;
        justify-content  : center;
        background-color : rgba(255, 255, 255, 0.1);
        background-image : none;
    }

    .header-contact:hover {
        background-color : var(--color-white);
        color            : var(--color-primary);
    }

    .header-contact::before {
        display : none;
    }
}

/* Footer (Common) */
.footer {
    background-color : #111;
    color            : #888;
    padding          : 100px 0 30px;
    font-size        : 0.9rem;
}

.footer-logo {
    color         : var(--color-white);
    font-family   : var(--font-serif);
    font-size     : 1.8rem;
    margin-bottom : 30px;
    display       : inline-block;
}

.footer-bottom {
    margin-top  : 80px;
    padding-top : 30px;
    border-top  : 1px solid #333;
    text-align  : center;
    font-size   : 0.8rem;
}

/* Page Header (Common) */
.page-header {
    padding          : 200px 0 100px;
    background-color : var(--color-bg-light);
    text-align       : center;
    position         : relative;
    overflow         : hidden;
}

.page-header__bg-text {
    position       : absolute;
    top            : 50%;
    left           : 50%;
    transform      : translate(-50%, -50%);
    font-family    : var(--font-serif);
    font-size      : 12rem;
    color          : rgba(0, 0, 0, 0.03);
    white-space    : nowrap;
    z-index        : 0;
    pointer-events : none;
    line-height    : 1;
}

.page-header__title {
    position : relative;
    z-index  : 1;
}

@media (max-width : 900px) {
    .page-header__bg-text {
        font-size : 6rem;
    }
}

/* Contact Area Styles (Common) */
.contact-area {
    position         : relative;
    height           : 600px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    text-align       : center;
    color            : var(--color-white);
    overflow         : hidden;
    background-color : var(--color-primary);
}

.contact-bg {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    z-index  : 0;
    opacity  : 0.3;
}

.contact-bg img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transform  : scale(1.1);
}

.contact-content {
    position : relative;
    z-index  : 1;
    padding  : 0 20px;
}

.contact-title {
    font-family   : var(--font-serif);
    font-size     : 3.5rem;
    margin-bottom : 40px;
}

.contact-text {
    font-size     : 1.1rem;
    margin-bottom : 60px;
    opacity       : 0.9;
}

/* =========================================
   Archive Page Specific Styles (記事一覧ページ用追記)
   ========================================= */

.archive {
    padding : var(--section-spacing) 0;
}

/* Grid Layout */
.archive-grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 40px;
    margin-bottom         : 80px;
}

@media (max-width : 900px) {
    .archive-grid {
        grid-template-columns : repeat(2, 1fr);
    }
}

@media (max-width : 600px) {
    .archive-grid {
        grid-template-columns : 1fr;
        gap                   : 30px;
    }
}

/* Post Card */
.post-card {
    background-color : var(--color-white);
    border-radius    : 4px;
    overflow         : hidden;
    box-shadow       : 0 10px 30px rgba(0, 0, 0, 0.03);
    transition       : transform 0.3s ease, box-shadow 0.3s ease;
    height           : 100%;
    display          : flex;
    flex-direction   : column;
}

.post-card:hover {
    transform  : translateY(-5px);
    box-shadow : 0 15px 40px rgba(0, 0, 0, 0.08);
}

.post-card__img-wrap {
    position    : relative;
    width       : 100%;
    padding-top : 60%; /* Aspect Ratio 16:9 approx or 5:3 */
    overflow    : hidden;
}

.post-card__img {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform 0.5s ease;
}

.post-card:hover .post-card__img {
    transform : scale(1.05);
}

.post-card__body {
    padding        : 25px;
    flex-grow      : 1;
    display        : flex;
    flex-direction : column;
}

.post-card__meta {
    display       : flex;
    align-items   : center;
    gap           : 15px;
    margin-bottom : 15px;
    font-size     : 0.8rem;
    font-family   : var(--font-sans);
}

.post-card__date {
    color : var(--color-text-gray);
}

.post-card__cat {
    background-color : var(--color-bg-light);
    color            : var(--color-primary);
    padding          : 2px 10px;
    border-radius    : 2px;
    font-weight      : 500;
}

.post-card__title {
    font-family   : var(--font-serif);
    font-size     : 1.1rem;
    color         : var(--color-text-main);
    margin-bottom : 15px;
    line-height   : 1.5;
    font-weight   : 600;
    transition    : color 0.3s ease;
}

.post-card:hover .post-card__title {
    color : var(--color-primary);
}

.post-card__excerpt {
    font-size          : 0.9rem;
    color              : var(--color-text-gray);
    line-height        : 1.6;
    margin-bottom      : 0;
    display            : -webkit-box;
    -webkit-line-clamp : 3;
    -webkit-box-orient : vertical;
    overflow           : hidden;
}

/* Pagination */
.wp-block-query-pagination-numbers,
.navigation .nav-links {
    display         : flex;
    justify-content : center;
    align-items     : center;
    gap             : 10px;
}

.page-numbers {
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 40px;
    height          : 40px;
    border-radius   : 50%;
    border          : 1px solid #ddd;
    color           : var(--color-text-main);
    font-family     : var(--font-sans);
    font-size       : 0.9rem;
    transition      : all 0.3s ease;
}

.page-numbers:hover,
.page-numbers.current {
    background-color : var(--color-primary);
    color            : var(--color-white);
    border-color     : var(--color-primary);
}

.page-numbers.prev,
.page-numbers.next {
    width         : auto;
    padding       : 0 20px;
    border-radius : 4px;
}

/* =========================================
           Hero Section (Parallax & Dynamic)
           ========================================= */
.hero {
    position         : relative;
    width            : 100%;
    min-height       : 100vh;
    padding-top      : var(--header-height);
    background-color : var(--color-white);
    overflow         : hidden;
    display          : flex;
    align-items      : center;
}

/* ヒーロー背景のパララックス要素 */
.hero__bg-text {
    position       : absolute;
    top            : 20%;
    left           : -5%;
    font-family    : var(--font-serif);
    font-size      : 20vw;
    color          : rgba(0, 0, 0, 0.02);
    white-space    : nowrap;
    z-index        : 0;
    pointer-events : none;
    line-height    : 1;
}

.hero__container {
    width           : 100%;
    max-width       : 1600px;
    margin          : 0 auto;
    padding         : 60px 40px 100px;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    position        : relative;
    z-index         : 1;
}

.hero__text-area {
    width         : 35%;
    padding-right : 40px;
    position      : relative;
    z-index       : 5;
}

.hero__logo-mark {
    display        : inline-block;
    font-family    : var(--font-sans);
    font-size      : 0.9rem;
    letter-spacing : 0.2em;
    color          : var(--color-accent);
    margin-bottom  : 30px;
    font-weight    : 700;
}

.hero__title {
    font-family   : var(--font-serif);
    font-size     : 4.5rem; /* サイズアップ */
    line-height   : 1.2;
    color         : var(--color-primary);
    margin-bottom : 40px;
    white-space   : nowrap;
}

.hero__lead {
    font-size     : 1.1rem;
    line-height   : 2.2;
    color         : var(--color-text-main);
    margin-bottom : 60px;
    text-align    : justify;
}

.hero__visual {
    width    : 60%;
    position : relative;
    height   : 750px;
}

.hero__img-main {
    position      : absolute;
    top           : 0;
    right         : 0;
    width         : 85%;
    height        : 90%;
    object-fit    : cover;
    z-index       : 1;
    border-radius : 2px;
    /* 影を削除 */
    box-shadow    : none;
}

.hero__img-sub {
    position   : absolute;
    bottom     : 50px;
    left       : 50px;
    width      : 40%;
    height     : 45%;
    z-index    : 2;
    box-shadow : -10px 10px 30px rgba(0, 0, 0, 0.1);
    border     : none;
}

/* ヒーローのサブ画像を枠ぴったりにする修正 */
.hero__img-sub img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}

/* ヒーローの装飾ライン */
.hero__deco {
    position         : absolute;
    top              : -50px;
    right            : 15%;
    width            : 1px;
    height           : 300px;
    background-color : var(--color-accent);
    z-index          : 3;
}

/* スマホ向け調整 */
@media (max-width : 1024px) {
    .hero {
        height         : auto;
        min-height     : auto;
        padding-bottom : 0; /* 不要な余白を削除 */
    }

    .hero__container {
        flex-direction : column;
        padding-top    : 40px;
        padding-bottom : 60px;
    }

    .hero__text-area {
        width         : 100%;
        margin-bottom : 60px;
        padding-right : 0;
    }

    .hero__title {
        font-size   : 3rem;
        white-space : normal;
    }

    .hero__visual {
        width       : 100%;
        height      : auto; /* 高さを自動に */
        margin-left : 0;
        margin-top  : 20px;
    }

    .hero__img-main {
        position : relative; /* 相対配置に変更して高さを確保 */
        width    : 100%;
        height   : auto;
        right    : auto;
        top      : auto;
    }

    .hero__img-sub {
        bottom : -20px;
        left   : 0;
        width  : 50%;
        height : auto;
    }
}

@media (max-width : 600px) {
    .hero__title {
        font-size : 2.2rem;
    }
}


/* =========================================
   Intro Section
   ========================================= */
.intro {
    padding          : var(--section-spacing) 0;
    background-color : var(--color-bg-light); /* 背景色を薄いグレーに */
    position         : relative;
    overflow         : hidden;
}

/* つながりを持たせる背景文字 */
.bg-deco-text {
    position       : absolute;
    font-family    : var(--font-serif);
    font-size      : 15rem;
    color          : rgba(255, 255, 255, 0.6); /* 背景になじませる */
    z-index        : 0;
    line-height    : 1;
    pointer-events : none;
}

.intro__layout {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 120px;
    align-items           : center;
    position              : relative;
    z-index               : 1;
}

.intro__text-area {
    order : 1;
}

.intro__img-area {
    order    : 2;
    position : relative;
}

.intro__img {
    width      : 100%;
    height     : 650px;
    object-fit : cover;
    /* 影を削除 */
    box-shadow : none;
}

.intro__desc {
    margin-bottom : 40px;
    color         : var(--color-text-gray);
    font-size     : 1.05rem;
    text-align    : justify;
}

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

    .intro__text-area {
        order : 2;
    }

    .intro__img-area {
        order : 1;
    }

    .intro__img {
        height : 400px;
    }

    .bg-deco-text {
        font-size : 8rem;
    }
}

/* =========================================
   Services
   ========================================= */
.services {
    padding  : var(--section-spacing) 0;
    /* overflow: hidden;  <-- パララックスで要素が移動しても隠れないように解除推奨だが、はみ出し対策で残す場合は要素の位置に注意 */
    overflow : hidden;
    position : relative;
}

.service-list {
    display        : flex;
    flex-direction : column;
    gap            : 200px; /* 間隔を広げてゆったりと */
}

.service-item {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 100px;
    align-items           : center;
    position              : relative;
    z-index               : 2; /* コンテンツ自体のレイヤーを上げる */
}

/* 縦のつながり線（セクション間をつなぐ） */
.service-connect-line {
    position         : absolute;
    left             : 50%;
    top              : -150px;
    bottom           : -150px;
    width            : 1px;
    background-color : rgba(0, 0, 0, 0.05);
    z-index          : -1;
}

.service-img-area {
    position : relative;
    width    : 100%;
    height   : 550px;
    /* 画像が確実に前面に来るように */
    z-index  : 10;
}

.service-img-main {
    position   : absolute;
    width      : 85%;
    height     : 95%;
    object-fit : cover;
    /* z-index を下げて背面に */
    z-index    : 10;
    top        : 0;
    box-shadow : none; /* 影を削除 */
}

.service-img-sub {
    position   : absolute;
    width      : 45%;
    height     : 55%;
    object-fit : cover;
    /* z-index を上げて前面に */
    z-index    : 20;
    filter     : brightness(0.95);
}

.service-deco {
    position         : absolute;
    background-color : var(--color-accent);
    z-index          : 25;
    width            : 140px;
    height           : 1px;
}

/* 配置調整（奇数） */
.service-item:nth-child(odd) .service-img-main {
    left : 0;
}

.service-item:nth-child(odd) .service-img-sub {
    right  : 0;
    bottom : 0;
}

.service-item:nth-child(odd) .service-deco {
    top  : 40px;
    left : -40px;
}

/* 配置調整（偶数） */
.service-item:nth-child(even) .service-img-area {
    order : 2;
}

.service-item:nth-child(even) .service-content {
    order : 1;
}

.service-item:nth-child(even) .service-img-main {
    right : 0;
}

.service-item:nth-child(even) .service-img-sub {
    left   : 0;
    bottom : 0;
}

.service-item:nth-child(even) .service-deco {
    top   : 40px;
    right : -40px;
}

.service-num {
    font-family   : var(--font-serif);
    font-size     : 5rem;
    color         : rgba(0, 0, 0, 0.05); /* より背景になじませる */
    line-height   : 1;
    margin-bottom : -20px; /* タイトルに重ねる */
    display       : block;
    font-weight   : 700;
    position      : relative;
    z-index       : -1;
}

.service-title {
    font-family   : var(--font-serif);
    font-size     : 2.2rem;
    margin-bottom : 30px;
    display       : block;
    color         : var(--color-primary);
}

.service-desc {
    color         : var(--color-text-gray);
    margin-bottom : 40px;
}

.arrow-link {
    display        : inline-flex;
    align-items    : center;
    font-weight    : 700;
    font-size      : 0.95rem;
    letter-spacing : 0.1em;
    color          : var(--color-primary);
    position       : relative;
}

.arrow-link::after {
    content     : '→';
    margin-left : 10px;
    transition  : transform 0.3s ease;
}

.arrow-link::before {
    content          : '';
    position         : absolute;
    bottom           : -5px;
    left             : 0;
    width            : 100%;
    height           : 1px;
    background-color : var(--color-primary);
    transform        : scaleX(0);
    transform-origin : right;
    transition       : transform 0.3s ease;
}

.arrow-link:hover::after {
    transform : translateX(8px);
}

.arrow-link:hover::before {
    transform        : scaleX(1);
    transform-origin : left;
}

@media (max-width : 900px) {
    .service-list {
        gap : 120px;
    }

    .service-connect-line {
        display : none;
    }

    .service-item, .service-item:nth-child(even) {
        grid-template-columns : 1fr;
        gap                   : 50px;
    }

    /* スマホ時の装飾位置調整 */
    .service-item:nth-child(odd) .service-deco {
        left : 0;
    }

    .service-item:nth-child(even) .service-deco {
        right : 0;
    }

    .service-item:nth-child(even) .service-img-area {
        order : 1;
    }

    .service-item:nth-child(even) .service-content {
        order : 2;
    }

    .service-img-area {
        height : 350px;
    }

    .service-img-main {
        width : 90%;
    }

    .service-img-sub {
        width : 40%;
    }
}

/* =========================================
   Features
   ========================================= */
.features {
    background-color : var(--color-bg-light);
    padding          : var(--section-spacing) 0;
    position         : relative;
}

.features__container {
    display         : flex;
    justify-content : space-between;
    align-items     : flex-start;
    flex-wrap       : wrap;
    gap             : 60px;
}

.feature-box {
    flex        : 1;
    min-width   : 300px;
    padding-top : 40px;
    border-top  : 2px solid var(--color-primary);
    position    : relative;
}

.feature-title {
    font-family   : var(--font-serif);
    font-size     : 1.6rem;
    margin-bottom : 24px;
    line-height   : 1.4;
    color         : var(--color-primary);
}

.feature-text {
    color     : var(--color-text-gray);
    font-size : 1rem;
}

/* =========================================
   News
   ========================================= */
.news {
    padding   : var(--section-spacing) 0;
    max-width : 1000px;
    margin    : 0 auto;
}

.news-header {
    display         : flex;
    justify-content : space-between;
    align-items     : flex-end;
    margin-bottom   : 60px;
    padding         : 0 40px;
    border-bottom   : 1px solid var(--color-primary); /* 見出し下のラインで区切り */
    padding-bottom  : 20px;
}

.news-list {
    margin : 0 40px;
}

.news-item {
    display       : flex;
    align-items   : baseline;
    padding       : 30px 0;
    border-bottom : 1px solid #ddd;
    transition    : all 0.3s ease;
}

.news-item:hover {
    padding-left : 15px;
    border-color : var(--color-primary);
}

.news-date {
    width       : 150px;
    font-family : var(--font-sans);
    color       : var(--color-text-gray);
    font-size   : 0.9rem;
}

.news-title {
    flex        : 1;
    font-weight : 500;
    font-size   : 1.05rem;
}

@media (max-width : 600px) {
    .news-header, .news-list {
        padding : 0 20px;
        margin  : 0 20px;
    }

    .news-item {
        flex-direction : column;
        gap            : 10px;
    }
}

/* Greeting Section */
.greeting {
    padding : var(--section-spacing) 0;
}

.greeting__layout {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 80px;
    align-items           : start;
}

.greeting__img-wrap {
    position : relative;
}

.greeting__img {
    width         : 100%;
    height        : auto;
    border-radius : 2px;
    box-shadow    : 20px 20px 0 var(--color-bg-light);
}

.greeting__content {
    padding-top : 20px;
}

.greeting__lead {
    font-family   : var(--font-serif);
    font-size     : 1.8rem;
    line-height   : 1.6;
    color         : var(--color-primary);
    margin-bottom : 40px;
}

.greeting__text {
    color         : var(--color-text-gray);
    margin-bottom : 30px;
    text-align    : justify;
}

.greeting__sign {
    margin-top  : 40px;
    text-align  : right;
    font-family : var(--font-serif);
}

.greeting__role {
    display       : block;
    font-size     : 0.9rem;
    color         : var(--color-text-gray);
    margin-bottom : 5px;
}

.greeting__name {
    font-size   : 1.5rem;
    font-weight : 700;
    color       : var(--color-primary);
}

/* Profile Section */
.profile-table {
    width           : 100%;
    border-collapse : collapse;
    margin-top      : 40px;
}

.profile-table th,
.profile-table td {
    padding       : 20px;
    border-bottom : 1px solid #eee;
    text-align    : left;
}

.profile-table th {
    width       : 30%;
    color       : var(--color-primary);
    font-weight : 700;
    font-family : var(--font-serif);
}

/* Outline Section */
.outline {
    padding          : var(--section-spacing) 0;
    background-color : var(--color-bg-light);
}

.outline-table {
    width            : 100%;
    max-width        : 900px;
    margin           : 0 auto;
    background-color : var(--color-white);
    border-radius    : 4px;
    overflow         : hidden;
    box-shadow       : 0 10px 40px rgba(0, 0, 0, 0.03);
}

.outline-dl {
    display       : flex;
    flex-wrap     : wrap;
    border-bottom : 1px solid #eee;
}

.outline-dl:last-child {
    border-bottom : none;
}

.outline-dt {
    width            : 30%;
    padding          : 25px 40px;
    background-color : #fafafa;
    border-right     : 1px solid #eee;
    font-weight      : 700;
    color            : var(--color-primary);
    display          : flex;
    align-items      : center;
}

.outline-dd {
    width   : 70%;
    padding : 25px 40px;
    margin  : 0;
}

/* Access Section */
.access {
    padding : var(--section-spacing) 0;
}

.access__map {
    width            : 100%;
    height           : 400px;
    background-color : #eee;
    margin-bottom    : 40px;
    filter           : grayscale(100%); /* 地図をモノクロに */
    border-radius    : 4px;
}

.access__info {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    flex-wrap       : wrap;
    gap             : 20px;
}

/* Contact Area Styles (from index.html) */
.contact-area {
    position         : relative;
    height           : 600px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    text-align       : center;
    color            : var(--color-white);
    overflow         : hidden;
    background-color : var(--color-primary);
}

.contact-bg {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    z-index  : 0;
    opacity  : 0.3;
}

.contact-bg img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transform  : scale(1.1);
}

.contact-content {
    position : relative;
    z-index  : 1;
    padding  : 0 20px;
}

.contact-title {
    font-family   : var(--font-serif);
    font-size     : 3.5rem;
    margin-bottom : 40px;
}

.contact-text {
    font-size     : 1.1rem;
    margin-bottom : 60px;
    opacity       : 0.9;
}

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

    .page-header__bg-text {
        font-size : 6rem;
    }

    .outline-dt, .outline-dd {
        width        : 100%;
        border-right : none;
        padding      : 20px 24px;
    }

    .outline-dt {
        padding-bottom   : 10px;
        background-color : var(--color-white);
        color            : var(--color-accent);
        font-size        : 0.9rem;
    }

    .outline-dd {
        padding-top   : 0;
        border-bottom : 1px solid #eee;
    }

    .outline-dl {
        border-bottom : none;
    }
}

/* =========================================
           Contact Page Specific Styles (お問い合わせページ用追記)
           ========================================= */

/* Intro Section */
.contact-intro {
    padding    : var(--section-spacing) 0 60px;
    text-align : center;
}

.contact-intro__lead {
    font-size     : 1.1rem;
    line-height   : 1.8;
    margin-bottom : 40px;
}

.contact-tel-box {
    display          : inline-block;
    background-color : var(--color-bg-light);
    padding          : 30px 60px;
    border-radius    : 4px;
    margin-bottom    : 40px;
}

.contact-tel {
    display       : block;
    font-family   : var(--font-serif);
    font-size     : 2.5rem;
    color         : var(--color-primary);
    font-weight   : 700;
    line-height   : 1;
    margin-bottom : 10px;
}

.contact-tel-sub {
    color     : var(--color-text-gray);
    font-size : 0.9rem;
}

/* Form Section */
.contact-form-section {
    padding-bottom : var(--section-spacing);
}

.form-container {
    max-width     : 800px;
    margin        : 0 auto;
    background    : var(--color-white);
    padding       : 60px;
    border-radius : 4px;
    box-shadow    : 0 10px 40px rgba(0, 0, 0, 0.05);
    border-top    : 3px solid var(--color-primary);
}

.form-row {
    display        : flex;
    margin-bottom  : 30px;
    border-bottom  : 1px solid #f0f0f0;
    padding-bottom : 30px;
}

.form-row:last-of-type {
    border-bottom  : none;
    padding-bottom : 0;
    margin-bottom  : 40px;
}

.form-label {
    width       : 200px;
    font-weight : 700;
    padding-top : 10px;
    flex-shrink : 0;
    display     : flex;
    align-items : center;
}

.form-label span {
    display          : inline-block;
    background-color : var(--color-accent);
    color            : var(--color-white);
    font-size        : 0.7rem;
    padding          : 2px 8px;
    border-radius    : 2px;
    margin-left      : 10px;
    vertical-align   : middle;
}

.form-label span.optional {
    background-color : #ddd;
    color            : var(--color-text-gray);
}

.form-input-wrap {
    flex-grow : 1;
}

/* Input Styles */
.form-control {
    width            : 100%;
    padding          : 12px 15px;
    border           : 1px solid #ddd;
    border-radius    : 4px;
    font-family      : inherit;
    font-size        : 1rem;
    background-color : #fcfcfc;
    transition       : all 0.3s ease;
}

.form-control:focus {
    outline          : none;
    border-color     : var(--color-primary);
    background-color : var(--color-white);
    box-shadow       : 0 0 0 3px rgba(15, 46, 70, 0.1);
}

textarea.form-control {
    height : 200px;
    resize : vertical;
}

/* Captcha */
.captcha-wrap {
    display     : flex;
    align-items : center;
    gap         : 15px;
}

.captcha-display {
    background-color : #eee;
    padding          : 10px 20px;
    font-family      : monospace;
    font-size        : 1.2rem;
    font-weight      : 700;
    letter-spacing   : 5px;
    color            : #555;
    border-radius    : 4px;
    user-select      : none;
}

.captcha-input {
    width : 200px !important; /* 強制的に幅を指定 */
}

@media (max-width : 768px) {
    .captcha-wrap {
        flex-direction : column;
        align-items    : flex-start;
    }

    .captcha-input {
        width : 100% !important;
    }
}

/* Checkbox */
.form-privacy {
    text-align    : center;
    margin-bottom : 40px;
}

.form-privacy label {
    cursor      : pointer;
    display     : inline-flex;
    align-items : center;
}

.form-privacy input[type="checkbox"] {
    margin-right : 10px;
    transform    : scale(1.2);
    accent-color : var(--color-primary);
}

/* Submit Button Area */
.form-submit {
    text-align : center;
}

/* Responsive Form */
@media (max-width : 768px) {
    .form-container {
        padding : 40px 24px;
    }

    .form-row {
        flex-direction : column;
    }

    .form-label {
        width         : 100%;
        margin-bottom : 10px;
        padding-top   : 0;
    }

    .contact-tel {
        font-size : 2rem;
    }

    .contact-tel-box {
        padding : 20px;
        width   : 100%;
    }
}

/* =========================================
           Price Page Specific Styles (料金表ページ用追記)
           ========================================= */

.price-intro {
    padding    : var(--section-spacing) 0 80px;
    text-align : center;
}

.price-intro p {
    max-width   : 800px;
    margin      : 0 auto;
    color       : var(--color-text-gray);
    line-height : 1.8;
}

.price-content {
    padding-bottom : var(--section-spacing);
}

/* カテゴリブロックスタイル */
.price-category {
    margin-bottom : 100px;
}

.price-category:last-child {
    margin-bottom : 0;
}

/* カテゴリ見出し */
.price-category__title {
    font-family     : var(--font-serif);
    font-size       : 1.8rem;
    color           : var(--color-primary);
    border-bottom   : 2px solid var(--color-accent);
    padding-bottom  : 15px;
    margin-bottom   : 40px;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
}

.price-category__title span {
    font-family    : var(--font-sans);
    font-size      : 1rem;
    color          : var(--color-text-gray);
    font-weight    : normal;
    letter-spacing : 0.05em;
}

/* 料金テーブル */
.price-table-detail {
    width            : 100%;
    border-collapse  : collapse;
    background-color : var(--color-white);
    box-shadow       : 0 5px 20px rgba(0, 0, 0, 0.03);
    border-radius    : 4px;
    overflow         : hidden;
}

.price-table-detail th,
.price-table-detail td {
    padding        : 25px 30px;
    border-bottom  : 1px solid #eee;
    vertical-align : middle;
}

.price-table-detail tr:last-child th,
.price-table-detail tr:last-child td {
    border-bottom : none;
}

/* 項目名 */
.price-table-detail th {
    width            : 40%;
    background-color : #fafafa;
    color            : var(--color-primary);
    font-weight      : 700;
    text-align       : left;
    font-family      : var(--font-serif);
}

/* 料金 */
.price-table-detail td.price-val {
    width       : 25%;
    font-weight : 700;
    font-size   : 1.1rem;
    color       : var(--color-text-main);
    text-align  : right;
    font-family : var(--font-sans);
    white-space : nowrap;
}

/* 備考 */
.price-table-detail td.price-note {
    width       : 35%;
    font-size   : 0.9rem;
    color       : var(--color-text-gray);
    line-height : 1.6;
}

/* 注意書きブロック */
.price-note-block {
    margin-top       : 60px;
    padding          : 40px;
    background-color : var(--color-bg-light);
    border-radius    : 4px;
    font-size        : 0.9rem;
    color            : var(--color-text-gray);
}

.price-note-block h3 {
    font-family   : var(--font-serif);
    font-size     : 1.1rem;
    color         : var(--color-primary);
    margin-bottom : 15px;
}

.price-note-block ul {
    list-style   : disc;
    padding-left : 20px;
    margin-top   : 10px;
}

.price-note-block li {
    margin-bottom : 8px;
}

@media (max-width : 900px) {
    .price-category__title {
        flex-direction : column;
        align-items    : flex-start;
        gap            : 5px;
    }

    .price-category__title span {
        font-size : 0.8rem;
    }

    .price-table-detail {
        display : block;
    }

    .price-table-detail tbody {
        display : block;
    }

    .price-table-detail tr {
        display        : flex;
        flex-direction : column;
        border-bottom  : 1px solid #ddd;
        padding        : 20px;
    }

    .price-table-detail th,
    .price-table-detail td,
    .price-table-detail td.price-val,
    .price-table-detail td.price-note {
        width      : 100%;
        padding    : 5px 0;
        border     : none;
        text-align : left;
        display    : block;
    }

    .price-table-detail th {
        font-size      : 1.1rem;
        background     : none;
        padding-bottom : 5px;
        color          : var(--color-primary);
    }

    .price-table-detail td.price-val {
        color         : var(--color-accent);
        font-size     : 1.2rem;
        text-align    : left;
        margin-bottom : 5px;
    }

    .price-table-detail td.price-note {
        font-size : 0.85rem;
    }
}

/* =========================================
           Service Detail Specific Styles (サービス詳細ページ用追記)
           ========================================= */

/* Lead Section */
.service-lead {
    padding : var(--section-spacing) 0 100px;
}

.service-lead__inner {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 80px;
    align-items           : center;
}

.service-lead__img {
    width         : 100%;
    height        : 400px;
    object-fit    : cover;
    border-radius : 4px;
    box-shadow    : 20px 20px 0 var(--color-bg-light);
}

.service-lead__text h2 {
    font-family   : var(--font-serif);
    font-size     : 2rem;
    line-height   : 1.5;
    color         : var(--color-primary);
    margin-bottom : 30px;
}

.service-lead__text p {
    color         : var(--color-text-gray);
    margin-bottom : 20px;
    text-align    : justify;
}

/* Features Section (3 Points) */
.service-features {
    background-color : var(--color-bg-light);
    padding          : 100px 0;
}

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

.feature-card {
    background    : var(--color-white);
    padding       : 40px 30px;
    border-radius : 4px;
    box-shadow    : 0 10px 30px rgba(0, 0, 0, 0.03);
    text-align    : center;
}

.feature-card__num {
    display       : inline-block;
    font-family   : var(--font-serif);
    font-size     : 3rem;
    color         : var(--color-accent);
    opacity       : 0.3;
    line-height   : 1;
    margin-bottom : 10px;
}

.feature-card__title {
    font-family   : var(--font-serif);
    font-size     : 1.25rem;
    color         : var(--color-primary);
    margin-bottom : 20px;
}

/* Flow Section */
.service-flow {
    padding : 120px 0;
}

.flow-list {
    max-width : 800px;
    margin    : 60px auto 0;
    position  : relative;
}

/* 縦線 */
.flow-list::before {
    content          : '';
    position         : absolute;
    top              : 20px;
    left             : 20px;
    width            : 1px;
    height           : calc(100% - 40px);
    background-color : #ddd;
    z-index          : 0;
}

.flow-step {
    display       : flex;
    align-items   : flex-start;
    margin-bottom : 40px;
    position      : relative;
    z-index       : 1;
}

.flow-step:last-child {
    margin-bottom : 0;
}

.flow-step__num {
    width            : 40px;
    height           : 40px;
    background-color : var(--color-primary);
    color            : var(--color-white);
    border-radius    : 50%;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    font-family      : var(--font-serif);
    font-size        : 1.1rem;
    flex-shrink      : 0;
    margin-right     : 30px;
    border           : 4px solid var(--color-white); /* 線の上に重ねるため */
}

.flow-step__content {
    flex-grow     : 1;
    background    : var(--color-bg-light);
    padding       : 30px;
    border-radius : 4px;
}

.flow-step__title {
    font-size     : 1.1rem;
    font-weight   : 700;
    color         : var(--color-primary);
    margin-bottom : 10px;
}

/* Price Section */
.service-price {
    padding          : 100px 0;
    background-color : var(--color-white);
}

.price-table {
    width           : 100%;
    max-width       : 900px;
    margin          : 60px auto 0;
    border-collapse : collapse;
}

.price-table th,
.price-table td {
    padding       : 20px 30px;
    border-bottom : 1px solid #eee;
}

.price-table th {
    background-color : var(--color-bg-light);
    color            : var(--color-primary);
    font-weight      : 700;
    width            : 60%;
    text-align       : left;
}

.price-table td {
    text-align  : right;
    font-weight : 700;
    font-family : var(--font-sans);
}

/* FAQ Section */
.service-faq {
    padding          : 100px 0;
    background-color : var(--color-bg-light);
}

.faq-list {
    max-width : 800px;
    margin    : 60px auto 0;
}

.faq-item {
    background-color : var(--color-white);
    margin-bottom    : 20px;
    border-radius    : 4px;
    overflow         : hidden;
}

.faq-question {
    padding       : 20px 30px;
    font-weight   : 700;
    color         : var(--color-primary);
    position      : relative;
    cursor        : pointer;
    padding-right : 50px;
}

.faq-question::before {
    content      : 'Q.';
    color        : var(--color-accent);
    margin-right : 10px;
    font-family  : var(--font-serif);
}

.faq-answer {
    padding     : 0 30px 30px;
    color       : var(--color-text-gray);
    line-height : 1.8;
    border-top  : 1px solid #f0f0f0;
    padding-top : 20px;
}

.faq-answer::before {
    content      : 'A.';
    color        : var(--color-primary);
    margin-right : 10px;
    font-family  : var(--font-serif);
    font-weight  : 700;
}

@media (max-width : 900px) {
    .service-lead__inner {
        grid-template-columns : 1fr;
        gap                   : 40px;
    }

    .service-lead__img {
        height : 250px;
    }

    .features-grid {
        grid-template-columns : 1fr;
        gap                   : 30px;
    }

    .flow-list::before {
        left : 15px;
    }

    .flow-step__num {
        width        : 30px;
        height       : 30px;
        font-size    : 0.9rem;
        margin-right : 15px;
    }

    .price-table th, .price-table td {
        display    : block;
        width      : 100%;
        text-align : left;
    }

    .price-table th {
        border-bottom  : none;
        padding-bottom : 5px;
    }

    .price-table td {
        padding-top : 0;
        color       : var(--color-accent);
    }
}

/* =========================================
           Terms Page Specific Styles (利用規約ページ用追記)
           ========================================= */

.terms {
    padding : var(--section-spacing) 0;
}

.terms-content {
    max-width        : 900px;
    margin           : 0 auto;
    background-color : var(--color-white);
    padding          : 80px 60px;
    border-radius    : 4px;
    box-shadow       : 0 10px 40px rgba(0, 0, 0, 0.03);
}

.terms-content h3 {
    font-family    : var(--font-serif);
    font-size      : 1.25rem;
    color          : var(--color-primary);
    margin-bottom  : 20px;
    margin-top     : 50px;
    padding-bottom : 10px;
    border-bottom  : 2px solid var(--color-bg-light);
}

.terms-content h3:first-of-type {
    margin-top : 0;
}

.terms-content p {
    color         : var(--color-text-gray);
    margin-bottom : 20px;
    text-align    : justify;
    font-size     : 0.95rem;
}

.terms-content ul {
    list-style    : disc;
    padding-left  : 24px;
    margin-bottom : 30px;
    color         : var(--color-text-gray);
    font-size     : 0.95rem;
}

.terms-content li {
    margin-bottom : 10px;
}

.terms-content ol {
    list-style    : decimal;
    padding-left  : 24px;
    margin-bottom : 30px;
    color         : var(--color-text-gray);
    font-size     : 0.95rem;
}

@media (max-width : 768px) {
    .terms-content {
        padding : 40px 24px;
    }

    .terms-content h3 {
        font-size : 1.1rem;
    }
}

/* =========================================
           Privacy Policy Specific Styles (プライバシーポリシー用追記)
           ========================================= */

.privacy {
    padding : var(--section-spacing) 0;
}

.privacy-content {
    max-width        : 900px;
    margin           : 0 auto;
    background-color : var(--color-white);
    padding          : 80px 60px;
    border-radius    : 4px;
    box-shadow       : 0 10px 40px rgba(0, 0, 0, 0.03);
}

.privacy-content h3 {
    font-family    : var(--font-serif);
    font-size      : 1.25rem;
    color          : var(--color-primary);
    margin-bottom  : 20px;
    margin-top     : 50px;
    padding-bottom : 10px;
    border-bottom  : 2px solid var(--color-bg-light);
}

.privacy-content h3:first-of-type {
    margin-top : 0;
}

.privacy-content p {
    color         : var(--color-text-gray);
    margin-bottom : 20px;
    text-align    : justify;
    font-size     : 0.95rem;
}

.privacy-content ul {
    list-style    : disc;
    padding-left  : 24px;
    margin-bottom : 30px;
    color         : var(--color-text-gray);
    font-size     : 0.95rem;
}

.privacy-content li {
    margin-bottom : 10px;
}

@media (max-width : 768px) {
    .privacy-content {
        padding : 40px 24px;
    }

    .privacy-content h3 {
        font-size : 1.1rem;
    }
}

/* =========================================
           FAQ Page Specific Styles (よくあるご質問ページ用追記)
           ========================================= */

.faq-page {
    padding : var(--section-spacing) 0;
}

/* カテゴリブロックスタイル */
.faq-category {
    margin-bottom : 100px;
}

.faq-category:last-child {
    margin-bottom : 0;
}

/* カテゴリ見出し */
.faq-category__title {
    font-family     : var(--font-serif);
    font-size       : 1.8rem;
    color           : var(--color-primary);
    border-bottom   : 2px solid var(--color-accent);
    padding-bottom  : 15px;
    margin-bottom   : 40px;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
}

.faq-category__title span {
    font-family    : var(--font-sans);
    font-size      : 1rem;
    color          : var(--color-text-gray);
    font-weight    : normal;
    letter-spacing : 0.05em;
}

/* FAQ アコーディオン */
.faq-accordion-list {
    display        : flex;
    flex-direction : column;
    gap            : 20px;
}

.faq-item {
    background-color : var(--color-white);
    border-radius    : 4px;
    box-shadow       : 0 5px 15px rgba(0, 0, 0, 0.03);
    overflow         : hidden;
    border           : 1px solid transparent;
    transition       : all 0.3s ease;
}

.faq-item.is-open {
    border-color : var(--color-primary-light);
    box-shadow   : 0 10px 30px rgba(0, 0, 0, 0.08);
}

.faq-question-bar {
    padding       : 25px 30px;
    padding-right : 60px;
    cursor        : pointer;
    position      : relative;
    display       : flex;
    align-items   : flex-start;
    gap           : 15px;
    transition    : background-color 0.3s ease;
}

.faq-question-bar:hover {
    background-color : #fafafa;
}

.faq-q-mark {
    font-family : var(--font-serif);
    font-size   : 1.2rem;
    color       : var(--color-accent);
    font-weight : 700;
    line-height : 1.4;
    flex-shrink : 0;
}

.faq-question-text {
    font-size   : 1.05rem;
    font-weight : 700;
    color       : var(--color-primary);
    line-height : 1.6;
}

/* 開閉アイコン */
.faq-toggle-icon {
    position   : absolute;
    top        : 30px;
    right      : 30px;
    width      : 20px;
    height     : 20px;
    transition : transform 0.3s ease;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
    content          : '';
    position         : absolute;
    background-color : var(--color-primary);
    top              : 50%;
    left             : 50%;
    transform        : translate(-50%, -50%);
}

.faq-toggle-icon::before {
    width  : 14px;
    height : 2px;
}

.faq-toggle-icon::after {
    width      : 2px;
    height     : 14px;
    transition : height 0.3s ease;
}

.faq-item.is-open .faq-toggle-icon {
    transform : rotate(180deg);
}

.faq-item.is-open .faq-toggle-icon::after {
    height : 0;
}

/* 回答エリア */
.faq-answer-area {
    max-height       : 0;
    overflow         : hidden;
    transition       : max-height 0.4s ease;
    background-color : var(--color-bg-light);
}

.faq-answer-content {
    padding     : 30px;
    padding-top : 20px;
    display     : flex;
    align-items : flex-start;
    gap         : 15px;
    border-top  : 1px solid rgba(0, 0, 0, 0.05);
}

.faq-a-mark {
    font-family : var(--font-serif);
    font-size   : 1.2rem;
    color       : var(--color-primary);
    font-weight : 700;
    line-height : 1.4;
    flex-shrink : 0;
}

.faq-answer-text {
    font-size   : 0.95rem;
    color       : var(--color-text-main);
    line-height : 1.8;
}

@media (max-width : 900px) {
    .faq-category__title {
        flex-direction : column;
        align-items    : flex-start;
        gap            : 5px;
    }

    .faq-category__title span {
        font-size : 0.8rem;
    }

    .faq-question-bar {
        padding       : 20px;
        padding-right : 50px;
    }

    .faq-question-text {
        font-size : 1rem;
    }

    .faq-answer-content {
        padding : 20px;
    }

    .faq-toggle-icon {
        top   : 25px;
        right : 20px;
    }
}

.p-form__success {
    background-color : var(--success);
    border           : 1px solid var(--border);
    color            : #fff;
    padding          : 15px;
    margin-bottom    : 20px;
    border-radius    : 4px;
}

.p-form__error {
    background-color : var(--error);
    border           : 1px solid var(--border);
    color            : #fff;
    padding          : 15px;
    margin-bottom    : 20px;
    border-radius    : 4px;
}