/* reset CSS */
*,*::before,*::after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}
dl,ol,ul{margin-bottom:0;}

/**
  複数ページに共通する要素
**/

body{
  font-family: YuMincho;
  font-style: normal;
  font-weight: 400;
  color: #191919;
  margin: auto;
}
a{
  color: #000;
}

body{
  position: relative;
  min-width: 375px;
  z-index: 1;
}
main{
  background-color: #FFF;
}

header{
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 3;
  display: flex;
  color: #FFF;
  text-shadow: 0px 4px 4px rgba(25, 25, 25, 0.25);
  font-weight: 800;
  padding-top: 1.3dvw;
  padding-left: 8px;
  align-items: center;
}

header ul{
  display: flex;
  gap: 5dvw;
  margin-left: auto;
}
header a{
  color: #FFF;
  text-decoration: none;
}
header img{
  width: 28vh;
  height: auto;
}
ul{
  list-style: none;
}
.headerBg{
  margin: 0;
  position: fixed;
  top:0;
  left: 0;
  background: #001838;
  width: 100%;
  /* height: 12dvw; */
  height: 6rem;
  z-index:1;
}

.pcNav {
  margin-left: auto;
  margin-right: 5dvw;
}

.spNav {
  margin-top: 11px;
  display: block;
  width: 60px;
  position: relative;
  z-index: 100;
}
.spNav.active span:nth-child(1){
  transform: translateY(26px) rotate(-45deg);
}
.spNav.active span:nth-child(2){
  opacity: 0;
}
.spNav.active span:nth-child(3){
  transform: translateY(-10px) rotate(45deg);
}
 
.spNav span{
  display: block;
  width: 100%;
  height: 3px;
  background-color: #FFF;
  transition: all .4s;
  margin-bottom: 15px;
}

.spGroNav{
  position: absolute;
  display: block;
  width: 50dvw;
  top: -1000px;
  left: 50%;
  transition: all 0.8s 0s ease;
}
.spGroNav li{
  padding: 2rem;
}

.spGroNav.active{
  transition: all .3s linear;
  font-size: 2rem;
  z-index: 2;
  top:0;
  padding: 6rem 2rem 2rem 2rem;
  background: #001838;
}

button span{
  /* 線の長さと高さ */
    width: 100%;
    height: 4px;
    /* バーガー線の色 */
    background-color: #333;
    /* バーガー線の位置基準として設定 */
    position: relative;
    transition: .2s;
}

.sp {
  display: none !important;
}
@media screen and (max-width: 980px) {
  header{
    position: fixed;
  }
  header img{
    width: auto;
    height: 4rem;
  }
  body{
    max-width: 980px;
  }
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}

.firstViewSection{
  width: 100%;
  height: auto;
  height: fit-content;
  color: #FFF;
  margin-bottom: 5vw;
}


.pcFirstImg{
  width: 100%;
  height: auto;
}
.spFirstImg{
  width: 100%;
  height: auto;
}

.firstViewSection div{
  position: relative;
  z-index: 2;
}
.firstViewSection h1{
  font-size: 5vw;
  position: absolute;
  left: 15px;
  bottom: 25px;
  z-index: 2;

  /* Drop Shadow */
  text-shadow: 0px 4px 4px rgba(25, 25, 25, 0.25);
  font-weight: 500;
  line-height: 120%;
}
.firstViewSection h2{
  font-size: 3vw;
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  writing-mode: vertical-rl;
  text-align: center;
  z-index: 2;
}
.firstViewSection h3{
  margin-bottom: 0;
  font-size: 1rem;
  position: absolute;
  text-align: center;
  right: 0;
  left: 0;
  bottom: 20px;
  text-shadow: 0px 4px 4px rgba(25, 25, 25, 0.25);
  font-weight: 500;
  z-index: 2;
}
@media screen and (max-width: 980px) {
  .firstViewSection h1{
    font-size: 13vw;
    line-height: 150%;
    bottom: 60px;
  }
  .firstViewSection h2 {
    font-size: 7vw;
    top: 11vh;
    bottom: auto;
  }

  .firstViewSection h3 {
    font-size: 3vw;
  }
}

