/* @import url("./mem.css"); */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/* common */
html {
    font-family: 'Noto Sans JP', sans-serif;
    color: #373737;
}
img {
    width: 100%;
}
.contents {
    max-width: 1000px;
    margin: 128px auto;
}
h2 {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
}
.doc {
    background-color: #54A2C0;
    border-radius: 100px;
    padding: 16px 24px;
    font-weight: 700;
    width: 240px;
    display: inline-block;
    text-align: center;
}
.inquiry {
    border: 3px solid #373737;
    border-radius: 100px;
    padding: 16px 24px;
    font-weight: 700;
    width: 240px;
    display: inline-block;
    text-align: center;
}
.cta {
    display: flex;
    align-items: baseline;
    justify-content: center;
}
.cta > div p {
    font-size: 12px;
    text-align: center;
    font-weight: 500;
}
.cta .doc {
    margin-right: 4px;
}
.cta div {
    margin-left: 4px;
}

/* header */
header {
    display: flex;
    justify-content: space-between;
    padding: 16px;
}
header img {
    width: 120px;
}
header .doc {
    background-color: #54A2C0;
    border-radius: 100px;
    padding: 16px 0px;
    font-weight: 700;
    width: 240px;
    display: inline-block;
    text-align: center;
}
header .inquiry {
    border: 3px solid #373737;
    border-radius: 100px;
    padding: 16px 0px;
    font-weight: 700;
    width: 240px;
    display: inline-block;
    text-align: center;
}

/* mv */
.mv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 72px auto;
}
.mv .logo {
    max-width: 350px;
}
.mv .text {
    margin: 32px 0;
}
.mv .text p:nth-of-type(1) {
    position: relative;
    padding: 8px;
    border-bottom: 3px solid #373737;
    /* border-left: 3px solid #373737; */
    /* border-radius: 0 0 0 20px; */
    font-size: 18px;
    font-weight: 500;
    display: inline-block;
    /* background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgb(255 199 69) 70%);*/
    /* letter-spacing: 2px; */
    margin-bottom: 8px;
}
.mv .text p:nth-of-type(1)::before {
    position: absolute;
    right: 414px;
    bottom: -21px;
    width: 0;
    height: 0;
    content: '';
    border-width: 21px 21px 0 0;
    border-style: solid;
    border-color: #373737 transparent transparent transparent;
}
.mv .text p:nth-of-type(1)::after {
    position: absolute;
    right: 520px;
    bottom: -14px;
    width: 0;
    height: 0;
    content: '';
    /* border-width: 14px 14px 0 0; */
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.mv .text p:nth-of-type(2) {
    font-size: 40px;
    font-weight: 700;
    margin: 16px 0;
    letter-spacing: 12px;
}
.mv .text h1 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5em;
    margin-bottom: 0.5em;
    letter-spacing: 0.5px;
}
.mv .text p:nth-of-type(3) {
    font-size: 12px;
    font-weight: 400;
}
.mv .visual {
    max-width: 350px;
}
.mv .cta {
    justify-content: flex-start;
}

/* solution */
.solution h3 {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 24px;
}
.solution .flex {
    display: flex;
    justify-content: center;
    position: relative;
}
.solution .wrap {
    flex: 1;
}
.solution .flex-item {
    flex: 1;
    border: 2px solid #E3E3E3;
    display: flex;
    justify-content: center;
}
.solution .flex-item p {
    font-weight: 700;
    text-align: center;
}
.solution .problem-wrap {
    display: flex;
}
.solution .arrow {
    width: 40px;
    margin: 0 auto;
    display: block;
}
.solution .answer-wrap {
    border: 2px solid #AFD0DC;
    position: relative;
    padding: 32px 0;
    margin-top: 24px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.solution .answer-wrap::after {
    content: "解決！";
    background-color: #54A2C0;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    border-radius: 100px;
    padding: 8px 16px;
    position: absolute;
    top: -22px;
    left: 187px;
    width: 120px;
    color: #fff;
}
.solution .answer-wrap p {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
}
.solution .text {
    position: absolute;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    top: 424px;
    letter-spacing: 16px;
}
.solution .text p:nth-of-type(2) {
    color: #54A2C0;
}
.solution .flex-item > div {
    padding: 32px 16px;
    height: 300px;
}
.solution .flex-item > div img {
    width: 200px;
}
.solution .wrap:nth-of-type(1) {
    margin-right: 4px;
}
.solution .wrap:nth-of-type(2) {
    margin-left: 4px;
}
.solution .flex-item:nth-of-type(1) {
    margin-right: 4px;
}
.solution .flex-item:nth-of-type(2) {
    margin-left: 4px;
}

/* appeal */
/* .appeal {
    text-align: center;
}
.appeal img {
    max-width: 530px;
}
.appeal .text {
    margin: 24px 0;
}
.appeal p {
    font-weight: 700;
    font-size: 24px;
}
.appeal p:nth-of-type(2) {
    margin: 16px 0;
}
.appeal p:nth-of-type(3) {
    font-size: 16px;
}
.appeal .deco {
    margin-top: 32px;
} */
.appeal {
    display: flex;
    justify-content: center;
    align-items: center;
}
.appeal img {
    max-width: 400px;
}
.appeal .cta {
    justify-content: center;
}
.appeal h2 {
    text-align: left;
}
.appeal .item p:nth-of-type(1) {
    font-size: 24px;
    font-weight: 700;
}
.appeal .item p:nth-of-type(2) {
    font-weight: 500;
    font-size: 14px;
}
.appeal .cta p {
    font-size: 12px !important;
    text-align: center !important;
    font-weight: 500 !important;
}
.appeal .deco {
    margin-top: 32px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 8px;
}
.appeal .item p.sub {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 32px;
}
.appeal .item:nth-of-type(2) {
    border: 2px solid #373737;
    padding: 48px;
}
.appeal .item:nth-of-type(2) p:nth-of-type(1) {
    margin: 16px 0;
    line-height: 1.5em;
}
.appeal .item:nth-of-type(1) {
    margin-right: 16px;
}
.appeal .item:nth-of-type(2) {
    margin-left: 16px;
}
.appeal .text-deco {
    display: inline;
	font-size: 26px;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgb(84 162 192) 70%);
}

