@charset "UTF-8";

/*-------------------------------------------
共通設定
-------------------------------------------*/

a.atten{
    
    color:var(--gold);
    text-decoration: underline;
}

/*-------------------------------------------
guide
-------------------------------------------*/
#guide {
    width:80%;
    margin:5rem auto;
}



/*-------------------------------------------
course
-------------------------------------------*/
#course {
    width:80%;
    margin:1rem auto;
}

#course .flex{
    display:grid;
    grid-template-columns: repeat(1,1fr);
    gap:1rem;
}

#course .flex .box{
    display:flex;
    flex-direction: column;
    border-bottom:1px solid white;
}

#course .flex .box .inner1{
    width:100%;
    display:flex;
}

#course .flex .img{
   width:50%;
   height:15rem;
   padding:1rem;
}

#course .flex .img img{
   width:100%;
   height:100%;
   object-fit:cover;
}

#course .flex .text1{
   width:50%;
   position:relative;
}

#course .flex .text1 h3{
  display:inline-block;
  border-bottom:3px double var(--light-gold);
}

#course .flex .box .inner2{
    width:100%;
}

#course .flex .box .inner2 .description{
    width:100%;
    color:var(--black);
    padding:1rem 5rem;
}

#course .flex .box .inner2 .trial{
    background-color:var(--trial);
}

#course .flex .box .inner2 .silver{
    background-color:var(--silver);
}

#course .flex .box .inner2 .gold{
    background-color:var(--light-gold);
}

/*-------------------------------------------
flow
-------------------------------------------*/

#flow{
  margin:5rem auto;
}

#flow dl.list{
    display:flex;
    flex-wrap: wrap;
    margin-bottom:5rem;
}

#flow  dl.list dt{
  width:50%;
  padding:1rem;
  border-bottom:1px solid var(--light-gold);
  display:grid;
  place-items: center;
}

#flow  dl.list dd{
  width:50%;
  padding:1rem;
  display:grid;
  place-items: center;
  border-bottom:1px solid var(--light-gold);
}

#flow  dl.list dt:first-child{
    border-top:1px solid var(--light-gold);
}

#flow  dl.list dd:nth-child(2){
    border-top:1px solid var(--light-gold);    
}

#flow dl.list dt p{
    display:flex;
    flex-direction: column;
    align-items: center;
    font-size:var(--font-lg);
}

#flow dl.list span{
    width:3rem;
    height:3rem;
    background-color: var(--light-gold);
    border-radius: 50%;
    color:black;
    font-size:var(--font-xl);
    display:grid;
    place-items: center;
}


/*-------------------------------------------
payment
-------------------------------------------*/
#payment{
    margin-top:5rem;
}



#payment .credit{
 background-color: var(--light-gold);
 margin-bottom:1rem;
 color:var(--black);
 padding:1rem;
font-size: var(--font-md);
}



/***************************/
/* お問い合わせフォーム部(
クラスはMW WP FORMプラグイン内 */
/***************************/

#formarea{
 margin:1rem;
 background-color: var(--dark);
 border-radius: 10px;
 padding:2rem;
}

#formarea input,
#formarea textarea{
 width:80%;
 background-color:var(--light-gold);
 color:black;
 font-size:var(--font-md);
 padding:0.3rem 0.5rem;
 margin:1rem 2rem;
 border-radius: 5px;
}

#formarea input[type="radio"]{
 width:1rem;
}

#formarea input[type="number"]{
 width:20%;
}

#formarea .zip{
 width:20%;
}

#formarea select{
 width:100px;
 background-color: var(--light-gold);
 padding:0.2rem;
 border-radius: 5px;
 margin:1rem 2rem;

}

#formarea .tel{
  width:20%;
  margin:0.5rem;
}

/* 送信ボタン */
#formarea .btnarea{
    width:100%;
    text-align:center;
}

#formarea input[type="submit"]{
    background-color: var(--gold);
    width:200px;
    padding:1rem 2rem;
    margin-top:3rem;
}



/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 767px) {

/*-------------------------------------------
共通
-------------------------------------------*/
p{
 font-size:var(--font-sm);    
}


/*-------------------------------------------
course(sm)
-------------------------------------------*/
#course {
    width:100%;
}



#course .flex .box .inner2 .description {
    padding:1rem 1rem;
}

/*-------------------------------------------
flow(sm)
-------------------------------------------*/

#flow dl.list{
  flex-direction: column;
}

#flow  dl.list dt{
  width:100%;
  border-bottom:none;
}

#flow  dl.list dd{
  width:100%;
}

#flow  dl.list dd:nth-child(2){
  border-top:none;    
}

#flow dl.list dt p{
  font-size:var(--font-md);
}

#flow dl.list span{
    width:2rem;
    height:2rem;
    font-size:var(--font-lg);
}


/*-------------------------------------------
payment
-------------------------------------------*/
#payment .paypal{
 margin-bottom:0.5rem;
 font-size: var(--font-sm);
}


#payment .credit{
 margin-bottom:0.5rem;
font-size: var(--font-sm);
}

/***************************/
/* お問い合わせフォーム部(
クラスはMW WP FORMプラグイン内 (sm)*/
/***************************/

#formarea{
 margin:1rem;
 padding:1rem;
}

#formarea input{
 width:100%;
 font-size:var(--font-md);
}







}