:where(.hb-migrated),:where(.hb-migrated),:where(.hb-migrated)  div,:where(.hb-migrated)  span,:where(.hb-migrated)  object,:where(.hb-migrated)  iframe,:where(.hb-migrated)  h1,:where(.hb-migrated)  h2,:where(.hb-migrated)  h3,:where(.hb-migrated)  h4,:where(.hb-migrated)  h5,:where(.hb-migrated)  h6,:where(.hb-migrated)  p,:where(.hb-migrated)  blockquote,:where(.hb-migrated)  pre,:where(.hb-migrated)  abbr,:where(.hb-migrated)  address,:where(.hb-migrated)  cite,:where(.hb-migrated)  code,:where(.hb-migrated)  del,:where(.hb-migrated)  dfn,:where(.hb-migrated)  em,:where(.hb-migrated)  img,:where(.hb-migrated)  ins,:where(.hb-migrated)  kbd,:where(.hb-migrated)  q,:where(.hb-migrated)  samp,:where(.hb-migrated)  small,:where(.hb-migrated)  strong,:where(.hb-migrated)  sub,:where(.hb-migrated)  sup,:where(.hb-migrated)  var,:where(.hb-migrated)  b,:where(.hb-migrated)  i,:where(.hb-migrated)  dl,:where(.hb-migrated)  dt,:where(.hb-migrated)  dd,:where(.hb-migrated)  ol,:where(.hb-migrated)  ul,:where(.hb-migrated)  li,:where(.hb-migrated)  fieldset,:where(.hb-migrated)  form,:where(.hb-migrated)  label,:where(.hb-migrated)  legend,:where(.hb-migrated)  table,:where(.hb-migrated)  caption,:where(.hb-migrated)  tbody,:where(.hb-migrated)  tfoot,:where(.hb-migrated)  thead,:where(.hb-migrated)  tr,:where(.hb-migrated)  th,:where(.hb-migrated)  td,:where(.hb-migrated)  article,:where(.hb-migrated)  aside,:where(.hb-migrated)  dialog,:where(.hb-migrated)  figure,:where(.hb-migrated)  footer,:where(.hb-migrated)  header,:where(.hb-migrated)  hgroup,:where(.hb-migrated)  menu,:where(.hb-migrated)  nav,:where(.hb-migrated)  section,:where(.hb-migrated)  time,:where(.hb-migrated)  mark,:where(.hb-migrated)  audio,:where(.hb-migrated)  video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline; }

:where(.hb-migrated) article,:where(.hb-migrated)  aside,:where(.hb-migrated)  dialog,:where(.hb-migrated)  figure,:where(.hb-migrated)  footer,:where(.hb-migrated)  header,:where(.hb-migrated)  hgroup,:where(.hb-migrated)  nav,:where(.hb-migrated)  section {
  display: block; }

:where(.hb-migrated) ul,:where(.hb-migrated)  ol {
  list-style: none; }

:where(.hb-migrated) blockquote,:where(.hb-migrated)  q {
  quotes: none; }

:where(.hb-migrated) blockquote::before,:where(.hb-migrated)  blockquote::after,:where(.hb-migrated)  q::before,:where(.hb-migrated)  q::after {
  content: "";
  content: none; }

:where(.hb-migrated) img {
  font-size: 0;
  line-height: 0; }

:where(.hb-migrated) a {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 100%;
  vertical-align: baseline; }

:where(.hb-migrated) ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

:where(.hb-migrated) mark {
  background-color: #ff9;
  font-weight: bold;
  font-style: italic;
  color: #000; }

:where(.hb-migrated) del {
  text-decoration: line-through; }

:where(.hb-migrated) abbr[title],:where(.hb-migrated)  dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

:where(.hb-migrated) table {
  border-spacing: 0;
  border-collapse: collapse; }

:where(.hb-migrated) fieldset,:where(.hb-migrated)  img {
  line-height: 0;
  vertical-align: top; }

:where(.hb-migrated) hr {
  display: none; }

:where(.hb-migrated) input,:where(.hb-migrated)  select {
  vertical-align: middle; }

:where(.hb-migrated) {
  overflow-y: scroll;
  *zoom: 1;
   }

:where(.hb-migrated) * {
  margin: 0;
  padding: 0; }

:where(.hb-migrated) img {
  vertical-align: bottom; }

:where(.hb-migrated),:where(.hb-migrated) {
  width: 100%;
  height: 100%; }

:where(.hb-migrated) ul,:where(.hb-migrated)  li {
  list-style: none; }

:where(.hb-migrated) b {
  font-weight: bold; }

:where(.hb-migrated) iframe {
  border: none;
  outline: none; }


:where(.hb-migrated) * {
  box-sizing: border-box; }

:where(.hb-migrated) {
  color: #000;
  font-size: 16px;
  font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo", "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  line-height: 1.7;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  @media screen and (min-width: 769px) {
    :where(.hb-migrated) {
      min-width: 1200px; } }

:where(.hb-migrated) .wrapper {
  position: relative;
  padding-top: 60px; }
  @media screen and (min-width: 769px) {
    :where(.hb-migrated) .wrapper {
      min-width: 1200px;
      padding-top: 110px; } }

:where(.hb-migrated) img {
  width: 100%;
  height: auto; }

:where(.hb-migrated) .pc {
  display: none; }
  @media screen and (min-width: 769px) {
    :where(.hb-migrated) .pc {
      display: block; } }

@media screen and (min-width: 769px) {
  :where(.hb-migrated) .sp {
    display: none; } }


:where(.hb-migrated),:where(.hb-migrated){
  overflow-x: hidden;
}

:where(.hb-migrated) {
  scroll-behavior: smooth;
}


:where(.hb-migrated) a {
  color: #000;
  text-decoration: underline; }
  @media screen and (min-width: 769px) {
    :where(.hb-migrated) a:hover {
      text-decoration: none; }
      :where(.hb-migrated) a:hover img {
        opacity: .7; } }
  :where(.hb-migrated) a:hover,:where(.hb-migrated)  a img {
    transition: .2s linear; }

:where(.hb-migrated) .btn {
  position: relative;
  display: block;
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  text-align: center;
  width: 240px;
  height: 50px;
  line-height: 50px; }
  @media screen and (max-width: 768px) {
    :where(.hb-migrated) .btn {
      width: 200px;
      height: 40px;
      line-height: 40px; } }
  :where(.hb-migrated) .btn:after {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    right: 10px;
    top: 50%;
    margin-top: -10px; }

:where(.hb-migrated) .btn-green {
  background: #417751;
  color: #fff; }
  :where(.hb-migrated) .btn-green:after {
    background: url("/hebena/migrated/5fedac13a22602a5.png");
    background-size: contain; }
  :where(.hb-migrated) .btn-green:hover {
    background: #000; }

:where(.hb-migrated) .btn-white {
  background: #fff;
  color: #417751; }
  :where(.hb-migrated) .btn-white:after {
    background: url("/hebena/migrated/396e59291c7a30fe.png");
    background-size: contain; }
  :where(.hb-migrated) .btn-white:hover {
    opacity: 0.8; }




:where(.hb-migrated) .section-title{
  text-align: center;
  margin-bottom: 40px;
}

:where(.hb-migrated) .section-title h2{
  margin-bottom: 14px;
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-weight: 700;
}

:where(.hb-migrated) .section-title p{
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: #666;
}

:where(.hb-migrated) .section-title.is-white h2,:where(.hb-migrated)
.section-title.is-white p{
  color: #fff;
}

:where(.hb-migrated) .section-title.is-green h2{
  color: #417751;
}

:where(.hb-migrated) .section-title.is-dark h2,:where(.hb-migrated)
.section-title.is-dark p{
  color: #222;
}


:where(.hb-migrated) .section-subtitle{
  text-align: center;
  margin-bottom: 40px;
}

:where(.hb-migrated) .section-subtitle h3{
  font-size: 38px;
  font-weight: 500;
  color: #417751;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

:where(.hb-migrated) .section-subtitle p{
  font-size: 16px;
  color: #666;
}

:where(.hb-migrated) .products-area .section-subtitle{
  margin-top: 80px;
}


:where(.hb-migrated) .section-lead{
  max-width: 900px;
  margin: 0 auto 70px;
  text-align: center;
  padding: 0 20px;
}

:where(.hb-migrated) .section-lead p{
  font-size: 16px;
  line-height: 2;
  color: #555;
  letter-spacing: 0.02em;
}


:where(.hb-migrated) .ui-card{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.06),
    0 2px 10px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

:where(.hb-migrated) .ui-card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 22px 50px rgba(15, 23, 42, 0.10),
    0 8px 20px rgba(15, 23, 42, 0.06);
}


:where(.hb-migrated) .ui-card-image{
  overflow: hidden;
  border-radius: 14px;
}

:where(.hb-migrated) .ui-card-image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  filter: saturate(0.96) contrast(1.02) brightness(1.01);
  transition: transform .45s ease, filter .35s ease;
}

:where(.hb-migrated) .ui-card:hover .ui-card-image img{
  transform: scale(1.02);
  filter: saturate(1) contrast(1.04) brightness(1.02);
}


:where(.hb-migrated) .ui-badge{
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  background: #417751;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 6px;
}


:where(.hb-migrated) .ui-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    opacity .22s ease,
    background .22s ease;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

:where(.hb-migrated) .ui-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

:where(.hb-migrated) .ui-btn.is-green{
  background: linear-gradient(135deg,#417751,#2f5f3e);
  color: #fff;
}

:where(.hb-migrated) .ui-btn.is-white{
  background: #fff;
  color: #417751;
}




:where(.hb-migrated).home .about-area .about-box,:where(.hb-migrated).front-page .about-area .about-box{
  border-radius: 0;
  border: none;
  box-shadow: none;
  transition: none;
}


:where(.hb-migrated) .product-card,:where(.hb-migrated)
.archive-card,:where(.hb-migrated)
.cloud-cta-card{
  border: 1px solid rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.06),
    0 2px 10px rgba(15, 23, 42, 0.04);
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

:where(.hb-migrated) .product-card:hover,:where(.hb-migrated)
.archive-card:hover,:where(.hb-migrated)
.cloud-cta-card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 22px 50px rgba(15, 23, 42, 0.10),
    0 8px 20px rgba(15, 23, 42, 0.06);
}


:where(.hb-migrated) .product-thumb img,:where(.hb-migrated)
.archive-thumb img,:where(.hb-migrated)
.cloud-cta-image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.02) brightness(1.01);
  transition: transform .45s ease, filter .35s ease;
}


:where(.hb-migrated) .product-card:hover .product-thumb img,:where(.hb-migrated)
.archive-card:hover .archive-thumb img,:where(.hb-migrated)
.cloud-cta-card:hover .cloud-cta-image img{
  transform: scale(1.02);
  filter: saturate(1) contrast(1.04) brightness(1.02);
}


:where(.hb-migrated) .product-link,:where(.hb-migrated)
.cloud-main-btn,:where(.hb-migrated).home .about-area .btn.btn-white,:where(.hb-migrated).front-page .about-area .btn.btn-white{
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    opacity .22s ease,
    background .22s ease;
}


:where(.hb-migrated) .product-link:hover,:where(.hb-migrated)
.cloud-main-btn:hover,:where(.hb-migrated).home .about-area .btn.btn-white:hover,:where(.hb-migrated).front-page .about-area .btn.btn-white:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.22);
}


:where(.hb-migrated) .hero-section .section-title{
  position: relative;
  z-index: 2;
  text-align: center;
}

:where(.hb-migrated) .hero-section .section-title h2{
  color: #fff;
  text-shadow: 0 6px 20px rgba(0,0,0,0.55);
}

:where(.hb-migrated) .hero-section .section-title p{
  color: rgba(255,255,255,0.92);
}


:where(.hb-migrated) .group-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: opacity 0.9s ease, transform 0.9s ease, box-shadow 0.4s ease;
}

:where(.hb-migrated) .group-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

:where(.hb-migrated) .group-card .glogo img {
  display: block;
  width: 100%;
  height: auto;
}

:where(.hb-migrated) .group-card .glogo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 18px;
  padding: 20px;
  border-radius: 12px;
  background: #f7f7f7;
}


:where(.hb-migrated) .floating-contact{
  position: fixed;
  right: 0;
  top: 75%;
  transform: translateY(-50%);
  z-index: 9998;
  display: block;
  line-height: 0;
  transition: transform 0.3s ease;
}

:where(.hb-migrated) .floating-contact:hover{
  transform: translateY(-50%) translateX(-6px);
}

:where(.hb-migrated) .floating-contact img{
  width: 90px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.2));
}




:where(.hb-migrated) .hebena-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 110px;
  background: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05);
}

:where(.hb-migrated) .header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 20px 4%;
}

:where(.hb-migrated) .header-logo img {
  width: 160px;
}

:where(.hb-migrated) .header-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

:where(.hb-migrated) .header-nav li {
  margin: 0 60px 0 0;
  line-height: 1;
  font-size: 16px;
}

:where(.hb-migrated) .header-nav li:last-child {
  margin: 0;
}

:where(.hb-migrated) .header-nav li a {
  color: #000;
  text-decoration: none;
}

:where(.hb-migrated) .header-nav li a:hover {
  color: #417751;
}

:where(.hb-migrated) .header-cart a {
  position: relative;
  font-size: 16px;
  color: #000;
  text-decoration: none;
  padding-left: 34px;
}

:where(.hb-migrated) .header-cart a:hover {
  color: #417751;
}

:where(.hb-migrated) .header-cart a:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -11.5px;
  background: url("/hebena/migrated/abf8f0a73d054545.png") no-repeat;
  background-size: 100% auto;
  width: 21px;
  height: 23px;
}


:where(.hb-migrated) .menu {
  z-index: 100;
  position: fixed;
  cursor: pointer;
  top: 30px;
  right: 20px;
  width: 40px;
  height: 30px;
}

:where(.hb-migrated) .menu span {
  transition: all 0.2s;
  background: #417751;
  position: absolute;
  left: 0;
  width: 40px;
  height: 2px;
}

:where(.hb-migrated) .menu span:nth-child(1) { top: 5px; }
:where(.hb-migrated) .menu span:nth-child(2) { top: 14px; }
:where(.hb-migrated) .menu span:nth-child(3) { top: 23px; }


:where(.hb-migrated) .active span {
  transition: all 0.2s;
}

:where(.hb-migrated) .active span:nth-child(1),:where(.hb-migrated)
.active span:nth-child(3) {
  transform-origin: center center;
}

:where(.hb-migrated) .active span:nth-child(1) {
  transform: rotate(-45deg);
  top: 14px;
}

:where(.hb-migrated) .active span:nth-child(2) {
  display: none;
}

:where(.hb-migrated) .active span:nth-child(3) {
  transform: rotate(45deg);
  width: 40px;
  top: 14px;
}


:where(.hb-migrated).home .hebena-header,:where(.hb-migrated).front-page .hebena-header{
  z-index: 200;
  background: transparent;
  box-shadow: none;
  transition: background .3s ease, box-shadow .3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

:where(.hb-migrated).home .wrapper,:where(.hb-migrated).front-page .wrapper{
  padding-top: 0;
}

:where(.hb-migrated).home .hebena-header .header-nav li a,:where(.hb-migrated).front-page .hebena-header .header-nav li a,:where(.hb-migrated).home .hebena-header .header-cart a,:where(.hb-migrated).front-page .hebena-header .header-cart a{
  color: #fff;
}

:where(.hb-migrated).home .hebena-header.scrolled,:where(.hb-migrated).front-page .hebena-header.scrolled{
  background: #fff;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.05);
  border-bottom: 1px solid #eee;
}

:where(.hb-migrated).home .hebena-header.scrolled a,:where(.hb-migrated).front-page .hebena-header.scrolled a{
  color: #333 !important;
}


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

  :where(.hb-migrated).home .hebena-header ul.header-nav.active{
    background:#417751 !important;
  }

  :where(.hb-migrated).home .hebena-header ul.header-nav.active li{
    background:#417751 !important;
    border-bottom:1px solid rgba(255,255,255,.25);
  }

  :where(.hb-migrated).home .hebena-header ul.header-nav.active li a{
    background:#417751 !important;
    color:#fff !important;
  }

}




:where(.hb-migrated) .pagetop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #7aa487;
  border: none;
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.3s ease;
}

:where(.hb-migrated) .pagetop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

:where(.hb-migrated) .pagetop:hover {
  background: #5f8d6d;
}


@media screen and (min-width: 769px) {
  :where(.hb-migrated) .pagetop:hover {
    background: #eaf4ed;
  }
}

:where(.hb-migrated) .pagetop:after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-45deg);
}



:where(.hb-migrated) .hebena-footer {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: #f5f5f5;
  padding: 30px 0;
  border-top: 1px solid #c3e4cd;
}

:where(.hb-migrated) .footer-inner,:where(.hb-migrated)
.flink,:where(.hb-migrated)
.fgroup {
  display: flex;
  flex-wrap: wrap;
}

:where(.hb-migrated) .footer-inner {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  justify-content: space-between;
}

:where(.hb-migrated) .footer-logo {
  width: 18.333%;
  text-align: center;
  font-size: 16px;
}

:where(.hb-migrated) .flogo {
  margin-bottom: 30px;
}

:where(.hb-migrated) .footer-nav {
  width: 20%;
}

:where(.hb-migrated) .footer-nav ul {
  font-size: 14px;
  text-align: left;
  height: 100%;
}

:where(.hb-migrated) .footer-nav ul li {
  margin-bottom: 12px;
}

:where(.hb-migrated) .footer-nav ul li a {
  color: #000;
  text-decoration: none;
}

:where(.hb-migrated) .footer-nav ul li a:hover {
  color: #666;
  text-decoration: underline;
}

:where(.hb-migrated) .footer-link {
  width: 30%;
  align-items: stretch;
}

:where(.hb-migrated) .flink {
  justify-content: flex-end;
  margin-bottom: 20px;
}

:where(.hb-migrated) .flink li {
  margin-left: 60px;
}

:where(.hb-migrated) .flink li img {
  height: 28px;
  width: auto;
}

:where(.hb-migrated) .fgroup {
  justify-content: flex-end;
  margin-bottom: 40px;
}

:where(.hb-migrated) .fgroup li {
  margin-left: 40px;
}

:where(.hb-migrated) .fgroup li a img {
  height: 50px;
  width: auto;
}

:where(.hb-migrated) .copy {
  font-family: Helvetica;
  font-size: 11px;
  text-align: right;
}





:where(.hb-migrated) .hide,:where(.hb-migrated)
.about-img{
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

:where(.hb-migrated) .mission-ico,:where(.hb-migrated)
.about-text{
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: translate(-40px, 0);
  transform: translate(-40px, 0);
}

:where(.hb-migrated) .mission-text{
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: translate(40px, 0);
  transform: translate(40px, 0);
}

:where(.hb-migrated) .moves{
  opacity: 1;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}




:where(.hb-migrated) .fade-left{
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1s ease, transform 1s ease;
}


:where(.hb-migrated) .fade-right{
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 1s ease, transform 1s ease;
}


:where(.hb-migrated) .fade-up{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}


:where(.hb-migrated) .fade-down{
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}


:where(.hb-migrated) .fade-left.moves,:where(.hb-migrated)
.fade-right.moves,:where(.hb-migrated)
.fade-up.moves,:where(.hb-migrated)
.fade-down.moves{
  opacity: 1;
  transform: none;
}


:where(.hb-migrated) .delay-1{ transition-delay: .1s; }
:where(.hb-migrated) .delay-2{ transition-delay: .2s; }
:where(.hb-migrated) .delay-3{ transition-delay: .3s; }
:where(.hb-migrated) .delay-4{ transition-delay: .4s; }
:where(.hb-migrated) .delay-5{ transition-delay: .5s; }
:where(.hb-migrated) .delay-6{ transition-delay: .6s; }

:where(.hb-migrated) .cont-subttl.hide{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s ease;
}

:where(.hb-migrated) .cont-subttl.moves{
  opacity: 1;
  transform: translateY(0);
}



:where(.hb-migrated) .hide{
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1.4s cubic-bezier(.22,.61,.36,1),
    transform 1.4s cubic-bezier(.22,.61,.36,1);
}

:where(.hb-migrated) .moves{
  opacity: 1;
  transform: translateY(0);
}

:where(.hb-migrated) .cont-ttl.moves,:where(.hb-migrated)
.section-heading.moves{
  transition-delay: .1s;
}

:where(.hb-migrated) .cont-subttl.moves{
  transition-delay: .25s;
}



:where(.hb-migrated) .shop-links-circle.hide {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

:where(.hb-migrated) .shop-links-circle.moves {
  opacity: 1;
  transform: translate(0, 0);
}

:where(.hb-migrated) .shop-links-card:nth-child(1) .shop-links-circle {
  transition-delay: 0s;
}

:where(.hb-migrated) .shop-links-card:nth-child(2) .shop-links-circle {
  transition-delay: 0.15s;
}

:where(.hb-migrated) .shop-links-card:nth-child(3) .shop-links-circle {
  transition-delay: 0.3s;
}



:where(.hb-migrated) .group-card.hide {
  opacity: 0;
  transform: translateY(30px);
}

:where(.hb-migrated) .group-card.moves {
  opacity: 1;
  transform: translate(0, 0);
}

:where(.hb-migrated) .groupl-list li:nth-child(1).group-card {
  transition-delay: 0s;
}

:where(.hb-migrated) .groupl-list li:nth-child(2).group-card {
  transition-delay: 0.15s;
}



:where(.hb-migrated) .flow-text-track{
  animation: hebenaFlowText 150s linear infinite;
}

@keyframes hebenaFlowText {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

:where(.hb-migrated) .flow-text-area:hover .flow-text-track{
  animation-play-state: paused;
}




:where(.hb-migrated) .about-alt-section .hide{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}


:where(.hb-migrated) .about-alt-section .moves{
  opacity: 1;
  transform: translateY(0);
}


:where(.hb-migrated) .about-alt-left.hide{
  opacity: 0;
  transform: translateX(-40px);
  transition: all 1s ease;
}


:where(.hb-migrated) .about-alt-right.hide{
  opacity: 0;
  transform: translateX(40px);
  transition: all 1s ease;
}


:where(.hb-migrated) .about-alt-left.moves,:where(.hb-migrated)
.about-alt-right.moves{
  opacity: 1;
  transform: translateX(0);
}



:where(.hb-migrated) .mv-area{
  position: relative;
  max-height: 790px;
  overflow: hidden;
}


:where(.hb-migrated) .mv-slide,:where(.hb-migrated)
.mv-swiper,:where(.hb-migrated)
.mv-slide .swiper-wrapper,:where(.hb-migrated)
.mv-slide .swiper-slide{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

:where(.hb-migrated) .mv-slide .swiper-slide{
  position: relative;
}

:where(.hb-migrated) .mv-slide img{
  display: block;
  width: 100%;
  object-fit: cover;
  filter: brightness(0.85) contrast(1.1);
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}


:where(.hb-migrated) .mv-slide img{
  height: 790px;
}

:where(.hb-migrated) .mv-slide .swiper-pagination{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  z-index: 10;
}

:where(.hb-migrated) .mv-slide .swiper-pagination-bullet{
  background: #b7c9bd;
  opacity: 1;
}

:where(.hb-migrated) .mv-slide .swiper-pagination-bullet-active{
  background: #417751;
}

:where(.hb-migrated) .mv-slide .swiper-slide::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.2) 100%
  );
  z-index: 1;
}

:where(.hb-migrated) .mv-copy{
  position: absolute;
  right: 8%;
  top: 42%;
  transform: translateY(-50%);
  color: #fff;
  text-align: right;
  z-index: 2;
  opacity: 0;
  transition: all 1s ease;
}

:where(.hb-migrated) .swiper-slide-active .mv-copy{
  opacity: 1;
  transform: translateY(-50%);
}

:where(.hb-migrated) .mv-title{
  margin: 0 0 10px;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

:where(.hb-migrated) .mv-sub{
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  opacity: 0.85;
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .mv-area{
    max-height: none;
  }

  :where(.hb-migrated) .mv-slide,:where(.hb-migrated)
  .mv-swiper,:where(.hb-migrated)
  .mv-slide .swiper-wrapper,:where(.hb-migrated)
  .mv-slide .swiper-slide{
    height: 52vh !important;
    min-height: 360px !important;
  }

  :where(.hb-migrated) .mv-slide .swiper-slide{
    overflow: hidden;
  }

  :where(.hb-migrated) .mv-slide img{
    height: 100% !important;
    min-height: 0 !important;
    object-position: center center;
  }

  :where(.hb-migrated) .mv-slide .swiper-slide::before{
    display: none;
  }

  :where(.hb-migrated) .mv-copy{
    right: 6%;
    left: 6%;
    top: 56%;
    transform: translateY(-50%);
    text-align: left;
  }

  :where(.hb-migrated) .swiper-slide-active .mv-copy{
    transform: translateY(-50%);
  }

  :where(.hb-migrated) .mv-title{
    font-size: 18px;
    line-height: 1.35;
  }

  :where(.hb-migrated) .mv-sub{
    font-size: 10px;
    line-height: 1.5;
  }

  :where(.hb-migrated) .mv-slide .swiper-pagination{
    bottom: 12px;
  }
}


:where(.hb-migrated) .top-news-section{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #fff;
  padding: 46px 0 28px;
  margin-bottom: 60px;
}

:where(.hb-migrated) .top-news-head{
  width: 100%;
  margin: 0 0 28px;
  padding: 55px 6% 0;
  box-sizing: border-box;
  transform: translateY(60px);
}

:where(.hb-migrated) .top-news-title h2{
  margin: 0 0 8px;
  font-size: 52px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #222;
}

:where(.hb-migrated) .top-news-title p{
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #666;
}

:where(.hb-migrated) .top-news-body{
  width: 100%;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  background: #f8f8f8;
}

:where(.hb-migrated) .top-news-item{
  width: min(1200px, 92%);
  margin: 0 auto;
  padding: 24px 0;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
}

:where(.hb-migrated) .top-news-item:last-child{
  border-bottom: none;
}

:where(.hb-migrated) .top-news-date{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #417751;
}

:where(.hb-migrated) .top-news-text a{
  color: #333;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  transition: .25s ease;
}

:where(.hb-migrated) .top-news-text a:hover{
  color: #417751;
}

:where(.hb-migrated) .top-news-link{
  width: min(1200px, 92%);
  margin: 40px auto 0;
  text-align: center;
}

:where(.hb-migrated) .top-news-link a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: 1px solid #d8dfd0;
  border-radius: 999px;
  color: #417751;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  background: #fff;
  transition: .25s ease;
}

:where(.hb-migrated) .top-news-link a::after{
  content: "→";
  transition: .25s ease;
}

:where(.hb-migrated) .top-news-link a:hover{
  background: #f6f8f1;
  border-color: #bfd0b8;
}

:where(.hb-migrated) .top-news-link a:hover::after{
  transform: translateX(4px);
}



:where(.hb-migrated) .about-alt-section{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 110px 0;
  background: url("/hebena/migrated/367e2791889c10a0.jpg") center center / cover no-repeat fixed;
  overflow: hidden;
}

:where(.hb-migrated) .about-alt-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  z-index: 1;
}

