@charset "UTF-8";
@font-face {
  font-family: 'RBNo2.1b';
  src: url('../fonts/RBNo21b-Black.woff2') format('woff2'),
       url('../fonts/RBNo21b-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------
resset
---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;vertical-align: bottom;}
body, html {padding:0;margin:0}h1,h2,h3,h4,p,figure,picture,blockquote,ul,li,dl,dd{margin:0;}
ul,ol{list-style:none}
h1,h2,h3,h4{/*text-wrap:balance;*/text-align:left;}
i,s{font-style:normal;}
a:not([class]){color:currentColor}
img,figure,picture{display:block;max-width:100%;height:auto;margin-inline:auto;}
input,button,textarea,select{font:inherit}
textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}
button{all:unset;display:revert}
table {border-collapse:collapse}
textarea {white-space:revert}

/*-------------------------------------------
config
-------------------------------------------*/
:root {
	/* color */
  --white: #fff;
  --gray: #9F9F9F;
  --lightGray: #DCDCDC;
  --sLightGray: #F7F7F7;
  --mediumGray: #9F9F9F;
  --gold: #d7c5a0;
  --darkGold: #575041;
  --darkGray: #363636;
  --black: #272727;
  --richBlack: #000;

  --sat: #5FCFFF;
  --sun: #FF4646;

  /* width */
  --maxWidth: 1440px;
  --contentsWidth: 900px;
  --spBreak: 768px;
  --spWidth: 520px;

  --maxWidthN: 1440;
  --contentsWidthN: 1000;
  --tabletBreakN: 1024;
  --spBreakN: 768;
  --spWidthN: 520;

  --padding-pc: 60px;
  --padding-sp: 20px;
}

/*-------------------------------------------
font-family
-------------------------------------------*/
/*
.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

Gala Extra Condensed Bold
97px
font-family: "gala-extra-condensed", sans-serif;
font-weight: 700;
font-style: normal;

DINNextLTPro　→　DIN 2014（代用）
DIN 2014 Bold
font-family: "din-2014", sans-serif;
font-weight: 700;
font-style: normal;

*/

/*-------------------------------------------
base
-------------------------------------------*/
html {
	scroll-behavior: smooth;
}
html, body {
	overflow-x: hidden;
}

body {
	position: relative;
	text-align: center;
	color: var(--white);
  background: var(--black);
	font-size: 14px;
	font-family: "ryo-gothic-plusn", sans-serif;
	font-weight: 900;
	font-style: normal;
	line-height: 1.8;
	letter-spacing: 0.08em;
	font-feature-settings: "palt" 1;
	-webkit-text-size-adjust: 100%;
	@media (max-width: 520px) {
		font-size: 14px;
	}
}

/*-------------------------------------------
common
-------------------------------------------*/
.head {
	font-size: clamp(48px, calc((64 / 1000) * 100vw), 64px);
	font-family: 'RBNo2.1b', sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  margin-bottom: 22px;
  @media (min-width: 520px) {
    margin-bottom: 44px;
  }
}

.subHead {
  font-size: clamp(32px, calc((48 / 1000) * 100vw), 48px);
	font-family: 'RBNo2.1b', sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: left;
  color: var(--gold);
  padding-block: 10px;
  background: var(--black);
}


.forSP {
	display: none;
	@media (max-width: 520px) {
		display: block;	
	}
}

/*-------------------------------------------
layout
-------------------------------------------*/
#wrapper {
	text-align: center;
	@media (max-width: 900px) {
	}
	&.open {
		#header {
			height: 100%;
			width: 100%;
			overflow-y: scroll;
			background: var(--white);
		}
		nav {
			display: flex;
			visibility: visible;
			opacity: 1;
		}
	}
}

#main {
  position: relative;
  max-width: var(--maxWidth);
  margin-inline: auto;
  @media (max-width: 1560px) {
    padding-inline: var(--padding-pc);
  }
  @media (max-width: 520px) {
    padding-inline: var(--padding-sp);
  }
}

section {
	position: relative;
	overflow: hidden;
	padding-top: 60px;
  padding-bottom: 60px;
  scroll-margin-top: 60px;
	max-width: var(--contentsWidth);
	margin-inline: auto;
	@media (max-width: 520px) {
		padding-top: 22px;
		padding-bottom: 22px;
		scroll-margin-top: 22px;
	}
}

