@charset "UTF-8";
/*----------------------------------------------
  base
------------------------------------------------*/
.winternovelty {
  background: #FFF0E2;
}

.winternovelty section {
  max-width: 1100px;
  width: 90%;
  margin: 100px auto 50px;
}

.h4 {
  font-size: 1.44rem;
  font-weight: 700;
  line-height: 1.2;
  font-display: swap;
}

.category .title,
.reason .title {
  margin: 30px auto;
  color: #FB7922;
  font-size: 36px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .category .title,
  .reason .title {
    margin: 15px auto;
    font-size: min(6vw, 24px) !important;
  }

  h4,
  .h4 {
    font-size: 1rem;
    line-height: 1.4;
  }
}

/*----------------------------------------------
  top
------------------------------------------------*/
.TOPheight {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(100vh - 60px);
  margin-top: 60px;
  padding: 0 5% 100px;
  background-image: url(../img/winternovelty/topbg.webp);
  background-size: cover;
  background-position: center right;
  text-align: left;
}

.TOPheight>p:nth-of-type(1)>span {
  display: block;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 3px;
}

.TOPheight>p:nth-of-type(2)>span {
  display: block;
  margin: 10px 0 50px;
  font-size: 60px;
  font-weight: 900;
  color: #FB7922;
  letter-spacing: 3px;
  text-shadow:
    rgb(255, 255, 255) 0px 0px 8px, rgb(255, 255, 255) 0px 0px 8px,
    rgb(255, 255, 255) 0px 0px 8px, rgb(255, 255, 255) 0px 0px 8px,
    rgb(255, 255, 255) 0px 0px 8px, rgb(255, 255, 255) 0px 0px 8px,
    rgb(255, 255, 255) 0px 0px 8px, rgb(255, 255, 255) 0px 0px 8px,
    rgb(255, 255, 255) 0px 0px 8px, rgb(255, 255, 255) 0px 0px 8px,
    rgb(255, 255, 255) 0px 0px 8px, rgb(255, 255, 255) 0px 0px 8px,
    rgb(255, 255, 255) 0px 0px 8px, rgb(255, 255, 255) 0px 0px 8px,
    rgb(255, 255, 255) 0px 0px 8px, rgb(255, 255, 255) 0px 0px 8px,
    rgb(255, 255, 255) 0px 0px 8px, rgb(255, 255, 255) 0px 0px 8px;
}

.TOPheight>p:nth-of-type(3)>span {
  font-size: 20px;
  font-weight: 900;
  line-height: 50px;
}

@media screen and (max-width: 1200px) {
  .TOPheight>p:nth-of-type(1)>span {
    font-size: 24px;
  }

  .TOPheight>p:nth-of-type(2)>span {
    font-size: 50px;
    margin: 10px 0 30px;
  }

  .TOPheight>p:nth-of-type(3)>span {
    font-size: 18px;
  }

  .TOPheight {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: calc(100vh - 60px);
    margin-top: 60px;
    padding: 0 5% 50px;
    background-image: url(../img/winternovelty/topbgt.webp);
    background-size: cover;
    background-position: top right;
    text-align: left;
  }
}

@media screen and (max-width: 768px) {
  .TOPheight>p:nth-of-type(1)>span {
    font-size: 20px;
  }

  .TOPheight>p:nth-of-type(2)>span {
    margin: 10px 0 30px;
    font-size: min(7vw, 36px) !important;
  }

  .TOPheight>p:nth-of-type(3)>span {
    font-size: 16px;
    line-height: 25px;
  }

  .TOPheight {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: calc(100vh - 60px);
    margin-top: 60px;
    padding: 0 5% 50px;
    background-image: url(../img/winternovelty/topbgs.webp);
    background-size: cover;
    background-position: top right;
    text-align: left;
  }
}

@media screen and (max-width: 500px) {

  .TOPheight {
    max-height: 500px;
  }

  .TOPheight>p:nth-of-type(1)>span {
    font-size: 16px;
  }

  .TOPheight>p:nth-of-type(2)>span {
    margin: 10px 0 20px;
    font-size: min(7vw, 36px) !important;
  }

  .TOPheight>p:nth-of-type(3)>span {
    font-size: 14px !important;
  }

}

/*----------------------------------------------
  category
------------------------------------------------*/
.category ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.category li {
  background: #FB7922;
  transition: ease .2s;
}

.category a {
  display: block;
}

.category img {
  border: solid 3px #FB7922;
}

.category p {
  padding: 20px 5px;
  color: #fff;
  text-align: center;
}

.category span {
  display: block;
  font-weight: 900;
  font-size: 18px;
}

.category li:hover {
  opacity: .6;
}

@media screen and (max-width: 900px) {
  .category ul {
    grid-template-columns: 1fr 1fr;
  }

  .category span {
    font-size: 16px;
  }
}

@media screen and (max-width: 500px) {
  .category ul {
    grid-template-columns: 1fr;
    width: 90%;
  }
}

/*----------------------------------------------
  reason
------------------------------------------------*/

.reason ul {
  background: #fff;
  border-radius: 20px;
  padding: 20px 100px 50px;
}

.reason-h3 {
  padding: 30px 0 10px;
  font-size: 24px;
  color: #FB7922;
}

.reason-h3::before {
  content: "●";
  padding-right: 10px;
  color: #FB7922;
}

@media screen and (max-width: 1000px) {
  .reason ul {
    padding: 20px 50px 50px;
  }
}

@media screen and (max-width: 500px) {
  .reason ul {
    padding: 0 30px 30px;
    border-radius: 10px;
  }
}

