@charset "UTF-8";

/* ============================================================ */
/* === Webフォント（M PLUS Rounded 1c / 自己ホスト・フル） === */
/* ============================================================ */
/* Google Fonts「M PLUS Rounded 1c」
   ⚠️ woff2 の gasp テーブルを {65535: 0x000F} に書き換え済み（v=3〜）。
      元の google/fonts TTF は gasp={65535:2}（DOGRAYのみ＝ClearType無効）で、
      Windows の Chrome が小さい白文字をグレースケールAAで描画し「ガビガビ」に見える問題があった。
      → gasp に SYMMETRIC_SMOOTHING(ClearType) を有効化して解消（SEI_BOOST-5511）。
      フォントを再生成する場合は必ず gasp を再パッチすること（手順: ~/memo/knowledge/tech/google-font-subset-selfhost.md）。 */
@font-face {
    font-family: "M PLUS Rounded 1c";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../font/MPLUSRounded1c-Medium.woff2?v=3") format("woff2");
}
@font-face {
    font-family: "M PLUS Rounded 1c";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../font/MPLUSRounded1c-Bold.woff2?v=3") format("woff2");
}
@font-face {
    font-family: "M PLUS Rounded 1c";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../font/MPLUSRounded1c-ExtraBold.woff2?v=3") format("woff2");
}
@font-face {
    font-family: "M PLUS Rounded 1c";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../font/MPLUSRounded1c-Black.woff2?v=3") format("woff2");
}

/* ============================================================ */
/* === Foundation: scope & root ============================= */
/* ============================================================ */

/* CSS */
:root {
    /* === レスポンシブ基準値（calc内で使用） === */
    --sumeedy-base-font: 16;        /* 基準フォントサイズ */
    --sumeedy-pc-base:   1440;      /* PC */
    --sumeedy-sp-base:   402;       /* SP */
    --sumeedy-max-vw:    1580;

    /* === カラー === */
    --sumeedy-main-blue: #2E008B;   /* メインカラー（紫） */
    --sumeedy-sky:       #00A9BA;   /* アクセント水色 */
    --sumeedy-blue:      #0075C2;   /* リンク色 */
    --sumeedy-text:      #211E1E;   /* 濃いテキスト */
    --sumeedy-text-gray: #515151;   /* グレーテキスト */
    --sumeedy-bg-beige:  #F6EFE9;   /* ベージュ背景 */
    --sumeedy-bg-gray:   #EFEFEF;   /* ライトグレー */
    --sumeedy-bg-light:  #FAFAFA;
    --sumeedy-orange:    #FFB44B;   /* オレンジ */
    --sumeedy-white:     #FFFFFF;

    /* === フォント === */
    --sumeedy-font-base: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;

    --sumeedy-font-rounded: "M PLUS Rounded 1c", var(--sumeedy-font-base);

    /* === レイヤー（z-index） === */
    --sumeedy-z-base:    1;
    --sumeedy-z-content: 10;
    --sumeedy-z-fixed:   100;
    --sumeedy-z-loading: 9999;

    /* === アニメーション === */
    --sumeedy-duration-fast:    0.2s;
    --sumeedy-duration-normal:  0.4s;
    --sumeedy-duration-slow:    0.8s;
    --sumeedy-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
    --sumeedy-ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);

    /* === コンテンツ最大幅（PC内側コンテナ） === */
    --sumeedy-container-pc: 75rem;     /* 1200 / 16 */
    --sumeedy-container-sp: 22.625rem; /* 362 / 16 */

    /* === ステージ最大幅（可変システム上限時の中央寄せ基準） ===
    1580px 超では html の font-size が 17.5556px に固定される（下記 @media min-width:1580px）。
    その固定 rem では PCデザイン基準幅 1440px = 90rem に等しい（1440/16）。
    よって 1580px 想定のデザイン全幅は 90rem ×(1580/1440)=… ではなく、
    「rem 座標系での 1440 デザイン幅 = 90rem」がそのまま 1580px に拡大される。
    MV の絶対配置要素（copy/character/label）は全て 0〜90rem の 1440 デザイン座標で
    記述されているため、ステージ幅は 90rem（= 上限時 1580px）とする。 */
    --sumeedy-stage-pc: 90rem; /* 1440 / 16 */
}

/* ============================================================ */
/* === Foundation: responsive html font-size ================= */
/* ============================================================ */
/* SCSS rem() */

html {
    font-size: calc(var(--sumeedy-base-font) / var(--sumeedy-pc-base) * 100vw);

}

@media (max-width: 768px) {
    html {
        font-size: calc(var(--sumeedy-base-font) / var(--sumeedy-sp-base) * 100vw);
    }
}

@media (min-width: 1580px) {
    html {
        font-size: calc(var(--sumeedy-base-font) / var(--sumeedy-pc-base) * 1580px);
    }
}

/* ============================================================ */
/* === Foundation: reset ==================================== */
/* ============================================================ */

.sumeedy-lp,
.sumeedy-lp *,
.sumeedy-lp *::before,
.sumeedy-lp *::after {
    box-sizing: border-box;
}

