@charset "utf-8";


#contents{
  padding-top:0 !important;
}

#header,#footer,.nav-sub,.bread-wrap{
  display: none !important;
}


.SpcOnly{
	display:block;
}

.PcOnly{
	display:none;
}

.Shoppingguide,.Shoppingguide-formbox{
	font-family: "游明朝体", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif !important;
}

.flex-wrap{
	flex-wrap: wrap;
	display: flex;
	justify-content: space-between;
}

.secTtl{
  background: #BFBAA8;
  color: #2C2C29;
  padding: 8px 0px 8px 30px;
  position: relative;
  width: 160px;
  font-size: 14px;
  margin: 0 0 35px;
  &:before{
    content: "";
    width: 2px;
    height: 85%;
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    background: #2C2C29;
    margin: auto;
  }
  .en{
    display: block;
    color:#2C2C29;
    font-size: 16px;
  }
}
.Shoppingguide{
  p,a{
    color: #000;
  }
}

section{
  padding: 50px 0 0 !important ;
}

@media (width >= 767px) {
  section{
    padding: 90px 0 0 !important ;
  }
  
  .secTtl{
    width: 225px;
    font-size: 16px;
    &:before{
      width: 2px;
      height: 85%;
      position: absolute;
      left: 12px;
      top: 0;
      bottom: 0;
      background: #2C2C29;
      margin: auto;
    }
    .en{
      font-size: 20px;
    }
  }
  .Shoppingguide{
    p,a,dt,dd{
      font-size: 15px !important;
    }
  }
}

