html { scroll-behavior: smooth;}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.05rem;
  overflow-x: hidden;
}

.wrapper {
    max-width: 1386px;
    width: 90%;
    margin: 0 auto;
}

section { margin-bottom: 200px;}

/* section:last-of-type { margin-bottom: 0;} */


section h3 {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 100px;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  text-transform: capitalize;
  word-break: break-all;
}

#sc_top,
#lookbook {
  position: relative; /* 忘れずに */
}

/* header */
#g-nav{
  position:fixed;
  z-index: 999;
  top:0;
  right: -120%;
  width:100%;
  height: 100vh;
  background:rgba(0, 0, 0, .6);
transition: all 0.6s;
}

#g-nav.panelactive{ right: 0;}

#g-nav.panelactive #g-nav-list{
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#g-nav ul {
  position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

#g-nav li{
list-style: none;
  text-align: center;
  font-size: 16px;
}

#g-nav li a{
color: #fff;
text-decoration: none;
padding:10px;
display: block;
text-transform: capitalize;
letter-spacing: 0.1em;
}

.openbtn{
  position:fixed;
  z-index: 9999;
  top:20px;
  right: 20px;
  cursor: pointer;
  width: 60px;
  height:60px;
}

.openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  height: 1px;
  background-color: #000;
  width: 100%;
}

.openbtn span:nth-of-type(1) {top:10px;}

.openbtn span:nth-of-type(2) {top:20px;}

.openbtn.active span:nth-of-type(1) {
  top: 18px;
  transform: translateY(6px) rotate(-45deg);
  background-color: #fff;
}

.openbtn.active span:nth-of-type(2){
  top: 30px;
  transform: translateY(-6px) rotate(45deg);
  background-color: #fff
}


/* top */
#sc_top {
  width: 100%;
  height: 100vh;
  /* height: 1080px; */
  background: linear-gradient(0deg,rgba(204, 204, 204, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.white_deco01 {
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
clip-path: polygon(0 80%, 100% 22%, 100% 100%, 0% 100%);
bottom: 0;
left: 0;
}

#sc_top .sc_top_wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}

#sc_top .top_img {
  width: 500px;
  height: 100%;
  position: relative;
}

#sc_top .top_img_l {
  margin-right: 200px;
  background: url(../images/top_img01.jpg) no-repeat center / cover;
}

#sc_top .top_img_r {
  background: url(../images/top_img02.jpg) no-repeat center / cover;
}

#sc_top .top_img p,
#sc_top .top_img h1 { position: absolute;}


#sc_top .top_img p {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 85px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  top: 50px;
  left: -130px;
}

#sc_top .top_img h1 {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 170px;
  text-transform: capitalize;
  bottom: 0;
  right: -200px;
}

/* concept */
#concept .wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#concept .wrapper div { width: 70%;}

#concept h2 {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 100px;
  text-transform: capitalize;
  word-break: break-all;
  margin-bottom: 10px;
}

#concept p {
  font-size: 20px;
  line-height: 2;
}


/* lookbook */
#lookbook {
  width: 100%;
  height: auto;
  background: linear-gradient(180deg,rgba(204, 204, 204, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

#lookbook .wrapper {
  position: relative;
  z-index: 1;
}

#lookbook .wrapper div {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#lookbook .womens {
  justify-content: flex-start;
  margin-bottom: 100px;
}

#lookbook .womens div:first-of-type { margin-right: 200px;}

#lookbook .mens { justify-content: flex-end;}

#lookbook .mens div:last-of-type { margin-left: 200px;}

#lookbook .wrapper div div {
  width: 30%;
  position: relative;
}

#lookbook img { width: 100%;}

#lookbook dl {
  position: absolute;
  width: 50%;
  background-color: rgba(150, 150, 150, .8);
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#lookbook dt, #lookbook dd {
  font-size: 16px;
  color: #fff;
  padding: 5px 0;
  border-bottom: solid 1px #fff;
  width: 50%;
}

