@charset="utf-8";

main {
  width: 100%;
  font-family: 'Libre Caslon Display', serif;
  color: #260101;
  font-size: 1.7rem;
}
section {
  max-width: 1000px;
  margin: 0 auto 100px auto;
}
a {
  text-decoration: none;
  color: #260101;
}
a:hover {
  opacity: 0.5;
}
.title_num {
  font-size: x-large;
}
.item_num {
  font-size: x-small;
}
h2 p {
  text-align: center;
}
h3 {
  text-align: center;
  line-height: 200%;
  color: #696969;
  margin-bottom: 100px;
}
h4 {
  text-align: center;
  line-height: 100%;
  color: #696969;
  margin-bottom: 100px;
}

     @keyframes fadeIn {
        to { opacity: 1; }
      }
      .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, 
      .c11, .c12, .c13, .c14, .c15, .c16, .c17, .c18, .c19, .c20, 
      .c21, .c22, .c23, .c24, .c25, .c26, .c27, .c28, .c29, .c30, 
      .c31, .c32, .c33, .c34, .c35, .c36, .c37, .c38, .c39, .c40, .c41 {
        opacity: 0;
        animation: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards fadeIn;
      }
      .c1 { animation-delay: 0.0s; }
      .c2 { animation-delay: 0.1s; }
      .c3 { animation-delay: 0.2s; }
      .c4 { animation-delay: 0.3s; }
      .c5 { animation-delay: 0.4s; }
      .c6 { animation-delay: 0.5s; }
      .c7 { animation-delay: 0.6s; }
      .c8 { animation-delay: 0.7s; }
      .c9 { animation-delay: 0.8s; }
      .c10 { animation-delay: 0.9s; }
      .c11 { animation-delay: 1.0s; }
      .c12 { animation-delay: 1.1s; }
      .c13 { animation-delay: 1.2s; }
      .c14 { animation-delay: 1.3s; }
      .c15 { animation-delay: 1.4s; }
      .c16 { animation-delay: 1.5s; }
      .c17 { animation-delay: 1.6s; }
      .c18 { animation-delay: 1.7s; }
      .c19 { animation-delay: 1.8s; }
      .c20 { animation-delay: 1.9s; }
      .c21 { animation-delay: 2.0s; }
      .c22 { animation-delay: 2.1s; }
      .c23 { animation-delay: 2.2s; }
      .c24 { animation-delay: 2.3s; }
      .c25 { animation-delay: 2.4s; }
      .c26 { animation-delay: 2.5s; }
      .c27 { animation-delay: 2.6s; }
      .c28 { animation-delay: 2.7s; }
      .c29 { animation-delay: 2.8s; }
      .c30 { animation-delay: 2.9s; }
      .c31 { animation-delay: 3.0s; }
      .c32 { animation-delay: 3.1s; }
      .c33 { animation-delay: 3.2s; }
      .c34 { animation-delay: 3.3s; }
      .c35 { animation-delay: 3.4s; }
      .c36 { animation-delay: 3.5s; }
      .c37 { animation-delay: 3.6s; }
      .c38 { animation-delay: 3.7s; }
      .c39 { animation-delay: 3.8s; }
      .c40 { animation-delay: 3.9s; }
      .c41 { animation-delay: 4.0s; }

.season {
  animation: 5s linear infinite rotate;
}
@keyframes rotate {
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
#page_top {
  background-color: #590202;
}
.slidein_up.delighter {
  transition: all .3s ease-out;
  opacity: 0;
}
.slidein_up.delighter.started {
  transform: translate(0%, -32px);
  opacity: 1;
}
.slidein_down.delighter {
  transition: all .3s ease-out;
  opacity: 0;
}
.slidein_down.delighter.started {
  transform: translate(0%, 32px);
  opacity: 1;
}
.slidein_left {
  transform: translate(-64px);
    opacity: 0;
    transition: all .3s ease-out;
}
.slidein_left.delighter.started {
    transform: none;
    opacity: 1;
  }
