/* ===== THEME ===== */
:root {
  --brand:#145a92;
  --brand-1:#1b6ca8;
  --brand-2:#0f4a7a;
  --ink:#f6f9ff;
  --muted:#cfe0f5;
  --accent1:#2b6fb5;
  --accent2:#4aa3e8;

  --sec-top-start:#2272b3;   --sec-top-end:#145a92;
  --sec-prob-start:#e9f2fb;  --sec-prob-end:#e9f2fb;
  --sec-svc-start:#145a92;   --sec-svc-end:#0f4a7a;
  --sec-cases-start:#e9f2fb; --sec-cases-end:#e9f2fb;
  --sec-faq-start:#e9f2fb;   --sec-faq-end:#e9f2fb;
  --sec-company-start:#0e3f67;--sec-company-end:#0b3253;
  --sec-ct-start:#e9f2fb;    --sec-ct-end:#e9f2fb;

  --panel-dark: rgba(255,255,255,.10);
  --panel-light: #fff;
  --stroke: rgba(255,255,255,.16);
  --stroke-dark: rgba(0,0,0,.08);
  --shadow: 0 10px 24px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.18);
  --radius: 10px;
  --grad: linear-gradient(120deg,var(--accent1),var(--accent2));
}

*{box-sizing:border-box}
body {
  margin:0;
  font-family:'Inter','Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,Meiryo,sans-serif;
  background:var(--brand);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0 0 .5em;line-height:1.2}
p{margin:.5em 0 1em}
section{padding:30px 20px;position:relative}
.container{max-width:1200px;margin:0 auto}