.sumeedy-lp {
    margin: 0;
    padding: 0;
    color: var(--sumeedy-text);
    font-family: var(--sumeedy-font-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

/* LP */
.sumeedy-lp .sumeedy-lp__main {
    overflow-x: hidden;
    overflow-x: clip;
}

.sumeedy-lp__main img,
.sumeedy-lp__main picture,
.sumeedy-lp__main video,
.sumeedy-lp__main svg,
.p-sumeedy-contact img,
.p-sumeedy-contact picture,
.p-sumeedy-contact video,
.p-sumeedy-contact svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.sumeedy-lp a {
    color: inherit;
    text-decoration: none;
}

.sumeedy-lp button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.sumeedy-lp ul,
.sumeedy-lp ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sumeedy-lp h1,
.sumeedy-lp h2,
.sumeedy-lp h3,
.sumeedy-lp h4,
.sumeedy-lp h5,
.sumeedy-lp h6,
.sumeedy-lp p {
    margin: 0;
}

/* ============================================================ */
/* === スミーディ専用ヘッダー（/sumeedy/include/header.txt）調整 === */
/* ============================================================ */
/* SPヘッダーの上下 padding を 16→18（+2ずつ）。ヘッダー高さ 65→69 になり、
   ハンバーガー展開時のスライドメニュー（.mobile-nav-main, fixed top:69px）との隙間(4px)を埋める。
   → 高さ変化分は下の .p-sumeedy-mvintro SP margin-top も 69 に合わせている */
.sumeedy-lp .mobile-header {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/* ============================================================ */
/* === スミーディ専用フッター（/sumeedy/include/footer.txt）調整 === */
/* ============================================================ */
/* o-footer-Segment の流用元 margin-top:160px はこのLPでは不要（直前要素との余白過多）→ 0 */
.sumeedy-lp .o-footer-Segment {
    margin-top: 0;
}

/* 上の要素（social/region/language）を撤去したため copyright の上 padding は不要（PC/SP共通） */
.sumeedy-lp .m-bottom-footer .footer_copyright {
    padding-top: 0;
}

@media (min-width: 769px) {
    /* ヘッダー右上 .nav-top-right（Japan|JP）の流用元 margin-right:32px は
       検索ボタンとの間隔用。検索を撤去したため右端に余白が出るので 0 にする。 */
    .sumeedy-lp .nav-top-right {
        margin-right: 0;
    }

    /* ポリシーリンク3つの列（流用元 .col-4 = 33.33%）を 36% に広げ、3リンクを1行に収める */
    .sumeedy-lp .p-sumeedy-footer-policies {
        flex: 0 0 36%;
        max-width: 36%;
    }
}

/* ============================================================ */
/* === Layout: section ===================================== */
/* ============================================================ */

.sumeedy-lp .l-sumeedy-section {
    position: relative;
    width: 100%;
}

/* ============================================================ */
/* === Layout: inner ======================================= */
/* ============================================================ */

.sumeedy-lp .l-sumeedy-inner {
    width: 100%;
    max-width: var(--sumeedy-container-pc);
    margin-inline: auto;
    padding-inline: 0;
}

@media (max-width: 768px) {
    .sumeedy-lp .l-sumeedy-inner {
        max-width: var(--sumeedy-container-sp);
    }
}

/* ============================================================ */
/* === Component: heading ================================== */
/* ============================================================ */

.sumeedy-lp .c-sumeedy-heading {
    position: relative;
    text-align: center;
    color: var(--sumeedy-main-blue);
    font-weight: 800;
}

.sumeedy-lp .c-sumeedy-heading__bar {
    display: block;
    margin-inline: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sumeedy-lp .c-sumeedy-heading__bar--blue {
    background-image: url("../img/common/heading_bar_blue.webp");
}

.sumeedy-lp .c-sumeedy-heading__bar--green {
    background-image: url("../img/common/heading_bar_green.webp");
}

/* ============================================================ */
/* === Component: btn ====================================== */
/* ============================================================ */

.sumeedy-lp .c-sumeedy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    cursor: pointer;

}

/* ============================================================ */
/* === Component: icon-btn ================================= */
/* ============================================================ */

.sumeedy-lp .c-sumeedy-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sumeedy-white);
    border: 1px solid transparent;
    box-shadow: 0 0.25rem 0 rgba(0, 0, 0, 0.1); /* 0 4 0 rgba(0,0,0,0.1) */
    transition:
        background-color var(--sumeedy-duration-fast) var(--sumeedy-ease-out),
        border-color var(--sumeedy-duration-fast) var(--sumeedy-ease-out),
        box-shadow var(--sumeedy-duration-fast) var(--sumeedy-ease-out);
}

.sumeedy-lp .c-sumeedy-icon-btn:hover {
    background-color: var(--sumeedy-bg-gray); /* #EFEFEF */
    border-color: var(--sumeedy-white);
    box-shadow: 0 0.75rem 0.25rem rgba(0, 0, 0, 0.2); /* 0 12 4 rgba(0,0,0,0.2) */
}

@media (hover: none) {

    .sumeedy-lp .c-sumeedy-icon-btn:hover {
        background-color: var(--sumeedy-white);
        border-color: transparent;
        box-shadow: 0 0.25rem 0 rgba(0, 0, 0, 0.1);
    }
}

/* ============================================================ */
/* === Component: chara ==================================== */
/* ============================================================ */

.sumeedy-lp .c-sumeedy-chara {
    pointer-events: none;
    user-select: none;
}

.sumeedy-lp .c-sumeedy-chara img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ============================================================ */
/* === Utility: a11y ======================================= */
/* ============================================================ */

.sumeedy-lp .u-sumeedy-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================ */
/* === State =============================================== */
/* ============================================================ */

.sumeedy-lp .is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--sumeedy-duration-slow) var(--sumeedy-ease-out),
                visibility 0s var(--sumeedy-duration-slow);
}

.sumeedy-lp .is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sumeedy-lp .js-fadein {
    opacity: 0;
    transform: translateY(1.25rem); /* 20 */
    transition: opacity var(--sumeedy-duration-slow) var(--sumeedy-ease-out),
                transform var(--sumeedy-duration-slow) var(--sumeedy-ease-out);
}

.sumeedy-lp .js-fadein.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================ */
/* === s01: Loading ======================================== */
/* ============================================================ */

.sumeedy-lp .p-sumeedy-loading {
    position: fixed;
    inset: 0;
    z-index: var(--sumeedy-z-loading);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: var(--sumeedy-bg-gray); /* #EFEFEF */
}

.sumeedy-lp .p-sumeedy-loading__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 1.375rem; /* 22 */
}

/* プログレスバー外枠 */
.sumeedy-lp .p-sumeedy-loading__bar {
    position: relative;
    width: 10rem;  /* 160 */
    height: 0.5rem; /* 8 */
    background-color: var(--sumeedy-white);
    border-radius: 0.5rem; /* 8 */
    overflow: visible; /* chara */
}

.sumeedy-lp .p-sumeedy-loading__bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    height: 100%;
    background-color: var(--sumeedy-blue); /* #0075C2 */
    border-radius: 0.5rem; /* 8 */
    animation: sumeedy-loading-fill 2.2s var(--sumeedy-ease-in-out) forwards;
}

