/* =========================================================
   style.css 置き換え版
   - ヘッダー追従 & セーフエリア対応
   - TOP背景をヘッダー裏まで延長（隙間解消）
   - 見出しの折返し改善
   - スマホ安定化（背景fixed解除 ほか）
   ========================================================= */

/* --- 変数 --- */
:root {
  --main-color: #00BB33;
  --text-color: #333;
  --bg-light: #f4f7f6;
  --bg-success-subtle: #f0fff0;
  --bg-white: #FFFFFF;
  --font-family: 'M PLUS Rounded 1c', sans-serif;
  --brown-color: #8D6E63;
  --green-dark: #388E3C;

  --stack-gap: clamp(16px, 3.2vw, 28px);    /* セクション内の基本行間 */
  --cta-gap:   clamp(32px, 5vw, 56px);      /* CTAの上余白（見出しやリストから離す） */
  --cta-gap-b: clamp(28px, 4.5vw, 48px);    /* CTAの下余白（次要素/セクションと離す） */
  --section-gap: clamp(48px, 7vw, 88px);    /* セクション間の外側余白 */
	
  /* ヘッダー高さ（実機に合わせ±調整可） */
  --header-h: 0px;

  /* セーフエリアを含めた上端シフト量（@supports不要） */
  --safe-inset-top: env(safe-area-inset-top, 0px);
  --hero-shift: calc(var(--header-h) + var(--safe-inset-top));
}

/* --- ベース --- */
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-family);
  color: var(--text-color);
  line-height: 1.8;
  background: #fff;
  overflow-x: hidden;

  /* 背景（必要な場合のみ） */
  background-image: url("../image/topback005.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #f8f8f8;
}

img { max-width: 100%; height: auto; vertical-align: middle; }
a   { text-decoration: none; color: inherit; }

/* ページ上端は常にヘッダー分の余白を確保（重なり防止） */
main { padding-top: calc(var(--header-h) + var(--safe-inset-top)); }

/* --- セクション共通 --- */
main > .content-section:first-child { border-top: none; }

.content-section {
  padding: 80px 5%;
  max-width: 1100px;
  margin: 40px auto;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.bg-light  { background-color: var(--bg-light); }
.bg-light2 { background-color: var(--bg-success-subtle); }
.bg-light3 { background-color: var(--bg-white); }

/* 見出し（折返し改善） */
.section-title{
  font-size: clamp(1.4rem, 5.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 20px;
  color: var(--main-color);

  position: relative;
  display: inline-block;
  padding: 6px 18px;
  background-color: rgba(0,187,51,0.1);
  border-radius: 10px;

  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* マーカー風（使用時のみ） */
.pen_line span{
  background: linear-gradient(transparent 50%, #fff);
  padding: 0 .1em;
}

/* --- ヘッダー（追従） --- */
#header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding-top: var(--safe-inset-top);
  background-color: transparent;               /* デフォは透明 */
  transition: background-color .3s ease, box-shadow .3s ease;
}
#header.sticky{
  background-color: rgba(255,255,255,.95);     /* スクロール後は薄白 */
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.header-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px max(5%, env(safe-area-inset-right))
           15px max(5%, env(safe-area-inset-left));
  max-width: 1100px;
  margin: 0 auto;
}
#header .logo img{ height: 80px; transition: height .3s ease; }
#header.sticky .logo img{ height: 50px; }

#header .contact-button{
  background-color: var(--main-color);
  color: #fff;
  padding: 10px 25px;
  border-radius: 50px;
  font-weight: bold;
  transition: opacity .3s;
}
#header:not(.sticky) .contact-button{ opacity: 0; pointer-events: none; }
#header.sticky .contact-button{ opacity: 1; }

/* --- TOP（ヒーロー） --- */
.hero{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;             /* 上の余白はmainに任せる */
  box-sizing: border-box;
  min-height: 100vh;
  overflow: hidden;
}

/* 背景スライドと暗幕をヘッダー裏まで延長（隙間解消） */
.hero-bg-slideshow{ position: absolute; inset: 0; z-index: 0; }
.hero::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1;
}
/* 上書き（@supports不要。重複topエラー回避） */
.hero-bg-slideshow,
.hero::after{
  top: calc(-1 * var(--hero-shift));
  height: calc(100% + var(--hero-shift));
}

.slide-item{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.5s ease-in-out;
}
.slide-item.is-visible{ opacity: 1; }

