@charset "utf-8";

/*
 * ==============================================
 * ■共通設定
 * ==============================================
 */
body {
  color:#333333;
  font-family: YakuHanJP, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", YuGothic, Meiryo, メイリオ, Meiryo, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-weight:300;
  font-size: 1.3rem;
  line-height: 1.7;
  background-color:#fff;
}

body .jost{
    font-family: 'Jost'!important;
    letter-spacing: 0px;
    font-weight:300;
}

html #fadeLayer{
    transition: .2s;
    visibility:hidden;
}
html.view-gnav #fadeLayer {
  position:fixed;
  top:0px;
  left:0px;

  width:100%;
  height:100%;

  background-color:#000000;
  opacity:0.5;
  visibility:visible;
  z-index:10;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}
h1 {
  color:#333;
}
h2 {
  color:#b8883b;
}
h3, h4, h5, h6 {
  font-weight: 300;
  color:#333333;
}
h1{ font-size:2rem; }
h2{ font-size:1.8rem; }
h3{ font-size:1.6rem; }
h4{ font-size:1.5rem; }
h5{ font-size:1.4rem; }
h6{ font-size:1.3rem; }

::-moz-selection { color:#fff; background: linear-gradient(135deg, #e0ca82, #d4b572);; }
::selection { color:#fff; background:#d4b572; }


main {
  display: block;
}

input[type="text"]{
  padding:5px 10px;
}
input[type="submit"]{
  padding:5px 10px;
}
input[type="button"]{
  padding:5px 10px;
}
select{
  padding:5px 10px;
}
textarea{
  padding:5px 10px;
}
input,select,textarea{
  border-color: #000;
}
input[type=checkbox]{
  border-color: #000;
}
input[type=checkbox]::-ms-check {
  border-color: #000; /* IE */
  color: #b8883b; /* IE */
}

/* EFO */
#entryprompt_area .entryprompt_border_box.sp{
  display:inline-block!important;
}


/*
 * ==============================================
 * ■link パーツ
 * ==============================================
 */

header a       { color:#333; display: block;}
header a:link  { color:#333; }
@media screen and (min-width : 981px ){
    header a.visited  { color:#333; }
    header a.active   { color:#333; }
    header a:hover    { color: #b8883b; }
}

main a         { color:#333; }
main a:link    { color:#333; }
main p a         { color: #b8883b; }
main p a:link    { color: #b8883b; }
main dd a         { text-decoration: underline; }
main dd a:link    { text-decoration: underline; }
@media screen and (min-width : 981px ){
    main a.visited  { color:#333; }
    main a.active   { color:#333; }
    main a:hover    { color: #b8883b; }
}

footer a       { color: #fff; }
footer a:link  { color: #fff; }
@media screen and (min-width : 981px ){
    footer a.visited  { color: #fff; }
    footer a.active   { color: #fff; }
    footer a:hover    { color: #fff; text-decoration: underline;}
}

.active a{ color: #b8883b; }
.current a{ color: #b8883b; }


@media screen and (min-width : 981px ){
    a.underline{
      position: relative;
      display: inline-block;
    }
    a.underline:before{
      position: absolute;
      top: 2em;
      left: 0;
      content: none;
      display: inline-block;
      width: 0;
      height: 2px;
      background: linear-gradient(135deg, #e0ca82, #d4b572);
      transition: .2s;
    }
    a.underline:hover:before{
      width: 100%;
    }
    a.underline.active:before{
      width: 100%;
    }
}

a.btn_block{
    display:inline-block;
    font-weight: bold;
    min-width: 100px;
    min-height: 20px;
    position: relative;
}
a.btn_block div{
    width:100%;
    height:100%;
    min-height: 20px;
    display:block;
    position: relative;
    overflow: hidden;
}
a.btn_block div::before,
a.btn_block div::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
  top: 0;
}
a.btn_block div,
a.btn_block div::before,
a.btn_block div::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .2s;
  transition: all .2s;
  
}

a.btn_block div span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  width: 100%;
  text-align: center;
}
a.btn_block div.pink_btn{
    color: #fff;
    background-color:#be0179!important;
}
a.btn_block div.white_btn{
    color:#333;
    background-color:#ffffff!important;
    /*box-shadow: 0px 0px 5px rgba(0,0,0,0.1);*/
}
.tab_contents a.btn_block div.white_btn{
  box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
a.btn_block div.black_btn{
    color: #fff;
    background:linear-gradient(135deg, rgba(224,202,130,0.8), rgba(212,181,114,0.8))!important;
    background-color: #d4b572!important;
}
@media screen and (max-width : 980px ){
  a.btn_block div.white_btn{
    color: #fff;
    background:linear-gradient(135deg, #e0ca82, #d4b572)!important;
  }
}   
@media screen and (min-width : 981px ){
  a.btn_block div.pink_btn { z-index: 2; }
  a.btn_block div.pink_btn::after { width: 100%; height: 100%;  }
  a.btn_block div.pink_btn:hover { color:#fff!important; background-color: #cc0080!important; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); }
  a.btn_block div.pink_btn:hover::after { left: 0;  }
  a.btn_block.hovered div.pink_btn { color:#fff!important; background-color: #fd9bac!important; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); }
  a.btn_block.hovered div.pink_btn::after { left: 0;  }

  a.btn_block div.white_btn { z-index: 2; }
  a.btn_block div.white_btn::after { width: 100%; height: 100%;  }
  a.btn_block div.white_btn:hover { color:#fff!important;background-color: #d4b572!important; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); }
  a.btn_block div.white_btn:hover::after { left: 0; }
  a.btn_block.hovered div.white_btn { color:#fff!important;background-color: #d4b572!important; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); }
  a.btn_block.hovered div.white_btn::after { left: 0;  }

  a.btn_block div.black_btn { z-index: 2; }
  a.btn_block div.black_btn::after { width: 100%; height: 100%; }
  a.btn_block div.black_btn:hover { color:#fff!important;background-color: #795729!important; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); }
  a.btn_block div.black_btn:hover::after { left: 0; }
  a.btn_block.hovered div.black_btn { color:#fff!important;background-color: #795729!important; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); }
  a.btn_block.hovered div.black_btn::after { left: 0; }
}   


/*
 * ==============================================
 * ■画面の横幅が981px以上 (PC)
 * ==============================================
 */
@media screen and (min-width : 981px ){
  header{
    width:100%;
  }
  header{
    top: 0;
    position: relative;
    transition: .4s;
    width: 100%;
    min-height: 105px;
    padding: 0 20px;
    z-index: 999;
    background-color: #fff;
  }
  header.foot{
    top: 0;
    position: absolute;
    background:none;
  }
  header .inner{
    min-width:920px;
    max-width:1200px;
    width:100%;
    display:block;
    margin:0 auto;
    display: table;
  }
 
  main{
    width:100%;
    overflow:hidden;
  }

  main .whitebk{
    background-color:#fff;
  }
  main .graybk{
    background-color:#f6f6f6;
  }
  main .graybk2{
    background-color:#f7f5f0;
  }
  main .blackbk{
    background-color:#000;
  }
   main .bluebk{
    background-color:#f0f3f8;
  }
  main .pinkbk{
    background-color:#f7f0f5;
  }
  main .goldbk{
    background-color:#d4b572;
  }
  main .patarnbk1{
    background-image: url(/assets/msp/images/course/base/voice_bg.jpg);
    
  }
  main .soushin_content .patarnbk1{
    background-image: url(/assets/msp/images/base/bg_patarn.jpg);
    
  }

  main .inner{
    min-width:920px;
    max-width:1200px;
    width:100%;
    display:block;
    margin:0 auto;
    overflow: visible;
    display: table;
  }
  main .inner p{
     margin-bottom:1em;
  }

  /* pankuzu */
  .pankuzu{
      margin-right: auto;
      margin-left: auto;
      text-align: left;
      margin-top: 5px;
      display: block;
      background-color:#f7f5f0;
  }
  .pankuzu ol{
      max-width: 1200px;
      margin-right: auto;
      margin-left: auto;
      text-align: left;
      display: block;
      padding:2px 0 5px;
  }
  .pankuzu ol li{
      font-size: 11px;
      color:#333;
      display: inline-block;
      line-height:1.4;
  }
  .pankuzu ol li a span{
      color:#333;
  }
  .pankuzu ol li:after{
    content: ">";
    margin-left: 3px;
    margin-right: 7px;
  }
  .pankuzu ol li:last-child:after{
    content: none;
  }

  footer{
    width:100%;
  }
  footer a{
    color:#fff;
  }
  footer .inner{
    min-width:920px;
    max-width:1200px;
    width:100%;
    display:block;
    margin:0 auto;
    overflow: hidden;
  }
  footer .link_banner{
      width:100%;
      height:242px;
      background-color:#000;
      text-align: center;
  }
  footer .pagetop{
      border-top: 0px;
      background-color:#000;
      height:59px;
      transition: .2s;
      display: block;
      border-radius: 50%;
  }
  footer .pagetop.sp{
      display: none;
  }
  footer .pagetop:hover{
      background-color:#aabfd4;
  }
  footer .pagetop a{
      text-align: center;
      display:block;
      height: 100%;
  }
  footer .pagetop .arrow{
      width: 42px;
      height: 42px;
      border: 1px solid;
      border-color: #fff #fff transparent transparent;
      transform: rotate(-45deg);
      position: relative;
      top: 23px;
      left: 50%;
  }
  footer .sitemap{
      padding:40px 0 60px 0;
      background-color:#000;
      height:auto;
      border-top:1px solid #b8883b;
      border-bottom:1px solid #b8883b;
  }
  footer .sitemap span.ttl{
      font-size: 1.8rem;
      margin-bottom:5px;
      display: block;
      margin-top: 20px;
  }
  footer .sitemap span.ttl:before{
      content: "";
      width: 14px;
      height: 14px;
      border: 3px solid;
      border-color: #fff #fff transparent transparent;
      transform: scale(.5) rotate(45deg);
      position: relative;
      display: inline-block;
      overflow: hidden;
      left: -7px;
  }
  footer .sitemap .l1,
  footer .sitemap .c1,
  footer .sitemap .c2,
  footer .sitemap .r1
  {
      width:24.5%;
      display: inline-block;
      vertical-align: top;
  }
  footer .sitemap ul.sl{
      font-size:1.3rem;
      margin-bottom: 3rem;
  }
  footer .sitemap ul.sl li{
      width:100%;
      line-height:1.4;
      margin-bottom:5px;
      text-indent: -1.8rem;
      padding-left: 1.8rem;
      max-width: 90%;
  }
  footer .sitemap ul.sl li:before{
      border-top: 2px solid #fff;
      width: 6px;
      content: "";
      top: -3px;
      position: relative;
      display: inline-block;
      margin-right:1.2rem;
  }
  footer .footnav{
      padding:25px 0 25px 0;
      background-color:#000;
      height:auto;
  }
  footer .footnav .inner{
      max-width:1200px;
      display: block;
      margin:0 auto;
      text-align: center;
  }
  footer .footnav ul{
      max-width:100%;
      margin:0 auto;
  }
  footer .footnav ul li{
      display:inline-block;
      padding:2px 5px;
      font-size:1.4rem;
  }
  footer .footnav ul li:before{
      content:"";
      border-left:1px solid #fff;
      display: inline-block;
      width: 1px;
      height:14px;
      top:2px;
      margin-right:10px;
      position: relative;
  }
  footer .footnav ul li:first-child:before{
      content:none;
  }
  footer .accom{
      padding:20px 0 20px 0;
      background-color:#fff;
      height:auto;
  }
  footer .accom .inner{
      display: flex;
  }
  footer .accom .inner .left{
      width:60%;
      text-align: left;
  }
  footer .accom .inner .right{
      width:40%;
      text-align: right;
  }
  footer .copy{
      padding:20px 0 85px 0;
      background-color:#f6f6f6;
  }
  footer .copy .inner{
      display: flex;
  }
  footer .copy .inner .left{
      width:50%;
      text-align: left;
  }
  footer .copy .inner .right{
      width:50%;
      text-align: right;
  }
  footer #pagetopfixed {
    background-color: #d4b572;
    width: 65px;
    height: 65px;
    bottom: 20px;
    right: 20px;
    display: inline-block;
    transition: .4s;
    position: fixed;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    opacity: 0;
    border-radius: 50%;
  }
  footer #pagetopfixed.fixed {
       opacity: 1;
  }
  footer #pagetopfixed.fixed:hover {
    background-color: #e7d28b;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.4);
  }      
  footer #pagetopfixed a {
        display: none;
        position: relative;
        text-align: center;
        z-index: 999;
  }
  footer #pagetopfixed.fixed a{
        display: block;
        width:100%;
        height: 100%;
        padding: 18px 17px;
  }
  footer #pagetopfixed.fixed a:before{
    content: "";
    color: #ffffff;
    font-size: 10px;
    padding: 11px 11px;
    border: 1px solid #194375;
    transition: box-shadow 0.4s;
    width: 11px;
    height: 11px;
    border: 1px solid;
    border-color: #fff #fff transparent transparent;
    transform: rotate(-45deg);
    position: relative;
    display: block;
    top: 9px;
    left: 4px;
  }
  footer #pagetopfixed.fixed:hover a:before{
        border-color: #fff #fff transparent transparent;
  }
.chat_bot {
    position: fixed;
    bottom: 90px;
    right: 10px;
    z-index: 99;
    width: 150px;
    opacity: 0;
    transition: .4s;
	cursor: pointer;
}
.chat_bot.fixed {
    opacity: 1;
}
}



/*
 * ==============================================
 * ■画面の横幅が980pxまで (Tablet & SP)
 * ==============================================
 */
@media screen and (max-width:980px){
  input,select,textarea,label{ font-size:1.6rem; } 
  header .sp{  display: inline;   }
  header .pc{  display: none; }
  header .tab{ display: inline;   }

  body.is-menuopen{
    /* position: fixed; */
    z-index: -1;
    width: 100%;
    height: 100%;
  }
  body.is-menuopen #wrap{
    position: fixed;
	z-index: 999999;
  }
  
  header #sp_head{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 44px;
  }
  header #sp_head .logo{
      padding-left: 10px;
      /*width:35%;*/
      width: 54%;
      max-height: 44px;
      top: 3%;
  }
  header #sp_head .right{
      width:65%;
      text-align: right;
      max-height: 44px;
  }
  header #sp_head .right a.btn_block{
      width:60%;
      max-width: 100px;
      min-width: 100px;
      line-height: 1.2;
      font-size: 1.1rem;
  }
  header #sp_head .right a.btn_block>div{
    min-height: 44px;
  }
  header #sp_head .right a.btn_block>div.black_btn{
      background: none!important;
      background-color:#000!important;
  }
  header #sp_fix_menu{
      position: fixed;
      bottom:-64px;
      width:100%;
      background:linear-gradient(135deg, #e0ca82, #d4b572);;
      min-height:64px;
      z-index: 999;
      box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
      transition: 1s;
      padding-bottom: env(safe-area-inset-bottom);
  }
  header #sp_fix_menu.menuup{
      bottom:0;
  }
  header #sp_fix_menu .inner{
      display: block;
      max-width: 94.8%;
      margin:0 auto;
  }
  header #sp_fix_menu .inner .menulist{
      display: flex;
  }
  header #sp_fix_menu .inner .menulist .menuitem{
      width: 20%;
      color:#fff;
      text-align: center;
      position: relative;
  }
  header #sp_fix_menu .menulist p.menu{
    display: block;
    position: absolute;
    bottom: 5%;
    text-align: center;
    font-size: 1.0rem;
    width: 100%;
  }
  header #sp_fix_menu .menulist .menuitem.is-active {
    background-color:#b8883b;
  }
  header #sp_fix_menu .menulist #beginner-open.menuitem,
  header #sp_fix_menu .menulist #beginner-link.menuitem{
    background-color:#be0179;
  }
  header #sp_fix_menu .menulist #beginner-open.menuitem.is-active {
    background-color:#be0179;
  }
  /*
  header #sp_fix_menu .menulist .menuitem.is-active:before {
    content: "";
    position: absolute;
    top: 0px;
    left: calc(50% - 10px);
    border: 10px solid transparent;
    border-top: 10px solid #FFF;
    z-index: 2;
  }
  */

  header .l-header {
    position: relative;
    width: 100%;
    background-color: #fff;
    left: 0px;
    top: 0px;
    padding: 0;
  }
  header .gnav {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    transform: translate3d(0, 100%, 0);
    transition: all .3s ease;
    opacity: 0;
    padding: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 300;
    padding-bottom: 50px;
  }
  header #menu4 .gnav {
    background: #f6f6f6;
  }
  header .gnav.is-active {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  header .gnav a {
    color:#333;
    text-decoration: none;
  }

  main{
  
  }
  main .whitebk{
    background-color:#fff;
  }
  main .graybk{
    background-color:#f6f6f6;
  }
  main .graybk2{
    background-color:#f7f5f0;
  }
  main .blackbk{
    background-color:#000;
  }
  main .bluebk{
    background-color:#f0f3f8;
  }
  main .pinkbk{
    background-color:#f7f0f5;
  }
  main .goldbk{
    background-color:#d4b572;
  }
  main .patarnbk1{
    background-image: url(/assets/msp/images/course/base/voice_bg.jpg); 
  }
  footer{
     width:100%;
     margin:0 auto 64px;
  }
  .article footer{
     margin:0 auto 0px;  
  }  
  footer .inner{
    width:100%;
    display:block;
    margin:0 auto;
    overflow: hidden;
  }
  footer .link_banner{
      width:100%;
      background-color:#000;
      text-align: center;
  }
  footer .link_banner .inner{
      padding:0 20px;
  }
  footer .pagetop{
      border-top: 1px solid #b6966a;
      border-bottom: 1px solid #b6966a;
      background-color:#000;
      height:43px;
      transition: .2s;
      display: block;
  }
  footer .pagetop.pc{
      display: none;
  }
  footer .pagetop a{
      text-align: center;
      display:block;
  }
  footer .pagetop .arrow{
      width: 40px;
      height: 40px;
      border: 3px solid;
      border-color: #fff #fff transparent transparent;
      transform: scale(.5) rotate(-45deg);
      position: relative;
      top: 10px;
      left: calc(50% - 20px);
  }
  footer .sitemap{
      padding:0px 0 0px 0;
      background-color:#000;
      height:auto;
  }
    footer .footnav{
      padding:30px 0 30px 0;
      background-color:#000;
      height:auto;
  }
  footer .footnav .inner{
      padding:0 20px;
      display: block;
      margin:0 auto;
      text-align: center;
  }
  footer .footnav ul{
      max-width:100%;
      margin:0 auto;
  }
  footer .footnav ul.upper{
      margin-bottom:10px;
  }
  footer .footnav ul li{
      display:inline-block;
      padding:2px 1px;
      font-size:1.1rem;
  }
  footer .footnav ul li:before{
      content:"";
      border-left:1px solid #fff;
      display: inline-block;
      width: 1px;
      height:11px;
      top:2px;
      margin-right:10px;
      position: relative;
  }
  footer .footnav ul li:first-child:before{
      content:none;
  }
  
  
  footer #pagetopfixed {
        background-color: #d4b572;
        width:44px;
        height:44px;
        padding: 18px 20px;
        /*bottom: 75px;*/
        bottom: calc(75px + env(safe-area-inset-bottom));
        right: 10px;
        display: inline-block;
        border: 0;
        transition: .4s;
        opacity: 0;
        border-radius: 50%;
    
  }
  .article footer #pagetopfixed{
    bottom: 10px;    
  }  
  footer #pagetopfixed.fixed {
       position: fixed;
       opacity: 1;
       z-index: 999;
       box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  }
  footer #pagetopfixed a {
        display: none;
        position: relative;
        text-align: center;
  }
  footer #pagetopfixed.fixed a{
        color: #ffffff;
        font-size: 13px;
        padding: 7px 7px;
        border: 1px solid #194375;
        transition: box-shadow 0.4s;
        width: 15px;
        height: 15px;
        border: 1px solid;
        border-color: #fff #fff transparent transparent;
        transform: rotate(-45deg);
        position: relative;
        display: block;
        top: 0px;
        left: -6px;
  }
  footer .accom{
      padding:20px 0 20px 0;
      background-color:#fff;
      height:auto;
  }
  footer .accom .inner{
      display: flex;
  }
  footer .accom .inner .left{
      width:100%;
      text-align: left;
      padding:0 10px;
      margin-bottom: 15px;
  }
  footer .accom .inner .right{
      width:100%;
      text-align: right;
      padding:0 10px;
  }
  footer .copy{
      /*padding:10px 0 105px 0;*/
	  padding: 10px 0 185px 0;
      background-color:#f6f6f6;
  }
  footer .copy .inner{
      display: block;
      padding:0 10px;
  }
  footer .copy .inner .left{
      width:100%;
      text-align: center;
  }
  footer .copy .inner .right{
      width:100%;
      text-align: center;
  }
  iframe#synalio-iframe {
    z-index: 9999!important;
  }
  .chat_bot {
    position: fixed;
    left: 0;
    bottom: calc(58px + env(safe-area-inset-bottom));
    z-index: 999;
    width: 150px;
    opacity: 0;
    transition: .4s;
	cursor: pointer;
}
   .chat_bot.fixed {
    opacity: 1;
   }
}



