@charset "utf-8";


/* ----------------------------------------------------------------------
  ローディング画面
---------------------------------------------------------------------- */
:root {
  --loading-animation:cubic-bezier(0.76, 0, 0.24, 1);
}
body:not(.end_loading) { overflow:hidden; }
#loading_screen { width:100%; height:100%; position:fixed; top:0; left:0; z-index:9999; pointer-events:none; }
#loading_screen .loading_text { color:#fff; position:absolute; font-size:20px; font-family:Arial; left:50%; top:calc(50% - 30px); transform: translate(-50%, -50%); z-index:2; }
#loading_screen .loading_bar { display:none; width:100%; height:1px; background:rgba(255,255,255,1); position:absolute;  left:0%; top:50%; transform: translate(0%, -50%); z-index:2; }
#loading_screen .loading_bar.active { display:block; }
body.end_loading #loading_screen { pointer-events:auto; }
body.end_loading #loading_screen .loading_text { opacity:0; transition: opacity 1s ease 0.5s; }
body.end_loading #loading_screen .loading_bar { opacity:0; transition: opacity 1s ease 0.5s; }
#loading_screen:before { content:''; width:100%; height:100%; background:#000; position:absolute; top:0; left:0; z-index:1; }
#loading_screen .loading_overlay { width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; pointer-events:none; }
body.end_loading #loading_screen { pointer-events:auto; }
body.end_loading #loading_screen:before { transform:translate3d(-100%, 0, 0); transition: transform 1.3s var(--loading-animation) 1.25s; }


/* その他のアニメーション */
#header { transform: translate3d(0,-100%,0); }
body.end_loading #header { transform: translate3d(0,0,0); transition: transform 1.3s var(--loading-animation) 1.2s; }
#index_header_content { transform: translate3d(20%,0,0); }
body.end_loading #index_header_content { transform: translate3d(0,0,0); transition: transform 1.3s var(--loading-animation) 1.2s; }



/* ----------------------------------------------------------------------
  ヒーローヘッダー
---------------------------------------------------------------------- */
#index_header_content {
  
  width:100%; display:grid; grid-template-columns:repeat(2, 1fr); align-items:stretch; overflow:hidden;

  @media (max-width: 900px) {
    display:block;
  }

}


/* 画像スライダー */
#index_header_slider {

  visibility:visible !important; 
  &.animation_fade, &.one_image { transform:translate3d(30%,0,0); }

  .splide__track { height:100%; }
  .splide__list { height:100%; }
  
  .item { position:relative; width:100%; height:100%; }
  .bg_image { display:block; width:100%; height:100%; position:relative; }
  .bg_image img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
  &.animation_zoom-in.not_one_image .item .bg_image { transform:scale(1); will-change:transform; }
  &.animation_zoom-in.not_one_image .item.is-active .bg_image,
  &.animation_zoom-in.not_one_image .item.keep-animate .bg_image { transform:scale(1.2); transition: transform 8.0s linear 0s; }
  &.animation_zoom-out.not_one_image .item .bg_image { transform:scale(1.2); will-change:transform; }
  &.animation_zoom-out.not_one_image .item.is-active .bg_image,
  &.animation_zoom-out.not_one_image .item.keep-animate .bg_image { transform:scale(1); transition: transform 8.0s linear 0s; }

  body.end_loading &.animation_fade, body.end_loading &.one_image { transform:translate3d(0,0,0); transition: transform 1.4s var(--loading-animation) 1.2s; }
  body:has(#loading_screen).end_loading &.animation_fade, body:has(#loading_screen).end_loading &.one_image { transition: transform 1.4s var(--loading-animation) 1.2s; }

  @media (max-width: 900px) {
    width:100%; height:60vw;
  }
  @media (max-width: 600px) {
    height:auto; aspect-ratio:360 / 460; max-height:100svh;
  }
  
}


