@charset "UTF-8";
/* 
* {
  outline: 1px solid red;
} */



:root {
  --deep-blue: #304A90;
  --bright-pink: #D9448E;
  --light-gray: #DDE1E7;
  --rose-pink: #CC89A7;
  --lavender: #9E91D2;
  --dark-red: #713944;
  --white: #FFFFFF;
  --red: #BA1D3C;
  --black: #373330;
  

}
:root {
  /* コンテンツ幅管理用の変数 */
  --content-width-sm: 800px;
  --content-width: 960px;
  --content-width-lg: 1088px;
}

:root {
  /* z-index管理用の変数 */
  --z-index-back: -1;
  --z-index-default: 1;
  --z-index-header: 100;
  --z-index-menu: 150;
  --z-index-modal: 200;
}
/* ---------- base ---------- */

body {
  color: var(--black-color);
  font-size: 14px;
  font-family: "Noto Serif JP", serif;
  margin: 0;
    padding: 0;
}

.container{
  padding: 32px 16px ;
}

@media screen and (min-width: 768px) {
  
.container{
  padding: 120px 150px ;
}
}

/* js */


.scroll-fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-fadein.visible {
  opacity: 1;
  transform: translateY(0);
}
/* ヘッダー */



.site-header {
  background: linear-gradient(to right, #c43e8f, #d65a9e); /* ピンクグラデーション */
  padding: 10px 16px;
  display: flex;
  justify-content: center;
  align-items: center;

}
@media screen and (min-width: 768px) {
  .site-header {
    background: linear-gradient(to right, #c43e8f, #d65a9e); /* ピンクグラデーション */
    padding: 10px 32px;
    display: flex;
    justify-content: center;
    align-items: center;

  }
}

.header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  
  justify-content: space-between;
  position: relative;
}
@media screen and (min-width: 768px) {

  .header-inner {
    height: 60px;
  
  }

}

.logo-area {
  color: white;
 
}

.site-name {
  font-weight: bold;
  font-size: 12px;
  margin: 0;
  font-family: "Notable", sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (min-width: 768px) {
  .site-name {
    font-size: 18px;
  }
}

.sub-text {
  font-size: 8px;
  margin: 0;
  opacity: 0.8;
  font-family: "Wallpoet", sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (min-width: 768px) {
  .sub-text {
    font-size: 14px;
   
  }
}

.mascot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 50px;
  width: 35px;
top: -10px;
justify-content: center;

}
@media screen and (min-width: 768px) {
    
  .mascot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100px;
    width: 60px;
  top: -5px;
  justify-content: center;

  }
}



.sponsor-header{
  display: flex;
  justify-content: space-between;
  background-color: var(--deep-blue);
  margin-top: 32px;
  padding: 2px 25px;

}
@media screen and (min-width: 768px) {
  .sponsor-header{
    padding: 10px 36px;
    margin-top: 0px;

  }

}
.sponsor-item{
  width: 87px;
  height: 14px;

}
@media screen and (min-width: 768px) {
  .sponsor-item{
    width: 250px;
    height: 50px;
  
  }
}



/* l_header-nav の display: none; はメディアクエリ内だけに残す */


@media screen and (min-width: 1080px) {
  .l_header-nav_list {
    display: flex;
    flex-wrap: wrap; /* アイテムがコンテナの幅を超えたら改行する */
    justify-content: center; /* アイテムを水平方向の中央に配置 */
    align-items: flex-start; /* アイテムを上端に揃える（必要であれば） */
    gap: 20px; /* アイテム間の隙間 */
    width: 550px; /* コンテナの固定幅 */
    /* 必要であれば、コンテナの高さを自動調整させる */
    /* height: auto; */
    
  }

  
  .l_header-nav_list li { 
    width: calc((100% - (20px * 3)) / 4);
    text-align: center; /* アイテム内のテキストを中央寄せ */
  }
}

.l_header-nav_item {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  z-index: 1001;
}

.l_header-nav_item:not(:first-child) {
  margin-top: 40px;
}

@media screen and (min-width: 1080px) {
  .l_header-nav_item:not(:first-child) {
    margin-top: 0;
  }
}

.pinkdiv{
  height: 10px;
  background-color: var(--rose-pink);
  /* KVエリアのタイトル */

  width: 100%;
  height: 10px; /* 必要に応じて高さを調整 */
  background-color: var(--bright-pink);
  border-top :solid 1px var(--white);

}
@media screen and (min-width: 768px) {
    
  .pinkdiv{
    height: 15px; /* 必要に応じて高さを調整 */
  
    border-top :solid 5px var(--white);
  
  }
}


/* ヘッダーjs */
/* スクロールロック用の新しいルールを追加 */

body.no-scroll {
  overflow: hidden;
}

/* ハンバーガーアイコン */
.m_hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  width: 26px;
  height: 20px;
  position: relative;
  z-index: 1001;
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;

}
.m_hamburger-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.3s ease-in-out;


}
.m_hamburger.is-active .m_hamburger-bar:first-child {
  transform: rotate(45deg);
}
.m_hamburger.is-active .m_hamburger-bar:nth-child(2) {
  opacity: 0;
}
.m_hamburger.is-active .m_hamburger-bar:last-child {
  transform: rotate(-45deg);
}

/* PCではハンバーガー非表示 */
@media screen and (min-width: 1080px) {
  .m_hamburger {
    display: none;
  }
}



.l_header-nav {
  display: block; /* PC表示 */
  position: static;
  right: auto; /* fixed時のrightをリセット */
  width: auto;
  height: auto;
  background-color: transparent;
  padding-top: 0;
  z-index: 1000;
}
/* --- ナビゲーション修正 --- */
/* 初期状態: 画面外に隠す */
.l_header-nav.js_navigation {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: var(--bright-pink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s, right 0.5s ease;
  z-index: 1000;
}

/* メニューが開いたとき */
.l_header-nav.js_navigation.is-active {
  right: 0;
  opacity: 1;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* PCでは常に表示 */
@media screen and (min-width: 1080px) {
  .l_header-nav.js_navigation {
    position: static;
    right: auto;
    width: auto;
    height: auto;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    display: block;
  }
  .l_header-nav_list {
    display: flex;
    gap: 18px;
  }
  .l_header-nav_item:not(:first-child) {
    margin-top: 0;
  }
}



.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: 400px;
  margin: 0 auto;
  background-color: var(--rose-pink);
}

@media screen and (min-width: 768px) {
.slider {
  height: 600px;
}
}




.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
}

.slider-item {
  min-width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.kv-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}
@media screen and (min-width: 768px) {
.kv-img {
  width: 80%;
  height: 100%;
  object-fit: cover;
 
  margin: 0 auto;
  display: block;
}
}


.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(253, 253, 253, 0.4);
  color: var(--black);
  border: none;
  padding: 0.5em 0.8em;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 5px;
}

.slider-btn.prev {
  left: 10px;
}

.slider-btn.next {
  right: 10px;
}

/* したのスライド */




.slide-sub{
  display: flex;
  justify-content: space-between;
  gap: 18px;
 background-color: var(--rose-pink);
 border-top: solid 3px var(--white);

}

@media screen and (min-width: 1080px) {
.slide-sub{
  display: flex;
  justify-content: space-between;
  gap: 8px;
 background-color: var(--rose-pink);
 border-top: solid 10px var(--white);



}
}

.slide-subitem{
  width: 85px;
  height: 58px;
  border-radius: 10px;

}
@media screen and (min-width: 768px) {

  .slide-subitem{
    width: 200px;
    height: 260px;

  }
}
@media screen and (min-width: 1080px) {

  .slide-subitem{
    width: 300px;
    height: 260px;

  }
}
@media screen and (min-width: 1300px) {

  .slide-subitem{
    width: 400px;
    height: 260px;

  }
}
.content{
  padding:20px 46px
}
@media screen and (min-width: 1080px) {
  .content{
    padding: 64px ;
  }
}
.browndiv{
  width:100%;
  height: 20px;
  background-color: var(--black);
  display: flex;
  justify-content: center;
  align-items: center;

}
@media screen and (min-width: 768px) {
.browndiv{
  width:100%;
  height:20px;
  background-color: var(--black);
  display: flex;
  justify-content: center;
  align-items: center;

}
}

@media screen and (min-width: 1080px) {
.LATESTnext-wrapper{
display: flex;
}
}

.LATESTMATCH-container {
  background-image: url(../img/latestmatchback.png); /* 背景画像のパス */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  padding:32px;
  width:100%; /* 幅の調整 */
  max-width:2000px; /* 最大幅の設定 */
 
  text-align: center;
  
  
}
@media screen and (min-width: 1080px) {
    
  .LATESTMATCH-container {
   
    padding:64px ;
    width:calc(100% - 50%); /* 幅の調整 */
   
  }
}


.LATESTMATCH-container2{
  background-color: var(--bright-pink);
  background-position: center;
 
  padding:16px;
  width:100%; /* 幅の調整 */
  
  
  text-align: center;
  

}
@media screen and (min-width: 1080px) {
  .LATESTMATCH-container2{
   
    padding:64px;
    width:calc(100% - 50%); /* 幅の調整 */
  }
}






/* スコア */

.main-title {
 
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
 font-size: 18px;
 color: var(--black);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

}
@media screen and (min-width: 768px) {
  .main-title {
  font-size: 38px;
  }
}

.main-title2{
  font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
 font-size: 18px;
 color: var(--white);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

}
@media screen and (min-width: 768px) {
.main-title2{
 font-size: 38px;
}
}

.sub-title {
  font-size:8px;
  color: var(--black);
 
}
@media screen and (min-width: 768px) {
  .sub-title {
    font-size:18px;
  }
}

.sub-title2{
  font-size:8px;
  color: var(--white);
}
@media screen and (min-width: 768px) {
.sub-title2{
  font-size:18px;
}
}
.match-info {
  border-radius: 30px;
  
 
}



.date-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
 margin-top: 10px;
 margin-bottom: -10px;
}
@media screen and (min-width: 768px) {
.date-wrapper {
 margin-top: 20px;
 margin-bottom: -20px;
}
}

.date-wrapper2{
  display: flex;
  justify-content: center;
  align-items: center;
 
 margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
.date-wrapper2{
margin: 32px 10px;

}
}


.date-text{
  font-size: 8px;
  
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;

}
@media screen and (min-width: 768px) {
.date-text{
  font-size: 22px;

}
}
.date-text2{
  font-size: 24px;
  
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    justify-content:center;
    color: var(--white);
    -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  line-height: 16px;
  width: 100px;
    
}
@media screen and (min-width: 768px) {
.date-text2{
  font-size: 40px;
  
    -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  line-height: 45px;
  width: 190px;
  line-height: 35px;
    
}
}

.date-text_vs{
  font-size: 30px;
  
  
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
   justify-content: center;
   color: var(--white);
   
   -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;


}
@media screen and (min-width: 768px) {
.date-text_vs{
  font-size: 60px;
}
}

.calendar-icon {
  margin-left: 1px;
  width: 8px;
  height: 8px;
  background-color: var(--deep-blue);
}
@media screen and (min-width: 768px) {
.calendar-icon {
  margin-left: 1px;
  width: 20px;
  height: 20px;
  background-color: var(--deep-blue);
}
}
.calendar-icon2{
  margin-left: 2px;
  width: 18px;
  height:18px;
  background-color: var(--deep-blue);

}
@media screen and (min-width: 768px) {
.calendar-icon2{
  margin-left: 2px;
  width: 32px;
  height:32px;
  background-color: var(--deep-blue);

}
}
.calendar-icon-in{
  font-size: 5px;
  justify-content: center;
  color: var(--white);
}
@media screen and (min-width: 768px) {
.calendar-icon-in{
  font-size: 15px;
}
}
.calendar-icon-in2{
  font-size: 12px;
  justify-content: center;
  color: var(--white);
  align-items: center;
}
@media screen and (min-width: 768px) {
.calendar-icon-in2{
  font-size: 24px;
}
}

.score-board {
  display: flex;
  justify-content:space-between;     /* 中央に配置 */
  align-items: center;
  flex-wrap: wrap;             /* スマホで崩れないように */
    margin: 0 auto;   
    padding-top: 5px;
    width: 300px;

}
@media screen and (min-width: 768px) {
.score-board {
  
    padding-top: 10px;
    width: 500px;
}
}



.team-left, .team-right-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%; /* 幅の調整 */
}
@media screen and (min-width: 768px) {
.team-left, .team-right-placeholder {
  
  width: 20%; /* 幅の調整 */
}
}





.team-logo {
  width: 45px; /* サイズ調整 */
  height: 55px; /* サイズ調整 */
  object-fit: contain;

}
@media screen and (min-width: 768px) {
.team-logo {
  width: 90px; /* サイズ調整 */
  height: 100px; /* サイズ調整 */
  

}
}

.placeholder-circle {
  width: 50px; /* サイズ調整 */
  height: 50px; /* サイズ調整 */
  border-radius: 50%;
  background-color: #ccc; /* プレースホルダーの色 */
  margin-bottom: 5px;
}
@media screen and (min-width: 768px) {
.placeholder-circle {
  width: 70px; /* サイズ調整 */
  height: 70px; /* サイズ調整 */

  margin-bottom: 10px;
}
}

.team-name {
  font-size: 5px;
  font-weight: bold;
  color: var(--black);
}
@media screen and (min-width: 768px) {
.team-name {
  font-size: 10px;
}
}


.score {
  font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
  font-size: 25px;
  font-weight: 700;
  color: var(--black); /* スコアの色 */
  
}
@media screen and (min-width: 768px) {
.score {
  font-size: 50px;
  padding: 0 10 px;
}
}

