@charset "utf-8";
/*==================================
見出し
==================================*/
.shop_title h1 {
  font-size: 120%;
  letter-spacing: 0.1em;
  text-align: center;
}
.shop_title h1 span {
  font-size: 80%;
}

.shop_title h1 a,
.shop_title h1 a:visited,
.shop_title h1 a:hover {
  color: #ffe600;
}

.cateTit {
  font-size: 20px;
  line-height: 1.4;
  font-weight: bold;
  color: #000000;
  border-left: 5px solid #17bef5;
  padding: 5px 0 4px 20px;
  margin: 30px 0 15px 0;
}
.cateTit span {
  font-size: 15px;
  font-weight: normal;
}

.subTit {
  font-size: 113.333%;
  line-height: 1.4;
  border-left: 5px solid #17bef5;
  padding: 5px 0px 4px 15px;
  margin: 20px 0 10px;
}

.red {
  color: #FF0000;
  font-weight: bold;
}

@media screen and ( max-width:768px ) {
.shop_title h1 {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0;
}
.shop_title h1 span,
.shop_title h1 a,
.shop_title h1 b {
  display: block;
}

.cateTit {
  padding-left: 10px;
  margin: 15px 0;
}

.cateTit span {
  display: block;
}

.subTit {
  font-size: 100%;
  padding-left: 10px;
}
}


/*==================================
フォーム関連
==================================*/
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="search"],
textarea,
select {
  background-color: #fff;
  border: 1px solid #bebebe;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  background: #f0f8fa;
  border: 1px solid #16BDF5;
}
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="search"],
textarea,
select,
button[type="submit"] {
  outline: none;
}

.formcate input[type="text"],
.formcate input[type="number"],
.formcate input[type="tel"],
.formcate input[type="email"],
.formcate input[type="search"] {
  box-sizing: border-box;
  height: 52px;
  line-height: 40px;
  padding: 5px 10px;
}

input[type="number"] {
  -moz-appearance:textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.formcate select {
  box-sizing: border-box;
  height: 52px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../../../common/images/arrow_down.png);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px 12px;
  padding: 5px 40px 5px 10px;
}

input::-webkit-input-placeholder {
  color: #ccc;
  font-weight: normal;
}
input:-ms-input-placeholder {
  color: #ccc;
  font-weight: normal;
}
input::-moz-placeholder {
  color: #ccc;
  font-weight: normal;
}


/*==================================
タイトル
==================================*/
#titBox {
  text-align: center;
  padding: 30px 0;
  margin: 0;
}

#titBox h2 {
  padding: 0;
  margin: 0;
}

#titBox .food_sub_title {
  margin-top: .5em;
}

#titBox .food_sub_title::before {
  display: none;
}

@media print, screen and ( min-width:769px ) {
#titBox h2 br {
  display: none;
}

#titBox .food_sub_title br {
  display: inline;
}
}

@media screen and ( max-width:768px ) {
#titBox {
  padding: 5px 0 20px 0;
}

#titBox h2 {
  line-height: 1.5;
}
}


/*==================================
ステップ表示
==================================*/
#stepPosition {
  margin: 0 auto 15px auto !important;
}

#stepPosition div {
  width: 100%;
  height: 0;
  text-indent: -9999em;
  background: url(../images/step_position_01.png) no-repeat center center / contain;
  padding-top: 4.3%;
}
#stepPosition div#stPo02 {
  background-image: url(../images/step_position_02.png);
}
#stepPosition div#stPo03 {
  background-image: url(../images/step_position_03.png);
}
#stepPosition div#stPo04 {
  background-image: url(../images/step_position_04.png);
}
#stepPosition div#stPo05 {
  background-image: url(../images/step_position_05.png);
}
#stepPosition div#stPo06 {
  background-image: url(../images/step_position_06.png);
}

@media screen and ( max-width:700px ) {
#stepPosition {
  margin-bottom: 10px!important;
}

#stepPosition div {
  background-position: 0 0;
  background-size: cover;
  padding-top: 30px;
}

#stepPosition div#stPo02 {
  background-position: -109px 0;
}
#stepPosition div#stPo03 {
  background-position: -218px 0;
}
#stepPosition div#stPo04 {
  background-position: -340px 0;
}
#stepPosition div#stPo05,
#stepPosition div#stPo06 {
  background-position: right 0;
}
}


/*==================================
コンテンツ
==================================*/
#maincantents .inner {
  width: 96%;
  max-width: 1020px;
  margin: 0 auto;
}

#reservationContents {
  margin: 0 0 50px 0;
}

.reservationSearch {
  line-height: 40px;
  text-align: center;
  padding: 10px 0;
}

.reservationSearch b {
  font-size: 20px;
  color: #607d8b;
}

.formcate .reservationSearch input,
.formcate .reservationSearch select {
  height: 40px;
  line-height: 28px;
  margin-left: 5px;
}

.formcate .reservationSearch select {
  width: 180px;
}

.formcate .reservationSearch input[type="search"] {
  width: 20%;
}