/* ===== 背景グラデ ===== */
.sec-top{background:linear-gradient(180deg,var(--sec-top-start),var(--sec-top-end))}
.sec-problem{background:linear-gradient(180deg,var(--sec-prob-start),var(--sec-prob-end))}
.sec-services{background:linear-gradient(180deg,var(--sec-svc-start),var(--sec-svc-end))}
.sec-cases{background:linear-gradient(180deg,var(--sec-cases-start),var(--sec-cases-end))}
.sec-faq{background:linear-gradient(180deg,var(--sec-faq-start),var(--sec-faq-end)); color:#0e2438}
.sec-company{background:linear-gradient(180deg,var(--sec-company-start),var(--sec-company-end))}
.sec-contact{background:linear-gradient(180deg,var(--sec-ct-start),var(--sec-ct-end))}

/* 淡色背景の文字色 */
.sec-problem, .sec-cases, .sec-faq,.sec-contact { color:#0e2438; }

/* ===== TOP ===== */
#top{padding:38px 20px}
.hero {
  display: grid;
  grid-template-columns: minmax(480px,1.2fr) minmax(480px,1fr);
  align-items: center;
}
.hero-right {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-main {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.hero-main img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: opacity 0.8s ease; /* フェード */
}

/* サブ画像：右端に縦並び */
.hero-sub {
  position: absolute;
  bottom: 0%;
  display: flex;
  gap: 4px;
  padding: 8px;
  border-radius: 12px;
}

.hero-sub img {
  width: 64px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0.5;
  transition: opacity 0.3s, transform 0.3s;
  cursor: default; /* クリック不可（触れない仕様） */
}

.hero-sub img.active {
  opacity: 0.95;
  transform: scale(1.1);
  border: 2px solid #fff;
}


.title{font-size:clamp(32px,4.2vw,54px);font-weight:900;margin-bottom:6px}
.title .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:#fff700}
.lead{font-size:1.15rem;color:var(--muted);max-width:54ch}
.cta{display:flex;gap:10px;margin-top:12px;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:18px 23px;border-radius:999px;
  background:#fff;color:#2b6fb5;border:2px solid #2b6fb5;
  box-shadow:var(--shadow);cursor:pointer;
  font-size:1.5rem;font-weight:bold;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform: scale(1.03) translateY(-3px); box-shadow: var(--shadow), 0 0 0 2px #fff; }

/* ヒーローフレーム */
.frame{
  border-radius:var(--radius); overflow:hidden;
  background:rgba(255,255,255,.10);  box-shadow:var(--shadow);
  display:grid; gap:6px; padding:6px; margin-left:auto; place-items:center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.rail{display:flex;gap:8px;overflow:hidden}
.rail img{width:140px;height:180px;object-fit:cover;border-radius:8px}
.rail.is-fwd{animation: railF var(--dur, 26s) linear infinite;}
.rail.is-rev{animation: railR var(--dur, 28s) linear infinite;}
@keyframes railF { to { transform: translateX(-50%); } }
@keyframes railR { to { transform: translateX( 50%); } }


/* SPは縦並び（画像を上、テキストを下） */
/* スマホ時 */
@media (max-width: 960px) {
.hero {
  display: flex;
  flex-direction: column;
  align-items: center; /* 左右真ん中に */
  gap: 16px;
}
.hero > div:nth-child(1) {
  order: 2; /* テキストを下に */
}
.hero > div:nth-child(2) {
  order: 1; /* 画像を上に */
}
.hero-right {
  margin: 0 auto;
  max-width: 100%;
}
.hero-main {
  max-width: 100%;
}
  /* ヒーローフレーム */
  .frame{

     margin: 0 auto; place-items:center; /* 左右真ん中に */

  }
  

.cta{margin-left:00%;}
}


/* ===== 悩みカード ===== */
.problems{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.prob {
  background:#fff;
  border:2px solid rgba(0,0,0,0.15);
  border-radius:var(--radius);
  padding:16px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px; align-items:flex-start;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  color:#0e2438;
}
.prob .ico {
  width:70px;height:70px;
  border-radius:8px;
  display:grid;place-items:center;
  background:#f1f4f9;
  border:1px solid rgba(0,0,0,0.1);
  font-weight:800;
}
.prob p { margin-top:8px; margin-bottom:0; }
@media(max-width:960px){.problems{grid-template-columns:1fr}}

/* 橋渡し */
.bridge{margin-top:14px;text-align:center}
.bridge .arrow{display:inline-block;color:var(--accent2);animation:arrowBounce 1.2s infinite;}
.bridge .arrow svg{width:48px;height:48px;filter:drop-shadow(0 0 6px rgba(0,0,0,0.4));}
@keyframes arrowBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}
.bridge h3{font-size:clamp(20px,3vw,28px);font-weight:800;line-height:1.2;}
.bridge .uline{background:var(--grad);-webkit-background-clip:text;color:transparent;position:relative}
.bridge .uline::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--grad)}

/* ===== 提供内容 ===== */
.svc {
  display:grid;grid-template-columns:1fr 1fr;
  gap:20px;align-items:start;
  padding:18px;border-radius:var(--radius);
  background:var(--panel-dark);border:1px solid var(--stroke);box-shadow:var(--shadow);
}
.svc + .svc{margin-top:16px}
.svc .media{background:rgba(255,255,255,.10);border:1px solid var(--stroke);border-radius:var(--radius);overflow:hidden}
.svc .media img{width:100%;max-height:300px;object-fit:cover}
.chip {
  display:inline-block;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,0.18);
  font-size:0.95rem;font-weight:600;
  margin-right:8px;margin-bottom:4px;
}
.svc .text h3 {
  margin-top:2px;margin-bottom:16px;
  font-size:1.7rem;font-weight:800;
}
.svc .text p {
  font-size:1.05rem;line-height:1.7;
  margin:0;
}
.svc.alt .media{order:2}

/* SPでは縦並びに変更 */
@media (max-width: 960px) {
.svc {
  display: block;  /* gridを解除して縦積みに */
  padding: 14px;
}
.svc .media {
  margin-bottom: 3px;
}
.svc.alt .media {
  order: unset; /* orderを無効化（上下自然に積む） */
}
.chip {
  padding:2px 6px;
  font-size: 0.5rem
}
.svc .text h3 {
  margin-top:0;margin-bottom:10px;
  font-size:1.2rem;font-weight:800;
}
.svc .text p {
  font-size:0.9rem;line-height:1.1;font-weight:400;
}
}

/* ===== 事例カルーセル ===== */
.swiper {
  position:relative;
  background:rgb(187 204 219 / 76%);
  border-radius:var(--radius);
  padding:16px;
}
.viewport{overflow:hidden}
.track{display:flex;gap:16px;will-change:transform}
.track,.slide{user-select:none;-webkit-user-drag:none}
.track.dragging{cursor:grabbing;}
.slide {
  width:calc(33.333% - 10px);flex:0 0 auto;
  background:#fff;
  border:4px solid rgba(0,0,0,0.25);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  color:#0e2438;
  display:flex;flex-direction:column;
}
.slide .thumb{position:relative;aspect-ratio:16/9;background:#f4f7fb;}
.slide .thumb img{width:100%;height:100%;object-fit:cover}
.slide .chips{position:absolute;top:8px;left:8px;display:flex;gap:6px;flex-wrap:wrap}
.slide .chips .chip{background:rgba(0,0,0,0.7);color:#fff;font-size:0.75rem;padding:4px 8px;border-radius:999px}
.slide .body{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:14px;text-align:center}
.slide .body h3{font-size:1.2rem;font-weight:700;margin-bottom:8px;}
.slide .body p{flex-grow:1;}
.slide .actions{margin-top:12px;display:flex;justify-content:center}
.slide .actions .case-btn{
  display:inline-block;
  padding:10px 18px;border-radius:999px;
  font-size:0.9rem;font-weight:600;
  background:var(--accent1);color:#fff;border:none;
  transition:background .3s,transform .2s;
}
.slide .actions .case-btn:hover{background:var(--accent2);transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,0.15);}
.nav {
  position: absolute;
  top: 50%;
  left: -50px;   /* ← 枠の外にずらす */
  right: -50px;  /* ← 反対側も */
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  transform: translateY(-50%);
}



.nav button {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background .2s;
}
.nav button:hover {
  background: rgba(0,0,0,0.85);
}
.dots{display:flex;gap:6px;justify-content:center;margin-top:14px;position:relative;z-index:2;}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,0.35);}
.dot.active{background:var(--accent1);}
/* SPでは枠内に配置 */
@media (max-width: 960px) {
.slide{width:100%}

.nav {
  left: 15px;   /* ← 内側へ */
  right: 15px;  /* ← 内側へ */
}
.bridge h3{font-size:clamp(18px,3vw,28px);}
.slide .body{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:5px;text-align:center}
.slide .body h3{font-size:1.1rem;font-weight:700;margin-bottom:5px;margin-top: 2px}
.slide .body p{margin-bottom: 0;font-size: 1.0rem}
.slide .actions{margin-top:1px;}
}

/* ===== 強み ===== */
.strengths .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PCでもSPでも2列 */
  gap: 16px;
}

