/* va */
.cook__va {
  padding: 30px 0 65px;
  background: #FFF3F5 url("../img/common/bg01.png") repeat-x 0 100%;
}
@media screen and (max-width: 1110px) {
  .cook__va {
    padding: 2.7vw 0 5.86vw;
    background-size: 176px 6px;
  }
}
@media screen and (max-width: 767px) {
  .cook__va {
    padding: 9.2vw 0 10.4vw;
  }
}

.cook__va h1 {
  text-align: center;
  margin: 30px 10px 40px;
}
@media screen and (max-width: 1110px) {
  .cook__va h1 {
    margin: 2.7vw 0.9vw 3.6vw;
  }
}
@media screen and (max-width: 767px) {
  .cook__va h1 {
    margin: 0 6.4vw 6vw;
  }
}

.cook__va h2 {
  text-align: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 1110px) {
  .cook__va h2 {
    width: 67.84vw;
    margin: 0 auto 3.6vw;
  }

  .cook__va h2 img {
    width: 100%;
    line-height: 1;
  }
}
@media screen and (max-width: 767px) {
  .cook__va h2 {
    width: 87.73vw;
    margin: 8vw 6.4vw 6.67vw;
  }
}


/* nav */
.mainContents .cook__nav {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .mainContents .cook__nav {
    flex-wrap: wrap;
    width: 90vw;
    margin: 0 auto;
  }
}

.mainContents .cook__nav li {
  margin: 8px;
}
@media screen and (max-width: 1110px) {
  .mainContents .cook__nav li {
    width: 15.3vw;
    margin: 0.72vw;
  }
}
@media screen and (max-width: 767px) {
  .mainContents .cook__nav li {
    margin: 0 1vw 1.33vw;
    width: 27.73vw;
  }
}

@media screen and (max-width: 1110px) {
  .mainContents .cook__nav li a {
    display: block;
  }

  .mainContents .cook__nav li img {
    width: 100%;
  }
}


/* section */
.cook__sectionInner {
  position: relative;
  max-width: 1110px;
  width: 100%;
  margin: 0 auto;
  padding: 84px 0;
  text-align: center;
  box-sizing: border-box;
}
@media screen and (max-width: 1110px) {
  .cook__sectionInner {
    padding: 7.57vw 0;
  }
}
@media screen and (max-width: 767px) {
  .cook__sectionInner {
    padding: 11.2vw 6.4%;
  }
}

.cook__sectionTitle {
  width: 100%;
  margin: 0 0 30px;
  text-align: center;
}
@media screen and (max-width: 1110px){
  .cook__sectionTitle {
    margin: 0 0 2.7vw;
  }
}
@media screen and (max-width: 767px){
  .cook__sectionTitle {
    margin: 0 0 8vw;
  }
}

.cook__sectionTitle img {
  max-width: 100%;
}


.cook__section01 {
  background: url("../img/common/bg02.png") repeat-x 0 100%;
}

@media screen and (max-width: 1110px) {
  .cook__section01 {
    background-size: 176px 6px;
  }
}

.cook__section02 {
  background: url("../img/common/bg03.png") repeat-x 0 100%, #FFF9FA;
}

@media screen and (max-width: 1110px) {
  .cook__section02 {
    background-size: 176px 6px;
  }
}

.cook__section02 .cook__itemList li:nth-child(2)::after {
  position: absolute;
  content: "";
  top: 52%;
  right: -47px;
  width: 63px;
  height: 41px;
  background: url("../img/cook/make02_point.png") no-repeat center / contain;
  z-index: 1;
}
@media screen and (max-width: 1110px) {
  .cook__section02 .cook__itemList li:nth-child(2)::after {
    top: 52%;
    right: -4.23vw;
    width: 5.68vw;
    height: 3.69vw;
  }
}
@media screen and (max-width: 767px) {
  .cook__section02 .cook__itemList li:nth-child(2)::after {
    top: initial;
    right: 65%;
    bottom: -20%;
    width: 16.53vw;
    height: 16.27vw;
    background: url("../img/cook/make02_point_sp.png") no-repeat center / contain;
  }
}


