/*
Theme Name: 渡辺隆建築設計事務所
Description:渡辺隆建築設計事務所のテーマ
Version:1.0
Author:FORC CREATIVE
Author URI:https://forc-creative/
*/
@charset "UTF-8";

.none-sp{
  display:none;
}


/* ローディング中はスクロール禁止 */
body.home {
  overflow: hidden;
}

/* ページ表示後にスクロール解放 */
body.home.is-loaded {
  overflow: auto;
}
/* 初期状態：#page は透明 */
#page {
  opacity: 0;
}

/* ローディング完了後にフェードインアニメーションを走らせる */
body.is-loaded #page {
  animation: pageFadeIn 0.8s ease forwards;
}

/* ローディング全体（画面中央にロゴだけ表示） */
.loading {
  position: fixed;
  inset: 0;
  display: flex;
  gap:16px 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff;
  z-index: 9999;
  /* ← ここを修正 */
  opacity: 1;              /* 最初から見えるようにする */
  /* animation: loaderFadeIn 0.5s ease-out forwards; ← 一旦削除 */
}

/* ローダー自体をフェードアウトして消したい時用 */
.loading.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* ロゴ本体：帯はこの中だけに出したいので overflow:hidden */
.loading__logo {
  width: 300px;
  height: 24px;
  display:block;
  background: url(images/logo-jp.svg) no-repeat center / contain;
  position: relative;
  overflow: hidden;
}

.loading__logo2 {
  width: 300px;
  height: 12px;
  display:block;
  background: url(images/logo.svg) no-repeat center / contain;
  position: relative;
  overflow: hidden;
}


/* 上部のグレー帯（ロゴの中だけに出す） */
.loading__logo::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 24px;
  background: #8F9294;
  animation: bandWipe 0.8s ease-in-out 1.2s forwards;
}

p a:hover,li a:hover{
  text-decoration:underline;
}

li.works-grid__item a:hover,.pub-slider li a:hover,li.home-blog__item a:hover,li.works-cat-group a:hover{
  text-decoration:none;
}


/* ページのフェードイン */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* もし bandWipe がまだなければ念のため */
@keyframes bandWipe {
  from { left: -120%; }
  to   { left: 120%; }
}

/* Modern CSS Reset by Andy Bell
   https://piccalil.li/blog/a-modern-css-reset/
*/

/* Box sizing の統一 */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* デフォルトの margin を削除 */
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
    margin: 0;
  }
  
  /* 本文の基本設定 */
  body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  
  /* 画像や動画をコンテナ幅に収める */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  /* フォーム要素のフォントを継承 */
  input, button, textarea, select {
    font: inherit;
  }
  
  /* テキストのオーバーフロー制御 */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  
  /* ルートに stacking context を設定 */
  #root, #__next {
    isolation: isolate;
  }

  ul,li{
    margin:0;
    padding:0;
    list-style:none;
  }

  /* NAVIGATION */
 /* ===== 固定レイヤー類 ===== */
.drawer-nav { position: relative; z-index: 1000; }
/* ヘッダーは使わない：MENUと×（drawer-close）を出さない */
.menu-container .drawer-header { display: none !important; }

/* 1) 右上ハンバーガーを常に最前面＆白 */
/* 右上ハンバーガー（☰ はテキストとして非表示にし、CSSで線を描く） */
.menu-toggle{
    position: fixed;
    top: 19px; right: 12px;
    width: 40px; height: 40px;
    display: block;
    cursor: pointer;
    z-index: 1100;           /* overlay(1000), menu(1001)より上 */
    color: transparent;      /* ☰を見えなくする（アクセシビリティはaria-labelで担保）*/
    font-size: 0;            /* 同上 */
  }
  
  /* 疑似要素で線を描く（白） */
  .menu-toggle::before,
  .menu-toggle::after{
    content: "";
    position: absolute;
    left: 50%;
    width: 24px; height: 2px;
    background: #111;
    transform: translateX(-50%);
    transition: transform 220ms ease, opacity 180ms ease, box-shadow 180ms ease;
  }
  
  /* 初期配置：::before が「上＆中央」の2本、::after が「下」1本を担当 */
  .menu-toggle::before{
    top: 12px;                     /* 上の線 */
    box-shadow: 0 8px 0 0 #111;    /* 中央の線をまとめて描画（3本目） */
  }
  .menu-toggle::after{
    top: 28px;                     /* 下の線 */
  }
  
  /* チェック時：× へ変形（中央に集めて45°/-45°回転）、中央線はフェードアウト */
  #nav-toggle:checked + .menu-toggle::before{
    top: 20px;                     /* 中心へ */
    transform: translateX(-50%) rotate(45deg);
    box-shadow: none;              /* 中央の線を消す */
    background: #fff;
  }
  #nav-toggle:checked + .menu-toggle::after{
    top: 20px;                     /* 中心へ */
    transform: translateX(-50%) rotate(-45deg);
    background: #fff;
  }
  
  /* 3) メニュー内の “×” ボタンは使わない（見た目だけ非表示） */
  .menu-container .drawer-header .drawer-close{
    display: none;
  }
  
  /* 参考：ダーク背景に映えるようオーバーレイ上のリンクは白 */
  .main-menu > li > a{ color:#fff; }

/* 半透明のオーバーレイ */
.drawer-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.7);
  opacity:0; pointer-events:none; transition: opacity 200ms ease; z-index:1000;
}
#nav-toggle:checked ~ .drawer-backdrop{ opacity:1; pointer-events:auto; }
/* オーバーレイは背面 */
.drawer-backdrop{ z-index:1000; }
.menu-container{ z-index:1001; }

