/*==============================
	fv
==============================*/
.fv {
  width: 100%;
  height: 0;
  padding-top: 72.5%;
  position: relative;
}
.fv:before {
  content: "";
  width: 100%;
  height: 100%;
  background: url("../img/common/shadow.png") repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.fv h2 {
  width: 55%;
  background: #FFF;
  display: inline-block;
  text-align: center;
  line-height: 1.2;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin-top: 7%;
  padding: 5% 0;
  box-sizing: border-box;
  z-index: 2;
}
.fv h2 span {
  display: block;
  font-size: 0.8em;
}

@media screen and (min-width: 768px) {
  .fv {
    padding-top: 40%;
  }
  .fv h2 {
    width: 25%;
    margin-top: 3%;
    padding: 3% 0;
  }
}
/*==============================
	global
==============================*/
.mainContents {
  padding: 5% 0 15%;
}

@media screen and (min-width: 768px) {
  .mainContents {
    padding: 3% 0 8%;
  }
}
/*==============================
	txtLink
==============================*/
.txtLink {
  text-align: right;
  margin-right: 1rem;
}
.txtLink a {
  text-decoration: underline;
  position: relative;
  transition: .3s;
}
.txtLink a:after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 0px;
  border-top: 1px solid #222;
  border-right: 1px solid #222;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: .3s;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1rem;
  margin: auto;
}
.txtLink a:hover {
  opacity: .8;
}
.txtLink a:hover:after {
  right: -1.3rem;
}

/*==============================
	basicBtn
==============================*/
.basicBtn {
  width: 60%;
  text-align: center;
  margin: 0 auto;
}
.basicBtn a {
  width: 100%;
  display: inline-block;
  color: #314588;
  font-weight: bold;
  padding: 6% 0;
  border: solid 1px #314588;
  box-shadow: 0px 5px 0px 0px #e8eaf1;
  transition: .3s;
  position: relative;
}
.basicBtn a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1em;
  content: '';
  margin-top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 0px;
  border-top: 1px solid #314588;
  border-right: 1px solid #314588;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.basicBtn a:hover {
  background: #314588;
  color: #FFF;
}
.basicBtn a:hover:after {
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
}

.LinkBtns {
  width: 90%;
  max-width: 1020px;
  margin: 0 auto -5%;
}
.LinkBtns .basicBtn {
  margin-bottom: 5%;
}

@media screen and (min-width: 768px) {
  .basicBtn {
    width: 25%;
  }

  .LinkBtns {
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
  }
  .LinkBtns .basicBtn {
    margin: 0;
  }
  .LinkBtns .basicBtn:first-of-type {
    margin-right: 4%;
  }
}
/*==============================
	breadcrumb
==============================*/
.breadcrumb {
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 5%;
}
.breadcrumb li {
  font-size: 2.1333333333vw;
}
.breadcrumb li:last-child:after {
  content: none;
}
.breadcrumb li:after {
  content: "/";
  display: inline-block;
  margin: 0 1rem;
}
.breadcrumb li a {
  color: #222;
}

@media screen and (min-width: 768px) {
  .breadcrumb {
    margin-bottom: 4%;
  }
  .breadcrumb li {
    font-size: 0.8571428571vw;
  }
}
/*==============================
	takeoutInfo
==============================*/
.takeoutInfo {
  width: 100%;
  margin: 0 auto 1%;
  background: url("../img/common/bg.png") repeat center center #f6f6f6;
}
.takeoutInfo .wrap {
  width: 80%;
  margin: 0 auto;
  background: #f6f6f6;
  padding: 5% 0;
}
.takeoutInfo .wrap p {
  color: #314588;
  font-weight: bold;
  text-align: center;
}
.takeoutInfo .wrap p a {
  color: #314588;
  font-size: 1.2em;
}
.takeoutInfo .wrap p small {
  display: block;
  line-height: 1.4;
  margin-top: 10px;
}
.takeoutInfo .wrap p small span {
  font-size: 0.8em;
}

