/* ============================================================
   renovy 汎用ページ CSS（企業サイト風 / company準拠のトーン）
   使い方: <link rel="stylesheet" href="/assets/css/page.css">
   ============================================================ */

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight:400;
  color:#1c1c1c;
  background:#f8f8f8;
  line-height:1.9;
  letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}

/* ============================================================
   Pet mode（?petmode=true や pet専用ページで body.is-petmode 付与）
   renovy の静けさ・モノトーンを維持しつつ、わずかに温度を加える
   ============================================================ */
body.is-petmode{background:#f6f2ec;color:#1c1c1c}
body.is-petmode .pg-hero,
body.is-petmode .pg-page-header{background:#f6f2ec;border-bottom-color:#ece7de}
body.is-petmode .pg-step,
body.is-petmode .pg-flow-item__media,
body.is-petmode .combination-item,
body.is-petmode .rn-related__card,
body.is-petmode .rn-related-styles__card,
body.is-petmode .pg-triple__item{background:#ffffff}
/* CTA は本編のダークを維持（コントラスト重要） */
body.is-petmode .pg-cta{background:#1c1c1c}
body.is-petmode .pg-detail__tags .tag{border-color:#e8e3d9;background:#ffffff}
body.is-petmode .pg-detail__tags .tag:hover{background:#1c1c1c;color:#fff;border-color:#1c1c1c}

/* ---------- container ---------- */
.pg-container{
  width:80%;
  max-width:1600px;
  margin:0 auto;
  padding:0;
}
.pg-container--narrow{width:100%;max-width:820px;padding:0 clamp(20px,5vw,48px)}

/* Pages that use semantic `__inner` wrappers instead of `.pg-container`. */
.pg-hero__inner,
.pg-section__inner,
.pg-cta__inner{
  width:min(1120px,calc(100% - 80px));
  margin-right:auto;
  margin-left:auto;
}

/* ---------- hero ---------- */
.pg-hero{
  padding:180px 0 80px;
  background:#fff;
  border-bottom:1px solid #ececec;
}
.pg-hero__eyebrow{
  display:block;
  font-family:"STIX Two Text",serif;
  font-size:12px;
  font-style:italic;
  letter-spacing:.28em;
  color:#999;
  margin-bottom:20px;
}
.pg-hero__title{
  font-family:"STIX Two Text","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight:400;
  font-size:clamp(26px,4.2vw,46px);
  line-height:1.28;
  margin:0 0 20px;
  color:#111;
  letter-spacing:.04em;
}
.pg-hero__lead{
  font-family:"Noto Sans JP",sans-serif;
  font-size:clamp(13px,1.4vw,15px);
  color:#555;
  max-width:36em;
  line-height:2;
  margin:0;
  letter-spacing:.05em;
}

/* ---------- section ---------- */
.pg-section{padding:clamp(56px,8vh,96px) 0}
.pg-section + .pg-section{padding-top:0}
.pg-section--flush-top{padding-top:0}

.pg-section__head{margin-bottom:56px}
.pg-section__eyebrow{
  display:block;
  font-family:"STIX Two Text",serif;
  font-size:11px;
  font-style:italic;
  letter-spacing:.28em;
  color:#999;
  margin-bottom:16px;
}
.pg-section__title{
  font-family:"STIX Two Text","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight:400;
  font-size:clamp(18px,2.4vw,26px);
  line-height:1.55;
  margin:0 0 20px;
  color:#111;
  letter-spacing:.06em;
}
.pg-section__lead{
  font-family:"Noto Sans JP",sans-serif;
  font-size:14px;
  color:#666;
  max-width:36em;
  margin:0;
  line-height:2;
  letter-spacing:.05em;
}

/* ---------- hero fullwidth (100vw) ---------- */
.pg-hero--full{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0;
  border-bottom:none;
  min-height:78vh;
  color:#fff;
  overflow:hidden;
  background:#111;
  display:flex;align-items:flex-end;
}
.pg-hero--full .pg-hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.72);
}
.pg-hero--full .pg-hero__inner{
  position:relative;z-index:1;
  padding:0 clamp(24px,5vw,72px) clamp(56px,10vh,120px);
  width:100%;max-width:1440px;margin:0 auto;
}
.pg-hero--full .pg-hero__eyebrow{color:#ccc}
.pg-hero--full .pg-hero__title{
  color:#fff;font-size:clamp(38px,6vw,72px);line-height:1.15;font-weight:400;
}
.pg-hero--full .pg-hero__lead{color:#e6e6e6;font-size:15px;max-width:32em;margin-top:24px}

/* ---------- hero with photo (フルワイドの写真ヒーロー) ---------- */
.pg-hero--photo{
  position:relative;
  padding:0;
  border-bottom:none;
  min-height:clamp(320px,44vh,460px);
  color:#fff;
  overflow:hidden;
  background:#111;
}
.pg-hero--photo .pg-hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.65);
}
.pg-hero--photo .pg-hero__inner{
  position:relative;z-index:1;
  padding:200px 0 100px;
}
.pg-hero--photo .pg-hero__eyebrow{color:#ccc}
.pg-hero--photo .pg-hero__title{color:#fff}
.pg-hero--photo .pg-hero__lead{color:#e0e0e0}

/* ---------- step (写真付き / 交互配置) ---------- */
.pg-flow{display:flex;flex-direction:column;gap:clamp(64px,10vw,120px)}
.pg-flow-item{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.pg-flow-item--reverse{grid-template-columns:1fr 1.1fr}
.pg-flow-item--reverse .pg-flow-item__media{order:2}
.pg-flow-item--reverse .pg-flow-item__body{order:1}
.pg-flow-item--text-only{grid-template-columns:1fr;max-width:640px;margin:0 auto;text-align:center}
/* ダーク背景バリアント（Step 04 等） */
.pg-flow-item--dark{
  background:#111;color:#f0f0f0;padding:clamp(56px,8vw,96px) clamp(32px,6vw,80px);
  margin:clamp(24px,3vw,40px) 0;
}
.pg-flow-item--dark .pg-flow-item__num{color:#e0e0e0}
.pg-flow-item--dark .pg-flow-item__title{color:#fff}
.pg-flow-item--dark .pg-flow-item__body p{color:#c8c8c8}
.pg-flow-item--dark .pg-flow-item__note{color:#f0f0f0;border-color:rgba(255,255,255,.4)}
.pg-flow-item--text-only .pg-flow-item__body{text-align:center}

.pg-flow-item__media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:#e8e8e8;
}
.pg-flow-item__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease}
.pg-flow-item:hover .pg-flow-item__media img{transform:scale(1.03)}

.pg-flow-item__num{
  font-family:"STIX Two Text",serif;
  font-style:italic;
  font-size:13px;
  line-height:1;
  color:#111;
  margin-bottom:18px;
  letter-spacing:.15em;
  font-weight:400;
}
.pg-flow-item__title{
  font-family:"STIX Two Text","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight:500;
  font-size:clamp(20px,2.2vw,26px);
  line-height:1.6;
  margin:0 0 22px;
  color:#111;
  letter-spacing:.08em;
}
.pg-flow-item__title em{font-style:normal;font-weight:500}
/* 縦長画像バリアント（Option等）— 3:4 の縦写真 + 右にテキスト */
.pg-flow-item--vertical{grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,120px);align-items:center}
.pg-flow-item--vertical .pg-flow-item__media{aspect-ratio:3/4;max-width:520px}
.pg-flow-item--vertical .pg-flow-item__media img{aspect-ratio:3/4}
@media(max-width:820px){
  .pg-flow-item--vertical{grid-template-columns:1fr}
  .pg-flow-item--vertical .pg-flow-item__media{aspect-ratio:3/4;max-width:100%}
}
.pg-flow-item__body{padding:8px 0}
.pg-flow-item__body p{
  font-family:"Noto Sans JP",sans-serif;
  font-size:14px;
  color:#555;
  line-height:2;
  margin:0 0 16px;
  letter-spacing:.05em;
}
.pg-flow-item__note{
  display:block;
  margin-top:14px;
  font-size:12px;
  letter-spacing:.06em;
  color:#666;
  font-family:"Noto Sans JP",sans-serif;
  line-height:1.9;
}
/* 番号付きサブリスト（お電話 / オンライン 等） */
.pg-flow-item__steps{
  list-style:none;padding:0;margin:8px 0 12px;
  counter-reset:rn-step;
  display:flex;flex-direction:column;gap:6px;
}
.pg-flow-item__steps li{
  counter-increment:rn-step;
  font-size:13px;color:#333;letter-spacing:.06em;
  padding-left:26px;position:relative;
}
.pg-flow-item__steps li::before{
  content:counter(rn-step) ".";
  position:absolute;left:0;top:0;
  font-family:"STIX Two Text",serif;font-style:italic;color:#666;
}

@media(max-width:820px){
  .pg-container{width:100%;padding:0 20px}
  .pg-container--narrow{padding:0 20px}
  .pg-hero{padding:120px 0 56px}
  .pg-hero--photo{min-height:60vh}
  .pg-hero--photo .pg-hero__inner{padding:140px 0 64px}
  .pg-hero__title{font-size:clamp(26px,7vw,34px);line-height:1.35}
  .pg-hero__lead{font-size:14px}
  .pg-flow-item,
  .pg-flow-item--reverse{grid-template-columns:1fr;gap:24px}
  .pg-flow-item--reverse .pg-flow-item__media{order:0}
  .pg-flow-item--reverse .pg-flow-item__body{order:0}
  .pg-flow-item__num{font-size:13px;margin-bottom:12px}
  .pg-flow-item__title{font-size:19px}
}

/* ---------- faq accordion ---------- */
.pg-faq-wrap{max-width:820px;margin:0 auto}
.page-faq-new .pg-section--flush-top{padding-top:clamp(56px,8vh,88px)}
.pg-faq-group + .pg-faq-group{margin-top:72px}
.pg-faq-group__eyebrow{
  display:block;
  font-family:"STIX Two Text",serif;font-style:italic;
  font-size:11px;letter-spacing:.28em;color:#999;
  margin-bottom:8px;
}
.pg-faq-group__title{
  font-family:"STIX Two Text","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight:500;font-size:16px;color:#1c1c1c;
  letter-spacing:.12em;margin:0 0 24px;
  padding-bottom:16px;border-bottom:1px solid #d5d5d5;
  line-height:1.4;
}
.pg-faq-item{border-bottom:1px solid #eaeaea}
.pg-faq-item > summary{
  list-style:none;cursor:pointer;
  padding:22px 44px 22px 32px;
  font-family:"STIX Two Text","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:14px;font-weight:500;color:#1c1c1c;
  letter-spacing:.06em;line-height:1.7;
  position:relative;transition:color .2s;
}
.pg-faq-item > summary::-webkit-details-marker{display:none}
.pg-faq-item > summary::before{
  content:"Q";
  position:absolute;left:0;top:22px;
  font-family:"STIX Two Text",serif;font-style:italic;
  font-size:14px;color:#999;letter-spacing:0;
  line-height:1.7;
}
.pg-faq-item > summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:11px;
  border-right:1px solid #999;border-bottom:1px solid #999;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s ease;
}
.pg-faq-item[open] > summary::after{
  transform:translateY(-30%) rotate(-135deg);
  border-color:#333;
}
.pg-faq-item > summary:hover{color:#000}
.pg-faq-item__body{
  padding:0 44px 26px 32px;
  font-family:"Noto Sans JP",sans-serif;
  font-size:13px;color:#555;line-height:2.1;
  letter-spacing:.05em;
  position:relative;
}
.pg-faq-item__body::before{
  content:"A";
  position:absolute;left:0;top:0;
  font-family:"STIX Two Text",serif;font-style:italic;
  font-size:14px;color:#999;line-height:1;
}
.pg-faq-item__body p{margin:0 0 12px}
.pg-faq-item__body p:last-child{margin-bottom:0}
.pg-faq-item__body .pg-faq-btn{
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;
  font-family:"STIX Two Text",serif;font-size:11px;letter-spacing:.2em;
  color:#111;padding:10px 22px;border:1px solid #d5d5d5;
  background:#fff;transition:.25s;
}
.pg-faq-item__body .pg-faq-btn:hover{background:#111;color:#fff;border-color:#111}
@media(max-width:640px){
  .page-faq-new .pg-section--flush-top{padding-top:48px}
  .pg-faq-group{margin-top:56px}
  .pg-faq-item > summary{padding:18px 36px 18px 26px;font-size:13.5px}
  .pg-faq-item__body{padding:0 36px 22px 26px;font-size:12.5px}
}

/* ============================================================
   detail (style-page / product-page 共通)
   ============================================================ */
.pg-detail{padding:140px 0 80px}
.pg-detail .pg-container{max-width:1600px;width:92%}
.pg-detail__grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);
  gap:clamp(36px,5vw,80px);
  align-items:start;
}
@media(max-width:880px){.pg-detail__grid{grid-template-columns:1fr}}

/* --- 画像スライダー（swiper） --- */
.pg-detail__gallery .swiper{width:100%}
.pg-detail__gallery .mainSwiper{aspect-ratio:4/3;margin-bottom:14px;background:#eee}
.pg-detail__gallery .mainSwiper .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* thumbSwiper: 画像数に合わせて幅可変。空の背景色は出さない */
.pg-detail__gallery .thumbSwiper{padding-top:0;background:transparent}
.pg-detail__gallery .thumbSwiper .swiper-wrapper{justify-content:flex-start}
.pg-detail__gallery .thumbSwiper .swiper-slide{
  width:120px;
  aspect-ratio:4/3;
  background:#eee;
  cursor:pointer;opacity:.55;transition:opacity .25s;
}
.pg-detail__gallery .thumbSwiper .swiper-slide-thumb-active{opacity:1;outline:1px solid #111;outline-offset:-1px}
.pg-detail__gallery .thumbSwiper .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block}

/* --- タイトル & タグ --- */
.pg-detail__title{
  font-family:"STIX Two Text",serif;
  font-weight:500;
  font-size:clamp(24px,2.2vw,30px);
  line-height:1.3;
  margin:0 0 6px;
  color:#111;
  letter-spacing:.01em;
}
.pg-detail__title-ja{
  font-size:13px;color:#666;margin:0 0 24px;letter-spacing:.06em;
}
.pg-detail__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.pg-detail__tags .tag{
  display:inline-block;padding:5px 14px;font-size:12px;letter-spacing:.08em;
  border:1px solid #d5d5d5;color:#333;background:#fff;transition:.2s;line-height:1.7;
}
.pg-detail__tags .tag:hover{background:#111;color:#fff;border-color:#111}

.pg-detail__desc{font-size:13px;color:#444;line-height:2;margin:0 0 8px}
.pg-detail__info--sp{margin-top:32px}
/* PC: 右カラム上部にスペースを持たせて中央寄り気味に */
@media(min-width:881px){
  .pg-detail .pg-detail__info{padding-top:56px}
}
/* related grid の商品カード（product-page 用） */
.rn-related__card{background:#fff;overflow:hidden;transition:transform .3s}
.rn-related__card:hover{transform:translateY(-4px)}
.rn-related__img-wrap{aspect-ratio:4/3;background:#eee;overflow:hidden}
.rn-related__img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.rn-related__card:hover .rn-related__img{transform:scale(1.04)}
.rn-related__body{padding:16px 20px}
.rn-related__cat{
  display:block;font-family:"STIX Two Text",serif;font-size:10px;letter-spacing:.2em;
  color:#999;margin-bottom:6px;text-transform:uppercase;
}
.rn-related__title-en{font-size:14px;font-weight:500;margin:0 0 4px;color:#111}
.rn-related__title-ja{font-size:11px;color:#666;margin:0;letter-spacing:.06em}

.pg-detail__rule{border:0;border-top:1px solid #e5e5e5;margin:28px 0}

.pg-detail__subtitle{
  font-family:"Noto Sans JP",sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.04em;
  color:#111;
  margin:0 0 16px;
}

/* --- parameter bar --- */
[id^="parameter-container-"]{width:100%}
.parameter-item{margin:24px 0;width:100%}
.parameter-label{font-size:12px;color:#333;letter-spacing:.06em;margin-bottom:12px;font-weight:500}
.parameter-bar{
  position:relative;
  height:10px;
  width:100%;
  /* 中央の細い横線＋ 0/25/50/75/100% の位置に薄い四角ポッチ */
  background:
    linear-gradient(#cfcfcf,#cfcfcf)   0%   50% / 8px 8px no-repeat,
    linear-gradient(#cfcfcf,#cfcfcf)  25%   50% / 8px 8px no-repeat,
    linear-gradient(#cfcfcf,#cfcfcf)  50%   50% / 8px 8px no-repeat,
    linear-gradient(#cfcfcf,#cfcfcf)  75%   50% / 8px 8px no-repeat,
    linear-gradient(#cfcfcf,#cfcfcf) 100%   50% / 8px 8px no-repeat,
    linear-gradient(#dcdcdc,#dcdcdc)   0   50% / 100% 1px no-repeat;
}
.parameter-dot{
  position:absolute;top:50%;
  transform:translate(-50%,-50%);
  width:12px;height:12px;
  background:#111;
  border-radius:0;   /* 四角に変更（本番と同じ） */
}
.parameter-edge-texts{
  display:flex;justify-content:space-between;
  font-size:12px;color:#888;letter-spacing:.08em;margin-top:12px;
}

/* --- combination materials (info column内に横並びカードで表示) --- */
.pg-combination__heading{
  font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.06em;color:#1a1a1a;margin:40px 0 20px;
}
.pg-combination__list{display:flex;flex-direction:column;gap:20px}
.combination-item{
  display:flex;align-items:stretch;gap:22px;
  background:transparent;color:inherit;text-decoration:none;
  transition:opacity .25s ease;
}
.combination-item:hover{opacity:.75}
.combination-item__img-wrap{
  flex:0 0 132px;width:132px;aspect-ratio:1/1;
  background:#eee;overflow:hidden;
}
.combination-item__img{width:100%;height:100%;object-fit:cover;display:block}
.combination-item__img-placeholder{width:100%;height:100%;background:#e0e0e0}
.combination-item__body{
  flex:1;display:flex;flex-direction:column;justify-content:center;padding:2px 0;
}
.combination-item__cat{
  display:block;font-family:"STIX Two Text",serif;font-size:11px;letter-spacing:.28em;
  color:#999;text-transform:uppercase;margin:0 0 8px;
}
.combination-item__title-en{
  font-family:"STIX Two Text",serif;font-weight:500;
  font-size:18px;line-height:1.35;margin:0 0 6px;color:#111;letter-spacing:.02em;
}
.combination-item__title-ja{
  font-family:"Noto Sans JP",sans-serif;font-weight:400;
  font-size:12px;color:#555;margin:0;letter-spacing:.1em;line-height:1.6;
}
@media(max-width:640px){
  .combination-item__img-wrap{flex:0 0 104px;width:104px}
  .combination-item__title-en{font-size:16px}
}
/* 旧セクション用のスタイルを無効化 */
.pg-combination{padding:0;background:transparent}

/* --- related styles --- */
.pg-related{padding:100px 0}
.pg-related__head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:44px;
  gap:32px;flex-wrap:wrap;
}
.pg-related__head-text{display:flex;flex-direction:column;gap:10px}
.pg-related__title{
  font-family:"STIX Two Text",serif;font-weight:700;font-size:clamp(24px,2.4vw,32px);
  letter-spacing:.01em;color:#111;margin:0;line-height:1.2;
}
.pg-related__sub{
  font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:13px;
  letter-spacing:.06em;color:#888;margin:0;
}
.pg-related__more{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"STIX Two Text",serif;font-size:11px;letter-spacing:.2em;
  color:#333;text-transform:uppercase;transition:.25s;
  border:1px solid #d5d5d5;padding:14px 28px;background:#fff;white-space:nowrap;
}
.pg-related__more:hover{background:#111;color:#fff;border-color:#111}
@media(max-width:640px){
  .pg-related__head{gap:20px}
  .pg-related__more{padding:11px 22px;font-size:10px}
}
.pg-related__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;
}
.rn-related-styles__card{background:#fff;overflow:hidden;transition:transform .3s}
.rn-related-styles__card:hover{transform:translateY(-4px)}
.rn-related-styles__img-wrap{aspect-ratio:4/3;background:#eee;overflow:hidden}
.rn-related-styles__img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.rn-related-styles__card:hover .rn-related-styles__img{transform:scale(1.04)}
.rn-related-styles__img-placeholder{width:100%;height:100%;background:#e0e0e0}
.rn-related-styles__body{padding:16px 20px}
.rn-related-styles__title{font-family:"STIX Two Text",serif;font-size:15px;margin:0 0 4px;color:#111}
.rn-related-styles__collection-name{font-size:11px;color:#999;margin:0;letter-spacing:.1em}

.pg-loading{
  padding:60px 0;text-align:center;color:#999;font-size:12px;letter-spacing:.2em;
}

/* ---------- fullscreen data loading overlay ---------- */
.rn-page-loader{
  position:fixed;inset:0;z-index:9500;
  background:#f8f8f8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;
  transition:opacity .5s ease, visibility .5s ease;
}
body.is-petmode .rn-page-loader{background:#f6f2ec}
.rn-page-loader__spinner{
  width:38px;height:38px;border-radius:50%;
  border:1px solid #e0e0e0;
  border-top-color:#1c1c1c;
  animation:rnSpin 900ms linear infinite;
}
.rn-page-loader__label{
  font-family:"STIX Two Text",serif;
  font-size:10px;letter-spacing:.32em;color:#999;text-transform:uppercase;
}
.rn-page-loader.is-hidden{
  opacity:0;visibility:hidden;pointer-events:none;
}
@keyframes rnSpin{ to{transform:rotate(360deg)} }
/* データ読み込み前は本体を薄くしてローダー越しに透けさせる */
body.is-loading .pg-detail,
body.is-loading .pg-combination,
body.is-loading .pg-related{opacity:0}
.pg-detail,.pg-combination,.pg-related{transition:opacity .4s ease}

/* SP のみ表示・PC のみ表示 */
.sp-only{display:none}
@media(max-width:880px){
  .sp-only{display:block}
  .pc-only{display:none}
}

/* ---------- reasons grid (Why renovy 等 3カラム) ---------- */
.pg-reasons{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(32px,4vw,64px);
  margin-top:56px;
}
@media(max-width:900px){.pg-reasons{grid-template-columns:1fr;gap:40px}}
.pg-reason{
  padding:28px 4px 0;
  border-top:1px solid #1c1c1c;
  position:relative;
}
.pg-reason__num{
  font-family:"STIX Two Text",serif;font-style:italic;font-size:12px;letter-spacing:.15em;
  color:#333;margin-bottom:18px;font-weight:400;
}
.pg-reason__title{
  font-family:"STIX Two Text","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:17px;font-weight:500;margin:0 0 22px;color:#111;letter-spacing:.08em;
  line-height:1.7;
}
.pg-reason__body{font-size:13px;color:#4a4a4a;line-height:2.1;margin:0;font-weight:400;letter-spacing:.04em}

/* Why renovy section: light gray background + centered heading */
.pg-section--why{
  background:#f2f2f2;padding:clamp(120px,15vh,180px) 0 clamp(90px,11vh,132px);
}
.pg-section--why .pg-section__head{text-align:center;margin-bottom:0}
.pg-section--why .pg-section__eyebrow{
  font-family:"STIX Two Text",serif;font-style:italic;font-size:11px;letter-spacing:.28em;
  color:#666;margin-bottom:22px;display:block;font-weight:400;
}
.pg-section--why .pg-section__title{
  font-family:"STIX Two Text",serif;font-weight:400;
  font-size:clamp(22px,2.6vw,32px);letter-spacing:.14em;color:#111;
  line-height:1.5;margin:0;
}

/* ダーク背景セクション (CTA・Philosophy 等) */
.pg-section--dark{
  background:#111;color:#f0f0f0;padding:clamp(80px,12vh,140px) 0;
}
.pg-section--dark .pg-section__eyebrow{color:#c0c0c0}
.pg-section--dark .pg-section__title{color:#fff}
.pg-section--dark .pg-section__lead{color:#dcdcdc}
.pg-section--dark .pg-reason{border-top-color:#f0f0f0}
.pg-section--dark .pg-reason__num,
.pg-section--dark .pg-reason__title{color:#fff}
.pg-section--dark .pg-reason__body{color:#d5d5d5}

/* ---------- 3カラム紹介ブロック（Floor/Wall/Curtain 等） ---------- */
.pg-triple{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(24px,3vw,40px);margin-top:48px;
}
.pg-triple__item{background:#fff;overflow:hidden;transition:transform .3s}
.pg-triple__item:hover{transform:translateY(-4px)}
.pg-triple__img{aspect-ratio:4/3;background:#eee;overflow:hidden}
.pg-triple__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pg-triple__item:hover .pg-triple__img img{transform:scale(1.04)}
.pg-triple__body{padding:20px 24px 24px}
.pg-triple__cat{
  display:block;font-family:"STIX Two Text",serif;font-size:11px;letter-spacing:.24em;
  color:#999;margin-bottom:8px;text-transform:uppercase;
}
.pg-triple__title{font-size:16px;font-weight:500;margin:0 0 6px}
.pg-triple__body p{font-size:13px;color:#555;margin:8px 0 0;line-height:1.9}

/* ============================================================
   list-page (styles / products / works 共通)
   ============================================================ */
.pg-page-header{
  padding:120px 0 60px;
  background:#fff;
  border-bottom:1px solid #ececec;
}
.pg-page-header__eyebrow{
  display:block;font-size:11px;font-weight:300;
  letter-spacing:.2em;color:#aaa;margin-bottom:20px;
}
.pg-page-header__title{
  font-family:"STIX Two Text",serif;font-weight:300;
  font-size:clamp(26px,2.6vw,36px);letter-spacing:.06em;line-height:1.2;
  margin:0 0 16px;color:#1a1a1a;
}
.pg-page-header__sub{
  font-size:11px;font-weight:300;color:#aaa;margin:0;letter-spacing:.2em;
}

/* --- filter --- */
.pg-filter{
  border-bottom:1px solid #ececec;
  padding:24px 0;
}
.pg-filter__toggle{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:22px 0;
  font-size:11px;letter-spacing:.28em;font-weight:400;
  color:#1c1c1c;background:none;border:0;cursor:pointer;
  text-transform:uppercase;font-family:inherit;
}
@media(max-width:640px){
  .pg-filter__toggle{padding:20px 20px;}
  .pg-filter__panel{padding-left:20px;padding-right:20px;}
}
/* 閉じている時: 右端に 2 本の横バー */
.pg-filter__toggle::after{
  content:"";display:inline-block;
  width:22px;height:9px;
  background:
    linear-gradient(#1a1a1a,#1a1a1a) 0 0 / 100% 1px no-repeat,
    linear-gradient(#1a1a1a,#1a1a1a) 0 100% / 100% 1px no-repeat;
  transition:opacity .2s;
}
/* 開いている時: バーは非表示（パネル内の ✕ で閉じる） */
.pg-filter__toggle.is-open::after{opacity:0}
.pg-filter__count{
  float:right;font-size:11px;letter-spacing:.28em;color:#8a8a8a;
  padding-top:4px;text-transform:uppercase;
}
.pg-filter__panel{
  position:relative;
  max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;
}
.pg-filter__panel.is-open{max-height:2000px;padding-top:40px;padding-bottom:32px}

/* パネル内 右上の ✕ ボタン */
.pg-filter__close{
  position:absolute;top:16px;right:0;
  width:32px;height:32px;
  background:none;border:0;cursor:pointer;
  font-size:16px;color:#8a8a8a;line-height:1;padding:0;
  transition:color .2s,transform .2s;
}
.pg-filter__close:hover{color:#1a1a1a;transform:rotate(90deg)}

/* フィルタ下・外側に置くカウント */
.pg-filter-count{
  display:block;text-align:right;
  padding:14px 0;
  font-size:12px;letter-spacing:.18em;color:#1a1a1a;
  text-transform:uppercase;
}
.pg-filter__group + .pg-filter__group{margin-top:28px}
.pg-filter__group-title{
  font-size:11px;letter-spacing:.24em;font-weight:400;
  color:#6b6b6b;margin:0 0 14px;text-transform:uppercase;
}
.pg-filter__tags{display:flex;flex-wrap:wrap;gap:10px}
.rn-filter__tag,.pg-filter__tag{
  display:inline-block;padding:6px 16px;font-size:12px;letter-spacing:.18em;
  border:1px solid #e8e6e0;background:transparent;color:#6b6b6b;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;font-family:inherit;
  text-transform:uppercase;font-weight:400;line-height:1.4;border-radius:1px;
  white-space:nowrap;
}
.rn-filter__tag:hover,.pg-filter__tag:hover{border-color:#1a1a1a;color:#1a1a1a}
.rn-filter__tag.is-active,.pg-filter__tag.is-active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.pg-filter__clear{
  display:block;margin:24px 0 0 auto;
  font-size:11px;letter-spacing:.15em;font-weight:400;
  color:#aaa;background:none;border:0;padding:4px 0;cursor:pointer;
  transition:color .2s;text-transform:uppercase;
}
.pg-filter__clear:hover{color:#1a1a1a}

/* --- grid cards (styles / products / works 共通) --- */
.pg-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px 32px;
  padding:48px 0;
}
@media(max-width:780px){.pg-grid{grid-template-columns:repeat(2,1fr);gap:28px 12px}}
.rn-card{
  display:block;background:transparent;overflow:hidden;
  transition:transform .3s ease;
}
.rn-card:hover{transform:translateY(-4px)}
.rn-card__img-wrap{aspect-ratio:4/3;overflow:hidden;background:#eee}
.rn-card__img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;display:block}
.rn-card:hover .rn-card__img{transform:scale(1.04)}
.rn-card__img-placeholder{
  width:100%;height:100%;background:#eaeaea;display:flex;
  align-items:center;justify-content:center;color:#bbb;
}
.rn-card__img-placeholder svg{width:32px;height:32px}
.rn-card__body{padding:12px 0 0;text-align:left}
.rn-card__cat{
  display:inline-block;font-size:9px;color:#aaa;margin:0 0 6px;
  letter-spacing:.2em;text-transform:uppercase;
}
.rn-card__title-en{
  font-size:13px;font-weight:400;margin:0 0 4px;color:#1a1a1a;
  letter-spacing:.05em;line-height:1.3;
}
.rn-card__title-ja{
  font-size:10px;font-weight:300;color:#6b6b6b;margin:0;
  letter-spacing:.08em;line-height:1.5;
}

/* loading state（grid内で全カラムを占有して中央寄せ）*/
.rn-state{padding:80px 0;text-align:center;color:#999;grid-column:1 / -1}
.rn-state__label{font-family:"STIX Two Text",serif;font-size:13px;letter-spacing:.24em;margin:16px 0 6px}
.rn-state__sub{font-size:12px;margin:0}
.rn-dots{display:inline-flex;gap:6px}
.rn-dots span{
  width:6px;height:6px;background:#999;border-radius:50%;
  animation:rn-dots 1.2s ease-in-out infinite;
}
.rn-dots span:nth-child(2){animation-delay:.15s}
.rn-dots span:nth-child(3){animation-delay:.3s}
@keyframes rn-dots{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* ---------- CTA block ---------- */
.pg-cta{
  padding:clamp(72px,10vw,112px) 0;
  background:#111;
  color:#f0f0f0;
  text-align:center;
}
.pg-cta__title{
  font-family:"STIX Two Text",serif;
  font-weight:400;
  font-size:clamp(22px,3vw,32px);
  line-height:1.5;
  margin:0 0 16px;
  color:#fff;
}
.pg-cta__lead{
  font-size:13px;
  color:#bbb;
  max-width:32em;
  margin:0 auto 36px;
  line-height:2;
}
.pg-cta__btn{
  display:inline-block;
  padding:16px 44px;
  background:#06C755;
  color:#fff;
  font-size:12px;
  letter-spacing:.18em;
  transition:opacity .25s;
}
.pg-cta__btn:hover{opacity:.85}
.pg-cta__btn--ghost{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.4);
  margin-left:16px;
}
.pg-cta__btn--ghost:hover{background:#fff;color:#111;opacity:1;border-color:#fff}
@media(max-width:640px){
  .pg-cta__btn{
    display:block;max-width:320px;margin:0 auto;
    padding:16px 24px;box-sizing:border-box;text-align:center;
  }
  .pg-cta__btn--ghost{margin:12px auto 0}
}

/* /en/ 側では商品名下の日本語読みかな（titleJa）は非表示 */
html[lang="en"] .rn-card__title-ja,
html[lang="en"] .combination-item__title-ja,
html[lang="en"] .pg-detail__title-ja,
html[lang="en"] #product-title-ja-pc,
html[lang="en"] #product-title-ja-sp{display:none !important}