:where(.hb-migrated) .about-alt-inner{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 70px;
  align-items: flex-start;
  color: #fff;
}

:where(.hb-migrated) .about-alt-left{
  width: 40%;
}

:where(.hb-migrated) .about-alt-right{
  width: 60%;
  margin-top: 30px;
}

:where(.hb-migrated) .about-alt-sub{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.12em;
  text-align: center;
}

:where(.hb-migrated) .about-alt-title{
  margin: 0;
  font-size: 56px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
}

:where(.hb-migrated) .about-alt-title-line{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 18px 0 34px;
}

:where(.hb-migrated) .about-alt-title-line span{
  display: block;
  width: 110px;
  height: 1px;
  background: rgba(255,255,255,0.9);
}

:where(.hb-migrated) .about-alt-icon{
  font-style: normal;
  font-size: 18px;
}

:where(.hb-migrated) .about-alt-text p{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 2.2;
}

:where(.hb-migrated) .about-alt-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 44px;
}

:where(.hb-migrated) .about-alt-item{
  min-width: 0;
}

:where(.hb-migrated) .about-alt-item-head{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

:where(.hb-migrated) .about-alt-item-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  flex-shrink: 0;
}

:where(.hb-migrated) .about-alt-item-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

:where(.hb-migrated) .about-alt-item h3{
  margin: 0;
  font-size: 32px;
  line-height: 1.35;
  font-weight: 700;
  word-break: keep-all;
}

:where(.hb-migrated) .about-alt-item p{
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: rgba(255,255,255,0.92);
}


:where(.hb-migrated) .about-alt-btn-wrap{
  margin-top: 48px;
}

:where(.hb-migrated) .about-alt-btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 240px;
  padding: 14px 18px 14px 28px;
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  color: #4c7a5c;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s ease;
}

:where(.hb-migrated) .about-alt-btn:hover{
  background: #fff;
  transform: translateY(-2px);
}

:where(.hb-migrated) .about-alt-btn-icon{
  position: relative;
  width: 26px;
  height: 26px;
  border: 1px solid #4c7a5c;
  border-radius: 50%;
  flex-shrink: 0;
}

:where(.hb-migrated) .about-alt-btn-icon::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid #4c7a5c;
  border-right: 2px solid #4c7a5c;
  transform: translate(-60%, -50%) rotate(45deg);
}



:where(.hb-migrated) .service-alt-top{
  position: relative;
  padding: 140px 0 120px;
  overflow: hidden;
  margin-bottom: 120px;
}

:where(.hb-migrated) .service-alt-top::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 260px;
  background: rgba(255,255,255,0.92);
  z-index: 1;
}


:where(.hb-migrated) .service-alt-top .inner{
  position: relative;
  z-index: 2;
}

:where(.hb-migrated) .service-alt-photo{
  width: 100%;
  height: 150px;
  margin: 0 auto 20px;
  overflow: hidden;
  border-radius: 12px;
  background: #f7f7f7;
}

:where(.hb-migrated) .service-alt-photo img{
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  transform: translateY(-18%);
}

:where(.hb-migrated) .photo-ec img{
  transform: translateY(0);
}


:where(.hb-migrated) .service-alt-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 80px;
}


:where(.hb-migrated) .service-alt-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #eaeaea;
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: all .3s ease;
  text-align: center;
}

:where(.hb-migrated) .service-alt-card:hover{
  transform: translateY(-6px);
}


:where(.hb-migrated) .service-alt-card h3{
  font-size: 20px;
  margin-bottom: 14px;
  color: #333;
}

:where(.hb-migrated) .service-alt-card p{
  flex-grow: 1;
  font-size: 14px;
  line-height: 2;
  color: #666;
}


:where(.hb-migrated) .service-alt-btn{
  display: inline-block;
  margin-top: 20px;
  padding: 10px 22px;
  font-size: 13px;
  color: #fff;
  background: #2f5d3a;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.3s ease;
}

:where(.hb-migrated) .service-alt-btn:hover{
  background: #24482d;
  transform: translateY(-2px);
}



:where(.hb-migrated) .service-top-area::after{
  background: rgba(0, 0, 0, 0.65) !important;
}

:where(.hb-migrated) .service-top-area .section-title{
  position: relative !important;
  z-index: 3 !important;
  text-align: center;
  margin-bottom: 55px;
}

:where(.hb-migrated) .service-top-area .section-title h2{
  margin-bottom: 20px !important;
  color: #fff !important;
  font-size: 52px !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  text-shadow: 0 6px 20px rgba(0,0,0,0.55) !important;
  opacity: 1 !important;
}

:where(.hb-migrated) .service-top-area .section-title p{
  color: rgba(255,255,255,0.95) !important;
  opacity: 1 !important;
}

:where(.hb-migrated) .service-top-area .cloud-cta-card{
  position: relative;
  z-index: 2;
}


:where(.hb-migrated) .service-alt-btn{
  display: inline-block;
  margin-top: 20px;
  padding: 10px 22px;
  font-size: 13px;
  color: #fff;
  background: #2f5d3a;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.3s ease;
}


:where(.hb-migrated) .service-alt-btn:hover{
  background: #24482d;
  transform: translateY(-2px);
}

:where(.hb-migrated) .service-alt-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

:where(.hb-migrated) .service-alt-card p{
  flex-grow: 1;
}

:where(.hb-migrated).home .service-top-area::after,:where(.hb-migrated).front-page .service-top-area::after{
  background: rgba(0, 0, 0, 0.65);
}

:where(.hb-migrated).home .service-top-area .section-title,:where(.hb-migrated).front-page .service-top-area .section-title{
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 55px;
}

:where(.hb-migrated).home .service-top-area .section-title h2,:where(.hb-migrated).front-page .service-top-area .section-title h2{
  margin-bottom: 20px;
  color: #fff;
  font-size: 52px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-shadow: 0 6px 20px rgba(0,0,0,0.55);
}

:where(.hb-migrated).home .service-top-area .section-title p,:where(.hb-migrated).front-page .service-top-area .section-title p{
  color: rgba(255,255,255,0.92);
}

:where(.hb-migrated).home .service-top-area .cloud-cta-card,:where(.hb-migrated).front-page .service-top-area .cloud-cta-card{
  position: relative;
  z-index: 2;
}

:where(.hb-migrated) .service-top-area::after{
  background: rgba(0, 0, 0, 0.65) !important;
}

:where(.hb-migrated) .service-top-area .section-title{
  position: relative !important;
  z-index: 3 !important;
  text-align: center;
  margin-bottom: 55px;
}

:where(.hb-migrated) .service-top-area .section-title h2{
  margin-bottom: 20px !important;
  color: #fff !important;
  font-size: 52px !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  text-shadow: 0 6px 20px rgba(0,0,0,0.55) !important;
  opacity: 1 !important;
}

:where(.hb-migrated) .service-top-area .section-title p{
  color: rgba(255,255,255,0.95) !important;
  opacity: 1 !important;
}



:where(.hb-migrated) .products-area{
  position: relative;
  z-index: 3;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  margin-top: 0;
  padding: 0 0 120px;
  background: #f5f5f5;
  border-radius: 0;
}

:where(.hb-migrated) .products-area .inner{
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

:where(.hb-migrated) .products-intro{
  max-width: 900px;
  margin: 0 auto 70px;
  text-align: center;
  padding: 0 20px;
}

:where(.hb-migrated) .products-intro p{
  font-size: 16px;
  line-height: 2;
  color: #555;
}

:where(.hb-migrated) .products-block{
  max-width: 1200px;
  margin: 0 auto 90px;
  padding: 0 20px;
}

:where(.hb-migrated) .products-block-head{
  text-align: center;
  margin-bottom: 40px;
}

:where(.hb-migrated) .products-block-head h3{
  font-size: 38px;
  font-weight: 500;
  color: #417751;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

:where(.hb-migrated) .products-block-head p{
  font-size: 16px;
  color: #666;
}

:where(.hb-migrated) .products-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

:where(.hb-migrated) .product-card{
  background: #fff;
  border: 1px solid #e6e2d9;
  box-shadow: 0 16px 36px rgba(0,0,0,0.08);
  overflow: hidden;
  border-radius: 16px;
}

:where(.hb-migrated) .product-card.featured{
  box-shadow: 0 22px 46px rgba(0,0,0,0.12);
}

:where(.hb-migrated) .product-thumb{
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

:where(.hb-migrated) .product-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

:where(.hb-migrated) .product-body{
  padding: 28px 28px 32px;
}

:where(.hb-migrated) .product-badge{
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  background: #417751;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

:where(.hb-migrated) .product-title{
  font-size: 28px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 14px;
  font-weight: 600;
}

:where(.hb-migrated) .product-text{
  font-size: 15px;
  line-height: 2;
  color: #555;
  margin-bottom: 24px;
}

:where(.hb-migrated) .product-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 14px 26px;
  background: linear-gradient(135deg,#417751,#2f5f3e);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  transition: .25s;
}

:where(.hb-migrated) .product-link::after{
  content: "→";
  margin-left: 8px;
}

:where(.hb-migrated) .product-link:hover{
  transform: translateY(-2px);
  opacity: .95;
}


:where(.hb-migrated) .current-product-one{
  max-width: 1100px;
  margin: 0 auto;
}

:where(.hb-migrated) .current-product-item{
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 100px;
}

:where(.hb-migrated) .current-product-item.reverse{
  flex-direction: row-reverse;
}


:where(.hb-migrated) .current-product-img{
  width: 50%;
}

:where(.hb-migrated) .current-product-img img{
  width: 100%;
  border-radius: 12px;
  display: block;
}


:where(.hb-migrated) .current-product-content{
  width: 50%;
}

:where(.hb-migrated) .current-product-content .label{
  display: inline-block;
  font-size: 12px;
  color: #2f5d3a;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}

:where(.hb-migrated) .current-product-content h3{
  font-size: 22px;
  margin-bottom: 20px;
}

:where(.hb-migrated) .current-product-content p{
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 30px;
}


:where(.hb-migrated) .current-product-content .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  background: #2f5d3a;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  transition: 0.3s;
}

:where(.hb-migrated) .current-product-content .btn:hover{
  transform: translateY(-2px);
  background: #24482d;
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .current-product-item{
    flex-direction: column;
    gap: 30px;
  }

  :where(.hb-migrated) .current-product-item.reverse{
    flex-direction: column;
  }

  :where(.hb-migrated) .current-product-img,:where(.hb-migrated)
  .current-product-content{
    width: 100%;
  }
}


:where(.hb-migrated) .archive-block{
  border-top: 1px solid #d8dfd8;
  padding-top: 70px;
  overflow: hidden;
}

:where(.hb-migrated) .archive-note{
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: #777;
  margin-bottom: 34px;
}

:where(.hb-migrated) .archive-card{
  background: rgba(255,255,255,0.72);
  border: 1px solid #ebe7e0;
  backdrop-filter: blur(4px);
  overflow: hidden;
  transition: .25s;
  border-radius: 14px;
}

:where(.hb-migrated) .archive-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}

:where(.hb-migrated) .archive-thumb{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
}

:where(.hb-migrated) .archive-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.88;
}

:where(.hb-migrated) .archive-label{
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-block;
  padding: 5px 10px;
  background: rgba(65,119,81,0.88);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.12em;
}

:where(.hb-migrated) .archive-body{
  padding: 18px 16px 22px;
  text-align: center;
}

:where(.hb-migrated) .archive-body h4{
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  font-weight: 500;
  margin-bottom: 8px;
}

:where(.hb-migrated) .archive-body p{
  font-size: 13px;
  color: #888;
}


:where(.hb-migrated) .archive-swiper.swiper-container{
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  padding: 10px 0 30px !important;
}

:where(.hb-migrated) .archive-swiper .swiper-wrapper{
  width: auto !important;
  align-items: stretch !important;
}

:where(.hb-migrated) .archive-swiper .swiper-slide{
  width: 250px !important;
  min-width: 250px !important;
  height: auto !important;
  box-sizing: border-box !important;
}

:where(.hb-migrated) .archive-swiper .archive-card{
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

:where(.hb-migrated) .archive-swiper .swiper-pagination{
  position: static !important;
  margin-top: 20px !important;
  text-align: center !important;
}


:where(.hb-migrated) .archive-swiper .archive-thumb{
  aspect-ratio: 1 / 1;
}

:where(.hb-migrated) .archive-swiper .archive-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


:where(.hb-migrated) .products-hero-head{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 350px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: -90px;
  margin-bottom: 0;
  z-index: 5;

  background-image: var(--bg-product);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

:where(.hb-migrated) .products-hero-head::before{
  display: none;
}

:where(.hb-migrated) .products-hero-head::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 1;
}

:where(.hb-migrated) .products-hero-head .section-title{
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
}

:where(.hb-migrated) .products-hero-head .section-title.is-white h2{
  color: #fff;
  text-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

:where(.hb-migrated) .products-hero-head .section-title.is-white p{
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}


:where(.hb-migrated) .products-area .section-lead{
  margin: 105px auto 70px;
}

:where(.hb-migrated) .products-area{
  margin-top: 0;
  padding-top: 0px;
}

:where(.hb-migrated) .products-area.section{
  padding-top: 0 !important;
}


:where(.hb-migrated) .flow-text-area{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  padding: 24px 0 10px;
  background: #f5f5f5;
}

:where(.hb-migrated) .flow-text-track{
  display: flex;
  width: max-content;
  white-space: nowrap;
}

:where(.hb-migrated) .flow-text-track span{
  display: inline-block;
  padding-right: 60px;
  font-size: 80px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(65, 119, 81, 0.18);
  user-select: none;
  pointer-events: none;
}


:where(.hb-migrated) .flow-text-area::before,:where(.hb-migrated)
.flow-text-area::after{
  content: "";
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

:where(.hb-migrated) .flow-text-area::before{
  left: 0;
  background: linear-gradient(to right, #f5f5f5, transparent);
}

:where(.hb-migrated) .flow-text-area::after{
  right: 0;
  background: linear-gradient(to left, #f5f5f5, transparent);
}


:where(.hb-migrated) .top-cta-area{
  position: relative;
  margin-top: 120px;
  padding: 180px 0;
  overflow: hidden;
  background: rgba(247, 248, 245, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

:where(.hb-migrated) .top-cta-area::before{
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--bg-contact);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  z-index: 0;
}

:where(.hb-migrated) .top-cta-area::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(47, 93, 70, 0.62);
  z-index: 0;
}

:where(.hb-migrated) .top-cta-inner{
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 40px;
  text-align: center;
  box-sizing: border-box;
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0.68),
    rgba(255,255,255,0.56)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.45);
}

:where(.hb-migrated) .top-cta-sub{
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #5f7d66;
}

:where(.hb-migrated) .top-cta-title{
  margin-bottom: 18px;
  font-size: 40px;
  line-height: 1.45;
  font-weight: 700;
  color: #2f5d46;
}

:where(.hb-migrated) .top-cta-text{
  max-width: 680px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 2;
  color: #5e5e5e;
}

:where(.hb-migrated) .top-cta-buttons{
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 42px;
  flex-wrap: wrap;
}

:where(.hb-migrated) .top-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease, background .3s ease;
  box-sizing: border-box;
}

:where(.hb-migrated) .top-cta-btn.is-fill{
  background: linear-gradient(135deg,#417751,#2f5f3e);
  color: #fff;
  box-shadow: 0 12px 28px rgba(47,95,62,0.28);
}

:where(.hb-migrated) .top-cta-btn.is-line{
  border: 1px solid rgba(63,111,82,0.7);
  color: #2f5d46;
  background: rgba(255,255,255,0.9);
}

:where(.hb-migrated) .top-cta-btn:hover{
  transform: translateY(-2px);
}

:where(.hb-migrated) .top-cta-btn.is-fill:hover{
  box-shadow: 0 18px 34px rgba(47,95,62,0.34);
}

:where(.hb-migrated) .top-cta-btn.is-line:hover{
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

@media screen and (max-width: 768px){
  :where(.hb-migrated) .top-cta-area{
    padding: 80px 0;
  }

  :where(.hb-migrated) .top-cta-inner{
    padding: 40px 20px;
    border-radius: 18px;
  }

  :where(.hb-migrated) .top-cta-title{
    font-size: 28px;
    line-height: 1.5;
  }

  :where(.hb-migrated) .top-cta-text{
    font-size: 14px;
    line-height: 1.9;
  }

  :where(.hb-migrated) .top-cta-buttons{
    display: block;
    margin-top: 30px;
  }

  :where(.hb-migrated) .top-cta-btn{
    display: block;
    width: 100%;
    min-width: 0;
  }

  :where(.hb-migrated) .top-cta-btn + .top-cta-btn{
    margin-top: 14px;
  }
}


:where(.hb-migrated) .shop-links-area{
  position: relative;
  z-index: 3;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding: 100px 0;
  background: #fff;
  border-radius: 0;
}

:where(.hb-migrated) .shop-links-area .inner{
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

:where(.hb-migrated) .shop-links-head{
  text-align: center;
  margin-bottom: 50px;
}

:where(.hb-migrated) .shop-links-head h2{
  margin: 0 0 14px;
  color: #3e6b4f;
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-weight: 700;
}

:where(.hb-migrated) .shop-links-head p{
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: #666;
}

:where(.hb-migrated) .shop-links-grid{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  justify-items: center;
}

:where(.hb-migrated) .shop-links-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #222;
  transition: transform .28s ease, opacity .28s ease;
}

:where(.hb-migrated) .shop-links-card:hover{
  transform: translateY(-4px);
}

:where(.hb-migrated) .shop-links-circle{
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e6e2d9;
  box-shadow:
    0 12px 28px rgba(15,23,42,0.06),
    0 2px 8px rgba(15,23,42,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  margin-bottom: 20px;
}

:where(.hb-migrated) .shop-links-circle img{
  max-width: 100%;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
}

:where(.hb-migrated) .shop-links-name{
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  letter-spacing: 0.03em;
  text-align: center;
}




:where(.hb-migrated) .info-area{
  position: relative;
  width: 100%;
  padding: 0;
  background: #f6f8f1;
  border-top: 1px solid #e2e8d9;
  border-bottom: 1px solid #e2e8d9;
}

:where(.hb-migrated) .info-inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 6%;
  gap: 24px;
  box-sizing: border-box;
}

:where(.hb-migrated) .info-list{
  max-width: 800px;
}

:where(.hb-migrated) .info-list dl{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 22px 0;
  margin: 0;
  border-bottom: 1px solid #e6e6e6;
  text-align: left;
  transition: .25s;
  box-sizing: border-box;
}

:where(.hb-migrated) .info-list dl:last-child{
  border-bottom: none;
}

:where(.hb-migrated) .info-list dl:hover{
  background: #f7f9f4;
}

:where(.hb-migrated) .info-list dl dt{
  min-width: 150px;
  margin-right: 28px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #417751;
}

:where(.hb-migrated) .info-list dl dd{
  flex: 1;
  font-size: 17px;
  line-height: 1.8;
  color: #333;
}

:where(.hb-migrated) .info-detail{
  max-width: 240px;
}

:where(.hb-migrated) .info-detail .btn{
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


:where(.hb-migrated) .privacy-area{
  padding: 80px 0;
}

:where(.hb-migrated) .privacy-inner{
  max-width: 900px;
  margin: 0 auto;
}

:where(.hb-migrated) .privacy-inner p{
  margin-bottom: 30px;
}



:where(.hb-migrated) .group-area{
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  padding: 100px 0;
  background: #f5f5f5;
  text-align: center;
}

:where(.hb-migrated) .group-area .inner{
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 0 24px;
}

:where(.hb-migrated) .groupl-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

:where(.hb-migrated) .groupl-list li{
  width: 320px;
  margin: 0 60px;
}

:where(.hb-migrated) .groupl-list li p.glogo{
  width: 100%;
  padding: 50px 0;
  background: #fff;
  margin-bottom: 15px;
}

:where(.hb-migrated) .groupl-list li p.glogo img{
  height: 120px;
  width: auto;
}

:where(.hb-migrated) .groupl-list li p.name{
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
}

:where(.hb-migrated) .groupl-list li p.detail{
  font-size: 16px;
}

:where(.hb-migrated) .group-card-link{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}


:where(.hb-migrated) .contact-area{
  padding: 80px 0;
}

:where(.hb-migrated) .contact-area .contact-inner{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

:where(.hb-migrated) .contact-area .contact-lead{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}


:where(.hb-migrated) .contact-area .contact-box{
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 28px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}


:where(.hb-migrated) .contact-area .contact-box .ttl{
  width: 120px;
  flex: 0 0 120px;
  padding-top: 12px;
  box-sizing: border-box;
}


:where(.hb-migrated) .contact-area .contact-box .ness{
  width: 44px;
  flex: 0 0 44px;
  font-size: 12px;
  font-weight: bold;
  background: #ff0000;
  color: #fff;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin-top: 12px;
}


:where(.hb-migrated) .contact-area .contact-box .form{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
}


:where(.hb-migrated) .contact-area input[type="text"],:where(.hb-migrated)
.contact-area input[type="email"],:where(.hb-migrated)
.contact-area input[type="tel"]{
  padding: 10px;
  width: 100%;
  font-size: 18px;
  border: 1px solid #c3e4cd !important;
  background: none;
  box-sizing: border-box;
}


:where(.hb-migrated) .contact-area textarea{
  resize: none;
  padding: 10px;
  width: 100%;
  font-size: 18px;
  border: 1px solid #c3e4cd !important;
  background: transparent;
  box-sizing: border-box;
}


:where(.hb-migrated) .contact-area input[type="file"]{
  max-width: 100%;
}


:where(.hb-migrated) .contact-area .contact-box.contact-box-file{
  align-items: center;
}

:where(.hb-migrated) .contact-area .contact-box.contact-box-file .ttl{
  padding-top: 0;
}

:where(.hb-migrated) .contact-area .contact-box.contact-box-file .ness{
  margin-top: 0;
}


:where(.hb-migrated) .contact-area .btn-send{
  width: 320px;
  margin: 40px auto 60px;
}

:where(.hb-migrated) .contact-area input[type="submit"] {
  display: block;
  width: 320px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 30px;
  border: none;
  background: #417751;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  margin: 18px auto 0;
}

@media screen and (min-width: 769px){
  :where(.hb-migrated) .contact-area input[type="submit"]:hover{
    opacity: 0.6;
  }
}


:where(.hb-migrated) .contact-area .wpcf7-not-valid-tip{
  font-size: 14px;
  font-weight: bold;
  color: #ff0000;
  margin-top: 6px;
}

:where(.hb-migrated) .contact-area .screen-reader-response{
  display: none;
}

:where(.hb-migrated) .contact-area .wpcf7-response-output{
  font-size: 20px;
  padding: 10px;
  background: #f9fcf3;
  font-weight: bold;
  text-align: center;
}


:where(.hb-migrated) .contact-area .redirect{
  font-size: 16px;
  text-align: center;
  padding: 80px 0;
}


:where(.hb-migrated) .contact-area .contact-box.contact-box-file .ness{
  background: none;
  color: #333;
  border: none;
}

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

  :where(.hb-migrated) .contact-area .contact-lead {
      font-size: 14px;
      margin-bottom: 30px;
      line-height: 1.8;
      padding: 0 20px;
  }

}


:where(.hb-migrated) .rec-area article{
  max-width: 1200px;
  padding: 50px;
  box-shadow: 0 0 10px #ccc;
  margin: 0 auto 80px;
}

:where(.hb-migrated) .rec-area dl{
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px dotted #ccc;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
}

:where(.hb-migrated) .rec-area dl:last-child{
  padding: 0;
  margin: 0;
  border: none;
}

:where(.hb-migrated) .rec-area dl dt{
  width: 20%;
  font-weight: bold;
  color: #417751;
}

:where(.hb-migrated) .rec-area dl dd{
  width: 80%;
}

:where(.hb-migrated) .rec-area dl dd p{
  margin-bottom: 10px;
}

:where(.hb-migrated) .ttl-recruit{
  background: url("/hebena/migrated/aafd2cee12bb5262.webp") center center no-repeat;
  background-size: 100% auto;
  margin-bottom: 50px;
}

:where(.hb-migrated) .appeal{
  font-size: 20px;
  text-align: center;
  margin-bottom: 50px;
}

:where(.hb-migrated) .rec-ttl{
  position: relative;
  font-weight: bold;
  font-size: 22px;
  color: #417751;
  margin-bottom: 60px;
  padding-bottom: 20px;
  text-align: center;
}

:where(.hb-migrated) .rec-ttl:after{
  content: '';
  width: 70px;
  height: 2px;
  background: #417751;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -35px;
}






:where(.hb-migrated) .info-page-area{
  padding: 80px 0;
  background: #fafaf7;
}

:where(.hb-migrated) .info-page-inner{
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 48px;
  background: #fff;
  border: 1px solid #ece9e1;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  color: #333;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 2;
}

:where(.hb-migrated) .info-page-inner li{
  display: flex;
  flex-wrap: wrap;
  padding: 30px 0;
  border-bottom: 1px dotted #417751;
}

:where(.hb-migrated) .info-page-inner li p.date{
  color: #417751;
  margin-bottom: 10px;
}

:where(.hb-migrated) .info-page-inner li p.ttl,:where(.hb-migrated)
.info-page-inner .ttl{
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: .03em;
}

:where(.hb-migrated) .info-page-text-s{
  width: 70%;
  margin-right: 4%;
}

:where(.hb-migrated) .info-page-img{
  width: 26%;
}

:where(.hb-migrated) .info-page-text-l{
  width: 100%;
}


:where(.hb-migrated) .info-page-inner p,:where(.hb-migrated)
.info-page-inner li,:where(.hb-migrated)
.info-page-inner dd{
  font-weight: 400;
  line-height: 2;
  letter-spacing: .02em;
}

:where(.hb-migrated) .info-page-inner p{
  margin-bottom: 1.4em;
}

:where(.hb-migrated) .info-page-inner b,:where(.hb-migrated)
.info-page-inner strong{
  font-weight: 600;
}

:where(.hb-migrated) .info-page-inner a{
  color: #b84a5a;
  text-underline-offset: 3px;
}







:where(.hb-migrated) .contact-top-page{
  padding: 80px 0 100px;
  background: #f7f7f7;
}

:where(.hb-migrated) .contact-top-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

:where(.hb-migrated) .contact-top-lead{
  margin: 0 0 36px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
}

:where(.hb-migrated) .contact-top-list{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 90px;
}

:where(.hb-migrated) .contact-top-card{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 32px 42px;
  background: #efefef;
  border-radius: 14px;
  text-decoration: none;
  color: #333;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

:where(.hb-migrated) .contact-top-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  background: #ebebeb;
}

:where(.hb-migrated) .contact-top-card__text{
  flex: 1 1 auto;
}

:where(.hb-migrated) .contact-top-card__lead{
  margin: 0;
  font-size: 16px;
  line-height: 2;
  color: #555;
}

:where(.hb-migrated) .contact-top-card__title{
  flex: 0 0 280px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  text-align: right;
}

:where(.hb-migrated) .contact-top-card__title h3{
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}

:where(.hb-migrated) .contact-top-card__title span{
  font-size: 20px;
  color: #d97878;
  line-height: 1;
}





:where(.hb-migrated) .contact-curtain-stage{
  position: relative;
  width: 100vw;
  height: 220vh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #f3f3f3;
}


:where(.hb-migrated) .contact-curtain-stage__visual{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

:where(.hb-migrated) .contact-curtain-stage__bg{
  position: absolute;
  inset: 0;
  background: url("/hebena/migrated/367e2791889c10a0.jpg") center center / cover no-repeat;
  transform: scale(1.02);
}

:where(.hb-migrated) .contact-curtain-stage__visual::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.16);
  z-index: 1;
}

:where(.hb-migrated) .contact-curtain-stage__copy{
  position: absolute;
  right: 6%;
  bottom: 14%;
  z-index: 2;
  text-align: right;
  color: #fff;
}

:where(.hb-migrated) .contact-curtain-stage__copy h2{
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.2);
}

:where(.hb-migrated) .contact-curtain-stage__copy p{
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.92);
}


:where(.hb-migrated) .contact-curtain-panel{
  position: relative;
  z-index: 3;
  margin-top: -100vh;
  min-height: 120vh;
  background: #f3f3f3;
  padding: 0px 0 40vh;
  box-sizing: border-box;
}


:where(.hb-migrated) .contact-top-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 0;
  box-sizing: border-box;
}

:where(.hb-migrated) .contact-top-lead{
  margin: 0 0 36px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
}

:where(.hb-migrated) .contact-top-list{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

:where(.hb-migrated) .contact-top-card{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 32px 42px;
  background: #efefef;
  border-radius: 14px;
  text-decoration: none;
  color: #333;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

:where(.hb-migrated) .contact-top-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  background: #ebebeb;
}

:where(.hb-migrated) .contact-top-card__text{
  flex: 1 1 auto;
}

:where(.hb-migrated) .contact-top-card__lead{
  margin: 0;
  font-size: 16px;
  line-height: 2;
  color: #555;
}

:where(.hb-migrated) .contact-top-card__title{
  flex: 0 0 280px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  text-align: right;
}

:where(.hb-migrated) .contact-top-card__title h3{
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}

:where(.hb-migrated) .contact-top-card__title span{
  font-size: 20px;
  color: #d97878;
  line-height: 1;
}

:where(.hb-migrated) .page-id-670 .wrapper{
  padding-top: 0 !important;
}




:where(.hb-migrated) .products-hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 300px;

  background-image: var(--bg-living);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

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

:where(.hb-migrated) .products-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.22);
  margin-top: -110px;
}

:where(.hb-migrated) .products-hero__inner{
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}

:where(.hb-migrated) .products-hero__sub{
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #fff;
}

:where(.hb-migrated) .products-hero h1{
  margin: 0;
  font-size: 58px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.16);
}

:where(.hb-migrated) .products-hero__lead{
  margin: 12px 0 0;
  font-size: 13px;
  color: #fff;
}

:where(.hb-migrated) .products-archive{
  padding: 56px 0 90px;
  background: #f7f7f7;
}

:where(.hb-migrated) .products-archive__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 60px;
  box-sizing: border-box;
}

