@charset "utf-8";
/* =============================================================================
	トップページ
   ========================================================================== */

/*共通*/
h2 {text-align: center;font-size: 25px;font-weight: bold;margin-bottom: 40px;letter-spacing: 0.05em;}
section {padding: 80px 0;}
section h2 {font-size: 45px;}
section h2 span {font-size: 20px;display: block;}
.moreBtn {text-align: center;}
.moreBtn a {display: inline-block;width: 127px;height: 35px;line-height: 35px;color: #fff;font-size: 15px;position: relative;background: #e84709;border-radius: 3px;}
.moreBtn a:hover {
    background: #3296bf;
}
ul li .role {justify-content: flex-start;margin-bottom: -10px;}
.flex {display: -webkit-box;display: -moz-box;display: box;display: -webkit-flex;}
.flex_first {display: -webkit-box;display: -moz-box;display: box;display: -webkit-flex;}

/* キーイメージ */
.topKeyimages {background: url(../images/top/bgKeyimages.jpg) no-repeat top/cover;height: 40vw;position: relative;margin-top: 120px;}

/* 選手 */
#player_list {background: #00aeac;background: linear-gradient(180deg, #00aeac 0%, #00aeac 50%, #fff 50%, #fff 100%);}
#player_list .wrap {width: 100%;max-width: 100%;padding: 0;}
#player_list .wrap ul li .prof {padding: 5px 15px;}
#player_list h2 {color: #fff;margin-bottom: 70px;}
#player_list .responsive {position: relative;overflow: hidden;margin: auto;padding: 0 0 100px;}
#player_list .slide-arrow {position: absolute;}
#player_list .prev-arrow {bottom: 20px;left: 49%;width: 40px;height: 40px;}
#player_list .next-arrow {bottom: 20px;left: 53%;width: 40px;height: 40px;}
#player_list ul.responsive li {max-width: fit-content;}
#player_list ul.responsive li a {background-color: #3296bf;display: block;padding: 7px;border-radius: 8px;}
#player_list ul.responsive li .role {font-size: 40px;font-family: Bahnschrift, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;margin: 0 5px 0 0;color: #e84709;font-weight: bold;}
#player_list ul li p {font-size: 40px;font-family: Bahnschrift, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;margin: 0 5px 0 0;color: #e84709;}
#player_list ul.responsive li p.english {color: #fff;font-family: "Arial", "Helvetica", "sans-serif";font-weight: 900;margin-top: -5px;font-size: 17px;}
#player_list ul.responsive li .name {font-size: 14px;color: #0058a4;letter-spacing: -0.5px;color: #fff;}
#player_list ul.responsive li .inner_a::before {content: "";position: absolute;bottom: 0;left: 0;right: 0;height: 100%;background: #FFF;}
#player_list ul.responsive li .inner_a {position: relative;color: inherit;transition: .3s;opacity: 1.0;border: 3px solid #58bee7;border-radius: 5px;}
#player_list ul.responsive li .img img {z-index: 9;position: relative;}
#player_list ul.responsive li .inner_a::after {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	content: "";
	background: #ff9500;
	/*背景色*/
	width: 0;
	height: 100%;
	transition: .3s;
}

#player_list ul.responsive li .inner_a:hover {
	color: white;
}

/***** ホバー時の背景 *****/
#player_list ul.responsive li .inner_a:hover:after {
	width: 100%;
}

#player_list ul.responsive li p br {display: none;}
#player_list ul.responsive li {width: calc((100% - 40px) / 4);display: inline-block;margin: 0 10px;}
#player_list .responsive {margin-left: -100px;}
#player_list ul.responsive li {	padding: 10px 15px;}

