@charset "utf-8";

/* 共通
====================================================*/
#contents {
	font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	font-size: 14px;
	line-height: 1.4;
	color: #000;
	text-align: center;
	padding-top: 0;
	padding-bottom: 0;
	/*background-color: #303030;*/
	background: linear-gradient(to bottom, #a00000, #300000);
	position: relative;
}
#contents .inner {
	width: 100%;
	max-width: 980px;
	/* background-color: #303030; */
}

.container-wrap {
	min-width: auto;
}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}


/* MV
====================================================*/
/* 背景
==========================*/
.main-top {
	background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/pontanokoe/bg_pc.png) repeat-x;
}

/* MV画像
==========================*/
.oImg {
	vertical-align: bottom;
}

/* メインコンテンツ下部全体
====================================================*/
/* 共通
==========================*/
.main-bottom {
	margin: 70px auto 20px;
}

/*section
==========================*/
section {
	margin-bottom: 70px;
}

/*h2
==========================*/
h2 {
	margin-bottom: 25px;
}
h2 span {
	display: block;
	background-color: #cca015;
	color: #ffffff;
	font-size: 130%;
	padding: 5px 0;
	text-align: center;
	font-weight: normal;
	line-height: 200%;
}
body h2::after {
	content: '';
	width: 100%;
	height: 17px;
	display: block;
	background: transparent url(https://pntc.sslcs.cdngc.net/cdn/campaign/pontanokoe/arrow_03.png) no-repeat 50% -1px;
	background-size: auto 100%;
	margin-top: -1px;
}

/* 応募期間エリア(メインコンテンツ下部)
====================================================*/
/*日時エリア
==========================*/
.campaign-period {
	color: #151515;
	background: #ffffff;
	border:3px solid #cca015;
	border-radius: 10px;
	padding: 15px;
	font-size: 180%;
	display: block;
	vertical-align: middle;
	margin: 0 20px;
	letter-spacing: 2px;
}

/* 応募方法エリア(メインコンテンツ下部)
====================================================*/
/*ボックス
==========================*/
ul.col3,
ul.col4 {
	padding: 0 15px;
}
ul.col3 li,
ul.col4 li {
	float: left;
	width: 28%;
	position: relative;
	display: table;
	box-sizing: border-box;
}
ul.col4 li {
	width: 20%;
}
ul.col3 li div.flow,
ul.col4 li div.flow {
	color: #151515;
	background: #ffffff;
	border:3px solid #cca015;
	border-radius: 10px;
	padding: 15px;
	font-size: 1.56rem;
	display: table-cell;
	vertical-align: middle;
	height: 180px;
}
ul.col3 li div.flow img,
ul.col4 li div.flow img {
	/*margin-bottom: 15px;*/
	max-width: 75px;
	max-height: 75px;
}
ul.col3 li div.flow img.large,
ul.col4 li div.flow img.large {
	/* margin: 15px 0 0; */
	max-width: 120px;
	max-height: 100px;
}
ul.col3 li.arrow,
ul.col4 li.arrow {
	float: left;
	width: 8%;
	height: 200px;
	position: relative;
}
ul.col4 li.arrow {
	width: 6.666%;
}
ul.col3 li.arrow::before,
ul.col4 li.arrow::before {
	content: "";
	position: absolute;
	display: block;
	height: 100%;
	width: 100%;
	background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/pontanokoe/arrow_03.png) no-repeat center center;
	background-size: 50% auto;
	transform: rotate(270deg);
}

/*ボックス内テキスト
==========================*/
div.flow div {
	margin-bottom: 10px;
}
div.flow div:last-child{
	margin-bottom: 0;
}

/*Twitter用ボタン
==========================*/
.twitter_button {
	background-color: #1da1f2;
	padding: 5px 10px;
	font-size: 90%;
	color: #ffffff;
	display: inline-block;
	white-space: nowrap;
	border-radius: 5px;
}
.twitter_button,
a img {
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-ms-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}
.twitter_button:hover,
a:hover img {
	opacity: 0.5;
}

/*ボックス直下テキスト
==========================*/
.w-text {
	color: #ffffff;
	margin: 25px 20px 0 20px;
}
.w-text p {
	margin-bottom: 7px;
	line-height: 140%;
}

/* 応募規約エリア(メインコンテンツ下部)
====================================================*/
/*テキストボックス
==========================*/
pre {
	color: #151515;
	border:3px solid #cca015;
	border-radius: 10px;
	text-align: left;
	white-space: pre-wrap;
	font-family: inherit;
	font-size: 90%;
	overflow-y: scroll;
	line-height: 183%;
	height: 25em;
	background-color: #ffffff;
	padding: 10px;
	margin: 0 auto;
	width: 90%;
}

/* ==================================================
レスポンシブ対応
====================================================*/

/* 共通
====================================================*/
/*表示制御
==========================*/
.display-sp {
width: 100%;
	display: none;
}
.display-pc {
width: 100%;
	display: block;
}

@media screen and (max-width: 980px) {

/* 応募方法エリア(メインコンテンツ下部)
====================================================*/
	ul.col3 li div.flow,
	ul.col4 li div.flow {
		font-size: 1.5rem;
		padding: 15px 10px;
	}

/*Twitter用ボタン
==========================*/
	.twitter_button {
		font-size: 80%;
	}
}

@media screen and (max-width: 880px) {

/* 応募方法エリア(メインコンテンツ下部)
====================================================*/
	ul.col3 li div.flow,
	ul.col4 li div.flow {
		font-size: 1.4rem;
		padding: 15px 5px;
	}

/*Twitter用ボタン
==========================*/
	.twitter_button {
		font-size: 70%;
	}
}

@media screen and (max-width: 767px) {
/* 共通
====================================================*/
/*表示制御
==========================*/
	.display-pc {
		display: none;
	}
	.display-sp {
		display: block;
	}

/* メインコンテンツ下部共通
====================================================*/
/*h2
==========================*/
	h2 {
		margin-bottom: 8px;
	}
	h2 span {
		font-size: 80%;
		line-height: 200%;
		padding: 2px 0;
	}

	.main-bottom {
		margin: 20px auto 40px;
	}

	section {
		margin-bottom: 22px;
	}

/* 応募期間エリア(メインコンテンツ下部)
====================================================*/
/*日付
==========================*/
.campaign-period {
	font-size: 140%;
	letter-spacing: 0.2px;
}

/* 応募方法エリア(メインコンテンツ下部)
====================================================*/
/*ボックス
==========================*/
	ul.col3 li,
	ul.col4 li {
		float: none;
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
	}
	ul.col3 li div.flow,
	ul.col4 li div.flow {
		font-size: 1.7rem;
		padding: 15px;
	}
	ul.col3 li.arrow,
	ul.col4 li.arrow {
		float: none;
		width: 100%;
		max-width: 300px;
		height: 45px;
		margin: 0 auto;
	}
	ul.col3 li.arrow::before,
	ul.col4 li.arrow::before {
		background-size: auto 40%;
		transform: rotate(0deg);
	}

/*Twitter用ボタン
==========================*/
	.twitter_button {
		font-size: 100%;
	}

/* 応募規約エリア(メインコンテンツ下部)
====================================================*/
	pre {
	width: 80%;
	}

}

@media screen and (max-width: 520px) {
	.campaign-period {
		font-size: 4vw;
		margin: 10px;
	}

}