@charset "utf-8";

/*----------------------------------------------------------------
 /opencall/ under
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
#main .btn{
	display				: inline-block;
	margin				: 5px 0;
	background			: var(--main-color);
	border				: 1px solid transparent;
	padding				: 3px 20px;
	border-radius		: 25px;
	text-align			: center;
	text-decoration		: none;
	font-weight			: bold;
	color				: #FFF;
}
#main .btn:hover{
	background			: transparent;
	border				: 1px solid var(--main-color);
	color				: var(--main-color);
}
#main .btn.btn-big{
	display				: block;
	margin				: 0 auto;
	max-width			: 80%;
	padding				: 10px;
	border-radius		: 30px;
	font-size			: 1.6rem;
}
#main .btn>i{ margin: 0 5px 0 0; }
@media screen and (min-width: 768px) {
#main .btn{ padding: 5px 25px; }
#main .btn.btn-big{
	max-width			: 470px;
	padding				: 14px;
	font-size			: 1.8rem;
}
}

/*-----------------------------------------------------
 all
-----------------------------------------------------*/
#all{
	background			: #f9e937;
	transform			: translate3d(0,0,0);
}
#all .container{ padding: 30px 0; }
@media screen and (min-width: 768px) {
#all .container{ padding: 50px 0;}
}


/*-----------------------------------------------------
 call-list
-----------------------------------------------------*/
#all .call-list>ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
}
#all .call-list>ul>li{
	list-style			: none;
	word-break			: break-all;
}
@media screen and (max-width: 767px) {
#all .call-list{
	width				: 95vw;
	overflow-x			: auto;
	overflow-y			: hidden;
}
#all .call-list>ul{
	width				: 100%;
	overflow-scrolling			: touch;
	-webkit-overflow-scrolling	: touch;
}
#all .call-list>ul>li{
	flex				: 0 0 262px;
	margin				: 0 20px 0 0;
}
}
@media screen and (min-width: 768px) {
#all .call-list>ul{
	gap					: 2.7%;
	flex-wrap			: wrap;
}
#all .call-list>ul>li{
	flex				: 0 0 31.5%;
	padding				: 0 0 50px 0;
}
#all .call-list>ul>li:nth-child(3n){ margin: 0; }
}


#all .call-list .item{
	display				: block;
	text-decoration		: none;
	color				: inherit;
}
#all .call-list a.item:hover{ opacity: 0.7; }
#all .call-list .item img{ border-radius: 15px; }
#all .call-list .item figcaption{
	display				: block;
	margin				: 13px 0;
	font-size			: 1.2rem;
	line-height			: 1.5;
	font-weight			: bold;
	color				: var(--main-color);
}

@media screen and (min-width: 768px) {
#all .call-list .item figcaption{ font-size: 1.4rem; }
}


#all .call-list .item ul{
	position			: relative;
	line-height			: 1;
}
#all .call-list .item ul>li{ margin: 5px 0; }
#all .call-list .item ul>.position{
	line-height			: 1.3;
	font-weight			: bold;
	font-size			: 1.6rem;
}
#all .call-list .item ul>.deadline{
	font-weight			: bold;
	line-height			: 1.5;
}
#all .call-list .item ul>.deadline small{
	display				: inline-block;
	background			: #cccc99;
	padding				: 1px 14px;
	border-radius		: 15px;
	vertical-align		: 2px;
	margin				: 0 5px 0 0;
	font-size			: 1rem;
}
@media screen and (min-width: 768px) {
#all .call-list .item ul>.position{
	margin				: 0 0 5px 0;
	font-size			: 2rem;
}
#all .call-list .item ul>.deadline small{ font-size: 1.4rem; }
}

#all .call-list .item ul>.finish{
	font-weight			: bold;
	line-height			: 1.5;
	color				: #FF0000;
}



/*-----------------------------------------------------
 seed
-----------------------------------------------------*/
#seed{
	background			: #f9e937;
	transform			: translate3d(0,0,0);
}
#seed .container{ padding: 30px 0; }
@media screen and (min-width: 768px) {
#seed .container{ padding: 50px 0;}
}

