/*
* top.css
*
*/
/* Do not change --------------------------------------------------------- */
:root {
    --white: #ffffff;
    --text-white: #ffffff;
    --text-mid: #333333;
    --dark-blue: #003e70;
    --bg-blue: #eef7fc;
    --light-blue: #2c9be6;
    --yellow: #ffda44;
}

.main_container {
    -ms-overflow-x: hidden;
    overflow-x: hidden;
}

/* --------------------------------
   common
-------------------------------- */
main {
    letter-spacing: 1px;
    color: var(--main-color);
    font-family: Hiragino Kaku Gothic ProN, Meiryo, sans-serif, YuGothic;
    font-weight: normal;
}

.main_font {
    font-size: 15px;
}

html {
    font-size: 62.5%;
    font-weight: 400;
}

body {
    min-width: 320px;
}

a:hover {
    opacity: 0.8;
}

@media (min-width: 768px) {
    body {
        min-width: 1100px;
    }
}

.inner {
    width: 96%;
    /* max-width: 720px; */
    margin: 0 auto;
}

@media (min-width: 768px) {
    .inner {
        width: 1000px;
    }
}

em {
    font-weight: 700;
    font-style: normal;
}

.only_sp {
    display: block;
}

.only_pc {
    display: none;
}

br.only_sp,
br.only_pc {
    line-height: 0;
}

br.only_pc {
    display: none;
}

@media (min-width: 768px) {
    .only_sp {
        display: none;
    }

    .only_pc,
    br.only_pc {
        display: block;
    }
}

