@charset "utf-8";

/* フォント設定 */
html{
  font-size: 62.5%;
} 
/* 基本10px */

body{
  font-family:  "inter", "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.7;
  font-size: 2rem;
  text-transform: uppercase;  
}

.wrapper-l{
  max-width: 1150px;
  width: 100%;
  margin: 0 auto;
}

.wrapper-m{
  max-width: 875px;
  width: 100%;
  margin: 0 auto;
}

.wrapper-s{
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

.top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 24px;
}

.top h1 img{
  width: 240px;
  aspect-ratio: 548/138;
  margin-left: 20px;
}

.top h1:hover{
  opacity: 0.6;
  transition: 0.6s;
}

.navigation{
    display: flex;
    gap: 24px ;
    letter-spacing: 0.10em;
}

.navigation > li:hover{
  color: #dc6c6c;
  transition: 0.7s;
}

.navigation > li{
  position: relative; /* dropdownの基準点 */
}

.navigation .dropdown{
  position: absolute;
  display: none;
  top: 100%;
  left: 0%;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 15px 0 15px;
  z-index: 999;
}

.navigation li:hover > .dropdown{
  display: block;
}

.navigation .dropdown li:hover{
  background: none;
  opacity: 0.6;
  transition: 0.6s;
}

.navigation .dropdown li a{
 display: block; 
 color: #4e5c89;
}

.content { display: none; }
.content.is-active { display: block; }

.tab.is-active {  color: #4e5c89;}

header picture img{
  padding-bottom: 160px;
}

.channel{
  display: flex;
  gap: 32px;
  padding-bottom: 90px;
  font-size: 14px;
  font-weight: 900;
  width: fit-content;
  margin-left: auto;
  margin-right: 40px;
}

.channel > h2:hover{
  color: #718ce7;
  transition: 0.7s;
}

.content{    
    font-size: 48px;
    font-weight: 700;
    gap: 100px;
    letter-spacing: 0.10em;
}

.timeline > li a:hover{
  color: #7bb6ae;
  transition: 0.7s;
}

.archive{
  font-size: 45px;
  font-weight: 650;
}

footer{
   text-align: center; 
   font-family: "noto serif jp";
   text-transform: capitalize;
   font-size: 12px;
   padding-top: 220px;
   padding-bottom: 32px;
}

footer a img{
    margin: 0 auto;
    padding-bottom: 14px;
}

footer a img {
  transition: opacity 0.6s;
}

footer a:hover img {
  opacity: 0.4;
}



/*--------------------------------
 TOP：toggleスイッチ
---------------------------------*/
.content{
  display:none;
  opacity:0;
  transition: opacity .4s ease;
}

.content.is-active{
  display:block;
  opacity:1;
}

.channel .tab{
  cursor:pointer;
  opacity:.4;
  transition: opacity .2s ease;
}

.channel .tab.is-active{
  opacity:1;
}


/*--------------------------------
 TOP：TIMELINEページ
---------------------------------*/
.content.timeline{
  --gap: 14px;
  --line1: 300px;  /* LIVE→ARCHIVE */
  --line2: 177px;  /* ARCHIVE→EARLY */
  --stroke: 1px;

  margin: 0 auto;
  padding: 0;
  width: max-content;
  text-align: center;
  list-style: none;
}

/* liは余計なpaddingを持たない */
.content.timeline li{
  position: relative;
  margin: 0;
  padding: 0;
}

.content.timeline a{
  display: inline-block;
  letter-spacing: .12em;
  text-decoration: none;
}

/* 「間隔」は“前の項目の下”にだけ作る */
.content.timeline li:nth-child(1){
  margin-bottom: calc(var(--gap) + var(--line1) + var(--gap));
  /* 上のgap + 線 + 下のgap（=上下14pxずつ） */
}

.content.timeline li:nth-child(2){
  margin-bottom: calc(var(--gap) + var(--line2) + var(--gap));
}

/* 線は「次の項目の上」に生やす（事故りにくい） */
.content.timeline li:nth-child(2)::before,
.content.timeline li:nth-child(3)::before{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--stroke);
  background: currentColor;
  opacity: 1;

  /* 文字の上から gap 空けて、その上に線を伸ばす */
  top: calc(-1 * (var(--gap) + var(--line2)));
}

