@charset "Shift_JIS";

.GridSet *{
box-sizing: border-box;
}
#Contents {
overflow: hidden;
}
#schedule {
padding-bottom: 100px;
position: relative;
}
#team {
background: #f5d400;
padding-bottom: 50px;
position: relative;
overflow: hidden;
}
#highlights {
position: relative;
}
.bgLogoTop {
position: absolute;
right: -40px;
top: 30px;
opacity: 0.05;
}

@media screen and (max-width: 994px) {
.JS #Contents {
padding-right: 0;
padding-left: 0;
}
.JS .GridSet {
margin: 0;
}
.JS .Grid4 {
padding: 0 15px;
}
#schedule {
padding-bottom: 0px;
}
}

/* メインビジュアル */
.mainVisualArea {
position: relative;
background: #ffff00;
border-top: solid 5px #ffe600;
border-bottom: solid 5px #ffe600;
}
.mainVisualImg{
position: relative;
}
@media screen and (max-width: 994px) {
.JS .mainVisualArea {
margin: 0 -15px;
padding: 0 15px;
}
}

/* セクションタイトル */
.sectionTitleSet {
margin-bottom: 50px;
position: relative;
}
.indexTitle {
position: relative;
background: none;
margin: 0;
padding: 15px 0 0;
z-index: 0;
}
.indexTitle::before {
content: "";
display: block;
width: 1420px;
height: 800px;
transform: skew(290deg);
background-color: #232a35;
background: linear-gradient(19deg, #111923 83%, #6c7e90);
position: absolute;
top: 0;
left: -900px;
transform-origin: top left;
z-index: -1;
}
.indexTitle::after {
content: "";
display: block;
width: 1436px;
height: 800px;
transform: skew(290deg);
background-color: #ffe600;
position: absolute;
top: 0;
left: -900px;
transform-origin: top left;
z-index: -2;
}
.enTitle {
font-style: italic;
font-size: 48px;
font-weight: bold;
color: #fff;
background: none;
padding: 0;
}
.jpTitle {
color: #ffe600;
font-size: 26px;
letter-spacing: 0.1em;
background: none;
padding: 0;
}
#team .indexTitle::after {
content: "";
display: block;
width: 1436px;
height: 800px;
transform: skew(290deg);
background: #fff;
position: absolute;
top: 0;
left: -900px;
transform-origin: top left;
z-index: -2;
}

@media screen and (max-width: 767px) {
.indexTitle::before {
width: 1220px;
}
.indexTitle::after,
#team .indexTitle::after {
width: 1244px;
}
.JS h2.indexTitle {
margin: 0;
}
.enTitle {
font-size: 28px;
}
.jpTitle {
font-size: 18px;
}
}

/* 共通モジュール */
.contentBox {
position: relative;
z-index: 1;
background: #fff;
border: solid 1px #eee;
border-radius: 6px;
box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.25);
margin-bottom: 20px;
padding: 12px;
box-sizing: border-box;
}
.flxSet {
display: flex;
gap: 10px;
}
.boxHalf {
width: calc((100% - 20px)/2);
}
.moreTextLink a {
text-decoration: none;
padding: 0 0 0 0;
color: #fff;
position: relative;
display: block;
width: 230px;
height: 40px;
background: linear-gradient(44deg, #111923 50%, #6c7e90);
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.25);
}
.moreTextLink a::before {
content: "";
display: block;
width: 6px;
height: 6px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%) rotate(45deg);
}
.moreTextLink a:hover {
opacity: 0.85;
}
.moreTextLink a:hover::before {
right: 17px;
}

@media screen and (max-width: 767px) {
.flxSet {
flex-direction: column;
}
.boxHalf {
width: 100%;
}
}

