/* ==========================================================================  Desktops  -------------------------------------------------------------------------- */

/* font-size */

.performance.modal h2 {
  font-size: 28px;
}

h3,
.performance .modal th,
.result {
  font-size: 18px;
}

.cap {
  font-size: 11px;
}

.lineup .inner p,
.faq-modal p {
  font-size: 11px;
}

.copyright,
.lineup-modal dd {
  font-size: 10px;
}

/* common selector */

body {
  color: #333;
  min-width: 1000px;
}

a {
  color: #003893;
  cursor: pointer;
  text-decoration: none;
}

a:visited {
  color: #002560;
}

a:hover,
a:active,
a:focus {
  color: #004bc6;
  text-decoration: underline;
}

a:hover img {
  opacity: 0.8;
}

hr {
  border-top: 1px solid #ccc;
  margin: 32px 0;
}

.mt {
  margin-top: 16px;
}

.mb {
  margin-bottom: 16px;
}

.ml {
  margin-left: 16px;
}

.mr {
  margin-right: 16px;
}

::-moz-selection {
  background-color: #fff;
  color: #333;
}

::selection {
  background-color: #fff;
  color: #333;
}

::-moz-selection {
  background-color: #fff;
  color: #333;
}

#load {
  background-color: #fff;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

/* #header */

#header {
  zoom: 1;
  background-color: #fff;
  display: none;
  padding: 0 32px;
  position: fixed;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1000px;
  z-index: 100;
}

#header:after {
  content: '';
  display: block;
  clear: both;
}

#header .head-col {
  zoom: 1;
  height: 72px;
}

#header .head-col:after {
  content: '';
  display: block;
  clear: both;
}

#header .head-col .catch {
  float: left;
}

#header .head-col .head-img {
  float: right;
  margin-left: 16px;
}

#header h1 {
  float: left;
  padding: 8px 0;
}

/* #nav */

#nav {
  zoom: 1;
  float: right;
  padding: 16px 0;
}

#nav:after {
  content: '';
  display: block;
  clear: both;
}

#nav li {
  float: left;
  margin-left: 8px;
}

#nav a {
  display: block;
  text-indent: -9999px;
  height: 100%;
}

#nav .nav-concept {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  display: block;
  width: 83px;
  height: 42px;
  background-position: 0 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#nav .nav-concept:hover,
#nav .nav-concept.active {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  display: block;
  width: 83px;
  height: 42px;
  background-position: 0 -42px;
}

#nav .nav-performance {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  display: block;
  width: 127px;
  height: 43px;
  background-position: 0 -336px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#nav .nav-performance:hover,
#nav .nav-performance.active {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  display: block;
  width: 127px;
  height: 43px;
  background-position: 0 -379px;
}

#nav .nav-lineup {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  display: block;
  width: 96px;
  height: 42px;
  background-position: 0 -252px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#nav .nav-lineup:hover,
#nav .nav-lineup.active {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  display: block;
  width: 96px;
  height: 42px;
  background-position: 0 -294px;
}

#nav .nav-faq {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  display: block;
  width: 109px;
  height: 42px;
  background-position: 0 -168px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#nav .nav-faq:hover,
#nav .nav-faq.active {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  display: block;
  width: 109px;
  height: 42px;
  background-position: 0 -210px;
}

#nav .nav-shop {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  display: block;
  width: 106px;
  height: 43px;
  background-position: 0 -422px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#nav .nav-shop:hover,
#nav .nav-shop.active {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  display: block;
  width: 106px;
  height: 43px;
  background-position: 0 -465px;
}

#nav .nav-contact {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  display: block;
  width: 105px;
  height: 42px;
  background-position: 0 -84px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#nav .nav-contact:hover,
#nav .nav-contact.active {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  display: block;
  width: 105px;
  height: 42px;
  background-position: 0 -126px;
}

/* contents */

#contents {
  display: none;
}

