@charset "UTF-8";
/*------------------------------
TOP
------------------------------*/
/***
FV
***/
#fv{
    position: relative;
    overflow: hidden;
    width: 100%; height: 70svh;
}
#fv:before{
    z-index: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/soundlab_new/images/ruled_line.png);
    background-repeat: repeat;
    background-position: 50%;
    background-size: auto;
    content: "";
}
#mainVideo{
    height: 100svh;
    position: absolute;
    top: 50%; left: 50%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
}
#fv .catch {
    position: absolute;
    left: 70px;
    bottom: 53px;
    font-size: clamp(2.5rem, 5.33vw, 4rem);
    font-weight: var(--fontBig);
    color: var(--colorWhite);
    letter-spacing: 3px;
    line-height: 1;
    z-index: 2;
}

#fv .catch p {
    margin-bottom: 20px;
}
#fv .catch p:last-child {
    margin-bottom: 0px;
}
/* 親 span（行ごと） */
#fv .catch p span {
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 0;
  color: transparent;
  animation: textReveal 0.3s ease-out forwards;
  animation-delay: var(--text-delay, 1.2s);
}

/* テキスト表示アニメーション */
@keyframes textReveal {
  to {
    color: var(--colorWhite);
  }
}

/* 白い帯アニメーションは親spanにのみ */
#fv .catch p span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  background: var(--colorWhite);
  z-index: 1;
  opacity: 0;
  animation: wipe-slide 1.2s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

/* 白帯：スライドしながら消える */
@keyframes wipe-slide {
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }
  60% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* 各文字に対するグラデーション */
#fv .catch p span .char {
  display: inline-block;
  animation: gradientFlow 2.4s ease-in-out 3;
  animation-delay: var(--delay);
  animation-fill-mode: forwards;
}

/* 色が時間で変化する */
@keyframes gradientFlow {
  0%   { color: var(--colorWhite); }
  25%  { color: #00aaff; }
  50%  { color: #ff66cc; }
  75%  { color: #ffaa00; }
  100% { color: var(--colorWhite); }
}

/* FVスマホ */
@media (max-width: 768px) {
    #fv{
       height: 50svh;
    }
    #mainVideo{
        height: 50svh;
    }
    #fv .catch {
        left: 7vw;
        bottom: 10vw;
        font-size: clamp(1.8rem, 4.8vw, 3.6rem);
        letter-spacing: 2px;
        line-height: 1;
    }
    #fv .catch p {
        margin-bottom: 3vw;
    }
}
@media screen and (max-width: 1000px) and (orientation: landscape) {
    #fv{
       height: 100svh;
    }
    #fv .catch{
        left: 5vw;
        bottom: 4vw;
        font-size: clamp(2rem, 4vw, 3rem);
    }
    #fv .catch p {
        margin-bottom: 10px;
    }
}

/***
topMission
***/
.topMission {
  position: relative;
  padding: 150px 0 0;
  color: var(--colorWhite);
  background-color: var(--colorMain);
  background-size: 200% 200%;
  animation: bgWave 15s ease-in-out infinite;
}
.topMission .innerBox{
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
}
.topMission .innerBox .boxLeft{
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}
.topMission .photo01{
    width: 100%;
    position: relative;
    padding-right: 37px;
}
.topMission .photo02{
    width: 70%;
    position: relative;
    max-width: 394px;
    margin: calc(4vw) calc(4vw) 0 calc(5vw);
    z-index: 0;
    padding-bottom: 150px;
}
.topMission .photo03{
    width: 30%;
    position: absolute;
    max-width: 600px;
    bottom: -39px; right: 0;
}
.topMission .photo01 .img,
.topMission .photo02 .img,
.topMission .photo03 .img {
    width: 100%;
    object-fit: cover;
}
.topMission .boxLeft .text{
    margin-top: 50px;
    width: 70%;
    line-height: 1.8;
}
.topMission .boxLeft .subTitle{
    font-size: 2.4rem;
    color: var(--colorMain);
    letter-spacing: 1.5px;
    margin-bottom: 28px;
}
.topMission .boxLeft .subTitle span{
    line-height: 1.4;
}
.topMission .boxLeft .lead{
    font-size: 1.6rem;
    line-height: 2;
}
.topMission .innerBox .boxRight{
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.topMission .boxRight .text{
    margin-top: 30px;
    width: 80%;
    line-height: 1.8;
    position: relative;
    top: 0;
    left: -1vw;
}
.topMission .boxRight .subTitle{
    font-size: 2.4rem;
    color: var(--colorMain);
    letter-spacing: 1.5px;
    margin-bottom: 27px;
}
.topMission .boxRight .subTitle span{
    box-decoration-break: clone;
    line-height: 1.3;
}
.topMission .boxRight .lead{
    font-size: 1.6rem;
    line-height: 2;
}
@media (max-width: 768px) {
    .topMission {
        padding: 20vw 0 0;
        overflow: hidden;
    }
    .topMission .innerBox{
        grid-template-columns: repeat(1, 1fr);
    }
    .topMission .photo01{
        padding-right: 20px;
    }
    .topMission .photo03{
        width: 60%;
        bottom: 4vw;
        right: 0vw;
    }
    .topMission .boxLeft .text{
        width: 90%;
        line-height: 1.5;
        margin: 8vw auto 0;
    }
    .topMission .boxLeft .subTitle{
        font-size: clamp(1.8rem, 3.2vw, 2.4rem);
        margin-bottom: 3vw;
    }
    .topMission .boxLeft .lead{
        font-size: clamp(1.3rem, 2.13vw, 1.6rem);
        line-height: 1.8;
    }
    .topMission .boxRight .text{
        width: 90%;
        line-height: 1.5;
        left: 0;
        margin: 9vw auto 0;
    }
    .topMission .boxRight .subTitle{
        font-size: clamp(1.8rem, 3.2vw, 2.4rem);
        margin-bottom: 3vw;
    }
    .topMission .boxRight .lead{
        font-size: clamp(1.3rem, 2.13vw, 1.6rem);
        line-height: 1.8;
    }
}
@media screen and (max-width: 1000px) and (orientation: landscape) {
    .topMission{
        padding: 100px 0 0;
    }
    .topMission .boxRight .subTitle{
        font-size: 2rem;
    }
    .topMission .boxRight .lead {
        font-size: 1.4rem;
        line-height: 1.8;
    }
    .topMission .boxLeft .subTitle{
        font-size: 2rem;
    }
    .topMission .boxLeft .lead{
        font-size: 1.4rem;
        line-height: 1.8;
    }
    .topMission .photo03{
        bottom: -10px;
    }
}

/***
topWorks
***/
.topWorks{
    margin: 80px auto 80px;
    position: relative;
    width: 100%;
    max-width: 1920px;
}
.topWorks .titleArea{
    display: flex;
    gap: 10px;
    align-items: center;
    width: 90%;
    max-width: 1100px;
    justify-content: space-between;
    margin: 0 auto;
}
.topWorks .titleArea .title{
    display: flex;
    gap: 40px;
    align-items: center;
}
.topWorks .titleArea .contentTitle{
    font-size: clamp(5rem, 8.6vw, 8rem);
}
.topWorks .titleArea .text{
    font-size: clamp(1.4rem, 2.13vw, 1.6rem);
    line-height: 1.6;
    padding-top: 6px;
}
.topWorks .titleArea .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 15px 45px;
    font-size: 1.8rem;
    font-weight: bold;
    max-width: 228px;
    box-sizing: border-box;
}
.topWorks .titleArea .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--colorMain);
    position: absolute;
    right: 17px; top: 50%;
    transform: translate(0%, -50%);
}
.topWorks .worksList{
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    margin-top: 50px;
    border-top: 2px solid var(--colorMain);
    border-bottom: 2px solid var(--colorMain);
}
.topWorks .swiper {
    width: 100%;
    height: 100%;
}
.topWorks .worksList .list {
    padding: 0;
    margin: 0;
}
.topWorks .swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 4px solid #ffffff;
}
.topWorks .swiper-slide::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 60vw;
    background: var(--colorMain);
}
.topWorks .swiper-slide:first-child:after {
    width: 0px;
}
.topWorks .swiper-slide .link{
    display: block;
    padding: 50px 0;
    width: 100%; height: inherit;
    max-width: 414px;
}
.swiper-autoheight, .swiper-autoheight .swiper-slide{
    height: inherit;
}
.topWorks .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.topWorks .swiper-slide .jissekiPhotoWrap {
    display: grid;
    place-items: center;
    width: 100%;
}

