@charset "UTF-8";

 /* =========================
   PICT index ? brand tone refine
   (keep square grid)
   ========================= */

/* pict detail page only */
body.force-sp .news_headline1{
  border: none !important;
  background: none !important;
  padding: 0 !important;

  width: min(1240px, 92%);
  margin: 80px auto 50px;

  font-size: clamp(18px, 3vw, 24px);
  letter-spacing: .10em;
  font-weight: 500;
}


body.force-sp .news_headline1::after {
  border: none !important;  
}
 
  

/* 全体の余白とリズム */
ul.list{
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) 0 clamp(80px, 10vw, 140px);
  gap: clamp(26px, 3vw, 46px);
}

/* liの「margin auto」由来の不安定さを消す */
ul.list li{
  margin: 0 !important;
}

/* SP：2列を安定させる（既存のcalc/マージン依存を卒業） */
@media (max-width: 767px){
  ul.list{
    display: grid;                 /* flexからgridへ上書き */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
  }
  ul.list li{
    width: auto !important;
  }
}

/* PC：4列を安定させる（既存の%とmargin-right方式を卒業） */
@media (min-width: 768px){
  ul.list{
    display: grid;                 /* flexからgridへ上書き */
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
    row-gap: 80px; /* ←縦を広くする */
  }
  ul.list li{
    width: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* サムネ枠：正方形は維持しつつ、枠線を消して静かに */
ul.list .img{
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 6px; 
}

ul.list .img:after{
  border: none !important;         /* 枠線削除 */
}

/* 画像：中央トリミングは維持しつつ、トーンだけ整える */
ul.list .img img{
  max-width: none;                 /* 中央配置の歪み回避 */
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0; left: 0;                 /* 50%中央寄せをやめ、coverで統一 */
  transform: none;
  filter: saturate(92%) contrast(98%);
}

/* 既存の absolute センタリング構造を保ちながら coverに寄せる */
ul.list .img figure{
  text-align: left;
}

/* リンク：反応は“弱く” */
ul.list li a{
  text-decoration: none;
  color: inherit;
  transition: opacity .25s ease;
}
ul.list li a:hover{
  opacity: .85;  
}

/* キャプション：小さく、字間で整える */
ul.list p.caption{
 margin-top: 12px;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(0,0,0,.65);
}

/* 見出し（h4）がある場合：余白を整える */
h4{
  width: min(1100px, 92%);
  margin: clamp(40px, 7vw, 90px) auto 22px;
  font-size: 14px;
  letter-spacing: .14em;
  font-weight: 500;
}
  
ul.list .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform .6s ease;
  filter: contrast(98%) saturate(94%);
}  
ul.list li a:hover .img img{
  transform: scale(1.02);
}  
    
  
  @media (min-width:1024px){
  ul.list li{
    display: flex;
    flex-direction: column;
  }

  ul.list p.caption{
    text-align: left;
    margin-top: 14px;
  }
}
  
/* =========================
   PICT category section
   ========================= */

.ns-cat{
  width: min(1240px, 92%);
  margin: clamp(90px, 10vw, 140px) auto 60px;
  padding-top: 28px;
  position: relative;
}

.ns-pict-section:first-of-type .ns-cat{
  margin-top: clamp(50px, 6vw, 90px);
}

/* 上にごく細い線 */
.ns-cat::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:40px;
  height:1px;
  background: rgba(0,0,0,.25);
}

/* 英語（上段） */
.ns-cat__en{
  display:block;
  font-size: 14px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  margin-bottom: 8px;
}

/* 日本語（主タイトル） */
.ns-cat__jp{
  display:block;
  font-size: clamp(26px, 3.2vw, 18px);
  letter-spacing: .08em;
  font-weight: 500;
  color: rgba(0,0,0,.85);
}
  
  
  
  /* =========================
   PICT list ? rebuild (safe)
   ========================= */