#contents .content {
  margin: 0 auto;
  padding: 16px;
  position: relative;
  width: 80%;
  min-width: 1000px;
}

#contents .content h2 {
  margin-top: 50px;
}

#contents .wrap {
  display: table;
}

#contents .wrap .col {
  display: table-cell;
  vertical-align: top;
}

#contents .text {
  font-weight: bold;
  line-height: 1.5;
}

#contents .btn,
#contents .btn2 {
  cursor: pointer;
  display: block;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

/* for modal */
.mfp-container .content {
  margin: 0 auto;
  padding: 16px;
  position: relative;
  width: 80%;
  min-width: 1000px;
}

.mfp-container .content h2 {
  margin-top: 50px;
}

.mfp-container .wrap {
  display: table;
}

.mfp-container .wrap .col {
  display: table-cell;
  vertical-align: top;
}

/* .top */

.top {
  position: relative;
  height: 100vh;
}

.top0 {
  background-color: #45aae3;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 72px;
}

.top1,
.top4,
.top6,
.top8 {
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 1000px;
}

.top2,
.top5,
.top7,
.top9 {
  opacity: 0;
  position: absolute;
  bottom: 23px;
  left: 20%;
  z-index: 10;
}

.top3 {
  position: absolute;
  bottom: 400px;
  left: 25%;
  z-index: 10;
}

.top3.active .top3a {
  -webkit-animation: top3a 0.6s ease-out 1.8s 1 forwards;
  animation: top3a 0.6s ease-out 1.8s 1 forwards;
  opacity: 0;
  position: relative;
  left: 0;
}

.top3.active .top3b {
  -webkit-animation: top3b 0.6s ease-out 2.4s 1 forwards;
  animation: top3b 0.6s ease-out 2.4s 1 forwards;
  opacity: 0;
  position: relative;
  left: -20px;
}

.top3.active .top3c {
  -webkit-animation: top3c 0.6s ease-out 3s 1 forwards;
  animation: top3c 0.6s ease-out 3s 1 forwards;
  opacity: 0;
  position: relative;
  left: -40px;
}

@-webkit-keyframes top3a {
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
}

@keyframes top3a {
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
}

@-webkit-keyframes top3b {
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
}

@keyframes top3b {
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
}

@-webkit-keyframes top3c {
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
}

@keyframes top3c {
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
}

#news {
  background-color: #f5f5f2;
  border-top: 2px solid #003495;
  opacity: 0.8;
  position: absolute;
  top: 170px;
  right: 10%;
  width: 160px;
}

#news h2 {
  color: #003495;
  padding: 16px 16px 0;
}

#news li {
  border-bottom: 1px solid #003495;
  font-weight: bold;
  padding: 16px;
}

#news li:last-child {
  border: none;
}

#news .date {
  color: #003495;
  display: block;
}

/*.movie { -webkit-animation: movie .6s ease-out 4s 1 forwards; animation: movie .6s ease-out 4s 1 forwards; opacity: 0; position: absolute; right: 10%; bottom: 80px;z-index:1000; } */

@-webkit-keyframes movie {
  100% {
    opacity: 1;
    -webkit-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }
}

@keyframes movie {
  100% {
    opacity: 1;
    -webkit-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }
}

/* .concept */

.concept {
  background: url(../images/bg2.jpg) left center;
  background-size: cover;
  position: relative;
}

.concept h2 {
  margin-bottom: 16px;
}

.concept .point {
  zoom: 1;
  margin-top: -100px !important;
  position: relative;
  width: 660px;
  z-index: 10;
}

.concept .point:after {
  content: '';
  display: block;
  clear: both;
}

.concept .point dl {
  float: left;
  margin-right: 32px;
  width: 185px;
}

.concept .point dd {
  margin-top: 16px;
}

.concept .point .text {
  height: 90px;
}

.concept .btn {
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  line-height: 32px;
  margin: 0 auto;
  width: 100px;
  height: 32px;
}