/* ===== メニュー本体（中央寄せ・上から降りる） ===== */
.menu-container{
  position: fixed; inset:0; display:grid; place-items:center;
  pointer-events:none; z-index:1001;
}

/* WPが出力するヘッダー（タイトル＋閉じる×） */
.menu-container .drawer-header{
  position:absolute; top:20px; left:20px; right:20px; display:flex; align-items:center; justify-content:space-between;
  color:#fff; pointer-events:none; opacity:0; transform: translateY(-8px);
  transition: transform 240ms cubic-bezier(.22,.61,.36,1), opacity 200ms ease;
}
/* “×”ボタン（label for="nav-toggle"）はクリック可能に */
.menu-container .drawer-header .drawer-close{
  pointer-events:auto; cursor:pointer; font-size:28px; line-height:1; user-select:none;
}

/* 開いたときだけヘッダー出現 */
#nav-toggle:checked ~ .menu-container .drawer-header{
  opacity:1; transform: translateY(0);
}

/* 実際のナビリスト */
.menu-container .main-menu{
  list-style:none; margin:0; padding:24px 16px; text-align:center; background:transparent;
  transform: translateY(-16px); opacity:0;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease;
  pointer-events:none; /* 開いたら操作可能に */
}

/* 開いた状態：上から降りてくる */
#nav-toggle:checked ~ .menu-container .main-menu{
  transform: translateY(0); opacity:1;
  pointer-events:auto; /* 開いたら操作可能に */
}

/* 1項目1行・中央寄せ・見やすいサイズ */
.main-menu > li{ margin:8px 0; white-space:nowrap; }
.main-menu > li > a{
  color:#fff; text-decoration:none; line-height:1.6; display:inline-block; padding:6px 10px;
  font-size: clamp(16px, 2.6vw, 28px);
  transition: opacity 160ms ease, transform 160ms ease;
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
}
.main-menu > li > a:hover,
.main-menu > li > a:focus{ opacity:.85; transform: translateY(-1px); }

/* 背景が暗いのでハンバーガーを白にしたい場合（任意）
.menu-toggle .bar{ background:#fff; }
*/

/* 余計なスクロールやタップ抜け対策 */
html.nav-open, html.nav-open body{ overflow:hidden; }