/* ヒーロー内 */
.hero-main-content, .stats-container{
  position: relative; z-index: 2;
  width: 100%; max-width: 1000px;
}
.hero-main-content{
  display: flex; align-items: center; justify-content: center;
  gap: 2%; margin-bottom: 40px;
}
.hero-text{ flex-basis: 55%; text-align: left; }
.hero-text h1{
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800; color: #fff; line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
  margin: 0 0 15px;
}
.hero-text p{
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  font-weight: 700; color: var(--main-color);
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* キャラクター */
.hero-character {
  flex-basis: 50%;
  position: relative;
  width: 100%;
  max-width: 450px;
  aspect-ratio: 1/1;
  z-index: 1;                 /* ← カウンターより下に戻す */
  pointer-events: none;       /* ← 誤クリック防止 */
}

/* すべてのimgを絶対配置 */
.hero-character > img {
  position: absolute;
  display: block;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* キャラクター本体（ゆっくり浮遊） */
.character-base {
  width: 60%;
  bottom: 5%;
  right: 5%;
  z-index: 20;
  animation-name: floatBase;
  animation-duration: 8s;
}

/* 各吹き出し：独立した動き（別々の周期） */
.bubble { z-index: 10; }

.bubble-1 {
  width: 50%;
  top: -4%;
  right: 8%;
  animation-name: float1;
  animation-duration: 7s;
}

.bubble-2 {
  width: 45%;
  top: 18%;
  left: 0%;
  animation-name: float2;
  animation-duration: 8.5s;
}

.bubble-3 {
  width: 50%;
  bottom: -3%;
  left: -10%;
  animation-name: float3;
  animation-duration: 6.5s;
}

/* ==== 個別アニメーション ==== */
@keyframes floatBase {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}

@keyframes float1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40%      { transform: translateY(-20px) rotate(-1deg); }
  70%      { transform: translateY(-10px) rotate(1deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35%      { transform: translateY(-25px) rotate(1.5deg); }
  60%      { transform: translateY(-8px) rotate(-1deg); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-22px) rotate(1deg); }
  60%      { transform: translateY(-8px) rotate(-1deg); }
}


/* 実績数字 */
.stats-container{
  display: flex; justify-content: center; gap: 20px;
  width: 100%; max-width: 900px; z-index: 3; flex-wrap: wrap;
}
.stat-item{
  background: #fff; border-radius: 20px; padding: 15px 20px;
  color: var(--text-color); flex: 1; text-align: center;
  border: 3px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,.1);
}
.stat-number{ font-size: 2.5rem; font-weight: 800; color: var(--main-color); line-height: 1.2; }
.stat-unit  { font-size: 1.2rem; margin-left: 5px; }

/* --- スライダー共通（Swiper） --- */
.swiper{ padding: 10px 40px 50px; position: relative; }
.swiper-slide{
  height: auto; display: flex; justify-content: center; align-items: stretch;
  flex-shrink: 0; width: auto;
}
.swiper-button-next, .swiper-button-prev{ color: var(--main-color); z-index: 5; }
.swiper-button-prev{ left: 5px; }
.swiper-button-next{ right: 5px; }

/* インフルエンサーの声（X埋め込みカード） */
.testimonial-card{
  background: #fff; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,.08);
  padding: 15px; width: auto; display: flex; flex-direction: column;
  align-items: center; max-width: 95%; box-sizing: border-box; height: auto;
}
.testimonial-card .twitter-tweet{ margin: 0 !important; }

.twitter-embed-wrapper{
  width: 100%; display: flex; justify-content: center; align-items: flex-start;
  pointer-events: none; height: 100%;
}
.twitter-embed-wrapper .twitter-tweet{
  max-width: 550px !important; width: 100% !important; margin: 0 !important;
  transform-origin: top left;
}

/* 過去の案件（YouTubeなど） */
.project-card{
  background: #fff; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,.08);
  overflow: hidden; width: 95%; display: flex; flex-direction: column;
}
.project-title{ padding: 20px; font-size: 1.1rem; margin: 0; flex-grow: 1; }

/* FAQ */
.faq-container{ max-width: 800px; margin: 0 auto; text-align: left; }
.faq-item{ border-bottom: 1px solid #ddd; }
.faq-question{
  padding: 20px 0; font-weight: bold; cursor: pointer; position: relative;
  padding-right: 40px; display: flex;
}
.faq-question span{ margin-right: 10px; color: var(--main-color); }
.faq-question::after{
  content: '+'; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); font-size: 1.5rem; color: #888; transition: transform .3s ease;
}
.faq-question.active::after{ content: '-'; }
.faq-answer{
  max-height: 0; overflow: hidden; transition: max-height .4s ease-out;
  color: #555; display: flex; padding: 0 20px;
}
.faq-answer span{ margin-right: 10px; color: var(--main-color); }
.faq-answer.open{ max-height: 500px; padding: 0 20px 20px; }








/* 追従LINEボタン */
.sticky-line-button{
  position: fixed; bottom: 20px; right: 20px;
  background-color: #06C755; color: #fff;
  width: 70px; height: 70px; border-radius: 50%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  box-shadow: 0 5px 15px rgba(0,0,0,.2); z-index: 900; font-size: 1.4rem; text-align: center;
}
.sticky-line-button span{ font-size: .6rem; font-weight: bold; margin-top: 3px; }

/* フッター */
#footer{ background-color: #2c2c2c; color: #ccc; padding: 60px 5%; font-size: .9rem; }
.footer-container{
  max-width: 1100px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
}
.footer-left{ text-align: left; }
.footer-right{ text-align: right; }
#footer .logo img{ height: 60px; margin-bottom: 20px; }
.footer-info p{ margin: 5px 0; line-height: 1.6; }
.copyright{ margin-top: 40px; text-align: center; font-size: .8rem; color: #777; }
.copyright a{ color: #ccc; text-decoration: none; }

/* スライダー内iframeはスワイプ優先（必要時はJSで解除） */
.swiper-slide iframe{ pointer-events: none; }

/* セクションCTAのレイアウト（下スライダー直下などで使用） */
.section-cta{
  display: flex;
  justify-content: center;
  margin: var(--cta-gap) auto var(--cta-gap-b);
}

/* 当初デザイン：大きめピル型のLINEボタン */
.line-button-large {
  --line-green: #06C755;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 18px 40px;                 /* 大きめ */
  border-radius: 9999px;              /* ピル形を強制 */
  background: var(--line-green);
  color: #fff;
  font-weight: 800;
  font-size: clamp(14px, 2.4vw, 18px);
  line-height: 1;
  text-decoration: none;
  border: 0;
  outline: none;
  /* ふわっとした影（当初の雰囲気） */
  box-shadow: 0 10px 24px rgba(6,199,85,.28);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  white-space: nowrap;
}

/* アイコンサイズを固定 */
.line-button-large .line-icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* ホバー／押下の手触り */
.line-button-large:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 28px rgba(6,199,85,.34);
}
.line-button-large:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(6,199,85,.25);
}

/* 万一、他クラスに上書きされる場合の保険（必要時のみ有効化）
.section-cta .line-button-large {
  border-radius: 9999px !important;
  padding: 18px 40px !important;
}
*/

/* --- 他社との違い --- */
.difference-image {
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}
.difference-content p {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.section-employee{
	
	
}


/* =========================================================
   レスポンシブ
   ========================================================= */

/* タブレット以下：background-attachment の負荷回避 */
@media (max-width: 1024px){
  body{ background-attachment: scroll; }
}

/* スマホ */
@media (max-width: 768px){
  .header-inner{ padding: 12px 5%; }
	
  #header .logo img{ height: 64px; }
  #header.sticky .logo img{ height: 44px; }

  .hero{ padding: 72px 5% 40px; }
  .hero-main-content{ flex-direction: column; gap: 32px; }
  .hero-text{ text-align: center; flex-basis: auto; order: 1; }
  .hero-character{ order: 2; width: 90%; max-width: 400px; }

  .stats-container{ flex-direction: column; gap: 15px; width: 90%; }

  /* スワイパーナビはSPでは非表示（スワイプ操作に任せる） */
  .swiper-button-next, .swiper-button-prev{ display: none; }
}

/* 極小端末 */
@media (max-width: 389px){
  #header .logo img{ height: 58px; }
  #header.sticky .logo img{ height: 40px; }
  .section-title{ letter-spacing: .02em; }
}

/* ===== Staff Spotlight (scoped to #staff-spotlight) ===== */
#staff-spotlight{
  --ink:#0f172a; --muted:#64748b;
  --card:#ffffff; --edge:#e8edf0; --shadow:0 14px 34px rgba(0,0,0,.08);
  --radius:20px; --av-staff:120px; --av-ceo:180px;
}
#staff-spotlight .ss-container{max-width:920px;margin:0 auto}
#staff-spotlight .section-title{
  background: rgba(0,187,51,.10); color:#00BB33; border-radius:12px;
}
#staff-spotlight .bg-light2 {
  border-radius: 0;
  padding-left: 20px;   /* ←ここで左に余白を追加 */
  padding-top: 8px;
  padding-bottom: 8px;
}

