#key {
  background-image: url("../img/takeout/key.jpg");
}

#key .key-ttl {
  font-size: 8vw;
  line-height: 9vw;
  letter-spacing: 0.08em;
  position: absolute;
  right: 3%;
  bottom: 10vw;
  z-index: 1;
}

@media only screen and (min-width: 768px) {
  #key .key-ttl {
    font-size: 90px;
    line-height: 80px;
    bottom: 68px;
    right: 28px;
  }
}

#sec1 {
  padding: 10vw 0;
  position: relative;
  z-index: 1;
}

#sec1:before {
  content: '';
  width: 50%;
  height: 100vw;
  background-image: url("../img/takeout/sec1-deco.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center top;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

#sec1 .img {
  width: 70%;
  margin: -6vw auto;
}

#sec1 .box {
  padding: 8vw 6vw 12vw;
}

#sec1 .box h2 {
  text-align: center;
  font-size: 5.2vw;
  line-height: 8vw;
  letter-spacing: 0.08em;
  margin-bottom: 5vw;
}

#sec1 .box h2 span {
  font-size: 6.5vw;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 0;
}

#sec1 .box h2 span:before {
  content: '';
  height: 1.8vw;
  background: #bfa664;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1vw;
  z-index: -1;
}

#sec1 .bg {
  margin: -5vw -5%;
}

@media only screen and (min-width: 768px) {
  #sec1 {
    padding: 194px 0 64px;
  }
  #sec1:before {
    width: 420px;
    height: 429px;
  }
  #sec1 .img {
    width: 525px;
    margin: 0;
    position: absolute;
    top: -105px;
    left: -71px;
  }
  #sec1 .box {
    width: 630px;
    margin-left: 438px;
    padding: 55px 30px 94px 80px;
  }
  #sec1 .box h2 {
    text-align: left;
    font-size: 40px;
    line-height: 62px;
    margin: 0 0 45px 4px;
  }
  #sec1 .box h2 span {
    font-size: 48px;
  }
  #sec1 .box h2 span:before {
    height: 12px;
    bottom: 3px;
  }
  #sec1 .box .txt {
    padding-right: 42px;
  }
  #sec1 .bg {
    margin: -58px 0 -56px 397px;
  }
}

#sec2 {
  position: relative;
  z-index: 0;
  padding-bottom: 15vw;
}

#sec2:before {
  content: '';
  width: 50%;
  height: 100vw;
  background-image: url("../img/takeout/sec2-deco1.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center top;
  position: absolute;
  left: 0;
  top: -30vw;
  z-index: -1;
}

#sec2:after {
  content: '';
  width: 50%;
  height: 100vw;
  background-image: url("../img/takeout/sec2-deco2.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center top;
  position: absolute;
  right: 0;
  bottom: -20vw;
  z-index: -1;
}

#sec2 .col {
  margin-top: 5vw;
}

#sec2 .col dl {
  font-size: 5.2vw;
  line-height: 8vw;
  letter-spacing: 0.08em;
  margin-bottom: 5vw;
}

#sec2 .col dl small {
  font-size: 4.8vw;
}

#sec2 .col dl dd {
  text-align: right;
}

#sec2 .col .btn-link {
  padding: 0 7%;
  margin-top: 6vw;
}

#sec2 .col .btn-link a {
  position: relative;
}

#sec2 .col .btn-link a:before {
  content: '';
  width: 6%;
  background-image: url("../img/takeout/cart-icon.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  position: absolute;
  left: 21%;
  top: 0;
  bottom: 1vw;
}

#sec2 .row2 {
  margin-top: 12vw;
}

@media only screen and (min-width: 768px) {
  #sec2 {
    padding-bottom: 93px;
  }
  #sec2:before {
    width: 601px;
    height: 1046px;
    top: -563px;
  }
  #sec2:after {
    width: 458px;
    height: 1046px;
    bottom: 10px;
  }
  #sec2 .col {
    width: 400px;
    margin-top: 28px;
  }
  #sec2 .col dl {
    font-size: 40px;
    line-height: 60px;
    margin: 0 33px 44px 0;
  }
  #sec2 .col dl small {
    font-size: 30px;
  }
  #sec2 .col dl dd {
    margin-top: 12px;
  }
  #sec2 .col .txt {
    margin-right: 32px;
  }
  #sec2 .col .btn-link {
    padding: 0;
    margin-top: 53px;
  }
  #sec2 .col .btn-link a:before {
    width: 27px;
    left: 87px;
    bottom: 0;
  }
  #sec2 .img {
    width: 720px;
  }
  #sec2 .row1 .col {
    float: left;
  }
  #sec2 .row1 .img {
    float: right;
    margin-right: -160px;
  }
  #sec2 .row2 {
    margin-top: 135px;
  }
  #sec2 .row2 .col {
    float: right;
    margin: 17px -30px 0 0;
  }
  #sec2 .row2 .col .btn-link {
    margin-top: 51px;
  }
  #sec2 .row2 .img {
    float: left;
    margin-left: -160px;
  }
}

#sec3 {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 13vw 5%;
  color: #fff;
  position: relative;
  z-index: 1;
}

#sec3 h2 {
  width: 68%;
  margin: 0 auto;
  font-size: 6vw;
  line-height: 8vw;
  letter-spacing: 0.08em;
  text-align: center;
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 3vw 0 3.8vw;
}

#sec3 .note {
  margin: 5vw 0 8vw;
}

#sec3 .tel {
  border: 1px solid;
  font-size: 4vw;
  line-height: 6vw;
  letter-spacing: 0.05em;
  padding: 3.5vw 0 3vw;
}

#sec3 .tel span {
  display: block;
  font-size: 4.5vw;
  letter-spacing: 0.05em;
  margin: 1vw 0 0;
}

#sec3 .tel span strong {
  font-size: 7vw;
  letter-spacing: 0.05em;
  font-weight: 400;
}

#sec3 .tel small {
  display: block;
  font-size: 2.5vw;
  letter-spacing: 0;
}

#sec3 .tel a:hover {
  text-decoration: none;
}

#sec3 .btn {
  width: 86%;
  margin: 8vw auto 0;
}

@media only screen and (min-width: 768px) {
  #sec3 {
    padding: 81px 192px 90px 192px;
    margin-bottom: 140px;
  }
  #sec3 h2 {
    width: 400px;
    font-size: 36px;
    line-height: 40px;
    padding: 25px 0 29px 15px;
  }
  #sec3 .note {
    margin: 34px 0 64px 46px;
    line-height: 30px;
  }
  #sec3 .tel {
    font-size: 28px;
    line-height: 36px;
    padding: 41px 0 33px;
  }
  #sec3 .tel span {
    font-size: 32px;
    margin: 12px 0 5px;
  }
  #sec3 .tel span strong {
    font-size: 52px;
  }
  #sec3 .tel small {
    font-size: 16px;
  }
  #sec3 .btn {
    width: 400px;
    margin: 41px auto 0;
  }
}