/* 試合結果 */
#game {background: #00aeac;padding: 80px 0;}
#game .wrap {max-width: 100%;width: 100%;}
#game h2 {color: #fff;line-height: 1;}
#game .responsive {position: relative;max-width: 1600px;overflow: hidden;margin: auto;padding: 0 0 0px;	display: flex;	justify-content: center;gap:1em;}
#game .slide-arrow {position: absolute;}
#game .prev-arrow {bottom: 43px;left: 39%;width: 40px;height: 40px;}
#game .next-arrow {bottom: 43px;left: 60%;width: 40px;height: 40px;}
#game .box {border-radius: 15px;background: #fff;}
#game .game-info {background: #1c7e8d;color: #fff;border-radius: 15px 15px 0 0;display: flex;justify-content: flex-start;align-items: center;}
#game .game-info .day {border-right: 1px solid #fff;font-weight: bold;line-height: 1.6em;padding: 0 10px;}
#game .game-info .day .year {font-size: 13px;padding-top: 5px;display: inline-block;}
#game .game-info .day .month-day {font-size: 30px;}
#game .game-info .day .time {font-size: 18px;}
#game .game-info .place {font-size: 16px;font-weight: bold;padding: 10px;}
#game .item .gamebox {text-align: center;padding: 15px 10px 0;display: flex;justify-content: center;align-items: center;gap:0.5em;}
#game .item .gamebox .point {font-size: 44px;	font-weight: bold;	line-height: 2em;}
#game .item .gamebox .point .win {	color: #e1143b;}
#game .item .gamebox img {	vertical-align: middle;	width: 90px;}
#game .moreBtn{padding: 0 0 15px;}
#game .btn {text-align: center;margin-top: 25px;z-index: 999;}
#game .btn a {color: #fff;font-weight: bold;font-size: 20px;display: inline-block;cursor: pointer;z-index: 999;position: relative;}
#game .btn a:after {
    position: absolute;
	content: "";
	background: url(../images/top/allow2.png) no-repeat center/contain;
	width: 10px;
	height: 15px;
	top: 8px;
	right: -22px;
}
#game .gameresult_end {font-size: 1.5em;font-weight: bold;padding: 30px;border: 2px solid #00aeac;text-align: center;background: #fff;color: #00aeac;max-width: 560px;margin: auto;}
#game ul .item {width: 385px;}

