@charset "UTF-8";

/* 既存ページに合わせた初期設定 */
#area-Contents{
    font-family: "游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    color: #333;
}



/* h4のフォント設定 */
.l-HeadingTitle__h5,
.l-HeadingTitle__h4,
.g-HeadingTitle__h3,
.g-HeadingTitle__h2{
font-family: "游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}


/*==========================================
「からっぽ」につまっているもの。
==========================================*/

@media screen and (max-width:640px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}

@media screen and (min-width:641px) {
  .pc-only {
    display: block;
  }
  .sp-only {
    display: none;
  }
}

.kp-t06-10-reset .cmn-richtext,
.kp-t06-10-reset .g-Section__inner,
.kp-t06-10-reset .l-Column.is-gutter--m .l-Column__cols,
.kp-t06-10-reset .l-Column.is-gutter--m .l-Column__inner,
.kp-t06-10-reset .g-Text,
.kp-t06-10-reset .g-Image,
.kp-t06-10-reset .l-BannerLinkP.is-gutter--m .l-BannerLinkP__list__item,
.kp-t06-10-reset .g-BannerLinkP.is-gutter--m .g-BannerLinkP__list__item,
.kp-t06-10-reset .g-HeadingTitle,
.kp-t06-10-reset .g-HeadingTitle__titleBlock__titleBox__title,
.kp-t06-10-reset .g-AccordionMenu,
.kp-t06-10-reset .g-AccordionUnit__titleBlock,
.kp-t06-10-reset .g-AccordionUnit__contentBlock,
.kp-t06-10-reset .l-HeadingTitle.l-HeadingTitle--h2.is-titleBorder--none,
.kp-t06-10-reset .g-ImageCarouselP__list {
  color: #333;
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  font-size: 14px;
	line-height: 2.2em;
	letter-spacing: normal;
  margin: 0;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  padding-left: 0;
}

.kp-t06-10-reset .g-Section__inner {
  max-width: none;
}

.kp-t06-10-kv-bg {
  padding-bottom: 700px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  margin-bottom: 120px;
}

.kp-t06-10-kv-bg .kp-t06-10-kv,
.kp-t06-10-kv-bg .kp-t06-10-kv-title {
  width: 1230px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.kp-t06-10-kv-bg .kp-t06-10-kv .g-Movie .g-Movie__iframe {
    background: url(/content/dam/sites/kao/my-kao-kirei-com/sp-contents/others/living/t06-10-mainimage01.jpg);
background-size: cover;
}

.kp-t06-10-kv-bg .kp-t06-10-kv-title .g-ColumnUnit > .g-HeadingTitle {
  width: 251px;
  padding-bottom: 489px;
  position: absolute !important;
  right: 200px;
  top: 135px;
  background-position: 50% top;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url(/content/dam/sites/kao/my-kao-kirei-com/sp-contents/others/living/t06-10-bg-001.png);
  animation: titleScale 7s;
}

@keyframes titleScale {
  0% {
    opacity: 0;
  }
  71% {
    opacity: 0;
  }
  86% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.kp-t06-10-kv-bg .kp-t06-10-kv-title .g-ColumnUnit > .g-Image {
  width: 302px;
  padding-bottom: 579px;
  position: absolute !important;
  left: 200px;
  top: 102px;
  font-size: 0;
  line-height: 0;
  background-position: 50% top;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url(/content/dam/sites/kao/my-kao-kirei-com/sp-contents/others/living/t06-10-bg-002.png);
  animation: subScale 12s;
}

@keyframes subScale {
  0% {
    opacity: 0;
  }
  83% {
    opacity: 0;
  }
  92% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.kp-t06-10-kv-bg .kp-t06-10-kv-title .g-ColumnUnit > .g-HeadingTitle .cq-dd-image,
.kp-t06-10-kv-bg .kp-t06-10-kv-title .g-ColumnUnit > .g-Image .cq-dd-image {
  display: none;
}

.kp-t06-10-intro-bg .kp-t06-10-intro {
  width: 430px;
  margin: 0 auto;
}

.kp-t06-10-intro-bg .kp-t06-10-intro .g-ColumnUnit > .g-Text:nth-child(1) {
  display: none;
}

.kp-t06-10-intro-bg .kp-t06-10-intro .g-ColumnUnit > .g-Image:nth-child(2) .cq-dd-image {
  width: 90px !important;
  margin: 0 auto 40px;
}

.kp-t06-10-intro-bg .kp-t06-10-intro .g-ColumnUnit > .g-Image:nth-child(3) .cq-dd-image {
  width: 265px !important;
  margin: 0 auto 45px;
}

.kp-t06-10-intro-bg .kp-t06-10-intro .g-ColumnUnit > .g-Text:nth-child(4) {
  margin: 0 auto 120px;
}

.kp-t06-10-link-bg {
  margin-bottom: 110px;
  overflow: visible;
}

.kp-t06-10-link-bg .kp-t06-10-link .g-BannerLinkP__list {
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
  max-width: 1258px;
  width: 100%;
}

.kp-t06-10-link-bg .kp-t06-10-link .g-BannerLinkP__list .g-BannerLinkP__list__item {
  background: #000;
  float: left;
  position: relative;
  width: 32%;
}

.kp-t06-10-link-bg .kp-t06-10-link .g-BannerLinkP__list .g-BannerLinkP__list__item:nth-child(2) {
  margin: 0 2%;
}

.kp-t06-10-link-bg .kp-t06-10-link .g-BannerLinkP__list .g-BannerLinkP__list__item > .g-Image > .g-Image__img {
  width: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  will-change: transform;
}

.kp-t06-10-link-bg .kp-t06-10-link .g-BannerLinkP__list .g-BannerLinkP__list__item > .g-Image > .g-Image__img:hover {
  opacity: 0.5;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  will-change: transform;
}

.kp-t06-10-link-bg .kp-t06-10-link .g-BannerLinkP__list .g-BannerLinkP__list__item > .g-Image > .g-Image:hover {
  opacity: 0.5;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  will-change: transform;
}

.kp-t06-10-link-bg .kp-t06-10-link .g-BannerLinkP__list .g-BannerLinkP__list__item .g-Image > .g-Image {
  position: absolute !important;
  width: 125px;
  bottom: -10px;
  left: 50%;
  margin-left: -62.5px;
  background: #000;
}

.kp-t06-10-story-bg .kp-t06-10-story {
  width: 940px;
  margin: 0 auto;
  position: relative;
}

.kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-Image:nth-child(1) {
  width: 60px;
  margin: 35px auto 110px;
}

.kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-Image:nth-child(1)::before {
  display: block;
  content: "";
  width: 1px;
  border-left: 1px solid #a6937c;
  padding-bottom: 170px;
  margin: 0 auto 30px auto;
}

.kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-HeadingTitle:nth-child(2) {
  width: 490px;
  margin: 0 auto 75px;
  position: relative;
}

.kp-t06-10-story-bg .kp-t06-10-story-02 .g-ColumnUnit > .g-HeadingTitle:nth-child(2) {
  width: 350px;
}

.kp-t06-10-story-bg .kp-t06-10-story-03 .g-ColumnUnit > .g-HeadingTitle:nth-child(2) {
  width: 250px;
}

.kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-Text:nth-child(3) .cmn-richtext {
  text-align: center;
  font-size: 1.2em;
  line-height: 2.4em;
}

.kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-AccordionMenu .is-radius--close .g-AccordionUnit__titleBlock {
  width: 100%;
  overflow: visible;
  border: none;
  background: none;
}

.kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-AccordionMenu .is-radius--close .g-AccordionUnit__titleBlock::before {
  display: block;
  content: "";
  background: linear-gradient(rgba(255, 255, 255, .0), rgba(255, 255, 255, 1));
  width: 100%;
  padding-bottom: 40px;
  position: absolute !important;
  top: -75px;
}

.kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-AccordionMenu .l-AccordionUnit__titleBlock .g-HeadingTitle {
  display: block;
  width: 182px;
  height: 40px;
  cursor: pointer;
  margin: 35px auto 122px;
}

.kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-AccordionMenu .is-radius--open::before {
  display: block;
  content: "";
  background: linear-gradient(rgba(255, 255, 255, .0), rgba(255, 255, 255, 1));
  width: 100%;
  padding-bottom: 40px;
  position: absolute !important;
  top: -40px;
  animation: maskScale 0.5s;
  opacity: 0;
}

@keyframes maskScale {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-AccordionMenu .cmn-icon--down:before {
  display: none;
}

.kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-AccordionMenu .is-radius--open .l-AccordionUnit__titleBlock {
  display: none;
}

.kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-AccordionMenu .g-AccordionUnit__contentBlock {
  border: none;
  margin: 0 0 120px 0;
}

.kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-AccordionMenu .g-AccordionUnit__contentBlock .cmn-richtext {
  text-align: center;
  font-size: 1.2em;
  line-height: 2.4em;
}

.kp-t06-10-story-slide-bg .kp-t06-10-story-slide {
  width: 100%;
  margin-bottom: 120px;
}

.kp-t06-10-story-slide-bg .kp-t06-10-story-slide {
  width: 100%;
}

.kp-t06-10-story-slide-bg .kp-t06-10-story-slide button,
.kp-t06-10-story-slide-bg .kp-t06-10-story-slide .g-ImageCarouselP__nav {
  display: none !important;
}

.kp-t06-10-story-slide-bg .kp-t06-10-story-slide .g-ImageCarouselPUnit {
  padding: 0;
}

.kp-t06-10-reply-bg .kp-t06-10-reply {
  width: 940px;
  margin: 0 auto;
  position: relative;
}

.kp-t06-10-reply-bg .kp-t06-10-reply .g-ColumnUnit > .g-Image {
  width: 445px;
  margin: 0 auto 22px;
}

.kp-t06-10-reply-bg .kp-t06-10-reply .g-ColumnUnit > a:hover {
  opacity: 0.5;
}

@media only screen and (max-width: 1024px) and (min-width: 641px) {
  .kp-t06-10-kv-bg {
    padding-bottom: 56.307%;
    margin-bottom: 120px;
    margin-top: 20px;
  }
  
  .kp-t06-10-kv-bg .kp-t06-10-kv,
  .kp-t06-10-kv-bg .kp-t06-10-kv-title {
    width: 100%;
  }
  
  .kp-t06-10-kv-bg .kp-t06-10-kv .g-Movie .g-Movie__iframe {
    background: url(/content/dam/sites/kao/my-kao-kirei-com/sp-contents/others/living/t06-10-mainimage01.jpg);
background-size: cover;
  }
  
  .kp-t06-10-kv-bg .kp-t06-10-kv-title .g-ColumnUnit > .g-HeadingTitle {
    width: 19.307%;
    padding-bottom: 37.615%;
    right: 15.384%;
    top: 13.607%;
  }

  .kp-t06-10-kv-bg .kp-t06-10-kv-title .g-ColumnUnit > .g-Image {
    width: 23.230%;
    padding-bottom: 44.538%;
    left: 15.384%;
    top: 13.607%;
  }

  .kp-t06-10-story-bg .kp-t06-10-story {
    width: 100%;
  }
  
  .kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-Image:nth-child(1) {
    width: 6.382%;
    margin: 0 auto 8%;
  }
  
  .kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-Image:nth-child(1)::before {
    padding-bottom: 250%;
    margin: 0 auto 45% auto;
  }

  .kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-Text:nth-child(3) .cmn-richtext {
    font-size: 1.1em;
  }

  .kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-AccordionMenu .g-AccordionUnit__contentBlock .cmn-richtext {
    font-size: 1.1em;
  }
  
  .kp-t06-10-reply-bg .kp-t06-10-reply {
    width: 100%;
  }

  .kp-t06-10-reply-bg .kp-t06-10-reply .g-ColumnUnit > .g-Image {
    width: 50%;
  }
}

@media screen and (max-width:640px) {
  .kp-t06-10-reset .cmn-richtext,
  .kp-t06-10-reset .g-Section__inner,
  .kp-t06-10-reset .l-Column.is-gutter--m .l-Column__cols,
  .kp-t06-10-reset .l-Column.is-gutter--m .l-Column__inner,
  .kp-t06-10-reset .g-Text,
  .kp-t06-10-reset .g-Image,
  .kp-t06-10-reset .l-BannerLinkP.is-gutter--m .l-BannerLinkP__list__item,
  .kp-t06-10-reset .g-BannerLinkP.is-gutter--m .g-BannerLinkP__list__item,
  .kp-t06-10-reset .g-HeadingTitle,
  .kp-t06-10-reset .g-HeadingTitle__titleBlock__titleBox__title,
  .kp-t06-10-reset .g-AccordionMenu,
  .kp-t06-10-reset .g-AccordionUnit__titleBlock,
  .kp-t06-10-reset .g-AccordionUnit__contentBlock,
  .kp-t06-10-reset .l-HeadingTitle.l-HeadingTitle--h2.is-titleBorder--none,
  .kp-t06-10-reset .g-ImageCarouselP__list {
    font-size: 15.4px;
  }

  .kp-t06-10-kv-bg {
    padding-bottom: 0;
    margin-bottom: 5%;
    margin-top: 0;
  }
  
  .kp-t06-10-kv-bg .kp-t06-10-kv,
  .kp-t06-10-kv-bg .kp-t06-10-kv-title {
    display: none;
  }

  .kp-t06-10-kv-bg .kp-t06-10-kv-title-sp .g-ColumnUnit > .g-HeadingTitle {
    width: 100%;
  }

  .kp-t06-10-kv-bg .kp-t06-10-kv-title .g-ColumnUnit > .g-Image {
    display: none;
  }

  .kp-t06-10-intro-bg .kp-t06-10-intro {
    width: 100%;
  }
  
  .kp-t06-10-intro-bg .kp-t06-10-intro .g-ColumnUnit > .g-Text:nth-child(1) {
    display: block;
    width: 83%;
    margin: 0 auto;
  }

  .kp-t06-10-intro-bg .kp-t06-10-intro .g-ColumnUnit > .g-Text:nth-child(1) .cmn-richtext {
    margin-bottom: 20%;
    font-size: 1.1em;
    line-height: 2.2em;
  }

  .kp-t06-10-intro-bg .kp-t06-10-intro .g-ColumnUnit > .g-Image:nth-child(2) {
    width: 83%;
    margin: 0 auto;
  }

  .kp-t06-10-intro-bg .kp-t06-10-intro .g-ColumnUnit > .g-Image:nth-child(2) .cq-dd-image {
    width: 20% !important;
    margin: 0 auto 10%;
  }

  .kp-t06-10-intro-bg .kp-t06-10-intro .g-ColumnUnit > .g-Image:nth-child(3) {
    width: 83%;
    margin: 0 auto;
  }

  .kp-t06-10-intro-bg .kp-t06-10-intro .g-ColumnUnit > .g-Image:nth-child(3) .cq-dd-image {
    width: 60% !important;
    margin: 0 auto 10%;
  }

  .kp-t06-10-intro-bg .kp-t06-10-intro .g-ColumnUnit > .g-Text:nth-child(4) {
    width: 83%;
    margin: 0 auto;
  }

  .kp-t06-10-intro-bg .kp-t06-10-intro .g-ColumnUnit > .g-Text:nth-child(4) .cmn-richtext {
    width: 85%;
    line-height: 2.2em;
    margin: 0 auto 20%;
  }

  .kp-t06-10-link-bg .kp-t06-10-link .g-BannerLinkP__list .g-BannerLinkP__list__item .g-Image > .g-Image {
    width: 90%;
    bottom: -5%;
    left: 50%;
    margin-left: -45%;
  }

  .kp-t06-10-story-bg .kp-t06-10-story {
    width: 83%;
    margin: 0 auto;
  }

  .kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-Image:nth-child(1) {
    width: 12%;
    margin: 5% auto 10%;
  }
  
  .kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-Image:nth-child(1)::before {
    padding-bottom: 250%;
    margin: 0 auto 45% auto;
  }

  .kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-HeadingTitle:nth-child(2) {
    width: 90%;
    margin: 0 auto 10%;
  }

  .kp-t06-10-story-bg .kp-t06-10-story-02 .g-ColumnUnit > .g-HeadingTitle:nth-child(2) {
    width: 60%;
  }

  .kp-t06-10-story-bg .kp-t06-10-story-03 .g-ColumnUnit > .g-HeadingTitle:nth-child(2) {
    width: 50%;
  }

  .kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-AccordionMenu .is-radius--close .g-AccordionUnit__titleBlock::before {
    padding-bottom: 50px;
    top: -50px;
  }
  
  .kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-AccordionMenu .l-AccordionUnit__titleBlock .g-HeadingTitle {
    width: 45%;
    cursor: pointer;
    margin: 0 auto 20%;
  }

  .kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-Text:nth-child(3) .cmn-richtext {
    font-size: 1.1em;
    text-align: left;
  }

  .kp-t06-10-story-bg .kp-t06-10-story .g-ColumnUnit > .g-AccordionMenu .g-AccordionUnit__contentBlock .cmn-richtext {
    font-size: 1.1em;
    text-align: left;
  }
  
  .kp-t06-10-reply-bg .kp-t06-10-reply {
    width: 100%;
  }

  .kp-t06-10-reply-bg .kp-t06-10-reply .g-ColumnUnit > .g-Image {
    width: 75%;
  }
}

.article-note {
  max-width: 1230px;
  position: absolute;
  right: 50%;
  transform: translate(50%,-100px);
}