/* 一覧：gridで統一 */
ul.list{
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 56px) 0 clamp(70px, 10vw, 130px);
  list-style: none;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;   /* ← 中央の隙間 */
  row-gap: 28px;      /* ← 縦は広め */
}

/* PCは4列 */
@media (min-width: 768px){
  ul.list{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 52px);
  }
}

/* 既存の幅/マージン制御を無効化 */
ul.list li{
  width: auto !important;
  margin: 0 !important;
}

/* 正方形サムネ：aspect-ratioで確実に */
ul.list .img{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;

  border-radius: 6px;
  margin-bottom: 12px;
}

/* 枠線（疑似要素）は完全停止 */
ul.list .img:after{
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* レガシーabsolute構造を“上から押さえ込む” */
ul.list .img .img_inner,
ul.list .img figure{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

/* 画像：coverで統一（空間写真向けに少し上寄せ） */
ul.list .img img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 35%;
  transform: none !important;

  filter: saturate(92%) contrast(98%);
  display: block;
}

/* リンク：静かな反応 */
ul.list li a{
  text-decoration: none;
  color: inherit;
  transition: opacity .25s ease;
}
ul.list li a:hover{
  opacity: .92;
}

/* キャプション：可読性と品 */
ul.list p.caption{
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .06em;
  color: rgba(10,10,10,.65);
}
  
  /* =========================
   PICT list ? SP spacing refine
   ========================= */
@media (max-width: 767px){

  /* 外側の余白＝誌面の呼吸 */
  ul.list{
    width: min(520px, 92%);
    padding: 22px 0 84px;
    /* 横より縦を広めにして“写真集”のリズムを作る */
column-gap: clamp(18px, 4vw, 20px);
  }

  /* サムネとキャプションの間 */
  ul.list .img{
    margin-bottom: 12px;
    border-radius: 6px;
  }

  /* キャプションを少しだけ読みやすく（詰まり防止） */
  ul.list p.caption{
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .06em;
  }
}
  
/* PC：3列（20枚以上でも“誌面”を保つ） */
@media (min-width: 1024px){
  ul.list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(38px, 3.5vw, 56px);
    row-gap: clamp(72px, 6vw, 110px);
  }
}
ul.list .img img{
  filter: saturate(94%) contrast(98%) brightness(0.98);
}

  
/* -------------------------
   Styling（タグ群）
-------------------------- */

.f10{
  margin-top: 28px;
}

/* 見出し */
ul.list li .f10 h5{
  border-bottom:none;
}

.f10 h5{
  position: relative;
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(0,0,0,.6);
  margin: 50px 0 18px;
  padding-bottom: 14px;
}

.f10 h5:first-of-type{
  margin-top: 0;
}

.f10 h5::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:40px;              /* ←短く */
  height:1px;
  background: rgba(0,0,0,.25);
}

/* タグ群 */
  .f10 .n_button{
    display: inline;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;

    font-size: 11px;
    letter-spacing: .04em;
    color: rgba(0,0,0,.55);
  }

  .f10 .n_button + .n_button::before{
    content: " / ";
    color: rgba(0,0,0,.25);
  }

  .f10{
    text-align: left;
  }


/* -------------------------
   Download CTA
-------------------------- */

.f10 .w_button{
  display: block !important;
  width: 100% !important;
  padding: 14px 18px;
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: .12em;
  text-align: center;
  text-decoration: none;

  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.25);
  background: #fff;
  color: #000;

  transition: all .25s ease;
}

.f10 .w_button:hover{
  background: #000;
  color: #fff;
}
.f10 .w_button:first-of-type{
  opacity: .75;
}

/* =========================
   Filter (quiet)
   ========================= */