.topWorks .swiper-slide .jissekiPhotoWrap .jissekiPhoto {
    width: 80%;
    max-width: 232px;
    height: auto;
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s ease;
}

.topWorks .swiper-slide .jissekiPhotoWrap .jissekiPhoto.active {
    opacity: 1;
    visibility: visible;
}
.topWorks .swiper-slide .jissekiPhoto{
    width: 80%;
    max-width: 232px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topWorks .swiper-slide .jissekiTitle{
    color: var(--colorMain);
    font-weight: bold;
    font-size: 1.6rem;
    text-align: center;
    padding: 0 6px;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.6;
}
.topWorks .swiper-slide .jissekiText{
    font-size: 1.2rem;
    text-align: center;
    line-height: 1.6;
    color: var(--colorBlack);
    padding: 0 10px;
    box-sizing: border-box;
    letter-spacing: 0px;
}
.topWorks .swiper-slide .transaction{
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
.topWorks .swiper-slide .data{
    font-size: 1.2rem;
    color: var(--colorMain);
    background: var(--colorAccent);
    padding: 6px 5px;
    letter-spacing: 0px;
}
.topWorks .swiper-slide .comcompany{
    margin-left: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--colorBlack);
    text-align: left;
    line-height: 1.3;
}
.topWorks .worksList .swiper-button-prev{
    width: 50px; height: 50px;
    object-fit: cover;
    top: 50%; left: 20vw;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.topWorks .worksList .swiper-button-next{
    width: 50px; height: 50px;
    object-fit: cover;
    top: 50%; left: 80vw;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    display: none;
}
/* 初期状態で非表示 */
.swiper-button-prev,
.swiper-button-next {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* マウスも通さないように */
}
/* .swiperにマウスが入った時だけ表示 */
.swiper:hover .swiper-button-prev,
.swiper:hover .swiper-button-next {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
    .topWorks{
        margin: 10.6vw auto 10.6vw;
    }
    .topWorks .titleArea{
        width: 90%;
        gap: 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    .topWorks .titleArea .title{
        gap: 3vw;
        flex-direction: column;
        align-items: flex-start;
    }
    .topWorks .titleArea .contentTitle{
        font-size: clamp(5rem, 10.6vw, 8rem);
    }
    .topWorks .titleArea .text{
        font-size: clamp(1.4rem, 2.13vw, 1.6rem);
        padding-top: 0px;
    }
    .topWorks .titleArea .btn {
        padding: 4vw 6vw;
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
        max-width: 100%;
        width: 60%;
        text-align: center;
        justify-content: center;
    }
    .topWorks .titleArea .arrow {
        right: 12px;
    }
    .topWorks .worksList{
        margin-top: 6.6vw;
    }
    .topWorks .swiper-slide{
        border: 0px solid #ffffff;
    }
    .topWorks .swiper-slide::after{
        width: 0;
    }
    .topWorks .swiper-slide .link{
        padding: 6vw 0;
    }
    .topWorks .swiper-slide .jissekiTitle{
        font-size: clamp(1.4rem, 2.13vw, 1.6rem);
        margin-top: 5vw;
        margin-bottom: 5vw;
    }
    .topWorks .swiper-slide .jissekiText{
        font-size: clamp(1rem, 1.6vw, 1.2rem);
    }
    .topWorks .swiper-slide .transaction{
        margin-top: 4vw;
    }
    .topWorks .swiper-slide .data{
        font-size: clamp(1rem, 1.6vw, 1.2rem);
    }
    .topWorks .swiper-slide .comcompany{
        font-size: clamp(1rem, 1.6vw, 1.2rem);
    }
    .topWorks .worksList .swiper-button-prev{
        width: 40px; height: 40px;
    }
    .topWorks .worksList .swiper-button-next{
        width: 40px; height: 40px;
    }
}
@media screen and (max-width: 1000px) and (orientation: landscape) {
    .topWorks .titleArea .title{
        gap: 25px;
    }
    .topWorks .titleArea .contentTitle {
        font-size: clamp(3rem, 8vw, 6rem);
    }
    .topWorks .titleArea .text {
        font-size: clamp(1.2rem, 1.86vw, 1.4rem);
    }
    .topWorks .swiper-slide .jissekiTitle{
        font-size: 1.4rem;
        line-height: 1.4;
    }
    .topWorks .swiper-slide .jissekiText{
        font-size: 1rem;
    }
    .topWorks .swiper-slide .comcompany{
        font-size: 1rem;
    }
    .topWorks .swiper-slide .data{
        font-size: 1rem;
    }
}

/***
topStudio
***/
.topStudio{
    overflow: hidden;
    margin: 100px auto 0;
    position: relative;
    width: 100%;
    max-width: 1920px;
}
.topStudio .bgBack{
    margin: 0;
    padding: 0;
}
.topStudio .bgBack::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2;
}
.topStudio .bgBack img{
    width: 100%;
    object-fit: cover;
}
.topStudio .titleArea{
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 2;
}
.topStudio .titleArea .contentTitle{
    font-size: clamp(5rem, 8.6vw, 8rem);
    margin-bottom: 2vw;
}
.topStudio .titleArea .text{
    font-size: 1.6rem;
    margin-bottom: 2.5vw;
    line-height: 2;
}
.topStudio .titleArea .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 15px 45px;
    font-size: 1.8rem;
    font-weight: bold;
    max-width: 228px;
    box-sizing: border-box;
}
.topStudio .titleArea .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--colorMain);
    position: absolute;
    right: 17px; top: 50%;
    transform: translate(0%, -50%);
}
.topStudio .sliderStudio {
    aspect-ratio: 3.122;
    position: relative;
    overflow: hidden;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}
