/*基本*/
/* PC（基本）は非表示にする */
.sp-only {
  display: none;
}

/*ヘッダー文字*/
.c-gnav>.menu-item>a .ttl {
 font-weight: 600;
}


/*ヘッダーTOP時の下線位置*/
[data-scrolled="false"] .c-gnav>.menu-item>a:after {
  bottom: 2rem !important;
}


/* スマホサイズ（例: 767px以下）で表示する */
@media screen and (max-width: 599px) {
  .sp-only {
    display: block;
    /* または inline */
  }
}

/*アドレス斜体打消し*/
.tdc-address {
  font-style: normal;
}

/*topページのフッター上余白*/
.l-content {
  margin-bottom: 0 !important;
}

/*topページのフッター上余白フッター直前にコンテンツがある場合*/
.w-beforeFooter {
  margin-top: 0 !important;
}

/*サービス下ボタンCSS*/
.paint-background {
  background: linear-gradient(135deg, #fff 60%, #eee 100%);
  background-blend-mode: multiply;
  padding: 2rem;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
}

.custom-button-area {
  padding-top: 1rem;

}

.custom-button {
  display: block;
  /* 親要素の幅いっぱいに広げる */
  width: 100%;
  /* 親要素の幅いっぱいに広げる */
  padding: 15px 20px;
  background-color: #4169e1;
  /* 黒背景 */
  color: #fff;
  /* 白文字 */
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  overflow: hidden;
  /* ホバーアニメーションではみ出る部分を隠す */
  position: relative;
  z-index: 1;
  /* ホバー要素より前面に */
  transition: color 0.4s ease-in-out;
  /* 文字色の変化を滑らかに */
}

.custom-button-red {
  background-color: #ff4500;
}

.custom-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #333, rgb(106, 141, 175));
  /* グラデーションの背景 */
  transform: translateX(-100%);
  /* 左に隠しておく */
  transition: transform 0.4s ease-in-out;
  /* 変形を滑らかに */
  z-index: -1;
  /* ボタンの下に配置 */
}

.custom-button-red::before {
  background: linear-gradient(45deg, #333, rgb(255, 105, 180));

}

.custom-button:hover {
  color: #fff;
  /* ホバー時の文字色（変化なしでも良いが見やすさのため記載） */
}

.custom-button:hover::before {
  transform: translateX(0);
  /* 左からスライドして表示 */
}


/*アーカイブサブタイトル消し*/
.c-pageTitle__subTitle {
  display: none;
}

/*セクションアニメーション*/
/* フェードイン：シンプルに */
.info-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.info-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* フリップ：上からペロン */
.info-flip {
  opacity: 0;
  transform: perspective(800px) rotateX(-90deg);
  transform-origin: top center;
  transition: opacity 0.6s ease, transform 0.6s ease;
  backface-visibility: hidden;
}

.info-flip.in-view {
  opacity: 1;
  transform: perspective(800px) rotateX(0deg);
}

/*ボタンの↓貼り付け*/
.button-arrangement {
  position: relative;
}

.button-arrangement .consult-link-box {
  position: absolute;
  bottom: 1rem;
}

.consult-link-box a {
  margin-inline-end: 1.2rem;
}

.consult-link-box a:nth-of-type(2) {
  color: #F06A00;
}

.button-arrangement .swell-block-button {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}


/*カラムblockのborder打消し*/
.is-style-clmn-border>.swell-block-columns__inner>.swell-block-column.no-border {
  border: none;
}


/*service*/
#body-work {
  padding-top: 2rem;
}


#service .service-course .swell-block-columns__inner {
  justify-content: flex-start;
}

.price-box ul {
  padding-left: 0 !important;
}

.price-box li {
  list-style: none !important;
}

.price-box .swell-block-accordion__title {
  padding: 0.5em;
}

.service-photo .service-box-text {
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 !important;
}

.service-photo .service-box:hover {
  transform: translateY(0);
  box-shadow: none;

}

.service-group-text {
  padding-inline: 1rem;
}


.price-box .service-box-text {
  flex-direction: column;
  justify-content: flex-start;
}

.price-box .service-box:hover {
  transform: translateY(0);
  box-shadow: none;

}

.service-menu-panel img {
  width: 200px;
  border-radius: 50%;
  transition: transform 0.3s ease-in-out;
}

@media screen and (max-width: 960px) {
  .service-menu-panel img {
    width: 120px;
  }
}