:where(.hb-migrated) .products-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 18px;
}

:where(.hb-migrated) .product-card{
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

:where(.hb-migrated) .product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0,0,0,0.10);
}

:where(.hb-migrated) .product-card__link{
  display: block;
  color: #333;
  text-decoration: none;
  height: 100%;
}

:where(.hb-migrated) .product-card__thumb{
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.hb-migrated) .product-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}

:where(.hb-migrated) .product-card__body{
  padding: 16px 16px 18px;
}

:where(.hb-migrated) .product-card__title{
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  color: #333;
  min-height: 3.2em;
}

:where(.hb-migrated) .product-card__excerpt{
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.9;
  color: #666;
  min-height: 5.4em;
}

:where(.hb-migrated) .product-card__button{
  display: inline-block;
  min-width: 96px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #417751;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: center;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

:where(.hb-migrated) .product-card:hover .product-card__button{
  background: #356341;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(65,119,81,0.24);
}

:where(.hb-migrated).page-id-686{
  background: #f5f5f5;
}

:where(.hb-migrated) .products-archive{
  background: transparent;
}


:where(.hb-migrated) .products-archive-sub{
  padding: 20px 0 100px;
}

:where(.hb-migrated) .products-section-title{
  margin: 0 0 30px;
  font-size: 30px;
  text-align: center;
  color: #666;
  letter-spacing: 0.05em;
}




:where(.hb-migrated) .product-card--archive{
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}


:where(.hb-migrated) .product-card--archive .product-card__body{
  padding-bottom: 18px;
}


:where(.hb-migrated) .product-intro{
  padding: 70px 0 90px;
}

:where(.hb-migrated) .product-intro-card{
  position: relative;
  width: min(1200px, 92%);
  margin: 0 auto;
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  background: #f7f7f7;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}

:where(.hb-migrated) .product-intro-image img{
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
}

:where(.hb-migrated) .product-intro-text{
  position: absolute;
  top: 50%;
  right: 7%;
  transform: translateY(-50%);
  width: min(420px, 42%);
  padding: 36px 40px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 16px;
  color: #333;
  line-height: 2;
  letter-spacing: .04em;
  box-sizing: border-box;
}

:where(.hb-migrated) .product-intro-text p{
  margin: 0 0 1.4em;
}

:where(.hb-migrated) .product-intro-text p:last-child{
  margin-bottom: 0;
}

:where(.hb-migrated) .product-intro-card.moves{
  opacity: 1;
  transform: translateY(0);
}

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

  :where(.hb-migrated) .products-archive__inner{
    padding-left: 16px;
    padding-right: 16px;
  }

  :where(.hb-migrated) .products-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }

  :where(.hb-migrated) .product-card__body{
    padding: 14px 12px 16px;
  }

  :where(.hb-migrated) .product-card__title{
    font-size: 13px;
    line-height: 1.6;
  }

  :where(.hb-migrated) .product-card__excerpt{
    font-size: 11px;
    line-height: 1.7;
  }

  :where(.hb-migrated) .product-card__button{
    min-width: 88px;
    padding: 8px 12px;
  }

}



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


  :where(.hb-migrated) .cont-ttl{
    margin-bottom: 30px;
  }

  :where(.hb-migrated) .cont-ttl h2{
    margin-bottom: 10px;
    font-size: 36px;
  }

  :where(.hb-migrated) .cont-ttl p{
    font-size: 14px;
  }

  :where(.hb-migrated) .cont-ttl h2 img{
    height: 24px;
  }


  :where(.hb-migrated) .section-title{
    margin-bottom: 30px;
  }

  :where(.hb-migrated) .section-title h2{
    margin-bottom: 10px;
    font-size: 36px;
  }

  :where(.hb-migrated) .section-title p{
    font-size: 14px;
  }

  :where(.hb-migrated) .section-subtitle h3{
    font-size: 28px;
  }

  :where(.hb-migrated) .section-subtitle p{
    font-size: 14px;
  }

  :where(.hb-migrated) .section-lead p{
    font-size: 15px;
    line-height: 1.8;
  }


  :where(.hb-migrated),:where(.hb-migrated){
    overflow-x: hidden;
  }

  :where(.hb-migrated) .pc{
    display: none !important;
  }
}


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

  :where(.hb-migrated) .hebena-header{
    height: 60px;
  }

  :where(.hb-migrated) .header-inner{
    padding: 10px 0;
  }

  :where(.hb-migrated) .header-logo{
    width: 100%;
    text-align: center;
  }

  :where(.hb-migrated) .header-logo img{
    height: 40px;
    width: auto;
  }

  :where(.hb-migrated) .header-nav{
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    display: none;
  }

  :where(.hb-migrated) .header-nav li{
    margin: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #c3e4cd;
    padding: 0 6%;
    background: #fff;
  }

  :where(.hb-migrated) .header-nav li:last-child{
    border-bottom: 1px solid #c3e4cd;
    background: #f9fcf3;
  }

  :where(.hb-migrated) .header-nav li a{
    display: block;
  }

  :where(.hb-migrated) .header-cart a{
    padding: 0;
  }

  :where(.hb-migrated) .header-cart a:before{
    left: auto;
    right: 0;
  }

  :where(.hb-migrated) .menu{
    top: 15px;
    right: 20px;
  }
}

@media screen and (min-width: 769px){
  :where(.hb-migrated) .menu{
    display: none;
  }
}



@media screen and (max-width: 768px) {
  :where(.hb-migrated) .footer-logo {
    width: 100%;
    font-size: 12px;
    margin-bottom: 20px;
  }

  :where(.hb-migrated) .flogo {
    margin-bottom: 15px;
  }

  :where(.hb-migrated) .flogo img {
    width: 30%;
  }

  :where(.hb-migrated) .footer-nav {
    width: 100%;
    margin-bottom: 20px;
  }

  :where(.hb-migrated) .footer-nav ul {
    font-size: 13px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
  }

  :where(.hb-migrated) .footer-nav ul li {
    width: 50%;
    margin-bottom: 20px;
  }

  :where(.hb-migrated) .footer-link {
    width: 100%;
  }

  :where(.hb-migrated) .flink {
    justify-content: space-around;
    margin-bottom: 40px;
  }

  :where(.hb-migrated) .flink li,:where(.hb-migrated)
  .fgroup li {
    margin: 0;
  }

  :where(.hb-migrated) .fgroup {
    justify-content: space-around;
  }

  :where(.hb-migrated) .copy {
    text-align: center;
  }
}



@media screen and (max-width: 768px){
  :where(.hb-migrated) .mission-ico,:where(.hb-migrated)
  .about-text{
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  :where(.hb-migrated) .mission-text{
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  :where(.hb-migrated) .fade-left,:where(.hb-migrated)
  .fade-right{
    transform: translateY(24px);
  }
}

  :where(.hb-migrated)




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

  :where(.hb-migrated) .top-news-section{
    padding: 46px 0 54px;
  }

  :where(.hb-migrated) .top-news-head{
    margin: 0 0 20px;
    padding: 36px 6% 0;
  }

  :where(.hb-migrated) .top-news-title h2{
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  :where(.hb-migrated) .top-news-title p{
    font-size: 13px;
    line-height: 1.5;
  }

  :where(.hb-migrated) .top-news-item{
    width: 92%;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }

  :where(.hb-migrated) .top-news-date{
    font-size: 13px;
  }

  :where(.hb-migrated) .top-news-text a{
    font-size: 15px;
    line-height: 1.7;
  }

  :where(.hb-migrated) .top-news-link{
    width: 92%;
    margin-top: 28px;
  }

  :where(.hb-migrated) .top-news-link a{
    padding: 10px 18px;
    font-size: 13px;
  }
}





@media screen and (max-width: 1024px){
  :where(.hb-migrated) .about-alt-inner{
    gap: 50px;
    padding: 0 30px;
  }

  :where(.hb-migrated) .about-alt-left{
    width: 42%;
  }

  :where(.hb-migrated) .about-alt-right{
    width: 58%;
  }

  :where(.hb-migrated) .about-alt-title{
    font-size: 44px;
  }

  :where(.hb-migrated) .about-alt-item-icon{
    width: 60px;
    height: 60px;
  }

  :where(.hb-migrated) .about-alt-item h3{
    font-size: 25px;
  }
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .about-alt-section{
    padding: 80px 0;
    background-attachment: scroll;
  }

  :where(.hb-migrated) .about-alt-inner{
    display: flex;
    flex-direction: column;
    padding: 0 20px;
  }

  :where(.hb-migrated) .about-alt-left,:where(.hb-migrated)
  .about-alt-right{
    width: 100%;
  }

  :where(.hb-migrated) .about-alt-left{
    margin-bottom: 40px;
  }

  :where(.hb-migrated) .about-alt-title{
    font-size: 36px;
  }

  :where(.hb-migrated) .about-alt-title-line span{
    width: 70px;
  }

  :where(.hb-migrated) .about-alt-text p{
    font-size: 14px;
    line-height: 2;
  }

  :where(.hb-migrated) .about-alt-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  :where(.hb-migrated) .about-alt-item-head{
    gap: 12px;
    margin-bottom: 10px;
  }

  :where(.hb-migrated) .about-alt-item-icon{
    width: 52px;
    height: 52px;
  }

  :where(.hb-migrated) .about-alt-item h3{
    font-size: 22px;
  }

  :where(.hb-migrated) .about-alt-item p{
    font-size: 14px;
    line-height: 1.9;
  }

  :where(.hb-migrated) .about-alt-btn-wrap{
    margin-top: 32px;
    text-align: center;
  }

  :where(.hb-migrated) .about-alt-btn{
    margin: 0 auto;
  }
}


@media screen and (max-width: 768px){
  :where(.hb-migrated).home .about-area .about-lead,:where(.hb-migrated).front-page .about-area .about-lead{
    margin-top: 14px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 1.9;
  }

  :where(.hb-migrated).home .about-area .about-heading,:where(.hb-migrated).front-page .about-area .about-heading{
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
  }
}




@media screen and (max-width: 1024px){
  :where(.hb-migrated) .service-alt-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .service-alt-grid{
    grid-template-columns: 1fr;
  }

  :where(.hb-migrated) .service-alt-top .inner{
    padding-left: 20px;
    padding-right: 20px;
  }
}



@media screen and (max-width: 768px){
  :where(.hb-migrated) .products-hero-head{
    position: relative;
    height: 260px;
    overflow: hidden;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
  }

  :where(.hb-migrated) .products-hero-head::after{
    background: rgba(0, 0, 0, 0.18) !important;
  }

  :where(.hb-migrated) .products-hero-head .section-title{
    position: relative;
    z-index: 2;
  }

  :where(.hb-migrated) .products-area{
    width: 100%;
    max-width: 100%;
    margin: 0;
    left: auto;
    right: auto;
    transform: none;
    padding: 80px 0 90px;
  }

  :where(.hb-migrated) .products-area .inner{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  :where(.hb-migrated) .products-intro,:where(.hb-migrated)
  .products-block{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  :where(.hb-migrated) .products-intro{
    margin-bottom: 50px;
  }

  :where(.hb-migrated) .product-intro-card{
    display: block;
    position: relative;
    overflow: visible;
  }

  :where(.hb-migrated) .product-intro-image{
    width: 100%;
  }

  :where(.hb-migrated) .product-intro-image img{
    width: 100%;
    height: auto;
    display: block;
  }

  :where(.hb-migrated) .product-intro-text{
    position: static !important;
    transform: none !important;
    width: auto !important;
    margin: 20px;
    padding: 22px 20px;
    background: rgba(255,255,255,.86);
    border-radius: 16px;
    text-align: left;
  }

  :where(.hb-migrated) .product-intro-text p{
    line-height: 2;
    margin: 0 0 1.2em;
  }

  :where(.hb-migrated) .products-grid{
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
  }

  :where(.hb-migrated) .product-card{
    max-width: 340px;
    margin: 0 auto;
  }

  :where(.hb-migrated) .product-body{
    padding: 22px 20px 24px;
  }

  :where(.hb-migrated) .product-title{
    font-size: 22px;
  }

  :where(.hb-migrated) .product-text{
    font-size: 14px;
    line-height: 1.9;
  }

  :where(.hb-migrated) .product-link{
    width: 100%;
    min-width: 0;
    padding: 14px 20px;
  }

  :where(.hb-migrated) .products-block-head h3{
    font-size: 28px;
  }

  :where(.hb-migrated) .archive-grid{
    grid-template-columns: 1fr;
  }
}



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

  :where(.hb-migrated) .flow-text-area{
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    overflow-x: clip;
    padding: 16px 0 6px;
  }

  :where(.hb-migrated) .flow-text-track span{
    font-size: 52px;
    padding-right: 36px;
  }
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .floating-contact{
    display: none;
  }
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .top-cta-area{
    padding: 80px 0;
  }

  :where(.hb-migrated) .top-cta-inner{
    padding: 40px 20px;
    border-radius: 18px;
  }

  :where(.hb-migrated) .top-cta-title{
    font-size: 22px;
    line-height: 1.5;
  }

  :where(.hb-migrated) .top-cta-text{
    font-size: 14px;
    line-height: 1.9;
  }

  :where(.hb-migrated) .top-cta-buttons{
    display: block;
    margin-top: 30px;
  }

  :where(.hb-migrated) .top-cta-btn{
    display: block;
    width: 100%;
    min-width: 0;
  }

  :where(.hb-migrated) .top-cta-btn + .top-cta-btn{
    margin-top: 14px;
  }
}




@media screen and (max-width: 1024px){
  :where(.hb-migrated) .shop-links-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  :where(.hb-migrated) .shop-links-circle{
    width: 200px;
    height: 200px;
  }
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .shop-links-area{
    padding: 80px 16px 90px;
  }

  :where(.hb-migrated) .shop-links-head h2{
    font-size: 36px;
  }

  :where(.hb-migrated) .shop-links-head p{
    font-size: 14px;
  }

  :where(.hb-migrated) .shop-links-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  :where(.hb-migrated) .shop-links-circle{
    width: 180px;
    height: 180px;
    padding: 24px;
    margin-bottom: 16px;
  }

  :where(.hb-migrated) .shop-links-circle img{
    max-height: 72px;
  }

  :where(.hb-migrated) .shop-links-name{
    font-size: 18px;
  }
}




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

  :where(.hb-migrated) .info-area{
    padding: 20px 4%;
  }

  :where(.hb-migrated) .info-inner{
    display: block;
    padding: 0;
    gap: 0;
  }

  :where(.hb-migrated) .info-list dl{
    font-size: 14px;
    padding: 18px 0;
  }

  :where(.hb-migrated) .info-list dl dt{
    width: 100%;
    margin: 0 0 5px 0;
  }

  :where(.hb-migrated) .info-detail{
    margin: 20px auto 0;
    max-width: 200px;
  }
}



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

  :where(.hb-migrated) .privacy-area{
    padding: 30px 4%;
  }

  :where(.hb-migrated) .privacy-inner p{
    margin-bottom: 20px;
    font-size: 14px;
  }

  :where(.hb-migrated) .privacy-inner p b{
    font-weight: bold;
    padding-bottom: 10px;
    font-size: 15px;
  }
}



@media screen and (max-width: 768px){
  :where(.hb-migrated) .group-area{
    padding: 30px 0;
  }

  :where(.hb-migrated) .groupl-list{
    justify-content: space-between;
  }

  :where(.hb-migrated) .groupl-list li{
    width: 48%;
    margin: 0;
  }

  :where(.hb-migrated) .groupl-list li p.glogo{
    padding: 30px 0;
    margin-bottom: 10px;
  }

  :where(.hb-migrated) .groupl-list li p.glogo img{
    height: 80px;
  }

  :where(.hb-migrated) .groupl-list li p.name{
    font-size: 14px;
    margin-bottom: 10px;
  }

  :where(.hb-migrated) .groupl-list li p.detail{
    font-size: 13px;
  }
}



@media screen and (max-width: 768px){
  :where(.hb-migrated) .contact-area{
    padding: 50px 0;
  }

  :where(.hb-migrated) .contact-area .contact-box{
    display: block;
    margin-bottom: 24px;
  }

  :where(.hb-migrated) .contact-area .contact-box .ttl,:where(.hb-migrated)
  .contact-area .contact-box .ness,:where(.hb-migrated)
  .contact-area .contact-box .form{
    width: 100%;
    flex: none;
  }

  :where(.hb-migrated) .contact-area .contact-box .ttl{
    padding-top: 0;
    margin-bottom: 6px;
  }

  :where(.hb-migrated) .contact-area .contact-box .ness{
    margin: 0 0 8px;
  }

  :where(.hb-migrated) .contact-area .contact-box .form{
    font-size: 16px;
  }

  :where(.hb-migrated) .contact-area input[type="text"],:where(.hb-migrated)
  .contact-area input[type="email"],:where(.hb-migrated)
  .contact-area input[type="tel"],:where(.hb-migrated)
  .contact-area textarea{
    font-size: 16px;
  }

  :where(.hb-migrated) .contact-area .btn-send,:where(.hb-migrated)
  .contact-area input[type="submit"]{
    width: 100%;
    max-width: 320px;
  }
}



@media screen and (max-width: 768px){
  :where(.hb-migrated) .rec-area article{
    box-shadow: none;
    padding: 30px 4%;
    border-top: 2px solid #c3e4cd;
    margin: 0;
  }

  :where(.hb-migrated) .rec-area dl{
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-size: 14px;
  }

  :where(.hb-migrated) .rec-area dl dt{
    width: 100%;
    margin-bottom: 15px;
  }

  :where(.hb-migrated) .rec-area dl dd{
    width: 100%;
  }

  :where(.hb-migrated) .ttl-recruit{
    background-size: cover;
    margin-bottom: 30px;
  }

  :where(.hb-migrated) .appeal{
    font-size: 16px;
    margin-bottom: 30px;
    padding: 0 4%;
    text-align: left;
  }

  :where(.hb-migrated) .rec-ttl{
    font-size: 16px;
    margin-bottom: 30px;
  }
}



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

  :where(.hb-migrated) .ttl-company{
    background-size: cover;
  }

  :where(.hb-migrated) .company-area{
    padding: 30px 4%;
  }

  :where(.hb-migrated) .mission-box{
    height: auto;
    background: none;
  }

  :where(.hb-migrated) .mission-logo{
    position: relative;
    width: 100%;
    margin: 0 auto 30px;
    padding-bottom: 30px;
    background: url("/hebena/migrated/4e876f2e0e3aaec4.jpg") center bottom no-repeat;
    background-size: 100% 40px;
    text-align: center;
  }

  :where(.hb-migrated) .mission-logo img{
    width: 40%;
  }

  :where(.hb-migrated) .mission-part{
    position: relative;
    margin-bottom: 30px;
  }

  :where(.hb-migrated) .mission-ico{
    width: 100px;
    margin: 0 auto 20px;
  }

  :where(.hb-migrated) .mission-text{
    font-size: 15px;
    width: auto;
    line-height: 1.7;
  }

  :where(.hb-migrated) .service-list li{
    width: 90%;
    margin: 0 auto 30px;
  }

  :where(.hb-migrated) .service-list li:last-child{
    margin-bottom: 0;
  }

  :where(.hb-migrated) .service-img{
    margin-bottom: 10px;
  }

  :where(.hb-migrated) .service-text{
    font-size: 14px;
  }

  :where(.hb-migrated) .profile-box dl{
    font-size: 14px;
  }

  :where(.hb-migrated) .access-map iframe{
    width: 100%;
    height: 300px;
  }
}



@media screen and (max-width: 768px){
  :where(.hb-migrated) .info-page-area{
    padding: 30px 4%;
  }

  :where(.hb-migrated) .info-page-inner li{
    padding: 15px 0;
  }

  :where(.hb-migrated) .info-page-text-s{
    width: 100%;
    margin: 0 0 15px;
  }

  :where(.hb-migrated) .info-page-img{
    width: 100%;
  }

  :where(.hb-migrated) .info-page-text-l{
    margin: 0 0 15px;
  }
}





@media screen and (max-width: 768px){
  :where(.hb-migrated) .contact-top-page{
    padding: 50px 0 70px;
  }

  :where(.hb-migrated) .contact-top-lead{
    margin-bottom: 24px;
    font-size: 20px;
    line-height: 1.7;
  }

  :where(.hb-migrated) .contact-top-card{
    display: block;
    padding: 24px 20px;
  }

  :where(.hb-migrated) .contact-top-card__text{
    margin-bottom: 14px;
  }

  :where(.hb-migrated) .contact-top-card__lead{
    font-size: 14px;
    line-height: 1.8;
  }

  :where(.hb-migrated) .contact-top-card__title{
    flex: none;
    justify-content: space-between;
    text-align: left;
  }

  :where(.hb-migrated) .contact-top-card__title h3{
    font-size: 20px;
  }
}