.stadium-wrapper{
  border-radius: 10px;
  width: 100px;
  height: 15px;
  background-color: var(--light-gray);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-top: -10px;
  
  
}
@media screen and (min-width: 768px) {
.stadium-wrapper{
  width: 200px;
  height: 30px;
  margin-top: 0px;
}
}

.stadium-wrapper2{
  border-radius: 10px;
  width: 100px;
  height: 15px;
  background-color: var(--light-gray);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
@media screen and (min-width: 768px) {
.stadium-wrapper2{
  width: 200px;
  height: 30px;
}
}

.stadium{
  font-size: 8px;
  color: var(--black);
  
}
@media screen and (min-width: 768px) {
.stadium{
  font-size: 14px;
}
}

.league {
  font-size: 8px;
  color: var(--black);
  margin-top: 3px;
  margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
.league {
  font-size: 12px;
  margin-top: 6px;
  margin-bottom: 16px;
}
}





.button-wrapper {
  text-align: center;
  width: 95px;
  height: 10px;
  margin: auto;
  margin-bottom: 16px;
  
  
}

@media screen and (min-width: 768px) {
.button-wrapper {
  width:150px;
  height: 30px;
 

  
 
}
}


.all-matches-button {
  background-color: var(--deep-blue); /* ボタンの色 */
  color: var(--white);
  border: none;
  padding: 5px 20px;
  border-radius: 5px;
  font-size: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  

}
@media screen and (min-width: 768px) {
.all-matches-button {
  padding: 8px 25px;
  font-size: 16px;
 
}
}


.all-matches-button:hover {
  background-color: #0056b3;
}


/* タブ切り替えエリア */
.pink-bg {
  background: var(--bright-pink);
  width: 100%;              /* スマホ幅 */
  height: 1023px;             /* 任意の高さ */
  position: relative;
  overflow: hidden;          /* はみ出し非表示！ */
}
@media screen and (min-width: 768px) {
.pink-bg {
  background: var(--bright-pink);
  width: 100%;              /* スマホ幅 */
      /* 任意の高さ */
  position: relative;
  overflow: hidden;   
  height: 1800px;               /* はみ出し非表示！ */
}
}
.white-circle {
  width: 800px;
  height: 800px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 50px;                 /* 上から50px */
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
.white-circle {
  width:2000px;
  height: 2000px;
  top: 100px;                

}
}


.white-circle2{
  width: 800px;
  height: 800px;
  background: var(--bright-pink);
  border-radius: 50%;
  position: absolute;
  top: 200px;                 /* 上から50px */
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../img/suke.png) ;
  background-position: center;
  object-fit: contain;
}
@media screen and (min-width: 768px) {
.white-circle2{
  width: 2000px;
  height: 2000px;
  top: 350px;   
}
}




.more {
  align-items: center;
  display: inline-flex;
  position: absolute;
  position: absolute;
 
  left: 50%;
  transform: translate(-50%, calc(-50% + 30px));
 
  -webkit-border-radius: 100%;
  border-radius: 100%;
  width: 15px;
  height: 15px;

  border-color: var(--white);
  border-style:solid ;
  border-width : 1px;

}

@media screen and (min-width: 768px) {
.more {
  
  -webkit-border-radius: 100%;
  border-radius: 100%;
  width: 20px;
  height: 20px;
top: 30px;
  border-color: var(--white);
  border-style:solid ;
  border-width : 1px;

}
}

  
.triangle {
  position: absolute;
  top: 20px;              /* 円よりちょい上に配置 */
  left: 50%;
  width: 11px;
  
  left: 1px;
  top: 3px;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% 100%,100% 0,0 0);
  background: linear-gradient(45deg,#fff);
  
}
@media screen and (min-width: 768px) {

.triangle {
  position: absolute;
  width: 15px;
  left: 1px;
  top: 3px;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% 100%,100% 0,0 0);
  background: linear-gradient(45deg,#fff);
  
}
}

.icon-list{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
  width: 200px;
  
 top: 30px;
 right: 300px;
  position: absolute;
 


}
@media screen and (min-width: 768px) {
  
.icon-list{
  gap: 15px;
  width: 500px;
  
 top: 64px;
 right:750px;


}
}

.icon-list2 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 180px;
  width: 375px;
  
  position: absolute;
  right:205px;
  top: 70px;

  
}
@media screen and (min-width: 768px) {
.icon-list2 {
  gap: 200px;
  width: 1084px;
  
  position: absolute;
  right:450px;
  top: 145px;

}
}


.icon-item {
 transition: transform 0.2s ease;
  cursor: pointer;
   text-align: center;
   transform: scale(1); /* 通常サイズ */
}




.icon-item.active {
  transform: scale(1.4); /* 選択中は少し大きく */
}

.icon-item img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.5em;
 

}
@media screen and (min-width: 768px) {
.icon-item img {
  width: 90px;
  height: 90px;

}
}


.icon-item p {
  font-weight: bold;
  font-size: 8px;
}



@media screen and (min-width: 768px) {
.icon-item p {
 
  font-size: 12px;
}
}






/* おおつについて */




.hero {
  
  text-align: center;
  padding: 40px 20px;
  position: relative;
  border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
  
   
  
}

@media screen and (min-width: 768px) {
.hero {
  padding: 120px 64px;
  
}
}
.logo {
  font-family: "Nothing You Could Do", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  text-shadow: 2px 2px 4px #000;

  /* 初期状態：非表示＆下にずらす */
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.logo.visible {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (min-width: 768px) {
  .logo {
    font-size: 60px;
  }
}



.kana {
  font-weight: bold;
  font-size: 9px;
  margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
.kana {
  font-size: 16px;
  margin-bottom: 20px;
}
}


.concept-title {

  font-family: "Nothing You Could Do", cursive;
    font-weight: 400;
    font-style: normal;
  font-size: 18px;
  color: white;
  margin: 20px 0 0 0;
}
@media screen and (min-width: 768px) {
.concept-title {
  font-size: 20px;
  margin: 54px 0 0 0;
}
}


.main-copy {
  font-size: 32px;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 4px #000;
}
@media screen and (min-width: 768px) {
.main-copy {
  font-size: 54px;
}
}

.sub-copy {
  color: white;
  font-size: 16px;
  line-height: 1.6;
  margin-top: 70px;
  margin-bottom: 70px;
  z-index: 10;
  position: relative;
  text-shadow: 4px 4px 9px #000;
  font-weight: 700;

  /* アニメーション前の状態 */
  opacity: 0;
  transform: translateY(20px);
  transition: all 1.2s ease-out;
}

.sub-copy.visible {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (min-width: 768px) {
  .sub-copy {
    font-size: 42px;
    margin-top: 150px;
    margin-bottom: 120px;
  }
}


.players-img {
  width: 100%;
  max-width: 200px;
  height: 175px;
  margin-top: 20px;
  z-index: 1;
  position: absolute;
  top: 250px;
  left: 300px;
 
}
@media screen and (min-width: 768px) {
.players-img {
  max-width: 500px;
  height: 400px;
  margin-top: 64px;
  top: 450px;
  left: 750px;

 
}
}


.intro {
  width: 343px;
  background: white;
  padding: 12px 30px;

  font-size: 12px;
  line-height: 1.6;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
@media screen and (min-width: 768px) {
  

.intro {
  width: 1084px;
  background: white;
  padding: 64px 32px;
  font-size: 18px;
  margin-top: 32px;
  border-radius: 10px;
  text-align: center;
  
}
}
@media screen and (min-width: 768px) {
  .br{display: none;

  }
}


.more-btn {
  display: inline-block;
  background: #e7519d;
  color: white;
  padding: 12px 32px;
  border-radius: 6px;
  margin: 20px auto 40px;
  text-align: center;
  font-weight: bold;
}
.mottomiru-button{
  background-color: var(--deep-blue); /* ボタンの色 */
  color: var(--white);
  border: none;
  padding: 5px 20px;
  
  border-radius: 5px;
  font-size: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: absolute;
  bottom: 64px;         /* 円の内側で下に配置 */
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  
}


.mottomiru-button2{
  background-color: var(--bright-pink); /* ボタンの色 */
  color: var(--white);
  border: none;
  padding: 5px 20px;
  width: 150px;
  height: 30px;
  border-radius: 5px;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: absolute;
  bottom: 64px;         /* 円の内側で下に配置 */
  left: 50%;
  transform: translateX(-50%);
 
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 768px) {
.mottomiru-button2{
  background-color: var(--bright-pink); /* ボタンの色 */
  color: var(--white);
  border: none;
  padding: 5px 20px;
  width: 250px;
  height: 50px;
  border-radius: 5px;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: absolute;
  bottom: 640px;         /* 円の内側で下に配置 */
  left: 50%;
  transform: translateX(-50%);
 
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
}

/* カテゴリー */



.white-circle_category{
  width: 800px;
  height: 800px;
  
  border-radius: 50%;
  position: absolute;
  top: 200px;                 /* 上から50px */
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../img/u18kv.JPG) ;
  background-position: center;
}
@media screen and (min-width: 768px) {
.white-circle_category{
  width: 2000px;
  height: 2000px;
  top: 350px;   
  border-radius: 50%;
  position: absolute;

  left: 50%;
  transform: translateX(-50%);
  background-image: url(../img/u18kv.JPG) ;
  background-position: center;
  background-size: cover;
}
}


.category-title{
  text-align: center;
  padding-top: 64px;
}

@media screen and (min-width: 768px) {
.category-title{
  text-align: center;
  padding-top:120px;
}
}

.Category-img{
  width: 126px;
  height: 50px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media screen and (min-width: 768px) {
.Category-img{
  width:250px;
  height: 90px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
}

.u12score{
  width: 100%;
  height: 200px;
  background-color: rgba(253, 252, 252, 0.5);
  margin: 0 auto;

}
@media screen and (min-width: 768px) {
.u12score{
  width: 800px;
  height: 380px;

}
}

.u12scoretext{
  font-size: 15px;
  color: var(--white);
  
  padding: 16px;
  text-align: center;
  background-color: var(--black);
  margin: 10px 16px;

}
@media screen and (min-width: 768px) {
.u12scoretext{
  font-size: 20px;
  padding: 32px;
  margin: 48px 32px;

}
}

.Category-img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(210, 51, 148, 0.5); /* ピンクの光り */
}


.category-subtitle{
  font-size: 10px;
  color: var(--white);
  
  padding: 10px;
  text-align: center;

}
@media screen and (min-width: 768px) {
.category-subtitle{
  font-size: 16px;
  padding: 32px;
}
}

.category-text{
  font-size: 15px;
  color: var(--white);
  
  padding: 32px;
  text-align: center;
}
@media screen and (min-width: 768px) {
.category-text{
  font-size: 25px;
  padding: 64px;
 
}
}



.league-scoreboard {
  width: 90%;
  max-width: 343px;
  margin: 50px auto;
  color: var(--black);
  background-color: rgba(255, 255, 255, 0.5);
}
@media screen and (min-width: 768px) {
.league-scoreboard {
  width: 90%;
  max-width: 1084px;
  margin: 64px auto;
  
  color: var(--black);
  background-color: rgba(255, 255, 255, 0.5);
}
}


.league-scoreboard__table {
  width: 100%;
  border-collapse: collapse;
}

.league-scoreboard__th,
.league-scoreboard__td {
  padding: 12px 8px;
  border-bottom: 1px solid #555;
  text-align: center;
}

@media screen and (min-width: 768px) {
.league-scoreboard__th,
.league-scoreboard__td {
  padding: 48px 32px;

}
}



.league-scoreboard__th {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--black);
  text-transform: uppercase;
}



.league-scoreboard__td {
  font-size: 16px;
}
.otsu-name{
  color: var(--bright-pink);
  text-shadow: 1px 1px 4px var(--white);

}

.league-scoreboard__row {
  transition: background 0.3s;
}

.league-scoreboard__row:hover {
  background-color: #2a2a2a;
  color: var(--white);
}

.league-scoreboard__header-row {
  border-bottom: 2px solid #777;
}


/* スクール */


.white-circle_school{
  width: 800px;
  height: 800px;
  background: var(--bright-pink);
  border-radius: 50%;
  position: absolute;
  top: 200px;                 /* 上から50px */
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../img/schoolkv.jpg);
  background-position: center;
}
@media screen and (min-width: 768px) {
.white-circle_school{
  width: 2000px;
  height: 2000px;
  top: 350px;   
background-size: cover;
}
}


.school-section{
  margin: 0 auto;
   width: 80%; /* または固定ピクセル値 */
}




.school-wrapper{
  display: flex;
  justify-content: center;
align-items: center;
text-align: center;
padding-top: 32px;
}
@media screen and (min-width: 768px) {
.school-wrapper{
padding-top: 120px;
}
}

.school-title{
  font-size: 32px;
  color: var(--white);
  font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin: 16px;
}
@media screen and (min-width: 768px) {
.school-title{
  font-size: 50px;
    margin: 32px;
}
}

.school-img{
  width: 60px;
  height: 60px;

}
@media screen and (min-width: 768px) {
.school-img{
  width: 100px;
  height: 100px;

}
}

.school-subtitle{
  font-size: 30px;
  color: var(--bright-pink);

    font-family: "Monomaniac One", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin: 16px;
}
@media screen and (min-width: 768px) {
.school-subtitle{
  font-size: 40px;
letter-spacing: 10px;
    margin: 32px;
}
}

.school-text_wrapper{
  display: flex;
 width: 343px;
 justify-content:space-between;
 align-items: center;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.school-text_wrapper{
 width: 600px;
}
}

.school-item{
  font-size: 16px;
  color: var(--white);
  width: 70px;
  background-color: var(--rose-pink);
  
  font-weight: 400;
  font-style: normal;
  text-align: center;
    

}
@media screen and (min-width: 768px) {
.school-item{
  font-size: 20px;
  color: var(--white);
  width: 100px;
  height: 40px;
  padding-top: 5px;
}
}


.school-text{

font-size: 16px;
  color: var(--white);
  
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin: 16px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);

}

@media screen and (min-width: 768px) {
.school-text{

  font-size: 20px;
    margin: 32px;
    padding: 2px;

}
}

.school-text2{
  font-size: 16px;
  color: var(--white);

    font-family: "Monomaniac One", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);

}
@media screen and (min-width: 768px) {
.school-text2{
  font-size: 20px;
}
}

.school-sns_wrapper{
  display: flex;
  justify-content: center;
 
}

.school-sns_img{
width: 270px;
height: 80px;
margin-top: 5px;


  
  
}
@media screen and (min-width: 768px) {
.school-sns_img{
width: 500px;
height: 120px;
margin-top:48px;
}
}

.school-text_color{
  background-color: rgba(0, 0, 0, 0.5);
  width: 343px;

margin: 0 auto;

}
@media screen and (min-width: 768px) {
.school-text_color{
  width: 600px;
}
}

.mottomiru-button_school{
  background-color: var(--bright-pink); /* ボタンの色 */
  color: var(--white);
  border: none;
  padding: 5px 20px;
  width: 150px;
  height: 30px;
  border-radius: 5px;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: absolute;
  bottom: 32px;         /* 円の内側で下に配置 */
  left: 50%;
  transform: translateX(-50%);
 
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 768px) {
.mottomiru-button_school{
  background-color: var(--bright-pink); /* ボタンの色 */
  color: var(--white);
  border: none;
  padding: 5px 20px;
  width: 250px;
  height: 50px;
  border-radius: 5px;
  font-size: 12px;
  top: 1350px;        /* 円の内側で下に配置 */
}
}



/* なでしこひろば*/



.white-circle_nadosiko{
  width: 800px;
  height: 800px;
  background: var(--bright-pink);
  border-radius: 50%;
  position: absolute;
  top: 200px;                 /* 上から50px */
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--rose-pink);
  background-position: center;
}
@media screen and (min-width: 768px) {
.white-circle_nadosiko{
  width: 2000px;
  height: 2000px;
  top: 350px;                 /* 上から50px */
  
}
}

