@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　circle
 * 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/




/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* page-nav-area
-----------------------------------------------------------------*/
.page-nav-area{
	padding: 90px 0 120px;
}
.page-nav{
	justify-content: space-between;
	max-width: 500px;
  width: 100%;
	margin-inline: auto;
}
.page-nav li{
	max-width: 235px;
	width: calc(50% - 5px);
}


/* club
-----------------------------------------------------------------*/
.club{
  padding: 160px 0;
  background: var(--beige);
}
.club h2{
 margin-bottom: 50px;
font-size: min(3.39vw, 5.2rem);
line-height: 1;
 text-align: center; 
}
.club h2 + .txt{
  margin-bottom: 100px;
  text-align: center;  
}
.club-list li:nth-child(n+2){
  margin-top: 110px;  
}
.club-list .pic-main{
  margin-bottom: 60px;  
}
.club-list .txt-area{
  width: 44%; 
}
.club-list h3{
  margin-bottom: 10px;
  line-height: 1.4;
}
.club-list h3 span{
  font-size:min(2.28vw,3.5rem);
}
.club-list h3 small{
  padding-left: .5em;
  font-size:min(0.91vw,1.4rem);
}
.club-list .ico-campus{
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 100vmax;
  background: var(--green);
  line-height: 1;
  color: #333;
  font-size:min(0.78vw,1.2rem);
}
.club-list .txt{
  font-size:min(1.04vw,1.6rem);
  line-height: 1.6;
}
.club-list .layout-box{
  flex-direction: row-reverse;  
}
.club-list .pic-area{
  display: flex;
  justify-content: space-between;
  width: 50%;  
}
.club-list .pic-area p{
  max-width: 310px;
  width: calc(50% - 5px);  
}


/* circle
-----------------------------------------------------------------*/
.circle{
  padding: 160px 0;
}
.circle h2{
 margin-bottom: 50px;
font-size: min(3.39vw, 5.2rem);
line-height: 1;
 text-align: center; 
}
.circle h2 + .txt{
  margin-bottom: 100px;
  text-align: center;  
}
.club-circle-list > div:nth-child(n+2){
  margin-top: 160px;  
}
.club-circle-list dt{
  margin-bottom: 70px;
  font-size:min(2.28vw,3.5rem);
  line-height: 1.5; 
}
.club-circle-list dd > ul{
  display: flex;
  flex-wrap: wrap;  
}
.club-circle-list dd > ul > li{
  margin-left: 40px;
  max-width: 406px;
  width: cala((100% - 80px)/3);
  background:  var(--beige);
  border-radius: 10px;
  overflow: hidden;  
}
.club-circle-list dd > ul > li:nth-child(3n+1){
  margin-left: 0;  
}
.club-circle-list dd > ul > li:nth-child(n+4){
  margin-top: 80px;  
}
.club-circle-list dd .txt-box{
  padding: 30px 8% 40px;  
}
.club-circle-list h3{
  margin-bottom: 10px;
  line-height: 1.4;  
}
.club-circle-list h3 span{  
  font-size:min(1.76vw,2.7rem);
  letter-spacing: .05em;  
}
.club-circle-list h3 small{
  display: block;  
  font-size:min(0.78vw,1.2rem);  
}
.club-circle-list .ico-campus{
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 100vmax;
  background: var(--green);
  line-height: 1;
  color: #333;
  font-size:min(0.78vw,1.2rem);
}
.club-circle-list .txt{
  font-size:min(1.04vw,1.6rem);
  line-height: 1.6;
}
.club-circle-list .dot-list{
  margin-top: 10px;
  font-size:min(0.78vw,1.2rem);
}
.club-circle-list .dot-list li::before{
  transform: scale(.7);
  color: var(--green);  
}
.club-circle-list .dot-list li:nth-child(n+2){
  margin-top: 5px;  
}




















/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {


/* page-nav-area
-----------------------------------------------------------------*/
  .page-nav-area{
    padding: 60px 0;
  }
  .page-nav{
    flex-wrap: wrap;
    max-width: none;
  }
  .page-nav li{
    max-width: none;
    width: calc(50% - 10px);
  }
  .page-nav li:nth-child(n+3){
    margin-top: 20px; 
  }


/* club
-----------------------------------------------------------------*/
  .club{
    padding: 110px 0;
  }
  .club h2{
   margin-bottom: 25px;
  font-size: 2.7rem;
  }
  .club h2 + .txt{
    margin-bottom: 50px;
    text-align: justify;  
  }
  .club-list li:nth-child(n+2){
    margin-top: 60px;  
  }
  .club-list .pic-main{
    margin-bottom: 20px;  
  }
  .club-list .layout-box{
    display: block;  
  }
  .club-list .txt-area{
    width: 100%; 
  }
  .club-list h3 span{
    margin-right: .1em;
    font-size: 2rem;
  }
  .club-list h3 small{
    margin-left: 0;
    font-size: 1.2rem;
  }
  .club-list .ico-campus{
    font-size: 1.2rem;
  }
  .club-list .txt{
    font-size: 1.4rem;
    text-align: justify;
  }
  .club-list .pic-area{
    width: 100%;
    margin-bottom: 20px;  
  }
  .club-list .pic-area p{
    max-width: none;
  }


/* circle
-----------------------------------------------------------------*/
  .circle{
    padding: 110px 0;
  }
  .circle h2{
   margin-bottom: 25px;
  font-size: 2.7rem; 
  }
  .circle h2 + .txt{
    margin-bottom: 50px;
    text-align: justify;  
  }
  .club-circle-list > div:nth-child(n+2){
    margin-top: 100px;  
  }
  .club-circle-list dt{
    margin-bottom: 20px;
    font-size: 2.2rem;
  }
  .club-circle-list dd > ul{
    display: block;  
  }
  .club-circle-list dd > ul > li{
    margin-left: 0;
    max-width: none;
    width: 100%; 
  }
  .club-circle-list dd > ul > li:nth-child(n+2){
    margin-top: 20px;  
  }
  .club-circle-list dd .txt-box{
    padding: 20px 20px 25px;  
  }
  .club-circle-list h3 span{  
    font-size: 2rem;
  }
  .club-circle-list h3 small{
    margin-top: 3px;
    font-size: 1.2rem;  
  }
  .club-circle-list .ico-campus{
    font-size: 1.2rem;
  }
  .club-circle-list .txt{
    font-size: 1.4rem;
    text-align: justify;
  }
  .club-circle-list .dot-list{
    margin-top: 10px;
    font-size: 1.2rem;
  }


}