@charset "UTF-8";

/* 共通 */
html{
    --scaleL: 100%;
    --scaleR: -100%;
    --scale: 1;
    font-size: 2.564102564102564vw;
}

body {
    background-color: black;
    font-family: "Owners-XXWide", "Noto Sans JP", sans-serif;
    font-style: normal;
    color: white;
}

.wrapper {
    overflow: hidden;
}

h2 {
    font-size: 3.2rem;
    font-family: "Owners-XXWide", sans-serif;
    font-weight: 700;
    line-height: 1em;
    color: black;
}

h3 {
    font-size: 2.4rem;
    font-family: "Owners-XXWide", sans-serif;
    font-weight: 700;
    line-height: 1em;
}

h2 > span {
    font-size: 1.6rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    line-height: 1em;
    display: block;
    color: black;
}

h3 > span {
    font-size: 1.6rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    line-height: 1em;
    display: block;
}

h4 {
    font-size: 1.6rem;
    font-family: "Owners-XXWide", sans-serif;
    font-weight: 500;
    line-height: 1em;
    color: black;
}

p {
    font-size: 1.2rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    line-height: 1.5em;
}

a {
    font-size: 1.2rem;
    font-family: "Owners-XXWide", sans-serif;
    font-weight: 700;
    line-height: 1em;
}

.intro2nd h3 {
    font-size: 1.6rem;
    font-family: "Owners-XXWide", sans-serif;
    font-weight: 700;
}

img,picture {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.top-title {
    width: 100%;
    height: 46.15384615384615vw;
    padding: 22.82051282051282vw 0 17.94871794871795vw 0;
    position: relative;
}

.top-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #FFD900;
    transform: skewY(353deg) translateX(0%);
    transform-origin: bottom right;
}

.top-title h2 {
    text-align: right;
}

.reverse::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #FFD900;
    transform: skewY(7deg);
    transform-origin: top left;
}

.reverse {
    width: 100%;
    padding: 26.9233vw 0 17.9485vw 0;
}

.reverse h2 {
    text-align: left;
}

.name {
    font-size: 5vw;
    font-weight: 700;
}

.data dt {
    font-size: 3vw;
    font-weight: 700;
}

.data p {
    font-family: "Owners-XXWide", sans-serif;
    font-size: 5vw;
    font-weight: 700;
}

.unit {
    font-size: 3vw;
}

.top-title h2,
.reverse h2,
.pro2aero,
.carbonparts,
.bodycolor,
.enginebay-text-wrapper,
.instpanel,
.seat,
.suspension,
.engine,
.enginectrl-text-wrapper,
.powersteering,
.seatbelt,
.rollcage-text-wrapper,
.circuit-main,
.youtube-wrapper {
    width: 90%;
    margin: -1rem auto 10rem;
}

.onlyPC {
    display: none;
}

.onlySP {
    display: inline;
}

/* --タイトルバック左から右へ-- */
.top-title.show-left::before {
    transform: skewY(353deg) translateX(var(--scaleR));
    transform-origin: top left;
}

/* --タイトルバック右から左へ-- */
.top-title.show-right::before {
    transform: skewY(353deg) translateX(var(--scaleL));
}

/* ヒーローエリア */
.hero-wrapper {
    background-color: #FFD900;
    width: 100%;
    height: 90%;
    padding: 100px 20px;
}

/* --CR-X正面画像-- */
.hero-img {
    width: 100%;
    margin-bottom: 24px;
    animation-name: zoomInAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
}

@keyframes zoomInAnime {
    from {
        transform: scale(0.2);
    }
    to {
        transform: scale(1);
    }
}

/* --ロゴ-- */
.hero-logo {
    width: 100%;
    animation-name: fadeInAnime;
    animation-duration: 1s;
    animation-delay: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* ヘッダーナビゲーションエリア */
.menulist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 0.5rem;
    margin: 0.5rem;
}

