@charset "UTF-8";
/* ====================================================
　profile.css
　プロフィールページ固有CSS（言語切替／パンくず／プロフィール紹介／モチーフ紹介／回遊カード）
　Figma node: 5149:4135 (pc_プロフィール) ／ SP版は5216:15765 (sp_プロフィール、別途対応)
　多言語展開（英語／簡体字中国語／繁体字中国語／韓国語）を見据え、日本語の文字数を前提にした
　固定幅・固定高は使用していない（プロフィール表のラベル列も min-width + flex-wrap で構成）。
==================================================== */

/* ######################################################################################

　ページ上部（言語切替・パンくず）

###################################################################################### */


/* ナビゲーション・プロフィール：言語ごとのfont設定 */
/*.langSwitch .langSwitch__item:nth-of-type(3),*/
html[lang="en"] .profileMain,
html[lang="en"] .profileMotif h2 { font-family:"Manrope", sans-serif;}

.langSwitch .langSwitch__item:nth-of-type(5),
html[lang="cmn-Hans"] .profileMain,
html[lang="cmn-Hans"] .profileMain h2 { font-family:"Noto Sans SC", sans-serif;}

.langSwitch .langSwitch__item:nth-of-type(7),
html[lang="cmn-Hant"] .profileMain, 
html[lang="cmn-Hant"] .profileMain h2 { font-family:"Noto Sans TC", sans-serif;}

.langSwitch .langSwitch__item:nth-of-type(9),
html[lang="ko"]  .profileMain,
html[lang="ko"]  .profileMain h2 { font-family:"Noto Sans KR", sans-serif;}




.profileTopBar{
    position: relative;
    min-height: 7.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profileTopBar__crumbs{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding-block: 0;
}
.profileTopBar__crumbs .breadcrumbs__list{
    padding-left: 4.8rem;
}
.profileTopBar .langSwitch__list{
    padding-block: 0;
}

.langSwitch{
    background-color: transparent;
}
.langSwitch__list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    padding-block: 1.6rem;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.016rem;
    color: #625a52;
}
.langSwitch__sep{
    display: inline-block;
    width: 0;
    height: 2.4rem;
    border-left: 1px dashed rgba(74, 66, 58, .5);
}
.langSwitch__item a{
    color: inherit;
    text-decoration: none;
}
@media (hover: hover) and (pointer: fine){
    .langSwitch__item a:hover{
        text-decoration: underline;
    }
}
.langSwitch__item.is-current{
    color: var(--color-ink-secondary);
}
.langSwitch__item.is-current a{
    text-decoration: underline;
}

/* ######################################################################################

　プロフィールメインwrapper（Figma node 5149:4311、PC専用の雲装飾4点のcontaining block）

###################################################################################### */

@media print, screen and (min-width: 768px){
    .profileMain{
        position: relative;
    }
    .profileMain__decor{
        position: absolute;
        inset: 0;
        width: 100%;
        overflow: clip;
        pointer-events: none;
    }
    .profileMain__decorInner{
        position: relative;
        width: var(--container-width);
        height: 100%;
        margin-inline: auto;
    }
    .profileMain__cloud{
        position: absolute;
        width: 29.8rem;
        height: 7rem;
        pointer-events: none;
        z-index:-1;
    }
    .profileMain__cloud--tl{
        left: -12.9rem;
        top: 4.7rem;
        --cloud-rotate: 180deg;
        --cloud-to-center: 100px;
        animation: cloudMoveToCenter 30s ease-in-out infinite;
    }
    .profileMain__cloud--tr{
        left: 104.5rem;
        top: 13.7rem;
        --cloud-to-center: -100px;
        animation: cloudMoveToCenter 25s ease-in-out infinite;
    }
    .profileMain__cloud--bl{
        left: -20.4rem;
        top: 148.3rem;
        --cloud-rotate: 180deg;
        --cloud-to-center: 100px;
        animation: cloudMoveToCenter 30s ease-in-out infinite;
    }
    .profileMain__cloud--br{
        left: 113.1rem;
        top: 166.9rem;
        --cloud-to-center: -100px;
        animation: cloudMoveToCenter 25s ease-in-out infinite;
    }
}