.nadesikotitle{
  width: 343px  ;
  height:105px ;
}
@media screen and (min-width: 768px) {
.nadesikotitle{
  width: 700px  ;
  height:200px ;
  margin-top: 64px;
}
}

.nadesikotitle-wrapper{
  display: flex;
  justify-content: center;
  padding-top: 32px;
}
@media screen and (min-width: 768px) {
.nadesikotitle-wrapper{
  display: flex;
  justify-content: center;
  padding-top: 64px;
}
}

.nadesikokv{
  width: 343px;
  height: 250px;
  border: dotted 5px var(--white);


}
@media screen and (min-width: 768px) {
.nadesikokv{
  width: 800px;
  height: 500px;
  border: dotted 10px var(--white);
}
}


.nadesikokv-wrapper{
display: flex;
justify-content: center;
position: relative;

}

.nadeshiko-kvtitle{
  position: absolute;
  width: 210px;
  height: 60px;
  bottom: -25px;
  background-color: var(--white);
  
}
@media screen and (min-width: 768px) {
.nadeshiko-kvtitle{
  position: absolute;
  width: 700px;
  height: 150px;
  bottom: -70px;
 
  
}
}

.nadeshiko-kvtitle2{
  position: absolute;
  width: 85px;
  height: 80px;
  left: 200px;
  
  
}
@media screen and (min-width: 768px) {
.nadeshiko-kvtitle2{
  position: absolute;
  width: 165px;
  height: 160px;
  left: 500px;
}
}

.nadesiko-item_wrapper{
  display: flex;
  justify-content: center;
  margin: 75px 16px 32px;
  gap: 20px;



}
@media screen and (min-width: 768px) {
.nadesiko-item_wrapper{
  margin: 120px 16px 32px;
  gap: 30px;



}
}

.nadosiko-item1{
  background-color: var(--white);
  width: 120px;
  height: 80px;
  text-align: center;
  padding: 18px 5px;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;

}
@media screen and (min-width: 768px) {
.nadosiko-item1{
  background-color: var(--white);
  width: 200px;
  height: 100px;
  padding: 40px 10px;

}
}

.nadosiko-item2{
  background-color: var(--white);
  width: 120px;
  height: 80px;
  text-align: center;
  padding: 8px 5px;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;

}
@media screen and (min-width: 768px) {
.nadosiko-item2{
  background-color: var(--white);
  width: 200px;
  height: 100px;
  text-align: center;
  padding: 30px 5px;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;

}
}

.nadosiko-text{
  width: 375px;
 margin: 0 auto;
 text-align: center;
 font-family: "Zen Maru Gothic", sans-serif;
 font-weight: 400;
 font-style: normal;
}
@media screen and (min-width: 768px) {
.nadosiko-text{
  width: 100%;
 font-size: 20px;
}
}



/* フェスティバル */

.white-circle_festival{
  width: 800px;
  height: 800px;
  
  border-radius: 50%;
  position: absolute;
  top: 200px;                 /* 上から50px */
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../img/fesuback.jpg);
  background-position: center;
  background-size: cover;
  background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url(../img/fesuback.jpg);
}
@media screen and (min-width: 768px) {
.white-circle_festival{
  width: 2000px;
  height: 2000px;
  top: 380px;   
  border-radius: 50%;
  position: absolute;    
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../img/fesuback.jpg);
  background-position: center;
  background-size: cover;
  background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url(../img/fesuback.jpg);
}
}



.festiva-title{
  display: flex;
justify-content: center;
text-align: center;
align-items: center;
margin-top: 50px;


}
@media screen and (min-width: 768px) {
  
.festiva-title{
margin-top: 64px;
}
}

.festiva-title-img{
  width: 221px;
  height: 54px;

}
@media screen and (min-width: 768px) {
.festiva-title-img{
  width: 500px;
  height: 140px;

}
}

.festiva-kv_wrapper{
  
 display: flex;
 justify-content: center;
}

.festiva-kv{
  width: 343px;
  height: 200px;
 margin: 10px;
}
@media screen and (min-width: 768px) {
.festiva-kv{
  width: 700px;
  height: 300px;
 
}
}



.festiva-what_wrapper{
  width: 343px;
  
  background-color: var(--white);
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 5px;
  border: solid 1px var(--black);
}
@media screen and (min-width: 768px) {
.festiva-what_wrapper{
  width: 1000px;
  margin-top: 28px;
  border-radius: 10px;
}
}

.festiva-what{
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}
@media screen and (min-width: 768px) {
.festiva-what{
  font-size: 20px;
  padding: 10px;
}
}

.festiva-what_text{
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 10px;

}
@media screen and (min-width: 768px) {
.festiva-what_text{
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 32px;
  width: 700px;
  margin: 0 auto;

}
}

.festiva-can_text{
  font-size: 12px;
  font-weight: bold;
  text-align: center;
 
  width: 300px;
}
@media screen and (min-width: 768px) {
.festiva-can_text{
  font-size: 17px;
  font-weight: bold;
  text-align: center;
 
  width: 700px;
}
}

.festiva-can_wrapper{
  display: flex;justify-content: center;
  align-items: center;
  padding: 0px 9px;
 
}
@media screen and (min-width: 768px) {
.festiva-can_wrapper{
  gap: 40px;
 
}
}

.festiva-can_img{
  width: 50px;height: 50px;
}
@media screen and (min-width: 768px) {
.festiva-can_img{
  width: 100px;height: 100px;
}
}



/* ニュース */




.news-container {
  padding-top: 32px ; /* 内側の余白 */
  padding-bottom: 0px ; /* 内側の余白 */
  text-align: center;
}

@media screen and (min-width: 768px) {
.news-container {
  padding-top: 120px ; /* 内側の余白 */
}
}

.news-container2{
  padding: 32px 38px; /* 内側の余白 */
  background: linear-gradient(to top, #C2CDEC,#304A90);
  
  gap: 7px;
  text-align: center;

}
@media screen and (min-width: 768px) {
.news-container2{
  padding: 120px; /* 内側の余白 */
  gap: 32px;

}
}


.news-item {
  display: flex;
  align-items: center; /* タグと日付を中央揃え */
  
   /* 下にスペースを追加 */
   
 
}
.news-items{

  border-bottom: 1px solid var(--white);
}
.news-content {
  display: flex;
  flex-direction: column; /* 日付とテキストを縦に並べる */
 
  text-align: left;

 
}



.news-day{
  font-size: 12px;
 
  font-optical-sizing: auto;
 color: var(--white);

}
@media screen and (min-width: 768px) {
.news-day{
  font-size: 16px;
}
}

.news-text {
  font-size: 12px;
  padding: 15px 10px 5px ;
  color: var(--white);
  text-align: center;
 
 

}
@media screen and (min-width: 768px) {
.news-text {
  font-size: 18px;
  padding: 15px;
  color: var(--white);
  text-align: center;

}
}


.toppage-story {
  background-image: url(../img/01_top/back2.png);
  opacity: 0.8;
  padding: 16px;
  padding-bottom: 40px;
  text-align: center;
}


.news-top{
  width: 100%;
  background-color: var(--deep-blue);
}

.news-top_title{
  font-size: 18px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0 auto;
  color: var(--white);
position: relative;
text-align: center;

}
@media screen and (min-width: 768px) {
.news-top_title{
  font-size: 36px;
}
}

.news-top_title::after{
  content: "";
  width: 200px;
  height: 1px;
  background-color: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 30px));
 
}
@media screen and (min-width: 768px) {
.news-top_title::after{
  content: "";
  width: 300px;
  height: 1px;
}
}

.news-list{
  margin-top: 64px;
  padding: 18px ;
  height: 200px;
  background-color: var(--light-gray);
  width: 100%;

  display: flex;              /* 横並びにする */
    overflow-x: auto;           /* 横スクロールを有効にする */
    white-space: nowrap;        /* テキストが折り返さない（念のため） */
    scroll-snap-type: x mandatory; /* （お好みで）スクロールスナップも可 */
  gap: 23px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; 

}
@media screen and (min-width: 768px) {
.news-list{
  margin-top: 80px;
 
  height: 450px;
  gap: 20px;

}
}


.news-span_div{
  display: flex;
  justify-content: left;
 gap: 16px;
 padding-top: 10px;

  
}
@media screen and (min-width: 768px) {
.news-span_div{
  display: flex;
  justify-content: space-between;
 gap: 16px;
 padding-top: 15px;
}
}

.news-item_div{
  width: 180px;
  height: 60px;
  background-color: var(--white);
  padding:5px 8px 10px 8px;
}
@media screen and (min-width: 768px) {
.news-item_div{
  width: 400px;
  height: 120px;
  background-color: var(--white);
  padding:16px ;
}
}

.icon-div{
display: flex;
gap: 10px;
}


.news-item_img{
  width: 180px;
  height: 110px;
}
@media screen and (min-width: 768px) {
.news-item_img{
  width: 400px;
  height: 250px;
}
}

.news-item:first-child{
  
  margin: 0px;
}


.news-item_day{
  font-size: 8px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;

}
@media screen and (min-width: 768px) {

.news-item_day{
  font-size: 15px;
}
}

.news-item_icon{
  font-size: 5px;
  width: 40px;
  height: 10px;
  border-radius: 200px;
  background-color: var(--bright-pink);
  color: var(--white);
}
@media screen and (min-width: 768px) {
.news-item_icon{
  font-size: 10px;
  width: 100px;
  height: 18px;
}
}

.news-item_icon2{
  font-size: 8px;
  width: 60px;
  height: 15px;
  border-radius: 200px;
  background-color: var(--bright-pink);
  color: var(--white);
 text-align: center;
 padding: 2px;
}
@media screen and (min-width: 768px) {
.news-item_icon2{
  font-size: 15px;
  width: 150px;
  height: 32px;
 padding: 4px;
}
}


.news-item_text{
  font-size: 8px;
  margin: 0 auto;
  padding-top: 5px;
  display:block;
}
@media screen and (min-width: 768px) {
.news-item_text{
  font-size: 15px;
  padding: 10px;

}
}

.mottomiru-icon{
width: 150px;
height: 30px;
background-color: var(--bright-pink);
font-size: 8px;
color: var(--white);
text-align: center;
border-radius: 4px;
margin-top: 64px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

}
@media screen and (min-width: 768px) {
.mottomiru-icon{
width: 250px;
height: 50px;
background-color: var(--bright-pink);
font-size: 10px;
border-radius: 4px;
margin-top: 64px;

}
}



/* sns */



