:is(#hm-site-header, #hm-site-footer) {
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #333333;
  word-break: normal;
  -webkit-text-size-adjust: 100%;
}
:is(#hm-site-header, #hm-site-footer) *, :is(#hm-site-header, #hm-site-footer) ::before, :is(#hm-site-header, #hm-site-footer) ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
  margin: 0;
  padding: 0;
}
:is(#hm-site-header, #hm-site-footer) a {
  color: inherit;
  text-decoration: inherit;
}
:is(#hm-site-header, #hm-site-footer) img {
  display: block;
  max-width: 100%;
  height: auto;
}


      /* 旧LP由来の共通部品 (ピルボタン / セクション見出し / チェック柄背景 / FREE装飾) */
      :is(#hm-site-header, #hm-site-footer) .btn-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        font-weight: 700;
        text-align: center;
        border-radius: 9999px;
        border: 2px solid transparent;
        transition:
          background-color 0.2s ease,
          color 0.2s ease;
      }
      :is(#hm-site-header, #hm-site-footer) .btn-red {
        background-color: #f05454;
        border-color: #f05454;
        color: #fff;
        box-shadow: 0 5px 10px rgba(244, 67, 54, 0.15);
      }
      /* 料金セクションの月払い / 年払い切替。
         選択状態は aria-selected を単一の情報源にして、見た目はそれに従わせる
         (クラスの付け外しと二重管理にすると、支援技術と見た目がずれる)。 */
      :is(#hm-site-header, #hm-site-footer) .btn-red:hover {
        background-color: #fff;
        color: #f05454;
      }
      :is(#hm-site-header, #hm-site-footer) .btn-outline-red {
        background-color: #fff;
        border-color: #f05454;
        color: #f05454;
      }
      :is(#hm-site-header, #hm-site-footer) .btn-outline-red:hover {
        background-color: #f05454;
        color: #fff;
      }

      /* 機能一覧表 用の補助クラス。
         以前は 2 列のプラン比較表だった。1 列の仕様表に変えたので、
         空いた 2 列目ぶんの幅は機能名側に寄せている。 */

      :is(#hm-site-header, #hm-site-footer) .material-symbols-outlined {
        font-variation-settings:
          "FILL" 0,
          "wght" 400,
          "GRAD" 0,
          "opsz" 24;
      }
      /* よくあるご質問 (details/summary)。
         ブラウザ標準の三角マーカーは Material Symbols のアイコンと二重に
         なるため消し、開閉状態はアイコンの回転で示す。 */
      /* キーボード操作時のフォーカス位置が分かるようにする */
      /* lg 以上ではメインビジュアルを等倍 (1120px) で画面右へはみ出させるため、
         本文カラムと図が重なる。重なり幅は「画像=帯 (最大 1920px) の右端基準 /
         本文=中央寄せコンテナ基準」で画面幅ごとに変わるので、幅を詰めて避けるのではなく
         本文側に白をかけて可読性を担保する (OG 画像と同じ手法)。
         図は文字の無い右側でそのまま見える。 */
      @media (min-width: 1024px) {
        /* 図とスクリムの位置基準。以前は画面右端から 40px という画面基準だったが、
           4K など 1920px を大きく超える画面では中央寄せの本文 (1200px) から図だけが
           遠ざかり、右に寄りすぎた見た目になっていた。基準を「画面中央に置いた
           1920px の帯」に変え、それより広い画面では本文と図の位置関係を 1920px
           時点のまま固定する。1920px 以下では max() が 0 を返すので従来と同一。
           50% は containing block (section) 基準なので、100vw と違って
           スクロールバー幅の影響を受けない。 */
        /* 図の右端は帯の右端から 40px (margin-desktop と同じ余白単位) 内側 */
      }
    
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  
}
:is(#hm-site-header, #hm-site-footer) .fixed {
    position: fixed
}
:is(#hm-site-header, #hm-site-footer) .top-0 {
    top: 0px
}
:is(#hm-site-header, #hm-site-footer) .z-50 {
    z-index: 50
}
:is(#hm-site-header, #hm-site-footer) .mx-auto {
    margin-left: auto;
    margin-right: auto
}
:is(#hm-site-header, #hm-site-footer) .mb-8 {
    margin-bottom: 2rem
}
:is(#hm-site-header, #hm-site-footer) .mt-1 {
    margin-top: 0.25rem
}
:is(#hm-site-header, #hm-site-footer) .block {
    display: block
}
:is(#hm-site-header, #hm-site-footer) .flex {
    display: flex
}
:is(#hm-site-header, #hm-site-footer) .grid {
    display: grid
}
:is(#hm-site-header, #hm-site-footer) .hidden {
    display: none
}
:is(#hm-site-header, #hm-site-footer) .h-14 {
    height: 3.5rem
}
:is(#hm-site-header, #hm-site-footer) .h-20 {
    height: 5rem
}
:is(#hm-site-header, #hm-site-footer) .h-8 {
    height: 2rem
}
:is(#hm-site-header, #hm-site-footer) .h-auto {
    height: auto
}
:is(#hm-site-header, #hm-site-footer) .w-8 {
    width: 2rem
}
:is(#hm-site-header, #hm-site-footer) .w-\[67px\] {
    width: 67px
}
:is(#hm-site-header, #hm-site-footer) .w-auto {
    width: auto
}
:is(#hm-site-header, #hm-site-footer) .w-full {
    width: 100%
}
:is(#hm-site-header, #hm-site-footer) .max-w-container-max {
    max-width: 1200px
}
:is(#hm-site-header, #hm-site-footer) .max-w-xs {
    max-width: 20rem
}
:is(#hm-site-header, #hm-site-footer) .shrink-0 {
    flex-shrink: 0
}
:is(#hm-site-header, #hm-site-footer) .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}
:is(#hm-site-header, #hm-site-footer) .flex-col {
    flex-direction: column
}
:is(#hm-site-header, #hm-site-footer) .flex-wrap {
    flex-wrap: wrap
}
:is(#hm-site-header, #hm-site-footer) .items-start {
    align-items: flex-start
}
:is(#hm-site-header, #hm-site-footer) .items-end {
    align-items: flex-end
}
:is(#hm-site-header, #hm-site-footer) .items-center {
    align-items: center
}
:is(#hm-site-header, #hm-site-footer) .items-stretch {
    align-items: stretch
}
:is(#hm-site-header, #hm-site-footer) .justify-center {
    justify-content: center
}
:is(#hm-site-header, #hm-site-footer) .justify-between {
    justify-content: space-between
}
:is(#hm-site-header, #hm-site-footer) .gap-2 {
    gap: 0.5rem
}
:is(#hm-site-header, #hm-site-footer) .gap-3 {
    gap: 0.75rem
}
:is(#hm-site-header, #hm-site-footer) .gap-4 {
    gap: 1rem
}
:is(#hm-site-header, #hm-site-footer) .gap-5 {
    gap: 1.25rem
}
:is(#hm-site-header, #hm-site-footer) .gap-8 {
    gap: 2rem
}
:is(#hm-site-header, #hm-site-footer) :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}
:is(#hm-site-header, #hm-site-footer) .whitespace-nowrap {
    white-space: nowrap
}
:is(#hm-site-header, #hm-site-footer) .rounded-full {
    border-radius: 9999px
}
:is(#hm-site-header, #hm-site-footer) .rounded-lg {
    border-radius: 0.5rem
}
:is(#hm-site-header, #hm-site-footer) .border-b {
    border-bottom-width: 1px
}
:is(#hm-site-header, #hm-site-footer) .border-\[\#cccccc\] {
    --tw-border-opacity: 1;
    border-color: rgb(204 204 204 / var(--tw-border-opacity, 1))
}
:is(#hm-site-header, #hm-site-footer) .bg-surface-container {
    --tw-bg-opacity: 1;
    background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1))
}
:is(#hm-site-header, #hm-site-footer) .bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}
:is(#hm-site-header, #hm-site-footer) .object-contain {
    -o-object-fit: contain;
       object-fit: contain
}
:is(#hm-site-header, #hm-site-footer) .p-2 {
    padding: 0.5rem
}
:is(#hm-site-header, #hm-site-footer) .px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
:is(#hm-site-header, #hm-site-footer) .px-margin-mobile {
    padding-left: 16px;
    padding-right: 16px
}
:is(#hm-site-header, #hm-site-footer) .py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem
}
:is(#hm-site-header, #hm-site-footer) .py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem
}
:is(#hm-site-header, #hm-site-footer) .pb-12 {
    padding-bottom: 3rem
}
:is(#hm-site-header, #hm-site-footer) .pt-4 {
    padding-top: 1rem
}
:is(#hm-site-header, #hm-site-footer) .font-body-md {
    font-family: Roboto
}
:is(#hm-site-header, #hm-site-footer) .text-\[10px\] {
    font-size: 10px
}
:is(#hm-site-header, #hm-site-footer) .text-\[20px\] {
    font-size: 20px
}
:is(#hm-site-header, #hm-site-footer) .text-base {
    font-size: 1rem;
    line-height: 1.5rem
}
:is(#hm-site-header, #hm-site-footer) .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
:is(#hm-site-header, #hm-site-footer) .text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}
:is(#hm-site-header, #hm-site-footer) .font-bold {
    font-weight: 700
}
:is(#hm-site-header, #hm-site-footer) .font-medium {
    font-weight: 500
}
:is(#hm-site-header, #hm-site-footer) .leading-relaxed {
    line-height: 1.625
}
:is(#hm-site-header, #hm-site-footer) .leading-tight {
    line-height: 1.25
}
:is(#hm-site-header, #hm-site-footer) .tracking-tight {
    letter-spacing: -0.025em
}
:is(#hm-site-header, #hm-site-footer) .text-navy {
    --tw-text-opacity: 1;
    color: rgb(46 52 76 / var(--tw-text-opacity, 1))
}
:is(#hm-site-header, #hm-site-footer) .text-on-surface {
    --tw-text-opacity: 1;
    color: rgb(51 51 51 / var(--tw-text-opacity, 1))
}
:is(#hm-site-header, #hm-site-footer) .text-on-surface-variant {
    --tw-text-opacity: 1;
    color: rgb(76 76 76 / var(--tw-text-opacity, 1))
}
:is(#hm-site-header, #hm-site-footer) .text-secondary {
    --tw-text-opacity: 1;
    color: rgb(76 76 76 / var(--tw-text-opacity, 1))
}
:is(#hm-site-header, #hm-site-footer) .shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
:is(#hm-site-header, #hm-site-footer) .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
:is(#hm-site-header, #hm-site-footer) .transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
:is(#hm-site-header, #hm-site-footer) .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
:is(#hm-site-header, #hm-site-footer) .hover\:bg-surface-container:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1))
}
:is(#hm-site-header, #hm-site-footer) .hover\:text-primary:hover {
    --tw-text-opacity: 1;
    color: rgb(244 67 54 / var(--tw-text-opacity, 1))
}
:is(#hm-site-header, #hm-site-footer) .hover\:opacity-70:hover {
    opacity: 0.7
}
@media (min-width: 640px) {
    :is(#hm-site-header, #hm-site-footer) .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    :is(#hm-site-header, #hm-site-footer) .sm\:gap-4 {
        gap: 1rem
    }
    :is(#hm-site-header, #hm-site-footer) .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}
@media (min-width: 768px) {
    :is(#hm-site-header, #hm-site-footer) .md\:flex {
        display: flex
    }
    :is(#hm-site-header, #hm-site-footer) .md\:hidden {
        display: none
    }
    :is(#hm-site-header, #hm-site-footer) .md\:h-10 {
        height: 2.5rem
    }
    :is(#hm-site-header, #hm-site-footer) .md\:h-20 {
        height: 5rem
    }
    :is(#hm-site-header, #hm-site-footer) .md\:w-\[100px\] {
        width: 100px
    }
    :is(#hm-site-header, #hm-site-footer) .md\:flex-row {
        flex-direction: row
    }
    :is(#hm-site-header, #hm-site-footer) .md\:items-center {
        align-items: center
    }
    :is(#hm-site-header, #hm-site-footer) .md\:justify-center {
        justify-content: center
    }
    :is(#hm-site-header, #hm-site-footer) .md\:justify-between {
        justify-content: space-between
    }
    :is(#hm-site-header, #hm-site-footer) .md\:gap-10 {
        gap: 2.5rem
    }
    :is(#hm-site-header, #hm-site-footer) .md\:gap-4 {
        gap: 1rem
    }
    :is(#hm-site-header, #hm-site-footer) .md\:gap-\[30px\] {
        gap: 30px
    }
    :is(#hm-site-header, #hm-site-footer) .md\:p-3 {
        padding: 0.75rem
    }
    :is(#hm-site-header, #hm-site-footer) .md\:px-margin-desktop {
        padding-left: 40px;
        padding-right: 40px
    }
    :is(#hm-site-header, #hm-site-footer) .md\:hover\:shadow-\[0_0_10px_5px_rgba\(0\2c 0\2c 0\2c 0\.1\)\]:hover {
        --tw-shadow: 0 0 10px 5px rgba(0,0,0,0.1);
        --tw-shadow-colored: 0 0 10px 5px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }
}
@media (min-width: 1024px) {
    :is(#hm-site-header, #hm-site-footer) .lg\:flex {
        display: flex
    }
    :is(#hm-site-header, #hm-site-footer) .lg\:hidden {
        display: none
    }
    :is(#hm-site-header, #hm-site-footer) .lg\:gap-8 {
        gap: 2rem
    }
}
@media (min-width: 1280px) {
    :is(#hm-site-header, #hm-site-footer) .xl\:inline-flex {
        display: inline-flex
    }
}


@media only screen and (max-width: 640px) {
  .l-blog, .l-blog-detail {
    padding-top: 80px;
  }
}


#hm-site-footer > footer {
  border-top: 1px solid #cccccc;
}