/* 動きを減らす設定に追従 */
@media (prefers-reduced-motion: reduce){
  .menu-toggle .bar, .drawer-backdrop, .menu-container .drawer-header, .menu-container .main-menu{
    transition: none !important;
  }
}

  /* STRUCTURE */

  html {
    font-size: 14px; /* 1rem = 14px */
  }
  
  body {
    font-family: yu-gothic-pr6n, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.75;
    color: #111;
    letter-spacing: 1px;
  }

  a,a:link,a:visited{
    color:#111;
    text-decoration:none;
  }

  header{
    width:100%;
    height:80px;
    display:block;
    position: fixed;
    box-sizing:border-box;
    top:0;
    left:0;
    z-index:2;
    background:none;
    padding:35px 0;
  }

  h1.site-title,p.site-title{
    width:250px;
    height:10px;
    display:block;
    margin:0 24px;
  }

  h1.site-title a,p.site-title a{
    width:250px;
    height:10px;
    display:block;
    background:url(images/logo.svg) no-repeat center;
    background-size:100% auto;
    text-indent:-9999px;
  }

  .home-content h2{
    font-size:24px;
    font-family:"helvetica-neue-lt-pro",sans-serif;
    font-weight:400;
    line-height:1;
    margin-bottom:40px;
  }

  .page-content h1{
    font-size:24px;
    font-family:"helvetica-neue-lt-pro",sans-serif;
    font-weight:400;
    line-height:1;
    margin-bottom:80px;
  }

  #works-single h1.entry-title{
    font-family:yu-gothic-pr6n, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    font-size:24px;
    font-weight:bold;
    margin:64px 0;
  }

  #post .page-content h1{
    font-family:yu-gothic-pr6n, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    font-weight:bold;
    line-height:1.75;
    margin-bottom:8px;

  }

  #post .time{
    font-family:"helvetica-neue-lt-pro",sans-serif;
    font-weight:400;
    margin-bottom:80px;
  }

  .page-content h2{
    font-size:24px;
    line-height:1.5;
    margin-bottom:6px;
  }

  #archive-publications .page-content h2{
    font-size:18px;
  }

  .page-content .section-header h2{
    font-family:"helvetica-neue-lt-pro",sans-serif;
    font-weight:400;
    line-height:1;
    margin-bottom:40px;
  }

  .section-header{
    width:100%;
    height:auto;
    display:block;
    position:relative;
  }

  .section-header a{
    width:auto;
    height:auto;
    display:inline;
    position:absolute;
    top:50%;
    right:0;
    margin-top:-0.5em;
    padding-right:20px;
    font-family:"helvetica-neue-lt-pro",sans-serif;
    font-weight:400;
    line-height:1;
  }

  .section-header a:after{
    content:"";
    width:14px;
    height:14px;
    display:inline;
    background:url(images/arrow-right.svg)no-repeat center;
    background-size:8px auto;
    position:absolute;
    top:0;
    right:0;
  }

  article time{
    display:block;
    margin-bottom:80px;
    color:#999;
    font-size:12px;
    font-family:"helvetica-neue-lt-pro",sans-serif;
    font-weight:400;
    line-height:1;
  }

main{
    width: 100%;
    height:auto;
    display:block;
    margin:160px auto 0 auto;
    box-sizing:border-box;
}

main#home{
  margin:80px auto 0 auto;
}

.page-content{
    width: 100%;
    max-width:1028px;
    height:auto;
    display:block;
    position:relative;
    margin:0 auto;
    padding:0 24px;
    box-sizing:border-box;
}

.page-content img{
  width:100%;
  height:auto;
  display:block;
  margin:0px auto;
}

.entry-content{
    width:100%;
    max-width:980px;
    height:auto;
    display:block;
    margin:0 auto;
}

.entry-content img{
    width:100%;
    height:auto;
    display:block;
    margin:80px auto;
}

.entry-content img:last-of-type{
margin-bottom:0;
}

.entry-content img.size-medium{
    max-width:435px;
}

.entry-content img.size-large{
    max-width:490px;
}

footer{
  width:100%;
  height:auto;
  display:block;
  padding:160px 0 64px 0;
}

.post-type-archive-playlist footer,.single-playlist footer{
  margin-top:110px;
  padding:0 0 64px 0;
}

.footer-navi{
  width:100%;
  height:auto;
  display:block;
  text-align:center;
  padding:0 0 64px 0
}

.footer-navi li{
  width:40px;
  height:40px;
  display:inline-block;
  }

  .footer-navi li.navi-facebook a{
    width:40px;
    height:40px;
    display:block;
    background:url(images/icon-facebook.svg)no-repeat center;
    background-size: auto 26px;
    text-indent:-9999px;
  }

  .footer-navi li.navi-x a{
    width:40px;
    height:40px;
    display:block;
    background:url(images/icon-x.svg)no-repeat center;
    background-size: auto 25px;
    text-indent:-9999px;
  }


  .footer-navi li.navi-flickr a{
    width:40px;
    height:40px;
    display:block;
    background:url(images/icon-flickr.svg)no-repeat center;
    background-size: auto 8px;
    text-indent:-9999px;
  }


  .footer-navi li.navi-instagram a{
    width:40px;
    height:40px;
    display:block;
    background:url(images/icon-instagram.svg)no-repeat center;
    background-size: auto 26px;
    text-indent:-9999px;
  }


  .footer-navi li.navi-ap a{
    width:40px;
    height:40px;
    display:block;
    background:url(images/icon-ap.svg)no-repeat center;
    background-size: auto 23px;
    text-indent:-9999px;
  }

  footer p{
    font-size;12px;
    text-align:center;
  }


/* HOME */


.watafes-icon{
width:160px;
height:160px;
position: fixed;
bottom:80px;
right:80px;
z-index:2;
}

