/*
Theme Name: moll-lp
Version: 1.0
*/


/*-----------------------------resetCSS - modern resetbase */
html {
    box-sizing: border-box;
    -ms-overflow-style: scrollbar;
    overflow-x: hidden;
}

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

/* Remove default padding */

ul[class],
ol[class] {
    padding: 0;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
    margin: 0;
}

/* Set core root defaults */

html {
    scroll-behavior: smooth;
}

/* Set core body defaults */

body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 100%;
}

/* Remove list styles on ul, ol elements with a class attribute */

ul[class],
ol[class] {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

/* A elements that don't have a class get default styles */

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

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

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
    font: inherit;
}

address,
em {
    font-style: normal;
}

table {
    border-collapse: collapse;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
    -webkit-appearance: none;
    border-radius: 0;
}

input[type="search"],
input[type="submit"],
input[type="button"] {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    box-sizing: border-box;
    cursor: pointer;
}

input[type="search"]::-webkit-search-decoration,
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
    display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-weight: normal;
}

/*-----------------------------ベース設定*/
body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: max(17px, 1.01vw);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: .02em;
    position: relative;
    background: #fff;
    color: #393E41;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: #393E41;
    display: block;
    cursor: pointer;
    -webkit-text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/*iPhone*/
@media (min-width: 599px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}

/*iPhoneのスクロールバーを消す*/
@supports (-webkit-touch-callout: none) {
    html {
        height: -webkit-fill-available;
    }

    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

@media screen and (max-width: 1023px) {

    body {
        font-size: 16px;
    }

}

/*==============================================================
/ utility
/==============================================================*/
span.is-block {
    display: inline-block;
}

.is-flex {
    display: flex;
    flex-wrap: wrap;
}

.inner {
    max-width: max(1200px, 83.33333333333334vw);
    width: calc(100% - 120px);
    margin: 0 auto;
    box-sizing: border-box;

    @media screen and (max-width: 767px) {
        width: calc(100% - 30px);
    }
}

a.anchor {
    display: block;
    padding-top: 85px;
    margin-top: -85px;
}

.sp-only {
    display: none;

    @media screen and (max-width: 767px) {
        display: block;
    }
}

.sp-sm-only {
    display: none;

    @media screen and (max-width: 599px) {
        display: block;
    }
}

.pc-only {
    display: block;

    @media screen and (max-width: 767px) {
        display: none;
    }
}

.text-bold {
    font-weight: 600;
}

.popUp {
    transform: scale(.9);
    opacity: 0;
    visibility: hidden;
}


/*==============================================================
/ btn
/==============================================================*/
/*modBtn1*/
.modBtn1 {
    width: 100%;
    max-width: 280px;
}

.modBtn1 a {
    position: relative;
    height: 60px;
    width: 100%;
    border-radius: 48px;
    overflow: hidden;
    background-color: #FEF06F;
    border: 2px solid rgba(255, 255, 255, 0);
    text-align: center;
    cursor: pointer;
    display: block;
}

.modBtn1 a .btnInner {
    position: relative;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .2em;
    color: #20201F;
    padding: 11px 6px 11px 0;
    display: block;
    background: url(../img/btn-arrow-w.svg) no-repeat center right 20px;
    background-size: 30px;
}

.modBtn1 a:hover .btnInner {
    background: url(../img/btn-arrow-y.svg) no-repeat center right 20px;
    background-size: 30px;
}

.modBtn1 a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    transition: all 0.3s ease 0s;
    background-color: #fff;
}

.modBtn1 a:hover::before {
    width: 100%;
}

/*modBtn2*/
.modBtn2 {
    width: 100%;
    max-width: 280px;
}

.modBtn2 a {
    position: relative;
    height: 60px;
    width: 100%;
    border-radius: 48px;
    overflow: hidden;
    background-color: #fff;
    border: 2px solid #71BDFF;
    text-align: center;
    cursor: pointer;
    display: block;
}

.modBtn2 a .btnInner {
    position: relative;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .2em;
    color: #20201F;
    padding: 11px 6px 11px 0;
    display: block;
    background: url(../img/btn-arrow-b.svg) no-repeat center right 20px;
    background-size: 30px;
}

