@charset = "utf-8";


#main{
    margin: 0 auto;
}

.home .inner,
.home #main{
    padding-bottom: 0;
}


@media screen and (max-width:480px){

}

/************************************
index.html トップページ
************************************/

/****************************
#fv 
****************************/
#main section#fv{
    padding: 0;
    overflow: hidden;
}

#main section#fv div{
    position: relative;
}

#main section#fv div a{
    display: block;
    margin: -6.25vw auto 0;
    width: 35.0625vw;
}


/* ============ ベース ============ */
.sp-hero{
  position: relative;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  overflow: hidden;            /* 余白なし */
}

/* スマホは“画面幅いっぱい”に強制（親にパディングがあっても破って全幅に） */
@media (max-width: 850px){
  .sp-hero{
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* スライダー内の画像はトリミングなしでフィット */
.spHero__slider figure{ margin:0; }
.spHero__slider img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;         /* 念のため。画像サイズを合わせる前提 */
}

/* キーワード画像：常時固定で前面。横はスライダーと同じ幅で中央寄せ */
.spHero__keyword{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 850px);     /* PC時はコンテナ幅、SP時は100vw */
  max-width: 100vw;
  height: auto;
  z-index: 3;
  pointer-events: none;        /* クリックをスライダーに通す */
}

/* slick デフォルトのドット・矢印は使わない */
.spHero__slider .slick-dots{ display:none !important; }
.spHero__slider .slick-arrow{ display:none !important; }


@media screen and (max-width:850px){
    #main section#fv div a{
        position: relative;
        margin: -7.5vw auto 0;
        width: 98%;
    }
}

@media screen and (max-width:480px){

    
    
}
/****************************
#fv スライド
****************************/



/****************************
#contents01
****************************/
#contents01{
    
}

.contents01_always{
    position: relative;
}

.contents01_always a{
    display: block;
    width: 9.09375vw;
    position: absolute;
    right: 9.68vw;
    bottom: 35.4vw;
}

.contents01_entry{
    position: relative;
}

.contents01_entry a{
    display: block;
    width: 25.656vw;
    position: absolute;
    left: 4.5vw;
    bottom: 39.5vw;
}

@media screen and (max-width:850px){
    .contents01_always a{
        width: 68.23vw;
        position: static;
        margin: 0 auto;
        padding-right: 10vw;
    }
    
    .contents01_entry a{
        width: 100%;
        position: static;
    }
}

@media screen and (max-width:480px){

}
/****************************
#contents01
****************************/



/****************************
#contents02
****************************/
#contents02{
    
}

/* 矢印の既定アイコンを完全に消す */
.ytSlide .slick-prev:before,
.ytSlide .slick-next:before{ display:none !important; }

/* 画像矢印ボタン */
.ytSlide .slick-prev,
.ytSlide .slick-next{
  position:absolute;
/*  top:50%;*/
  top: 20.9375vw;
  transform:translateY(-50%);
  z-index:3;
  background:transparent;
  border:none;
  padding:0;
  width:4.15625vw;   /* 133px → 3200px基準のvw */
  height:9.0625vw;   /* 290px → vw */
  cursor:pointer;
  line-height:0;
}
.ytSlide .slick-prev{ left:1.2vw; }
.ytSlide .slick-next{ right:1.2vw; }

/* 画像そのもの（同一画像を左右で使い回し、prevは反転） */
.ytSlide .slick-prev img,
.ytSlide .slick-next img{
  width:100%;
  height:100%;
  display:block;
}
.ytSlide .slick-prev img{ transform:scaleX(-1); } /* 左矢印に反転を適用 */

/* 両端チラ見せ */
.ytSlide .slick-list{
  overflow:visible;
  padding:0 7.03125vw; /* 225px → vw（左右） */
}

/* ロゴ右寄せ */
.ytMeta{ padding:1.25vw 0 0; display:flex; flex-direction:column; }
.ytLogo{ width:13.5625vw; height:auto; display:block; margin-left:auto; }

