@charset 'UTF-8';

/** |READ ME| **************************************************************************************

css/index_sp.css
Ver.202004

----------------------------------------------------------------------------------------------------

01. HTML初期化
02. ヘッダー
03. コンテンツ
04. フッター

************************************************************************************** |READ ME| **/

/*グランプリのスケジュール*/
.g1{display: none;}
.sc_box{
    background-color: #fff;
    width: 100%;
    margin: auto;
    
}

.sc_box h3{
    text-align: center;
    padding: 20px 0 30px 0;
    margin-top: 40px;
    color: #9e0a6b;
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.67;
    margin: 0 auto;
}


.ac_box{
    display: none;
    padding: 0 0 20px 0;
    
}

.sc{
    background-color: #D8C5DB;
    color: #330033;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    padding: 5% 0;
}
.sc::after{
    content: "";
    width: 10px;
    height: 10px;
    border-top: solid 2px #330033;
    border-right: solid 2px #330033;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    position: absolute;
    right: 4%;
    transition-duration: .3s;
}

.on::after{
    transform: rotate(-45deg);
    transition-duration: .3s;
}
.sc:hover{
    cursor: pointer;
    opacity: 0.5;
}

.sc_box p{
    border-width: 1px;
    border-style: solid;
    border-color: #555;
    padding: 20px;
    text-align: center;
    margin: 0 auto 20px auto;
    line-height: 1.4;
}
.sp_g1 th{
    color: #fff;
    padding: 10px 0;
    margin: 4px;
    font-size: 3vw;
}
.sp_g1 td{
    vertical-align: baseline;
    height: auto;
    max-height: 71px;
    margin: 4px;
}
.sp_g1 {
    width: 100%;
    margin: auto;
    border-collapse:separate;
}

