﻿body .container {
    max-width: 100%;
    padding: 0
}

html {
    scroll-behavior: smooth
}

#content__inner {
    background-color: #a2b6ba
}

#content__inner *,
#content__inner *::before,
#content__inner *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
    color: #000;
    line-height: 100%;
    font-family: Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS PGothic", sans-serif
}

#content__inner a {
    cursor: pointer;
    text-decoration: none;
    display: block
}

#content__inner em {
    font-style: normal
}

#content__inner picture,
#content__inner img {
    display: block;
    width: 100%;
    height: auto
}

#content__inner ul li {
    list-style: none
}

#content__inner .pc {
    display: block
}

#content__inner .sp {
    display: none
}

#content__inner .kv-area {
    width: 100%
}

#content__inner .kv-area__wrap {
    position: relative;
    background-image: url(../_img/2602/top_bg_pc.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    aspect-ratio: 1920/1080
}

#content__inner .kv-area__wrap>div {
    position: absolute
}

#content__inner .kv-area__wrap>div.image01 {
    width: clamp(449px, 43.75vw, 840px);
    inset: auto 0 0 auto;
    z-index: 5
}

#content__inner .kv-area__wrap>div.image02 {
    width: clamp(240px, 23.8vw, 438px);
    inset: auto 0 0 20.1%;
    z-index: 3
}

#content__inner .kv-area__wrap>div.image03 {
    width: clamp(234px, 22.81vw, 457px);
    inset: auto 0 0 34.9%;
    z-index: 2
}

#content__inner .kv-area__wrap>div.image04 {
    width: clamp(211px, 20.57vw, 395px);
    inset: auto 36.3% 0 auto;
    z-index: 4
}

#content__inner .kv-area__wrap>div.image05 {
    width: clamp(494px, 48.22vw, 926px);
    inset: 0 0 0 22.97%;
    z-index: 1
}

#content__inner .kv-area .bizspo-logo {
    position: relative;
    z-index: 999;
    width: min(100%, 1740px);
    margin: -83px auto 0;
    padding: 0 1%
}

#content__inner .anchor-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: min(100%, 1770px);
    margin: 50px auto 0;
    padding: 0 8%
}

#content__inner .anchor-area a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    background-color: #a2b6ba;
    transition: .4s ease;
    width: calc((100% - 48px)/4);
    padding: 24px 0;
    border-radius: 10px
}

#content__inner .anchor-area a svg g path {
    color: #fff
}

#content__inner .anchor-area a:hover {
    background-color: #fff
}

#content__inner .anchor-area a:hover svg g path {
    color: #a2b6ba
}

#content__inner .lead-area {
    display: flex;
    flex-direction: column;
    gap: 37px;
    width: min(100%, 745px);
    margin: 101px auto 134px
}

#content__inner .lead-area h1 {
    font-size: 49px
}

#content__inner .lead-area p {
    font-size: 18px;
    line-height: 183%
}

#content__inner section hgroup {
    display: flex;
    flex-direction: column;
    gap: 14px
}

#content__inner section hgroup p {
    text-align: center;
    font-size: 16px
}

#content__inner section hgroup h2 {
    width: min(100%, 400px);
    margin: 0 auto
}

#content__inner section hgroup h3 {
    width: min(100%, 165px);
    margin: 0 auto
}

#content__inner .look {
    padding: 0 0 166px
}

#content__inner .look__wrap figure {
    display: block
}

#content__inner .look__wrap figure figcaption {
    margin-top: clamp(8px, .82vw, 14px)
}

#content__inner .look__wrap figure figcaption p {
    font-size: clamp(12px, .72vw, 14px);
    line-height: 171%
}

#content__inner .look__wrap figure figcaption p span {
    font-weight: 600;
    font-size: clamp(14px, .88vw, 17px)
}

#content__inner .look__wrap__main {
    background-image: url(../_img/2602/look_bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    padding-top: 100px;
    margin-bottom: 176px
}

