@charset "utf-8";

/** ダイアログ */
dialog {
	min-width: 50%;
	padding-block: var(--m3);
	padding-inline: var(--m2);
	border-radius: calc(12 * var(--px));
	background: white;
	text-align: center;
}
dialog .headline {
	font-size: 24px;
	font-weight: 500;
}
dialog img.badge {
	margin-block: var(--m2) 0;
	width: calc(150 * var(--px));
	margin-inline: auto;
}
dialog img.code {
	margin-inline: auto;
}
dialog .nav-close {
	margin-top: var(--m2);
	margin-inline: auto;
}
dialog .nav-close::before {
	content: "×";
	display: inline-block;
	font-size: 24px;
	vertical-align: inherit;
	margin-right: 0.5ic;
}
dialog::backdrop {
	background: var(--dialog-backdrop, rgb(0 0 0 / 0.5));
}

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



/** FV   
-------------------------------------------------------------------- */
section#hero {
    height: calc(768 * var(--px));
}
section#hero::before {
    --bubble-size: calc(882 * var(--px));
    --bubble-color: var(--blue);
    --bubble-opacity: 1;
    left: 0;
    top: 0;
}
section#hero::after {
    --bubble-size: calc(686 * var(--px));
    --bubble-color: var(--orange);
    --bubble-opacity: 1;
    left: 100%;
    top: 100%;
}

section#hero .wrap {
    padding-top: calc(var(--header-height) + var(--m7));
}

/* H1 */
section#hero .tagline {
    line-height: 1.5;
}
section#hero .tagline :is(.firstline, .secondline) {
    font-weight: 700;
    display: block;
    width: fit-content;
    padding-inline: 0.3ic;
    transform: skew(-5deg);
    position: relative;
    z-index: 0;
}

section#hero .tagline .firstline {
    color: white;
    font-size: 55px;
    letter-spacing: 0.15ic;
    transition: var(--transition);
}
section#hero .tagline .firstline::after {
    background: var(--orange);
}
section#hero .tagline .secondline {
    margin-top: 0.3lh;
    font-size: 40px;
    letter-spacing: 0.25ic;
    transition: var(--transition);
}

section#hero .tagline .secondline::after {
    background: white;
}
section#hero .tagline :is(.firstline, .secondline)::after {
    display: block;
    width: 100%;
    height: 100%;
    transform: skew(5deg);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

/* ポイント */
section#hero ul.summary {
    margin-top: var(--m2);
    display: flex;
    align-items: stretch;
    gap: calc(12 * var(--px));
    translate: calc(-24 * var(--px));
}

section#hero ul.summary li {
    flex: 0 0 auto;
    height: calc(182 * var(--px));
    padding-top: var(--m2);
    padding-inline: calc(24 * var(--px)) calc(27 * var(--px));
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 0;
    --shadow: var(--blue);
}

section#hero ul.summary li:nth-child(even) {
    --shadow: var(--orange);
}
section#hero ul.summary li::before {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: calc(12 * var(--px));
    background: white;
    box-shadow: var(--m) var(--m) 0 0 var(--shadow);
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skewX(-15deg);
}
section#hero ul.summary li:not(:first-child)::after {
    content: "×";
    display: block;
    width: fit-content;
    line-height: 1;
    font-size: 42px;
    font-weight: 700;
    position: absolute;
    right: 100%;
    top: 50%;
    translate: 30% -50%;
    transition: var(--transition);
}
section#hero ul.summary li:last-child::after {
    content: "＝";
}
section#hero ul.summary .icon {
    width: calc(54 * var(--px));
    transition: var(--transition);
}
section#hero ul.summary .point {
    margin-top: 0.3lh;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: var(--transition);
}
section#hero .nav-contact {
    margin-top: var(--m4);
    font-size: 24px;
}

/* 右側 */
section#hero img.mock-up {
    width: calc(520 * var(--px));
    position: absolute;
    left: 53%;
    top: calc(175 * var(--px));
}