.service-menu-panel .swell-block-column {
  border-radius: 20px;
  background-color: #F0FDFA;
  text-align: center;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.service-menu-panel .swell-block-column:hover img {
  transform: scale(1.1);
}

.service-menu-panel .swell-block-column:hover {
  background-color: #b4f0e7;
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* 「詳しく見る」を矢印付きボタン風に */
.service-menu-panel .link-circle p.arrow-point {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #0f766e;
  text-align: center;
  width: fit-content;
  position: relative;
}

/* 矢印は疑似要素で付与 */
.service-menu-panel .link-circle p.arrow-point::after {
  content: "→";
  display: inline-block;
  transform: translateX(0);
  transition: transform 0.25s ease;
}

/* カラムにマウスオンで矢印だけ動かす */
.service-menu-panel .swell-block-column:hover .link-circle p.arrow-point::after {
  transform: translateX(6px);
}

@media screen and (max-width: 960px) {
  .link-circle .wp-block-columns {
    flex-direction: column-reverse;
  }

}



.service-menu-panel .swell-block-columns__inner {
  justify-content: center !important;
}

.service-photo img {
  transition: transform 0.3s ease-in-out;
}

@media screen and (max-width: 599px) {
  .service-photo img {
    aspect-ratio: 16 / 9 !important;
  }
}

.service-photo figure {
  overflow: hidden;
}

.service-photo:hover img {
  transform: scale(1.2);
}

.service-plate {
  padding: 2.5rem;
  border-radius: 20px;
}

@media screen and (max-width: 960px) {
  .service-plate {
    padding: 2.5rem 0;
  }
}

.fuzzy-panel {
  background:
    radial-gradient(circle at 90% 10%,
      rgba(180, 240, 231, 0.32),
      /* 色を濃く */
      rgba(255, 255, 255, 0) 10%
      /* 40%で消える＝小さめ */
    ),
    #f8fafc;
  border-radius: 32px;
}

.service-boxs {
  border-radius: 20px;
  background-color: #fff;
  overflow: hidden;
}

/* カード全体 */
.service-box {
  position: relative;
  cursor: pointer;
  perspective: 1000px;
}

.touch-point {
  position: absolute;
  top: 20px;
  left: 35px;

  animation: finger-tap 1.8s ease-in-out infinite;
  transform-origin: center bottom;
}

/* 指の動き */
@keyframes finger-tap {
  0% {
    transform: translateY(0) scale(1);
  }

  15% {
    transform: translateY(3px) scale(0.9);
  }

  30% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/* 波紋 */
.touch-point::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgb(255, 255, 255, .45);

  animation: ripple 1.8s ease-out infinite;
  pointer-events: none;
}

@keyframes ripple {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}




/* 回転させる中身 */
.service-box-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s;
}

/* クリック後：めくる */
.service-box.is-flipped .service-box-inner {
  transform: rotateY(180deg);
}

/* 表面・裏面 共通設定 */
.service-box-front,
.service-box-text {
  backface-visibility: hidden;
}

/* カード全体 */
.service-box {
  transition: transform .25s ease, box-shadow .25s ease;
  transform: translateY(0);
  will-change: transform;
}

/* ホバーで浮き上がる */
.service-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(0, 0, 0, .18);
}

@media screen and (max-width: 599px) {
  .service-box:hover {
    transform: translateY(0);
  }
}


