/*
Theme Name: 8fect
Description: 株式会社8fect コーポレートサイト専用テーマ。乗り物専門SNS運用支援×映像制作。
Version: 1.3.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: eightfect
*/

/* ============================================
   ベース
   ============================================ */

:root {
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --black:    #111111;
  --white:    #ffffff;
  --contact-bg: #f8f8f8;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 固定ヘッダー分だけアンカー位置をずらす */
  scroll-padding-top: 4rem;
}

body {
  margin: 0;
  font-family: 'Jost', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  background-color: var(--white);
  color: var(--black);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================
   共通パーツ
   ============================================ */

.section {
  padding: 8rem 1.5rem;
}

.container      { max-width: 56rem; margin-inline: auto; }
.container-wide { max-width: 72rem; margin-inline: auto; }
.container-narrow { max-width: 42rem; margin-inline: auto; }

.section-label {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 0 0 3rem;
}

.hr-thin {
  border: none;
  border-top: 1px solid var(--gray-100);
  margin: 0 0 4rem;
}

.hr-thin--dark { border-top-color: var(--gray-200); }

/* 見出しの下に線を置く並び（Service / Works / Contact） */
.section-label--tight { margin-bottom: 1rem; }
.hr-thin--after-title { margin-top: 2rem; margin-bottom: 3rem; }

.section-title {
  font-size: 1.875rem;
  font-weight: 300;
  color: var(--gray-800);
  line-height: 1.35;
  margin: 0;
}

.btn {
  display: inline-block;
  padding: 0.75rem 2.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}

.btn--light { background: var(--white); color: var(--gray-800); }
.btn--light:hover { background: var(--gray-200); }

.btn--outline { border-color: var(--white); color: var(--white); }
.btn--outline:hover { background: var(--white); color: var(--gray-800); }

.btn--solid { background: var(--gray-500); color: var(--white); padding: 1rem 3rem; }
.btn--solid:hover { background: var(--gray-600); }

/* ============================================
   ヘッダー
   ============================================ */

.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  opacity: 0;
  transform: translateY(-0.5rem);
  pointer-events: none;
  transition: opacity .5s, transform .5s;
}

/* スクロール後、または下層ページでは常時表示 */
.site-header.is-visible,
body:not(.home) .site-header {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-header__inner {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__logo img { height: 3.25rem; width: auto; }

.site-header__logo-text {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--black);
}

.global-nav { display: none; align-items: center; gap: 2.5rem; }

.global-nav a {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-600);
  transition: color .2s;
}
.global-nav a:hover { color: var(--black); }

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.5rem;
  background: none;
  border: none;
}

.nav-toggle span {
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--black);
  transition: transform .3s, opacity .3s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

.mobile-nav {
  display: none;
  background: var(--white);
  border-top: 1px solid var(--gray-100);
}
.mobile-nav.is-open { display: block; }

.mobile-nav a {
  display: block;
  padding: 1rem 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-50);
}
.mobile-nav a:hover { color: var(--black); }

/* ============================================
   ヒーロー
   ============================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--gray-800);
}

.hero__media,
.hero__media video,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 自動再生できない環境（iPhoneの低電力モード等）では動画を隠し、
   静止画（background-image）だけを見せる。再生ボタンの表示を防ぐ */
.hero__media { background-size: cover; background-position: center; background-color: var(--black); }
.hero.is-video-paused .hero__media video { opacity: 0; }

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding-inline: 1.5rem;
}

.hero__label {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-300);
  margin: 0 0 2rem;
}

.hero__title {
  font-size: 2.25rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--white);
  line-height: 1.25;
  margin: 0 0 1.5rem;
}
.hero__title strong { font-weight: 500; }

.u-nowrap { white-space: nowrap; }

.hero__lead {
  font-size: 0.875rem;
  color: var(--gray-100);
  letter-spacing: 0.02em;
  line-height: 1.9;
  max-width: 44rem;
  margin: 0 auto 3.5rem;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

.hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
}

.hero__scroll span {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-300);
}

.hero__scroll i {
  display: block;
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, var(--gray-300), transparent);
}

/* ============================================
   About
   ============================================ */