.strength {
  background: var(--panel-dark);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 16px;
}

.strength .head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.strength .ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 2px solid var(--accent1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.strength .ico img {
  width: 90%;
  height: auto;
}

@media(max-width:960px){

.strength{padding:4px}
.strength h3{font-size: 1.0rem;}
.strength p{margin: 0;font-size: 0.7rem;}
.strengths .grid{gap: 4px;}
.strength .head{margin-bottom: 2px;gap: 4px;}

}
/* ===== FAQ ===== */
.faq h2{color:#0e2438}
.faq details{background:#fff;border:1px solid var(--stroke-dark);border-radius:var(--radius);overflow:hidden;color:#0e2438}
.faq details+details{margin-top:12px}
.faq summary{cursor:pointer;padding:12px 14px;font-weight:800;border-bottom:1px dashed rgba(0,0,0,.25)}
.faq .answer{padding:10px 14px 14px;color:#3a4b62}

/* ===== 会社紹介 ===== */
.company-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.company-title .logo-inline img {
  height: 32px;
  width: auto;
  vertical-align: middle;
}

.company-title .ext-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent2);
  text-decoration: none;
}
.company-title .ext-link:hover {
  text-decoration: underline;
}

/* 会社紹介パネルを中央に寄せて横幅を抑える */
.company-info {
  max-width: 880px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 24px 32px;
  box-shadow: var(--shadow);
}

.company-head {
  display: flex;
  align-items: center;   /* 上下中央 */
  gap: 14px;             /* ロゴと文字の間隔 */
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.company-head .logo {
  height: 2em;  /* ← h2に合わせて大きめ */
  width: auto;
  vertical-align: middle;
}

.company-head h2 {
  font-size: 2rem;   /* ← 大きめに調整 */
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
}

.company-head .ext-link,
.company-info a {   /* ← メディアリンクも同じ色に */
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent2);
  text-decoration: none;
  margin-left: 6px;
}
.company-head .ext-link:hover,
.company-info a:hover {
  text-decoration: underline;
}



.company-info .subtitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
  line-height: 1.6;
}
@media (max-width: 960px) {
  .company-info .subtitle {
    font-size: 1rem;
    line-height: 1.2;
  }
  .company-head{
    gap: 0;
    margin-bottom: 20px;
  }
}
/* ===== CONTACT ===== */
.row-1{grid-column:1/-1}
input,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--stroke);background:rgba(255,255,255,.10);color:var(--ink)}
input:focus,textarea:focus{outline:none;box-shadow:0 0 0 2px color-mix(in oklab,var(--accent2),white 22%)}
.submit{grid-column:1/-1}
footer{padding:28px 20px;text-align:center;color:#b7c6df;background:#0b3253}

  /* 問い合わせフォーム */
/* フォーム全体の枠 */

form {
max-width:760px;
margin:0 auto;
display:block;   /* ← gridを解除 */
}

.form-panel {
background: #fff;  /* 真っ白にしてgridを隠す */
border: 2px solid rgba(0,0,0,0.15);
border-radius: var(--radius);
padding: 28px 32px;
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
margin: 30px auto 0;
max-width: 880px;   /* ← 横幅を制限して中央寄せ */
position: relative;
z-index: 2;        /* gridより前に */
}

/* 項目 */
#contact dl {
display: grid;
grid-template-columns: 200px 1fr; /* 左ラベル・右入力欄 */
gap: 14px 20px;
margin-bottom: 20px;
}