.formcate .reservationSearch input[type="submit"] {
  width: 60px;
  color: #fff;
  text-align: center;
  background-color: #16bdf5;
  border: none;
  margin-left: -1px;
}
.formcate .reservationSearch input[type="submit"]:hover {
  opacity: 0.5;
  transition: all 0.5s ease 0s;
}

@media print, screen and ( min-width:769px ) {
.reservationSearch dl,
.reservationSearch dt,
.reservationSearch dd {
  display: inline;
}

.formcate .reservationSearch select {
  margin-right: 15px;
}
}

@media screen and ( max-width:768px ) {
.reservationSearch {
  font-size: 86.667%;
  text-align: left;
}

.reservationSearch b {
  display: none;
}

.reservationSearch dl {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.reservationSearch dl:nth-child(2) {
  margin-bottom: 7px;
}

.reservationSearch dt,
.reservationSearch dd {
  display: table-cell;
}

.reservationSearch dt {
  width: 7em;
}

.formcate .reservationSearch dd input[type="search"] {
  width: 80%; 
  width : -webkit-calc(100% - 49px) ;
  width : calc(100% - 49px) ;
  margin: 0 !important;
}
.formcate .reservationSearch dd input[type="submit"] {
  width: 50px;
}

.formcate .reservationSearch dd select {
  width: 100%;
  margin: 0 !important;
}
}


/*==================================
ボタン関連
==================================*/
/*   2カラム   */
.btBoxTwin {
  width: 90%;
  max-width: 630px;
  margin: 0 auto;
}

.btBoxTwin li {
  box-sizing: border-box;
  width: 50%;
  float: left;
  padding-left: 15px;
}
.btBoxTwin li:first-child {
  padding: 0 15px 0 0;
}

@media screen and ( max-width:768px ) {
.btBoxTwin li {
  padding-left: 10px;
}
.btBoxTwin li:first-child {
  padding: 0 10px 0 0;
}
}

/*   ボタンデザイン   */
.moveBt,
.backBt {
  width: 300px;
  margin: 30px auto 0 auto;
}

.moveBt a,
.moveBt input,
.backBt a,
.backBt input {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 60px;
  text-align: center;
  padding: 10px;
  border: none;
}
.moveBt a:hover,
.moveBt input:hover,
.backBt a:hover,
.backBt input:hover {
  opacity: 0.5;
  transition: all 0.5s ease 0s;
}

.moveBt a,
.moveBt input {
  line-height: 40px;
  color: #fff;
  background-color: #16BDF5;
}
.moveBt a,
.moveBt a:visited,
.moveBt a:hover {
  color: #fff;
  text-decoration: none;
}

.backBt a,
.backBt input {
  line-height: 38px;
  background-color: #ededed;
  border: 1px solid #333;
}
.backBt a,
.backBt a:visited,
.backBt a:hover {
  color: #333;
  text-decoration: none;
}

.moveBt .cartNo {
  box-sizing: border-box;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 40px;
  display: block;
  line-height: 36px;
  text-indent: 0;
  color: #16BDF5;
  font-weight: bold;
  background-color: #fff;
  border: 2px solid #16BDF5;
  border-radius: 20px;
}

@media screen and ( max-width:768px ) {
.moveBt,
.backBt {
  width: 60%;
  letter-spacing: 0;
}

.btBoxTwin li .moveBt,
.btBoxTwin li .backBt {
  width: 100%;
}

.moveBt .cartNo {
  width: 32px;
  height: 32px;
  font-size: 86.667%;
  line-height: 30px;
  border-radius: 16px;
}
}


/*==================================
ご予約の流れ
==================================*/
#reservationFlow {
  margin: 0 0 50px 0;
}

#reservationFlow .inner p,
#reservationFlow .inner li  {
  line-height: 1.5;
}

#reservationFlow .inner > ul,
#reservationFlow .inner > ol {
  margin-left: 1.2em;
}

#reservationFlow .inner > ul,
#reservationFlow .inner > ol {
  margin-left: 1.2em;
}

#reservationFlow .inner > ul > li,
#reservationFlow .inner > ol > li {
  position: relative;
  margin-bottom: 5px;
}
#reservationFlow .inner > ul > li:last-child,
#reservationFlow .inner > ol > li:last-child {
  margin-bottom: 30px;
}

#reservationFlow .inner > ul > li:before {
  content: "※";
  position: absolute;
  top: 0;
  left: -1.2em;;
  display: block;
  width: 1em;
  height: 1em;
}

#reservationFlow .inner > ol > li:before {
  content: "\02460";
  position: absolute;
  top: 0;
  left: -1.2em;;
  display: block;
  width: 1em;
  height: 1em;
  color: #17bef5;
}
#reservationFlow .inner > ol > li:nth-child(2):before {
  content: "\02461";
}
#reservationFlow .inner > ol > li:nth-child(3):before {
  content: "\02462";
}
#reservationFlow .inner > ol > li:nth-child(4):before {
  content: "\02463";
}
#reservationFlow .inner > ol > li:nth-child(5):before {
  content: "\02464";
}
#reservationFlow .inner > ol > li:nth-child(6):before {
  content: "\02465";
}
#reservationFlow .inner > ol > li:nth-child(7):before {
  content: "\02466";
}
#reservationFlow .inner > ol > li:nth-child(8):before {
  content: "\02467";
}
#reservationFlow .inner > ol > li:nth-child(9):before {
  content: "\02468";
}
#reservationFlow .inner > ol > li:nth-child(10):before {
  content: "\02469";
}

