@charset "utf-8";
/* ==========================================================================
   蓮池社会保険労務士事務所 / 下層ページ共通の追加スタイル
   読み込み順： reset.css → style-tokens.css → style.css → page.css
   ※ 色・余白・角丸・ボタンはすべて TOP のトークンを流用。ここには TOP に
     存在しないパーツ（ページタイトル帯・表・フォーム・記事一覧など）だけ。
   ========================================================================== */

:root {
  /* 本文として使える濃さのサブ文字色（コントラスト 4.5:1 以上を確保） */
  --c-note: #4d5a63;
}

/* --------------------------------------------------------------------------
   1. ページタイトル帯 + パンくず
   -------------------------------------------------------------------------- */
.hy-pagehead {
  background-color: var(--c-main-deep);
  background-image: linear-gradient(150deg, var(--c-main) 0%, var(--c-main-deep) 82%);
  color: var(--c-bg);
  overflow: hidden;
  padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-lg);
  position: relative;
}
.hy-pagehead::before {
  bottom: -.22em;
  color: rgba(255, 255, 255, .055);
  content: "HASUIKE";
  font-family: var(--font-en);
  font-size: 12rem;
  font-weight: 800;
  left: -.05em;
  letter-spacing: -.03em;
  line-height: .8;
  pointer-events: none;
  position: absolute;
  white-space: nowrap;
}
.hy-pagehead__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  position: relative;
  z-index: var(--z-base);
}
.hy-pagehead__en {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .22em;
  opacity: .8;
  text-transform: uppercase;
}
.hy-pagehead__title {
  font-size: clamp(2.8rem, 2.2rem + 1.6vw, 4.2rem);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.35;
}
.hy-pagehead__title::after {
  background-color: var(--c-accent);
  border-radius: 2px;
  content: "";
  display: block;
  height: 3px;
  margin-top: 18px;
  width: 44px;
}