/* バー先頭の歩行キャラ */
.sumeedy-lp .p-sumeedy-loading__chara {
    position: absolute;
    left: 0;
    top: 50%;
    width: 3.75rem;  /* 60 */
    height: 4.0625rem; /* 65 */

    transform: translate(-50%, calc(-100% + 1.375rem)) rotate(0deg); /* +22px overlap */
    transform-origin: 50% 100%; /* 足元を支点にゆらゆら */
    animation:
        sumeedy-loading-chara-move 2.2s var(--sumeedy-ease-in-out) forwards,
        sumeedy-loading-chara-wobble 0.5s ease-in-out infinite alternate;
    pointer-events: none;
    user-select: none;
}

/* "Now Loading..." */
.sumeedy-lp .p-sumeedy-loading__text {
    font-family: var(--sumeedy-font-rounded);
    font-size: 0.875rem; /* 14 */
    font-weight: 700;
    line-height: 1;
    color: #000000;
    text-align: center;
    white-space: nowrap;
}

/* ===== アニメーション ===== */

@keyframes sumeedy-loading-fill {
    0%   { width: 0%; }
    100% { width: 100%; }
}

@keyframes sumeedy-loading-chara-move {
    0%   { left: 0%; }
    100% { left: 100%; }
}

@keyframes sumeedy-loading-chara-wobble {
    0%   { transform: translate(-50%, calc(-100% + 1.375rem)) rotate(-5deg); }
    100% { transform: translate(-50%, calc(-100% + 1.375rem)) rotate(5deg); }
}

/* SP: rem */

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
    .sumeedy-lp .p-sumeedy-loading__bar-fill,
    .sumeedy-lp .p-sumeedy-loading__chara {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}

/* ============================================================ */
/* === s02: MV ============================================= */
/* ============================================================ */

/* ---- MV/Intro */
.sumeedy-lp .p-sumeedy-mvintro {
    position: relative;
    width: 100%;
    /* MV */
    margin-top: 92px; /* PC */
    background-color: var(--sumeedy-white);

    overflow: hidden;
    overflow: clip;
}

.sumeedy-lp .p-sumeedy-mvintro__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 53.5rem; /* 856 */
    background-image: url("../img/mv/mv_patarn_bg.webp");
    background-repeat: repeat; /* xy */

    background-size: 11.3125rem 3.4375rem; /* 181 × 55 */
    background-position: top center;
    z-index: var(--sumeedy-z-base); /* 最背面 */
    pointer-events: none;
    will-change: transform;
}

.sumeedy-lp .p-sumeedy-mv {

    --eye-size: 1.875rem;             /* 30 */
    --eye-color: #15181C;
    --eye-l-base-x: 15.748rem;        /* 251.97 ÷ 16 */
    --eye-l-base-y: 28rem;            /* 448 ÷ 16 */
    --eye-r-base-x: 19.748rem;        /* 315.97 ÷ 16 */
    --eye-r-base-y: 27.3125rem;       /* 437 ÷ 16 */

    position: relative;
    width: 100%;

    max-width: var(--sumeedy-stage-pc); /* 90rem */
    margin-inline: auto;
    height: 49.25rem; /* 788 */
    background-color: transparent;
    /* MV/Intro */
    overflow: visible;
}

.sumeedy-lp .p-sumeedy-mv__bg {
    position: absolute;
    inset: 0;
    z-index: var(--sumeedy-z-base);
    border-radius: 0; /* 必要時に変更 */
    overflow: hidden;
    pointer-events: none;
}