#header {
	position: fixed;
	display: flex;
	justify-content: space-between;
	align-items: center;
  height: 52px;
  width: 100%;
  top: 0;
	left: 0;
  background: var(--richBlack);
  color: var(--white);
	z-index: 100;
  .navLogo {
    padding-inline: var(--padding-sp);
    line-height: 1;
    a {
      color: var(--white);
      text-decoration: none;
      font-family: 'RBNo2.1b', sans-serif;
      font-weight: 900;
      font-style: normal;
      font-size: 24px;
      letter-spacing: 0.02em;
    }
  }
	#menuTrigger {
		position: fixed;
		display: block;
    top: 0;
		right: 0;
		width: 52px;
		height: 52px;
		z-index: 101;
		cursor: pointer;
    @media (min-width: 768px) {
      display: none;
    }
		i {
			display: block;
			text-indent: 130%;
			white-space: nowrap;
			overflow: hidden;
		}
		&::before,
		&::after,
		i:before {
			position: absolute;
			display: block;
			content: "";
      width: calc(100% - (12px * 2));
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      height: 2px;
      background: var(--white);
      transition: .3s;
		}
		&:before {
			top: -15px;
		}
		&::after {
			bottom: -15px;
		}
		&:hover,
		&.open {
			&::before,
			&::after,
			i:before {
				background: var(--lightGray);
			}
		}
		&.open {
			&::before {
				top: 0;
				rotate: 45deg;
			}
			&::after {
				bottom: 0;
				rotate: -45deg;
			}
			i:before {
				display: none;
			}
			&:hover {
				background: var(--richBlack);
			}
		}
	}
	nav {
		position: fixed;
		visibility: hidden;
		opacity: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background: var(--richBlack);
		padding: 158px 60px;
    @media (min-width: 768px) {
      visibility: visible;
      padding: 0;
      height: auto;
      background: none;
      opacity: 1;
    }
		z-index: 100;
		.navList {
			position: relative;
      width: 100%;
      max-width: 500px;
      margin-inline: auto;
      @media (min-width: 768px) {
        max-width: 100%;
        width: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-inline: 30px;
        gap: 40px;
        height: 52px;
      }
			li {
				position: relative;
				text-align: center;
        border-bottom: 1px solid var(--white);
        @media (min-width: 768px) {
          border-bottom: none;
        }
				+ li {
					margin-top: 24px;
          @media (min-width: 768px) {
            margin-top: 0;
          }
				}
				a {
					position: relative;
					display: block;
					text-decoration: none;
					font-family: 'RBNo2.1b', sans-serif;
          font-weight: 900;
          font-style: normal;
          font-size: 32px;
          letter-spacing: 0.02em;
					line-height: 1;
					padding: 10px 0;
          transition: .3s;
          @media (min-width: 768px) {
            font-size: 24px;
            font-weight: 900;
          }
					&:hover {
						color: var(--gold);
					}
				}
			}
		}
	}
}

#footer {
	position: relative;
	padding: 64px 60px 24px;
	text-align: center;
	color: var(--white);
	background: var(--richBlack);
	margin-top: 40px;
  @media (min-width: 768px) {
    margin-top: 60px;
  }
  z-index: 1;
	.footerLogo {
		a {
			img {
        width: 117px;
				@media (min-width: 768px) {
					width: 150px;
				}
			}
		}
	}
	.snsList {
		display: flex;
		justify-content: center;
		gap: 15px;
		@media (min-width: 768px) {
			gap: 30px;
		}
		li {
			a {
        img {
          scale: 0.8;
          transition: .3s;
        }
				&:hover {
          img {
            scale: 1;
          }
				}
			}
		}
	}
	.footerLogo {
		margin-top: 40px;
	}
	.copyright {
		margin-top: 32px;
		text-align: center;
		small {
			font-size: 10px;
			font-family: "Inter", sans-serif;
			font-weight: 900;
			letter-spacing: 0;
      margin-inline: -20px;
		}
	}
}

section#hero {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: none;
    width: 100vw;
    position: relative;
    margin-inline: calc(50% - 50vw);
    max-width: 100vw;
    padding-block: 0;
    padding-inline: calc(50vw - 50%);
    aspect-ratio: 16 / 9;
    @media (max-width: 520px) {
      aspect-ratio: 9 / 16;
    }
}

#heroSlider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    .heroList {
        width: 100%;
        .swiper-slide {
            position: relative;
            width: 100%;
            opacity: 0;
            transition: 1.5s ease;
            &.swiper-slide-active {
                opacity: 1;
            }
            .img {
                display: block;
                width: 100%;
                img {
                  display: block;
                  width: 100%;
                  object-fit: cover;
                }
            }
        }
    }
}