.concept .btn:hover {
  background-color: #fff;
  color: #f1c828;
}

/* .performance */

.performance {
  background: url(../images/bg3.jpg) center center;
  background-size: cover;
}

.performance h2 {
  margin-bottom: 16px;
}

.performance .text {
  color: #fff;
  margin-bottom: 16px;
}

.performance ul {
  zoom: 1;
  width: 700px;
}

.performance ul:after {
  content: '';
  display: block;
  clear: both;
}

.performance li {
  float: left;
  margin-right: 16px;
  margin-bottom: 16px;
}

.performance .btn {
  border: 1px solid #fff;
  color: #fff;
  line-height: 46px;
  width: 200px;
  height: 46px;
}

.performance .btn:hover {
  background-color: #fff;
  color: #ee5f32;
}

/* .lineup */

.lineup {
  background: url(../images/bg42.jpg) center center;
  background-size: cover;
  background: #fff !important;
}

.lineup .content {
  position: relative;
}

.lineup .text {
  padding-top: 16px;
  padding-left: 32px;
}

.old_lineup {
  border: 1px solid #ccc;
  padding: 10px;
  clear: both;
  width: 260px;
  margin: 0 auto 30px;
  text-align: center;
  background: #fff;
  color: #333;
  font-size: 0.9em;
}

.old_lineup h3,
.old_lineup a {
  color: #333;
  font-size: 1.2em;
}

.slider {
  overflow: hidden;
  height: 400px;
}

.slider .inner {
  display: table;
  position: absolute;
  width: 200%;
  height: 100%;
  left: 0;
  top: 0;
}

