/* ===============================
section1
=============================== */
.c-section.p-section-front-page-content {
    padding-top: 0;
    padding-bottom: 0;
}

.wp-block-snow-monkey-blocks-section.smb-section.smb-section--fit {
    padding-top: 10px;
}

.hero {
    position: relative;
    width: 100%;
    height: clamp(520px,
            54.8vw,
            90vh);
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    clip-path: polygon(0 clamp(120px, 18vw, 240px),
            clamp(260px, 40vw, 560px) 0,
            100% 0,
            100% 100%,
            0 100%);
    background-image: url("/wp-content/uploads/2026/01/TOPMVimg.webp");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
}

.hero-shape {
    position: absolute;
    inset: 0;
    clip-path: polygon(0 25%,
            35% 0,
            100% 0,
            100% 100%,
            0 100%);
    display: flex;
    align-items: flex-end;
    padding:
        clamp(20px, 2.56vw, 35px) clamp(32px, 7.32vw, 100px);
    pointer-events: none;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 112, 181, 0.4);
    z-index: 1;
    pointer-events: none;
}

.hero-video {
    left: 145px !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-shape {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.hero-text h1 {
    color: #fff;
    font-size: clamp(60px, 8.79vw, 120px);
    font-weight: 400;
    line-height: 0.9;
    margin: 0 0 16px;
    font-family: "din-2014", sans-serif;
}

.hero-text p {
    color: #fff;
    font-size: clamp(16px, 1.9vw, 26px);
    margin: 0;
}

.hero-text .line {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
}

.hero.is-active .hero-text .line {
    animation: fadeUp 1.1s cubic-bezier(.4, 0, .2, 1) forwards;
}


.hero.is-active .hero-text .line-1 {
    animation-delay: 0.6s;
}

.hero.is-active .hero-text .line-2 {
    animation-delay: 1.2s;
}

.hero.is-active .hero-text .line-3 {
    animation-delay: 2.0s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 730px) {
    .hero {
        height: 85vh;
        border-radius: 0;
        clip-path: none;
        background-image: none;
    }

    .hero-video {
        left: 0 !important;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero-shape {
        clip-path: none;
        background: none;
        padding: 24px 20px;
        align-items: flex-end;
    }

    .hero-text h1 {
        font-size: 52px;
        line-height: 1;
    }

    .hero-text p {
        font-size: 16px;
    }

    .c-container.alignfull {
        padding: 0;
    }

    .wp-block-snow-monkey-blocks-section.smb-section.smb-section--fit {
        padding-top: 0px;
    }
}

/* ===============================
section2
=============================== */
.scroll-indicator {
    position: absolute;
    right: 90px;
    transform: translateY(-50%);
    z-index: 100;
    bottom: -90px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll-text {
    font-family: "Roboto", sans-serif;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 12px 10px;
    margin-bottom: 10px;
}

.scroll-line {
    position: relative;
    width: 1px;
    height: 120px;
    background: rgba(11, 78, 162, 0.3);
    overflow: hidden;
}

.scroll-line-inner {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0b4ea2;
}

@media (max-width: 767px) {
    .scroll-indicator {
        right: 25px;
    }
}

/* ===============================
section3
=============================== */
.section-about-head {
    padding: clamp(40px, 7vw, 100px) 0 clamp(40px, 11vw, 150px) 0;
}

.section-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
}

.section-title {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: clamp(56px, 8.8vw, 120px);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: #0158B5;
}

.section-about-head .section-title {
    opacity: 1;
    transform: none;
}

.section-sub {
    position: absolute;
    font-size: clamp(12px, 1.4vw, 18px);
    font-weight: bold;
    color: #0080CC;
    left: clamp(48%, 54vw, 54%);
    top: clamp(70%, 81vw, 81%);
    white-space: nowrap;
}

.section-title .line2,
.section-sub {
    opacity: 0;
    transform: translateY(20px);
    display: inline-block;
}

.section-title.is-active .line2 {
    animation: fadeUp 1.1s cubic-bezier(.4, 0, .2, 1) forwards;
}

.section-title.is-active .line2-1 {
    animation-delay: 0.6s;
}

.section-title.is-active .line2-2 {
    animation-delay: 1.2s;
}

.section-title.is-active+.section-sub {
    animation: fadeUp 1.1s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: 1.6s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .section-sub {
        position: static;
        margin-top: 16px;
        transform: none;
        font-size: 14px;
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ===============================
section4
=============================== */
.hero-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: clamp(19px, 1.9vw, 26px);
    line-height: clamp(32px, 3.5vw, 48px);
    letter-spacing: 0.04em;
    color: #ffffff;
    text-shadow: clamp(4px, 0.44vw, 6px) clamp(2px, 0.22vw, 3px) clamp(3px, 0.29vw, 4px) #0158B5;
}

.service-hero {
    margin-top: 0;
}

.service-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    gap: clamp(60px, 8.79vw, 120px);
    align-items: flex-start;
}

@keyframes charFlow {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


.service-desc {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
    font-size: clamp(16px, 1.61vw, 22px);
    line-height: 220%;
    letter-spacing: 0.03em;
    color: #0158B5;
    margin-top: clamp(40px, 4.83vw, 66px);
    max-width: 533px;
    background: rgba(255, 255, 255, 0.8);
    padding: 28px 120px 40px 50px;
    box-sizing: border-box;
    position: relative;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.service-desc span {
    display: block;
    padding-top: clamp(12px, 1.46vw, 20px);
    font-size: clamp(14px, 1.32vw, 18px);
    font-weight: 500;
    line-height: 180%;
    letter-spacing: 0;
}

.service-image {
    flex: 1;
    max-width: 570px;
    position: relative;
}

.service-image .image-inner {
    position: relative;
    width: 90%;
    overflow: hidden;
}

.service-image .image-inner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

.service-image .image-inner .image-overlay {
    position: absolute;
    inset: 0;
    background: #1059B2;
    transform: translateX(0);
    z-index: 2;
}

.service-image.js-image-reveal.is-active .image-overlay {
    transform: translateX(100%);
    transition: transform 1.3s cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 1140px) {
    .service-image .image-inner {
        width: clamp(260px, 80%, 90%);
    }
}


@media (max-width: 1023px) {
    .service-inner {
        gap: 5px;
    }

    .service-image img {
        width: 80%;
    }
}


@media (max-width: 975px) {
    .service-image {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .service-inner {
        display: block;
    }

    .service-desc {
        max-width: 100%;
        margin-top: 40px;
        padding: 20px 15px;
    }

    .service-image {
        margin-left: auto !important;
        margin-top: 20px;
    }

    .service-image {
        margin-left: auto;
    }

    .service-text {
        margin-bottom: 30px;
    }

    .service-image .image-inner {
        width: 100%;
    }
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-image .image-overlay {
    transform: translateX(0);
}

.service-image.js-image-reveal.is-active .image-overlay {
    transform: translateX(100%);
    transition: transform 1.3s cubic-bezier(.22, .61, .36, 1);
}

.service-text {
    position: relative;
}

.service-image {
    position: relative;
    z-index: 2;
    margin-left: clamp(-140px, -10.25vw, -40px);
    margin-top: clamp(16px, 2.93vw, 40px);
}

.image-inner {
    position: relative;
    width: 90%;
}

.image-inner img {
    width: 100%;
    display: block;
}

.image-inner .image-overlay {
    position: absolute;
    inset: 0;
}

/* ===============================
section5
=============================== */
.flow-wrap {
    width: 100%;
    overflow: hidden;
}

.flow-track {
    display: inline-flex;
    white-space: nowrap;
    animation: flow 20s linear infinite;
}

.flow-track span {
    font-family: "Roboto", sans-serif;
    font-size: clamp(64px, 13.9vw, 190px);
    font-weight: 400;
    line-height: 160%;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.6);
}

@keyframes flow {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ===============================
section6
=============================== */
.company-links-section {
    margin-top: 0;
    padding-bottom: clamp(60px, 7.32vw, 100px);
}

.company-links-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

.company-links-image {
    width: 50%;
    padding: 0 clamp(12px, 1.46vw, 20px);
}

.company-links-image-inner {
    position: relative;
    overflow: hidden;
    max-width: clamp(360px, 35vw, 480px);
}

.company-links-image-inner img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

.company-links-overlay {
    position: absolute;
    inset: 0;
    background: #1059B2;
    transform: translateX(0);
    z-index: 2;
}

.company-links-menu {
    width: clamp(300px, 28.5vw, 390px);
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
}

.company-links-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(12px, 1.1vw, 15px) 0 clamp(12px, 1.1vw, 15px) clamp(20px, 2.2vw, 30px);
    border-top: 1px solid rgba(0, 0, 0, 0.4);
    text-decoration: none;
}

.company-links-item:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.company-links-text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1.47vw, 20px);
    line-height: clamp(26px, 2.34vw, 32px);
    color: #1059B2;
}

.company-links-btn {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.32vw, 18px);
    line-height: clamp(14px, 1.17vw, 16px);
    padding: clamp(8px, .73vw, 10px) clamp(28px, 3.3vw, 45px);
    background: #fff;
    color: #1059B2;
    border-radius: 999px;
    transition: .3s;
}

.company-links-item:hover .company-links-btn {
    background: #0b4ea2;
    color: #fff;
}

@media (max-width: 767px) {
    .company-links-inner {
        flex-direction: column;
    }

    .company-links-image,
    .company-links-menu {
        width: 100%;
    }

    .company-links-menu {
        margin-top: 40px;
    }
}

.js-fade-up {
    opacity: 0;
    transform: translateY(24px);
}

.js-fade-up.is-active {
    animation: fadeUp 0.8s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.company-links-overlay {
    transform: translateX(0);
}


.company-links-image.js-image-reveal.is-active .company-links-overlay {
    transform: translateX(100%);
    transition: transform 1.3s cubic-bezier(.22, .61, .36, 1);
}

/* ===============================
section7
=============================== */
.horizontal {
    height: auto;
    overflow: hidden;
    padding-bottom: clamp(60px, 4.39vw, 60px);
}

.line3-1 {
    padding-top: clamp(64px, 7vw, 100px);
}

#second-sub {
    left: clamp(32%, 40vw, 40%);
}

.pin-spacer {
    margin-top: 0 !important;
}

.contents-wap {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.contents-wap p {
    font-size: clamp(18px, 2.34vw, 32px);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    line-height: clamp(24px, 2vw, 24px);
    color: #333;
    margin-top: clamp(40px, 5.86vw, 80px);
}

.horizontal__inner {
    display: flex;
    align-items: center;
    width: max-content;
    padding-top: clamp(40px, 6vw, 80px);
    will-change: transform;
}

.service-slide {
    width: 100vw;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.service-section {
    width: 1120px;
}

.service-inner2 {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    gap: clamp(32px, 5vw, 68px);
    align-items: flex-start;
}

.service-inner2 {
    display: flex;
    position: relative;
}

.service-image2 {
    width: clamp(280px, 39.53vw, 540px);
    height: clamp(220px, 28.27vw, 386px);
    overflow: hidden;
    flex-shrink: 0;
    background-color: #f0f0f0;
}

.service-image2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-content {
    background: #fff;
    padding: clamp(40px, 7.69vw, 105px) clamp(24px, 4.39vw, 60px) clamp(24px, 2.93vw, 40px);
    position: relative;
    margin-left: clamp(-95px, -6.95vw, -40px);
    top: clamp(-30px, -2.19vw, -15px);
    z-index: 2;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.08);
    width: clamp(280px, 39.53vw, 540px);
}

.service-head {
    display: flex;
    align-items: center;
    margin-bottom: clamp(24px, 3.66vw, 50px);
    align-items: flex-start;
}

.service-number {
    font-family: "Roboto", sans-serif;
    line-height: clamp(32px, 3.51vw, 48px);
    letter-spacing: -0.05em;
    color: #333;
    font-size: clamp(32px, 3.51vw, 48px);
    font-weight: 600;
    margin-right: clamp(12px, 1.83vw, 25px);
}

.service-head .content-box {
    padding-left: clamp(12px, 1.83vw, 25px);
    border-left: 1px solid #000;
}

.service-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(18px, 1.76vw, 24px);
    font-weight: 600;
    line-height: clamp(26px, 2.34vw, 32px);
    color: #333;
    margin-bottom: clamp(12px, 1.46vw, 20px);
}

.service-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(14px, 1.17vw, 16px);
    font-weight: 400;
    line-height: clamp(24px, 2.34vw, 32px);
    color: #333;
}

.service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(110px, 9.74vw, 133px);
    height: clamp(36px, 2.93vw, 40px);
    border-radius: 22px;
    background: radial-gradient(ellipse at 50% -50%,
            #6a6fb3 0%,
            #4b4f8f 40%,
            #000049 100%);
    color: #fff;
    font-size: clamp(14px, 1.17vw, 16px);
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.3s;
    font-family: "Roboto", sans-serif;
}

.service-btn:hover {
    opacity: 0.85;
}

.service-btn-wrap {
    text-align: right;
}

.service-content.js-fade-up {
    opacity: 0;
    transform: translateY(24px);
}

.service-content.js-fade-up.is-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.service-head2 .section-title {
    opacity: 1;
    transform: none;
}

.contents-wap.js-observe {
    opacity: 0;
    transform: translateY(24px);
}

.contents-wap.js-observe.is-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

@media (max-width: 1000px) {
    .service-section {
        width: 92vw;
    }

    .service-inner2 {
        align-items: flex-start;
    }

    .service-image2 {
        width: 48%;
    }

    .service-content {
        width: 48%;
        padding: 50px 24px 26px;
        top: -4vw;
    }

    .horizontal__inner {
        padding-top: 100px;
    }
}

@media (max-width: 840px) {
    .service-inner2 {
        flex-direction: column;
        gap: 40px;
    }

    .service-inner2 {
        gap: 0;
    }
}

@media (max-width: 767px) {
    .horizontal__inner {
        padding-right: 2vw;
    }

    .service-slide {
        width: 98vw;
    }

    .service-section {
        width: 100%;
    }

    .service-inner2 {
        flex-direction: column;
        align-items: stretch;
    }

    .service-image2 {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .service-image2 img {
        max-width: 100%;
    }

    .service-content {
        width: 100%;
        margin-left: 0;
        top: -16px;
        padding: 50px 20px 24px;
    }

    .service-head {
        margin-bottom: 20px;
    }

    .service-btn-wrap {
        text-align: left;
        margin-top: 16px;
    }
}

.service-content {
    position: relative;
}

.service-en-title {
    position: absolute;
    top: clamp(20px, 2.93vw, 40px);
    right: clamp(20px, 3.66vw, 50px);
    font-weight: bold;
    font-size: clamp(20px, 2.49vw, 34px);
    letter-spacing: 0.03em;
    color: #0080CC;
}

@media (max-width: 1000px) {
    .service-en-title {
        top: 5px;
        right: 30px;
    }
}

@media (max-width: 767px) {
    .service-en-title {
        top: 15px;
    }
}

/* ===============================
section8
=============================== */
/* page sectionにあり */

/* ===============================
section9
=============================== */
.section-news {
    padding-bottom: clamp(120px, 16.84vw, 230px);
    background: #F3F9FF;
    border-radius: clamp(16px, 1.83vw, 25px);
    margin: clamp(24px, 3.66vw, 50px) 50px !important;
}

.line5-1 {
    padding-top: clamp(24px, 3.66vw, 50px);
    color: #0158B5;
}

#forth-sub {
    left: clamp(24%, 34vw, 34%);
    color: #0080CC;
}

.section-divider {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.news-list {
    padding: clamp(72px, 10.25vw, 140px) 0 0 0 !important;
    max-width: clamp(320px, 51.24vw, 700px);
    list-style: none;
}

.news-date {
    font-family: "Roboto", sans-serif;
    font-size: clamp(14px, 1.46vw, 20px);
    letter-spacing: 0;
    line-height: clamp(12px, 1.17vw, 16px);
    color: #0080CC;
}

.news-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.news-category {
    font-family: "Roboto", sans-serif;
    font-size: clamp(12px, 1.17vw, 16px);
    color: #fff;
    background: #0080CC;
    padding: clamp(2px, 0.29vw, 4px) clamp(6px, 0.73vw, 10px) clamp(1px, 0.15vw, 2px);
    white-space: nowrap;
    letter-spacing: 0;
    line-height: clamp(12px, 1.17vw, 16px);
}

.news-item {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.1vw, 15px);
    padding: clamp(24px, 3.22vw, 44px) 0;
    border-top: 1px solid #000;
}

.news-title {
    flex: 1;
    font-size: clamp(16px, 1.76vw, 24px);
    color: #333333;
    letter-spacing: 0;
    line-height: 20px;
}

.news-arrow {
    font-family: "Roboto", sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 4.39vw, 60px);
    height: clamp(18px, 1.83vw, 25px);
    border-radius: clamp(14px, 1.61vw, 22px);
    background: radial-gradient(ellipse at 50% -50%, #6a6fb3 0%, #4b4f8f 40%, #000049 100%);
    color: #fff;
    font-size: clamp(16px, 1.76vw, 24px);
    font-weight: 300;
    text-decoration: none;
    transition: opacity 0.3s;
}

.news-bottom {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3.66vw, 50px);
    margin-top: clamp(8px, 1.1vw, 15px);
}

.news-bottom:hover {
    opacity: 0.85;
}

.news-item:last-child {
    border-bottom: 1px solid #000;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.46vw, 20px);
}

.section-news .section-title {
    opacity: 1;
    transform: none;
}

@media (max-width: 767px) {
    .section-news {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    .news-list {
        max-width: 100%;
    }

}

/* ===============================
section10
=============================== */
#news-bottom span {
    color: #C6E3F3;
    font-size: clamp(80px, 13.18vw, 180px);
    line-height: 160%;
    letter-spacing: -0.02em;
}

#news-wrap {
    margin-top: clamp(-260px, -19.03vw, -120px);
    margin-bottom: clamp(-30px, -2.2vw, -10px);
}