.FOLLOW{
  background: linear-gradient(to top, #fff,#C2CDEC);
width: 100%;

}


.forrow-title {
  font-size: 22px;
  padding-top: 32px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;

  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

@media screen and (min-width: 768px) {
  .forrow-title {
    font-size: 32px;
    padding-top: 64px;
  }
}

.forrow-title.visible {
  opacity: 1;
  transform: translateY(0);
}


.forrow-subtitle{
  font-size: 10px;
  text-align: center;
  
}
@media screen and (min-width: 768px) {
.forrow-subtitle{
  font-size: 20px;
  text-align: center;
  
}
}

.sns-div{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 18px 10px;

}
@media screen and (min-width: 768px) {
.sns-div{
  gap: 50px;
  padding: 20px 15px;

}
}

.sns-img{
  width: 50px;
  height: 50px;
  
}
@media screen and (min-width: 768px) {
.sns-img{
  width: 70px;
  height: 70px;
  
}
}

.snsslide-title{
  font-size: 15px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  padding-top: 32px;
 
}
@media screen and (min-width: 768px) {
.snsslide-title{
  font-size: 20px;
  padding-top: 84px;
 
}
}

.snsslide-div{
  display: flex;
  align-items: center;
  
  justify-content: center;
  overflow-x: auto;           /* 横スクロールを有効にする */
  white-space: nowrap;        /* テキストが折り返さない（*/
  gap: 23px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; 
  min-width: 150px; /* 横幅を保証する */
  flex-shrink: 0;   /* 縮まないようにする */
  padding: 18px;

}
@media screen and (min-width: 768px) {
.snsslide-div{
  padding: 64px 48px;
  gap: 50px;
  flex-shrink: 0;   /* 縮まないようにする */
 
}
}

.snsslide-img{
  width: 130px;
  height: 130px;

}

@media screen and (min-width: 768px) {
.snsslide-img{
  width: 300px;
  height: 300px;

}
}



/* information */





.information-nav{
  background-image: url(../img/information-nav.png) ;
  background-size: cover;
  width: 100%;
  height: 220px;
  margin-top: 32px;
  

}

@media screen and (min-width: 768px) {
.information-nav{
  height: 500px;
  
  margin-top: 64px;
}
}



.About-nav_ttl{
 font-size:  16px;
 font-family: "Nothing You Could Do", cursive;
 font-weight: 400;
 font-style: normal;
 text-align: center;
 padding-top: 12px;



}

@media screen and (min-width: 768px) {
.About-nav_ttl{
 font-size:  24px;
 padding-top: 32px;
}
}

.About-nav{
  width: 230px;
  height: 60px;
  background-color: var(--white);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 768px) {
.About-nav{
  width: 500px;
  height: 120px;
  background-color: var(--white);
  
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
}


.About-nav_text{
  font-size: 8px;
  text-align: center;
}
@media screen and (min-width: 768px) {
.About-nav_text{
  font-size:14px;
}
}


.About-nav:nth-child(1) {
  margin-left: auto;   /* 右寄せ */
  margin-right: 0;
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
.About-nav:nth-child(1) {
  margin-top: 0px;
}
}


.About-nav:nth-child(2) {
  margin: 0 auto;      /* 中央寄せ */
  margin-top: 20px;

}
@media screen and (min-width: 768px) {
.About-nav:nth-child(2) {
  margin-top: 32px;
}
}


.About-nav:nth-child(3) {
  margin-left: 0;      /* 左寄せ */
  margin-right: auto;
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
.About-nav:nth-child(3) {
 
  margin-top: 32px;
}
}
@media screen and (min-width: 768px) {
  .information-nav_wrapper{
    padding: 38px;
  }

}

  
.choice-button{
  display: flex;

  justify-content: center;
  gap: 15px;
  align-items: center;
 padding: 15px;
  
}
@media screen and (min-width: 768px) {
.choice-button{
  gap: 32px;
  
 padding-top: 32px;
  
}
}

.choice-button_item{
  width: 80px;
  height: 30px;
  background-color: var(--bright-pink);
  box-shadow: 1px 1px 4px #000;
  border-radius: 5px;
}
@media screen and (min-width: 768px) {
.choice-button_item{
  width: 200px;
  height: 60px;
  border-radius: 10px;
}
}

.choice-button_text{
  font-size: 8px;
  text-align: center;
  padding: 8px 0px;
  color: var(--white);
  font-weight: bold;

}
@media screen and (min-width: 768px) {
.choice-button_text{
  font-size: 15px;
  padding: 18px 0px;
  color: var(--white);
  font-weight: bold;
}
}




/* グラウンド */





.ground{
    width: 100%;
   
    background-color:var(--rose-pink);
    padding: 43px 16px;

}
@media screen and (min-width: 768px) {
.ground{
   
    padding: 120px 64px;

}
}

.ground-title{
  font-size: 18px;
  font-family: "Notable", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--dark-red);
  text-align: center;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--black);
  text-shadow: 2px 2px 5px rgba(253, 252, 252, 1);
}
@media screen and (min-width: 768px) {
.ground-title{
  font-size: 28px;
}
}

.ground-subtitle{
  font-size: 10px;
  
  color: var(--dark-red);
  text-align: center;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: var(--black);
  text-shadow: 2px 2px 5px rgba(253, 252, 252, 1);
  font-weight: bold;
}
@media screen and (min-width: 768px) {
.ground-subtitle{
  font-size: 20px;
}
}

.ground-text{
  font-size: 12px;
  padding-top: 23px;
  color: var(--white);
  
  text-align: center;
  font-weight: bold;


}
@media screen and (min-width: 768px) {
.ground-text{
  font-size: 18px;
  padding-top: 32px;
  color: var(--white);
  
  text-align: center;
  font-weight: bold;


}
}

.map{
  width: 100%;
  height: 300px;
padding: 16px;
}
@media screen and (min-width: 1080px) {
.map{
height: 100%;
padding: 100px;
}
}

.map-link{
  width: 100%;
  height: 280px;
  
}
@media screen and (min-width: 1080px) {
.map-link{
  width: 100%;
  height: 500px;
  
}
}

.ground-text2{
  padding: 32px 0;
  font-size: 12px;
  color: var(--white);
  
  text-align: center;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
.ground-text2{
  padding: 18px 0;
  font-size: 18px;
}
}



/* お問い合わせ */




.contact-top{
  padding: 32px 20px;
  background-image: url(../img/contactkv.png);
  width: 100%;
  display: flex;               /* フレックスボックスにする */
  flex-direction: column;      /* 縦に積む */
  align-items: center;         /* 横方向の中央寄せ */
  justify-content: center;     /* 必要なら縦方向中央寄せも追加 */
  object-fit: cover;
  margin-bottom: 32px;
}
 
@media screen and (min-width: 768px) {
.contact-top{
  padding: 64px 32px;
 
}
}



.contact-title{
  font-size: 18px;
  font-family: "Anton", sans-serif;
   
   font-weight: 400;
   font-style: normal;
   text-align: center;

}
 
@media screen and (min-width: 768px) {
.contact-title{
  font-size: 28px;
}
}

.contact-subtitle{
font-size: 10px;
text-align: center;

}
@media screen and (min-width: 768px) {
.contact-subtitle{
font-size: 20px;
}
}

.contact-toptext{
 font-size: 16px;
 
 font-weight: bold;
 color: var(--bright-pink);
 width: 100%;
 height: 50px;

 text-align: center;

}
@media screen and (min-width: 768px) {
.contact-toptext{
 font-size: 22px;
 
 height: 100px;
}
}


.contact-text{
  font-size: 10px;
  
 font-weight: bold;
 text-align: center;
 padding-top: 20px;
 
}
@media screen and (min-width: 768px) {
.contact-text{
  font-size: 16px;
 padding-top: 32px;
 
}
}

.mottomiru-icon2{
  min-width: 150px;
height: 30px;
background-color: var(--bright-pink);
font-size: 8px;
color: var(--white);
text-align: center;
border-radius: 4px;
margin-top: 18px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

}
@media screen and (min-width: 768px) {
.mottomiru-icon2{
  min-width: 350px;
  
height: 80px;
font-size: 15px;
margin: 32px;

}
}


.contact-toptext_wrapper{
  width: 343px;
  background-color: var(--white);
  padding: 18px;
  margin: 18px 0px;

}
@media screen and (min-width: 768px) {
.contact-toptext_wrapper{
  width: 1000px;
  background-color: var(--white);
  padding: 32px;
  margin: 64px 0px;

}
}



/* スポンサー */




.sponsor{
  background-color: var(--white);
  width: 100%;
  text-align: center;
  margin-top:32px ;
  margin: 0 auto;
  height: 500px;


  
}
@media screen and (min-width: 768px) {
.sponsor{
 
  width: 100%;
  height: 100%;
  padding: 64px 32px;
  
}
}

.sponsor-title{
  font-size: 18px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}
@media screen and (min-width: 768px) {
.sponsor-title{
  font-size: 28px;

}
}

.sponsor-subtitle{
  font-size: 10px;
  text-align: center;
  
}
@media screen and (min-width: 768px) {
.sponsor-subtitle{
  font-size: 16px;
}
}

.sponsor-div{
    margin-top: 16px;
    display: flex;
    flex-direction: column;      /* 縦に積む */
  align-items: center;         /* 横方向の中央寄せ */
  justify-content: center; 
  gap: 10px;
 

}
@media screen and (min-width: 768px) {
.sponsor-div{
    margin-top: 32px;

  gap: 30px;
}
}

.sponsor-img{
  width: 250px;
  height: 90px;
  margin-top: 32px;
}
@media screen and (min-width: 768px) {
.sponsor-img{
  width: 350px;
  height: 100px;
}
}

/* フッター */



.footer {
  background-color: #e03e84; /* ピンク背景（調整OK） */
  padding: 0px 10px ;
}
@media screen and (min-width: 768px) {
.footer {
  padding: 0px 120px ;
}
}


.footer-inner {
  display: flex;
  align-items: center;
}


.footer-players img {

  height: 100px; /* 適宜調整 */
  width: 150px;
}
@media screen and (min-width: 768px) {
.footer-players img {
  width: 350px;
}
}


.footer-bubble {
  background: #fff;
  border: 4px solid #000;
  padding: 5px 0px;
  margin-left: 2px;
  position: relative;
  width: 300px;
  height: 80px;
}
@media screen and (min-width: 768px) {
.footer-bubble {
  padding: 5px 0px;
  margin-left: 5px;
  width: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
}

.footer-nav_item{
  font-size: 8px;
  
 
}
@media screen and (min-width: 768px) {
.footer-nav_item{
  font-size: 12px;
}
}

.footer-bubble::after {
  content: '';
  position: absolute;
  left: -13px;
  bottom: 10px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-left: 4px solid #000;
  border-bottom: 4px solid #000;
  transform: rotate(45deg);
}

.footer-nav-row {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
@media screen and (min-width: 768px) {
.footer-nav-row {
  
  margin: 10px 0;
}
}

.footer-nav-row li {
  margin: 0 5px; /* 間隔調整 */
}
@media screen and (min-width: 768px) {
.footer-nav-row li {
  margin: 0 10px; /* 間隔調整 */
}
}


.footer-nav-row a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}
.footer-copy{
  font-size: 10px;
  color: var(--white);
  text-align: center;
  padding: 5px;

}

/* js */
.content-panel {
  display: none;
}

.content-panel.active {
  display: block;
}

/* ページ */


.page-span_kv{
  width: 100%;
  height: 175px;
background-color: var(--rose-pink);
padding: 56px 16px;
}

@media screen and (min-width: 768px) {
.page-span_kv{
  width: 100%;
  height: 450px;
padding: 250px 100px;
}
}

.page-span_title{
  font-size: 24px;
  font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--white);
   text-align: center;

}
@media screen and (min-width: 768px) {
.page-span_title{
  font-size: 28px;
  
}
}
@media screen and (min-width: 768px) {
.page-span_kv{
padding: 180px  32px;
text-align: center;
}
}

.page-span_subtitle{
  font-size: 10px;
  font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--white);
    text-align: center;
   
}
@media screen and (min-width: 768px) {
.page-span_subtitle{
  font-size: 18px;

  
}
}

.page-title {
  font-size: 14px;         /* 必要に応じて調整 */
  color:var(--black);             /* テキスト色（黒に近いグレー） */
  position: relative;      /* 疑似要素で線を引くために必要 */
  display: inline-block;   /* 線の幅をテキストに合わせる */
  padding: 6px 8px ;      /* 左線のスペースを空ける */
  margin-top: 20px;
  text-align: center;
}
@media screen and (min-width: 768px) {
.page-title {
  font-size: 20px;         /* 必要に応じて調整 */
  color:var(--black);             /* テキスト色（黒に近いグレー） */
  position: relative;      /* 疑似要素で線を引くために必要 */
  display: inline-block;   /* 線の幅をテキストに合わせる */
  padding: 12px 20px ;      /* 左線のスペースを空ける */
  margin-top: 32px;
  text-align: center;
}
}


.page-title::before,
.page-title::after {
  content: "";
  position: absolute;
  background-color: #e4007f; /* ピンクの色（調整可） */
  
}

.page-title::before {
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;  
          /* 左線の太さ */
  
}
@media screen and (min-width: 768px) {
.page-title::before {
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;  
          /* 左線の太さ */
  
}
}


.page-title::after {
  left: 0;
  bottom: 0;
  height: 1px;            /* 下線の太さ */
  width: 270px;
}
@media screen and (min-width: 768px) {
.page-title::after {
  left: 0;
  bottom: 0;
  height: 2px;            /* 下線の太さ */
  width: 350px;
  
}
}

/* ニュースページ */

.newspage-nav_item{
  font-size: 10px;
}
@media screen and (min-width: 768px) {
.newspage-nav_item{
  font-size: 16px;
}
}


.news-card {
  width: 100%; /* 調整可能 */
  border: 1px solid #ccc;
 margin-top: 16px;
  overflow: hidden;
  font-family: sans-serif;
  background: #fff;
}
@media screen and (min-width: 768px) {
.news-card {
  border: 2px solid #ccc;
 margin-top: 48px;
 width: 80%;
 margin: 0 auto;
 margin-top: 48px;

}
}


.news-image {
  width: 100%;
  height: 180px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px) {
.news-image {
  height: 400px;
  
}
}


.news-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}



