/* ============================================================================
   attaco.jp 追加スタイル
   dist/css/style.css の「末尾」に追記してください（既存の記述は変更しません）。

   前提（既存サイトから読み取った設定）
     html { font-size: 62.5% }   → 1rem = 10px
     body { font-family:"Noto Serif JP", serif; color:#333 }
     見出し欧文            "Cormorant Garamond", serif  (.t-font_1 / .t-head__ttl)
     ブランドのオレンジ     #f39519（hover: #f6ab49）
     SPブレークポイント     max-width: 896px
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. 記事内の画像の配置（03の修正）

   テーマに .aligncenter の定義が無いため、コラム41本の「中央寄せ」画像が
   すべて左寄せで表示されている。WordPress標準のクラスを定義する。
   ---------------------------------------------------------------------------- */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignleft  { float: left;  margin: 0 2rem 1.5rem 0; }
.alignright { float: right; margin: 0 0 1.5rem 2rem; }
.alignnone  { display: block; }

figure.aligncenter,
.wp-caption.aligncenter { margin-left: auto; margin-right: auto; }

/* 記事内の画像は width 属性が 400px 固定で書かれているが、
   SPでは画面幅に収める */
@media screen and (max-width: 896px) {
  .alignleft, .alignright { float: none; margin: 0 auto 1.5rem; display: block; }
  .p-entry img, .entry-content img { max-width: 100%; height: auto; }
}


/* ----------------------------------------------------------------------------
   2. ファーストビューの説明文とCTA（05/hero-copy.html とセット）

   既存の .l-kvcatch__ttl（キャッチ）と、追加する .l-kvcatch__lead（説明+CTA）を
   .l-kvcatch でひとまとめにし、位置決めはその親だけで行う。
   こうしないと、キャッチと説明文がそれぞれ別々に bottom 指定されることになり、
   文言の長さが変わったときに重なります（実測で12px重なりました）。
   ---------------------------------------------------------------------------- */
#home-body #home-wrapper .l-kv .l-kvcatch {
  position: absolute;
  top: 30rem;
  right: 5%;
  z-index: 5;
  text-align: right;
  color: #fff;
  text-shadow: 0 .1rem 2.4rem rgba(0, 0, 0, .55);
}
/* キービジュアルは明るい写真も混ざるため、文字の下だけ薄く落とす。
   写真の印象は変えず、白文字の可読性だけ確保する。 */
#home-body #home-wrapper .l-kv .l-kvcatch::before {
  content: "";
  position: absolute;
  inset: -4rem -6rem -4rem -8rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 70% 50%, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 72%);
}
/* 親が位置を持つので、キャッチ自身の絶対配置は解除する */
#home-body #home-wrapper .l-kv .l-kvcatch .l-kvcatch__ttl {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: 0 0 2.4rem;
}
#home-body #home-wrapper .l-kv .l-kvcatch__lead p {
  margin: 0 0 2.4rem;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: .05em;
}
#home-body #home-wrapper .l-kv .l-kvcatch__cta {
  display: flex;
  justify-content: flex-end;
  gap: 1.2rem;
}
#home-body #home-wrapper .l-kv .l-kvcatch__cta a {
  display: inline-block;
  padding: 1.3rem 2.8rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  text-decoration: none;
  border: .1rem solid #fff;
  color: #fff;
  transition: background-color .3s, color .3s;
}
#home-body #home-wrapper .l-kv .l-kvcatch__cta a.-fill {
  background-color: #f39519;
  border-color: #f39519;
}
#home-body #home-wrapper .l-kv .l-kvcatch__cta a:hover { background-color: #fff; color: #222; }
#home-body #home-wrapper .l-kv .l-kvcatch__cta a.-fill:hover { background-color: #f6ab49; border-color: #f6ab49; color: #fff; }

@media screen and (max-width: 896px) {
  #home-body #home-wrapper .l-kv .l-kvcatch {
    top: auto;
    bottom: 2rem;
    right: auto;
    left: 2rem;
    width: calc(100% - 4rem);
    text-align: left;
  }
  #home-body #home-wrapper .l-kv .l-kvcatch::before {
    inset: -3rem -2rem -3rem -3rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 55%, rgba(0, 0, 0, 0) 100%);
  }
  #home-body #home-wrapper .l-kv .l-kvcatch .l-kvcatch__ttl { margin-bottom: 1.6rem; }
  #home-body #home-wrapper .l-kv .l-kvcatch__lead p { font-size: 1.2rem; margin-bottom: 1.6rem; }
  #home-body #home-wrapper .l-kv .l-kvcatch__cta { justify-content: flex-start; gap: .8rem; }
  #home-body #home-wrapper .l-kv .l-kvcatch__cta a { padding: 1rem 1.8rem; font-size: 1.2rem; }
}


/* ----------------------------------------------------------------------------
   3. 実績バンド（05/proof-band.html とセット）
   ---------------------------------------------------------------------------- */