.topStudio .sliderStudio li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 1s ease;
}
.topStudio .sliderStudio li.active {
    transform: translateX(0%);
    opacity: 1;
    z-index: 2;
}
.topStudio .sliderStudio li.prev {
    transform: translateX(-100%);
    opacity: 0;
    z-index: 1;
}
.topStudio .sliderStudio li picture,
.topStudio .sliderStudio li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 768px) {
    .topStudio{
        margin: 0vw auto 0;
    }
    .topStudio .titleArea{
        width: 90%;
        margin: 0 auto;
    }
    .topStudio .titleArea .contentTitle{
        font-size: clamp(5rem, 10.6vw, 8rem);
        margin-bottom: 10px;
    }
    .topStudio .titleArea .text{
        font-size: clamp(1.4rem, 2.13vw, 1.6rem);
        margin-bottom: 4.6vw;
        line-height: 1.8;
    }
    .topStudio .titleArea .btn {
        padding: 4vw 6vw;
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
        max-width: 100%;
        width: 60%;
        text-align: center;
        justify-content: center;
    }
    .topStudio .titleArea .arrow {
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 7px solid var(--colorMain);
        position: absolute;
        right: 17px; top: 50%;
        transform: translate(0%, -50%);
    }
    .topStudio .sliderStudio {
        aspect-ratio: 1360 / 1230;
    }
}
@media screen and (max-width: 1000px) and (orientation: landscape) {
    .topStudio .titleArea .contentTitle{
        font-size: clamp(3rem, 8vw, 6rem);
    }
    .topStudio .titleArea .text{
        font-size: clamp(1.2rem, 1.86vw, 1.4rem);
        line-height: 1.6;
    }
}

/***
topService
***/
.topService{
    background-color: var(--colorGradeRightTop);
    background-size: 200% 200%;
    animation: bgWave 15s ease-in-out infinite;
    overflow: hidden;
    color: var(--colorWhite);
    /* padding: 200px 0px 185px 0; */
    padding: 150px 0px 150px 0;
}
.topService .content {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    gap: 4vw;
}
.topService .boxLeft{
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    max-width: 791px;
}
.topService .boxLeft .titleArea{
    width: 64%;
}
.topService .boxLeft .contentTitle{
    font-size: clamp(5rem, 8.6vw, 8rem);
    margin-bottom: 2vw;
}
.topService .boxLeft .subTitle{
    font-size: clamp(1.8rem, 3.06vw, 2.3rem);
    border-bottom: 1px solid var(--colorWhite);
    display: inline-block;
    margin-bottom: 20px;
    line-height: 1.3;
}
.topService .boxLeft .text{
    font-size: clamp(1.4rem, 2.13vw, 1.6rem);
    margin-bottom: 14px;
    line-height: 1.5;
}
.topService .titleArea .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 16px 2vw;
    font-size: 1.8rem;
    font-weight: bold;
    max-width: 409px;
    box-sizing: border-box;
    width: 85%;
}
.topService .boxLeft .photo01{
    width: 100%;
    max-width: 790px;
    margin-top: 35px;
}
.topService .titleArea .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--colorMain);
    position: absolute;
    right: 0.9vw; top: 50%;
    transform: translate(0%, -50%);
}

.topService .boxRight{
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 10.4vw;
    max-width: 632px;
    padding-right: 1vw;
}
.topService .boxRight .list{
    margin: 0;
    padding: 0;
}
.topService .boxRight .list li{
    border-bottom: 2px solid var(--colorWhite);
    display: flex;
    align-items: baseline;
    padding-bottom: 16px;
    margin-bottom: 20px;
}
.topService .boxRight .number{
    font-size: 2.6rem;
    font-weight: bold;
    width: 10%;
    max-width: 55px;
    letter-spacing: 0px;
}
.topService .boxRight .text{
    font-size: 1.4rem;
    width: 93%;
    line-height: 1.6;
    position: relative;
    top: -2px;
    left: 0;
}
@media (max-width: 768px) {
    .topService{
        padding: 22.1vw 0px 22.1vw 0;
    }
    .topService .content {
        flex-direction: column;
    }
    .topService .boxLeft{
        width: 100%;
    }
    .topService .boxLeft .titleArea{
        width: 90%;
        margin: 0 auto;
    }
    .topService .boxLeft .contentTitle{
        font-size: clamp(5rem, 10.6vw, 8rem);
        margin-bottom: 20px
    }
    .topService .boxLeft .subTitle{
        font-size: clamp(1.8rem, 3.06vw, 2.3rem);
        margin-bottom: 15px;
    }
    .topService .boxLeft .text{
        font-size: clamp(1.4rem, 2.13vw, 1.6rem);
    }
    .topService .titleArea .btn {
        padding: 4vw 6vw;
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
        max-width: 100%;
        width: 60%;
    }
    .topService .boxLeft .photo01{
        margin-top: 35px;
    }
    .topService .titleArea .arrow{
        right: 17px;
    }
    .topService .boxRight{
        padding-right: 0;
        width: 80%;
        margin: 7.4vw auto 0;
    }
    .topService .boxRight .list li{
        padding-bottom: 5vw;
        margin-bottom: 5vw;
    }
    .topService .boxRight .number{
        font-size: clamp(2.2rem, 3.46vw, 2.6rem);
        width: 20%;
    }
    .topService .boxRight .text{
        font-size: clamp(1.3rem, 1.8vw, 1.4rem);
        width: 80%;
    }
}
@media screen and (max-width: 1000px) and (orientation: landscape) {
    .topService{
        padding: 100px 0px 100px 0;
    }
    .topService .boxLeft .titleArea{
        width: 84%;
    }
    .topService .boxLeft .contentTitle{
        font-size: clamp(3rem, 8vw, 6rem);
    }
    .topService .boxLeft .subTitle{
        font-size: clamp(1.4rem, 2.26vw, 1.7rem);
    }
    .topService .boxLeft .text{
        font-size: clamp(1.2rem, 1.86vw, 1.4rem);
    }
    .topService .titleArea .btn{
        font-size: 1.6rem;
    }
    .topService .boxRight .number{
        font-size: 2rem;
    }
}

/***
topMessage
***/
.topMessage{
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width: 1920px;
}
.topMessage .bgBack{
    margin: 0;
    padding: 0;
}
.topMessage .bgBack::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
}
.topMessage .bgBack img{
    width: 100%;
    object-fit: cover;
}
.topMessage .titleArea{
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 2;
}
.topMessage .titleArea .contentTitle{
    font-size: clamp(5rem, 8.6vw, 8rem);
    margin-bottom: 2vw;
}
.topMessage .titleArea .text{
    font-size: 1.6rem;
    margin-bottom: 2.5vw;
    line-height: 2;
}
.topMessage .titleArea .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 15px 45px;
    font-size: 1.8rem;
    font-weight: bold;
    max-width: 228px;
    box-sizing: border-box;
}
.topMessage .titleArea .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--colorMain);
    position: absolute;
    right: 17px; top: 50%;
    transform: translate(0%, -50%);
}
@media (max-width: 768px) {
    .topMessage .titleArea{
        width: 90%;
        margin: 0 auto;
    }
    .topMessage .titleArea .contentTitle{
        font-size: clamp(5rem, 10.6vw, 8rem);
        margin-bottom: 10px;
    }
    .topMessage .titleArea .text{
        font-size: clamp(1.4rem, 2.13vw, 1.6rem);
        margin-bottom: 4.6vw;
        line-height: 1.8;
    }
    .topMessage .titleArea .btn {
        padding: 4vw 6vw;
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
        max-width: 100%;
        width: 60%;
        text-align: center;
        justify-content: center;
    }
}
@media screen and (max-width: 1000px) and (orientation: landscape) {
    .topMessage .titleArea .contentTitle{
        font-size: clamp(3rem, 8vw, 6rem);
    }
    .topMessage .titleArea .text{
        font-size: clamp(1.2rem, 1.86vw, 1.4rem);
        line-height: 1.6;
    }
}

