/*!
Theme Name: sugupos-re
Theme URI: http://underscores.me/
Author: norinaga (CODEX)
*/

:root {
  --navy: #202482;
  --cyan: #3bbbc0;
  --teal: #207c8d;
  --red: #f1504b;
  --pale: #e9fbfb;
  --gray: #f0f1f6;
  --text: #111;
  --muted: #969696;
  --shadow: 1px 5px 4px rgba(0, 0, 0, .22);
	--space1: 24px;
	--space2: 40px;
	--space3: 80px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 700;
  line-height: 1.75;
  background: #fff;
  overflow-x: hidden;
}
h1, h2, h3, p, li, a, summary, label {
  overflow-wrap: anywhere;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1260px; margin: 0 auto; padding: 0 24px; box-sizing:content-box; }
.section { padding: 92px 0; }
.pale { background: var(--pale); }

.site-header {
  height: 82px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
}
.site-header .container {
  width: 100%;
  display: grid;
  grid-template-columns: 440px 1fr 170px;
  padding: 0;
}
.brand { 
  /* padding: 28px 0 0 92px;  */
  display: inline-block;
  height: 84px;
  align-content:center;
}
.brand img { width: 200px; }
.global-nav {
  height: 84px;
  border-bottom: 3px solid #19768b;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 18px;
  font-weight: 500;
}
.header-contact {
  height: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}
.mail-icon {
  width: 64px;
  height: 40px;
  margin-bottom: 14px;
  border: 3px solid #fff;
  border-radius: 5px;
  position: relative;
}
.mail-icon::before,
.mail-icon::after {
  content: "";
  position: absolute;
  top: 11px;
  width: 38px;
  height: 3px;
  background: #fff;
}
.mail-icon::before { left: 2px; transform: rotate(32deg); }
.mail-icon::after { right: 2px; transform: rotate(-32deg); }

