@charset "utf-8";

/**************************************************
		PC
**************************************************/
#headerArea {
	border-top:0;
	height:90px;
}

#headerArea .logo01 {
	top:35px;
	left:50%;
	margin-left:-190px;
	width:380px;
}

#headerArea .logo01 img {
	width:100%;
	height:auto;
}

#headerArea .logo02 {
	top:25px;
	right:auto;
	left:40px;
}


/* ===== Header Menu ===== */
#headerMenu {
	display:none;
}


/* ===== Main Image ===== */
#mainImage {
	background:transparent url("../common/img/bg_section_01.png") 50% 0 repeat;
}

#mainImage .image {
	position:relative;
	height:630px;
	overflow:hidden;
}

#mainImage .image:before {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:134px;
	background:#fdecf1;
	content:"";
	z-index:-1;
}

#mainImage .image img {
	position:absolute;
	top:0;
	left:0;
	height:630px;
	opacity:0;
}

#mainImage .menu {
	background:#c11b48;
}

#mainImage .menu ul {
	display:table;
	margin:0 auto;
	width:1080px;
	font-size:20px;
	font-size:1.25rem;
	font-weight:bold;
}

#mainImage .menu ul li {
	display:table-cell;
	position:relative;
	width:25%;
	line-height:1.5;
}

#mainImage .menu ul li:before {
	position:absolute;
	top:50%;
	right:-1px;
	margin-top:-15px;
	width:3px;
	height:31px;
	background:transparent url("../img/bg_menu.png") 50% 0 no-repeat;
	content:"";
}

#mainImage .menu ul li:last-child:before { display:none; }

#mainImage .menu ul li a {
	display:block;
	padding:20px 0;
	color:#fff;
	text-align:center;
	text-decoration:none;
}

#mainImage .menu ul li a:hover {
	background:rgba(255,255,255,0.2);
}


/* ===== News ===== */
#mainArea #news {
	padding:115px 0 85px 0;
	background:transparent url("../common/img/bg_section_01.png") 50% 0 repeat;
}

#mainArea #news .container {
	margin:0 auto;
	width:1080px;
}

#mainArea #news .tiNews {
	margin-bottom:35px;
	font-size:14px;
	font-size:0.88rem;
	font-weight:normal;
	line-height:1.5;
	text-align:center;
}

#mainArea #news .tiNews .en {
	display:block;
}

#mainArea #news .tiNews .ja {
	display:block;
	margin-top:-7px;
}

#mainArea .listNews {
	margin:0 -15px 40px -15px;
}

#mainArea .listNews li {
	float:left;
	padding:0 15px;
	width:33.33%;
}

#mainArea .listNews li:nth-child(3n+1) { clear:both; }

#mainArea .listNews li a,
#mainArea .listNews li .noLink {
	display:flex;
	padding:20px 0;
	border-bottom:1px solid #ccc;
	color:#333;
	text-decoration:none;
	flex-wrap:wrap;
	align-items:center;
}

#mainArea .listNews li .newsDate {
	padding-top:22px;
	border-radius:3px;
	width:90px;
	height:90px;
	background:#c11b48;
	color:#fff;
	text-align:center;
	line-height:1;
}

#mainArea .listNews li .newsDate .date {
	display:block;
	margin-bottom:5px;
	font-size:28px;
	font-size:1.75rem;
	letter-spacing:-0.05em;
}

#mainArea .listNews li .newsDate .year {
	display:block;
	font-size:14px;
	font-size:0.88rem;
}

#mainArea .listNews li .newsCategory {
	padding-left:20px;
	width:calc(100% - 90px);
}

#mainArea .listNews li .newsCategory .category {
	display:inline-block;
	padding:1px 5px;
	min-width:80px;
	background:#c11b48;
	font-size:14px;
	font-size:0.88rem;
	font-weight:bold;
	color:#fff;
	line-height:1.3;
	text-align:center;
}

#mainArea .listNews li .newsCategory .name {
	display:block;
	margin-top:7px;
	font-size:13px;
	font-size:0.82rem;
	line-height:1.5;
}

#mainArea .listNews li .newsTitle {
	display:block;
	margin-top:24px;
	padding-left:30px;
	background:transparent url("../common/img/icon_01.png") 0 0.1em no-repeat;
	background-size:20px auto;
	font-size:16px;
	font-size:1rem;
	line-height:1.7;
}

#mainArea .listNews li.sports .newsDate,
#mainArea .listNews li.sports .newsCategory .category { background-color:#ff9800; }
#mainArea .listNews li.culture .newsDate,
#mainArea .listNews li.culture .newsCategory .category { background-color:#00bcd4; }
#mainArea .listNews li.seikokai .newsDate,
#mainArea .listNews li.seikokai .newsCategory .category { background-color:#4caf50; }
#mainArea .listNews li.festivalstaff .newsDate,
#mainArea .listNews li.festivalstaff .newsCategory .category { background-color:#e7438f; }

#mainArea .listNews li a:hover { opacity:0.7; }

#news .more {
	font-size:16px;
	font-size:1rem;
	font-weight:bold;
	text-align:center;
	line-height:1.5;
}

#news .more a {
	display:inline-block;
	position:relative;
	padding:9px 15px 9px 30px;
	border-radius:3px;
	background:#222 url("../common/img/icon_02_white.png") 15px 50% no-repeat;
	background-size:9px auto;
	color:#fff;
	text-align:center;
	text-decoration:none;
}

#news .more a:hover { opacity:0.7; }


/* ===== Club ===== */
#club {
	padding:60px 0;
	background:transparent url("../img/bg_club.png") 50% 0 repeat;
}

#club .container {
	margin:0 15px;
}

@media screen and (min-width:1240px){
#club .container {
	margin:0 auto;
	width:1240px;
}
}

