@charset "UTF-8";

/* テキストの自動拡大を無効化
 -----------------------------------------*/
body {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* ページ外余白
 -----------------------------------------*/
html {
  background-color: #FFF8F7;
}

 /* 基本設定
  -----------------------------------------*/
* {
  margin: 0;
}

img {
  width: 100%;
  height: auto;
}

p {
  text-align: left;
  font-size: 0.85em;
  margin: 0.6em 0;
}

.sp {
  display: block;
}

/* ページ全体の設定
 -----------------------------------------*/
body {
  max-width: 1000px;
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  grid-template-rows:
    [head] auto
    [headline] 5px
    [hero] auto
    [subtitle] auto
    [contents] auto
    [footline] 30px
    [foot] 60px;
  grid-row-gap: 20px;
  row-gap: 20px;
  font-family: "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
  color: #534741;
  margin: auto;
  background-color: #FFFFFF;
}

/* パーツの配置
 -----------------------------------------*/
body > * {
  grid-column: 2 / -2;
}

/* ヘッダー
 -----------------------------------------*/
header {
  grid-row: head;
  justify-self: center;
  align-self: center;
  background: url("img/header01.jpg") no-repeat;
  background-size: 65%;
  background-position: right top;
  padding-top: 20px;
}

header h1 {
  font-size: 2em;
  color: #A71339;
  font-weight: normal;
  line-height: 120%;
}

header p {
  text-decoration: none;
  font-size: 1em;
  color: #895A5A;
  margin-top: 5px;
}

/* ナビゲーションメニュー
-----------------------------------------*/
nav {
  grid-row: head;
  justify-self: center;
  margin-top: 7px;
  padding-top: 10px;
  margin-bottom: -10px;
  border-top: solid 1.3px #EFD0D0;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 20px;
  column-gap: 20px;
  text-align: center;
}

nav a {
  color: #888888;
  text-decoration: none;
  font-size: 0.9em;
  font-weight: bold;
}

nav a:hover, nav a:focus {
  color: #ab002d;
}

/* ヘッダー線
-----------------------------------------*/
header-line {
  grid-row: headline;
  grid-column: 1 /-1;
  background: url("img/header02.png") repeat-x;
  background-size: 40% 40%;
  margin-bottom: -20px;
  backgroud: #FFFFFF;
}

/* ヒーローイメージ
-----------------------------------------*/
figure.hero {
  grid-column: 1 / -1;
  grid-row: hero;
  margin: -5px 0;
}

figure.hero img {
  object-fit: cover;
  vertical-align: bottom;
  position: relative; /* Edge 用の設定 */
}

/* サブタイトル
-----------------------------------------*/
div {
  grid-row: subtitle;
  justify-self: center;
  text-align: center;
  margin-top: 12px;
  margin-bottom: -13px;
}

h2 {
  color: #AB002D;
	font-size: 1.4em;
  font-weight: normal;
}

/* コンテンツ
-----------------------------------------*/
section {
  grid-row: contents;
  margin-bottom: -20px;
}

section article  {
  border: solid 1px #EFD0D0;
  box-shadow: 0 0 4px #F7E1E1;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 5px;
  text-align: center;
}

section article.left {
  border-right: 0px;
}

section article h3::before {
  content: url("img/midashi01.png");
  deisplay: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}

section article h3 {
  border-bottom: solid 2px #EFC4C4;
  position: relative;
  border-width: 1px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  font-size: 1.15em;
  font-weight: normal;
}

section article figure img {
  height: 130px;
  width: auto;
}

section article figure {
  margin-bottom: 7px;
}

section article h4 {
  font-weight: bold;
  text-align: center;
  font-size: 0.9em;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/* フッター線
-----------------------------------------*/
footer-line {
  grid-row: footline;
  grid-column: 1 /-1;
  background: url("img/footer02.png") repeat-x;
  background-position: bottom;
  margin-bottom: -20px;
}

/* フッター
-----------------------------------------*/
footer {
  grid-row: foot;
  grid-column: 1 / -1;
  width: 100%;
  height: 100%;
  background: url("img/footer01.png");
  justify-self: center;
  align-self: center;
}

footer div {
  text-align: center;
  font-size: 0.5em;
  color: #FFFFFF;
  margin: 15px;
}

/* テーブル
-----------------------------------------*/
table {
	margin: 0 auto 30px auto;
	border-spacing: 0;
	border-collapse: collapse;
}

td, th {
	padding: 10px 10px;
	border: 1px dotted gray;
	text-align: center;
  font-size: 0.8em;
}

th {
	background-color: #E8E2E2;
}

/* ホームページ
-----------------------------------------*/
.home section p {
  text-align: center;
}

/* レッスンページ
-----------------------------------------*/
.lessons h2 {
  margin-top: -20px;
}

.lessons img {
  width: 200px;
}



/* 講師紹介ページ
-----------------------------------------*/
.tutor h2 {
  margin-top: -20px;
}

.tutor section article  {
  border: none;
}

.tutor h3 {
  margin-top: -10px;
  padding: 5px 10px;
  border-left: 15px groove #E5ACAC;
	border-bottom: 2px solid #E5ACAC;
	color: #BC7171;
  text-align: left;
}

.tutor img {
  width: 100%;
  height: auto;
}

.tutor section article h3::before {
  content: "";
  margin-right: 0;
}

.tutor article:first-child {
  border-bottom: solid 1px #BBBBBB;
}

.tutor article:last-child {
  height: 180px;
  background: url("img/tutor02.png") no-repeat;
	background-size: 100% 100%;
}

.tutor article:last-child p {
  margin-top: 20px;
}

/* お問い合わせページ
-----------------------------------------*/
.contact h2 {
  margin-top: -20px;
}

.contact section {
	background: url("img/contact01.jpg") no-repeat;
  background-size: contain;
  background-position: bottom;
  padding-bottom: 200px;
	}

/* ===== PC 版の設定 ===== */
@media (min-width: 768px) {

  /* PC用 – 基本設定
   -----------------------------------------*/
  .sp {
    display: none;
  }

  p.pc-left-aligned {
    text-align: left;
  }

  /* PC用 – ページ全体の設定
   -----------------------------------------*/
  body {
    grid-template-columns: 0.2fr repeat(6, 1fr) 0.2fr;
  }

  /* PC用 – ヘッダー
   -----------------------------------------*/
  header {
    width: 95%;
    background-size: 65% 85%;
  }

  header h1 {
    font-size: 2.4em;
  }

  /* PC用 – ナビゲーションメニュー
  -----------------------------------------*/
  nav {
    margin-top: 10px;
    border-top: solid 2px #EFD0D0;
  }

  nav a {
    font-size: 1.2em;
    font-weight: normal;
  }

  /* PC用 – ヘッダー線
  -----------------------------------------*/
  header-line {
    background-size: 50% 50%;
  }

  /* PC用 – ヒーローイメージ
  -----------------------------------------*/
  figure.hero {
    grid-column: 2 / -2;
  }

  /* PC用 – サブタイトル
  -----------------------------------------*/
  h2 {
    font-size: 1.6em;
  }

  /* PC用 – コンテンツ
  -----------------------------------------*/
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  section article h3 {
    font-size: 1.25em;
  }

  /* PC用 – フッター
  -----------------------------------------*/
  footer {
    font-size: 0.6em;
  }

  footer div {
    margin: 20px;
  }

  /* テーブル
  -----------------------------------------*/
  table {
  	width: 300px;
  }

  /* PC用 – レッスンページ
  -----------------------------------------*/
  .lessons article:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 3fr 4fr;
  }

  .lessons article:first-child h3 {
    grid-column: 1 / span 2;
  }

  .lessons article:first-child div:last-child {
    margin: auto 0 auto 10px;
  }

  /* PC用 – 講師紹介ページ？
  -----------------------------------------*/
  .tutor article:first-child {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 7fr 5fr;
  }

  .tutor article:first-child h3 {
    grid-column: 1 / span 2;
  }

  .tutor article:first-child div {
    grid-column: 1;
    grid-row: 2;
    margin: auto;
  }

  .tutor article:first-child figure {
    grid-row: 2;
    grid-column: 2;
  }

  .tutor article:first-child {
    border-bottom: none;
  }

  .tutor article:last-child {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 8fr 3fr;
    height: 300px;
    background: url("img/tutor02.png") no-repeat;
    background-size: 100% 100%;
  }

  /* PC用 – お問い合わせページ？
  -----------------------------------------*/
  .contact section {
    background: url("img/contact01.jpg") no-repeat;
    background-size: 50% 25%;
    background-position: bottom;
    }

    .contact article {
      grid-column: 1 / span 2;
      width: 70%;
      justify-self: center;
    }

    .contact h4 {
      text-align: left;
    }

}
/* ===== PC 版の設定ここまで ===== */