#reservationFlow .inner > ol > li .btDemo {
  color: #fff;
  white-space: nowrap;
  background-color: #16BDF5;
  border-radius: 2px;
  padding: 3px 7px;
  margin: 0 2px;
}

#reservationFlow .inner p b {
  color: #FF0000;
}

@media screen and ( max-width:768px ) {
#reservationFlow {
  margin: 0 0 30px 0;
}

#reservationFlow .inner p,
#reservationFlow .inner li  {
  font-size: 86.667%;;
}
}

/*   モーダルボタン   */
#flowPopUpLink,
#flowPopUpLink .toCart {
  margin-top: 0;
}

#flowPopUpLink .moveBt a {
  height: 40px;
  line-height: 20px;
}

/*   モーダル   */
.flowPopUpBg {
  background-color: #666 !important;
}
#colorbox.flowPopUpBg   {
  background-color: transparent !important;
}
#colorbox.flowPopUpBg  #cboxContent,
#colorbox.flowPopUpBg  #cboxLoadedContent {
  padding: 0;
}

#colorbox.flowPopUpBg  #cboxContent {
  width: auto;
  height: auto;
  margin: 0;
}

#colorbox.flowPopUpBg  #reservationFlow {
  margin: 10px 0;
}

#colorbox.flowPopUpBg  .titlecate {
  background-color: #ECF5FA;
  padding: 15px 0;
}

#colorbox.flowPopUpBg  .inner {
  width: 96%;
  margin: 0 auto;
}


/*==================================
店舗一覧
==================================*/
#storeList > ul > li {
  border-bottom: 1px dashed #ccc;
}
#storeList > ul > li:nth-child(odd) {
  background-color: #ecf5fa;
}

#storeList > ul > li > ul > li {
  float: left;
  width: 25%;
}

#storeList > ul > li > ul > li a {
  position: relative;
  display: block;
  line-height: 1.3;
  padding: 15px 10px 15px 30px;
}
#storeList > ul > li > ul > li a:before {
  content: "\025a0";
  position: absolute;
  top: 15px;
  left: 10px;
  display: block;
  width: 1em;
  height: 1em;
  color: #ed4099;
}

#storeList > ul > li > ul > li a,
#storeList > ul > li > ul > li a:visited,
#storeList > ul > li > ul > li a:hover {
  color: #333;
  text-decoration: none;
}
#storeList > ul > li > ul > li a:hover {
  opacity: 0.5;
  transition: all 0.5s ease 0s;
}

#storeList > ul > li > ul > li a b {
  display: block;
  color: #0e4675;
}

#storeListError {
  font-size: 20px;
  color: #ff0000;
  font-weight: bold;
  text-align: center;
  margin: 30px 0;
}

@media screen and ( max-width:768px ) {
#storeList > ul > li {
  border: none;
}
#storeList > ul > li:nth-child(odd) {
  background-color: transparent;
}

#storeList > ul > li > ul > li {
  float: none;
  width: 100%;
  border-bottom: 1px dashed #ccc;
}
#storeList > ul > li > ul > li:nth-child(odd) {
  background-color: #ecf5fa;
}

#storeList > ul > li > ul > li a {
  padding: 5px 5px 5px 25px;
}
#storeList > ul > li > ul > li a:before {
  top: 5px;
  left: 5px;
}

#storeListError {
  font-size: 16px;
}
}


/*==================================
受け取り日選択
==================================*/
#receiveDay {
  margin-bottom: 50px !important;
}

#receiveDay .reservationSearch dl {
  display: table;
  width: 100%;
  table-layout: fixed;
}

#receiveDay .reservationSearch dt,
#receiveDay .reservationSearch dd {
  display: table-cell;
  vertical-align: middle;
}

#receiveDay .reservationSearch dt {
  width: 13.5em;
  white-space: nowrap;
}
#receiveDay .reservationSearch dt b {
  line-height: 1;
}
#receiveDay .reservationSearch dd {
  padding-left: 5px;
}

.formcate #receiveDay .reservationSearch select,
.formcate #receiveDay .reservationSearch input {
  width: 100%;
  margin: 0;
}

@media screen and ( max-width:768px ) {
#receiveDay .reservationSearch dl,
#receiveDay .reservationSearch dd {
  display: block;
  padding: 0;
}

#receiveDay {
  margin-bottom: 30px !important;
}

#receiveDay .reservationSearch dt {
  display: none;
}
}


/*==================================
商品検索
==================================*/
@media screen and ( max-width:768px ) {
#searchArticle .reservationSearch dt {
  width: 6em;
}
}


