@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) {
}
---------- ---------- ---------- */

/* ---------- ---------- ---------- ----------
  ※注意・補足
    0.  この補足メモは消去してください
    2.  CSSの特質上親要素のoverflowを全切りしているので
        ヘッダーフッターに干渉していないかは要検証でお願いします。
    3.  Editorのエラーの解消は「vh」で検索 → 該当の記述消去でOK

  更新：2025.06.13
---------- ---------- ---------- ---------- */

/* -- ------------------------------
    00. Common Setting
------------------------------ --*/
/* Reset
---------- ---------- */
.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: #F6F6F6;
}

.col3-mainUnit {
  background-color: #fff;
}

/* fixed
---------- ---------- */
@media only screen and (max-width: 1024px) {
  .col3-l-Box,
  .col3-r-Box {
    display: none;
  }
}

.col3-l-Box-sp {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .col3-l-Box-sp {
    display: block;
}
}

/* 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: calc(100vh - 124px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
}

/* TB / SP (CTA) */
@media only screen and (max-width: 1024px) {
  .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: center;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.col3-cta-btn .g-HeadingTitle--v2__titleBlock {
  width: auto;
  height: 54px;
}

.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) {
  .mir-pc-none {
    display: none;
  }
}

/* PC > left */
.col3-pc-btn,
.col3-pc-logo {
  width: 75%;
  margin: 30px auto 0;
}

/* PC > right */
.col3-pc-sns .g-HeadingTitle--v2 {
  width: 230px;
  margin: 0 auto;
}

.col3-pc-sns .g-HeadingTitle--v2 .g-HeadingTitle--v2__titleBlock__imageBox {
  width: 25px;
  height: 25px;
}

.col3-pc-sns .g-HeadingTitle--v2 .g-.col3t {
  font-size: .875rem;
}

.col3-pc-sns .g-HeadingTitle--v2 .g-HeadingTitle--v2__titleBlock__titleBox__title .cmn-rich.col3t {
  font-size: 1.3125rem;
}

/* Option
-----------------------*/

a {
  text-decoration-color: #333;
}

a:hover {
  opacity: .7;
}

.mir-cal-pd {
  padding: 0 35px;
}

.mir-cal-md {
  margin: 0 15px;
}

.mir-cal-pd .g-Hr__hr.is-color--1 {
  border-color: #D8D8D8;
}

.mir-tab .g-Hr__hr.is-color--2 {
  border-color: #707070;
  width: 90%;
  margin: 0 auto;
}

/* font-size */
.opt-fontsize--25 {
  font-size: 1.5625rem;
}

.opt-fontsize--20 {
  font-size: 1.25rem;
}

.opt-fontsize--16 {
  font-size: 1rem;
}

.opt-fontsize--14 {
  font-size: .875rem;
}

.opt-fontsize--12 {
  font-size: .75rem;
}

.opt-fontsize--9 {
  font-size: .5625rem;
}

@media only screen and (max-width: 640px) {
  .opt-fontsize--25 {
  font-size: 1.375rem;
  }

  .opt-fontsize--20 {
    font-size: 1.125rem;
  }

  .opt-fontsize--20-aco {
    font-size: 1.25rem;
  }

  .opt-fontsize--14 {
  font-size: .75rem;
  }

  .opt-fontsize--14-aco {
    font-size: .875rem;
  }
}

/* fontfamily */
.mir-fontfamily--01 {
  font-family: sans-serif;
  font-weight: 600;
}

.mir-fontfamily--02 {
  font-family: sans-serif;
  font-weight: 400;
}

/* font-color */
.mir-fontcolor--01 {
  color: #CD4C25;
}

.mir-fontcolor--02 {
  color: #333;
}

.mir-fontcolor--03 {
  color: #707070;
}

/* line-height */
.min-lh--01 {
  line-height: 1.25;
}