.filter-list{
  width: min(1240px, 92%);
  margin: 0 auto 40px;
  padding: 0;
  list-style: none;

  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* 見た目：ボタンではなく“ラベル” */
.filter-list li{
  width: auto;                 /* ←固定幅をやめる */
  background: transparent;
  border: 1px solid rgba(10,10,10,.12);
  border-radius: 999px;

  padding: 9px 14px;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
  color: rgba(10,10,10,.70);
  letter-spacing: .06em;
  line-height: 1;
}

.filter-list li span{
  font-size: 12px;
  letter-spacing: .08em;
}

/* Active：黒ベタにしない。線と文字で示す */
.filter-list li.is-active{
  border-color: rgba(10,10,10,.35);
  color: rgba(10,10,10,.92);
  background: rgba(10,10,10,.03);
}

/* Hover：静か */
@media (hover:hover){
  .filter-list li:hover{
    border-color: rgba(10,10,10,.22);
  }
}

/* 「一覧に戻る」はリンクなので同じ見た目に寄せる */
.filter-list li a{
  display: block;
  color: inherit;
  text-decoration: none;
}

/* SP：横スクロール帯（“写真の前の目次”） */
@media (max-width: 767px){
  .filter-list{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    gap: 8px;
  }
  .filter-list::-webkit-scrollbar{ height: 6px; }
  .filter-list::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius: 999px; }
  .filter-list li{
    flex: 0 0 auto;
    padding: 10px 14px;
  }
  .filter-list li span{
    font-size: 11px;
    white-space: nowrap;
  }
}
 /* 一覧へ戻る（静かな帰路） */
body.force-sp .q_button{
  padding: 14px 24px;
  font-size: 13px;
  letter-spacing: .12em;
  border-bottom: 1px solid rgba(0,0,0,.20);
  background: transparent;
  box-shadow: none;
  color: rgba(0,0,0,.80) !important;
  display: inline-block;
  min-width: 220px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  transition: border-color .25s ease, color .25s ease;
}

/* hoverは静かに */
body.force-sp .q_button:hover{
  background: none;
  box-shadow: none;
  color: rgba(0,0,0,.90) !important;
  border-color: rgba(0,0,0,.35);
}

/* =========================
   GALLERY list (natural)
   ========================= */
body.ns-gallery ul.list{
  row-gap: 80px;
}

