/* CSS Document */
a{text-decoration:none;}

body{font-size: 16px;font-family: a-otf-ryumin-pr6n, serif;
font-weight: 300;
font-style: normal;}

   .sp{ display: block; }
  .pc{ display: none; }
#pc-menu-content, .nav__wrapper{display: none;}
section#serise{
    background: url("../images/img_mv_bg.png");
    ;
}
div#serise_sub{
    background: rgb(47,18,16);
background: linear-gradient(0deg, rgba(47,18,16,0.67) 0%, rgba(103,75,53,0.67) 100%);
    padding-bottom: 4.4em;
}

.content{
    width: 90%;
    margin: 0 auto;
    max-width: 950px;
}
h2{color: #772113;
    font-size: 1.8em;
    line-height: 1.5em;
    letter-spacing: -0.1em;
text-align: center;
margin: 0.5em 0;
text-shadow: 0px 0px 2px rgba(163,67,52,0.7);}
h3{
    border-left: solid 5px #1b1b1b;
    padding-left: 0.6rem;
    font-size: 1.6em;
    line-height: 1.4em;
    margin-bottom: 0.9em;
}
h4{font-size:1.9em;
    margin-bottom: 0.7em;
    line-height: 1.6em;
    letter-spacing: -0.2rem;
}
#mv p#catch{
    text-align: center;
    font-size: 1.4em;
    margin-bottom: 0.2em;
}
#mv #box-mv {text-align: center;}
#mv #box-mv img{max-height: 300px;}
#mv div#box-catch{border-bottom: solid 1px #1b1b1b;margin-bottom: 0.6rem;}
#mv div#box-tex{line-height:2.1em; }

h1{text-align: center;color: #1b1b1b;font-weight: 600;margin-bottom: 2rem;
    font-size: 3rem;}
#mv ul{display: table;
  table-layout: fixed;margin: 0 auto 0.3em;}
#mv ul li{
  vertical-align: middle;
    text-align: center;
    color: #fff;
width:100%;
max-width: 250px;
padding: 0.63em ;}
#mv ul li:not(:last-of-type):after{margin-right: 1px;}
#mv ul li.online{background-color: #67a1b1;}
#mv ul li.premium{background-color: #c9b23c;}
#mv ul li.basic{background-color: #b3b3b3;}
#theme {background-color: #c5b1a0;}
#mv .content{padding: 2em 0 0;}
#theme .content,#target .content{
    padding: 3em 0;
}
#target p{font-size: 1.75rem;color: #772113;margin-bottom: 1rem;line-height: 1.6em;text-align: center;}
#target ul li{border: solid 1px #858585;padding: 14px;display: flex;align-items: center;}
#target ul li:not(:last-of-type){margin-bottom: 0.3em;}
#target ul li div{background: #c5b1a0;text-align: center;padding: 2.5rem 0; flex: 1 0 25%;line-height: 2.1em;font-size:1.3rem;letter-spacing: -1px; }

#theme ul li{
    background-color: #fff;
    margin: 0 0 0.4em;
    padding: 2.5rem 2rem; 
    
}
#theme dt{font-size: 1.6em;border-left: solid 1px #1b1b1b;padding-left: 0.4em;line-height: 1.1em;margin-bottom: 1.4rem;}
#theme dd{padding-left: 0.8rem;margin-bottom: 0.8em;}
#theme dd:not(:first-of-type):before{
    content:  "";     /* 空の要素作成 */
    width:  6px;               /* 幅指定 */
    height:  6px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #858585;  /* 背景色指定 */
    border-radius:  50%;
    margin: 0 8px 3px 0px;
}
#theme dl span{font-size: 0.5em;}
#theme dl div{font-size: 0.5em;background-color:#626262; width: fit-content;display: inline;color: #fff;padding: 0.2em 0.8em;}
#voice {padding-top: 3em;}
#voice ul li:not(:last-child) {margin-bottom: 2rem;}
#voice ul li img{
    width: 100%;
    margin-bottom: 0.5em;
    max-width: 420px;
}

