@charset "utf-8";

/* TOP全体指定 */
.section{
width: 100%;
border: 1px solid var(--txt-color);
border-top: none;
}

/* * {
  font-family: "Times New Roman", serif !important;
  font-weight: 700 !important;
} */
.top__topic{
color: var(--txt-color);
font-family: "Minion Pro","Lusitana" ;
font-size: var(--section-font-size);
font-weight: 700;
border-bottom: 1px solid var(--txt-color);
padding-left: var( --section-margin);
gap: 48px;
display: flex;
text-align: center;
padding: 16px  var(  --section-margin) 0;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
text-rendering: optimizeLegibility;
font-variant-ligatures: common-ligatures;
line-height: 1;

}

@media screen and (max-width:768px) {
.top__topic{
  letter-spacing: -0.48px;
 padding-top: 11px;
  padding-bottom: 8px;
} 
}
@media screen and (min-width:1441px){ 
.top__topic{
padding-top: 1.96829vh;
padding-bottom:1.03882vh;  
}
}

/* 　TOP全体指定終わり　　 */


/* article 全体指定だよ */
/* .article{} */
.article__header{
border: solid 1px var(--txt-color);
border-top: none;
}

.article__header__box{
  display: flex;
  flex-direction: row-reverse;
  border-bottom: 1px solid var(--txt-color);
  width: 100%;
}


/* article 全体指定　ここまで  */


/* article img start */
/* .article__header__right__box{} */
.article__header__img__box{
 max-width:67.430556vw ; 
 /* margin-left: calc(7.6% + 0.422px); */
}
.mainvisual{
  display: block;
  width: 100%;
  height: auto;
}



/*article img END  */

.article__header__left__box{
  display: flex;
  flex-shrink: 1;
  padding-left:clamp(24px,5.382%,72px) ;
  margin-right: auto;
  align-items: flex-end;
  margin-bottom: 60px;
}
.post__visual{
  display: block;
  width: 100%;
  padding-top:32px;

}

.post {
  width: 100%;
}



/* main img　end */

/* scroll top start */
.article__header__autobox{ 
  overflow: hidden; 
  position: relative; 
  width: 100%;
 } 
  
  .header__loop__wrap{
     display: flex; 
     animation: loopScroll 10s linear infinite; 
  
     align-items: center
     } 

     .header__loop__img{ 
      width: 50%;
       margin:24px 24px 0.1%; 
       flex-shrink: 0; 
        white-space: nowrap;
         text-rendering: optimizeLegibility; }
          @keyframes loopScroll {
             0% { transform: translateX(0%); }
           100% { transform: translateX(-50%); } }









/* scroll top  end */
@media screen and (min-width:1441px){
.article__header__right__box{
  width: 60%;
}
.article__header__left__box{
  width: 18%;
}

}




/*article__header SP */
@media screen and (max-width:768px) {
  .article__header__box{
    display: block;
  }
  .article__header__img__box{
    max-width: 100%;
    margin: 0;
    border-bottom:solid 1px var(--txt-color) ;
  }
  .mainvisual{
    height: calc(48.13vh + 0.05px);
    /* height: 32.649vh; */
    object-fit: cover;
  }
  .article__header__left__box{
margin-bottom: 32px;
  }
  .post__visual{
    padding-top: 48px;
  }
  .post{
    width: 47.14%;
  }

/* scroll SP */
 

  .header__loop__img{
width: 80%;
 margin-left: 4.665%;
 margin: 2.14095vh 8px ;

  }
   .header__loop__wrap{
    animation: loopScroll 10s linear infinite;
   }
   @keyframes loopScroll {
             0% { transform: translateX(0%); }
           100% { transform: translateX(-100%); } }
  }
  /* MV SPここまで */








/* ここからWORK */

/* カテゴリー指定ここから */

.top__work__content__box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
 
  width: 100%;

}