.brandMessage{
  width: auto;
  margin: auto;
  margin-bottom: 5vw;
}

.wfitcontent{
  width: fit-content;
  margin: auto;
}

.brandMessage h4{
  display: inline-block;
  font-size: 2.4em;
}

.goldLabel{
  text-align: left;
  color: #AF962F;
  text-shadow: 2px 2px 1px rgba(175, 150, 47, 0.40);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 150%;
  opacity: 0.4;
}
.bgMadePc{
  width: 100%;
  height: auto;
}
.bgMadeSp{
  width: 100%;
  height: auto;
}

.madeBox{
  position: relative;
}
.madeMessageBox {
  position: absolute;
  top: 6vw;
  left: 10vw;
}
.madeBox .descBox{
  margin-top: 10px;
  width: 60%;
  font-size: 0.9dvw;
  padding-bottom: 5dvw;
}
.lineBox{
  display: flex;
}
.line{
  margin-top: 15px;
  margin-right: 10px;
  width: 100%;
  height: 1px;
  background: #AF962F;
}
.lineBox h5{
  color: #AF962F;
  white-space:nowrap;
  text-align: right;
  font-size: 1.5vw;
  font-weight: 500;
  line-height: 150%;
}

.madeMessageBox .lineBox .line{
  width: 10vw;
}
.madeMessageBox .lineBox h5{
  white-space: wrap;
}

@media screen and (max-width: 980px) {
  .madeMessageBox .brandMessage h4{
    font-size: 6vw;
  }
  .madeBox{
    padding-top: 25dvh;
  }
  .madeMessageBox {
    top: 12dvh;
  }
  .madeMessageBox .brandMessage{
    margin: 0;
  }
  .line{
    margin-top: 27px;
  }
  .madeMessageBox .lineBox .line{
    margin-right: 15px;
    width: 20vw;
  }
  .madeMessageBox .lineBox h5{
    width: 58%;
  }
  .lineBox h5{
    font-size: 4vw;
  }
  .madeMessageBox .descBox{
    /* position: relative; */
    width: 90%;
    font-size: 3.5vw;
    font-weight: 500;
    line-height: 200%;
  }
}

.brandDesc{
  text-align: left;
  max-width: 720px;
  margin-top: 20px;
  padding-left: 7rem;
  padding-right: 7rem;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 300%;
}
@media screen and (max-width: 980px) {
  .brandMessage{
    padding: 0;
    margin: 0;
    margin: 2dvh;
    margin-bottom: 5dvh;
  }
  .wfitcontent{
    margin: 0;
  }
  .brandMessage h4{
    font-size: 5rem;
    margin-bottom: 6dvw;
  }
  .goldLabel{
    font-size: 3vw;
  }
  .brandDesc{
    padding: 0;
    margin: 0;
    max-width: none;
    font-size: 2.2rem;
    line-height: 130%;
  }
}
.product{
  display: flex;
  color: #FFF;
  width: fit-content;
  flex-wrap: wrap;
  justify-content:center;
}
.product div{
  max-width: 479px;
  min-width: 187px;
  min-height: 296px;
  height: auto;
  width: 25%;
}

.productDesc{
  flex-shrink: 0;
  background: #001838;
  text-align: left;
}
.productDesc span{
  text-shadow: 2px 2px 1px rgba(175, 150, 47, 0.40);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 800;
  line-height: 150%;
  opacity: 0.4;
}

h6{
  color: #FFF;
  font-size: 2.6vw;
  font-weight: 500;
  line-height: 150%;
  margin-bottom: 3vw;
}
.productDesc p{
  font-size: min(0.75rem, 14px);
  font-weight: 500;
  line-height: 200%;
}
.productItem{
  position: relative;
}
.productItem img{
  width: 100%;
}
.productItem p{
  position: absolute;
  bottom: 0;
  right: 12px;
  text-align: right;
  /* Drop Shadow */
  text-shadow: 0px 4px 4px rgba(25, 25, 25, 0.25);
  font-size: 18px;
  font-weight: 800;
  line-height: 150%;
}

