@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300&display=swap');

/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

@font-face {
  font-family: 'myfont';
  src: url('../../assets/fonts/ZenMaruGothic-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'myfont-light';
  src: url('../../assets/fonts/ZenMaruGothic-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'myfont-bold';
  src: url('../../assets/fonts/ZenMaruGothic-Bold.ttf') format('truetype');
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3*/
  font-family: 'Zen Kaku Gothic New', sans-serif;
  text-align: justify;
  width: 100vw;
  display: block;
  overflow: hidden;
  overflow-y: scroll;
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
  font-weight: normal;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: normal;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
  font-weight: normal;
}

dd {
  margin-left: 0;
  font-weight: normal;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
  font-weight: normal;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
  font-weight: normal;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
  cursor: default;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove arrow in IE10 & IE11
 */
select::-ms-expand {
  display: none;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px;
  /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Misc */
/* ============================================ */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* ヘッダーナビゲーション用のメディクリ設定　*/
@media only screen and (max-width: 1267px) {
  .header {
    position: fixed;
    width: 100%;
    background: white;
    height: 70px;
    display: flex;
    z-index: 10;
    top: 0;
  }

  .disktop {
    display: none;
  }

  .header-company {
    position: absolute;
  }

  .header-nav__desktop {
    display: none !important;
  }

  .header-nav__mobile {
    display: block;
    position: fixed;
    z-index: 30000;
    right: 10px;
    top: 18px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
    transition: 0.5s all;
    /* ナビ開いてる時のボタン */
  }

  .header-nav {
    position: fixed;
    right: 50px;
    top: 10px;
  }

  .header-mobile {
    display: none;
    width: 0;
    margin-left: -100px;
  }

  .header-mobile.active {
    background: #0ae3c7;
    height: 100vh;
    padding: 200px 20px 20px;
    text-align: center;
    width: 100%;
    margin-left: 0;
  }

  .header-mobile ul li {
    padding: 20px 0;
    font-size: 20px;
    color: white;
    background: #e3180a;
    margin: 10px 20px 30px 0px;
    border-radius: 30px;
    width: 100%;
  }

  .header-mobile ul li:nth-child(5) {
    color: #f8c21a;
    background: #2a62c4;
  }

  .header-mobile ul li a img {
    width: 17px;
    margin-right: 10px;
  }

  .header-mobile {
    display: none;
    background: white;
    height: calc(100vh - 60px);
    margin-top: -6px;
    padding: 100px 20px;
    text-align: center;
  }

  .header-nav__mobile span {
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 6px;
    background: #5d3c3c;
  }

  .header-nav__desktop {
    display: none;
  }

  .header-nav__mobile span:nth-child(1) {
    top: 10px;
  }

  .header-nav__mobile span:nth-child(2) {
    top: 20px;
  }

  .header-nav__mobile span:nth-child(3) {
    top: 30px;
  }

  .header-nav__mobile.active {
    transform: rotate(360deg);
  }

  .header-nav__mobile.active span:nth-child(1) {
    top: 16px;
    left: 6px;
    background: #646464;
    transform: rotate(-45deg);
  }

  .header-nav__mobile.active span:nth-child(2) {
    top: 16px;
    background: #646464;
    transform: rotate(45deg);
  }

  .header-nav__mobile.active span:nth-child(3) {
    opacity: 0;
  }
}

/* ヘッダーナビゲーション用のメディクリ設定　ここまで　*/

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
  }

  to {
    filter: blur(0);
    transform: scale(1);
  }
}

@media print,
screen and (min-width:769px) {
  .display {
    display: none;
  }

  .js-inview {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s;
  }

  .inview {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s;
  }

  .js-inview2 {
    opacity: 0;
  }

  .js-inview2.tlt {
    opacity: 1;
  }

}
:root {
  --primary: #2846d9;       /* coomil系の少し深めの青 */
  --primary-soft: #eef2ff;
  --primary-dark: #18235b;
  --bg: #ffffff;
  --bg-alt: #f7f8fc;
  --text: #131624;
  --muted: #6b7280;
  --border: #e2e5f0;
  --radius-lg: 28px;
  --radius-md: 20px;
  --shadow-soft: 0 20px 60px rgba(15, 23, 42, 0.12);
  --shadow-card: 0 14px 40px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.9;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  width: 100vw;
  display: unset;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Layout
------------------------ */

.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}
.container.hero-back {
  background: rgba(255, 255, 255, 1);
}

section {
  padding: 96px 0;
}

@media (max-width: 768px) {
  section {
    padding: 72px 0;
  }
}

/* Header
------------------------ */

header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(226, 229, 240, 0.8);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #7ca5ff, #2846d9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
}

.logo-text-main {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--primary-dark);
}

.logo-text-sub {
  font-size: 11px;
  color: var(--muted);
}

.nav-links {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: var(--muted);
}

.nav-links a {
  position: relative;
  padding-bottom: 4px;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--primary);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.nav-links a:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 0px rgba(40, 70, 217, 0.34);
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.btn-ghost {
  border-color: var(--border);
  background: #fff;
  color: var(--primary-dark);
}

.btn-ghost:hover {
  background: var(--primary-soft);
}

@media (max-width: 960px) {
  .nav-links {
    display: none;
  }
  .nav-cta {
    gap: 6px;
  }
  .btn {
    padding-inline: 14px;
  }
}

@media (max-width: 640px) {
  .nav-cta {
    display: none;
  }
}

/* Section heading
------------------------ */

.section-head {
  margin-bottom: 40px;
  text-align: left;
}

.section-eyebrow {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.section-title {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 10px;
}

.section-desc {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 768px) {
  .section-head {
    text-align: left;
  }
  .section-title {
    font-size: 24px;
  }
}

/* Hero
------------------------ */

.hero {
  padding: 72px 0 96px;
  background: url(../../assets/images/img-hero-back.mp4);
  background-size: cover;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.05fr);
  gap: 60px;
  align-items: center;
}

.hero-kicker {
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--primary-dark);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 16px;
}

.hero-title span {
  color: var(--primary);
}

.hero-lead {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 22px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.hero-badge {
  font-size: 11px;
  color: var(--primary-dark);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 6px 14px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.hero-note {
  font-size: 12px;
  color: var(--muted);
}

.hero-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero-visual {
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  padding: 18px 18px 14px;
  border: 1px solid var(--border);
}

.hero-visual-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}

.hero-visual-img {
  border-radius: 18px;
  overflow: hidden;
}

.hero-visual-img img {
  width: 100%;
  object-fit: cover;
}

.hero-small-card {
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #f5f7ff, #ffffff);
  border: 1px solid var(--primary-soft);
  padding: 16px 18px 14px;
  font-size: 13px;
  color: var(--muted);
  box-shadow: var(--shadow-card);
}

.hero-small-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 6px;
}

