@charset "utf-8";

/** AIO */
:root {
    --marker: #ffc95e;
    --px: min((100vw / var(--bw)), 1px);
}
@media screen and (min-width: 768px) {
    :root {
        --bw: 1400;
    }
}
@media screen and (max-width: 767px) {
    :root {
        --bw: 375;
    }
}
body {
    font-family:"Noto Sans JP", -apple-system, blinkMacSystemFont, "Helvetica Neue", "Segoe UI",
		"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.marker {
    background-image: linear-gradient(to top, var(--marker) 40%, transparent 40%);
}



/** 汎用 */
:where(section):not(#billboard) h2 {
    color: var(--blue);
    font-size: calc(47 * var(--px));
    font-weight: 700;
    text-align: center;
}

section#solution h2{
    color: #fff;
}

:where(section):not(#billboard) h2 .small {
    font-size: var(--fs30);
}
:where(section):not(#billboard) h2 strong {
    font-size: calc(55 * var(--px));
    font-weight: 800;
}
section#cta h2 {
    font-size: calc(26 * var(--px));
    color: white;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    :where(section):not(#billboard) {
        padding-block: calc(var(--mb) * 4);
    }
    :where(section):not(#billboard) h2 {
        font-size: var(--fs30);
        letter-spacing: 0;
    }
    :where(section):not(#billboard) h2 .small {
        font-size: var(--fs22);
    }
    :where(section):not(#billboard) h2 strong {
        font-size: calc(42 * var(--px));
    }
    section#cta h2 {
        font-size: var(--fs22);
        margin-bottom: calc(var(--mb) * 4);
        position: relative;
    }
    section#cta h2::after {
        display: block;
        width: calc(27 * var(--px));
        height: calc(13 * var(--px));
        background: white;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        position: absolute;
        left: 50%;
        top: calc(100% + var(--mb) * 2);
        translate: -50% -50%;
    }
}


/** HOME＞FV */
.website-summary {
    padding-block: 0.3lh;
    background: var(--cloudy);
    line-height: 1.5;
}
body#home #billboard .tagline .text {
    padding-left: calc(33 * var(--px));
    font-size: calc(45 * var(--px));
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.2ic;
}
body#home #billboard .tagline .first {
    font-size: calc(67 * var(--px));
}
body#home #billboard .tagline .second {
    font-size: calc(63 * var(--px));
    font-weight: 800;
    color: var(--blue);
    display: inline-block;
    line-height: 1.3;
    margin-top: 0.1lh;
    padding-inline: 0.2ic 0;
    border-radius: 3px;
    background: white;
    margin-right: 0.2ic;
}
body#home #billboard .tagline .third {
    font-size: calc(56 * var(--px));
    letter-spacing: 0;
}
body#home #billboard .badge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(240 * var(--px));
    height: calc(240 * var(--px));
    box-sizing: border-box;
    border-radius: calc(240 * var(--px));
    box-shadow: inset 0 0 0 calc(5 * var(--px)) var(--blue);
    background: white;
    padding-block: calc(29 * var(--px));
    padding-inline: calc(10 * var(--px));
    color: var(--blue);
    text-align: center;
    letter-spacing: 0;
    line-height: 1.5;
}
body#home #billboard .badge span {
    font-size: var(--fs22);
}
body#home #billboard .badge strong {
    font-size: var(--fs30);
    line-height: 1.2;
}
body#home #billboard ul.points {
    position: absolute;
    z-index: 10;
    list-style: none;
}
body#home #billboard ul.points li {
    width: fit-content;
    padding-inline: 2ic 0.5ic;
    background: rgb(from #005bb0 r g b / 0.9);
    font-size: var(--fs22);
    font-weight: 800;
    color: white;
    
    position: relative;
}
body#home #billboard ul.points li::before {
    display: block;
    width: 1ic;
    height: 1ic;
    background: var(--marker);
    clip-path: polygon(0 40.5968%, 20.3593% 29.8183%, 45.509% 57.3632%, 78.4431% 15.4471%, 100% 35.2076%, 46.7066% 81.9141%);
    position: absolute;
    left: 0.5ic;
    top: calc((1lh - 1ic) / 2);
}
body#home #billboard ul.points li + li {
    margin-top: 0.2lh;
}