/***
topEvent
***/
.topEvent{
    margin: 0 auto;
    padding: 140px 0;
    position: relative;
    width: 100%;
    max-width: 1920px;
}
.topEvent .titleArea{
    display: flex;
    gap: 10px;
    align-items: center;
    width: 90%;
    max-width: 1100px;
    justify-content: space-between;
    margin: 0 auto;
}
.topEvent .titleArea .title{
    display: flex;
    gap: 40px;
    align-items: center;
}
.topEvent .titleArea .contentTitle{
    font-size: clamp(5rem, 8.6vw, 8rem);
}
.topEvent .titleArea .text{
    font-size: clamp(1.4rem, 2.13vw, 1.6rem);
    line-height: 1.6;
    padding-top: 0.2vw;
}
.topEvent .titleArea .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 15px 45px;
    font-size: 1.8rem;
    font-weight: bold;
    max-width: 228px;
    box-sizing: border-box;
}
.topEvent .titleArea .spBlock{
    display: none;
}
.topEvent .titleArea .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--colorMain);
    position: absolute;
    right: 17px; top: 50%;
    transform: translate(0%, -50%);
}
.topEvent .eventList{
    width: 90%;
    max-width: 1100px;
    margin: 3.7vw auto 0;
    padding: 0;
}
.topEvent .eventList li{
    border-top: 1px solid var(--colorBlack);
}
.topEvent .eventList li:last-child{
    border-bottom: 1px solid var(--colorBlack);
}
.topEvent .eventList li a{
    color: var(--colorBlack);
}
.topEvent .eventList .box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 40px;
}
.topEvent .eventList .text{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.topEvent .eventList .button{
    width: 35px;
    height: 35px;
    background-color:  var(--colorMain);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topEvent .eventList .button:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 12px solid var(--colorWhite);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-left: 5px;
}
.topEvent .eventList .data{
    font-size: 1.2rem;
    width: 40%;
    max-width: 180px;
    display: block;
    padding-right: 2vw;
}
.topEvent .eventList .lead{
    font-size: 1.4rem;
    padding-top: 2px;
    width: 80%;
    padding-right: 2vw;
    line-height: 1.7;
}
@media (max-width: 768px) {
    .topEvent{
        padding: 22.1vw 0;
    }
    .topEvent .titleArea{
        flex-direction: column;
        width: 90%;
        gap: 20px;
        align-items: flex-start;
    }
    .topEvent .titleArea .title{
        gap: 3vw;
        flex-direction: column;
        align-items: flex-start;
    }
    .topEvent .titleArea .contentTitle{
        font-size: clamp(5rem, 10.6vw, 8rem);
    }
    .topEvent .titleArea .text{
        font-size: clamp(1.4rem, 2.13vw, 1.6rem);
        padding-top: 0px;
    }
    .topEvent .titleArea .btn{
        padding: 4vw 6vw;
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
        max-width: 100%;
        width: 60%;
        text-align: center;
        justify-content: center;
    }
    .topEvent .titleArea .pcBlock{
        display: none;
    }
    .topEvent .titleArea .spBlock{
        display: block;
        margin: 0 auto;
    }
    .topEvent .eventList{
        margin: 6.6vw auto 6.6vw;
        width: 90%;
    }
    .topEvent .eventList .box{
        padding: 4.26vw 2.33vw;
    }
    .topEvent .eventList .data{
        font-size: clamp(1rem, 1vw + 0.5rem, 1.2rem);
        width: 35%;
    }
    .topEvent .eventList .lead{
        font-size: clamp(1.2rem, 1vw + 0.5rem, 1.4rem);
        padding-right: 3vw;
        line-height: 1.5;
    }
    .topEvent .eventList .button{
        width: 30px;
        height: 30px;
    }
    .topEvent .eventList .button:after{
        border-left: 10px solid var(--colorWhite);
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        margin-left: 2px;
    }
}
@media screen and (max-width: 1000px) and (orientation: landscape) {
    .topEvent .titleArea .title{
        gap: 25px;
    }
    .topEvent .titleArea .contentTitle{
        font-size: clamp(3rem, 8vw, 6rem);
    }
    .topEvent .titleArea .text{
        font-size: clamp(1.2rem, 1.86vw, 1.4rem);
    }
    .topEvent .eventList .box{
        padding: 25px 30px;
    }
    .topEvent .eventList .data{
        width: 20%;
        min-width: 130px;
    }
}


/*------------------------------
下層ページ共通
------------------------------*/
.layerBlock{
    background: var(--colorWhite);
}
.layerBlock .innerBox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* padding: 130px 20px; */
    padding: 60px 20px;
    max-width: calc(1110px + 40px);
    margin: 0 auto;
    box-sizing: border-box;
}
.layerBlock .pageTtl{
    /* font-size: clamp(7rem, 1vw + 0.5rem, 8rem); */
    font-size: clamp(5rem, 1vw + 0.5rem, 6rem);
    font-weight: bold;
    margin-bottom: 20px;
}
.layerBlock .pageText{
    /* font-size: clamp(1.3rem, 1vw + 0.5rem, 1.5rem); */
    font-size: clamp(1.1rem, 1vw + 0.5rem, 1.3rem);
    font-weight: bold;
    line-height: 1.6;
}
.layerBlock .breadcrumb .linkList{
    display: flex;
    align-items: center;
}
.layerBlock .breadcrumb .linkList li{
    position: relative;
    padding-right: 8px;
    color: var(--colorMain);
    font-size: 1.4rem;
}
.layerBlock .breadcrumb .linkList li:last-child{
    padding-right: 0px;
}
.layerBlock .breadcrumb .linkList li a{
    color: var(--colorMain);
    text-decoration: underline;
}
.layerBlock .breadcrumb .linkList li a span{
    padding-right: 8px;
}
.layerBlock .breadcrumb .linkList .pageNew:before{
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    background-color: var(--colorMain);
    margin-right: 4px;
    vertical-align: super;
}
.layerBlock .breadcrumb .linkList .pageNew .blueLine{
    padding: 4px 5px;
    color: var(--colorMain);
}
@media (max-width: 768px) {
    .layerBlock .innerBox{
        /* padding: 15.3vw 5.6vw; */
        padding: 11.3vw 5.6vw;
        flex-direction: column;
        align-items: flex-start;
    }
    .layerBlock .pageTtl{
        /* font-size: clamp(4.5rem, 8.6vw, 8rem); */
        font-size: clamp(3rem, 8.6vw, 6rem);
    }
    .layerBlock .pageText{
        margin-bottom: 20px;
        /* font-size: clamp(1.2rem, 1.86vw, 1.4rem); */
        font-size: clamp(1rem, 1.6vw, 1.2rem);
    }
    .layerBlock .breadcrumb .linkList{
        padding: 0;
        margin: 0;
        padding-left: 1vw;
    }
    .layerBlock .breadcrumb .linkList li{
        font-size: clamp(1rem, 1.6vw, 1.2rem);
    }
}