#nextgame {background: #f5f5f5;}
#nextgame .wrap {max-width: 1200px;width: 100%;margin: 0 auto;}
#nextgame h2 {color: #e84709;line-height: 1em;}
#nextgame .flex {justify-content: space-between;}
#nextgame .flex_home {display: -webkit-flex;justify-content: space-between;align-items: center;}
#nextgame .box {background: #fff;border-radius: 10px;padding:20px;}
#nextgame .next-day {font-size: 22px;text-align: center;font-weight: bold;}
#nextgame .box .center {font-size: 30px;font-weight: bold;}
#nextgame .box .teamname {font-size: 18px;font-weight: bold;}
#nextgame .box-inner {padding-bottom: 20px;display: flex;text-align: center;justify-content: space-around;align-items: center;}
#nextgame .box-inner .team-logo {width: 100%;height: 230px;margin: auto;display: flex;flex-direction: column;justify-content: center;}
#nextgame .box-inner .left-team,
#nextgame .box-inner .right-team{width: 40%;height: 250px;}
#nextgame .next-day-cont {border-top: 1px solid #00aeac;padding:20px 20px 0;}
#nextgame .next-day-cont .next-name {font-weight: bold;}
#nextgame .next-day-cont .stadium{align-items: center;}
#nextgame .next-day-cont .next-place {font-weight: normal;font-size: 15px;padding-left: 10px;}
#nextgame .next-day-cont .mapBtn a {display: inline-block;padding: 10px 20px;border-radius: 3px;background: #e84709;color: #fff;font-weight: bold;}
.home .day-wrap {font-size: 15px;width: 40%;border-right: 1px solid #00aeac;}
#nextgame .home .box {padding: 20px;}
.home .box-inner2 {border-top: 1px solid #00aeac;padding: 20px 0;}
#nextgame .home .box-inner2 .center {font-size: 20px;}
.home .opponent {	width: 50%;align-items: center;display: inline-flex;}
.home .center {width: 8%;padding-left: 10px;}
.home .opponent-img {width: 115px;height: 55px;object-fit: contain;vertical-align: middle;padding: 0 10px;}
.home .opponent-img img {height: 100%;width: 100%;object-fit: contain;}
.home li:last-child {border-bottom: 1px solid #00aeac;}
#nextgame .btn {text-align: right;font-weight: bold;font-size: 18px;position: relative;padding-right: 21px;margin-top: 20px;}
#nextgame .btn:after {position: absolute;content: "";background: url(../images/top/allow.png) no-repeat center/contain;width: 9px;height: 14px;right: 0;top: 6px;}
#nextgame .no_homegame {font-size: 1.5em;font-weight: bold;padding: 30px;border: 2px solid #e84709;text-align: center;background: #fff;color: #e84709;}
#nextgame .no_game {font-size: 1.5em;font-weight: bold;padding: 30px;border: 2px solid #e84709;text-align: center;background: #fff;color: #e84709;}

#nextgame .next,
#nextgame .home {width: 48%;}

/* ファンクラブ */
#fan {background: #00aeac;}
#fan .wrap {max-width: 100%;width: 100%;padding: 0;}
#fan h2 {color: #fff;}
#fan p {color: #fff;text-align: center;line-height: 35px;font-size: 18px;}
#fan p.aten_fan {color: #FD0004;font-weight: bold;}
#fan .fan-link {margin: 0 auto;width: fit-content;display: block;margin-top: 30px;}


/* トピックス */
#topic h2 {color: #e84709;text-align: center;line-height: 1em;}
#topic .wrap {max-width: 1200px;width: 100%;margin: 0 auto;padding: 40px 0;}
#topic li img {border: 1px solid #00aeac;border-radius: 10px;height: 100%;width: 100%;object-fit: contain;}
#topic .day-wrap {padding-top: 15px;justify-content: left;align-items: anchor-center;display: flex;}
#topic .cat {padding: 0px 25px;border: 1px solid #00aeac;color: #00aeac;display: block;font-weight: bold;border-radius: 30px;width: fit-content;margin-right: 10px;}
#topic .day {font-weight: bold;font-size: 15px;color: #6b6b6b;}
#topic .ttl {padding-top: 1em;padding-bottom: 20px;font-weight: bold;width: 95%;}
#topic a.read-more {display: flex;justify-content: right;align-items: anchor-center;margin-top: auto;}
#topic .more-news {box-sizing: border-box;display: block;position: relative;width: 25px;height: 25px;border: solid 2px #e84709;border-radius: 50%;background-color: #fff;-webkit-transition: 0.2s ease-in-out;-moz-transition: 0.2s ease-in-out;-o-transition: 0.2s ease-in-out;transition: 0.2s ease-in-out;float: right;margin-left: 20px;}
#topic .more-news:before {
	content: "";
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 40%;
	width: 8px;
	height: 8px;
	border: 2px solid #e84709;
	transform: rotate(45deg);
	transform-origin: top right;
	border-left: 0;
	border-bottom: 0;
}

#topic .news-cont {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: stretch;}
#topic a.read-more:hover .more-news {border: solid 2px #e84709;background-color: #e84709;}
#topic a.read-more:hover .more-news:before {
    content: "";
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 40%;
	width: 8px;
	height: 8px;
	border: 2px solid #fff;
	transform: rotate(45deg);
	transform-origin: top right;
	border-left: 0;
	border-bottom: 0;
}
#topic .btn_orange {position: relative;margin: 0 auto;margin-top: 3em;margin-bottom: 3em;color: #fff;font-size: 15px;background-color: #e84709;width: fit-content;padding: 10px 60px;border-radius: 5px;display: block;}
#topic .btn_orange:after {
	content: "";
	position: absolute;
	z-index: 10;
	top: 50%;
	right: 25px;
	width: 10px;
	height: 10px;
	border: 1px solid #fff;
	transform: rotate(45deg);
	transform-origin: top right;
	border-left: 0;
	border-bottom: 0;
}
#topic .btn_orange:hover {
	background-color: #10a0da;
}

