@charset "utf-8";

/* トップページ
========================================================= */



/* レギュラーコンテンツ
--------------------------------------------------------- */

.swiper-area { overflow: hidden; padding: 0 0 30px 0; }
.swiper-inner { width: 100%; max-width: 1000px; position: relative; margin: 30px auto 0; }
.swiper-container { overflow: visible !important; }
.swiper-pagination { position: absolute; right: 0; bottom: -30px; left: 0; margin: auto; }
.swiper-pagination-bullet {
	width: 12px !important;
	height: 12px !important;
	box-sizing: border-box;
	border: solid 1px #987f47 !important;
	background: #ffffff !important;
	opacity: 1.0 !important;
	margin: 0 20px !important;
}
.swiper-pagination-bullet-active { background: #987f47 !important; }
.swiper-slide { opacity: 0.3; }
.swiper-slide-active { opacity: 1.0; }

.swiper-slide a { display: block; color: #000000; font-weight: bold; position: relative; }
.swiper-slide .slide1 p {
	width: 100%;
	font-size: 1.6rem;
	text-align: center;
	position: absolute;
	bottom: 5.5%;
}
.swiper-slide .slide2 p {
	width: 97%;
	height: 92%;
	border: solid 1px #ffffff;
	box-sizing: border-box;
	position: absolute;
	top: 4%;
	left: 1.5%;
}
.swiper-slide .slide2 dl { width: 44%; position: absolute; top: 50%; left: 6%; transform: translateY(-50%); }
.swiper-slide .slide2 dt { color: #c50000; font-size: 1.6rem; line-height: 2.4rem; }
.swiper-slide .slide2 dt + dd {
	font-size: 2.4rem;
	line-height: 3.4rem;
	letter-spacing: -0.05em;
	padding: 6% 0;
}
.swiper-slide .slide2 dt + dd span { display: inline-block; }
.swiper-slide .slide2 dd + dd { font-size: 1.6rem; line-height: 2.4rem; }
.swiper-slide .slide2 dd + dd span { font-size: 1.4rem; }
.swiper-slide .slide3 dl {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	transform: translateY(-44%);
}
.swiper-slide .slide3 dt { font-size: 5.5rem; line-height: 6.5rem; }
.swiper-slide .slide3 dt + dd { font-size: 1.8rem; line-height: 2.8rem; letter-spacing: -0.05em; padding: 10px 0 0 0; }
.swiper-slide .slide4 p {
	width: 97%;
	height: 92%;
	border: solid 1px #946d55;
	box-sizing: border-box;
	position: absolute;
	top: 4%;
	left: 1.5%;
}
.swiper-slide .slide4 dl {
	letter-spacing: 0.4em;
	position: absolute;
	top: 50%;
	left: 6%;
	transform: translateY(-50%);
}
.swiper-slide .slide4 dt { font-size: 2.1rem; line-height: 3.1rem; }
.swiper-slide .slide4 dt + dd { font-size: 3.5rem; line-height: 4.5rem; padding: 3.0% 0 0 0; }

.swiper-slide .slide5 p {
	width: 28%;
	font-family: "Yu Mincho", "YuMincho";
	font-size: 1.9rem;
	line-height: 3.2rem;
	letter-spacing: 0.05em;
	position: absolute;
	top: 55%;
	left: 12%;
	transform: translateY(-50%);
}
.swiper-slide .slide5 p span{ display:block; }


.regular section { margin: 100px 0 0 0; }

.regular h2 { font-size: 3.4rem; line-height: 1.2; font-weight: bold; text-align: center; }
.regular h2 span { display: inline-block; }

.regular .whatsNewReg { padding: 0 calc(15/320 * 100%); }
.regular .whatsNewReg > div { width: 100%; max-width: 1000px; margin: 50px auto 0; }
.regular .whatsNewReg ul { width: calc(100% + 40px); max-width: 1040px; display: table; margin: 0 0 0 -20px; }
.regular .whatsNewReg ul + ul { margin: 70px 0 0 -20px; }
.regular .whatsNewReg li {
	width: calc(260/1040 * 100%);
	display: table-cell;
	font-size: 1.5rem;
	line-height: 1.5;
	box-sizing: border-box;
	padding: 0 20px;
	position: relative;
}
.regular .whatsNewReg li + li { border-left: solid 1px #e3e3e3; }
.regular .whatsNewReg a { display: block; color: #000000; }
.regular .whatsNewReg li.new:before {
	content: "NEW";
	width: 40px;
	height: 40px;
	display: table-cell;
	border-radius: 20px;
	background: #f50000;
	color: #ffffff;
	font-size: 1.2rem;
	line-height: 4.0rem;
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: -10px;
	left: 10px;
	z-index: 2;
}
.regular .whatsNewReg figure { background: #000000; }
.regular .whatsNewReg figure.calli { border: solid 1px #e3e3e3; }
.regular .whatsNewReg figure + div { padding: 15px 0 0 0; }
.regular .whatsNewReg p:first-child { font-weight: bold; padding: 0 0 5px 0; }

/* 受賞者発表時 */
.regular .whatsNew { padding: 0 calc(15/320 * 100%); }
.regular .whatsNew div {
	width: 100%;
	max-width: 830px;
	display: block;
	border-top: solid 1px #e3e3e3;
	margin: 40px auto 0;
}
.regular .whatsNew a { color: #000000; }
.regular .whatsNew ul { width: 100%; display: table; }
.regular .whatsNew li {
	display: table-cell;
	border-bottom: solid 1px #e3e3e3;
	font-size: 1.8rem;
	line-height: 1.5;
	box-sizing: border-box;
	padding: 20px 5px;
}
.regular .whatsNew li:first-child { width: 135px; font-weight: bold; }
/* ここまで */

.regular .contents { padding: 0 calc(15/320 * 100%); }
.regular .contents a {
	width: 100%;
	max-width: 1000px;
	display: table;
	background: #efeeea;
	margin: 40px auto 0;
	position: relative;
	transition: all 0.3s;
}
.regular .contents p:first-child {
	width: 125px;
	background: #000000;
	color: #ffffff;
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 0.2em;
	text-align: center;
	padding: 6px;
	position: absolute;
	top: 17px;
	left: -15px;
	z-index: 100;
	transition: all 0.3s;
}
.regular .contents a div,
.regular .contents a figure { width: 50%; display: table-cell; vertical-align: top; transition: all 0.3s; }
.regular .contents div { position: relative; }
.regular .contents dl {
	width: 100%;
	color: #000000;
	box-sizing: border-box;
	padding: 0 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-37%);
	transition: all 0.3s;
}
.regular .contents dt { font-size: 2.8rem; line-height: 1.5; font-weight: bold; }
.regular .contents dt span { font-size: 1.8rem; display: block; }
.regular .contents a.about dt br { display: none; }
.regular .contents dd { font-size: 1.6rem; line-height: 2.6rem; padding: 20px 0 0 0; }
.regular .contents a.about figure img + img { display: none; }
.regular .contents a figure + p {
	width: 50%;
	height: 100%;
	display: block;
	background: #000000;
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0;
	transition: all 0.3s; 
}

.regular .downLoad { padding: 0 calc(15/320 * 100%); }
.regular .downLoad .slider {
	width: 100%;
	max-width: 1000px;
	box-sizing: border-box;
	padding: 0 10px;
	margin: 60px auto 0;
	overflow: hidden;
	position: relative;
}
.regular .downLoad .slider li a {
	width: calc(190/240 * 100%);
	max-width: 190px;
	display: block;
	background: #000000;
	margin: 0 auto;
}
.regular .downLoad .slider li a:hover img { transition: all 0.3s; }
.slick-arrow { width: 17px; height: 100%; position: absolute; top: 0; bottom: 0; margin: auto; cursor: pointer; }
.prev-arrow { background: url(../../images/top_dl_prev.png) no-repeat center center #ffffff; left: 0; z-index: 10; }
.next-arrow { background: url(../../images/top_dl_next.png) no-repeat center center #ffffff; right: 0; }



@media screen and (min-width:769px) {
	.regular .whatsNewReg a:hover img { opacity: 0.7; transition: all 0.3s; }
	/* 受賞者発表時 */
	.regular .whatsNew a:hover ul { background: #efefef; }
	/* ここまで */
	.regular .contents a:hover figure + p { opacity: 0.3; }
	.regular .downLoad .slider li a:hover img { opacity: 0.7; }
}

@media screen and (max-width:1000px) {
	.swiper-slide .slide1 p { font-size: 1.6vw; }
	.swiper-slide .slide2 dt { font-size: 1.6vw; line-height: 2.4vw; }
	.swiper-slide .slide2 dt + dd { font-size: 2.4vw; line-height: 3.4vw; }
	.swiper-slide .slide2 dd + dd { font-size: 1.6vw; line-height: 2.4vw; }
	.swiper-slide .slide2 dd + dd span { font-size: 1.4vw; }
	.swiper-slide .slide3 dt {font-size: 5.5vw; line-height: 6.5vw; }
	.swiper-slide .slide3 dt + dd { font-size: 1.8vw; line-height: 2.8vw; }
	.swiper-slide .slide4 dt { font-size: 2.1vw; line-height: 3.1vw; }
	.swiper-slide .slide4 dt + dd { font-size: 3.5vw; line-height: 4.5vw; }
	.swiper-slide .slide5 p { font-size: 1.9vw; line-height: 3.2vw;  }

	
	.regular .contents p:first-child { top: 0; }
	.regular .contents dl { padding: 0 20px; transform: translate(-50%,-42%); }
}

@media screen and (max-width: 860px) {
	.regular .contents a div { width: 65%; }
	.regular .contents a figure { width: 35%; }
	.regular .contents a figure + p { width: 35%; }
	.regular .contents dd { display: none; }
}

@media screen and (max-width: 767px) {
	.swiper-inner { margin: 0 auto; }
	.swiper-pagination-bullet { margin: 0 10px !important; }
	.swiper-slide .slide1 p { display: none; }
	
	.swiper-slide .slide3 dl { top: 50%; transform: translateY(-50%); }
	.swiper-slide .slide3 dt {font-size: 5.5vw; line-height: 6.5vw; }
	.swiper-slide .slide3 dt + dd { display: none; }
	.swiper-slide .slide5 p span{ display:inline; }


	
	.regular section { margin: 70px 0 0 0; }
	.regular section.whatsNewReg { margin: 50px 0 0 0; }
	
	.regular h2 { font-size: 2.6rem; }
	
	.regular .whatsNewReg { padding: 0 calc(15/320 * 100%); }
	.regular .whatsNewReg > div { margin: 20px auto 0; }
	.regular .whatsNewReg ul { width: 100%; margin: 0; }
	.regular .whatsNewReg ul + ul { margin: 20px 0 0 0; }
	.regular .whatsNewReg li { width: 100%; display: block; font-size: 1.4rem; padding: 0; }
	.regular .whatsNewReg li + li { border-left: none; margin: 20px 0 0 0; }
	.regular .whatsNewReg li.new:before { content: none; }
	.regular .whatsNewReg figure { width: calc(300/1000 * 100%); background: none; display: table-cell; }
	.regular .whatsNewReg figure + div {
		width: calc(700/1000 * 100%);
		display: table-cell;
		box-sizing: border-box;
		padding: 0 0 0 15px;
	}
	.regular .whatsNewReg p:first-child { font-weight: bold; padding: 0 0 5px 0; }
	.regular .whatsNewReg li.new p:first-child:after { content: "NEW"; color: #f50000; padding: 0 0 0 0.5em; }
	.regular .whatsNewReg p.empty { display: none; }
	
	/* 受賞者発表時 */
	.regular .whatsNew div { margin: 20px auto 0; }
	.regular .whatsNew li { display: block; font-size: 1.6rem; padding: 5px 5px 12px 5px; }
	.regular .whatsNew li:first-child {
		width: 100%;
		border-bottom: none;
		color: #4d4d4d;
		font-size: 1.4rem;
		padding: 12px 5px 0 5px;
	}
	/* ここまで */
	
	.regular .contents a { max-width: 500px; display: flex; flex-direction: column; margin: 30px auto 0; }
	.regular .contents p:first-child { left: 0; }
	.regular .contents a div,
	.regular .contents a figure { width: 100%; display: block; vertical-align: top; }
	.regular .contents a figure { order: -1; }
	.regular .contents a.about figure img { display: none; }
	.regular .contents a.about figure img + img { display: block; }
	.regular .contents a div { height: 100px; }
	.regular .contents a.about div {
		width: 100%;
		background: none;
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.regular .contents dl { padding: 0; transform: translate(-50%,-50%); }
	.regular .contents dt { font-size: 2.6rem; text-align: center; }
	.regular .contents dt span { font-size: 1.6rem; }
	.regular .contents a.about dt br { display: block; }
	.regular .contents a figure + p { display: none; }
	
	.regular .downLoad .slider { margin: 30px auto 0; }
}






/* 受賞者決定
--------------------------------------------------------- */

.winner {
	width: 100%;
	max-width: 1200px;
	background: url(/cms/cwc/coy/images/top_win_bg.jpg) no-repeat center top;
	background-size: 100%;
	box-sizing: border-box;
	padding: 60px calc(15/320 * 100%) 0;
	margin: 30px auto 0;
}
.winner h2 { display: table; color: #7b0000; font-family: "Yu Mincho", "YuMincho"; font-size: 6.5rem; margin: 0 auto; }
.winner h2 + p { display: table; font-size: 1.8rem; line-height: 1.5; text-align: center; margin: 30px auto 0; }
.winner ul { width: 100%; max-width: 845px; margin: 40px auto 0; overflow: hidden; }
.winner li { max-width: 100% }
.winner li + li { margin: 0 0 0 calc(40/845 * 100%); }
.winner li a { display: block; background: #000000; }
.winner li div + p { display: table; font-size: 1.7rem; line-height: 1.5; margin: 15px auto 0; }
.winner li div + p.small { font-size: 1.5rem; }

.winner ul + p {
	width: 100%;
	max-width: 845px;
	display: table;
	font-size: 2.0rem;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
	margin: 70px auto 0;
}
.winner ul + p span { display: block; margin: 0 calc(15/320 * 100%); }
.winner ul + p:before {
	content: "";
	width: 100%;
	height: 1px;
	display: block;
	border-radius: 50%;
	background: linear-gradient(90deg, #ffffff, #98947a 20%, #98947a 80%, #ffffff);
	margin: 0 0 5px 0;
}
.winner ul + p:after {
	content: "";
	width: 100%;
	height: 1px;
	display: block;
	border-radius: 50%;
	background: linear-gradient(90deg, #ffffff, #98947a 20%, #98947a 80%, #ffffff);
	margin: 5px 0 0 0;
}
.winner h3 { font-size: 2.8rem; font-weight: bold; text-align: center; margin: 60px auto 0; }

.winner ul + div {
	width: 100%;
	max-width: 390px;
	background: linear-gradient(90deg, #816b28, #deb68d 30%, #deb68d 50%, #816b28);
	margin: 60px auto 0;
}
.winner ul + div a {
	display: block;
	color: #ffffff;
	font-size: 1.8rem;
	text-align: center;
	position: relative;
	padding: 12px 0;
	transition: all 0.3s;
}
.winner ul + div a:after {
	content: "";
	width: 11px;
	height: 11px;
	display: block;
	border-right: solid 1px #ffffff;
	border-bottom: solid 1px #ffffff;
	transform: rotate(-45deg);
	position: absolute;
	top: 14px;
	right: 15px;
}

.message {
	width: 100%;
	max-width: 1200px;
	background: url(/cms/cwc/coy/images/top_win_bg2.jpg) no-repeat center bottom;
	background-size: 100%;
	box-sizing: border-box;
	padding: 0 calc(15/320 * 100%) 70px;
	margin: 100px auto 0;
}
.message .yamane {
	width: 100%;
	max-width: 840px;
	border: solid 1px #dbdbdb;
	background: #ffffff;
	box-sizing: border-box;
	padding: 30px;
	margin: 0 auto;
}
.message .yamane h4 { font-size: 1.9rem; font-weight: bold; text-align: center; }
.message .yamane ul { width: 100%; display: table; margin: 40px 0 0 0; }
.message .yamane li { display: table-cell; vertical-align: middle; }
.message .yamane li:first-child {
	color: #7b0000;
	font-family: "Yu Mincho", "YuMincho";
	font-size: 2.5rem;
	line-height: 3.5rem;
	font-weight: bold;
	padding: 0 10px 0 0;
}
.message .yamane li span { display: inline-block; }
.message .yamane li + li { width: calc(340/778 * 100%); max-width: 340px; }
.message .president {
	width: 100%;
	max-width: 840px;
	border: solid 1px #dbdbdb;
	box-sizing: border-box;
	background: #ffffff;
	box-sizing: border-box;
	padding: 30px 40px;
	margin: 40px auto 0;
}
.message .president h4 { font-size: 2.0rem; font-weight: bold; text-align: center; }
.message .president h4 + p {
	color: #7b0000;
	font-family: "Yu Mincho", "YuMincho";
	font-size: 2.5rem;
	line-height: 3.5rem;
	font-weight: bold;
	text-align: center;
	margin: 30px 0 0 0;
}
.message .president h4 + p span { display: block; }
.message .president h4 + p span br { display: none; }
.message .president ul { width: 100%; display: table; margin: 40px 0 0 0; }
.message .president li { display: table-cell; vertical-align: top; }
.message .president li:first-child {
	font-size: 1.6rem;
	line-height: 2.6rem;
	padding: 0 40px 0 0;
}
.message .president li + li { width: calc(230/758 * 100%); max-width: 230px; }
.message .president dl {
	display: table;
	font-size: 1.3rem;
	line-height: 1.5;
	text-align: center;
	margin: 10px auto 0;
}
.message .president dd { font-size: 2.1rem; font-weight: bold; }



@media screen and (min-width: 769px) {
	.winner li a:hover img { opacity: 0.7; transition: all 0.3s; }
	.winner ul + div a:hover { background: rgba(0,0,0,0.5); }
}

@media screen and (max-width: 767px) {
	.winner { padding: 25px calc(15/320 * 100%) 0; margin: 0 auto; }
	.winner h2 { font-size: 2.7rem; }
	.winner h2 + p { font-size: 1.6rem; text-align: left; margin: 20px auto 0; }
	.winner h2 + p br { display: none; }
	.winner ul { margin: 30px auto 0; }
	.winner li { width: 100%; float: none; display: block; margin: 0 auto; }
	.winner li + li { margin: 20px auto 0; }
	.winner li div + p { font-size: 1.5rem; margin: 10px auto 0; }
	
	.winner ul + p { font-size: 1.6rem; text-align: left; margin: 50px auto 0; }
	.winner h3 { font-size: 1.8rem; margin: 40px auto 0; }
	.winner ul + div { font-size: 1.6rem; margin: 50px auto 0; }
	.winner ul + div a { font-size: 1.6rem; }
	
	.message { padding: 0 calc(15/320 * 100%) 40px; margin: 60px auto 0; }
	.message .yamane { padding: 20px; }
	.message .yamane ul { width: 100%; display: table; margin: 20px 0 0 0; }
	.message .yamane li { display: block; }
	.message .yamane li span { display: block; }
	.message .yamane li:first-child { font-size: 1.8rem; line-height: 2.6rem; text-align: center; }
	.message .yamane li + li { width: 100%; margin: 25px auto 0; }
	.message .president { padding: 20px; margin: 20px auto 0; }
	.message .president h4 { font-size: 2.0rem; font-weight: bold; text-align: center; }
	.message .president h4 + p { font-size: 1.8rem; line-height: 2.6rem; margin: 25px 0 0 0; }
	.message .president h4 + p span br { display: block; }
	.message .president ul { display: flex; flex-direction: column; margin: 20px 0 0 0; }
	.message .president li { display: block; }
	.message .president li:first-child { font-size: 1.5rem; line-height: 2.5rem; padding: 20px 0 0 0; }
	.message .president li + li { width: 100%; margin: 0 auto; order: -1; }
}


/* 動画モーダル
========================================================= */

.modal_open { cursor: pointer; }
.modal_box {
	width: 80%;
	display: none;
	margin: 0;
	position: fixed;
	z-index: 2000;
}
.modal-archive { height: 80vh; }
.modal-iframe { width: 100%; height: 100%; border: none; }
.modClose { width: 50px; height: 50px; position: absolute; top: 5px; right: 5px; }
.modClose a { width: 50px; height: 50px; display: block; position: relative; cursor: pointer; }
.modClose a:before {
	content: "";
	width: 26px;
	height: 1px;
	display: block;
	background: #222222;
	position: absolute;
	top: 24px;
	right: 12px;
	transform: rotate(45deg);
}
.modClose a:after {
	content: "";
	width: 1px;
	height: 26px;
	display: block;
	background: #222222;
	position: absolute;
	top: 12px;
	right: 24px;
	transform: rotate(45deg);
}
.modal_bg {
	width: 100%;
	height: 120%;
	display: none;
	background-color: rgba(0,0,0,0.4);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

.topMov { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.topMov .movie { max-width: 640px; margin: 0 auto; }
.topMov .movie p { width: 100%; position: relative; padding-bottom: 56.25%; }



@media screen and (max-width: 480px) {
	.modal_box { width: 100%; }
	.modal-archive { height: 60vh; }
	.modClose { top: 0; right: 0; }
}