/*==================================
商品一覧
==================================*/
.articleList > ul {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.articleList > ul:last-child {
  border: none;
  padding: 0;
  margin: 0;
}

.articleList > ul  > li {
  position: relative;
  float: left;
  width: 25%;
  line-height: 1.5;
}

.articleList > ul > li a {
  display: block;
  padding: 10px;
}
.articleList > ul > li a,
.articleList > ul > li a:visited,
.articleList > ul > li a:hover {
  color: #333;
  text-decoration: none;
}
.articleList > ul > li a:hover {
  opacity: 0.5;
  transition: all 0.5s ease 0s;
}

.articleList > ul > li a img {
  width: 100%;
  margin-bottom: 5px;
  opacity: 1 !important;
}

.articleList > ul  > li a .articleName {
  color: #0e4675;
  font-weight: bold;
  margin-bottom: 5px;
}

.articleDiscount {
  font-size: 86.667%;
  line-height: 1;
  text-align: center;
  background-color: #fbd9eb;
  padding: 5px 0 4px 0;
  margin-bottom: 5px;
}
.articleDiscount b {
  color: #ed4099;
  font-weight: bold;
}
.articleDiscount span {
  text-decoration: line-through;
}

.articleList > ul  > li a .articlePrice {
  line-height: 1;
  color: #ff0000;
  font-weight: bold;
  text-align: center;
  margin: 5px 0;
}
.articleList > ul  > li a .articlePrice b {
  font-size: 24px;
}

.articleList > ul  > li a .articleCode {
  font-size: 86.667%;
  line-height: 1;
  text-align: center;
  margin: 7px 0 5px 0;
}

.articleList > ul  > li a .articleCopy {
  font-size: 86.667%;
  text-align: justify;
}

/*   売り切れ表示   */
.articleList > ul  > li.soldOut:before,
.articleList > ul  > li.orderEnd:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 2px;
  opacity: 0.25;
  pointer-events: none;
}
.articleList > ul  > li.soldOut:hover:before,
.articleList > ul  > li.orderEnd:hover:before {
  opacity: 0.35;
  transition: all 0.5s ease 0s;
}
.articleList > ul  > li.soldOut:after,
.articleList > ul  > li.orderEnd:after {
  content: "当日分売り切れ";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 96%; 
  width : -webkit-calc(100% - 10px) ;
  width : calc(100% - 10px) ;
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background-color: #ff0000;
  border-radius: 2px;
  margin-top: -20px;
  pointer-events: none;
}
.articleList > ul  > li.orderEnd:after {
  content: "承り終了";
}
.articleList > ul  > li.soldOut a:hover,
.articleList > ul  > li.orderEnd a:hover {
  opacity: 1;
}

/*   残りわずか   */
.articleList > ul  > li.stockFew a {
  position: relative;
  padding-bottom: 30px;
}
.articleList > ul  > li.stockFew a:after {
  content: "残りわずか";
  position: absolute;
  bottom: 0;
  left: 5px;
  width: 96%; 
  width : -webkit-calc(100% - 10px) ;
  width : calc(100% - 10px) ;
  height: 30px;
  line-height: 30px;
  color: #ed4099;
  font-weight: bold;
  text-align: center;
  background-color: #fbd9eb;
  border-radius: 2px;
}

/*   カートを見る  */
.toCart {
  width: 80%;
  max-width: 500px;
  margin: 30px auto 50px auto;
}

@media screen and ( max-width:970px ) {
.articleList > ul  > li a .articlePrice {
  line-height: 1.3;
  margin-top: 2px;
}

.articleList > ul  > li a .articlePrice span {
  display: block;
}
}

@media screen and ( max-width:768px ) {
.articleList > ul {
  border: none;
  padding: 0;
  margin: 0;
}

.articleList > ul  > li {
  clear: both;
  float: none;
  width: 100%;
  border-bottom: 1px dashed #ccc;
}
.articleList > ul  > li:nth-child(odd) {
  background-color: #ecf5fa;
}

.articleList > ul > li a {
  padding: 10px 5px;
}
.articleList > ul > li a:after {
  content:".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

.articleList > ul > li a div {
  float: left;
  width: 70px;
}

.articleList > ul > li a img {
  margin: 0;
}

.articleList > ul > li a p {
  margin-left: 80px !important;
}

.articleList > ul  > li a .articlePrice {
  line-height: 1;
  text-align: left;
}

.articleList > ul  > li a .articlePrice span {
  display: inline;
}

.articleList > ul  > li a .articleCode {
  text-align: left;
}

.articleList > ul  > li a .articleCopy {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*   売り切れ表示   */
.articleList > ul  > li.soldOut:after,
.articleList > ul  > li.orderEnd:after {
  height: 30px;
  line-height: 30px;
  margin-top: -15px;
}

/*   残りわずか   */
.articleList > ul  > li.stockFew a {
  padding-bottom: 30px;
}

.articleList > ul  > li.stockFew a:after {
  bottom: 5px;
  font-size: 86.667%;
  height: 20px;
  line-height: 20px;
  visibility: visible;
}

/*   カートの中を見る  */
.toCart {
  margin: 15px auto 30px auto;
}
}

/*==================================
商品詳細
==================================*/
#articleDetail > dl > dt {
  float: left;
  width: 40%;
}
#articleDetail > dl > dt img {
  width: 100%;
}

#articleDetail > dl > dd {
  padding-left: 15px;
  margin-left: 40%;
}

#articleDetail .articleCopy {
  margin-bottom: 15px;
}