#lookbook dt {
  font-weight: 300;
  text-transform: capitalize;
  word-break: break-all;
}

#lookbook dd { text-align: end;}

#lookbook .womens dl,
#lookbook .mens dl { bottom: -30px;}

#lookbook .womens dl { right: -30px;}

#lookbook .mens dl { left: -30px;}

#lookbook .white_deco02 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 0 20%);
  top: 0;
  left: 0;
  }


  /* recommend */
#recommend .slick-dots {
  position: absolute;
  bottom: -40px;
  display: flex !important;
  justify-content: center;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

#recommend .slick-dots li {
  margin: 0 5px;
}

#recommend .slick-dots li button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
  position: relative;
}

#recommend .slick-dots li button:before {
  content: "•";
  /* font-size: 30px; */
  color: #cdcdcd;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 20px;
}

#recommend .slick-dots li.slick-active button:before {
  color: #6a6a6a;
  opacity: 1;
}

#recommend .recommend_slider { position: relative;}

#recommend .slick-slide img {
  margin-bottom: 15px;
  width: 100%;
}


#recommend .slick-slide h4,
#recommend .slick-slide p {
  font-size: 16px;
  text-align: center;
}

#recommend .slick-slide h4 {
    text-transform: capitalize;
    word-break: break-all;
    line-height: 1;
    margin-bottom: 10px;
}

#recommend .slick-slide a {
  display: block;
  width: 100%;
  transition: all .3s;
}

#recommend .slick-slide a:hover { opacity: .6;}

/* access */
#access iframe {
  display: block;
  width: 50%;
  aspect-ratio: 16 / 9;
  margin: 0 auto 30px;
}

#access p {
  width: 100%;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
}

/* contact */
#contact {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(0deg,rgba(204, 204, 204, 1) 0%, rgba(255, 255, 255, 1) 100%);
  position: relative;
}

#contact .wrapper {
  position: relative;
  z-index: 1;
}

#contact form {
  width: 60%;
  margin: 0 auto;
}

#contact dl {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#contact dt, #contact dd { margin-bottom: 25px;}

#contact dt {
  font-size: 16px;
  font-weight: 300;
  width: 20%;
}

#contact dd { width: 75%;}

#contact dd label span { font-size: 16px;}

#contact .txt_form,
#contact textarea {
  width: 100%;
  border: solid 1px rgba(150, 150, 150, 1);
  background-color: #fff;
}

#contact textarea { height: 150px;}

#contact .txt_form {
  height: 50px;
  padding: 5px;
}

#contact input[type="radio"] { margin-right: 10px;}

#contact .jender { display: flex;}

#contact .men,
#contact .women {
  display: flex;
  align-items: center;
}

#contact .men { margin-right: 40px;}

#contact input[type="radio"] { display: inline-block !important;}

#contact .gender-option label {
  display: flex;
  align-items: center;
}

#contact .contact_submit {
  display: block;
  width: 50%;
  margin: 30px auto 0;
  text-align: center;
  font-size: 16px;
  background-color: rgba(150, 150, 150, 1);;
  border: solid 1px rgba(150, 150, 150, 1);
  color: #fff;
  height: 60px;
  transition: all .3s;
}

#contact .contact_submit:hover {
  background-color: #fff;
  color: rgba(150, 150, 150, 1);
}

/* product */
.option_group { margin-bottom: 20px;}

.option_group label {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

input[type="radio"] { display: none;}

.swatch {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 2px solid #ccc;
  border-radius: 50%;
  transition: border 0.2s;
}

input[type="radio"] .swatch {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 2px solid #ccc;
  border-radius: 50%;
  transition: border 0.2s;
}

input[type="radio"]:checked + .swatch {
  border: 2px solid #000;
  outline: 2px solid #666;
}

.size_btn {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #ccc;
  background: #fff;
  transition: all 0.2s;
}

input[type="radio"]:checked + .size_btn {
  border: 2px solid #000;
  background-color: #f2f2f2;
}

#add_to_cart {
  width: 50%;
  padding: 20px 10px;
  font-size: 16px;
  background: rgba(150, 150, 150, 1);
  border: solid 1px rgba(150, 150, 150, 1);
  color: #fff;
  transition: background 0.3s;
  text-align: center;
  margin-bottom: 100px;
  transition: all .3s;
}

