@charset "utf-8";

/* --------------------
   page
-------------------- */

.page {
    margin-bottom: clamp(30px, 17.504px + 3.91vw, 80px);
}

/* --------------------
   visual
-------------------- */

.page-visual {
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0.75);
    margin: 0 auto;
    aspect-ratio: 5 / 1;
    max-width: 1500px;
}

.page-visual--vehicles1 {
    background-image: url(../images/vehicles/cover1.webp);
}

.page-visual--vehicles2 {
    background-image: url(../images/vehicles/cover2.webp);
}

.page-visual--company {
    background-image: url(../images/company/cover.webp);
}

.page-visual--contact {
    background-image: url(../images/contact/cover.webp);
}

.page-visual--flow {
    background-image: url(../images/flow/cover.webp);
}

.page-visual--news {
    background-image: url(../images/news/cover.webp);
}

.page-visual--ordermade {
    background-image: url(../images/ordermade/cover.webp);
}

.page-visual--recruit {
    background-image: url(../images/recruit/cover.webp);
}

/* --------------------
   title
-------------------- */

.page-title {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    border-left: 3px solid #3C7BC3;
    font-weight: bold;
    font-size: clamp(1.4rem, 0.813rem + 2.94vw, 3.75rem);
    line-height: 1;
    padding: clamp(20px, 15.008px + 1.56vw, 40px) 0 0 clamp(22px, 15.744px + 1.95vw, 47.008px);
    margin-bottom: clamp(30px, 17.504px + 3.91vw, 80px);
}

.page-title::after {
    content: attr(data-text-en);
    font-family: century-gothic;
    font-weight: normal;
    font-size: clamp(0.85rem, 0.594rem + 1.28vw, 1.875rem);
    line-height: 1;
    letter-spacing: -0.01em;
}

.page-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    background-image: linear-gradient(#3C7BC3, #3C7BC3);
    background-size: 5px 90%;
    background-position: left top;
    border-bottom: 1px solid black;
    padding-left: clamp(14px, 10.496px + 1.09vw, 28px);
    padding-bottom: clamp(6px, 4.256px + 0.55vw, 13px);
    margin-bottom: clamp(20px, 13.744px + 1.95vw, 45px);
}

.page-heading>.page-heading__index {
    grid-column: 1;
    grid-row: span 2;
    color: black;
    font-family: century-gothic;
    font-weight: normal;
    font-size: clamp(2.188rem, 1.641rem + 2.73vw, 4.375rem);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-right: clamp(10px, 7.504px + 0.78vw, 20px);
}

.page-heading>.page-heading__small {
    grid-column: 2;
    grid-row: 1;
    color: #c4c4c4;
    font-family: century-gothic;
    font-weight: normal;
    font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: clamp(5px, 3.744px + 0.39vw, 10px);
}

.page-heading>.page-heading__title {
    grid-column: 2;
    grid-row: 2;
    color: black;
    font-weight: bold;
    font-size: clamp(1.125rem, 0.938rem + 0.94vw, 1.875rem);
    line-height: 1;
}

.page-heading-sub {
    border-bottom: 3px solid #3C7BC3;
    color: black;
    font-weight: bold;
    font-size: clamp(1.125rem, 1rem + 0.63vw, 1.625rem);
    line-height: 1;
    word-break: keep-all;
    padding-bottom: clamp(6px, 4.256px + 0.55vw, 13px);
    margin-bottom: clamp(15px, 13.744px + 0.39vw, 20px);
    width: fit-content;
}

/* --------------------
  toc
-------------------- */

.page-toc {
    margin-bottom: clamp(30px, 23.744px + 1.95vw, 55px);
}

.page-toc__label {
    color: black;
    font-weight: bold;
    font-size: clamp(1.25rem, 0.938rem + 1.56vw, 2.5rem);
    margin-bottom: 27px;
}

.page-toc__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    column-gap: clamp(5px, 3.744px + 0.39vw, 10px);
    row-gap: clamp(5px, 3.744px + 0.39vw, 10px);
    list-style-type: none;
    margin-bottom: clamp(15px, 11.248px + 1.17vw, 30px);
}