.content.timeline li:nth-child(2)::before{
  height: var(--line1);
  top: calc(-1 * (var(--gap) + var(--line1)));
}

.content.timeline li:nth-child(3)::before{
  height: var(--line2);
  top: calc(-1 * (var(--gap) + var(--line2)));
}


/* reveal発動 */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s ease, transform .8s ease;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}



/*--------------------------------
 TOP：VIEWページ
---------------------------------*/
/* ステージ（基準） */
.content[data-view="view"]{
  position: relative;
  min-height: 60vh;        /* ←点在させるための高さ。好みで調整 */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* liを絶対配置できるように */
.content[data-view="view"] li{
  position: absolute;
}

/* 文字 */
.content[data-view="view"] a{
  display: inline-block;
  letter-spacing: .12em;
  text-decoration: none;
  font-weight: 600;
}

/* PC配置：画像の感じに寄せる */
.content[data-view="view"] li:nth-child(1){ /* BODY */
  left: 8vw;
  top: 20%;
}

.content[data-view="view"] li:nth-child(2){ /* TIME */
  left: 25vw;
  top: 42%;
}

.content[data-view="view"] li:nth-child(3){ /* RELATION */
  right: 1vw;
  bottom: 5%;
}

/*  SPは読みやすく縦並びに切り替え */
@media (max-width: 768px){
  .content[data-view="view"]{
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0;
  }
  .content[data-view="view"] li{
    position: static;  /* absolute解除 */
  }
}







/*--------------------------------
 下層：LIVEページ
---------------------------------*/
.live h2,
.castoff h2,
.early h2,
.selected h2,
.about h2,
.body h2,
.time h2,
.reflection h2{
  text-align: center;
  letter-spacing: 0.10em;;
}

.mercury{
  display: flex;
  /* justify-content: space-between; */
  padding-top: 16px;
  gap: 80px;
}

.pendant{
  padding-top: 210px;
}

.mirror{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 160px;
  padding-top: 150px;
}



.mirror_items{
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
}


/*--------------------------------
 下層：SELECTEDページ
---------------------------------*/

.selected article h3{
  margin-bottom: 40px;
  letter-spacing: 0.10em;;
  font-weight: 700;
  line-height: 1.7;
  font-size: 28px;
  text-transform: uppercase;  
}

.stores{
  padding-top: 88px;
  padding-bottom: 180px;
}

.stores ul li{
  padding-bottom: 56px;
  font-weight: 500;
  font-size: 16px;
}

.shopname{
  text-transform: none;
}

.publication figure figcaption{
  padding-bottom: 24px;
  font-weight: 500;
  font-size: 16px;
}

.stores ul li strong,
.publication figure strong{
  font-weight: 700;
  line-height: 1.7;
}

.stores ul > li:hover,
.publication figure > :hover{
  color: #718ce7;
  transition: 0.7s;
}

.publication img{
 border: #bbb solid 0.1px;
 margin-bottom: 128px;
}


/*--------------------------------
 下層：CONCEPTページ
---------------------------------*/

.concept{
  padding-top: 88px;
  padding-bottom: 160px;
}

.about h3{
  margin-bottom: 16px;
  letter-spacing: 0.10em;
  font-weight: 700;
  line-height: 1.7;
  font-size: 28px;
  text-transform: uppercase;  
}

.concept p,
.profile p{
  font-family: "Noto Sans JP", "inter", sans-serif;
  padding-bottom: 16px;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.10em;;
}

.concept section h4{
  letter-spacing: 0.10em;
  font-weight: 700;
  line-height: 1.7;
  padding-top: 24px;
}

.profile p strong{
  letter-spacing: 0.09em;
  font-weight: 700;
  line-height: 1.5;
  padding-top: 24px;
  font-size: 24px;
  text-transform: capitalize;
}

.profile{
  padding-bottom: 104px;
}

h4 span{
  color: #878282;
}

/*--------------------------------
 下層：earlyページ
---------------------------------*/

.wall{
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);

  display: grid;
  /* ★ここが肝：3列だけ・中身にフィット */
  grid-template-columns: repeat(3, max-content);

  column-gap: 40px;  /* 好みで */
  row-gap: 160px;

  justify-content: center; /* 全体を中央に寄せる */
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 80px;
  padding-bottom: 160px;

  align-items: center;
}

