@charset "Shift_JIS";
@media only print, only screen and (max-width: 767px){
.tab,
.pc,
.pc_tab{
  display:none !important;
}
.sp,
.tab_sp{
  display:block !important;
}
/* Start Animation */
#op #bg_sp{
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: -15px;
  -webkit-background-size: cover;
  background-size: cover;
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#op #bg_sp.bg1{
  background: url("https://www.shipsltd.co.jp/campaign/2019/wai_1219/pc/images/mainVisual.jpg") center no-repeat;
  background-size: contain;
  position: absolute;
  top: calc(50% - 100vh/2);
  left: calc(50% - 100vw/2);
}
#op.active #bg_sp{
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#opLogo{
  position: fixed;
  z-index: 9999;
  line-height: 0;
  height: 60px;
  width: 80px;
  top: calc(50% - 60px/2);
  left: calc(50% - 80px/2);
}
#op.active #opLogo #naviLogo{
  fill: #ffffff !important;
}
#opLogo svg{
  width: 80px;
  height: 60px;
}
.inner_{
  width: auto;
  padding: 30% 0 5%;
}
h2{
  margin: 5% 0 10%;
  letter-spacing: 5px;
}
h3{
  margin: 10% 0 5%;
}
h4{
  margin: 5% 0 2.5%;
}
/* Catalog */
.colum_,.colum__{
  margin: 10% auto !important;
  font-size: 0;
  display: inline-block;
}
.colum_:first-of-type{
  margin: 0 0 10% 0 !important;
}
.colum__{
  margin: 0 auto;
  position: relative;
}
.colum__ .list__:last-child{
  margin: 50px 0 0 -50px;
  z-index: -9999;
  width: 48%;
}
.list__{
  display: inline-block;
  vertical-align: bottom;
}
.s_{
  width: 70%;
  margin: 10% auto 0;
  position: relative;
}
.s__{
  width: 49.8%;
  position: relative;
}
.s__:last-child{
  margin: 0 0 0 -1px;
}
.s_l{
  width: 65%;
  position: relative;
}
.s_s{
  width: 45%;
  position: relative;
}
.ma_0{
    margin: 0 auto !important;
}
.ma_l_10_5{
  margin: 0 0 -5% -10.3%;
}
.ma_t_10{
  margin: 10% 0 0 0;
}
.ma_b_10{
  margin: 0 0 10% 9.5%;
}
.top_line{
  width: 35ch;
  border-right: 1px solid #000000;
  font-size: 0.75rem !important;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
  margin: 5% 0 0 0;
  text-align: center;
}
.line{
  width: 35ch;
  border-right: 1px solid #000000;
  font-size: 0.75rem !important;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
  margin: 5% 0 0 0;
  text-align: center;
  opacity: 0;
}
.line_{
  width: 32ch;
  border-right: 1px solid #000000;
  font-size: 0.75rem !important;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
  margin: 5%;
  text-align: left;
  opacity: 0;
}
.line__{
  width: 36ch;
  border-right: 1px solid #000000;
  font-size: 0.75rem !important;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
  margin: 5% 0 0 0;
  text-align: center;
  opacity: 0;
}
/* Animation */
.top-anim-typewriter{
  animation: typewriter 5s steps(35),
   Cursor 1s steps(1, start) infinite normal;
  animation-delay: 5.2s;
}
.anim-typewriter{
  animation: typewriter 5s steps(35),
   Cursor 1s steps(1, start) infinite normal;
  opacity: 1;
}
.anim-typewriter_{
  animation: typewriter2 5s steps(32),
   Cursor 1s steps(1, start) infinite normal;
  opacity: 1;
}
.anim-typewriter__{
  animation: typewriter3 5s steps(36),
   Cursor 1s steps(1, start) infinite normal;
  opacity: 1;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 35ch;}
}
@keyframes Cursor{
  50% { border-right-color: transparent; }
}
@keyframes typewriter2{
  from{width: 0;}
  to{width: 32ch;}
}
@keyframes Cursor{
  50% { border-right-color: transparent; }
}
@keyframes typewriter3{
  from{width: 0;}
  to{width: 36ch;}
}
@keyframes Cursor{
  50% { border-right-color: transparent; }
}
/* Concept */
#concept{
  margin: 0 5%;
}
.information_container:first-of-type{
  padding: 10% 0 0;
}
.information_container:first-of-type::before{
  content: "";
  width: 90%;
  position: absolute;
  margin: 0 auto;
  background: #cccccc;
  height: 1px;
  left: calc(50% - 90%/2);
}
.information_{
  margin:5% 0;
}
.date_ .left_{
  width:20%;
  display:inline-block;
  vertical-align: top;
}
.date_ .right_{
  width:76%;
  display:inline-block;
}
/* Item List */
#itemList .style_container{
  text-align:center;
  margin: 15% 0;
}
#itemList .creditImg_1_ img{
	max-width: 70%;
}
#itemList .creditImg_2_{
	max-width: 45%;
}
#itemList .creditCap_ h4{
  font-size: 1.5rem;
  letter-spacing: 5px;
}
#itemList .creditCap_{
  margin: 4%;
}
#itemList .creditCap_ span{
  display: block;
  font-size: 0.72rem;
  margin: 2% 0 0 0;
  letter-spacing: -0.3px;
  line-height: 1.8;
  padding: 0 0 2% 0;
}
.credit_.animate{
  font-size: 0;
}
.credit_.animate li {
  position: relative;
  top: 120px;
  opacity: 0;
}
.credit_.animate li:first-child {
  transition: all 0.5s;
}
.credit_.animate li:nth-child(2n) {
  transition: all 1s;
}
.credit_.animate li.moving {
  opacity: 1;
  top: 0;
}
.w_50{
  width: 50%;
  margin: 0 -1px;
  display: inline-block;
}
.w_40{
  width: 40%;
  margin: 0 -1px;
  display: inline-block;
}
/* glitch */
.img span{
  display: block;
}
.img{
  display: block;
  margin: 0 auto 50px;
  width: 240px
}
}
@media only print, only screen and (min-width: 768px){
.sp,
.tab,
.tab_sp,
.pc{
  display:none !important;
}
.pc_tab,
.tab_pc{
  display:block !important;
}
/* Start Animation */
#op #bg{
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  -webkit-background-size: cover;
  background-size: cover;
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#op #bg.bg1{
  background: url("https://www.shipsltd.co.jp/campaign/2019/wai_1219/pc/images/mainVisual.jpg") center no-repeat;
  background-size: contain;
}
#op.active #bg{
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#opLogo{
  position: fixed;
  z-index: 1111;
  line-height: 0;
  height: 120px;
  width: 100px;
  top: calc(50% - 120px/2);
  left: calc(50% - 100px/2);
}
#op.active #opLogo #naviLogo{
  fill: #ffffff !important;
}
#opLogo svg{
  width: 120px;
  height: 100px;
}
h2{
  font-size: 1.2rem;
  letter-spacing: 10px;
}
.inner_{
  width: 100%;
  margin: 0 auto;
  padding: 8% 0;
  text-align: center;
}
/* Catalog */
.colum_,.colum__{
  margin: 10% auto 0 !important;
  font-size: 0;
  display: inline-block;
}
.colum_:first-of-type{
  margin: 5% auto 10% ;
}
.colum__{
  margin: 0 auto;
  position: relative;
}
.colum__ .list__:last-child{
  margin: 100px 0 -50px -120px;
  z-index: -9999;
  width: 45%;
}
.list__{
  display: inline-block;
  vertical-align: bottom;
}
.s_{
  width: 70%;
  margin: 0 auto;
  position: relative;
}
.s__{
  width: 49.8%;
  position: relative;
}
.s__:last-child{
  margin: 0 0 0 -1px;
}
.s_l{
  width: 55%;
  position: relative;
}
.s_s{
  width: 45%;
  position: relative;
}
.ma_l_10_5{
  margin: 0 0 -5% -10.3%;
}

