@charset "utf-8";

/*----------------------------------------------------------------
 /category/ under
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
/* heading
-----------------------------------------------------*/
#content h3,
#content h4{
	line-height: 1.3;
}
/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
#contents h2{
	color: #FFF;
}

/*-----------------------------------------------------
 content:tracs
-----------------------------------------------------*/
#tracs{
	padding				: 50px 0 100px 0;
}

#content h3{
	text-align:center;
}
#content h3:first-child{
	margin: 0 0 15px 0;
}
@media screen and (min-width: 769px) {
  #contents h3 {
    margin:10px 0 20px 0;
  }
}

/* #content h4{
	text-align:center;
	color:#645d4b;
	font-weight: bold;
	font-size: 1.6rem;
	margin: 1em 0 0.5em 0;
} */

#content h4{
	font-size: 1.6rem;
	font-weight:bold;
	margin:50px 0 10px 0;
	padding:10px 0;
	border-top:#ff8800 3px solid;
	max-width:200px;
	color:#645d4b;
}
#content ol{
	margin-left: 25px;
}

/* copy
-----------------------------------------------------*/
#content .copy{
	text-align: center;
	font-weight: bold;
}
@media screen and (min-width: 769px) {
#content .copy{
	font-size: 1.6rem;
}
}

/* title
-----------------------------------------------------*/

#content .sub-title{
	text-align: center;
}
#content .sub-title span{
	padding:10px;
	background: #f5f1e4;
	font-weight:bold;
	color:#645d4b;
	font-size:120%;
}

/* note
-----------------------------------------------------*/

#content .note{
	position			: relative;
	padding				: 30px;
	background			: #f7f1e4;
	margin: 15px 0;
}
@media screen and (min-width: 769px) {
#content .note{
	margin: 25px 0;
	padding				: 30px;
}
}

/* curriculum
-----------------------------------------------------*/
#content .curriculum dl{
	display: flex;
	flex-direction: row;
}
#content .curriculum dl ul{
	list-style: none;
}
#content .curriculum dl ul li{
	margin: 0 2em 0 0;
}
#content .curriculum dl ul li::before{
	content: "●";
	color: var(--main-color);
	display: inline-block;
	margin: 0 0.25em 0 0;
}
@media screen and (min-width: 1050px) {
#content .curriculum dl ul{
	column-count: 2;
}
}

#content .photo-list{
	--item-count: 2;
	--item-gap: 30px;
	gap: var(--item-gap);
}
#content .photo-list .col{
	flex: 0 0 calc(calc(100% - calc(calc(var(--item-count) - 1) * var(--item-gap))) / var(--item-count));
}



/* row
---------------------------------*/

#content .opencall .row{
	gap: 30px;
	flex-direction: column-reverse;
}

@media screen and (min-width: 769px) {
#content .opencall .row{
	flex-direction: column-reverse;
}
}
@media screen and (min-width: 1050px) {
#content .opencall .row{
	gap: 30px;
	flex-direction: row;
}
#content .opencall .row>.col:nth-child(even){
	flex: 1 0 calc(100% - 580px);}
#content .opencall .row .col:nth-child(odd){
	flex: 0 0 550px;
}
}
	

#content .opencall .logo-list{
	display: flex;
	flex-direction: row;
	list-style: none;
}

/* text / image
---------------------------------*/
#content .opencall .image{
	margin: 0;
	text-align: center;
}


/* info
---------------------------------*/
#content .opencall .info{
	margin: 0 0 15px 0;
	list-style: none;
}
#content .opencall .info>li{ margin: 0 0 5px 0; }
#content .opencall .info li dt::before{
	content: "●";
	color: var(--main-color);
	display: inline-block;
	margin: 0 0.25em 0 0;
}


#content .opencall .info dl>dt{
	font-weight			: bold;
}
#content .opencall .info dl>dd{
	flex				: 0 1 auto;
}
@media screen and (max-width: 768px) {
}
@media screen and (min-width: 769px) {
#content .opencall .info{ margin: 0 0 30px 0; }
#content .opencall .info dl{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
}
#content .opencall .info dl>dt{
	flex				: 0 0 100px;
	border-radius		: 13px;
	padding				: 2px 0;
	font-size			: 1.4rem;
	position: relative;
	top					: 3px;
}
}


#content .link{
	text-align: center;
	margin: 50px 0 0 0;
}

#content .big-btn{
	max-width: 700px;
	display: flex;
	align-items: center; 
	justify-content: center;
	position: relative;
	margin: 0 auto;
}
#content .big-btn::after {
	content: '';
	display: inline-block;
	width: 25px;
	height: 5px;
	border-bottom: solid 1px #FFF;
	border-right: solid 1px #FFF;
	position: absolute;
	right: 1em;
	top: 47.5%;
	transform: skew(45deg);
}
#content .big-btn:hover::after {
	border-bottom: solid 1px var(--main-color);
	border-right: solid 1px var(--main-color);
}
@media screen and (min-width: 769px) {
#content .big-btn{
	height: 100px;
	font-size: 1.625em;
}
#content .big-btn::after {
	right: 2em;
}
}

#content .member-list{
	--item-count: 2;
	--item-gap: 15px;
	display: flex;
	flex-direction: row;
	gap: var(--item-gap);
	flex-wrap: wrap;
	list-style: none;
}
#content .member-list li{
	flex: 0 0 calc(calc(100% - calc(calc(var(--item-count) - 1) * var(--item-gap))) / var(--item-count));
}
#content .member-list li dl{
	height: 100%;
	background: #f5f1e4;
	padding: var(--item-gap);
}
#content .member-list li dl .name{
	font-weight: bold;
	font-size: 1.8rem;
	margin: 0.25em 0 0 0;
}
#content .member-list li dl .from{
	font-size: 1.2rem;
	line-height: 1.2;
	padding-left: 1.45em;
	text-indent: -0.60em;
}
#content .member-list li dl .from::before{
	content: "●";
	color: var(--main-color);
	display: inline-block;
	margin: 0 0.25em 0 0;
}
@media screen and (min-width: 769px) {
#content .member-list{
	--item-count: 3;
}
}
@media screen and (min-width: 1050px) {
#content .member-list{
	--item-count: 4;
}
}