@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Shippori+Mincho:wght@400;500;600;700;800&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

.zen { font-family:"Zen Maru Gothic", sans-serif; }



#buyMenu .buyMenuWrap { max-width:85rem; }
#buyMenu .shot { display:flex; justify-content:space-between; }
#buyMenu .shot > ul { width:48%; }
#buyMenu .gel { width:48%; margin-top:4rem; }
#buyMenu .shot > ul,#buyMenu .gel > ul { display:flex; justify-content:space-between; align-items:center; }
#buyMenu .shot > ul > li:first-child,#buyMenu .gel > ul > li:first-child { width:50%; }
#buyMenu .shot > ul > li:last-child,#buyMenu .gel > ul > li:last-child { width:47%; }
#buyMenu .shot > ul > li:first-child img,#buyMenu .gel > ul > li:first-child img  {
  max-height:18rem;
  height:100%;
  width:auto;
  margin:0 auto;
  display:block;
}
#buyMenu .shot > ul > li:first-child p,#buyMenu .gel > ul > li:first-child p { text-align:center; font-size:1.4rem; color:#992e59; margin-top:1rem;}
#buyMenu .shot ul li .link li,#buyMenu .gel ul li .link li { height:4rem; background:#fff; padding:0 1rem; border-radius:5px; overflow:hidden; }
#buyMenu .shot ul li .link li:nth-child(n+2),#buyMenu .gel ul li .link li:nth-child(n+2) { margin-top:1rem; }
#buyMenu .shot ul li .link .official,#buyMenu .gel ul li .link .official { margin-top:1rem; background:#992e59; }
#buyMenu .shot ul li .link .official a,#buyMenu .gel ul li .link .official a {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  text-align:center;
  background:#992e59;
  color:#ece0c7;
  font-weight: bold;
  font-size:1.4rem;
}
#buyMenu .shot ul li .link img,#buyMenu .gel ul li .link img { display:block; height:100%; margin:0 auto; }

@media screen and (max-width:820px){
  #buyMenu .buyMenuWrap { max-width:95%; }
  #buyMenu .shot ul li .link .official a,#buyMenu .gel ul li .link .official a { font-size:1.2rem; }
}
@media screen and (max-width:600px){
  #buyMenu .buyMenuWrap { max-width:85%; }
  #buyMenu .shot ,#buyMenu .gel { width:100%; }
  #buyMenu .shot { display:block; }
  #buyMenu .shot > ul { width:100%; }
  #buyMenu .shot > ul:last-child { margin-top:4rem; }
  #buyMenu .gel { margin-top:4rem; }
  #buyMenu .shot ul li .link .official a,#buyMenu .gel ul li .link .official a { font-size:1.4rem; }
}



#brand,#use,#washing,#developer,#faq { position:relative; }
#brand { z-index:10; }
#products { z-index:20; }
#use { z-index:30; }
#washing { z-index:40; }
#developer { z-index:50; }
#faq { z-index:60; }
footer { z-index:70; }




#mv .bg-fixed { background-image:none; }
#mv .bg-fixed .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
#mv .bg-fixed .bg.active { opacity: 1; }
/* 背景画像 */
#mv .bg-fixed .bg1 { background-image: url("../_img/mv2.jpg"); }
#mv .bg-fixed .bg2 { background-image: url("../_img/mv02.jpg"); }

@media screen and (max-width:1400px) {
  #mv .bg-fixed .bg1 { background-position: 80% 50%; }
}

@media screen and (max-width:820px) {
  #mv .bg-fixed .bg1 { background-position: 75% 50%; background-size: cover; }
}

@media screen and (max-width:600px) {
  #mv .bg-fixed .bg1 {
    background-image: url('../_img/mv2_sp.jpg') !important;
    background-size: cover;
    background-position: 75% 0%;
  }
  #mv .bg-fixed .bg2 {
    background-image: url('../_img/mv02_sp.jpg') !important;
    background-size:cover;
    background-position: 80% 0%;
  }
  #mv .overlay-content h1 { padding-top: 8rem; }
}
/* 矢印ボタン */
.slideBtn button.prev,
.slideBtn button.next {
  position: fixed; /* ページ全体で固定してもOK */
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.6);
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  z-index:1;
}

button.prev { left: 20px; }
button.next { right: 20px; }





#products-tab {
  position: absolute;
  bottom:100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

#products-tab ul {
  display: flex;
}

#products-tab ul li {
  position: relative;
  cursor: pointer;
}

#products-tab ul li img {
  min-width:44rem;
  width:100%;
}

#products-tab ul li p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: normal;
}

#products-tab ul li.tabOff p {
  color: #ECE0C7;
}