.ma_t_10{
  margin: 10% 0 0 0;
}
.ma_b_10{
  margin: 0 0 10% 9.5%;
}
/* Animation */
.top_line{
  width: 35ch;
  border-right: 1px solid #000000;
  font-size: 0.75rem !important;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
  margin: 5% 0 0 0;
  text-align: center;
}
.line{
  width: 35ch;
  border-right: 1px solid #000000;
  font-size: 0.75rem !important;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
  margin: 5% 0 0 0;
  text-align: center;
  opacity: 0;
}
.line_{
  width: 32ch;
  border-right: 1px solid #000000;
  font-size: 0.75rem !important;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
  margin: 5%;
  text-align: left;
  opacity: 0;
}
.line__{
  width: 36ch;
  border-right: 1px solid #000000;
  font-size: 0.75rem !important;
  white-space: nowrap;
  overflow: hidden;
  color: #000000;
  margin: 5% 0 0 0;
  text-align: center;
  opacity: 0;
}
.top-anim-typewriter{
  animation: typewriter 5s steps(35),
   Cursor 1s steps(1, start) infinite normal;
  animation-delay: 6s;
}
.anim-typewriter{
  animation: typewriter 5s steps(35),
   Cursor 1s steps(1, start) infinite normal;
  opacity: 1;
}
.anim-typewriter_{
  animation: typewriter2 5s steps(32),
   Cursor 1s steps(1, start) infinite normal;
  opacity: 1;
}
.anim-typewriter__{
  animation: typewriter3 5s steps(36),
   Cursor 1s steps(1, start) infinite normal;
  opacity: 1;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 35ch;}
}
@keyframes Cursor{
  50% { border-right-color: transparent; }
}
@keyframes typewriter2{
  from{width: 0;}
  to{width: 32ch;}
}
@keyframes Cursor{
  50% { border-right-color: transparent; }
}
@keyframes typewriter3{
  from{width: 0;}
  to{width: 36ch;}
}
@keyframes Cursor{
  50% { border-right-color: transparent; }
}
/* Item List */
#itemList{
  background: #f8f8f8;
  border: 30px solid #ffffff;
}
#itemList ul{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#itemList ul li{
  width: 100%;
  text-align: left;
  margin: 2% 5%;
}
#itemList ul li:nth-child(3n){
  margin: 2% 5%;
}
#itemList .creditImg_{
  display: inline-block;
  text-align: center;
  width: 38%;
}
#itemList .creditCap_{
  display: inline-block;
  vertical-align: top;
  letter-spacing: -0.2px;
  font-size: 0.7rem;
  width: 52%;
}
#itemList .creditCap_ span{
  display: block;
  margin: 1.5% 0;
}
#itemList .creditCap_ span:first-child{
  margin: 0;
}
#itemList h4{
  margin: 0 1%;
  display: inline-block;
  vertical-align: top;
}
.credit_.animate li {
  position: relative;
  top: 120px;
  opacity: 0;
}
.credit_.animate li {
  transition: all 0.5s ease-in;
}
.credit_.animate li.moving {
  opacity: 1;
  top: 0;
}
/* Concept */
#concept{
  text-align: center;
  margin: 0 auto;
  background: #d1d1d1;
}
.leadText_{
  text-align: center;
  font-size: 0.8rem;
  line-height: 3;
  display: inline-block;
  vertical-align: middle;
  margin: 5% 0 0 0;
  width: 100%;
}

