@charset "UTF-8";

:root{
	--body : #333;
	--link : #333;
	--primary : #100454;
}

/*--------------------------------------------
MAIN VISUAL
---------------------------------------------*/

#mv{
	position : relative;
}

#mv video{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}

#mv .box{
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
}

#mv .wrap{
	height : 100%;
}

#mv h1 , #mv p{
	font-style : italic;
	color : #fff;
	font-weight : 900;
	letter-spacing : .1em;
	line-height : 1.2;
}

#mv h1{
	border-bottom-style : solid;
	border-bottom-color : currentColor;
}

#mv a{
	display : block;
	position : absolute;
}

@media screen and (max-width: 999px){
	#mv{
		height : calc( 100vh - ( 120 * 100vw / 768 ) );
	}
	#mv .wrap{
		padding-left : calc( 30 * 100% / 768 );
		padding-right : calc( 30 * 100% / 768 );
		padding-bottom : calc( ( 153 - 3 ) * 100vw / 768 );
		display : flex;
		flex-direction : column;
		justify-content : flex-end;
	}
	#mv h1{
		width : calc( 500 * 100% / 708 );
		border-bottom-width : calc( 2 * 100vw / 768 );
		font-size : 6.5rem;
		padding-bottom : calc( ( 33 - 6.5 ) * 100vw / 768 );
	}
	#mv p{
		margin-top : calc( ( 24 - 3 ) * 100vw / 768 );
		font-size : 3rem;
	}
	#mv a{
		right : calc( 14 * 100% / 768 );
		bottom : calc( 19 * 100vw / 768 );
	}
	#mv a img{
		height : calc( 201 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	#mv{
		height : calc( 90vh - 120px );
	}
	#mv .wrap{
		display : flex;
		flex-direction : column;
		justify-content : center;
		padding-left : 33px;
		position : relative;
	}
	#mv h1{
		font-size : 7rem;
		padding-bottom : calc( 21px - 7px );
		border-bottom-width : 2px;
		width : 800px;
		padding-left : 33px;
	}
	#mv p{
		font-size : 3rem;
		margin-top : calc( 16px - 3px );
		padding-left : 33px;
	}
	#mv a{
		bottom : -15px;
		right : 91px;
	}
	#mv a img{
		height : 201px;
	}
}

/*--------------------------------------------
NEW
---------------------------------------------*/

#new h2{
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	font-style : italic;
	font-weight : 700;
}

#new li{
	border-bottom-style : solid;
	border-bottom-color : #ccc;
}

#new time{
	font-weight : 500;
	font-style : italic;
	letter-spacing : .1em;
}

#new h3{
	font-style : italic;
	font-weight : 500;
	line-height : 1.2;
	letter-spacing : .1em;
}

@media screen and (max-width: 999px){
	#new .wrap{
		padding-top : calc( 108 * 100vw / 768 );
		padding-bottom : calc( 76 * 100vw / 768 );
	}
	#new h2{
		font-size : 4rem;
	}
	#new ul{
		margin-top : calc( 28 * 100vw / 768 );
	}
	#new li{
		border-bottom-width : calc( 3 * 100vw / 768 );
	}
	#new li a{
		display : block;
		padding-top : calc( 16 * 100vw / 768 );
		padding-bottom : calc( 16 * 100vw / 768 );
		padding-top : calc( ( 38 - 7 ) * 100vw / 768 );
		padding-bottom : calc( ( 38 - 7 ) * 100vw / 768 );
	}
	#new time{
		font-size : 2.6rem;
		line-height : 1.5385;
	}
	#new h3{
		font-size : 2.6rem;
		line-height : 1.5385;
		margin-top : calc( 10 * 100vw / 768 );
	}
	#new a[target="_blank"]{
		background : url("../images/ui/icon/pdf.svg") right 0 bottom calc( 34 * 100vw / 768 ) / auto calc( 65 * 100vw / 768 ) no-repeat;
	}
	#new .link01{
		margin-top : calc( 42 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	#new .wrap{
		padding-top : 138px;
		padding-bottom : 67px;
        background: rgba(255,255,255,.4)
	}
	#new h2{
		font-size : 4rem;
	}
	#new ul{
		margin-top : 33px;
	}
	#new li{
		border-bottom-width : 1px;
	}
	#new li a{
		display : flex;
		align-items : flex-start;
		padding-top : 16px;
		padding-bottom : 16px;
		padding-left : 30px;
		padding-right : 30px;
	}
	#new time , #new h3{
		min-height : 40px;
	}
	#new time{
		font-size : 1.8rem;
		width : 208px;
		flex-shrink : 0;
		padding-top : 11px;
	}
	#new h3{
		font-size : 1.8rem;
		padding-top : calc( 11px - 1.8px );
	}
	#new a[target="_blank"] h3{
		display : flex;
		align-items : flex-start;
	}
	#new a[target="_blank"] h3:after{
		content : "";
		display : block;
		background : url("../images/ui/icon/pdf.svg") 0 0 / contain no-repeat;
		width : 40px;
		height : 40px;
		margin-left : 12px;
		margin-top : calc( -11px + 1.8px );
		font-size : 0;
	}
	#new .link01{
		margin-top : 40px;
	}
}