.slider .inner.move {
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

.slider .col {
  text-align: center;
  padding: 8px;
  width: 9.09091%;
}

.slider dt {
  margin-bottom: 16px;
  position: relative;
  height: 216px;
}

.slider dt img {
  margin-left: -165px;
  opacity: 0;
  position: absolute;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  left: 50%;
  width: 330px;
}

.slider dt img.active {
  opacity: 1;
}

.slider .color {
  position: relative;
  overflow: hidden;
}

.slider .color ul {
  float: left;
  position: relative;
  left: 50%;
}

.slider .color li {
  float: left;
  position: relative;
  left: -50%;
}

.slider ul {
  zoom: 1;
}

.slider ul:after {
  content: '';
  display: block;
  clear: both;
}

.slider ul a {
  border-radius: 6px;
  cursor: pointer;
  display: block;
  float: left;
  margin: 8px;
  width: 12px;
  height: 12px;
}

.slider .color1 {
  background-color: #333;
}

.slider .color2 {
  background-color: #fff;
  border: 1px solid #333;
}

.slider .color3 {
  background-color: #d90000;
}

.slider .color4 {
  background-color: #698c00;
}

.slider .color5 {
  background-color: #aaa;
}

.slider .color6 {
  background-color: #556b2f;
}

.slider .color7 {
  background-color: #fbceb1;
}

.slider .color8 {
  background-color: #000080;
}

.slider .color9 {
  background-color: #8c0000;
}

.slider .color10 {
  background-color: #eacdcc;
}

.slider .color11 {
  background-color: #7685a6;
}

.slider .btn {
  border: 1px solid #333;
  color: #333;
  line-height: 26px;
  margin: 16px auto 0;
  width: 108px;
  height: 26px;
}

.slider .btn:hover {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

/* .faq */

.faq {
  background: url(../images/bg5.jpg) right center;
  background-size: cover;
}

.faq .text {
  color: #fff;
}

.faq dt {
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 8px;
}

.faq dt:hover,
.faq dt.active {
  color: #300042;
}

.faq dt::before {
  content: url(../images/icon-q.png);
  margin-right: 8px;
}

.faq dd {
  background-color: #fff;
  color: #300042;
  display: none;
  font-weight: bold;
  margin-bottom: 16px;
  padding: 16px;
}

.faq dd::before {
  content: url(../images/icon-a.png);
  margin-right: 8px;
}

.caution {
  margin-bottom: 32px;
}

.caution h2 {
  background-color: #eee;
  text-align: center;
  width: 100%;
}

.caution h2 img {
  margin: 0;
}

.caution ul {
  background: #371145;
  color: #fff;
  display: table;
  width: 100%;
  height: 100%;
}

.caution li {
  display: table-cell;
  text-align: center;
  padding: 16px;
  vertical-align: middle;
  width: 20%;
}

.caution li:nth-of-type(even) {
  background: #411c4f;
}

.caution h3 {
  height: 3em;
}

.caution p {
  padding: 0 16px;
  text-align: left;
  height: 4em;
}

.caution img {
  margin: 32px 0;
}

/* .shop */

.shop {
  position: relative;
  overflow: hidden;
  background: url(../images/bg4.jpg) left center;
  background-size: cover;
  position: relative;
}

.shop ul {
  float: left;
  position: relative;
}

.shop li {
  float: left;
  position: relative;
}

.shop h2 {
  margin-bottom: 16px;
}

.shop #map {
  margin-bottom: 16px;
  width: 100%;
  height: 434px;
}

.shop .btn {
  border: 1px solid #fff;
  color: #fff;
  line-height: 50px;
  margin: 0 6px 12px;
  width: 116px;
  height: 50px;
}

.shop .btn:hover {
  background-color: #fff;
  color: #4c92cf;
}

.shop .marker {
  background: #4c92cf;
  border: 1px solid #fff;
  color: #fff;
  line-height: 26px;
  text-align: center;
  width: 70px;
  height: 26px;
}

.shop .marker1 {
  background: #4c92cf;
  border-radius: 15px;
  color: #fff;
  line-height: 30px;
  text-align: center;
  width: 30px;
  height: 30px;
}

/* .contact */

.contact {
  background-image: url(../images/bg7.jpg);
  background-size: cover;
}

.contact h2 {
  margin-bottom: 16px;
}

.contact .text {
  color: #fff;
  margin-bottom: 16px;
}

.contact dl {
  zoom: 1;
  color: #fff;
  width: 500px;
}

.contact dl:after {
  content: '';
  display: block;
  clear: both;
}

.contact dl dt {
  float: left;
  font-weight: bold;
}

.contact dl dd {
  margin-left: 180px;
  padding-bottom: 16px;
  width: 300px;
}

.contact input,
.contact textarea {
  border: none;
  border-radius: 0;
}

.contact input[type='text'],
.contact input[type='email'] {
  height: 20px;
}

.contact button {
  background-color: #7a758a;
  border: none;
  color: #fff;
  font-weight: bold;
  margin-left: 180px;
  width: 140px;
  height: 44px;
}

.contact button:hover,
.contact button:active,
.contact button:focus {
  opacity: 0.8;
}

/* #footer */

#footer {
  background-color: #fff;
  padding: 16px;
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
}

#footer .copyright {
  color: #333;
}

/* modal */

.movie-modal {
  background: #fff;
  display: none;
  padding: 64px 0;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
}

.movie-modal .close {
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 16px;
}

.concept-modal {
  background: center center no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
}

.concept-modal .block {
  display: table;
  width: 100%;
  height: 100%;
}

.concept-modal .main-image {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}

.main-image img {
  object-fit: contain;
}

.concept-modal .close {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 100px;
  z-index: 3;
}

.concept-modal .inner {
  display: table-cell;
  padding-top: 56px;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  min-height: 675px;
}

.concept-modal .col {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
}

.concept-modal nav {
  text-align: center;
  margin-top: -50px;
}

.concept-modal nav ul {
  display: table;
  margin: 0 auto;
}

.concept-modal nav li {
  display: table-cell;
  padding: 0 8px;
  vertical-align: top;
}

