@charset "UTF-8";

/*** 共通 ***/
:root {
    --background-color-yellow: #f0dc42;
    --font-weight-black: 900;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --section-inline-padding: 3rem;
}
*,
::before,
::after {
    box-sizing: border-box;
}
html {
    font-family: 'Noto Sans JP';
    font-size: 62.5%;
    scroll-behavior: smooth;
}
body {
    min-width: 375px;
}
a {
    text-decoration: none;
}
img {
    vertical-align: middle;
    width: 100%;
}
ul {
    list-style: none;
}
.wrapper {
  overflow-x: clip;
}
.sp-only {
    display: none;
}
.tb-only {
    display: none;
}
.common__container {
    padding-inline: var(--section-inline-padding);
}
.common__inner {
    margin: 0 auto;
    max-width: 118rem;
    width: 100%;
}
.common__button {
    --button-height: 10rem;
    border-radius: calc(var(--button-height) / 2);
    display: inline-block;
    height: var(--button-height);
    line-height: var(--button-height);
    text-align: center;
}
.common__button:hover {
    opacity: 0.7;
    transition: opacity 0.3s;
}
.common__circle {
    --circle-size: 6.2rem;
    border-radius: 50%;
    display: inline-block;
    font-weight: bold;
    height: var(--circle-size);
    left: 0;
    line-height: var(--circle-size);
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: var(--circle-size);
}
.common__quotation {
    display: inline-block;
    left: 50%;
    position: relative;
    text-align: center;
    transform: translateX(-50%);
}
.common__quotation::before,
.common__quotation::after {
    color: var(--background-color-yellow);
    font-family: Inter;
    font-weight: normal;
    position: absolute;
    top: -5rem;
}
.common__quotation::before {
    content: '“';
    left: 0;
    transform: translateX(-100%);
}
.common__quotation::after {
    content: '”';
    right: 0;
    transform: translateX(100%);
}

/*** 共通(事例リスト) ***/
.common-case__list {
    display: flex;
    justify-content: space-between;
    margin-top: 4.6rem;
}
.common-case__item {
    width: calc((100% - 7rem) / 3);
}
.common-case__industry {
    font-size: 1.3rem;
    line-height: 2rem;
    text-align: left;
}
.common-case__company {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2rem;
    text-align: left;
}
.common-case__image {
    aspect-ratio: 370 / 210;
    border-radius: 0.5rem;
    margin-top: 1.5rem;
}

.common-case__image a {
    opacity: 1;
    transition: 0.3s;
}

.common-case__image a:hover {
    opacity: 0.7;
}