/* 裏面：表面と同じエリアにかぶせる */
.service-box-text {
  position: absolute;
  inset: 0;
  /* top:0; right:0; bottom:0; left:0; と同じ */
  padding: 1.5rem;
  /* お好みで */
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

/* 中のグループがカード幅いっぱいになるように */
.service-box-text .wp-block-group {
  width: 100%;
  height: 100%;
}

/*お届けまでの△マーク位置調整*/
.square-mark-box {
  position: relative;
  border-radius: 20px;
  background-color: #fff;

}

.square-mark {
  position: absolute;
  top: 100px;
  right: -25px;
}

@media screen and (max-width: 599px) {
  .square-mark {
    display: none;
  }
}

.accent-circle {
  position: relative;
  text-align: center;
}

.accent-circle span {
  position: relative;
  display: inline-block;
  /* アイコンの位置基準をつくる */
  z-index: 1;
}

.accent-circle::before {
  content: "";
  position: absolute;
  inset: 50%;
  /* いったん中央に置く */
  width: 41px;
  /* 背面の円の大きさ（必要なら調整） */
  height: 41px;
  background-color: #ccfbf1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* 完全中央配置 */
}



/* リッチカラムの装飾（対象カラムに .has-deco を付けて使う） */
.has-deco {
  position: relative;
  border-radius: 20px;
  overflow: hidden
}

.has-deco::before {
  content: "";
  position: absolute;
  top: -40px;
  /* 調整：扇がどれだけはみ出すか */
  right: -40px;
  width: 100px;
  height: 100px;

  /* 扇形にするクリップ */
  clip-path: circle(100% at 100% 0);
  /* → 右上を中心に円を切り出す
     ＝ 扇形になる
  */

  z-index: 1;
  /* 背面にまわす。必要なら数値調整 */
}

/* --- 色バリエーション --- */

/* 水色 */
.deco-blue::before {
  background: #2ca6d9;
}

/* 赤系 */
.deco-red::before {
  background: #e4585d;
}

/* 緑系 */
.deco-green::before {
  background: #44b37f;
}

/* 黄系 */
.deco-yellow::before {
  background: #f4c542;
}

/* コーラルピンク */
.deco-pink::before {
  background: #F8A8A8;
}

.body-work-text-box {
  padding: 0 1rem 2rem;
  background-color: #fff;
}

.price-box {
  border-radius: 20px;
}

.price-point {
  position: relative;
}

.price-point .service-box-text {
  padding: 0;
}


.price-point-label {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}


.btn-first {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  padding: 8px 24px;
  /* ボタンの大きさ調整 */
  border-radius: 9999px;
  /* カプセル形 */
  text-align: center;
  font-weight: 600;
}

.btn-first-blue {
  background-color: #e3f0ff;
  /* 薄い水色 */
  color: #1e6fff;
  /* 文字の青色 */
}

.btn-first-black {
  background-color: #F2F3F4;
  /* 薄い灰色 */
  color: #3B3F45;
  /* 文字の黒 */
}

.btn-first-orange {
  background-color: #FFEFD6;
  /* 薄い赤 */
  color: #F06A00;
  /* 文字のオレンジ */
  white-space: nowrap;
}

.btn-first-blue {
  background-color: #2563eb;
  /* 薄い赤 */
  color: #fff;
  /* 文字の白 */
  white-space: nowrap;
}


.font-orange.has-swl-deep-04-color {
  color: #F06A00 !important;
}

.is-style-clmn-border>.swell-block-columns__inner>.swell-block-column.border-orange {
  border: 4px solid #F06A00;
}

.is-style-clmn-border>.swell-block-columns__inner>.swell-block-column.border-blue {
  border: 4px solid #2563eb;
}

.service-price-box .white-plate {
  border: 2px solid #cecece;

}

.service-price-box .white-plate:nth-of-type(1) {
  border: 2px solid #2563eb;
}

.service-price-label {
  background-color: #2563eb;
  padding-block: 0.5rem;
}

.service-price-label-2 {
  background-color: #3B3F45;
  padding-block: 0.5rem;

}


.service-price-contents {
  padding: 0.5rem 2rem 2rem;
}

.service-price-text {
  border-radius: 20px;
  background-color: #eaf4ff;
  padding: 1rem;
}

/*お客様こえ*/
/* ==============
   Voice Cards
============== */

.voice-cards__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* PC: 4列（25%） */
.voice-card {
  width: calc(25% - 18px);
  /* gap分をざっくり調整 */
}

@media screen and (max-width: 960px) {
  .voice-card {
    width: calc(50% - 18px);
    /* gap分をざっくり調整 */
  }
}



.voice-card__link {
  display: block;
  position: relative;
  /* アバター固定に必要 */
  height: 100%;
  background: #fff;
  border-radius: 18px;
  padding: 26px 26px 28px;
  border: 1px solid rgba(15, 118, 110, .08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* アイコン基準の区切り線 */
.voice-card__link::after {
  content: "";
  position: absolute;
  left: 49px;
  /* アイコン中央基準 */
  right: 26px;
  /* 右余白 */
  bottom: 78px;
  /* ← ここが超重要（アイコンより少し上） */
  height: 1px;
  background: rgba(15, 118, 110, .12);
}


.voice-card__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .10);
}

/* 画像は「丸いアバター」として下部に配置 */
.voice-card__thumb {
  position: absolute;
  left: 26px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  overflow: hidden;
  background: #f3f5f5;
  border: 1px solid rgba(15, 118, 110, .12);
}

.voice-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* サムネ無い時の丸プレースホルダー */
.voice-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15, 118, 110, .10), rgba(15, 118, 110, .03));
}

/* 本文ブロック：下部にアバター/名前領域の余白を確保 */
.voice-card__body {
  padding-bottom: 62px;
  /* アバター＆名前分のスペース */
}

/* タグ（ピル） */
.voice-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(180, 240, 231, .55);
  /* ふわっとミント */
  color: #0f766e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 14px;
}

/* タイトル */
.voice-card__title {
  font-size: 18px;
  line-height: 1.55;
  font-weight: 800;
  margin: 0 0 16px;
}

/* 本文 */
.voice-card__text {
  font-size: 14px;
  line-height: 1.9;
  color: rgba(15, 23, 42, .78);
  /* slate系 */
  margin: 0;
  position: relative;
  padding-bottom: 26px;
  margin-bottom: 22px;
}

.voice-card__text::after {
  content: none;
}


