@charset "utf-8";
/*
Theme Name: スポーツチームNo.01
Theme URI: https://www.ad-frontier.jp/
Description: アドフロンティアのスポーツチームテーマです
*/

/* main_img */
#main_slide_wrapper {
	z-index:5;
	position:relative;
	padding-top:50.4%;
	margin-top:55px;
}

#main_slide_wrapper #main_slide {
	width:100%;
	position:absolute;
	left:0;
	top:0;
}

#main_slide_wrapper .mainvisual_text {
	font-weight: 900;
	color: #FFF;
	line-height: 1.2;
	letter-spacing: 0px;
	width: 100%;
	font-size: clamp(64px, 11vw, 142px);
	z-index: 10;
	position: absolute;
	left: 14%;
	top: 15%;
}

#main_slide_wrapper .mainvisual_text span.jp_text {
	display:block;
	transform: skewy(0.98turn);
}

#main_slide_wrapper .mainvisual_text strong {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight:900;
	letter-spacing:0;
	text-shadow: 4px 3px 0 #111;
}

#main_slide_wrapper .mainvisual_text small {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight:900;
	font-size:0.6em;
	text-shadow: 4px 3px 0 #111;
}

#main_slide_wrapper .mainvisual_text span.eng_text {
	font-family: "Permanent Marker", cursive;
	font-size:clamp(16px, 1.8vw, 30px);
	font-weight:500;
	display:block;
	letter-spacing:0;
	text-shadow: 2px 1px 0 #FFF;
	transform: skewy(0.98turn);
	margin-top: 1rem;
	margin-left:2rem;
}

#main_slide_wrapper .detail_btn01 {
	z-index:10;
	position: absolute;
    left: 14%;
    top: 70%;
}

#main_slide_wrapper .detail_btn01 a {
	display:inline-block;
	padding:1.5rem 4em;
	color:#FFF;
	border-radius:60px;
	text-align:center;
	font-size:clamp(12px, 1.2vw, 24px);
	width:auto;
	font-weight:600;
	letter-spacing:0;
    position: relative;
    overflow: hidden
}

#main_slide_wrapper .detail_btn01 a:after {
    content: "\f105";
    font-family: FontAwesome;
	font-weight:normal;
	position:absolute;
	right:3rem;
    line-height: 1.8;
}

@media (max-width: 980px){
#main_slide_wrapper {
	margin-top: 0;
	padding-top: 141%;
}

#main_slide_wrapper .mainvisual_text {
	font-size: clamp(78px, 20vw, 168px);
    left: 5%;
    top: 32%;
}

#main_slide_wrapper .mainvisual_text span.eng_text {
    font-size: clamp(12px, 3.6vw, 32px);
}

#main_slide_wrapper .detail_btn01 {
	right:2rem;
	left:inherit;
	top:inherit;
	bottom:6rem;
}

#main_slide_wrapper .detail_btn01 a {
	padding:1.5rem 2em;
    font-size: clamp(16px, 1.8vw, 24px);
}

#main_slide_wrapper .detail_btn01 a:after {
	right:1.5rem;
}

}

.detail_btn02 a {
	display:inline-block;
	padding:1.25rem 7.5rem;
	border-radius:60px;
	text-align:center;
	font-size:clamp(16px, 1.2vw, 20px);
	width:auto;
	font-weight:600;
	letter-spacing:0;
	position:relative;
	transition: color 0.5s ease;
}

.detail_btn02 a::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}

.detail_btn02 a:after {
    content: "\f105";
    font-family: FontAwesome;
	font-weight:normal;
	position:absolute;
	right:3rem;
    line-height: 1.8;
  transition: color 0.5s ease;
}

.detail_btn02 a span {
	position: relative;
	font-weight:bold;
}

.detail_btn02 a:hover {
  color: #fff;
}
.detail_btn02 a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.detail_btn02 a:hover:after {
	color: #fff;
}

