@charset "UTF-8";

/*
 * Responsive shell overrides.
 *
 * The legacy styles remain the desktop source of truth at 980px and above.
 * Page-specific responsive rules are added in the later page phases.
 */


@media screen and (max-width:979.98px) {
    html,
    body {
        width: 100%;
        min-width: 0;
        max-width: 100%
    }

    body {
        position: relative;
        height: 100%;
        min-height: 100%
    }

    body.loaded {
        height: auto;
        overflow-x: clip;
        overflow-y: auto
    }

    .wrapper,
    .contents,
    .page,
    .header,
    .footer {
        width: 100%;
        min-width: 0;
        max-width: 100%
    }

    /* Do not clip page content on native mobile/tablet layouts. Individual
       components may still manage their own animation overflow. */
    .page {
        overflow: visible
    }

    .page .page__inner {
        width: calc(100% - 64px);
        max-width: 860px
    }

    img,
    video,
    canvas,
    iframe,
    svg {
        max-width: 100%
    }

    .header__nav {
        display: none
    }

    .header__menu {
        display: block
    }

    .nav,
    .nav__bg,
    .nav_fixbg {
        width: 100%;
        max-width: 100%
    }

    .nav {
        min-height: 100vh;
        min-height: 100svh
    }

    .cookie_popup {
        max-width: calc(100% - 32px)
    }

    .cookie_popup__text {
        max-width: calc(100% - 70px);
        overflow-wrap: anywhere
    }
}

/* Keep the 980px desktop boundary inside browsers that reserve 15px for scrollbars. */
@media screen and (min-width:980px) and (max-width:994.98px) {
    .contents,
    .page,
    .header,
    .footer {
        min-width: 0
    }
}

@media screen and (max-width:750.98px) {
    .page .page__inner {
        width: calc(100% - 40px);
        max-width: 330px
    }

    .cases .page__head,
    .who_we_are .page__head,
    .news .page__head,
    .recruit .page__head,
    .contact .page__head {
        margin: 93.67px 0 30px;
        padding-left: 15px
    }

    .page__head:after {
        top: 5.5vw;
        width: 10px;
        height: 1px;
    }

    .cases .page__head__image {
        width: 74px;
        height: 15.5px
    }

    .who_we_are .page__head__image {
        width: 125px;
        height: 15.44px
    }

    .news .page__head__image {
        width: 57px;
        height: 15.81px
    }

    .recruit .page__head__image {
        width: 85.5px;
        height: 15.5px
    }

    .contact .page__head__image {
        width: 95px;
        height: 16px
    }

    .header__logo {
        top: 12.5px;
        left: 12px;
        width: 39.5px;
        height: 22px
    }

    .header__logo .catch {
        top: 11px;
        margin-left: 47.5px;
        font-size: 8px
    }

    .header__menu {
        top: 17px;
        right: 25.5px;
        width: 24px;
        height: 17px
    }

    .header__menu__line {
        height: 1px
    }

    .header__menu__line--2 {
        top: 8.5px
    }

    .header__menu__line--3 {
        top: 16px;
        width: 17.5px
    }

    .on .header__menu__line--1,
    .on .header__menu__line--3 {
        top: 8px
    }

    .header__bg {
        height: 50px
    }

    .nav__container {
        padding: 55px 0 55px 20px
    }

    .nav__item {
        padding-left: 16px;
        margin-bottom: 30px
    }

    .nav__item.select {
        padding-left: 26px
    }

    .nav__item__bar {
        top: 8px;
        width: 10px;
        height: 1px
    }

    .nav__item__arror {
        top: 6px;
        width: 10px;
        height: 6px
    }

    .nav__top {
        width: 41px;
        height: 15.73px
    }

    .nav__who_we_are {
        width: 128px;
        height: 15.81px
    }

    .nav__member {
        width: auto;
        height: 22px
    }

    .nav__item.nav__member span {
        font-size: 21.5px;
        line-height: 1
    }

    .nav__item.nav__member .nav__item__bar {
        top: 12px
    }

    .nav__item.nav__member .nav__item__arror {
        top: 11px
    }

    .nav__cases {
        width: 74px;
        height: 15.5px
    }

    .nav__news {
        width: 57px;
        height: 15.81px
    }

    .nav__recruit {
        width: 87px;
        height: 15.84px
    }

    .nav__contact {
        margin-bottom: 25px;
        width: 95px;
        height: 16px
    }

    .nav__talk {
        margin-bottom: 20px;
        width: auto;
        height: 20px
    }

    .nav__talk span,
    .lang_type_en .nav__talk span {
        font-size: 20px;
        line-height: 1
    }

    .nav__talk .nav__item__bar {
        top: 10.5px
    }

    .nav__talk .nav__item__arror {
        top: 8.5px
    }

    .site_loading__logo {
        margin: -42.5px 0 0 -82.5px;
        width: 165px;
        height: 85px
    }

    .init .site_loading__bar--top,
    .init .site_loading__bar--bottom {
        height: 10px
    }

    .init .site_loading__bar--left,
    .init .site_loading__bar--right {
        width: 10px
    }

    .footer__logo {
        margin-bottom: 45px;
        padding-top: 50px
    }

    .footer__logo__image {
        margin-bottom: 0vw;
        width: 12vw;
        /* height: 25.19px; */
    }

    .footer__logo__catch,
    .lang_type_en .footer__logo__catch {
        font-size: 10px
    }

    .footer__cookiepolicy,
    .lang_type_en .footer__cookiepolicy {
        margin-bottom: 5px;
        font-size: 12px
    }

    .footer__copy,
    .lang_type_en .footer__copy {
        margin-bottom: 10px;
        font-size: 10px
    }

    .cookie_popup {
        width: 310px;
        max-width: calc(100% - 16px)
    }

    .cookie_popup__close {
        margin: 4px 2px 0 0;
        width: 44px;
        padding-bottom: 44px
    }

    .cookie_popup__text {
        margin-left: 18px;
        padding: 15px 0;
        width: calc(100% - 70px);
        max-width: none;
        font-size: 12px;
        line-height: 1.75
    }

    .lang_type_en .cookie_popup__text {
        font-size: 12px
    }

    .scroll_popup {
        margin-right: 8px;
        width: 90.5px;
        height: 67px
    }

    .scroll_popup.show {
        margin-bottom: 8px
    }

    .item__link__view {
        right: 3px;
        width: 28px;
        height: 18px
    }
}

/* Phase R2: home page */
@media screen and (max-width:979.98px) {
    .index__top {
        min-height: 0
    }

    .index__top__showreel {
        height: 100vh;
        height: 100dvh
    }

    .index__top__showreel__contener {
        width: min(768px, calc(100vw - 64px), calc(177.7778vh - 199.1111px));
        width: min(768px, calc(100vw - 64px), calc(177.7778dvh - 199.1111px));
        height: auto;
        aspect-ratio: 16 / 9
    }

    .index__top__showreel__contener iframe {
        display: block
    }

    .index__top__showreel__contener__close {
        top: -52px;
        width: 44px;
        height: 44px
    }

    .index__top__showreel__contener__close__line {
        left: 10px;
        width: 24px
    }

    .index__top__showreel__contener__close__line--1,
    .index__top__showreel__contener__close__line--3 {
        top: 21px
    }

    .index__philosophy {
        margin: clamp(90px, 13vw, 150px) auto clamp(90px, 12vw, 130px)
    }

    .index__philosophy__title {
        margin-bottom: clamp(30px, 5vw, 40px);
        font-size: clamp(42px, 6.2vw, 60px)
    }

    .index__philosophy__text {
        margin-bottom: clamp(30px, 5vw, 40px);
        font-size: clamp(20px, 3.1vw, 30px)
    }

    .index__column__body,
    .index .news__container__line {
        width: 100%
    }

    .index__cases__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible
    }

    .index__cases__item {
        width: 100%;
        float: none
    }

    .index__cases__item__bg {
        height: auto;
        aspect-ratio: 430 / 240
    }

    .index__cases__item__info {
        width: calc(100% - 60px)
    }

    .index .news__container__line {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        overflow: visible
    }

    .index .news__container__line__arror {
        display: none
    }

    .index .news__container__line__box {
        width: 100%;
        margin: 0;
        float: none;
        overflow: visible
    }

    .index .news__container__line__box__column__img {
        width: 100%;
        height: auto;
        aspect-ratio: 240 / 134
    }

    .index .news__container__line__box .item__link {
        display: block
    }

    .index__talk .talkdetail__recommend__container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        padding-bottom: 0;
        overflow: visible;
        white-space: normal
    }

    .index__talk .talkdetail__recommend__item,
    .index__talk .talkdetail__recommend__item:first-child,
    .index__talk .talkdetail__recommend__item:last-child {
        width: 100%;
        margin: 0;
        display: block
    }

    .index__talk .talkdetail__recommend__item__image,
    .index__talk .talkdetail__recommend__item__info,
    .index__talk .talkdetail__recommend__item__title,
    .index__talk .talkdetail__recommend__item__text {
        width: 100%
    }

    .index__talk .talkdetail__recommend__item__text {
        height: auto
    }

    .index__talk .talkdetail__recommend__item .btn_square__item {
        width: 100%
    }

    .index__clients__list {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: 100%;
        margin: 0;
        overflow: visible
    }

    .index__clients__list > p {
        display: contents
    }

    .index__clients__item {
        width: 100%;
        margin: 0;
        float: none
    }
}

