@charset "UTF-8";

.PCimg {
	display: block
}

.SPimg {
	display: none !important
}

body {
	position: relative;
	font-family: 'Noto Sans JP', sans-serif;
	color: #2A2A2A;
	z-index: 20;
}

#head {
	position: fixed;
	top: 0;
	width: 100%;
	left: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
	padding: 2em 0;
	z-index: 20;
}

.icon {
	position: absolute;
	width: 50px;
	left: 2em;
	top: 1em;
	transition-duration: 0.2s;
}

.icon:hover {
	opacity: 1;
	width: 60px;
	animation: 8s linear infinite rotation1;
}

.headlist {
	display: flex;
	justify-content: space-around;
	width: 50%;
	margin: 0 0 0 auto;
	font-family: "acumin-pro", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #fff;
}

.headlist a {
	color: #2a2a2a;
}

.headlist a:hover {
	opacity: 1;
	color: #004ba5;
}

.onlt .headlist a {
	color: #fff;
}

.onlt .headlist a:hover {
	opacity: 1;
	color: #004ba5;
}

#main {
	position: relative;
	clip-path: polygon(0 0, 100% 0%, 100% 43vw, 0% 100%);
}

#main h1 {
	position: absolute;
	z-index: 15;
	left: 6vw;
	max-width: 20vw;
	top: 6vw;
}

#news {
	background: #EFF2FA;
	position: relative;
	clip-path: polygon(0% 14vw, 100% 0%, 100% 100%, 0% 100%);
}

.newsInner {
	margin: 0 auto;
	max-width: 1000px;
	padding: 300px 0 100px;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	align-items: flex-start;
}

.bighead {
	font-family: "acumin-pro-extra-condensed", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 100px;
	line-height: 1em;
	display: inline-block;
	margin-bottom: 0;
	color: #2a2a2a;
	transition-duration: 0.2s;
}

.bighead span {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	display: block;
	text-align: center;
	line-height: 0px;
}

#news .bighead {
	width: 20%;
	text-align: center;
}

.news-flx {
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.newsitem {
	width: 31%;
	position: relative;
	padding: 1%;
}

.Lsize {
	width: 90%;
}

.newsitem a figure {
	background: #e7ff4b;
}

.newsitem a:hover {
	opacity: 1;
}

.newsitem a:hover img {
	opacity: 0.8;
}

.txtarea {
	position: absolute;
	bottom: 0;
	padding: 1em;
	color: #fff;
	width: 100%;
	box-sizing: border-box;
	left: 0;
}

.txtarea h4 {
	font-size: 14px;
	margin-bottom: 0;
}

.txtarea .day {
	font-size: 11px;
}

.newslink {
	display: block;
	width: 25%;
	margin-right: 1%;
	margin-top: 30px;
}

.newslink a {
	color: #3B60C1;
	padding: 1em;
	background: #fff;
	display: block;
	text-align: center;
	font-weight: bold;
}

.newslink a:hover {
	color: #fff;
	padding: 1em;
	background: #3B60C1;
	display: block;
	text-align: center;
	font-weight: bold;
	opacity: 1;
}

.line01 {
	position: absolute;
	top: 0;
	z-index: -1;
	left: -20vw;
}

.line01 path {
	stroke-dasharray: 4000px;
	stroke-dashoffset: 4000px;
}

.line01.is-animated path {
	stroke-dasharray: 4000px;
	stroke-dashoffset: 0;
	animation: line_move 2s;
}

@keyframes line_move {


	0% {

		stroke-dashoffset: 4000px;
	}


	100% {

		stroke-dashoffset: 0px;
	}


}

.profileInner {
	position: relative;
	clip-path: polygon(0 0, 100% 0%, 100% 43vw, 0% 100%);
}

.profileInner .bighead {
	color: #fff;
}

.proftxt {
	position: absolute;
	z-index: 15;
	top: 6vw;
	left: 6vw;
	width: 30vw;
	color: #fff;
}

.proftxt {
	position: absolute;
	z-index: 15;
	top: 6vw;
	left: 6vw;
	width: 30vw;
	color: #fff;
}

#profile .bighead {
	margin-bottom: 30px;
}

#profile .bighead {
	margin-bottom: 30px;
}

.name {
	font-size: 40px;
	margin-bottom: 0;
}

.proftxt p {
	font-size: 14px;
}

.snslink {
	display: flex;
}

.snslink div {
	margin-right: 15px;
}

.snslink div img {
	width: 30px;
}

#ball-area {
	position: relative;
}

#ball-area .line01 {
	top: -45vw;
	left: 0;
}

.ball-areaInner {
	display: flex;
	justify-content: space-around;
	margin: 0 auto;
	width: 1000px;
	max-width: 100%;
	padding: 50px 0 100px;
}

.ball-item {
	width: 45%;
	position: relative;
	text-align: center;
}

#result.ball-item {}

#gallery.ball-item {
	margin-top: 16vw;
}

.ball-item figure {
	margin-bottom: 25px;
	background: #e7ff4b;
	border-radius: 50%;
}

.ball-item figure {
	background-image: url("/common/images/ballbg.jpg");
	background-size: cover;
	background-position: top;
	max-width: 100%;
	overflow: hidden;
	position: relative;
}

.ball-item figure img {
	border-radius: 50%;
	transition-duration: 0.2s;
}

.ball-item .bighead {
	color: #2A2A2A;
}

.ball-item a:hover {
	opacity: 1;
}

.ball-item a:hover figure {
	animation: 8s linear infinite rotation1;
}

#gallery.ball-item a:hover figure {
	animation: 8s linear infinite rotation2;
}

.ball-item a:hover img {
	opacity: 0;
}