.detail_btn03 a {
	display:inline-block;
	padding:1.25rem 7.5rem;
	color:#FFF;
	border:1px solid #FFF;
	border-radius:60px;
	text-align:center;
	font-size:clamp(16px, 1.2vw, 20px);
	width:auto;
	font-weight:600;
	letter-spacing:0;
	position:relative;
	transition: color 0.5s ease;
}

.detail_btn03 a::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #FFF;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}

.detail_btn03 a:after {
    content: "\f105";
	color:#FFF;
    font-family: FontAwesome;
	font-weight:normal;
	position:absolute;
	right:3rem;
    line-height: 1.8;
  transition: color 0.5s ease;
}

.detail_btn03 a span {
	position: relative;
	font-weight:bold;
}

.detail_btn03 a:hover {
  color: #111;
}
.detail_btn03 a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.detail_btn03 a:hover:after {
	color: #111;
}

.viewmore02 a {
	display:inline-block;
	padding:0.5rem 4.5rem 0.25rem 4.5rem;
	color:#FFF;
	border:1px solid #FFF;
	border-radius:60px;
	text-align:center;
	font-size:clamp(16px, 1.2vw, 20px);
	position:relative;
	transition: color 0.5s ease;
}

.viewmore02 a::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #FFF;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}

.viewmore02 a:after {
    content: "\f105";
	color:#FFF;
    font-family: FontAwesome;
	font-weight:normal;
	position:absolute;
	right:2rem;
    line-height: 1.5;
  transition: color 0.5s ease;
}

.viewmore02 a span {
	position: relative;
	font-family: "Bebas Neue", sans-serif;
}

.viewmore02 a:hover {
  color: #111;
}
.viewmore02 a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.viewmore02 a:hover:after {
	color: #111;
}

/*index*/

#index01 {
	padding-top:36rem;
	padding-bottom:15rem;
	background-size:cover;
	background-attachment:fixed;
	margin-top:-15rem;
}

#index01 h2 {
	margin-bottom:3rem;
	font-size:clamp(22px,3.2vw,42px);
	font-weight:900;
	font-family: "Noto Sans JP", sans-serif;
	margin-left:-2rem;
	letter-spacing:0;
}

#index01 p {
	margin-bottom:3rem;
}

#index02 {
	padding-top:15rem;
	padding-bottom:15rem;
}

#index02 .box1440 {
}

#index02 h2 {
	text-align:center;
	margin-bottom:7.5rem;
	color:#FFF;
	font-weight:bold;
}

#index02 h2:after {
	content:"";
	background:#590000;
	height:5px;
	width:60px;
	display:block;
	margin:1.5rem auto 0 auto;
}

#index02 h2 span {
	display:block;
	font-size:clamp(36px, 3.6vw, 72px);
	font-family: "Bebas Neue", sans-serif;
	line-height:1;
	font-weight:normal;
}

#index02 .detail_btn03 {
	text-align:center;
	margin-top:7.5rem;
}

#index03 {
	padding-top:15rem;
	padding-bottom:4.5rem;
	background:#FFF;
}

#index03 .base {
}

#index03 .base > div {
	padding-bottom:12rem;
	border-bottom:1px solid #EEE;
}

#index04 {
	padding-top:15rem;
	padding-bottom:15rem;
	background:#FFF;
}

#index04 h2 {
	margin-bottom:3rem;
	font-weight:bold;
}

#index04 h2 span {
	font-size:clamp(32px, 3.6vw, 72px);
	font-family: "Bebas Neue", sans-serif;
	display:block;
	line-height:1;
	font-weight:normal;
}

#index04 h2 span:first-letter {
	color:#590000;
}

#index04 .box01 ul {
    list-style: none;
    padding: 0;
    margin: 0;
	border-top:1px solid #EEE;
	border-bottom:1px solid #EEE;
	height:782px;
	overflow:auto;
}