.page-toc__list>li>a {
    display: block;
    background-color: #EFEFEF;
    color: #6697ce;
    font-weight: bold;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    padding: clamp(9px, 6.752px + 0.7vw, 18px) clamp(6px, 4.256px + 0.55vw, 13px);
}

.page-toc__list>li>a::before {
    content: "";
    display: inline-block;
    background-image: url(../common/images/icon_toc.webp);
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: clamp(5px, 3.744px + 0.39vw, 10px);
    height: 1.3em;
    width: 1.3em;
    vertical-align: text-bottom;
}

.page-toc__list>li>a>sub {
    font-size: 0.78em;
    bottom: 0;
}

/* --------------------
   page: contact
-------------------- */

.page-contact-description {
    font-weight: 500;
    font-size: clamp(1rem, 0.969rem + 0.16vw, 1.125rem);
    line-height: 1.75;
    margin-bottom: clamp(30px, 23.744px + 1.95vw, 55px);
}

.page-contact-form__fields {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    column-gap: 57px;
    border: none;
    margin-bottom: clamp(30px, 25.008px + 1.56vw, 50px);
}

.page-contact-form__fields select {
    appearance: none;
    border: none;
    background-image: url(../common/images/select_arrow.webp);
    background-size: 1em 1em;
    background-position: calc(100% - 0.5em) center;
    background-color: #F6F6F6;
    font-size: clamp(0.875rem, 0.828rem + 0.23vw, 1.063rem);
    line-height: 1.75;
    padding: 7px 3em 7px 7px;
    width: fit-content;
}

.page-contact-form__fields input[type="text"],
.page-contact-form__fields input[type="email"] {
    border: none;
    background-color: #F6F6F6;
    font-size: clamp(0.875rem, 0.828rem + 0.23vw, 1.063rem);
    line-height: 1.75;
    padding: 7px;
    width: 100%;
    max-width: fit-content;
}

.page-contact-select::after {
    content: "▼";
}

.page-contact-form__fields textarea {
    border: none;
    background-color: #F6F6F6;
    font-size: clamp(0.875rem, 0.828rem + 0.23vw, 1.063rem);
    line-height: 1.75;
    padding: 7px;
    resize: vertical;
    width: 100%;
    max-width: 100%;
}

.page-contact-form__fields>label {
    display: contents;
    font-weight: bold;
    font-size: clamp(0.875rem, 0.828rem + 0.23vw, 1.063rem);
    line-height: 1.75;
}

.page-contact-form__fields>label:last-child {
    border-bottom: 1px solid #BCBCBC;
}

.page-contact-form__fields>label>span.error {
    grid-column: 2;
}

.page-contact-form__fields>label::before {
    content: "";
    display: block;
    grid-column: span 2;
    margin-bottom: 35px;
    border-top: 1px solid #BCBCBC;
    height: 1px;
}

.page-contact-form__fields>label::after {
    content: "";
    display: block;
    grid-column: span 2;
    margin-top: 35px;
}

.page-contact-form__fields>label:last-of-type:after {
    border-bottom: 1px solid #BCBCBC;
    height: 1px;
}

.page-contact-form__label-last {
    align-self: baseline;
    list-style: 1.3;
}

.page-contact-form__buttons {
    border: none;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    align-items: center;
}

@media (max-width: 780px) {
    .page-contact-form__fields {
        grid-template-columns: 1fr;
    }
.page-contact-form__fields>label,
.page-contact-form__fields>label::before,
.page-contact-form__fields>label::after,
.page-contact-form__fields>label>span,
.page-contact-form__fields>label>input{
    display: block;
}

    .page-contact-form__fields>label>span {
        margin-bottom: 10px;
    }

    .page-contact-form__fields>label::before {
        grid-column: 1;
        margin-bottom: clamp(15.008px, 10px + 1.56vw, 35.008px);
    }

    .page-contact-form__fields>label::after {
        grid-column: 1;
        margin-top: clamp(15.008px, 10px + 1.56vw, 35.008px);
    }
}

/*
recruit
*/

.page-recruit-introduction {
    color: black;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1.75;
    margin-bottom: 40px;
}

.page-recruit-backup {
    background-color: #F3F3F3;
    padding: 30px 26px;
    margin-bottom: 60px;
}