.pageTitle--profile img{
    display: block;
    width: 16rem;
    height: auto;
    margin-inline: auto;
}
@media print, screen and (min-width: 768px){
    .pageTitle--profile{
        text-align: center;
        padding-block: 6.4rem 3.2rem;
    }
    .pageTitle--profile img{
        width: 32.8rem;
        height: 10.7rem;
    }
}

/* ######################################################################################

　プロフィール紹介（Figma node 5149:7159）

###################################################################################### */

.profileIntro{
    padding-block: 4rem;
}
@media print, screen and (min-width: 768px){
    .profileIntro{
        padding-block: 4.8rem 9.6rem;
        position: relative;
        z-index: 0;
    }
    .profileIntro__cloudBack{
        position: absolute;
        z-index: -1;
        left: 17.4rem;
        top: 36.4rem;
        width: 22.4rem;
        height: 5.3rem;
        pointer-events: none;
        --cloud-to-center: 100px;
        animation: cloudMoveToCenter 30s ease-in-out infinite;
    }
}
.profileIntro__inner{
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}
@media print, screen and (min-width: 768px){
    .profileIntro__inner{
        flex-direction: row;
        align-items: flex-start;
        gap: 4.8rem;
    }
}

.profileIntro__portrait{
    flex: none;
}
@media print, screen and (min-width: 768px){
    .profileIntro__portrait{
        width: 36rem;
    }
}
.profileIntro__bubbleStack{
    position: relative;
    width: 100%;
    aspect-ratio: 360 / 495;
    overflow: hidden;
}
.profileIntro__bubble{
    position: absolute;
    left: 21.94%;
    top: 0;
    width: 65.83%;
    height: 39.21%;
    margin: 0;
}
.profileIntro__bubble::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../images/common/hero_bubble_shape.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: scaleX(-1);
}
.profileIntro__bubble img{
    position: absolute;
    left: 22.34%;
    top: 23.98%;
    width: 59.11%;
    height: 42.74%;
}
.profileIntro__bubble--eng img{
    left: 14.35%;
    top: 28.85%;
    width: 71.31%;
    height:auto;
}
.profileIntro__bubble--zh-s img,
.profileIntro__bubble--zh-t img{
    left: 9.92%;
    top: 25.77%;
    width: 79.96%;
    height: 37.10%;
}
.profileIntro__bubble--ko img{
    left: 8.02%;
    top: 26.02%;
    width: 83.33%;
    height: 36.84%;
}
.profileIntro__illust{
    position: absolute;
    left: 12.78%;
    top: 33.33%;
    width: 75%;
    aspect-ratio: 270 / 330;
    object-fit: contain;
}