#content__inner .look__wrap__main figure {
    width: min(100%, 1460px);
    margin: 100px auto 0;
    padding: 0 30px
}

#content__inner .look__wrap__images {
    display: grid;
    grid-template-columns: repeat(18, minmax(0, 1fr));
    grid-template-rows: auto 9.58vw auto 6.87vw auto 15.62vw;
    width: min(100%, 1460px);
    margin: 0 auto;
    padding: 0 30px
}

#content__inner .look__wrap__images figure.images01 {
    grid-column: 1/span 8;
    grid-row: 1;
    width: min(100%, 657px)
}

#content__inner .look__wrap__images figure.images02 {
    grid-column: 10/span 9;
    grid-row: 1;
    width: min(100%, 773px)
}

#content__inner .look__wrap__images figure.images03 {
    grid-column: 7/span 7;
    width: min(100%, 768px);
    grid-row: 3
}

#content__inner .look__wrap__images figure.images04 {
    grid-column: 1/span 12;
    width: min(100%, 1010px);
    grid-row: 5
}

#content__inner .look__wrap__images figure.images05 {
    grid-column: 14/span 18;
    width: min(100%, 514px);
    grid-row: 5
}

#content__inner .look__wrap__images figure.images06 {
    grid-column: 2/span 7;
    width: min(100%, 600px);
    grid-row: 7
}

#content__inner .look__wrap__images figure.images07 {
    grid-column: 11/span 7;
    width: min(100%, 600px);
    grid-row: 7
}

#content__inner .function {
    background-color: #e6e6e6;
    padding: 166px 0
}

#content__inner .function__wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 116px 80px;
    width: min(100%, 1260px);
    margin: 124px auto 0;
    padding: 0 30px
}

#content__inner .function__wrap li {
    display: flex;
    flex-direction: column;
    gap: 26px;
    width: calc((100% - 80px)/2)
}

#content__inner .function__wrap li>img {
    width: 100%
}

#content__inner .function__wrap li>div {
    display: flex;
    flex-direction: column;
    gap: 30px
}

#content__inner .function__wrap li>div>p {
    font-size: 15px;
    line-height: 173%
}

#content__inner .function__wrap li>div>div {
    display: flex;
    gap: 14px
}

#content__inner .function__wrap li>div>div>img {
    width: min(100%, 56px)
}

#content__inner .function__wrap li>div>div>div {
    display: flex;
    flex-direction: column;
    gap: 14px
}

#content__inner .function__wrap li>div>div>div>p.ttl {
    font-size: 24px
}

#content__inner .function__wrap li>div>div>div>p.text {
    font-size: 18px
}

#content__inner .lineup {
    background-color: #fff;
    padding: 166px 0
}

#content__inner .lineup__wrap {
    width: min(100%, 1260px);
    margin: 90px auto 0;
    padding: 0 30px
}

#content__inner .lineup__wrap__contents {
    position: relative;
    margin: 0 auto
}

#content__inner .lineup__wrap__contents:not(:last-child) {
    margin-bottom: 144px
}

#content__inner .lineup__wrap__contents hgroup {
    margin-bottom: 30px
}

#content__inner .lineup__wrap__contents a {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: min(100%, 234px)
}

#content__inner .lineup__wrap__contents a>img {
    width: 100%
}

#content__inner .lineup__wrap__contents a>p {
    text-align: center;
    font-size: 15px;
    line-height: 173%
}

#content__inner .lineup__wrap__contents a>p span {
    font-weight: 600;
    font-size: 18px
}

#content__inner .lineup__wrap__contents .items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 106px
}

#content__inner .lineup__wrap__contents .swiper {
    width: min(100%, 914px);
    margin: 0 auto
}

#content__inner .lineup__wrap__contents .swiper .swiper-wrapper .swiper-slide {
    opacity: .3
}

