@charset "UTF-8";

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



/*-------------------------------------------
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:25rem;
   padding:1rem;
}

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

#course .flex .text{
   width:50%;
   position:relative;
   padding:1rem 0rem;
   font-size:var(--font-md);
}

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

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



/*-------------------------------------------
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(--black);
  display:grid;
  place-items: center;
  background:var(--back2);
}

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

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

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

#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(--black);
    border-radius: 50%;
    color:white;
    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(--back2);
 border-radius: 10px;
 padding:2rem;

}

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

#formarea input[type="radio"]{
 width:1rem;
  transform: scale(1.5);
}

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

#formarea .zip{
 width:20%;
}

#formarea select{
 width:100px;
 background-color: var(--white);
 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(--accent);
    width:200px;
    padding:1rem 2rem;
    margin-top:3rem;
}

#formarea a{
    color:red;
}

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

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


/*-------------------------------------------
course(sm)
-------------------------------------------*/
#course {
    width:100%;
    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{
    flex-direction: column;
}

#course .flex .img{
   width:100%;
   padding:0rem;
}


#course .flex .text{
   width:100%;
   padding:1rem;
   font-size:var(--font-sm);
}

#course .flex .box .inner2 .description{
    width:100%;
    padding: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{
 width:100%;
 margin:0rem auto;;
 padding:1cm;

}

#formarea input,
#formarea textarea{
 width:80%;
 background-color:var(--white);
}



}