/* カスタムフィールド名（40代・男性など） */
.voice-card__name {
  position: absolute;
  left: 26px;
  bottom: 24px;
  padding-left: 58px;
  /* アバター分 */
  font-size: 14px;
  font-weight: 800;
  color: rgba(15, 23, 42, .85);
  margin: 0;
}

/* SWELLの .post_content h3 などが voiceカードに干渉するのを遮断 */
.voice-cards .voice-card__title {
  margin: 0 0 16px !important;
  line-height: 1.55 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  position: static !important;
  /* SWELL側の position:relative を無効化 */
}

/* 念のため、カード内の見出し全般を落ち着かせる（他にh2/h4使っても崩れない） */
.voice-cards .voice-card__body h2,
.voice-cards .voice-card__body h3,
.voice-cards .voice-card__body h4 {
  margin-top: 0 !important;
}

/* SWELLがdt等に当てる太字指定が回り込むケースがあるので、カード本文側は通常へ */
.voice-cards .voice-card__text {
  font-weight: 400 !important;
}

/* SP: 1列（100%） */
@media (max-width: 599px) {
  .voice-card {
    width: 100%;
  }
}

.more-voice {
  text-align: center;
}

.more-voice-link {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: #0f766e;
  text-decoration: none;
  padding-bottom: 6px;
  position: relative;
  transition: color 0.3s ease;
}

/* 下線（初期色） */
.more-voice-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #b4f0e7;
  transition: background-color 0.3s ease, transform 0.3s ease;
  transform-origin: center;
}

/* ホバー */
.more-voice-link:hover::after {
  background-color: #0f766e;
  /* 文字色と同じ */
  transform: scaleX(0.65);
  /* さりげない動き */
}

/*faq*/
.faq-box h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f766e;
  ;
}

.faq-box .swell-block-accordion__item {
  border-radius: 10px;
}


.faq-box .swell-block-accordion__label {
  position: relative;
  padding-left: 48px;
  /* Q分の余白 */
}

.faq-box .swell-block-accordion__label::before {
  content: "Q";
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #E6E6E6;
  color: #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.faq-box .is-opened {
  background-color: #F0FDFA;
}

.faq-box .is-opened .swell-block-accordion__label::before {
  background-color: #0f766e;
  color: #fff;
}

.faq-box .swell-block-accordion__body p {
  position: relative;
  padding-left: 48px;
  /* Aマーク分の余白 */
}

.faq-box .swell-block-accordion__body p::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 0;
  /* 文章の1行目に合わせる */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #b4f0e7;
  background-color: #fff;
  color: #0f766e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.faq-box .swell-block-accordion__body {
  margin: 0 !important;
}

/*おしらせ・コラム*/

/* リスト本体 */
.info-list2 {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  padding-left: 0 !important;
}

/* 行 */
.info-list2__item+.info-list2__item {
  border-top: 1px solid rgba(15, 118, 110, .08);
}

/* 行リンク（横並び） */
.info-list2__link {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 26px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    background-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.info-list2__arrow {
  transition: transform .2s ease, color .2s ease;
}

/* hover時：ほんのり浮く */
.info-list2__link:hover {
  background-color: #b8f2ea;
  /* ちょい濃いミント */
  transform: translateY(-1px);
  /* ← これが効く */
  box-shadow: 0 4px 10px rgba(15, 118, 110, .12);
}

.info-list2__link:hover .info-list2__arrow {
  transform: translateX(4px);
  color: rgba(15, 23, 42, .45);
}


/* 日付 */
.info-list2__date {
  font-weight: normal;
  font-size: 14px;
  color: rgba(15, 23, 42, .55);
  letter-spacing: .02em;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* バッジ */
.info-list2__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: .04em;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* タイトル */
.info-list2__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  flex: 1 1 auto;
  min-width: 0;
}

/* 右矢印 */
.info-list2__arrow {
  margin-left: auto;
  font-size: 22px;
  color: rgba(15, 23, 42, .25);
  flex: 0 0 auto;
}

/* hover */
.info-list2__link:hover .info-list2__arrow {
  color: rgba(15, 23, 42, .45);
}

/* ===== バッジ色分け（スラッグで出し分け） ===== */
.info-list2__badge--news {
  background: rgba(59, 130, 246, .12);
  /* 青系 */
  color: #2563eb;
}

.info-list2__badge--column {
  background: rgba(45, 212, 191, .18);
  /* ミント系 */
  color: #0f766e;
}

/* SP調整 */
@media (max-width: 599px) {
  .info-list2__link {
    gap: 12px;
    padding: 12px 12px;
  }

  .info-list2__title {
    font-size: 16px;
  }

  .info-list2__link {
    flex-wrap: wrap;
    /* 折り返し許可 */
    align-items: flex-start;
  }

  /* 日付 */
  .info-list2__date {
    order: 1;
    font-size: 13px;
  }

  /* バッジ（NEWS / COLUMN） */
  .info-list2__badge {
    order: 2;
    margin-left: 8px;
  }

  /* タイトルは必ず次の行へ */
  .info-list2__title {
    order: 3;
    width: 100%;
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.6;
  }

  /* 右矢印はSPでは非表示 */
  .info-list2__arrow {
    display: none;
  }
}


/*アクセス部分*/
.access-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  color: #333;
}

