@charset "UTF-8";
html {
  box-sizing: border-box;
  font-size: 3.733333vw;
}
html *,
html *:before,
html *:after {
  box-sizing: inherit;
}

@media screen and (min-width: 768px) {
  html {
    font-size: 1.75vw;
  }
}

@media screen and (min-width: 800px) {
  html {
    font-size: 14px;
  }
}
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  font-size: 1rem;
  line-height: 1.71;
  color: #000;
  /* color: #444; */
}
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
a {
  color: inherit;
  text-decoration: none;
}
.page-wrap {
  margin: 0;
  width: 100%;
  overflow-x: hidden;
}
.scroll-effect {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity .75s ease-out, transform .75s ease-out;
}
.scroll-effect.scrolled {
  opacity: 1;
  transform: translateY(0);
}

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

@media screen and (min-width: 375px) and (max-width: 767px) {
  .main-header {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  .only-sp {
    display: none;
  }
}
.inner-wrap {
  max-width: 1000px;
  margin: 0 auto;
}
.inner-wrap__inner {
  max-width: 800px;
  margin: 0 auto;
}
.main-header {
  margin: 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 1000;
}
.main-header__top {
  margin: 0;
  background-color: #f3f3f3;
}
.main-header__top > .inner-wrap {
  display: flex;
  align-items: center;
  padding: 0 1.428571em;
  height: 3.214286em;
  max-width: none;
}
.main-header__logo {
  margin: 0;
  line-height: 1;
  width: 6.214286em;
}

@media screen and (min-width: 768px) {
  .main-header__top {
    height: 3.5rem;
    padding: 0 1.428571rem;
  }
  .main-header__logo {
    width: 7.142857rem;
  }
}
.main-header__nav {
  margin: 0;
}
.main-header__nav > .inner-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.428571em;
  height: 3.214286em;
}
.nav-ttl {
  font-size: .714286em;
  font-weight: bold;
  line-height: 1;
  margin: 0;
}
.nav-ttl__txt {
  display: inline-block;
  vertical-align: middle;
  width: 2.9em;
  height: 1.6em;
  margin: 0 0 0 .75em;
  background: url(../img/common/cf.svg) no-repeat center center;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.nav-btn {
  width: 1.428571em;
  height: 1.142857em;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  font: inherit;
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
  outline: none;
}
.nav-btn.nav-btn--open {
  background-image: url(../img/common/nav_open.svg);
}
.nav-btn.nav-btn--close {
  background-image: url(../img/common/nav_close.svg);
  top: 1rem;
  right: 1.428571em;
  position: absolute;
}
.nav {
  margin: 0;
}
.nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 767px) {
  .nav {
    background-color: rgb(67 67 67 / 90%);
    padding: 0 0 0 2.857142em;
    width: 100%;
    height: calc(100vh - 3.214286em);
    position: absolute;
    left: 0;
    top: 0;
    transition: transform .2s ease-out;
    transform: translateX(100%);
    z-index: 1000;
  }
  .nav.opened {
    transform: translateX(0);
  }
  .nav__inner {
    background-color: #fff;
    padding: 4em 1.428571em 1.428571em;
    height: 100%;
    position: relative;
    margin: 0 0 0 auto;
    width: 100%;
    max-width: 335px;
  }
  .nav__list {
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  .nav__list > li {
    margin: 0 0 14px;
    line-height: 1.2;
  }
  .nav__list > li:last-child {
    margin-bottom: 0;
  }
  .nav__list a {
    display: block;
    padding: 12px 20px 12px 0;
    background: url(../img/common/arrow_04.svg) no-repeat right center;
    background-size: 9px auto;
  }
  .nav__list > li > a {
    font-size: 1.285714em;
    font-weight: bold;
  }
  .nav__list--sub {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav__list--sub > li {
    margin: 0;
    padding-left: 20px;
  }
}

@media screen and (min-width: 768px) {
  .main-header__nav {
    padding: 0 1.428571rem;
  }
  .main-header__nav > .inner-wrap {
    padding: 0;
    height: 3.857143rem;
    font-size: .845rem;
  }
  .nav-ttl {
    font-size: .857143em;
  }
  .nav-ttl__txt {
    width: 3.911667em;
    height: 2.166667em;
  }
  .nav-btn {
    display: none;
  }
  .nav__list {
    display: flex;
    align-items: center;
  }
  .nav__list > li {
    margin: 0 0 0 2.857143rem;
    line-height: 1.2;
    position: relative;
    padding: .5rem 0;
  }
  .nav__list > li > a {
    position: relative;
  }
  .nav__list > li > a:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #444;
    transition: transform .2s ease-out;
    transform: scaleX(0);
    transform-origin: left center;
    position: absolute;
    left: 0;
    bottom: -.5em;
  }
  .nav__list > li > a:hover:after {
    transform: scaleX(1);
  }
  .nav__list--sub {
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    padding: 0 .5rem;
    list-style: none;
    background-color: #fff;
    width: 12rem;
    box-shadow: 0 1px 2px rgb(67 67 67 / 30%);
    max-height: 0;
    height: auto;
    transition: max-height .2s ease-out;
    overflow: hidden;
  }
  .nav__list > li:hover .nav__list--sub {
    max-height: 200px;
  }
  .nav__list--sub > li {
    border-bottom: 1px solid #444;
    padding: .75rem;
  }
  .nav__list--sub > li:last-child {
    border-bottom: none;
  }
  .nav__list--sub a {
    transition: opacity .2s ease-out;
  }
  .nav__list--sub a:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 900px) {
  .main-header__nav > .inner-wrap {
    font-size: 1rem;
  }
}
.main-contents {
  margin: 0;
  padding: 6.428572rem 1.428571rem 3.5rem;
}

@media screen and (min-width: 375px) and (max-width: 767px) {
  .main-contents {
    padding-top: 90px;
  }
}

@media screen and (min-width: 768px) {
  .main-contents {
    padding-top: 7.357143rem;
  }
}
.page-hero {
  margin: 0 -1.428571rem 2rem;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
}
.page-hero > .inner-wrap {
  padding: 10.571429rem 1.428571rem 0;
}
.page-hero.page-hero--bg1 {
  background-image: url(../img/coo/main_img_cf-pnw__sp.jpg);
}
.page-hero.page-hero--bg2 {
  background-image: url(../img/cf_h/main_img_cf-h__sp.jpg);
}
.page-hero.page-hero--bg3 {
  background-image: url(../img/cf_sd/main_img_cf-sd__sp.jpg);
}
.page-hero.page-hero--bg4 {
  background-image: url(../img/cf_an/main_img_cf-an__sp.jpg);
}
.page-hero__box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: rgb(255 255 255 / 80%);
  padding: 2rem;
  width: 18.571429rem;
  margin: 0;
}
.page-hero__txt1 {
  font-size: .571429rem;
  font-weight: bold;
  margin: 0;
}
.page-hero__txt1 strong {
  display: block;
  font-size: 3.5em;
  line-height: 1;
}
.page-hero__txt1 strong.an {
  font-size: 3.475em;
}
.page-hero__logo {
  width: 4.571429rem;
  background-color: #fff;
  padding: .642857rem;
  margin: 0;
}
.page-hero__txt2 {
  font-size: .785714rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 1em 0 0;
  width: 100%;
}
.intro-txt {
  text-align: center;
  margin: 0 0 4rem;
}
.intro-txt img {
  display: block;
  margin: 0 auto 1.5em;
  width: 21.857143em;
}
.csdr-txt {
  margin: 0 0 4rem;
}

