@charset "UTF-8";
/* CSS Document */
html {
    font-size: 62.5%; /* 16px * 62.5% = 10px */
    width: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;

  }
  :root{
    --black:#2d2d2d;
  }

  body {
    color: var(--black); /* RGB */
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    font-size: 1.6em;
    line-height: 2.4rem;
    letter-spacing: 0.19rem;

  }

  a{
    color: inherit;
    text-decoration: none;
  }

  section h2 {
    font-size: 2.4rem;
  }
  a:hover {
    opacity: 0.5;
  }
  .none {
    display:none;
  }

/* -----------header------------------------ */

  /* .header{
    display: flex;
    z-index: 9;
    position:fixed;
    top:0px;
    background-color: rgba(255, 255, 255, 0.4); 
    width: 100%;
    height: 70px;
  }

  .header-main-area{
    display: flex;
    justify-content: space-between;
    width: 92%;
    margin: 10px auto 0;
    align-items: center;

  }
        @media(min-width:1020px){
            .header{
                height: 145px;

            }

            .header-main-area{
               max-width: 1440px;
               padding-inline: 35px;
                margin: 0 auto;
              }
        }
        


  .logo-img{
    width: 50px;
    display: block;

  }

        @media(min-width:1020px){
            
            .logo-img{
                width: 96px;
                margin-top: 25px;
                margin-left: 3%;
            }
            
        }


.logo-txt{
    font-size: 1.6rem;
    margin-left: 5px;
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    }

        @media(min-width:1020px){
            .logo-txt{
                font-size: 2.4rem;
                margin-top: 35px;
                margin-left: 10px;
                line-height: 1.7;
            }
            
        }



.header-logo{
    display: flex;
}

img,.video iframe,.map iframe{
    width: 100%;
    height: auto;
}
.nav{
    width: 100%;
    height: 100%;
    background-color: #3d527d;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(100%);
    opacity: 0;
    transition: 0.5s;
    overflow-y: scroll;
}

.nav.active{
    transform: translate(0);
    opacity: 1;
}

.header-nav{
    display: none;
}
        @media(min-width:1020px){
            .nav__tell-and-contact{
                display: flex;
            }
            .header-nav{
                display: block;

            }
            .header-nav p,.header-nav a,.header-nav span,.header-nav-menu{
                font-size: 1.8rem;
                font-family: "Zen Maru Gothic", serif;
                font-weight: 600;
                font-style: normal;
            }
            .nav-contact-link{
                margin-left: 10px;
            }
            .header-nav a::after{
                content: "";
                display: block;
                width: 6px;
                height: 12px;
                background-image: url(../img/arrow-black_mini.png);
                background-repeat: no-repeat;
                position: absolute;
                top:20px;
                left: 190px;
            }
            .nav__tell-and-contact{
                max-width: 1370px;
                justify-content: flex-end;
                margin-top: 30px;
            }
            .header-nav a{
                font-size: 1.6rem;
                padding: 15px 80px 15px 40px;
                border-radius: 35px;
                border: 1px solid #2d2d2d;
                background-color: #fff;
                position: relative;
            }
            .header-nav span{
                font-size: 1.6rem;
                font-weight: 400;
            }
            .nav-tell-area{
                text-align: center;
            }
            .header-nav-menu{
                display: flex;
                margin-top: 15px;
                text-transform: uppercase;
                letter-spacing: 0.3rem;
            }
            .header-nav-menu li{
                font-size: 1.8rem;
                font-weight: 600;
                margin-right: 45px;
            }
            .header-nav-menu .li01{
                margin-left: 160px;
            }
        }




.nav__menu-button{
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    border: none;
    padding: 0;
    background: transparent;
    z-index: 10;
}

.nav__menu-button.active span{
    background-color: #fff;
    transition: 0.5s;
}

.nav__menu-button.active span:nth-of-type(1){
    transform: rotate(-45deg);
    top: 15px;
}

.nav__menu-button.active span:nth-of-type(2){
    transform: rotate(45deg);
    top: 16px;
}

.nav__menu-button span{
    display: inline-block;
    width: 22px;
    height: 1px;
    background-color: #2d2d2d;
    position: absolute;
    left: 6px;
    transition: 0.5s;
}

.nav__menu-button span:nth-of-type(1){
    top: 12px;
}
.nav__menu-button span:nth-of-type(2){
    top: 20px;
}

.nav-menu-list{
    margin: 164px auto 0;
    width: 80%;
}

        @media(min-width:1020px){
            .nav-menu-list{
            width: 400px;
            margin: 164px 0 0 10% ;
        }
        
        }



.nav__summary{
    border-bottom: solid 1px #FFF;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 600;
    font-style: normal;
    margin-top: 50px;
}


details div p{
    width: fit-content;
    display: inline-block;
    font-weight: 400;
    margin-top: 22px;
    margin-left: 46%;
    position: relative;
    text-transform: uppercase;
}

details div p img{
    width: 26px;
    height: 26px;
    transform: translate(-3px, 4px);
}

details div p::before{
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: -18px;
}

.nav-menu-list details summary{
    display: block;
}
.nav__icon{
    position: absolute;
    top: 22px;
    right: calc(4% + 42px);
}

.tell_img{
    display: inline-block;
    width: 31px;
    height: 31px;
}
.form{
    display: inline-block;
    width: 26px;
    height: 31px;
    margin-left: 10px;
}

.nav-logo-txt{
    text-transform: uppercase;
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-size: 2rem;
    margin: 90px 0 76px auto;
    display: block;
    width: fit-content;
    line-height: 1.7;
}


        @media(min-width:1020px){
            .nav-logo-txt{
                font-size: 3.6rem;
            }
         
            .nav__icon{
                top: 57px;
            }
        } */