.wall img{
  display: block;
  height: auto;
  max-width: 100%;
}

/* 1段目：1枚は横いっぱいで中央 */
.remain{ grid-column: 1 / -1; justify-self: center; }
.remain img{ width: clamp(280px, 80vw, 580px); }

/* 2段目：3枚 */
.shadow01{ grid-column: 1; justify-self: end; }
.shadow01 img{ width: clamp(180px, 34vw, 309px);
transform: translateX(clamp(-20px, -4vw, -60px)); }

.shadow03{ grid-column: 2; justify-self: center; }
.shadow03 img{ width: clamp(140px, 24vw, 210px);
transform: translateX(clamp(  0px,  3vw,  40px));  }

.wearingwall_ex{ grid-column: 3; justify-self: start; }
.wearingwall_ex img{ width: clamp(200px, 38vw, 373px);
transform: translateX(clamp( 20px,  6vw, 110px));  }


/* 3段目：2枚 → “隣同士(1と3)”だと離れるので、1と2に置く */

/* .wearingwall img{ 
  width: 407px;
  transform: translateX(-40px);
 } */
.wearingwall img{ width: clamp(220px, 44vw, 407px);
transform: translateX(clamp(-10px, -3vw, -40px)); }

/* .hiifukan img{ 
 width: 386px;
 transform: translateX(80px); 
} */
.hiifukan img{ width: clamp(220px, 42vw, 386px);
transform: translateX(clamp(  0px,  4vw,  80px)); }

.wearingwall{
  grid-row: 3;
  grid-column: 1 / 3;   /* 1〜2列を使う */
  justify-self: center;
}

.hiifukan{
  grid-row: 3;
  grid-column: 2 / 4;   /* 2〜3列を使う */
  justify-self: center;
}

/* 4段目：1枚は横いっぱいで中央 */
.fresh{ grid-column: 1 / -1; justify-self: center; }
.fresh  img{ width: clamp(280px, 80vw, 580px); }

/* 5段目：2枚は中央 */
.line img{ width: clamp(240px, 52vw, 440px); }

.umbilicalcord img{ width: clamp(240px, 54vw, 456px); }


.line{
  grid-row: 5;
  grid-column: 1 / 3;   /* 1〜2列を使う */
  justify-self: start;
  /* ← 1.5列“っぽく” */   
}

.umbilicalcord{
  grid-row: 5;
  grid-column: 2 / 4;   /* 2〜3列を使う */
  justify-self: end;
  /* * ← 2.5列“っぽく” */ 
}

/* 6段目：1枚は横いっぱいで中央 */
.skin{ grid-column: 1 / -1; justify-self: center; }
.skin   img{ width: clamp(240px, 70vw, 500px); }





/*--------------------------------
 作品見出し
---------------------------------*/
/* クリックできるように */
.js-art { cursor: zoom-in; }

/* modal */
.art-modal{ position:fixed; inset:0; display:none; z-index:99; }
.art-modal.is-open{ display:block; }
.art-modal__backdrop{ position:absolute; inset:0; background:rgba(122, 112, 112, 0.5); }

.art-modal__panel{
  position:relative;
  max-width:min(980px, 92vw);
  max-height:90vh;
  margin:5vh auto;
  overflow:hidden;
}
.art-modal__close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; border-radius:999px;
  /* border:1px solid rgba(255,255,255,.05); */
  /* background:rgba(94, 88, 88, 0.35); */
  color:#eee; font-size:22px; cursor:pointer; z-index:2;
}
.art-modal__figure{ margin:0; display:flex; flex-direction:column; }
.art-modal__figure img{
  width:100%; max-height:70vh; object-fit:contain;
  background:#675e5e; display:block;
}