.sumeedy-lp .p-sumeedy-mv__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* "Hello! I'm Sumeedy!" */
.sumeedy-lp .p-sumeedy-mv__copy {
    position: absolute;
    /* fv_copy.webp */
    left: 5.28125rem;  /* 71 + 13.5 */
    top: 2.9375rem;    /* 47 */
    width: 77.75rem;   /* 1244 */
    height: auto;
    z-index: var(--sumeedy-z-content);
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

.sumeedy-lp .p-sumeedy-mv__character {
    position: absolute;
    left: 14.8125rem;  /* 237 */
    top: 6.8125rem;    /* 109 */
    width: 57.5rem;    /* 920 */
    height: 60.75rem;  /* 972 */
    z-index: calc(var(--sumeedy-z-content) + 1);
    /* CSS rotate */
    will-change: transform;
}

.sumeedy-lp .p-sumeedy-mv__character-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.sumeedy-lp .p-sumeedy-mv__eye {
    position: absolute;
    width: var(--eye-size);
    height: calc(var(--eye-size) * 62 / 60); /* 画像 chara_eye.webp(60×62) の縦横比に合わせる（ほぼ正方形・わずかに縦長） */

    margin-left: calc(var(--eye-size) / -2);
    margin-top: calc(var(--eye-size) * -0.51667); /* 高さの半分で中心化（62/60/2） */
    background-image: url("../img/mv/chara_eye.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
    /* JS */
    transform: translate(0, 0);
    transition: transform var(--sumeedy-duration-normal) var(--sumeedy-ease-out);
    will-change: transform;
}

.sumeedy-lp .p-sumeedy-mv__eye--left {
    left: 40.20%;
    top: 36.41%;
}

.sumeedy-lp .p-sumeedy-mv__eye--right {
    left: 47.16%;
    top: 35.28%;
}

.sumeedy-lp .p-sumeedy-mv__label {
    position: absolute;
    left: 57rem;       /* 912 */
    top: 38.6875rem;   /* 619 */
    width: 26.1875rem; /* 419 */
    height: 7.0625rem; /* 113 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 1.375rem; /* 22 */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: calc(var(--sumeedy-z-content) + 2);
    white-space: nowrap;
    will-change: transform;
}

.sumeedy-lp .p-sumeedy-mv__label-sub {
    display: block;
    font-family: var(--sumeedy-font-rounded);
    font-size: 1.5rem; /* 24 */
    font-weight: 500;
    line-height: 1.5;
    color: var(--sumeedy-text-gray); /* #515151 */
}

.sumeedy-lp .p-sumeedy-mv__label-main {
    display: block;
    font-family: var(--sumeedy-font-rounded);
    font-size: 2.25rem; /* 36 */
    font-weight: 800;
    line-height: 1.5;
    color: var(--sumeedy-text); /* #211E1E */
}

/* ---- SP */

@media (max-width: 768px) {

    .sumeedy-lp .p-sumeedy-mvintro {
        margin-top: 69px; /* SP ヘッダー実高さ（mobile-header padding +2ずつで 65→69）。固定px・可変システム対象外 */
    }

    .sumeedy-lp .p-sumeedy-mvintro__bg {
        height: 36.5rem; /* 584 */
    }

    .sumeedy-lp .p-sumeedy-mv {
        height: 33.25rem;  /* 532 */

        --eye-size: 1.147rem; /* 18.35 */
    }

    .sumeedy-lp .p-sumeedy-mv__copy {
        left: 0.08125rem; /* -3 + 4.3 = 1.3 */
        top: 3.7625rem;   /* 40.12 + 20.1 = 60.2 */
        width: 24.875rem; /* 398 */
        padding-right: 0.125rem; /* 2 */
    }

    .sumeedy-lp .p-sumeedy-mv__character {
        left: -4.65rem;     /* -74.35 (≒) */
        top: 7.625rem;       /* 122 */
        width: 35.1875rem;   /* 563 */
        height: 37.1875rem;  /* 595 */
    }

    .sumeedy-lp .p-sumeedy-mv__label {

        left: 50%;
        margin-left: -6.75rem; /* -216/2 */
        top: 27.875rem;    /* 446 */
        width: 13.5rem;    /* 216 */
        height: 4.125rem;  /* 66 */
        padding: 0.75rem;  /* 12 */
        border-radius: 1rem; /* 16 */
    }

    .sumeedy-lp .p-sumeedy-mv__label-sub {
        font-size: 0.75rem; /* 12 */
    }

    .sumeedy-lp .p-sumeedy-mv__label-main {
        font-size: 1rem; /* 16 */
    }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
    .sumeedy-lp .p-sumeedy-mv__eye {
        transition: none;
    }
}

/* ============================================================ */
/* === s03: Intro ========================================== */
/* ============================================================ */

.sumeedy-lp .p-sumeedy-intro {
    position: relative;
    width: 100%;

    padding-top: 8.875rem;     /* 142 */
    padding-bottom: 8.875rem;  /* 142 */
    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    /* MV/Intro */
    background-color: transparent;
    /* MV */
    z-index: calc(var(--sumeedy-z-content) + 5);
    will-change: transform;
}

.sumeedy-lp .p-sumeedy-intro__ellipse {
    position: absolute;
    top: 1.5rem;           /* 24 */
    left: 50%;
    transform: translateX(-50%);
    width: 178.5625rem;    /* 2857 */
    height: 64.25rem;      /* 1028 */
    background-color: var(--sumeedy-sky); /* #00A9BA */
    border-radius: 50%;
    z-index: var(--sumeedy-z-base);
    pointer-events: none;
}

.sumeedy-lp .p-sumeedy-intro__inner {
    position: relative;
    width: 45rem;          /* 720 */
    display: flex;
    align-items: center;
    gap: 2.5rem;           /* 40 */
    z-index: var(--sumeedy-z-content);
}

.sumeedy-lp .p-sumeedy-intro__text {
    flex-shrink: 0;
    width: 22.5rem;        /* 360 */
    font-family: var(--sumeedy-font-rounded);
    font-size: 1rem;       /* 16 */
    font-weight: 800;
    line-height: 1.8;
    color: var(--sumeedy-white);
    word-break: break-word;
}

.sumeedy-lp .p-sumeedy-intro__chara {
    flex-shrink: 0;
    width: 20rem;          /* 320 */
    height: 22.625rem;     /* 362 */
}

.sumeedy-lp .p-sumeedy-intro__chara img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- SP */

@media (max-width: 768px) {
    .sumeedy-lp .p-sumeedy-intro {

        padding-top: 5.5rem;      /* 88 */
        padding-bottom: 3.625rem; /* 58 */
    }

    .sumeedy-lp .p-sumeedy-intro__ellipse {
        top: 1.5rem;          /* 24 */
        width: 82.1875rem;    /* 1315 */
        height: 61.875rem;    /* 990 */
    }

    /* SP */
    .sumeedy-lp .p-sumeedy-intro__inner {
        width: 22.625rem;     /* 362 */
        flex-direction: column;
    }

    /* SP */
    .sumeedy-lp .p-sumeedy-intro__text {
        width: 100%;          /* 362 */
    }

    /* SP */
    .sumeedy-lp .p-sumeedy-intro__chara {
        width: 11.375rem;     /* 182 */
        height: 12.875rem;    /* 206 */
    }
}

/* ============================================================ */
/* === s04: Charm ========================================== */
/* ============================================================ */

.sumeedy-lp .p-sumeedy-charm {
    position: relative;
    width: 100%;

    padding-block: 4.625rem 4.75rem; /* 74 76 */

    background-color: var(--sumeedy-bg-beige); /* #F6EFE9 */
    background-image: url("../img/charm/point_patarn_bg.webp");
    background-repeat: repeat;
    background-size: 11.3125rem 3.4375rem; /* 181 × 55 */
}

.sumeedy-lp .p-sumeedy-charm__heading {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;

    margin-bottom: 3.875rem; /* 62 */
}

.sumeedy-lp .p-sumeedy-charm__heading-text {
    display: block;
    font-family: var(--sumeedy-font-rounded);
    font-size: 2.25rem; /* 36 */
    font-weight: 900;   /* Rounded Mplus 1c Black */
    line-height: 2;
    color: var(--sumeedy-sky); /* #00A9BA */
    text-align: center;
    white-space: nowrap;
}

/* 「 */
.sumeedy-lp .p-sumeedy-charm__heading-text--small {
    font-size: 1.5rem; /* 24 */
    color: var(--sumeedy-text-gray); /* #515151 */
}

.sumeedy-lp .p-sumeedy-charm__heading-bar {

    width: 14.5rem;     /* 232 */
    height: 3rem;       /* 48 */
    margin-top: 0;
}

/* カードリスト */
.sumeedy-lp .p-sumeedy-charm__list {
    display: flex;
    flex-direction: column;
    gap: 3.75rem; /* 60 */
    width: 56.25rem; /* 900 */
    margin-inline: auto;
}

.sumeedy-lp .p-sumeedy-charm__card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;          /* 900 */

    background-color: var(--sumeedy-white);
    border-radius: 3.75rem; /* 60 */
    overflow: hidden;     /* card-img */
    box-shadow: 0 0.25rem 1.5rem rgba(46, 0, 139, 0.06); /* 0 4 24 */
}

/* --reverse: */
.sumeedy-lp .p-sumeedy-charm__card--reverse {
    flex-direction: row-reverse;
}

.sumeedy-lp .p-sumeedy-charm__card-img {
    position: relative;
    flex: 0 0 auto;
    width: 28.125rem;     /* 450 */
    aspect-ratio: 450 / 371;
    overflow: hidden;
    background-color: var(--sumeedy-white);
}

.sumeedy-lp .p-sumeedy-charm__card-img picture,
.sumeedy-lp .p-sumeedy-charm__card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sumeedy-lp .p-sumeedy-charm__card-body {
    position: relative;
    flex: 0 0 auto;
    width: 24.75rem;      /* 396 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.sumeedy-lp .p-sumeedy-charm__card-label {
    position: relative;
    width: 9.375rem;      /* 150 */
    height: 10rem;        /* 160 */
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: -3.8125rem; /* -61 */
    margin-bottom: 0;
}

.sumeedy-lp .p-sumeedy-charm__card-label-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: var(--sumeedy-z-base);
    pointer-events: none;
    user-select: none;
}