@media screen and (max-width: 768px){
  :where(.hb-migrated) .contact-curtain-stage{
    position: relative;
    width: 100vw;
    height: 170vh;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #f3f3f3;
  }

  :where(.hb-migrated) .contact-curtain-stage__visual{
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
  }

  :where(.hb-migrated) .contact-curtain-stage__bg{
    position: absolute;
    inset: 0;
    background: url("/hebena/migrated/367e2791889c10a0.jpg") center center / cover no-repeat;
    transform: none;
  }

  :where(.hb-migrated) .contact-curtain-stage__copy{
    right: 20px;
    left: 20px;
    bottom: 12%;
    text-align: center;
  }

  :where(.hb-migrated) .contact-curtain-stage__copy h2{
    font-size: 20px;
    line-height: 1.4;
  }

  :where(.hb-migrated) .contact-curtain-stage__copy p{
    font-size: 13px;
  }

  :where(.hb-migrated) .contact-curtain-panel{
    position: relative;
    z-index: 3;
    margin-top: -100svh;
    min-height: 110vh;
    padding: 40px 0 26vh;
    background: #f3f3f3;
    box-sizing: border-box;
  }

  :where(.hb-migrated) .contact-curtain-panel::after{
    display: none;
  }

  :where(.hb-migrated) .contact-top-lead{
    margin-bottom: 24px;
    font-size: 20px;
    line-height: 1.7;
  }

  :where(.hb-migrated) .contact-top-card{
    display: block;
    padding: 24px 20px;
  }

  :where(.hb-migrated) .contact-top-card__text{
    margin-bottom: 14px;
  }

  :where(.hb-migrated) .contact-top-card__lead{
    font-size: 14px;
    line-height: 1.8;
  }

  :where(.hb-migrated) .contact-top-card__title{
    flex: none;
    justify-content: space-between;
    text-align: left;
  }

  :where(.hb-migrated) .contact-top-card__title h3{
    font-size: 20px;
  }
}


@media screen and (max-width: 1024px){
  :where(.hb-migrated) .products-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

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

  :where(.hb-migrated) .products-archive{
    padding: 42px 0 60px;
  }

  :where(.hb-migrated) .products-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 10px;
    padding: 0 5px;
    box-sizing: border-box;
  }

  :where(.hb-migrated) .product-card__body{
    padding: 12px 12px 14px;
  }

  :where(.hb-migrated) .product-card__title{
    font-size: 14px;
    min-height: 3.1em;
  }

  :where(.hb-migrated) .product-card__excerpt{
    font-size: 11px;
    min-height: 4.8em;
  }

  :where(.hb-migrated) .product-card{
    width: 100%;
    min-width: 0;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  }

  :where(.hb-migrated) .product-card__button{
    min-width: 88px;
    padding: 7px 14px;
    font-size: 10px;
  }

  :where(.hb-migrated) .products-hero{
    min-height: 220px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    margin-top: -60px;
  }

  :where(.hb-migrated) .products-hero__inner{
    padding: 0 16px;
  }

  :where(.hb-migrated) .products-hero h1{
    font-size: 38px;
    line-height: 1.1;
  }

  :where(.hb-migrated) .products-hero__lead{
    font-size: 12px;
  }

  :where(.hb-migrated) .product-card__thumb{
    aspect-ratio: auto;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    padding: 8px;
    box-sizing: border-box;
  }

  :where(.hb-migrated) .product-card__thumb img{
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    display: block;
  }
}


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

  :where(.hb-migrated) .products-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 0 24px !important;
  }

  :where(.hb-migrated) .product-card{
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  :where(.hb-migrated) .product-card__button{
    min-width: 150px !important;
  }

  :where(.hb-migrated) .product-card__body{
    overflow: hidden;
  }

  :where(.hb-migrated) .product-card__button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    padding: 12px 16px !important;
    white-space: nowrap;
  }
}


@media screen and (max-width:768px){
  :where(.hb-migrated) #wpadminbar{
    display:none !important;
  }
}


@media screen and (max-width:768px){
  :where(.hb-migrated) .header-nav{
    display:none;
  }

  :where(.hb-migrated) .header-nav.active{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#fff;
    z-index:9998;
  }
}











:where(.hb-migrated) .message-band{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 140px 20px;
  text-align: center;
  overflow: hidden;
}


:where(.hb-migrated) .message-band::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("/hebena/migrated/342e24a2b4d4e600.jpg") center center / cover no-repeat;
  opacity: 0.25;
  z-index: 0;
}


:where(.hb-migrated) .message-band::after{
  content: "";
  position: absolute;
  inset: 0;
  background: #2f5d46;
  opacity: 0.7;
  z-index: 0;
}


:where(.hb-migrated) .message-inner{
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}


:where(.hb-migrated) .message-copy{
  color: #fff;
  font-size: 28px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  font-weight: 500;
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .message-band{
    padding: 100px 20px;
  }

  :where(.hb-migrated) .message-copy{
    font-size: 20px;
  }
}






:where(.hb-migrated) .ttl-area {
  width: 100%;
  height: 300px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; }
  @media screen and (max-width: 768px) {
    :where(.hb-migrated) .ttl-area {
      height: 200px; } }
  :where(.hb-migrated) .ttl-area .cont-ttl {
    margin: 0; }

:where(.hb-migrated) .page-nav {
  justify-content: center;
  background: #417751;
  text-align: center;
  height: 70px;
  line-height: 70px; }
  @media screen and (max-width: 768px) {
    :where(.hb-migrated) .page-nav {
      display: none; } }
  :where(.hb-migrated) .page-nav a {
    display: inline-block;
    position: relative;
    margin: 0 40px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold; }
    :where(.hb-migrated) .page-nav a:hover {
      text-decoration: underline; }

:where(.hb-migrated) ----------------------------------
	lineup
-------------------------------------
.lineup-area {
  text-align: center;
  padding-top: 80px; }
  @media screen and (max-width: 768px) {
    :where(.hb-migrated) .lineup-area {
      padding-top: 30px; } }
  :where(.hb-migrated) .lineup-area h4 {
    position: relative;
    font-weight: bold;
    font-size: 22px;
    color: #417751;
    margin-bottom: 30px;
    padding-bottom: 20px; }
    @media screen and (max-width: 768px) {
      :where(.hb-migrated) .lineup-area h4 {
        font-size: 16px;
        margin-bottom: 10px; } }
    :where(.hb-migrated) .lineup-area h4:after {
      content: '';
      width: 70px;
      height: 2px;
      background: #417751;
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -35px; }

:where(.hb-migrated) .lineup-original {
  border-bottom: 1px solid #c3e4cd;
  border-top: 1px solid #c3e4cd;
  padding: 40px 0 80px 0; }
  @media screen and (max-width: 768px) {
    :where(.hb-migrated) .lineup-original {
      padding: 20px 4% 30px; } }

:where(.hb-migrated) .item-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: flex-start; }
  :where(.hb-migrated) .item-list li {
    width: 22%;
    margin-right: 4%;
    margin-top: 30px; }
    :where(.hb-migrated) .item-list li a {
      text-decoration: none; }
      :where(.hb-migrated) .item-list li a:hover {
        text-decoration: underline; }
    @media screen and (max-width: 768px) {
      :where(.hb-migrated) .item-list li {
        width: 47%;
        margin-top: 20px;
        margin-right: 6%; } }
    @media screen and (min-width: 769px) {
      :where(.hb-migrated) .item-list li:nth-child(4n) {
        margin-right: 0; } }
    @media screen and (max-width: 768px) {
      :where(.hb-migrated) .item-list li:nth-child(even) {
        margin-right: 0; } }
    :where(.hb-migrated) .item-list li p.item {
      margin-bottom: 15px; }
      @media screen and (max-width: 768px) {
        :where(.hb-migrated) .item-list li p.item {
          margin-bottom: 8px; } }
    :where(.hb-migrated) .item-list li p.name {
      font-size: 15px; }
      @media screen and (max-width: 768px) {
        :where(.hb-migrated) .item-list li p.name {
          font-size: 12px; } }

:where(.hb-migrated) .lineup-other {
  padding: 40px 0 80px 0; }
  @media screen and (max-width: 768px) {
    :where(.hb-migrated) .lineup-other {
      padding: 20px 4% 30px; } }

:where(.hb-migrated) .shop-ttl {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 50px; }
  @media screen and (max-width: 768px) {
    :where(.hb-migrated) .shop-ttl {
      font-size: 16px;
      margin-bottom: 30px; } }

:where(.hb-migrated) .lineup-shop {
  border-bottom: 5px solid #417751;
  border-top: 5px solid #417751;
  padding: 50px 0; }
  @media screen and (max-width: 768px) {
    :where(.hb-migrated) .lineup-shop {
      padding: 30px 4%; } }
  :where(.hb-migrated) .lineup-shop ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center; }
    @media screen and (max-width: 768px) {
      :where(.hb-migrated) .lineup-shop ul {
        justify-content: space-between; } }
    :where(.hb-migrated) .lineup-shop ul li {
      width: 300px;
      margin: 0 25px;
      font-size: 16px; }
      @media screen and (max-width: 768px) {
        :where(.hb-migrated) .lineup-shop ul li {
          width: 48%;
          font-size: 14px;
          margin: 0; } }

:where(.hb-migrated) .shop-logo {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  padding: 20px 0; }
  @media screen and (max-width: 768px) {
    :where(.hb-migrated) .shop-logo {
      margin-bottom: 10px; } }
  :where(.hb-migrated) .shop-logo img {
    height: 44px;
    width: auto; }
    @media screen and (max-width: 768px) {
      :where(.hb-migrated) .shop-logo img {
        height: 30px; } }


:where(.hb-migrated) .item-list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 30px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.hb-migrated) .item-list li {
  width: calc(25% - 23px);
  text-align: center;
}

:where(.hb-migrated) .item-list .item {
  margin: 0 0 18px;
}

:where(.hb-migrated) .item-list .item a,:where(.hb-migrated)
.item-list .item img {
  display: block;
}

:where(.hb-migrated) .item-list .item img {
  width: 100%;
  max-width: 260px;
  height: 260px;
  margin: 0 auto;
  object-fit: contain;
  background: #fff;
}

:where(.hb-migrated) .item-list .name {
  margin: 0;
  color: #c94b66;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

:where(.hb-migrated) .item-list .name a {
  color: inherit;
  text-decoration: none;
}

:where(.hb-migrated) .item-list .name a:hover {
  opacity: 0.8;
}


:where(.hb-migrated) .lineup-original,:where(.hb-migrated)
.lineup-other {
  margin-bottom: 70px;
}


@media screen and (max-width: 1024px) {
  :where(.hb-migrated) .item-list li {
    width: calc(50% - 15px);
  }
}


@media screen and (max-width: 768px) {
  :where(.hb-migrated) .item-list {
    gap: 28px 16px;
  }

  :where(.hb-migrated) .item-list li {
    width: calc(50% - 8px);
  }

  :where(.hb-migrated) .item-list .item img {
    height: 180px;
    max-width: 100%;
  }

  :where(.hb-migrated) .item-list .name {
    font-size: 14px;
    line-height: 1.7;
  }
}


:where(.hb-migrated) .lineup-original .item-list,:where(.hb-migrated)
.lineup-other .item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.hb-migrated) .lineup-original .item-list li,:where(.hb-migrated)
.lineup-other .item-list li {
  float: none !important;
  width: calc(25% - 23px) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}

:where(.hb-migrated) .lineup-original .item-list .item img,:where(.hb-migrated)
.lineup-other .item-list .item img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: 260px;
  margin: 0 auto;
  object-fit: contain;
}

:where(.hb-migrated) .lineup-original .item-list .name,:where(.hb-migrated)
.lineup-other .item-list .name {
  margin-top: 16px;
  line-height: 1.8;
}

@media screen and (max-width: 1024px) {
  :where(.hb-migrated) .lineup-original .item-list li,:where(.hb-migrated)
  .lineup-other .item-list li {
    width: calc(50% - 15px) !important;
  }
}

@media screen and (max-width: 768px) {
  :where(.hb-migrated) .lineup-original .item-list li,:where(.hb-migrated)
  .lineup-other .item-list li {
    width: calc(50% - 10px) !important;
  }

  :where(.hb-migrated) .lineup-original .item-list .item img,:where(.hb-migrated)
  .lineup-other .item-list .item img {
    height: 180px;
    max-width: 100%;
  }
}


:where(.hb-migrated) .lineup-original .item-list,:where(.hb-migrated)
.lineup-other .item-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.hb-migrated) .lineup-original .item-list li,:where(.hb-migrated)
.lineup-other .item-list li{
  float: none !important;
  width: calc(25% - 23px) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}

:where(.hb-migrated) .lineup-original .item-list .item img,:where(.hb-migrated)
.lineup-other .item-list .item img{
  display: block;
  width: 100%;
  max-width: 260px;
  height: 260px;
  margin: 0 auto;
  object-fit: contain;
}

:where(.hb-migrated) .lineup-original .item-list .name,:where(.hb-migrated)
.lineup-other .item-list .name{
  margin-top: 16px;
  line-height: 1.8;
}




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

  :where(.hb-migrated) .about-alt-section,:where(.hb-migrated)
  .products-area,:where(.hb-migrated)
  .products-hero-head{
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  :where(.hb-migrated) .about-alt-inner,:where(.hb-migrated)
  .service-alt-top .inner,:where(.hb-migrated)
  .shop-links-area .inner{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  :where(.hb-migrated) .current-product-one,:where(.hb-migrated)
  .current-product-item,:where(.hb-migrated)
  .current-product-img,:where(.hb-migrated)
  .current-product-content{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

:where(.hb-migrated) .cont-ttl {
  text-align: center;
}

:where(.hb-migrated) .cont-ttl h3 {
  text-align: center;
}

:where(.hb-migrated) .cont-ttl .text-ttl {
  font-size: 36px;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  max-width: 90vw;
}



:where(.hb-migrated) .information-single {
  max-width: 900px;
  margin: 0 auto;
  padding: 120px 30px 140px;
}

:where(.hb-migrated) .information-single-date {
  margin-bottom: 18px;
  color: #4f7f61;
  font-size: 14px;
  letter-spacing: 0.08em;
}

:where(.hb-migrated) .information-single-title {
  margin: 0 0 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid #d9e4dc;
  color: #222;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.5;
}

:where(.hb-migrated) .information-single-image {
  margin: 0 0 40px;
}

:where(.hb-migrated) .information-single-image img {
  display: block;
  width: 100%;
  height: auto;
}

:where(.hb-migrated) .information-single-content {
  color: #333;
  font-size: 16px;
  line-height: 2;
}

:where(.hb-migrated) .information-single-content p {
  margin: 0 0 1.5em;
}

@media screen and (max-width: 767px) {
  :where(.hb-migrated) .information-single {
    padding: 80px 20px 100px;
  }

  :where(.hb-migrated) .information-single-date {
    font-size: 13px;
  }

  :where(.hb-migrated) .information-single-title {
    margin-bottom: 30px;
    padding-bottom: 18px;
    font-size: 24px;
  }

  :where(.hb-migrated) .information-single-content {
    font-size: 15px;
    line-height: 1.9;
  }
}





:where(.hb-migrated) .section-space{
  padding: 120px 0;
}


:where(.hb-migrated) .section-space-small{
  padding: 60px 0;
}


:where(.hb-migrated) .section-space-none{
  padding: 0;
}

:where(.hb-migrated) .section-space-none br{
  display: none;
}



:where(.hb-migrated) .image-single{
  width: 100%;
  max-width: 1100px;
  display: block;
  margin: 0 auto;
}


:where(.hb-migrated) .image-single.no-margin{
  margin-bottom: 0;
}


:where(.hb-migrated) .image-single-small{
  width: 100%;
  max-width: 900px;
  display: block;
  margin: 0 auto;
}


:where(.hb-migrated) .image-single-wide{
  width: 100%;
  max-width: 1800px;
  display: block;
  margin: 0 auto;
}






:where(.hb-migrated) .wp-block-image.no-margin{
  margin-bottom: 0;
}

:where(.hb-migrated) figure.no-margin{
  margin-bottom: 0;
}





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

  :where(.hb-migrated) .section-space{
    padding: 80px 0;
  }

  :where(.hb-migrated) .section-space-small{
    padding: 40px 0;
  }

}


:where(.hb-migrated) .section-inner{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}


:where(.hb-migrated) .product-detail-hero{
  padding-top: 80px;
  padding-bottom: 80px;
  background: #fAfAf7;
}

:where(.hb-migrated) .product-detail-hero-inner{
  display: flex;
  align-items: center;
  gap: 60px;
}

:where(.hb-migrated) .product-detail-gallery{
  width: 52%;
}

:where(.hb-migrated) .product-detail-main-image{
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

:where(.hb-migrated) .product-detail-main-image img{
  display: block;
  width: 100%;
  height: auto;
}

:where(.hb-migrated) .product-detail-summary{
  width: 48%;
}

:where(.hb-migrated) .product-detail-label{
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .12em;
  color: #417751;
}

:where(.hb-migrated) .product-detail-title{
  margin: 0 0 24px;
  font-size: 40px;
  line-height: 1.4;
  font-weight: 600;
  color: #222;
}

:where(.hb-migrated) .product-detail-lead{
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .04em;
  color: #333;
}

:where(.hb-migrated) .product-detail-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

:where(.hb-migrated) .product-detail-buttons.center{
  justify-content: center;
}

:where(.hb-migrated) .product-detail-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 16px 28px;
  border-radius: 999px;
  background: #2f6f43;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: .25s ease;
}

:where(.hb-migrated) .product-detail-btn:hover{
  opacity: .9;
}

:where(.hb-migrated) .product-detail-btn.is-sub{
  background: #fff;
  color: #2f6f43;
  border: 1px solid #cfd8c8;
}

:where(.hb-migrated) .product-detail-intro,:where(.hb-migrated)
.product-detail-features,:where(.hb-migrated)
.product-detail-spec,:where(.hb-migrated)
.product-detail-cta{
  padding-top: 80px;
  padding-bottom: 80px;
}


:where(.hb-migrated) .product-detail-section-title{
  margin: 0 0 40px;
  font-size: 23px;
  font-weight: 600;
  color: #222;
  letter-spacing: .06em;
}

:where(.hb-migrated) .product-detail-intro-flex{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 60px;
  margin-top: 60px;
}

:where(.hb-migrated) .product-detail-intro-text{
  width: 50%;
  margin: 0;
}

:where(.hb-migrated) .product-detail-intro-text p{
  margin: 0 0 1.6em;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .04em;
  color: #333;
  text-align: left;
}

:where(.hb-migrated) .product-detail-intro-image{
  width: 50%;
}

:where(.hb-migrated) .product-detail-intro-image img{
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}



:where(.hb-migrated) .product-detail-intro-flex--sub{
  align-items: center;
  margin-top: 36px;
}

:where(.hb-migrated) .product-detail-intro-text--sub{
  width: 32%;
}

:where(.hb-migrated) .product-detail-intro-shots{
  width: 68%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}

:where(.hb-migrated) .product-detail-intro-shot img{
  width: 100%;
  display: block;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}


:where(.hb-migrated) .product-detail-feature-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0 auto;
}

:where(.hb-migrated) .product-detail-feature-card{
  min-height: 220px;
  padding: 32px 28px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  background-color: rgba(255,255,255,0.78);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 120px;
  transition: transform .3s ease, box-shadow .3s ease;
}

:where(.hb-migrated) .product-detail-feature-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(0,0,0,.08);
}

:where(.hb-migrated) .product-detail-feature-card h3{
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 700;
  color: #222;
}

:where(.hb-migrated) .product-detail-feature-card p{
  margin: 0;
  font-size: 16px;
  line-height: 2;
  color: #333;
}

:where(.hb-migrated) .feature-01{
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    var(--bg-feature-01) center / 600px no-repeat;
}

:where(.hb-migrated) .feature-02{
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    var(--bg-feature-02) center / 600px no-repeat;
}

:where(.hb-migrated) .feature-03{
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    var(--bg-feature-03) center / 600px no-repeat;
}

:where(.hb-migrated) .feature-04{
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    var(--bg-feature-04) center / 600px no-repeat;
}

:where(.hb-migrated) .feature-05{
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    var(--bg-feature-05) center / 600px no-repeat;
}

:where(.hb-migrated) .feature-06{
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    var(--bg-feature-06) center / 600px no-repeat;
}


:where(.hb-migrated) .feature-07{
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    var(--bg-feature-07) center / 600px no-repeat;
}

:where(.hb-migrated) .feature-08{
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    var(--bg-feature-08) center / 600px no-repeat;
}

:where(.hb-migrated) .feature-09{
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    var(--bg-feature-09) center / 600px no-repeat;
}


:where(.hb-migrated) .product-detail-ports-map{
  padding: 20px 0;
  background: #fff;
}

:where(.hb-migrated) .product-detail-ports-map-inner{
  position: relative;
}

:where(.hb-migrated) .product-detail-ports-device{
  width: 44%;
}

:where(.hb-migrated) .product-detail-ports-device img{
  width: 100%;
  display: block;
  border-radius: 24px;
}