/* nav */
.art-modal__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  /* width:46px; height:46px; border-radius:999px; */
  /* border:1px solid rgba(255,255,255,.18); */
  /* background:rgba(93, 84, 84, 0.35); */
  color:#eee; font-size:28px; cursor:pointer;
  display:none;
}
.art-modal__prev{ left:12px; }
.art-modal__next{ right:12px; }

/* label */
.art-label{
  background: rgba(90,80,80,.85);
  padding:14px 16px 16px;
  /* border-top:1px solid rgba(255,255,255,.10); */
}
.art-label__title{ margin:0 0 6px; font-size:18px; color:#f4f1e9; letter-spacing:.02em; }
.art-label__meta{ margin:0; font-size:13px; color:rgba(255,255,255,.75); }
.art-label__dot{ margin:0 8px; opacity:.6; }


/* 見出しの背景グラデーション */
.art-modal__panel{
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.05);
}


/* 以下作品見出し上に帯をつける */
/* 画像を囲む「マット」 */
.art-modal__mat{
  position: relative;          /* navの基準 */
  background: rgba(90,80,80,.85); /* ←いまのグレーに合わせて調整 */
  padding: 28px;               /* ←これが「上・左右・下」の帯になる */
}

/* 画像は白い台紙の上に置く（いまの雰囲気に合う） */
/* .art-modal__mat img{
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
} */



/* 以下コラージュ作品に白いマットをおく */
.art-flat .art-modal__mat{
  padding: 48px;   /* Mercury より太く */
}

.art-modal.is-flat .art-modal__mat img{
  background: #f5f5f3;   /* 完全白じゃないのがコツ */
  padding: 16px;
}

.art-modal__figure img{
  max-width: 88%;
  margin: 0 auto;
}


/* 以下コラージュ作品以外にに白いマットをおかない */
.art-modal__mat img{
  background: transparent;  
  padding: 0;
}

/* mmを小文字にする　*/
.art-modal p,
.art-modal li,
.art-modal dd,
.art-modal dt,
.art-modal span {
  text-transform: none;
}

.art-modal .art-modal__title {
  text-transform: uppercase;
}

/*--------------------------------
 下層：archive(cast off)ページ
---------------------------------*/


.castoffskin{
  display: grid;
  /* ★ここが肝：3列だけ・中身にフィット */
  grid-template-columns: repeat(3, minmax(0, 1fr));

  column-gap: 40px;  /* 好みで */
  row-gap: 280px;

  justify-content: center; /* 全体を中央に寄せる */
  list-style: none;
  margin: 0;
  padding: 0;
  
  padding-bottom: 160px;
  padding-top: 60px;
  align-items: center;
}

/* .castoffskin{
  overflow-x: clip;
} */

html, body{
  overflow-x: clip;   /* clipが不安なら hidden */
}

/* 作品エリアは切らない */
.castoffskin{
  overflow: visible;
}



/* 1段目：3枚 */
.castoff01{ grid-column: 1; justify-self: end; }
.castoff01 img{ 
  width: 310px; 
  transform: translateX(-80px);}

.castoff05{ grid-column: 2; justify-self: center; }
.castoff05 img{ 
  width: 267px; 
  transform: translateX(20px) translateY(123px);
  padding-top: 30px;
}

.castoff04{ grid-column: 3; justify-self: start; }
.castoff04 img{ 
  width: 256px;
  transform: translateX(140px) translateY(34px); }


/* 2段目：3枚 */
.castoff02{ grid-column: 1; justify-self: end; }
.castoff02 img{ 
  width: 309px; 
  transform: translateX(-80px);
  padding-top: 50px;}


.castoff03{ grid-column: 2; justify-self: center; }
.castoff03 img{ 
  width: 284px; 
  transform: translateX(20px);
  padding-top: 30px;}
  

.castoff06{ grid-column: 3; justify-self: start; }
.castoff06 img{ 
  width: 320px;
  transform: translateX(120px);
  padding-top: 90px;}


/* 3段目：2枚 → “隣同士(1と3)”だと離れるので、1と2に置く */

.specimen001 img{ 
  width: 281px;
  transform: translateX(120px);
  padding-top: 20px;  
 }
.specimen002 img{ 
 width: 274px;
 transform: translateX(90px);
padding-top: 20px;
}