.sumeedy-lp .p-sumeedy-charm__card-label-text {
    position: relative;
    z-index: var(--sumeedy-z-content);
    font-family: var(--sumeedy-font-rounded);
    font-size: 2.25rem; /* 36 */
    font-weight: 900;
    line-height: 2;
    color: var(--sumeedy-white);
    text-align: center;
    white-space: nowrap;

    transform: translateY(0.1875rem); /* 3 */
}

.sumeedy-lp .p-sumeedy-charm__card-text {
    width: 100%;           /* body(396) */
    font-family: var(--sumeedy-font-rounded);
    font-size: 1.5rem;     /* 24 */
    font-weight: 500;
    line-height: 1.5;
    color: var(--sumeedy-text); /* #211E1E */
    text-align: left;
    word-break: break-word;
}

/* ---- SP */

@media (max-width: 768px) {
    .sumeedy-lp .p-sumeedy-charm {

        padding-block: 5rem 2.5rem; /* 80 40 */

    }

    .sumeedy-lp .p-sumeedy-charm__heading {
        margin-bottom: 2.5rem; /* 40 */
    }

    .sumeedy-lp .p-sumeedy-charm__heading-text {
        font-size: 1.125rem; /* 18 */
    }

    /* SP「 */
    .sumeedy-lp .p-sumeedy-charm__heading-text--small {
        font-size: 0.875rem; /* 14 */
    }

    .sumeedy-lp .p-sumeedy-charm__heading-bar {
        width: 9.0625rem;  /* 145 */
        height: 1.875rem;  /* 30 */
        margin-top: 0.25rem; /* 4 */
    }

    .sumeedy-lp .p-sumeedy-charm__list {
        width: 22.625rem; /* 362 */
        gap: 1.25rem;     /* 20 */
    }

    .sumeedy-lp .p-sumeedy-charm__card,
    .sumeedy-lp .p-sumeedy-charm__card--reverse {
        flex-direction: column;
        width: 100%;          /* 362 */
        height: auto;
        border-radius: 2.5rem; /* 40 */
    }

    /* SP body: */
    .sumeedy-lp .p-sumeedy-charm__card-body {
        order: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;

        padding: 1.25rem 1.25rem 0.75rem;  /* 20 20 12 */
        gap: 1.3125rem;         /* 21 */
    }

    .sumeedy-lp .p-sumeedy-charm__card-label {
        flex: 0 0 auto;
        width: 6.25rem;        /* 100 */
        height: 6.6875rem;     /* 107 */
        margin-top: 0;
        margin-bottom: 0;
    }

    .sumeedy-lp .p-sumeedy-charm__card-label-text {
        font-size: 1.5rem; /* 24 */
        transform: none;
    }

    .sumeedy-lp .p-sumeedy-charm__card-text {
        flex: 1 1 auto;
        width: auto;

        font-size: 1.125rem; /* 18 */
        align-self: center;
    }

    /* SP */
    .sumeedy-lp .p-sumeedy-charm__card-img {
        order: 2;
        width: 100%;          /* 362 */
        flex: 0 0 auto;
        aspect-ratio: auto;
        height: auto;
        background-color: var(--sumeedy-bg-light); /* #FAFAFA */
    }

    /* SP: */
    .sumeedy-lp .p-sumeedy-charm__card-img picture,
    .sumeedy-lp .p-sumeedy-charm__card-img img {
        height: auto;
        object-fit: contain;
    }
}

/* ============================================================ */
/* === s05: QA ============================================= */
/* ============================================================ */

.sumeedy-lp .p-sumeedy-qa {
    position: relative;
    width: 100%;
    padding-block: 5rem 13.5rem; /* 80 216 */

    background-color: var(--sumeedy-white);
    background-image: url("../img/qa/faq_patern_bg.webp");
    background-repeat: repeat;
    background-size: 9.5rem 9.5rem; /* 152 × 152 */
    overflow: hidden;
}

.sumeedy-lp .p-sumeedy-qa__heading {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 5rem; /* 80 */
    position: relative;
    z-index: var(--sumeedy-z-content);
}

.sumeedy-lp .p-sumeedy-qa__heading-text {
    display: block;
    font-family: var(--sumeedy-font-rounded);
    font-size: 2.25rem; /* 36 */
    font-weight: 900;
    line-height: 1.3;
    color: var(--sumeedy-blue); /* #0075C2 */
    text-align: center;
}

.sumeedy-lp .p-sumeedy-qa__heading-text--small {
    font-size: 1.5rem; /* 24 */
    color: var(--sumeedy-text-gray); /* #515151 */
}

.sumeedy-lp .p-sumeedy-qa__heading-bar {

    width: 14.5rem;     /* 232 */
    height: 3rem;       /* 48 */
    margin-top: 0;
}

/* 背景装飾キャラ（5枚） */
.sumeedy-lp .p-sumeedy-qa__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
    z-index: var(--sumeedy-z-base);
}