.about { background: var(--white); }

.about__grid {
  display: grid;
  gap: 4rem;
  align-items: start;
}

.about__heading {
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--gray-800);
  margin: 0 0 1rem;
}
.about__heading strong { font-weight: 500; }

.about__company {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 2rem 0 0;
}

.about__body { font-size: 1rem; line-height: 2; color: var(--gray-700); }
.about__body p { margin: 0 0 1.5rem; }
.about__body p:last-child { margin-bottom: 0; }
.about__body .is-emphasis { color: var(--gray-800); font-weight: 500; }

.about__pains {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0 0 0 1.25rem;
  border-left: 1px solid var(--gray-200);
}
.about__pains li { margin-bottom: 0.5rem; }
.about__pains li:last-child { margin-bottom: 0; }

/* プロフィール（顔写真＋氏名＋講師実績） */
.profile {
  margin-top: 6rem;
  padding-top: 4rem;
  border-top: 1px solid var(--gray-100);
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.profile__photo {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gray-100);
}

.profile__role {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  margin: 0 0 0.5rem;
}

.profile__name {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--gray-800);
  margin: 0 0 0.25rem;
}

.profile__name-en {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--gray-400);
  margin: 0 0 1.5rem;
}

.profile__credits {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.profile__credits li {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--gray-700);
  padding: 0.4rem 0 0.4rem 1rem;
  border-left: 2px solid var(--gray-300);
  margin-bottom: 0.5rem;
}

.profile__text { font-size: 1rem; line-height: 2; color: var(--gray-700); }
.profile__text p { margin: 0 0 1.5rem; }
.profile__text p:last-child { margin-bottom: 0; }

/* 4項目（SNS / FILM / MEO / LINE） */
.pillars {
  margin-top: 6rem;
  padding-top: 4rem;
  border-top: 1px solid var(--gray-100);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

.pillars__item { text-align: center; }

.pillars__key {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--gray-600);
  margin: 0 0 0.5rem;
}

.pillars__label {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--gray-600);
  margin: 0;
}

/* ============================================
   Service
   ============================================ */

.service { background: var(--gray-50); }

.service__list { margin-top: 0; }

.service__item {
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--gray-200);
  display: grid;
  gap: 2rem;
  align-items: start;
}
.service__item:last-child { border-bottom: none; }

.service__number {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-300);
  margin: 0 0 0.5rem;
}

.service__name {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--gray-700);
  margin: 0 0 0.25rem;
}

.service__name-en {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  margin: 0;
}

.service__desc {
  font-size: 1rem;
  line-height: 2;
  color: var(--gray-700);
  margin: 0 0 1.5rem;
}

.service__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.service__tags span {
  font-size: 0.8125rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  letter-spacing: 0.02em;
}

.service__cta { margin-top: 4rem; text-align: center; }

/* ============================================
   Works
   ============================================ */

.works { background: var(--white); }

.works__head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 0;
}

.works__links { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.works__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  border: 1px solid var(--gray-300);
  padding: 0.75rem 1.5rem;
  transition: background-color .2s, color .2s, border-color .2s;
}
.works__ig:hover { background: var(--gray-500); color: var(--white); border-color: var(--gray-500); }

.works__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.works__card {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--gray-100);
  overflow: hidden;
}

.works__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.works__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-300);
}

.works__overlay {
  position: absolute;
  inset: 0;
  background: var(--gray-500);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s;
}
.works__card:hover .works__overlay { opacity: 0.6; }

.works__overlay span {
  color: var(--white);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity .3s;
}
.works__card:hover .works__overlay span { opacity: 1; }

.works__note {
  text-align: center;
  font-size: 0.75rem;
  color: var(--gray-300);
  letter-spacing: 0.02em;
  margin-top: 2rem;
}

/* ============================================
   Voice（お客様の声・縦型インタビュー動画）
   ============================================ */

.voices__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.voices__card {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--gray-500);
  overflow: hidden;
}

.voices__card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .voices__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================
   Contact（メール＋LINEの2導線）
   ============================================ */

.contact { background: var(--contact-bg); }