.btn-nav {
    width: calc(33.3% - 5px);
    position: relative;
}

.btn {
  display: flex;
  justify-content: start;
  flex-direction: column;
  background-color: #FFD900;
  color: black;
  text-align: center;
  width: 100%;
  height: 25vw;
  padding-top: 5vw;
  gap: 1vw;
}

.br {
    padding-top: 3vw;
}

.btn::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6.4101vw;
    height: 6.4101vw;
    background-color: black;
    clip-path: polygon(0 0,100% 0,50% 80%);
}

/* メインイントロダクション */
.introduction {
    width: 100%;
}

.first {
    overflow: hidden;
}

.first h2 {
    display: block;
    width: 100%;
    text-align: left;
    padding-left: 20px;
    margin-top: -32px;
}

.intro-wrapper {
    margin: 2rem;
}

.intro2nd {
    margin-top: 6rem;
}


/* エクステリア */
/* --PRO.2エアロ-- */
.pro2-main {
    margin-top: -3rem;
}

.pro2front {
    position: relative;
    top: 0;
    left: 11%;
    width: 100%;
}

.pro2-text-wrapper {
    margin: 3rem 0 5rem;
}

.pro2-title {
    text-align: left;
}

.pro2-text p {
    margin-top: 2rem;
}

.pro2rear {
    position: relative;
    width: 100%;
    top: 0;
    right: 11%;
}

/* --カーボンパーツ-- */
.carbonfood {
    margin-bottom: -17.5rem;
}

.carbonroof {
    clip-path: polygon(0 40%, 100% 10%, 100% 100%, 0% 100%);
}

.carbon-text-wrapper {
    margin-top: 3rem;
}

.carbon-title {
    text-align: left;
}

.carbon-text p {
    margin-top: 2rem;
}

/* --エンジンベイ-- */
.enginebay-text-wrapper {
    margin-top: 1rem;
}

.enginebay-title-center {
    text-align: center;
}

.enginebay-text {
    text-align: center;
    margin-top: 2rem;
}

/* --ボディカラー-- */
.bodycolor-img {
    position: relative;
    padding: 9.5rem 0;
}

