@charset "UTF-8";

/* common element
--------------------------*/
html {
    scroll-behavior: smooth;
}

body {
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.5;
}

main {
    overflow: hidden;
}

.Urbanist {
    font-family: Urbanist;
}

.flexbox {
    display: flex;
}

.color_primary {
    color: var(--primary);
}

.opacity03 {
    opacity: 0.3;
}

.opacity05 {
    opacity: 0.5;
}

.pc {
    display: block;
}

.sp {
    display: none;
}


#inexpensive,
#relief,
#convenient {
    background: linear-gradient(90deg, rgba(167, 223, 249, 1) 0%, rgba(229, 245, 253, 1) 20%, rgba(229, 245, 253, 1) 80%, rgba(167, 223, 249, 1) 100%);
}


@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }
}

/* アニメーション
--------------------------*/
.fadeIn {
    opacity: 0;
    transform: translateY(80px);
}

.fadeIn.is-active {
    opacity: 1;
    transform: translateY(0);
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.bounceIn {
    opacity: 0;
}

.bounceIn.is-active {
    opacity: 1;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.delay-01s {
    transition-delay: 0.1s;
}

.delay-02s {
    transition-delay: 0.2s;
}

/* mainVisual */
.mv_remarks {
    width: 100%;
    background-color: var(--white);
    padding: 16px 0;
}

.remarks_inner {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
}

.remarks {
    font-size: 12px;
}

@media screen and (max-width: 1280px) {
    .mv_remarks {
        max-width: 100%;
        padding: 16px;
    }
}

/* features
------------------------------ */
#features {
    display: flex;
    padding: 64px 16px 80px;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    background-color: var(--white);
}

.h2_ttl_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.h2_ttl_box h2 {
    display: flex;
    flex-direction: column;
    font-size: 36px;
    line-height: 1.5;
}

.h2_ttl_box h2 img {
    display: inline;
}

.h2_ttl_box h2 .small {
    font-size: 24px;
}

.h2_ttl_box .flexbox {
    display: inline-flex;
    align-items: center;
}

.features_contents {
    display: flex;
    align-items: center;
    gap: 32px;
}

.features_box {
    position: relative;
    display: flex;
    max-width: 240px;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: auto;
}

.features_box .h3_ttl_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.features_box .h3_ttl_box p {
    font-size: 20px;
}

.features_box h3 {
    font-size: 24px;
}

.features_box:nth-of-type(2)::before,
.features_box:nth-of-type(2)::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    background-color: var(--line-blue);
}

.features_box:nth-of-type(2)::before {
    left: -16px;
}

.features_box:nth-of-type(2)::after {
    right: -16px;
}

@media screen and (max-width: 640px) {
    .features_contents {
        width: 100%;
        flex-direction: column;
        gap: 32px;
    }

    .features_box {
        max-width: 100%;
        padding: 24px;
        border-radius: 16px;
        background: var(--white);
        box-shadow: 4px 4px 24px 0 rgba(0, 81, 198, 0.20);
    }

    .features_box img {
        max-width: min(160px, 44vw);
    }

    .features_box:nth-of-type(2)::before,
    .features_box:nth-of-type(2)::after {
        content: none;
    }

    /* スクロールヒント */
    .sec_container .scroll-hint-icon:before {
        width: 30px;
        height: 30px;
    }

    .sec_container .scroll-hint-icon {
        top: 0;
        bottom: 0;
        margin: auto;
        height: fit-content;
    }
}

/* inexpensive
------------------------------ */
#inexpensive {
    display: flex;
    padding-top: 80px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.h2_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.h2_box .nmb {
    font-size: 24px;
}

.h2_box h2 {
    font-size: 42px;
}

.h2_bgtxt {
    position: absolute;
    top: -16px;
    right: 50%;
    transform: translate(50%, 0);
    font-weight: 700;
    font-size: 80px;
    font-weight: bold;
    letter-spacing: 0.2rem;
    opacity: 0.10;
    z-index: 0;
}

.balloon_worries {
    position: relative;
    width: 100%;
    z-index: 1;
}

.balloon_worries img {
    display: block;
    margin: auto;
}

.balloon_worries::after {
    content: "";
    width: 100%;
    height: 245px;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 100%;
    background: url(/sim/img/top/band_pc.png) center / cover no-repeat;
    z-index: -1;
}

.bg_symbol_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bg_symbol_wrapper .bg_symbol {
    position: absolute;
    top: -120px;
    width: clamp(53.5rem, 10.5rem + 53.75vw, 75rem);
    z-index: -1;
}