.contact__lead {
  font-size: 1rem;
  line-height: 2;
  color: var(--gray-700);
  margin: 1rem 0 0;
}

.contact__actions {
  margin-top: 3.5rem;
  display: grid;
  gap: 1rem;
}

.contact__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  border: 1px solid var(--gray-300);
  background: var(--white);
  transition: background-color .2s, color .2s, border-color .2s;
}
.contact__btn:hover { background: var(--black); border-color: var(--black); color: var(--white); }
.contact__btn:hover .contact__btn-sub { color: var(--gray-300); }

.contact__btn-icon { width: 2rem; height: 2rem; }

.contact__btn-main {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}

.contact__btn-sub {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  transition: color .2s;
}

.contact__note {
  margin-top: 2.5rem;
  font-size: 0.75rem;
  line-height: 2;
  color: var(--gray-400);
  text-align: center;
}

/* ============================================
   フッター
   ============================================ */

.site-footer {
  padding: 4rem 1.5rem;
  background: var(--gray-600);
  color: var(--white);
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.site-footer__logo {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  margin: 0 0 0.75rem;
}

.site-footer__tagline {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-300);
  margin: 0;
}

.site-footer__nav { display: flex; flex-wrap: wrap; gap: 2rem; }

.site-footer__nav a {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-300);
  transition: color .2s;
}
.site-footer__nav a:hover { color: var(--white); }

.site-footer__sns { display: flex; gap: 1.25rem; align-items: center; }
.site-footer__sns a { color: var(--gray-300); transition: color .2s; }
.site-footer__sns a:hover { color: var(--white); }

.site-footer hr {
  border: none;
  border-top: 1px solid var(--gray-500);
  margin: 0 0 2rem;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.site-footer__copy,
.site-footer__bottom a {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-300);
  margin: 0;
}
.site-footer__bottom a:hover { color: var(--white); }

/* ============================================
   ブログ
   ============================================ */

.page-head {
  padding: 10rem 1.5rem 0;
  background: var(--white);
}

.page-head__title {
  font-size: 1.875rem;
  font-weight: 300;
  color: var(--gray-800);
  margin: 0;
}

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-list__item { border-bottom: 1px solid var(--gray-100); }

.post-list__link {
  display: grid;
  gap: 1rem;
  padding: 2.5rem 0;
  align-items: center;
  transition: opacity .2s;
}
.post-list__link:hover { opacity: 0.6; }

.post-list__thumb {
  aspect-ratio: 16 / 10;
  background: var(--gray-100);
  overflow: hidden;
}
.post-list__thumb img { width: 100%; height: 100%; object-fit: cover; }

.post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  margin-bottom: 0.75rem;
}

.post-meta__cat {
  border: 1px solid var(--gray-300);
  padding: 0.15rem 0.6rem;
}

.post-list__title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0 0 0.5rem;
}

.post-list__excerpt {
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--gray-500);
  margin: 0;
}

.post-empty {
  padding: 4rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--gray-400);
}

/* 記事本文 */
.entry__title {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--gray-800);
  margin: 0 0 2rem;
}

.entry__thumb { margin-bottom: 3rem; }

.entry__content {
  font-size: 0.9375rem;
  line-height: 2;
  color: var(--gray-700);
}

.entry__content h2 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--gray-800);
  margin: 3.5rem 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gray-200);
}

.entry__content h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--gray-800);
  margin: 2.5rem 0 1rem;
}

.entry__content p { margin: 0 0 1.75rem; }
.entry__content a { color: var(--gray-800); text-decoration: underline; }

/* ブロックエディターの部品（ボタン・表・囲み枠）をテーマのトーンに合わせる */
.entry__content .wp-block-button__link {
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  border-radius: 0;
  padding: 0.9rem 2rem;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}
.entry__content .is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--gray-800);
  border: 1px solid var(--gray-800);
}
.entry__content .wp-block-button__link:hover { opacity: 0.8; }

.entry__content .wp-block-table table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.entry__content .wp-block-table th,
.entry__content .wp-block-table td { border: 1px solid var(--gray-200); padding: 0.75rem 1rem; text-align: left; }
.entry__content .wp-block-table th { background: var(--gray-50); font-weight: 500; }

