/* ===========================================
   Staff Single Page Styles / スタッフ個別ページスタイル
   =========================================== */

.p-aboutSection--nagomi {
    background: transparent;
    padding: clamp(60px, 8vw, 120px) 0;
}

.p-aboutSection--nagomi .l-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
}

.p-aboutSection--nagomi .p-aboutSection__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* メインタグライン */

.p-aboutSection--nagomi .p-aboutSection__tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
    margin-bottom: clamp(40px, 5vw, 60px);
    position: relative;
    width: 100%;
    max-width: 900px;
}

.p-aboutSection--nagomi .p-aboutSection__decoration {
    flex-shrink: 0;
}

.p-aboutSection--nagomi .p-aboutSection__decoration--left .p-aboutSection__olive {
    width: clamp(150px, 11.7vw, 300px);
    height: auto;
    transform: translateY(-15px) rotate(0deg);
}

.p-aboutSection--nagomi .p-aboutSection__decoration--right .p-aboutSection__olive {
    width: clamp(150px, 11.7vw, 300px);
    height: auto;
    transform: translateY(15px) rotate(180deg);
}

.p-aboutSection--nagomi .p-aboutSection__taglineText {
    text-align: center;
}

.p-aboutSection--nagomi .p-aboutSection__taglineLine1,
.p-aboutSection--nagomi .p-aboutSection__taglineLine2 {
    font-size: clamp(28px, 2.1vw, 40px);
    font-weight: 500;
    color: #414141;
    margin: 0;
    line-height: 1.8;
    font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* コンテンツエリア（画像とテキストをまとめる） */

.p-aboutSection--nagomi .p-aboutSection__contentArea {
    width: 50%;
    min-width: 400px;
    /* max-width: 600px; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}


/* スタッフ詳細ページ専用のコンテンツエリア */

.p-staffSingle__contentArea {
    width: 80%;
    min-width: 600px;
    /* max-width: 600px; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}


/* 画像とスタッフ情報を横並びにするラッパー（PC表示） */

.p-staffSingle__topArea {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 4vw, 50px);
    margin-bottom: clamp(30px, 4vw, 40px);
    align-items: center;
}


/* PC表示で横並び */

@media (min-width: 961px) {
    .p-staffSingle__topArea {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(40px, 5vw, 60px);
    }
}


/* メイン画像 */

.p-aboutSection--nagomi .p-aboutSection__heroImage {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

@media (min-width: 961px) {
    .p-aboutSection--nagomi .p-aboutSection__heroImage {
        width: 40%;
        max-width: 400px;
        margin: 0;
        position: relative;
        /* 役職バッジの絶対配置の基準点 */
    }
}

.p-aboutSection--nagomi .p-aboutSection__heroImage img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


/* スタッフ情報エリア（名前、役職、資格、自己紹介） */

.p-staffSingle__infoArea {
    flex: 1;
    width: 100%;
}

@media (min-width: 961px) {
    .p-staffSingle__infoArea {
        width: auto;
    }
}


/* サブヘッディング */

.p-aboutSection--nagomi .p-aboutSection__subheading {
    font-size: clamp(22px, 1.71vw, 42px);
    white-space: nowrap;
    font-weight: 700;
    color: #414141;
    text-align: center;
    margin: 0;
    line-height: 1.6;
    font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (min-width: 961px) {
    .p-aboutSection--nagomi .p-aboutSection__subheading {
        text-align: left;
    }
}


/* スタッフ名エリア（ふりがなと名前） */

.p-staffSingle__nameArea {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(4px, 0.5vw, 8px);
    margin: 0 0 clamp(20px, 3vw, 30px);
    flex-wrap: wrap;
}

@media (min-width: 961px) {
    .p-staffSingle__nameArea {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: clamp(20px, 3vw, 30px);
    }
}

.p-staffSingle__nameKana {
    font-size: clamp(10px, 0.78vw, 14px) !important;
    color: #5A5A5A !important;
    font-weight: 400 !important;
    font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.p-staffSingle__name {
    margin: 0 !important;
    white-space: nowrap;
}


/* 役職バッジ */

.p-staffSingle__titleArea {
    text-align: center;
    margin: 0 0 clamp(20px, 3vw, 30px);
}

@media (min-width: 961px) {
    .p-staffSingle__titleArea {
        text-align: left;
    }
}

.p-staffSingle__titleBadge {
    display: inline-block;
    background: #94B49F !important;
    color: #ffffff !important;
    padding: clamp(4px, 0.4vw, 6px) clamp(16px, 2vw, 24px) !important;
    border-radius: 100px !important;
    font-size: clamp(12px, 1.5vw, 16px) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}


/* 役職バッジ（画像の左上に配置） */


/* PC表示でも画像の左上に配置 */

@media (min-width: 461px) {
    .p-staffSingle__titleArea--onImage {
        display: block !important;
        position: absolute !important;
        top: clamp(12px, 1.5vw, 16px) !important;
        left: clamp(12px, 1.5vw, 16px) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }
    /* PC表示用の役職バッジ（infoArea内）は常に非表示 */
    .p-staffSingle__titleArea--desktop {
        display: none !important;
    }
}


/* 資格 */

.p-staffSingle__licenses {
    text-align: center;
    margin: 0 0 clamp(20px, 3vw, 30px);
}

@media (min-width: 961px) {
    .p-staffSingle__licenses {
        text-align: left;
    }
}

.p-staffSingle__licenses p {
    font-size: clamp(14px, 1.1vw, 18px) !important;
    line-height: 1.8 !important;
    color: #414141 !important;
    margin: 0 !important;
    font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}


/* 自己紹介 */

.p-staffSingle__intro {
    width: 100%;
    margin: 0;
    text-align: left;
}

@media (min-width: 961px) {
    .p-staffSingle__intro {
        margin: 0;
    }
}

.p-staffSingle__intro p {
    font-size: clamp(18px, 1.4vw, 32px);
    line-height: 2;
    color: #414141;
    margin: 0 0 clamp(20px, 2.5vw, 30px);
    font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.p-staffSingle__intro p:last-child {
    margin-bottom: 0;
}


/* 本文テキスト */

.p-aboutSection--nagomi .p-aboutSection__text {
    width: 100%;
    margin: 0 0 clamp(40px, 5vw, 60px);
    text-align: left;
}

.p-aboutSection--nagomi .p-aboutSection__text p {
    font-size: clamp(18px, 1.4vw, 32px);
    line-height: 2;
    color: #414141;
    margin: 0 0 clamp(20px, 2.5vw, 30px);
    font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.p-aboutSection--nagomi .p-aboutSection__text p:last-child {
    margin-bottom: 0;
}

.p-staffSingle__content {
    width: 100%;
    margin: 0 0 clamp(40px, 5vw, 60px);
    text-align: left;
}


/* ボタン */

.p-aboutSection--nagomi .p-aboutSection__buttons {
    display: flex;
    gap: clamp(20px, 3vw, 30px);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.c-btn--nagomi-outline {
    background: #F5F5F0;
    color: #414141;
    border: 2px solid #A8B89A;
    padding: clamp(12px, 1.8vw, 16px) clamp(32px, 4vw, 48px);
    border-radius: 30px;
    text-decoration: none;
    font-size: clamp(16px, 1.25vw, 26px);
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.c-btn--nagomi-outline:hover {
    background: #A8B89A;
    color: #ffffff;
    border-color: #A8B89A;
}


/* レスポンシブ */

@media (max-width: 960px) {
    .p-aboutSection--nagomi .p-aboutSection__tagline {
        flex-direction: column;
        gap: clamp(15px, 2vw, 20px);
    }
    .p-aboutSection--nagomi .p-aboutSection__decoration {
        display: none;
    }
    .p-aboutSection--nagomi .p-aboutSection__contentArea {
        width: 90%;
        min-width: 300px;
        max-width: 100%;
    }
    /* スタッフ詳細ページのコンテンツエリア（レスポンシブ時） */
    .p-staffSingle__contentArea {
        width: 90% !important;
        min-width: auto !important;
        max-width: 100% !important;
    }
    .p-aboutSection--nagomi .p-aboutSection__text {
        text-align: center;
    }
    /* タブレット以下では縦並び */
    .p-staffSingle__topArea {
        flex-direction: column !important;
        align-items: center !important;
    }
    .p-aboutSection--nagomi .p-aboutSection__heroImage {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: clamp(30px, 4vw, 40px) !important;
    }
    .p-staffSingle__infoArea {
        width: 100% !important;
    }
    .p-staffSingle__nameArea {
        justify-content: center !important;
        align-items: baseline !important;
        flex-direction: row !important;
    }
    .p-aboutSection--nagomi .p-aboutSection__subheading {
        text-align: center !important;
    }
    .p-staffSingle__titleArea {
        text-align: center !important;
    }
    .p-staffSingle__licenses {
        text-align: center !important;
    }
}


/* ===========================================
   Staff Archive Page Styles / スタッフアーカイブページスタイル
   =========================================== */


/* スタッフアーカイブページの背景色をなしにする */

body.post-type-archive-staff .p-voiceArchiveList,
body.archive.post-type-archive-staff .p-voiceArchiveList {
    background: transparent !important;
}


/* スタッフカードの資格表示（名前の上） */

.p-voiceArchiveList .p-voiceCard__licenses {
    font-size: clamp(12px, 0.93vw, 20px) !important;
    color: #5A5A5A !important;
    margin: 0 0 clamp(8px, 0.6vw, 12px) !important;
    font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}


/* ===========================================
   レスポンシブブレイクポイント
   =========================================== */


/* タブレット以下（960px以下） */

@media (max-width: 960px) {
    /* ここに960px以下のスタイルを追加 */
    /* min-widthを無効化（スマホでの左右はみ出し防止） */
    .p-staffPage,
    .p-staffArchive__inner {
        min-width: auto !important;
    }
}


/* スマートフォン以下（460px以下） */

@media (max-width: 460px) {
    /* min-widthを無効化（スマホでの左右はみ出し防止） */
    .p-staffPage,
    .p-staffArchive__inner {
        min-width: auto !important;
    }
    /* スタッフ詳細ページの460px以下スタイル */
    .p-aboutSection--nagomi .p-aboutSection__inner {
        width: 100% !important;
        margin: 0 auto !important;
    }
    /* タグラインのフォントサイズ */
    .p-aboutSection--nagomi .p-aboutSection__taglineLine1 {
        font-size: clamp(16px, 1.25vw, 26px) !important;
    }
    /* ふりがなを名前の上に配置 */
    .p-staffSingle__nameArea {
        flex-direction: column !important;
        align-items: center !important;
        gap: clamp(2px, 0.3vw, 4px) !important;
    }
    .p-staffSingle__nameKana {
        order: 1 !important;
    }
    .p-aboutSection--nagomi .p-aboutSection__subheading.p-staffSingle__name {
        order: 2 !important;
    }
    /* サムネ画像のaspect-ratio */
    .p-aboutSection--nagomi .p-aboutSection__heroImage {
        position: relative !important;
        aspect-ratio: 5/3 !important;
        overflow: hidden !important;
    }
    .p-aboutSection--nagomi .p-aboutSection__heroImage img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /* 役職をサムネ画像の左上に設置 */
    .p-aboutSection--nagomi .p-aboutSection__heroImage {
        position: relative !important;
    }
    /* 画像上の役職バッジ（460px以下で表示） */
    .p-staffSingle__titleArea--onImage {
        position: absolute !important;
        top: clamp(12px, 1.5vw, 16px) !important;
        left: clamp(12px, 1.5vw, 16px) !important;
        margin: 0 !important;
        z-index: 10 !important;
    }
    /* PC表示用の役職バッジ（460px以下で非表示） */
    .p-staffSingle__titleArea--desktop {
        display: none !important;
    }
    /* スタッフカードの資格表示のフォントサイズ */
    .p-voiceArchiveList .p-voiceCard__licenses {
        font-size: 12px !important;
    }
    /* 本文のフォントサイズ */
    .p-staffSingle__content p,
    .p-aboutSection--nagomi .p-aboutSection__text p {
        font-size: 15px !important;
    }
    /* h2のフォントサイズ */
    .p-staffSingle__content h2,
    .p-aboutSection--nagomi .p-aboutSection__text h2 {
        font-size: 20px !important;
    }
    /* h3のフォントサイズ */
    .p-staffSingle__content h3,
    .p-aboutSection--nagomi .p-aboutSection__text h3 {
        font-size: 18px !important;
    }
}