@media screen and (min-width: 768px) {
    body#home {
        --website-summary-height: calc(var(--mb) * 4);
    }
    #header {
        margin-top: var(--website-summary-height, 0);
    }
    .website-summary {
        color: var(--blue);
        text-align: center;
        font-size: var(--fs24);
        width: 100%;
        height: var(--website-summary-height);
        position: absolute;
        left: 0;
        top: calc(-1 * var(--website-summary-height));
        z-index: 100;
    }
    body#home #billboard .tagline {
        margin-top: calc(127 * var(--px));
    }
    body#home #billboard .badge {
        transform: translate(min(32.14vw, 450px), max(-21.42vw, -300px));
    }
    body#home #billboard ul.points {
        left: 50%;
        top: 50%;
        transform: translate(min(18.57vw, 260px), min(9.28vw, 130px));
    }
}
@media screen and (max-width: 767px) {
    .website-summary {
        padding-inline: var(--mi);
        padding-bottom: 0.5lh;
        background: var(--glass);
        color: white;
        font-size: calc(14 * var(--px));
    }
    body#home #billboard,
    body#home #billboard .heading {
        padding-top: 0;
    }
    body#home #billboard .heading {
        position: static;
        padding-bottom: var(--mb);
    }
    body#home #billboard .heading p {
        font-size: 90%;
        margin-bottom: 0;
    }
    body#home #billboard .tagline {
        margin-top: 0;
    }
    body#home #billboard .tagline .text {
        font-size: calc(28 * var(--px));
    }
    body#home #billboard .tagline .first {
        font-size: calc(52 * var(--px));
    }
    body#home #billboard .tagline .second {
        font-size: calc(47 * var(--px));
    }
    body#home #billboard .tagline .third {
        font-size: calc(44 * var(--px));
    }
    body#home #billboard .tagline picture {
        margin-top: calc(-120 * var(--px));
    }
    body#home #billboard .badge {
        width: calc(180 * var(--px));
        height: calc(180 * var(--px));
        border-radius: calc(180 * var(--px));
        bottom: min(37.33vw, 140px);
    }
    body#home #billboard .badge span {
        font-size: var(--fs16);
    }
    body#home #billboard .badge strong {
        font-size: var(--fs18);
    }
    body#home #billboard ul.points {
        left: 0;
        bottom: 0;
        padding-inline-start: var(--mi);
    }
    body#home #billboard ul.points li {
        font-size: var(--fs20);
        font-weight: 600;
        letter-spacing: 0.15ic;
    }
    body#home #billboard .image {
        margin-top: calc(-1 * var(--mb) * 4);
    }
}


/** HOME＞サバケルとは */
#about .summary:not(picture) {
    padding-block: calc(var(--mb) * 3);
    padding-inline: calc(var(--mi) * 3);
    background: var(--blue);
    margin-inline: auto;
    display: flex;
    justify-content: center;
    gap: var(--mi);
    font-weight: 800;
    color: white;
}
#about .summary .heading h3 {
    font-size: var(--fs20);
    color: var(--blue);
    text-align: center;
    width: fit-content;
    box-sizing: content-box;
    padding-block: 0.1lh;
    padding-inline: 1ic;
    background: white;
    margin-bottom: 0.5lh;
}
#about .summary .heading p {
    font-size: var(--fs18);
}
#about .point h4 {
    line-height: 1.5;
}
#about .point h4::before {
    content: "1";
    display: block;
    width: 1lh;
    height: 1lh;
    border-radius: 1lh;
    background: white;
    font-size: 80%;
    color: var(--blue);
    letter-spacing: 0;
    text-align: center;
}
#about .point + .point h4::before {
    content: "2";
}