#club .listClub {
	margin:0 -25px;
}

#club .listClub li {
	float:left;
	padding:0 25px;
	width:33.33%;
	line-height:1.3;
}

#club .listClub li a {
	display:block;
	position:relative;
	color:#fff;
	text-decoration:none;
	overflow:hidden;
}

#club .listClub li .image {
	display:block;
	position:relative;
	z-index:10;
	-webkit-transition:transform 0.5s;
	-moz-transition:transform 0.5s;
	-ms-transition:transform 0.5s;
	-o-transition:transform 0.5s;
	transition:transform 0.5s;
}

#club .listClub li .bg {
	display:block;
	position:absolute;
	top:10px;
	left:10px;
	padding-top:50px;
	width:calc(100% - 20px);
	height:calc(100% - 20px);
	font-size:40px;
	font-size:2.5rem;
	font-weight:bold;
	background:#ff9800;
	background:rgba(255,152,0,0.75);
	text-align:center;
	z-index:20;
}

#club .listClub li.culture .bg { background-color:#00bcd4; background-color:rgba(0,188,212,0.75); }
#club .listClub li.seikokai .bg { padding-top:35px; background-color:#4caf50; background-color:rgba(76,175,80,0.75); }
#club .listClub li.festivalstaff .bg { padding-top:35px; background-color:#e7438f; background-color:rgba(255,51,153,0.75); }

#club .listClub li .en {
	display:block;
	line-height:0;
}

#club .listClub li .ja {
	display:block;
}

#club .listClub li .sub {
	display:block;
	margin-top:5px;
	font-size:16px;
	font-size:1rem;
}

#club .listClub li a:hover .image { transform:scale(1.3); }


/**************************************************
		SP
**************************************************/
@media screen and (max-width:767px){

#headerArea {
	border-top:5px solid #c11b48;
	height:113px;
}

#headerArea .logo01 {
	top:68px;
	left:50%;
	margin-left:-143px;
	width:285px;
}

#headerArea .logo02 {
	display:block;
	top:20px;
	left:50%;
	margin-left:-80px;
	width:160px;
}


/* ===== Header Menu ===== */
#menuArea {
	display:none;
}


/* ===== Main Image ===== */
#mainImage {
	background-size:10px auto;
}

#mainImage .image {
	height:400px;
}

#mainImage .image:before {
	height:67px;
}

#mainImage .menu ul {
	width:100%;
	font-size:14px;
	font-size:0.88rem;
}

#mainImage .menu ul li:before {
	margin-top:-9px;
	width:2px;
	height:18px;
	background-size:2px auto;
}

#mainImage .menu ul li a {
	padding:25px 0;
}

#mainImage .menu ul li a:hover {
	background:#c11b48;
}


/* ===== News ===== */
#mainArea #news {
	padding:60px 0;
	background-size:10px auto;
}

#mainArea #news .container {
	margin:0 15px;
	width:auto;
}

#mainArea #news .tiNews {
	margin-bottom:27px;
	font-size:10px;
	font-size:0.63rem;
}

#mainArea #news .tiNews .ja {
	margin-top:-13px;
}

#mainArea .listNews {
	margin:0 0 30px 0;
	border-top:1px solid #ccc;
}

#mainArea .listNews li {
	float:none;
	padding:0;
	width:auto;
}

#mainArea .listNews li a,
#mainArea .listNews li .noLink {
	display:block;
	padding:20px 0;
	overflow:hidden;
}

#mainArea .listNews li .newsDate {
	float:left;
	margin-right:10px;
	padding-top:11px;
	width:50px;
	height:50px;
}

#mainArea .listNews li .newsDate .date {
	margin-bottom:3px;
	font-size:15px;
	font-size:0.94rem;
}

#mainArea .listNews li .newsDate .year {
	font-size:9px;
	font-size:0.57rem;
}

#mainArea .listNews li .newsCategory {
	float:left;
	display:flex;
	padding-left:0;
	width:calc(100% - 60px);
	align-items:flex-start;
}

#mainArea .listNews li .newsCategory .category {
	padding:1px 5px;
	width:50px;
	min-width:50px;
	font-size:10px;
	font-size:0.63rem;
}

#mainArea .listNews li .newsCategory .name {
	margin-top:0;
	padding-left:5px;
	font-size:10px;
	font-size:0.63rem;
}

#mainArea .listNews li .newsTitle {
	float:left;
	margin:10px 0 0 0;
	padding-left:20px;
	width:calc(100% - 60px);
	height:auto !important;
	background-position:0 0.2em;
	background-size:15px auto;
	font-size:14px;
	font-size:0.88rem;
	line-height:1.5;
}

#mainArea .listNews li a:hover { opacity:1; }

#news .more {
	font-size:14px;
	font-size:0.88rem;
}

#news .more a {
	padding:9px 15px 9px 35px;
}

#news .more a:hover { opacity:1; }


/* ===== Club ===== */
#club {
	padding:30px 0;
	background-size:1px auto;
}

#club .container {
	margin:0 30px;
	width:auto;
}

#club .listClub {
	margin:0;
}

#club .listClub li {
	float:none;
	margin-bottom:15px;
	padding:0;
	width:auto;
}

#club .listClub li:last-child { margin-bottom:0; }

#club .listClub li .bg {
	top:13px;
	left:13px;
	padding-top:12.5%;
	width:calc(100% - 26px);
	height:calc(100% - 26px);
	font-size:25px;
	font-size:1.57rem;
}

#club .listClub li.seikokai .bg { padding-top:8%; }

#club .listClub li .sub {
	margin-top:10px;
	font-size:13px;
	font-size:0.82rem;
}

#club .listClub li a:hover .image { transform:scale(1); }

}