@charset "utf-8";

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

/*
************************************************************************
* INDEXタイトル部
************************************************************************
*/
#index-title
{
	z-index:1;
}
#index-title .logo
{
	height:100px;
}
#index-title .logo a
{
	display:block;
	width:410px;
	height:100px;
}
#index-title .logo img
{
	width:410px;
	height:100px;
}
#index-title .mv
{
	height:700px;
	width:calc(100% - 80px);
	
	margin:0px 40px;
}
#index-title .mv .mv-slide
{
	padding:0;
	margin:0;
	list-style:none;
	
	height:700px;
}
#index-title .mv .mv-slide li
{
	padding:0;
	margin:0;
	list-style:none;
	
	height:700px;
}
#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:-55px;
	right:00px;
	opacity:1.0;
	
	font-size:1.4rem;
	color:#666666;
}
#index-title .mv .mv-slide-count .current
{
	margin-left:1em;
}
#index-title .mv .mv-slide-count .total
{
	margin-right:1em;
}
#index-title .mv .mv-slide-count .slideArrow
{
	-webkit-appearance:none;
	border-radius:100%;
	
	background-color:#FFFFFF;
	border:1px solid #dddddd;
	color:#666666;
	
	width:2.5em;
	height:2.5em;
}
#index-title .mv .mv-slide-count .slideArrow:after
{
	content:"";
	display:inline-block;
	width:0.4em;
	height:0.4em;
}
#index-title .mv .mv-slide-count .slideArrow.slidePrev:after
{
	border-bottom:1px solid #666666;
	border-left:1px solid #666666;
	transform:rotate(45deg) translate(-0.00em, -0.15em);
}
#index-title .mv .mv-slide-count .slideArrow.slideNext:after
{
	border-top:1px solid #666666;
	border-right:1px solid #666666;
	transform:rotate(45deg) translate(-0.15em, -0.00em);
}
#index-title .news
{
	position:absolute;
	top:100px;
	right:40px;
	
	background-color:#f5f5f5;
	color:#222222;
	
	font-size:1.4rem;
	line-height:1;
	
	padding:1em;
}
#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:#ffeceb;
}
#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%;
	}
	100% {
		opacity:1.0;
		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);
	}
}

/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	#index-title
	{
		z-index:1;
	}
	#index-title .logo
	{
		width:100%;
		height:21.33333vw;
	}
	#index-title .logo a
	{
		position:relative;
		transform:translate(0%, 0%);
		
		display:block;
		width:calc(70vw);
		height:21.33333vw;
	}
	#index-title .logo img
	{
		position:relative;
		width:100%;
		height:auto;
	}
	#index-title .mv
	{
		height:112.0vw;
		width:calc(100% - 8vw);
		margin:0vw 4vw;
	}
	#index-title .mv .mv-slide
	{
		padding:0;
		margin:0;
		list-style:none;
		
		height:112.0vw;
	}
	#index-title .mv .mv-slide li
	{
		padding:0;
		margin:0;
		list-style:none;
		height:112.0vw;
	}
	#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:absolute;
		top:21.33333vw;
		right:4vw;
		
		background-color:#f5f5f5;
		color:#222222;
		
		font-size:2.0rem;
		line-height:1;
		
		padding:1em;
	}
	#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;
	}
}