/*   商品スペック   */
#articleDetail .articleSpec {
  line-height: 1.5;
  background-color: #ededed;
  border-radius: 2px;
  padding: 10px;
}

#articleDetail .articleSpec p {
  margin-top: 3px;
}
#articleDetail .articleSpec p:first-child {
  margin-top: 0;
}

/*   アレルゲン情報   */
#articleDetail .articleAllergen {
  margin-top: 15px;
}

#articleDetail .articleAllergen b {
  display: block;
  color: #607D8B;
  line-height: 1;
  background-color: #ECF5FA;
  padding: 5px;
  margin-bottom: 3px;
}

/*   備考欄   */
#articleDetail .articleRemarks {
  font-size: 86.667%;
  border-top: 1px dashed #ccc;
  padding-top: 10px;
  margin-top: 10px;
}
.articleSpec +  .articleRemarks {
  border: none !important;
  padding-top: 0 !important;
  margin-top: 15px !important;
}

/*   金額表示・カートボタン   */
#articlePriceBox {
  margin-bottom: 15px;
}

#articlePriceBox li {
  position: relative;
}

#articlePriceBox .articleStandard {
  line-height: 1.3;
  margin-bottom: 5px;
}

#articlePriceBox dl {
  display: table;
  width: 100%;
  table-layout: fixed;
}

#articlePriceBox dt,
#articlePriceBox dd {
  display: table-cell;
  vertical-align: middle;
}

#articlePriceBox .articlePrice {
  font-size: 18px;
  line-height: 1.3;
  color: #ff0000;
  font-weight: bold;
}
#articlePriceBox .articlePrice b {
  font-size: 24px;
}

#articlePriceBox .articleDiscount span,
#articlePriceBox .articlePrice span {
  display: inline-block;
}

#articlePriceBox dd {
  width: 260px;
  text-align: right;
  white-space: nowrap;
}

#articlePriceBox dd input {
  height: 40px;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}
#articlePriceBox dd input[type="number"] {
  width: 3em;
  padding: 5px;
  margin-left: 5px;
}

#articlePriceBox dd input[type="button"] {
  width: 8.5em;
  color: #fff;
  text-align: center;
  background-color: #16bdf5;
  border: none;
  margin-left: 5px;
}
#articlePriceBox dd input[type="button"]:hover {
  opacity: 0.5;
  transition: all 0.5s ease 0s;
}

/*   売り切れ表示   */
#articlePriceBox li.soldOut:before,
#articlePriceBox li.orderEnd:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 2px;
  opacity: 0.25;
  pointer-events: none;
}

#articlePriceBox li.soldOut:after,
#articlePriceBox li.orderEnd:after {
  content: "当日分売り切れ";
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%; 
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background-color: #ff0000;
  border-radius: 2px;
  margin-top: -20px;
  pointer-events: none;
}

#articlePriceBox li.orderEnd:after {
  content: "承り終了";
}

#articlePriceBox li.soldOut input,
#articlePriceBox li.orderEnd input {
  pointer-events: none;
}
#articlePriceBox li.soldOut input[type="button"],
#articlePriceBox li.orderEnd input[type="button"] {
  background-color: #999;
}

/*   残りわずか   */
#articleDetail li.stockFew .articleStandard {
  margin-bottom: 8px;
}

#articleDetail li.stockFew .articleStandard:after {
  content: "残りわずか";
  color: #ed4099;
  font-weight: bold;
  background-color: #fbd9eb;
  border-radius: 2px;
  padding: 3px 8px;
  margin-left: 5px;
}

@media screen and ( max-width:960px ) {
#articleDetail {
  margin-top: 20px !important;
}

#articlePriceBox d,
#articlePriceBox dt,
#articlePriceBox dd {
  display: block;
  width: 100%;
}

#articlePriceBox .articleStandard {
  margin-bottom: 5px;
}

#articlePriceBox .articlePrice {
  text-align: center;
  margin-bottom: 10px;
}

#articlePriceBox dd {
  text-align: center;
}

#articlePriceBox dd input[type="button"] {
  width: 10em;
}
}

@media screen and ( max-width:700px ) {
#articleDetail > dl > dt {
  float: none;
  width: 90%;
  margin: 10px auto;
}

#articleDetail > dl > dd {
  padding: 0;
  margin: 0;
}

/*   商品スペック   */
#articleDetail .articleSpec {
  padding: 5px;
}

/*   アレルゲン情報   */
#articleDetail .articleAllergen {
  text-align: center;
}
}

/*==================================
ショッピングカート
==================================*/
#cartCopy {
  text-align: center;
  margin: 15px 0 30px 0;
}
#cartCopy b {
  color: #ff0000;
}

/*   商品表示   */
#cartTable {
  width: 100%;
  line-height: 1.3;
  border-collapse: collapse;
}

#cartTable th,
#cartTable td  {
  border: 1px solid #ccc;
  padding: 5px 10px;
}

#cartTable th {
  text-align: center;
  color: #16bdf5;
  font-weight: bold;
  background-color: #ecf5fa;
}

#cartTable td {
  font-size: 86.667%;
  vertical-align: middle;
}

#cartTable td.cartImg {
  width: 100px;
}
#cartTable td.cartImg img {
  width: 100%;
}