.modBtn2 a:hover .btnInner {
    color: #fff;
    background: url(../img/btn-arrow-wb.svg) no-repeat center right 20px;
    background-size: 30px;
}

.modBtn2 a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    transition: all 0.3s ease 0s;
    background-color: #71BDFF;
}

.modBtn2 a:hover::before {
    width: 100%;
}


/*==============================================================
/ header
/==============================================================*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1000;
    width: 100%;
    transition: .3s;
    justify-content: flex-end;
    padding: 38px 40px;
}


.header .left {
    position: absolute;
    left: 40px;
}

.header .left a {
    display: inline-block;
    vertical-align: middle;
    transition: .3s;
    margin: 0 10px 0 0;
}

.header .left a:hover {
    opacity: .7;
}

.header .left a img {
    max-width: 200px;
    width: 13.8888888889vw;
}

/*-----------------------------right cta*/
.header .right {
    justify-content: space-between;
    column-gap: 20px;
    width: 280px;
}

/*nav*/
.header .nav {
    margin-top: 10px;
    width: 100%;
}

.header .nav .navListBox {
    justify-content: flex-end;
    column-gap: 30px;
}

.header .nav li {
    position: relative;
}

.header .nav li a {
    position: relative;
    height: 100%;
    font-size: min(18px, 1.72vw);
    font-weight: 600;
    letter-spacing: .2em;
    padding: 15px 0;
    text-align: center;
    transition: .2s;
    background-repeat: no-repeat;
    background-position: top 16px center;
    background-size: 34px;
}

.header .nav li a:hover {
    color: #71BDFF;
}