#add_to_cart:hover {
  background: #fff;
  color: rgba(150, 150, 150, 1);
}

#products .size span {
  text-transform: uppercase;
  word-break: break-all;
  font-size: 16px;
}

#products .wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 100px 0;
}

#products .wrapper img {
  width: 30%;
  height: auto;
}

#products .products_detail { width: 55%;}

#products p { margin-bottom: 20px;}

#products .products_desc {
  line-height: 1.6;
  font-size: 16px;
}

#products h2 {
  font-weight: 500;
  text-transform: capitalize;
  word-break: break-all;
  line-height: 1;
  margin-bottom: 20px;
  font-size: 25px;
}

#products .price {
  font-weight: 500;
  font-size: 25px;
}

#products .jender {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-bottom: 20px;
}

#products .jender li {
  line-height: 1;
  word-break: break-all;
  font-size: 14px;
  padding: 3px 20px 5px;
  border: solid 1px #ccc;
}

#products dl {
  width: 100%;
  border-top: solid 1px #ccc;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#products dt, #products dd {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 14px;
  border-bottom: solid 1px #ccc;
}

#products dt {
  font-weight: 300;
  width: 25%;
}

#products dd { width: 75%;}

/* footer */
footer {
  width: 100%;
  padding: 50px 0;
  background-color: #cdcdcd;
  color: #fff;
}

footer .wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}

footer .wrapper div {
  width: 50%;
  font-size: 14px;
}

footer li {
  text-transform: capitalize;
  word-break: break-all;
  margin-bottom: 15px;
}

footer li:last-child { margin-bottom: 0;}

footer p { text-align: end;}

footer p:first-of-type { margin-bottom: 15px;}

footer div p:last-of-type { word-break: break-all;}

footer a { transition: all .3s;}

footer a:hover { opacity: .4;}


/* -------------- responsive -------------- */
@media (max-width: 1920px) {
  html { font-size: 62.5%;}

  section h3, #concept h2 { font-size: 5.2vw;}

  /* sc_top */
  #sc_top .top_img h1 { font-size: 8vw;}

  #sc_top .top_img p {
    font-size: 4.5vw;
    left: -90px;
  }

}

@media (max-width: 1500px) {
  section { margin-bottom: 18vh;}

  section h3 { margin-bottom: 6.4vh;}

  /* sp_top */
  /* #sc_top { height: 844px;} */

  #sc_top .top_img_l { margin-right: 10%;}

  #sc_top .top_img { width: 30%;}

  #sc_top .top_img h1 { right: -15%;}

  #sc_top .top_img p { left: -21%;}

  /* concept */
  #concept .wrapper div { width: 70%;}

  /* lookbook */
  #lookbook .womens div:first-of-type { margin-right: 17%;}

  #lookbook .mens div:last-of-type { margin-left: 17%;}

  #lookbook .womens { margin-bottom: 10vh;}

  #lookbook dl { width: 60%;}


  /* access */
  #access iframe {
    width: 60%;
    margin-bottom: 2.7vh;
  }

  /* contact */
  #contact form { width: 75%}

  #contact .contact_submit { width: 60%;}


  /* product */
  #products .wrapper img { width: 40%;}
}

@media (max-width: 1100px) {
  /* sc_top */
  #sc_top .top_img h1 { right: -25%}

  /* product */
  #add_to_cart { width: 100%;}
}

