@charset "UTF-8";

/* --------------------------------------------
WORKS
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#worksWrapper{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 102 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#worksWrapper{
		display : grid;
		grid-template-columns : calc( 362 * 100% / 1880 ) calc( 1440 * 100% / 1880 );
		align-items : start;
		justify-content : space-between;
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#worksWrapper{
		padding-inline : calc( 60 var( --designBaseX ) );
		padding-top : calc( 50 var( --designBaseY ) );
		padding-bottom : calc( 224 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#worksWrapper{
		max-width : 2000px;
		padding-inline : 60px;
		padding-top : 50px;
		padding-bottom : 224px;
		margin-inline : auto;
	}
}
#worksFilter h3{
	font-weight : 400;
	letter-spacing : .05em;
}
#worksFilter .years{
	display : grid;
}
#worksFilter .years:not( .is-more ) > li:not( .is-view ){
	display : none;
}
#worksFilter .years label{
	display : block;
	width : 100%;
	height : 100%;
}
#worksFilter .years label input[type="checkbox"]{
	position : absolute;
	visibility : hidden;
	opacity : 0;
}
#worksFilter .years label span{
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
	color : #666;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	background-color : var( --white );
	border-color : #999;
	border-style : solid;
	transition : background var( --transitionBase ) , color var( --transitionBase ) , border-color var( --transitionBase );
}
#worksFilter .years label input[type="checkbox"]:checked + span , #worksFilter .years label span:hover{
	color : var( --white );
	background-color : #434343;
	border-color : #434343;
}
#worksFilter button{
	display : grid;
	place-items : center;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	background-color : #edeaea;
}
#worksFilter button.is-click{
	display : none;
}
#worksFilter .contents{
	display : flex;
	flex-wrap : wrap;
}
#worksFilter .contents label{
	display : block;
	width : 100%;
	height : 100%;
}
#worksFilter .contents label input[type="checkbox"]{
	position : absolute;
	visibility : hidden;
	opacity : 0;
}
#worksFilter .contents label span{
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
	color : #666;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	background-color : var( --white );
	border-color : #999;
	border-style : solid;
	transition : background var( --transitionBase ) , color var( --transitionBase ) , border-color var( --transitionBase );
}
#worksFilter .contents label input[type="checkbox"]:checked + span , #worksFilter .contents label span:hover{
	color : var( --white );
	background-color : #434343;
	border-color : #434343;
}
#worksFilter .selectWrapper{
	position : relative;
}
#worksFilter .selectWrapper::after{
	position : absolute;
	top : 50%;
	display : block;
	color : #666;
	pointer-events : none;
	content : "▼";
	translate : 0 -50%;
}
#worksFilter select{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	border-color : #999;
	border-style : solid;
	appearance : none;
}
@media screen and ( max-width : 750px ){
	#worksFilter h3{
		font-size : 3.4rem;
	}
	#worksFilter .years{
		grid-template-columns : repeat( 4 , calc( 156 var( --percentBase ) ) );
		grid-auto-rows : calc( 50 var( --remBase ) );
		row-gap : calc( 20 var( --remBase ) );
		column-gap : calc( 20 var( --percentBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
	#worksFilter .years span{
		font-size : 2.8rem;
		border-width : calc( 2 var( --remBase ) );
	}
	#worksFilter button{
		grid-template-columns : auto calc( 24 var( --percentBase ) );
		column-gap : calc( 16 var( --percentBase ) );
		justify-content : center;
		width : 100%;
		height : calc( 60 var( --remBase ) );
		margin-top : calc( 25 var( --remBase ) );
		font-size : 2.6rem;
	}
	#worksFilter button::after{
		width : 100%;
		height : calc( 15 var( --remBase ) );
		content : "";
		background : url( "../images/ui/parts/down02.svg" ) 0 0 / contain no-repeat;
	}
	#worksFilter button + h3{
		margin-top : calc( 50 var( --remBase ) );
	}
	#worksFilter .years + h3{
		margin-top : calc( 50 var( --remBase ) );
	}
	#worksFilter .contents{
		row-gap : calc( 20 var( --remBase ) );
		column-gap : calc( 20 var( --percentBase ) );
		margin-top : calc( 27 var( --remBase ) );
	}
	#worksFilter .contents > li{
		min-width : calc( 200 var( --percentBase ) );
		height : calc( 50 var( --remBase ) );
	}
	#worksFilter .contents span{
		padding-inline : calc( 29 var( --remBase ) );
		font-size : 2.8rem;
		border-width : calc( 2 var( --remBase ) );
	}
	#worksFilter .contents + h3{
		margin-top : calc( 70 var( --remBase ) );
	}
	#worksFilter .selectWrapper{
		width : 100%;
		height : calc( 80 var( --remBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
	#worksFilter .selectWrapper::after{
		right : calc( 20 var( --percentBase ) );
		font-size : 2.8rem;
	}
	#worksFilter select{
		padding-inline : calc( 18 var( --percentBase ) );
		font-size : 2.8rem;
		border-width : 1px;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#worksFilter{
		position : sticky;
		top : var( --headerHeight );
	}
	#worksFilter .years{
		grid-template-columns : repeat( 4 , calc( 80 * 100% / 362 ) );
		column-gap : calc( 10 * 100% / 362 );
	}
	#worksFilter .years span{
		border-width : 1px;
	}
	#worksFilter button{
		width : calc( 350 * 100% / 362 );
		background-image : url( "../images/ui/parts/down02.svg" );
		background-repeat : no-repeat;
		background-position : right calc( 14 * 100% / 362 ) top 50%;
	}
	#worksFilter .contents{
		grid-template-columns : repeat( 3 , calc( 110 * 100% / 362 ) );
		column-gap : calc( 10 * 100% / 362 );
	}
	#worksFilter .contents > li{
		min-width : calc( 110 * 100% / 362 );
	}
	#worksFilter .contents span{
		border-width : 1px;
	}
	#worksFilter .selectWrapper{
		width : 100%;
	}
	#worksFilter select{
		border-width : 1px;
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#worksFilter{
		padding-top : calc( 10 var( --designBaseY ) );
	}
	#worksFilter h3{
		font-size : calc( 30 var( --designBaseY ) );
	}
	#worksFilter .years{
		grid-auto-rows : calc( 40 var( --designBaseY ) );
		row-gap : calc( 10 var( --designBaseY ) );
		margin-top : calc( 32 var( --designBaseY ) );
	}
	#worksFilter .years span{
		font-size : calc( 20 var( --designBaseY ) );
	}
	#worksFilter button{
		height : calc( 30 var( --designBaseY ) );
		margin-top : calc( 8 var( --designBaseY ) );
		font-size : calc( 16 var( --designBaseY ) );
		background-size : auto calc( 8 var( --designBaseY ) );
	}
	#worksFilter button + h3{
		margin-top : calc( 82 var( --designBaseY ) );
	}
	#worksFilter .years + h3{
		margin-top : calc( 82 var( --designBaseY ) );
	}
	#worksFilter .contents{
		row-gap : calc( 10 var( --designBaseY ) );
		margin-top : calc( 27 var( --designBaseY ) );
	}
	#worksFilter .contents > li{
		height : calc( 40 var( --designBaseY ) );
	}
	#worksFilter .contents span{
		padding-inline : calc( 12 var( --designBaseY ) );
		font-size : calc( 20 var( --designBaseY ) );
	}
	#worksFilter .contents + h3{
		margin-top : calc( 70 var( --designBaseY ) );
	}
	#worksFilter .selectWrapper{
		height : calc( 50 var( --designBaseY ) );
		margin-top : calc( 32 var( --designBaseY ) );
	}
	#worksFilter .selectWrapper::after{
		right : calc( 22 * 100% / 362 );
		font-size : calc( 20 var( --designBaseY ) );
	}
	#worksFilter select{
		padding-inline : calc( 22 var( --designBaseY ) );
		font-size : calc( 18 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#worksFilter{
		padding-top : 10px;
	}
	#worksFilter h3{
		font-size : 30px;
	}
	#worksFilter .years{
		grid-auto-rows : 40px;
		row-gap : 10px;
		margin-top : 32px;
	}
	#worksFilter .years span{
		font-size : 20px;
	}
	#worksFilter button{
		height : 30px;
		margin-top : 8px;
		font-size : 16px;
		background-size : auto 8px;
	}
	#worksFilter button + h3{
		margin-top : 82px;
	}
	#worksFilter .years + h3{
		margin-top : 82px;
	}
	#worksFilter .contents{
		row-gap : 10px;
		margin-top : 27px;
	}
	#worksFilter .contents > li{
		height : 40px;
	}
	#worksFilter .contents span{
		padding-inline : 12px;
		font-size : 20px;
	}
	#worksFilter .contents + h3{
		margin-top : 70px;
	}
	#worksFilter .selectWrapper{
		height : 50px;
		margin-top : 32px;
	}
	#worksFilter .selectWrapper::after{
		right : 22px;
		font-size : 20px;
	}
	#worksFilter select{
		padding-inline : 22px;
		font-size : 18px;
	}
}
#works > ul > li > p{
	letter-spacing : .05em;
}
#works picture{
	width : 100%;
}
#works .list01 a{
	display : block;
}
#works .list01 a h2{
	font-weight : 400;
	letter-spacing : .05em;
}
#works .list01 a .box{
	display : flex;
	flex-wrap : wrap;
	align-items : start;
}
#works .list01 a .box ul{
	display : flex;
	flex-wrap : wrap;
}
#works .list01 a .box li{
	display : grid;
	place-items : center;
	color : #fff;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	background-color : #666;
}
#works .list01 a .box p span{
	letter-spacing : .05em;
}
#works .list01 a .box p span + span::before{
	white-space : pre;
	content : "｜";
}
#works .list01 a > p{
	letter-spacing : .05em;
}
#works table{
	width : 100%;
}
#works thead th{
	font-weight : 400;
	letter-spacing : .05em;
}
#works tbody td{
	letter-spacing : .05em;
}
#works tbody h2{
	font-weight : 400;
	letter-spacing : .05em;
}
#works tbody ul{
	display : flex;
	flex-wrap : wrap;
}
#works tbody li{
	display : grid;
	place-items : center;
	color : #fff;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	background-color : #666;
}
#works tbody .is-del{
	background-color : #dfdcdc;
}
#works tbody del{
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
	color : #fff;
	-webkit-text-decoration : none;
	text-decoration : none;
}
@media screen and ( max-width : 750px ){
	#works{
		margin-top : calc( 106 var( --remBase ) );
	}
	#works > ul > li + li{
		margin-top : calc( 175 var( --remBase ) );
	}
	#works > ul > li > p{
		font-size : 6rem;
	}
	#works .list01{
		margin-top : calc( 25 var( --remBase ) );
	}
	#works .list01 > li + li{
		margin-top : calc( ( 80 - 2.6 ) var( --remBase ) );
	}
	#works .list01 a picture img{
		width : 100%;
		height : auto;
	}
	#works .list01 a h2{
		margin-top : calc( ( 27 - 4 ) var( --remBase ) );
		font-size : calc( 40 var( --remBase ) );
		line-height : 1.2;
	}
	#works .list01 a .box{
		column-gap : calc( 16 var( --percentBase ) );
		margin-top : calc( ( 23 - 4 ) var( --remBase ) );
	}
	#works .list01 a .box ul{
		column-gap : calc( 10 var( --remBase ) );
		margin-top : calc( 4 var( --remBase ) );
		margin-bottom : calc( ( 19 - 9 ) var( --remBase ) );
	}
	#works .list01 a .box li{
		width : calc( 160 var( --remBase ) );
		height : calc( 40 var( --remBase ) );
		font-size : 2.6rem;
	}
	#works .list01 a .box p{
		font-size : calc( 26 var( --remBase ) );
		line-height : calc( 44 / 26 );
	}
	#works .list01 a > p{
		margin-top : calc( ( 26 - 10 - 2.6 ) var( --remBase ) );
		font-size : 2.6rem;
		line-height : 1.2;
	}
	#works table{
		display : block;
		margin-top : calc( ( 35 - 2.6 ) var( --remBase ) );
	}
	#works thead{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		width : 100%;
		height : calc( 40 var( --remBase ) );
		padding-inline : calc( 13 var( --percentBase ) );
		background-color : var( --black );
	}
	#works thead tr{
		display : contents;
	}
	#works thead th{
		font-size : 1.8rem;
		color : var( --white );
	}
	#works thead th + th::before{
		font-size : 1.8rem;
		content : "／";
	}
	#works tbody{
		display : block;
		margin-top : calc( ( 30 - 2.6 ) var( --remBase ) );
	}
	#works tbody tr{
		display : flex;
		flex-wrap : wrap;
	}
	#works tbody tr + tr{
		padding-top : calc( ( 35 - 2.6 ) var( --remBase ) );
		margin-top : calc( 26 var( --remBase ) );
		border-top : solid calc( 2 var( --remBase ) ) #dfdcdc;
	}
	#works tbody th{
		display : block;
		width : 100%;
		text-align : left;
	}
	#works tbody h2{
		font-size : 2.6rem;
		font-weight : 500;
		line-height : 1.2;
	}
	#works tbody td:nth-of-type( 1 ){
		width : 100%;
		margin-top : calc( ( 19 - 2.6 - 2.4 ) var( --remBase ) );
		margin-bottom : calc( ( 13 - 2.4 ) var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.2;
	}
	#works tbody td:nth-of-type( 2 ) ul{
		column-gap : calc( 4 var( --remBase ) );
		margin-right : calc( 13 var( --remBase ) );
	}
	#works tbody td:nth-of-type( 2 ) li{
		min-width : calc( 120 var( --remBase ) );
		height : calc( 40 var( --remBase ) );
		padding-inline : calc( 14 var( --remBase ) );
		font-size : 2.4rem;
	}
	#works tbody td:nth-of-type( 3 ){
		font-size : calc( 24 var( --remBase ) );
		line-height : calc( 40 / 24 );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#works .list01{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 460 * 100% / 1440 ) );
		column-gap : calc( 20 * 100% / 1440 );
	}
	#works .list01 a h2{
		line-height : 1.2;
	}
	#works .list01 a picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
	}
	#works .list01 a .box{
		column-gap : calc( 15 * 100% / 460 );
	}
	#works .list01 a .box p{
		line-height : calc( 44 / 18 );
	}
	#works .list01 a > p{
		line-height : calc( 44 / 18 );
	}
	#works thead th{
		position : relative;
		color : #fff;
		text-align : center;
		background-color : var( --black );
	}
	#works thead th:nth-of-type( 1 ){
		width : calc( 500 * 100% / 1440 );
	}
	#works thead th:nth-of-type( 2 ){
		width : calc( 400 * 100% / 1440 );
	}
	#works thead th:nth-of-type( 3 ){
		width : calc( 380 * 100% / 1440 );
	}
	#works thead th + th::before{
		position : absolute;
		top : 50%;
		left : 0;
		width : 1px;
		margin-left : -.5px;
		content : "";
		background-color : #fff;
		translate : 0 -50%;
	}
	#works tbody th , #works tbody td{
		border-bottom : solid 1px #dfdcdc;
	}
	#works tbody th , #works tbody td:nth-of-type( 1 ){
		text-align : left;
	}
	#works tbody td:nth-of-type( 3 ){
		text-align : center;
		text-indent : .05em;
	}
	#works tbody th , #works tbody td:not( :nth-of-type( 2 ) ) , #works tbody h2{
		line-height : 1.2;
	}
	#works tbody ul{
		column-gap : calc( 2 * 100% / 310 );
		justify-content : center;
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#works > ul > li + li{
		margin-top : calc( 106 var( --designBaseY ) );
	}
	#works > ul > li > p{
		font-size : calc( 50 var( --designBaseY ) );
	}
	#works .list01{
		row-gap : calc( ( 33 - 13 ) var( --designBaseY ) );
		margin-top : calc( 28 var( --designBaseY ) );
	}
	#works .list01 a h2{
		margin-top : calc( ( 17 - 3 ) var( --designBaseY ) );
		font-size : calc( 30 var( --designBaseY ) );
	}
	#works .list01 a picture{
		height : calc( 360 var( --designBaseY ) );
	}
	#works .list01 a .box{
		margin-top : calc( ( 13 - 3 - 7 ) var( --designBaseY ) );
	}
	#works .list01 a .box ul{
		column-gap : calc( 4 var( --designBaseY ) );
		margin-top : calc( 7 var( --remBase ) );
	}
	#works .list01 a .box li{
		width : calc( 110 var( --designBaseY ) );
		height : calc( 30 var( --designBaseY ) );
		font-size : calc( 14 var( --designBaseY ) );
	}
	#works .list01 a .box p{
		font-size : calc( 18 var( --designBaseY ) );
	}
	#works .list01 a > p{
		margin-top : calc( ( 16 - 13 - 13 ) var( --designBaseY ) );
		font-size : calc( 18 var( --designBaseY ) );
	}
	#works table{
		margin-top : calc( ( 46 - 13 ) var( --designBaseY ) );
	}
	#works thead th{
		height : calc( 40 var( --designBaseY ) );
		font-size : calc( 18 var( --designBaseY ) );
	}
	#works thead th + th::before{
		height : calc( 100% - ( 10 var( --designBaseY ) ) );
	}
	#works tbody th , #works tbody td{
		padding-block : calc( 15 var( --designBaseY ) );
	}
	#works tbody th , #works tbody td:first-of-type{
		padding-inline : calc( 12 var( --designBaseY ) );
	}
	#works tbody h2 , #works tbody td:not( :nth-of-type( 2 ) ){
		font-size : calc( 22 var( --designBaseY ) );
	}
	#works tbody ul{
		row-gap : calc( 2 var( --designBaseY ) );
	}
	#works tbody li{
		height : calc( 30 var( --designBaseY ) );
		padding-inline : calc( 19 var( --designBaseY ) );
		font-size : calc( 14 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#works > ul > li + li{
		margin-top : 106px;
	}
	#works > ul > li > p{
		font-size : 50px;
	}
	#works .list01{
		row-gap : calc( 33px - 13px );
		margin-top : 28px;
	}
	#works .list01 a picture{
		height : 360px;
	}
	#works .list01 a h2{
		margin-top : calc( 17px - 3px );
		font-size : 30px;
	}
	#works .list01 a .box{
		margin-top : calc( 13px - 3px - 7px );
	}
	#works .list01 a .box ul{
		column-gap : 4px;
		margin-top : 7px;
	}
	#works .list01 a .box li{
		width : 110px;
		height : 30px;
		font-size : 14px;
	}
	#works .list01 a .box p{
		font-size : 18px;
	}
	#works .list01 a > p{
		margin-top : calc( 16px - 13px - 13px );
		font-size : 18px;
	}
	#works table{
		margin-top : calc( 46px - 13px );
	}
	#works thead th{
		height : 40px;
		font-size : 18px;
	}
	#works thead th + th::before{
		height : calc( 100% - 10px );
	}
	#works tbody th , #works tbody td{
		padding-block : 15px;
	}
	#works tbody th , #works tbody td:first-of-type{
		padding-inline : 12px;
	}
	#works tbody h2 , #works tbody td:not( :nth-of-type( 2 ) ){
		font-size : 22px;
	}
	#works tbody ul{
		row-gap : 2px;
	}
	#works tbody li{
		height : 30px;
		padding-inline : 19px;
		font-size : 14px;
	}
}
dialog:not( [open] ){
	display : none;
}
dialog{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 12;
	width : 100%;
	height : 100dvh;
	overflow-y : scroll;
	background-color : rgb( 0 0 0 / .8 );
}
dialog .dialogContent{
	position : relative;
	background-color : #fff;
}
dialog .dialogContent > button{
	z-index : 2;
	display : grid;
	place-items : center;
	aspect-ratio : 1;
	background-color : var( --black );
}
dialog .dialogContent > button:not( .is-sp ){
	position : absolute;
	top : 0;
	right : 0;
}
dialog .swiper-slide{
	width : auto;
}
dialog :where( .prev , .next ){
	all : unset;
	position : absolute;
	z-index : 1;
	display : grid;
	place-items : center;
	aspect-ratio : 1;
	font-size : 0;
	background-color : #fff;
}
dialog .prev{
	left : 0;
}
dialog .next{
	right : 0;
}
dialog .pagination{
	all : unset;
}
dialog .pagination span{
	all : unset;
}
dialog .pagination{
	position : absolute;
	left : inherit ! important;
	z-index : 1;
	display : grid;
	grid-auto-flow : column;
	justify-content : end;
	font-size : 0;
}
dialog .pagination span{
	display : block;
	width : 100%;
	height : 100%;
	margin : 0;
	background-color : var( --white );
}
dialog .swiper-pagination-bullet-active{
	background-color : #666 ! important;
}
dialog h2{
	font-weight : 400;
	color : var( --white );
	letter-spacing : .05em;
	background-color : var( --black );
}
dialog .titles{
	pointer-events : none;
}
dialog .titles ul{
	display : grid;
}
dialog .titles li{
	display : grid;
	place-items : center;
	color : var( --white );
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	background-color : #666;
}
dialog .client{
	letter-spacing : .05em;
}
dialog .info span{
	letter-spacing : .05em;
}
dialog .info span + span::before{
	content : "｜";
}
dialog .comment{
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	dialog .dialogContent{
		padding-bottom : calc( 46 var( --remBase ) );
		margin-inline : auto;
	}
	dialog .dialogContent > button{
		width : calc( 60 var( --viewportBase ) );
	}
	dialog .dialogContent > button.is-sp{
		margin-inline : auto;
		margin-top : calc( ( 50 - 9.2 ) var( --remBase ) );
	}
	dialog :where( .prev , .next ){
		top : calc( 240 var( --remBase ) );
		width : calc( 60 var( --viewportBase ) );
	}
	dialog :where( .prev , .next ) img{
		height : calc( 20 var( --remBase ) );
	}
	dialog picture{
		width : 100%;
		height : calc( 500 var( --remBase ) );
	}
	dialog picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
	}
	dialog .pagination{
		bottom : calc( 7 var( --remBase ) );
		right : calc( 30 var( --viewportBase ) );
		grid-auto-rows : calc( 4 var( --remBase ) );
		grid-auto-columns : calc( 50 var( --percentBase ) );
		column-gap : calc( 4 var( --percentBase ) );
		justify-content : end;
		width : calc( 690 var( --viewportBase ) );
	}
	dialog .titles h2{
		padding-block : calc( ( 27 - 15 ) var( --remBase ) );
		font-size : calc( 30 var( --remBase ) );
		line-height : 2;
	}
	dialog .titles ul{
		grid-auto-rows : calc( 50 var( --remBase ) );
		grid-auto-columns : calc( 200 var( --percentBase ) );
		grid-auto-flow : column;
		column-gap : calc( 10 var( --percentBase ) );
		padding-inline : calc( 30 var( --viewportBase ) );
		margin-top : calc( 33 var( --remBase ) );
		font-size : 2.4rem;
	}
	dialog .data{
		padding-inline : calc( 30 var( --viewportBase ) );
		margin-top : calc( ( 28 - 9 ) var( --remBase ) );
	}
	dialog .data .client{
		font-size : calc( 26 var( --remBase ) );
		line-height : calc( 44 / 26 );
	}
	dialog .data .info{
		margin-top : calc( ( 20 - 9 - 9 ) var( --remBase ) );
	}
	dialog .data .info span{
		font-size : calc( 26 var( --remBase ) );
		line-height : calc( 44 / 26 );
	}
	dialog .data .comment{
		padding-top : calc( ( 30 - 9 ) var( --remBase ) );
		margin-top : calc( ( 34 - 9 ) var( --remBase ) );
		font-size : calc( 26 var( --remBase ) );
		line-height : calc( 44 / 26 );
		border-top : solid calc( 2 var( --remBase ) ) var( --black );
	}
}
@media print , screen and ( min-width : 750.02px ){
	dialog{
		display : grid;
		grid-auto-flow : row;
		align-items : center;
	}
	dialog .dialogContent{
		margin-inline : auto;
	}
	dialog .dialogContent > button{
		width : calc( 60 * 100% / 1200 );
	}
	dialog .dialogContent > button.is-sp{
		display : none;
	}
	dialog :where( .prev , .next ){
		width : calc( 60 * 100% / 1200 );
	}
	dialog .pagination{
		right : calc( 20 * 100% / 1200 );
		grid-auto-columns : calc( 50 * 100% / 1200 );
		column-gap : calc( 4 * 100% / 1200 );
	}
	dialog .titles{
		position : relative;
		z-index : 2;
		display : grid;
		grid-template-columns : calc( 832 * 100% / 1200 ) 1fr;
		column-gap : calc( 11 * 100% / 1200 );
		align-items : end;
		translate : 0 -50%;
	}
	dialog .titles h2{
		padding-inline : calc( 27 * 100% / 832 );
		line-height : 1.2;
	}
	dialog .titles ul{
		grid-template-columns : repeat( 3 , calc( 110 * 100% / 357 ) );
		column-gap : calc( 4 * 100% / 357 );
	}
	dialog .data{
		position : relative;
		display : grid;
		grid-template-columns : calc( 362 * 100% / 1144 ) 1fr;
		padding-inline : calc( 28 * 100% / 1200 );
	}
	dialog .data::before{
		position : absolute;
		top : 0;
		left : calc( 322 * 100% / 1144 );
		width : 1px;
		height : 100%;
		content : "";
		background-color : var( --black );
	}
	dialog .data .client{
		grid-row : 1;
		grid-column : 1;
		line-height : calc( 44 / 18 );
	}
	dialog .data .info{
		grid-row : 2;
		grid-column : 1;
	}
	dialog .data .info span{
		line-height : calc( 44 / 18 );
	}
	dialog .data .comment{
		grid-row : 1/3;
		grid-column : 2;
		line-height : calc( 27 / 18 );
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	dialog .dialogContent{
		width : calc( 1200 * 100vw / 2000 );
		padding-bottom : calc( 9 var( --designBaseY ) );
	}
	dialog .dialogContent > button img{
		height : calc( 28 var( --designBaseY ) );
	}
	dialog picture img{
		height : calc( 606 var( --designBaseY ) );
	}
	dialog :where( .prev , .next ){
		top : calc( 270 var( --designBaseY ) );
	}
	dialog :where( .prev , .next ) img{
		height : calc( 20 var( --designBaseY ) );
	}
	dialog .pagination{
		bottom : calc( 8 var( --designBaseY ) );
		grid-auto-rows : calc( 4 var( --designBaseY ) );
	}
	dialog .titles h2{
		padding-block : calc( ( 29 - 2.6 ) var( --designBaseY ) );
		font-size : calc( 26 var( --designBaseY ) );
	}
	dialog .titles ul{
		grid-auto-rows : calc( 30 var( --designBaseY ) );
		font-size : calc( 14 var( --designBaseY ) );
	}
	dialog .data{
		padding-block : calc( ( 17 - 4.5 ) var( --designBaseY ) );
		margin-top : calc( ( -42 + 12 ) var( --designBaseY ) );
	}
	dialog .data .client{
		margin-top : calc( -8.5 var( --designBaseY ) );
		font-size : calc( 18 var( --designBaseY ) );
	}
	dialog .data .info{
		margin-top : calc( ( 17 - 13 - 13 ) var( --designBaseY ) );
	}
	dialog .data .info span{
		font-size : calc( 18 var( --designBaseY ) );
	}
	dialog .data .comment{
		font-size : calc( 18 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	dialog .dialogContent{
		width : 1200px;
		padding-bottom : 9px;
	}
	dialog .dialogContent > button img{
		height : 28px;
	}
	dialog picture img{
		height : 606px;
	}
	dialog :where( .prev , .next ){
		top : 270px;
	}
	dialog :where( .prev , .next ) img{
		height : 20px;
	}
	dialog .pagination{
		bottom : 8px;
		grid-auto-rows : 4px;
	}
	dialog .titles h2{
		padding-block : calc( 29px - 2.6px );
		font-size : 26px;
	}
	dialog .titles ul{
		grid-auto-rows : 30px;
		font-size : 14px;
	}
	dialog .data{
		padding-block : calc( 17px - 4.5px );
		margin-top : calc( -42px - 12px );
	}
	dialog .data .client{
		margin-top : -8.5px;
		font-size : 18px;
	}
	dialog .data .info{
		margin-top : calc( 17px - 13px - 13px );
	}
	dialog .data .info span{
		font-size : 18px;
	}
	dialog .data .comment{
		font-size : 18px;
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news > a{
	display : block;
	width : fit-content;
	margin-inline : auto;
	text-align : center;
	-webkit-text-decoration : underline;
	text-decoration : underline;
	text-indent : .05em;
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	#news{
		padding-top : calc( ( 50 - 4 ) var( --remBase ) );
		padding-bottom : calc( 92 var( --remBase ) );
	}
	#news > ul > li + li{
		margin-top : calc( ( 209 - 13 - 4 ) var( --remBase ) );
	}
	#news > a{
		margin-top : calc( ( 113 - 13 ) var( --remBase ) );
		font-size : 3rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#news{
		padding-top : calc( ( 64 - 4 ) var( --remBase ) );
		padding-bottom : calc( 135 var( --remBase ) );
	}
	#news > ul > li + li{
		margin-top : calc( ( 189 - 11 - 4 ) var( --remBase ) );
	}
	#news > a{
		margin-top : calc( ( 189 - 11 ) var( --remBase ) );
		font-size : 2.2rem;
	}
}