section#hero .benefit {
    width: calc(352 * var(--px));
    height: calc(338 * var(--px));
    right: calc(-1 * var(--m7));
    bottom: var(--m6);
    transition: var(--transition);
}
section#hero .benefit :is(.character01, .character02) {
    width: calc(214 * var(--px));
    position: absolute;
}
section#hero .character01 {
    right: 0;
    bottom: 0;
    z-index: 2;
}
section#hero .character02 {
    left: 0;
    bottom: calc(20 * var(--px));
    z-index: 1;
}
section#hero .download {
    text-align: center;
    position: absolute;
    right: calc(-1 * var(--m));
    top: calc(var(--header-height) + var(--m3));
    transition: var(--transition);
}
section#hero .download a {
    margin-top: var(--m);
    width: calc(180 * var(--px));
}
@media screen and (min-width: 768px) and (max-width: 1320px) {
    section#hero .tagline .firstline {
        font-size: calc(66 * clamp(0.5px, (100vw / var(--bw)), 1.2px));
    }
    section#hero .tagline .secondline {
        font-size: calc(48 * clamp(0.5px, (100vw / var(--bw)), 1.2px));
    }
    section#hero ul.summary li:not(:first-child)::after {
        font-size: calc(42 * var(--px));
    }
    section#hero ul.summary .icon {
        width: calc(54 * var(--px));
    }
    section#hero ul.summary .point {
        font-size: calc(24 * var(--px));
    }
    section#hero .benefit {
        right: 0;
    }
    section#hero .download {
        right: var(--m6);
    }
}

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

@media screen and (max-width: 767px) {
    section#hero {
        height: auto;
    }
    section#hero::before {
        --bubble-size: calc(420 * var(--px));
    }
    section#hero::after {
        --bubble-size: calc(360 * var(--px));
    }
    section#hero .wrap {
        padding-top: calc(var(--header-height) + var(--m2));
    }
    section#hero .tagline .firstline {
        font-size: calc(36 * var(--px));
    }
    section#hero .tagline .secondline {
        font-size: calc(38 * var(--px));
        letter-spacing: 0.03ic;
    }
    section#hero ul.summary {
        margin-top: var(--m);
        width: 50%;
        flex-flow: column;
        translate: none;
        gap: var(--m2);
    }
    section#hero ul.summary li {
        height: auto;
        padding-block: 0.5lh;
        padding-inline: 0.5ic;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    section#hero ul.summary li:not(:first-child)::after {
        font-size: calc(24 * var(--px));
        right: auto;
        left: 50%;
        top: auto;
        bottom: 94%;
        translate: -50% 0;
    }
    section#hero ul.summary li:last-child::after {
        rotate: 90deg;
    }
    section#hero ul.summary .icon {
        width: calc(30 * var(--px));
        margin-right: 0.5ic;
    }
    section#hero ul.summary .point {
        font-size: calc(18 * var(--px));
    }
    section#hero .nav-contact {
        margin-top: var(--m2);
        width: 100%;
        font-size: calc(21 * var(--px));
    }
    section#hero img.mock-up {
        width: 90%;
        left: 43%;
        top: calc(280 * var(--px));
    }

    section#hero .benefit {
        margin-top: var(--m);
        width: 100%;
        height: auto;
        position: static;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    section#hero .benefit .one-liner {
        flex: 0 0 100%;
    }
    section#hero .benefit :is(.character01, .character02) {
        width: 40%;
        position: static;
    }
    section#hero .download {
        margin-top: var(--m);
        position: static;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--m);
    }
    section#hero .download p {
        flex: 0 0 100%;
        text-align: center;
    }
    section#hero .download a {
        margin-top: 0;
        width: auto;
        flex: 1 0 40%;
    }
}






/** 25アプリとは   
-------------------------------------------------------------------- */
section#overview::before {
    --bubble-size: calc(686 * var(--px));
    --bubble-color: var(--orange);
    left: 100%;
    top: 0;
}
section#overview .label {
    line-height: 1.75;
}
section#overview .label .firstline {
    font-size: 42px;
    color: var(--blue);
}
section#overview .label .secondline {
    font-size: 30px;
    --marker-text-color: var(--black);
}
section#overview .label + p {
    text-align: justify;
}
section#overview .image {
    margin-top: var(--m2);
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#overview::before {
        --bubble-size: calc(360 * var(--px));
    }
    section#overview .label .firstline {
        font-size: calc(36 * var(--px));
    }
    section#overview .label .secondline {
        display: block;
        font-size: calc(21 * var(--px));
        line-height: 1.5;
    }
}




/** 25アプリで出来ること   
-------------------------------------------------------------------- */
section#feature {
    background: var(--light-blue);
}
section#feature::before {
    --bubble-size: calc(686 * var(--px));
    --bubble-color: var(--blue);
    left: 0;
    top: 0;
}

