@charset "UTF-8";
/* ---------- ---------- ----------

00. Common Setting
01. Component Setting
02. Page SettingPage Setting

---------- ---------- ---------- */

/* ---------- ---------- ----------
:: for large screen ::
@media only screen and (min-width: 1025px) {
}
:: for medium screen ::
@media only screen and (min-width: 641px) and (max-width: 1024px) {
}
:: for small screen ::
@media only screen and (max-width: 640px) {
}
---------- ---------- ---------- */

/* -- ------------------------------
    00. Common Setting
------------------------------ --*/
/* Reset
---------- ---------- */
.hhs-Section .cmn-richtext {
  color: #4D4D4D;
  letter-spacing: .02em;
}

.col3-Section .g-HeadingTitle__titleBlock__titleBox__title,
.col3-Section .g-HeadingTitle--v2__titleBlock__titleBox__title,
.col3-Section .g-PageTitle__titleBlock__titleBox__title,
.col3-Section .g-PageTitle--v2__titleBlock__titleBox__title {
  margin-bottom: 0;
}

.col3-Section .g-Section__inner {
  max-width: 1366px;
  margin: 0 auto;
}

.g-Area#area-Contents,
.col3-Section {
  overflow: visible !important;
}

/* Background
---------- ---------- */
.col3-Section {
  background-color: #fff;
}

.col3-mainUnit {
  background-color: #fff;
}

.hhs-Section .g-Column {
  background-attachment: fixed;
}

/* fixed
---------- ---------- */
@media only screen and (max-width: 1024px) {

  .col3-l-Box,
  .col3-r-Box {
    display: none;
  }
}

