/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/

.site-footer-copyright p:nth-child(2){display:none!important;}

h2, h3, h4{border:none;}
h3::after{border:none;}
h4{background:none;}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   TOP HERO

   WordPress Theme : Lightning G3

   修正内容：
   1. Lightningの2カラム「66.6%」制限を解除
   2. トップページのサイド領域を非表示
   3. メイン領域を100%へ変更
   4. ヒーローをviewport中央基準で100vw表示
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-hero-fullbleed,
.hirooka-hero-fullbleed *,
.hirooka-hero-fullbleed *::before,
.hirooka-hero-fullbleed *::after {
  box-sizing: border-box;
}


/* ==========================================================
   Lightning G3
   2カラムレイアウト解除

   Lightning G3では2カラム時、
   main-section--col--two が約66.6%になります。

   このページにhirooka-heroが存在するときだけ
   メイン領域を100%に変更します。
========================================================== */

@supports selector(body:has(.hirooka-hero-fullbleed)) {

  body:has(.hirooka-hero-fullbleed) {
    /*
     * Lightning G3の
     * 2カラム用CSS変数そのものを上書き
     */
    --vk-width-col-2-main: 100%;

    /*
     * 100vw利用時の数px単位の
     * 横スクロール防止
     */
    overflow-x: clip;
  }


  /*
   * メインカラムを100%へ
   */
  body:has(.hirooka-hero-fullbleed)
  .main-section--col--two {

    float: none !important;

    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 100% !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /*
   * 右側に残っていたサイドカラムを削除
   */
  body:has(.hirooka-hero-fullbleed)
  .sub-section--col--two {

    display: none !important;
  }

}


/* ==========================================================
   WordPressで正式にフロントページとして設定後の
   フォールバック

   :has()だけに依存しないように
   home / front-page にも同じ設定を入れる
========================================================== */

body.home,
body.front-page {
  --vk-width-col-2-main: 100%;
}


body.home .main-section--col--two,
body.front-page .main-section--col--two {

  float: none !important;

  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: 100% !important;

  width: 100% !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}


body.home .sub-section--col--two,
body.front-page .sub-section--col--two {

  display: none !important;
}


/* ==========================================================
   旧Lightning用フォールバック

   G2系クラスが併存していた場合にも対応
========================================================== */

@supports selector(body:has(.hirooka-hero-fullbleed)) {

  body:has(.hirooka-hero-fullbleed)
  .mainSection {

    float: none !important;

    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;
  }


  body:has(.hirooka-hero-fullbleed)
  .subSection,

  body:has(.hirooka-hero-fullbleed)
  .sideSection {

    display: none !important;
  }

}


/* ==========================================================
   フルブリード外側ラッパー

   ここでは100vwにしない。

   Lightning側のメインカラムを100%へ直したうえで
   子要素hirooka-heroだけを100vwにします。
========================================================== */

.hirooka-hero-fullbleed {
  position: relative;

  display: block;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  /*
   * 子要素の100vwを絶対にクリップしない
   */
  overflow: visible !important;
}


/* ==========================================================
   HERO本体

   正常に動作していたTMAサイトと同じ
   フルブリード方式です。

   親コンテンツの中央から
   viewport左右へ均等に展開します。
========================================================== */

.hirooka-hero {
  position: relative;

  isolation: isolate;

  display: flex;
  align-items: center;
  justify-content: center;

  /*
   * ブラウザ画面幅
   */
  width: 100vw !important;
  max-width: none !important;

  height: 100vh;
  height: 100svh;

  min-height: 760px;
  max-height: 920px;

  /*
   * viewport中央を基準として
   * 左右均等に展開
   */
  margin-top: 0 !important;

  margin-right: calc(50% - 50vw) !important;

  margin-bottom: 0 !important;

  margin-left: calc(50% - 50vw) !important;

  padding: 0 !important;

  overflow: hidden;

  background-color: #5f554b;

  background-image:
    linear-gradient(
      rgba(22, 17, 12, 0.43),
      rgba(22, 17, 12, 0.43)
    ),
    url("https://www.hirooka-sr.com/wp-content/uploads/2026/08/top-hirookasyaroshi.webp");

  background-repeat: no-repeat;

  /*
   * 写真は必ず中央基準
   */
  background-position: center center;

  /*
   * セクション全面を画像で覆う
   */
  background-size: cover;
}


/* ==========================================================
   HERO内部コンテンツ

   背景は全幅だが、
   コピーなどは画面中央に配置
========================================================== */

.hirooka-hero__inner {
  position: relative;
  z-index: 2;

  width: min(730px, calc(100% - 48px));
  max-width: 730px;

  margin-right: auto !important;
  margin-left: auto !important;

  padding: 0;

  color: #ffffff;

  text-align: center;

  transform: translateY(10px);
}


/* ==========================================================
   所在地ラベル
========================================================== */

.hirooka-hero__location {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 38px;

  margin: 0 auto 29px;
  padding: 7px 18px;

  border: 1px solid rgba(255, 255, 255, 0.33);
  border-radius: 999px;

  background-color: rgba(77, 69, 60, 0.58);

  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  color: rgba(255, 255, 255, 0.94);

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 15px;
  font-weight: 500;

  line-height: 1.45;

  letter-spacing: 0.015em;
}


/* ==========================================================
   Font Awesome
   所在地アイコン
========================================================== */

.hirooka-hero__location-icon {
  display: inline-flex;

  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  width: 16px;

  margin: 0;
  padding: 0;

  color: #e3a000;

  font-size: 16px;

  line-height: 1;

  text-align: center;
}


.hirooka-hero__location-text {
  display: inline-block;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   H1
========================================================== */

.hirooka-hero__title {
  display: block;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #ffffff !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: clamp(42px, 3.25vw, 56px);

  font-weight: 600;

  line-height: 1.08;

  letter-spacing: 0.015em;

  text-align: center;

  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12);
}


/* ==========================================================
   Lightning H1装飾リセット
========================================================== */

.hirooka-hero__title::before,
.hirooka-hero__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


.hirooka-hero__title-line {
  display: block;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   経験年数
========================================================== */

.hirooka-hero__years {
  display: inline;

  margin: 0;
  padding: 0;

  font-family:
    "Times New Roman",
    "Yu Mincho",
    "YuMincho",
    serif;

  font-size: 1.06em;

  font-weight: 500;

  letter-spacing: -0.025em;
}


/* ==========================================================
   説明文
========================================================== */

.hirooka-hero__description {
  width: 100%;
  max-width: 680px;

  margin: 24px auto 0 !important;

  padding: 0 !important;

  color: rgba(255, 255, 255, 0.94);

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 15.5px;

  font-weight: 400;

  line-height: 1.75;

  letter-spacing: 0.025em;

  text-align: center;
}


/* ==========================================================
   CTA
========================================================== */

.hirooka-hero__actions {
  display: flex;

  flex-direction: row;

  align-items: center;
  justify-content: center;

  gap: 13px;

  width: 100%;

  margin: 38px 0 0;

  padding: 0;
}


/* ==========================================================
   CTAボタン共通
========================================================== */

.hirooka-hero__button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 62px;

  margin: 0;

  padding: 12px 28px;

  border-radius: 999px;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 16px;

  font-weight: 700;

  line-height: 1.4;

  letter-spacing: 0.025em;

  text-align: center;

  text-decoration: none !important;

  white-space: nowrap;

  box-shadow: none !important;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.hirooka-hero__button:hover,
.hirooka-hero__button:focus {
  text-decoration: none !important;
}


.hirooka-hero__button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95);

  outline-offset: 4px;
}


/* ==========================================================
   Font Awesome
   CTAアイコン
========================================================== */

.hirooka-hero__button-icon {
  display: inline-flex;

  flex: 0 0 auto;

  align-items: center;
  justify-content: center;

  width: 19px;

  margin: 0;
  padding: 0;

  color: currentColor;

  font-size: 17px;

  line-height: 1;

  text-align: center;
}