#contact dt {
font-weight: 700;
font-size: 1rem;
align-self: center;
background-color: rgb(255, 255, 177); /* 薄い黄色の背景色 */

}
#contact dt span {
display: block;
font-size: 0.75rem;
color: #666;
margin-top: 2px;
}

/* 必須マークだけ専用スタイル */
#contact dt .req {
display: inline-block;
background: #e63946;
color: #fff;              /* ← 白文字に */
font-size: 0.75rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
margin-left: 6px;
vertical-align: middle;
}
#contact dd input,
#contact dd textarea {
width: 100%;
padding: 10px 12px;
border-radius: 8px;
border: 3px solid var(--stroke-dark);
background: #f3f3f3;  
color: #333;
font-size: 1rem;
font-family: inherit;   /* ← 追加：bodyと同じ書体にする */
}
#contact dd textarea {
resize: vertical;
min-height: 120px;
}
/* スマホ: ラベルの下に入力欄を配置 */
@media (max-width: 768px) {
#contact dl {
  display: block; /* 縦並び */
}
#contact dt {
  text-align: center;
  margin-bottom: 6px;
}
#contact dd {
  margin-bottom: 18px;
  text-align: center;
}
#contact dd input,
#contact dd textarea {
  width: 100%;       /* 画面いっぱい */
  max-width: 100%;   /* 制限なし */
  margin: 0;         /* 中央寄せ解除 */
  display: block;
}
dd{
  margin-inline-start: 0;
}
.form-panel {

  padding: 6px 6px 40px 6px;
  margin-top: 0;

}


}



/* 送信ボタン */
.form-actions {
margin-top: 30px;
text-align: center;  /* 中央に配置 */
}

.form-actions button {
display: inline-block;
width: 100%;   /* ← 全幅に広げたいならこれ */
max-width: 300px; /* ← 幅を制限したい場合 */
background: var(--accent1);
color: #fff;
font-weight: 700;
font-size: 1.1rem;
padding: 14px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: background 0.25s, transform 0.2s;
}

.form-actions button:hover {
background: var(--accent2);
transform: translateY(-2px);
}


/* 確認モーダル */
.modal {
display: none; /* 最初は非表示 */
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
}

.modal-content {
background: #fff;
color: #333;
padding: 24px;
border-radius: 10px;
width: 90%;
max-width: 500px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-content h3 {
margin-top: 0;
font-size: 1.3rem;
font-weight: 700;
border-bottom: 2px solid #ddd;
padding-bottom: 8px;
margin-bottom: 14px;
}

#confirmDetails {
font-size: 0.95rem;
line-height: 1.6;
white-space: pre-line;
margin-bottom: 20px;
}

.modal-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
}

.modal-actions .btn {
padding: 10px 18px;
border-radius: 999px;
border: none;
cursor: pointer;
font-weight: 600;
}

.modal-actions .btn.cancel {
background: #eee;
color: #333;
}

.modal-actions .btn:not(.cancel) {
background: var(--accent1);
color: #fff;
}
.modal-actions .btn:not(.cancel):hover {
background: var(--accent2);
}

#confirmModal {
display: none;               /* 最初は隠す */
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
justify-content: center;
align-items: center;
z-index: 2000;
}

