.commitment .c-sec__title,
.access .c-sec__title,
.instructor .c-sec__title{
    left: 10%; /* カンプ実測 */
}
.instructor .c-sec__title--ja {
    position: relative;
    transform: translateY(50%);
}
.commitment .c-sec__title {
    gap: 0px;
}
.commitment .c-sec__title--ja {
    position: relative;
    transform: translate(55%, 45%);
}
.l-commitment__wrapper {
    padding-left: 5%;
}
@media screen and (max-width: 1700px) {
    .l-commitment__wrapper {
        padding-left: 15%;
    }
}
@media screen and (max-width: 768px) {
    .access .c-sec__title,
    .instructor .c-sec__title {
        left: 6%;      /* カンプ実測：JA列の左端 20〜26px */
        top: -15px;    /* カンプ実測：セクション上端より約15px上 */
        gap: 5px;      /* カンプ実測：EN列とJA列の間隔 5.2px */
    }
    .commitment .c-sec__title {
        top: -50px;
        left: 3%;
        gap: 5px;
    }
    .commitment .c-sec__title--en,
    .access .c-sec__title--en,
    .instructor .c-sec__title--en {
        font-size: 13px; /* カンプ実測 */
    }
    .commitment .c-sec__title--ja,
    .access .c-sec__title--ja,
    .instructor .c-sec__title--ja {
        font-size: 7px;      /* カンプ実測 ※極小のため要確認 */
        letter-spacing: 1px; /* カンプ実測：字送り8.1px */
        transform: none;     /* PC用 translate(55%,45%) を解除 */
    }
    /* JAの縦位置はセクションごとにカンプ実測値が異なる */
    .commitment .c-sec__title--ja { margin-top: 79px; }
    .access     .c-sec__title--ja { margin-top: 44px; }
    .instructor .c-sec__title--ja { margin-top: 59px; }
}
.heading {
    background-image: url("../images/common/about-detail-back.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding: 70px 0 70px;
    width: 100%;
}
.c-about__heading {
    font-size: 35px;
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.5;
}
.c-about__heading--text p{
    font-size: 18px;
    text-align: center;
}
.c-about__heading--text p:not(:last-child) {
    margin-bottom: 35px;
}
@media screen and (max-width: 768px) {
    /* FV：カンプ実測 375×170px */
    .l-fv--page {
        height: auto;
        aspect-ratio: 375 / 170;
    }
    .l-fv--page .l-fv__text {
        transform: translate(-50%, 0); /* カンプ実測に合わせ縦位置を調整 */
    }
    .heading {
        padding: 20px 0 52px; /* カンプ実測 */
    }
    .c-about__heading {
        font-size: 20px;
        line-height: 35px;    /* カンプ実測：行送り35px */
        margin-bottom: 24px;  /* カンプ実測 */
    }
    .c-about__heading--text p {
        font-size: 12px;
        line-height: 24px;    /* カンプ実測：行送り24px */
        letter-spacing: 2px;  /* カンプ実測：1行21文字＝14+2 */
        text-align: left;
    }
    .c-about__heading--text p:not(:last-child) {
        margin-bottom: 24px; /* カンプ実測（PCの35pxを上書き） */
    }
}
/* ============================================================
    commitment（こだわり）
    ※Group_94.png（1920px基準）からPython/PILで実測。
      背景色#8C4521・padding-bottom・写真アスペクト比・2カラムgap(88px)・
      3枚組gap(約30px)・padding-left(62px)は実測が明確に一致。
      フォントサイズ、head内gap、オーバーレイ画像の位置/サイズは
      実測が困難なため仮値。要確認（末尾リスト参照）。
   ============================================================ */
.commitment {
    position: relative; /* .c-sec__title（absolute）の基準 */
    background: #8C4521; /* reason/galleryと同値（カンプ実測で一致） */
    padding-top: 70px;    /* ※仮値：reason/gallery/news/faqと統一 */
    padding-bottom: 100px; /* カンプ実測（写真下端〜セクション下端が100pxで一致） */
}

/* 見出し（01/02/03 共通コンポーネント） */
.c-commitment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px; /* ※仮値：カンプ実測は組み合わせにより21〜32pxとばらつきあり、平均値 */
    margin-bottom: 10px;
}
.commitment .c-commitment__head--add {
    gap: 0px;
    margin-bottom: 20px;
}
.commitment .c-commitment__head--gap {
    gap: 0px;
    margin-bottom: 40px;
}
.c-commitment__heading {
    display: flex;
    align-items: baseline;
    flex: none;
    gap: 24px; /* ※仮値：カンプ実測 約25px */
}
.c-commitment__num {
    font-size: 52px; /* ※仮値：カンプ実測（縦幅約38px）から推定 */
    color: #fff;
    letter-spacing: 2px;
}
.c-commitment__title {
    font-size: 30px; /* ※仮値：カンプ実測（縦幅約27px）から推定 */
    color: #fff;
    letter-spacing: 2px;
}
.c-commitment__desc {
    display: flex;
    align-items: center;
    gap: 20px; /* ※仮値：カンプ実測 約32px */
    flex: 1 1 auto;
    min-width: 280px; /* ※仮値：折り返し判定用の最小幅 */
}
.c-commitment__desc--add {
    align-items: flex-start;
}
.c-commitment__line {
    display: block;
    flex: none;
    width: clamp(60px, 5vw, 130px); /* ※仮値：カンプ実測（01のみ計測、約132px） */
    height: 1px;
    background: #fff;
}
.c-commitment__line--add {
    position: relative;
    top: 15px;
}
.c-commitment__lead {
    font-size: clamp(10px, 1vw, 16px); /* カンプ実測：3行時の行間32px = line-height:2 × 16px と一致（根拠あり） */
}
 