section#feature .movie {
    margin-top: var(--m6);
    max-width: var(--middle-width);
}
section#feature .container {
    margin-top: var(--m10);
    max-width: var(--compact-width);
}
section#feature .block {
    padding-inline: var(--m3);
    border-radius: calc(12 * var(--px));
    background: white;
    box-shadow: inset 0 0 0 1px var(--blue);
    margin-bottom: calc(240 * var(--px));
    position: relative;
}
section#feature .numbering {
    font-size: 68px;
    line-height: 1.3;
    color: var(--blue);
    text-align: center;

    width: calc(70 * var(--px));
    height: 1lh;
    border-radius: calc(6 * var(--px));
    background: white;
    box-shadow: calc(9 * var(--px)) calc(9 * var(--px)) 0 var(--blue);
    margin-inline: auto;

    display: grid;
    place-items: center;

    transform: skewX(-15deg) translateY(-50%);
}
section#feature .headline {
    font-size: 21px;
    text-align: center;
}
section#feature .headline + p {
    text-align: center;
}
section#feature .headline strong {
    font-size: 30px;
}
section#feature .image {
    width: calc(690 * var(--px));
    margin-inline: auto;
    margin-top: calc(-1 * var(--m5));
    translate: 0 var(--m7);
}
section#feature .benefit {
    width: max-content;
    min-width: 175px;
    max-width: 210px;
    padding-block: var(--m);
    padding-inline: calc(21 * var(--px));
    border-radius: calc(12 * var(--px));
    background: var(--orange);

    color: white;

    position: absolute;
    left: 100%;
    top: 50%;
    translate: calc(-1 * var(--m3)) -50%;
    z-index: 1;
}
section#feature .benefit::before {
    /* 丸 */
    display: block;
    width: calc(18 * var(--px));
    height: calc(18 * var(--px));
    border-radius: calc(18 * var(--px));
    box-shadow: inset 0 0 0 calc(3 * var(--px)) var(--orange);
    background: white;

    position: absolute;
    left: var(--m3);
    top: calc(-1 * var(--m6));
    translate: -50% 0;
    z-index: 2;
}
section#feature .benefit::after {
    /* 点線 */
    display: block;
    width: calc(50% - var(--m3));
    height: var(--m6);
    border-top: 2px dashed var(--orange);
    border-right: 2px dashed var(--orange);

    position: absolute;
    right: 50%;
    bottom: calc(100% - calc(9 * var(--px)));
    z-index: 1;
}
section#feature .point {
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5ic;
}
section#feature .point::after {
    display: block;
    flex: 1 0 auto;
    height: 1px;
    background: white;
}
section#feature .one-liner {
    margin-top: 0.3lh;
    letter-spacing: 0;
    font-size: 16px;
    line-height: 1.5;
}

section#feature-round-up::before {
    --bubble-size: calc(521 * var(--px));
    --bubble-color: var(--blue);
    left: 100%;
    top: 0;
}
section#feature-round-up::after {
    --bubble-size: calc(489 * var(--px));
    --bubble-color: var(--orange);
    left: 0;
    top: 100%;
}

section#feature-round-up .container {
    display: flex;
    gap: var(--m4);
}
section#feature-round-up .wrap {
    max-width: var(--middle-width);
}
section#feature-round-up .image {
    flex: 0 0 auto;
    width: calc(200 * var(--px));
}
section#feature-round-up .text {
    padding-top: var(--m2);
}
section#feature-round-up .headline {
    font-size: 36px;
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#feature::before {
        --bubble-size: calc(420 * var(--px));
    }
    section#feature .movie {
        margin-top: var(--m3);
    }
    section#feature .container {
        margin-top: var(--m4);
    }
    section#feature .block {
        padding-inline: var(--m2);
        margin-bottom: calc(300 * var(--px));
    }
    section#feature .numbering {
        font-size: calc(40 * var(--px));
        width: calc(60 * var(--px));
    }
    section#feature .headline {
        font-size: calc(18 * var(--px));
    }
    section#feature .headline strong {
        font-size: calc(22 * var(--px));
    }
    section#feature .headline + p {
        text-align: justify;
    }
    section#feature .benefit {
        left: 50%;
        top: calc(100% + var(--m8));
        translate: -50% 0;
    }
    section#feature .benefit::before,
    section#feature .benefit::after {
        display: none;
    }
    section#feature-round-up::before {
        --bubble-size: calc(360 * var(--px));
    }
    section#feature-round-up::after {
        --bubble-size: calc(300 * var(--px));
    }
    section#feature-round-up .container {
        display: block;
        position: relative;
    }
    section#feature-round-up .image {
        width: 40%;
        margin-inline: calc(-1 * var(--m));
    }
    section#feature-round-up .headline {
        font-size: calc(24 * var(--px));
        position: absolute;
        top: calc(50 * var(--px));
        right: 0;
    }
}



/** 導入メリット   
-------------------------------------------------------------------- */
section#merit::before {
    --bubble-size: calc(686 * var(--px));
    --bubble-color: var(--orange);
    left: 100%;
    top: 0;
}