.entry__content .cta-box {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  padding: 2rem 1.5rem;
  margin: 3rem 0 1rem;
}
.entry__content .cta-box h3 { margin-top: 0; }
.entry__content .cta-box p:last-of-type { margin-bottom: 1.5rem; }
.entry__content ul,
.entry__content ol { margin: 0 0 1.75rem; padding-left: 1.5rem; }
.entry__content li { margin-bottom: 0.5rem; }
.entry__content img { margin: 2rem 0; }

.entry__content blockquote {
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 2px solid var(--gray-300);
  color: var(--gray-500);
}

.entry__nav {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--gray-200);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gray-500);
}
.entry__nav a:hover { color: var(--black); }

/* ページネーション */
.pagination {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.5rem;
  font-size: 0.75rem;
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
  transition: background-color .2s, color .2s, border-color .2s;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--gray-600);
  border-color: var(--gray-600);
  color: var(--white);
}

/* ============================================
   404
   ============================================ */

.error-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
  padding: 10rem 1.5rem 6rem;
}

.error-page__code {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--gray-300);
  margin: 0;
}

.error-page__text {
  font-size: 0.875rem;
  color: var(--gray-500);
  line-height: 2;
  margin: 0;
}

/* ============================================
   レスポンシブ（768px以上）
   ============================================ */

@media (min-width: 768px) {
  .global-nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }

  .hero__title    { font-size: 3.75rem; }
  .hero__lead     { font-size: 1.0625rem; }
  .hero__actions  { flex-direction: row; }

  .section-title  { font-size: 2.25rem; }
  .about__heading { font-size: 2.25rem; }

  .about__grid    { grid-template-columns: repeat(2, 1fr); }
  .profile        { grid-template-columns: 10rem 1fr; gap: 3.5rem; }
  .pillars        { grid-template-columns: repeat(4, 1fr); }

  .service__item  { grid-template-columns: 1fr 2fr; gap: 2rem; }

  .works__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .works__grid    { grid-template-columns: repeat(3, 1fr); }

  .contact__actions { grid-template-columns: repeat(2, 1fr); }

  .site-footer__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .site-footer__bottom { flex-direction: row; justify-content: space-between; }

  .post-list__link { grid-template-columns: 16rem 1fr; gap: 2rem; }

  .entry__title   { font-size: 2rem; }
  .error-page__code { font-size: 4.5rem; }
}

@media (min-width: 1024px) {
  .hero__title { font-size: 4.5rem; }
}

/* 動きを減らす設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================
   読み上げソフト向けの補助
   ============================================ */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  padding: 0.75rem 1.25rem;
  background: var(--white);
  color: var(--black);
  font-size: 0.875rem;
  border: 1px solid var(--gray-300);
}

/* お問い合わせボタンが1つだけのとき（LINE未設定時）の調整 */
.contact__actions--single { max-width: 20rem; margin-inline: auto; }

/* button 要素をリンクと同じ見た目に揃える */
button.contact__btn {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: center;
}

/* 見出し直後のセクション（ブログ一覧など）は上の余白を詰める */
.section--tight { padding-top: 3rem; }

/* WordPress が出力するページ送りの内側 */
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* WordPress 標準の画像まわりのスタイル */
.entry__content .alignleft  { float: left; margin: 0.5rem 1.5rem 1rem 0; }
.entry__content .alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.entry__content .aligncenter { margin-inline: auto; }
.entry__content .wp-caption-text,
.entry__content figcaption {
  font-size: 0.75rem;
  color: var(--gray-400);
  text-align: center;
  margin-top: 0.5rem;
}

/* ============================================
   実績：YouTube動画カードと社名表記
   ============================================ */

.works__item {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

button.works__card {
  padding: 0;
  border: none;
  background: var(--gray-100);
  cursor: pointer;
  width: 100%;
}

.works__card--video { aspect-ratio: 16 / 9; }

.works__card--video img,
.works__card--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.works__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.7);
  transition: background-color .2s;
}

.works__play::after {
  content: '';
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.85rem;
  border-color: transparent transparent transparent var(--white);
}