.slidein_right{
  transform: translate(64px);
    opacity: 0;
    transition: all .3s ease-out;
}
.slidein_right.delighter.started {
  transform: none;
    opacity: 1;
}
.commingsoon {
  display: inline-block;
}
.commingsoon:hover .item_name {
  display: none;
}
.commingsoon:hover .price {
  display: none;
}
.commingsoon:hover .item_num {
  display: none;
}
.commingsoon .hover {
  display: none;
}
.commingsoon:hover .hover {
  display: inline;
}

    /******************KV***********************/
@media (max-width: 767px) {
  .kv {
    background-image: url("img/kv_sp_2023fw_maison.jpg");
    width: 100%;
    height: 0;
    padding-top: calc(1000 / 1000 * 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 60px;
    margin-bottom: 60px;

    }
  h2 p {
    font-size: 2rem;
    color: #260101;
    position: absolute;
    top: 35%;
    left: 10%;
    text-align: center;
    transform : scale(1.2, 1.0);
    letter-spacing: -0.1em;
    line-height: 180%;
  }
  .season {
    width: 30%;
    position: absolute;
    bottom: 35%;
    left: 5%;
  }
  main {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .kv {
    background-image: url(img/kv_2023fw_maison.jpg);
} 
  h2 p {
    font-size: 4rem;
    color: #260101;
    position: absolute;
    top: 35%;
    left: 10%;
    text-align: center;
    transform : scale(1.2, 1.0);
    letter-spacing: -0.1em;
    line-height: 180%;
  }
  .season {
    width: 150px;
    position: absolute;
    bottom: 10%;
    left: 5%;
  }

}

    /******************01***********************/
    section {
      max-width: 1000px;
      margin: 0 auto 160px;
      font-family: 'Libre Caslon Display', serif;
    }
    a {
      text-decoration: none;
      color: #000;
    }
    a:hover {
      opacity: 0.5;
    }
    @media (max-width: 767px) {
      p {
        margin-left: 1rem;
      }
      .title {
        font-size: 2rem;
      }
      .title_num {
        font-size: 2.5rem;
      }
      .item_name {
        font-size: 1.4rem;
      }
      .item_num {
        font-size: 1rem;
      }
      .item_num2 {
        font-size: 1rem;
        color: #0000ff;
      }
      .proverb {
        font-size: 1.2rem;
      }
    }
    @media (min-width: 768px) {
      .title {
        font-size: 2.5rem;
      }
      .title_num {
        font-size: 4rem;
      }
      .item_num2 {
        font-size: 2rem;
        color: #0000ff;
      }
      .item_name {
        font-size: 2rem;
      }
      .price {
        font-size: 2rem;
      }
      .proverb {
        font-size: 1.7rem;
      }
h3 {
  text-align: center;
  line-height: 200%;
  color: #696969;
  margin-bottom: 100px;
}
h4 {
  text-align: center;
  line-height: 100%;
  color: #696969;
  margin-bottom: 100px;
}
    }
    /*****************02********************/   
    @media (max-width: 767px) {
      .img_02 {
        width: 90%;
        margin: 0 auto 50px;
      }
      .img_03 {
        width: 90%;
        margin: 0 auto;
      }
    }

    @media (min-width: 768px) {
      .page_02 {
        display: flex;
        flex-wrap: wrap;
      }
      .img_02, .img_03 {
        width: 47%;
      }
      .img_02 {
        padding-right: 3%;
      }
      .img_03 {
        padding-left: 3%;
      }
      .page_02 p {
        width: 100%;
      }
      .commingsoon {
        min-width: 235px;
        height: 24px;
      }

      .commingsoon .hover {
        margin-left: 25%;
        height: 24px;
      }
    }
    /******************03********************/
    @media (max-width: 767px) {
      .img_04 {
        width: 80%;
        margin: 0 0 50px auto;
      }
      .img_05 {
        width: 68%;
        margin-bottom: 50px;
      }
    }
    @media (min-width: 768px) {
      .page_03 {
        display: flex;
        flex-wrap: wrap;
      }
      .txt_03 {
        width: 100%;
        margin-top: -10%;
      }
      .w_50 {
        width: 49%;
      }
      .img_04 {
        width: 70%;
        margin: 13% 13% 0 auto;
      }
      .img_05 {
        width: 65%;
        margin: 6% auto auto 0;
      }
      .img_06 {
        width: 50%;
      }
    }
    /*****************04**************/
    @media (max-width: 767px) {
      .img_07 {
        margin-bottom: 50px;
      }
      .img_08 {
        width: 68%;
        margin: 0 auto 50px 0;
      }
      .img_09 {
        width: 80%;
        margin: 0 0 auto auto;
      }
    }
    @media (min-width: 768px) {
      .page_04 {
        display: flex;
        flex-wrap: wrap;
      }
      .img_07 {
        width: 50%;
      }
      .img_08 {
        width: 65%;
        margin: 13% auto 0 6%;
      }
      .img_09 {
        width: 70%;
        margin: 6% 0 auto auto;
      }
      .txt_04 {
        width: 45%;
        margin: -10% 0 auto auto;
      }
    }
    /*************************06**********************/
    @media (max-width: 767px) {
      .img_12 {
        width: 68%;
        margin: 0 0 50px auto;
      }
      .img_13 {
        width: 90%;
        margin: 0 auto 50px 0;
      }
      .p_04 {
        margin-bottom: 50px;
      }
      .img_14 {
        width: 90%;
        margin: 0 auto 50px;
      }

    }

    @media (min-width: 768px) {
      .page_06 {
        display: flex;
        flex-wrap: wrap;
      }
      .img_12 {
        width: 65%;
        margin: 13% 0 6% auto;
      }
      .img_13 {
        width: 90%;
      }
      .img_14 {
        width: 47%;
        margin: 6% 0 auto auto;
      }
      .txt_06 {
        width: 47%;
        margin: -13% 0 auto auto;
      }
    }
    /*************************08***********/
    @media (min-width: 768px) {
      .img_17 {
        width: 97%;
        margin: 6% auto;
      }
      .img_18 {
        margin: 6% auto 6% 0; 
      }
      .img_19 {
        margin: 0 0 13% auto;
      }
      .p_08 {
        margin-left: 10%;
      }
    }
    /*************************09***********/
    @media (min-width: 768px) {
      .page_09 {
        display: flex;
        flex-wrap: wrap;
      }
      .img_20 {
        margin-top: 6%;
      }
    }
    /*********************10**********/
    @media (max-width: 767px) {
      .img_23 {
        margin-left: 6%;
      }
    }

    /*********************11**********/
    @media (max-width: 767px) {
      .p_11 {
        margin-bottom: 50px;
        
      }
    }

    /*****************13***************/
    @media (min-width: 768px) {
      .img_30 {
        width: 45%;
        margin: 0 auto;
      }
      .page_13 p {
        margin-left: 25%;
      }
    }
    /*****************LAST***************/
    @media (max-width: 767px) {
      .page_last {
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }

    @media (min-width: 768px) {
      .page_last {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .page_last h3 {
        width: 100%;
      }
      .page_last div {
        width: 48%;
      }
    }

/*////////////////item link bottom///////////////////////*/
  .item_title {
    font-weight: bold;
    margin-bottom: 0.5rem;
  }

  .link_btn {
    border: solid 1px #6B3473;
    background-color: #6B3473;
    color: #fff;
    font-weight: bold;
    line-height: 100%;
    padding: 0 1rem;
    width: 20%;
    text-align: center;
    margin-left: 1%;
    margin-right: auto;
  }
  a.hover:hover {
    opacity: 0.5;
  }
/******************SONO NAVY ITEM***********************/
.item_list_wrap {
  display: grid;
}
.item_list_title {
  padding-top: 50px;
}
.item_list:hover {
  opacity: 0.5;
}
.item_list_wrap p {
  margin-block-start: 0;
    margin-block-end: 1em;
    }
@media (max-width: 767px) {
  .item_list_wrap {
    width: 95%;
    margin: 0 auto;
  column-gap: 2%;
  grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
  }

  .item_list {
    display: inline-block;
  }

}
@media (min-width: 768px) {
  .item_list_wrap {
  column-gap: 1%;
  grid-row-gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .item_list {
    display: inline-block;
  }
}