/* -- ------------------------------
    01. Component Setting
------------------------------ --*/
/* Mv Area */
.g-GroupBox.mir-flex {
  display: flex;
  gap: 5px;
}

/* Carousel Area */
.mir-cal.g-GroupBox.is-borderColor--1 {
  border: 5px #26846E solid;
  border-radius: 15px;
  margin: 20px 15px;
}

.mir-cal span.mir-cal-text {
  border: 1px #333 solid;
}

.mir-cal .g-ImageCarouselP__nextArrow, .g-ImageCarouselP__prevArrow {
  background-color: transparent;
}

.mir-cal .g-ImageCarouselP__nextArrow:before, .g-ImageCarouselP__prevArrow:before {
  color: #333;
  font-size: 30px;
}

.mir-cal.g-GroupBox.is-border {
  padding: 10px;
}

.mir-cal .mir-cal-text {
  padding-left: 5px;
}

/* Accordion Area */
.mir-aco.g-AccordionMenu {
  margin: 15px;
}

.mir-aco .g-AccordionUnit__contentBlock {
  padding: 18px 18px 10px;
}

.mir-aco .g-AccordionUnit {
  border: 5px #CD4C25 solid;
}

.mir-aco .g-AccordionUnit__titleBlock__icon {
  color: #CD4C25;
  font-size: 25px;
}

.mir-aco .is-radius--open .g-AccordionUnit__titleBlock {
  border-bottom: 1px #CD4C25 solid;
}

.mir-aco .g-AccordionUnit__contentBlock {
  background-color: #F1F1F1;
  border: none;
}

.mir-aco .aco-head-01,
.mir-aco .aco-head-02,
.mir-aco .aco-head-03,
.mir-aco .aco-head-04 {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mir-aco .aco-head-01::before {
  content: url("/content/dam/sites/kao/www-kao-kirei-com/jp/ja/feature/cam/mirairo2508/aco_ico01.png");
  display: inline-block;
}

.mir-aco .aco-head-02::before {
  content: url("/content/dam/sites/kao/www-kao-kirei-com/jp/ja/feature/cam/mirairo2508/aco_ico02.png");
  display: inline-block;
}

.mir-aco .aco-head-03::before {
  content: url("/content/dam/sites/kao/www-kao-kirei-com/jp/ja/feature/cam/mirairo2508/aco_ico03.png");
  display: inline-block;
}

.mir-aco .aco-head-04::before {
  content: url("/content/dam/sites/kao/www-kao-kirei-com/jp/ja/feature/cam/mirairo2508/aco_ico04.png");
  display: inline-block;
}

.mir-aco.opt-al_c img {
  margin: 0 auto;
}

.mir-aco .mir-aco-text {
  padding-left: 5px;
}

.mir-tab.g-GroupBox.is-borderColor--2 {
  border: 5px #707070 solid;
  padding: 0;
}

.mir-tab .g-HeadingTitle--v2.g-HeadingTitle--v2--h4.is-backgroundColor--1 {
  background-color: #707070;
  padding: 15px 10px;
  border: none;
}

.mir-tab .mir-tab-box .mir-tab-tit {
  width: 80px;
}

.mir-tab .mir-tab-box {
  display: flex;
  gap: 15px;
  padding: 10px 18px;
}

.mir-tab .g-AnnotationListUnit--v2__symbol {
  font-size: 14px;
}

.mir-fontcolor--02 {
  color: #333;
}

.mir-TextLinkP01 .g-TextLinkUnit__link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  text-decoration: none;
  font-size: 1rem;
}

.mir-TextLinkP01 .is-rightIcon .g-TextLinkUnit__link>.cmn-richtext {
  padding-right: 5px;
}

.mir-TextLinkP01 .g-TextLinkUnit__link .g-TextLinkUnit__link__icon {
  background-color: #26846E;
  border-radius: 50%;
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
}

.mir-TextLinkP01 .cmn-icon--bullet:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #fff;
}