/* 共通カード（重なり防止の2カラムグリッド） */
#staff-spotlight .ss-card{
  position:relative;
  display:grid; grid-template-columns: auto 1fr;
  align-items:flex-start; gap:18px;
  margin:22px 0; padding:22px;
  background:var(--card); border:1px solid var(--edge);
  border-radius:var(--radius); box-shadow:var(--shadow);
}

/* アバター：社長大きめ、社員標準。正円＆影 */
#staff-spotlight .ss-avatar {
  width: var(--av-staff);
  aspect-ratio: 1/1;
  border-radius: 16px;          /* ← 四角の角丸に変更 */
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}


#staff-spotlight .ss-card.is-ceo .ss-avatar{ width:var(--av-ceo); }
#staff-spotlight .ss-avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* 本文：社長だけ名前見出しを表示 */
#staff-spotlight .ss-body{ text-align:left }
#staff-spotlight .ss-name{
  margin:4px 0 8px; font-weight:800; color:var(--ink);
  font-size: clamp(18px,2.8vw,22px);
}
#staff-spotlight .ss-text{
  margin:0; color:#334155; line-height:1.9; font-size:clamp(14px,1.7vw,16px);
}

/* カード間の一定余白 */
#staff-spotlight .ss-card + .ss-card{ margin-top:24px }