#cartTable td.cartName {
  color: #0e4675;
  font-weight: bold;
}
#cartTable td.cartName p {
  line-height: 1;
  color: #ff0000;
  background-color: #fadce9;
  padding: 5px;
  margin-top: 5px;
}

#cartTable td.cartPrice,
#cartTable td.cartPrice2 {
  width: 90px;
}

#cartTable td.cartPrice,
#cartTable td.cartPrice2 {
  text-align: right;
}

#cartTable td.inputNo,
#cartTable td.changeNo {
  width: 80px;
  text-align: center;
}
#cartTable td.inputNo input,
#cartTable td.changeNo input {
  width: 100%;
  text-align: center;
  height: 40px;
}

#cartTable td.changeNo input {
  color: #fff;
  background-color: #999;
  border: none;
}
#cartTable td.changeNo input:hover {
  opacity: 0.5;
  transition: all 0.5s ease 0s;
}

/*   金額表示   */
#cartAllPrice {
  font-size: 120%;
  line-height: 1;
  text-align: right;
  margin: 10px 0;
}

#cartAllPrice span {
  color: #ff0000;
}

#cartAllPrice span b {
  font-size: 150%;
}

#cartKome {
  font-size: 86.667%;
  line-height: 1;
  text-align: right;
}

@media screen and ( max-width:768px ) {
#cartCopy {
  margin: 15px 0;
}
}

@media screen and ( max-width:700px ) {
/*   商品表示  */
#cartTable,
#cartTable tbody,
#cartTable tr,
#cartTable td {
  box-sizing: border-box;
  width: 100%;
  display: block;
  border: none;
  padding: 0;
}

#cartTable {
  border-top: 1px dashed #ccc;
}

#cartTable tr {
  min-height: 90px;
  border-bottom: 1px dashed #ccc;
  padding: 10px 0;
}
#cartTable tr:first-child {
  display: none;
}
#cartTable tr:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

#cartTable td {
  display: inline-block;
  width: auto !important;
  text-align: left !important;
}

#cartTable td.cartImg {
  float: left;
  display: block;
  width: 23% !important;
}

#cartTable td.cartName {
  display: block;
  margin-bottom: 10px;
  margin-left: 25%;
}

#cartTable td.cartPrice,
#cartTable td.inputNo,
#cartTable td.cartPrice2,
#cartTable td.changeNo {
  line-height: 30px;
}

#cartTable td.cartPrice {
  margin-left: 2%;
}

#cartTable td.inputNo {
  position: relative;
}
#cartTable td.inputNo:before {
  content: "×";
  margin: 0 2px;
}
#cartTable td.inputNo:after {
  content: "＝";
  margin: 0 2px;
}

#cartTable td.inputNo input,
#cartTable td.changeNo input {
  width: 50px;
  height:30px;
}
#cartTable td.inputNo input {
  line-height: 20px;
}
#cartTable td.changeNo input {
  margin-left: 2px;
}

#cartbox tr.cartAllPrice td:first-child {
  display: none;
}

#cartbox tr.cartAllPrice td:nth-child(3) {
  position: relative;
  line-height: 1;
  margin-bottom: 7px;
}
#cartbox tr.cartAllPrice td:nth-child(3):before {
  content: "消費税";
  margin-right: 3px;
}

#cartbox tr.cartAllPrice td:last-child {
  position: relative;
  color: #C63256;
  font-size: 150%;
  line-height: 1;
  font-weight: 600;
}
#cartbox tr.cartAllPrice td:last-child:before {
  content: "合計（税込）";
  font-size: 80%;
}

/*   金額表示   */
#cartAllPrice,
#cartKome {
  text-align: left;
}

#cartAllPrice {
  font-size: 100%;
  margin-bottom: 5px;
}

#cartKome {
  line-height: 1.5;
}
}

/*==================================
お客様情報入力
==================================*/
#orderTable {
  display: table;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#orderTable dl {
  display: table-row;
}

#orderTable dt,
#orderTable dd {
  display: table-cell;
  padding: 20px;
  vertical-align: top;
  border: 1px solid #ccc;
}

#orderTable dt {
  width: 13em;
  color: #16bdf5;
  font-weight: bold;
  background-color: #ecf5fa;
}
#orderTable dt sup {
  color: #ff0000;
  margin-left: 5px;
}

#orderTable dd {
  padding-bottom: 15px;
}

#orderTable dd a,
#orderTable dd a:visited {
  color: #0e4675;
  text-decoration: underline;
}
#orderTable dd a:hover {
  color: #0e4675;
  text-decoration: none;
}

#orderTable dd span,
#orderTable dd p {
  font-size: 86.667%;
}

#orderTable dd p {
  margin-top: 5px;
}

#orderTable dd input[type="text"],
#orderTable dd input[type="tel"],
#orderTable dd input[type="email"],
#orderTable dd select {
  width: 100%;
}

#orderTable dd.addBox input:first-child,
#orderTable dd.addBox input:nth-child(2) {
  width: 5em;
  margin-left: 5px;
}

#orderTable dd.addBox input:first-child {
  margin-right: 5px;
}