.flex {
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.ttl_mod_h2 {
    font-size: 5.6vw;
    font-weight: 700;
    color: var(--text-mid);
    line-height: 1.5;
    margin-bottom: 4.846vw;
    text-align: center;
}

@media (min-width: 768px) {
    .ttl_mod_h2 {
        font-size: 42px;
        margin-bottom: 60px;
    }
}

/* --------------------------------
   header
-------------------------------- */
.header {
    background-color: var(--white);
}

.header_inner {
    display: flex;
    margin: 0 4vw;

    align-items: center;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .header_inner {
        margin: auto;
        padding: 0 30px;
        max-width: 1400px;
    }
}

.header_h {
    padding: 4.13333vw 0 4.4vw;
}

@media (min-width: 768px) {
    .header_h {
        padding: 20px 0;
    }
}

.header_h img {
    display: inline-block;
    width: 41.06667vw;
    height: 4vw;
}

@media (min-width: 768px) {
    .header_h img {
        width: 220px;
        height: auto;
    }
}

/* ================================
   sec_mv (KV section)
================================ */
.sec_mv {
    overflow: hidden;
}

.sec_mv .kv_img {
    width: 100%;
    display: block;
    line-height: 0;
    position: relative;
}

.sec_mv .kv_img img {
    width: 100%;
    height: auto;
    display: block;
}

.sec_mv .kv_img h2 {
    width: 92%;
    max-width: 670px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
    .sec_mv .kv_img h2 {
        max-width: 1032px;
        top: 44%;
        left: 45%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

/* ================================
   tab section
================================ */
.sec_tab {
    padding: 35px 0 0;
    background-color: var(--bg-blue);
    position: relative;
}

.sec_tab .tab_inner {
    display: flex;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    bottom: -4px;
    gap: 2.333vw;
    justify-content: center;
}

.sec_tab .tab_inner.kojin {
    border-bottom: 2.4vw solid var(--dark-blue);
}

.sec_tab .tab_inner.hojin {
    border-bottom: 2.4vw solid var(--light-blue);
}

.tab_btn {
    width: 46vw;
    max-width: 345px;
    padding: 1.933vw 0;
    font-size: 4.267vw;
    font-weight: 700;
    color: #ffffff;
    border: none;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: background-color 0.2s, padding 0.15s, margin-top 0.15s;
    font-family: Hiragino Kaku Gothic ProN, Meiryo, sans-serif, YuGothic;
    border-radius: 0.8vw 0.8vw 0 0;
}

.tab_btn.kojin {
    background-color: var(--dark-blue);
}

.tab_btn.hojin {
    background-color: var(--light-blue);
}

.tab_btn:hover {
    opacity: 0.85;
}

@media (min-width: 768px) {
    .sec_tab .tab_inner {
        width: 86.429vw;
        max-width: 1100px;
        gap: 6px;
        bottom: -4px;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .tab_btn {
        max-width: 465px;
        padding: 14px 0;
        font-size: 2.4rem;
        border-radius: 6px 6px 0 0;
        margin-top: 6px;
        margin: 0 11px;
    }

    .sec_tab .tab_inner.kojin {
        border-bottom: 16px solid var(--dark-blue);
    }

    .sec_tab .tab_inner.hojin {
        border-bottom: 16px solid var(--light-blue);
    }
}


/* ================================
   sec_mv_plan (plan cards section)
================================ */
.sec_mv_plan {
    background-color: var(--bg-blue);
    padding: 6.4vw 0 5.333vw;
}

@media (min-width: 768px) {
    .sec_mv_plan {
        padding: 40px 0 36px;
    }
}

.mv_plan_ttl {
    font-size: 6.933vw;
    font-weight: 700;
    color: var(--text-mid);
    text-align: center;
    margin-bottom: 5.333vw;
    line-height: 1.2;
}

.mv_plan_ttl span {
    font-size: 4.267vw;
}

.mv_plan_ttl .free_highlight {
    color: #e60012;
    font-size: 6.4vw;
    display: inline-block;
}

.mv_plan_ttl .free_highlight::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #e60012;
    margin-top: 2px;
}

@media (min-width: 768px) {
    .mv_plan_ttl {
        font-size: 5.2rem;
        margin-bottom: 30px;
    }

    .mv_plan_ttl span {
        font-size: 3.2rem;
    }

    .mv_plan_ttl .free_highlight {
        font-size: 5.2rem;
    }
}

/* Plan cards */
.plan_cards {
    display: flex;
    flex-direction: column;
    gap: 5.333vw;
    width: 91.5%;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .plan_cards {
        flex-direction: row;
        gap: 20px;
        max-width: 700px;
        width: 100%;
    }
}

.plan_card {
    background-color: #ffffff;
    border-radius: 1.333vw;
    overflow: hidden;
    flex: 1;
}

@media (min-width: 768px) {
    .plan_card {
        border-radius: 10px;
    }
}

.plan_card_body {
    padding: 5.6vw 4vw 4vw;
    text-align: center;
}

@media (min-width: 768px) {
    .plan_card_body {
        padding: 20px 20px 20px;
    }

    .plan_card.custom .plan_card_body {
        padding: 5px 20px 20px;
    }
}

.plan_card_family_label {
    font-size: 3.2vw;
    color: var(--text-mid);
    font-weight: 700;
    margin-bottom: 1.333vw;
    display: block;
}

@media (min-width: 768px) {
    .plan_card_family_label {
        font-size: 1.4rem;
        margin-bottom: 3px;
    }
}

.plan_card_name {
    font-size: 6.4vw;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1vw;
    display: block;
}

@media (min-width: 768px) {
    .plan_card_name {
        font-size: 2.8rem;
        margin-bottom: 10px;
    }

    .plan_card.custom .plan_card_name {
        line-height: 1.3;
    }
}

.plan_card_price {
    font-size: 3.733vw;
    color: #888888;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.333vw;
}

@media (min-width: 768px) {
    .plan_card_price {
        font-size: 1.6rem;
        gap: 8px;
    }
}

.plan_card_price .original {
    color: #666666;
    font-size: 3.84vw;
}

.plan_card_price .arrow {
    color: #666666;
    font-weight: 400;
}

.plan_card_price .free_price {
    font-weight: 700;
    color: var(--text-mid);
    font-size: 4.8vw;
}

@media (min-width: 768px) {
    .plan_card_price .free_price {
        font-size: 1.8rem;
    }

    .plan_card_price .original {
        color: #666666;
        font-size: 1.4rem;
    }
}

/* CTA buttons */
.btn_plan_cta {
    display: block;
    width: 100%;
    padding: 2.267vw 0;
    font-size: 4.267vw;
    font-weight: 700;
    color: var(--white);
    background-color: var(--dark-blue);
    border: none;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: opacity 0.2s;
}

.btn_plan_cta:hover {
    opacity: 0.85;
    color: var(--white);
    text-decoration: none;
}

.btn_plan_cta:visited {
    color: var(--white);
}

.btn_plan_cta.yellow {
    background-color: var(--yellow);
    color: var(--text-mid);
}

.btn_plan_cta.yellow:hover {
    color: var(--text-mid);
}

.btn_plan_cta .arrow,
.btn_plan_cta.yellow .arrow {
    border: solid var(--white);
    border-width: 0 .6vw .6vw 0;
    display: inline-block;
    padding: 1vw;
}

.btn_plan_cta.yellow .arrow {
    border: solid var(--text-mid);
    border-width: 0 .6vw .6vw 0;
}

.btn_plan_cta .arrow.right,
.btn_plan_cta.yellow .arrow.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

@media (min-width: 768px) {
    .btn_plan_cta {
        padding: 14px 0;
        font-size: 1.8rem;
        border-radius: 0 0 8px 8px;
    }

    .btn_plan_cta .arrow,
    .btn_plan_cta.yellow .arrow {
        border-width: 0 2px 2px 0;
        padding: 5px;
    }
}


/* Plan disclaimer */
.plan_disclaimer {
    width: 99%;
    margin: 4vw auto 0;
    text-indent: -2vw;
    padding-left: 2vw;
    letter-spacing: -.05em;
}

.plan_disclaimer p {
    font-size: 3.2vw;
    color: #555555;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .plan_disclaimer {
        max-width: 400px;
        width: 100%;
        margin: 16px auto 0;
        text-indent: 0;
        padding-left: 0;
        letter-spacing: 1px;
    }

    .plan_disclaimer p {
        font-size: 1.2rem;
    }
}

/* ================================
   sec_features (4つの理由)
================================ */
.sec_features {
    background-color: #ffffff;
    padding: 9.067vw 0 10.667vw;
}

@media (min-width: 768px) {
    .sec_features {
        padding: 40px 0;
    }
}

.sec_features .inner {
    max-width: 1000px;
}

.features_ttl {
    font-size: 4.2vw;
    font-weight: 700;
    color: var(--text-mid);
    text-align: center;
    line-height: 1.45;
    margin-bottom: 10.667vw;
}

@media (min-width: 768px) {
    .features_ttl {
        font-size: 3.2rem;
        margin-bottom: 50px;
    }
}

/* Feature item layout */
.feature_list {
    display: flex;
    flex-direction: column;
    gap: 13.333vw;
}

@media (min-width: 768px) {
    .feature_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px 40px;
        max-width: 1000px; 
        margin: 0 auto; 
    }
}

.feature_item {
    display: flex;
    flex-direction: column;
    background: #fffcf6;
    padding-bottom: 3vw;
}

.feature_num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8.533vw;
    height: 8.533vw;
    background-color: var(--yellow);
    border-radius: 50%;
    font-size: 4.8vw;
    font-weight: 700;
    color: var(--dark-blue);
    margin: -3.2vw auto 3.2vw;
}

