#main > header {
	background-image: url(../images/lounge/visual_pc.jpg);
}

@media screen and (max-width: 600px) {
	#main > header {
		background-image: url(../images/lounge/visual_sp.jpg);
		margin-bottom: 0;
	}
}
#main > section {
    width: 1050px;
    margin: 0 auto;
}
@media screen and (max-width: 600px){
	#main > section {
	    width: auto;
	}
}

#section-gallery {
    padding: 0 35px;
}
@media screen and (max-width: 600px){
	#section-gallery {
	    padding: 0px;
	}
}

#section-gallery #section-gallery-lounge {
    position: relative;
    padding-top: 85px;
    margin-top:30px;
}

#section-gallery section {
    margin-bottom: 50px;
}

#section-gallery #section-gallery-lounge header {
    position: absolute;
    top: 0;
    right: 25px;
    z-index:1;
}
@media screen and (max-width: 600px){
	#section-gallery #section-gallery-lounge header {
    right: 10px;
	}
}

#section-gallery section header {
    position: relative;
    background-color: #171717;
    color: #fff;
    text-align: center;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
    padding: 0 53px 0 45px;
    height: 410px;
    width: 134px;
}
@media screen and (max-width: 600px){
	#section-gallery #section-gallery-lounge header {
	    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
	    padding: 0 28px 0 22px;
	    height: 210px;
	    width: 74px;
	}
}

#section-gallery section header h3 {
    margin: 0;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    height: 100%;
}
#main section h3 {
    font-size: 36px;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
}
@media screen and (max-width: 600px){
	#main section h3 {
	    font-size: 18px;
	}
}

#section-gallery section header p {
    position: absolute;
    top: 0;
    right: 30px;
    height: 100%;
    font-size: 12px;
    line-height: 1 !important;
    font-style: italic;
    font-family: 'Lora', serif;
    letter-spacing: 0.075em;
    margin: 0;
    font-weight: normal;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
@media screen and (max-width: 600px){
	#section-gallery section header p {
	    right: 10px;
	    font-size: 12px;
	    line-height: 1 !important;
	}
}


/*#section-gallery-lounge{
	width:980px;
}*/

#section-gallery-lounge .lounge-top-img img {
	width:100%;
	margin:0 auto;
}

.lounge-wrapper {
    width: 70%;
    margin: 40px auto;
}
@media screen and (max-width: 600px){
	.lounge-wrapper {
	    width: 95%;
	}
}

.lounge-contents-left {
	width:10%;
	float:left;
	margin-right:10%;
}
.lounge-contents-left img {
	width:60px;
	height:auto;
}
.lounge-contents-right {
	width:80%;
	float:left;
  overflow:hidden;
  position:relative;
}
@media screen and (max-width: 600px){
	.lounge-contents-right {
	    width: 70%;
	}
}
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

.lounge-contents-subtitle {
	line-height: 2 !important;
    font-style: italic;
    font-family: 'Lora', serif;
    letter-spacing: 0.075em;
    margin-bottom: 10px;
    font-weight: normal;
    display: inline;
/*    line-height: 2!important;*/
}

/* 光らせるためのstyle */
.shine{
  position: relative;
  overflow: hidden;
}
/* 光の疑似要素 */
.shine::before{
  content: "";
  animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: white;
  width: 140%;
  height: 100%;
  transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.8;
  position: absolute;
}
/* 光の動き */
@keyframes shine{
  0% {
    left: -160%;
    opacity: 0;
  }
  70% {
    left: -160%;
    opacity: 0.5;
  }
  71% {
    left: -160%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}



.lounge-contents-title {
    font-size: 25px;
    margin-bottom: 5px;
    line-height:1.5;
}
.lounge-contents-description {
	line-height:1.5;
}
.allday-contents {
	margin-bottom:100px;
}

.lounge-time {
	background-color: black;
    color: white;
    width: 110px;
    line-height: 2;
    text-align: center;
    margin-left: -23px;
    margin-bottom:6px;
}
 .lounge-contents-left {
	margin-left:-4px;
}
@media screen and (max-width: 600px){
	.timely-contents .lounge-contents-left {
		margin-left:15px;
	}
}



.timely-contents .lounge-contents-right {
	margin-top:64px;
}

.timely-contents-wrapper {
/*	margin-bottom:100px;*/
	position:relative;
	height:100%;
	z-index:0;
}

.time-border {
	position:absolute;
	left:10px;
	top:55px;
	left:25px;
	height: 100%;
    display: block;
    width: 1px;
    background: #000;
    content: "";
}
@media screen and (max-width: 600px){
	.time-border {
	left:45px;
	}
}

.timely-contents {
	position:relative;
	z-index:3;
/*	margin-bottom:100px;*/
}
#content {
	padding-bottom:50px;
}

.line {
  display: block;
  position: relative;
}
.line::after {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  content: '';
  display: block;
  height: 1px;
  width: 0;
  transform: translateX(-50%);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: 0;
  left: 50%;
}
.line.is-animated::after {
  width: 100%;
}
/*.timely-contents .lounge-contents-left::after {
    content: "";
    display: block;
    width: 1px;
    height: calc(91% - 5.5em);
    background: #B2B2B2;
    margin: 1.5em auto 0;
}*/


/* フェードイン機能用　*/
.fade {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/*===========
inview
===========*/

.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}

.allday-contents .time-border {
	top:70px;
	height:125%;
	z-index:0;
	position:relative;
}



.time-gallery {
	width:130%;
	margin:0 auto;
	z-index:3;
	position:relative;
	margin-top:35px;
	padding-bottom:130px;
	margin-left:-15%;
}
@media screen and (max-width: 600px){
	.time-gallery {
		width:100%;
		margin-left:0%;	
	}
}



.time-gallery p {
	width:32%;
	float:left;
	margin-right:2%;
}
.time-gallery img {
	width:100%;
}
.time-gallery .margin-right0 {
	margin-right:0px;
}


.slick-slide {
	margin-left: 40px!important;
}
@media screen and (max-width: 600px){
	.slick-slide {
	margin-left: 20px!important;
	}
}