@media screen and (min-width: 768px) {
    #about .heading {
        flex: 0 0 24%;
    }
    #about .point img {
        width: calc(257 * var(--px));
    }
    #about .point {
        flex: 1 0 35%;
        display: flex;
        align-items: center;
        gap: var(--mi);
    }
}
@media screen and (max-width: 767px) {
    #about h2 {
        margin-bottom: calc(var(--mb) * 2);
    }
    #about .summary:not(picture) {
        padding-block: calc(var(--mb) * 2);
        padding-inline: calc(var(--mi) * 2);
        flex-direction: column;
    }
    #about .summary .heading h3 {
        width: 100%;
        box-sizing: border-box;
        padding-inline: 0;
        font-size: var(--fs24);
    }
    #about .summary .heading p {
        font-size: var(--fs22);
    }
    #about .point {
        margin-top: var(--mb);
    }
    #about .point h4 {
        margin-top: 0.5lh;
        font-size: var(--fs18);
        padding-left: 1.3lh;
        position: relative;
    }
    #about .point h4::before {
        position: absolute;
        left: 0;
        top: 0.625lh;
        translate: 0 -50%;
    }
    #about .point img {
        width: 80%;
        margin-inline: auto;
    }
}


/** HOME＞導入事例 */
#case-ninushi {
    --case-color: var(--orange);
}
#case-3pl {
    --case-color: var(--blue);
}
#case-souko {
    --case-color: var(--sky);
}
#case .block {
    display: flex;
    flex-direction: column;
}
#case .block h3 {
    font-size: var(--fs24);
    color: white;
    text-align: center;
    padding-block: 0.2lh;
    border-radius: 5px;
    background: var(--case-color);
    margin-bottom: calc(var(--mb) * 2);
    position: relative;
}
#case .block h3 strong {
    font-size: 120%;
}
#case .block h3::after {
    content: "";
    display: block;
    width: calc(30 * var(--px));
    height: calc(18 * var(--px));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: var(--case-color);
    position: absolute;
    left: 50%;
    top: 100%;
    translate: -50% -1px;
}
#case ul {
    list-style: none;
    padding-inline-start: 0;
    padding-bottom: var(--mb);
}
#case li {
    font-size: var(--fs22);
    font-weight: 700;
    letter-spacing: 0;
    padding-inline-start: 1.3lh;
    position: relative;
}
#case li + li {
    margin-top: calc(var(--mb) * 2);
}
#case li svg {
    height: 1lh;
    fill: var(--case-color);
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
}
#case .block .btn {
    margin-top: auto;
}

@media screen and (max-width: 767px) {
    #case h2 strong {
        font-size: calc(32 * var(--px));
    }
    #case h2 strong span {
        font-size: var(--fs20);
    }
    #case .block h3 {
        padding-block: 0.1lh;
    }
}








/** 下部＞FV */
body:not(#home) #billboard .label {
    font-size: var(--fs27);
    width: fit-content;
    height: auto;
    padding-inline: 0.5ic;
    border: 1px solid currentColor;
    margin-bottom: 0.5lh;
}
#billboard .tagline strong {
    font-weight: inherit;
}
body:not(#home) #billboard .tagline {
    font-size: calc(33 * var(--px));
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2ic;
    
}

body#page-3pl #billboard .tagline {
    letter-spacing: 0;
}
body:not(#home) #billboard .tagline strong {
    font-size: calc(44 * var(--px));
    font-weight: 700;
}
@media screen and (max-width: 767px) {
    body:not(#home) #billboard .label {
        font-size: var(--fs20);
    }
    body:not(#home) #billboard .tagline {
        font-size: var(--fs27);
        letter-spacing: 0;
    }
    body:not(#home) #billboard .tagline strong {
        font-size: calc(34 * var(--px));
    }
    body#page-souko #billboard .tagline {
        padding-bottom: 1.2lh;
        font-size: calc(25 * var(--px));
        white-space: nowrap;
    }
}



