@charset "UTF-8";
:root{
	--body : #000;
	--link : #000;
}
:root{
	--primaryColor : #a2921e;
	--secondaryColor : #cdb717;
}

/*--------------------------------------------
PRIMARY COLOR
---------------------------------------------*/
.title01.title01-cube-primary:after{
	background-color : #cdb717;
	background-color : var(--secondaryColor);
}
.title02{
	color : #a2921e;
	color : var(--primaryColor);
}
.title02.title02-border-top{
	border-top-color : #a2921e;
	border-top-color : var(--primaryColor);
}
.title02:after{
	background-color : #a2921e;
	background-color : var(--primaryColor);
}
.bg-primary{
	background-color : #a2921e;
	background-color : var(--primaryColor);
}
.bg-secondary{
	background-color : #cdb717;
	background-color : var(--secondaryColor);
}

/*--------------------------------------------
TITLE
---------------------------------------------*/
#title{
	border-top-color : #cdb717;
	border-top-color : var(--secondaryColor);
	border-top-style : solid;
	background-color : rgba(205,183,23,0.3);
}
@media screen and (max-width: 750px){
	#title{
		border-top-width : calc( 20 * 100vw / 750 );
	}
	#title .wrap{
		padding-top : calc( 32 * 100vw / 750 );
		padding-bottom : calc( ( 42 - 6.4 ) * 100vw / 750 );
	}
	#title .lede01{
		margin-top : calc( ( 22 - 6.4 ) * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	#title{
		border-top-width : 12px;
	}
	#title .wrap{
		padding-top : 22px;
		padding-bottom : calc( 10px - 4px );
	}
	#title .lede01{
		margin-top : calc( 13px - 4px );
	}
}

/*--------------------------------------------
COMMON
---------------------------------------------*/
.nav-creators_qa {
	display : flex;
	flex-wrap : wrap;
}
.nav-creators_qa a {
	font-weight : 500;
	width : 100%;
	height : 100%;
	color : #fff;
	letter-spacing : .07em;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	border-style : solid;
	border-color : currentColor;
	backface-visibility : hidden;
	will-change : color , background-color;
	transition : color .5s ease-in , background-color .5s ease-in;
}
.nav-creators_qa a.is-current,
.nav-creators_qa a:hover {
	background-color : #fff;
	color : #cdb717;
	color : var(--secondaryColor);
}
@media screen and (max-width: 750px) {
	.nav-creators_qa {
		flex-direction : column;
	}
	.nav-creators_qa li {
		width : calc( 336 * 100% / 698 );
		height : calc( 48 * 100vw / 750 );
	}
	.nav-creators_qa li:not(:nth-child(3n+1)) {
		margin-top : calc( 24 * 100vw / 750 );
	}
	.nav-creators_qa li:nth-child(n+4) {
		margin-left : calc( 26 * 100% / 698 );
	}
	.nav-creators_qa a {
		font-size : calc( 2.24rem + .4rem );
		border-width : calc( 2 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	.nav-creators_qa li {
		width : 230px;
		height : 36px;
	}
	.nav-creators_qa li:not(:nth-child(3n+1)) {
		margin-left : 10px;
	}
	.nav-creators_qa li:nth-child(n+4) {
		margin-top : 10px;
	}
	.nav-creators_qa a {
		font-size : calc( 1.6rem + .2rem );
		border-width : 1px;
	}
	.nav-creators_qa a:before {
		width : 11px;
		height : 11px;
		margin-right : 8px;
	}
	.nav-creators_qa a:after {
		height : 1px;
		top : 22px;
	}
}

/*--------------------------------------------
INDEX
---------------------------------------------*/
@media screen and (max-width: 750px) {
	#links01 .wrap {
		padding-bottom : calc( 44 * 100vw / 750 );
		padding-left : 0;
		padding-right : 0;
	}
	#links01 ul {
		padding-top : calc( 36 * 100vw / 750 );
		height : calc( ( 36 + 48 * 3 + 24 * 2 ) * 100vw / 750 );
		padding-left : calc( 26 * 100% / 750 );
		padding-right : calc( 26 * 100% / 750 );
	}
}
@media print,screen and (min-width: 751px){
	#links01 .wrap{
		padding-top : 18px;
		padding-bottom : 22px;
		padding-left : 185px;
		padding-right : 185px;
	}
	#links01 ul{
		margin-top : 20px;
	}
}