.news-info {
  padding: 8px;
  height: 100px;
}
@media screen and (min-width: 768px) {
.news-info {
  padding: 16px;
  height: 160px;
}
}


.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 4px;
  margin-bottom: 4px;
}
@media screen and (min-width: 768px) {
.news-meta {
  padding-bottom: 18px;
 
}
}


.news-date {
  font-size: 12px;
  font-weight: bold;
  font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
}
@media screen and (min-width: 768px) {
.news-date {
  font-size: 18px;
}
}


.news-category {
  font-size: 10px;
  color: #fff;
  background: #e91e63; /* ピンク */
  border-radius: 12px;
  padding: 2px 6px;
}
@media screen and (min-width: 768px) {
.news-category {
  font-size: 16px;
  padding: 4px 8px;
}
}


.newspage-text {
  font-size: 13px;
  margin: 0;
  text-align: center;
 padding-top: 15px;
}
@media screen and (min-width: 768px) {
.newspage-text {
  font-size: 18px;
  margin: 0;
  text-align: center;
 padding: 15px;
}
}


.page-wrapper{
  padding: 32px 16px;
}


/* 試合ページ */
/* === おおつ VICTORIES - style.css === */



/* 試合結果のメインコンテナ */



.game-page_wrapper{
width: 100%;
height: 90px; /* ここは用途に応じて調整してください */
}