@media (min-width: 768px) {
    .feature_item {
        padding-bottom: 10px;
        min-width: 420px;
    }

    .feature_num {
        width: 44px;
        height: 44px;
        font-size: 2.6rem;
        margin: -20px auto 16px;
    }
}

.feature_item_ttl {
    font-size: 4.267vw;
    font-weight: 700;
    color: var(--dark-blue);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 4.733vw;
    position: relative;
}

.feature_item_ttl:after {
    content: "";
    width: 52px;
    height: 4px;
    background: var(--dark-blue);
    display: inline-block;
    transform: translate(-50%, -50%);
    left: 50%;
    bottom: -2.3vw;
    position: absolute;
}

@media (min-width: 768px) {
    .feature_item_ttl {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .feature_item_ttl:after {
        bottom: -1vw;
    }

}

.feature_item_txt {
    font-size: 3.467vw;
    color: var(--text-mid);
    line-height: 1.8;
    margin-bottom: 4.267vw;
    padding: 0 25px;
    font-weight: 500;
}

@media (min-width: 768px) {
    .feature_item_txt {
        font-size: 1.4rem;
        margin-bottom: 10px;
        padding: 0 25px;
    }
}

/* Feature images */
.feature_img_wrap {
    display: flex;
    justify-content: center;
    gap: 3.2vw;
    margin-top: auto;
}

@media (min-width: 768px) {
    .feature_img_wrap {
        gap: 16px;
    }
}

.feature_img_wrap img {
    max-width: 100%;
    height: auto;
}

.feature_img_wrap.single {
    max-width: 412px;
    margin: 50px auto 0;
    display: block;
}

.feature_img_wrap.feature_translate img {
    max-width: 370px;
}

.feature_img_label {
    font-size: 2.667vw;
    color: var(--text-mid);
    text-align: center;
    margin-top: 1.333vw;
    font-weight: 700;
}

@media (min-width: 768px) {
    .feature_img_label {
        font-size: 1.2rem;
        margin-top: 6px;
    }
}

.feature_img_col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

/* Feature 4 badge */
.feature_badge {
    display: inline-block;
    background-color: #f5a800;
    color: #ffffff;
    font-size: 2.667vw;
    font-weight: 700;
    padding: 0.8vw 2.133vw;
    border-radius: 0.8vw;
    margin-top: 2.133vw;
}

@media (min-width: 768px) {
    .feature_badge {
        font-size: 1.2rem;
        padding: 4px 10px;
        border-radius: 4px;
        margin-top: 10px;
    }
}

/* ================================
   sec_country (居住国設定)
================================ */
.sec_country {
    padding: 0 0 10.667vw;
}

@media (min-width: 768px) {
    .sec_country {
        padding: 0 0 60px;
    }
}

.sec_country .inner {
    width: 96%;
}

.country_box {
    background-color: #f7f7f7;
    border-radius: 1.6vw;
    padding: 8vw 5.333vw;
    display: flex;
    flex-direction: column;
    gap: 5.333vw;
}

@media (min-width: 768px) {
    .country_box {
        flex-direction: row;
        align-items: center;
        border-radius: 8px;
        padding: 36px 60px;
        gap: 40px;
        max-width: 1000px;
        margin: 0 auto;
    }
}

.country_box_txt {
    flex: 1;
}

.country_box_ttl {
    font-size: 4.267vw;
    font-weight: 700;
    color: var(--text-mid);
    line-height: 1.6;
    margin-bottom: 3.2vw;
}

@media (min-width: 768px) {
    .country_box_ttl {
        font-size: 2.2rem;
        margin-bottom: 14px;
    }
}

.country_box_desc {
    font-size: 3.2vw;
    color: #555555;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .country_box_desc {
        font-size: 1.4rem;
    }
}

.country_box_img {
    flex: 1;
    text-align: center;
    position: relative;
}

.country_box_img img {
    width: 100%;
    border: 1px solid #dddddd;
    border-radius: 0.8vw;
}

@media (min-width: 768px) {
    .country_box_img img {
        border-radius: 4px;
        max-width: 480px;
    }
}

.country_box_img .img_label {
    position: absolute;
    right: 0;
    bottom: -4vw;
    font-size: 3.2vw;
    color: #e60012;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 1.333vw;
}

.country_box_img .img_label::before {
    content: "←";
    font-size: 4vw;
    color: #e60012;
}

@media (min-width: 768px) {
    .country_box_img .img_label {
        font-size: 1.4rem;
        bottom: -20px;
        gap: 6px;
    }

    .country_box_img .img_label::before {
        font-size: 1.6rem;
    }
}

/* ================================
   sec_cta_bottom (2nd CTA)
================================ */
.sec_cta_bottom {
    background-color: var(--bg-blue);
    padding: 10.667vw 0 8vw;
    text-align: center;
}

@media (min-width: 768px) {
    .sec_cta_bottom {
        padding: 50px 0;
    }
}

.cta_bottom_catch {
    font-size: 5.4vw;
    font-weight: 700;
    color: var(--text-mid);
    margin-bottom: 5.333vw;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .cta_bottom_catch {
        font-size: 2.2rem;
        margin-bottom: 28px;
    }
}

