/* 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;
}
.company span.menber{margin-bottom: 0.8em;}
.content{
    width: 90%;
    margin: 0 auto;
    max-width: 950px;
}
h1{margin-top: 1.4em;}
h1 img{width: 100%;}
h3{ font-size: 1.8em;
    line-height: 1.4em;
    color: #4e3912;
    font-weight: 600;
}
h4{position: relative;
	padding-top: 1em;
	font-size: 1.5em;
	text-align: center;
}
h4 span {
	position: relative;
	z-index: 2;font-weight: 600;
}

h4::before {
	content: attr(data-en);
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(77,60,32,0.20);
	font-size: 1.6em;
	font-style: italic;
}

span#catch{font-size:0.6em;}
.double{
	width:100%;
	text-align:center;
    margin-bottom: 1em;
}
.double h3{
	position:relative;
	display:inline-block;
}
.double h3:before, .double h3:after{
	content:"";
	display:block;
	width:150%;
	height:4px;
	border-top:1px solid #4e3912;
	border-bottom:1px solid #4e3912;
	position:absolute;
	top:50%;
	margin-top:-2px;
}
.double h3:before{left:-200%;}
.double h3:after{right:-200%;}
ul.day-box2 li{width: 90%; margin: 0 auto 0.5em;}
ul.day-box2 a:hover{opacity: 0.7;}

#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;padding: 1.2em 0 3em;font-size: 1.2em;}


#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;}

#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: 0 0 4em;}

section#day{background-color: #ccc; padding: 3em 0;}
section#day .white-box{background-color: #fff;}
ul.day-box li.time{line-height: 1em;padding: 1em 0 1em 0.6em;font-size: 1.6em;}
ul.day-box li.theme span{font-size: 0.5rem;line-height: 2.6;}
ul.day-box li.time span{font-size: 0.65em; color: #858585;letter-spacing: 0.1em;}
section#day p{font-size: 0.9em;
text-align: center; line-height: 1.4em;padding: 0 0 1.4em;}
.all-class{    background: rgb(181,67,67);
    font-size: 1.2em;
    padding: 1.4em 0;
margin-bottom: 1em;}
a .all-class {color: #fff; text-align: center;}
.btn-entry{padding: 1.2em 0;text-align: center;color: #fff;line-height: 1.6em;font-size: 1.1em;}
.p-class{background: #c9b23c; }
.b-class{background-color: #735C4B; }
.c-class{background-color: #5c5c5c; }
.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;}
/*header*/

.brand {
  color: #1b1b1b; }
 
.site-header {
  position: relative;
  background: rgb(78,57,18);
background: linear-gradient(90deg, rgba(78,57,18,1) 20%, rgba(132,114,80,1) 50%, rgba(78,57,18,1) 80%);
color: #fff;}
 
.site-header__wrapper {
  padding: 1rem 0 1rem 1rem;
height: calc(70px - 2rem);}
.nav__item a{
    color: #1b1b1b;
}
figure{
    max-width: 420px;
    margin: 0 auto;
}
figcaption{
    max-width: 420px;
    width: 100%;
    font-size: 0.9em;
}
/* バーガー */
.menu-btn {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    height: 70px;
    width: 70px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background: rgb(47,18,16);
background: linear-gradient(0deg, rgba(47,18,16,100) 0%, rgba(103,75,53,100) 100%)
}
.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:rgb(78,57,18);
background: linear-gradient(90deg, rgba(78,57,18,1) 20%, rgba(132,114,80,1) 50%, rgba(78,57,18,1) 80%);
}
#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: rgb(47,18,16);
background: linear-gradient(0deg, rgba(47,18,16,100) 0%, rgba(103,75,53,100) 100%);
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ #menu-content {
    left: 0;/*メニューを画面内へ*/
}

  @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 {
padding: 1.6em 1em;
background-color: #fff;
line-height: 1.6em;
}
.company span.instructor{font-weight: 600;font-size: 1.1em;}
.company span.menber{
  padding: 0.2rem 0.7em;
    border-left: 4px solid #000;
    font-size: 1.1em;
    font-weight: 600;
    display: block;
    margin: 0em 0 0.4em;
}
.company span.mt{
    margin: 1em 0 0.4em;
    display: block;
}
    .white-box:nth-child(n+1){margin-top: 1em;}
@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 0;}
#mv div#box-tex span{font-size: 0.8em;line-height: 1.6em;padding-top:1em;display: block; color: #747474;}
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: #fff; text-decoration: none; font-size: 1rem;}
    ul.nav__wrapper li:nth-child(4){display: none;}
    #mv div#box-tex{padding: 4em 1.2em 3em; text-align: center;}
    #mv div#box-tex{font-size: 1em;}
    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 #fff;
border-right: solid 1px #fff;
transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
}
    ul.day-box li.time span{padding-left: 1em;}
    ul.day-box li.time{line-height: 1.6em;padding: 0 0 0.4em 0.4em;}
    #box-mv{display:none;}
    #mv div#box-catch{margin-bottom: 1.6rem;}
    #mv ul{display: block;}
    #mv ul li{display: list-item;}
    #pc-box-mv img{width: 100%; }
    h3{
    font-size: 2em;line-height: 1.1em;}
    h4{font-size: 2.6em;}
    #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;}

    #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{margin: 0 0 0.7em 0;}
    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-box li.half:first-of-type{margin-right: 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{font-size: 2.4em; margin-bottom: 0.6em;}

    .company dl {
border-top: 1px solid #ccc;
}
.site-header {
  position: relative;
  background-color: #def7ff; }
 
.site-header__wrapper {
  padding-top: 1rem;
  padding-bottom: 1rem; }
    
    span#catch{margin:1em 0 0.5em;font-size:0.6em;}
    #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;}
    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.2em 0 0em 0.6em;}
    ul.day-box2{ width: 90%;margin: 0 auto; }
    ul.day-box2 a{width: 100%;}
    ul.day-box3 a{width: 90%; margin:  0 auto;display: block;}
    ul.day-box2 li{width: 100%;align-items: center;margin-bottom: 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); 
    }
    h3{
    font-size: 1.8em;
}

.double h3:before, .double h3:after{
	width:200px;

}
.double h3:before{left:-224px;}
.double h3:after{right:-224px;}
    
    }
 
.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: rgb(78,57,18);
background: linear-gradient(90deg, rgba(78,57,18,1) 20%, rgba(132,114,80,1) 50%, rgba(78,57,18,1) 80%);
        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: 2.6rem 2rem;

border-bottom: 1px solid #ccc;
vertical-align: middle;
        line-height: 1.5em;
}
.company dd {
flex-basis: calc(85% - 3.5rem);
padding: 2.2rem 1.3rem;
background-color: #fff;
    line-height: 2em;
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 a:hover {
    color: #ca353b;
  }
    #serise_sub p{padding: 0 0 0 5.4rem;}
    #serise_sub .content{background-position: right bottom;background-size:unset;}
}