@charset "utf-8";
/* ==========================================================================
   top-custom.css  TOPページ固有
   ========================================================================== */

/* --------------------------------------------------------------------------
   メインビジュアル
   参考サイト（design_base_source/css/basis.css）の #slide-wrapper / #slideshow /
   #catch / .top_deco / .slide-img の指定をそのまま踏襲。
   ・#slide-wrapper：下120px余白
   ・#slideshow：1124px 中央寄せ（SPは100%）
   ・.slide-img：87vh（〜1200px:60vw、〜896px:50vw、〜639px:40vh）
   ・#catch：左下 / .top_deco：右下にはみ出して重なる
   -------------------------------------------------------------------------- */
#slide-wrapper {
  position: relative;
  margin-bottom: 120px;
  width: 100%;
  z-index: 0;
  --deco-top: 132px; /* あしらいをヘッダー上端まで伸ばす量＝ヘッダー高さ（28 + ロゴ64 + 40） */
}

/* MV背景のあしらい（左上 bg-deco-l.png / 右上 bg-deco-r.png：850×693）
   ・原寸850×693で左上／右上の角に配置し、スライダーの背面に薄く敷く
   ・画像自体がコーナー起点のボケ玉なので、左は left top・右は right top で揃える
   ・#slide-wrapper は <main> 内＝ヘッダーの下から始まるため、
     --deco-top ぶん上へずらしてページ最上端（ヘッダーの背面）から表示する */
#slide-wrapper::before,
#slide-wrapper::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--deco-top));
  width: 850px;
  max-width: 45%;
  aspect-ratio: 850 / 693;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

#slide-wrapper::before {
  left: 0;
  background: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28257/bg-deco-l.png) no-repeat left top / contain;
}

#slide-wrapper::after {
  right: 0;
  background: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28257/bg-deco-r.png) no-repeat right top / contain;
}

#slideshow {
  position: relative;
  width: 1124px;
  max-width: 100%; /* 参考サイトにはない指定。640〜1124px幅での横はみ出し防止 */
  margin-left: auto;
  margin-right: auto;
  z-index: 1; /* あしらい（::before / ::after）より前面 */
}

/* スライド枠（CMSスライダーが #cms-slider-1-1-area 内に
   .swiper-slide > .slide-img > img を出力する。参考サイトと同値） */
.slide-img {
  overflow: hidden;
  width: 100%;
  height: 87vh;
}

.slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover;";
}

.swiper-slide {
  position: relative;
}

.swiper-slide:before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  right: 0;
  top: 0;
  background-position: 50%;
  background-size: cover;
  z-index: -1;
}

/* アクティブなスライドの画像だけゆっくり拡大（参考サイト zoom-in 11s linear） */
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
  animation: ah-zoom-in 11s linear 0s 1 normal both;
}

@keyframes ah-zoom-in {
  0%   { transform: scale(1); }
  100% { transform: scale(1.1); }
}

/* キャッチ画像（左下・スライドからはみ出して重なる） */
#catch {
  position: absolute;
  bottom: -5%;
  left: -7%;
  transition: opacity 2s cubic-bezier(0.18, 0.06, 0.23, 1);
  max-width: 450px;
  z-index: 10;
  text-align: center;
}

#catch.on {
  opacity: 1;
  transition: all 2s ease-in;
}

/* 右下のイラスト（はみ出し配置）
   deco2.png は 458×756（縦長）。その比率で表示する */
#slideshow .top_deco {
  position: absolute;
  right: -125px;
  bottom: -30px;
  width: 200px;
  aspect-ratio: 458 / 756;
  z-index: 10;
}

#slideshow .top_deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ヘッダーの高さがブレークポイントで変わるので、--deco-top も合わせて調整 */
@media all and (max-width: 1400px) {
  #slide-wrapper { --deco-top: 114px; } /* 24 + ロゴ56 + 34 */
}

@media all and (max-width: 1240px) {
  #slide-wrapper { --deco-top: 106px; } /* 24 + ロゴ48 + 34 */
}

/* #slideshow は 1124px 固定だが、画面がそれより狭くなると max-width:100% で
   画面幅いっぱいになる。そのとき #catch（left:-7%）と .top_deco（right:-125px）の
   はみ出し分が画面外に出て body の overflow-x:hidden で切れてしまうため、
   1374px（=1124 + 125×2）から段階的にはみ出し量を詰めていく。
   ブレークポイント（1200 / 896 / 639px）と .slide-img の高さは参考サイトと同値。 */