/* itemList */
.cook__itemList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cook__itemList li {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: 15px;
  margin-right: 15px;
}
@media screen and (max-width: 1110px) {
  .cook__itemList li {
    width: 27.66vw;
    margin-left: 1.35vw;
    margin-right: 1.35vw;
  }
}
@media screen and (max-width: 767px) {
  .cook__itemList li {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .cook__itemList li:nth-child(n+2) {
    margin-top: 8vw;
  }
}

.cook__itemList li:nth-child(n+4) {
  margin-top: 50px;
}
@media screen and (max-width: 1110px) {
  .cook__itemList li:nth-child(n+4) {
    margin-top: 4.5vw;
  }
}
@media screen and (max-width: 767px) {
  .cook__itemList li:nth-child(n+4) {
    margin-top: 8vw;
  }
}

.cook__itemLink {
  display: inline-block;
  margin-top: 16px;
}
@media screen and (max-width: 1110px){
  .cook__itemLink {
    width: 20.72vw;
    margin: 1.44vw auto 0;
  }
}
@media screen and (max-width: 767px){
  .cook__itemLink {
    width: 40vw;
    margin: 3.73vw auto 0;
  }
}


/* movie */
.cook__movieWrap {
  position: relative;
  display: inline-block;
  width: 692px;
  margin: 0 auto;
}
@media screen and (max-width: 1110px) {
  .cook__movieWrap {
    width: 62.34vw;
  }
}
@media screen and (max-width: 767px) {
  .cook__movieWrap {
    width: 100%;
    margin-top: 8vw;
  }
}

.cook__movie {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
}

.cook__movie::before {
  content: '';
  display: block;
  padding-bottom: 56.25%;
  z-index: 1;
}

.cook__movie iframe {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.cook__movieText {
  margin: 0 0 10px;
  text-align: right;
  line-height: 1;
}
@media screen and (max-width: 1110px) {
  .cook__movieText {
    margin: 0 0 0.9vw;
  }
}
@media screen and (max-width: 767px) {
  .cook__movieText {
    margin: 0 0 2.267vw;
  }
}

.cook__movieBtn {
  position: relative;
  display: inline-block;
  margin-top: 40px;
  z-index: 1;
}
@media screen and (max-width: 1110px) {
  .cook__movieBtn {
    width: 28.83vw;
    margin-top: 3.6vw;
  }
}
@media screen and (max-width: 767px) {
  .cook__movieBtn {
    width: 60vw;
    margin-top: 8.8vw;
  }
}

.cook__movieDeco01 {
  position: absolute;
  top: -90px;
  left: -150px;
  z-index: 1;
}
@media screen and (max-width: 1110px) {
  .cook__movieDeco01 {
    width: 21.17vw;
    top: -8.1vw;
    left: -13.51vw;
  }
}
@media screen and (max-width: 767px) {
  .cook__movieDeco01 {
    width: 23.73vw;
    top: -12.67vw;
    left: 0;
  }
}

.cook__movieDeco02 {
  position: absolute;
  top: 208px;
  right: -120px;
  z-index: 1;
}
@media screen and (max-width: 1110px) {
  .cook__movieDeco02 {
    width: 12.7vw;
    top: 18.74vw;
    right: -10.81vw;
  }
}
@media screen and (max-width: 767px) {
  .cook__movieDeco02 {
    width: 27.6vw;
    top: 43.24vw;
    right: -3.8vw;
  }
}


/* banner */
.cook__asideBannerWrap {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
@media screen and (max-width: 1110px) {
  .cook__asideBannerWrap {
    padding: 0 1.8vw;
  }
}
@media screen and (max-width: 767px) {
  .cook__asideBannerWrap {
    padding: 0 6.4%;
  }
}

.cook__asideBanner {
  display: inline-block;
  margin: 10px auto;
}