:root{
  --bg:#f5faff;
  --pale:#e6f0fa;
  --text:#333;
  --brand:#1a4f7a;
  --blue:#186bcc;
  --deep:#104d94;
  --radius:20px;
  --shadow:0 4px 4px rgba(0,0,0,.18);
  --container:1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.container{
  width:min(var(--container), calc(100% - 48px));
  margin-inline:auto;
}

.pc-only{ display:none; }
.sp-only{ display:inline; }
@media (min-width: 900px){
  .pc-only{ display:inline; }
  .sp-only{ display:none; }
}

.text-center { text-align: center; }
.mt-8 { margin-top: 32px; }

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:#73b4e7;
}
.header__inner{
  padding: 16px 24px;
  display:flex;
  align-items:center;
  gap:16px;
}
@media (min-width:900px){
  .header__inner{ 
    padding: 24px; 
    gap: 40px;
  }
}
.logo img{
  width: 250px;
  height:auto;
}

.nav{
  display:none;
  margin-left:auto;
  gap:40px;
  align-items:center;
}
.nav a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight:700;
  font-size:12px;
  color: var(--text);
}
.nav a img {
  width: 32px;
  height: auto;
  filter: brightness(0) invert(1);
}
.header__cta{ display:none; }

.hamburger{
  margin-left:auto;
  width:40px;
  height:40px;
  border:0;
  background:transparent;
  display:grid;
  gap:6px;
  padding:8px;
  cursor:pointer;
}
.hamburger span{
  height:3px;
  background:#0c2f4a;
  border-radius:999px;
}
@media (min-width:900px){
  .hamburger{ display:none; }
  .nav{ display:flex; }
  .header__cta{ display:inline-flex; }
}

