/* 共通 */
@font-face {
    font-family: "Ultra";
    src: url(../assets/Ultra/Ultra-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "RockSalt";
    src: url(../assets/Rock_Salt/RockSalt-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "ZenKakuGothicNew-bold";
    src: url(../assets/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Black.ttf) format("truetype");
}

@font-face {
    font-family: "ZenKakuGothicNew-medium";
    src: url(../assets/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Medium.ttf) format("truetype");
}

@font-face {
    font-family: "Karantina";
    src: url(../assets/Karantina/Karantina-Bold.ttf) format("truetype");
}

@font-face {
    font-family: "ZenDots";
    src: url(../assets/Zen_Dots/ZenDots-Regular.ttf) format("truetype");
}

.font-zendots {
    font-family: "ZenDots";
}

.font-ultra {
    font-family: "Ultra";
}

.font-rocksalt {
    font-family: "RockSalt";
}

.font-zenkaku-bold {
    font-family: "ZenKakuGothicNew-bold";
}

.font-zenkaku-medium {
    font-family: "ZenKakuGothicNew-medium";
}

.font-karantina {
    font-family: "Karantina";
}

.font-shadow {
    text-shadow: 5px 5px 5px black;
}

.keep-all {
    word-break: keep-all;
}

.gradient-1 {
    background: linear-gradient(90deg, #9796f0 0%, #fbc7d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-2 {
    background: linear-gradient(90deg, #9796f0 0%, #fbc7d4 100%);
}

.gradient-3 {
    background: linear-gradient(90deg, #fbed96 0%, #abecd6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fadein {
    transition: 0.5s all ease;
    opacity: 0;
    transform: translateY(50px);
}

.fadein.loaded {
    opacity: 1;
    transform: translateY(0px);
}

/* instagramコンポーネント */
.scroll-bar-hidden {
    /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
    -ms-overflow-style: none;
    /*FirefoxへWの対応*/
    scrollbar-width: none;
}

.instagram-media {
    width: 80%;
    min-width: 200px !important;
    margin: 0 !important;
}

.bg-instagram {
    background: linear-gradient(90deg, hsl(346, 33%, 70%) 0%, hsl(346, 33%, 70%) 100%);
}

.insta-btn {
    background: linear-gradient(90deg, #dfb1bc 0%, #9796f0 100%);
    transition: 0.3s all ease;
}

.insta-btn:hover {
    transform: scale(0.9);
}

.news-label {
    clip-path: polygon(70% 0, 100% 49%, 70% 100%, 0 100%, 0 0);
    background: linear-gradient(90deg, #9796f0 29.99%, #fbc7d4 82.15%);
}

.news-label-sp {
    background: linear-gradient(90deg, #9796f0 29.99%, #fbc7d4 82.15%);
}

.hungout {
    background-image: url(../assets/top-hungout.png);
    background-size: cover;
    background-position: bottom;
}

.hungout-gradient {
    background: linear-gradient(0deg, #ffffff00 10%, #ffffff55 50%, #ffffff00 100%);
}

.top-parallax-bg {
    background-image: url(../assets/top-parallax-bg.png);
    background-size: 100vw 110vh;
    background-repeat: no-repeat;
    background-position: 0 -10px;
}

.complete-car-parallax-bg {
    background-image: url(../assets/complete-car-parallax-bg.png);
    background-size: 100vw 110vh;
    background-repeat: no-repeat;
    background-position: 0 -10px;
}

.appeal-section {
    background: linear-gradient(180deg, #000000 0%, #ece3d9 4%, #ece3d9 96%, #000000 100%);
}

#photoGallery {
    background-image: url(../assets/top-photofgallery.png);
    background-position: center;
    background-size: contain;
}

.about-top-bg {
    background-image: url(./../assets/about-top.png);
    background-repeat: no-repeat;
    background-position: bottom;
}

.about-access-detail-border {
    background: linear-gradient(180deg, #9796f0 0%, #fbc7d4 100%);
}

.about-line {
    background: linear-gradient(90deg, #9796f0 0%, #fbc7d4 100%);
}

.gradient-btn {
    background: linear-gradient(90deg, #9796f0 0%, #fbc7d4 100%);
}

.toHome {
    background: linear-gradient(90deg, #9796f0 0%, #fbc7d4 100%);
}

.contact-line {
    background: linear-gradient(90deg, #9796f0 0%, #fbc7d4 100%);
    clip-path: polygon(40% 0, 100% 0%, 100% 100%, 30% 100%);
}

@media screen and (max-width: 600px) {
    .contact-line {
        background: linear-gradient(90deg, #9796f0 0%, #fbc7d4 100%);
        clip-path: polygon(50% 0, 100% 0%, 100% 100%, 20% 100%);
    }
}

footer {
    background: linear-gradient(90deg, #24243e 0%, #302b63 50%, #0f0c29 100%);
}

.nowork {
    background: #c42b2b;
}

.yasumi {
    background: #5acd23;
}

.complete-car-custom-section {
    background: linear-gradient(180deg, #000000 0%, #000000 2%, #3f3f3f 5%, #3f3f3f 99%, #000000 100%);
}

.complete-car-raptor-clip {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%);
}

.arrow-top-down {
    animation: arrowTop 1.5s infinite;
}

@keyframes arrowTop {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

/* blog */

.loading{
    /* ローディングのアイコン */
    position: relative;
    width: 30px;
    height: 30px;
    border: 5px solid #9796f0;
    border-radius: 50%;
    border-top-color: #fbc7d4;
    animation: spin 1s linear infinite;
    margin: 0 auto;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.blog-triangle {
    position: relative;
}

.blog-triangle::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(95% 0, 0 95%, 0 0);
    background: linear-gradient(90deg, #9796f0 0%, #fbc7d4 100%);
    top: 0;
    left: 0%;
}

.blog-triangle::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 5%, 5% 100%, 100% 100%);
    background: linear-gradient(90deg, #9796f0 0%, #fbc7d4 100%);
    top: 0;
    left: 0%;
}

.blog-sizebar-title-border {
    position: relative;
}

.blog-sizebar-title-border::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #9796f0 0%, #fbc7d4 100%);
    top: 0;
    left: 0;
}
.blog-sizebar-title-border::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #9796f0 0%, #fbc7d4 100%);
    bottom: 0;
    left: 0;
}