.concept-modal h3 {
  margin: 0 auto;
}

.concept-modal p {
  color: #fff;
  margin: 0 auto;
  width: 487px;
}

.concept1 {
  background-image: url(../images/concept/concept1-bg.jpg);
}

.concept1 h3 {
  width: 390px;
  margin: -16px auto 16px;
}

.concept1 p {
  padding-left: 64px;
}

.concept2 {
  background-image: url(../images/concept/concept2-bg.jpg);
}

.concept2 h3 {
  width: 487px;
  margin: 32px auto 32px;
}

.concept2 p {
  padding-left: 64px;
}

.concept3 {
  background-image: url(../images/concept/concept3-bg.jpg);
}

.concept3 h3 {
  width: 487px;
  margin: 32px auto 32px;
}

.concept3 p {
  padding-left: 64px;
}

.modal {
  background: rgba(0, 0, 0, 0.3);
  /* display: none; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
}

.modal .inner {
  background: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: -250px 0 0 -500px;
  overflow-y: scroll;
  padding: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 541px;
}

.modal .close {
  cursor: pointer;
  margin: 299px 0 0 468px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
}

.performance .inner {
  padding: 64px 100px;
}

.performance .inner p {
  font-weight: bold;
  margin-bottom: 32px;
}

.performance .inner table {
  width: 100%;
}

.performance .inner th {
  padding: 8px 0;
}

.performance .inner td {
  font-weight: bold;
  padding: 16px 0;
}

.performance .inner .normal {
  background-color: #eee;
  color: #999;
  text-align: center;
  width: 45%;
}

.performance .inner .chacle {
  background-color: #007dbf;
  color: #fff;
  text-align: center;
  width: 45%;
}

.performance .inner .cap {
  margin: 8px 0;
}

.performance .inner .center {
  text-align: center;
}

.performance .inner .arrow {
  display: block;
  margin: 16px auto;
}

.performance .inner p.arrow {
  color: #007dbf;
  margin: 16px;
  text-align: center;
}

.performance .inner .result {
  border: 1px solid #007dbf;
  color: #007dbf;
  margin: 0 auto;
  padding: 8px 16px;
  text-align: center;
}

.performance .inner .color {
  color: #007dbf;
}

#performance1 .inner {
  background: #fff url(../images/performance/performance1-img2.png) center bottom no-repeat;
}

#performance1 td:nth-child(2) {
  text-align: center;
}

#performance2 .wrap {
  zoom: 1;
}

#performance2 .wrap:after {
  content: '';
  display: block;
  clear: both;
}

#performance2 .wrap p {
  float: left;
  width: 600px;
}

#performance2 .wrap img {
  float: right;
  width: 164px;
}

#performance2 tr {
  border-bottom: 1px solid #ddd;
}

#performance2 tr:first-child {
  border: none;
}

#performance2 td {
  text-align: center;
}

#performance2 td:nth-child(3) {
  color: #007dbf;
}

#performance3 .wrap {
  zoom: 1;
}

#performance3 .wrap:after {
  content: '';
  display: block;
  clear: both;
}

#performance3 .wrap dt {
  float: left;
  margin-right: 64px;
}

#performance3 .wrap dd {
  float: right;
}

#performance3 .wrap h3 {
  margin-bottom: 16px;
}

#performance4 .wrap {
  zoom: 1;
}

#performance4 .wrap:after {
  content: '';
  display: block;
  clear: both;
}

#performance4 .wrap div {
  float: left;
  padding-right: 16px;
  width: 390px;
}

#performance4 .wrap div img {
  float: left;
  margin-bottom: 16px;
  padding-right: 16px;
}

#performance4 .wrap h3 {
  margin-bottom: 8px;
}

#performance5 .wrap {
  zoom: 1;
}

#performance5 .wrap:after {
  content: '';
  display: block;
  clear: both;
}

#performance5 .wrap div {
  float: left;
  margin-right: 16px;
}

#performance6 dl,
#performance7 dl,
#performance9 dl {
  zoom: 1;
}

#performance6 dl:after,
#performance7 dl:after,
#performance9 dl:after {
  content: '';
  display: block;
  clear: both;
}

#performance6 dl dt,
#performance7 dl dt,
#performance9 dl dt {
  float: left;
  font-weight: bold;
  width: 80px;
}

#performance6 dl dd,
#performance7 dl dd,
#performance9 dl dd {
  float: left;
  font-weight: bold;
  margin-bottom: 8px;
}

#performance6 dl dd img,
#performance7 dl dd img,
#performance9 dl dd img {
  margin-left: 80px;
}

#performance6 dl dd a img,
#performance7 dl dd a img,
#performance9 dl dd a img {
  margin: 0;
}

#performance7 .wrap {
  zoom: 1;
  margin-top: 16px;
  width: 100%;
}

#performance7 .wrap:after {
  content: '';
  display: block;
  clear: both;
}

#performance7 .wrap p {
  float: left;
}

#performance7 .wrap img {
  float: right;
}

#performance8 .wrap {
  display: table;
  margin-bottom: 16px;
  table-layout: fixed;
  width: 100%;
}

#performance8 .wrap p {
  display: table-cell;
  text-align: center;
  vertical-align: bottom;
}

#performance9 .wrap {
  zoom: 1;
  width: 100%;
}

#performance9 .wrap:after {
  content: '';
  display: block;
  clear: both;
}

#performance9 .main {
  float: left;
}

#performance9 .sub {
  display: block;
  float: right;
  vertical-align: top;
}

.fp-tableCell .inner {
  margin: 0 20px;
}

.mfp-iframe-holder .mfp-close {
  background: url(../images/close_w.png) no-repeat;
  color: transparent;
  opacity: 1;
  width: 32px;
  height: 32px;
  right: -42px;
  top: 0;
}

.lineup-modal .inner {
  background: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: -250px 0 0 -500px;
  overflow: hidden;
  padding: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 520px;
}

.lineup-modal .inner2 {
  background: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: -250px 0 0 -500px;
  overflow: hidden;
  padding: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 560px;
}

.lineup-modal .inner3 {
  background: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: -250px 0 0 -500px;
  overflow: hidden;
  padding: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 600px;
}

.lineup-modal .inner4 {
  background: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: -250px 0 0 -500px;
  overflow: hidden;
  padding: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 541px;
}

.lineup-modal .inner5 {
  background: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: -250px 0 0 -500px;
  overflow: hidden;
  padding: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 480px;
}
.lineup-modal .inner7 {
  background: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: -300px 0 0 -500px;
  overflow: hidden;
  padding: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 650px;
}

.lineup-modal .inner8 {
  background: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: -250px 0 0 -500px;
  overflow: hidden;
  padding: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 700px;
}

.lineup-modal .inner9 {
  background: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: -250px 0 0 -500px;
  overflow: hidden;
  padding: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 600px;
}

.lineup-modal .inner10 {
  background: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: -300px 0 0 -500px;
  overflow: hidden;
  padding: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 650px;
}

.lineup-modal .inner11 {
  background: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: -300px 0 0 -500px;
  overflow: hidden;
  padding: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 700px;
}

.lineup-modal h3 {
  padding-bottom: 10px;
  position: relative;
  z-index: 5;
}

.lineup-modal h3 span {
  display: block;
  line-height: 1.2;
}

.lineup-modal dl {
  display: table;
  padding-bottom: 16px;
}

.lineup-modal dl.price {
  display: table;
  padding-bottom: 16px;
  margin-top: 16px;
}

.lineup-modal dt {
  display: table-cell;
  vertical-align: top;
  width: 70px;
}

.lineup-modal dt.price {
  vertical-align: top;
}

.lineup-modal dd {
  display: table-cell;
}

.lineup-modal dd.price {
  line-height: 1.2;
  font-weight: bold;
}

.lineup-modal dd.color a {
  color: #333;
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  text-decoration: none;
}

.lineup-modal dd.color img {
  margin-right: 8px;
}

.lineup-modal ul {
  display: table;
  position: absolute;
  left: 32px;
  bottom: 32px;
}

.lineup-modal ul li {
  display: table-cell;
  padding: 4px;
  vertical-align: top;
}

.lineup-modal ul li a {
  border: solid 1px #999;
  display: table-cell;
  vertical-align: middle;
  width: 98px;
  height: 73px;
}

.lineup-modal ul li img {
  width: 100%;
}

.lineup-modal .cap {
  vertical-align: bottom;
}

.lineup-modal .main-image {
  overflow: hidden;
  position: absolute;
  right: 32px;
  top: 32px;
  width: 585px;
  height: 390px;
  z-index: 2;
}

.lineup-modal .main-image img {
  margin: auto;
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.lineup-modal .main-image img.parts {
  height: 360px;
  top: 32px;
}

.lineup-modal .main-image img.active {
  opacity: 1;
}

.mfp-content .shop-modal .inner {
  overflow-y: hidden;
  padding: 0;
}

.mfp-content .shop-modal .inner iframe {
  width: 100%;
  height: 100%;
}

.mfp-content .lineup-modal .inner2 iframe {
  width: 100%;
  height: 100%;
}

/*
.faq-modal { .inner { padding: 0; } ul { background: #371145; color: #fff; display: table; width: 100%; height: 100%; } li { display: table-cell; text-align: center; vertical-align: middle; width: 20%; &:nth-of-type(even) { background: #411c4f; } } h3 { height: 3em; } p { padding: 0 $base; text-align: left; height: 4em; } img { margin: $base*2 0; }
}
*/

/* .thanks */

.thanks {
  height: 100%;
}

.thanks body {
  width: 100%;
  height: 100%;
}

.thanks #header {
  display: block;
  top: -72px;
}