/* -----------main-visual----------------------- */

.main-sandy{
    padding-top: 70px;
    position: relative;
    background-image: url("../img/header__sandy-beach.jpeg");
    background-size: cover;
    padding-bottom: 30px;
}


        @media(min-width:1020px){
            .main-sandy{
                padding-bottom: 340px;
            }
            
        }

.main-menu{
    margin: 30px 0 0 15px;

}

.main-menu li{
font-size: 1.4rem;
margin-bottom: 20px;
font-family: "Zen Maru Gothic", serif;
font-weight: 400;
font-style: normal;
}
.main-menu .li1{
    text-transform: uppercase;
}
.main-en-txt{
position: absolute;
transform: rotate(-90deg);
top: 180px;
right: -80px;
font-size: 1.6rem;
font-family: "Cormorant Infant", serif;
font-weight: 300;
font-style: normal;
letter-spacing: 0.2rem;
}

        @media(min-width:1020px){
            .main-menu,.main-en-txt{
                display: none;
            }
            
        }





.main-en-txt span{
    margin-left: 30px;
}
.title-logo{
    position: relative;
    margin-inline: auto;
    display: block;
    width: 137px;
    height: 137px;
    background-color: #fff;
    border-radius: 100%;
    transform: translateY(-50%);
}
.title-logo img{
    width: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



main{
    background-color: #f9f6f1;
    overflow: hidden;
    box-sizing: border-box;
}
.main-title h1{
text-align: center;
font-size: 2.4rem;
font-family: "Cormorant Infant", serif;
font-weight: 300;
font-style: normal;
text-transform: uppercase;
margin-top: -50px;
line-height: 1.7;
letter-spacing: 0.25rem;
color: #fff;
}
.title-txt{
    font-size: 1.8rem;
    text-align: center;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.25rem;
    margin-top: 40px;
    padding-bottom: 115px;
    color: #fff;
}
.main-title{
    background-color: #3d527d;
}



        @media(min-width:1020px){
            .title-logo-and-h1{
                display: flex;
                margin-inline: auto;
                justify-content: center;
                gap: 32px;
            }
            .title-logo{
                width: 225px;
                height: 225px;
                margin-left: 0;
                margin-right: 0;
            }
            .title-logo img{
                width: 242px;
                top: 50%;
                left: 51%;
                transform: translate(-50%, -50%);
            }
            .title-txt{
           font-size: 3rem;
           margin-top: -56px;
           padding-bottom: 150px;
           letter-spacing: 0.4rem;
            }
            .main-title h1{
                font-size: 6rem;
                text-align: left;
                margin-top: -105px;
                position: static;
                z-index: 2;
            }
            .main-title h1 span{
                color: var(--black);
            }
        }

/* -----------corporate-link----------------------- */

.pcbr{
    display: none;
}
.desc1{
    margin: 0 6% 0 9%;
    line-height: 1.7em;
    position: relative;
    font-size: 1.6rem;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 100px;
    margin-bottom: 40px;
}

.desc2{
    position: relative;
    font-size: 1.6rem;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    padding-bottom: 30px;
    margin: 0 6% 0 9%;
    line-height: 1.7em;

}
        @media(min-width:1020px){
            .desc1{
                margin: 150px 26% 0 19%;
                font-size: 1.8rem;
            }
            .desc2{
                margin: 50px 26% 0 19%;
                padding-bottom: 0;
                font-size: 1.8rem;
            }
            .desc3{
                margin-top: -80px;
                font-size: 2rem;
            }

            .pcbr{
                display: block;
            }

        }


.desc-img{
    margin: 0 -32px 0 -9%;

}

.desc-2{
    font-size: 1.8rem;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    padding-left: 16%;
}


        @media(min-width:1020px){
            .desc-2{
                padding-left: 29%;
                font-size: 2rem;
            }
        }



.desc4-1 span,
.desc4-2 span,
.desc4-3 span{
    font-size: 2.0rem;
    color: #3d527d;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 600;
    font-style: normal;
}
.description{
    background-color: #fff;
    margin-left: 13%; 
    border: 1px solid #2d2d2d;
    border-radius: 0 0 0 100px;

}
        @media(min-width:1020px){
            .desc4-1 span,
            .desc4-2 span,
            .desc4-3 span
            {
                font-size: 2.4rem;
            }
            .description{
                border-radius: 0 0 0 300px;
            }
        }



.desc3{
    margin-bottom: 70px;

}

        @media(min-width:1020px){
            .desc3{
                margin-bottom: 90px;
            }
        }


.desc4-1,.desc4-2{
    margin-bottom: 20px;
    display: block;
}


        @media(min-width:1020px){
            .desc4-1,.desc4-2{
                margin-bottom: 30px;
            }
            .spbr{
                display: none;
            }
        }

.desc4{
    line-height: 2rem;
}

.desc4-3{
    line-height: 1.9;
}

.desc5{
    margin-top: 45px;
    margin-bottom: 80px;
}


        @media(min-width:1020px){
            .desc5{
                margin-top: 85px;
                margin-bottom: 75px;
            }

        }

.desc6 span{
    margin-bottom: 80px;
    font-size: 2.0rem;
    color: #3d527d;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 600;
    font-style: normal;
    line-height: 1.9;
}

.corporate-link-area{
    display: flex;
    padding-left: 30.1%;
    margin-bottom: 65px;
    position: relative;
    margin-top: 82px;
}

.corporate-link{
    display: block;
    box-sizing: border-box;
    padding: 20px;
    text-decoration: none;
    background-color: #3d527d;
    border: 1px solid #2d2d2d2d;
    border-radius: 40px;
    width: 60px;
    height: 60px;
    position: relative;
    top:2px;
    margin-left: 15px;
    font-size: 1.4rem;
}
.corporate-link::after{
    content: "";
    display: block;
    width: 6px;
    height: 12px;
    background-image: url(../img/SVG/arrow-white.svg);
    padding: 7px;
    background-repeat: no-repeat;
    position: absolute;
    top: 22px;
    left: 26px;
}

.corporate-link-sub1{
    width: 145px;
    display: inline-block;
    line-height: 1.9;
}


        @media(min-width:1020px){

            .corporate-link-area{
                margin-top: 90px;
                margin-bottom: 100px;
                padding-left: 60.5%;
            }
            
            .corporate-link-sub1{
                font-size: 1.6rem;
            }
            .corporate-link-sub2{
               margin-bottom: 120px; 
               margin-left: 60%;
               font-size: 1.6rem;
            }

            .desc6,.desc6 span{
                font-size: 2.8rem;
            }
            

            .corporate-link{
                width: 90px;
                height: 90px;
                padding: 30px;
                border-radius: 100%;
                top: -17px;
                left: 6px;
            }
            .corporate-link::after{
                width: 6px;
                height: 12px;
                background-image: url(../img/SVG/arrow-white.svg);
                padding: 10px;
                top: 33px;
                left: 38px;
            }
            

        }


/* .corporate-link-arrow{
    width: 52px;
    height: 52px;
    position: relative;
    background-color: #3d527d;
    border-radius: 100%;
}

.corporate-link-arrow img{
    width: 6px;
    height: 12px;
    position: absolute;
    top:-13px;
    right: 9%;
}
 */


/* ----------business-link---------------------- */

.business-link{
    background-color: #fff;
    margin: 0 auto; 
    border: 1px solid #2d2d2d;
    border-radius: 60px;
    margin-top: 150px;
    max-width: 345px;
    height: 318px;
    padding: 0 28px 0;
    box-sizing: border-box;
    position: relative;
    line-height: 1.7;
}

.shapes4_small{
    margin-top: 30px;
    width: 150px;
    margin-left: 115px;
}
.business-link h2{
    margin-bottom: 25px;
    font-size: 2.2rem;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 600;
    font-style: normal;
}
.business-desc{
    line-height: 1.7;
}
.business-name{
    font-size: 1.4rem;
    margin-top: 35px;

}
.business-link .arrow-white{
    display: block;
    width: 60px;
    height: 60px;
    background-color: #3d527d;
    padding: 20px;
    border-radius: 40px;
    position: relative;
    top: -60px;
    left: 218px;
}
.business-link .arrow-white::after{
    content: "";
    display: block;
    width: 6px;
    height: 12px;
    background-image: url(../img/SVG/arrow-white.svg);
    padding: 7px;
    background-repeat: no-repeat;
    position: absolute;
    top: 22px;
    left: 26px;
}




/* 背景の、青枠 */
.link-area-blue{
    position: relative;
    z-index: 0;
}

.link-area-blue::after{
    content:"";
    display: block;
    width: 100vw;
    height: 1000px;
    background-color: #3d527d;
    position: absolute;
    z-index: -1;
    top: 178px;
    left: 0;
}


/* ----------staff-link---------------------- */

.staff-link{
    background-image: url("../img/staff-tshirts-man.png");
    background-size: cover;
    margin: 50px auto 0; 
    border-radius: 60px;
    width: 345px;
    height: 318px;
    padding: 75px 32px 0;
    box-sizing: border-box;
    position: relative;
    border: 0.5px solid;
}
.staff-link p{
    color: #fff;
    line-height: 1.7;
}
.staff-link h2{
    margin-bottom: 25px;
    font-size: 2.2rem;
    color: #fff;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 600;
    font-style: normal;
}
.staff-name1{
    font-size: 1.4rem;
    margin-top: 40px;
    color: #fff;
}
.staff-name2{
    font-size: 1.4rem;
    margin-top: 5px;
    color: #fff;
}
.staff-link .arrow-white{
    display: block;
    width: 60px;
    height: 60px;
    background-color: #fff;
    padding: 20px;
    border-radius: 40px;
    position: relative;
    top: -65px;
    left: 220px;
    border: 1px solid #2d2d2d;
}
.staff-link .arrow-white::after{
    content: "";
    display: block;
    width: 6px;
    height: 12px;
    background-image: url(../img/SVG/arrow-black.svg);
    padding: 7px;
    background-repeat: no-repeat;
    position: absolute;
    top: 22px;
    left: 26px;


}



        @media(min-width:1099px){
            .link-area{
                display: flex;
                max-width: 1100px;
                margin: 0 auto;
                justify-content: space-between;

            }

            .link-area-blue::after{
                top: 420px;
                left: 0;
            }
            .business-link{
                margin-top: 200px;
                margin-right: 0;
                margin-left: 0;
                max-width: 520px;
                width: 520px;
                padding: 0 70px 0 85px;
                height: 430px;
            }

            .business-link .arrow-white{
                width: 90px;
                height: 90px;
                padding: 30px;
                border-radius: 100%;
                top: -78px;
                left: 275px;
            }
            .business-link .arrow-white::after{
                width: 6px;
                height: 12px;
                background-image: url(../img/SVG/arrow-white.svg);
                padding: 10px;
                top: 34px;
                left: 42px;
            }
            
            .shapes4_small{
                margin-top: 40px;
                width: 205px;
                margin-left: 150px;

            }
            .business-link h2{
                font-size: 2.8rem;
                margin-bottom: 37px;
            }
            .business-link .business-desc{
                font-size: 1.8rem;
            }
            .business-name{
                 margin-top: 60px;
            }
            .business-link .business-name{
                font-size: 1.6rem;
            }
            .staff-link {
                margin-top: 200px;
                margin-left: 0;
                margin-right: 0;
                width: 520px;
                height: 430px;
                padding: 100px 100px 0 45px;
                background-image: url(../img/staff-tshirts-man_pc2.png);
                background-size: cover;
                background-repeat: no-repeat;
                border: 1px solid #2d2d2d;


            }
            .staff-link h2{
                font-size: 2.8rem;
                margin-bottom: 40px;
            }
            .staff-link .staff-desc{
                font-size: 1.8rem;
            }
            .staff-link .staff-name1{
                margin-top: 80px;
                font-size: 1.6rem;
            }
            .staff-link .staff-name2{
                font-size: 1.6rem;
                margin-bottom: 70px;
            }

            .staff-link .arrow-white{
                width: 90px;
                height: 90px;
                padding: 30px;
                border-radius: 100%;
                top: -166px;
                left: 284px;
            }
            .staff-link .arrow-white::after{
                width: 6px;
                height: 12px;
                background-image: url(../img/SVG/arrow-black.svg);
                padding: 10px;
                top: 33px;
                left: 38px;
            }
            

         
            
        }

/* ----------office-and-map--------------------- */


.office-and-map{
    margin-top: 150px;
    background-color: #fff;
    border: 1px solid #2d2d2d;
    border-radius: 0 100px 0 100px;
    margin-bottom: 150px;
    position: relative;
}

.office-and-map h2{
    font-size: 2.2rem;
    color: #333;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.25rem;
}



.office-link-area{
    display: flex;
    position: relative;
    margin-top: 15px;
    max-width: 345px;
    margin-inline: auto;
    transform: translateY(-5%) translateX(45%);
}

.office-link{
    display: block;
    box-sizing: border-box;
    padding: 20px;
    text-decoration: none;
    background-color: #3d527d;
    border: 1px solid #2d2d2d2d;
    border-radius: 40px;
    width: 60px;
    height: 60px;
    position: relative;
    top:2px;
    margin-left: 15px;
    font-size: 1.4rem;
}
.office-link::after{
    content: "";
    display: block;
    width: 6px;
    height: 12px;
    background-image: url(../img/SVG/arrow-white.svg);
    padding: 7px;
    background-repeat: no-repeat;
    position: absolute;
    top: 22px;
    left: 26px;
}

.office-link-txt{
    width: 90px;
    display: inline-block;
    margin-top: 25px;
}



        @media(min-width:1020px){
            .office-and-map{
                border-radius: 0 300px 0 300px;
                margin-top: 200px;
            }


            .office-link-area{
                max-width: 1040px;
                margin-inline: auto;
                transform: translateY(14%) translateX(67%);
            }

            .office-link{
                width: 90px;
                height: 90px;
                padding: 30px;
                border-radius: 100%;
                top: -10px;
                left: 0;
            }
            .office-link::after{
                width: 6px;
                height: 12px;
                background-image: url(../img/SVG/arrow-white.svg);
                padding: 10px;
                top: 33px;
                left: 38px;
            }
            


        }

/* ----------map-------------------- */

.map-section h2{
    margin-top: -29.16px;
    text-align: center;
}

/* ----------office------------------- */

.office-section .office-desc{
    margin-top: 30px;
    margin-bottom: 40px;
    padding-inline: 11%;
    line-height: 1.7em;
}

.office-slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}