.cta_bottom_card {
    background-color: #ffffff;
    border-radius: 1.6vw;
    width: 81.5%;
    margin: 0 auto;
    padding: 5.333vw 5.333vw 0;
}

@media (min-width: 768px) {
    .cta_bottom_card {
        border-radius: 8px;
        width: 91.5%;
        max-width: 365px;
        padding: 20px 28px 0;
    }
}

.cta_bottom_plan_name {
    font-size: 5.333vw;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 1.333vw;
}

@media (min-width: 768px) {
    .cta_bottom_plan_name {
        font-size: 2.4rem;
        margin-bottom: 8px;
    }
}

.cta_bottom_price {
    font-size: 3.733vw;
    color: var(--text-mid);
    margin-bottom: 4.267vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.333vw;
}

@media (min-width: 768px) {
    .cta_bottom_price {
        font-size: 1.6rem;
        margin-bottom: 20px;
        gap: 8px;
    }
}

.cta_bottom_price .original {
    color: #666666;
}

.cta_bottom_price .arrow {
    color: var(--dark-blue);
    font-weight: 700;
}

.cta_bottom_price .free_price {
    font-weight: 700;
    font-size: 4.267vw;
}

@media (min-width: 768px) {
    .cta_bottom_price .free_price {
        font-size: 1.8rem;
    }
}

.btn_cta_bottom {
    display: block;
    width: calc(100% + 10.666vw);
    margin-left: -5.333vw;
    padding: 2.267vw 0;
    font-size: 4.267vw;
    font-weight: 700;
    color: var(--white);
    background-color: var(--dark-blue);
    border: none;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: opacity 0.2s;
    border-radius: 0 0 1.6vw 1.6vw;
}

.btn_cta_bottom:hover {
    opacity: 0.85;
    color: var(--white);
    text-decoration: none;
}

.btn_cta_bottom:visited {
    color: var(--white);
}

.btn_cta_bottom .arrow {
    border: solid var(--white);
    border-width: 0 .6vw .6vw 0;
    display: inline-block;
    padding: 1vw;
}

.btn_cta_bottom .arrow.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

@media (min-width: 768px) {
    .btn_cta_bottom {
        width: calc(100% + 56px);
        margin-left: -28px;
        padding: 16px 0;
        font-size: 1.6rem;
        border-radius: 0 0 8px 8px;
    }

    .btn_cta_bottom .arrow {
        border-width: 0 2px 2px 0;
        padding: 5px;
    }
}

.btn_cta_bottom .btn_arrow {
    margin-left: 0.5em;
}

.cta_bottom_disclaimer {
    width: 95.5%;
    margin: 4vw auto 0;
    text-align: left;
    text-indent: -2vw;
    padding-left: 2vw;
    letter-spacing: -.05em;
}

.cta_bottom_disclaimer p {
    font-size: 3.2vw;
    color: #555555;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .cta_bottom_disclaimer {
        max-width: 430px;
        width: 100%;
        margin: 16px auto 0;
        text-indent: 0;
        padding-left: 0;
        letter-spacing: 1px;
    }

    .cta_bottom_disclaimer p {
        font-size: 1.2rem;

    }
}

/* ================================
   sec_hojin (法人タブコンテンツ)
================================ */
.sec_hojin {
    background-color: var(--bg-blue);
    padding: 10.667vw 0 13.333vw;
}

@media (min-width: 768px) {
    .sec_hojin {
        padding: 60px 0;
    }
}

.hojin_ttl {
    font-size: 5.333vw;
    font-weight: 700;
    color: var(--text-mid);
    text-align: center;
    line-height: 1.5;
    margin-bottom: 2.667vw;
}

@media (min-width: 768px) {
    .hojin_ttl {
        font-size: 3.2rem;
        margin-bottom: 12px;
    }
}

.hojin_sub {
    font-size: 3.733vw;
    color: var(--text-mid);
    text-align: center;
    margin-bottom: 8vw;
}

@media (min-width: 768px) {
    .hojin_sub {
        font-size: 1.6rem;
        margin-bottom: 40px;
    }
}

/* 2-column layout on PC */
.hojin_body {
    display: flex;
    flex-direction: column;
    gap: 8vw;
}

@media (min-width: 768px) {
    .hojin_body {
        flex-direction: row;
        gap: 20px;
        align-items: flex-start;
        padding-left: 58px;
    }
}

/* Left: feature text */
.hojin_features {
    display: flex;
    flex-direction: column;
    gap: 5.333vw;
}

@media (min-width: 768px) {
    .hojin_features {
        width: 40%;
        gap: 24px;
    }
}

.hojin_feature_ttl {
    font-size: 4.267vw;
    font-weight: 700;
    color: var(--text-mid);
    margin-bottom: 2.133vw;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .hojin_feature_ttl {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }
}

.hojin_feature_txt {
    font-size: 3.733vw;
    color: #555555;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .hojin_feature_txt {
        font-size: 1.3rem;
    }
}

/* Right: comparison table */
.hojin_table_wrap {
    /* ScrollHint requires position:relative on the wrapper */
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    .scroll-hint-shadow-wrap {
        width: 56%;
    }

    .hojin_table_wrap {
        width: 100%;
        overflow-x: visible;
    }
}

/* ScrollHint icon z-index & pointer fix */
.hojin_table_wrap .scroll-hint-icon {
    z-index: 10;
    pointer-events: none;
}