.hero-small-list {
  margin: 0 0 4px 1.1em;
  padding: 0;
}

.hero-small-list li {
  margin-bottom: 4px;
}

.hero-small-price {
  font-size: 12px;
  color: var(--primary-dark);
  margin-top: 6px;
}

.hero-small-price strong {
  font-size: 16px;
}

@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-right {
    order: -1;
  }
  .hero {
    overflow: hidden;
    position: relative;
  }
}

@media (max-width: 600px) {
  .hero {
    padding-top: 60px;
    overflow: hidden;
    position: relative;
  }
  .hero-title {
    font-size: 26px;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Problems
------------------------ */

#problems {
  background: #ffffff;
  background-size: cover;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}

.problem-card {
  border-radius: var(--radius-md);
  background: #f8f9ff;
  border: 1px solid var(--border);
  padding: 20px 20px 16px;
  font-size: 14px;
  color: var(--muted);
}

.problem-card-title {
  color: var(--primary-dark);
  font-weight: 600;
  font-size: 23px;
  margin-bottom: 15px;
  line-height: 34px;
}
.problem-card-title span{
  margin-bottom: 5px;
  margin-top: 10px;
  display: block;
}

@media (max-width: 960px) {
  .problem-grid {
    grid-template-columns: 1fr;
  }
}

/* Features（選ばれる理由）
------------------------ */

#features {
  background: var(--bg-alt) url(../../assets/images/img-hero-back.png);
  background-size: cover;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.feature-card {
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 22px 20px 18px;
  box-shadow: var(--shadow-card);
  font-size: 14px;
  color: var(--muted);
}

.feature-tag {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 6px;
}

.feature-title {
  font-weight: 600;
  font-size: 25px;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 38px;
}

.feature-foot {
  margin-top: 10px;
  font-size: 13px;
  color: var(--primary-dark);
}

@media (max-width: 960px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* Capabilities
------------------------ */

#capabilities {
  background: radial-gradient(circle at top left, #eef2ff 0, #ffffff 45%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}

#capabilities::before,
#capabilities::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.9;
  pointer-events: none;
}

#capabilities::before {
  width: 260px;
  height: 260px;
  background: rgba(40, 70, 217, 0.12);
  top: -80px;
  left: -60px;
}

#capabilities::after {
  width: 220px;
  height: 220px;
  background: rgba(148, 163, 253, 0.14);
  bottom: -80px;
  right: -40px;
}

#capabilities .section-head {
  position: relative;
  z-index: 1;
}

.cap-head-note {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
}

/* カードレイアウト */

.cap-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.25fr);
  gap: 28px;
  margin-top: 28px;
  align-items: stretch;
}

.cap-block {
  position: relative;
  border-radius: 26px;
  background: #ffffff;
  border: none;
  padding: 24px 24px 20px;
  font-size: 14px;
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* 上部にグラデーション帯＋アイコン風サークル */

.cap-block::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 15px;
  background: linear-gradient(135deg, rgba(40, 70, 217, 0.14), rgba(129, 140, 248, 0.08));
  opacity: 0.9;
  pointer-events: none;
}

.cap-block::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 26px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 25%, #ffffff, rgba(40, 70, 217, 0.8));
  opacity: 0.25;
}

/* タイトルまわり */

.cap-block h3 {
  position: relative;
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  color: #1b319a;
  display: inline-flex;
  align-items: center;
  gap: 8px;   
  line-height: 42px;
}

/* 小見出し */

.cap-block h4 {
  margin: 18px 0 6px;
  font-size: 18px;
  color: var(--primary-dark);
  font-weight: 600;
}

/* 箇条書きのスタイル */

.cap-list {
  margin: 0;
  padding-left: 0;
  font-size: 14px;
  margin-bottom: 33px;
}

.cap-list li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 18px;
}

.cap-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(40, 70, 217, 0.18);
  transform: translateY(-50%);
}

/* 補足テキスト */

.cap-mini {
  font-size: 14px;
  color: var(--muted);
  margin-top: 32px;
  line-height: 1.9;
}

/* レスポンシブ */

@media (max-width: 960px) {
  .cap-grid {
    grid-template-columns: 1fr;
  }
}

/* Philosophy
------------------------ */

#philosophy {
  background: var(--bg-alt);
}

.philosophy-inner {
  max-width: 980px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 32px;
  padding: 52px 60px 46px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
}

.philosophy-kicker {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.philosophy-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 14px;
}

.philosophy-lead {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 26px;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.1fr);
  gap: 40px;
}

.philosophy-main {
  font-size: 14px;
  color: var(--muted);
}

.philosophy-main p {
  margin: 0 0 16px;
}

.philosophy-main strong {
  color: var(--primary-dark);
}

.philosophy-side {
  align-self: flex-start;
}

.philosophy-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.philosophy-card {
  border-radius: 20px;
  border: 1px solid var(--primary-soft);
  background: linear-gradient(145deg, #f5f7ff, #ffffff);
  padding: 18px 18px 16px;
  font-size: 13px;
  color: var(--muted);
}

.philosophy-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.philosophy-card ul {
  margin: 0 0 10px 1.2em;
  padding: 0;
}

.philosophy-card li {
  margin-bottom: 6px;
  line-height: 1.8;
}

.philosophy-quote {
  border-top: 1px dashed var(--primary-soft);
  margin-top: 10px;
  padding-top: 8px;
  font-size: 12px;
  color: var(--primary-dark);
}

@media (max-width: 960px) {
  .philosophy-inner {
    padding: 36px 24px 32px;
    border-radius: 26px;
  }
  .philosophy-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.philosophy-2col {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 960px) {
  .philosophy-2col {
    grid-template-columns: 1fr;
  }
}

.philosophy-title {
  font-size: 35px;
  margin-bottom: 18px;
  font-weight: 700;
  color: #1a2349;
}

.philosophy-left p {
  line-height: 1.85;
  margin-bottom: 16px;
  color: #2e385b;
  font-size: 15px;
}

/* CEO 写真 + 名前 */
.philosophy-ceo {
  text-align: center;
  margin-bottom: 22px;
}

.philosophy-ceo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  margin: 0 auto;
  border-radius: 20px;
}

.philosophy-ceo-name {
  margin-top: 10px;
  font-size: 14px;
  color: #394169;
  line-height: 1.4;
}

/* 右のカード */
.philosophy-card {
  background: #ffffff;
  border: 1px solid rgba(155, 169, 220, 0.45);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 12px 32px rgba(14, 30, 85, 0.12);
}

.philosophy-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #1b2552;
  margin-bottom: 12px;
  line-height: 28px;
}

.philosophy-card ul {
  margin-bottom: 16px;
}