/* Information */
#information{
  background: #f4f4f4;
}
#information h3{
  text-align: left;
	font-size: 0.9rem;
	display: block;
	width: 100%;
	vertical-align: top;
	margin: 3% 0;
}
#information .leftCo_,#information .rightCo_{
  display: inline-block;
	width: 80%;
	font-size: 0.75rem;
	text-align: left;
	vertical-align: top;
	margin: 5% 0 0 0;
  }
#information h4.shopName_{
  font-size: 0.8rem;
  margin: 2% 0;
}
.info_{
  display: inline-block;
  width: 100%;
}
.date_{
  font-size: 0.75rem;
  text-align: left;
  margin: 2% 0;
}
.date_ .left_{
  width: 20%;
  display: inline-block;
  vertical-align: top;
}
.date_ .right_{
  width: 70%;
  display: inline-block;
}
.l_50{
  display: inline-block;
  width: 48%;
}
/* Page Top */
#page_top a{
  position: fixed;
  right: 0;
  bottom: 85px;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
}
#page_top a::before,
#page_top a::after{
  position: absolute;
  top: 3px;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
#page_top a::before{
  left: -36px;
  width: 30px;
  height: 4px;
  border-top: 1px solid #000;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
#page_top a::after{
  left: 0px;
  width: 71px;
  height: 100px;
  border-top: 1px solid #000;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  top: 44px;
}
}