.watafes-icon img{
  width:100%;
  height:auto;
}

#home section{
    margin-bottom:80px;
}

#home section:last-of-type{
  margin-bottom:0;
}

.home-slider.slick-dotted.slick-slider{
  margin-bottom:80px
}

.home-slider .slick-dots{
  margin:-40px 0 0 0;
}

.slick-dots li button:before {
  color:#fff;
  font-size:40px;
}

.slick-dots li.slick-active button:before{
  color:#fff;
}


.home-content{
    width:100%;
    max-width:1028px;
    height:auto;
    display:block;
    box-sizing:border-box;
    margin:0 auto;
    padding:0 24px;
}

.home-content img{
    width:100%;
    height:auto;
    display:block;
    margin:0 auto;
}

.home-news{
  margin:0;
}

.home-news__item{
  margin-bottom:8px;
}

.home-news__item time{
  display:block;
  color:#999;
  margin-right:40px;
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
  line-height:1;
  margin-bottom:8px;
}

.home-awards p{
  line-height:2.5;
}

.home-awards a{
  display:inline-block;
}

.home-awards li{
  margin-bottom:8px;
}

.home-about{
    width: 100%;
    height:auto;
    display: block;
    overflow:hidden;
}

.home-about__image img{
    width:100%;
    height:auto;
}

.home-about__image{
  margin-bottom:40px;
}

.home-about__text p{
    margin-bottom:50px;
}

.home-about__text span{
    margin-bottom:0px;
}

.home-about__text a{
    pointer-events: none;
}

.home-blog{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 0 16px;
    padding:0;
    margin:0;
}
    
.home-blog__item{
flex: 0 0 calc(100% - 0px); /* grow=0, shrink=0, basis=33.3333%-gap */
box-sizing: border-box;
text-align: left;
overflow:hidden;
padding-bottom:0px;
margin-bottom:50px;
justify-content: center;
align-items: center;
}

.home-blog__item img{
    margin:0 auto;
}

.home-blog__item time{
  display:block;
  color:#999;
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
  font-size:0.8rem;
  line-height:1;
  margin-bottom:16px;
}

h3.home-playlist__title{
  width: 100%;
  height:auto;
  display:block;
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
  font-size:24px;
  line-height:1;
}

.home-blog__title{
    font-size:1rem;
    margin:12px 0 8px 0;
}

.playlist-text{
  padding-bottom:40px;
}

.playlist-text p{
  margin-bottom:40px;
}

.playlist-list{
  position:relative;
}

.playlist-list .is-hidden {
  display: none;
}

#home .single-grid__item dd.is-faded,#playlist-single .single-grid__item dd:last-of-type,#home .single-grid__item dd:last-of-type {
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:0;
}

.playlist-toggle{
  width:40px;
  height:40px;
  display:block;
  background:url(images/arrow-down.svg) no-repeat center;
  background-size:16px 12px;
  text-indent:-9999px;
  position: absolute;
  right:16px;
  bottom:24px;
  border:none;
}

.playlist-toggle.is-open{
  transform: rotate(180deg);
}

.playlist-list .is-faded {
  opacity: 0.2;
}

.nav-links,.pagination{
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:16px;
}

#archive-works .pagination{
  margin-top:110px;

}


.pagination{
  margin-top:160px;
}

span.page-numbers.current{
  width:40px;
  height:40px;
  border:1px solid #111;
  border-radius:50%;
  background:#111;
  padding:12px 0;
  color:#fff;
  font-size:14px;
  line-height:1;
  text-align:center;
}

a.page-numbers{
  width:40px;
  height:40px;
  box-sizing:border-box;
  border:1px solid #111;
  border-radius:50%;
  background:#fff;
  padding:12px 0;
  color:#111;
  font-size:14px;
  line-height:1;
  text-align:center;
}

a.next.page-numbers,a.prev.page-numbers,.page-numbers.dots{
  width:auto;
  height:40px;
  box-sizing:border-box;
  border:none;
  border-radius:none;
  background:#fff;
  padding:12px 0;
  color:#111;
  font-size:14px;
  line-height:1;
  text-align:center;
}

/* NEWS&PUBLICATIONS */

article.news-list,article.blog-list{
    padding:0 0 80px 0;
    margin:0 0 80px 0;
    border-bottom:1px solid #eee;
}

article.news-list:last-of-type,article.blog-list:last-of-type{
  border-bottom:0;
  margin-bottom:0;
  padding-bottom:0;
}

.image-placeholder{
  border:1px solid #eee;
}

.index-grid__image{
  width:180px;
  height:180px;
  display:block;
  margin:0 auto 40px auto;
  border:1px solid #eee;
}