.btn-hero {
display: inline-block;
padding: 18px 40px;
border-radius: 999px;
font-size: 1.3rem;
font-weight: 700;
text-align: center;
color: #fff;
background: #e63946; /* 赤に変更 */
border: 2px solid #e63946; /* 赤に変更 */

box-shadow: 0 6px 18px rgba(0,0,0,0.25);
position: relative;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease;
}

/* ホバーで浮き上がり */
.btn-hero:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

/* 内側に光るラインが走る */
.btn-hero::before {
content: "";
position: absolute;
top: 0; left: -50%;
width: 200%;
height: 100%;

transform: skewX(-20deg);
}

/* アニメーションで光がスライド */
.btn-hero:hover::before {
animation: shine 1.2s ease forwards;
}

@keyframes shine {
from { left: -50%; }
to { left: 120%; }
}

/* フローティングCTA */
.floating-cta {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1000;

display: flex;
justify-content: center;
align-items: center;
text-align: center; /* ← 文字を中央寄せ */

width: 140px;
height: 140px;

background: #e63946;
color: #fff;
font-size: 1rem;
font-weight: 700;
border-radius: 50%; /* 丸 */
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
cursor: pointer;
text-decoration: none;

animation: pulseMove 3s ease-in-out infinite;
}

.bridge-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* 左右の余白 */
}

.bridge-deco {
  height: auto;
}

.bridge-content {
  text-align: center;
  max-width: 640px;
}

/* スマホ時はデコ非表示 */
@media (max-width: 768px) {
  .bridge-deco {
    display: none;
  }
  .btn-hero {

    padding: 6px 20px;

    }

}

/* モーダル全体 */
.case-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 3000;
  justify-content: center;
  align-items: center;
}

/* コンテンツ枠 */
.case-modal-content {
  position: relative;
  width: 90%;
  max-width: 1000px;
  height: 80%;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: popupFade 0.3s ease;
}

@keyframes popupFade {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* iframe */
.case-modal-content iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 閉じるボタン */
.case-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 2rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}
.case-close:hover {
  color: #ff6b6b;
}






/* === モバイル時（SP）サイズ調整 === */
@media (max-width: 768px) {
.floating-cta {
  width: 90px;   /* ← 小さめ */
  height: 90px;
  font-size: 0.8rem; /* 文字も少し縮小 */
  padding: 0 8px;    /* 内側余白を調整 */
  line-height: 1.2;  /* 複数行でも中央揃え */
}
}
/* 軽い動き（ゆらぎアニメーション） */
@keyframes pulseMove {
0%, 100% {
  transform: translateY(0) scale(1);
}
50% {
  transform: translateY(-4px) scale(1.05);
}
}

.floating-cta:hover {
background: #d62828;
transform: scale(1.08);
box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}


/* ===== Reveal ===== */
.reveal{opacity:0;transform:none;transition:opacity .6s ease;}
.reveal.is-visible{opacity:1;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;}
}

/* ===== 背景グリッドパターン ===== */
.sec-problem,.sec-cases,.sec-faq{position:relative;overflow:hidden;}
.sec-problem::before,.sec-cases::before,.sec-faq::before,.sec-contact::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(0, 0, 0, 0.055) 1px,transparent 2px),
                   linear-gradient(180deg,rgba(0, 0, 0, 0.05) 1px,transparent 2px);
  background-size:30px 30px;
  animation:gridMove 30s linear infinite;
  z-index:0;
}
@keyframes gridMove{from{background-position:0 0;}to{background-position:50px 50px;}}
.sec-problem>*,.sec-cases>*,.sec-faq>*{position:relative;z-index:1;}




.svc .actions {
  margin-top: 14px;
}

.svc .actions .svc-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--accent1);
  color: #fff;
  border: none;
  transition: background .3s, transform .2s;
}

.svc .actions .svc-btn:hover {
  background: var(--accent2);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* 背景動画 */
.company-bg {
  position: absolute;
  inset: 0; /* section全体に広げる */
  overflow: hidden;
  z-index: 0; /* パネルの下に */
}

.company-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;   /* 横幅いっぱい */
  height: 56.25vw; /* 16:9比率 → 横基準 */
  min-height: 100%; /* 縦が足りなければはみ出し */
  transform: translate(-50%, -50%);
  pointer-events: none; /* 触れない */
}

/* パネルは前面に */
.company .panel {
  position: relative;
  z-index: 1;
}