.philosophy-card ul li {
  margin-bottom: 8px;
  line-height: 1.7;
  color: #303b6a;
  font-size: 14px;
  list-style: disc;
}

.philosophy-quote {
  font-size: 13px;
  line-height: 1.7;
  color: #5b6284;
  background: #f6f7ff;
  padding: 10px 14px;
  border-radius: 12px;
}

/* Works
------------------------ */

#works {
  background: #ffffff;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.work-card {
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 16px 16px 18px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.work-thumb {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.work-label {
  font-size: 11px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
}

.work-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.work-meta {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 960px) {
  .works-grid {
    grid-template-columns: 1fr;
  }
}

/* Price
------------------------ */

#price {
  background: var(--bg-alt);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}

.price-card {
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 24px 20px 20px;
  box-shadow: var(--shadow-card);
  font-size: 14px;
  color: var(--muted);
  position: relative;
  text-align: center;
}

.price-card--recommended {
  border: 2px solid var(--primary);
}

.price-ribbon {
  position: absolute;
  right: 0;
  top: -15px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  padding: 4px 40px;
  left: 0;
  margin: 0 auto;
  width: 196px;
  border-radius: 5px;
}

.price-name {
  font-size: 26px;
  font-weight: 600;
  color: #d72929;
  margin-bottom: 6px;
}

.price-range {
  font-size: 33px;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 4px;
}

.price-monthly {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.price-note {
  font-size: 18px;
  color: #ac874d;
  margin-bottom: 10px;
  text-emphasis-style: dot open;
}

.price-list {
  margin: 0;
  padding-left: 8px;
  font-size: 15px;
  text-align: left;
}

.price-list li {
  margin-bottom: 4px;
}

.price-footnote {
  font-size: 12px;
  color: var(--muted);
  margin-top: 20px;
}

@media (max-width: 960px) {
  .price-grid {
    grid-template-columns: 1fr;
  }
}

/* Flow
------------------------ */

#flow {
  background: #ffffff;
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
  font-size: 13px;
}

.flow-step {
  border-radius: 24px;
  background: #f8f9ff;
  border: 1px solid var(--border);
  padding: 16px 16px 14px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* イラスト部分 */
.flow-illust {
  width: 100%;
  border-radius: 21px;
  overflow: hidden;
  margin-bottom: 4px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
  padding-top: 18px;
  height: 100%;
}

.flow-illust img {
  width: 100%;
  height: 100%;
  display: block;
  padding: 7px;
}

/* テキスト部分 */

.flow-number {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.flow-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 960px) {
  .flow-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .flow-grid {
    grid-template-columns: 1fr;
  }
}

/* FAQ
------------------------ */

#faq {
  background: var(--bg-alt) url(../../assets/images/img-hero-back.png);
  background-size: cover;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
  font-size: 14px;
}

.faq-item {
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 16px 16px 14px;
  color: var(--muted);
  box-shadow: var(--shadow-card);
}

.faq-q {
  font-weight: 600;
  font-size: 20px;
  color: var(--text);
  margin-bottom: 6px;
}

@media (max-width: 960px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* Company & Contact
------------------------ */

#contact {
  background: #ffffff;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: 30px;
}

.company-card {
  border-radius: 24px;
  background: #f8f9ff;
  border: 1px solid var(--border);
  padding: 20px 20px 18px;
  font-size: 14px;
  color: var(--muted);
}

.company-visual {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 14px;
}

.company-visual img{
  width: 100%;
}

.company-card h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--text);
}

.company-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  row-gap: 8px;
  column-gap: 8px;
  font-size: 13px;
}

.company-card dt {
  font-weight: 600;
  color: var(--muted);
}

.company-card dd {
  margin: 0;
}

.contact-card {
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 20px 20px 18px;
  font-size: 14px;
  color: var(--muted);
}

.contact-note {
  font-size: 13px;
  margin-bottom: 14px;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--text);
}

.required {
  color: #e53935;
  font-size: 12px;
  margin-left: 4px;
}

.form-control,
.form-select,
.form-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: #fff;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-helper {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

@media (max-width: 960px) {
  .two-col {
    grid-template-columns: 1fr;
  }
  .footer-links {
    line-height: 13px;
  }
}

/* Footer
------------------------ */

footer {
  border-top: 1px solid var(--border);
  background: #f8f9ff;
  font-size: 12px;
  color: var(--muted);
}

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

.footer-links {
  display: flex;
  gap: 14px;
}

/* --- hero small card layout fix --- */

.hero-small-card {
  position: relative;
  padding: 22px 26px 24px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, #f1f6ff 0%, #ffffff 55%);
  box-shadow: 0 16px 34px rgba(15, 35, 90, 0.1);
  border: 1px solid rgba(120, 140, 200, 0.2);
  overflow: hidden;
}

.hero-small-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 0% 0%, rgba(101, 143, 255, 0.16) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(115, 233, 255, 0.16) 0, transparent 55%);
  opacity: 0.7;
  pointer-events: none;
}

.hero-small-card > * {
  position: relative;
}

.hero-small-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.hero-small-pill {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(9, 30, 66, 0.06);
  color: #5b6bb5;
}

.hero-small-title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1b2552;
  margin: 0;
}

/* ★ レイアウトを少しゆったり・比率調整 */

.hero-small-body {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(260px, 1.3fr);
  column-gap: 28px;
  row-gap: 12px;
  align-items: stretch;
}

@media (max-width: 960px) {
  .hero-small-body {
    grid-template-columns: 1fr;
  }
}

/* --- list --- */

.hero-small-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-small-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: #3b4460;
}

.hero-small-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f7cff, #7fe1ff);
}

/* --- AI 行だけ軽くカード化 --- */

.hero-small-ai {
  margin-top: 2px;
  border-radius: 12px;
  padding: 8px 12px 8px 26px;
  background: rgba(79, 124, 255, 0.06);
  border: 1px solid rgba(79, 124, 255, 0.32);
}

.hero-small-ai::before {
  left: 8px;
  background: linear-gradient(135deg, #ff7ac0, #ffa94f);
}

.hero-small-ai-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #ff6b9d;
}

/* --- price block（縦横のバランス調整） --- */