:where(.hb-migrated) .product-detail-ports-lines{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

:where(.hb-migrated) .port-line{
  fill: none;
  stroke: #000;
  stroke-width: 0.9;
  stroke-linecap: butt;
  stroke-dasharray: 0.8 2.6;
  opacity: 0;
}


:where(.hb-migrated) .product-detail-ports-map.moves .line-1{
  opacity: 1;
  animation: drawLineSolid 2s ease forwards;
}

:where(.hb-migrated) .product-detail-ports-map.moves .line-2{
  opacity: 1;
  animation: drawLineSolid 2s ease .25s forwards;
}

:where(.hb-migrated) .product-detail-ports-map.moves .line-3{
  opacity: 1;
  animation: drawLineSolid 2s ease .5s forwards;
}

@keyframes drawLineSolid{
  0%{
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: 1;
  }
  80%{
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100%{
    stroke-dasharray: 0.6 2;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}


:where(.hb-migrated) .product-detail-port-label{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
}

:where(.hb-migrated) .label-1{
  top: 165px;
  right: 165px;
}

:where(.hb-migrated) .label-2{
  top: 285px;
  right: 180px;
}

:where(.hb-migrated) .label-3{
  top: 405px;
  right: 230px;
}

:where(.hb-migrated) .product-detail-port-circle{
  width: 64px;
  height: 64px;
  border: 2px solid #777;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #555;
  flex-shrink: 0;
}

:where(.hb-migrated) .product-detail-port-text{
  font-size: 18px;
  color: #444;
  letter-spacing: .04em;
}


:where(.hb-migrated) .product-detail-ports-map.hide{
  opacity: 0;
  transform: translateY(28px);
}

:where(.hb-migrated) .product-detail-ports-map.moves{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .8s ease, transform .8s ease;
}




:where(.hb-migrated) .product-detail-spec{
  background: #fafaf7;
}

:where(.hb-migrated) .product-detail-spec-list{
  margin: 0;
  padding: 18px 24px;
}

:where(.hb-migrated) .product-detail-spec-row{
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee;
  padding: 18px 0;
}

:where(.hb-migrated) .product-detail-spec-row dt{
  width: 180px;
  font-weight: 700;
  color: #417751;
}

:where(.hb-migrated) .product-detail-spec-row dd{
  flex: 1;
  margin: 0;
  color: #333;
  line-height: 1.8;
}


:where(.hb-migrated) .product-detail-cta-box{
  background: #fff;
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

:where(.hb-migrated) .product-detail-cta-box h2{
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 600;
  color: #222;
}

:where(.hb-migrated) .product-detail-cta-box p{
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 2;
  color: #333;
}


:where(.hb-migrated) .product-detail-brand-hero{
  position: relative;
  overflow: hidden;
}


:where(.hb-migrated) .product-detail-brand-bg img{
  width: 100%;
  height: 700px;
  object-fit: cover;
  display: block;
}


:where(.hb-migrated) .product-detail-brand-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

:where(.hb-migrated) .product-detail-brand-overlay img{
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  margin: 180px auto 0;
}


:where(.hb-migrated) .product-detail-brand-copy{
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

:where(.hb-migrated) .product-detail-brand-copy p{
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  color: #222;
  line-height: 1.8;
}


:where(.hb-migrated) .product-detail-brand-logo{
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

:where(.hb-migrated) .product-detail-brand-logo img{
  width: 300px;
  opacity: .95;
}


:where(.hb-migrated) .product-detail-brand-hero.hide{
  opacity: 0;
  transform: translateY(28px);
}

:where(.hb-migrated) .product-detail-brand-hero.moves{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .9s ease, transform .9s ease;
}


:where(.hb-migrated) .product-detail-brand-overlay{
  position: absolute;
  inset: 0;
}


:where(.hb-migrated) .brand-copy-top{
  position: absolute;
  top: 60px;
  left: 200px;
  text-align: left;
}
:where(.hb-migrated) .brand-copy-top p{
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.6;
  color: #222;
}


:where(.hb-migrated) .product-detail-scenes{
  padding: 20px 0;
  background: #fff;
}

:where(.hb-migrated) .product-detail-scenes-head{
  max-width: 1100px;
  margin: 0 auto 48px;
  margin-top: 80px;
  text-align: left;
}

:where(.hb-migrated) .product-detail-scenes-lead{
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 2;
  color: #555;
}

:where(.hb-migrated) .product-detail-scenes-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 32px 20px;
  align-items: start;
}


:where(.hb-migrated) .product-detail-scene-card:nth-child(1){
  grid-column: 1 / span 2;
}
:where(.hb-migrated) .product-detail-scene-card:nth-child(2){
  grid-column: 3 / span 2;
}
:where(.hb-migrated) .product-detail-scene-card:nth-child(3){
  grid-column: 5 / span 2;
}


:where(.hb-migrated) .product-detail-scene-card:nth-child(4){
  grid-column: 2 / span 2;
}
:where(.hb-migrated) .product-detail-scene-card:nth-child(5){
  grid-column: 4 / span 2;
}

:where(.hb-migrated) .product-detail-scene-image{
  overflow: hidden;
  border-radius: 22px;
  background: #f7f7f7;
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
}

:where(.hb-migrated) .product-detail-scene-image img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

:where(.hb-migrated) .product-detail-scene-text{
  padding-top: 14px;
  text-align: center;
}

:where(.hb-migrated) .product-detail-scene-en{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: #222;
}

:where(.hb-migrated) .product-detail-scene-ja{
  margin: 0;
  font-size: 13px;
  color: #666;
}

:where(.hb-migrated) .product-detail-scene-card:hover{
  transform: translateY(-6px);
}


:where(.hb-migrated) .product-detail-scenes-head.hide,:where(.hb-migrated)
.product-detail-scene-card.hide{
  opacity: 0;
  transform: translateY(28px);
}

:where(.hb-migrated) .product-detail-scenes-head.moves,:where(.hb-migrated)
.product-detail-scene-card.moves{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .8s ease, transform .8s ease;
}



:where(.hb-migrated) .product-detail-colors{
  padding-top: 80px;
  padding-bottom: 80px;
  background: #fafaf7;
}

:where(.hb-migrated) .product-detail-colors-head{
  margin-bottom: 56px;
}

:where(.hb-migrated) .product-detail-colors-lead{
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 2;
  color: #555;
}

:where(.hb-migrated) .product-detail-color-list{
  display: flex;
  flex-direction: column;
  gap: 56px;
}

:where(.hb-migrated) .product-detail-color-item{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

:where(.hb-migrated) .product-detail-color-item.reverse{
  direction: rtl;
}

:where(.hb-migrated) .product-detail-color-item.reverse > *{
  direction: ltr;
}

:where(.hb-migrated) .product-detail-color-image img{
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

:where(.hb-migrated) .product-detail-color-item:not(.reverse) .product-detail-color-image img{
  margin-left: auto;
}

:where(.hb-migrated) .product-detail-color-item.reverse .product-detail-color-image img{
  margin-right: auto;
}


:where(.hb-migrated) .product-set-wrap{
  position: relative;
  text-align: center;
  margin-top: 120px;
  padding-top: 40px;
}


:where(.hb-migrated) .product-set-main img{
  width: 260px;
}


:where(.hb-migrated) .product-set-item{
  position: absolute;
  text-align: center;
}


:where(.hb-migrated) .product-set-circle{
  width: 170px;
  height: 170px;
  border: 1px solid #ccc;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  background: #fff;
}

:where(.hb-migrated) .product-set-circle img{
  width: 150%;
  height: 150%;
  object-fit: contain;
  display: block;
}


:where(.hb-migrated) .item-1{
  left: 6%;
  top: 5%;
}

:where(.hb-migrated) .item-2{
  left: 43%;
  top: -230px;
  transform: translateX(-50%);
}

:where(.hb-migrated) .item-3{
  right: 6%;
  top: 5%;
}

:where(.hb-migrated) .product-set-item::after{
  content: "";
  position: absolute;
  width: 85px;
  height: 1px;
  border-bottom: 1px dashed #aaa;
  top: 90px;
}

:where(.hb-migrated) .item-1::after{
  right: -80px;
}

:where(.hb-migrated) .item-2::after{
  left: 50%;
  top: 210px;
  transform: translateX(-50%) rotate(90deg);
}

:where(.hb-migrated) .item-3::after{
  left: -80px;
}

:where(.hb-migrated) .product-detail-set.hide{
  opacity: 0;
  transform: translateY(30px);
}

:where(.hb-migrated) .product-detail-set.moves{
  opacity: 1;
  transform: translateY(0);
  transition: .8s;
}


:where(.hb-migrated) .product-buy-links{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}


:where(.hb-migrated) .buy-link{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 72px;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 14px;
  box-sizing: border-box;
  transition: .25s ease;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  box-sizing: border-box;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}


:where(.hb-migrated) .buy-link img{
  display: block;
  max-width: 100%;
  max-height: 34px;
  width: auto;
  height: auto;
}


:where(.hb-migrated) .buy-link span{
  font-size: 14px;
  color: #333;
  font-weight: 600;
}


:where(.hb-migrated) .buy-link:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-color: #c8d5c8;
}

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

  :where(.hb-migrated) .buy-link{
    width: 150px;
  }

}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .product-detail-hero{
    padding: 50px 0;
  }

  :where(.hb-migrated) .product-detail-hero-inner{
    display: block;
  }

  :where(.hb-migrated) .product-detail-gallery,:where(.hb-migrated)
  .product-detail-summary{
    width: 100%;
  }

  :where(.hb-migrated) .product-detail-gallery{
    margin-bottom: 28px;
  }

  :where(.hb-migrated) .product-detail-title{
    font-size: 30px;
  }

  :where(.hb-migrated) .product-detail-lead,:where(.hb-migrated)
  .product-detail-intro-text p,:where(.hb-migrated)
  .product-detail-cta-box p{
    font-size: 15px;
  }

  :where(.hb-migrated) .product-detail-intro,:where(.hb-migrated)
  .product-detail-features,:where(.hb-migrated)
  .product-detail-spec,:where(.hb-migrated)
  .product-detail-cta{
    padding: 50px 0;
  }

  :where(.hb-migrated) .product-detail-feature-grid{
    grid-template-columns: 1fr;
  }

  :where(.hb-migrated) .product-detail-spec-row dt,:where(.hb-migrated)
  .product-detail-spec-row dd{
    width: 100%;
  }

  :where(.hb-migrated) .product-detail-spec-row dt{
    margin-bottom: 8px;
  }

  :where(.hb-migrated) .product-detail-cta-box{
    padding: 32px 24px;
  }

  :where(.hb-migrated) .product-detail-buttons{
    display: block;
  }

  :where(.hb-migrated) .product-detail-btn{
    width: 100%;
    margin-bottom: 12px;
  }

  :where(.hb-migrated) .product-detail-btn:last-child{
    margin-bottom: 0;
  }
}



:where(.hb-migrated) .product-detail-charge-head{
  background: #fff;
  padding: 20px 0 20px;
}

:where(.hb-migrated) .product-detail-section-title{
  margin: 0;
}

:where(.hb-migrated) .product-detail-usage{
  padding: 90px 0;
  background: #fff;
}

:where(.hb-migrated) .product-detail-usage-top{
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 56px;
}

:where(.hb-migrated) .product-detail-usage-photo{
  width: 42%;
}

:where(.hb-migrated) .product-detail-usage-photo img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

:where(.hb-migrated) .product-detail-ports{
  width: 58%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

:where(.hb-migrated) .product-detail-port-item{
  display: flex;
  align-items: center;
  gap: 18px;
}

:where(.hb-migrated) .product-detail-port-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 2px solid #666;
  border-radius: 50%;
  font-size: 24px;
  color: #555;
  flex-shrink: 0;
}

:where(.hb-migrated) .product-detail-port-label{
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  letter-spacing: .04em;
}

:where(.hb-migrated) .product-detail-charge-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0 auto 24px;
  max-width: 1100px;
}

:where(.hb-migrated) .product-detail-charge-card{
  padding: 36px 24px 30px;
  border: 4px dotted #777;
  border-radius: 36px;
  text-align: center;
  background: #fff;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

:where(.hb-migrated) .product-detail-charge-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  margin: 0 auto 20px;
}

:where(.hb-migrated) .product-detail-charge-icon img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

:where(.hb-migrated) .product-detail-charge-card h3{
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 600;
  color: #333;
  text-align: center;
}

:where(.hb-migrated) .product-detail-charge-count{
  margin: 0;
  color: #555;
  font-size: 28px;
  line-height: 1.4;
  text-align: center;
  width: 100%;
}

:where(.hb-migrated) .product-detail-charge-count span{
  font-size: 64px;
  font-weight: 700;
  color: #333;
  letter-spacing: .02em;
}

:where(.hb-migrated) .product-detail-charge-note{
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: #666;
}


:where(.hb-migrated) .product-detail-charge-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  margin-bottom: 20px;
}

:where(.hb-migrated) .product-detail-charge-icon img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}


:where(.hb-migrated) .product-detail-colors{
  padding: 100px 0;
  background: #fff;
}

:where(.hb-migrated) .product-detail-colors-head{
  max-width: 1100px;
  margin: 0 auto 56px;
  text-align: left;
}

:where(.hb-migrated) .product-detail-colors-lead{
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 2;
  color: #555;
}

:where(.hb-migrated) .product-detail-color-list{
  display: flex;
  flex-direction: column;
  gap: 56px;
}

:where(.hb-migrated) .product-detail-color-item{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

:where(.hb-migrated) .product-detail-color-item.reverse{
  direction: rtl;
}

:where(.hb-migrated) .product-detail-color-item.reverse > *{
  direction: ltr;
}

:where(.hb-migrated) .product-detail-color-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:where(.hb-migrated) .product-detail-color-name-en{
  margin: 0 0 8px;
  font-size: 36px;
  font-weight: 600;
  color: #222;
  letter-spacing: .04em;
}

:where(.hb-migrated) .product-detail-color-name-ja{
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: #666;
}

:where(.hb-migrated) .product-detail-color-copy{
  margin: 0;
  font-size: 14px;
  line-height: 2;
  color: #666;
}

:where(.hb-migrated) .product-detail-color-image{
  width: 100%;
}

:where(.hb-migrated) .product-detail-color-image img{
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

:where(.hb-migrated) .product-detail-color-item:not(.reverse) .product-detail-color-image img{
  margin-left: auto;
}

:where(.hb-migrated) .product-detail-color-item.reverse .product-detail-color-image img{
  margin-right: auto;
}

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

  :where(.hb-migrated) .product-detail-section-title{
    margin-top: 30px;
  }

  :where(.hb-migrated) .product-detail-color-list{
    gap: 40px;
  }

  :where(.hb-migrated) .product-detail-color-item{
    display: flex;
    align-items: center;
    gap: 20px;
  }

  :where(.hb-migrated) .product-detail-color-item,:where(.hb-migrated)
  .product-detail-color-item.reverse{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  :where(.hb-migrated) .product-detail-color-text{
    width: 100%;
    order: 2;
  }

  :where(.hb-migrated) .product-detail-color-image{
    order: 1;
    width: 260px;
    min-width: 260px;
  }

  :where(.hb-migrated) .product-detail-color-image img{
    width: 100%;
    height: auto;
    display: block;
  }

}


:where(.hb-migrated) .cloud-service-section{
  padding: 100px 0;
  background: #f7f7f7;
}

:where(.hb-migrated) .cloud-service-lead{
  margin-top: 16px;
  font-size: 16px;
  color: #666;
  line-height: 1.8;
}

:where(.hb-migrated) .cloud-service-image{
  margin-top: 40px;
  text-align: center;
}

:where(.hb-migrated) .cloud-service-image img{
  width: 100%;
  max-width: 1000px;
}


:where(.hb-migrated) .cloud-hero{
  position: relative;
  width: 100%;
  height: 380px;
  margin: 0;
  overflow: hidden;
}


:where(.hb-migrated) .cloud-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.5;
}


:where(.hb-migrated) .cloud-hero-overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
}

:where(.hb-migrated) .cloud-hero-overlay h2{
  color: #222;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.4;
}

:where(.hb-migrated) .cloud-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.4);
}
:where(.hb-migrated) .cloud-hero-section{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

:where(.hb-migrated) .cloud-hero-section .cloud-hero{
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
}

:where(.hb-migrated) .cloud-hero-section .cloud-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.5;
}


:where(.hb-migrated) .cloud-block{
  text-align: center;
}

:where(.hb-migrated) .cloud-block + .cloud-block{
  margin-top: 60px;
}


:where(.hb-migrated) .product-detail-section-title.center{
  text-align: center;
}


:where(.hb-migrated) .cloud-service-lead.center{
  text-align: center;
  max-width: 640px;
  margin: 50px auto 0;
  line-height: 1.9;
}


:where(.hb-migrated) .cloud-image-single{
  margin-top: 40px;
}

:where(.hb-migrated) .cloud-image-single img{
  width: 100%;
  max-width: 720px;
  display: block;
  margin: 0 auto;
}


:where(.hb-migrated) .cloud-image-double{
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 24px;
}

:where(.hb-migrated) .cloud-image-double img{
  width: 48%;
  max-width: 490px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}




:where(.hb-migrated) .cloud-icons{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 60px;
  padding-right: 180px;
  position: relative;
  align-items: flex-end;
}

:where(.hb-migrated) .cloud-icon-item{
  opacity: 0;
  transform: translateY(20px);
  width: auto;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

:where(.hb-migrated) .cloud-icon-item img{
  width: 100%;
  height: auto;
  max-width: 240px;
  vertical-align: bottom;
}


:where(.hb-migrated) .cloud-icons.moves .cloud-icon-item{
  opacity: 1;
  transform: translateY(0);
  transition: .6s ease;
}


:where(.hb-migrated) .cloud-icons.moves .cloud-icon-item:nth-child(1){
  transition-delay: 0s;
}

:where(.hb-migrated) .cloud-icons.moves .cloud-icon-item:nth-child(2){
  transition-delay: 0.15s;
}

:where(.hb-migrated) .cloud-icons.moves .cloud-icon-item:nth-child(3){
  transition-delay: 0.3s;
}

:where(.hb-migrated) .cloud-icons.moves .cloud-icon-item:nth-child(4){
  transition-delay: 0.45s;
}

:where(.hb-migrated) .cloud-woman{
  position: absolute;
  right: 0px;
  bottom: 110px;
  width: 270px;
}

:where(.hb-migrated) .cloud-woman.hide{
  opacity: 0;
  transform: translateY(40px);
}

:where(.hb-migrated) .cloud-woman.moves{
  opacity: 1;
  transform: translateY(0);
  transition: all .8s ease;
  transition-delay: .6s;
}

:where(.hb-migrated) .cloud-woman img{
  animation: float 3s ease-in-out infinite;
}

@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}


:where(.hb-migrated) .cloud-price-section{
  padding: 100px 0;
  background: #fafaf7;
}

:where(.hb-migrated) .cloud-price-head{
  background: #a3d6cc;
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 36px;
}

:where(.hb-migrated) .cloud-price-title{
  margin: 0;
  font-size: 54px;
  line-height: 1.2;
  font-weight: 800;
  color: #111;
  letter-spacing: .02em;
}

:where(.hb-migrated) .cloud-price-frame{
  border: 4px solid #f4e300;
  padding: 48px 36px;
}

:where(.hb-migrated) .cloud-price-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

:where(.hb-migrated) .cloud-price-card{
  position: relative;
  border-radius: 56px;
  background: #00947a;
  color: #fff;
  padding: 56px 52px;
  min-height: 420px;
}

:where(.hb-migrated) .cloud-price-label{
  margin: 0 0 14px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
}

:where(.hb-migrated) .cloud-price-main{
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

:where(.hb-migrated) .cloud-price-person{
  display: inline-block;
  font-size: 56px;
  line-height: 1;
  color: #fff;
  vertical-align: bottom;
  margin: 0 4px 6px;
}

:where(.hb-migrated) .cloud-price-number{
  font-size: 128px;
  line-height: .9;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  text-shadow: 0 8px 0 rgba(0,0,0,.35);
}

:where(.hb-migrated) .cloud-price-unit{
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  padding-bottom: 16px;
}

:where(.hb-migrated) .cloud-price-tax{
  margin: 10px 0 26px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
}

:where(.hb-migrated) .cloud-price-note{
  margin: 0;
  font-size: 22px;
  line-height: 1.7;
  font-weight: 700;
}

:where(.hb-migrated) .cloud-price-badge{
  position: absolute;
  top: 36px;
  left: 40px;
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 900;
  color: #fff;
  transform: rotate(-12deg);
}

:where(.hb-migrated) .cloud-price-month-row{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

:where(.hb-migrated) .cloud-price-month-label{
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 40px;
}

:where(.hb-migrated) .cloud-price-month-number-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  min-height: 74px;
  overflow: visible;
  transform: translateY(-25px);
}

:where(.hb-migrated) .cloud-price-month-circle{
  position: absolute;
  z-index: 0;
  width: 128px;
  height: 66px;
  border: 4px solid #f4e300;
  border-radius: 50%;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%) rotate(-10deg);
}

:where(.hb-migrated) .cloud-price-month-number{
  position: relative;
  z-index: 1;
  font-size: 52px;
  line-height: .92;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  text-shadow: 0 4px 0 rgba(0,0,0,.25);
}

:where(.hb-migrated) .cloud-price-month-unit{
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  align-self: center;
  transform: translateY(50px);
}

:where(.hb-migrated) .cloud-price-section.hide{
  opacity: 0;
  transform: translateY(30px);
}

:where(.hb-migrated) .cloud-price-section.moves{
  opacity: 1;
  transform: translateY(0);
  transition: .8s;
}


:where(.hb-migrated) .cloud-price-person{
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  color: #fff;
  margin: 0 6px 8px 2px;
  line-height: 1;
  transform: translateY(10px);
}

:where(.hb-migrated) .cloud-price-person-svg{
  width: 52px;
  height: 52px;
  display: block;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.28));
}




:where(.hb-migrated) .cloud-price-number-wrap{
  position: relative;
  display: inline-block;
}

:where(.hb-migrated) .cloud-price-number-line{
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 12px;
  background: #f0d400;
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 0;
}

:where(.hb-migrated) .cloud-price-number{
  position: relative;
  z-index: 1;
}


:where(.hb-migrated) .cloud-price-month-number-wrap{
  position: relative;
  display: inline-block;
}

:where(.hb-migrated) .cloud-price-month-circle{
  position: absolute;
  top: 60%;
  left: 60%;
  width: 135%;
  height: 115%;
  border: 5px solid #f0d400;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-10deg) scale(0.7);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

:where(.hb-migrated) .cloud-price-month-number{
  position: relative;
  z-index: 1;
  font-size: 127px;
  line-height: .92;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  text-shadow: 0 4px 0 rgba(0,0,0,.25);
}


:where(.hb-migrated) .cloud-price-section.moves .cloud-price-number-line{
  animation: drawPriceLine .7s ease forwards;
}

:where(.hb-migrated) .cloud-price-section.moves .cloud-price-month-circle{
  animation: drawPriceCircle .7s ease .6s forwards;
}

@keyframes drawPriceLine{
  0%{
    transform: scaleX(0);
  }
  100%{
    transform: scaleX(1);
  }
}

@keyframes drawPriceCircle{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-10deg) scale(0.7);
  }
  100%{
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-10deg) scale(1);
  }
}


:where(.hb-migrated) .cloud-links-section{
  padding: 80px 0;
  background: #fafaf7;
}

:where(.hb-migrated) .cloud-links-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  justify-content: center;
}

