@charset "utf-8";

/* **************
TOP-common PC
************** */
.topAbout, .topService {
    padding: 120px 30px;
}
.spBr {
    display: none;
}

@media screen and (max-width: 768px){
    .topAbout, .topService {
        padding:  60px 30px;
    }
    .spBr {
        display: inline;
    }
    .pcBr {
        display: none;
    }
}/* TOP-common sp */


/* **************
TOP-header PC
************** */
.mainVisual {
    padding: 60px 0px;
    position: relative;
}
.mainVisual::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 40%;
    height: 99%;
    background: #FFF;
    z-index: 5;
}
.mainVisual__left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding-left: 8.3%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
}
.mainVisual__topic h2 {
    color: var(--font_black, #27210C);
    text-shadow: 0px 4px 4px rgba(255, 255, 255, 0.20);
    font-family: "Shippori Mincho";
    font-style: normal;


    font-weight: 400;
    font-size: 6.4rem;
    letter-spacing: 0.05em;
}
.mainVisual__topic span {
    font-size: 6rem;
}
/* headerCopy */

.mainVisual__scroll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    width: 175px;
    height: 96px;
    transform: translateX(20%);
}
.scrollArrow {
    transform: translateX(-19px);
}
.chevron {
    position: absolute;
    width: 38px;
    height: 8px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: move 3s ease-out infinite;
}
.chevron:first-child {
    animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
    animation: move 3s ease-out 2s infinite;
}
.chevron:before,
.chevron:after {
    content: ' ';
    position: absolute;
    top: -20px;
    height: 100%;
    width: 51%;
    background: var(--base_blue, #1D3760);
}
.chevron:before {
    left: 0;
    transform: skew(0deg, 30deg);
}
.chevron:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg);
}
@keyframes move {
25% {
    opacity: 1;
}
33% {
    opacity: 1;
    transform: translateY(30px);
}
67% {
    opacity: 1;
    transform: translateY(40px);
}
100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
}
}
.scrollTxt {
    display: block;
    margin-bottom: 5px;
    font-family: "Hiragino Kaku Gothic StdN";
    font-size: 2rem;
    font-weight: 800;
    color: var(--base_blue, #1D3760);
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.5;
    animation: pulse 2s linear alternate infinite;
}
@keyframes pulse {
to {
    opacity: 1;
}
}
/* scrollDown */

.mainVisual__sliderWrap {
    display: flex;
    overflow: hidden;
}
.mainVisual__sliderList {
    display: flex;
    list-style: none;
    padding: 0;
    animation: infinity-scroll-left 60s infinite linear 0.5s both;
}
.mainVisual__sliderItem {
    width: 62vw;
    margin-right: 4.2%;
    height: 100%;
    aspect-ratio: 400 / 300;
    overflow: hidden;
    object-fit: cover;
}
.mainVisual__sliderItem>img {
    width: 100%;
    height: 100%;
}
@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
    }
/* loopSlider */