/*--------------------------------------------
HEAD
---------------------------------------------*/
#head .wrap {
	letter-spacing: .08em;
}
#head time {
	color: #a2921e;
	color: var(--primaryColor);
	border-top-color: var(--secondaryColor);
	border-top-style: solid;
	display: block;
}
@media screen and (max-width: 750px){
	#head .wrap {
		padding-top: calc( 52 * 100vw / 750 );
	}
	#head h2 {
		font-size: 4rem;
		line-height: 1.5;
	}
	#head h3 {
		font-size: 3rem;
		line-height: 1.33;
		margin-top: 2rem;
	}
	#head time {
		border-top-width: calc( 3 * 100vw / 750 );
		font-size: 2.8rem;
		margin-top: calc( 28 * 100vw / 750 );
		padding-top: calc( 31 * 100vw / 750 );
	}	
}
@media print,screen and (min-width: 751px){
	#head .wrap {
		padding-top: 45px;
	}
	#head h2 {
		font-size: 2.4rem;
	}
	#head h3 {
		font-size: 1.8rem;
		margin-top: 12px;
	}
	#head time {
		border-top-width: 3px;
		font-size: 1.4rem;
		margin-top: 15px;
		padding-top: 18px;
	}
}
/*--------------------------------------------
Q&A
---------------------------------------------*/
#qa dl {
	border-bottom: 1px solid #000;
}
#qa dt {
	display: flex;
	justify-content: flex-start;
}
#qa dt:before {
	content: "";
	display: block;
	flex-shrink: 0;
	font-size: 0;
	line-height: 0;
}
#qa dt.q1:before {
	background: url(../images/creators-qa/ico_Q1.svg) 0 0 / contain no-repeat;
}
#qa dt.q2:before {
	background: url(../images/creators-qa/ico_Q2.svg) 0 0 / contain no-repeat;
}
#qa dt.q3:before {
	background: url(../images/creators-qa/ico_Q3.svg) 0 0 / contain no-repeat;
}
#qa dt.q4:before {
	background: url(../images/creators-qa/ico_Q4.svg) 0 0 / contain no-repeat;
}
#qa dt.q5:before {
	background: url(../images/creators-qa/ico_Q5.svg) 0 0 / contain no-repeat;
}
#qa dt.q6:before {
	background: url(../images/creators-qa/ico_Q6.svg) 0 0 / contain no-repeat;
}
#qa dt span {
	letter-spacing: 0.06em;
	line-height: 1.5;
}
#qa dd {
	position: relative;	
}
#qa .iframe-container > iframe {
	width : 100%;
	height : 100%;
	position : absolute;
	top : 0;
	left : 0;
	right : 0;
	bottom : 0;
	margin : auto;
}

@media screen and (max-width: 750px){
	#qa .wrap {
		margin-bottom: calc( 140 * 100vw / 750 );
	}
	#qa dl {
		margin-top: calc( 90 * 100vw / 750 );
		padding-bottom:  calc( 64 * 100vw / 750 );
	}
	#qa dt {
		min-height: calc( 100 * 100vw / 750 );
	}
	#qa dt:nth-child(even) {
		margin-top: calc( 80 * 100vw / 750 );;
	}
	#qa dt:before {
		height: calc( 100 * 100vw / 750 );
		margin-right: calc( 38 * 100vw / 750 );
		width: calc( 120 * 100vw / 750 );
	}
	#qa dt span {
		font-size: 3rem;
	}
	#qa dd {
		margin-top: calc( 74 * 100vw / 750 );
		height : calc( 400 * 100vw / 750 );
	}	
}
@media print,screen and (min-width: 751px){
	#qa .wrap {
		margin-bottom: 90px;
	}
	#qa dl {
		margin-top: 48px;
		padding-bottom: 30px;
	}
	#qa dt {
		align-items: center;
		min-height: 56px;
		padding: 0 10px;
	}
	#qa dt:nth-child(even) {
		margin-top: 25px;
	}
	#qa dt:before {
		height: 56px;
		margin-right: 23px;
		width: 68px;
	}
	#qa dt span {
		font-size: 1.8rem;
		font-weight: 400;
	}
	#qa dd {
		height: 378px;
		margin: 28px auto 0;
		width: 675px;
	}
}

/*--------------------------------------------
LINKS02
---------------------------------------------*/
@media screen and (max-width: 750px){
	#links02{
		margin-top : calc( 4 * 100vw / 750 );
	}
	#links02 .wrap{
		padding-top : calc( 40 * 100vw / 750 );
		padding-bottom : calc( 44 * 100vw / 750 );
		padding-left : calc( 26 * 100% / 750 );
		padding-right : calc( 26 * 100% / 750 );
	}
	#links02 ul{
		height : calc( ( 48 * 3 + 24 * 2 ) * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	#links02{
		margin-top : 38px;
	}
	#links02 .wrap{
		padding-left : 185px;
		padding-right : 185px;
		padding-top : 18px;
		padding-bottom : 18px;
	}
}