/* 以下は前回と同じ（参考） */
.ytItem{ width:39.1875vw; margin-right:2.5vw; } /* 80px → 2.5vw */
.ytThumb{ width:39.1875vw; height:41.875vw; overflow:hidden; background:#f6f6f6; }
.ytThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ytTitle{ font-size:1.7646875vw; margin:0 0 1.09375vw; padding: 0 1.718vw; color:#00a26c; font-weight:700;line-height: 1.28; letter-spacing: -.02em; }
.ytDesc{
  font-size:.6646875vw; line-height:2.05; letter-spacing: 0; color:#00a26c; margin:0 0 2.8125vw; padding: 0 1.25vw;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}

/* タブレット（2枚表示／チラ見せ解除） */
/*
@media (max-width:850px){
  .ytSlide .slick-list{ padding:0; }
  .ytTitle{ font-size:18px; }
  .ytDesc{ font-size:14px; }
  .ytLogo{ width:120px; }
}
*/

/* スマホ（1枚表示） */
@media (max-width:850px){
  .ytMeta{ padding:3vw 0 0; display:flex; flex-direction:column; }
  .ytLogo{ width:13.5625vw; height:auto; display:block; margin-left:auto; }
  .ytItem{ width:87.76vw; margin-right:0; }
  .ytThumb{ width:87.76vw; height: auto; }
  .ytTitle{ font-size:3.95vw; line-height: 1.28; letter-spacing: -.02em; padding: 0 3vw; margin: 0 0 2vw; }
  .ytDesc{ font-size:1.48vw; line-height: 2.05; letter-spacing: 0; margin: 0 0 4.5vw; padding: 0 2.5vw;}
  .ytSlide .slick-prev, .ytSlide .slick-next{ top: 46.82vw; width:8.82vw; height:20.23vw; } .ytLogo{width: 30vw;}
}

@media screen and (max-width:850px){
    .interview_youtube{
        padding-bottom: 11.76vw;
    }
    
    .contents02_interview a{
        display: block;
        width: 68.23vw;
        position: static;
        margin: 0 auto;
        padding-right: 10vw;
    }
}

@media screen and (max-width:480px){

}
/****************************
#contents02
****************************/



/****************************
#contents03
****************************/
#contents03{
    
}

.contents03_youtube{
    position: relative;
}

.contents03_youtube a{
    display: block;
    width: 18.1875vw;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18.3vw;
}

@media screen and (max-width:850px){
    .contents03_youtube a{
        width: 68.23vw;
        position: static;
        margin: 0 auto;
        padding-right: 10vw;
    }
}

@media screen and (max-width:480px){

}
/****************************
#contents03
****************************/



/****************************
#contents04
****************************/
#contents04{
    
}

.contents04_company{
    position: relative;
}

.contents04_company a{
    display: block;
    width: 18.1875vw;
    position: absolute;
    right: 28vw;
    bottom: 68vw;
}

@media screen and (max-width:850px){
    .contents04_company a{
        width: 68.23vw;
        position: static;
        margin: 0 auto;
        padding-right: 10vw;
    }
}

@media screen and (max-width:480px){

}
/****************************
#contents04
****************************/



/****************************
#instagram
****************************/
#instagram{
    
}

#instagram .contents_pad{
    padding: 14.21875vw 9.375vw 12.5vw;
}

.instagram_h{
    width: 50vw;
    margin: 0 auto;
}

.instagram_block{
    margin-top: 5.78125vw;
}

.instagram_block.flex{
    flex-wrap: wrap;
    justify-content: center;
}

.instagram_block a{
    display: block;
    width: calc(100% / 3 - 7.5vw);
    margin-top: 5vw;
}


/* 1列目（1, 4, 7番目） */
.instagram_block a:nth-child(3n+1) {
  margin-right: 3.75vw;
}

/* 2列目（2, 5, 8番目） */
.instagram_block a:nth-child(3n+2) {
  margin-right: 3.75vw;
}

@media screen and (max-width:850px){
    #instagram .contents_pad{
        padding: 14.21875vw 4.705vw 27.41vw;
    }

    .instagram_h{
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }
    
    .instagram_h img:first-child{
        width: 72.82vw;
    }
    
    .instagram_h img:last-child{
        width: 58.35vw;
        margin-top: 8.82vw;
    }

    .instagram_block{
        margin-top: 16.47vw;
    }

    .instagram_block a{
        display: block;
        width: calc(100% / 2 - 1.764vw);
        margin-top: 11.17vw;
    }
    
    /* PC時のmagin削除 */
    .instagram_block a:nth-child(3n+1),
    .instagram_block a:nth-child(3n+2){
      margin-right: 0;
    }

    .instagram_block a:first-child,
    .instagram_block a:nth-child(2){
      margin-top: 0;
    }
    
    /* 1列目（1, 3, 5番目） */
    .instagram_block a:nth-child(2n+1) {
      margin-right: 3.52vw;
    }
}

@media screen and (max-width:480px){
    
}
/****************************
#instagram
****************************/



/****************************
#alignment
****************************/
#alignment{
    
}

#alignment .contents_pad{
    padding: 2.4375vw 3vw 16.09375vw;
}

.alignment_h{
    width: 29.6875vw;
    margin: 0 auto;
    padding-bottom: 3.5937vw;
}

.alignment_anchor{
    width: 18.4375vw;
    margin: 0 auto;
    padding-top: 3.5937vw;
}