/***
ContactContent
***/
.ContactContent{
    background: var(--colorWhite);
    /* padding: 100px 20px; */
    padding: 60px 20px;
}
.ContactContent .link{
    max-width: 880px;
    margin: 0 auto;
    display: block;
}
.ContactContent .box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--colorMain);
    border: 4px solid var(--colorAccent);
    padding: 40px;
    color: var(--colorWhite);
    
    transition: transform 0.3s ease, color 0.3s ease;
    animation: pulseBorder 2.5s ease-in-out infinite;
    overflow: hidden;
    z-index: 0;
}
.ContactContent .box .text{
    padding-left: 1vw;
}
.ContactContent .box .title{
    font-size: clamp(4rem, 1vw + 0.5rem, 5rem);
    margin-bottom: 20px;
}
.ContactContent .box .lead{
    font-size: clamp(1.2rem, 1vw + 0.5rem, 1.4rem);
    line-height: 1.5;
}
.ContactContent .box .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 16px 35px;
    font-size: clamp(1.5rem, 1vw + 0.5rem, 1.8rem);
    font-weight: bold;
    max-width: 356px;
    box-sizing: border-box;
}
.ContactContent .box .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--colorMain);
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translate(0%, -50%);
}
@media (max-width: 768px) {
    .ContactContent{
        padding: 13.3vw 6vw;
    }
    .ContactContent .box{
        flex-direction: column;
        padding: 7vw 6.3vw;
        align-items: flex-start;
    }
    .ContactContent .box .text{
        padding-left: 0;
    }
    .ContactContent .box .title{
        font-size: clamp(3rem, 5.3vw, 4rem);
        margin-bottom: 10px;
    }
    .ContactContent .box .lead{
        font-size: clamp(1.2rem, 1.8vw, 1.4rem);
        margin-bottom: 20px;
    }
    .ContactContent .box .btn{
        padding: 3vw 5vw;
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
        width: 100%;
    }
}


