@charset "UTF-8";
/* CSS Document */

/*---------------------------------------------
	loading
  ---------------------------------------------*/
.shutter{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #ffffff;
    z-index: 99;
    animation: byeShutter 4.8s forwards;
}
@keyframes byeShutter {
70% {opacity: 1;}
100% {
  display: none;
  opacity: 0;
  z-index: -1;
}
}
.logo {
    position: absolute;
    width: 500px;
    height: 127px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    animation: logo 3s forwards;
    animation-delay: .8s;
}
.logo > *{
    opacity: 0;
    animation: logo-inner 3s forwards;
}
@keyframes logo {
0% {opacity: 1;}    
100% {transform: scale(0.8);}
}
@keyframes logo-inner {
0% {opacity: 0;}    
100% {opacity: 1;}  
}
@media (width <= 768px) {
.logo {
    max-width: 400px;
    width: 90%;
    }    
}

/* -----------------------------------
    メインビジュアル
   ----------------------------------- */
#main-visual{
    width: 100%;
    height: 200vh;
    font-weight: normal;
    color: #ffffff;
    overflow: hidden
}

/* 動画　*/
video{
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    z-index: -100
}

/* コピー */
#first-copy h2{
    width: 100%;
    font-size: var(--font-size-4xl);
    font-family: var(--font-serif);  
    color: #ffffff;
    font-weight: normal;   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
#first-copy:before{
    content: "";
    width: 100%;
    height: 100vh;   
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(0deg, rgba(0,0,0,1) 5%, rgba(0,0,0,.3) 80%, rgba(255,255,255,0) 100%);
    opacity: 0.6;   
    overflow: hidden
}
#second-copy{
    width: 100%;
    height: 100vh;
    position: absolute;
    color: #ffffff;
    top: 100vh;
    background: rgb(0,0,0,0.6);
    overflow: hidden;
    left: 0;
}
/*#second-copy:before{
    content: "";
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%,  rgba(255,255,255,1) 100%);
    width: 100%;
    height: 30%;
    display: block;
    position: absolute;
    left: 0;
    bottom: -1%;
    background-size: contain;   
    overflow: hidden
}*/
#second-copy h3,
.modal h3{
    font-size: var(--font-size-2xl);
    font-family: var(--font-serif); 
    font-weight: normal; 
    line-height: var(--line-height-s);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
#second-copy h4,
.modal h4{
    font-size: var(--font-size-xl);
    font-family: var(--font-serif);  
    font-weight: normal; 
    line-height: var(--line-height-s);
    margin-bottom: 2rem
}
#second-copy h4 + p,
.modal h4 + p{line-height: 2.5}
#second-copy .link_btn_more{margin-top: 5rem}
#second-copy > div{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -60%);
}
 @keyframes fade-up{
   0%{opacity: 0; transform: translate(-50%, 250%);}
  20%{opacity: 1;}     
 100%{opacity: 1; transform: translate(-50%, -30%);}
 }
@media (width <= 768px) {
#second-copy > div{transform: translate(-50%, -55%);}    
}
@media (width <= 680px) {
#second-copy .link_btn_more{margin-top: 2rem}    
.modal h3{font-size: 22px;} 
.modal h4{font-size: 20px;}        
.modal h4 + p {
    text-align: left;
    line-height: 2;
}   
}

