@charset "utf-8";

/*
************************************************************************
* タイトル
* @copyright Revolme Inc.
************************************************************************
*/

/*
************************************************************************
* TOPページスライドショー
************************************************************************
*/
#index-slide
{
	width:100%;
	/*height:57.8vw;*/
	height:50vw;
	max-height:1120px;
	overflow:hidden;
}
#index-slide.hide
{
	visibility:hidden;
}
#index-slide.show
{
	padding-top:0%;
	opacity:0;
	animation-name:animVisual;
	animation-duration:1.0s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes animVisual {
	0% {
		opacity:0;
	}
	100% {
		opacity:1.0;
	}
}
#index-slide ul.slick-slider
{
	padding:0;
	margin:0;
	list-style:none;
	width:100%;
}
#index-slide ul.slick-slider li
{
	padding:0;
	margin:0;
	list-style:none;
}
#index-slide ul.slick-slider li > div.img
{
	width:100%;
	/*height:57.8vw;*/
	height:50vw;
	max-height:1120px;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
#index-slide ul.init.slick-slider li.slick-active > div.img
{
	animation-name:animZoomout;
	animation-duration:3.0s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes animZoomout {
	0% {
		transform:scale(1.05, 1.05);
	}
	100% {
		transform:scale(1.0, 1.0);
	}
}
#index-slide .slideDots
{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	
	padding:20px 30px;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.4+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
}
#index-slide .slideDots .slick-dots
{
	position:relative;
	bottom:auto;
	text-align:left;
	
	margin:0;
	padding:0;
	list-style:none;
	
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:stretch;
    align-content:stretch;
}
#index-slide .slideDots .slick-dots li
{
	margin:8px;
	padding:0;
	list-style:none;
	line-height:0px;
}
#index-slide .slideDots .slick-dots li button
{
	background-color:transparent;
	border:0px solid transparent;
	font-size:0px;
	line-height:0px;
}
#index-slide .slideDots .slick-dots li button:after
{
	content:"";
	display:block;
	
	width:10px;
	height:10px;
	border-radius:100%;
	
	border:2px solid #FFFFFF;
	background-color:transparent;
	
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
}
#index-slide .slideDots .slick-dots li.slick-active button:after
{
	background-color:#FFFFFF;
}
#index-slide .slideDots .slick-dots li button:hover:after
{
	transform:scale(1.6);
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 750px) {
	#index-slide
	{
		height:138.6vw;
	}
	#index-slide ul.slick-slider li > div.img
	{
		height:138.6vw;
	}
	#index-slide .slideDots
	{
		padding:4vw;
	}
	#index-slide .slideDots .slick-dots
	{
		justify-content:center;
	}
	#index-slide .slideDots .slick-dots li
	{
		margin:2vw;
	}
	#index-slide .slideDots .slick-dots li button:after
	{
		width:2.6vw;
		height:2.6vw;
	}
}

/*
************************************************************************
* 一覧ページタイトル
************************************************************************
*/
#mv-image
{
	overflow:hidden;
	width:100%;
}
#mv-image.hide
{
	visibility:hidden;
}
#mv-image.show
{
	opacity:0;
	animation-name:animVisual;
	animation-duration:0.5s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
#mv-image div.img
{
	width:100%;
	padding-top:34.7%;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;

	animation-name:animZoomout;
	animation-duration:3.0s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 750px) {
	#mv-image div.img
	{
		padding-top:100.0%;
	}
}

/*
************************************************************************
* ページタイトル
************************************************************************
*/
#page-title
{
	position:absolute;
	top:0;
	left:0;
	
	width:100%;
	padding:20px;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.4+0,0+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
#page-title.hide
{
	visibility:hidden;
}
#page-title.show
{
}
#page-title.show h1
{
	text-align: center;
	opacity:0;
	animation-name:animTitle;
	animation-duration:0.5s;
	animation-delay:0.8s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes animTitle {
	0% {
		opacity:0;
		transform:translateY(-100%);
	}
	100% {
		opacity:1.0;
		transform:translateY(0%);
	}
}
#page-title h1.logo img
{
	width:300px;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 750px) {
	#page-title
	{
		positon:absolute;
		padding:5.3vw 4vw;
	}
	#page-title h1.logo img
	{
		width:60vw;
	}
}

/*
************************************************************************
* 詳細ページタイトル
************************************************************************
*/
#page-title-detail
{
	width:100%;
	padding:30px 40px;
	
	border-bottom:1px solid #948c85;
}
#page-title-detail h1.logo img
{
	width:300px;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 750px) {
	#page-title-detail
	{
		padding:5.3vw 4vw;
		height:18.6vw;
		border-bottom:0px solid transparent;
		background-color:#9a8673;
	}
	#page-title-detail h1.logo img
	{
		width:60vw;
	}
}

/*
************************************************************************
* 段落見出し
************************************************************************
*/
.title-lv2
{
}
.title-lv2 .main
{
	display:block;
	font-size:4.0rem;
	line-height:1;
	letter-spacing:0.05em;
	margin-left: -0.05em;
}
.title-lv2 .sub
{
	display:block;
	font-size:1.8rem;
	line-height:1;
	margin-top:1.0em;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	.title-lv2
	{
	}
	.title-lv2 .main
	{
		font-size:5.4rem;
	}
	.title-lv2 .sub
	{
		font-size:3.0rem;
		margin-top:1.2em;
	}
}