@charset "UTF-8";

/* ======================================================
 * parts.css
====================================================== */

@keyframes pattern01 {50%{right: 6px;}}
@keyframes pattern02 {50%{right: 6px;}}
@keyframes pattern03 {50%{right: 4px;}}
@keyframes pattern04 {50%{right: 4px;}}
@keyframes pattern05 {50%{left: 4px;}}
@keyframes pattern05-v2 {50%{left: 14px;}}
@keyframes pattern05-v3 {50%{margin-top: -3px;}}
@keyframes pattern06 {50%{right: 12px;}}
@keyframes pattern07 {50%{right: 12px;}}
@keyframes pattern08 {50%{margin-left: -7px;}}
@keyframes pattern09 {50%{margin-left: -5px;}}

/* ------------------------------------------------------
 * Common
------------------------------------------------------ */
a { transition: .5s; }

.fc-main { color: #00ada9 !important; }

.fw-normal { font-weight: 400 !important; }
.fw-bold { font-weight: 700 !important; }

.inline-block { display: inline-block !important; }

/*-------------------------- PC ----------------------------------- */

/* ------------------------------------------------------
 * text-lead
------------------------------------------------------ */
.text-lead {
	color: #000;
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
}


/* ------------------------------------------------------
 * link
------------------------------------------------------ */
.icon-link,
.icon-blank {
	position: relative;
}

.icon-link::before {
	border-top: 2px solid #00ada9;
	border-right: 2px solid #00ada9;
	content: "";
	height: 8px;
	width: 8px;
	position: absolute;
	top: calc(50% - 5px);
	left: 0;
	transform: rotate(45deg);
	transition: .5s;
}

.icon-blank::after {
	background: url("/sports/common/images/com_ic02.png") no-repeat center / 100% auto;
	content: "";
	height: 10px;
	width: 10px;
	position: absolute;
	top: calc((100% - 10px) / 2);
	right: 0;
}

.link-label.icon-link {
	padding-left: calc(.5em + 12px);
}

.link-label.icon-blank {
	padding-right: calc(.5em + 10px);
}


/* ------------------------------------------------------
 * anchor-link
------------------------------------------------------ */
.anchor-link a {
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: .05em;
	text-align: center;
}

.anchor-link .icon-link::before {
	top: calc(50% - 7px);
	left: 30px;
	transform: rotate(135deg);
}


/* ------------------------------------------------------
 * banner effect
------------------------------------------------------ */
.bnr-effect a {
	display: inline-block;
	position: relative;
}

.bnr-effect a::before {
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	content: '';
	display: block;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
}

.bnr-effect a:hover {
	opacity: 1;
}

.bnr-effect a:hover::before {
	animation: effectCircle .75s;
}

@keyframes effectCircle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 100%;
		height: 200%;
		opacity: 0;
	}
}


/* ------------------------------------------------------
 * box
------------------------------------------------------ */
.box {
	background-color: #FFF;
	box-shadow: 0 0 10px rgba(0, 0, 0, .04);
}


/* ------------------------------------------------------
 * layout pattern
------------------------------------------------------ */
[class*="pattern1-"],
[class*="pattern2-"],
[class*="pattern3-"],
[class*="pattern4-"] {
	margin-bottom: 2em;
}

.right-col {
	float: right;
}

.left-col {
	float: left;
}

/* pattern1-1 */

.pattern1-1 .left-col {
	width: calc((100% - 50px) / 2);
}

.pattern1-1 .right-col {
	width: calc((100% - 50px) / 2);
}

.pattern1-1 .col {
	float: left;
	margin-right: 50px;
	width: calc((100% - 50px) / 2);
}

.pattern1-1 .col:nth-of-type(2n) {
	margin-right: 0;
}

.pattern1-1 .col .pattern1-1 .col {
	float: left;
	margin-right: 15px;
	width: calc((100% - 15px) / 2);
}

.pattern1-1 .col .pattern1-1 .col:nth-of-type(2n) {
	margin-right: 0 !important;
}

/* pattern2-3(3-2) */

.pattern2-3 .right-col,
.pattern3-2 .left-col {
	width: calc(((100% - 50px) / 5) * 3);
}

.pattern2-3 .left-col,
.pattern3-2 .right-col {
	width: calc(((100% - 50px) / 5) * 2);
}

/* pattern1-2(2-1) */

.pattern1-2 .left-col,
.pattern2-1 .right-col {
	width: calc((100% - 50px) / 3);
}