#orderTable dd.addBox input:nth-child(2) {
  width: 5em;
  margin-left: 5px;
}

#orderTable dd.addBox select {
  width: 130px; 
  margin-right: 10px;
}
#orderTable dd.addBox input:nth-child(5) {
  width: 70%; 
  width : -webkit-calc(100% - 140px) ;
  width : calc(100% - 140px) ;
}

#orderTable dd.addBox input:nth-child(6) {
  margin-top: 10px;
}

#orderTable dd.addBox p {
  margin-bottom: 10px;
}

#orderTable dd li {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding: 0 0 0 10px;
}
#orderTable dd li:nth-child(odd) {
  clear: both;
  float: left;
  padding: 0 10px 0 0;
}

#orderTable dd #emailBox input:first-child {
  width: 70%; 
  width : -webkit-calc(100% - 140px) ;
  width : calc(100% - 140px) ;
}

#orderTable dd #emailBox input:nth-child(2) {
  width: 130px; 
  height: 52px;
  line-height: 40px;
  color: #fff;
  background-color: #16BDF5;
  border: none;
  margin-left: 10px;
}
#orderTable dd #emailBox input:nth-child(2):hover {
  opacity: 0.5;
  transition: all 0.5s ease 0s;
}

#emailLinkList b {
  color: #607D8B;
  font-weight: normal;
}

/*   購入特典   */
#orderTable #benefitsBox li {
  margin-top: 10px;
}
#orderTable #benefitsBox li:first-child,
#orderTable #benefitsBox li:nth-child(2) {
  margin: 0;
}

#orderTable #benefitsBox dl {
  box-sizing: border-box;
  display: table;
  width: 100%;
  border: 1px solid #ccc;
}

#orderTable #benefitsBox dl dt,
#orderTable #benefitsBox dl dd {
  display: table-cell;
  vertical-align: middle;
  background-color: transparent;
  border: none;
  padding: 10px;
}
#orderTable #benefitsBox dl dt {
  width: auto;
  color: #333;
  font-weight: normal;
}
#orderTable #benefitsBox dl dd {
  width: 72px;
}
#orderTable #benefitsBox li input {
  width: 52px;
  text-align: center;
}

/*   エラー   */
.err {
  font-size: 86.667%;
  line-height: 1;
  color: #FF0000;
  font-weight: bold;
  background-color: #fadce9;
  padding: 5px;
  margin-top: 5px;
}

/*   個人情報同意   */
#agreeCheckBox {
  width: 80%;
  border: solid 1px #c8c8c8;
  padding: 30px;
  margin: 30px auto;
}

#agreeCheckBox > ul > li {
  position: relative;
  margin-left: 1em;
}
#agreeCheckBox > ul > li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: -1em;
}
#agreeCheckBox > ul > li:nth-of-type(n+2) {
  margin-top: 5px;
}

#agreeCheckBox > p {
  text-align: justify;
  margin: 15px auto;
}
#agreeCheckBox > p b {
  color: #16bdf5;
}

#agreeCheck label {
  display: block;
  width: 300px;
  line-height: 58px;
  text-align: center;
  border: solid 1px #c8c8c8;
  margin: 0 auto;
  cursor: pointer;
  transition: .3s;
}
#agreeCheck label:hover {
  background-color: #eee;
}

#agreeCheck input {
  font-size: 20px;
  margin-right: 5px;
}

#confirmBtn input {
  transition: .3s;
}
#confirmBtn.el_notAgree {
  cursor: not-allowed;
}
#confirmBtn.el_notAgree input {
  background-color: #666;
  pointer-events: none;
}

@media screen and ( max-width:700px ) {
/*   購入特典   */
#orderTable #benefitsBox li {
  width: 100%;
  border-bottom: 1px dashed #ccc;
  padding: 0 0 10px 0;
  margin: 0 0 10px 0 !important;
}

#orderTable #benefitsBox dl {
  border: none;
}

#orderTable #benefitsBox dl dt,
#orderTable #benefitsBox dl dd {
  border: none;
  padding: 0;
}

#orderTable #benefitsBox dl dd {
  width: 52px;
}
}

@media screen and ( max-width:768px ) {
#orderTable,
#orderTable dl,
#orderTable dt,
#orderTable dd {
  display: block;
  width: 100%;
  border: none;
  padding: 0;
}

#orderTable dt {
  padding: 5px;
}

#orderTable dd {
  margin: 5px 0 15px 0;
}

#orderTable dl:last-child dd {
  margin: 5px 0 0 0;
}

#orderTable dd span {
  display: block;
}

#orderTable dd li {
  padding: 0 0 0 5px;
}
#orderTable dd li:nth-child(odd) {
  padding: 0 5px 0 0;
}

#emailLinkList {
  text-align: center;
}
#emailLinkList b {
  display: block;
}
#emailLinkList a {
  display: inline-block;
}

/*   個人情報同意   */
#agreeCheckBox {
  width: 90%;
  max-width: 500px;
  font-size: 90%;
  padding: 15px;
}

#agreeCheck {
  width: 90%;
  max-width: 300px;
  margin: 0 auto;
}
#agreeCheck label {
  width: 100%;
}
}