@media screen and (min-width: 768px) {
  .page-hero {
    margin-bottom: 2.5rem;
    background-position: center top;
    background-size: cover;
  }
  .page-hero > .inner-wrap {
    display: flex;
    align-items: center;
    height: 41.666667vw;
    padding: 0 1.428571rem;
  }
  .page-hero.page-hero--right > .inner-wrap {
    justify-content: flex-end;
  }
  .page-hero.page-hero--bg1 {
    background-image: url(../img/cf_pnw/main_img_cf-pnw__pc.jpg);
  }
  .page-hero.page-hero--bg2 {
    background-image: url(../img/cf_h/main_img_cf-h__pc.jpg);
  }
  .page-hero.page-hero--bg3 {
    background-image: url(../img/cf_sd/main_img_cf-sd__pc.jpg);
  }
  .page-hero.page-hero--bg4 {
    background-image: url(../img/cf_an/main_img_cf-an__pc.jpg);
  }
  .page-hero__box {
    padding: 4.2rem 2.857143rem;
    width: 31.3rem;
  }
  .page-hero__txt1 {
    font-size: .714286rem;
  }
  .page-hero__txt1 strong {
    font-size: 3.5em;
  }
  .page-hero__logo {
    width: 5.214286rem;
    padding: .714286rem;
  }
  .page-hero__txt2 {
    font-size: 1.142857rem;
  }
}