@media screen and (max-width: 1023px) {

    .header {
        height: 80px;
        padding: 15px 10px;
    }

    .header .right {
        display: none;
    }

    .header .left {
        position: static;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .header .left a img {
        max-width: 100%;
        width: 120px;
    }

}

.bottom_menu {
    display: none;
}

/* Floating navi */
@media screen and (max-width: 1023px) {
    .bottom_menu {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 15px;
        transform: translateY(0);
        transition: transform 0.3s ease-in-out;
        background-color: #FFF;
        box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
        height: 82px;

        .is-flex {
            gap: 10px;
            justify-content: center;
        }

        .modBtn1,
        .modBtn2 {
            flex: 1;
            max-width: 360px;
            display: flex;
            justify-content: center;
            align-items: center;

            a {
                height: auto;
            }

            span {
                font-size: clamp(14px, 1.1111vw, 16px);
                background-position: center right 10px;
            }
        }
    }

    .bottom_menu.hide {
        transform: translateY(100%);
        /* メニューを下に隠す */
    }
}

/*==============================================================
/ mv
/==============================================================*/
.mv {
    position: relative;
    height: auto;
    padding-block: max(200px, 6vw) 0;
    overflow: hidden;
    /* 背景がはみ出ないように */
}

/* 背景レイヤー */
.mv__bg {
    position: absolute;
    inset: 0;
    background: url(../img/mv-bg.webp) no-repeat top center;
    background-size: contain;
    opacity: 0;
    filter: blur(4px);
    pointer-events: none;
    z-index: 0;
    top: 120px;
    margin-bottom: -120px;
}

/* MVの中身（テキストと画像）は背景より前に表示 */
.mv .inner {
    position: relative;
    z-index: 1;
}

/* --- 1500px以上 --- */
@media screen and (min-width: 1500px) {
    .mv__bg {
        background-position: top right;
        background-size: contain;
    }
}

/* --- タブレット (1023px以下) --- */
@media screen and (max-width: 1023px) {
    .mv {
        padding-block: max(80px, 3vw) 0;
    }

    .mv__bg {
        background-position: top right;
        background-size: cover;
    }
}

/* --- SP (767px以下) --- */
@media screen and (max-width: 767px) {
    .mv__bg {
        background-size: cover;
        background-position: top right 10%;
    }
}

.mv {
    .is-flex {
        justify-content: space-between;
        flex-wrap: nowrap;

        @media screen and (max-width: 767px) {
            flex-direction: column;
        }
    }

    .mv__text {
        flex: 1;
        position: relative;
        color: inherit;
        padding-block: max(40px, 4vw);
        max-width: 730px;
        white-space: nowrap;

        .mv__lead {
            color: #48d4fd;
            font-weight: 600;
            font-size: clamp(16px, 1.7vw, 3vw);
            margin-bottom: max(16px, 1.2vw);
        }

        .mv__catch {
            font-size: clamp(23px, 2.7777vw, 4vw);
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: 0.2em;
            margin-bottom: max(24px, 1.7vw);
        }

        .mv__sub {
            color: #48d4fd;
            font-weight: 600;
            font-size: max(32px, 3.5vw);
            /* 目安 50px 前後 */
            letter-spacing: 0.2em;

            @media screen and (max-width: 900px) {
                font-size: 28px;
                line-height: normal;
            }
        }

        /* badge */
        .mv__badge {
            position: relative;
            right: 0;
            bottom: max(30px, 2.0833333333333335vw);
            margin: 0 0 0 auto;
            width: max(270px, 18.75vw);
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background: #FFF48D;
            color: inherit;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 0.3em;

            @media screen and (min-width: 1700px) {
                top: 20px;
            }

            @media screen and (max-width: 1023px) {
                width: 200px !important;
                height: 200px;
            }

            @media screen and (max-width: 900px) {
                width: 150px !important;
                height: 150px;
            }

            @media screen and (max-width: 767px) {
                top: 18px;
                left: 18px;
                margin: 0;
                width: 150px !important;
                height: 150px;
            }
        }

    }

    .mv__img {
        display: flex;
        justify-content: center;
        align-items: start;

        @media screen and (max-width: 767px) {
            position: relative;
            top: -120px;
            justify-content: end;
        }

        img {
            max-width: 100%;
            width: max(500px, 37.5vw);
            height: auto;
            display: block;
            position: relative;
            top: -10%;
            margin-bottom: -10%;

            @media screen and (max-height: 1000px) {
                max-width: 45vh;
            }

            @media screen and (min-width: 1440px) {
                max-width: 500px;
            }

            @media screen and (max-width: 767px) {
                width: 70%;
                top: 0;
                margin-bottom: 0;
            }
        }
    }
}

/*==============================================================
/ main
/==============================================================*/
/* 共通見出し */
.section__hedder {
    text-align: center;
    margin-bottom: max(40px, 3vw);
}

/* ラベル＋タイトルのマスク */
.section__heading-mask {
    display: inline-block;
    overflow: hidden;
}

/* 共通見出し英語ラベル */
.section__label-en {
    font-family: "Open Sans", sans-serif;
    font-size: clamp(52px, 5.6944vw, 110px);
    font-weight: 400;
    color: #9EDCFF;
    letter-spacing: 0.2em;
    line-height: 1;
    margin-bottom: .2em;
    text-align: center;
}

/* 共通日本語見出し */
.section__title {
    font-size: clamp(16px, 1.3889vw, 24px);
    color: inherit;
    font-weight: 600;
    margin-bottom: max(80px, 5.555555555555556vw);
    letter-spacing: 0.05em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: max(8px, 0.5vw);
    width: 100%;
}

.section__title::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(../img/h2-deco.svg);
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/*==============================================================
/  theme
/==============================================================*/
.theme {
    padding-block: max(80px, 6vw);
    text-align: center;
    position: relative;
}

/* 困りごとリスト */
.theme__list {
    display: flex;
    justify-content: space-between;
    gap: max(20px, 2vw);
    flex-wrap: nowrap;
}

/* 各アイテム */
.theme__item {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* figure セット */
.theme__figure {
    text-align: center;
    max-width: max-content;
}

/* アイコン画像 */
.theme__figure img {
    max-width: 100%;
    width: clamp(80px, 10.416666666666668vw, 200px);
    height: auto;
    margin-bottom: max(27px, 1.875vw);
    display: block;
    margin-inline: auto;
}

/* キャプション（説明文） */
.theme__text {
    font-size: clamp(16px, 1.3889vw, 24px);
    color: inherit;
    line-height: 1.3;
    letter-spacing: 0.2em;
    font-weight: 600;
}

/* ------ SP (768px 以下) ------ */
@media (max-width: 767px) {

    .theme {
        padding-block: 20px 60px;
    }

    .theme__list {
        flex-direction: column;
        gap: 40px;
    }

    .theme__figure {
        max-width: none;
    }

    .theme__figure img {
        width: 120px;
    }
}

.mechanism {
    position: relative;
    padding-block: max(80px, 7vw);
    background-color: #F3F7FB;
    overflow: hidden;
    border-radius: 0 0 50px 50px;

    @media screen and (max-width: 767px) {
        border-radius: 0 0 25px 25px;
    }
}

.mechanism__inner {
    position: relative;
    z-index: 1;
}

/* 見出しまわり */

.mechanism__title {
    text-align: center;
    font-size: clamp(20px, 2.4306vw, 44px);
    color: #393E41;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.2em;
    margin-bottom: clamp(40px, 70px, 7vw);
}

/* 本文レイアウト */
.mechanism__body {
    display: flex;
    align-items: flex-start;
    gap: max(40px, 4vw);
    width: fit-content;
    margin-inline: auto;

    @media screen and (max-width: 1023px) {
        gap: 20px;
    }
}

.mechanism__lead {
    margin-inline: auto;
    width: fit-content;
    gap: 50px;
    margin-bottom: clamp(80px, 140px, 14vw);

    img {
        max-width: 150px;
        height: 100%;
        width: 100%;
    }

    p {
        text-align: center;
        font-weight: 700;
        font-size: clamp(14px, 1.3889vw, 24px);
        line-height: 170%;
        letter-spacing: 0.1em;
        color: inherit;
    }

    @media screen and (max-width: 1100px) {
        &.is-flex {
            flex-wrap: nowrap !important;
        }

        img {
            width: clamp(50px, 9.166666666666668vw, 150px) !important;
        }
    }

    @media screen and (max-width: 500px) {
        img {
            display: none;
        }
    }
}

/* 左側スマホ */
.mechanism__phone {
    flex: 0 0 auto;
}

.mechanism__phone img {
    display: block;
    width: clamp(220px, 26.111111111111114vw, 400px);
    height: auto;

    @media screen and (max-width: 1200px) {
        width: clamp(220px, 15.5vw, 240px);
    }

    @media screen and (max-width: 900px) {
        width: clamp(150px, 18.5vw, 220px);
    }
}

/* 右側バルーンリスト */
.mechanism__list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: max(16px, 1.4vw);
}

.mechanism__item {
    background-color: #FFFFFF;
    border-radius: 15px;
    padding: max(28px, 1.9vw) max(32px, 2.2222222222222223vw);
    display: inline-flex;
    align-items: flex-start;
    gap: max(40px, 2.7777777777777777vw);
    max-width: 100%;
    width: max(646px, 44.861111111111114vw);

    &:nth-child(even) {
        margin-left: 6vw;

        @media screen and (max-width: 767px) {
            margin-left: 0;
        }
    }

    @media screen and (max-width: 1200px) {
        width: max(560px, 38.88888888888889vw);
    }

    @media screen and (max-width: 1023px) {
        width: max(480px, 33.33333333333333vw);
        padding: 20px 30px;
        gap: 20px;
    }

    @media screen and (max-width: 767px) {
        width: 100%;
        padding: 24px 16px;
        gap: 12px;
        border-radius: 10px;
    }
}

.mechanism__tag {
    font-size: clamp(13px, 1.0417vw, 18px);
    color: #9EDCFF;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    margin-top: 2px;

    @media screen and (max-width: 767px) {
        min-width: 81px;
    }
}

.mechanism__text {
    font-size: clamp(15px, 1.3889vw, 24px);
    font-weight: 600;
    color: inherit;
    line-height: 1.3;
    letter-spacing: 0.2em;
}

/* 背景あしらい */
.mechanism__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.mechanism__shape {
    position: absolute;
    display: block;
}

/* 左上の三角 */
.mechanism__shape--tl {
    top: 0;
    left: 0;
    width: 95px;
    height: 95px;
    background-color: #48D4FD;
    clip-path: polygon(0 0, 100% 0, 0 100%);

    @media screen and (max-width: 900px) {
        top: 5%;
    }
}

/* 左中の丸 */
.mechanism__shape--bl {
    left: 7%;
    bottom: 65%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #FEF06F;

    @media screen and (max-width: 900px) {
        bottom: 50%;
    }
}

/* 右中央の半円っぽい丸 */
.mechanism__shape--cr {
    right: 3%;
    top: 55%;
    width: 120px;
    height: 60px;
    background-color: #C9F1FF;
    border-radius: 120px 120px 0 0;

    @media screen and (max-width: 900px) {
        right: -2%;
        top: 70%;
    }
}

/* 右下の黄色い四角 */
.mechanism__shape--br {
    right: 8%;
    bottom: -30px;
    width: 80px;
    height: 80px;
    background-color: #FEF06F;

    @media screen and (max-width: 900px) {
        right: 4%;
        bottom: -20%;
    }
}

/* ▼ 768px 以下レイアウト調整 */
@media (max-width: 768px) {
    .mechanism {
        padding-block: 60px;
    }

    .mechanism__body {
        flex-direction: column;
        align-items: center;
    }

    .mechanism__phone {
        order: 1;
    }

    .mechanism__list {
        order: 2;
        width: 100%;
    }

    .mechanism__item {
        max-width: none;
        width: 100%;
    }

    .sp-only {
        display: inline;
    }

    /* あしらい少し控えめに */
    .mechanism__shape--tl {
        width: 80px;
        height: 80px;
    }

    .mechanism__shape--bl {
        width: 90px;
        height: 90px;
        border-width: 16px;
        left: -40px;
    }

    .mechanism__shape--cr {
        width: 90px;
        height: 90px;
        right: -30px;
    }

    .mechanism__shape--br {
        width: 80px;
        height: 80px;
        right: -10px;
    }
}

/*==============================================================
/ price
/==============================================================*/
section.price {
    .section__title {
        line-height: 1.5;
        align-items: baseline;
    }
}

.compare {
    background-color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
        "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    color: #333;
}

.compare__title {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 24px;
}

.compare__table-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

@media screen and (max-width: 1023px) {
    .compare__table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== テーブル本体 ===== */

.compare-table {
    width: 100%;
    min-width: 760px;
    /* SP で横スクロール */
    border-collapse: separate;
    border-spacing: 0;
    font-size: clamp(14px, 1.1111vw, 20px);
    font-weight: 500;
    letter-spacing: 0.2em;
    background-color: #ffffff;
}

/* ヘッダー */

.compare-table__blank {
    width: 16%;
    background-color: white;
    position: sticky;
    left: 0;
    z-index: 10;
}

.compare-table th,
.compare-table td {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid #C0F1FF;
    white-space: nowrap;
}

.compare-table tr:last-child th,
.compare-table tr:last-child td {
    border-bottom: none;
    padding-bottom: 47px;
}

.compare-table thead th {
    border-bottom: none;
}

.compare-table__head {
    min-width: 140px;
    vertical-align: bottom;
}

.compare-table__head--main {
    min-width: 190px;
    padding: 0 0 47px 0 !important;
    position: relative;
}

/* 行ラベル */

th.compare-table__row-label {
    text-align: left;
    font-size: clamp(14px, 1.1111vw, 18px);
    font-weight: 500;
    color: inherit;
    background-color: white;
    position: sticky;
    left: 0;
    z-index: 10;
}

/* メイン列（薄いブルーの帯＋角丸） */

.compare-table__cell--main {
    background-color: #f5fbff;
    font-size: clamp(16px, 1.3889vw, 22px);
    font-weight: 600;
    color: #3FB7FC;
}

.compare-table tbody tr:last-child .compare-table__cell--main {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

/* ロゴ・サービス表示 */

.compare-table__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 16px 24px;
    width: 100%;
    position: relative;

    &::after {
        content: "";
        display: block;
        width: 100%;
        height: 200px;
        border-radius: 24px 24px 0 0;
        background: #f5fbff;
        position: absolute;
        top: 66px;
        left: 0;
        z-index: 1;
    }
}

.compare-table__crown {
    max-width: 80px;
    width: max(80px, 5.555555555555556vw);
    height: 80px;
    position: relative;
    z-index: 2;
}

.compare-table__logo {
    width: max(120px, 8.333333333333332vw);
    height: auto;
    position: relative;
    z-index: 2;
}

.compare-table__service {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.compare-table__icon {
    max-width: 80px;
    width: max(80px, 5.555555555555556vw);
    height: 80px;
}

.compare-table__service-name {
    font-size: 0.8rem;
    color: #606a76;
}

.price__note {
    font-size: 18px;
    color: #333;
    border-radius: 15px;
    background-color: #FEF06F;
    text-align: center;
    display: block;
    padding: 10px 14px;
    line-height: 1.5;
}


/* 強調テキスト */

.compare-table__emphasis {
    font-weight: 600;
    clamp(16px, 1.3889vw, 24px);
    color: #3FB7FC;
    position: relative;
    z-index: 2;
}


/* 備考 */

.compare__note {
    margin-top: 2.5em;
    font-size: 10px;
    color: inherit;
    text-align: left;
    width: fit-content;
    margin-inline-start: auto;
}

/*==============================================================
/ step
/==============================================================*/
.step {
    text-align: center;
    padding-block: 0 max(80px, 7vw);
}

/* ===== 3 Step レイアウト ===== */
.step__list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: max(40px, 4vw);
}

.step__item {
    flex: 1;
    position: relative;
}

.step__figure {
    max-width: 260px;
    margin: 0 auto;
}

.step__figure img {
    width: clamp(80px, 10.416666666666668vw, 160px);
    height: auto;
    margin-bottom: max(40px, 2.7777777777777777vw);
    margin-inline: auto;
}

.step__title {
    font-size: clamp(16px, 1.39vw, 24px);
    font-weight: 600;
    color: inherit;
    margin-bottom: max(8px, 0.6vw);
    letter-spacing: 0.2em;
}

.step__text {
    font-size: clamp(14px, 1.1111111111111112vw, 18px);
    line-height: 1.5;
    color: inherit;
    letter-spacing: 0.2em;
    font-weight: 500;
}

.step__item::after {
    content: url(../img/arrow-right.svg);
    position: absolute;
    top: 35%;
    right: -10%;
    transform: translateY(-50%) rotate(0deg);
    width: 40px;
    height: auto;
}

.step__item:last-child::after {
    content: none;
}

/* ===== SP（縦並び） ===== */
@media (max-width: 767px) {

    .step__list {
        flex-direction: column;
        gap: 100px;
    }

    .step__item {
        max-width: 260px;
        margin-inline: auto;
    }

    /* 矢印を下向きに変更 */
    .step__item::after {
        top: auto;
        bottom: -70px;
        right: 50%;
        transform: translateX(50%) rotate(90deg);
    }

    .step__item:last-child::after {
        content: none;
    }
}

/*==============================================================
/ company
/==============================================================*/
.company {
    position: relative;
    padding-block: max(80px, 7vw) max(200px, 13.88888888888889vw);
    background-color: #F3F7FB;
    overflow: hidden;
    text-align: center;
}

/* 背景あしらい */
.company__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.company__shape {
    position: absolute;
    display: block;
}

/* 左上の三角 */
.company__shape--tl {
    top: 0;
    left: 0;
    width: 95px;
    height: 95px;
    background-color: #48D4FD;
    clip-path: polygon(0 0, 100% 0, 0 100%);

    @media screen and (max-width: 767px) {
        top: 10px;
    }
}

/* 右下の黄色い四角 */
.company__shape--cr {
    right: 2%;
    bottom: -50px;
    width: 80px;
    height: 80px;
    background-color: #FEF06F;

    @media screen and (max-width: 900px) {
        right: 4%;
        bottom: -230px;
    }
}

/* PC：必ず4列固定 */
.company__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: max(24px, 2vw);
    align-items: center;
    justify-items: center;
    position: relative;
    z-index: 1
}

/* ロゴ */
.company__item img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 60px;
    /* フィットさせる */
    object-fit: contain;
}