.th_1{background: linear-gradient(to bottom, #77548A,#7E5A8B);}
.th_2{background: linear-gradient(to bottom, #805C8B,#87638D);}
.th_3{background: linear-gradient(to bottom, #88658D,#AD5A92);}
.th_4{background: linear-gradient(to bottom, #AD5990,#AD5991);}
.th_5{background-color: #aaaaaa;}
.th_6{background-color: #aaaaaa;}

.movie_back {
    text-align: center;
    background: #000;
    margin: 0px;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.movie_back iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.form_link{
    background: #000;
    text-align: center;
    padding: 20px 0;
    
}

.form_link a{
    color: #fff;
    text-decoration: none !important;
}

/** |01. HTML初期化| >> *************************************************************** >> START **/


* {font-size: inherit;}

hr {display: none;}

body, header, main, footer, section, article, aside, menu, nav,
address, div, h1, h2, h3, h4, h5, h6, p, hr,
ul, ol, li, dl, dt, dd, table, th, td, figure, figcaption {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 1;
	margin: 0;
	padding: 0;
}

header, main, footer, section, article, aside, nav, figure {display: block;}

html {font-size: 62.5%;/* 10px = 1rem */}

@media screen and (max-width: 414px) {
	html {font-size: 40%;}
}

@media screen and (max-width: 375px) {
	html {font-size: 36%;}
}

body {/* 640px = 100% */
	background-color: #fff;
	color: #333;
	font-family: Hiragino Sans, 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', Roboto, 'Droid Sans', YuGothic, '游ゴシック', Meiryo, 'メイリオ', Osaka, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
	-moz-font-feature-settings: 'pkna' 1;
	-webkit-font-feature-settings: 'pkna' 1;
	font-feature-settings: 'pkna' 1;
	font-size: 2.8rem;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
}

.serif {font-family: 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', YuMincho, '游明朝', 'MS PMincho', 'HGS明朝E', 'ＭＳ Ｐ明朝', serif;}

table {border-collapse: collapse;}

table, th, td, img, iframe {border: none;}

address {font-style: normal;}

li {list-style: none;}

img {
	height: auto;
	vertical-align: top;
	width: 100%;
}

.clearfix {zoom: 1;}

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


/** |01. HTML初期化| << ***************************************************************** << END **/





/** |02. ヘッダー| >> ***************************************************************** >> START **/


.site {
	background: #3b0458;
	background: linear-gradient(to right, #3b0458 0%, #5c2460 48%, #9d0b6a 100%);
}


	/** [コピー＆メニュー] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.site .frame {
		background: url(../img/sp/st_bg_pattern.png) repeat 0 0;
		background-size: 2.19% auto;/* 14px auto */
		padding: 3.75% 0;/* 24px 0 */
		position: relative;
	}

		.site .frame .trademark {
			box-shadow: 0 6px 10px 3px rgba(0, 0, 0, 0.3);
			height: 0;
			left: 0;
			margin: 2.13% 0 0 1.25%;/* 20px 0 0 8px */
			position: absolute;
			top: 0;
			width: 16.25%;/* 104px */
		}

		.site .frame .copy {
			margin: 0 auto;
			width: 60.31%;/* 386px */
		}

.site .frame .copy2 {
			margin: 0 auto;
			width: 60.31%;/* 386px */
		}

		.site .frame .open {
			bottom: 0;
			height: 0;
			margin: auto 0;
			padding-top: 10.94%;/* 70px */
			position: absolute;
			right: 0;
			top: 0;
			width: 10.94%;/* 70px */
		}

			.site .frame .open img {
				bottom: 0;
				cursor: pointer;
				left: 0;
				margin: auto;
				position: absolute;
				right: 0;
				top: 0;
				width: 31.43%;/* 22px */
			}


	/** [メニュー] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.site .menu {
		background-color: #fff;
		bottom: 0;
		left: 0;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 15.63%;/* 100px */
		position: fixed;
		right: 0;
		top: 0;
		z-index: 9000;
	}

		.site .menu .control {
			height: 0;
			padding-top: 15.94%;/* 102px */
			position: relative;
			width: 100%;/* 640px */
		}

			.site .menu .control .close {
				bottom: 0;
				height: 0;
				margin: auto 0;
				padding-top: 10.94%;/* 70px */
				position: absolute;
				right: 0;
				top: 0;
				width: 10.94%;/* 70px */
			}

				.site .menu .control .close img {
					bottom: 0;
					cursor: pointer;
					left: 0;
					margin: auto;
					position: absolute;
					right: 0;
					top: 0;
					width: 31.43%;/* 22px */
				}

		.site .menu .index {padding-bottom: 12.5%;/* 80px */}

			.site .menu .index li {
				height: 0;
				margin-top: 12.5%;/* 80px */
				padding-top: 5.94%;/* 38px */
				position: relative;
			}

			.site .menu .index .ind01 {
				margin-top: 0;
				padding-top: 13.75%;/* 88px */
			}

				.site .menu .index a {
					display: block;
					height: 100%;
					left: 0;
					position: absolute;
					top: 0;
					width: 100%;
					text-align: center;
				}

					.site .menu .index img {
						height: 100%;/* 38px */
						width: auto;
					}


	/** [メインビジュアル] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.site .bx-wrapper {
		border: none;
		box-shadow: none;
		margin-bottom: 0;
	}

		.site .bx-wrapper .bx-controls {}

			.site .bx-wrapper .bx-controls.bx-controls-direction {}

				.site .bx-wrapper .bx-controls .bx-controls-direction a {z-index: 8999;}

			.site .bx-wrapper .bx-pager {
				bottom: 16px;
				font-size: 0;
				padding: 0;
			}

			.site .bx-wrapper .bx-controls .bx-pager .bx-pager-item {}

				.site .bx-wrapper .bx-controls .bx-pager .bx-pager-item a {
					background-color: #bfbfbf;
					margin: 0 10px;
				}

				.site .bx-wrapper .bx-controls .bx-pager .bx-pager-item .active {
					background-color: #a60c6e;
					position: relative;
				}

					.site .bx-wrapper .bx-controls .bx-pager .bx-pager-item .active::after {
						background-color: #a60c6e;
						border-radius: 50%;
						content: '';
						height: 24px;
						left: -7px;
						opacity: 0.3;
						position: absolute;
						top: -7px;
						width: 24px;
					}


/** |02. ヘッダー| << ******************************************************************* << END **/





/** |03. コンテンツ| >> *************************************************************** >> START **/


.contents {padding-bottom: 15%;/* 96px */}


	/** [概要] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .outline {padding-bottom: 5.31%;/* 34px */}

		.contents .outline .title {
			background-color: #040404;
			padding: 10.31% 0;/* 66px 0 */
			text-align: center;
		}

			.contents .outline .title img {width: 50.94%;/* 326px */}

		.contents .outline .information {
			margin: 5.31% auto 0;/* 34px auto 0 */
			padding: 9.06% 0;/* 58px 0 */
			position: relative;
			text-align: center;
			width: 93.75%;/* 600px */
			z-index: 1;
		}

			.contents .outline .information::before {
				background-color: #fff;
				bottom: 6px;
				content: '';
				display: block;
				left: 6px;
				position: absolute;
				right: 6px;
				top: 6px;
				z-index: -1;
			}

			.contents .outline .information::after {
				background: rgb(180,129,50);
				background: linear-gradient(to top,  rgb(180,129,50) 0%,rgb(180,129,32) 23%,rgb(248,251,192) 61%,rgb(180,129,46) 100%);
				bottom: 0;
				content: '';
				display: block;
				height: 100%;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
				width: 100%;
				z-index: -2;
			}

			.contents .outline .information dt {
				color: #9e0a6b;
				font-size: 4rem;
				letter-spacing: 0.05em;
                padding: 0 6px;
			}

			.contents .outline .information dd {
                text-align: left;
}

				.contents .outline .information p {
					font-size: 2.8rem;
					line-height: 1.39;
					margin: 5% auto 0;/* 30px auto 0 */
					width: 91.67%;/* 550px */
                    padding: 0 6px;
				}

				.contents .outline .information span {font-size: 3.6rem;}

				.contents .outline .information .nobr {display: none;}


	/** [グランプリの流れ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .flow {
		background-color: #eee;
		padding: 20.31% 0 13.75%;/* 130px 0 88px */
		position: relative;
		z-index: 1;
	}
/*
		.contents .flow::before {
			background: url(../img/sp/flw_bg_later.png) repeat 0 0;
			bottom: 0;
			content: '';
			display: block;
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 3;
		}
*/
		.contents .flow .label {
			margin: 0 auto;
			position: relative;
			width: 55%;/* 352px */
			z-index: 10;
		}

		.contents .flow .chart {
			margin: 0 auto;
			padding-top: 8.13%;/* 52px */
			width: 93.75%;/* 600px */
			z-index: 2;
		}

			.contents .flow .chart li {
				padding-top: 10%;/* 60px */
				text-align: center;
			}

			.contents .flow .chart li:first-of-type {padding-top: 0;}

				.contents .flow .chart li::before {
					background: url(../img/sp/flw_ico_flow.gif) no-repeat 50% 50%;
					background-size: 100% auto;
					content: '';
					display: block;
					height: 0;
					margin: 0 auto;
					padding-top: 4.67%;/* 28px */
					width: 13.67%;/* 82px */
				}

				.contents .flow .chart li:first-of-type::before {content: none;}

					.contents .flow .chart li figure {padding-top: 11.67%;/* 70px */}

					.contents .flow .chart li:first-of-type figure {padding-top: 0;}

						.contents .flow .chart li img {width: 55%;/* 330px */}

						.contents .flow .chart li figcaption {
							font-size: 2.8rem;
							letter-spacing: 0.08em;
							padding-top: 4%;/* 24px */
						}

							.contents .flow .chart li figcaption span {font-size: 3.8rem;}

				.contents .flow .chart li p {
					font-size: 2.4rem;
					line-height: 1.5;
					padding-top: 2.33%;/* 14px */
				}

		.contents .flow .later {
			color: #9e0a6b;
			font-size: 3.6rem;
			font-weight: bold;
			line-height: 1.67;
			margin: 0 auto;
			padding-top: 9.38%;/* 60px */
			position: relative;
			text-align: center;
			width: 93.75%;/* 600px */
			z-index: 10;
		}


	/** [参加資格/審査部門] >> ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .category {
		background-color: #fff;
		padding-bottom: 15.63%;/* 100px */
		text-align: center;
	}

		.contents .category > .label {
			height: 0;
			margin: 15% auto 0;/* 96px */
			padding-top: 9.06%;/* 58px */
			position: relative;
		}

			.contents .category > .label img {
				bottom: 0;
				height: 100%;
				left: 0;
				margin: auto;
				position: absolute;
				right: 0;
				top: 0;
				width: auto;
			}


		/** [参加資格] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.contents .category .qualification {
			margin: 7.81% auto 0;/* 50px auto 0 */
			width: 93.75%;/* 600px */
		}

			.contents .category .qualification::after {
				background-color: #9e0a6b;
				content: '';
				display: block;
				height: 2px;
				margin: 15.33% auto 0;/* 92px auto 0 */
				width: 100%;/* 600px */
			}

			.contents .category .qualification dt {
				font-size: 3.2rem;
				font-weight: bold;
				letter-spacing: 0.03em;
				line-height: 1.56;
			}

			.contents .category .qualification dd {
				font-size: 2.4rem;
				letter-spacing: -0.03em;
				line-height: 1.75;
			}

			.contents .category .qualification dt + dd {padding-top: 0.5em;}

				.contents .category .qualification dd::before {
					content: '※';
					font-size: inherit;
				}


		/** [審査部門] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.contents .category .preface {
			margin: 6.88% auto 0;/* 44px auto 0 */
			width: 93.75%;/* 600px */
		}

			.contents .category .preface li {
				font-size: 2.6rem;
				letter-spacing: 0.05em;
				line-height: 1.38;
				padding-left: 0.9em;
				position: relative;
				text-align: left;
			}

			.contents .category .preface li:first-of-type {margin-top: 0;}

				.contents .category .preface li::before {
					background-color: #a60c6e;
					content: '';
					display: inline-block;
					height: 0.55em;
					width: 0.55em;
					position: absolute;
					top: 0.32em;
					left: 0;
				}


		/* 部門名 */
		.contents .category .class {padding-top: 14.06%;/* 90px */}


		/* 選考テーマ */
		.contents .category .theme {
			margin: 0 auto;
			padding-top: 8.44%;/* 54px */
			width: 93.75%;/* 600px */
		}

		.contents .category p.theme {
			color: #a60c6e;
			font-size: 4.44rem;
			font-weight: bold;
			line-height: 1.46;
		}

		.contents .category dl.theme {}

			.contents .category .theme dt {
				color: #a60c6e;
				font-size: 4.44rem;
				font-weight: bold;
				line-height: 1.46;
			}

			.contents .category .theme dd {
				line-height: 1.64;
				padding-top: 2.33%;/* 14px */
			}

			.contents .category .theme span {
				display: block;
				font-size: 3.8rem;
				font-weight: normal;
			}


		/* 審査内容 */

		.contents .category .judgment {padding-top: 4.38%;/* 28px */}

		.contents .category .judgment + .judgment {padding-top: 14.06%;/* 90px */}

			.contents .category .judgment .text {}

				.contents .category .judgment .text .label {
					background: #eee;
					background: linear-gradient(to bottom, #f7f7f7 0%, #eee 100%);
					padding: 8.44% 0;/* 54px 0 */
					position: relative;
					text-align: center;
					z-index: 1;
				}

					.contents .category .judgment .text .label .name {
						height: 0;
						margin: 0 auto;
						padding-top: 17.5%;/* 112px */
						position: relative;
						width: 93.75%;/* 600px */
					}

					.contents .category .judgment.mai .text .label .name {padding-top: 9.69%;/* 62px */}

						.contents .category .judgment .text .label .name img {
							height: 100%;
							left: 0;
							margin: 0 auto;
							position: absolute;
							right: 0;
							top: 0;
							width: auto;
						}

					.contents .category .judgment .text .label .caption {
						font-size: 2.6rem;
						letter-spacing: 0.05em;
						line-height: 1.69;
						margin: 0 auto;
						padding-top: 4.69%;/* 30px */
						width: 93.75%;/* 600px */
					}

					.contents .category .judgment .text .label::before {
						background: no-repeat 50% 50%;
						background-size: 100% auto;
						bottom: 0;
						content: '';
						display: block;
						height: 0;
						left: 50%;
						position: absolute;
						z-index: 3;
					}

					.contents .category .judgment.change .text .label::before {
						background-image: url(../img/sp/ctg_txt_class01.png);
						margin: 0 0 -18.44% -33.44%;/* 0 0 -118px -214px */
						padding-top: 23.13%;/* 148px */
						width: 31.88%;/* 204px */
					}

					.contents .category .judgment.model .text .label::before {
						background-image: url(../img/sp/ctg_txt_class02a.png);
						margin: 0 0 -14.06% 2.5%;/* 0 0 -90px 16px */
						padding-top: 21.56%;/* 138px */
						width: 30.63%;/* 196px */
					}

					.contents .category .judgment.art .text .label::before {
						background-image: url(../img/sp/ctg_txt_class02b.png);
						margin: 0 0 -14.06% 16.88%;/* 0 0 -90px 108px */
						padding-top: 18.44%;/* 118px */
						width: 16.25%;/* 104px */
					}

					.contents .category .judgment.mai .text .label::before {
						background-image: url(../img/sp/ctg_txt_class03.png);
						margin: 0 0 -80.94% -10%;/* 0 0 -518px -64px */
						padding-top: 28.44%;/* 182px */
						width: 41.88%;/* 268px */
					}


					.contents .category .judgment .text .label::after {
						background: no-repeat 50% 50%;
						background-size: 100% auto;
						content: '';
						display: block;
						height: 0;
						left: 0;
						margin: -1.56% auto 0;/* -10px auto 0 */
						padding-top: 73.13%;/* 468px */
						position: absolute;
						right: 0;
						top: 100%;
						width: 73.13%;/* 468px */
						z-index: 2;
					}

					.contents .category .judgment.change .text .label::after {background-image: url(../img/sp/ctg_img_class01.jpg);}
					.contents .category .judgment.model .text .label::after {background-image: url(../img/sp/ctg_img_class02a.jpg);}
					.contents .category .judgment.art .text .label::after {background-image: url(../img/sp/ctg_img_class02b.jpg);}
					.contents .category .judgment.mai .text .label::after {background-image: url(../img/sp/ctg_img_class03.jpg);}

				.contents .category .judgment .text .item {
					margin: 0 auto;
					padding-top: 77.5%;/* 468+68px */
					width: 89.69%;/* 574px */
				}

				.contents .category .judgment.mai .text .item {padding-top: 83.75%;/* 468+28px */}

					.contents .category .judgment .text .item dt {
						background-color: #a18700;
						color: #fff;
						font-size: 2.6rem;
						letter-spacing: 0.1em;
						padding: 1.74%;/* 10px */
					}

					.contents .category .judgment .text .item dd {
						border-bottom: 1px dashed #a18700;
						line-height: 1.6;
						margin-top: 1.04%;/* 6px */
						padding: 2.09% 0;/* 12px 0 */
						text-align: left;
					}

						.contents .category .judgment .text .item span {
							color: #a18700;
							font-size: 3.4rem;
							margin-right: 0.2em;
						}

					.contents .category .judgment .text .item dd:only-of-type {
						border-bottom: none;
						margin-top: 0;
						padding: 3.48% 0 0;/* 20px 0 0 */
					}

				.contents .category .judgment .text .note {
					font-size: 2rem;
					margin: 0 auto;
					padding-top: 3.83%;/* 22px */
					text-align: left;
					width: 89.69%;/* 574px */
				}

				.contents .category .judgment.mai .text .note {padding-top: 2.44%;/* 14px */}

			.contents .category .judgment .image {display: none;}


	/** [エントリー方法] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .entry {
		background-color: #eee;
		padding: 10.94% 0 11.88%;/* 70px 0 76px */
	}

		.contents .entry .label {
			margin: 0 auto;
			width: 58.44%;/* 374px */
		}

		.contents .entry .type {}

			.contents .entry .type li {
				padding-top: 6.88%;/* 44px */
				text-align: center;
			}

				.contents .entry .type dl {}

					.contents .entry .type dt {
						background-color: #a60c6e;
						color: #fff;
						font-size: 3.2rem;
						letter-spacing: 0.05em;
						padding: 3.44%;/* 22px */
					}

					.contents .entry .type dd {
						letter-spacing: 0.05em;
						line-height: 1.5;
						padding: 2.5% 2.5% 0;/* 16px 16px 0 */
					}


	/** [お問い合わせ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .inquiry {
		padding-top: 11.56%;/* 74px */
		text-align: center;
	}

		.contents .inquiry .label {
			margin: 0 auto;
			width: 55.94%;/* 358px */
		}

		.contents .inquiry .text {
			font-size: 3rem;
			letter-spacing: 0.1em;
			line-height: 1.73;
			margin-top: 7.81%;/* 50px */
			padding: 0 1em;/* 0 1em */
		}

		.contents .inquiry .number {
			margin: 0 auto;
			padding-top: 4.38%;/* 28px */
			width: 93.75%;/* 600px */
		}

			.contents .inquiry .number dt {
				font-size: 2.6rem;
				letter-spacing: 0.1em;
			}

			.contents .inquiry .number dd {padding-top: 3%;/* 18px */}

			.contents .inquiry .number .dial {
				margin: 0 auto;
				width: 76%;/* 456px */
			}

			.contents .inquiry .number .hour {
				font-size: 2.6rem;
				letter-spacing: 0.1em;
			}


	/** [前大会の様子] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

	.contents .last {
		margin: 0 auto;
		padding-top: 11.56%;/* 74px */
		width: 93.75%;/* 600px */
	}


/** |03. コンテンツ| << ***************************************************************** << END **/





/** |04. フッター| >> ***************************************************************** >> START **/


.publication {
	background-color: #000;
	color: #fff;
	padding: 10% 0 6.25%;/* 64px 0 40px */
}

	.publication .trademark {
		margin: 0 auto;
		width: 28.44%;/* 182px */
	}

	.publication .copyright {
		font-size: 1.8rem;
		font-weight: normal;
		letter-spacing: 0.1em;
		padding-top: 7.81%;/* 50px */
		text-align: center;
	}


/** |04. フッター| << ******************************************************************* << END **/