@charset "UTF-8";
/* Figmaデザインの「Corporate Logo Rounded ver3」は商用フォントで読み込めないため、
   類似の丸みを帯びた印象のGoogle Fonts「M PLUS Rounded 1c」で代替する */
/* ふんわり・柔らかいトンマナに合わせたイージング。
   pop: 少しオーバーシュートして弾むような動き（ホバー・出現アニメーション用）
   soft: 滑らかで柔らかい標準の動き */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}
@media screen and (min-width: 768px) {
  html {
    scroll-padding-top: 191px;
  }
}

body {
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  color: #3b3939;
  font-size: 16px;
  line-height: 150%;
  font-weight: 500;
  letter-spacing: 1.6px;
  background-color: #fff;
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}
@media screen and (min-width: 768px) {
  body {
    scroll-padding-top: 191px;
  }
}

.inner {
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (min-width: 768px) {
  .inner {
    padding-right: 120px;
    padding-left: 120px;
  }
}

body.is-fixed {
  overflow: hidden;
  height: 100vh;
}

/* ===== 出現アニメーション（スクロールで要素がふんわり浮かび上がる） ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ===== ツバメの飛来アニメーション（ふわっと飛んできて所定位置に着地する） =====
   開始位置・回転・軌道の途中点はCSSカスタムプロパティ経由でJSから
   要素ごとにランダムな値を渡し、毎回違う方向・軌道で飛んでくるようにする */
@keyframes bird-fly-in {
  0% {
    opacity: 0;
    transform: translate(var(--fly-x, 60px), var(--fly-y, -50px)) rotate(var(--fly-rot, -14deg)) scale(var(--fly-scale, 0.75));
  }
  55% {
    opacity: 1;
    transform: translate(var(--fly-mid-x, 10px), var(--fly-mid-y, -18px)) rotate(var(--fly-mid-rot, 6deg)) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}
.bird-fly {
  animation: bird-fly-in 1.1s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

.bird-fly--reveal {
  opacity: 0;
}

.bird-fly--reveal.is-visible {
  animation: bird-fly-in 1.1s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .bird-fly,
  .bird-fly--reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 9999;
  --btn-accent: #80c46c;
}
.header.is-checked {
  background-color: #80c46c;
  transition: background-color 0.6s ease;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 85px;
  padding-right: 0;
  padding-left: 15px;
}
@media screen and (min-width: 768px) {
  .header-inner {
    box-sizing: border-box;
    height: 191px;
    max-width: 1200px;
    padding: 0 0 0 40px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (min-width: 1200px) {
  .header-inner {
    padding: 30px clamp(20px, 3vw, 40px);
  }
}

.header-logo {
  flex-shrink: 0;
}

.header-logo__img {
  display: block;
  width: 150px;
  height: auto;
}
@media screen and (min-width: 768px) {
  .header-logo__img {
    width: 300px;
  }
}

/* ===== PC: インラインナビ + CTA ===== */
/* タブレット幅ではナビ+CTAボタンが収まりきらずレイアウトが崩れるため、
   xl（1200px）まではハンバーガーメニューのままにする */
.header-nav-group {
  display: none;
}
@media screen and (min-width: 1200px) {
  .header-nav-group {
    display: flex;
    align-items: center;
    gap: 30px;
  }
}

.header-pc-nav .gmenu__lists {
  gap: 30px;
}

.header .btn {
  width: 250px;
}

/* ===== SP: ハンバーガーボタン ===== */
.header__icon {
  width: 85px;
  height: 85px;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .header__icon {
    align-self: flex-start;
    width: 120px;
    height: 120px;
  }
}

.drawer-icon {
  position: relative;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  overflow: hidden;
}

/* header__icon と drawer-icon は同一要素にある。display の詳細度を
   確実に上書きするため、2クラスまとめたセレクタで非表示にする。
   タブレット幅（〜xl未満）ではPCナビが収まらないため、ハンバーガーのままにする */
@media screen and (min-width: 1200px) {
  .header__icon.drawer-icon {
    display: none;
  }
}

.drawer-icon__blob {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(../img/drawer-icon-blob.svg) no-repeat center center/cover;
}

.drawer-icon__bars svg {
  display: block;
  width: 45px;
  height: auto;
}
@media screen and (min-width: 768px) {
  .drawer-icon__bars svg {
    width: 60px;
  }
}

.drawer-icon__bar {
  transition: opacity 0.3s ease;
}

.drawer-icon__bars.is-checked .drawer-icon__bar--top,
.drawer-icon__bars.is-checked .drawer-icon__bar--bottom {
  opacity: 0;
}

.drawer-icon__text {
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.2px;
  text-align: right;
}

/* ===== SP: モーダルメニュー ===== */
.header__nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 100px 30px;
  overflow-y: auto;
  background: rgba(128, 196, 108, 0.9);
  clip-path: circle(0% at calc(100% - 40px) 40px);
  transition: clip-path 0.6s ease;
  pointer-events: none;
}
.header__nav.is-checked {
  clip-path: circle(150% at calc(100% - 40px) 40px);
  pointer-events: auto;
}
@media screen and (min-width: 1200px) {
  .header__nav {
    display: none;
  }
}

.header__nav-lists {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.header__nav-lists > li {
  list-style: none;
}
.header__nav-lists .gmenu__link {
  color: #fff3e5;
  font-size: 18px;
}

.gmenu__lists {
  display: flex;
  gap: 50px;
}

.gmenu__item {
  list-style: none;
}

.gmenu__link {
  font-weight: 700;
  letter-spacing: 1.08px;
  color: #3b3939;
  position: relative;
  display: inline-block;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.gmenu__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gmenu__link:hover {
  color: #ff8262;
}
.gmenu__link:hover::after {
  transform: scaleX(1);
}

footer {
  position: relative;
  overflow: hidden;
  background: #fff;
}
footer::after {
  content: "";
  position: absolute;
  background: url(../img/so-wave-top.png) no-repeat center bottom/100% auto;
  width: 100%;
  aspect-ratio: 375/86;
  top: 0;
  left: 0;
  pointer-events: none;
}
@media screen and (min-width: 1200px) {
  footer::after {
    background: url(../img/so-wave-top-pc.png) no-repeat center bottom/100% auto;
    aspect-ratio: 1440/329;
  }
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 86px 0 100px;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .footer-inner {
    gap: 150px;
    padding: 330px 0 100px;
  }
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  width: 345px;
}
@media screen and (min-width: 1200px) {
  .footer-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    width: 685px;
  }
}

.footer-logo {
  display: block;
}
.footer-logo img {
  display: block;
  width: 240px;
  height: auto;
}
@media screen and (min-width: 1200px) {
  .footer-logo img {
    width: 300px;
  }
}

.footer__nav-lists {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  text-align: center;
}

.footer__nav-lists > li {
  list-style: none;
}

.footer-nav__link {
  font-weight: 700;
  letter-spacing: 1.08px;
  color: #3b3939;
  position: relative;
  display: inline-block;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.footer-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer-nav__link:hover {
  color: #ff8262;
}
.footer-nav__link:hover::after {
  transform: scaleX(1);
}
.footer-nav__link {
  font-size: 18px;
  line-height: 150%;
}

.footer__copyright {
  display: block;
  color: #686868;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1.26px;
}

/* セクション見出し共通パーツ。緑丸の装飾つきバッジテキスト。
   コンテンツ幅（SP:345px / PC:1200px）に対して左揃えで配置される。
   使用例:
   <h2 class="heading-badge">
     <span class="heading-badge__text">Service</span>
   </h2>
*/
.heading-badge {
  position: relative;
  width: 345px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 9px;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .heading-badge {
    width: 100%;
    max-width: 1200px;
    padding: 0 30px;
  }
}
@media screen and (min-width: 1200px) {
  .heading-badge {
    padding: 0 43px;
  }
}

.heading-badge__text {
  /* position+z-index:0 でこの要素自身にスタッキングコンテキストを作る。
     これにより ::before の z-index:-1 はこの要素内だけで完結し、
     テキストの後ろ・外側の背景の前、という正しい重なり順になる */
  position: relative;
  z-index: 0;
  display: inline-block;
  color: #ff8262;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 150%;
}
.heading-badge__text::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: rgba(114, 211, 86, 0.6);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  top: -1px;
  left: -9px;
}
.heading-badge__text {
  /* タブレット専用の中間サイズ（SP:28px / PC:80px の中間） */
}
@media screen and (min-width: 768px) {
  .heading-badge__text {
    font-size: 54px;
  }
  .heading-badge__text::before {
    width: 88px;
    height: 86px;
    top: 0px;
    left: -23px;
  }
}
@media screen and (min-width: 1200px) {
  .heading-badge__text {
    font-size: 80px;
  }
  .heading-badge__text::before {
    width: 130px;
    height: 126px;
    top: 2px;
    left: -38px;
  }
}

.btn {
  display: inline-block;
  border-radius: 30px;
  border: 2px solid var(--btn-accent, #ff8262);
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
  background: var(--btn-bg, #fffaf2);
  position: relative;
  overflow: hidden;
  width: 300px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media screen and (min-width: 768px) {
  .btn {
    width: 370px;
  }
}
.btn:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 5px 9px 10px 0 rgba(0, 0, 0, 0.2);
}
.btn:active {
  transform: translateY(-1px) scale(0.99);
}
.btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 17px 37px;
  position: relative;
  z-index: 2;
}
.btn .button-text {
  color: var(--btn-accent, #ff8262);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.26px;
}
.btn .button-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn .button-icon img {
  width: 100%;
  height: auto;
  display: block;
}
.btn:hover .button-icon {
  transform: translateX(4px);
}

.btn.btn--invert {
  background: var(--btn-accent, #ff8262);
  border-color: var(--btn-accent, #ff8262);
}
.btn.btn--invert .button-text {
  color: var(--btn-bg, #fffaf2);
}

/* 選択中のカテゴリボタン（アクティブ状態） */
.work-category__button .btn a.is-active {
  background-color: #ff8262;
  color: #fffaf2;
  border-color: #ff8262;
  pointer-events: none;
}

.work-category__button .btn a.is-active .button-text {
  color: #fff;
}

/* 「もっと見る」系リンクの共通パーツ。お問い合わせCTA（.btn）とは別物で、
   背景なし・オレンジの縁取りとテキストが特徴。
   使用例:
   <div class="btn-more">
     <a href="...">
       <p class="btn-more__text">実績をもっと見る</p>
       <div class="btn-more__icon"><img src="..." alt="" /></div>
     </a>
   </div>
*/
.btn-more {
  display: inline-block;
  border-radius: 30px;
  border: 2px solid #ff8262;
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
  background: #fffaf2;
  width: 300px;
}
@media screen and (min-width: 1200px) {
  .btn-more {
    width: 390px;
  }
}
.btn-more a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 15px 10px;
}

.btn-more__text {
  color: #ff8262;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1.68px;
}

.btn-more__icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-more__icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* 開閉式アコーディオンの共通シェル。中身（見出し・本文）のスタイルは
   利用側（例: object/project/faq-showcase）で用意する。
   使用例:
   <div class="qa__box is-open">
     <button class="js-accordion">...</button>
     <div class="qa-box__body">...</div>
   </div>
*/
.qa__box {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 33px;
  border: 1px solid #26452e;
  border-radius: 8px;
  background: #fffdf8;
  transition: border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.qa__box.is-open {
  gap: 20px;
}
.qa__box:hover {
  border-color: #ee862a;
}

.qa-box__body {
  overflow: hidden;
  height: 0;
  transition: height 0.35s ease;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
  background: rgba(59, 57, 57, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.lightbox.is-active {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #3b3939;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lightbox__close:hover {
  transform: scale(1.1);
}

.fv {
  position: relative;
  overflow: hidden;
  background: #fff;
  margin-top: 85px;
  --btn-accent: #80c46c;
}
@media screen and (min-width: 1200px) {
  .fv {
    margin-top: 191px;
  }
}

.fv__inner {
  position: relative;
  min-height: 580px;
}
@media screen and (min-width: 1200px) {
  .fv__inner {
    max-width: 1440px;
    min-height: 681px;
    margin-right: auto;
    margin-left: auto;
  }
}

.fv__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* 実画像の縦横比に合わせることで、幅が伸びるタブレット幅でも
     高さが不足してイラストが途切れないようにする（横方向のトリミングは許容） */
  aspect-ratio: 1378/1016;
  overflow: hidden;
}
.fv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media screen and (min-width: 1200px) {
  .fv__photo {
    top: 60px;
    left: 603px;
    width: 760px;
    height: 561px;
    aspect-ratio: auto;
    border-radius: 20px;
  }
}

.fv-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
  max-width: 345px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 211px;
  padding-right: 15px;
  padding-left: 15px;
}
@media screen and (min-width: 1200px) {
  .fv-content {
    position: absolute;
    top: 146px;
    left: 120px;
    align-items: flex-start;
    text-align: left;
    max-width: none;
    gap: 20px;
    padding: 0;
    margin: 0;
  }
}

.fv-content__heading {
  color: #ee862a;
  font-size: 40px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 2px;
}
@media screen and (min-width: 1200px) {
  .fv-content__heading {
    font-size: 70px;
    letter-spacing: 3.5px;
  }
}

.fv-content__text {
  color: #3b3939;
  font-size: 17px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.26px;
}
@media screen and (min-width: 1200px) {
  .fv-content__text {
    font-size: 20px;
    letter-spacing: 0.3px;
  }
}

.fv-content__cta.btn {
  width: 300px;
}

.fv__accent {
  position: absolute;
  z-index: 3;
  display: block;
}

.fv__accent--a {
  top: 30px;
  left: 15px;
  width: 60px;
  height: 52px;
}
@media screen and (min-width: 1200px) {
  .fv__accent--a {
    top: 80px;
    left: 570px;
  }
}

.fv__accent--b {
  top: 146px;
  left: 294px;
  width: 81px;
  height: 70px;
}
@media screen and (min-width: 1200px) {
  .fv__accent--b {
    top: 534px;
    left: 1213px;
  }
}

.fv__accent--c {
  top: 365px;
  right: 30px;
  width: 50px;
  height: 43px;
}
@media screen and (min-width: 1200px) {
  .fv__accent--c {
    top: 578px;
    right: auto;
    left: 360px;
  }
}

.service-showcase {
  position: relative;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 50px 0 86px;
  --btn-accent: #80c46c;
}
.service-showcase::before {
  content: "";
  position: absolute;
  z-index: -10;
  background: #fff3e5;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  top: 560px;
  left: -225px;
}
.service-showcase::after {
  content: "";
  position: absolute;
  z-index: -10;
  background: #fff3e5;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  top: 0;
  right: -120px;
}
@media screen and (min-width: 1200px) {
  .service-showcase {
    gap: 100px;
    padding: 100px 0 330px;
  }
  .service-showcase::before {
    width: 1049px;
    height: 1049px;
    top: 730px;
    left: -225px;
  }
  .service-showcase::after {
    width: 693px;
    height: 693px;
    top: 0;
    right: -613px;
  }
}

.service-showcase__wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  aspect-ratio: 374/86;
  background: url(../img/service-wave-bottom-sp.svg) no-repeat center bottom/100% 100%;
}
@media screen and (min-width: 1200px) {
  .service-showcase__wave {
    aspect-ratio: 1434/329;
    background-image: url(../img/service-wave-bottom-pc.svg);
  }
}

.service-showcase__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 345px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .service-showcase__content {
    width: 100%;
    max-width: 1200px;
    padding: 0 30px;
  }
}
@media screen and (min-width: 1200px) {
  .service-showcase__content {
    gap: 100px;
    padding: 0 43px;
  }
}

.service-showcase__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .service-showcase__block {
    gap: 50px;
  }
}

.service-showcase__heading {
  color: #ee862a;
  font-size: 24px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.68px;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .service-showcase__heading {
    font-size: 40px;
    letter-spacing: 2.8px;
  }
}

.service-showcase__text {
  color: #3b3939;
  font-size: 20px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .service-showcase__text {
    font-size: 24px;
    letter-spacing: 0.36px;
  }
}

.service-cards {
  /* .service-cards は width:345px(SP)〜1200px(XL) に固定された祖先
     (.service-showcase__content) の内側にネストされているが、カード4枚分の
     幅(260px×4 + gap)はその祖先のmax-width(1200px)より広いため、祖先に
     収まったままだと画面をどれだけ広げても「4枚が収まる幅」に到達できない。
     常に画面幅いっぱいまで飛び出させることで、JSが実際のビューポート幅を
     基準に「収まる/収まらない」を正しく判定できるようにする。
     margin-left: calc(50% - 50vw) は祖先が何段ネストしていても・祖先の幅が
     何pxでも、祖先が画面中央に揃っている限り常にビューポート端(0〜100vw)に
     正確に飛び出す標準テクニック。祖先の実幅を手動で追跡する必要がない */
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  gap: 20px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .service-cards {
    padding-right: 50px;
    padding-left: 50px;
  }
}
@media screen and (min-width: 1200px) {
  .service-cards {
    gap: 50px;
  }
}
.service-cards {
  /* JSが「4枚が収まらない」と判定した場合だけ、横スクロールのスライダーにする */
}
.service-cards.is-sliding {
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.service-cards.is-sliding::-webkit-scrollbar {
  display: none;
}

.service-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  width: 260px;
  height: 392px;
  padding: 20px;
  border: 3px solid #e2c16f;
  border-radius: 30px;
  scroll-snap-align: center;
  background: #fff;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.service-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 6px 8px 0 0 rgba(226, 193, 111, 0.25);
}

.service-card__title {
  color: #3b3939;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.3px;
  text-align: center;
}

.service-card__img {
  width: 220px;
  height: 176px;
  border-radius: 12px;
  overflow: hidden;
}
.service-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-card__text {
  width: 100%;
  color: #3b3939;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.24px;
  text-align: left;
}

.service-showcase__cta.btn {
  width: 300px;
}

/* ===== 医療特化ブロックの端末コラージュ ===== */
.device-collage {
  position: relative;
  width: 345px;
  aspect-ratio: 1000/721;
}
@media screen and (min-width: 1200px) {
  .device-collage {
    width: 1000px;
  }
}

.device-collage__item {
  position: absolute;
  display: block;
  object-fit: contain;
}

.device-collage__item--mac {
  top: 0%;
  left: 3%;
  width: 92.4%;
  height: 96.3%;
  z-index: 1;
}

.device-collage__item--tab {
  top: 53.9%;
  left: 53.1%;
  width: 46.9%;
  height: 46.05%;
  z-index: 2;
}

.device-collage__item--phone {
  top: 59.2%;
  left: 14.5%;
  width: 19.6%;
  height: 33.7%;
  z-index: 3;
}

.device-collage__item--realme {
  top: 69.8%;
  left: 0%;
  width: 20.1%;
  height: 26.5%;
  z-index: 2;
}

.work-showcase {
  position: relative;
  overflow: hidden;
  background: #fff3e5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 50px 0 86px;
}
.work-showcase::before {
  content: "";
  position: absolute;
  background: #fff3e5;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  top: 560px;
  left: -225px;
}
.work-showcase::after {
  content: "";
  position: absolute;
  background: #fff3e5;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  top: 0;
  right: -120px;
}
@media screen and (min-width: 1200px) {
  .work-showcase {
    gap: 100px;
    padding: 0 0 330px;
  }
  .work-showcase::before {
    width: 1049px;
    height: 1049px;
    top: 730px;
    left: -225px;
  }
  .work-showcase::after {
    width: 693px;
    height: 693px;
    top: 0;
    right: -613px;
  }
}

.work-showcase__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 345px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .work-showcase__content {
    width: 100%;
    max-width: 1200px;
    padding: 0 30px;
  }
}
@media screen and (min-width: 1200px) {
  .work-showcase__content {
    gap: 100px;
    padding: 0 43px;
  }
}

.work-showcase__wave {
  position: absolute;
  z-index: 0;
  bottom: -1px;
  left: 0;
  width: 100%;
  aspect-ratio: 374/86;
  background: url(../img/work-wave-bottom-sp.svg) no-repeat center bottom/100% 100%;
  pointer-events: none;
}
@media screen and (min-width: 1200px) {
  .work-showcase__wave {
    aspect-ratio: 1434/329;
    background-image: url(../img/work-wave-bottom-pc.svg);
  }
}

.work-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .work-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 280px));
    justify-content: center;
    align-items: start;
    gap: 30px;
    width: auto;
  }
}
@media screen and (min-width: 1200px) {
  .work-cards {
    grid-template-columns: repeat(3, minmax(0, 280px));
    gap: 50px;
  }
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 280px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.work-card:hover {
  transform: translateY(-6px);
}

.work-card__img {
  width: 100%;
  height: 210px;
  border-radius: 12px;
  overflow: hidden;
}
.work-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.work-card:hover .work-card__img img {
  transform: scale(1.08);
}

.work-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.work-card__date {
  color: #3b3939;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.56px;
}

.work-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 90px;
  color: #3b3939;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.4px;
}

.work-card__tag span {
  display: inline-block;
  padding: 5px;
  border: 2px solid #6bf044;
  border-radius: 5px;
  color: #6bf044;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.7px;
}

.column-showcase {
  position: relative;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 50px 0 86px;
}
.column-showcase::before {
  content: "";
  position: absolute;
  background: #fff3e5;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  top: 130px;
  right: -80px;
  z-index: 0;
}
@media screen and (min-width: 1200px) {
  .column-showcase {
    gap: 100px;
    padding: 100px 0 330px;
  }
  .column-showcase::before {
    top: 135px;
    right: 130px;
  }
}

.column-showcase__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 345px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .column-showcase__content {
    width: 100%;
    max-width: 1200px;
    padding: 0 30px;
  }
}
@media screen and (min-width: 1200px) {
  .column-showcase__content {
    gap: 100px;
    padding: 0 43px;
  }
}

.column-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .column-cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 30px 20px;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
  }
}