.specimen002{
  grid-row: 3;
  grid-column: 2 / 4;   /* 2〜3列を使う */
  justify-self: center;
}



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

  .wrapper-l{
    padding: 0 20px;
  }

  .hero__img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  
@media (min-width: 1025px){
  .castoffskin{
    overflow-x: visible;      /* 切らない */
    padding-inline: 160px;    /* translateX最大±140pxの逃げ場 */
  }
  html, body{
    overflow-x: clip;         /* 画面全体の横スクだけは防ぐ */
  }
}
  
 
/* ① スマホは2列grid（左→右→左→右） */
  .castoffskin{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 1frのはみ出し対策 */
    gap: 40px;
    padding: 24px 16px 150px;

    /* PCの grid 用設定を無効化 */
    row-gap: 0;
    justify-content: initial;
  }


  /* ② PCで付けてた “位置指定” を全部リセット */
  .castoffskin > li{
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    margin: 0;
  }

  /* ③ PCの transform / 固定幅をリセットしてスマホ幅にフィット */
  .castoffskin img{
    width: 100% !important;
    max-width: clamp(180px, 38vw, 280px);
    height: auto;
    max-height: 420px;   /* ←縦長が暴れるのを抑える */
    object-fit: contain;
    margin-inline: auto;
    display: block;
    transform: none !important;
  }


  /* ④ 段差（ギャップ）を出す：片側だけ少し下げる */
  .castoffskin > li:nth-child(even){
    margin-top: 60px;  /* 好みで 20〜50px */
  }

  header picture img{
  padding-bottom: 40px;
}