.thanks #contents {
  display: table;
  width: 100%;
  height: 100%;
}

.thanks .section {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.thanks .back {
  background: url(../images/icon-arrow2.png) 10px center no-repeat #7a758a;
  color: #fff;
  display: block;
  font-weight: bold;
  line-height: 44px;
  text-align: center;
  text-decoration: none;
  width: 140px;
  height: 44px;
}

.thanks .back:hover,
.thanks .back:active,
.thanks .back:focus {
  opacity: 0.8;
}

/* .cake add */

.top0 {
  background-color: #45aae3;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
}

#header .head-col {
  zoom: 1;
  height: 47px;
}

#nav {
  zoom: 1;
  float: right;
  padding: 16px 0;
  clear: both;
  margin-top: -78px;
}

.contact .text a {
  color: #fff;
}

#news {
  background-color: #fff;
  border-top: none;
  opacity: 0.8;
  position: absolute;
  top: 145px;
  left: 32px;
  width: 200px;
  font-size: 0.8em;
}

#news h2 {
  color: #003495;
  padding: 5px 0 0;
}

#news li {
  border-bottom: none;
  font-weight: bold;
  padding: 0px 0 10px;
}

#news li:last-child {
  border: none;
}

#news .date {
  color: #003495;
  display: block;
}