/* スライドが1つしかない場合のスタイル */
#heroSlider.single-slide .heroList .swiper-slide {
    opacity: 1;
    transition: none;
}

/* スマホでのSwiper初期化前の表示改善 */
#heroSlider .heroList .swiper-slide {
    opacity: 0;
    transition: opacity 1.5s ease;
}

#heroSlider .heroList .swiper-slide:first-child {
    opacity: 1;
}

/* Swiper初期化後の表示 */
#heroSlider.swiper-initialized .heroList .swiper-slide {
    opacity: 0;
}

#heroSlider.swiper-initialized .heroList .swiper-slide-active {
    opacity: 1;
}


section#history  {
  &::after {
    position: absolute;
    content: "";
    display: block;
    width: 2px;
    height: 700px;
    background: var(--gold);
    left: 74px;
    top: 0;
  }
  .historyList {
    div {
      position: relative;
      padding-bottom: 40px;
      &::before,
      &::after {
        position: absolute;
        content: "";
        display: block;
        width: 2px;
        height: 100%;
        background: var(--gold);
        left: 74px;
      }
      &::before {
        top: -200px;
      }
      &::after {
        bottom: -500px;
      }
      &:last-child {
        &::after {
          bottom: 0;
        }
      }
    }
    dt,dd {
      position: relative;
      text-align: left;
    }
    dt {
      b {
        position: relative;
        display: inline-block;
        font-size: 38px;
        font-family: 'RBNo2.1b', sans-serif;
        font-weight: 900;
        font-style: normal;
        letter-spacing: 0.02em;
        line-height: 1;
        padding-right: 25px;
        margin-right: 10px;
        width: 2em;
        &:after {
          position: absolute;
          content: "";
          display: block;
          top: 20px;
          right: -8px;
          width: 18px;
          height: 2px;
          background: var(--gold);
        }
      }
      span {
        display: inline-block;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: 0;
        margin-right: -10px;
        &.small {
          display: inline-block;
          font-size: 18px;
          margin-right: -20px;
          transform: scale(0.95, 1);
          transform-origin: top left;
          i {
            transform: scale(1, 1);
          }
        }
        i {
          font-size: 38px;
          font-family: 'RBNo2.1b', sans-serif;
          font-weight: 900;
          font-style: normal;
          letter-spacing: 0.02em;
          line-height: 1;
          color: var(--gold);
          margin-right: 15px;
        }
        > span {
          font-size: 14px;
          font-style: normal;
          margin-right: 0;
          margin-bottom: 5px;
        }
      }
    }
    dd {
      padding-left: 80px;
      @media (min-width: 768px) {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
      }
      > * {
        margin-top: 10px;
      }
      figure {
        display: block;
        @media (min-width: 768px) {
          margin: 0;
          max-width: 400px;
          margin-top: -40px;
          @media (min-width: 768px) {
            padding-left: 40px;
          }
        }
        img {
          margin: 0;
        }
        
      }
      ul {
        display: flex;
        gap: 7x;
        li {
          display: flex;
          align-items: flex-end;
          gap: 3px;
          min-width: 46px;
          &.gold {
            color: var(--gold);
          }
          i {
            display: block;
            font-size: 17px;
            font-family: "din-2014", sans-serif;
            font-weight: 700;
            line-height: 1.25;
          }
          p {
            font-size: 36px;
            font-family: 'RBNo2.1b', sans-serif;
            font-weight: 900;
            font-style: normal;
            letter-spacing: 0.02em;
            line-height: 1;
            margin: 0;
          }
        }
      }
    }
  } 
  .subHead {
    margin-top: 15px;
  }
  .pitchingResultsTableContainer {
    overflow-x: auto;
  }
  .pitchingResultsTable {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--gold);
    th, td {
      padding: 4px 1px;
      text-align: center;
      color: var(--gold);
      font-size: 12px;
      font-weight: 900;
      border-bottom: 1px solid var(--gold);
      white-space: nowrap;
      background: var(--richBlack);
      &.year {
          padding-left: 7px;
      }
      &.team {
          
      }
    }
    th {
      
    }
    thead {
      td {
  
      }
    }
    tbody {
      tr {
        td {
          border-color: var(--darkGold);
        }
        &:last-child {
          td {
            border-bottom: 1px solid var(--gold);
          }
        }
      }
    }
    tfoot {
      th {
        
      }
    }
    .table_inning {
      width: 100%;
      border: none;
      margin-left: auto;
      th, td {
        padding: 0;
        border: none !important;
        text-align: right;
      }
      th {
        width: auto ;
        text-align: right;
      }
      td {
        width: 15px ;
        text-align: left;
      }
    }
  }
  .ex {
    font-size: 12px;
    font-weight: 400;
    color: var(--white);
    margin-top: 10px;
    text-align: right;
  }
}