.access-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* 左側のボタン */
.access-line-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  padding: 8px 8px;
  border-radius: 8px;
  border: 1px solid #27b8a3;
  background: #f5fffd;
  color: #27b8a3;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  box-sizing: border-box;
  font-size: 12px;
}

.access-text {
  font-weight: 500;
}

/* 「徒歩10分」を強調 */
.access-walk {
  font-weight: 700;
  color: #27b8a3;
}

.white-plate {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  min-height: 350px;
}

@media (max-width: 599px) {
  :root {
    --swl-pad_container: 8px;
    /* ← 好きな値に調整（デフォルト16px） */
  }
}

/*コンタクト*/
#contact .swell-block-columns__inner {
  justify-content: center !important;
}


.contact-plate {
  border: 1px solid #e4585d;
  border-radius: 12px;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background-color .25s ease;
}

.contact-plate>a.link-column {
  display: block;
  width: 100%;
  height: 100%;

  /* リンクの見た目を消す */
  text-decoration: none;
  color: inherit;
}

.contact-plate>a.link-column>.wp-block-columns {
  height: 100%;
}

.contact-plate:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
  border-color: #0f766e;
  background-color: #f0fdfa;
}

/* 5) 画像やSVGがhover/クリックを邪魔する時の保険（リンク専用ボックスならOK） */
.contact-plate>a.link-column * {
  pointer-events: none;
}

@media (max-width: 599px) {
  .square-img img {
    width: 130px !important;
  }
}




/*プロフィール*/
.profile-photo {
  position: relative;
}

.profile-photo img {
  border-radius: 50%;
  width: 320px;
  border: 8px solid #fff;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.18),
    0 35px 70px -15px rgba(0, 0, 0, 0.35);
}

@media screen and (max-width: 599px) {
  .profile-photo img {
    width: 256px;
  }
}

figure.profile-photo {
  position: relative;
}

/* 名前プレート（beforeに変更） */
figure.profile-photo::before {
  content: "Kuniko Yoshida";
  position: absolute;
  right: 19%;
  bottom: -14px;
  padding: 6px 18px;
  background-color: #fff;
  border-radius: 999px;
  font-family: "Kaushan Script", cursive;
  font-size: 18px;
  font-weight: 700;

  color: #0f766e;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  white-space: nowrap;
  z-index: 2;
}

@media screen and (max-width: 599px) {
  figure.profile-photo::before {
    right: 19%;
  }
}

/* PROFILE フルワイド背景装飾 */
#profile {
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

/* 右側 斜めの薄水色背景 */
#profile::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  /* だいたい1/3〜少し余裕 */
  height: 100%;
  background-color: #F0FDFA;

  /* 斜めカット */
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 40% 100%);
  z-index: 0;
}

/* 中身を前面に */
#profile>* {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 599px) {
  .profile-box .swell-block-columns__inner {
    flex-direction: column-reverse;
  }
}

.profile-list {
  row-gap: 0 !important;
}


/*fvグラスプレート*/
.glass-box {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 32px;
  padding: 3rem 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  /* ほんのり影 */
}

@media screen and (max-width: 599px) {
  .glass-box {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /*ブログパーツSP時位置調整*/
  .p-mainVisual__textLayer {
    top: 70px;
  }


}

.fv-button.is-style-btn_line a {
  border: 2px solid;
}

.fv-button {
  --the-padding: calc(.75em - 2px) 1.5em;
}

.fv-one-point img {
  vertical-align: -5px;
  /* 数値は微調整 */
}

/*fvスクロール*/
.scroll-indicator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 左右センタリング */
  top: -100px;
  /* 好きな位置に調整 */
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  animation: float 2.0s ease-in-out infinite;
  /* ふわふわ */
}

@media screen and (max-width: 599px) {
  .scroll-indicator {
    top: -60px;
  }
}

.scroll-text {
  display: block;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: #0f766e;
  margin-bottom: 6px;
  font-weight: 600;
}

.scroll-line {
  display: block;
  width: 2px;
  height: 40px;
  margin: 0 auto;
  background-color: #0f766e;
  animation: scrollAnim 1.4s ease-in-out infinite;
  /* 縦棒の伸び縮み */
}

@media screen and (max-width: 599px) {
  .scroll-line {
    height: 20px;
  }
}