/* 01 空間：3枚組写真（月・陽・畔） */
.c-commitment__space-list {
    display: flex;
    gap: 30px; /* カンプ実測（約28〜32px） */
}
.c-commitment__space-item {
    position: relative; /* オーバーレイ画像の基準 */
    flex: 1;
}
.c-commitment__space-photo {
    aspect-ratio: 875 / 494; /* abouttsukiimg.webp実寸比。yo/hotoriもほぼ同比率のため共通化 */
    overflow: hidden;
}
.c-commitment__space-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* アイコン＋文字のオーバーレイ（写真の左下に重なってはみ出す）
   ※アイコンごとに形状・比率が異なり、はみ出し量の正確な実測が困難なため
     位置・サイズはすべて仮値。ブラウザ上での見た目確認・微調整が必須 */
.c-commitment__space-label {
    position: absolute;
    z-index: 1;
}
.c-commitment__space-label img {
    width: 100%;
    height: auto;
    display: block;
}
.c-commitment__space-label--tsuki {
    left: -12%;
    bottom: -18%;
    width: 30%;
}
.c-commitment__space-label--yo {
    left: -10%;
    bottom: -23%;
    width: 45%;
}
.c-commitment__space-label--hotori {
    left: -5%;
    bottom: -12%;
    width: 30%;
}
 
/* 02 / 03：2カラム */
.c-commitment__row {
    display: flex;
    gap: 88px; /* カンプ実測（88pxで一致） */
    margin-top: 70px; /* カンプ実測（01写真下端〜02/03見出し上端が約99pxで一致） */
}
.c-commitment__col {
    flex: 1;
}
.c-commitment__photo {
    overflow: hidden;
}
.c-commitment__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-commitment__col:nth-child(1) .c-commitment__photo {
    aspect-ratio: 966 / 530; /* aboutcommitment01.webp実寸比（カンプ実測643/351とほぼ一致） */
}
.c-commitment__col:nth-child(2) .c-commitment__photo {
    aspect-ratio: 968 / 464; /* aboutcommitment02.webp実寸比（カンプ実測644/307とほぼ一致） */
}
 
@media screen and (max-width: 960px) {
    /* ============================================================
        commitment（SP）※SUIについて_SP.pdf から実測
       ============================================================ */
    .commitment {
        padding-top: 36px;
        padding-bottom: 61px;
    }
    .l-commitment__wrapper {
        
    }
    /* 見出しブロック：SPは「番号＋見出し＋罫線」／「リード文」の2段組み */
    .c-commitment__head {
        display: block;
        margin-bottom: 31px; /* カンプ実測（01） */
    }
    .commitment .c-commitment__head--gap { margin-bottom: 16px; } /* 02 */
    .commitment .c-commitment__head--add { margin-bottom: 18px; } /* 03 */
    .c-commitment__heading {
        gap: 12px; /* カンプ実測 */
    }
    .c-commitment__num {
        font-size: 32px;
        line-height: 1;      /* 既定の line-height:2 だと行が膨らむため */
        flex: none;
        white-space: nowrap;
    }
    .c-commitment__title {
        font-size: 18px;
        line-height: 1;
        flex: none;
        white-space: nowrap;
    }
    /* 罫線：基準82px。見出しが長い02のみコンテナ幅に合わせて縮む */
    .c-commitment__line {
        flex: 0 1 82px;
        width: 82px;
        min-width: 0;
        position: relative;
        transform: translateY(-5px); /* ベースライン揃えの微調整 */
    }
    .c-commitment__desc {
        display: block;
        min-width: 0;
        margin-top: 10px; /* カンプ実測（01） */
    }
    .commitment .c-commitment__head--gap .c-commitment__desc,
    .commitment .c-commitment__head--add .c-commitment__desc {
        margin-top: 17px; /* カンプ実測（02/03） */
    }
    .c-commitment__lead {
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 2px;
    }
    .c-commitment__space-list {
        flex-direction: column;
        gap: 46px; /* カンプ実測 */
    }
    .c-commitment__row {
        flex-direction: column;
        gap: 26px;        /* カンプ実測 */
        margin-top: 70px; /* カンプ実測（PCと同値） */
    }
    /* 03の写真はSPでは02と同じ比率でトリミングされている（カンプ実測 305×167） */
    .c-commitment__col:nth-child(2) .c-commitment__photo {
        aspect-ratio: 966 / 530;
    }
}
/* access */
.access {
    position: relative;
    padding: 100px 0;
    background-color: #E2C5B6;
}
.access p {
    color: #8C4521;
}
.l-access__wrapper {
    display: flex;
    gap: 20px;
}
.c-access__left {
    flex: 1;
}
.c-access__right {
    flex: 1;
}
.c-access__right--title {
    font-size: clamp(20px, 2vw, 35px);
    line-height: 1.5;
    margin-bottom: 10px;
}
.c-access__right--text {
    font-size: clamp(12px, 1.1vw, 18px);
}
.c-access__right--inner {
    margin-top: 40px;
    display: flex;
    gap: 20px;
}
/* instructor */
.instructor {
    position: relative;
    padding: 100px 0;
    background: #773818;
}
.instructor dt,
.instructor dd {
    color: #fff;
}
.l-instructor__wrapper {
    display: flex;
    gap: 40px;
    padding-left: 3%;
}
.c-instructor__left {
    flex: 1;
}
.c-instructor__right {
    flex: 1;
}
.c-instructor__right dl:not(:last-child) {
    border-bottom: 1px solid #fff;
}
.c-instructor__right dl {
    padding-top: clamp(10px, 0.5vw, 20px);
    padding-bottom: clamp(10px, 0.5vw, 20px);
}
.c-instructor__right dt {
    font-size: clamp(16px, 1.5vw, 25px);
    margin-bottom: clamp(5px, 0.5vw, 10px);
}
.c-instructor__right dd {
    font-size: clamp(10px, 1vw, 16px);
}
.c-instructor__right .c-instructor__name {
    padding-bottom: clamp(10px, 0.5vw, 20px);
}