/*--------------------------------------------
ABOUT
---------------------------------------------*/

#about .wrap{
	position : relative;
}

#about h2{
	font-style : italic;
	font-weight : 700;
	color : #100454;
	color : var(--primary);
	letter-spacing : .1em;
}

#about h2:before{
	letter-spacing : .02em;
	color : rgba(153,153,153,.2);
	position : absolute;
	line-height : 1;
	font-style : italic;
	font-weight : 900;
	font-family : "Roboto", sans-serif;
}

#about p{
	letter-spacing : .1em;
}

@media screen and (max-width: 999px){
	#about{
		background-image : url("../images/home/about/bg_sp.png");
		background-position : 0 bottom;
		background-size : 100% auto;
		background-repeat : no-repeat;
	}
	#about .wrap{
		padding-top : calc( ( 132 - 10 ) * 100vw / 768 );
		padding-bottom : calc( 432 * 100vw / 768 );
	}
	#about h2{
		font-size : 4rem;
		line-height : 1.5;
	}
	#about h2:before{
		font-size : 6rem;
		top : calc( 319 * 100vw / 768 );
		right : calc( 24 * 100% / 768 );
	}
	#about p{
		font-size : 2.6rem;
		line-height : 2;
		margin-top : calc( 30 * 100vw / 768 );
	}
	#about .link01{
		margin-top : calc( ( 42 - 13 ) * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	#about{
		background-image : url("../images/home/about/bg02_pc.png");
		background-position : right 0;
		background-size : auto 100%;
		background-repeat : no-repeat;
	}
	#about .col-6{
		padding-top : calc( 200px - 7.5px );
		padding-bottom : 227px;
		background : url("../images/home/about/bg01_pc.png") 0 110px / calc( 620 * 100% / 720 ) auto no-repeat;
	}
	#about h2{
		font-size : 3rem;
		line-height : 1.5;
	}
	#about h2:before{
		font-size : 6rem;
		top : 287px;
		left : 374px;
	}
	#about p{
		font-size : 1.8rem;
		line-height : 2;
		margin-top : 20px;
	}
	#about .link01{
		margin-top : calc( 41px - 9px );
	}
}
@media screen and (min-width: 1000px) and (max-width:1340px){
	#about{
		background-image : url("../images/home/about/bg02_pc.png");
		background-position : left  0 !important;
		background-size : auto 100%;
		background-repeat : no-repeat;
	}
}
/*--------------------------------------------
OVERVIEW
---------------------------------------------*/

#overview{
	background-repeat : no-repeat;
	background-position : 0;
}

#overview .wrap{
	position : relative;
}

#overview h2{
	letter-spacing : .1em;
	font-weight : 700;
	z-index : 1;
	font-style : italic;
}

#overview h2:before{
	font-family : "Roboto", sans-serif;
	font-weight : 900;
	line-height : 1;
	letter-spacing : .02em;
	position : absolute;
	font-style : italic;
	color : rgba(255,255,255,.1);
}

#overview p{
	letter-spacing : .1em;
}

#overview h3{
	letter-spacing : .1em;
	border-bottom-style : solid;
	border-bottom-color : #fff;
	border-bottom-width : 1px;
	font-style : italic;
}

#overview li a{
	display : block;
	color : #fff;
	font-style : italic;
}