@keyframes rotation1 {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes rotation2 {
	0% {
		transform: rotate(-100deg);
	}

	100% {
		transform: rotate(260deg);
	}
}

.ball-item a:hover .bighead {
	color: #004ba5;
}

.contactInner a {
	display: flex;
	transition-duration: 0.2s;
}

.contactInner a:hover {
	opacity: 1;
}

.contactInner a:hover .contacttxt {
	background: #004ba5;
}

.contactInner a:hover .bighead {
	color: #fff;
}

.contacttxt {
	width: 50%;
	background: #E7FF4B;
	display: flex;
	align-items: center;
	justify-content: center;
	transition-duration: 0.2s;
}

.nlogo {
	text-align: center;
}

.spon .snslink {
	display: flex;
	justify-content: center;
	margin: 50px 0 30px;
}

.allr {
	background: #3B60C1;
	color: #fff;
	text-align: center;
	font-size: 13px;
}

.newslink:hover {
	background: #3B60C1;
	color: #fff;
}

.fadein {
	opacity: 0;
	transform: translateY(20px);
	transition: all 1s;
}

.fadein2 {
	opacity: 0;
	transform: translateY(0);
	transition: all 1s;
}

.slick-slide img {
	display: block;
	width: 100%;
}

.spon.spbtm {
	border-top: 1px solid #004ba5;
	padding: 0 0 50px;
	background: #fff;
}

.spbtm .sponInner {
	padding: 50px 0 100px;
}

.sponInner {
	width: 600px;
	margin: 0 auto;
	max-width: 95%;
}

.sponInner div {
	padding: 10px 0;
}

.spflx {
	display: flex;
	justify-content: space-between;
}

.opbt {
	display: none;
}

.topsp {
	margin-bottom: 20px;
}

.midsp {
	margin-bottom: 20px;
}

.spflx:last-child {
	justify-content: center;
}

.spflx:last-child figure {
	width: 25%;
}

@media print,
screen and (max-width: 768px) {
	.PCimg {
		display: none !important
	}

	.SPimg {
		display: block !important
	}

	/*==================================================
　5-2-2 2本線が×に
===================================*/

	/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
	.opbt {
		width: 100%;
		background: #fff;
		position: fixed;
		height: 60px;
		z-index: 20;
		display: block;
	}

	.opbt.active {
		background: none;
	}

	.openbtn {
		/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
		position: fixed;
		width: 100px;
		height: 80px;
		cursor: pointer;
		background: none;
		z-index: 20;
		max-width: 20%;
	}

	/*ボタン内側*/

	.openbtn span {
		display: inline-block;
		transition: all .4s;
		/*アニメーションの設定*/
		position: absolute;
		left: 13px;
		height: 2px;
		background-color: #2a2a2a;
	}

	.openbtn.active span {
		display: inline-block;
		transition: all .4s;
		/*アニメーションの設定*/
		position: absolute;
		left: 13px;
		height: 2px;
		background-color: #004ba5;
	}


	.openbtn span:nth-of-type(1) {
		top: 22px;
		width: 50%;
	}

	.openbtn span:nth-of-type(2) {
		top: 29px;
		width: 30%;
	}

	/*activeクラスが付与されると線が回転して×に*/

	.openbtn.active span:nth-of-type(1) {
		top: 20px;
		left: 16px;
		transform: translateY(6px) rotate(-45deg);
		width: 35%;
	}

	.openbtn.active span:nth-of-type(2) {
		top: 32px;
		left: 16px;
		transform: translateY(-6px) rotate(45deg);
		width: 35%;
	}

	.opbt .logo {
		text-align: center;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.opbt .logo img {
		width: 70%;
		max-width: 300px;
	}

	.icon {
		top: 1em;
		left: auto;
		right: 2em;
	}

	#head {
		background: #fff;
		height: 100%;
		opacity: 0;
		transition-duration: 0.2s;
		z-index: -1;
	}

	#head.active {
		opacity: 1;
		z-index: 20;
	}

	.headlist {
		width: 100%;
		flex-wrap: wrap;
		align-items: center;
		text-align: center;
		top: 15vh;
		position: relative;
	}

	.headlist div {
		width: 100%;
		font-size: 7vw;
		padding: 20px;
	}

	.onlt .headlist a,
	.headlist a {
		color: #004ba5;
	}

	#main h1 {
		top: auto;
		bottom: 6vw;
		max-width: 40vw;
	}

	.bighead {
		font-size: 50px;
	}

	.newsInner {
		padding: 100px 0;
		justify-content: center;
	}

	#news .bighead {
		width: 100%;
		margin-bottom: 30px;
	}

	.news-flx {
		width: 100%;
	}

	.newsitem {
		width: 48%;
	}

	.newslink {
		width: 80%;
	}

	.profileInner {
		clip-path: none;
	}

	.proftxt {
		width: 80%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#profile .bighead {
		width: 100%;
		text-align: center;
	}

	.snslink {
		justify-content: center;
	}

	.ball-areaInner {
		flex-wrap: wrap;
		padding: 50px 0;
	}

	.ball-item a {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ball-item figure {
		width: 50%;
		margin-right: 5%;
	}

	.ball-item .bighead {
		width: 30%;
	}

	.contactInner a {
		flex-wrap: wrap;
	}

	.contacttxt {
		width: 100%;
		padding: 50px 0 80px;
		clip-path: polygon(0 0, 100% 0%, 100% 73%, 0% 100%);
	}

	.line01 {
		display: none;
	}

	.ball-item {
		width: 100%;
		margin: 0;
	}

	#gallery.ball-item {
		margin-top: 10%;
	}

	#main {
		position: relative;
		clip-path: polygon(0 0, 100% 0%, 100% 164vw, 0% 100%);
	}

	.nlogo img {
		max-width: 36vw;
	}


}