.office-slider{
    height: 232px;
}

.office-slider li{
    width: 278px;
    height: 232px;
}

.office-section{
    position: relative;
    padding-top: 80px;
}

.office-section h2{
    margin-left: 11%;
}
        @media(min-width:526px){
        .office-desc .pcbr{
            display: block;
        }

        }



        @media(min-width:1020px){
            .office-section{
                padding-top: 140px;
            }
            .office-section h2{
                max-width: 800px;
                margin: 0 auto;
                font-size: 2.8rem;
            }
            .office-section .office-desc{
                margin: 50px auto;
                font-size: 1.8rem;
                max-width: 800px;
                padding-inline: 0;
            }
            .office-slider{
                height: 362px;
            }
            .office-slider li{
                width: 432px;
                height: 362px;
            }
        }

/* ----------map------------------ */

.map-section h2{
    margin-top: -29.16px;
    text-align: center;
}

.map-txt{
    width: 80px;
    display: inline-block;
    margin-top: -6px;
}

.map-section{
    position: relative;
    background-color: #fff;
    margin: 150px auto 100px;
    border: 1px solid #2d2d2d;
    border-radius: 0;
    width: min(90%, 600px);
    margin-left: auto;
    margin-right: auto;
    max-height: 718px;
}
.map-frame{
    margin: 38px 8% 0;
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0;
}
.map-frame p{
    margin-bottom: 10px;
}
.map-frame p .day-off{
    margin-bottom: 30px;
}
/* .google-map::after{
    content: "";
    display: block;
    width: 20px;
    height: 25px;
    background-image: url("../img/SVG/location_on_20dp_black_5F6368_FILL0_wght400_GRAD0_opsz20.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: -3px;
    left: -20px;
} */
.google-map{
    color: #0a49a6;
    margin-left: 50%;
    border-bottom: 1px solid #0a49a6;
    position: relative;
    font-size: 1.4rem;
}