#topic li .img {aspect-ratio: 9 / 9;}
#topic .day-wrap {justify-content: left;align-items: anchor-center;display: flex;}
#topic li {width: calc(100% - 79%);display: flex;flex-direction: column;}
#topic .no-post{font-size: 1.5em; font-weight: bold; padding: 30px; border: 2px solid #e84709; text-align: center; background: #fff; color: #e84709;max-width: 560px;margin: auto;}

/* お知らせ */
#news h2 {color: #e84709;text-align: left;line-height: 1em;}
#news .wrap {max-width: 1200px;width: 100%;margin: 0 auto;padding: 40px 0;padding-bottom: 70px;}
#news .cat-btn li {text-align: center;margin: 10px 0;border-radius: 5px;}
#news .cat-btn li:hover {background: #ffa647;color: #fff;transition: 0;}
#news .cat-btn li a {font-weight: bold;color: #00aeac;display: block;border: 1px solid #00aeac;border-radius: 5px;padding: 10px;}
#news .cat-btn li a:hover {color: #fff;transition: 0;border: 1px solid #ffa647;}
#news .news-cont {border-top: 3px solid #3296bf;border-bottom: 3px solid #3296bf;padding-bottom: 30px;}
#news .news-cont li {align-items: center;padding-bottom: 20px;padding-top: 30px;border-bottom: 1px dashed #a0a0a0;}
#news .news-cont li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
#news .news-cont .day-wrap {line-height: 1em;padding-right: 20px;text-align: center;}
#news .news-cont .day-wrap .year {font-size: 16px;line-height: 1em;}
#news .news-cont .day-wrap .day {font-size: 40px;line-height: 1em;display: block;font-weight: bold;}
#news .news-cont .cat {color: #3296bf;font-weight: bold;border: 1px solid;padding: 0 10px;}
#news .news-cont .ttl {font-size: 17px;}

#news .left {width: 15%;}
#news .right {	width: 65%;}
#news .news-cont .flex {align-items: center;}
#news .news-cont .day-wrap {width: 15%;}
#news .news-cont .ttl {	width: 65%;}


/* tictok */
#tictok {background: url(../images/top/bg-sns.png) no-repeat center/cover;}
#tictok .wrap {max-width: 930px;}
#tictok h2 {text-align: left;}
#tictok .btn {display: block;color: #fff;font-size: 15px;background-color: #10a0da;width: fit-content;padding: 8px 22px;border-radius: 5px;}
#tictok .btn:hover {	background-color: #e84709;}
#tictok .btn_orange {display: block;margin: 0 auto;margin-top: 3em;color: #fff;font-size: 15px;background-color: #e84709;width: fit-content;padding: 8px 40px;border-radius: 5px;}
#tictok .btn_orange:hover {background-color: #10a0da;}
#tictok .responsive {position: relative;overflow: hidden;margin: auto;padding: 0 0 0px;max-width: 895px;}
#tictok ul.responsive li {width: 10%;display: inline-block;margin: 0 30px;}
#tictok .arrows {position: relative;}
#tictok .slide-arrow {position: absolute;}
#tictok .prev-arrow {position: absolute;margin-top: 7em;left: -50px;width: 40px;height: 40px;z-index: 99;}
#tictok .next-arrow {margin-top: 7em;right: -50px;width: 40px;height: 40px;}
#tictok .sb-grid-wrapper {	position: relative;overflow: hidden;margin: auto;padding: 0 0 0px;max-width: 870px;grid-template-columns: repeat(3, 1fr);}

.sb-feed-wrapper,
.sbtt-feed-container,
.sb-feed-posts {
	padding: 0;
}
#tictok .ttl-cont {justify-content: space-between;align-items: baseline;margin: 0 35px;}


