body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN";
}

header{
  height: 65px;
  width: 100%;
  background-color: #f7f7f7;
}

.header-left , .header-right{
  float:left;
  width: 50%;
}

.header-left a{
  font-size:30px;
  background-color: #f7f7f7;
  color: lightblue;
  line-height: 65px;
  width:124px;
  text-decoration:none;

}
.header-right a{
  font-size:30px;
  background-color: #f7f7f7;
  color: lightblue;
  line-height: 65px;
  width:124px;
  text-decoration:none;

}

.header-left a:hover{
  color: rgba(173, 216, 230, 0.5);
  background-color: rgba(255, 255, 255, 0.5);
}

.header-right a:hover{
  color: rgba(173, 216, 230, 0.5);
  background-color: rgba(255, 255, 255, 0.5);
}


.top-wrapper {
  padding: 70px 0 50px 0;
  background-color: lightblue;
  background-size: cover;
  color: white;
}
.btn-wrapper1{
  float: left;
}

.logo{
  width:50%;
  margin-bottom:0;
  padding-bottom:0;
}
.eigo{
  font-style: italic;
  font-family: Courier New;
  padding-bottom:0;
  margin-bottom:0;
}

.top-wrapper h1 {
  opacity: 0.7;
  font-size: 45px;
  letter-spacing: 5px;
}
.otoiawase{
  text-align: left;
  width:50%;
  padding-bottom:10px;
}

.otoiawase p{
  font-weight: bolder;
}

.btn-wrapper1 a{
  padding:8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  background-color: #55acee;
  border-radius: 4px;
}

.denwa{
  margin: 10px;
}
.denwa:hover{
  opacity: 1;
}
.mail:hover{
  opacity: 1;
}

.btn {
  padding:8px 24px;
  color: white;
  display: inline-block;
  opacity:0.8;
  background-color: #55acee;
  border-radius: 4px;
}
.btn a{
  display:block;
}
.btn-wrapper{
  text-align: center;

}

.btn-wrapper a:hover{
  background-color: rgba(85, 172, 238, 0.5);
}

.container {
  width: 1170px;
  padding: 0 15px;
  margin: 0 auto;

}

.lesson-wrapper {
  background-color: #f7f7f7;
  padding: 30px;
  height:1900px;
}

.main-menu , .side-menu{
  float: left;
}
.main-menu{
  width:70%;
  margin-right: 0;
}

.lesson{
  position:relative;
  margin: 50px 0 ;
}

.child{
  width: 50%;
}

img{
  position:absolute;
  width: 400px;
  height:300px;
}

.genkan , .chiryou , .chiryoushitsu{
  top: 0px;
  left: 410px;
}

.daimei{
  border-left: solid 10px rgba(173, 216, 230, 0.8);
}

.daimei:hover{
  background-color: rgba(173, 216, 230, 0.3);
}

.daimei a{
  text-decoration: none;
  color:darkblue;
  display: block;
}

.daimei a:hover{
  color: lightblue;
}

.side-menu{
  width:25%;
}

.news , .info{
  border: solid 3px #8fbc8f;
  border-radius: 10px;
}

.info{
  margin: 10px 0;
}
.dai, .info-dai{
  text-align: center;
}

.info-contents{
  text-align: center;
}

.info-contents span{
  font-weight: bolder;
}



.news-contents span{
  font-weight: bolder;
}

.news-contents a , .info-contents a{
  text-decoration: none;
  color: #8fbc8f;
  font-weight: bolder;
}

.news-contents a:hover , .info-contents a:hover{
  color: rgba(143, 188, 143, 0.5);
}



.message-wrapper{
  border-bottom: 1px solid #eee;
}

footer{
  padding: 30px 0;
}
footer h4, footer p{
  font-weight:normal;
  padding:0;
  margin:0;
  color:#b3aeb5
}
/* =====================================
   スマホ用の設定（画面幅767px以下）
   ===================================== */
@media (max-width: 767px) {
  /* 1. 全体の横幅固定（1170px）を解除 */
  .container {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* 2. ヘッダーの文字サイズを調整 */
  .header-left a, .header-right a {
    font-size: 16px; /* 30pxは大きすぎるので調整 */
    line-height: 1.5;
    display: block;
    width: 100%;
    float: none;
    text-align: center;
  }
  header {
    height: auto; /* 高さを固定しない */
    padding: 10px 0;
  }

  /* 3. トップ部分（ロゴと問い合わせ）を縦並びに */
  .logo, .otoiawase {
    width: 100%;
    float: none;
    text-align: center;
  }
  .top-wrapper h1 {
    font-size: 28px;
  }

  /* 4. メインコンテンツとサイドバーを縦並びに */
  .main-menu, .side-menu {
    width: 100%;
    float: none;
  }
  .lesson-wrapper {
    height: auto; /* 1900pxの固定を解除 */
    padding: 20px 10px;
  }

  /* 5. 画像の絶対配置（position: absolute）を解除 */
  .lesson {
    display: flex;
    flex-direction: column; /* 文字 → 画像 の順で縦に並べる */
    margin-bottom: 40px;
  }
  .child {
    width: 100%;
  }
  img {
    position: static; /* 浮いている状態を解除 */
    width: 100%;      /* 画面幅いっぱいに広げる */
    height: auto;     /* 縦横比を維持 */
    margin-top: 15px;
  }
  /* 画像の位置固定（left: 410pxなど）を無効化 */
  .genkan, .chiryou, .chiryoushitsu {
    position: static;
  }

  /* 6. ナビゲーションボタンの調整 */
  .btn {
    width: 45%; /* 2つずつ並ぶくらいのサイズ */
    margin: 5px 1%;
    font-size: 14px;
    padding: 10px 0;
  }
}