@charset "UTF-8";

/* ===================================================================

 file name  :  add.css
 ※最終的にcommon.cssに統合

=================================================================== */

/*** 全体共通、機能面 ***/
body.logged-in .stuck {
    top: 32px;
}
@media screen and (max-width: 767px){
  body.logged-in .stuck {
      top: 0px;
  }
}
@media only screen
 and (min-width: 768px)
 and (max-width: 1200px) {
  @viewport {
      width: 1200px;
      initial-scale: 1;
  }
  html, body {/*max-width: 1200px;*/}
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
a, a img {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease
}
a:hover { color: #ff876c !important; text-shadow: 0px 0px 6px #fff;}
/*a:hover img { box-shadow: 0px 0px 10px 5px rgba(255,135,108,0.4); }*/

.header .drawer-toggle {
  cursor: pointer;
}

@media only screen
 and (min-width: 768px)
 and (max-width: 1200px) {
  .header header{max-width: 1180px;padding: 0 10px;box-sizing:border-box;}
  .header .gnav1{ right: 80px; }
  .header .gnav1 li{ margin-left: 10px;}
}

/* header */
.header .gnav1 a {
  background-size: 16px;
}
@media only screen {
  .header .app a {
    padding: 15px 0;
    overflow: hidden;
    height: auto;
    line-height: 1;
  }
}

/* gnavi */
.drawer-nav {
  z-index: 1000;
}
.drawer-menu a.drawer-toggle {
    position: absolute;
    top: 65px;
    right: 40px;
    padding: 10px 20px;
    cursor: pointer;
    background: #000;
    color: #fff;
}
.drawer-menu a.drawer-toggle:before {
  content: "\f0c9";
  font-family: "FontAwesome";
  margin-right: 15px;
}
.drawer-menu a.drawer-toggle:after {
    border: none;
    margin: 0;
}
@media screen and (max-width: 767px){
  .drawer-menu a.drawer-toggle {
      right: 0;
      left: 0;
      text-align: center;
  }
}

/* footer */
.footer nav li {
  margin-bottom: 5px;
}
.footer form:after {
  background-size: 92px;
}
.footer form input {padding: 0 15px;}
.footer form button {
  font-size: 2.2rem !important;
  padding: 0;
  margin-left: 5px;
}
@media screen and (max-width: 767px){
  .footer form button {
    font-size: 1.6rem !important;
  }
}

/* top */
.list-info li a img {
    width: 100px;
    height: auto;
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
}
.list-info li .more {
    display: block;
    text-align: right;
    clear: both;
}
.about section:before {background: url("../img/top/bg_about_1.png") no-repeat 0 0; background-size: 629px; }
.method .btn:after {background-size: 92px;}
.method li {padding: 0 2%;width: 21%;}
.method li img {max-width: 100%;}
.ordermade .box h3 span:before, .ordermade .box h3 span:after {background-size: 58px;}
.ordermade .box:after {background-size: 332px;}
.dream .btn{position: absolute;top: 50px;right: 50px;}
.dream .btn a{ z-index: 4; padding: 12px 45px; border: 3px solid #1bacdc; color: #1bacdc; font-weight: bold; font-size: 2.6rem;}
.dream:after {background-size: 646px;}
@media only screen
 and (min-width: 768px)
 and (max-width: 1200px) {
  .dream .btn{position: static;margin: 20px 0 0 0;max-width: 770px;text-align: center;}

.btn {}
}
@media screen and (max-width: 767px){
  .method li {
    padding: 20px 10px 0;
    width: 50%;
  }
  .ordermade .box h3 span:before, .ordermade .box h3 span:after {background-size: 18px;}
  .dream .btn{top: inherit;right: 15px;bottom: 180px;left: 15px;}
  .dream .btn a {padding: 10px 0; text-align: center; font-size: 1.9rem;}
  .dream figure{ margin-top: 100px;}
}
.handson .btn a:after {}
.sponsor h2:before, .sponsor h2:after {background-size: 100%;}
@media only screen
 and (min-width: 768px)
 and (max-width: 1200px) {
  .sponsor section {max-width: 1200px;}
}

/* system */
.system .block1 h2, .system .block2 h2, .system .block3 .lead h2 { background-size: 64px;}

/* lesson */
.ttl-ico4 span:after{
  /* background-size: 106px; */
}
.ttl-ico span:after {
  /* background-size: 106px; */
}
@media screen and (max-width: 767px){
  .ttl-ico span:after {
    /* background-size: 30px 30px; */
  }
}
.lesson .block2 .box h4 {
  /* background-size: 44px; */
}
.tpl1 .box li {
  background-size: 34px;
}
.note4 .inner {
  background-size: 50%;
}
.note2 dt:after {
  background-size: 78px;
}
.note2 dd li {
  background-size: 28px;
}
.lesson .block .lead h2 {
  background-size: 730px;
}
.lesson .bg ul {
  margin: 0;
}
.lesson .block1 .bg-ttl {
  /* background-size: 300px; */
}
.lesson .block2 .bg-ttl {
  background-size: 408px;
}
.lesson .block3 .bg-ttl {
  background-size: 316px;
}
.lesson .block3 .bg ul { margin: 0;}
.lesson .block4 .bg-ttl {
  background-size: 358px;
}
@media screen and (max-width: 767px){
  .note2 dt:after {
    background-size: 40px;
  }
  .note2 dd li {
    background-size: 14px;
  }
  .lesson .block2 .box h4 {
    /* background-size: 14px; */
  }
  .tpl1 .box li {
    background-size: 16px;
  }
  .lesson .bg{min-width: 0;}
}
@media only screen
 and (min-width: 768px)
 and (max-width: 1200px) {
  .lesson .block3 .bg li {padding: 0 10px;}
  .lesson .bg, .lesson .bg ul {margin: 0;}
  .lesson .bg li img {max-width: 100%;padding: 0 20px;box-sizing: border-box;}
}
@media only screen
 and (min-width: 768px)
 and (max-width: 1000px) {
  .lesson .bg {margin-left: -15px;margin-right: -15px;}
}


/* news, results archive */
body.archive .main{padding-top: 35px;background: url("../img/bg.gif") top center;}
.news-list section .date a { color: #8f8f8f; text-decoration: none;}
.news-list section figure img{height: auto;}
.news .main.no_pagenation { padding-bottom: 120px;}

/* news, results single */
.news-detail .date a { color: #8f8f8f; text-decoration: none;}
.news-detail img.alignleft{ float: left; clear: left; margin: 0 30px 15px 0;}
.news-detail img.aligncenter{margin: 0 auto 15px;display: block;}
.news-detail img.alignright{ float: right; clear: right; margin: 0 0 15px 30px;}
.news-detail div.float_clear {
  height: 0;
}
.news-detail div.float_clear img {
  border: none;
  margin: 0;
  width: 0;
}
@media screen and (max-width: 767px){
  .news-detail img { width: auto; }
  .news-detail img.alignleft{ width: 40%;}
  .news-detail img.alignright{ width: 40%;}
  .news-detail iframe {
      max-width: 100%;
      height: auto;
  }
}

/* course */
.course .block1 .set li span{
  width: auto;
  height: auto;
  line-height: initial;
  padding: 4px;
  font-size: 2rem;
  font-weight: normal;
}
.course-detail .block1 .box figure img {
  border: none;
}
.course-detail .block1 .frame li img {
  border: none;
}
.course-detail .block3 .box figure img {
  border: none;
}
.course-detail .block3 .lead2 figure img {
  border: none;
}
.course-detail .block1 .frame li h4 {
}
.course-detail .block1 .frame h3 {
    background-size: 64px;
}
.course-detail .block2 .list-lead li {
  background-size: 34px;
}
.course-detail .block2 .bg h3:after {
  background-size: 48px;
}
.course-detail .block3 .frame h4 {
  background-size: 44px;
}
.course-detail .block3.no_fee {
    border-bottom: 6px solid #634755;
    padding-bottom: 80px;
}
.note5 .strong:after {
  background-size: 100px;
}
@media only screen
 and (min-width: 768px)
 and (max-width: 1200px) {
  .note5 .strong:after {
    background-image: none;
  }
}
.course-detail .block5 .tab.one li {
    width: 100%;
    box-sizing: border-box;
}
.course-detail .block5 .content .submenu th {
  text-align: left;
}
@media screen and (max-width: 767px){
  .course .block1 .btn1 a span {
      line-height: 1;
  }
  .course-detail .block1 .frame h3 {
      background-size: 32px;
  }

  .course-detail .block2 .list-lead li {
    background-size: 18px 18px;
  }
  .course-detail .block2 .bg h3:after {
    background-size: 24px 33px;
  }
  .course-detail .block3 .frame h4 {
    background-size: 22px 22px;
  }
  .note5 .strong:after {
    background-size: 35px 32px;
  }
}
@media screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape){
    .course .block1 .set li span{font-size:1.3rem;}
}
/* soft */

.soft section h2 {
  background-size: 54px;
}
.soft section h2:after {
  background-size: 222px;
}
.soft section:nth-child(2) h2:after {
  background-size: 266px;
}
.soft section:nth-child(3) h2:after {
  background-size: 110px;
}
@media screen and (max-width: 767px){
  .soft section h2 {
    background-size: 30px 30px;
  }
}

/* instructor */
.instructor .snav li { padding: 0 15px;}
.instructor .block h3.ttl-t8 {
    clear: both;
    padding-top: 20px;
}
.list-row6 h4{ color: #1cb083; font-weight: bold; font-size: 2.3rem;}
@media screen and (max-width: 767px){
  .instructor .snav li{ padding: 0;}
  .instructor .block h3.ttl-t8 {
      padding-top: 0px;
  }
  .list-row6 h4{ font-size: 1.2rem;}
}

/* voice */
.voice .en-ico:before, .voice .en-ico:after {
  background-size: 100%;
}
@media screen and (max-width: 767px){
  .voice .prof ul {
    margin-left: 0;
  }
  .voice .prof li:first-child {
    padding: 0 5px 0 5px;
  }
}
@media only screen
 and (min-width: 768px)
 and (max-width: 1200px) {
  .voice .en-ico:before {
    left: -300px;
    background-size: 80%;
    background-position: left top;
    max-width: 360px;
  }
  .voice .en-ico:after {
    right: -380px;
    background-size: 80%;
    background-position: right top;
    max-width: 360px;
  }
}
@media only screen
 and (min-width: 768px)
 and (max-width: 850px) {
  .voice .en-ico:before,.voice .en-ico:after {background-size: 70%;}
  .voice .en-ico:before {left: -70%;}
  .voice .en-ico:after {right: -100%;}
}
@media screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape){
  .voice .en-ico::before,.voice .en-ico::after {background-size: 70%;}
  .voice .en-ico::before {left: -320px;}
  .voice .en-ico::after {right: -330px;background-size: 60%;}
}
/* qa */
@media screen and (max-width: 767px){
  .qa article dt:before{
    background: none;
  }
  .qa .snav li{background-color: #d9edfd;float: left; display: block;}
  .qa .snav a{padding: 0;vertical-align: middle;display: table-cell;height: 60px;width: inherit;line-height: 1;}
}

/* privacy */
@media only screen
 and (min-width: 768px)
 and (max-width: 1200px) {
  .policy section ol{/* list-style-position: inside; */}
}
@media screen and (min-device-width:768px) and (max-device-width:1024px) {
  .policy section ol{margin-left:1.5em;}
}

/* フォーム */
.note2:after {background-size: 348px;}
.trial .block1:after {background-size: 192px;}
.trial .block1 h2, .trial .block2 h2 {background-size: 64px;}
.trial .block1 .list ul li {background-size: 38px;}
.tpl3 h3 {
  background: url("../img/ico_check1.png") no-repeat;
  background-size: 52px;
}
.wrap-select {/* border:0; */}
.wrap-select select {/* color: #000; *//* border: 1px solid #808080; */}
.wrap-select select:disabled {
    color: #999;
}
.form .box {font-size: inherit;}
.form input[type=submit].wpcf7-submit{padding: 0 130px 0 195px;height: 80px;border: none;border-radius: 4px;background: #f16d61 url("../img/ico_btn.gif") no-repeat 130px 50%;color: #fff;font-size: 3rem;line-height: 80px;background-size: 44px;width: auto;}
.form .form-inner span.date {
    display: inline-block;
    margin: 0 15px;
    vertical-align: bottom;
}
.form .ui-datepicker-trigger { cursor: pointer; margin-right: 15px; width: 52px;}

.wpcf7-radio label{position: relative;display: inline-block;cursor: pointer;} 

.method .inner img { margin-top: 50px;}
@media (min-width: 1px) {
    input[type=radio]{display: none;}
    .wpcf7-radio label{margin: 0 30px 0 0;padding: 0 0 0 65px;height: 50px;/* color: #c3c3c3; */line-height: 50px;font-size: 1.6rem;}
    .wpcf7-radio label:before{ position: absolute; top: 50%; left: 0; display: block; box-sizing: border-box; margin: -25px 0 0; width: 46px; height: 46px; border: 4px solid #c3c3c3; border-radius: 100%; background: #fff; content: "";}
    .wpcf7-radio label.checked:before{border: none;background: #f16d61;}
    .wpcf7-radio label.checked:after{ position: absolute; top: 50%; left: 7px; display: block; box-sizing: border-box; margin-top: -15px; width: 30px; height: 20px; border-bottom: 6px solid #fff; border-left: 6px solid #fff; content: ""; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
    .method .inner img { margin-top: 20px;}
}
@media screen and (max-width: 767px){
  .trial .block1 .list ul li {background-size: 19px;}
  .tpl3 h3{background-position: 0 6px;background-size: 13px 13px;/* margin-left: 0; */}
  .form input[type=submit].wpcf7-submit{ padding: 12px 0; width: 100%; height: auto; background: #f16d61 url("/img/ico_btn.gif") no-repeat 20% 50%; background-size: 22px 19px; font-size: 1.5rem; line-height: normal;}
  input[type="text"].st {
      padding: 0;
      text-align: center;
  }
  .wpcf7-radio label{
    font-size: 16px;
}
}

/*▼ t.nakata カスタマイズここから */

/* --------------------------------------------------
 grid
--------------------------------------------------- */
@media screen and (min-width: 768px) { 
  .container { box-sizing: border-box; }
  .container:after, .row:after { content: ''; display: table; clear: both;}
  .container * { box-sizing: border-box; }
  .row { margin-right: -15px; margin-left: -15px;}
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}
  .col-1 { width: 8.33333333%;}
  .col-2 { width: 16.66666667%;}
  .col-3 { width: 25%;}
  .col-4 { width: 33.33333333%;}
  .col-5 { width: 41.66666667%;}
  .col-6 { width: 50%;}
  .col-7 { width: 58.33333333%;}
  .col-8 { width: 66.66666667%;}
  .col-9 { width: 75%;}
  .col-10 { width: 83.33333333%;}
  .col-11 { width: 91.66666667%;}
  .col-12 { width: 100%;}
}
@media screen and (max-width: 767px) { 
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {float: none;width: 100%;}
}

/* --------------------------------------------------
 common
--------------------------------------------------- */

/*▼2016.10.13 LINEアイコン追加 */
.header aside {/* top: 15px; */}
.header aside li { margin-right: 8px }
.header aside li:nth-last-child(-n+2) {display:none;}
.header aside a {font-size: 2.5rem;font-size: 2.1rem;}
.header aside a .line {position: relative;top: 2px;display: inline-block;background: url(../img/ico_line01.png) no-repeat;background-size: contain;width: 25px;height: 24px;webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.header aside a:hover .line { background-image: url(../img/ico_line02.png); -webkit-box-shadow: 0px 0px 6px #fff; box-shadow: 0px 0px 6px #fff; -webkit-border-radius: 50%; border-radius: 50%; }
/*▲2016.10.13 LINEアイコン追加 */

/*▼ 2016.10.09 PCデフォルト縮小表示(実装時にコメント外します) */
@media screen and (min-width: 768px) { 
    /* firefoxはzoom非対応のためscaleで位置合わせ */
    body {
    	zoom: 82%;
    	-ms-zoom: 1;
    	/*    	-ms-zoom: 86%;
    	-moz-transform: scale(0.82) translate(0%,-10.9%);
    	-ms-transform: translate(8%, 0%);
*/
    }
/*
    .header.stuck {
    	-ms-zoom: 86%;
    	-ms-transform: translate(8.01%, 0%);
    }
*/
}
@media screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){
    /* iPad縦向きは縮小しない */
    body { zoom: 1;}
}
/* IEのプルダウンUI消去(位置がずれるため) */
select::-ms-expand {
  display: none;
}
/* zoom対応する場合、IE向けの修正 */
/*
.fee thead #th_4 { border-left: 2px solid #fff;}
*/

/*▼ 2016.09.29 PCデフォルト縮小表示 */

/* --------------------------------------------------
 header
--------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 900px) { 
    .header {height: 80px;}
}
@media screen and (min-width: 380px) and (max-width: 768px) { 
	.header header .logo_wrap .logo {padding-top: 5px; max-width: 215px;}
}

/*▼2016.10.20 LINEアイコン追加 */
@media screen and (min-width: 1200px) { 
	.header aside li {width: 23%;margin: 0 0 0 1%;width: 15%;}
	.header aside li:first-child {/* margin: 0 0 0 5%; */}
}
@media screen and (min-width: 768px) and (max-width: 1199px) { 
	.header aside li { width: 23%; margin: 0 0 0 1%;}
	.header aside li:first-child { margin: 0 0 0 5%;}
	.header aside a { font-size: 2rem;}
	.header aside a .line{ width: 22px; height: 20px;}
}
.drawer-menu aside li a .line { position: relative; top: 4px; display: inline-block; background: url(../img/ico_line06.png) no-repeat; background-size: contain; width: 37px; height: 35px; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.drawer-menu aside li a:hover .line { background-image: url(../img/ico_line04.png); -webkit-box-shadow: 0px 0px 6px #fff; box-shadow: 0px 0px 6px #fff; -webkit-border-radius: 50%; border-radius: 50%; }
@media screen and (max-width: 767px){
    .drawer-menu aside li{/* width: 10%; */}
    .drawer-menu aside li a .line { width: 31px; height: 30px;}
}
/*▲2016.10.20 LINEアイコン追加 */

/*▼ 2016.09.29 「無料体験レッスン」強調 */
.header .gnav1 {
    right: 96px;
    bottom: 46px;
}
.header .gnav1 li:not(:last-child) {
    margin: 0 0 0 14px;
    display: inline-block;
    vertical-align: top;
}
.header .gnav1 li:not(:last-child) a {
    font-size: 16px;
    background-size: 14px;
    padding: 0 0 1px 18px;
}
.header .gnav1 li:last-child a {
    background: #e0504f;/* url(../img/ico_arrow4.gif) no-repeat 8px center;*/
    color: #fff;
    padding: 10px 10px 11px 30px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-size: 22px;
    position: relative;
}
.header .gnav1 li:last-child a:hover {
    color: #f5ed49!important;
    text-shadow: none;
}
.header .gnav1 li:last-child a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left: 9px solid #fff;
    top: 19px;
    left: 14px;
}
.header .gnav1 li:last-child a:hover:after {
    border-left-color: #f5ed49;
}

@media only screen and (max-width: 1200px) and (min-width: 768px) {
    .header .gnav1 li:last-child a { font-size: 20px; }
    .header .gnav1 li:last-child a:after {
        top: 1.5vw;
    }
}
@media screen and (max-width: 1200px){
    .header .gnav1 li:not(:last-child) a { font-size: 1.2vw; }
    .header .gnav1 li:last-child a { font-size: 1.4vw; }
}
/*▲ 2016.09.29 「無料体験レッスン」強調 */

@media screen and (max-width: 767px) and (min-width: 440px) { 
    .header header h1 { width: 225px }
    .header header address { width: 370px }
    .header .gnav1 { right: 80px; }
}

@media screen and (max-width: 1200px){
	.header .drawer-toggle {top:0;}
}
@media screen and (min-width: 768px) and (max-width: 900px){
	.header .gnav1{ right: 65px; top: 13px;}
	.header .drawer-toggle img.pc {width:50px;}
}
@media screen and (device-width: 1024px) and (device-height: 1366px) and (orientation: landscape){
	/* iPad Pro 横向き */
	.header .gnav1 li:nth-child(1){
		display: block;
		position: relative;
		top: 8px;
	}
	.header .gnav1 li:nth-child(2){
		position: relative;
		top: 17px;
	}
}
/* --------------------------------------------------
 footer
--------------------------------------------------- */
/*▼2016.10.20 LINEアイコン追加 */
.footer aside a .line { display: inline-block; background: url(../img/ico_line03.png) no-repeat; background-size: contain; width: 15px; height: 14px; webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.footer aside a:hover .line { background-image: url(../img/ico_line04.png); -webkit-box-shadow: 0px 0px 6px #fff; box-shadow: 0px 0px 6px #fff; -webkit-border-radius: 50%; border-radius: 50%; }
@media screen and (max-width: 340px) { 
	.footer aside li:first-child { display: block; width: 100%; padding: 0 0 10px 0;}
	.footer footer a { font-size: 1.5rem;}
}
/*▲2016.10.20 LINEアイコン追加 */
/* --------------------------------------------------
 Global Navi
--------------------------------------------------- */

/*▼ 2016.10.09 PC用グローバルメニュー追加 */
@media screen and (min-width: 768px) { 
    #gNav { position: relative; background: #f4b276; border-bottom: 4px solid #f7a119; overflow: hidden; }
    #gNav:before {content: '';position: absolute;bottom: 0px;width: 100%;height: 8px;background: #f7a119;}
    #gNav:after { content: ''; position: absolute; bottom: 0; left: 50%; background: #f9d260; width: 100%; height: 8px; -webkit-transform: translateX(620px); transform: translateX(620px); }
    #gNav ul {margin: 0 auto;width: 100%;position: relative;height: 81px;}
    #gNav ul:before { content: ''; position: absolute; bottom: 0; left:0; width: 100%; height: 8px; border: none; background: #f7a119; background: -moz-linear-gradient(left, #f7a119 0%, #f9d260 75%); background: -webkit-linear-gradient(left, #f7a119 0%,#f9d260 75%); background: linear-gradient(to right, #f7a119 0%,#f9d260 75%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7a119', endColorstr='#f9d260',GradientType=1 ); }
    #gNav li { float: left; background: #f4b276; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
    #gNav li a {color: #1a1a1a;font-weight: bold;display: block;position: relative;padding: 0 29px 0 48px;border-right: 2px solid #ff9119;font-size: 1.4vw;height: 80px;padding: 0 2rem 0 3rem;font-size: 1.6rem;}
    #gNav li:first-child a { border-left: 2px solid #ff9119 }
    #gNav li a:before {content: '';position: absolute;width: 0;height: 0;border: 0.7vw solid transparent;border-left: 1.1vw solid #1a1a1a;-webkit-transform: translateY(-50%);transform: translateY(-50%);top: 50%;left: 29px;}
    /* hover & current */
    #gNav li.current-menu-item, #gNav li:hover { background: #ffdbba }
    #gNav li.current-menu-item a, #gNav li:hover a {color: #6d6d6d!important;text-shadow: none;}
    #gNav li.current-menu-item a:before, #gNav li:hover a:before { border-left-color: #6d6d6d; -webkit-transform: rotate(90deg); transform: rotate(90deg); top: 46%; left: 25px; }

    /*▼ 2016.10.10 均等割りに変更 */
    #gNav li {float: left;background: #f4b276;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;/*width: 20%;*/}
    #gNav li a {color: #1a1a1a;font-weight: bold;display: block;position: relative;border-right: 2px solid #ff9119;text-align: center;display: table-cell;vertical-align: middle;}
    #gNav li a span {display: inline-block;position: absolute;-webkit-transform: /*translateY(-50%)*/ rotate(-90deg);transform: /*translateY(-50%)*/ rotate(-90deg);top: 35px;/*50%*/;left: 0.9rem;}
    #gNav li.current-menu-item a span, #gNav li:hover a span {-webkit-transform: /*translateY(-50%)*/ rotate(0deg);transform: /*translateY(-50%)*/ rotate(0deg);}
    #gNav li a:before {display: none;}
    /*▲ 2016.10.10 均等割りに変更 */
}
/*▼ 2016.10.10 均等割りに変更 */
/*body.logged-in #gNav {top: 32px;}*/
body:not(.logged-in) #gNav { top:0px; }
@media screen and (min-width: 768px) { 
    #gNav li a {font-size: 1.5rem;padding: 0 1.1rem 0 2.2rem;}
    #gNav li a span {left: 0.8rem;top:33px;}
}
@media screen and (min-width: 790px) { 
    #gNav li a {font-size: 1.6rem;}
}
@media screen and (min-width: 860px) { 
    #gNav li a {font-size: 1.7rem;padding: 0 1.2rem 0 2.1rem;}
    #gNav li a span {top:32px;}
}
@media screen and (min-width: 890px) { 
    #gNav li a {font-size: 1.8rem;}
    #gNav li a span {left: 0.5rem;}
}
@media screen and (min-width: 930px) { 
    #gNav li a {font-size: 1.9rem;}
    #gNav li a span {top:31px;}
}
@media screen and (min-width: 1000px) { 
    #gNav ul {width: 1180px;}
    #gNav ul:before {width: 150%;}
    #gNav li a {}
    #gNav li a span {}
}
@media screen and (min-width: 1100px) { 
    #gNav li a {padding:0 1.5rem 0 3rem;}
    #gNav li a span {left: 0.6rem;top: 30px;}
    #gNav ul { width: 1240px;}
}
@media screen and (min-width: 1200px) { 
    #gNav li a {padding: 0 1.8rem 0 2.6rem;font-size: 2rem;}
    #gNav ul { width: 1240px;}
}
/* iPad横 */
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
    #gNav li a { font-size: 1.6rem;}
}
@media screen and (max-width: 900px) { 
/*	.sticky-wrapper {height:80px!important;}*/
}
/*▲ 2016.10.10 均等割りに変更 */

/*▲ 2016.10.09 PC用グローバルメニュー追加 */

/*▼ 2017.07.06 折り返し禁止 */
#gNav li a { white-space: nowrap; }
/*▲ 2017.07.06 折り返し禁止 */

/* --------------------------------------------------
 top
--------------------------------------------------- */
/* about */
.about .video_wrapper {position: absolute;top: 76px;right: 10px;max-width: 599px;width: 49%;}
.about .video_wrapper .video.width_640{
    max-width: 100%;
}
.about section:before { display: none }
@media screen and (max-width: 767px) { 
    .about .video_wrapper {position: relative;top: 0;right: 0;width: 100%;margin: 20px 0 0;max-width: none;}
}
/* info */
.info .set { max-width: 1200px; margin: 0 auto; width: 90%;}
@media screen and (min-width: 1200px) { 
.info .btn {right:2%;}
}

/* method */
@media screen and (max-width: 767px) { 
    .method h2 span { text-align: center }
}
/* ordermade */
@media screen and (max-width: 767px) { 
    .ordermade .box figure { bottom: 10px; width: 129px; }
}
@media screen and (device-width:1024px) and (device-height: 1366px) and (orientation:landscape){
	/* iPad Pro 横向き */
	.dream .btn{
		position: static;
		margin-top: 2em;
	}
}
/* dream */
@media screen and (max-width: 767px) { 
    .dream .btn { position: relative; top: inherit; right: inherit; bottom: inherit; left: inherit; }
    .dream figure { margin-top: 20px }
}
/* --------------------------------------------------
 article モジュール
--------------------------------------------------- */
/* ブロックテンプレート */
@media screen and (max-width: 767px) { 
    .tpl3 .list.marl li {
}
}
@media screen and (max-width: 350px) { 
    .tpl3 .list.marl li { margin-left: 0 }
}
/* 注釈：お問い合わせに関する注意事項 */
@media screen and (max-width: 767px) { 
    .note2:after { display: none }
    .flow section .plan li { display: table }
    .flow .btn .padr { padding-right: 32px }
}

/* フォーム */
input[name=zip1] + span.wpcf7-not-valid-tip {display:none}
.form .autoinput {/* background-color: #f7f7ab; */}
@media screen and (max-width: 1000px) { 
    .form .form-inner {padding-left: 15px;padding-right: 15px;box-sizing: border-box;}
}
@media screen and (min-width: 768px) { 
    /* PC用レイアウト変更 */
    .form { padding: 0 0 40px }
    .form form {}
    .form h3 { margin-bottom: 6px; position: relative; font-size: 1.5rem; padding: 7px 0 6px 40px; }
    .form h3:before { content: attr(title); width: 32px; height: 32px; position: absolute; top: -2px; left: 0; background: #f7a119; color: #fff; text-align: center; line-height: 32px; }
    .form h5 {font-size: 1.7rem;padding: 16px 0 8px;}
    .form h5 span { font-size: 1.3rem;}
    .form p { font-size: 1.3rem }
    .form .form-inner {margin-top: 30px;}
    .form .form-inner span.date { font-size: 1.5rem; vertical-align: initial; }
    .form .ui-datepicker-trigger { width: 32px }
    button, input, optgroup, select, textarea{font-size:2rem;}
    input[type="text"] {/* font-size: 1.2rem; *//* font-size: 2rem; *//* height: 24px; *//* line-height: 20px; *//* padding: 0 10px; *//* padding: .5em; */}
    input[type="email"] {/* font-size: 1.2rem; *//* font-size: 2rem; *//* height: 24px; *//* line-height: 20px; *//* padding: 0 10px; */}
    input[type="tel"] {/* padding: 0 10px; *//* font-size: 2rem; *//* font-size: 1.2rem; *//* height: 24px; *//* line-height: 20px; */}
    .wrap-select select {/* background-size: 24px; *//* line-height: 20px; *//* height: 24px; *//* padding: 0 40px 0 5px; *//* font-size: 1.2rem; */}
    .form div + span { font-size: 1.3rem; vertical-align: initial; margin-bottom: 5px;}
    .form .submit { margin: 40px auto 0 }
    .form .wpcf7-not-valid-tip { font-size: 1.2rem; margin: 0;}
    .form input[type=submit].wpcf7-submit { background-size: 36px; padding: 0 80px 0 130px; height: 60px; line-height: 60px; background-position: 73px 56%; font-size: 2.5rem;}
    .wpcf7-response-output { font-size: 1.5rem;}
}
@media screen and (max-width: 767px){
    .form .ui-datepicker-trigger { width:40px }
    .form .form-inner span.date {margin: 0 10px;line-height: 28px;}
    .form .wpcf7-not-valid-tip { margin: 0;}
}

/* 自動見積 */
.fee .instructor { display: none; } /* 講師選択は非表示 */
@media screen and (min-width: 768px) { 
    /* PC用レイアウト変更 */
    .fee { display: block!important; }
    .fee h3 { margin: 0 0 10px; font-size: 1.5rem;}
    .fee .wrap-select { margin: 0 0 20px;}
    .fee div + span { margin: 0 10px 25px; font-size: 1.5rem;}
    .fee select { font-size: 1.3rem; height: 34px; padding: 0 40px 0 6px; line-height: 1.3rem; background-size: 34px;}
    .fee table { margin: 0 0 0; font-size: 1.2rem; border: 2px solid #975a7b;}
    .fee thead th { padding: 5px; border-width: 2px; font-weight: normal;}
    .fee tbody th { padding: 8px; border-width: 2px;}
    .fee tbody td { padding: 8px; border-width: 2px;}
    .fee p { font-size: 1.3rem;}
}
@media screen and (max-width: 767px) { 
    .fee { display: block; }
    .fee .sprow { margin-bottom: 20px;}
    .form .form-inner .fee thead th, .form .form-inner .fee tbody th, .form .form-inner .fee tbody td { display: table-cell; padding: 5px; width: inherit;}
}
/* --------------------------------------------------
 convention
--------------------------------------------------- */
.convention .form h3 { border: none; color: inherit; }
.convention .main h3 { position: relative; margin: 25px 0 0; padding: 10px 18px; background: url(../img/bg_2.gif) repeat-x top left; font-weight: bold; font-size: 2.4rem; line-height: 2.5; background-size: 20px 9px; }
.convention .main h3:before { content: none }
.convention .main h3:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 9px; background: url(../img/bg_2.gif) repeat-x bottom center; content: ""; background-size: 20px 9px; }
.convention .form h5 { font-size: 1.7rem; padding: 35px 0 8px; font-weight: bold; }
.convention .form input[type="submit"] {margin: 40px auto 0; display: block;}

@media screen and (min-width: 768px) { 
	.convention .form form {padding:0 15px}
	.convention .form input[type="text"],.convention input[type="email"] { font-size: 1.4rem; height: 30px; line-height: 30px;}
	.convention .form p { font-size: 1.7rem;margin-top: 0;}
	.convention .textarea { font-size: 1.4rem; padding: 10px 10px;}
}
@media screen and (max-width: 767px) { 
	.convention .form h3 { font-size: 1.7rem; line-height: 2; font-weight: normal; }
}

/* --------------------------------------------------
 apply
--------------------------------------------------- */
/* フォーム */

.apply .form * {
    box-sizing: border-box;
}
.apply .form .inner {
    padding-top: 2em;
}

@media screen and (min-width: 768px) { 
    /* PC用レイアウト変更 */
    .apply .row.first { margin-top: 30px;}
    .apply .row.second { margin-top: 30px;}
    .apply .wrap-select select[name=lesson] { width: 350px;}
    .apply .wpcf7-list-item {margin-left: 0;display: inline-block;/* margin-bottom: 10px; */}
    /* ▼2016.10.06 レイアウト変更 */
    .apply .wpcf7-radio label {/* height: 34px; *//* line-height: 34px; */padding: 0px 0 0 30px;/* margin: 0 10px 0 0; */}
    .apply .wpcf7-radio label:before { width: 28px; height: 28px; margin: -14px 0 0; border-width: 2px;}
    .apply .wpcf7-radio label:after { width: 16px; height: 9px; margin-top: -6px; border-width: 2px; left: 6px;}
    /* ▲2016.10.06 レイアウト変更 */
    .apply .form-inner .ttl-t4 { margin: 24px 0 0; padding: 6px 0 6px 25px; font-size: 1.3rem; font-weight: normal;}
    .apply .form-inner .ttl-t4:before { width: 16px; height: 16px; margin: -8px 0 0; left: 5px;}
    .apply .form-inner .ttl-t4:after { left: 11px; margin: -3px 0 0; border-width: 3px 0 3px 5px;}
    .apply .form p {margin: 16px 0 0;}
    .apply .form .strong { color: #ff876c; font-weight: bold;}
    .apply .form .underline { text-decoration: underline;}
    .apply input[name=zip1] {width: 60px;}
    .apply input[name=zip2] {width: 80px;}
    /* ▼2016.10.06 レイアウト変更 */
    .apply textarea[name='your-message'] {margin: 16px 0 0;/* font-size: 1.2rem; *//* padding: 6px 6px; */height: 260px;}
    .apply .form .block1 {/* width: 570px; *//* margin-right: 90px; */}
    .apply .form .block2 { width: 570px; padding-top: 15px;}
    .apply .row.second {margin-top:60px;}
    .apply .form .block3 { width: 570px; margin-right: 90px;}
    .apply .form .block4 { width: 570px; }
    .apply .form h3 {font-size: 2.2rem;padding: 1em 0 0 2.5em;line-height: 44px;}
    .apply .form h3:before {width: 2em;height: 2em;line-height: 2em;top: auto;font-size: 2.3rem;}
    .apply .form h5 {/* font-size: 1.7rem; *//* padding: 20px 0 8px; */}
    .apply .wrap-select select {/* background-size: 34px; *//* line-height: 34px; *//* height: 34px; *//* font-size: 1.2rem; *//* padding: 0 40px 0 10px; */}
    .apply .wrap-select select[name="lesson"] { width: 100%;}
    .apply .form-inner .ttl-t4 { font-size: 100%;}
    .apply input[type="text"] {/* font-size: 1.4rem; *//* height: 34px; *//* line-height: 34px; */}
    .apply input[name="your-name"] {/* width: 250px; */}
    .apply input[type="email"] {/* font-size: 1.4rem; *//* height: 34px; *//* line-height: 34px; */}
    .apply input[type="tel"] {/* font-size: 1.4rem; *//* height: 34px; *//* line-height: 34px; *//* width: 250px; */}
    .apply .wrap-select select {/* background-size: 34px; *//* line-height: 1.4rem; *//* height: 34px; *//* font-size: 1.4rem; *//* padding: 0 40px 0 10px; */}
    .apply .wrap-select select[name="addr1"] { width: 155px;}
    .apply .wrap-select select[name="pay"] {/* width: 160px; */}
    .apply .wrap-select select[name="doc"] { width: 160px;}
    .apply .wrap-select span { display: block;}
    .apply .form h3[title="04"] {/* margin-top:35px; */}
    .apply .form .submit { margin: 110px auto 70px;}
    /* ▲2016.10.06 レイアウト変更 */
}
@media screen and (min-width:768px) and (max-width: 1200px) { 
	.apply .form .form-inner {    padding: 0 15px;}
	.apply .form .block1 {/* width: 49%; *//* margin-right: 2%; */}
	.apply .form .block2{width: 49%;}
	.apply .form .block3 {    width: 49%;    margin-right: 2%;}
	.apply .form .block4{width: 49%;}
}
@media screen and (min-width:768px) and (max-width: 968px) { 
	.apply .form .block3 .container > .row:nth-child(5) > div {width: 100%;}
}
@media screen and (max-width: 767px) { 
    .apply .form-inner > .container > .row > div {margin-top: 40px;}
    .apply input[name=zip1] {width: 70px;}
    .apply input[name=zip2] {width: 80px;}
}
/* --------------------------------------------------
 contact
--------------------------------------------------- */
/* フォーム */
@media screen and (min-width: 768px) {
	.contact .form .form-inner {padding:0 10px;}
	.contact .form h3 {font-size: 2.2rem; padding: 0 0 0 54px; line-height: 44px;}
	.contact .form h3:before {width: 44px; height: 44px; line-height: 44px; top: 0px; font-size: 2.3rem;}
	.contact .form h5 {/* font-size: 1.7rem; *//* padding: 20px 0 8px; */}
	.contact input[type="text"],
	.contact input[type="email"],
	.contact input[type="tel"] {/* height: 34px; *//* line-height: 34px; *//* font-size: inherit; */}
	.contact textarea {/* padding: 5px 10px; */}
}
/* --------------------------------------------------
 course
--------------------------------------------------- */
/* 一覧 */
.course .block1 #master h3 { background: #e82c2b }
.course .block1 #beginner h3 { background: #a7c836 }
.course .block1 #advance h3 { background: #477bde }
.course .block1 #synth h3 { background: #846a95 }
.course .block1 #mix-mastering h3 { background: #63adcf }
.course .block1 #music-theory h3 { background: #ff6c6c }
.course .block1 #custom h3 { background: #dec36f }

/*▼2016.10.08 コース一覧のレイアウト変更 */
@media screen and (min-width: 768px) { 
    .course .block1 section {width: 42.4%;display: inline-block;vertical-align: top;}
    .course .block1 #beginner,.course .block1 #synth,.course .block1 #music-theory {margin-right: 2.4%;}
    .course .block1 .box { padding: 15px; border: 5px solid #e82c2b;}
    .course .block1 .box h2 .num { display: none }
    .course .block1 .box h2 .ttl { padding: 8px 0 8px 8px; font-size: 2rem; }
    .course .block1 .box h2 .ttl span { margin: 0 0 3px; font-size: 1.2rem; }
    .course .block1 .box h3 {font-size: 1.6rem;color: #fff; :padding: 10pxmax-height: 48px;display: table-cell;vertical-align: middle;width: 458px;text-align: center;}
    .course .block1 .box p { padding: 0 5px; font-weight: normal; font-size: 1.5rem; margin: 20px 0 5px; min-height:7.3em;}
    .course .block1 #custom .box p { min-height:9.3em;}
    .course .block1 .set { margin: 15px 0 0; padding: 0 5px; }
    .course .block1 .set figure { margin: 15px 0 20px 0; padding: 5px; width: 35%; }
    .course .block1 .set figure img { max-width: 100%; width: auto; height: auto; }
    .course .block1 .set ul { margin: 15px 0 0 40%; padding: 10px 2px; }
    .course .block1 .set li { margin: 10px 0 0; font-size: 1.5rem; display: block; }
    .course .block1 .set li:first-child { margin: 0 }
    .course .block1 .set li .price { margin: 0 10px 0 0 }
    .course .block1 .set li span { width: 70px }
    .course .block1 .set li span.unit_price { font-weight: bold; font-size: 1.3rem; line-height: 1.3; vertical-align: middle; background: #e82c2b; }
    .course .block1 .set p { margin: 20px 0 0; padding: 0; border: none; font-size: 1.3rem; padding-left: 40%; }
    .course .block1 .set p span { display: block; margin: 5px 0 0; font-size: 1.2rem; }
    .course .block1 .set div { margin: 20px 0 0; padding: 5px 0; border: 2px solid #e82c2b; font-size: 1.8rem; clear: both; }
    .course .block1 .btn1 a { padding: 20px 0; height: auto; font-size: 1.5rem; line-height: .75; }
    .course .block1 .one { margin-right: 0; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
    .course .block1 .one .box p { min-height:initial;}
    .course .block1 .one .set { margin: 0; padding: 0; }
    .course .block1 .one .set > .first {float: right;width: 70%;max-width: 690px;clear: none;margin: 0 0 0 2%;padding: 0;border: none;}
    .course .block1 .one .box h2 { border: none }
    .course .block1 .one .box h2 .num { display: none }
    .course .block1 .one .box h2 .ttl { border: none; font-size: 3.8rem; }
    .course .block1 .one .box h3 {font-size: 2.5rem;margin-top: 0;width: 100%;min-height: 60px;text-align: center;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 10px 0;}
    .course .block1 .one .content { border: none }
    .course .block1 .one .content .first { border: none; float: left; margin: 0; clear: none; width: 32%; }
    .course .block1 .one .content .first figure { margin: 0 4% 4% 0; padding: 0; display: inline-block; width: 46%; clear: none; }
    .course .block1 .one .content .first figure:nth-child(even) { margin-right: 0 }
    .course .block1 .one .content .second { float: left; margin: 0; clear: none; width: 68%; border: none; text-align: left; padding-left: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; }
    .course .block1 .one .set ul { margin: 0; width: 64%; }
    .course .block1 .one .set li { color: #404040 }
    .course .block1 .one .set p { padding-left: 0 }
    .course .block1 .one .set div.price { font-size: 1.5rem }
    .course .block1 .one .discount { position: absolute; top: 34%; right: 2%; color: #404040; border: none; font-size: 1.5rem; background: url(../img/course/img_price.png) no-repeat 0 10px; background-size: 100%; width: 220px; height: 220px; }
    .course .block1 .one .set > .second {float: left;width: 28%;max-width: 360px;clear: none;margin: 0;padding: 0;border: none;}
    .course .block1 .one .set > .second figure { margin: 0; padding: 0; width: 100%; border: none; }
    .course .block1 .one .set + p { margin-top: 0px }
    .course .block3 { padding-bottom: 0 }
    .course .block3 p { font-size: 1.5rem; margin: 0; padding: 15px 0; }
}
@media screen and (max-width: 767px) { 
    .course .block1 .box h2 .num { display:none; }
    .course .block1 .box h3 { margin: 10px 0;padding: 10px; color: #fff;}
    .course .block1 .box p { margin: 20px 0 5px;font-size: 1.3rem;}
    .course .block1 .set { margin: 0px 0 0; }
    .course .block1 .set figure { margin-bottom: 20px }
    .course .block1 .set li { display: block }
    .course .block1 .set li span { width:71px;}
    .course .block1 .set li span.unit_price {font-weight: bold; font-size: 1.3rem; line-height: 1.3; vertical-align: middle; background: #e82c2b; }
    .course .block1 .set p { padding-left: 40% }
    .course .block1 .set .price { clear: both }
    .course .block1 .one .set > .first { margin: 0; border: none; padding: 0; text-align: left; font-weight: normal; }
    .course .block1 .one .box h2 { margin-left: -5px; margin-right: -5px; }
    .course .block1 .one .box h2 .ttl { border: none }
    .course .block1 .one .content { border: none; margin: 0; padding: 0; }
    .course .block1 .one .content .first { margin: 0 5% 20px 0; padding: 0; border: none; width: 36%; float: left; }
    .course .block1 .one .content .first figure { margin: 0 4% 4% 0; padding: 0; display: inline-block; width: 46%; clear: none; }
    .course .block1 .one .content .first figure:nth-child(even) { margin-right: 0 }
    .course .block1 .one .content .second { margin: 0; padding: 0; border: none; text-align: left; left: 0; padding-left: 40%; width: 98%; }
    .course .block1 .one .set ul { margin-left: 0 }
    .course .block1 .one .set li { color: #404040 }
    .course .block1 .one .discount { background: #e82c2b; color: #f5ed49; font-size: 2.2rem; }
    .course .block1 .one .set div.price { margin-top: 15px }
    .course .block1 .one .set > .second { display: none }
    .course .block3 p { margin: 0; padding: 15px 15px;}
}
@media screen and (max-width: 450px) { 
    .course .block1 .one .discount { background: #e82c2b; color: #f5ed49; }
}
@media screen and (max-width: 400px) { 
    .course .block1 .set li span { font-size: 1.8rem }
    .course .block1 .set p { padding-left: 0 }
    .course .block1 .set li span { font-size: 1.3rem; width: 58px; }
    .course .block1 .one .set p { margin-left: -66% }
}
@media screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape){
    .course .block1 .one .box h3{font-size:2.3rem;}
}

/*▲2016.10.08 コース一覧のレイアウト変更 */

/* 詳細 */
/*▼2016.09.29 コースごとのカラー統一 */
.course-detail.course-beginner .block2 .bg h3 { background: #a7c836 }
.course-detail.course-beginner .block4 { background: #a7c836 }
.course-detail.course-beginner .block5 .tab { border-color: #8BC34A }
.course-detail.course-beginner .block5 .tab li { border-color: #8BC34A; background: #8BC34A; color: #e7fd0d; }
.course-detail.course-beginner .block5 .tab .selected { background: #a7c836; color: #fff; }
.course-detail.course-advance .block2 .bg h3 { background: #477bde }
.course-detail.course-advance .block4 { background: #477bde }
.course-detail.course-advance .block5 .tab { border-color: #417ff5 }
.course-detail.course-advance .block5 .tab li { border-color: #2196F3; background: #5c8dea; color: #a1bff9; }
.course-detail.course-advance .block5 .tab .selected { background: #477bde; color: #fff; }
.course-detail.course-synth .block2 .bg h3 { background: #846a95 }
.course-detail.course-synth .block4 { background: #846a95 }
.course-detail.course-synth .block5 .tab { border-color: #bb97d2 }
.course-detail.course-synth .block5 .tab li { border-color: #9575CD; background: #ab96b9; color: #d2bde0; }
.course-detail.course-synth .block5 .tab .selected { background: #846a95; color: #fff; }
.course-detail.course-mix-mastering .block2 .bg h3 { background: #63adcf }
.course-detail.course-mix-mastering .block4 { background: #63adcf }
.course-detail.course-mix-mastering .block5 .tab { border-color: #3fa9f5 }
.course-detail.course-mix-mastering .block5 .tab li { border-color: #63adcf; background: #67a2bd; color: #9fd3ea; }
.course-detail.course-mix-mastering .block5 .tab .selected { background: #63adcf; color: #fff; }
.course-detail.course-music-theory .block2 .bg h3 { background: #ff6c6c }
.course-detail.course-music-theory .block4 { background: #ff6c6c }
.course-detail.course-music-theory .block5 .tab { border-color: #e87d7d }
.course-detail.course-music-theory .block5 .tab li { border-color: #e87272; background: #d47474; color: #fbbaba; }
.course-detail.course-music-theory .block5 .tab .selected { background: #ff6c6c; color: #fff; }
.course-detail.course-custom .block2 .bg h3 { background: #dec36f }
.course-detail.course-custom .block4 { background: #dec36f }
.course-detail.course-custom .block5 .tab { border-color: #e87d7d }
.course-detail.course-custom .block5 .tab li { border-color: #e87272; background: #d47474; color: #fbbaba; }
.course-detail.course-custom .block5 .tab .selected { background: #dec36f; color: #fff; }
/*▲2016.09.29 コースごとのカラー統一 */

@media screen and (min-width: 768px) { 
    .course-detail .note5 { margin-bottom: 60px }
    .course-detail .block6 { background: #d9edfd; text-align: center; }
    .course-detail .block6 p { font-size: 1.5rem; margin: 0; padding: 15px 0; font-weight: bold; }
}
@media screen and (max-width: 767px) { 
    .course-detail .block2 .bg .tpl1 figure { margin-bottom: 25px }
    .course-detail .note5 { margin-bottom: 20px }
    .course-detail .block2 .btn { clear: both }
    .course-detail .block6 { background: #d9edfd }
    .course-detail .block6 p { font-size: 1.4rem; line-height: 1.5; padding: 15px 15px; }
}
/* --------------------------------------------------
 flow
--------------------------------------------------- */
@media screen and (max-width: 767px) { 
    .flow section .btn-t1.padr { clear: both }
}
/* --------------------------------------------------
 instructor
--------------------------------------------------- */
/* 一覧 */
@media screen and (max-width: 767px) { 
    .instructor .snav { padding: 20px 30px }
    .instructor .snav .inner:before { bottom: -22px }
    .instructor .block .btn { clear: both }
}
/* --------------------------------------------------
 news
--------------------------------------------------- */
/* 詳細 */
@media screen and (min-width: 768px) and (max-width: 1200px){ 
	.course [class^='block'] .btn1 a span { max-width: 66%; line-height: 1.5;}
}
@media screen and (max-width: 767px) { 
    .news-detail .detail { word-break: break-all }
}
/* --------------------------------------------------
 qa
--------------------------------------------------- */
/* qa */
@media screen and (max-width: 767px){
  .qa .snav li{display: table;margin: 0;}
}
/* --------------------------------------------------
 trial
--------------------------------------------------- */
.trial input[type="text"].st.wpcf7-not-valid { background: pink;}
.trial input[type="text"].st.wpcf7-not-valid + .wpcf7-not-valid-tip { display: none;}

@media screen and (min-width: 768px) { 
    /* PC用レイアウト変更 */
    .trial .prepare_wrapper {
    letter-spacing: -0.4rem;
    padding: 0 15px;
}
    .trial .prepare_wrapper:after {content:''; display:table; float:none;}
    .trial .block2 .tpl3 {width: 49%;padding: 30px;min-height: 320px;float: left;-webkit-ox-sizing: border-box;box-sizing: border-box;letter-spacing: normal;}
    .trial .block2 .tpl3:nth-child(odd){margin-right: 2%;}
    .trial .block2 .tpl3 figure {width: 18%;border-width: 10px;}
    .trial .block2 .tpl3 figure img { width: 100% }
    .trial .block2 .tpl3 h3 {margin-left: 25%;background-size: 7%;padding: 0 0 2% 7%;font-size: 2.4rem;}
    .trial .block2 .tpl3 p { margin: 3% 0 0 0; font-size: 1.8rem; }
    .trial .block2 .tpl3 h3 + p {margin-left: 25%;line-height: 1.3;}
    .trial .block2 .tpl3 h3 + p:after { display: block; clear: both; content: ""; }
    .trial .block2 .tpl3 .list { margin: 0 0 0 0 }
    .trial .block2 .tpl3 .list li {font-size: 1.8rem;background-size: 1.8rem;/* height: auto; */}
    .trial .block2 .tpl3 .list li:first-child { margin: 4% 0 0 0 }
    .trial .form table {max-width: 540px;width: 44%;margin: 0 10% 0 0;display: inline-block;vertical-align: top;box-sizing: border-box;}
    .trial .form table:nth-child(odd) { margin-right: 0;}
    .trial .form th {display: block;max-width: 540px;}
    .trial .form td { display: block;width: 540px;padding: 0; }
    .trial .form h3 {font-size: 2.2rem; padding: 0 0 0 54px; line-height: 44px;}
    .trial .form h3:before { width: 44px; height: 44px; line-height: 44px; top: 0px; font-size: 2.3rem;}
    .trial .form h5 { font-size: 1.7rem; padding: 20px 0 8px;}
    .trial .form td p { font-size: 1.6rem;}
    .trial input[type="text"] { font-size: 1.4rem; height: 34px; line-height: 34px;}
    .trial input[name="your-name"] { width: 250px;}
    .trial input[type="email"] { font-size: 1.4rem; height: 34px; line-height: 34px; width:70%}
    .trial input[type="tel"] { font-size: 1.4rem; height: 34px; line-height: 34px; width: 250px;}
    .trial input[name="skype"] { width: 170px;}
    .trial .form .env_wrapper {}
    .trial .form .env_wrapper:after {display: block; clear: both; content: "";}
    .trial .form .env_wrapper > div {float: left;margin-right: 30px;}
    .trial .wrap-select select { background-size: 34px; line-height:1.4rem; height: 34px; font-size: 1.4rem; padding: 0 40px 0 10px;}
    .trial .wrap-select select[name="pcsystem"] { width: 170px;}
    .trial .wrap-select select[name="daw"] { width: 170px;}
    .trial .wrap-select span {display: block;}
    .trial .form .form-inner span.date { font-size: 1.6rem;}
    .trial input[type="text"].st { width: 36px; text-align: center; padding: 0; }
    .trial .form .ui-datepicker-trigger { width: 34px;}
    .trial .form div + span { font-size: 1.6rem;}
    .trial .form .submit { margin: 60px auto 80px;}
}

/* --------------------------------------------------
 system
--------------------------------------------------- */
/*▼ 2016.09.29「レッスンのご受講にご用意いただくものを2カラムに変更」*/
@media screen and (min-width: 768px) { 
    /* PC用レイアウト変更 */
    .system .block2 .prepare_wrapper .tpl3 {width: 49%;padding: 30px 3%;display: inline-block;vertical-align: top;min-height: 260px;box-sizing: border-box;letter-spacing: normal;}
    .system .block2 .prepare_wrapper .tpl3:nth-child(odd) {margin-right: 2%;}
    .system .block2 .prepare_wrapper .tpl3 figure { width: 19%; border-width: 10px; }
    .system .block2 .prepare_wrapper .tpl3 figure img { width: 100% }
    .system .block2 .prepare_wrapper .tpl3 h3 { margin-left: 25%; background-size: 7%; padding: 0 0 2% 7%; font-size: 2.4rem; }
    .system .block2 .prepare_wrapper .tpl3 p { margin: 3% 0 0 0; font-size: 1.8rem; }
    .system .block2 .prepare_wrapper .tpl3 h3 + p { margin-left: 25%; line-height: 1.3; }
    .system .block2 .prepare_wrapper .tpl3 h3 + p:after { display: block; clear: both; content: ""; }
    .system .block2 .prepare_wrapper .tpl3 .list { margin: 0 0 0 0 }
    .system .block2 .prepare_wrapper .tpl3 .list li {font-size: 1.8rem;background-size: 1.8rem;/* height: auto; */}
    .system .block2 .prepare_wrapper .tpl3 .list li:first-child { margin: 4% 0 0 0 }
}
/*▲ 2016.09.29「レッスンのご受講にご用意いただくものを2カラムに変更」*/

/* 初期表示の縮小(zoom)に伴い、カレンダーの表示位置を中央に固定 */
@media screen and (min-width: 768px) { 
	#ui-datepicker-div{top: 50%!important; left: 50%!important; transform: translate(-50%,-50%); position: fixed!important;}
}

/* iPhoneでフォーム入力時に自動的に拡大されるのを回避 */
@media screen and (max-width: 767px){
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	.wrap-select select,
	textarea 
	{font-size:16px;/* line-height: 28px; *//* line-height: initial; *//* padding: 0.5em; *//* height: auto; */}
}

/* --------------------------------------------------
 スクール掲載LP
--------------------------------------------------- */
/*▼ 2017.06.04 office-ing ▼*/
.add-school #gNav {
    display: none;
}

.add-school article header {
    display: none;
}

.add-school .main {
    padding-top: 0;
}

.add-school .main section {
}

.add-school .main section .wrap {
    position: relative;
}

.add-school .main section h2 {
    background: url(https://sleepfreaks.co.jp/cms/wp-content/themes/sleepfreaks_corp/img/add-school/bg-h2.jpg) no-repeat;
    height: 53px;
    text-align: center;
    line-height: 53px;
    font-weight: bold;
    font-size: 130%;
    margin-top: 30px;
    margin-bottom: 20px;
    background-size: 1200px 53px;
    background-size: cover;
}

.add-school .main section h3 {
    color: #1886c6;
    text-align: center;
    font-weight: bold;
    font-size: 170%;
    padding: 30px 0;
}

.add-school .main section h3.seo {
    margin: 0 auto;
}

.add-school .main section h3.seo img {
    display: inline-block;
    vertical-align: top;
    margin-right: 1em;
    margin-top: -0.3em;
    width: 10vw;
    max-width: 152px;
    min-width: 98px;
}

.add-school .main section img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
}

.add-school .main a.btn {
    color: #fff;
    text-decoration: none;
    font-size: 70%;
    background-color: rgb(230,70,70);
    border: 2px solid rgb(173,53,53);
    display: block;
    text-align: center;
    padding: 0.7em 2em 0.8em 3em;
    box-sizing: border-box;
    position: relative;
}

.add-school .main a.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 1em;
    left: 50%;
    width: 1em;
    height: 1em;
    border: 2px solid #fff;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.add-school .main a.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 1.4em;
    left: 50%;
    border: 0.35em solid transparent;
    border-left: 0.6em solid #fff;
    border-right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.add-school .block1 {
    width: 100%;
    text-align: center;
    background-color: #5bbab4;
}

.add-school .block1 img {
    max-width: 1200px;
    width: 100%;
    height: auto;
}

.add-school .block2 {
    background-color: rgb(217,237,253);
    padding-bottom: 30px;
}

.add-school .block2 img {
    display: block;
    max-width: 1152px;
    width: 100%;
    height: auto;
}

.add-school .block3 {
}

.add-school .block3 img {
    max-width: 1151px;
}

.add-school .main .block3 a.btn {
    position: absolute;
    top: 340px;
    left: 57px;
}

.add-school .main .block3 a.btn::before {
    -webkit-transform: translate(-7em,-50%);
    transform: translate(-7em,-50%);
}

.add-school .main .block3 a.btn::after {
    -webkit-transform: translate(-6.6em,-50%);
    transform: translate(-6.6em,-50%);
}

.add-school .block4 {
    padding-bottom: 30px;
}

.add-school .block4 img {
/*    max-width: 1156px;*/
}

.add-school .block5 {
    background: url(../img/bg.gif) top center;
    padding-top: 20px;
    padding-bottom: 30px;
}

.add-school .block5 .wrap img {
    max-width: 1158px;
}

.add-school .main .block5 h2 {
    margin-top: 0;
}

.add-school .block6 .wrap {
    border: 1px solid #333;
    background-color: rgb(253,245,221);
    text-align: center;
    width: 940px;
    margin: 0 auto;
    padding: 30px 170px 50px;
    box-sizing: border-box;
}

.add-school .main .block6 h2 {
    margin-bottom: 0;
}

.add-school .main .block6 .desc1 {
    color: rgb(0,61,86);
    text-decoration: none;
    font-size: 200%;
    font-weight: bold;
    display: inline-block;
    position: relative;
    background: linear-gradient(transparent 60%, #ffd766 60%);
    margin-bottom: 0.5em;
}

.add-school .main .block6 .desc2 {
    color: #000;
    text-decoration: none;
    font-size: 130%;
    font-weight: bold;
    margin-bottom: 0.5em;
    display: inline-block;
}

.add-school .main .block6 small {
    font-size: 75%;
}

.add-school .main .block6 .desc3 {
    display: block;
    color: #fff;
    background-color: rgb(35,174,165);
    padding: 0.3em 1em 0.5em 1em;
    font-weight: bold;
    margin: 1.5em auto 1em;
}

.add-school .main .block7 h2 {
    margin-bottom: 0;
}

.add-school .block7 img {
    max-width: 1157px;
}

.add-school .main .block7 a.contact-url {
    color: #000;
    position: absolute;
    bottom: 2%;
    left: 48%;
}

.add-school .main .block7 a.btn {
    position: absolute;
    top: 80px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 600px;
}

@media screen and (max-width: 1000px) {
    .add-school .main .block3 a.btn {
        top: 73%;
        left: 3%;
        font-size: 60%;
    }

    .add-school .main .block7 a.btn {
        top: 10%;
    }
}

.add-school .main .block7 a.btn::before {
    -webkit-transform: translate(-9em,-50%);
    transform: translate(-9em,-50%);
}

.add-school .main .block7 a.btn::after {
    -webkit-transform: translate(-8.6em,-50%);
    transform: translate(-8.6em,-50%);
}

.add-school .main .block8 a.btn {
    width: 1000px;
    margin: 1em auto;
    font-size: 170%;
}

.add-school .main .block8 a.btn::before {
    -webkit-transform: translate(-9em,-50%);
    transform: translate(-9em,-50%);
}

.add-school .main .block8 a.btn::after {
    -webkit-transform: translate(-8.7em,-50%);
    transform: translate(-8.7em,-50%);
}

.add-school .fnav {
    display: none;
}

@media screen and (max-width: 767px) {
    .add-school .main section h2 {
        background-position: center;
    }

    .add-school .block1 img {
    }

    .add-school .main section h3.seo {
        font-size: 5vw;
    }

    .add-school .main section h3.seo img {
        margin-top: 0;
        min-width: initial;
    }

    .add-school .block6 .wrap {
        width: 100%;
        padding: 30px 0;
    }

    .add-school .main .block6 .desc1 {
        font-size: 150%;
    }

    .add-school .main .block7 a.btn {
        width: 60%;
        padding: 0.3em 2em 0.4em 3em;
    }

    .add-school .main .block7 a.contact-url {
        font-size: 1vw;
    }

    .add-school .main .block8 a.btn {
        width: 100%;
        font-size: 110%;
    }
}

@media screen and (max-width: 480px) {
    .add-school .main .block7 a.contact-url {
        left: 43%;
    }
}


/* --------------------------------------------------
 通学DTMスクール 掲載お申し込みフォーム
--------------------------------------------------- */

/* 2カラムフォームの共通スタイル */
@media screen and (min-width: 768px) {
    .form.two table {
        max-width: 540px;
        width: 44%;
        margin: 0 10% 0 0;
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
    }

    .form.two table:nth-child(odd) {
        margin-right: 0;
    }

    .form.two th {
        display: block;
        max-width: 540px;
    }

    .form.two h3 {
        font-size: 2.2rem;
        padding: 0 0 0 54px;
        line-height: 44px;
    }

    .form.two h3:before {
        width: 44px;
        height: 44px;
        line-height: 44px;
        top: 0px;
        font-size: 2.3rem;
    }

    .form.two td {
        display: block;
        width: 540px;
        padding: 0;
    }

    .form.two h5 {
        font-size: 1.7rem;
        padding: 20px 0 8px;
    }

    .form.two input[type="text"] {
        font-size: 1.4rem;
        height: 34px;
        line-height: 34px;
    }

    .form.two input[type="email"] {
        font-size: 1.4rem;
        height: 34px;
        line-height: 34px;
    }

    .form.two input[type="tel"] {
        font-size: 1.4rem;
        height: 34px;
        line-height: 34px;
    }

    .form.two input[type="text"].st {
        width: 36px;
        text-align: center;
        padding: 0;
    }

    .form.two .form-inner span.date {
        font-size: 1.6rem;
    }

    .form.two .ui-datepicker-trigger {
        width: 34px;
    }

    .form.two div + span {
        font-size: 1.6rem;
    }
}

/* 通学DTMスクール 掲載お申し込みフォーム */
@media screen and (min-width: 768px) {
    .school-apply .form input[type="text"] {
	    width: 70%;
    }
    .school-apply .form input[type="email"] {
	    width: 70%;
    }
    .school-apply .form input[type="tel"] {
	    width: 250px;
    }
}
/*▲ 2017.06.04 office-ing ▲*/
/*▲ office-ing カスタマイズここまで */

/* ▼ 2026.07.29 トップページ「完全オーダーメイド」コースアイコン
   シンセ／音楽理論／カスタムの3コースを削除し4コースに。
   4つを1行に均等配置し、アイコンを122px→225pxへ拡大（ミックスコースのみ専用画像 img_mix_off.png）。 */
.ordermade ul { display: flex; flex-wrap: wrap; justify-content: center; }
.ordermade li { width: 25%; box-sizing: border-box; }
.ordermade li img { width: 100%; max-width: 225px; height: auto; }
@media screen and (max-width: 767px) {
    .ordermade li { width: 50%; }
}
/* ▲ 2026.07.29 ▲ */

/* ▼ 2026.07.29 コースと料金一覧：余った最終段を中央寄せ
   シンセ／音楽理論／カスタムを削除した結果、半幅コースが3つ（2+1）になり
   ミキシング／マスタリングの右隣が空いてしまうため、その段を中央に寄せる。
   段が埋まっている場合は見た目が変わらないので、後日コースを1つ足して 2+2 に
   なったら、この指定はそのまま残しておいてよい。
   ★コース追加時の注意：左カラムに来るセクション（現状 #mix-mastering）を
     上の「.course .block1 #beginner,... {margin-right: 2.4%;}」のルールに
     追加しないと、隣のコースとの間隔が空かない。 */
@media screen and (min-width: 768px) {
    .course .block1 .inner { text-align: center; }
    .course .block1 .inner > * { text-align: left; }
}
/* ▲ 2026.07.29 ▲ */

/* ▼ 2026.07.30 AI作曲コース（/course/ai-music・ページID 3345）のコースカラー
   ブランドカラー #E1249C は AI_Music_logo2.jpg から抽出した実測値（2026.07.30 ロゴ変更に伴い #7104EB から変更）。
   ※body の course-detail / course-ai-music クラスは functions.php の
     pagename_class() でスラッグ判定して付与している（新コース追加時は要追記）。 */
.course-ai-music .ttl-ico { background: #E1249C; }
.course-ai-music .en { color: #E1249C; }
.course-detail.course-ai-music .block2 .bg h3 { background: #E1249C }
.course-detail.course-ai-music .block4 { background: #E1249C }
.course-detail.course-ai-music .block5 .tab { border-color: #E751B0 }
.course-detail.course-ai-music .block5 .tab li { border-color: #E751B0; background: #BE619C; color: #F1BCDD; }
.course-detail.course-ai-music .block5 .tab .selected { background: #E1249C; color: #fff; }
/* ▲ 2026.07.30 ▲ */

/* ▼ 2026.07.30 .video.width_980 の定義漏れを補完
   common.css は width_560 / 640 / 853 / 1280 しか定義しておらず、
   本文で使われている width_980 は該当ルールが無いためベースの .video だけが効き、
   margin:auto による中央寄せが当たらず動画が列幅いっぱい（1200×675）に広がっていた。
   使用ページ: system / master / beginner / advance / synth / mix-mastering /
              music-theory / trial / ai-music(下書き)
   ※common.css 66〜70行目・84〜85行目と同じ書き方に合わせている。 */
.video.width_980 { position: static; padding-top: 0; max-width: 980px; height: 480px; margin: auto; }
.video.width_980 iframe { position: static; }
@media screen and (max-width: 767px) {
    .video.width_980 { position: relative; padding-top: 56.25%; width: 100%; height: auto; }
    .video.width_980 iframe { position: absolute; }
}
/* ▲ 2026.07.30 ▲ */