.work__category__grid__main{
display: flex;

width: 100%;
position: relative;
}
.work__category__grid__main::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0; /* ← 親の高さいっぱい */
  /* left: clamp( 399px,37.669%,503px); */
  left: clamp( 364px,37.669%,503px);
  width: 1px;
  background: var(--txt-color);
}


.work__category-filter{
display: flex;
align-items: center;
margin-left: var(--section-margin);
width: 100%;
height: 5vw;
overflow: hidden;

}




.work__category__filter__list{
  display:flex ;
flex-wrap: nowrap;
width: 100%;

}


/* カテゴリー線の指定だよ */
.work__category__filter__item::before {
  content: '';
  position: absolute;
  bottom: 35%;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--txt-color);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease;
}

.work__category__filter__item.top__work__active::before {
  width: 100%;
}










.work__category__filter__item:first-of-type{
margin-left:0;
}

.work__category__filter__item{
color: var(--txt-color);
font-family: "Minion Pro","Lusitana";
font-size: var(--font-size-category);
font-weight: 700;
letter-spacing: 0.96px;
margin-left:32px;


  /* ボタン指定 */
  background: none;
border: none;
cursor: pointer;
position: relative; /* ::beforeのために必要 */
/* transition: all 0.3s ease; */
}

.work__category__filter__item:hover {
opacity: 0.7;
}

.work__category__filter__item:last-of-type{
 
  
  height: 8vw;
}




@media screen and (max-width:768px) {
  .work__category__grid__main{
    padding: 16px 0 16px var(--section-margin);
  }
  .work__category__grid__main::after {
 display: none;
}


  .work__category-filter{
    padding: 0;
    margin: 0;
  }
  .work__category__title{
    letter-spacing: 0.28px;
    padding: 0;
    width: 100px;
  }



  
  .work__category__filter__item{
  padding: 0;
  margin-left: 24px;
  }
  .work__category__filter__item::before {
    bottom: 20%;
  }

}


.work__category__grid__main {
  display: flex;
  border-bottom: 1px solid var(--txt-color);
  width: 100%;
  position: relative;
}



.work__category-filter {
  display: flex;
  align-items: center;
  margin-left: var(--section-margin);
  width: 100%;
  height: 5vw;
  overflow: hidden;
}

.work__category__filter__list {

  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}

.work__category__filter__item {
  color: var(--txt-color);
  font-family: "Minion Pro","Lusitana";
  font-size: var(--font-size-category);
  font-weight: 700;
  letter-spacing: 0.96px;
  margin-left: 32px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

.work__category__filter__item:first-of-type {
  margin-left: 0;
}

.work__category__filter__item:hover {
  opacity: 0.7;
}

/* カテゴリー線の指定 */
.work__category__filter__item::before {
  content: '';
  position: absolute;
  bottom: 35%;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--txt-color);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease;
}

.work__category__filter__item.top__work__active::before {
  width: 100%;
}



/* カテゴリー指定終わり */

/* 作品 */
/* WORK作品一覧セクションのCSS */
/* 作品一覧の親コンテナ */
/* グリッドコンテナ - 外枠のみ */
/* WORK作品一覧セクションのCSS - 完全修正版 */

/* グリッドコンテナ */
/* WORK作品一覧セクションのCSS - 最終修正版 */

/* カテゴリーフィルター */


/* グリッドコンテナ - Figma仕様に対応 */
.top__work__content__box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

}

/* 個別の作品アイテム - Figma仕様に合わせた正確な幅設定 */
.top__work__content__list {
  border-right: 1px solid var(--txt-color);
 
  transition: all 0.6s ease-out;
  position: relative;
  /* Figma仕様: width: 446.66666667px を維持するための設定 */
  width: calc(33.333333% - 0.66667px); /* 1px border分を調整 */
  box-sizing: content-box; /* ボーダーを外側に配置 */
  min-height: 0;
  /* スクロールアニメーション用 */
  opacity: 0;
  transform: translateY(20px);
}