.hero-small-price {
  align-self: stretch;
  padding: 16px 18px 14px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(155, 169, 220, 0.5);
  box-shadow: 0 10px 22px rgba(15, 35, 90, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-small-price-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7b88c6;
  margin-bottom: 6px;
}

.hero-small-price-main {
  font-size: 15px;
  font-weight: 600;
  color: #1b2552;
  line-height: 1.6;
  margin-bottom: 6px;
}

.hero-small-price-em {
  font-size: 18px;
  font-weight: 700;
  color: #ff7a4f;
}

.hero-small-price-note {
  font-size: 12px;
  color: #6b738d;
  margin: 0;
}

/* ========== SERVICE SUMMARY CARD ========== */

.service-summary-card {
  margin-top: 18px;
  padding: 22px 24px 24px;
  border-radius: 24px;
  background: radial-gradient(circle at 0% 0%, #f3f6ff 0, #ffffff 55%);
  box-shadow: 0 16px 40px rgba(15, 35, 90, 0.12);
  border: 1px solid rgba(158, 175, 225, 0.5);
}

.service-summary-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.service-summary-pill {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(9, 30, 66, 0.05);
  color: #6a76c7;
}

.service-summary-title {
  font-size: 23px;
  font-weight: 700;
  margin: 0;
  color: #17224f;
}

/* 本文レイアウト：左テキスト、右価格カード */
.service-summary-body {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr);
  gap: 20px;
  margin-bottom: 20px;
}

.pc{
  display: none;
}

@media (max-width: 960px) {
  .service-summary-body {
    grid-template-columns: 1fr;
  }
  .service-summary-title {
    font-size: 30px;
    text-align: center;
    margin: 0 auto;
    line-height: 40px;
  }
  .sp{
    display:none;
  }
  .pc{
    display: block;
  }
}

/* 左側リスト */
.service-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: #323b5f;
}

.service-summary-list li {
  position: relative;
  padding-left: 16px;
}

.service-summary-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f7cff, #7fe1ff);
}

/* AI売上予測だけ、少しカードっぽく強調 */
.service-summary-list-ai {
  padding: 10px 12px 10px 18px;
  border-radius: 14px;
  background: rgba(79, 124, 255, 0.06);
  border: 1px solid rgba(79, 124, 255, 0.25);
}

.service-summary-list-ai::before {
  display: none;
}

.service-summary-ai-label {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #ffffff;
  color: #ff6b9d;
}

/* 右側：料金ボックス */
.service-summary-right {
  padding: 16px 18px 14px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(158, 175, 225, 0.7);
  box-shadow: 0 10px 26px rgba(15, 35, 90, 0.08);
  text-align: center;
}

.service-summary-plan-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7b88c6;
  margin-bottom: 6px;
}

.service-summary-plan-main {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
}

.service-summary-plan-main .price-em {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #ff7a4f;
}

.service-summary-plan-main .price-plus {
  color: #162447;
  font-size: 18px;
}

.service-summary-plan-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b738d;
}
/* =========================
   FAQ デザイン強化
   ========================= */

   #faq {
    background: #f5f7fb;
    padding: 80px 0;
  }
  
  .faq-top {
    max-width: 1100px;
    margin: 0 auto 34px;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: center;
  }
  
  .faq-top-text {
    font-size: 17px;
    line-height: 1.9;
    color: #555b7a;
  }
  
  .faq-top-text strong {
    color: #25306a;
  }
  
  .faq-top-illust img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(18, 30, 82, 0.22);
  }
  
  /* FAQ カードレイアウト */
  .faq-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
  }
  
  /* カード本体＋アイコン */
  .faq-item {
    position: relative;
    padding: 22px 22px 18px 66px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e6f5;
    box-shadow: 0 18px 46px rgba(20, 40, 90, 0.08);
  }
  
  .faq-item::before {
    content: "?";
    position: absolute;
    left: 20px;
    top: 24px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, #3155d8, #3f8dff);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(32, 74, 178, 0.55);
  }
  
  .faq-q {
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 8px;
    color: #222643;
  }
  
  .faq-item p {
    font-size: 14px;
    line-height: 1.9;
    color: #555b7a;
  }
  
  /* スマホ調整 */
  @media (max-width: 960px) {
    #faq {
      padding: 60px 0 70px;
    }
    .faq-top {
      grid-template-columns: 1fr;
    }
    .faq-top-illust img {
      height: 200px;
    }
    .faq-grid {
      grid-template-columns: 1fr;
    }
  }
  /* =========================
   HEADER / NAV
   ========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 12px 0;
}

/* ロゴまわり */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 0%, #65a4ff, #2954f4);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}
.logo-text-main {
  font-size: 18px;
  letter-spacing: 0.08em;
}
.logo-text-sub {
  font-size: 11px;
  color: #9aa0bc;
}

/* PCナビ */
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  color: #737897;
  white-space: nowrap;
}

.nav-links a {
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2954f4, #4f9dff);
  transition: width 0.2s ease;
}

.nav-links a:hover {
  color: #1d2c7f;
}
.nav-links a:hover::after {
  width: 100%;
}

/* CTAボタン調整 */
.nav-cta .btn-primary {
  padding: 10px 26px;
  border-radius: 999px;
  font-size: 14px;
}

/* ドロップダウン（ガイド） */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-label {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: #737897;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.nav-dropdown-label:hover {
  color: #1d2c7f;
}
.nav-dropdown-icon {
  font-size: 11px;
}

.nav-dropdown-menu {
  position: absolute;
  top: 150%;
  left: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(12, 26, 80, 0.22);
  padding: 8px 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.nav-dropdown-menu a {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: #4d5374;
}
.nav-dropdown-menu a:hover {
  background: #f3f5ff;
  color: #1d2c7f;
}

/* ドロップダウン ON */
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ハンバーガー（SP用） */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: #f3f4ff;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  position: fixed;
  right: 0;
}
.nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #293154;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .nav {
    gap: 14px;
  }
  .nav-links {
    position: absolute;
    inset: 60px 0 auto 0;
    margin: 0 auto;
    max-width: 960px;
    padding: 10px 16px 14px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(15, 32, 80, 0.28);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    z-index: 40;
  }
  .nav-links.is-open {
    display: flex;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .nav-cta {
    display: none; /* ボタンはナビ内に入れてもOKならここ調整 */
  }
}

/* さらに狭い幅ではフォント少し小さめ */
@media (max-width: 720px) {
  .nav-links {
    font-size: 13px;
  }
}
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(10, 22, 70, 0.18);
  border-color: transparent;
}

/* 上段：ロゴとCTAの余白をかなり減らす */
.header.is-scrolled .header-top {
  padding: 4px 0 6px;
}

/* 下段の余白も大幅に削減 */
.header.is-scrolled .header-bottom {
  padding: 2px 0 6px;
  gap: 14px;
}

/* ロゴ圧縮 */
.header.is-scrolled .logo-mark {
  width: 26px;
  height: 26px;
  font-size: 14px;
}

.header.is-scrolled .logo-text-main {
  font-size: 14px;
  line-height: 1.1;
}

.header.is-scrolled .logo-text-sub {
  display: none;
}

/* CTA ボタンも小型化 */
.header.is-scrolled .header-cta {
  padding: 4px 14px;
  font-size: 12px;
}

