@charset "UTF-8";
/*! ==================================================
※※※※※※※※※※※※※※※※※※※※※※※※※
このCSSファイルはSassから生成されていますので、
編集しないようご注意ください。
※※※※※※※※※※※※※※※※※※※※※※※※※
==================================================== */
html {
  scroll-behavior: smooth;
  font-size: calc(100vw / 75);
}

@media (min-width: 750px) {
  html {
    font-size: 62.5%;
  }
}

body {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  color: #333;
  background-color: #fff;
}

.wrapper {
  position: relative;
  overflow-x: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}

header,
main,
aside,
footer {
  max-width: 75rem;
  margin: 0 auto;
}

main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

a,
button {
  outline: none;
  -webkit-transition: .3s ease;
  transition: .3s ease;
}

/*a:hover, a:focus,
button:hover,
button:focus {
  opacity: .7;
}*/

img {
  pointer-events: none;
  max-width: 100%;
  vertical-align: bottom;
}

.container {
  max-width: 100%;
  padding: 0 3rem;
  margin: 0 auto;
}

.instagram-link {
  display: block;
}

.instagram-link img {
  width: 4rem;
  height: 4rem;
}

.twitter-link {
  display: block;
}

.twitter-link img {
  width: 4.5rem;
  height: 3.8rem;
}

.line-link {
  display: block;
}

.line-link img {
  width: 5rem;
  height: 4.9rem;
}

.youtube-link {
  display: block;
}

.youtube-link img {
  width: 5.2rem;
  height: 5.3rem;
}

.shop-link {
  display: block;
  height: 4rem;
  padding: calc((4rem - 1.9rem) / 2) 0;
}

.shop-link img {
  width: 6.1rem;
  height: 1.9rem;
}

.page-top-btn {
  display: none;
  position: fixed;
  right: 2.1rem;
  bottom: 2.1rem;
}

.page-top-btn a {
  display: block;
  border-radius: 50%;
}

.page-top-btn a img {
  width: 7.3rem;
  height: 7.3rem;
}

.headline {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.headline span:not(:last-of-type) {
  margin-right: .7rem;
}

.headline span.space {
  width: 1rem;
  height: 2rem;
  margin: 0;
}

.headline span.a img {
  width: 1.6rem;
  height: 2rem;
}

.headline span.c img {
  width: 1.6rem;
  height: 2rem;
}

.headline span.e img {
  width: 1rem;
  height: 1.9rem;
}

.headline span.g img {
  width: 1.9rem;
  height: 2rem;
}

.headline span.i img {
  width: .3rem;
  height: 1.9rem;
}

.headline span.l img {
  width: .9rem;
  height: 1.9rem;
}

.headline span.m img {
  width: 1.9rem;
  height: 2rem;
}

.headline span.n img {
  width: 1.5rem;
  height: 2rem;
}

.headline span.o img {
  width: 2rem;
  height: 1.9rem;
}

.headline span.p img {
  width: 1rem;
  height: 1.9rem;
}

.headline span.r img {
  width: 1.2rem;
  height: 1.9rem;
}

.headline span.s img {
  width: 1.1rem;
  height: 2rem;
}

.headline span.t img {
  width: 1.2rem;
  height: 1.9rem;
}

.headline span.u img {
  width: 1.4rem;
  height: 1.9rem;
}

.headline-border {
  display: block;
  width: 4.1rem;
  margin: 1.9rem 0 2.4rem;
  border-bottom: 1px solid #b3ab9f;
}

.store-btn {
  display: inline-block;
}

.store-btn img {
  width: 42.3rem;
  height: 7.4rem;
}

.loading {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #ffcbc7;
  text-align: center;
  color: #fff;
}

.loading-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.loading .brand-logo {
  margin-bottom: 4.2rem;
}

.loading .brand-logo img {
  width: 50.8rem;
  height: 10.6rem;
}

.loading .splash-logo {
  opacity: 0;
  margin-bottom: 2.7rem;
}

.loading .splash-logo svg {
  width: 28.8rem;
}

.loading .special-logo {
  opacity: 0;
}

.loading .special-logo img {
  width: 20.2rem;
  height: 8.7rem;
}

#mask path {
  fill-opacity: 0;
  -webkit-transition: fill-opacity .5s;
  transition: fill-opacity .5s;
  fill: none;
  stroke: #fff;
}