.column-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 300px;
  padding: 20px;
  border: 3px solid #ee862a;
  border-radius: 20px;
  background: #fff;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media screen and (min-width: 1200px) {
  .column-card {
    width: 320px;
  }
}
.column-card:hover {
  transform: translateY(-6px);
  box-shadow: 6px 8px 0 0 rgba(238, 134, 42, 0.2);
}

.column-card__img {
  width: 100%;
  height: 195px;
  border-radius: 20px;
  overflow: hidden;
}
.column-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.column-card:hover .column-card__img img {
  transform: scale(1.08);
}

.column-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

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

.column-card__date {
  color: #3b3939;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.56px;
}

.column-card__category {
  flex-shrink: 0;
  width: 140px;
}
.column-card__category span {
  display: block;
  width: 100%;
  padding: 4px 8px;
  border-radius: 5px;
  border: 2px solid currentColor;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* パステルカラーパレット（カテゴリーIDに応じて自動で割り当て） */
.column-card__category--0 span {
  color: #e07ba5;
}

.column-card__category--1 span {
  color: #6badd6;
}

.column-card__category--2 span {
  color: #7cc194;
}

.column-card__category--3 span {
  color: #d1a935;
}

.column-card__category--4 span {
  color: #a58bd6;
}

.column-card__category--5 span {
  color: #e0975b;
}

.column-card__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.column-card__title {
  display: -webkit-box;
  overflow: hidden;
  height: 90px;
  color: #3b3939;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.3px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.column-card__excerpt {
  color: #3b3939;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.24px;
}

.column-showcase__cta.btn {
  width: 300px;
}

.faq-showcase {
  position: relative;
  overflow: hidden;
  background: #fff3e5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 50px 0;
}
@media screen and (min-width: 1200px) {
  .faq-showcase {
    gap: 60px;
    padding: 100px 0;
  }
}

.faq-showcase__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 345px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .faq-showcase__content {
    width: 100%;
    max-width: 1200px;
    padding: 0 30px;
  }
}
@media screen and (min-width: 1200px) {
  .faq-showcase__content {
    gap: 60px;
    padding: 0 43px;
  }
}