/* ナビの文字も小型化 */
.header.is-scrolled .header-bottom a {
  font-size: 12px;
  padding-bottom: 0;
}

.header.is-scrolled .header-bottom a::after {
  bottom: -2px;
  height: 2px;
}
/* =========================
   2段ヘッダー
   ========================= */

   .header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffff;
    border-bottom: 1px solid #eef0f5;
    transition: box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }
  
  .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
  }
  
  .header-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding: 12px 0 18px;
    border-top: 1px solid #f4f5fb;
    justify-content: center;
  }
  
  .header-bottom a {
    font-size: 14px;
    font-weight: 500;
    color: #5c617a;
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.18s ease;
  }
  
  .header-bottom a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2954f4, #4f9dff);
    transition: width 0.18s ease;
  }
  
  .header-bottom a:hover {
    color: #24306c;
  }
  .header-bottom a:hover::after {
    width: 100%;
  }
  
  .header-cta {
    padding: 10px 24px;
    border-radius: 999px;
    font-size: 14px;
  }
  
  /* ロゴまわり（必要に応じて調整） */
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
  }
  .logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 0%, #65a4ff, #2954f4);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
  }
  .logo-text-main {
    font-size: 18px;
    letter-spacing: 0.08em;
  }
  .logo-text-sub {
    font-size: 11px;
    color: #9aa0bc;
  }
  
  /* ===== スクロール後：コンパクトモード ===== */
  
  .header.is-scrolled {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 28px rgba(10, 22, 70, 0.18);
    border-color: transparent;
  }
  
  .header.is-scrolled .header-top {
    padding: 8px 0;
  }
  
  .header.is-scrolled .header-bottom {
    padding: 4px 0 8px;
    gap: 20px;
  }
  
  .header.is-scrolled .logo-mark {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
  
  .header.is-scrolled .logo-text-main {
    font-size: 16px;
  }
  
  .header.is-scrolled .logo-text-sub {
    display: none;
  }
  
  .header.is-scrolled .header-cta {
    padding: 6px 18px;
    font-size: 13px;
  }
  
  .header.is-scrolled .header-bottom a {
    font-size: 13px;
  }
  
  /* レスポンシブ調整 */
  @media (max-width: 960px) {
    .header-top {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
  
    .header-bottom {
      gap: 16px 20px;
    }
  
    .header-cta {
      align-self: stretch;
      text-align: center;
      width: 100%;
    }
  }
  
  @media (max-width: 600px) {
    .header-bottom {
      font-size: 13px;
    }
  }
  /* ==========================
     guide.html 専用スタイル
     ========================== */
     body {
      background-color: #f5f7fb;
    }

    /* HERO */
    .guide-hero {
      padding: 120px 0 90px;
      background: radial-gradient(circle at top left, #e4ebff 0, #f5f7fb 40%, #ffffff 100%);
    }
    .guide-hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2.3fr);
      gap: 40px;
      align-items: center;
    }
    .guide-hero-kicker {
      font-size: 13px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #4763d6;
      font-weight: 500;
      margin-bottom: 10px;
    }
    .guide-hero-title {
      font-size: 40px;
      line-height: 1.5;
      margin-bottom: 14px;
      color: #1f2540;
    }
    .guide-hero-title span {
      color: #2450d2;
      font-weight: 700;
    }
    .guide-hero-lead {
      font-size: 15px;
      color: #555;
      line-height: 1.9;
      margin-bottom: 20px;
    }
    .guide-hero-tagline {
      font-size: 13px;
      color: #7880a5;
      line-height: 1.8;
      margin-bottom: 22px;
    }
    .guide-hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 12px;
    }
    .guide-hero-note {
      font-size: 12px;
      color: #8a8fb0;
      line-height: 1.8;
    }

    .guide-hero-visual {
      border-radius: 26px;
      overflow: hidden;
      background: #ffffff;
      box-shadow: 0 20px 55px rgba(20, 40, 90, 0.16);
      display: flex;
      flex-direction: column;
    }
    .guide-hero-visual img {
      width: 100%;
      height: auto;
      display: block;
    }
    .guide-hero-visual-body {
      padding: 18px 20px 20px;
    }
    .guide-hero-visual-title {
      font-size: 18px;
      font-weight: 600;
      color: #273056;
      margin-bottom: 6px;
    }
    .guide-hero-visual-text {
      font-size: 13px;
      color: #6b7295;
      line-height: 1.8;
    }

    /* 共通セクション */
    .guide-section {
      padding: 70px 0;
      background: transparent;
      background: #ffffff;
      background-size: cover;
    }
    .guide-section:nth-of-type(2n) {
      background: #ffffff url(../../assets/images/img-hero-back.png);
    }
    .guide-section .section-head {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 34px;
    }
    .guide-section .section-title {
      font-size: 30px;
    }
    .guide-section .section-desc {
      font-size: 15px;
      color: #666;
      line-height: 1.9;
    }

    /* 事前に考える5つ */
    .guide-grid-5 {
      max-width: 1040px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }
    .guide-card {
      background: #ffffff;
      border-radius: 20px;
      border: 1px solid #e3e6f3;
      box-shadow: 0 14px 40px rgba(22, 38, 96, 0.06);
      padding: 20px 18px 18px;
      font-size: 14px;
      color: #555;
      line-height: 1.8;
    }
    .guide-card-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: #2f54d8;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .guide-card-title {
      font-size: 19px;
      font-weight: 600;
      color: #252a4e;
      margin-bottom: 6px;
      line-height: 29px;
      min-height: 59px;
    }
    .guide-card-sub {
      font-size: 12px;
      color: #8a8fb0;
      margin-bottom: 6px;
    }
    .guide-card ul {
      margin: 0;
      padding-left: 1.1em;
    }
    .guide-card ul li {
      margin-bottom: 4px;
    }

    /* つまずきポイント */
    .guide-issues {
      max-width: 960px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
      gap: 26px;
      align-items: flex-start;
    }
    .guide-issue-card {
      background: #fff;
      border-radius: 18px;
      border: 1px solid #e3e6f3;
      box-shadow: 0 12px 36px rgba(22, 38, 96, 0.05);
      padding: 20px 18px 18px;
      font-size: 14px;
      color: #555;
      line-height: 1.8;
      margin-bottom: 10px;
    }
    .guide-issue-label {
      font-size: 11px;
      font-weight: 600;
      color: #4756c4;
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .guide-issue-title {
      font-size: 19px;
      font-weight: 600;
      color: #262b50;
      margin-bottom: 6px;
    }
    .guide-issue-solution {
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 10px;
      background: #f3f6ff;
      font-size: 13px;
      color: #4a5484;
    }

    .guide-issues-side {
      border-radius: 20px;
      border: 1px solid #dde2f2;
      background: linear-gradient(145deg, #f6f7ff, #ffffff);
      padding: 20px 18px;
      font-size: 14px;
      color: #4f567c;
      line-height: 1.9;
    }
    .guide-issues-side-title {
      font-size: 23px;
      font-weight: 600;
      color: #262b50;
      margin-bottom: 6px;
      text-align: center;
    }
    .guide-issues-side ul {
      margin: 10px 0 0;
      padding-left: 1.2em;
    }
    .guide-issues-side li {
      margin-bottom: 6px;
    }

    /* 3つが決まればOK */
    .guide-highlight-wrap {
      max-width: 920px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
      gap: 24px;
      align-items: center;
    }
    .guide-highlight-text {
      font-size: 15px;
      color: #555;
      line-height: 1.9;
    }
    .guide-highlight-box {
      background: #ffffff;
      border-radius: 22px;
      border: 1px solid #e3e6f3;
      box-shadow: 0 14px 40px rgba(22, 38, 96, 0.06);
      padding: 22px 20px 18px;
    }
    .guide-highlight-title {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #24294b;
    }
    .guide-highlight-list {
      list-style: none;
      margin: 0;
      padding-left: 0;
      font-size: 14px;
      color: #4b5174;
    }
    .guide-highlight-list li {
      margin-bottom: 8px;
      padding-left: 20px;
      position: relative;
    }
    .guide-highlight-list li::before {
      content: "●";
      font-size: 9px;
      color: #2f54d8;
      position: absolute;
      left: 0;
      top: 6px;
    }

    /* 最後のCTA */
    .guide-cta-section {
      padding: 70px 0 90px;
      background: #f0f3ff;
      text-align: center;
    }
    .guide-cta-section h2 {
      font-size: 35px;
      margin-bottom: 14px;
      color: #24294b;
      font-weight: bold;
    }
    .guide-cta-section p {
      font-size: 15px;
      color: #555b80;
      line-height: 1.9;
      margin-bottom: 24px;
    }
    .guide-cta-buttons {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    /* レスポンシブ */
    @media (max-width: 960px) {
      .guide-hero-inner {
        grid-template-columns: 1fr;
      }
      .guide-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .guide-issues,
      .guide-highlight-wrap {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 720px) {
      .guide-hero {
        padding: 100px 0 70px;
      }
      .guide-hero-title {
        font-size: 26px;
      }
      .guide-section {
        padding: 60px 0;
      }
      .guide-grid-5 {
        grid-template-columns: 1fr;
      }
      .guide-hero-visual-body {
        padding: 14px 16px 16px;
      }
      .guide-cta-section h2 {
        font-size: 25px;
      }
    }
    .why-section{
      background: #f6f7fb url(../../assets/images/img-genba.jpg);
      background-size: cover;
      background-blend-mode: luminosity;
    }
    .why-highlight strong{
      font-weight: bold;
      font-size: 26px;
      color: #f60000;
    }
       /* ========= HERO ========= */
       .hero-wide {
        padding: 0;
        margin: 0;
        position: relative;
        overflow: hidden;
      }
      .hero-wide img {
        width:100%;
        height: 420px;
        object-fit: cover;
        opacity: 0.82;
        padding: 20px;
      }
      .hero-wide-overlay {
        position: absolute;
        inset:0;
        background: linear-gradient(to bottom right, rgba(10,20,60,0.55), rgba(30,50,100,0.35));
      }
      .hero-wide-content {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 1100px;
        color: #fff;
      }
      .hero-wide-content.why {
        bottom: 80px;
      }
      .hero-kicker {
        font-size: 13px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        margin-bottom: 6px;
        opacity: 0.9;
      }
      .hero-titles {
        font-size: 34px;
        font-weight: 700;
        margin-bottom: 14px;
        line-height: 1.5;
      }
      .hero-titles span {
        color: #d8e2ff;
      }
      .hero-leads {
        font-size: 15px;
        line-height: 1.85;
        max-width: 700px;
        opacity: 0.92;
        color:white;
      }
  
      /* ========= SECTION ========= */
      .why-section {
        padding: 80px 0;
      }
      .why-section-white {
        background: #ffffff;
      }
      .why-section .section-head {
        text-align:center;
        max-width: 760px;
        margin: 0 auto 34px;
      }
      .why-section .section-title {
        font-size: 35px;
      }
      .why-section .section-desc {
        font-size: 19px;
        line-height: 1.9;
        color: #666;
      }
  
      /* ========= LEAD BOX ========= */
      .why-lead-box {
        max-width: 900px;
        margin: 0 auto;
        background:#fff;
        border-radius: 22px;
        border: 1px solid #e0e4f3;
        padding: 30px 32px;
        box-shadow:0 16px 45px rgba(18,26,76,0.10);
        font-size: 15px;
        line-height: 1.9;
        color: #444;
      }
  
      /* ========= GRID (3cards) ========= */
      .why-grid {
        max-width: 980px;
        margin:0 auto;
        display:grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap:24px;
      }
      .why-card {
        background:#fff;
        border-radius:20px;
        border:1px solid #e3e6f3;
        box-shadow:0 14px 40px rgba(20,40,90,0.08);
        padding:22px 18px 20px;
        font-size:15px;
        line-height:1.8;
        color:#555;
      }
      .why-card-label {
        display:inline-flex;
        align-items:center;
        padding:4px 10px;
        background:#eef2ff;
        color:#324fb7;
        border-radius:999px;
        font-size:12px;
        margin-bottom:8px;
        font-weight:600;
      }
      .why-card-title {
        font-size:20px;
        font-weight:600;
        margin-bottom:8px;
        color:#2b3152;
      }
  
      .why-highlight {
        max-width: 900px;
        margin: 34px auto 0;
        padding: 18px 20px 18px 15px;
        border-radius: 16px;
        background:#f4f7ff;
        font-size: 20px;
        color: #3c497a;
        line-height: 1.9;
        border-left: 6px solid #3460ff;
        font-weight: bold;
        text-align: center;
      }
  
      /* ========= TWO-COL ========= */
      .why-two-col {
        max-width: 1020px;
        margin:0 auto;
        display:grid;
        grid-template-columns: minmax(0,1.5fr) minmax(0,1.1fr);
        gap:30px;
        align-items:start;
      }
      .why-text {
        font-size:15px;
        line-height:1.9;
        color:#555;
      }
      .why-text p { margin-bottom:18px; }
  
      .why-text p strong{ 
          font-size: 21px;
          color: #374281;
          font-weight: bold;
      }
  
      .why-preferred-card {
        background:#fff;
        border-radius:22px;
        border:1px solid #e0e4f3;
        padding:24px 22px;
        box-shadow:0 16px 45px rgba(18,26,76,0.08);
      }
      .why-preferred-title {
        font-size:18px;
        font-weight:700;
        margin-bottom:12px;
        color:#2b3152;
      }
      .why-preferred-list {
        padding-left:1.1em;
        font-size:14px;
        color:#444;
      }
      .why-preferred-list li { margin-bottom:8px; }
  
      .why-quote {
        margin-top:16px;
        padding:14px 16px;
        border-radius:14px;
        background:#eef2ff;
        font-size:13px;
        color:#4a4f75;
        line-height:1.9;
      }
  
      /* ========= CTA ========= */
      .why-cta-section {
        padding:80px 0;
        background:#f0f3ff;
        text-align:center;
      }
      .why-cta-section h2 {
        font-size: 35px;
        margin-bottom: 14px;
        color: #24294b;
        font-weight: bold;
      }
      .why-cta-section p {
        font-size:15px;
        line-height:1.85;
        color:#555;
        margin-bottom:26px;
      }
      .why-cta-buttons {
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:14px;
      }
  
      /* ========= Responsive ========= */
      @media(max-width:960px){
        .why-grid { grid-template-columns:1fr; }
        .why-two-col { grid-template-columns:1fr; }
        .hero-title { font-size:28px; }
        .hero-titles {
          font-size: 26px;
        }
        .hero-wide-content.why {
          bottom: 30px;
          padding: 5px;
        }
        .why-cta-section h2 {
          font-size: 25px;
        }
        .why-section .section-title {
          font-size: 25px;
        }
        .why-highlight strong{
          font-size: 20px;
        }
      }

      @media(max-width:720px){
        .hero-wide img { height: 300px; }
        .hero-title { font-size:24px; }
      }
      .container.low{
        background: #ffffffb8;
        padding: 50px 20px;
      }

.form-control, .form-select, .form-textarea {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    padding: 9px 10px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: #fff;
}
.capcha input{width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: #fff;} .capcha {text-align:center;}
  .capcha img{
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
  .why-lead-box p strong{
    font-weight: bold;
    font-size: 19px;
    color: #123791;
    margin-top: 10px;
    display: inline-block;
  }
  .why-lead-box p span{
    font-size: 15px;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #6c7746;
  }

  /* =========================
   ヘッダー中央のアイコンスライダー
   ========================= */

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* 中央エリア：ロゴとCTAの間を埋める */
.header-scroller {
  flex: 1;
  overflow: hidden;
  max-width: 1120px;
  padding: 6px 0;
}

.header-scroller-track {
  display: inline-flex;
  gap: 12px;
  /* 無限に左へ流れる */
  animation: header-scroll 22s linear infinite;
  will-change: transform;
}

/* 各バッジ */
.header-scroller-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 26px 2px 15px;
  font-size: 11px;
  border-radius: 999px;
  font-size: 12px;
  color: #23406c;
  background: rgba(58, 123, 255, 0.06);
  border: 1px solid rgba(58, 123, 255, 0.18);
  white-space: nowrap;
}

/* 絵文字を少し大きめに */
.header-scroller-item::first-letter {
  font-size: 14px;
}

/* スクロールアニメーション */
@keyframes header-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* トラック全体の幅のおよそ半分ぶん左へずらすイメージ */
    transform: translateX(-50%);
  }
}

/* ホバーしたときは止めて、少し浮かせる */
.header-scroller:hover .header-scroller-track {
  animation-play-state: paused;
}

.header-scroller-item:hover {
  background: rgba(58, 123, 255, 0.12);
  transform: translateY(-1px);
}

/* スクロール縮小モードでも邪魔にならないよう高さ調整 */
.header.is-scrolled .header-scroller {
  padding: 2px 0;
}

.header.is-scrolled .header-scroller-item {
  padding: 2px 26px 2px 15px;
  font-size: 11px;
}

/* スマホでは非表示（狭いので） */
@media (max-width: 960px) {
  .header-scroller {
    display: none;
  }

  .header-top {
    justify-content: space-between;
    gap: 12px;
  }
}





/* ============ PC共通 ============ */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #eef0f5;
  transition: box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}

.header-bottom {
  display: flex;
  gap: 28px;
  padding: 12px 0 18px;
  border-top: 1px solid #f4f5fb;
}

.header-bottom a {
  font-size: 14px;
  font-weight: 500;
  color: #5c617a;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}

.header-bottom-cta-sp {
  display: none; /* PCでは表示しない */
}

/* ハンバーガー初期状態（PCでは非表示） */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #4c4f69;
  margin: 4px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* is-open 時のアニメーション */
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ============ スクロール後の縮小（PC） ============ */

.header.is-scrolled .header-top {
  padding: 6px 0 4px;
}
.header.is-scrolled .header-bottom {
  padding: 2px 0 6px;
  gap: 18px;
}
/* ============ スマホ最適化 ============ */

@media (max-width: 960px) {
  .header-top {
    padding: 10px 0;
    gap: 12px;
  }

  .logo-text-sub {
    font-size: 10px;
  }

  /* 中央のバッジエリアはSPでは非表示に */
  .header-scroller {
    display: none;
  }

  /* CTAはヘッダー上段では非表示にし、メニュー内に集約 */
  .header-cta {
    display: none;
  }

  /* ハンバーガー表示 */
  .nav-toggle {
    display: block;
  }

  /* メインナビをドロワー化 */
  .header-bottom {
    position: fixed;
    inset: 56px 0 auto;
    /* 上: ヘッダーの高さに合わせて調整 */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-top: 1px solid #eef0f5;
    box-shadow: 0 12px 30px rgba(12, 22, 60, 0.16);
    padding: 12px 16px 18px;
    flex-direction: column;
    gap: 10px;
    transform: translateY(-16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .header-bottom a {
    font-size: 14px;
    padding-bottom: 0;
  }

  /* SPメニュー内 CTA を表示 */
  .header-bottom-cta-sp {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #2f56ff;
    color: #fff;
    text-align: center;
    font-weight: 700;
  }

  /* メニューオープン状態 */
  .header-bottom.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* メニューオープン中は body を少し固定（任意） */
  body.nav-open {
    overflow: hidden;
  }
}
@media (max-width: 768px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-inner {
    flex-direction: column;
    gap: 20px;
  }

  .hero-title {
    font-size: 25px;
    line-height: 1.4;
  }
  .hero-lead {
    font-size: 14px;
  }

  .hero-right {
    width: 100%;
  }
  .service-summary-card {
    margin-top: 8px;
  }

  .features-grid,
  .works-grid,
  .price-grid,
  .flow-grid,
  .faq-grid,
  .cap-grid,
  .two-col,
  .philosophy-2col {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .feature-card,
  .work-card,
  .price-card,
  .flow-step,
  .faq-item,
  .company-card,
  .contact-card {
    margin: 0;
  }

  .section-title {
    font-size: 25px;
    line-height: 35px;
  }
  .philosophy-card-title {
    font-size: 25px;
    font-weight: 700;
    color: #1b2552;
    margin-bottom: 12px;
    line-height: 34px;
  }
  .work-title {
    line-height: 30px;
  }
  .flow-title {
    font-size: 23px;
  }
  .section-desc {
    font-size: 13px;
  }

  .philosophy-right {
    margin-top: 8px;
  }

  .work-thumb img {
    width: 100%;
    height: auto;
  }

  /* テーブルライクな部分は横スクロール許可（もしあれば） */
  .sp-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* =========================
   スマホ用ヘッダー調整
   ========================= */
   @media (max-width: 960px) {
    /* 上段は常に横一列（ロゴ＋ハンバーガー） */
    .header-top {
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
  
    .logo {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-direction: column;
    }
  
    .logo-text-main {
      font-size: 16px;
    }
  
    .logo-text-sub {
      font-size: 10px;
      margin-top: -7px;
    }
  
    /* 中央のスクロールバッジはSPでは非表示 */
    .header-scroller {
      display: none;
    }
  
    /* 上段の大きいCTAボタンはSPでは非表示（メニュー内にCTAを出す） */
    .header-cta {
      display: none;
    }
  
    /* ハンバーガーアイコン */
    .nav-toggle {
      display: block;
      margin-left: auto;
      background: none;
      border: none;
      padding: 4px;
      cursor: pointer;
    }
  
    .nav-toggle span {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 999px;
      background: #4c4f69;
      margin: 4px 0;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
  
    /* 開いているときは「×」に変形 */
    .nav-toggle.is-open span:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }
    .nav-toggle.is-open span:nth-child(2) {
      opacity: 0;
    }
    .nav-toggle.is-open span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }
  
    /* メニューは「固定オーバーレイ」ではなく、コンテンツを押し下げるドロップダウン型にする */
    .header-bottom {
      display: none; /* デフォルト非表示 */
      flex-direction: column;
      gap: 12px;
      padding: 10px 16px 16px;
      border-top: 1px solid #eef0f5;
      background: #ffffff;
    }
  
    .header-bottom a {
      font-size: 15px;
      padding-bottom: 9px;
    }
  
    /* SP専用のCTAボタン（メニューの一番下） */
    .header-bottom-cta-sp {
      display: block;
      margin-top: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      background: #2f56ff;
      color: #ffffff;
      text-align: center;
      font-weight: 700;
    }
  
    /* JSで .is-open が付いたときだけメニュー表示 */
    .header-bottom.is-open {
      display: flex;
      padding: 30px 20px;
    }
  }
  .header-bottom-cta-sp {
    display: block;
    margin-top: 8px;
    padding: 12px 16px;
    border-radius: 999px;
    background: #2f56ff;
    color: #ffffff !important;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
  }
  .header-menu-close {
    display: none; /* PCでは表示しない */
  }
  @media (max-width: 960px) {

    /* ……すでにあるスマホ用ヘッダーCSSの続きに追加 …… */
  
    .header-menu-close {
      display: block;
      width: 100%;
      padding: 8px 4px 10px;
      margin-bottom: 6px;
      background: none;
      border: none;
      text-align: right;
      font-size: 13px;
      color: #6a6f85;
    }
  }  
  /* ========== SP NAV 基本 ========== */
.sp-nav-toggle {
  display: none; /* PCでは非表示。下のメディアクエリでSP時だけ表示 */
  background: none;
  border: none;
  padding: 0;
  width: 32px;
  height: 24px;
  position: relative;
  cursor: pointer;
}
.sp-nav-toggle span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #333b63;
  border-radius: 999px;
  transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
}
.sp-nav-toggle span:nth-child(1) { top: 0; }
.sp-nav-toggle span:nth-child(2) { top: 11px; }
.sp-nav-toggle span:nth-child(3) { top: 22px; }

/* 開いているときの×変形 */
body.is-spnav-open .sp-nav-toggle span:nth-child(1) {
  top: 11px;
  transform: rotate(45deg);
}
body.is-spnav-open .sp-nav-toggle span:nth-child(2) {
  opacity: 0;
}
body.is-spnav-open .sp-nav-toggle span:nth-child(3) {
  top: 11px;
  transform: rotate(-45deg);
}

/* 画面全体のオーバーレイ */
.sp-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 40, 0.45);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 80;
}
body.is-spnav-open .sp-nav-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* 右からスライドするパネル */
.sp-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: 22px 0px 24px;
}
body.is-spnav-open .sp-nav-panel {
  transform: translateX(0);
}

/* パネル内ヘッダー */
.sp-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 18px;
}
.sp-nav-title {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #9aa0bc;
}
.sp-nav-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  color: #7a809c;
  cursor: pointer;
}

/* メニューリスト */
.sp-nav-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 20px 18px 30px;
  background: #e4e3e3;
  width: 100%;
}
.sp-nav-list li + li {
  margin-top: 6px;
}
.sp-nav-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f8ff;
  text-decoration: none;
  color: #3b4062;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 6px 16px rgba(10, 24, 80, 0.05);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.sp-nav-list a span {
  width: 24px;
  text-align: center;
  font-size: 16px;
}
.sp-nav-list a:hover {
  background: #e8ecff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(10, 24, 80, 0.12);
}

