@charset "UTF-8";
:root{
	--body : #000;
	--link : #000;
}
:root{
	--primaryColor : #317889;
	--secondaryColor : rgba(142,187,191.85);
}
/*--------------------------------------------
COMMON
---------------------------------------------*/
.title01.title01-cube-primary:after{
	background-color : rgba(142,187,191.85);
	background-color : var(--secondaryColor);
}
.link-studios{
	display : flex;
}
.link-studios a{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	width : 100%;
	height : 100%;
	background-color : #fff;
	transition : background-color .5s ease-in;
	backface-visibility : hidden;
	will-change : background-color;
}
.link-studios a.is-current , .link-studios a:hover{
	background-color : #317889;
	background-color : var(--primaryColor);
}
@media screen and (max-width: 750px){
	.link-studios{
		justify-content : space-between;
		flex-wrap : wrap;
	}
	.link-studios > li:nth-child(n+3){
		margin-top : calc( 20 * 100vw / 750 );
	}
	.link-studios > li{
		width : calc( 336 * 100% / 700 );
		height : calc( 109 * 100vw / 750 );
	}
	.link-studios > li:nth-child(1) img{
		height : calc( 58 * 100vw / 750 );
	}
	.link-studios > li:nth-child(2) img{
		height : calc( 50 * 100vw / 750 );
		margin-top : calc( 12 * 100vw / 750 );
	}
	.link-studios > li:nth-child(3) img{
		height : calc( 84 * 100vw / 750 );
	}
	.link-studios > li:nth-child(4) img{
		height : calc( 41 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	.link-studios{
		justify-content : center;
	}
	.link-studios > li{
		width : 170px;
		height : 55px;
	}
	.link-studios > li + li{
		margin-left : 8px;
	}
	.link-studios > li:nth-child(1) img{
		height : 29px;
	}
	.link-studios > li:nth-child(2) img{
		height : 25px;
		margin-top : 10px;
	}
	.link-studios > li:nth-child(3) img{
		height : 42px;
	}
	.link-studios > li:nth-child(4) img{
		height : 21px;
	}
	.link-studios a:hover{
		opacity : .4;
	}
}
.title04{
	color : #317889;
	color : var(--primaryColor);
}
.title04 span{
	font-style : italic;
}	
.link02{
	background-color : #317889;
	background-color : var(--primaryColor);
}
.link03{
	display : block;
	margin-top : 30px;
	text-align : center;
}
/*--------------------------------------------
TITLE
---------------------------------------------*/
#title{
	border-top-style : solid;
	border-top-color : rgba(142,187,191.85);
	border-top-color : var(--secondaryColor);
	background-color : #d5dfe2;
}
#title p{
	letter-spacing : .08em;
}
@media screen and (max-width: 750px){
	#title{
		border-top-width : calc( 20 * 100vw / 750 );
	}
	#title .wrap{
		padding-top : calc( 36 * 100vw / 750 );
		padding-bottom : calc( 28 * 100vw / 750 );
		padding-left : calc( 25 * 100% / 750 );
		padding-right : calc( 25 * 100% / 750 );
	}
	#title p{
		font-size : 2.6rem;
		line-height : 1.54;
		margin-top : calc( ( 38 - 7 ) * 100vw / 750 );
		text-align : center;
	}
	#title ul{
		margin-top : calc( ( 46 - 7 ) * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	#title{
		border-top-width : 13px;
	}
	#title .wrap{
		padding-top : 22px;
		padding-bottom : 24px;
	}
	#title p{
		display : flex;
		flex-direction : column;
		align-items : center;
		font-size : calc( 1.2rem + .2rem );
		line-height : 1.5;
		margin-top : calc( 14px - 3px );
	}
	#title ul{
		margin-top : calc( 30px - 3px );
	}
}
/*--------------------------------------------
HEAD
---------------------------------------------*/
#head .title{
	border-bottom-color : rgba(142,187,191.85);
	border-bottom-color : var(--secondaryColor);
}
#head p{
	color : #317889;
	color : var(--primaryColor);
}
/*--------------------------------------------
ARTICLE
---------------------------------------------*/
#article .interviewer{
	background-color : rgba(213,223,226,.85);
}
#article .interviewer picture img{
	width : 100%;
	height : auto;
}
#article .interviewer h4{
	letter-spacing : .08em;
}
#article .interviewer p{
	font-family : "Ubuntu", sans-serif;
	font-weight : 300;
	letter-spacing : .08em;
}
#article .interviewer p em{
	font-style : italic;
}
#article .interviewer a{
	background-color: #317889;
    background-color: var(--primaryColor);
	color : #fff;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	position : relative;
	letter-spacing : .1em;
}
#article .interviewer a:after{
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform .5s ease-in;
    backface-visibility: hidden;
    will-change: transform;
    position: absolute;
}
@media screen and (max-width: 750px){
	#article .interviewer{
		margin-top : calc( ( 60 - 9.2 ) * 100vw / 750 );
		margin-bottom : calc( ( 60 - 7 ) * 100vw / 750 );
		padding-top : calc( 70 * 100vw / 750 );
		padding-bottom : calc( ( 110 - 13 ) * 100vw / 750 );
	}
	#article .interviewer picture{
		width : calc( 442 * 100% / 710 );
		margin-left : auto;
		margin-right : auto;
	}
	#article .interviewer h4{
		margin-top : calc( ( 68 - 11.25 ) * 100vw / 750 );
		text-align : center;
		font-size : 3rem;
		line-height : 1.75;
	}
	#article .interviewer h4 span{
		display : block;
		text-align : center;
		font-size : 2.6rem;
		letter-spacing : .08em;
		line-height : 1.75;
	}
	#article .interviewer p{
		padding-left : calc( 36 * 100% / 710 );
		padding-right : calc( 36 * 100% / 710 );
		margin-top : calc( ( 70 - 9.75 - 13 ) * 100vw / 750 );
		font-size : 2.6rem;
		line-height : 2;
	}
	#article .interviewer.multiple > div + div{
		margin-top : calc( 70 * 100vw / 750 );
	}
	#article .interviewer a {
	    margin-top: calc( 50* 100vw / 750 );
	    margin-left: auto;
	    margin-right: auto;
	    width: calc( 322 * 100% / 638 );
	    height: calc( 50 * 100vw / 750 );
	    font-size: 2.4rem;
	}
	#article .interviewer a:after {
	    background-image: url(../images/ui/icon/arrow02_white_sp.svg);
	    width: calc( 22 * 100vw / 750 );
	    height: calc( 26 * 100vw / 750 );
	    top: calc( 12 * 100vw / 750 );
	    right: calc( 28 * 100vw / 750 );
	}	
}
@media print,screen and (min-width: 751px){
	#article .interviewer{
		margin-top : calc( 30px - 4px );
		margin-bottom : calc( 30px - 5px );
		display : flex;
		padding-top : 20px;
		padding-bottom : 20px;
		padding-left : 40px;
		padding-right : 40px;
	}
	#article .interviewer picture{
		width : 144px;
		flex-shrink : 0;
		margin-right : 34px;
	}
	#article .interviewer h4{
		font-size : 1.5rem;
		line-height : 1.75;
		margin-top : calc( 8px - 5.625px );
	}
	#article .interviewer p{
		margin-top : calc( 30px - 5.625px - 2px );
		font-size : 1.3rem;
		line-height : 1.31;
	}
	#article .interviewer.multiple{
		flex-wrap : wrap;
	}
	#article .interviewer.multiple > div{
		display : flex;
	}
	#article .interviewer.multiple > div + div{
		margin-top : 20px;
	}
	#article .interviewer.multiple p{
		width : 642px;
	}	
	#article .interviewer a{
	    margin-top: calc( 14px - 2.29px );
	    margin-left: auto;
	    width: 160px;
	    height: 25px;
	    font-size: 1.2rem;
	}
	#article .interviewer a:after{
	    background-image: url(../images/ui/icon/arrow02_white_pc.svg);
	    width: 11px;
	    height: 13px;
	    top: 6px;
	    right: 14px;
	}
}
/*--------------------------------------------
SECTION
---------------------------------------------*/
@media screen and (max-width: 750px){
	.section + .section{
		border-top-color : #317889;
		border-top-color : var(--primaryColor);
	}
	.section p sup{
    	font-size: 2.2rem;
   	}
	.section .annotation {
		font-size: 2.4rem;
	}
}
@media print,screen and (min-width: 751px){
	.section + .section{
		border-top-color : #000;
	}
	.section p sup{
		font-size: 1.1rem;
	}
	.section .annotation {
		font-size: 1.2rem;
	}
}
/*--------------------------------------------
PAGINATION
---------------------------------------------*/
#pagination{
	border-top-color : rgba(142,187,191.85);
	border-top-color : var(--secondaryColor);
}
#pagination button{
	background-color : rgba(35,24,21,.1);
}
#pagination button:hover , #pagination button.is-current{
	background-color : rgba(35,24,21,.3);
}
/*--------------------------------------------
LINK02
---------------------------------------------*/
#link02{
	background-color : rgba(213,223,226,.85);
}
@media screen and (max-width: 750px){
	#link02{
		margin-top : calc( 94 * 100vw / 750 );
	}
	#link02 .wrap{
		padding-top : calc( 40 * 100vw / 750 );
		padding-bottom : calc( 40 * 100vw / 750 );
		padding-left : calc( 25 * 100% / 750 );
		padding-right : calc( 25 * 100% / 750 );
	}
}
@media print,screen and (min-width: 751px){
	#link02{
		margin-top : 48px;
		padding-top : 24px;
		padding-bottom : 24px;
	}
}