@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　national-license
 * 
 */

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




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

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


/* national-lisence
-----------------------------------------------------------------*/
.national-lisence{
  padding: 120px 0 160px;
}
.national-lisence h2{
  margin-bottom: 100px;
}
.feature-box{
 display: flex;
 justify-content: space-between; 
}
.feature-box + .feature-box{
  margin-top: 110px;
}
.feature-box .txt-area{
  width: 49.3%;
}
.feature-box .txt-area h3{
  margin-bottom: 40px;
  font-size:min(1.76vw,2.7rem);
  line-height: 1.5;  
}
.feature-box .txt-area .txt{
  font-size:min(1.04vw,1.6rem);
  text-align: justify;  
}
.feature-box .pic{
  max-width: 580px;
  width: 44.616%;
}
.feature-box.box02{
  flex-direction: row-reverse;  
}
.feature-box dl > div:nth-child(n+2){
  margin-top: 50px;  
}
.feature-box dl dt{
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  line-height: 1;  
}
.feature-box dl dt .num{
  flex-shrink: 0;
  padding-right: 15px;
  margin-right: 15px;
  border-right: 1px solid #ccc;
  font-size:min(2.08vw,3.2rem);
  color: var(--green);
  font-family: "Gilda Display", serif;  
}
.feature-box dl dt .ttl{
  font-size:min(1.5vw,2.3rem);
  line-height: 1.4;  
}
.feature-box dl dd{
  font-size:min(1.04vw,1.6rem);
  line-height: 1.6;
  text-align: justify;
}


/* exam-preparation
-----------------------------------------------------------------*/
.exam-preparation{
  padding: 160px 0;
  background:  var(--beige);
}
.exam-preparation h2{
  margin-bottom: 100px;  
}
.preparation-box{
  display: flex;
  background: var(--light);
  border-radius: 10px;
  overflow: hidden;  
}
.preparation-box + .preparation-box{
  margin-top: 80px;  
}
.preparation-box .pic{
  max-width: 512px;
  width: 39.4%; 
}
.preparation-box .pic img{
  width: 100%;
  height: 100%;
  object-fit: cover;  
}
.preparation-box .txt-area{
  width: 60.6%;
  padding: 50px 6% 60px;  
}
.preparation-box h3{
  margin-bottom: 50px;
  text-align: center;
  line-height: 1.4;
  font-size:min(2.73vw,4.2rem);  
}
.preparation-box .sort-nav{
  justify-content: center;
  margin-bottom: 35px;
}
.preparation-box .sort-nav li{
  width: fit-content;
  margin: 0;
}
.preparation-box .sort-nav li:nth-child(n+2){
  margin-left: 15px;
}
.preparation-box .sort-nav li a{
  padding: 18px 25px;
  background: var(--light);
}
.preparation-box .sort-nav li.active a,
.preparation-box .sort-nav li a:hover{
  color: var(--light);
  border-color: transparent;  
}
.preparation-box .sort-nav .cat01 a::before,
.preparation-box .sort-nav .cat01 a:hover,
.preparation-box .sort-nav .cat01.active a{
  background: var(--cat01);
  border-color: var(--cat01);
}
.preparation-box .sort-nav .cat02 a::before,
.preparation-box .sort-nav .cat02 a:hover,
.preparation-box .sort-nav .cat02.active a{
  background: var(--cat02);
  border-color: var(--cat02);
}
.preparation-box .sort-nav .cat03 a::before,
.preparation-box .sort-nav .cat03 a:hover,
.preparation-box .sort-nav.cat03.active a{
  background: var(--cat03);
  border-color: var(--cat03);
}
.preparation-box .sort-nav .cat04 a::before,
.preparation-box .sort-nav .cat04 a:hover,
.preparation-box .sort-nav .cat04.active a{
  background: var(--cat04);
  border-color: var(--cat04);
}
.preparation-box .sort-nav .cat05 a::before,
.preparation-box .sort-nav .cat05 a:hover,
.preparation-box .sort-nav .cat05.active a{
  background: var(--green);
  border-color: var(--green);
}
.preparation-box .sort-nav .cat06 a::before,
.preparation-box .sort-nav .cat06 a:hover,
.preparation-box .sort-nav .cat06.active a{
  background: var(--cat07);
  border-color: var(--cat07);
}
.preparation-box .ttl-dot{
  align-items: center;
  margin-bottom: 25px;  
}
.preparation-box .ttl-dot span{
  font-size:min(1.43vw,2.2rem);
}
.preparation-box .ttl-dot small{
  font-size:min(0.91vw,1.4rem);
}
.preparation-box .ttl-dot.cat01::before{ color: var(--cat01);  }
.preparation-box .ttl-dot.cat02::before{ color: var(--cat02);  }
.preparation-box .ttl-dot.cat03::before{ color: var(--cat03);  }
.preparation-box .ttl-dot.cat04::before{ color: var(--cat04);  }
.preparation-box .ttl-dot.cat05::before{ color: var(--green);  }
.preparation-box .ttl-dot.cat06::before{ color: var(--cat07);  }
.preparation-box  .txt{
  font-size:min(1.04vw,1.6rem);
  line-height: 1.6;
  text-align: justify;
}
.preparation-box .tab-cont + .tab-cont{
	display: none;
}


















