@charset "UTF-8";

/* =========================================
   COMPANY Page Styles & Sub Page Common
========================================= */

body {
    background: #FFB937; 
}

/* 共通クラス */
.en {
    font-weight: 700;
    letter-spacing: 0.05em;
}

.red {
    color: #ff0000;
}

.diagonal-text {
    font-size: clamp(3.5rem, 8.48vw - 0.18rem, 11.0rem);
    font-weight: 900;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #ff0000 0%, #ff0000 35%, #000000 35%, #000000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ページ内セクションタイトル */
.com-section-title {
    font-size: clamp(2rem, 4.48vw + 0.62rem, 4.0rem);
    font-weight: 500;
    margin-bottom: 60px;
        @media (max-width: 768px) {
            margin-bottom: 20px;
        }

    .en {
        font-size: clamp(1.6rem, 1.45vw + 1.25rem, 3.0rem);
        color: #ff0000;
        margin-left: 15px;
    }
}

/* 汎用インナーコンテナ */
.section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;

}

.bg-radius {
    max-width: 1300px;
    border-radius: 50px;
    background: #F0A823;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    padding: 120px;
    margin-bottom: 100px;

    @media (max-width: 768px) {
        padding: 40px 20px;
        border-radius: 30px;
        margin-bottom: 80px;
    }
}

/* --- Page MV --- */
.page-mv {
    padding-top: 180px;
    padding-bottom: 60px;

    @media (max-width: 768px) {
        padding-top: 90px;
        padding-bottom: 20px;
    }
}

/* タイトル */
.page-title-top {
    font-size: 6.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    position: relative;
    margin-left: -5px;

    @media (max-width: 768px) {
        font-size: 3.5rem;
    }
}

.title-red {
    color: #ff0000;
    position: relative;
    z-index: 1;
}

.title-black {
    color: #1a1f31;
    margin-left: -0.25em;
    position: relative;
    z-index: 2;
}


/* --- Page Navigation --- */
.page-nav {
    margin-bottom: 100px;

    @media (max-width: 768px) {
        margin-bottom: 40px;
        /* 画面端までスクロール領域を広げる */
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* スマホでインナーコンテナ設定を解除 */
    .section-inner {
        @media (max-width: 768px) {
            padding: 0;
            max-width: none;
        }
    }

    ul {
        display: flex;
        justify-content: space-between;
        list-style: none;
        padding-left: 10px;
        @media (max-width: 768px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            padding-bottom: 15px;
            white-space: nowrap;
        }
    }

    a {
        text-decoration: none;
        color: #1a1f31;
        font-weight: 500;
        font-size: 2rem;
        display: flex;
        align-items: center;
        gap: 25px;
        padding-bottom: 0;

        @media (max-width: 768px) {
            font-size: 1.5rem;
            gap: 10px;
        }

        &::after {
            display: none;
        }

        &::before {
            content: "↓";
            color: #ff0000;
            font-weight: 400;
            font-size: 2rem;
            line-height: 1;
            order: 1;
            transition: transform 0.3s ease;
        }

        &:hover::before {
            transform: translateY(4px);
        }
    }
}


/* --- Identity Section --- */
.section-identity {
    @media (max-width: 768px) {
        margin-bottom: 80px;
        padding: 60px 0;
        border-radius: 30px;
    }

    .section-inner {
        @media (max-width: 768px) {
            padding: 0 20px;
        }
    }
}

.identity-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(min-content, 1fr);
    gap: 20px;

    @media (max-width: 768px) {
        gap: 30px;
    }
}

.identity-item {
    display: flex;
    align-items: stretch;
    justify-content: center;
    height: 100%;
    gap: 20px;

    @media (max-width: 768px) {
        flex-direction: column;
        gap: 20px;
    }
}