.hojin_table_ttl {
    font-size: 3.733vw;
    font-weight: 700;
    color: var(--text-mid);
    margin-bottom: 2.133vw;
}

@media (min-width: 768px) {
    .hojin_table_ttl {
        font-size: 1.6rem;
        margin-bottom: 10px;
    }
}

.hojin_table {
    /* min-width forces overflow so ScrollHint detects it on SP */
    width: 100%;
    min-width: 646px;
    border-collapse: collapse;
    font-size: 2.933vw;
}

@media (min-width: 768px) {
    .hojin_table {
        min-width: 0;
        width: 100%;
        font-size: 1.3rem;
    }
}

.hojin_table thead th,
.hojin_table tbody td {
    padding: 1.667vw 2.133vw;
    border: 1px solid #cccccc;
    line-height: 1.5;
    vertical-align: middle;
}

.hojin_table tbody td {
    font-size: 3.456vw;
}

@media (min-width: 768px) {

    .hojin_table thead th,
    .hojin_table tbody td {
        padding: 5px 8px;
    }

    .hojin_table tbody td {
        font-size: 1.2rem;
    }
}

.hojin_th_blank {
    background-color: #8396a3;
    width: 30%;
}

.hojin_th_pro {
    background-color: var(--light-blue);
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    width: 30%;
}

.hojin_th_kojin {
    background-color: #8396a3;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    width: 30%;
}

.hojin_table tbody tr td {
    background-color: #ffffff;
}

.hojin_table tbody td.center {
    text-align: center;
    color: var(--text-mid);
}

.hojin_table tbody td:first-child {
    color: #555555;
}

/* CTA area */
.hojin_cta_wrap {
    margin-top: 10.667vw;
    text-align: center;
}

@media (min-width: 768px) {
    .hojin_cta_wrap {
        margin-top: 30px;
    }
}

.btn_hojin_cta {
    display: inline-block;
    background-color: #ced8e0;
    color: var(--text-mid);
    font-size: 4.56vw;
    font-weight: 700;
    padding: 2.733vw 5vw;
    border-radius: 0.8vw;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: opacity 0.2s;
    margin-bottom: 5.333vw;
}

.hojin_cta_arrow {
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    border-style: solid;
    border-color: var(--text-mid);
    border-width: 0px 2px 2px 0px;
    transform: rotate(45deg);
    transition: border-width 150ms ease-in-out;
    margin-left: 0.3em;
    margin-bottom: 1vw;
    display: inline-block;
}

@media (min-width: 768px) {
    .btn_hojin_cta {
        max-width: 380px;
        text-align: center;
        font-size: 1.8rem;
        padding: 12px 26px;
        border-radius: 10px;
        margin-bottom: 24px;
    }

    .hojin_cta_arrow {
        height: 12px;
        width: 12px;
        transform: rotate(45deg);
        transition: border-width 150ms ease-in-out;
        margin-left: 0.3em;
        margin-bottom: 4px;
    }
}

/* Region buttons */
.hojin_region_btns {
    display: flex;
    flex-direction: column;
    gap: 2.667vw;
    width: 95.5%;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .hojin_region_btns {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        width: 100%;
        max-width: 900px;
    }
}

.btn_region {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.733vw 4.267vw;
    background-color: var(--yellow);
    border-radius: 0.8vw;
    font-size: 3.733vw;
    color: var(--text-mid);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s, opacity 0.2s;
}

.btn_region:hover {
    opacity: .85;
    color: var(--text-mid);
}

.btn_region:visited {
    color: var(--text-mid);
}

.btn_region .arrow {
    color: var(--dark-blue);
    font-weight: 700;
    margin-left: .05em;
}

.btn_region .arrow {
    border: solid var(--text-mid);
    border-width: 0 .6vw .6vw 0;
    display: inline-block;
    padding: 1vw;
}

.btn_region .arrow.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

@media (min-width: 768px) {
    .btn_region {
        padding: 12px 18px;
        border-radius: 4px;
        font-size: 1.4rem;
        flex: 0 0 auto;
        justify-content: space-between;
    }

    .btn_region .arrow {
        border-width: 0 2px 2px 0;
        padding: 3px;
    }
}

/*-------------------------------- 
   FAQ section
-------------------------------- */
.faq {
    padding: 9.867vw 0;
    content-visibility: auto;
    contain-intrinsic-size: 600px;
}

.faq h3 {
    font-size: 4.267vw;
    font-weight: 700;
    margin: 6.667vw 0 4vw;
    text-align: center;
    color: #474747;
}

.faq .inner_faq {
    margin: 0 auto;
    max-width: 1000px;
}

.faq .sect_h {
    margin-bottom: 3vw;
}

.faq .faq_wrap {
    width: 91.5%;
    margin: 0 auto 4vw;
    -webkit-border-radius: 1.600vw;
    border-radius: 1.600vw;
    border: 0.267vw solid #dfdfdf;
}

.faq .faq_wrap li {
    background: #FAFAFA;
    padding: 3.467vw 4vw;
    position: relative;
}

.faq .faq_wrap li.question {
    display: flex;
    cursor: pointer;
    -webkit-border-radius: 1.600vw;
    border-radius: 1.600vw;
}