.hero {
  min-height: 700px;
  position: relative;
  /* overflow: hidden; */
}
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 29px;
  height: 120%;
  background: var(--cyan);
  z-index: 30;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.95) 42%, rgba(255,255,255,.42) 72%, rgba(255,255,255,.1) 100%);
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 122px;
  padding-left: 88px;
}
.hero-logo { width: 520px; }
.hero-label {
  display: inline-block;
  margin: 28px 0 30px;
  padding: 10px 22px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 35px;
  line-height: 1.25;
}
.hero-copy {
  padding-left: 35px;
  border-left: 10px solid var(--cyan);
  color: #555;
}
.hero-copy p { margin: 0 0 20px; font-size: 28px; }
.hero-copy ul { list-style: none; margin: 0; padding-left: 12px; font-size: 18px; }
.hero-copy li::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 24px;
  margin-right: 14px;
  border: solid var(--navy);
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
  vertical-align: -2px;
}
.cta-row {
  display: flex;
  justify-content: center;
  gap: 120px;
  margin-top: 56px;
}
.cta-button {
  width: 360px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 6px 6px 0 rgba(0,0,0,.35);
  color: #fff;
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

.under-title {
  margin: 0 0 44px;
  padding-bottom: 10px;
  border-bottom: 3px solid #d6d6d6;
  color: var(--navy);
  font-size: 34px;
  line-height: 1.3;
}
.under-title::after {
  content: "";
  display: block;
  width: 100px;
  height: 6px;
  margin-top: 10px;
  background: var(--cyan);
}
.value { padding-bottom: 160px; }
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.top-card {
  min-height: 550px;
  padding: 48px 26px 34px;
  border: 1px solid #ddd;
  border-top: 8px solid var(--cyan);
  box-shadow: 0 4px 4px #bbb;
  text-align: center;
}
.top-card.navy { border-top-color: var(--navy); }
.top-card img { width: 96px; margin: 0 auto 32px; }
.top-card h3 {
  margin: 0 0 42px;
  color: var(--navy);
  font-size: 30px;
  line-height: 1.55;
}
.top-card h3::after {
  content: "";
  display: block;
  width: 62px;
  height: 4px;
  margin: 10px auto 0;
  background: #d6d6d6;
}
.top-card p { margin: 0 0 24px; text-align: center; font-size: 18px; }

.bar-title {
  margin: 0 0 40px;
  padding-left: 30px;
  border-left: 10px solid var(--cyan);
  color: var(--navy);
  font-size: 42px;
  line-height: 1.35;
}
.bar-title small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 17px;
  letter-spacing: 0;
}
.challenge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
}
.challenge-grid article {
  min-height: 200px;
  position: relative;
  overflow: hidden;
  padding: 26px 28px 20px;
  border-left: 10px solid var(--cyan);
  background-color: white;
  background-image: var(--bg);
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  box-shadow: var(--shadow);
  line-height: 1.5;
}
.challenge-grid article .midashi {
  padding-left: 50px;
}
.challenge-grid article::after {
  content: counter(challenge, decimal-leading-zero);
  counter-increment: challenge;
  position: absolute;
  top: 10px;
  right: 20px;
  color: #fff;
  font-size: 70px;
  line-height: 1;
  text-shadow: 0 0 4px #777;
}
.challenge-grid { counter-reset: challenge; }
.challenge-grid img { position: absolute; left: 24px; top: 42px; width: 42px; }
.challenge-grid span { color: var(--cyan); font-size: 18px; }
.challenge-grid h3 { margin: 0; color: var(--navy); font-size: 24px; }
.challenge-grid p { margin: 24px 0 0; color: #555; font-size: 18px; text-shadow: 1px 1px 0px white; }

.reason { overflow: hidden; }
.reason-grid {
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
}
.circle-figure { position: relative; }
.circle-figure::before {
  content: "";
  position: absolute;
  left: -280px;
  top: -64px;
  width: 820px;
  height: 790px;
  background-image: url('img/bg-deco1.png');
  background-size: cover;
  z-index: -1;
}
.circle-figure img { width: 400px; }
.quote {
  position: relative;
  margin: 0 0 34px;
  padding: 60px 12px;
  background: var(--navy);
  color: #fff;
  font-size: 30px;
  text-align: center;
}
.quote::before {
  content: "";
  color: var(--cyan);
  background-image: url('img/deco2.png');
  background-size: cover;
  position: absolute;
  top: 12px;
  left: 24px;
  width: 44px;
  height: 44px;
}
.solution-card {
  padding: 0 60px 46px;
  border: 3px solid #d5d5d5;
  border-radius: 9px;
  background: #fff;
  text-align: center;
}
.solution-card > img:first-child { width: 180px; margin: -26px 0 42px; }
.solution-card h3 { margin: 40px 0; font-size: 24px; line-height: 1.4; }
.solution-card > img:last-child { width: 520px; margin: 28px auto 0; }

.about { padding-top: 100px; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 48px;
  position: relative;
}
.process-grid article {
  padding: 22px 10px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 8px #aaa;
  text-align: center;
  position: relative;
  z-index: 1;
}
.process-grid:before , .flow-grid::before {
  content: "";
  position: absolute;
  top: 120px;
  left: 50%;
  transform:translateX(-50%);
  width: 100vw;
  /* left: -100px;
  right: -100px; */
  height: 3px;
  background: #ccc;
  z-index: 0;
}
.process-grid article.active { background: var(--navy); color: #fff; }
.process-grid img { width: 62px; height: 62px; object-fit: contain; margin: 0 auto 14px; }
.process-grid h3 { margin: 0 0 12px; font-size: 20px; }
.process-grid p { margin: 0; color: var(--muted); font-size: 17px; }
.process-grid .active p { color: #a8ffff; }
.center-title { margin: 0 0 16px; color: var(--navy); text-align: center; font-size: 32px; }
.center-text { max-width: 760px; margin: 0 auto; color: #555; text-align: center; font-size: 17px; }

.merit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px 38px;
}
.merit-grid article {
  min-height: 310px;
  display: grid;
  grid-template-columns: 80% 20%;
  position: relative;
  border-left: 8px solid var(--cyan);
  box-shadow: var(--shadow);
  background-image: var(--bg);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: bottom right;
}
.merit-grid article:first-child , .merit-grid article:last-child { border-left-color: var(--navy); }
.merit-grid article > div { padding: 12px 32px; }
.merit-grid h3 { margin: 0 0 18px; color: var(--navy); font-size: 32px; line-height: 1.35; }
.merit-grid p { margin: 0; font-size: 17px; }
.merit-grid article > div img { width: 86px; margin: 35px auto 0; }
.merit-grid article > img { width: 100%; height: 100%; object-fit: cover; align-self: end; }
.merit-grid b { position: absolute; top: 16px; right: 22px; color: #e8ebf8; font-size: 80px; line-height: 1; }

.split {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 60px;
  align-items: start;
}
.blue-panel {
  margin-bottom: 50px;
  padding: 48px 36px;
  border-radius: 4px;
  background: #e9ebf8;
}
.blue-panel p {
  color: var(--navy);
  text-align: center;
  font-size: 32px;
  line-height: 1.7;
  margin: 0 0 24px;
}
.blue-panel span {
  font-size: 18px;
  color: black;
}
.strong-list { list-style: none; margin: 0; padding: 0; }
.strong-list li {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 38px;
  margin-bottom: 20px;
  padding: 16px 38px;
  border: 1px solid #aaa;
  background: #fff;
  box-shadow: var(--shadow);
  color: #555;
  font-size: 24px;
  border-radius: 0 16px 16px 0;
}
.strong-list img { width: 54px; flex: 0 0 auto; }
.compare-card { position: relative; overflow-x: auto; }
.best {
  position: absolute;
  left: 38%;
  top: -18px;
  z-index: 1;
  padding: 4px 14px;
  border-radius: 6px;
  background: var(--navy);
  color: #fff;
}
.compare-card table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  text-align: center;
  background: #fff;
}
.compare-card th { height: 170px; font-size: 24px; }
.compare-card th:nth-child(2) { background: var(--cyan); color: #fff; }
.compare-card td {
  height: 150px;
  border-top: 1px solid #ccc;
  color: var(--navy);
  font-size: 18px;
}
.compare-card td:nth-child(2) {
  background: #e8fbfb;
  border-left: 4px solid var(--cyan);
  border-right: 4px solid var(--cyan);
  color: var(--cyan);
  font-size: 42px;
}
.compare-card small { display: block; color: #aaa; font-size: 16px; }

.flow-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  position: relative;
  margin-top: 88px;
  text-align: center;
}
.flow-grid article {
  position: relative;
  z-index: 1;
}
.flow-grid::before {
  top: 55px;
}
.flow-grid img { width: 112px; margin: 0 auto 30px; }
.flow-grid h3 { margin: 0; color: var(--navy); font-size: 30px; }
.flow-grid h3::after { content: ""; display: block; width: 50px; height: 5px; margin: 10px auto 30px; background: var(--cyan); }
.flow-grid p { color: #555; font-size: 16px; }
.support-box {
  width: 86%;
  margin: 70px auto;
  padding: 34px;
  display: grid;
  grid-template-columns: 90px 1fr 80px;
  align-items: center;
  gap: 28px;
  border: 1px solid #aaa;
  border-radius: 8px;
  background: #eefcfc;
  box-shadow: var(--shadow);
}
.support-box h3 { margin: 0; color: var(--navy); font-size: 30px; }
.support-box p { margin: 8px 0 0; color: #555; }

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 36px;
}
.scenario-grid article {
  min-height: 260px;
  position: relative;
  padding: 40px 34px;
  border: 1px solid #ddd;
  border-top: 8px solid var(--cyan);
  background: #fff;
  box-shadow: var(--shadow);
  border-radius:0 0 16px 16px;
}
.scenario-grid article:nth-child(1),
.scenario-grid article:nth-child(2) { grid-column: span 3; }
.scenario-grid article:nth-child(n+3) { grid-column: span 2; }
.scenario-grid article:nth-child(n+3) h3 { font-size:24px; margin: 24px 0; }
.scenario-grid article:nth-child(n+3) span {
  background-color: #eaeaea;
  color: #555555;
  margin: 24px 0;
}
.scenario-grid article:nth-child(2),
.scenario-grid article:nth-child(4) { border-top-color: var(--navy); }
.scenario-grid article > img:first-child { width: 72px; float: left; margin-right: 28px; }
.scenario-grid span { display: inline-block; padding: 0 22px; border-radius: 16px; background: var(--cyan); color: #fff; }
.scenario-grid h3 { margin: 8px 0 28px; color: var(--navy); font-size: 32px; line-height: 1.35; }
.scenario-grid p { clear: both; margin: 0; color: #555; font-size: 17px; }
.ghost { position: absolute; right: 30px; top: 30px; height: 56px; }

.wide { grid-template-columns: .9fr 1.1fr; }
.effect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.effect-grid article {
  min-height: 280px;
  padding: 32px;
  border-top: 8px solid var(--cyan);
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 0 0 16px 16px;
}
.effect-grid article:nth-child(even) { border-top-color: var(--navy); }
.effect-grid img { width: 64px; }
.effect-grid h3 { margin: 26px 0 16px; color: var(--navy); font-size: 26px; line-height: 1.35; }
.effect-grid p { margin: 0; }
.dashboard { padding: 32px; background: #FAFAFA; box-shadow: var(--shadow); }
.dashboard h3 { margin: 0 0 24px; padding-bottom: 18px; border-bottom: 2px solid #ccc; font-size: 24px; }
.dashboard h3 img { width: 34px; display: inline-block; margin-right: 18px; vertical-align: middle; }
.dashboard h3 span { float: right; padding: 0 14px; border-radius: 15px; background: #dff6f6; color: var(--cyan); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stats b { padding: 10px; border: 1px solid #ccc; border-radius: 8px; box-shadow: var(--shadow); }
.stats em { display: block; color: var(--navy); font-size: 30px; font-style: normal; line-height: 1.2; }
.stats em:last-child {
  font-size: 18px;
  color: #13BA83;
}
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
/* .chart-grid img { border: 1px solid #ccc; padding: 8px; background: #fff; } */

.monitor,
.scenario-timeline,
.roi { position: relative; overflow: hidden; background: var(--gray); }
.split-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(90deg, var(--navy) 0 62%, var(--cyan) 62%);
}
.monitor::before,
.scenario-timeline::before,
.roi::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(217, 247, 247, .65);
}
.monitor::before { width: 700px; height: 700px; left: -180px; bottom: 100px; }
.scenario-timeline::before { width: 760px; height: 760px; left: 70px; top: 180px; background: rgba(232,234,242,.8); }
.roi::before { width: 650px; height: 650px; right: 70px; top: -90px; }
.monitor .container,
.scenario-timeline .container,
.roi .container { position: relative; z-index: 1; }
.monitor { padding-top: 140px; }
.limited {
  width: max-content;
  margin: 0 auto 30px;
  padding: 4px 24px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 20px;
}
.big-title { margin: 0 0 34px; text-align: center; font-size: 44px; line-height: 1.35; }
.monitor-lead {
  width: min(800px, 100%);
  margin: 0 auto 90px;
  padding: 28px 76px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  font-size: 24px;
  line-height: 1.45;
}
.monitor-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 25px; }
.monitor-card { position: relative; padding: 34px; border: 1px solid #ccc; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.monitor-card h3 { margin: 0 0 36px; font-size: 28px; line-height: 1.35; }
.monitor-card h3 img { width: 44px; display: inline-block; margin-right: 18px; vertical-align: middle; }
.monitor-card p {
  background-color: #f3f4f8;
  border: 1px solid #D9D9D9;
  border-radius:8px;
  text-align: center;
  padding: 12px;
  align-content:center;
}
.monitor-card p img {
   display: inline; 
   width: 24px; 
   vertical-align:middle;
}
.timeline { width: 100%; height: 130px; object-fit: contain; margin: 56px 0; }
.free-badge { position: absolute; right: -10px; top: -60px; width: 150px; }
.benefit {
  padding: 0;
}
.benefit .inner {
  padding: 34px 34px 0 34px;
}
.benefit h3 {
  font-size: 36px;
  border-left: 6px solid #D9D9D9;
  padding-left: 12px;
}
.benefit strong { color: var(--navy); font-size: 36px; }
.tokuten-box {
  display: flex;
  margin-bottom: 24px;
}
.tokuten-box img {
  width: 40px;
  margin-right: 16px;
}
.tokuten-box h4 {
  font-size: 22px;
  margin: 0;
}
.tokuten-box p {
  background-color: inherit;
  border:0;
  text-align: left;
  padding: 0 0 0 24px;
  margin: 4px 0 0 0;
}
.benefit > p {
  text-align: left;
  border-radius:0;
  margin-bottom: 0;
  padding: 18px 32px;
}
.pill-row { display: flex; justify-content: center; gap: 70px; flex-wrap: wrap; margin-top: 70px; }
.pill-row span { padding: 12px 34px; border-radius: 30px; background: #fff; box-shadow: var(--shadow); align-content: center; }
.pill-row img { width: 28px; display: inline-block; margin-right: 10px; vertical-align: middle; }

.timeline-layout {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  gap: 24px;
}
.repeat-title { margin-top: 90px; }
.days {position: relative;}
.days::before {
  content:"";
  border-left:6px solid #D9D9D9;
  display: block;
  height: 64%;
  position: absolute;
  top: 50%;
  transform:translateY(-50%);
  left: 10%;
}
.days article {
  position: relative;
  margin: 0 0 34px 190px;
  padding: 24px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}
.days span {
  position: absolute;
  top: 32px;
  right: 20px;
  border-radius:30px;
  background-color: #E8EAF6;
  padding: 0 12px;
}
.days b {
  position: absolute;
  left: -180px;
  top: 35px;
  width: 130px;
  height: 130px;
  /* display: grid;
  place-items: center; */
  border: 6px solid #fff;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px #b6eff0;
  color: #fff;
  line-height: 1;
  display: flex;
  justify-content:center;;
  align-items:center;
}
.days b span {
  position: static;
  background-color: initial;
  font-size: 18px;
  padding: 0;
}
.days b span span {
  font-size: 48px;
}
.days h3 { margin: 0 0 30px; color: var(--navy); font-size: 28px; line-height: 1.35; }
.days li { margin: 10px 0; color: #555; font-size: 17px; list-style:none; position: relative; }
.days li:before {
  content:"";
  background-image: url('img/deco1.png');
  background-size: cover;
  width: 24px;
  height: 20px;
  position: absolute;
  top: 6px;
  left: -32px;
}
.side-notes article {
  margin-bottom: 34px;
  padding: 28px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}
.side-notes h3 { margin: 0 0 12px; font-size: 28px; line-height: 1.35; padding-bottom:12px;border-bottom:2px solid #D9D9D9; }
.side-notes h3 span { font-size:18px; }
.side-notes h3 img { width: 48px; display: inline-block; margin-right: 18px; vertical-align: middle; }
.side-notes p { margin: 10px 0; font-size: 25px; line-height: 1.35; }
.side-notes .pink h3 { color: #e84c9a; }
.side-notes .pink p::before { content: "▶"; color: #e84c9a; margin-right: 10px; }
.side-list {
  display: flex;
  align-items:center;
}
.side-list img {
  width: 56px;
  margin-right: 16px;
}
.side-list h4 {
  font-size: 22px;
  margin: 0;
}
.side-list p {
  font-size: 18px;
  margin: 4px 0;
  color: #999999;
}
.pink h3 { font-size: 24px; }
.pink p { font-size: 16px; }
.side-notes article.info {
  padding: 16px 24px;
}
.info img {
  width: 24px;
  margin-right: 24px;
}
.info p {
  font-size: 16px;
  line-height:1.6;
  color: black;
}

.roi-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 30px;
}
.roi-grid article {
  padding: 34px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.roi-grid h3 { margin: 0 0 20px; font-size: 28px; color: #555; border-bottom:2px solid #D9D9D9; padding-bottom: 12px; }
.roi-grid h3 img { width: 34px; display: inline-block; margin-right: 16px; vertical-align: middle; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mini-grid span { padding: 18px; border: 1px solid #ccc; border-radius: 8px; background: #f1ffff; text-align: left; box-shadow: var(--shadow); }
.mini-grid span small { font-size: 16px; font-weight: normal; padding-left: 24px; }
.price-num { text-align: center; }
.price-num strong { color: var(--cyan); font-size: 58px; }
.price-num strong span {
  color: black;
  font-size: 24px;
}
.promise { grid-column: 2; border-left: 8px solid var(--cyan) !important; background: #dff6f6 !important; }
.roi-grid p {
  margin-bottom: 0;
}
.roi-left article:first-child h3 {
  color: #D97706;
  border-bottom:0;
}
.roi-left article:nth-of-type(3) p {
  font-size: 20px;
  font-weight: normal;
  padding-left: 40px;
}
.roi-right h4 {
  font-size: 20px;
  padding-bottom: 12px;
  border-bottom:2px solid #D9D9D9;
  margin: 32px 0 18px;
}
.roi-right li {
  list-style:none;
  margin-bottom: 12px;
}
.roi-right li::before {
    content: "▶";
    color: #555555;
    margin-right: 10px;
}
.roi-right article > span {
  display: block;
  font-weight: normal;
  text-align: right;
}
.roi-right article:first-child {
  padding-bottom: 12px;
}
.roi-right article:nth-of-type(2) img {
  width: 64px;
}
.roi-right article:nth-of-type(2) h3 {
  border-bottom:0;
  padding: 0;
}
.roi-right article:nth-of-type(2) p {
  font-size: 22px;
  font-weight: normal;
}

.faq { background: #fff; }
.faq-body {
  width: min(1080px, calc(100% - 240px));
  margin: 0 auto;
  padding: 70px 88px;
  border: 3px solid var(--navy);
}
.faq h2 { margin: 0; text-align: center; font-size: 44px; }
.faq-lines {
  width: 600px;
  max-width: 80%;
  height: 6px;
  margin: 20px auto 40px;
  background: var(--cyan);
}
.faq-lines:nth-of-type(2) {
  width: 400px;
  height: 4px;
}
.faq h3 { margin: 70px 0 36px; color: var(--navy); text-align: center; font-size: 26px; }
.faq-box { margin-bottom: 20px; border-radius: 7px; background: #f5f6fb; }
.faq-box .flex { display: flex; align-items:center;gap:24px; position: relative; }
.faq :is(.q-box,.a-box) { padding: 22px 36px; list-style: none; cursor: pointer; }
.faq :is(.q-box,.a-box)::-webkit-details-marker { display: none; }
.faq details p { margin: 0; padding: 24px 36px 30px; border-top: 1px solid #fff; }
.faq-box .flex h4 { width: 80%; }
.arrow-wrapper {
  position: absolute;
  right: 40px;
  .arrow {
    border-top: 0;
    border-left: 0;
    border-right: 3px solid #1C2379;
    border-bottom: 3px solid #1C2379;
    width: 20px;
    height: 20px;
    transform:translateY(-20%)rotate(45deg);
  }
}
.q-box.on {
  border-radius:12px 12px 0 0;
  .arrow {
    transform:translateY(20%)rotate(-135deg);
  }
}

.contact-section { background: var(--teal); color: #fff; }
.contact-section h2 { margin: 0 0 42px; text-align: center; font-size: 44px; }
.contact-section form { width: min(760px, 100%); margin: 0 auto; }
.contact-section label,
.contact-section legend { display: block; margin-bottom: 24px; font-size: 22px; }
.contact-section b,
.address-row b { padding: 0 6px; margin-left: 8px; background: var(--red); color: #fff; }
.contact-section em { padding: 0 6px; margin-left: 8px; background: #999; color: #fff; font-style: normal; }
.contact-section input,
.contact-section select,
.contact-section textarea {
  width: 100%;
  height: 52px;
  margin-top: 8px;
  padding: 8px 18px;
  border: 0;
  border-radius: 8px;
  box-shadow: 4px 5px 0 #0e4652;
  font: inherit;
  background: #fff;
}
.contact-section textarea { height: 150px; resize: vertical; }
.address-row {
  display: flex;
  align-items: end;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 22px;
}
.address-row span { width: 140px; }
.address-row label { width: 170px; margin: 0; }
.address-row input { width: 110px; }
.address-row button {
  padding: 6px 10px;
  border: 0;
  background: var(--red);
  color: #fff;
  font: inherit;
}
.inline-label {
  display: grid !important;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 18px;
}
.inline-label input,
.inline-label select { margin: 0; }
.contact-section fieldset { margin: 0 0 24px; padding: 0; border: 0; font-size: 22px; }
.contact-section fieldset label { display: inline-block; margin-right: 70px; font-size: 20px; }
.contact-section input[type="checkbox"] {
  width: 26px;
  height: 26px;
  margin: 0 10px 0 0;
  box-shadow: none;
  vertical-align: middle;
}
.submit-button {
  width: 260px;
  height: 58px;
  display: block;
  margin: 60px auto 0;
  border: 0;
  border-radius: 16px;
  background: var(--red);
  box-shadow: 4px 5px 0 #0e4652;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
}

.contact-info {
  position: relative;
}
.contact-info::before {
  content:"";
  width: 38%;
  height: 100%;
  background-color: #FAFAFA;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  box-shadow: inset 2px 0 2px #D9D9D9;
}
.contact-info .split {
  grid-template-columns: 55% 1fr;
}
.contact-info h2 { margin: 0; color: var(--navy); font-size: 42px; line-height: 1.3; }
.badge { color: #999999; }
.badge span { display: inline-block; margin: 0 10px 16px 0; padding: 0 10px; border-radius: 12px; background: var(--cyan); color: #fff; }
.lead { margin: 90px 0 80px; color: #555; font-size: 25px; }
.large-link,
.download-link {
  display: grid;
  grid-template-columns: 90px 1fr 80px;
  align-items: center;
  padding: 20px 36px;
  margin-bottom: 30px;
  border-radius: 0 24px 24px 0;
  font-size: 30px;
}
.large-link p,
.download-link p {
  margin: 0;
}
.large-link { border-left: 10px solid var(--cyan); background: var(--navy); color: #fff; }
.download-link { border: 1px solid #ccc; background: #fff; color: var(--navy); }
.large-link small,
.download-link small { display: block; color: #ddd; font-size: 16px; }
.download-link small { color: #999; }
.large-link img:first-child,
.download-link img:first-child { width: 62px; }
.tel-card { padding: 20px; border: 1px solid #ccc; border-top: 8px solid var(--navy); text-align: center; border-radius:0 0 24px 24px; background-color: white; }
.tel-card h3 { color: #999; margin-top: 0; }
.tel-card p { margin: 20px 0 0; color: var(--navy); font-size: 40px; line-height: 1.2; }
.tel-card a { display: block; margin-top: 45px; color: var(--cyan); font-size: 28px; }

.footer { background: #fff; position: relative; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 80px;
  padding: 90px 0;
}
.footer nav { display: flex; flex-direction:column; gap: 24px; font-weight: 400; }
.footer-logo { width: 320px; margin: 0 auto 50px; }
.banners { display: flex; gap: 25px; }
.banners span { width: 210px; height: 80px; display: grid; place-items: center; background: #ddd; }
.copyright { padding: 38px 28px; border-top: 1px solid #eee; color: #555; font-weight: 400; }
.copyright a { float: right; }

#contact .container {
	max-width:880px;
}
.form-preview-dl > dt span {
	background-color: #EC5048;
}

#page-top {
	display:none;
	position: fixed;
	right: 24px;
	bottom:6%;
	z-index: 9;
	width: 56px;
	height: 56px;
	border-radius:50%;
	border:2px solid var(--cyan);
	background-color: var(--cyan);
	cursor:pointer;
}
#page-top::before {
	content:"";
	position: absolute;
	top: 56%;
	left: 50%;
	transform:translate(-50%,-50%)rotate(-45deg);
	border-top: 3px solid white;
	border-right: 3px solid white;
	border-left: 0;
	border-bottom: 0;
	width: 18px;
	height: 18px;
	transition-duration:0.5s;
}
#page-top a:hover {
	opacity:0.8;
}
.sp-on {
  display: none;
}


/* 下層ページ */
.page {
	padding-top: var(--space3);
}
.page .inner {
	max-width:1000px;
	margin: 0 auto;
}
.page section {
	margin-bottom: var(--space3);
}
.page :is(h1,h2) {
	text-align: center;
	position: relative;
	&::before {
		content: "";
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 400px;
		border-bottom: 4px solid var(--base);
		bottom: -20px;
	}
}
.page h1 {
	font-size: 3.2rem;
	margin-bottom: var(--space3);
}
.page h2 {
	font-size: 2.4rem;
	margin-bottom: 48px;
}
.page p {
	margin-bottom: var(--space1);
	line-height:1.5;
}
.page ul {
	margin: var(--space2) 0;
	padding: 0 var(--space2);
}
.page li {
	margin-bottom: var(--space1);
	line-height:1.5;
	list-style:auto;
}
.page .button {
	display: block;
	font-size: 4rem;
	font-weight: bold;
	color: white;
	text-align: center;
	padding: 12px;
	background-color: var(--cyan);
	border-radius:40px;
	box-shadow:4px 4px 0 rgba(0,0,0,0.5);
	max-width:320px;
	margin: 0 auto;
}

@media (max-width: 1100px) {
  .container { width: min(100% - 48px, 960px); }
  .site-header { grid-template-columns: 240px 1fr 140px; }
  .hero-inner { padding-left: 40px;padding-right: 0;padding-bottom: 40px; }
  .brand { padding-left: 24px; }
  .global-nav { font-size: 15px; }
  .cta-row { gap: 40px; }
  .cta-button { width: 300px; }
  .process-grid { grid-template-columns: repeat(4, 1fr); }
  .split,
  .wide,
  .timeline-layout,
  .roi-grid { grid-template-columns: 1fr; }
  .promise { grid-column: auto; }

  .site-header .container {
    grid-template-columns: 1fr 2fr 170px;
  }
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .value-grid .top-card:last-child {
    grid-column: 1 /3;
    width: 50%;
    margin: 0 auto;
  }
  .top-card h3 {
    font-size: 24px;
  }
  .top-card p {
    font-size: 20px;
  }
  .top-card p br {
    display: none;
  }
  .challenge-grid article {
    background-image: none;
  }
  .challenge-grid article::after {
    content:"";
  }
  .reason-grid {
    grid-template-columns: 100%;
  }
  .circle-figure img {
    margin: 0 auto 24px;
  }
  .process-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .process-grid article:nth-of-type(4){
    grid-column: 1 /4;
  }
  .process-grid:before, .flow-grid::before {
    content:none;
  }
  .merit-grid article {
    display: block;
  }
  .merit-grid b {
    display: none;
  }
  .flow-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .flow-grid img {
    margin-bottom: 0;
  }
  .scenario-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .scenario-grid article:nth-child(n+3) {
    grid-column: span 3;
  }
  .scenario-grid article:nth-child(n+3) h3 {
    font-size: revert-rule;
  }
  .scenario-grid article:nth-child(n+3) span {
    margin: 8px 0;
  }
  .monitor-grid {
    grid-template-columns: 1fr;
  }
  .timeline {
    margin: 0;
  }
  .pill-row {
    gap: 24px;
  }
  .pill-row span:first-child {
    margin: 0 20%;
  }
  .faq-body {
    width: 90%;
    padding: 6%;
  }
  .contact-info::before {
    content:none;
  }
  .contact-info .split {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer nav {
    text-align: center;
  }
  .footer-grid > div {
    grid-column: 1 /4;
  }
  .banners {
    justify-content:center;
  }
}

@media (max-width: 760px) {
  .sp-on {
    display: block;
  }
  .sp-off {
    display: none;
  }

  .container { width: calc(100% - 32px); padding: 0; }
  .section { padding: 64px 0; }
  .site-header {  height: auto; grid-template-columns: 1fr 104px; }
  .brand { padding: 16px; height: auto; }
  .brand img { width: 150px; }
  .header-contact { height: auto; font-size: 13px; }
  .mail-icon { width: 42px; height: 28px; margin-bottom: 6px; }
  .mail-icon::before,
  .mail-icon::after { width: 25px; top: 8px; }
  .hero { min-height: auto; }
  .hero-inner { padding: 64px 16px 70px; overflow: hidden; }
  .hero-logo { width: min(330px, 100%); }
  .hero-label { display: block; width: auto; max-width: 100%; font-size: 22px; white-space: normal; }
  .hero-copy p { font-size: 18px; }
  .hero-copy ul { font-size: 14px; }
  .cta-row { flex-direction: column; align-items: center; gap: 22px; }
  .cta-button { width: min(280px, 100%); height: 66px; font-size: 28px; }
  .hero-copy { padding-left: 18px; }
  .top-card { min-height: auto; padding: 48px 24px 34px; }
  .top-card h3 { font-size: 25px; }
  .bar-title { font-size: 30px; padding-left: 18px; }
  .under-title { font-size: 28px; }
  .value-grid,
  .challenge-grid,
  .process-grid,
  .merit-grid,
  .flow-grid,
  .scenario-grid,
  .effect-grid,
  .monitor-grid,
  .stats,
  .chart-grid,
  .footer-grid { grid-template-columns: 1fr; }
  .scenario-grid article,
  .scenario-grid article:nth-child(n) { grid-column: auto; }
  .merit-grid article { grid-template-columns: 1fr; min-height:auto; background-image: none; }
  .flow-grid { margin-top: 40px; }
  .flow-grid::before { display: none; }
  .support-box { width: 100%; grid-template-columns: 58px 1fr; }
  .support-box img:last-child { display: none; }
  .monitor-lead { padding: 22px; font-size: 18px; }
  .big-title { font-size: 32px; }
  .free-badge { width: 100px; margin-left: auto; }
  .days article { margin-left: 0; }
  .days b { position: static; width: 96px; height: 96px; margin-bottom: 18px; font-size: 30px; }
  .side-notes p { font-size: 20px; }
  .faq-box { padding: 40px 20px; }
  .faq h2 { font-size: 34px; }
  .contact-section form { width: 100%; }
  .address-row { display: block; }
  .address-row span,
  .address-row label,
  .address-row input { width: 100%; }
  .inline-label { grid-template-columns: 1fr !important; }
  .large-link,
  .download-link { grid-template-columns: 54px 1fr 44px; padding: 20px; font-size: 22px; }
  .copyright a { float: none; display: block; margin-top: 16px; }


  .site-header .container {
    grid-template-columns: 1fr 1fr 20vw;
  }
  
	.hamburger {
		width: 20vw;
    aspect-ratio:1/1;
		align-content:center;
		position: relative;
		z-index: 20;
		.ham-inner {
			width: 70%;
			height: 70%;
			margin: auto;
			background-color: #F5F5F5;
			position: relative;
			cursor: pointer;
		}
		img {
			width: 70%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform:translate(-50%,-50%);
			transition-duration:.5s;
		}
		img:nth-of-type(1){
			top: 32%;
		}
		img:nth-of-type(3){
			top: 68%;
		}
	}
  .hamburger.active img:nth-of-type(1) {
		top: 45%;
    left: 15%;
    transform: rotate(45deg);
  }
  .hamburger.active img:nth-of-type(2) {
		top: 45%;
    left: 15%;
    transform: rotate(-45deg);
  }
  .hamburger.active img:nth-of-type(3){
		top: 45%;
    left: 15%;
    transform: rotate(45deg);
  }
	.global-nav {
		position: fixed;
		top: -100vh;
		width: 100vw;
		height: 100vh;
		background-color: rgba(255,255,255,0.9);
		align-content:center;
		padding: 0;
		flex-direction:column;
		justify-content:center;
		z-index: 10;
		transition-duration:.5s;
		a {
      margin: 8px 0;
		}
	}
	.global-nav.active {
		top: 0;
	}

  .hero::before {
    content:none;
  }
  .value-grid .top-card:last-child {
    grid-column: auto;
    width: auto;
  }
  .top-card h3 br {
    display: none;
  }
  .top-card p {
    font-size: 14px;
  }
  .top-card img {
    width: 64px;
    margin: 0 auto 24px;
  }
  .circle-figure::before {
    content:none;
  }
  .quote {
    font-size: 24px;
  }
  .solution-card {
    padding: 0 24px 24px;
  }
  .solution-card h3 {
    font-size: 16px;
  }
  .process-grid article {
    grid-column: 1 /4;
  }
  .blue-panel {
    padding: 32px 18px;
  }
  .blue-panel p {
    font-size: 24px;
  }
  .flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .flow-grid p br {
    display: none;
  }
  .bar-title br {
    display: none;
  }
  .support-box {
    grid-template-columns: auto;
    gap:4px;
  }
  .support-box img {
    width: 40px;
  }
  .scenario-grid article > img:first-child {
    float:none;
    margin-bottom: 24px;
  }
  .dashboard {
    padding: 14px;
  }
  .timeline {
    margin: 0;
  }
  .tokuten-box p {
    padding: 0;
  }
  .pill-row span:first-child {
    margin: 0;
  }
  .days::before {
    content:none;
  }
  .days b span span {
    font-size: 32px;
  }
  .price-num strong {
    font-size: 36px;
  }
  .roi-right ul {
    padding-left: 0;
  }
  .roi-left article:nth-of-type(3) p {
    padding-left: 0;
  }
  .faq-lines {
    margin: 8px auto;
  }
  .faq :is(.q-box,.a-box) {
    padding: 0;
  }
  .faq-box .flex {
    flex-wrap:wrap;
    gap: 8px;
  }
  .faq-box .flex h4 {
    width: 100%;
    margin: 0;
  }
  .arrow-wrapper {
    right: 12px;
    top: 0;
  }
  .a-box {
    margin-top: 40px;
  }
  .a-box p {
    margin: 0;
  }
  .contact-info .lead {
    margin: 40px 0;
  }
  .large-link, .download-link {
    grid-template-columns: 54px 1fr;
    gap: 24px;
  }
  .large-link img:last-child, .download-link img:last-child {
    display: none;
  }
  .tel-card a {
    margin-top: 24px;
  }
  .footer .split-line {
    position: static;
    margin-bottom: 24px;
  }
  .footer-grid {
    gap: 0;
    grid-template-columns: 1fr 1fr;
  }
  .footer-logo {
    margin: 24px 0;
  }
}


@media print {
	header {
		position: absolute;
	}
}