.page-recruit-backup>span,
.page-recruit-backup>p {
    color: black;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1.5;
}

.page-recruit-backup>span {
    font-weight: bold;
}

.page-recruit-entry {
    text-align: center;
}

/*
flow
*/

.page-flow-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    margin-bottom: clamp(30px, 15.008px + 4.69vw, 90px);
}

.page-flow-item>h3 {
    grid-row: 1;
    color: black;
    font-weight: bold;
    font-size: clamp(1.125rem, 0.938rem + 0.94vw, 1.875rem);
    line-height: 1;
    margin-bottom: clamp(10px, 5.008px + 1.56vw, 30px);
}

.page-flow-item>p {
    grid-row: 2;
    color: black;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1.7;
    text-align: left;
}

.page-flow-item>img {
    grid-row: span 4;
    width: 100%;
}

.page-flow-item:nth-of-type(odd) {
    background-color: #F5F8FC;
    padding: clamp(15.008px, 11.248px + 1.17vw, 30px);
}

.page-flow-item:nth-of-type(odd):not(:last-of-type)::after {
    content: "";
    border-top: clamp(12px, 4.752px + 2.27vw, 41.008px) solid #F5F8FC;
    border-left: clamp(20px, 12.496px + 2.34vw, 50px) solid transparent;
    border-right: clamp(20px, 12.496px + 2.34vw, 50px) solid transparent;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto;
    height: 0;
    width: 0;
}

.page-flow-item:nth-of-type(odd)>h3,
.page-flow-item:nth-of-type(odd)>p {
    grid-column: 1;
    padding-right: 40px;
}

.page-flow-item:nth-of-type(odd)>img {
    grid-column: 2;
}

.page-flow-item:nth-of-type(even)>h3,
.page-flow-item:nth-of-type(even)>p {
    grid-column: 2;
    padding-left: 40px;
}

.page-flow-item:nth-of-type(even)>img {
    grid-column: 1;
}

.page-flow-item__buttons {
    text-align: center;
}

@media (max-width: 780px) {
    .page-flow-item,
    .page-flow-item:nth-of-type(odd){
        grid-template-columns: 1fr;
        justify-content: center;
        margin: 0;
        padding: 50px 0;
    }
    .page-flow-item:nth-of-type(odd):not(:last-of-type)::after {
        content: "";
        border-top: 30px solid #F5F8FC;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: auto;
        height: 0;
        width: 0;
        z-index: 999;
    }
    .page-flow-item:nth-of-type(even):not(:last-of-type)::after {
        content: "";
        border-top: 30px solid #FFFFFF;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: auto;
        height: 0;
        width: 0;
        z-index: 999;
    }

    .page-flow-item>h3 {
        grid-row: 2;
        text-align: center;
    }

    .page-flow-item>p {
        grid-row: 3;
        text-align: center;
    }

    .page-flow-item>img {
        grid-row: 1;
        margin: 0 auto clamp(10px, 7.504px + 0.78vw, 20px);
        max-width: 250px;
    }

    .page-flow-item:nth-of-type(odd)>h3,
    .page-flow-item:nth-of-type(odd)>p {
        grid-column: 1;
        padding-right: 0;
    }

    .page-flow-item:nth-of-type(odd)>img {
        grid-column: 1;
    }

    .page-flow-item:nth-of-type(even)>h3,
    .page-flow-item:nth-of-type(even)>p {
        grid-column: 1;
        padding-left: 0;
    }

    .page-flow-item:nth-of-type(even)>img {
        grid-column: 1;
    }
}


/*
news-list
*/

.page-news-list {
    display: flex;
    flex-direction: column;
    row-gap: clamp(20px, 15.008px + 1.56vw, 40px);
}

.page-news-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: clamp(10px, 3.248px + 2.11vw, 37px);
    text-decoration: none;
}

.page-news-list__item__thumbnail {
    grid-column: 1;
    grid-row: span 5;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    width: clamp(50px, 15.63vw, 250px);
}

.page-news-list__item__time {
    grid-column: 2;
    grid-row: 1;
    color: #7b7b7b;
    font-weight: bold;
    font-size: clamp(0.75rem, 0.688rem + 0.31vw, 1rem);
    line-height: 1;
}

