/* =========
   keihi.css
   - 経費管理LP固有スタイル
   ========= */

.section-alt {
  background: linear-gradient(180deg, rgba(31, 111, 255, .05), rgba(45, 212, 255, .03) 55%, transparent);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Background layers */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 18% 22%, rgba(31, 111, 255, .16), transparent 60%),
    radial-gradient(900px 520px at 78% 30%, rgba(45, 212, 255, .14), transparent 62%),
    radial-gradient(900px 520px at 40% 88%, rgba(14, 165, 233, .10), transparent 60%),
    linear-gradient(180deg, rgba(11, 18, 32, .02), transparent 55%);
}

.hero-title {
    margin-top: 14px;
    margin-bottom: 12px;
    font-size: clamp(28px, 4.0vw, 47px);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.gridlines {
  position: absolute;
  inset: -20% -10%;
  opacity: .55;
  background-image:
    linear-gradient(to right, rgba(13, 24, 48, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 24, 48, .06) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: rotate(-10deg);
  filter: blur(.2px);
}

.orb {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .75;
  background: radial-gradient(circle at 30% 30%, rgba(31, 111, 255, .85), rgba(45, 212, 255, .55), transparent 68%);
  box-shadow: 0 40px 120px rgba(31, 111, 255, .18);
}

.orb-1 {
  top: -180px;
  left: -180px;
  transform: rotate(10deg);
}

.orb-2 {
  width: 620px;
  height: 620px;
  top: -220px;
  right: -240px;
  opacity: .62;
  background: radial-gradient(circle at 30% 30%, rgba(45, 212, 255, .78), rgba(31, 111, 255, .45), transparent 68%);
}

.orb-3 {
  width: 420px;
  height: 420px;
  bottom: -200px;
  left: 40%;
  opacity: .45;
  background: radial-gradient(circle at 30% 30%, rgba(14, 165, 233, .70), rgba(45, 212, 255, .30), transparent 70%);
}

/* Layout */
.hero-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: clamp(28px, 4vw, 54px) 0;
  align-items: center;
}

@media (min-width: 980px) {
  .hero-wrap {
    grid-template-columns: 1.05fr .95fr;
    gap: 34px;
    padding: 70px 0;
  }
}

.hero-copy {
  max-width: 640px;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.br-sm {
  display: inline;
}

.br-lg {
  display: none;
}

@media (min-width: 520px) {
  .br-sm {
    display: none;
  }

  .br-lg {
    display: inline;
  }
}

.hero-visual {
  position: relative;
  min-height: 520px;
}

@media (min-width: 980px) {
  .hero-visual {
    min-height: 640px;
  }
}

.hero-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(180deg, transparent, #fff);
  z-index: 1;
}

/* Device mock */
.device-stack {
  position: relative;
  width: min(560px, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-top: 25%;
  transform-origin: center;
}

.device {
  border-radius: var(--radius2);
  border: 1px solid rgba(13, 24, 48, .12);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.device.pc {
  width: 100%;
  transform: rotate(-1.2deg);
}

.device-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(13, 24, 48, .08);
  background: rgba(255, 255, 255, .62);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(13, 24, 48, .14);
}

.device-title {
  margin-left: 10px;
  font-weight: 900;
  color: rgba(11, 18, 32, .80);
  font-size: 13px;
}

.device-body {
  padding: 14px;
}

.mock-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pill {
  border: 1px solid rgba(13, 24, 48, .12);
  background: rgba(31, 111, 255, .06);
  color: rgba(11, 18, 32, .74);
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}

.mock-table {
  border: 1px solid rgba(13, 24, 48, .10);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .70);
}

.mock-table .row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr .8fr 1.2fr;
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(11, 18, 32, .76);
}

.mock-table .row.head {
  background: rgba(11, 18, 32, .03);
  font-weight: 900;
  color: rgba(11, 18, 32, .72);
}

.mock-table .row:not(.head):nth-child(even) {
  background: rgba(31, 111, 255, .03);
}

.mock-chart {
  margin-top: 12px;
}

.chart-card {
  border: 1px solid rgba(13, 24, 48, .10);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  padding: 12px;
}

.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.bars {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  height: 86px;
}

.bar {
  width: 18%;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(31, 111, 255, .85), rgba(45, 212, 255, .55));
  box-shadow: 0 18px 50px rgba(31, 111, 255, .16);
}

.b1 {
  height: 36%;
  opacity: .75;
}

.b2 {
  height: 64%;
  opacity: .9;
}

.b3 {
  height: 52%;
  opacity: .82;
}

.b4 {
  height: 78%;
  opacity: 1;
}

.b5 {
  height: 46%;
  opacity: .8;
}

/* Phone mock */
.device.phone {
  position: absolute;
  right: -8px;
  bottom: -16px;
  width: 220px;
  transform: rotate(2.4deg);
}

.phone-notch {
  width: 86px;
  height: 18px;
  background: rgba(11, 18, 32, .10);
  border-radius: 999px;
  margin: 10px auto 0;
}

.phone-body {
  padding: 14px 14px 18px;
}

.phone-title {
  font-weight: 1000;
  letter-spacing: -.02em;
  margin: 6px 0 12px;
}