/* feature01 */
.feature01 .flex,
.feature02 .flex {
    display: flex;
    justify-content: space-between;
    max-width: 835px;
    margin: 0 auto;
}
.feature01 .num,
.feature02 .num {
    font-weight: 500;
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 5px;
    margin: 0 0 48px;
}
.feature01 .num span,
.feature02 .num span {
    display: block;
    margin: 0;
    font-size: 48px;
    letter-spacing: 0.015em;
    font-weight: 700;
}
.feature01 .imagearea,
.feature02 .imagearea {
    position: static;
    width: 156px;
    margin: 0 auto 48px;
}
.feature01 .textarea .tags,
.feature02 .textarea .tags {
    display: flex;
    align-items: center;
    margin: 0 0 8px;
}
.feature01 .textarea .text,
.feature02 .textarea .text {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 1px;
    font-weight: 700;
}
.feature01 .auto,
.feature02 .auto {
    width: 84px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 2px #474241;
    box-sizing: border-box;
    background: #474241;
    color: #FFFFFF;
}
.feature01 .manual,
.feature02 .manual {
    width: 84px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 2px #474241;
    box-sizing: border-box;
}
.feature01 .or,
.feature02 .or {
    margin: 0 8px;
}
.feature01 h3,
.feature02 h3 {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin: 48px 0 16px 0;
}
.feature01 .notice-text,
.feature02 .notice-text {
    font-weight: 500;
    text-align: center;
    line-height: 1.5em;
}

/* feature03 */
.feature03 .flex {
    display: flex;
    justify-content: space-around;
}
.feature03 .flex .item {
    flex: 1;
    text-align: center;
    border: 2px solid #AFD0DC;
    margin: 4px;
    padding: 32px;
}
.feature03 .flex .item h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}
.feature03 .flex .item p {
    font-weight: 500;
    line-height: 1.5em;
}
.feature03 img {
    width: 156px;
}
.feature03 .notice {
    text-align: right;
    font-size: 12px;
}