.profileTable{
    flex: 1;
    min-width: 0;
}
.profileTable__row{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.4rem 3.2rem;
    padding-block: 2rem;
    background-image: repeating-linear-gradient(to right, rgba(74, 66, 58, .5) 0, rgba(74, 66, 58, .5) 0.4rem, transparent 0.4rem, transparent 0.8rem);
    background-position: bottom;
    background-size: 100% 0.2rem;
    background-repeat: repeat-x;
}
.profileTable__row:first-child{
    padding-top: 2.4rem;
    border-top: 4px solid var(--color-ink-secondary);
}
.profileTable__row--last{
    background-image: none;
    border-bottom: 4px solid var(--color-ink-secondary);
    padding-bottom: 2.4rem;
}
.profileTable__row--split{
    display: flex;
    gap: 1.6rem;
    padding-block: 2rem;
}
.profileTable__col{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.4rem 3.2rem;
    position: relative;
}
.profileTable__col:first-child{
    padding-right: 1.6rem;
}
.profileTable__col:first-child::after{
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.2rem;
    height: 3.2rem;
    background-image: repeating-linear-gradient(to bottom, rgba(74, 66, 58, .5) 0, rgba(74, 66, 58, .5) 0.4rem, transparent 0.4rem, transparent 0.8rem);
    background-size: 0.2rem 100%;
    background-repeat: repeat-y;
}
.profileTable__term{
    flex: none;
    width: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profileTable__pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8.8rem;
    padding: 0.2rem 0 0.4rem;
    border-radius: 999px;
    background-color: rgba(255,255,255,.5);
    background:#fbf9f0;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.014rem;
    text-align: center;
    color: var(--color-ink-secondary);
}
.profileTable__desc{
    flex: 1;
    min-width: 20rem;
}
.profileTable__value{
    margin: 0;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.016rem;
    color: var(--color-ink-secondary);
}
.profileTable__row--featured .profileTable__value{
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.024rem;
}
.profileTable__value--s{
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.016rem;
}
.profileTable__ruby{
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.012rem;
    color: var(--color-ink-secondary);
}
.profileTable__ruby__part{
    display: inline-flex;
    justify-content: center;
    flex: none;
    white-space: nowrap;
}
.profileTable__ruby__part--sei{
    width: 5rem;
}
.profileTable__ruby__part--mei{
    width: 7.8rem;
}
.profileTable__note{
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.016rem;
}
.profileIntro__desc{
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.016rem;
    color: var(--color-ink-secondary);
}
/* 多言語ページ（説明文descをsection内に持つ）。PC: desc(1行目・右列)→portrait/表(2行目)のgrid。
   DOM順はSP表示順(portrait→desc→表)に合わせてある。日本語ページには適用しない。 */
@media print, screen and (min-width: 768px){
    .profileIntro--multi{
        display: grid;
        grid-template-columns: 36rem minmax(0, 1fr);
        column-gap: 4.8rem;
        row-gap: 5.8rem;
        align-items: start;
        padding-block: 2.8rem 9.6rem;
    }
    .profileIntro--multi .profileIntro__inner{
        display: contents;
    }
    .profileIntro--multi .profileIntro__cloudBack{
        grid-row: 2;
        grid-column: 1 / -1;
        top: 24.6rem;
    }
    .profileIntro--multi .profileIntro__portrait{
        grid-row: 2;
        grid-column: 1;
    }
    .profileIntro--multi .profileTable{
        grid-row: 2;
        grid-column: 2;
    }
    .profileIntro--multi .profileIntro__desc{
        grid-row: 1;
        grid-column: 2;
    }
}

/* ######################################################################################

　モチーフ紹介「竹虎図」（Figma node 5159:7578）

###################################################################################### */