.bodycolor-img::before {
    content: "";
    background-image: url(images/Splash.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    scale: 1;
}

.bodycolor-img::before {
    scale: var(--scale); /* --バックグラウンド拡大-- */
}

.bodycolor-text-wrapper {
    margin-top: 3rem;
}

.bodycolor-title-center {
    text-align: center;
}

.bodycolor-text {
    text-align: center;
    margin-top: 2rem;
}

/* インテリア */
/* --タイトルバック左から右へ-- */
.reverse.show-left::before {
    transform: skewY(7deg) translateX(var(--scaleR));
}

/* --インパネ-- */
/* -----------------※画像マスクを挿入する----------------- */
.dashbord {
    margin-bottom: -7rem;
}
.meterpanel {
    clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
}
/* ------------------------終-------------------------- */

.instpanel-text-wrapper {
    margin-top: 3rem;
}

.instpanel-text {
    margin-top: 2rem
}

/* --シート-- */
.seat-img {
    width: 100%;
    margin-left: -1.95rem;
}

.seat-text-wrapper {
    margin-top: 3rem;
}

.seat-text {
    margin-top: 2rem;
}

/* 走行性能 */
.driveability > .top-title h2 {
    margin-bottom: -23px;
}

/* --サスペンション-- */
.front-suspension {
    margin-bottom: -20%;
}

.n1-damper {
    clip-path: polygon(0 30%, 100% 0%, 100% 100%, 0% 100%);
}

.suspension-text-wrapper {
    margin-top: 3rem;
}

.suspension-title {
    text-align: left;
}

.suspension-text {
    margin-top: 2rem;
}

/* --エンジン-- */
.b16a-engine {
    margin-bottom: -7rem;
}

.b16a-side {
    clip-path: polygon(0 30%, 100% 0%, 100% 100%, 0% 100%);
}

.engine-text-wrapper {
    margin-top: 3rem;
}

.engine-title {
    text-align: left;
}

.engine-text {
    margin-top: 2rem;
}

/* --エンジンコントロール-- */
.enginectrl-text-wrapper {
    margin-top: 1rem;
}

.enginectrl-title {
    text-align: center;
}

.enginectrl-text {
    margin-top: 2rem;
}

/* --パワーステアリング-- */
.powersteering-img {
    width: 100%;
    margin-left: 1.95rem;
}

.powersteering-text-wrapper {
    margin-top: 3rem;
}

.powersteering-title {
    text-align: left;
}

.powersteering-text {
    margin-top: 2rem;
}

/* 安全性能 */

/* --シートベルト-- */
.seatbelt-text-wrapper {
    margin-top: 3rem;
}

.seatbelt-text {
    margin-top: 2rem;
}

/* --ロールケージ-- */
.rollcage-text-wrapper {
    margin-top: 1rem;
}

.rollcage-title,
.rollcage-title span {
    text-align: left;
}

.rollcage-text {
    margin-top: 2rem;
}


/* パララックス効果 */

/* サーキットタイム */
/* --サーキットリスト-- */
.swiper {
    padding-bottom: 1.5rem;
}

.circuit-main {
    margin-bottom: 5rem;
}

.slide-text {
    margin-top: 4.3rem;
}

.circuit-logo {
    display: block;
    width: 50%;
    margin: 0 auto;
}

.name {
    margin-top: 0.8rem;
    text-align: center;
}

.data {
    display: block;
    margin: 1.95rem auto;
    text-align: center;
}

.data dt {
    margin-top: 0.8rem;
}
/* ----Swiper.js 戻る・進むボタン--- */
.swiper-button-prev,
.swiper-button-next {
    top: 73%;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: "";
    width: 1rem;
    height: 1rem;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.swiper-button-next::after {
    transform: rotate(45deg);
}

.swiper-button-prev::after {
    transform: rotate(-135deg);
}

/* ---Swiper.js ページネーション--- */
.swiper-pagination-bullet {
    background-color: white;
    width: 1vw;
    height: 1vw;
}

/* ギャラリー */
/* --グリッド-- */
.gallery-grid {
    display: grid;
    width: 90vw;
    margin: -10px auto 60px;
    gap: 2vw;
    grid-template-columns: repeat(2, 44vw);
    grid-template-rows: repeat(7, 44vw);
}

.grid-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item01 {
    grid-column: 1/2;
    grid-row: 1/3;
}

.item02 {
    grid-column: 2/3;
    grid-row: 1/2;
}

.item03 {
    grid-column: 2/3;
    grid-row: 2/3;
}

.item04 {
    grid-column: 1/3;
    grid-row: 3/4;
}

.item05 {
    grid-column: 1/2;
    grid-row: 4/5;
}

.item06 {
    grid-column: 2/3;
    grid-row: 4/5;
}

.item07 {
    grid-column: 1/2;
    grid-row: 5/6;
}

.item08 {
    grid-column: 1/2;
    grid-row: 6/7;
}

.item09 {
    grid-column: 2/3;
    grid-row: 5/7;
}

.item10 {
    grid-column: 1/3;
    grid-row: 7/8;
}

/* --Luminous.js-- */
.lum-lightbox-inner img.lum-img {
    max-width: 100%;
}

/* レストア動画 */
/* --YouTube-- */
/* https://youtu.be/Y1PSyn5QT88?si=zuXxgAfvpdtPVqA0 */
.youtube-wrapper {
    margin-bottom: 5rem;
}

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* フッター */
.foot {
    width: 100%;
    padding-top: 35.8979vw;
    position: relative;
    color: black;
    text-align: center;
}

.foot::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #FFD900;
    transform: skewY(353deg);
    transform-origin: top right;
}

/* --トップボタン-- */
.page-top a {
    position: relative;
    bottom: 4rem;
}

.page-top a::before {
    content: "";
    background-color: black;
    width: 7.6925vw;
    height: 7.6925vw;
    clip-path: polygon(50% 20%, 0% 100%, 100% 100%);
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/* --SNSリンク-- */
.sns-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* --コピーライト-- */
.copyright {
    margin-top: 30px;
}

/* *****メディアクエリ(PCページ)***** */
@media screen and (min-width:768px) {
    /* ----共通----- */
    html {
        font-size: 0.6944vw; /*1rem=10px*/
    }

    h2 {
        font-size: 7.2rem;
        line-height: 1em;
    }

    h3 {
        font-size: 4.8rem;
        line-height: 1em;
    }
    
    h2 > span ,.intro2nd > h3 {
        font-size: 2.4rem;
    }

    h3 > span {
        font-size: 2.4rem;
    }

    h4 {
        font-size: 2.4rem;
    }

    p {
        font-size: 1.6rem;
        line-height: 1.5em;
    }

    a {
        font-size: 1.5rem;
    }

    .name {
        font-size: 3rem;
        font-weight: 700;
    }
    
    .data dt {
        font-size: 2rem;
        font-weight: 700;
    }
    
    .data p {
        font-family: "Owners-XXWide", sans-serif;
        font-size: 4rem;
        font-weight: 700;
    }
    
    .unit {
        font-size: 2rem;
    }

    .top-title {
        height: 32.3vw;
        padding: 20.1389vw 0 4.8612vw 0;
    }

    .reverse {
        padding: 20.1389vw 0 4.8612vw 0;
    }


    .onlyPC {
        display: inline;
    }

    .onlySP {
        display: none;
    }

    .top-title h2,
    .reverse h2,
    .pro2aero,
    .carbonparts,
    .bodycolor,
    .enginebay-text-wrapper,
    .instpanel,
    .seat,
    .suspension,
    .engine,
    .enginectrl-text-wrapper,
    .powersteering,
    .seatbelt,
    .rollcage,
    .circuit-main,
    .youtube-wrapper {
        width: 90vw;
        margin: -2rem auto 28rem;
    }

    .enginebay-text-wrapper,
    .enginectrl-text-wrapper {
        margin-top: 5rem;
    }

    /* ヒーローエリア */
    .hero-wrapper {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 2%;
        padding: 12vw 6vw;
    }

    /* --CR-X正面画像-- */
    .hero-img {
        margin-bottom: 3px;
    }

    .hero-logo {
        width: 85%;
    }


    /* ヘッダーナビゲーションエリア */
    .menulist {
        flex-wrap: nowrap;
        row-gap: 0;
        width: 90vw;
        margin: 1rem auto;
    } 

    .btn-nav {
        width: calc(16% - 5px);
    }

    .btn {
        justify-content: center;
        height: 5vw;
        padding-top: 0;
        padding-right: 3vw;
        gap: 0.3vw;
    }

    .btn::after {
        width: 2vw;
        height: 2vw;
        top: 35%;
        left: 85%;
    }

    .btn:hover {
        border: 1px solid #FFD900;
        color: #FFD900;
        background-color: black;
        transition: .4s;
    }

    .btn:hover::after {
        background-color: #FFD900;
        transition: .4s;
    }

    /* メインイントロダクション */
    .first h2 {
        margin-top: -9vw;
    }

    .intro-wrapper {
        width:  74%;
        margin: 5rem auto
    }

    .intro1st {
        margin-bottom: 3rem;
    }

    /* 外装 */
    /* ----Pro.2エアロ---- */
    .pro2-main {
        display: flex;
        flex-wrap: wrap;
        gap: 4%;
        margin-top: -9rem;
    }

    .pro2front {
        width: 86%;
        margin: 0 0 8rem -11rem;
        position: relative;
        top: 1vw;
        left: 19.5vw;
    }

    .pro2-text-wrapper {
        order: 3;
        width: 38%;
        margin: 0;
    }

    .pro2-title {
        text-align: left;
    }

    .pro2rear {
        order: 2;
        width: 58%;
        position: relative;
        top: 0;
        left: 0;
    }

    /* ----カーボンパーツ---- */
    .carbon-main {
        display: flex;
        flex-direction: column-reverse;
        position: relative;
    }

    .carbon-img {
        display: flex;
        flex-wrap: wrap;
    }

    .carbonfood {
        clip-path: polygon(0 0, 100% 0, 100% 81%, 0 100%);
        width: 50%;
        height: 40vw;
        object-fit: cover;
        object-position: center 0%;
        margin-bottom: -5%;
        margin-left: auto;
    }

    .carbonroof {
        clip-path: polygon(0 50%,100% 0,100% 100%,0 100%);
        width: 100%;
        height: 30vw;
        object-fit: cover;
        object-position: center 50%;
    }

    .carbon-text-wrapper {
        width: 45%;
        position: absolute;
        top: 28%;
    }

    .carbon-title {
        text-align: left;
    }
    /* ----エンジンベイ---- */
    .enginebay-img {
        width: 100%;
    }

    /* ----ボディカラー---- */
    .bodycolor-img {
        padding: 35.5rem 0;
    }

    /* 内装 */
    /* ----インパネ---- */
    .instpanel-main {
        display: flex;
        flex-direction: column-reverse;
        position: relative;
    }

    .instpanel-img {
        display: flex;
        flex-wrap: wrap;
    }

    .dashbord {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 82%);
        width: 50%;
        height: 30vw;
        object-fit: cover;
        object-position: center 0%;
        margin-bottom: -3%;
    }

    .meterpanel {
        clip-path: polygon(0 0,100% 22%,100% 100%,0 100%);
        width: 100%;
        height: 50vw;
        object-fit: cover;
        object-position: center 40%;
    }

    .instpanel-text-wrapper {
        width: 45%;
        position: absolute;
        top: 14%;
        left: 54%;
    }

    /* ----シート---- */
    .seat-main {
        display: flex;
        gap: 3%;
    }

    .seat-img {
        order: 2;
        width: 100%;
        margin: 0 -5vw 0 0;
    }

    .seat-text-wrapper {
        order: 1;
        width: 50%;
        align-self: flex-end;
    }

    .seat-title {
        text-align: left;
    }

    /* 走行性能 */
    /* ----サスペンション---- */
    .suspension-main {
        display: flex;
        flex-direction: column;
    }

    .suspension-img {
        display: flex;
        flex-wrap: wrap;
    }

    .front-suspension {
        width: 100%;
        height: 50vw;
        margin-bottom: -9%;
        object-fit: cover;
        clip-path: polygon(0 0,100% 0,100% 78%,0 100%);
    }

    .n1-damper {
        width: 50%;
        margin-left: auto;
        object-fit: cover;
        clip-path: polygon(0 18%, 100% 0%, 100% 100%, 0% 100%);
    }

    .suspension-text-wrapper {
        width: 45%;
        margin-top: -20%;
    }

    .suspension-title {
        text-align: left;
    }

    /* ----エンジン---- */
    .engine-main {
        display: flex;
        flex-direction: column;
    }

    .engine-img {
        display: flex;
        flex-wrap: wrap;
    }

    .b16a-engine {
        width: 100%;
        height: 50vw;
        object-fit: cover;
        margin-bottom: -2%;
        clip-path: polygon(0 0,100% 0,100% 79%,0 100%);
    }

    .b16a-side {
        width: 50%;
        clip-path: polygon(0 18%, 100% 0%, 100% 100%, 0% 100%);
    }

    .engine-text-wrapper {
        width: 45%;
        margin-left: auto;
        margin-top: -16%;
    }

    /* ----エンジンコントロール---- */
    .enginectrl-text-wrapper {

    }

    .enginectrl-title, .enginectrl-text {
        text-align: center;
    }

    /* ----パワーステアリング---- */
    .powersteering-main {
        display: flex;
        gap: 3%;
    }

    .powersteering-img {
        order: 2;
        width: 100%;
        margin: 0 -5vw 0 0;
    }

    .powersteering-text-wrapper {
        order: 1;
        width: 51%;
        align-self: flex-end;
    }

    /* 安全性能 */
    /* ----シートベルト---- */
    .seatbelt-main {
        display: flex;
        gap: 3%;
    }

    .seatbelt-img {
        width: 100%;
    }

    .seatbelt-text-wrapper {
        width: 50%;
        align-self: flex-end;
    }

    /* ----ロールケージ---- */
    .rollcage-main {
        display: flex;
        gap: 3%;
    }

    .rollcage-img {
        order: 2;
        width: 100%;
        margin: 0;
    }

    .rollcage-text-wrapper {
        order: 1;
        width: 50%;
        margin-bottom: 0;
        align-self: flex-end;
    }

    .rollcage-title {
        text-align: right;
    }

    .rollcage-text {
        text-align: left;
    }

    /* サーキットタイム */
    /* ----サーキットリスト---- */
    .swiper-slide {
        display: flex;
    }

    .slide-img {
        width: 80%;
    }

    .slide-text {
        position: relative;
        width: 50%;
        margin-top: 10rem;
    }

    .name {
        margin-top: 1.44rem;
    }

    .data {
        margin: 2.88rem auto;
    }

    /* ----Swiper.js 戻る・進むボタン---- */
    .swiper-button-prev {
        position: absolute;
        left: 2%;
    }
    .swiper-button-prev,
    .swiper-button-next {
        position: absolute;
        top: 50%;
    }

    /* ----Swiper.js ページネーション---- */
    .swiper-pagination {
        position: absolute !important;
        width: 9% !important;
        margin: 0 auto !important;
        left: 76.5% !important;
    }

    .swiper-pagination-bullet {
        width: 0.5vw;
        height: 0.5vw;
    }


    /* ギャラリー */
    /* --グリッド-- */
    .gallery-grid {
        gap: 1.5vw;
        grid-template-columns: repeat(3, 29vw);
        grid-template-rows: repeat(5, 29vw);
    }

    .item01 {
        grid-column: 1/2;
        grid-row: 1/3;
    }

    .item02 {
        grid-column: 2/3;
        grid-row: 1/2;
    }
    
    .item03 {
        grid-column: 3/4;
        grid-row: 1/2;
    }

    .item04 {
        grid-column: 2/4;
        grid-row: 2/3;
    }

    .item05 {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    .item06 {
        grid-column: 2/3;
        grid-row: 3/4;
    }

    .item07 {
        grid-column: 1/2;
        grid-row: 4/5;
    }
    
    .item08 {
        grid-column: 2/3;
        grid-row: 4/5;
    }

    .item09 {
        grid-column: 3/4;
        grid-row: 3/5;
    }

    .item10 {
        grid-column: 1/4;
        grid-row: 5/6;
    }

    .gallery-grid > a img:last-child {
        object-position: center 65%;
    }

    /* レストア動画 */
    /* --Youtube-- */

    /* フッター */
    .foot {
        padding-top: 36rem;
    }

    /* --トップボタン-- */
    .page-top a {
        font-size: 2.4rem;
        bottom: 8rem;
    }

    .page-top a::before {
        width: 3.4723vw;
        height: 3.4723vw;
    }

    .page-top a:hover {
        opacity: .6;
        transition-duration: .3s;

    }

    /* --SNSリンク-- */
    .sns-links {
        gap: 3rem;
    }

    .fa-brands:hover {
        opacity: .6;
        transition-duration: .3s;
    }
}