.lineup .content {
  position: relative;
  padding-top: 50px;
}

#contents .wrap .col {
  display: table-cell;
  vertical-align: top;
  padding-top: 80px;
}

.faq h2 {
  margin: 100px 0 10px;
}

.caution h2 {
  margin-bottom: 0px;
}

.caution li {
  padding: 10px 5px;
}

.caution h3 {
  height: 2.3em;
}

.caution p {
  padding: 0 10px;
  height: 4.5em;
}

.caution img {
  margin: 24px 0;
}

.shop h2 {
  margin: 100px 0 16px;
}

.contact {
  background: url(../images/bg7.jpg) right center;
  background-size: cover;
}

.top1,
.top6,
.top8 {
  left: 250px;
  bottom: 5px;
}

.top4 {
  left: 220px;
  bottom: 5px;
}

.top2 {
  left: 300px;
  bottom: 25px;
}

.top5 {
  left: 200px;
}

.top7,
.top9 {
  left: 300px;
  bottom: 25px;
}

.top3 {
  width: 65%;
  bottom: 55%;
  left: 530px;
  z-index: 8;
}

.top3a,
.top3b,
.top3c {
}

.concept .h2_area {
  padding-right: 20px;
}

.concept .point dl {
  margin-bottom: 32px;
}

.concept-modal .inner {
  padding-top: 56px;
}