/* SCHEDULE */
.contentBox.scheduleBox{
margin-bottom: 30px;
}
.contentBox.scheduleBox .moreTextLink{
margin-top:40px;
}
.scheduleTabs {
display: flex;
justify-content: space-between;
}
.tabBtn {
background: #eee;
border: none;
padding: 12px 24px;
font-weight: 700;
cursor: pointer;
transition: 0.3s;
}
.tabBtn.active {
background: #111923;
color: #fff;
}
.tabBtn.ekiden.active {
background: #004596;
color: #fff;
}
.tabBtn.track.active {
background: #BB000B;
color: #fff;
}
.scheduleItem {
display: flex;
background: #f7f7f7;
margin-top: 10px;
}
.dateBox {
box-sizing: border-box;
background: #f5d400;
width: 180px;
text-align: center;
padding: 15px 10px;
font-weight: bold;
}
.dateBox .day {
font-size: 64px;
line-height: 1;
}
.dateBox .week {
font-size: 20px;
display: block;
}
.infoBox {
padding: 20px;
flex: 1;
display: flex;
justify-content: space-between;
}
.infoBox h3 {
margin: 0 0 10px;
font-size: 18px;
}
.infoBox ul {
list-style: none;
padding: 0;
margin: 0;
}
.infoBox li {
font-size: 14px;
margin-bottom: 4px;
}
.resultBtn {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background: #111923;
color: #fff !important;
text-decoration: none !important;
width: 140px;
height: 30px;
line-height: 30px;
padding: 0.25em 1em 0.25em 0.25em;
position: relative;
}
.resultBtn::after {
position: absolute;
top: 50%;
right: 1em;
width: 0.5em;
height: 0.5em;
transform: translateY(-50%) rotate(45deg);
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
content: "";
}
.resultBtn:hover {
opacity: 0.7;
}
a.resultBtn[href=""] {
pointer-events: none;
color: inherit;
text-decoration: none;
cursor: default;
background: #ccc;
}
.tabContent {
display: none;
margin-bottom: 20px;
}
.tabContent.active {
display: block;
}
.tabContent#ekiden {
border-top: solid 2px #004596;
}
.tabContent#track {
border-top: solid 2px #BB000B;
}

@media (max-width:768px) {
.scheduleItem {
flex-direction: column;
}
.dateBox {
width: 100%;
display: flex;
justify-content: center;
gap: 10px;
}
.dateBox .day {
font-size: 28px;
}
.infoBox {
padding: 15px;
flex-direction: column;
gap: 10px;
}
.infoBox h3 {
font-size: 16px;
}
}

/* team */
.playerSliderSet {
text-align: right;
margin-bottom: 50px;
padding: 62px 12px 12px;
}
.playerSliderOuter {
max-width: 965px;
margin: 0 auto 40px;
}
.playerSlider {
width: 100%;
}
.playerCard {
padding: 10px;
}
.playerLink {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none !important;
color: #111923 !important;
background: #fff;
}
.playerImg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.playerNameLabel {
background: #111923;
display: flex;
width: 100%;
flex-direction: column;
gap: 0px;
padding: 7px 0;
color: #fff;
transition: all 0.3s;
}
.playerNameJp {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
text-align: center;
margin-bottom: 4px;
}
.playerNameEn {
margin: 0;
font-size: 14px;
line-height: 1.2;
opacity: .75;
text-align: center;
}
.playerSlider .slick-list {
margin: 0 -10px;
padding: 0 !important;
}
.playerSlider .slick-slide {
margin: 0 20px;
padding: 0 0 0;
box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.25);
}
.playerSlider .slick-slide:hover {
transform: translateY(-5px);
opacity: 0.85;
transition: all 0.3s;
}
.playerArrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border: none;
background: none;
cursor: pointer;
z-index: 999;
}
.playerArrow:hover {
opacity: 0.7;
}
.playerPrev {
right: 65%;
}
.playerNext {
left: 65%;
}
.playerArrow::before {
content: "";
display: block;
width: 10px;
height: 10px;
border-top: 3px solid #111923;
border-right: 3px solid #111923;
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%) rotate(225deg);
}
.playerNext::before {
left: 46%;
transform: translate(-50%, -50%) rotate(45deg);
}
.playerSliderOuter .slick-dots {
display: flex;
justify-content: center;
gap: 30px;
margin: 20px 0;
}
.playerSliderOuter .slick-dots li button {
display: block;
width: 50px;
height: 6px;
background: #111923;
text-indent: -9999px;
-webkit-transform: skewX(-30deg);
-ms-transform: skewX(-30deg);
transform: skewX(-30deg);
-webkit-transition: all 0.3s 0s ease;
-o-transition: all 0.3s 0s ease;
transition: all 0.3s 0s ease;
border: none;
outline: none;
cursor: pointer;
opacity: 0.3;
}
.playerSliderOuter .slick-dots li.slick-active button {
opacity: 1;
}
.playerSliderOuter .slick-dots li:hover {
opacity: 0.7;
}

@media (max-width:768px) {
.playerSlider .slick-slide {
margin: 0 10px;
}
.playerSliderOuter .slick-dots {
gap: 15px;
}
.playerSliderOuter .slick-dots li button {
width: 20px;
height: 6px;
}
.playerPrev {
right: 97%;
}
.playerNext {
left: 97%;
}
}