.map{
    border: 1px solid #2d2d2d;
    width: min(90%, 400px);
    /* height: 250px; */
    height: 0;
    margin: 23px auto 50px;
    padding-top: 63.4%;
    position: relative;
}

.map iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


            @media(min-width:1020px){
                .map-section{
                    margin: 185px auto 200px;
                    max-width: 845px;
                }
                .map-txt{
                    width: 113px;
                    margin-top: -1px;
                }
                .map-section h2{
                    margin-top: -48px;
                }
                .map-frame{
                    margin: 38px 17.8% 0;
                }
                .map-frame .day-off {
                    margin-bottom:20px;
                }
                .google-map {
                    display: block;
                    left: 30%;
                    max-width: 152px;
                    margin-inline: auto;
                }
                .map{
                    width: 510px;
                    /* height: 250px; */
                    height: 0;
                    margin: 10px auto 45px;
                    padding-top: 50.4%;

                }
                .gm-style .place-desc-large .address{
                display: none;
                }

            }



/* ----------recruit------------------- */

.recruit-and-video{
    position: relative;
    background-color: #fff;
    margin-bottom: 150px;
    border: 1px solid #2d2d2d;
    border-radius: 100px 0 100px 0;
}

.recruit-section h2{
    padding: 80px 0 20px 40px;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 600;
    font-style: normal;
    max-width: 375px;
    margin: 0 auto;
    font-size: 2.2rem;
}

