@charset "UTF-8";

/* ==========================================================
   文字設定（フォント・太さ・色） / SWELL補正
========================================================== */

/* 1) 基本文字色
html,
body {
  color: #222222;
}
 */
/* 2) 白背景系ブロックの文字色補正（SWELL/ブロックの上書き対策）
.has-white-background-color,
.shadow_on > .wp-block-column,
.is-style-clmn-shadow > .swell-block-columns__inner > .swell-block-column {
  color: #222222 !important;
}
 */


/* ==========================================================
   フルワイド背景（PC：雨 / SP：雨）
========================================================== */
.fullwide-bg{
  background-image: url("https://styla-plus.com/wp-content/uploads/2026/01/bc_20260114_PC.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

@media screen and (max-width: 767px){
  .fullwide-bg{
    background-image: url("https://styla-plus.com/wp-content/uploads/2026/01/bc_20260114_SP.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
  }
}

}





/* ==========================================================
   余白設定
========================================================== */
.l-content {
  margin-bottom: 0 !important;
}


/* ==========================================================
   Availability Calendar（表示用カレンダー）
========================================================== */

.avail-cal.simple {
  --h: clamp(42px, 13vw, 80px);
  --line: #ddd;
  --muted: #f6f6f6;
  --today: #fff9cd;
}

.avail-cal.simple * {
  box-sizing: border-box;
}

.avail-cal.simple .ac-month {
  margin: 8px 0 14px;
}

.avail-cal.simple .ac-title {
  text-align: center;
  font-weight: 700;
  margin: 0 0 8px;
}

.avail-cal.simple .ac-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* 曜日行 */
.avail-cal.simple .ac-w {
  text-align: center;
  padding: 8px 0;
  font-size: 0.92rem;
  color: #333;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.avail-cal.simple .ac-w:nth-child(7n+1) {
  border-left: 1px solid var(--line);
}
.avail-cal.simple .ac-w0 { color: #d33; }
.avail-cal.simple .ac-w6 { color: #2a6ad6; }

/* 日付セル */
.avail-cal.simple .ac-cell {
  height: var(--h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.avail-cal.simple .ac-cell:nth-child(7n+1) {
  border-left: 1px solid var(--line);
}

.avail-cal.simple .ac-cell.ac-out {
  background: #f3f3f3;
}

.avail-cal.simple .ac-cell.is-today {
  background: var(--today);
}

.avail-cal.simple .ac-cell.is-red { color: #d33; }
.avail-cal.simple .ac-cell.is-blue { color: #2a6ad6; }

.avail-cal.simple .ac-cell .num {
  font-size: 0.96rem;
  line-height: 1;
}

.avail-cal.simple .ac-cell .mk {
  font-size: 0.95rem;
  line-height: 1;
  color: #444;
}

/* その他状態 */
.avail-cal.simple .ac-cell.m-dash { background: #fff; }
.avail-cal.simple .ac-cell.m-dash.s-lead { background: var(--muted); }
.avail-cal.simple .ac-cell.m-dash .mk { color: #666; }

/* カレンダー下部ナビ */
.avail-cal.simple .ac-bottomnav {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.avail-cal.simple .ac-bottomnav a {
  color: #3a3a3a;
  text-decoration: none;
}
.avail-cal.simple .ac-bottomnav a.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* SPサイズ */
@media (max-width: 480px) {
  .avail-cal.simple {
    --h: clamp(34px, 12.5vw, 46px);
  }
  .avail-cal.simple .ac-w {
    padding: 5px 0;
    font-size: 0.86rem;
  }
  .avail-cal.simple .ac-cell .num {
    font-size: 0.9rem;
  }
  .avail-cal.simple .ac-cell {
    gap: 5px;
  }
}




/* =========================================
   吹き出し（SWELL / onayami）
   - 本体：.wp-block-group.has-swl-pale-03-background-color
   - 外側：.onayami-1〜4（swell-block-column側）
   ========================================= */

/* 本体（共通） */
.wp-block-group.has-swl-pale-03-background-color{
  position: relative;
  border-radius: 25px;
  overflow: visible; /* 突起が切れないように */
}

/* 突起（共通） */
.onayami-1 .wp-block-group.has-swl-pale-03-background-color::after,
.onayami-2 .wp-block-group.has-swl-pale-03-background-color::after,
.onayami-3 .wp-block-group.has-swl-pale-03-background-color::after,
.onayami-4 .wp-block-group.has-swl-pale-03-background-color::after{
  content:"";
  position:absolute;
  background-color: var(--color_pale03);
  pointer-events: none;
  z-index: 2;
}

/* 1：底辺 左から2/3、右下（見え方） */
.onayami-1 .wp-block-group.has-swl-pale-03-background-color::after{
  top: 100%;
  left: 66.666%;
  width: 32px;
  height: 20px;
  clip-path: polygon(18% 0, 88% 0, 92% 100%);
  transform: translateX(-50%);
}

/* 2：底辺 左から1/3、左下（見え方） */
.onayami-2 .wp-block-group.has-swl-pale-03-background-color::after{
  top: 100%;
  left: 33.333%;
  width: 32px;
  height: 20px;
  clip-path: polygon(12% 0, 82% 0, 8% 100%);
  transform: translateX(-50%);
}

/* 3：右辺 上から2/3、右上（見え方） */
.onayami-3 .wp-block-group.has-swl-pale-03-background-color::after{
  top: 66.666%;
  left: 100%;
  width: 20px;
  height: 32px;
  clip-path: polygon(0 18%, 0 88%, 100% 8%);
  transform: translateY(-50%);
}

/* 4：左辺 上から1/3、左下（見え方） */
.onayami-4 .wp-block-group.has-swl-pale-03-background-color::after{
  top: 33.333%;
  right: 100%;
  width: 20px;
  height: 32px;
  clip-path: polygon(100% 18%, 100% 88%, 0 92%);
  transform: translateY(-50%);
}


/* =========================
  汎用：シャドウ・角丸
========================= */
/* 影（やわらかめ・1種類） */
.u-shadow{
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}

/* 角丸（必要なときだけ付ける） */
.u-round{
  border-radius: 20px;
  overflow: hidden;
}


/* =========================
  グループのテキスト幅（任意のブロックを本文幅に寄せる）
========================= */
/* テキスト幅（好みで調整） */
:root{
  --u-text-width: 720px;
}

/* u-textwidth を付けたブロックだけ “テキスト幅” にする */
.wp-block-group.u-textwidth{
  width: 100%;
  max-width: var(--u-text-width);
  margin-left: auto;
  margin-right: auto;
}