#content__inner .lineup__wrap__contents .swiper .swiper-wrapper .swiper-slide>p {
    opacity: 0
}

#content__inner .lineup__wrap__contents .swiper .swiper-wrapper .swiper-slide.swiper-slide-active {
    opacity: 1
}

#content__inner .lineup__wrap__contents .swiper .swiper-wrapper .swiper-slide.swiper-slide-active>p {
    opacity: 1
}

#content__inner .lineup__wrap__contents .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px
}

#content__inner .lineup__wrap__contents .swiper-pagination .swiper-pagination-bullet {
    background-color: #fff;
    border: 1px solid #000
}

#content__inner .lineup__wrap__contents .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #000
}

#content__inner .lineup__wrap__contents button {
    cursor: pointer;
    position: absolute;
    background-color: #fff;
    z-index: 9;
    top: 50%;
    transform: translateY(-50%)
}

#content__inner .lineup__wrap__contents button.prev {
    left: 0
}

#content__inner .lineup__wrap__contents button.next {
    right: 0
}

#content__inner .interview-banner {
    background-color: #fff;
    padding: 0 30px
}

#content__inner .interview-banner a {
    transition: .3s ease;
    width: min(100%, 914px);
    margin-inline: auto;
}

#content__inner .interview-banner a:hover {
    opacity: .7
}

#content__inner .bnr_area {
    background-color: #fff;
    padding: 80px 40px
}

#content__inner .bnr_area .bnr {
    display: block;
    max-width: 400px;
    margin: 40px auto
}

#content__inner .animationIn .animationIn-img {
    opacity: 0;
    animation: fadeIn 600ms ease forwards;
    animation-delay: calc(var(--i)*250ms);
    will-change: opacity
}

@keyframes fadeIn {
    to {
        opacity: 1
    }
}

@media(prefers-reduced-motion: reduce) {
    #content__inner .animationIn-img img {
        animation: none;
        opacity: 1
    }
}

#content__inner .fade-up {
    opacity: 0;
    transform: translateY(150px)
}

#content__inner .fadeUp {
    animation-name: fadeUp;
    animation-duration: .9s;
    animation-fill-mode: forwards;
    opacity: 0
}

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

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

@media(prefers-reduced-motion: reduce) {
    #content__inner .fade-up {
        opacity: 1;
        transform: none
    }

    #content__inner .fadeUp {
        animation: none
    }
}

#content__inner .reveal-blur {
    --op: 0;
    --ty: 12px;
    --blur: 12px;
    opacity: var(--op);
    transform: translateY(var(--ty));
    filter: blur(var(--blur));
    will-change: opacity, transform, filter
}

@media(prefers-reduced-motion: reduce) {
    #content__inner .reveal-blur {
        opacity: 1;
        transform: none;
        filter: none;
        will-change: auto
    }
}

@media(max-width: 1025px) {
    #content__inner .kv-area__wrap {
        background-image: url(../_img/2602/top_bg_sp.png);
        background-position: top right;
        background-size: cover;
        aspect-ratio: 1025/1424
    }

    #content__inner .kv-area__wrap>div.image01 {
        width: clamp(154px, 39.51vw, 405px);
        inset: auto 0 0 auto
    }

    #content__inner .kv-area__wrap>div.image02 {
        width: clamp(157px, 37.65vw, 413px);
        inset: auto 0 0 0
    }

    #content__inner .kv-area__wrap>div.image03 {
        width: clamp(146px, 37.65vw, 386px);
        inset: auto 0 0 25.07%
    }

    #content__inner .kv-area__wrap>div.image04 {
        width: clamp(132px, 33.75vw, 346px);
        inset: auto 27.8% 0 auto
    }

    #content__inner .kv-area__wrap>div.image05 {
        width: clamp(390px, 100vw, 1025px);
        inset: 0 0 0 50%;
        transform: translateX(-50%)
    }

    #content__inner .kv-area .bizspo-logo {
        width: 100%;
        margin: -5% auto 0
    }

    #content__inner .anchor-area {
        gap: 2vw;
        width: 100%;
        margin: 2% auto 0
    }

    #content__inner .anchor-area a {
        width: calc((100% - 6vw)/4);
        padding: 1.6vw 0;
        border-radius: 1vw
    }

    #content__inner .anchor-area a svg {
        height: 1.2vw
    }
}