/* WORKS 作品一覧 */
#index_header_works {

  background:#1d1f20; position:relative; overflow:hidden; padding:220px 0 120px;

  @media (max-width: 1200px) {
    padding:160px 0 120px;
  }
  @media (max-width: 900px) {
    padding:64px 0;
  }
  
}
#index_header_works_inner {

  position:relative; top:50%; transform: translateY(-50%); margin:0 80px;
  
  &:before { content:''; display:block; width:80px; height:100%; position:absolute; top:0; left:-80px; z-index:100; background:#1d1f20; background: linear-gradient(to right,  rgba(29,31,32,1) 10%,rgba(29,31,32,0) 100%); }
  
  .headline_area { font-family:var(--tcd-font-headline); text-align:center; margin-bottom:40px; container-type:inline-size; width:100%; transform:translate3d(20%,0,0); }
  .sub_headline { font-size: clamp(20px, 2.6vw, var(--tcd-index-header-works-sub-headline-font-size-pc)); line-height:1; }
  .headline { font-size:clamp(50px, 8.3vw, var(--tcd-index-header-works-headline-font-size-pc)); white-space:nowrap; line-height:1; margin:-0.1em 0 -0.05em; }
  body.end_loading & .headline_area { transform:translate3d(0,0,0); transition: transform 1.4s var(--loading-animation) 1.3s; }

  .splide { transform:translate3d(30%,0,0); }
  body.end_loading & .splide { transform:translate3d(0,0,0); transition: transform 1.4s var(--loading-animation) 1.3s; }
  .splide__track { overflow:visible; cursor:grab; }
  .splide__track:active { cursor:grabbing; }
  .splide .item:last-of-type { margin-right:0 !important; }
  .splide .item {

    width:16.7cqi; max-width:320px; height:auto; aspect-ratio:320 / 452; border-radius:15px; position:relative; overflow:hidden;
    transform:translate3d(0,0,0); transition:transform 0.3s ease;

    .image { display:block; width:100%; height:100%; position:relative; }
    .image img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }

    @media(hover: hover) {
      &:hover { transform:translate3d(0,-10px,0); }
    }

  }
  
  .design_button { margin-top:40px; transform:translate3d(70%,0,0); }
  body.end_loading & .design_button { transform:translate3d(0,0,0); transition: transform 1.4s var(--loading-animation) 1.3s; }

  @media (max-width: 1400px) {
    margin:0 60px; top:auto; transform:none;
  }
  @media (max-width: 1200px) {
    .splide .item { width:240px !important; }
  }
  @media (max-width: 900px) {
    margin:0 30px;
  }
  @media (max-width: 767px) {
    margin:0 15px;
    .sub_headline { font-size: clamp(20px, 15.5vw, var(--tcd-index-header-works-sub-headline-font-size-sp)); }
    .headline { font-size:clamp(40px, 15.5vw, var(--tcd-index-header-works-headline-font-size-sp)); margin:-0em 0 -0.05em; }
    .splide .item { border-radius:10px; }
  }
  
}




/* ----------------------------------------------------------------------
  コンテンツビルダー　共通
---------------------------------------------------------------------- */
.cb_headline {
  font-family:var(--tcd-font-headline); font-size: clamp(50px, 14.6vw, var(--tcd-cb-headline-font-size-pc)); line-height:1; text-align:center;
  color:var(--tcd-base-color); margin-top:-0.15em; padding:0 120px 0.11em; position:relative; z-index:2;
}
.cb_sub_headline {
  font-family:var(--tcd-font-headline); font-size: clamp(30px, 14.6vw, var(--tcd-cb-sub-headline-font-size-pc)); line-height:0.8; text-align:center;
  color:var(--tcd-base-color); margin-top:-0.05em; margin-bottom:1em; padding-bottom:0.07em; position:relative; z-index:2;
}
@media (max-width: 1600px) {
  .cb_headline { padding-left:80px; padding-right:80px; }
}
@media (max-width: 1400px) {
  .cb_headline { padding-left:60px; padding-right:60px; }
}
@media (max-width: 900px) {
  .cb_headline { padding-left:30px; padding-right:30px; }
}
@media (max-width: 767px) {
  .cb_headline { padding-left:15px; padding-right:15px; }
  .cb_headline { font-size: clamp(30px, 15.5vw, var(--tcd-cb-headline-font-size-sp)); }
  .cb_sub_headline { font-size: clamp(20px, 15.5vw, var(--tcd-cb-sub-headline-font-size-sp)); margin-bottom:0.5em; }
}