/* fee */
.fee .table .flex {
    display: flex;
}
.fee .table .flex > * {
    flex: 1;
    text-align: center;
    padding: 32px 0;
    margin: 4px;
    font-weight: 700;
}
.fee .table .emp {
    font-size: 36px;
}
.fee .table .emp-sub {
    font-size: 24px;
}
.fee .table .name-bp {
    background-color: #AFD0DC;
}
.fee .table .name-bps {
    background-color: #54A2C0;
}
.fee .table .common .flex:nth-child(even) > * {
    background-color: #dee8eb
}
.fee .detail-bp,
.fee .detail-bps {
    display: none;
}
.fee .label {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fee button {
    display: block;
    border: 1px solid #373737;
    width: 100%;
    border-radius: 100px;
    font-size: 16px;
    padding: 8px 0;
    text-align: center;
    margin-left: auto;
    background-color: #fff !important;
}
.fee .table .flex .hidden {
    visibility: hidden;
}
.fee .table .detail-bp .flex:nth-child(odd) > *,
.fee .table .detail-bps .flex:nth-child(odd) > * {
    background-color: #dee8eb
}
.fee button {
    padding: 8px 0 !important;
}
.fee .detail-bps .flex .text {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fee .detail-bp .flex .fix,
.fee .detail-bps .flex .fix{
    flex-direction: column;
    text-align: left;
    align-items: baseline;
    font-size: 12px;
}
.fee .detail-bp .flex .fix span,
.fee .detail-bps .flex .fix span {
    font-size: 10px;
}

/* flow */
.flow .flex {
    display: flex;
    justify-content: center;
}
.flow .step {
    font-weight: 500;
    letter-spacing: 2px;
}
.flow .num {
    font-size: 40px;
    margin-top: -10px;
    font-weight: 700;
}
.flow .flex .item .text {
    font-size: 24px;
    font-weight: 700;
    margin-top: 24px;
}
.flow .flex img {
    width: 24px;
    margin: 0 32px;
}

/* footer */
footer {
    background-color: #54A2C0;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 128px;
}


/* nonmem */
header .doc {
    color: #fff;
}
.cta .doc {
    color: #fff;
}
.feature01 .item img,
.feature02 .item img {
    width: 200px;
}
.feature01 .flex-wrap,
.feature02 .flex-wrap {
    display: flex;
    flex-direction: column;
}
.feature01 .flex-wrap .flex,
.feature02 .flex-wrap .flex {
    display: flex;
    justify-content: center;
}
.feature01 .step,
.feature02 .step {
    font-weight: 500;
    letter-spacing: 2px;
}
.feature01 .num,
.feature02 .num {
    font-size: 40px;
    /* margin-top: -10px; */
    font-weight: 700;
}
.feature01 .img-wrap,
.feature02 .img-wrap {
    text-align: center;
    height: 210px;
}
.feature01 .text,
.feature02 .text {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 1px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
}
.feature01 .text-sub,
.feature02 .text-sub {
    font-weight: 500;
    text-align: center;
    line-height: 1.5em;
}
.feature01 .item:nth-of-type(2) img,
.feature02 .item:nth-of-type(2) img {
    padding: 32px;
}
.feature01 .item,
.feature02 .item {
    margin: 16px;
    flex: 1;
}
.sp {
    display: none !important;
}
.pc {
    display: block !important;
}
.cta-sp {
    display: none !important;
}
.cta-pc {
    display: inline-block !important;
}
.gm-fee {
    font-weight: 700;
    margin-right: 16px;
}
@media screen and (max-width: 768px) {
    .sp {
        display: block !important;
    }
    .pc {
        display: none !important;
    }
    .cta-sp {
        display: inline-block !important;
    }
    .cta-pc {
        display: none !important;
    }
    .contents {
        width: 90%;
    }
    header .doc {
        background-color: #54A2C0;
        border-radius: 100px;
        padding: 8px 0px;
        font-weight: 700;
        width: 100px;
        display: inline-block;
        text-align: center;
        font-size: 12px;
        border: solid 3px #54A2C0;
    }
    header .inquiry {
        border: 3px solid #373737;
        border-radius: 100px;
        padding: 8px 0px;
        font-weight: 700;
        width: 100px;
        display: inline-block;
        text-align: center;
        font-size: 12px;
    }
    header {
        padding: 8px;
    }
    header img {
        width: 75px;
    }
    .gm-fee {
        font-weight: 700;
        margin-right: 4px;
        font-size: 12px;
    }
    .mv {
        flex-direction: column;
    }
    .mv .cta {
        flex-direction: column;
        align-items: center;
    }
    .cta .doc {
        margin-right: 0;
    }
    .cta div {
        margin-left: 0;
        margin-top: 8px;
    }
    .solution .flex {
        flex-direction: column;
    }
    .solution .flex-item > div {
        height: initial;
    }
    .solution .text {
        display: none;
    }
    .solution .answer-wrap::after {
        left: 0;
        transform: translateX(89%);
    }
    .solution .wrap:nth-of-type(1) {
        margin-right: 0;
    }
    .solution .wrap:nth-of-type(2) {
        margin-left: 0;
        margin-top: 32px;
    }
    .solution .problem-wrap {
        flex-direction: column;
    }
    .solution .flex-item:nth-of-type(1) {
        margin-right: 0;
    }
    .solution .flex-item:nth-of-type(2) {
        margin-left: 0;
    }
    .solution .flex-item:nth-of-type(2) {
        margin-top: -2px;
    }
    .solution .answer-wrap p {
        font-size: 24px;
    }
    .appeal {
        flex-direction: column;
    }
    .appeal .item:nth-of-type(1) {
        margin-right: 0;
    }
    .appeal .item:nth-of-type(2) {
        margin-left: 0;
    }
    .appeal .cta {
        flex-direction: column;
        align-items: center;
    }
    .appeal .inquiry {
        margin-top: 8px;
    }
    .appeal .item:nth-of-type(2) {
        padding: 8px;
        margin-top: 16px;
    }
    .feature01 .flex-wrap .flex,
    .feature02 .flex-wrap .flex {
        flex-direction: column;
    }
    .flow .flex {
        flex-direction: column;
    }
    .flow .flex img {
        display: none;
    }
    .flow .item .text {
        text-align: center;
    }
    .flow .item {
        border: 2px solid #373737;
        padding: 8px;
        margin: 8px;
    }
    #is-show-bp-sp,
    #is-show-bps-sp {
        margin-bottom: 32px;
    }
    .cta {
        flex-direction: column;
        align-items: center;
    }
}