#archive-blog .index-grid__image,#archive-date .index-grid__image{
  width:100%;
  height:auto;
}

.index-grid__image img{
  width:auto;
  height:100%;
  display:block;
  margin:0 auto;
}

.index-grid__text h2{
  hyphens: auto;
  word-wrap: break-word;
}

.index-grid__text h2 span{
  display:block;
  font-size:14px;
  line-height:1;
  margin-bottom:6px;
}

.pub-slider.slick-slider{
  margin:0;
}

.pub-item.slick-slide{
  width:180px !important;
  margin:0px;
  padding:0 8px;
  box-sizing:content-box;
}

.pub-item__image{
  width:180px;
  height:180px;
  display:block;
  border:1px solid #eee;
  margin-bottom:10px;
}

.pub-item__image img{
  width:auto;
  height:100%;
}

.pub-title{
  padding:0;
  hyphens: auto;
  word-wrap: break-word;
}

#blog-year.works-cat-groups{
  position:absolute;
  top:0;
  right:24px;
}

#blog-year .works-cat-group__dropdown{
  min-width:90px;
}

#blog-year .works-cat-group__label{
font-size:14px;
}

#blog-year span.works-cat-group__label{
  background-size: 8px 6px;
}

.blog-list .index-grid__image{
  border:none;
}

.blog-list .index-grid__image img{
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

.blog-list .index-grid__text h2{
  margin-bottom:8px;
}

.blog-list .index-grid__text time{
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
  margin-bottom:64px;
}

nav.post-nav{
  width:100%;
  height:auto;
  display:block;
  margin:56px auto 0 auto;
}

.prev{
  margin-bottom:20px;
}

.next{
  text-align:right;
}


/* WORKS */
a.grid-btn{
  width:auto;
  display:block;
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
  padding-left:56px;
  margin-bottom:8px;
  background:url(images/icon-grid.svg) no-repeat left center;
  background-size:31px 22px;
}
  
  a.list-btn{
    width:auto;
    display:block;
    font-family:"helvetica-neue-lt-pro",sans-serif;
    font-weight:400;
    padding-left:56px;
    background:url(images/icon-list.svg) no-repeat left center;
    background-size:31px 22px;
    }

    h2.works-current-term{
      font-family:"helvetica-neue-lt-pro",sans-serif;
      font-weight:400;
    }

  summary.works-cat-group__label{
    width:auto;
    padding-right:24px;
    background:url(images/arrow-down.svg) no-repeat right center;
    background-size:16px 12px;
  }

  #archive-blog summary.works-cat-group__label,#archive-date summary.works-cat-group__label{
    background:url(images/arrow-down.svg) no-repeat right center;
    background-size:8px 6px;
  }


.works-view-toggle{
  width:auto;
  display:block;
  margin-bottom:80px;
}

.works-view-toggle a{
  width:auto;
  height:auto;
  display:inline-block;
  font-size:20px;
}

/* 全体のUL（親3列） */
.works-cat-groups {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 40px 0;
  padding: 0;
}

/* 親カテゴリ：2列 */
.works-cat-group {
  position: relative;
  flex: 0 0 calc(100% / 2); /* 2列固定 */
  padding: 0;
  margin-bottom:20px;
  box-sizing: border-box;
}

/* 親カテゴリラベル（クリック不可） */
.works-cat-group__label {
  display: inline-block;
  font-size:24px;
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
  cursor: default; /* クリックできない感じを出す */
}

.works-cat-group__all {
  display: inline-block;
  font-size:24px;
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
  text-align:right;
  padding-right:24px;
  background:url(images/icon-reset.svg) no-repeat right center;
  background-size:16px 12px;
}

/* 子カテゴリのポップアップ */
.works-cat-group__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 10;
}

/* 親にホバー / フォーカスでポップアップ表示 */
.works-cat-group:hover .works-cat-group__dropdown,
.works-cat-group:focus-within .works-cat-group__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 三角マーカーが邪魔なら消す */
.works-cat-group__details > summary {
  list-style: none;
  cursor: pointer;
}
.works-cat-group__details > summary::-webkit-details-marker {
  display: none;
}

/* 既存が hover 前提なら、open をトリガーにする */
.works-cat-group__details .works-cat-group__dropdown {
  display: none;
}
.works-cat-group__details[open] .works-cat-group__dropdown {
  display: block;
}

/* 子カテゴリ内のリンクの見た目は既存 .pill を流用 */
.works-cat-group__dropdown .pill {
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
  display: block;
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
}