@media screen and (max-width: 999px){
	#overview{
		background-image : url("../images/home/overview/bg_sp.png");
		background-size : auto 100%;
		background-size : cover;
		over-flow : hidden;
	}
	#overview .wrap{
		padding-top : calc( 115 * 100vw / 768 );
		padding-bottom : calc( 78 * 100vw / 768 );
	}
	#overview h2{
		font-size : 4rem;
	}
	#overview h2:before{
		font-size : 6rem;
		top : calc( 76 * 100vw / 768 );
		right : calc( 23 * 100% / 768 );
	}
	#overview p{
		font-size : 2.6rem;
		line-height : 2;
		margin-top : calc( 40 * 100vw / 768 );
	}
	#overview .link01{
		margin-top : calc( ( 40 - 13 ) * 100vw / 768 );
	}
	#overview h3{
		width : calc( 442 * 100% / 720 );
		padding-bottom : calc( 13 * 100vw / 768 );
		margin-top : calc( 64 * 100vw / 768 );
		font-size : 2.6rem;
	}
	#overview ul{
		margin-top : calc( 36 * 100vw / 768 );
	}
	#overview li + li{
		margin-top : calc( 26 * 100vw / 768 );
	}
	#overview li a{
		font-size : 2.6rem;
	}
}

@media print,screen and (min-width: 1000px){
	#overview{
		background-image : url("../images/home/overview/bg_pc.png");
		background-size : auto 100%;
		overflow : hidden;
	}
	#overview .col-6{
		padding-top : 172px;
		padding-bottom : 112px;
	}
	#overview h2{
		font-size : 3rem;
	}
	#overview h2:before{
		font-size : 6rem;
		top : 129px;
		left : 881px;
	}
	#overview p{
		font-size : 1.8rem;
		line-height : 2;
		margin-top : 20px;
	}
	#overview .link01{
		margin-top : calc( 33px - 9px );
	}
	#overview h3{
		width : 320px;
		padding-bottom : 11px;
		margin-top : 23px;
		font-size : 1.8rem;
	}
	#overview ul{
		margin-top : 32px;
	}
	#overview li + li{
		margin-top : 22px;
	}
	#overview li a{
		font-size : 1.8rem;
	}
}

/*--------------------------------------------
PORTFOLIO
---------------------------------------------*/

#portfolio h2{
	display : flex;
	align-items : center;
	justify-content : space-between;
	letter-spacing : .1em;
	font-style : italic;
	font-weight : 700;
	color : #100454;
}

#portfolio h2:after{
	letter-spacing : .1em;
	font-family : "Roboto", sans-serif;
	font-weight : 900;
	color : rgba(153,153,153,.2);
	letter-spacing : .02em;
}

#portfolio h3{
	font-weight : 700;
	letter-spacing : .1em;
	color : #100454;
	line-height : 1.2;
	font-style : italic;
}

#portfolio p{
	letter-spacing : .1em;
}

@media screen and (max-width: 999px){
	#portfolio .wrap{
		padding-top : calc( ( 109 - 6.5 ) * 100vw / 768 );
		padding-left : 0;
		padding-right : 0;
	}
	#portfolio .col-5{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
	#portfolio h2{
		font-size : 4rem;
	}
	#portfolio h2:after{
		font-size : 6rem;
	}
	#portfolio h3{
		font-size : 3.5rem;
		margin-top : calc( 40 * 100vw / 768 );
	}
	#portfolio p{
		font-size : 2.6rem;
		line-height : 2;
		margin-top : calc( 30 * 100vw / 768 );
	}
	#portfolio .link01{
		margin-top : calc( ( 36 - 13 ) * 100vw / 768 );
	}
	#portfolio .col-7{
		margin-top : calc( 51 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	#portfolio{
		overflow : hidden;
	}
	#portfolio .wrap{
		padding-top : 30px;
		padding-bottom : 36px;
	}
	#portfolio h2{
		font-size : 3rem;
	}
	#portfolio h2:after{
		font-size : 6rem;
	}
	#portfolio h3{
		font-size : 2.4rem;
		margin-top : calc( 20px - 6.5px - 2.4px );
	}
	#portfolio p{
		font-size : 1.8rem;
		line-height : 1.6667;
		margin-top : calc( 26px - 2.4px - 6px );
	}
	#portfolio .link01{
		margin-top : calc( 35px - 6px );
	}
}