.recruit-page{
    max-width: 345px;
    margin: 0 auto;
}

.bg-blue{
    display: flex;
}


.recruit-desc{
    position: relative;
    background-color: #fff;
    /* margin-bottom: 80px; */
    border: 1px solid #2d2d2d;
    border-radius: 0;
    margin: 0 auto;
    max-width: 345px;
    padding-bottom: 50px;
    padding-left: 30px;
}
.recruit-desc p,.recruit-desc p span{
    padding: 20px 0 60px 0;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 600;
    font-style: normal;

}
.recruit-link{
    background-color: #fff; /* 背景色 */
    color: var(--black); /* 文字色 */
    padding: 16px 110px 16px 45px; /* パディング */
    font-size: 1.6rem; /* フォントサイズ */
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    border: 1px solid #2d2d2d;
    border-radius: 50px; /* 50pxの角丸 */
    position: relative;
}
.recruit-link::after{
    content: "";
    display: block;
    width: 62px;
    height: 13px;
    background-image: url("../img/link-button__long-arrow.png");
    background-repeat: no-repeat;
    position: absolute;
    top: 18px;
    left: 202px;
}



            @media(min-width:1020px){
                .recruit-and-video{
                    margin-bottom: 200px;
                    border-radius: 300px 0 300px 0;
                }
                .recruit-page{
                    display: flex;
                    max-width: 985px;
                    margin: 0 auto;
                }
                .recruit-section h2{
                    padding: 135px 0 20px 20px;
                    max-width: 985px;
                    margin: 0 auto;
                    font-size: 2.8rem;
                }
                .bg-blue{
                    /* width: 638px; */

                    width: 600px;
                    height: 575px;

                }
                .recruit-desc{
                    /* max-width: 400px;
                    width: 400px;
                    margin: 0;
                    padding-left: 42px;
                    padding-bottom: 72px; */

                    max-width: 400px;
                    width: 380px;
                    margin: 0;
                    padding-left: 0;
                    padding-bottom: 72px;



                }
                .recruit-desc p{
                    font-size: 2rem;
                    /* padding: 135px 0 210px 0; */
                    line-height: 1.9;

                    padding: 135px 0 140px 42px;


                }

                .recruit-link::after{
                    top: 30px;
                    left: 240px;
                }
                .recruit-link{
                    font-size: 1.8rem;
                    padding: 25px 145px 25px 45px; 
                    border-radius: 35px; 

                    font-size: 1.8rem;
                    padding: 25px 145px 25px 45px;
                    border-radius: 35px;
                    margin-left: 22px;

                }
                

            }

   