.identity-img {
    flex: 0 0 50%;
    position: relative;
    border-radius: 40px;
    overflow: hidden;

    @media (max-width: 768px) {
        flex: auto;
        width: 100%;
        margin: 0 !important;
        height: 250px;
        border-radius: 30px;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

.identity-txt {
    flex: 0 0 50%;
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    border-radius: 40px;

    @media (max-width: 768px) {
        flex: auto;
        width: 100%;
        margin: 0 !important;
        padding: 20px 20px;
        border-radius: 30px;
    }

    p {
        line-height: 2;
        font-size: 16px;

        @media (max-width: 768px) {
            font-size: 15px;
        }
    }
}

.identity-item-reverse {
    flex-direction: row-reverse;

    @media (max-width: 768px) {
        flex-direction: column;
    }

    .identity-txt {
        margin-left: 0;
    }
}

.identity-head {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 30px;

    @media (max-width: 768px) {
        font-size: 20px;
    }

    .red {
        font-size: 18px;
        display: block;
        margin-bottom: 15px;
        letter-spacing: 0.05em;
        font-weight: 700;

        @media (max-width: 768px) {
            font-size: 16px;
        }
    }
}

.value-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 25px;

    li {
        display: flex;
        align-items: baseline;
        gap: 20px;
        font-size: 16px;
        line-height: 1.8;

        @media (max-width: 768px) {
            flex-direction: column;
            gap: 5px;
            align-items: flex-start;
            font-size: 15px;
        }
    }

    strong {
        font-size: 24px;
        font-weight: 700;
        min-width: 100px;
        flex-shrink: 0;

        @media (max-width: 768px) {
            font-size: 20px;
            min-width: auto;
        }
    }
}


/* --- CEO's Voice Section --- */
.section-ceo {
    @media (max-width: 768px) {
        margin-bottom: 80px;
    }
}

.ceo-inner {
    display: flex;
    align-items: end;
    gap: 60px;

    @media (max-width: 768px) {
        display: block;
        gap: 30px;
    }
}

.ceo-txt-area {
    flex: 1;
}

.ceo-message-head {
    font-size: 4.8rem;
    line-height: 1.4;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
    position: relative;

    @media (max-width: 768px) {
        font-size: 2.8rem;
        margin-bottom: 30px;
    }

    /* &::before {
        content: "“";
        position: absolute;
        color: #FFB937;
        font-size: 4.2em;
        margin-right: 0.2em;
        top: -70px;
        left: -80px;
    }

    &::after {
        content: "”";
        position: absolute;
        color: #FFB937;
        font-size: 4.2em;
        margin-left: 0.2em;
        bottom: -160px;
        right: 150px;
    } */
}

.ceo-message-body {
    line-height: 2;
    font-size: 1.8rem;
     @media (max-width: 768px) {
        font-size: 1.4rem;
    }
}

.ceo-img-area {
    flex: 0 0 400px;
    position: relative;

    @media (max-width: 768px) {
        flex: auto;
        width: 100%;
        max-width: 400px;
        margin: 10px auto 0;
    }

    img {
        width: 100%;
        border-radius: 40px;
        display: block;
    }
}

.ceo-name {
    writing-mode: vertical-rl;
    position: absolute;
    bottom: 0;
    right: -40px;
    font-weight: 500;
    font-size: 2.0rem;
    letter-spacing: 0.2em;

    @media (max-width: 768px) {
        writing-mode: horizontal-tb;
        position: static;
        text-align: right;
        margin-top: 15px;
        right: auto;
        font-size: 1.8rem;
    }
}


/* --- Meet the Team Section --- */
.section-team {
    margin-bottom: 160px;

    @media (max-width: 768px) {
        margin-bottom: 80px;
    }
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

    @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

.member-item {
    position: relative;
    width: 100%;
    z-index: 1;

    &:hover {
        z-index: 2;
    }
}

.member-img-off {
    display: block;
    width: 100%;
    height: auto;
}

.member-img-on {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #FFF;
    border-radius: 24.638px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.member-item:hover .member-img-on {
    opacity: 1;
}

.member-item:hover .member-img-off {
    opacity: 0;
    transition: .3s;
}

/* スマホ用ネーム調整（必要であれば） */
.member-name.en {
    @media (max-width: 768px) {
        font-size: 1.4rem;
        top: 15px;
        left: 15px;
    }
}


/* --- Outline Section --- */
.section-outline {
    @media (max-width: 768px) {
        margin-bottom: 80px;
    }
}

.outline-box {
    padding: 60px;
    display: flex;
    justify-content: space-between;

    @media (max-width: 768px) {
        padding: 30px 0px;
        border-radius: 20px;
        flex-direction: column;
    }
}
.outline-list {
    &:first-child {
        @media (max-width: 768px) {
            margin-bottom: 20px;
        }
    }
}

.outline-row {
    display: flex;
    border-bottom: 1px solid #D98D00;
    padding: 25px 0;

    &:first-child {
        padding-top: 0;
    }

    @media (max-width: 768px) {
        gap: 10px;
        padding: 20px 0;
        width: 100%;
    }

    dt {
        font-weight: 700;
        width: 180px;
        flex-shrink: 0;
        font-size: 1.8rem;
        
        @media (max-width: 768px) {
            width: 30%;
            font-size: 1.4rem;
        }
    }
    
    dd {
        line-height: 1.8;
        font-size: 1.8rem;
        @media (max-width: 768px) {
        font-size: 1.4rem;
        }
    }
}


/* =========================================
   Contact Form Styles (WordPress / CF7対応版)
========================================= */
.page-sub-text {
    margin-top: 30px;
    font-size: clamp(1.5rem, 0.36vw + 1.36rem, 1.8rem);
    line-height: 2;
}

.contact-form-section {
    color: #1a1f31;
    margin-bottom: 100px;
}

.form-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* フォームの行レイアウト */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 10px;
    }
}

.form-row dt {
    width: 30%;
    font-weight: 500;
    font-size: 18px;
    padding-top: 10px;
    padding-right: 20px;
}

@media (max-width: 768px) {
    .form-row dt {
        width: 100%;
        padding: 0;
        font-size: 15px;
        margin-bottom: 5px;
    }
}

.form-row dd {
    width: 70%;
    margin: 0;
}

@media (max-width: 768px) {
    .form-row dd {
        width: 100%;
        padding: 0;
    }
}

/* 入力フィールド */
.input-text,
.input-textarea,
.wpcf7-form-control-wrap input[type="text"],
.wpcf7-form-control-wrap input[type="email"],
.wpcf7-form-control-wrap input[type="tel"],
.wpcf7-form-control-wrap textarea {
    width: 100%;
    background-color: #fff;
    border: none;
    padding: 12px 15px;
    font-size: 18px;
    box-sizing: border-box;
    border-radius: 0;
    appearance: none;
}

.input-text:focus,
.input-textarea:focus,
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
    outline: 2px solid #1a1f31;
}