/* 右端の列のボーダー削除 */
.top__work__content__list:nth-child(3n) {
  border-right: none;
}



/* 作品リンク全体 - 完全等幅設定 */
.work__content__link {
  display: block;
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
}

/* 作品タイトル */
.top__work__content__title {
  color: var(--txt-color);
  font-family: "Kozuka Mincho Pro","Zen Old Mincho";
  font-size: var(--main--topicfont);
  font-weight: 700;
  margin-bottom: 24px;
  padding: 72px 16px 0;
  letter-spacing: 1.28px;
}

/* 画像コンテナ */
.top__work__content__imgbox {
  width: calc(100% - 32px);
  margin: 0 16px;
  overflow: hidden;
  position: relative;
}

.top__work__content__imgitem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* タイプ情報（WEB SITE / 自主制作など）*/
.type__box {
  display: flex;
  gap: 8px;
  padding-left: 16px;
  margin-top: 8px;
}

.type__item {
  border: 1px dotted var(--txt-color);
  padding: 4px 8px;
}

.type__txt {
  color: var(--txt-color);
  font-size: 1.3rem;
  font-family: "Minion Pro","Lusitana";
  font-weight: 400;
  letter-spacing: 0.52px;
}

.type__txt__jp {
  font-family: "Kozuka Mincho Pro","Zen Old Mincho";
}

/* VIEW MOREエリア */
.work__view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--txt-color);
  border-bottom: 1px solid var(--txt-color);
  padding: 10px 16px 10px 24px;
  margin-top: 48px;
}

.top__work__content__box .top__work__content__list:nth-child(7) .work__view {
  border-bottom: none;
}
.top__work__content__box .top__work__content__list:last-of-type .work__view {
  border-bottom: none;
}