.teamIntroduction{
width: 100%;
border-radius: 6px;
background: #fff;
overflow: hidden;
position: relative;
box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.25);
}
.teamIntroduction::before{
content: "";
display: block;
width: 1420px;
height: 800px;
transform-origin: top left;
transform: skew(290deg);
background-color: #F4F4F4;
position: absolute;
top: 0;
left: -900px;
z-index: 0;
transition: background-color .3s;
}
.teamIntroduction:hover:before{
background-color: #FFFF00;
}
.teamIntroductionInner{
position: relative;
z-index: 1;
}
.teamIntroductionInner a{
display: flex;
max-height: 160px;
text-decoration: none;
}
.teamIntroductionTitle {
flex: 1;
padding: 16px 18px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.teamIntroductionTitleEn{
font-style: italic;
font-size: 40px;
font-weight: bold;
line-height: 1.3em;
color: #111923;
background: none;
padding: 0;
}
.teamIntroductionTitleJa{
color: #111923;
font-size: 22px;
font-weight: bold;
line-height: 1.3em;
letter-spacing: 0.1em;
background: none;
padding: 0;
}
.teamIntroductionImg {
flex: 0 0 42%;
max-width: 42%;
text-align: right;
}
.teamIntroduction img {
width: auto;
height: 100%;
object-fit: contain;
display: block;
margin: 0 0 0 auto;
}

@media (max-width:768px) {
.teamIntroductionTitleEn{
font-size: 24px;
}
.teamIntroductionTitleJa{
font-size: 18px;
}
}

/* gallery */
.gallerySlideList li img {
width: 100%;
}
#gallery {
background: #111923;
color: #fff;
padding: 20px 0 0;
}

/* snsList */
.bgSNS {
background: #111923;
color: #fff;
padding: 50px 15px;
text-align: center;
border-bottom: 4px solid #f5d400;
}
.snsTextTitle {
font-size: 32px;
font-style: italic;
line-height: 1.0;
color: #fff;
margin-bottom: 35px;
letter-spacing: 0.1em;
position: relative;
}
.snsTextTitle::after {
content: "";
width: 290px;
height: 1px;
background: #fff;
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
display: inline-block;
}
.snsList {
display: flex;
justify-content: center;
gap: 30px;
}
.snsList li a img {
width: 50px;
}
.snsList li a:hover {
opacity: 0.7;
}
.laurusChList {
display: flex;
flex-direction: column;
gap: 20px;
}
.laurusChList li {
border-top: solid 1px #ddd;
padding: 10px 0;
}
.laurusChList li a {
display: flex;
gap: 10px;
align-items: center;
color: #111923;
text-decoration: none;
}
.laurusChList li a:hover {
text-decoration: underline;
opacity: 0.7;
}
.laurusChList li a span {
font-weight: bold;
}

/* highlights */
#highlights .flxSet {
margin-bottom: 50px;
}
.topicsImgList {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px 20px;
}
.topicsImgList img {
width: 110px;
height: auto;
}

@media screen and (max-width: 767px) {
.snsList li a img {
width: 40px;
}
.JS h2 {
margin: 0;
}
}

.linkPanelSet{
display: flex;
flex-direction: row;
gap: 20px;
flex-wrap: wrap;
}
.linkPanel{
width: calc((100% - 60px) / 4);
border: 1px solid #eee;
border-radius: 6px;
min-height: 150px;
background-color: #FFFFFF;
box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.25);
position: relative;
overflow: hidden;
}
.linkPanel a{
display: block;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
z-index: 2;
}
.linkPanel a:link,
.linkPanel a:visited,
.linkPanel a:active{
text-decoration: none;
color: #FFFFFF;
}
.linkPanel a[href=""]{
pointer-events: none;
}
.linkPanelBG{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.linkPanelBG img{
width: 100%;
height: 100%;
object-fit: cover;
}
.linkPanelBG::before{
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0,0,0,.5);
top: 0;
left: 0;
z-index: 1;
transition: all .3s;
}
.linkPanel a:hover{
color: #222222;
}
.linkPanel a:hover+.linkPanelBG::before{
background-color: rgba(255,255,0,0.85);
}

@media (max-width:768px) {
.linkPanel{
width: calc((100% - 20px) / 2);
}
}