.phone-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(13, 24, 48, .10);
  background: rgba(31, 111, 255, .04);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 12px;
}

.phone-field span {
  color: rgba(11, 18, 32, .70);
  font-weight: 800;
}

.phone-field b {
  color: rgba(11, 18, 32, .86);
}

.phone-cta {
  margin-top: 10px;
  text-align: center;
  font-weight: 1000;
  color: #fff;
  border-radius: 14px;
  padding: 11px 12px;
  background: linear-gradient(135deg, rgba(31, 111, 255, 1), rgba(45, 212, 255, 1));
  box-shadow: 0 18px 60px rgba(31, 111, 255, .22);
}

/* Hero note */
.hero-note {
  position: absolute;
  left: 0;
  bottom: -56px;
  width: min(520px, 100%);
  transform: rotate(-.6deg);
}

@media (max-width: 979px) {
  .hero-note {
    position: relative;
    bottom: auto;
    margin-top: 14px;
  }

  .device.phone {
    right: 6px;
    bottom: -10px;
  }
}

/* Callouts & blocks */
.callout {
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(31, 111, 255, .10), rgba(45, 212, 255, .06));
}

.callout-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.split {
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(31, 111, 255, .06));
  display: grid;
  gap: 18px;
}

@media (min-width: 980px) {
  .split {
    grid-template-columns: 1.2fr .8fr;
  }

  .device-stack {
    margin-top: 30％;
  }
}

.mini-list {
  display: grid;
  gap: 12px;
}

.mini-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border: 1px solid rgba(13, 24, 48, .10);
  background: rgba(255, 255, 255, .70);
  border-radius: 18px;
  padding: 12px 14px;
}

.mini-item b {
  font-size: 16px;
}

.mini-item span {
  font-weight: 800;
}

/* Steps */
.steps {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 12px;
}

.step {
  list-style: decimal;
  border: 1px solid rgba(13, 24, 48, .10);
  background: rgba(255, 255, 255, .74);
  border-radius: 18px;
  padding: 14px 14px;
  font-weight: 900;
}

.step span {
  display: block;
  margin-top: 4px;
  font-weight: 800;
}

.cta-wide,
.cta-final {
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(31, 111, 255, .10), rgba(45, 212, 255, .08));
}

/* Articles */
.article-tools input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(13, 24, 48, .14);
  background: rgba(255, 255, 255, .86);
  font-weight: 800;
}

.tool-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Scalable list: grid + virtualization-ish (collapsed height) */
.article-list {
  margin-top: 18px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .article-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .article-list {
    grid-template-columns: repeat(3, 1fr);
  }


}

.article-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(13, 24, 48, .10);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
}

.article-card .meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  font-size: 12px;
  font-weight: 900;
  color: rgba(11, 18, 32, .72);
  border: 1px solid rgba(13, 24, 48, .12);
  background: rgba(11, 18, 32, .02);
  padding: 6px 10px;
  border-radius: 999px;
}

.article-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

.article-card p {
  margin: 0;
  color: rgba(11, 18, 32, .72);
  font-size: 13px;
}

.article-card .go {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 1000;
  color: rgba(31, 111, 255, .95);
}

.article-card:hover {
  transform: translateY(-1px);
  transition: transform .22s var(--ease);
}

/* FAQ details */
details summary {
  cursor: pointer;
  font-weight: 1000;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary:after {
  content: "＋";
  float: right;
  color: rgba(31, 111, 255, .9);
}

details[open] summary:after {
  content: "－";
}

/* Responsive tweaks */
@media (max-width: 420px) {
  .btn {
    width: 100%;
  }

  .hero-cta {
    gap: 10px;
  }
}

/* ===== スマホ最適化：Heroの画像が上に突き抜け/干渉するのを止める ===== */
@media (max-width: 979px) {

  /* 画像側がデカすぎて押し出すので、まずHero右カラムの高さ固定を緩める */
  .hero-visual {
    min-height: auto;
    margin-top: 16px;
  }

  /* 画像全体をスマホに収める（幅を絞る + 余白を過剰に作らない） */
  .device-stack {
    width: min(520px, 100%);
    margin-top: 0;
    /* PC用margin-topをスマホで無効化 */
  }

  /* PC画面：回転があるとスマホで高さを食いやすいので抑える */
  .device.pc {
    transform: none;
  }

  /* PC画像：高さを上限で縛って“収める” */
  .device.pc img {
    max-height: 46vh;
    object-fit: contain;
  }

  /* スマホ画面：重ねは維持しつつ小さく＆浅く */
  .device.phone {
    width: 170px;
    right: 6px;
    bottom: -8px;
    transform: rotate(1.5deg);
  }
}

/* 極小端末は「重ね」をやめて縦積みにする（ここが最も崩れに強い） */
@media (max-width: 420px) {
  .device.phone {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 12px;
    width: min(240px, 72%);
    transform: none;
  }
}

/* SEO deep section list */
.seo-list {
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(11, 18, 32, .80);
  font-size: 14px;
}

.seo-list li {
  margin: 8px 0;
  line-height: 1.6;
}

.seo-list b {
  color: rgba(11, 18, 32, .92);
}