.works__card--video:hover .works__play { background: rgba(17, 17, 17, 0.9); }

.works__caption {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--gray-700);
  text-align: center;
}

.works__caption-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: var(--gray-400);
}

/* ============================================
   2026-09-05 デザインレビュー対応（Mit Design さんの指摘）
   ============================================ */

/* 1-① 見出しの句読点で左寄りに見えないよう、行ごとに字下げ（レビュー指示: span + text-indent） */
.hero__title-line { display: inline-block; text-indent: 0.75em; }

/* 1-② スマホは2行に収まる範囲で見出しを大きく（画面幅に対する割合で指定） */
.hero__title { font-size: clamp(2rem, 9.6vw, 3.75rem); }

/* 3-① プロフィール：スマホは写真の右に名前、肩書き・本文はその下 */
.profile__head { display: flex; align-items: center; gap: 1.25rem; }
.profile__head .profile__photo { width: 6rem; height: 6rem; flex: none; }
.profile__ident .profile__name-en { margin-bottom: 0; }
.profile__body { margin-top: 0.5rem; }

/* 3-② 肩書きは引用と区別する（左線をやめる） */
.profile__credits li {
  border-left: none;
  padding: 0;
  font-size: 0.875rem;
  color: var(--gray-600);
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}

/* 4-① サービス番号をはっきり */
.service__number { font-size: 1rem; color: var(--gray-500); }

/* 4-② スマホのサービス名を大きく（一番長い名前が折り返さない範囲） */
.service__name { font-size: clamp(1.25rem, 6.9vw, 1.75rem); }

/* 4-③ サービスのタグは「押せそう」に見えないチェックリスト形式に（記号はSVG描画） */
.service__tags { gap: 0.4rem 1.5rem; }
.service__tags span {
  display: inline-flex;
  align-items: center;
  border: none;
  padding: 0;
  font-size: 0.9375rem;
  color: var(--gray-700);
}
.service__tags span::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  background-color: var(--gray-500);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/></svg>") center / contain no-repeat;
}

/* 4-④ ボタンの文字は最小16px */
.btn { font-size: 1rem; padding: 0.9rem 2.5rem; letter-spacing: 0.08em; }
.contact__btn-main { font-size: 1rem; }
.works__ig { font-size: 1rem; letter-spacing: 0.06em; padding: 0.9rem 1.5rem; }

/* 5-① 実績のYouTube/Instagramボタンはセクションの最後に */
.works__links { justify-content: center; margin-top: 2.5rem; }

/* 5-③ 実績のキャプションと次の行の間隔を広げ、どのサムネイルの説明か分かるように */
.works__grid { gap: 2.5rem 0.75rem; }
.works__caption { margin-top: 0.75rem; font-size: 0.9375rem; }
.works__caption-sub { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--gray-500); }

/* 5-④ 再生数の時点をはっきり */
.works__note { font-size: 0.875rem; color: var(--gray-600); margin-top: 2.5rem; }

/* 8 スマホメニュー展開時に背景を暗くする */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 40;
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }

@media (min-width: 768px) {
  /* 1-② PC以上は従来どおりの大きさ */
  .hero__title { font-size: 3.75rem; }
  .service__name { font-size: 1.25rem; }

  /* 3-① PCは写真を左、名前と本文を右の2カラムに戻す（写真は2行分にまたがる） */
  .profile { grid-template-rows: auto 1fr; row-gap: 0; }
  .profile__head { display: contents; }
  .profile__head .profile__photo { width: 10rem; height: 10rem; grid-row: 1 / span 2; }
  .profile__ident { grid-column: 2; }
  .profile__body { grid-column: 2; margin-top: 0; }
  .profile__ident .profile__name-en { margin-bottom: 1.5rem; }

  /* 7-① フッターのナビは下揃え */
  .site-footer__top { align-items: flex-end; }

  .nav-overlay { display: none; }
}

@media (min-width: 1024px) {
  .hero__title { font-size: 4.5rem; }
}

/* ============================================
   お問い合わせフォーム（Contact Form 7）
   ============================================ */
