@charset "UTF-8";

/* =================================================================
	concept
================================================================= */

@media print, screen and (min-width: 769px){
	#container #concept_lead {
		padding-top: 86px;
		height: 1000px;
		background: #000000 url(../img/concept/bg_concept.jpg) no-repeat bottom right;
		box-sizing: border-box;
    position: relative;
	}

	#container #concept_lead #concept_lead_title {
		width: 404px;
		height: 180px;
		text-indent: -9999px;
		margin-bottom: 43px;
		background: url(../img/concept/concept_lead_title.png) no-repeat;
		background-size: contain;
	}
	
	#container #concept_lead #concept_lead_text {
		width: 404px;
		height: 0;
		padding-top: 275px;
		text-indent: -9999px;
		background: url(../img/concept/concept_lead_text.png) no-repeat;
		background-size: contain;
	}

	#container #concept_lead #concept_lead_text p {
		display: none;
	}
	
  #container #concept_lead #concept_lead_img {
    width: 306px;
    position: absolute;
    top: 96px;
    left: 50%;
    margin-left: 172px;
  }
  
  #container #concept_lead #concept_lead_img p:not(:first-child) {
    margin-top: -52px;
  }
  
	#container #concept_movie {
		background: url(../img/concept/bg_concept_movie.jpg) repeat;
		background-size: cover;
	}

	#container #concept_movie .content_inner {
		padding: 64px 0 54px;	
	}
	
	#container #concept_movie .content_inner h2 {
		width: 520px;
		height: 40px;
		margin: 0 auto 43px;
		text-indent: -9999px;
	}
	
	#container #concept_movie .content_inner .yuragi_movie_title {
		background: url(../img/concept/yuragi_movie_title.png) repeat;
		background-size: contain;
	}

	#container #concept_movie .slick-arrow {
		content: "";
		display: block;
		width: 36px;
		height: 36px;
		z-index: 2;
		border-right: 2px solid #cccccc;
		border-bottom: 2px solid #cccccc;
		position: absolute;
		margin: 0;
		box-sizing: border-box;
	}

	#container #concept_movie .slick-arrow:before {
		display: none;
	}

	#container #concept_movie .slick-prev {
		left: -68px;
		transform: rotate(135deg);
	}

	#container #concept_movie #concept_body .slick-next {
		right: -68px;
		transform: rotate(-45deg);
	}

	#container #concept_movie #concept_body li .iframe_wrap {
		width: 800px;
		margin: 0 auto;
		line-height: 0;
	}
}


@media screen and (max-width: 768px){
	#container #concept_lead {
		height: 805px;
		color: #FFF;
		background: #000000 url(../img/concept/bg_concept_sp.jpg) no-repeat bottom center;
		background-size: 500px auto;
		position: relative;
		box-sizing: border-box;
	}

	#container #concept_lead #concept_lead_title {
		padding: 32px 0px 20px 28px;
		font-size: 21px;
		font-weight: normal;
		font-family: 'Noto Serif Japanese', serif;
		line-height: 1.42;
	}

	#container #concept_lead #concept_lead_title strong {
		display:block;
		font-size: 31.5px;
		font-weight: normal;
		line-height: 35.5px;
	}
	
	#container #concept_lead #concept_lead_text {
		margin-bottom: 20px;
	}
	
	#container #concept_lead #concept_lead_text p {
		padding: 0 0 0 30px;
		font-size: 12px;
		line-height: 2.08;
		font-family: 'Noto Serif Japanese', serif;
	}
	
	#container #concept_lead #concept_lead_text p span {
		display: inline-block;
	}
	
	#container #concept_lead  #concept_lead_img {
    display: flex;
    justify-content: center;
    padding: 1.8em 0 0;
	}
  
	#container #concept_lead  #concept_lead_img p {
    width: 30%;
    margin-left: -15px;
  }
  
	#container #concept_lead  #concept_lead_img p:first-child {
    margin-left: 0;
  }

	#container #concept_lead  #concept_lead_img p img {
    width: 100%;
  }
  
	
	/**/
	
	#container #concept_movie {
		background: url(../img/concept/bg_concept_movie.jpg) repeat;
		background-size: cover;
	}
	
	#container #concept_movie .content_inner {
		padding: 34.5px 0 52px;	
	}
	
	#container #concept_movie .content_inner h2 {
		margin: 0 auto 33px;
		text-align: center;
		font-size: 26px;
		color: #fff;
		font-family: 'Noto Serif Japanese', serif;
	}
	
	#container #concept_movie #concept_body > ul {
		margin: 0 15px;
	}

	#container #concept_movie .slick-arrow {
		content: "";
		display: block;
		width: 24px;
		height: 24px;
		z-index: 2;
		border-right: 2px solid #cccccc;
		border-bottom: 2px solid #cccccc;
		position: absolute;
		margin: 0;
		top: 5px;
		box-sizing: border-box;
	}

	#container #concept_movie .slick-arrow:before {
		display: none;
	}

	#container #concept_movie .slick-prev {
		left: 15px;
		transform: rotate(135deg);
	}

	#container #concept_movie #concept_body .slick-next {
		right: 15px;
		transform: rotate(-45deg);
	}
	
	#container #concept_movie #concept_body li .iframe_wrap {
		padding: 30px 0 56.25%;
		position: relative;
		overflow: hidden;
	}

	#container #concept_movie #concept_body li .iframe_wrap > iframe {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

}

@media screen and (max-width: 500px){
	#container #concept_movie .content_inner {
		padding: 7.4vw 0 9.3vw;	
	}
	
	#container #concept_movie .content_inner h2 {
		margin: 0 auto 5.87vw;
		font-size: 5.3vw;
	}

	#container #concept_movie .slick-arrow {
		width: 3.2vw;
		height: 3.2vw;
		border-right: 0.26vw solid #cccccc;
		border-bottom: 0.26vw solid #cccccc;
		top: 0.9vw;
	}

	#container #concept_movie .slick-prev {
		left: 2.3vw;
	}

	#container #concept_movie #concept_body .slick-next {
		right: 2.3vw;
	}
	
}