/*--*-- コンテンツページの左側の基本スタイル --*--*/
.cont div.oowaku {
  width: 95%;
  height: auto;
  margin: 20px 10px 25px 10px;
  padding: 0;
}

.cont h1 {
  background-color: #fdf5f5;
  background-image: url("grade11.gif");
  background-repeat: repeat-y;
  /* background-color: #fde9e9;*/
  color: #000000;
  font-size: 3.8rem;
  font-weight: normal;
  letter-spacing: 0.12em;
  font-family: sans-serif;
  margin-top: 0;
  margin-bottom: 48px;
  white-space: nowrap;
  padding-top: 10px;
  padding-left: 8px;
  padding-bottom: 5px;
  padding-right: 1em;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 12px;
  border-bottom: 1px solid #ff6062;
  border-left: 5px solid #ff6062;
}

.cont p.normal {
  font-size: 100%;
  margin-left: 12px;
  margin-right: 8px;
  padding: 0;
  font-family: "メイリオ", sans-serif;
  text-indent: 0.6em;
}

.cont p.noind {
  font-size: 100%;
  line-height: 1.6;
  margin-left: 16px;
  margin-right: 8px;
  padding: 0;
  font-family: "メイリオ", sans-serif;
}

.cont p.yohaku {
  margin-top: 5ex;
  padding: 0;
}

/*--*-- 以下、てがみ(contact)ページ用のスタイルシート --*--*/
.contact div.addresslist {
  width: 95%;
  max-width: 30rem;
  background-color: #ffffb2;
  margin: 20px 10px; /* 上、左右、下の順に指定している */
  padding: 6px;

  box-shadow: 0 0 1em gold;
  border-radius: 20px / 15px;
}


/*--*-- 以下、あんない(intro)ページ用のスタイルシート --*--*/
.intro div.q_and_a {
  margin: 4px 6px 20px;
  float: left;
}

.intro div.ques {
  height: auto;
  background-color: #ffb366;
  margin: 0;
  padding: 5px 0 2px 16px;
  display: block;

  border-bottom: 2px dotted #000000;
  /*		border-top-left-radius: 10px;
  border-top-right-radius: 10px;*/
}

.intro div.ans {
  height: auto;
  background-color: #ffddcc;
  margin: 0;
  padding: 8px 8px 10px 18px;
  display: block;

  border-bottom: 2px solid #4c453d;
  /*		border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;*/
}

.intro h2.ques {
  font-size: 125%;
  color: #000000;
  font-weight: bold;
  letter-spacing: 0.2em;
  font-family: "メイリオ", sans-serif;
  margin: 0;
  padding: 0;
}

.intro p.ans {
  font-size: 95%;
  margin: 4px 5px;
  padding: 0;
  font-family: "メイリオ", sans-serif;
  line-height: 160%;
}


/*--*-- 以下、曲紹介ページ用のスタイルシート --*--*/
.muse div.kyoku {
  height: auto;
  width: 480px;
  background-color: #ffefef;
  margin: 10px 14px 12px 20px;
  padding: 5px;
  display: block;
  float: left;

  border: 3px solid #ff6e7c;
  border-radius: 10px;
}

.muse audio {
  width: 100%;
  max-width: 450px;
}

.muse p.kyoku {
  font-size: 90%;
  margin: 16px 12px; /*上下16px,左右12pxの意味になる*/
  padding: 0;
  font-family: "メイリオ", sans-serif;
  text-indent: 0.5em;
}

.muse hr.kyokukan {
  width: 75%;
  height: 1px;
  text-align: left;
  margin-left: 0;
  border: none;
  border-top: 2px #a9a9a9 dotted;
}


/*--*-- 以下、リンクページ用のスタイルシート --*--*/
.link div.bukuma {
  width: 50%;
  height: auto;
  background-color: #b2d8ff;
  margin: 20px 5px 0;
  /*		padding: 2px 5px 2px 3px;*/

  text-align: center;
}

.link div.bukuma a {
  display: block;
  padding: 2px 5px 2px 3px;
}
.link div.bukuma a:link {
  color: blue;
  background-color: #b2d8ff;
}
.link div.bukuma a:visited {
  color: #5323b2;
  background-color: #e8d1ff;
}
.link div.bukuma a:hover {
  color: blue;
  background-color: #7fbfff;
}
.link div.bukuma a:active {
  color: #eeeeee;
  background-color: #89b7e5;
}

.link div.syoukai {
  width: 100%;
  height: auto;
  background-color: #e5f2ff;
  margin: 0 5px 15px 5px;
  padding: 5px 15px;
}

.link h2.bukuma {
  font-size: 110%;
  color: #000000;
  letter-spacing: 0.1em;
  font-family: sans-serif;
  display: inline;
}

.link p.syoukai {
  font-size: 95%;
  margin: 4px 5px;
  padding: 0;
  font-family: "メイリオ", sans-serif;
}

.link img.bukuma {
  width: auto;
  height: auto;
  max-height: 40px;
  border: 0;
}

/* スマホサイズ */
@media (max-width: 768px) {
  .cont h1 {
    font-size: 2.5rem;
    white-space: normal;
    margin-bottom: 36px;
  }

  /* コンタクトページのアドレスリスト領域をスマホ用に最適化 */
  .contact div.addresslist {
    margin: 20px auto;
    padding: 10px;
    word-break: break-all;
  }

  /* リンク集用のスマホ最適化スタイル */
  .link div.bukuma {
    width: 95%;
    margin: 20px auto 0;
  }

  .link div.syoukai {
    width: 95%;
    margin: 0 auto 15px;
    padding: 5px 10px;
  }

  .link h2.bukuma {
    font-size: 105%;
  }

  .link p.syoukai {
    font-size: 92%;
    margin: 4px 3px;
    line-height: 1.6;
  }

  .link img.bukuma {
    max-width: 100%;
    height: auto;
  }

  /* 音楽ページのスマホ対応 */
  .muse div.kyoku {
    width: 90%;
    margin: 10px auto;
    float: none;
  }
}

/* 小さな画面サイズ (iPhone SE等) 用のスタイル */
@media (max-width: 375px) {
  .cont h1 {
    font-size: 2.3rem;
    white-space: normal;
    padding-right: 8px;
    margin-bottom: 24px;
  }
}