.ShoppingHero{
  background: url(../img/shopping_hero.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  padding: 118px 0 !important;
  .ShoppingHero-Title{
    width: 90%;
    margin: auto;
    text-align: center;
    h2{
      font-size: 15px;
      letter-spacing: .05em;
      .en{
        display: block;
        font-size: 20px;
        margin-bottom: 27px;
      }
    }
  }
}

@media (width >= 767px) {
	.SpcOnly{
		display:none;
	}
	.PcOnly{
		display:block;
	}

  .ShoppingHero{
    padding: 80px 0 !important;
    .ShoppingHero-Title{
      h2{
        font-size: 17px;
        letter-spacing: .05em;
        .en{
          display: block;
          font-size: 24px;
          margin-bottom: 27px;
        }
      }
    }
  }  
}


.ShoppingBox{
  margin: 0px auto 0px;
  .ShoppingBox_inner{
    .ShoppingBox_inner-list{
      background: #E4E2CD;
      justify-content: flex-start;
      padding: 12px 10px;
      .ShoppingBox_inner-list-item{
        width:33%;
        padding: 0 0 10px;
        &:nth-of-type(10),&:nth-of-type(11){
          padding: 0;
        }
        a{
          text-align: center;
          display: block;
          white-space: nowrap;
        }
      }
    }
  }
}

@media (width >= 767px) {
  .ShoppingBox{
    margin: 0px auto 0px;
    .ShoppingBox_inner{
      .ShoppingBox_inner-list{
        padding: 20px 10px;
        .ShoppingBox_inner-list-item{
          padding: 0 0 15px;
          &:nth-of-type(10),&:nth-of-type(11){
            padding: 0;
          }
          a{
          }
        }
      }
    }
  }
}


.materialBox{
  padding: 50px 0px 0px;
  .materialBox_inner{
    .materialBox_inner-list{
      align-items: flex-end;
      .materialBox_inner-list-item{
        &:nth-of-type(1){
          width: 62%;
        }
        &:nth-of-type(2){
          width: 34%;
          .txt{
            font-size: 3.0vw;
          }
        }
      }
    }
    .txt01{
      text-align: center;
      margin: 21px auto 28px;
    }
    a{
      display: block;
      text-align: center;
      margin: 0 auto 50px;
      text-decoration: underline;
      font-weight: 500;
    }
    .txt02{
      text-align: center;
      margin: 0 auto 20px;
    }
    .txt03{
      width: fit-content;
      margin: auto;
    }
  }
}

@media (width >= 767px) {
  .materialBox{
    padding: 90px 0px 0px;
    .materialBox_inner{
      .materialBox_inner-list{
        .materialBox_inner-list-item{
          &:nth-of-type(1){
            width: 66%;
          }
          &:nth-of-type(2){
            width: 28%;
            .txt{
              font-size: 14px;
            }
          }
        }
      }
      .txt01{
      }
      a{
      }
      .txt02{
      }
      .txt03{
      }
    }
  }
}


.textureBox{
  padding: 57px 0px 92px;
  .textureBox_inner{
    .txt04{
      color: #000;
      margin: 0 0 24px;
      font-size: 13px;
    }
    .textureBox_inner-list{
      width: 80%;
      margin: 0 auto 32px;
      .textureBox_inner-list-item{
        width: 46%;
        margin: 0 0 20px;
        &:nth-of-type(3),&:nth-of-type(4){
          margin:0;
        }
        p{
          text-align: center;
          line-height: 2.4;
          margin: 10px 0 0;
        }
      }
    }
    .txt05{
      text-align: center;
    }
  }
}
@media (width >= 767px) {
  .textureBox{
    padding: 0px 0px 92px;
    .textureBox_inner{
      .txt04{
        font-size: 15px;
        width: 80%;
        margin: 0 auto 24px;
      }
      .textureBox_inner-list{
        .textureBox_inner-list-item{
          &:nth-of-type(3),&:nth-of-type(4){
          }
          p{
          }
        }
      }
      .txt05{
      }
    }
  }
}

.engravingBox{
  padding:0 0 59px;
  .engravingBox_inner{
    .txt06{
      width: fit-content;
      margin:0 auto 32px;
      font-size: 13px;
    }
    picture{
      display: block;
      width: 56%;
      margin: 0 0 35px auto;
    }
    .txt07{
      width: fit-content;
      margin: 0 auto 35px;
    }
    .txt08{
      width: fit-content;
      margin: auto;
    }
  }
}
@media (width >= 767px) {
  .engravingBox{
    padding: 0px 0px 92px;
    .engravingBox_inner{
      .txt06{
      }
      picture{
      }
      .txt07{
      }
      .txt08{
      }
    }
  }
}

.optionBox{
  padding:0 0 59px;
  .optionBox_inner{
    .txt09{
      width: fit-content;
      margin: 0 auto 15px;
      font-size: 13px;
    }
    .txt10{
      width: fit-content;
      margin: 36px auto 0 auto;
      font-size: 12px;
    }
  }
}
@media (width >= 767px) {
  .optionBox{
    padding: 0px 0px 92px;
    .optionBox_inner{
      .txt09{
      }
      .txt10{
      }
    }
  }
}

.diamondBox{
  padding:0 0 71px;
  .diamondBox_inner{
    .txt11{
      text-align: center;
      margin: 0 auto 22px;
    }
    .txt12{
      text-align: center;
      margin: 0 auto 26px;
    }
    a{
      display: block;
      text-align: center;
      margin: 0 auto 30px;
      text-decoration: underline;
      font-weight: 500;
    }
    picture{
      display: block;
      width: 67%;
      margin: 0 auto 47px;
    }
    .txt13{
      text-align: center;
      margin: 0 auto 19px;
    }
    .txt14{}
  }
}
@media (width >= 767px) {
  .diamondBox{
    padding: 0px 0px 92px;
    .diamondBox_inner{
      .txt11{
      }
      .txt12{
      }
      a{
      }
      picture{
      }
      .txt13{
      }
      .txt14{
        width: 68%;
        margin: auto;
      }
    }
  }
}

.sizeBox{
  padding:0 0 42px;
  .sizeBox_inner{
    button#openBtn{
      appearance: none;
      background: transparent;
      border: none;
      width: fit-content;
      margin: 0 auto 30px;
      text-align: center;
      display: block;
      text-decoration: underline;
      color: #000;
      font-weight: 500;
      font-family: "游明朝体", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif !important;
    }
    a{
      width:fit-content;
      display: block;
      text-align: center;
      margin: 0 auto 30px;
      text-decoration: underline;
      font-weight: 500;
    }
    picture{
      display: block;
      width: 67%;
      margin: 0 auto 26px;
    }
    dl{
      width: 94%;
      margin: auto;
      dt{
        color: #000;
        margin: 0 auto 15px;
      }
      dd{
        color: #000;
        padding-left:15px;
        .square{
          position:relative;
          &:before{
            content: "▪";
            position: absolute;
            left: -15px;
          }
        }
        .asterisk{
          position:relative;
          &:before{
            content: "※";
            position: absolute;
            left: -15px;          
          }
        }
      }
    }
    dialog {
      border: none;
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      width: 80%;
      height: 70vh;
    }
    
    /* モーダルの背面（オーバーレイ） */
    dialog::backdrop {
      background: rgba(0, 0, 0, 0.5);
    }
    .form_in{
      form{
        position:relative;
        padding: 5rem 0 2rem 0;
        button{
          text-decoration: none;
          position: absolute;
          right: 0px;
          top: 0;
          font-size: 20px;
          color: #000;
          background: transparent;
          border: 1px solid #aaa;
          padding: 2px 10px;
        }
        .top{
          h3{
            text-align: center;
            font-size: 13px;
            text-decoration: underline;
            margin: 0 auto 76px;
          }
          .top-txt{
            margin: 0 auto 68px;
          }
        }
        .flow{
          padding: 0px 0 80px;
          h3{
            background: #F4ECDB;
            width: fit-content;
            padding: 10px 32px;
            margin: 0 auto 32px;
          }
          .flow-dl{
            dt{
              font-size: 13px;
              margin: 15px 0;
            }
            dd{
              position: relative;
              line-height: 1.8;
              &:before{
                content:"";
                border-left:1px solid #000;
                position: absolute;
                left: 0;
                height: 100%;
              }
              span{
                background: #F4ECDB;
                padding:3px 10px;
                font-weight: 600;
                display: inline-block;
                margin: 5px auto 0;
              }
            }
          }
        }
        .note{
          margin: 0 0 91px;
          background: #F2F2F2;
          padding: 23px 10px;
          h3{
            font-size: 13px;
            text-align: center;
            margin: 0 auto 22px;
          }
        }
        .application{
          padding: 0 0 170px;
          h3{
            text-align: center;
            margin: 0 auto 25px;
          }
          p{
            &:nth-of-type(1){
              width: fit-content;
              margin: 0 auto 25px;
            }
            &:nth-of-type(2){
              text-align: center;
            }
          }
          
        }
        .receive{
          padding: 0 0 170px;
        }
      }
    }
  }
}
@media (width >= 767px) {
  .sizeBox{
    padding: 0px 0px 92px;
    .sizeBox_inner{
      a{
      }
      picture{
      }
      dl{
        width: 80%;
        margin: auto;
        dt{
        }
        dd{
          .square{
            &:before{
            }
          }
          .asterisk{
            &:before{        
            }
          }
        }
      }
    }
  }
}