/* ----------------------------------------------------------------------
  お知らせ
---------------------------------------------------------------------- */
.cb_news_list {
  
  .content_inner { background:var(--tcd-cb-bg-color); overflow:hidden; position:relative; padding:120px 0; }
    
  .design_button { color:var(--tcd-cb-bg-color); z-index:2; }
  .design_button:before { background:var(--tcd-cb-bg-color); }
  
  .parallax_bg_image { display:block; position:absolute; z-index:1; pointer-events:none; }
  .bg_image1 { top:-10%; left:0; }
  .bg_image1 img { transform:rotate(-26deg); width:24vw; max-width:345px; }
  .bg_image2 { top:15%; right:0; }
  .bg_image2 img { transform:rotate(20deg); width:24vw; max-width:345px; }
  .bg_image3 { bottom:-20%; left:15%; }
  .bg_image3 img { transform:rotate(50deg); width:24vw; max-width:345px; }

  .news_list { margin:30px auto 80px; }

  @media (max-width: 1456px) {
    .news_list { margin:30px 60px 80px; }
  }
  @media (max-width: 900px) {
    .news_list { margin:30px 30px 80px; }
  }
  @media (max-width: 767px) {
    .content_inner { padding:60px 0; }
    .news_list { margin:30px 15px 40px; }
    .bg_image1 { left:-15%; }
    .bg_image2 { top:25%; right:0; }
    .bg_image3 { bottom:-15%; }
    .bg_image1 img { width:27vw; transform:rotate(40deg); }
    .bg_image2 img { width:27vw; transform:rotate(-30deg); }
    .bg_image3 img { width:27vw; transform:rotate(10deg); }
    .button_area { margin:0 15px; }
  }
  @media (max-width: 600px) {
    .bg_image1 img { width:36vw; }
    .bg_image2 img { width:36vw; }
    .bg_image3 img { width:36vw; }
    .bg_image3 { left:-10%; }
  }

}