@media screen and (min-width: 1040px) {
  .page-hero > .inner-wrap {
    height: 500px;
    padding: 0;
  }
}
.info-cards-block {
  margin: 0 0 4.285714rem;
}
.info-card {
  margin: 0 0 .714286rem;
  padding: 1.428571em .714286em;
}
.info-card:last-child {
  margin-bottom: 0;
}
.info-card--01,
.info-card--01 .info-card__toggle-inner {
  background-color: #efded0;
}
.info-card--02,
.info-card--02 .info-card__toggle-inner {
  background-color: #d6d8eb;
}
.info-card--03,
.info-card--03 .info-card__toggle-inner {
  background-color: #d5e5d5;
}
.info-card--04,
.info-card--04 .info-card__toggle-inner {
  background-color: #e8cdd1;
}
.info-card > dt {
  font-size: 1.285714em;
  font-weight: bold;
  line-height: 1.33;
  margin: 0;
  position: relative;
}
.info-card > dt:after {
  content: "";
  display: block;
  width: .857143rem;
  height: .714286rem;
  background: url(../img/common/arrow_05.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: .5rem;
  right: 0;
  transition: transform .2s ease-out;
}
.info-card > dt.opened:after {
  transform: rotate(-180deg);
}
.info-card > dd {
  margin: 0;
}
.info-card__txt1 {
  margin: .25em 0;
}
.info-card__labels {
  margin: 0 -2px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.info-card__labels > li {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .714286em;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  background-color: #fff;
  border-radius: 3px;
  width: calc(25% - 4px);
  margin: 2px;
  padding: .4em 0;
  font-feature-settings: "palt";
}
.info-card__img {
  margin: 1.428571em 0 1em;
  position: relative;
}
.info-card__img figcaption {
  display: block;
  width: 100%;
  font-size: .928571em;
  font-weight: bold;
  line-height: 1.3;
  text-shadow: 0 1px #fff;
  padding: 1em;
  position: absolute;
  left: 0;
  bottom: 0;
}
.info-card__img figcaption.info-card__img--white {
  color: #fff;
  text-shadow: none;
}
.info-card__img figcaption.info-card__img--right {
  text-align: right;
}
.info-card__img.info-card__img--pnw figcaption {
  color: #fff;
  text-shadow: none;
  top: 15%;
  bottom: auto;
}
.info-card__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.info-card__links > li {
  margin: 0;
  border-bottom: 1px solid #707070;
  line-height: 1.5;
}
.info-card__links > li:last-child {
  border-bottom: none;
}
.info-card__links a {
  display: block;
  background: url(../img/common/arrow_03.svg) no-repeat right center;
  background-size: .5em auto;
  padding: .5em 1em .5em 0;
}
.info-card__links > li:last-child a {
  padding-bottom: 0;
}
.info-card__toggle {
  margin: 0;
  max-height: 0;
  height: auto;
  overflow: hidden;
  transition: max-height .2s ease-out;
}

@media screen and (max-width: 767px) {
  .info-card__labels > li br {
    display: none;
  }
  .info-card .info-card__toggle.opened {
    max-height: 25em;
  }
}

@media screen and (min-width: 768px) {
  .info-cards-block {
    display: flex;
    justify-content: center;
    margin-left: -1.428571rem;
    margin-right: -1.428571rem;
  }
  .info-card {
    font-size: 1.346154vw;
    width: calc(25% - 4px);
    margin: 0 2px;
    height: 11.428571em;
    position: relative;
    z-index: 100;
  }
  .info-card__toggle {
    width: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 100;
  }
  .info-card__toggle-inner {
    padding: 0 .714286em 1.428571em;
  }
  .info-card__labels > li {
    height: 3.2em;
  }
  .info-card__img {
    margin-top: 0;
  }
  .info-card__img figcaption {
    font-size: .714286em;
  }
  .info-card:hover .info-card__toggle {
    max-height: 25em;
  }
  .info-card:hover > dt:after {
    transform: rotate(-180deg);
  }
  .info-card__links a {
    transition: opacity .2s ease-out;
  }
  .info-card__links a:hover {
    opacity: .7;
  }
}

@media screen and (min-width: 1004px) {
  .info-cards-block {
    margin-left: -2px;
    margin-right: -2px;
  }
}

@media screen and (min-width: 1040px) {
  .info-card {
    font-size: 1rem;
  }
}
.main-ttl {
  text-align: center;
  font-size: 2.285714rem;
  font-weight: bold;
  line-height: 1.5;
  color: #fff;
  padding: .34375em 1.428571rem;
  margin: 0 -1.428571rem 2.857143rem;
}
.main-ttl--color1 {
  background-color: #d49e7a;
}
.main-ttl--color2 {
  background-color: #afb7d5;
}
.main-ttl--color3 {
  background-color: #8dab8c;
}
.main-ttl--color4 {
  background-color: #dc8e97;
}
.main-ttl--color5 {
  background-color: #fff;
  color: #333;
}

@media screen and (min-width: 768px) {
  .main-ttl {
    padding: .5em 1.428571rem;
  }
}

@media screen and (min-width: 1000px) {
  .main-ttl {
    margin-left: 0;
    margin-right: 0;
  }
}
.sec-block {
  margin: 0 0 8.571429rem;
}
.sec-block:last-child {
  margin-bottom: 0;
}
.sec-ttl {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.2;
  margin: 0 0 1.428571rem;
  padding: 0 0 2.142857rem;
  position: relative;
}
.sec-ttl:before,
.sec-ttl:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: .571429rem .357142rem 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.sec-ttl:before {
  bottom: 1rem;
}
.sec-ttl:after {
  bottom: 0;
}
.sec-ttl--color1:before,
.sec-ttl--color1:after {
  border-color: #efded0 transparent transparent;
}
.sec-ttl--color2:before,
.sec-ttl--color2:after {
  border-color: #d6d8eb transparent transparent;
}
.sec-ttl--color3:before,
.sec-ttl--color3:after {
  border-color: #d5e5d5 transparent transparent;
}
.sec-ttl--color4:before,
.sec-ttl--color4:after {
  border-color: #e8cdd1 transparent transparent;
}
.sec-ttl > span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 2.42em;
  border-radius: 1.21em;
  padding: 0 2em;
}
.sec-ttl--color1 > span {
  background-color: #efded0;
}
.sec-ttl--color2 > span {
  background-color: #d6d8eb;
}
.sec-ttl--color3 > span {
  background-color: #d5e5d5;
}
.sec-ttl--color4 > span {
  background-color: #e8cdd1;
}
.sec-subttl {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.36;
  margin: 8.571429rem 0 4.285714rem;
  border-top: 2px solid #444;
  border-bottom: 1px solid #bbb;
  padding: 1.428571rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sec-subttl:first-child,
.sec-ttl + .sec-subttl {
  margin-top: 0;
}
.sec-subttl img {
  display: inline-block;
  width: auto;
  height: 1.5rem;
  margin: 0 1em 0 0;
}
.sec-subttl.sec-subttl--type01 {
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 1.571429rem;
  text-align: left;
  padding-left: 0;
  padding-right: 0;
}
.sec-subttl.sec-subttl--type01 > .sec-subttl--type01-number {
  color: #ccc;
  margin-right: .5em;
}
.sec-subttl.sec-subttl--type02 {
  align-items: center;
  font-size: 1.571429rem;
}
.sec-subttl.sec-subttl--type03 {
  font-size: 24px;
  font-weight: 500;
  line-height: 23px;
  border-top: 1px solid #919191;
  border-bottom: none;
  padding-top: 41px;
}
.button {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  margin: 0;
  line-height: 1.5;
}
.button > a {
  width: 100%;
  color: #fff;
  margin: 0 auto;
  border-radius: 3px;
  border: 1px solid #444;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 1.428571em;
  background-color: #444;
  height: 4.285714em;
  position: relative;
  overflow: hidden;
  transition: color .2s ease-out;
}
.button > a:after {
  content: "";
  display: block;
  width: .714286rem;
  height: .714286rem;
  background: url(../img/common/arrow_01.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  right: .714286rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}
.button > a > span {
  position: relative;
}
.button > a:hover {
  color: #444;
}
.button > a:hover:after {
  background-image: url(../img/common/arrow_01--color00.svg);
}
.button > a:before {
  content: "";
  position: absolute;
  top: 0;
  right: -50px;
  bottom: 0;
  left: 0;
  border-right: 50px solid transparent;
  border-bottom: 5em solid #fff;
  transform: translateX(-100%);
  transition: transform .2s ease-out;
}
.button > a:hover:before {
  transform: translateX(0);
}
.button--color01 > a {
  border-color: #d49e7a;
  background-color: #d49e7a;
}
.button--color01 > a:hover {
  color: #d49e7a;
}
.button--color01 > a:hover:after {
  background-image: url(../img/common/arrow_01--color01.svg);
}
.button--color02 > a {
  border-color: #afb7d5;
  background-color: #afb7d5;
}
.button--color02 > a:hover {
  color: #afb7d5;
}
.button--color02 > a:hover:after {
  background-image: url(../img/common/arrow_01--color02.svg);
}
.button--color03 > a {
  border-color: #8dab8c;
  background-color: #8dab8c;
}
.button--color03 > a:hover {
  color: #8dab8c;
}
.button--color03 > a:hover:after {
  background-image: url(../img/common/arrow_01--color03.svg);
}
.button--color04 > a {
  border-color: #dc8e97;
  background-color: #dc8e97;
}
.button--color04 > a:hover {
  color: #dc8e97;
}
.button--color04 > a:hover:after {
  background-image: url(../img/common/arrow_01--color04.svg);
}
.button.button--color05 > a {
  border-color: #d59f7b;
  background-color: #d59f7b;
}
.button.button--color05 > a:hover {
  color: #d59f7b;
}
.button.button--color05 > a:hover:after {
  background-image: url(../img/common/arrow_01--color05.svg);
}
.button.button--style01 {
  font-size: .857143rem;
}
.button.button--style01 > a {
  background-image: none;
  width: 8.333333em;
  height: 2.666667em;
  padding: 0 .5em;
}
.button.button--style01--lg > a {
  background-image: none;
  width: 12.333333em;
  height: 3.666667em;
  padding: 0 .5em;
}
.button.button--style01 > a:before {
  border-bottom-width: 3em;
}
.button.button--style01 > a:after {
  display: none;
}
.button.button--style01--lg > a:after {
  display: none;
}

@media screen and (min-width: 768px) {
  .sec-subttl.sec-subttl--type01 {
    justify-content: center;
  }
  .button > a {
    max-width: 25.714286em;
  }
  .button > a:after {
    right: 1.285714rem;
  }
  .button.button--style01 {
    font-size: 1rem;
  }
}
.lineup-list {
  margin: 0 auto 5.714286rem;
  padding: 0;
  list-style: none;
  max-width: 800px;
}
.lineup-pattern-list {
  margin: 0 auto 5.714286rem;
  padding: 0;
  list-style: none;
  max-width: 800px;
}
.lineup-list > li {
  margin: 0 0 5.714286rem;
}
.lineup-pattern-list > li {
  margin: 0 0 5.714286rem;
}
.lineup-list:last-child,
.lineup-list > li:last-child {
  margin-bottom: 0;
}
.lineup-pattern-list:last-child,
.lineup-pattern-list > li:last-child {
  margin-bottom: 0;
}
.lineup-img {
  margin: 0 0 1.714286rem;
  position: relative;
  overflow: hidden;
}
.lineup-img:not(.no-hover) {
  cursor: pointer;
}
.lineup-img img {
  display: block;
  transition: transform .2s ease-out;
}
.lineup-img figcaption {
  font-size: .714286rem;
  line-height: 1;
  position: absolute;
  bottom: 1em;
  right: 1em;
  z-index: 100;
  text-align: right;
}
.lineup-img figcaption.lineup-img--txt-left {
  text-align: left;
  right: auto;
  left: 1em;
}
.lineup-img figcaption.lineup-img--txt-left-top {
  text-align: left;
  right: auto;
  left: 1em;
  bottom: auto;
  top: 1em;
}
.lineup-img figcaption.lineup-img--txt-white {
  color: #fff;
}
.lineup-details {
  margin: 0;
  text-align: center;
}
.lineup-list--style01 .lineup-details {
  text-align: left;
}
.lineup-name {
  font-size: .714286rem;
  font-weight: bold;
  margin: 0 0 2.142857rem;
  padding: 0 0 2.285714rem;
  background: url(../img/common/title_dots.svg) no-repeat center bottom;
  background-size: 2.214286rem auto;
}
.lineup-name img {
  display: block;
  margin: 0 auto .5rem;
  width: auto;
  height: 4.357143rem;
}
.lineup-name.lineup-name--img-size1 img {
  height: 1.928571rem;
}
.lineup-details .button {
  margin-top: 2rem;
}

@media screen and (min-width: 768px) {
  .lineup-list > li {
    margin-bottom: 4.285714rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .lineup-pattern-list > li {
    margin-bottom: 4.285714rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .lineup-img {
    margin-bottom: 0;
    width: 50%;
  }
  .lineup-list--style01 .lineup-img {
    width: 47.5%;
  }
  .lineup-list > li.reversed .lineup-img {
    order: 1;
  }
  .lineup-pattern-list > li.reversed .lineup-img {
    order: 1;
  }
  .lineup-img figcaption {
    font-size: .857143rem;
  }
  .lineup-details {
    width: 50%;
    padding: 0 1rem;
  }
  .lineup-list--style01 .lineup-details {
    width: 52.5%;
    padding-left: 2rem;
  }
}
.logo-block {
  margin: 0 0 2.857143rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-block__logo {
  line-height: 1;
  width: 7.714286rem;
  margin: 0;
}
.logo-block__txt {
  margin: 0;
  width: calc(100% - 8.714286rem);
}
.logo-block__txt p {
  font-size: 1.571429rem;
  font-weight: bold;
  line-height: 1.4;
}
.logo-block + p {
  margin: -1.5rem auto 5.714286rem;
  max-width: 630px;
}

@media screen and (min-width: 768px) {
  .logo-block {
    margin-bottom: 3.857143rem;
    justify-content: center;
  }
  .logo-block__logo {
    width: 10.714286rem;
  }
  .logo-block__txt {
    width: auto;
    margin-left: 2rem;
  }
}
.fig-img {
  line-height: 1;
  text-align: center;
  margin: 0 auto 2.857143rem;
}
.fig-img:last-child {
  margin-bottom: 0;
}
.fig-img--size1 {
  max-width: 600px;
}
.fig-img--size2 {
  max-width: 710px;
}
.fig-img--size3 {
  max-width: 540px;
}
.fig-img--size4 {
  max-width: 615px;
}
.fig-img--size5 {
  max-width: 566px;
}
.fig-img .column-3 {
  line-height: 1.7;
  text-align: left;
  margin-top: 1rem;
}
.fig-img .column-3 span {
  display: block;
}
.fig-img figcaption {
  line-height: 1.7;
  margin-top: 1rem;
  text-align: left;
}
.caution-list1,
.txt-list1 {
  margin: 0 0 1.5rem;
  padding: 0 0 0 1rem;
  text-align: left;
}
.caution-list1:last-child,
.txt-list1:last-child {
  margin-bottom: 0;
}
.caution-list1 > li {
  font-size: .857143rem;
  margin: 0 0 .5rem;
}
.txt-list1 > li {
  margin: 0 0 .5rem;
}
.caution-list1 > li:last-child,
.txt-list1 > li:last-child {
  margin-bottom: 0;
}
.caution-list1 + p {
  font-size: .857143rem;
  margin-bottom: 2.5rem;
}
.caution-list2 {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.caution-list2 > li {
  font-size: .857143rem;
  margin: 0 0 .5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.caution-list2 > li > span:nth-child(1) {
  width: 3em;
}
.caution-list2 > li > span:nth-child(2) {
  width: calc(100% - 3.5em);
}
/* 5項目注釈（※1〜※5）のみ改行時インデントを調整 */
.caution-list2--numbered > li {
  display: block;
  padding-left: 2.5em;
  text-indent: -2.2em;
}
.text-link1 {
  margin-bottom: 5.714286rem;
}
.text-link1 a {
  text-decoration: none;
  padding-bottom: .25em;
  border-bottom: 1px solid #444;
  background: url(../img/common/arrow_01--color00.svg) no-repeat right top;
  background-size: .714286em auto;
  padding-right: 1em;
}
.text-link1 a.anchor {
  background-image: url(../img/common/arrow_02.svg);
}
.text-link1 a:hover {
  border-bottom-color: transparent;
}
.img-link1 {
  margin: 0 auto 1rem;
  line-height: 1;
  text-align: center;
  width: 10.714286rem;
}
.margin-style1 {
  margin-bottom: 5.714286rem;
}
.margin-center {
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .caution-list1 + p {
    font-size: 1rem;
    padding-left: 1rem;
  }
  .text-link1 {
    text-align: center;
  }
  .centered-txt-pc {
    text-align: center;
  }
  .fig-img .column-3 {
    display: flex;
    align-items: flex-start;
    margin: 0 -2em 0 0;
  }
  .fig-img .column-3 span {
    margin: 0 0 0 1em;
  }
  .fig-img .column-3 span:first-child {
    margin-left: 0;
    flex-shrink: 0;
  }
}
.fig-2column,
.two-columns {
  margin: 0 0 2.857143rem;
}
.fig-2column:last-child,
.two-columns:last-child {
  margin-bottom: 0;
}
.fig-2column > figure {
  margin: 0 0 2.142857rem;
}
.two-columns > .two-columns__column {
  margin: 0 0 5.714286rem;
}
.fig-2column > figure:last-child,
.two-columns > .two-columns__column:last-child {
  margin-bottom: 0;
}
.fig-2column img {
  display: block;
  margin: 0;
}
.fig-2column figcaption {
  margin: 1rem 0 0;
}
.fig-2column small {
  display: inline-block;
  font-size: .857143em;
}
.fig-2column.fig-2column--arrow > figure:nth-child(1) {
  position: relative;
  margin-bottom: 3.142857rem;
}
.fig-2column.fig-2column--arrow > figure:nth-child(1):after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1rem 1rem 0;
  border-color: #444 transparent transparent;
  position: absolute;
  left: 50%;
  bottom: -2rem;
  margin: 0 0 0 -1rem;
}
.sec-subttl-2 {
  font-size: 1.285714rem;
  font-weight: bold;
  line-height: 1.1;
  margin: 4.285714rem 0 1.5rem;
  border-left: 8px solid #444;
  padding-left: .75em;
}
.sec-subttl-2:first-child {
  margin-top: 0;
}
.txt-catch {
  font-weight: bold;
  font-size: 1.571429em;
  line-height: 1.5;
  margin: 0 0 4.285714rem;
}
/* 抗ウイルス注記用（txt-catchより小さく、左寄せ固定） */
.txt-catch--small {
  font-weight: bold;
  font-size: 1.285714em;
  line-height: 1.5;
  text-align: left;
  margin: 0 0 1.25rem;
}
@media screen and (max-width: 767px) {
  .txt-catch--small {
    font-size: 1.071429em;
  }
}
.fig-4column {
  margin: 0 0 2.857143rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .fig-4column > figure {
    width: calc(50% - .392857rem);
    margin: .785714rem 0 0 .785714rem;
  }
  .fig-4column > figure:nth-child(-n+2) {
    margin-top: 0;
  }
  .fig-4column > figure:nth-child(odd) {
    margin-left: 0;
  }
}

@media screen and (min-width: 768px) {
  .fig-2column,
  .two-columns {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .fig-2column > figure,
  .two-columns > .two-columns__column {
    margin-bottom: 0;
    width: calc(50% - 1.428571rem);
  }
  .fig-2column.fig-2column--arrow > figure:nth-child(1) {
    margin-bottom: 0;
  }
  .fig-2column.fig-2column--arrow > figure:nth-child(1):after {
    border-width: 1rem 0 1rem 1rem;
    border-color: transparent transparent transparent #444;
    bottom: auto;
    left: auto;
    top: 4.5rem;
    right: -2rem;
    margin-left: 0;
  }
  .txt-catch {
    text-align: center;
  }
  .two-columns__column .txt-catch {
    text-align: left;
  }
  .fig-4column > figure {
    width: 23.125%;
    margin: 2.5% 0 0 2.5%;
  }
  .fig-4column > figure:nth-child(-n+4) {
    margin-top: 0;
  }
  .fig-4column > figure:nth-child(4n+1) {
    margin-left: 0;
  }
}
.info-table {
  font-size: .857143rem;
  margin: 0 auto 1rem;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  line-height: 1.3;
}
.info-table th,
.info-table td {
  text-align: center;
  vertical-align: middle;
  padding: .5em .25em;
}
.info-table th {
  border-right: 1px solid #444;
  background-color: #e6e6e8;
  font-weight: normal;
}
.info-table td {
  border-right: 1px solid #444;
  border-bottom: 1px solid #444;
}
.info-table th:last-child,
.info-table td:last-child {
  border-right: none;
}
.info-table.info-table--style01 {
  border: 1px solid #444;
}
.info-table.info-table--style01 th {
  background-color: transparent;
}
.info-table.info-table--style01 th,
.info-table.info-table--style01 td {
  border: 1px solid #444;
}
.info-table.info-table--style01 td:first-child {
  text-align: left;
}
.info-table .narrow-cell {
  width: 4em;
}
.info-table__footer {
  margin: 0 auto 2.857143rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.info-table__footer > dt {
  margin: 1em 0 0;
  width: 5.25em;
}
.info-table__footer > dd {
  margin: 1em 0 0;
  width: calc(100% - 5.25em);
}
.info-table__footer > dt:nth-of-type(1),
.info-table__footer > dd:nth-of-type(1) {
  margin-top: 0;
}
.csdr-table {
  font-size: .857143rem;
  margin: 0 auto 1rem;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  line-height: 1.3;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
}
.csdr-table th,
.csdr-table td {
  text-align: center;
  vertical-align: middle;
  padding: 2rem 0;
}
.csdr-table th {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  background-color: #e6e6e8;
  font-weight: normal;
}
.csdr-table td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
}

@media screen and (min-width: 768px) {
  .info-table {
    font-size: 1rem;
    max-width: 480px;
  }
  .csdr-table {
    font-size: 1rem;
  }
  .info-table .narrow-cell {
    width: 4.428571em;
  }
  .info-table__footer {
    max-width: 480px;
  }
  .info-table.info-table--style01 th,
  .info-table.info-table--style01 td {
    padding: .5em 1em;
  }
  .info-table.info-table--style01 + p {
    text-align: center;
  }
}
.test-block {
  margin: -2.857143rem auto 5.714286rem;
  max-width: 800px;
  border: 4px solid #f3f3f3;
  background-color: #fff;
}
.test-block__ttl {
  text-align: center;
  font-weight: bold;
  font-size: 1.142857rem;
  padding: .5rem 0;
  line-height: 1.5;
  margin: 0;
  background-color: #f3f3f3;
}
.test-block__dl {
  margin: 0;
  padding: 1.428571rem;
  font-size: .857143rem;
}
.test-block__dl > dt {
  margin: 0 0 .25rem;
}
.test-block__dl > dt:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: .416667em;
  height: .416667em;
  border-radius: 50%;
  background-color: #444;
  margin: 0 .5em 0 0;
}
.test-block__dl > dd {
  margin: 0 0 1em;
}
.test-block__dl > dd:last-child {
  margin-bottom: 0;
}
.btn-list1 {
  margin: 2.857143rem 0;
  padding: 0;
  list-style: none;
}
.btn-list1 > li {
  margin: 0 0 1.428571rem;
}
.btn-list1 > li:last-child {
  margin-bottom: 0;
}
.btn-list1 a {
  margin: 0;
  max-width: none;
}

@media screen and (min-width: 768px) {
  .test-block__dl {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 1rem;
  }
  .test-block__dl > dt {
    width: 7.571429rem;
    margin-bottom: 1em;
  }
  .test-block__dl > dt:before {
    width: .428571em;
    height: .428571em;
  }
  .test-block__dl > dd {
    width: calc(100% - 8.571429rem);
  }
  .test-block__dl > dt:nth-last-of-type(1) {
    margin-bottom: 0;
  }
  .btn-list1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .btn-list1 > li {
    margin-bottom: 0;
    margin-top: 2.857142rem;
    width: calc(50% - 1.428571rem);
  }
  .btn-list1 > li:nth-child(-n+2) {
    margin-top: 0;
  }
}
.anpanman {
  margin: 0 0 4.285714rem;
}
.anpanman + .txt-catch {
  text-align: center;
}
.anpanman__logo {
  line-height: 1;
  text-align: center;
  margin: 0 0 1rem;
}
.anpanman__labels {
  margin: 0 -3px;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anpanman__labels > li {
  font-size: .928571rem;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.2em;
  height: 6.2em;
  border: 4px solid;
  border-radius: 50%;
  margin: 0 3px;
  line-height: 1.33;
}
.anpanman__labels--color1 {
  border-color: #8dc986;
  color: #8dc986;
}
.anpanman__labels--color2 {
  border-color: #8dcec8;
  color: #8dcec8;
}
.anpanman__labels--color3 {
  border-color: #d9899d;
  color: #d9899d;
}
.anpanman__labels--color4 {
  border-color: #ee8863;
  color: #ee8863;
}

@media screen and (min-width: 768px) {
  .anpanman {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .anpanman__logo {
    margin-bottom: 0;
    margin-right: 2rem;
    width: 22.142857rem;
  }
  .anpanman__labels {
    margin: 0;
  }
  .anpanman__labels > li {
    font-size: 1.071429rem;
  }
}

/* 0725 */
/* スライダー共通 */
.splide__pagination {
  bottom: -24px;
  gap: 24px;
}
.splide__pagination__page {
  width: 4px;
  height: 4px;
}
.splide__pagination__page.is-active {
  background-color: #6b6b6b;
}

.splide__slide.is-active {
  user-select: text;
}

@media screen and (min-width: 768px) {
  .splide__pagination {
    bottom: -33px;
    gap: 40px;
  }
  .splide__pagination__page {
    width: 8px;
    height: 8px;
  }
}

/* ヒーロービュー */
.splide-hero {
  width: 100vw;
  margin-left: -1.428571rem;
  margin-bottom: 32px;
}

.hero-bg {
  position: relative;
}

.hero-card__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}


@media screen and (min-width: 768px) {
  .splide-hero {
    width: 100vw;
    margin-left: -20px;
    margin-bottom: 90.4px;
  }

  .hero-card__box {
    width: 419px;
    left: 195px;
    transform: translateY(-50%);
  }

  .hero-card__box--an {
    left: auto;
    right: 195px;
  }
}

/* 日常のお手入れ */
.daily-care-section {
  max-width: 950px;
  margin: 56px auto 65px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  justify-content: center;
}
.daily-care__ttl {
  width: 126px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #979998;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
}
.daily-care__contents-wrap > p {
  margin: 0 0 24px;
}
.daily-care__contents-inner-wrap {
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 768px) {
  .daily-care-section {
    grid-template-columns: auto auto;
  }
  .daily-care__ttl {
    margin-inline: 0;
  }
  .daily-care__contents-wrap > p {
    margin: 0 0 13px;
  }
  .daily-care__contents-inner-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* CFシート-P NW スライダー */
.splide_p {
  width: 100vw;
  height: auto;
  margin-left: calc(50% - 50vw);
  margin-bottom: 72px;
}
.splide_p-bg {
  position: relative;
  z-index: -1;
  height: 327.8px;
  object-fit: cover;
}
.splide_p-bg + .p-card__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}


@media screen and (min-width: 768px) {
  .splide_p-bg {
    height: auto;
  }
  .splide_p-bg + .p-card__box {
    width: 419px;
    left: 195px;
    transform: translateY(-50%);
  }
}

/* スタイルラインアップ */
.lineup-style__headarea {
  text-align: center;
  font-weight: 600;
  margin-bottom: 40px;
}
.lineup-style__heading {
  font-size: 24px;
  line-height: 32px;
}
.lineup-style__heading + p {
  font-size: 12px;
  line-height: 19px;
  text-align: left;
}
ul.lineup-style__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lineup-style__item {
  display: block;
}
.lineup-style__item--sm {
  max-width: 868px;
  margin-inline: auto;
}
.lineup-style__item + .lineup-style__item {
  margin-top: 64px;
}
figure.lineup-style__img {
  position: relative;
  width: 100%;
  height: 64vw;
  margin: 0;
}
.lineup-style__img img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: cover;
  transition: opacity .5s cubic-bezier(.39, .575, .565, 1);
  opacity: 0;
}
.lineup-style__img img[data-image-id*="default"] {
  opacity: 1;
}
.lineup-style__item.reversed > .lineup-style__img {
  order: 1;
}
.lineup-style__item.lineup-style__item--sm.reversed > .lineup-style__img {
  width: 100%;
}
.lineup-style__option-block {
  margin-top: -1px;
  padding: 58px 40px;
}
.lineup-style__item.reversed > .lineup-style__option-block {
  margin-left: 0;
  padding: 74px 40px;
  justify-content: flex-start;
}
.lineup-style__item.reversed > .lineup-style__option-inner {
  margin-right: 0;
}
.lineup-style__option-block--natural {
  background-color: #d8ded2;
  color: #2e683a;
}
.lineup-style__option-block--natural button {
  color: #2e683a;
}
.lineup-style__option-block--simple {
  background-color: #eaf2f9;
  color: #2c90c3;
}
.lineup-style__option-block--simple button {
  color: #2c90c3;
}
.lineup-style__option-block--vintage {
  background-color: #d9d5d0;
  color: #5b4e42;
}
.lineup-style__option-block--vintage button {
  color: #5b4e42;
}
.lineup-style__option-heading {
  width: 246px;
  height: 72px;
  margin: 0 0 8px;
}
.lineup-style__option-headarea > p {
  font-size: 20px;
  font-weight: 300;
  line-height: 23px;
  letter-spacing: 2px;
  margin: 0 0 32px;
}
ul.lineup-style__option-list {
  list-style: none;
  padding: 0;
}
.lineup-style__option-item + .lineup-style__option-item {
  margin-top: 8px;
}
.lineup-style__option-item > button {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 300;
  line-height: 150%;
  text-align: left;
  text-decoration-line: underline;
  position: relative;
  cursor: pointer;
  padding: 0;
}
@media (any-hover: hover) and (pointer: fine) {
  .lineup-style__option-item > button:hover {
    opacity: .9;
  }
}
.lineup-style__option-block--natural .lineup-style__option-item > button:after {
  content: "";
  background-image: url("../img/common/arrow_style-natural.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
}
.lineup-style__option-block--simple .lineup-style__option-item > button:after {
  content: "";
  background-image: url("../img/common/arrow_style-simple.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
}
.lineup-style__option-block--vintage .lineup-style__option-item > button:after {
  content: "";
  background-image: url("../img/common/arrow_style-vintage.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
}

@media screen and (min-width: 768px) {
  .lineup-style__heading {
    font-size: 24px;
    line-height: 23px;
  }
  .lineup-style__heading + p {
    text-align: center;
  }
  .lineup-style__item {
    display: flex;
  }
  .lineup-style__item + .lineup-style__item {
    margin-top: 64px;
  }
  figure.lineup-style__img {
    min-width: 56%;
    height: auto;
    position: relative;
    margin: 0;
  }
  .lineup-style__img img {
    object-fit: contain;
  }
  .lineup-style__item.reversed > .lineup-style__img {
    order: 1;
    margin-left: -16%;
  }
  .lineup-style__item.lineup-style__item--sm.reversed > .lineup-style__img {
    min-width: 52%;
    margin-left: -21%;
  }
  .lineup-style__option-block {
    padding: 58px 40px;
    min-width: 60%;
    height: 340px;
    margin-top: 120px;
    margin-left: -16%;
    display: flex;
    justify-content: flex-end;
  }
  .lineup-style__item.lineup-style__item--sm.reversed > .lineup-style__option-block {
    min-width: 69%;
    margin-top: 186px;
  }
}

/* 柄ラインアップ */
.lineup-pattern-name {
  font-size: 32px;
  font-weight: 700;
  line-height: 23px;
  background: none;
  margin-bottom: 72px;
  padding-bottom: 0;
}

.sec-subttl--lg {
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  margin-right: 16px;
}

@media (any-hover: hover) and (pointer: fine) {
  .lineup-img:not(.no-hover) img:hover {
    transform: scale(1.1);
  }
}

@media screen and (min-width: 768px) {
  .sec-subttl--lg {
    line-height: 23px;
  }
}

/* ラインアップ モーダル */
.modal-lineup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e1e1df;
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity .3s ease;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
  padding: 30px;
}
.modal-lineup--natural {
  background-color: #d8ded2;
}
.modal-lineup--simple {
  background-color: #eaf2f9;
}
.modal-lineup--vintage {
  background-color: #d9d5d0;
}
.modal-lineup.is-open {
  display: block;
  opacity: 1;
}
.modal-lineup__close-area > button.modal-close {
  display: block;
  width: 40px;
  height: 40px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 999;
  padding: 0;
}
.modal-lineup__close-area > button.modal-close > img {
  width: 40px;
  height: 40px;
}
.modal-lineup__contents {
  width: 100%;
  height: calc(100% - 40px);
  padding: 20px;
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal-lineup__name {
  font-size: 42px;
  font-weight: 500;
  margin: 0;
  margin-top: 20px;
}
.modal-lineup__name--style {
  width: 246px;
  height: 72px;
}
.splide_style .modal-lineup__name--style > img {
  margin-top: 0;
}
.modal-lineup__hash {
  margin-top: 16px;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.5;
}
.modal-lineup__hash--natural {
  color: #2e683a;
}
.modal-lineup__hash--simple {
  color: #2c90c3;
}
.modal-lineup__hash--vintage {
  color: #5b4e42;
}
.modal-lineup__desc-wrap {
  margin-top: 8px;
}
.modal-lineup__txt {
  font-size: 14px;
}
.modal-lineup__product-name {
  font-size: 21px;
  font-weight: 500;
  line-height: 23px;
  font-family: "Noto Sans JP", sans-serif;
}
.modal-lineup__btn {
  display: inline-block;
  padding: 12px 70px 12px 16px;
  background: #fff;
  border: 1px solid #1c3638;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  height: fit-content;
}
.modal-lineup__btn span {
  position: relative;
  z-index: 999;
  color: #fff;
  transition: color 0.5s ease;
}
.modal-lineup__btn::before {
  content: "";
  height: 100%;
  width: 100%;
  background-color: #1c3638;
  position: absolute;
  top: 0;
  right: 0;
  transition: width 0.5s ease;
}
.modal-lineup__btn:after {
  content: "";
  background-image: url(../img/common/arrow_right.svg);
  background-color: none;
  background-repeat: no-repeat;
  background-size: contain;
  width: 23px;
  height: 10px;
  position: absolute;
  top: 50%;
  right: 21px;
  transform: translateY(-50%);
  transition: background-image 0.5s ease;
}
@media (any-hover: hover) and (pointer: fine){
  .modal-lineup__btn:hover span {
    color: #1c3638;
  }
  .modal-lineup__btn:hover::before {
    width: 0;
  }
  .modal-lineup__btn:hover:after {
    content: "";
    background-image: url(../img/common/arrow_right_hover.svg);
    background-color: none;
    background-repeat: no-repeat;
    background-size: contain;
    width: 23px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 21px;
    transform: translateY(-50%);
  }
}
.modal-lineup__product-num {
  font-size: 18px;
  font-weight: 500;
  line-height: 23px;
  margin-bottom: 30px;
}
.modal-lineup__label {
  color: #f00;
  margin-left: 16px;
}

/* スタイル */
.splide_style {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.splide_style img {
  margin-top: 24px;
  max-height: calc(100vh - 300px);
  object-fit: contain;
}
.splide_style .splide__arrow {
  background: none;
  top: calc(50% + 182px);
}
.splide_style .splide__arrow--prev {
  background-image: url(../img/common/arrow_prev.svg);
  background-color: none;
  background-repeat: no-repeat;
  background-size: contain;
  width: 21px;
  height: 40px;
  left: -24px;
  z-index: 9999;
}
.splide_style .splide__arrow--next {
  background-image: url(../img/common/arrow_next.svg);
  background-color: none;
  background-repeat: no-repeat;
  background-size: contain;
  width: 21px;
  height: 40px;
  right: -24px;
  z-index: 9999;
}
.splide_style .splide__arrow svg {
  display: none;
}

/* 木目柄 */
.splide_pattern {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.splide_pattern img {
  margin-top: 24px;
  max-height: calc(100vh - 300px);
  object-fit: contain;
}
.splide_pattern .splide__arrow {
  background: none;
  top: auto;
  transform: translateY(0);
  bottom: calc(50% - 24vw);
}
.splide_pattern .splide__arrow--prev {
  background-image: url(../img/common/arrow_prev.svg);
  background-color: none;
  background-repeat: no-repeat;
  background-size: contain;
  width: 21px;
  height: 40px;
  left: -24px;
  z-index: 9999;
}
.splide_pattern .splide__arrow--next {
  background-image: url(../img/common/arrow_next.svg);
  background-color: none;
  background-repeat: no-repeat;
  background-size: contain;
  width: 21px;
  height: 40px;
  right: -24px;
  z-index: 9999;
}
.splide_pattern .splide__arrow svg {
  display: none;
}

@media screen and (min-width: 768px) {
  .modal-lineup__contents {
    padding: 20px;
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .modal-lineup__contents--style {
    padding: 0;
  }
  .modal-lineup__desc-wrap {
    display: flex;
    justify-content: space-between;
  }
  .modal-lineup__name {
    margin: 0;
  }
  .modal-lineup__txt {
    margin: 0;
  }
  .modal-lineup__close-area {
    width: 70%;
    margin-inline: auto;
    margin-top: 16px;
  }
  .splide_style .splide__arrow {
    top: calc(50% + 96px);
  }
  .splide_pattern .splide__arrow {
    top: auto;
    bottom: calc(50% - 66px);
    transform: translateY(50%);
  }
  .splide_pattern .splide__arrow--prev {
    width: 42px;
    height: 80px;
    left: -4em;
  }
  .splide_pattern .splide__arrow--next {
    width: 42px;
    height: 80px;
    right: -4em;
  }
}

/* 特徴 */
.feature__highlight {
  font-size: 23px;
  font-weight: 700;
  line-height: 40px; 
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .feature__highlight {
    line-height: 23px;
  }
}

.feature__ttl-icon {
  width: 122px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #D59F7B;
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 150%;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 24px;
}

.feature__ttl-icon--sd {
  background-color: #8dab8c;
}

.feature__test-ttl {
  font-size: 19px;
  font-weight: 700;
  line-height: 150%;
  margin: 11px 0 0;
}

.feature__test-ttl::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #D59F7B;
  display: inline-block;
  margin-right: 7px;
}

.feature-txt {
  font-size: 15px;
  font-weight: 500;
  line-height: 150%;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .feature__ttl-icon {
    margin: 0;
  }
}

/* ペットオススメ */
.feature01__list {
  list-style: none;
  padding: 0;
}

.feature01__item + .feature01__item {
  margin-top: 47px;
}


.feature01__contents-wrap + .text-link1 {
  margin-top: 26px;
}

.feature01__movie {
  max-width: 576px;
  aspect-ratio: 16/9;
  margin: auto;
  margin-top: 31px;
  position: relative;
  overflow: hidden;
}

.feature01__movie > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.feature01__area {
  margin-top: 26px;
  text-align: center;
}

.feature01__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  border-radius: 50px;
  background: #000; 
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  padding: 17px 32px;
  opacity: 1;
  transition: opacity .3s;
}

@media (any-hover: hover) and (pointer: fine){
  .feature01__button:hover {
    opacity: .9;
  }
}


.feature01__text {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%; 
}

.feature__text--highlight {
  color: #4C54A3;
  font-weight: 700;
}

.feature01__deodorant-test-list {
  margin-top: 14px;
  list-style: none;
  padding: 0;
}

.feature01__deodorant-test-item + .feature01__deodorant-test-item {
  margin-top: 16px;
}

.feature01__deodorant-test-list img {
  max-width: 180px;
}

.feature01__deodorant-test-result > span {
  display: block;
  font-weight: 600;
  line-height: 24px;
}
.feature01__deodorant-test-result > span:nth-child(1) {
  font-size: 20px;
}
.feature01__deodorant-test-result > span:nth-child(2) {
  font-size: 16px;
}
.feature01__deodorant-test-result > span:nth-child(3) {
  font-size: 18px;
}
.feature01__text-num {
  color: #000;
  font-family: "DIN Condensed";
  font-size: 28px;
  font-weight: 400;
  line-height: 39px;
}

@media screen and (min-width: 768px) {
  .feature01__contents-wrap {
    display: grid;
    grid-template-columns: 122px 1fr;
    gap: 19px;
  }

  .feature01__scratch-test-wrap {
    display: grid;
    grid-template-columns: 22% 22% 50%;
    gap: 16px;
    margin-top: 15px;
  }

  .feature01__deodorant-test-list {
    display: grid;
    grid-template-columns: 169px 206px 169px 205px;
    gap: 24px;
    margin-top: 14px;
    padding: 0;
  }

  .feature01__deodorant-test-item + .feature01__deodorant-test-item {
    margin: 0;
  }

  .feature01__deodorant-test-list img {
    max-width: none;
  }
}

/*  NW・土足OK */

.feature__ttl-icon .feature__ttl-icon--sm {
  font-size: 14px;
  display: block;
}

.feature02-nw__headarea {
  display: grid;
  grid-template-columns: 121px 1fr;
  gap: 20px;
  align-items: center;
}

.feature02__desc {
  font-size: 15px;
  font-weight: 500;
  line-height: 150%
}

.feature02__desc--sm {
  font-size: 12px;
  font-weight: 500;
  line-height: 150%
}

.heel-mark-test__wrap {
  margin-top: 9px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.heel-mark-test__pattern-item {
  text-align: center;
}

.heel-mark-test__pattern-item > p {
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
}
.heel-mark-test__pattern-name {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
}

.heel-mark-test__pattern-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.feature02-shoe__wrap {
  display: grid;
  grid-template-columns: 121px 1fr;
  gap: 20px;
}

.feature02-shoe__wrap > .feature02__desc > p {
  margin-top: 35px;
  margin-bottom: 25px;
}

.feature02-shoe__img-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media screen and (min-width: 768px) {
  .feature02_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 51px;
  }
}

/* 床暖房 */
.floor-heating__contents-wrap {
  max-width: 375px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  justify-content: center;
  align-items: center;
}

.floor-heating__link {
  color: #0038FF;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
  text-decoration-line: underline;
}

@media (any-hover: hover) and (pointer: fine){
  .floor-heating__link:hover {
    opacity: .9;
  }
}

button:disabled {
  cursor: not-allowed;
}

.hero-wrap {
  width: 100vw;
  margin-left: -1.428571rem;
  margin-bottom: 32px;
  position: relative;


}

.hero-wrap .hero-card__box {
  width: 55%;
}

@media screen and (min-width: 768px) {
  .hero-wrap .hero-card__box {
    width: 419px;
  }
}

.sd-feature__contents-wrap {
  margin-bottom: 5.714286rem;
}

@media screen and (min-width: 768px) {
  .sd-feature__contents-wrap {
    display: grid;
    grid-template-columns: 122px 1fr;
    gap: 19px;
  }

  .sd-feature-04__img {
    max-width: 566px;
    margin-inline: auto;
  }
}

.mouse-stalker-icon {
  position: fixed;
  width: 100px;
  height: 100px;
  pointer-events: none; /* カーソルイベントを無視 */
  opacity: 0; /* 初期状態では非表示 */
  transition: opacity 0.5s ease; /* フェードイン・フェードアウトのトランジション */
}