/* stylelint-disable property-no-vendor-prefix */
.main {
    background-color: var(--colorBg);
    position: relative;
    transform: rotateZ(90deg);
    transform-origin: top left;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.main.visible {
    transform: rotateZ(0deg);
}

.main.no-transition {
    transition: none;
}

.bgTexture {
    height: 100%;
    left: 0;
    object-fit: cover;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

/* ------------------------------------------------
    About
------------------------------------------------- */
.about {
    container-type: inline-size;
    padding-block: 150px 216px;
    position: relative;
}

.about__inner {
    container-type: inline-size;
    margin-inline: auto;
    max-width: 1200px;
}

.about__heading,
.about__catch,
.about__lead {
    opacity: 0;
    position: relative;
    transition:
        opacity 0.7s 0.8s ease-in-out,
        visibility 0.7s 0.8s ease-in-out,
        translate 0.5s 0.8s ease-in-out;
    translate: 0 12px;
    visibility: hidden;
}

body:has(.hero.animated) .about__heading,
body:has(.hero.animated) .about__catch,
body:has(.hero.animated) .about__lead {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
}

.about__heading {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-inline: auto;
    max-width: 1200px;
    padding-bottom: 2.67cqi;
    padding-inline: 35px;
}

.about__heading--ja {
    color: var(--colorOrange);
    font-size: 35px;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.about__content {
    margin-inline: auto;
    overflow-x: clip;
    padding-top: 4.63cqi;
    position: relative;
}

.about__content::before {
    left: 0;
}

.about__content::after {
    right: 0;
}

.about__bg {
    height: 100%;
    height: 295.8cqi;
    left: 50%;
    max-width: unset;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 100cqi;
    z-index: -1;
}

.about__catch {
    margin-inline: auto;
    position: relative;
    width: 67.17cqi;
}

.about__catchText {
    display: flex;
    margin-inline: auto;
    position: relative;
}

.about__catchLine {
    clip-path: inset(0 100% 0 0);
    left: 51%;
    mix-blend-mode: multiply;
    position: absolute;
    top: 62.4%;
    transform: translate(-50%, -50%);
    transition: clip-path 0.05s 1.6s ease-in;
    z-index: 0;
}

body:has(.hero.animated) .about__catchLine {
    clip-path: inset(0);
}

.about__lead {
    margin-top: 13.6cqi;
}

.about__paragraph {
    font-size: 2.08cqi;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 5.35cqi;
    text-align: center;
}

.about__paragraph--accent {
    color: var(--colorDarkOrange);
}

.about__paragraph + .about__paragraph {
    margin-top: 5.55cqi;
}

.about__underline {
    position: relative;
}

.about__underline img {
    bottom: 0;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.about__underline--type1 img {
    mix-blend-mode: multiply;
    transform: translate(-50%, 29.8%);
    width: 36.75cqi;
}

.about__underline--type2 img {
    mix-blend-mode: multiply;
    transform: translate(-50%, -29%);
    width: 48cqi;
}

@media (max-width: 768px) {
    .about {
        container-type: inline-size; /* Design inline size is 390px */
        padding-block: 80px 120px;
    }

    .about__heading {
        align-items: flex-start;
        container-type: inline-size;
        flex-direction: column;
        padding-bottom: 3cqi;
        padding-inline: 0;
        white-space: nowrap;
        width: 82.26%;
    }

    .about__heading--en {
        width: 21.82cqi;
    }

    .about__heading--ja {
        font-size: 6.5459cqi;
        letter-spacing: 0.15em;
    }

    .about__content {
        background-image: repeating-linear-gradient(var(--colorLightOrange), var(--colorLightOrange) 1px, var(--colorBg) 1px, var(--colorBg) 13.33cqi);
        font-size: 6.5625cqi;
        padding-top: 14.9cqi;
        z-index: -1;
    }

    .about__content::before,
    .about__content::after {
        background: var(--colorBg);
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        width: 8.974cqi;
        z-index: -1;
    }

    .about__content::before {
        left: 0;
    }

    .about__content::after {
        right: 0;
    }

    .about__bg {
        display: none;
        height: 516.15cqi;
        width: 82cqi;
    }

    .about__catch {
        width: 87.18cqi;
    }

    .about__catchLine {
        top: 61.5%;
        width: 41.3cqi;
    }

    .about__lead {
        margin-top: 15.8cqi;
    }

    .about__paragraph {
        font-size: 3.857cqi;
        line-height: 13.6cqi;
    }

    .about__paragraph + .about__paragraph {
        margin-top: 12.6cqi;
    }

    .about__underline--type1 img {
        width: 68.46cqi;
    }

    .about__underline--type3 img {
        bottom: 0;
        left: 50%;
        mix-blend-mode: multiply;
        transform: translate(-50%, -2cqi);
        width: 77cqi;
    }

    .about__underline--type4 img {
        bottom: 0;
        height: 4.61cqi;
        left: 49%;
        mix-blend-mode: multiply;
        transform: translate(-50%, -2cqi);
        width: 18.2cqi;
    }
}

/* Worries */
.worries {
    margin-top: 18.2cqi;
}

.worries__heading {
    display: grid;
    justify-items: center;
    margin-inline: auto;
    position: relative;
    width: 83.17cqi;
}

.worries__heading--text {
    position: relative;
}

.worries__heading--line {
    bottom: -3cqi;
    mix-blend-mode: multiply;
    position: absolute;
    right: 12cqi;
    width: 39cqi;
}

.worries__body {
    margin-top: 13.6cqi;
    position: relative;
}

.worries__paragraph {
    font-size: 2.08cqi;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 2.6;
    text-align: center;
}

.worries__paragraph + .worries__paragraph {
    margin-top: 5.4cqi;
}

.worries__paragraph--accent {
    color: var(--colorDarkOrange);
}

.worries__underline {
    position: relative;
}

.worries__underline img {
    bottom: 0;
    left: 50%;
    mix-blend-mode: multiply;
    position: absolute;
    transform: translate(-51.3%, 33%);
    z-index: 1;
}

@media (max-width: 768px) {
    .worries {
        margin-top: 29.3cqi;
    }

    .worries__heading {
        width: 90.77cqi;
    }

    .worries__heading--line {
        bottom: 51.6cqi;
        left: 5.5cqi;
        width: 64.4cqi;
    }

    .worries__body {
        margin-top: 24.5cqi;
    }

    .worries__paragraph {
        font-size: 3.857cqi;
        line-height: 3.45;
    }

    .worries__paragraph + .worries__paragraph {
        margin-top: 13.5cqi;
    }

    .worries__underline--type1 {
        container-type: inline-size; /* Design inline size is 390px */
    }

    .worries__underline--type1 img:nth-of-type(1) {
        height: 4.9cqi;
        left: 50%;
        object-fit: cover;
        transform: translate(-22cqi, -12cqi);
        width: 33cqi;
    }

    .worries__underline--type1 img:nth-of-type(2) {
        height: 4.9cqi;
        left: 50%;
        max-width: unset;
        object-fit: cover;
        transform: translate(-31cqi, 1.4cqi);
        width: 52cqi;
    }
}

/* Funny */
.funny {
    margin-top: 228px;
}

.funny__heading {
    display: flex;
    justify-content: center;
    position: relative;
}

.funny__heading--line {
    bottom: -54px;
    left: 50%;
    mix-blend-mode: multiply;
    position: absolute;
    transform: translateX(-50%);
    z-index: -1;
}

.funnyList {
    display: grid;
    gap: 60px;
    margin-inline: auto;
    margin-top: 72px;
    max-width: 854px;
}

.funnyList__item {
    border: 2px solid var(--colorOrange);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 308px 1fr;
    height: 300px;
    max-width: 700px;
    padding: 24px 0;
    position: relative;
    width: 100%;
}

.funnyList__item:nth-of-type(2n) {
    margin-left: auto;
}

.funnyList__step {
    align-content: center;
    border-right: 1px solid var(--colorOrange);
    display: inline-grid;
    place-items: center center;
    row-gap: 16px;
}

.funnyList__step p {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
}

.funnyList__illust {
    display: grid;
    place-items: center;
}

.funnyList__allow {
    bottom: -148px;
    left: -12px;
    position: absolute;
    z-index: 1;
}

.funnyList__item:nth-of-type(2n) .funnyList__allow {
    left: auto;
    right: -12px;
}

@media (max-width: 924px) {
    .funny {
        margin-top: 120px;
    }

    .funnyList {
        container-type: inline-size;
        justify-items: center;
    }

    .funnyList__item {
        container-type: inline-size;
        grid-template-columns: auto;
        height: auto;
        width: 82.3cqi; /* Design inline size is 321px */
    }

    .funnyList__item:nth-of-type(2n) {
        margin-inline: auto;
    }

    .funnyList__step {
        border-bottom: 1px solid var(--colorOrange);
        border-right: none;
        margin-inline: auto;
        padding-bottom: 6.23cqi;
        width: 80.9%;
    }

    .funnyList__step img {
        width: 28.975cqi;
    }

    .funnyList__step p {
        font-size: 5.6cqi;
    }

    .funnyList__illust {
        margin-inline: auto;
        padding-top: 6.23cqi;
        width: 80.9%;
    }

    .funnyList__allow {
        bottom: -7.9cqi;
        left: 3.84cqi;
        width: 16.56cqi;
    }

    .funnyList__item:nth-of-type(2n) .funnyList__allow {
        left: auto;
        right: 0;
    }
}

@media (max-width: 756px) {
    .funnyList {
        gap: 30px;
        margin-top: 60px;
    }

    .funny__heading {
        container-type: inline-size;
        padding-inline: 35px 37px;
    }

    .funny__heading--line {
        bottom: -5.3cqi;
        width: 59.375cqi;
    }
}

/* ------------------------------------------------
    Purpose
------------------------------------------------- */
.purpose {
    background-image:
        linear-gradient(0deg, transparent calc(100% - 1px), var(--colorLightOrange) calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), var(--colorLightOrange) calc(100% - 1px));
    background-position: center center;
    background-repeat: repeat;
    background-size: 60px 60px;
    border-bottom: 1px solid var(--colorLightOrange);
    border-top: 1px solid var(--colorLightOrange);
    padding: 140px 0 110px;
    position: relative;
}

.purpose::before {
    background: var(--colorLightOrange);
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    top: -11px;
    width: 100%;
}

.purpose::after {
    background: var(--colorLightOrange);
    bottom: -11px;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%;
}

.purpose__heading {
    container-type: inline-size;
}

.purpose__title {
    margin-inline: auto;
    max-width: fit-content;
    position: relative;
}

.purpose__title--text {
    position: relative;
}

.purpose__title--line {
    bottom: -12%;
    left: 0;
    mix-blend-mode: multiply;
    position: absolute;
    width: 21.28cqi;
}

.purpose__subtitle {
    font-size: 35px;
    font-weight: 700;
    line-height: 2;
    margin-top: -24px;
    text-align: center;
}

.purpose__subtitle span {
    position: relative;
}

.purpose__subtitle img {
    bottom: -15%;
    left: 0;
    mix-blend-mode: multiply;
    position: absolute;
    z-index: -1;
}

.purpose__body {
    margin-top: 80px;
}

.purpose__body p {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 3;
    text-align: center;
}

.purpose__body--accent {
    color: var(--colorDarkOrange);
}

.purpose__body--break {
    display: inline-block;
}

.purpose__body p + p {
    margin-top: 64px;
}

.purposeImage__figure {
    position: relative;
}

.purposeImage__circle {
    container-type: inline-size;
    width: 54cqi;
}

.purposeImage__line {
    height: auto;
    left: 23cqi;
    position: absolute;
    top: 41cqi;
    width: 49.5cqi;
    z-index: -1;
}

.purposeImage__figureNotes {
    color: var(--colorDarkOrange);
    font-size: 1.6cqi;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.875;
    margin-top: 4cqi;
    text-align: center;
}

.purposeImage {
    align-items: center;
    column-gap: 48px;
    container-type: inline-size; /* Design inline size is 1000px */
    display: flex;
    justify-content: center;
    margin-inline: auto;
    margin-top: 80px;
    max-width: 1000px;
}

.purposeImage__inner {
    align-items: flex-start;
    column-gap: 1.6cqi;
    display: flex;
}

.purposeImage__list {
    display: grid;
    gap: 3.2cqi;
}

.purposeImage__item:nth-of-type(n + 2) {
    margin-top: 2.4cqi;
}

.purposeImage__item img {
    height: 6cqi;
    max-height: 60px;
    mix-blend-mode: multiply;
    width: auto;
}

.purposeImage__title {
    font-size: 2.5cqi;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-top: 0.8cqi;
}

.purposeImage__title span {
    font-size: 2cqi;
}

.purposeImage__item ul {
    font-size: 1.6cqi;
    letter-spacing: 0.1em;
    line-height: 2;
    margin-top: 1cqi;
}

.purposeImage__engage {
    height: 63.4cqi;
    width: 9.8cqi;
}

.purposePoint {
    column-gap: 3.33cqi;
    container-type: inline-size; /* Design inline size is 960px */
    display: flex;
    justify-content: space-between;
    margin-inline: auto;
    margin-top: 164px;
    max-width: 960px;
}

.purposePoint__item {
    align-items: center;
    aspect-ratio: 1;
    border: 3px solid var(--colorDarkOrange);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    height: 31cqi;
    justify-content: center;
    position: relative;
    width: 31cqi;
}

.purposePoint__item:nth-of-type(2) {
    position: relative;
    top: -50px;
}

.purposePoint__arrow {
    position: absolute;
    z-index: 1;
}

.purposePoint__item:nth-of-type(1) .purposePoint__arrow {
    height: 12.5cqi;
    mix-blend-mode: multiply;
    right: -6.77cqi;
    top: 1.77cqi;
    width: 12.39cqi;
}

.purposePoint__item:nth-of-type(2) .purposePoint__arrow {
    height: 12.5cqi;
    mix-blend-mode: multiply;
    right: -9.44cqi;
    top: 3.54cqi;
    width: 12.6cqi;
}

.purposePoint__heading {
    color: var(--colorDarkOrange);
    font-size: 4.167cqi;
    font-weight: bolder;
    letter-spacing: 0.1em;
    line-height: 1.5;
}

.purposePoint__image {
    height: 4.89cqi;
    margin-top: 0.625cqi;
    width: auto;
}

.purposePoint__body {
    font-size: 1.67cqi;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.83;
    margin-top: 1.46cqi;
    text-align: center;
}

@media (max-width: 768px) {
    .purpose {
        background-image:
            linear-gradient(0deg, transparent calc(100% - 1px), color-mix(in srgb, var(--colorLightOrange), transparent 40%) calc(100% - 1px)),
            linear-gradient(90deg, transparent calc(100% - 1px), color-mix(in srgb, var(--colorLightOrange), transparent 40%) calc(100% - 1px));
        background-size: 32px 32px;
        margin-top: 40px;
        padding-block: 80px 27.18cqi;
    }

    .purpose__inner {
        max-width: 84%;
        padding-inline: 0;
    }

    .purpose__subtitle {
        font-size: 6.5625cqi;
        margin-top: 12.5cqi;
    }

    .purpose__subtitle span::before {
        height: 12px;
    }

    .purpose__body {
        container-type: inline-size;
        margin-top: 12.5cqi;
    }

    .purpose__body p {
        font-size: 4.56cqi;
        text-align: left;
    }

    .purpose__body p + p {
        margin-top: 12.5cqi;
    }

    .purpose__body--break {
        display: inline;
    }

    .purpose__body p br {
        display: none;
    }

    .purposeImage {
        display: grid;
        grid-template-columns: 100%;
        margin-inline: auto;
        margin-top: 64px;
        row-gap: 48px;
    }

    .purposeImage__inner {
        column-gap: 2.76cqi;
        justify-content: space-between;
    }

    .purposeImage__figure {
        display: grid;
        justify-items: center;
    }

    .purposeImage__circle {
        max-width: 460px;
        width: 100cqi;
    }

    .purposeImage__line {
        height: auto;
        left: 28cqi;
        top: 42cqi;
        width: 44cqi;
    }

    .purposeImage__figureNotes {
        font-size: 3.79cqi;
        margin-top: 8.276cqi;
    }

    .purposeImage__item:nth-of-type(n + 2) {
        margin-top: 16px;
    }

    .purposeImage__item img {
        height: auto;
        width: 31cqi;
    }

    .purposeImage__title {
        font-size: 6.2cqi;
        line-height: 1.6;
        margin-top: 4.14cqi;
    }

    .purposeImage__title span {
        font-size: 4.83cqi;
    }

    .purposeImage__item {
        margin-top: 4.14cqi;
    }

    .purposeImage__item li {
        font-size: 4.4828cqi;
    }

    .purposeImage__engage {
        width: 23.1cqi;
    }

    .purposePoint {
        flex-direction: column;
        margin-top: 86px;
    }

    .purposePoint__item {
        border: 2px solid var(--colorDarkOrange);
        height: 68cqi;
        width: 68cqi;
    }

    .purposePoint__item + .purposePoint__item {
        margin-top: -3.7cqi;
    }

    .purposePoint__item:nth-of-type(2) {
        margin-left: auto;
        top: auto;
    }

    .purposePoint__item:nth-of-type(1) .purposePoint__arrow {
        height: auto;
        right: -9.7cqi;
        top: 39.7cqi;
        width: 18.623cqi;
    }

    .purposePoint__item:nth-of-type(2) .purposePoint__arrow {
        height: auto;
        right: 12.56cqi;
        top: 57.5cqi;
        width: 23.795cqi;
    }

    .purposePoint__heading {
        font-size: 7.29cqi;
    }

    .purposePoint__image {
        height: 8.3cqi;
        margin-top: 3.47cqi;
    }

    .purposePoint__body {
        font-size: 4.167cqi;
        margin-top: 3.47cqi;
    }
}

@media (max-width: 576px) {
    .purpose__title--line {
        bottom: auto;
        left: 17.2cqi;
        top: 17.3cqi;
        width: 33.5cqi;
    }
}

@media (max-width: 390px) {
    .purpose__body p {
        font-size: 15px;
    }
}

/* ------------------------------------------------
    Service
------------------------------------------------- */
.service {
    padding-block: 200px 230px;
}

.service__heading {
    container-type: inline-size; /* Design inline size is 995px */
    display: grid;
    margin-inline: auto;
    max-width: 995px;
    position: relative;
}

.service__heading--en img {
    height: auto;
    width: 14.27cqi;
}

.service__heading--ja {
    justify-self: end;
    width: 88cqi;
}

.service__heading--line {
    left: 15.2cqi;
    mix-blend-mode: multiply;
    position: absolute;
    top: 14.4cqi;
    width: 57.69cqi;
    z-index: -1;
}

.service__lead {
    container-type: inline-size; /* Design inline size is 930px */
    margin-inline: auto;
    max-width: 930px;
    position: relative;
    text-align: center;
}

.service__lead p {
    font-size: 3.76cqi;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 2.03;
    margin-top: 5.59cqi;
    white-space: nowrap;
}

.service__leadLine {
    bottom: 0.6cqi;
    left: 14.1cqi;
    mix-blend-mode: multiply;
    position: absolute;
    width: 70.2cqi;
    z-index: -1;
}

.service__leadLine--sp {
    display: none;
}

.serviceList {
    display: grid;
    gap: 20px;
    margin-block: 80px 0;
    margin-inline: auto;
    max-width: 920px;
    width: 100%;

    --color-web: #8286d8;
    --color-graphic: #ffd800;
    --color-illust: #ff9980;
    --color-branding: #01c086;
    --color-design: #e0e0e0;
    --color-event: #ffd800;
    --color-chatty: #ff8bbe;
    --color-recording: #01c086;
}

.serviceList__item {
    align-items: center;
    background: var(--colorWhite);
    border-radius: 10px;
    display: grid;
    gap: 24px;
    grid-template-columns: auto 500px;
    padding: 32px 40px 32px 64px;
}

.serviceList__item--web {
    border: 1px solid var(--color-web);
}

.serviceList__item--graphic {
    border: 1px solid var(--color-graphic);
}

.serviceList__item--illust {
    border: 1px solid var(--color-illust);
}

.serviceList__item--branding {
    border: 1px solid var(--color-branding);
}

.serviceList__item--design {
    border: 1px solid var(--color-design);
}

.serviceList__item--event {
    border: 1px solid var(--color-event);
}

.serviceList__item--chatty {
    border: 1px solid var(--color-chatty);
}

.serviceList__item--recording {
    border: 1px solid var(--color-recording);
}

.serviceList__item dt {
    align-items: center;
    display: flex;
    font-size: 21px;
    font-weight: 700;
    gap: 14px;
    line-height: 1.5;
    position: relative;
}

.serviceList__item dt::before {
    content: "";
    display: block;
    height: 1lh;
    width: 6px;
}

.serviceList__item dt:has(small)::before {
    height: 1.5lh;
}

.serviceList__item--web dt::before {
    background: var(--color-web);
}

.serviceList__item--graphic dt::before {
    background: var(--color-graphic);
}

.serviceList__item--illust dt::before {
    background: var(--color-illust);
}

.serviceList__item--branding dt::before {
    background: var(--color-branding);
}

.serviceList__item--design dt::before {
    background: var(--color-design);
}

.serviceList__item--event dt::before {
    background: var(--color-event);
}

.serviceList__item--chatty dt::before {
    background: var(--color-chatty);
}

.serviceList__item--recording dt::before {
    background: var(--color-recording);
}

.serviceList__item dt span {
    display: grid;
}

.serviceList__item dt small {
    font-size: 12px;
}

.serviceList__item dd {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.8;
}

.serviceList__dot {
    margin-inline: 6px;
}

.serviceList__other {
    font-size: 12px;
    margin-left: 8px;
}

.service__img {
    margin-top: 40px;
    text-align: center;
}

.service__img img {
    width: 454px;
}

@media (max-width: 960px) {
    .serviceList__item {
        grid-template-columns: 100%;
        padding: 24px 30px;
        row-gap: 16px;
    }
}

@media (max-width: 768px) {
    .service {
        padding-block: 80px;
    }

    .serviceList {
        gap: 10px;
    }

    .serviceList__item dt {
        font-size: 16px;
        position: relative;
    }

    .serviceList__item dt::before {
        width: 4px;
    }

    .serviceList__item dt small {
        font-size: 12px;
    }

    .serviceList__item dd {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.86;
    }

    .serviceList__other {
        font-size: 11px;
        margin-left: 4px;
    }

    .service__img {
        margin-top: 40px;
    }

    .service__img img {
        width: 258px;
    }
}

@media (max-width: 640px) {
    .service__heading--en img {
        width: 26.564cqi;
    }

    .service__heading--ja {
        justify-self: center;
        margin-top: 12.58cqi;
        width: 99.375cqi;
    }

    .service__heading--line {
        left: 4cqi;
        top: 32cqi;
        width: 72.5cqi;
    }

    .service__lead p {
        font-size: 6.5625cqi;
        margin-top: 20.3cqi;
    }

    .service__lead--break {
        display: block;
    }

    .service__leadLine--pc {
        display: none;
    }

    .service__leadLine--sp {
        display: block;
    }

    .service__leadLine:nth-of-type(1) {
        bottom: 6cqi;
        left: 2.6cqi;
        mix-blend-mode: multiply;
        width: 88cqi;
    }

    .service__leadLine:nth-of-type(2) {
        bottom: -5.7cqi;
        left: 26.6cqi;
        mix-blend-mode: multiply;
        width: 38.5cqi;
    }
}

/* ------------------------------------------------
    Works
------------------------------------------------- */
.works {
    position: relative;
}

.works__heading {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}

.works__heading--ja {
    color: var(--colorOrange);
    font-size: 35px;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.works__bg {
    background-image:
        linear-gradient(0deg, transparent calc(100% - 1px), var(--colorLightOrange) calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), var(--colorLightOrange) calc(100% - 1px));
    background-position: center center;
    background-repeat: repeat;
    background-size: 60px 60px;
    border-bottom: 1px solid var(--colorLightOrange);
    border-top: 1px solid var(--colorLightOrange);
    padding-block: 101px 86px;
    position: relative;
}

.works__bg::before,
.works__bg::after {
    background: var(--colorLightOrange);
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%;
}

.works__bg::before {
    top: -9px;
}

.works__bg::after {
    bottom: -11px;
}

.worksList {
    container-type: inline-size; /* Design inline size is 1160px */
    display: grid;
    gap: 5.5cqi 1.834cqi;
    grid-template-columns: repeat(3, 1fr);
    margin-inline: auto;
    max-width: 1160px;
    padding-inline: 3.21cqi;
}

.worksList__link {
    border-radius: 10px;
    color: var(--colorBlack);
}

.worksList__thumbnail {
    aspect-ratio: 350 / 330;
    background-color: var(--colorWhite);
    border: 1px solid var(--colorOrange);
    border-radius: 10px;
    overflow: hidden;
}

.worksList__thumbnail img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
    width: 100%;
}

.worksList__link:hover .worksList__thumbnail img {
    transform: scale(1.05);
}

.worksList__category {
    align-items: center;
    background-color: var(--colorWhite);
    border-radius: 3px;
    display: flex;
    font-size: 1.12cqi;
    font-weight: 700;
    height: 2.672cqi;
    letter-spacing: 0.2em;
    line-height: 1;
    margin-top: 1.83cqi;
    overflow: hidden;
    padding: 6px 12px 6px 0;
    width: fit-content;
}

.worksList__category span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    height: 2.84cqi;
    margin-right: 0.862cqi;
    width: 0.734cqi;
}

.worksList__title {
    font-size: 1.6681cqi;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.67;
    margin-top: 1.56cqi;
}

.worksList__client {
    font-size: 1.376cqi;
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1.4;
    margin-top: 1.376cqi;
}

.works__button {
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

@media (max-width: 860px) {
    .works__bg {
        background-size: 8.2cqi 8.2cqi;
        padding-block: 15.9cqi 28.125cqi;
    }

    .works__heading {
        align-items: flex-start;
        container-type: inline-size;
        flex-direction: column;
    }

    .works__heading--en {
        width: 27.86cqi;
    }

    .works__heading--ja {
        font-size: 6.563cqi;
    }

    .worksList {
        grid-template-columns: repeat(2, 1fr);
        padding-inline: 35px;
    }

    .worksList__category {
        border-radius: 3px;
        font-size: 13px;
        height: 31px;
        margin-top: 20px;
        padding: 5px 9px 6px 0;
    }

    .worksList__category span {
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
        height: 10cqi;
        margin-right: 10px;
        width: 8px;
    }

    .worksList__title {
        font-size: 18px;
        line-height: 1.67;
        margin-top: 16px;
    }

    .worksList__client {
        font-size: 15px;
        margin-top: 15px;
    }
}

@media (max-width: 640px) {
    .worksList {
        gap: 15.625cqi 7cqi;
    }

    .worksList__item {
        max-width: 43.75cqi;
    }

    .worksList__category {
        font-size: 11px;
        height: 24px;
        margin-top: 20px;
        white-space: nowrap;
    }

    .worksList__title {
        font-size: 13px;
        line-height: 2;
        margin-top: 18px;
    }

    .worksList__client {
        font-size: 12px;
        margin-top: 18px;
    }
}

/* ------------------------------------------------
    Member
------------------------------------------------- */
.member {
    padding-top: 174px;

    --content-width: 840px;
}

.member__inner {
    padding-inline: 0;
}

.memberHeading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-inline: auto;
    max-width: 87.67%;
    padding-bottom: 32px;
    width: 100%;
}

.memberHeading__ja {
    color: var(--colorOrange);
    font-size: 35px;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.member__wrapper {
    padding-top: 30px;
    position: relative;
}

.borderLine.for-top::before {
    background: var(--colorLightOrange);
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    top: -16px;
    width: 100%;
}

.borderLine.for-top::after {
    background: var(--colorLightOrange);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: -6px;
    width: 100%;
}

.borderLine.for-bottom::before {
    background: var(--colorLightOrange);
    bottom: -22px;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%;
}

.borderLine.for-bottom::after {
    background: var(--colorLightOrange);
    bottom: -12px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}

.memberItem__head {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: var(--content-width);
    width: 100%;
}

.member__area {
    background-image: repeating-linear-gradient(var(--colorLightOrange), var(--colorLightOrange) 1px, transparent 1px, transparent 65px);
    margin-inline: auto;
    max-width: 1100px;
    padding: 21px 0 140px;
    position: relative;
    width: 100%;
}

.memberItem:nth-of-type(n + 2) {
    margin-top: 234px;
}

.memberItem__image {
    position: relative;
}

.memberItem__profile {
    display: grid;
    gap: 28px;
    text-align: center;
}

.memberItem__position {
    text-align: center;
}

.memberItem__name--ja {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-inline: auto;
    margin-top: 4px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.memberItem__name--ja img {
    bottom: -14.9px;
    left: 50%;
    mix-blend-mode: multiply;
    position: absolute;
    transform: translateX(-50%);
    z-index: -1;
}

.memberItem__name--en {
    margin-top: 16px;
}

.memberItem__language {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.5;
    transform: translateY(15px);
}

.memberItem__text {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 3;
    margin-inline: auto;
    margin-top: 44px;
    max-width: var(--content-width);
    width: 100%;
}

.memberItem__details {
    text-align: center;
}

.memberItem__more {
    color: var(--colorDarkOrange);
    display: inline-grid;
    font-size: 18px;
    font-weight: 700;
    gap: 6px;
    letter-spacing: 0.15em;
    margin-top: 46px;
    position: relative;
    text-align: center;
    transition: scale 0.3s ease-in-out;
}

.memberPolicy {
    align-items: center;
    column-gap: 56px;
    display: flex;
    justify-content: center;
    margin-top: 88px;
}

.memberPolicy__word {
    overflow: hidden;
    pointer-events: none;
}

.memberPolicy__word[data-visible="left"] img {
    opacity: 0;
}

.memberPolicy__word[data-visible="right"] img {
    opacity: 0;
}

.memberPolicy__word img {
    transition: opacity 0.2s 0.3s ease-in-out;
}

.memberPolicy__word.is-visible img {
    opacity: 1;
    pointer-events: auto;
}

.memberPolicy__graph {
    container-type: inline-size; /* Design inline size is 438px */
    position: relative;
    width: 438px;
}

.memberPolicy__graph img {
    opacity: 0;
    position: relative;
}

.memberPolicy__graph--nishikawa {
    left: 59.4%;
    mix-blend-mode: multiply;
    position: absolute;
    top: 41.1%;
    transform: translate(-50%, -50%);
    width: 37.7cqi;
}

.memberPolicy__graph--terai {
    left: 45.2%;
    mix-blend-mode: multiply;
    position: absolute;
    top: 56.5%;
    transform: translate(-50%, -50%);
    transition: clip-path 0.5s 1s ease-out;
    width: 62cqi;
    z-index: 1;
}

.memberItem:nth-of-type(even) .memberItem__image {
    order: 2;
}

.memberItem:nth-of-type(even) .memberPolicy__graph {
    order: 2;
}

@media (max-width: 1170px) {
    .memberItem {
        padding-inline: 35px;
    }
}

@media (max-width: 860px) {
    .memberHeading {
        container-type: inline-size;
        margin-inline: 0 auto;
        padding-left: 35px;
    }

    .memberItem__head {
        flex-direction: column;
    }

    .memberHeading__en {
        width: 61.314cqi;
    }

    .memberHeading__ja {
        font-size: 7.4858cqi;
    }
}

@media (max-width: 768px) {
    .member {
        padding: 64px 0 0;
    }

    .memberHeading {
        align-items: flex-start;
        margin-inline: 0 auto;
    }

    .member__wrapper {
        position: relative;
    }

    .borderLine.for-top::before {
        margin: 0;
        width: 100vw;
    }

    .borderLine.for-top::after {
        margin: 0;
        top: -6px;
        width: 100vw;
    }

    .borderLine.for-bottom::before {
        bottom: -22px;
        margin: 0;
        width: 100vw;
    }

    .borderLine.for-bottom::after {
        margin: 0;
        width: 100vw;
    }

    .memberItem {
        padding-top: 30px;
    }

    .memberItem__head {
        display: grid;
        grid-template-columns: 100%;
        justify-items: center;
        row-gap: 40px;
    }

    .memberItem__profile {
        gap: 0;
        justify-items: center;
        order: 2;
    }

    .member__area {
        background-image: repeating-linear-gradient(var(--colorLightOrange), var(--colorLightOrange) 1px, transparent 1px, transparent 48px);
        margin-block: 0;
        margin-inline: auto;
        padding: 0 0 40px;
    }

    .memberItem:nth-of-type(n + 2) {
        margin-top: 72px;
    }

    .memberItem__image {
        width: 235px;
    }

    .memberItem__position {
        max-width: 247px;
    }

    .memberItem__name--ja {
        font-size: 24px;
        margin-top: 17px;
    }

    .memberItem__name--ja img {
        max-width: 130px;
    }

    .memberItem__name--en {
        margin-top: 30px;
    }

    .memberItem__name--en img {
        max-width: 130px;
    }

    .memberItem__language {
        font-size: 13px;
        margin-top: 16px;
    }

    .memberItem__text {
        font-size: 14px;
        line-height: 3;
        margin-inline: auto;
        margin-top: 80px;
        width: auto;
    }

    .memberItem__more {
        font-size: 15px;
        margin-top: 80px;
    }

    .memberItem__more::before {
        height: 15px;
        width: 15px;
    }

    .memberPolicy {
        display: grid;
        grid-template-columns: 100%;
        justify-items: center;
        margin-inline: auto;
        margin-top: 64px;
        max-width: 520px;
        row-gap: 48px;
    }

    .memberPolicy:has(* > .memberPolicy__graph--nishikawa) {
        row-gap: 0;
    }

    .memberPolicy__graph {
        container-type: inline-size; /* Design inline size is 320px */
        width: 100%;
    }

    .memberPolicy__graph img {
        height: auto;
        width: 85.334cqi;
    }

    .memberPolicy__graph--nishikawa {
        left: 58cqi;
        width: 32.2cqi;
    }

    .memberPolicy__graph--terai {
        height: auto;
        left: 46.1cqi;
        width: 52.9cqi;
    }

    .memberPolicy__word img {
        max-width: 76.25%;
        width: 100%;
    }

    .memberPolicy__graph,
    .memberPolicy__word {
        text-align: center;
    }

    .memberPolicy__word--nishikawa img {
        aspect-ratio: 438 / 360;
        object-fit: contain;
    }

    .memberPolicy__word--terai img {
        aspect-ratio: 408 / 250;
        object-fit: contain;
    }

    .memberItem:nth-of-type(even) .memberItem__image {
        order: 1;
    }

    .memberPolicy__graph,
    .memberItem:nth-of-type(even) .memberPolicy__graph {
        order: 0;
    }

    .memberPolicy__word .memberItem:nth-of-type(even) .memberPolicy__word {
        order: 1;
    }
}

@media (max-width: 576px) {
    .memberHeading {
        flex-direction: column;
    }
}

/* ------------------------------------------------
    Company
------------------------------------------------- */
.company {
    padding: 110px 0 150px;
}

.company__heading {
    display: flex;
    gap: 8px;
    margin-inline: auto;
    max-width: 1100px;
}

.company__heading--ja {
    color: var(--colorOrange);
    font-size: 35px;
    font-weight: bolder;
    letter-spacing: 0.15em;
}

.companyBox {
    align-content: center;
    border: 3px solid var(--colorOrange);
    container-type: inline-size; /* Design inline size is 1100px */
    display: grid;
    gap: 20px;
    height: 383px;
    margin: 0 auto;
    margin-top: 10px;
    max-width: 1100px;
    outline: 1px solid var(--colorOrange);
    outline-offset: -10px;
    padding-inline: 96px 0;
    position: relative;
    width: 100%;
}

.companyBox::before {
    background: var(--colorOrange);
    content: "";
    height: 290px;
    left: 270px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
}

.companyBox__item {
    align-items: center;
    column-gap: 80px;
    display: grid;
    font-size: 20px;
    grid-template-columns: 140px auto;
    line-height: 1.43;
    max-width: 81.82%;
    width: 100%;
}

.companyBox dt {
    color: var(--colorOrange);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.43;
}

.companyBox dd {
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

@media (max-width: 930px) {
    .company {
        padding: 64px 0 80px;
    }

    .company__heading {
        flex-wrap: wrap;
    }

    .companyBox {
        height: auto;
        padding: 42px 24px 42px 32px;
    }

    .companyBox::before {
        content: none;
    }

    .companyBox__item {
        gap: 30px;
        max-width: 100%;
    }

    .companyBox dd {
        white-space: normal;
    }
}

@media (max-width: 860px) {
    .company__heading {
        align-items: flex-start;
        container-type: inline-size;
        flex-direction: column;
    }

    .company__heading--en {
        width: 56.9cqi;
    }

    .company__heading--ja {
        font-size: 6.5625cqi;
        text-align: center;
    }

    .companyBox {
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .companyBox {
        margin-top: 20px;
    }

    .companyBox dt {
        font-size: 14px;
    }

    .companyBox dd {
        font-size: 14px;
    }

    .companyBox__item {
        gap: 9.375cqi;
        grid-template-columns: 64px 1fr;
    }
}

/* ------------------------------------------------
    Contact
------------------------------------------------- */
.contact {
    padding: 240px 0 130px;
    position: relative;
}

.contact::after {
    background: var(--colorBeige);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.9;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.contact__bg {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.contact__inner {
    position: relative;
    z-index: 1;
}

.contact__heading {
    container-type: inline-size;
    margin-inline: auto;
    max-width: 562px;
    position: relative;
    text-align: center;
    width: 100%;
}

.contact__heading--text {
    position: relative;
}

.contact__heading--line {
    bottom: -3.2cqi;
    left: 2.6cqi;
    position: absolute;
    width: 81.495cqi;
    z-index: -1;
}

.contactHead {
    margin-top: 160px;
    text-align: center;
}

.contactHead__title img {
    height: 36px;
    width: auto;
}

.contact__lead {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.44;
    margin-top: 24px;
}

.contactForm {
    margin: 54px auto 0;
    max-width: 688px;
    width: 100%;
}

.contactForm .wpcf7-list-item {
    margin: 0 !important;
}

.form__item:nth-of-type(n + 2) {
    margin-top: 48px;
}

.form__label {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    position: relative;
}

.form__label.is-required::after {
    content: url("../../image/icon_required.svg");
    display: inline-grid;
    line-height: 1lh;
    margin-left: 6px;
}

.form__label--sm {
    display: block;
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin-top: 8px;
}

.form__input {
    margin-top: 20px;
}

:where(.form__input input),
:where(.form__input textarea) {
    outline: 1px solid var(--colorLightOrange);
    outline-offset: -6px;
}

.form__input input[type="text"],
.form__input input[type="email"] {
    border: 2px solid var(--colorLightOrange);
    font-size: 16px;
    height: 70px;
    padding: 0 16px;
    width: 100%;
}

.form__input textarea {
    border: 2px solid var(--colorLightOrange);
    box-sizing: border-box;
    font-size: 17px;
    min-height: 290px;
    padding: 16px;
    width: 100%;
}

.form__checkbox {
    display: flex;
    font-size: 18px;
    font-weight: 700;
    justify-content: center;
    margin-top: 54px;
}

.form__checkbox input[type="checkbox"] {
    appearance: none;
    background: #fff;
    border: solid 1px var(--colorOrange);
    border-radius: 6px;
    box-shadow: 0 0 0 0 transparent;
    cursor: pointer;
    height: 22px;
    position: relative;
    width: 22px;
}

.form__checkbox input[type="checkbox"]::after {
    border: solid var(--colorOrange);
    border-width: 0 3px 3px 0;
    content: "";
    height: 12px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -65%) rotate(45deg);
    transition: opacity 0.2s ease-in-out;
    width: 6px;
}

.form__checkbox input[type="checkbox"]:checked::after {
    opacity: 1;
}

.form__submit {
    display: flex;
    justify-content: center;
    margin-inline: auto;
    margin-top: 96px;
    max-width: fit-content;
    position: relative;
}

.form__submit input[type="submit"] {
    cursor: pointer;
}

label:has(input[type="checkbox"]) {
    display: flex;
    gap: 8px;
    letter-spacing: 0.1em;
    line-height: 1.1;
}

input[type="checkbox"] {
    outline: none;
}

.wpcf7-not-valid-tip {
    color: var(--colorDarkOrange);
    display: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-left: 4px;
    margin-top: 8px;
    position: absolute;
}

.form__input input[aria-invalid="true"]:not(:focus),
.form__input textarea[aria-invalid="true"]:not(:focus) {
    box-shadow: 0 0 3px 1px color-mix(in srgb, var(--colorDarkOrange) 50%, transparent);
    outline: 2px solid var(--colorDarkOrange);
    outline-offset: -2px;
}

.form__input input[aria-invalid="true"]:not(:focus) + .wpcf7-not-valid-tip,
.form__input textarea[aria-invalid="true"]:not(:focus) + .wpcf7-not-valid-tip {
    display: block;
}

.wpcf7-spinner {
    background-color: var(--colorDarkOrange);
    bottom: 26px;
    position: absolute;
    right: -62px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: var(--colorDarkOrange);
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    padding: 1em;
}

.wpcf7 form.sent .wpcf7-response-output {
    background-color: rgb(70, 180, 80, 11%);
    font-size: 15px;
    line-height: 1.4;
    padding: 1.5rem;
    padding: 1em;
}

.wpcf7-form-control-wrap[data-name="acceptance"] label {
    cursor: pointer;
}

.contact__note {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.7;
    margin-top: 28px;
    text-align: center;
}

.contact__note span {
    display: inline-block;
}

.contact__note a {
    color: inherit;
    margin-inline: 2px;
    text-decoration: underline;
    text-decoration-color: var(--colorBlack);
    text-decoration-thickness: 1px;
    text-underline-offset: 1.5px;
    transition: text-decoration-color 0.2s;
}

.banner {
    display: flex;
    justify-content: center;
    margin-top: 146px;
}

.banner img {
    max-width: 980px;
    transition: filter 0.2s;
    width: 100%;
}

.banner img:hover {
    filter: brightness(0.94);
}

@media (max-width: 768px) {
    .contact {
        padding: 80px 0 64px;
    }

    .contact__heading {
        width: 284px;
    }

    .contact__heading--line {
        bottom: -2.4cqi;
        left: 2.1cqi;
        width: 79.858cqi;
    }

    .contactHead {
        margin-top: 60px;
    }

    .contactHead__title img {
        height: 18px;
    }

    .contact__lead {
        font-size: 15px;
        margin-top: 16px;
    }

    .contactForm {
        margin: 54px auto 0;
        max-width: 688px;
        width: 100%;
    }

    .form__item:nth-of-type(n + 2) {
        margin-top: 32px;
    }

    .form__label {
        font-size: 15px;
        line-height: 1.44;
    }

    .form__label.is-required::after {
        font-size: 10px;
    }

    .form__label--sm {
        font-size: 13px;
        margin-top: 8px;
    }

    .form__input {
        margin-top: 14px;
    }

    .form__input input[type="text"] {
        font-size: 15px;
        height: 60px;
    }

    .form__input input[type="email"] {
        font-size: 15px;
        height: 60px;
    }

    .form__input textarea {
        font-size: 15px;
        height: 200px;
    }

    .form__checkbox {
        font-size: 15px;
        margin-top: 32px;
    }

    label:has(input[type="checkbox"]) {
        align-items: center;
    }

    .form__submit {
        margin-top: 48px;
    }

    .banner {
        margin-top: 64px;
    }
}

@media (max-width: 490px) {
    .contact__note {
        font-size: 13px;
    }
}