@charset "UTF-8";

@media screen and (min-width: 768px) {
  header {
    padding: 0;
  }

  #key .photo {
    height: 927px;
  }
}

#sec1 {
  padding: 0 0 10vw 0;
  position: relative;
}

#sec1 h2 {
  text-align: center;
  letter-spacing: 0.17em;
  font-size: 6vw;
  padding-bottom: 5vw;
}

#sec1 .wrap {
  padding-bottom: 0;
}

#sec1 .txt {
  padding: 0 5% 10vw;
}

#sec1 .catch {
  font-size: 3.5vw;
  line-height: 1.4;
  position: absolute;
  right: 0;
  bottom: -40vw;
  z-index: 1;
}

#sec1 .catch span {
  letter-spacing: 0.11em;
}

@media screen and (min-width: 768px) {
  #sec1 {
    padding: 0;
    text-align: center;
  }

  #sec1 h2 {
    font-size: 26px;
    padding-bottom: 50px;
  }

  #sec1 .wrap {
    padding-bottom: 113px;
  }

  #sec1 .txt {
    padding: 0 0;
    max-width: 518px;
    margin: 0 auto;
  }

  #sec1 .catch {
    font-size: 20px;
    line-height: 28px;
    text-align: left;
    bottom: -100px;
  }
}

#sec2 {
  padding: 0 0 15vw 0;
}

#sec2 .lead {
  padding-bottom: 10vw;
}

#sec2 .lead h2 {
  text-align: center;
  font-size: 6.5vw;
  letter-spacing: 0.11em;
  padding-bottom: 5vw;
}

#sec2 .lead .info {
  padding: 5vw 5%;
}

#sec2 .menu {
  border-top: 1px solid #7f7f7f;
  border-bottom: 1px solid #7f7f7f;
  padding: 10vw 5%;
  margin-bottom: 10vw;
}

#sec2 .menu h3 {
  font-size: 5.5vw;
  padding-bottom: 5vw;
  letter-spacing: 0.25em;
}

#sec2 .menu dt {
  padding-bottom: 20px;
}

@media screen and (min-width: 768px) {
  #sec2 {
    padding: 95px 0 137px;
  }

  #sec2 .lead {
    padding-bottom: 87px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #sec2 .lead h2 {
    text-align: left;
    font-size: 29px;
    padding-bottom: 37px;
  }

  #sec2 .lead .photo {
    margin-left: 50px;
  }

  #sec2 .lead .info {
    padding: 8px 0 0px 0;
    width: 255px;
  }

  #sec2 .menu {
    padding: 54px 0 48px;
    width: 814px;
    margin: 0 auto 100px;
  }

  #sec2 .menu h3 {
    font-size: 23px;
    padding-bottom: 25px;
  }

  #sec2 .menu .photo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    padding: 20px 0 20px;
  }

  #sec2 .menu dd {
    width: 293px;
  }

  #sec2 .menu dt {
    padding: 0 32px 0 35px;
  }

  #sec2 .bnr-shared {
    width: 535px;
    margin: 0 auto;
  }

  #sec2 .bnr-shared a {
    font-size: 21px;
    line-height: 78px;
  }

  #sec2 .bnr-shared a:before {
    width: 25px;
    right: 25px;
  }
}

#sec1 .photo {
  height: 65vw;
}

#sec3 .lead {
  padding: 10vw 5%;
}

#sec3 .lead h2 {
  text-align: center;
  letter-spacing: 0.17em;
  font-size: 6vw;
  padding-bottom: 5vw;
  line-height: 1.9em;
}

#sec3 h3 {
  text-align: center;
  font-size: 5.2vw;
  padding-bottom: 5vw;
  letter-spacing: 0.17em;
  line-height: 1.8em;
}

#sec3 .attend {
  border: 1px solid #81807d;
  padding: 10vw 5%;
}

#sec3 .attend h3 {
  letter-spacing: 0.25em;
}

#sec3 .attend ul li {
  position: relative;
  padding: 0 0 0 15px;
}

#sec3 .attend ul li:before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0px;
}

#sec3 .banner {
  padding: 10vw 0 5vw;
}

#sec3 .banner li {
  margin-bottom: 5vw;
  margin-left: 45%;
}

#sec3 .banner li.bnr-shared {
  width: auto;
  margin-left: 25%;
}

#sec3 .banner li.bnr-shared a:after {
  transform: rotate(90deg);
}

#sec3 .takeout {
  background: url("../img/takeout/bg.jpg") repeat center 0;
  padding: 10vw 8%;
  margin-top: 10vw;
  color: #fff;
}

#sec3 .popupbtn a::after {
  background: url(../img/takeout/ico_pop_w.png) no-repeat center / 100%;
}

