/* Base --------------------------------------------------*/
html,body{
  background:#fff;
  color:#1a1d21;
  font:16px/1.7 "Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,Arial,sans-serif;
}
h1,h2,h3{
  line-height:1.25;
  letter-spacing:.01em;
}
h1{font-size:clamp(24px,3.2vw,36px)}
h2{font-size:clamp(23px,3vw,34px)}
h3{font-size:clamp(22px,1.6vw,22px)}
small{font-size:.9em;}
a:hover{opacity:.88;transition:opacity .2s ease-in-out}
.container{width:min(100% - 2rem,1120px);margin-inline:auto}
.stack>*+*{margin-block-start:1rem}
.visually-hidden{
  position:absolute!important;width:1px!important;height:1px!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  overflow:hidden!important;white-space:nowrap!important;
}

/* Header --------------------------------------------------*/
.site-header{padding:1rem 0}
.agency{margin-left:auto}
.agency img{display:block;height:auto;max-width:100%}

/* Hero --------------------------------------------------*/
.hero{padding:2rem 0 1.25rem;margin:auto;}
h1#hero-title{text-align:center;margin-bottom:1em;}
h1#hero-title>img{margin:1.75em auto;display:block;max-width:100%;height:auto;}
.hero__lead{color:#5a616b;max-width:72ch}
.hero .btn-txt{
  display:block;
  padding:.25rem 1rem;
  background:#fabe00;
  color:#fff;
  text-align:center;
  text-decoration:none;
  transition: background-color .4s ease, transform .25s ease;
  border-radius:0;
}
.hero .btn-txt>h3{margin:auto;}
.hero .btn-txt:hover{transform:translateY(-2px)}

/* 特長 --------------------------------------------------*/
.features{
  width:100%;
  padding:0 0 4rem;
  background:#fff;
}
.features__inner{width:min(100% - 2rem,1120px);margin-inline:auto}
.section-title{color:#b07a00;font-weight:900;letter-spacing:.08em}

.features__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1rem;
  align-items: stretch; /* 各カードを同じ高さに */
}

.feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* ← 上:タイトル＆本文、下:画像 */
  padding: 1rem;
  background: #fff;
  text-align: center;
}

.feature > h3{
    text-align: center;
}
.feature > p {
  text-align: left; /* ← 既存を維持 */
}

.feature__img {
  margin-top: auto; /* ← テキストの下端に押し下げる */
  display: flex;
  align-items: flex-end; /* ← 画像を枠の下端へ */
  justify-content: center;
  width: 100%;
  height: auto;
  text-align: center;
}

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


/* PRODUCTS --------------------------------------------------*/
.products{display:grid;gap:1.75rem}

/* 1製品：左=画像 / 右=本文 */
.product{
  display:grid;
  gap:1rem;
  grid-template-columns:260px 1fr;
  background:#fff;
  padding:1.25rem;
}

/* 画像：自然な比率で横幅フィット */
.product__media{text-align:center;}
.product__media img{
  display:inline-block;
  width:auto;
  max-width:100%;
  height:auto;
}

.product__body{display:block}
.product__heading{
  display:flex;
  align-items:flex-end;
  gap:.75rem;
  margin-bottom:.75rem;
}
.product__badge{
  color:#000;
  font-weight:500;
  padding-top:.15rem;
  padding-right:.5rem;
  letter-spacing:.06em;
  display:inline-block;
}

/* タイトル（アイコン+テキスト横並び→SPで縦） */
.product__title{
  display:flex;
  align-items:flex-end;
  gap:.5rem;
  font-size:1.1rem;
  font-weight:600;
  padding:0 0 .5rem;
}
.product__title img{display:block;width:auto;}
@media (max-width:768px){
  .product__title{
    flex-direction:column;
    align-items:flex-start;
  }
  .product__title img{align-self:flex-start}
}

/* 下段3枠：固定幅（225/225/320）→足りなければ折返し */
.product__specs{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:flex-start;
}
.product__specs .block{flex:0 0 225px;}
.product__specs .block--catalog{flex:0 0 320px;}

/* ブロック基礎 */
.block{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  height:100%;
  padding:0.2rem 0.5rem;
  background:#f3f4f6;
}
.block--catalog{background:transparent}

