@charset "UTF-8";
/*
 Theme Name:   Ciel
*/
/* reset
------------------------------ */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, sub, sup, i, small, address, time, fieldset, form, label, legend, hr, table, caption, tbody, tfoot, thead, tr, th, td, header, footer, nav, section, article, aside, figure, figcaption, canvas, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
}
ul, ol, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  transition: All 0.5s ease;
}
img {
  max-width: 100%;
  height: auto;
  transition: all .5s ease, opacity .5s ease;
  -webkit-transition: all .5s ease, opacity .5s ease;
}
table {
  width: 100%;
  border-collapse: collapse;
}
table th {
  width: 25%;
  vertical-align: middle;
}
table th, table td {
  padding: 2.5% 2%;
  box-sizing: border-box;
  border-top: dotted 1px #7c7c7c;
  text-align: left;
}
table tr:last-of-type th, table tr:last-of-type td {
  border-bottom: dotted 1px #7c7c7c;
}
/* common
------------------------------ */
html {
  background:#1e1e1e;
}
html:before{
	content: "";
	position: fixed;
	        width: 20vw;
        height: 100%;
	background: url("../img/common/bg_left.png") no-repeat top 2vw left 1vw /20vw;
}
body {
  font: 14px/1.7em MinionPro-Regular, "游明朝体", "Yu Mincho", YuMincho, 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'ＭＳ Ｐ明朝', serif;
  font-feature-settings: "palt";
  position: relative;
  width: 450px;
  background: #fff;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}
main {
  min-height: 60vh;
}
section {
  margin-bottom: 15%;
}
h1, h2 {
  font-size: 3em;
  margin: 0 auto 6%;
}
h1 span, h2 span {
  display: inline-block;
  font-size: 0.35em;
  font-weight: normal;
  margin: 4px 0 0 10px;
}
h3 {
  font-size: 1.8em;
  margin-bottom: 5%;
}
h4 {
  font-size: 1.4em;
  margin-bottom: 3%;
}
.forSP {
  display: none !important;
}
.inner {
  width: 100%;
  padding: 0 4%;
  box-sizing: border-box;
  margin: 0 auto;
}
.fadeIn {
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  transition: all 1.0s;
  -webkit-transition: all 1.0s;
  opacity: 0;
}
.fadeIn.view {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
}
.btn a {
  display: block;
  font-size: 1.5em;
  margin: 0 auto;
  color: #fff;
  padding: 12px;
  border-radius: 3px;
}
.mb00 {
  margin-bottom: 0;
}
.mb10 {
  margin-bottom: 10px;
}
.mb30 {
  margin-bottom: 20px;
}
.mb50 {
  margin-bottom: 8%;
}
.mb70 {
  margin-bottom: 12%;
}
.tR {
  text-align: right;
}
.tC {
  text-align: center;
}
/* header
------------------------------ */
header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 58px;
  z-index: 100;
  -webkit-transition: all 1.0s;
}
header.fixed {

}
header #logo {
          position: fixed;
        left: 3vw;
        top: calc(50% - 170px);
        width: 380px;
        padding: 5px 0%;
        z-index: 10;
}
@media (max-width: 1340px) {
header #logo {
    width: 20vw;
  }
}
@media (max-width: 800px) {
header #logo {
    display: none;
  }
}
header > .sns {
  display: flex;
  gap: 15%;
  float: right;
  margin: 18px calc(58px + 4%) 0 0;
}
header.fixed > .sns {
  margin: 14px calc(58px + 4%) 0 0;
}
header > .sns li {
  width: 40px;
}
header.fixed > .sns li {
  width: 34px;
}
header nav {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(40vw - 225px);
  padding: 20vh 8% 0 0%;
  box-sizing: border-box;
  z-index: 10;
  -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  transition: All 0.5s ease;
}
header nav li {
  margin-bottom: 2vh;
}
header nav li a {
  display: block;
  font-size: 1.6em;
  color: #fff;
  padding: 1vh 0;
}
header nav .sns li {
  display: inline-block;
  width: 40px;
  margin: 8% 25px 0 0;
}
/* top
------------------------------ */
#top .slide h1 {
  margin-bottom: 0;
}
#top #system {
  padding-top: 15%;
  background: url(../img/top/bg_system.jpg)no-repeat top center/contain;
}
#top #system table th {
  width: auto;
}
#top #coupon {
  padding: 12% 0 25%;
  background: url(../img/top/bg_coupon_top.jpg)no-repeat top center/contain, url(../img/top/bg_coupon_bottom.jpg)no-repeat bottom center/contain;
}
#top #coupon h2 {
  width: 84%;
  margin-bottom: 2%;
}
#top #info .thumbnail .slick-track {
  width: 100% !important;
  margin: 1.5% 0 3%;
  transform: unset !important;
}
#top #info .thumbnail .slick-track li {
  position: relative;
  width: 16% !important;
  height: 50px;
  margin: 0 3px 5px;
}
#top #info .thumbnail .slick-track li.slick-cloned {
  display: none !important;
}
#top #info .thumbnail .slick-track li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#top #info iframe {
  height: 350px;
}
#top #info iframe + p.tC {
  color: #fff;
  padding: 8px;
  background-color: #000;
}
#top #info #cast .slide:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/top/cover_cast.png) no-repeat center/cover;
  z-index: 1;
}
#top #info #cast .inner {
  padding-top: 5%;
  background: url(../img/top/bg_cast.jpg) no-repeat right 2% top/110px;
}
#top #top-recruit {
  animation: bounce 0.5s alternate infinite;
}
@keyframes bounce {
  0% {
    transform: translateY(-2%);
  }
  50% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(0%);
  }
}
/* recruit
------------------------------ */
#recruit #reason {
  padding-top: 12%;
  background: url("../img/recruit/bg_reason.jpg") no-repeat top center/contain;
}
#recruit #reason h2 {
  height: 60px;
}
#recruit #reason h2 img, #recruit #reason h3 img {
  height: 100%;
  object-fit: contain;
}
#recruit #reason ol li {
  font-size: 1.1em;
}
#recruit #reason ol li h3 {
  height: 52px;
  margin-bottom: 1%;
}
#recruit #info {
  padding: 15% 0 10%;
  background: url("../img/recruit/bg_info_top.jpg") no-repeat center top/contain, url("../img/recruit/bg_info_bottom.jpg") no-repeat center bottom/contain;
}
#recruit #info strong {
  color: #b28803;
}
#recruit #info table th, #recruit table td {
  display: block;
  width: 100%;
  padding: 2% 4%;
  border: none;
}
#recruit #info table th {
  color: #fff;
  background-color: #000;
}
#recruit #info table td {
  padding: 3% 4% 6%;
}
#recruit h4 {
  font-weight: normal;
}
#recruit #tel a, #recruit #line a {
  box-shadow: 0px 5px 2px 0px rgba(0, 0, 0, 0.2);
}
#recruit #tel a {
  color: #000;
  background: linear-gradient(to right, #cdab2e, #f1e28b 30%, #ad8c40)
}
#recruit #tel a img {
  width: 17px;
  margin: 1px 6px 0 0;
}
#recruit #line a {
  background-color: #4cc764;
}
#recruit #line a img {
  width: 24px;
  margin: 1px 6px 0 0;
}
/* footer
------------------------------ */
footer #pagetop {
  padding: 12px 0 8px;
  background: url("../img/common/bg_pagetop.jpg") no-repeat center/cover;
}
footer #pagetop img {
  width: 40px;
}
footer .inner {
  color: #96c7e6;
  padding: 12% 4% 6%;
  background-color: #000;
}
footer .inner #foot-logo a img {
  width: 40%;
  margin: 0 0 5% -12%;
}
footer .inner address {
  font-style: normal;
}
footer .inner .btn a {
  width: 85%;
  background-color: #68aedb;
}
footer .inner .btn a img {
  width: 16px;
  margin: 2px 6px 0 0;
}
footer #copyright {
  font-size: 0.92em;
  color: #808080;
}