@charset="utf-8";

main {
	width: 100%;
  font-family: 'Libre Caslon Display', serif;
  color: #202e40;
  font-size: 1.7rem;
}
section {
  max-width: 1000px;
  margin: 0 auto 100px auto;
}
a {
  text-decoration: none;
  color: #202e40;
}
a:hover {
  opacity: 0.5;
}
.title_num {
  font-size: x-large;
}
.item_num {
  font-size: x-small;
}
h2 p {
  text-align: center;
}
     @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_2024ss_7days.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: 160px;
    }
  h2 p {
    font-size: 2rem;
    color: #202e40;
    position: absolute;
    top: 15%;
    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("https://www.spendard.com/s/feature/2024ss_7days/img/kv_2024ss_7days.jpg");
    margin-bottom: 160px;
} 
  .kv_full {
    width: 100%;
    height: 0;
    padding-top: calc(550 / 1000 * 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 60px;
    margin-bottom: 160px;
    background-image: url(img/kv_2023fw_7days.jpg);
    position: relative;
  }
  h2 p {
    font-size: 4rem;
    color: #202e40;
    position: absolute;
    top: 15%;
    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%;
  }
}

/******************PROF***********************/
@media (max-width: 767px) {
  .prof_img {
    width: 30%;
    margin-left: auto;
    margin-right: auto;
  }
  .name {
    text-align: center;
    font-size: 2.4rem;
  }
}

@media (min-width: 768px) {
  .prof {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
  .prof_img {
    width: 15%;
    padding-top: 1rem;
  }
  .prof_txt {
    width: 85%;
    padding-left: 2rem;
  }
  .name {
    font-size: 2.4rem;
    margin-block-start: 0;
    margin-block-end: 0.5em;
  }
  .spbr {
    display: none;
  }
  .insta_acount {
    font-size: 2.4rem;
  }
  .insta_acount:hover {
    opacity: 0.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;
      }
      .proverb {
        font-size: 1.2rem;
      }
    }
    @media (min-width: 768px) {
      .title {
        font-size: 2.5rem;
      }
      .title_num {
        font-size: 4rem;
      }
      .item_name {
        font-size: 2rem;
      }
      .price {
        font-size: 2rem;
      }
      .proverb {
        font-size: 1.7rem;
      }
    }
    /*****************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%;
      }
    }