.faq-boxes {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .faq-boxes {
    gap: 30px;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
  }
}

.faq-box__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 19px;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.faq-box__q,
.faq-box__a {
  flex-shrink: 0;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
}

.faq-box__q {
  color: #e4a65a;
}

.faq-box__a {
  color: #8daa78;
}

.faq-box__question {
  flex: 1;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.24px;
}

.faq-box__icon {
  flex-shrink: 0;
  display: inline-block;
  width: 20.34px;
  height: 20.34px;
  background: url(../img/faq-icon-close.svg) no-repeat center/20.34px auto;
}

.qa__box.is-open .faq-box__icon {
  background-image: url(../img/faq-icon-open.svg);
}

.faq-box__answer {
  display: flex;
  align-items: flex-start;
  gap: 19px;
}

.faq-box__answer-text {
  flex: 1;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.24px;
}

.faq-showcase__cta.btn {
  width: 300px;
}
.faq-showcase__cta.btn a {
  padding: 17px 24px;
}

.profile-showcase {
  position: relative;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 0 0 50px;
}
.profile-showcase::before {
  content: "";
  position: absolute;
  background: #fff3e5;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  top: 130px;
  left: -130px;
}
@media screen and (min-width: 1200px) {
  .profile-showcase {
    gap: 60px;
    padding: 0 0 100px;
  }
  .profile-showcase::before {
    top: 135px;
    left: 120px;
  }
}

