/*
Theme Name: YOLOW Inc,
Author: Ken YOLOW
Description: This is a custom WordPress theme for the ballschule site.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ballschule
*/

/*
 * 基本的なリセットや共通スタイル
 width: 87%;
  margin: 0 auto;
 */
:root {
  --main-primary: #F6AC19;
  --main-primary-hover: #C78502;
  --main-warning: #1BD18E;
  --main-warning-hover: #079F67;
  --main-nav: #FF9797;
  --main-text-color: #1B1B1B;
  --secondary-text-color: #736F6F;
  --main-text-hover-color: #F6AC19;
  --main-color-white: #FFFFFF;
  --main-color-pink: #FF9797;
  --title-font-family: "Zen Maru Gothic", sans-serif;
  --poppins-font-family: 'Poppins', "Zen Maru Gothic", sans-serif;
  --bg-gray: #F3F3F3;
  --border-style: 1px solid #C2C2C2;
  --fs-35: 2.18rem;
  --fs-30: 1.87rem;
  --fs-26: 1.625rem;
  --fs-22: 1.375rem;
  --fs-20: 1.25rem;
  --fs-18: 1.125rem;
  --fs-16: 1rem;
  --fs-14: 0.87rem;
  --fs-13: 0.81rem;
  --fs-12: 0.75rem;
}

p{
  line-height: 180%;
}
/*
 * common
 */
 html, body {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 400;
  color: var(--main-text-color);
  font-size: 16px;
  overflow-x: hidden;
}

.text-center-sp{
  text-align: center;
}
.title-text{
  font-family: var(--title-font-family);
  font-weight: 500;
}

a{
  text-decoration: none;
  transition: 0.5s;
}
.pc-only{
  display: none;
}
.sp-only{
  display: initial;
}

.cp-text{
  font-size: 1.56rem;
  color: var(--main-text-color);
  font-weight: 700;
  font-family: var(--title-font-family);
}

.circle{
  border-radius: 50%;
  background-color: var(--main-primary);
  position: absolute;
}
.circle.primary{
  background-color: var(--main-primary);
}
.circle.warning{
  background-color: var(--main-warning);
}
.circle.yellow{
  background-color: #FFEF44;
}