.modal-wrapper::-webkit-scrollbar {width: 5px;}
.modal-wrapper::-webkit-scrollbar-track {
    border-radius: 5px;
    background: #f2f2f2;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
.modal-wrapper::-webkit-scrollbar-thumb {
    border-radius: 5px;
	background: var(--green-02);
}

/* スクロールダウン　*/
.scroll {
    position: absolute;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    bottom: 60px;
    color: #ffffff;
    z-index: 1;
}
.scroll::after {
    content : '';
    display : inline-block;
    position : absolute;
    background-color: #ffffff;
    right : 50%;
    bottom : -120px;
    transform : translateX(-50%);
    width : 1px;
    height : 110px;
    animation: scroll 1.5s infinite;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
@media (width <= 680px) {
.scroll::after{
    bottom : -90px;
    height : 80px;
    }    
}


/*---------------------------------------------
	カラム
  ---------------------------------------------*/
#wrapper{
    position: relative;
    padding-bottom: 0;
    z-index: 1
}
main{background-color: #ffffff}
.block-half{width: 50% !important}
@media (width <= 768px) {
.block-half{width: 100% !important}   
}



/*---------------------------------------------
	見出し
  ---------------------------------------------*/
.copy{
    font-size: clamp(1.75rem, 1.474rem + 1.26vw, 2.5rem); /* 28-40px */
    font-weight: 500;
    font-family: var(--font-serif);
    line-height: var(--line-height-s);
}
@media (width <= 768px) {
.copy{letter-spacing: -0.085em}   
}

/*---------------------------------------------
	お知らせ
  ---------------------------------------------*/
#news{
    background-color: var(--green-ja);
    margin-bottom: 6rem;
    padding-top: .8rem;
    padding-bottom: .8rem;
    color: #ffffff;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -1.5rem;      
    max-width: 1400px;
}
#column-news{
    padding-left: 2rem;
    padding-right: 2rem
}
#news h2{
    font-size: var(--font-size-l);
    border-right: 1px solid #ffffff;
    padding-right: 1.85rem;
}
#slick-news{
    /*position: relative;*/
    width: calc(100% - 140px);
}
#slick-news li{
    display: flex;
    flex-wrap: wrap;
    line-height: var(--line-height-s)}
#slick-news li span.day{
    width: 120px;
    font-family: var(--font-en);
}
#slick-news li span:not(.day){width: calc(100% - 140px);}
#slick-news li a{color: #ffffff}
#slick-news li a:after {
    font-family: "bootstrap-icons";
    content: "\f285";
    text-decoration: none !important;
    display: inline-block;
    margin-left: 3px;
}
#slick-news li a:hover{color: var(--green-02);}
#slick-news .slick-list.draggable{width: calc(100% - 90px);}
#news .slick__next,
#news .slick__prev {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: var(--transition);
}
#news .slick__next{right: 0;}
#news .slick__prev{right: 65px;}
#news .slick__next:before,
#news .slick__prev:before{
    font-family: "bootstrap-icons";
    content: "\f231";
    color: #ffffff;
}
#news .slick__prev:before{content: "\f22d";}
#news .slick__next:hover:before,
#news .slick__prev:hover:before{
    color: var(--green-02);
    transition: var(--transition);
}
#news .slick-slider {margin-bottom: 0px;}
.slick-num{
    display: none;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    right: 20px;
    font-family: var(--font-en);
}
@media (width <= 768px) {
#news h2{
    margin-right: .85rem;
    padding-right: .85rem;
}
#column-news{
    padding-left: 1rem;
    padding-right: 1rem
}    
#slick-news{ width: calc(100% - 100px)}
#slick-news li span.day,
#slick-news li span:not(.day){width: 100%;}  
#slick-news li span.day{
    padding-top: .25rem;
    padding-bottom: .25rem}    
}    
@media (width <= 680px) {
#news{
    margin-bottom: 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
}    
#news h2{
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ffffff;
    margin-bottom: .5rem;
    margin-right: 0;
    padding-right: 0;
    }    
#news .slick-slider{margin-bottom: .6rem}    
#slick-news,
#slick-news li,
#slick-news .slick-list.draggable{width: 100%}     
#news .slick__next:before,
#news .slick__prev:before {
    position: absolute;
    top: -43px;
    right: 0px;
}  
.slick-num{top: -30px;}    
}


/*---------------------------------------------
	about
  ---------------------------------------------*/