/* —— SP レスポンシブ：縦1列 & 中央揃え。重なり完全回避 —— */
@media (max-width: 540px){
  #staff-spotlight .ss-card{
    grid-template-columns: 1fr;      /* 写真→本文の縦並び */
    justify-items: center;           /* 画像・テキスト中央寄せ */
    align-items: start;
    gap: 10px; padding: 16px;
    text-align: center;              /* 本文中央 */
    border-radius: 16px;
  }
  #staff-spotlight .ss-body{ text-align: center; }
  #staff-spotlight .ss-avatar{ width: 74px; justify-self: center; }
  #staff-spotlight .ss-card.is-ceo .ss-avatar{ width: 92px; } /* 社長は少し大きめ維持 */
  #staff-spotlight .ss-name{ display:block; margin:4px 0 6px; }
}

/* さらに狭い端末の微調整（任意） */
@media (max-width: 390px){
  #staff-spotlight .ss-avatar{ width: 68px; }
  #staff-spotlight .ss-card.is-ceo .ss-avatar{ width: 86px; }
  #staff-spotlight .ss-card{ padding: 14px; }
}

/* フローティングLINEボタンが重なる場合の余白（任意） */
@media (max-width: 540px){
  #staff-spotlight{ padding-bottom: 84px; }
}

/* === 社員紹介と店舗の様子のバランス調整 === */

/* カード間余白を少し広げて呼吸感を統一 */
#staff-spotlight .ss-card,
#stores-gallery .sg-card {
  margin: 26px 0;
  box-shadow: 0 12px 28px rgba(0,0,0,0.06); /* 同じ影 */
  border-radius: 18px;                      /* 同じ角丸 */
}

/* セクションの角丸・余白感を揃える */
#staff-spotlight.content-section,
#stores-gallery.content-section {
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  margin: 40px auto;
  padding: 70px 5%;
}

/* 店舗の見出しの緑マーカー角を削除して丸みを統一 */
#stores-gallery .section-title {
  background: rgba(0,187,51,.10);
  color: #00BB33;
  border-radius: 10px; /* 強い丸ではなく控えめ */
}

/* 店舗グリッドと社員紹介との間を整える */
#stores-gallery {
  margin-top: -20px; /* 社員紹介との隙間を詰める */
}


/* ===== Stores Gallery (scoped) ===== */
#stores-gallery{
  --chip:#00BB33;            /* ブランドの緑 */
  --edge:#e8edf0;
  --shadow:0 12px 28px rgba(0,0,0,.08);
}
#stores-gallery .sg-container{max-width:1100px;margin:0 auto}
#stores-gallery .section-title{
  /* 既存のマーカー風見出しに合わせる（bg-light2上でも読める濃さ） */
  background: rgba(0,187,51,.10);
  color:#00BB33;
  border-radius:12px;
}


/* グリッド */
#stores-gallery .sg-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:24px;
  margin-top:16px;
}

/* カード */
#stores-gallery .sg-card{
  position:relative;
  background:#fff;
  border:1px solid var(--edge);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;                    /* 角丸に沿わせる */
  display:flex;
  flex-direction:column;
}

/* 店舗バッジ（フローティングラベル） */
#stores-gallery .sg-badge{
  position:absolute;
  left:16px; top:16px;
  z-index:2;
  background:#eafff0;
  color:#00BB33;
  border:2px solid #00BB33;
  border-radius:12px;
  font-weight:900;
  letter-spacing:.02em;
  padding:6px 12px;
  box-shadow:0 6px 16px rgba(0,187,51,.15);
}

/* メディア: 画像の比率を統一 */
#stores-gallery .sg-media{
  margin:0;
  aspect-ratio: 16 / 9;               /* 写真の高さを揃える */
  overflow:hidden;
  background:#f1f5f9;
}
#stores-gallery .sg-media img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transform:scale(1.02);
  transition: transform .4s ease;
}
#stores-gallery .sg-card:hover .sg-media img{
  transform:scale(1.06);
}

/* キャプション */
#stores-gallery .sg-caption{
  margin:0;
  padding:14px 16px 16px;
  color:#374151;
  line-height:1.8;
  font-size:clamp(14px,1.6vw,15px);
}

/* レスポンシブ */
@media (max-width: 820px){
  #stores-gallery .sg-grid{ grid-template-columns:1fr; gap:18px; }
}