.works-sort{
  width:100%;
  height:auto;
  display:block;
  text-align:right;
  line-height:1;
  margin:0 0 24px 0;
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
}
.works-sort li{
  line-height:1;
width:auto;
height:auto;
display:inline-block;
}

.sort-btn__newest{
  width:auto;
  height:auto;
  display:block;
  padding:0 20px;
  position:relative;
  line-height:1;
}
.sort-btn__oldest{
  width:auto;
  height:auto;
  display:block;
  padding:0 0 0 20px;
  position:relative;
  line-height:1;
}


.sort-btn__newest:before{
  width:8px;
  height:6px;
  content:"";
  position:absolute;
  top:50%;
  left:0;
  margin-top:-3px;
  background:url(images/arrow-down.svg) no-repeat left center;
  -webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotate(180deg);
}

.sort-btn__oldest:before{
  width:8px;
  height:6px;
  content:"";
  position:absolute;
  top:50%;
  left:0;
  margin-top:-3px;
  background:url(images/arrow-down.svg) no-repeat left center;
}

.works-grid{
display: flex;
flex-wrap: wrap;
justify-content: start;
gap: 0 16px;
margin:0;
padding:0;
}

.works-grid__item{
flex: 0 0 calc(100% - 0px); /* grow=0, shrink=0, basis=33.3333%-gap */
box-sizing: border-box;
text-align: left;
overflow:hidden;
padding-bottom:0px;
margin-bottom:50px;
align-items: center;
}

.works-grid__item img{
    margin:0 auto 12px auto;
}

.works-grid__item p{
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
    color:#999;
    font-size:0.8rem;
    line-height:1;
}

.page-content h2.works-card__title,#home h3.works-card__title{
    font-size:1rem;
    margin:0 0 8px 0;
}

.single-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom:64px;
}
    
.single-grid__item{
  width:100%;
    box-sizing: border-box;
    text-align: left;
    overflow:hidden;
    justify-content: center;
    align-items: center;
 }

 .single-grid__item p{
  margin-bottom:20px;
 }

 .single-desc{
    width: 100%;
    height:auto;
    display:block;
    font-size:1rem;
 }

 .single-desc dt{

 }

 .single-desc dd{
    margin:0 0 16px 0;
 }
    

.works-grid__item img{
    width:100%;
    height:auto;
}

ul.works-list{
  padding-bottom:50px;
  margin:0;
}

.works-list__header{
  width:100%;
  display: none;
  flex-wrap: wrap;
  margin-bottom:56px;
}

.works-list__item span.works-title a{
  width:auto;
  height:auto;
  display:inline;
  padding-right:16px;
  background:url(images/arrow-right.svg) no-repeat right center;
  background-size:6px 8px;
}

.works-list__item span.works-title{
  flex: 0 0 100%;
}


.works-list__item{
  display: flex;
  flex-wrap: wrap;
  padding-bottom:16px;
  margin-bottom:20px;
  border-bottom:1px solid #eee;
}

.works-list__item:last-child{
  margin-bottom:0;
}


.works-list__item span.works-operation{
  display:none;
}

.works-header__client,.works-list__item span.works-client{
  display:none;
}

.works-header__area,.works-list__item span.works-area{
  display:none;
}

.works-header__address,.works-list__item span.works-adress{
  margin-right:16px;
}

.works-header__purpose,.works-list__item span.works-purpose{
  margin-right:16px;
}

.works-header__year,.works-list__item span.works-year{
  margin-right:16px;
}

/* PLAYLIST */
h2.playlist-title{
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
}

.playlist-comment{
  width:100%;
  text-align:left;
  margin-bottom:40px;
}

#home .playlist-comment{
  margin-bottom:0px;
}

.playlist-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 16px;
  padding:0;
  }
  
  .playlist-grid__item{
  flex: 0 0 calc(50% - 8px); /* grow=0, shrink=0, basis=33.3333%-gap */
  box-sizing: border-box;
  text-align: left;
  overflow:hidden;
  padding-bottom:0px;
  margin-bottom:50px;
  justify-content: center;
  align-items: center;
  }
  
  .playlist-grid__item img{
      margin:0 auto 12px auto;
  }

  .playlist-card__title{
    font-family:"helvetica-neue-lt-pro",sans-serif;
    font-weight:400;
  }

#playlist-single .single-grid img,#home .single-grid img{
  margin:0 0 80px 0

}

#playlist-single .single-grid,#home .single-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding:24px;
    margin-bottom:64px;
    background:#eee;
}

#playlist-single .single-grid{
  margin-bottom:120px;
}