/* ページ全体のコンテンツ幅制御用のコンテナ */
.container5 {
width: 100%;
max-width: 768px; /* 全体の最大幅 */
padding-top:20px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 768px) {
.container5 {
  width: 100%;
max-width: 1300px; /* 全体の最大幅 */
padding: 0 15px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
}


/* 試合結果セクションのラッパー */
.game_div{
  padding:  0px 30px 30px;

}
@media screen and (min-width: 768px) {
.game_div{
  padding-bottom:  60px;

}
}

.game-wrapper {
padding-top: 20px;
box-sizing: border-box;
max-width: 600px; /* 内部コンテンツ（カードなど）の最大幅に合わせる */
margin-left: auto;
margin-right: auto;

background-color: var(--bright-pink); /* 元々最初の定義にあった背景色 */

}
@media screen and (min-width: 768px) {
.game-wrapper {
padding: 20px 0px;
box-sizing: border-box;
max-width: 1500px; /* 内部コンテンツ（カードなど）の最大幅に合わせる */
margin-left: auto;
margin-right: auto;


background-color: var(--bright-pink); /* 元々最初の定義にあった背景色 */

}
}


/* シーズンごとのセクション */
.season-section {
margin-bottom: 50px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
@media screen and (min-width: 768px) {
.season-section {
margin-bottom: 64px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 64px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
}


.season-header {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-bottom: 15px;
}



.season-header .game-main_topic {
font-size: 26px; /* シーズンタイトルを少し大きく */
margin-bottom: 0;
margin-right: 15px;
font-family: "Anton", sans-serif;
font-weight: 400;
font-style: normal;
color: var(--white);
text-align: center;
}
@media screen and (min-width: 768px) {
.season-header .game-main_topic {
font-size: 40px; /* シーズンタイトルを少し大きく */
}
}


/* シーズン開閉用の矢印 (season-triangle) */
.season-triangle {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #fff; /* 下向きの白い矢印 */
transition: transform 0.3s ease;
}
@media screen and (min-width: 768px) {
.season-triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #fff; /* 下向きの白い矢印 */
transition: transform 0.3s ease;
}
}

.season-triangle.expanded {
transform: rotate(180deg); /* 展開時に上向きに回転 */
}

/* シーズンコンテンツのラッパー (開閉対象) */
.season-content-wrapper {
overflow: hidden;
transition: max-height 0.5s ease-out, opacity 0.5s ease;
max-height: 2000px; /* 十分な最大高さ */
opacity: 1;
}


.season-content-wrapper.hidden {
max-height: 0;
opacity: 0;
pointer-events: none;
visibility: hidden;
}


/* 「過去の試合」「今後の試合」ボタンコンテナ */
.game-navigation {
display: flex;
justify-content: center;
margin-bottom: 30px;
background-color: #f0f0f0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 768px) {
.game-navigation {
display: flex;
justify-content: center;
margin-bottom: 64px;
background-color: #f0f0f0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
}


.nav-button {
flex: 1;
padding: 12px 0;
border: none;
background-color: #f0f0f0;
color: var(--black);
font-size: 1em;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
outline: none;
text-align: center;
}
@media screen and (min-width: 768px) {
.nav-button {
flex: 1;
padding: 20px 0;
border: none;
background-color: #f0f0f0;
color: var(--black);
font-size: 22px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
outline: none;
text-align: center;
}
}


.nav-button:not(:last-child) {
border-right: 1px solid #ccc;
}

.nav-button.active {
background-color: #2e64a4;
color: #fff;
}

/* カテゴリごとの見出し (TOP, U-18など) */
.category-game {
display: flex; /* flexboxで中央寄せ */
align-items: center; /* 垂直方向の中央寄せ */
justify-content: center; /* 水平方向の中央寄せ */
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
cursor: pointer;
text-align: center;
padding: 20px 0;
}

@media screen and (min-width: 768px) {
.category-game {
display: flex; /* flexboxで中央寄せ */
align-items: center; /* 垂直方向の中央寄せ */
justify-content: center; /* 水平方向の中央寄せ */
margin-bottom: 64px;
position: relative;
padding-bottom: 18px;
cursor: pointer;
text-align: center;
padding: 40px 0;
}
}


.category-game_title {
color: #fff;
font-weight: bold;
font-size: 1.2em; /* 以前の24pxから相対値に変更 */
margin-right: 10px;
padding: 5px 15px;
background-color: #2e64a4;
border-radius: 5px;
white-space: nowrap;
letter-spacing: 2px;
font-family: "Anton", sans-serif;
font-weight: 400;
font-style: normal;
}
@media screen and (min-width: 768px) {
.category-game_title {
color: #fff;
font-weight: bold;
font-size: 28px; /* 以前の24pxから相対値に変更 */
margin-right: 10px;
padding: 10px 25px;
background-color: #2e64a4;
border-radius: 5px;
white-space: nowrap;
letter-spacing: 2px;
font-family: "Anton", sans-serif;
font-weight: 400;
font-style: normal;
}
}


/* カテゴリ開閉用の矢印 (category-game_triangle) */
.category-game_triangle {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #fff; /* 下向きの白い矢印 */
cursor: pointer;
transition: transform 0.3s ease;
/* 以前の不要なプロパティを削除済み */
}
@media screen and (min-width: 768px) {

.category-game_triangle {
width: 0;
height: 0;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-top: 18px solid #fff; /* 下向きの白い矢印 */
cursor: pointer;
transition: transform 0.3s ease;
/* 以前の不要なプロパティを削除済み */
}
}

.category-game_triangle.expanded {
transform: rotate(180deg); /* 展開時に上向きに回転 */
}


.category-game_line {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 2px;
background-color: #ccc;
margin-top: 6px;
}
@media screen and (min-width: 768px) {
.category-game_line {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 5px;
background-color: #ccc;
margin-top: 12px;
}
}


/* 各カテゴリの試合カードを囲むコンテナ (開閉対象) */
.game-cards-container {
overflow: hidden;
transition: max-height 0.5s ease-out;
max-height: 0; /* 初期状態で非表示 */
margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
.game-cards-container {
overflow: hidden;
transition: max-height 0.5s ease-out;
max-height: 0; /* 初期状態で非表示 */
margin-bottom: 64px;
}
}


.game-cards-container.show {
max-height: 5000px; /* 十分な最大高さ */
}

@media screen and (min-width: 768px) {
.game-cards-container.show {
max-height: 6000px; /* 十分な最大高さ */
}
}


/* 「過去の試合」「今後の試合」コンテンツセクション */
.game-content-section {
  transition: opacity 0.5s ease, max-height 0.5s ease;
  opacity: 1;
  /* min-height: 1000px; */ /* これをコメントアウトか削除 */
  max-height: 700px;       /* 高さ制限してスクロール可能に */
  overflow-y: auto;        /* 縦スクロールを許可 */
  position: relative;
}
@media screen and (min-width: 768px) {
  .game-content-section {
    transition: opacity 0.5s ease, max-height 0.5s ease;
    opacity: 1;
    /* min-height: 1000px; */ /* こちらも同様に外す */
    max-height: 700px;
    overflow-y: auto;
    position: relative;
  }
}



.game-content-section.hidden {
opacity: 0;
max-height: 0;
pointer-events: none;
visibility: hidden;
}


/* 各ゲームカード */
.game-card {
background-color: #fff;
border-radius: 5px;
padding: 10px 15px;
margin-bottom: 15px;
color: var(--black);
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
@media screen and (min-width: 768px) {
.game-card {
background-color: #fff;
border-radius: 5px;
padding: 20px 30px;
margin-bottom: 30px;
color: var(--black);
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
}

.game-info {
width: 100%;
}

.game-date2 { /* HTMLで使われているクラス名 */
font-size: 8px;
color: var(--black);
margin-bottom: 5px;
text-align: left;
}
@media screen and (min-width: 768px) {
.game-date2 { /* HTMLで使われているクラス名 */
font-size: 16px;
color: var(--black);
margin-bottom: 15px;
text-align: left;
}
}



.game-details {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}




.team-name2 {
font-weight: bold;
font-size: 1em;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
color: var(--bright-pink);
}
@media screen and (min-width: 768px) {
.team-name2 {
font-weight: bold;
font-size: 28px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
color: var(--bright-pink);
}
}


.vs-text {
font-size: 1.2em;
font-weight: bold;
color: var(--deep-blue);
margin: 0 10px;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {

.vs-text {
font-size: 28px;
font-weight: bold;
color: var(--deep-blue);
margin: 0 10px;
flex-shrink: 0;
}
}


.opponent-placeholder {
width: 40px;
height: 40px;
border: 2px dashed #ccc;
border-radius: 50%;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.opponent-placeholder {
width: 80px;
height: 80px;
border: 2px dashed #ccc;
border-radius: 50%;
flex-shrink: 0;
}
}


.card-line {
width: calc(100% - 20px);
height: 1px;
background-color: #eee;
margin-top: 10px;
}
@media screen and (min-width: 768px) {
.card-line {
width: calc(100% - 20px);
height: 1px;
background-color: #eee;
margin-top: 20px;
}
}



/* game-details 内の配置を調整する */
.game-details {
  display: flex;
  align-items: center;
  gap: 10px; /* 要素間のスペース */
  /* 必要に応じて justify-content などで配置を調整 */
}
@media screen and (min-width: 768px) {
.game-details {
  display: flex;
  align-items: center;
  gap: 20px; /* 要素間のスペース */
  /* 必要に応じて justify-content などで配置を調整 */
}
}


.game-score {
  font-size: 1.2em; /* スコアの文字サイズ */
  font-weight: bold;
  color: var(--black); /* スコアの色 */
}

@media screen and (min-width: 768px) {
.game-score {
  font-size: 28px; /* スコアの文字サイズ */
  font-weight: bold;
  color: var(--black); /* スコアの色 */
}
}


.opponent-name {
 font-weight: bold;
font-size: 1em;
flex-grow: 1;
line-height: 1.3; /* 行間を少し広げるなど */
flex-grow: 1; /* 残りのスペースを埋める */
text-align: right; /* 右寄せ */
text-align: left;
color: var(--black);
width: 75px;
}

@media screen and (min-width: 768px) {
.opponent-name {
 font-weight: bold;
font-size: 28px;
flex-grow: 1;
line-height: 1.3; /* 行間を少し広げるなど */
flex-grow: 1; /* 残りのスペースを埋める */
text-align: right; /* 右寄せ */
text-align: left;
color: var(--black);
width: 100px;
}
}

  /* 必要に応じてスタイルを追加 */


/* VSテキストが不要になる場合は非表示にするか削除 */
/* .vs-text { */
 /* display: none; }*/ /* 過去の試合でスコア表示する場合 */




/* おおつについて */


.aboutpage-logo{
  font-family: "Nothing You Could Do", cursive;
  font-weight: 400;
  font-style: normal;

font-size: 40px;
text-shadow: 2px 2px 4px #000;
text-align: center;
margin-top: 32px;
margin-bottom: 18px;

}
@media screen and (min-width: 768px) {
.aboutpage-logo{
font-size: 60px;
margin-top: 68px;
margin-bottom: 32px;

}
}


.aboutpage-wrapper{
  width: 300px;
  padding: 10px ;
  margin-top: 32px;
  background-color: var(--rose-pink);
  border-radius: 10px;
  margin: 0 auto;

}
@media screen and (min-width: 768px) {
.aboutpage-wrapper{
  width: 600px;
  padding: 64px ;
  margin-top: 64px;
}
}
@media screen and (min-width: 1080px) {
.aboutpage-wrapper{
  width: 1080px;
  padding: 64px ;
  margin-top: 64px;
}
}

.aboutpage-text{
  font-size: 12px;
  text-align: center;
  line-height: 28px;
}
@media screen and (min-width: 768px) {
.aboutpage-text{
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 1px;
  text-align: center;
 
}
}

.about-concept_title{

  font-family: "Nothing You Could Do", cursive;
    font-weight: 400;
    font-style: normal;
  font-size: 18px;
  color:var(--white);
  margin: 20px 0 0 0;
  text-shadow: 2px 2px 4px var(--black);
  
  text-align: center;
}
@media screen and (min-width: 768px) {
.about-concept_title{

  font-size: 28px;
  margin: 48px 0 0 0;
}
}

.about-main_copy{
  font-size: 32px;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 4px #000;
  -webkit-text-stroke-width: 0.1px;
  -webkit-text-stroke-color: black;
  text-align: center;
}
@media screen and (min-width: 768px) {
.about-main_copy{
  font-size: 60px;
}
}


.aboutpage-concept{
display: flex;
justify-content: right;
position: relative;
}


.aboutpage-concept_img{
width: 300px;
height: 300px; 
position: absolute;
left: -170px;

}
@media screen and (min-width: 768px) {
.aboutpage-concept_img{
width: 800px;
height: 800px; 
position: absolute;
left: -350px;
margin-top: 80px;

}
}


.aboutpage-concept_wrapper{
 margin-left: 150px;
 margin-top: 18px;

}
@media screen and (min-width: 768px) {
.aboutpage-concept_wrapper{
  margin-right: 100px;
 margin-top: 120px;
margin-bottom: 120px;
}
}

.aboutpage-concept_text{
  font-size: 12px;
  color: var(--black);
  text-align: left;
  padding-top: 28px;
 
  
}
@media screen and (min-width: 768px) {
.aboutpage-concept_text{
  font-size: 20px;
  padding-top: 80px;
  
}
}


.aboutpage-category_title{
  font-size:  12px;
  width: 200px;
  height: 40px;
  background-color: var(--rose-pink);
  border-radius: 10px;
  text-align: center;padding: 10px;
  margin-top: 32px;

}
@media screen and (min-width: 768px) {
.aboutpage-category_title{
  font-size:  20px;
  width: 400px;
  height: 60px;
  text-align: center;
  padding: 16px ;
  margin-top: 64px;
  

}
}
@media screen and (min-width: 768px) {
  .aboutpage_wrapper{
    display: flex;
    gap: 120px;
   justify-content: center;
   width: 900px;
   margin: 0 auto;

padding-top: 32px;
  }


}
@media screen and (min-width: 768px) {
  .aboutpage-text_wrapper{
    padding-top: 32px;
  }
}

.aboutpage-category_text{
  font-size: 12px;
  padding-top: 12px;
}
@media screen and (min-width: 768px) {
.aboutpage-category_text{
  font-size: 22px;
  padding-top: 32px;
}
}

.aboutpage-member_imgwrapper{
  width: 300px;
  height: 170px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 32px;
}
@media screen and (min-width: 768px) {
.aboutpage-member_imgwrapper{
  width: 700px;
  height: 300px;
  margin-top: 120px;
}
}

.aboutpage-member_img{
  width: 100%;
  height: 100%;
 
  object-fit: cover;
  object-position: 50% 20%;
  

}

.aboutpage-member_textwrapper{
  margin-top: 32px;
  padding: 32px;
  background-color: #fff; 
  border-radius: 8px; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* 軽く影をつける */
  margin-bottom: 32px;
  text-align: center;

}
@media screen and (min-width: 768px) {
.aboutpage-member_textwrapper{
  margin-top: 84px;
  padding: 64px;
  margin-bottom: 64px;

}
}

.aboutpage-member_text{
  font-size: 12px;
  color: var(--black);
}
@media screen and (min-width: 768px) {
.aboutpage-member_text{
  font-size: 22px;
}
}

.aboutpage-member_text-b{
  font-size: 20px;
  color: var(--black);
}
@media screen and (min-width: 768px) {
.aboutpage-member_text-b{
  font-size: 38px;
  color: var(--black);
}
}

.about-member_title{
  font-size: 12px;
  padding: 8px;
  border-bottom:solid 1px #d9d9d9 ;
  
  text-align: center;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
.about-member_title{
  font-size: 22px;
  padding: 32px;
 width: 100%;
}
}

.about-coach_wrapper{
  width: 300px;
  height: 170px;
  margin: 0 auto;
  padding-top: 16px;

}
@media screen and (min-width: 768px) {
.about-coach_wrapper{
  width: 700px;
  height: 400px;
  margin: 0 auto;
  padding-top: 64px;
}
}

.about-coach_img{
  width: 100%;
  height: 100%;

}



.about-coach_div{
  padding: 32px;
  background-color: #fff; 
  border-radius: 8px; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* 軽く影をつける */
  margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
.about-coach_div{
  padding: 64px;
  background-color: #fff; 
  border-radius: 8px; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* 軽く影をつける */
  margin-bottom: 64px;
}
}

.about-coach_textname{
  font-size: 18px;
  color: var(--black);
  text-align: center;
}
@media screen and (min-width: 768px) {
.about-coach_textname{
  font-size: 25px;
}
}

.about-coach_text{
  font-size: 12px;
  color: var(--black);
  text-align: center;
}
@media screen and (min-width: 768px) {
.about-coach_text{
  font-size: 20px;
}
}

.coach-wrapper{
  display: flex;
  padding: 15px 32px; 
  align-items: center;
  gap: 32px; 
  margin-bottom: 25px; 
  background-color: #fff; 
  border-radius: 8px; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* 軽く影をつける */
  margin-top: 32px;

}
@media screen and (min-width: 768px) {
.coach-wrapper{
 
  padding: 64px ; 
 
  gap: 200px; 
  margin:120px

}
}

.coach-img{
  width: 100px;
  height: 100px;
  background-color: var(--light-gray);

}
@media screen and (min-width: 768px) {
.coach-img{
  width: 200px;
  height:300px;
  

}
}

.coach-text_wrapper{
  text-align: left;
}
.coach-text{
  font-size: 15px;
  color: var(--black);

}
@media screen and (min-width: 768px) {
.coach-text{
  font-size: 25px;
}
}

.coach-text2{
  font-size: 10px;
  color: var(--black);
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
.coach-text2{
  font-size: 18px;
}
}

.member-count{
  text-align: center;
  padding: 28px;

}
@media screen and (min-width: 768px) {
.member-count{
  text-align: center;
  padding: 64px;
  font-size: 20px;

}
}

.home{
  padding:32px ;
  text-align: center;
  font-size: 20px;
  font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;

}
@media screen and (min-width: 768px) {
.home{
  padding:64px ;
  font-size: 28px;

}
}

.home-img_wrapper{
  width: 250px;
  height: 250px;
margin:0 auto;
@media screen and (min-width: 768px) {
.home-img_wrapper{
  width: 500px;
  height: 500px;
margin:0 auto;

}
}

.home-img{
  width: 100%;
  height: 100%;
}


.og-wrapper{
  margin: 32px 0px;

}
@media screen and (min-width: 768px) {
.og-wrapper{
  margin: 64px 0px;

}
}

.og-kv{
  width: 311px;
  height: 207px;
}
@media screen and (min-width: 768px) {

.og-kv{
  width: 1080px;

}
}



/* スケジュール */


.schedule-div {
  margin-bottom: 120px;
}

/* レスポンシブ埋め込み用のラッパー */


.schedule-wrapper {
  width: 100%;
  height: 1000px; /* とにかく大きくしてみる */
  position: relative;
  overflow: visible;
}

.schedule-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}











.schedule-text{
  font-size: 12px;
  color: var(--black);
  padding-top: 32px;
}

@media screen and (min-width: 768px) {
.schedule-text{
  font-size: 18px;
  color: var(--black);
  padding-top: 64px;
}
}



.groundpage-text{
  font-size: 12px;
  padding-top: 120px;
  color: var(--black);
  text-align: center;
}
@media screen and (min-width: 768px) {
.groundpage-text{
  font-size: 20px;
  padding-top: 64px;
  margin: 0 auto;
  
  
}}




.information-title_wrapper{
  padding: 32px 16px;

}


.information-title_wrapper{
  padding:64px 32px;

}



/* ======================================== */
/* 練習スケジュールテーブル */
/* ======================================== */
.practice-schedule-table {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  max-width: 600px; /* 必要であれば最大幅を設定 */
  border-collapse: collapse; /* セルの境界線を結合する */
  margin: 10px auto; /* 上下の余白と中央寄せ */
  font-family: 'Noto Sans JP', sans-serif; /* 日本語フォントの指定 */
  color: var(--black); /* テキスト色を黒に設定（あなたの変数を想定） */
  font-size: 14px; /* 全体のフォントサイズ調整 */
  border: 1px solid var(--black); /* テーブル全体の外枠 */
}

/* ヘッダーのスタイル */
.practice-schedule-table thead th {
  background-color: #e4007f; /* ピンクの色 */
  color: #fff; /* 文字色を白に */
  padding: 12px 10px; /* 上下左右のパディング */
  text-align: center; /* テキストを中央揃え */
  border: 1px solid var(--black); /* セル間の境界線 */
  white-space: nowrap; /* ヘッダーの文字は折り返さない */
}

/* ボディのセルのスタイル */
.practice-schedule-table tbody td {
  padding: 10px; /* 上下左右のパディング */
  text-align: center; /* テキストを中央揃え */
  border: 1px solid var(--black); /* セル間の境界線 */
  vertical-align: middle; /* セルの内容を垂直方向の中央に揃える */
}

/* 偶数行の背景色（必要であれば） */
/*
.practice-schedule-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
*/

/* 日曜日・祝日の行のスタイル（colspanの影響で高くなる場合） */
.practice-schedule-table tbody tr:last-child td {
  /* 必要に応じて調整。コンテンツが中央に来るように */
  padding: 10px; /* 上下パディング */
}


/* 日曜日・祝日の行で「基本試合」が入るセル */

/* コンタクト */


.contact_kv {
  height: 412px;
  background: linear-gradient(rgba(51, 51, 51, 0.4), rgba(51, 51, 51, 0.4)),
    url(../img/kv4.JPEG) center top / cover;
}

.contact_title {
  padding-top: 64px;
  position: relative;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .contact_title {
    padding-top: 120px;
  }
}

.title_caption {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  font-size: 14px;
}

@media screen and (min-width: 768px) {
  .title_caption {
    font-size: 28px;
  }
}

.contact_desc {
  font-size: 14px;
  display: flex;
  justify-content: center;
  margin: 32px 8px;
  text-align: center;
  line-height: 2;
}

.contact_form {
  padding: 0 16px;
  letter-spacing: normal;
  width: 100%;
}

.contact_form_heading {
  background-color:var(--bright-pink);
  border: 1px solid #170303;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
}

.contact_form_heading:not(:first-child) {
  margin-top: 8px;
}

@media screen and (min-width: 768px) {
  .contact_form_heading:not(:last-of-type) {
    width: 40%;
    height: 56px;
    margin: 0 0 18px 0;
    float: left;
  }
}

.contact_form_detail {
  display: flex;
  flex-direction: column;
  background-color: var(--rose-pink);
  border:  0px solid #170303;
  padding: 8px 32px;
}

@media screen and (min-width: 768px) {
  .contact_form_detail:not(:last-child) {
    width: 60%;
    height: 56px;
    padding: 12px ;
    margin: 0 0 10px 0;
  }

  .contact_form_detail:last-child {
    padding: 32px;
  }
}

.contact_form_required {
  font-size: 6px;
  padding: 0 2px;
  background: var(--white);
  margin-left: 16px;
  color: var(--black);
}

.contact_form_input {
  background: var(--white);
  width: 100%;
  border-radius: 5px;
}

.contact_form_textarea {
  background: var(--white);
  width: 100%;
  height: 160px;
  border-radius: 5px;
}

.contact_form_btn-wrapper {
  padding: 48px;
}

.contact_btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact_btn_input {
  padding: 8px 48px;
  transition: 0.3s;
  color: var(--white);
  background: var(--bright-pink);
  cursor: pointer;
  text-shadow: 0 5px 5px rgba(0,0,0,0.1);
}

.contact_cation {
  font-size: 12px;
  background: var(--light-gray);
  line-height: 3;
  padding: 32px 8px;
  text-align: center;
  margin-bottom: 40px;
}

.form_error {
  box-sizing: border-box;
  border-radius: 5px;
  background-color: red;
  display: block;
  font-weight: bold;
  margin-top: 10px;
  position: relative;
  padding: 0 10px;
  font-size: small;
  color: #fff;
}

.form_error::before {
  content: "";
  border: 10px solid transparent;
  border-bottom: 15px solid red;
  position: absolute;
  top: -25px;
  left: 5%;
}

.hidden {
  display: none;
}

.contact_form_title{
  background-color: #ffe6f0; /* 薄いピンクの背景 */
    color: #cc6688;
    padding: 10px 20px;
    border-radius: 25px; /* 丸い吹き出し */
    display: inline-block; /* 内容に合わせて幅を調整 */
    width: 100%;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
    margin: 0 auto 30px;
   
    text-align: center;

  
  }
}




/* スポンサー参考 */



/* リンクの共通設定 */
.link-reset {
  text-decoration: none;
  color: inherit;
}

/* 画像リセット */
.img-fluid {
  max-width: 100%;
  height: auto;
}

/* ===== ページヘッダー ===== */
.page-header {
  padding: 80px 20px 40px;
  background: linear-gradient(135deg, #ff6f91, #ff9671);
  color: #fff;
}

.page-header .page-title {
  font-size: 2.8rem;
  margin-bottom: 10px;
  letter-spacing: 2px;
  text-align: center;
}

.page-subtitle {
  font-size: 20px;
  text-align: center;
  opacity: 0.9;
  margin: 32px 16px;
  color: var(--white);
  background-color: var(--bright-pink);
}
@media screen and (min-width: 768px) {
  
.page-subtitle {
  font-size: 32px;
  margin: 64px 32px;
  height: 100px;
  padding: 25px;
  
}
}

.page-description {
  margin-top: 20px;
  font-size: 1rem;
  text-align: center;
  margin: 16px;
}
@media screen and (min-width: 768px) {

.page-description {
  margin-top: 30px;
  font-size:24px;
  text-align: center;
  margin: 20px;
}
}


/* ===== スポンサー一覧 ===== */
.sponsor-section {
  padding: 60px 20px;
}
@media screen and (min-width: 768px) {

.sponsor-section {
  padding: 64px 32px;
}
}


.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}


.sponsor-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media screen and (min-width: 768px) {
  
.sponsor-card {
  
  padding: 56px;
 
}

}

.sponsor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.sponsor-logo {
  height: 60px;
  object-fit: contain;
  margin-bottom: 15px;
}

@media screen and (min-width: 768px) {
  
.sponsor-logo {
  height: 100px;
  width: 100%;
  object-fit: contain;
  margin-bottom: 20px;
}

}
.sponsor-logo:nth-child(3) {
 
  margin-bottom: 0px;
}


.sponsor-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--deep-blue);
  text-align: center;
}
@media screen and (min-width: 768px) {
  
.sponsor-name {
  font-size: 22px;

}
}


/* ===== スポンサー募集メッセージ ===== */
.sponsor-recruit {
  
  padding: 60px 20px;
  text-align: center;
  background-image: url(../img/kv5.JPG);
  object-fit: cover;
 background-position: center;
 background-size: cover;
 width: 100%;
 height: 300px;
 margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
  .sponsor-recruit {
  
    padding: 64px 32px;
    
   width: 100%;
   height: 500px;
   margin-bottom: 64px;
  }
}
.sponsor-recruit .recruit-title {
  font-size: 2rem;
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.sponsor-recruit .recruit-title {
  font-size: 28px;
  margin-bottom: 32px;
}
}


.sponsor-recruit .recruit-text {
  max-width: 600px;
  margin: 0 auto 30px;
  font-size: 1rem;
  color: #555;
}
@media screen and (min-width: 768px) {
.sponsor-recruit .recruit-text {
  max-width: 1000px;
  margin: 0 auto 30px;
  font-size: 28px;
}
}


.btn-contact {
  display: inline-block;
  padding: 12px 30px;
  background: #ff6f91;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  transition: background 0.3s ease;

}

.sponsorship-wanted{
  font-size: 20px;
  color: var(--white);
  font-weight: bold;
}
@media screen and (min-width: 768px) {
.sponsorship-wanted{
  font-size: 30px;
 
}
}

.sponsorship-wanted_text{
  font-size: 12px;
  color: var(--white);
  padding: 32px;
}
@media screen and (min-width: 768px) {
.sponsorship-wanted_text{
  font-size: 20px;
  color: var(--white);
  padding: 32px;
}
}

/* 入部案内 */

.about-member_title_wrapper{
  padding: 32px 0px; 

}

.information-section{
  
  padding-bottom: 12px;

}
@media screen and (min-width: 768px) {
.information-section{
 
  padding-bottom: 64px;

}
}

.information-wrapper{
  padding: 32px;

}
@media screen and (min-width: 768px) {

.information-wrapper{
  padding: 64px;
  display: flex;
  justify-content: center;
  gap: 32px;

}
}

.target-wrapper{
  background-color: var(--bright-pink);
  width: 230px;
  height: 60px;
  margin: 0 auto;
  margin-top: 32px;
}
@media screen and (min-width: 768px) {
.target-wrapper{
  background-color: var(--bright-pink);
  width: 500px;
  height: 100px;
  margin: 0 auto;
  margin-top: 32px;
}
}

.target-item{
  font-size: 14px;
  font-weight: bold;
  color: var(--white);
  padding: 5px;
  text-align: center;
  

}
@media screen and (min-width: 768px) {
.target-item{
  font-size: 22px;
  padding: 7px;
}
}

.information-activitycosts_wrapper2{
  padding: 32px 12px;
  text-align: left;

}
@media screen and (min-width: 768px) {
.information-activitycosts_wrapper2{
  padding: 64px  0px;

}
}

.activitycosts-text_wrapper{
  width: 100px;
  height: 30px;
  background-color: var(--rose-pink);
  
}
@media screen and (min-width: 768px) {
.activitycosts-text_wrapper{
  width: 250px;
  height: 50px;
  background-color: var(--rose-pink);
  
}
}
.information-activitycosts_wrapper {
  display: flex;              /* 横並びにする */
  justify-content: center;    /* 中央寄せ */
  align-items: flex-start;    /* 上揃え */
  gap: 40px;                  /* ブロックの間の余白 */
  flex-wrap: wrap;            /* 画面が狭いとき折り返す */
}
.activitycosts-block {
  flex: 1 1 300px;            /* 横幅は最小300pxで可変 */
  max-width: 500px;           /* 最大幅の制限 */
  display: flex;
  flex-direction: column;     /* ブロック内は縦並び */
  gap: 10px;
  background: #fff;           /* 余裕があればカード風に */
  padding: 28px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin-top: 42px;
}




.activitycosts-text{
  font-size: 14px;
  color: var(--white);
  text-align: center;
  padding: 4px;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
.activitycosts-text{
  font-size:20px;
  color: var(--white);
  text-align: center;
  padding: 10px;
  font-weight: bold;
}
}

.activitycosts-details_text{
  font-size: 15px;
  color: var(--black);
  padding: 10px 2px;
  font-weight: bold;

  
}
@media screen and (min-width: 768px) {
.activitycosts-details_text{
  font-size: 20px;
  padding: 15px 5px;
}
}

.activitycosts-details_text2{
  font-size: 12px;
  padding: 10px 2px;
}
@media screen and (min-width: 768px) {
.activitycosts-details_text2{
  font-size: 18px;
 
  
}
}

.activitycosts-details_wrapper{
  margin-top: 10px;
  width: 280px;
  height: 55px;
  background-color: var(--light-gray);
}
@media screen and (min-width: 768px) {
.activitycosts-details_wrapper{
  margin-top: 20px;
  width: 430px;
  height: 80px;
  background-color: var(--light-gray);
}
}

.text-wrapper{
  padding: 3px;
}
@media screen and (min-width: 768px) {
.text-wrapper{
  padding: 3px;

}
}

.operation-text{
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin: 12px;
}
@media screen and (min-width: 768px) {

.operation-text{
  font-size: 20px;
  margin: 32px;
}
}

.practice-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 14px;
  text-align: center;
}
@media screen and (min-width: 768px) {
.practice-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 14px;
  text-align: center;
}
}


/* ヘッダー */
.practice-schedule-table thead th {
  background:var(--bright-pink); /* 薄いピンク */
  color: #000;
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
}
@media screen and (min-width: 768px) {
.practice-schedule-table thead th {
  padding: 32px;
  font-size: 20px;

}
}


/* 通常の行 */
.practice-schedule-table tbody td {
  background: #fff;
  padding: 10px;
  border: 1px solid #ccc;
}
@media screen and (min-width: 768px) {
.practice-schedule-table tbody td {
  padding: 32px;
  font-size: 20px;

}
}


/* 日曜・祝日の行（最後の行だけデザイン変える場合） */
.practice-schedule-table tbody tr:last-child td {
  background: #f5f5f5; /* 薄いグレー */
  font-weight: bold;
}

/* 全体の枠線 */
.practice-schedule-table th,
.practice-schedule-table td {
  border: 1px solid #999;
}



/* ======================================== */
/* おおつヴィクトリーズポリシー セクション */
/* ======================================== */
.policy-section {
  padding: 32px 16px; /* セクション全体の上下左右の余白 */
 
}
.policy-section {
  padding: 64px 32px; /* セクション全体の上下左右の余白 */
 
}

.policy-container {
  max-width: 600px; /* コンテンツの最大幅 */
  margin: 0 auto; /* 中央寄せ */
  padding: 18px; /* 内側の余白 */
  background-color: #f7ede3; /* 画像の背景色に近いベージュ */
  border-radius: 10px; /* 角丸 */
  
  
}
@media screen and (min-width: 768px) {
.policy-container {
  max-width:1000px; /* コンテンツの最大幅 */
  padding: 64px; /* 内側の余白 */
}
}


.policy-title {
  font-size: 18px; /* タイトルフォントサイズ */
  font-weight: bold; /* 太字 */
  text-align: center; /* 中央揃え */
  color: var(--black); /* テキスト色（黒系） */
  margin-bottom: 25px; /* タイトルの下余白 */
  line-height: 1.4; /* 行の高さ */
  /* 日本語の明朝体のようなフォントであれば */
  
}
@media screen and (min-width: 768px) {
.policy-title {
  font-size: 28px; /* タイトルフォントサイズ */
  margin-bottom: 32px; /* タイトルの下余白 */

}
}

.policy-list {
  list-style: none; /* デフォルトのリスト番号を非表示にする */
  padding: 0; /* デフォルトのパディングを削除 */
  margin: 0; /* デフォルトのマージンを削除 */
}


.policy-item {
  display: flex; /* 番号とテキストを横並びにする */
  align-items: flex-start; /* 垂直方向の開始位置を揃える */
  margin-bottom: 15px; /* 各項目の下余白 */
  line-height: 1.8; /* テキストの行の高さ */
  color: var(--black); /* テキスト色 */
  font-size: 12px; /* テキストのフォントサイズ */

}
@media screen and (min-width: 768px) {
.policy-item {
 
  font-size: 20px; /* テキストのフォントサイズ */
  margin-bottom: 32px; /* 各項目の下余白 */
}
}


.policy-item:last-child {
  margin-bottom: 0; /* 最後の項目の下余白をなくす */
}


.policy-number {
  flex-shrink: 0; /* 番号が縮まないようにする */
  display: inline-flex; /* 数字をインラインブロックで中央揃え */
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
  width: 18px; /* 番号の丸の幅 */
  height: 18px; /* 番号の丸の高さ */
  border: 1px solid var(--black); /* 丸い枠線 */
  border-radius: 50%; /* 完全な丸 */
  margin-right: 15px; /* 番号とテキストの間の余白 */
  font-weight: bold; /* 番号の太字 */
  font-size: 12px; /* 番号のフォントサイズ */
  color: var(--black); /* 番号の色 */
  box-sizing: border-box; /* パディングとボーダーをwidth/heightに含める */
}
@media screen and (min-width: 768px) {
.policy-number {
  width: 25px; /* 番号の丸の幅 */
  height: 25px; /* 番号の丸の高さ */
  margin-right: 15px; /* 番号とテキストの間の余白 */
  font-size: 15px; /* 番号のフォントサイズ */
}
}
.company-overview-section {
  background: #fff;           /* 背景を白に */
  padding: 20px;              /* 余白 */
}
@media screen and (min-width: 768px) {
.company-overview-section {
        /* 背景を白に */
  padding: 40px;              /* 余白 */
}
}

.company-overview-container {
  max-width: 800px;           /* 横幅を制限 */
  margin: 0 auto;             /* 中央寄せ */
  background: #fff;           /* 念のため白 */
}
@media screen and (min-width: 768px) {
.company-overview-container {
  max-width: 1000px;           /* 横幅を制限 */
        /* 念のため白 */
}
}


.company-overview-list {
  width: 100%;
  border-top: 1px solid #ccc; /* 上の区切り線 */
}

.company-overview-item {
  display: flex;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid #ccc; /* 項目ごとの線 */
  background: #fff;              /* 白背景 */
}
@media screen and (min-width: 768px) {

.company-overview-item {

  padding: 32px 0;
         /* 白背景 */
}

}

.company-overview-term {
  flex: 0 0 200px;           /* 項目名の幅を固定 */
  font-weight: bold;
  color: #333;
}
@media screen and (min-width: 768px) {
.company-overview-term {
  flex: 0 0 300px; 
  font-size: 22px;          /* 項目名の幅を固定 */

}
}


.company-overview-description {
  flex: 1;
  color: #555;
}
@media screen and (min-width: 768px) {
.company-overview-description {
  flex: 1;
  color: #555;
  font-size: 22px;
}

}




/* ======================================== */
/* 会社概要セクション (company-overview-section) */
/* ======================================== */



.contact_kv {
  height: 412px;
  background: linear-gradient(rgba(51, 51, 51, 0.4), rgba(51, 51, 51, 0.4)),
    url(../img/kv4.JPEG) center top / cover;
}

.contact_title {
  padding-top: 64px;
  position: relative;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .contact_title {
    padding-top: 120px;
  }
}

.title_caption {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  font-size: 14px;
}

@media screen and (min-width: 768px) {
  .title_caption {
    font-size: 28px;
  }
}

.contact_desc {
  font-size: 14px;
  display: flex;
  justify-content: center;
  margin: 32px 8px;
  text-align: center;
  line-height: 2;
}
@media screen and (min-width: 768px) {
.contact_desc {
  font-size: 20px;
  display: flex;
  justify-content: center;
  margin: 32px 10px;
  text-align: center;
  line-height: 2;
}
}


.contact_cation {
  font-size: 12px;
  background: var(--light-gray);
  line-height: 3;
  padding: 32px 8px;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 32px;
}
@media screen and (min-width: 768px) {
.contact_cation {
  font-size: 17px;
  line-height: 3;
  padding: 32px 10px;
  text-align: center;
  margin-bottom: 42px;
  margin-top: 42px;
}
}


.form_error {
  box-sizing: border-box;
  border-radius: 5px;
  background-color: red;
  display: block;
  font-weight: bold;
  margin-top: 10px;
  position: relative;
  padding: 0 10px;
  font-size: small;
  color: #fff;
}

.form_error::before {
  content: "";
  border: 10px solid transparent;
  border-bottom: 15px solid red;
  position: absolute;
  top: -25px;
  left: 5%;
}

.hidden {
  display: none;
}

.contact_form_title{
  background-color: #ffe6f0; /* 薄いピンクの背景 */
    color: #cc6688;
    padding: 10px 20px;
    border-radius: 25px; /* 丸い吹き出し */
    display: inline-block; /* 内容に合わせて幅を調整 */
    width: 100%;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
    margin: 0 auto 30px;
   
    text-align: center;

  
  }



.contact_form {
  width: 100%;
  max-width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}

.contact_form_title {
  background-color: #ffe6f0; /* 薄いピンク */
  color: #cc6688;
  padding: 10px 20px;
  border-radius: 25px;
  display: block;
  text-align: center;
  box-shadow: 3px 3px 6px rgba(0,0,0,0.1);
  margin: 0 auto 30px;
}

.contact_form_list {
  display: block;
  width: 100%;
}

.contact_form_heading {
  background: var(--bright-pink);
  color: var(--white);
  padding: 12px;
  font-weight: bold;
  border: 1px solid #170303;
  margin-top: 8px;
}

.contact_form_required {
  font-size: 10px;
  background: #fff;
  color: #000;
  padding: 2px 6px;
  margin-left: 8px;
  border-radius: 4px;
}

.contact_form_detail {
  background: var(--rose-pink);
  padding: 8px;
}

.contact_form_input,
.contact_form_textarea {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  border: none;
  padding: 10px;
}

.contact_form_textarea {
  height: 160px;
}

.form_error {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #fff;
  background: red;
  padding: 4px 8px;
  border-radius: 4px;
}

.hidden {
  display: none;
}

.contact_form_btn-wrapper {
  margin-top: 32px;
  text-align: center;
}

.contact_btn_input {
  padding: 12px 40px;
  background: var(--bright-pink);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.contact_btn_input:hover {
  opacity: 0.9;
}
@media screen and (min-width: 768px) {
  .contact_form {
    max-width: 800px; /* 中央寄せ */
  }

  /* dt/ddを横並び */
  .contact_form_list {
    display: grid;
    grid-template-columns: 30% 1fr; /* 左がラベル、右が入力欄 */
    column-gap: 16px;
  }

  .contact_form_heading {
    text-align: right;
    padding: 16px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border: none;
  }

  .contact_form_detail {
    padding: 12px 16px;
    background: #ffeef5; /* PCでは少し淡い色に */
  }

  .contact_form_textarea {
    height: 200px; /* PCでは少し広く */
  }

  .contact_form_btn-wrapper {
    grid-column: 1 / -1; /* ボタンは2カラム幅いっぱい */
    text-align: center;
    margin-top: 40px;
  }

  .contact_btn_input {
    padding: 14px 60px;
    font-size: 18px;
  }
}


/* よくある質問 */


.qa-container {
  width: 100%;
  max-width: 700px; /* 少しスリムに */
  background-color: #ffffff; /* 白い背景 */
  border-radius: 20px; /* 角丸を大きく */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 影を強調 */
  overflow: hidden;
  padding: 20px; /* コンテナ全体のパディング */
  margin: 0 auto;
  margin-top: 32px;
}
@media screen and (min-width: 768px) {
.qa-container {
  width: 100%;
  max-width: 1000px; /* 少しスリムに */
  background-color: var(--white); /* 白い背景 */
  padding: 100px; /* コンテナ全体のパディング */
  margin-top: 120px;
}
}


.qa-main-title {
  font-family: 'Mochiy Pop P One', sans-serif; /* ポップなフォント */
  text-align: center;
  color: var(--bright-pink); /* ホットピンク */
  padding-bottom: 20px;
  margin-top: 0;
  margin-bottom: 25px; /* 下の要素との間隔 */
  position: relative;
  font-size: 2.5em; /* 大きめに */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1); /* 少し影をつけて立体感 */
}
@media screen and (min-width: 768px) {
.qa-main-title {
  font-family: 'Mochiy Pop P One', sans-serif; /* ポップなフォント */
  text-align: center;
  color: #ff69b4; /* ホットピンク */
  padding-bottom: 50px;
  margin-top: 0;
  margin-bottom: 45px; /* 下の要素との間隔 */
  position: relative;
  font-size: 42px; /* 大きめに */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1); /* 少し影をつけて立体感 */
}
}