@media screen and (max-width:750.98px) {
    .index__top__bg {
        margin-top: 21.5px;
        height: calc(100% - 36.5px);
    }

    .index__barH {
        height: 15px
    }

    .index__barV {
        width: 12.5px
    }

    .index__top__showreel__contener {
        width: min(calc(100vw - 40px), calc(177.7778vh - 199.1111px));
        width: min(calc(100vw - 40px), calc(177.7778dvh - 199.1111px))
    }

    .index__top__ui__arror {
        bottom: 31px;
        margin-left: -4.75px;
        width: 9.5px;
        height: 38px
    }

    .index__top__ui .page__title {
        top: 30px;
        left: 12.5px;
        padding-left: 15px;
        font-size: 10px
    }

    .index__top__ui .page__title a,
    .index__top__ui .page__title a:visited,
    .index__top__ui .page__title p,
    .lang_type_en .index__top__ui .page__title,
    .lang_type_en .index__top__ui .page__title a,
    .lang_type_en .index__top__ui .page__title a:visited,
    .lang_type_en .index__top__ui .page__title p {
        font-size: 10px
    }

    .index__top__ui .page__title:after {
        top: 8px;
        width: 8.5px
    }

    .index__top__ui__showreel {
        margin-left: -60px;
        width: 120px;
        height: 44px;
        border-radius: 22px
    }

    .index__top__ui__showreel__img {
        width: 12px;
        height: 12px
    }

    .index__top__ui__showreel__title,
    .lang_type_en .index__top__ui__showreel__title {
        font-size: 11px
    }

    .index__philosophy {
        margin: 55px auto 65px
    }

    .index__philosophy__title,
    .lang_type_en .index__philosophy__title {
        margin-bottom: 30px;
        font-size: 30px;
        line-height: 150%
    }

    .index__philosophy__text,
    .lang_type_en .index__philosophy__text {
        margin-bottom: 30px;
        font-size: 15px;
        line-height: 220%
    }

    .index__philosophy__text--2 {
        margin-bottom: 30px
    }

    .index__philosophy__banner {
        margin-top: 30px
    }

    .index .index__title_1 {
        width: 57px;
        height: 15.81px;
        margin-top: 50px;
        margin-bottom: 35px
    }

    .index .index__title_2 {
        width: 76.5px;
        height: 16.1px;
        margin-top: 65px;
        margin-bottom: 40px
    }

    .index .index__title_3 {
        width: 84.5px;
        height: 16px;
        margin-top: 65px;
        margin-bottom: 20px
    }

    .index__cases__list {
        grid-template-columns: minmax(0, 1fr)
    }

    .index__cases__item__bg {
        aspect-ratio: 660 / 370
    }

    .index__cases__item__info {
        left: 0;
        margin: 0 20px;
        width: calc(100% - 40px)
    }

    .index__cases__item__title,
    .lang_type_en .index__cases__item__title {
        font-size: 12px
    }

    .index__cases__item__genre,
    .lang_type_en .index__cases__item__genre {
        font-size: 10px
    }

    .index__cases__item .item__link__view {
        right: 12px;
        bottom: 12px
    }

    .index__cases .btn_square {
        padding-top: 35px
    }

    .index__cases .btn_square__item__text {
        padding: 10px 24px
    }

    .index__cases .btn_square__item__text p,
    .lang_type_en .index__cases .btn_square__item__text p {
        font-size: 12px
    }

    .index .news__container__line {
        grid-template-columns: minmax(0, 1fr);
        gap: 38px;
        margin-bottom: 26px
    }

    .index .news__container__line__box__column {
        display: flex;
        gap: 8px;
        align-items: flex-start
    }

    .index .news__container__line__box__column__img {
        flex: 0 0 calc(56.17% - 4px);
        width: calc(56.17% - 4px);
        margin: 0;
        float: none
    }

    .index .news__container__line__box__column__text {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        float: none
    }

    .index .news__container__line__box__column__text__date {
        height: 10px;
        margin-bottom: 18px
    }

    .index .news__container__line__box__column__text__date__tag,
    .index .news__container__line__box__column__text__date__tag p,
    .lang_type_en .index .news__container__line__box__column__text__date__tag,
    .lang_type_en .index .news__container__line__box__column__text__date__tag p {
        font-size: 10px
    }

    .index .news__container__line__box__column__text__date__bar {
        margin-top: 4px
    }

    .index .news__container__line__box__column__text__title,
    .lang_type_en .index .news__container__line__box__column__text__title {
        width: 100%;
        margin: 0;
        font-size: 12px
    }

    .index .news__container__line__box__overview,
    .lang_type_en .index .news__container__line__box__overview {
        box-sizing: border-box;
        width: 100%;
        margin: 12px 0 0;
        padding-right: 40px;
        font-size: 11px
    }

    .index__talk_head {
        margin: 65px 0 40px;
        padding-left: 15px
    }

    .index__talk_head:after {
        top: 10px
    }

    .index__talk_head span,
    .lang_type_en .index__talk_head span {
        font-size: 20px
    }

    .index__talk .talkdetail__recommend__container {
        grid-template-columns: minmax(0, 1fr);
        gap: 50px
    }

    .index__talk .talkdetail__recommend__item__image {
        margin-bottom: 13px
    }

    .index__talk .talkdetail__recommend__item__info {
        margin-bottom: 5px
    }

    .index__talk .talkdetail__recommend__item__info__categories .category,
    .lang_type_en .index__talk .talkdetail__recommend__item__info__categories .category {
        margin: 0 8px 8px 0;
        padding: 0 8px;
        font-size: 10px
    }

    .index__talk .talkdetail__recommend__item__info__date,
    .lang_type_en .index__talk .talkdetail__recommend__item__info__date {
        font-size: 11px
    }

    .index__talk .talkdetail__recommend__item__title,
    .lang_type_en .index__talk .talkdetail__recommend__item__title {
        margin-bottom: 8px;
        font-size: 20px
    }

    .index__talk .talkdetail__recommend__item__text,
    .lang_type_en .index__talk .talkdetail__recommend__item__text {
        margin-bottom: 12px;
        font-size: 12px;
        line-height: 190%
    }

    .index__talk .talkdetail__recommend__item .btn_square__item__text {
        padding: 10px 15px
    }

    .index__talk .talkdetail__recommend__item .btn_square__item__text p,
    .lang_type_en .index__talk .talkdetail__recommend__item .btn_square__item__text p {
        font-size: 12px
    }

    .index__clients__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 5px
    }
}