/*--------------------------------------------------------------------------
   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(2) a span:nth-child(1){
    padding: 0.8em 0; 
  }
  .page-nav li:nth-child(n+3){
    margin-top: 20px; 
  }
  

/* national-lisence
-----------------------------------------------------------------*/
  .national-lisence{
    padding: 110px 0;
  }
  .national-lisence h2{
    margin-bottom: 60px;
  }
  .feature-box{
   display: block;
  }
  .feature-box + .feature-box{
    margin-top: 60px;
  }
  .feature-box .txt-area{
    width: 100%;
    margin-bottom: 40px;
  }
  .feature-box .txt-area h3{
    margin-bottom: 25px;
    font-size: 2rem;
    line-height: 1.6;  
  }
  .feature-box .txt-area .txt{
    font-size: 1.4rem;
  }
  .feature-box .txt-area .txt + .txt{
    margin-top: 20px;  
  }
  .feature-box .pic{
    max-width: none;
    width: 100%;
  }
  .feature-box dl > div:nth-child(n+2){
    margin-top: 30px;  
  }
  .feature-box dl dt{
    margin-bottom: 15px;  
  }
  .feature-box dl dt .num{
    padding-right: 10px;
    margin-right: 10px;
    font-size: 2.6rem; 
  }
  .feature-box dl dt .ttl{
    font-size: 1.8rem;
  }
  .feature-box dl dd{
    font-size: 1.4rem;
  }


/* exam-preparation
-----------------------------------------------------------------*/
  .exam-preparation{
    padding: 110px 0;
  }
  .exam-preparation h2{
    margin-bottom: 60px;  
  }
  .preparation-box{
    display: block;
  }
  .preparation-box + .preparation-box{
    margin-top: 60px;  
  }
  .preparation-box .pic{
    max-width: none;
    width: 100%; 
  }
  .preparation-box .pic img{
    height: auto;
    object-fit: inherit;  
  }
  .preparation-box .txt-area{
    width: 100%;
    padding: 50px 20px;  
  }
  .preparation-box h3{
    margin-bottom: 30px;
    font-size: 2.7rem;  
  }
  .preparation-box .sort-nav{
    flex-wrap: wrap;
    margin-bottom: 25px;
  }
  .preparation-box .sort-nav li{
    margin: 0 5px 10px; 
  }
  .preparation-box .sort-nav li:nth-child(n+2){
    margin-left: 5px;  
  }
  .preparation-box .sort-nav li a{
    padding: 14px 16px;
    font-size: 1.2rem; 
  }
	.preparation-box .sort-nav li a:hover{
		color: var(--light);
    background: var(--dark);
    border-color: var(--dark);
	}
  .preparation-box .ttl-dot{
    flex-wrap: wrap;
    margin-bottom: 20px;  
  }
  .preparation-box .ttl-dot span{
    font-size: 1.8rem;
  }
  .preparation-box .ttl-dot small{
    width: 100%;
    margin-top: 5px;
    padding-left: 1em;
    font-size: 1rem;
  }
  .preparation-box  .txt{
    font-size: 1.4rem;
  }



}