/* 202312  new id7 */

.id7-section1 {
  position: relative;
  top:90px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom:80px;
}
.id7-section1-1{
  position:relative;
  width:100vw;
  height:400px;
}
.id7-section-hero{
  position: absolute;
}
.id7-section-hero{
  top:17%;
  left:10%;
  padding:18px 50px;
  background-color: rgba(255, 254, 254, 0.65);
}
.id7-section-hero-title{
   font-size:33px;
   line-height:53px;
   font-family:serif;
}
.id7-section1-1 img{
  height:100%;
  object-fit:cover;
}
.id7-section1 .title{
  width: 100%;
  margin: 44px 0 52px;
  text-align: center;
}
.id7-typo-200{
  font-weight:200;
}
  /* section1 */
  
  /* section2 */
.id7-section2 {
    width:100%;
    box-sizing: border-box;
    margin-bottom:30px;
}
.id7-section2-1 {
    max-width:1080px;
    margin: 0 auto 20px;
}
.id7-section2-1 img{
    width:100%;
    height:100%;
    object-fit: cover;
}
img.for_sp{
    display:none;
}
  /* section3 */
.id7-section3 {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-bottom:43px;
}
.id7-section3-1 {
    display:flex;
    justify-content:space-between;
}
.id7-section3-box {
    width: 32%;
    border: 1px solid #8e8e8e;
    border-radius: 10px;
    padding: 20px 10px;
    box-sizing: border-box;
    line-height:120%;
}
.id7-section3-box span{
    display:block;
    margin-bottom:10px;
}
.id7-section3-box-btn {
    width:170px;
    max-width:170px;
    margin: 25px auto;
}
.id7-section3-box .box-img {
    margin:0 auto;
    width:230px;
    height:225px;
}
.box-img img{
    height:100%;
    object-position:top;
}
  .id7-section3-2 {
    padding:20px;
    text-align:center;
    border: 1px solid #8e8e8e;
    border-radius:10px;
}
.id7-sec-title{
    background-color:#1e0b8c;
    padding:20px 0;
    margin-bottom:20px;
    border-radius:10px;
}
.id7-sec-title-typo{
    color:#fff;
    font-size:17px;
    font-weight:400;
}
.id7-sec-typo{
    font-size: 16px;
    line-height: 36px;
}
  /* section4 */
.id7-section4 {
    width: 100%;
    box-sizing: border-box;
    margin-bottom:30px;
}
.id7-section4-box {
    text-align:center;
   
    background: url(https://www.joliesse.co.jp/img/joli_id7_dia_pc.jpg) no-repeat left 36% /100%;
}
.id7-touka{
    background-color: rgb(247, 247, 247,0.4);
    padding:20px 20px 10px;
}
.id7-section4-box-wrap {
    display:flex;
    margin:15px 10px;
    justify-content: right;
}
.id7-section4-box-inner {
    width:40%;
    text-align: center;
    padding:10px;
    font-size:14px;
    line-height:150%;
}
  /*  fur  */
.id7-section4-box-wrap-center {
    display:flex;
    margin:15px 10px;
    justify-content:center;
}
.id7-section4-box_fur {
    text-align:center;
    background: url(https://www.joliesse.co.jp/img/joli_id7_mink.jpg) -4% 0% / 32% no-repeat;
}
.id7-section4-box_jew {
    text-align:center;
    background: url(https://www.joliesse.co.jp/img/joli_id7_jewelry.jpg) -7% 35% / 32% no-repeat;
}
  
@media screen and (max-width: 375px) ,(max-width:767px){
  .id7-section-hero{
    top:15%;
    left:4%;
    padding:10px 20px;
  }
 .id7-section-hero-title{
     font-size:21px;
     line-height:30px;
  }
}
@media (max-width:767px) {
   .id7-section1 {
      margin-bottom:80px;
    }
   .id7-section1-1{
      height:250px;
    }
    .id7-section1 .title{
      margin: 25px 0 30px;
    }
    .id7-sec-typo{
      font-size: 14px;
      line-height: 20px;
    }
    .id7-section2 {
      margin-bottom:10px;
    }
    .id7-section2-1 {
      width:100%;
      height:auto;
    }
    img.for_pc{
      display:none;
    }
    img.for_sp{
      display:block;
      width:100%;
      object-fit: cover;
    }
    .id7-section3 {
      margin-bottom:30px;
    }
    .id7-section3-1 {
      flex-direction: column;
    }
    .id7-section3-box {
      width:100%;
      height:305px;
      padding:20px;
      margin-bottom:30px;
    }
    .id7-section3-box:last-child {
      margin-bottom:20px;
    }
    .id7-section3-box span{
     line-height:110%;
     font-size:14px;
     font-weight:400;
    }
    .id7-section3-box .box-img {
      width:210px;
      height:185px;
    }
    .box-img img{
      width:100%;
  
      object-fit:contain;
    }
    .id7-section3-2 {
      padding:30px;
    }
    .id7-section4-box {
       background: url(https://www.joliesse.co.jp/img/joli_id7_dia_sp.jpg) no-repeat 37% 33% /200%;
    }
    .id7-section4-box-wrap {
      flex-direction:column;
      justify-content: center;
      margin:10px;
    }
    .id7-section4-box-inner {
      width:100%;
      text-align: center;
      padding:10px 0;
    }
    .id7-section4-box_fur {
      background: url(https://www.joliesse.co.jp/img/joli_id7_mink.jpg) 50% 27% / 83% no-repeat;
    }
    .id7-section4-box_jew {
      background: url(https://www.joliesse.co.jp/img/joli_id7_jewelry.jpg) 66% 20% / 93% no-repeat;
    }
}