@media (max-width: 800px) {
  /* sc_top */
  #sc_top {
    height: 70vh;
    padding-top: 10vh;
  }

  #sc_top .top_img h1 { right: -45%;}

  #sc_top .sc_top_wrap {
    flex-direction: column;
    align-items: center;
  }

  #sc_top .top_img {
    width: 100%;
    height: 50vh;
  }

  #sc_top .top_img_l {
    margin-right: 0;
    background: url(../images/top_img01.jpg) no-repeat top 27% right / 70%;
  }

  #sc_top .top_img_r { background: url(../images/top_img02.jpg) no-repeat top 27% left / 70%;}

  #sc_top .top_img p {
    top: 35%;
    left: 5%;
    writing-mode: inherit;
  }

  #sc_top .top_img h1 {
    right: 10%;
    bottom: 25%;
  }

  /* access */
  #access iframe { width: 70%;}

  /* contact */
  #contact form { width: 90%;}

}

@media (max-width: 600px) {
  section h3, #concept h2 { font-size: 8vw;}

  /* sc_top */
  #sc_top {
    height: 90vh;
    margin-bottom: 30vh;
    padding-top: 20vh;
  }

  #sc_top .top_img p {
    left: 0;
    top: -28%;
    font-size: 9vw;
  }

  #sc_top .top_img h1 {
    right: 5%;
    bottom: -15%;
    font-size: 16vw;
  }

  #sc_top .top_img_l,
  #sc_top .top_img_r { background-size: 70%;}


  /* concept */
  #concept .wrapper div { width: 90%;}

  #concept p { font-size: 3.5vw;}

  /* lookbook */
  #lookbook .wrapper div div { width: 43%;}

  #lookbook .womens,
  #lookbook .mens { justify-content: center;}

  #lookbook dl { width: 80%;}

  #lookbook .womens dl { right: -15px;}

  #lookbook .mens dl { left: -15px;}

  #lookbook .womens div:first-of-type { margin-right: 10%;}

  #lookbook .mens div:last-of-type { margin-left: 10%;}

  #lookbook dt, #lookbook dd { font-size: 3vw;}

  /* recommend */
  #recommend .slick-slide h4,
  #recommend .slick-slide p { font-size: 3vw;}

  /* access */
  #access iframe { width: 90%;}

  #access p { font-size: 3vw;}

  /* contact */
  #contact dl { flex-direction: column;}

  #contact dt, #contact dd,
  #contact .contact_submit { width: 100%;}

  #contact dt ,
  #contact dd label span { font-size: 3vw;}

  #contact dt { margin-bottom: 10px;}

  #contact .txt_form, #contact .contact_submit { height: 80px;}

/* product */
#products .wrapper {
  flex-direction: column;
  align-items: center;
}

#products .wrapper img {
  width: 70%;
  margin-bottom: 30px;
}

#products .products_detail { width: 100%;}

#products .products_desc,
#products p, #products .size span,
#add_to_cart { font-size: 3.5vw;}

#products h2, #products .price { font-size: 5vw;}

#products .jender li,
#products dt, #products dd { font-size: 3vw;}

.option_group { margin-bottom: 50px;}

.swatch {
  display: inline-block;
  width: 50px;
  height: 50px;
}

.size_btn { padding: 15px 25px;}

#products dl { flex-direction: column;}

#products dt, #products dd { width: 100%;}

#products dt {
  border-bottom: none;
  padding-bottom: 0;
}

#products dd { padding-top: 15px;}


  /* footer */
  footer .wrapper div { font-size: 2.8vw;}

  footer .wrapper div:first-of-type { width: 20%;}

  footer .wrapper div:last-of-type { width: 80%;}

}


/* Slickドットのサイズを修正 */
.slick-dots {
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: #ccc;
  border-radius: 50%;
  margin: 4px;
}

.slick-dots li.slick-active button {
  background: #333;
}

.slick-dots li button:hover {
  background: #666;
}

/* 矢印ボタンのサイズも調整 */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: #333;
  border-radius: 50%;
}

.slick-prev {
  left: -40px;
}

.slick-next {
  right: -40px;
}

.slick-prev:before,
.slick-next:before {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1;
  color: white;
  opacity: 1;
}

.slick-prev:before {
  content: '‹';
}

.slick-next:before {
  content: '›';
}