#home .single-grid{
  margin-bottom:0 !important;
  gap:50px;
}
    
#playlist-single .single-grid__item,#home .single-grid__item{
    width:100%;
    box-sizing: border-box;
    text-align: left;
    overflow:hidden;
    justify-content: center;
    align-items: center;
    margin-bottom:30px;
 }

 #home .single-grid__item:last-of-type{
  margin-bottom:0;
 }

 #playlist-single .single-grid__item p,#home .single-grid__item p{
  margin-bottom:20px;
 }

 #playlist-single .single-grid__item dl,#home .single-grid__item dl{
  width: 100%;height:auto;
  display:block;
  box-sizing: border-box;
  padding:20px;
  background:#fff;
 }
 
 #playlist-single .single-grid__item dt,#home .single-grid__item dt{
  font-size:1rem;
 }

 #playlist-single .single-grid__item dd,#home .single-grid__item dd{
  font-size:12px;
  color:#999;
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px solid #999;
 }
 

 h2.playlist-archives__heading{
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
  margin-bottom:64px;
 }

 .playlist-grid--archives li:last-child{
  display:none;
 }


 a.link-spotify{
  width:100%;
  height:auto;
  display:block;
  background:url(images/icon-spotify.svg) no-repeat center #111;
  background-size:auto 30px;
  text-indent:-9999px;
  padding:16px 0;
  margin-bottom:32px;
  border-radius:5px;
 }

 a.link-apple{
  width:100%;
  height:auto;
  display:block;
  background:url(images/icon-apple.svg) no-repeat center #111;
  background-size:auto 21px;
  text-indent:-9999px;
  padding:16px 0;
  margin-bottom:0;
  border-radius:5px;
 }

 


/* ABOUT */

.about-caption{
  text-align:right;
  padding-top:8px;
  margin-bottom:64px;
  font-size:12px;
  line-height:1;
}

.about-grid{
  margin:80px 0 0 0;
}

.about-grid__text{
  line-height:2;
}

.about-grid__item{
  margin-bottom:80px;
}

.staff-list{
  line-height:2;
}

.about-grid__item.staff-list br{
  line-height:0;
}


#about .page-content h2,#awards-competition .page-content h2{
  font-family:"helvetica-neue-lt-pro",sans-serif;
  font-weight:400;
  margin-bottom:48px;
}

#awards-competition .page-content h2.header-compe{
  margin:48px 0;
}

#awards-competition li{
  margin-bottom:8px;
}

#awards-competition li:last-child{
  margin-bottom:0;
}

#about .page-content h3{
  font-size:24px;
  margin-bottom:48px;
}

.about-advisor{
  margin-bottom:64px;
}

.about-annotation{
  margin-bottom:120px;
}

span.arrow{
  margin:0 24px;
}

address{
  font-style:normal;
  line-height:2;
  margin:40px 0;
}

p.about-name{
  margin-bottom:40px;
}

p.link-pdf{
  margin-bottom:40px;
}

.link-pdf a{
  width:48px;
  height:24px;
  display:inline-block;
  background:url(images/icon-pdf.svg) no-repeat center;
  background-size:48px auto;
  text-indent:-9999px;
}

.link-ap a{
  width:212px;
  height:24px;
  display:inline-block;
  background:url(images/icon-photo.svg) no-repeat center;
  background-size:212px auto;
  text-indent:-9999px;
}

@media (min-width: 390px) {

h1.site-title,p.site-title{
  width:300px;
  height:12px;
}

h1.site-title a,p.site-title a{
  width:300px;
  height:12px;
}

}

@media (min-width: 768px) {

  header{
    padding:34px 0;
  }

  /* ロゴ本体：帯はこの中だけに出したいので overflow:hidden */
.loading__logo {
  width: 400px;
  height: 32px;
}

.loading__logo2 {
  width: 400px;
  height: 16px;
}


/* 上部のグレー帯（ロゴの中だけに出す） */
.loading__logo::before {
  height: 32px;
}

  .none-sp{
    display:block;
  }

/* NAVIGATION */

.menu-toggle{
top: 19px; right: 24px;
}

/* STRUCTURE */

header{
    padding:32px 0;
  }

h1.site-title,p.site-title{
    width:400px;
    height:16px;
    margin:0 auto;
  }

  h1.site-title a,p.site-title a{
    width:400px;
    height:16px;
  }

  #archive-works .pagination{
    margin-top:150px;
  }

  .pagination{
    margin-top:200px;
  }
  

footer{
  padding:200px 0 64px 0;
}

.post-type-archive-playlist footer,.single-playlist footer{
  margin-top:150px;

}