:where(.hb-migrated) .cloud-link-card{
  position: relative;
  min-height: 430px;
  border: 1px solid #9a9a9a;
  border-radius: 20px;
  background: #f4f4ef;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

:where(.hb-migrated) .cloud-link-card__full-link {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 10;
}

:where(.hb-migrated) .cloud-link-card__body{
  padding: 28px 24px 16px;
}

:where(.hb-migrated) .cloud-link-card__title{
  font-size: 20px;
  margin-bottom: 14px;
  padding-bottom: 4px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

:where(.hb-migrated) .cloud-link-card__text{
  font-size: 14px;
  line-height: 1.6;
  padding-right: 8px;
  word-break: break-word;
  color: #555;
}

:where(.hb-migrated) .cloud-link-card__side{
  margin-top: auto;
  padding: 0 24px 28px;
  text-align: center;
}

:where(.hb-migrated) .cloud-link-card__side img{
  max-width: 140px;
  width: 100%;
  height: auto;
}

:where(.hb-migrated) .cloud-link-card__corner{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 90px;
  height: 90px;
  background: #4b4545;
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 12px;
  padding: 0 12px 10px 0;
  font-size: 12px;
  transform: clip-path;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

:where(.hb-migrated) .cloud-link-card:hover{
  transform: translateY(-4px);
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}





:where(.hb-migrated) .product-hero-overlay{
  position: relative;
  width: 100%;
  overflow: hidden;
}


:where(.hb-migrated) .product-hero-bg img{
  width: 100%;
  height: 550px;
  object-fit: cover;
  display: block;
}


:where(.hb-migrated) .product-hero-content{
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);

  max-width: 480px;
  color: #222;
}


:where(.hb-migrated) .product-hero-content h2{
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 16px;
}


:where(.hb-migrated) .product-hero-content p{
  font-size: 15px;
  line-height: 1.8;
}

:where(.hb-migrated) .feature-item.hide{
  opacity: 0;
  transform: translateY(20px);
}

:where(.hb-migrated) .feature-item.moves{
  opacity: 1;
  transform: translateY(0);
  transition-property: opacity, transform;
  transition-duration: .6s;
  transition-timing-function: ease;
}


:where(.hb-migrated) .delay-1{ transition-delay: .1s; }
:where(.hb-migrated) .delay-2{ transition-delay: .2s; }
:where(.hb-migrated) .delay-3{ transition-delay: .3s; }
:where(.hb-migrated) .delay-4{ transition-delay: .4s; }
:where(.hb-migrated) .delay-5{ transition-delay: .5s; }


:where(.hb-migrated) .product-feature-block{
  padding: 20px 0;
  padding-bottom: 70px;
  background: #f4f4f4;
}



:where(.hb-migrated) .product-feature-icons{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 40px;
  max-width: 1000px;
  margin: 0 auto 40px;
}

:where(.hb-migrated) .feature-item{
  text-align: center;
}

:where(.hb-migrated) .feature-item img{
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
}

:where(.hb-migrated) .feature-item p{
  font-size: 13px;
  line-height: 1.6;
}


:where(.hb-migrated) .product-feature-btn{
  text-align: center;
  padding: 14px 36px;
}

:where(.hb-migrated) .btn-green{
  display: inline-block;
  background: #3a6b47;
  color: #fff;
  padding: 12px 32px;
  font-size: 16px;
  padding: 14px 36px;
  border-radius: 999px;
}



:where(.hb-migrated) .workflow-section{
  padding: 100px 0;
  background: #f4f4f4;
}

:where(.hb-migrated) .workflow-head{
  text-align: center;
  margin-bottom: 64px;
}

:where(.hb-migrated) .workflow-label{
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .12em;
  color: #417751;
}

:where(.hb-migrated) .workflow-title{
  margin: 0 0 16px;
  font-size: 44px;
  line-height: 1.3;
  font-weight: 700;
  color: #222;
}

:where(.hb-migrated) .workflow-lead{
  margin: 0;
  font-size: 16px;
  line-height: 2;
  color: #555;
}

:where(.hb-migrated) .workflow-timeline{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 0;
}

:where(.hb-migrated) .workflow-timeline::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(to bottom, #dbe4dd 0%, #b9cbbb 100%);
  transform: translateX(-50%);
}

:where(.hb-migrated) .workflow-item{
  position: relative;
  width: 50%;
  margin-bottom: 44px;
  display: flex;
  align-items: center;
  gap: 24px;
}

:where(.hb-migrated) .workflow-item.left{
  padding-right: 48px;
  justify-content: flex-end;
}

:where(.hb-migrated) .workflow-item.right{
  margin-left: 50%;
  padding-left: 48px;
  justify-content: flex-start;
}

:where(.hb-migrated) .workflow-item::before{
  content: "";
  position: absolute;
  top: 40px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #417751;
  box-shadow: 0 0 0 8px #eef3ef;
}

:where(.hb-migrated) .workflow-item.left::before{
  right: -7px;
}

:where(.hb-migrated) .workflow-item.right::before{
  left: -7px;
}

:where(.hb-migrated) .workflow-card{
  background: #fff;
  border-radius: 24px;
  padding: 28px 28px 24px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  border: 1px solid #e7ece7;
  flex: 1;
}

:where(.hb-migrated) .workflow-step{
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #d94668;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

:where(.hb-migrated) .workflow-card-title{
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 1.35;
  font-weight: 700;
  color: #111;
}

:where(.hb-migrated) .workflow-small{
  font-size: .72em;
}

:where(.hb-migrated) .workflow-note{
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

:where(.hb-migrated) .workflow-text{
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.9;
  color: #333;
}

:where(.hb-migrated) .workflow-subtext{
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}

:where(.hb-migrated) .workflow-icon{
  width: 120px;
  flex-shrink: 0;
  text-align: center;
}

:where(.hb-migrated) .workflow-icon img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}


:where(.hb-migrated) .workflow-item.hide{
  opacity: 0;
  transform: translateY(28px);
}

:where(.hb-migrated) .workflow-item.moves{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .8s ease, transform .8s ease;
}


:where(.hb-migrated) .app-callout-section{
  background: #f4f4f4;
  padding: 80px 20px;
  overflow: hidden;
}

:where(.hb-migrated) .app-callout-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  position: relative;
}


:where(.hb-migrated) .app-callout-bubble{
  position: relative;
  width: 400px;
  height: 400px;
  border: 3px solid #f4f4f4;
  border-radius: 50%;
  background: transparent;
  box-shadow: 8px 10px 14px rgba(0,0,0,0.18);
  flex-shrink: 0;
}


:where(.hb-migrated) .app-callout-bubble::after{
  content: "";
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 34px solid transparent;
  border-bottom: 34px solid transparent;
  border-left: 170px solid #f4f4f4;
  filter: drop-shadow(8px 8px 8px rgba(0,0,0,0.18));
  z-index: 1;
}

:where(.hb-migrated) .app-callout-bubble::before{
  content: "";
  position: absolute;
  right: -132px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 38px solid transparent;
  border-bottom: 38px solid transparent;
  border-left: 180px solid #f4f4f4;
  z-index: 0;
}


:where(.hb-migrated) .app-callout-content{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 70px;
  text-align: center;
  z-index: 2;
}

:where(.hb-migrated) .app-callout-icon{
  width: 290px;
  margin: 0 auto 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

:where(.hb-migrated) .app-callout-icon img{
  display: block;
  width: 50%;
  height: auto;
  margin: 0 auto;
  border-radius: 28px;
  box-shadow: 4px 6px 10px rgba(0,0,0,0.18);
}

:where(.hb-migrated) .app-callout-text{
  margin: 0;
  font-size: 25px;
  line-height: 1.15;
  font-weight: 900;
  color: #000;
  letter-spacing: 0.04em;
}


:where(.hb-migrated) .app-callout-device{
  width: 380px;
  flex-shrink: 0;
}

:where(.hb-migrated) .app-callout-device img{
  display: block;
  width: 60%;
  height: auto;
  filter: drop-shadow(8px 10px 10px rgba(0,0,0,0.22));
}


:where(.hb-migrated) .workflow-btn{
  display: inline-block;
  margin-top: 24px;
  padding: 12px 24px;
  background: #6aa58c;
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
}

:where(.hb-migrated) .workflow-btn:hover{
  background: #588d78;
  transform: translateY(-2px);
}




:where(.hb-migrated) .product-hero-content .hero-logo{
  display: block;
  margin-bottom: 20px;
}

:where(.hb-migrated) .choice-section{
  background: #fff;
  padding: 100px 0;
  margin-top: 100px;
}

:where(.hb-migrated) .choice-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}


:where(.hb-migrated) .choice-left img{
  width: 280px;
  display: block;
}


:where(.hb-migrated) .choice-section .choice-left.hide.fade-left{
  transform: translateX(-40px) !important;
}

:where(.hb-migrated) .choice-section .choice-left.hide.fade-left.moves{
  transform: translateX(0) !important;
}


:where(.hb-migrated) .choice-right{
  flex: 1;
}


:where(.hb-migrated) .choice-title-box{
  background: #fff;
  border: 3px solid #222;
  border-radius: 40px;
  padding: 20px 30px;
  position: relative;
  margin-bottom: 50px;
}


:where(.hb-migrated) .choice-title-box::after{
  content: "";
  position: absolute;
  bottom: -14px;
  left: 28px;
  width: 90%;
  height: 12px;
  background: repeating-linear-gradient(
    45deg,
    #3a2a2a,
    #3a2a2a 6px,
    transparent 6px,
    transparent 12px
  );
}

:where(.hb-migrated) .choice-title-small{
  font-size: 16px;
  margin-bottom: 6px;
}

:where(.hb-migrated) .choice-title-box h2{
  font-size: 32px;
  font-weight: 900;
  color: #1b8a9b;
  margin: 0;
}


:where(.hb-migrated) .choice-bubbles{
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}


:where(.hb-migrated) .bubble{
  width: 180px;
  height: 180px;
  background: #c9dbe2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

:where(.hb-migrated) .choice-title-box{
  position: relative;
}


:where(.hb-migrated) .choice-memo{
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  transform: rotate(8deg);
}


:where(.hb-migrated) .checker-select-section{
  background: #f3f3f3;
  padding: 90px 0 70px;
}

:where(.hb-migrated) .checker-select-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

:where(.hb-migrated) .checker-select-head{
  text-align: center;
  margin-bottom: 50px;
  position: relative;
}

:where(.hb-migrated) .checker-select-head h2{
  font-size: 42px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 5px solid #222;
  display: inline-block;
  position: relative;
}

:where(.hb-migrated) .checker-select-head::after{
  content: "";
  display: block;
  width: 65%;
  max-width: 100%;
  height: 18px;
  margin: 0 auto;
  background: repeating-linear-gradient(
    45deg,
    #362323,
    #362323 12px,
    transparent 12px,
    transparent 24px
  );
}

:where(.hb-migrated) .checker-badge-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 28px;
  margin-bottom: 50px;
}

:where(.hb-migrated) .checker-badge{
  position: relative;
  background: #fff;
  border: 5px solid #eb6d16;
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 18px 34px;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  box-sizing: border-box;
  flex-direction: column;
  gap: 12px;
}

:where(.hb-migrated) .checker-badge::before{
  content: "";
  position: absolute;
  inset: 8px;
  border: 4px solid #eb6d16;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  pointer-events: none;
}

:where(.hb-migrated) .checker-badge span{
  display: block;
  position: relative;
  z-index: 1;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.55;
  color: #111;
  margin-bottom: 2px;
}

:where(.hb-migrated) .checker-badge br{
  display: none;
}

:where(.hb-migrated) .checker-badge small{
  display: block;
  font-size: 14px;
  color: #888;
  line-height: 1.6;
  margin: 0;
  max-width: 80%;
}

:where(.hb-migrated) .checker-select-text{
  text-align: center;
}

:where(.hb-migrated) .checker-select-text p{
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.7;
  color: #111;
}


:where(.hb-migrated) .checker-note-line{
  position: relative;
  display: inline-block;
  padding-bottom: 0.5px;
  border-bottom: 2px solid #111;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}


:where(.hb-migrated) .checker-note-line::after{
  content: "※";
  font-size: 0.6em;
  position: relative;
  top: 0.5em;
  margin-left: 4px;
}


:where(.hb-migrated) .checker-note{
  margin-top: 16px;
  font-size: 12px !important;
  font-weight: 100 !important;
  color: #666;
  line-height: 1.6;
}


:where(.hb-migrated) .checker-recommend-section{
  position: relative;
  background: #fff9fc;
  padding: 110px 0 90px;
  overflow: hidden;
}

:where(.hb-migrated) .checker-recommend-section::before{
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 90px;
  background: #f3f3f3;
  clip-path: polygon(0 0, 100% 0, 100% 42%, 82% 42%, 50% 100%, 18% 42%, 0 42%);
}

:where(.hb-migrated) .checker-recommend-inner{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

:where(.hb-migrated) .checker-recommend-top{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 50px;
  margin-bottom: 50px;
}

:where(.hb-migrated) .checker-product-image{
  flex: 0 0 320px;
}

:where(.hb-migrated) .checker-product-image img{
  width: 100%;
  height: auto;
  display: block;
}

:where(.hb-migrated) .checker-recommend-copy{
  flex: 1;
  text-align: center;
}

:where(.hb-migrated) .checker-recommend-lead{
  margin: 0 0 10px;
  font-size: 44px;
  font-weight: 700;
  color: #0d89aa;
  line-height: 1.2;
}

:where(.hb-migrated) .checker-recommend-logo{
  max-width: 520px;
  width: 88%;
  height: auto;
  display: block;
  margin: 0 auto 14px;
}

:where(.hb-migrated) .checker-recommend-sub{
  margin: 0;
  font-size: 50px;
  font-weight: 700;
  color: #0d89aa;
  line-height: 1.3;
}

:where(.hb-migrated) .checker-point-area{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  margin-top: 20px;
}

:where(.hb-migrated) .checker-point-circle{
  width: 260px;
  height: 260px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 18px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 32px 22px 20px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  padding-bottom: 70px;
}

:where(.hb-migrated) .checker-point-icon{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

:where(.hb-migrated) .checker-point-icon img{
  width: 97px;
  height: auto;
}
:where(.hb-migrated) .checker-point-no{
  width: 100%;
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 3px solid #0d89aa;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0d89aa;
  line-height: 1.2;
}

:where(.hb-migrated) .checker-point-text{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0d89aa;
  line-height: 1.6;
}

:where(.hb-migrated) .checker-support-copy{
  margin: 40px 0 0;
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  color: #0d89aa;
  line-height: 1.4;
}

:where(.hb-migrated) .app-point-section{
  background: #fff9fc;
  padding: 70px 20px;
}

:where(.hb-migrated) .app-point-inner{
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}


:where(.hb-migrated) .app-point-head{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 90px;
  align-items: center;
  max-width: 930px;
  margin: 0 auto 60px;
}


:where(.hb-migrated) .app-point-title{
  min-height: 400px;
  background: #07849a;
  border-radius: 20px;
  padding: 30px 26px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  justify-content: center;
}

:where(.hb-migrated) .app-point-num{
  color: #fff;
  line-height: 1;
  letter-spacing: 0.08em;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 2px solid #fff;
}


:where(.hb-migrated) .point-number {
  display: block;
  font-size: 72px;
  font-weight: 900;
  line-height: 1;

  position: relative;
  top: -3px;
  left: 4px;
}


:where(.hb-migrated) .app-point-num {
  position: relative;
}


:where(.hb-migrated) .point-label {
  position: absolute;
  top: 3%;
  left: 35px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 2px;
  opacity: 0.8;
}


:where(.hb-migrated) .app-point-title h2{
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.45;
  color: #fff;
  text-align: center;
  margin-top: 38px;
}

:where(.hb-migrated) .app-point-lead{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  color: #fff;
}


:where(.hb-migrated) .app-point-lead{
  margin: 0;
  font-size: 20px;
  line-height: 1.9;
  font-weight: 600;
  color: #111;
}

:where(.hb-migrated) .app-worry-block{
  display: flex;
  justify-content: center;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 40px;
  margin-bottom: 30px;
}

:where(.hb-migrated) .app-worry-block p:empty{
  display: none;
}

:where(.hb-migrated) .app-person-worry{
  width: 25%;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,0.18));
}

:where(.hb-migrated) .app-worry-balloon{
  max-width: 450px;
  width: 100%;
  position: relative;
  background: #fff;
  border: 2px solid #111;
  border-radius: 24px;
  padding: 28px 32px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  box-sizing: border-box;
}

:where(.hb-migrated) .app-worry-balloon::before{
  content: "";
  position: absolute;
  left: -18px;
  top: 45%;
  width: 30px;
  height: 30px;
  background: #fff;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(45deg);
}

:where(.hb-migrated) .app-catch{
  text-align: center;
  color: #0b7f93;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 25px;
}

:where(.hb-migrated) .app-catch span{
  display: block;
  margin-top: 8px;
}

:where(.hb-migrated) .app-download-box{
  border: 3px dotted #0b7180;
  background: #fff;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 35px;
}

:where(.hb-migrated) .app-download-left{
  display: flex;
  align-items: center;
  gap: 18px;
}

:where(.hb-migrated) .app-download-left img{
  width: 92px;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

:where(.hb-migrated) .app-download-left p{
  font-size: 18px;
  line-height: 1.6;
}

:where(.hb-migrated) .app-store-area{
  display: flex;
  align-items: center;
  gap: 22px;
}

:where(.hb-migrated) .app-store-area p{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
}

:where(.hb-migrated) .app-store-area img{
  width: 130px;
}

:where(.hb-migrated) .app-device-compare{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: #fff9fc;
  padding: 40px 20px 60px;
}

:where(.hb-migrated) .app-device-item{
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: auto;
}

:where(.hb-migrated) .app-device-item img{
  width: 135px;
  height: auto;
  display: block;
  margin: 0;
}

:where(.hb-migrated) .app-device-item.recommended img{
  width: 130px;
}

:where(.hb-migrated) .app-device-text{
  width: 240px;
  min-height: 160px;
  border: 2px solid #111;
  border-radius: 22px;
  padding: 28px 20px;
  box-sizing: border-box;
  text-align: center;
  background: #effbfb;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:where(.hb-migrated) .app-device-text h3{
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

:where(.hb-migrated) .app-device-text p{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

:where(.hb-migrated) .app-no-work{
  width: 100%;
  margin:  0 0 40px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;

  background: #07849a;
  color: #fff;
  padding: 18px 30px;

  font-size: 36px;
  font-weight: 900;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
}

:where(.hb-migrated) .app-no-work{
  font-weight: 900;
}

:where(.hb-migrated) .app-no-work span,:where(.hb-migrated)
.app-no-work strong{
  display: inline-block;
  font-weight: 900;
}

:where(.hb-migrated) .app-no-work span,:where(.hb-migrated)
.app-no-work strong{
  display: block;
}

:where(.hb-migrated) .app-no-work span{
  text-decoration: line-through;
  text-decoration-color: #e33;
  text-decoration-thickness: 5px;
}

:where(.hb-migrated) .app-no-work strong{
  margin-left: 18px;
}

:where(.hb-migrated) .app-screen-area{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: 28px;
}

:where(.hb-migrated) .app-screen-images{
  display: flex;
  gap: 12px;
}

:where(.hb-migrated) .app-screen-images img{
  width: 100%;
}

:where(.hb-migrated) .app-check-person{
  position: relative;
  text-align: center;
}

:where(.hb-migrated) .app-check-person img{
  width: 60%;
  max-width: 320px;
  margin-right: 100px;
}

:where(.hb-migrated) .app-check-person p{
  position: absolute;
  right: 0;
  top: 20px;
  background: #fff;
  border: 3px solid #00c28a;
  border-radius: 50%;
  padding: 28px 20px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

:where(.hb-migrated) .app-check-person p:empty{
  display: none;
}


:where(.hb-migrated) .product-measure-flow {
  padding: 100px 0;
  background: #fff9fc;
  position: relative;
}

:where(.hb-migrated) .product-measure-flow .section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

:where(.hb-migrated) .flow-simple {
  margin-top: -93px;
}

:where(.hb-migrated) .flow-simple-center {
  position: relative;
  width: 360px;
  max-width: 45%;
  margin: 0 auto 50px;
  transform: translateX(-80px);
}

:where(.hb-migrated) .flow-simple-center img {
  width: 230px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

:where(.hb-migrated) .flow-simple-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  max-width: 900px;
  margin: 0 auto;
}

:where(.hb-migrated) .flow-simple-item img {
  width: 80%;
  height: auto;
  display: block;
}


:where(.hb-migrated) .flow-simple-center .flow-num::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 120px;
  border-top: 2px dashed #b34a1c;
  transform: translateY(-50%);
}


:where(.hb-migrated) .flow-simple-center .num-2::before {
  width: 150px;
}


:where(.hb-migrated) .flow-simple-center .num-34::before {
  width: 125px;
}


:where(.hb-migrated) .flow-simple-center .num-1::before {
  width: 150px;
}

:where(.hb-migrated) .flow-num {
  position: absolute;
  right: -80px;
  background: #fff;
  border: 2px solid #b34a1c;
  color: #b34a1c;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}


:where(.hb-migrated) .num-1 {
  top: 72%;
  right: -260px;
  transform: translateY(-50%);
}

:where(.hb-migrated) .num-2 {
  top: 18%;
  right: -260px;
}

:where(.hb-migrated) .num-34 {
  top: 76%;
  right: -278px;
  border-radius: 20px;
  width: auto;
  padding: 6px 12px;
}

:where(.hb-migrated) .flow-simple-center .num-2 {
  top: 83px;
  right: -80px;
}

:where(.hb-migrated) .flow-simple-center .num-1 {
  bottom: -20px;
  right: -80px;
}

:where(.hb-migrated) .flow-simple-center .num-34 {
  top: 45%;
  right: -92px;
}




:where(.hb-migrated) .flow-simple .flow-num {
  opacity: 0;
}


:where(.hb-migrated) .flow-simple.moves .flow-num {
  animation: flowNumFade 0.8s ease forwards;
}

:where(.hb-migrated) .flow-simple.moves .num-2 {
  animation-delay: 0.4s;
}

:where(.hb-migrated) .flow-simple.moves .num-1 {
  animation-delay: 0.7s;
}

:where(.hb-migrated) .flow-simple.moves .num-34 {
  animation-delay: 1s;
}

@keyframes flowNumFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
  }
}


:where(.hb-migrated) .flow-simple-center .flow-num::before {
  opacity: 0;
}

:where(.hb-migrated) .flow-simple.moves .flow-num::before {
  animation: flowLineFade 0.8s ease forwards;
}

:where(.hb-migrated) .flow-simple.moves .num-2::before {
  animation-delay: 0.4s;
}

:where(.hb-migrated) .flow-simple.moves .num-1::before {
  animation-delay: 0.7s;
}

:where(.hb-migrated) .flow-simple.moves .num-34::before {
  animation-delay: 1s;
}

@keyframes flowLineFade {
  from {
    opacity: 0;
    width: 0;
  }
  to {
    opacity: 1;
  }
}



:where(.hb-migrated) .flow-simple-list .flow-simple-item {
  opacity: 0;
}


:where(.hb-migrated) .flow-simple.moves .flow-simple-item {
  animation: flowItemFade 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


:where(.hb-migrated) .flow-simple.moves .flow-simple-item:nth-child(1) {
  animation-delay: 0.6s;
}

:where(.hb-migrated) .flow-simple.moves .flow-simple-item:nth-child(2) {
  animation-delay: 0.9s;
}

:where(.hb-migrated) .flow-simple.moves .flow-simple-item:nth-child(3) {
  animation-delay: 1.2s;
}

:where(.hb-migrated) .flow-simple.moves .flow-simple-item:nth-child(4) {
  animation-delay: 1.5s;
}

@keyframes flowItemFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


:where(.hb-migrated) .compare-modern-section {
  background: #fff9fc;
  padding: 103px 20px;
}

:where(.hb-migrated) .compare-modern-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

:where(.hb-migrated) .compare-modern-card {
  background: #fff;
  border-radius: 28px;
  padding: 42px 36px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}

:where(.hb-migrated) .compare-modern-card--pitopa {
  border: 3px solid #07849a;
  position: relative;
}

:where(.hb-migrated) .compare-modern-card--pitopa::before {
  content: "おすすめ";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: #07849a;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  padding: 8px 24px;
  border-radius: 999px;
}

:where(.hb-migrated) .compare-modern-label {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #eef7f8;
  color: #07849a;
  font-weight: 900;
  font-size: 14px;
}

:where(.hb-migrated) .compare-modern-card h2 {
  margin: 0 0 28px;
  font-size: 34px;
  font-weight: 900;
  color: #222;
}

:where(.hb-migrated) .compare-modern-image {
  max-width: 300px;
  margin: 0 auto 28px;
}

:where(.hb-migrated) .compare-modern-image img {
  width: 100%;
  display: block;
}

:where(.hb-migrated) .compare-modern-text {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.7;
  color: #222;
}

:where(.hb-migrated) .compare-modern-card--pitopa .compare-modern-text {
  background: linear-gradient(transparent 62%, #fff176 62%);
  display: inline;
}



:where(.hb-migrated) .compare-modern-extra {
  grid-column: 1 / -1;
  position: relative;
  margin-top: 50px;
  text-align: center;
}

:where(.hb-migrated) .compare-modern-extra img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto;

  position: absolute;
  top: -125px;
  left: 75%;
  transform: translateX(-50%);
}

:where(.hb-migrated) .mouthpiece-text {
  position: absolute;
  left: 360px;
  bottom: -116px;
  max-width: 240px;

  opacity: 1;
  transform: none;
  z-index: 5;
}

:where(.hb-migrated) .mouthpiece-text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  text-align: left;
}

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

  :where(.hb-migrated) .mouthpiece-text{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 100%;
    max-width: 100%;

    margin-top: 18px;
    padding: 0 20px;

    box-sizing: border-box;
    text-align: center;
  }

  :where(.hb-migrated) .mouthpiece-text p{
    font-size: 14px;
    line-height: 1.9;
  }

}


:where(.hb-migrated) .checker-flow-section {
  background: #fff;
  padding: 90px 20px;
}

:where(.hb-migrated) .checker-flow-head {
  text-align: center;
  margin-bottom: 48px;
}

:where(.hb-migrated) .checker-flow-label {
  margin: 0 0 8px;
  color: #07849a;
  font-weight: 900;
  letter-spacing: 0.12em;
}

:where(.hb-migrated) .checker-flow-head h2 {
  margin: 0 0 12px;
  font-size: 34px;
  font-weight: 900;
  color: #222;
}

:where(.hb-migrated) .checker-flow-head p {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}

:where(.hb-migrated) .checker-flow-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

:where(.hb-migrated) .checker-flow-card {
  position: relative;
  background: #e3e3e3;
  border-radius: 24px;
  padding: 34px 28px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
  text-align: center;
}

:where(.hb-migrated) .checker-flow-card--wide,:where(.hb-migrated)
.checker-flow-card--cloud {
  grid-column: span 2;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
}

:where(.hb-migrated) .checker-flow-step {
  position: absolute;
  top: -16px;
  left: 24px;
  background: #07849a;
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 900;
  font-size: 15px;
}

:where(.hb-migrated) .checker-flow-card-img {
  margin: 0 auto 20px;
  max-width: 520px;
}

:where(.hb-migrated) .checker-flow-card-img img,:where(.hb-migrated)
.cloud-image-double img,:where(.hb-migrated)
.flow-icon img {
  display: block;
  width: 100%;
  height: auto;
}

:where(.hb-migrated) .checker-flow-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  color: #222;
}

:where(.hb-migrated) .checker-flow-card p {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

:where(.hb-migrated) .flow-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);

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

:where(.hb-migrated) .flow-icon img {
  width: 54px;
  height: auto;
  display: block;
}

:where(.hb-migrated) .cloud-image-double {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;

  width: 100%;
  max-width: 820px;
  margin: 28px auto 0;
}

:where(.hb-migrated) .cloud-image-double img {
  width: 100% !important;
  max-width: none !important;
  display: block;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

:where(.hb-migrated) .cloud-image-double br {
  display: none !important;
}

:where(.hb-migrated) .cloud-image-double p {
  display: contents;
  margin: 0;
}


:where(.hb-migrated) .spec-compare-section {
  background: #fff;
  padding: 90px 20px;
}

:where(.hb-migrated) .spec-compare-table {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border-collapse: collapse;
  background: #fff;
  border: 3px solid #07849a;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

:where(.hb-migrated) .spec-compare-table th,:where(.hb-migrated)
.spec-compare-table td {
  border: 1px solid #d7e5e8;
  padding: 24px 20px;
  text-align: center;
  vertical-align: middle;
}

:where(.hb-migrated) .spec-compare-table thead th {
  background: #eefafa;
}

:where(.hb-migrated) .spec-compare-table thead th:first-child {
  width: 25%;
}

:where(.hb-migrated) .spec-compare-table thead th:nth-child(2),:where(.hb-migrated)
.spec-compare-table thead th:nth-child(3) {
  width: 37.5%;
}

:where(.hb-migrated) .compare-brand {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 900;
  color: #07849a;
}

:where(.hb-migrated) .spec-compare-table thead img {
  max-width: 60px;
  height: auto;
}

:where(.hb-migrated) .spec-compare-table tbody th {
  background: #f7fbfb;
  font-size: 18px;
  font-weight: 900;
  color: #222;
  text-align: left;
}

:where(.hb-migrated) .spec-compare-table tbody th span,:where(.hb-migrated)
.spec-compare-table td span {
  font-size: 13px;
}

:where(.hb-migrated) .spec-compare-table td {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: #222;
}

:where(.hb-migrated) .spec-compare-table td p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

:where(.hb-migrated) .mark-circle,:where(.hb-migrated)
.mark-triangle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 34px !important;
  font-weight: 900;
  line-height: 1;
}

:where(.hb-migrated) .mark-circle {
  color: #07849a;
}

:where(.hb-migrated) .mark-triangle {
  color: #d49a00;
}

:where(.hb-migrated) .app-feature-cell {
  padding: 0 !important;
}


:where(.hb-migrated) .app-feature-top {
  padding: 24px 18px;
}


:where(.hb-migrated) .app-feature-bottom {
  position: relative;
  padding: 22px 18px 18px;
  background: #f9fcfc;
}


:where(.hb-migrated) .app-feature-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  border-top: 2px dashed #78a9b3;
}


:where(.hb-migrated) .cloud-option-label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;

  background: #07849a;
  color: #fff;

  font-size: 12px;
  font-weight: 700;

  border-radius: 999px;
}


:where(.hb-migrated) .other-feature-cell .app-feature-top {
  padding-top: 34px;
}

:where(.hb-migrated) .other-feature-cell p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
}



@media screen and (max-width: 768px) {
  :where(.hb-migrated) .spec-compare-section {
    padding: 70px 12px;
  }

  :where(.hb-migrated) .spec-compare-table {
    font-size: 14px;
  }

  :where(.hb-migrated) .spec-compare-table th,:where(.hb-migrated)
  .spec-compare-table td {
    padding: 16px 10px;
  }

  :where(.hb-migrated) .compare-brand {
    font-size: 18px;
  }

  :where(.hb-migrated) .spec-compare-table thead img {
    max-width: 80px;
  }

  :where(.hb-migrated) .spec-compare-table tbody th {
    font-size: 14px;
  }

  :where(.hb-migrated) .spec-compare-table td {
    font-size: 14px;
  }
}


:where(.hb-migrated) .product-detail-parts-map{
  padding: 80px 0;
  background: #fff;
}

:where(.hb-migrated) .product-detail-parts-map-inner{
  position: relative;
  min-height: 560px;
}

:where(.hb-migrated) .product-detail-parts-device{
  position: relative;
  width: 42%;
  margin: 0 auto;
  z-index: 1;
}

:where(.hb-migrated) .product-detail-parts-device img{
  width: 100%;
  height: auto;
  display: block;
}

:where(.hb-migrated) .parts-label{
  position: absolute;
  width: 240px;
  background: #fff;
  border: 2px solid #222;
  padding: 8px 10px;
  z-index: 3;
}

:where(.hb-migrated) .parts-label strong{
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  border-bottom: 1px solid #222;
  margin-bottom: 6px;
  padding-bottom: 4px;
}

:where(.hb-migrated) .parts-label p{
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}


:where(.hb-migrated) .parts-label-1{ top: 20px; left: 0; }
:where(.hb-migrated) .parts-label-2{ top: 148px; left: 0; }
:where(.hb-migrated) .parts-label-3{ top: 278px; left: 0; }
:where(.hb-migrated) .parts-label-4{ top: 200x; left: 0; }


:where(.hb-migrated) .parts-label-5{ top: 63px; right: 0; }
:where(.hb-migrated) .parts-label-6{ top: 171px; right: 0; }
:where(.hb-migrated) .parts-label-7{ top: 278px; right: 0; }
:where(.hb-migrated) .parts-label-8{ top: 386px; right: 0; }


:where(.hb-migrated) .parts-line{
  position: absolute;
  height: 1px;
  border-top: 2px dotted #777;
  z-index: 5;
}


:where(.hb-migrated) .parts-line-1{
  width: 333px;
  top: 79px;
  left: 239px;
  transform: rotate(5deg);
}

:where(.hb-migrated) .parts-line-2{
  width: 203px;
  top: 186px;
  left: 239px;
  transform: rotate(4deg);
}

:where(.hb-migrated) .parts-line-3{
  width: 286px;
  top: 284px;
  left: 239px;
  transform: rotate(-4deg);
}

:where(.hb-migrated) .parts-line-4{
  width: 298px;
  top: 398px;
  left: 228px;
  transform: rotate(-24deg);
}


:where(.hb-migrated) .parts-line-5{
  width: 211px;
  top: 99px;
  right: 239px;
  transform: rotate(0deg);
}

:where(.hb-migrated) .parts-line-6{
  width: 224px;
  top: 167px;
  right: 232px;
  transform: rotate(21deg);
}

:where(.hb-migrated) .parts-line-7{
  width: 234px;
  top: 242px;
  right: 215px;
  transform: rotate(37deg);
}

:where(.hb-migrated) .parts-line-8{
  width: 320px;
  top: 304px;
  right: 181px;
  transform: rotate(50deg);
}



:where(.hb-migrated) .parts-label-9{ top: 20px; left: 0; }
:where(.hb-migrated) .parts-label-10{ top: 133px; left: 0; }
:where(.hb-migrated) .parts-label-11{ top: 248px; left: 0; }
:where(.hb-migrated) .parts-label-12{ top: 364px; left: 0; }
:where(.hb-migrated) .parts-label-17{ top: 482px; left: 0; }


:where(.hb-migrated) .parts-label-13{ top: 20px; right: 0; }
:where(.hb-migrated) .parts-label-14{ top: 195px; right: 0; }
:where(.hb-migrated) .parts-label-15{ top: 308px; right: 0; }
:where(.hb-migrated) .parts-label-16{ top: 441px; right: 0; }


:where(.hb-migrated) .parts-line-9{
  width: 249px;
  top: 96px;
  left: 235px;
  transform: rotate(18deg);
}

:where(.hb-migrated) .parts-line-10{
  width: 159px;
  top: 180px;
  left: 239px;
  transform: rotate(6deg);
}

:where(.hb-migrated) .parts-line-11{
  width: 191px;
  top: 284px;
  left: 239px;
}

:where(.hb-migrated) .parts-line-12{
  width: 171px;
  top: 376px;
  left: 233px;
  transform: rotate(-18deg);
}

:where(.hb-migrated) .parts-line-17{
  width: 248px;
  top: 469px;
  left: 223px;
  transform: rotate(-30deg);
}


:where(.hb-migrated) .parts-line-13{
  width: 298px;
  top: 88px;
  right: 239px;
  transform: rotate(-11deg);
}

:where(.hb-migrated) .parts-line-14{
  width: 249px;
  top: 186px;
  right: 229px;
  transform: rotate(24deg);
}

:where(.hb-migrated) .parts-line-15{
  width: 166px;
  top: 339px;
  right: 238px;
  transform: rotate(12deg);
}

:where(.hb-migrated) .parts-line-16{
  width: 229px;
  top: 451px;
  right: 232px;
  transform: rotate(21deg);
}

:where(.hb-migrated) .parts-pin{
  display: none;
}


:where(.hb-migrated) .faq-section{
  padding: 120px 0;
  background: #f4f4f4;
}

:where(.hb-migrated) .faq-head{
  margin-bottom: 50px;
}

:where(.hb-migrated) .faq-label{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .15em;
  color: #417751;
  margin-bottom: 16px;
}

:where(.hb-migrated) .faq-title{
  font-size: 35px;
  font-weight: 700;
  line-height: 1.4;
}

:where(.hb-migrated) .faq-list{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

:where(.hb-migrated) .faq-item{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #dbe2ea;
  box-shadow:
    0 4px 20px rgba(0,0,0,.04);
}

:where(.hb-migrated) .faq-item summary{
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 34px 80px 34px 40px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

:where(.hb-migrated) .faq-item summary::-webkit-details-marker{
  display:none;
}

:where(.hb-migrated) .faq-item summary::after{
  content:"+";
  position:absolute;
  right:32px;
  top:50%;
  transform:translateY(-50%);
  font-size:40px;
  font-weight:300;
  color:#1f2b3d;
}

:where(.hb-migrated) .faq-item[open] summary::after{
  content:"−";
}

:where(.hb-migrated) .faq-answer{
  padding: 0 40px 40px;
}

:where(.hb-migrated) .faq-answer p{
  font-size: 15px;
  line-height: 2;
  color:#4b5563;
}


:where(.hb-migrated) .faq-youtube{
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  margin-top: 28px;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 auto;
}

:where(.hb-migrated) .faq-youtube iframe{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}


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

  :where(.hb-migrated) .faq-youtube{
    width: calc(100% - 20px);
    margin: 0 auto;
  }

}


@media screen and (min-width: 769px){
  :where(.hb-migrated) .parts-label-4{
    top: 390px !important;
    left: 0 !important;
  }
}

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

  :where(.hb-migrated) .product-detail-parts-map-inner{
    min-height: auto;
    padding: 40px 0;
  }


  :where(.hb-migrated) .parts-line{
    display: none;
  }


  :where(.hb-migrated) .product-detail-parts-device{
    position: relative;
    width: 300px;
    margin: 0 auto 32px;
    left: auto;
    top: auto;
    transform: none;
  }

  :where(.hb-migrated) .product-detail-parts-device img{
    width: 100%;
    max-width: none;
    height: auto;
    display: block;
  }


  :where(.hb-migrated) .parts-label{
    position: relative;
    padding-left: 46px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }


  :where(.hb-migrated) .parts-label-box{
    padding: 14px 16px;
  }

  :where(.hb-migrated) .parts-label-title{
    font-size: 18px;
  }

  :where(.hb-migrated) .parts-label-text{
    font-size: 13px;
    line-height: 1.8;
  }

  :where(.hb-migrated) .parts-label::before{
    position: absolute;
    left: 10px;
    top: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #087f8f;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
  }

  :where(.hb-migrated) .parts-label-1::before{ content: "1"; }
  :where(.hb-migrated) .parts-label-2::before{ content: "2"; }
  :where(.hb-migrated) .parts-label-3::before{ content: "3"; }
  :where(.hb-migrated) .parts-label-4::before{ content: "4"; }
  :where(.hb-migrated) .parts-label-5::before{ content: "5"; }
  :where(.hb-migrated) .parts-label-6::before{ content: "6"; }
  :where(.hb-migrated) .parts-label-7::before{ content: "7"; }
  :where(.hb-migrated) .parts-label-8::before{ content: "8"; }

  :where(.hb-migrated) .parts-label-9::before{ content: "1"; }
  :where(.hb-migrated) .parts-label-10::before{ content: "2"; }
  :where(.hb-migrated) .parts-label-11::before{ content: "3"; }
  :where(.hb-migrated) .parts-label-12::before{ content: "4"; }
  :where(.hb-migrated) .parts-label-13::before{ content: "6"; }
  :where(.hb-migrated) .parts-label-14::before{ content: "7"; }
  :where(.hb-migrated) .parts-label-15::before{ content: "8"; }
  :where(.hb-migrated) .parts-label-16::before{ content: "9"; }
  :where(.hb-migrated) .parts-label-17::before{ content: "5"; }
}


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

  :where(.hb-migrated) .product-detail-parts-device{
    position: relative;
  }

  :where(.hb-migrated) .parts-pin{
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #087f8f;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    z-index: 5;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
  }



  :where(.hb-migrated) .pin-1{
    top: 43px;
    left: 137px;
  }

  :where(.hb-migrated) .pin-2{
    top: 93px;
    left: 76px;
  }

  :where(.hb-migrated) .pin-3{
    top: 160px;
    left: 120px;
  }

  :where(.hb-migrated) .pin-4{
    top: 214px;
    left: 128px;
  }

  :where(.hb-migrated) .pin-5{
    top: 39px;
    right: 77px;
  }

  :where(.hb-migrated) .pin-6{
    top: 76px;
    right: 49px;
  }

  :where(.hb-migrated) .pin-7{
    top: 125px;
    right: 65px;
  }

  :where(.hb-migrated) .pin-8{
    top: 130px;
    right: 95px;
  }


  :where(.hb-migrated) .pin-9{
    top: 39px;
    left: 96px;
  }

  :where(.hb-migrated) .pin-10{
    top: 93px;
    left: 50px;
  }

  :where(.hb-migrated) .pin-11{
    top: 170px;
    left: 37px;
  }

  :where(.hb-migrated) .pin-12{
    top: 221px;
    left: 15px;
  }

  :where(.hb-migrated) .pin-13{
    top: 38px;
    right: 139px;
  }

  :where(.hb-migrated) .pin-14{
    top: 82px;
    right: 64px;
  }

  :where(.hb-migrated) .pin-15{
    top: 164px;
    right: 50px;
  }

  :where(.hb-migrated) .pin-16{
    top: 260px;
    right: 116px;
  }

  :where(.hb-migrated) .pin-17{
    top: 260px;
    right: 159px;
  }

  :where(.hb-migrated) .product-detail-parts-device br{
    display: none;
  }

  :where(.hb-migrated) .product-detail-parts-device .parts-pin{
    display: block !important;
    position: absolute !important;
  }
}