/* スマホだけ表示にする */
@media (max-width: 900px) {
  .sp-nav-toggle {
    position: fixed;
    display: inline-flex;
    right: 20px;
    top: 20px;
  }
  /* 既存のヘッダー下ナビはSPでは非表示にしてOK */
  .header-bottom {
    display: none;
  }
}

@media (min-width: 901px) {
  .sp-nav-overlay,
  .sp-nav-panel {
    display: none;
  }
}
/* =========================
   SP PAGE TOP BUTTON
   ========================= */

   .sp-page-top {
    position: fixed;
    right: 16px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: radial-gradient(circle at 30% 0%, #65a4ff, #2954f4);
    box-shadow: 0 10px 24px rgba(12, 26, 80, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
  
    /* 初期状態は非表示 */
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      box-shadow 0.18s ease;
  }
  
  .sp-page-top-arrow {
    color: #fff;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
  }
  
  /* 表示状態用クラス */
  .sp-page-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  
  .sp-page-top:active {
    box-shadow: 0 6px 16px rgba(12, 26, 80, 0.35);
    transform: translateY(2px);
  }
  
  /* スマホだけ表示（PCでは消す） */
  @media (min-width: 769px) {
    .sp-page-top {
      display: none;
    }
    body{
      overflow: hidden;
      display: inline !important;
    }
  }
  .hero-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;     /* 画面にフィットさせる */
    z-index: -1;           /* コンテンツの背面に */
  }