/*
************************************************************************
* ページタイトル
************************************************************************
*/
#page-title
{
	z-index:1;
	/* background-color:#FFFFFF; */
	overflow:hidden;
}
#page-title .mv
{
	height:590px;
	width:calc(100% - 0px);
	
	margin:0px;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
#page-title .title,
#body-contents > .title
{
	width:100%;
	
	text-align:center;
	
	margin-bottom:80px;
	
	padding-top:50px;
	padding-bottom:50px;
	
	background-position:center bottom;
	background-repeat:no-repeat;
	background-size:74px auto;
	background-image:url(../../../_img/title-ribon.svg);
}
#page-title .title:after,
#body-contents > .title:after
{
}
#page-title .title .main,
#body-contents > .title .main
{
	display:block;
	font-size:3.6rem;
	line-height:1.2;
	letter-spacing: 0.1em;
}
#page-title .title .sub,
#body-contents > .title .sub
{
	display:block;
	font-size:1.4rem;
	line-height:1;
	letter-spacing: 0.1em;
	margin-top:0.5em;
}
#page-title .mv
{
	opacity:0.0;
	
	animation-name:animZoomout;
	animation-duration:3.0s;
	/* animation-timing-function:cubic-bezier(.74,0,.35,1); */
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
#page-title .mv.no-anime
{
	opacity:1.0;
	animation-name:none;
}
@keyframes animZoomout {
	0% {
		opacity:0.0;
		transform:scale(1.05, 1.05);
	}
	20% {
		opacity:1.0;
	}
	100% {
		opacity:1.0;
		transform:scale(1.0, 1.0);
	}
}
#page-title .mv:after
{
	/*content:'';*/
	display:block;
	position:absolute;
	
	top:0;
	bottom:0;
	right:0;
	
	
	width:100%;
	height:100%;
	background-color:#ffeceb;
}
#page-title .mv:after
{
	animation-name: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 mv_anim {
	0% {
		opacity:1.0;
		width:100%;
	}
	100% {
		opacity:1.0;
		width:0%;
	}
}
#page-title .title .main,
#page-title .title .sub,
#body-contents > .title .main,
#body-contents > .title .sub
{
	opacity:0.0;
	animation-name:title_anim;
	animation-duration:0.5s;
	animation-delay:0.8s;
	animation-timing-function:linear;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes title_anim {
	0% {
		opacity:0.0;
		transform:translateY(20%);
	}
	100% {
		opacity:1.0;
		transform:translateY(0%);
	}
}

/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	#page-title .mv
	{
		height:66.66666vw;
		width:calc(100% - 0vw);
		margin:0vw;
	}
	#page-title .title,
	#body-contents > .title
	{
		margin-top:0vw;
		margin-bottom:10vw;
		padding-top:10vw;
		padding-bottom:7vw;
		
		background-size:13vw auto;
	}
	#page-title .title:after,
	#body-contents > .title:after
	{
		width:8.26666vw;
		height:5.06666vw;
	}
	#page-title .title .main,
	#body-contents > .title .main
	{
		font-size:4.8rem;
	}
	#page-title .title .sub,
	#body-contents > .title .sub
	{
		font-size:2.0rem;
		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 #222222;
	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 #222222;
	border-bottom:1px solid #222222;
	
	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: 767px) {
	.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
{
}
.title-lv1 .main
{
	display:block;

	/* font-weight:bold; */
	font-size:2.6rem;
	/*line-height:1.2;*/
	line-height:1.5;
}
.title-lv1.title-lv1-l .main
{
	font-size:3.2rem;
}
.title-lv1 .main > small {
	font-weight: normal;
	font-size: .8em;
	margin-left: .4em;
}
.title-lv1 .main.ff-amiko
{
	font-size:2.6rem;
	line-height:1.4;
}
.title-lv1 .sub
{
	display:block;
	line-height:1;

	margin-top:1em;
}
.title-lv1 .button
{
	position:absolute;
	top:0;
	right:30px;
}
.title-lv1 .caption
{
	position:absolute;
	top:0;
	right:30px;
}
.title-lv1 + .caption
{
	font-size:1.4rem;
}
.title-lv1 .caption.kimono {
	color: #666666;
	font-size: 1.4rem;
	display: inline-flex;
	align-items: center;
	align-content: center;
}
.title-lv1 .caption-question
{
	display: inline-block;
	border: 1px solid #666666;
	border-radius: 50%;
	text-align: center;
	padding-top: 3px;
	padding-left: 1px;
	width: 20px;
	height: 20px;
	line-height: 1;
	margin-right: 0.5em;
	font-weight: 500;
}
.title-lv1 .caption.kimono:hover {
	text-decoration: none;
}
.title-lv1 .caption.tax {
	color: #666666;
	font-size: 1.4rem;
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	.title-lv1
	{
	}
	.title-lv1 .main
	{
		font-size:3.8rem;
		line-height:1.5;
	}
	.title-lv1 .main.ff-amiko
	{
		font-size:3.8rem;
		line-height:1.0;
	}
	.title-lv1.title-lv1-l .main
	{
		font-size:4.2rem;
	}
	.title-lv1 .sub
	{
		display:block;
		line-height:1.5;

		margin-top:1em;
	}
	.title-lv1 + .caption
	{
		font-size:2.6rem;
	}
	.title-lv1 .caption
	{
		position:absolute;
		top:0.5em;
		right:6.6vw;
	}
	.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: 767px) {
	.title-lv2
	{
	}
	.title-lv2 .main
	{
		font-size:3.2rem;
	}
}