section#movies {
    .movieList {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        @media (min-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
        }
        li {
            a {
                display: block;
                position: relative;
                figure {
                    position: relative;
                    width: 100%;
                    aspect-ratio: 16/9;
                    overflow: hidden;
                    img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: 0.3s;
                        scale: 1.05;
                    }
                    &::after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 60px;
                        height: 42px;
                        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FF0000" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814z"/><path fill="%23FFFFFF" d="M9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>') no-repeat center;
                        background-size: contain;
                        opacity: 1;
                        transition: opacity 0.3s ease;
                    }
                }
                &:hover {
                    figure {
                        img {
                          scale: 1.1;
                        }
                    }
                }
            }
        }
    }
}

.youtube-modal-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    &.active {
        display: block;
    }
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        .modal-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 800px;
            .modal-content {
                position: relative;
                width: 100%;
                aspect-ratio: 16/9;
                .close {
                    position: absolute;
                    top: -40px;
                    right: 0;
                    color: var(--white);
                    font-size: 30px;
                    cursor: pointer;
                }
                .youtubeFrame {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    iframe {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}

section#news {
  .newsList {
    border-top: 1.5px solid var(--gold);
    div {
      display: flex;
      gap: 15px;  
      border-bottom: 1.5px solid var(--gold);
      padding-block: 20px;
      @media (min-width: 768px) {
        padding-inline: 15px;
        gap: 20px; 
      }
    }
    dt {
      font-size: 24px;
      font-family: 'RBNo2.1b', sans-serif;
      font-weight: 400;
      font-style: normal;
      letter-spacing: 0.02em;
      line-height: 1;
      text-align: left;
      color: var(--gold);
    }
    dd {
      a {
        text-align: left;
        font-size: 14px;
        display: block;
        text-decoration: none;
        color: var(--white);
        &:hover {
          text-decoration: underline;
        }
      }
    }
  } 
}

section#goods {
  .goodsList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    @media (min-width: 768px) {
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
    }
    li {
      a {
        display: block;
        text-decoration: none;
        h3 {
          font-size: 14px;
          line-height: 1.4;
          font-weight: 400;
          margin-top: 10px;
        }
        p {
          text-align: left;
          font-size: 14px;
          margin-top: 5px;
          margin-top: 5px;
          i {
            display: inline-block;
            font-size: 11px;
            margin-left: 2px;
            margin-bottom: 2px;;
          }
        }
      }
    } 
  }
  .btn {
    margin-block: 40px;
    + .goodsList {
      margin-top: 60px;
      @media (min-width: 768px) {
        margin-top: 80px;
      }
    }
    a {
      position: relative;
      display: block;
      background: #ad9c7a;
      color: var(--white);
      font-size: 16px;
      font-weight: 600;
      padding: 20px 10px;
      text-decoration: none;
      border-radius: 5px;
      text-align: center;
      margin-inline: auto;
      max-width: 360px;
      &:hover {
        background: var(--gold);
      }
      &::before {
        position: absolute;
        content: '';
        display: block;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 16px;
        width: 16px;
        height: 16px;
        background: url('../img/icon_btn.svg') no-repeat 0 0;
        background-size: contain;
      }
      &:hover {
        
      }
    }
  }
}   

section#others {
  .othersList {
    li {
      background: #44413d;
      padding: 40px 22px;
      max-width: 600px;
      margin-inline: auto;
      figure {
        display: block;
        width: 100%;
        img {
          width: 100%;
        }
      }
      p {
        text-align: left;
        font-size: 14px;
        margin-top: 20px;
      }
      a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: #ad9c7a;
        color: var(--white);
        font-size: 16px;
        font-weight: 600;
        padding: 10px 20px;
        border-radius: 31px;
        height: 62px;
        margin-top: 20px;
        margin-inline: auto;
        max-width: 360px;
        &:hover {
          background: var(--gold);
        }
        &::before {
          position: absolute;
          content: '';
          display: block;
          top: 0;
          bottom: 0;
          right: 20px;
          margin: auto;
          width: 10px;
          height: 10px;
          border-top: 1.5px solid var(--white);
          border-right: 1.5px solid var(--white);
          transform: rotate(45deg);
        }
      }
      
    }
  } 
}

.fadeIn {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    &.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

#splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeOut 1s ease 2s forwards;
    picture {
        width: 100%;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}