.concept-modal p {
  font-size: 0.9em;
  font-weight: bold;
}

.concept2 h3 {
  width: 487px;
  margin: 16px auto 16px;
}

.concept3 h3 {
  width: 487px;
  margin: 16px auto 16px;
}

.concept-modal .inner {
  vertical-align: top;
}

.concept1 p {
  color: #c52f40;
}

.concept2 p {
  color: #00699e;
}

.concept3 p {
  color: #498640;
}

.modal {
  background: rgba(0, 0, 0, 0.7);
}

.modal .close {
  cursor: pointer;
  margin: -250px 0 0 510px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
}

.lineup .inner ul.list {
  min-width: 1000px;
  padding: 0 50px;
  margin: 0 auto;
}

.lineup .inner .list li {
  width: 15%;
  float: left;
  margin: 0 2% 30px 0;
}

.lineup .inner .list li:nth-child(6) {
  margin-right: 0;
}

.lineup .inner .list li img {
  width: 100%;
}

.lineup .inner .list li h3 {
  text-align: center;
  margin: 20px 0 0;
  font-size: 1.1em;
}

.lineup .inner .list li h3 span.xx-large {
  line-height: 0.8;
}

.lineup .inner .list .btn {
  border: 1px solid #333;
  color: #333;
  line-height: 26px;
  margin: 12px auto 0;
  width: 108px;
  height: 26px;
}

.lineup .inner .list .btn:hover {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

.tx_weight {
  font-size: 0.8em;
  display: inline !important;
}

.lineup .inner .list .btn2 {
  border: 1px solid #333;
  color: #333;
  line-height: 26px;
  margin: 16px auto 0;
  width: 108px;
  height: 26px;
}

.lineup .inner .list .btn2:hover {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

.tx_weight {
  font-size: 0.8em;
  display: inline !important;
}

/* .top */

.top {
  position: relative;
  height: 100vh;
  background: url(../images/bg_top.png) no-repeat bottom left;
}

.movie {
  -webkit-animation: movie 0.2s ease-out 1s 1 forwards;
  animation: movie 0.1s ease-out 1s 1 forwards;
  opacity: 0;
  position: absolute !important;
  right: 30px;
  bottom: 30px;
  z-index: 1000;
}

.oa_area {
  text-align: center;
}

h2.oa {
  text-align: center;
  margin: 0 0 10px;
  font-size: 1.4em;
}

.oa_tbl {
  background-color: #ccc;
  font-size: 0.9em;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 1px !important;
}

.oa_tbl th {
  background-color: #007dbf;
  color: #fff;
  text-align: center;
  padding: 10px;
}

.oa_tbl td {
  background-color: #fff;
  color: #333;
  text-align: center;
  padding: 10px;
}

.sns_icon {
  width: 26px;
  margin-left: 5px;
  margin-top: 16px;
}

.yt_icon {
  width: 32px;
  margin-left: 5px;
  margin-top: 16px;
}

#header .head-col .sns-img {
  float: right;
  margin-left: 100px;
}

.mt-1 {
  margin-top: 1em;
}
.mt-2 {
  margin-top: 2em;
}