.faq .faq_wrap li .faq_img,
.faq .faq_wrap li.answer {
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.faq .faq_wrap li.answer {
    background: transparent;
    flex-wrap: nowrap;
}

.faq .faq_wrap li.question::after,
.faq .faq_wrap.is-active li.question::after {
    content: "";
    position: absolute;
    width: 2.667vw;
    height: 1.600vw;
    background: url(../../images/icon_drop.jpg) no-repeat;
    -webkit-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    right: 4vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.faq .faq_wrap.is-active li.question::after {
    content: "";
    position: absolute;
    width: 2.667vw;
    height: 1.600vw;
    background: url(../../images/icon_up.jpg) no-repeat;
    -webkit-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    right: 4vw;
}

.faq .faq_wrap li .info_sec a {
    color: #326691;
}

.faq .faq_wrap li .info_sec p,
.faq .faq_wrap li .faq_img {
    margin-bottom: 4vw;
}

.faq .faq_wrap li .faq_img img,
.faq .faq_wrap li.answer img {
    width: 37.600vw;
}

.faq .faq_wrap li .faq_img {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.faq .faq_wrap li .faq_img img:first-child {
    margin: 0;
}

.faq .faq_wrap span {
    width: auto;
    font-weight: 700;
    margin-right: 1.333vw;
}

.faq .faq_wrap span,
.faq .faq_wrap p {
    font-size: 3.733vw;
    color: var(--dark-blue);
    display: inline-block;
}

.faq .faq_wrap p {
    color: var(--text-mid);
}

@media (min-width: 768px) {
    .faq {
        padding: 60px 0 65px;
    }

    .faq h3 {
        font-size: 2.4rem;
        font-weight: 700;
        margin: 25px 0 15px;
        text-align: center;
        color: #474747;
    }

    .faq .inner_faq {
        margin: 0 auto;
        max-width: 1000px;
    }

    .faq .faq_wrap {
        width: 703px;
        margin: 0 auto 15px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        border: 1px solid #dfdfdf;
    }

    .faq .faq_wrap li {
        background: #FAFAFA;
        padding: 13px 15px;
        position: relative;
    }

    .faq .faq_wrap li.question {
        cursor: pointer;
        -webkit-border-radius: 6px;
        border-radius: 6px;
    }

    .faq .faq_wrap li .faq_img,
    .faq .faq_wrap li.answer {
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .faq .faq_wrap li.answer {
        background: transparent;
        flex-wrap: nowrap;
    }

    .faq .faq_wrap li.question::after,
    .faq .faq_wrap.is-active li.question::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 6px;
        background: url(../../images/icon_drop.jpg) no-repeat;
        -webkit-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        right: 15px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .faq .faq_wrap.is-active li.question::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 6px;
        background: url(../../images/icon_up.jpg) no-repeat;
        -webkit-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        right: 15px;
    }

    .faq .faq_wrap li .info_sec p,
    .faq .faq_wrap li .faq_img {
        margin-bottom: 15px;
    }

    .faq .faq_wrap li .faq_img img,
    .faq .faq_wrap li.answer img {
        width: 310px;
    }

    .faq .faq_wrap li .faq_img img:first-child {
        margin: 0;
    }

    .faq .faq_wrap span,
    .faq .faq_wrap p {
        display: inline-block;
    }

    .faq .faq_wrap span {
        width: 24px;
        font-weight: 700;
        font-size: 2.4rem;
        color: var(--dark-blue);
        line-height: 1.2;
        margin-right: 10px;
    }

    .faq .faq_wrap p {
        font-size: 1.6rem;
        color: var(--text-mid);
    }
}

/* For Tablet*/
@media only screen and (min-width: 521px) and (max-width: 767px) {
    .faq {
        padding: 7.823vw 0 8.475vw;
    }

    .faq h3 {
        font-size: 4.267vw;
        margin: 3.259vw 0 1.956vw;
        color: #474747;
    }

    .faq .faq_wrap {
        width: 91.8%;
        margin: 0 auto 1.956vw;
        -webkit-border-radius: 0.782vw;
        border-radius: 0.782vw;
        border: 0.130vw solid #dfdfdf;
    }

    .faq .faq_wrap li {
        padding: 1.695vw 1.956vw;
    }

    .faq .faq_wrap li.question {
        -webkit-border-radius: 0.782vw;
        border-radius: 0.782vw;
    }

    .faq .faq_wrap li.question::after,
    .faq .faq_wrap.is-active li.question::after {
        content: "";
        position: absolute;
        width: 2.304vw;
        height: 1.782vw;
        background: url(../../images/icon_drop.jpg) no-repeat;
        -webkit-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        right: 1.956vw;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .faq .faq_wrap.is-active li.question::after {
        content: "";
        position: absolute;
        width: 1.304vw;
        height: 0.782vw;
        background: url(../../images/icon_up.jpg) no-repeat;
        -webkit-background-size: 100% auto;
        -o-background-size: 100% auto;
        background-size: 100% auto;
        right: 1.956vw;
    }

    .faq .faq_wrap li .info_sec p,
    .faq .faq_wrap li .faq_img {
        margin-bottom: 1.956vw;
    }

    .faq .faq_wrap li .faq_img img,
    .faq .faq_wrap li.answer img {
        width: 40.417vw;
    }

    .faq .faq_wrap li .faq_img img:first-child {
        margin: 0 1.304vw 0 0;
    }

    .faq .faq_wrap span {
        width: 3.129vw;
        font-weight: 700;
        color: var(--dark-blue);
    }

    .faq .faq_wrap span,
    .faq .faq_wrap p {
        font-size: 3.733vw;
    }
}


html {
  scroll-behavior: smooth;
}


/* --------------------------------
   end FAQ section
-------------------------------- */
/* --------------------------------
   notes section
-------------------------------- */
.ttl_service {
    font-size: 2.933vw;
    font-weight: 700;
    color: #474747;
    margin: 5.333vw 0 2.667vw;
}

.service_contents .list {
    margin-bottom: 2.667vw;
}

.list .que {
    background: var(--white);
    border: 1px solid #DADADA;
    padding: 4vw;
    position: relative;
}

.list .que::after {
    content: "";
    width: 3.200vw;
    height: 1.867vw;
    background: url(../../images/icon_drop.jpg) no-repeat top center;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 45%;
    right: 4vw;
}

.list.is-active .que::after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.list .ans {
    background: #F7F7F7;
    border-left: 1px solid #DADADA;
    border-right: 1px solid #DADADA;
    border-bottom: 1px solid #DADADA;
    padding: 4vw;
}

.list p {
    font-size: 2.933vw;
    font-weight: 400;
    color: #333;
}

.ans table {
    border: 1px solid #DADADA;
}

.ans table tr {
    border-bottom: 1px solid #DADADA;
}

.ans table th,
.ans table td {
    font-size: 2.933vw;
    font-weight: 400;
    color: #474747;
    border-right: 1px solid #DADADA;
    border-bottom: 1px solid #DADADA;
}

.ans table th {
    color: var(--white);
    background: #474747;
    padding: 1.333vw 2vw;
}

.ans table td {
    padding: 5.333vw 4vw;
}

.ans table .col_01 {
    width: 30%;
}

.ans table .col_02 {
    width: 35%;
}

.ans table .col_03 {
    width: 35%;
}

.notes {
    padding: 13.33333vw 0 1.66667vw;
    background-color: var(--white);
    content-visibility: auto;
    contain-intrinsic-size: 1700px;
}

@media (min-width: 768px) {
    .notes {
        padding: 60px 0;
    }
}

.notes .conversion {
    margin-top: 12vw;
}

@media (min-width: 768px) {
    .notes .conversion {
        margin-top: 60px;
    }
}

.notes_inner {
    margin: 0 4vw;
}

@media (min-width: 768px) {
    .notes_inner {
        margin: auto;
        max-width: 1000px;
    }
}

@media (min-width: 768px) {
    .notes_h {
        font-size: 3.2rem;
    }
}

.notes_list_h {
  margin-top: 1.5em;
}


.notes_list+.notes_list {
    margin: 7.66667vw 0 0;
}

@media (min-width: 768px) {
    .notes_list+.notes_list {
        margin-top: 30px;
    }
}

.notes_list_h {
    padding-left: 1.7em;
    text-indent: -1.7em;
    font-size: 2.933vw;
    font-weight: 700;
    color: #474747;
}

@media (min-width: 768px) {
    .notes_list_h {
        font-size: 14px;
        color: #474747;
    }
}

@media (min-width: 768px) {
    .notes_list_body {
        margin-top: 6px;
    }
}

.notes_list_body p {
    font-size: 2.4vw;
}

.notes_list_child p {
    font-size: 2.933vw;
    line-height: 1.6;
    color: #474747;
}

@media (min-width: 768px) {
    .ttl_service {
        font-size: 14px;
        font-weight: 700;
        color: #474747;
        margin: 30px 0 15px;
    }

    .notes_list_body p {
        font-size: 12px;
    }

    .notes_list_child p {
        font-size: 14px;
        line-height: 1.71429;
    }

    .notes_list_child p a {
        display: inline;
    }

    .notes_list_child p.align_txt {
        text-indent: -52px;
        padding-left: 52px;
    }
}

.notes_list_child p a {
    text-decoration: underline;
    color: #0a3e6f;
    display: inline;
}

@media (min-width: 768px) {
    .notes_list_child p a:hover {
        text-decoration: none;
    }
}

.notes_list_child p.align_txt {
    padding-left: 1.6em;
    text-indent: -1.6em;
}

.notes_list_child+.notes_list_child {
    margin: 1.33333vw 0 1.33333vw;
}

.notes_list_child.first+.notes_list_child {
    margin-top: 0;
}

@media (min-width: 768px) {

    .notes_list_child+.notes_list_child,
    .notes_list_child02 {
        margin-top: 22px;
    }
}

table {
    width: 100%;
}

.table_02 {
    margin: 2.13333vw 0 4.53333vw;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

@media (min-width: 768px) {
    .table_02 {
        margin: 12px 0 20px;
    }
}

.table_02 th,
.table_02 td {
    padding: 3.33333vw;
    width: calc(100% / 3);
    text-align: center;
    font-size: 3.2vw;
    line-height: 1.58333;
}

@media (min-width: 768px) {

    .table_02 th,
    .table_02 td {
        padding: 18px;
        font-size: 1.4rem;
    }
}

.table_02 th {
    background-color: #000;
    color: var(--white);
}

.table_02 th+th {
    border-left: 1px solid #ccc;
}

.table_02 td {
    background-color: var(--white);
    color: #474747;
}

.table_02 td+td {
    border-left: 1px solid #ccc;
}

.table_02 td a {
    text-decoration: underline;
    color: #0a3e6f;
}

@media (min-width: 768px) {
    .table_02 td a:hover {
        text-decoration: none;
    }
}

@media (min-width: 768px) {
    .width_584 {
        width: 58.4% !important;
    }
}

@media (min-width: 768px) {
    .width_630 {
        width: 63% !important;
    }
}

.table_04 {
    margin: 2.13333vw 0;
    border-bottom: 1px solid #ccc;
}

@media (min-width: 768px) {
    .table_04 {
        margin: 7px 0 12px;
        border: 1px solid #DADADA;
        border-bottom: none;
    }
}

.table_04 th,
.table_04 td {
    padding: 3.33333vw;
    width: calc(100% / 4);
    text-align: left;
    font-size: 3.2vw;
    line-height: 1.58333;
}

@media (min-width: 768px) {

    .table_04 th,
    .table_04 td {
        padding: 18px;
        font-size: 1.2rem;
    }
}

.table_04 th {
    background-color: #000;
    color: var(--white);
}

.table_04 th+th {
    border-left: 1px solid #ccc;
}

.table_04 td {
    background-color: var(--white);
    color: #474747;
}

.table_04 th,
.table_04 td {
    border-bottom: 1px solid #ccc;
}

.table_04 td.ls_col {
    width: 40%;
}

.table_04 td,
.table_04 td+td {
    border-left: 1px solid #ccc;
}

@media (min-width: 521px) and (max-width: 767px) {
    .notes {
        padding: 0vw 0 9.387vw;
    }

    .notes_inner {
        width: 95%;
        margin: auto;
        max-width: 1000px;
    }

    .notes_list_h {
        font-size: 2.733vw;
        color: #474747;
    }

    .service_tbl {
        display: block;
    }

    .ttl_service {
        font-size: 1.825vw;
        margin: 3.911vw 0 1.956vw;
    }

    .notes_list_child p {
        font-size: 2.5vw;
    }

    .ttl_service {
        font-size: 1.825vw;
        margin: 4.215vw 0 1.565vw;
    }

    .service_contents .list {
        margin-bottom: 2.667vw;
    }

    .list .que {
        padding: 1.565vw;
    }

    .list .que::after {
        width: 1.565vw;
        height: 0.913vw;
        right: 1.565vw;
    }

    .list .ans {
        padding: 1.565vw;
    }

    .list p {
        font-size: 1.825vw;
    }

    .ans table th,
    .ans table td {
        font-size: 1.825vw;
    }

    .ans table th {
        padding: 2.333vw 2vw;
    }

    .ans table td {
        padding: 2.333vw 2vw;
    }

    .notes_list+.notes_list {
        margin: 2.66667vw 0 0;
    }

    .table_02 th,
    .table_02 td {
        font-size: 2.5vw;
        padding: 2.333vw 2vw;
    }
}

.notes_caution_small {
  font-size: 0.85em;        /* 小さめ */
  color: var(--text-low);  /* 薄めの文字色（なければ #666 など） */
  margin-top: 1.5em;
  line-height: 1.6;
}

/*end of notes section*/

/* --------------------------------
   footerNav
-------------------------------- */
.footerNav {
    background-color: var(--white);
}

.footerNav_inner {
    padding: 25px 15px;
}

@media (min-width: 768px) {
    .footerNav_inner {
        padding: 8px 0;
    }
}

.footerNav_list {
    display: flex;
    margin-top: -11px;

    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.footerNav_listItem {
    margin: 11px 24px 0;
}

.footerNav_listItem a {
    text-decoration: none;
    color: #67779f;
    font-size: 1.2rem;
    line-height: 1.8;

    -webkit-font-smoothing: auto;
}

@media (min-width: 768px) {
    .footerNav_listItem a {
        transition: 0.3s color cubic-bezier(0, 0, 0.58, 1);
        color: #0a385b;
    }

    .footerNav_listItem a:hover {
        color: #8a8a8a;
    }
}


/* --------------------------------
   footer
-------------------------------- */
.footer {
    padding-bottom: 0;
}

.footer_inner {
    display: flex;
    padding: 12px 5px;
    background-color: #0a385b;

    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .footer_inner {
        padding: 22px 5px;
    }
}

.footer_logo {
    margin-right: 9px;
    width: 52px;
    font-size: 0;
}

@media (min-width: 768px) {
    .footer_logo {
        margin-right: 22px;
        width: 60px;
    }
}

.footer_logo img {
    width: 100%;
}

.footer_copylight {
    color: var(--white);
    font-size: 1rem;

    -webkit-font-smoothing: auto;
}

@media (min-width: 768px) {
    .footer_copylight {
        letter-spacing: 0.9px;
        font-size: 1.4rem;
    }
}

/* Overlay */
.modal-overlay {
    display: none;
    position: absolute;
    top: calc(100% - 15px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.modal-overlay.active {
    display: block;
}


/* Modal box */
.modal {
    background: var(--white);
    border-radius: 12px;
    padding: 16px;
    max-width: 644px;
    width: 85.867vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    position: relative;
}

.modal p {
    font-size: 2.933vw;
    line-height: 1.75;
    color: var(--text-mid);
    margin-bottom: 10px;
    text-align: left;
}

.modal p:last-of-type {
    margin-bottom: 24px;
}

.modal-close-btn {
    display: block;
    margin: 0 auto;
    padding: 10px 28px;
    border: 1.5px solid var(--blue-dark);
    border-radius: 4.2vw;
    background: var(--white);
    font-size: 2.933vw;
    color: var(--blue-dark);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}

.modal-close-btn:hover {
    opacity: .85;
}

@media (min-width: 768px) {
    .modal {
        border-radius: 12px;
        padding: 16px;
        max-width: 444px;
        width: calc(100% - 32px);
    }

    .modal p {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .modal-close-btn {
        border-radius: 24px;
        font-size: 14px;
    }
}