@media screen and (max-width:850px){
    #alignment .contents_pad{
        padding: 27.41vw 2.82vw 29.41vw;
    }

    .alignment_h{
        width: 81.17vw;
        margin: 0 auto 0 0;
        padding-bottom: 11.76vw;
    }

    .alignment_anchor{
        width: 69.52vw;
        padding-top: 0;
    }
}

@media screen and (max-width:480px){

}
/****************************
#alignment
****************************/



/****************************
#news
****************************/
.news_border{
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid #4c444d;
    border-bottom: 1px solid #4c444d;
    padding: 40px 60px;
    box-sizing: border-box;
}

.news_border.flex{
    align-items: center;
}

#main .inner .news_border h2{
    margin-bottom: 0;
    margin-right: 65px;
}

.news_block{
    width: 100%;
    margin: 0 auto;
    padding-left: 50px;
    border-left: 1px solid #4c444d;
}

.news_contents{
    padding: 10px 0;
    display: flex;
    align-items: center;
}

.news_contents:last-child{
    
}

.news_contents .date{
    margin-right: 25px;
    font-size: 14px;
    letter-spacing: 0.36px;
    line-height: 1.5;
}

.news_contents .date time{
    display: block;
    text-align: center;
    color: #4c444d;
    padding: 5px 0;
    min-width: 95px;
}

.news_contents .category{
    margin-right: 25px;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.5;
}

.news_contents .category a{
    color: #fffcfc;
    display: block;
    text-align: center;
    box-sizing: border-box;
    padding: 9.5px 10px;
    margin: 5px 0;
    width: 150px;
}

.news_contents .detail{
    color: #4c444d;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    max-width: 490px;
}

.news_contents .detail a{
    display: block;
    line-height: 2.25;
}

#news .button_small{
    margin-top: 60px;
}

@media screen and (max-width:1300px){
    #news > div{
        padding: 0 30px;
    }

    .news_border{
        padding: 30px;
    }

    #main .inner .news_border h2{
        margin-right: 40px;
    }

    .news_block{
        padding-left: 30px;
    }

    .news_contents .category{
        margin-right: 15px;
    }

    .news_contents .category a{
        padding: 8px 10px;
        width: 130px;
    }

    .news_contents .date{
        margin-right: 15px;
    }
}

@media screen and (max-width:768px){
    #main .inner .news_border h2{
        margin-right: 0;
        display: inline-block;
        padding-bottom: 5px;
        border-bottom: 2px solid #4c444d;
        margin-bottom: 50px;
    }
    
    .news_border.flex{
        justify-content: center;
        flex-wrap: wrap;
        padding: 0;
        border: 0;
    }
    
    .news_block{
        max-width: 100%;
        padding-left: 0;
        border-left: 0;
    }

    .news_contents{
        border-top: 1px solid #4c444d;
        padding: 19.25px 20px;
    }
    
    .news_contents:last-child{
        border-bottom: 1px solid #4c444d;
    }

    .news_contents:before{
        width: 15px;
        height: 15px;
        margin-right: 10px;
    }

    .news_contents .date{
        margin-right: 10px;
        font-size: 13px;
        letter-spacing: 0;
    }

    .news_contents .date time{
        padding: 5px 0;
        min-width: 95px;
    }

    .news_contents .category{
        margin-right: 15px;
        font-size: 15px;
        letter-spacing: 0;
    }

    .news_contents .category a{
        border-radius: 15px;
        padding: 5px 10px;
        min-width: 95px;
        min-height: 30px;
    }

    .news_contents .detail{
        font-size: 14px;
        letter-spacing: 0;
        max-width: 60%;
    }

    #news .button_small{
        margin-top: 30px;
        max-width: 200px;
    }

    #news .button_small a{
        font-size: 15px;
    }
}

@media screen and (max-width:480px){
    #news > div{
        padding: 0 3.5%;
    }
    
    .news_contents{
        box-sizing: border-box;
        padding: 15px;
        margin: 0 auto;
        max-width: 100%;
    }

    .news_contents:before{
        width: 20px;
        height: 20px;
        margin-right: 15px;
    }

    .news_contents.flex{
        flex-wrap: wrap;
    }

    .news_contents .date{
        display: inline-block;
    }

    .news_contents .date time{
        font-size: 16px;
    }

    .news_contents .category{
        display: inline-block;
        margin: 0 10px 0 0;
        font-size: 16px;
    }

    .news_contents .category a{
        display: inline-block;
        margin: 5px 0;
    }

    .news_contents .detail{
        margin-top: 5px;
        max-width: 100%;
        width: 100%;
        font-size: 18px;
    }
}
/****************************
#news
****************************/


/************************************
index.html トップページ
************************************/