/* 直前の #point セクション（01/02/03）は top:100px + margin-bottom:-100px で
   次のブロックに 100px 食い込む作りになっている（テーマ既存の重ね表現）。
   その分だけ内容を下げないと、実績バンドの文字が写真の上に重なる。
   ※このバンドを #point の直後以外に置く場合は、この +100px は外すこと。 */
.p-proof {
  background-color: #1c1712;
  color: #fff;
  padding: calc(6rem + 100px) 0 6rem;
}
.p-proof__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-proof__list > li {
  text-align: center;
  padding: 0 3rem;
  border-left: .1rem solid rgba(255, 255, 255, .18);
}
.p-proof__list > li:first-child { border-left: none; }
.p-proof__num {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 5.6rem;
  line-height: 1.1;
  letter-spacing: .1rem;
  color: #f39519;
}
.p-proof__num small { font-size: .38em; letter-spacing: .1em; margin-left: .3rem; color: #fff; }
.p-proof__label { display: block; margin-top: 1.4rem; font-size: 1.4rem; line-height: 1.9; }
.p-proof__label small {
  display: block;
  margin-top: .8rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .55);
}
.p-proof__note {
  margin: 4rem 0 0;
  text-align: center;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.9;
}

@media screen and (max-width: 896px) {
  .p-proof { padding: calc(4rem + 100px) 0 4rem; }
  .p-proof__list { grid-template-columns: 1fr; }
  .p-proof__list > li {
    border-left: none;
    border-top: .1rem solid rgba(255, 255, 255, .18);
    padding: 2.4rem 2rem;
  }
  .p-proof__list > li:first-child { border-top: none; padding-top: 0; }
  .p-proof__num { font-size: 4rem; }
  .p-proof__label { margin-top: .8rem; font-size: 1.3rem; }
  .p-proof__note { margin-top: 2.4rem; font-size: 1.1rem; }
}


/* ----------------------------------------------------------------------------
   4. トップの「お客様の声」抜粋（05/voice-quotes.html とセット）

   レイアウトは既存の .l-clm_3 / .u-afix_1 / .p-archivelist_c をそのまま使う。
   ここでは「暗い背景の上に置いたときの色」だけを足す。
   ---------------------------------------------------------------------------- */
.p-vquote .p-archivelist_c__ttl {
  font-size: 1.7rem;
  line-height: 1.75;
  font-weight: 400;
  color: #fff;
}
.p-vquote .p-archivelist_c__ttl::before { content: "「"; }
.p-vquote .p-archivelist_c__ttl::after  { content: "」"; }
.p-vquote .p-archivelist_c__date { color: rgba(255, 255, 255, .6); }
.p-vquote .u-afix__item { transition: transform .6s ease; }
.p-vquote .l-clm__item > a { text-decoration: none; }
.p-vquote .l-clm__item > a:hover .u-afix__item,
.p-vquote .l-clm__item > a:focus-visible .u-afix__item { transform: scale(1.04); }
.p-vquote .u-afix_1 { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .p-vquote .u-afix__item { transition: none; }
}
@media screen and (max-width: 896px) {
  .p-vquote .p-archivelist_c__ttl { font-size: 1.5rem; line-height: 1.7; }
}


/* ----------------------------------------------------------------------------
   5. グローバルナビの日本語併記（05/nav-jp.html とセット）
   ---------------------------------------------------------------------------- */
.p-navbar__hnav ul li > a { line-height: 1.25; }
.p-navbar__hnav ul li > a .-jp,
.p-navbar__drawer--menu ul li > a .-jp {
  display: block;
  margin-top: .5rem;
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  letter-spacing: .05em;
  text-indent: 0;
  opacity: .7;
}
@media screen and (max-width: 896px) {
  .p-navbar__hnav ul li > a .-jp,
  .p-navbar__drawer--menu ul li > a .-jp { font-size: 1.1rem; margin-top: .3rem; }
}


/* ----------------------------------------------------------------------------
   6. アイコンのSVG化（04/ とセット）
   Font Awesome のフォント(156KB)を読まなくてよくするための最小限の指定
   ---------------------------------------------------------------------------- */
.x-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  fill: currentColor;
}
.p-edgebnr__item a .x-icon { font-size: 2rem; margin: 0 0 1rem; }
.p-footer_normal__sns a .x-icon { font-size: 2.2rem; }
@media screen and (max-width: 896px) {
  .p-edgebnr.-is_sp .p-edgebnr__item a .x-icon,
  .p-edgebnr.-is_tb .p-edgebnr__item a .x-icon {
    font-size: 2.2rem; margin: 0 .5rem 0 0; vertical-align: middle;
  }
}


/* ----------------------------------------------------------------------------
   7. キーボード操作時のフォーカス表示（アクセシビリティ）
   現在どの要素にもフォーカスリングが出ないため、キーボードで
   「今どこにいるか」が分からない状態になっている。
   ---------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: .2rem solid #f39519;
  outline-offset: .3rem;
}


/* ----------------------------------------------------------------------------
   8. 画像の読み込み中のガタつき対策
   ---------------------------------------------------------------------------- */
img { max-width: 100%; }
img[width][height] { height: auto; }