@charset "UTF-8";
:root{
	--body : #222;
	--link : #222;
}
@media screen and (max-width: 768px){
	#main{
		padding-bottom : calc( 191 * 100vw / 375 );
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#main{
		padding-bottom : calc( 736 * 100vw / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	#main{
		padding-bottom : 736px;
	}
}
@media screen and (max-width: 768px){
	#toHome{
		margin-top : calc( 50 * 100vw / 375 );
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#toHome{
		padding-bottom : calc( 100 * 100vw / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	#toHome{
		margin-top : 100px;
	}
}
#new .subtitle01{
	color : #fff;
}
#new .list-studio{
	background-color : #fff;
	border : 1px solid #ddd;
	position : relative;
}
@media screen and (max-width: 768px){
	#new .wrap-inner{
		padding-top : calc( 40 * 100vw / 375 );
		padding-bottom : calc( 47 * 100vw / 375 );
		padding-left : calc( 10 * 100% / 375 );
		padding-right : calc( 10 * 100% / 375 );
	}
	#new .list-studio{
		margin-top : calc( -8 * 100vw / 375 );
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#new .wrap-inner{
		padding-top : calc( 12 * 100vw / 1300 );
		padding-bottom : calc( 47 * 100vw / 1300 );
	}
	#new .list-studio{
		margin-top : calc( ( -6 - 8 ) * 100vw / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	#new .wrap-inner{
		padding-top : 12px;
		padding-bottom : 47px;
	}
	#new .list-studio{
		margin-top : calc( -6px - 8px );
	}
}
#studio .wrap-inner > ul{
	background-color : #fff;
	border : 1px solid #ddd;
	position : relative;
}
#studio ul ul{
	border-top : 1px solid #ddd;
}
#studio .list-studio{
	border-bottom : 1px solid #ddd;
}
#studio h3 , #studio h4{
	display : flex;
	align-items : center;
	font-weight : 700;
	font-family : "Roboto", sans-serif;
	letter-spacing : .1em;
}
#studio h3 span , #studio h4 span{
	color : #c00;
}
@media screen and (max-width: 768px){
	#studio .wrap-inner{
		padding-left : calc( 10 * 100% / 375 );
		padding-right : calc( 10 * 100% / 375 );
	}
	#studio .wrap-inner > ul{
		margin-top : calc( -8 * 100vw / 375 );
	}
	#studio h3{
		height : calc( 60 * 100vw / 375 );
		font-size : calc( 18 * 100vw / 375 );
		padding-left : calc( 10 * 100vw / 375 );
		padding-right : calc( 10 * 100vw / 375 );
	}
	#studio h4{
		height : calc( 48 * 100vw / 375 );
		font-size : calc( 15 * 100vw / 375 );
		padding-left : calc( 10 * 100vw / 375 );
		padding-right : calc( 10 * 100vw / 375 );
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#studio .wrap-inner > ul{
		margin-top : calc( ( -6 - 8 ) * 100vw / 1300 );
	}
	#studio h3{
		height : calc( 120 * 100vw / 1300 );
		font-size : calc( 30 * 100vw / 1300 );
		padding-left : calc( 20 * 100vw / 1300 );
		padding-right : calc( 20 * 100vw / 1300 );
	}
	#studio h4{
		height : calc( 92 * 100vw / 1300 );
		font-size : calc( 24 * 100vw / 1300 );
		padding-left : calc( 20 * 100vw / 1300 );
		padding-right : calc( 20 * 100vw / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	#studio .wrap-inner > ul{
		margin-top : calc( -6px - 8px );
	}
	#studio h3{
		height : 120px;
		font-size : 30px;
		padding-left : 20px;
		padding-right : 20px;
	}
	#studio h4{
		height : 92px;
		font-size : 24px;
		padding-left : 20px;
		padding-right : 20px;
	}
}
/*--------------------------------------------
LIST STUDIO
---------------------------------------------*/
#studio .list-studio a{
	width : 100%;
	height : 100%;
	position : relative;
	display : flex;
	background-image : url("../images/ui/arrow/link_black.svg");
	background-repeat : no-repeat;
}
@media screen and (max-width: 768px){
	#studio .list-studio li + li {
		margin-top: calc( 20 * 100vw / 375 );
	}
	#studio .list-studio{
		justify-content : space-between;
	}
	#studio .list-studio a{
		background-size : auto calc( 19 * 100vw / 375 );
		background-position : right calc( 10 * 100vw / 375 ) top 50%;
	}
	#studio .list-studio li {
		width: 100%;
		height: calc( 100 * 100vw / 375 );
		box-shadow: 0 calc( 3 * 100vw / 375 ) calc( 6 * 100vw / 375 ) rgba(0,0,0,.16);
	}
	#studio .list-studio picture {
		width: calc( ( 98 * 100% / 306 ) - 2px );
		height: calc( 98 * 100vw / 375 );
	}
	#studio .list-studio li div {
		padding-left: calc( ( 10 * 100% / 306 ) - 2px );
		padding-right: calc( ( 30 * 100% / 306 ) - 2px );
	}
	#studio .list-studio p:not(.label) {
		font-size: calc( 12 * 100vw / 375 );
		line-height: 1.7;
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#studio .list-studio a{
		background-size : auto calc( 19 * 100vw / 1300 );
		background-position : right calc( 10 * 100vw / 1300 ) top 50%;
	}
	#studio .list-studio li{
		width : calc( ( 306 * 100% / 960 ) - 2px );
		height : calc( 100 * 100vw / 1300 );
		box-shadow : 0 calc( 3 * 100vw / 1300 ) calc( 6 * 100vw / 1300 ) rgba(0,0,0,.16);
	}
	#studio .list-studio picture {
		width: calc( ( 98 * 100% / 306 ) - 2px );
		height: calc( 98 * 100vw / 1300 );
	}
	#studio .list-studio li div {
		padding-left: calc( ( 10 * 100% / 306 ) - 2px );
		padding-right: calc( ( 30 * 100% / 306 ) - 2px );
	}
	#studio .list-studio p:not(.label) {
		font-size: calc( 24 * 100vw / 1300 );
		line-height: 1.7;
		white-space: nowrap;
		width: 200%;
		transform-origin: left top;
		transform: scale(.5);
		height: .5em;
	}
}
@media print,screen and (min-width: 1300px){
	#studio .list-studio a{
		background-size : auto 19px;
		background-position : right 10px top 50%;
	}
	#studio .list-studio li {
		width: 306px;
		height: 100px;
		box-shadow: 0 3px 6px rgba(0,0,0,.16);
	}
	#studio .list-studio picture {
		width: 98px;
		height: 98px;
	}
	#studio .list-studio li div {
		padding-left: 10px;
		padding-right: 30px;
	}
	#studio .list-studio p:not(.label) {
		font-size: 12px;
		line-height: 1.7;
		margin-top: calc( 19px - .35em );
	}
}
/*# sourceMappingURL=../maps/studios.css.map */