li.company__item.height-ajust img {
    max-height: 100px;
}

/* ===== タブレット（3列） ===== */
@media (max-width: 1024px) {
    .company__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== スマホ（2列） ===== */
@media (max-width: 768px) {
    .company__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* ===== スマホ（1列） ===== */
@media (max-width: 480px) {
    .company__list {
        grid-template-columns: repeat(1, 1fr);
    }
}

/*==============================================================
/ entry
/==============================================================*/

.entry {
    background-image: url(../img/entry-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 100px 0;
}

.entry .inner {
    position: relative;
    padding: 80px 60px;
    background-color: #fff;
    border-radius: 20px;
    text-align: center;
    overflow: hidden;
}

.entry .inner .item12 {
    position: absolute;
    bottom: -250px;
    left: 0;
    width: 142px;
    height: 258px;
}

.entry .inner .item13 {
    position: absolute;
    top: 50px;
    right: -67px;
    width: 200px;
    height: 200px;
}

.entry .inner .title {
    font-weight: 700;
    font-size: max(30px, 1.7vw);
    line-height: 2;
    color: inherit;
    letter-spacing: .15em;
    margin-bottom: 10px;
}

.entry .inner .text {
    font-size: max(18px, 1vw);
    line-height: 2;
    letter-spacing: .02em;
    color: inherit;
    padding-bottom: 25px;
}

.entry .inner .modBtn1 {
    max-width: 360px;
    margin: 0 auto;
}

.entry .inner .modBtn1 a {
    position: relative;
    height: 80px;
    width: 100%;
    border-radius: 48px;
    overflow: hidden;
    background-color: #FFEA2D;
    border: 2px solid rgba(255, 255, 255, 0);
    text-align: center;
    cursor: pointer;
    display: block;
}

.entry .inner .modBtn1 a .btnInner {
    padding: 22px 6px 22px 0;
    font-size: 20px;
}

@media screen and (max-width: 1023px) {

    .entry {
        padding: 60px 0;
    }

    .entry .inner {
        padding: 85px 10px 80px 10px;
    }

    .entry .inner .item12 {
        width: 244px;
        height: 250.26px;
        bottom: -380px;
    }

    .entry .inner .item13 {
        position: absolute;
        top: 100px;
        right: -43px;
        width: 130px;
        height: 130px;
    }

    .entry .inner .title {
        font-size: 22px;
    }

    .entry .inner .text {
        font-size: 18px;
        padding-bottom: 35px;
    }

    .entry .inner .entryInner {
        position: relative;
        background-color: #fff;
    }

}

/*==============================================================
/ footer
/==============================================================*/

.footer {
    position: relative;
    background-color: #022950;
    padding: 100px 0 10px 0;
    color: #fff;
}

.footer .inner {
    max-width: max(1200px, 75vw);
}

.footer .footerInner {
    margin-bottom: 70px;
}

.footer .is-flex {
    align-items: flex-end;
}

.footer .footerInner .left {
    width: 50%;
}

.footer .footerInner .right {
    width: 50%;
}

.footer .footerInner .left a {
    transition: .3s;
}

.footer .footerInner .left a img {
    max-width: 290.85px;
}

.footer .footerInner .left a:hover {
    opacity: .7;
}

.footer .footerInner .left .title {
    margin: 40px 0 5px 0;
    line-height: 1.5;
}

.footer .footerInner .left .address {
    line-height: 1.5;
}

.footer .footerInner .left .address a {
    display: inline-block;
    color: #fff;
    pointer-events: none;
}

/*copy*/
.footer .copy {
    font-size: max(15px, .8vw);
    line-height: 1.5;
    color: #fff;
    text-align: center;
}

@media screen and (max-width: 1023px) {

    .footer {
        padding: 80px 0 10px 0;
    }

    .footer .footerInner {
        margin-bottom: 25px;
    }

    .footer .footerInner .left {
        width: 100%;
        margin-bottom: 25px;
    }

    .footer .footerInner .right {
        width: 100%;
    }

    .footer .footerInner .left .title {
        margin: 25px 0 5px 0;
    }

    .footer .copy {
        margin-bottom: 90px;
    }

}