/* ----------video-section------------------- */


.video-section p{
    text-align: center;
    margin-top: 80px;
    position: relative;
    margin-inline: 5%;
    line-height: 1.7;
    font-size: 1.4rem;
}

.video-section p::after{
    content: "";
    display: block;
    width: 16px;
    height: 18px;
    background-image: url("../img/SVG/youtube__double-arrows-pc.svg");
    position: absolute;
    background-repeat: no-repeat;
    top: 147px;
    left: 50%;
    
}

.video{
    margin: 70px auto 100px;
    width: 345px;
    /* height: 200px; */
    aspect-ratio: 16 / 9;
}

.video iframe{
    width: 100%;
    height: 100%;
}

        @media(min-width:375px){
            .video-section .spbr{
                display: none;
            }

            }

            @media(min-width:494px){
                .video-section p::after{
                    top: 122px;
                    left: 50%;
                }
    
                }
                @media(min-width:650px){
                    .video-section p::after{
                        top: 96px;
                        left: 50%;
 
                    }
                    .video{
                        width: 450px;
                    }
                    }
                    @media(min-width:729px){
                        .video-section p::after{
                            top: 100px;
                            left: 50%;
                        }
            
                        }
        
    
            @media(min-width:1020px){
                .video{
                    margin: 70px auto 200px;
                    width: 800px;
                    height: 440px;

                }
                .video-section p{
                    margin-top: 145px;
                    line-height: 1.7;
                    font-size: 1.8rem;
                }
                .video-section p::after{
                    top: 115px;
                    width: 21px;
                    height: 28px;
                }
                .spbr{
                    display: none;
                }
              
            }