/* 3 Column > Column Width */
@media only screen and (min-width: 1025px) {
  .col3-Section .g-Column__cols {
    width: 33.333%;
    max-width: 455.333px;
  }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .col3-Section .g-Section__inner {
    max-width: 480px;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {
  .col3-Section .g-Column__cols--lg-w40p {
    width: 400px;
  }

  .col3-Section .g-Column__cols--lg-w30p {
    width: calc(50% - 200px);
  }
}

/* PC > Left, Right Column */
@media only screen and (min-width: 1025px) {

  .col3-l-Box,
  .col3-r-Box {
    position: sticky;
    top: 124px;
    border-color: transparent !important;
    z-index: 3;
  }

  /* Right Column > to Bottom */
  .col3-r-Box {
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
}

/* TB / SP (CTA) */
.col3-cta-wrap {
  position: sticky;
  top: 124px;
  border-color: transparent !important;
  z-index: 3;
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .col3-cta-wrap {
    top: 143px;
  }
}

.col3-cta-btn {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.col3-cta-btn .g-HeadingTitle--v2__titleBlock {
  width: 80px;
}

.col3-cta-btn .l-HeadingTitle--v2.is-link:hover {
  opacity: 1;
}

.col3-cta-btn .l-HeadingTitle--v2.is-link:hover .g-Image--v2 {
  opacity: .7;
}

@media only screen and (min-width: 1025px) {
  .col3-cta-wrap {
    display: none;
  }
}

/* Option
---------- ---------- */
.hhs-fontfamily--01 {
  font-weight: bold;
}

.hhs-fontfamily--02 {
  font-weight: 500;
}

/* -- ------------------------------
    01. Component Setting
------------------------------ --*/
/* PC > left */
.col3-pc-btn {
  width: 55%;
  margin: 0 auto;
}

.col3-pc-logo {
  width: 70%;
  margin: 0 auto;
}

.col3-pc-btn .l-HeadingTitle--v2.is-link:hover,
.col3-pc-btn .l-HeadingTitle--v2.is-link:focus,
.col3-pc-btn .l-HeadingTitle--v2.is-link:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.col3-pc-btn .l-HeadingTitle--v2.is-link:hover .g-Image--v2__img,
.col3-pc-btn .l-HeadingTitle--v2.is-link:focus .g-Image--v2__img,
.col3-pc-btn .l-HeadingTitle--v2.is-link:active .g-Image--v2__img {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: .7;
}

/* PC > right */
.col3-r-Box .g-Image--v2__img {
  width: 50%;
  margin: 0 auto;
}

/* Group Box */
/* 01 */
.hhs-GroupBox-01 {
  width: 87%;
  margin: 0 auto;
}

/* Background Color */
.hhs-bg-wrap.is-backgroundColor--1 {
  background-color: #FFF098;
  padding: 10px 0 16%;
}

/* Page Title (H1) */
.hhs-h1-01 .g-Image--v2__img {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 156%;
}

@media only screen and (max-width: 767px) {
  .hhs-h1-01 .g-Image--v2 {
    width: 100%;
    overflow: hidden;
  }
}

/* Image Carousel Pack */
.hhs-ImageCarouselP-01 .g-ImageCarouselP__nav,
.hhs-ImageCarouselP-01 .g-ImageCarouselP__nav__dot:before {
  font-size: 1rem;
}

.hhs-ImageCarouselP-01 .g-ImageCarouselP__nav__dot {
  padding: 0 4px;
}

.hhs-ImageCarouselP-01 .slick-active .g-ImageCarouselP__nav__dot:before,
.hhs-ImageCarouselP-01 .slick-active .g-ImageCarouselP--v2__nav__dot:before {
  color: #000;
}

.hhs-ImageCarouselP-01 .g-ImageCarouselP__nav__dot:before,
.hhs-ImageCarouselP-01 .g-ImageCarouselP--v2__nav__dot:before {
  content: "\e020";
  color: #606060;
}

.hhs-ImageCarouselP-01 .l-ImageCarouselP__nav__dot:before,
.hhs-ImageCarouselP-01 .l-ImageCarouselP__nav__toggle:before {
  color: #606060;
}

.hhs-ImageCarouselP-01 .g-ImageCarouselP__nextArrow,
.hhs-ImageCarouselP-01 .g-ImageCarouselP__prevArrow {
  bottom: auto;
  top: 0;
  height: 80%;
  margin-top: 0;
}

.hhs-ImageCarouselP-01 .slick-list {
  padding-right: 50px;
}

/* Text Link Pack */
.hhs-TextLinkP-01 {
  font-weight: bold;
}

.hhs-TextLinkP-01 .g-TextLinkUnit__link {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}

.hhs-TextLinkP-01 .is-rightIcon .g-TextLinkUnit__link>.cmn-richtext {
  padding-right: 0;
}

.hhs-TextLinkP-01 .cmn-icon--bullet {
  background-color: #26846E;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: relative;
}

.hhs-TextLinkP-01 .cmn-icon--bullet:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 7px solid #ffffff;
  border-top: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* -- ------------------------------
    02. Page Setting
------------------------------ --*/
/* Product Sales Display Item */
.hhs-products-wrap {
  padding: 0 15px;
}

.hhs-products-wrap>div {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.hhs-products-wrap .g-GroupBox {
  width: calc(50% - 6px);
}

.hhs-products-wrap .l-Image--v2 {
  border-radius: 5px;
  padding: 8px;
}

.hhs-products-wrap .l-Image--v2 .cmn-richtext {
  color: #fff;
  font-weight: 600;
}

.hhs-products-wrap .l-Image--v2.is-backgroundColor--1 {
  background-color: #00A2B7;
}

.hhs-products-wrap .l-Image--v2.is-backgroundColor--2 {
  background-color: #EF8BB6;
}

.hhs-products-wrap .g-HeadingTitle--v2 .cmn-richtext {
  font-size: .875rem;
  font-weight: 600;
}

.hhs-products-wrap .g-ProductSalesDisplayItem {
  width: auto;
}

.hhs-products-wrap .g-ProductSalesDisplayItem__price-capacity-text,
.hhs-products-wrap .g-ProductSalesDisplayItem__price-info-text,
.hhs-products-wrap .g-ProductSalesDisplayItem__price-detail-label,
.hhs-products-wrap .g-ProductSalesDisplayItem__price-detail-numbers-tax,
.hhs-products-wrap .g-ProductSalesDisplayItem__price-detail-numbers-currency {
  font-size: .75rem;
}

@media only screen and (max-width: 640px) {
  .hhs-products-wrap .l-Image--v2 .cmn-richtext {
    font-size: .625rem;
  }

  .hhs-products-wrap .l-Image--v2.br-sm-none .cmn-richtext br {
    display: none;
  }
}

/* Q&A */
.hhs-qa-wrap {
  padding: 0 23px;
}

.hhs-qa-wrap>.g-HeadingTitle--v2 {
  padding: 10px 28px 10px 10px;
}

.hhs-qa-wrap .g-AccordionUnit__titleBlock {
  padding: 10px 28px 10px 38px;
}

.hhs-qa-wrap .g-AccordionUnit__contentBlock {
  padding: 0 28px 10px 38px;
}

.hhs-qa-wrap .g-AccordionUnit__titleBlock,
.hhs-qa-wrap .g-AccordionUnit__contentBlock {
  border: none;
  background-color: #FBD8C5;
}

.hhs-qa-wrap .g-HeadingTitle.is-layoutL .g-HeadingTitle__titleBlock__imageBox,
.hhs-qa-wrap .g-HeadingTitle--v2.is-layoutL .g-HeadingTitle--v2__titleBlock__imageBox {
  box-sizing: border-box;
  width: 28px;
  padding-right: 10px;
}

.hhs-qa-wrap .g-HeadingTitle__titleBlock__titleBox {
  display: block;
}

.hhs-qa-wrap .g-AccordionUnit {
  position: relative;
}

.hhs-qa-wrap .g-AccordionUnit__titleBlock,
.hhs-qa-wrap .g-HeadingTitle {
  position: static;
}

.hhs-qa-wrap .g-HeadingTitle.is-layoutL .g-HeadingTitle__titleBlock__imageBox {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  z-index: 2;
}

.hhs-qa-wrap .g-AccordionUnit__titleBlock__icon {
  z-index: 2;
}

.hhs-qa-wrap .l-HeadingTitle__p,
.hhs-qa-wrap .l-HeadingTitle--v2__p,
.hhs-qa-wrap .g-Text {
  font-size: .875rem;
  line-height: 1.6;
}

.hhs-qa-wrap .g-AccordionUnit__titleBlock__icon {
  right: 12px;
  margin-top: 0;
  transform: translateY(-50%);
  height: 10px;
}

.hhs-qa-wrap .g-AccordionUnit__titleBlock__icon::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 10px solid #99657d;
  border-bottom: 0;
  transition: all .2s ease;
}

.hhs-qa-wrap .cmn-icon--up::before {
  transform: rotate(180deg);
}

@media only screen and (max-width: 640px) {
  .hhs-qa-wrap .l-HeadingTitle__p,
  .hhs-qa-wrap .l-HeadingTitle--v2__p,
  .hhs-qa-wrap .g-Text {
    font-size: .75rem;
  }
}

/* mkm benefits */
.hhs-benefits-wrap {
  padding: 40px 7% 0;
}

.hhs-benefits-wrap .g-Text {
  font-size: .875rem;
}

.hhs-benefits-wrap .g-HeadingTitle--v2 .cmn-richtext {
  font-size: 1.125rem;
  font-weight: 500;
}

.hhs-benefits-wrap .g-TextLinkP .is-colorset--1 .l-TextLinkUnit__link:hover .cmn-richtext,
.hhs-benefits-wrap .g-TextLinkP .is-colorset--1 .l-TextLinkUnit__link:focus .cmn-richtext,
.hhs-benefits-wrap .g-TextLinkP .is-colorset--1 .l-TextLinkUnit__link:active .cmn-richtext {
  opacity: .7;
  transition: all .3s ease;
}

.hhs-benefits-wrap .g-TextLinkP .is-size--m .g-TextLinkUnit__link {
  font-size: .875em;
}

.hhs-benefits-wrap .g-TextLinkP .is-size--m .g-TextLinkUnit__link .cmn-richtext {
  text-decoration: underline;
}