/** 荷主＞FV */
body#page-ninushi #billboard .label{
    border:0;
    font-weight: 700;
    letter-spacing: 0.2ic;
    padding-inline: 0.75ic;
    border-radius: 1lh;
    background: black;
}
body#page-ninushi #billboard .tagline {
    letter-spacing: 0.1ic;
    color: black;
    font-weight: 900;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 2px 2px 0 white, 3px 3px 0 white;
}
body#page-ninushi #billboard .point {
    display: flex;
    justify-content: space-between;
    gap: 0 2%;
    filter: drop-shadow(4px 4px 3px var(--glass));
}
body#page-ninushi #billboard .point p {
    flex: 1 1 30%;
    padding-block: calc(var(--mb) * 4) var(--mb);
    background: var(--sky);
    clip-path: polygon(0 calc(var(--mb) * 4), 50% 0, 100% calc(var(--mb) * 4), 100% 100%, 0 100%);
    font-size: var(--fs20);
    text-align: center;
    letter-spacing: 0;
    line-height: 1.2;
    text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black;
    position: relative;
    z-index: 0;
}
body#page-ninushi #billboard .point p:first-child {
    background: var(--blue);
}
body#page-ninushi #billboard .point p:last-child {
    background: var(--orange);
}
body#page-ninushi #billboard .point strong {
    font-size: var(--fs24);
}
body#page-ninushi #billboard .point .yellow {
    color: yellow;
}
body#page-ninushi #billboard .badge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(190 * var(--px));
    height: calc(190 * var(--px));
    box-sizing: border-box;
    border-radius: calc(190 * var(--px));
    box-shadow: inset 0 0 0 calc(5 * var(--px)) var(--blue);
    background: white;
    padding-block: calc(29 * var(--px));
    padding-inline: calc(10 * var(--px));
    font-size: var(--fs22);
    color: black;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.3;
}
body#page-ninushi #billboard .badge strong {
    font-size: var(--fs27);
}
body#page-ninushi #billboard .badge .marker {
    background: linear-gradient(to top, var(--marker) 20%, transparent 20%);
}
@media screen and (min-width: 768px) {
    body#page-ninushi #billboard .tagline {
        width: min(calc(720 / 1400 * 100vw), 720px);
    }
}
@media screen and (max-width: 767px) {
    body#page-ninushi #billboard .tagline {
        font-size: calc(25 * var(--px));
        letter-spacing: 0;
    }
    body#page-ninushi #billboard .tagline strong {
        font-size: calc(32 * var(--px));
    }
    body#page-ninushi #billboard .point {
        width: 100%;
        display: block;
    }
    body#page-ninushi #billboard .point p + p {
        margin-top: 5px;
    }
    body#page-ninushi #billboard .point p {
        clip-path: none;
        padding-block: 0.75lh;
        padding-left: calc(var(--mi) * 4);
        font-size: calc(12 * var(--px));
        text-align: left;
    }
     body#page-ninushi #billboard .point p::before {
        display: block;
        width: 2lh;
        height: 1.8lh;
        background: white;
        clip-path: polygon(0 30%, 50% 0, 100% 30%, 100% 100%, 0 100%);
        position: absolute;
        left: var(--mi);
        top: 50%;
        translate: 0 -50%;
     }
    body#page-ninushi #billboard .point strong {
        font-size: var(--fs16);
    }
    body#page-ninushi #billboard .point .last-line {
        width: fit-content;
        position: absolute;
        right: -1ic;
        top: 0;
        translate: 0 -50%;
        rotate: 8deg;
    }
    body#page-ninushi #billboard .point p:last-child .last-line {
        top: 50%;
    }
    body#page-ninushi #billboard .badge {
        width: calc(140 * var(--px));
        height: calc(140 * var(--px));
        padding-block: calc(20 * var(--px)) calc(36 * var(--px));
        border-radius: calc(140 * var(--px));
        box-shadow: inset 0 0 0 calc(2 * var(--px)) var(--blue);
        font-size: var(--fs16);
    }
    body#page-ninushi #billboard .badge strong {
        font-size: var(--fs20);
    }
}




/** 下部＞導入事例 */
#example .label {
    width: 55%;
    padding-block: 0.1lh;
    border-radius: 3px;
    background: var(--orange);
    margin-inline: auto;
    font-size: var(--fs22);
    color: white;
    text-align: center;
    position: relative;
    translate: 0 50%;
}
#example .label::after {
    content: "";
    display: block;
    width: calc(30 * var(--px));
    height: calc(18 * var(--px));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: var(--orange);
    position: absolute;
    left: 50%;
    top: 100%;
    translate: -50% -1px;
}
#example .block img {
    border: 0;
    padding: 0;
}
#example .name {
    font-size: var(--fs18);
    font-weight: 800;
    text-align: center;
}
#example h3 {
    color: var(--blue);
    font-size: calc(33 * var(--px));
    text-align: center;
    font-weight: 800;
    padding-bottom: 0.3lh;
    border-bottom: 1px solid currentColor;
    margin-bottom: 0.5lh;
}
#example p {
    font-size: initial;
}
@media screen and (max-width: 767px) {
    #example h2 {
        font-size: calc(36 * var(--px));
        margin-bottom: 0.75lh;
    }
    #example .block {
        padding-inline: calc(var(--mi) * 1.5);
    }
    #example .label {
        width: 75%;
        padding-block: 0;
        font-size: var(--fs16);
    }
    #example .label::after {
        width: calc(18 * var(--px));
        height: calc(9 * var(--px));
    }
    #example .name {
        font-size: var(--fs16);
    }
    #example h3 {
        font-size: var(--fs27);
        line-height: 1.5;
        letter-spacing: 0;
    }
}