@media (max-width: 768px) {
    .input-text,
    .input-textarea,
    .wpcf7-form-control-wrap input,
    .wpcf7-form-control-wrap textarea {
        padding: 5px 10px;
        font-size: 15px;
    }
}

.input-text,
.wpcf7-form-control-wrap input {
    height: 48px;
}

.input-textarea,
.wpcf7-form-control-wrap textarea {
    height: 200px;
    resize: vertical;
}

/* -------------------------------------------
   チェックボックス (Contact Form 7 対応)
------------------------------------------- */
/* CF7が出力する余計な改行などをリセット */
.checkbox-group br {
    display: none;
}

/* 各チェックボックス項目 */
.checkbox-group .wpcf7-list-item {
    display: block !important; /* 縦並びにする */
    margin: 0 0 15px 0 !important;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    width: 100%;
}

/* 元のチェックボックスを消す */
.checkbox-group input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* カスタムチェックボックスの箱 (擬似要素で作成) */
.checkbox-group .wpcf7-list-item-label::before {
    content: "";
    display: inline-block;
    height: 24px;
    width: 24px;
    background-color: #fff;
    margin-right: 15px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: all 0.2s;
}

/* チェック時のレ点 */
.checkbox-group .wpcf7-list-item-label::after {
    content: "";
    position: absolute;
    display: none;
    left: 8px; /* 位置調整 */
    top: 50%;
    transform: translateY(-65%) rotate(45deg); /* 上下中央寄せ */
    width: 6px;
    height: 12px;
    border: solid #F0A823;
    border-width: 0 3px 3px 0;
}