.bg_symbol_l {
    left: -330px;
}

.bg_symbol_r {
    right: -330px;
}

.sec_container {
    display: flex;
    max-width: 1024px;
    width: 100%;
    margin: auto;
    padding: 64px;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    border-radius: 16px;
    background: var(--white);
    box-shadow: 4px 4px 24px 0 rgba(0, 81, 198, 0.20);
    z-index: 1;
}

.sec_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.title_border_bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.title_border_bottom :is(h2, h3) {
    position: relative;
    font-size: 28px;
    line-height: 1.5;
    text-align: center;
}

.title_border_bottom :is(h2, h3)::after {
    content: "";
    position: absolute;
    bottom: -12px;
    right: 50%;
    transform: translate(50%, 0);
    width: 24px;
    height: 4px;
    border-radius: 16px;
    background-color: var(--primary);
}

.balloon_flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

@media screen and (max-width: 1024px) {
    .sec_container {
        max-width: 94%;
        padding: 40px 16px;
        gap: 40px;
    }

    .bg_symbol_wrapper .bg_symbol {
        top: -100px;
    }

    .bg_symbol_l {
        left: -180px;
    }

    .bg_symbol_r {
        right: -180px;
    }

    .h2_box h2 {
        font-size: 32px;
    }

    .h2_bgtxt {
        top: 0;
        font-size: 56px;
    }

    .balloon_worries {
        margin: -16px auto;
    }

    .balloon_worries::after {
        height: 37vw;
        top: 46%;
        background: url(/sim/img/top/band_sp.png) center / cover no-repeat;
    }

    .title_border_bottom :is(h2, h3) {
        font-size: 24px;
    }

    .freemo_balloon {
        max-width: 90%;
    }

    .sec_contents {
        gap: 32px;
    }

    .inex_price {
        max-width: 80%;
    }
}

/* table  */
.table_box {
    width: 100%;
}

table.kakeho {
    width: 100%;
    border: 1px solid #94DDFF;
}

table.tsujou {
    width: 100%;
    border: 1px solid #DCDCDC;
}

table.data {
    width: max-content;
    border: 1px solid #DCDCDC;
}

.th_title {
    width: 24%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    font-size: 20px;
    padding: 16px;
}

table.kakeho .th_title {
    background: #EEFCFF;
    border: 1px solid #94DDFF;
}

table.tsujou .th_title {
    background: #F9FFEB;
    border: 1px solid #DCDCDC;
}

table.data .th_title {
    width: 207px;
    background: #F3F3F3;
    border: 1px solid #D4D4D4;
}

.th_giga,
.td_price {
    position: relative;
    width: calc((100% - 24%)/4);
    padding: 12px;
    vertical-align: middle;
    text-align: center;
    line-height: 1;
    border-right: 1px solid #DCDCDC;
    border-left: 1px solid #DCDCDC;
}


table.data .th_giga,
table.data .td_price {
    width: 170px;
}

table.kakeho .th_giga:not(:last-of-type),
table.kakeho .td_price:not(:last-of-type) {
    border-right: 1px solid #94DDFF;
    border-left: 1px solid #94DDFF;
}

.th_giga {
    font-size: 24px;
    font-weight: normal;
}

.th_giga .txt_big {
    font-size: 30px;
}

.td_price {
    font-size: 20px;
    font-weight: bold;
}

.td_price .txt_big {
    font-size: 36px;
}

.td_price::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 80%;
    height: 1px;
    background-image: linear-gradient(to right, #DCDCDC 7px, transparent 7px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: left bottom;
}

table.kakeho .td_price::after {
    background-image: linear-gradient(to right, #94DDFF 7px, transparent 7px);
}

table.data .td_price {
    font-weight: normal;
}

.yen {
    position: relative;
}

.excluding-tax {
    position: absolute;
    top: -18%;
    left: 50%;
    transform: translate(-45%, 0);
    white-space: nowrap;
    font-size: 10px;
}

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

    .th_title,
    .th_giga,
    .td_price {
        font-size: 14px;
    }

    .td_price .txt_big,
    .th_giga .txt_big {
        font-size: 28px;
    }

    table.data .th_title {
        width: auto;
    }

    .excluding-tax {
        font-size: 10px;
    }
}

@media screen and (max-width: 640px) {
    .table_box {
        width: 100%;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
    }

    .table_box table th,
    .table_box table td {
        white-space: nowrap;
    }

    .th_giga,
    .td_price {
        width: auto;
        padding: 12px 24px;
    }

    .excluding-tax {
        position: static;
    }
}