/* Phase R3: works archive and detail pages */
@media screen and (max-width:979.98px) {
    .cases .page__inner {
        width: calc(100% - 64px);
        max-width: 860px
    }

    .cases .page__head,
    .casesdetail .page__head {
        width: auto;
        max-width: none;
        height: 24px;
        margin-left: 0;
        margin-right: 0
    }

    .cases .page__head__image,
    .casesdetail .page__head svg {
        width: 113px;
        height: 24px
    }

    .cases__filter {
        box-sizing: border-box;
        width: 100%;
        max-width: none
    }

    .cases__filter__category__checkboxes {
        gap: 12px 10px
    }

    .cases__filter__category__checkbox {
        max-width: 100%
    }

    .cases__filter__category__checkbox__text {
        box-sizing: border-box;
        min-height: 40px;
        padding: 12px 14px;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center
    }

    .cases__filter__client {
        width: 100%
    }

    .cases__filter__custom_select,
    .cases__filter__select {
        min-width: 0
    }

    .cases__filter__custom_select__selected,
    .cases__filter__custom_select__option {
        box-sizing: border-box;
        min-height: 44px
    }

    .cases__container--responsive {
        grid-template-columns: repeat(2, minmax(0, 410px));
        gap: 32px 20px;
        justify-content: center
    }

    .cases__container__item,
    .cases__container__item__box {
        width: 100%;
        min-width: 0;
        min-height: 0
    }

    .cases__container__item__box__img {
        width: 100%;
        height: auto;
        aspect-ratio: 410 / 219
    }

    .cases__container__item__box__img img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .cases__container__item__box__text {
        box-sizing: border-box;
        width: calc(100% - 20px);
        margin-left: 10px;
        padding-right: 40px;
        overflow-wrap: anywhere
    }

    .cases__container__item__box__link {
        min-height: 0
    }

    .casesdetail__container__title,
    .casesdetail__container__projects__detail,
    .casesdetail__container__projects__detail__list,
    .casesdetail__container__projects_list__list,
    .casesdetail__container__projects__list {
        box-sizing: border-box;
        width: 100%;
        max-width: 820px;
        margin-left: auto;
        margin-right: auto
    }

    .casesdetail__container__projects {
        margin-top: clamp(70px, 10vw, 100px)
    }

    .casesdetail__container__projects__detail__title__text,
    .casesdetail__container__projects__detail__list__box {
        overflow-wrap: anywhere
    }

    .casesdetail__container__projects__detail__list__box__center_img__video {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9
    }

    .casesdetail__container__projects__detail__list__box__center_img__video iframe {
        display: block
    }

    .casesdetail__container__projects__detail__list__box__left_img,
    .casesdetail__container__projects__detail__list__box__right_img {
        box-sizing: border-box;
        width: 50%;
        max-width: 410px
    }

    .casesdetail__container__projects_list__list,
    .casesdetail__container__projects__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
        overflow: visible
    }

    .casesdetail__container__projects_list__list__box,
    .casesdetail__container__projects__list__box {
        display: flex;
        width: 100%;
        height: auto;
        min-width: 0;
        margin: 0;
        float: none;
        overflow: hidden
    }

    .casesdetail__container__projects_list__list__box__img,
    .casesdetail__container__projects__list__box__img {
        flex: 0 0 56.2%;
        width: 56.2%;
        height: auto;
        aspect-ratio: 218 / 123;
        float: none
    }

    .casesdetail__container__projects_list__list__box__img img,
    .casesdetail__container__projects__list__box__img img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .casesdetail__container__projects_list__list__box__title,
    .casesdetail__container__projects__list__box__title {
        flex: 1 1 auto;
        width: auto;
        height: auto;
        min-width: 0;
        float: none
    }

    .casesdetail__container__projects_list__list__box__title__name,
    .casesdetail__container__projects__list__box__title__name {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 10px;
        overflow-wrap: anywhere
    }

    .casesdetail__container__column__box {
        display: flex;
        width: 100%;
        height: auto;
        min-width: 0;
        margin-left: 0
    }

    .casesdetail__container__column__box__img {
        flex: 0 0 76.6%;
        width: 76.6%;
        height: auto;
        aspect-ratio: 628 / 249
    }

    .casesdetail__container__column__box__title {
        flex: 1 1 auto;
        width: auto;
        height: auto;
        min-width: 0
    }

    .casesdetail__container__column__box__title__name {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 12px;
        overflow-wrap: anywhere
    }
}

@media screen and (max-width:750.98px) {
    .page.cases .page__inner {
        width: 84vw;
        max-width: 84vw;
        margin-left: auto;
        margin-right: auto
    }

    .cases .page__head,
    .casesdetail .page__head {
        width: auto;
        height: 15.5px;
        margin: 93.67px 0 30px;
        padding-left: 15px
    }

    .cases .page__head__image,
    .casesdetail .page__head__image,
    .casesdetail .page__head svg {
        width: 74px;
        height: 15.5px
    }

    .cases__filter,
    .cases__container--responsive,
    .cases__container__item,
    .cases__container__item__box {
        width: 100%;
        max-width: 100%
    }

    .cases__filter {
        margin: 20px 0 35px
    }

    .cases__filter__category {
        margin-bottom: 24px
    }

    .cases__filter__category__label,
    .cases__filter__label {
        font-size: 12px
    }

    .cases__filter__category__checkboxes {
        gap: 2.666667vw 3.333333vw
    }

    .cases__filter__category__checkbox__text {
        min-height: auto;
        padding: 1.6vw 2.666667vw;
        display: block;
        font-size: 2.133333vw;
        line-height: 1;
        white-space: nowrap;
        border-width: .133333vw
    }

    .cases__filter__client {
        gap: 10px
    }

    .cases__filter__custom_select,
    .cases__filter__select {
        width: 100%;
        max-width: none
    }

    .cases__filter__custom_select__selected,
    .cases__filter__select {
        height: 44px;
        min-height: 44px;
        padding: 0 15px;
        font-size: 12px
    }

    .cases__filter__custom_select__option {
        min-height: 44px;
        padding: 12px 15px;
        font-size: 12px
    }

    .cases__container--responsive {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px
    }

    .cases__container__item__box__padding {
        height: 21.5px
    }

    .cases__container__item__box__img {
        width: 100%;
        height: auto;
        aspect-ratio: 630 / 337;
        margin: 0
    }

    .cases__container__item__box__text {
        width: calc(100% - 20px);
        margin: 15px 10px 0;
        padding-right: 35px
    }

    .cases__container__item__box__text__title,
    .lang_type_en .cases__container__item__box__text__title {
        margin-bottom: 8px;
        font-size: 13px;
        line-height: 1.65
    }

    .cases__container__item__box__text__tag,
    .lang_type_en .cases__container__item__box__text__tag {
        font-size: 10px;
        line-height: 1.65
    }

    .cases__container__item__box__link__view {
        width: 28px;
        height: 18px
    }

    .cases #cases__btn_more {
        width: 9.466667vw;
        height: 9.066667vw;
        margin-top: 9.733333vw
    }

    .cases #cases__btn_more .btn_more__bar {
        height: .133333vw;
        margin-bottom: .933333vw
    }

    .cases #cases__btn_more .btn_more__text,
    .cases #cases__btn_more .btn_more__text p {
        font-size: 2.4vw;
        line-height: 1
    }

    .cases #cases__btn_more .btn_more__text p {
        font-size: 2.4vw !important;
    }

    .casesdetail__container__projects {
        margin-top: 55px
    }

    .casesdetail__container__projects__detail {
        margin-bottom: 35px
    }

    .casesdetail__container__projects__detail__date {
        margin-bottom: 18px
    }

    .casesdetail__container__projects__detail__date__name,
    .casesdetail__container__projects__detail__date__name p,
    .lang_type_en .casesdetail__container__projects__detail__date__name,
    .lang_type_en .casesdetail__container__projects__detail__date__name p {
        font-size: 10px
    }

    .casesdetail__container__projects__detail__date__bar {
        margin-top: 4px
    }

    .casesdetail__container__projects__detail__title {
        margin-bottom: 25px
    }

    .casesdetail__container__projects__detail__title,
    .casesdetail__container__projects__detail__title__text,
    .lang_type_en .casesdetail__container__projects__detail__title {
        font-size: 20px;
        line-height: 1.5
    }

    .casesdetail__container__projects__detail__list__box {
        margin-bottom: 35px
    }

    .casesdetail__container__projects__detail__list__box__center_img {
        margin-bottom: 22px
    }

    .casesdetail__container__projects__detail__list__box__center_subtitle,
    .casesdetail__container__projects__detail__list__box__left_subtitle,
    .casesdetail__container__projects__detail__list__box__right_subtitle {
        margin-bottom: 14px
    }

    .casesdetail__container__projects__detail__list__box__center_subtitle,
    .casesdetail__container__projects__detail__list__box__center_subtitle p,
    .casesdetail__container__projects__detail__list__box__left_subtitle,
    .casesdetail__container__projects__detail__list__box__left_subtitle p,
    .casesdetail__container__projects__detail__list__box__right_subtitle,
    .casesdetail__container__projects__detail__list__box__right_subtitle p,
    .lang_type_en .casesdetail__container__projects__detail__list__box__center_subtitle,
    .lang_type_en .casesdetail__container__projects__detail__list__box__left_subtitle,
    .lang_type_en .casesdetail__container__projects__detail__list__box__right_subtitle {
        font-size: 14px;
        line-height: 1.75
    }

    .casesdetail__container__projects__detail__list__box__center_text,
    .casesdetail__container__projects__detail__list__box__center_text p,
    .casesdetail__container__projects__detail__list__box__left_text,
    .casesdetail__container__projects__detail__list__box__left_text p,
    .casesdetail__container__projects__detail__list__box__right_text,
    .casesdetail__container__projects__detail__list__box__right_text p,
    .lang_type_en .casesdetail__container__projects__detail__list__box__center_text,
    .lang_type_en .casesdetail__container__projects__detail__list__box__center_text p,
    .lang_type_en .casesdetail__container__projects__detail__list__box__left_text,
    .lang_type_en .casesdetail__container__projects__detail__list__box__left_text p,
    .lang_type_en .casesdetail__container__projects__detail__list__box__right_text,
    .lang_type_en .casesdetail__container__projects__detail__list__box__right_text p {
        font-size: 12px;
        line-height: 1.9
    }

    .casesdetail__container__projects__detail__list__box__left_img,
    .casesdetail__container__projects__detail__list__box__right_img {
        width: 100%;
        max-width: none;
        margin-bottom: 22px;
        padding: 0;
        float: none
    }

    .casesdetail__container__projects_list__list,
    .casesdetail__container__projects__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        margin-bottom: 40px
    }

    .casesdetail__container__projects_list__list__box__title__name,
    .casesdetail__container__projects_list__list__box__title__name p,
    .casesdetail__container__projects__list__box__title__name,
    .casesdetail__container__projects__list__box__title__name p,
    .lang_type_en .casesdetail__container__projects_list__list__box__title__name,
    .lang_type_en .casesdetail__container__projects__list__box__title__name {
        font-size: 12px;
        line-height: 1.75
    }

    .casesdetail__container__column__box {
        display: block;
        margin-bottom: 35px
    }

    .casesdetail__container__column__box__img,
    .casesdetail__container__column__box__title {
        width: 100%;
        height: auto
    }

    .casesdetail__container__column__box__title__name,
    .casesdetail__container__column__box__title__name p,
    .lang_type_en .casesdetail__container__column__box__title__name,
    .lang_type_en .casesdetail__container__column__box__title__name p {
        width: 100%;
        height: auto;
        padding: 12px 0;
        font-size: 13px;
        line-height: 1.75
    }

    .casesdetail__container__top {
        padding-top: 35px
    }
}