.hirooka-hero__button-text {
  display: block;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   電話ボタン
========================================================== */

.hirooka-hero__button--primary {
  min-width: 237px;

  border: 2px solid #d18d00;

  background-color: #d18d00;

  color: #ffffff !important;
}


.hirooka-hero__button--primary:visited {
  color: #ffffff !important;
}


.hirooka-hero__button--primary:hover,
.hirooka-hero__button--primary:focus {
  border-color: #b87c00;

  background-color: #b87c00;

  color: #ffffff !important;

  transform: translateY(-2px);
}


/* ==========================================================
   お問い合わせボタン
========================================================== */

.hirooka-hero__button--outline {
  min-width: 275px;

  border: 2px solid rgba(255, 255, 255, 0.70);

  background-color: rgba(20, 17, 13, 0.12);

  color: #ffffff !important;

  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}


.hirooka-hero__button--outline:visited {
  color: #ffffff !important;
}


.hirooka-hero__button--outline:hover,
.hirooka-hero__button--outline:focus {
  border-color: #ffffff;

  background-color: rgba(255, 255, 255, 0.12);

  color: #ffffff !important;

  transform: translateY(-2px);
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-hero {
    width: 100vw !important;

    min-height: 720px;

    height: 100svh;

    max-height: none;

    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;

    background-position: center center;

    background-size: cover;
  }


  .hirooka-hero__inner {
    width: min(680px, calc(100% - 48px));

    max-width: 680px;

    margin-right: auto !important;
    margin-left: auto !important;
  }


  .hirooka-hero__title {
    font-size: clamp(39px, 5vw, 49px);
  }


  .hirooka-hero__description {
    max-width: 620px;

    font-size: 15px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-hero {
    width: 100vw !important;

    height: auto;

    min-height: 680px;

    max-height: none;

    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;

    padding-top: 90px !important;
    padding-right: 0 !important;
    padding-bottom: 90px !important;
    padding-left: 0 !important;

    background-position: center center;

    background-size: cover;
  }


  /* ========================================================
     コンテンツ
  ======================================================== */

  .hirooka-hero__inner {
    width: calc(100% - 36px);

    max-width: 680px;

    margin-right: auto !important;
    margin-left: auto !important;

    transform: none;
  }


  /* ========================================================
     所在地
  ======================================================== */

  .hirooka-hero__location {
    min-height: 34px;

    gap: 7px;

    margin-bottom: 24px;

    padding: 6px 13px;

    font-size: 12.5px;
  }


  .hirooka-hero__location-icon {
    width: 14px;

    font-size: 14px;
  }


  /* ========================================================
     H1
  ======================================================== */

  .hirooka-hero__title {
    font-size: clamp(31px, 8.5vw, 40px);

    line-height: 1.2;

    letter-spacing: 0;
  }


  .hirooka-hero__title-line {
    display: block;
  }


  /* ========================================================
     説明文
  ======================================================== */

  .hirooka-hero__description {
    max-width: 520px;

    margin-top: 22px !important;

    font-size: 14px;

    line-height: 1.8;

    letter-spacing: 0.01em;
  }


  .hirooka-hero__description-break {
    display: none;
  }


  /* ========================================================
     CTA
  ======================================================== */

  .hirooka-hero__actions {
    flex-direction: column;

    gap: 13px;

    margin-top: 32px;
  }


  .hirooka-hero__button {
    width: min(340px, 100%);

    min-height: 58px;

    padding: 11px 22px;

    font-size: 15px;
  }


  .hirooka-hero__button--primary,
  .hirooka-hero__button--outline {
    min-width: 0;
  }


  .hirooka-hero__button-icon {
    width: 18px;

    font-size: 16px;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-hero {
    min-height: 650px;

    padding-top: 72px !important;

    padding-bottom: 72px !important;
  }


  .hirooka-hero__inner {
    width: calc(100% - 28px);
  }


  .hirooka-hero__location {
    font-size: 11.5px;
  }


  .hirooka-hero__title {
    font-size: clamp(29px, 8.3vw, 35px);
  }


  .hirooka-hero__description {
    font-size: 13.5px;
  }


  .hirooka-hero__button {
    width: 100%;
  }

}


/* ==========================================================
   Hoverを持たないタッチ端末
========================================================== */

@media (hover: none) {

  .hirooka-hero__button--primary:hover {
    border-color: #d18d00;

    background-color: #d18d00;

    transform: none;
  }


  .hirooka-hero__button--outline:hover {
    border-color: rgba(255, 255, 255, 0.70);

    background-color: rgba(20, 17, 13, 0.12);

    transform: none;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-hero__button {
    transition: none;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   TOP PAGE
   新着お知らせセクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-news,
.hirooka-news *,
.hirooka-news *::before,
.hirooka-news *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
========================================================== */

.hirooka-news {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 94px 24px 96px;

  background-color: #ffffff;

  color: #222222;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   コンテンツ幅
========================================================== */

.hirooka-news__inner {
  width: 100%;
  max-width: 1080px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   セクション見出し
========================================================== */

.hirooka-news__header {
  margin: 0 0 54px;
  padding: 0;

  text-align: center;
}


/* NEWSラベル */

.hirooka-news__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 58px;
  min-height: 28px;

  margin: 0 0 25px;
  padding: 5px 14px;

  border-radius: 999px;

  background-color: #fff2d8;

  color: #a46a00;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.05em;
}


/* ==========================================================
   H2
========================================================== */

.hirooka-news__title {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: clamp(32px, 2.7vw, 42px);
  font-weight: 600;
  line-height: 1.35;

  letter-spacing: 0.03em;

  text-align: center;
}


/* Lightningの見出し装飾を解除 */

.hirooka-news__title::before,
.hirooka-news__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   見出し説明文
========================================================== */

.hirooka-news__lead {
  margin: 15px 0 0 !important;
  padding: 0 !important;

  color: #6e6e6e;

  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.02em;

  text-align: center;
}


/* ==========================================================
   投稿一覧
========================================================== */

.hirooka-news__list {
  display: flex;
  flex-direction: column;

  gap: 16px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   各投稿カード
========================================================== */

.hirooka-news__item {
  display: grid;

  grid-template-columns: 155px minmax(0, 1fr);

  column-gap: 38px;

  align-items: center;

  width: 100%;
  min-height: 116px;

  margin: 0;
  padding: 22px 28px;

  border: 1px solid #e7b55d;
  border-radius: 11px;

  background-color: #ffffff;
}


/* ==========================================================
   左側：日付＋カテゴリー
========================================================== */

.hirooka-news__meta {
  display: flex;
  flex-direction: column;

  align-items: flex-start;
  justify-content: center;

  gap: 10px;

  min-width: 0;

  margin: 0;
  padding: 0;
}


/* 投稿日 */

.hirooka-news__date {
  display: block;

  margin: 0;
  padding: 0;

  color: #858585;

  font-family:
    Arial,
    "Helvetica Neue",
    sans-serif;

  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;

  letter-spacing: 0.01em;
}


/* ==========================================================
   カテゴリー
========================================================== */

.hirooka-news__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  max-width: 100%;

  margin: 0;
  padding: 5px 12px;

  border-radius: 999px;

  background-color: #fff1d5;

  color: #805500;

  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;

  letter-spacing: 0.02em;

  white-space: nowrap;
}


/* ==========================================================
   右側：投稿内容
========================================================== */

.hirooka-news__content {
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   投稿タイトル H3
========================================================== */

.hirooka-news__item-title {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #202020 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;

  letter-spacing: 0.015em;

  text-align: left;
}


/* LightningのH3装飾解除 */

.hirooka-news__item-title::before,
.hirooka-news__item-title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   投稿本文抜粋
========================================================== */

.hirooka-news__excerpt {
  margin: 7px 0 0 !important;
  padding: 0 !important;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.01em;
}


/* ==========================================================
   投稿なし
========================================================== */

.hirooka-news__empty {
  width: 100%;

  margin: 0;
  padding: 36px 20px;

  border: 1px solid #e7b55d;
  border-radius: 11px;

  color: #666666;

  font-size: 14px;
  line-height: 1.7;

  text-align: center;
}


/* ==========================================================
   すべて見る
========================================================== */

.hirooka-news__more {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  margin: 38px 0 0;
  padding: 0;
}


.hirooka-news__more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  min-width: 144px;
  min-height: 49px;

  margin: 0;
  padding: 12px 24px;

  border: 2px solid #008d82;
  border-radius: 999px;

  background-color: #008d82;

  color: #ffffff !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;

  letter-spacing: 0.02em;

  text-decoration: none !important;

  box-shadow: none;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.hirooka-news__more-button:visited {
  color: #ffffff !important;
}


.hirooka-news__more-button:hover,
.hirooka-news__more-button:focus {
  border-color: #00766d;

  background-color: #00766d;

  color: #ffffff !important;

  text-decoration: none !important;

  transform: translateY(-2px);
}


.hirooka-news__more-button:focus-visible {
  outline: 3px solid rgba(0, 141, 130, 0.25);
  outline-offset: 4px;
}


.hirooka-news__more-text {
  display: block;

  margin: 0;
  padding: 0;
}


/* Font Awesome Free */

.hirooka-news__more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 14px;

  margin: 0;
  padding: 0;

  color: currentColor;

  font-size: 12px;
  line-height: 1;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-news {
    padding-top: 80px;
    padding-bottom: 82px;
  }


  .hirooka-news__inner {
    max-width: 900px;
  }


  .hirooka-news__header {
    margin-bottom: 46px;
  }


  .hirooka-news__item {
    grid-template-columns: 140px minmax(0, 1fr);

    column-gap: 28px;

    padding: 21px 24px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-news {
    padding: 64px 18px 68px;
  }


  .hirooka-news__header {
    margin-bottom: 36px;
  }


  .hirooka-news__label {
    margin-bottom: 18px;

    font-size: 11px;
  }


  .hirooka-news__title {
    font-size: clamp(28px, 8vw, 34px);
  }


  .hirooka-news__lead {
    margin-top: 12px !important;

    font-size: 13.5px;
    line-height: 1.7;
  }


  .hirooka-news__list {
    gap: 13px;
  }


  /* 投稿カード */

  .hirooka-news__item {
    display: block;

    min-height: 0;

    padding: 20px 19px;

    border-radius: 9px;
  }


  /* 日付＋カテゴリーを横並び */

  .hirooka-news__meta {
    flex-direction: row;

    align-items: center;
    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 14px;
  }


  .hirooka-news__date {
    font-size: 12px;
  }


  .hirooka-news__category {
    padding: 4px 10px;

    font-size: 11px;
  }


  .hirooka-news__item-title {
    font-size: 16px;
    line-height: 1.55;
  }


  .hirooka-news__excerpt {
    margin-top: 7px !important;

    font-size: 13.5px;
    line-height: 1.75;
  }


  .hirooka-news__more {
    margin-top: 30px;
  }


  .hirooka-news__more-button {
    min-width: 138px;
    min-height: 47px;

    font-size: 13.5px;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-news {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-news__item {
    padding: 18px 16px;
  }


  .hirooka-news__item-title {
    font-size: 15.5px;
  }


  .hirooka-news__excerpt {
    font-size: 13px;
  }

}


/* ==========================================================
   Hoverを持たない端末
========================================================== */

@media (hover: none) {

  .hirooka-news__more-button:hover {
    border-color: #008d82;

    background-color: #008d82;

    transform: none;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-news__more-button {
    transition: none;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   TOP PAGE
   お悩みセクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-worries,
.hirooka-worries *,
.hirooka-worries *::before,
.hirooka-worries *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体

   Lightningの本文幅に関係なく、
   ブラウザ幅いっぱいまで背景色を表示
========================================================== */

.hirooka-worries {
  position: relative;
  isolation: isolate;

  width: 100vw;
  max-width: none;

  margin-top: 0;
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  margin-left: calc(50% - 50vw);

  padding: 90px 24px 96px;

  overflow: hidden;

  background-color: #fbf8f3;

  color: #222222;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側コンテンツ
========================================================== */

.hirooka-worries__inner {
  width: 100%;
  max-width: 920px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   セクションヘッダー
========================================================== */

.hirooka-worries__header {
  width: 100%;

  margin: 0 0 54px;
  padding: 0;

  text-align: center;
}


/* ==========================================================
   CHECK ラベル
========================================================== */

.hirooka-worries__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 65px;
  min-height: 29px;

  margin: 0 0 24px;
  padding: 6px 14px;

  border-radius: 999px;

  background-color: #fff0d3;

  color: #9d6500;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    sans-serif;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.08em;
}


/* ==========================================================
   セクションタイトル H2
========================================================== */

.hirooka-worries__title {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: clamp(32px, 2.8vw, 42px);
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.04em;

  text-align: center;
}


/* Lightning側の見出し装飾を解除 */

.hirooka-worries__title::before,
.hirooka-worries__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   リード文
========================================================== */

.hirooka-worries__lead {
  margin: 13px 0 0 !important;
  padding: 0 !important;

  color: #666666;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.025em;

  text-align: center;
}


/* ==========================================================
   カードグリッド
========================================================== */

.hirooka-worries__grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   カード
========================================================== */

.hirooka-worries__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-width: 0;
  min-height: 196px;

  margin: 0;
  padding: 24px 25px 23px;

  border: 1px solid #e6a64a;
  border-radius: 10px;

  background-color: rgba(255, 255, 255, 0.88);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}


/* ==========================================================
   アイコン丸背景

   width / heightを固定して
   flex中央配置にすることで
   アイコンを円の中央に配置
========================================================== */

.hirooka-worries__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 43px;
  height: 43px;
  aspect-ratio: 1 / 1;

  margin: 0 0 20px;
  padding: 0;

  border-radius: 50%;

  background-color: #fff1d8;

  color: #ad7000;

  text-align: center;
}


/* ==========================================================
   Font Awesome アイコン

   アイコン自体にも中央揃えを指定
========================================================== */

.hirooka-worries__icon > i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  margin: 0;
  padding: 0;

  color: inherit;

  font-size: 16px;
  line-height: 1;

  text-align: center;
}


/* Font Awesome疑似要素の位置ズレ対策 */

.hirooka-worries__icon > i::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}


/* ==========================================================
   カードタイトル H3
========================================================== */

.hirooka-worries__card-title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #202020 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;

  letter-spacing: 0.015em;

  text-align: left;
}


/* Lightning H3装飾解除 */

.hirooka-worries__card-title::before,
.hirooka-worries__card-title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   カード本文
========================================================== */

.hirooka-worries__card-text {
  width: 100%;

  margin: 7px 0 0 !important;
  padding: 0 !important;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;

  letter-spacing: 0.01em;

  text-align: left;
}


/* ==========================================================
   PC Hover
========================================================== */

@media (hover: hover) {

  .hirooka-worries__card:hover {
    border-color: #d99938;

    box-shadow:
      0 8px 24px rgba(114, 83, 35, 0.07);

    transform: translateY(-2px);
  }

}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-worries {
    width: 100vw;

    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);

    padding-top: 78px;
    padding-bottom: 82px;
  }


  .hirooka-worries__inner {
    max-width: 760px;
  }


  .hirooka-worries__header {
    margin-bottom: 46px;
  }


  .hirooka-worries__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;
  }


  .hirooka-worries__card {
    min-height: 190px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-worries {
    width: 100vw;

    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);

    padding: 64px 18px 68px;
  }


  .hirooka-worries__header {
    margin-bottom: 36px;
  }


  .hirooka-worries__label {
    min-width: 60px;
    min-height: 27px;

    margin-bottom: 18px;

    padding: 5px 12px;

    font-size: 11px;
  }


  .hirooka-worries__title {
    font-size: clamp(27px, 7.5vw, 34px);

    line-height: 1.4;

    letter-spacing: 0.02em;
  }


  .hirooka-worries__lead {
    margin-top: 10px !important;

    font-size: 13.5px;
    line-height: 1.7;
  }


  .hirooka-worries__grid {
    grid-template-columns: 1fr;

    gap: 13px;
  }


  .hirooka-worries__card {
    min-height: 0;

    padding: 21px 20px;
  }


  .hirooka-worries__icon {
    width: 41px;
    height: 41px;

    margin-bottom: 17px;
  }


  .hirooka-worries__icon > i {
    width: 17px;
    height: 17px;

    font-size: 15px;
  }


  .hirooka-worries__card-title {
    font-size: 16px;
  }


  .hirooka-worries__card-text {
    margin-top: 6px !important;

    font-size: 13.5px;
    line-height: 1.7;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-worries {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-worries__title {
    font-size: 27px;
  }


  .hirooka-worries__card {
    padding: 20px 18px;
  }


  .hirooka-worries__card-title {
    font-size: 15.5px;
  }


  .hirooka-worries__card-text {
    font-size: 13px;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-worries__card {
    transition: none;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   TOP PAGE
   ABOUT セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-about,
.hirooka-about *,
.hirooka-about *::before,
.hirooka-about *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-about {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 100px 24px 104px;

  background: transparent;

  color: #202020;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側レイアウト
========================================================== */

.hirooka-about__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(420px, 0.95fr);

  align-items: center;

  column-gap: 68px;

  width: 100%;
  max-width: 1080px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   左側コンテンツ
========================================================== */

.hirooka-about__content {
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   ヘッダー
========================================================== */

.hirooka-about__header {
  width: 100%;

  margin: 0 0 23px;
  padding: 0;
}


/* ==========================================================
   ABOUT ラベル
========================================================== */

.hirooka-about__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 69px;
  min-height: 29px;

  margin: 0 0 20px;
  padding: 6px 14px;

  border-radius: 999px;

  background-color: #e2f7f1;

  color: #00796f;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    sans-serif;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.08em;
}


/* ==========================================================
   H2
========================================================== */

.hirooka-about__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #171717 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: clamp(32px, 2.7vw, 42px);
  font-weight: 600;
  line-height: 1.16;

  letter-spacing: 0.02em;

  text-align: left;
}


/* Lightning側の見出し装飾解除 */

.hirooka-about__title::before,
.hirooka-about__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


.hirooka-about__title-line {
  display: block;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   自動更新される経験年数
========================================================== */

.hirooka-about__years {
  display: inline;

  margin: 0;
  padding: 0;

  font-family:
    "Times New Roman",
    "Yu Mincho",
    "YuMincho",
    serif;

  font-weight: 500;

  letter-spacing: -0.02em;
}


/* ==========================================================
   紹介文
========================================================== */

.hirooka-about__description {
  width: 100%;

  margin: 0 0 30px !important;
  padding: 0 !important;

  color: #4f4f4f;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.85;

  letter-spacing: 0.018em;

  text-align: left;
}


/* ==========================================================
   特徴一覧
========================================================== */

.hirooka-about__features {
  display: flex;
  flex-direction: column;

  gap: 17px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   特徴1項目
========================================================== */

.hirooka-about__feature {
  display: grid;

  grid-template-columns: 56px minmax(0, 1fr);

  align-items: center;

  column-gap: 17px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   アイコン背景

   正円を固定し、flexで縦横中央配置
========================================================== */

.hirooka-about__feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;

  margin: 0;
  padding: 0;

  border-radius: 14px;

  background-color: #e1f7f1;

  color: #00877d;

  text-align: center;
}


/* ==========================================================
   Font Awesomeアイコン中央補正
========================================================== */

.hirooka-about__feature-icon > i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  margin: 0;
  padding: 0;

  color: inherit;

  font-size: 17px;
  line-height: 1;

  text-align: center;
}


.hirooka-about__feature-icon > i::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}


/* ==========================================================
   特徴テキスト領域
========================================================== */

.hirooka-about__feature-content {
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   H3
========================================================== */

.hirooka-about__feature-title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #202020 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.015em;

  text-align: left;
}


/* Lightning H3装飾解除 */

.hirooka-about__feature-title::before,
.hirooka-about__feature-title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   特徴説明文
========================================================== */

.hirooka-about__feature-text {
  width: 100%;

  margin: 4px 0 0 !important;
  padding: 0 !important;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.65;

  letter-spacing: 0.01em;

  text-align: left;
}


/* ==========================================================
   CTAエリア
========================================================== */

.hirooka-about__action {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;

  margin: 30px 0 0;
  padding: 0;
}


/* ==========================================================
   CTAボタン
========================================================== */

.hirooka-about__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  min-width: 185px;
  min-height: 48px;

  margin: 0;
  padding: 11px 23px;

  border: 2px solid #008d82;
  border-radius: 999px;

  background-color: #008d82;

  color: #ffffff !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;

  letter-spacing: 0.02em;

  text-align: center;
  text-decoration: none !important;

  box-shadow: none;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.hirooka-about__button:visited {
  color: #ffffff !important;
}


.hirooka-about__button:hover,
.hirooka-about__button:focus {
  border-color: #00766d;

  background-color: #00766d;

  color: #ffffff !important;

  text-decoration: none !important;

  transform: translateY(-2px);
}


.hirooka-about__button:focus-visible {
  outline: 3px solid rgba(0, 141, 130, 0.25);
  outline-offset: 4px;
}


.hirooka-about__button-text {
  display: block;

  margin: 0;
  padding: 0;
}


.hirooka-about__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 14px;

  margin: 0;
  padding: 0;

  color: currentColor;

  font-size: 12px;
  line-height: 1;
}


/* ==========================================================
   右側写真
========================================================== */

.hirooka-about__visual {
  position: relative;

  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border-radius: 12px;
}


.hirooka-about__image {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 4 / 3;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 12px;

  object-fit: cover;
  object-position: center center;
}


/* ==========================================================
   PC Hover
========================================================== */

@media (hover: hover) {

  .hirooka-about__button:hover {
    transform: translateY(-2px);
  }

}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-about {
    padding-top: 82px;
    padding-bottom: 86px;
  }


  .hirooka-about__inner {
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(350px, 0.92fr);

    column-gap: 42px;

    max-width: 900px;
  }


  .hirooka-about__title {
    font-size: clamp(30px, 4vw, 38px);
  }


  .hirooka-about__description {
    font-size: 14px;
    line-height: 1.8;
  }


  .hirooka-about__feature {
    grid-template-columns: 52px minmax(0, 1fr);

    column-gap: 15px;
  }


  .hirooka-about__feature-icon {
    width: 52px;
    height: 52px;

    border-radius: 13px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-about {
    padding: 64px 18px 68px;
  }


  .hirooka-about__inner {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 620px;

    margin: 0 auto;
  }


  .hirooka-about__content {
    width: 100%;
  }


  .hirooka-about__header {
    margin-bottom: 20px;
  }


  .hirooka-about__label {
    min-width: 64px;
    min-height: 27px;

    margin-bottom: 17px;

    padding: 5px 12px;

    font-size: 11px;
  }


  .hirooka-about__title {
    font-size: clamp(28px, 8vw, 35px);
    line-height: 1.25;
    letter-spacing: 0.015em;
  }


  .hirooka-about__description {
    margin-bottom: 26px !important;

    font-size: 13.5px;
    line-height: 1.8;
  }


  /* 特徴 */

  .hirooka-about__features {
    gap: 15px;
  }


  .hirooka-about__feature {
    grid-template-columns: 50px minmax(0, 1fr);

    column-gap: 14px;
  }


  .hirooka-about__feature-icon {
    width: 50px;
    height: 50px;

    border-radius: 12px;
  }


  .hirooka-about__feature-icon > i {
    width: 18px;
    height: 18px;

    font-size: 16px;
  }


  .hirooka-about__feature-title {
    font-size: 15.5px;
  }


  .hirooka-about__feature-text {
    font-size: 13px;
    line-height: 1.65;
  }


  /* CTA */

  .hirooka-about__action {
    margin-top: 27px;
  }


  .hirooka-about__button {
    min-height: 47px;

    font-size: 13px;
  }


  /* 写真を文章の下へ */

  .hirooka-about__visual {
    width: 100%;

    margin-top: 38px;

    border-radius: 10px;
  }


  .hirooka-about__image {
    width: 100%;

    aspect-ratio: 4 / 3;

    border-radius: 10px;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-about {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-about__title {
    font-size: 27px;
  }


  .hirooka-about__description {
    font-size: 13px;
  }


  .hirooka-about__feature {
    grid-template-columns: 48px minmax(0, 1fr);

    column-gap: 13px;
  }


  .hirooka-about__feature-icon {
    width: 48px;
    height: 48px;
  }


  .hirooka-about__feature-title {
    font-size: 15px;
  }


  .hirooka-about__feature-text {
    font-size: 12.5px;
  }


  .hirooka-about__button {
    width: 100%;

    min-width: 0;
  }

}


/* ==========================================================
   Hoverを持たないタッチ端末
========================================================== */

@media (hover: none) {

  .hirooka-about__button:hover {
    border-color: #008d82;

    background-color: #008d82;

    transform: none;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-about__button {
    transition: none;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   TOP PAGE
   SERVICE セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-service,
.hirooka-service *,
.hirooka-service *::before,
.hirooka-service *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
========================================================== */

.hirooka-service {
  position: relative;
  z-index: 0;
  isolation: isolate;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 96px 24px 100px;

  overflow: visible;

  color: #202020;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   幅広ワイド背景
========================================================== */

.hirooka-service::before {
  position: absolute;
  z-index: -1;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 100vw;

  margin: 0;
  padding: 0;

  background-color: #f1faf7;

  content: "";

  transform: translateX(-50%);
}


/* ==========================================================
   内側コンテンツ
========================================================== */

.hirooka-service__inner {
  width: 100%;
  max-width: 1160px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   セクションヘッダー
========================================================== */

.hirooka-service__header {
  width: 100%;

  margin: 0 0 55px;
  padding: 0;

  text-align: center;
}


/* ==========================================================
   SERVICE ラベル
========================================================== */

.hirooka-service__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 76px;
  min-height: 30px;

  margin: 0 0 24px;
  padding: 6px 15px;

  border-radius: 999px;

  background-color: #def5ef;

  color: #007b71;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    sans-serif;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.08em;
}


/* ==========================================================
   H2
========================================================== */

.hirooka-service__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #171717 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: clamp(32px, 2.8vw, 42px);
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.035em;

  text-align: center;
}


/* Lightning見出し装飾を解除 */

.hirooka-service__title::before,
.hirooka-service__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   リード文
========================================================== */

.hirooka-service__lead {
  margin: 13px 0 0 !important;
  padding: 0 !important;

  color: #666666;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.025em;

  text-align: center;
}


/* ==========================================================
   PC カードグリッド

   16分割グリッドを使用。

   すべてのカードを4カラム幅にすることで
   上段・下段を完全に同じ横幅にする。

   上段：
   左右に2カラムずつ余白を設けて
   3枚を中央配置。

   下段：
   4枚を横いっぱいに配置。
========================================================== */

.hirooka-service__grid {
  display: grid;

  grid-template-columns: repeat(16, minmax(0, 1fr));

  column-gap: 20px;
  row-gap: 22px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   PC 上段3枚

   16カラム中、
   左右2カラムを余白として使用。

   01：3～6
   02：7～10
   03：11～14
========================================================== */

.hirooka-service__card:nth-child(1) {
  grid-column: 3 / span 4;
}


.hirooka-service__card:nth-child(2) {
  grid-column: 7 / span 4;
}


.hirooka-service__card:nth-child(3) {
  grid-column: 11 / span 4;
}


/* ==========================================================
   PC 下段4枚

   すべて4カラム幅。

   04：1～4
   05：5～8
   06：9～12
   07：13～16
========================================================== */

.hirooka-service__card:nth-child(4) {
  grid-column: 1 / span 4;
}


.hirooka-service__card:nth-child(5) {
  grid-column: 5 / span 4;
}


.hirooka-service__card:nth-child(6) {
  grid-column: 9 / span 4;
}


.hirooka-service__card:nth-child(7) {
  grid-column: 13 / span 4;
}


/* ==========================================================
   業務カード
========================================================== */

.hirooka-service__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-width: 0;
  min-height: 230px;

  margin: 0;
  padding: 28px 29px 27px;

  border: 1px solid #78cbbb;
  border-radius: 11px;

  background-color: #ffffff;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}


/* ==========================================================
   アイコン背景

   正方形＋角丸
   Font Awesomeを上下左右中央配置
========================================================== */

.hirooka-service__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 49px;
  height: 49px;

  aspect-ratio: 1 / 1;

  margin: 0 0 23px;
  padding: 0;

  border-radius: 12px;

  background-color: #def5ef;

  color: #00877d;

  text-align: center;
}


/* ==========================================================
   Font Awesomeアイコン
========================================================== */

.hirooka-service__icon > i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  margin: 0;
  padding: 0;

  color: inherit;

  font-size: 17px;
  line-height: 1;

  text-align: center;
}


/* Font Awesome baseline補正 */

.hirooka-service__icon > i::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}


/* ==========================================================
   カードタイトル H3
========================================================== */

.hirooka-service__card-title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #202020 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;

  letter-spacing: 0.015em;

  text-align: left;
}


/* Lightning H3装飾解除 */

.hirooka-service__card-title::before,
.hirooka-service__card-title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   カード説明文
========================================================== */

.hirooka-service__card-text {
  width: 100%;

  margin: 8px 0 0 !important;
  padding: 0 !important;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;

  letter-spacing: 0.012em;

  text-align: left;
}


/* ==========================================================
   CTAエリア
========================================================== */

.hirooka-service__action {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  margin: 46px 0 0;
  padding: 0;
}


/* ==========================================================
   CTAボタン
========================================================== */

.hirooka-service__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 13px;

  min-width: 235px;
  min-height: 50px;

  margin: 0;
  padding: 12px 25px;

  border: 2px solid #008d82;
  border-radius: 999px;

  background-color: #008d82;

  color: #ffffff !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;

  letter-spacing: 0.02em;

  text-align: center;
  text-decoration: none !important;

  white-space: nowrap;

  box-shadow: none;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.hirooka-service__button:visited {
  color: #ffffff !important;
}


.hirooka-service__button:hover,
.hirooka-service__button:focus {
  border-color: #00766d;

  background-color: #00766d;

  color: #ffffff !important;

  text-decoration: none !important;

  transform: translateY(-2px);
}


.hirooka-service__button:focus-visible {
  outline: 3px solid rgba(0, 141, 130, 0.25);
  outline-offset: 4px;
}


.hirooka-service__button-text {
  display: block;

  margin: 0;
  padding: 0;
}


.hirooka-service__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 14px;

  margin: 0;
  padding: 0;

  color: currentColor;

  font-size: 12px;
  line-height: 1;
}


/* ==========================================================
   PC Hover
========================================================== */

@media (hover: hover) {

  .hirooka-service__card:hover {
    border-color: #56bba8;

    box-shadow:
      0 9px 25px rgba(0, 110, 98, 0.07);

    transform: translateY(-2px);
  }

}


/* ==========================================================
   Tablet
   991px以下は従来どおり2列
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-service {
    padding-top: 82px;
    padding-bottom: 86px;
  }


  .hirooka-service__inner {
    max-width: 820px;
  }


  .hirooka-service__header {
    margin-bottom: 46px;
  }


  /* 2列へ切り替え */

  .hirooka-service__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
  }


  /*
     PC専用のgrid-column位置指定を
     すべて解除
  */

  .hirooka-service__card:nth-child(1),
  .hirooka-service__card:nth-child(2),
  .hirooka-service__card:nth-child(3),
  .hirooka-service__card:nth-child(4),
  .hirooka-service__card:nth-child(5),
  .hirooka-service__card:nth-child(6),
  .hirooka-service__card:nth-child(7) {
    grid-column: auto;
  }


  .hirooka-service__card {
    min-height: 215px;

    padding: 26px 25px;
  }

}


/* ==========================================================
   Smartphone
   767px以下は1列
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-service {
    padding: 64px 18px 68px;
  }


  .hirooka-service__header {
    margin-bottom: 36px;
  }


  .hirooka-service__label {
    min-width: 70px;
    min-height: 27px;

    margin-bottom: 18px;

    padding: 5px 12px;

    font-size: 11px;
  }


  .hirooka-service__title {
    font-size: clamp(28px, 8vw, 34px);

    line-height: 1.4;
  }


  .hirooka-service__lead {
    margin-top: 10px !important;

    font-size: 13.5px;
    line-height: 1.7;
  }


  /* 1列へ切り替え */

  .hirooka-service__grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .hirooka-service__card {
    min-height: 0;

    padding: 22px 20px;
  }


  .hirooka-service__icon {
    width: 46px;
    height: 46px;

    margin-bottom: 18px;

    border-radius: 11px;
  }


  .hirooka-service__icon > i {
    width: 18px;
    height: 18px;

    font-size: 16px;
  }


  .hirooka-service__card-title {
    font-size: 16px;
  }


  .hirooka-service__card-text {
    margin-top: 6px !important;

    font-size: 13.5px;
    line-height: 1.7;
  }


  .hirooka-service__action {
    margin-top: 32px;
  }


  .hirooka-service__button {
    min-height: 48px;

    padding: 11px 22px;

    font-size: 13px;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-service {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-service__title {
    font-size: 27px;
  }


  .hirooka-service__card {
    padding: 20px 18px;
  }


  .hirooka-service__card-title {
    font-size: 15.5px;
  }


  .hirooka-service__card-text {
    font-size: 13px;
  }


  .hirooka-service__button {
    width: 100%;
    min-width: 0;
  }

}


/* ==========================================================
   Hoverを持たない端末
========================================================== */

@media (hover: none) {

  .hirooka-service__button:hover {
    border-color: #008d82;

    background-color: #008d82;

    transform: none;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-service__card,
  .hirooka-service__button {
    transition: none;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   TOP PAGE
   REASON セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-reason,
.hirooka-reason *,
.hirooka-reason *::before,
.hirooka-reason *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-reason {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 96px 24px 100px;

  background: transparent;

  color: #202020;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側コンテンツ
========================================================== */

.hirooka-reason__inner {
  width: 100%;
  max-width: 920px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   セクションヘッダー
========================================================== */

.hirooka-reason__header {
  width: 100%;

  margin: 0 0 55px;
  padding: 0;

  text-align: center;
}


/* ==========================================================
   REASON ラベル
========================================================== */

.hirooka-reason__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 75px;
  min-height: 29px;

  margin: 0 0 24px;
  padding: 6px 14px;

  border-radius: 999px;

  background-color: #fff1d8;

  color: #9b6200;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    sans-serif;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.08em;
}


/* ==========================================================
   H2
========================================================== */

.hirooka-reason__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: clamp(32px, 2.8vw, 42px);
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.03em;

  text-align: center;
}


/* Lightning側のH2装飾を解除 */

.hirooka-reason__title::before,
.hirooka-reason__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* 「4つ」だけアクセント */

.hirooka-reason__title-accent {
  color: #aa6a00;
}


/* ==========================================================
   リード文
========================================================== */

.hirooka-reason__lead {
  margin: 13px 0 0 !important;
  padding: 0 !important;

  color: #666666;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.025em;

  text-align: center;
}


/* ==========================================================
   カードグリッド
========================================================== */

.hirooka-reason__grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 22px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   カード
========================================================== */

.hirooka-reason__card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 245px;

  margin: 0;
  padding: 27px 29px 28px;

  border: 1px solid #e7ad50;
  border-radius: 11px;

  background-color: #ffffff;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}


/* ==========================================================
   番号
========================================================== */

.hirooka-reason__number {
  margin: 0 0 10px;
  padding: 0;

  color: #e9ac4d;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 35px;
  font-weight: 400;
  line-height: 1;

  letter-spacing: 0.01em;
}


/* ==========================================================
   アイコン＋タイトル
========================================================== */

.hirooka-reason__heading {
  display: flex;
  align-items: center;

  gap: 16px;

  width: 100%;

  margin: 0 0 5px;
  padding: 0;
}


/* ==========================================================
   アイコン背景

   48px四方の角丸四角。
   flexでFont Awesomeを完全中央配置。
========================================================== */

.hirooka-reason__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 48px;
  height: 48px;

  aspect-ratio: 1 / 1;

  margin: 0;
  padding: 0;

  border-radius: 12px;

  background-color: #fff1da;

  color: #ad7000;

  text-align: center;
}


/* ==========================================================
   Font Awesome アイコン中央補正
========================================================== */

.hirooka-reason__icon > i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  margin: 0;
  padding: 0;

  color: inherit;

  font-size: 17px;
  line-height: 1;

  text-align: center;
}


.hirooka-reason__icon > i::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}


/* ==========================================================
   H3
========================================================== */

.hirooka-reason__card-title {
  flex: 1;

  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #202020 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;

  letter-spacing: 0.015em;

  text-align: left;
}


/* Lightning H3装飾解除 */

.hirooka-reason__card-title::before,
.hirooka-reason__card-title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   カード本文
========================================================== */

.hirooka-reason__card-text {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.78;

  letter-spacing: 0.012em;

  text-align: left;
}


/* ==========================================================
   PC Hover
========================================================== */

@media (hover: hover) {

  .hirooka-reason__card:hover {
    border-color: #d99b3a;

    box-shadow:
      0 9px 26px rgba(115, 78, 20, 0.07);

    transform: translateY(-2px);
  }

}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-reason {
    padding-top: 82px;
    padding-bottom: 86px;
  }


  .hirooka-reason__inner {
    max-width: 780px;
  }


  .hirooka-reason__header {
    margin-bottom: 46px;
  }


  .hirooka-reason__grid {
    gap: 18px;
  }


  .hirooka-reason__card {
    min-height: 235px;

    padding: 25px 24px 26px;
  }


  .hirooka-reason__card-title {
    font-size: 16.5px;
  }


  .hirooka-reason__card-text {
    font-size: 13.5px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-reason {
    padding: 64px 18px 68px;
  }


  .hirooka-reason__header {
    margin-bottom: 36px;
  }


  .hirooka-reason__label {
    min-width: 69px;
    min-height: 27px;

    margin-bottom: 18px;

    padding: 5px 12px;

    font-size: 11px;
  }


  .hirooka-reason__title {
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.4;
  }


  .hirooka-reason__lead {
    margin-top: 10px !important;

    font-size: 13.5px;
    line-height: 1.7;
  }


  /* 1列 */

  .hirooka-reason__grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .hirooka-reason__card {
    min-height: 0;

    padding: 22px 20px 23px;
  }


  .hirooka-reason__number {
    margin-bottom: 9px;

    font-size: 31px;
  }


  .hirooka-reason__heading {
    gap: 13px;

    margin-bottom: 7px;
  }


  .hirooka-reason__icon {
    width: 45px;
    height: 45px;

    border-radius: 11px;
  }


  .hirooka-reason__icon > i {
    width: 18px;
    height: 18px;

    font-size: 16px;
  }


  .hirooka-reason__card-title {
    font-size: 16px;
  }


  .hirooka-reason__card-text {
    font-size: 13.5px;
    line-height: 1.75;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-reason {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-reason__title {
    font-size: 27px;
  }


  .hirooka-reason__card {
    padding: 20px 18px 21px;
  }


  .hirooka-reason__heading {
    gap: 12px;
  }


  .hirooka-reason__icon {
    width: 43px;
    height: 43px;
  }


  .hirooka-reason__card-title {
    font-size: 15.5px;
  }


  .hirooka-reason__card-text {
    font-size: 13px;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-reason__card {
    transition: none;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   TOP PAGE
   FLOW セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-flow,
.hirooka-flow *,
.hirooka-flow *::before,
.hirooka-flow *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体

   セクション自体は親要素の中央位置を維持。
   背景色だけ疑似要素で100vwまで広げます。
========================================================== */

.hirooka-flow {
  position: relative;
  z-index: 0;
  isolation: isolate;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 94px 24px 96px;

  overflow: visible;

  color: #202020;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   幅広ワイド背景
========================================================== */

.hirooka-flow::before {
  position: absolute;
  z-index: -1;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 100vw;

  margin: 0;
  padding: 0;

  background-color: #fbf8f3;

  content: "";

  transform: translateX(-50%);
}


/* ==========================================================
   内側コンテンツ
========================================================== */

.hirooka-flow__inner {
  width: 100%;
  max-width: 760px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   セクションヘッダー
========================================================== */

.hirooka-flow__header {
  width: 100%;

  margin: 0 0 52px;
  padding: 0;

  text-align: center;
}


/* ==========================================================
   FLOW ラベル
========================================================== */

.hirooka-flow__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 56px;
  min-height: 28px;

  margin: 0 0 22px;
  padding: 6px 13px;

  border-radius: 999px;

  background-color: #e1f6f1;

  color: #007c72;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    sans-serif;

  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.08em;
}


/* ==========================================================
   H2
========================================================== */

.hirooka-flow__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #171717 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: clamp(32px, 2.8vw, 42px);
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.03em;

  text-align: center;
}


/* LightningのH2装飾を解除 */

.hirooka-flow__title::before,
.hirooka-flow__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   リード文
========================================================== */

.hirooka-flow__lead {
  margin: 11px 0 0 !important;
  padding: 0 !important;

  color: #6a6a6a;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.02em;

  text-align: center;
}


/* ==========================================================
   ステップ一覧
========================================================== */

.hirooka-flow__steps {
  display: flex;
  flex-direction: column;

  gap: 20px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   各ステップカード
========================================================== */

.hirooka-flow__step {
  display: grid;

  grid-template-columns: 220px minmax(0, 1fr);

  width: 100%;
  min-height: 164px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 0;
  border-radius: 12px;

  background-color: #ffffff;
}


/* ==========================================================
   写真領域
========================================================== */

.hirooka-flow__visual {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 164px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background-color: #eeeeee;
}


.hirooka-flow__image {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 164px;

  margin: 0;
  padding: 0;

  border: 0;

  object-fit: cover;
  object-position: center center;
}


/* ==========================================================
   右側コンテンツ
========================================================== */

.hirooka-flow__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;

  margin: 0;
  padding: 23px 26px;
}


/* ==========================================================
   ステップ番号
========================================================== */

.hirooka-flow__number {
  margin: 0 0 7px;
  padding: 0;

  color: #92d8cd;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 36px;
  font-weight: 400;
  line-height: 1;

  letter-spacing: 0;
}


/* ==========================================================
   アイコン＋H3
========================================================== */

.hirooka-flow__heading {
  display: flex;
  align-items: center;

  gap: 11px;

  width: 100%;

  margin: 0 0 8px;
  padding: 0;
}


/* ==========================================================
   丸いアイコン背景

   正円＋flex中央配置で
   Font Awesomeを上下左右中央に固定
========================================================== */

.hirooka-flow__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 34px;
  height: 34px;

  aspect-ratio: 1 / 1;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  background-color: #e2f6f1;

  color: #00877d;

  text-align: center;
}


/* ==========================================================
   Font Awesome アイコン中央補正
========================================================== */

.hirooka-flow__icon > i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 15px;
  height: 15px;

  margin: 0;
  padding: 0;

  color: inherit;

  font-size: 13px;
  line-height: 1;

  text-align: center;
}


.hirooka-flow__icon > i::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}


/* ==========================================================
   H3
========================================================== */

.hirooka-flow__step-title {
  flex: 1;

  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #202020 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.015em;

  text-align: left;
}


/* Lightning H3装飾解除 */

.hirooka-flow__step-title::before,
.hirooka-flow__step-title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   説明文
========================================================== */

.hirooka-flow__text {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.01em;

  text-align: left;
}


/* ==========================================================
   電話CTAエリア
========================================================== */

.hirooka-flow__action {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  margin: 44px 0 0;
  padding: 0;
}


/* ==========================================================
   電話CTA
========================================================== */

.hirooka-flow__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 11px;

  min-width: 205px;
  min-height: 50px;

  margin: 0;
  padding: 12px 24px;

  border: 2px solid #c98100;
  border-radius: 999px;

  background-color: #c98100;

  color: #ffffff !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;

  letter-spacing: 0.02em;

  text-align: center;
  text-decoration: none !important;

  white-space: nowrap;

  box-shadow: none;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.hirooka-flow__button:visited {
  color: #ffffff !important;
}


.hirooka-flow__button:hover,
.hirooka-flow__button:focus {
  border-color: #ae7000;

  background-color: #ae7000;

  color: #ffffff !important;

  text-decoration: none !important;

  transform: translateY(-2px);
}


.hirooka-flow__button:focus-visible {
  outline: 3px solid rgba(201, 129, 0, 0.25);
  outline-offset: 4px;
}


/* ==========================================================
   CTA Font Awesome
========================================================== */

.hirooka-flow__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 15px;

  margin: 0;
  padding: 0;

  color: currentColor;

  font-size: 13px;
  line-height: 1;
}


.hirooka-flow__button-text {
  display: block;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   PC
   1024px以上
========================================================== */

@media screen and (min-width: 1024px) {

  .hirooka-flow__step {
    transition:
      box-shadow 0.25s ease,
      transform 0.25s ease;
  }


  @media (hover: hover) {

    .hirooka-flow__step:hover {
      box-shadow:
        0 10px 28px rgba(45, 63, 59, 0.06);

      transform: translateY(-2px);
    }

  }

}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-flow {
    padding-top: 82px;
    padding-bottom: 86px;
  }


  .hirooka-flow__inner {
    max-width: 720px;
  }


  .hirooka-flow__header {
    margin-bottom: 45px;
  }


  .hirooka-flow__step {
    grid-template-columns: 205px minmax(0, 1fr);

    min-height: 158px;
  }


  .hirooka-flow__visual,
  .hirooka-flow__image {
    min-height: 158px;
  }


  .hirooka-flow__content {
    padding: 21px 23px;
  }


  .hirooka-flow__number {
    font-size: 34px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-flow {
    padding: 64px 18px 68px;
  }


  .hirooka-flow__inner {
    max-width: 560px;
  }


  .hirooka-flow__header {
    margin-bottom: 36px;
  }


  .hirooka-flow__label {
    min-width: 53px;
    min-height: 27px;

    margin-bottom: 18px;

    padding: 5px 12px;

    font-size: 11px;
  }


  .hirooka-flow__title {
    font-size: clamp(28px, 8vw, 34px);

    line-height: 1.4;
  }


  .hirooka-flow__lead {
    margin-top: 10px !important;

    font-size: 13.5px;
  }


  .hirooka-flow__steps {
    gap: 15px;
  }


  /* スマートフォンは写真を上、内容を下 */

  .hirooka-flow__step {
    display: block;

    min-height: 0;

    border-radius: 10px;
  }


  .hirooka-flow__visual {
    width: 100%;
    height: auto;

    min-height: 0;

    aspect-ratio: 16 / 8.5;
  }


  .hirooka-flow__image {
    width: 100%;
    height: 100%;

    min-height: 0;

    aspect-ratio: 16 / 8.5;
  }


  .hirooka-flow__content {
    padding: 20px 19px 22px;
  }


  .hirooka-flow__number {
    margin-bottom: 8px;

    font-size: 31px;
  }


  .hirooka-flow__heading {
    gap: 10px;

    margin-bottom: 8px;
  }


  .hirooka-flow__icon {
    width: 33px;
    height: 33px;
  }


  .hirooka-flow__icon > i {
    width: 14px;
    height: 14px;

    font-size: 12px;
  }


  .hirooka-flow__step-title {
    font-size: 15.5px;
  }


  .hirooka-flow__text {
    font-size: 13px;
    line-height: 1.7;
  }


  .hirooka-flow__action {
    margin-top: 34px;
  }


  .hirooka-flow__button {
    min-height: 48px;

    padding: 11px 22px;

    font-size: 13px;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-flow {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-flow__title {
    font-size: 27px;
  }


  .hirooka-flow__lead {
    font-size: 13px;
  }


  .hirooka-flow__content {
    padding: 18px 16px 20px;
  }


  .hirooka-flow__step-title {
    font-size: 15px;
  }


  .hirooka-flow__text {
    font-size: 12.5px;
  }


  .hirooka-flow__button {
    width: 100%;
    min-width: 0;
  }

}


/* ==========================================================
   タッチ端末
========================================================== */

@media (hover: none) {

  .hirooka-flow__button:hover {
    border-color: #c98100;

    background-color: #c98100;

    transform: none;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-flow__step,
  .hirooka-flow__button {
    transition: none;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   TOP PAGE
   FAQ セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-faq,
.hirooka-faq *,
.hirooka-faq *::before,
.hirooka-faq *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-faq {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 96px 24px 100px;

  background: transparent;

  color: #202020;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側
========================================================== */

.hirooka-faq__inner {
  width: 100%;
  max-width: 880px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   ヘッダー
========================================================== */

.hirooka-faq__header {
  width: 100%;

  margin: 0 0 54px;
  padding: 0;

  text-align: center;
}


/* ==========================================================
   FAQラベル
========================================================== */

.hirooka-faq__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 50px;
  min-height: 28px;

  margin: 0 0 23px;
  padding: 6px 13px;

  border-radius: 999px;

  background-color: #e2f6f1;

  color: #007c72;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.07em;
}


/* ==========================================================
   H2
========================================================== */

.hirooka-faq__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #171717 !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: clamp(32px, 2.8vw, 42px);
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.035em;

  text-align: center;
}


/* Lightning 見出し装飾解除 */

.hirooka-faq__title::before,
.hirooka-faq__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   リード
========================================================== */

.hirooka-faq__lead {
  margin: 12px 0 0 !important;
  padding: 0 !important;

  color: #686868;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.02em;

  text-align: center;
}


/* ==========================================================
   FAQ一覧
========================================================== */

.hirooka-faq__list {
  display: flex;
  flex-direction: column;

  gap: 13px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   FAQ各項目
========================================================== */

.hirooka-faq__item {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 1px solid #edf0ef;
  border-radius: 12px;

  background-color: #ffffff;
}


/* ==========================================================
   質問
========================================================== */

.hirooka-faq__question {
  position: relative;

  display: grid;

  grid-template-columns:
    24px
    minmax(0, 1fr)
    32px;

  align-items: center;

  column-gap: 8px;

  width: 100%;
  min-height: 65px;

  margin: 0;
  padding: 16px 20px;

  cursor: pointer;

  list-style: none;

  color: #202020;

  user-select: none;
}


/* Chrome / Safari デフォルト三角削除 */

.hirooka-faq__question::-webkit-details-marker {
  display: none;
}


/* Firefox等 */

.hirooka-faq__question::marker {
  display: none;
  content: "";
}


/* ==========================================================
   Qマーク
========================================================== */

.hirooka-faq__question-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  background-color: #e1f7f2;

  color: #007d73;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}


/* ==========================================================
   質問テキスト
========================================================== */

.hirooka-faq__question-text {
  display: block;

  min-width: 0;

  margin: 0;
  padding: 0;

  color: #202020;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;

  letter-spacing: 0.012em;

  text-align: left;
}


/* ==========================================================
   ＋ / × ボタン
========================================================== */

.hirooka-faq__toggle {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  justify-self: end;

  width: 28px;
  height: 28px;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  background-color: #f1f7f5;
}


/* 横線 */

.hirooka-faq__toggle::before {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 10px;
  height: 1.5px;

  background-color: #536963;

  content: "";

  transform: translate(-50%, -50%);
}


/* 縦線 */

.hirooka-faq__toggle::after {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 1.5px;
  height: 10px;

  background-color: #536963;

  content: "";

  transform: translate(-50%, -50%);

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}


/* 開いた状態は＋を×へ */

.hirooka-faq__item[open]
.hirooka-faq__toggle::before {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


.hirooka-faq__item[open]
.hirooka-faq__toggle::after {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


/* ==========================================================
   開いた質問
========================================================== */

.hirooka-faq__item[open]
.hirooka-faq__question {
  padding-bottom: 15px;
}


/* ==========================================================
   回答
========================================================== */

.hirooka-faq__answer {
  display: grid;

  grid-template-columns: 24px minmax(0, 1fr);

  align-items: start;

  column-gap: 8px;

  width: calc(100% - 40px);

  margin: 0 20px;
  padding: 18px 0 20px;

  border-top: 1px solid #edf0ef;
}


/* ==========================================================
   Aマーク
========================================================== */

.hirooka-faq__answer-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  background-color: #fff1d8;

  color: #a56a00;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}


/* ==========================================================
   回答本文
========================================================== */

.hirooka-faq__answer-text {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: #555555;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.8;

  letter-spacing: 0.01em;

  text-align: left;
}


/* ==========================================================
   Hover / Focus
========================================================== */

.hirooka-faq__question:hover {
  background-color: #fcfdfd;
}


.hirooka-faq__question:focus-visible {
  outline: 2px solid #79cfc2;
  outline-offset: -2px;
}


/* ==========================================================
   CTA
========================================================== */

.hirooka-faq__action {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  margin: 40px 0 0;
  padding: 0;
}


/* ==========================================================
   CTAボタン
========================================================== */

.hirooka-faq__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  min-width: 190px;
  min-height: 50px;

  margin: 0;
  padding: 11px 24px;

  border: 2px solid #8ed5ca;
  border-radius: 999px;

  background-color: #ffffff;

  color: #007d73 !important;

  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;

  letter-spacing: 0.02em;

  text-align: center;
  text-decoration: none !important;

  white-space: nowrap;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.hirooka-faq__button:visited {
  color: #007d73 !important;
}


.hirooka-faq__button:hover,
.hirooka-faq__button:focus {
  border-color: #007d73;

  background-color: #007d73;

  color: #ffffff !important;

  text-decoration: none !important;

  transform: translateY(-2px);
}


.hirooka-faq__button:focus-visible {
  outline: 3px solid rgba(0, 125, 115, 0.2);
  outline-offset: 4px;
}


/* ==========================================================
   Font Awesome
========================================================== */

.hirooka-faq__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 14px;

  margin: 0;
  padding: 0;

  color: currentColor;

  font-size: 12px;
  line-height: 1;
}


.hirooka-faq__button-text {
  display: block;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-faq {
    padding-top: 82px;
    padding-bottom: 86px;
  }


  .hirooka-faq__inner {
    max-width: 800px;
  }


  .hirooka-faq__header {
    margin-bottom: 46px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-faq {
    padding: 64px 18px 68px;
  }


  .hirooka-faq__header {
    margin-bottom: 36px;
  }


  .hirooka-faq__label {
    min-width: 47px;
    min-height: 27px;

    margin-bottom: 18px;

    padding: 5px 11px;

    font-size: 11px;
  }


  .hirooka-faq__title {
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.4;
  }


  .hirooka-faq__lead {
    margin-top: 10px !important;

    font-size: 13.5px;
  }


  .hirooka-faq__list {
    gap: 11px;
  }


  .hirooka-faq__question {
    grid-template-columns:
      22px
      minmax(0, 1fr)
      30px;

    column-gap: 7px;

    min-height: 62px;

    padding: 15px 15px;
  }


  .hirooka-faq__question-mark,
  .hirooka-faq__answer-mark {
    width: 21px;
    height: 21px;

    font-size: 11.5px;
  }


  .hirooka-faq__question-text {
    font-size: 15px;
    line-height: 1.55;
  }


  .hirooka-faq__toggle {
    width: 27px;
    height: 27px;
  }


  .hirooka-faq__answer {
    width: calc(100% - 30px);

    margin-right: 15px;
    margin-left: 15px;

    padding-top: 16px;
    padding-bottom: 18px;
  }


  .hirooka-faq__answer-text {
    font-size: 13px;
    line-height: 1.75;
  }


  .hirooka-faq__action {
    margin-top: 32px;
  }


  .hirooka-faq__button {
    min-height: 48px;

    padding: 10px 22px;

    font-size: 13px;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-faq {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-faq__title {
    font-size: 27px;
  }


  .hirooka-faq__lead {
    font-size: 13px;
  }


  .hirooka-faq__question {
    grid-template-columns:
      21px
      minmax(0, 1fr)
      27px;

    padding-right: 13px;
    padding-left: 13px;
  }


  .hirooka-faq__question-text {
    font-size: 14.5px;
  }


  .hirooka-faq__answer {
    width: calc(100% - 26px);

    margin-right: 13px;
    margin-left: 13px;
  }


  .hirooka-faq__answer-text {
    font-size: 12.5px;
  }


  .hirooka-faq__button {
    width: 100%;
    min-width: 0;
  }

}


/* ==========================================================
   Touch Device
========================================================== */

@media (hover: none) {

  .hirooka-faq__question:hover {
    background-color: transparent;
  }


  .hirooka-faq__button:hover {
    border-color: #8ed5ca;

    background-color: #ffffff;

    color: #007d73 !important;

    transform: none;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-faq__toggle::after,
  .hirooka-faq__button {
    transition: none;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   TOP PAGE
   CTA セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-cta,
.hirooka-cta *,
.hirooka-cta *::before,
.hirooka-cta *::after {
  box-sizing: border-box;
}


/* ==========================================================
   CTAセクション本体

   セクション自体はLightning内で中央位置を維持。
   背景画像のみ100vwでワイド表示します。
========================================================== */

.hirooka-cta {
  position: relative;
  z-index: 0;
  isolation: isolate;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 82px 24px 84px;

  overflow: visible;

  color: #ffffff;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   幅広ワイド背景

   背景画像＋暗いオーバーレイ。
   コンテンツを動かさず背景だけ100vw表示。
========================================================== */

.hirooka-cta::before {
  position: absolute;
  z-index: -2;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 100vw;

  margin: 0;
  padding: 0;

  background-image:
    linear-gradient(
      rgba(23, 29, 27, 0.58),
      rgba(23, 29, 27, 0.58)
    ),
    url("https://www.hirooka-sr.com/wp-content/uploads/2026/08/CTA-syarousyorui.webp");

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  content: "";

  transform: translateX(-50%);
}


/* ==========================================================
   コンテンツ
========================================================== */

.hirooka-cta__inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 820px;

  margin: 0 auto;
  padding: 0;

  text-align: center;
}


/* ==========================================================
   上部ラベル
========================================================== */

.hirooka-cta__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 28px;

  margin: 0 0 22px;
  padding: 6px 15px;

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;

  background-color: rgba(92, 72, 39, 0.55);

  color: #f0b654;

  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.04em;

  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}


/* ==========================================================
   H2
========================================================== */

.hirooka-cta__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #ffffff !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Noto Serif JP",
    serif;

  font-size: clamp(34px, 3.1vw, 44px);
  font-weight: 600;
  line-height: 1.15;

  letter-spacing: 0.025em;

  text-align: center;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.18);
}


/* Lightning見出し装飾を解除 */

.hirooka-cta__title::before,
.hirooka-cta__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


.hirooka-cta__title-line {
  display: block;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   リード文
========================================================== */

.hirooka-cta__lead {
  max-width: 720px;

  margin: 20px auto 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.90);

  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;

  letter-spacing: 0.015em;

  text-align: center;

  text-shadow:
    0 1px 5px rgba(0, 0, 0, 0.15);
}


/* ==========================================================
   CTAボタンエリア
========================================================== */

.hirooka-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  width: 100%;

  margin: 37px 0 0;
  padding: 0;
}


/* ==========================================================
   ボタン共通
========================================================== */

.hirooka-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 11px;

  min-height: 62px;

  margin: 0;
  padding: 13px 29px;

  border-radius: 999px;

  color: #ffffff !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;

  letter-spacing: 0.02em;

  text-align: center;
  text-decoration: none !important;

  white-space: nowrap;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.hirooka-cta__button:visited {
  color: #ffffff !important;
}


.hirooka-cta__button:hover,
.hirooka-cta__button:focus {
  color: #ffffff !important;

  text-decoration: none !important;

  transform: translateY(-2px);
}


.hirooka-cta__button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 4px;
}


/* ==========================================================
   電話ボタン
========================================================== */

.hirooka-cta__button--phone {
  min-width: 220px;

  border: 2px solid #cf8500;

  background-color: #cf8500;
}


.hirooka-cta__button--phone:hover,
.hirooka-cta__button--phone:focus {
  border-color: #b97500;

  background-color: #b97500;
}


/* ==========================================================
   お問い合わせフォーム
========================================================== */

.hirooka-cta__button--contact {
  min-width: 285px;

  border: 2px solid rgba(255, 255, 255, 0.70);

  background-color: rgba(31, 31, 27, 0.20);

  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}


.hirooka-cta__button--contact:hover,
.hirooka-cta__button--contact:focus {
  border-color: #ffffff;

  background-color: rgba(255, 255, 255, 0.13);
}


/* ==========================================================
   Font Awesomeアイコン
========================================================== */

.hirooka-cta__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 18px;
  height: 18px;

  margin: 0;
  padding: 0;

  color: currentColor;

  font-size: 16px;
  line-height: 1;

  text-align: center;
}


.hirooka-cta__button-icon::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}


.hirooka-cta__button-text {
  display: block;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-cta {
    padding-top: 76px;
    padding-bottom: 78px;
  }


  .hirooka-cta__inner {
    max-width: 760px;
  }


  .hirooka-cta__title {
    font-size: clamp(32px, 4.5vw, 40px);
  }


  .hirooka-cta__lead {
    max-width: 660px;

    font-size: 13.5px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-cta {
    padding: 64px 18px 68px;
  }


  .hirooka-cta::before {
    background-position: center center;
  }


  .hirooka-cta__inner {
    max-width: 560px;
  }


  .hirooka-cta__label {
    min-height: 27px;

    margin-bottom: 18px;

    padding: 5px 13px;

    font-size: 11px;
  }


  .hirooka-cta__title {
    font-size: clamp(28px, 8vw, 35px);
    line-height: 1.25;
  }


  .hirooka-cta__lead {
    margin-top: 17px !important;

    font-size: 13px;
    line-height: 1.75;
  }


  .hirooka-cta__actions {
    flex-direction: column;

    gap: 12px;

    margin-top: 30px;
  }


  .hirooka-cta__button {
    width: min(100%, 340px);

    min-height: 56px;

    padding: 12px 22px;

    font-size: 14.5px;
  }


  .hirooka-cta__button--phone,
  .hirooka-cta__button--contact {
    min-width: 0;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-cta {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-cta__title {
    font-size: 27px;
  }


  .hirooka-cta__lead {
    font-size: 12.5px;
  }


  .hirooka-cta__button {
    width: 100%;
  }

}


/* ==========================================================
   Touch Device
========================================================== */

@media (hover: none) {

  .hirooka-cta__button--phone:hover {
    border-color: #cf8500;

    background-color: #cf8500;

    transform: none;
  }


  .hirooka-cta__button--contact:hover {
    border-color: rgba(255, 255, 255, 0.70);

    background-color: rgba(31, 31, 27, 0.20);

    transform: none;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-cta__button {
    transition: none;
  }

}

/* 事務所案内ページ */

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   OFFICE PAGE
   導入セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-office-intro,
.hirooka-office-intro *,
.hirooka-office-intro *::before,
.hirooka-office-intro *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-office-intro {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 82px 24px 78px;

  background: transparent;

  color: #202020;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   コンテンツ
========================================================== */

.hirooka-office-intro__inner {
  width: 100%;
  max-width: 720px;

  margin: 0 auto;
  padding: 0;

  text-align: center;
}


/* ==========================================================
   H2
========================================================== */

.hirooka-office-intro__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #171717 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: clamp(23px, 2vw, 25px);
  font-weight: 600;
  line-height: 1.55;

  letter-spacing: 0.025em;

  text-align: center;
}


/* ==========================================================
   Lightning側のH2装飾を解除
========================================================== */

.hirooka-office-intro__title::before,
.hirooka-office-intro__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   本文
========================================================== */

.hirooka-office-intro__text {
  width: 100%;

  margin: 24px auto 0 !important;
  padding: 0 !important;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.85;

  letter-spacing: 0.015em;

  text-align: center;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-office-intro {
    padding-top: 74px;
    padding-bottom: 72px;
  }


  .hirooka-office-intro__inner {
    max-width: 680px;
  }


  .hirooka-office-intro__title {
    font-size: clamp(22px, 3vw, 27px);
  }


  .hirooka-office-intro__text {
    font-size: 14px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-office-intro {
    padding: 60px 18px 62px;
  }


  .hirooka-office-intro__inner {
    max-width: 560px;
  }


  .hirooka-office-intro__title {
    font-size: clamp(21px, 6vw, 26px);
    line-height: 1.55;

    letter-spacing: 0.015em;
  }


  .hirooka-office-intro__text {
    margin-top: 20px !important;

    font-size: 13.5px;
    line-height: 1.85;

    text-align: left;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-office-intro {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-office-intro__title {
    font-size: 21px;
  }


  .hirooka-office-intro__text {
    font-size: 13px;
    line-height: 1.8;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   OFFICE PAGE
   ご挨拶セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-greeting,
.hirooka-greeting *,
.hirooka-greeting *::before,
.hirooka-greeting *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-greeting {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 74px 24px 82px;

  background: transparent;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側コンテンツ
========================================================== */

.hirooka-greeting__inner {
  width: 100%;
  max-width: 920px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   H2 ご挨拶
========================================================== */

.hirooka-greeting__title {
  width: 100%;

  margin: 0 0 28px !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.025em;

  text-align: left;
}


/* Lightning側のH2装飾を解除 */

.hirooka-greeting__title::before,
.hirooka-greeting__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   2カラムレイアウト
========================================================== */

.hirooka-greeting__layout {
  display: grid;

  grid-template-columns:
    minmax(260px, 280px)
    minmax(0, 1fr);

  align-items: start;

  column-gap: 32px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   左側写真
========================================================== */

.hirooka-greeting__visual {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border-radius: 11px;
}


.hirooka-greeting__image {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 3 / 4;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 11px;

  object-fit: cover;
  object-position: center top;
}


/* ==========================================================
   右側 挨拶文カード
========================================================== */

.hirooka-greeting__content {
  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 34px 35px 32px;

  border-radius: 12px;

  background-color: #fbf8f3;
}


/* ==========================================================
   H3 代表者名
========================================================== */

.hirooka-greeting__name {
  width: 100%;

  margin: 0 0 19px !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #1d1d1d !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.02em;

  text-align: left;
}


/* Lightning側のH3装飾を解除 */

.hirooka-greeting__name::before,
.hirooka-greeting__name::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   挨拶本文
========================================================== */

.hirooka-greeting__message {
  width: 100%;

  margin: 0;
  padding: 0;

  color: #4e4e4e;
}


.hirooka-greeting__message p {
  width: 100%;

  margin: 0 0 18px !important;
  padding: 0 !important;

  color: #4e4e4e;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;

  letter-spacing: 0.012em;

  text-align: left;
}


.hirooka-greeting__message p:last-child {
  margin-bottom: 0 !important;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-greeting {
    padding-top: 68px;
    padding-bottom: 74px;
  }


  .hirooka-greeting__inner {
    max-width: 820px;
  }


  .hirooka-greeting__layout {
    grid-template-columns:
      minmax(240px, 265px)
      minmax(0, 1fr);

    column-gap: 26px;
  }


  .hirooka-greeting__content {
    padding: 29px 28px;
  }


  .hirooka-greeting__name {
    font-size: 19px;
  }


  .hirooka-greeting__message p {
    font-size: 13.5px;
    line-height: 1.78;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-greeting {
    padding: 58px 18px 64px;
  }


  .hirooka-greeting__inner {
    max-width: 560px;
  }


  .hirooka-greeting__title {
    margin-bottom: 23px !important;

    font-size: 25px;
  }


  /* 1カラムへ変更 */

  .hirooka-greeting__layout {
    display: flex;
    flex-direction: column;

    width: 100%;
  }


  /* 写真 */

  .hirooka-greeting__visual {
    width: min(100%, 360px);

    margin: 0 auto;

    border-radius: 10px;
  }


  .hirooka-greeting__image {
    aspect-ratio: 3 / 4;

    border-radius: 10px;
  }


  /* 挨拶文 */

  .hirooka-greeting__content {
    width: 100%;

    margin-top: 26px;

    padding: 25px 22px 26px;

    border-radius: 10px;
  }


  .hirooka-greeting__name {
    margin-bottom: 17px !important;

    font-size: 18px;
  }


  .hirooka-greeting__message p {
    margin-bottom: 16px !important;

    font-size: 13.5px;
    line-height: 1.8;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-greeting {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-greeting__title {
    font-size: 23px;
  }


  .hirooka-greeting__content {
    padding: 22px 18px 23px;
  }


  .hirooka-greeting__name {
    font-size: 17px;
  }


  .hirooka-greeting__message p {
    font-size: 13px;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   OFFICE PAGE
   事務所の雰囲気セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-office-gallery,
.hirooka-office-gallery *,
.hirooka-office-gallery *::before,
.hirooka-office-gallery *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-office-gallery {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 70px 24px 76px;

  background: transparent;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側コンテンツ
========================================================== */

.hirooka-office-gallery__inner {
  width: 100%;
  max-width: 920px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   H2
========================================================== */

.hirooka-office-gallery__title {
  width: 100%;

  margin: 0 0 27px !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.025em;

  text-align: left;
}


/* ==========================================================
   Lightning側のH2装飾を解除
========================================================== */

.hirooka-office-gallery__title::before,
.hirooka-office-gallery__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   画像2カラム
========================================================== */

.hirooka-office-gallery__images {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 24px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   figure
========================================================== */

.hirooka-office-gallery__figure {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border-radius: 11px;

  background: transparent;
}


/* ==========================================================
   画像
========================================================== */

.hirooka-office-gallery__image {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 4 / 3;

  margin: 0;
  padding: 0;

  border: 0;

  border-radius: 11px;

  object-fit: cover;
  object-position: center center;

  transition:
    transform 0.35s ease;
}


/* ==========================================================
   説明文
========================================================== */

.hirooka-office-gallery__text {
  width: 100%;

  margin: 20px auto 0 !important;
  padding: 0 !important;

  color: #666666;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.015em;

  text-align: center;
}


/* ==========================================================
   PC Hover
========================================================== */

@media (hover: hover) {

  .hirooka-office-gallery__figure:hover
  .hirooka-office-gallery__image {
    transform: scale(1.015);
  }

}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-office-gallery {
    padding-top: 64px;
    padding-bottom: 70px;
  }


  .hirooka-office-gallery__inner {
    max-width: 820px;
  }


  .hirooka-office-gallery__images {
    gap: 20px;
  }


  .hirooka-office-gallery__title {
    margin-bottom: 24px !important;

    font-size: clamp(23px, 3vw, 28px);
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-office-gallery {
    padding: 56px 18px 60px;
  }


  .hirooka-office-gallery__inner {
    max-width: 560px;
  }


  .hirooka-office-gallery__title {
    margin-bottom: 22px !important;

    font-size: 25px;
  }


  /* 画像を縦並び */

  .hirooka-office-gallery__images {
    grid-template-columns: 1fr;

    gap: 16px;
  }


  .hirooka-office-gallery__figure,
  .hirooka-office-gallery__image {
    border-radius: 10px;
  }


  .hirooka-office-gallery__image {
    aspect-ratio: 4 / 3;
  }


  .hirooka-office-gallery__text {
    margin-top: 18px !important;

    font-size: 13px;
    line-height: 1.7;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-office-gallery {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-office-gallery__title {
    font-size: 23px;
  }


  .hirooka-office-gallery__text {
    font-size: 12.5px;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-office-gallery__image {
    transition: none;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   OFFICE PAGE
   事務所概要セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-office-overview,
.hirooka-office-overview *,
.hirooka-office-overview *::before,
.hirooka-office-overview *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-office-overview {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 72px 24px 80px;

  background: transparent;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側
========================================================== */

.hirooka-office-overview__inner {
  width: 100%;
  max-width: 920px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   H2
========================================================== */

.hirooka-office-overview__title {
  width: 100%;

  margin: 0 0 28px !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.025em;

  text-align: left;
}


/* Lightning側のH2装飾を解除 */

.hirooka-office-overview__title::before,
.hirooka-office-overview__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   2カラムレイアウト
========================================================== */

.hirooka-office-overview__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(340px, 0.92fr);

  align-items: stretch;

  column-gap: 34px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   概要表ラッパー
========================================================== */

.hirooka-office-overview__table-wrap {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 1px solid #eeeeeb;
  border-radius: 12px;

  background-color: #ffffff;
}


/* ==========================================================
   概要表
========================================================== */

.hirooka-office-overview__table {
  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   各行
========================================================== */

.hirooka-office-overview__row {
  display: grid;

  grid-template-columns: 160px minmax(0, 1fr);

  align-items: center;

  width: 100%;
  min-height: 48px;

  margin: 0;
  padding: 0;
}


/* 偶数行に淡い背景 */

.hirooka-office-overview__row:nth-child(even) {
  background-color: #faf8f4;
}


/* ==========================================================
   項目名
========================================================== */

.hirooka-office-overview__term {
  align-self: stretch;

  display: flex;
  align-items: center;

  margin: 0;
  padding: 13px 20px;

  color: #333333;

  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;

  letter-spacing: 0.01em;
}


/* ==========================================================
   内容
========================================================== */

.hirooka-office-overview__description {
  display: flex;
  align-items: center;

  min-width: 0;

  margin: 0;
  padding: 13px 18px;

  color: #555555;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.01em;

  overflow-wrap: anywhere;
}


/* ==========================================================
   電話リンク
========================================================== */

.hirooka-office-overview__link {
  color: #555555 !important;

  text-decoration: none !important;

  transition:
    color 0.2s ease;
}


.hirooka-office-overview__link:visited {
  color: #555555 !important;
}


.hirooka-office-overview__link:hover,
.hirooka-office-overview__link:focus {
  color: #00877d !important;

  text-decoration: none !important;
}


/* ==========================================================
   外観写真
========================================================== */

.hirooka-office-overview__visual {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border-radius: 11px;

  background-color: #f4f4f2;
}


.hirooka-office-overview__image {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 330px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 11px;

  object-fit: cover;
  object-position: center center;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-office-overview {
    padding-top: 66px;
    padding-bottom: 72px;
  }


  .hirooka-office-overview__inner {
    max-width: 820px;
  }


  .hirooka-office-overview__layout {
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(300px, 0.92fr);

    column-gap: 26px;
  }


  .hirooka-office-overview__row {
    grid-template-columns: 130px minmax(0, 1fr);
  }


  .hirooka-office-overview__term {
    padding-right: 15px;
    padding-left: 15px;

    font-size: 13px;
  }


  .hirooka-office-overview__description {
    padding-right: 15px;
    padding-left: 15px;

    font-size: 13px;
  }


  .hirooka-office-overview__image {
    min-height: 320px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-office-overview {
    padding: 56px 18px 62px;
  }


  .hirooka-office-overview__inner {
    max-width: 560px;
  }


  .hirooka-office-overview__title {
    margin-bottom: 23px !important;

    font-size: 25px;
  }


  /* 縦並び */

  .hirooka-office-overview__layout {
    display: flex;
    flex-direction: column;

    width: 100%;
  }


  /* 概要表 */

  .hirooka-office-overview__row {
    grid-template-columns: 110px minmax(0, 1fr);

    min-height: 46px;
  }


  .hirooka-office-overview__term {
    padding: 12px 13px;

    font-size: 12.5px;
  }


  .hirooka-office-overview__description {
    padding: 12px 13px;

    font-size: 12.5px;
    line-height: 1.7;
  }


  /* 写真 */

  .hirooka-office-overview__visual {
    margin-top: 24px;

    border-radius: 10px;
  }


  .hirooka-office-overview__image {
    width: 100%;
    height: auto;

    min-height: 0;

    aspect-ratio: 4 / 3;

    border-radius: 10px;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-office-overview {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-office-overview__title {
    font-size: 23px;
  }


  .hirooka-office-overview__row {
    grid-template-columns: 94px minmax(0, 1fr);
  }


  .hirooka-office-overview__term {
    padding-right: 10px;
    padding-left: 10px;

    font-size: 12px;
  }


  .hirooka-office-overview__description {
    padding-right: 10px;
    padding-left: 10px;

    font-size: 12px;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   OFFICE PAGE
   アクセスセクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-access,
.hirooka-access *,
.hirooka-access *::before,
.hirooka-access *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-access {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 72px 24px 82px;

  background: transparent;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側
========================================================== */

.hirooka-access__inner {
  width: 100%;
  max-width: 920px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   H2
========================================================== */

.hirooka-access__title {
  width: 100%;

  margin: 0 0 28px !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.025em;

  text-align: left;
}


/* Lightning側のH2装飾解除 */

.hirooka-access__title::before,
.hirooka-access__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   上段
   外観写真＋案内文
========================================================== */

.hirooka-access__top {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  align-items: stretch;

  gap: 32px;

  width: 100%;

  margin: 0 0 25px;
  padding: 0;
}


/* ==========================================================
   外観写真
========================================================== */

.hirooka-access__visual {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border-radius: 11px;

  background-color: #f3f3f1;
}


.hirooka-access__image {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 245px;

  margin: 0;
  padding: 0;

  border: 0;

  border-radius: 11px;

  object-fit: cover;
  object-position: center center;
}


/* ==========================================================
   案内文カード
========================================================== */

.hirooka-access__guide {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  margin: 0;
  padding: 34px 35px;

  border-radius: 11px;

  background-color: #fbf8f3;
}


/* ==========================================================
   案内文
========================================================== */

.hirooka-access__guide-text {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;

  letter-spacing: 0.012em;

  text-align: left;
}


/* ==========================================================
   Google Map
========================================================== */

.hirooka-access__map {
  position: relative;

  width: 100%;
  height: 500px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border-radius: 11px;

  background-color: #f3f3f3;
}


.hirooka-access__map-frame {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;
}


/* ==========================================================
   住所
========================================================== */

.hirooka-access__address {
  width: 100%;

  margin: 17px 0 0 !important;
  padding: 0 !important;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.015em;

  text-align: left;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-access {
    padding-top: 66px;
    padding-bottom: 74px;
  }


  .hirooka-access__inner {
    max-width: 820px;
  }


  .hirooka-access__top {
    gap: 25px;
  }


  .hirooka-access__image {
    min-height: 225px;
  }


  .hirooka-access__guide {
    padding: 28px 29px;
  }


  .hirooka-access__guide-text {
    font-size: 13.5px;
  }


  .hirooka-access__map {
    height: 440px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-access {
    padding: 56px 18px 62px;
  }


  .hirooka-access__inner {
    max-width: 560px;
  }


  .hirooka-access__title {
    margin-bottom: 23px !important;

    font-size: 25px;
  }


  /* 上段を縦並び */

  .hirooka-access__top {
    grid-template-columns: 1fr;

    gap: 16px;

    margin-bottom: 20px;
  }


  /* 外観写真 */

  .hirooka-access__visual,
  .hirooka-access__image {
    border-radius: 10px;
  }


  .hirooka-access__image {
    width: 100%;
    height: auto;

    min-height: 0;

    aspect-ratio: 16 / 9;
  }


  /* 案内文 */

  .hirooka-access__guide {
    padding: 22px 20px;

    border-radius: 10px;
  }


  .hirooka-access__guide-text {
    font-size: 13.5px;
    line-height: 1.8;
  }


  /* Google Map */

  .hirooka-access__map {
    height: 380px;

    border-radius: 10px;
  }


  .hirooka-access__address {
    margin-top: 14px !important;

    font-size: 13px;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-access {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-access__title {
    font-size: 23px;
  }


  .hirooka-access__guide {
    padding: 20px 17px;
  }


  .hirooka-access__guide-text {
    font-size: 13px;
  }


  .hirooka-access__map {
    height: 330px;
  }


  .hirooka-access__address {
    font-size: 12.5px;
  }

}

/* 業務内容ページ */

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   SERVICE PAGE
   導入セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-service-intro,
.hirooka-service-intro *,
.hirooka-service-intro *::before,
.hirooka-service-intro *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-service-intro {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;

  /* 事務所案内ページ最初のセクションと同程度 */
  padding: 82px 24px 78px;

  background: transparent;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側コンテンツ
========================================================== */

.hirooka-service-intro__inner {
  width: 100%;
  max-width: 720px;

  margin: 0 auto;
  padding: 0;

  text-align: center;
}


/* ==========================================================
   H2
   ご指定：25px
========================================================== */

.hirooka-service-intro__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: 25px;
  font-weight: 600;
  line-height: 1.55;

  letter-spacing: 0.025em;

  text-align: center;
}


/* ==========================================================
   Lightning側のH2装飾を解除
========================================================== */

.hirooka-service-intro__title::before,
.hirooka-service-intro__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   本文
========================================================== */

.hirooka-service-intro__text {
  width: 100%;

  margin: 24px auto 0 !important;
  padding: 0 !important;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.85;

  letter-spacing: 0.015em;

  text-align: center;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-service-intro {
    padding-top: 74px;
    padding-bottom: 72px;
  }


  .hirooka-service-intro__inner {
    max-width: 680px;
  }


  .hirooka-service-intro__title {
    font-size: 25px;
  }


  .hirooka-service-intro__text {
    font-size: 14px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-service-intro {
    padding: 60px 18px 62px;
  }


  .hirooka-service-intro__inner {
    max-width: 560px;
  }


  .hirooka-service-intro__title {
    font-size: 25px;
    line-height: 1.55;

    letter-spacing: 0.015em;
  }


  .hirooka-service-intro__text {
    margin-top: 20px !important;

    font-size: 13.5px;
    line-height: 1.85;

    text-align: left;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-service-intro {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-service-intro__title {
    font-size: 25px;
  }


  .hirooka-service-intro__text {
    font-size: 13px;
    line-height: 1.8;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   SERVICE PAGE
   業務詳細一覧
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-service-detail,
.hirooka-service-detail *,
.hirooka-service-detail *::before,
.hirooka-service-detail *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-service-detail {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 30px 24px 90px;

  background: transparent;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側コンテンツ
========================================================== */

.hirooka-service-detail__inner {
  display: flex;
  flex-direction: column;

  gap: 28px;

  width: 100%;
  max-width: 760px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   各業務カード
========================================================== */

.hirooka-service-detail__card {
  display: grid;

  grid-template-columns: 46px minmax(0, 1fr);

  align-items: start;

  column-gap: 18px;

  width: 100%;

  margin: 0;
  padding: 28px 30px 27px;

  border: 0;
  border-radius: 11px;

  background-color: #fbf8f3;
}


/* ==========================================================
   丸型アイコン背景
========================================================== */

.hirooka-service-detail__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  background-color: #e2f7f2;

  color: #00877d;

  text-align: center;
}


/* ==========================================================
   Font Awesomeアイコン中央補正
========================================================== */

.hirooka-service-detail__icon > i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  margin: 0;
  padding: 0;

  color: inherit;

  font-size: 15px;
  line-height: 1;

  text-align: center;
}


.hirooka-service-detail__icon > i::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}


/* ==========================================================
   コンテンツ
========================================================== */

.hirooka-service-detail__content {
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   各業務タイトル H2
========================================================== */

.hirooka-service-detail__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #1c1c1c !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.02em;

  text-align: left;
}


/* ==========================================================
   Lightning H2装飾解除
========================================================== */

.hirooka-service-detail__title::before,
.hirooka-service-detail__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   業務説明
========================================================== */

.hirooka-service-detail__description {
  width: 100%;

  margin: 7px 0 0 !important;
  padding: 0 !important;

  color: #555555;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.75;

  letter-spacing: 0.01em;

  text-align: left;
}


/* ==========================================================
   対応内容
========================================================== */

.hirooka-service-detail__subheading {
  width: 100%;

  margin: 18px 0 8px !important;
  padding: 0 !important;

  color: #777777;

  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;

  letter-spacing: 0.025em;

  text-align: left;
}


/* ==========================================================
   対応内容リスト
========================================================== */

.hirooka-service-detail__list {
  display: flex;
  flex-direction: column;

  gap: 6px;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


/* Lightning等のマーカー解除 */

.hirooka-service-detail__list > li::marker {
  content: "";
}


/* ==========================================================
   リスト各項目
========================================================== */

.hirooka-service-detail__list-item {
  display: grid;

  grid-template-columns: 14px minmax(0, 1fr);

  align-items: start;

  column-gap: 6px;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: #555555;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;

  letter-spacing: 0.005em;
}


/* ==========================================================
   チェックアイコン
========================================================== */

.hirooka-service-detail__list-item > i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 14px;
  height: 1.65em;

  margin: 0;
  padding: 0;

  color: #22a99c;

  font-size: 9px;
  line-height: 1;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-service-detail {
    padding-top: 28px;
    padding-bottom: 80px;
  }


  .hirooka-service-detail__inner {
    max-width: 720px;

    gap: 24px;
  }


  .hirooka-service-detail__card {
    padding: 26px 27px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-service-detail {
    padding: 20px 18px 68px;
  }


  .hirooka-service-detail__inner {
    max-width: 560px;

    gap: 18px;
  }


  .hirooka-service-detail__card {
    grid-template-columns: 40px minmax(0, 1fr);

    column-gap: 13px;

    padding: 22px 19px 23px;

    border-radius: 10px;
  }


  .hirooka-service-detail__icon {
    width: 40px;
    height: 40px;
  }


  .hirooka-service-detail__icon > i {
    width: 17px;
    height: 17px;

    font-size: 14px;
  }


  .hirooka-service-detail__title {
    font-size: 17px;
  }


  .hirooka-service-detail__description {
    margin-top: 6px !important;

    font-size: 13px;
    line-height: 1.75;
  }


  .hirooka-service-detail__subheading {
    margin-top: 16px !important;

    font-size: 11px;
  }


  .hirooka-service-detail__list {
    gap: 5px;
  }


  .hirooka-service-detail__list-item {
    font-size: 12.5px;
    line-height: 1.65;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-service-detail {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-service-detail__card {
    grid-template-columns: 38px minmax(0, 1fr);

    column-gap: 12px;

    padding: 20px 16px 21px;
  }


  .hirooka-service-detail__icon {
    width: 38px;
    height: 38px;
  }


  .hirooka-service-detail__icon > i {
    font-size: 13px;
  }


  .hirooka-service-detail__title {
    font-size: 16px;
  }


  .hirooka-service-detail__description {
    font-size: 12.5px;
  }


  .hirooka-service-detail__list-item {
    font-size: 12px;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   SERVICE PAGE
   料金表セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-price,
.hirooka-price *,
.hirooka-price *::before,
.hirooka-price *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体

   本体はLightningの中央位置を維持。
   背景色のみ疑似要素で画面幅いっぱいへ展開。
========================================================== */

.hirooka-price {
  position: relative;
  z-index: 0;
  isolation: isolate;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 82px 24px 86px;

  overflow: visible;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   幅広ワイド背景
========================================================== */

.hirooka-price::before {
  position: absolute;
  z-index: -1;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 100vw;

  margin: 0;
  padding: 0;

  background-color: #fbf9f4;

  content: "";

  transform: translateX(-50%);
}


/* ==========================================================
   内側
========================================================== */

.hirooka-price__inner {
  width: 100%;
  max-width: 760px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   ヘッダー
========================================================== */

.hirooka-price__header {
  width: 100%;

  margin: 0 0 38px;
  padding: 0;

  text-align: center;
}


/* ==========================================================
   H2 料金表
========================================================== */

.hirooka-price__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.03em;

  text-align: center;
}


/* Lightning見出し装飾解除 */

.hirooka-price__title::before,
.hirooka-price__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   導入文
========================================================== */

.hirooka-price__lead {
  max-width: 700px;

  margin: 17px auto 0 !important;
  padding: 0 !important;

  color: #555555;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.8;

  letter-spacing: 0.012em;

  text-align: center;
}


/* ==========================================================
   注意文
========================================================== */

.hirooka-price__note {
  margin: 13px 0 0 !important;
  padding: 0 !important;

  color: #777777;

  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.01em;

  text-align: center;
}


/* ==========================================================
   カード一覧
========================================================== */

.hirooka-price__sections {
  display: flex;
  flex-direction: column;

  gap: 22px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   各料金カード
========================================================== */

.hirooka-price__card {
  width: 100%;

  margin: 0;
  padding: 25px 24px 23px;

  border: 1px solid #f0efeb;
  border-radius: 11px;

  background-color: #ffffff;
}


/* ==========================================================
   H3
========================================================== */

.hirooka-price__card-title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #1d1d1d !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.02em;

  text-align: left;
}


.hirooka-price__card-title::before,
.hirooka-price__card-title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   カード説明
========================================================== */

.hirooka-price__card-description {
  width: 100%;

  margin: 12px 0 16px !important;
  padding: 0 !important;

  color: #5b5b5b;

  font-size: 12px;
  font-weight: 400;
  line-height: 1.75;

  letter-spacing: 0.008em;

  text-align: left;
}


/* ==========================================================
   テーブルスクロール
========================================================== */

.hirooka-price__table-scroll {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
}


/* ==========================================================
   テーブル共通
========================================================== */

.hirooka-price__table {
  width: 100%;

  margin: 0;

  border: 0;
  border-spacing: 0;
  border-collapse: collapse;

  color: #444444;

  font-size: 11.5px;
  line-height: 1.5;

  text-align: left;
}


/* ==========================================================
   顧問料金表
========================================================== */

.hirooka-price__table--retainer {
  min-width: 690px;
}


/* ==========================================================
   2列料金表
========================================================== */

.hirooka-price__table--two-column {
  min-width: 610px;
}


/* ==========================================================
   TH
========================================================== */

.hirooka-price__table th {
  margin: 0;
  padding: 10px 12px;

  border: 0;

  background-color: #e3f7f2;

  color: #303a38;

  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;

  text-align: left;
  vertical-align: middle;
}


/* 最初と最後を角丸 */

.hirooka-price__table th:first-child {
  border-radius: 7px 0 0 7px;
}


.hirooka-price__table th:last-child {
  border-radius: 0 7px 7px 0;
}


/* ==========================================================
   TD
========================================================== */

.hirooka-price__table td {
  margin: 0;
  padding: 10px 12px;

  border: 0;

  color: #4d4d4d;

  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;

  text-align: left;
  vertical-align: middle;
}


/* ==========================================================
   交互背景
========================================================== */

.hirooka-price__table tbody tr:nth-child(even) td {
  background-color: #fcfaf6;
}


/* ==========================================================
   強調金額
========================================================== */

.hirooka-price__strong {
  color: #262626 !important;

  font-weight: 700 !important;
}


/* ==========================================================
   表内strong
========================================================== */

.hirooka-price__table td strong {
  color: #333333;

  font-weight: 600;
}


/* ==========================================================
   注記
========================================================== */

.hirooka-price__remarks {
  width: 100%;

  margin: 17px 0 0;
  padding: 0;
}


.hirooka-price__remarks p {
  width: 100%;

  margin: 0 0 4px !important;
  padding: 0 !important;

  color: #777777;

  font-size: 9.5px;
  font-weight: 400;
  line-height: 1.65;

  letter-spacing: 0.005em;

  text-align: left;
}


.hirooka-price__remarks p:last-child {
  margin-bottom: 0 !important;
}


/* ==========================================================
   最下部注記
========================================================== */

.hirooka-price__footer-note {
  width: 100%;

  margin: 24px 0 0 !important;
  padding: 0 !important;

  color: #888888;

  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.01em;

  text-align: center;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-price {
    padding-top: 74px;
    padding-bottom: 78px;
  }


  .hirooka-price__inner {
    max-width: 720px;
  }


  .hirooka-price__title {
    font-size: 27px;
  }


  .hirooka-price__card {
    padding: 23px 21px 22px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-price {
    padding: 60px 18px 66px;
  }


  .hirooka-price__inner {
    max-width: 560px;
  }


  .hirooka-price__header {
    margin-bottom: 31px;
  }


  .hirooka-price__title {
    font-size: 25px;
  }


  .hirooka-price__lead {
    margin-top: 15px !important;

    font-size: 13px;
    line-height: 1.8;

    text-align: left;
  }


  .hirooka-price__note {
    font-size: 11px;

    text-align: left;
  }


  .hirooka-price__sections {
    gap: 17px;
  }


  .hirooka-price__card {
    padding: 21px 17px 20px;

    border-radius: 10px;
  }


  .hirooka-price__card-title {
    font-size: 17px;
  }


  .hirooka-price__card-description {
    margin-top: 10px !important;
    margin-bottom: 14px !important;

    font-size: 11.5px;
  }


  .hirooka-price__table {
    font-size: 11px;
  }


  .hirooka-price__table th {
    padding: 9px 10px;

    font-size: 10px;
  }


  .hirooka-price__table td {
    padding: 9px 10px;

    font-size: 11px;
  }


  .hirooka-price__remarks p {
    font-size: 9px;
  }


  .hirooka-price__footer-note {
    margin-top: 20px !important;

    font-size: 10px;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-price {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-price__card {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-price__title {
    font-size: 24px;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   SERVICE PAGE
   料金に関するご注意
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-price-notes,
.hirooka-price-notes *,
.hirooka-price-notes *::before,
.hirooka-price-notes *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-price-notes {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 72px 24px 80px;

  background: transparent;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側
========================================================== */

.hirooka-price-notes__inner {
  width: 100%;
  max-width: 920px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   H2
========================================================== */

.hirooka-price-notes__title {
  width: 100%;

  margin: 0 0 29px !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: 27px;
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.025em;

  text-align: center;
}


/* ==========================================================
   Lightning側のH2装飾解除
========================================================== */

.hirooka-price-notes__title::before,
.hirooka-price-notes__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   注意事項ボックス
========================================================== */

.hirooka-price-notes__box {
  width: 100%;

  margin: 0;
  padding: 31px 34px;

  border-radius: 12px;

  background-color: #fbf8f3;
}


/* ==========================================================
   リスト
========================================================== */

.hirooka-price-notes__list {
  display: flex;
  flex-direction: column;

  gap: 16px;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


.hirooka-price-notes__list > li::marker {
  content: "";
}


/* ==========================================================
   各項目
========================================================== */

.hirooka-price-notes__item {
  display: grid;

  grid-template-columns: 24px minmax(0, 1fr);

  align-items: center;

  column-gap: 11px;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   丸アイコン背景
========================================================== */

.hirooka-price-notes__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 22px;
  height: 22px;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  background-color: #dff5ef;

  color: #008b80;

  text-align: center;
}


/* ==========================================================
   Font Awesome
   中央配置補正
========================================================== */

.hirooka-price-notes__icon > i {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 11px;
  height: 11px;

  margin: 0;
  padding: 0;

  color: inherit;

  font-size: 10px;
  line-height: 1;

  text-align: center;
}


.hirooka-price-notes__icon > i::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}


/* ==========================================================
   テキスト
========================================================== */

.hirooka-price-notes__text {
  display: block;

  min-width: 0;

  margin: 0;
  padding: 0;

  color: #444444;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;

  letter-spacing: 0.01em;

  text-align: left;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-price-notes {
    padding-top: 66px;
    padding-bottom: 72px;
  }


  .hirooka-price-notes__inner {
    max-width: 820px;
  }


  .hirooka-price-notes__title {
    font-size: 26px;
  }


  .hirooka-price-notes__box {
    padding: 28px 30px;
  }


  .hirooka-price-notes__text {
    font-size: 13.5px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-price-notes {
    padding: 56px 18px 62px;
  }


  .hirooka-price-notes__inner {
    max-width: 560px;
  }


  .hirooka-price-notes__title {
    margin-bottom: 23px !important;

    font-size: 25px;
  }


  .hirooka-price-notes__box {
    padding: 23px 20px;

    border-radius: 10px;
  }


  .hirooka-price-notes__list {
    gap: 14px;
  }


  .hirooka-price-notes__item {
    grid-template-columns: 22px minmax(0, 1fr);

    align-items: start;

    column-gap: 9px;
  }


  .hirooka-price-notes__icon {
    width: 21px;
    height: 21px;

    margin-top: 1px;
  }


  .hirooka-price-notes__icon > i {
    width: 10px;
    height: 10px;

    font-size: 9px;
  }


  .hirooka-price-notes__text {
    font-size: 13px;
    line-height: 1.75;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-price-notes {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-price-notes__title {
    font-size: 24px;
  }


  .hirooka-price-notes__box {
    padding: 21px 17px;
  }


  .hirooka-price-notes__list {
    gap: 13px;
  }


  .hirooka-price-notes__text {
    font-size: 12.5px;
  }

}

/* お知らせページ */

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   NEWS PAGE
   導入セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-news-intro,
.hirooka-news-intro *,
.hirooka-news-intro *::before,
.hirooka-news-intro *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-news-intro {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;

  /* 事務所案内ページ最初のセクションと同程度 */
  padding: 82px 24px 78px;

  background: transparent;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側コンテンツ
========================================================== */

.hirooka-news-intro__inner {
  width: 100%;
  max-width: 720px;

  margin: 0 auto;
  padding: 0;

  text-align: center;
}


/* ==========================================================
   H2
   見出しサイズ：25px固定
========================================================== */

.hirooka-news-intro__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: 25px;
  font-weight: 600;
  line-height: 1.55;

  letter-spacing: 0.025em;

  text-align: center;
}


/* ==========================================================
   Lightning側のH2装飾を解除
========================================================== */

.hirooka-news-intro__title::before,
.hirooka-news-intro__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   本文
========================================================== */

.hirooka-news-intro__text {
  width: 100%;
  max-width: 690px;

  margin: 24px auto 0 !important;
  padding: 0 !important;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.85;

  letter-spacing: 0.015em;

  text-align: center;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-news-intro {
    padding-top: 74px;
    padding-bottom: 72px;
  }


  .hirooka-news-intro__inner {
    max-width: 680px;
  }


  .hirooka-news-intro__title {
    font-size: 25px;
  }


  .hirooka-news-intro__text {
    font-size: 14px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-news-intro {
    padding: 60px 18px 62px;
  }


  .hirooka-news-intro__inner {
    max-width: 560px;
  }


  .hirooka-news-intro__title {
    font-size: 25px;
    line-height: 1.55;

    letter-spacing: 0.015em;
  }


  .hirooka-news-intro__text {
    margin-top: 20px !important;

    font-size: 13.5px;
    line-height: 1.85;

    /*
     * 長文の可読性を考慮し、
     * スマートフォンでは左揃え
     */
    text-align: left;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-news-intro {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-news-intro__title {
    font-size: 25px;
  }


  .hirooka-news-intro__text {
    font-size: 13px;
    line-height: 1.8;
  }

}

/* お知らせページの表示 */

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   NEWS PAGE
   お知らせ投稿一覧
   [hirooka_news_archive]

   ・SNS共有ボタン非表示
   ・投稿画像をPCで約半分に縮小
   ・ページネーション上下位置補正
   ・ホバー時の上端切れを防止
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-news-archive,
.hirooka-news-archive *,
.hirooka-news-archive *::before,
.hirooka-news-archive *::after {
  box-sizing: border-box;
}


/* ==========================================================
   一覧全体
========================================================== */

.hirooka-news-archive {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 20px 24px 90px;

  overflow: visible;

  background: transparent;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   SNS共有ボタン非表示
========================================================== */

.hirooka-news-archive .veu_socialSet {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}


/* ==========================================================
   投稿一覧
========================================================== */

.hirooka-news-archive__list {
  display: flex;
  flex-direction: column;

  gap: 20px;

  width: 100%;
  max-width: 920px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   投稿カード
========================================================== */

.hirooka-news-archive__item {
  display: grid;

  grid-template-columns:
    165px
    minmax(0, 1fr);

  align-items: start;

  column-gap: 42px;

  width: 100%;

  margin: 0;
  padding: 29px 32px;

  border: 1px solid #eab45d;
  border-radius: 12px;

  background-color: #ffffff;

  overflow: hidden;
}


/* ==========================================================
   左側
========================================================== */

.hirooka-news-archive__meta {
  display: flex;
  flex-direction: column;

  align-items: flex-start;
  justify-content: flex-start;

  gap: 12px;

  min-width: 0;

  margin: 0;
  padding: 3px 0 0;
}


/* ==========================================================
   投稿日
========================================================== */

.hirooka-news-archive__date {
  display: block;

  margin: 0;
  padding: 0;

  color: #858585;

  font-family:
    Arial,
    "Helvetica Neue",
    sans-serif;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;

  letter-spacing: 0.01em;

  white-space: nowrap;
}


/* ==========================================================
   カテゴリー
========================================================== */

.hirooka-news-archive__category {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  max-width: 100%;

  min-height: 27px;

  margin: 0;
  padding: 5px 13px;

  border: 0;
  border-radius: 999px;

  background-color: #e3f5ef;

  color: #246559;

  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;

  letter-spacing: 0.015em;

  text-align: center;

  white-space: nowrap;
}


/* ==========================================================
   カテゴリー別カラー
========================================================== */


/* 法改正 */

.hirooka-news-archive__category--law,
.hirooka-news-archive__category--legal,
.hirooka-news-archive__category--houkaisei {
  background-color: #fff1d8;

  color: #8d5a00;
}


/* 助成金 */

.hirooka-news-archive__category--subsidy,
.hirooka-news-archive__category--grant,
.hirooka-news-archive__category--joseikin {
  background-color: #dff1e5;

  color: #315e45;
}


/* お知らせ */

.hirooka-news-archive__category--news,
.hirooka-news-archive__category--notice,
.hirooka-news-archive__category--oshirase {
  background-color: #dff6f1;

  color: #00786e;
}


/* ==========================================================
   右側
========================================================== */

.hirooka-news-archive__content {
  min-width: 0;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   投稿画像
   PCでは右側コンテンツ幅の約半分
========================================================== */

.hirooka-news-archive__media {
  width: 52%;
  max-width: 420px;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 22px;
  margin-left: 0;

  padding: 0;

  overflow: hidden;
}


/* ==========================================================
   画像共通
========================================================== */

.hirooka-news-archive__media img {
  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 9px;

  object-fit: contain;
  object-position: center center;
}


/* ==========================================================
   Gutenberg画像
========================================================== */

.hirooka-news-archive__media > figure,
.hirooka-news-archive__media .wp-block-image {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


.hirooka-news-archive__media
.wp-block-image
img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;

  object-fit: contain;
}


/* ==========================================================
   キャプション
========================================================== */

.hirooka-news-archive__media figcaption {
  width: 100%;

  margin: 7px 0 0 !important;
  padding: 0 !important;

  color: #777777;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;

  text-align: left;
}


/* ==========================================================
   Gutenbergギャラリー
========================================================== */

.hirooka-news-archive__media
.wp-block-gallery {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


.hirooka-news-archive__media
.wp-block-gallery
.wp-block-image {
  width: 100% !important;

  margin: 0 !important;
}


.hirooka-news-archive__media
.wp-block-gallery
img {
  width: 100% !important;
  height: auto !important;

  border-radius: 8px;

  object-fit: cover;
}


/* ==========================================================
   投稿タイトル H3
========================================================== */

.hirooka-news-archive__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #202020 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;

  letter-spacing: 0.015em;

  text-align: left;

  overflow-wrap: anywhere;
}


/* Lightning H3装飾解除 */

.hirooka-news-archive__title::before,
.hirooka-news-archive__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   本文
========================================================== */

.hirooka-news-archive__body {
  width: 100%;

  margin: 9px 0 0;
  padding: 0;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;

  letter-spacing: 0.01em;

  text-align: left;

  overflow-wrap: anywhere;
}


/* ==========================================================
   本文 段落
========================================================== */

.hirooka-news-archive__body p {
  width: 100%;

  margin: 0 0 14px !important;
  padding: 0 !important;

  color: inherit;

  font: inherit;

  line-height: inherit;
}


.hirooka-news-archive__body p:last-child {
  margin-bottom: 0 !important;
}


/* ==========================================================
   本文 見出し
========================================================== */

.hirooka-news-archive__body h2,
.hirooka-news-archive__body h3,
.hirooka-news-archive__body h4 {
  width: 100%;

  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #242424 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  font-weight: 600;

  text-align: left;
}


.hirooka-news-archive__body h2 {
  margin: 28px 0 14px !important;

  font-size: 20px;
  line-height: 1.55;
}


.hirooka-news-archive__body h3 {
  margin: 24px 0 12px !important;

  font-size: 18px;
  line-height: 1.55;
}


.hirooka-news-archive__body h4 {
  margin: 20px 0 10px !important;

  font-size: 16px;
  line-height: 1.55;
}


/* Lightning本文見出し装飾解除 */

.hirooka-news-archive__body h2::before,
.hirooka-news-archive__body h2::after,
.hirooka-news-archive__body h3::before,
.hirooka-news-archive__body h3::after,
.hirooka-news-archive__body h4::before,
.hirooka-news-archive__body h4::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   本文 リスト
========================================================== */

.hirooka-news-archive__body ul,
.hirooka-news-archive__body ol {
  margin: 15px 0 17px !important;

  padding-left: 1.6em !important;
}


.hirooka-news-archive__body li {
  margin: 0 0 6px !important;
  padding: 0 !important;

  line-height: 1.75;
}


/* ==========================================================
   引用
========================================================== */

.hirooka-news-archive__body blockquote {
  width: 100%;

  margin: 20px 0 !important;
  padding: 16px 19px !important;

  border: 0 !important;
  border-left: 3px solid #83cfc3 !important;

  background-color: #f3faf8 !important;

  color: #555555;
}


/* ==========================================================
   本文リンク
========================================================== */

.hirooka-news-archive__body a {
  color: #007f75;

  text-decoration: underline;

  text-underline-offset: 3px;
}


.hirooka-news-archive__body a:hover,
.hirooka-news-archive__body a:focus {
  color: #005f58;
}


/* ==========================================================
   本文テーブル
========================================================== */

.hirooka-news-archive__body table {
  width: 100%;

  margin: 20px 0 !important;

  border-spacing: 0;
  border-collapse: collapse;

  font-size: 13px;
}


.hirooka-news-archive__body th,
.hirooka-news-archive__body td {
  padding: 9px 11px;

  border: 1px solid #e4e4e4;

  vertical-align: top;
}


.hirooka-news-archive__body th {
  background-color: #eef8f5;

  font-weight: 700;
}


/* ==========================================================
   投稿なし
========================================================== */

.hirooka-news-archive__empty {
  width: 100%;
  max-width: 920px;

  margin: 0 auto !important;
  padding: 38px 24px !important;

  border: 1px solid #eab45d;
  border-radius: 12px;

  background-color: #ffffff;

  color: #666666;

  font-size: 14px;
  line-height: 1.7;

  text-align: center;
}


/* ==========================================================
   ページネーション
========================================================== */

.hirooka-news-archive__pagination {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 920px;

  margin: 42px auto 0;
  padding: 4px 0;

  overflow: visible !important;

  line-height: 1;
}


/* ==========================================================
   paginate_links() のUL
========================================================== */

.hirooka-news-archive__pagination > ul,
.hirooka-news-archive__pagination ul.page-numbers {
  position: relative;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  flex-wrap: wrap;

  gap: 8px;

  width: auto;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  list-style: none !important;

  line-height: 1 !important;
}


/* ==========================================================
   ページネーション LI
========================================================== */

.hirooka-news-archive__pagination li {
  position: relative !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 auto;

  height: 42px;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  list-style: none !important;

  line-height: 1 !important;

  vertical-align: middle !important;

  transform: none !important;
}


.hirooka-news-archive__pagination li::before,
.hirooka-news-archive__pagination li::after,
.hirooka-news-archive__pagination li::marker {
  display: none !important;

  margin: 0 !important;
  padding: 0 !important;

  content: none !important;
}


/* ==========================================================
   ページ番号 共通
========================================================== */

.hirooka-news-archive__pagination
a.page-numbers,
.hirooka-news-archive__pagination
span.page-numbers {
  position: relative !important;

  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 auto;

  min-width: 42px !important;
  width: 42px;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  border: 1px solid #d9e5e2;
  border-radius: 50%;

  background-color: #ffffff;

  color: #4f605d !important;

  font-family:
    Arial,
    "Helvetica Neue",
    sans-serif;

  font-size: 13px !important;
  font-weight: 600;
  line-height: 1 !important;

  letter-spacing: 0 !important;

  text-align: center !important;
  text-decoration: none !important;

  vertical-align: middle !important;

  transform: none !important;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


/* ==========================================================
   現在ページ
========================================================== */

.hirooka-news-archive__pagination
span.page-numbers.current {
  position: relative !important;

  top: 0 !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-width: 42px !important;
  width: 42px !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid #008d82 !important;
  border-radius: 50% !important;

  background-color: #008d82 !important;

  color: #ffffff !important;

  font-size: 13px !important;
  line-height: 1 !important;

  text-align: center !important;

  vertical-align: middle !important;

  transform: none !important;
}


/* ==========================================================
   前へ・次へ
========================================================== */

.hirooka-news-archive__pagination
a.page-numbers.prev,
.hirooka-news-archive__pagination
a.page-numbers.next {
  width: auto !important;
  min-width: 76px !important;
  height: 42px !important;

  padding-right: 16px !important;
  padding-left: 16px !important;

  border-radius: 999px;

  line-height: 1 !important;
}


/* ==========================================================
   ドット
========================================================== */

.hirooka-news-archive__pagination
span.page-numbers.dots {
  width: 28px !important;
  min-width: 28px !important;
  height: 42px !important;

  border-color: transparent !important;

  background: transparent !important;

  line-height: 1 !important;
}


/* ==========================================================
   Hover

   上へ移動させない。
   色とシャドウだけ変更。
========================================================== */

@media (hover: hover) {

  .hirooka-news-archive__pagination
  a.page-numbers:hover {
    top: 0 !important;

    border-color: #008d82;

    background-color: #008d82;

    color: #ffffff !important;

    transform: none !important;

    box-shadow:
      0 4px 12px rgba(0, 125, 115, 0.14);
  }

}


/* ==========================================================
   Focus
========================================================== */

.hirooka-news-archive__pagination
a.page-numbers:focus {
  top: 0 !important;

  transform: none !important;
}


.hirooka-news-archive__pagination
a.page-numbers:focus-visible {
  top: 0 !important;

  outline: 3px solid rgba(0, 141, 130, 0.22);

  outline-offset: 3px;

  transform: none !important;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-news-archive {
    padding-top: 18px;
    padding-right: 22px;
    padding-bottom: 80px;
    padding-left: 22px;
  }


  .hirooka-news-archive__list {
    max-width: 820px;

    gap: 18px;
  }


  .hirooka-news-archive__item {
    grid-template-columns:
      145px
      minmax(0, 1fr);

    column-gap: 30px;

    padding: 26px 27px;
  }


  .hirooka-news-archive__media {
    width: 60%;
    max-width: 390px;

    margin-bottom: 20px;
  }


  .hirooka-news-archive__title {
    font-size: 17.5px;
  }


  .hirooka-news-archive__body {
    font-size: 13.5px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-news-archive {
    padding-top: 14px;
    padding-right: 18px;
    padding-bottom: 68px;
    padding-left: 18px;
  }


  .hirooka-news-archive__list {
    max-width: 560px;

    gap: 14px;
  }


  /* 投稿カード */

  .hirooka-news-archive__item {
    display: block;

    width: 100%;

    padding: 20px 19px 21px;

    border-radius: 10px;
  }


  /* 日付＋カテゴリー */

  .hirooka-news-archive__meta {
    flex-direction: row;

    align-items: center;
    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 9px;

    width: 100%;

    margin: 0 0 17px;

    padding: 0;
  }


  .hirooka-news-archive__date {
    font-size: 12px;
  }


  .hirooka-news-archive__category {
    min-height: 25px;

    padding: 4px 10px;

    font-size: 11px;
  }


  /* 画像 */

  .hirooka-news-archive__media {
    width: 100%;
    max-width: none;

    margin-bottom: 18px;
  }


  .hirooka-news-archive__media img {
    width: 100%;

    border-radius: 8px;
  }


  .hirooka-news-archive__media
  .wp-block-gallery {
    gap: 7px !important;
  }


  /* タイトル */

  .hirooka-news-archive__title {
    font-size: 16px;
    line-height: 1.6;
  }


  /* 本文 */

  .hirooka-news-archive__body {
    margin-top: 8px;

    font-size: 13px;
    line-height: 1.8;
  }


  .hirooka-news-archive__body p {
    margin-bottom: 12px !important;
  }


  .hirooka-news-archive__body h2 {
    margin-top: 24px !important;

    font-size: 18px;
  }


  .hirooka-news-archive__body h3 {
    margin-top: 21px !important;

    font-size: 16.5px;
  }


  .hirooka-news-archive__body h4 {
    font-size: 15px;
  }


  /* ========================================================
     ページネーション
  ======================================================== */

  .hirooka-news-archive__pagination {
    margin-top: 32px;

    padding-top: 4px;
    padding-bottom: 4px;
  }


  .hirooka-news-archive__pagination > ul,
  .hirooka-news-archive__pagination ul.page-numbers {
    gap: 6px;
  }


  .hirooka-news-archive__pagination li {
    height: 38px;
  }


  .hirooka-news-archive__pagination
  a.page-numbers,
  .hirooka-news-archive__pagination
  span.page-numbers {
    width: 38px;
    min-width: 38px !important;
    height: 38px !important;

    font-size: 12px !important;

    line-height: 1 !important;
  }


  .hirooka-news-archive__pagination
  span.page-numbers.current {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;

    font-size: 12px !important;

    line-height: 1 !important;
  }


  .hirooka-news-archive__pagination
  a.page-numbers.prev,
  .hirooka-news-archive__pagination
  a.page-numbers.next {
    width: auto !important;
    min-width: 68px !important;
    height: 38px !important;

    padding-right: 12px !important;
    padding-left: 12px !important;
  }


  .hirooka-news-archive__pagination
  span.page-numbers.dots {
    height: 38px !important;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-news-archive {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-news-archive__item {
    padding: 18px 16px 19px;
  }


  .hirooka-news-archive__meta {
    margin-bottom: 15px;
  }


  .hirooka-news-archive__title {
    font-size: 15.5px;
  }


  .hirooka-news-archive__body {
    font-size: 12.5px;
  }


  /* ギャラリー1列 */

  .hirooka-news-archive__media
  .wp-block-gallery {
    grid-template-columns: 1fr;
  }


  /* ページ送り */

  .hirooka-news-archive__pagination li {
    height: 36px;
  }


  .hirooka-news-archive__pagination
  a.page-numbers,
  .hirooka-news-archive__pagination
  span.page-numbers {
    width: 36px;
    min-width: 36px !important;
    height: 36px !important;

    font-size: 11.5px !important;
  }


  .hirooka-news-archive__pagination
  span.page-numbers.current {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;

    font-size: 11.5px !important;
  }


  .hirooka-news-archive__pagination
  a.page-numbers.prev,
  .hirooka-news-archive__pagination
  a.page-numbers.next {
    width: auto !important;
    min-width: 64px !important;
    height: 36px !important;
  }


  .hirooka-news-archive__pagination
  span.page-numbers.dots {
    height: 36px !important;
  }

}


/* ==========================================================
   Touch Device
========================================================== */

@media (hover: none) {

  .hirooka-news-archive__pagination
  a.page-numbers:hover {
    top: 0 !important;

    border-color: #d9e5e2;

    background-color: #ffffff;

    color: #4f605d !important;

    box-shadow: none;

    transform: none !important;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-news-archive__pagination
  a.page-numbers {
    transition: none;
  }

}

/* よくある質問ページ */

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   FAQ PAGE
   導入セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-faq-intro,
.hirooka-faq-intro *,
.hirooka-faq-intro *::before,
.hirooka-faq-intro *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-faq-intro {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;

  /*
   * 事務所案内ページ最初の
   * 導入セクションと同程度
   */
  padding: 82px 24px 78px;

  background: transparent;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側コンテンツ
========================================================== */

.hirooka-faq-intro__inner {
  width: 100%;
  max-width: 720px;

  margin: 0 auto;
  padding: 0;

  text-align: center;
}


/* ==========================================================
   H2
   見出しサイズ：25px固定
========================================================== */

.hirooka-faq-intro__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: 25px;
  font-weight: 600;
  line-height: 1.55;

  letter-spacing: 0.025em;

  text-align: center;
}


/* ==========================================================
   Lightning側のH2装飾を解除
========================================================== */

.hirooka-faq-intro__title::before,
.hirooka-faq-intro__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   説明文
========================================================== */

.hirooka-faq-intro__text {
  width: 100%;
  max-width: 690px;

  margin: 24px auto 0 !important;
  padding: 0 !important;

  color: #555555;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.85;

  letter-spacing: 0.015em;

  text-align: center;
}


/* ==========================================================
   Gutenberg / Lightning
   不要な上下余白を防止
========================================================== */

.hirooka-faq-intro__inner > :first-child {
  margin-top: 0 !important;
}


.hirooka-faq-intro__inner > :last-child {
  margin-bottom: 0 !important;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-faq-intro {
    padding-top: 74px;
    padding-right: 22px;
    padding-bottom: 72px;
    padding-left: 22px;
  }


  .hirooka-faq-intro__inner {
    max-width: 680px;
  }


  .hirooka-faq-intro__title {
    font-size: 25px;
  }


  .hirooka-faq-intro__text {
    font-size: 14px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-faq-intro {
    padding-top: 60px;
    padding-right: 18px;
    padding-bottom: 62px;
    padding-left: 18px;
  }


  .hirooka-faq-intro__inner {
    max-width: 560px;
  }


  .hirooka-faq-intro__title {
    font-size: 25px;
    line-height: 1.55;

    letter-spacing: 0.015em;
  }


  .hirooka-faq-intro__text {
    margin-top: 20px !important;

    font-size: 13.5px;
    line-height: 1.85;

    /*
     * 長文の読みやすさを優先して
     * スマートフォンでは左揃え
     */
    text-align: left;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-faq-intro {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-faq-intro__title {
    font-size: 25px;
  }


  .hirooka-faq-intro__text {
    font-size: 13px;
    line-height: 1.8;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   FAQ PAGE
   FAQ一覧セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-faq-list-section,
.hirooka-faq-list-section *,
.hirooka-faq-list-section *::before,
.hirooka-faq-list-section *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-faq-list-section {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 26px 24px 90px;

  background: transparent;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側
========================================================== */

.hirooka-faq-list-section__inner {
  width: 100%;
  max-width: 780px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   FAQ一覧
========================================================== */

.hirooka-faq-list-section__list {
  display: flex;
  flex-direction: column;

  gap: 12px;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   各FAQ
========================================================== */

.hirooka-faq-list-section__item {
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 1px solid #edf0ef;
  border-radius: 11px;

  background-color: #ffffff;
}


/* ==========================================================
   質問
========================================================== */

.hirooka-faq-list-section__question {
  display: grid;

  grid-template-columns:
    24px
    minmax(0, 1fr)
    30px;

  align-items: center;

  column-gap: 10px;

  width: 100%;
  min-height: 68px;

  margin: 0;
  padding: 16px 19px;

  list-style: none;

  cursor: pointer;

  background: transparent;

  color: #202020;

  user-select: none;

  transition:
    background-color 0.2s ease;
}


/* ==========================================================
   details デフォルトマーカー削除
========================================================== */

.hirooka-faq-list-section__question::-webkit-details-marker {
  display: none;
}


.hirooka-faq-list-section__question::marker {
  content: "";
}


/* ==========================================================
   Qマーク
========================================================== */

.hirooka-faq-list-section__qmark {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 22px;
  height: 22px;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  background-color: #e0f7f2;

  color: #007d73;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  text-align: center;
}


/* ==========================================================
   質問文
========================================================== */

.hirooka-faq-list-section__question-text {
  min-width: 0;

  margin: 0;
  padding: 0;

  color: #202020;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;

  letter-spacing: 0.012em;

  text-align: left;
}


/* ==========================================================
   ＋ / ×
========================================================== */

.hirooka-faq-list-section__toggle {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  justify-self: end;

  width: 28px;
  height: 28px;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  background-color: #f0f7f5;
}


/* 横線 */

.hirooka-faq-list-section__toggle::before {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 10px;
  height: 1.5px;

  margin: 0;
  padding: 0;

  background-color: #536963;

  content: "";

  transform: translate(-50%, -50%);

  transition:
    transform 0.2s ease;
}


/* 縦線 */

.hirooka-faq-list-section__toggle::after {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 1.5px;
  height: 10px;

  margin: 0;
  padding: 0;

  background-color: #536963;

  content: "";

  transform: translate(-50%, -50%);

  transition:
    transform 0.2s ease;
}


/* ==========================================================
   開いた時は＋ → ×
========================================================== */

.hirooka-faq-list-section__item[open]
.hirooka-faq-list-section__toggle::before {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


.hirooka-faq-list-section__item[open]
.hirooka-faq-list-section__toggle::after {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


/* ==========================================================
   開いている質問
========================================================== */

.hirooka-faq-list-section__item[open]
.hirooka-faq-list-section__question {
  padding-bottom: 15px;
}


/* ==========================================================
   回答
========================================================== */

.hirooka-faq-list-section__answer {
  display: grid;

  grid-template-columns:
    24px
    minmax(0, 1fr);

  align-items: start;

  column-gap: 10px;

  width: calc(100% - 38px);

  margin: 0 19px;
  padding: 18px 0 21px;

  border-top: 1px solid #edf0ef;
}


/* ==========================================================
   Aマーク
========================================================== */

.hirooka-faq-list-section__amark {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 22px;
  height: 22px;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  background-color: #fff0d5;

  color: #a26700;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  text-align: center;
}


/* ==========================================================
   回答本文
========================================================== */

.hirooka-faq-list-section__answer-text {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: #555555;

  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.8;

  letter-spacing: 0.01em;

  text-align: left;
}


/* ==========================================================
   Hover
========================================================== */

@media (hover: hover) {

  .hirooka-faq-list-section__question:hover {
    background-color: #fcfdfd;
  }

}


/* ==========================================================
   Focus
========================================================== */

.hirooka-faq-list-section__question:focus {
  outline: none;
}


.hirooka-faq-list-section__question:focus-visible {
  outline: 2px solid #7bcfc3;

  outline-offset: -2px;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-faq-list-section {
    padding-top: 22px;
    padding-bottom: 80px;
  }


  .hirooka-faq-list-section__inner {
    max-width: 720px;
  }


  .hirooka-faq-list-section__question {
    min-height: 65px;
  }


  .hirooka-faq-list-section__question-text {
    font-size: 15.5px;
  }


  .hirooka-faq-list-section__answer-text {
    font-size: 13px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-faq-list-section {
    padding: 18px 18px 68px;
  }


  .hirooka-faq-list-section__inner {
    max-width: 560px;
  }


  .hirooka-faq-list-section__list {
    gap: 10px;
  }


  .hirooka-faq-list-section__item {
    border-radius: 10px;
  }


  /* ========================================================
     質問
  ======================================================== */

  .hirooka-faq-list-section__question {
    grid-template-columns:
      22px
      minmax(0, 1fr)
      28px;

    column-gap: 8px;

    min-height: 62px;

    padding: 14px 14px;
  }


  /* ========================================================
     Q / A
  ======================================================== */

  .hirooka-faq-list-section__qmark,
  .hirooka-faq-list-section__amark {
    width: 21px;
    height: 21px;

    font-size: 11.5px;
  }


  /* ========================================================
     質問文
  ======================================================== */

  .hirooka-faq-list-section__question-text {
    font-size: 14.5px;
    line-height: 1.6;
  }


  /* ========================================================
     ＋
  ======================================================== */

  .hirooka-faq-list-section__toggle {
    width: 27px;
    height: 27px;
  }


  /* ========================================================
     回答
  ======================================================== */

  .hirooka-faq-list-section__answer {
    grid-template-columns:
      22px
      minmax(0, 1fr);

    column-gap: 8px;

    width: calc(100% - 28px);

    margin-right: 14px;
    margin-left: 14px;

    padding-top: 16px;
    padding-bottom: 18px;
  }


  .hirooka-faq-list-section__answer-text {
    font-size: 13px;
    line-height: 1.8;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-faq-list-section {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-faq-list-section__question {
    grid-template-columns:
      21px
      minmax(0, 1fr)
      27px;

    column-gap: 7px;

    padding-right: 12px;
    padding-left: 12px;
  }


  .hirooka-faq-list-section__question-text {
    font-size: 14px;
  }


  .hirooka-faq-list-section__answer {
    grid-template-columns:
      21px
      minmax(0, 1fr);

    column-gap: 7px;

    width: calc(100% - 24px);

    margin-right: 12px;
    margin-left: 12px;
  }


  .hirooka-faq-list-section__answer-text {
    font-size: 12.5px;
  }

}


/* ==========================================================
   Touch Device
========================================================== */

@media (hover: none) {

  .hirooka-faq-list-section__question:hover {
    background-color: transparent;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-faq-list-section__toggle::before,
  .hirooka-faq-list-section__toggle::after,
  .hirooka-faq-list-section__question {
    transition: none;
  }

}

/* お問い合わせページ */

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   CONTACT PAGE
   お問い合わせ導入セクション
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-contact-intro,
.hirooka-contact-intro *,
.hirooka-contact-intro *::before,
.hirooka-contact-intro *::after {
  box-sizing: border-box;
}


/* ==========================================================
   セクション全体
   背景色なし
========================================================== */

.hirooka-contact-intro {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;

  /*
   * 事務所案内ページ最初のセクションと同程度
   */
  padding: 82px 24px 78px;

  background: transparent;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   内側
========================================================== */

.hirooka-contact-intro__inner {
  width: 100%;
  max-width: 820px;

  margin: 0 auto;
  padding: 0;
}


/* ==========================================================
   導入部分
========================================================== */

.hirooka-contact-intro__header {
  width: 100%;
  max-width: 720px;

  margin: 0 auto;
  padding: 0;

  text-align: center;
}


/* ==========================================================
   H2
   25px固定
========================================================== */

.hirooka-contact-intro__title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: 25px;
  font-weight: 600;
  line-height: 1.55;

  letter-spacing: 0.025em;

  text-align: center;
}


/* ==========================================================
   Lightning側H2装飾解除
========================================================== */

.hirooka-contact-intro__title::before,
.hirooka-contact-intro__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   導入本文
========================================================== */

.hirooka-contact-intro__lead {
  width: 100%;
  max-width: 690px;

  margin: 24px auto 0 !important;
  padding: 0 !important;

  color: #555555;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;

  letter-spacing: 0.012em;

  text-align: center;
}


/* ==========================================================
   電話お問い合わせカード
========================================================== */

.hirooka-contact-intro__phone-box {
  width: 100%;
  max-width: 770px;

  margin: 60px auto 0;
  padding: 43px 32px 40px;

  border-radius: 11px;

  background-color: #00352f;

  color: #ffffff;

  text-align: center;
}


/* ==========================================================
   H3
========================================================== */

.hirooka-contact-intro__phone-title {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #ffffff !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.025em;

  text-align: center;
}


/* ==========================================================
   Lightning側H3装飾解除
========================================================== */

.hirooka-contact-intro__phone-title::before,
.hirooka-contact-intro__phone-title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   電話説明文
========================================================== */

.hirooka-contact-intro__phone-description {
  width: 100%;

  margin: 10px auto 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.68);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;

  letter-spacing: 0.01em;

  text-align: center;
}


/* ==========================================================
   電話ボタン
========================================================== */

.hirooka-contact-intro__phone-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  min-width: 328px;
  min-height: 64px;

  margin: 24px auto 0;
  padding: 12px 30px;

  border: 2px solid #c98200;
  border-radius: 999px;

  background-color: #c98200;

  color: #ffffff !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;

  letter-spacing: 0.015em;

  text-align: center;
  text-decoration: none !important;

  white-space: nowrap;

  box-shadow: none;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.hirooka-contact-intro__phone-button:visited {
  color: #ffffff !important;
}


.hirooka-contact-intro__phone-button:hover,
.hirooka-contact-intro__phone-button:focus {
  border-color: #ad7000;

  background-color: #ad7000;

  color: #ffffff !important;

  text-decoration: none !important;

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.14);
}


.hirooka-contact-intro__phone-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.75);

  outline-offset: 4px;
}


/* ==========================================================
   Font Awesome 電話アイコン
========================================================== */

.hirooka-contact-intro__phone-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 20px;
  height: 20px;

  margin: 0;
  padding: 0;

  color: currentColor;

  font-size: 17px;
  line-height: 1;

  text-align: center;
}


.hirooka-contact-intro__phone-icon::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}


/* ==========================================================
   電話番号
========================================================== */

.hirooka-contact-intro__phone-number {
  display: block;

  margin: 0;
  padding: 0;

  color: inherit;

  line-height: 1.3;
}


/* ==========================================================
   FAX
========================================================== */

.hirooka-contact-intro__fax {
  width: 100%;

  margin: 17px 0 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.48);

  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;

  letter-spacing: 0.015em;

  text-align: center;
}


/* ==========================================================
   Gutenberg / Lightning
   不要な上下余白を防止
========================================================== */

.hirooka-contact-intro__header > :first-child,
.hirooka-contact-intro__phone-box > :first-child {
  margin-top: 0 !important;
}


.hirooka-contact-intro__header > :last-child,
.hirooka-contact-intro__phone-box > :last-child {
  margin-bottom: 0 !important;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-contact-intro {
    padding-top: 74px;
    padding-right: 22px;
    padding-bottom: 72px;
    padding-left: 22px;
  }


  .hirooka-contact-intro__inner {
    max-width: 760px;
  }


  .hirooka-contact-intro__title {
    font-size: 25px;
  }


  .hirooka-contact-intro__lead {
    max-width: 660px;

    font-size: 14px;
  }


  .hirooka-contact-intro__phone-box {
    max-width: 720px;

    margin-top: 52px;

    padding: 39px 28px 37px;
  }


  .hirooka-contact-intro__phone-title {
    font-size: 23px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-contact-intro {
    padding-top: 60px;
    padding-right: 18px;
    padding-bottom: 62px;
    padding-left: 18px;
  }


  .hirooka-contact-intro__inner {
    max-width: 560px;
  }


  /* ========================================================
     H2
  ======================================================== */

  .hirooka-contact-intro__title {
    font-size: 25px;
    line-height: 1.55;

    letter-spacing: 0.015em;
  }


  /* ========================================================
     導入本文
  ======================================================== */

  .hirooka-contact-intro__lead {
    margin-top: 20px !important;

    font-size: 13.5px;
    line-height: 1.85;

    text-align: left;
  }


  /* ========================================================
     電話カード
  ======================================================== */

  .hirooka-contact-intro__phone-box {
    margin-top: 42px;

    padding: 31px 20px 29px;

    border-radius: 10px;
  }


  .hirooka-contact-intro__phone-title {
    font-size: 21px;
  }


  .hirooka-contact-intro__phone-description {
    margin-top: 9px !important;

    font-size: 12.5px;
    line-height: 1.75;
  }


  /* ========================================================
     電話ボタン
  ======================================================== */

  .hirooka-contact-intro__phone-button {
    width: min(100%, 330px);

    min-width: 0;
    min-height: 57px;

    margin-top: 22px;

    padding: 11px 20px;

    font-size: 19px;
  }


  .hirooka-contact-intro__phone-icon {
    width: 18px;
    height: 18px;

    font-size: 15px;
  }


  .hirooka-contact-intro__fax {
    margin-top: 15px !important;

    font-size: 12px;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-contact-intro {
    padding-right: 14px;
    padding-left: 14px;
  }


  .hirooka-contact-intro__title {
    font-size: 25px;
  }


  .hirooka-contact-intro__lead {
    font-size: 13px;
    line-height: 1.8;
  }


  .hirooka-contact-intro__phone-box {
    padding-right: 16px;
    padding-left: 16px;
  }


  .hirooka-contact-intro__phone-title {
    font-size: 20px;
  }


  .hirooka-contact-intro__phone-description br {
    display: none;
  }


  .hirooka-contact-intro__phone-button {
    width: 100%;

    font-size: 17px;
  }

}


/* ==========================================================
   Touch Device
========================================================== */

@media (hover: none) {

  .hirooka-contact-intro__phone-button:hover {
    border-color: #c98200;

    background-color: #c98200;

    color: #ffffff !important;

    box-shadow: none;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-contact-intro__phone-button {
    transition: none;
  }

}

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   CONTACT PAGE
   Contact Form 7
========================================================== */


/* ==========================================================
   Box sizing
========================================================== */

.hirooka-contact-form,
.hirooka-contact-form *,
.hirooka-contact-form *::before,
.hirooka-contact-form *::after {
  box-sizing: border-box;
}


/* ==========================================================
   フォームカード

   セクション外側には背景色を設定せず、
   フォーム本体のみ淡い背景色。
========================================================== */

.hirooka-contact-form {
  width: 100%;
  max-width: 740px;

  margin: 0 auto 82px;
  padding: 34px 32px 31px;

  border-radius: 12px;

  background-color: #fbf8f3;

  color: #333333;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
}


/* ==========================================================
   H2
========================================================== */

.hirooka-contact-form__title {
  width: 100%;

  margin: 0 0 26px !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #181818 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.02em;

  text-align: left;
}


/* Lightning見出し装飾解除 */

.hirooka-contact-form__title::before,
.hirooka-contact-form__title::after {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  content: none !important;
}


/* ==========================================================
   各フィールド
========================================================== */

.hirooka-contact-form__field {
  width: 100%;

  margin: 0 0 18px;
  padding: 0;
}


/* ==========================================================
   Contact Form 7 が自動生成する余白への対策
========================================================== */

.hirooka-contact-form__field > p {
  margin: 0 !important;
  padding: 0 !important;
}


/* CF7がフィールド直下に生成する改行を無効化 */

.hirooka-contact-form__field > br,
.hirooka-contact-form__field > p > br {
  display: none !important;
}


/* ==========================================================
   ラベル

   項目名と「*」を同じ行に固定し、
   ベースラインも揃える
========================================================== */

.hirooka-contact-form__label {
  display: flex !important;

  align-items: baseline !important;
  justify-content: flex-start;

  flex-wrap: nowrap;

  gap: 4px;

  width: 100%;

  margin: 0 0 4px !important;
  padding: 0 !important;

  color: #333333;

  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;

  letter-spacing: 0.005em;

  text-align: left;
}


/*
 * CF7やWordPressによって
 * label内部にbrが生成された場合も改行させない
 */

.hirooka-contact-form__label br {
  display: none !important;
}


/* ==========================================================
   通常項目の必須マーク

   お名前 *
   メールアドレス *
   ご相談内容 *

   のように同じベースラインへ配置
========================================================== */

.hirooka-contact-form__label
.hirooka-contact-form__required {
  position: static !important;

  display: inline-block !important;

  flex: 0 0 auto;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #b7790b;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0;

  vertical-align: baseline;

  transform: none !important;
}


/* ==========================================================
   CF7 form-control wrapper
========================================================== */

.hirooka-contact-form
.wpcf7-form-control-wrap {
  display: block;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   input / textarea
========================================================== */

.hirooka-contact-form__control {
  display: block;

  width: 100% !important;

  margin: 0 !important;
  padding: 12px 14px !important;

  border: 1px solid #edf0ef !important;
  border-radius: 7px !important;

  outline: none;

  background-color: #ffffff !important;

  color: #333333 !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif !important;

  font-size: 13.5px !important;
  font-weight: 400;
  line-height: 1.6 !important;

  box-shadow: none !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}


/* input高さ */

.hirooka-contact-form input.hirooka-contact-form__control {
  min-height: 44px;
}


/* placeholder */

.hirooka-contact-form__control::placeholder {
  color: #999999;

  opacity: 1;
}


/* Focus */

.hirooka-contact-form__control:focus {
  border-color: #74bdb5 !important;

  background-color: #ffffff !important;

  box-shadow:
    0 0 0 3px rgba(116, 189, 181, 0.13) !important;
}


/* ==========================================================
   textarea
========================================================== */

.hirooka-contact-form__textarea {
  min-height: 120px !important;

  resize: vertical;
}


/* ==========================================================
   500文字
========================================================== */

.hirooka-contact-form__help {
  width: 100%;

  margin: 6px 0 0 !important;
  padding: 0 !important;

  color: #858585;

  font-size: 11.5px;
  font-weight: 400;
  line-height: 2.5;

  text-align: left;
}


/* ==========================================================
   個人情報同意
========================================================== */

.hirooka-contact-form__agreement {
  width: 100%;

  margin: 0 0 19px;
  padding: 0;
}


/* CF7 acceptance */

.hirooka-contact-form
.wpcf7-acceptance {
  display: block;
}


.hirooka-contact-form
.wpcf7-acceptance .wpcf7-list-item {
  display: block;

  margin: 0 !important;
  padding: 0 !important;
}


.hirooka-contact-form
.wpcf7-acceptance label {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin: 0;
  padding: 10px 0 0;

  cursor: pointer;
}


/* ==========================================================
   チェックボックス
========================================================== */

.hirooka-contact-form
.wpcf7-acceptance input[type="checkbox"] {
  flex: 0 0 auto;

  width: 16px;
  height: 16px;

  margin: 0 !important;
  padding: 0 !important;

  accent-color: #008b80;

  cursor: pointer;
}


/* ==========================================================
   同意文
========================================================== */

.hirooka-contact-form__agreement-text {
  color: #444444;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}


/* ==========================================================
   同意文内の必須マーク

   「個人情報の取り扱いに同意する *」
   の表示は通常のインライン配置
========================================================== */

.hirooka-contact-form__agreement-text
.hirooka-contact-form__required {
  position: static !important;

  display: inline !important;

  width: auto !important;
  height: auto !important;

  margin: 0 0 0 3px !important;
  padding: 0 !important;

  color: #b7790b;

  font-size: 12px;
  font-weight: 700;
  line-height: inherit;

  vertical-align: baseline;

  transform: none !important;
}


/* ==========================================================
   プライバシーポリシー
========================================================== */

.hirooka-contact-form__privacy {
  width: 100%;

  margin: 0 0 20px;
  padding: 0;

  overflow: hidden;

  border: 1px solid #edf0ef;
  border-radius: 8px;

  background-color: #ffffff;
}


/* ==========================================================
   プライバシーポリシータイトル H3
========================================================== */

.hirooka-contact-form__privacy-title {
  width: 100%;

  margin: 0 !important;
  padding: 14px 16px !important;

  border: 0 !important;
  border-bottom: 1px solid #edf0ef !important;

  background: #ffffff !important;

  color: #282828 !important;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.015em;

  text-align: left;
}


.hirooka-contact-form__privacy-title::before,
.hirooka-contact-form__privacy-title::after {
  display: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  content: none !important;
}


/* ==========================================================
   スクロール領域
========================================================== */

.hirooka-contact-form__privacy-scroll {
  width: 100%;
  height: 180px;

  margin: 0;
  padding: 17px 16px 20px;

  overflow-x: hidden;
  overflow-y: auto;

  background-color: #ffffff;

  scrollbar-width: thin;
  scrollbar-color: #b9c7c4 #f1f3f2;
}


/* WebKit scrollbar */

.hirooka-contact-form__privacy-scroll::-webkit-scrollbar {
  width: 7px;
}


.hirooka-contact-form__privacy-scroll::-webkit-scrollbar-track {
  background-color: #f1f3f2;
}


.hirooka-contact-form__privacy-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background-color: #b9c7c4;
}


/* ==========================================================
   プライバシー各項目
========================================================== */

.hirooka-contact-form__privacy-section {
  width: 100%;

  margin: 0 0 22px;
  padding: 0;
}


.hirooka-contact-form__privacy-section:last-child {
  margin-bottom: 0;
}


/* ==========================================================
   H4
========================================================== */

.hirooka-contact-form__privacy-heading {
  width: 100%;

  margin: 0 0 7px !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #333333 !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;

  font-size: 12.5px;
  font-weight: 700;
  line-height: 0.8;

  text-align: left;
}


.hirooka-contact-form__privacy-heading::before,
.hirooka-contact-form__privacy-heading::after {
  display: none !important;

  margin: 0 !important;
  padding: 0 !important;

  content: none !important;
}


/* ==========================================================
   プライバシー本文
========================================================== */

.hirooka-contact-form__privacy-section p {
  width: 100%;

  margin: 0 0 9px !important;
  padding: 0 !important;

  color: #555555;

  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.75;

  letter-spacing: 0.005em;

  text-align: left;
}


.hirooka-contact-form__privacy-section p:last-child {
  margin-bottom: 0 !important;
}


/* ==========================================================
   プライバシーリスト
========================================================== */

.hirooka-contact-form__privacy-section ul {
  margin: 8px 0 10px !important;

  padding: 0 0 0 1.4em !important;
}


.hirooka-contact-form__privacy-section li {
  margin: 0 0 4px !important;
  padding: 0 !important;

  color: #555555;

  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.7;
}


/* ==========================================================
   送信エリア
========================================================== */

.hirooka-contact-form__submit-wrap {
  position: relative;

  width: 100%;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   送信ボタン
========================================================== */

.hirooka-contact-form__submit {
  display: flex !important;

  align-items: center;
  justify-content: center;

  width: 100% !important;
  min-height: 50px;

  margin: 0 !important;
  padding: 12px 20px !important;

  border: 0 !important;
  border-radius: 999px !important;

  background-color: #79bbb4 !important;

  color: #ffffff !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;

  letter-spacing: 0.03em;

  text-align: center;

  box-shadow: none !important;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}


.hirooka-contact-form__submit:hover,
.hirooka-contact-form__submit:focus {
  background-color: #559f97 !important;

  color: #ffffff !important;

  box-shadow:
    0 5px 14px rgba(52, 126, 118, 0.15) !important;
}


.hirooka-contact-form__submit:focus-visible {
  outline: 3px solid rgba(65, 143, 135, 0.25);

  outline-offset: 3px;
}


/* ==========================================================
   CF7 スピナー
========================================================== */

.hirooka-contact-form
.wpcf7-spinner {
  position: absolute;

  top: 50%;
  right: 16px;

  margin: 0 !important;

  transform: translateY(-50%);
}


/* ==========================================================
   CF7 エラー表示
========================================================== */

.hirooka-contact-form
.wpcf7-not-valid-tip {
  display: block;

  margin: 6px 0 0 !important;

  color: #b04444;

  font-size: 11.5px;
  line-height: 1.5;
}


/* エラー時 */

.hirooka-contact-form
.wpcf7-not-valid {
  border-color: #dca3a3 !important;
}


/* ==========================================================
   CF7 送信結果メッセージ
========================================================== */

.hirooka-contact-form
.wpcf7-response-output {
  width: 100%;

  margin: 18px 0 0 !important;
  padding: 12px 14px !important;

  border: 1px solid #79bbb4 !important;
  border-radius: 7px;

  background-color: #ffffff;

  color: #444444;

  font-size: 12.5px;
  line-height: 1.7;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 991px) {

  .hirooka-contact-form {
    max-width: 700px;

    margin-bottom: 72px;

    padding: 31px 28px 29px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  .hirooka-contact-form {
    width: calc(100% - 36px);
    max-width: 560px;

    margin-right: auto;
    margin-bottom: 62px;
    margin-left: auto;

    padding: 27px 20px 25px;

    border-radius: 10px;
  }


  .hirooka-contact-form__title {
    margin-bottom: 23px !important;

    font-size: 20px;
  }


  /* 項目間を少し詰める */

  .hirooka-contact-form__field {
    margin-bottom: 16px;
  }


  /*
   * スマホでも項目名と必須マークを
   * 同一行・同一ベースラインに維持
   */

  .hirooka-contact-form__label {
    gap: 3px;

    margin-bottom: 4px !important;

    font-size: 13px;
    line-height: 1.4;
  }


  .hirooka-contact-form__label
  .hirooka-contact-form__required {
    font-size: 11.5px;
  }


  .hirooka-contact-form__control {
    min-height: 43px;

    padding: 11px 12px !important;

    font-size: 13px !important;
  }


  .hirooka-contact-form__textarea {
    min-height: 120px !important;
  }


  .hirooka-contact-form__privacy-scroll {
    height: 210px;

    padding: 15px 14px 18px;
  }


  .hirooka-contact-form__privacy-title {
    padding: 13px 14px !important;
  }


  .hirooka-contact-form__submit {
    min-height: 49px;

    font-size: 13.5px !important;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .hirooka-contact-form {
    width: calc(100% - 28px);

    padding-right: 16px;
    padding-left: 16px;
  }


  .hirooka-contact-form__title {
    font-size: 19px;
  }


  .hirooka-contact-form__field {
    margin-bottom: 15px;
  }


  .hirooka-contact-form__label {
    margin-bottom: 3px !important;

    font-size: 12.5px;
  }


  .hirooka-contact-form__label
  .hirooka-contact-form__required {
    font-size: 11px;
  }


  .hirooka-contact-form__agreement-text {
    font-size: 12.5px;
  }


  .hirooka-contact-form__privacy-scroll {
    height: 230px;
  }

}


/* ==========================================================
   Touch Device
========================================================== */

@media (hover: none) {

  .hirooka-contact-form__submit:hover {
    background-color: #79bbb4 !important;

    box-shadow: none !important;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-contact-form__control,
  .hirooka-contact-form__submit {
    transition: none;
  }

}

/* Cloudflare Turnstileのみ中央配置 */
.cf-turnstile {
  display: flex !important;
  justify-content: center !important;

  width: 100% !important;
  margin: 24px auto !important;
  padding: 0 !important;

  float: none !important;
  clear: both !important;
}

/* Cloudflareが生成する表示部分 */
.cf-turnstile > div,
.cf-turnstile iframe {
  display: block !important;

  margin-right: auto !important;
  margin-left: auto !important;
}

/* フッターメニュー */

/* ==========================================================
   廣岡俊孝社会保険労務士事務所
   FOOTER
   Lightning G3
   Widget Area 1 / 2 / 3
========================================================== */


/* ==========================================================
   カラー
========================================================== */

.site-footer {
  --hirooka-footer-bg: #003a34;
  --hirooka-footer-white: #ffffff;
  --hirooka-footer-text: rgba(255, 255, 255, 0.72);
  --hirooka-footer-muted: rgba(255, 255, 255, 0.58);
  --hirooka-footer-border: rgba(255, 255, 255, 0.12);
  --hirooka-footer-accent: #c98400;
  --hirooka-footer-accent-hover: #aa7000;
}


/* ==========================================================
   Lightning フッター本体

   重要：
   背景色は各ウィジェットではなく
   フッター親要素に一度だけ設定する
========================================================== */

.site-footer {
  position: relative !important;

  width: 100% !important;

  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  border-top: 0 !important;

  background-color: var(--hirooka-footer-bg) !important;

  color: var(--hirooka-footer-text) !important;

  overflow: visible !important;
}


/* ==========================================================
   Lightning フッターウィジェット全体

   上部の白場をなくし、
   ここで上下余白を管理
========================================================== */

.site-footer .site-footer-content {
  width: 100%;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 48px !important;
  padding-bottom: 42px !important;

  background-color: transparent !important;

  color: var(--hirooka-footer-text) !important;
}


/* ==========================================================
   Lightning Row
========================================================== */

.site-footer .site-footer-content > .row {
  align-items: flex-start;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ==========================================================
   Lightningが生成する各カラム

   テーマ側の不要な下余白を解除
========================================================== */

.site-footer .site-footer-content > .row > [class*="col-"] {
  position: relative;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 0;
  padding-bottom: 0;
}


/* ==========================================================
   WordPress Widget Wrapper

   Lightning / Gutenberg側のmarginを解除
========================================================== */

.site-footer .site-footer-content .widget,
.site-footer .site-footer-content .widget_block,
.site-footer .site-footer-content .widget_text,
.site-footer .site-footer-content .widget_custom_html {
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  border: 0 !important;

  background: transparent !important;
}


/* ==========================================================
   カスタムフッター共通
========================================================== */

.hirooka-footer-area1,
.hirooka-footer-area1 *,
.hirooka-footer-area1 *::before,
.hirooka-footer-area1 *::after,

.hirooka-footer-area2,
.hirooka-footer-area2 *,
.hirooka-footer-area2 *::before,
.hirooka-footer-area2 *::after,

.hirooka-footer-area3,
.hirooka-footer-area3 *,
.hirooka-footer-area3 *::before,
.hirooka-footer-area3 *::after {
  box-sizing: border-box;
}


.hirooka-footer-area1,
.hirooka-footer-area2,
.hirooka-footer-area3 {
  position: relative;

  display: block !important;

  visibility: visible !important;

  width: 100%;

  min-height: 0;

  margin: 0 !important;
  padding: 0 18px !important;

  opacity: 1 !important;

  background: transparent !important;

  color: var(--hirooka-footer-text);

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  overflow: visible !important;

  /*
   * 以前設定していた巨大背景を完全解除
   */
  box-shadow: none !important;
  clip-path: none !important;
}


/* ==========================================================
   AREA 1
   ロゴ
========================================================== */

.hirooka-footer-area1__logo {
  display: block;

  width: 100%;

  margin: 0 0 17px !important;
  padding: 0 !important;

  line-height: 1;
}


.hirooka-footer-area1__logo-image {
  display: block !important;

  width: auto;
  max-width: 260px;
  height: auto;

  margin: 0;
  padding: 0;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  object-fit: contain;
  object-position: left center;

  box-shadow: none !important;
}


/* ==========================================================
   AREA 1
   住所
========================================================== */

.hirooka-footer-area1__address {
  width: 100%;

  margin: 0 0 6px !important;
  padding: 0 !important;

  color: var(--hirooka-footer-text) !important;

  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.01em;

  text-align: left;
}


/* ==========================================================
   AREA 1
   TEL / FAX
========================================================== */

.hirooka-footer-area1__contact {
  display: flex;

  align-items: center;
  justify-content: flex-start;

  flex-wrap: wrap;

  gap: 7px 22px;

  width: 100%;

  margin: 0 0 18px !important;
  padding: 0 !important;

  color: var(--hirooka-footer-text) !important;

  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;

  letter-spacing: 0.01em;

  text-align: left;
}


.hirooka-footer-area1__contact span {
  display: inline-block;

  margin: 0;
  padding: 0;
}


/* ==========================================================
   AREA 1
   電話ボタン
========================================================== */

.hirooka-footer-area1__phone {
  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 42px;

  margin: 0 !important;
  padding: 10px 20px !important;

  border: 1px solid var(--hirooka-footer-accent) !important;
  border-radius: 999px !important;

  background-color: var(--hirooka-footer-accent) !important;

  color: var(--hirooka-footer-white) !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;

  letter-spacing: 0.01em;

  text-align: center;
  text-decoration: none !important;

  white-space: nowrap;

  box-shadow: none !important;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.hirooka-footer-area1__phone:visited {
  color: var(--hirooka-footer-white) !important;
}


.hirooka-footer-area1__phone:hover,
.hirooka-footer-area1__phone:focus {
  border-color: var(--hirooka-footer-accent-hover) !important;

  background-color: var(--hirooka-footer-accent-hover) !important;

  color: var(--hirooka-footer-white) !important;

  text-decoration: none !important;

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.16) !important;
}


.hirooka-footer-area1__phone:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);

  outline-offset: 3px;
}


/* ==========================================================
   AREA 1
   Font Awesome
========================================================== */

.hirooka-footer-area1__phone-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 16px;
  height: 16px;

  margin: 0;
  padding: 0;

  color: inherit;

  font-size: 13px;
  line-height: 1;

  text-align: center;
}


.hirooka-footer-area1__phone-icon::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}


.hirooka-footer-area1__phone-text {
  display: block;

  margin: 0;
  padding: 0;

  color: inherit;

  line-height: 1.3;
}


/* ==========================================================
   AREA 2
   メニュー見出し
========================================================== */

.hirooka-footer-area2__title {
  width: 100%;

  margin: 0 0 17px !important;
  padding: 0 !important;

  color: var(--hirooka-footer-white) !important;

  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;

  letter-spacing: 0.02em;

  text-align: left;
}


/* ==========================================================
   AREA 2 / 3
   リスト共通
========================================================== */

.hirooka-footer-area2__list,
.hirooka-footer-area3__list {
  display: flex !important;
  flex-direction: column;

  gap: 14px;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


.hirooka-footer-area2__item,
.hirooka-footer-area3__item {
  display: block !important;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  list-style: none !important;
}


.hirooka-footer-area2__item::before,
.hirooka-footer-area2__item::after,
.hirooka-footer-area3__item::before,
.hirooka-footer-area3__item::after {
  display: none !important;

  content: none !important;
}


.hirooka-footer-area2__item::marker,
.hirooka-footer-area3__item::marker {
  content: "";
}


/* ==========================================================
   AREA 2 / 3
   リンク
========================================================== */

.hirooka-footer-area2__link,
.hirooka-footer-area3__link {
  position: relative;

  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  color: var(--hirooka-footer-text) !important;

  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;

  letter-spacing: 0.01em;

  text-decoration: none !important;

  box-shadow: none !important;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


.hirooka-footer-area2__link:visited,
.hirooka-footer-area3__link:visited {
  color: var(--hirooka-footer-text) !important;
}


.hirooka-footer-area2__link:hover,
.hirooka-footer-area2__link:focus,
.hirooka-footer-area3__link:hover,
.hirooka-footer-area3__link:focus {
  color: var(--hirooka-footer-white) !important;

  text-decoration: none !important;

  transform: translateX(3px);
}


.hirooka-footer-area2__link:focus-visible,
.hirooka-footer-area3__link:focus-visible {
  border-radius: 2px;

  outline: 2px solid rgba(255, 255, 255, 0.7);

  outline-offset: 4px;
}


/* ==========================================================
   AREA 3
   AREA2の見出し分の高さを確保
========================================================== */

.hirooka-footer-area3__title-space {
  display: block;

  width: 100%;
  height: 20px;

  margin: 0 0 17px;
  padding: 0;
}


/* ==========================================================
   コピーライト

   Lightningはsite-footer内に
   site-footer-copyrightを出力するため、
   同じ背景色へ統一
========================================================== */

.site-footer .site-footer-copyright {
  position: relative;

  width: 100%;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 18px !important;
  padding-bottom: 20px !important;

  border-top: 1px solid var(--hirooka-footer-border) !important;

  background-color: transparent !important;

  color: var(--hirooka-footer-muted) !important;

  text-align: center;
}


/* ==========================================================
   コピーライト文章
========================================================== */

.site-footer .site-footer-copyright p {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--hirooka-footer-muted) !important;

  font-family:
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;

  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.7;

  letter-spacing: 0.01em;

  text-align: center;
}


/* Powered by等にリンクがある場合 */

.site-footer .site-footer-copyright a,
.site-footer .site-footer-copyright a:visited {
  color: var(--hirooka-footer-muted) !important;

  text-decoration: none !important;
}


.site-footer .site-footer-copyright a:hover,
.site-footer .site-footer-copyright a:focus {
  color: var(--hirooka-footer-white) !important;
}


/* ==========================================================
   Lightningフッター内部の不要な白背景を排除
========================================================== */

.site-footer .container,
.site-footer .row,
.site-footer [class*="col-"] {
  background-color: transparent;
}


/* ==========================================================
   PC
========================================================== */

@media screen and (min-width: 992px) {

  /*
   * PCでは3つのウィジェットを確実に表示
   */
  .site-footer .site-footer-content > .row {
    display: flex !important;

    flex-wrap: nowrap !important;
  }


  .site-footer .site-footer-content > .row > .col-lg-4 {
    display: block !important;

    visibility: visible !important;

    flex: 0 0 33.333333% !important;

    width: 33.333333% !important;
    max-width: 33.333333% !important;

    opacity: 1 !important;
  }


  .hirooka-footer-area1,
  .hirooka-footer-area2,
  .hirooka-footer-area3 {
    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;
  }

}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (min-width: 768px) and (max-width: 991px) {

  .site-footer .site-footer-content {
    padding-top: 42px !important;
    padding-bottom: 34px !important;
  }


  /*
   * Lightning標準では3エリア時に
   * col-md-6となるため、
   * 3番目は次段へ回る仕様。
   */

  .hirooka-footer-area1,
  .hirooka-footer-area2,
  .hirooka-footer-area3 {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }


  .hirooka-footer-area1__logo-image {
    max-width: 240px;
  }

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

  /* ========================================================
     Lightning Footer
  ======================================================== */

  .site-footer .site-footer-content {
    padding-top: 34px !important;
    padding-bottom: 28px !important;
  }


  .site-footer .site-footer-content > .row {
    display: block !important;

    margin: 0 !important;
  }


  .site-footer .site-footer-content > .row > [class*="col-"] {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 18px !important;
  }


  /* ========================================================
     共通
  ======================================================== */

  .hirooka-footer-area1,
  .hirooka-footer-area2,
  .hirooka-footer-area3 {
    width: 100%;

    margin: 0 !important;

    padding-right: 0 !important;
    padding-left: 0 !important;

    text-align: center;
  }


  /* ========================================================
     AREA 1
  ======================================================== */

  .hirooka-footer-area1 {
    padding-top: 0 !important;
    padding-bottom: 27px !important;
  }


  .hirooka-footer-area1__logo {
    margin-bottom: 16px !important;
  }


  .hirooka-footer-area1__logo-image {
    width: auto;
    max-width: min(250px, 90%);
    height: auto;

    margin-right: auto;
    margin-left: auto;

    object-position: center center;
  }


  .hirooka-footer-area1__address {
    text-align: center;
  }


  .hirooka-footer-area1__contact {
    justify-content: center;

    text-align: center;
  }


  .hirooka-footer-area1__phone {
    min-height: 44px;

    padding-right: 22px !important;
    padding-left: 22px !important;
  }


  /* ========================================================
     AREA 2
  ======================================================== */

  .hirooka-footer-area2 {
    padding-top: 23px !important;
    padding-bottom: 12px !important;

    border-top: 1px solid var(--hirooka-footer-border);
  }


  .hirooka-footer-area2__title {
    margin-bottom: 15px !important;

    text-align: center;
  }


  .hirooka-footer-area2__list {
    align-items: center;

    gap: 12px;
  }


  .hirooka-footer-area2__link {
    font-size: 13px;
  }


  /* ========================================================
     AREA 3
  ======================================================== */

  .hirooka-footer-area3 {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
  }


  .hirooka-footer-area3__title-space {
    display: none;
  }


  .hirooka-footer-area3__list {
    align-items: center;

    gap: 12px;
  }


  .hirooka-footer-area3__link {
    font-size: 13px;
  }


  /* ========================================================
     Copyright
  ======================================================== */

  .site-footer .site-footer-copyright {
    padding-top: 17px !important;
    padding-right: 18px !important;
    padding-bottom: 18px !important;
    padding-left: 18px !important;
  }


  .site-footer .site-footer-copyright p {
    font-size: 11px;
    line-height: 1.7;
  }

}


/* ==========================================================
   Small Smartphone
========================================================== */

@media screen and (max-width: 420px) {

  .site-footer .site-footer-content > .row > [class*="col-"] {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }


  .hirooka-footer-area1__logo-image {
    max-width: min(230px, 90%);
  }


  .hirooka-footer-area1__address,
  .hirooka-footer-area1__contact {
    font-size: 12px;
  }


  .hirooka-footer-area1__contact {
    gap: 5px 14px;
  }


  .hirooka-footer-area1__phone {
    padding-right: 18px !important;
    padding-left: 18px !important;

    font-size: 12.5px;
  }


  .site-footer .site-footer-copyright {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

}


/* ==========================================================
   Touch Device
========================================================== */

@media (hover: none) {

  .hirooka-footer-area1__phone:hover {
    border-color: var(--hirooka-footer-accent) !important;

    background-color: var(--hirooka-footer-accent) !important;

    color: var(--hirooka-footer-white) !important;

    box-shadow: none !important;
  }


  .hirooka-footer-area2__link:hover,
  .hirooka-footer-area3__link:hover {
    color: var(--hirooka-footer-text) !important;

    transform: none;
  }

}


/* ==========================================================
   モーション軽減
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hirooka-footer-area1__phone,
  .hirooka-footer-area2__link,
  .hirooka-footer-area3__link {
    transition: none;
  }

}