/* 画像は固定 */
body.ns-gallery ul.list .img{
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
/* 画像のセンタリング */
body.ns-gallery ul.list .img figure,
body.ns-gallery ul.list .img .img_inner{
  position: static;
  height: 100%;
}

body.ns-gallery ul.list .img img{
  position: static;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;

  object-fit: cover;
  object-position: center 35%;
  transform: none;
}
body.ns-gallery ul.list .img img{
  filter: saturate(94%) contrast(98%) brightness(0.98);
}
/* タイトル */
body.ns-gallery ul.list .caption{
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: .06em;
  color: rgba(0,0,0,.86);
}

/* 抜粋 */
body.ns-gallery .p-entry__excerpt{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: .03em;
  color: rgba(0,0,0,.64);
  margin-bottom: 10px;
}

/* キーワード */
body.ns-gallery .p-entry__meta{
  margin: 0;
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: rgba(0,0,0,.50);
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* リンク */
body.ns-gallery ul.list li a{
  text-decoration: none;
  color: inherit;
  display: block;
}

@media (hover:hover){
  body.ns-gallery ul.list li a:hover .img img{
    filter: saturate(96%) contrast(99%) brightness(0.97);
  }
}
 
/* GALLERY 検索 */
.c-pw__box{
  border: none;
  background: transparent;
  padding: 0;
  margin: 0 auto 60px;
  width: min(900px, 92%);
}

.c-pw__box-label{
  display:block;
  font-size: 12px;
  letter-spacing: .12em;
  margin-bottom: 12px;
  color: rgba(0,0,0,.55);
}

.c-pw__box-inner{
  display:flex;
  gap:12px;
}

.c-pw__box-input{
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.25);
  height: 44px;
  padding: 0 6px;
  background: transparent;
  font-size: 14px;
}

.c-pw__box-input:focus{
  outline:none;
  border-bottom-color: rgba(0,0,0,.6);
}

.c-pw__btn--submit{
  background: transparent;
  border: 1px solid rgba(0,0,0,.2);
  color: rgba(0,0,0,.8);
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: .08em;
  transition: border-color .2s ease;
}

.c-pw__btn--submit:hover{
  background: transparent;
  border-color: rgba(0,0,0,.4);
}

/* =========================
   GALLERY detail (book-like)
   ========================= */
.ns-gallery-detail .page-width.page-content.splist{
  width: min(900px, 92%);
  margin: 0 auto;
}

/* GALLERY詳細：ラッパーで強制スコープ */
.page-width.page-content.splist h3.style4a{
  margin: 3.4em 0 1.0em !important;
  font-size: 22px !important;
  line-height: 1.6 !important;
  letter-spacing: .06em !important;
  font-weight: 500 !important;
  color: rgba(0,0,0,.86) !important;
  border: none !important;          /* 下線系を殺す */
  background: none !important;
  padding: 0 0 12px !important;
}

.page-width.page-content.splist br{
  display:none;
}
.page-width.page-content.splist{
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: .03em;
  color: rgba(0,0,0,.72);
}

.page-width.page-content.splist p{
  margin: 0 0 1.8em;
}
.page-width.page-content.splist img{
   display:block;
  width:100%;
  height:auto;

  border-radius: 3px;

  margin: 3.0em 0 1.6em; 
}
@media (max-width: 767px){
  .page-width.page-content.splist{
    font-size: 13px;
    line-height: 1.95;
  }
  .page-width.page-content.splist h3.style4a{
    font-size: 16px !important;
  }
  .page-width.page-content.splist img{
    margin: 2.1em 0 1.0em;
    border-radius: 3px;
  }
}
 /* =========================
   wrappersem ? spec memo
   ========================= */

/* 仕様ブロックは br を復活 */
.page-width.page-content.splist .wrappersem br{ display:inline; }

.page-width.page-content.splist .wrappersem{
  margin: 5.5em 0 0;
  padding-top: 3.0em;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* 見出し */
.page-width.page-content.splist .wrappersem h4{
  margin: 0 0 1.2em;
  font-size: 14px;
  letter-spacing: .12em;
  font-weight: 500;
  color: rgba(0,0,0,.82);
}

/* 仕様テキスト */
.page-width.page-content.splist .wrappersem .small{
  margin: 0 0 1.6em;
  font-size: 13px;
  line-height: 2.0;
  letter-spacing: .02em;
  color: rgba(0,0,0,.68);

  font-feature-settings: "palt";
}


/* 先頭の【】の圧を下げる：全角記号を少し淡く */
.page-width.page-content.splist .wrappersem .small{
}

/* ハッシュタグ群：注記として薄く、読みやすく */
.page-width.page-content.splist .wrappersem .p-article01__meta{
  margin: 0;
}

.page-width.page-content.splist .wrappersem .p-article01__category{
  display:block;
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: rgba(0,0,0,.50);
  word-break: break-word;
  overflow-wrap: anywhere;

}
.page-width.page-content.splist .wrappersem{
  margin: 6em 0 0;
  padding: 3.2em 0;

  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
/* =========================
   Detail page ? bottom nav
   ========================= */

.page-width.page-content.splist .detail-nav{
  margin: 4.5em 0 0;
  text-align: center;
}

/* ボタンを“リンク”に戻す */
.page-width.page-content.splist .detail-nav .t_button{
  display:inline-block;

  background:none;
  border:none;
  box-shadow:none;
  padding:0;

  font-size:13px;
  letter-spacing:.14em;
  font-weight:400;

  color:rgba(0,0,0,.62);
  text-decoration:none;

  border-bottom:1px solid rgba(0,0,0,.18);
  transition:.25s ease;
}

.page-width.page-content.splist .detail-nav .t_button:hover{
  color:rgba(0,0,0,.88);
  border-color:rgba(0,0,0,.35);
}