@media screen and (min-width: 768px) {
  .takeoutInfo {
    width: 90%;
    margin: 0 auto 1%;
  }
  .takeoutInfo .wrap {
    width: 70%;
    padding: 3% 0;
  }
  .takeoutInfo .wrap p {
    font-size: 1.2857142857vw;
  }
}
/*==============================
	btns
==============================*/
.btns {
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 6%;
}
.btns li {
  text-align: center;
  width: calc((100% / 2) - 2%);
  margin-bottom: 4%;
  display: inline-block;
  color: #314588;
  font-weight: bold;
  padding: 3% 0;
  border: solid 1px #314588;
  box-shadow: 0px 5px 0px 0px #e8eaf1;
  transition: .3s;
  position: relative;
  cursor: pointer;
}
.btns li:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1em;
  content: '';
  margin-top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 0px;
  border-top: 1px solid #314588;
  border-right: 1px solid #314588;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.btns li:hover {
  background: #314588;
  color: #FFF;
}
.btns li:hover:after {
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
}

@media screen and (min-width: 768px) {
  .btns li {
    width: calc((100% / 4) - 1%);
    padding: 1.5rem 0;
    margin-bottom: 2%;
  }
}
/*==============================
	secTtl
==============================*/
.secTtl {
  color: #314588;
  font-weight: bold;
  font-size: 3.7333333333vw;
  margin-bottom: 5%;
}
.secTtl span {
  font-size: 0.8em;
  vertical-align: middle;
  display: inline-block;
  margin-left: 1em;
}
.secTtl:before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1px;
  background: #314588;
  vertical-align: middle;
  margin-right: .5em;
}

@media screen and (min-width: 768px) {
  .secTtl {
    font-size: 1.7142857143vw;
    margin-bottom: 3%;
  }
  .secTtl:before {
    width: 2.5em;
  }
}
/*==============================
	menuList
==============================*/
.sec {
  padding: 8% 0 2%;
}

.menuList li {
  margin-bottom: 8%;
}
.menuList .thumb {
  margin-bottom: 4%;
}
.menuList .thumb img {
  width: 100%;
}
.menuList .txtArea h4 {
  font-weight: bold;
  border-bottom: solid 1px #222;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}
.menuList .txtArea .txt {
  margin-bottom: 1rem;
}
.menuList .txtArea .price {
  text-align: right;
  font-weight: bold;
  margin-bottom: 1rem;
}
.menuList .txtArea .note {
  font-size: 0.8em;
  margin-top: 2%;
}

.ico-takeout {
  display: inline-block;
  color: #FFF;
  background: #222;
  font-size: 1.0rem;
  padding: 3px 8px;
  position: relative;
}
.ico-takeout:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22contents%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22570px%22%20height%3D%22522px%22%20viewBox%3D%220%200%20570%20522%22%20style%3D%22enable-background%3Anew%200%200%20570%20522%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M198.3%2C109.2V75.2c0-13.4%2C10.9-24.3%2C24.3-24.3h124.7c13.4%2C0%2C24.3%2C10.9%2C24.3%2C24.3v33.9h50.9V75.2%20c0-41.5-33.7-75.2-75.2-75.2H222.6c-41.5%2C0-75.2%2C33.7-75.2%2C75.2v33.9H198.3z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M570%2C472.3c0%2C27.4-22.4%2C49.8-49.8%2C49.8H49.8C22.4%2C522%2C0%2C499.6%2C0%2C472.3V192.9c0-27.4%2C22.4-49.8%2C49.8-49.8h470.5%20c27.4%2C0%2C49.8%2C22.4%2C49.8%2C49.8V472.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center center;
  background-size: contain;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 8px;
}

.ico-limited {
  display: inline-block;
  color: #bf1717;
  border: solid 1px #bf1717;
  font-size: 1.0rem;
  padding: 3px 8px;
  position: relative;
  margin-top: 5px;
}

@media screen and (min-width: 768px) {
  .sec {
    padding: 5% 0;
  }

  .menuList li {
    margin-bottom: 5%;
  }

  .ico-takeout {
    font-size: 1.2rem;
  }

  .ico-limited {
    font-size: 1.2rem;
    margin-left: 1rem;
    margin-top: 0;
  }
}