/* TTC DX TYPE-B / service.css */

.service-intro{
  padding:clamp(60px,9vw,120px) 0;
  background:var(--c-white);
}
.service-intro__inner{
  max-width:880px;
  text-align:center;
  margin:0 auto;
}
.service-intro__lead{
  font-size:clamp(22px,3vw,34px);
  font-weight:700;
  color:var(--c-ink);
  line-height:1.5;
}
.service-intro__lead .blue{
  color:var(--c-primary-2);
}
.service-intro__body{
  margin-top:28px;
  color:var(--c-ink-sub);
  font-size:15px;
  line-height:2;
}
.service-menu{
  background:var(--c-blue-soft);
}
.menu__list{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.menu__card{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:48px;
  align-items:center;
  background:var(--c-white);
  border-radius:var(--radius-xl);
  padding:48px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.menu__card--reverse .menu__media{
  order:-1;
}
.menu__no{
  position:absolute;
  top:22px;
  right:28px;
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:74px;
  line-height:1;
  color:var(--c-blue-soft);
  letter-spacing:-.03em;
  pointer-events:none;
}
.menu__card--reverse .menu__no{
  right:auto;
  left:28px;
}
.menu__tag{
  display:inline-block;
  font-family:'Outfit',sans-serif;
  font-weight:700;
  color:var(--c-primary-2);
  background:var(--c-blue-tint);
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
  letter-spacing:.08em;
  margin-bottom:16px;
}
.menu__title{
  font-size:clamp(18px,2.3vw,26px);
  color:var(--c-ink);
  margin-bottom:24px;
  line-height:1.5;
}
.menu__hook{
  color:var(--c-primary);
  font-weight:700;
  font-size:15px;
  text-align:justify;
  margin-bottom:16px;
  background:var(--c-blue-tint);
  padding:14px 20px;
  border-radius:12px;
  border-left:3px solid var(--c-primary-2);
}
.menu__desc{
  color:var(--c-ink-sub);
  font-size:15px;
  line-height:2;
  text-align:justify;
}
.menu__desc strong{
  color:var(--c-primary-2);
}
.menu__price{
  margin-top:22px;
  display:inline-flex;
  align-items:baseline;
  gap:12px;
  background:linear-gradient(135deg,#F3F8FD,#E4EEF8);
  padding:14px 22px;
  border-radius:14px;
}
.menu__price .label{
  font-size:13px;
  color:var(--c-ink-sub);
  font-weight:700;
  letter-spacing:.04em;
}
.menu__price .amount{
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:28px;
  color:var(--c-primary);
  letter-spacing:-.01em;
}
.menu__note{
  margin-top:10px;
  font-size:12px;
  color:var(--c-ink-sub);
}
.menu__media{
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/3;
}
.menu__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* MENU01：画像を2枚に。縦並びで表示（.menu__media--stack のみに適用）。
   横並び（左右2枚）にしたい場合は flex-direction を row に変更。 */
.menu__media.menu__media--stack{
  aspect-ratio:auto;        /* 1枚用の 4/3 指定を解除 */
  overflow:visible;         /* 角丸は各画像側で付与するため */
  display:flex;
  flex-direction:column;
  gap:16px;
}
.menu__media.menu__media--stack img{
  height:auto;
  aspect-ratio:16/10;       /* 2枚それぞれの縦横比（任意で調整） */
  border-radius:var(--radius-lg);  /* 元の .menu__media と同じ角丸を各画像に付与 */
}
.menu__body .btn-link{
  margin-top:18px;
}
@media(max-width:820px){
  .service-intro__body{
    font-size: 14px;
    text-align:justify;
  }
  .menu__card{
    grid-template-columns:1fr;
    gap:16px;
    padding:28px;
  }
  .menu__card--reverse .menu__media{
    order:0;
    margin-bottom:16px;
  }
  .menu__no{
    /* スマホでは絶対配置をやめ通常フローに戻す（本文・画像との重なり/もぐり込みを解消）*/
    position:static;
    font-size:48px;
    color:var(--c-primary-3); /* 淡色だと埋もれるため視認できる青に変更 */
  }
  .menu__hook{
    font-size:14px;
  }
  .menu__desc{
    font-size:14px;
  }
  .menu__price{
    gap:8px;
    padding:8px 18px;
  }
  .menu__price .amount{
    font-size:22px;
  }
}

.service-grant{
  background:var(--c-white);
}
.grant__wrap{
  background:linear-gradient(135deg,#F3F8FD,#E4EEF8);
  border-radius:var(--radius-xl);
  padding:clamp(40px,6vw,68px);
  text-align:center;
  border-top:4px solid var(--c-primary-2);
}
.grant__wrap .section__heading{
  justify-content:center;
}
.grant__badge{
  display:inline-block;
  background:var(--c-primary);
  color:var(--c-white);
  padding:6px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  margin-bottom:18px;
}
.grant__wrap .section-label{
  justify-content:center;
  display:inline-flex;
  margin-top:6px;
}
.grant__wrap .en-display{
  margin-bottom:10px;
  color:var(--c-primary);
}
.grant__title{
  font-size:clamp(22px,3vw,30px);
  color:var(--c-ink);
  margin-bottom:14px;
  line-height:1.5;
}
.grant__sub{
  color:var(--c-primary-2);
  font-weight:700;
  font-size:18px;
  margin-bottom:20px;
}
.grant__desc{
  max-width:760px;
  margin:0 auto 28px;
  color:var(--c-ink-sub);
  font-size:15px;
  line-height:2;
  text-align:justify;
}
.grant__desc strong{
  color:var(--c-primary-2);
}
.grant__examples{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.grant__examples span{
  background:var(--c-white);
  color:var(--c-primary);
  border:1px solid var(--c-line);
  padding:8px 16px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
}
.service-flow{
  background:var(--c-blue-soft);
}
.flow__list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  counter-reset:none;
}
.flow__item{
  background:var(--c-white);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  box-shadow:var(--shadow-sm);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.flow__item::after{
  content:"→";
  position:absolute;
  right:-16px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  background:var(--c-primary-2);
  color:var(--c-white);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:13px;
  font-weight:700;
  z-index:2;
}
.flow__item:last-child::after{
  display:none;
}
.flow__no{
  font-family:'Outfit',sans-serif;
  font-weight:700;
  color:var(--c-primary-2);
  font-size:11px;
  letter-spacing:.14em;
  line-height:1.1;
}
.flow__no strong{
  font-weight:800;
  color:var(--c-primary);
  font-size:32px;
  letter-spacing:-.02em;
}
.flow__title{
  font-size:20px;
  color:var(--c-ink);
  line-height:1.5;
  margin-bottom:8px;
}
.flow__desc{
  color:var(--c-ink-sub);
  font-size:15px;
  line-height:1.95;
  text-align:justify;
}
@media(max-width:820px){
  .grant__sub{
    font-size:15px;
  }
  .grant__desc{
    font-size:14px;
  }
  .flow__list{
    grid-template-columns:1fr;
    gap:14px;
  }
  .grant__examples span{
    font-size:13px;
  }
  .flow__item{
    gap:8px;
  }
  .flow__title{
    font-size:20px;
  }
  .flow__desc{
    font-size:14px;
  }
}

/*------------------------------------
page-hero 背景画像（service ページ限定）
- service.css は header.php で is_page('service') の時のみ読み込まれるため、
  この上書きは当ページにのみ適用される（common.css の .page-hero::before を置換）。
- ※CSSファイルでは PHP（get_template_directory_uri 等）は使えないため、
  画像URLは service.css の位置（/assets/css/）からの相対パスで指定する。
  /assets/images/service/hero.jpg → ../images/service/hero.jpg
- 白いかぶせ（.page-hero::after）と文字（.page-hero > .container）は common.css 側のまま有効。
------------------------------------*/
.page-hero::before{
  background-image:
    url("../images/service/hero.webp"),
    linear-gradient(135deg,var(--c-placeholder-1),var(--c-placeholder-2));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}