section#merit .container {
    margin-top: var(--m4);
    max-width: var(--standard-width);
    display: flex;
    align-items: flex-start;
    gap: var(--m4);
}
section#merit .container:first-of-type {
    padding-left: var(--m8);
}
section#merit .point {
    width: calc(235 * var(--px));
}
section#merit .image {
    width: calc(390 * var(--px));
    border-radius: calc(12 * var(--px));
}
section#merit .nav-merit {
    margin-top: var(--m6);
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#merit {
        overflow-y: clip;
    }
    section#merit::before {
        --bubble-size: calc(420 * var(--px));
    }
    section#merit::after {
        --bubble-size: calc(420 * var(--px));
        left: 0;
        top: 100%;
    }
    section#merit .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--m);
    }
    section#merit .container:first-of-type {
        margin-top: var(--m2);
        padding-left: var(--m);
    }
    section#merit .point {
        flex: 1 0 auto;
        width: 40%;
    }
    section#merit .image {
        display: none;
    }
    section#merit .nav-merit {
        margin-top: var(--m4);
    }
}




/** お悩み   
-------------------------------------------------------------------- */
section#problem {
    background: var(--light-blue);
}
section#problem::before {
    --bubble-size: calc(686 * var(--px));
    --bubble-color: var(--blue);
    left: 0;
    top: 0;
}
section#problem::after {
    --bubble-size: calc(686 * var(--px));
    --bubble-color: var(--blue);
    left: 100%;
    top: 100%;
}

section#problem .heading {
    width: fit-content;
    margin-inline: auto;
    position: relative;
}
section#problem .label {
    width: fit-content;
}
section#problem .character {
    width: calc(108 * var(--px));
    position: absolute;
    left: 105%;
    top: calc(-1 * var(--m7));
}
section#problem .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--m4);
}
section#problem .block {
    flex: 0 0 calc(320 * var(--px));
    margin-top: var(--m8);
    padding-block: var(--m8) var(--m3);
    border-radius: calc(12 * var(--px));
    background: white;
    position: relative;
}
section#problem .image {
    position: absolute;
    left: 0;
    top: 0;
    translate: 0 -50%;
}
section#problem .headline {
    margin-top: var(--m2);
    margin-inline: var(--m2);
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    --marker-text-color: var(--black);
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#problem {
        overflow-y: clip;
    }
    section#problem::before,
    section#problem::after {
        --bubble-size: calc(420 * var(--px));
    }
    section#problem .heading {
        margin-left: var(--m2);
    }
    section#problem .label {
        text-align: left;
    }
    section#problem .character {
        width: calc(80 * var(--px));
        top: 50%;
        translate: 0 -60%;
    }
    section#problem .container {
        margin-top: var(--m3);
    }
}





/** 解決   
-------------------------------------------------------------------- */
section#solution {
    background: var(--blue);
    overflow-x: clip;
}
section#solution::after {
    --bubble-size: calc(686 * var(--px));
    --bubble-color: var(--orange);
    --bubble-opacity: 1;
    left: 100%;
    top: 100%;
    clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);
}

section#solution .heading {
    width: fit-content;
    margin-inline: auto;
    position: relative;
}
section#solution .label {
    width: fit-content;
    color: white;
	text-decoration: underline;
	text-underline-offset: 9px;
	text-align: center;
}
section#solution .character {
    width: calc(275 * var(--px));
    position: absolute;
    left: 105%;
    top: calc(-1 * var(--m9));
}
section#solution .container {
    margin-top: var(--m4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--m4);
}
section#solution .block {
    flex: 1 0 40%;
}
section#solution .image {
    border-radius: calc(21 * var(--px)) calc(21 * var(--px)) 0 0;
}
section#solution .text {
    margin-top: calc(-1 * var(--m4));
    min-height: var(--m10);
    padding-block: var(--m2);
    padding-inline: var(--m2);
    border-radius: calc(12 * var(--px));
    background: white;
    display: grid;
    place-items: center;
    position: relative;
}
section#solution .headline {
    font-size: 24px;
    text-align: center;
}
section#solution .block.cta {
    padding-block: var(--m2);
    padding-inline: var(--m3);
    border-radius: calc(12 * var(--px));
    background: white;
}
section#solution .cta .tagline {
    margin-bottom: 0.5lh;
}
section#solution .cta .release {
    margin-block: var(--m2);
}
section#solution .cta .nav-contact {
    margin-inline: auto;
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#solution::after {
        --bubble-size: calc(420 * var(--px));
    }
    section#solution .heading {
        margin-right: var(--m);
    }
    section#solution .label {
        text-align: left;
    }
    section#solution .character {
        width: calc(180 * var(--px));
        left: auto;
        right: 65%;
        top: -15%;
        translate: 0 -50%;
    }
    section#solution .container {
        margin-top: var(--m3);
    }
    section#solution .block {
        flex: 0 0 100%;
    }
    section#solution .headline {
        font-size: calc(21 * var(--px));
    }
    section#solution .block.cta {
        padding-inline: var(--m2);
    }
    section#solution .cta .nav-contact {
        width: 100%;
    }
}