.page-news-list__item__title {
    grid-column: 2;
    grid-row: 2;
    color: black;
    font-weight: bold;
    font-size: clamp(1rem, 0.906rem + 0.47vw, 1.375rem);
    line-height: 1;
    margin: 12px 0 17px;
}

.page-news-list__item__line {
    --dashed-color: #707070;
    --dashed-width: 3;
    --dashed-height: 2;
    --dashed-space: 6;

    --dashed-radius: calc(1px * var(--dashed-height) / 2);
    --dashed-total-length: calc(1px * (var(--dashed-width) + var(--dashed-space)));
    --dashed-ratio: calc(var(--dashed-width) / (var(--dashed-width) + var(--dashed-space)));

    background-image:
        radial-gradient(var(--dashed-radius) at var(--dashed-radius) center, var(--dashed-color) 95%, transparent),
        radial-gradient(var(--dashed-radius) at var(--dashed-radius) center, var(--dashed-color) 95%, transparent),
        linear-gradient(90deg, var(--dashed-color) calc(100% * var(--dashed-ratio) - var(--dashed-radius)), transparent 0);
    background-size:
        var(--dashed-total-length) 100%,
        var(--dashed-total-length) 100%,
        var(--dashed-total-length) 100%;
    background-position:
        left center,
        calc(1px * var(--dashed-width) - var(--dashed-radius)) center,
        var(--dashed-radius) center;
    background-repeat:
        repeat-x,
        repeat-x,
        repeat-x;
    height: calc(1px * var(--dashed-height));

    grid-column: 2;
    grid-row: 3;
    margin-bottom: 25px;
    width: 50%;
}

.page-news-list__item__body {
    grid-column: 2;
    grid-row: 4;
    color: black;
    font-weight: bold;
    font-size: 16px;
    line-height: 25px;
}

@media (max-width: 780px) {
    .page-news-list__item__line {
        display: none;
    }

    .page-news-list__item__body {
        display: none;
    }
}

/*
vehicles
*/

.page-vehicle-vehicleSection {
    margin-bottom: 60px;
}

.page-vehicles-description {
    color: black;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1.7;
    margin-bottom: clamp(20px, 17.504px + 0.78vw, 30px);
}

.page-vehicles-artbusImage {
    margin-bottom: clamp(20px, 17.504px + 0.78vw, 30px);
    width: 100%;
}

.page-vehicles-artbusProject {
    color: black;
    font-weight: bold;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1.7;
    text-align: center;
    margin-bottom: clamp(15.008px, 13.744px + 0.39vw, 20px);
}

.page-vehicles-artbusButtons {
    text-align: center;
    margin-bottom: clamp(30px, 25.008px + 1.56vw, 50px);
}

.page-vehicle-artbus {
    display: grid;
    grid-template-columns: 5fr 3fr;
    column-gap: 20px;
    row-gap: 20px;
}

.page-vehicle-artbus__large {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: 3 / 2;
    height: auto;
    width: 100%;
}

.page-vehicle-artbus__small {
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: 3 / 2;
    height: auto;
    width: 100%;
}

.page-vehicle-artbus__details {
    grid-column: 2;
    grid-row: 1;
}

.page-vehicle-artbus__details__seats {
    color: black;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1.7;
}

.page-vehicle-artbus__details__equipment::before {
    content: "●";
}

.page-vehicle-artbus__video {
    grid-column: 1 / 3;
    grid-row: 3;
    aspect-ratio: 7 / 4;
    height: auto;
    width: 100%;
}

.page-vehicle-artbus__image {
    display: block;
    width: 100%;
    transition: all 0.3s;
}

.page-vehicle-artbus__small>.page-vehicle-artbus__image {
    cursor: pointer;
    object-fit: contain;
    height: auto;
}

.page-vehicle-artbus__small>.page-vehicle-artbus__image:hover {
    opacity: 0.75;
    transform: scale(1.05);
}