.profileMotif{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.profileMotif__badgeWrap{
    position: relative;
    z-index: 1;
    margin-bottom: -1.6rem;
    display: flex;
    justify-content: center;
}
@media print, screen and (min-width: 768px){
    .profileMotif__badgeWrap{
        margin-bottom: -3.2rem;
    }
}
.profileMotif__badge{
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
}
.profileMotif__badgeText{
    position: absolute;
    overflow: hidden;
    clip: rect(0,0,0,0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    white-space: nowrap;
    border: 0;
}
.profileMotif__badgeImg.pc{
    width: 57.2rem;
    height: auto;
}
.profileMotif__inner{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    width: 100%;
    padding: 6.4rem 2.4rem 4rem;
    border-radius: 1.6rem;
    background-color: #fff;
}
@media print, screen and (min-width: 768px){
    .profileMotif__inner{
        flex-direction: row;
        align-items: center;
        gap: 4.8rem;
        padding: 6.4rem 4.8rem 4.8rem;
        border-radius: 2.4rem;
    }
}
.profileMotif__text{
    flex: 1;
    min-width: 0;
}
.profileMotif__heading{
    margin: 0 0 1.6rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.024rem;
    color: var(--color-ink-secondary);
}
@media print, screen and (min-width: 768px){
    .profileMotif__heading{
        font-size: 2.4rem;
    }
}
.profileMotif__desc{
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.016rem;
    color: var(--color-ink-secondary);
}
.profileMotif__figure{
    flex: none;
    margin: 0;
}
@media print, screen and (min-width: 768px){
    .profileMotif__figure{
        width: 50rem;
    }
}
.profileMotif__figure img{
    width: 100%;
    aspect-ratio: 500 / 357;
    object-fit: cover;
    background-color: var(--color-bg-primary);
}
.profileMotif__caption{
    display: block;
    margin-top: 0.8rem;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.016rem;
    color: var(--color-ink-secondary);
}
.profileMotif__captionSub{
    display: block;
    margin-top: 0.4rem;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.014rem;
}
.profileMotif__more{
    display: inline-block;
    margin-top: 0.8rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.014rem;
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.profileMotif__more--pending{
    color: var(--color-text-gray);
}

/* ######################################################################################

　回遊カード（Figma node 5255:5795）

###################################################################################### */

.profileLinks{
    padding-block: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
}
@media print, screen and (min-width: 768px){
    .profileLinks{
        padding-block: 8rem;
        gap: 4.8rem;
    }
}
.profileLinks__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    width: 100%;
}
@media print, screen and (min-width: 768px){
    .profileLinks__inner{
        flex-direction: row;
        justify-content: center;
        gap: 4.8rem;
    }
}
.profileLinks__illustWrap{
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex: none;
}
.profileLinks__bubble{
    flex: none;
    width: 13.5rem;
    margin: 0;
    transform-origin: 97.8% 51.6%;
    animation: profileLinksBubbleFloat 3.4s ease-in-out infinite;
}
@keyframes profileLinksBubbleFloat{
    0%, 100%{ transform: rotate(0deg); }
    50%{ transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce){
    .profileLinks__bubble{
        animation: none;
    }
}
html.is-motion-paused .profileLinks__bubble{
    animation-play-state: paused;
}
.profileLinks__bubble{
    animation-play-state: paused;
}
html.is-scrolling:not(.is-motion-paused) .profileLinks__bubble{
    animation-play-state: running;
}
.profileLinks__bubble img{
    display: block;
    width: 100%;
}
.profileLinks__illust{
    display: block;
    flex: none;
    width: 25.1rem;
    height: auto;
}
.profileLinks__list{
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
}
@media print, screen and (min-width: 768px){
    .profileLinks__list{
        width: 38.4rem;
    }
}
.profileLinks__item a{
    display: flex;
    align-items: center;
    gap: 1.6rem;
    width: 100%;
    padding: 1.6rem 2.2rem;
    border-radius: 999px;
    background-color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.4;
    letter-spacing: 0.016rem;
    color: var(--color-ink-secondary);
    transition: background-color .2s ease;
}
@media (hover: hover) and (pointer: fine){
    .profileLinks__item a:hover{
        background-color: var(--color-bg-gray);
    }
}
.profileLinks__icon{
    flex: none;
    width: 2.1rem;
    height: auto;
}

/* SNSシェア（Figma node 5255:5627、ButtonShareSet） */
.profileShare{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
}
.profileShare__label{
    margin: 0;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.016rem;
    color: var(--color-ink-secondary);
}
.profileShare__list{
    display: flex;
    align-items: center;
    gap: 3.2rem;
}
.profileShare__list a,
.profileShare__list button{
    display: block;
}
.profileShare__list img,
.profileShare__copyBtn img{
    width: 2.4rem;
    height: 2.4rem;
}
.profileShare__copyBtn{
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

/* ######################################################################################

　SP専用調整（Figma sp_プロフィール、node 5216:15765を正とする、375px基準）

　上記のベースルールはこれまでPC・SP共通の固定rem値で書かれており、Figmaの375px時点
　では（一部を除き）近い値になっていたが、320/390/397/430pxなど375px以外の画面幅では
　固定pxのまま拡大縮小しないため、要素同士の位置関係の比率がFigmaとズレていた。
　「全画面幅で同じpx値にする」のではなく「375px基準の比率を画面幅が変わっても維持する」
　ことが目的のため、375px時のFigma実測px値Nをそのままcalc(var(--sp-px)*N)の形で使う
　（--sp-pxはcommon.cssで定義済みのcalc(100vw/375)、375px時に1px=1px、320pxで比例縮小、
　390/397/430pxで比例拡大する）。罫線の線幅（1px/2px）はheadlineとして固定pxのまま維持し、
　比例させるのはレイアウトサイズ・位置・余白・文字サイズ・画像/装飾サイズに限定する。
　get_design_contextで実測した結果、いくつかの値は現行のPC用rem値がそのままSPにも
　流用されており、Figmaの正しいSP値と食い違っていた（例：プロフィール表のラベル幅
　120px→64px、モチーフカードのgap 32px→24px等）。そうした箇所はFigmaの値を正として使う。
###################################################################################### */
@media screen and (max-width: 767px){
    /* ----- パンくず・言語切替（Figma 5216:17736 breadcrumbs y=167 h=55 →
       直下のFrame4263言語切替 y=222 h=40、隙間なく縦に積む構造）。
       PC用の「1つの帯にposition:absoluteで重ねて中央配置」は375px幅でも
       言語切替が折り返して2行になり、パンくずがその中央に重なって表示される
       不具合があったため、SPでは通常のフローで単純に縦積みへ組み直す。 -----*/
    .profileTopBar{
        position: static;
        display: block;
        min-height: 0;
    }
    .profileTopBar__crumbs{
        position: static;
        transform: none;
        padding-block: calc(var(--sp-px) * 16);
    }
    .profileTopBar__crumbs .breadcrumbs__list{
        padding-left: 0;
    }
    .profileTopBar .langSwitch__list{
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0 calc(var(--sp-px) * 16) calc(var(--sp-px) * 16);
        font-size: calc(var(--sp-px) * 13);
    }
    .profileTopBar .langSwitch__sep{
        height: calc(var(--sp-px) * 24);
    }

    /* ----- プロフィールタイトル（Figma node 5216:17208、196×64px）。
       以前は16rem(160px)に固定されておりFigma実測196pxと食い違っていた。
       h1自身の上下paddingは、Figma側でタイトルの前が40px（Frame4301の
       padding-top）・後が32px（Frame4301内gap）と非対称のため、
       .pageTitle（共通クラス、他ページとも共用）の値を上書きせず
       .pageTitle--profile側で個別に上書きする。後ろの32pxは.profileIntro
       側のpadding-topとして持たせる（二重に足さないようh1側は0にする）。 -----*/
    .pageTitle--profile{
        padding-block: calc(var(--sp-px) * 40) 0;
    }
    .pageTitle--profile img{
        width: calc(var(--sp-px) * 196);
        height: auto;
    }

    /* ----- プロフィール紹介section（Figma Frame4301、5216:15771）。
       汎用.containerのpadding-inline（2.4rem=24px）はPC基準の値で、SP Figmaでは
       16pxが正しいため個別に上書きする（.schedule__content等と同じ考え方）。
       padding-topはタイトルとの間の32pxgap、padding-bottomはsection自体の
       下端余白40px。 -----*/
    .profileIntro{
        position: relative;
        overflow-x: clip;
        padding-inline: calc(var(--sp-px) * 16);
        padding-block: calc(var(--sp-px) * 32) calc(var(--sp-px) * 40);
    }
    .profileIntro__inner{
        gap: calc(var(--sp-px) * 32);
    }
    .profileIntro__portrait{
        width: calc(var(--sp-px) * 247);
        margin-inline: auto;
    }
    .profileIntro__bubbleStack{
        aspect-ratio: 247 / 347;
    }
    .profileIntro__bubble{
        left: 21.46%;
        top: 0;
        width: 67.26%;
        height: 39.21%;
    }
    .profileIntro__illust{
        left: 11.94%;
        top: 33.43%;
        width: 76.92%;
        aspect-ratio: 190 / 231;
    }
    .profileIntro__cloud{
        position: absolute;
        font-size: calc(var(--sp-px) * 10);
        width: 16.9em;
        height: 4em;
        pointer-events: none;
    }
    .profileIntro__cloud--a{
        left: 26.2em;
        top: 19.8em;
        --cloud-to-center: -5.6em;
        animation: cloudMoveToCenter 25s ease-in-out infinite;
    }
    .profileIntro__cloud--b{
        left: 2.2em;
        top: 3.1em;
        --cloud-rotate: 180deg;
        --cloud-to-center: 5.6em;
        animation: cloudMoveToCenter 30s ease-in-out infinite;
    }
    .profileIntro__cloud--c{
        left: -1.2em;
        top: 28.6em;
        --cloud-rotate: 180deg;
        --cloud-to-center: 5.6em;
        animation: cloudMoveToCenter 25s ease-in-out infinite;
    }

    /* ----- プロフィール表（Figma node 5216:17253、5216:17254ほか）。
       行間の余白は罫線を挟んで上下12pxずつ（行の下端→罫線→次の行の上端）。
       ラベル幅は64px（PCの120pxとは異なる別値）、ラベルpillは列いっぱいに
       広がる100%幅（PCのように列より小さい固定88px矩形ではない）。
       行内の左右gapも16px（PCは32px）。
       上端・下端の罫線はPC実装が4px solidなのに対し、SP Figma実測は3px solid
       （色は共通の#4a423a）。中間罫線はPC実装がrepeating-linear-gradientの
       background画像だが、2026-09-09指示によりSPはCSS border-dashedで実装する
       （dotted禁止・background/SVG禁止、border-bottomをDOM順の下端に自然に置く）。 -----*/
    .profileTable__row{
        gap: calc(var(--sp-px) * 4) calc(var(--sp-px) * 16);
        padding-block: calc(var(--sp-px) * 12);
        background-image: none;
        border-bottom: 1px dashed rgba(74, 66, 58, .5);
    }
    .profileTable__row:first-child{
        padding-top: calc(var(--sp-px) * 16);
        border-top-width: 3px;
    }
    .profileTable__row--last{
        padding-bottom: calc(var(--sp-px) * 16);
        border-bottom: 3px solid var(--color-ink-secondary);
    }
    .profileTable__row--split{
        display: contents;
    }
    .profileTable__col{
        gap: calc(var(--sp-px) * 4) calc(var(--sp-px) * 16);
        width: 100%;
        padding-block: calc(var(--sp-px) * 12);
        border-bottom: 1px dashed rgba(74, 66, 58, .5);
    }
    .profileTable__col:first-child{
        padding-right: 0;
    }
    .profileTable__col:first-child::after{
        display: none;
    }
    .profileTable__term{
        width: calc(var(--sp-px) * 64);
    }
    .profileTable__pill{
        width: 100%;
        font-size: calc(var(--sp-px) * 13);
        letter-spacing: calc(var(--sp-px) * 0.13);
    }
    .profileTable__value{
        font-size: calc(var(--sp-px) * 16);
        letter-spacing: calc(var(--sp-px) * 0.16);
    }
    .profileTable__row--featured .profileTable__value{
        font-size: calc(var(--sp-px) * 24);
        letter-spacing: calc(var(--sp-px) * 0.24);
    }
    .profileTable__value--s{
        font-size: calc(var(--sp-px) * 16);
        letter-spacing: calc(var(--sp-px) * 0.16);
    }
    .profileTable__ruby{
        font-size: calc(var(--sp-px) * 12);
    }
    .profileTable__ruby__part--sei{
        width: calc(var(--sp-px) * 42);
    }
    .profileTable__ruby__part--mei{
        width: calc(var(--sp-px) * 67);
    }
    .profileTable__note{
        font-size: calc(var(--sp-px) * 15);
        letter-spacing: calc(var(--sp-px) * 0.16);
    }
    .profileTable__note--name{
        display: block;
        margin-left: 0;
        margin-top: calc(var(--sp-px) * 4);
        font-size: calc(var(--sp-px) * 13);
        letter-spacing: calc(var(--sp-px) * 0.13);
    }

    /* ----- モチーフ紹介（Figma node 5216:17349、5216:17353）。
       白カードのpadding/gap/radiusはPC用のrem値がそのまま流用されており
       Figma実測（左右24px・上64px・下48px・gap24px・radius24px）と食い違って
       いたため修正する。バッジとカードの重なりも-16px→-32pxに修正。
       2026-09-09指示：モチーフsection自体（5216:17349、width375）に左右16pxの
       余白が無く白カードが画面端まで広がっていたため、section側にpadding-inline:16px
       を追加する（.profileMotif__inner側のwidth:100%はそのまま、外側の親で絞る）。
       下端も、モチーフ白カード下端→次の回遊section内トラりんグループ上端の距離が
       Figma実測40pxのため、section自体のpadding-bottomで作る（回遊section側は
       直後開始のtop:0のまま変更しない）。 -----*/
    .profileMotif{
        padding-inline: calc(var(--sp-px) * 16);
        padding-bottom: calc(var(--sp-px) * 40);
    }
    .profileMotif__inner{
        padding: calc(var(--sp-px) * 64) calc(var(--sp-px) * 24) calc(var(--sp-px) * 48);
        gap: calc(var(--sp-px) * 24);
        border-radius: calc(var(--sp-px) * 24);
    }
    .profileMotif__badgeWrap{
        margin-bottom: calc(var(--sp-px) * -32);
    }
    .profileMotif__badgeImg.sp{
        width: calc(var(--sp-px) * 303);
        height: auto;
    }
    .profileMotif__heading{
        margin-bottom: calc(var(--sp-px) * 16);
        font-size: calc(var(--sp-px) * 20);
        letter-spacing: calc(var(--sp-px) * 0.24);
    }
    .profileMotif__desc{
        font-size: calc(var(--sp-px) * 16);
        letter-spacing: calc(var(--sp-px) * 0.16);
    }
    .profileMotif__figure img{
        aspect-ratio: 71 / 50;
    }
    .profileMotif__caption{
        margin-top: calc(var(--sp-px) * 8);
        font-size: calc(var(--sp-px) * 14);
        letter-spacing: calc(var(--sp-px) * 0.14);
    }
    .profileMotif__captionSub{
        margin-top: calc(var(--sp-px) * 4);
        font-size: calc(var(--sp-px) * 13);
        letter-spacing: calc(var(--sp-px) * 0.13);
    }
    .profileMotif__more{
        margin-top: calc(var(--sp-px) * 8);
        font-size: calc(var(--sp-px) * 14);
        letter-spacing: calc(var(--sp-px) * 0.14);
    }

    /* ----- 回遊カード（Figma node 5216:17364）。
       .containerの汎用24pxではなくFigma実測16pxを使う。sectionトップは
       前セクション（モチーフカード）に隙間なく接するため0、下端は40px。
       走るトラりん＋吹き出しはPC用のrem値（135px／251px）がそのまま流用されており
       Figma実測（90px／181px、gap16px）と食い違っていたため修正する。 -----*/
    .profileLinks{
        position: relative;
        overflow-x: clip;
        padding-inline: calc(var(--sp-px) * 16);
        padding-block: 0 calc(var(--sp-px) * 40);
        gap: calc(var(--sp-px) * 32);
    }
    .profileLinks__inner{
        gap: calc(var(--sp-px) * 32);
    }
    .profileLinks__illustWrap{
        gap: calc(var(--sp-px) * 16);
    }
    .profileLinks__bubble{
        width: calc(var(--sp-px) * 90);
    }
    .profileLinks__illust{
        width: calc(var(--sp-px) * 181);
        height: auto;
    }
    .profileLinks__list{
        gap: calc(var(--sp-px) * 16);
    }
    .profileLinks__item a{
        gap: calc(var(--sp-px) * 16);
        padding: calc(var(--sp-px) * 16);
        font-size: calc(var(--sp-px) * 16);
        letter-spacing: calc(var(--sp-px) * 0.16);
    }
    .profileLinks__icon{
        width: calc(var(--sp-px) * 24);
    }
    .profileLinks__cloud{
        position: absolute;
        font-size: calc(var(--sp-px) * 10);
        width: 16.9em;
        height: 4em;
        pointer-events: none;
        z-index: -1;
    }
    .profileLinks__cloud--a{
        left: -5.1em;
        top: -0.4747em;
        --cloud-to-center: 5.6em;
        animation: cloudMoveToCenter 30s ease-in-out infinite;
    }
    .profileLinks__cloud--b{
        left: 28.4em;
        top: 7.625em;
        --cloud-rotate: 180deg;
        --cloud-to-center: -5.6em;
        animation: cloudMoveToCenter 25s ease-in-out infinite;
    }

    .profileShare{
        gap: calc(var(--sp-px) * 24);
    }
    .profileShare__label{
        font-size: calc(var(--sp-px) * 16);
        letter-spacing: calc(var(--sp-px) * 0.16);
    }
    .profileShare__list{
        gap: calc(var(--sp-px) * 32);
    }
    .profileShare__list img,
    .profileShare__copyBtn img{
        width: calc(var(--sp-px) * 24);
        height: calc(var(--sp-px) * 24);
    }
    .profileShare__copyBtn img{
        width: calc(var(--sp-px) * 22);
        height: calc(var(--sp-px) * 22);
    }
}

/* ======================================================================================

　prefers-reduced-motion：雲の停止（このファイル末尾に集約）

　common.cssにも同名セレクタを含む@media (prefers-reduced-motion: reduce)ブロックが
　あるが、common.cssはこのファイルより先に読み込まれるため、後方にある
　.profileMain__cloud--tl等のanimation指定（同じ詳細度の単一クラスセレクタ）に
　上書きされて単独では効かない（実機で確認済み）。そのため、このファイル内の
　該当animation指定より必ず後ろになる位置へ同内容を追加する。

====================================================================================== */
@media (prefers-reduced-motion: reduce){
    .profileMain__cloud--tl,
    .profileMain__cloud--tr,
    .profileMain__cloud--bl,
    .profileMain__cloud--br,
    .profileIntro__cloudBack,
    .profileIntro__cloud--a,
    .profileIntro__cloud--b,
    .profileIntro__cloud--c,
    .profileLinks__cloud--a,
    .profileLinks__cloud--b{
        animation: none;
    }
}

/* ======================================================================================

　スクロール連動再生：既定は一時停止、スクロール中のみ再生（このファイル末尾に集約）

　上のprefers-reduced-motionブロックと同じ理由（後方の.profileMain__cloud--tl等の
　animation指定に上書きされる）でファイル末尾に置く。詳細はcommon.js／index.css末尾の
　「スクロール連動再生」コメント参照。

====================================================================================== */
.profileMain__cloud--tl,
.profileMain__cloud--tr,
.profileMain__cloud--bl,
.profileMain__cloud--br,
.profileIntro__cloudBack,
.profileIntro__cloud--a,
.profileIntro__cloud--b,
.profileIntro__cloud--c,
.profileLinks__cloud--a,
.profileLinks__cloud--b{
    animation-play-state: paused;
}
html.is-scrolling:not(.is-motion-paused) .profileMain__cloud--tl,
html.is-scrolling:not(.is-motion-paused) .profileMain__cloud--tr,
html.is-scrolling:not(.is-motion-paused) .profileMain__cloud--bl,
html.is-scrolling:not(.is-motion-paused) .profileMain__cloud--br,
html.is-scrolling:not(.is-motion-paused) .profileIntro__cloudBack,
html.is-scrolling:not(.is-motion-paused) .profileIntro__cloud--a,
html.is-scrolling:not(.is-motion-paused) .profileIntro__cloud--b,
html.is-scrolling:not(.is-motion-paused) .profileIntro__cloud--c,
html.is-scrolling:not(.is-motion-paused) .profileLinks__cloud--a,
html.is-scrolling:not(.is-motion-paused) .profileLinks__cloud--b{
    animation-play-state: running;
}