/*==================================
予約内容確認
==================================*/
.orderConfirmBox {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

#orderConfirmStore b {
  font-size: 20px;
  color: #ed4099;
  margin-right: 10px;
}

#orderConfirmCopy {
  text-align: center;
  margin-top: 30px;
}

/*   購入特典   */
#benefitscCnfirm dd span {
  display: inline-block;
}
#benefitscCnfirm dd span:before {
  content: "、";
}
#benefitscCnfirm dd span:first-child:before {
  content: "";
}

@media screen and ( max-width:768px ) {
.orderConfirmBox {
  border-bottom: 1px solid #ccc;
}

#orderConfirmStore {
  font-size: 86.667%;
}

#orderConfirmStore b {
  display: block;
  font-size: 18px;
  line-height: 1;
  margin: 0 0 5px 0;
}
}

/*==================================
予約完了
==================================*/
#orderSuccessCopy {
  font-size: 20px;
  color: #607d8b;
  text-align: center;
  font-weight: bold;
  margin-top: 15px;
}

.orderSuccessCopy2 {
  font-size: 18px;
  color: #FF0000;
  font-weight: bold;
}

#printArea {
  display: none;
}

@media screen and ( max-width:768px ) {
#orderSuccessCopy {
  font-size: 110%;
  letter-spacing: 0;
}

.orderSuccessCopy2 {
  font-size: 100%;
  line-height: 1.5;
  letter-spacing: 0;
  background-color: #fadce9;
  border-radius: 3px;
  padding: 5px;
}

.orderSuccessCopy2 span {
  display: block;
}
}


/*==================================
お問い合わせ窓口
==================================*/
#contactBox {
  margin-top: 50px;
}

#contactBox p {
  text-align: center;
}


/*==================================
企画一覧
==================================*/
/*  タイトル調整   */
#portalTit  {
  margin-bottom: 20px;
}

#portalTit .shop_title {
  margin-bottom: 10px;
}

#portalTit .shop_title h1 {
  font-size: 200%;
  letter-spacing: 8px;
}

#portalTit .shop_title + .inner h2.food_title {
  font-size: 150%;
  padding: 0;
  margin: 0;
}

@media screen and ( max-width:768px ) {
#portalTit {
  padding: 5px 0 10px 0;
  margin: 0;
}

#portalTit .shop_title h1 {
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 4px;
  padding: 10px 0;
}

#portalTit .shop_title + .inner h2.food_title {
  font-size: 120%;
}
}

/*  企画一覧   */
#planBox {
  margin-top: 0;
}

#planList {
  text-align: center;
}

#planList ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#planList li {
  flex-basis: 25%;
  padding: 20px 10px 0 10px;
}

#planList li a {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  border: solid 2px #e1eaea;
}
#planList li a,
#planList li a:visited,
#planList li a:hover {
  color: #333;
  text-decoration: none;
}
#planList li a:hover {
  opacity: 0.5;
  transition: all 0.5s ease 0s;
}

#planList li a div {
  position: relative;
  width: 100%;
  height: 0;
  background-position: center center;
  background-size: cover;
  padding-top: 75%;
}

#planList li a div hr {
  display: none;
}

#planList li a p {
  font-size: 93.333%;
  font-weight: bold;
  text-align: center;
  padding: 10px 20px 10px 10px;
  background-image: url(../../../common/images/arrow.png);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 15px;
  letter-spacing: 0;
}

@media screen and ( max-width:500px ) {
#planList li {
  flex-basis: 100%;
  padding: 0;
  margin-top: 15px;
}

#planList li a div {
  padding-top: 30%;
}
}


/*==================================
モーダル
==================================*/
.cartPopUpBg {
  background-color: #666 !important;
}
#colorbox.cartPopUpBg   {
  background-color: transparent !important;
}
#colorbox.cartPopUpBg  #cboxContent,
#colorbox.cartPopUpBg  #cboxLoadedContent {
  border-radius: 10px;
  padding: 0;
}

.cartPopUpCopy {
  box-sizing: border-box;
  width: 300px;
  text-align: center;
  padding: 20px;
}

.benefitsPopUpCopy {
  box-sizing: border-box;
  width: 500px;
  text-align: center;
  padding: 20px;
}

.benefitsPopUpCopy .moveBt {
  margin-top: 15px;
}
.benefitsPopUpCopy .backBt {
  width: 200px;
  margin-top: 15px;
}
.benefitsPopUpCopy .backBt a,
.benefitsPopUpCopy .backBt input {
  height: 40px;
  line-height: 18px;
}

@media screen and ( max-width:768px ) {
.benefitsPopUpCopy {
  width: 100%;
}

.benefitsPopUpCopy .moveBt {
  width: 100%;
  max-width: 300px;
}
}


/*==================================
HP・店舗 切替
==================================*/
.hpOnly {
}

.storeOnly {
  display: none !important;
}
/*==================================
パーティーフーズ　アレルゲン
==================================*/

.party_foods_allergen {
    width: 42%;
    margin: 30px auto 0;
}
.party_foods_allergen img {
    width: 100%;
}

@media screen and ( max-width:768px ) {
.party_foods_allergen {
    width: 75%;
    margin: 30px auto 0;
	}
}