/*------------------------------
MESSAGE
------------------------------*/
.messageContent{
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}
.messageContent .box{
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    display: flex;
    background: var(--colorGradeRightTop);
    justify-content: center;
}
.messageContent .leftBox{
    position: relative;
    /* width: 55%; */
    width: 40%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    max-width: 1020px;
}
.messageContent .leftBox .photoWrap{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; height: 100%;
}
.messageContent .leftBox .photo01{
    width: 100%;
    max-width: 1020px;
    /* width: auto; */
    object-fit: cover;
    height: inherit;
}
.messageContent .leftBox:before{
    content: "";
    width: 20px; height: 100%;
    background-color: var(--colorAccent);
    position: absolute;
    left: 0;top: 0;
    z-index: 1;
}
.messageContent .rightBox{
    position: relative;
    /* padding: 80px 60px 100px 60px; */
    padding: 4vw 4vw 5vw 4vw;
    background: var(--colorGradeRightTop);
    color: var(--colorWhite);
    width: 60%;
    max-width: 800px;
}
.messageContent .rightBox .title{
    /* margin-bottom: 50px; */
    margin-bottom: 35px;
    line-height: 1.6;
    position: relative;
    top: 0;
    left: -9vw;
}
.messageContent .rightBox .title p{
    padding: 20px;
    font-size: clamp(2.2rem, 1.45vw, 3.2rem);
    color: var(--colorMain);
    box-decoration-break: clone;
}
.messageContent .rightBox .text{
}
.messageContent .rightBox .text .lead{
    /* margin-bottom: 35px;
    font-size: clamp(1.4rem, 1vw + 0.5rem, 1.6rem);
    line-height: 2; */
    margin-bottom: 20px;
    font-size: clamp(1.2rem, 1vw + 0.5rem, 1.4rem);
    line-height: 2;
}
.messageContent .rightBox .text .lead:last-child{
    margin-bottom: 0px;
}
.messageContent .rightBox .text .company{
    font-size: clamp(1.6rem, 1vw + 0.5rem, 2.2rem);
    margin-bottom: 20px;
    line-height: 1.5;
}
.messageContent .rightBox .text .post{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.messageContent .rightBox .text .post span{
    display: block;
    padding: 6px;
    background: var(--colorAccent);
    font-size: 1.2rem;
    color: var(--colorMain);
    margin-right: 4px;
}
.messageContent .rightBox .text .name{
    font-size: clamp(3rem, 1vw + 0.5rem, 4rem);
    margin-top: 20px;
}
@media (max-width: 768px) {
    .messageContent .box{
        flex-direction: column;
    }
    .messageContent .leftBox{
        width: 100%;
    }
    .messageContent .leftBox .photoWrap{
        padding-left: 20px;
    }
    .messageContent .leftBox .photoWrap img{
        width: 100%;
    }
    .messageContent .rightBox{
        padding: 8vw 6vw 10vw 6vw;
        width: 100%;
    }
    .messageContent .rightBox .title{
        left: 0;
        margin-bottom: 4.6vw;
    }
    .messageContent .rightBox .title p{
        padding: 5px 10px;
        font-size: clamp(1.8rem, 3.2vw, 2.4rem);
        line-height: 1.5;
    }
    .messageContent .rightBox .text .lead{
        margin-bottom: 5.6vw;
        font-size: clamp(1.3rem, 1.8vw, 1.4rem);
    }
    .messageContent .rightBox .text .post span{
        font-size: clamp(1rem, 1.6vw, 1.2rem);
    }
    .messageContent .rightBox .text .name{
        margin-top: 3.6vw;
        font-size: clamp(3.2rem, 5.3vw, 4rem);
    }
}


/*------------------------------
STUDIO
------------------------------*/
.studioContent{
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}
.studioContent .box{
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    display: flex;
    background: var(--colorGradeRightTop);
    justify-content: center;
}
.studioContent .leftBox{
    position: relative;
    /* width: 50%; */
    width: 45%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    max-width: 1020px;
}
.studioContent .leftBox .photoWrap{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; height: 100%;
}
.studioContent .leftBox .studioPhoto{
    width: 100%;
    max-width: 1020px;
    object-fit: cover;
    height: inherit;
}
.studioContent .leftBox:before{
    content: "";
    width: 20px; height: 100%;
    background-color: var(--colorAccent);
    position: absolute;
    left: 0;top: 0;
    z-index: 1;
}
.studioContent .rightBox{
    position: relative;
    /* width: 50%; */
    width: 55%;
    padding: 2vw 3vw 2vw 3vw;
    background-color: var(--colorGradeRightTop);
    box-sizing: border-box;
    background-size: 200% 200%;
    animation: bgWave 15s ease-in-out infinite;
    overflow: hidden;
}
.studioContent .rightBox .photoList{
    margin: 0;
    padding: 0;
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.studioContent .rightBox .photoList li{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--colorWhite);
    height: auto;
}
@media (max-width: 768px) {
    .studioContent .box{
        flex-direction: column;
    }
    .studioContent .leftBox{
        width: 100%;
    }
    .studioContent .leftBox .studioPhoto{
        width: 100%;
    }
    .studioContent .rightBox{
        width: 100%;
        padding: 8vw 6vw;
    }
    .studioContent .rightBox .photoList{
        gap: 10px;
        grid-template-columns: repeat(5, 1fr);
    }
}


/*------------------------------
COMPANY
------------------------------*/
.companyContent{
    /* padding: 150px 0; */
    padding: 80px 0;
    background: var(--colorGray);
}
.companyContent .innerBox{
    width: 100%;
    max-width: 1064px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.companyContent .innerBox .map{
    border: 4px solid #ffffff;
}
.companyContent .innerBox .map iframe{
    width: 100%;
    /* height: 543px; */
    height: 405px;
}
.companyContent .innerBox .box{
    display: flex;
    justify-content: space-between;
    margin: 50px auto 0;
}
.companyContent .leftBox{
    width: 56%;
    max-width: 515px;
}
.companyContent .leftBox .list{
    display: flex;
    margin: 0;
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
    border-bottom: 1px solid var(--colorMain);
    /* margin-bottom: 40px;
    padding-bottom: 25px; */
    margin-bottom: 20px;
    padding-bottom: 15px;
}
.companyContent .leftBox .list dt{
    color: var(--colorMain);
    /* font-size: 1.8rem; */
    font-size: 1.5rem;
    font-weight: bold;
    /* width: 20%; */
    width: 18%;
    max-width: 125px;
    margin-right: 20px;
    line-height: 1.5;
}
.companyContent .leftBox .list dd{
    color: var(--colorMain);
    /* font-size: 1.4rem; */
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
    padding-top: 4px;
}
.companyContent .rightBox{
    width: 40%;
    max-width: 440px;
}
.companyContent .rightBox .title{
    color: var(--colorMain);
    border-bottom: 1px solid var(--colorMain);
    /* font-size: 2.2rem;
    margin-bottom: 20px;
    padding-bottom: 25px; */
    font-size: 1.8rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    font-weight: bold;
}
.companyContent .rightBox .list{
    margin: 0;
    padding: 0;
}
.companyContent .rightBox .list .item{
    position: relative;
    color: var(--colorMain);
    font-weight: bold;
    /* font-size: 1.4rem;
    padding-bottom: 14px;
    margin-bottom: 14px; */
    font-size: 1.3rem;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dotted var(--colorMain);
}
.companyContent .rightBox .list .item:last-child{
    margin-bottom: 0px;
}
.companyContent .rightBox .list .item span:before{
    content: "";
    display: inline-block;
    width: 14px; height: 14px;
    background-color: var(--colorMain);
    margin-right: 6px;
    vertical-align: middle;
}
@media (max-width: 768px) {
    .companyContent{
        padding: 20vw 0;
    }
    .companyContent .innerBox{
        padding: 0 6vw;
    }
    .companyContent .innerBox .map iframe{
        height: 80vw;
        max-height: 343px;
    }
    .companyContent .innerBox .box{
        margin: 8vw auto 0;
        flex-direction: column;
    }
    .companyContent .leftBox{
        width: 100%;
        max-width: 100%;
    }
    .companyContent .leftBox .list{
        margin-bottom: 6vw;
        padding-bottom: 6vw;
        flex-direction: column;
    }
    .companyContent .leftBox .list dt{
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
        width: 90%;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 3vw;
        line-height: 1.4;
        margin: 0 auto 3vw;
    }
    .companyContent .leftBox .list dd{
        font-size: clamp(1.2rem, 1.86vw, 1.4rem);
        width: 90%;
        margin: 0 auto;
        padding-top: 0px;
    }
    .companyContent .rightBox{
        margin-top: 5vw;
        width: 100%;
        max-width: 100%;
    }
    .companyContent .rightBox .title{
        margin-bottom: 4vw;
        padding-bottom: 4vw;
        font-size: clamp(1.8rem, 2.93vw, 2.2rem);
    }
    .companyContent .rightBox .list .item{
        padding-bottom: 2.6vw;
        margin-bottom: 2.6vw;
        font-size: clamp(1.2rem, 1.86vw, 1.4rem);
        line-height: 1.5;
        padding-left: 4vw;
        padding-right: 4vw;
    }
    .companyContent .rightBox .list .item span:before{
        display: none;
    }
}

/*------------------------------
WORKS
------------------------------*/
.worksContent{
    background-color: var(--colorGradeRightTop);
    background-size: 200% 200%;
    animation: bgWave 15s ease-in-out infinite;
    overflow: hidden;
}
.worksContent .worksList{
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}
.worksContent .worksList .list {
    padding: 120px 0;
    margin: 0;
    text-align: center;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
}
.worksContent .worksList .list li {
    position: relative;
    margin: 0;
    width: 100%;
    border-right: 2px solid #ffffff;
    box-sizing: border-box;
    max-width: 470px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.worksContent .worksList .list li:nth-child(3n) {
    border-right: 2px solid transparent;
}
.worksContent .worksList .list li:nth-child(3n + 1)::after,
.worksContent .worksList .list li:nth-child(3n)::after {
    content: "";
    position: absolute;
    left: -50vw;
    right: -50vw;
    bottom: 0;
    height: 2px;
    background: #ffffff;
    z-index: 1;
}
.worksContent .worksList .list li:nth-last-child(-n + 3)::after {
    display: none;
}
.worksContent .worksList .list .link{
    display: block;
    margin: 0 auto;
    padding: 40px 50px;
    width: 100%; height: inherit;
}

/* 画像ラップ要素 */
.worksContent .worksList .list .jissekiPhotoWrap {
  width: 80%;
  max-width: 232px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
}
/* 各画像共通 */
.worksContent .worksList .list .jissekiPhotoWrap .jissekiPhoto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
  border: 4px solid #ffffff;
  box-sizing: border-box;
}
/* 表示中の画像 */
.worksContent .worksList .list .jissekiPhotoWrap .jissekiPhoto.active {
  opacity: 1;
  position: absolute;
}
.worksContent .worksList .list img {
    display: block;
}
.worksContent .worksList .list .jissekiTitle{
    color: var(--colorAccent);
    font-weight: bold;
    font-size: clamp(1.3rem, 1vw + 0.5rem, 1.6rem);
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px;
    line-height: 1.4;
    letter-spacing: 1px;
}
.worksContent .worksList .list .jissekiText{
    font-size: clamp(1rem, 1vw + 0.5rem, 1.2rem);
    text-align: center;
    line-height: 1.6;
    color: var(--colorWhite);
    box-sizing: border-box;
    letter-spacing: 0px;
}
.worksContent .worksList .list .transaction{
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.worksContent .worksList .list .data{
    font-size: clamp(0.9rem, 1vw + 0.5rem, 1.1rem);
    color: var(--colorMain);
    background: var(--colorAccent);
    padding: 6px 5px;
    letter-spacing: 0px;
}
.worksContent .worksList .list .comcompany{
    margin-left: 5px;
    font-size: clamp(1rem, 1vw + 0.5rem, 1.2rem);
    font-weight: bold;
    color: var(--colorWhite);
    text-align: left;
    line-height: 1.3;
}
.worksContent .worksList .list .charge{
    margin: 0;
    margin-top: 10px;
}
.worksContent .worksList .list .charge dt{
    font-size: clamp(1rem, 1vw + 0.5rem, 1.2rem);
    font-weight: bold;
    padding: 6px;
    color: var(--colorMain);
    background: var(--colorAccent);
}
.worksContent .worksList .list .charge dd{
    border: 1px solid var(--colorAccent);
    color: var(--colorWhite);
    font-size: clamp(0.9rem, 1vw + 0.5rem, 1.1rem);
    font-weight: bold;
    padding: 6px 10px;
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 768px) {
    .worksContent .worksList .list{
        padding: 8vw 0;
        grid-template-columns: repeat(2, auto);
    }
    .worksContent .worksList .list .link{
        padding: 5.3vw 6.6vw;
    }
    .worksContent .worksList .list .jissekiPhotoWrap{
        width: 100%;
    }
    .worksContent .worksList .list li:nth-child(3n){
        border-right: 2px solid #ffffff;
    }
    .worksContent .worksList .list li:nth-child(2n){
        border-right: 2px solid transparent;
    }
    .worksContent .worksList .list .jissekiPhotoWrap .jissekiPhoto{
        border: 3px solid #ffffff;
    }
    .worksContent .worksList .list .jissekiTitle{
        font-size: clamp(1.2rem, 1.86vw, 1.4rem);
        margin-top: 5vw;
        margin-bottom: 3vw;
    }
    .worksContent .worksList .list .jissekiText{
        font-size: clamp(1rem, 1.6vw, 1.2rem);
    }
    .worksContent .worksList .list .transaction{
        margin-top: 3vw;
        flex-direction: column;
        gap: 6px;
    }
    .worksContent .worksList .list .comcompany{
        margin-left: 0px;
        font-size: clamp(1rem, 1.6vw, 1.2rem);
    }
    .worksContent .worksList .list .charge dt{
        font-size: clamp(1rem, 1.6vw, 1.2rem);
    }
    .worksContent .worksList .list .charge dd{
        font-size: clamp(0.9rem, 1.46vw, 1.1rem);
        text-align: left;
    }
}

/*------------------------------
RECRUIT
------------------------------*/
.recruitContent{
    /* padding: 150px 0; */
    padding: 80px 0;
    background: var(--colorGray);
}
.recruitContent .innerBox{
    width: 100%;
    max-width: 1064px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.recruitContent .innerBox .list{
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    color: var(--colorMain);
    border-bottom: 1px solid var(--colorMain);
    /* padding-bottom: 45px; */
    margin: 0;
    /* margin-bottom: 45px; */
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.recruitContent .innerBox .list:last-child{
    margin-bottom: 0;
}
.recruitContent .innerBox .list dt{    
    /* font-size: clamp(1.7rem, 1vw + 0.5rem, 2rem); */
    font-size: clamp(1.2rem, 1vw + 0.5rem, 1.5rem);
    font-weight: bold;
    /* width: 15%; */
    width: 10%;
    max-width: 120px;
    margin-right: 50px;
    line-height: 1.5;
}
.recruitContent .innerBox .list dd{
    /* font-size: clamp(1.2rem, 1vw + 0.5rem, 1.4rem); */
    font-size: clamp(1rem, 1vw + 0.5rem, 1.3rem);
    font-weight: bold;
    width: 75%;
    margin: 0;
    /* line-height: 1.9; */
    line-height: 1.6;
}
.recruitContent .innerBox .list p{
    margin-bottom: 22px;
}
.recruitContent .innerBox .list p:last-child{
    margin-bottom: 0px;
}
@media (max-width: 768px) {
    .recruitContent{
        padding: 20vw 0;
    }
    .recruitContent .innerBox{
        padding: 0 6vw;
    }
    .recruitContent .innerBox .list{
        flex-direction: column;
        padding-bottom: 6vw;
        margin-bottom: 6vw;
    }
    .recruitContent .innerBox .list dt{
        font-size: clamp(1.5rem, 2.26vw, 1.7rem);
        width: 90%;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 3vw;
        line-height: 1.4;
        margin: 0 auto 3vw;
    }
    .recruitContent .innerBox .list dd{
        font-size: clamp(1rem, 1.6vw, 1.2rem);
        width: 90%;
        margin: 0 auto;
    }
}

/*------------------------------
PRIVACY
------------------------------*/
.privacyContent{
    /* padding: 150px 0; */
    padding: 80px 0;
    background: var(--colorGray);
}
.privacyContent .innerBox{
    width: 100%;
    max-width: 1064px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.privacyContent .innerBox .list{
    margin: 0;
    /* margin-bottom: 45px;
    padding-bottom: 45px; */
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--colorBlack);
}
.privacyContent .innerBox .list:last-child{
    margin-bottom: 0px;
}
.privacyContent .innerBox .list:first-child{
    /* padding-top: 45px; */
    padding-top: 20px;
    border-top: 1px solid var(--colorBlack);
}
.privacyContent .innerBox .list dt{
    display: flex;
    width: 100%;
    line-height: 1.5;
    /* margin-bottom: 30px; */
    margin-bottom: 10px;
}
.privacyContent .innerBox .list dt .number{
    /* font-size: 2.2rem; */
    font-size: 1.7rem;
    font-weight: bold;
    margin-right: 15px;
}
.privacyContent .innerBox .list dt .text{
    /* font-size: 2rem; */
    font-size: 1.5rem;
    font-weight: bold;
}
.privacyContent .innerBox .list dd{
    /* font-size: 1.4rem;
    line-height: 2; */
    font-size: 1.2rem;
    line-height: 1.7;
    margin: 0;
}
@media (max-width: 768px) {
    .privacyContent{
        padding: 20vw 0;
    }
    .privacyContent .innerBox{
        padding: 0 6vw;
    }
    .privacyContent .innerBox .list{
        margin-bottom: 6vw;
        padding-bottom: 6vw;
    }
    .privacyContent .innerBox .list:first-child{
        padding-top: 6vw;
    }
    .privacyContent .innerBox .list dt{
        margin-bottom: 4vw;
    }
    .privacyContent .innerBox .list dt .number{
        font-size: clamp(1.8rem, 2.93vw, 2.2rem);
    }
    .privacyContent .innerBox .list dt .text{
        font-size: clamp(1.6rem, 2.66vw, 2rem);
    }
    .privacyContent .innerBox .list dd{
        font-size: clamp(1.2rem, 1.8vw, 1.4rem);
        line-height: 1.7;
    }
}


/*------------------------------
CONTACT
------------------------------*/
.contactPage{
    /* padding: 150px 0; */
    padding: 80px 0;
    background: var(--colorGray);
}
.contactPage .innerBox{
    width: 100%;
    /* max-width: 1064px; */
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.contactPage .innerBox .list{
    /* margin-bottom: 50px; */
    margin-bottom: 30px;
    margin-top: 0;
    display: flex;
    justify-content: space-between;
}
.contactPage .innerBox .list dt{
    position: relative;
    max-width: 188px;
    /* width: 30%;
    font-size: 2rem; */
    width: 25%;
    font-size: 1.7rem;
}
.contactPage .innerBox .list dt .arrow_box{
    position: absolute;
    padding: 10px 5px;
    background: var(--colorAccent);
    font-size: 1rem;
    color: var(--colorBlack);
    left: 0;
    bottom: 46px;
    box-sizing: border-box;
    line-height: 1.4;
}
.contactPage .innerBox .list dt .arrow_box:after{
    top: 100%;
    left: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(242, 235, 0, 0);
    border-top-color: var(--colorAccent);
    border-width: 7px;
    margin-left: 0px;
}
.contactPage .innerBox .list dd{
    width: 70%;
    max-width: 840px;
    border-bottom: 1px solid #A5A5A5;
    /* padding: 0 15px 25px 15px; */
    padding: 0 10px 15px 10px;
}
.contactPage .innerBox .textareaArea dd{
    border-bottom: none;
}
.contactPage .innerBox .textareaArea{
    margin-bottom: 0;
}
.contactPage .innerBox .list dd input,
.contactPage .innerBox .list textarea{
    font-size: 1.4rem;
    border: 0;
    background: no-repeat;
    width: 100%;
    padding: 5px;
    color: #A5A5A5;
}
.contactPage .innerBox .list textarea{
    border: 1px solid #A5A5A5;
    background: #FFFFFF;
    border-radius: 8px;
    margin-bottom: 0px;
    /* padding: 20px;
    min-height: 310px; */
    padding: 15px;
    min-height: 260px;
}

.contactPage .innerBox .btn{
    position: relative;
    display: block;
    align-items: center;
    padding: 22px 45px;
    font-size: 1.8rem;
    font-weight: bold;
    max-width: 409px;
    box-sizing: border-box;
    /* margin: 100px auto 0; */
    margin: 50px auto 0;
    border: 2px solid #497AE8;
    background: #2EEFFF;
    color: #497AE8;
    letter-spacing: 2px;
    width: 100%;
}
.contactPage .innerBox .arrow{
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--colorMain);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0%, -50%);
}
.contactPage .content_contact_btn_box_ul{
    display: flex;
    align-items: center;
    /* margin: 80px auto 0; */
    margin: 50px auto 0;
    justify-content: center;
    gap: 30px;
}
.contactPage .content_contact_btn_box_ul .btn_gray{
    position: relative;
    display: block;
    padding: 14px 60px;
    font-size: 1.6rem;
    font-weight: bold;
    max-width: 409px;
    box-sizing: border-box;
    border: 2px solid #5a5a5a;
    background: #7f7f7f;
    color: #ffffff;
    letter-spacing: 2px;
    width: 100%;
    cursor: pointer;
}
.contactPage .content_contact_btn_box_ul .btn_blue{
    position: relative;
    display: block;
    padding: 14px 60px;
    font-size: 1.6rem;
    font-weight: bold;
    max-width: 409px;
    box-sizing: border-box;
    border: 2px solid var(--colorMain);
    background: var(--colorAccent);
    color: var(--colorMain);
    letter-spacing: 2px;
    width: 100%;
    cursor: pointer;
}
.contactPage .contact_comp_ttl{
    text-align: center;
    font-size: 1.8rem;
    margin: 0 auto 30px;
    line-height: 1.5;
}
.contactPage .contact_comp_text{
    text-align: center;
    line-height: 1.8;
}
.contactPage .innerBox .comp_btn{
    position: relative;
    display: block;
    align-items: center;
    padding: 22px 45px;
    font-size: 1.5rem;
    font-weight: bold;
    max-width: 388px;
    box-sizing: border-box;
    margin: 80px auto 0;
    border: 2px solid #497AE8;
    background: #2EEFFF;
    color: #497AE8;
    letter-spacing: 2px;
    width: 100%;
    text-align: center;
}
@media (max-width: 768px) {
    .contactPage{
        padding: 20vw 0;
    }
    .contactPage .innerBox{
        padding: 0 6vw;
    }
    .contactPage .innerBox .list{
        flex-direction: column;
        margin-bottom: 8.6vw;
    }
    .contactPage .innerBox .list dt{
        width: 100%;
        font-size: clamp(1.6rem, 2.66vw, 2rem);
        margin-bottom: 3vw;
        max-width: 100%;
    }
    .contactPage .innerBox .list dd{
        width: 100%;
        margin: 0;
        padding: 0 2vw 2.3vw 0;
    }
    .contactPage .innerBox .list dd input,
    .contactPage .innerBox .list textarea{
        font-size: clamp(1.3rem, 2.13vw, 1.6rem);
    }
    .contactPage .innerBox .list textarea{
        padding: 2.66vw;
    }
    .contactPage .innerBox .btn{
        padding: 2.93vw 6vw;
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
        margin: 13.3vw auto 0;
        width: 90%;
    }
    .contactPage .innerBox .list dt .arrow_box{
        bottom: -4px;
        right: 0;
        left: auto;
    }
    .contactPage .content_contact_btn_box_ul{
        flex-direction: column;
        gap: 20px;
        padding: 0;
        margin: 10.6vw auto 0;
    }
    .contactPage .content_contact_btn_box_ul li{
        width: 90%;
    }
    .contactPage .content_contact_btn_box_ul .btn_gray{
        padding: 2.93vw 6vw;
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
    }
    .contactPage .content_contact_btn_box_ul .btn_blue{
        padding: 2.93vw 6vw;
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
    }

    .contactPage .contact_comp_ttl{
        font-size: clamp(1.8rem, 2.93vw, 2.2rem);
        margin: 0 auto 4vw;
    }
    .contactPage .contact_comp_text{
        font-size: clamp(1.3rem, 2.13vw, 1.6rem);
    }
    .contactPage .innerBox .comp_btn{
        padding: 2.93vw 6vw;
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
        margin: 10.3vw auto 0;
        width: 90%;
    }
}

/*------------------------------
EVENT
------------------------------*/
.eventContent{
    background: var(--colorGradeRightTop);
}
.eventContent .eventList{
    width: 100%;
    max-width: 1920px;
    padding: 150px 20px;
    margin: 0 auto;
}
.eventContent .eventList .box{
    background: var(--colorWhite);
    position: relative;
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 80px;
    border-radius: 42px;
    width: 100%;
    max-width: 1098px;
    padding: 50px 65px;
}
.eventContent .eventList .box:last-child{
    margin: 0 auto 0px;
}
.eventContent .eventList .box .leftBox dl{
    margin: 0;
    margin-top: 25px;
}
.eventContent .eventList .box .leftBox dl:first-child{
    margin-top: 0px;
}
.eventContent .eventList .box .leftBox dl dt{
    font-size: 1.8rem;
    padding-bottom: 5px;
    line-height: 1.4;
}
.eventContent .eventList .box .leftBox dl dd{
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.5;
}
.eventContent .eventList .leftBox .btn{
    position: relative;
    display: block;
    align-items: center;
    padding: 22px 45px;
    font-size: 1.8rem;
    font-weight: bold;
    max-width: 378px;
    box-sizing: border-box;
    margin-top: 25px;
    border: 2px solid #497AE8;
    background: #2EEFFF;
    color: #497AE8;
    letter-spacing: 2px;
    width: 100%;
    text-align: center;
    border-radius: 40px;
    line-height: 1.3;
}
.eventContent .eventList .leftBox .arrow{
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--colorMain);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0%, -50%);
}
.eventContent .eventList .box .rightBox .photo{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.eventContent .eventList .box .rightBox .eventPhoto{
    width: 100%;
}
.eventContent .eventList .box .photoListMode .eventPhoto{
    max-height: 337px;
}
.eventContent .eventList .box .rightBox .photoList{
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 5px;
}
.eventContent .eventList .box .rightBox .photoList li{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--colorWhite);
    height: auto;
    aspect-ratio: 4 / 4.5;
}
.eventContent .eventList .box .rightBox .photoList li .eventPhotoList{
    width: 100%; height: 100%;
    object-fit: cover;
    scale: 1.3;
}
.eventContent .eventList .box .rightBox .eventPhoto.fadein {
    animation: fadeInSlide 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
.eventContent .eventList .box .rightBox .eventPhoto.fadeout {
    animation: fadeOut 0.3s ease forwards;
}
@keyframes fadeInSlide {
    0% {
        opacity: 0;
        transform: translateX(30px);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@media (max-width: 768px) {
    .eventContent .eventList{
        padding: 20vw 6vw;
    }
    .eventContent .eventList .box{
        grid-template-columns: repeat(1, 1fr);
        margin: 0 auto 8vw;
        column-gap: 30px;
        padding: 8.66vw 8.6vw;
    }
    .eventContent .eventList .box .leftBox dl{
        margin-top: 3.33vw;
    }
    .eventContent .eventList .box .leftBox dl dt{
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
    }
    .eventContent .eventList .box .leftBox dl dd{
        font-size: clamp(1.3rem, 1.8vw, 1.4rem);
    }
    .eventContent .eventList .leftBox .btn{
        padding: 2.9vw 6vw;
        font-size: clamp(1.6rem, 2.4vw, 1.8rem);
        margin-top: 6.3vw;
    }
    .eventContent .eventList .box .rightBox{
        margin-top: 6.3vw;
    }
    .eventContent .eventList .box .photoListMode .eventPhoto{
        max-height: 217px;
    }
    .eventContent .eventList .box .rightBox .photoList{
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
        margin-top: 10px;
    }
}