@charset "UTF-8";

/* 基本色 */
:root {
	--main-color: #ffc5c3;
	--accent-color: #FFC6C6;
	--dark-main-color: #f5deb3;
        --gray-color: #808080;
       --large-width: 900px;
　　　--middle-width: 800px;
}





/* 基本設定：　フォントサイズ */

@media (max-width: 599px){
  :root{
    font-size: 14px;
  }
}

@media (min-width: 600px)and (max-width: 799px){
  :root{
    font-size: 16px;
  }
}

@media (min-width: 800px){
  :root{
    font-size: 18px;
  }
}


body{
	font-size: 16px;
}


/* ページ全体 */

body{
  margin: 0;
  font-family: 'メイリオ',
   'Hiragino kaku Gothic Pro',
  sans-serif;
}


.red {
 font-color: red;
}


/* コンテンツA */

.conA{
 display: flex;
 align-items: center;
 justify-content: center;
 height: 30vh;
 min-height: 350px;
  background-image: url(../img/akiakanepc-mobi.jpg);
 background-position: center;
 background-size: cover;
  text-align: center;
 }

.conA h1{
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 6vw;
}


.conA p{
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
}


/* コンテンツAの下のPCアイコン */
.conAa{
 display: flex;
 align-items: center;
 justify-content: center;
 padding-bottom: 20px;
}

.conAa img{
  margin-top:10px;
  margin-bottom: 10px;
}


/* コンテンツB */

.conB .container{
  padding-left: 20px;
  padding-right: 20px;  
  padding-bottom: 60px;
}


.conB .text{
  padding-left: 20px;
  padding-right: 20px;  
  padding-bottom: 5px;
  text-align: center;
}


.conB h2{
  margin-top:0;
  margin-bottom: 3px;
  font-size: 20px;
 }

.conB p{
  margin-top:0;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.8;
 }

.conB a{
  display: inline-block;
  margin-top: 20px;
  padding: 5px 30px;
  border: solid 3px currentColor;
  border-radius: 6px;
  background-color: #FFC6C6;
  background-color: var(--accent-color);
  color: #fff;
  color: var(--text-bright-color);
  font-size: 16px;
  text-decoration: none;
}
 

.conB a:hover{
  text-decoration: underline;
}



@media (min-width: 768px) {
  .conB .container{
     display: flex;
  max-width: 900px;
  max-width: var(--large-width);
  margin-left: auto;
  margin-right: auto;
}

  .conB .text {
     flex: 1;
}  

  .conA h1{
    font-size: 50px;
}

  .conA p{
    font-size: 24px;
}    

}



/* コンテンツC */

.conC{
 background-color: #ffc5c3;
 background-color: var(--main-color);
ccolor: #fff;
color:var(--text-bright-color);

}


.conC .text{
  padding: 20px;
}


.conC h2{
  margin-top:0;
  margin-bottom: 10px;
  font-size: 20px;
 }

.conC p{
  margin-top:0;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.8;
 }

.conC a{
  color:#5D9AB2;
  color: var(--main-color);
  text-decoration: none;
}  

.conC a:hover{
  text-decoration: underline;
}


.conC{
  min-height: 150px;
  background-position: center;
  background-size: cover;
}



@media (min-width: 768px) {
  .conC .container{
     display: flex;
     max-width: 500px;
     max-width: var(--large-width);
     margin-left: auto;
     margin-right: auto;    
 }

}



/* コンテンツD */

.conD .container{
  padding-top: 2px;
}


.conD .text{
  padding: 20px;
}


.conD h2{
  margin-top:0;
  margin-bottom: 10px;
  font-size: 20px;
 }

.conD p{
  margin-top:0;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.8;
 }

.conD a{
  color:#5D9AB2;
  color: var(--main-color);
  text-decoration: none;
}  

.conD a:hover{
  text-decoration: underline;
}





@media (min-width: 768px) {
  .conD .container{
     display: flex;
     flex-direction: row-reverse;
     max-width: 600px;
     max-width: var(--large-width);
     margin-left: auto;
     margin-right: auto;  
    padding-top: 40px;
    padding-bottom: 40px;  
}



  .conD .text{
     flex: 1;
     padding: 50px
;
}

}


/* フッター */

footer{
  color: #000f;
  color: var(--text-bright-color);
  background-color: #ffc5c3;
  background-color: var(--main-color); 

 
}  

footer .container{
  padding: 20px 20px;
}

.footA{
  margin-bottom: 60px;
  text-align: center;
}



/* フッター　footA */
.footA h2{
  padding-top: 0;
  margin-bottom: 10px;
  font-size: 20px;

}

.footA p{
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}


.footA a{
  color: inherit;
  text-decoration: none;
}

 /* フッター　footB */


.footB div{
 margin-bottom: 20px;
}


.footB h3{
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: solid 1PX currentColor;
  font-size: 14px;
}

.footB ul{
  margin-bottom: 20px;
  padding: 0;
  list-style: none;
}

.footB a{
  display: block;
  padding: 5px;
  color: inherit;
  font-size: 12px;
  text-decoration: none;
}  

.footB a:hover{
  background-color: rgba(0,0,0,0.3);
}


@media (min-width: 768px) {
  .footB{
     display: flex;
     max-width: 800px;
     max-width: var(--large-width);
  margin-left: auto;
  margin-right: auto;    
   }

  .footB div {
     flex: 1;
  }

  .footB div:not(:first-child){
    margin-left: 40px;
  }

}

 /* フッター　copy_right */
  .copy_right{
     font-size: 12px;
     text-align: center;
}


 /* ヘッダー　 */
header{
  top: 0;
  left: 0;
  z-line: 100;
  background-color: rgba(255,255,255,0.9);
}



 /* ヘッダーB ナビゲーションメニュー */