/*
 * ==============================================
 * ■画面の横幅が481pxから980pxまで (Tablet)
 * ==============================================
 */
@media screen and (min-width:481px) and (max-width:980px) {
  header{
  
  }
  header #sp_head{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 41px;
  }
  header #sp_head .logo{
      width: 26%;
      max-width:200px;
      top: 6%;
  }
  header #sp_head .logo img{
      max-height: 35px;
  }
  header #sp_head .right{
      width:65%;
      text-align: right;
      max-height: 41px;
  }
  header #sp_head .right a.btn_block{
      width:60%;
      max-width: 20%;
      min-width: 130px;
      line-height: 1.2;
      font-size: 1.2rem;
  }
  header #sp_head .right a.btn_block>div{
    min-height: 41px;
  }
  
  header #sp_head .right div.telblock{
    max-width: 35%;
    display: inline-block!important;
    font-size: 1.1rem;
    margin-right: 9px;
    position: relative;
    top: -6px;
    min-width: 170px;
  }
  
  header #sp_head .right div.telblock span.text{
    color: #444;
    display: flex;
    align-items: center;
    font-size: 1rem;
    letter-spacing: 1px;
  }
  header #sp_head .right div.telblock span.text:before,
  header #sp_head .right div.telblock span.text:after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #000;
    display: block;
  }
  header #sp_head .right div.telblock span.text:before {
	margin-right: .4em;
  }
  header #sp_head .right div.telblock span.text:after {
	margin-left: .4em;
  }
  header #sp_head .right div.telblock div.tel{
    font-size:2.0rem;
    font-weight:bold;
    color:#333;
    line-height: 1;
    margin: 0px 0;
    vertical-align: top;
  }
  header #sp_head .right div.telblock div.tel span{
    font-weight: bold;
  }
  header #sp_head .right div.telblock div.tel span:before{
    content: "";
    background: url(/assets/msp/images/header/freedial.jpg) top left no-repeat;
    background-size: cover;
    width: 27px;
    height: 15px;
    margin-right: 2px;
    position: absolute;
    left: 0%;
    top: 4%;
  }
  
  
  header #sp_head .logo{
    padding-left: 10px;
    width: 20%;
    max-width: 157px;
  }
  header #sp_head .left{
      width: 25%;
  }
  header #sp_head .right{
      width: 90%;
  }
  main .patarnbk1{
    background-image: url(/assets/msp/images/course/base/voice_bg.jpg); 
  }
  
  main{
  
  }

  /* pankuzu */
  .pankuzu{
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      text-align: left;
      margin-top: 0px;
      display: block;
      background-color:#f7f5f0;
  }
  .pankuzu ol{
      padding:2px 20px 5px;
  }
  .pankuzu ol li{
      font-size: 11px;
      color:#333;
      display: inline-block;
      line-height:1.4;
  }
  .pankuzu ol li a span{
      color:#333;
  }
  .pankuzu ol li:after{
    content: ">";
    margin-left: 3px;
    margin-right: 7px;
  }
  .pankuzu ol li:last-child:after{
    content: none;
  }

  footer{
  
  }
   iframe#synalio-iframe {
	bottom: 130px!important;

}



}