@media only print, only screen and (min-width: 1200px){
.sp,
.tab,
.tab_sp,
.pc_tab{
  display:none !important;
}
.pc,
.tab_pc{
  display:block !important;
}
.ma_l_10{
  margin: 0 0 0 10%;
  text-align: left !important;
}
/* Start Animation */
#op #bg{
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  -webkit-background-size: cover;
  background-size: cover;
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#op #bg.bg1{
  background: url("https://www.shipsltd.co.jp/campaign/2019/wai_1219/pc/images/mainVisual.jpg") center no-repeat;
  background-size: contain;
}
#op.active #bg{
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
#opLogo{
  position: fixed;
  z-index: 1111;
  line-height: 0;
  height: 120px;
  width: 100px;
  top: calc(50% - 120px/2);
  left: calc(50% - 100px/2);
}
#op.active #opLogo #naviLogo{
  fill: #ffffff !important;
}
#opLogo svg{
  width: 120px;
  height: 100px;
}
h2{
  font-size: 1.2rem;
  letter-spacing: 10px;
}
.inner_{
  width: 1200px;
  margin: 0 auto;
  padding: 8% 0;
  text-align: center;
}
/* Catalog */
.colum_,.colum__{
  margin: 10% 0 !important;
}
.colum_:first-of-type{
  margin: 5% 0 15% 0;
}
.colum__{
  max-width: 1030px;
  margin: 0 auto;
  position: relative;
}
.list_,.list__{
  margin: 0 0 6% 0;
  text-align: center;
}
.list__{
  display: inline-block;
  width: 49.1%;
  vertical-align: top;
}
.colum__ .list__:last-child {
  margin: 340px 0 0 -30px;
  z-index: -9999;
  width: 49.1%;
}
/* Hover */
.box_1_{
  width: 600px;
  height: 735px;
  text-align: center;
  margin: 0 auto;
}
@keyframes typing {
	from { width: 0; }
}
@keyframes cursor {
	50% { border-right-color: transparent; }
}
.anime-typing_{
  width: 35ch;
  overflow: hidden;
  /* white-space: nowrap; */
  border-right: .03em solid;
  animation: typing 4s steps(35), cursor 1s steps(1, start) infinite;
}
.anime-typing__{
	width: 32ch;
	overflow: hidden;
	/*white-space: nowrap;*/
	border-right: .03em solid;
	animation: typing 4s steps(32),
	cursor 1s steps(1, start) infinite;
}
.anime-typing___{
	width: 36ch;
	overflow: hidden;
	/*white-space: nowrap;*/
	border-right: .03em solid;
	animation: typing 4s steps(32),
	cursor 1s steps(1, start) infinite;
}
.style_ {
	width:600px;
	height:750px;
	overflow:hidden;
	position:relative;
}
.caption_:hover{
  display:none;
}
.caption_ {
  font-size: 1rem;
  color: #fff;
  position: absolute;
  top: calc(50% - 1ch/2);
  left: calc(50% - 36ch/2);
}
.style_ .mask_ {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:	all 0.6s ease;
}
.style_:hover .mask_ {
	opacity:1;
}
.box_2_{
  width: 500px;
	height: 614px;
	text-align: center;
	margin: -100px auto 0;
}
.style_2_ {
	width:500px;
	height:614px;
	overflow:hidden;
	position:relative;
}
.caption__:hover{
  display:none;
}
.caption__ {
  font-size: 1rem;
  color: #fff;
  position: absolute;
  top: calc(50% - 1ch/2);
  left: calc(50% - 33ch/2);
}
.style_2_ .mask_ {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:	all 0.6s ease;
}
.style_2_:hover .mask_ {
	opacity:1;
}
.box_3_{
  width:600px;
	height:496px;
  text-align: center;
  margin: 0 auto;
}
.style_3_ {
	width:600px;
	height:496px;
	overflow:hidden;
	position:relative;
}
.caption___:hover{
  display:none;
}
.caption___ {
  font-size: 1rem;
  color: #fff;
  position: absolute;
  top: calc(50% - 1ch/2);
  left: calc(50% - 36ch/2);
}
.style_3_ .mask_ {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:	all 0.6s ease;
}
.style_3_:hover .mask_ {
	opacity:1;
}
.box_4_{
  width:426px;
	height:521px;
  text-align: center;
}
.img{
  display: block;
  margin: 0 auto 50px;
  width: 565px;
  position: relative;
}
/* Item List */
#itemList{
  background: #f8f8f8;
  border: 30px solid #ffffff;
}
#itemList ul{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#itemList ul li{
  float: left;
	width: 31%;
	text-align: left;
	margin: 0 1% 5%;
}
#itemList ul li:nth-child(3n){
	margin: 0 0 5% 1%;
}
#itemList .creditImg_{
  display: inline-block;
  text-align: center;
  width: 100%;
}
#itemList .creditCap_{
  display: inline-block;
	vertical-align: top;
	letter-spacing: -0.2px;
	font-size: 0.7rem;
	width: 90%;
}
#itemList .creditCap_ span{
  display: block;
  margin: 1.5% 0;
}
#itemList h4{
  margin: 0 1% 0 0;
  display: inline-block;
}
.credit_.animate li {
  position: relative;
  top: 120px;
  opacity: 0;
  height: 400px;
}
.credit_.animate li:first-child {
  transition: all 0.25s ease-in;
}
.credit_.animate li:nth-child(2n) {
  transition: all 0.5s ease-in;
}
.credit_.animate li:nth-child(3n) {
  transition: all 1.0s ease-in;
}
.credit_.animate li.moving {
  opacity: 1;
  top: 0;
}
/* Concept */
#concept{
  text-align: center;
  margin: 0 auto;
  background: #d1d1d1;
}
.leadText_{
  text-align: left;
  font-size: 0.8rem;
  line-height: 3;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 15%;
  width: 50%;
}