:where(.hb-migrated) .worry-section{
  background:#fff;
  padding:0 0 95px;
}

:where(.hb-migrated) .worry-head{
  background:#d4ddd9;
  padding:42px 20px;
  text-align:center;
  position:relative;
  border-radius: 999px;
  margin-top: 90px;
}



:where(.hb-migrated) .worry-head h2{
  margin:0;
  font-size:30px;
  line-height:1.4;
  font-weight:700;
  color:#000;
}

:where(.hb-migrated) .worry-inner{
  max-width:1000px;
  margin:100px auto 0;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:40px;
}

:where(.hb-migrated) .worry-box{
  flex:1;
  border:8px dashed #3a2f1f;
  border-radius:50px;
  padding:55px 60px;
}

:where(.hb-migrated) .worry-list{
  list-style:none;
  margin:0;
  padding:0;
}

:where(.hb-migrated) .worry-list li{
  position:relative;
  padding-left:54px;
  margin-bottom:28px;
  font-size:25px;
  font-weight:700;
  color:#4a3b2a;
  line-height:1.4;
  text-shadow:0 8px 10px rgba(96,255,125,.45);
}

:where(.hb-migrated) .worry-list li:last-child{
  margin-bottom:0;
}

:where(.hb-migrated) .worry-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#4a3b2a;
}

:where(.hb-migrated) .worry-person{
  width:260px;
  flex-shrink:0;
}

:where(.hb-migrated) .worry-person img{
  width:72%;
  height:auto;
  display:block;
}

@media screen and (max-width:767px){
  :where(.hb-migrated) .worry-head h2{
    font-size:25px;
  }

  :where(.hb-migrated) .worry-inner{
    flex-direction:column;
    margin-top:50px;

    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }

  :where(.hb-migrated) .worry-head{
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }

  :where(.hb-migrated) .worry-box{
    width:100%;
    padding:35px 28px;
    border-radius:36px;
  }

  :where(.hb-migrated) .worry-list li{
    font-size:18px;
    padding-left:38px;
  }

  :where(.hb-migrated) .worry-list li::before{
    width:24px;
    height:24px;
  }

  :where(.hb-migrated) .worry-person{
    width:180px;
  }
}

:where(.hb-migrated) .cat-point-section{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0px 0px;
}

:where(.hb-migrated) .cat-point-title{
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #2f8f8f;
  margin-bottom: 30px;
}

:where(.hb-migrated) .cat-point-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: center;
}

:where(.hb-migrated) .cat-point-card{
  position: relative;
}

:where(.hb-migrated) .cat-point-card img{
  width: 100%;
  display: block;
  border-radius: 8px;
}

:where(.hb-migrated) .cat-point-badge{
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

:where(.hb-migrated) .cat-point-badge span{
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
}

:where(.hb-migrated) .cat-point-badge p{
  font-size: 16px;
  font-weight: 700;
  margin: 6px 0 0;
}

:where(.hb-migrated) .cat-point-badge.pink{
  background: #f3a0a8;
  right: 5px;
  bottom: -20px;
}

:where(.hb-migrated) .cat-point-badge.green{
  background: #78c9a1;
  right: 5px;
  bottom: -20px;
}

:where(.hb-migrated) .cat-point-badge.blue{
  background: #72a9d8;
  right: 5px;
  left: auto;
  bottom: -20px;
}

:where(.hb-migrated) .cat-point-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  align-items:start;
  padding-top: 65px;
}

@media screen and (max-width: 767px){
  :where(.hb-migrated) .cat-point-grid{
    grid-template-columns: 1fr;
  }

  :where(.hb-migrated) .cat-point-card:nth-child(3){
    grid-column: auto;
  }

  :where(.hb-migrated) .cat-point-badge{
    width: 120px;
    height: 120px;
  }

  :where(.hb-migrated) .cat-point-badge p{
    font-size: 13px;
  }

    :where(.hb-migrated) .cat-point-card img{
    width: calc(100% - 80px);
    margin: 0 auto;
    display: block;
  }
}





:where(.hb-migrated) .cat-toilet-figure{
  position: relative;
}


:where(.hb-migrated) .cat-toilet-logo{
  position: absolute;
  width: 62%;
  right: 19%;
  top: 22%;
  z-index: 10;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.18));
}


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

  :where(.hb-migrated) .cat-toilet-logo{
    width: 71%;
    right: 14%;
    top: 23%;
  }

}


:where(.hb-migrated) .cat-point-detail-section{
  padding: 0px 20px;
  background:#fff;
}

:where(.hb-migrated) .cat-point-detail-inner{
  max-width:1100px;
  margin:0 auto;
}

:where(.hb-migrated) .cat-point-detail-head{
  text-align:center;
  margin-bottom:50px;
}

:where(.hb-migrated) .cat-point-catch{
  background:#48d1cc;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 255px;
  border-radius:999px;
  font-size:40px;
  font-weight:900;
  color:#fff;
  margin-bottom:34px;
}

:where(.hb-migrated) .cat-point-title-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  padding-bottom: 45px;
  margin-top: 50px;
}

:where(.hb-migrated) .cat-point-label{
  width:110px;
  height:110px;
  border:4px solid #e1a5a5;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:800;
  color:#4a2f1e;
  flex-shrink:0;
}

:where(.hb-migrated) .cat-point-title-row h2{
  margin:0;
  text-align:left;
  font-size:56px;
  line-height:1.45;
  font-weight:900;
  color:#4a2f1e;
}

:where(.hb-migrated) .cat-point-detail-head h2{
  display:inline-block;
  font-size:30px;
  line-height:1.45;
  font-weight:900;
  color:#4a2f1e;
  margin:0;
  text-align:left;
  border-bottom:6px wavy #d99b4b;
}

:where(.hb-migrated) .cat-point-detail-content{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap:45px;
  align-items:center;
}

:where(.hb-migrated) .cat-point-detail-image img{
  width:100%;
  display:block;
  border-radius:6px;
}

:where(.hb-migrated) .cat-point-detail-text{
  color:#3d2b1f;
}

:where(.hb-migrated) .cat-point-detail-text p{
  font-size:22px;
  line-height:1.6;
  font-weight:800;
  text-align:left;
  margin:0 0 26px;
}

:where(.hb-migrated) .cat-point-detail-text span{
  color:#e85b1f;
}

:where(.hb-migrated) .cat-point-detail-text p:before{
  content:none;
}

:where(.hb-migrated) .cat-point-detail-text p.lead:before{
  content:"●";
  margin-right:8px;
  color:#4a2f1e;
}

:where(.hb-migrated) .cat-point-detail-text ul{
  margin:0;
  padding-left:1.2em;
  font-size:17px;
  line-height:1.8;
  font-weight:700;
  text-align:left;
}

@media screen and (max-width:767px){
  :where(.hb-migrated) .cat-point-catch{
    font-size:30px;
    padding:14px 32px;
  }

  :where(.hb-migrated) .cat-point-title-row{
    justify-content: flex-start;
    align-items: center;
    padding-left: 0px;
    gap: 12px;
  }

  :where(.hb-migrated) .cat-point-label{
    width:90px;
    height:76px;
    font-size:18px;
    margin:0;
    flex: 0 0 90px;
  }

  :where(.hb-migrated) .cat-point-detail-head h2{
    display:block;
    font-size:19px;
    text-align:left;
  }

  :where(.hb-migrated) .cat-point-detail-content{
    grid-template-columns:1fr;
  }

  :where(.hb-migrated) .cat-point-detail-text p{
    font-size:22px;
  }

  :where(.hb-migrated) .cat-point-detail-text ul{
    font-size:15px;
  }
}


:where(.hb-migrated) .cat-width-section{
  padding:0px 20px;
  background:#fff;
}

:where(.hb-migrated) .cat-width-inner{
  max-width:1100px;
  margin:0 auto;
}


:where(.hb-migrated) .cat-width-compare{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:50px;
  margin-bottom:22px;
}

:where(.hb-migrated) .cat-width-item{
  text-align:center;
  position: relative;
  min-height: 520px;
}

:where(.hb-migrated) .cat-width-top-image{
  position:absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  z-index:3;
}

:where(.hb-migrated) .cat-width-top-image img{
  width:89%;
  height: auto;
  display: block;
  margin-left: 100px;
  margin-top: -31px;
}

:where(.hb-migrated) .cat-width-top-image span{
  position:absolute;
  left:0;
  top:50%;
  transform:rotate(-48deg);
  font-size:38px;
  font-weight:900;
  color:#ef7b1c;
}

:where(.hb-migrated) .cat-width-main-image{
  padding-top: 120px;
  text-align: center;
}

:where(.hb-migrated) .cat-width-main-image img{
  width:67%;
  max-width: 360px;
  height: auto;
  display:block;
  margin: 0 auto;
}

:where(.hb-migrated) .cat-width-compare{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
  align-items: start;
}


:where(.hb-migrated) .cat-width-bottom{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px;
  align-items:center;
  margin-right: 70px;
  margin-left: 70px;
  margin-bottom: 100px;
}

:where(.hb-migrated) .cat-width-text{
  color:#4a2f1e;
}

:where(.hb-migrated) .cat-width-text .lead{
  font-size:22px;
  font-weight:500;
  margin:0 0 14px;
}

:where(.hb-migrated) .cat-width-text .accent{
  font-size:21px;
  color:#ef7b1c;
  font-weight:500;
  margin:0 0 42px;
}

:where(.hb-migrated) .cat-width-text p{
  font-size:21px;
  line-height:1.8;
  font-weight:500;
}

:where(.hb-migrated) .cat-width-side-image img{
  width:100%;
  display:block;
}


:where(.hb-migrated) .cat-width-compare > p,:where(.hb-migrated)
.cat-width-compare > br,:where(.hb-migrated)
.cat-width-bottom > p,:where(.hb-migrated)
.cat-width-bottom > br{
  display:none;
}

:where(.hb-migrated) .cat-point-detail-text .lead:before{
  content:"●";
}

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

  :where(.hb-migrated) .cat-width-head{
    flex-direction:column;
  }

  :where(.hb-migrated) .cat-width-title-area h2{
    font-size:38px;
    text-align:center;
  }

  :where(.hb-migrated) .cat-width-compare{
    grid-template-columns:1fr;
  }

  :where(.hb-migrated) .cat-width-bottom{
    grid-template-columns:1fr;
  }

  :where(.hb-migrated) .cat-width-text .lead{
    font-size:22px;
  }

  :where(.hb-migrated) .cat-width-text .accent{
    font-size:22px;
  }

  :where(.hb-migrated) .cat-width-text p{
    font-size:18px;
  }

}


:where(.hb-migrated) .cat-clean-section{
  padding:90px 20px;
  background:#fff;
}

:where(.hb-migrated) .cat-clean-inner{
  max-width:1100px;
  margin:0 auto;
}

:where(.hb-migrated) .cat-clean-head{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  margin-bottom:45px;
}

:where(.hb-migrated) .cat-clean-head h2{
  font-size:46px;
  font-weight:900;
  color:#4a2f1e;
  line-height:1.3;
  border-bottom:6px wavy #d9a45c;
  margin:0;
}

:where(.hb-migrated) .cat-clean-image{
  max-width:900px;
  margin:0 auto 45px;
}

:where(.hb-migrated) .cat-clean-image img{
  width:100%;
  height:auto;
  display:block;
}

:where(.hb-migrated) .cat-clean-text{
  text-align:center;
  color:#4a2f1e;
  font-weight:800;
}

:where(.hb-migrated) .cat-clean-text .lead{
  font-size:22px;
  margin:0 0 14px;
}

:where(.hb-migrated) .cat-clean-text p{
  font-size:22px;
  line-height:1.8;
  margin:0;
}

:where(.hb-migrated) .cat-clean-text p:not(.lead){
  color:#e46c2a;
}


:where(.hb-migrated) .cat-clean-video{
  max-width:900px;
  margin:0 auto 45px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,0.12);
}

:where(.hb-migrated) .cat-clean-video video{
  width:100%;
  display:block;
}



:where(.hb-migrated) .rakuten-movie{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 120px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}


:where(.hb-migrated) .rakuten-movie iframe,:where(.hb-migrated)
.rakuten-movie object,:where(.hb-migrated)
.rakuten-movie embed{

  display: block !important;

  margin: 0 auto !important;

  max-width: 100%;

  border-radius: 10px;
}

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

  :where(.hb-migrated) .cat-clean-video{
    margin: 0 10px 45px;
  }

  :where(.hb-migrated) .rakuten-movie{
    width: calc(100% - 30px);
    margin: 0 auto 80px;
  }

  :where(.hb-migrated) .rakuten-movie .video-player{
    height: auto !important;
    aspect-ratio: 9 / 16;
  }

}


:where(.hb-migrated) .snack-color-section{
  position: relative;
}

:where(.hb-migrated) .snack-color-text{
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translateX(-50%);
  width: 52%;
  display: flex;
  justify-content: space-between;
  z-index: 10;
  pointer-events: none;
}

:where(.hb-migrated) .snack-color-text span{
  font-size: 30px;
  font-weight: 700;
  color: #4a2f1e;
  letter-spacing: .05em;
}


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

  :where(.hb-migrated) .snack-color-text{
    top: 80%;
    width: 92%;
  }

  :where(.hb-migrated) .snack-color-text span{
    font-size: 22px;
  }

}