@media (max-width: 760px) {
    .page-vehicle-artbus {
        grid-template-columns: 1fr;
    }

    .page-vehicle-artbus__large {
        grid-column: 1;
        grid-row: 3;
    }

    .page-vehicle-artbus__small {
        grid-column: 1;
        grid-row: 2;
        aspect-ratio: unset;
        pointer-events: none;
    }

    .page-vehicle-artbus__details {
        grid-column: 1;
        grid-row: 1;
    }

    .page-vehicle-artbus__video {
        grid-column: 1;
        grid-row: 4;
    }
}

.page-vehicle-info {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    column-gap: clamp(20px, 15.008px + 1.56vw, 40px);
    row-gap: clamp(10px, 7.504px + 0.78vw, 20px);
    margin-bottom: clamp(10px, 7.504px + 0.78vw, 20px);
}

.page-vehicle-info__name {
    margin-bottom: 0;
}

.page-vehicle-info__details__seats {
    color: black;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1.7;
}

.page-vehicle-info__details__equipment {
    color: black;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1.7;
    margin-right: 1em;
}

.page-vehicle-info__details__equipment::before {
    content: "●";
}

@media (max-width: 760px) {
    .page-vehicle-info {
        grid-template-columns: 1fr;
    }
}

.page-vehicle-media {
    display: grid;
    list-style-type: none;
}

.page-vehicle-media>li {
    width: 100%;
    transition: all 0.2s;
}

.page-vehicle-media>li:not(:first-child) {
    cursor: pointer;
}

.page-vehicle-media>li:not(:first-child):hover {
    opacity: 0.75;
    transform: scale(1.05);
}

.page-vehicle-media>li:not(:first-child) iframe {
    pointer-events: none;
}

.page-vehicle-media__image {
    display: block;
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.page-vehicle-media__iframe {
    display: block;
    height: 100%;
    width: 100%;
}

.page-vehicle-media[data-count-of-media="1"] {
    grid-template-columns: 1fr;
}

.page-vehicle-media[data-count-of-media="2"],
.page-vehicle-media[data-count-of-media="3"] {
    grid-template-columns: 17fr 7fr;
    column-gap: clamp(10px, 7.504px + 0.78vw, 20px);
    row-gap: clamp(10px, 7.504px + 0.78vw, 20px);
}

.page-vehicle-media[data-count-of-media="2"]>li:first-child,
.page-vehicle-media[data-count-of-media="3"]>li:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: 17 / 10;
}

.page-vehicle-media[data-count-of-media="2"]>li:not(:first-child),
.page-vehicle-media[data-count-of-media="3"]>li:not(:first-child) {
    aspect-ratio: 3 / 2;
}

.page-vehicle-media[data-count-of-media="4"],
.page-vehicle-media[data-count-of-media="5"],
.page-vehicle-media[data-count-of-media="6"] {
    grid-template-columns: repeat(4, fr);
    column-gap: 20px;
    row-gap: 20px;
}

.page-vehicle-media[data-count-of-media="4"]>li:first-child,
.page-vehicle-media[data-count-of-media="5"]>li:first-child,
.page-vehicle-media[data-count-of-media="6"]>li:first-child {
    aspect-ratio: 49 / 25;
}

.page-vehicle-media[data-count-of-media="4"]>li:not(:first-child),
.page-vehicle-media[data-count-of-media="5"]>li:not(:first-child),
.page-vehicle-media[data-count-of-media="6"]>li:not(:first-child) {
    aspect-ratio: 3 / 2;
    object-fit: contain;
}

.page-vehicle-media[data-count-of-media="4"] {
    grid-template-columns: repeat(4, fr);
}

.page-vehicle-media[data-count-of-media="5"] {
    grid-template-columns: repeat(5, fr);
}

.page-vehicle-media[data-count-of-media="6"] {
    grid-template-columns: repeat(6, fr);
}

.page-vehicle-media[data-count-of-media="4"]>li:first-child {
    grid-column: 1 / 5;
}

.page-vehicle-media[data-count-of-media="5"]>li:first-child {
    grid-column: 1 / 6;
}

.page-vehicle-media[data-count-of-media="6"]>li:first-child {
    grid-column: 1 / 7;
}