.profile-showcase__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 345px;
}
@media screen and (min-width: 768px) {
  .profile-showcase__inner {
    width: 100%;
    max-width: 600px;
  }
}
@media screen and (min-width: 1200px) {
  .profile-showcase__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    max-width: none;
  }
}

.profile-showcase__photo {
  position: relative;
  width: 345px;
  height: 345px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.profile-showcase__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (min-width: 768px) {
  .profile-showcase__photo {
    width: 480px;
    height: 480px;
  }
}
@media screen and (min-width: 1200px) {
  .profile-showcase__photo {
    width: 650px;
    height: 650px;
  }
}

.profile-showcase__card {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
}
@media screen and (min-width: 768px) {
  .profile-showcase__card {
    margin-top: -60px;
    max-width: 500px;
  }
}
@media screen and (min-width: 1200px) {
  .profile-showcase__card {
    margin-top: 0;
    margin-left: -90px;
    width: 580px;
    max-width: none;
  }
}

.profile-showcase__name {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-showcase__name-role {
  color: #3b3939;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.56px;
}

.profile-showcase__name-text {
  color: #3b3939;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.4px;
}

.profile-showcase__bio {
  color: #3b3939;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 2.4px;
}

.profile-showcase__wave {
  position: absolute;
  z-index: 0;
  bottom: -1px;
  left: 0;
  width: 100%;
  aspect-ratio: 374/86;
  background: url(../img/service-wave-bottom-sp.svg) no-repeat center bottom/100% 100%;
  pointer-events: none;
}
@media screen and (min-width: 1200px) {
  .profile-showcase__wave {
    aspect-ratio: 1434/329;
    background-image: url(../img/service-wave-bottom-pc.svg);
  }
}

.work {
  background: #fff3e5;
}

.work__inner {
  padding: 50px 0;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .work__inner {
    padding: 100px 0;
  }
}

.work__cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .work__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 280px));
    justify-content: center;
    align-items: start;
    gap: 30px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (min-width: 1200px) {
  .work__cards {
    grid-template-columns: repeat(3, minmax(0, 280px));
    gap: 50px;
    max-width: 940px;
  }
}

.work__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 280px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.work__card:hover {
  transform: translateY(-6px);
}

.work-card__head {
  width: 100%;
  height: 210px;
  border-radius: 16px;
  overflow: hidden;
}
.work-card__head img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.work__card:hover .work-card__head img {
  transform: scale(1.08);
}

