@charset "UTF-8";
/*
    Theme Name: さくらんぼ
    Template: swell
    Version: 1.0.0
*/

/* ============================================================
   さくらんぼ 全体共通CSS（子テーマ style.css に格納）
   すべて .ds- 接頭辞でスコープ／プレフィックスし、SWELL本体のクラス・変数と
   衝突しないようにしています。各ページ個別のCSSは、各セクションの
   .html と対になっている .css ファイル（カスタムHTMLブロック内に
   <style>として貼り付け）をご利用ください。
   ============================================================ */

.ds-content{
  --ds-bg:#FFF6F9;
  --ds-surface:#FFFDFB;
  --ds-surface-alt:#FFFFFF;
  --ds-cherry:#F0568C;
  --ds-cherry-deep:#C43D6E;
  --ds-cherry-tint:#FDE3EC;
  --ds-leaf:#8BC53F;
  --ds-leaf-deep:#5E8F27;
  --ds-leaf-tint:#EAF5DA;
  --ds-gold:#F5A623;
  --ds-gold-deep:#B9780F;
  --ds-gold-tint:#FDEDD2;
  --ds-ink:#4A3540;
  --ds-ink-soft:#85707A;
  --ds-ink-faint:#B79AA5;
  --ds-line:#F1DCE3;
  --ds-shadow: 336 45% 62%;
  --ds-radius-l:24px;
  --ds-radius-m:16px;
  --ds-radius-s:10px;
  --ds-font-display:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Quicksand',sans-serif;
  --ds-font-body:'Zen Kaku Gothic New','Noto Sans JP','Hiragino Sans',sans-serif;
  --ds-font-accent:'Quicksand','Zen Maru Gothic',sans-serif;

  font-family:var(--ds-font-body);
  color:var(--ds-ink);
  line-height:1.85;
  font-size:16px;
}
.ds-content, .ds-content *, .ds-content *::before, .ds-content *::after{ box-sizing:border-box; }
.ds-content img{ max-width:100%; display:block; }
.ds-content a{ color:inherit; text-decoration:none; }
.ds-content ul{ margin:0; padding:0; list-style:none; }
.ds-content h1,.ds-content h2,.ds-content h3,.ds-content h4{
  font-family:var(--ds-font-display); font-weight:700; line-height:1.4; margin:0;
  text-wrap:balance; color:var(--ds-ink);
}
.ds-content p{ margin:0; }
.ds-content table{ border-collapse:collapse; width:100%; border:none; }

/* ---------- レイアウト共通 ---------- */
.ds-content .ds-block{ margin-block:28px; }
.ds-content .ds-block:first-child{ margin-top:0; }
.ds-content .ds-block:last-child{ margin-bottom:0; }

.ds-content .ds-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ds-font-accent); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ds-cherry-deep);
  margin-bottom:10px;
}
.ds-content .ds-eyebrow::before{ content:""; width:18px; height:2px; background:var(--ds-gold); border-radius:2px; flex:none; }

.ds-content .ds-h2{ font-size:clamp(26px,3.6vw,38px) !important; margin-bottom:14px; }
.ds-content .ds-h3{ font-size:22px !important; margin-bottom:10px; }
.ds-content .ds-lede{ color:var(--ds-ink-soft); font-size:16px; }
.ds-content .ds-lede + .ds-lede{ margin-top:10px; }