.sumeedy-lp .p-sumeedy-qa__deco-img {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

/* SP */
.sumeedy-lp .p-sumeedy-qa__deco-sp {
    display: none;
}

/* PC: */
.sumeedy-lp .p-sumeedy-qa__deco-img--01 {

    left: -5.75rem;  /* -92 */
    top: 16.6875rem; /* 267 */
    width: 29.6875rem;  /* 475 */
    height: 29.625rem;  /* 474 */
}

.sumeedy-lp .p-sumeedy-qa__deco-img--02 {

    right: -3.8125rem;  /* 1440-1061-440=-61 */
    top: 56.1875rem;    /* 899 */
    width: 27.5rem;     /* 440 */
    height: 27.375rem;  /* 438 */
    left: auto;
}

.sumeedy-lp .p-sumeedy-qa__deco-img--03 {

    left: -4.5625rem;  /* -73 */
    top: 93.1875rem;   /* 1491 */
    width: 26.375rem;  /* 422 */
    height: 26.25rem;  /* 420 */
}

.sumeedy-lp .p-sumeedy-qa__deco-img--04 {

    right: -2.9375rem;  /* 1440-1078-409=-47 */
    top: 128.1875rem;   /* 2051 */
    width: 25.5625rem;  /* 409 */
    height: 28.0625rem; /* 449 */
    left: auto;
}

.sumeedy-lp .p-sumeedy-qa__deco-img--05 {

    left: -5.1875rem;   /* -83 */
    top: 156.375rem;    /* 2502 */
    width: 29.6875rem;  /* 475 */
    height: 29.6875rem; /* 475 */
}

/* Q&A */
.sumeedy-lp .p-sumeedy-qa__list {
    position: relative;
    z-index: var(--sumeedy-z-content);
    display: flex;
    flex-direction: column;
    gap: 5rem;            /* 80 */
    width: 47.875rem;     /* 766 */
    margin-inline: auto;
}

/* Q&A 1 */
.sumeedy-lp .p-sumeedy-qa__item {
    position: relative;
    width: 100%;          /* 766 */
}

/* Q */
.sumeedy-lp .p-sumeedy-qa__q {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start; /* テキスト左寄せ */
    width: fit-content;
    height: 6.25rem;             /* 100 */
    /* 「Q.」 */
    padding-left: 7rem;          /* 112 */
    padding-right: 6rem;         /* 96 */
    background-color: #D4DFF3;
    border-radius: 0.375rem; /* 6 */
    text-align: left;
    z-index: var(--sumeedy-z-content);
}

.sumeedy-lp .p-sumeedy-qa__q-mark {
    position: absolute;
    left: 1.625rem;        /* 26 */
    top: 1.875rem;          /* 30 */
    transform: translate(-50%, -50%);
    font-family: var(--sumeedy-font-rounded);
    font-size: 6.5rem;     /* 104 */
    font-weight: 900;
    line-height: 1.5;
    color: var(--sumeedy-blue); /* #0075C2 */
    white-space: nowrap;
    pointer-events: none;
}

.sumeedy-lp .p-sumeedy-qa__q-text {
    font-family: var(--sumeedy-font-rounded);
    font-size: 1.5rem;     /* 24 */
    font-weight: 800;
    line-height: 1.5;
    color: var(--sumeedy-blue); /* #0075C2 */
    white-space: nowrap;
}

/* A */
.sumeedy-lp .p-sumeedy-qa__a {
    position: relative;
    display: block;
    width: 41.25rem;       /* 660 */
    margin-top: 1.9375rem; /* 31 */
    margin-left: 6.625rem; /* 106 */
    padding: 2.5rem 3.75rem 2.5rem 5rem; /* 40 60 40 80 */
    background-color: var(--sumeedy-bg-beige); /* #F6EFE9 */
    border-radius: 0.375rem; /* 6 */
    z-index: var(--sumeedy-z-content);

}

.sumeedy-lp .p-sumeedy-qa__a-mark {
    position: absolute;
    left: 1.65625rem;       /* 26.5 */
    top: 1.875rem;           /* 30 */
    transform: translate(-50%, -50%);
    font-family: var(--sumeedy-font-rounded);
    font-size: 6.5rem;      /* 104 */
    font-weight: 900;
    line-height: 1.5;
    color: var(--sumeedy-orange); /* #FFB44B */
    white-space: nowrap;
    pointer-events: none;
}

.sumeedy-lp .p-sumeedy-qa__a-text {
    font-family: var(--sumeedy-font-rounded);
    font-size: 1.5rem;      /* 24 */
    font-weight: 500;
    line-height: 1.5;
    color: var(--sumeedy-text); /* #211E1E */
    text-align: center;
    word-break: break-word;
}

/* ---- SP */

@media (max-width: 768px) {
    .sumeedy-lp .p-sumeedy-qa {
        padding-block: 5rem 5rem; /* 80 80 */
    }

    .sumeedy-lp .p-sumeedy-qa__heading {
        margin-bottom: 2.5rem; /* 40 */
    }

    .sumeedy-lp .p-sumeedy-qa__heading-text {
        font-size: 1.125rem; /* 18 */
    }

    .sumeedy-lp .p-sumeedy-qa__heading-text--small {
        font-size: 0.875rem; /* 14 */
    }

    .sumeedy-lp .p-sumeedy-qa__heading-bar {
        width: 9.0625rem;  /* 145 */
        height: 1.875rem;  /* 30 */
    }

    /* SP: PC */
    .sumeedy-lp .p-sumeedy-qa__deco {
        display: none;
    }

    .sumeedy-lp .p-sumeedy-qa__deco-sp {
        display: block;
        width: 10rem;        /* 160 */
        height: auto;
        margin-inline: auto;
        /* list gap 60 */
        margin-block: -1.25rem; /* -20 */
        pointer-events: none;
        user-select: none;
    }

    .sumeedy-lp .p-sumeedy-qa__list {
        width: 22.625rem;     /* 362 */
        gap: 3.75rem;         /* 60 */
    }

    /* Q */
    .sumeedy-lp .p-sumeedy-qa__q {
        display: flex;
        width: fit-content;    /* 質問文の長さで伸縮 */
        min-width: 12.5rem;    /* 200 */
        max-width: 100%;
        height: 4.1875rem;     /* 67 */
        padding: 1.25rem 3.75rem 1.25rem 5rem; /* 20 60 20 80 */
        margin-inline: auto;
        /* Q. */
    }

    .sumeedy-lp .p-sumeedy-qa__q-mark {
        left: 2.125rem;        /* 34 */
        top: 0;
        font-size: 3.75rem;    /* 60 */
    }

    .sumeedy-lp .p-sumeedy-qa__q-text {
        font-size: 1.125rem;  /* 18 */
    }

    /* A */
    .sumeedy-lp .p-sumeedy-qa__a {
        width: 22.625rem;     /* 362 */
        margin-top: 1.25rem;  /* 20 */
        margin-left: 0;
        padding: 2rem 1.25rem; /* 32 20 */
    }

    .sumeedy-lp .p-sumeedy-qa__a-mark {
        left: 2rem;             /* 32 */
        top: 0;
        font-size: 3.75rem;     /* 60 */
    }

    .sumeedy-lp .p-sumeedy-qa__a-text {
        font-size: 1.125rem; /* 18 */
        text-align: center;
    }
}

/* ============================================================ */
/* === s06: CTA ============================================ */
/* ============================================================ */

.sumeedy-lp .p-sumeedy-cta {
    position: relative;
    background-color: transparent;
    overflow: visible;
    /* FAQ */
    margin-top: -6rem; /* -96 */
    padding-block: 6.75rem 0; /* 108 0 */
    /* PC Frame 82 */
}

.sumeedy-lp .p-sumeedy-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--sumeedy-blue); /* #0075C2 */
    background-image: url("../img/cta/cta_patern.webp");
    background-repeat: repeat;
    background-size: 11.3125rem 7rem; /* 181 × 112 */

    -webkit-mask-image: radial-gradient(89.28125rem 24.0625rem at 50% -19.1625rem, transparent 99.5%, #000 100%);
    mask-image: radial-gradient(89.28125rem 24.0625rem at 50% -19.1625rem, transparent 99.5%, #000 100%);
    pointer-events: none;
}

.sumeedy-lp .p-sumeedy-cta__inner {
    z-index: var(--sumeedy-z-content);
}

.sumeedy-lp .p-sumeedy-cta__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;

    padding-block: 0 6.6875rem; /* 0 107 */
}