#products .pr02 .cont01 li:first-child {
  width: 45%;
}

#products .pr02 .cont01 li:last-child {
  width: 53%;
}
@media screen and (max-width:840px){
  #products-tab { width:90%; }
  #products-tab ul li img { min-width:initial; }
}
@media screen and (max-width:640px){
  #products-tab ul li p { font-size:2.4rem; }
}

.pr02 { display: none; }
#products .pr02 .cont01 .ttlArea {  }
#products .pr02 .cont01 .ttlArea h3 { margin-left:-2em; margin-right:1em; }
#products .pr02 .cont01 .ttlArea .img { width:60%; }
#products .pr02 .cont01 .itemArea .item:last-child { width:90%; }
#products .pr02 .cont01 .itemArea .item > img { width:70%; }
#products .pr02 .cont01 .itemArea .price {
  display:flex;
  flex-direction:column;
  width:28%;
  height:90%;
}
#products .pr02 .cont01 .itemArea .price .mark { margin-bottom:auto; font-size:1.5rem; }
#products .pr02 .cont01 .itemArea .price .mark span {
  display:inline-block;
  border:solid 1px #b76283;
  border-radius:8px;
  padding:0 1em;
}

#products .pr02 .cont02Wrap > li:first-child {
  width:50%;
  order:2;
  display:flex;
  flex-direction:column;
}
#products .pr02 .cont02Wrap > li:last-child { width:45%; order:1; }
#products .pr02 .cont02Wrap > li .wrap .flex { display:flex; justify-content:space-between; }
#products .pr02 .cont02Wrap > li .wrap .flex > li {  }
#products .pr02 .cont02Wrap > li .wrap .flex > li:first-child {  }
#products .pr02 .cont02Wrap > li .wrap .flex > li:last-child { width:40%; }
#products .pr02 .cont02Wrap > li .wrap .flex > li ul {  }
#products .pr02 .cont02Wrap > li .wrap .flex > li ul li {
  width:100%;
  text-indent:-1em;
  padding:2rem 0 2rem 1em;
  border-bottom:solid 1px #b76283;
  font-weight: bold;
}
#products .pr02 .cont02Wrap > li .wrap .flex > li ul li:last-child { border:none; padding-bottom:0; }
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child {}
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child { width:100%; }
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child .text {
  margin:1rem 0;
}
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child .text span{
  display:block;
  font-size:1.2rem;
}
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line {
  display:flex;
  justify-content:space-between;
}
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line li {
  width:32%!important;
}
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line li div {
  text-align:center;
  color:#ECE0C7;
  background:#b76283;
  padding:5px 0;
  height:9rem;
  display:flex;
  flex-direction:column;
}
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line li .ttl {
  font-weight:bold;
  margin-bottom:auto;
}
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line li .tx {
  padding:0 1rem;
  font-size:1.4rem;
  line-height:1.2;
}
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line li:first-child div {
  background:none;
  border-top:solid 5px #b76283;
  border-bottom:solid 5px #b76283;
  color:#b76283;
}
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line li:first-child .ttl { font-weight: normal; }
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line li:last-child .ttl {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}
#products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line li:last-child .cap {
  margin-top:5px;
  text-align:left;
}


#products .pr02 .cont03 .iconWrap { display:flex; flex-direction:column; }
#products .pr02 .cont03 .iconWrap .care { width:70%; margin:0 auto; }
#products .pr02 .cont03 .iconWrap .care > ul { display:flex; justify-content:space-between; flex-wrap:wrap; }
#products .pr02 .cont03 .iconWrap .care > ul > li { width:23%; text-align:center; }
#products .pr02 .cont03 .iconWrap .care > ul li .ttl { font-size:2rem; margin:1rem auto; font-weight: bold; }
#products .pr02 .cont03 .iconWrap .care > ul li ul { font-size:1.4rem; }
#products .pr02 .cont03 .iconWrap .care .cap { text-align:center; margin-top:1rem; font-size:1.2rem; }
#products .pr02 .cont03 .iconWrap .icon { width:80%; margin:4rem auto 0; }
#products .pr02 .cont03 .iconWrap .icon ul { display:flex; justify-content:space-between; flex-wrap:wrap; }
#products .pr02 .cont03 .iconWrap .icon ul li { width:32%; }
#products .pr02 .cont03 .iconWrap .icon ul li:nth-of-type(n+4) { margin-top:2rem; }
#products .pr02 .cont03 .titlearea .ttl { width:80%; margin:5rem auto 0; text-align:center; }
#products .pr02 .cont03 .titlearea .ttl img { width:31%; }
#products .pr02 .cont03 .tableWrap { padding-bottom:2rem; }