.work-card__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}

.work-card__date {
  color: #3b3939;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.56px;
}

.work-card__title {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.work-card__title-body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 90px;
  color: #3b3939;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.4px;
}

.work-card__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
}

.work-card__genre span {
  display: inline-block;
  padding: 5px;
  border-radius: 5px;
  border: 2px solid #6bf044;
  color: #6bf044;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.7px;
  white-space: nowrap;
}

.work-card__tool span {
  display: inline-block;
  padding: 5px;
  border-radius: 5px;
  border: 2px solid #4f489c;
  color: #4f489c;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.7px;
  white-space: nowrap;
}

.work-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 200px;
  margin: 20px auto 60px;
}
@media screen and (min-width: 768px) {
  .work-category {
    display: grid;
    grid-template-columns: repeat(2, 270px);
    justify-content: center;
    width: auto;
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1200px) {
  .work-category {
    grid-template-columns: repeat(3, 270px);
    gap: 40px;
  }
}

.work-category__button {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .work-category__button {
    width: 270px;
  }
}
.work-category__button .btn {
  width: 100%;
  border-radius: 20px;
}
.work-category__button .btn a {
  padding: 5px 10px;
}
.work-category__button .btn .button-text {
  font-size: 14px;
}
@media screen and (min-width: 768px) {
  .work-category__button .btn {
    width: 270px;
  }
  .work-category__button .btn a {
    padding: 17px 37px;
  }
  .work-category__button .btn .button-text {
    font-size: 16px;
  }
}

.pagination {
  position: relative;
  z-index: 20;
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 2px solid #d4b784;
  border-radius: 50%;
  text-decoration: none;
  color: #d4b784;
  font-size: 20px;
  line-height: 1;
}

.pagination .page-numbers.current {
  background: #d4b784;
  color: #fff3e5;
}

.pagination .page-numbers.dots {
  width: auto;
  height: auto;
  border: none;
  padding: 0 6px;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  width: auto;
  height: auto;
  border: none;
  color: #d4b784;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.12px;
}

.pagination .page-numbers.prev::before {
  content: "← ";
}

.pagination .page-numbers.next::after {
  content: " →";
}

.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: #fff3e5;
  padding: 60px 0;
  --btn-accent: #80c46c;
  --btn-bg: #fff;
}

.cta__accent {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.cta__accent--a {
  width: 59px;
  top: 175px;
  right: 0;
}
@media screen and (min-width: 1200px) {
  .cta__accent--a {
    width: 81px;
    top: 195px;
    right: 220px;
  }
}

.cta__accent--b {
  width: 50px;
  top: 0;
  left: 10px;
}
@media screen and (min-width: 1200px) {
  .cta__accent--b {
    top: 150px;
    left: 220px;
  }
}

.cta-text {
  position: relative;
  z-index: 1;
  color: #3b3939;
  font-size: 20px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.3px;
}
@media screen and (min-width: 1200px) {
  .cta-text {
    font-size: 24px;
    letter-spacing: 1.68px;
  }
}

.cta-button-wrap {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .cta-button-wrap {
    margin-top: 30px;
  }
}

.cta-button {
  border-radius: 30px;
  overflow: hidden;
}
.cta-button a {
  padding: 17px 24px;
}

/* 下層ページ共通FV。get_template_part('template-parts/page-fv') で出力する。
   使用例: サービスページなど各下層ページのヘッダー直下 */
.page-fv {
  position: relative;
  overflow: hidden;
  background: #fff;
  margin-top: 85px;
}
@media screen and (min-width: 900px) {
  .page-fv {
    margin-top: 191px;
  }
}

.page-fv__inner {
  position: relative;
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 1200px) {
  .page-fv__inner {
    height: 436px;
  }
}

.page-fv__photo {
  width: 100%;
  height: 277px;
  overflow: hidden;
}
.page-fv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (min-width: 1200px) {
  .page-fv__photo {
    position: absolute;
    top: 0;
    right: 120px;
    width: 591px;
    height: 436px;
  }
}

.page-fv__title {
  position: relative;
  z-index: 1;
  margin: -35px 0 0 37.5px;
  color: #ee862a;
  font-size: 40px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 2px;
}
@media screen and (min-width: 1200px) {
  .page-fv__title {
    position: absolute;
    margin: 0;
    top: 166px;
    left: 120px;
    font-size: 70px;
    letter-spacing: 3.5px;
  }
}

.page-fv__accent {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.page-fv__accent--a {
  top: 30px;
  left: 15px;
  width: 60px;
}
@media screen and (min-width: 1200px) {
  .page-fv__accent--a {
    top: 80px;
    left: 570px;
  }
}

.page-fv__accent--b {
  top: 116px;
  left: 294px;
  width: 81px;
}
@media screen and (min-width: 1200px) {
  .page-fv__accent--b {
    top: 320px;
    left: 220px;
  }
}

.page-fv__wave {
  position: absolute;
  z-index: 0;
  bottom: -1px;
  left: 0;
  width: 100%;
  aspect-ratio: 375/86;
  background: url(../img/so-wave-bottom.png) no-repeat center bottom/100% 100%;
  pointer-events: none;
}
@media screen and (min-width: 1200px) {
  .page-fv__wave {
    aspect-ratio: 1440/329;
    background-image: url(../img/so-wave-bottom-pc.png);
  }
}

.service-detail {
  position: relative;
  overflow: hidden;
  background: #fff3e5;
  padding: 50px 0 86px;
}
@media screen and (min-width: 1200px) {
  .service-detail {
    padding: 0 0 330px;
  }
}

.service-detail__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 345px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .service-detail__inner {
    width: 100%;
    max-width: 1000px;
    padding: 0 30px;
  }
}
@media screen and (min-width: 1200px) {
  .service-detail__inner {
    gap: 50px;
    padding: 0;
  }
}

.service-detail__heading {
  color: #ee862a;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.4px;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .service-detail__heading {
    font-size: 40px;
    letter-spacing: 2.8px;
  }
}

.service-detail__text {
  color: #3b3939;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.24px;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .service-detail__text {
    font-size: 24px;
    letter-spacing: 0.36px;
  }
}

.service-detail-cards {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
}

.service-detail-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 20px;
  border: 3px solid #e2c16f;
  border-radius: 30px;
  background: #fff;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media screen and (min-width: 1200px) {
  .service-detail-card {
    gap: 30px;
    width: 1000px;
    padding: 50px;
  }
}
.service-detail-card:hover {
  transform: translateY(-6px);
  box-shadow: 6px 8px 0 0 rgba(226, 193, 111, 0.25);
}

.service-detail-card__title {
  color: #3b3939;
  font-size: 24px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.36px;
  text-align: center;
}

.service-detail-card__content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .service-detail-card__content {
    flex-direction: row;
    align-items: stretch;
    gap: 50px;
  }
}

@media screen and (min-width: 1200px) {
  .service-detail-card:nth-child(even) .service-detail-card__content {
    flex-direction: row-reverse;
  }
}