#seed h2{
	margin				: 0 0 25px 0;
	color				: var(--main-color);
}
#seed h3{
	margin				: 0 0 25px 0;
	font-size			: 1.7rem;
	font-weight			: bold;
	color				: var(--main-color);
}
#seed a{ color: var(--main-color); }
#seed .main{ margin: 0 0 20px 0; }
#seed .copy{
	margin				: 0 0 10px 0;
	font-size			: 1.6rem;
	font-weight			: bold;
	line-height			: 1.5;
}
#seed .form{
	margin				: 30px 0;
	text-align			: center;
}
#seed .form_finished{
	margin				: 30px 0;
	text-align			: center;
	font-weight			: bold;
	color				:#FF0000;
}

@media screen and (min-width: 768px) {
#seed h2{ margin: 0 0 55px 0; }
#seed h3{ font-size: 2.2rem; }
#seed .main{ margin: 0 0 40px 0; }
#seed .copy{ font-size: 2rem; }
#seed .form{ margin: 60px 0; }
}


#seed .item{
	border-top			: 2px solid var(--main-color);
	padding				: 35px 0;
}
@media screen and (min-width: 768px) {
#seed .item + .item{ padding: 35px 0 70px 0; }
}

#seed .item h3{
	margin				: 0 0 35px 0;
	text-align			: center;
	font-weight			: bold;
	font-size			: 1.8rem;
	color				: var(--main-color);
}
#seed .item h4{
	margin				: 30px 0 10px 0;
	font-weight			: bold;
}
#seed .item .summary-list{ margin: 20px 0 0 0; }
#seed .item .summary-list>li>dl{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-wrap			: wrap;
	flex-direction		: column;
	margin				: 0 0 10px 0;
}
#seed .item .summary-list>li>dl>dt{ padding: 10px 0; }
#seed .item .summary-list>li>dl>dt>span{
	display				: block;
	width				: 120px;
	background			: #cccc99;
	text-align			: center;
	border-radius		: 15px;
	padding				: 5px;
	line-height			: 1;
	font-weight			: bold;
	font-size			: 1.4rem;
}

@media screen and (min-width: 768px) {
#seed .item .summary-list>li>dl{ flex-direction: row; }
#seed .item .summary-list>li>dl>dt{
	flex				: 0 0 140px;
	padding				: 0 20px 0 0;
}
#seed .item .summary-list>li>dl>dd{ flex: 0 0 calc(100% - 140px); }
}


.watage #seed .item:first-of-type{ margin: 50px 0 0 0; }

@media screen and (min-width: 768px) {
.watage #seed .item{ padding: 35px 0 70px 0; }
#seed .item .summary-list{ margin: 50px 0 0 0; }
}

.suzukiyukio #seed p{ margin: 1em 0; }

/*-----------------------------------------------------
 digest
-----------------------------------------------------*/
#digest{
	background			: #f6f6ee;
	transform			: translate3d(0,0,0);
	margin				: 0 0 -1px 0;
}
#digest .container{ padding: 30px 0; }
@media screen and (min-width: 768px) {
#digest .container{ padding: 50px 0;}
}

#digest h2{
	margin				: 0 0 25px 0;
	color				: var(--main-color);
}

@media screen and (min-width: 768px) {
#digest .responsive-embed{ margin: 50px 0; }
}

#digest .images{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-wrap			: wrap;
	flex-direction		: row;
	justify-content		: space-between;
}
#digest .images>li{ flex: 0 0 31.7%; }

.watage #digest .container.wide{ margin-bottom: -40px; }
@media screen and (min-width: 768px) {
.watage #digest .container.wide{ margin-bottom: -80px; }
}


/*-----------------------------------------------------
 profile
-----------------------------------------------------*/
#profile{
	background			: #f6f6ee;
	transform			: translate3d(0,0,0);
}
#profile .container{ padding: 30px 0; }
@media screen and (min-width: 768px) {
#profile .container{ padding: 50px 0 100px 0;}
}

#profile h2{
	margin				: 0 0 25px 0;
	color				: var(--main-color);
}

#profile .artist-data{ margin: 20px 0; }
#profile .artist-data dt{ font-weight: bold; }
@media screen and (min-width: 768px) {
#profile .artist-data{ margin: 40px 0 20px 0; }
}

#profile .links{
	width				: 235px;
	margin				: 0 auto;
}
#profile .links .btn{
	font-weight			: normal;
	display				: block;
}