/* ----------contact-section------------------- */

.contact-section{
    font-family: "Zen Maru Gothic", serif;
    font-weight: 600;
    font-style: normal;
    background-color: #3d527d;
    margin: 0 auto 200px;
    border: 1px solid #2d2d2d;
    border-radius: 0 30px 0 30px;
    width: min(90%, 620px);
    position: relative;
    z-index: 3;
}
.contact-section::before{
    background-image: url("../img/ticket-to-ANCHORMANAGEMENT.png");
    content: "";
    display: block;
    width: 328px;
    height: 152px;
    background-repeat: no-repeat;
    position: absolute;
    background-size: contain;
    top: 477px;
    right: 0;
    z-index: 1;
}
.contact-section::after{
    background-image: url("../img/ticket-to-ANCHORMANAGEMENT-tate.png");
    content: "";
    display: block;
    width: 152px;
    height: 328px;
    background-repeat: no-repeat;
    position: absolute;
    background-size: contain;
    top: 190px;
    left: 0;
    z-index: 1;
}

.contact-section h2{
    color: #fff;
    font-size: 2.2rem; /* フォントサイズ */
    margin: 40px  auto;
    text-align: center;
}

.contact-sec-p{
    color: #fff;
    margin: 40px  auto 70px;
    text-align: center;
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    line-height: 1.7;
}



        @media(min-width:1020px){
            .contact-section{
                margin: 0 auto 345px;
                width: 1040px;
                border-radius: 0 90px 0 90px;
            }
            .contact-section h2{
                margin: 65px  auto 70px;
                font-size: 2.8rem;
            }
            .contact-sec-p{
                margin: 0 auto 35px;
                font-size: 1.8rem;
            }
            .contact-section::before{
                width: 592px;
                height: 275px;
                top: 351px;
            }
            .contact-section::after{
                width: 275px;
                height: 592px;
                top: 0;
                left: 20px;
            }

        }

.tell-info{
    display: flex;

}
.tell-info a{
    margin: 0 auto;
    font-size: 1.8rem;
    font-weight: 600;
}
.tell-info img{
    width: 18px;
    height: auto;
    position: relative;
    top: 5px;
}
.contact-tell-information p{
    text-align: center;
    position: relative;
    margin-bottom: 90px;
    margin-top: 24px;
}
.contact-white-area{
    background-color: #fff;
    margin: 0 auto 60px;
    border: 1px solid #2d2d2d;
    border-radius: 0;
    max-width: 315px;
    padding-top: 50px ;
    padding-bottom: 25px;
    position: relative;
    z-index: 2;
}


.contact-tell-information p::before{
    content:"";
    display:block;
    width:278px;
    height:1px;
    background-color:var(--black);
    position:absolute;
    top:70px;
    left:15px;
 }