@media all and (max-width: 1374px) {
  #catch { left: -4%; }
  #slideshow .top_deco { right: -80px; }
}

@media all and (max-width: 1200px) {
  .slide-img { height: 60vw; }
  #catch { max-width: 400px; left: -2%; }
  #slideshow .top_deco {
    right: -60px;
    bottom: -20px;
    width: 170px;
  }
  #slide-wrapper::before,
  #slide-wrapper::after { max-width: 42%; }
}

@media all and (max-width: 896px) {
  /* z-index は 0 のまま（ヘッダー z-index:100 より下）にして、
     あしらいがヘッダーのロゴ・ナビを覆わないようにする */
  #slide-wrapper { --deco-top: 90px; }
  .slide-img { height: 50vw; }
  #catch { max-width: 300px; left: 0; }
  #slideshow .top_deco {
    right: -30px;
    bottom: -14px;
    width: 130px;
  }
  #slide-wrapper::before,
  #slide-wrapper::after { max-width: 50%; }
}

@media all and (max-width: 639px) {
  #slide-wrapper { --deco-top: 80px; margin-bottom: 90px; }
  #slideshow { width: 100%; }
  #slide-wrapper::before,
  #slide-wrapper::after { max-width: 60%; opacity: 0.5; }

  /* SPでMV画像が見切れないようにする
     ・参考サイトと同じく CMSスライダーの高さは .slider_wrapper の
       --swiper-wrapper-height で指定する（参考サイトは 55vh）
     ・ただし vh 基準だと端末の縦横比によって左右が大きく切り取られるため、
       画面幅に対する画像の比率（--mv-ratio）で高さを出す
       例）16:9 の画像 → 100vw ÷ (16/9) = 56.25vw
     ・比率がずれても切り取らないよう object-fit も contain に切り替える */
  #slideshow {
    --mv-ratio: 56.25; /* 画像の高さ ÷ 幅 × 100。16:9=56.25 / 4:3=75 / 3:2=66.67 */
  }
  #slideshow .slider_wrapper {
    --swiper-wrapper-height: calc(var(--mv-ratio) * 1vw) !important;
  }
  .slide-img {
    height: calc(var(--mv-ratio) * 1vw);
  }
  /* 上下・左右どちらも切り取らない（img でも背景画像でも contain に） */
  .slide-img img,
  #slideshow .swiper-slide img,
  #slideshow .main_slider__inner img {
    object-fit: contain !important;
    object-position: center center;
  }
  #slideshow .swiper-slide,
  #slideshow .swiper-slide::before,
  #slideshow .slide-img {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  /* キャッチ・イラストはスライドに被りすぎないよう小さくして下に寄せる */
  #catch {
    max-width: 175px;
    top: auto;
    bottom: calc(-6% - 30px);
    left: 8px;
  }
  #slideshow .top_deco {
    right: 14px; /* -6px から 20px 左へ */
    bottom: -84px;
    width: 68px;
  }
}

/* --------------------------------------------------------------------------
   私たちの想い（greet-area）
   参考サイト（design_base_source）の .sakura-tree / .single02 / .greet-area /
   .icon / .b-txt / .btn01 をそのまま移植（見出しは共通の .heading + .ah-heading を使用）。
   色だけ当サイトのテーマ色（base:#FFAB12 / sub:#F686A4 / txt:#382411）に合わせている。
   -------------------------------------------------------------------------- */
/* セクション背景のあしらい（左下 bg-deco-2-l.png:498×447 / 右下 bg-deco-2-r.png:523×652）
   ・画像自体がコーナー起点の図形なので、左は left bottom・右は right bottom で揃える
   ・セクション左下／右下の角にぴたりと収まるサイズなので overflow は切らない
     （切ると太陽イラストや greet-left_01 のはみ出し配置まで削られるため） */
#omoi {
  position: relative;
  z-index: 0;
}

#omoi::before,
#omoi::after {
  content: "";
  position: absolute;
  bottom: 0;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

#omoi::before {
  left: 0;
  width: 498px;
  max-width: 30%;
  aspect-ratio: 498 / 447;
  background: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28257/bg-deco-2-l.png) no-repeat left bottom / contain;
}