.recruitBtn {
    background-color: var(--accent-yellow, #FFD43B);
    border-radius: 50%;
    width:  13.8vw;
    height: 13.8vw; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--base_white, #FFF);
    text-shadow: 4px 4px 4px rgba(74, 74, 74, 0.10);
    text-align: center;
    position: absolute;
    bottom: -20px;
    right: 50px;
    z-index: 10;
	animation: kodou 5s ease-in-out infinite;
}
.recruitBtn::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 17.5%;
    height: 19%;
    margin: 0 0 -5px -5px;
    background: url(../images/btnTriangle.svg) 0 0 no-repeat;
    background-size: contain;
    transition: all .4s;
}
.recruitBtnCircle {
    position: absolute;
    top: -63%;
    right: -5%;
    width:  15.2vw;
    height: 15.2vw; 
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(rgba(255, 212, 59, 1) 0deg 80deg, transparent 80deg 90deg, rgba(255, 212, 59, 1) 90deg 170deg, transparent 170deg 180deg, rgba(255, 212, 59, 1) 180deg 260deg, transparent 260deg 270deg, rgba(255, 212, 59, 1) 270deg 350deg, transparent 350deg 360deg);
    mask: radial-gradient(circle, transparent 70%, black 0%);
    animation: rotate-border 3s linear infinite;
}
.recruitBtnTitle {
    position: relative;
    font-size: 1.25vw;
}
.recruitBtnTitle span {
    /* font-size: 2.8rem; */
    font-size: 1.94vw;
    font-weight: 700;
}
@keyframes kodou {
    0%, 100% { 
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
    }
    50% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
}
@keyframes rotate-border {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
/* recruitBtn */

@media screen and (max-width: 768px){
    .mainVisual {
        padding: 40px 0 30px 0;
    }
    .mainVisual__left {
        padding-left: 7.8%;
    }
    .mainVisual__topic h2 {
        font-size: 3.5rem;
    }
    .mainVisual__topic span {
        font-size: 3.3rem;
    }
    .scrollTxt {
        font-size: 1.4rem;
    }
    .mainVisual__sliderItem {
        width: 60vw;
        margin-right: 2%;
    }       
    .recruitBtn {
        display: none;
    }
}/* TOP-mv tablet */

@media screen and (max-width: 425px){
    .mainVisual::before {
        width: 50%;
    }
    .mainVisual__left {
        gap: 0;
    }
    .mainVisual__topic h2 {
        font-size: 2.4rem;
    }
    .mainVisual__topic span {
        font-size: 2.2rem;
    }
    .mainVisual__scroll {
        width: 75px;
        height: 56px;
    }
    .scrollTxt {
        font-size: 1rem;
    }
    .chevron {
        width: 20px;
        height: 5px;
    }
    @keyframes move {
        25% {
            opacity: 1;
        }
        33% {
            opacity: 1;
            transform: translateY(20px);
        }
        67% {
            opacity: 1;
            transform: translateY(30px);
        }
        100% {
            opacity: 0;
            transform: translateY(45px) scale3d(0.5, 0.5, 0.5);
        }
    }
}


/* **************
TOP-about PC
************** */
.topAbout {
    background-color: var(--base_blue, #1D3760);
    position: relative;
}
.topAboutInner {
    max-width: 1040px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    gap: 30px;
    padding: 0 30px;
}
.enTitle--about {
    position: absolute;
    top: 340px;
    right: -340px;
    border-bottom: 1px solid rgba(215, 214, 216, 0.30);
    color: rgba(215, 214, 216, 0.20);
    font-family: "Hiragino Kaku Gothic StdN";
    font-size: 10rem;
    font-weight: 800;
    line-height: 1;
    rotate: 90deg;
}
.topAbout__title {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 2%;
}
.topAbout__title h3 {
    display: inline-block;
    white-space: nowrap;
}
.mainCopy {
    color: var(--base_white, #FFF);
    font-family: "Zen Kaku Gothic New";
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.2;
}
.mainCopy__secondline {
    margin-top: -20px;
}
.bigLetter {
    font-size: 6rem;
}
.number {
    color: var(--accect_yellow, #FFD43B);
    font-size: 8.2rem;
    font-family: 'Noto Sans JP';
}
.smallLetter {
    font-size: 4.2rem;
}
.topAbout__movie {
    width: 43vw;
}
.topAbout__detail {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 30px;
}
.topAbout__txt {
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--font_white, #D7D6D8);
    font-size: 1.8rem;
    line-height: 2; 
}

@media screen and (max-width: 1024px) {
    .mainCopy {
        font-size: 4rem;
    }
    .mainCopy__secondline {
        margin-top: -20px;
    }
    .mainCopy__secondline {
        margin-top: -10px;
    }
    .bigLetter {
        font-size: 5rem;
    }
    .number {
        color: var(--accect_yellow, #FFD43B);
        font-size: 6rem;
    }
    .smallLetter {
        font-size: 3rem;
    }
}/* TOP-about tablet */
@media screen and (max-width: 768px) {
    .enTitle--about {
        position: absolute;
        content: "ABOUT SETO";
        top: 170px;
        right: -170px;
        font-size: 5rem;
    }
    .topAboutInner {
        max-width: 640px;
        padding: 0 15px;
    }
    .topAbout__title {
        flex-direction: column;
        gap: 30px;
    }
    .mainCopy {
        font-size:  2.4rem;
        line-height: 1.3;
    }
    .mainCopy__secondline {
        margin-top: -20px;
    }
    .bigLetter {
        font-size: 2.8rem;
    }
    .number {
        font-size: 5rem;
    }
    .smallLetter {
        font-size: 2rem;
    }
    .topAbout__detail {
        gap: 15px;
    }
    .topAbout__txt {
        gap: 15px;
        font-size: 1.2rem;
    }
    .mainCopy {
        width: 100%;
    }
    .topAbout__movie {
        width: 100%;
        max-width: 100%;
    }
}/* TOP-about sp */


/* **************
TOP-service PC
************** */
.topService {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.enTitle {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: auto;
    width: 65%;
    border-bottom: 1px solid rgba(215, 214, 216, 0.30);
    color: rgba(215, 214, 216, 0.20);
    font-family: "Hiragino Kaku Gothic StdN";
    font-size: 10rem;
    font-weight: 800;
    line-height: 1;
}
.topServiceInner {
    max-width: 1040px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 0 30px;
}
.topService__image {
    width: 50%;
    margin-left: -10%;
    margin-top: -20%;
    background-size: contain;
}
.topServiceWrapper {
    display: flex;
    flex-direction: column;
    padding-top: 60px;
    gap: 30px;
    width: 60%;
}
.topService__mainCopy {
    color: var(--base_blue, #1D3760);
    font-family: "Zen Kaku Gothic New";
    font-size: 5rem;
    font-weight: 700;
}
.topService__txt {
    font-size: 1.8rem;
    line-height: 2;
    margin-bottom: 30px;
}
.topService__imageSp {
    display: none;
}

@media screen and (max-width: 768px) {
    .enTitle {
        top: 0;
        left: 0;
        margin-left: 0;
        width: 100%;
        font-size: 5rem;
    }
    .topServiceInner {
        max-width: 640px;
        flex-direction: column;
        padding: 0 15px;
        align-items: center;
        }
    .topService__image {
       display: none;
    }
    .topServiceWrapper {
        padding-top: 0;
        width: 100%;
    }
    .topService__mainCopy {
        font-size: 2.5rem;
    }
    .topService__txt {
        font-size: 1.2rem;
        margin-bottom:  0;
    }
    .blueBtn--service {
        margin-left: auto;
    }
    .topService__imageSp {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 400 / 300;
    }
    .topService__imageSp img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* **************
TOP-recruit PC
************** */
.topRecruit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;  
    padding: 150px 30px 60px;
    background-image: url(../images/mainVisual__sliderItem--2.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color:rgba(255,255,255,0.4);
    background-blend-mode: lighten;
    position: relative;
    /* overflow: hidden; */
}
.loopWrapper {
    position: absolute;
    top: -5rem;
    z-index: 1;
}
.loopTxt {
    width: 100vw;
    display: flex;
}
.loopTxt div {
    flex-shrink: 0;
    width: auto;
    height: auto;
    display: inline-block;
    text-wrap: nowrap;
    white-space: nowrap;
    color: rgba(215, 214, 216, 0.4);
    font-family: "Hiragino Kaku Gothic StdN";
    font-size: 10rem;
    font-weight: 800;
    line-height: 1;
    animation: infinity-loopTxt 40s linear infinite;
}
.loopTxt div:last-child {
    margin-left: 2rem;
}
@keyframes infinity-loopTxt {
    0% {
      transform: translateX(0%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  /* loop-text */
.topRecruitInner {
    max-width: 1040px;
    width: 100%;
    padding: 0 30px;
    margin: 0 auto;
}
.topRecruitWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 120px 30px;
    margin: 0 auto;
    background-color: #FFF;
}
.topRecruitWrapper h4 {
    width: 100%;
    border-bottom: 1px solid var(--base_blue, #1D3760);
    color: var(--base_blue, #1D3760);
    font-size: 3.2rem;
    font-weight: 700;
    text-align: center;
}
.topRecruit__txt {
    color: var(--font_black, #27210C);
    font-size: 1.8rem;
    line-height: 2;
    text-align: center;
}
.topRecruit__sliderWrap {
    display: flex;
    overflow: hidden;
    width: 100vw;
}
.topRecruit__sliderList {
    display: flex;
    list-style: none;
    padding: 0;
    animation: infinity-scroll-left 70s infinite linear 0.5s both;
}
.topRecruit__sliderItem {
    width:  27.7vw;
    height: 20.8vw;
    margin-right: 1.3vw;
}
.topRecruit__sliderItem>img {
    width: 100%;
}
@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
    }
/* loopSlider */

@media screen and (max-width: 768px) {
    .topRecruit {
        gap: 15px;
        padding:  60px 30px 30px;
    }
    .loopWrapper {
        top: -2.5rem;
    }
    .loopTxt div {
        font-size: 5rem;
        animation: infinity-loopTxt 60s linear infinite;
    }
    .topRecruitInner {
        padding: 0 15px;
        width: 100%;
    }
    .topRecruitWrapper {
        max-width: 640px;
        padding: 30px 10px;
    }
    .topRecruitWrapper h4 {
        font-size:  1.6rem;
    }
    .topRecruit__txt {
        font-size: 1.2rem;
    }
    .topRecruit__txt p:nth-of-type(2) {
        margin-top: 15px;
    }
    .topRecruit__sliderItem {
        width:  35vw;
        height:  26vw;
    }
}