.contact-form-information p{
    margin-top: 26px;
}
.contact-form-information img{
    width: 18px;
    height: auto;
    position: relative;
    top: 5px;
}
.contact-form-information,.contact-form-information span{
    text-align: center;
}
.contact-form-information a{
    font-weight: 600;
}
.contact-link{
    background-color: #fff;
    padding: 16px 85px 16px 35px;
    border: 1px solid #2d2d2d;
    border-radius: 50px;
    position: relative;
}
.contact-link::after{
    content: "";
    display: block;
    width: 62px;
    height: 13px;
    background-image: url("../img/SVG/arrow-black.svg");
    background-repeat: no-repeat;
    position: absolute;
    top: 23px;
    left: 187px;
}

        @media(min-width:1020px){
            .contact-white-area{
                display: flex;
                margin: 0 auto 110px;
                max-width: 840px;
                padding-bottom: 20px;
                padding-top: 0;
            }
            .tell-info{
                padding-top: 95px;
            }
            .tell-info img{
                width: 23px;
                top: 4px;
                margin-right: 10px;
            }
            .tell-info a{
                letter-spacing: 0.3rem;
                font-size: 2.4rem;
            }
            .contact-tell-information{
                width:420px ;
            }
            .contact-tell-information p{
                margin: 55px auto 0;
                letter-spacing: 0.3rem;
                font-size: 1.8rem;
            }
            .contact-tell-information p::before{
                width:1px;
                height:200px;
                top:-152px;
                left:420px;
             }
             .contact-form-information{
                width: 420px;
                padding-top: 80px;
             }
             .contact-link{
                top: -20px;

            }
             .contact-form-information p{
                margin-top: 14px;

            }
            .contact-form-information .contact-form-information-time{
                margin-top: 35px;
                margin-bottom: 20px;
                font-size: 1.8rem;
            }
        }


/* ----------topに戻る-btn------------------ */
/* 
.top-btn{
    opacity: 0;
    transition: 0.5s;
    width: 83px;
    height: 83px;
    padding: 25px 12px 0 19px;
    background: #fff;
    border: 1px solid #2d2d2d;
    border-radius: 100%;
    line-height: 1.5;

    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: 10;
    box-sizing: border-box;
}

.top-btn.on{
    opacity: 1;
    transition: 0.5s;
}


.top-btn:hover{
    opacity: 0.5;
}

.top-btn span{
    display: block;
    position: relative;
}

.top-btn span::before{
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-image: url(../img/SVG/arrow_upward_22dp_2D2D2D_FILL0_wght400_GRAD0_opsz24.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    left: 12px;
    top: -21px;
} */



/* -----------footer------------------------ */

.footer-section::before {
    content: "";
    display: block;
    width: 100vw;
    height: 800px;
    background-color: #3d527d;
    position: absolute;
    z-index: -2;
    top: -535px;
    left: 0;
}


@media(min-width:1020px){
    .footer-section::before {
        height: 670px;
        top: -670px;
    }

}


/* 

.footer-section::before {
    content: "";
    display: block;
    width: 100vw;
    height: 800px;
    background-color: #3d527d;
    position: absolute;
    z-index: -2;
    top: -535px;
    left: 0;
}


@media(min-width:1020px){
    .footer-section::before {
        height: 670px;
        top: -670px;
    }

}


.footer-section{

    position: relative;
    z-index: 2;
}
.white-area{
    background-color: #fff;
    border: 1px solid #2d2d2d;
    border-radius: 0;
}
.footer-logo-img{
    width: 131px;
    margin: 80px auto 0;
    display:block;
}
.footer-logo-txt{
    font-size: 1.8rem;
    margin-top: 20px;
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
}
.white-area .boat{
    width: 67px;
    height: auto;
    margin: 76px 0 -6px 73%;
    display:block;

}
.blue-area{
    background-color: #3d527d;
    border: 1px solid #2d2d2d;
    border-radius: 0;
    position: relative;
    z-index: 1;

}
.footer-menu-area{
    padding-top: 40px ;
    padding-left: 12%;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    margin-bottom: 60px;
    text-transform: uppercase;
}
.footer-menu-area li{
    margin-bottom: 12px;

}
.copy-wright{
    font-family: "Cormorant Infant", serif;
    font-weight: 300;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    display: block;
    margin-bottom: 55px;
}


        @media(min-width:1020px){
            .white-area{
                display: flex;
                position: relative;
            }
            .footer-logo-img_and_txt{
                display: flex;
                margin: 80px auto;
            }
            .footer-logo-img{
                width: 220px;
                margin: 0;
            }
            .footer-logo-txt{
                text-align: left;
                font-size: 3.6rem;
                line-height: 1.7;
                margin: 48px 0 49px 60px;
            }
            .white-area .boat{
                position: absolute;
                width: 144px;
                height: 71px;
                margin: 320px 0 0 73%;
                display:block;
            }
            .footer-menu-area{
                display: flex;
                margin-bottom: 0;
                padding-top: 100px;
                font-size: 1.8rem;
                padding-left: 0;
                margin-inline: auto;
                width: 695px;
            }

            .footer-menu-txt{
                margin-inline: auto;
            }
            .footer-menu-area li {
                margin-right: 55px;
                margin-bottom: 165px;
            }
            .footer-menu-area .li-last{
                margin-right: 0;
            }
            .copy-wright{
                margin-bottom: 85px;
                font-size: 1.8rem;
            }
        } */