#omoi::after {
  right: 0;
  width: 523px;
  max-width: 32%;
  aspect-ratio: 523 / 652;
  background: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28257/bg-deco-2-r.png) no-repeat right bottom / contain;
}

/* 本文・イラストはあしらいより前面に */
#omoi .sakura-tree,
#omoi .bg-kira {
  position: relative;
  z-index: 1;
}

/* 太陽イラスト（sun.png）：中央配置・最大325px */
.sakura-tree {
  max-width: 325px;
  width: 100%;
  margin: 0 auto -30px;
}

.sakura-tree img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  /* 右へ少し→左へ少し、ゆっくり回転してゆらゆら */
  transform-origin: center center;
  animation: ah-sun-sway 6s ease-in-out infinite;
}

@keyframes ah-sun-sway {
  0%   { transform: rotate(-6deg); }
  50%  { transform: rotate(6deg); }
  100% { transform: rotate(-6deg); }
}

/* OS側でアニメーション低減を設定している環境では止める */
@media (prefers-reduced-motion: reduce) {
  .sakura-tree img {
    animation: none;
  }
}

.single02 {
  position: relative;
  margin: 0 auto;
  padding: 60px 15px 120px;
}

.greet-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.greet-area .greet-left,
.greet-area .greet-right {
  /* 本文が pcbr の位置どおり2行×2段落＝4行で収まるよう、
     参考サイトの 910px → 1000px に広げている */
  width: calc((100% - 1000px) / 2);
  position: relative;
}

.greet-area .greet-left .greet-left_01 {
  width: 190px;
  position: absolute;
  right: 10%;
  top: -30%;
}

.greet-area .greet-left .greet-left_02 {
  position: absolute;
  width: 190px;
  bottom: 1%;
  left: 1%;
}

.greet-area .greet-right .greet-right_01 {
  width: 190px;
  position: absolute;
  left: 10%;
  top: -30%;
}

.greet-area .greet-right .greet-right_02 {
  position: absolute;
  width: 190px;
  bottom: 1%;
  right: 1%;
}

.greet-area .greet-center {
  width: 100%;
  /* 最長行「デイサービス・…寄り添っています。」（47文字 × 18px × 字間0.1em ≒ 935px）
     が1行に収まる幅。参考サイトの 799px から拡張 */
  max-width: 980px;
}

/* 見出し上の小さなアイコン */
.greet-area .icon {
  width: 60px;
  text-align: center;
  margin: 0 auto 10px;
  pointer-events: none;
}

/* 本文（参考サイト b-txt） */
.b-txt {
  padding-bottom: 0.2em;
  line-height: 2.2;
  font-size: 1.8rem;
}

/* キャッチコピー（.ah-catch）は company.php でも使うため css/site.css に移動 */

/* ボタン（参考サイト btn01 / .sbc = サブカラー） */
.btn01 {
  margin-top: 35px;
}

.btn01 a {
  position: relative;
  display: block;
  max-width: 250px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 30px;
  border-radius: 40px;
  font-family: "YakuHanJP", "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 2px solid #FFAB12;
  color: #fff;
  background: #FFAB12;
}

.btn01 a::after {
  content: "●";
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.5em;
  transition: all 0.5s ease;
  color: #fff;
}

.btn01 a:hover {
  background: #fff;
  color: #FFAB12;
}

.btn01 a:hover::after {
  right: 20px;
  color: #FFAB12;
}

.btn01.sbc a {
  border: 2px solid #F686A4;
  background-color: #F686A4;
}

.btn01.sbc a:hover {
  background: #fff;
  color: #F686A4;
}

.btn01.sbc a:hover::after {
  color: #F686A4;
}

/* 参考サイトの汎用クラス（common.css / smartphone.css 由来） */
.tcenter { text-align: center; }
.tright  { text-align: right; }

/* 本文が980pxで1行に収まらなくなる幅からは pcbr の強制改行をやめ、
   自然な折り返しに任せる（変な位置で3行にならないようにする） */
@media all and (max-width: 1040px) {
  .pcbr { display: none; }
}

@media all and (max-width: 896px) {
  .greet-area .icon { width: 45px; }
  .b-txt { font-size: 1.6rem; }
  #omoi::before { max-width: 34%; }
  #omoi::after  { max-width: 36%; }
}