.contact__form { margin-top: 3rem; }
.contact__form .wpcf7-form p { margin: 0 0 1.25rem; }
.contact__form label {
  display: block;
  font-size: 0.875rem;
  color: var(--gray-700);
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.contact__form .req { color: #b91c1c; font-size: 0.75rem; margin-left: 0.4em; }
.contact__form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-800);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.contact__form .wpcf7-form-control:focus { outline: none; border-color: var(--gray-700); }
.contact__form textarea.wpcf7-form-control { min-height: 10rem; resize: vertical; }
.contact__form .wpcf7-acceptance label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.contact__form .wpcf7-acceptance input { width: 1.1rem; height: 1.1rem; margin: 0; }
.contact__form .wpcf7-submit {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0.1em;
  padding: 1rem 2rem;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
  cursor: pointer;
  transition: opacity 0.2s;
}
.contact__form .wpcf7-submit:hover { opacity: 0.8; }
.contact__form .wpcf7-spinner { display: block; margin: 0.75rem auto 0; }
.contact__form .wpcf7-not-valid-tip { font-size: 0.8125rem; color: #b91c1c; margin-top: 0.3rem; }
.contact__form .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--gray-300);
  font-size: 0.875rem;
  color: var(--gray-700);
}
.contact__form .wpcf7-form.sent .wpcf7-response-output { border-color: var(--gray-700); }
.contact__form .wpcf7-form.invalid .wpcf7-response-output,
.contact__form .wpcf7-form.failed .wpcf7-response-output { border-color: #b91c1c; color: #b91c1c; }

.contact__or {
  margin: 3rem 0 1rem;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.15em;
  color: var(--gray-500);
}
.contact__form + .contact__or + .contact__actions--single { margin-top: 0; grid-template-columns: 1fr; max-width: 22rem; }

@media (min-width: 768px) {
  .contact__form .contact__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
}

/* ============================================
   講師実績のリンク
   ============================================ */

.profile__credits a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--gray-300);
}
.profile__credits a:hover { color: var(--gray-500); }

/* ============================================
   支援実績（Works の下）
   ============================================ */

.results {
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 1px solid var(--gray-100);
}

.results__label {
	text-align: center;
	font-size: 0.75rem;
	letter-spacing: 0.25em;
	color: var(--gray-400);
	margin: 0 0 2rem;
}

.results__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem 1rem;
}

.results__item { text-align: center; }

.results__key {
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	color: var(--gray-800);
	margin: 0 0 0.5rem;
}

.results__name {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	color: var(--gray-600);
	margin: 0;
}

.results__note {
	font-size: 0.75rem;
	line-height: 1.8;
	color: var(--gray-400);
	margin: 2rem 0 3rem;
}

@media (min-width: 768px) {
	.results__grid { grid-template-columns: repeat(4, 1fr); }
	.results__key { font-size: 1.75rem; }
	.results__note { text-align: center; }
}

/* ============================================
   料金・よくある質問
   ============================================ */

.faq { background: var(--gray-50); }

.price {
	background: var(--white);
	border: 1px solid var(--gray-200);
	padding: 2rem 1.5rem;
	text-align: center;
	margin-top: 1rem;
}

.price__name {
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	color: var(--gray-600);
	margin: 0 0 0.5rem;
}

.price__value {
	font-size: 1rem;
	color: var(--gray-700);
	margin: 0;
}

.price__value strong {
	font-size: 2.25rem;
	font-weight: 300;
	color: var(--gray-800);
	margin: 0 0.15em;
}

.price__note {
	font-size: 0.75rem;
	line-height: 1.8;
	color: var(--gray-400);
	margin: 1rem 0 0;
	text-align: left;
}

.faq__list { margin: 3rem 0 0; }

.faq__item {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--gray-200);
}
.faq__item:first-child { border-top: 1px solid var(--gray-200); }

.faq__q,
.faq__a {
	position: relative;
	padding-left: 2rem;
	line-height: 1.9;
}

.faq__q {
	font-size: 1rem;
	font-weight: 500;
	color: var(--gray-800);
}

.faq__a {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	color: var(--gray-700);
}

.faq__q::before,
.faq__a::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 300;
	color: var(--gray-400);
}
.faq__q::before { content: "Q"; }
.faq__a::before { content: "A"; }