.pattern1-2 .right-col,
.pattern2-1 .left-col {
	width: calc(((100% - 50px) / 3) * 2);
}

/* pattern1-3(3-1) */

.pattern1-3 .left-col,
.pattern3-1 .right-col {
	width: calc((100% - 50px) / 4);
}

.pattern1-3 .right-col,
.pattern3-1 .left-col {
	width: calc(((100% - 50px) / 4) * 3);
}

/* pattern1-1-1 */

[class*="pattern1-1-1"] {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.pattern1-1-1 .col {
	margin-right: 50px;
	width: calc((99.9% - (50px * 2)) / 3);
}

.pattern1-1-1 .col:nth-of-type(3n) {
	margin-right: 0;
}

/* patterm1-1-1-1 */

.pattern1-1-1-1 .col {
	margin-right: 50px;
	width: calc((100% - (50px * 3)) / 4);
}

.pattern1-1-1-1 .col:nth-of-type(4n) {
	margin-right: 0;
}

/* ×ÓÒªËؤÎÓà°×Õ{Õû */
@media screen and (min-width: 769px) {
	.pattern1-1 .col:nth-of-type(n+3),
	.pattern1-1-1 .col:nth-of-type(n+4),
	.pattern1-1-1-1 .col:nth-of-type(n+5) {
		margin-top: 2em;
	}
}

#main-content [class*="pattern"] [class*="col"]:last-of-type,
#main-content [class*="pattern"] [class*="col"] > :last-child {
	margin-bottom: 0;
}


/* ------------------------------------------------------
 * news-list
------------------------------------------------------ */
.news-list li {
	border-bottom: 1px dotted #bfbfbf;
}

.news-list a {
	display: block;
	padding: 24px 0 20px 34px;
}

.news-list .news_date {
	margin-bottom: 6px;
	position: relative;
}

.news-list .news_date::before {
	color: #00ada9;
	content: "¡ñ";
	font-size: .5em;
	position: absolute;
	top: .7em;
	left: -2.4em;
}

.news-list li .news_title {
	margin-left: -3px;
}

.news-list li .news_title span {
	position: relative;
}

.news-list li .news_title span::before {
	background-color: #4d4d4d;
	content: "";
	height: 1px;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	transform-origin: left;
	transform: scale(0);
	transition: .5s;
}

.news-list li a:hover .news_title span::before {
	transform: scale(1);
}


/* ------------------------------------------------------
 * caption
------------------------------------------------------ */
.caption {
	font-size: .9em;
	margin-top: .5em;
}


/* ------------------------------------------------------
 * Clearfix
------------------------------------------------------ */
[class*="pattern1-"]::after,
[class*="pattern2-"]::after,
[class*="pattern3-"]::after,
[class*="pattern4-"]::after {
	clear: both;
	content: "";
	display: block;
}


/*-------------------------- SP ----------------------------------- */

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

	/* ------------------------------------------------------
	 * Common
	------------------------------------------------------ */	
	
	/* ------------------------------------------------------
	 * text-lead
	------------------------------------------------------ */
	.text-lead {
		font-size: 1.7rem;
		line-height: 1.8;
		text-align: left;
	}
	
	
/* ------------------------------------------------------
 * anchor-link
------------------------------------------------------ */
	.anchor-link .icon-link::before {
		left: 28px;
		top: calc(50% - 5px);
	}


/* ------------------------------------------------------
 * layout pattern
------------------------------------------------------ */
	[class*="pattern1-"],
	[class*="pattern2-"],
	[class*="pattern3-"],
	[class*="pattern4-"] {
		margin-bottom: 2em;
	}

	.right-col, .left-col {
		float: none;
	}

	[class*="pattern"] [class*="col"] {
		margin-right: 0;
		width: 100% !important;
	}

	[class*="pattern"] [class*="col"] + [class*="col"] {
		margin-top: 1.5em;
	}

	[class*="col"] figure {
		text-align: center;
	}

	[class*="col"] figure img {
		width: 100%;
	}

	.pattern1-1 .col .pattern1-1 .col {
		float: left;
		margin-right: 15px;
		width: calc((100% - 15px) / 2) !important;
	}
	
	
	/* ------------------------------------------------------
	 * news-layout
	------------------------------------------------------ */
	
	.news-list li + li {
		margin-top: .5em;
	}

	.news-list a {
		padding: 1em 1.1em 1.3em 2em;
	}
	
	
	/* ------------------------------------------------------
	 * Clearfix
	------------------------------------------------------ */
/*	.element::after, {
		clear: both;
		content: "";
		display: block;
	}*/

}