/* qa  */
.qa_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.q_contents,
.a_contents {
    display: flex;
    gap: 8px;
    align-self: stretch;
}

.q_contents {
    align-items: center;
}

.inner_txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.icon_q {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 3px 6px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    background: var(--primary, #00A0E9);
    font-weight: bold;
    text-align: center;
    color: var(--white);
    font-size: 14px;
}

.icon_a {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 3px 6px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    border: 1px solid var(--primary, #00A0E9);
    font-weight: bold;
    text-align: center;
    color: var(--primary);
    font-size: 14px;
}

.q_contents h4 {
    font-size: 20px;
}

.tsujou_flexbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

@media screen and (max-width: 640px) {
    .q_contents h4 {
        font-size: 16px;
    }

    .q_contents {
        align-items: flex-start;
    }

    .inner_txt {
        width: calc(100% - (8px + 23px));
    }
}

/* relief
------------------------------ */
#relief {
    display: flex;
    padding-top: 120px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.emphasized_txt {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.emphasized_txt {
    font-size: 24px;
    line-height: 1;
}

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

.underline_yellow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 16px;
    background: #F4F750;
    z-index: -1;
}

.gradient {
    font-weight: 600;
    background: linear-gradient(90deg, #0091E1 0%, #0051C6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 0.9;
}

.gradient {
    font-size: 40px;
}

.gradient .txt_big {
    font-size: 74px;
}

.company {
    display: flex;
    max-width: 840px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.company_contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
}

.tosho_box {
    display: flex;
    padding: 16px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    width: 100%;
    border: 1px solid var(--black);
}

.tosho_box .border_gray {
    width: 155px;
    height: 1px;
    background: #C4C4C4;
}

.company_times {
    display: flex;
    padding: 24px 32px;
    flex-direction: column;
    gap: 32px;
    max-width: 527px;
    width: 100%;
    border-radius: 10px;
    background: #EEFCFF;
}

.company_times_box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.company_times_box .urbanist {
    font-size: 30px;
}

.about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}

.about_flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    max-width: 765px;
    width: 100%;
}

.about_txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
}

.about_txt .Urbanist {
    font-size: 48px;
    font-weight: bold;
    line-height: 1;
}

.strengths {
    position: relative;
    display: flex;
    width: 100%;
    padding: 64px 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #EEFCFF;
}

.strengths p {
    line-height: 1.7;
}

.strengths .triangle {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(80px / 2);
    width: 100%;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background-color: var(--white);
}

.strengths .txt_mid {
    font-size: 20px;
}

.strengths .txt_big {
    font-size: 32px;
    line-height: 1.5;
}

@media screen and (max-width: 768px) {
    .company {
        flex-direction: column;
        gap: 32px;
    }

    .company_contents {
        width: 100%;
        gap: 24px;
    }

    .logo_blue {
        max-width: 240px;
        width: 70%;
        margin: auto;
    }

    .company_times {
        gap: 16px;
    }

    .company_times_box {
        gap: 0;
    }

    .about_flexbox {
        flex-direction: column;
        gap: 16px;
    }

    .about_txt {
        gap: 8px;
    }

    .about_flexbox:nth-of-type(2) {
        flex-direction: column-reverse;
    }

    .about_flexbox img {
        width: 100%;
    }

    .strengths .txt_mid {
        font-size: 14px;
    }

    .strengths .txt_big {
        font-size: 24px;
    }
}

@media screen and (max-width: 500px) {
    #relief .emphasized_txt p {
        font-size: min(20px, 4vw);
    }

    #relief .gradient .txt_big {
        font-size: min(56px, 12vw);
    }

    #relief .gradient {
        font-size: min(32px, 8vw);
    }
}

/* convenient
------------------------- */

#convenient {
    display: flex;
    padding: 120px 0;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.conv_flexbox01 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
}

.conv_flexbox02 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

.conv_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.conv_contents h4 {
    position: relative;
}

.conv_contents h4::after {
    content: "";
    position: absolute;
    bottom: -12px;
    right: 50%;
    transform: translate(50%, 0);
    width: 24px;
    height: 4px;
    border-radius: 16px;
    background-color: var(--primary);
}

@media screen and (max-width: 640px) {
    .easy.emphasized_txt {
        justify-content: center;
        flex-wrap: wrap;
        width: fit-content;
        margin: auto;
    }

    .easy .gradient .txt_big {
        font-size: min(56px, 12vw);
    }

    .easy .gradient {
        font-size: min(32px, 8vw);
    }

    .conv_flexbox02 {
        flex-direction: column;
        gap: 24px;
    }
}

