/*
Theme Name: harada-suzuko
Description: 原田すずこ(はらだ寿々子)公式サイトのオリジナルテーマ。Snow Monkey を使わず、素のHTMLとCSSで作る。
Version: 1.0.0
Author: 株式会社オーガスタ
Text Domain: harada-suzuko
*/

/* ---------- 基本の値 ---------- */
@font-face { font-family: "Noto Sans JP"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("assets/fonts/NotoSansJP-Regular.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans JP"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("assets/fonts/NotoSansJP-Bold.woff2") format("woff2"); }

:root {
  --accent: #cb141c;
  --accent-color: #cb141c;
  --dark-accent-color: #6e0b0f;
  --light-accent-color: #ee575d;
  --lighter-accent-color: #f59599;
  --lightest-accent-color: #f6a6a9;
  --sub-accent-color: #3b4799;
  --dark-sub-accent-color: #1f254f;
  --light-sub-accent-color: #727dc8;
  --lighter-sub-accent-color: #a3aadc;
  --lightest-sub-accent-color: #b0b6e1;
  --wp--preset--color--accent-color: var(--accent-color);
  --wp--preset--color--sub-accent-color: var(--sub-accent-color);
  --text: #333;
  --_color-text: #333;
  --_color-black: #111;
  --_color-white: #fff;
  --_lightest-color-gray: #f7f7f7;
  --_lighter-color-gray: #eee;
  --_light-color-gray: #ccc;
  --_color-gray: #999;
  --_dark-color-gray: #666;
  --_darker-color-gray: #444;
  --_darkest-color-gray: #3b3b3b;
  --_global--border-radius: 6px;
  --_half-leading: 0.4;
  --_global--line-height: 1.8;
  --font-family: "Noto Sans JP", sans-serif;
  --_global--font-family: var(--font-family);
  /* 余白の目盛り(Snow Monkey と同じ計算。1 = 1.8rem) */
  --_space-unitless: 1.8;
  --_space: 1.8rem;
  --_margin-scale: 1;
  --_ms-2: .6; --_ms-1: 1.2; --_ms1: 1.8; --_ms2: 3; --_ms3: 4.8;
  --_s-2: .6rem;
  --_s-1: 1.2rem;
  --_s1: 1.8rem;
  --_s2: clamp(2.64rem, calc(2.64rem + 0.00626 * (100vw - 360px)), 3rem);
  --_s3: clamp(3.15rem, calc(3.15rem + 0.0287 * (100vw - 360px)), 4.8rem);
  --_margin-2: var(--_s-2);
  --_margin-1: var(--_s-1);
  --_margin1: var(--_s1);
  --_margin2: var(--_s2);
  --_margin3: var(--_s3);
  --_padding-2: var(--_s-2);
  --_padding-1: var(--_s-1);
  --_padding1: var(--_s1);
  --_padding2: var(--_s2);
  --_padding3: var(--_s3);
  --_global--container-max-width: 1280px;
  --_global--font-size-px: 16px;
  --_global--background-color: #fff;
  /* 本文の h2・h3 の飾り(Snow Monkey の設定と同じ) */
  --entry-content-h2-background-color: #f7f7f7;
  --entry-content-h2-padding: calc(var(--_space) * 0.25) calc(var(--_space) * 0.25) calc(var(--_space) * 0.25) calc(var(--_space) * 0.5);
  --entry-content-h2-border-left: 1px solid var(--wp--preset--color--sm-accent);
  --entry-content-h3-border-bottom: 1px solid #eee;
  --entry-content-h3-padding: 0 0 calc(var(--_space) * 0.25);
  --max: 1280px;
  --gutter: 1.8rem;
  --wp--custom--content-width: 1280px;
  --wp--custom--content-wide-width: 1280px;
  /* 余白の目盛り(Snow Monkey の preset と同じ値) */
  --wp--preset--spacing--20: 0.6rem;
  --wp--preset--spacing--30: 1.2rem;
  --wp--preset--spacing--40: 1.8rem;
  --wp--preset--spacing--50: clamp(2.64rem, calc(2.64rem + 0.00626 * (100vw - 360px)), 3rem);
  --wp--preset--spacing--60: clamp(3.15rem, calc(3.15rem + 0.0287 * (100vw - 360px)), 4.8rem);
  --wp--preset--spacing--70: clamp(3.99rem, calc(3.99rem + 0.0663 * (100vw - 360px)), 7.8rem);
  --wp--preset--spacing--80: clamp(5.34rem, calc(5.34rem + 0.1263 * (100vw - 360px)), 12.6rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { letter-spacing: 0.05rem; }
/* 中身が短いページでもフッターを画面の下に(Snow Monkey と同じ) */
body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
img, video { max-width: 100%; height: auto; }
a { color: var(--accent); }
.screen-reader-text, .skip-link:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 300000; background: #fff; padding: .5rem 1rem; }

/* ---------- ヘッダー(赤い帯に白い文字。スマホ・タブレットでは上に固定) ---------- */
.hs-header { position: relative; z-index: 1000; background: var(--accent); color: #fff; }
@media (max-width: 1023.9px) {
  .hs-header { position: sticky; top: 0; overflow: hidden; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .05); }
}
/* ログイン中の管理バーの下に固定する */
@media (min-width: 783px) and (max-width: 1023.9px) { .admin-bar .hs-header { top: 32px; } }
@media (min-width: 601px) and (max-width: 782px) { .admin-bar .hs-header { top: 46px; } }
.hs-header__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 28.8px;
  display: flex; align-items: center; gap: 19.2px;
}
.hs-brand { margin: 0; padding: 9.6px 0; flex: 1 1 auto; line-height: 1; font-size: 1rem; min-width: 0; }
.hs-brand a { display: block; }
.hs-brand .custom-logo { display: block; width: 250px; max-width: 100%; height: auto; }
@media (max-width: 1023.9px) { .hs-brand .custom-logo { margin-inline: auto; } }
.hs-nav { display: none; }
.hs-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.hs-nav a {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 19.2px; color: #fff; text-decoration: none; font-weight: 700; font-size: 14.2222px; line-height: 25.6px;
}
/* 下線がのびる動き(Snow Monkey の hover-text-color と同じ) */
.hs-nav a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 10px; height: 1px; background: #fff; transition: left .2s ease-out, right .2s ease-out;
}
.hs-nav a:hover::after, .hs-nav a:focus-visible::after { left: 19.2px; right: 19.2px; }
@media (min-width: 1024px) {
  .hs-nav { display: block; flex: 0 0 auto; }
  .hs-header .hs-burger { display: none; }
}

/* ハンバーガーボタン(MENU の文字つき) */
.hs-burger {
  display: inline-block; flex: 0 0 auto; width: 22px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  font: inherit; font-size: 16px; line-height: 16px; text-align: center;
}
.hs-burger__bars { display: inline-block; position: relative; width: 22px; height: 16px; margin: 3px 0; vertical-align: top; }
.hs-burger__bar { position: absolute; left: 0; display: block; width: 22px; height: 1px; background: #fff; transition: transform .2s ease-out, top .2s ease-out, bottom .2s ease-out; }
.hs-burger__bar:nth-child(1) { top: 0; }
.hs-burger__bar:nth-child(2) { top: 7px; }
.hs-burger__bar:nth-child(3) { top: 14px; }
.hs-burger__label { display: block; margin-top: 1px; font-family: "Arial Narrow", Verdana, sans-serif; font-size: 8px; line-height: 1; color: #fff; }
.hs-burger[aria-expanded="true"] .hs-burger__bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.hs-burger[aria-expanded="true"] .hs-burger__bar:nth-child(2) { display: none; }
.hs-burger[aria-expanded="true"] .hs-burger__bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* PC で下へスクロールしたときに上から出るメニュー */
.hs-dropnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: var(--accent);
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .05); transform: translateY(-100%); transition: transform .2s ease-out;
}
.hs-dropnav.is-show { transform: none; }
.admin-bar .hs-dropnav { top: 32px; }
@media (max-width: 1023.9px) { .hs-dropnav { display: none; } }

/* ドロワー(画面いっぱいのメニュー。Snow Monkey の overall と同じ) */
.hs-drawer {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  padding: 60px 0 0; background: var(--accent); color: #fff; font-size: 14.2222px; line-height: 25.6px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease-out, visibility .2s ease-out; overflow-y: auto;
}
.hs-drawer__controls { position: absolute; top: 0; left: 19.2px; right: 19.2px; padding: 9.6px 0; text-align: right; }
.hs-drawer__inner { flex: 1 1 100%; margin: auto 0; padding: 0 19.2px; max-height: 100%; }
.hs-drawer__menu { list-style: none; margin: 0; padding: 9.6px 0; }
.hs-drawer__menu li { position: relative; padding: 9.6px 0; }
.hs-drawer__menu a { display: block; color: #fff; text-decoration: none; }
.hs-drawer__menu a:hover, .hs-drawer__menu a:focus-visible { text-decoration: underline; }
body.is-drawer-open { overflow: hidden; }
body.is-drawer-open .hs-drawer { opacity: 1; visibility: visible; }

/* ---------- 本文の入れ物 ---------- */
.hm-main { display: block; overflow-x: clip; }
.hm-section { position: relative; margin: 0; padding: var(--_padding3) 0; display: flex; align-items: center; }
.hm-section > * { flex: 1 1 auto; min-width: 0; }
/* 帯の中では、中身の最大幅は 100%(Snow Monkey の smb-section__body・smb-container__body と同じ) */
.hm-section, .hm-grid__item { --wp--style--global--content-size: 100%; --wp--style--global--wide-size: 100%; }
/* 背景の写真つきの帯(Snow Monkey の「セクション(背景画像)」の代わり) */
.hm-section[style*="background-image"] { flex-direction: column; align-items: stretch; }
.hm-section.hm-wide { min-height: 75vh; }
.hm-section.hm-items-bottom { align-items: flex-end; }
/* 右寄せの帯: 中の入れ物(幅1280px)の右端に寄せる */
.hm-section.hm-justify-right > .hm-container { display: flex; flex-direction: column; align-items: flex-end; width: 100%; padding-inline: 0; }
.hm-section.hm-justify-right { align-items: flex-end; }
/* 中央・左に寄せる帯: 中身の入れ物(hm-cw)は中身の幅だけ(Snow Monkey の contents-wrapper と同じ) */
.hm-section:is(.hm-justify-center, .hm-justify-left) > :is(.hm-container, .hm-pad) { display: flex; }
.hm-section.hm-justify-center > :is(.hm-container, .hm-pad) { justify-content: center; }
.hm-section.hm-justify-left > :is(.hm-container, .hm-pad) { justify-content: flex-start; }
.hm-cw { max-width: 100%; min-width: 0; }

/* 帯の背景の層(Snow Monkey の fixed-background・background・区切りと同じ) */
.hm-sec-fixed { position: absolute; inset: 0; background-color: var(--hm-sec-fixed-background-color, transparent); }
.hm-sec-bg {
  position: absolute; top: var(--hm-sec-background-top, 0); right: var(--hm-sec-background-right, 0);
  bottom: var(--hm-sec-background-bottom, 0); left: var(--hm-sec-background-left, 0); background-color: var(--hm-sec-background-color, transparent);
}
.hm-sec-dividers { position: absolute; top: var(--hm-sec-dividers-top, 0%); right: 0; bottom: var(--hm-sec-dividers-bottom, 0%); left: 0; overflow: hidden; }
.hm-sec-divider { position: absolute; right: -1px; left: -1px; line-height: 1; font-size: 0; }
.hm-sec-divider svg { position: absolute; right: 0; left: 0; height: auto; width: 100%; max-height: 100px; }
.hm-sec-divider--top { top: -1px; }
.hm-sec-divider--top svg { top: 0; transform: rotate(180deg); }
.hm-sec-divider--bottom { bottom: -1px; }
.hm-sec-divider--bottom svg { bottom: 0; }
.hm-sec-divider--triangle svg { margin: 0 auto; max-width: 200px; }
.hm-has-deco > :not(.hm-sec-fixed) { position: relative; }

.hm-container { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.hm-container .hm-container { max-width: 100%; } /* 帯の中の「コンテナ」ブロック: 左右の余白は PC では 1.8rem のまま(Snow Monkey の c-container と同じ) */
.hm-container.hm-nopad { padding-inline: 0; }
@media (max-width: 768px) { .hm-container { padding-inline: .95rem; } .hm-container .hm-container, .hm-container.hm-nopad { padding-inline: 0; } }
.hm-section.alignfull { overflow: visible; }

/* 段落・見出しの間隔と文字の大きさは assets/css/sm-base.css(Snow Monkey と同じ計算) */
.hm-narrow { margin-inline: auto; }
.hm-pad { padding-inline: var(--gutter); margin-inline: auto; }
@media (max-width: 768px) { .hm-pad { padding-inline: .95rem; } }
.hm-main pre.wp-block-preformatted { white-space: pre-wrap; font-family: inherit; overflow: visible; }
.has-text-align-center { text-align: center; }
.aligncenter { margin-inline: auto; text-align: center; }
.wp-block-video video { display: block; width: 100%; }

/* 画面の幅ごとの出し分け */
@media (max-width: 639.9px) { .hm-hide-sm { display: none !important; } }
@media (min-width: 640px) and (max-width: 1023.9px) { .hm-hide-md { display: none !important; } }
@media (min-width: 1024px) { .hm-hide-lg { display: none !important; } }

/* 並び(Snow Monkey の「アイテム」の代わり)。外の入れ物 hm-items と、並び hm-grid(Snow Monkey の c-row と同じ計算)の2段 */
.hm-grid {
  --_gap: var(--_margin1); --_item-width: 100%;
  display: flex; flex-wrap: wrap; margin: 0 calc(var(--_gap) * -.5) calc(var(--_gap) * -1);
}
.hm-grid > .hm-grid__item { flex: 0 0 var(--_item-width); max-width: var(--_item-width); padding-inline: calc(var(--_gap) * .5); margin-bottom: var(--_gap); }
.hm-grid[data-sm="1"] { --_item-width: 100%; }
.hm-grid[data-sm="2"] { --_item-width: 50%; }
.hm-grid[data-sm="3"] { --_item-width: 33.3333333333%; }
.hm-grid[data-sm="4"] { --_item-width: 25%; }
@media (min-width: 640px) {
  .hm-grid[data-md="1"] { --_item-width: 100%; }
  .hm-grid[data-md="2"] { --_item-width: 50%; }
  .hm-grid[data-md="3"] { --_item-width: 33.3333333333%; }
  .hm-grid[data-md="4"] { --_item-width: 25%; }
}
@media (min-width: 1024px) {
  .hm-grid[data-lg="1"] { --_item-width: 100%; }
  .hm-grid[data-lg="2"] { --_item-width: 50%; }
  .hm-grid[data-lg="3"] { --_item-width: 33.3333333333%; }
  .hm-grid[data-lg="4"] { --_item-width: 25%; }
}
.hm-grid--center { justify-content: center; }
.hm-grid--right { justify-content: flex-end; }
.hm-grid--middle { align-items: center; }
.hm-grid--top { align-items: flex-start; }
.hm-grid--bottom { align-items: flex-end; }
/* 動画の埋め込みの縦横比 */
.hm-ratio-16-9, .hm-ratio-4-3 { position: relative; height: 0; }
.hm-ratio-16-9 { padding-bottom: 56.25%; }
.hm-ratio-4-3 { padding-bottom: 75%; }
:is(.hm-ratio-16-9, .hm-ratio-4-3) :is(iframe, embed, object) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* カバー(写真の枠) */
.wp-block-cover__image-background { transform: scale(1); }

/* ふわっと出る動き */
.hm-fade { opacity: 0; transform: translateY(10px); transition: opacity .6s cubic-bezier(0, 0, 0, 1), transform .6s cubic-bezier(0, 0, 0, 1); }
.hm-fade-right { opacity: 0; transform: translateX(30px); transition: opacity 1.4s cubic-bezier(0, 0, 0, 1) .3s, transform 1.4s cubic-bezier(0, 0, 0, 1) .3s; }
.hm-fade-left { opacity: 0; transform: translateX(-30px); transition: opacity 1.4s cubic-bezier(0, 0, 0, 1) .3s, transform 1.4s cubic-bezier(0, 0, 0, 1) .3s; }
.hm-fade.is-in, .hm-fade-right.is-in, .hm-fade-left.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hm-fade, .hm-fade-right, .hm-fade-left, .xcs-fadein { opacity: 1 !important; transform: none !important; transition: none !important; }
  .xcs-fv-bg, .xcs-fv-bg--2 { animation: none !important; }
}

/* ---------- フッター ---------- */
.hs-footer { position: relative; border-top: 1px solid var(--_lighter-color-gray); overflow: hidden; }
/* フッターの上の固定ページ(SNS のアイコン)は本文ではないので、帯どうしの間隔はつけない */
.hs-footer__part > * { margin: 0; }
.hs-footer__nav { padding: 9.6px 28.8px; }
.hs-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 9.6px; }
@media (min-width: 1024px) { .hs-footer__nav ul { justify-content: center; } }
.hs-footer__nav a { color: var(--text); text-decoration: none; font-size: 12.8px; line-height: 23.04px; display: block; }
.hs-footer__nav a:hover { text-decoration: underline; }
.hs-copy { background: var(--text); color: #fff; text-align: center; padding: 19.2px 28.8px; font-size: 14.2222px; line-height: 25.6px; }

/* ページ上へ戻るボタン(赤い四角) */
.hs-pagetop {
  position: fixed; right: 0; bottom: 0; z-index: 99998; width: 50px; height: 50px;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  text-decoration: none; opacity: 0; visibility: hidden; transition: opacity .2s ease-out, visibility .2s ease-out;
}
.hs-pagetop.is-show { opacity: 1; visibility: visible; }
.hs-pagetop svg { display: block; width: 20px; height: 20px; }

/* お問い合わせフォーム(WPForms)の余白だけ整える */
.hm-main .wpforms-container { margin-block: 0; }

/* 404(Snow Monkey の 404 と同じ並び: パンくず → 本文。横に空のサイドバーの幅をとる) */
.hs-404 { display: block; }
.hs-404__container { max-width: var(--max); margin-inline: auto; padding-inline: 28.8px; }
.hs-breadcrumbs { list-style: none; margin: 0; padding: 9.6px 0; --_font-size-level: -2; font-size: var(--_font-size); line-height: var(--_line-height); }
.hs-breadcrumbs li { display: inline; }
.hs-breadcrumbs li + li::before {
  content: ""; margin: .45em .45em .15em .15em; display: inline-block; height: .4em; width: .4em;
  border-color: currentcolor; border-style: solid; border-width: 1px 1px 0 0; transform: rotate(45deg);
}
.hs-breadcrumbs a { color: inherit; text-decoration: none; }
.hs-breadcrumbs a:hover, .hs-breadcrumbs a:focus-visible { text-decoration: underline; }
.hs-404__inner { margin-top: var(--_margin2); padding-bottom: var(--_margin2); }
@media (min-width: 1024px) { .hs-404__main { max-width: calc(100% - 336px - var(--_margin2)); } }
.hs-search { display: flex; max-width: 100%; }
.hs-search input {
  flex: 1 1 0%; min-width: 0; padding: 12px 16px; border: 1px solid var(--_light-color-gray);
  border-radius: var(--_global--border-radius) 0 0 var(--_global--border-radius); background: #fff; color: #000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .035); font: inherit; font-size: 16px; line-height: 28.8px;
}
.hs-search button {
  flex: 0 0 auto; position: relative; left: -1px; padding: 12px 16px; border: 1px solid var(--_light-color-gray);
  border-radius: 0 var(--_global--border-radius) var(--_global--border-radius) 0; background: #fff; color: var(--text);
  font: inherit; font-size: 16px; line-height: 16px; cursor: pointer;
}

/* 一覧(検索結果など。Snow Monkey の一覧と同じ並び) */
.hs-list__container { padding-inline: 28.8px; }
.hs-list__inner { margin-top: var(--_margin2); padding-bottom: var(--_margin2); }
.hs-list__title { margin: 0 0 var(--_margin1); }
.hs-entries { --_gap: var(--_margin1); list-style: none; display: flex; flex-wrap: wrap; margin: 0 calc(var(--_gap) * -.5) calc(var(--_gap) * -1); padding: 0; }
.hs-entries__item { flex: 0 1 50%; max-width: 50%; padding: 0 calc(var(--_gap) * .5); margin-bottom: var(--_gap); }
@media (min-width: 1024px) { .hs-entries__item { flex-basis: 33.3333%; max-width: 33.3333%; } }
.hs-entries__item > a { display: block; color: inherit; text-decoration: none; }
.hs-entries__figure { position: relative; margin-bottom: var(--_margin-1); aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--_lighter-color-gray); }
.hs-entries__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-entries__title { margin: 0 0 var(--_margin-2); --_font-size-level: 1; font-size: var(--_fluid-font-size); line-height: var(--_line-height); }
.hs-entries__item > a:hover .hs-entries__title { text-decoration: underline; }
.hs-list .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: var(--_margin2); }