/* ---------- ボタン ---------- */
.ds-content .ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ds-font-accent); font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.ds-content .ds-btn:hover{ transform:translateY(-2px); }
.ds-content .ds-btn-primary{ background:var(--ds-cherry); color:#fff; box-shadow:0 10px 24px -10px hsl(var(--ds-shadow) / .55); }
.ds-content .ds-btn-primary:hover{ background:var(--ds-cherry-deep); color:#fff; }
.ds-content .ds-btn-secondary{ background:var(--ds-surface-alt); color:var(--ds-cherry-deep); border-color:var(--ds-cherry); }
.ds-content .ds-btn-secondary:hover{ background:var(--ds-cherry-tint); }
.ds-content .ds-btn-ghost{ background:transparent; color:var(--ds-ink); border-color:var(--ds-line); }
.ds-content .ds-btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.ds-content .ds-btn-row.-center{ justify-content:center; }

/* ---------- カード（入居/デイ案内・お悩み・特徴・職種など汎用） ---------- */
.ds-content .ds-cards{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:640px){ .ds-content .ds-cards.-col2{ grid-template-columns:1fr 1fr; } }
@media (min-width:640px){ .ds-content .ds-cards.-col3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .ds-content .ds-cards.-col3{ grid-template-columns:repeat(3,1fr); } }
.ds-content .ds-cards.-col4{ grid-template-columns:repeat(2,1fr); }
@media (min-width:720px){ .ds-content .ds-cards.-col4{ grid-template-columns:repeat(4,1fr); } }

.ds-content .ds-card{
  background:var(--ds-surface-alt); border:1px solid var(--ds-line); border-radius:var(--ds-radius-l);
  padding:26px; display:flex; flex-direction:column; gap:12px;
}
.ds-content .ds-card.-center{ text-align:center; align-items:center; }
.ds-content .ds-card .ds-tag{
  align-self:flex-start; font-family:var(--ds-font-accent); font-weight:700; font-size:12px;
  padding:5px 12px; border-radius:999px; background:var(--ds-cherry-tint); color:var(--ds-cherry-deep);
}
.ds-content .ds-card.-green .ds-tag{ background:var(--ds-leaf-tint); color:var(--ds-leaf-deep); }
.ds-content .ds-card.-gold .ds-tag{ background:var(--ds-gold-tint); color:var(--ds-gold-deep); }
.ds-content .ds-card h3{ font-size:19px !important; }
.ds-content .ds-card p{ color:var(--ds-ink-soft); font-size:14.5px; }
.ds-content .ds-card ul{ display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.ds-content .ds-card ul li{ display:flex; gap:8px; font-size:14px; color:var(--ds-ink); }
.ds-content .ds-card ul li::before{ content:"✓"; color:var(--ds-cherry); font-weight:700; flex:none; }

/* ---------- テーブル（料金・仕様） ---------- */
.ds-content .ds-table-wrap{ overflow-x:auto; border-radius:var(--ds-radius-m); border:1px solid var(--ds-line); }
.ds-content .ds-table{ width:100%; border-collapse:collapse; min-width:420px; border:none; }
.ds-content .ds-table caption{ text-align:left; font-weight:700; color:var(--ds-cherry-deep); padding:12px 14px 4px; font-size:14px; }
.ds-content .ds-table th,
.ds-content .ds-table td{
  padding:12px 14px; font-size:14px; text-align:left;
  border:none; border-bottom:1px solid var(--ds-line);
}
.ds-content .ds-table thead th{ background:var(--ds-cherry-tint); color:var(--ds-cherry-deep); font-family:var(--ds-font-accent); white-space:nowrap; }
.ds-content .ds-table td.-num,
.ds-content .ds-table th.-num{ text-align:right; font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
.ds-content .ds-table tr:last-child td{ border-bottom:none; }

.ds-content .ds-deflist{ width:100%; border-radius:var(--ds-radius-m); overflow:hidden; border:1px solid var(--ds-line); background:var(--ds-surface-alt); border-collapse:collapse; }
.ds-content .ds-deflist tr{ border:none; border-bottom:1px solid var(--ds-line); }
.ds-content .ds-deflist tr:last-child{ border-bottom:none; }
.ds-content .ds-deflist th,
.ds-content .ds-deflist td{ text-align:left; padding:14px 18px; font-size:14.5px; vertical-align:top; border:none; }
.ds-content .ds-deflist th{ width:32%; color:var(--ds-cherry-deep); font-weight:700; background:var(--ds-cherry-tint); }
@media (max-width:600px){
  .ds-content .ds-deflist,.ds-content .ds-deflist tbody,.ds-content .ds-deflist tr,.ds-content .ds-deflist th,.ds-content .ds-deflist td{ display:block; width:100%; }
  .ds-content .ds-deflist th,
  .ds-content .ds-deflist td{ text-align:center; padding:14px 18px; line-height:1.6; }
}

/* ---------- タイムライン（デイサービスの1日） ---------- */
.ds-content .ds-timeline{ display:flex; flex-direction:column; }
.ds-content .ds-timeline li{ display:grid; grid-template-columns:76px 22px 1fr; gap:0 16px; }
.ds-content .ds-timeline .ds-time{ padding-top:16px; font-family:var(--ds-font-accent); font-weight:700; color:var(--ds-cherry-deep); font-size:15px; }
.ds-content .ds-timeline .ds-dotcol{ display:flex; flex-direction:column; align-items:center; }
.ds-content .ds-timeline .ds-dot{ width:13px; height:13px; border-radius:50%; background:var(--ds-cherry); margin-top:18px; flex:none; box-shadow:0 0 0 5px var(--ds-cherry-tint); }
.ds-content .ds-timeline .ds-tbar{ width:2px; flex:1; background:var(--ds-line); }
.ds-content .ds-timeline li:last-child .ds-tbar{ display:none; }
.ds-content .ds-timeline .ds-tcontent{ padding:12px 0 28px; }
.ds-content .ds-timeline .ds-tcontent h4{ font-size:16px !important; }
.ds-content .ds-timeline .ds-tcontent p{ font-size:13.5px; color:var(--ds-ink-soft); margin-top:4px; }

/* ---------- ステッパー（ご利用の流れ） ---------- */
.ds-content .ds-stepper{ display:flex; flex-direction:column; }
.ds-content .ds-step{ display:grid; grid-template-columns:52px 1fr; gap:18px; }
.ds-content .ds-step-numcol{ display:flex; flex-direction:column; align-items:center; }
.ds-content .ds-step-num{ width:52px; height:52px; border-radius:50%; background:var(--ds-cherry); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--ds-font-accent); font-weight:700; font-size:20px; flex:none; }
.ds-content .ds-step-bar{ width:2px; flex:1; background:var(--ds-line); margin-block:6px; }
.ds-content .ds-step:last-child .ds-step-bar{ display:none; }
.ds-content .ds-step-body{ background:var(--ds-surface-alt); border:1px solid var(--ds-line); border-radius:var(--ds-radius-m); padding:20px; margin-bottom:18px; display:flex; flex-direction:column; gap:6px; }
.ds-content .ds-step-body h3{ font-size:17px !important; }
.ds-content .ds-step-body p{ font-size:14.5px; color:var(--ds-ink-soft); }
.ds-content .ds-step-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }

/* ---------- ピル / バッジ ---------- */
.ds-content .ds-pill{ font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; background:var(--ds-gold-tint); color:var(--ds-gold-deep); font-family:var(--ds-font-accent); }
.ds-content .ds-pill.-leaf{ background:var(--ds-leaf-tint); color:var(--ds-leaf-deep); }
.ds-content .ds-pill.-pink{ background:var(--ds-cherry-tint); color:var(--ds-cherry-deep); }
.ds-content .ds-badge-note{
  display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ds-ink-soft);
  background:var(--ds-surface-alt); border:1px dashed var(--ds-line); padding:10px 14px; border-radius:var(--ds-radius-s);
}

/* ---------- FAQ（アコーディオン） ---------- */
.ds-content .ds-faq-item{ border:1px solid var(--ds-line); border-radius:var(--ds-radius-m); background:var(--ds-surface-alt); overflow:hidden; margin-bottom:12px; }
.ds-content .ds-faq-q{
  width:100%; display:flex; align-items:center; gap:14px; padding:18px 20px; background:none; border:none;
  text-align:left; cursor:pointer; font-family:inherit; color:var(--ds-ink);
}
.ds-content .ds-faq-q .ds-qmark{
  width:28px; height:28px; border-radius:50%; background:var(--ds-cherry-tint); color:var(--ds-cherry-deep);
  display:flex; align-items:center; justify-content:center; font-family:var(--ds-font-accent); font-weight:700; flex:none; font-size:14px;
}
.ds-content .ds-faq-q span{ font-weight:700; font-size:15px; flex:1; }
.ds-content .ds-faq-q .ds-chev{ width:16px; height:16px; color:var(--ds-ink-soft); transition:transform .2s; flex:none; border:solid var(--ds-ink-soft); border-width:0 2px 2px 0; transform:rotate(45deg); margin-right:4px; }
.ds-content .ds-faq-item.-open .ds-faq-q .ds-chev{ transform:rotate(-135deg); }
.ds-content .ds-faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.ds-content .ds-faq-item.-open .ds-faq-a{ max-height:400px; }
.ds-content .ds-faq-a-inner{ padding:0 20px 20px 62px; font-size:14.5px; color:var(--ds-ink-soft); }

/* ---------- 区切り ---------- */
.ds-content .ds-hr{ height:1px; background:var(--ds-line); border:none; margin-block:8px; }

@media (prefers-reduced-motion: reduce){
  .ds-content *{ transition-duration:.001ms !important; }
}

/* ============================================================
   トップページ メインビジュアル（SWELL標準機能）の見た目調整
   ============================================================ */

/* 画像をやわらかい有機的な形に切り抜く
   ※ブログパーツ（リッチカラム）内の画像ブロックに、下記の手順で
   　クラス「ds-mv-photo」を付けてください。
   　1. 画像ブロックを選択
   　2. 右側の設定パネル →「高度な設定」を開く
   　3.「追加CSSクラス」欄に ds-mv-photo と入力
*/
.ds-mv-photo{
  border-radius: 63% 37% 54% 46% / 43% 47% 53% 57%;
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(196, 61, 110, .45);
}
.ds-mv-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PCの時だけメインビジュアルの高さを広げる（お好みで min-height の数値を調整してください） */
@media (min-width: 900px){
  #main_visual.p-mainVisual .p-mainVisual__slide{
    min-height: 640px;
  }
}

