@charset "UTF-8"; /**/
@keyframes scroll {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(7px);
    }
}

.coname {
    white-space: nowrap;
}

.main-img {
    flex: 1;
    height: 100%;
    width: 100%;
}

.main-img .main-bg {
    position: relative;
    display: flex;
    justify-content: center;
}

.type {
    white-space: pre-line;
}

.type::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1em;
    border-right: 1px solid currentColor;
    transform: translateY(0.1em);
    animation: blink 1s step-end infinite;
    margin-left: 0.1em;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.main_slide {
    width: fit-content;
}

.main_slide ul {
    display: flex;
    flex-direction: column;
    width: 30%;
}

.main_slide ul li img {
    width: 100%;
    height: auto;
}

.main-img .copy_box {
    position: relative;
    margin: 5rem auto -3%;
    z-index: 1;
    /* text-align: center; */
    /* width: fit-content; */
}

.main-img .copy_box h3 {
    font-size: clamp(3rem, 3vw, 55px);
    font-weight: var(--w-b);
    line-height: 1;
    margin-bottom: 1rem;
    /* color: var(--c-accent); */
    /* font-family: var(--f-en); */
}

.main-img .copy_box .copy {
    font-size: var(--f-l);
    font-weight: bold;
    line-height: 1;
}

.main-img .main-bg figcaption p {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 300;
    line-height: 1.8;
}

.main-img .information {
    position: absolute;
    top: 35%;
    /* transform: translateX(-50%); */
    left: 76%;
    z-index: 1;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.main-img .baloon {
    /* margin-bottom: 2rem; */
    margin-left: -1vw;
}

.main-img .baloon a {
    position: relative;
    color: var(--c-accent);
    border: 1px solid var(--c-accent);
    border-radius: 50%;
    width: 160px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 2rem;
    transform: rotate(60deg);
}

.main-img .baloon a::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 10px;
    background: #fff;
    bottom: -8px;
    left: 0;
    right: 0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 1;
    margin: auto;
}

.main-img .baloon a::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 10px;
    background: var(--c-accent);
    bottom: -10px;
    left: 0;
    right: 0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin: auto;
}

.main-img .baloon a:hover {
    opacity: 1;
}

.main-img .baloon p {
    display: block;
    font-size: var(--f-s);
    text-align: center;
    line-height: 1.3;
    transform: rotate(-60deg);
    white-space: nowrap;
}

.main-img .baloon p i.ph {
    font-size: 38px;
    line-height: 1;
    display: block;
    margin: inherit;
}

.main-img .paper {
    white-space: nowrap;
    /* position: absolute; */
    /* top: 46%; */
    /* right: 8vw; */
    /* transform: rotate(0deg) scale(var(--scale, 1)); */
    color: var(--c-subtext);
    /* padding: 1rem; */
    /* width: fit-content; */
    /* position: relative; */
    margin-left: 1rem;
    margin-top: 1rem;
    margin: 1rem;
    margin-bottom: initial;
}

.main-img .paper ul {
    /* position: absolute; */
    /* top: 14%; */
    /* left: 7%; */
}

.main-img .paper figure {
    display: none;
}

.index-about__bgtext {
    display: flex;
    font-family: var(--f-en);
    font-size: max(12vw, 7rem);
    font-weight: 200;
    white-space: nowrap;
    /* letter-spacing: -0.03em; */
    pointer-events: none;
    position: absolute;
    bottom: 0;
    /* font-style: italic; */
    z-index: 1;
    line-height: 0.75;
    z-index: 2;
    /* mix-blend-mode: revert-layer; */
    z-index: 0;
    color: rgb(255 255 255 / 20%);
    width: max-content;
}

.index-about__bgtext .text {
    -webkit-animation: looptext 120s linear 0s infinite;
}