.circle.dot,
.circle.dot-primary,
.circle.dot-warning{
  background-image: url(/wp-content/themes/ballschule/assets/images/dot-circle.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
}
.circle.dot-primary{
  background-image: url(/wp-content/themes/ballschule/assets/images/dot-circle-primary.png);
}
.circle.dot-warning{
  background-image: url(/wp-content/themes/ballschule/assets/images/dot-circle-warning.png);
}
.circle-138{
  width: 138px;
  height: 138px;
}
.circle-100{
  width: 100px;
  height: 100px;
}
.circle-80{
  width: 60px;
  height: 60px;
}
.circle-72{
  width: 72px;
  height: 72px;
}
.circle-60{
  width: 60px;
  height: 60px;
}

.circle-36{
  width: 36px;
  height: 36px;
}

.bg-primary{
  background-color: var(--main-primary)!important;
  color: var(--main-color-white);
}

.w-pd{
  width: 87%;
  margin: 0 auto;
}

.title-fs20{
  font-size: var(--fs-20);
  font-family: var(--title-font-family);
  font-weight: bold;
}
.title-fs25{
  font-size: var(--fs-26);
  font-family: var(--title-font-family);
  font-weight: bold;
}

.short-hr{
  width: 60px;
  height: 5px;
  background-color: var(--main-primary);
  margin: 3rem auto;
}
/*
 * Bootstrap
 */
.btn{
  font-size: 1rem;
  height: 48px;
  font-size: 1rem;
  border-radius: 24px;
  padding: 10px 2rem;
  font-family: var(--poppins-font-family);
}

.btn.btn-xs{
  font-size: 1rem;
  height: 34px;
  font-size: 0.75rem;
  border-radius: 17px;
  padding: 6px 1rem;
}

.btn-primary {
  background-color: var(--main-primary);
  border-color: var(--main-primary);
  color: var(--main-text-color);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active {
  background-color: var(--main-primary-hover)!important;
  border-color: var(--main-primary-hover)!important;
}
.btn-primary:disabled{
  background-color: var(--main-primary-hover)!important;
  border-color: var(--main-primary-hover)!important;
  opacity: 0.7;
}

.btn-primary.readmore{
  color: var(--main-color-white);
  padding-left: 3rem;
  padding-right: 3rem;
}
.btn-warning {
  background-color: var(--main-warning);
  border-color: var(--main-warning);
  color: #FFFFFF;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: var(--main-warning-hover)!important;
  border-color: var(--main-warning-hover)!important;
  color: #FFFFFF;
}

.btn-danger{
  background-color: #FF9797;
  border-color: #FF9797;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #f07e7e;
  border-color: #f07e7e;
}


.btn-secondary{
  background-color: #C4C4C4;
  border-color: #C4C4C4;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: #a7a7a7;
  border-color: #a7a7a7;
}


.btn-white{
  background-color: var(--main-color-white);
  border-color: var(--main-primary);
  border-width: 2px;
  border-style: solid;
  color: var(--main-primary);
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active {
  background-color: var(--main-primary)!important;
  border-color: var(--main-primary)!important;
  color: #FFFFFF!important;
  
}

.btn-flex{
  height: auto;
  display: flex;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-18);
}
.btn-flex .fa-solid{
  font-size: 20px;
  
}

.mt0{margin-top: 0rem;}
.mt1{margin-top: 1rem;}
.mt2{margin-top: 2rem;}
.mt3{margin-top: 3rem;}
.mt4{margin-top: 4rem;}
.mb0{margin-bottom: 0rem;}
.mb1{margin-bottom: 1rem;}
.mb2{margin-bottom: 2rem;}
.mb3{margin-bottom: 3rem;}
.mb4{margin-bottom: 4rem;}
.pt0{padding-top: 0!important;}
.pt1{padding-top: 1rem;}
.pt2{padding-top: 2rem;}
.pt3{padding-top: 3rem;}
.pt4{padding-top: 4rem;}
.pt5{padding-top: 5rem;}
.pt6{padding-top: 6rem;}
.pt68{padding-top: 6rem;}
.pb0{padding-bottom: 0!important;}
.pb1{padding-bottom: 1rem;}
.pb2{padding-bottom: 2rem;}
.pb3{padding-bottom: 3rem;}
.pb4{padding-bottom: 4rem;}
.px0{padding-left: 0rem;padding-right: 0rem;}
.px1{padding-left: 1rem;padding-right: 1rem;}
.px2{padding-left: 2rem;padding-right: 2rem;}
.px3{padding-left: 3rem;padding-right: 3rem;}
.px4{padding-left: 4rem;padding-right: 4rem;}

.fadein {
  opacity: 0;
  transform: translateY(30px); /* 下から少し浮かせる */
  transition: opacity 1s ease, transform 1s ease;
}

.fadein.show {
  opacity: 1;
  transform: translateY(0);
}


div.pagination,
nav.pagination{
  display: block;
}

.pagination .nav-links{
  display: flex;
  justify-content: center;
}
.pagination .nav-links .page-numbers{
  background-color: #F3F3F3;
  font-size: var(--fs-14);
  color: #595757;
  display: block;
  text-align: center;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}
.pagination .nav-links .page-numbers.current{
  background-color: var(--main-primary);
  color: #fff;
}
.pagination .nav-links .page-numbers:first-child{
  border-radius: 20px 0 0 20px;
  width: 60px;
}
.pagination .nav-links .page-numbers:last-child{
  border-radius: 0 20px 20px 0;
  width: 60px;
}
/*
 * ページ
 */
#page {
  width: 100%;
}

.asset-loader{
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  z-index: 2147483647; /* 最大に */
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.asset-loader-content img{
  display: block;
  width: 140px;
}
.asset-loader-content .spinner {
  margin: 12px auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #e5e7eb;        /* 薄いリング */
  border-top-color: #111;            /* 回転色（お好みで） */
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ユーザーがアニメ減らす設定なら静止(配慮) */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}


.site-simple{
  padding-top: 80px;
}

.breadcrumb{
  width: 100%;
  background-color: #F3F3F3;
  margin: 0;
}
.breadcrumb ul{
  list-style: none;
  padding: 0;
  margin: 0;
  width: 87%;
  margin: 0 auto;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 6px;
}
.breadcrumb ul li{
  padding: 4px 0;
  font-size: var(--fs-12);
}
.breadcrumb ul li a{
  font-size: var(--fs-12);
  color: var(--main-text-color);
}
.breadcrumb ul li a:hover{
  color: var(--main-primary);
}

.simple-title{
  text-align: center;
  color: var(--main-primary);
  font-family: var(--title-font-family);
  font-size: var(--fs-26);
  font-weight: bold;
  margin: 1rem 0 1rem;
  padding-bottom: 1rem;
  position: relative;
}

.simple-title::after{
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: var(--main-primary);
  bottom: 0;
  left: 50%;
  margin-left: -25px;
  position: absolute;
}

.simple-container{
  width: 87%;
  margin: 0 auto;
}

.page-description{
  text-align: center;
  font-size: var(--fs-13);
}
/*
 * header
 */
header.site-header{
  position: fixed;
  width: 100%;
  background-color: transparent;
  z-index: 100;
  top: 0;
}

.header-inner{
 height: 60px; 
 width: 96%;
 background-color: var(--main-color-white);
 border-radius: 30px;
 margin: 15px auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 1rem;
}

.site-title{
  margin: 0;
}
.site-title a, .site-logo{
  display: block;
}


.site-logo{
  width: 90px;
}

.header-nav-wrap{
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-toggle{
  width: 40px;
  height: 40px;
  border-radius: 25px;
  background-color: var(--main-color-pink);
  color: var(--main-color-white);
  display: block;
  text-decoration: none;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-toggle .nav-toggle-icon{
  font-size: 1.4rem;
}

.global-menu-wrap{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  background-color: rgba(30, 30, 30, 0.45); 
}
.global-menu-outer{
  width: 100%;
  height: 100%;
  position: relative;
}

.global-menu-context{
  width: 74%;
  max-width: 340px;
  background-color: var(--bg-gray);
  border-radius: 30px 0 0 30px;
  right: 0;
  top: 1rem;
  padding: 1rem;
  position: absolute;
}
.gm-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gm-head .nav-toggle{
  background-color: var(--main-warning);
}
.gm-main{
  padding-top: 1rem;
}
.gm-sub{
  width: 100%;
  background-color: var(--main-color-white);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  list-style: none;

}

.gm-sub li.gm-h1-link{
  width: 100%;
}

.gm-sub li.gm-h1-link a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  color: var(--main-text-color);
  font-family: var(--title-font-family);
}
.gm-sub li.gm-h1-link a .fa-solid{
  color: var(--main-primary);
}
.gm-sub li.gm-h2-link{
  display: block;
}

.gm-sub li.gm-h2-link a{
  color: var(--secondary-text-color);
  font-family: var(--title-font-family);
  font-size: var(--fs-14);
}
.gm-sub li.gm-h3-link{
  text-align: center;
  display: flex;
  height: 30px;
  justify-content: center;
  align-items: center;

}
.gm-sub li.gm-h3-link a{
  color: var(--main-text-color);
  font-family: var(--title-font-family);
  font-size: var(--fs-13);
  font-weight: bold;
  
}
.gm-social-links{
  display: flex;
  justify-content: center;
  gap: 1.4rem;
}

.gm-social-links a{
  color: var(--secondary-text-color);
  font-size: 1.5rem;
}
.gm-social-links a:hover{
  color: var(--main-primary);
}

/* Footer */
.footer{
  width: 100%;
  padding-bottom: 2rem;
}

.footer-content{
  width: 87%;
  margin: 0 auto;
  background-color: #F3F3F3;
  border-radius: 20px;
  padding: 2rem 1rem;
  text-align: center;
}

.footer-left .site-logo{
  width: 160px;
  margin: 0 auto;
}
.footer-left p{
  padding: 1.4rem 0 1.4rem;
  margin: 0;
  font-size: var(--fs-12);
  font-family: var(--title-font-family);
}

.footer-nav{
  list-style: none;
  padding: 0;
  margin : 0;
}
.footer-nav li{
  padding-bottom: 0.2rem;
}
.footer-nav li a{
  color: var(--main-text-color);
  font-family:  var(--title-font-family);
  font-size: 13px;
}
.footer-nav li a:hover{
 color: var(--main-primary); 
}
.footer-btns{
  display: flex;
  justify-content: center;
  padding: 1.4rem 0;
  gap: 10px;
}
.footer-btns .btn{
  font-size: 15px;
  padding: 10px 14px;
  height: auto;
  border-radius: 9999px;
  
}
.copyright{
  padding-top: 1.4rem;
  color: #595757;
  font-size: 9px;
}

/*
 * TOP
 */
.section-title{
  font-size: 1.56rem;
  /* font-family: var(--title-font-family); */
  font-family: var(--poppins-font-family);
  font-weight: 700;
  letter-spacing: 3px;
}
.section-title .section-subtitle{
  font-size: 1rem;
  display: block;
  /* font-family: var(--title-font-family); */
  font-family: var(--poppins-font-family);
  padding-bottom: 0.5rem;
}

.section-title.news{
  color: var(--main-warning);
}
.section-title.news .section-subtitle{
  color: var(--main-text-color);
}

.section-title.primary{
  color: var(--main-primary);
}

.section-title.warning{
  color: var(--main-warning);
}

/* TOP */
.hero-section{
  width: 100%;
  height: 153vw;
  background-image: url(/wp-content/themes/ballschule/assets/images/mv01.jpg);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-section.show{
  opacity: 1;
}
.hero-fade{
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-fade.show{
  opacity: 1;
}


.here-content{
  text-align: center;
}
.here-content h2{
  font-size: 2rem;
  color: var(--main-color-white);
  text-align: center;
}
.here-content h4{
  font-size: 1.25rem;
  color: var(--main-color-white);
  text-align: center;
}
.scroll-img{
  position: absolute;
  left: 1rem;
  bottom: 2rem;
  width: 18px;
}
.classroom-info{
  position: fixed;
  width: 100px;
  height: 100px;
  right: 1rem;
  /* top: 460px; */
  bottom: 2rem;
  z-index: 10;
  border: 1px solid var(--main-text-color);
  background-color: var(--main-primary);
  transition: 0.5s;
  border-radius: 50px;
  text-align: center;
  padding-top: 22px;
  display: block;
  z-index: 100000;
}

.classroom-info img{
  width: 82px;
}

.classroom-info:hover,
.classroom-info:focus,
.classroom-info:active{
  background-color: var(--main-warning);
}


/* Concept */
.concept-section{
  margin-top: 70px;
}

.concept-left{
  width: 87%;
  margin: 0 auto;
}

.concept-left p{
  font-size: var(--fs-13);
  padding-left: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.concept-right{
  width: 100%;
 display: flex; 
 justify-content: flex-end;
 position: relative;
}
.concept-right img{
  width: 93.5%;
  margin: 0 0 0 auto;
  display: block;
}
.concept-right .circle-60{
  top: -40px;
  right: -8px
}

.concept-right .circle-36{
  bottom: -28px;
  left: 70%;
}


/* News */
.news-section{
  margin-top: 80px;
}

.news-content{
  background-color: var(--bg-gray);
  width: 87%;
  margin: 0 auto;
  border-radius: 20px;
  padding: 2rem 1rem;
  text-align: center;
  position: relative;
}

.news-content .news-boy{
  position: absolute;
  top: -2.2rem;
  left: 1rem;
  width: 48px;
}

.news-head{
  width: 100%;
  padding-bottom: 1rem;
}

.news-list{
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-list li.news-item{
  padding: 1rem 0;  
  border-bottom: var(--border-style);
  text-align: left;
}

.news-list li.news-item time{
  display: block;
  color: var(--main-warning);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-family: var(--poppins-font-family);
}
.news-list li.news-item a{
  text-decoration: none;
  font-size: var(--fs-13);
  color: var(--main-text-color);
}

.news-list li.news-item a:hover{
  color: var(--main-primary);
}
.news-list li.more{
  padding-top: 2rem;
  display: block;
}
.news-list li.more .btn{
  display: inline-block;
}
.news-content .section-title{
  text-align: center;
  
}

.news-items{
  list-style: none;
  padding: 0;
  margin: 0;
  
}

.news-items .news-item{
  padding: 1rem 0;
  border-bottom: 1px solid #C2C2C2;
}

.news-items .news-item a.news-link{
  display: flex;
  align-items: center;
  color: var(--main-text-color);
}
a.news-link .news-info{
  flex: 1;
}
a.news-link .news-info time{
  display: block;
  color: var(--main-warning);
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-16);

}
a.news-link .news-info .news-title{
  display: block;
  font-size: var(--fs-14);
}
a.news-link .news-icon{
  color: #C4C4C4;
}
a.news-link:hover .news-info .news-title,
a.news-link:hover .news-icon{
  color: var(--main-primary);
}

.news-items + .pagination{
  margin: 2rem 0 4rem;
}

.news-header{
  padding-top: 1rem;
}
.news-header time{
  color: var(--main-warning);
  font-size: var(--fs-16);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}
.news-header h1{
  color: #000;
  font-size: var(--fs-16);
  font-weight: bold;
  padding: 1rem 0;
}
.news-detail{
  width: 90%;
  margin: 0 auto;
  font-size: 13px;;
}

.news-nav{
  display: flex;
  justify-content: center;
  padding: 3rem 0 4rem;
}
.news-nav-item{
  text-align: center;
  font-size: var(--fs-14);
  padding: 8px 1.6rem;
  background-color: #F3F3F3;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  color: #595757;
  transition: 0.5s;;
}
a.news-nav-item:hover{
  background-color: var(--main-primary);
  color: #fff;
}
.news-nav-item.prev{
  border-radius: 30px 0 0 30px;
  border-right: 2px solid #fff;
}
.news-nav-item.next{
  border-radius: 0 30px 30px 0;
  border-left: 2px solid #fff;
}
/* About */

.section-about{
  
  width: 87%;
  margin: 0 auto;
  margin-top: 80px;
}
.about-container{
  display: flex;
  flex-direction: column; /* SPでは縦並び */
  gap: 10px;
}

.about-container .cp-text{
  text-align: center;
  margin: 2rem 0;
}

.about-container .about-dr{
  
}

.about-dr-inner{
  width: 220px;
  margin: 0 auto;
}
.about-dr-inner img{
  width: 100%;
}
.about-dr-inner .tag{
  width: 72px;
  background-color: var(--main-primary); 
  color: var(--main-color-white);
  margin: 1rem auto;
  font-size: var(--fs-12);
  text-align: center;
  border-radius: 12px;
}
.about-dr-inner .text1{
  font-size: var(--fs-16);
  text-align: center;
  font-weight: bold;
}
.about-dr-inner .text2{
  font-size: var(--fs-12);
  text-align: center;
}

.about-container .about-text{
  font-size: var(--fs-13);
  margin-top: 1rem;
  line-height: 180%;
}

.about-more{
  margin-top: 1.5rem;
  text-align: center;
}



/* Ability */
.section-ability{
  margin-top: 80px;
  position: relative;
}
.ability-main{
  /* width: 87%; */
  margin: 0 auto;
  padding-top: 4rem;
}

.ability-main .section-title{
  margin: 0 0 2rem;
}
.ability-row{
  text-align: center;
  width: 100%;
  margin-bottom: 4rem;
}

.ability-content{
  width: 87%;
  margin: 0 auto 2rem;
  
}
.ability-content .ability-title{
  color: var(--main-text-color);
  font-size: var(--fs-20);
  font-family: var(--title-font-family);
  margin-bottom: 1rem;
}
.ability-content .ability-title span{
  display: inline-block;
  height: 27px;
  width: 27px;
  border-radius: 5px;
  text-align: center;
  background-color: var(--main-color-white);
  color: var(--main-primary);
  margin-right: 0.5rem;
  vertical-align: text-bottom;
}
.ability-content p{
  text-align: left;
  color: var(--main-text-color);
  font-size: var(--fs-13);
  font-weight: 500;
  margin-bottom: 1rem;
}

.ability-content .steps{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.ability-content .steps .circle-step{
  width: 94px;
  height: 94px;
  border-radius: 47px;
  background-color: var(--main-color-white);
  color: var(--main-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--title-font-family);
  font-size: var(--fs-13);
  font-weight: bold;
  padding: 20px 5px;
}

.ability-row .ability-img{
  width: 82%;
  display: block;
}
.ability-row .ability-img.right{
  margin-left: auto;
}

.section-ability .video-content{
  background-color: var(--main-color-white);
  width: 100%;
  position: relative;
  margin-top: 150px;
  padding: 140px 0 3rem;
  text-align: center;
  top: 1px;
}
.section-ability .video-wrap{
  position: absolute;
  border: none;
  width: 340px;
  aspect-ratio: 16 / 9;
  left: 50%;
  margin-left: -170px;
  top: -100px;
}
.section-ability .video-wrap iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* Location */
.section-locatin{
  margin-top: 4rem;
}


.locatin-main{
  text-align: center;
}

.location-left{
  width: 87%;
  margin: 0 auto;
  background-image: url(/wp-content/themes/ballschule/assets/images/jpn.png);
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: 60px 100px;
}

.location-left .section-title{
  margin-bottom: 2rem;
}
.location-left .cp-text{
  text-align: left;
  margin-bottom: 2rem;
}
.location-left .p{
  text-align: left;
  margin-bottom: 2rem;
}
.location-left .text-start{
  padding-bottom: 3rem;
}

.location-right .img-wrap{
  width: 87%;
  display: block;
  margin-left: auto;
}

.location-right img{
  width: 87%;
  display: block;
  margin-left: auto;
}

/* Voice */
.voice-section{
  width: 87%;
  margin: 4rem auto 0;

}

.voice-main{

}
.voice-section .section-title{
  text-align: center;
  margin-bottom: 2rem;
}


.voice-item{
  width: 100%;
  background-color: #F3F3F3;
  border-radius: 20px;
  padding: 2rem 1rem;
  margin-bottom: 1rem;
  position: relative;
}
.img-voice{
  position: absolute;
  width: 98px;
  top: 2rem;
  right: 1rem;
}
.btn-mock-primary{
 font-size: 15px;
  font-size: 1rem;
  border-radius: 24px;
  padding: 10px 1.4rem; 
  background-color: var(--main-primary);
  border-color: var(--main-primary);
  color: var(--main-text-color);
  display: inline-block;
}

.voice-item h5{
  font-family: var(--title-font-family);
  font-size: var(--fs-20);
  font-weight: bold;
  padding: 1rem 0;

}
.voice-item p{
  font-size: 12px;
}
.voice-more{
  text-align: center;
}

/* Contact */
.contact-section{
  margin-top: 4rem;
  width: 100%;
  aspect-ratio: 13 / 10;
  background-image: url(/wp-content/themes/ballschule/assets/images/contact-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-contact1{
  width: 200px;
}
.contact-link{
  padding-top: 1rem;
  text-align: center;
}
.contact-link .btn-white{
  font-weight: bold;
  font-size: 1.1rem;
  padding: 1rem 2rem;
  height: auto;
  border-radius: 9999px;
}

.team-section{
  width: 87%;
  margin: 0 auto;
  margin-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
}
.team-section .cp-text{
  font-size: var(--fs-20);
  margin-bottom: 2rem;
}

.team-items{
  display: flex;
  flex-wrap: wrap;
  align-items: start;
}

.team-items .img-team{
  flex: 0 0 33.333%;
  margin-bottom: 2rem;
}
.team-items .img-team a{
  transition: 0.5s;;
}
.team-items .img-team img{
  width: 100%;
  transition: 0.5s;
}
.team-items .img-team a:hover img{
  opacity: 0.6;
}

/* //////////////////////////////////////////////////// */
.hero-container{
  width: 100%;
  
}
.hero-container .hero-wrap{
  width: 100%;
  display: flex;
  position: relative;
  aspect-ratio: 39 / 35;
  justify-content: center;
  align-items: center;
}
.hero-container .hero-wrap .hero-img{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}

.hero-wrap .page-title{
  font-size: var(--fs-30);
  color: var(--main-color-white);
  /* font-family: var(--title-font-family); */
  font-family: var(--poppins-font-family);
  text-align: center;
  font-weight: 500;
  padding-top: 3rem;
  letter-spacing: 3px;
}

.hero-wrap .page-title span{
  display: block;
  font-size: var(--fs-12);
  background-color: #FFFFFF;
  padding: 6px 1rem;
  color: var(--main-text-color);
  max-width: 200px;
  border-radius: 10px;
  margin: 1rem auto 0;
  font-weight: bold;
  
}

/* ////////////////////////////////////// */

.section-white,
.section-primary{
  width: 100%;
  padding: 4rem 0;
  position: relative;
}

.section-primary{
  background-color: var(--main-primary);
}
.section-content{
  width: 87%;
  margin: 0 auto;
  position: relative;
}
.section-content-w100{
  width: 100%;
  margin: 0 auto;
  position: relative;
}


.subpage-title{
  text-align: center; 
  font-size: var(--fs-26);
  font-weight: bold;
  font-family: var(--title-font-family);
}
.section-primary .subpage-title{
  color: #fff;
}

.subpage-cp-text{
  text-align: center; 
  font-size: var(--fs-20);
  font-weight: bold;
  font-family: var(--title-font-family);
  margin-top: 2rem;
}
.fs11-13{
  font-size: 11px;
  line-height: 180%;
}
.fs12-14{
  font-size: var(--fs-12);
  line-height: 180%;
}
.fs13-14{
  font-size: var(--fs-13);
  line-height: 180%;
}
.fs13-16{
  font-size: var(--fs-13);
  line-height: 180%;
}

.color-main{
  color: var(--main-text-color)!important;
}
.color-wthite{
  color: #fff;
}
.color-primary{
  color: var(--main-primary);
}
.sp-centr{
  text-align: center;
}

/* ////////////////////////////////////// */
.about-main-ttl-img{
  width: 266px;
  margin: 1rem auto;
  
}

.about-circle-imgs{
  height: 200px;
}

.about-circle-imgs .about-circle1,
.about-circle-imgs .about-circle2,
.about-circle-imgs .about-circle3{
  position: absolute;
  display: block;
}
.about-circle-imgs .about-circle1{
  width: 130px;
  bottom: 35px;
  left: 40px;
  
}

.about-circle-imgs .about-circle2{
  width: 110px;
  bottom: 0px;
  right: 40px;
}
.about-circle-imgs .about-circle3{
  display: none;
}


.about-circle-imgs .circle-1{
  width: 40px;height: 40px; border-radius: 20px;
  top: 10px;
  right: -36px;
}
.about-circle-imgs .circle-2{
  width: 40px;height: 40px; border-radius: 20px;
  bottom: 150px;
  left: -36px;
}
.about-circle-imgs .circle-3{
  width: 60px;height: 60px; border-radius: 30px;
  bottom: 110px;
  left: -24px;
}
.about-circle-imgs .circle-4{
  width: 47px;height: 47px; border-radius: 24px;
  bottom: 110px;
  right: 0;
}
.about-circle-imgs .circle-5{
  width: 68px;height: 68px; border-radius: 32px;
  bottom: 125px;
  right: -40px;
}

.about-main-ttl-img img{
  width: 100%;
}

.about-flex-1{
  display: flex;
  flex-direction: column;
  margin-top: 4rem;
}

.about-flex-1 .about-flex-col{
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-title1{
  font-size: var(--fs-20);
  font-weight: bold;
  font-family: var(--title-font-family);
  text-align: center;
  padding: 0 0 1rem;
  border-bottom: 3px solid #fff;
}
.about-flex-1 .about-flex-col .fs13-16{
  padding-top: 1.5rem;
}

.about-flex-feature{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.about-flex-feature .feature-item{
  background-color: #fff;
  width: 100%;
  border-radius: 15px;
  padding: 1rem;
}
.about-flex-feature .feature-item h4{
  text-align: center;
  font-size: var(--fs-20);
  font-weight: bold;
  font-family: var(--title-font-family);
  border-bottom: 3px solid var(--main-primary);
  padding-bottom: 0.5rem;
}
.about-flex-feature .feature-item .feature-body{
  padding-top: 0.5rem;
}

.about-skill-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.about-skill-row h5{
  font-size: var(--fs-20);
  font-weight: bold;
  font-family: var(--title-font-family);
}
.about-skill-row .about-skill-thmb{
  width: 100%;
}
.about-skill-row .about-skill-thmb img{
  width: 100%;
}
.about-skill-row .about-skill-body{
  padding-top: 1.2rem;
}
.pc-pd{
  margin: 0;
  padding: 0;
}

.about-skill-line{
  margin: 4rem 0;
  border-top: 2px dashed var(--main-primary);
  /* border-top-style: dashed; */
}

.about-point-row{
  display: flex;
  flex-direction: column;
  gap:1rem
}
.about-point-row .col1{
  text-align: center;
}
.about-point-row .col1 img{
  width: 120px;
}
.about-point-row .col1 h5{
  padding-top: 0.5rem;
}

.about-point-row .col2{
  text-align: left;
}

.about-key-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.about-key-row h5{
  text-align: center;
}
.about-key-row h5 svg{
  width: 24px;
  height: 24px;
  vertical-align: bottom;
}
.about-key-row .col-b{

}
.about-key-row .col-b img{
  width: 100%;
}
.about-key-row .col-c{
  padding: 1rem;
}

.about-program-row{
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.about-program-row .item{

}

.about-program-row .item img{
  width: 100%;
}
.about-program-row .item .lbl{
  display: block;
  color: var(--main-primary);
  text-align: center;
  padding-top: 0.5rem;
}

.voice-wrap{
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
}

.voice-wrap .voice-user{
  width: 100%;
  text-align: center;
  margin-bottom: 2rem;
}
.voice-wrap .voice-user .voice-user-img{
  width: 80%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.voice-user-info{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 0.5rem;
}

.voice-user-info .voice-user-school{
  background-color: var(--main-primary);
  color: #fff;
  font-size: 14px;
  padding: 6px 1rem;
  border-radius: 20px;
}
.voice-user-info .voice-user-name{
  font-size: 15px;
  font-weight: bold;
  font-family: var(--title-font-family);
}

.voice-wrap .voice-qas{
  width: 100%;
  background-color: #F3F3F3;
  border-radius: 15px;
  padding: 2rem 1rem;
  margin-bottom: 2rem;
}

.voice-wrap .voice-qa-item{
  margin-bottom: 1rem;
}
.voice-wrap .voice-qa-item:last-child{
  margin-bottom: 0rem;
}

.voice-qa-item .question{
  display: flex;
  align-items: start;
  justify-content: space-between;
  background: #fff;
  border-radius: 8px;
  padding: 8px 1rem;
}
.voice-qa-item .question .char-q{
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--main-primary);
  width: 28px;
  text-align: left;
}
.voice-qa-item .question .text-q{
  flex: 1;
  font-size: 15px;
  font-family: var(--title-font-family);
  font-weight: bold;
}

.voice-qa-item .answer{
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding-top: 1rem;
  gap: 12px;
}

.voice-qa-item .answer .answer-type{
  width: 48px;
  height: 48px;
  border-radius: 24px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-family: var(--title-font-family);
  font-weight: bold;
  
}
.voice-qa-item .answer .answer-type.parent{
  background-color: var(--main-primary);
}
.voice-qa-item .answer .answer-type.child{
  background-color: var(--main-warning);
}
.voice-qa-item .answer .answer-text{
  flex: 1;
}

.about-message-mainttl{
  color: var(--main-text-color)!important;
  margin-bottom: 1.5rem;
}
.about-message-subttl{
  text-align: center;
  color: #fff;
}
.about-message{
  width: 100%;
  background-color: #fff;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-message .left{
  text-align: center;
}
.about-message .left img{
  width: 100%;
}
.about-message .left .about-message-lbl{
  font-size: 12px;  
  background-color: var(--main-primary);
  width: 150px;
  margin: 1rem auto 0.5rem;
  padding: 6px;
  border-radius: 20px;
}
.about-message .left .about-message-name{
  font-size: 12px;  
}

.about-message .right{
  width: 100%; 
}

.about-message .right .fs12-14{
  padding-top: 1.5rem;
}

.about-links{
  margin-bottom: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-link{
  width: 100%;
  aspect-ratio: 35 / 12;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-20);
  color: #fff;
  font-weight: bold;
  padding: 0 2rem;
  transition: 0.5s;
}
.about-link:hover{
  opacity: 0.7;
}

.about-link.about-link1{
  background-image: url(/wp-content/themes/ballschule/assets/images/about-link1.png);
}
.about-link.about-link2{
  background-image: url(/wp-content/themes/ballschule/assets/images/about-link2.png);
}

/* Investigation */
.invest-row1{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}
.invest-row1 .left{
  text-align: center;
}
.invest-row1 .left img{
  width: 200px;
}
.invest-row1 .right{
  text-align: center;
}
.invest-row1 .right .fs13-16{
  text-align: left;
  padding-top: 1.5rem;
}

.invest-video-frame{
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 1rem;
}

.invest-global{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4rem auto;
  width: 100%;
  aspect-ratio: 17 / 20;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: var(--fs-20);
  color: #fff;
  font-weight: bold;
  padding: 0 2rem;
  background-image: url(/wp-content/themes/ballschule/assets/images/invest-link.png);
}
.invest-global .title-fs25{
  margin-bottom: 2rem;
}

/* ------------------------------ */
.wthite-round-wrap{
  width: 100%;
  border-radius: 20px;
  background-color: #fff;
  padding: 4rem 1.5rem;
  margin-top: 4rem;
}
.wthite-round-wrap .subpage-title{
  color: var(--main-primary);
}
.contact-container{
  width: 100%;

}

.contact-container .contact-wrap{
  padding-top: 80px;
}
.section-contact1{
  width: 100%;
  background-color: var(--main-color-white);
}

.section-contact2{
  width: 100%;
  background-color: #F3F3F3;
}

.contact-inner{
  width: 87%;
  margin: 0 auto;
  /* padding: 2rem 0; */
}

.contact-content{
  width: 100%;
  background-color: var(--main-color-white);
  border-radius: 20px;
  padding: 2rem 1.5rem;
}
.contact-inner .page-title{
  text-align: center;
  position: relative;
  font-size: var(--fs-26);  
  color: var(--main-primary);
  font-family: var(--title-font-family);
  font-weight: bold;
  padding: 2rem 0 1.5rem 0;
  margin-bottom: 1.5rem;
}
.contact-inner .page-title:after{
  content: '';
  display: block;
  position: absolute;
  width: 50px; 
  height: 3px;
  background-color: var(--main-primary);
  bottom: 0;
  left: 50%;
  margin-left: -25px;
}
.contact-inner .seminar-title,
.condition-title{
  text-align: center;
  color: var(--main-text-color);
  font-size: var(--fs-20);
  font-family: var(--title-font-family);
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.condition-title{
  font-size: var(--fs-26);
  margin-bottom: 0;
}

.contact-inner .seminar-description{
  font-size: var(--fs-13);
  text-align: center;
  padding-bottom: 1.5rem;
}

.contact-title{
  width: 100%;
  background-color: #F3F3F3;
  border-radius: 8px;
  font-size: var(--fs-20);
  font-family: var(--title-font-family);
  font-weight: bold;
  text-align: left;
  padding: 10px 1.5rem;
  margin: 0;
}
.contact-values{
  padding: 1.5rem 0;
  font-size: var(--fs-13);
}

.contact-privacy-policy{
  border: 1px solid #C4C4C4;
  height: 250px;
  overflow-y: scroll;
  font-size: var(--fs-12);
  border-radius: 5px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.contact-privacy-policy .contact-privacy-policy-inner{
  padding: 1rem;
}
.btn-area{
  text-align: center;
}

form .btn-area p {
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  margin: 0;
  padding-bottom: 4rem;
}
form .btn-area p .btn{
  display: block;
  width: 180px;
}

.btn-form-submit{
  /* display: block;
  margin: 0 auto; */
}


.faq-page-title{
  font-size: var(--fs-18);
  padding: 2rem 0;
}

.faq-terms{
  display: grid;
  grid-template-columns: 1fr 1fr; /* デフォルト（SP時）: 2列 */
  gap: 16px;
  margin-bottom: 4rem;
}
.faq-terms .btn{
  color: var(--main-text-color);
}
.faq-content{
  width: 100%;
  background-color: #F3F3F3;
  border-radius: 20px;
  padding: 2rem 1.5rem;
}

.faq-title{
  text-align: center;
  color: var(--main-text-color);
  font-family: var(--title-font-family);
  font-size: var(--fs-26);
  font-weight: bold;
  margin: 1rem 0 3rem;
  padding-bottom: 1rem;
  position: relative;
}

.faq-title::after{
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: var(--main-primary);
  bottom: 0;
  left: 50%;
  margin-left: -25px;
  position: absolute;
}
.faq-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-list .faq-item{
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.faq-question{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-question .char-q{
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: var(--fs-20);
  color: var(--main-primary);
  width: 36px;
  text-align: left;
}
.faq-question .text-q{
  flex: 1;
  font-size: var(--fs-16);
  font-family: var(--title-font-family);
  font-weight: bold;
}
.faq-question .handle-q{
  font-size: var(--fs-20);
  color: var(--main-primary);
  width: 36px;
  text-align: right;
}
.faq-answer{
  font-size: 13px;
}
.faq-answer p{
  margin: 0;
  padding-top: 1.5rem;
}
/* //////////////////////////////////////////////////// */
.form-row{
  margin-bottom: 1.4rem;
}
.form-row .form-label{
  font-size: 1rem;
  font-weight: bold;
}
.form-row .form-label p,
.form-row .form-input p{
  margin: 0;
}

.form-row .form-label i.req{
  color: red;
}
.form-row .form-label .lbl-desp{
  font-size: 11px;
  font-weight: normal;
}

.form-row .form-input{

}
.wpcf7-spinner {
  display: none !important;
}

/* フォーム送信中は表示 */
.wpcf7 .wpcf7-form.submitting .wpcf7-spinner {
  display: inline-block !important; /* 必要なら block に */
}
.wpcf7-response-output{
  border-radius: 5px;
  padding: 1rem;
  /* color: #db6a6a; */
  /* background-color: #ffdede; */
}
.wpcf7-not-valid-tip{
  color: #e86161;
  background: #ffe4e4;
  margin-top: 0.5rem;
  padding: 4px 1rem;
  border: 2px solid #e86161;
  font-size: 14px;
  border-radius: 5px;
}
.wpcf7-list-item{
  display: block;
}

.program-class{

}

.program-class .btn-mock-primary{
  color: #fff;
  width: 30%;
  margin: 0 auto;
  display: block;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 18px;
  height: auto;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  width: 200px;
  max-width: 200px;
}

.program-class-items{
  list-style: none;
  padding: 0;
  margin: 0;
}
.program-class-items li{
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  padding: 1rem 0;
  border-bottom: 1px solid #D9D9D9;
}

.program-class-items li .pc-dot{
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: var(--main-warning);
  margin-top: 8px;
}
.program-class-items li .pc-name{
  flex: 1;
  font-weight: 500;
  font-size: var(--fs-16);
  padding-right: 1rem;
}
.program-class-items li .pc-btn{

}
.program-class-items li .pc-btn .btn{
  font-size: var(--fs-14);
  font-size: var(--fs-14);
  padding: 6px 1rem;
  height: 38px;
}

.site-classroom{
  padding-top: 80px;
}

.cf-section1{
  width: 87%;
  margin: 0 auto;
}

.cr-title{
  width: 90%;
  font-size: var(--fs-18);
  color: var(--main-text-color);
  font-family: var(--title-font-family);
  font-weight: bold;
  background-color: var(--main-primary);
  text-align: center;
  padding: 1rem 2rem;
  border-radius: 30px;
  margin: 2rem auto;
  
}
.cr-sub-title{
  font-size: var(--fs-26);
  color: var(--main-text-color);
  font-family: var(--title-font-family);
  font-weight: bold;
  text-align: center;
  margin: 4rem 0 2rem;
}

.cf-message-wrap{
  display: block; 
  margin-bottom: 2rem;
}
.cf-message-wrap .cf-message-left{

}
.cf-message-wrap .cf-message-left .cf-message-title{
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-20);
  text-align: center;
  position: relative;
  color: var(--main-primary);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  position: relative;
}

.cf-message-wrap .cf-message-left .cf-message-title:after{
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 3px;
  bottom: 0;
  left: 50%;
  margin-left: -25px;
  background: var(--main-primary);
}
.cf-message-wrap .cf-message-right{
  font-size: var(--fs-13);
}

.cf-section-thumb{
  width: 100%;
  background-color: #F3F3F3;
}

.classroom-photos {
  display: flex;
  justify-content: center;
  gap: 1rem;
  /* SP */
  justify-content: flex-start;
}

.classroom-photos.swiper {
    padding-right: 12%;
    padding-top: 1rem;
    padding-bottom: 2rem;
}
.classroom-photos.swiper.classroom-len-1{
  padding-right: 0;
  padding-bottom: 1rem;
}
.classroom-photo{
  width: 100%;
  aspect-ratio: 4 / 3;    /* 常に4:3の枠 */
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 20px;
}
.classroom-photo-flex{
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;    /* 常に4:3の枠 */
  overflow: hidden;
  border-radius: 20px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.classroom-photo img {
  width: 90%;
  aspect-ratio: 4 / 3;    /* 常に4:3の枠 */
  object-fit: cover;       /* 画像を枠にフィットさせる */
  object-position: center center; /* 中央を基準にトリミング */
  display: block;
  border-radius: 20px;
}

.cf-detail-wrap{
  display: block;
  justify-content: space-between;
}
.cf-detail-wrap .left{
  width: 100%;
}

.cf-detail-wrap .btn-mock-primary{

}

.cf-detail-wrap .detail-value{
  font-size: var(--fs-13); 
  padding: 1rem 1rem 2rem;
}

.cf-detail-wrap .detail-value .fee-description{
  font-size: 11px;
  padding-top: 10px;
}
.classroom-map{
  width: 100%; 
  aspect-ratio: 5 / 4;
}
.classroom-map iframe{
  border: none;
  width: 100%;
  height: 100%;
}

.cf-lesson-wrap{
  display: flex;
  flex-direction: column;
}
.cf-lesson-item{
  border: 1px solid #C2C2C2;
  padding: 0;
}
.cf-lesson-item + .cf-lesson-item {
  border-top: none; /* A-B, B-C の間で二重線防止 */
}
.cf-lesson-head{
  text-align: center;
  font-size: var(--fs-16);
  padding: 1rem;
  border-bottom: 1px solid #C2C2C2;
}
.cf-lesson-body{
  font-size: var(--fs-13);
  padding: 1rem;
}

.cf-contact-flow{
  text-align: center;
  padding-bottom: 4rem;
}
.cf-contact-flow img{
  width: 80%;
  max-width: 320px;
}



/* ///////////////////// */
.location-wrap{
  background-color: #F3F3F3;
  width: 100%;
  padding: 1.5rem 1rem;
  border-radius: 20px;
}

.location-items{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr; /* SP: 1列 */
  gap: 12px;
}
.location-items .btn-handle{
  cursor: pointer;
}

.location-items li{
  background-color: #fff;
  border-radius: 5px;
}

.location-items li h3,
.location-items li h3 a{
  font-size: var(--fs-18);
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.location-items li h3{
  padding: 1rem 2rem;
}
.location-items li h3 .faicon{
  color: var(--main-primary);
}
.location-items li a{
  color: var(--main-text-color);
}

.location-prefs{
  display: grid;
  grid-template-columns: 1fr 1fr; /* SP: 1列 */
  padding: 1rem 2rem;
  gap: 12px;
}

.location-prefs .location-pref-link{
  border: 2px solid #C2C2C2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  transition: 0.5s;;
}

.location-prefs .location-pref-link .faicon{
  color: #C2C2C2;
}
.location-prefs .location-pref-link:hover{
  border: 2px solid var(--main-primary);
  color: var(--main-primary);
}

.crg-title-under{
  margin-top: 1rem;
  width: 203px;
}
.crg-title-desp{
  font-size: var(--fs-13);
  text-align: center;
  padding-top: 1rem;
  line-height: 180%;
}

.section-crg-main{

}
.section-crg-main .circle1{
  top: 96px;
  left: -10px;
}
.section-crg-main .circle2{
  top: 46px;
  left: -56px;
}
.section-crg-main .circle3{
  top: 0px;
  right: -50px;
}
.section-crg-main .circle4{
  top: 110px;
  right: -30px;
}
.location-title{
  text-align: center;
  font-size: var(--fs-20);
  font-weight: bold;
  font-family: var(--title-font-family);
  padding: 0 0 1.5rem;
  border-bottom: 1px solid #C2C2C2;
  margin-bottom: 1.5rem;
}

.contact-links{
  padding: 4rem 0 4rem;
}

.contact-links .btn{
  display: flex;
  font-size: var(--fs-20);
  font-family: var(--title-font-family);
  font-weight: bold;
  color: #fff;
  height: auto!important;
  text-align: left;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}


.cert-merit-row{
  margin-top: 1rem;
}
.cert-merit-row .cert-merit-col{
  margin-top: 1.4rem;
}
.cert-merit-title{
  font-size: var(--fs-20);
  font-weight: bold;
  font-family: var(--title-font-family);
  color: var(--main-text-color);
  display: flex;
  gap: 1rem;
}
.cert-merit-body{
  font-size: var(--fs-13);
  padding: 0.5rem;
}
.cert-merit-img{
  width: 100%;
}
.cert-step-img{
  width: 320px;
  display: block;
  margin: 2rem auto 1rem;
}

.cert-danger{
  border: 3px solid #FF0000;
  border-radius: 15px;
  margin: 3rem auto;
}
.cert-danger .cert-danger-title{
  text-align: center;
  font-size: var(--fs-18);
  font-weight: bold;
  font-family: var(--title-font-family);
  padding: 1rem;
}
.cert-danger .cert-danger-title .fa-solid{
  color: #FF0000;
  font-size: 40px;
}
.cert-danger .cert-danger-title label{
  display: block;
  margin: 0.5rem auto 0;
}
.cert-danger .cert-danger-desp{
  font-size: 11px;
  padding: 0 1rem 1rem;
}
.cert-links-row{
  display: grid;
  grid-template-columns: 1fr; /* SP: 1列 */
  gap: 12px;
  justify-items: center;
}
.cert-links-row .btn{
  color: #fff;
  display: block;
  width: 70%;
}

.contact-cert-ml{
  width: 100%;
  aspect-ratio: 17 / 19;
  background-image: url(/wp-content/themes/ballschule/assets/images/cert4.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 2rem 0 4rem;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-cert-ml h5{
  text-align: center;
  font-size: var(--fs-26);
  font-weight: bold;
  font-family: var(--title-font-family);
  color: #fff;
}
.contact-cert-ml p{
  font-size: 13px;
  color: #fff;
  padding: 1rem 3rem;
}
.contact-cert-ml .btn{

}


.partner-merit-wrap{
  background-color: #fff;
  border-radius: 20px;
  padding: 1rem;
  gap: 1rem;
  margin-top: 2rem;
}

.partner-merit-item{
  display: flex;
  flex-direction: column;
}

.partner-merit-item .title{
  border-bottom: 2px dashed var(--main-primary);
  position: relative;
  padding: 0.5rem 1rem 0.5rem 24px;
}
.partner-merit-item .title:after{
  content: '';
  width: 13px;
  height: 13px;
  border-radius: 7px;
  background-color: var(--main-primary);
  position: absolute;
  left: 1px;
  top: 18px;
}
.partner-merit-item .body{
  padding: 0.5rem 1rem;
}

.partner-plan-wrap{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.partner-plan-item{
  width: 100%;
  border-radius: 20px;
  border: 2px solid var(--main-primary);
}
.partner-plan-item img{
  width: 100%;
}
.partner-plan-item .title{
  color: var(--main-primary);
  text-align: center;
  padding-top: 1rem;
}
.partner-plan-item .title-desp{
  text-align: center;
  font-size: 15px;
  padding: 0.5rem;
}
.partner-plan-item .plain-main{
  border-top: 2px dashed var(--main-primary); 
  padding: 1.5rem 0;
  margin: 1rem 1rem 0;
}
.partner-plan-item .plain-main .plan-flex:first-child{
  margin-bottom: 1rem;
}
.plan-flex{
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.plan-flex .btn-mock-primary{
  background-color: var(--main-primary);
  font-size: 12px; 
  display: block; 
  padding: 6px 12px;
  width: 60px;
  text-align: center;
  color: #fff;
}
.plan-flex ul{
  flex: 1;
  margin: 0;
  padding-left: 20px;
}
.plan-flex ul li{
  font-size: var(--fs-12);
}


.partner-voice{
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 2px dashed var(--main-primary);
}

.partner-voice:last-child{
  border-bottom: none;
}

.partner-voice-head{
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.partner-voice-head .no{
  width: 55px;
  height: 55px;
  border-radius: 28px;
  background-color: var(--main-primary);
  color: #fff;
  font-family: var(--title-font-family);
  font-size: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
}
.partner-voice-head .title{
  font-family: var(--title-font-family);
  font-size: 15px;
  font-weight: bold;
  color: var(--main-primary);
}
.partner-voice-main{
  font-family: var(--title-font-family);
  font-size: 20px;
  font-weight: bold;
  padding: 1rem 0;
}
.partner-voice-img{
  width: 100%;
}
.partner-voice-message{
  font-size: 12px;
  padding: 1rem 0;
}

.partner-step{
  padding-top: 2rem;
}

.partner-step img{
  width: 100%;
}

.sponsorship-banner{
  width: 100%;
  aspect-ratio: 34 / 55;
  background-image: url(/wp-content/themes/ballschule/assets/images/sponsor.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
}
.sponsorship-banner .desp{
  font-size: 14px;
  color: #fff;
  text-align: left;
  padding: 5rem 2rem 0;
}

.partner-contact{
  width: 280px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  position: relative;
  height: auto;
  border-radius: 9999px;
  display: block;
}
.partner-contact .abs-icon{
  position: absolute;
  right: 2rem;
  top: 24px;
  font-size: 18px;
}

.instructor-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.instructor-link{
  width: calc(50% - 5px);
  border: 2px solid var(--main-primary);
  color: var(--main-primary);
  font-size: var(--fs-16);
  background-color: #fff;
  transition: 0.5s;
  border-radius: 99999px;
  font-family: var(--title-font-family);
  font-weight: bold;
  padding: 10px 2rem 10px 16px;
  display: block;
  text-align: center;
  position: relative;
}
.instructor-link .fa-chevron-down{
  position: absolute;
  top: 14px;
  right: 10px;
}

.instructor-content1{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 2rem;
}


.instructor-content1 .left{
  
}

.instructor-content1 .right{
  padding: 2rem 1rem;
}
.instructor-content1 .right .sub-ttl{
  text-align: center;
  color: var(--main-text-color);
  padding-bottom: 2rem;
}
.instructor-content1.rereverse .sub-ttl{
  color: #fff;
}
.instructor-content1 .left img{
  display: block;
  width: 80%;
}
.instructor-content1.rereverse .left img{
  margin-left: auto;
}

.instructor-content1 .right .grid{
  display: grid;
  grid-template-columns: 50px 1fr; /* 2列構成 */
  grid-template-areas:
    "a b"
    "c c"; /* ★ SP時 */
  gap: 0.5rem 1rem;
}
.instructor-content1 .right .grid .a { grid-area: a; }
.instructor-content1 .right .grid .b { grid-area: b; }
.instructor-content1 .right .grid .c { grid-area: c; }

.instructor-content1 .no{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 9999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: #fff;
  background-color: var(--main-primary);
}
.instructor-content1 .title{
  color: var(--main-primary);
  display: flex;
  align-items: center;
  height: 100%;
}
.instructor-content1 .desp{
  font-size: var(--fs-13);
  line-height: 180%;
}

.instructor-content1.rereverse .no{
  color: var(--main-primary);
  background-color: #fff;
}
.instructor-content1.rereverse .title{
  color: var(--main-text-color);
}

.instructor-flow{
  background-color: #F3F3F3;
  border-radius: 20px;
  padding: 2rem;
  margin: 2rem auto 0;
  text-align: center;
}
.instructor-flow.rereverse{
  background-color: #FFFFFF;
  margin: 0 auto 0;
}
.instructor-flow .step-img{
  width: 100%;
}

.instructor-flow .contact-btn{
  padding-top: 2rem;
}
.instructor-flow .contact-btn .btn{
  color: #fff;
  padding: 1rem 2rem;
}

.instructor-event{
  padding-top: 4rem;
  text-align: center;
}
.instructor-event img{
  width: 90%; 
}

.event-items{
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  gap: 1rem;
}
.event-item{
  width: 100%;
  border-radius: 20px;
  text-align: center;
  padding: 1rem;
  background: var(--main-color-white);
}
.event-items.has-border .event-item{
  border: 2px solid var(--main-primary);
}

.event-item .title{
  color: var(--main-primary);
  padding-bottom: 1rem;
}


#confirm-modal{
  
}

#confirm-modal .modal-title{
  font-weight: bold;
  font-family: var(--title-font-family);
  color: var(--main-primary);
  font-size: var(--fs-20);
}

.confirm-modal-content {
  padding: 1rem;
}

.confirm-row{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid #C2C2C2;
  padding: 1rem 0.5rem;
  gap: 0.5rem;
}
.confirm-row:last-child{
  border-bottom: none
}

.confirm-row .confirm-label{
  width: 200px;
  font-weight: bold;
  font-family: var(--title-font-family);
  color: var(--main-text-color);
}
.confirm-row .confirm-value{
  flex: 1;
}

.contact-thanks{
  width: 100%;
  padding: 2rem 0 4rem;
}

.section-search-form {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.search-form-wrap{
  background-color: #fff;
  width: 87%;
  margin: 0 auto;
  border-radius: 10px;
  padding: 1rem;
}
.search-form-title{
  font-size: var(--fs-20);
  text-align: center;
  font-family: var(--title-font-family);
  font-weight: bold;
  padding-bottom: 1rem;
  border-bottom: 1px solid #C2C2C2;
  
}

.search-form-body{
  padding: 1rem 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.btns{
  padding-top: 1rem;
  text-align: center;
}
.btns .btn{
  color: #fff;
  font-family: var(--poppins-font-family);
  width: 100%;
  max-width: 200px;

}

.select-round-container{
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
}
.select-round-container:after{
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  /* margin-left: 0.5em; */
  color: var(--main-primary);
  position: absolute;
  right: 1rem;
  top: 0.5rem;
}

.select-round-container .select-round{
  font-size: 15px;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
}


.city-node{
  font-size: var(--fs-20); 
  color: #fff;
  background-color: var(--main-primary);
  font-family: var(--title-font-family);
  font-weight: bold;
  border-radius: 9999px;
  text-align: center;
  padding: 10px;
  width: 87%;
  max-width: 340px;
  margin: 2rem auto 1rem;
}

.prefecture-group{
  padding: 2rem 0 4rem;
}
.city-items{
  width: 87%;
  margin: 0 auto 0;
  
}
.city-item{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 1px solid #D9D9D9;
  padding: 1rem 0;
}
.city-item:last-child{
  border-bottom:none;
}
.city-item .classroom-name{
  font-size: 15px;
  margin: 0;
}

.city-item-row{
  display: flex;
  gap: 0.5rem;
  align-items: start;
}

.city-item-row .address { 
  flex: 6;
  font-size: 12px;
  position: relative;
  padding-left: 20px;
}
.city-item-row .address .location-pin{
  position: absolute;
  color: var(--main-warning);
  top: 3px;
  left: 0;
  font-size: 16px;
}
.city-item-row .btns { flex: 4; font-size: 14px;padding-top: 0;}
.city-item-row .btns .btn{
  font-size: 14px;
  padding: 10px 0;
  width: 130px;
  height: 42px;
  border-radius: 9999px;
}

.ff-pop{
  font-family: var(--poppins-font-family);
}

.fl-140{
  line-height: 140%;
}
.fl-150{
  line-height: 150%;
}
.fl-160{
  line-height: 160%;
}
.fl-180{
  line-height: 180%;
}

.contact-privacy-policy-inner h2{
  font-size: 1rem;
  margin-bottom: 20px;
}
.contact-privacy-policy-inner h3{
  font-size: 13px;
  margin-bottom: 10px;
}
.contact-privacy-policy-inner table{
  margin-bottom: 10px;
}
.contact-privacy-policy-inner table tr{
  border-bottom: 1px solid #C2C2C2;
}
.contact-privacy-policy-inner table tr th,
.contact-privacy-policy-inner table tr td{
  padding: 4px 0;
  font-size: 12px;
}

.no-data{
  text-align: center;
  padding: 6rem 0 2rem;
  font-size: var(--fs-20);
  color: #999;
}

.section-404{
  width: 87%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 0 6rem;
}

.section-404 h1{
  text-align: center;
  font-family: var(--poppins-font-family);
  font-size: 80px;
  letter-spacing: 5px;
  font-weight: bold;
  color: var(--main-primary);
}
.section-404 h1 span{
  display: block;
  text-align: center;
  font-size: 22px;
  letter-spacing: 2px;
}

.desp-404{
  padding-top: 2rem;
  font-size: 16px;
  text-align: center;
  padding-bottom: 4rem;
}
.btns-404{
  text-align: center;
  padding-top: 3rem;
}