@charset "utf-8";

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

/*
************************************************************************
* INDEXタイトル部
************************************************************************
*/
#index-title
{
	z-index:1;
}
#index-title .gradation
{
	position:absolute;
	top:0;
	left:0;
	right:0;
	
	height:250px;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.2+0,0+50 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
#index-title .logo
{
	position:absolute;
	top:0;
	left:0;
	right:0;
	
	height:100px;
}
#index-title .logo a
{
	display:block;
	width:410px;
	height:100px;
}
#index-title .logo img
{
	width:380px;
	height:100px;
}
#index-title .mv
{
	height:51vw;
	min-height:700px;
	max-height:800px;
	
	width:calc(100% - 0px);
	margin:0px 0px;
}
#index-title .mv .mv-slide
{
	padding:0;
	margin:0;
	list-style:none;
	
	height:51vw;
	min-height:700px;
	max-height:800px;
}
#index-title .mv .mv-slide li
{
	padding:0;
	margin:0;
	list-style:none;
	
	height:51vw;
	min-height:700px;
	max-height:800px;
}
#index-title .mv .mv-slide li > div
{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
#index-title .news
{
	position:absolute;
	bottom:10px;
	right:10px;
	
	background-color:#eeeeee;
	color:#222222;
	
	font-size:1.4rem;
	line-height:1.7;
	
	padding:25px;
}
#index-title .topics
{
	position:absolute;
	top:calc(100% - 40px);
	left:0px;
	
	/*transform:translateY(calc(50% + 30px));*/
	
	width:calc(100% - 250px);
	
	background-color:#dd6b8e;
	color:#FFFFFF;
}
#index-title .topics .title
{
	position:absolute;
	top:50%;
	left:0;
	
	transform:translateY(-50%);
	
	width:180px;
	
	line-height:1;
	text-align:center;
	
	letter-spacing: 0.15em;
	
	font-size:2.0rem;
}
#index-title .topics .contents
{
	background-color:#f5f5f5;
	margin-left:180px;
	
	padding:2.2em 9em 2.5em 2em;
	
	color:#222222;
}
#index-title .topics .contents .border
{
	border-right:1px solid #c7c7c7;
}
#index-title .topics .contents .date
{
	
}
#index-title .topics .contents .description
{
	
}
#index-title .topics .contents .link
{
	position:absolute;
	
	top:50%;
	right:2.0em;
	
	transform:translateY(-50%);
	
}
#index-title .topics .contents .link a
{
	color:#222222;
	padding-right:2.3em;
}
#index-title .topics .contents .link a:after
{
	content:"";
	
	display:block;
	position:absolute;
	top:calc(50% - 0.50em);
	right:0.0em;
	
	width:1.7em;
	height:0.8em;
	/*
	transform:skew(45deg, 0deg);
	
	border:0px solid transparent;
	border-right:1px solid #222222;
	border-bottom:1px solid #222222;
	*/
	
	background-image:url(../../../_img/icon/arrow-line.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;

	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
#index-title .topics .contents .link a:hover
{
	text-decoration:none;
	/*opacity:0.7;*/
}
#index-title .topics .contents .link a:hover:after
{
	transform:translateX(0.5em);
}
#index-title .mv:after
{
	content:'';
	display:block;
	position:absolute;
	
	top:0;
	bottom:0;
	right:0;
	
	
	width:100%;
	height:100%;
	background-color:#1b1514;
}
#index-title .mv:after
{
	animation-name:index_mv_anim;
	animation-duration:0.8s;
	animation-delay:1.5s;
	animation-timing-function:cubic-bezier(.74,0,.35,1);
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes index_mv_anim {
	0% {
		opacity:1.0;
		width:100%;
	}
	99% {
		opacity:0.0;
		width:100%;
	}
	100% {
		width:0%;
	}
}
#index-title .logo
{
	filter:blur(5px);
	opacity:0.0;
	
	animation-name:index_logo_anim;
	animation-duration:0.5s;
	animation-delay:1.0s;
	animation-timing-function:linear;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes index_logo_anim {
	0% {
		opacity:0.0;
		filter:blur(5px);
	}
	100% {
		opacity:1.0;
		filter:blur(0px);
	}
}

.mv .slick-dots
{
	bottom:30px;
	left:30px;
	height:1em;
	width:auto;
}
.mv .slick-dots li
{
	height:auto !important;
}
.mv .slick-dots li button:before
{
	content:'';

	border-radius:100%;
	border:1px solid #FFFFFF;
	background-color:transparent;

	width:1.2em;
	height:1.2em;

    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
}
.mv .slick-dots li.slick-active button:before
{
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;

	background-color:#FFFFFF;
}

/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 750px) {
	#index-title
	{
		z-index:1;
	}
	#index-title .gradation
	{
		height:50vw;
	}
	#index-title .logo
	{
		width:100%;
		height:21.33333vw;
	}
	#index-title .logo a
	{
		position:relative;
		transform:translate(0%, 0%);
		
		display:block;
		width:calc(62.666667vw);
		height:21.33333vw;
	}
	#index-title .logo img
	{
		position:relative;
		width:100%;
		height:auto;
	}
	#index-title .mv
	{
		height:138.6vw;
		min-height:auto;
		max-height:none;
		
		width:calc(100% - 0vw);
		margin:0vw 0vw;
		
		
	}
	#index-title .mv .mv-slide
	{
		padding:0;
		margin:0;
		list-style:none;
		
		height:138.6vw;
		min-height:auto;
		max-height:none;
	}
	#index-title .mv .mv-slide li
	{
		padding:0;
		margin:0;
		list-style:none;
		height:138.6vw;
		min-height:auto;
		max-height:none;
	}
	#index-title .mv .mv-slide li > div
	{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		width:100%;
		height:100%;
		
		background-position:center center;
		background-repeat:no-repeat;
		background-size:cover;
	}
	#index-title .mv .mv-slide-count
	{
		position:absolute;
		bottom:auto;
		top:calc(100% - 1.8em);
		right:-4vw;
		opacity:1.0;
		font-size:2.0rem;
		
		width:34vw;
		
		padding:1.5em;
		background-color:#FFFFFF;
		
		line-height:2;
	}
	#index-title .mv .mv-slide-count .slideArrow
	{
		width:2.5em;
		height:2.5em;
	}
	#index-title .mv .mv-slide-count .slideArrow.slidePrev:after
	{
		transform:rotate(45deg) translate(-0.05em, -0.20em);
	}
	#index-title .mv .mv-slide-count .slideArrow.slideNext:after
	{
		transform:rotate(45deg) translate(-0.20em, -0.05em);
	}
	#index-title .news
	{
		position:relative;
		bottom:auto;
		right:auto;
		
		font-size:2.0rem;
		line-height:1.65;
		
		padding:4vw 6.6vw;
		
		margin:6.6vw;
		margin-bottom:0;
	}
	#index-title .topics
	{
		position:relative;
		bottom:auto;
		left:auto;
		right:auto;
		
		transform:translateY(0%);
		
		width:calc(100% - 4vw);
		
		background-color:#dd6b8e;
		color:#FFFFFF;
		
		margin-top:2.5em;
	}
	#index-title .topics .title
	{
		position:absolute;
		top:auto;
		bottom:100%;
		
		transform:translateY(0%);
		
		width:auto;
		
		line-height:1;
		text-align:center;
		
		-webkit-writing-mode: horizontal-tb;
		    -ms-writing-mode: horizontal-tb;
		        writing-mode: horizontal-tb;
		background-color:#dd6b8e;
		color:#FFFFFF;
		
		padding:1.5em 2.0em;
		
		font-size:2.4rem
	}
	#index-title .topics .contents
	{
		margin-left:0vw;
		
		padding:1.0em 1.5em;
		
		color:#222222;
	}
	#index-title .topics .contents .border
	{
		border-right:0px solid transparent;
	}
	#index-title .topics .contents .date
	{
		font-size:2.2rem;
	}
	#index-title .topics .contents .description
	{
		font-size:2.2rem;
	}
	#index-title .topics .contents .link
	{
		position:relative;
		
		top:auto;
		right:auto;
		
		transform:translateY(0%);
		
		text-align:right;
		
		margin-top:1em;
	}
	#index-title .topics .contents .link a
	{
		color:#222222;
	}
	.mv .slick-dots
	{
		bottom:6vw;
		left:0px;
		right:0px;
		height:2.6vw;
		width:auto;
	}
	.mv .slick-dots li
	{
		margin:0 1.5vw !important;
	}
	.mv .slick-dots li button:before
	{
		content:'';

		border-radius:100%;
		border:1px solid #FFFFFF;
		background-color:transparent;

		width:2.6vw;
		height:2.6vw;

	    filter:alpha(opacity=100);
	    -moz-opacity: 1.0;
	    opacity: 1.0;
	}
	.mv .slick-dots li.slick-active button:before
	{
	    filter:alpha(opacity=100);
	    -moz-opacity: 1.0;
	    opacity: 1.0;

		background-color:#FFFFFF;
	}
}

/*
************************************************************************
* ページタイトル
************************************************************************
*/
#page-title
{
	z-index:1;
}
#page-title .gradation
{
	position:absolute;
	top:0;
	left:0;
	right:0;
	
	height:250px;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.2+0,0+50 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
#page-title .logo
{
	position:absolute;
	top:0;
	left:0;
	right:0;
	
	height:100px;
}
#page-title .logo a
{
	display:block;
	width:380px;
	height:100px;
}
#page-title .logo img
{
	width:410px;
	height:100px;
}
#page-title .mv
{
	height:600px;
	width:calc(100% - 0px);
	
	margin:0px;
	margin-top:0px;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
#page-title .title
{
	width:100%;
	
	text-align:center;
	
	padding-top:80px;
	padding-bottom:50px;
}
#page-title .title:after
{
}
#page-title .title .main
{
	display:block;
	font-size:4.8rem;
	line-height:1.2;
	letter-spacing: 0.1em;
}
#page-title .title .sub
{
	display:block;
	font-size:1.3rem;
	line-height:1;
	letter-spacing: 0.1em;
	margin-top:1.0em;
}
#page-title .mv
{
}
#page-title .mv:after
{
	content:'';
	display:block;
	position:absolute;
	
	top:0;
	bottom:0;
	right:0;
	
	
	width:100%;
	height:100%;
	background-color:#1b1514;
}
#page-title .mv:after
{
	animation-name:mv_anim;
	animation-duration:1.0s;
	animation-delay:0.5s;
	animation-timing-function:cubic-bezier(.74,0,.35,1);
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes mv_anim {
	0% {
		opacity:1.0;
		width:100%;
	}
	99% {
		opacity:0.0;
		width:100%;
	}
	100% {
		width:0%;
	}
}
#page-title .title,
#page-title .title .main,
#page-title .title .sub
{
	overflow:hidden;
}
#page-title .title .main > span,
#page-title .title .sub > span
{
	animation-name:title_anim;
	animation-duration:0.5s;
	animation-delay:0.8s;
	animation-timing-function:linear;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
	
	display:inline-block;
	transform:translateY(100%);
}
@keyframes title_anim {
	0% {
		transform:translateY(100%);
	}
	100% {
		transform:translateY(0%);
	}
}
#page-title .title .main > span:nth-child(0) {animation-delay:1.00s; animation-duration:0.20s;}
#page-title .title .main > span:nth-child(1) {animation-delay:1.05s; animation-duration:0.25s;}
#page-title .title .main > span:nth-child(2) {animation-delay:1.10s; animation-duration:0.30s;}
#page-title .title .main > span:nth-child(3) {animation-delay:1.15s; animation-duration:0.35s;}
#page-title .title .main > span:nth-child(4) {animation-delay:1.20s; animation-duration:0.40s;}
#page-title .title .main > span:nth-child(5) {animation-delay:1.25s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(6) {animation-delay:1.30s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(7) {animation-delay:1.35s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(8) {animation-delay:1.40s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(9) {animation-delay:1.45s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(10){animation-delay:1.50s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(11){animation-delay:1.55s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(12){animation-delay:1.60s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(13){animation-delay:1.65s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(14){animation-delay:1.70s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(15){animation-delay:1.75s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(16){animation-delay:1.80s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(17){animation-delay:1.85s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(18){animation-delay:1.90s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(19){animation-delay:1.95s; animation-duration:0.45s;}
#page-title .title .main > span:nth-child(20){animation-delay:2.00s; animation-duration:0.45s;}

#page-title .title .sub > span:nth-child(0) {animation-delay:1.00s; animation-duration:0.20s;}
#page-title .title .sub > span:nth-child(1) {animation-delay:1.05s; animation-duration:0.25s;}
#page-title .title .sub > span:nth-child(2) {animation-delay:1.10s; animation-duration:0.30s;}
#page-title .title .sub > span:nth-child(3) {animation-delay:1.15s; animation-duration:0.35s;}
#page-title .title .sub > span:nth-child(4) {animation-delay:1.20s; animation-duration:0.40s;}
#page-title .title .sub > span:nth-child(5) {animation-delay:1.25s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(6) {animation-delay:1.30s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(7) {animation-delay:1.35s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(8) {animation-delay:1.40s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(9) {animation-delay:1.45s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(10){animation-delay:1.50s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(11){animation-delay:1.55s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(12){animation-delay:1.60s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(13){animation-delay:1.65s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(14){animation-delay:1.70s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(15){animation-delay:1.75s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(16){animation-delay:1.80s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(17){animation-delay:1.85s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(18){animation-delay:1.90s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(19){animation-delay:1.95s; animation-duration:0.45s;}
#page-title .title .sub > span:nth-child(20){animation-delay:2.00s; animation-duration:0.45s;}

/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 750px) {
	#page-title .mv
	{
		height:100.0vw;
		width:calc(100% - 0vw);
		margin:0vw;
	}
	#page-title .gradation
	{
		height:50vw;
	}
	#page-title .logo
	{
		width:100%;
		height:21.33333vw;
	}
	#page-title .logo a
	{
		top:0;
		left:0px;
		
		position:relative;
		transform:translate(0%, 0%);
		
		display:block;
		width: calc(62.666667vw);
		height: 21.33333vw;
	}
	#page-title .logo img
	{
		position:relative;
		width:100%;
		height:auto;
		/*display:none;*/
	}
	#page-title .title
	{
		padding-top:12vw;
		padding-bottom:9vw;
	}
	#page-title .title:after
	{
		width:8.26666vw;
		height:5.06666vw;
	}
	#page-title .title .main
	{
		font-size:5.8rem;
	}
	#page-title .title .sub
	{
		font-size:2.4rem;
		margin-top:0.5em;
	}
}

/*
************************************************************************
* コンテンツアンカー
************************************************************************
*/
.contents-anchor
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	
	padding:0;
	margin:0 -20px;
	list-style:none;
}
.contents-anchor li
{
	list-style:none;
	
	padding:0;
	margin:0 20px;
}
.contents-anchor li.large
{
	width:calc(50% - 40px);
}
.contents-anchor li.middle
{
	width:calc(33.33333% - 40px);
}
.contents-anchor li.small
{
	width:calc(25% - 40px);
}
.contents-anchor li a
{
	display:block;
	border-bottom:1px solid #FFFFFF;
	text-align:center;
}
.contents-anchor li a > *
{
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.contents-anchor li a:hover
{
	text-decoration:none;
}
.contents-anchor li a:hover > *
{
	opacity:0.7;
}
.contents-anchor li a:after
{
	content:"";
	display:block;
	position:absolute;
	
	top:calc(50% - 0.35em);
	right:0.8em;
	transform:translateY(-50%) rotate(45deg) skew(10deg, 10deg);
	
	width:0.7em;
	height:0.7em;
	
	border-right:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.contents-anchor li a:hover:after
{
	opacity:0.7;
}
.contents-anchor li a > span
{
	display:block;
	
	line-height:1;
	font-size:2.0rem;
	
	padding:1.2em;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 750px) {
	.contents-anchor
	{
		margin:0 -2.5vw;
	}
	.contents-anchor li
	{
		margin:0 2.5vw;
	}
	.contents-anchor li.large,
	.contents-anchor li.middle
	{
		width:calc(100% - 5vw);
	}
	.contents-anchor li.small
	{
		width:calc(100% - 5vw);
	}
	.contents-anchor li a
	{
	}
	.contents-anchor li a:after
	{
		right:1.5em;
		width:0.7em;
		height:0.7em;
	}
	.contents-anchor li a > span
	{
		font-size:2.6rem;
	}
}

/*
************************************************************************
* 段落見出し
************************************************************************
*/
.title-lv1
{
	text-align:center;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
.title-lv1 .main
{
	display:block;
	font-weight:normal;
	font-size:4.8rem;
	padding:1.4em 0;
	line-height:1;
	letter-spacing: 0.1em;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 750px) {
	.title-lv1
	{
	}
	.title-lv1 .main
	{
		font-size:6.0rem;
		line-height:1.5;
	}
	.title-lv1 .main.ff-amiko
	{
		font-size:4.0rem;
		line-height:1.0;
	}
	.title-lv1 .sub
	{
		display:block;
		line-height:1.5;

		margin-top:1em;
	}
	.title-lv1 .caption
	{
		position:absolute;
		top:0;
		right:10px;
	}
	.title-lv1 .caption.kimono {
		font-size: 2.0rem;
	}
	.title-lv1 .caption-question
	{
		font-size: 1.8rem;
		padding-top: 0.67vw;
		padding-left: 1px;
		width: 4vw;
		height: 4vw;
		vertical-align: middle;
	}
	.title-lv1 .caption.kimono:hover {
	}
	.title-lv1 .caption.tax {
		font-size: 2.0rem;
	}

}

/*
************************************************************************
* 段落見出し
************************************************************************
*/
.title-lv2
{
	text-align:center;
}
.title-lv2 .main
{
	display:block;
	font-weight:normal;
	font-size:2.4rem;
	line-height:1;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 750px) {
	.title-lv2
	{
	}
	.title-lv2 .main
	{
		font-size:3.2rem;
	}
}