/* 縦棒の伸び縮み */
@keyframes scrollAnim {
  0% {
    transform: scaleY(0.3);
    opacity: 0.4;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }

  100% {
    transform: scaleY(0.3);
    opacity: 0.4;
  }
}

/* 全体ふわふわ上下 */
@keyframes float {
  0% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -12px);
  }

  100% {
    transform: translate(-50%, 0);
  }
}

.post_content hr.section-line {
  border-bottom: 4px solid #0f766e !important;
  max-width: 50px !important;
}

.concept-photo {
  position: relative;
  overflow: visible;
}

.concept-photo img {
  border-radius: 20px;
}

.concept-box {
  position: relative;
  z-index: 1;
  /* 必須 */
}

.concept-box::before {
  content: "";
  position: absolute;
  top: 12px;
  /* ← 好きなズレ量に調整してOK */
  right: 12px;
  /* ← 右下にズラしたいので + 値 */
  width: 100%;
  height: 100%;
  border: 2px solid #b4f0e7;
  /* 薄い水色ライン */
  border-radius: 20px;
  /* 画像と同じ角丸に揃える */
  z-index: -1;
  /* 背面へ */
  box-sizing: border-box;
  transition: all 0.35s ease-out;
  /* ← ふわっと動く */
}

/* ホバー時の動き（少し浮く感じ） */
.concept-box:hover::before {
  top: 6px;
  /* 上方向へ少し戻す */
  right: 6px;
  /* 左方向へ少し戻す */
  opacity: 1;
}

.concept-photo .wp-block-cover__inner-container {
  position: absolute;
  width: 130px;
  bottom: -40px;
  right: -25px;
  border-radius: 50%;
  background-color: #fff;
  display: inline-block;
  /* transformを効かせるため */
  animation: slow-rotate 20s linear infinite;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.15));
}

@media screen and (max-width: 599px) {
  .concept-photo .wp-block-cover__inner-container {
    right: 0;
  }
}

/* 1119px以下のときだけ画像を差し替える */
@media (max-width: 1119px) {
  .concept-photo {
    background-image: url('https://kobe-walking.com/wp-content/uploads/2025/12/PXL_20250928_032755850-scaled.jpg');
    /* ←SP用画像 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
  }

  /* 元のカバー画像 <img> は見た目だけ消す */
  .concept-photo>img.wp-block-cover__image-background {
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes slow-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*お悩みセクション*/
/* 元の設定を引き継ぎつつ、ホバー演出に必要な準備を追加 */
.trouble-plate .swell-block-column {
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid transparent;
  /* ホバー時の枠線が出てもレイアウトがズレない */
  transition:
    box-shadow .3s ease,
    transform .3s ease,
    border-color .3s ease,
    background-color .3s ease;
}

.trouble-plate .swell-block-columns__inner {
  justify-content: center;
}


/* ホバーしたら浮き上がるカード風エフェクト */
.trouble-plate .swell-block-column:hover {
  border-color: #b4f0e7;
  /* 指定枠線色 */
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.08);
  /* ふわっと */
  transform: translateY(-4px);
  /* 少し上に浮かせる */
}

/* 画像にもスムーズなアニメーションを設定 */
.trouble-plate .trouble-image img {
  transition: transform .3s ease;
  transform-origin: center;
  /* 中心からズーム */
}

/* カードにホバーしたら画像も一緒にズーム */
.trouble-plate .swell-block-column:hover .trouble-image img {
  transform: scale(1.2);
}

.is-link-box {
  cursor: pointer;
}



/*サービスセクション*/
.section-title {
  position: relative;
  padding-left: 14px;
  /* 文字の左に余白 */

}

.section-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  /* ライン太さ */
  height: 100%;
  /* 文字高さに合わせる */
  background-color: #0f766e;
  /* 指定色 */
  border-radius: 2px;
  /* 角を少し丸く */
}



.consult-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #0f766e;
  text-decoration: none;
}

.arrow-icon {
  width: 12px;
  height: 12px;
}

.consult-link:hover {
  text-decoration: underline;
}

/*タブレット調整*/
@media screen and (max-width: 960px) {
  .font22 {
    font-size: 30px !important;
  }

  .font20 {
    font-size: 24px !important;
  }

}


/*spフォント調整*/
@media screen and (max-width: 599px) {
  .font20 {
    font-size: 20px !important;
  }

  .font22 {
    font-size: 22px !important;
  }

  .font17 {
    font-size: 17px !important;
  }

  .font16 {
    font-size: 16px !important;
  }

  .font14 {
    font-size: 14px !important;
  }

  .font13 {
    font-size: 13px !important;
  }

  .font12 {
    font-size: 12px !important;
    --the-fz: 12px;
  }

  .font9 {
    font-size: 9px !important;
  }
}