@media screen and (max-width: 768px){
  :where(.hb-migrated) .section-inner{
    padding-left: 20px;
    padding-right: 20px;
  }
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .product-detail-brand-hero{
    padding: 80px 0px 40px;
  }

  :where(.hb-migrated) .product-detail-brand-copy{
    width: 96%;
    max-width: none;
    margin: 0 auto 20px;
    margin-top: 45px;
    text-align: center;
  }

  :where(.hb-migrated) .product-detail-brand-copy p{
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: 0;
    white-space: normal;
  }

  :where(.hb-migrated) .product-detail-brand-product{
    margin-bottom: 16px;
    text-align: center;
  }

  :where(.hb-migrated) .product-detail-brand-product img{
    display: block;
    margin: 0 auto;
    max-width: 88%;
  }

  :where(.hb-migrated) .product-detail-brand-logo img{
    max-width: 220px;
  }
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .product-detail-brand-overlay{
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  :where(.hb-migrated) .product-detail-brand-copy.brand-copy-top{
    position: absolute;
    top: 8px;
    left: 130px;
    right: 20px !important;
    width: auto;
    max-width: 220px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: left !important;
  }

  :where(.hb-migrated) .product-detail-brand-copy.brand-copy-top p{
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.5;
    color: #222;
  }
}


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

  :where(.hb-migrated) .product-detail-intro-flex{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: -75px;
  }

  :where(.hb-migrated) .product-detail-intro-image{
    order: 1;
    width: 100% !important;
    margin-bottom: 0;
  }

  :where(.hb-migrated) .product-detail-intro-text{
    order: 2;
    width: 100% !important;
  }

  :where(.hb-migrated) .product-detail-intro-image img{
    width: 100%;
    display: block;
    border-radius: 16px;
  }

  :where(.hb-migrated) .product-detail-intro-text p{
    font-size: 14px;
    line-height: 1.9;
  }
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .product-detail-ports-map-inner{
    width: 100%;
    max-width: none;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
  }

  :where(.hb-migrated) .product-detail-usage{
    padding: 56px 0;
  }

  :where(.hb-migrated) .product-detail-usage-top{
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    margin-bottom: 36px;
  }

  :where(.hb-migrated) .product-detail-usage-photo,:where(.hb-migrated)
  .product-detail-ports{
    width: 100%;
  }

  :where(.hb-migrated) .product-detail-port-icon{
    width: 56px;
    height: 56px;
    font-size: 20px;
  }

  :where(.hb-migrated) .product-detail-port-label{
    font-size: 16px;
  }

  :where(.hb-migrated) .product-detail-charge-grid{
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }

  :where(.hb-migrated) .product-detail-charge-card{
    min-width: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  :where(.hb-migrated) .product-detail-charge-card h3{
    font-size: 14px;
    margin-bottom: 16px;
  }

  :where(.hb-migrated) .product-detail-charge-count{
    font-size: 22px;
    line-height: 1;
  }

  :where(.hb-migrated) .product-detail-charge-count span{
    font-size: 25px;
  }

  :where(.hb-migrated) .product-detail-charge-icon{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  :where(.hb-migrated) .product-detail-charge-icon img{
    display: block;
    margin: 0 auto;
    transform: translateX(8px);
  }
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .product-detail-scenes{
    padding: 5px 0;
  }

  :where(.hb-migrated) .product-detail-scenes-head{
    margin-bottom: 32px;
  }

  :where(.hb-migrated) .product-detail-scenes-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  :where(.hb-migrated) .product-detail-scene-card:nth-child(1),:where(.hb-migrated)
  .product-detail-scene-card:nth-child(2),:where(.hb-migrated)
  .product-detail-scene-card:nth-child(3),:where(.hb-migrated)
  .product-detail-scene-card:nth-child(4),:where(.hb-migrated)
  .product-detail-scene-card:nth-child(5){
    grid-column: auto;
  }

  :where(.hb-migrated) .product-detail-scene-image img{
    height: 220px;
  }

  :where(.hb-migrated) .product-detail-scene-en{
    font-size: 18px;
  }
}


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

  :where(.hb-migrated) .product-detail-ports-map{
    padding: 0px 0;
  }

  :where(.hb-migrated) .product-detail-ports-map-inner{
    max-width: 100%;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 0 20px;
  }

  :where(.hb-migrated) .product-detail-ports-device{
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  :where(.hb-migrated) .product-detail-ports-device img{
    width: 100%;
    border-radius: 20px;
  }


  :where(.hb-migrated) .product-detail-ports-lines{
    display: none;
  }


  :where(.hb-migrated) .product-detail-port-label{
    position: static;
    display: flex;
    align-items: center;
    gap: 14px;
  }

  :where(.hb-migrated) .label-1,:where(.hb-migrated)
  .label-2,:where(.hb-migrated)
  .label-3{
    top: auto;
    right: auto;
  }


  :where(.hb-migrated) .product-detail-ports-map-inner .product-detail-port-label + .product-detail-port-label{
    margin-top: 16px;
  }

  :where(.hb-migrated) .product-detail-port-circle{
    width: 56px;
    height: 56px;
    font-size: 28px;
    flex-shrink: 0;
  }

  :where(.hb-migrated) .product-detail-port-text{
    font-size: 16px;
    line-height: 1.6;
  }
}


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

  :where(.hb-migrated) .product-set-wrap > p{
    display:none;
  }

  :where(.hb-migrated) .product-set-wrap{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px 10px;
    align-items:start;
    margin-top: 0;
    padding-top: 0;
  }

  :where(.hb-migrated) .product-set-item{
    position:static;
    transform:none !important;
    text-align:center;
  }

  :where(.hb-migrated) .product-set-main{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:center;
    margin-top:20px;
  }

  :where(.hb-migrated) .product-set-main img{
    width:150px;
    display:block;
  }

  :where(.hb-migrated) .product-set-item{
    position: static;
    transform: none !important;
    text-align: center;
  }

  :where(.hb-migrated) .product-set-item::after{
    display: none;
  }

  :where(.hb-migrated) .product-set-circle{
    width: 96px;
    height: 96px;
    margin: 0 auto 8px;
  }

  :where(.hb-migrated) .product-set-circle img{
    width: 150%;
    height: 150%;
    object-fit: contain;
    display: block;
  }

  :where(.hb-migrated) .product-set-item p{
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
  }

    :where(.hb-migrated) .product-detail-set{
    padding-top: 20px;
  }

  :where(.hb-migrated) .product-detail-set .section-inner{
    padding-top: 0;
  }

  :where(.hb-migrated) .product-detail-set .product-detail-section-title{
    margin-bottom: 20px;
  }
}



@media screen and (max-width: 768px){
:where(.hb-migrated) .cloud-hero-section .cloud-hero{
    position: relative;
    height: 240px;
    overflow: hidden;
  }

 :where(.hb-migrated) .cloud-hero-section .cloud-hero img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.5;
  }

  :where(.hb-migrated) .cloud-hero-section .cloud-hero-overlay{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;

    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center !important;
  }

  :where(.hb-migrated) .cloud-hero-section .cloud-hero-overlay h2{
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.6;
    color: #000;
    text-align: center !important;
  }

}


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

  :where(.hb-migrated) .cloud-block + .cloud-block{
    margin-top: 0px;
  }

  :where(.hb-migrated) .cloud-service-lead.center{
    font-size: 14px;
  }

  :where(.hb-migrated) .cloud-image-double{
    flex-direction: column;
    gap: 16px;
  }

  :where(.hb-migrated) .cloud-image-double img{
    width: 100%;
  }

}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .cloud-icons{
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
    justify-items: center;
    align-items: end;
    padding-right: 0;
    padding-bottom: 0;
    margin-top: 24px;
  }

  :where(.hb-migrated) .cloud-icon-item img{
    width: 100%;
    max-width: 150px;
    height: auto;
    display: block;
  }

}


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

  :where(.hb-migrated) .cloud-woman{
    position: static;
    width: 180px;
    margin: 20px auto 0;
    transform: none;
    text-align: center;
  }

  :where(.hb-migrated) .cloud-woman img{
    width: 100%;
    height: auto;
    display: block;
  }
}


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


  :where(.hb-migrated) .cloud-price-section{
    padding: 40px 0 56px;
  }


  :where(.hb-migrated) .cloud-price-head{
    padding: 14px 12px;
    margin-bottom: 20px;
  }

  :where(.hb-migrated) .cloud-price-title{
    font-size: 22px;
    line-height: 1.6;
    word-break: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }


  :where(.hb-migrated) .cloud-price-frame{
    padding: 16px 12px;
    border-width: 3px;
    overflow: visible;
  }

  :where(.hb-migrated) .cloud-price-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }


  :where(.hb-migrated) .cloud-price-card{
    border-radius: 28px;
    padding: 24px 18px;
    min-height: auto;
  }


  :where(.hb-migrated) .cloud-price-label{
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 8px;
  }

  :where(.hb-migrated) .cloud-price-main{
    gap: 4px;
    margin-bottom: 6px;
  }

  :where(.hb-migrated) .cloud-price-number{
    font-size: 62px;
    line-height: .92;
    text-shadow: 0 4px 0 rgba(0,0,0,.25);
  }

  :where(.hb-migrated) .cloud-price-person{
    font-size: 34px;
    padding-bottom: 4px;
  }

  :where(.hb-migrated) .cloud-price-unit{
    font-size: 16px;
    padding-bottom: 6px;
  }

  :where(.hb-migrated) .cloud-price-tax{
    font-size: 17px;
    margin: 4px 0 10px;
  }

  :where(.hb-migrated) .cloud-price-note{
    font-size: 12px;
    line-height: 1.6;
  }


  :where(.hb-migrated) .cloud-price-card--month{
    padding: 22px 18px 26px;
  }

  :where(.hb-migrated) .cloud-price-badge{
    position: static;
    transform: rotate(-8deg);
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.15;
    text-align: center;
  }

  :where(.hb-migrated) .cloud-price-month-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 6px;
  }

  :where(.hb-migrated) .cloud-price-month-label{
    width: 100%;
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
  }

  :where(.hb-migrated) .cloud-price-month-number-wrap{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 138px;
    min-height: 74px;
    overflow: visible;
    transform: translateY(-25px);
  }

  :where(.hb-migrated) .cloud-price-month-circle{
    position: absolute;
    width: 128px;
    height: 66px;
    border: 4px solid #f4e300;
    border-radius: 50%;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(-10deg);
  }

  :where(.hb-migrated) .cloud-price-month-number{
  position: relative;
  z-index: 1;
  font-size: 52px;
  line-height: .92;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  text-shadow: 0 4px 0 rgba(0,0,0,.25);
}

  :where(.hb-migrated) .cloud-price-month-unit{
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  margin-left: 4px;
  color: #fff;
  font-weight: 700;
  transform: translateY(-25px);
}

  :where(.hb-migrated) .cloud-price-person{
    margin: 0 4px 6px 2px;
  }

  :where(.hb-migrated) .cloud-price-person-svg{
    width: 34px;
    height: 34px;
  }
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .cloud-links-section{
    padding: 56px 0;
  }

  :where(.hb-migrated) .cloud-links-list{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  :where(.hb-migrated) .cloud-link-card{
    flex-direction: column;
    gap: 16px;
    padding: 20px 18px 42px;
    border-radius: 18px;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    min-height: auto;
  }

  :where(.hb-migrated) .cloud-link-card__title{
    font-size: 20px;
    margin-bottom: 14px;
    padding-bottom: 4px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.5;
  }

  :where(.hb-migrated) .cloud-link-card__text{
    font-size: 14px;
    line-height: 1.6;
    color: #555;
  }

  :where(.hb-migrated) .cloud-link-card__side{
    width: 120px;
    margin-left: auto;
  }

  :where(.hb-migrated) .cloud-link-card__corner{
    right: 0;
    bottom: 0;
    width: 96px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 29px;
    padding-right: 6px;
    background: #3f3a39;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    transform: none;
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
  }

  :where(.hb-migrated) .cloud-link-card__title,:where(.hb-migrated)
  .cloud-link-card__text{
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }

  :where(.hb-migrated) .cloud-link-card__corner span,:where(.hb-migrated)
  .cloud-link-card__corner a{
    color: #fff;
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
  }
}



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

  :where(.hb-migrated) .product-hero-bg img{
    height: 200px;
  }

  :where(.hb-migrated) .product-hero-overlay{
    position: relative;
  }

  :where(.hb-migrated) .product-hero-content{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100%;
    padding: 20px 18px 32px;
    box-sizing: border-box;
    text-align: center;
  }

  :where(.hb-migrated) .product-hero-content .hero-logo{
    position:absolute;
    top:-155px;
    right:20px;
    display: block;
    width: 185px;
    max-width: 70%;
    height: auto;
    margin: 0 0 12px auto;
    z-index:10;
  }

  :where(.hb-migrated) .product-hero-content p{
    font-size: 11px;
    line-height: 1.7;
    margin: 13px auto 10px;
    max-width: 320px;
  }

  :where(.hb-migrated) .product-hero-content h2{
    font-size: 29px;
    line-height: 1.4;
    margin-top: -5px;
    margin-bottom: -4px;
  }


  :where(.hb-migrated) .product-feature-flex{
    flex-direction: column;
  }

  :where(.hb-migrated) .product-feature-image,:where(.hb-migrated)
  .product-feature-text{
    width: 100%;
  }

  :where(.hb-migrated) .product-feature-icons{
    grid-template-columns: repeat(2, 1fr);
  }

}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .workflow-section{
    padding: 60px 0;
  }

  :where(.hb-migrated) .workflow-title{
    font-size: 32px;
  }

  :where(.hb-migrated) .workflow-timeline::before{
    left: 20px;
    transform: none;
  }

  :where(.hb-migrated) .workflow-item,:where(.hb-migrated)
  .workflow-item.left,:where(.hb-migrated)
  .workflow-item.right{
    width: 100%;
    margin-left: 0;
    padding-left: 52px;
    padding-right: 0;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  :where(.hb-migrated) .workflow-item::before,:where(.hb-migrated)
  .workflow-item.left::before,:where(.hb-migrated)
  .workflow-item.right::before{
    left: 13px;
    right: auto;
    top: 28px;
  }

  :where(.hb-migrated) .workflow-card{
    width: 100%;
    padding: 22px 20px;
  }

  :where(.hb-migrated) .workflow-card-title{
    font-size: 26px;
  }

  :where(.hb-migrated) .workflow-text,:where(.hb-migrated)
  .workflow-list li,:where(.hb-migrated)
  .workflow-subtext,:where(.hb-migrated)
  .workflow-note{
    font-size: 15px;
  }

  :where(.hb-migrated) .workflow-text .ui-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:220px;
  min-height:56px;
  margin:12px auto 0;
  text-align:center;
  line-height:1.4;
  }

  :where(.hb-migrated) .workflow-text .ui-btn + .ui-btn{
  margin-top:16px;
  }

  :where(.hb-migrated) .workflow-icon{
    width: 90px;
  }

  :where(.hb-migrated) .workflow-mail{
  margin-top:16px;
  font-size:14px;
  line-height:1.8;
  text-align:center;
  }

  :where(.hb-migrated) .workflow-mail a{
  color:#2f5f3e;
  font-weight:700;
  word-break:break-all;
  }
}


@media screen and (max-width: 1200px){
  :where(.hb-migrated) .app-callout-bubble{
    width: 400px;
    height: 400px;
  }

  :where(.hb-migrated) .app-callout-icon{
    width: 220px;
  }

  :where(.hb-migrated) .app-callout-text{
    font-size: 25px;
  }

  :where(.hb-migrated) .app-callout-device{
    width: 300px;
  }
}


@media screen and (max-width: 768px){
  :where(.hb-migrated) .app-callout-section{
    padding: 50px 16px;
  }

  :where(.hb-migrated) .app-callout-inner{
    flex-direction: column;
    gap: 24px;
  }

  :where(.hb-migrated) .app-callout-bubble{
    width: 320px;
    height: 320px;
    box-shadow: 5px 6px 10px rgba(0,0,0,0.16);
  }

  :where(.hb-migrated) .app-callout-bubble::before{
    top: auto;
    right: 50%;
    bottom: -72px;
    transform: translateX(50%) rotate(90deg);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 90px solid #f4f4f4;
  }

  :where(.hb-migrated) .app-callout-bubble::after{
    top: auto;
    right: 50%;
    bottom: -64px;
    transform: translateX(50%) rotate(90deg);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 82px solid #f4f4f4;
    filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.16));
  }

  :where(.hb-migrated) .app-callout-content{
    padding: 34px 24px;
  }

  :where(.hb-migrated) .app-callout-icon{
    width: 130px;
    margin-bottom: 16px;
  }

  :where(.hb-migrated) .app-callout-icon img{
    border-radius: 18px;
  }

  :where(.hb-migrated) .app-callout-text{
    font-size: 24px;
    line-height: 1.25;
  }

  :where(.hb-migrated) .app-callout-device{
    width: 180px;
    margin-top: 50px;
  }
}



@media screen and (max-width: 768px){
  :where(.hb-migrated) .choice-section{
    margin-top: 0;
    padding-top: 0;
  }

  :where(.hb-migrated) .choice-inner{
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  :where(.hb-migrated) .choice-left img{
    width: 200px;
    margin: 0 auto;
  }

  :where(.hb-migrated) .choice-right{
    padding: 0 28px;
  }

  :where(.hb-migrated) .choice-title-box{
    width: 100%;
    margin-bottom: 30px;
  }

  :where(.hb-migrated) .choice-title-box h2{
    font-size: 25px;
    line-height: 1.3;
  }

  :where(.hb-migrated) .choice-title-small{
    font-size: 14px;
  }

  :where(.hb-migrated) .choice-memo{
    top: -41px !important;
    right: -10px !important;
    width: 80px !important;
    transform: rotate(8deg);
  }

  :where(.hb-migrated) .choice-bubbles{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 100%;
  }

  :where(.hb-migrated) .bubble{
    margin: 0 auto;
  }
}


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

  :where(.hb-migrated) .checker-select-section{
    padding: 60px 0 50px;
  }

  :where(.hb-migrated) .checker-select-head{
    margin-bottom: 34px;
  }

  :where(.hb-migrated) .checker-select-head h2{
    font-size: 33px;
    padding-bottom: 12px;
    border-bottom: 3px solid #222;
  }

  :where(.hb-migrated) .checker-select-head::after{
    width: 260px;
    height: 12px;
    background: repeating-linear-gradient(
      45deg,
      #362323,
      #362323 8px,
      transparent 8px,
      transparent 16px
    );
  }

  :where(.hb-migrated) .checker-badge-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 14px;
    margin-bottom: 34px;
  }

  :where(.hb-migrated) .checker-badge{
    min-height: 120px;
    padding: 16px 12px 26px;
    border-width: 3px;
  }

  :where(.hb-migrated) .checker-badge::before{
    inset: 6px;
    border-width: 2px;
  }

  :where(.hb-migrated) .checker-badge span{
    font-size: 20px;
    line-height: 1.5;
  }

  :where(.hb-migrated) .checker-select-text p{
    font-size: 14px;
    line-height: 1.8;
  }


  :where(.hb-migrated) .checker-recommend-section{
    padding: 80px 0 60px;
  }

  :where(.hb-migrated) .checker-recommend-section::before{
    height: 60px;
    clip-path: polygon(0 0, 100% 0, 100% 36%, 78% 36%, 50% 100%, 22% 36%, 0 36%);
  }

  :where(.hb-migrated) .checker-recommend-top{
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-bottom: 34px;
  }

  :where(.hb-migrated) .checker-product-image{
    flex: none;
    width: 220px;
    position: relative;
    z-index: 1;
  }

  :where(.hb-migrated) .checker-product-image img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  :where(.hb-migrated) .checker-recommend-lead{
    font-size: 28px;
    margin-bottom: 8px;
  }

  :where(.hb-migrated) .checker-recommend-logo{
    max-width: 300px;
    margin-bottom: 10px;
  }

  :where(.hb-migrated) .checker-recommend-sub{
    font-size: 30px;
  }

  :where(.hb-migrated) .checker-point-area{
    gap: 18px;
  }

  :where(.hb-migrated) .checker-point-circle{
    width: 210px;
    height: 210px;
    padding: 24px 18px 18px;
  }

  :where(.hb-migrated) .checker-point-icon img{
    width: 75px;
  }

  :where(.hb-migrated) .checker-point-no{
    font-size: 18px;
    margin-bottom: 12px;
  }

  :where(.hb-migrated) .checker-point-text{
    font-size: 15px;
    line-height: 1.5;
  }

  :where(.hb-migrated) .checker-support-copy{
    font-size: 18px;
    margin-top: 28px;
  }
}

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

  :where(.hb-migrated) .checker-point-text{
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    font-feature-settings: normal !important;
    text-shadow: none !important;
    transform: none !important;
    line-height: 1.55;
    margin-top: 5px;
  }

  :where(.hb-migrated) .checker-point-circle{
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-font-smoothing: antialiased;
  }

  :where(.hb-migrated) .checker-point-text-safe{
    line-height:1.55;
    letter-spacing:0;
  }
}


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

  :where(.hb-migrated) .app-point-section{
    padding: 45px 14px;
  }

  :where(.hb-migrated) .app-point-head{
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 40px;
    padding: 0 2px;
    box-sizing: border-box;
  }

  :where(.hb-migrated) .app-point-title{
    width: 165px;
    min-height: auto;
    margin: 0;
    padding: 16px 14px 20px;
    border-radius: 16px;
  }

  :where(.hb-migrated) .app-point-title h2{
    margin-top: 0;
    font-size: 18px;
    line-height: 1.45;
  }

  :where(.hb-migrated) .app-point-num{
    padding-bottom: 12px;
    margin-bottom: 18px;
  }

  :where(.hb-migrated) .point-number {
    font-size: 48px;
  }

  :where(.hb-migrated) .point-label {
    top: 14px;
    left: 4px;
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  :where(.hb-migrated) .app-point-lead{
    width: 100%;
    max-width: 100%;
    padding: 16px;
    margin: 0 auto;
    margin-left: 23px;
    box-sizing: border-box;
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
  }

  :where(.hb-migrated) .app-worry-block{
    grid-template-columns: 1fr;
    text-align: center;
  }

  :where(.hb-migrated) .app-person-worry{
    width: 170px;
    margin: 0 auto;
  }

  :where(.hb-migrated) .app-worry-balloon{
    font-size: 18px;
    padding: 22px;
  }

  :where(.hb-migrated) .app-worry-balloon::before{
    display: none;
  }

  :where(.hb-migrated) .app-catch{
    font-size: 21px;
  }

  :where(.hb-migrated) .app-download-box{
    flex-direction: column;
    padding: 18px;
  }

  :where(.hb-migrated) .app-store-area{
    gap: 12px;
  }

  :where(.hb-migrated) .app-store-area img{
    width: 105px;
  }

  :where(.hb-migrated) .app-device-compare{
    flex-direction: column;
    gap: 36px;
  }

  :where(.hb-migrated) .app-device-item{
    width: 100%;
    gap: 14px;
  }

  :where(.hb-migrated) .app-device-item img{
    width: 90px;
  }

  :where(.hb-migrated) .app-device-item.recommended img{
    width: 100px;
  }

  :where(.hb-migrated) .app-device-text{
    width: 190px;
    min-height: 140px;
    padding: 20px 14px;
  }

  :where(.hb-migrated) .app-device-text h3{
    font-size: 20px;
  }

  :where(.hb-migrated) .app-device-text p{
    font-size: 18px;
  }

  :where(.hb-migrated) .app-no-work{
    font-size: 22px;
    padding: 14px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    text-align: center;
  }

  :where(.hb-migrated) .app-no-work span,:where(.hb-migrated)
  .app-no-work strong{
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1.6;
  }

  :where(.hb-migrated) .app-no-work strong{
    width: 100%;
    margin-top: 4px;
  }

  :where(.hb-migrated) .app-screen-area{
    grid-template-columns: 1fr;
  }

  :where(.hb-migrated) .app-screen-images{
    justify-content: center;
  }

  :where(.hb-migrated) .app-check-person img{
    max-width: 190px;
  }

  :where(.hb-migrated) .app-check-person p{
    right: 25px;
    top: 0;
    font-size: 18px;
    padding: 20px 14px;
  }
}



@media screen and (max-width: 768px) {
  :where(.hb-migrated) .product-measure-flow {
    padding: 10px 0;
  }

  :where(.hb-migrated) .flow-simple {
    margin-top: 40px;
  }


  :where(.hb-migrated) .flow-simple-center {
    width: 100%;
    max-width: none;
    margin: -66px auto 30px;
    transform: none !important;
    text-align: center;
  }

  :where(.hb-migrated) .flow-simple-center img {
    width: 210px !important;
    max-width: 45% !important;
    margin: 0 auto !important;
  }


  :where(.hb-migrated) .flow-simple-center .flow-num,:where(.hb-migrated)
  .flow-simple-center .flow-num::before,:where(.hb-migrated)
  .flow-simple-center::after {
    display: none !important;
  }

  :where(.hb-migrated) .flow-simple-list {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 0 16px 12px;
    scroll-snap-type: x mandatory;
  }

  :where(.hb-migrated) .flow-simple-item {
    flex: 0 0 70%;
    max-width: 240px;
    scroll-snap-align: center;
  }

  :where(.hb-migrated) .flow-simple-item img {
    width: 100%;
    height: auto;
    display: block;
  }
}




@media screen and (max-width: 768px) {
  :where(.hb-migrated) .compare-modern-section {
    padding: 15px 0px;
  }

  :where(.hb-migrated) .compare-modern-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  :where(.hb-migrated) .compare-modern-card {
    padding: 20px 6px;
  }

  :where(.hb-migrated) .compare-modern-card--pitopa::before{
    writing-mode: horizontal-tb;
    white-space: nowrap;
    padding: 6px 14px;
    font-size: 12px;
    line-height: 1;
  }

  :where(.hb-migrated) .compare-modern-card h2 {
    font-size: 19px;
  }

  :where(.hb-migrated) .compare-modern-text {
    font-size: 18px;
  }
}


@media screen and (max-width: 768px) {
  :where(.hb-migrated) .compare-modern-extra {
    margin-top: 80px;
  }

  :where(.hb-migrated) .compare-modern-extra img {
    position: static;
    transform: none;
    max-width: 90%;
  }
}

@media screen and (max-width: 768px) {
  :where(.hb-migrated) .checker-flow-section {
    padding: 70px 16px;
  }

  :where(.hb-migrated) .checker-flow-head h2 {
    font-size: 26px;
  }

  :where(.hb-migrated) .checker-flow-grid {
    grid-template-columns: 1fr;
  }

  :where(.hb-migrated) .checker-flow-card--wide,:where(.hb-migrated)
  .checker-flow-card--cloud {
    grid-column: span 1;
  }

  :where(.hb-migrated) .checker-flow-card {
    padding: 32px 20px;
    width: 100%;
  }

  :where(.hb-migrated) .cloud-image-double {
    grid-template-columns: 1fr;
  }
}
:where(.hb-migrated){--bg-living:url("/hebena/migrated/43346dca70ea2f95.webp");--bg-product:url("/hebena/migrated/37c9ee1107506fb3.webp");--bg-contact:url("/hebena/migrated/9909b79138c7812e.webp");--bg-feature-01:url("/hebena/migrated/55a2d3490f61720f.jpeg");--bg-feature-02:url("/hebena/migrated/f5aa866b04a6901c.jpg");--bg-feature-03:url("/hebena/migrated/5087cbb54088210c.jpg");--bg-feature-04:url("/hebena/migrated/10b5371ff79914b0.jpg");--bg-feature-05:url("/hebena/migrated/573fb0e4445cb58d.jpg");--bg-feature-06:url("/hebena/migrated/4d5dcb565d447527.jpg");--bg-feature-07:url("/hebena/migrated/1c1372857d33ccc8.webp");--bg-feature-08:url("/hebena/migrated/b58e0bf4f96bc518.webp");--bg-feature-09:url("/hebena/migrated/83a4c1987853edb8.webp");}

.hb-migrated{min-width:0!important;height:auto;overflow:clip;padding-top:110px;color:#233b30}.hb-migrated img{max-width:100%}.hb-migrated iframe{max-width:100%}.hb-migrated a:focus-visible{outline:3px solid #438263;outline-offset:4px}.hb-migrated .hide{opacity:1;visibility:visible;transform:none}.hb-migrated .product-detail-page{padding:0}.hb-migrated .ttl-area{margin-top:0}.hb-migrated .hb-about-intro h2{color:#28543e}@media(max-width:768px){.hb-migrated{padding-top:60px}.hb-migrated .inner,.hb-migrated .section-inner{max-width:100%;width:100%;box-sizing:border-box}.hb-migrated .profile-box dl{grid-template-columns:1fr}.hb-migrated .access-map iframe{height:300px}}
.hb-migrated .information-single{max-width:900px;margin:0 auto;padding:64px 28px}.hb-migrated .information-single-date{font-size:13px;color:#59765f;margin-bottom:18px}.hb-migrated .information-single-title{font-size:clamp(23px,3vw,34px);line-height:1.6;font-weight:500;margin-bottom:28px}.hb-migrated .information-single-content{font-size:15px;line-height:2}.hb-migrated .information-single-content img{height:auto;max-width:100%}.hb-migrated .hb-news-back{max-width:900px;margin:0 auto;padding:0 28px 60px}.hb-migrated .companyservice-alt-top{max-width:1120px;margin:auto;padding:48px 28px}.hb-migrated .companyservice-alt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.hb-migrated .companyservice-alt-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}.hb-migrated .companyservice-alt-card h3{font-size:22px;margin:20px 0 12px}.hb-migrated .companyservice-alt-card p{font-size:14px;line-height:1.9;margin-bottom:16px}.hb-migrated .hb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:768px){.hb-migrated .companyservice-alt-grid{grid-template-columns:1fr}.hb-migrated .information-single{padding:36px 22px}}
.hb-migrated .contact-curtain-stage{width:100%;height:auto;margin:0;background:#f0f4ee}.hb-migrated .contact-curtain-stage__visual{position:relative;top:auto;height:300px}.hb-migrated .contact-curtain-stage__copy{left:28px;right:28px;bottom:48px;text-align:center}.hb-migrated .contact-curtain-panel{margin-top:0;min-height:0;padding:12px 0 64px;background:#f0f4ee}.hb-migrated .contact-top-card{background:#fff;border:1px solid #dce4dc}.hb-migrated .contact-top-card:hover{background:#f7faf5}.hb-migrated .contact-top-card__title{color:#28543e}.hb-migrated .contact-top-card__title span{color:#28543e}@media(max-width:768px){.hb-migrated .contact-curtain-stage__visual{height:240px}.hb-migrated .contact-curtain-stage__copy{bottom:40px}.hb-migrated .contact-top-lead{font-size:19px}}