@media all and (max-width: 639px) {
  /* 左右15px：SPで本文を左寄せにしたときに行頭・行末が端に付かないように */
  .single02 { padding: 60px 15px; }
  .b-txt { font-size: inherit; }
  #omoi::before { max-width: 42%; opacity: 0.55; }
  #omoi::after  { max-width: 44%; opacity: 0.55; }

  /* 太陽イラストはSPでは小さめに */
  .sakura-tree { max-width: 120px; margin-bottom: -15px; }

  /* 左右のイラスト（deco3 / deco4）は本文の上で中央寄せの横並びに */
  .greet-area .greet-left,
  .greet-area .greet-right {
    width: 50%;
    position: relative;
    order: -1;
    display: flex;
    align-items: flex-end;
  }

  .greet-area .greet-left { justify-content: flex-end; }
  .greet-area .greet-right { justify-content: flex-start; }

  .greet-area .greet-left .greet-left_01,
  .greet-area .greet-left .greet-left_02,
  .greet-area .greet-right .greet-right_01,
  .greet-area .greet-right .greet-right_02 {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 110px;
  }
}

/* --------------------------------------------------------------------------
   事業内容（画像＋テキストの横並び）
   参考サイト https://www.uraura.jp/ の single03 / cont01 / cont01_txt /
   cont01_img / btn07 の構成をそのまま踏襲し、クラス名を当サイトの ah-svc 系に
   リネームしたもの。色だけテーマ色（base:#FFAB12 / txt:#382411）に合わせている。
   ・白いカードに対して画像を上へはみ出させる（ah-svc__img の margin-top: -150px）
   ・偶数行は --reverse で画像左／テキスト右に入れ替え
   -------------------------------------------------------------------------- */
.ah-svc-wrap {
  position: relative;
  max-width: 1500px;
  width: 95%;
  margin: 0 auto;
  padding: 80px 0;
}

.ah-svc {
  display: flex;
  flex-wrap: wrap;
  max-width: 95%;
  margin: 80px auto 0;
  padding: 60px;
  border-radius: 60px;
  background: #fefefe;
}

.ah-svc__txt {
  width: 55%;
  margin-top: -80px;
  padding-right: 120px;
}

.ah-svc--reverse .ah-svc__txt {
  padding-right: 0;
  padding-left: 120px;
}

.ah-svc__img {
  position: relative; /* 「詳しく見る」ボタンの基準 */
  width: 45%;
  margin-top: -150px;
}

.ah-svc__img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 15px solid #fff;
  border-radius: 60px;
}

/* 事業ごとのテーマ色（MV catch.png の3色に合わせる） */
.ah-svc          { --svc-color: #FFAB12; }
.ah-svc--01      { --svc-color: #EA57A2; } /* ピンク */
.ah-svc--02      { --svc-color: #76B920; } /* グリーン */
.ah-svc--03      { --svc-color: #F7A617; } /* オレンジ */

/* 見出し（Service01 ＋ 事業所名） */
.ah-svc__ttl {
  position: relative;
  margin-bottom: 40px;
}

/* 背面の大きなゴースト数字 */
.ah-svc__ttl::before {
  position: absolute;
  top: -0.42em;
  left: -0.08em;
  font-family: "Zen Maru Gothic", "YakuHanJP", sans-serif;
  font-weight: 900;
  font-size: 13rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--svc-color);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.ah-svc--01 .ah-svc__ttl::before { content: "01"; }
.ah-svc--02 .ah-svc__ttl::before { content: "02"; }
.ah-svc--03 .ah-svc__ttl::before { content: "03"; }

/* Service01〜03 のラベル：色付きピルバッジ＋大きめの数字 */
.ah-svc__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 9px 26px 9px 22px;
  border-radius: 999px;
  background: var(--svc-color);
  color: #fff;
  box-shadow: 0 8px 18px rgba(56, 36, 17, 0.18);
  transform: rotate(-2deg);
}

/* バッジ左端の太陽あしらい */
.ah-svc__num::before {
  content: "\f185"; /* fa-sun */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.5rem;
  opacity: 0.85;
}

.ah-svc__num-en {
  font-family: "Zen Maru Gothic", "YakuHanJP", sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.14em;
}

.ah-svc__num-no {
  font-family: "Zen Maru Gothic", "YakuHanJP", sans-serif;
  font-weight: 900;
  font-size: 2.8rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.ah-svc__name {
  position: relative;
  z-index: 1;
  display: block;
  padding-bottom: 14px;
  font-family: "YakuHanJP", "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: #382411;
}

/* 事業所名の下に色付きの下線 */
.ah-svc__name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 5px;
  border-radius: 3px;
  background: var(--svc-color);
}

/* リード文（参考サイト mtext1 bold color1） */
.ah-svc__lead {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--svc-color);
}

.ah-svc__txt p + p {
  margin-top: 1.5em;
}

/* 丸い「詳しく見る」ボタン（参考サイト btn07）
   画像の右下（--reverse では左下）に重ねる */
.ah-svc__btn {
  position: absolute;
  right: -20px;
  bottom: -20px;
  z-index: 2;
}

.ah-svc--reverse .ah-svc__btn {
  right: auto;
  left: -20px;
}

.ah-svc__btn p {
  display: block;
  border-radius: 50%;
  text-align: center;
}

.ah-svc__btn a {
  display: block;
}

.ah-svc__btn a span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 160px;
  box-sizing: border-box;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  background-color: #55402C;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  transition: all 250ms ease;
}

.ah-svc__btn a span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border: 3px dotted #fff;
  border-radius: 100%;
  z-index: 1;
}