/* ============================================================
   ヘッダー グローバルメニュー（PC）／スマホメニュー
   ------------------------------------------------------------
   SWELL標準の「ベースとなるフォント」設定は、游ゴシック／ヒラギノ／
   Noto Sans JP／明朝体の4択のみで、Zen Maru Gothic は選べません。
   そのため、ここで直接フォントとデザインを指定しています。
   （Google Fontsの読み込みは functions.php 側で行っています）
   ============================================================ */
.c-gnav,
.c-gnav .ttl,
.p-spHeadMenu,
.p-spHeadMenu .ttl{
  font-family: 'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;
}

.c-gnav > .menu-item > a .ttl{
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
}

.c-gnav > .menu-item > a:hover .ttl,
.c-gnav > .menu-item.current-menu-item > a .ttl,
.c-gnav > .menu-item.current_page_item > a .ttl{
  color: #F0568C;
}

.c-gnav > .menu-item > a:after{
  background-color: #F0568C;
}

.c-gnav .sub-menu{
  border-radius: 12px;
  overflow: hidden;
}

.c-gnav .sub-menu a{
  font-weight: 600;
}

.c-gnav .sub-menu a:hover{
  color: #F0568C;
}

.p-spHeadMenu .menu-item.-current{
  font-weight: 700;
}