.c-instructor__name dt {
    font-size: clamp(20px, 2vw, 35px);
}
.c-instructor__name dd {
    font-size: clamp(20px, 2vw, 35px);
}
.c-instructor__name dd span {
    font-size: clamp(16px, 1.5vw, 25px);
}
/* ============================================================
    access（SP）
    ※PCと表示順が異なる（見出し→大画像→小画像2枚→本文）ため、
      .c-access__right を display:contents でフラット化し order で並べ替える。
      HTML構造は変更しない。
   ============================================================ */
@media screen and (max-width: 768px) {
    .access {
        padding: 34px 0 52px; /* カンプ実測 */
    }
    .l-access__wrapper {
        flex-direction: column;
        gap: 0;
    }
    .c-access__right {
        display: contents;
    }
    .c-access__right--title {
        order: 1;
        font-size: 14px;      /* カンプ実測（PCの35pxから変更） */
        line-height: 24px;
        letter-spacing: 2px;
        text-align: center;
        margin-bottom: 21px;
    }
    .c-access__left {
        order: 2;
        flex: none;
    }
    .c-access__right--inner {
        order: 3;
        margin-top: 12px; /* カンプ実測 */
        gap: 10px;        /* カンプ実測 */
    }
    .c-access__right--inner picture {
        flex: 1;
        min-width: 0;
    }
    .c-access__right--text {
        order: 4;
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 2px;
        margin-top: 21px;
    }
}
/* ============================================================
    instructor（SP）
    ※PCと表示順が異なる（講師名→写真→資格…）ため access と同方針。
      コンテンツ幅はカンプ実測 280px（l-inner ではない）。
   ============================================================ */
@media screen and (max-width: 1700px) {
    .l-instructor__wrapper {
        padding-left: 12%;
    }
}
@media screen and (max-width: 768px) {
    .instructor {
        padding: 26px 0 53px; /* カンプ実測 */
    }
    .l-instructor__wrapper {
        width: 75%; /* カンプ実測 280px / 375px */
        margin: 0 auto;
        flex-direction: column;
        gap: 0;
        padding-left: 0%;
    }
    .c-instructor__right {
        display: contents;
    }
    .c-instructor__left {
        flex: none;
    }
    /* 講師名ブロックのみ写真より上に */
    .c-instructor__right .c-instructor__name {
        order: -1;
        text-align: center;
        padding: 0 0 16px;
    }
    .c-instructor__right dl.c-instructor__name {
        border-bottom: none; /* SPでは写真の下が最初の区切り線になる */
    }
    .c-instructor__right .c-instructor__name dt {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 9px;
    }
    .c-instructor__right .c-instructor__name dd {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 2px;
    }
    .c-instructor__right .c-instructor__name dd span {
        font-size: 16px;
        margin-left: 8px; /* カンプ実測：和文名と英字名の間隔 約14px */
    }
    /* 写真の下の区切り線 */
    .c-instructor__exam {
        border-top: 1px solid #fff;
        margin-top: 27px; /* カンプ実測 */
    }
    .c-instructor__right dl {
        padding: 14px 0 22px; /* カンプ実測 */
    }
    .c-instructor__right dt {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 5px;
    }
    .c-instructor__right dd {
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 2px;
    }
    /* SPでは最後（メッセージ）の下にも線が入る */
    .c-instructor__right .c-instructor__message {
        border-bottom: 1px solid #fff;
    }
}