/* ==========================================================
   ソフトウェア開発事業（/software/）専用スタイル
   白地と余白を基本に、見出しの後ろへ薄い筆記体の英字を重ねる
   ========================================================== */
.sw {
  --sw-ink: #1d1d1f;
  --sw-text: #555;
  --sw-green: var(--c-primary);
  --sw-gray: #f6f6f4;
  --sw-script: rgba(37,69,58,.13);
  color: var(--sw-ink);
}
.sw-wrap { width: 100%; max-width: 116rem; margin: 0 auto; padding: 0 4rem; box-sizing: border-box; }
.sw-wrap--narrow { max-width: 84rem; }
.sw-sec { padding: 14rem 0; }
.sw-sec--gray { background: var(--sw-gray); }

/* ---------- 見出し（筆記体の英字を後ろに重ねる） ---------- */
.sw-head { position: relative; margin-bottom: 4rem; }
.sw-head--center { text-align: center; }
.sw-head--right { text-align: right; }
.sw-script {
  position: absolute; left: -1rem; top: 50%; transform: translateY(-62%);
  font-family: "Allura", cursive; font-size: 15rem; line-height: 1; white-space: nowrap;
  color: var(--sw-script); pointer-events: none; user-select: none;
}
.sw-head--center .sw-script { left: 50%; transform: translate(-50%, -62%); }
.sw-head--right .sw-script { left: auto; right: -1rem; }
.sw-title { position: relative; font-size: 3.6rem; font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: var(--sw-ink); margin: 0; }
.sw-lead { text-align: center; font-size: 1.6rem; line-height: 2.1; color: var(--sw-text); margin: 0 auto; max-width: 68rem; }
.sw-text { font-size: 1.6rem; line-height: 2.1; color: var(--sw-text); margin: 0 0 1.6rem; }
.sw-text:last-child { margin-bottom: 0; }

.sw-btn {
  display: inline-flex; align-items: center; gap: 1.2rem;
  background: var(--sw-green); color: #fff !important; text-decoration: none;
  font-size: 1.5rem; font-weight: 700; letter-spacing: .08em;
  padding: 1.6rem 3.6rem; border-radius: 999px; transition: background-color .2s ease, transform .2s ease;
}
.sw-btn:hover { background: var(--c-primary-dark); transform: translateY(-1px); text-decoration: none; }

/* ---------- ヒーロー ---------- */
.sw-hero { padding: 18rem 0 12rem; overflow: hidden; }
.sw-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 6rem; align-items: center; }
.sw-hero__en { font-size: 2rem; font-weight: 500; letter-spacing: .02em; color: var(--sw-ink); margin: 0 0 1.6rem; }
.sw-hero__title { font-size: clamp(3.2rem, 3.3vw, 4.6rem); font-weight: 700; line-height: 1.45; letter-spacing: .04em; color: var(--sw-ink); margin: 0; }
.sw-hero__lead { font-size: 1.6rem; line-height: 2.05; color: var(--sw-text); margin: 3.2rem 0 4rem; max-width: 48rem; }
.sw-hero__visual { position: relative; padding: 0 0 4rem 6rem; }
.sw-hero__visual .sw-phone { left: 0; bottom: 0; }