/** 25アプリがあれば   
-------------------------------------------------------------------- */
section#solution-round-up {}
section#solution-round-up::after {
    --bubble-size: calc(686 * var(--px));
    --bubble-color: var(--orange);
    left: 100%;
    top: 0;
}

section#solution-round-up .container {
    margin-top: var(--m4);
    display: flex;
    gap: var(--m4);
}
section#solution-round-up .block {
    flex: 1 0 30%;
    text-align: center;
}
section#solution-round-up .user {
    margin-block: 0.5lh 0.3lh;
    color: var(--blue);
    font-size: 30px;
    font-weight: 700;
}
section#solution-round-up .user + p {
    font-size: 20px;
    --marker-text-color: var(--black);
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#solution-round-up::after {
        --bubble-size: calc(420 * var(--px));
    }
    section#solution-round-up .container {
        margin-top: var(--m3);
        display: block;
    }
    section#solution-round-up .block + .block {
        margin-top: var(--m3);
    }
    section#solution-round-up .image {
        width: 60%;
        margin-inline: auto;
    }
    section#solution-round-up .user {
        font-size: calc(21 * var(--px));
    }
    section#solution-round-up .user + p {
        font-size: calc(18 * var(--px));
        text-align: center;
    }
}






/** 活用事例
-------------------------------------------------------------------- */
section#case {
    background: var(--light-blue);
}
section#case::before {
    --bubble-size: calc(686 * var(--px));
    --bubble-color: var(--blue);
    left: 0;
    top: 0;
}
section#case::after {
    --bubble-size: calc(686 * var(--px));
    left: 100%;
    top: 100%;
}

section#case .container {
    margin-top: var(--m4);
}
section#case .block {
    border-radius: calc(12 * var(--px));
    background: white;
    display: flex;
    align-items: center;
}
section#case .block + .block {
    margin-top: var(--m4);
}
section#case .block:nth-child(even) {
    flex-direction: row-reverse;
    --numbering-color: var(--orange);
}
section#case .image {
    flex: 0 0 auto;
    width: calc(360 * var(--px));
    border-radius: calc(21 * var(--px));
}
section#case .text {
    padding-inline: var(--m4);
    
}
section#case .numbering {
    display: inline-block;
    padding-block: 0.1lh;
    padding-inline: 1ic;
    background: var(--numbering-color, var(--blue));
    translate: 0 -calc(5 * var(--px));
    font-size: 13px;
    font-weight: 500;
    color: white;
    letter-spacing: 0.1em;
}
section#case .headline {
    display: inline-block;
    margin-left: 0.5ic;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0.5lh;
}
section#case .note {
    margin-top: var(--m);
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#case {
        overflow-y: clip;
    }
    section#case::before,
    section#case::after {
        --bubble-size: calc(420 * var(--px));
    }
    section#case .container {
        margin-top: var(--m3);
    }
    section#case .block {
        display: block;
    }
    section#case .block + .block {
        margin-top: var(--m2);
    }
    section#case .text {
        padding-block: var(--m2);
        padding-inline: var(--m2);
    }
    section#case .numbering {
        display: block;
        width: fit-content;
        margin-inline: auto;
        margin-bottom: 0.5lh;
    }
    section#case .headline {
        display: block;
        margin-left: 0;
        font-size: calc(21 * var(--px));
        text-align: center;
    }
}






/** 料金プラン
-------------------------------------------------------------------- */
section#plan {
    padding-block: var(--m8) 0;
}
section#plan::before {
    --bubble-size: calc(420 * var(--px));
    --bubble-color: var(--blue);
    left: 100%;
    top: 0;
}

section#plan .character {
    margin-top: calc(-80 * var(--px));
    margin-left: var(--m4);
    width: calc(250 * var(--px));
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#plan {
        padding-top: var(--m3);
        overflow-y: clip;
    }
    section#plan .label {
        font-size: calc(21 * var(--px));
    }
    section#plan .character {
        margin-top: var(--m2);
        margin-inline: auto;
        width: calc(150 * var(--px));
    }
}