.hy-crumb {
  margin-top: var(--space-2xs);
}.hy-crumb__list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  font-size: 1.4rem;
  line-height: 1.7;
}
.hy-crumb__list li + li::before {
  content: "／";
  margin-right: .5em;
  opacity: .6;
}
.hy-crumb__list a {
  color: var(--c-bg);
  display: inline-block;
  /* 見た目の高さは変えずに、タップできる範囲だけ上下に広げる（約44px） */
  margin-block: -1.1rem;
  padding-block: 1.1rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hy-crumb__list a:hover {
  opacity: .75;
}
.hy-crumb__list [aria-current="page"] {
  opacity: .85;
}

/* ページごとの写真背景（TOPのCTA帯と同じ手法：濃紺のオーバーレイ＋写真）
   ※ 画像は差し替え前提のプレースホルダー的な使い方です */
.p-about .hy-pagehead,
.p-profile .hy-pagehead,
.p-service .hy-pagehead,
.p-price .hy-pagehead,
.p-blog .hy-pagehead,
.p-blog-single .hy-pagehead,
.p-faq .hy-pagehead,
.p-contact .hy-pagehead {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.p-about .hy-pagehead__inner,
.p-profile .hy-pagehead__inner,
.p-service .hy-pagehead__inner,
.p-price .hy-pagehead__inner,
.p-blog .hy-pagehead__inner,
.p-blog-single .hy-pagehead__inner,
.p-faq .hy-pagehead__inner,
.p-contact .hy-pagehead__inner {
  text-shadow: 0 2px 5px rgba(0, 0, 0, .45), 0 2px 24px rgba(0, 0, 0, .4);
}
.p-about .hy-pagehead {
  background-image: linear-gradient(120deg, rgba(12, 74, 115, .88) 0%, rgba(12, 74, 115, .68) 100%), url(../img/cta-bg-alt.jpg);
}
.p-profile .hy-pagehead {
  background-image: linear-gradient(120deg, rgba(12, 74, 115, .88) 0%, rgba(12, 74, 115, .68) 100%), url(../img/svc-hoken.jpg);
}
.p-service .hy-pagehead {
  background-image: linear-gradient(120deg, rgba(12, 74, 115, .88) 0%, rgba(12, 74, 115, .66) 100%), url(../img/price-spot.jpg);
}
.p-price .hy-pagehead {
  background-image: linear-gradient(120deg, rgba(12, 74, 115, .9) 0%, rgba(12, 74, 115, .7) 100%), url(../img/blog-01.jpg);
}
.p-blog .hy-pagehead,
.p-blog-single .hy-pagehead {
  background-image: linear-gradient(120deg, rgba(12, 74, 115, .88) 0%, rgba(12, 74, 115, .68) 100%), url(../img/blog-03.jpg);
}
.p-faq .hy-pagehead {
  background-image: linear-gradient(120deg, rgba(12, 74, 115, .9) 0%, rgba(12, 74, 115, .7) 100%), url(../img/blog-02.jpg);
}
.p-contact .hy-pagehead {
  background-image: linear-gradient(120deg, rgba(12, 74, 115, .88) 0%, rgba(12, 74, 115, .68) 100%), url(../img/cta-bg.jpg);
}

/* ページ冒頭のリード文 */
.hy-lead {
  background-color: var(--c-bg);
  padding-block: var(--space-lg) 0;
}
.hy-lead__text {
  font-size: 1.7rem;
  line-height: 1.95;
  max-width: 76rem;
  text-wrap: pretty;
}

/* 注意書き */
.hy-note {
  background-color: var(--c-main-tint);
  border-radius: var(--radius-md);
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  font-size: var(--fs-small);
  gap: 6px;
  line-height: 1.85;
  padding: var(--space-sm) var(--space-md);
}
.hy-note--plain {
  background-color: var(--c-gray);
}

/* --------------------------------------------------------------------------
   2. 本文（記事・サービス詳細）
   -------------------------------------------------------------------------- */
.hy-prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 78rem;
}
.hy-prose p {
  color: var(--c-text);
  font-size: var(--fs-text);
  line-height: 1.95;
  text-wrap: pretty;
}
.hy-prose h2,
.hy-prose h3 {
  border-left: 4px solid var(--c-accent);
  color: var(--c-ink);
  font-size: var(--fs-heading);
  font-weight: 700;
  line-height: 1.6;
  margin-top: var(--space-md);
  padding-left: var(--space-xs);
}
.hy-prose h2:first-child,
.hy-prose h3:first-child {
  margin-top: 0;
}
.hy-prose h4 {
  color: var(--c-ink);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.7;
  margin-top: var(--space-sm);
}
.hy-prose a {
  color: var(--c-main);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hy-prose ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.hy-prose li {
  font-size: var(--fs-text);
  line-height: 1.9;
  padding-left: 1.3em;
  position: relative;
}
.hy-prose li::before {
  background-color: var(--c-main);
  border-radius: 50%;
  content: "";
  height: 7px;
  left: 2px;
  position: absolute;
  top: .72em;
  width: 7px;
}

/* お客様の声を引いた導入文 */
.hy-callout {
  position: relative;
  background-color: var(--c-main-tint);
  border: 1px solid #cfe3f1;
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 20px rgba(21, 128, 190, 0.06);
  color: var(--c-text);
  font-size: var(--fs-text);
  line-height: 1.95;
  padding: var(--space-md);
  text-wrap: pretty;
}
/* サービス詳細内の「お悩み」ボックスには見出し＋アイコンを付与 */
.hy-svc-panel .hy-callout::before {
  content: "こんなお悩み、ありませんか？";
  display: block;
  margin-bottom: var(--space-xs);
  padding-left: 40px;
  min-height: 30px;
  line-height: 30px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231580BE'><path d='M12 2C6.477 2 2 5.806 2 10.5c0 2.723 1.51 5.146 3.86 6.702L4.5 22l5.148-3.103c.76.068 1.548.103 2.352.103 5.523 0 10-3.806 10-8.5S17.523 2 12 2Zm.016 13.75a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm1.78-5.38c-.627.43-.796.666-.796 1.38h-2c0-1.43.519-2.166 1.665-2.95.774-.53 1.085-.886 1.085-1.425 0-.76-.648-1.375-1.625-1.375-1.075 0-1.744.601-1.875 1.625l-2-.25C8.507 5.303 10.002 4 12.125 4c2.113 0 3.625 1.402 3.625 3.375 0 1.387-.688 2.128-1.954 2.995Z'/></svg>") no-repeat left center / 30px 30px;
  color: var(--c-main);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   3. 画像プレースホルダー（実写差し替え用）
   -------------------------------------------------------------------------- */
.hy-ph {
  align-items: center;
  background-color: #e9f1f6;
  background-image: repeating-linear-gradient(45deg, rgba(21, 128, 190, .09) 0 10px, rgba(21, 128, 190, 0) 10px 20px);
  border: 1px dashed #a9c6d8;
  border-radius: var(--radius-md);
  color: var(--c-note);
  display: flex;
  font-family: var(--font-en);
  font-size: 1.2rem;
  justify-content: center;
  letter-spacing: .14em;
  min-height: 200px;
  padding: var(--space-md);
  text-align: center;
}
.hy-ph--map {
  aspect-ratio: 16 / 7;
  min-height: 280px;
}
.hy-ph--wide {
  aspect-ratio: 5 / 4;
}
.hy-ph--thumb {
  aspect-ratio: 16 / 10;
  min-height: 0;
}
/* 実画像に差し替えたメディア */
.hy-feature__img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.hy-side__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
}
/* 料金：スポット内の小見出し・注記 */
.hy-price-subhead {
  border-left: 4px solid var(--c-main);
  color: var(--c-ink);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  margin: var(--space-lg) 0 var(--space-2xs);
  padding-left: 12px;
}
.hy-pricegroup .hy-price-subhead:first-of-type {
  margin-top: var(--space-sm);
}
.hy-price-note {
  color: var(--c-note);
  font-size: var(--fs-small);
  line-height: 1.8;
  margin-top: 8px;
}
.hy-price-desc {
  color: var(--c-text);
  font-size: var(--fs-text);
  line-height: 1.9;
  margin: 4px 0 var(--space-2xs);
  text-wrap: pretty;
}
/* スポット内サブタブ（チップ） */
.hy-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-md) 0 var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--c-border);
}
.hy-subtab {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  background: var(--c-bg);
  color: var(--c-text);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 9px 16px;
  transition: var(--transition);
}
.hy-subtab:hover { border-color: var(--c-main); color: var(--c-main); background: var(--c-main-tint); }
.hy-subtab.is-active { background: var(--c-main); border-color: var(--c-main); color: #fff; }
.hy-subtab:focus-visible { outline: 3px solid rgba(21, 128, 190, 0.4); outline-offset: 2px; }
.hy-subpanel .hy-price-subhead:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   4. 表（会社概要・経歴・料金）
   -------------------------------------------------------------------------- */
.hy-tablewrap {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.hy-tablescroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hy-table {
  background-color: var(--c-bg);
  border-collapse: collapse;
  font-size: var(--fs-text);
  width: 100%;
}
.hy-table caption {
  color: var(--c-note);
  font-size: var(--fs-small);
  padding-bottom: var(--space-2xs);
  text-align: left;
}
.hy-table th,
.hy-table td {
  border-top: 1px solid var(--c-border);
  line-height: 1.85;
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  vertical-align: top;
}
.hy-table tr:first-child th,
.hy-table tr:first-child td {
  border-top: none;
}
.hy-table thead th {
  background-color: var(--c-main);
  color: var(--c-bg);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
.hy-table thead + tbody tr:first-child th,
.hy-table thead + tbody tr:first-child td {
  border-top: 1px solid var(--c-border);
}
.hy-table tbody th {
  background-color: var(--c-main-tint);
  color: var(--c-ink);
  font-weight: 700;
  white-space: nowrap;
  width: 26%;
}
.hy-table td em {
  color: var(--c-main);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
}
.hy-table--price tbody th {
  background-color: var(--c-bg);
  white-space: nowrap;
  width: auto;
}
.hy-table--price tbody tr:nth-child(even) th,
.hy-table--price tbody tr:nth-child(even) td {
  background-color: #fafbfc;
}

/* 料金の小見出しブロック */
.hy-pricegroup {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.hy-pricegroup + .hy-pricegroup {
  margin-top: var(--space-lg);
}
.hy-pricegroup__label {
  align-items: center;
  color: var(--c-main);
  display: flex;
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 700;
  gap: var(--space-2xs);
  letter-spacing: .18em;
}
.hy-pricegroup__title {
  color: var(--c-ink);
  font-size: var(--fs-heading);
  font-weight: 700;
  line-height: 1.6;
}
.hy-pricegroup__text {
  color: var(--c-text);
  font-size: var(--fs-text);
  line-height: 1.9;
  max-width: 72rem;
}
.hy-pricebig {
  align-items: baseline;
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-md);
}
.hy-pricebig__value {
  color: var(--c-main);
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
}
.hy-pricebig__note {
  color: var(--c-text);
  font-size: var(--fs-small);
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
   5. 理念・特色（about）
   -------------------------------------------------------------------------- */
.hy-philo {
  background-color: var(--c-bg);
}
.hy-philo__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
}
.hy-philo__inner .section-head {
  align-items: center;
  margin-bottom: var(--space-2xs);
}
.hy-philo__inner .section-head__en::after {
  margin-inline: auto;
}
.hy-philo__catch {
  color: var(--c-ink);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
}
.hy-philo__text {
  color: var(--c-text);
  font-size: 1.7rem;
  line-height: 2;
  max-width: 74rem;
  text-align: left;
  text-wrap: pretty;
}

.hy-feature {
  background-color: var(--c-gray);
}
.hy-feature__inner {
  align-items: start;
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
}
.hy-feature__media {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.hy-feature__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.hy-feature__item {
  background-color: var(--c-bg);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2xs) var(--space-sm);
  grid-template-columns: 4.4rem minmax(0, 1fr);
  padding: var(--space-md);
}
.hy-feature__num {
  align-items: center;
  background-color: var(--c-main-tint);
  border-radius: 50%;
  color: var(--c-main);
  display: flex;
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 800;
  grid-row: span 2;
  height: 4.4rem;
  justify-content: center;
  width: 4.4rem;
}
.hy-feature__title {
  align-self: center;
  color: var(--c-ink);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.6;
}
.hy-feature__text {
  color: var(--c-text);
  font-size: var(--fs-text);
  grid-column: 2;
  line-height: 1.9;
  text-wrap: pretty;
}

.hy-access {
  background-color: var(--c-bg);
}
.hy-access__map {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.hy-access__map iframe {
  border: 0;
  display: block;
  height: 420px;
  width: 100%;
}

/* --------------------------------------------------------------------------
   サービス詳細 タブ（左サイド縦タブ 2:8・左固定／1パネル表示）
   -------------------------------------------------------------------------- */
.hy-svc-cols {
  display: grid;
  grid-template-columns: 2fr 8fr;
  gap: var(--space-lg);
  align-items: start;
}
.hy-svc-nav {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
}
.hy-svc-body { min-width: 0; }
.hy-svc-panel { min-width: 0; }
.hy-svc-nav__title { display: none; }
[role="tabpanel"] {
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
}
.hy-tabs--side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hy-tab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}
.hy-tab__no {
  flex: none;
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--c-main);
}
.hy-tab:hover { border-color: var(--c-main); color: var(--c-main); background: var(--c-main-tint); }
.hy-tab:hover .hy-tab__no { color: var(--c-main); }
.hy-tab.is-active { background: var(--c-main); border-color: var(--c-main); color: #fff; }
.hy-tab.is-active .hy-tab__no { color: #fff; }
.hy-tab:focus-visible { outline: 3px solid rgba(21, 128, 190, 0.4); outline-offset: 2px; }
[hidden] { display: none !important; }
/* --- サービス詳細：各パネル右下の固有すかしアイコン --- */
.hy-svc-panel { position: relative; overflow: hidden; }
.hy-svc-panel > * { position: relative; z-index: 1; }
.hy-svc-panel::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 160px;
  height: 160px;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}
#komon::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231580BE'><path d='M2 7h4l3 3 2-2a2 2 0 0 1 2.8 0l4.2 4.2-1.4 1.4-4.2-4.2a.5.5 0 0 0-.7 0l-3.3 3.3a1.5 1.5 0 0 0 2.1 2.1l2.2-2.2 1.4 1.4-4.3 4.3a2 2 0 0 1-2.8 0L2 13.3V7Zm16 0h4v6.3l-3 3-1.4-1.4 2.4-2.4V9h-2V7Z'/></svg>"); }
#hoken::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231580BE'><path d='M9 2h6a2 2 0 0 1 2 2h2a2 2 0 0 1 2 2v15H3V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2-2Zm0 3h6V4H9v1Zm-2 8 3.2 3.2L17.5 9 19 10.5l-8.8 8.8L5.5 14.5 7 13Z'/></svg>"); }
#kisoku::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231580BE'><path d='M2 4h13a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8l-4 3v-3a2 2 0 0 1-2-2V4Zm17 5h3v8a2 2 0 0 1-2 2v3l-4-3h-6v-2h6.7l2.3 1.7V17h1V11h-1V9Z'/></svg>"); }
#soudan::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231580BE'><path d='M11 2h2v3h7v2h-2.4l3.2 7H21a5 5 0 0 1-10 0h.2l3.2-7H13v12h5v2H6v-2h5V7H9.6l3.2 7h.2a5 5 0 0 1-10 0h.2l3.2-7H4V5h7V2ZM5.4 14h5.2L8 8.3 5.4 14Zm8 0h5.2L16 8.3 13.4 14Z'/></svg>"); }
#nenkin::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231580BE'><path fill-rule='evenodd' d='M12 2 21 5v6c0 5.6-3.8 9.5-9 11-5.2-1.5-9-5.4-9-11V5l9-3Zm0 15.5 4.6-4.4c2.9-2.8-1.2-6.4-3.8-3.8l-.8.8-.8-.8c-2.6-2.6-6.7 1-3.8 3.8l4.6 4.4Z'/></svg>"); }
#ikuji::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231580BE'><path d='M3 3h4l1.2 3H20v2a7 7 0 0 1-7 7H9.2l.8 2h8v2H8.6L5.7 5H3V3Zm6 4 .2 1H18a5 5 0 0 1-5 5h-3L9 7ZM10 20a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm10 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z'/></svg>"); }
@media (max-width: 768px) {
  .hy-svc-cols { grid-template-columns: 1fr; gap: var(--space-md); }
  /* SP：タブ一覧はコンテンツの下部に、各タブは1行ずつ（フル幅・統一） */
  .hy-svc-nav { position: static; order: 2; }
  .hy-svc-body { order: 1; }
  .hy-svc-nav__title {
    display: block;
    margin-bottom: var(--space-xs);
    padding-left: 12px;
    border-left: 4px solid var(--c-main);
    color: var(--c-ink);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .hy-tabs--side { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
  .hy-tabs--side .hy-tab { width: 100%; padding: 12px 16px; font-size: 1.4rem; }
}

/* --------------------------------------------------------------------------
   6. 代表者紹介（profile）
   -------------------------------------------------------------------------- */
.hy-bio {
  background-color: var(--c-bg);
}
.hy-bio__inner {
  align-items: start;
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
}
.hy-bio__media {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.hy-bio__media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}
.hy-bio__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.hy-bio__name {
  color: var(--c-ink);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.5;
}
.hy-bio__role {
  color: var(--c-main);
  font-size: var(--fs-text);
  font-weight: 700;
}
.hy-bio__qual {
  border-block: 1px solid var(--c-border);
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-small);
  line-height: 1.85;
  padding-block: var(--space-xs);
}
.hy-bio__qual dt {
  color: var(--c-ink);
  font-weight: 700;
}
.hy-bio__text {
  color: var(--c-text);
  font-size: var(--fs-text);
  line-height: 1.95;
  text-wrap: pretty;
}

.hy-career {
  background-color: var(--c-gray);
}
.hy-expertise {
  background-color: var(--c-bg);
}
.hy-expertise__grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hy-expertise__item {
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(12, 74, 115, .04);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
}
.hy-expertise__num {
  color: var(--c-main);
  font-family: var(--font-en);
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  opacity: .16;
}
.hy-expertise__title {
  color: var(--c-ink);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 6px;
}
.hy-expertise__text {
  color: var(--c-text);
  font-size: var(--fs-small);
  line-height: 1.9;
}

.hy-message {
  background-color: var(--c-gray);
}
.hy-message__body {
  background-color: var(--c-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
}
.hy-message__sign {
  border-top: 1px solid var(--c-border);
  color: var(--c-ink);
  font-size: var(--fs-text);
  font-weight: 700;
  padding-top: var(--space-sm);
  text-align: right;
}

/* --------------------------------------------------------------------------
   7. サービス案内（service）
   -------------------------------------------------------------------------- */
.hy-index {
  background-color: var(--c-gray);
}
.hy-index__list {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hy-index__link {
  align-items: start;
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2xs) var(--space-sm);
  grid-template-columns: auto minmax(0, 1fr);
  height: 100%;
  min-height: 96px;
  padding: var(--space-sm) var(--space-md);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.hy-index__link:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lift);
  opacity: 1;
  transform: translateY(-4px);
}
.hy-index__no {
  color: var(--c-main);
  font-family: var(--font-en);
  font-size: 1.8rem;
  font-weight: 800;
  grid-row: span 2;
  line-height: 1.45;
}
.hy-index__label {
  color: var(--c-ink);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
}
.hy-index__text {
  color: var(--c-text);
  font-size: var(--fs-small);
  grid-column: 2;
  line-height: 1.8;
}

.hy-svc {
  scroll-margin-top: calc(var(--header-height) + 16px);
}
.hy-svc--tint {
  background-color: var(--c-gray);
}
.hy-svc__media {
  margin-bottom: var(--space-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hy-svc__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.hy-svc__head {
  align-items: start;
  border-bottom: 1px solid var(--c-border);
  display: grid;
  gap: var(--space-2xs) var(--space-md);
  grid-template-columns: auto minmax(0, 1fr);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
}
.hy-svc__no {
  color: var(--c-main-pale);
  font-family: var(--font-en);
  font-size: 5.6rem;
  font-weight: 700;
  grid-row: span 2;
  letter-spacing: -.03em;
  line-height: .86;
}
.hy-svc__title {
  color: var(--c-ink);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.45;
}
.hy-svc__lead {
  color: var(--c-main);
  font-size: 1.7rem;
  font-weight: 700;
  grid-column: 2;
  line-height: 1.8;
  text-wrap: pretty;
}
.hy-svc__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}
.hy-svc__foot .btn {
  min-width: 260px;
}

.hy-flow {
  background-color: var(--c-bg);
}
.hy-flow__list {
  counter-reset: flow;
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hy-flow__list--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hy-flow__item {
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  position: relative;
}
.hy-flow__num {
  align-items: center;
  background-color: var(--c-main);
  border-radius: 50%;
  color: var(--c-bg);
  display: flex;
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 800;
  height: 4rem;
  justify-content: center;
  width: 4rem;
}
.hy-flow__step {
  color: var(--c-main);
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin-top: var(--space-2xs);
}
.hy-flow__title {
  color: var(--c-ink);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
}
.hy-flow__text {
  color: var(--c-text);
  font-size: var(--fs-small);
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
   8. ブログ（一覧 / 記事）
   -------------------------------------------------------------------------- */
.hy-bloglist {
  background-color: var(--c-bg);
}
.hy-bloglayout {
  align-items: start;
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr) 300px;
}
.hy-bloglayout__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.hy-cardgrid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card--blog__author {
  color: var(--c-note);
  font-size: 1.4rem;
  line-height: 1.7;
}

.hy-pager__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  justify-content: center;
}
.hy-pager__list a,
.hy-pager__list span {
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  display: flex;
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 700;
  height: 48px;
  justify-content: center;
  min-width: 48px;
  padding-inline: 6px;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.hy-pager__list a:hover {
  background-color: var(--c-main-tint);
  border-color: var(--c-main);
  color: var(--c-main);
  opacity: 1;
}
.hy-pager__list .is-current {
  background-color: var(--c-main);
  border-color: var(--c-main);
  color: var(--c-bg);
}
.hy-pager__list .is-disabled {
  color: var(--c-note);
  opacity: .5;
}

.hy-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.hy-side__box {
  background-color: var(--c-gray);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.hy-side__head {
  color: var(--c-ink);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.hy-side__head::after {
  background-color: var(--c-accent);
  border-radius: 2px;
  content: "";
  display: block;
  height: 3px;
  margin-top: 10px;
  width: 32px;
}
.hy-search {
  display: flex;
  gap: var(--space-2xs);
}
.hy-search input {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-text);
  min-height: 48px;
  padding: 10px var(--space-xs);
  width: 100%;
}
.hy-search button {
  align-items: center;
  background-color: var(--c-main);
  border-radius: var(--radius-sm);
  color: var(--c-bg);
  display: flex;
  flex: none;
  font-size: var(--fs-small);
  font-weight: 700;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--space-sm);
}
.hy-side__list {
  display: flex;
  flex-direction: column;
}
.hy-side__list a {
  border-bottom: 1px solid var(--c-border);
  display: block;
  font-size: var(--fs-small);
  line-height: 1.8;
  min-height: 48px;
  padding-block: var(--space-xs);
  padding-left: 1.1em;
  position: relative;
}
.hy-side__list li:last-child a {
  border-bottom: none;
}
.hy-side__list a::before {
  color: var(--c-main);
  content: "・";
  left: -.15em;
  position: absolute;
}
.hy-side__list a:hover {
  color: var(--c-main);
  opacity: 1;
}
.hy-side__rank {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.hy-side__rankitem {
  align-items: start;
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: 72px minmax(0, 1fr);
}
.hy-side__rankitem .hy-ph {
  min-height: 0;
  padding: 4px;
}
.hy-side__ranktitle {
  color: var(--c-ink);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.65;
  text-wrap: pretty;
}
.hy-side__author {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.hy-side__authoravatar {
  border-radius: 50%;
  flex: none;
  height: 56px;
  object-fit: cover;
  width: 56px;
}
.hy-side__authorname {
  color: var(--c-ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}
.hy-side__authorrole {
  color: var(--c-note);
  font-size: 1.4rem;
  line-height: 1.6;
}
.hy-side__text {
  color: var(--c-text);
  font-size: 1.4rem;
  line-height: 1.85;
}

/* 記事詳細 */
.hy-article {
  background-color: var(--c-bg);
}
.hy-article__head {
  border-bottom: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
}
.hy-article__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.hy-article__title {
  color: var(--c-ink);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.55;
  text-wrap: pretty;
}
.hy-article__author {
  color: var(--c-note);
  font-size: var(--fs-small);
}
.hy-article__thumb {
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  overflow: hidden;
}
.hy-article__toc {
  background-color: var(--c-gray);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.hy-article__toc h2 {
  color: var(--c-ink);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: var(--space-2xs);
}
.hy-article__toc a {
  color: var(--c-main);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hy-article__nav {
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: space-between;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   9. よくある質問（faq）
   -------------------------------------------------------------------------- */
.hy-faqpage {
  background-color: var(--c-bg);
}
.hy-faqpage .hy-faq__list {
  gap: var(--space-xs);
}
.hy-faqpage .hy-faq__q {
  font-size: 1.7rem;
}

/* --------------------------------------------------------------------------
   10. お問い合わせ（contact）
   -------------------------------------------------------------------------- */
.hy-contact {
  background-color: var(--c-bg);
}
.hy-contact__intro {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  text-align: center;
}
.hy-contact__catch {
  color: var(--c-ink);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: .04em;
}
.hy-contact__text {
  color: var(--c-text);
  font-size: 1.7rem;
  line-height: 1.95;
  max-width: 66rem;
  text-wrap: pretty;
}
.hy-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-inline: auto;
  max-width: 76rem;
}
.hy-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.hy-form__label {
  align-items: center;
  color: var(--c-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: 1.7rem;
  font-weight: 700;
  gap: var(--space-2xs);
  line-height: 1.6;
}
.hy-form__badge {
  border-radius: var(--radius-sm);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 10px;
}
.hy-form__badge--req {
  background-color: var(--c-accent);
  color: #fff;
}
.hy-form__badge--opt {
  background-color: var(--c-gray);
  color: var(--c-text);
}
.hy-form__hint {
  color: var(--c-note);
  font-size: 1.4rem;
  line-height: 1.8;
}
.hy-form input[type="text"],
.hy-form input[type="email"],
.hy-form input[type="tel"],
.hy-form select,
.hy-form textarea {
  background-color: var(--c-bg);
  border: 1px solid #c9d3da;
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-family: inherit;
  font-size: 1.7rem;
  line-height: 1.7;
  min-height: 56px;
  padding: 14px var(--space-xs);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.hy-form textarea {
  min-height: 180px;
  resize: vertical;
}
.hy-form input:focus,
.hy-form select:focus,
.hy-form textarea:focus {
  border-color: var(--c-main);
  box-shadow: 0 0 0 3px var(--c-main-tint);
  outline: none;
}
.hy-form input::placeholder,
.hy-form textarea::placeholder {
  color: #78858e;
}
.hy-form__agree {
  align-items: center;
  background-color: var(--c-gray);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  font-size: 1.6rem;
  gap: var(--space-xs);
  line-height: 1.7;
  min-height: 64px;
  padding: var(--space-xs) var(--space-md);
}
.hy-form__agree input[type="checkbox"] {
  accent-color: var(--c-main);
  flex: none;
  height: 24px;
  width: 24px;
}
.hy-form__agree a {
  color: var(--c-main);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Cloudflare Turnstile：同意チェックの下・送信ボタンの上に中央配置（CF7フォーム内の[turnstile]タグ） */
.hy-form__turnstile {
  display: flex;
  justify-content: center;
  min-height: 65px;
}
.hy-form .wpcf7-turnstile {
  text-align: center;
}
.hy-form__submit {
  display: flex;
  justify-content: center;
}
.hy-form__submit .btn {
  min-width: min(360px, 100%);
}
.hy-form__note {
  color: var(--c-note);
  font-size: 1.4rem;
  line-height: 1.85;
  text-align: center;
}
.hy-contactinfo {
  background-color: var(--c-gray);
}

/* --------------------------------------------------------------------------
   11. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hy-pagehead::before {
    font-size: 9rem;
  }
  .hy-feature__inner,
  .hy-bloglayout {
    gap: var(--space-lg);
    grid-template-columns: minmax(0, 1fr);
  }
  .hy-bio__inner {
    gap: var(--space-lg);
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  }
  .hy-index__list,
  .hy-expertise__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hy-flow__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hy-side {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .hy-pagehead {
    padding-block: calc(var(--header-height) + var(--space-md)) var(--space-md);
  }
  .hy-pagehead::before {
    font-size: 8rem;
  }
  .hy-index__list,
  .hy-expertise__grid,
  .hy-flow__list,
  .hy-flow__list--3,
  .hy-cardgrid,
  .hy-bio__inner,
  .hy-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .hy-bio__media {
    max-width: 260px;
  }
  .hy-svc__head {
    gap: var(--space-2xs) var(--space-sm);
    grid-template-columns: 5rem minmax(0, 1fr);
  }
  .hy-svc__no {
    font-size: 3.6rem;
  }
  .hy-svc__foot .btn,
  .hy-form__submit .btn {
    min-width: 100%;
  }
  /* モバイルでは表を固定レイアウトにして各セルを折り返し、viewport内に収める（横あふれ防止） */
  .hy-table {
    table-layout: fixed;
    width: 100%;
  }
  .hy-table th,
  .hy-table td {
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--fs-small);
    overflow-wrap: anywhere;
    word-break: normal;
  }
  /* 基底の nowrap（同詳細度）をモバイルで上書きして折り返す */
  .hy-table thead th,
  .hy-table tbody th,
  .hy-table--price tbody th {
    white-space: normal;
  }
  .hy-table tbody th {
    width: 38%;
  }
  .hy-feature__item {
    grid-template-columns: 4rem minmax(0, 1fr);
    padding: var(--space-sm);
  }
  .hy-callout,
  .hy-message__body {
    padding: var(--space-sm);
  }
  .hy-access__map iframe {
    height: 300px;
  }
}

/* --------------------------------------------------------------------------
   ブログ記事本文（single）の追加スタイル 2026-10-14
   h2/h3の区別・表・番号リスト・画像。記事ページ（.hy-bloglayout__main）だけに効かせる
   -------------------------------------------------------------------------- */
.hy-bloglayout__main .hy-prose h2 {
  background-color: var(--c-main-tint);
  border-left: 6px solid var(--c-main);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-heading);
  margin-top: var(--space-xl);
  padding: 12px var(--space-xs) 12px 20px;
}
.hy-bloglayout__main .hy-prose h3 {
  border-left: 4px solid var(--c-accent);
  font-size: 1.9rem;
  margin-top: var(--space-md);
  padding-left: 12px;
}
.hy-bloglayout__main .hy-prose h2 + h3 {
  margin-top: var(--space-xs);
}
.hy-bloglayout__main .hy-prose ol {
  counter-reset: hy-ol;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.hy-bloglayout__main .hy-prose ol > li {
  counter-increment: hy-ol;
  padding-left: 2em;
}
.hy-bloglayout__main .hy-prose ol > li::before {
  background: none;
  border-radius: 0;
  color: var(--c-main);
  content: counter(hy-ol) ".";
  font-weight: 700;
  height: auto;
  left: 0;
  top: 0;
  width: auto;
}
.hy-bloglayout__main .hy-prose table {
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-collapse: collapse;
  font-size: 1.5rem;
  width: 100%;
}
.hy-bloglayout__main .hy-prose th,
.hy-bloglayout__main .hy-prose td {
  border: 1px solid var(--c-border);
  line-height: 1.75;
  min-width: 8em;
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.hy-bloglayout__main .hy-prose thead th {
  background-color: var(--c-main);
  color: #fff;
  font-weight: 700;
}
.hy-bloglayout__main .hy-prose tbody th {
  background-color: var(--c-main-tint);
  color: var(--c-ink);
  font-weight: 700;
}
.hy-bloglayout__main .hy-prose tbody tr:nth-child(even) td {
  background-color: #fafbfc;
}
.hy-bloglayout__main .hy-prose figure {
  margin: var(--space-xs) 0;
}
.hy-bloglayout__main .hy-prose figure img {
  border-radius: var(--radius-md);
  display: block;
  height: auto;
  width: 100%;
}
@media (max-width: 767px) {
  .hy-bloglayout__main .hy-prose h2 {
    margin-top: var(--space-lg);
  }
  .hy-bloglayout__main .hy-prose h3 {
    font-size: 1.8rem;
  }
  .hy-bloglayout__main .hy-prose table {
    display: block;
    font-size: 1.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 点検（2026-10-17）: page.css 側の指定を上書きする分 */
@media (max-width: 767px) {
  .hy-bloglayout__main .hy-prose th,
  .hy-bloglayout__main .hy-prose td {
    min-width: 4.5em;
    padding: 10px 8px;
  }
  .hy-form__agree { padding: 16px; }
  .hy-form__agree .wpcf7-list-item { margin: 0; }
}
@media (max-width: 340px) {
  .hy-table th, .hy-table td { padding: 8px; }
}

/* ===== スマホのみ：日本語を文節で改行／本文を右端まで使う（2026-10-17）===== */
@media (max-width: 767px) {
  /* Safari の text-wrap:pretty は行を早めに折り返し、右に白い余りが出る。スマホでは通常の折り返しに戻す */
  html body * { text-wrap: wrap !important; }
  html body :is(h1, h2, h3, h4) { text-wrap: balance !important; }
  /* 文節の切れ目(wbr)でだけ折り返す。はみ出す長い語だけは例外的に折る */
  html body .hy-jp { word-break: keep-all; overflow-wrap: break-word; line-break: strict; }
  /* 表の見出しの語が途中で切れないよう、余白と字間を少し詰める */
  html body .hy-table thead th { letter-spacing: 0; }
  /* 短い文は行の長さをそろえ、1〜2文字だけの行が出ないようにする */
  html body .hy-bal { text-wrap: balance !important; }
  /* お問い合わせページの注記：余白を詰めて、2行にきれいに収める */
  html body .hy-note { width: 100%; max-width: none; box-sizing: border-box; padding-left: 14px; padding-right: 14px; font-size: 1.25rem; line-height: 1.8; }
  /* かっこの中は一まとまりで折り返す（入りきらなければ次の行へ） */
  html body .hy-grp { display: inline-block; max-width: 100%; text-align: inherit; }
}

/* ふりがなは小さく */
.hy-bio__yomi { font-size: .5em; font-weight: 500; letter-spacing: .04em; margin-left: .3em; white-space: nowrap; }
.hy-spbr { display: none; }
@media (max-width: 767px) { .hy-spbr { display: inline; } }