/*--------------------------------
 LIVEページ
---------------------------------*/
.mercury{
    flex-direction: column;
    gap: 24px;
  }

  .mercury img{
    margin: 0 auto;
  }

  .pendant{
    padding-top: 0;
    margin: 0 auto;
  }


  .mirror_items{
    gap: 16px;
  }

  .mirror_items li{
    width: calc(50% - 8px);
  }

  .mirror{
    padding-top: 80px;
    margin-bottom: 80px;
  }

  .mirror_items img{
    max-width: none;
    width: 100%;
    height: auto;
    display: block;
  }

  
  

 /*--------------------------------
 下層：earlyページ
---------------------------------*/
.wall{
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 56px;
    justify-content: center;
  }

  .wall img{
    width: 100% !important;
    max-width: 260px;   /* ← ここが重要 */
    margin-inline: auto;
    transform: none !important;
  }


  .shadow01 img{
    max-width: 300px;
  }

  .shadow03{ justify-self: start !important; margin-left: 40px; }
  
  /* 縦長を少し抑える */
  .shadow03 img{
    max-width: 200px;
  }

  .wearingwall img{
    max-width: 300px;
  }

  .hiifukan img{
    max-width: 290px;
  }

  /* 横長は少し大きく */
  .wearingwall_ex img,
  .remain img,
  .fresh img,
  .skin img{
    max-width: 500px;
  }
  
  .wearingwall_ex{
    justify-self: center !important;
  }

  .line img{
    max-width: 360px;
  }

  .umbilicalcord img{
    max-width: 380px;
  }

  /* ★PCの grid-row 指定をSPで確実に殺す */
  .wall li{
    grid-row: auto !important;
    justify-self: center !important;
  }

  /* 1段目：1枚 */
  .remain{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  /* 2段目：2枚 */
  .shadow01{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .shadow03{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  /* 3段目：1枚（ここに固定！） */
  .wearingwall_ex{
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  /* 4段目：2枚 */
  .wearingwall{
    grid-column: 1 !important;
    grid-row: 4 !important;
  }
  .hiifukan{
    grid-column: 2 !important;
    grid-row: 4 !important;
  }

  /* 5段目：1枚 */
  .fresh{
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }

  /* 6段目：2枚 */
  .line{
    grid-column: 1 !important;
    grid-row: 6 !important;
  }
  .umbilicalcord{
    grid-column: 2 !important;
    grid-row: 6 !important;
  }

  /* 最後：1枚 */
  .skin{
    grid-column: 1 / -1 !important;
    grid-row: 7 !important;
  }

  /* 任意：フル幅のやつだけ少し大きく */
  .remain img,
  .fresh img,
  .skin img,
  .wearingwall_ex img{
    width: min(92vw, 520px) !important;
    margin-inline: auto;
  }
}







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

  .wrapper-l{
    padding: 0 20px;
  }

  .hero__img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  /* 以下ハンバーガーメニュー */
  body.on{
    overflow: hidden;
    /* ハンバーガーメニューが出ている間はスクロールがされないように */
  }
  div.btn{
    /* ハンバーガーメニューの形を作成 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 30px;
    position: relative;
    z-index: 9999;
    flex: 0 0 30;
    height: 30px;
    margin-right: 10px;
  }
  div.btn span{
    /* 棒線の見た目 */
    display: block;
    width: 100%;
    height: 2px;
    /* 線の太さ */
    background-color: #0d0d0d;
    /* 線の色 */
    transition: 0.4s;
  }

  .global_nav{
    position: fixed;
    top: 0;
    right: -100%;
    width: 75vw;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    padding: 100px 24px 24px; /* 上を空ける */
    transition: .4s;
    overflow-y: auto;
    z-index: 9998;
    top: 80px;
    right: -100%; 
  }

  body.on .global_nav{
    right: 0;
    /* left: auto;   */
    /* bodyにclass名.onが付いている場合、画面の中にメニューを入れる */
  }

  .btn{
    position: fixed;
    top: 5px;
    right: 20px;
    z-index: 9999;
  }

  .global_nav ul{
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
  }

  /* メニューを縦に積む */
 .global_nav .navigation{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
 }

  /* dropdownを親の下に“押し出す”表示にする */
.global_nav .has-dropdown{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* dropdown本体 */
.global_nav .dropdown{
  display: none;
  margin-top: 30px;
  padding-left: 16px;  /* インデント */
}

/* 開いたとき */
.global_nav .dropdown.open{
  display: flex;
  flex-direction: column;
  gap: 8px;
  
}

 .dropdown.open {
  display: block;
 }

 .nav-row{
    display:flex;
    justify-content: space-between;
    align-items:center;
  }
  .dd-toggle{
    background:none;
    border:0;
    font-size:18px;
    padding:8px;
    cursor:pointer;
  }

  .dropdown{ display:none; padding-left:16px; margin-top:8px; }
  .has-dropdown.is-open .dropdown{ display:block; }

 /* もしpositionがどこかで当たってたら強制解除 */
.global_nav .dropdown{
  position: static;
}

  .header_icons{
  gap:12px;  
 }

 .top h1 img{
  width: 200px;
  aspect-ratio: 548/138;
  margin-left: 20px;
 }

 .top{
  padding-bottom: 40px;
 }


 /*--------------------------------
 下層：archive(cast off)ページ
---------------------------------*/
 
/* ① スマホは2列grid（左→右→左→右） */
  .castoffskin{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 24px 16px 150px;
    margin: 0;
    list-style: none;

    /* PCの grid 用設定を無効化 */
    row-gap: 0;
    justify-content: initial;
  }

  /* ② PCで付けてた “位置指定” を全部リセット */
  .castoffskin > li{
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    margin: 0;
  }

  /* ③ PCの transform / 固定幅をリセットしてスマホ幅にフィット */
  .castoffskin img{
    /* width: 100% !important; */
    /* height: auto; */
    display: block;
    transform: none !important;
  }

  /* ④ 段差（ギャップ）を出す：片側だけ少し下げる */
  .castoffskin > li:nth-child(even){
    margin-top: 60px;  /* 好みで 20〜50px */
  }

  header picture img{
  padding-bottom: 40px;
}


/*--------------------------------
 下層：CONCEPTページ
---------------------------------*/

.concept{
  padding-top: 40px;
  padding-bottom: 88px;
  padding-right: 20px;
  padding-left: 20px;
}

.about h3{
  font-size: 24px;
}

.concept p,
.profile p{
  font-size: 14px;
}

.profile p strong{
  padding-top: 24px;
  font-size: 24px;
}

.profile{
  padding-left: 20px;
  padding-right: 20px;
}

  
 /*--------------------------------
 下層：earlyページ
---------------------------------*/
.wall{
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 56px;
    justify-content: center;
  }

  .wall img{
    width: 100% !important;
    max-width: 260px;   /* ← ここが重要 */
    margin-inline: auto;
    transform: none !important;
  }

  .shadow01 img{
    max-width: 290px;
  }


  .shadow03{ justify-self: start !important; margin-left: 40px; }
  
  /* 縦長を少し抑える */
  .shadow03 img{
    max-width: 200px;
  }

  .wearingwall img{
    max-width: 290px;
  }

  .hiifukan img{
    max-width: 280px;
  }

  /* 横長は少し大きく */
  .wearingwall_ex img{
    max-width: 400px;
  }
  
  .wearingwall_ex{
    justify-self: center !important;
  }

  .umbilicalcord img{
    max-width: 320px;
  }
 

  /* フル幅の大きい作品 */
  .remain img,
  .fresh img,
  .skin img{
    max-width: 400px;
  }

  .line img{
    max-width: 300px;
  }

  /* ★PCの grid-row 指定をSPで確実に殺す */
  .wall li{
    grid-row: auto !important;
    justify-self: center !important;
  }

  /* 1段目：1枚 */
  .remain{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  /* 2段目：2枚 */
  .shadow01{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .shadow03{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  /* 3段目：1枚（ここに固定！） */
  .wearingwall_ex{
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  /* 4段目：2枚 */
  .wearingwall{
    grid-column: 1 !important;
    grid-row: 4 !important;
  }
  .hiifukan{
    grid-column: 2 !important;
    grid-row: 4 !important;
  }

  /* 5段目：1枚 */
  .fresh{
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }

  /* 6段目：2枚 */
  .line{
    grid-column: 1 !important;
    grid-row: 6 !important;
  }
  .umbilicalcord{
    grid-column: 2 !important;
    grid-row: 6 !important;
  }

  /* 最後：1枚 */
  .skin{
    grid-column: 1 / -1 !important;
    grid-row: 7 !important;
  }

  /* 任意：フル幅のやつだけ少し大きく */
  .remain img,
  .fresh img,
  .skin img,
  .wearingwall_ex img{
    width: min(92vw, 520px) !important;
    margin-inline: auto;
  }
}






@media screen and (max-width: 430px) {
.top h1 img{
  width: 180px;
  margin-left: 0px;
}

div.btn{
    /* ハンバーガーメニューの形を作成 */
    margin-right: 0px;
  }

h2,
.selected article h3{
    font-size: 24px;
  }

/*--------------------------------
 indexページ
---------------------------------*/

.channel{
  /* display: flex; */
  gap: 8px;
  padding-bottom: 90px;
  width: fit-content;
  margin-left: auto;
  margin-right: 10px;
  flex-direction: column;
}

.content.timeline{
  --gap: 14px;
  --line1: 200px;  /* LIVE→ARCHIVE */
  --line2: 177px;  /* ARCHIVE→EARLY */
}

.content.timeline a{
  /* font-size: 40px; */
  letter-spacing: .12em;
}

footer{
   padding-top: 0px;
}


 /*--------------------------------
 下層：archive(cast off)ページ
---------------------------------*/
/* 1段目：3枚 */
.castoff01 img{ 
  width: 136px; 
  }

.castoff05 img{ 
  width: 130px; 
  }

.castoff04 img{ 
  width: 115px;
  }


/* 2段目：3枚 */
.castoff02 img{ 
  width: 135px; 
  }

.castoff03 img{ 
  width: 120px; 
  }

.castoff06 img{ 
  width: 150px;
  }


/* 3段目：2枚 → “隣同士(1と3)”だと離れるので、1と2に置く */

.specimen001 img{ 
  width: 140px;
  
 }
.specimen002 img{ 
 width: 147px;
}

.pendant img{
    width: 180px;
  }


/*--------------------------------
 作品見出し
---------------------------------*/
.art-modal__close{
  position:absolute; top:1px; right:1px;
}
.art-modal__panel{
  max-height:90vh;
  margin:10vh auto;
}

}