.qa-main-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 80px; /* 短い線 */
  height: 4px; /* 太めの線 */
  background: linear-gradient(90deg, #ffc0cb, #ff69b4); /* グラデーションの線 */
  border-radius: 2px;
}

@media screen and (min-width: 768px) {

.qa-main-title::after {
  width: 200px; /* 短い線 */
  height: 5px; /* 太めの線 */
 
}
}

.qa-category-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700; /* 太字 */
  font-size: 1.6em; /* 大きめに */
  color: #4a4a4a; /* 濃いめのグレー */
  margin-top: 40px; /* 上部に余白 */
  margin-bottom: 20px; /* 下部に余白 */
  padding-left: 15px; /* 左側に少しパディング */
  border-left: 5px solid var(--red); /* スカイブルーのライン */
  letter-spacing: 0.05em; /* 文字間隔 */
}

.qa-category-section {
  margin-bottom: 30px; /* 各カテゴリセクションの下に余白 */
}
.qa-category-section:last-of-type {
  margin-bottom: 0; /* 最後のカテゴリセクションは下の余白不要 */
}
.qa-item {
  background-color: #fff0f5; /* カードの背景色（薄いピンク） */
  border-radius: 15px; /* カードの角丸 */
  margin-bottom: 20px; /* カード間のスペース */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* カードの影 */
  overflow: hidden;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* ホバーアニメーション */
}