@media (max-width: 760px) {

    .page-vehicle-media[data-count-of-media="2"],
    .page-vehicle-media[data-count-of-media="3"],
    .page-vehicle-media[data-count-of-media="4"],
    .page-vehicle-media[data-count-of-media="5"],
    .page-vehicle-media[data-count-of-media="6"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-vehicle-media[data-count-of-media="2"]>li:first-child,
    .page-vehicle-media[data-count-of-media="3"]>li:first-child,
    .page-vehicle-media[data-count-of-media="4"]>li:first-child,
    .page-vehicle-media[data-count-of-media="5"]>li:first-child,
    .page-vehicle-media[data-count-of-media="6"]>li:first-child {
        grid-column: 1 / 3;
        grid-row: 1;
        aspect-ratio: 17 / 10;
    }

    .page-vehicle-media[data-count-of-media="2"]>li:not(:first-child),
    .page-vehicle-media[data-count-of-media="3"]>li:not(:first-child),
    .page-vehicle-media[data-count-of-media="4"]>li:not(:first-child),
    .page-vehicle-media[data-count-of-media="5"]>li:not(:first-child),
    .page-vehicle-media[data-count-of-media="6"]>li:not(:first-child) {
        aspect-ratio: 3 / 2;
    }
}

/*
ordermade
*/

.page-ordermade-intro {
    margin-bottom: clamp(30px, 23.744px + 1.95vw, 55.008px);
}

.page-ordermade-intro-imgs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 5px;
}

.page-ordermade-intro-imgs>img {
    display: block;
    width: clamp(290px, 242.496px + 14.84vw, 480px);
}

.page-order-made-intro-strong {
    display: block;
    color: black;
    font-weight: bold;
    font-size: clamp(1.125rem, 0.844rem + 1.41vw, 2.25rem);
    line-height: 1;
    text-align: center;
    margin: clamp(20px, 13.008px + 2.19vw, 48px) 0 clamp(7.504px, 5.632px + 0.59vw, 15.008px);
}

.page-order-made-intro-strong>img {
    display: block;
    margin: clamp(7.504px, 5.632px + 0.59vw, 15.008px) auto;
    width: clamp(26px, 19.504px + 2.03vw, 52px);
}

.page-ordermade-about {
    margin-bottom: clamp(30px, 19.504px + 3.28vw, 72px);
}

.page-ordermade-about-strong {
    display: block;
    color: black;
    font-weight: bold;
    font-size: clamp(1.125rem, 0.844rem + 1.41vw, 2.25rem);
    line-height: 1.39;
    text-align: center;
    margin-bottom: clamp(20px, 15.008px + 1.56vw, 40px);
}

.page-ordermade-about-description {
    display: grid;
    grid-template-columns: 42fr 53fr;
    gap: clamp(15.008px, 11.248px + 1.17vw, 30px);
}

.page-ordermade-about-description>p {
    color: black;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1.8;
}

@media (max-width: 880px) {
    .page-ordermade-about-description {
        grid-template-columns: 1fr;
        margin: 0 auto;
        width: fit-content;
    }

    .page-ordermade-about-description>img {
        margin: 0 auto;
        width: clamp(280px, 245.008px + 10.94vw, 420px);
    }
}

.page-ordermade-example {
    margin-bottom: clamp(30px, 25.008px + 1.56vw, 50px);
}

.page-ordermade-example-grid {
    display: grid;
    grid-template-columns: 42fr 53fr;
    column-gap: clamp(15.008px, 11.248px + 1.17vw, 30px);
    margin-bottom: clamp(15.008px, 11.248px + 1.17vw, 30px);
}

.page-ordermade-example-grid__swiper {
    --swiper-theme-color: white;
    grid-column: 1;
    grid-row: span 4;
    height: 100%;
    width: 100%;
}