/* sns */
#sns {background: #f5f5f5;padding-top: 50px;}
#sns h2 {text-align: center;}
#sns .ttl-cont .btn {position: relative;padding-right: 30px;font-weight: bold;font-size: 18px;}
#sns .ttl-cont .btn:after {
	position: absolute;
	content: "";
	background: url(../images/top/allow.png) no-repeat center/contain;
	width: 9px;
	height: 14px;
	top: 6px;
	right: 0;
}
#sb_instagram #sbi_load {margin-top: 20px;}
#sb_instagram #sbi_load .sbi_load_btn,
#sb_instagram .sbi_follow_btn a {padding: 8px 45px !important;}
#sns .x-cont iframe {height: 500px !important;}
#sns .ttl-cont {justify-content: space-between;align-items: center;}
#sns .insta-cont {justify-content: space-between;}
#sns .insta-cont li {margin: 0 auto;padding: 66px 10em;font-size: 40px;border: 1px solid;color: #00aeac;font-weight: bold;}
.face_k {margin: 0 auto;padding: 220px 175px;font-size: 40px;border: 1px solid;color: #00aeac;font-weight: bold;background: #fff;}
#sns .face,
#sns .sns_insta{margin-bottom: 5em;}
#sns .x {width: 48%;}

/*スマホ表示*/
@media screen and (max-width: 767px) {
	/* 共通 */
	section h2 {font-size: 24px;margin-bottom: 20px;}
	h2 span img {padding-bottom: 14px;}
	.topKeyimages {background: url(../images/top/bgKeyimagesSP.jpg) no-repeat top/cover;height: 145vw;position: relative;margin-top: 70px;background-size: 100%;}
	section {padding: 40px 0;}
    
    #player_list h2 {color: #fff;margin-bottom: 30px;}
	#player_list ul.responsive li {display: inline-block;max-width: 210px;margin: 10px;}
	#player_list ul.responsive li a {padding: 5px;}
	#player_list .prev-arrow {bottom: 28px;left: 40%;width: 40px;height: 40px;}
	#player_list .next-arrow {bottom: 28px;left: 55%;width: 40px;height: 40px;}
	#player_list .responsive {width: 92vw;}
	#player_list ul li .role {display: flex;align-items: center;}
	#player_list ul li p {	font-size: 24px;}
	#player_list ul.responsive li .role {font-size: 24px;}
	#player_list ul.responsive li p.english {font-size: 15px;color: #FFF;line-height: 20px;}
	#player_list ul.responsive li .name {	font-size: 9px;	overflow-wrap: anywhere;	word-break: normal;	line-break: strict;}
	#player_list ul .slick-track {	display: flex;	}
	#player_list .wrap ul li .prof {	height: 100px;}
    
    #game{padding: 40px 0;}
    
    #game .responsive{flex-wrap: wrap;}
    #game .item .gamebox .point{font-size: 10vw;}
    #game.sec1 ul .item{width: 100%;}
    #game .prev-arrow {bottom: 48px;left: 30%;width: 30px;height: 30px;}
	#game .next-arrow {bottom: 48px;left: 40%;width: 30px;height: 30px;}
	#game .btn {text-align: right;padding-left: 0;padding-right: 50px;}
    #game .gameresult_end{font-size: 1.3em;font-weight: bold;padding: 30px 10px;border: 2px solid #00aeac;text-align: center;background: #fff;color: #00aeac;}
    #game .wrap{height: auto;flex-wrap: wrap;padding-top: 0;}
    #game .game-detaBox{width: 100%;}
    
    #nextgame .flex{flex-wrap: wrap;}
    #nextgame .next, 
    #nextgame .home{width: 100%;}
    #nextgame .box-inner{justify-content: center;}
    #nextgame .box-inner .left-team{display: none;}
    #nextgame .box-inner .right-team{height:40vw;width:65%;  }
    #nextgame .box-inner .team-logo{height: 35vw;}
    #nextgame .box .center{font-size:6vw }
    #nextgame .box .teamname{font-size:4vw; }
    #nextgame .next-day-cont{padding: 10px 0 0;}
    #nextgame .next-day-cont .next-place {display: block;padding-left: 0;}
	#nextgame .next-day-cont .mapBtn a {	display: block;	text-align: center;}
	.home {padding-top: 60px;}
	#nextgame .box-inner2 .flex {	display: flex;}
	#nextgame .home .box-inner2 .center {	font-size: 16px;}
	.home .day-wrap {	width: 39%;}
	.home .opponent {	width: 48%;display: block;text-align: center;}
	.home .opponent-img {width: 80%;padding: 0;margin: auto;display: inherit;}
	.home .opponent-img img {object-fit: contain;}
	.home .center {padding-left: 0;}
	#nextgame .no_game {font-size: 1.3em;font-weight: bold;padding: 30px;border: 2px solid #e84709;text-align: center;background: #fff;color: #e84709;}
	#nextgame .no_homegame {font-size: 1.3em;font-weight: bold;padding: 30px;border: 2px solid #e84709;text-align: center;background: #fff;color: #e84709;}
    
    #fan .wrap {padding: 0 30px;}
	#fan p {color: #fff;text-align: center;line-height: 35px;font-size: 14px;}
    
    #topic .wrap {max-width: 1200px;width: 100%;margin: 0 auto;padding: 40px 10px;padding-bottom: 70px;}
	#topic .news-cont {display: flex;flex-wrap: wrap;}
	#topic li {	width: 50%;	padding: 20px 5px;}
	#topic h2 {	text-align: center;padding-bottom: 0;}
	#topic .cat {padding: 0px 15px;font-size: 12px;}
	#topic .ttl {padding-top: 5px;padding-bottom: 10px;}
	#topic .btn_orange {margin-top: 3em;margin-bottom: 20px;}
    #topic .day-wrap{display: block;}
    #topic .no-post{ font-size: 1.3em;font-weight: bold; padding: 30px; border: 2px solid #e84709; text-align: center; background: #fff; color: #e84709;}
    
    #news .cat-btn {display: flex;justify-content: center;flex-wrap: wrap;margin-bottom: 20px;}
	#news .cat-btn li {text-align: center;margin: 10px 5px;border-radius: 5px;width: 30%;}
	#news .wrap {max-width: 1200px;width: 100%;margin: 0 auto;padding: 40px 15px;padding-bottom: 70px;}
	#news h2 {	text-align: center;	padding-bottom: 0;}
	#news .news-cont .ttl {font-size: 16px;}
	#news .news-cont .cat {display: inline-block;margin-bottom: 10px;}
	#news .news-cont .day-wrap {text-align: left;display: inline-block;}
    
    #tictok .wrap {padding: 0px 20px;}
	#tictok .flex {	display: flex;}
	#tictok .prev-arrow {	position: absolute;margin-top: 7em;left: 0;width: 40px;height: 40px;z-index: 99;}
	#tictok .next-arrow {margin-top: 7em;right: 0;width: 40px;height: 40px;z-index: 99;}
	#tictok .btn {display: block;color: #fff;font-size: 13px;background-color: #10a0da;width: fit-content;padding: 8px 22px;border-radius: 5px;align-self: center;}
	#tictok .btn_orange {font-size: 13px;}
	#tictok ul.responsive {margin-left: 20px;}
    
    #sns .insta-cont {display: flex;}
}



@media screen and (min-width: 769px) and (max-width: 1029px) {
	#topic .cat {
		padding: 0px 9px;
		border: 1px solid #10a0da;
		color: #00aeac;
		display: block;
		font-weight: bold;
		border-radius: 30px;
		width: fit-content;
		margin-right: 10px;
	}
}

@media only screen and (max-width: 768px) {
	#game.sec1 ul .item {display: inline-block;margin: 10px;}
	#player.sec4 ul li {display: inline-block;}
    .ticket .banner-close {bottom: calc(100px + 100px - 10px);right: calc(10px - 10px);position: fixed;width: 20px;height: 20px;z-index: 10000;display: inline-block;background: rgba(255, 255, 255, 0.9);border: none;border-radius: 50%;cursor: pointer;}
}