.afterBox{
  padding: 0 0 55px;
  .afterBox_inner{
    .txt15{}
    dl{
      align-items: center;
      margin: 28px auto 35px;
      dt{
        color: #000;
        width: 25%;
      }
      dd{
        color: #000;
        position: relative;
        width: 70%;
        &:before{
          content: "";
          width: 1px;
          height: 100%;
          position: absolute;
          left: -12px;
          top: 0;
          bottom: 0;
          background: #000;
          margin: auto;
        }
      }
    }
  }
}
@media (width >= 767px) {
  .afterBox{
    padding: 0px 0px 92px;
    .afterBox_inner{
      .txt15{
        width: 80%;
        margin: auto;
      }
      dl{
        width: 80%;
        dt{
        }
        dd{
          &:before{
          }
        }
      }
      .txt16{
        width: 80%;
        margin: auto;
      }
    }
  }
}

.deadlineBox{
  padding: 0 0 36px;
  .deadlineBox_inner{
    .txt17{
      
    }
  }
}
@media (width >= 767px) {
  .deadlineBox{
    padding: 0px 0px 92px;
    .deadlineBox_inner{
      .txt17{
        width: 80%;
        margin: auto;
      }
    }
  }
}

.payBox{
  padding: 0 0 53px;
  .payBox_inner{
    .txt18{
      margin: 0 0 37px;
    }
    .txt19{
      margin: 0 0 20px;
    }
    picture{
      display: block;
      width: 84%;
    }
  }
}
@media (width >= 767px) {
  .payBox{
    padding: 0px 0px 92px;
    .payBox_inner{
      .txt18{
        width: 80%;
        margin: auto;
      }
      .txt19{
        width: 80%;
        margin: auto;
      }
      picture{
        width: 80%;
        margin: auto;
      }
    }
  }
}