/*----------------------------------------------
  item
------------------------------------------------*/
section.item {
  position: relative;
  padding-top: 150px;
  margin: 0 auto;
}

.item .title {
  position: absolute;
  z-index: 1;
  top: 110px;
  right: 0;
  left: 0;
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
  padding: 20px;
  border-radius: 100px;
  background-color: #FB7922;
  color: #fff;
  font-size: 30px;
  text-align: center;
  letter-spacing: 2px;
}

.itemin {
  padding: 100px 100px 50px;
  background: #fff;
  border-radius: 20px;
}

/*見出し*/
.itemin-heading {
  display: flex;
  align-items: center;
  border: solid 3px #FB7922;
}

.itemin-heading-img {
  min-height: 400px;
  background-size: cover;
  background-position: center;
}

.img01 {
  background-image: url(../img/winternovelty/heading01.webp);
}

.img02 {
  background-image: url(../img/winternovelty/heading02.webp);
}

.img03 {
  background-image: url(../img/winternovelty/heading03.webp);
}

.itemin-heading div {
  width: 50%;
  padding: 30px;
}

.itemin-heading-h3 {
  font-size: 24px;
  color: #FB7922;
  margin-bottom: 30px;
  line-height: 40px;
}

.itemin-heading-about {
  display: flex;
  align-items: center;
  padding: 30px 0 0;
}

.itemin-heading-about img {
  max-width: 400px;
  width: 100%;
}


/*アイテム紹介*/
.itemin-group {
  margin: 80px 0 0;
}

.itemin-group-h3 {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 24px;
  color: #FB7922;
  margin: 30px 0 20px;
}

.itemin-group-h3::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 35px;
  background: #FB7922;
}

.itemin-group ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px 100px;
  margin: 20px 0 0;
}

.itemin-group ul.itemin-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2%;
}

.itemin-group ul.itemin-group-grid p {
  margin-top: 10px;
  text-align: center;
  font-weight: 900;
}

.itemin-group-h4 {
  margin: 10px 0 5px;
  font-size: 20px;
}

.itemin-group-p {
  margin: 5px 0;
  font-size: 14px;
  color: #333;
}

.itemin-group-calendar {
  display: block;
  max-width: 400px;
  width: 100%;
  margin: 50px auto 0;
  padding: 15px;
  background: #FB7922;
  border-radius: 50px;
  box-shadow: 0 3px 6px #00000016;
  font-size: 20px;
  color: #fff;
  text-align: center;
  transition: ease .2s;
}

.itemin-group-calendar:hover {
  opacity: .7;
}

.itemin-group-flex {
  display: flex;
  align-items: center;
  gap: 30px;
}

.itemin-group-flex img {
  display: block;
  width: 40%;
}

@media screen and (max-width: 1200px) {
  .item .title {
    font-size: 24px !important;
    top: 65px;
  }

  section.item {
    position: relative;
    margin: 0 auto;
    padding-top: 100px;
  }
}

@media screen and (max-width: 1100px) {
  .itemin {
    background: #fff;
    border-radius: 20px;
    padding: 100px 50px 50px;
  }

  .itemin-group ul {
    gap: 50px;
  }
}

@media screen and (max-width: 1000px) {
  .itemin-heading {
    flex-direction: column;
  }

  .itemin-heading div {
    width: 100%;
  }

  .itemin-heading-img {
    min-height: 400px;
  }

  .itemin-heading-about {
    flex-direction: column;
    gap: 30px;
  }

  .itemin-heading-h3 {
    line-height: 24px;
    margin-bottom: 20px;
  }

  .itemin-heading br {
    display: none;
  }
}

@media screen and (max-width: 768px) {

  .itemin-heading-img {
    min-height: 250px;
  }

  .itemin-heading-h3 {
    line-height: 24px;
    margin-bottom: 10px;
  }

  .item .title {
    font-size: 20px !important;
  }

  .itemin-group ul {
    grid-template-columns: 1fr;
  }

  .itemin-group-h4 {
    font-size: 18px;
  }

  .itemin-group ul.itemin-group-grid {
    grid-template-columns: 1fr 1fr;
  }

  .itemin-group-flex {
    flex-direction: column;
  }

  .itemin-group-flex img {
    width: 100%;
  }

  .itemin-group-calendar {
    padding: 15px;
    font-size: min(4.5vw, 16px) !important;
  }
}

@media screen and (max-width: 500px) {
  .itemin-heading {
    border: none;
  }

  .itemin-heading-img {
    border: solid 3px #FB7922;
  }

  .itemin-heading div {
    padding: 10px 0 0;
  }

  .itemin {
    padding: 60px 30px 30px;
    border-radius: 10px;
  }

  .item .title {
    padding: 15px;
    font-size: 16px !important;
    letter-spacing: 1px;
  }
}

/*----------------------------------------------
  wrap-up
------------------------------------------------*/
.wrap-up {
  text-align: center;
}

.wrap-up img {
  display: block;
  max-width: 400px;
  width: 70%;
  margin: 0 auto;
}

.wrap-up-p {
  margin-top: 50px;
  font-size: 20px;
  font-weight: 900;
  line-height: 40px;
}


@media screen and (max-width: 500px) {
  .wrap-up {
    text-align: left;
  }

  .wrap-up-p {
    margin-top: 30px;
    line-height: 30px !important;
  }
}

/*----------------------------------------------
  banner
------------------------------------------------*/
.banner {
  text-align: center;
}

.spe-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  width: min(85vw 1632px, 1000px);
  margin: 20px auto 50px;
}

@media screen and (max-width: 767px) {
  .spe-box {
    grid-template-columns: 1fr 1fr;
  }
}