/* Avoid fractional viewport gaps at the existing desktop WORKS column boundaries. */
@media screen and (min-width:980px) and (max-width:1243.98px) {
    .cases .page__inner,
    .cases__filter,
    .cases .page__head {
        width: 822px;
        max-width: 822px
    }

    .cases__container--responsive {
        grid-template-columns: repeat(2, 410px)
    }
}

@media screen and (min-width:1244px) and (max-width:1647.98px) {
    .cases .page__inner,
    .cases__filter,
    .cases .page__head {
        width: 1220px;
        max-width: 1220px
    }

    .cases__container--responsive {
        grid-template-columns: repeat(3, 410px)
    }
}

/* ==========================================================================
   Phase R4: WHO WE ARE
   ========================================================================== */

@media screen and (max-width:979.98px) {
    .who_we_are__head,
    .who_we_are__aside,
    .who_we_are .section__inner,
    .who_we_are .ourbusiness .ourbusiness__domain__inner,
    .who_we_are .ourbusiness .ourbusiness__overview__inner,
    .who_we_are .mvv .page__title,
    .who_we_are .ourbusiness .page__title {
        box-sizing: border-box;
        width: 100%;
        max-width: 860px
    }

    .who_we_are .who_we_are__ourbusiness,
    .who_we_are .ourbusiness,
    .who_we_are .ourbusiness__domain,
    .who_we_are .ourbusiness__overview,
    .who_we_are .ourbusiness__overview__column {
        width: 100%;
        min-width: 0
    }

    .who_we_are .ourbusiness .ourbusiness__domain__inner,
    .who_we_are .ourbusiness .ourbusiness__overview__inner {
        margin-left: auto;
        margin-right: auto
    }

    .who_we_are .section_header,
    .who_we_are .ourbusiness__domain__text,
    .who_we_are .ourbusiness__domain__cotion,
    .who_we_are .ourbusiness__domain__cotion__title,
    .who_we_are .ourbusiness__domain__cotion__text,
    .who_we_are .ourbusiness__overview__title,
    .who_we_are .ourbusiness__overview__text,
    .who_we_are .ourbusiness__overview__cases {
        min-width: 0;
        overflow-wrap: anywhere
    }

    .who_we_are .ourbusiness__domain__cotion__image,
    .who_we_are .ourbusiness__domain__cotion__image_sp,
    .who_we_are .mvv .editable img,
    .who_we_are__banner img {
        max-width: 100%;
        height: auto
    }

    .who_we_are .ourbusiness__overview__rap {
        box-sizing: border-box;
        width: calc(100% - 120px);
        max-width: 700px
    }

    .who_we_are .ourbusiness__overview__cases {
        width: 100%;
        max-width: 500px
    }

    .who_we_are .ourbusiness__overview__cases__item,
    .who_we_are .ourbusiness__overview__cases__item a {
        max-width: 100%
    }

    .who_we_are .ourbusiness__overview__title {
        max-width: calc(100% - 120px)
    }

    .who_we_are .ourbusiness__overview__title span {
        overflow-wrap: anywhere
    }
}

@media screen and (max-width:750.98px) {
    .who_we_are .page__head {
        width: 125px;
        height: 15.44px
    }

    .who_we_are .who_we_are__ourbusiness {
        margin-top: 40px;
        margin-bottom: 15px
    }

    .who_we_are .ourbusiness .ourbusiness__domain__inner {
        max-width: none;
        margin: 0 auto 10px
    }

    .who_we_are .ourbusiness .ourbusiness__overview__inner {
        width: 100%;
        max-width: none !important;
        margin: 0 auto 15px;
        padding: 0 12px
    }

    .who_we_are .mvv .page__title,
    .who_we_are .ourbusiness .page__title {
        max-width: none;
        margin-bottom: 12px
    }

    .who_we_are .who_we_are__ourbusiness .section_header {
        margin: 0 0 18px
    }

    .who_we_are .section_header h3,
    .lang_type_en .who_we_are .section_header h3 {
        font-size: 20px;
        line-height: 1.5
    }

    .who_we_are .ourbusiness__domain__text,
    .lang_type_en .who_we_are .ourbusiness__domain__text {
        margin: 0 auto 30px;
        font-size: 12px;
        line-height: 1.9
    }

    .who_we_are .ourbusiness__domain__text p,
    .lang_type_en .who_we_are .ourbusiness__domain__text p {
        font-size: 12px;
        line-height: 1.9
    }

    .who_we_are .ourbusiness__domain__text p {
        margin-left: 0;
        margin-right: 0
    }

    .who_we_are .ourbusiness__domain__cotion {
        margin: 0 0 30px
    }

    .who_we_are .ourbusiness__domain__cotion__title {
        display: flex;
        align-items: center;
        margin-bottom: 12px
    }

    .who_we_are .ourbusiness__domain__cotion__title p,
    .lang_type_en .who_we_are .ourbusiness__domain__cotion__title p {
        margin-left: 8px;
        font-size: 12px;
        line-height: 1.6;
        float: none
    }

    .who_we_are .ourbusiness__domain__cotion__icon {
        flex: 0 0 auto;
        width: 15px;
        float: none
    }

    .who_we_are .ourbusiness__domain__cotion__text,
    .lang_type_en .who_we_are .ourbusiness__domain__cotion__text {
        font-size: 11px;
        line-height: 1.9
    }

    .who_we_are .ourbusiness__domain__cotion__text p,
    .lang_type_en .who_we_are .ourbusiness__domain__cotion__text p {
        font-size: 11px;
        line-height: 1.9
    }

    .who_we_are .ourbusiness__domain__cotion__image_sp {
        margin-bottom: 18px
    }

    .who_we_are .mvv.section .editable {
        margin-top: 48px
    }

    .who_we_are .mvv.section .editable h4 {
        margin-top: 24px;
        font-size: 12px;
        line-height: 1.7
    }

    .who_we_are .mvv.section .editable p {
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.6;
        letter-spacing: 1px
    }

    .who_we_are .mvv.section .editable img {
        width: 300px;
        margin-top: 7px
    }

    .who_we_are .mvv.section .editable img.text1 {
        width: 250px
    }

    .who_we_are .mvv.section .editable img.text2 {
        width: 300px;
        margin-left: 10px
    }

    .who_we_are__aside {
        width: 100%;
        margin: 50px auto 25px
    }

    .who_we_are .ourbusiness__overview .ourbusiness__overview__column {
        margin-bottom: 15px
    }

    .who_we_are .ourbusiness__overview__title {
        top: 30px;
        left: 15px;
        max-width: calc(100% - 30px);
        padding: 1px
    }

    .who_we_are .ourbusiness__overview__title span {
        font-size: 18px;
        line-height: 1.25;
        letter-spacing: -.5px
    }

    .who_we_are .ourbusiness__overview__rap {
        width: 100%;
        max-width: none;
        min-height: 260px;
        padding: 60px 15px 35px
    }

    .who_we_are .ourbusiness__overview__text {
        margin-bottom: 20px
    }

    .who_we_are .ourbusiness__overview__text__title,
    .lang_type_en .who_we_are .ourbusiness__overview__text__title {
        margin-bottom: 24px;
        font-size: 11px;
        line-height: 1.7
    }

    .who_we_are p.ourbusiness__overview__text__title,
    .lang_type_en .who_we_are p.ourbusiness__overview__text__title {
        font-size: 11px;
        line-height: 1.7
    }

    .who_we_are .ourbusiness__overview__text__description,
    .lang_type_en .who_we_are .ourbusiness__overview__text__description {
        font-size: 11px;
        line-height: 2
    }

    .who_we_are p.ourbusiness__overview__text__description,
    .lang_type_en .who_we_are p.ourbusiness__overview__text__description {
        font-size: 11px;
        line-height: 2
    }

    .who_we_are .ourbusiness__overview__cases {
        width: 100%;
        max-width: none
    }

    .who_we_are .ourbusiness__overview__cases__title p,
    .lang_type_en .who_we_are .ourbusiness__overview__cases__title p {
        margin-bottom: 10px;
        font-size: 11px
    }

    .who_we_are .ourbusiness__overview__cases__item {
        margin-right: 0;
        margin-bottom: 10px
    }

    .who_we_are .ourbusiness__overview__cases__item p,
    .lang_type_en .who_we_are .ourbusiness__overview__cases__item p {
        padding: 4px 8px 4px 15px;
        font-size: 11px;
        line-height: 1.4
    }

    .who_we_are .ourbusiness__overview__cases__item__arror {
        width: 15px;
        height: 22px;
        padding-right: 15px
    }

    .who_we_are .ourbusiness__overview__cases__item__arror:before {
        width: 6px;
        margin-right: 10px
    }

    .who_we_are .ourbusiness__overview__cases__item__arror:after {
        width: 12px;
        margin-right: 10px
    }
}