/* ----------------------------------------------------------------------
  グッズ一覧
---------------------------------------------------------------------- */
.cb_goods_list {
  
  overflow:hidden; background:var(--tcd-base-color);
  position:relative; overflow:hidden; width:100%; height:auto;
  &:has(.use_parallax) { clip-path:inset(0); }

  .parallax_bg_content { padding:120px 0; }
  .parallax_inner { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; background:var(--tcd-base-color) url(./../../../assets/img/common/goods_bg.png) left 0 bottom -50px / 20.5px repeat-x; }
  .use_parallax { transform: translate3d(0, 0, 0); }
  
  .cb_headline { color:transparent; background: linear-gradient(to bottom, #ffb1b3 50%, #f761d0 100%); -webkit-background-clip:text; background-clip: text; z-index:2; position:relative; }
  .cb_headline + .desc { text-align:center; font-size:24px; line-height:1.5; color:#f761d0; margin-bottom:calc(0.5em - 0.5lh); padding:0 120px; z-index:2; position:relative; }
  
  .carousel_area { margin:80px 0px; padding:0 120px; z-index:2; position:relative; }
  
  .splide {
    .item {
      display:flex; flex-direction:column; transform:translate3d(0,0,0); transition:transform 0.3s ease ;
      a { flex-grow:1; display:flex; flex-direction:column; justify-content:flex-start; gap:20px 0; background:#fff; padding:24px; border-radius:15px; }
      .content { flex-grow:1; display:flex; flex-direction:column; gap:15px 0; }
      .image { display:block; width:100%; height:auto; aspect-ratio:1 /1; position:relative; overflow:hidden; z-index:1; }
      .image img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; transform:scale(1); }
      @media(hover: hover) {
        &:hover { transform:translate3d(0,-10px,0); }
      }			
      .product_title { font-size:15px; line-height:1.5; color:#f761d0; }
      .title { font-size:17px; line-height:1.4; font-weight:700; }
      .price { font-size:17px; line-height:1; margin-top:auto; color:#000; }
    }
    .splide__track { padding-top:10px; margin-top:-10px; }
    .splide__arrows { height:100%; opacity:0; transition:opacity 0.3s ease; }
    .carousel_area:hover & .splide__arrows { opacity:1; }
    .splide__arrow--next { top:50%; transform: translateY(-50%); right:-90px; }
    .splide__arrow--prev { top:50%; transform: translateY(-50%); left:-90px; }
  }

  .splide_scrollbar { display:none; z-index:2; position:relative; }

  .design_button { background:#f761d0; color:#fff !important; z-index:2; position:relative; }
  .design_button:before { background:#fff !important; }
  .design_button:after { background:#f761d0; }
  @media(hover: hover) {
    .design_button:hover { background:var(--tcd-hover-color); }
    .design_button:hover:after { background:var(--tcd-hover-color); }
  }

  @media (max-width: 1400px) {
    .cb_headline + .desc { padding:0 60px; }
    .carousel_area { padding:0 60px; }
    .splide__arrow--next { right:-30px !important; }
    .splide__arrow--prev { left:-30px !important; }
  }
  @media (max-width: 1100px) {
    .cb_headline + .desc { font-size:20px; }
  }
  @media (max-width: 900px) {
    .cb_headline + .desc { padding:0 30px; }
    .carousel_area { margin:80px 30px; padding:0; }
    .splide__arrows { display:none !important; }
    .splide_scrollbar { display:block; }
    .splide__track { overflow:visible; cursor:grab; }
    .splide__track:active { cursor:grabbing; }
    .splide .item { width:240px !important; }
    .splide .item:last-of-type { margin-right:0 !important; }
  }
  @media (max-width: 767px) {
    .parallax_bg_content { padding:60px 0; }
    .cb_headline + .desc { padding:0 30px; font-size:16px; line-height:1.5; margin-top:10px; }
    .carousel_area { margin:40px 15px; }
    .button_area { margin:0 15px; }
    .splide .item a { border-radius:10px;}
  }
  @media (max-width: 450px) {
    .label { font-size:23px; }
  }
  
}



/* ----------------------------------------------------------------------
  YouTube
---------------------------------------------------------------------- */
.cb_youtube {
  
  .content_inner { overflow:hidden; padding:120px 0; background:var(--tcd-cb-bg-color); }
  
  .carousel_area { margin:40px 0 80px; padding:0 120px; }

  .splide {
    .item {
      a { display:flex; flex-direction:column; gap:25px 0; }
      .image { display:block; width:100%; height:auto; aspect-ratio:420 /236; position:relative; overflow:hidden; z-index:1; border-radius:15px; }
      .image img { filter: grayscale(100%); display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:filter 0.5s ease; }
      .title { color:#fff; font-size:20px; line-height:1.4; font-weight:500; max-height:4.2em; overflow:hidden; visibility:visible; transition:color ease 0.3s; }
      .title span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; }
      @media(hover: hover) {
        & a:hover .image img { filter: grayscale(0%); }
        a:hover .title { color:var(--tcd-hover-color); }
      }
    }
    .splide__arrows { height:100%; opacity:0; transition:opacity 0.3s ease; }
    .carousel_area:hover & .splide__arrows { opacity:1; }
    .splide__arrow { background:var(--tcd-base-color); }
    .splide__arrow--next { top:50%; transform: translateY(-50%); right:-90px; }
    .splide__arrow--prev { top:50%; transform: translateY(-50%); left:-90px; }
  }
  .splide_scrollbar { display:none; }

  @media (max-width: 1400px) {
    .carousel_area { padding:0 60px; }
    .splide__arrow--next { right:-30px !important; }
    .splide__arrow--prev { left:-30px !important; }
  }
  @media (max-width: 900px) {
    .carousel_area { margin:40px 30px 80px; padding:0; }
    .splide_scrollbar { display:block; }
    .splide__arrows { display:none !important; }
    .splide__track { overflow:visible; cursor:grab; }
    .splide__track:active { cursor:grabbing; }
    .splide .item { width:240px !important; }
    .splide .item:last-of-type { margin-right:0 !important; }
    .splide .title { font-size:15px !important; line-height:1.5; max-height:4.5em; }
    .splide .item a { gap:10px 0; }
  }
  @media (max-width: 767px) {
    .content_inner { padding:60px 0; }
    .carousel_area { margin:30px 15px 40px; }
    .splide .item .image { border-radius:10px; }
    .button_area { margin:0 15px; }
  }

}




/* ----------------------------------------------------------------------
  リクルート
---------------------------------------------------------------------- */
.parallax_bg_content {

  padding:120px 0;
  
  position:relative; overflow:hidden; width:100%; height:auto;
  &:has(.use_parallax) { clip-path:inset(0); }

  .parallax_inner { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
  .use_parallax { transform: translate3d(0, 0, 0); }
  .bg_image { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
  .bg_image img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
  .bg_video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; }

  @media (max-width: 767px) {
    padding:60px 0;
  }
  
}
.cb_recruit {

  .cb_headline { color:var(--tcd-cb-base-color); }
  
  .content { position:relative; z-index:2; display:flex; flex-direction:column; gap:40px 0; margin-top:20vw; padding:0 120px; }
  .desc { text-align:center; font-size:24px; line-height:1.5; color:var(--tcd-cb-base-color); }

  .button_list { display:flex; width:fit-content; gap:0 40px; margin:0 auto; }
  .design_button { background:#1d1f20; }
  .design_button:before { background:var(--tcd-cb-base-color); }
  .design_button:after { background:#1d1f20; }
  .design_button { color:var(--tcd-cb-base-color); }

  @media (max-width: 1400px) {
    .content { padding:0 60px; }
  }
  @media (max-width: 1100px) {
    .desc { font-size:20px; }
  }
  @media (max-width: 900px) {
    .content { padding:0 30px; gap:40px 0; }
    .button_list { gap:0 20px; }
  }
  @media (max-width: 767px) {
    .content { margin-top:240px; }
    .desc { font-size:16px; line-height:1.5; }
    .button_list { flex-direction:column; gap:10px 0; }
  }
  @media (max-width: 400px) {
    .content { padding:0 15px; }
    .desc br { display:none; }
  }
  
}




/* ----------------------------------------------------------------------
  フリースペース
---------------------------------------------------------------------- */
.cb_free_space {
  
  position:relative; overflow:hidden;

  .parallax_bg_content { display:flex; flex-direction:column; align-items:center; z-index:3; position:relative; }

  .cb_headline { z-index:3; position:relative; }
  .cb_sub_headline { z-index:3; position:relative; }
  
  .content_inner { margin:0 120px; position:relative; z-index:3; }
  .content_inner:not(:first-child) { margin-top:40px; }
  .content_inner.full_size { margin-left:0 !important; margin-right:0 !important; }

  .post_content { color:var(--tcd-content-color); }
  
  .design_button { margin-top:80px; color:var(--tcd-button-color); background:var(--tcd-button-bg-color); position:relative; z-index:3; }
  .design_button:before { background:var(--tcd-button-color); }
  .design_button:after { background:var(--tcd-button-bg-color); }

  .overlay { width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; }
  .normal_bg_image { width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; }
  .normal_bg_image img { width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; object-fit:cover; }
  
  @media (max-width: 1400px) {
    .content_inner { margin:0 60px; }
  }
  @media (max-width: 900px) {
    .content_inner { margin:0 30px; }
    .content_inner:not(:first-child) { margin-top:20px; }
    .design_button { margin-top:40px; }
  }
  @media (max-width: 767px) {
    .content_inner { margin:0 15px; }
    .content_inner:not(:first-child) { margin-top:30px; }
  }
}




/* END TRIGGER front_page.css */