/** 下部＞汎用 */
@media screen and (max-width: 767px) {
    :is(#problem, #solution, #function, #startup, #form) h2 {
        font-size: var(--fs24);
        line-height: 1.3;
    }
    :is(#problem, #solution, #function, #startup, #form) h2 strong {
        font-size: 130%;
        font-weight: 700;
    }
}



/** 下部＞お悩み */
#problem h2 {
    font-size: calc(54 * var(--px));
}
#problem .container {
    column-gap: 4%;
}
#problem .block {
    flex: 1 1 20%;
}
#problem .block img {
    margin-bottom: var(--mb);
}
#problem .text {
    padding-block: var(--mb);
    padding-inline: var(--mi);
    border-radius: calc(12 * var(--px));
    background: var(--blue);
    color: white;
    text-align: center;
    letter-spacing: 0;
    position: relative;
}
#problem .text::before {
    content: "";
    display: block;
    width: calc(24 * var(--px));
    height: calc(15 * var(--px));
    clip-path: polygon( 50% 0, 100% 100%, 0 100%);
    background: var(--blue);
    position: absolute;
    left: 50%;
    bottom: 100%;
    translate: -50% 1px;
}

#problem .text .label {
   font-size: var(--fs24);
   padding-bottom: 0.3lh;
   border-bottom: 1px solid currentColor;
   margin-bottom: 0.3lh;
}
#problem .text .label span {
    display: inline-block;
    width: var(--fs22);
    line-height: var(--fs22);
    border-radius: var(--fs22);
    background: white;
    margin-left: 0.2ic;
    color: var(--blue);
    font-size: 75%;
    text-align: center;
}

@media screen and (max-width: 767px) {
    #problem h2 {
        font-size: var(--fs24);
    }
    #problem .container {
        flex-direction: column;
        gap: calc(var(--mb) * 3);
    }
    #problem .text {
        border-radius: calc(6 * var(--px));
        font-size: var(--fs18);
    }
    #problem .text .label {
        padding-bottom: 0.2lh;
        margin-bottom: 0.2lh;
    }
}




/** 下部＞解決 */
#solution .image {}
#solution h3 {
    color: white;
    font-size: calc(33 * var(--px));
    font-weight: 800;
    letter-spacing: 0;
    margin-block: 0.2lh 0.3lh;
}
#solution .block p {
    font-size: initial;
}
@media screen and (max-width: 767px) {
    #solution h2 {
        font-size: calc(32 * var(--px));
    }
    #solution h3 {
        font-size: var(--fs20);
        margin-block: 0.3lh 0.5lh;
    }
}





/** 下部＞機能 */
#function h3 {
    font-size: calc(35 * var(--px));
    font-weight: 800;
    letter-spacing: 0;
}
#function .text p {
    font-size: initial;
}
@media screen and (max-width: 767px) {
    #function h2 {
        font-size: calc(27 * var(--px));
    }
    #function h3 {
        font-size: calc(23 * var(--px));
    }
    #function .text {
        padding-block: calc(var(--mb) * 2.5) calc(var(--mb) * 2);
        padding-inline: calc(var(--mi) * 1.5);
    }
    #function .text p {
        margin-top: 1lh;
        padding-top: 1lh;
    }
}

/** ご利用の流れ */
#startup h3 {
    margin-top: 0.5lh;
    font-size: calc(30 * var(--px));
    text-align: center;
}
@media screen and (max-width: 767px) {
    #startup h2 {
        font-size: calc(36 * var(--px));
    }
}


/** フォーム */
#form h2 {
    font-size: calc(36 * var(--px));
}