/* TALK rich-text is authored through WordPress. aio-semantic.css is loaded
   after talk-custom.css, so this final shared layer intentionally owns the
   computed native text size below the desktop boundary. */
@media screen and (min-width:751px) and (max-width:979.98px) {
    .talkdetail__section__text,
    .talkdetail__section__text :is(p, div, li, blockquote, dd, dt, td, th),
    .talkdetail__section__text :is(ul, ol) {
        font-size: 16px;
        line-height: 1.8;
    }

    .talkdetail__section__text :is(ul, ol) {
        padding-left: 1.5em;
    }
}

/* Phase R10: native SP type scale.
   Each token is calibrated from the computed 402px viewport value (P), then
   grows linearly up to the former 750px design range without using zoom. */
@media screen and (max-width:750.98px) {
    :root {
        --dof-type-8: clamp(8px, 1.99005vw, 14.95px);
        --dof-type-10: clamp(9px, 2.48756vw, 18.68px);
        --dof-type-11: clamp(10px, 2.73632vw, 20.55px);
        --dof-type-12: clamp(11px, 2.98507vw, 22.42px);
        --dof-type-13: clamp(11px, 3.23383vw, 24.29px);
        --dof-type-14: clamp(12px, 3.48259vw, 26.16px);
        --dof-type-15: clamp(13px, 3.73134vw, 28.02px);
        --dof-type-16: clamp(14px, 3.98010vw, 29.89px);
        --dof-type-17: clamp(15px, 4.22886vw, 31.76px);
        --dof-type-18: clamp(16px, 4.47761vw, 33.63px);
        --dof-type-20: clamp(17px, 4.97512vw, 37.36px);
        --dof-type-21: clamp(18px, 5.22388vw, 39.23px);
        --dof-type-21-5: clamp(18px, 5.34826vw, 40.16px);
        --dof-type-22: clamp(19px, 5.47264vw, 41.11px);
        --dof-type-23: clamp(20px, 5.72139vw, 42.97px);
        --dof-type-30: clamp(24px, 7.46269vw, 56.04px);
        --dof-type-note-title: clamp(24px, 8vw, 60.30px);
    }

    .page .page__inner {
        width: calc(100% - 40px);
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    body,
    .index__top__ui .page__title,
    .index__top__ui .page__title :is(a, p) {
        font-size: var(--dof-type-12);
    }

    .cookie_popup__text,
    .lang_type_en .cookie_popup__text {
        font-size: var(--dof-type-12);
    }

    .index__top__ui__showreel__title,
    .lang_type_en .index__top__ui__showreel__title,
    .index .news__container__line__box__overview,
    .lang_type_en .index .news__container__line__box__overview,
    .index__talk .talkdetail__recommend__item__info__date,
    .lang_type_en .index__talk .talkdetail__recommend__item__info__date {
        font-size: var(--dof-type-11);
    }

    .index__philosophy__title,
    .lang_type_en .index__philosophy__title {
        font-size: var(--dof-type-30);
        line-height: 1.5;
    }

    .index__philosophy__text,
    .lang_type_en .index__philosophy__text {
        font-size: var(--dof-type-15);
        line-height: 2.2;
    }

    .index__cases__item__title,
    .lang_type_en .index__cases__item__title,
    .index__cases .btn_square__item__text p,
    .lang_type_en .index__cases .btn_square__item__text p,
    .index .news__container__line__box__column__text__title,
    .lang_type_en .index .news__container__line__box__column__text__title,
    .index__talk .talkdetail__recommend__item__text,
    .lang_type_en .index__talk .talkdetail__recommend__item__text,
    .index__talk .talkdetail__recommend__item .btn_square__item__text p,
    .lang_type_en .index__talk .talkdetail__recommend__item .btn_square__item__text p {
        font-size: var(--dof-type-12);
    }

    .index__cases__item__genre,
    .lang_type_en .index__cases__item__genre,
    .index .news__container__line__box__column__text__date__tag,
    .index .news__container__line__box__column__text__date__tag p,
    .lang_type_en .index .news__container__line__box__column__text__date__tag,
    .lang_type_en .index .news__container__line__box__column__text__date__tag p,
    .index__talk .talkdetail__recommend__item__info__categories .category,
    .lang_type_en .index__talk .talkdetail__recommend__item__info__categories .category {
        font-size: var(--dof-type-10);
    }

    .index__talk_head span,
    .lang_type_en .index__talk_head span,
    .index__talk .talkdetail__recommend__item__title,
    .lang_type_en .index__talk .talkdetail__recommend__item__title {
        font-size: var(--dof-type-20);
    }

    .cases__filter__category__label,
    .cases__filter__label,
    .cases__filter__custom_select__selected,
    .cases__filter__select,
    .cases__filter__custom_select__option,
    .casesdetail__container__projects__detail__list__box__center_text,
    .casesdetail__container__projects__detail__list__box__center_text p,
    .casesdetail__container__projects__detail__list__box__left_text,
    .casesdetail__container__projects__detail__list__box__left_text p,
    .casesdetail__container__projects__detail__list__box__right_text,
    .casesdetail__container__projects__detail__list__box__right_text p {
        font-size: var(--dof-type-12);
    }

    .cases__container__item__box__text__title,
    .lang_type_en .cases__container__item__box__text__title,
    .casesdetail__container__column__box__title__name,
    .casesdetail__container__column__box__title__name p,
    .lang_type_en .casesdetail__container__column__box__title__name,
    .lang_type_en .casesdetail__container__column__box__title__name p {
        font-size: var(--dof-type-13);
    }

    .cases__container__item__box__text__tag,
    .lang_type_en .cases__container__item__box__text__tag,
    .casesdetail__container__projects__detail__date__name,
    .casesdetail__container__projects__detail__date__name p,
    .lang_type_en .casesdetail__container__projects__detail__date__name,
    .lang_type_en .casesdetail__container__projects__detail__date__name p {
        font-size: var(--dof-type-10);
    }

    .casesdetail__container__projects__detail__title,
    .casesdetail__container__projects__detail__title__text,
    .lang_type_en .casesdetail__container__projects__detail__title {
        font-size: var(--dof-type-20);
        line-height: 1.5;
    }

    .casesdetail__container__projects__detail__list__box__center_subtitle,
    .casesdetail__container__projects__detail__list__box__center_subtitle p,
    .casesdetail__container__projects__detail__list__box__left_subtitle,
    .casesdetail__container__projects__detail__list__box__left_subtitle p,
    .casesdetail__container__projects__detail__list__box__right_subtitle,
    .casesdetail__container__projects__detail__list__box__right_subtitle p {
        font-size: var(--dof-type-14);
        line-height: 1.75;
    }

    .casesdetail__container__projects_list__list__box__title__name,
    .casesdetail__container__projects_list__list__box__title__name p,
    .casesdetail__container__projects__list__box__title__name,
    .casesdetail__container__projects__list__box__title__name p {
        font-size: var(--dof-type-12);
        line-height: 1.75;
    }

    .who_we_are .section_header h3,
    .lang_type_en .who_we_are .section_header h3 {
        font-size: var(--dof-type-20);
        line-height: 1.5;
    }

    .who_we_are .ourbusiness__domain__text,
    .who_we_are .ourbusiness__domain__text p,
    .lang_type_en .who_we_are .ourbusiness__domain__text,
    .lang_type_en .who_we_are .ourbusiness__domain__text p,
    .who_we_are .ourbusiness__domain__cotion__title p,
    .lang_type_en .who_we_are .ourbusiness__domain__cotion__title p,
    .who_we_are .mvv.section .editable h4,
    .who_we_are .mvv.section .editable p {
        font-size: var(--dof-type-12);
    }

    .who_we_are .ourbusiness__domain__cotion__text,
    .who_we_are .ourbusiness__domain__cotion__text p,
    .lang_type_en .who_we_are .ourbusiness__domain__cotion__text,
    .lang_type_en .who_we_are .ourbusiness__domain__cotion__text p,
    .who_we_are .ourbusiness__overview__text__title,
    .who_we_are p.ourbusiness__overview__text__title,
    .who_we_are .ourbusiness__overview__text__description,
    .who_we_are p.ourbusiness__overview__text__description,
    .who_we_are .ourbusiness__overview__cases__title p,
    .who_we_are .ourbusiness__overview__cases__item p {
        font-size: var(--dof-type-11);
    }

    .who_we_are .ourbusiness__overview__title span {
        font-size: var(--dof-type-18);
        line-height: 1.25;
    }

    .talkdetail__section__text,
    .talkdetail__section__text :is(p, div, li, blockquote, dd, dt, td, th) {
        font-size: var(--dof-type-16);
        line-height: 1.8;
    }
}

/* WORKS archive parity. Keep this final so it overrides only the archive's
   R10 mobile typography without affecting the WORKS detail page. */
@media screen and (max-width:750.98px) {
    .cases:not(.casesdetail) .page__head {
        margin: 24.978667vw -2vw 8vw;
        padding-left: 4vw;
        height: 4.133333vw;
    }

    .cases:not(.casesdetail) .page__head__image {
        width: 19.733333vw;
        height: 4.133333vw;
    }

    .cases:not(.casesdetail) .cases__filter {
        margin: 5.333333vw 0 6.666667vw;
    }

    .cases:not(.casesdetail) .cases__filter__category {
        margin-bottom: 5.333333vw;
    }

    .cases:not(.casesdetail) .cases__filter__category__label {
        margin-bottom: 2.666667vw;
        font-size: 2.133333vw;
        line-height: 1;
    }

    .cases:not(.casesdetail) .cases__filter__label {
        font-size: 2.133333vw;
        line-height: 1;
    }

    .cases:not(.casesdetail) .cases__filter__client {
        flex-direction: column;
        align-items: flex-start;
        gap: 2vw;
    }

    .cases:not(.casesdetail) .cases__filter__select,
    .cases:not(.casesdetail) .cases__filter__custom_select__selected {
        height: 6.666667vw;
        min-height: 0;
        padding: 1.333333vw 6.666667vw 1.333333vw 2.666667vw;
        font-size: 2.4vw;
        border-width: .133333vw;
        box-sizing: content-box;
    }

    .cases:not(.casesdetail) .cases__filter__select {
        background-position: right 2.666667vw center;
        background-size: 1.6vw;
    }

    .cases:not(.casesdetail) .cases__filter__custom_select__arrow {
        width: 1.6vw;
        height: 1.066667vw;
        margin-left: 1.333333vw;
    }

    .cases:not(.casesdetail) .cases__filter__custom_select__options {
        margin-top: .533333vw;
        max-height: 40vw;
        border-width: .133333vw;
    }

    .cases:not(.casesdetail) .cases__filter__custom_select__option {
        min-height: 0;
        padding: 2vw 2.666667vw;
        font-size: 2.4vw;
        box-sizing: content-box;
    }

    .cases:not(.casesdetail) .cases__filter__custom_select__option:not(:last-child) {
        border-bottom-width: .133333vw;
    }

    .cases:not(.casesdetail) .cases__filter__custom_select__check {
        width: 2.133333vw;
        height: 2.133333vw;
        margin-left: 1.333333vw;
    }

    .cases:not(.casesdetail) .cases__container--responsive {
        gap: 0;
    }

    .cases:not(.casesdetail) .cases__container__item__box__padding {
        height: 5.733333vw;
    }

    .cases:not(.casesdetail) .cases__container__item__box__text {
        width: 69.866667vw;
        margin: 4.133333vw 0 0 4vw;
        padding: 0;
        box-sizing: content-box;
        overflow-wrap: anywhere;
    }

    .cases:not(.casesdetail) .cases__container__item__box__text__title,
    .lang_type_en .cases:not(.casesdetail) .cases__container__item__box__text__title {
        margin-bottom: 3.866667vw;
        font-size: 2.666667vw;
        line-height: 1.75;
    }

    .cases:not(.casesdetail) .cases__container__item__box__text__tag,
    .lang_type_en .cases:not(.casesdetail) .cases__container__item__box__text__tag {
        font-size: 2.4vw;
        line-height: 1.75;
    }

    .cases:not(.casesdetail) .cases__container__item__box__link__view {
        width: 7.466667vw;
        height: 4.933333vw;
    }

    .cases:not(.casesdetail) .cases__container__item__box__link__view__bartop,
    .cases:not(.casesdetail) .cases__container__item__box__link__view__barbottom {
        height: .133333vw;
    }

    .cases:not(.casesdetail) .cases__container__item__box__link__view__barright {
        width: .133333vw;
    }
}

/* Shared header and navigation parity. This final SP block intentionally
   restores the archive-calibrated controls without changing tablet/desktop. */
@media screen and (max-width:750.98px) {
    .header__logo {
        top: 3.333333vw;
        left: 3.2vw;
        width: 10.533333vw;
        height: 5.866667vw;
    }

    .header__logo .catch {
        top: 2.933333vw;
        margin-left: 12.666667vw;
        font-size: 2.133333vw;
    }

    .header__menu {
        top: 4.533333vw;
        right: 6.8vw;
        width: 6.4vw;
        height: 4.4vw;
    }

    .header__menu__line {
        height: .266667vw;
    }

    .header__menu__line--2 {
        top: 2.266667vw;
    }

    .header__menu__line--3 {
        top: 4.266667vw;
        width: 4.666667vw;
    }

    .on .header__menu__line--1,
    .on .header__menu__line--3 {
        top: 1.333333vw;
    }

    .header__bg {
        height: 13.333333vw;
    }

    .header.open {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100svh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    .nav {
        position: absolute;
        min-height: 100svh;
    }

    .nav__bg {
        min-height: 100svh;
    }

    .nav__container {
        padding: 14.666667vw 0 14.666667vw 5.333333vw;
    }

    .nav__item {
        padding-left: 4.266667vw;
        margin-bottom: 8vw;
    }

    .nav__item.select {
        padding-left: 6.933333vw;
    }

    .nav__item__bar {
        top: 2.133333vw;
        width: 2.666667vw;
        height: .133333vw;
    }

    .select .nav__item__bar {
        left: 2.666667vw;
    }

    .nav__item__arror {
        top: 1.6vw;
        width: 2.666667vw;
        height: 1.466667vw;
    }

    .select .nav__item__arror {
        left: 2.666667vw;
    }

    .nav__top {
        width: 10.933333vw;
        height: 4.193333vw;
    }

    .nav__who_we_are {
        width: 34.133333vw;
        height: 4.214667vw;
    }

    .nav__member {
        width: auto;
        height: 5.866667vw;
    }

    .nav__item.nav__member span {
        font-size: 5.733333vw;
    }

    .nav__item.nav__member .nav__item__bar {
        top: 3.2vw;
    }

    .nav__item.nav__member .nav__item__arror {
        top: 2.933333vw;
    }

    .nav__cases {
        width: 19.733333vw;
        height: 4.133333vw;
    }

    .nav__news {
        width: 15.2vw;
        height: 4.214667vw;
    }

    .nav__recruit {
        width: 23.2vw;
        height: 4.222667vw;
    }

    .nav__contact {
        width: 25.333333vw;
        height: 4.266667vw;
        margin-bottom: 6.666667vw;
    }

    .nav__talk {
        height: 5.333333vw;
        margin-bottom: 5.333333vw;
    }

    .nav__talk span {
        font-size: 5.333333vw;
    }

    .lang_type_en .nav__talk span {
        font-size: 5.066667vw;
    }

    .nav__talk .nav__item__bar {
        top: 2.8vw;
    }

    .nav__talk .nav__item__arror {
        top: 2.266667vw;
    }
}

/* Route-specific SP content clearance below the shared header. */
@media screen and (max-width:750.98px) {
    .who_we_are .page__head,
    .news .page__head,
    .recruit .page__head,
    .contact .page__head,
    .casesdetail .page__head {
        margin-top: 24.978667vw;
    }

    .newsdetail .page__head,
    .member_detail .page__head {
        margin-top: 22.666667vw;
    }

    .member__container {
        padding-top: 19.733333vw;
    }

    .talk .masonry-wrapper {
        margin-top: 13.333333vw;
    }

    .talkdetail .talkdetail__header {
        margin-top: 19.733333vw;
    }
}

/* WHO WE ARE final SP parity follows all shared SP type rules. */
@media screen and (max-width:750.98px) {
    .who_we_are .page__inner { box-sizing: border-box; width: 100%; max-width: none; padding: 0; }
    .who_we_are__head, .who_we_are .section__inner, .who_we_are .ourbusiness .ourbusiness__domain__inner { width: 88%; max-width: none; margin-left: auto; margin-right: auto; }
    .who_we_are .page__head { width: 33.333333vw; height: 4.117333vw; margin-top: 24.978667vw; margin-bottom: 0; padding-left: 4vw; }
    .who_we_are .mvv .page__title, .who_we_are .ourbusiness .page__title { width: 88%; height: auto; padding-left: 4vw; margin-bottom: 3.2vw; font-size: clamp(10px, 2.4vw, 18px); line-height: 1.75; }
    .who_we_are .mvv .page__title::after, .who_we_are .ourbusiness .page__title::after { top: 2.133333vw; left: .933333vw; width: 2.266667vw; height: 1px; }
    .who_we_are .who_we_are__ourbusiness { margin-top: 10.666667vw; margin-bottom: 4vw; }
    .who_we_are .ourbusiness .ourbusiness__domain__inner { margin-bottom: 2.666667vw; }
    .who_we_are .who_we_are__ourbusiness .section_header { margin: 0 2.666667vw 2.666667vw; }
    .who_we_are .section_header.about_dof { margin-bottom: 4.8vw; }
    .who_we_are .section_header h3, .lang_type_en .who_we_are .section_header h3 { font-size: clamp(17px, 5.333333vw, 40px); line-height: 1.7; }
    .who_we_are .ourbusiness__domain__text, .lang_type_en .who_we_are .ourbusiness__domain__text { margin: 0 auto 6.666667vw; font-size: clamp(10px, 2.666667vw, 20px); line-height: 2.2; }
    .who_we_are .ourbusiness__domain__text p, .lang_type_en .who_we_are .ourbusiness__domain__text p { margin-left: 3.333333vw; margin-right: 3.333333vw; font-size: clamp(10px, 2.666667vw, 20px); line-height: 2.2; }
    .who_we_are .ourbusiness__domain__cotion { margin: 0 3.333333vw 6.666667vw; }
    .who_we_are .ourbusiness__domain__cotion__title { display: flex; margin-bottom: 2.666667vw; }
    .who_we_are .ourbusiness__domain__cotion__title p, .lang_type_en .who_we_are .ourbusiness__domain__cotion__title p { margin-left: 2vw; font-size: clamp(10px, 2.666667vw, 20px); line-height: 3; float: none; }
    .who_we_are .ourbusiness__domain__cotion__icon { flex: 0 0 auto; width: 3.866667vw; height: auto; float: none; }
    .who_we_are .ourbusiness__domain__cotion__text, .lang_type_en .who_we_are .ourbusiness__domain__cotion__text, .who_we_are .ourbusiness__domain__cotion__text p, .lang_type_en .who_we_are .ourbusiness__domain__cotion__text p { font-size: clamp(10px, 2.4vw, 18px); line-height: 2.2; }
    .who_we_are .ourbusiness__domain__cotion__image_sp { width: 100%; height: auto; margin-bottom: 4vw; }
    .who_we_are .mvv.section .editable { margin-top: 12.666667vw; }
    .who_we_are .mvv.section .editable h4 { margin-top: 6vw; font-size: clamp(10px, 1.733333vw, 13px); line-height: 1.7; }
    .who_we_are .mvv.section .editable p, .lang_type_en .who_we_are .mvv.section .editable p { margin-top: .533333vw; font-size: clamp(18px, 6vw, 45px); line-height: 1.3; letter-spacing: .266667vw; }
    .who_we_are .mvv.section .editable img { width: 80vw; max-width: 100%; height: auto; margin-top: 1.733333vw; }
    .who_we_are .mvv.section .editable img.text1 { width: 66.666667vw; }
    .who_we_are .mvv.section .editable img.text2 { width: 80vw; max-width: calc(100% - 2.533333vw); margin-left: 2.533333vw; }
    .who_we_are .who_we_are__aside { width: 80%; max-width: none; margin: 13.333333vw auto 6.666667vw; }
    .who_we_are .who_we_are__banner img { width: 100%; height: auto; }
    .who_we_are .ourbusiness__overview .ourbusiness__overview__inner { box-sizing: border-box; width: 88%; max-width: none !important; margin: 0 auto 4vw; padding: 0 3.333333vw; }
    .who_we_are .ourbusiness__overview .ourbusiness__overview__column { width: 100%; margin-bottom: 4vw; }
    .who_we_are .ourbusiness__overview__column:not(.mini) .ourbusiness__overview__title { top: 8vw; left: 4vw; max-width: calc(100% - 8vw); padding: .266667vw; }
    .who_we_are .ourbusiness__overview__title span { font-size: clamp(16px, 4.533333vw, 34px); line-height: 1.25; letter-spacing: -.133333vw; }
    .who_we_are .ourbusiness__overview__rap { box-sizing: content-box; width: calc(100% - 8vw); max-width: none; min-height: 69.333333vw; margin: 0 auto; padding: 16vw 0 9.333333vw; }
    .who_we_are .ourbusiness__overview__text { margin-bottom: 5.333333vw; }
    .who_we_are .ourbusiness__overview__text__title, .who_we_are p.ourbusiness__overview__text__title, .lang_type_en .who_we_are .ourbusiness__overview__text__title, .lang_type_en .who_we_are p.ourbusiness__overview__text__title { margin-bottom: 6.666667vw; font-size: clamp(10px, 2.4vw, 18px); line-height: 1.6; }
    .who_we_are .ourbusiness__overview__text__description, .who_we_are p.ourbusiness__overview__text__description, .lang_type_en .who_we_are .ourbusiness__overview__text__description, .lang_type_en .who_we_are p.ourbusiness__overview__text__description { font-size: clamp(10px, 2.4vw, 18px); line-height: 2.2; }
    .who_we_are .ourbusiness__overview__cases { width: 100%; max-width: none; }
    .who_we_are .ourbusiness__overview__cases__title p, .lang_type_en .who_we_are .ourbusiness__overview__cases__title p { margin-bottom: 2.4vw; padding: 0; font-size: clamp(10px, 2.4vw, 18px); line-height: 1; }
    .who_we_are .ourbusiness__overview__cases__item { border-left-width: 1px; margin-right: 0; margin-bottom: 2.666667vw; }
    .who_we_are .ourbusiness__overview__cases__item p, .lang_type_en .who_we_are .ourbusiness__overview__cases__item p { padding: .8vw 2vw .8vw 3.866667vw; font-size: clamp(10px, 2.4vw, 18px); line-height: 1.4; }
    .who_we_are .ourbusiness__overview__cases__item__arror { width: 4vw; height: 4vw; padding-right: 3.866667vw; }
    .who_we_are .ourbusiness__overview__cases__item__arror:before { width: 1.066667vw; margin-right: 2.666667vw; }
    .who_we_are .ourbusiness__overview__cases__item__arror:after { width: 2.666667vw; margin-right: 2.666667vw; }
}

@media screen and (max-width:979.98px) {
    .site_loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }
}

/* WORKS detail final SP parity. Keep this route-local so archive and shared
   chrome geometry remain independent. */
@media screen and (max-width:750.98px) {
    #casesdetail.casesdetail {
        overflow: hidden;
    }

    #casesdetail.casesdetail > .page__inner {
        box-sizing: border-box;
        width: 88vw;
        max-width: none;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
    }

    #casesdetail.casesdetail .page__head {
        box-sizing: content-box;
        width: 19.733333vw;
        height: 4.133333vw;
        margin: 24.978667vw 0 8vw;
        padding-left: 4vw;
    }

    #casesdetail.casesdetail .page__head__image,
    #casesdetail.casesdetail .page__head svg {
        width: 19.733333vw;
        height: 4.133333vw;
    }

    #casesdetail.casesdetail .casesdetail__container {
        width: 100%;
        max-width: none;
    }

    #casesdetail.casesdetail .casesdetail__container__projects {
        margin-top: 14.666667vw;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail {
        width: 80vw;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__date {
        height: 1.333333vw;
        min-height: 0;
        margin-bottom: 4.666667vw;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__date__name,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__date__name time,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__date__name p {
        font-size: 2.4vw;
        line-height: 1;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__date__name {
        padding-right: 1.2vw;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__date__bar {
        height: 1px;
        margin-top: 1.066667vw;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__title {
        margin-bottom: 4.666667vw;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__title,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__title__text,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__title p {
        font-size: 3.333333vw;
        line-height: 1.75;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__list {
        width: 100%;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box {
        width: 100%;
        height: auto;
        margin-bottom: 6.666667vw;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box:last-child {
        margin-bottom: 0;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__center_img,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__left_img,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__right_img {
        width: 100%;
        margin: 0 auto 5.733333vw;
        padding: 0;
        float: none;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__center_img > img,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__left_img > img,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__right_img > img {
        width: 100%;
        height: auto;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__center_img__video,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__left_img__video,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__right_img__video {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__center_img__video iframe,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__left_img__video iframe,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__right_img__video iframe {
        display: block;
        width: 100%;
        height: 100%;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__center_subtitle,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__center_subtitle p,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__left_subtitle,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__left_subtitle p,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__right_subtitle,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__right_subtitle p,
    #casesdetail.casesdetail .casesdetail__section__title {
        font-size: 2.4vw;
        line-height: 1.75;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__center_subtitle {
        margin-bottom: 5.066667vw;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__left_subtitle,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__right_subtitle {
        margin-bottom: 5.733333vw;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__center_text,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__left_text,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__right_text {
        width: 100%;
        min-width: 0;
        float: none;
    }

    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__center_text,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__center_text p,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__center_text div,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__center_text li,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__left_text,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__left_text p,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__left_text div,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__left_text li,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__right_text,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__right_text p,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__right_text div,
    #casesdetail.casesdetail .casesdetail__container__projects__detail__list__box__right_text li {
        font-size: 2.4vw;
        line-height: 1.75;
    }

    #casesdetail.casesdetail .casesdetail__container > .btn_square {
        padding-top: 9.333333vw;
    }

    #casesdetail.casesdetail .casesdetail__container > .btn_square .btn_square__item {
        width: auto;
    }

    #casesdetail.casesdetail .casesdetail__container > .btn_square .btn_square__item__text {
        padding: 1.6vw 4vw;
    }

    #casesdetail.casesdetail .casesdetail__container > .btn_square .btn_square__item__text p {
        font-size: 2.4vw;
        line-height: 1;
    }

    #casesdetail.casesdetail .casesdetail__container > .btn_square .btn_square__item__arror {
        right: .4vw;
        width: .933333vw;
        height: 1.466667vw;
    }

    #casesdetail.casesdetail .casesdetail__container > .btn_square .btn_square__item:hover .btn_square__item__arror {
        right: 0;
    }

    #casesdetail.casesdetail .casesdetail__container > .btn_square .btn_square__item__bartop,
    #casesdetail.casesdetail .casesdetail__container > .btn_square .btn_square__item__barbottom {
        height: 1px;
    }

    #casesdetail.casesdetail .casesdetail__container > .btn_square .btn_square__item__barleft {
        width: 1px;
    }
}

/* TOP final SP parity.  Keep every declaration below the #index boundary so
   the shared header/footer and the route-specific page contracts stay intact. */
@media screen and (max-width:750.98px) {
    #index.index > .page__inner {
        box-sizing: border-box;
        width: 88%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    }

    #index.index .index__philosophy {
        margin: 14.666667vw auto 17.333333vw;
    }

    #index.index .index__philosophy__title,
    .lang_type_en #index.index .index__philosophy__title {
        margin-bottom: 8vw;
        font-size: clamp(24px, 8vw, 60px);
        line-height: 1.5;
    }

    #index.index .index__philosophy__text,
    .lang_type_en #index.index .index__philosophy__text {
        margin-bottom: 8vw;
        font-size: clamp(13px, 4vw, 30px);
        line-height: 2.2;
    }

    #index.index .index__title_1,
    #index.index .index__title_2,
    #index.index > .page__inner > .index__title_3:not(.index__note__title) {
        box-sizing: content-box;
        padding-left: 4vw;
    }

    #index.index .index__title_1 {
        width: 15.2vw;
        height: 4.214667vw;
        margin: 13.333333vw 0 9.333333vw;
    }

    #index.index .index__title_2 {
        width: 20.4vw;
        height: 4.292vw;
        margin: 17.333333vw 0 10.666667vw;
    }

    #index.index > .page__inner > .index__title_3:not(.index__note__title) {
        width: 22.533333vw;
        height: 4.266667vw;
        margin: 22.666667vw 0 5.333333vw;
    }

    #index.index .index__title_1::after,
    #index.index .index__title_2::after,
    #index.index > .page__inner > .index__title_3:not(.index__note__title)::after {
        top: 2.133333vw;
        left: .933333vw;
        width: 2.266667vw;
        height: 1px;
    }

    #index.index .index__cases__list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        overflow: visible;
    }

    #index.index .index__cases__item {
        width: 100%;
        float: none;
    }

    #index.index .index__cases__item__bg {
        height: auto;
        aspect-ratio: 660 / 370;
    }

    #index.index .index__cases__item__info {
        margin: 0 4vw;
        width: calc(100% - 8vw);
    }

    #index.index .index__cases__item__title,
    .lang_type_en #index.index .index__cases__item__title {
        font-size: clamp(11px, 3.066667vw, 23px);
        line-height: 1.75;
    }

    #index.index .index__cases__item__genre,
    .lang_type_en #index.index .index__cases__item__genre {
        font-size: clamp(9px, 2.4vw, 18px);
        line-height: 1.75;
    }

    #index.index .index__cases .btn_square {
        padding-top: 9vw;
    }

    #index.index .index__cases .btn_square__item {
        /* width: 100%; */
    }

    #index.index .index__cases .btn_square__item__text {
        padding: 1.333333vw 3.2vw;
    }

    #index.index .index__cases .btn_square__item__text p,
    .lang_type_en #index.index .index__cases .btn_square__item__text p {
        font-size: clamp(9px, 2.4vw, 18px);
        line-height: 1;
    }

    #index.index .index__news .index__column__body {
        width: 90.909091%;
    }

    #index.index .news__container__line {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10vw;
        width: 100%;
        overflow: visible;
    }

    #index.index .news__container__line__box {
        width: 100%;
        margin: 0;
        float: none;
        overflow: visible;
    }

    #index.index .news__container__line__box__column {
        display: grid;
        grid-template-columns: 337fr 248fr;
        gap: 2.5%;
        align-items: start;
    }

    #index.index .news__container__line__box__column__img {
        width: 100%;
        height: auto;
        margin: 0;
        float: none;
        aspect-ratio: 337 / 189;
    }

    #index.index .news__container__line__box__column__text {
        min-width: 0;
        width: auto;
        float: none;
    }

    #index.index .news__container__line__box__column__text__title,
    .lang_type_en #index.index .news__container__line__box__column__text__title {
        width: 86.693548%;
        margin: 0 0 0 2.4vw;
        font-size: clamp(11px, 3.066667vw, 23px);
        line-height: 1.75;
    }

    #index.index .news__container__line__box__overview,
    .lang_type_en #index.index .news__container__line__box__overview {
        box-sizing: border-box;
        width: 87.333333%;
        margin: 2.933333vw 0 0;
        padding: 0;
        font-size: clamp(9px, 2.4vw, 18px);
        line-height: 1.75;
    }

    #index.index .index__talk_head {
        margin: 22.666667vw 0 8vw;
        padding-left: 4vw;
    }

    #index.index .index__talk_head::after {
        top: 2.8vw;
        left: .933333vw;
        width: 2.266667vw;
        height: 1px;
    }

    #index.index .index__talk_head span,
    .lang_type_en #index.index .index__talk_head span {
        font-size: clamp(17px, 5.333333vw, 40px);
        line-height: 1;
    }

    #index.index .index__talk .talkdetail__recommend__container {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 72.727273%;
        grid-template-columns: none;
        column-gap: 12vw;
        width: 100%;
        max-width: 100%;
        padding-bottom: 2vw;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        white-space: normal;
        -webkit-overflow-scrolling: touch;
    }

    #index.index .index__talk .talkdetail__recommend__item,
    #index.index .index__talk .talkdetail__recommend__item:first-child,
    #index.index .index__talk .talkdetail__recommend__item:last-child {
        display: block;
        width: 100%;
        margin: 0;
        float: none;
    }

    #index.index .index__talk .talkdetail__recommend__item__image,
    #index.index .index__talk .talkdetail__recommend__item__info,
    #index.index .index__talk .talkdetail__recommend__item__title,
    #index.index .index__talk .talkdetail__recommend__item__text {
        width: 100%;
        min-width: 0;
    }

    #index.index .index__talk .talkdetail__recommend__item__image {
        height: auto;
        margin-bottom: 3.333333vw;
        aspect-ratio: 3 / 2;
    }

    #index.index .index__talk .talkdetail__recommend__item__info {
        margin-bottom: 1.333333vw;
    }

    #index.index .index__talk .talkdetail__recommend__item__info__date,
    .lang_type_en #index.index .index__talk .talkdetail__recommend__item__info__date {
        font-size: clamp(9px, 2.4vw, 18px);
    }

    #index.index .index__talk .talkdetail__recommend__item__title,
    .lang_type_en #index.index .index__talk .talkdetail__recommend__item__title {
        margin-bottom: 1.333333vw;
        line-height: 1.5;
    }

    #index.index .index__talk .talkdetail__recommend__item__text,
    .lang_type_en #index.index .index__talk .talkdetail__recommend__item__text {
        height: auto;
        margin-bottom: 2.666667vw;
        font-size: clamp(10px, 2.666667vw, 20px);
        line-height: 1.75;
    }

    #index.index .index__talk .talkdetail__recommend__item .btn_square,
    #index.index .index__talk .talkdetail__recommend__item .btn_square__item {
        width: 100%;
    }

    #index.index .index__talk .talkdetail__recommend__item .btn_square__item__text {
        padding: 2.666667vw 4vw;
    }

    #index.index .index__talk .talkdetail__recommend__item .btn_square__item__text p,
    .lang_type_en #index.index .index__talk .talkdetail__recommend__item .btn_square__item__text p {
        font-size: clamp(10px, 2.666667vw, 20px);
        line-height: 1;
    }

    #index.index .index__clients__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.587302%;
        width: 95.454545%;
        margin: 0 auto;
        overflow: visible;
    }

    #index.index .index__clients__list > p {
        display: contents;
    }

    #index.index .index__clients__item {
        width: 100%;
        margin: 0;
        float: none;
    }
}

/* Keep the global loading viewport override last: route-local rules above it
   must never change the loading layer's viewport anchoring. */
@media screen and (max-width:979.98px) {
    .site_loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }
}

@media screen and (max-width: 750px) {
    .btn_more__text p {
        font-size: 3vw !important;
    }
}

@media screen and (max-width:750.98px) {
    .page {
        letter-spacing: .133333vw;
    }
}

@media screen and (max-width: 750px) {
    .btn_square__item__arror {
        width: 1vw;
        height: 1vw;
    }
}