.service-detail-card__img {
  flex-shrink: 0;
  width: 100%;
  height: 241px;
  overflow: hidden;
}
.service-detail-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media screen and (min-width: 1200px) {
  .service-detail-card__img {
    width: 300px;
  }
}

.service-detail-card__text {
  flex: 1;
  color: #3b3939;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.24px;
  text-align: left;
}

.service-detail__wave {
  position: absolute;
  z-index: 0;
  bottom: -1px;
  left: 0;
  width: 100%;
  aspect-ratio: 374/86;
  background: url(../img/work-wave-bottom-sp.svg) no-repeat center bottom/100% 100%;
  pointer-events: none;
}
@media screen and (min-width: 1200px) {
  .service-detail__wave {
    aspect-ratio: 1434/329;
    background-image: url(../img/work-wave-bottom-pc.svg);
  }
}

.price-detail {
  position: relative;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  padding: 50px 0 86px;
}
.price-detail::before {
  content: "";
  position: absolute;
  z-index: 0;
  background: #fff3e5;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  top: 579px;
  left: -225px;
}
.price-detail::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: #fff3e5;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  top: 0;
  right: -105px;
}
@media screen and (min-width: 1200px) {
  .price-detail {
    padding: 100px 0 330px;
  }
  .price-detail::before {
    width: 700px;
    height: 700px;
    top: 250px;
    left: -225px;
  }
  .price-detail::after {
    width: 693px;
    height: 693px;
    top: 0;
    right: -347px;
  }
}

.price-detail__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 345px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .price-detail__inner {
    width: 100%;
    max-width: 1200px;
    padding: 0 30px;
  }
}
@media screen and (min-width: 1200px) {
  .price-detail__inner {
    gap: 100px;
    padding: 0 43px;
  }
}

.price-detail-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.price-initial-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 345px;
  padding: 20px;
  border: 2px solid #ee862a;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media screen and (min-width: 1200px) {
  .price-initial-card {
    width: 700px;
  }
}
.price-initial-card:hover {
  transform: translateY(-6px);
}

.price-initial-card__title {
  color: #ee862a;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.3px;
}

.price-initial-card__price {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.price-initial-card__price-num {
  color: #ee862a;
  font-size: 48px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.72px;
}

.price-initial-card__price-suffix {
  color: #ee862a;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.3px;
}

.price-initial-card__text {
  width: 100%;
  color: #2c3e4c;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.24px;
}

.price-detail__plus {
  display: block;
  width: 50px;
  height: 50px;
}

.price-plan-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (min-width: 1200px) {
  .price-plan-cards {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    width: 1000px;
  }
}

.price-plan-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 320px;
  padding: 20px 0;
  border: 2px solid #ee862a;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.price-plan-card:hover {
  transform: translateY(-6px);
}

.price-plan-card__title {
  color: #ee862a;
  font-size: 24px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.36px;
}

.price-plan-card__price {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
}

.price-plan-card__price-num {
  color: #ee862a;
  font-size: 40px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.6px;
}

.price-plan-card__price-unit {
  color: #ee862a;
  font-size: 20px;
  font-weight: 700;
  line-height: 230%;
  letter-spacing: 0.3px;
}

.price-plan-card__tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 20px;
  color: #ee862a;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  text-align: center;
}

.price-plan-card__features {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 120px;
  padding: 10px 20px;
  border-top: 1px solid rgba(44, 62, 76, 0.6);
  border-bottom: 1px solid rgba(44, 62, 76, 0.6);
  color: #2c3e4c;
  font-size: 14px;
  line-height: 150%;
  box-sizing: border-box;
}

.price-plan-card__inherits {
  width: 100%;
  font-weight: 400;
}

.price-plan-card__plus {
  color: #ee862a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.price-plan-card__list {
  width: 100%;
  font-weight: 700;
}

.price-detail__wave {
  position: absolute;
  z-index: 0;
  bottom: -1px;
  left: 0;
  width: 100%;
  aspect-ratio: 375/86;
  background: url(../img/so-wave-bottom.png) no-repeat center bottom/100% 100%;
  pointer-events: none;
}
@media screen and (min-width: 1200px) {
  .price-detail__wave {
    aspect-ratio: 1440/329;
    background-image: url(../img/so-wave-bottom-pc.png);
  }
}

/* プロフィールページの自己紹介セクション。
   写真+カードの部分は object/project/profile-showcase の
   .profile-showcase__inner / __photo / __card / __name / __bio を
   そのまま再利用する（トップページと寸法・スタイルが完全一致のため） */
.profile-detail {
  background: #fff3e5;
  padding: 50px 0;
}
@media screen and (min-width: 1200px) {
  .profile-detail {
    padding: 100px 0;
  }
}

.profile-detail__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 345px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .profile-detail__inner {
    width: 100%;
    max-width: 1200px;
    padding: 0 30px;
  }
}
@media screen and (min-width: 1200px) {
  .profile-detail__inner {
    gap: 50px;
    padding: 0 43px;
  }
}

.profile-detail__heading {
  color: #ee862a;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.4px;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .profile-detail__heading {
    font-size: 40px;
    letter-spacing: 2.8px;
  }
}

.profile-detail__text {
  color: #3b3939;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.24px;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .profile-detail__text {
    width: 1000px;
    font-size: 24px;
    letter-spacing: 0.36px;
  }
}

/* よくある質問ページ。アコーディオン自体は object/component/qa-accordion と
   object/project/faq-showcase の .faq-box__* をそのまま再利用する */
.faq-detail {
  background: #fff3e5;
  padding: 50px 0;
}
@media screen and (min-width: 1200px) {
  .faq-detail {
    padding: 100px 0;
  }
}

.faq-detail__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 345px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .faq-detail__inner {
    width: 100%;
    max-width: 1200px;
    padding: 0 30px;
  }
}
@media screen and (min-width: 1200px) {
  .faq-detail__inner {
    gap: 60px;
    padding: 0 43px;
  }
}

.faq-detail__groups {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .faq-detail__groups {
    gap: 70px;
  }
}

.faq-detail__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.faq-detail__group-title {
  position: relative;
  width: 100%;
  padding-left: 20px;
  color: #3b3939;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
}
.faq-detail__group-title::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 5px;
  height: 26px;
  background: #ee862a;
}
@media screen and (min-width: 1200px) {
  .faq-detail__group-title {
    width: 1000px;
    font-size: 24px;
  }
  .faq-detail__group-title::before {
    height: 30px;
  }
}

.column-detail {
  background: #fff3e5;
  padding: 50px 0 86px;
}
@media screen and (min-width: 1200px) {
  .column-detail {
    padding: 100px 0 330px;
  }
}

.column-detail__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 345px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .column-detail__inner {
    width: 100%;
    max-width: 900px;
    padding: 0 30px;
  }
}
@media screen and (min-width: 1200px) {
  .column-detail__inner {
    gap: 50px;
    padding: 0;
  }
}

