/* common
-------------------------------------------- */
:root{
	--white:#ffffff;
	--black: #000000;
	--green:#C0C700;
	--gray-100:#EDEDED;
	--gray-200:#D4D6D9;
	--gray-300:#aeb1b7;
	--gray-400:#666666;
	--gray-500:#888888;
	--gray-600:#292B2E;
	--border-radius:0.3rem;
}
html {
    font-size: 0.625rem;
}
@media screen and (max-width: 768px) {
	html.is-fixed{
		position: fixed;
	}
}
body{
	font-size: 1.5rem;
    line-height: 1.75;
	font-family:"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}
input[type=text],input[type=email], input[type=tel], input[type=date], textarea {
    width: 100%;
    border: 1px solid var(--gray-400);
    font-size: 1.6rem;
    background: #fff;
    padding:0.8rem 1.2rem;
    border-radius: 4px;
}
textarea{
    height: 24rem;
    resize: vertical;
    line-height: 1.6;
}
select,
input[type=number]{
	border: 1px solid var(--gray-400);
    font-size: 1.6rem;
    background: #fff;
    padding: 0.8rem 1.2rem;
    border-radius: 4px;
    padding-right: 1rem;
    appearance:auto;
}
@media screen and (max-width: 414px) {
	select{
		width: 100%;
	}
}
a:hover{
	opacity: 0.8;
}
.btn{
	background-color: var(--black);
	color: var(--white);
	font-weight: bold;
	text-align: center;
	border-radius: var(--border-radius);
	padding:1.4rem 1rem;
	width: 30rem;
	display: inline-block;
    margin-bottom:2.4rem;
}
@media screen and (max-width: 414px) {
	.btn{
		width: 100%;
	}
}
@media screen and (min-width: 769px) {
  .is-pc {
    display: block;
  }
  .is-sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .is-pc {
    display: none;
  }
  .is-sp {
    display: block;
  }
}
.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-4 {
  margin-top: 16px;
}

.mt-8 {
  margin-top: 32px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-5 {
  margin-bottom: 20px;
}

.mb-6 {
  margin-bottom: 24px;
}

.mb-8 {
  margin-bottom: 32px;
}

.mb-14 {
  margin-bottom: 56px;
}

.ml-2 {
  margin-left: 8px;
}

.ml-4 {
  margin-left: 16px;
}

.ml-6 {
  margin-left: 24px;
}

.ml-8 {
  margin-left: 32px;
}

.my-2 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.my-4 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.display-none {
  display: none;
}

.inner{
	width:min(108.8rem,calc(100% - 2.5rem));
	margin-inline: auto;
}
section.inner + section.inner{
	margin-top: 6rem;
}
section.inner:last-child{
	margin-bottom: 6rem;
}
.center{
	text-align: center;
}
.en{
	font-family: "Squada One", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-style: normal;
	font-size: 1.4em;
}
.sticky-tag{
    background: var(--black);
    color: var(--white);
    padding-inline: 1rem;
    margin-right: 0.5rem;
    font-size: 1.2rem;
    vertical-align: middle;
}
.page-ttl-wrap{
	padding-block: 4.8rem 2.4rem;
	margin-bottom: 3.6rem;
}
.page-ttl{
	font-family: "Squada One", sans-serif;
	font-size: clamp(5rem,8vw,7.2rem);
	display: inline-block;
	line-height: 1;
	text-transform: uppercase;
}
.page-ttl.has-dot{
	position: relative;
}
.page-ttl.has-dot:after{
	content: '.';
	color: var(--green);
}
.page-ttl-ja{
	font-weight: bold;
}
.font-sm-ttl{
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    font-size: 1.2rem;
    font-weight: bold;
}
.heading-primary-wrap{
	padding-block: 2.4rem 3rem;
}
.heading-primary-wrap:has(.has-icon){
    padding-left: 2.4rem;
}
.heading-primary{
	font-family: "Squada One", sans-serif;
	text-transform: uppercase;
	font-size: clamp(3.2rem,7vw,3.6rem);
	display: inline-block;
	line-height: 1;
	position: relative;
}
.heading-primary-ja{
	font-size: 1.3rem;
    line-height: 1.4;
    font-weight: normal;
}
.heading-primary.has-icon:before{
    content: '';
    background-color: var(--green);
    width: 1rem;
    height: 1rem;
    display: inline-block;
    vertical-align: middle;
    border-radius: 100px;
    position: absolute;
    top: 50%;
    left: -2.4rem;
    transform: translateY(-50%);
    box-shadow: 0 0 0 0.65rem rgb(192 199 0 / 20%);
}

.heading-secondary-wrap{
	background-color: var(--gray-600);
	color: var(--white);
	padding: 1rem 1.2rem 1.2rem 1.5rem;
	margin-block: 3.4rem 2.4rem;
}
.heading-secondary-ja{
	font-weight: bold;
	font-size: 1.2em;
	padding-left: 1.5rem;
	position: relative;
}
.heading-secondary-ja:before{  
	content: '';
	width: 0.4rem;
	height: 100%;
	position: absolute;
	left: 0;
	background-color: var(--green);
}

/* header
-------------------------------------------- */
.header_links_partner{
	background-color:  var(--gray-100);
	color: var(--gray-400);
	font-size: 0.8em;
}
.header_links_partner > .inner{
    display: flex;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
}
.header_links_partner_items{
    display: flex;
    gap: 0.5rem;
}
.header_links_partner_items + a.header_links_partner_item{
    white-space: nowrap;
    min-width: 10rem;
	justify-content: flex-end;
    padding:1rem;
}
.header_links_partner_item{
	align-items: center;
    padding: 0.5rem;
    box-sizing: content-box;
    justify-content: center;
}
.header_links_partner_item{
	width: initial;
    display: flex;
    height: 2.5rem;
    text-align: center;
}
.header_links_partner_item img{
    max-height: 2.5rem;
    filter: grayscale(100%);
	object-fit: contain;
}
.header_links_partner_item img[alt^="HPS"]{
    height: clamp(1.2rem,4vw,1.7rem);
    width: fit-content;
}
.header_links_partner_item img[alt="Fulfill株式会社"]{
    max-height:2rem;
}
.header_links_partner_item img[alt="明治安田"],
.header_links_partner_item img[alt="TLSS."]{
    max-height:clamp(1rem,3.5vw,1.5rem);
}
a.header_links_partner_item:hover img{
    filter: grayscale(0%);
}
.header_links_sns{
	background-color: var(--black);
	color: var(--white);
}
@media screen and (max-width: 768px) {
	.header_links_partner_items{
		width: 100%;
		justify-content: space-between;
	}
	.header_links_partner > .inner{
		justify-content: space-between;
	}
}
@media screen and (max-width: 414px) {
	.header_links_partner_items + a.header_links_partner_item{
		display: none;
	}
	.header_links_partner > .inner{
	    padding: 0.5rem 0;
	}
	.header_links_partner_item{
        padding:0.25rem;
	}
    .header_links_partner_item img {
        max-width: 5rem;
        max-height: 3rem;
    }
}
.header_links_sns > .inner{
	display: flex;
	justify-content: space-between;
    align-items: center;
    padding-block: 1rem;
    height: 7rem;
}
.header_links_sns_items.is-pc{
	display: flex;
    align-items: center;
    gap:2rem;
}
.header_links_sns_item{
    display: flex;
}
.header_links_sns_item img{
	height: auto;
    filter: invert(100%) sepia(7%) saturate(0%) hue-rotate(213deg) brightness(117%) contrast(100%);
}
.header_links_nav a.bnr{
	display: flex;
    align-items: center;
    background: var(--black);
}
.header_links_nav a.bnr img{
	height: auto;
}
@media screen and (min-width: 769px) {
	.header_links_nav a.bnr img{
		width: clamp(18rem, 24vw, 33.4rem);
	}
}
@media screen and (min-width: 769px) {
	.header_links_nav{
		background-color: var(--gray-600);
		color: var(--white);
	}
	.header_links_nav > .inner{
		display: flex;
        justify-content: space-between;
	}
	.header_links_nav .header_navitems{
		display: flex;
        margin-right: 2rem;
	}
	.header_links_nav .header_navitem{
	}
	.header_links_nav .header_navitem a{
		padding: 1.5rem clamp(1rem,1vw,1.5rem);
        display: block;
        font-size: 1.5rem;
        font-weight: bold;
		text-align: center;
		height: 100%;
        display: flex;
        align-items: center;
	}
	.header_links_nav .header_navitems .current{
		position: relative;
	}
	.header_links_nav .header_navitems .current:after{
		content: '';
		height: 0.3rem;
		width: 3rem;
		display:block;
		position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--green);
        margin-inline: auto;
	}
}
@media screen and (max-width: 768px) {
	header.header:has(.hamburger.close) {
	    position: fixed;
	    overflow-y: scroll;
	    z-index: 99;
	    top: 0;
	    width: 100%;
	    height: 100%;
	}
	.header_links_nav{
		background-color: var(--black);
		color: var(--white);
		padding-bottom: 6rem;
	}
	.header_navitems{
		margin-bottom: 2.4rem;
	}
	.header_navitems .header_navitem a{
        display: block;
        font-size: 1.8rem;
        font-weight: bold;
        padding-block: 1.5rem;
        border-bottom: 1px solid var(--gray-600);
    }
	.header_links_nav .header_navitem a.current:after{
        content: '.';
        color: var(--green);
        font-size: 3rem;
        line-height: 0;
	}
	.header_links_nav .font-sm-ttl{
    	color:var(--gray-400);
    }
    .header_links_nav .header_links_btn{
        border: 1px solid var(--gray-600);
        border-radius: var(--border-radius);
        color: var(--white);
        display: block;
        text-align: center;
        padding: 1rem;
    }
}

/* aside bnr */
aside.bnr-area{
	background-color: var(--gray-100);
    margin-block: 3.6rem;
}
aside.bnr-area > .inner{
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block:3.6rem;
}
aside.bnr-area > .inner a img{
	width: 100%;
	height: auto;
}
@media screen and (max-width: 640px) {
	aside.bnr-area > .inner{
		flex-direction: column;
	}
}
/* header - hamburger
-------------------------------------------- */
@media screen and (max-width: 768px) {
	.header_links_nav:not(.active){
		display: none;
	}
	.hamburger{
	    display: block;
	    height: 3rem;
		width: 2rem;
	    margin-left: auto;
	    position: relative;
	    z-index: 10;
	    border: none;
	    background-color: transparent;
        padding: 1.25rem;
        box-sizing: content-box;
	}
	.hamburger .hamburger__line {
	    background-color: transparent;
	}
	.hamburger.close .hamburger__line::after {
	    top: 0;
	    transform: rotate(-45deg);
	}
	.hamburger.close .hamburger__line::before {
	    top: 0;
	    transform: rotate(45deg);
	}
	.hamburger__line {
	    display: block;
	    height: 3px;
	    position: absolute;
	    width: 2rem;
	    background-color: var(--white);
	    transition: 0.1s;
	}
	.hamburger__line:before,
	.hamburger__line:after {
	    content: "";
	    display: block;
	    height: 100%;
	    position: absolute;
	    width: 100%;
	    background-color: var(--white);
	    transition: inherit;
	}
	.hamburger__line:before {
	    top: -4px;
	}
	.hamburger__line:after {
	    top: 4px;
	}
	.header_links_sns > .inner{
        height: initial;
        padding: 0;
        width: 100%;
    }
	.header_links_sns .logo img{
        width: 46vw;
        min-width: 18rem;
        max-width: 24rem;
        padding: 1.25rem;
        height: auto;
	}
	.header_links_sns_items.is-pc{
		display: none;
	}
	.header_links_sns_items.is-sp{
		display: flex;
	    align-items: center;
	    gap:2.4rem;
	}
}






/* table  */
.page-table{
	border-bottom: 1px solid var(--gray-200);
	width: 100%;
}
.page-table .page-table-item{
	border-top: 1px solid var(--gray-200);
}
.icon-required{
    background-color: #C70000;
    color: var(--white);
    font-weight: normal;
    font-size: 0.7em;
    text-align: center;
    border-radius: 0.2rem;
    padding: 0.4rem;
    display: inline-block;
    line-height: 1;
    position: absolute;
    top: 2.4rem;
    right: 0;
}
.table-header:has(.icon-required){
	position: relative;
    padding-right: 4rem;
}
@media screen and (min-width: 769px) {
	.page-table{
    	margin-bottom: 4.6rem;
	}
	.page-table .table-header{
		width: 30%;
	}
	.page-table .table-data{  
		width: 70%;
	}
	.page-table .table-header,.page-table .table-data{
		padding-block: 2rem;
	}
	.table-header{
	    padding-right:1.2rem;
	}
	.page-table .table-data{
		padding-left:1.2rem;
	}
}
@media screen and (max-width: 768px) {
	.page-table{
    	margin-bottom: 2.4rem;
	}
	.page-table .table-header, .page-table .table-data{
    	display: block;
    	font-size: clamp(1.3rem,4vw,1.5rem);
	}
	.page-table .table-header{
		padding-top: 2rem;
		margin-bottom: 1rem;
	}
	.page-table .table-data{
		padding-bottom: 2rem;
	}
	.icon-required{
		position: initial;
    	margin-left: 0.8rem;
	}
}

/* schedule
-------------------------------------------- */
.schedule > .inner:not(:last-child){
    margin-bottom: 3.6rem;
}
.schedule .heading-secondary-wrap{
    margin-top: 0;
}
.schedule-item {
    border: 1px solid var(--gray-200);
    padding: 2rem 2rem;
    display: flex;
    justify-content: space-between;
}
.schedule-item:not(:last-child){
    border-bottom: 0;
}
.schedule-game-info {
    display: grid;
    justify-items: start;
    grid-template-columns: min-content;
    gap: 0 1rem;
    align-items: start;
    height: 7rem;
}
.schedule-game-info .game-date{
    grid-column: 1 / 2;
    font-size: clamp(4rem, 4vw, 4.5rem);
    grid-row: 1 / 3;
    line-height: 0.7;
}
.schedule-game-info .game-time{
    grid-column: 2 / 3;
    font-size: 1.5rem;
    grid-row: 1 / 2;
    line-height: 1;
}
.schedule-game-info .game-place{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 1.2rem;
}
.schedule-game-info .game-place:before{
    content: '＠';
}
.schedule-game-info .game-gamettl{
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    font-weight: 600;
    font-size: clamp(1.5rem,4vw,1.8rem);
    padding-top: 1rem;
}
.schedule-game-vs-border{
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    width: 14rem;
    text-align: center;
}
.schedule-vs-undecided{
    width: min(50rem, 100%);
    display: flex;
    justify-content: center;
    height: 100%;
    text-align: center;
    align-items: center;
}
.schedule-vs-undecided p{
    font-size: clamp(1.7rem, 4vw, 2rem);
    color: var(--gray-300);
}
.schedule-game-point {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    width: 50%;
    justify-content: space-between;
}
.schedule-game-point > dl{
    width: min(50rem, 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.schedule-game-point > dl dt{
    height: 6rem;
}
.schedule-game-point > dl dt,
.schedule-game-point > dl dd{
    text-align: center;
    font-size: clamp(1rem,3vw,1.4rem);
    line-height: 1;
}
.schedule-game-point img[alt="team-logo"]{
    width:6rem;
	height: initial;
}
.schedule-game-point .point{
    font-size: clamp(3.6rem,4vw,4.2rem);
    width: 14rem;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.schedule-game-point .point span.lose{
    color:var(--gray-200);
}

@media screen and (max-width: 768px) {
    .schedule-item{
        flex-direction: column;
        gap: 1rem 0;
    }
    .schedule-game-info{
    	height: initial;
    }
    .schedule-game-point{
        width: 100%;
    	justify-content: space-between;
        gap: 2rem;
    }
    .schedule-game-point > dl{
		width: min(10rem, 100%);
    }
    .schedule-game-point .point{
    	font-size: clamp(4rem,7vw,20rem);
		width:min(8rem,100%);
    }
}

/* ranking
-------------------------------------------- */
.ranking .heading-secondary-wrap {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5em;
}
.ranking .heading-secondary-wrap .update-txt {
	font-size: 1.4rem;
	font-weight: normal;
	white-space: nowrap;
	margin-left: 1rem;
}

.league-ranking-table-wrap {
	overflow-x: auto;
	width: 100%;
}
.league-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--gray-200);
	font-size: 1.4rem;
}
.league-table colgroup col {
	width: 6em;
}
.league-table colgroup col.team-name {
	width: auto;
}
.league-table caption { display: none; }
.league-table th,
.league-table td {
	padding: 1rem;
	text-align: center;
	border: 1px solid var(--gray-200);
}
.league-table td:nth-child(2) {
	text-align: left;
}
.league-table thead th {
	background-color: #f8f8f8;
	font-weight: bold;
}
.league-table .osakacitysc {
	font-weight: bold;
	background-color: #ffffe0;
}
@media screen and (max-width: 768px) {
	.league-table {
		min-width: 900px;
		font-size: 1.3rem;
	}
}

/* footer
-------------------------------------------- */
.footer_links__partner{
    background-color: var(--gray-100);
    color: var(--gray-400);
    font-size: 0.8em;
    padding-block: 3.6rem 4.8rem;
}
.footer_links__partner_ttl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.4rem;
}
.footer_links_partner_items{
    display: flex;
	flex-wrap: nowrap;
	justify-content:space-between;
    align-items: center;
    gap: 3%;
}
.footer_links_partner_item{
    width: calc(95% / 7);
    max-width: 12rem;
    max-height: 8rem;
    height: 8vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer_links_partner_item img {
    max-width: 100%;
    max-height: 6rem;
    height: 7vw;
	object-fit: contain;
	filter: grayscale(100%);
}
.footer_links_partner_item img[alt^="HPS"]{
	height: clamp(1.8rem,3vw,6rem);
}
a.footer_links_partner_item:hover img{
	filter: grayscale(0%);
}
@media screen and (max-width: 768px) {
	.footer_links__partner{
		padding-block: 2.4rem;
	}
}
@media screen and (max-width: 414px) {
	.footer_links_partner_items{
		flex-wrap: wrap;
        gap: 1rem 2rem;
        width: min(35rem, 100%);
        margin-inline: auto;
    	justify-content: center;
	}
	.footer_links_partner_item{
		width: calc(100% / 4 - 2rem);
		height: 4rem;
	}
	.footer_links_partner_item img{  
        height: 12vw;
	}
}
.footer{
	font-size: 0.9em;
}
.footer .logo{
	margin-bottom: 2.4rem;
}
.footer .logo img {
    width:clamp(14rem,40vw, 20rem);
}
.footer .footer_links__row {
	background-color: var(--black);
	color:var(--white);
    padding-block: 5rem 2rem;
}
.footer .footer_links__row .inner{
    display: flex;
    flex-direction: column;
    gap: 2rem;
	align-items: center;
}
.footer .footer_navitem{
	display: inline-block;
	margin-bottom: 2rem;
	margin-inline: 1.2rem;
}
.footer .footer_navitem:not(:first-child){
}
.footer .footer_navitem a{
	display: block;
}
.footer_links__sns{
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    margin-bottom: 1.2rem;
}
.footer_links__sns dt{
	color: var(--gray-400);
}
.footer_links__sns dd{  
}
.footer_links__sns dd img{
    width: 100%;
    filter: invert(100%) sepia(7%) saturate(0%) hue-rotate(213deg) brightness(117%) contrast(100%);
}
.footer_copy{
	font-size: 0.8em;
}