/* ---------- 端末の枠（ノートPC・スマホ・ブラウザ） ---------- */
.sw-laptop__screen { background: #111; border-radius: 1.4rem 1.4rem 0 0; padding: 1.2rem 1.2rem 1.6rem; }
.sw-laptop__screen img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.sw-laptop__base { height: 1.4rem; margin: 0 -5%; background: linear-gradient(#d9d9dc, #b7b7bb); border-radius: 0 0 1.4rem 1.4rem; }
.sw-phone {
  position: absolute; width: 24%; background: #111; border-radius: 2.6rem; padding: .8rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
}
.sw-phone img { display: block; width: 100%; height: auto; border-radius: 1.9rem; }
.sw-devices { position: relative; padding: 0 0 4rem 6rem; }
.sw-devices .sw-phone { left: 0; bottom: 0; }
.sw-browser { display: block; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.sw-browser__bar { display: flex; gap: .6rem; padding: 1rem 1.2rem; background: #ececec; }
.sw-browser__bar i { width: 1rem; height: 1rem; border-radius: 50%; background: #cfcfcf; }
.sw-browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* ---------- 文章と画面を左右に並べる段 ---------- */
.sw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center; }
.sw-row--reverse .sw-row__text { order: 2; }
.sw-row--reverse .sw-row__visual { order: 1; }
.sw-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.1); }
.sw-list { list-style: none; padding: 0; margin: 2.8rem 0 0; display: grid; gap: 1rem; }
.sw-list li { position: relative; padding-left: 2rem; font-size: 1.55rem; font-weight: 700; color: var(--sw-ink); }
.sw-list li::before { content: ""; position: absolute; left: 0; top: .75em; width: .8rem; height: .8rem; border-radius: 50%; background: var(--sw-green); }

.sw-circles { position: relative; min-height: 44rem; }
.sw-circle { position: absolute; display: block; border-radius: 50%; object-fit: cover; box-shadow: 0 14px 34px rgba(0,0,0,.12); background: #fff; border: 6px solid #fff; }
.sw-circle--l { width: 36rem; height: 36rem; left: 4rem; top: 0; }
.sw-circle--s { width: 20rem; height: 20rem; right: 2rem; bottom: 0; }

/* ---------- 制作・運用しているサイト ---------- */
.sw-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem 3.2rem; margin-top: 6.4rem; }
.sw-work { display: block; text-decoration: none; color: inherit; }
.sw-work:hover { text-decoration: none; }
.sw-work .sw-browser { transition: transform .3s ease, box-shadow .3s ease; }
.sw-work:hover .sw-browser { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.14); }
.sw-work__name { display: block; font-size: 1.7rem; font-weight: 700; color: var(--sw-ink); margin: 2rem 0 .6rem; }
.sw-work__desc { display: block; font-size: 1.4rem; line-height: 1.85; color: var(--sw-text); }

/* ---------- 特長 ---------- */
.sw-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.6rem; margin-top: 2.4rem; }
.sw-point__no { font-size: 1.4rem; font-weight: 700; letter-spacing: .1em; color: var(--sw-green); margin: 0 0 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid #ddd; }
.sw-point h3 { font-size: 2rem; font-weight: 700; color: var(--sw-ink); margin: 0 0 1.2rem; }
.sw-point p { font-size: 1.5rem; line-height: 2; color: var(--sw-text); margin: 0; }

/* ---------- ご相談の流れ ---------- */
.sw-flow { list-style: none; padding: 0; margin: 6.4rem 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.4rem; position: relative; }
.sw-flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 2.4rem; height: 1px; background: #cfcfcf; }
.sw-flow li { position: relative; text-align: center; }
.sw-flow__no {
  display: inline-flex; align-items: center; justify-content: center; width: 4.8rem; height: 4.8rem; border-radius: 50%;
  background: #fff; border: 1px solid var(--sw-green); color: var(--sw-green); font-size: 1.8rem; font-weight: 700; position: relative;
}
.sw-flow b { display: block; font-size: 1.65rem; color: var(--sw-ink); margin: 2rem 0 .8rem; }
.sw-flow small { display: block; font-size: 1.35rem; line-height: 1.8; color: var(--sw-text); }

/* ---------- FAQ ---------- */
.sw-faq { border-top: 1px solid #ddd; }
.sw-faq details { border-bottom: 1px solid #ddd; }
.sw-faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 2.6rem 4.8rem 2.6rem 0; font-size: 1.65rem; font-weight: 700; color: var(--sw-ink); line-height: 1.6;
}
.sw-faq summary::-webkit-details-marker { display: none; }
.sw-faq summary::after { content: "+"; position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font-size: 2.4rem; font-weight: 400; color: var(--sw-green); }
.sw-faq details[open] summary::after { content: "−"; }
.sw-faq details p { margin: 0; padding: 0 4.8rem 2.8rem 0; font-size: 1.5rem; line-height: 2; color: var(--sw-text); }

/* ---------- お問い合わせ ---------- */
.sw-cta__btn { text-align: center; margin: 4rem 0 0; }

@media (max-width: 1080px) {
  .sw-hero__grid, .sw-row { grid-template-columns: 1fr; gap: 6.4rem; }
  .sw-row--reverse .sw-row__text, .sw-row--reverse .sw-row__visual { order: 0; }
  .sw-head--right { text-align: left; }
  .sw-head--right .sw-script { right: auto; left: -1rem; }
  .sw-works, .sw-points { grid-template-columns: 1fr 1fr; }
  .sw-flow { grid-template-columns: 1fr; gap: 0; max-width: 48rem; margin-left: auto; margin-right: auto; }
  .sw-flow::before { left: 2.4rem; right: auto; top: 2.4rem; bottom: 2.4rem; width: 1px; height: auto; }
  .sw-flow li { display: grid; grid-template-columns: 4.8rem 1fr; column-gap: 2rem; text-align: left; padding-bottom: 3.2rem; }
  .sw-flow__no { grid-row: span 2; }
  .sw-flow b { margin: 1rem 0 .4rem; }
}
@media (max-width: 767px) {
  .sw-wrap { padding: 0 2rem; }
  .sw-sec { padding: 9.6rem 0; }
  .sw-hero { padding: 11rem 0 8rem; }
  .sw-hero__en { font-size: 1.6rem; }
  .sw-hero__title { font-size: 3rem; }
  .sw-hero__visual, .sw-devices { padding: 0 0 2.4rem 3.2rem; }
  .sw-phone { border-radius: 1.6rem; padding: .5rem; }
  .sw-phone img { border-radius: 1.2rem; }
  .sw-laptop__screen { padding: .6rem .6rem .8rem; border-radius: .8rem .8rem 0 0; }
  .sw-laptop__base { height: .8rem; }
  .sw-script { font-size: 9rem; }
  .sw-title { font-size: 2.5rem; }
  .sw-lead { text-align: left; font-size: 1.5rem; }
  .sw-text { font-size: 1.5rem; }
  .sw-circles { min-height: 30rem; }
  .sw-circle--l { width: 24rem; height: 24rem; left: 0; }
  .sw-circle--s { width: 14rem; height: 14rem; right: 0; }
  .sw-works, .sw-points { grid-template-columns: 1fr; gap: 4rem; }
}