@charset "UTF-8";
/* pc <--> sp
-------------------------------------- */
#mediaQuery { display: none; font-family: 'sp'; }

@media all and (min-width: 768px) { #mediaQuery { font-family: 'pc'; } }

@media all and (max-width: 767px) { .viewPc { display: none !important; } }

@media all and (min-width: 768px) { .viewSp { display: none !important; } }

/* clearfix
-------------------------------------- */
.cf:after { content: ''; display: block; clear: both; }

/*  module
================================================ */
.mod_color_pink { color: #f53c7f; }

.mod_btn01 { margin: auto; max-width: 240px; text-align: center; font-size: 14px; }

.mod_btn01 a { display: block; padding: 12px; text-decoration: none; background: #6f6f6f; color: #fff; border: 1px solid #fff; font-weight: 700; border-radius: 45px; }

@media all and (min-width: 768px) { .mod_btn01 { max-width: 400px; font-size: 18px; }
  .mod_btn01 a { padding: 16px; border-radius: 60px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn01 a:hover { background: #a2a2a2; } }

/*  #container
================================================ */
#container { font-size: 12px; line-height: 1.5; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 500; overflow: hidden; }

#container img { width: 100%; max-width: 100%; height: auto; }

#container .alpha { display: block; text-decoration: none; }

@media all and (min-width: 768px) { #container { font-size: 14px; }
  #container img { width: auto; }
  #container .alpha { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  #container .alpha:hover { opacity: .7; } }

/*  #seat-spec
================================================ */
#seat-spec { background: #fafafa; }

#seat-spec .inner { padding: 20px 10px 50px; }

#seat-spec .tit { width: 242px; margin: auto; }

#seat-spec .pcWrap { display: none !important; }

#seat-spec .spWrap { margin-top: 40px; }

#seat-spec select { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; width: 100%; padding: 8px 10px; font-size: 16px; background: url(../img/ico_arw01.png) no-repeat #fff; background-size: 12px 7px; background-position: right 10px center; border: 1px solid #dbdbdb; border-radius: 3px; }

#seat-spec select::-ms-expand { display: none; }

#seat-spec .table { margin-top: 20px; }

#seat-spec table { table-layout: fixed; width: 100%; }

#seat-spec th, #seat-spec td { box-sizing: border-box; }

#seat-spec thead th { height: 80px; padding: 20px; vertical-align: middle; text-align: center; font-size: 16px; color: #f53c7f; border: none; background-image: repeating-linear-gradient(30deg, transparent, transparent 6px, #fdd7e5 6px, #fdd7e5 8px); }

#seat-spec thead th:nth-child(1) { width: 45%; }

#seat-spec thead th:nth-child(2) { border-left: 4px solid #fafafa; }

#seat-spec tbody td { word-break: break-all; padding: 30px 20px; border-top: none; border-bottom: 1px solid #dbdbdb; background: #FEF9FB; color: #333; }

#seat-spec tbody td:nth-child(1) { padding: 30px 12px; background: #fafafa; }

#seat-spec tbody td:nth-child(1) .name { position: relative; }

#seat-spec tbody td:nth-child(1) .name:before { content: ''; position: absolute; top: 50%; left: -10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 6px; height: 10px; background: url(../img/ico_arw02.png) no-repeat; background-size: contain; }

#seat-spec .noteWrap { margin-top: 40px; }

#seat-spec .noteWrap .note { overflow: hidden; }

#seat-spec .noteWrap .note + .note { margin-top: 8px; }

#seat-spec .noteWrap .note .num { float: left; }

#seat-spec .noteWrap .note .txt { display: block; padding-left: 25px; }

@media all and (min-width: 768px) { #seat-spec { /*  #hover画像 ---------------------------------------- */ }
  #seat-spec .inner { padding: 70px 0 100px; }
  #seat-spec .spWrap { display: none !important; }
  #seat-spec .pcWrap { display: block !important; margin-top: 70px; }
  #seat-spec .box { width: 85%; margin: 0 auto; padding: 60px; background: #fff; }
  #seat-spec .tit { width: 533px; margin: auto; }
  #seat-spec .tabs { overflow: hidden; }
  #seat-spec .tabs .tab { float: left; padding: 6px 40px; cursor: pointer; background: #f6f6f6; border-radius: 40px; font-weight: 700; }
  #seat-spec .tabs .tab + .tab { margin-left: 10px; }
  #seat-spec .tabs .tab.is_active { background: #FDD7E5; }
  #seat-spec .contentWrap { position: relative; margin-top: 30px; padding: 0; }
  #seat-spec .contentWrap .tab-pane { display: none; }
  #seat-spec .contentWrap .tab-pane.is_active { display: block; }
  #seat-spec thead th { padding: 5px; }
  #seat-spec thead th:nth-child(1) { width: 190px; }
  #seat-spec thead th + th { border-left: 4px solid #fff; }
  #seat-spec tbody td { background: #fff; }
  #seat-spec tbody td:nth-child(1) { background: #fff; }
  #seat-spec tbody td:nth-child(3), #seat-spec tbody td:nth-child(5), #seat-spec tbody td:nth-child(6), #seat-spec tbody td:nth-child(7) { text-align: center; }
  #seat-spec tbody td:nth-child(2n) { background: rgba(249, 137, 177, 0.04); }
  #seat-spec tbody td.is_left { text-align: left !important; }
  #seat-spec .seat-name { display: block; }
  #seat-spec .seat-name span { display: none; position: absolute; top: 50%; width: 330px; height: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 10em; }
  #seat-spec .seat-name:hover { position: relative; text-decoration: none; }
  #seat-spec .seat-name:hover span { border: none; display: block; }
  #seat-spec .seat-name:hover span img { width: 330px; height: auto; border: 5px solid #ccc; } }

@media only screen and (min-width: 768px) and (max-width: 991px) { #seat-spec thead th { font-size: 13px; }
  #seat-spec thead th:nth-child(1) { width: 17%; }
  #seat-spec tbody td { padding: 30px 10px; }
  #seat-spec .box { width: 95%; padding: 30px 10px; } }

@media only screen and (max-width: 1199px) and (min-width: 992px) { #seat-spec thead th { font-size: 13px; }
  #seat-spec thead th:nth-child(1) { width: 190px; }
  #seat-spec .box { padding: 40px; } }