.column-detail__title {
  color: #3b3939;
  font-size: 24px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.36px;
}
@media screen and (min-width: 1200px) {
  .column-detail__title {
    font-size: 32px;
    line-height: 48px;
  }
}

.column-detail__meta {
  display: flex;
  align-items: center;
  gap: 15px;
}

.column-detail__date {
  color: #666;
  font-size: 16px;
}
@media screen and (min-width: 1200px) {
  .column-detail__date {
    font-size: 20px;
  }
}

.column-detail__tag {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ee862a;
  border-radius: 4px;
  color: #ee862a;
  font-size: 14px;
}

.column-detail__thumbnail {
  width: 100%;
  aspect-ratio: 345/221;
  overflow: hidden;
}
.column-detail__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (min-width: 1200px) {
  .column-detail__thumbnail {
    aspect-ratio: 900/576;
  }
}

/* ===== 目次 ===== */
.column-toc {
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid #ee862a;
  border-radius: 12px;
}
@media screen and (min-width: 1200px) {
  .column-toc {
    padding: 30px;
  }
}

.column-toc__title {
  position: relative;
  margin-bottom: 15px;
  padding-left: 20px;
  color: #3b3939;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
}
.column-toc__title::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 5px;
  height: 22px;
  background: #ee862a;
}

.column-toc__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: column-toc-h2;
}

.column-toc__item {
  counter-increment: column-toc-h2;
  list-style: none;
}
.column-toc__item > a {
  display: inline-block;
  color: #3b3939;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
}
.column-toc__item > a::before {
  content: counter(column-toc-h2) ". ";
  color: #ee862a;
}
.column-toc__item > a:hover {
  text-decoration: underline;
}
@media screen and (min-width: 1200px) {
  .column-toc__item > a {
    font-size: 16px;
  }
}

.column-toc__sublist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-left: 20px;
}

.column-toc__subitem {
  list-style: none;
}
.column-toc__subitem a {
  color: #3b3939;
  font-size: 13px;
  line-height: 150%;
  text-decoration: none;
}
.column-toc__subitem a::before {
  content: "―";
  margin-right: 4px;
  color: #ee862a;
}
.column-toc__subitem a:hover {
  text-decoration: underline;
}
@media screen and (min-width: 1200px) {
  .column-toc__subitem a {
    font-size: 14px;
  }
}

/* ===== 本文 ===== */
.column-detail__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #3b3939;
  font-size: 14px;
  line-height: 150%;
}
.column-detail__content h2 {
  position: relative;
  margin-top: 40px;
  padding-left: 20px;
  font-size: 20px;
  font-weight: 400;
  line-height: 150%;
  scroll-margin-top: 105px;
}
.column-detail__content h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: #ee862a;
}
@media screen and (min-width: 1200px) {
  .column-detail__content h2 {
    margin-top: 60px;
    font-size: 24px;
    line-height: 36px;
    scroll-margin-top: 211px;
  }
}
.column-detail__content h3 {
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ee862a;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
  scroll-margin-top: 105px;
}
@media screen and (min-width: 1200px) {
  .column-detail__content h3 {
    margin-top: 30px;
    font-size: 20px;
    line-height: 36px;
    scroll-margin-top: 211px;
  }
}
.column-detail__content h4 {
  position: relative;
  margin-top: 10px;
  padding-left: 14px;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
.column-detail__content h4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: #ee862a;
}
@media screen and (min-width: 1200px) {
  .column-detail__content h4 {
    font-size: 17px;
    line-height: 150%;
  }
}
.column-detail__content p {
  font-size: 14px;
  line-height: 150%;
}
.column-detail__content img {
  max-width: 100%;
  height: auto;
  display: block;
}
.column-detail__content ul,
.column-detail__content ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
}
.column-detail__content ul li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 150%;
  list-style: none;
}
.column-detail__content ul li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ee862a;
}
.column-detail__content ol {
  counter-reset: column-detail-ol;
}
.column-detail__content ol li {
  counter-increment: column-detail-ol;
  list-style: none;
}
.column-detail__content ol li::before {
  content: counter(column-detail-ol) ".";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  background: none;
  color: #ee862a;
  font-weight: 700;
}
.column-detail__content a {
  color: #4ab6e6;
  text-decoration: underline;
}

/* ===== 執筆者 ===== */
.column-detail__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .column-detail__author {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 30px;
  }
}

.column-detail__author-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #d9d9d9;
}
.column-detail__author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (min-width: 1200px) {
  .column-detail__author-photo {
    width: 250px;
    height: 250px;
  }
}

.column-detail__author-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.column-detail__author-name {
  color: #3b3939;
  font-size: 20px;
  font-weight: 700;
}
.column-detail__author-name span {
  margin-left: 5px;
  color: #ee862a;
  font-size: 16px;
  font-weight: 400;
}
@media screen and (min-width: 1200px) {
  .column-detail__author-name {
    font-size: 24px;
  }
}

.column-detail__author-bio {
  color: #3b3939;
  font-size: 14px;
  line-height: 150%;
}
@media screen and (min-width: 1200px) {
  .column-detail__author-bio {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ===== シェア・一覧に戻る ===== */
.column-detail__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
@media screen and (min-width: 1200px) {
  .column-detail__actions {
    flex-direction: row;
    justify-content: center;
    gap: 30px;
  }
}

.column-detail__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  padding: 17px 37px;
  border-radius: 30px;
  border: 2px solid #80c46c;
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
  background: #80c46c;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .column-detail__share {
    width: 370px;
  }
}

.column-detail__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  padding: 17px 37px;
  border-radius: 30px;
  border: 2px solid #80c46c;
  background: #fff;
  color: #80c46c;
  font-size: 16px;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .column-detail__back {
    width: 370px;
  }
}

/* ===== 関連記事 ===== */
.column-detail__related {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.column-detail__related-title {
  color: #ee862a;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .column-detail__related-title {
    font-size: 32px;
  }
}

.work-detail {
  background: #fff3e5;
}

.work-detail__inner {
  box-sizing: border-box;
  padding: 50px 15px 86px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .work-detail__inner {
    padding: 50px 30px 86px;
  }
}
@media screen and (min-width: 1200px) {
  .work-detail__inner {
    padding: 100px 43px 330px;
    gap: 100px;
  }
}

/* ===== アイキャッチ ===== */
.work-detail-hero {
  position: relative;
  width: 100%;
}

.work-detail-hero__main {
  width: 100%;
  aspect-ratio: 345/229.77;
  overflow: hidden;
}
.work-detail-hero__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (min-width: 1200px) {
  .work-detail-hero__main {
    aspect-ratio: 1200/799.2;
  }
}

.work-detail-hero__sub {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: -30px;
  width: 70px;
  aspect-ratio: 70.38/136.62;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  overflow: hidden;
}
.work-detail-hero__sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (min-width: 1200px) {
  .work-detail-hero__sub {
    right: 102px;
    bottom: -60px;
    width: 244.8px;
    border-radius: 16px;
  }
}