#index04 .box01 ul li {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #EEE;
	padding:2rem 0;
}

#index04 .box01 ul li:last-child {
	border-bottom:none;
}

#index04 .box01 ul li:first-child {
    border-bottom: 1px solid #EEE;
}

#index04 .box01 .img-box {
    flex: 0 0 150px; /* 画像の固定幅 */
    height: 100px;
    overflow: hidden;
	border:1px solid #EEE;
}

#index04 .box01 .img-box img {
    width: 100%;
    object-fit: cover;
    display: block;
}

#index04 .box01 .text-box {
    flex: 1;
}

#index04 .box01 .text-box .date {
    display: inline-block;
	font-size:clamp(14px, 1.4vw, 18px);
    color: #888;
	font-family: "Bebas Neue", sans-serif;
}

#index04 .box01 .text-box small {
    display: inline-block;
	font-size:clamp(12px, 1vw, 12px);
    color: #555;
	position:relative;
	top:5px;
}

#index04 .box01 .text-box small a {
    display: inline-block;
	padding:0.15rem 0.5rem;
	background:#590000;
	color:#FFF;
	letter-spacing:0;
}

#index04 .box01 .text-box h3 {
	margin-top:0.5rem;
	line-height:1.2;
}

#index04 .box01 .text-box h3 a {
    text-decoration: none;
	font-size:clamp(15px, 1.4vw, 18px);
}

#index04 .box01 .text-box h3 a:hover {
    text-decoration: underline;
}

#index05 {
}

#index05 .box01 {
	color:#FFF;
}

#index05 .box01:after {
	content:"";
	width:69%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background:url(../../images/overlay_hishigata.svg) no-repeat bottom left / cover;
}

#index05 .box01 .overlay-grad {
	padding:9rem 6rem;
	position:relative;
	
    width: 100%; /* 親要素に合わせる */
	height:100%;
    overflow: hidden; /* はみ出る部分を隠す */
}


#index05 .box01 .overlay-grad:before {
    content: "";
    position: absolute;
    width: 120%; /* ひし形が横長になるように調整 */
    height: 120%;
    
    /* ひし形の形状（上辺を右にずらした形） */
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

#index05 .box01 h2{
}

#index05 .box01 p {
	margin-bottom:3rem;
}

#index05 .box01 h2,
#index05 .box02 h2{
	margin-bottom:3rem;
	font-weight:bold;
	position:relative;
	z-index:5;
}

#index05 .box01 p,
#index05 .box02 p {
	position:relative;
	z-index:5;
}

#index05 .box01 h2 span,
#index05 .box02 h2 span {
	font-size:clamp(42px, 4.8vw, 92px);
	font-family: "Bebas Neue", sans-serif;
	display:block;
	line-height:1;
	font-weight:normal;
	margin-left:-2px;
}

#index05 .box01 h2 span:first-letter {
	color:#555;
}

#index05 .box02 h2 span:first-letter {
	color:#590000;
}

#index05 .box02 {
	color:#FFF;
	position:relative;
}

#index05 .box02:after {
	content:"";
	width:69%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background:url(../../images/overlay_hishigata.svg) no-repeat bottom left / cover;
}

#index05 .box02 .overlay-grad-bk {
	padding:6rem;
	position:relative;
	
    width: 100%; /* 親要素に合わせる */
	height:100%;
    overflow: hidden; /* はみ出る部分を隠す */
}

#index05 .box02 .overlay-grad-bk:before {
    content: "";
    position: absolute;
    width: 120%; /* ひし形が横長になるように調整 */
    height: 120%;
    
    /* グラデーションをひし形に沿うように調整（右上 → 左下へ黒 → 透明） */
    background: linear-gradient(110deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 80%);
    
    /* ひし形の形状（上辺を右にずらした形） */
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

#index05 .box01 .viewmore02 {
	position:relative;
	z-index:5;
}