.work__view__txt {
  color: var(--txt-color);
  font-family: "Minion Pro","Lusitana";
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.work__view__arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

/* ホバーエフェクト */
.top__work__content__list:hover .top__work__content__imgitem {
  transform: scale(1.05);
}

.top__work__content__list:hover .work__view__arrow {
  transform: translateX(3px);
}

/* フィルタリング・アニメーション用クラス */
.top__work__content__list[data-category] {
  display: block;
}

.top__work__content__list.filtered-out {
  display: none;
}

.top__work__content__list.fade-in {
  animation: fadeInScale 0.6s ease forwards;
}

.top__work__content__list.show {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  /* 作品リンク全体 */
  .work__content__link {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* WORKコンテナ */
  .top__work__content__box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左揃え */
    gap: 0; /* ボーダー考慮 */
    width: 100%;
  }

  /* 個別作品アイテム - 2列固定（可変幅） */
  .top__work__content__list {
    flex: 0 0 calc(50% - 0.5px); /* 2列の比率、border考慮 */
   
  
    display: flex;
    flex-direction: column;
    max-width: none;             /* 固定幅は解除 */
    min-width: 0;                /* 縮小可能 */
  }
  .top__work__content__list:last-of-type{
border-top: 1px solid transparent;
  }

  /* 右端の列のボーダー削除 */
  .top__work__content__list:nth-child(2n) {
    border-right: none;
  }

  
  .top__work__content__list:nth-of-type(3) {
border-right: 1px solid var(--txt-color);
}

  /* 内部要素のスタイル */
  .top__work__content__title {
    flex: 0 0 auto;
    padding-top:24px ;
    margin-bottom: 16px;
  }

  .top__work__content__imgbox {
    flex: 1;
   
  }

  .type__box {
    flex: 0 0 auto;
    padding: 0 16px 0 16px;
  }

  .work__view {
    flex: 0 0 auto;
    border-top: 1px solid var(--txt-color);
   margin-top: 24px;
    padding:8px 16px;
  }

  /* カテゴリーフィルター */
  .work__category__grid__main {
    padding: 16px 0 16px var(--section-margin);
  }

  .work__category__grid__main::after {
    display: none;
  }

  .work__category-filter {
    padding: 0;
    margin: 0;
  }

  .work__category__filter__item {
    padding: 0;
    margin-left: 24px;
  }

  .work__category__filter__item::before {
    bottom: 30%;
  }
}




@media (max-width: 425px) {
  /* スマホ：1カラム設定 */
 .work__category__filter__item::before {
    bottom: 20%;
  }

  
  .top__work__content__box{
    flex-direction: column;
  }
  .top__work__content__list {
    width: 100%;
    
 
  }
  
  /* 前のボーダー設定をすべてリセット */
  .top__work__content__list{
    border: none;
  
  }
  
 
  


   .top__work__content__imgbox {
    aspect-ratio: 16/10;
  }
  


  



  .top__work__content__list:nth-of-type(7) .work__view {
 border-bottom: 1px solid var(--txt-color) !important;
}
 
  

  


}




/* フィルタリング用のクラス（JS連携用） */
.top__work__content__list[data-category] {
  display: block;
}

.top__work__content__list.filtered-out {
  display: none;
}

/* アニメーション効果 */
.top__work__content__list.fade-in {
  animation: fadeInScale 0.6s ease forwards;
}

@keyframes fadeInScale {
  from {
      opacity: 0;
      transform: scale(0.95) translateY(20px);
  }
  to {
      opacity: 1;
      transform: scale(1) translateY(0);
  }
}



/* WORKセクション全体の調整 */



/* ===========================================
   フィルター切り替え時のボーダースタイル
   =========================================== */

/* ===========================================
   1440px デスクトップ用スタイル
   =========================================== */
 
    
    /* BANNERフィルター選択時のスタイル */
  
    body[data-filter="banner"] .work__view {
      border-bottom: none;
    }
    
    /* BANNERフィルター選択時 - 6個目の要素に右ボーダー追加 */
    body[data-filter="banner"] .top__work__content__list:nth-of-type(6) .work__content__link {
        border-right: 1px solid var(--txt-color);
    }
    body[data-filter="banner"] .top__work__content__list:last-of-type {
        border-right: none;
    }
    
    /* WEBSITEフィルター選択時 - 4番目と5番目の要素のwork__viewのボーダーを削除 */
    body[data-filter="website"] .top__work__content__box .top__work__content__list:nth-child(4) .work__view,
    body[data-filter="website"] .top__work__content__box .top__work__content__list:nth-child(5) .work__view {
        border-bottom: none;
    }


/* ===========================================
   768px タブレット用スタイル
   =========================================== */
@media (max-width: 768px) {
   

    

    body[data-filter="website"] .top__work__content__list:nth-child(4) .work__view {
      border-bottom: 1px solid var(--txt-color) !important;
  }
    body[data-filter="website"] .top__work__content__list:nth-child(5) .work__view {
      border-bottom: none;
  }
   

  body[data-filter="banner"] .top__work__content__list:nth-child(6) .work__view {
    border-bottom:1px solid var(--txt-color);
}

    body[data-filter="banner"] .top__work__content__list:nth-of-type(7)  {
      border-right:none;
  }

    body[data-filter="banner"] .top__work__content__list:nth-child(7) .work__view {
    border-bottom: 1px solid var(--txt-color) !important;
  }

  body[data-filter="banner"] .top__work__content__box .top__work__content__list:nth-child(7) .work__view {
    border-bottom: 1px solid var(--txt-color);
}

body[data-filter="banner"] .top__work__content__box .top__work__content__list:nth-child(7) .work__view {
    border-bottom: 1px solid var(--txt-color);
}
    

    
    body[data-filter="banner"] .top__work__content__list:nth-of-type(8) {
        border-right: 1px solid var(--txt-color);
        box-sizing: border-box;
    }
    
   


}

/* ===========================================
   425px モバイル用スタイル
   =========================================== */
@media (max-width: 425px) {
    
    /* WEBSITEフィルター選択時 - 5番目の要素のwork__viewのボーダーを削除 */
    body[data-filter="website"] .top__work__content__list:nth-of-type(5) .work__view {
        border-bottom: none;
    }
    body[data-filter="banner"] .top__work__content__list:nth-of-type(6) .work__content__link {
      border-right:none !important;
  }
}













/* ここからabout */

.section__top__about{
  border-bottom: none;
  border-top: none;
}

.top__topic__about{
border-top: none;
}
.about__grid__box{
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
}


.about__right__box{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 51%;
  max-width: 100%;
  border-left: 1px solid var(--txt-color);
  
}


.top__about__img__box{
  max-width: 100%;
  width:697px ; 
  height: auto;

  padding: 16px; /* 👈 ここで余白を調整 */
 
}
.top__about__img{
  display: block;
  width: 100%;
  height: auto;
}

/* imgここまで */

.about__left__box{
  width: 49%;
}
.top__about__first__box{
  border-bottom: 1px solid var(--txt-color);
  padding: 16px 0  16px clamp(24px, 10.983%,72px)  ;
 
}

.top__about__first__txt{
  color: var(--txt-color);
  font-family: "Kozuka Mincho Pro","Zen Old Mincho";
  font-size: var( --base-font-size);
  font-weight: 300;
}

/* about main txt　の親　箱だよ */

.top__about__main__box{
margin-left:clamp(24px, 10.983%,72px);
}

.top__about__name{
 display: flex; 
 align-items: baseline;
 margin-top: 72px; 
}

.top__about__main__txt{
  color: var(--txt-color);
font-feature-settings: 'palt' on; 
/* 文字詰め */
font-family: "Kozuka Mincho Pro","Zen Old Mincho";
font-size: var(--base-font-size);
font-weight: 300;
line-height: 32px; 
letter-spacing: 0.064rem;
margin-right: 32px;
margin-top: 32px;
margin-bottom: 72px;
text-align: justify;
letter-spacing: 1.36px;
}


.about__main__area{
  display: block;
}
.top__about__view__box{
  border-top: 1px solid var(--txt-color);
  display: flex;
  align-items: center;
}

.about__view__txt{
  color: var(--txt-color);
font-family: "Kozuka Mincho Pro","Zen Old Mincho";
font-size: var(--base-font-size);
font-weight: 700;
margin-left: clamp(24px, 10.983%,72px);
padding: 16px 0
}
.about__view__arrow{
  display: flex;
  justify-content: flex-end;
  margin-left: auto;      
  margin-right: 24px;   
}



/* about animation *
/* .about__view__txt, */
.about__view__arrow {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* hoverでテキスト少し上に、矢印右に */
/* .about__main__area:hover .about__view__txt {
  transform: translateY(-2px); 
} */

.about__main__area:hover .about__view__arrow {
  /* transform: translateX(3px);   */
  transform: translateX(10px);   /* 右に少しスライド */
}


/*ABOUT  SP ここから */
@media screen and (max-width:768px) {
  /* img　ここから */
  .about__grid__box{
    display: block;
  }
  .about__grid__box{
   display: block;

  }
  .about__right__box{
        width: 97.797%;
        /* レイアウトの限界　100％にしてもいいかも */
         border-left:none;
  }

.top__about__img__box{
  width: auto;
}

  /* テキストエリアここから */
  
  .about__left__box{
    width: auto;
  }

  .top__about__first__box{
    border-top: 1px solid var(--txt-color);
    padding-left: 7%;
  }
 .top__about__first__txt{
  letter-spacing: 0.56px;

 } 
 
 .top__about__name{
  margin-top: 24px;
 }

 .top__about__main__box{
  margin-left: 7%;
 }
 .top__about__main__txt{
margin-top: 16px;
margin-bottom: 24px;
margin-right: 16px;
  letter-spacing: 0.86px;
 }
 .about__view__txt{
  margin-left: 7%;

 }
}


@media screen and (min-width:1700px) {
.top__about__img__box{
  width:624px; 

 
}
  
}