.qa-item:last-child {
  margin-bottom: 0; /* 最後のカードは下のスペース不要 */
}

.qa-item:hover {
  transform: translateY(-5px); /* ホバーで少し浮き上がる */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* 影を少し濃く */
}

.qa-question-header {
  display: flex;
  align-items: center;
  padding: 50px 50px; /* パディングを少し増やす */
  font-weight: bold;
  cursor: pointer;
  background: linear-gradient(90deg, #ffe0f0, #ffd3e0); /* 質問部分のグラデーション */
  position: relative;
  color: #555; /* テキスト色を少し落ち着かせる */
  font-size: 1.1em; /* 少し大きく */
  border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* 柔らかな線 */
}
@media screen and (min-width: 768px) {
.qa-question-header {
  padding: 80px 42px; /* パディングを少し増やす */
  color: var(--black); /* テキスト色を少し落ち着かせる */
  font-size: 20px; /* 少し大きく */
  border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* 柔らかな線 */
}
}


.qa-question-header:hover {
  background: linear-gradient(90deg, #ffeaf2, #ffdae9); /* ホバーで少し明るく */
}

.qa-q-mark {
  color:var(--bright-pink); /* ホットピンク */
  font-size: 18px; /* Qを大きく */
  margin-right: 12px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* 軽く影 */
}
@media screen and (min-width: 768px) {
.qa-q-mark {
  font-size: 25px; /* Qを大きく */
  margin-right: 12px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* 軽く影 */
}
}


.qa-arrow {
  margin-left: auto;
  font-size: 1.5em; /* 矢印を大きく */
  transition: transform 0.3s ease;
  /* カスタム矢印アイコン */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #ff69b4; /* 下向き三角形 */
  display: inline-block;
  vertical-align: middle;
}
@media screen and (min-width: 768px) {
.qa-arrow {
  font-size: 25; /* 矢印を大きく */
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--bright-pink); /* 下向き三角形 */
}
}


.qa-question-header.active .qa-arrow {
  transform: rotate(180deg);
  border-top: none; /* 下向き矢印をリセット */
  border-bottom: 20px solid #ff69b4; /* 上向き三角形 */
}

.qa-answer-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* パディングもアニメーション */
  background-color: #ffffff; /* 回答部分の背景を白に */
  padding: 0 25px; /* 初期パディング */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.qa-answer-content.open {
  max-height: 600px; /* コンテンツに合わせて調整、十分な高さを確保 */
  padding: 20px 25px; /* 開いた時のパディング */
}
@media screen and (min-width: 768px) {
.qa-answer-content.open {
  max-height: 1000px; /* コンテンツに合わせて調整、十分な高さを確保 */
  padding: 50px 60px; /* 開いた時のパディング */
}
}


.qa-a-mark {
  color:var(--deep-blue); /* スカイブルー */
  font-size: 1.5em; /* Aを大きく */
  margin-right: 12px;
  margin-bottom: 15px; /* Aと画像/テキストの間のスペース */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* 軽く影 */
}
@media screen and (min-width: 768px) {
.qa-a-mark {
  color:var(--deep-blue); /* スカイブルー */
  font-size: 25px; /* Aを大きく */
  margin-right: 12px;
  margin-bottom: 15px; /* Aと画像/テキストの間のスペース */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* 軽く影 */
}
}


.qa-image-placeholder {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px; /* 画像とテキストの間のスペース */
}
@media screen and (min-width: 768px) {

.qa-image-placeholder {
  
  margin-bottom: 30px; /* 画像とテキストの間のスペース */
}
}


.qa-image-placeholder img {
  max-width: 180px; /* 画像を少し大きく */
  height: auto;
  display: block;
  padding: 8px; /* パディング */
  box-sizing: border-box;
  height: 170px;
  
}
@media screen and (min-width: 768px) {
  .qa-image-placeholder img {
    max-width: 350px; /* 画像を少し大きく */
    padding: 12px; /* パディング */
    height: 300px;
  }
}

.qa-answer-text {
  margin: 0;
  color: var(--black); /* テキスト色 */
  text-align: center;
  width: 100%;
  line-height: 1.6; /* 行の高さを調整 */
  font-size: 1.05em; /* 少し大きく */
}
@media screen and (min-width: 768px) {
.qa-answer-text {
  font-size: 20px; /* 少し大きく */
}
}


/* モバイル対応（任意） */
@media (max-width: 600px) {
  .qa-container {
      padding: 15px;
      border-radius: 15px;
  }
  .qa-main-title {
      font-size: 2em;
      margin-bottom: 20px;
  }
  .qa-question-header, .qa-answer-content.open {
      padding: 15px 20px;
  }
  .qa-item {
      margin-bottom: 15px;
  }
}


/* --- スポンサー個別ページ（single-sponsor） --- */
.single-sponsor-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px;
  font-family: "Noto Sans JP", sans-serif;
  color: #222;
  background-color: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}

.single-sponsor-title {
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
  color: #e91e63;
  position: relative;
}
.single-sponsor-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: #e91e63;
  margin: 12px auto 0;
  border-radius: 2px;
}

.single-sponsor-logo {
  text-align: center;
  margin-bottom: 50px;
}
.single-sponsor-logo img {
  max-width: 60%;
  max-height: 200px;
  object-fit: contain;
  display: inline-block;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}


.single-sponsor-description {
  font-size: 1.1rem;
  line-height: 1.9;
  margin-bottom: 40px;
  text-align: justify;
  padding: 0 10px;
}

.single-sponsor-details {
  background: linear-gradient(145deg, #f7f7f7, #ffffff);
  border-left: 6px solid #e91e63;
  padding: 25px 20px;
  margin-bottom: 40px;
  font-size: 1rem;
  line-height: 1.8;
  border-radius: 6px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.03);
}

.single-sponsor-details p {
  margin-bottom: 15px;
}

.single-sponsor-details strong {
  display: inline-block;
  min-width: 100px;
  color: #444;
}

.single-sponsor-back {
  text-align: center;
  margin-top: 60px;
}
.single-sponsor-back a {
  display: inline-block;
  padding: 14px 36px;
  background-color: #e91e63;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
}
.single-sponsor-back a:hover {
  background-color: #c2185b;
  transform: translateY(-2px);
}

/* --- スマホ対応 --- */
@media (max-width: 600px) {
  .single-sponsor-title {
    font-size: 2rem;
  }

  .single-sponsor-logo img {
    max-height: 200px;
  }

  .single-sponsor-description,
  .single-sponsor-details {
    font-size: 1rem;
  }
}

/* シングルニュー */


/* 全体コンテナ */
.l_main{
  padding: 32px 0px;

}
@media screen and (min-width: 768px) {
.l_main{
  padding: 64px 32px;

}
}

/* ニュースラッパー */
.news-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 各ニュース記事コンテナ */
.news_container {
  border-bottom: 1px solid #ddd;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

/* 記事 */
.news-article {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
}

.news_thumb-wrapper {
  flex-shrink: 0;
}

.news_section_img {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  

}

/* 記事内容 */
.news_content {
  flex: 1;
}

.news_meta {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 10px;
}

.news_meta-date {
  margin-right: 10px;
}

.news_meta-cat {
  background: var(--bright-pink);
  color: #fff;
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 10px;
}

.news-article_title {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0 0 10px;
}

.news-article_details {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .news-article {
    flex-direction: column;
  }

  .news_section_img {
    width: 80%;
    height: 300px;
  }
}
/* シングルぺーじ */
/* タイトル装飾 */
.single-news-title {
  font-size: 2.2rem;
  font-weight: 700;
  position: relative;
  padding-left: 1.5em;
  border-left: 4px solid #007acc;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.single-news-title .title-decor {
  font-size: 1.5rem;
  margin-right: 0.5em;
}
.single-news-back{
  display: flex;
  justify-content: center;
}
/* 戻るボタン */
.back-button {
  display: inline-block;
  margin: 50px auto;
  
  padding: 15px 20px;
  background-color: #007acc;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;

}

.back-button:hover {
  background-color: #005fa3;
}

/* メタ情報 */
.single-news-meta {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 2rem;
}

.single-news-thumbnail {
  margin-bottom: 2rem;
}

.single-news-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;

}
.team-logo-right {
  width: 80px;
  height: 90px;
 
  object-fit:contain;
  display: block;
  margin: 0 auto;
}