#mask.done path {
  fill-opacity: 1;
  fill: #fff;
  stroke: none;
}

.animate {
  opacity: 0;
}

.animated.fadeIn {
  -webkit-animation: fadeIn .5s ease forwards;
          animation: fadeIn .5s ease forwards;
  opacity: 0;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animated.fadeInUp {
  -webkit-animation: fadeInUp .5s ease forwards;
          animation: fadeInUp .5s ease forwards;
  opacity: 0;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.animated.fadeInLeft {
  -webkit-animation: fadeInLeft .5s ease forwards;
          animation: fadeInLeft .5s ease forwards;
  opacity: 0;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-3rem);
            transform: translateX(-3rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-3rem);
            transform: translateX(-3rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.animated.rotated {
  -webkit-animation: rotated 10s linear infinite;
          animation: rotated 10s linear infinite;
}

@-webkit-keyframes rotated {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@keyframes rotated {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

.animated > .chain-animate.fadeInUp {
  -webkit-animation: fadeInUp .5s ease forwards;
          animation: fadeInUp .5s ease forwards;
  opacity: 0;
}

.animated > .chain-animate.fadeInLeft {
  -webkit-animation: fadeInLeft .5s ease forwards;
          animation: fadeInLeft .5s ease forwards;
  opacity: 0;
}

.animated > .chain-animate.slideUp {
  -webkit-animation: slideUp .5s ease forwards;
          animation: slideUp .5s ease forwards;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

@-webkit-keyframes slideUp {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.animated > .chain-animate.fadeIn {
  -webkit-animation: fadeIn .5s ease forwards;
          animation: fadeIn .5s ease forwards;
  opacity: 0;
}

.animate-delay[data-delay="0.1s"] {
  -webkit-animation-delay: .1s !important;
          animation-delay: .1s !important;
}

.animate-delay[data-delay="0.2s"] {
  -webkit-animation-delay: .2s !important;
          animation-delay: .2s !important;
}

.animate-delay[data-delay="0.3s"] {
  -webkit-animation-delay: .3s !important;
          animation-delay: .3s !important;
}

.animate-delay[data-delay="0.4s"] {
  -webkit-animation-delay: .4s !important;
          animation-delay: .4s !important;
}

.animate-delay[data-delay="0.5s"] {
  -webkit-animation-delay: .5s !important;
          animation-delay: .5s !important;
}

.animate-delay[data-delay="0.6s"] {
  -webkit-animation-delay: .6s !important;
          animation-delay: .6s !important;
}

.animate-delay[data-delay="0.7s"] {
  -webkit-animation-delay: .7s !important;
          animation-delay: .7s !important;
}

.animate-delay[data-delay="0.8s"] {
  -webkit-animation-delay: .8s !important;
          animation-delay: .8s !important;
}

.animate-delay[data-delay="0.9s"] {
  -webkit-animation-delay: 0.9s !important;
          animation-delay: 0.9s !important;
}

.animate-delay[data-delay="1s"] {
  -webkit-animation-delay: 1s !important;
          animation-delay: 1s !important;
}

.animate-delay[data-delay="1.1s"] {
  -webkit-animation-delay: 1.1s !important;
          animation-delay: 1.1s !important;
}

.animate-delay[data-delay="1.2s"] {
  -webkit-animation-delay: 1.2s !important;
          animation-delay: 1.2s !important;
}

.animate-delay[data-delay="1.3s"] {
  -webkit-animation-delay: 1.3s !important;
          animation-delay: 1.3s !important;
}

.animate-delay[data-delay="1.4s"] {
  -webkit-animation-delay: 1.4s !important;
          animation-delay: 1.4s !important;
}

.animate-delay[data-delay="1.5s"] {
  -webkit-animation-delay: 1.5s !important;
          animation-delay: 1.5s !important;
}

.animate-delay[data-delay="2s"] {
  -webkit-animation-delay: 2s !important;
          animation-delay: 2s !important;
}

.header {
  position: absolute;
  z-index: 99;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 0;
  max-width: 75rem;
  width: 100%;
  padding: 3.1rem 0;
	border-bottom: #BABABA solid 1px;
}

.header .container-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header__logo {
  display: inline-block;
}

.header__logo img {
  width: 26.5rem;
  height: 6.7rem;
}

.header__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header__list li:not(:last-of-type) {
  margin-right: 4rem;
}

.fv .img-area {
  margin: 0 -3rem;
}

.fv__img img {
  width: 75rem;
  height: 118.5rem;
}

.contents {
  padding: 9.3rem 0 10.4rem;
}

.contents__head {
  text-align: center;
  margin-bottom: 7.6rem;
}

.contents__head img {
  width: 16rem;
  height: 2rem;
}

.contents__nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.contents__nav ul li {
  min-width: 50%;
  padding-left: 3rem;
}

.contents__nav ul li:nth-of-type(n + 3) {
  margin-top: 5rem;
}

.contents .contents-link {
  display: inline-block;
}

.contents .contents-link_campaign img {
  width: 28.4rem;
  height: 2.3rem;
}

.contents .contents-link_lineup img {
  width: 21.8rem;
  height: 2.3rem;
}

.contents .contents-link_new-color img {
  width: 13rem;
  height: 2.2rem;
}

.contents .contents-link_sp-contents img {
  width: 26.1rem;
  height: 2.2rem;
}

.contents .contents-link_questionnaire img {
  width: 61.1rem;
  height: 2.8rem;
}


.campaign {
  padding: 14.5rem 0 7.2rem;
}

.campaign__head {
  position: relative;
  margin-bottom: 6.5rem;
}

.campaign__head::before {
  position: absolute;
  left: -20.5rem;
  top: -20.5rem;
  content: '';
  width: 48.3rem;
  height: 43.9rem;
  background: url("../img/campaign-head-bg.png") no-repeat center/contain;
}

.campaign__head img {
  width: 43.1rem;
  height: 3.8rem;
}

.campaign-list {
  margin: 0 -.9rem;
}

.campaign-list li:not(:last-of-type) {
  margin-bottom: 4.3rem;
}

.campaign__img {
  position: relative;
}

.campaign__img--twitter > img {
  width: 70.8rem;
  height: 51.9rem;
}

.campaign__img--instagram {
  margin-bottom: 2.9rem;
}

.campaign__img--instagram > img {
  width: 70.8rem;
  height: 67.9rem;
}

.campaign__btn {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 7rem;
  display: block;
}

.campaign__btn--twitter {
  width: 47.6rem;
}

.campaign__btn--twitter img {
  width: 47.6rem;
  height: 8.2rem;
}

.campaign__btn--instagram {
  width: 54.2rem;
}

.campaign__btn--instagram img {
  width: 54.2rem;
  height: 8.2rem;
}

.campaign .btn-wrap {
  text-align: center;
}

.campaign .terms-btn {
  display: inline-block;
}

.campaign .terms-btn img {
  width: 47.8rem;
  height: 7.2rem;
}

.campaign-period {
  text-align: center;
  margin-bottom: 6.3rem;
}

.campaign-period img {
  width: 68.6rem;
  height: 11.4rem;
}

.thanks {
  padding: 9rem 0 11.5rem;
}

.thanks__head {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 8rem;
}

.thanks__head span {
  height: 3.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.thanks__head span:not(:last-of-type) {
  margin-right: .8rem;
}

.thanks__head span.i img {
  width: 3.3rem;
  height: 2.3rem;
}

.thanks__head span.tu img {
  width: 3.5rem;
  height: 2.2rem;
}

.thanks__head span.mo img {
  width: 2.7rem;
  height: 3.4rem;
}

.thanks__head span.go img {
  width: 3rem;
  height: 3.4rem;
}

.thanks__head span.ai img {
  width: 3.8rem;
  height: 3.8rem;
}

.thanks__head span.kou img {
  width: 3.9rem;
  height: 3.7rem;
}

.thanks__head span.a img {
  width: 3.1rem;
  height: 3.2rem;
}

.thanks__head span.ri img {
  width: 2rem;
  height: 3.4rem;
}

.thanks__head span.ga img {
  width: 3.7rem;
  height: 3.2rem;
}

.thanks__head span.to img {
  width: 2.2rem;
  height: 3.3rem;
}

.thanks__head span.u img {
  width: 2.1rem;
  height: 3.4rem;
}

.thanks__head span.za img {
  width: 3.2rem;
  height: 3.6rem;
}

.thanks__head span.ma img {
  width: 2.7rem;
  height: 3.4rem;
}

.thanks__head span.su img {
  width: 3.3rem;
  height: 3.4rem;
}

.thanks__ttl {
  text-align: center;
  margin-bottom: 6.2rem;
}

.thanks__ttl img {
  width: 62.8rem;
  height: 39.5rem;
}

.thanks__img {
  text-align: center;
}

.thanks__img img {
  width: 63.2rem;
  height: 41.1rem;
}

.new-color {
  padding: 9.1rem 0 14.6rem;
  background: url("../img/newColor-bg.jpg") center top/cover;
}

.new-color__head {
  margin: 0 -.3rem 2rem;
}

.new-color__head img {
  width: 69.6rem;
  height: 17.5rem;
}

.new-color__img {
  text-align: center;
  margin-bottom: 10rem;
}

.new-color__img > img {
  width: 67rem;
  height: 67rem;
}

.new-color__img .img-caption {
  margin-top: 1.2rem;
}

.new-color__img .img-caption img {
  width: 47.1rem;
  height: 1.9rem;
}

.new-color .img-wrap {
  position: relative;
  z-index: 0;
}

.new-color .circle-budge {
  position: absolute;
  z-index: -1;
  left: -1.5rem;
  top: -2.6rem;
  content: '';
  width: 20.2rem;
  height: 19.7rem;
  background: url("../img/newColor-budge.png") no-repeat center/contain;
}

.new-color__ttl {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.new-color__ttl span:not(:last-of-type) {
  margin-right: 1.6rem;
}

.new-color__ttl span.n img {
  width: 2.6rem;
  height: 2.6rem;
}

.new-color__ttl span.e img {
  width: 1.9rem;
  height: 2.6rem;
}

.new-color__ttl span.w img {
  width: 3.6rem;
  height: 2.6rem;
}

.new-color__ttl span.space {
  width: 1.6rem;
  height: 2.7rem;
}

.new-color__ttl span.c img {
  width: 2.2rem;
  height: 2.7rem;
}

.new-color__ttl span.o img {
  width: 2.5rem;
  height: 2.7rem;
}

.new-color__ttl span.l img {
  width: 2rem;
  height: 2.6rem;
}

.new-color__ttl span.r img {
  width: 2.3rem;
  height: 2.6rem;
}

.new-color .ttl-border {
  display: block;
  width: 3.6rem;
  border-bottom: 1px solid #86606c;
  margin: 2.3rem auto 2.9rem;
}

.new-color__txt {
  text-align: center;
  margin-bottom: 7.2rem;
}

.new-color__txt img {
  width: 60.8rem;
  height: 3.2rem;
}

.new-color__content {
  text-align: center;
  margin-bottom: 7.6rem;
}

.new-color__content img {
  width: 58.1rem;
  height: 45rem;
}

.new-color .btn-wrap {
  text-align: center;
}

.media {
  position: relative;
  padding: 4.7rem 0 13.6rem;
  background: url("../img/media-bg.jpg") center bottom/cover;
}

.media::before {
  position: absolute;
  z-index: 0;
  top: 0;
  content: '';
  width: 100%;
  height: 143.4rem;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, white), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(white 60%, rgba(255, 255, 255, 0));
}

.media .container {
  position: relative;
  z-index: 1;
}

.media__head {
  text-align: center;
  margin-bottom: 3.8rem;
}

.media__head img {
  width: 48rem;
  height: 8.6rem;
}

.media-list {
  margin: 0 -3rem 12.7rem;
}

.media-list li {
  padding: 0 2.5rem;
}

.media__img img {
  width: 53.5rem;
  height: 73.1rem;
}

.media__accordion {
  margin-bottom: 6rem;
}

.media__accordion .accordion-btn {
  position: relative;
  display: inline-block;
  padding: 0;
  border: none;
  cursor: pointer;
}

.media__accordion .accordion-btn::before {
  position: absolute;
  left: -1.6rem;
  top: -6.1rem;
  content: '';
  width: 16rem;
  height: 9.4rem;
  background: url("../img/accordion-btn-txt.png") no-repeat center/contain;
}

.media__accordion .accordion-btn img {
  width: 69rem;
  height: 10rem;
}

.media__accordion .accordion-content {
  display: none;
  text-align: right;
  margin-top: -.3rem;
}

.media__accordion .accordion-content img {
  width: 67rem;
  height: 153.3rem;
}

.media .btn-wrap {
  text-align: center;
}

.slick-prev, .slick-next {
  position: absolute;
  z-index: 3;
  top: 50%;
  cursor: pointer;
  outline: none;
  border-top: 2px solid #cbbb87;
  border-right: 2px solid #cbbb87;
  height: 2.7rem;
  width: 2.7rem;
}

.slick-prev {
  left: 7.7rem;
  -webkit-transform: translateY(-50%) rotate(-135deg);
          transform: translateY(-50%) rotate(-135deg);
}

.slick-next {
  right: 7.7rem;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}

.slick-dots {
  text-align: center;
  margin-top: 2.1rem;
}

.slick-dots li {
  display: inline-block;
  padding: 0;
}

.slick-dots li:not(:last-of-type) {
  margin-right: 1rem;
}

.slick-dots li button {
  display: block;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  padding: 0;
  color: transparent;
  background-color: transparent;
  border: 1px solid #cbbb87;
  outline: none;
}

.slick-dots .slick-active button {
  background-color: #cbbb87;
}

.lineup {
  padding: 14.3rem 0 5.8rem;
}

.lineup__head {
  position: relative;
  margin-bottom: 8.7rem;
}

.lineup__head::before {
  position: absolute;
  left: -18.5rem;
  top: -12.3rem;
  content: '';
  width: 37.6rem;
  height: 30.4rem;
  background: url("../img/lineup-head-bg.png") no-repeat center/contain;
}

.lineup__head img {
  width: 31.5rem;
  height: 3.9rem;
}

.lineup-content:not(:last-of-type) {
  margin-bottom: 12.3rem;
}

.lineup-list li:not(:last-of-type) {
  margin-bottom: 12.3rem;
}

.lineup__ttl {
  text-align: center;
  margin-bottom: -10.6rem;
}

.lineup__ttl img {
  width: 29rem;
  height: 32.6rem;
}

.lineup__logo {
  text-align: center;
  margin-bottom: 3.5rem;
}

.lineup__logo--natural img {
  width: 35.1rem;
  height: 11rem;
}

.lineup__logo--uv img {
  width: 35.1rem;
  height: 13.6rem;
}

.lineup__logo--color img {
  width: 35.1rem;
  height: 7.4rem;
}

.lineup__logo--moist img {
  width: 35.1rem;
  height: 12.2rem;
}

.lineup__logo--luquage img {
  width: 35.1rem;
  height: 10.1rem;
}

.lineup__img {
  margin-right: -1rem;
  margin-bottom: 3rem;
}

.lineup__img img {
  width: 70rem;
  height: 44.5rem;
}

.lineup .btn-wrap {
  text-align: center;
}

.lineup .more-btn {
  display: inline-block;
  border-radius: 2.5rem;
}

.lineup .more-btn img {
  width: 22.7rem;
  height: 5rem;
}

.sp-contents {
  padding: 9.1rem 0 9.9rem;
}

.sp-contents__head {
  position: relative;
  margin-bottom: 4.4rem;
}

.sp-contents__head::before {
  position: absolute;
  left: -5rem;
  top: -14.5rem;
  content: '';
}

.sp-contents__head img {
  width: 39.4rem;
  height: 3.1rem;
}

.sp-contents .img-area {
  margin: 0 -3rem;
}

.sp-contents-01__head::before {
  width: 14.3rem;
  height: 11.7rem;
  background: url("../img/spContents01-num.png") no-repeat center/contain;
}

.sp-contents-01__img {
  margin-bottom: 3.4rem;
}

.sp-contents-01__img img {
  width: 75rem;
  height: 61.1rem;
}

.sp-contents-01-nav ul li {
  text-align: center;
}

.sp-contents-01-nav ul li:not(:last-of-type) {
  margin-bottom: 3.7rem;
}

.sp-contents-01__btn {
  display: inline-block;
}

.sp-contents-01__btn img {
  width: 61.6rem;
  height: 8.3rem;
}

.sp-contents-01-content {
  padding-top: 8rem;
}

.sp-contents-01-content#blue-bace {
  padding-top: 10.5rem;
  margin-bottom: 8.6rem;
}

.sp-contents-01__ttl {
  text-align: center;
  margin-bottom: 4.1rem;
}

.sp-contents-01__ttl--yellow img {
  width: 47.9rem;
  height: 9.6rem;
}

.sp-contents-01__ttl--blue img {
  width: 36.7rem;
  height: 9.6rem;
}

.sp-contents-01__list li:not(:last-of-type) {
  margin-bottom: 3.3rem;
}

.sp-contents-01 .content-link {
  display: block;
}

.sp-contents-01 .content-img {
  text-align: center;
}

.sp-contents-01 .content-img img {
  width: 66.1rem;
  height: 25.2rem;
}

.sp-contents-01__txt {
  text-align: center;
}

.sp-contents-01__txt img {
  width: 63rem;
  height: 57.6rem;
}

.sp-contents-02 {
  padding-bottom: 3.8rem;
}

.sp-contents-02__head::before {
  width: 16.5rem;
  height: 11.7rem;
  background: url("../img/spContents02-num.png") no-repeat center/contain;
}

.sp-contents-02__img {
  margin-bottom: 4.9rem;
}

.sp-contents-02__img img {
  width: 75rem;
  height: 78.9rem;
}

.sp-contents-02__lead {
  text-align: center;
  margin-bottom: 7.9rem;
}

.sp-contents-02__lead img {
  width: 61.2rem;
  height: 35.6rem;
}

.sp-contents-02__ttl {
  margin-bottom: -3rem;
}

.sp-contents-02__ttl--1 img {
  width: 56.5rem;
  height: 12.6rem;
}

.sp-contents-02__ttl--2 img {
  width: 50.1rem;
  height: 12.5rem;
}

.sp-contents-02__txt {
  text-align: center;
  margin-bottom: 6.3rem;
}

.sp-contents-02__txt img {
  width: 65.8rem;
  height: 20.7rem;
}

.sp-contents-02 .design {
  margin-bottom: 8.9rem;
}

.sp-contents-02 .design__ttl {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 3.4rem;
}

.sp-contents-02 .design__ttl span:not(:last-of-type) {
  margin-right: .4rem;
}

.sp-contents-02 .design__ttl span.de img {
  width: 2.8rem;
  height: 2.8rem;
}

.sp-contents-02 .design__ttl span.za img {
  width: 2.9rem;
  height: 2.8rem;
}

.sp-contents-02 .design__ttl span.i img {
  width: 2.3rem;
  height: 2.6rem;
}

.sp-contents-02 .design__ttl span.n img {
  width: 2.3rem;
  height: 2.3rem;
}

.sp-contents-02 .design__ttl-en {
  text-align: center;
  margin-bottom: -3rem;
}

.sp-contents-02 .design__ttl-en img {
  width: 21.2rem;
  height: 7.4rem;
}

.sp-contents-02 .design__txt {
  text-align: center;
  margin-bottom: 5rem;
}

.sp-contents-02 .design__txt img {
  width: 39.9rem;
  height: 3.8rem;
}

.sp-contents-02 .design-list li:not(:last-of-type) {
  margin-bottom: 3rem;
}

.sp-contents-02 .design__content {
  text-align: center;
}

.sp-contents-02 .design__content img {
  width: 66.3rem;
  height: 63.3rem;
}

.sp-contents-02 .color {
  margin-bottom: 10rem;
}

.sp-contents-02 .color__ttl {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 3.4rem;
}

.sp-contents-02 .color__ttl span:not(:last-of-type) {
  margin-right: .4rem;
}

.sp-contents-02 .color__ttl span.ka img {
  width: 2.4rem;
  height: 2.5rem;
}

.sp-contents-02 .color__ttl span.ra img {
  width: 2.2rem;
  height: 2.5rem;
}

.sp-contents-02 .color__ttl span.macron img {
  width: 2.5rem;
  height: .5rem;
}

.sp-contents-02 .color__ttl-en {
  text-align: center;
  margin-bottom: -3rem;
}

.sp-contents-02 .color__ttl-en img {
  width: 17.2rem;
  height: 6rem;
}

.sp-contents-02 .color-list li:not(:last-of-type) {
  margin-bottom: 5.8rem;
}

.sp-contents-02 .color__content {
  text-align: center;
}

.sp-contents-02 .color__content--1 img {
  width: 66.3rem;
  height: 75rem;
}

.sp-contents-02 .color__content--2 img {
  width: 66.2rem;
  height: 85.5rem;
}

.sp-contents-02 .dry-eye {
  position: relative;
}

.sp-contents-02 .dry-eye__content img {
  width: 68.9rem;
  height: 96.9rem;
}

.sp-contents-02 .dry-eye__btn {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 3.7rem;
  display: block;
  width: 54.6rem;
}

.sp-contents-02 .dry-eye__btn img {
  width: 54.6rem;
  height: 9.2rem;
}

.footer .caution-txt {
  margin: 0 -3rem;
}

.footer .caution-txt img {
  width: 75rem;
  height: 38.4rem;
}

.footer .caption {
  font-size: 2rem;
  line-height: 1.5;
  margin-top: 2em;
}

.footer .caption small {
  display: block;
  font-size: 100%;
}

.footer .approval-num {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 2em 0;
}

.footer .copyright {
  font-size: 1.8rem;
}

.footer .copyright-bg {
  padding: 2rem 0;
  text-align: center;
  background-color: #eee;
  margin: 0 -3rem;
}
/*# sourceMappingURL=style.css.map */

.questionnaire {
  padding-bottom: 3.8rem;
}
.questionnaire__content {
  position: relative;
}
.questionnaire__content img {
  width: 75rem;
  height: 69.2rem;
}
.questionnaire__btn {
  position: absolute;
  bottom: 2.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 61.5rem;
  height: 9rem;
  margin-left: -.8rem;
}



/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 799px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

.floating {
  position: fixed;
  left: auto;
  right: auto;
  bottom: 0px;
  display: none;
	z-index: 99;
}
.floating a {
  display: block;
  /*color: #fff;
  background: #000;*/
  /*padding: 8px;*/
  text-decoration: none;
  /*opacity: 0.6;*/
  z-index: 99;
}
.floating a:hover {
  opacity: 1;
}
.floating img{
	width: 700px;
}
.pc .ank{
  margin-bottom: 10%;
	}
@media only screen and (max-width: 700px) {
	.floating {
	  width: 100%;
	  position: fixed;
	  left: 0px;
	  bottom: 0px;
	  display: none;
	}
	.floating a {
	  display: block;
	  /*color: #fff;
	  background: #000;*/
	  /*padding: 8px;*/
	  text-decoration: none;
	  /*opacity: 0.6;*/
	  z-index: 99;
	}
	.floating a img{
		width: 100%;
	}
	.floating a:hover {
	  opacity: 1;
	}
	.floating01{
		width: 50%;
		position: fixed;
		left: 0;
		bottom: 0;
		display: none;
	}
	.floating02{
		width: 50%;
		position: fixed;
		right:   0;
		bottom: 0;
		display: none;
	}
}


/*@media only screen and (max-width: 740px){
	.footer{margin-bottom: 16%;}
}*/

/* アコーディオンメニュー
/* --------------------------------------------------------------- */
.cp_menu {
	/*max-width: 360px;*/
	margin: 0 auto;
	padding: 0;
	border: 3px solid #E5547D;
}
.cp_menu a {
	display: block;
	/*padding: 10px;*/
	text-decoration: none;
	color: #000000;
	line-height: 1;
}
.cp_menu label {
	display: block;
	position: relative;
	/*margin: 0 0 2px 0;
	padding: 12px;*/
	line-height: 1;
	/*color: #ffffff;
	background: #1b2538;*/
	cursor: pointer;
}
.cp_menu label::before {
	/*position: absolute;
	content: '▼';
	color: #ffffff;*/
	right: 0.5em;
	top: 25%;
}
.cp_menu input {
	display: none;
}
.cp_menu ul {
	margin: 0;
	padding: 0;
	/*background: #f4f4f4;*/
	list-style: none;
}
.cp_menu li {
	overflow-y: hidden;
	max-height: 0;
	transition: all 0.5s;
}
/*リストが増えたらULごとに追加してください*/
#cp_menu_bar1:checked ~ #link1 li,
#cp_menu_bar2:checked ~ #link2 li {
	max-height: 76px;
	opacity: 1;
}

/* アコーディオンメニュー
/* --------------------------------------------------------------- */
.menu {
    max-width: 87%;
    /*background : #E5547D;*/
    /*padding : 4px;*/
	border: solid 4px #E5547D;
	margin: 0 auto;
	padding-bottom: 2%;
}

.menu a {
    display: block;
    /*padding: 15px;*/
    text-decoration: none;
    color: #000;
}

label {
    display: block;
    /*margin: 0 0 4px 0;*/
    line-height: 1;
    color :#fff;
    cursor :pointer;
}

input {
    display: none;
}

.menu ul {
    margin: 0;
    padding: 0;
    /*background :#f4f4f4;*/
    list-style: none;
}

.menu li {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
    height: 41px;
    opacity: 1;
}

@media only screen and (max-width: 699px){
	.menu {
		border: solid 2px #E5547D;
		padding-bottom: 3%;
	}
	
	#menu_bar01:checked ~ #links01 li,
	#menu_bar02:checked ~ #links02 li {
		height: 24px;
		opacity: 1;
	}
	}


.floating {
  position: fixed;
  left: auto;
  right: auto;
  bottom: 0px;
  display: none;
	z-index: 99;
}
.floating a {
  display: block;
  /*color: #fff;
  background: #000;*/
  /*padding: 8px;*/
  text-decoration: none;
  /*opacity: 0.6;*/
  z-index: 99;
}
.floating a:hover {
  opacity: 1;
}
.floating img{
	width: 700px;
}
.pc .ank{
  margin-bottom: 10%;
	}
@media only screen and (max-width: 700px) {
	.floating {
	  width: 100%;
	  position: fixed;
	  left: 0px;
	  bottom: 0px;
	  display: none;
	}
	.floating a {
	  display: block;
	  /*color: #fff;
	  background: #000;*/
	  /*padding: 8px;*/
	  text-decoration: none;
	  /*opacity: 0.6;*/
	  z-index: 99;
	}
	.floating a img{
		width: 100%;
	}
	.floating a:hover {
	  opacity: 1;
	}
	.floating01{
		width: 50%;
		position: fixed;
		left: 0;
		bottom: 0;
		display: none;
	}
	.floating02{
		width: 50%;
		position: fixed;
		right:   0;
		bottom: 0;
		display: none;
	}
}

@media only screen and (max-width: 800px){
	.lptop{
	margin-top: 11%;
	}
}

@media only screen and (max-width: 800px){
	#t{
		margin-bottom: 10%;
	}
}


.left{
	float: left;
	width: 50%;
}

.right{
	float: right;
	width: 50%;
}

.clear{
	content: "";
	clear: both;
	display: block;
}


.buttonbase{
	position: relative;
	width: 100%;
}


.leftbutton{
	position: absolute;
	bottom: 5.5%;
	left: 5%;
	width: 44%;
}

.rightbutton{
	position: absolute;
	bottom: 5.5%;
	right: 5%;
	width: 44%;
}

.cartbutton{
	margin: 3% auto;
	width: 85%;
}