/*
 * ==============================================
 * ■画面の横幅が480pxまで (SP)
 * ==============================================
 */
@media screen and (max-width:480px){
  body {
    color:#333;
  }

  /* pankuzu */
  .pankuzu{
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      text-align: left;
      margin-top: 0px;
      display: block;
      background-color:#f7f5f0;
  }
  .pankuzu ol{
      padding:2px 20px 5px;
  }
  .pankuzu ol li{
      font-size: 11px;
      color:#333;
      display: inline-block;
      line-height:1.4;
  }
  .pankuzu ol li a span{
      color:#333;
  }
  .pankuzu ol li:after{
    content: ">";
    margin-left: 3px;
    margin-right: 7px;
  }
  .pankuzu ol li:last-child:after{
    content: none;
  }
  .chat_bot {
    /*width: 33%;*/
    width: 30%;
  }
}



/*
 * ==============================================
 * ■画面の横幅が320pxまで (SP)
 * ==============================================
 */
@media screen and (max-width:320px){

}



/*
 * ==============================================
 * ■animation
 * ==============================================
 */
@keyframes fade-in {
    0% {
      display: none;
      opacity: 0;
    }

    1% {
      display: block;
      opacity: 0;
    }

    100% {
      display: block;
      opacity: 1;
    }
}
@-moz-keyframes fade-in {
    0% {
      display: none;
      opacity: 0;
    }
    1% {
      display: block;
      opacity: 0;
    }
    100% {
      display: block;
      opacity: 1;
    }
}
@-webkit-keyframes fade-in {
    0% {
      display: none;
      opacity: 0;
    }
    1% {
      display: block;
      opacity: 0;
    }
    100% {
      display: block;
      opacity: 1;
    }
}



/*
 * ==============================================
 * menuup
 * ==============================================
 */
@keyframes menuup {
    0% {
        bottom:-64px;
    }
    100% {
        bottom:0px;
    }
}