.ah-svc__btn a:hover span {
  background: var(--svc-color);
}

@media all and (max-width: 1100px) {
  /* 画像が上／テキストが下に積む（--reverse は元から画像が先） */
  .ah-svc { flex-direction: column-reverse; }
  .ah-svc--reverse { flex-direction: column; }
  .ah-svc__txt {
    width: 100%;
    padding-top: 100px;
    padding-right: 0;
  }
  .ah-svc--reverse .ah-svc__txt { padding-left: 0; }
  .ah-svc__img { width: 100%; }
  .ah-svc__img img { aspect-ratio: auto; height: 400px; }
}

@media all and (max-width: 896px) {
  .ah-svc-wrap { padding: 40px 0; }
  .ah-svc { padding: 30px; }
  .ah-svc__img { margin-top: -80px; }
  .ah-svc__img img { height: 300px; }
  .ah-svc__ttl::before { font-size: 9rem; }
  .ah-svc__num { padding: 7px 20px 7px 17px; margin-bottom: 14px; }
  .ah-svc__num-en { font-size: 1.5rem; }
  .ah-svc__num-no { font-size: 2.4rem; }
  .ah-svc__name { font-size: 2.6rem; }
  .ah-svc__lead { font-size: 1.8rem; }
  .ah-svc__btn a span { width: 120px; height: 120px; font-size: 1.6rem; }
}

@media all and (max-width: 639px) {
  .ah-svc {
    padding: 10px;
    border-radius: 30px;
  }
  .ah-svc__txt { padding: 100px 10px 20px; }
  .ah-svc__ttl::before { font-size: 7rem; top: -0.35em; }
  .ah-svc__num-en { font-size: 1.3rem; }
  .ah-svc__num-no { font-size: 2rem; }
  .ah-svc__name { font-size: 2.2rem; padding-bottom: 10px; }
  .ah-svc__name::after { width: 54px; height: 4px; }
  .ah-svc__img img { border-width: 10px; border-radius: 30px; }
  .ah-svc__btn a span { width: 100px; height: 100px; font-size: 1.4rem; border-width: 2px; }
  .ah-svc__btn a span::before { border-width: 2px; }
}

/* --------------------------------------------------------------------------
   コンテンツ（各ページへの導線カード）
   参考サイト https://www.ma-ji.jp/ の menu_list / btn01 の構成をそのまま踏襲。
   色だけテーマ色（base:#FFAB12 / txt:#382411）に置き換えている。
   ・カード上部にイラストをはみ出させる（.icon の margin-top: -70px）
   ・カード左上・右上に白い小さな●（タグの穴に見せる装飾）
   -------------------------------------------------------------------------- */
.ah-menu {
  display: flex;
  gap: 40px;
  margin-top: 100px;
}