.nohero .headB{
  border-bottom: solid  1px  currentColor;
  margin-top: 10px;
  margin-bottom: 15px;
}


.headB a{
  margin-left: 10px;
  padding: 5px;
  color: inherit;
  font-size: 12px;
  text-decoration: none;
}  

.headB a:hover{
  background-color: rgba(0,0,0,0.3);
}


@media (min-width: 768px) {
  header .headB{
   text-align: right;
   max-width: 800px;
   max-width: var(--large-width);
   margin-left: auto;
   margin-right: auto;   
  }

}


 /* 講習内容のページ */
.post .container{
  max-width: 800px;
  max-width: var(--middle-width);  
   margin-left: auto;
   margin-right: auto; 
  padding: 30px 10px;
}





@media (min-width: 768px) {
 .koushu{
    display: flex;
   text-align: left;
   max-width: 800px;
   max-width: var(--large-width);
   margin-left: auto;
   margin-right: auto;  
  padding-left: 40px; 
  }

 .koushu .naiyo {
   flex: 1;
 }

  .naiyo_img{
    flex: 0 30%;
  text-align: center;
  }

  .naiyo {
    flex: 0 70%;
  }

}


 /* 講習料金ページ　 */

.post_r .container{
  max-width: 800px;
  max-width: var(--middle-width);  
   margin-left: auto;
   margin-right: auto; 
  padding: 30px 10px;
}

.post_r h2{
 font-size: 18px;
}



@media (min-width: 768px) {
 .koushu{
    display: flex;
   text-align: left;
   max-width: 800px;
   max-width: var(--large-width);
   margin-left: auto;
   margin-right: auto;  
  padding-left: 40px; 
  padding-bottom: 10px; 
  }

 .koushu .naiyo {
   flex: 1;
 }

  .naiyo_koumoku{
    flex: 0 35%;
  text-align: left;
  }

  .naiyo {
    flex: 0 65%;
  }

}



 /* あきあかねパソコン教室について　 */

.about{
  background-color: #f5deb3 ;
  background-color: var(--dark-main-color);
  color: #000;
  color:  var(--text-bright-color); 
}

.about table{
 border-collapse: collapse;
 border-top: solid 1px #808080;
 border-top: solid 1px var(--gray-color);
 font-size: 0.875rem;
 margin-bottom: 2rem;
}

.about th,
.about td{
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
  padding-left: 1rem;
  border-bottom: solid 1px #808080;
  border-bottom: solid 1px var(--gray-color);
} 

.about th{
  padding-right: 1rem;
  text-align: left;
  word-break: keep-all;
}



.post_a .container{
  max-width: 800px;
  max-width: var(--middle-width);  
   margin-left: auto;
   margin-right: auto; 
  padding: 30px 10px;
}

.post_a h1{
 font-size: 24px;
}


.post_a h2{
 font-size: 20px;
}


@media (min-width: 768px) {
 .about{
    display: flex;
   text-align: left;
   max-width: 800px;
   max-width: var(--large-width);
   margin-left: auto;
   margin-right: auto;  
  padding-left: 40px; 
  padding-bottom: 10px; 
  }

 .about{
   flex: 1;
vertical-align:top;  
 }

  .about_koumoku{
    flex: 0 30%;
  text-align: left;

}

  .about .naiyo {
    flex: 0 70%;
  }

}


 /* お問い合わせのページ　 */

.post_t .container{
  max-width: 800px;
  max-width: var(--middle-width);  
   margin-left: auto;
   margin-right: auto; 
  padding: 30px 10px;
}

.post_t h2{
 font-size: 18px;
}

.toiawase{
  background-color: #f5deb3 ;
  background-color: var(--dark-main-color);
  color: #000;
  color:  var(--text-bright-color); 
}


.toiawase table{
 border-collapse: collapse;
 font-size: 0.875rem;

}

.toiawase th,
.toiawase td{
  text-align: left;   
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
} 

.toiawase th{
  padding-right: 1rem;
  text-align: left;
  word-break: keep-all;
}


.red{
    color: red ;
}



.kakunin{
  padding-top: 20px; 
}



@media (min-width: 768px) {
 .toiawase{
    display: flex;
   text-align: left;
   max-width: 800px;
   max-width: var(--large-width);
   margin-left: auto;
   margin-right: auto;  
  padding-left: 30px; 
  padding-bottom: 10px; 
  }


.koumoku{
    flex: 0 25%;
  text-align: left;
  }

.naiyo{
    flex: 0 75%;
  text-align: left;
  padding-top: 10px; 
  }

.big{
 font-size: 1.4rem;
}

}




 /* 確認のページ　 */

.post_t .container{
  max-width: 800px;
  max-width: var(--middle-width);  
   margin-left: auto;
   margin-right: auto; 
  padding: 30px 10px;
}

.kakunin h2{
 font-size: 18px;
  padding-bottom: 20px; 
}

.kakunin{
  background-color: #f5deb3 ;
  background-color: var(--dark-main-color);
  color: #000;
  color:  var(--text-bright-color); 
}


.kakunin table{
 border-collapse: collapse;
 font-size: 0.875rem;
  padding-top: 20px; 
}

.kakunin th,
.kakunin td{
  text-align: left;   
  padding-left: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
} 

.kakunin th{
  padding-right: 2rem;
  text-align: left;
  word-break: keep-all;
}


.red{
    color: red ;
}


.kakunin{
  padding-top: 20px; 
}



@media (min-width: 768px) {
.kakunin{
   text-align: left;
   max-width: 800px;
   max-width: var(--large-width);
   margin-left: auto;
   margin-right: auto;  
  padding-left: 30px; 
  padding-bottom: 30px; 
  }


.kakunin table{
    margin-left: 100px; 
}

}