@charset "utf-8";
/* スマホファースト */
/*___________ 基本設定 ___________ */
body {
  margin: 0;
  font-size: 1rem;
  position: relative;
}
ol, ul {
  padding: 0;
  list-style-type: none;
}
p, li {
  font-size: 4.5vw;
}
img {
  width: auto;
  height: auto;
}
picture {
  display: block;
}
.pc_view, .is-pc {
  display: none;
}
span.pc_view, span.is-pc {
  display: none;
}
.smp_view, .is-sp {
  display: block;
}
span.smp_view, span.is-sp {
  display: inline;
}
.pc_block {
  display: inline;
}
.smp_block {
  display: block;
}
.txt_block {
  display: block;
}
/* ____ リンクテキスト ____ */
a {
  color: #0066CC;
  text-decoration: underline;
}
a:visited {
  color: #0066CC;
  text-decoration: underline;
}
a:hover, a:active, /* for IE (Keyboard) */ a:focus { /* for Netscape (Keyboard) */
  color: #CC0000;
  text-decoration: none;
  transition: 0.5s;
  opacity: 0.8;
}
a:hover img {
  opacity: 0.8;
}
/* ____ フロート設定 ____ */
.flo-l {
  float: left;
  margin-right: 3vw;
}
.flo-r {
  float: right;
  margin-left: 3vw;
}
/* ____ フロートボックス解除用 ____ */
.clear {
  clear: both;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/* ____ テキストカラー ____ */
.red {
  color: #CC0000;
}
.blue {
  color: #0066CC;
}
.grn {
  color: #008000;
}
.ora {
  color: #d14400;
}
.gry {
  color: #999999;
}
.wht {
  color: #FFFFFF;
}
/* ____ テキスト設定 ____ */
.txt_sm {
  font-size: 80%;
}
em {
  font-style: normal;
  font-weight: bold;
  font-size: 1.4em;
}
.b {
  font-weight: bold;
}
.s {
  text-decoration: line-through;
}
.u {
  text-decoration: underline;
}
/* 文字揃え */
.txt_r {
  text-align: right;
}
.txt_l {
  text-align: left;
}
.txt_c, .center {
  text-align: center;
}
/* ____ 余白設定 ____ */
.ma20 {
  margin: 20px 0;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mt40 {
  margin-top: 40px;
}
.mt80 {
  margin-top: 80px;
}
.ml20 {
  margin-left: 20px;
}
.mb0 {
  margin-bottom: 0;
}
.mb1em {
  margin-bottom: 1em;
}
.mb2em {
  margin-bottom: 2em;
}
.mtb2em {
  margin: 2em 0;
}
.pd5 {
  padding-left: 2vw;
}
/* ____ ボックス設定 ____ */
/* フレキシブルボックス */
.flexbox {
  display: block;
}
/* 大枠ボックス */
main.wrapper {
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  background-color: #FFFFFF;
  z-index: 0;
}
section {
  padding: 4vw 0;
  overflow: hidden;
}
.wrapper {
  width: 96vw;
  margin: 0 auto;
  position: relative;
}
.inner {
  padding: 0 0.5em;
}
.inner.wrapper {
  width: 100%;
  padding: 0;
}
.notice_box {
  width: 92vw;
  margin: 0 auto;
}
/* -------------------------------------- ヘッダー header  */
header {
  padding: 0.5em;
  background-color: #411f00;
}
header h1 {
  margin-bottom: 0;
  color: #FFFFFF;
  font-size: 4vw;
}
/* -------------------------------------- ナビ nav.menu */
nav.menu {
  padding: 1em 0.5em;
}
nav.menu ul {
  display: flex;
  flex-wrap: wrap;
}
nav.menu li {
  width: 50%;
}
nav.menu li a {
  display: block;
  margin: 0.5em;
  padding: 1em;
  color: #411f00;
  font-size: 4vw;
  text-align: center;
  text-decoration: none;
  background-color: rgba(255,236,137,1.00);
  border-radius: 0.5em;
}
nav.menu li a:hover {
  color: #FFFFFF;
  background-color: rgba(229,127,48,1.00);
}
/* -------------------------------------- 教材枠 section */
h2 {
  padding: 0.5em;
  font-size: 5vw;
  color: #FFFFFF;
}
#piano h2 {
  background-color: #AE2500;
}
#violin h2 {
  background-color: #A96F0B;
}
#guitar h2, #solo_g h2 {
  background-color: #AA330B;
}
#ukulele h2 {
  background-color: #00a896;
}
#sax h2 {
  background-color: #EB4008;
}
#oboe h2 {
  background-color: #5C397B;
}
#camera h2 {
  background-color: #353C73;
}
#kaiga h2 {
  background-color: #243B24;
}
h3 {
  padding: 0.5em;
  font-size: 4vw;
  border-left: 10px solid #411f00;
  background-color: #FFE0CE;
}
.itembox {
  padding: 0.2em 0;
}
.itembox .textbox {
  padding: 0 2vw;
}
.itembox .flexitem {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.itembox .flexitem>p img {
  width: 50vw;
}
.itembox .flexitem .btnbox{
  text-align: center;
}
.itembox ul {
  padding-left: 1em;
  list-style-type: disc;
}
/* -------------------------------------- フッター footer */
footer {
  color: #FFFFFF;
  background-color: #411f00;
}
footer .wrapper {
  padding: 1em 0;
}
footer a, footer a:visited {
  color: #FFFFFF;
  text-decoration: none;
}
footer a:hover {
  color: #3B0000;
}
footer .flexbox {
  justify-content: center;
  margin-bottom: 2em;
}
footer nav ul li {
  padding: 0.5em 0;
  font-size: 1em;
  text-align: center;
  border-bottom: 1px dotted #AFA483;
  position: relative;
}
footer nav ul li a {
  display: block;
  padding: 0.5em 0;
}
footer nav ul li::after {
  content: "\03e";
  font-weight: bold;
  position: absolute;
  top: 1em;
  right: 1em;
}
footer .copy {
  font-size: 0.8em;
  text-align: center;
}
/* __________________________________________ ↓ここからサブページ用 */
.subp section {
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-size: 1rem;
}
.subp section h2 {
  width: 96vw;
  height: auto;
  margin: 0 auto 1em;
  padding: 0.5em 0;
  color: #FFFFFF;
  margin-top: 1em;
  text-align: center;
  background-color: #650000;
  border-radius: 0.5em;
}
.subp section li {
  font-size: 100%;
}
.subp section .notice_box {
  margin-bottom: 2em;
  padding: 1em;
  width: 100%;
  font-size: 100%;
}
.subp section .notice_box table {
  width: 100%;
}
.subp section .notice_box tr {
  border-bottom: 1px solid #ccc;
}
.subp section .notice_box tr:last-child {
  border-bottom: none;
}
.subp section .notice_box th {
  display: block;
  width: 100%;
  padding: 0.5em 0 0;
  white-space: nowrap;
}
.subp section .notice_box td {
  display: block;
  width: 100%;
  padding: 0 0 0.5em;
}
/* __________________________________________ プライバシーポリシー #privacy */
#privacy ol, #law ol {
  list-style-type: decimal;
  padding-left: 1em;
}
#privacy section .notice_box p, 
#privacy section .notice_box li {
  font-size: 4vw;
}
#privacy h4 {
  color: #252525;
  font-size: 1em;
}
/* __________________________________________ 会社概要 #company */
#company ol {
  list-style-type: decimal;
  padding-left: 1em;
}
#company iframe {
  width: 100%;
  height: 40vh;
}
#company section ol, #company section ul {
  margin-bottom: 0;
}
@media screen and (min-width: 481px) {
body {
  font-size: 1.125rem;
  background-color: #f5f2e9;
}
p, li {
  font-size: 1em;
}
img {
  width: auto;
  height: auto;
}
.pc_view, .is-pc {
  display: block;
}
span.pc_view, span.is-pc {
  display: inline;
}
.smp_view, .is-sp {
  display: none;
}
span.smp_view, span.is-sp {
  display: none;
}
.pc_block {
  display: block;
}
.smp_block {
  display: inline;
}
/* ____ ボックス設定 ____ */
/* フレキシブルボックス */
.flexbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 大枠ボックス */
main.wrapper {
  margin: 1em auto;
  padding: 1em 0 0;
  width: 980px;
  border: 1px solid #999;
}
section {
  padding: 2em 0;
}
.wrapper {
  width: 980px;
}
.inner {
  padding: 0 1.5em;
}
.inner.wrapper {
  width: 900px;
}
.notice_box {
  width: 650px;
}
/* -------------------------------------- ヘッダー header  */
header {
  padding: 0.5em;
  background-color: #411f00;
}
header h1 {
  margin-bottom: 0;
  color: #FFFFFF;
  font-size: 1em;
}
/* -------------------------------------- ナビ nav.menu */
/*nav.menu {
  padding: 1em 0.5em;
}
nav.menu ul {
  display: flex;
  flex-wrap: wrap;
}*/
nav.menu li {
  width: 190px;
}
nav.menu li a {
  font-size: 0.8em;
  /*display: block;
  margin: 0.5em;
  padding: 1em;
  color: #411f00;
  text-align: center;
  text-decoration: none;
  background-color: rgba(255,236,137,1.00);
  border-radius: 0.5em;*/
}
/*nav.menu li a:hover {
  color: #FFFFFF;
  background-color: rgba(229,127,48,1.00);
}*/
/* -------------------------------------- 教材枠 section */
h2 {
  margin-bottom: 1em;
  font-size: 1em;
  /*padding: 0.5em;
  color: #FFFFFF;*/
}
h3 {
  font-size: 1em;
  /*padding: 0.5em;
  border-left: 10px solid #411f00;
  background-color: #FFE0CE;*/
}
section > .flexbox {
  align-items: stretch;
}
.itembox {
  padding: 0;
  width: 470px;
  border: 1px solid #ccc;
  background-color: #FFFFFF;
}
.itembox .flexbox {
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
}
.itembox .textbox {
  padding: 0.5em;
  font-size: 0.8em;
}
.itembox .flexitem {
  display: block;
  padding: 0.5em;
}
.itembox .flexitem>p img {
  width: auto;
}
#solo_g .itembox .flexitem>p img {
  width: 201px;
}
#solo_g .itembox p.inner {
  font-size: 0.8em;
}
/*.itembox .flexitem .btnbox{
  text-align: center;
}*/
/* -------------------------------------- フッター footer */
/*footer {
  color: #333333;
  background-color: #FFFFFF;
  border: none;
}
footer .wrapper {
  padding: 1em 0;
}
footer a, footer a:visited {
  color: #333333;
  text-decoration: none;
}*/
footer a:hover {
  color: #FFE0CE;
}
footer .flexbox {
  justify-content: center;
  margin-bottom: 1em;
}  
footer nav ul li {
  padding: 0.5em 0;
  font-size: 0.8em;
  text-align: center;
  border-bottom: none;
  position: static;
}
footer nav ul li a {
  display: inline;
  padding: 0;
}
footer nav ul li::after {
  content: "-";
  margin: 0 0.5em;
  font-weight: normal;
  position: static;
}
footer nav ul li:last-of-type::after {
  content: "";
  margin: 0;
}
footer .copy {
  font-size: 0.8em;
  text-align: center;
}
/* __________________________________________ ↓ここからサブページ用 */
.subp section {
  padding-left: 1em;
  padding-right: 1em;
  font-size: 1em;
}
.subp section .notice_box {
  margin-bottom: 2em;
  padding: 1em;
  width: 800px;
}
.subp section h2 {
  width: 100%;
  padding: 1em 0;
  color: #650000;
  font-size: 1.6em;
  background-color: transparent;
  border-radius: 0;
}
.subp section li {
  font-size: 100%;
}
.subp section .notice_box th {
  display: table-cell;
  width: 30%;
  padding: 0.5em 0;
  text-align: center;
}
.subp section .notice_box td {
  display: table-cell;
  width: 70%;
  padding: 0.5em 0;
}
/* __________________________________________ 会社概要 #company */
#company section h2 {
  margin-top: 0;
}
#company iframe {
  display: block;
  width: 425px;
  height: 350px;
  margin: 0 auto 2em;
}
/* __________________________________________ プライバシーポリシー #privacy */
#privacy ol {
  padding-left: 2em;
}
#privacy section .notice_box p, 
#privacy section .notice_box li {
  font-size: 0.8em;
}
}