@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  background-color: #996633;
  color: #35383a;
  font-family: 'Noto Serif JP', serif;
}
a {
  color: #35383a;
  text-decoration: none;
}
img {
  max-width: 100%;
}

/*
教室メニュー
*/
.menu {
  max-width: 1000px;
  height: 698px;
  margin: 100px auto;
  position: relative;
}

/*
各教室
*/
.content {
  max-width: 1000px;
  height: 698px;
  margin: 100px auto;
  position: relative;
}
/*
「position: absolute;」「left」左配置
*/
.text {
  max-width: 680px;
  background-color: #fff;
  padding: 84px 160px 84px 84px;
  position: absolute;
  left: 0;
}
.text p {
  line-height: 1.8;
  margin-bottom: 35px;
}
/*
「display: inline-block;」下線をテキスト幅に
*/
.text .title {
  border-bottom: solid 1px #35383a;
  display: inline-block;
  font-size: 1.875rem;
  font-weight: normal;
  margin-bottom: 30px;
}
.text .large {
  font-size: 1.875rem;
}
/*
「display: inline-block;」ボタンテキスト幅、paddingでサイズ
「transition」ホバーをふわっと
*/
.text .btn {
  display: inline-block;
  border: solid 1px #35383a;
  border-radius: 30px;
  padding: 5px 20px;
  transition: all 0.3s ease;
}
.text .btn:hover {
  background-color: #efeded;
}
.text .btn2 {
  display: inline-block;
  border: solid 1px #996633;
  border-radius: 10px;
  padding: 5px 30px;
  transition: all 0.3s ease;
}
.text .btn2 {
  float: right;
}
.text .btn2:hover {
  background-color: #efeded;
}

/*
写真要素上140px、右20pxに配置
*/
.img {
  max-width: 400px;
  position: absolute;
  top: 140px;
  right: 20px;
}
/*
「vertical-align: bottom;」画像下の隙間消す
*/
.img img {
  vertical-align: bottom;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  background-color: #CC9933;
  height: 60px;
  padding: 5px 0 0 50px;
}
#header .site-title {
  width: 300px;
  line-height: 1px;
}
#header .site-title a {
  display: block;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 1000px) {
  /*
  「position: static;」位置の固定解除
  「height: auto;」で高さの固定解除
  */
  .content {
    height: auto;
    position: static;
    margin: 0;
  }
  .text {
    max-width: 100%;
    padding: 60px 20px;
    position: static;
  }
  .img {
    max-width: 100%;
    position: static;
  }
}