:root {
--card-height: 100vh;
--card-margin: 5rem;
--card-top-offset: 1em;
}
#about-cards {
    width: 100%;
    margin: 5rem auto var(--card-margin);
    padding-bottom: var(--card-margin);
}
#about-cards__list {
    display: grid;
    grid-template-rows: repeat(var(--numcards), var(--card-height));/*縦方向:(繰り返す回数),(トラックの高さ)*/
    grid-template-columns: 1fr;/*横方向*/
}
#card_1 {--card: 0;}
#card_2 {--card: 3;}
#card_3 {--card: 6;}
#card_4 {--card: 9;}
.card {
    position: sticky;
    top: 0;
    padding-top: calc(var(--card) * var(--card-top-offset));
}
.card-inner {
    overflow: hidden;
    color: #ffffff;
    height: 90vh;
    padding: 0 2em 2rem 2rem;
}
#card_1 .card-inner {background-color: var(--gray-dark);}
#card_2 .card-inner {background-color: var(--green-ja);}
#card_3 .card-inner {background-color: var(--green-02);}
#card_4 .card-inner {
    background-color: var(--green-03);
    color: var(--gray-dark);
}
#card_4 .card-inner a,
#card_4 .card-inner a .link_btn_none{color: var(--gray-dark);}

.card-inner .card-inner__txt {
    width: 55%;
    padding-left: 5%;
}
.card-inner figure {
    width: 40%;
    line-height: 0;
    margin-top: -3.5rem;
}
.card-inner figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-inner h2 {
    line-height: 1;
    margin-top: 0.6rem;
    color: var(--green-02);
    text-align: left;
    padding-top: 0
}
#card_3 .card-inner h2 {color: #ffffff}
.card-inner h2 strong{
    font-size: 180%;
    padding-left: 10px;
    color: rgba(var(--green-02-rgb), 0.5);
    font-family: var(--font-en);
    font-weight: bold;
}
#card_3 .card-inner h2 strong{color: rgba(255,255,255,.5)}
.card-inner .btn {
    background: rgb(188 87 36);
    color: rgb(255 255 255);
    text-decoration: none;
    display: inline-block;
    padding: 0.5em;
    border-radius: 0.25em;
}
.card-inner .card-inner__txt a{
    display: block;
    color: #ffffff;
}
.column {
    width: 90%;
    margin: 1rem auto 1rem;
}    
@media (width <= 768px) { 
#about .inner__main{
    padding-left: 0;
    padding-right: 0;
}
.card-inner {padding: 0 1.5rem 1.5rem;}    
.card-inner .card-inner__txt {
    width: 100%;
    padding-left: 0;
}
.card-inner figure {
    width: 100%;
    height: auto;
    margin-top: 1rem;
    overflow: hidden;
}   
.card-inner .flex{flex-direction: column-reverse}     
.card-inner h2 {
    font-size: 20px;
    padding-bottom: 0rem;
}    
.card-inner h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
} 
.card-inner p {line-height: var(--line-height-s)}    
}
@supports (animation-timeline: view()) {
#about-cards__list {--numcards: 4;}
}


/*---------------------------------------------
	people
  ---------------------------------------------*/
#people{
    background-color: var(--gray-dark);
    color: #ffffff;
    overflow: hidden
}
#people h2{
    padding-bottom: 0;
    text-align: left;
}
#people .inner{padding-left: 5%;}

/* スライダー */
#people .slick {padding: 3rem 0 8rem;}
#people .slick__inner {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 0 20px;
}
#people .slick__container {
  position: relative;
  width: calc(100% + (100vw - 100%) / 2);
}
#people .slick__prev,
#people .slick__next {
    position: absolute;
    z-index: 1;
    width: 70px;
    height: 35px;
    border: 1px solid #ffffff;
    bottom: -4rem;
}
#people .slick__prev {right: 140px;}
#people .slick__next {right: 50px;}
#people .slick__prev:before,
#people .slick__next:before {
    font-family: "bootstrap-icons";
    color: #FFFFFF;
}
#people .slick__prev:before {content: "\f12f";}
#people .slick__next:before {content: "\f138";}
#people .slick__prev:hover,
#people .slick__next:hover {
    border: 1px solid var(--green-02);
    transition: var(--transition)
}
#people .slick__prev:hover:before,
#people .slick__next:hover:before {color: var(--green-02)}
#people .slick-slider {margin-bottom: 0px;}
@media (width <= 768px) { 
#people .inner {padding-left: 0}  
}