/* closing-date */
.closing-date>p {
    line-height: 1.3;
}

.closing-date .gradient {
    font-size: 66px;
}

@media screen and (max-width: 640px) {
    .closing-date.emphasized_txt {
        justify-content: center;
        flex-wrap: wrap;
        width: fit-content;
        margin: auto;
        font-size: min(16px, 4.2vw);
    }

    .closing-date .gradient .txt_big {
        font-size: min(48px, 12vw);
    }

    .closing-date .gradient {
        font-size: min(43px, 10.9vw);
    }
}

/* giga_reset */
.giga_reset {
    display: flex;
    max-width: 485px;
    width: 100%;
    padding: 24px 32px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: #E5F5FD;
}

.giga_reset_txt {
    font-size: 22px;
    line-height: 1;
}

.giga_reset .txt_big {
    font-size: 42px;
}

.giga_carryover .gradient {
    font-size: 50px;
}

.giga_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

@media screen and (max-width: 640px) {
    .giga_carryover.emphasized_txt {
        justify-content: center;
        flex-wrap: wrap;
        width: fit-content;
        margin: auto;
    }

    .giga_carryover .gradient .txt_big {
        font-size: min(40px, 12vw);
    }

    .giga_carryover .gradient {
        font-size: min(36px, 10.9vw);
    }

    .giga_reset {
        padding: 24px 16px;
    }

    .giga_reset_txt {
        font-size: 16px;
    }

    .giga_reset .txt_big {
        font-size: 32px;
    }
}

/* dual_sim */
.dual_sim_contents {
    display: flex;
    width: 896px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* worries */
.worries_list_container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

.worries_list {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.worries_list li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.bnr_contents {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.bnr_contents .balloon_flex p {
    font-size: 20px;
}

.trial-bnr {
    margin-top: -48px;
}

.txt_underline {
    border-bottom: 1px solid var(--black);
}

.click_box {
    display: inline;
    vertical-align: middle;
    margin-bottom: 2px;
}

@media screen and (max-width: 640px) {
    .worries_list_container {
        width: 100%;
        gap: 24px;
    }

    .trial-bnr {
        margin-top: -16px;
    }

    .bnr_contents .balloon_flex p {
        font-size: 14px;
    }
}

/* option
------------------------- */
#option {
    padding: 80px 16px;
    background: #FFF;
}

.price_container {
    display: flex;
    max-width: 1024px;
    width: 100%;
    margin: auto;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.option_img_flexbox {
    display: flex;
    max-width: 586px;
    width: 100%;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

/* overview
------------------------- */
#overview {
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    padding: 80px 16px;
    background: #FFF;
}

.overview_container {
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 1024px;
    width: 100%;
    margin: auto;
}

.overview_list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #777E81;
}

.overview_list .flexbox {
    width: 100%;
}

.overview_list dt,
.overview_list dd {
    padding: 24px 48px;
}

.overview_list dt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    text-align: center;
    font-size: 18px;
    font-weight: normal;
}

.overview_list dd {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    width: 70%;
}

.overview_list dd::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 1px;
    height: calc(100% - 16px);
    background-image: linear-gradient(to bottom, #777E81 4px, transparent 4px);
    background-size: 6px 8px;
    background-repeat: repeat-y;
    background-position: left top;
}

.overview_list .flexbox:nth-of-type(even) {
    background-color: #F9F9F9;
}


.only-row p {
    display: inline;
}

.overview_list .cmt {
    font-size: 12px;
}

.only-row .cmt {
    padding-left: 16px;
}

.radius-bl {
    border-bottom-left-radius: 8px;
}

.radius-br {
    border-bottom-right-radius: 8px;
}

@media screen and (max-width: 768px) {
    .overview_list>.flexbox {
        flex-direction: column;
    }

    .overview_list :is(dt, dd) {
        width: 100%;
        padding: 24px;
    }

    .overview_list dd::after {
        width: 90%;
        height: 1px;
        top: 0;
        right: 0;
        left: 0;
        bottom: auto;
        margin: auto;
        background-image: linear-gradient(to right, #707070 8px, transparent 8px);
        background-size: 10px 1px;
        background-repeat: repeat-x;
        background-position: left bottom;
    }

    .only-row {
        display: flex;
        flex-direction: column;
    }

    .only-row:not(:first-of-type) {
        margin-top: 4px;
    }

    .only-row .cmt {
        padding-left: 0;
    }
}