/* ブロック見出し（黄色丸） */
.block__title{
  position:relative;
  font-weight:700;
  font-size:1.25rem;
  margin-bottom:.6rem;
  padding-left:1.2em;
  line-height:1.4;
}
.block__title::before{
  content:"";
  position:absolute;
  left:0;
  top:.3em;
  width:.9em;
  height:.9em;
  background-color:#fabe00;
  border-radius:50%;
}

/* 箇条書き（◎ / ・） */
.kv{margin:0}
.kv__row{
  display:flex;
  align-items:flex-start;
  line-height:1.5;
}
.kv__bullet{
  display:inline-block;
  width:1em;
  flex-shrink:0;
  text-align:center;
}
.block:nth-of-type(1) .kv__bullet::before{
  content:"◎";
  color:#000;
  font-weight:bold;
}
.block:nth-of-type(2) .kv__bullet::before{
  content:"・";
  color:#000;
  font-weight:bold;
  font-size:1.1em;
}
.kv__text{margin:0}

/* カタログ用ボタン */
.btnimgs{display:grid;}
.btn-txt{
  font-size:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:100%;
  padding:0.1rem 1rem;
  margin-bottom:5px;
  text-decoration:none;
  font-weight:500;
  color:#fff;
  transition:all 0.25s ease;
  overflow:hidden;
  white-space:nowrap;
  border-radius:0;
}
.btn-txt--yellow{background-color:#fabe00;color:#fff}
.btn-txt--black{background-color:#1a1a1a;color:#fff}
.btn-txt--red{background-color:#e60012;color:#fff}
.btn-icon img{display:block;height:1.3em;width:auto;}
.btn-txt:hover{filter:brightness(1.1);transform:translateY(-1px);}
.btn-txt:focus-visible{outline:2px solid #0a66ff;outline-offset:3px;}

/* contact/フッター下部 -----------------------------------*/
.parentbox{text-align:center;padding-top:3em;padding-bottom:0}
.btn_contact img{display:inline-block;margin:0 auto 2em;max-width:100%;height:auto}
.footer_agency{display:inline-block;margin:0 auto}
.footer_agency img{display:block;max-width:100%;height:auto}

/* Footer --------------------------------------------------*/
.site-footer{
  background:#111;
  color:#c8c8c8;
  padding:10px 0;
  margin-top:48px;
  border-top:1px solid #000;
}
.site-footer small{
  display:block;
  text-align:center;
  font-size:13px;
  letter-spacing:.02em;
}

/* hover時の画像透過（PCのみ強め） -----------------------*/
a img{transition:opacity .25s ease-in-out}
a:hover img{opacity:.75}
@media (hover:none) and (pointer:coarse){
  a:hover img{opacity:1 !important;}
}

/* Responsive ---------------------------------------------*/
@media (max-width:960px){
  .features__grid{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}
  .product__specs{flex-direction:column}
  .product__specs .block,
  .product__specs .block--catalog{
    flex:0 0 100%;
    width:100%;
    max-width:100%;
  }
  .block{height:auto}
  .block:nth-of-type(2) .kv__val{
    white-space:normal;
    overflow-wrap:anywhere;
  }
}


@media (min-width:961px){
  .product__specs{align-items:stretch}
  .product__specs .block,
  .product__specs .block--catalog{
    height:auto;
    display:flex;
    flex-direction:column;
  }
  .product__specs .block--catalog .btnimgs{margin-top:auto}
}

/* ====  ==== */
.reveal,
.reveal-group > *{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 560ms ease, transform 560ms ease;
  will-change:opacity, transform;
}
.is-visible{
  opacity:1 !important;
  transform:translateY(0) !important;
}
.reveal[data-delay="0"]{transition-delay:80ms}
.reveal[data-delay="1"]{transition-delay:200ms}
.reveal[data-delay="2"]{transition-delay:320ms}
.reveal[data-delay="3"]{transition-delay:440ms}
.reveal[data-delay="4"]{transition-delay:560ms}
.reveal[data-delay="5"]{transition-delay:680ms}
.reveal-group > *:nth-child(1){transition-delay:120ms}
.reveal-group > *:nth-child(2){transition-delay:220ms}
.reveal-group > *:nth-child(3){transition-delay:320ms}
.reveal-group > *:nth-child(4){transition-delay:420ms}
.reveal-group > *:nth-child(5){transition-delay:520ms}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-group > *{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* 対応工具径：コロン揃え（名称+：まで固定幅） -----------*/
.block:nth-of-type(2) .kv__row{
  display:grid !important;
  grid-template-columns:0.9em 3.8em 1em auto;
  align-items:baseline;
  column-gap:0;
}
.block:nth-of-type(2) .kv__bullet{grid-column:1;}
.block:nth-of-type(2) .kv__label{
  grid-column:2;
  justify-self:start;
  white-space:nowrap;
}
.block:nth-of-type(2) .kv__sep{
  grid-column:3;
  text-align:left;
  padding-left:0.1em;
}
.block:nth-of-type(2) .kv__val{
  grid-column:4;
  text-align:left;
  white-space:nowrap;
}
/* === Hero 2カラム === */
.hero-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.hero-col--text p{ margin:1rem 0 1rem; }
.hero-col--visual{ text-align:center; }
.hero-col--visual img{
  display:block;
  width:auto;          
  max-width:100%;     
  margin:0 auto;
}

.hero .btn-txt{ display:inline-block; }

/* SP：縦並び */
@media (max-width:960px){
  .hero-split{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .hero-col--visual{ order:2; } 
    .hero-col--text p{ margin:1rem 0 1rem; }
}


#kingfisher-title{
  display:flex; 
    
    gap:.5rem; 
    flex-wrap:nowrap;
}
#kingfisher-title img{ flex:0 0 auto; }
#kingfisher-title .title-text{
  letter-spacing:-0.03em;   
  overflow-wrap:anywhere;     
  white-space:nowrap;          
}
@media (max-width:1100px){
  #kingfisher-title .title-text{ white-space:normal; } 
}
@media (max-width:768px){
  #kingfisher-title{ flex-direction:column; align-items:flex-start; }
}



/* 2カラム本体 */
.hero-split{
  display:flex;
  align-items:flex-start;               
  
  width:100%;
  max-width:100%;
}


.hero-col{
  flex: 1 1 0;       
  min-width: 0;              
}


.hero-col--visual{
  display:flex;
  justify-content:flex-end;
}
.hero-col--visual img{
  display:block;
  max-width:100%;
  height:auto;
}

.hero-col--text{
  overflow-wrap:anywhere;
  word-break:normal;
    margin-top:1.5rem;
}

.hero .btn-txt{
  white-space: normal;
  overflow-wrap:anywhere;
}
.hero .btn-txt>h3{
    font-size:  clamp(24px, 1.6vw, 27px);
  margin:0;
  display:inline; 
}

@media (max-width: 960px){
  .hero-split{ flex-direction:column; }
  .hero-col{ width:100%; max-width:100%; }
  .hero-col--visual img{ width:100%; height:auto; }
}

/* ===== リンク無効化（準備中） ===== */
a.disabled {
  pointer-events: none;     
  opacity: 0.5;              
  cursor: default;           
  text-decoration: none;
  filter: grayscale(0.3);    
}


.footer,
.site-footer {                 
  background-color: #000;      
  width: 100%;
  padding: 0;                 
  border: 0;                 
}

.footer__copyRight {
  margin-top: 5rem;            
  background-color: #000;     
  text-align: center;
}

.footer__copyRight p {
  margin: 0;                
  color: #fff;                
  font-size: 12px;          
  letter-spacing: 0.05em;     
  line-height: 1.875;        
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,Arial,sans-serif;
}

.site-footer small{display:none;}

/* 既存 .reveal のトランジションはそのまま。GPUレイヤー昇格＋描画分離だけ追加 */
.reveal,
.reveal-group > *{
  /* 既存: opacity/transform/transition/will-change はそのまま */
  transform: translate3d(0, 14px, 0);   /* ← translate3d化でGPU合成に */
  backface-visibility: hidden;          /* ← ページャギ防止 */
  contain: paint;                       /* ← 要素ごとにペイント分離（Chromeの再描画負荷を軽減） */
}

/* 表示時も3Dでフラット化してレイヤーを保つ */
.is-visible{
  transform: translate3d(0, 0, 0);
  will-change: auto;   /* ← アニメ終了後はヒント解除して負荷を戻す（推奨） */
}

/* 画像のディコード中に固まるのを防ぐ（近年のChromeで効果的） */
img[decoding="async"]{
  content-visibility: auto;            /* ← ペイント最適化。視認時に描画 */
  contain-intrinsic-size: auto 200px;  /* ← 仮サイズを確保してCLSを防ぐ（任意の目安） */
}