/* ===== タイトル・概要 ===== */
.work-detail__content-head {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
@media screen and (min-width: 1200px) {
  .work-detail__content-head {
    gap: 30px;
  }
}

.work-detail__title {
  color: #3b3939;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.26px;
}
@media screen and (min-width: 1200px) {
  .work-detail__title {
    font-size: 24px;
    letter-spacing: 0.36px;
  }
}

.work-detail__text {
  color: #3b3939;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.98px;
}
@media screen and (min-width: 1200px) {
  .work-detail__text {
    font-size: 16px;
    letter-spacing: 1.12px;
  }
}

/* ===== メタ情報ボックス（サイトURL・担当範囲・使用ツール・制作期間） ===== */
.work-detail__content-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.work-detail__box {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.work-detail__box-title {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #3b3939;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.12px;
}
.work-detail__box-title::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 5px;
  height: 30px;
  background: #ee862a;
}
@media screen and (min-width: 1200px) {
  .work-detail__box-title {
    font-size: 18px;
    letter-spacing: 1.26px;
  }
}

.work-detail__box-text {
  padding-left: 20px;
  color: #3b3939;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.98px;
}
@media screen and (min-width: 1200px) {
  .work-detail__box-text {
    font-size: 16px;
    letter-spacing: 1.12px;
  }
}

.work-detail__box-text--link a {
  color: #4ab6e6;
  text-decoration: underline;
  word-break: break-all;
}

.work-detail__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: 20px;
}

.work-detail__box-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 5px;
  border: 2px solid #4f489c;
  color: #4f489c;
  font-size: 14px;
  font-weight: 500;
}

/* ===== ギャラリー（詳細画像帯） ===== */
.work-detail-gallery {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 30px 0;
}
@media screen and (min-width: 1200px) {
  .work-detail-gallery {
    padding: 50px 0;
  }
}

.work-detail-gallery__row {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 0 20px;
}
@media screen and (min-width: 1200px) {
  .work-detail-gallery__row {
    justify-content: center;
    gap: 30px;
    padding: 0 20px;
  }
}

.work-detail-gallery__row img {
  flex-shrink: 0;
  height: 180px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.work-detail-gallery__row img:hover {
  transform: scale(1.03);
}
@media screen and (min-width: 1200px) {
  .work-detail-gallery__row img {
    height: 320px;
    border-radius: 16px;
  }
}

/* ハニーポット（スパムボット対策用の非表示項目） */
.hp-field-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.contact {
  padding: 50px 0;
  background: #fff3e5;
}
@media screen and (min-width: 1200px) {
  .contact {
    padding: 100px 0;
  }
}

.contact__inner {
  margin-inline: auto;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .contact__inner {
    max-width: 800px;
    padding-right: 0;
    padding-left: 0;
  }
}

.contact__text {
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.4px;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .contact__text {
    font-size: 24px;
    letter-spacing: 1.68px;
    padding-right: 20px;
    padding-left: 20px;
  }
}

.contact__form {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-right: 20px;
  padding-left: 20px;
}
@media screen and (min-width: 768px) {
  .contact__form {
    gap: 50px;
  }
}
.contact__form button {
  margin-right: auto;
  margin-left: auto;
}

.contact__actions {
  display: flex;
  justify-content: center;
}

.contact__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
}

.contact__head {
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.2px;
}
.contact__head span.--must {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.2px;
  position: relative;
  display: inline-block;
}
.contact__head span.--must::after {
  content: "必須";
  position: absolute;
  top: calc(50% + 1px);
  translate: 0 -50%;
  left: calc(100% + 14px);
  font-size: 12px;
  line-height: normal;
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: #ff8262;
  white-space: nowrap;
  color: #fff3e5;
}

.contact__data {
  border-radius: 10px;
  border: 1px solid #000;
  background: #fff;
  overflow: visible;
  height: auto;
  width: 100%;
}

.contact__acceptance a {
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 2.7px;
}
@media screen and (min-width: 1200px) {
  .contact__acceptance a {
    font-size: 18px;
  }
}
.contact__acceptance span {
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 2.7px;
}
@media screen and (min-width: 1200px) {
  .contact__acceptance span {
    font-size: 18px;
  }
}

/* scope: お問い合わせページのフォームだけ */
/* Contact acceptance: 強制的に表示させる */
.contact .wpcf7-acceptance label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.contact .wpcf7-acceptance input[type=checkbox] {
  appearance: checkbox;
  -webkit-appearance: checkbox;
  display: inline-block !important;
  position: static !important;
  opacity: 1 !important;
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
}

.contact .wpcf7-acceptance .wpcf7-list-item {
  margin: 0 !important;
}

.contact .wpcf7-acceptance a {
  text-decoration: underline;
}

/* 送信ボタン：アウトライン + シャドウ（Figma仕様） */
.contact input[type=submit].button.btn,
.contact button.button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  padding: 17px 37px;
  border-radius: 30px;
  border: 2px solid #ff8262;
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
  background: #fffaf2;
  color: #ff8262;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.26px;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .contact input[type=submit].button.btn,
  .contact button.button.btn {
    width: 390px;
    font-size: 24px;
  }
}

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
select,
textarea {
  border-radius: 0;
  width: 100%;
  height: 50px;
  border: none;
  padding: 12px 24px;
  background: transparent;
  font: inherit;
  line-height: 1.6;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=url]::placeholder,
select::placeholder,
textarea::placeholder {
  color: #5a5a5a;
}

textarea {
  min-height: 300px;
  resize: vertical;
}

.contact__data-checkbox {
  margin-right: auto;
  margin-left: auto;
}

.contact__data-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.contact__acceptance a {
  text-decoration: underline;
  color: #3b3939;
}

.thanks {
  padding: 50px 0;
  background: #fff3e5;
}
@media screen and (min-width: 1200px) {
  .thanks {
    padding: 100px 0;
  }
}

.thanks__inner {
  text-align: center;
}

.thanks__button {
  margin-top: 60px;
}
@media screen and (min-width: 768px) {
  .thanks__button {
    margin-top: 100px;
  }
}

body.error404 {
  background: #fff3e5;
  padding: 0;
}

.error404-page {
  padding: 50px 0;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .error404-page {
    padding: 100px 0;
  }
}

.error404__button {
  margin-top: 60px;
}
@media screen and (min-width: 768px) {
  .error404__button {
    margin-top: 100px;
  }
}

.privacy {
  background: #fff3e5;
  padding: 50px 0 30px;
}
@media screen and (min-width: 1200px) {
  .privacy {
    padding: 100px 0 30px;
  }
}

.privacy__inner {
  max-width: 1200px;
  text-align: left;
  margin-right: auto;
  margin-left: auto;
}
.privacy__inner h1 {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.privacy__content {
  margin-top: 30px;
}
.privacy__content h2 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 30px;
}

.privacy__footer {
  margin-top: 30px;
}

@media screen and (min-width: 600px) {
  .hidden-sm {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .hidden-md {
    display: none;
  }
}
@media screen and (min-width: 900px) {
  .hidden-lg {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  .hidden-xl {
    display: none;
  }
}
.visuallyhidden {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  white-space: nowrap;
  width: 1px;
}