/* HOME */

.home-slider.slick-dotted.slick-slider{
  margin-bottom:120px
}

#home section{
    margin-bottom:120px;
}

#home section.home-news,#home section.home-awards,,#home section.home-about{
  margin-bottom:115px;
}

#home section.home-projects,#home section.home-blog{
  margin-bottom:70px;
}

.home-news__item time{
  display:inline-block;
}

.home-news li:last-child{
margin-bottom:0;
}

.home-about__image{
    width:30%;
    height:auto;
    display:block;
    float:right;
    margin-bottom:0;
}
.home-about__text{
    width:60%;
    height:auto;
    display:block;
    float:left;
}

.home-blog{
    gap:0 40px;
}

.home-blog__item{
    flex: 1 1 calc((100% - 80px) / 3);
    }

    #playlist-single .single-grid__item,#home .single-grid__item{
      margin-bottom:80px;
   }

/* WORKS */

/* 親カテゴリ：4列 */

.works-view-toggle a{
  font-size:24px;
}

.works-cat-group {
  flex: 0 0 calc(100% / 4); /* 4列固定 */
  margin-bottom:0;
}

.works-grid{
    gap:0 40px;
}

.works-grid__item{
    flex: 0 0 calc((100% - 80px) / 3);
    }

.single-grid{
    gap:80px 120px;
}

.single-grid__item{
    flex: 1 1 calc((100% - 150px) / 3);
        }

.single-desc{
    display: flex;
    align-items: stretch; /* 2カラムの高さを自動で揃える（デフォルトでもOK） */
    flex-wrap: wrap;
}

.single-desc dt{ flex: 0 0 20%; }
.single-desc dd{ flex: 1 1 80%; min-width: 0; }

.works-list__header{
  display:flex;
}
.works-header__title{
  flex: 0 0 45%; 
}

.works-list__item span.works-title{
  flex: 0 0 45%;
}

.works-list__item span.works-operation{
  display:block;
  color:#999;
  font-weight:normal;
}

.works-header__address,.works-list__item span.works-adress{
  flex: 0 0 15%;
  margin-right:0;
}

.works-header__purpose,.works-list__item span.works-purpose{
  flex: 0 0 10%;
  margin-right:0;
}

.works-header__client,.works-list__item span.works-client{
  display:block;
  flex: 0 0 10%;
}
.works-header__area,.works-list__item span.works-area{
  display:block;
  flex: 0 0 10%;
}

.works-header__year,.works-list__item span.works-year{
  flex: 0 0 10%;
  margin-right:0;
}



/* NEWS&PUBLICATIONS */

.index-grid{
    display: flex;
    align-items: stretch; /* 2カラムの高さを自動で揃える（デフォルトでもOK） */
    flex-wrap: wrap;
}

.index-grid__image,#archive-blog .index-grid__image,#archive-date  .index-grid__image{
  width: 180px;   /* 固定幅 */
  flex-shrink: 0; /* 右側が潰れないように固定 */
  margin:0 80px 0 auto; /* 左右間のマージン */
}



.index-grid__text{
  flex: 1; /* 残り幅をすべて使用 */
  min-width: 0; /* 内容がある場合のはみ出し防止（重要） */
}


.blog-list .index-grid__text time{
  margin-bottom:40px;
}

/* ABOUT */
.about-grid{
    display: flex;
    align-items: stretch; /* 2カラムの高さを自動で揃える（デフォルトでもOK） */
    flex-wrap: wrap;
    gap:40px;
}

.about-grid__image .about-caption{
  margin-bottom:0;
}
.about-grid__item{ flex: 1 1 40px; min-width: 0; }

.about-grid__image{ flex: 0 0 calc((40% - 40px)) ;}
.about-grid__text{ flex: 1 1 calc((60% - 40px)); min-width: 0; }

/* PLAYLIST */

#playlist-single .single-grid,#home .single-grid{
  padding:80px 120px;
  margin-bottom:64px;
}


  .playlist-grid__item{
  flex: 0 0 calc(20% - 16px); /* grow=0, shrink=0, basis=33.3333%-gap */
  }

  .playlist-grid--archives li:last-child{
    display:block;
   }
  


  /* BLOG */
  nav.post-nav{
    width:100%;
    height:auto;
    display:flex;
    justify-content: start;
    align-items: start;
    gap: 0 40px;
    margin:56px auto 0 auto;
  }
  
  #post .prev{
    flex-basis:50%;
    margin-bottom:0;
  }
  
  #post .next{
    flex-basis:50%;
    margin-bottom:0;
}
}