@charset "utf-8";

/*============================================================================*\
   $Index
\*============================================================================*/

/*------------------------------------*\
    ヒーロー
\*------------------------------------*/
.hero {
	padding: 20px 0 5px;
	background: #ed86b3 url(../../img/page/gcc/index/hero_bg2025.jpg) no-repeat center center;
	background-size: cover;
	color: #fff;
}
.hero-logo,
.hero-desc {
	max-width: 400px;
	margin: 0 auto;
}
.hero-logo {
	margin-bottom: 1em;
}
.hero-desc__txt {
	font-family: Georgia, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro","游明朝体", "YuMincho", "游明朝", "Yu Mincho", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	text-shadow:
	0px 0px 3px #a86673,
	0px 0px 10px #a86673;
}

@media (min-width: 48em) {
	.hero {
		padding: 60px 0;
	}
	.hero-inner {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	.hero-logo,
	.hero-desc {
		display: table-cell;
		vertical-align: bottom;
	}
	.hero-logo {
		width: 48%;
		padding-bottom: 25px;
	}
	.hero-desc {
		width: 52%;
		padding-left: 4%;
	}
	.hero-desc__txt {
		padding-left: 5%;
		line-height: 1.75;
	}
}

@media (min-width: 66.25em) {
	.hero {
		padding: 230px 0;
	}
	.hero-desc__txt {
		-moz-font-feature-settings: "pkna";
		-webkit-font-feature-settings: "pkna";
		font-feature-settings: "pkna";
		font-size: 1.8rem;
		letter-spacing: .05em;
		line-height: 2;
	}
}


/*------------------------------------*\
    イントロ
\*------------------------------------*/
.intro {
	background: #fff url(../../img/page/gcc/index/intro_bg.svg) no-repeat left bottom;
	background-size: 100%;
}

/* 応募期間 
   ---------------------------------- */
.intro-period {
	margin-bottom: 20px;
}

@media (min-width: 48em) {
	.intro-period {
		margin-bottom: 60px;
	}
}

@media (min-width: 66.25em) {
	.intro {
		background-size: 61.42020497803807%;
	}
	
	/* 応募期間 
	   ---------------------------------- */
	.intro-period {
		position: relative;
		margin-bottom: 0;
		margin-top: -120px;
	}
	.intro-period:before,
	.intro-period:after {
		content: "";
		display: block;
		position: absolute;
	}
	.intro-period:before {
		bottom: -100px;
		left: -100px;
		width: 160px;
		height: 160px;
		background: #ed86b3;
		opacity: .2;
	}
	.intro-period:after {
		bottom: -200px;
		left: 60px;
		width: 100px;
		height:100px;
		background: #f8e594;
		opacity: .5;
	}
	
	/* 賞
	   ---------------------------------- */
	.intro-award-wrap {
		position: relative;
	}
	.intro-award-wrap:before,
	.intro-award-wrap:after {
		content: "";
		display: block;
		position: absolute;
	}
	.intro-award-wrap:before {
		bottom: -60px;
		right: -60px;
		width: 60px;
		height: 60px;
		background: #f8e594;
		opacity: .5;
	}
	.intro-award-wrap:after {
		bottom: -260px;
		right: 0;
		width: 200px;
		height:200px;
		background: #f8e594;
		opacity: .5;
	}
}

@media (min-width: 80em) {
	.intro {
		background-size: 839px 517px;
	}
}


/*------------------------------------*\
    審査員
\*------------------------------------*/
.judge {
	background: #ed86b3 url(../../img/page/gcc/common/bg02.svg);
	background-size: 50%;
 }
 
 /* カードリスト
   ---------------------------------- */
.judge-card-list {
	list-style: none;
	margin-bottom: -4%;
	padding: 0;
}
.judge-card-list li {
	margin-bottom: 4%;
}

@media (max-width: 47.9375em) {
	 /* フキダシ
	   ---------------------------------- */
	.judge-balloon {
		padding: 0;
		background: none;
		color: #fff;
	}
	.judge-balloon:before {
		content: none;
	}
}
@media (min-width: 48em) {
	.judge {
		background-size: auto;
	}
	
	/* 見出し */
	.judge-heading {
		position: relative;
	}
	
	 /* フキダシ
	   ---------------------------------- */
	.judge-balloon {
		position: absolute;
		top: -16rem;
		left: 0;
		text-align: center;
		font-weight: bold;
	}
}
@media (min-width: 66.25em) {
	 /* カードリスト
	   ---------------------------------- */
	/* .judge-card-list li:nth-child(2n) {
		margin-top: 30px;
	} */
}


/*------------------------------------*\
    これまでの受賞作品
\*------------------------------------*/
.work {
	background: #fae5ee;
}

 /* 見出し
   ---------------------------------- */
.work-heading-wrap {
	overflow: hidden;
}

 /* 画像
   ---------------------------------- */
.work-img {
	position: relative;
	margin-bottom: 4%;
}
.work-img img {
	width: 100%;
}
.work-img__label {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin-left: 0;
	border-color: transparent;
	background: rgba(155,128,61,.7);
	color: #fff;
}

 /* ボタン
   ---------------------------------- */
.work-btn-wrap {
	display: block;
}
.work-btn-wrap:before {
	content: "";
	display: inline-block;
	padding-top: 100%;
	vertical-align: middle;
}
.work-btn-wrap:focus,
.work-btn-wrap:hover {
	background: #fff;
}
.work-btn {
	display: inline-block;
	width: 100%;
	color: #ed86b3;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: .1em;
	vertical-align: middle;
}
.work-btn:before {
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin: 0 3rem 4.5rem 0;
	background: #ed86b3;
	box-shadow:
	1.5rem 0 0 0 rgba(237,134,179,.2),
	3rem 0 0 0 #ed86b3,
	0 1.5rem 0 0 rgba(237,134,179,.2),
	1.5rem 1.5rem 0 0 #ed86b3,
	3rem 1.5rem 0 0 rgba(237,134,179,.2),
	0 3rem 0 0 #ed86b3,
	1.5rem 3rem 0 0 rgba(237,134,179,.2),
	3rem 3rem 0 0 #ed86b3;
	vertical-align: middle;
}
.work-btn__txt {
	display: block;
}

@media (min-width: 48em) {	
	 /* 画像
	   ---------------------------------- */
	.work-img__label {
		width: auto;
	}

	 /* ボタン
	   ---------------------------------- */
	.work-btn:before {
		width: 2rem;
		height: 2rem;
		margin: 0 6rem 9rem 0;
		box-shadow:
		3rem 0 0 0 rgba(237,134,179,.2),
		6rem 0 0 0 #ed86b3,
		0 3rem 0 0 rgba(237,134,179,.2),
		3rem 3rem 0 0 #ed86b3,
		6rem 3rem 0 0 rgba(237,134,179,.2),
		0 6rem 0 0 #ed86b3,
		3rem 6rem 0 0 rgba(237,134,179,.2),
		6rem 6rem 0 0 #ed86b3;
	}
}

@media (min-width: 66.25em) {
	.work {
		padding: 0;
	}
	
	 /* 見出し
	   ---------------------------------- */
	.work-heading-wrap:before {
		content: "";
		display: inline-block;
		padding-top: 49.9%;
		vertical-align: middle;
	}
	.work-heading {
		display: inline-block;
		margin: 0 0 0 30px;
		vertical-align: middle;
	}

	 /* 画像
	   ---------------------------------- */
	.work-img {
		margin-bottom: 0;
	}
}


/*------------------------------------*\
    学科案内
\*------------------------------------*/
.work + .guide {
	border-top: .2rem solid #f8cfe1;
}
.guide {
	padding-bottom: 0;
	background: #fae5ee;
	color: #ed86b3;
}
.guide-box-heading {
	position: relative;
	padding: 15% 0 13%;
	background: #ed86b3 url(../../img/page/gcc/index/guide_bg01.jpg) no-repeat center center;
	background-size: cover;
	color: #fff;
	text-align: center;
	vertical-align: middle;
}
.guide-box-heading:before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../../img/page/gcc/index/guide_bg02.png) center center no-repeat;
	background-size: cover;
}
.guide-box-heading-inner {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 14em;
	margin: 0 auto;
	padding: .5rem 1rem;
	border: .2rem solid;
	line-height: 1.3;
	letter-spacing: .3em;
	text-shadow:
	0px 0px 3px #000,
	0px 0px 10px #000;
}

.guide-box-heading-inner:before {
	content: "";
	display: block;
	position: absolute;
	bottom: -28px;
	left: 0;
	width: 100%;
	height: 14px;
	background: url(../../img/page/gcc/index/guide_bg03.svg) center center no-repeat;
}
.guide-box-heading-inner__lower {
	display: block;
	margin-top: .5rem;
	padding-top: .5rem;
	border-top: .2rem solid;
	letter-spacing: 1em;
}
.guide-lede {
	margin-bottom: 10px;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: .05em;
	text-align: center;
}

@media (min-width: 48em) {
	.guide-lede {
		margin-bottom: 30px;
		font-size: 3rem;
	}
	.guide-box-heading-inner {
		margin-bottom: 2rem;
	}
	.guide-box-heading:before {
		background-size: 100% 40%;
	}
}

@media (min-width: 66.25em) {
	.guide {
		padding: 0;
	}
	.guide-box {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	.guide-box-heading-inner {
		margin-bottom: 2.5rem;
	}
	.guide-box-heading,
	.guide-box-txt {
		display: table-cell;
	}
	.guide-btn {
		margin-top: 40px;
	}
}