/* ============================================================
   ヘッダー内部ウィジェット（電話番号表示）
   ============================================================ */
.w-header,
.w-header .textwidget{
  font-family: 'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;
}

.w-header .textwidget p{
  margin: 0;
  line-height: 1.4;
  font-size: 11px;
  font-weight: 500;
  color: #85707A;
}

.w-header .textwidget a{
  display: inline-block;
  margin-top: 2px;
  font-size: 20px;
  font-weight: 700;
  color: #F0568C;
  line-height: 1.2;
}

.w-header .textwidget a:hover{
  color: #C43D6E;
}

/* ============================================================
   ボタン：塗りつぶし（ピンク）ボタンの文字色は、ホバー時も常に白を維持
   ============================================================ */
.ds-btn-primary,
.ds-btn-primary:hover,
.ds-btn-primary:focus{
  color: #fff !important;
}

.swell-block-button.is-style-solid .swell-block-button__link,
.swell-block-button.is-style-solid .swell-block-button__link:hover,
.swell-block-button.is-style-solid .swell-block-button__link:focus{
  color: #fff !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus{
  color: #fff !important;
}

/* ===== Contact Form 7：さくらんぼ（HTML変更なし・CSSのみ） ===== */

/* カード */
.wpcf7 { background: none; border: none; padding: 0; margin: 0; }
.wpcf7 .wpcf7-form {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 28px 28px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 6px 24px rgba(240, 86, 140, .10);
}
.wpcf7 .wpcf7-form br { display: none; }

