@charset "UTF-8";

/* ***************************************************************

	USJ ハロウィーン貸切キャンペーン2019キャンペーン用　CSS
	/card/campaign/usj_halloween2019/

*************************************************************** */



/* ***************************************************************

	見出し帯の色

*************************************************************** */
.cp-color {
	color: #fff;
	background-color:#304794;
	border-bottom: 3px solid #fff10C;
}



/* ***************************************************************

	キャンペーン内容

*************************************************************** */
#campaign .courselist {
	padding: 25px 25px 30px;
	border: solid 4px #000000;
}


#campaign .courselist h3 {
	padding: 10px 10px;
	background-color: #ffa60c;
}
#campaign .courselist .text-right {
	display: inline-block;
	vertical-align: top;
	/*width: 600px;*/
	width: calc(100% - 200px);
	margin-left: 21px;
}
#campaign .courselist .col2 {
	display: flex;
}
#campaign .courselist .col2 .logo{
	width: 115px;
	margin: 15px 0 0 10px;
	display: block;
}
#campaign .code {
	border-radius: 5px;
}
#campaign .corse01 .code {
	color: #E54671;
	border: 4px solid #E54671;
}
#campaign .corse02 .code {
	color: #4FA536;
	border: 4px solid #4FA536;
}
#campaign .corse03 .code {
	color: #109CDA;
	border: 4px solid #109CDA;
}
#campaign .corse01 h4 { color: #E54671; }
#campaign .corse02 h4 { color: #4FA536; }
#campaign .corse03 h4 { color: #109CDA; }


#campaign .schedule {
	border: 1px solid #f2e09e;
	background: #fffad5;
	padding: 15px 0 10px;
}

span.supText {
	font-size: 75.5%;
	vertical-align: top;
	position: relative;
	top: -0.1em;
}





/*	for SP
=============================================================== */
@media screen and (max-width: 640px){
	.sp_txtC { text-align: center !important; }
	.sp_txtL { text-align: left !important; }
	#campaign .cp-category .txt-area {
		margin: 6% 3% 0px;
	}
	#campaign .courselist {
		padding: 6%;
	}
	#campaign .courselist h4 {
		margin-bottom: 5px;
	}
	#campaign .courselist .text-right {
		display: inline-block;
		vertical-align: top;
		width: 100%;
		margin-left: 0;
	}
	#campaign .courselist .col2 {
		display: block;
	}
	#campaign .courselist .col2 .logo{
		margin: 15px auto 0;
	}
	#campaign .code {
		width: 100%;
		margin-bottom: 15px;
	}
	#campaign .schedule {
		padding: 15px 8px 12px;
	}
}



/* ***************************************************************

	スマホランドスケープ対応

*************************************************************** */

@media screen and (max-width: 949px) and (min-width: 641px){
	#main .content {
		width: 100%;
	}
	#campaign .detail-text {
		width: calc(100% - 205px);
		/*width: 65%;*/
		margin-left: 3%;
	}
	#campaign .details_entry_right { margin-top: 10px; }
}



/* ***************************************************************

	iPad対応

*************************************************************** */

@media only screen and (min-width: 641px) and (max-width: 900px){
	#main {
		width: 100%;
	}

	#main .content {
		width: 98%;
	}

	#globalHeader {
		overflow: hidden;
		padding: 25px 2% 20px !important;
		position: relative;
	}
}