.page-ordermade-example-grid__swiper img {
    display: block;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.page-ordermade-example-grid__title {
    display: flex;
    align-items: center;
    border: 3px solid #3C7BC3;
    border-left-width: 20px;
    color: black;
    font-family: "Yu Gothic";
    font-weight: bold;
    font-size: clamp(1.125rem, 1rem + 0.63vw, 1.625rem);
    line-height: 1;
    text-align: left;
    padding: clamp(10px, 9.008px + 0.31vw, 14px) 0 clamp(10px, 9.504px + 0.16vw, 12px) 17px;
    margin-bottom: clamp(16px, 12px + 1.25vw, 32px);
}

.page-ordermade-example-grid__pricePer {
    display: flex;
    align-items: self-end;
    margin-bottom: clamp(15.008px, 11.248px + 1.17vw, 30px);
}

.page-ordermade-example-grid__pricePer__per {
    background-color: #3C7BC3;
    color: white;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem);
    line-height: 1;
    padding: clamp(3.008px, 2px + 0.31vw, 7.008px) clamp(7.008px, 5.248px + 0.55vw, 14px);
    margin-right: clamp(11.008px, 8.256px + 0.86vw, 22px);
}

.page-ordermade-example-grid__pricePer__number {
    color: black;
    font-weight: bold;
    font-size: clamp(1.875rem, 1.406rem + 2.34vw, 3.75rem);
    line-height: 1;
    margin-bottom: calc(clamp(3.008px, 2.496px + 0.16vw, 5.008px) * -1);
    margin-right: 5px;
}

.page-ordermade-example-grid__pricePer__unit {
    color: black;
    font-weight: bold;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1;
    margin-right: clamp(10px, 7.504px + 0.78vw, 20px);
}

.page-ordermade-example-grid__pricePer__text {
    border: 1px solid #707070;
    border-radius: 999px;
    color: black;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem);
    line-height: 1;
    padding: clamp(3.008px, 2px + 0.31vw, 7.008px) clamp(8px, 6px + 0.63vw, 16px);
}

@media (max-width: 800px) {
    .page-ordermade-example-grid {
        grid-template-columns: 1fr;
    }

    .page-ordermade-example-grid__swiper {
        grid-column: 1;
        grid-row: 1;
        margin: 0 auto;
        width: min(100%, clamp(13.75rem, 10.625rem + 15.63vw, 26.25rem));
    }

    .page-ordermade-example-grid__title {
        margin-top: clamp(14px, 10.496px + 1.09vw, 28px);
    }
}

.page-ordermade-table {
    border: none;
    border-collapse: collapse;
    width: 100%;
}

.page-ordermade-table th {
    background-color: #3C7BC3;
    color: white;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1;
    text-align: center;
    padding: 9px 0;
}

.page-ordermade-table th:not(:first-child) {
    border-left: 1px solid #E2E2E2;
}

.page-ordermade-table td {
    border-left: 1px solid #E2E2E2;
    border-right: 1px solid #E2E2E2;
    border-bottom: 1px solid #E2E2E2;
    color: black;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1;
    text-align: center;
    padding: 9px clamp(9px, 6.752px + 0.7vw, 18px) 9px clamp(9.008px, 6px + 0.94vw, 21.008px);
}

.page-ordermade-example-grid__member {
    table-layout: fixed;
    width: 100%;
}

.page-ordermade-example-grid__member th {
    width: 33.3%;
}

.page-ordermade-example-route {
    color: black;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1.77;
    word-break: keep-all;
    margin-bottom: clamp(14px, 10.496px + 1.09vw, 28px);
}

.page-ordermade-example-route--days {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: clamp(14px, 12.496px + 0.47vw, 20px);
}

.page-ordermade-example-check {
    margin-bottom: clamp(16px, 12px + 1.25vw, 32px);
}

.page-ordermade-example-check td:first-child {
    padding-left: clamp(7.008px, 5.248px + 0.55vw, 14px);
    text-align: left;
}

.page-ordermade-example-check td:not(:first-child) {
    text-align: right;
    word-break: keep-all;
    padding-left: clamp(11.008px, 8.256px + 0.86vw, 22px);
    padding-right: clamp(11.008px, 8.256px + 0.86vw, 22px);
}

.page-ordermade-example-check td[colspan="3"] {
    text-align: right;
}

.page-ordermade-example-note {
    color: black;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1.77;
    text-align: left;
}

.page-ordermade-apply-description {
    color: black;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem);
    line-height: 1.8;
    text-align: center;
    margin-bottom: clamp(24px, 18px + 1.88vw, 48px);
}

.page-ordermade-apply-buttons {
    text-align: center;
}