/* 商品一覧 */
@media screen and (max-width: 980px) {
  .product div{
    width: 50%;
  }
  .productDesc span{
    font-size: 3.1dvw;
  }
  .productDesc h6{
    font-size: 6.5dvw;
    margin-bottom: 3dvw;
  }
  .productDesc p{
    font-size: 3.1dvw;
    line-height: 150%;
  }
  .productItem p{
    font-size: 3rem;
  }
}
.descBox{
  font-size: 1dvw;
  line-height: 300%;
}
.descBox p {
  z-index: 3;
}



.bgNavy{
  padding-bottom: 8dvw;
  background: #001838;
  color: #FFF;
}
.materialSection{
  padding-top: 8dvw;
  display: flex;
  justify-content: center;
  gap: 5dvw;
}
.whiteLabel{
  text-shadow: 3px 3px 2px rgba(175, 150, 47, 0.40);
  font-weight: 800;
  line-height: 150%;
  opacity: 0.4;

}
.bgNavy .brandMessage p{
  font-weight: 800;
  line-height: 150%;
}
.materialDesc{
  position: relative;
}
.bgNavy .materialDesc .brandMessage h4{
  line-height: 150%;
  margin-bottom: 2vw;;
}
.bgNavy .descBox{
  height: auto;
}
.materialSection .materialDesc, .materialSection .material{
  width: 40dvw;
}
.materialDesc .brandMessage{
  margin-bottom: 2vw;
}

.materialDesc p{
  font-size: 0.9dvw;
  font-weight: 500;
  line-height: 300%;
}
.material{
  position: relative;
  height: fit-content;
}
.materialTotal{
  margin: 0;
  padding: 0;
  position: absolute;
  align-items: baseline;
  bottom: 0;
  right: 0;
  text-align: right;
  font-size: 1.5vw;
  line-height: 150%;
}
.materialTotal p, .materialTotal span{
  padding: 0;
}
.materialTotal span{
  font-size: 4vw;
  font-weight: 500;
  line-height: 120%;
}
.zegnaLogo{
  width: 28dvw;
}
.materialDesc .zegnaLogo{
  position: absolute;
  bottom: 0;
}

@media screen and (max-width: 980px) {
  .bgNavy .materialDesc .brandMessage h4{
    margin-bottom: 10vw;
  }
  .materialDesc p ,.materialDesc2{
    width: 90dvw;
    margin: auto;
    font-size: 3.8vw;
    line-height: 150%;
  }
  .materialSection{
    display: block;
  }
  .materialSection .materialDesc, .materialSection .material{
    width: fit-content;
    margin: auto;
  }
  .material img{
    margin-top: 5dvw;
    width: 90dvw;
  }
  .materialTotal{
    font-size: 4vw;
  }
  .materialTotal span {
    font-size: 8vw;
  }
  .material .zegnaLogo{
    width: 60dvw;
    position: absolute;
    left: 0;
    bottom: -5dvw;
  }
  .materialDesc2 {
    margin-top: 5vw;
    margin-bottom: 17vw;
  }
}
.centerContent{
  padding-top: 7vw;
  padding-bottom: 5vw;
  width:55%;
  margin: auto;
}
.centerContent .brandMessage{
  margin-bottom: 1dvh;
}
.desc{
  margin-top: 5dvw;
  font-size: 0.9dvw;
  font-weight: 500;
  line-height: 200%;
}
.priceBox{
  display: flex;
  flex-wrap: wrap;
  gap: 2dvw;
  justify-content: center;
}
.priceBox div{
  width: 48%;
}
.priceBox div .lineBox{
  width: 100%;
}
.priceBox div .lineBox .line{
  width: 100%;
}
.priceBox div .lineBox h5{
  white-space: nowrap;
}

.priceTitle{
  font-size: 3dvh;
}
.priceDetail{
  font-size: 2dvh;
}
.priceDetail span{
  margin-left: 3dvw;
  font-size: 4vh;
}

@media screen and (max-width: 980px) {
  .centerContent{
    width: 100%;
    margin: auto;
  }
  .priceBox div{
    width: 93%;
  }
  .desc{
    font-size: 3.7dvw;
  }
}
.shopList{
  width: 100%;
  margin: auto;

}
.shopList div .lineBox, .shopList div .lineBox .line{
  width: 100%;
  margin: auto;
}