#use .pr02 { align-items:center; }
#use .pr02 .imgWrap {}
#use .pr02 .imgWrap ul { display:flex; align-items:center; }
#use .pr02 .imgWrap ul li:first-child { width:40%; }
#use .pr02 .imgWrap ul li:last-child { width:55%; }
#use .pr02 .textWrap {
  padding:3rem 0;
  border-top:solid 1px #ECE0C8;
  border-bottom:solid 1px #ECE0C8;
  color:#ece0c8;
}


@media screen and (max-width:820px){
  #brand { padding-bottom:20rem; }
    
  #products .pr02 .cont01 .ttlArea h3 { margin-left:0; }
  #products .pr02 .cont01 .itemArea .item:last-child { flex-direction:column; }
  #products .pr02 .cont01 .itemArea { width:80%; margin:0 auto; }
  #products .pr02 .cont01 .itemArea .item:last-child { width:100%; }
  #products .pr02 .cont01 .itemArea .item > img { width:100%; }
  #products .pr02 .cont01 .itemArea .item .price { margin:1rem auto 0; }
  #products .pr02 .cont01 .itemArea .item .price .mark { display:none; }
  
  #products .pr02 .cont02Wrap li { position:initial; transform:none; width:auto; }
  #products .pr02 .cont02Wrap > li:first-child { width:auto!important; }
  #products .pr02 .cont02Wrap > li .wrap .flex > li { width:45%!important; }
  #products .pr02 .cont02Wrap > li .wrap .flex > li:last-child { width:40%!important; }
  #products .pr02 .cont02Wrap > li .wrap .flex > li li { width:100%!important; }  
  #products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line li:last-child { margin-top:0; }
  
  #products .pr02 .cont03 .iconWrap .care > ul > li { width:46%; }
  
  #use .pr02.flb { display:block; }
  #use .pr02.flb .imgWrap { width:100%; }
  #use .pr02 .textWrap { text-align:center; }
}
@media screen and (max-width:600px){
  
  #buyMenu .gel > ul > li:first-child img { height:auto; width:100%; }
  
  #products-tab { width:100%; }
  #products-tab ul li p { font-size:2rem; }
  #products .pr02 .cont01 .itemArea .price { width:50%; }
  #products .pr02 .cont01 .ttlArea .img { width:100%; }
  #products .pr02 .cont01 .ttlArea .img img { width:80%; }
  #products .pr02 .cont02Wrap > li:first-child h3.sp-only { text-align:center; font-weight:normal; }
  #products .pr02 .cont02Wrap > li:first-child h3.sp-only span { font-size:150%; }
  #products .pr02 .cont02Wrap > li .wrap .flex h3 { display:none; }
  #products .pr02 .cont02Wrap > li .wrap .flex > li { width:55%!important; }
  #products .pr02 .cont02Wrap > li .wrap .flex > li ul.zen li:last-child { margin-top:0; }
  #products .pr02 .cont02Wrap > li:first-child .max { width:100vw; margin:0 calc(50% - 50vw) 3rem; }
  #products .pr02 .cont02Wrap > li:first-child .wrap:last-child h3 { text-align:center; }
  #products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line { flex-wrap:wrap; }
  #products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line li { width:48%!important; }
  #products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line li:first-child { width:100%!important; margin-bottom:2rem;  }
  #products .pr02 .cont02Wrap > li:first-child .wrap:last-child .line li:first-child div {
    border-top:solid 3px #b76283;
    border-bottom:solid 3px #b76283;
  }
  #products .pr02 .cont02Wrap > li:last-child { display:none!important; }
  #products .pr02 .cont02Wrap > li:first-child .wrap:last-child .text { text-align:center; }
  #products .pr02 .cont02Wrap > li:first-child .wrap:last-child .text span { text-align:right; }
  
  #products .pr02 .cont03 .titlearea .ttl { width:90%; }
  #products .pr02 .cont03 .titlearea .ttl img { width:65%; }
  #products .pr02 .cont03 .iconWrap .care { width:75%; }
  #products .pr02 .cont03 .iconWrap .care > ul li ul { font-size:1.2rem; }
  #products .pr02 .cont03 .iconWrap .care > ul > li:nth-of-type(n+3) { margin-top:2rem; }
  
  #use .pr02 .imgWrap ul { display:block; }
  #use .pr02 .imgWrap ul li { margin:0 auto; }
  #use .pr02 .imgWrap ul li:first-child { width:80%; }
  #use .pr02 .imgWrap ul li:last-child { width:90%; margin:0 auto; }
  #use .pr02 .textWrap { font-weight: bold; }
  
}