.postageBox{
  padding: 0 0 35px;
  .postageBox_inner{
    a{
      display: inline-block;
      margin: 0 auto 0px;
      text-decoration: underline;
      font-weight: 500;
    }
  }
}
@media (width >= 767px) {
  .postageBox{
    padding: 0px 0px 92px;
    .postageBox_inner{
      .txt20{
        width: 80%;
        margin: auto;
      }
      a{
      }
    }
  }
}

.cancelBox{
  padding-bottom: 135px !important;
  .cancelBox_inner{
    a{
      display: block;
      text-align: center;
      margin: 30px auto 0px;
      text-decoration: underline;
      font-weight: 500;
    }
  }
}
@media (width >= 767px) {
  .cancelBox{
    padding-bottom: 150px !important;
    .cancelBox_inner{
      .txt21{
        width: 80%;
        margin: auto;
      }
      a{
      }
    }
  }
}


//form

.Shoppingguide-form{
  position: relative;
}

.Shoppingguide-formbox{
  position: relative;
  .top{
    h3{
      text-align: center;
      font-size: 13px;
      text-decoration: underline;
      margin: 0 auto 76px;
    }
    .top-txt{
      margin: 0 auto 68px;
    }
  }
  .flow{
    padding: 0px 0 80px;
    h3{
      background: #F4ECDB;
      width: fit-content;
      padding: 10px 32px;
      margin: 0 auto 32px;
    }
    .flow-dl{
      dt{
        font-size: 13px;
        margin: 15px 0;
      }
      dd{
        position: relative;
        line-height: 1.8;
        padding-left: 12px;
        &:before{
          content:"";
          border-left:1px solid #000;
          position: absolute;
          left: 0;
          height: 100%;
        }
        span{
          background: #F4ECDB;
          padding:3px 10px;
          font-weight: 600;
          display: inline-block;
          margin: 5px auto 0;
        }
      }
    }
  }
  .note{
    margin: 0 0 91px;
    background: #F2F2F2;
    padding: 23px 10px;
    h3{
      font-size: 13px;
      text-align: center;
      margin: 0 auto 22px;
    }
  }
  .application{
    padding: 0 0 170px;
    h3{
      text-align: center;
      margin: 0 auto 25px;
    }
    p{
      &:nth-of-type(1){
        width: fit-content;
        margin: 0 auto 25px;
      }
      &:nth-of-type(2){
        text-align: center;
      }
    }
  }
}

@media (width >= 767px) {
  .Shoppingguide-formbox{
    position: relative;
    .top{
      h3{
        font-size: 15px;
      }
      .top-txt{
        font-size: 14px;
      }
    }
    .flow{
      padding: 0;
      h3{
      }
      .flow-dl{
        dt{
          font-size: 15px;
        }
        dd{
          font-size: 13px;
          &:before{
          }
          span{
          }
        }
      }
    }
    .note{
      h3{
        font-size: 15px;
      }
      p{
        font-size: 13px;
      }
    }
    .application{
      h3{
      }
      p{
        &:nth-of-type(1){
        }
        &:nth-of-type(2){
        }
      }
    }
  }
}

.rules{
  padding: 10px 15px;
  margin: 0 auto 50px;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  border: 1px solid;
  p{
    text-align: left !important;
  }
}
.rules_check{
  text-align: center;
}
.rules .taxBox{
  width: 100%;
  text-align: right;
}