#serise_sub{color: #fff;}
#serise_sub p{line-height: 2.1rem; letter-spacing: -0.02em;padding-bottom: 95%;}
#serise_sub .content{background: url(../images/series.png) no-repeat ;padding-top: 3rem;background-size: 100%;background-position: center bottom;
}

section#detil{padding: 3em 0;}

section#day{background-color: #c5b1a0; padding: 3em 0;}
section#day .white-box{background-color: #fff;}
ul.day-box li.theme span{font-size: 0.5rem;line-height: 2.4;}

ul.day-box li.time span{font-size: 0.65em; color: #858585;letter-spacing: 0.1em;}
section#day p{text-align: center; line-height: 1.7em;padding: 0.8em 0 1.4em;}
section#day p span{font-size: 1.1em;font-weight: 600;}
.btn-entry{padding: 1.2em 0;text-align: center;color: #fff;line-height: 1.6em;font-size: 1.1em;}
.btn-close{text-align: center;color: #fff;line-height: 1.6em;background:rgb(144,144,144);padding: 1.2em 0;font-size: 1.2em;} 
.p-class{background-color: #c9b23c; }
.b-class{background-color: #b3b3b3; }
/*header*/

.brand {
  color: #1b1b1b; }
 
.site-header {
  position: relative;
  background-color: #c5b1a0; }
 
.site-header__wrapper {
  padding: 1rem 0 1rem 1rem;
height: calc(52px - 2rem);}
.nav__item a{
    color: #1b1b1b;
}
figure{
    max-width: 420px;
    margin: 0 auto;
}
figcaption{
    max-width: 420px;
    width: 100%;
    font-size: 0.9em;
}
.entry{background: #BB2828;padding: 1.2em 0;text-align: center;color: #fff;line-height: 1.6em;font-size: 1.1em;}
.standard-class{
    background: rgb(184,131,62);background: linear-gradient(152deg, rgba(184,131,62,1) 0%, rgba(233,197,115,1) 50%, rgba(184,131,62,1) 100%);}
.starter-class{
    background: rgb(119,130,136);background: linear-gradient(152deg, rgba(119,130,136,1) 0%, rgba(179,187,191,1) 50%, rgba(119,130,136,1) 100%); }
.entry-class{background: #9b783d;}
/* バーガー */
.menu-btn {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    height: 52px;
    width: 52px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #c5b1a0;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}
#menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: #c5b1a0;
}
#menu-content ul {
    padding: 70px 10px 0;
}
#menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
    letter-spacing: normal;
}
#menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
#menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
#menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #c5b1a0;
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ #menu-content {
    left: 0;/*メニューを画面内へ*/
}

/* 受講生の声-吹き出し共通 */
 
.balloon-simple {
 width: 100%;
 margin: 0 0 0.5rem ;
 overflow: hidden;}
 
.balloon-simple .icon-right img,
.balloon-simple .icon-left img{
 width: 100%;
 background-size:cover;
max-width: 70px;}
 
.icon-right p,
.icon-left p{
 text-align: center;
 top: -10px;
 position: relative;
}
 
.balloon-simple .balloon {
 width: 100%;
    line-height: 1.8em;
}
.balloon span{font-weight: 600;font-size: 1.2rem;}
.serif-right,
.serif-left {
 position: relative;
 padding: 1.7rem;
letter-spacing: -0.04em;
 border-radius: 10px;
}
 
/* 右の吹き出し */
 
.balloon-simple .icon-right {
 float: right;
}

.serif-right {
 margin: 1.1rem 0 1.4rem;
 background: #eeeeee;
 float: right;   
}
 
.serif-right:after {
 transform: scale(-1, 1);
 right: -22px;
 border-right: 20px solid #eeeeee;
}
.serif-left::before {content: '';
  position: absolute;
  left: 20px;
  top: -15px;
  display: block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #eeeeee;
  border-left: 15px solid transparent;} 
.serif-right::before{
  content: '';
  position: absolute;
  right: 20px;
  top: -15px;
  display: block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #eeeeee;
  border-left: 15px solid transparent;}
/* 右の吹き出し end */
 
/* 左の吹き出し */
 
.balloon-simple .icon-left {
 float: left;
}
.serif-left{
 display: inline-block;
 margin: 1.4rem 0 ;
 background: #eeeeee;
}
 
.serif-left:after{
 left: -22px;
 border-right: 20px solid #eeeeee;
}
 
/* 左の吹き出し end */ 

  @media (min-width: 600px) {
    .site-header__wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 1rem; } }
@media (min-width: 600px) {
  .nav__wrapper {
    display: flex; } }
 
@media (max-width: 599px) {
  .nav__wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: -1;
    background-color: #d9f0f7;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
    .nav__wrapper.active {
      visibility: visible;
      opacity: 1;
      transform: translateY(0); } 

}
 
.nav__item a {
  display: block;
  padding: 1.5rem 1rem; }
 

.company dl {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.company dt {
flex-basis: 100%;
padding: 20px;
background-color: #f1f1f1;
}
.company dd {
flex-basis: 85%;
padding: 20px;
background-color: #fff;
line-height: 1.6em;
}
.white-box:nth-child(n+1){margin-top: 1em;}
.company span{
    color: #858585;
    font-size: 0.9em;
    line-height: 1.2em;
}
@media screen and (min-width:600px) and (max-width:609px) {
.company dl {
flex-flow: column;
}
    
}
/*footer*/

#footer01 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#footer01 {
  position: relative;
  background: #e5dfd0;
}

#footer01 .nav a {
  display: block;
  padding: 0 10px;
  color: #333;
  text-decoration:none;
}
#footer01 {
    text-align: center;
  }

  #footer01 .nav li a {
      font-size: 0.8em;
    text-align:center;
      padding: 1em 20px 0;
  }
#footer01 .nav li:last-child{padding: 1em 20px;}

p.copyright{font-size: 0.8em;
line-height: 1em;}

@media(min-width: 768px){
    .bottom-menu{}
}

@media screen and (min-width: 600px) {
	/* 600px以上に適用されるCSS（タブレット用） */
    .sp{ display: none; }
    .pc{ display: block; }
    .menu-btn{width: 80px;height: 80px;}
    #pc-menu-content, .nav__wrapper{display: none;}
    .site-header{padding: 1.5em 0;}
    .site-header p{font-size: 1.6em;}
    .site-header__wrapper {height: calc(80px - 3rem);}
    ul.nav__wrapper li:not(:nth-last-child(2)){margin-right: 3.2rem;}
    ul.nav__wrapper li a{color: #1b1b1b; text-decoration: none; font-size: 1rem;}
    ul.nav__wrapper li:nth-child(4){display: none;}
    ul.nav__wrapper li:before{
content: ' ';
position: absolute;
top: 2.6rem;
display: block;
width: 10px;
height: 10px;
border: 0px;
margin-left: -1.2rem;
border-top: solid 1px #1b1b1b;
border-right: solid 1px #1b1b1b;
transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
}
    h1{font-size: 3.4rem;}
    #mv div#box-catch{margin-bottom: 2.6rem;}
    #box-mv{display:none;}
    #mv ul{display: block;}
   #mv ul li{display: list-item;}
    #pc-box-mv{background:url("../images/img_second_mv.png") no-repeat right center;min-height: 580px;}
    h2{text-align: left;padding: 2em 0;}
    h3{
    font-size: 1.75em;line-height: 1.1em;}
    #header-box{width: 80%;}
    .serif-right,
.serif-left {
 width : 64% ; /* IE8以下とAndroid4.3以下用フォールバック */
   width : -webkit-calc(100% - 8.4rem) ;
   width : calc(100% - 8.4rem) ;
}
 .serif-left{margin: 0 0 1rem 1.22rem;}
 .serif-right{margin: 0 1.22rem 1rem 0;}

.serif-right::before,
.serif-left::before{display: none;}
.serif-right:after,
.serif-left:after {
 content: "";
 position: absolute;
 top: 15px;
 border-top: 10px solid transparent;
 border-bottom: 5px solid transparent;
 border-left: 5px solid transparent;
}
    .company dt{line-height: 1.5em;}
    .company dd {flex-basis: 69%;}
    
    #voice ul li:not(:last-of-type){margin-right: 1rem;}
    #voice ul{display:flex;}
        .serif-right, .serif-left{ 
    width: -webkit-calc(100% - 9rem);
    width: calc(100% - 9rem);}
    ul.day-box li.theme span{line-height: 2.6;}
    ul.day-box{display: flex;width: 90%;margin: 0 auto;}
    ul.day-box:first-of-type{padding-top: 2.5em;}
    ul.day-box li{width: 50%;}
    ul.day-box li.theme{border-left: 1px solid #1b1b1b;padding: 0 0 0.4em 1rem;margin: 0 0 0.7em 0;}    
    ul.day-box2 li{width: 90%;margin: 0 auto;}
    ul.day-box2 li:not(:last-of-type){margin: 0 auto 1em;}
    #footer01 .nav li{border-top: 0px solid #555555;}
    #footer01 .nav li:last-child {border-bottom: 0px solid #555555;}
}

@media screen and (min-width: 960px) {
	/* 960px以上に適用されるCSS（PC用） */
    .site-header p{font-size: 1em;}
.hamburger-menu{display: none;}
.brand {
  font-weight: bold;
  font-size: 20px; }
    h3{margin-bottom: 0.6em;}
    #target p{margin-bottom: 1.5rem;}
    #target ul{display: flex;}
    #target ul li{max-width: 280px;width: calc(100% / 3); }
    #target ul li:not(:last-child){margin-right: 20px; }
    #target ul li div{align-items: center;display: grid; height: calc(250px - 4rem);}
 .btn-close{width: 90%; margin: 0 auto;}   
.site-header {
  position: relative;
  background-color: #def7ff; }
 
.site-header__wrapper {
  padding-top: 1rem;
  padding-bottom: 1rem; }
    
    h1{font-size: 3.6rem;}
    #mv p#catch{margin-bottom: 1.5em; }
    h2{
    font-size: 2.6em;
    line-height: 4.6rem;
    margin: 0.5em 0;
    padding: 1em 0;}
    #theme h3{ margin-bottom: 1.1em;}
    #theme .content, #target .content{padding: 4.4em 0;}
    #theme ul{display:flex;flex-wrap: wrap;}
    #theme ul li{width: calc(50% - 4.5em);margin: 0;}
    #theme ul li:nth-child(odd){margin: 0 1rem 0 0;}
    #theme ul li:nth-of-type(1),#theme ul li:nth-of-type(2){margin-bottom:1rem; }
    #voice{padding-top: 4.4em;}
    #voice h3{margin-bottom: 3rem;}
    .balloon-simple{margin: 0 0 3rem;}
    .balloon-simple .icon-right img,
    .balloon-simple .icon-left img{max-width: 140px;}
    .serif-right, .serif-left{ 
    width: -webkit-calc(100% - 13.4rem);
    width: calc(100% - 13.4rem);}
    .company dt:first-child, .company dd#first{border-top: none;}
    section#day{padding: 4.4em 0;}
    section#day h3{margin-bottom: 1.1em;}
    ul.day-box li.theme, ul.day-box li.time {font-size: 1.8em;}
    ul.day-box li.theme span{font-size: 1rem;
    line-height: 1.6;
    vertical-align: super;}
    ul.day-box li.theme{margin: 0 0 0.4em 0;}
    ul.day-box li.time{margin: 0.2em 0 0.7em 0.6em;}
    .company span{margin-left: 1.5em;}
    ul.day-box2{ display: flex;width: 90%;
    margin: 0 auto; }
    ul.day-box2 a{width: 50%;}
    ul.day-box3 a{width: 90%; margin:  0 auto;display: block;}
    ul.day-box2 li{width: 100%;align-items: center;}
    ul.day-box2 a:first-child{margin-right: 1em;}
  @media (min-width: 600px) {
    .site-header__wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 0;
      padding-bottom: 0;
      max-width: 950px;
      margin: 0 auto;} }
@media (min-width: 600px) {
  .nav__wrapper {
    display: flex; } }
 
@media (max-width: 599px) {
  .nav__wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: -1;
    background-color: #d9f0f7;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
    .nav__wrapper.active {
      visibility: visible;
      opacity: 1;
      transform: translateY(0); } }
 
.nav__item a {
  display: block;
  padding: 1.5rem 1rem; }
 
.nav__toggle {
  display: none; }
  @media (max-width: 599px) {
    .nav__toggle {
      display: block;
      position: absolute;
      right: 1rem;
      top: 1rem; } 
    }

    .site-header{background-color: #c5b1a0;font-size: 1.4em;line-height: 1.2em;padding: 1.4em 0;}
    .site-header label{display: none;}
    .company dt {
flex-basis: calc(15% - 3.5rem);
padding: 1.2rem 2rem;
background-color: #fff;
border-bottom: 1px solid #ccc;
vertical-align: middle;
        line-height: 1.5em;
}
.company dd {
flex-basis: calc(85% - 3.5rem);
padding: 1.3rem;
background-color: #fff;
border-bottom: 1px solid #ccc;
}
    
    #footer01 .nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1.1rem 0;
  }
      #footer01 .nav li a {
      padding: 0;
  }
  #footer01 .nav a:hover {
    color: #ca353b;
  }
    h4,#serise_sub p{padding: 0 0 0 5.4rem;}
    #serise_sub .content{background-position: right bottom;background-size:unset;}
}
ul.day-box li.theme,ul.day-box li.time{line-height: 1em;font-size: 1.5em;}
/* 2024/07/09 追加 */
section#day .white-box2{background-color: #fff;}

.white-box2:nth-child(n+1){margin-top: 1em;}
.white-box2 ul.day-box li.theme span{font-size: 0.9rem;line-height: 2.4;}
.white-box2 ul.day-box li.time span{font-size: 0.65em; color: #858585;letter-spacing: 0.1em;}
.white-box2 ul.day-box4{width: 90%; margin:  0 auto;display: block;}
.entry2-class{background: #9b783d;padding: 1.2em 0;text-align: center;color: #fff;line-height: 1.6em;font-size: 1.1em;}
.white-box2 ul.day-box{align-items: center;}
.morning{background: #416d43;border-radius: 15px;}
.evening{background: #c7a235;border-radius: 15px;}
.close{background:rgb(144,144,144);border-radius: 15px; padding: 1.3em 0;text-align: center;color: #fff;line-height: 1.6em;font-size: 1.1em;width: 100%;}

.btn-entry2 span{font-size: 1.2em;}
@media screen and (min-width: 600px) {
.white-box2 ul.day-box li.theme,.white-box2 ul.day-box li.time{margin:0 0 0.7em 0; line-height: 0.8em;font-size: 1.4em;}
.white-box2 ul li{float: left;}
.btn-entry2{padding: 1.3em 0;text-align: center;color: #fff;line-height: 1.6em;font-size: 1.1em;width: 49%; }
.morning,.close{margin-right: 1%;}
.day-box4 ul li:first-of-type{margin-right:2%;}
.white-box2 p{clear: both;}
}
@media screen and (max-width: 599px) {
.white-box2 ul.day-box li.time{margin:0 5%; line-height: 0.8em;font-size: 1.4em;padding-top: 1.4em;}
.white-box2 ul.day-box li.theme{margin:0.6em 5% 0; line-height: 0.8em;font-size: 1.4em;}
ul.day-box li.time{padding-top: 1.4em;}
.btn-entry2{padding: 1.2em 0;text-align: center;color: #fff;line-height: 1.6em;font-size: 1.1em;width: 100%;}
.btn-entry2:first-of-type{margin-bottom: 0.6em;}
.day-box{margin:1.4em 5%; }
}