/* SP menu */
.sp-menu{
  background:#73b4e7;
  border-top:1px solid rgba(255,255,255,.35);
}
.sp-menu__inner{
  padding:16px 0 24px;
  display:grid;
  gap:12px;
}
.sp-menu__inner a{
  font-weight:700;
}
.sp-menu__inner .btn{ justify-content:center; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:18px 28px;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(90deg, var(--deep), #0066cc);
  border:5px solid var(--bg);
  box-shadow:var(--shadow);
  font-weight:700;
  justify-content:center;
}
.btn--large{ width:min(336px, 100%); }
.btn--small{
  padding:18px 40px;
  border-radius:20px;
  border:0;
  background:var(--deep);
}
.btn__icon{ width:25px; height:25px; }

.center{ display:flex; justify-content:center; margin-top:24px; }

/* Sections */
.section{
  padding:48px 0;
  background: #fff;
}
.section--pale{
  background:var(--pale);
}
.section--brand{
  background:var(--brand);
}
.section__title{
  margin:0 0 24px;
  text-align:center;
  color:var(--brand);
  font-weight:700;
  font-size:24px;
  padding-bottom:12px;
}
.section__title .title-wrap {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 8px;
}
.section__title .title-wrap::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#troubles .section__title .title-wrap::before { display: none; }
#features .section__title .title-wrap::before { background-image: url('../assets/img/title-feature.webp'); }
#trial .section__title .title-wrap::before { background-image: url('../assets/img/title-trial.webp'); width: 80px; height: 80px; margin-right: 12px; }
#pricing .section__title .title-wrap::before { background-image: url('../assets/img/title-pricing.webp'); }
#voice .section__title .title-wrap::before { background-image: url('../assets/img/title-voice.webp'); }
#faq .section__title .title-wrap::before { background-image: url('../assets/img/title-faq.webp'); }
#cta .section__title .title-wrap::before { display: none; }

@media (min-width:900px){
  .section{ padding:80px 0; }
  .section__title{ font-size:40px; }
  .section__title .title-wrap { border-bottom:3px solid var(--brand); }
}
.section__text{
  margin:0 auto 16px;
  max-width:920px;
  font-size:14px;
  line-height: 1.8;
}
@media (min-width:900px){
  .section__text{ font-size:20px; }
}

.accent{ color:var(--blue); }
.brand{ letter-spacing:.2px; }

/* Hero */
.hero{
  position:relative;
  padding:120px 0 56px;
  overflow:hidden;
  background:var(--bg);
}
@media (min-width:900px){
  .hero{ padding:220px 0 168px; }
}
.hero__bg{
  position:absolute;
  inset: 0;
  height: 100%;
  opacity:.55;
  background:
    radial-gradient(closest-side, rgba(16,77,148,.16), transparent 70%),
    url("../assets/img/hero-bg.webp") center/cover no-repeat;
  filter:saturate(1.05);
  pointer-events:none;
}
@media (min-width:900px){
  .hero__bg{ height: 100%; }
}
.hero__inner{ position:relative; display:grid; gap:16px; justify-items:center; }

.hero__title{
  margin:0 0 16px;
  text-align:center;
  color:var(--brand);
  font-weight:700;
  font-size:28px;
  background:rgba(255,255,255,0.4);
  padding:14px 16px;
  border-radius:12px;
  line-height: 1.4;
}
.grad{
  background:linear-gradient(90deg, var(--deep), var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero__lead{
  margin:0 0 24px;
  text-align:center;
  color:var(--brand);
  font-weight:700;
  font-size:16px;
  background:rgba(255,255,255,0.4);
  padding:12px 16px;
  border-radius:12px;
  line-height: 1.6;
}
.hero__cta {
  width: 100%;
}

@media (min-width:900px){
  .hero__title{ font-size:44px; text-align:center; padding:24px 32px; margin-bottom: 24px; width: max-content; max-width: 100%; }
  .hero__lead{ font-size:24px; text-align:center; padding:20px 32px; margin-bottom: 32px; width: max-content; max-width: 100%; }
}


/* Cards (Troubles) */
#troubles { background: #fff; }
.cards{
  display:grid;
  gap:16px;
  margin-top:24px;
}
.cards--3{
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .cards--3{
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
}
.card{
  background:var(--pale);
  padding:16px;
  border-radius: 16px;
}
.card img{
  width:100%;
  border-radius:8px;
  object-fit:cover;
  aspect-ratio: 352/328;
}
.card p{
  margin:16px 0 0;
  text-align:center;
  font-size:16px;
  font-weight: 700;
  color: var(--brand);
}
@media (min-width:900px){
  .card p{ font-size:20px; text-align:left; }
}

/* Solution section */
.center-text { text-align: center; }
.solution__title {
  color: #fff;
  font-size: 24px;
  margin: 0 0 24px;
  line-height: 1.4;
}
.solution__title .yellow {
  color: #fbbf24;
}
.solution__text {
  margin: 0 auto;
  max-width: 920px;
  font-size: 14px;
  line-height: 1.8;
  color: #fff;
  font-weight: 700;
}
@media (min-width:900px){
  .solution__title { font-size: 44px; }
  .solution__text { font-size: 20px; }
}

/* Feature list */
.features{
  list-style:none;
  padding:0;
  margin:40px 0 0;
  display:grid;
  gap:32px;
}
.feature{
  display:grid;
  gap:16px;
  align-items:center;
  background:transparent;
}
.feature h3{
  margin:0 0 12px;
  color:var(--brand);
  font-size:18px;
}
.feature p{ margin:0; font-size:14px; line-height: 1.6;}
@media (min-width:900px){
  .feature{
    grid-template-columns: 320px 1fr;
    gap:40px;
    align-items:center;
    background: var(--bg);
    padding: 24px;
    border-radius: 20px;
  }
  .feature img {
    width: 320px;
    height: auto;
  }
  .feature h3{ font-size:28px; }
  .feature p{ font-size:20px; }
}
.feature img{
  width:100%;
  max-width:320px;
  border-radius:16px;
  justify-self:center;
}

/* Steps */
.steps{
  margin-top:40px;
  display:grid;
  gap:16px;
}
@media (min-width:900px){
  .steps{
    grid-template-columns:repeat(2, 1fr);
    gap:32px;
  }
}
.step{
  position:relative;
  background:#fff;
  border-radius: 16px;
  padding:20px;
  min-height:220px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.step img{
  width:100%;
  border-radius:10px;
  object-fit:cover;
  aspect-ratio: 312/232;
}
.step h3{
  margin:14px 0 0;
  color:var(--brand);
  font-weight: 700;
  font-size:16px;
  text-align:center;
}
@media (min-width:900px){
  .step{ min-height:380px; padding: 32px;}
  .step h3{ font-size:24px; text-align:left; }
}
.step__no{
  position:absolute;
  top:12px;
  left:16px;
  background: var(--brand);
  color: #fff;
  font-weight:700;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
}

/* Pricing table */
.table-wrap{
  margin-top:32px;
  overflow:auto;
  border-radius:12px;
  background:#fff;
  border: 1px solid #ddd;
}
.pricing{
  border-collapse:collapse;
  min-width:760px;
  width:100%;
}
.pricing th,
.pricing td{
  border:1px solid #ddd;
  padding:16px 14px;
  text-align:center;
}
.pricing thead th{
  background:var(--brand);
  color:#fff;
  font-size: 18px;
}
.pricing tbody th{
  background:var(--pale);
  font-weight:700;
  color:var(--text);
  width: 25%;
}
.pricing tbody td {
  font-weight: 700;
  color: var(--brand);
}

.notes{
  margin:16px 0 0;
  padding-left:18px;
  font-size:12px;
}
@media (min-width:900px){
  .notes{ font-size:16px; margin-top: 24px;}
}

/* Voices */
.voices{
  margin-top:32px;
  display:grid;
  gap:16px;
}
.voice{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:16px;
  align-items:start;
  background:#fff;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.voice__avatar{
  width:80px;
  height:80px;
  border-radius:12px;
  object-fit:cover;
}
.voice__meta{
  margin:0;
  color:var(--text);
  font-weight:700;
  font-size:12px;
}
.voice h3{
  margin:6px 0 8px;
  color:var(--brand);
  font-size:16px;
  line-height: 1.4;
}
.voice p{ margin:0; font-size:14px; line-height: 1.6;}
@media (min-width:900px){
  .voice{
    grid-template-columns:160px 1fr;
    gap:32px;
    padding: 32px;
  }
  .voice__avatar{ width:160px; height:160px; border-radius:16px; }
  .voice__meta{ font-size:16px; }
  .voice h3{ font-size:24px; margin-top: 8px;}
  .voice p{ font-size:16px; }
}

/* FAQ */
.faq{ 
  margin-top:32px; 
  display:flex; 
  flex-direction:column; 
  gap:24px; 
}
.faq__item{
  background:transparent;
  box-shadow:none;
  border-radius:0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}
.faq__item summary{
  cursor:pointer;
  list-style:none;
  padding:14px 40px 14px 20px; /* 目印のための右余白 */
  background:#8de055; /* LINE風の緑 */
  font-weight:700;
  border-radius:20px;
  align-self: flex-end;
  max-width: 90%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  position: relative;
  color: #333;
  margin-right: 12px; /* 吹き出しのしっぽ用余白 */
}
.faq__item summary::-webkit-details-marker{ display:none; }

/* 質問の吹き出しのしっぽ（右側） */
.faq__item summary::before {
  content: "";
  position: absolute;
  top: 14px;
  right: -10px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #8de055;
}

/* クリックできる目印 (▼) */
.faq__item summary::after {
  content: "▼";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #555;
  transition: transform 0.3s;
}
.faq__item[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.faq__body{
  position: relative;
  padding:16px 20px;
  background:#ffffff; /* 白背景 */
  font-size:14px;
  border-radius:20px;
  align-self: flex-start;
  max-width: 90%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  line-height: 1.6;
  color: var(--text);
  margin-top: 0;
  margin-left: 12px; /* 吹き出しのしっぽ用余白 */
}

/* 回答の吹き出しのしっぽ（左側） */
.faq__body::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -10px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 14px solid #ffffff;
}

@media (min-width:900px){
  .faq__item summary{ font-size:16px; padding:16px 48px 16px 24px; max-width:80%; }
  .faq__body{ font-size:16px; padding:20px 24px; max-width:80%; }
}


/* Footer */
.footer{
  background:#73b4e7;
  padding:24px 0 32px;
}
.footer__inner{
  display:grid;
  justify-items:center;
  gap:12px;
}
.footer small{
  font-weight:700;
  font-size:12px;
  color: var(--brand);
}
@media (min-width:900px){
  .footer{ padding:32px 0 40px; }
  .footer small{ font-size:16px; }
}