/* 項目（<p>1つ＝1項目）のラベル文字 */
.wpcf7 .wpcf7-form p {
  margin: 0 0 22px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #4a3b3f;
}

/* 「(必須)」「(任意)」をバッジ表示に置き換え */
.wpcf7 .required,
.wpcf7 .any {
  display: inline-block;
  margin-left: 8px;
  font-size: 0;
  line-height: 1;
  vertical-align: middle;
}
.wpcf7 .required::after,
.wpcf7 .any::after {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
}
.wpcf7 .required::after { content: "必須"; background: #f0568c; color: #fff; }
.wpcf7 .any::after { content: "任意"; background: #f3eaee; color: #8a7b7e; }

/* 入力欄 */
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 18px;
  border: 1px solid #f3d3dd;
  border-radius: 14px;
  background-color: #fff;
  font-size: 16px; /* iPhoneで拡大されないよう16px */
  font-weight: 400;
  line-height: 1.5;
  color: #4a3b3f;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.wpcf7 textarea { height: 150px; resize: vertical; }
.wpcf7 ::placeholder { color: #9a8f92; opacity: 1; }

/* セレクトボックス（ご用件）の矢印 */
.wpcf7 select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a3b3f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}

/* フォーカス */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: #f0568c;
  box-shadow: 0 0 0 3px rgba(240, 86, 140, .15);
}

/* 画像認証（ラベルの次の行：画像＋入力欄を横並び） */
.wpcf7 .wpcf7-form p:has(+ p .wpcf7-captchar) { margin-bottom: 8px; }
.wpcf7 .wpcf7-form p:has(.wpcf7-captchar) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.wpcf7 .wpcf7-form p:has(.wpcf7-captchar) .wpcf7-form-control-wrap {
  flex: 1 1 160px;
  margin-top: 0;
}
.wpcf7 .wpcf7-captchac {
  display: block;
  padding: 4px;
  border: 1px solid #f3d3dd;
  border-radius: 10px;
  background: #fff;
}

/* 送信ボタン（紙飛行機アイコン付き） */
.wpcf7 .wpcf7-form p:has(.wpcf7-submit) { position: relative; margin: 28px 0 0; }
.wpcf7 .wpcf7-form input.wpcf7-submit {
  display: block;
  width: 100%;
  height: 62px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background-color: #f0568c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: calc(50% - 5.8em) center; /* アイコン位置：5.8を増減して微調整 */
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 8px 20px rgba(240, 86, 140, .35);
  transition: background-color .2s, transform .2s, box-shadow .2s;
}
.wpcf7 .wpcf7-form input.wpcf7-submit:hover { background-color: #e04580; transform: translateY(-1px); }
.wpcf7 .wpcf7-form input.wpcf7-submit:active { transform: none; box-shadow: 0 3px 8px rgba(240, 86, 140, .3); }
.wpcf7 .wpcf7-spinner { position: absolute; right: 22px; top: 50%; margin: -12px 0 0; }

/* エラー・送信結果 */
.wpcf7 .wpcf7-not-valid { background-color: #fff5f8; border-color: #e0457b; }
.wpcf7 span.wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; font-weight: 400; color: #d63873; }
.wpcf7 .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid #f0568c;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #8bc53f; background: #f3faec; }

/* スマホ */
@media (max-width: 599px) {
  .wpcf7 .wpcf7-form { padding: 24px 18px 20px; border-radius: 22px; }
}