/* ===============================
section11
=============================== */
.contact-cta {
    width: 100%;
    background: linear-gradient(90deg, #A9A9A9 0%, #0a7cc9 75%, #0080CC 100%);
    padding: clamp(60px, 7.3vw, 100px) 0 clamp(32px, 4vw, 55px);
}

.contact-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 3vw, 40px);
}

.contact-title {
    font-family: "Roboto", sans-serif;
    line-height: clamp(64px, 8.8vw, 120px);
    font-size: clamp(56px, 8.8vw, 120px);
    letter-spacing: -0.02em;
    font-weight: 400;
    color: #fff;
    margin-bottom: clamp(24px, 3vw, 40px);
}

.contact-desc {
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: clamp(22px, 1.9vw, 26px);
    color: #fff;
    letter-spacing: 0;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(220px, 22vw, 300px);
    height: clamp(56px, 5.8vw, 80px);
    padding: clamp(20px, 2.2vw, 30px) clamp(32px, 4.4vw, 60px);
    background-color: #fff;
    color: #1059B2;
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 500;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 clamp(6px, 0.6vw, 8px) clamp(14px, 1.5vw, 20px) rgba(0, 0, 0, 0.15);
}

.contact-action {
    align-self: flex-end;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(clamp(16px, 1.8vw, 24px));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-title,
.contact-desc,
.contact-action {
    opacity: 0;
    transform: translateY(clamp(16px, 1.8vw, 24px));
}

.contact-cta.is-active .contact-title {
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 0.1s;
}

.contact-cta.is-active .contact-desc {
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 0.35s;
}

.contact-cta.is-active .contact-action {
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

@media (max-width: 767px) {
    .contact-inner {
        display: block;
    }

    .contact-action {
        text-align: right;
        margin-top: 24px;
    }
}

/* ===============================
section12 ロゴ表示
=============================== */
.opening {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 1;
    transition: opacity 0.5s ease;
}

.opening.is-hide {
    opacity: 0;
    pointer-events: none;
}

.opening-logo {
    width: 400px;
    opacity: 0;
}

.opening-logo.is-show {
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.opening-logo.is-hide {
    opacity: 0;
    transition: opacity 0.5s ease;
}

@keyframes text-focus-in {
    0% {
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        filter: blur(0);
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .opening-logo {
        width: 200px;
        opacity: 0;
    }
}

/* ===============================
TOP共通
=============================== */
.js-fade-up {
    opacity: 0;
    transform: translateY(24px);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.js-fade-up {
    opacity: 0;
    transform: translateY(24px);
}

.js-fade-up.is-active {
    animation: textFadeUp 0.8s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes textFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.js-image-reveal {
    position: relative;
    overflow: hidden;
}

.js-image-reveal .image-overlay {
    position: absolute;
    inset: 0;
    background: #1059B2;
    transform: translateX(0);
}

.js-image-reveal.is-active .image-overlay {
    transform: translateX(100%);
    transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

.section-title {
    opacity: 0;
    transform: translateY(16px);
}

.section-title.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.js-flow-text .char {
    opacity: 0;
    transform: translateY(12px);
    display: inline-block;
}

.js-flow-text.is-active .char {
    animation: flowCharIn 0.6s ease forwards;
}

@keyframes flowCharIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-cta {
    opacity: 0;
    transform: translateY(24px);
}

.contact-cta.is-active {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}