#index05 .box02 .viewmore02 {
	margin-top:9em;
	position:relative;
	z-index:5;
}

#index06 {
	padding-top:9rem;
	padding-bottom:9rem;
	background:#FFF;
}

#index06 .box01 {
	margin-bottom:6rem;
	padding-bottom:6rem;
	border-bottom:1px solid #DDD;
}

#index06 h2 {
	margin-bottom:2rem;
	font-weight:bold;
	text-align:center;
}

#index06 h2 span {
	font-size:clamp(24px, 2vw, 42px);
	font-family: "Bebas Neue", sans-serif;
	display:block;
	line-height:1;
	font-weight:normal;
}

#index06 h2  span:first-letter {
	color:#590000;
}

#index06 p {
	text-align:center;
	margin-bottom:2rem;
	font-size:clamp(14px, 1.2vw, 16px);
	line-height:1.6;
}

#index06 ul {
	-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
	justify-content: center; /* 横方向中央揃え */
}

#index06 .box01 ul li {
	margin:1rem 0.5rem;
	width:120px;
	text-align:center;
}

#index06 .box02 ul li {
	margin:1rem 0.5rem;
	width:200px;
	text-align:center;
}



@media (max-width: 980px){
#index01 {
	margin-top:-3.5rem;
    padding-top: 12rem;
    padding-bottom: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
	min-height:360px;
    z-index: 2;
	background-attachment: scroll;
	background-size: cover;
}

#index01 .flex_wrapper {
    flex-direction: column-reverse;
}

#index01 .w48 {
	width:100%;
}

#index01 .w48.img-box {
	margin-bottom:3rem;
}

#index01 .w48.img-box img {
	width:100%;
	height:auto;
}

#index01 h2 {
	letter-spacing:0;
	margin-left:-1rem;
}

#index01 .detail_btn02 {
	text-align:right;
}

#index02 {
    padding-top: 6rem;
    padding-bottom: 6rem;
	/*パララックス用*/
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
	background-attachment: scroll;
	background-size: cover;
}

#index02 h2 {
	margin-bottom:4.5rem;
}

#index02 h2:after {
	width:30px;
	margin:1rem auto 0 auto;
}

#index02 .detail_btn03 {
	margin-top:3rem;
}

#index03 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

#index03 .base {
	padding-right:0;
	padding-left:0;
}

#index03 .base > div {
	padding-bottom:6rem;
	border-bottom:1px solid #EEE;
}

#index03 ul div.w33 {
}

#index04 {
	padding-top:6rem;
	padding-bottom:6rem;
}

#index04 .w48 {
	width:100%;
}

#index04 .w48:first-child {
	margin-bottom:6rem;
}

#index04 .box01 ul {
    list-style: none;
    padding: 0;
    margin: 0;
	border-top:1px solid #EEE;
	border-bottom:1px solid #EEE;
	height:300px;
	overflow:auto;
}

#index05 .box01 {
}

#index05 .box01 .overlay-grad {
	padding:4.5rem 3rem;
}

#index05 .box01 h2 {
	margin-bottom:2rem;
}

#index05 .box02.w50 {
	width:100%;
}

#index05 .box02 .overlay-grad-bk {
	padding:4.5rem 3rem;
}

#index05 .box01 .viewmore02,
#index05 .box02 .viewmore02 {
	margin-top:3rem;
	text-align:right;
}

#index05 .box01 .viewmore02 a,
#index05 .box02 .viewmore02 a {
	background:rgba(0,0,0,0.3);
}

#index06 {
	padding-top:4.5rem;
	padding-bottom:4.5rem;
}

#index06 .box01 {
	margin-bottom:3rem;
	padding-bottom:3rem;
}

#index06 ul li {
}

.cd-fixed-bg {
	background-size: cover !important;
	background-attachment: scroll !important;
}

}

@media (max-width: 480px){
}