/* チェックが入ったときにレ点を表示 */
.checkbox-group input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    display: block;
}

/* テキストスタイル */
.checkbox-group .wpcf7-list-item-label {
    font-weight: 500;
    font-size: 18px;
    display: flex;
    align-items: center;
    position: relative; /* afterの基準点 */
}

@media (max-width: 768px) {
    .checkbox-group .wpcf7-list-item-label {
        font-size: 14px;
    }
}

/* 送信ボタンエリア */
.submit-btn-area {
    margin-top: 60px;
    text-align: center;
}
/* =========================================
   SERVICE Section Styles
========================================= */
.service-section {
    padding: 50px 20px;
}

.service-container {
    max-width: 1100px;
    margin: 0 auto;
}

.service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px 60px;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

.service-card {
    display: flex;
    flex-direction: column;

    &:hover .service-img img {
        transform: scale(1.05);
    }
}

.service-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
    margin-bottom: 15px;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
}

.service-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

.service-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
    @media (max-width: 768px) {
        margin-bottom: 0px;
    }
}

.service-text {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: justify;
}

/* Service Button */
.service-btn.btn {
    background-color: #1a1f31;
    color: #fff;
    width: 240px;
    max-width: 100%;
    margin-top: auto;
    margin-left: auto;
    margin-right: 0;
    padding: 15px 30px;
    border-radius: 50px;

    @media (max-width: 768px) {
        width: 100%;
    }

    .btn__label {
        font-size: 18px;
        letter-spacing: 0.1em;
        font-weight: 500;
    }
}


/* =========================================
   WORKS Single Page Styles
========================================= */

/* 白い角丸エリア */
.bg-white-radius {
    background: #fff;
    border-radius: 50px;
    padding: 80px;
    width: 100%;
    margin-bottom: 80px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    @media (max-width: 768px) {
        padding: 40px 20px;
        border-radius: 30px;
        margin-bottom: 60px;
    }
}

/* 記事ヘッダー */
.work-header {
    margin-bottom: 50px;
    border-bottom: 1px solid #eee;
    padding-bottom: 40px;

    @media (max-width: 768px) {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }
}

.work-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    font-family: "sofia-pro", sans-serif;
    color: #888;
    font-weight: 500;
    
    /* PC: 16px */
    font-size: 1.6rem;

    /* スマホ: 12px */
    @media (max-width: 768px) {
        font-size: 1.2rem;
        gap: 15px;
    }
}

.work-cat {
    color: #f0a823;
    font-weight: 700;
}

.work-title {
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 25px;
}

.work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;

    li {
        /* PC: 15px */
        font-size: 1.5rem;
        color: #ff0000;
        font-weight: 700;
        background: #fff5f5;
        padding: 5px 12px;
        border-radius: 4px;

        /* スマホ: 12px */
        @media (max-width: 768px) {
            font-size: 1.2rem;
            padding: 4px 10px;
        }
    }
}

/* メインビジュアル */
.work-main-visual {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 60px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    img {
        width: 100%;
        height: auto;
        display: block;
    }

    @media (max-width: 768px) {
        margin-bottom: 40px;
        border-radius: 12px;
    }
}

/* 本文エリア */
.work-body {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 80px;

    @media (max-width: 900px) {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 60px;
    }
}

.work-desc {
    flex: 1;

    p {
        font-size: 1.6rem;
        line-height: 2;
        margin-bottom: 40px;
        color: #333;
        
        @media (max-width: 768px) {
            /* 本文は読みやすさ重視で14px〜15px程度維持がおすすめですが
               ご希望に合わせて調整可能です（現状15px程度になります） */
            font-size: 1.5rem; 
        }
    }
}