/*---------------------------------------------
	work-life
  ---------------------------------------------*/
#work-life{
    padding-top: 5rem;
    padding-bottom: 8rem;
}
#work-life .inner{max-width: 1100px;}
#work-life .inner.flex{align-items: center} 
#work-life .inner .block-half#inner-left{
    background-color: var(--green-03);
    text-align: right;
    padding-right: 2.5rem
}
#work-life .inner .block-half#inner-right{
    background-color: var(--green-02);
    color: #FFFFFF;
    padding-left: 2.5rem;
    margin-top: 5rem;
}
#work-life .inner .block-half#inner-right a{color: #ffffff}
#work-life .inner .block-half .block_photo{width: 60%;}
#work-life .inner .block-half#inner-left .block_photo{margin-left: -50px}
#work-life .inner .block-half#inner-right .block_photo{
    margin-right: -50px;
    margin-left: auto;
}
@media (width <= 768px) {
#work-life .inner__main{
    width: calc(100% - 40px);
    margin: auto;
    padding: 0;
}
#work-life .inner .block-half{width: 100% !important}    
#work-life .inner .block-half h3.index-ttl{margin-top: 1rem}
#work-life .inner .block-half#inner-right{
    margin-top: 0;
    padding-left: 1.5rem;
}  
#work-life .inner .block-half#inner-left{padding-right: 1.5rem;}   
#work-life .inner .block-half .block_photo{width: 80%;}    
#work-life .inner .block-half#inner-left .block_photo{margin-left: -20px}
#work-life .inner .block-half#inner-right .block_photo{margin-right: -20px;}    
}

/*---------------------------------------------
	recruit
  ---------------------------------------------*/
#recruit{
    background-color: var(--green-ja);
    color: #ffffff;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#recruit h2.ttl{
    text-align: left;
    padding-top: 0;
}
#recruit .block-half:nth-child(1){position: relative}
#recruit .block_photo{
    position: absolute;
    z-index: 10;
    width: 100%
}
#recruit .block_photo img{border: 2px solid #ffffff}
#recruit .block_txt{padding-left: 10%}
#list-link li h3{
    margin: 0 ;
}
#list-banner__recruit{margin-top: 4rem}
#list-banner__recruit li {width: 230px;}
#recruit li a{
    display: inline-block;
    color: #FFFFFF;
    padding-top: 1rem;
    padding-bottom: 1rem;
} 
@media (width <= 768px) {
#recruit{padding-bottom: 12rem;}    
#recruit .inner__main.flex{flex-direction: column-reverse}  
#recruit .block_txt{padding-left: 0}    
#recruit .block_photo{
    width: 230px;
    left: 0;
    right: 0;
    margin: auto
}   
#list-banner__recruit{
    margin-top: 1.5rem;
    margin-bottom: 3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}   
#recruit li a {
    padding-top: .5rem;
    padding-bottom: .5rem;
}    
}


/* -----------------------------------
   フッター
 * ----------------------------------- */
footer{padding-top: 12rem;}
@media (width <= 768px) {
footer{
    padding-top: 7rem;
    padding-bottom: 7rem;
}    
}


/* MV */
#area{
    position: relative;
    height: 100vh;
}
#youtube-area{
    position: fixed;
    top: -60px;
    left: 0;
    /*width: auto;
    height: auto;
    min-width: 100px;
    min-height: 100%;*/
    width: 100%;
    height: calc(100% + 120px);
    z-index: -100;
    overflow: hidden;
}
/*#youtube-area{
  position: absolute;
  z-index: 1;
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
 opacity: 1;
}*/
#youtube {
  /*天地中央配置*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
    overflow: hidden
  }
  
  /*youtubeがクリックされないためのマスク*/
  #youtube-mask{
      position: absolute;
      z-index: 2;/*下から2番目に表示*/
      top:0;
      width:100%;
      height: 100%;
      /* background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%); */
      background-size: 4px 4px;
      background-position: 0 0, 2px 2px;
      overflow: hidden;
  }