#sec3 .arrowbtn a::after {
  background: url(../img/shared/arow1.png) no-repeat center / 100%;
}

@media screen and (max-width: 768px) {
  #sec3 .bnr-shared {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  #sec3 {
    padding-bottom: 100px;
  }

  #sec1 .photo {
    height: 672px;
  }

  #sec3 .wrap {
    max-width: 1120px;
  }

  #sec3 .lead {
    padding: 120px 0 70px;
    text-align: center;
  }

  #sec3 .lead h2 {
    font-size: 26px;
    padding-bottom: 46px;
  }

  #sec3 .lead .txt {
    width: 1000px;
    margin: 0 auto;
  }

  #sec3 h3 {
    font-size: 23px;
    padding-bottom: 56px;
  }

  #sec3 .attend {
    width: 776px;
    margin: 0 auto;
    padding: 51px 30px 42px 257px;
    position: relative;
  }

  #sec3 .attend h3 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 92px;
    padding: 0;
  }

  #sec3 .attend ul li {
    padding: 0 0 9px 15px;
  }

  #sec3 .banner {
    width: 780px;
    margin: 0 auto;
    padding: 50px 0 73px;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    justify-content: end;
    align-items: end;
  }

  #sec3 .banner li {
    text-align: right;
    margin-bottom: 13px;
    margin-left: 0;
  }

  #sec3 .banner li.bnr-shared {
    width: 234px;
    margin: 12px 0 0;
    margin-bottom: 35px;
    float: right;
  }

  #sec3 .banner li.bnr-shared a {
    justify-content: flex-start;
    font-size: 20px;
    line-height: 51px;
    padding: 0 0 0 25px;
  }

  #sec3 .banner li.bnr-shared a:before {
    background: url(../img/takeout/arow.png) no-repeat center/100%;
  }

  #sec3 .takeout {
    padding: 94px 30px 100px;
    text-align: center;
    margin: 141px 0 0;
  }

  #sec3 .takeout .bnr-shared {
    width: 386px;
  }

  #sec3 .takeout .txt {
    width: 706px;
    margin: 0 auto;
  }
}

#sec5 {
  padding: 15vw 0 0 0;
}

#sec5 h2 {
  line-height: 1;
  letter-spacing: 0.05em;
  font-size: 13vw;
  margin-bottom: -2vw;
  text-align: right;
}

#sec5 .info {
  padding: 10vw 8%;
}

#sec5 .info h3 {
  text-align: center;
  letter-spacing: 0.17em;
  font-size: 6vw;
  padding-bottom: 5vw;
}

#sec5 .info .txt p {
  padding-bottom: 15px;
}

#sec5 .company .info {
  border-top: 1px solid #969593;
  border-bottom: 1px solid #969593;
  margin: 10vw 5% 0;
}

#sec5 .company .info h3 {
  font-size: 5.2vw;
}

#sec5 .company .info .list dt {
  text-align: center;
  font-size: 15px;
  padding: 20px 0;
  letter-spacing: 0.13em;
}

@media screen and (min-width: 768px) {
  #sec5 {
    padding: 154px 0 0;
  }

  #sec5 .lead {
    position: relative;
    min-height: 727px;
    display: flex;
    align-items: center;
  }

  #sec5 .lead .photo {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
  }

  #sec5 h2 {
    font-size: 128px;
    margin-bottom: -18px;
  }

  #sec5 .info {
    padding: 0 0;
    width: 50%;
    text-align: center;
  }

  #sec5 .info h3 {
    font-size: 26px;
    padding-bottom: 50px;
  }

  #sec5 .info .txt {
    width: 515px;
    margin: 0 auto;
  }

  #sec5 .info .txt p {
    letter-spacing: 0.17em;
    padding-bottom: 26px;
  }

  #sec5 .company {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 717px;
  }

  #sec5 .company .photo {
    width: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  #sec5 .company .box {
    width: 50%;
    padding: 50px 0;
  }

  #sec5 .company .info {
    width: 515px;
    margin: 0 auto;
    padding: 68px 0 71px;
  }

  #sec5 .company .info h3 {
    font-size: 23px;
    padding-bottom: 42px;
  }

  #sec5 .company .info .list dt {
    font-size: 17px;
    padding: 44px 0 14px;
  }
}

@media screen and (min-width: 768px) {
  .remodal-close {
    width: 60px;
  }
}

/*# sourceMappingURL=takeout.css.map */

.pc_fl>div {
  width: 100%;
}

.pc_fl>div p {
  margin-top: 26px;
}

.pc_fl dl {
  display: flex;
  align-items: end;
}

.pc_fl dt {
  width: 100% !important;
  text-align: center !important;
}

@media screen and (min-width: 768px) {
  .pc_fl {
    display: flex;
    gap: 30px;
  }

}