.shop{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2dvw;
  margin-bottom: 4dvw;
}
.shop div{
  width: 40%;
}
.shop div img{
  width: 100%;
}
.shop div .shopLink, .shop .shopLink{
  width: 80%;
  margin-top: 2dvh;
  margin-bottom: 2dvh;
  padding-top: 1.5dvh;
  padding-bottom: 1.5dvh;
  border: 1px solid #191919;
  background: #FFF;
  box-shadow: 0px 4px 4px 0px rgba(25, 25, 25, 0.25);
}
.shop div .shopLink a, .shop .shopLink a{
  text-align: center;
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
  font-size: 2dvh;
}
.shopName, .optionName{
  font-size: 3dvh;
}
.shopAddress{
  font-size: 2dvh;
}
@media screen and (max-width: 980px) {
  .shopList div .lineBox, .shopList div .lineBox .line, .shop div{
    width: 90%;
    margin: auto;
  }
}
.reserveBox{
  position: relative;
}
.reserveBox img{
  width: 100%;
  height: auto;
}
.reserveBox div{
  font-size: 1.5dvw;
  line-height: 200%;
  text-align: center;
  position: absolute;
  top: 8dvw;
  left: 0;
  right: 0;
}
.reserveBox div p{
  color: #FFF;
  margin-bottom: 4dvh;
}
.reserveBox div a{
  display: block;
  width: 20dvw;
  margin-top: 3dvw;
  padding-top: 1dvw;
  padding-bottom: 1dvw;
  margin: auto;
  text-decoration: none;
  border: 1px solid #191919;
  background: #FFF;
}
@media screen and (max-width: 980px) {
  .reserveBox div{
    width: 90%;
    top: 20%;
    margin: auto;
  }
  .reserveBox div p{
    text-align: left;
    line-height: 200%;
    font-size: 4.4dvw;
  }
  .reserveBox div a{
    padding-top: 4dvw;
    padding-bottom: 4dvw;
    font-size: 4.4dvw;
    width: 70dvw;
  }
}

.voiceBox{
  display: flex;
  width: fit-content;
  height: fit-content;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3dvw;
}
.voice{
  width: 29%;
}
.voice p{
  font-size: 1dvw;
  font-weight: 500;
  line-height: 150%;
}
.voiceImgBox img{
  width: 100%;
}
.voiceImgBox{
  position: relative;
  width: 100%;
}
.voiceImgBox div{
  color: #FFF;
  padding:0.2dvw;
  font-size: 1.2dvw;
  font-weight: 500;
  line-height: 150%;
  background: #001838;
  position: absolute;
  top: 21dvw;
  right: -1dvw;
}
.voiceImgBox div span{
  font-size: 0.9dvw;
}

@media screen and (max-width: 980px) {
  .scrollBox{
    overflow-x: scroll;
  }
  .voiceBox{
    /* SP版 スクロール問題未解決 */
    flex-wrap:nowrap;
    /* overflow-x:scroll; */
  }
  .voice{
    width: 50dvw;
    margin-left: 3dvw;
  }
  .voiceImgBox div{
    font-size: 4dvw;
    top:60dvw;
  }
  .voice p{
    font-size: 3dvw;
  }
}
.qualityBg{
  background-image: url('../img/qualityBg.jpg');
}

.qualityBox{
 font-size: 0.91dvw;
}
.qualityBox .lineBox .line{
  width: 100%;
}
.qualityBox .lineBox h5{
  white-space:nowrap;
}
.qualityFlexBox{
  display: flex;
  justify-content: space-between;
  margin-bottom: 2dvw;
}
.qualityDesc{
  width: 50%;
  /* font-size: 0.91dvw; */
  font-weight: 500;
  line-height: 300%;
}
.qualityImg{
  width: 45%;
}
.qualityImg img{
  width: 100%;
}