@keyframes looptext {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.scrolldown {
    position: fixed;
    z-index: 2;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    line-height: 1;
    /* transform: translateY(-50%); */
    bottom: 50px;
    right: 2.5%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: opacity .3s;
    white-space: nowrap;
}

.on .scrolldown {
    opacity: 0;
    pointer-events: none;
}

.scrolldown a b {
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.05rem;
    margin-bottom: 0.5rem;
}

.scrolldown a b::-moz-selection {
    background: #fff;
    background-color: rgba(255, 255, 255, 0.8);
}

.scrolldown a b::selection {
    background: #fff;
    background-color: rgba(255, 255, 255, 0.8);
}

.scrolldown a {
    text-decoration: none;
    display: flex;
    z-index: 1;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.scrolldown a:hover {
    opacity: 1;
}

.scrolldown a i {
    height: 5em;
    width: 1px;
    background-color: rgb(255 255 255 / 10%);
    /* opacity: .3; */
    position: relative;
    overflow: hidden;
}

.scrolldown a i:before {
    content: none;
}

.scrolldown a i::after {
    content: "";
    background-color: #fff;
    /* opacity: 1; */
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    -webkit-animation: anim-scroll 1.5s ease-in-out 0s infinite;
    animation: anim-scroll 1.5s ease-in-out 0s infinite;
}

/* ===============================
   HERO
================================= */
.hero {
    position: relative;
    background: linear-gradient(0deg, #02379b, #101B30);
    color: #fff;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
}

.hero__inner {
    /* grid-template-columns: 1fr 1fr; */
    /* max-width: 90%; */
    /* overflow: hidden; */
    /* gap: 4vw; */
    /* display: flex; */
    /* justify-content: center; */
}

.hero__content {
    position: relative;
    padding-block: var(--m-l);
    max-width: min-content;
    z-index: 2;
}

.hero__eyebrow {
    color: var(--c-accent-light);
    font-size: var(--f-l);
    margin-bottom: var(--m-xs);
    font-weight: bold;
}

.hero__title {
    margin-bottom: var(--m-xs);
    font-size: calc(var(--f-max) * 1.5);
    line-height: 1.2;
    font-weight: var(--w-eb);
    font-weight: 900;
    white-space: nowrap;
}

.hero__title small {
    display: block;
    font-size: 50%;
    margin-bottom: 0.2em;
}

.hero__lead {
    font-size: var(--f-l);
    font-weight: var(--w-m);
    line-height: 1.5;
}

.hero__lead small {
    display: block;
    opacity: 0.8;
    margin-top: var(--m-xs);
    color: var(--c-accent-light);
}

.hero__actions {
    display: flex;
    gap: 12px;
    flex-direction: column;
    width: 90%;
    align-items: center;
    margin: var(--m-r) auto;
    position: relative;
    z-index: 0;
}

.hero__meta {
    display: flex;
    gap: 1vw;
    margin: var(--m-l) 0 var(--m-r);
    align-items: stretch;
    justify-content: center;
}

.hero__meta li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    line-height: 1.4;
    align-items: center;
    font-size: 12px;
    align-items: stretch;
}

.hero__meta li:before {
    content: "";
    display: block;
    min-width: 40px;
    height: 100%;
    background-image: url('/img/loarel_1.webp');
    background-position: center;
    background-size: contain;
    /* margin-right: -0.5rem; */
}

.hero__meta li:after {
    content: "";
    display: inline-block;
    width: 100%;
    min-width: 40px;
    height: 100%;
    background-image: url('/img/loarel_2.webp');
    background-position: center;
    background-size: contain;
    /* margin-left: -0.5rem; */
}

.hero__meta li p {
    text-align: center;
    margin: 0 -1rem;
    white-space: nowrap;
}

.hero__meta li b {
    font-size: 18px;
    display: block;
}

.hero__caption {
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
}

.hero__media {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    -webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 10%, #000 90%, transparent 100% );
    mask-image: linear-gradient( to bottom, transparent 0%, #000 20%, #000 80%, transparent 95% );
    z-index: 0;
}

.hero__media:before {
    /* content: ""; */
    background-image: linear-gradient(to top, #0e1f4000 0%, #0e1f40 90%);
    display: block;
    width: 100%;
    height: 20%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

.hero__media:after {
    /* content: ""; */
    background-image: linear-gradient(to bottom, #02369900 0%, #023699 90%);
    display: block;
    width: 100%;
    height: 20%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
}

.hero__media img {
    /* display: block; */
    width: 100%;
    height: auto;
    object-fit: cover;
}

.hero__photos {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.btn--primary {
    background-color: #fffc18;
    color: initial;
    font-weight: bold;
    font-size: var(--f-xl);
    min-width: 280px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgb(0 0 0 / 30%);
}

.btn--primary:hover {
    color: initial;
}

.btn--ghost {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 3rem;
    padding: 0.5rem 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgb(255 255 255 / 8%);
    transition: height 0.2s cubic-bezier(0.08, 0.78, 0.08, 0.98);
    border: 1px solid rgb(255 255 255 / 18%);
}

/* 縦方向に積む */
.main-img .loopslide {
    padding: 0 3vw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* 各liは自分で幅を持つ */
    height: auto;
    /* ここ重要：中身の高さで伸びる */
    position: absolute;
    /* 画面内で動かす */
    inset: 0;
    /* top/right/bottom/left:0 */
    z-index: 2;
    animation: loopSlideY 20s linear infinite;
    will-change: transform;
}

/* liを左右に振るので overflow visible はOK */
.main-img .loopslide li {
    position: relative;
    flex: 0 0 auto;
    max-width: 420px;
    box-shadow: 0 0px 50px rgb(0 0 0 / 80%);
    overflow: visible !important;
}

.main-img .loopslide li img {
    width: 100%;
    height: auto;
    /* aspect-ratio使うなら autoでOK */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--m-xxs);
    display: block;
}

@keyframes loopSlideY {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-50%);
    }
}

/*
## 課題
*/
section.section--challenges {
    /* background: #4f5c8f; */
    /* background: linear-gradient(0deg, #ffffff 50%, #00318e 100%); */
    padding-block-start: initial; /* color: #fff; */
}

.section--challenges .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.section--challenges .section__pre {
    text-align: center;
    font-size: var(--f-xxl);
    /* font-size: var(--f-max); */
    line-height: 1.5;
    margin-bottom: var(--m-xl);
    font-weight: 200;
    border-bottom: 1px solid rgb(0 0 0 / 10%);
    padding-block: var(--m-xl); background: #fff;
    word-break: auto-phrase;
}

.section--challenges .section__header {
    /* color: #fff; */
}

.section--challenges .section__footer p {
    /* color: var(--c-accent-light); */
}

.section__header {
    text-align: center;
    margin-bottom: var(--m-xl);
}

.section__header .section__title {
    display: flex;
    flex-direction: column-reverse;
    /* line-height: 1.5; */
}

.section__header .section__title span {
    color: #3c6bc6;
}

.section__title .title-en {
    display: block;
    font-family: var(--f-en);
    font-size: var(--f-xl);
    color: #6E9DDA;
    /* margin-bottom: 0.5rem; */
}

.section__title .title-jp {
    display: block;
    font-size: var(--f-xl);
    font-weight: var(--w-eb);
    line-height: 1.3em;
}

.section__title .title-jp span {
    /* color: var(--c-accent-light); */
}

.section__lead {
    margin-top: var(--m-m);
    font-size: var(--f-m);
    /* text-align: left; */
}

.section__lead p {
    margin-bottom: var(--m-xs);
    word-break: auto-phrase;
}

.cards--challenges {
    align-items: stretch;
}

.cards--challenges .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cards--challenges .card__text {
    background: #f2f4f8;
    border-radius: 10px;
    padding: 1rem;
    height: 100%;
    position: relative;
}

.cards--challenges .card__text:before {
    content: "";
    position: absolute;
    transform: translateX(-50%);
    top: 100%;
    left: 50%;
    /* margin-left: -15px; */
    border: 11px solid transparent;
    border-top: 11px solid #f3f4f8;
}

.cards--challenges h3 {
    font-size: var(--f-l);
    font-weight: var(--w-b);
    line-height: 1.5;
    height: 3em;
    margin-bottom: 0.5rem;
}

.cards--challenges img {
    max-width: 80%;
    height: auto;
    margin: 0 auto;
}

.section__footer {
    margin-top: var(--m-xl);
    text-align: center;
}

.section__footer p {
    font-size: var(--f-l);
    color: var(--c-accent-dark);
    /* line-height: 1.5; */
}

.challenges__arrow {
    /* background: #3e4770; */
    /* display: flex; */
    /* align-items: center; */
}

.challenges__arrow img {
    width: 50%;
    max-width: 600px;
    min-width: 300px;
    margin: 0 auto;
}

/* ===============================
   Responsive
=================================*/
@media (max-width: 1024px) {
    .challenge-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .section-challenges {
        padding: 80px 0;
    }

    .section-challenges .bridge {
        font-size: 20px;
    }

    .section-title .title-jp {
        font-size: 22px;
    }

    .challenge-grid {
        grid-template-columns: 1fr;
    }
}

/*
## アプローチ
*/
.section--approach {
    /* background: #3E4770; */
    /* color: #fff; */
    padding-block-start: 0!important; }

.section--approach .challenges_arrow {
    max-width: 600px;
    margin: 0 auto;
}

.section--approach .section__title {
    color: #fff;
}

.cards--steps {
    align-items: stretch;
}

.card--step {
    background: #fff;
    border-radius: var(--m-xs);
    padding: var(--m-m);
    color: initial;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.card--step:not(:last-child):after {
    content: "";
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #3e477000 50%, #3e477000 50%, #ffd22a 90%);
    transform: rotate( 45deg) translateY(-50%);
    position: absolute;
    transform-origin: top left;
    top: 50%;
    left: 97%;
}

/* Card head */
.card__head {
    /* margin-bottom: 18px; */
    /* text-align: center; */
}

.badge--step {
    display: inline-block;
    background: #C6A014;
    color: #fff;
    font-weight: 700;
    font-size: var(--f-l);
    padding: 3px 18px;
    border-radius: 6px;
    margin-bottom: var(--m-r);
    margin: 0 auto var(--m-r);
    display: block;
    width: fit-content;
}

.card--step h3 {
    font-size: var(--f-l);
    font-weight: var(--w-b);
    margin-bottom: var(--m-s);
    color: var(--c-accent-dark);
}

.card__title span {
    color: #3c6bc6;
}

.card__note {
    /* color: var(--c-accent); */
    font-weight: var(--w-eb);
}

.card--step .checklist {
    list-style: none;
    padding: 0;
    margin: var(--m-s) 0;
    color: var(--c-subtext);
    gap: .5rem;
    display: flex;
    flex-direction: column;
}

.card--step .checklist__item {
    position: relative;
    line-height: 1.5;
    align-items: baseline;
}

.card--step .checklist__item::before {
    font-family: "Phosphor";
    margin-right: 0.3em;
    vertical-align: middle;
    position: relative;
    top: 3px;
}

.card--step .card__desc {
    margin-bottom: var(--m-s);
}

.card--step .card__figure {
    display: flex;
    align-items: center;
}

.card--step .card__figure img {
    width: 80%;
    height: auto;
    margin: 0 auto;
}

.section--approach .section__footer p {
    color: var(--c-accent-light);
}

/* ===============================
   Responsive
=================================*/
@media (max-width: 1024px) {
    .cards.cards--steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card.card--step {
        min-height: auto;
    }

    .section--approach .section__title {
        font-size: 26px;
    }
}

@media (max-width: 640px) {
    .section--approach {
        padding: 80px 0;
    }

    .section--approach .section__lead {
        font-size: 13px;
    }

    .section--approach .section__footer p {
        /* font-size: 18px; */
    }
}

/* ===============================
   STRENGTHS
=================================*/
.section--strengths {
    padding: 120px 0;
    background: #ffffff;
    color: #2b2f3a;
}

.section--strengths .section__title .is-accent {
    color: #b58a2a;
}

.strengths {
    list-style: none;
    /* display: grid; */
    /* gap: 40px; */
}

.strength__item {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr;
    align-items: center;
    border-radius: var(--m-xs);
    background: var(--c-bg);
    overflow: hidden;
}

.strength__item .strength__media {
    height: 100%;
}

.strength__item.is-reverse {
    grid-template-columns: 1.4fr 1.1fr;
}

.strength__item.is-reverse .strength__media {
    order: 2;
}

.strength__item.is-reverse .strength__content {
    order: 1;
}

.strength__media img {
    border-radius: initial;
    height: 100%;
    /* width: 100%; */
    object-fit: cover;
}

.strength__item.is-reverse .strength__media {
    border-radius: 0 14px 14px 0;
}

.strength__content {
    padding: var(--m-l);
}

.strength__item.is-reverse .strength__content {
    border-radius: 14px 0 0 14px;
}

.strength__label {
    font-size: var(--f-xl);
    font-weight: var(--w-b);
    color: color-mix(in srgb, var(--c-accent) 50%, transparent);
    font-family: var(--f-en);
}

.strength__title {
    font-size: var(--f-xl);
    font-weight: var(--w-m);
    margin-block: var(--m-s); }

.strength__meta {
    font-size: 14px;
    line-height: 1.9;
    color: #6d7383;
    margin: 0 0 10px;
}

/* ===============================
   Responsive
=================================*/
@media (max-width: 1024px) {
    .strength__item, .strength__item.is-reverse {
        grid-template-columns: 1fr;
    }

    .strength__media, .strength__item.is-reverse .strength__media {
        order: 1;
        border-radius: 14px 14px 0 0;
        height: 220px;
    }

    .strength__content, .strength__item.is-reverse .strength__content {
        order: 2;
        border-radius: 0 0 14px 14px;
        height: auto;
        /* スマホは高さ固定しない */
    }
}

@media (max-width: 640px) {
    .section--strengths {
        padding: 80px 0;
    }

    .section--strengths .section__title {
        font-size: 26px;
    }

    .strength__content {
        padding: 26px 22px;
    }

    .strength__title {
        font-size: 20px;
    }
}

/* ===============================
   SERVICES
=================================*/
section.section--services {
    background: var(--c-bg);
    padding-block-start: initial; overflow: hidden;
}

.section--services div.arrow {
    filter: drop-shadow(0 20px 20px #c7bdb3);
    padding-bottom: 3rem;
    color: #c7bdb3;
}

.section--services div.arrow:before {
    content: "";
    display: block;
    width: 50vw;
    min-width: 300px;
    height: 10vw;
    max-height: 120px;
    clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
    background: linear-gradient(to bottom, #ffffff 0%, #d9dcf2 100%);
    margin: 0 auto;
}

.services {
    list-style: none;
}

.services > li:nth-child(odd) {
    margin-right: 10%;
}

.services > li:nth-child(even) {
    margin-left: 10%;
}

.service__item.is-reverse .service__media {
    grid-column: 4 / -1;
    order: 1;
}

.service__item.is-reverse .service__content {
    order: 0;
    grid-column: 1 / 4;
}

.service__figure {
    position: relative;
    width: fit-content;
    /* margin-left: auto; */
}

.services > li:nth-child(odd) .service__figure {
    margin-left: auto;
}

.service__figure img {
    max-height: 300px;
    width: auto;
    max-width: 100%;
    /* height: 100%; */
}

.service__figure figcaption {
    font-size: calc(var(--f-max) * 2.5);
    font-weight: var(--w-m);
    line-height: 1;
    font-family: var(--f-en);
    color: var(--c-accent-light);
    color: color-mix(in srgb, var(--c-accent-light) 50%, transparent);
    margin: -1rem 0 0 -1rem;
    position: absolute;
    transform: translateY(-50%);
    top: 100%;
    right: 0;
    font-style: italic;
    /* mix-blend-mode: difference; */
}

.service__figure figcaption p {
}

.service__media {
    grid-column: 1 / 3;
}

.service__content {
    position: relative;
    grid-column: 3 / -1;
}

/* Big number */
.service__no {
    font-size: calc(var(--f-max) * 2.5);
    font-weight: var(--w-m);
    line-height: 1;
    font-family: var(--f-en);
    color: var(--c-accent-light);
    color: color-mix(in srgb, var(--c-accent-light) 50%, transparent);
    margin: -1rem 0 0 -1rem;
    font-style: italic;
}

/* Titles */
.service__title {
    font-size: var(--f-xl);
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: var(--m-xs);
}

.service__opt {
    /* font-size: 13px; */
    /* font-weight: 700; */
    /* color: #5d6474; */
}

.service__sub {
    font-size: var(--f-l);
    color: var(--c-subtext);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-subtext);
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Gold divider line */
.service__line {
    border: none;
    height: 2px;
    background: rgba(181,138,42,0.55);
    width: 100%;
    max-width: 420px;
    margin: 0 0 16px;
}

/* Text */
.service__text {
    /* font-size: 14px; */
    /* line-height: 2.05; */
    /* color: #4f5564; */
    /* margin: 0; */
}

/* Box */
.service__box {
    margin-top: var(--m-m);
    background: #fff;
    border-radius: var(--m-xxs);
    padding: var(--m-s);
}

.service__list {
    padding-left: var(--m-xxs);
}

.service__list li {
    display: flex;
    align-items: baseline;
}

.service__list li:before {
    margin-right: 0.3rem;
}

/* ===============================
   Responsive
=================================*/
@media (max-width: 1024px) {
    .service__item, .service__item.is-reverse {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .service__item.is-reverse .service__media, .service__item.is-reverse .service__content {
        order: initial;
    }

    .service__media {
        /* justify-items: legacy; */
    }

    .service__figure {
        /* max-width: 520px; */
        /* height: 200px; */
    }

    .service__no {
        /* font-size: 72px; */
    }
}

/* ================================
   RESULTS (Section)
================================ */
.section--results {
    background: var(--c-bg);
}

.results {
    list-style: none;
}

.result__item {
    background: #fff;
    border-radius: var(--m-xs);
    padding: var(--m-m);
    position: relative;
}

.result__head {
    display: flex;
    /* align-items: baseline; */
    margin-bottom: var(--m-s);
}

.result__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(122, 143, 182, .14);
    color: #2f5fa8;
    font-weight: 800;
    line-height: 1;
}

.result__title {
    font-size: var(--f-xl);
    font-weight: var(--w-b);
    flex-wrap: wrap;
    align-items: center;
}

.result__title:before {
    font-size: var(--f-max);
    font-weight: 400;
    margin-right: 0.8rem;
    color: var(--c-accent);
    /* display: inline-flex; */
}

.result__title span {
    flex: 1;
    line-height: 1.3;
}

.result__title b {
    display: inline-block;
    background: var(--c-bg);
    padding: 0.5rem 0.7rem;
    line-height: 1.2;
    border-radius: 6px;
    color: var(--c-accent);
    margin-left: 0.8rem;
}

/* ================================
   Before / After
================================ */
.result__compare {
    position: relative;
    align-items: stretch;
}

.compare--before:before {
    content: "";
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 104%;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 15px solid var(--c-accent-light);
    border-right: 0;
}

.compare {
    border-radius: var(--m-xs);
    padding: var(--m-s);
}

.compare__label {
    /* margin: 0 0 10px; */
    /* font-weight: 800; */
    /* letter-spacing: .03em; */
    color: var(--c-subtext);
}

.compare__list {
    display: flex;
    padding-left: var(--m-xxs);
    flex-direction: column;
}

.compare__list li {
    /* display: inline-flex; */
    align-items: center;
}

.compare__list li::before {
    /* content: "・"; */
    color: #7d8aa6;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.compare--before {
    background: #efefef;
    /* Beforeのグレー */
    position: relative;
}

.compare--after {
    background: #f3ead1;
    /* Afterの薄ベージュ */
}

.compare__arrow {
    width: 44px;
    display: grid;
    place-items: center;
    color: rgba(26, 31, 43, .45);
    font-size: 18px;
}

/* footer lead */
.section--results .section__footer-lead {
    text-align: center;
    margin: clamp(28px, 3vw, 40px) 0 0;
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.8;
    font-weight: 700;
    color: #2f5fa8;
}

/* ================================
   Responsive
================================ */
@media (max-width: 820px) {
    .result__compare {
        grid-template-columns: 1fr;
    }

    .compare__arrow {
        width: auto;
        padding: 6px 0;
        transform: rotate(90deg);
        justify-self: center;
    }
}

/* ===============================
   VOICE / CASE
=================================*/
.section--voice {
    background: var(--c-gray-light);
}

.voice-case {
}

.voice-case__head {
    border-left: 2px solid #222;
    padding-left: var(--m-r);
    line-height: 1.5;
    margin-bottom: var(--m-m);
}

.voice-case__label {
    font-family: var(--f-en);
    font-size: var(--f-xxl);
    font-weight: var(--w-b);
    color: var(--c-accent);
}

.voice-case__meta {
    background: #e9e9e9;
    border-radius: 0.5rem;
    \: 1.2;
    padding: 0.5rem 1rem;
    font-size: var(--f-m);
    display: inline-block;
    font-weight: normal;
}

.voice-case__title {
    font-size: var(--f-xl);
    line-height: 1.3;
    font-weight: var(--w-b);
    margin-bottom: var(--m-r);
    /* flex: 1; */
}

.voice-case__grid {
    align-items: stretch;
}

.voice-case__grid section {
    border-radius: var(--m-xs);
    padding: var(--m-r);
    position: relative;
    display: block;
}

.voice-case__grid section:nth-child(1) {
    background: #f7dfe4;
}

.voice-case__grid section:nth-child(1):before {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 102%;
    font-size: 40px;
    color: var(--c-muted);
}

.voice-case__grid section:nth-child(2) {
    background: #c5e5ff;
}

.voice-case__list li {
    align-items: baseline;
    /* display: block; */
}

.voice-case__list li .is-accent {
    font-size: 1.5em;
    color: var(--c-sub);
    font-weight: var(--w-b);
    /* display: block; */
}

.voice-case__list {
    display: flex;
    flex-direction: column;
}

.voice-case__list li:before {
    margin-right: .5rem;
}

.voice-case__result {
    margin-top: 3rem;
    background: var(--c-gray-light);
    border-radius: var(--m-xs);
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    padding: var(--m-r);
    border-radius: var(--m-xs);
    gap: var(--m-r);
}

.voice-case__result .voice-case__list {
    font-size: var(--f-l);
    /* font-weight: var(--w-b); */
    margin-bottom: var(--m-m);
    /* color: var(--c-accent); */
}

.voice-case__subtitle {
    color: var(--c-subtext);
    flex-basis: 100%;
}

.voice-case__voice {
}

.voice-case__bridge {
    font-size: var(--f-l);
    font-weight: var(--w-b);
    margin-bottom: var(--m-xs);
}

.voice-case__pt {
    order: 2;
    flex: 1;
}

.voice-case__comment {
    order: 1;
    flex: 1.5;
}

.voice-case__comment p {
    margin-bottom: var(--m-s);
}

/* ===============================
   CLIENT PROFILE
=================================*/
.section--client {
    /* border-top: 1px solid var(--c-muted); */
    /* background: var(--c-gray-light); */
}

.section--client .u-inner {
    max-width: initial;
}

/* cards grid */
.profiles {
    list-style: none;
    align-items: stretch;
}

.profile__card {
    background: #fff;
    border-radius: var(--m-xs);
    padding: var(--m-r);
    box-shadow: 0 0 30px rgba(0,0,0,0.08);
    height: 100%;
    display: grid;
    align-content: start;
    gap: var(--m-s);
    grid-template-rows: auto auto 1fr;
}

.profile__card:before {
    font-size: calc(var(--f-max) * 2);
    color: var(--c-accent);
}

.profile__icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(112,140,199,0.12);
    color: #708cc7;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 4px;
}

.profile__title {
    font-size: var(--f-l);
    font-weight: 800;
    line-height: 1.5;
}

.profile__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile__list li {
    position: relative;
    /* padding-left: 1.1em; */
    line-height: 1.5;
    display: inline-flex;
    align-items: baseline;
}

.profile__list li::before {
    margin-right: 0.3rem;
    content: "●";
    /* position: absolute; */
    /* left: 0; */
    /* top: 0; */
    color: #7d8aa6;
}

/* ===============================
   Responsive
=================================*/
@media (max-width: 1200px) {
    .profiles {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {
    .profiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .section__footer--emphasis p {
        /* font-size: 16px; */
    }
}

@media (max-width: 520px) {
    .section--client {
        padding: 84px 0;
    }

    .section--client .section__title {
        font-size: 24px;
    }

    .profiles {
        grid-template-columns: 1fr;
    }

    .section__footer--emphasis p {
        /* font-size: 15px; */
    }
}

/* ===============================
   FAQ
================================= */
.section--faq {
    background: var(--c-gray-light);
}

.section--faq .section__inner {
    max-width: 980px;
}

.faq__item {
    background: #fff;
    border-radius: var(--m-xs);
    padding: var(--m-r);
}

.qa__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq__item.is-open .qa__answer {
    max-height: 1000px;
    /* 十分大きい値 */
}

.qa {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--m-xs);
    align-items: start;
}

.qa:before {
    content: "Q";
    font-family: var(--f-en);
    font-size: var(--f-xxl);
    font-weight: var(--w-b);
    line-height: 1;
    color: var(--c-accent);
}

.qa__mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-weight: 900;
    line-height: 1;
}

.qa__mark--q {
    background: rgba(112,140,199,0.14);
    color: #2f5ea8;
}

.qa__mark--a {
    background: rgba(181,138,42,0.16);
    color: #b58a2a;
}

.qa__title {
    font-size: var(--f-l);
    font-weight: bold;
    cursor: pointer;
    /* padding-bottom: var(--m-s); */
}

.qa__answer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--m-xs);
    margin-top: var(--m-s);
}

.qa__answer:before {
    content: "A";
    font-family: var(--f-en);
    font-size: var(--f-xxl);
    font-weight: var(--w-b);
    line-height: 1;
    color: var(--c-sub-dark);
}

.qa__answer p {
    /* margin: 0; */
    /* font-size: 13px; */
    /* line-height: 2.0; */
    color: var(--c-subtext);
}

/* ===============================
   Responsive
================================= */
@media (max-width: 680px) {
    .section--faq {
        padding: 84px 0;
    }

    .section--faq .section__title {
        font-size: 24px;
    }

    .faq__item {
        padding: 16px 16px;
    }

    .qa {
        grid-template-columns: 30px 1fr;
        gap: 12px;
    }

    .qa__mark {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .qa__answer {
        grid-template-columns: 30px 1fr;
        gap: 12px;
    }
}

/* ===============================
   MESSAGE
================================= */
.section--message {
    /* border-top: 1px solid var(--c-gray); */
    background: linear-gradient(0deg, #ffffff 50%, #faf5f2 100%);
}

.section__title--center {
    text-align: center;
}

.message__photo {
    grid-column: 1 / 3;
}

.message__content {
    grid-column: 3 / -1;
}

.message__headline {
    font-size: var(--f-xxl);
    font-weight: var(--w-b);
    line-height: 1.5;
    color: var(--c-sub-dark);
    margin-bottom: var(--m-l);
}

.message__text p {
    margin-bottom: var(--m-r);
}

.message__cta {
    /* margin-top: 18px; */
    font-weight: var(--w-b);
    /* color: #2b2f3a; */
}

.message__sign {
    margin-top: var(--m-r);
    line-height: 1.5;
    text-align: right;
}

.message__sign small {
    margin-right: 0.5rem;
}

.message__sign strong {
}

/* company card */
.company-card {
    background: var(--c-gray-light);
    border-radius: var(--m-xs);
    padding: var(--m-r);
    margin-top: var(--m-l);
    max-width: 780px;
    margin: var(--m-xl) auto 0;
}

.company-card__title {
    margin-bottom: var(--m-s);
    /* font-size: 14px; */
    /* font-weight: 900; */
    /* color: #2b2f3a; */
}

.company-table {
    margin: 0;
}

.company-table__row {
    display: grid;
    grid-template-columns: 1fr 3fr;
    border-top: 1px solid #ddd;
    padding-block: var(--m-xs); }

.company-table__row: first-child {
    /* border-top: 0; */ /* padding-top: 6px; */
}

.company-table__head {
    /* margin: 0; */
    /* font-size: 12px; */
    /* font-weight: 700; */
    color: var(--c-subtext);
}

.company-table__data {
    /* margin: 0; */
    /* font-size: 12px; */
    /* line-height: 1.9; */
    /* color: #2b2f3a; */
}

.company-table__link {
    color: #2f5ea8;
    text-decoration: none;
    border-bottom: 1px solid rgba(47,94,168,0.35);
}

.company-table__link:hover {
    border-bottom-color: rgba(47,94,168,0.85);
}

/* ===============================
   Responsive
================================= */
@media (max-width: 900px) {
    .message {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .message__sign {
        text-align: left;
    }

    .company-table__row {
        grid-template-columns: 80px 1fr;
        gap: 14px;
    }
}

@media (max-width: 680px) {
    .section--message {
        padding: 86px 0;
    }

    .section--message .section__title {
        font-size: 24px;
    }

    .company-card {
        padding: 20px 18px;
    }
}

/* ===============================
   CONTACT
================================= */
.section--contact {
    background: var(--c-bg);
}

.section--contact .section__body {
    max-width: 980px;
    margin: 0 auto;
}

/* top 2 cards */
.contact-steps {
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
    /* gap: 18px; */
    margin-bottom: var(--m-m);
    /* max-width: 820px; */
}

.contact-step {
    background: #fff;
    border-radius: var(--m-xs);
    padding: var(--m-s);
}

.contact-step__num {
    font-size: var(--f-xxl);
    line-height: 1;
    color: var(--c-accent);
}

.contact-step__title {
    margin: var(--m-xs) 0;
    font-size: var(--f-l);
    color: var(--c-accent);
}

.contact-card {
    background: #fff;
    border-radius: var(--m-xs);
    padding: var(--m-l);
}

.contact-card__badge {
    color: var(--c-sub);
    font-size: var(--f-l);
    margin-bottom: var(--m-s);
}

/* fields */
.contact-form__grid {
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
    /* gap: 16px 18px; */
}

.field--full {
    grid-column: 1 / -1;
}

fieldset {
    border: none;
}

.field__label {
    display: block;
    /* margin-bottom: var(--m-xxs); */
    /* font-size: 12px; */
    font-weight: var(--w-m);
    /* color: #2b2f3a; */
}

.field__req {
    color: var(--c-sub);
    margin-left: 4px;
}

.field__input, .field__textarea {
    width: 100%;
    /* border: 1px solid rgba(0,0,0,0.08); */
    border-radius: var(--m-xs);
    padding: var(--m-xs);
    font-size: 16px;
    line-height: 1.5;
    background: var(--c-bg);
}

.field__textarea {
    resize: vertical;
    min-height: 140px;
}

.field__input:focus, .field__textarea:focus {
    border-color: rgba(179,106,42,0.55);
    box-shadow: 0 0 0 4px rgba(179,106,42,0.18);
}

/* radios */
.radios {
    display: flex;
    margin-top: 0.4em;
    /* gap: 0 1rem; */
    flex-wrap: wrap;
}

.radio {
    /* font-size: 12px; */
    /* line-height: 1.7; */
    margin-top: 0;
    display: flex;
    gap: 4px;
    align-items: center;
}

.radio input {
    transform: translateY(1px);
}

/* privacy */
.check {
    display: inline-flex;
    /* gap: 4px; */
    align-items: center;
    margin: 0;
    display: block;
    text-align: center;
}

.check input {
    transform: translateY(1px);
}

/* actions */
.contact-form__actions {
    /* margin-top: 18px; */
    gap: var(--m-s);
}

/* ===============================
   Responsive
================================= */
@media (max-width: 860px) {
    .contact-steps {
        grid-template-columns: 1fr;
    }

    .contact-form__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .section--contact {
        padding: 86px 0;
    }

    .section--contact .section__title {
        font-size: 24px;
    }

    .contact-card {
        padding: 22px 18px 24px;
    }
}

/*
## わたしについて
*/
.section-about:before {
    content: "";
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100vw;
    height: 100%;
    z-index: -1;
    margin: 0 var(--m-fix);
}

.section-about .text_box {
    width: fit-content;
}

.section-about figure {
    position: absolute;
    top: 0;
    right: 0;
    /* width: 100%; */
    height: 100%;
    overflow: hidden;
    margin-right: var(--m-fix);
    z-index: -1;
    /* margin-left: 10%; */
}

.section-about figure img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center right;
    margin-left: auto;
    -webkit-mask-image: linear-gradient(to left, #000000 50%, transparent 80%);
    mask-image: linear-gradient(to left, #000000 50%, transparent 80%);
    border-radius: initial;
    /* right: -10%; */
    /* position: relative; */
}

/*
## サービスについて
*/
.section-service .title {
    background: var(--c-accent);
    border-radius: var(--m-xxs);
    padding: 0.7rem;
    writing-mode: vertical-rl;
    font-family: var(--f-en);
    line-height: 1;
    color: #fff;
    grid-column: 1 / 1;
    grid-row: 1 / 4;
    margin-bottom: initial;
    display: flex;
    gap: 1vw;
    width: calc(100% - 0.5rem);
    height: 100%;
    z-index: 1;
}

.section-service .title span {
    font-weight: 200;
    /* margin-top: 1rem; */
}

.service-num dt {
    background: #fff;
    border-radius: 0.3rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    font-weight: bold;
    font-size: var(--f-l);
    align-items: center;
    position: sticky;
    top: 0;
}

.service-num dt small {
    font-size: 8px;
    /* margin: 0.2rem; */
}

.service-num dd {
    font-weight: var(--w-b);
    color: #fff;
    /* position: sticky; */
    /* top: 0; */
}

.section-service {
    padding-top: var(--m-xxl);
    padding-bottom: var(--m-xxl);
}

.section-service:before {
    content: "";
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 var(--m-fix);
    /* background: #fff; */
    z-index: -1;
}

.section-service .u-inner {
    display: flex;
    flex-wrap: wrap;
}

.section-service .button {
    flex-basis: 100%;
}

.section-service .column {
    width: 100%;
    /* justify-content: space-between; */
    flex-direction: column;
    position: relative;
    row-gap: 0.5rem;
}

.section-service a {
}

.section-service .text_box {
    /* flex-basis: 100%; */
}

.section-service .service-bg {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* justify-content: flex-end; */
    grid-column: 8 / -1;
    grid-row: 1 / 4;
    position: relative;
    height: 100%;
}

.section-service .service-bg .sticky {
    position: sticky;
    top: 15%;
}

.section-service .service-bg figcaption {
    font-size: calc(var(--f-max) * 3);
    line-height: 0.9;
    font-weight: 100;
    color: var(--c-muted);
    color: color-mix(in srgb, var(--c-gray) 50%, transparent);
    /* margin-bottom: -3rem; */
    /* writing-mode: vertical-rl; */
    font-family: var(--f-en);
}

.section-service .service-bg img {
    position: relative;
    width: 150%;
    will-change: opacity;
}

.section-service .service-bg .sticy {
    position: sticky;
    top: 20%;
}

.service-bg .sticky .screen {
    opacity: 0;
    transition: opacity 1s ease .15s;
    /* 0.15s待ってから消える */
}

.service-bg .sticky .screen.is-active {
    opacity: 1;
    transition-delay: 0s;
}

.service-bg.is-hovering .sticky .screen {
    transition: opacity .35s ease;
    /* 速く */
}

.service-bg .sticky .mockup {
    z-index: 2;
    /* 常に一番上 */
    pointer-events: none;
}

.service-bg .sticky .screen {
    z-index: 1;
}

.section-service .service-bg img:first-child {
    /* z-index:1; */
}

.section-service .service-bg img:not(:first-child) {
    position: absolute;
    top: 0;
    z-index: -1;
}

.section-service .nav-container {
    position: relative;
    display: flex;
    /* gap: 1vw; */
    /* margin-top: var(--m-xl); */
    grid-column: 2 / 8;
}

.section-service .service-title {
    background: var(--c-accent);
    writing-mode: vertical-rl;
    color: #fff;
    border-radius: var(--m-xxs);
}

.menu-item {
    counter-increment: count 1;
    margin-left: calc(clamp(1.5rem, 3vw, 3rem) * -1);
    order: 2;
    box-shadow: 0 10px 10px var(--c-bg);
}

div:nth-of-type(1).menu-item {
    grid-column: 2 / 8;
}

div:nth-of-type(2).menu-item {
    grid-column: 2 / 8;
}

div:nth-of-type(3).menu-item {
    grid-column: 2 / 8;
}

.menu-item p {
    margin-bottom: 2rem;
    font-size: var(--f-s);
    position: relative;
    z-index: 4;
    line-height: 1.5;
}

.menu-item a {
}

.menu-item .num-list {
    list-style: none;
    counter-reset: num;
    gap: 0.3rem;
    display: flex;
    flex-direction: column;
    font-weight: var(--w-b);
}

.menu-item .num-list li {
    counter-increment: num;
    position: relative;
    gap: 0.3rem;
    display: flex;
    align-items: baseline;
}

.menu-item .num-list li::before {
    content: counter(num);
    /* position: absolute; */
    /* left: 0; */
    /* top: 0; */
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background: var(--c-accent-dark);
    color: #fff;
    text-align: center;
    line-height: 1.4;
    font-size: 0.85em;
    font-family: var(--f-en);
}

.section-service .menu-item a {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    padding: 2vmax;
    padding-block: 3rem; background: linear-gradient(var(--c-accent) 0 0) left /var(--d, 0%) 100% no-repeat;
    background-color: #fff;
    color: initial;
    border-radius: var(--m-xxs);
    align-items: flex-start;
}

.section-service .menu-item a:hover {
    opacity: 1;
    color: #fff;
}

.section-service .menu-item a::before {
    content: "0" counter(count);
    font-size: calc(var(--f-max) * 2);
    font-style: italic;
    font-family: var(--f-en);
    font-weight: 100;
    color: var(--c-gray-light);
    line-height: 1;
    z-index: 1;
    display: block;
    position: absolute;
    bottom: 3%;
    right: 3%;
}

.section-service .menu-item .text_box {
    position: relative;
    z-index: 3;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.section-service .menu-item h3 {
    display: flex;
    /* flex-direction: column; */
    /* justify-content: flex-start; */
    position: relative;
    margin-bottom: var(--m-m);
    /* padding-left: 0.8rem; */
    line-height: 1.5;
    font-size: var(--f-xxl);
    font-weight: 900;
    font-family: var(--f-sans);
    color: var(--c-sub);
    line-height: 1.3;
    /* color: var(--c-accent-dark); */
}

.section-service .menu-item .copy {
    font-size: var(--f-xl);
    font-weight: var(--f-m);
}

.section-works:before {
    content: "";
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 var(--m-fix);
    /* background: #fff; */
    background: linear-gradient(180deg, #fff 0%, var(--c-bg) 100%);
    z-index: -1;
}

section.section-works .container {
    overflow: visible;
    padding: var(--m-m) 0 var(--m-xl);
    width: 100%;
}

.section-works .list {
    height: initial;
    margin: 0 calc(var(--m-fix) + clamp(1.5rem, 3vw, 3rem));
}

.section-works .list li {
    grid-column: span 4;
    height: 100%;
}

.section-works .list li a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.section-works .list figure {
    /* margin-bottom: var(--m-s); */
}

.section-works .list figure img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    /* filter: brightness(0.95); */
}

.section-works .list .title {
}

.section-works .list .work_cat {
    margin-block: 1rem;margin-right: auto;
    display: block;
    font-size: var(--f-xs);
    background: var(--c-gray-light);
    padding: 0.5rem 1rem;
    border-radius: 3rem;
    line-height: 1;
}

@media screen and (max-width: 1024px) {
    .gBody {
    }

    .main-img .paper, .main-img .baloon {

    }
}

@media screen and (max-width: 767px) {
    .hero {
       
    }

    .hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    }

    .hero__inner .hero__content {
    padding: initial;
    }

    .hero__title {
        font-size: 38px;
    }

    .hero__meta {
        transform: scale(0.75);
    }

    .main-img .information {
        /* position: relative; */
        all: unset;
        display: flex;
        flex-direction: row;
        position: relative;
        justify-content: center;
        align-items: center;
        margin-top: -20%;
        margin-bottom: 7rem;
    }

    .hero__media {
        -webkit-mask-image: none;
        mask-image: none;
        position: relative;
        height: auto;
        top: initial;
        right: initial;
        width: 100%;
        bottom: 2rem;
    }

    .main-img .loopslide {
        position: absolute;
        /* bottom: 0; */
        flex-direction: row;
        animation: loopSlideX 20s linear infinite;
        height: min-content;
        /* padding-bottom: 3rem; */
    }

    @keyframes loopSlideX {
        from {
            transform: translateX(0%);
        }

        to {
            transform: translateX(-50%);
        }
    }

    .section__lead {
        /* margin-top: var(--m-m); */
        /* font-size: var(--f-m); */
        /* text-align: left; */
    }

    .card__title span {
        display: block;
    }

    .cards--challenges {
        gap: var(--m-xl);
        width: 90%;
        margin: 0 auto;
    }

    .grid.cards--challenges > li.card {
        grid-column: span 1!important;
    }

    .services > li:nth-child(odd) {
        margin-right: initial;
    }

    .services > li:nth-child(even) {
        margin-left: initial;
    }

    .service__figure {
        /* max-height: 160px; */
        width: 80%;
        max-height: 200px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .service__figure img {
        max-height: 200px;
    }

    .service__no {
        margin-top: -25%;
    }

    .result__title b {
        flex-basis: 100%;
        margin-top: 0.5rem;
        margin-left: initial;
    }

    .compare--before:before {
        transform: translateX(-50%) rotate(90deg);
        top: 100%;
        left: 50%;
    }

    /* ===============================
   VOICE / CASE
=================================*/
    .voice-case__head {
        flex-direction: column;
    }

    .voice-case__result {
        flex-direction: column;
    }

    .voice-case__pt {
        order: 1;
    }

    /*ここまで*/
    .main-img .main-bg img {
        min-height: 600px;
    }

    section.section-about {
        padding-block-start: initial; }

    .section-about figure {
        height: 400px;
        width: calc(100vw - var(--m-fix));
        position: relative;
        margin: 0 var(--m-fix) -3rem;
        order: -1;
    }

    .section-about figure img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: 80% center;
        -webkit-mask-image: linear-gradient(to bottom, #000000 70%, transparent 90%);
        mask-image: linear-gradient(to bottom, #000000 70%, transparent 90%);
    }

    .section-service {
        padding-top: var(--m-xxl);
        padding-bottom: var(--m-xxl);
    }

    .section-service .title {
        writing-mode: initial;
        grid-row: initial;
        order: 1;
        width: 100%;
    }

    .menu-item {
        margin-left: initial;
        width: 100%;
    }

    .section-service .column {
        display: flex;
        /* flex-direction: column-reverse; */
    }

    .section-service .service-bg {
    }

    .section-service .service-bg .sticky {
        position: relative;
        top: initial;
        margin-left: 10%;
        z-index: 1;
    }

    .section-service .service-bg .sticky img {
        width: 120%;
    }

    .section-service .service-bg figcaption {
        font-size: calc(var(--f-max) * 2.8);
        position: absolute;
        /* transform: translateX(-50%); */
        top: 0;
        left: 0;
    }

    /*
  ## サービスのご案内
  */
    .section-service .nav-container {
        width: 100%;
        margin-left: initial;
    }

    .menu-items {
        flex-direction: column;
    }

    .menu-item:not(:first-child)::after {
        width: 100%;
        height: 1px;
        position: absolute;
    }

    .menu-item:last-child {
        border: none;
    }

    .menu-item img {
        transition: opacity 0.3s ease;
    }

    .menu-item p {
        margin-top: 10px;
        font-size: 14px;
        position: relative;
        z-index: 4;
        line-height: 1.5;
    }

    .service .list li a {
        position: absolute;
        display: flex;
        width: 100%;
        height: 100%;
        top: 0;
        flex-direction: column;
        padding: 2vmax;
        color: #fff;
        justify-content: flex-end;
    }

    section.section-company {
        display: flex;
        flex-direction: column;
    }

    .section-company .u-inner {
        order: 2;
    }

    .section-company figure {
        margin-top: calc(var(--m-xxl) * -1);
        order: 1;
    }

    .section-company figure img {
        -webkit-mask-image: linear-gradient( to bottom, #000000 60%, transparent 90% );
        mask-image: linear-gradient(to bottom, #000000 60%, transparent 90%);
    }
}

/*
## フォーム
*/
section.form {
    position: relative;
}

section.form:before {
    content: "";
    background: #f0efe7;
    display: block;
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    margin: 0 var(--m-fix);
}

section.form .u-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

section.form .column {
    grid-column: span 8;
}

.form figure {
    grid-column: span 4;
    aspect-ratio: 5 / 7;
    z-index: 1;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.contents .form figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to bottom, #000000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000000 50%, transparent 100%);
}

p.line a {
    display: flex;
    align-items: center;
    line-height: 1;
    gap: 0.5rem;
}

p.line a img {
    width: 48px;
    display: inline-block;
    vertical-align: top;
}

.form .text_box {
    margin-bottom: var(--m-l);
}

.form .text_box dl {
    margin: var(--m-l) 0;
    position: relative;
}

.form .text_box dl dt strong {
    font-weight: normal;
}

dl.line dd a {
    display: flex;
    align-items: center;
}

dl.line dd a img {
    width: 24px;
    height: auto;
    margin-right: 0.4rem;
}

.form dd {
    grid-column: span 2;
}

.form dd.policy {
    border-radius: var(--m-xxs);
}

.mw_wp_form_preview dd.policy {
    background-color: initial;
}

section.form .mw_wp_form p {
    margin-top: var(--m-r);
}

section.form dl dt {
    font-weight: bold;
    line-height: 1.5;
}

.contact_form {
    width: 100%;
    margin: 0 auto;
}

.contact_form .row {
    padding: 1rem 0.5rem;
    border-top: 1px solid rgb(0 0 0 / 6%);
    align-items: baseline;
}

.form .row dt {
    grid-column: span 1;
}

.contact_form .row dt strong {
    font-size: var(--f-r);
    margin-right: 0.5rem;
}

.contact_form .row dd {
    font-size: 16px;
    line-height: 1.5;
}

.contact_form .row dd label.day1, .contact_form .row dd label.day2 {
    display: block;
}

.contact_form dd .kome {
    font-weight: normal;
    color: #8d2b2b;
    display: block;
    margin-bottom: 0.5em;
    font-size: 90%;
}

.mw_wp_form_preview dd .kome {
    display: none;
}

.contact_form dt small {
    color: #ff4040;
    font-size: 11px;
    font-weight: bold;
    margin: 0 0.3rem;
    display: inline-block;
}

.mw_wp_form_preview dt strong {
    color: #999;
    font-weight: 400;
}

.mw_wp_form_preview dt small {
    display: none;
}

.contact_form > tbody > tr > td {
    vertical-align: baseline;
}

form .error {
    font-size: 80%;
    color: #c40000;
    font-weight: var(--w-m);
    margin-top: 0.3rem;
    display: block;
}

form .error:before {
    content: "↑";
    margin: 0 0.3rem;
}

form .mwform-tel-field, form .mwform-zip-field {
    display: flex;
    align-content: center;
    gap: 0.3rem;
}

/**
 * tel and zip
 */
form .mwform-tel-field input[type="text"], form .mwform-zip-field input[type="text"] {
    display: initial;
    width: initial;
    vertical-align: baseline;
}

form input[type=text]::placeholder {
    color: #bbb;
}

input::placeholder {
    color: #bbb;
}

.contact_form dd.list span {
    display: inline-block;
    margin: 0;
}

.contact_form dd.list span {
    display: inline-block;
    margin: 0!important;
}

.mwform-radio-field {
    /* margin-top: 1rem; */
    display: block;
}

form .policy label {
    display: block;
    cursor: pointer;
    margin-right: initial;
    padding-left: 23px;
    padding-bottom: 5px;
    color: #ff4040;
    position: relative;
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-size: var(--f-s);
    font-weight: bold;
    border-bottom: 2px solid #ff4040;
}

.contact_form dd.policy label span {
    line-height: 1.3;
    display: flex;
    align-items: center;
}

.contact_form dd.policy label input[type=radio] {
    display: none;
}

.contact_form dd.policy label span:before {
    border: 2px solid #ff4040;
    border-radius: 50%;
    content: "";
    display: block;
    height: 18px;
    top: 0;
    left: 0;
    position: absolute;
    width: 18px;
}

.contact_form dd.policy label span:after {
    background: #ff4040;
    border-radius: 50%;
    content: "";
    display: block;
    height: 8px;
    left: 5px;
    top: 5px;
    opacity: 0;
    position: absolute;
    width: 8px;
}

.contact_form dd.policy label input[type=radio]:checked + span:after {
    opacity: 1;
}

.contact_form dd .pref, .contact_form dd .type, .contact_form dd .academic {
    position: relative;
    outline: 0;
    border-radius: var(--m-xxs);
    padding: 0;
    color: initial;
    vertical-align: top;
}

input[name=addr1],input[name=addr2] {
    width: 100%;
    margin-top: 0.4em;
}

textarea[name=inquiry] {
    width: 100%;
    height: initial;
    vertical-align: top;
}

.contact_form dd .pref select, .contact_form dd .type select, .contact_form dd .academic select {
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0.5rem;
    padding-right: 26px;
    cursor: pointer;
    font-size: 16px;
    outline: none;
    color: initial;
    min-height: 38px;
    line-height: 1;
    overflow: visible;
    background: #fff;
    border-radius: var(--m-xxs);
    vertical-align: top;
}

.contact_form dd .pref:after, .contact_form dd .type:after, .contact_form dd .academic:after {
    content: "";
    position: absolute;
    top: 13px;
    right: 9px;
    pointer-events: none;
    width: 11px;
    height: 7px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: #666;
}

.mw_wp_form_confirm .contact_form dd label {
    cursor: initial;
}

.mw_wp_form_confirm .contact_form dd .pref, .mw_wp_form_confirm .contact_form dd .type {
    border: none;
    background-color: transparent;
    vertical-align: initial;
    margin: initial;
}

.mw_wp_form_confirm .contact_form dd .pref:after, .mw_wp_form_confirm .contact_form dd .type:after {
    content: none;
    font-family: 'icomoon';
    position: absolute;
    top: 8px;
    right: 12px;
    pointer-events: none;
    line-height: 1;
    font-size: 20px;
    z-index: 1;
}

.contact_form dd > .text {
    color: #666;
    font-size: .9em;
    line-height: 1.4;
    margin-bottom: .5em;
}

.mw_wp_form_confirm .contact_form dd > .text {
    display: none;
}

.contact_form dd.policy .box {
    font-size: var(--f-xs);
    color: #666;
    display: block;
    margin-bottom: 1em;
    overflow: auto;
    height: 300px;
    border-radius: var(--m-xxs);
    background-color: #fff;
    margin-top: 0;
    position: relative;
    line-height: 1.5;
    border: 10px solid #fff;
}

.mw_wp_form_confirm .contact_form dd.policy .box {
    display: none;
}

.contact_form dd.policy .box h1 {
    font-size: var(--f-r);
    font-family: initial;
    margin-bottom: 0.5em;
    color: #666;
    font-weight: bold;
}

.contact_form dd.policy h2 {
    font-size: var(--f-s);
    color: #666;
    font-family: initial;
    margin: 1em 0;
    font-weight: bold;
}

.contact_form dd.policy .box h2:before {
    content: "─";
}

.contact_form dd.policy .box h2:after {
    content: none;
}

.contact_form dd.policy .box ol {
    margin-left: 1.4em;
    margin-top: .6em;
}

.contact_form dd.policy .box p > b {
    display: block;
}

.contact_form dd.policy .box .textR {
    text-align: right;
}

.button_box {
    margin: 2em auto;
    width: fit-content;
    text-align: center;
    display: flex;
    gap: var(--m-m);
}

button[name=submitBack] {
    background: none;
    color: initial;
    padding: inherit;
    text-decoration: underline;
    color: var(--c-subtext);
}

.note b {
    display: block;
}

.button {
    margin: 3em auto;
    width: fit-content;
}

.terms {
    font-size: .8em;
    color: #666;
    line-height: 1.4;
    margin: .5em 0;
    overflow: scroll;
    height: 250px;
    border-radius: 6px;
    padding: 1em;
    background-color: #efefef;
}

.terms h1 {
    font-size: 1.5em;
}

.terms h2 {
    font-size: 1.3em;
    margin-top: 1em;
}

.p-contact .ui-datepicker select.ui-datepicker-month, .p-contact .ui-datepicker select.ui-datepicker-year {
    width: initial;
}

.p-contact .ui-widget.ui-widget-content {
    box-shadow: 0 10px 10px rgb(0 0 0 / 5%);
    border-radius: 10px;
    border: none;
    font-size: 1em;
    margin-top: 0.3em;
}

.p-contact .ui-widget-header {
    border: none;
    border-radius: 10px;
}

.p-contact .ui-datepicker th {
    padding: 0.2em;
    align: center;
}

.p-contact .ui-state-default, .p-contact .ui-widget-content .ui-state-default, .p-contact .ui-widget-header .ui-state-default, .p-contact .ui-button, html .p-contact .ui-button.ui-state-disabled:hover, html .p-contact .ui-button.ui-state-disabled:active {
    border: none;
    border-radius: 6px;
}

@media print {
    .main_img.sticky .slide {
        position: relative !important;
        right: 0px;
    }

    .main_img {
        height: 80vh;
    }

    section.message.sticky.end > figure {
        position: absolute;
        top: initial;
    }

    .message figure {
        max-height: 100%;
    }

    .message {
        padding-top: initial;
    }
}