.elementor-kit-6{--e-global-color-primary:#E98D44;--e-global-color-secondary:#84746B;--e-global-color-text:#4B4B4B;--e-global-color-accent:#BF4A36;--e-global-color-859ffe1:#7CBD81;--e-global-color-2caa057:#FDD23E;--e-global-color-1e48099:#CB72A6;--e-global-color-f319a67:#87B9D6;--e-global-typography-primary-font-family:"Zen Maru Gothic";--e-global-typography-primary-font-size:35px;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:1em;--e-global-typography-primary-letter-spacing:0.03em;--e-global-typography-secondary-font-family:"Jost";--e-global-typography-secondary-font-size:16px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-letter-spacing:0.02em;--e-global-typography-text-font-family:"Noto Sans JP";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-letter-spacing:0.02em;--e-global-typography-accent-font-family:"Noto Sans JP";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-letter-spacing:0.01em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-6 h2{color:var( --e-global-color-text );font-family:"Zen Maru Gothic", Sans-serif;font-size:3rem;font-weight:400;line-height:1em;letter-spacing:0.03em;}.elementor-kit-6 h3{color:var( --e-global-color-text );font-family:"Noto Sans JP", Sans-serif;font-size:1.8rem;font-weight:400;letter-spacing:0.02em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:var( --e-global-color-text );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1210px){.elementor-kit-6 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:85%;}.e-con{--container-max-width:85%;}}@media(max-width:767px){.elementor-kit-6 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:90%;}.e-con{--container-max-width:90%;}}:root { --text:#4B4B4B; --sub:#84746B; --green:#88BA7D; --yellow:#EECF49; --pink:#C96B9F; --blue:#8ABCCF; --main:#D18A4B; }
/* Start custom CSS *//* ════════════════════════════════════════════════════════════
   AKEBE サイト カスタムCSS
   管理場所：サイト設定 > カスタムCSS（一元管理）
   目次：
     0. 全体・共通設定
     1. 共通アニメーション（keyframes）
     2. FV（ファーストビュー）
     3. ボタン（arrow-btn / line-btn / cc-btn）
     4. 新着情報（news-row）
     5. 拠点カード（loc-）＋サービスタグ
     6. note マガジン（note-mag）
     7. Googleマップ埋め込み（akebe-map）
     8. ニュース記事（単一投稿 / akebe-article）
     9. 地域サロン フローティングボタン（akebe-floating-salon）
   ════════════════════════════════════════════════════════════ */
/* ============================================
   0. 全体・共通設定
   サイト全体に効くユーティリティ
   ============================================ */
/* ページタイトルを一括非表示（Hello Elementorのタイトルを消す） */
.page-header {
  display: none;
}
/* ページ内リンク（アンカー）の着地位置を、
   固定ヘッダー＋ページ内メニュー2段分だけ下へずらす */
[id] {
  scroll-margin-top: 200px;
}
/* ============================================
   1. 共通アニメーション（keyframes）
   複数のボタンで使い回すため冒頭に集約
   ============================================ */
/* 矢印：右上へ出て見切れ→左下へワープ→中央へ戻る */
@keyframes arrow-slide {
  0%   { transform: translate(0, 0); }
  40%  { transform: translate(18px, -18px); }
  41%  { transform: translate(-18px, 18px); }
  100% { transform: translate(0, 0); }
}
/* 下線：右へ縮む→左から再び引かれる */
@keyframes line-redraw {
  0%   { transform: scaleX(1); transform-origin: right center; }
  50%  { transform: scaleX(0); transform-origin: right center; }
  51%  { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}
/* ============================================
   2. FV（ファーストビュー）
   ============================================ */
/* 写真の波型マスク（マスク画像で写真を曲線に切り抜く） */
.fv-main img {
  width: 100%;
  height: auto;
  aspect-ratio: 1209 / 796;   /* マスクと同じ比率 */
  object-fit: cover;
  object-position: center;
}
/* 写真を画面右へ飛び出させて少し見切れさせる */
.fv-photo {
  width: auto;
  margin-right: calc(50% - 50vw - 220px);
  position: relative;
  right: 0;
}
/* FVセクションを自由配置（絶対配置の子）の基準にする */
.fv-section {
  position: relative;
}
/* ============================================
   3. ボタン
   ============================================ */
/* -------- 3-1. お問い合わせボタン（arrow-btn） -------- */
.arrow-btn {
  white-space: nowrap;   /* 文字を1行にキープ */
  flex-shrink: 0;        /* 縮まないように */
}
.arrow-btn .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* 丸（●）：白背景・白フチ。矢印を見切れさせる */
.arrow-btn .elementor-button-icon {
  width: 34px;
  height: 34px;
  border: 1px solid #fff;
  background-color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* ホバー：フチをアクセントカラーに */
.arrow-btn:hover .elementor-button-icon {
  border-color: #E98D44;
}
/* ホバー：矢印アニメーション */
.arrow-btn:hover .elementor-button-icon i,
.arrow-btn:hover .elementor-button-icon svg {
  animation: arrow-slide 0.6s ease;
}
/* -------- 3-2. 下線＋矢印ボタン（line-btn） -------- */
.line-btn .elementor-button {
  background: transparent;
  color: #333333;
  font-weight: 700;
  padding: 10px 4px;
  border-radius: 0;
}
.line-btn .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;    /* 下線（::after）の位置基準 */
}
/* 丸（●）＋矢印 */
.line-btn .elementor-button-icon {
  width: 40px;
  height: 40px;
  background-color: #E98D44;
  border: 1px solid #E98D44;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
/* 下線（テキスト下に引く1本線） */
.line-btn .elementor-button-content-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 1px;
  background-color: #E98D44;
  transform: scaleX(1);
  transform-origin: right center;
}
/* ホバー：矢印＋下線を同時に再生 */
.line-btn:hover .elementor-button-icon i,
.line-btn:hover .elementor-button-icon svg {
  animation: arrow-slide 0.6s ease;
}
.line-btn:hover .elementor-button-content-wrapper::after {
  animation: line-redraw 0.6s ease;
}
/* -------- 3-3. お困りごとカード「詳しく見る」（cc-btn） -------- */
.cc-btn {
  width: 100%;
}
.cc-btn .elementor-button {
  width: 100%;
  justify-content: center;
}
.cc-btn .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* 矢印の丸：白の塗りつぶし */
.cc-btn .elementor-button-icon {
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
/* ホバー：矢印アニメーション */
.cc-btn:hover .elementor-button-icon svg,
.cc-btn:hover .elementor-button-icon i {
  animation: arrow-slide 0.6s ease;
}
/* ============================================
   4. 新着情報（news-row）
   1行＝日付＋カテゴリ＋タイトル。ホバーで左から色が伸びる
   ============================================ */
/* 1行のレイアウト＋カラーバーの土台 */
.news-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  z-index: 0;
}
/* 左から伸びるカラーバー（背景・ホバーで展開） */
.news-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #E98D44;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
  z-index: -1;
}
.news-row:hover::before {
  transform: scaleX(1);
}
/* 日付 */
.news-date {
  color: #888;
  flex-shrink: 0;
}
/* カテゴリバッジ */
.news-cat {
  border: 1px solid #C8A97E;
  color: #C8A97E;
  border-radius: 20px;
  padding: 4px 16px;
  font-size: 0.85em;
  text-align: center;
  min-width: 110px;
  flex-shrink: 0;
}
/* タイトル（残り幅いっぱい） */
.news-title {
  font-weight: 500;
  margin: 0;
  flex: 1;
}
/* ホバー：中の文字・枠をすべて白に（* は取りこぼし防止の総当たり） */
.news-row:hover .news-date,
.news-row:hover .news-title,
.news-row:hover .news-cat,
.news-row:hover * {
  color: #fff !important;
}
.news-row:hover .news-cat {
  border-color: #fff;
}
/* コンテナ内のリンク（a）を横並びに戻す */
.news-row > a,
.news-row .e-con-inner > a {
  display: flex !important;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
/* ============================================
   5. 拠点カード（loc-）
   写真＋施設名＋住所＋TEL/FAX＋関連サービスタグ
   ============================================ */
.loc-cards {
  gap: 40px;
}
/* 写真：角丸 */
.loc-photo img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* 施設名の前のピンアイコン */
.loc-pin .elementor-icon {
  width: 22px;
}
/* 施設の小見出し（法人本部 など） */
.loc-sublabel {
  color: #888;
  font-size: 0.85em;
}
/* 住所 */
.loc-addr {
  line-height: 1.7;
  margin: 0 0 16px;
}
/* TEL/FAX の行 */
.loc-contact p {
  margin: 0 0 6px;
  font-weight: 700;
}
/* TEL/FAX のオレンジ小バッジ */
.loc-label {
  display: inline-block;
  background-color: #E98D44;
  color: #fff;
  font-size: 0.75em;
  padding: 2px 10px;
  border-radius: 4px;
  margin-right: 8px;
}
/* 「関連サービス」見出し（上に区切り線） */
.loc-svc-title {
  border-top: 1px solid #e5e0d5;
  padding-top: 16px;
  margin-top: 16px;
  font-weight: 700;
}
/* サービスタグ（pill・リンク）：ホバーで見た目を変えない */
.loc-tag {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 20px;
  color: #fff;
  font-size: 0.8em;
  line-height: 1;
  margin: 0 6px 8px 0;
  text-decoration: none;
  cursor: pointer;
}
/* サービスタグの色＝ブランドのカテゴリ色 */
.tag-green  { background-color: #7CBD81; }  /* 緑 */
.tag-yellow { background-color: #FDD23E; }  /* 黄 */
.tag-pink   { background-color: #CB72A6; }  /* ピンク */
.tag-blue   { background-color: #87B9D6; }  /* 青 */
/* ============================================
   6. note マガジン（note-mag）
   RSSで取得した記事を3列グリッドで表示
   ============================================ */
.note-mag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.note-mag-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* サムネイル（16:9） */
.note-mag-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: #eee;
}
.note-mag-date {
  color: #999;
  font-size: 0.8em;
  margin: 14px 0 6px;
}
.note-mag-title {
  color: #333;
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.6;
  margin: 0;
}
/* タブレット以下（1024px以下）は1列に */
@media (max-width: 1024px) {
  .note-mag-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   7. Googleマップ埋め込み（akebe-map）
   角丸はラッパー側でかけ、はみ出しを切る
   ============================================ */
.akebe-map {
  border-radius: 16px;
  overflow: hidden;      /* 四隅のはみ出しを切って角丸に */
  line-height: 0;        /* iframe下の余白を消す */
  max-width: 100%;
}
.akebe-map iframe {
  display: block;
  width: 100%;           /* 親幅にフィット（レスポンシブ） */
  height: 480px;
  border: 0;
}
/* 地図：スクロール吸い込み防止オーバーレイ */
.akebe-map {
  position: relative;   /* オーバーレイの基準。角丸・overflow:hiddenは既存のまま */
}
.akebe-map-cover {
  position: absolute;
  inset: 0;             /* 地図全体を覆う */
  cursor: pointer;
  background: transparent;
}
/* クリックで操作可能になったら、フタを外す */
.akebe-map.is-active .akebe-map-cover {
  display: none;
}
/* ============================================
   8. ニュース記事（単一投稿 / akebe-article）
   本文はブロックエディターで作成→このスタイルで装飾
   ============================================ */
/* -------- 日付＋カテゴリのメタ行 -------- */
.akebe-post-meta .elementor-post-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 .8em;
}
.akebe-post-meta .elementor-post-info__item {
  margin: 0;
  padding: 0;
}
/* 日付（通常テキスト表示） */
.akebe-post-meta .elementor-post-info__item--type-date {
  color: #4B4B4B;
  font-weight: 600;
  letter-spacing: .04em;
}
/* カテゴリ（オレンジのピルバッジ） */
.akebe-post-meta .elementor-post-info__item--type-terms a {
  display: inline-block;
  border: 1px solid #E98D44;
  color: #E98D44;
  border-radius: 999px;
  padding: 2px 14px;
  font-size: .82em;
  line-height: 1.7;
  text-decoration: none;
}
/* -------- 本文 -------- */
.akebe-article {
  color: #4B4B4B;
  font-size: 1.05rem;
  line-height: 1.9;
}
.akebe-article p {
  margin: 0 0 1.5em;
}
/* 見出し（H2＝大 / H3＝中 / H4＝小） */
.akebe-article h2 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  border-left: 6px solid #E98D44;   /* 左のオレンジ縦線 */
  padding-left: .6em;
  margin: 2.4em 0 .9em;
}
.akebe-article h3 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.22rem;
  color: #E98D44;
  margin: 2em 0 .6em;
}
.akebe-article h4 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.08rem;
  margin: 1.6em 0 .5em;
}
/* -------- 画像 -------- */
/* 単体画像：中央寄せ＋上下は画像どうしの間隔 */
.akebe-article img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.6em auto;   /* 左右auto＝中央 ／ 上下＝画像どうしの間隔 */
}
/* キャプション付き（figure）：間隔はfigure側で確保 */
.akebe-article figure {
  margin: 1.8em auto;
  text-align: center;   /* キャプションも中央に */
}
.akebe-article figure img {
  margin: 0 auto;       /* 中の画像は中央のみ（余白の二重取りを防ぐ） */
}
.akebe-article .wp-block-image img {
  border-radius: 10px;
}
/* 画像キャプション（画像/ギャラリーのキャプション欄に入力） */
.akebe-article figcaption {
  margin-top: .6em;
  font-size: .85rem;
  color: #9a938b;
  line-height: 1.6;
}
/* 2枚並び（ギャラリー）：間隔は gap、中の余白は打ち消す */
.akebe-article .wp-block-gallery {
  gap: 16px;
}
.akebe-article .wp-block-gallery figure {
  margin: 0;
}
.akebe-article .wp-block-gallery img {
  margin: 0;
  border-radius: 10px;
}
  
  /* ========== 9. 地域サロン フローティングボタン ========== */
/* 影・ホバーの動き＋出現のフェード */
.akebe-floating-salon {
  box-shadow: 0 4px 16px rgba(75, 75, 75, 0.18);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    opacity 0.6s ease,          /* ← 出現のフェード時間。大きくするほどゆっくり */
    visibility 1s ease;
}
/* ホバーで少し浮く */
.akebe-floating-salon:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(75, 75, 75, 0.24);
}
/* 非表示状態（出現前・通過後） */
.akebe-floating-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* 動きを控えたい設定の人には即時表示（アニメなし） */
@media (prefers-reduced-motion: reduce) {
  .akebe-floating-salon {
    transition: none;
  }
  .akebe-floating-salon:hover {
    transform: none;
  }
}
/* 初期状態は非表示（チラつき防止）*/
.akebe-floating-salon {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* JSが「表示」と判断したときだけ見せる */
.akebe-floating-salon.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}/* End custom CSS */