/*足跡*/
#trail-container {
  position: fixed;
  inset: 0;
  /* top/right/bottom/left: 0; と同じ */
  pointer-events: none;
  /* 足跡がクリック邪魔しないように */
  z-index: 9999;
  /* 最前面に出す（必要なら微調整） */
}

.trail {
  position: absolute;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* 軌跡用のフェードアウト */
.fadeout {
  animation: fadeout 1s ease-in-out forwards;
}

@keyframes fadeout {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* バースト（パーン！）演出用 */
.burst {
  animation: burstAnim 0.6s ease-out forwards;
}

@keyframes burstAnim {
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.5);
  }
}

/*フッター*/
.kobe-walking-footer {
  padding: 0 20px;
}

.kobe-walking-footer__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.kobe-walking-footer__logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
  background-color: #fff;
  border-radius: 50%;

}

.kobe-walking-footer__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1.2;
}

.kobe-walking-footer__links {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  gap: 18px;
  /* ← 横並びの余白だけ追加 */
}

.kobe-walking-footer__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  transition: transform .2s ease, opacity .2s ease;
}

.kobe-walking-footer__ig img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.kobe-walking-footer__ig:hover {
  transform: translateY(-2px);
  opacity: .9;
}

/* Squareロゴだけ大きく */
.kobe-walking-footer__ig.is-square img {
  width: 30px;
  height: auto;
}

.kobe-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
}

.kobe-phone__icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}

.kobe-phone__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.kobe-phone__number {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: .02em;
}

.kobe-phone__caption {
  font-size: 14px;
  margin-top: 4px;
  opacity: .9;
}

/* =========================
   フッター：PC prone 20% | 60% | 20%
   ========================= */

.w-footer.-col3 {
  display: flex;
}

.w-footer.-col3 .w-footer__box {
  flex: 0 0 auto;
  /* SWELLの flex:1 を無効化 */
  min-width: 0;
  /* はみ出し防止 */
}

/* 幅指定 */
.w-footer.-col3 .w-footer__box:nth-child(1) {
  flex-basis: 20%;
}

.w-footer.-col3 .w-footer__box:nth-child(2) {
  flex-basis: 60%;
}

.w-footer.-col3 .w-footer__box:nth-child(3) {
  flex-basis: 20%;
}


/* =========================
   タブレット・SP（〜960px）
   1列表示＋並び替え
   表示順：2 → 3 → 1
   ========================= */

@media (max-width: 960px) {
  .w-footer.-col3 {
    flex-direction: column;
  }

  /* 並び順 */
  .w-footer.-col3 .w-footer__box:nth-child(1) {
    order: 3;
  }

  .w-footer.-col3 .w-footer__box:nth-child(2) {
    order: 1;
  }

  .w-footer.-col3 .w-footer__box:nth-child(3) {
    order: 2;
  }

  /* 幅リセット */
  .w-footer.-col3 .w-footer__box {
    flex-basis: auto;
    width: 100%;
  }
}

/*sp時フッター余白削除*/
@media (max-width: 960px) {
  .w-footer__box+.w-footer__box {
    margin-top: 0 !important;
  }

  .w-footer__box {
    padding: 10px 0 0 !important;
  }
}

/*固定ページ用*/
.page-fv-glass-box .swell-block-columns__inner {
  justify-content: center !important;
}

.page-fv-glass-box .glass-box {

  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}

.page-plate-white {
  background-color: #fff;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  position: relative;
  border-radius: 10px;
}

@media screen and (max-width: 599px) {
  .page-plate-white {
    padding: 1rem;
  }
}

.page-plate-white ::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0ea5e9;
  /* 青プレート */
  border-radius: 20px;
  transform: translate(-8px, 0);
  /* ←ズラし量 */
  z-index: -1;
}

@media screen and (max-width: 599px) {
  .page-plate-white ::after {
    transform: translate(-4px, 0);
  }

}

.page-plate-pink {
  position: relative;
  /* ←疑似要素の基準 */
  background-color: #fdeded;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4585d;
  overflow: hidden;
  /* ←三角を角丸内に収める */
}

@media screen and (max-width: 599px) {
  .page-plate-pink {
    padding: 1rem;
  }
}

.page-plate-pink .wp-block-column {
  z-index: 2;
}

/* 右上の三角プレート */
.page-plate-pink::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 110px;
  height: 110px;
  background: #f9c9cc;
  /* 三角部分の薄いピンク */
  clip-path: polygon(35% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 0;
}

@media screen and (max-width: 599px) {
  .page-plate-pink::after {
    width: 80px;
    height: 80px;
  }
}