.sumeedy-lp .p-sumeedy-cta__body {
    display: flex;
    flex-direction: column;
    gap: 3.4375rem; /* 55 PC Frame 221 gap */
    width: 30.4375rem; /* 487 */
    flex-shrink: 0;
    margin-left: 4.75rem; /* 76 */
}

.sumeedy-lp .p-sumeedy-cta__text {
    font-family: var(--sumeedy-font-rounded);
    font-weight: 700;       /* Rounded Mplus 1c Bold */
    font-size: 1.5rem;      /* 24 */
    line-height: 2;
    color: var(--sumeedy-white);
    margin: 0;
    padding-top: 3.75rem; /* 60 */
}

.sumeedy-lp .p-sumeedy-cta__btn {
    width: 25rem;            /* 400 */
    height: 6.25rem;         /* 100 */
    background-color: var(--sumeedy-white);
    color: var(--sumeedy-blue); /* #0075C2 */
    font-family: var(--sumeedy-font-rounded);
    font-weight: 800;        /* Rounded Mplus 1c ExtraBold */
    font-size: 1.25rem;      /* 20 */
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 0.125rem;
    border-radius: 0.25rem;  /* 4 */
    border: 2px solid transparent;
    box-shadow: 0 0.25rem 0 rgba(3, 88, 145, 0.5); /* 0 4 0 rgba(3,88,145,0.5) */
    cursor: pointer;
    transition:
        background-color var(--sumeedy-duration-fast) var(--sumeedy-ease-out),
        color var(--sumeedy-duration-fast) var(--sumeedy-ease-out),
        border-color var(--sumeedy-duration-fast) var(--sumeedy-ease-out),
        box-shadow var(--sumeedy-duration-fast) var(--sumeedy-ease-out);
}

.sumeedy-lp .p-sumeedy-cta__btn:hover {
    background-color: var(--sumeedy-blue); /* #0075C2 */
    color: var(--sumeedy-white);
    border-color: var(--sumeedy-white);
    box-shadow: 0 0.75rem 0.25rem rgba(3, 88, 145, 0.8); /* 0 12 4 rgba(3,88,145,0.8) */
}

@media (hover: none) {

    .sumeedy-lp .p-sumeedy-cta__btn:hover {
        background-color: var(--sumeedy-white);
        color: var(--sumeedy-blue);
        border-color: transparent;
        box-shadow: 0 0.25rem 0 rgba(3, 88, 145, 0.5);
    }
}

.sumeedy-lp .p-sumeedy-cta__chara {
    position: absolute;

    top: -6.6875rem; /* -107 */
    right: 0.6875rem; /* 11 */
    width: 39.1875rem; /* 627 */
    flex-shrink: 0;
    pointer-events: none;
}