/*** ヘッダー ***/
header {
    background-color: #000;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}
.header__inner {
    align-items: center;
    display: flex;
    height: 9rem;
    justify-content: space-between;
}
.header__logo {
    width: 18rem;
}
.header-nav {
    align-items: center;
    display: flex;
}
.header-nav__item:nth-child(n+2) {
    margin-left: 3rem;
}
.header-nav__link {
    color: #fff;
    font-size: 1.6rem;
}
.header__button {
    --button-height: 4.4rem;
    background-color: var(--background-color-yellow);
    color: #000;
    font-size: 1.4rem;
    font-weight: bold;
    width: 23.7rem;
}

/*** 概要：ビジネス系YouTubeチャンネル運用代行サービス ***/
.overview {
    background: linear-gradient(rgba(0, 0, 0, 0.3978), rgba(0, 0, 0, 0.3978)), url(./../img/jesus-loves-austin-0O0gux4OZX4-unsplash.webp) no-repeat center / cover;
    color: #fff;
    margin-top: 9rem;
    padding-block: 8rem 26.3rem;
    text-align: center;
}
.overview__box {
    background-color: var(--background-color-yellow);
    border-radius: 1rem;
    color: #000;
    font-size: 3rem;
    font-weight: 900;
    height: 6rem;
    line-height: 6rem;
    margin: 0 auto;
    width: 74rem;
}
.overview__topic {
    display: inline-block;
    margin-top: 3.5rem;
    position: relative;
}
.overview__topic--circle {
    background-color: #fff;
    color: #000;
    font-size: 2rem;
}
.overview__topic--biggest {
    font-family: Montserrat;
    font-size: 8rem;
    font-weight: var(--font-weight-semibold);
    margin-left: 7.2rem;
}
.overview__topic--small {
    font-size: 3.5rem;
    line-height: 4rem;
    margin-left: 0.3rem;
}
.overview__topic--big {
    font-size: 7rem;
    font-weight: var(--font-weight-black);
    margin-left: 1.221rem;
}
.overview__text {
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 4rem;
    margin-top: 3.2rem;
}

/*** 提案：どうやら・・・ ***/
.suggest {
    background-color: #707070;
    border-radius: 20rem 0;
    margin-top: -20rem;
    padding-block: 5.9rem 10.6rem;
    position: relative;
}
.suggest::after {
    background-color: var(--background-color-yellow);
    bottom: 0;
    content: '';
    height: 20rem;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
}
.suggest__icon {
    margin: 0 auto;
    width: 7.9rem;
}
.suggest__topic {
    display: inline-block;
    font-size: 5rem;
    font-weight: bold;
    line-height: 6rem;
    margin-top: 4.85rem;
    position: relative;
}
.suggest__topic::before,
.suggest__topic::after {
    font-size: 15rem;
    top: 3.5rem;
}
.suggest__topic--small {
    font-size: 4rem;
}
.suggest__text {
    font-size: 2rem;
    font-weight: bold;
    line-height: 3.5rem;
    margin-top: 1.45rem;
    text-align: center;
}
.suggest__list {
    align-items: center;
    background-color: var(--background-color-yellow);
    border-radius: 2rem;
    color: #000;
    display: flex;
    height: 12rem;
    justify-content: space-between;
    margin: 3.3rem auto 0;
    padding: 0 4.6rem;
    width: 92rem;
}
.suggest__item:nth-child(1) {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 3.5rem;
    text-align: center;
}
.suggest__item:nth-child(2) {
    position: relative;
}
.suggest__item--circle {
    background-color: #000;
    color: #fff;
    font-size: 1.6rem;
}
.suggest__item--big {
    font-family: Montserrat;
    font-size: 8rem;
    font-weight: var(--font-weight-semibold);
    margin-left: 7.4rem;
}
.suggest__item--small {
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 4rem;
}
.suggest__item:nth-child(3) {
    align-self: end;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2rem;
    text-align: left;
    padding-bottom: 3.3rem;
}

/*** VOICE ***/
.voice {
    position: relative;
}
.voice__title {
    color: #fff;
    font-family: Montserrat;
    font-size: 20rem;
    left: -1.8rem;
    position: absolute;
    text-transform: uppercase;
    top: -5.5rem;
    z-index: 1;
}
.voice-interview__block {
    background-color: var(--background-color-yellow);
    font-size: 3rem;
    font-weight: var(--font-weight-black);
    line-height: 4.5rem;
    padding: 14.9rem 1.5rem 4.1rem 13rem;
}
.voice-interview__embed {
    background: linear-gradient(var(--background-color-yellow) 69.4%, #f5f5f5 69.4%);
    text-align: center;
}
.voice-interview__movie {
    aspect-ratio: 760 / 432;
    width: 76rem;
}
.voice-list__outer {
    background-color: #f5f5f5;
    padding-block: 6rem 13.1rem;
}
.voice-list__item {
    background-color: #fff;
    border: 0.5rem solid var(--background-color-yellow) ;
    border-radius: 1rem;
    padding: 5.2rem 5.85rem 6rem 26.1rem;
    position: relative;
    width: 100%;
}
.voice-list__item:nth-child(n+2) {
    margin-top: 2rem;
}
.voice-list__number {
    color: var(--background-color-yellow);
    font-size: 15rem;
    font-family: Montserrat;
    font-weight: var(--font-weight-semibold);
    left: 4rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.voice-list__box {
    background-color: #000;
    border-radius: 0.5rem;
    color: #fff;
    display: inline-block;
    font-size: 1.6rem;
    font-weight: var(--font-weight-medium);
    padding: 0.9rem 1.8rem;
}
.voice-list__topic {
    font-size: 3rem;
    font-weight: bold;
    line-height: 4.5rem;
    margin-top: 0.8rem;
}
.voice-list__text {
    border-top: 2px solid var(--background-color-yellow);
    font-size: 1.6rem;
    font-weight: var(--font-weight-medium);
    line-height: 2.5rem;
    margin-top: 3.15rem;
    padding-top: 2.35rem;
}

/*** 注目：ビジネス系YouTubeを運営することで・・・ ***/
.attension {
    margin-top: -6.1rem;
    position: relative;
    padding-bottom: 9.413rem;
}
.attension__title {
    background-color: var(--background-color-yellow);
    border-radius: 20rem 0;
    padding: 9rem 1.5rem 7.4rem 13rem;
    position: relative;
}
.attension__title::before {
    background-color: #000;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    display: inline-block;
    height: 4.3rem;
    left: 50%;
    position: absolute;
    top: -1.5rem;
    transform: translateX(-50%);
    width: 4.9rem;
}
.attension__text {
    font-size: 3rem;
    font-weight: bold;
    line-height: 4.5rem;
}
.attension__topic {
    font-size: 6rem;
    font-weight: var(--font-weight-black);
    line-height: 8rem;
    margin-top: 2.5rem;
}
.attension-illust {
    margin-top: 5.5rem;
    padding: 0 3rem;
}
.attension-illust__text {
    display: inline-block;
    font-size: 5rem;
    font-weight: var(--font-weight-black);
    position: relative;
}
.attension-illust__text::before,
.attension-illust__text::after {
    font-size: 19.8rem;
}
.attension-illust__image {
    margin: -1.5rem auto 0;
    max-width: 117.894rem;
    width: 100%;
}

/*** Quality ***/
.quality {
    background: linear-gradient(rgba(0, 0, 0, 0.3978), rgba(0, 0, 0, 0.3978)), url(./../img/kevin-ku-w7ZyuGYNpRQ-unsplash.webp) no-repeat center / cover;
    padding: 8.8rem 4rem 9.4rem;
}
.quality__title {
    color: #fff;
    font-size: 6rem;
    font-weight: var(--font-weight-semibold);
    font-family: Montserrat;
    text-align: center;
    text-transform: capitalize;
}
.quality__inner {
    background-color: #fff;
    border-radius: 20rem 0;
    margin-top: 6.2rem;
    padding: 8rem 9rem 7.8rem;
    text-align: center;
}
.quality__topic {
    display: inline-block;
    position: relative;
}
.quality__topic--circle {
    background-color: #000;
    color: #fff;
    font-size: 2rem;
}
.quality__topic--biggest {
    font-family: Montserrat;
    font-size: 8rem;
    font-weight: var(--font-weight-semibold);
    margin-left: 7.2rem;
}
.quality__topic--small {
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 4rem;
    margin-left: 0.3rem;
}
.quality__topic--midium {
    font-size: 4rem;
    font-weight: bold;
    margin-left: 0.38rem;
}
.quality__topic--big {
    font-size: 6rem;
    font-weight: bold;
}
.quality__subtitle {
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 4rem;
    margin-top: 6.1rem;
    text-align: left;
}
.quality__text {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 4rem;
    margin-top: 0.9rem;
    text-align: left;
}
.quality__button {
    --button-height: 6rem;
    background-color: #000;
    color: #fff;
    font-size: 1.8rem;
    font-weight: var(--font-weight-medium);
    max-width: 32rem;
    margin-top: 2.2rem;
    position: relative;
    width: 100%;
}
.quality__button::after {
    background: url(./../img/arrow_white.webp) no-repeat center / contain;
    content: '';
    display: inline-block;
    height: 0.9rem;
    position: absolute;
    right: 2.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
}

/*** CTA ***/
.cta {
    background: #11a27b url(./../img/cta_icon.webp) no-repeat right / contain;
    color: #fff;
    height: 53rem;
}
.cta__inner {
    height: 100%;
    margin: 0 auto;
    max-width: 117rem;
    position: relative;
    width: 100%;
}
.cta__topic {
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 5rem;
    padding-top: 8.6rem;
}
.cta__text {
    font-size: 2rem;
    font-weight: var(--font-weight-medium);
    line-height: 3rem;
    margin-top: 4.5rem;
}
.cta__button {
    --button-height: 8.1rem;
    background-color: var(--background-color-yellow);
    color: #000;
    font-size: 2.5rem;
    font-weight: bold;
    margin-top: 5rem;
    position: relative;
    width: 47.2rem;
}
.cta__button::after {
    background: url(./../img/arrow_black.webp) no-repeat center / contain;
    content: '';
    display: inline-block;
    height: 1.2rem;
    position: absolute;
    right: 2.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.333rem;
}
.cta__image {
    aspect-ratio: 391 / 489;
    bottom: 0;
    position: absolute;
    right: 0;
    width: 39.1rem;
}

/*** カチカが選ばれる理由 ***/
.reason {
    background-color: #f5f5f5;
    overflow-x: hidden;
    padding-block: 8.5rem 9rem;
}
.reason__title {
    font-size: 5rem;
    font-weight: var(--font-weight-black);
}
.reason__title::before,
.reason__title::after {
    font-size: 19.5rem;
}
.reason-list{
    margin-top: 5rem;
}
.reason-list__item:nth-child(n+2) {
    margin-top: 10.5rem;
}
.reason-list__hgroup {
    align-items: end;
    border-bottom: 5px solid var(--background-color-yellow);
    display: flex;
    justify-content: space-between;
    margin-right: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
}
.reason-list__title {
    font-size: 6rem;
    font-weight: var(--font-weight-black);
    line-height: 10.5rem;
}
.reason-list__title--multiple {
    line-height: 8rem;
    padding-bottom: 1.5rem;
}
.reason-list__number {
    color: var(--background-color-yellow);
    font-size: 15rem;
    font-family: Montserrat;
    font-weight: var(--font-weight-semibold);
}
.reason-list__topic {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 3.5rem;
    margin-top: 2.55rem;
}
.reason-list__text {
    font-size: 1.6rem;
    font-weight: var(--font-weight-medium);
    line-height: 2.5rem;
    margin-top: 1.7rem;
}
.reason-list__subtitle {
    border-bottom: 1px solid #000;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 3.5rem;
    margin-top: 8.5rem;
    padding-bottom: 1.15rem;
}
.reason-cost {
    margin-top: 2.65rem;
}
.reason__image {
    margin: 3.4rem auto 0;
    width: 75.9rem;
}
.reason-pdca {
    display: flex;
    justify-content: space-between;
    margin-top: 4.2rem;
}
.reason-pdca__item {
    width: calc((100% - 2.268rem) / 4);
}
.reason-pdca__title {
    background-color: #c6b217;
    clip-path: polygon(0 0, 0 100%, calc(100% - 5rem) 100%, 100% 0);
    color: #fff;
    font-family: Montserrat;
    font-size: 5rem;
    font-weight: var(--font-weight-medium);
    padding: 1.3rem 0 1.788rem 2.1rem;
    text-transform: capitalize;
}
.reason-pdca__sublist {
    font-size: 2.2rem;
    font-weight: var(--font-weight-medium);
    line-height: 3.5rem;
    margin-top: 2.12rem;
}
.reason-pdca__text {
    margin-left: 2.2rem;
    position: relative;
}
.reason-pdca__text::before {
    content: '・';
    font-size: 2.2rem;
    left: -2.2rem;
    position: absolute;
    top: 0.1rem;
}

/*** 料金プラン ***/
.price {
    background-color: var(--background-color-yellow);
    padding-block: 9rem 8.4rem;
}
.price__title {
    font-size: 5rem;
    font-weight: var(--font-weight-black);
    text-align: center;
}
.price__title::before,
.price__title::after {
    color: #fff;
    font-size: 19.5rem;
    top: -5rem;
}
.price__text {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 3.5rem;
    margin-top: 9rem;
}
.price__list {
    display: flex;
    justify-content: space-between;
    margin-top: 15.3rem;
}
.price-list__item {
    background-color: #fff;
    border-radius: 2rem;
    padding: 12.8rem 0 2.9rem;
    position: relative;
    text-align: center;
    width: calc((100% - 7rem) / 3);
}
.price-list__icon {
    font-family: Montserrat;
    font-size: 30rem;
    font-weight: var(--font-weight-semibold);
    left: 50%;
    position: absolute;
    top: -15.5rem;
    transform: translateX(-50%);
}
.price-list__icon--blue {
    color: #63c5ce;
}
.price-list__icon--green {
    color: #48ba2d;
}
.price-list__icon--red {
    color: #e24e5f;
}
.price-list__name {
    font-size: 3rem;
    font-weight: bold;
    line-height: 3.5rem;
}
.price-list__block {
    margin-top: 2rem;
    padding: 1.1rem 2.5rem 1.7rem;
}
.price-list__block--blue {
    background-color: #c2eff4;
}
.price-list__block--green {
    background-color: #b9edad;
}
.price-list__block--red {
    background-color: #f5cfd4;
}
.price-list__price {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 3.5rem;
}
.price-list__initial {
    border-top: 2px solid #fff;
    font-size: 2.2rem;
    font-weight: var(--font-weight-medium);
    line-height: 3.5rem;
    margin-top: 0.95rem;
    padding-top: 0.85rem;
}
.price-list__monthly {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 3.5rem;
}
.price-list__monthly--blue {
    color: #34b1bc;
}
.price-list__monthly--green {
    color: #48bb2d;
}
.price-list__monthly--red {
    color: #e24d5f;
}
.price-service {
    padding: 2.4rem 0 0 2.6rem;
    text-align: left;
}
.price-service__title {
    background-color: #000;
    border-radius: 0.5rem;
    color: #fff;
    display: inline-block;
    font-size: 2rem;
    font-weight: bold;
    line-height: 4rem;
    padding: 0 4rem;
}
.price-service__list {
    margin: 1.3rem 0 0 1.8rem;
}
.price-service__item {
    font-size: 1.6rem;
    font-weight: var(--font-weight-medium);
    line-height: 2.3rem;
    position: relative;
}
.price-service__item::before {
    content: '・';
    left: -1.6rem;
    position: absolute;
    top: 0;
}
.price-option {
    align-items: center;
    background-color: #fff;
    border-radius: 2rem;
    display: flex;
    margin-top: 3rem;
    padding: 2.5rem 0;
}
.price-option__title {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    width: 23rem;
}
.price-option__list {
    font-size: 1.6rem;
    font-weight: var(--font-weight-medium);
    line-height: 2.3rem;
}
.price-option__item {
    margin-left: 1.6rem;
    position: relative;
}
.price-option__item::before {
    content: '・';
    left: -1.6rem;
    position: absolute;
    top: 0;
}

/*** 開始までの流れ ***/
.flow {
    background-color: #f5f5f5;
    padding-block: 9rem 11.5rem;
}
.flow__title {
    display: inline-block;
    font-size: 5rem;
    font-weight: var(--font-weight-black);
}
.flow__title::before,
.flow__title::after {
    font-size: 19.5rem;
}
.flow-list {
    margin-top: 8.5rem;
}
.flow-list__item {
    align-items: center;
    background-color: #fff;
    border: 3px solid #000;
    border-radius: 2rem;
    display: flex;
    padding: 4rem 0 3.5rem 3rem;
    position: relative;
}
.flow-list__item:nth-child(n+2) {
    margin-top: 4.3rem;
}
.flow-list__item:nth-child(n+2)::before {
    background-color: #000;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    display: inline-block;
    height: 1.8rem;
    left: 6.5rem;
    position: absolute;
    top: -3rem;
    width: 2rem;
}
.flow-list__item:nth-child(1)::after {
    aspect-ratio: 18.38 / 14.342;
    background: url(./../img/float1.webp) no-repeat center / cover;
    bottom: -9.2rem;
    content: '';
    left: 45.2rem;
    position: absolute;
    width: 18.38rem;
    z-index: 1;
}
.flow-list__item:nth-child(4)::after {
    aspect-ratio: 8.971 / 18.697;
    background: url(./../img/float2.webp) no-repeat center / cover;
    bottom: 0.3rem;
    content: '';
    left: 53.3rem;
    position: absolute;
    width: 8.971rem;
    z-index: 1;
}
.flow-list__item:nth-child(6)::after {
    aspect-ratio: 18.173 / 13.351;
    background: url(./../img/float3.webp) no-repeat center / cover;
    bottom: -10.9rem;
    content: '';
    left: 45rem;
    position: absolute;
    width: 18.173rem;
    z-index: 1;
}
.flow-list__number {
    font-size: 6rem;
    font-weight: var(--font-weight-semibold);
    font-family: Montserrat;
    text-align: center;
    width: 8.2rem;
}
.flow-list__block {
    border-right: 3px solid var(--background-color-yellow);
    margin-left: 2.35rem;
    width: 51rem;
}
.flow-list__title {
    font-size: 3rem;
    font-weight: bold;
}
.flow-list__title--small {
    font-size: 1.6rem;
}
.flow-list__topic {
    background-color: var(--background-color-yellow);
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 1.5rem;
    padding: 0.6rem 0 0.8rem 1.35rem;
    width: 44rem;
}
.flow-list__text {
    font-size: 1.6rem;
    font-weight: bold;
    padding-left: 4rem;
}

/*** フッター ***/
footer {
    background: linear-gradient(rgba(0, 0, 0, 0.7467), rgba(0, 0, 0, 0.7467)), url(./../img/footer.webp) no-repeat center / cover;
    padding-block: 9.465rem 7.05rem;
    text-align: center;
}
.footer__text {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--background-color-yellow);
}
.footer__button {
    --button-height: 8.1rem;
    background-color: var(--background-color-yellow);
    color: #000;
    font-size: 2.5rem;
    font-weight: bold;
    margin-top: 2.635rem;
    width: 47.2rem;
}
.footer__block {
    align-items: flex-end;
    margin-top: 9.2rem;
    display: flex;
    justify-content: space-between;
}
.footer__company {
    color: #fff;
    font-size: 1.4rem;
    line-height: 2.3rem;
    text-align: left;
}
.footer__logo {
    width: 23.9rem;
}
.footer__name {
    margin-top: 2.9rem;
}
.footer__address {
    display: flex;
    margin-top: 1.7rem;
}
.footer__copyright {
    font-family: Montserrat;
    font-size: 1.2rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.1em;
    margin-top: 6.05rem;
}
.footer-sns {
    display: flex;
    justify-content: flex-end;
}
.footer-sns__item:nth-child(n+2) {
    margin-left: 3rem;
}
.footer-sns__x {
    width: 1.992rem;
}
.footer-sns__instagram {
    width: 2rem;
}
.footer-sns__dm {
    width: 2.277rem;
}
.footer-menu {
    align-items: flex-start;
    display: flex;
    margin-top: 5.05rem;
}
.footer-menu__name {
    color: #fff;
    font-family: Montserrat;
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    padding: 0.5rem 1.5rem 0 0;
    writing-mode: vertical-rl;
}
.footer-menu__list {
    border-left: 0.5px solid #fff;
    display: flex;
    font-size: 1.4rem;
    flex-wrap: wrap;
    gap: 2rem 4rem;
    width: 32rem;
    padding: 1.5rem 0 1.5rem 2.25rem;
}

.footer-menu__link {
    color: #fff;
}

/* ============================================
** under
=============================================== */
.under {
  --icon-question: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDM0IDM0Ij4KICA8ZyBpZD0i44Kw44Or44O844OXXzIwOSIgZGF0YS1uYW1lPSLjgrDjg6vjg7zjg5cgMjA5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzkgLTY1NCkiPgogICAgPGNpcmNsZSBpZD0i5qWV5YaG5b2iXzEwIiBkYXRhLW5hbWU9IualleWGhuW9oiAxMCIgY3g9IjE3IiBjeT0iMTciIHI9IjE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3OSA2NTQpIiBmaWxsPSIjZmZmIi8+CiAgICA8cGF0aCBpZD0i44OR44K5Xzc1NSIgZGF0YS1uYW1lPSLjg5HjgrkgNzU1IiBkPSJNNi42Ni02Ljk2aDMuODFjMC0zLjU0LDUuMTMtMy45OSw1LjEzLTguODgsMC0zLjQ1LTIuOTQtNS40Ni03LjM1LTUuNDZDNC41LTIxLjMsMS44LTE5LjkyLjEyLTE3LjY0bDIuOTEsMS44OWE1LjY1Nyw1LjY1NywwLDAsMSw0Ljg5LTIuMzFjMi4zMSwwLDMuNzUsMS4xNCwzLjc1LDIuODJDMTEuNjctMTIuMjQsNi42Ni0xMS40LDYuNjYtNi45NlpNOC41OC4yMWEyLjMxMiwyLjMxMiwwLDAsMCwyLjM3LTIuMzRBMi4yODgsMi4yODgsMCwwLDAsOC41OC00LjQ0YTIuMywyLjMsMCwwLDAtMi40LDIuMzFBMi4zMiwyLjMyLDAsMCwwLDguNTguMjFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4OCA2ODIpIiBmaWxsPSIjZWQ0ZTRhIi8+CiAgPC9nPgo8L3N2Zz4K);
  --under-translate: 0 100%;
  --under-opacity: 0;

  position: fixed;
  z-index: 9999;
  inset-block-end: 1.2rem;
  inset-inline: 0;
  display: block;
  visibility: visible;
  inline-size: min(600px,calc(100% - 40px));
  margin-inline: auto;
  background-color: #ED4E4A;
  border-radius: calc(infinity * 1px);
  translate: var(--under-translate);
  opacity: var(--under-opacity);
  transition: opacity 0.3s ease-in-out, translate 0.3s ease-in-out;


  &.upMove {
    --under-opacity: 1;
    --under-translate: 0;
  }
}

.under-item {
  display: grid;
  align-items: center;
  justify-content: center;
  min-block-size: max(5rem, 7.85dvw);
  padding: 0.2em;
}

.under-link {
  display: inline-grid;
  grid-template-columns: auto max-content;
  align-items: center;
  inline-size: 100%;
  block-size: 100%;
  column-gap: 8px;

  &::before {
    content: "";
    inline-size: 34px;
    aspect-ratio: 1;
    background-image: var(--icon-question);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.under-text {
  color: #fff;
  font-size: max(1.6rem, 3dvw);
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .under {
    display: none;
    visibility: hidden;
  }
}