/* 右上の「！」 */
.page-plate-pink::before {
  content: "!";
  position: absolute;
  top: 18px;
  right: 35px;
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  opacity: .9;
  z-index: 1;

  /* ほんのり立体感（いらなければ消してOK） */
  text-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

@media screen and (max-width: 599px) {
  .page-plate-pink::before {
    right: 20px;
    font-size: 40px;
  }
}

.page-plate-blue {
  background-color: #e3f0ff;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

@media screen and (max-width: 599px) {
  .page-plate-blue {
    padding: 1rem;
  }
}

.page-plate-line {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.page-plate-line .wp-block-group {
  padding: 1rem !important;
}

.page-plate-text {
  padding: 0 1rem !important;
}

.page-approach-box {
  position: relative;
  padding: 2rem 2rem !important;
  border-radius: 24px;
  /* ガラス感の核 */
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  /* 枠線は「白すぎない」がコツ */
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* 黒背景に沈ませる影 */
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  /* 白ベタより少し抑える */
}

@media screen and (max-width: 599px) {
  .page-approach-box {
    padding: 1rem 1rem !important;
  }
}


/* ふわふわ（上下）アニメーション */
.page-approach-arrow {
  display: inline-block;
  /* transform を安定させる */
  animation: approachFloatY 1.6s ease-in-out infinite;
  will-change: transform;
}

/* ちょい強めにしたいなら duration や移動量を変えてOK */
@keyframes approachFloatY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  /* 上に10px */
}

.page-approach-box .swl-inline-icon:after {
  color: #F06A00;
}

/* 「推奨」バッジ */
.page-program-text {
  /* バッジが本文に被るのが気になるなら少し余白を足す */
  padding-top: 12px;
}

.page-program-text::before {
  content: "推奨";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  /* 画像の横長感に寄せる */
  height: 33px;
  border-radius: 10px;
  background: #10A6E6;
  /* 好きな青に調整OK */
  color: #fff;
  margin-right: 0.5rem;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;

  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  z-index: 1;
  pointer-events: none;
  /* クリック等を邪魔しない */
}

.page-program-box {
  background-color: #fff;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

@media screen and (max-width: 599px) {
  .page-program-box {
    padding: 1rem;

  }
}

.page-program-box .swell-block-columns__inner {
  justify-content: center !important;
}

.page-program-in-text {
  background-color: #e3f0ff;
  border-radius: 20px;
  padding: 0.5rem;
}

.mukumi-section .page-plate-blue {
  background-color: #fff;
}

.orthotics-fv .wp-block-cover__inner-container {
  text-align: center;
}

.orthotics-label {
  background-color: rgb(255, 255, 255, 0.8);
  padding: 0 20px;
  border: 1px solid #0f766e;
  border-radius: 9999px;
  display: inline-block;
}

.orthotics .white-plate {
  padding: 3rem;
}

@media screen and (max-width: 599px) {
  .orthotics .white-plate {
    padding: 1.5rem 1rem;
  }
}


.orthotics .page-plate-line {
  padding-block: 1rem;
  transition: transform .2s ease;

}

.orthotics .page-plate-line:hover {
  transform: translateY(-8px);
}

.orthotics-comparison .white-plate {
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #cecece;

}

/* 2番目の white-plate を基準にする */
.orthotics-comparison .white-plate:nth-of-type(2) {
  position: relative;
  overflow: visible;
}

/* 上部ラベル（テキスト） */
.orthotics-comparison .white-plate:nth-of-type(2)::before {
  content: "THE ORTHOTICS";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 26px;
  border-radius: 999px;
  background-color: #7fa88f;
  /* 例：くすみグリーン */
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}

.orthotics-change .square-mark-box {
  transition: transform .2s ease;
}

.orthotics-change .accent-circle {
  transition: transform .2s ease;
}

.orthotics-change .square-mark-box:hover .accent-circle {
  transform: scale(1.2);
}

.orthotics-change .square-mark-box:hover {
  transform: translateY(-8px);
}

.orthotics-feet-in-box {
  border-radius: 20px;
  overflow: hidden;
}

.glass-box-image {
  position: relative;
}

.glass-box-image figure {
  position: absolute;
  width: 280px;
  right: 35px;
  top: 18px;
  opacity: 1;
  transform: translateY(-25vh);
  animation: featherFall 4s ease-out forwards;
}

@media screen and (max-width: 599px) {
  .glass-box-image figure {
    width: 120px;
    right: 6px;
  }
}

@keyframes featherFall {
  0% {
    opacity: 0;
    transform: translateY(-35vh) translateX(0) rotate(0deg);
  }

  25% {
    opacity: 1;
    transform: translateY(-20vh) translateX(-14px) rotate(-2deg);
  }

  45% {
    transform: translateY(-8vh) translateX(16px) rotate(2deg);
  }

  65% {
    transform: translateY(10px) translateX(-10px) rotate(-1deg);
  }

  85% {
    transform: translateY(-4px) translateX(6px) rotate(0.5deg);
  }

  100% {
    transform: translateY(0) translateX(0) rotate(0);
  }
}