.work-sub-head {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    border-left: 4px solid #f0a823;
    padding-left: 15px;
    line-height: 1.4;

    @media (max-width: 768px) {
        font-size: 1.8rem;
    }
}

/* 詳細テーブル（右側） */
.work-info-table {
    width: 300px;
    flex-shrink: 0;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 20px;
    height: fit-content;

    @media (max-width: 900px) {
        width: 100%;
        padding: 20px;
    }

    dl {
        margin-bottom: 20px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
            border-bottom: none;
            padding-bottom: 0;
        }
    }

    dt {
        font-family: "sofia-pro", sans-serif;
        font-weight: 700;
        color: #f0a823;
        margin-bottom: 8px;
        /* PC: 15px */
        font-size: 1.5rem;

        /* スマホ: 12px */
        @media (max-width: 768px) {
            font-size: 1.2rem;
            margin-bottom: 4px;
        }
    }

    dd {
        /* PC: 16px */
        font-size: 1.6rem;
        line-height: 1.6;
        word-break: break-all;

        /* スマホ: 13px (12pxだと見づらい可能性があるので少しだけ大きく) */
        @media (max-width: 768px) {
            font-size: 1.3rem;
        }
    }

    a {
        color: #333;
        text-decoration: underline;
        &:hover {
            color: #f0a823;
            text-decoration: none;
        }
    }
}

/* サイトを見るボタン */
.work-link-btn.btn {
    width: 100%;
    max-width: 300px;
    margin: 0;
    font-size: 1.6rem;
    
    @media (max-width: 768px) {
        max-width: 100%;
        font-size: 1.4rem; /* ボタンも少し小さく */
    }
}

/* ギャラリーエリア */
.work-gallery {
    display: flex;
    flex-direction: column;
    gap: 40px;

    img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        border: 1px solid #eee;
    }
}

.work-gallery-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ページネーション（前後リンク） */
.work-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    font-family: "sofia-pro", sans-serif;
    font-weight: 700;
    padding: 0 20px;
    
    /* PC: 16px */
    font-size: 1.6rem;

    /* スマホ: 12px */
    @media (max-width: 768px) {
        padding: 0;
        font-size: 1.2rem;
    }

    a {
        text-decoration: none;
        color: #1a1f31;
        transition: color 0.3s;
        display: flex;
        align-items: center;
        gap: 10px;

        &:hover {
            color: #ff0000;
        }
    }

    .archive-link {
        /* PC: 15px */
        font-size: 1.5rem;
        border: 1px solid #1a1f31;
        padding: 10px 20px;
        border-radius: 30px;
        
        /* スマホ: 12px */
        @media (max-width: 768px) {
            font-size: 1.2rem;
            padding: 8px 16px;
        }

        &:hover {
            background: #1a1f31;
            color: #fff;
        }
    }
}

/* =========================================
   MEMBER Single Page Styles
========================================= */

.member-profile-wrap {
    display: flex;
    gap: 60px;
    align-items: flex-start;

    @media (max-width: 900px) {
        flex-direction: column;
        gap: 40px;
    }
}