.ah-menu > li {
  position: relative;
  /* 見出しの行数が違ってもボタンの高さが揃うよう、
     カードを縦フレックスにしてボタンを下端へ寄せる */
  display: flex;
  flex-direction: column;
  width: calc((100% - 80px) / 3);
  padding: 0 2em 2em;
  border-radius: 20px;
  background: rgba(255, 171, 18, 0.12);
  text-align: center;
}

.ah-menu > li::before,
.ah-menu > li::after {
  content: "●";
  position: absolute;
  top: 20px;
  color: #fff;
  font-size: 0.6em;
}

.ah-menu > li::before { left: 20px; }
.ah-menu > li::after  { right: 20px; }

.ah-menu > li .icon {
  margin: -70px auto 20px;
}

.ah-menu > li .icon img {
  width: 180px;
  height: auto;
}

.ah-menu > li .ttl {
  margin-bottom: 20px;
}

.ah-menu > li .ttl .eng {
  display: block;
  font-family: "Zen Maru Gothic", "YakuHanJP", sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #FFAB12;
}

.ah-menu > li .ttl .ja {
  display: block;
  font-family: "YakuHanJP", "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: #382411;
}

.ah-menu > li .txt {
  line-height: 1.9;
  color: #382411;
}

/* 枠線タイプのボタン（参考サイト btn01）
   margin-top: auto でカード下端に固定し、3枚のボタン位置を揃える */
.ah-menu .btn02 {
  margin-top: auto;
}

.ah-menu .btn02 a {
  position: relative;
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 40px auto 0;
  padding: 15px 30px;
  border: 2px solid #FFAB12;
  border-radius: 40px;
  font-family: "YakuHanJP", "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  color: #FFAB12;
  background: #fff;
}

.ah-menu .btn02 a::after {
  content: "●";
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  transition: all 0.5s ease;
  color: #FFAB12;
}

.ah-menu .btn02 a:hover {
  background: #FFAB12;
  color: #fff;
}

.ah-menu .btn02 a:hover::after {
  right: 20px;
  color: #fff;
}

@media all and (max-width: 896px) {
  .ah-menu {
    flex-direction: column;
    gap: 60px;
  }
  .ah-menu > li { width: 100%; }
}

@media all and (max-width: 639px) {
  .ah-menu > li .icon { margin: -70px auto 10px; }
  .ah-menu > li .icon img { width: 130px; }
  .ah-menu > li .ttl .ja { font-size: 1.8rem; }
  .ah-menu .btn02 a {
    width: 95%;
    margin: 20px auto 20px;
    font-size: 1.4rem;
  }
}

/* --------------------------------------------------------------------------
   私たちの想い（参考サイト greet-area：中央テキスト＋左右にイラストを配置）
   -------------------------------------------------------------------------- */
.ah-omoi {
  position: relative;
  z-index: 0;
}

.ah-greet {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ah-greet__side {
  position: relative;
  width: calc((100% - 800px) / 2);
  min-width: 130px;
}

.ah-greet__center {
  width: 100%;
  max-width: 800px;
}

.ah-greet__deco {
  position: absolute;
  width: 150px;
}

.ah-greet__side--left .ah-greet__deco--01 { right: 4%; top: -8%; }
.ah-greet__side--left .ah-greet__deco--02 { left: 0; bottom: 2%; }
.ah-greet__side--right .ah-greet__deco--01 { left: 4%; top: -8%; }
.ah-greet__side--right .ah-greet__deco--02 { right: 0; bottom: 2%; }

.ah-lead {
  color: #382411;
}

@media all and (max-width: 1200px) {
  .ah-greet__side { width: calc((100% - 640px) / 2); min-width: 110px; }
  .ah-greet__center { max-width: 640px; }
  .ah-greet__deco { width: 110px; }
}

@media all and (max-width: 896px) {
  .ah-greet { justify-content: center; }
  .ah-greet__side {
    order: -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 48%;
    margin-bottom: 20px;
  }
  .ah-greet__deco { position: relative; width: 42%; inset: auto; }
  .ah-greet__side--left .ah-greet__deco--01,
  .ah-greet__side--left .ah-greet__deco--02,
  .ah-greet__side--right .ah-greet__deco--01,
  .ah-greet__side--right .ah-greet__deco--02 { position: relative; inset: auto; }
  .ah-greet__center { max-width: 100%; }
}