@media(max-width: 768px) {
    #content__inner .pc {
        display: none
    }

    #content__inner .sp {
        display: block
    }

    #content__inner .kv-area__wrap {
        background-image: url(../_img/2602/top_bg_sp.png);
        background-position: top right;
        background-size: cover
    }

    #content__inner .kv-area__wrap>div.image01 {
        width: clamp(148px, 29.56vw, 303px);
        inset: auto 0 0 auto
    }

    #content__inner .kv-area__wrap>div.image02 {
        width: clamp(151px, 30.14vw, 309px);
        inset: auto 0 0 0
    }

    #content__inner .kv-area__wrap>div.image03 {
        width: clamp(141px, 28.19vw, 289px);
        inset: auto 0 0 25.07%
    }

    #content__inner .kv-area__wrap>div.image04 {
        width: clamp(127px, 25.26vw, 259px);
        inset: auto 27.8% 0 auto
    }

    #content__inner .kv-area__wrap>div.image05 {
        width: clamp(375px, 100vw, 768px);
        inset: 0 0 0 50%;
        transform: translateX(-50%)
    }

    #content__inner .kv-area .bizspo-logo {
        width: 100%;
        margin: -6% auto 4%
    }

    #content__inner .anchor-area {
        flex-wrap: wrap;
        padding: 0 6%
    }

    #content__inner .anchor-area a {
        width: calc((100% - 6vw)/2);
        padding: 3vw 0;
        border-radius: 1.4vw
    }

    #content__inner .anchor-area a svg {
        height: 2.6vw
    }

    #content__inner .lead-area {
        gap: 4vw;
        width: 100%;
        margin: 13.15vw auto 17.4vw;
        padding: 0 15px
    }

    #content__inner .lead-area h1 {
        text-align: center;
        font-size: clamp(28px, 6.38vw, 49px);
        line-height: 160%
    }

    #content__inner .lead-area p {
        font-size: clamp(16px, 2.34vw, 18px)
    }

    #content__inner section hgroup {
        gap: 14px
    }

    #content__inner section hgroup p {
        font-size: 16px
    }

    #content__inner section hgroup h2 {
        width: clamp(250px, 52vw, 400px)
    }

    #content__inner section hgroup h3 {
        width: clamp(130px, 21.48vw, 165px)
    }

    #content__inner .look {
        padding: 0 0 clamp(100px, 21.6vw, 166px) 0
    }

    #content__inner .look__wrap figure figcaption {
        margin-top: 1.82vw
    }

    #content__inner .look__wrap__main {
        padding-top: 13vw;
        margin-bottom: 22.9vw
    }

    #content__inner .look__wrap__main figure {
        width: 100%;
        margin: 13vw auto 0;
        padding: 0 15px
    }

    #content__inner .look__wrap__images {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto 7.38vw auto 17.1vw auto 17.1vw auto 7.38vw auto 11.03vw auto 5.72vw;
        width: 100%;
        padding: 0
    }

    #content__inner .look__wrap__images figure.images01 {
        grid-column: 1/span 1;
        grid-row: 1;
        width: 80%;
        margin: 0 auto
    }

    #content__inner .look__wrap__images figure.images02 {
        grid-column: 1/span 1;
        grid-row: 3;
        width: 100%
    }

    #content__inner .look__wrap__images figure.images02 figcaption {
        padding: 0 15px
    }

    #content__inner .look__wrap__images figure.images03 {
        grid-column: 1/span 1;
        width: 100%;
        grid-row: 5
    }

    #content__inner .look__wrap__images figure.images03 figcaption {
        padding: 0 15px
    }

    #content__inner .look__wrap__images figure.images04 {
        grid-column: 1/span 1;
        width: 100%;
        grid-row: 7
    }

    #content__inner .look__wrap__images figure.images05 {
        grid-column: 1/span 1;
        width: 80%;
        margin: 0 auto;
        grid-row: 9
    }

    #content__inner .look__wrap__images figure.images06 {
        grid-column: 1/span 1;
        width: 90%;
        margin: 0 auto;
        grid-row: 11
    }

    #content__inner .look__wrap__images figure.images07 {
        grid-column: 1/span 1;
        width: 90%;
        margin: 0 auto;
        grid-row: 13
    }

    #content__inner .function {
        padding: clamp(100px, 21.6vw, 166px) 0
    }

    #content__inner .function__wrap {
        gap: clamp(50px, 15.1vw, 116px) 0;
        width: 100%;
        margin: clamp(50px, 15.1vw, 116px) auto 0;
        padding: 0 30px
    }

    #content__inner .function__wrap li {
        gap: clamp(20px, 3.38vw, 26px);
        width: 100%
    }

    #content__inner .function__wrap li>div {
        gap: clamp(22px, 3.9vw, 30px)
    }

    #content__inner .function__wrap li>div>p {
        font-size: clamp(13px, 1.95vw, 15px);
        line-height: 173%
    }

    #content__inner .function__wrap li>div>div {
        display: flex;
        gap: 2vw
    }

    #content__inner .function__wrap li>div>div>img {
        width: clamp(40px, 7.29vw, 56px)
    }

    #content__inner .function__wrap li>div>div>div {
        display: flex;
        flex-direction: column;
        gap: 2vw
    }

    #content__inner .function__wrap li>div>div>div>p.ttl {
        font-size: clamp(20px, 3.125vw, 24px)
    }

    #content__inner .function__wrap li>div>div>div>p.text {
        font-size: clamp(13px, 1.95vw, 15px)
    }

    #content__inner .lineup {
        padding: clamp(100px, 21.6vw, 166px) 0
    }

    #content__inner .lineup__wrap {
        margin-top: clamp(50px, 15.1vw, 116px)
    }

    #content__inner .lineup__wrap__contents {
        width: 100%;
        padding: 0 30px
    }

    #content__inner .lineup__wrap__contents:not(:last-child) {
        margin-bottom: clamp(100px, 18.75vw, 144px)
    }

    #content__inner .lineup__wrap__contents hgroup {
        margin-bottom: clamp(24px, 3.9vw, 30px)
    }

    #content__inner .lineup__wrap__contents a {
        gap: 2vw;
        width: 100%
    }

    #content__inner .lineup__wrap__contents a>img {
        width: 100%
    }

    #content__inner .lineup__wrap__contents a>p {
        font-size: clamp(13px, 1.95vw, 15px)
    }

    #content__inner .lineup__wrap__contents a>p span {
        font-size: clamp(16px, 2.34vw, 18px)
    }

    #content__inner .lineup__wrap__contents .items {
        flex-wrap: wrap;
        gap: clamp(50px, 13.8vw, 106px)
    }

    #content__inner .lineup__wrap__contents .swiper {
        width: 100%;
        margin: 0 auto
    }

    #content__inner .lineup__wrap__contents .swiper .swiper-wrapper .swiper-slide {
        opacity: 1
    }

    #content__inner .lineup__wrap__contents .swiper .swiper-wrapper .swiper-slide>p {
        opacity: 1
    }

    #content__inner .lineup__wrap__contents button {
        display: none
    }

    #content__inner .interview-banner picture img {
        width: 100%;
        padding: 0 20px
    }

    #content__inner .bnr_area {
        padding: 40px 20px
    }
}

/*# sourceMappingURL=style_2602.css.map */