/* 左側：写真エリア */
.member-img-area {
    flex: 0 0 400px;
    width: 400px;
    
    @media (max-width: 900px) {
        flex: auto;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    img {
        width: 100%;
        height: auto;
        border-radius: 20px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        display: block;
    }
}

/* 右側：情報エリア */
.member-info-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 名前・役職ヘッダー */
.member-header {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;

    @media (max-width: 768px) {
        margin-bottom: 30px;
        text-align: center;
    }
}

.member-position {
    /* PC: 15px */
    font-size: 1.5rem;
    color: #666;
    margin-bottom: 10px;
    font-weight: 500;

    /* スマホ: 12px */
    @media (max-width: 768px) {
        font-size: 1.2rem;
    }
}

.member-name-ja {
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 5px;
}

.member-name-en {
    font-family: "sofia-pro", sans-serif;
    font-size: 1.6rem;
    color: #f0a823; 
    font-weight: 700;
    letter-spacing: 0.1em;
    
    /* スマホ: 14px */
    @media (max-width: 768px) {
        font-size: 1.4rem;
    }
}

/* 本文エリア */
.member-body {
    .member-catch {
        font-size: clamp(1.8rem, 2vw, 2.2rem);
        font-weight: 700;
        line-height: 1.6;
        margin-bottom: 30px;
        
        .red {
            font-size: 1.2em;
            color: #ff0000;
        }
    }

    .member-text {
        font-size: 1.6rem;
        line-height: 2;
        margin-bottom: 50px;
        color: #333;
        text-align: justify;
        
        @media (max-width: 768px) {
            font-size: 1.5rem;
        }
    }
}

/* 経歴（Biography）エリア */
.member-history {
    margin-bottom: 50px;
    border-top: 1px solid #eee;
    padding-top: 40px;
}

.history-title {
    font-family: "sofia-pro", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #f0a823;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    
    @media (max-width: 768px) {
        font-size: 1.8rem;
    }
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.history-row {
    display: flex;
    align-items: baseline;
    gap: 30px;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 20px;

    &:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    @media (max-width: 768px) {
        flex-direction: column;
        gap: 5px;
    }

    dt {
        font-weight: 700;
        min-width: 80px;
        font-size: 1.6rem;
        color: #1a1f31;

        /* スマホ: 12px (年号) */
        @media (max-width: 768px) {
            font-size: 1.2rem;
        }
    }

    dd {
        font-size: 1.5rem;
        line-height: 1.8;
        color: #333;

        /* スマホ: 13px (本文) */
        @media (max-width: 768px) {
            font-size: 1.3rem;
        }
    }
}

/* Q&Aエリア */
.member-qa {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 20px;

    @media (max-width: 768px) {
        padding: 20px;
    }

    dl {
        margin-bottom: 20px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
            border-bottom: none;
            padding-bottom: 0;
        }
    }

    dt {
        font-family: "sofia-pro", sans-serif;
        font-weight: 700;
        color: #f0a823;
        margin-bottom: 8px;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        gap: 10px;

        /* スマホ: 12px (タイトル) */
        @media (max-width: 768px) {
            font-size: 1.2rem;
            margin-bottom: 4px;
        }

        &::before {
            content: "Q.";
            font-family: "sofia-pro", sans-serif;
            font-weight: 900;
            color: #1a1f31;
            font-size: 1.8rem;
            
            /* スマホ: Qマークも少し小さく */
            @media (max-width: 768px) {
                font-size: 1.5rem;
            }
        }
    }

    dd {
        font-size: 1.6rem;
        line-height: 1.8;
        padding-left: 28px;
        
        /* スマホ: 13px */
        @media (max-width: 768px) {
            font-size: 1.3rem;
            padding-left: 0; /* スマホでは左インデントなくして幅を稼ぐ */
            margin-top: 5px;
        }
    }
}

/* =========================================
   WORKS Archive Page Styles
========================================= */
.works-archive-section {
    padding-bottom: 12rem;
}

.works-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2rem;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 5rem;
    }
}

.works-item {
    display: flex;
    flex-direction: column;
}

.works-link {
    display: block;
    width: 100%;
    transition: opacity 0.3s;

    &:hover {
        opacity: 0.8;
    }
}

.works-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    background-color: #fff;

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

.works-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.works-title {
    font-size: 23px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.4;

    @media (max-width: 768px) {
        font-size: 1.8rem;
    }
}

.works-cat-label {
    background-color: #fff;
    color: #F0A823;
    font-size: 15px;
    font-weight: 500;
    padding: 5px 9px;
    border-radius: 5px;
    margin-bottom: 1.5rem;
    display: inline-block;
    letter-spacing: 0.05em;

    @media (max-width: 768px) {
        font-size: 1.3rem;
    }
}

.works-tags {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    @media (max-width: 768px) {
        font-size: 1.4rem;
    }

    span {
        color: #FF0000;
        font-size: 15px;
        font-weight: 700;

        @media (max-width: 768px) {
            font-size: 1.4rem;
        }
    }
}