.relatedSites{
padding-top: 60px;
}
.athleteList{
margin-bottom: 50px;
}
.athletes{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
padding: 40px 20px 20px;
margin-bottom: 40px;
}
.athleteItem{
width: calc((100% - 60px) / 5);
position: relative;
overflow: hidden;
}
.athleteItem a{
display: block;
}
.athleteItem img{
width: 100%;
transition: filter .2s;
}
.athleteItem a:hover img{
filter: drop-shadow(10px 0px 0px #e99700)
}
.athleteItem .playerNameLabelPC{
position: absolute;
bottom: 30px;
left: 0;
background-color: #111923;
padding: 10px 15px;
transform: skewX(-15deg) rotate(-15deg) translate(-150%, 100%);
pointer-events: none;
transition: transform .35s cubic-bezier(.2,.7,.2,1);
filter: drop-shadow(5px 5px 0px #e99700)
}
.athleteItem .playerNameLabelPC div:nth-child(1){
color: #FFFFFF;
font-size: 115%;
line-height: 1.2em;
margin-bottom: 5px;
}
.athleteItem .playerNameLabelPC div:nth-child(2){
color: #D9D9D9;
font-size: 90%;
line-height: 1em;
white-space: nowrap;
}
.athleteItem:hover .playerNameLabelPC{
transform: skewX(-15deg) rotate(-15deg) translate(0, 0);
}

@media screen and (max-width: 900px) {
.athleteItem .playerNameLabelPC div:nth-child(1){
font-size: 90%;
}
.athleteItem .playerNameLabelPC div:nth-child(2){
font-size: 70%;
}
}

.topicsSection{
margin-bottom: 50px;
}
.topicsSectionInner{
padding: 12px;
overflow: hidden;
position: relative;
z-index: 0;
border: solid 1px #eee;
border-radius: 6px;
box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.25);
}
.topicsSectionInner h2{
background-image: none;
position: relative;
}
.topicsSectionInner h2 span{
font-size: 125%;
background-color: transparent;
}
.topicsSectionInner::before{
content: "";
display: block;
width: 1420px;
height: 800px;
transform: skew(290deg);
background-color: #F4F4F4;
position: absolute;
top: 0;
left: -900px;
transform-origin: top left;
z-index: 0;
}
.topicsSectionInner .ResponsiveLinkListStyle{
position: relative;
}
.topicsSectionInner .DateListStyle2{
padding: 0 20px;
}
.topicsSection .DateListStyle2 dt:first-child{
margin-top: 5px;
}
.topicsSection .DateListStyle2 dt,
.topicsSection .DateListStyle2 li{
font-size: 115%;
}
.topicsSection .DateListStyle2 dt{
font-weight: 700;
}
.topicsSection .DateListStyle2 dd{
margin: 0 0 0 11em;
}

@media screen and (max-width: 767px) {
.topicsSectionInner{
border: none;
}
.topicsSectionInner h2 span{
font-size: 100%;
}
}

/**slick slide**/
.mainVisualImg .slideArrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border: none;
background: none;
cursor: pointer;
z-index: 999;
}
.mainVisualImg .slideArrow.slide-Prev{
left: -80px;
left: clamp(-80px, calc(10px + -95 * ((100vw - 965px) / 385)), 10px);
}
.mainVisualImg .slideArrow.slide-Next{
right: -80px;
right: clamp(-80px, calc(10px + -95 * ((100vw - 965px) / 385)), 10px);
}
.slideArrow::before {
content: "";
display: block;
width: 10px;
height: 10px;
border-top: 3px solid #111923;
border-right: 3px solid #111923;
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%) rotate(225deg);
}
.slide-Next::before {
left: 46%;
transform: translate(-50%, -50%) rotate(45deg);
}
.mainVisualImg .slick-dots{
position: absolute;
right: 20px;
bottom: 10px;
display: flex;
gap: 10px;
}
.mainVisualImg .slick-dots li{
list-style: none;
}
.mainVisualImg .slick-dots li button{
font-size: 0;
line-height: 0;
border: 1px solid #666;
background: #f5d400;
width: 12px;
height: 12px;
border-radius: 50%;
padding: 0;
cursor: pointer;
}
.mainVisualImg .slick-dots li button:hover{
background-color: rgba(255, 255, 0, .75);
}
.mainVisualImg .slick-dots li.slick-active button{
background: #000;
border: 1px solid #666;
}

@media screen and (max-width: 965px) {
.mainVisualImg .slideArrow{
background-color: rgba(255, 255, 0, .75);
border-radius: 6px;
}
.mainVisualImg .slideArrow:hover{
background-color: rgba(255, 255, 0, .95);
}
}