.sumeedy-lp .p-sumeedy-cta__chara img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .sumeedy-lp .p-sumeedy-cta {
        /* SP */
        margin-top: -5rem; /* -80 */
        padding-block: 7.5rem 0; /* 120 0 */
    }

    /* SP */
    .sumeedy-lp .p-sumeedy-cta::before {
        -webkit-mask-image: radial-gradient(41.125rem 30.9375rem at 50% -26.6875rem, transparent 99.5%, #000 100%);
        mask-image: radial-gradient(41.125rem 30.9375rem at 50% -26.6875rem, transparent 99.5%, #000 100%);
    }

    .sumeedy-lp .p-sumeedy-cta__inner {
        position: relative; /* z-index(base) */
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding-block: 0 0;
    }

    .sumeedy-lp .p-sumeedy-cta__body {
        width: 100%;
        max-width: 21.5625rem; /* 345 SP Frame 221 */
        gap: 2.5rem; /* 40 SP Frame 221 gap */
        margin-left: 0; /* PC */
    }

    .sumeedy-lp .p-sumeedy-cta__text {
        font-size: 1.125rem; /* 18 */
        padding-top: 0; /* SP */
    }

    .sumeedy-lp .p-sumeedy-cta__btn {
        width: 100%;
        border-radius: 1.25rem; /* 20 */
    }

    /* SP */
    .sumeedy-lp .p-sumeedy-cta__chara {
        position: static;
        width: 24.8125rem;    /* 397 */
        align-self: center;   /* inner */
        margin-top: 1.75rem;  /* 28 */
        margin-bottom: 0;
    }
}

/* ============================================================ */
/* === s07: Coming ========================================= */
/* ============================================================ */

.sumeedy-lp .p-sumeedy-coming {
    position: relative;
    overflow: hidden;

    background-color: var(--sumeedy-sky);
    background-image: repeating-linear-gradient(
        100deg,
        transparent 0,
        transparent 4.125rem,                 /* 66 */
        rgba(255, 255, 255, 0.1) 4.125rem,
        rgba(255, 255, 255, 0.1) 9.5625rem    /* 153 */
    );
    padding: 2.5rem 3.75rem 0; /* 40 60 0 */
}

.sumeedy-lp .p-sumeedy-coming__inner {
    position: relative;
    z-index: var(--sumeedy-z-content);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem; /* 12 */
}

.sumeedy-lp .p-sumeedy-coming__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem; /* 40 */
}

/* 45 */
.sumeedy-lp .p-sumeedy-coming__bar-wrap {
    display: flex;
    width: 1.5580625rem;  /* 24.929 */
    height: 1.5580625rem; /* 24.929 */
    align-items: center;
    justify-content: center;
}

.sumeedy-lp .p-sumeedy-coming__bar {
    display: block;

    flex-shrink: 0;
    width: 2.203125rem; /* 35.255 */
    height: 1px;
    background-color: var(--sumeedy-white);
    transform-origin: center center;
}

.sumeedy-lp .p-sumeedy-coming__bar--left {
    transform: rotate(45deg);
}

.sumeedy-lp .p-sumeedy-coming__bar--right {
    transform: rotate(-45deg);
}

.sumeedy-lp .p-sumeedy-coming__text {
    font-family: var(--sumeedy-font-rounded);
    font-weight: 700;
    font-size: 1.5rem; /* 24 */
    line-height: 2;
    color: var(--sumeedy-white);
    white-space: nowrap;
    word-break: break-word;
}

.sumeedy-lp .p-sumeedy-coming__chara {
    position: relative;
    width: 9.375rem;  /* 150 */
    height: 9.25rem;  /* 148 */
    overflow: clip;
}

.sumeedy-lp .p-sumeedy-coming__chara picture {
    display: block;
    width: 100%;
    height: 100%;
}

.sumeedy-lp .p-sumeedy-coming__chara .p-sumeedy-coming__chara-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

@media (max-width: 768px) {
    /* SP: padding-bottom */
    .sumeedy-lp .p-sumeedy-coming {
        padding: 2.5rem 3.75rem 0; /* 40 60 0 */
    }

    .sumeedy-lp .p-sumeedy-coming__row {
        gap: 1.25rem; /* 20 */
    }

    .sumeedy-lp .p-sumeedy-coming__text {
        font-size: 0.875rem; /* 14 */
    }

    /* SP */
    .sumeedy-lp .p-sumeedy-coming__chara {
        width: 8.625rem;  /* 138 */
        height: 8rem;     /* 128 */
    }
}

/* === SP セクション順序 === */
/* PC */
@media (max-width: 768px) {
    .sumeedy-lp .sumeedy-lp__main {
        display: flex;
        flex-direction: column;
    }
    .sumeedy-lp .p-sumeedy-loading  { order: 1; }
    /* MV */
    .sumeedy-lp .p-sumeedy-mvintro  { order: 2; }
    .sumeedy-lp .p-sumeedy-charm    { order: 4; }
    .sumeedy-lp .p-sumeedy-qa       { order: 5; }
    .sumeedy-lp .p-sumeedy-cta     { order: 6; } /* SP */
    .sumeedy-lp .p-sumeedy-coming  { order: 7; }
    /* contact */
}

/* ============================================================ */
/* === s08: Contact ======================================== */
/* ============================================================ */

.sumeedy-lp .p-sumeedy-contact {
    background-color: #f5f5f5;
    padding: 5rem 3.75rem; /* 80 60 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sumeedy-lp .p-sumeedy-contact__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* 24 */
}

.sumeedy-lp .p-sumeedy-contact__row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem; /* 40 */
    font-size: 1rem; /* 16 */
    line-height: 2;
    text-align: center;
    word-break: break-word;
}

.sumeedy-lp .p-sumeedy-contact__label {
    width: 7rem; /* 112 */
    color: var(--sumeedy-text-gray);
    font-weight: 500;
}

.sumeedy-lp .p-sumeedy-contact__info {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12 */
    color: var(--sumeedy-text);
    font-weight: 500;
    white-space: nowrap;
}

.sumeedy-lp .p-sumeedy-contact__info-dept {

}

.sumeedy-lp .p-sumeedy-contact__info-mail {
    color: var(--sumeedy-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.125rem;
    transition: opacity var(--sumeedy-duration-fast) var(--sumeedy-ease-out);
}

.sumeedy-lp .p-sumeedy-contact__info-mail:hover {
    opacity: 0.7;
}

@media (hover: none) {
    .sumeedy-lp .p-sumeedy-contact__info-mail:hover {
        opacity: 1;
    }
}

.sumeedy-lp .p-sumeedy-contact__icon-btn {

    padding: 1.25rem; /* 20 */
    border-radius: 2.5rem; /* 40 */
}

.sumeedy-lp .p-sumeedy-contact__icon-btn-img {
    width: 2.5rem;  /* 40 */
    height: 2.5rem; /* 40 */
    display: block;
}

@media (max-width: 768px) {
    .sumeedy-lp .p-sumeedy-contact {
        padding: 5rem 1.25rem; /* 80 20 */
    }

    .sumeedy-lp .p-sumeedy-contact__inner {
        width: 100%;
        gap: 2.5rem; /* 40 */
    }

    .sumeedy-lp .p-sumeedy-contact__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8125rem; /* 13 */
        text-align: left;
    }
}