@charset"utf-8";
/*
Web Site ver.1  --  Section CSS
Author : Hideyuki Koyama -MONTAGE lab.(https://www.montagelab.jp)
Latest Updated : 21 Dec. 2024
*/

/**
 * Table of Contents
 *
 * 1.0 - Reset
 * 2.0 - 
 * 3.0 - 
 * 4.0 - 
 * 5.0 - 
 * 6.0 - 
 * 7.0 - 
 *
 */


/* **************************************************************************** */
/*
/* -- home
/*
/* **************************************************************************** */

.home-content	{ 
	position:relative;
	display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch;
	min-height:100vh; 
	background-image: linear-gradient(0deg, #E5A695, #CC8875);
}
.home-content .section-content	{ position:relative; z-index:21; padding:15vh 0 120px; width:90%; font-family: "Noto Serif JP", serif; color:#fff;}
.home-content .section-header	{ position:relative; z-index:8; padding:4.4rem 8% 4.4rem;}
.home-content .section-title	{ text-align:left;}
.home-content .section-title small	{ 
	display:block; margin:0 0 0.6em;
	font-family: "Playfair Display", serif; font-optical-sizing:none;
	font-size:2.8rem; font-weight:700; line-height:1.2;
	opacity:0;
}
.home-content .section-title i		{ display:block; font-style:italic;}
.home-content .section-title big	{ 
	display:block;
	font-family: "Josefin Sans", sans-serif; font-optical-sizing:none;
	font-size:6.0rem; font-weight:700; line-height:1.2;
	opacity:0;
}
.home-content .content	{ position:relative; z-index:9; padding:0 8%; text-align:left;}
.home-content .content .home-content-title	{ margin:0 0 1.6em; font-size:2.5rem; letter-spacing:0.1em; opacity:0;}
.home-content .content p	{ margin:0 0 0.8em; font-size:1.3rem; line-height:2; opacity:0;}
.home-content .content p br	{ display:none;}

.home-content .emotion	{ width:10%; text-align:right;}
.home-content .videowrap	{ 
	position:sticky; top:0; left:auto; right:0; z-index:1; 
	transform:translateX(-90%); width:100vw;
}
.slick-current .home-content .section-title small	{ animation:horizontal_show 0.6s ease-out 0.4s 1 normal forwards;}
.slick-current .home-content .section-title big	{ animation:horizontal_show 0.6s ease-out 0.6s 1 normal forwards;}
.slick-current .home-content .content .home-content-title	{ animation:horizontal_show 0.4s ease-out 1.0s 1 normal forwards;}
.slick-current .home-content .content p	{ animation:horizontal_show 0.4s ease-out 1.2s 1 normal forwards;}

.home-content video	{ display:block; width:100vw; height:100vh; min-height:1064px; object-fit:cover;}



/* **************************************************************************** */
/*
/* -- page
/*
/* **************************************************************************** */
.page-section-wrap { position:relative; min-height:100vh;}
.photography	{ background-image: linear-gradient(#ACBDCF, #CAB7B2);}
.videography	{ background-image: linear-gradient(#A99D93, #B3ABA4);}
.artalbum	{ background-image: linear-gradient(#A5C9CF, #C6D5C5);}
.page-section-wrap:after	{ 
	position:absolute; top:0; left:-36px; z-index:1; content:''; 
	width:45%; height:100%;
	background-repeat:no-repeat;
	background-position:0 5vh;
	background-size:100% auto;
	opacity:0;
}
.photography .page-section-wrap:after	{ background-image:url(../img/behind-photography.svg);}
.videography .page-section-wrap:after	{ background-image:url(../img/behind-videography.svg);}
.artalbum .page-section-wrap:after	{ background-image:url(../img/behind-artalbum.svg);}
.slick-current .page-section-wrap:after	{ animation:alpha 2.0s ease-out 0.6s 1 normal forwards;}

.page-section {
	position:relative; z-index:21;
	display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch;
	min-height:100vh; 
}

.page-section .section-content	{ position:relative; z-index:20; padding:0 0 20vh; width:90%; font-family: "Noto Serif JP", serif; color:#fff;}
.page-section .section-header	{ position:sticky; top:0; z-index:9; padding:15vh 4% 0; text-align:left;}
.page-section .section-title	{ 
	position:relative;
	display:block; margin:0 0 0.6em;
	font-family: "Playfair Display", serif; font-optical-sizing:none;
	font-size:3.2rem; font-weight:700; line-height:1.2;
	writing-mode:vertical-rl;
	opacity:0;
}
.page-section .section-title:before	{ 
	position:absolute; top:-18px; right:-8px; content:'';
	width:6px; height:28px; background-color:#fff; transform:skewX(-30deg);
}
.page-section .content	{ position:relative; z-index:8; margin:0; padding:0 0 0 25%; text-align:left;}
.page-section .content .page-content-title	{ 
	margin:0 0 0.8em; font-size:2.1rem; letter-spacing:0.05em; 
	font-family: "Josefin Sans", sans-serif; line-height:1.5;
	opacity:0;
}
.page-section .content p	{ margin:0 0 0.8em; font-size:1.4rem; line-height:2.0em; opacity:0;}
.page-section .content p br	{ display:none;}

.page-section .emotion	{ width:10%; text-align:right;}
.page-section .videowrap	{ position:sticky; top:0; left:auto; right:0; z-index:1; transform:translateX(-90%); width:100vw;}

.slick-current .page-section .section-title	{ animation:vertical_show 0.6s ease-out 0.4s 1 normal forwards;}
.slick-current .page-section .content .page-content-title	{ animation:horizontal_show 0.4s ease-out 0.6s 1 normal forwards;}
.slick-current .page-section .content p	{ animation:horizontal_show 0.4s ease-out 0.8s 1 normal forwards;}

@keyframes vertical_show {
	0%	{ transform:translate(0,-60px); opacity:0;}
	100%{ transform:translate(0,0); opacity:1;}
}
@keyframes horizontal_show {
	0%	{ transform:translate(-40px,0); opacity:0;}
	100%{ transform:translate(0,0); opacity:1;}
}
@keyframes alpha {
	0%	{ opacity:0; filter:blur(20px);}
	100%{ opacity:1; filter:blur(0);}
}



/**
 * Video commons
**/

.emotion .videowrap:before	{ position:absolute; top:0; left:0; content:''; width:100%; height:100%; background-color:rgba(0,0,0,.4);}
video	{ display:block; width:100vw; height:100vh; min-height:864px; object-fit:cover;}



/**
 * -- Recruit
**/
.recruit-form-title	{ font-family: "Josefin Sans", sans-serif; font-size:2.8rem; font-weight:700; color:#fff;}
.recruit-container	{ margin:0 0 5rem;}
.recruit-title	{ margin:0 0 0.8em; padding:0 0 0.4em; font-size:2.0rem; font-weight:500; color:#fff; border-bottom:1px solid rgba(255,255,255,.7);}
dl.recrut	{}
dl.recrut dt	{}
dl.recrut dd	{ margin:0 0 8px; padding:12px 14px; color:#6D4638; background-color:rgba(255,255,255,.7);}


.privacypolicy	{}
.privacypolicy h4	{ padding:1.6em 0; border:solid rgba(255,255,255,.5); border-width:1px 0;}
.privacypolicy h5	{}
.privacypolicy p	{}
.privacypolicy ul	{}
.privacypolicy ol	{ margin:0 0 0 2em;}




/**
 * Slick navigation css
**/

/* Arrows */
.slick-prev,
.slick-next	{
	display:block;
	position:absolute; bottom:24px; z-index:90;
	padding:0;
	width:40px; height:30px;
	font-size:0; line-height:0; color:transparent;
	background:transparent;
	border:none; outline:none; cursor:pointer;
	opacity:0.75;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus	{
	color:transparent;
	outline:none;
	background:transparent;
	opacity:1;
}
.slick-prev:hover:before,
.slick-prev:focus:before	{ left:-10px;}
.slick-prev:hover:after,
.slick-prev:focus:after		{ left:-4px;}

.slick-prev	{ right:calc(50% + 120px);}
.slick-prev:before	{
	position:absolute; top:50%; left:0; content:'';
	width:100%; height:1px; line-height:1;
	transition:all 0.2s ease;
	background-color:#fff;
}
.slick-prev:after	{
	position:absolute; bottom:14px; left:6px; content:'';
	width:2px; height:16px; line-height:1;
	transform:skewX(-45deg); transition:all 0.2s ease; 
	background-color:#fff;
}

.slick-next	{ left:calc(50% + 120px);}
.slick-next:before	{
	position:absolute; top:50%; left:0; content:'';
	width:100%; height:1px; line-height:1;
	transition:all 0.2s ease;
	background-color:#fff;
}
.slick-next:after	{
	position:absolute; top:15px; right:6px; content:'';
	width:2px; height:16px; line-height:1;
	transform:skewX(-45deg); transition:all 0.2s ease;
	background-color:#fff;
}
.slick-next:hover:before,
.slick-next:focus:before	{ left:10px;}
.slick-next:hover:after,
.slick-next:focus:after		{ right:-4px;}


/* Dots */
.slick-dotted.slick-slider	{ margin:0;}

.slick-dots	{
	display:block;
	position:absolute; bottom:24px;
	margin:0; padding:0; width:100%;
	list-style:none; text-align:center;
}
.slick-dots li	{
	position:relative; z-index:999;
	display:inline-block; line-height:0;
	margin:0 5px; padding:0;
	cursor:pointer;
}
.slick-dots li button	{
	display:block; padding:0; width:30px; height:30px;
	font-size:0; line-height:0; color:transparent;
	border:0; outline:none; background:transparent;
	cursor:pointer; opacity:0.5; transition:width 0.2s ease;
}
.slick-dots li button:hover,
.slick-dots li button:focus	{ outline:none; opacity: 1;}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before	{}
.slick-dots li button:before	{
	position:absolute; top:50%; left:0; content:'';
	width:100%; height:1px;
	background-color:#fff;
}
.slick-dots li.slick-active button	{ width:44px; opacity:1;}


/* **************************************************************************** */
/*
/* Media Queries
/*
/* **************************************************************************** */

@-ms-viewport 	{ width: device-width;}
@viewport 		{ width: device-width;}


@media screen and (min-width: 720px) {

	/* Arrows */
	.slick-prev,
	.slick-next	{ width:60px; height:30px;}

	.slick-prev	{ right:calc(50% + 120px);}
	.slick-prev:after	{ bottom:14px; left:6px; height:16px;}
	.slick-prev:hover:before,
	.slick-prev:focus:before	{ left:-10px;}
	.slick-prev:hover:after,
	.slick-prev:focus:after		{ left:-4px;}

	.slick-next	{ left:calc(50% + 120px);}
	.slick-next:after	{ top:15px; right:6px; height:16px;}
	.slick-next:hover:before,
	.slick-next:focus:before	{ left:10px;}
	.slick-next:hover:after,
	.slick-next:focus:after		{ right:-4px;}

	/* Dots */
	.slick-dots li button	{ width:30px; height:30px;}
	.slick-dots li.slick-active button	{ width:44px;}


	.home-content .section-header	{ padding:4.4rem 15% 4.4rem;}
	.home-content .content	{ padding:0 15%;}
	.home-content .section-title small	{ font-size:4.6rem;}
	.home-content .section-title i	{ display:inline-block;}
	.home-content .section-title big	{ font-size:8.8rem;}
	.home-content .content .home-content-title	{ margin:0 0 1.6em; font-size:2.5rem;}
	.home-content .content p	{ font-size:1.4rem;}


	.page-section .section-title	{ margin:0 0 0 32px; font-size:6.0rem;}
	.page-section .section-title:before	{ top:-22px; right:-10px; width:8px; height:36px;}
	.page-section .content	{ margin:-100px 0 0; padding:0 0 0 30%;}
	.page-section .content .page-content-title	{ margin:0 0 1.8em; font-size:2.4rem;}
	.page-section .content p	{ font-size:1.5rem; line-height:2.2;}
	.page-section .content p br	{ display:block;}

}

@media screen and (min-width: 1024px) {

/**
 * -- home
**/
	.home-content	{ 
		align-items:center;
		width:100%; min-height:100vh;
	}
	.home-content .section-content	{ padding:0; width:50%;}
	.home-content .emotion	{ width:50%;}

	.home-content .section-header	{ width:100vw; padding:4.4rem 10% 4.4rem;}
	.home-content .content	{ padding:0 10%;}
	.home-content .section-title	{ margin:0;}
	.home-content .section-title small	{ font-size:4.6rem;}
	.home-content .section-title i	{ display:inline-block;}
	.home-content .section-title big	{ font-size:7.8rem;}
	.home-content .content .home-content-title	{ margin:0 0 1.8em; font-size:2.5rem;}
	.home-content .content p	{ font-size:1.3rem;}
	.home-content .content p br	{ display:block;}
	.home-content .videowrap	{ 
		margin:0; width:50vw; transform:translateX(0%);
	}
	.home-content video	{ display:block; width:50vw; height:100vh; min-height:auto; object-fit:cover;}


/**
 * -- page
**/
	.page-section {
		align-items:stretch;
		width:100%; min-height:100vh; 
	}
	.page-section .section-content	{ padding:50vh 0 15vh; width:50%;}
	.page-section .emotion	{ width:50%;}
	
	.page-section .section-header	{ position:absolute; top:15vh; right:25px; padding:0; width:1px;}
	.page-section .section-title	{ margin:0; font-size:5.0rem;}
	.page-section .section-title:before	{ top:-22px; right:-10px; width:8px; height:36px;}
	.page-section .content	{ margin:0; padding:0 10%;}
	.page-section .content .page-content-title	{ margin:0 0 0.8em; font-size:2.1rem; line-height:1.5;}
	.page-section .content p	{ font-size:1.4rem; line-height:2.0;}
	.page-section .content p br	{ display:block;}
	.page-section .videowrap	{
		margin:0; width:50vw; transform:translateX(0%);
	}
	.page-section video	{ display:block; width:50vw; height:100vh; min-height:auto; object-fit:cover;}



}

@media screen and (min-width: 1400px) {

/**
 * -- home
**/
	.home-content .section-content	{ padding:0; width:30%;}
	.home-content .emotion	{ width:70%;}

	.home-content .section-header	{ padding:8.4rem 8vw 4.4rem;}
	.home-content .content	{ width:50vw; padding:0 2vw 0 8vw;}
	.home-content .section-title small	{ font-size:6.2rem;}
	.home-content .section-title big	{ font-size:10.0rem;}
	.home-content .content .home-content-title	{ margin:0 0 1.4em;}
	.home-content .content p	{ font-size:1.4rem;}
	.home-content .videowrap	{ position:relative; width:70vw;}
	.home-content video	{ width:100%; height:auto;}

/**
 * -- page
**/
	.page-section-wrap	{ display:flex; align-items:center;}
	.page-section { align-items:stretch; min-height:auto;}
	.page-section .section-content	{ display:flex; align-items:center; padding:0; width:30%;}
	.page-section .emotion	{ width:70%; align-self:center;}
	
	.page-section .section-header	{ top:-5.6rem; right:26px;}
	.page-section .section-title	{ font-size:7.2rem;}
	.page-section .section-title:before	{ top:-22px; right:-10px; width:10px; height:44px;}
	.page-section .content	{ align-self:flex-end; padding:0 3vw 4vh 8vw;}
	.page-section .content .page-content-title	{ font-size:2.4rem;}
	.page-section .content p	{ font-size:1.4rem;}
	.page-section .videowrap	{ position:relative; width:70vw;}
	.page-section video	{ width:100%; height:auto;}

}


@media screen and (min-width: 1600px) {

}


@media screen and (min-width: 1900px) {

	.home-content .section-header	{ padding:10.4rem 8vw 6.4rem;}
	.home-content .section-title small	{ font-size:7.2rem;}
	.home-content .section-title big	{ font-size:12.0rem;}
	.home-content .content .home-content-title	{ margin:0 0 1.4em; font-size:2.8rem;}
	.home-content .content p	{ font-size:1.6rem; line-height:2.1em;}


	.page-section .content	{ padding:0 2vw 6vh 8vw;}
	.page-section .content .page-content-title	{ font-size:2.4rem;}
	.page-section .content p	{ font-size:1.6rem;}

}