@media screen and (max-width: 980px) {
  .qualityBg{
    background-image: url('../img/qualityBgSP.jpg');
  }
  .qualityBox .lineBox, .optionBox .lineBox{
    margin: 2dvh;
  }
  .qualityBox .lineBox .line{
    width: 2%;
  }
  .qualityBox .lineBox h5{
    font-size: 5dvw;
  }
  .qualityBox{
    font-size: 1.8dvh;
  }

  .qualityFlexBox, .titleDesc{
    display: block;
    margin: 2dvh;
  }
  .qualityDesc, .qualityImg{
    width: auto;
    font-weight: 500;
    line-height: 200%;
  }
}
.optionFlexBox{
  display: flex;
  justify-content: space-between;
}
.optionDescBox{
  width: 50%;
}
.optionImg{
  width: 40%;
}
.optionImg img{
  width: 100%;
}

.optionName, .optionPrice{
  /* font-size: 1.5dvw; */
  font-size: 2.5dvh;
}

.optionName span, .optionPrice span{
  /* font-size: 1dvw; */
  font-size: 1.5dvh;
}
.optionPrice span{
  opacity: 0.8;
}
.optionPrice .yen{
  opacity: 1;
}
.optionDesc{
  font-size: 1.6dvh;
  opacity: 0.8;
}


.optionPc, .optionSp{
  margin: auto;
  width: 80%;
}

@media screen and (max-width: 980px) {
  .optionBox{
    font-size: 1.8dvh;
  }
  .optionName, .optionFlexBox{
    margin: 2dvh;
  }
  .optionDescBox,.optionImg{
    width: 49%;
  }
  .optionDesc{
    font-size: 1.3dvh;
  }

}

.faqBg{
  background-image: url('../img/faqBg.jpg');
}
.faqBox{
  margin-top: 3dvw;
  background: rgba(255, 255, 255, 0.2)
}
.faqBox div p{
  margin: 0;
}
.faqList{
  border-top: solid 1px #FFF;
}
.faq{
  display: flex;
  align-items: center;
  justify-content:space-between;
  padding: 1.3rem;
}
.faq p{
  font-size: 1.8dvh;
}
.faq p a{
  text-decoration: none;
  color: #FFF;
}
.answer{
  font-size: 1.5dvh;
  transition: opacity .4s;
}
@media screen and (max-width: 980px) {
  .faqBg{
    background-image: url('../img/faqBgSP.jpg');
    background-repeat: no-repeat;
    background-size:100%;
  }
  .faqBox{
    margin: 2dvh;
  }
  .faq p{
    font-size: 1.5dvh;
  }
  .answer{
    font-size: 1.2dvh;
  }
}
.company{
  padding: 0;
}
dl{
  display: flex;
  justify-content:left;
  align-items: center;
  font-size: 1.8dvh;
  padding: 5% 0;
  font-weight: 500;
  line-height: 150%;
  border-top: solid 1px #000;
}
@media screen and (max-width: 980px) {
  dl{
    margin: 0 2dvh;
  font-size: 1.5dvh;
  }
}
dt{
  width: 20%;
}
dd{
  width: 80%;
}

footer{
  width: 100%;
  padding: 3dvw 3dvw 0.5dvw 3dvw;
  background: #000;
  color: #FFF;
}
footer a{
  text-decoration: none;
  color: #FFF;
}
.footerBox{
  /* padding-top: 12%; */
  justify-content: center;
  gap: 2dvw;
  align-items: center;
}
.footerButton{
  display: block;
  width: 20%;
  margin: auto;
  text-align: center;
  border: 1px solid #191919;
  background: #FFF;
  color: #000;
  /* Drop Shadow */
  box-shadow: 0px 4px 4px 0px rgba(25, 25, 25, 0.25);
  padding: 0.7rem;
}
.footerLinks{
  margin: 2dvw 0;
  display: flex;
  justify-content: center;
  gap: 2dvw;
}
.copylight {
  display: block;
  text-align: center;
}
@media screen and (max-width: 980px) {
  footer{
    /* padding: 3dvh; */
    padding-left: 2dvh;
    font-size: 3dvw;
  }
  .footerBox{
    display: block;
  }
  .footerButton{
    width: 40%;
    margin-bottom: 2dvw;
    padding-top: 2.5dvw;
    padding-bottom: 2.5dvw;
  }
  .footerLinks{
    /* justify-content: start; */
    display: block;
    font-size: 3dvw;
  }
  .footerLinks a{
    margin: 1dvh 0;
  }
}