/* Information */
#information{
  background: #f4f4f4;
}
#information h3{
  text-align: left;
  font-size: 0.9rem;
  display: inline-block;
  width: 23%;
  vertical-align: top;
  margin: 3% 0;
}
#information .leftCo_,#information .rightCo_{
  display: inline-block;
  width: 48%;
  font-size: 0.75rem;
  text-align: left;
  vertical-align: top;
  margin: 8% 0 0 0;
}
#information h4.shopName_{
  font-size: 0.8rem;
  margin: 5% 0 3% 0;
}
.info_{
  display: inline-block;
  width: 75%;
}
.date_{
  font-size: 0.75rem;
  text-align: left;
}
.date_ .left_{
  width: 20%;
  display: inline-block;
  vertical-align: top;
}
.date_ .right_{
  width: 70%;
  display: inline-block;
}
.l_50{
  display: block;
  width: 100%;
}
/* Page Top */
#page_top a{
  position: fixed;
  right: 0;
  bottom: 85px;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
}
#page_top a::before,
#page_top a::after{
  position: absolute;
  top: 3px;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
#page_top a::before{
  left: -36px;
  width: 30px;
  height: 4px;
  border-top: 1px solid #000;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
#page_top a::after{
  left: 0px;
  width: 71px;
  height: 100px;
  border-top: 1px solid #000;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  top: 44px;
}
}