/* ============================================
   会社概要
   ============================================ */

.company { background: var(--white); }

.company__table { margin: -1.5rem 0 0; }

.company__row {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--gray-200);
	display: grid;
	gap: 0.25rem;
}

.company__row dt {
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	color: var(--gray-500);
}

.company__row dd {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.9;
	color: var(--gray-800);
}

@media (min-width: 768px) {
	.company__row { grid-template-columns: 9rem 1fr; gap: 1.5rem; }
}

/* ============================================
   スクロールでフェードイン（main.js の 5.）
   ============================================ */

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-shown {
	opacity: 1;
	transform: none;
}

/* ============================================
   お客様の声の文章・制作実績の一言説明
   ============================================ */

.works__caption-desc {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--gray-500);
	margin-top: 0.25rem;
}

.voices__story {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--gray-200);
	text-align: left;
}

.voices__story dt {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--gray-400);
	margin: 0 0 0.25rem;
}

.voices__story dd {
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--gray-700);
	margin: 0 0 1rem;
}

.voices__story dd:last-child { margin-bottom: 0; }

/* ============================================
   ヒーロー動画：素材に入っている上下の黒帯が映らないよう少し拡大する
   ============================================ */

.hero__media { overflow: hidden; }
/* 動画と静止画（自動再生できない端末向けの背景画像）をまとめて拡大する */
.hero { overflow: hidden; }
.hero__media { transform: scale(1.28); transform-origin: center; }

/* ============================================
   LINEのロゴはブランドカラー（緑）で表示
   ============================================ */

.contact__btn .contact__btn-icon--line { color: #06c755; }

/* お客様の声 → 支援事例ページへのボタン */
.voices__more { margin-top: 3rem; text-align: center; }

/* ============================================
   ブログ記事下の「支援事例」枠
   ============================================ */

.related-cases {
	margin: 4rem 0 0;
	padding: 2rem 1.5rem;
	background: var(--gray-50);
	border: 1px solid var(--gray-200);
}

.related-cases__label {
	font-size: 0.75rem;
	letter-spacing: 0.25em;
	color: var(--gray-400);
	margin: 0 0 0.25rem;
}

.related-cases__title {
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--gray-800);
	margin: 0 0 1rem;
}

.related-cases__list {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.related-cases__list li {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--gray-200);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.related-cases__list a { color: var(--gray-700); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--gray-300); }
.related-cases__list a:hover { color: var(--gray-500); }

.related-cases__more {
	display: inline-block;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	color: var(--gray-600);
	border: 1px solid var(--gray-300);
	padding: 0.6rem 1.25rem;
}
.related-cases__more:hover { background: var(--gray-700); color: var(--white); border-color: var(--gray-700); }

/* 代表者プロフィールの写真 */
.entry__content .is-profile-photo { max-width: 220px; margin: 0 0 2rem; }
.entry__content .is-profile-photo img { width: 100%; height: auto; border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ============================================
   Concept（考え方）
   ============================================ */

.concept { background: var(--gray-100); }

.concept__title {
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--gray-800);
	margin: 0 0 2.5rem;
}
.concept__title strong { font-weight: 700; }

.concept__body { max-width: 42rem; }
.concept__body p {
	font-size: 1rem;
	line-height: 2;
	color: var(--gray-700);
	margin: 0 0 1.5rem;
}
.concept__body p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
	.concept__title { font-size: 2.25rem; }
}

/* Concept：文章（左）と写真（右） */
.concept__grid { display: grid; gap: 3rem; align-items: center; }
.concept__photo { margin: 0; }
.concept__photo img { display: block; width: 100%; height: 22rem; object-fit: cover; object-position: center 45%; }

@media (min-width: 768px) {
	.concept__grid { grid-template-columns: 1fr 20rem; gap: 4rem; }
	.concept__photo img { height: 28rem; }
}

/* Concept 見出し：「SNSは、」と「バズるだけでは売れない。」を2行に固定 */
.concept__title strong { display: block; white-space: nowrap; font-size: clamp(1.5rem, 6.4vw, 2.25rem); }