@charset "utf-8";
/*
 * default.css
 *
 */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
html,body{
  font-family:Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  box-sizing:border-box;
  height:100%;
}
body{
  margin:0;
  background-color:#fff;
}
@media screen and (max-width: 1024px) and (min-width: 768px){ body{ background-color:#111; } } /* tablet */
@media screen and (max-width: 767px)                        { body{ background-color:#111; } } /* smartphone */
header,
#main,
footer
img{
  width:100%;
}
img{
  max-width:100%;
  height:auto;
}
img[src$=".svg"] {
    width:100%;
}
#wrapper{
  max-width:1006px;
  margin:auto;
  height:100%;
}
#main{
  background-color:#111;
  overflow:hidden;
  min-height:100%;
  padding-bottom:200px;
}
section{
  color:#fffff8;
  margin:0 0 55px 0;
}
@media screen and (max-width: 767px){ section{ margin:0 0 15px 0; } } /* smartphone */
em{
  font-style:normal;
}
p{
  font-weight:normal;
  word-wrap:break-word;
  font-size:16px;
  line-height:30px;
  overflow-wrap:break-word;
  text-align:justify;
  text-justify:inter-ideograph;
}
a{
  color:#aaa;
  text-decoration:none;
}
a:hover,
a:focus{
  color:#fff !important;
  text-decoration:none;
}
/* 背景色と文字色 ------------------------------------------------------------------------------------------------------------ */
.bw{
  background-color:#222;
  color:#fffff8;
}
.wb{
  background-color:#fffff8;
  color:#222;
}
/* ストライプ 背景 */
.bg1{
  background:repeating-linear-gradient(45deg, #222, #222 10px, #111 0, #111 20px);
}
.bg2{
  background:repeating-linear-gradient(#222, #222 10px, #111 0, #111 20px);
}
/* 共通部品 ------------------------------------------------------------------------------------------------------------------ */
.sectotop{
  padding:5px;
}
.sectotop a{
  padding:0 !important;
  margin:0 !important;
  width:30px;
  height:30px;
}
.ttl{
  height:1px;
  font-size:1px;
}
/* navi ---------------------------------------------------------------------------------------------------------------------- */
nav{
  margin:0 !important;
  background-color:rgba(0, 0, 0, 0.9) !important;
  height:40px;
}
h1{
  display:inline-block;
  margin: 12px 0 0 4px !important;
  color:#fff;
  font-size:16px;
  font-weight:bold;
}
@media screen and (max-width: 1024px) and (min-width: 768px){  h1{ margin: 13px 0 0 4px !important; font-size:16px; } } /* tablet */
@media screen and (max-width: 767px)                         { h1{ margin: 12px 0 0 4px !important; font-size:12px; } } /* smartphone */
nav #logo{
  width:120px;
}
@media screen and (max-width: 767px) { nav #logo{ width:90px; } } /* smartphone */
nav .navbar-brand{
  padding:5px;
}
nav > div{
  max-width:1006px !important;
  margin:auto !important;
}
.navbar-toggle{
  display:block;
  background-color:none !important;
  border:none !important;
  margin:0 !important;
  padding:0 !important;
}
.navbar-nav{
  margin:0;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
  background:none;
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover{
  background:none;
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{
  max-height:none;
}
nav button img{ /* svg */
  width:36px !important;
  height:36px !important;
  margin:4px 2px;
}
.navbar-inverse .navbar-nav > li:nth-child(1) > a{
  border-top:1px solid #111;
}
.navbar-header {
  float:none;
}
@media screen and (max-width:767px){ /* smartphone */
  nav button img{ /* svg */
    margin:1px 2px;
  }
  .navbar-header {
    overflow:hidden;
    height:40px;
  }
  .navbar{
    min-height:40px;
  }
}
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header{
  margin:0 !important;
}
.navbar-collapse {
  border-top:1px solid #555 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
  display:none!important;
}
.navbar-collapse.collapse.in {
  display:block!important;
}
.navbar-nav {
  float:none!important;
  margin:0;
}
.navbar-nav > li {
  float:none;
  text-align:right;
}
.navbar-nav > li > a {
  padding-top:5px;
  padding-bottom:5px;
}
.navbar-default .navbar-nav>li>a{
  color:#fff;
  background:rgba(20,20,20,0.9) !important;
}
.navbar-text {
  float:none;
  margin:15px 0;
}
.collapsing {
  overflow:hidden!important;
}
.navbar-default{
  border-color:#333;
}
nav .container-fluid{
  padding:0 !important;
}
.nav .pagelink{
  border-bottom:1px solid #000;
}
.navbar-collapse{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
}
/* メインビジュアル (slider) ------------------------------------------------------------------------------------------------- */
#mainvisualarea{
  overflow:hidden;
  margin:50px 0 20px 0;
}
@media screen and (max-width: 467px){ #mainvisualarea{ margin:40px 0  0px 0; } } /* smartphone */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  #mainvisualarea{
  }
}
/* kouza --------------------------------------------------------------------------------------------------------------------- */
#kouza{
  margin:0px 24px 24px 24px;
  background:none;
}
@media screen and (max-width:767px){
  #kouza .row{
    background:url('../img/kouza/bg_kouza.jpg') no-repeat left top;
    margin-bottom:10px;
    -webkit-background-size:100% auto;
         -o-background-size:100% auto;
            background-size:100% auto;
    padding:20px 0;
  }
}
#kouza .row .col-sm-4{
  padding:4px 6px;
}
#kouza .row > div > a{
  display:block;
  text-align:center;
  font-weight:bold;
  font-size:28px;
  margin:2px 0;
  padding:12px 2px;
  background-color:#fff;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  color:#222;
  text-decoration:none;
  opacity:0.9;
}
#kouza .row > div:nth-child(1) > a{ background-color:#bdce1e; }
#kouza .row > div:nth-child(2) > a{ background-color:#e99518; }
#kouza .row > div:nth-child(3) > a{ background-color:#7dc6e8; }
#kouza .row > div > a:hover,
#kouza .row > div > a:focus{
  color:#111 !important;
  text-decoration:none;
  opacity:1.0;
}
/* distinction --------------------------------------------------------------------------------------------------------------- */
#ttldistinction{
  margin:10px 0px;
}
#distinction{
  background-color:#111;
  margin:0px 20px;
}
#distinction .row > a{
  display:block;
  color:#fff;
  overflow:hidden;
  cursor:default;
}
@media screen and (max-width: 767px){ #distinction .row > a{ cursor:pointer; } } /* smartphone */
#distinction h3{
  text-align:center;
  margin-bottom:48px;
}
#distinction h4{
  font-size:36px;
  margin:30px 0 0 20px;
  padding-left:0 !important;
  padding-right:0 !important;
}
#distinction em{
  font-family:'Amiri', serif;
  font-size:72px;
  text-align:left;
  font-style:italic;
  vertical-align:0px;
  margin: 0 -20px 0 0;
  padding-left:16px !important;
  padding-right:0 !important;
}
#distinction .distinctionParagraph{
  margin:0 0 36px 0;
}
@media screen and (min-width:767px){
  #distinction .collapse{
    display:block;
  }
  #distinction h4{
    font-size:30px;
    margin:30px 0 0 0;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}
@media screen and (max-width:767px){
  #distinction .row{
    height:auto;
    margin:2px 0 14px 0;
  }
  #distinction h3{
    margin:60px 0;
  }
  #distinction h4{
    margin:5px 0 0 0;
    font-size:16px;
    line-height:25px;
    font-weight:bold;
    padding-left:16px !important;
    padding-right:0 !important;
  }
  #distinction em{
    display:block;
    font-size:39px;
    font-style:normal;
    margin:0 0 0 0;
    padding-left:2px !important;
    padding-right:0 !important;
  }
  #distinction .distinctionBtn{ /* svg */
    text-align:center;
    margin:3px 0 0 0;
    padding-left:0 !important;
    padding-right:0 !important;
    cursor:pointer;
  }
  #distinction img.distinctionBtn{
    width:48px;
    height:48px;
  }
  #distinction .distinctionParagraph{
    margin:0 0 64px 0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  #distinction .distinctionParagraph p{
    font-size:12px;
    line-height:18px;
  }
  #distinction .distinctionParagraph > div{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}
@media screen and (min-width: 500px) and (max-width: 1024px){
  #distinction h4{
    margin:30px 0 0 40px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1920px){
  #distinction h4{
    margin:30px 0 0 20px;
  }
}
/* toi_btn ------------------------------------------------------------------------------------------------------------------- */
.toi_btn{
  margin-top:40px;
}
.toi_btn img{
  min-width:100%;
  height:auto;
}
.toi_btn .area1{
  width:100%;
  position:relative;
  background:url('../img/toi_btn/bg_toi_btn.jpg') no-repeat left top;
  margin-bottom:10px;
  -webkit-background-size:100% auto;
       -o-background-size:100% auto;
          background-size:100% auto;
  border-radius:12px;
  -moz-border-radius:12px;
  -webkit-border-radius:12px;
  border-radius:12px;
}
.toi_btn .area1:before{
  content:"";
  display:block;
  padding-top:21.14164904862579%;
}
.toi_btn .area1 p{
  position:absolute;
  left:0;
  top:0;
  width:auto;
  height:176px;
}
/* section 共通 -------------------------------------------------------------------------------------------------------------- */
section h3{
  text-align:center;
  font-size:24px;
  padding:15px 0px;
  text-align:center;
  margin-bottom:24px;
}
p.remarks{
  font-size:14px;
  line-height:20px;
}
/* course -------------------------------------------------------------------------------------------------------------------- */
#course{
}
#course .courseset h4{
  text-align:center;
  padding:10px 0;
  margin:0 0 0 0;
  color:#000;
  font-size:20px;
}
#course .courseset h5{
  text-align:center;
  padding:5px 0;
  font-size:18px;
  background-color:#444;
}
#course .courseset img{
  margin-bottom:20px !important;
}
#course .courseset #course1 h4{ background-color:#bdce1e; }
#course .courseset #course2 h4{ background-color:#e99518; }
#course .courseset #course3 h4{ background-color:#7dc6e8; }
@media screen and (max-width:767px){
  #course .remarks h4,
  #course .remarks p{
    font-size:12px;
    line-height:18px;
  }
  #course .remarks h4{
    margin:5px 0;
    font-weight:bold;
  }
}
/* flow ---------------------------------------------------------------------------------------------------------------------- */
#flow h4{
  background-color:#ccc;
  color:#222;
  padding:16px 0;
  text-align:center;
  font-size:20px;
}
#flow .glyphicon-chevron-down{
  color:#333;
  font-size:72px;
  text-align:center;
}
#flow p{
  text-align:center;
}
@media screen and (max-width:767px){
  #flow p{
    padding:0 20px;
    font-size:12px;
    line-height:18px;
    text-align:left;
  }
}
/* access -------------------------------------------------------------------------------------------------------------------- */
#access h3{
  margin-bottom:0px;
}
#access h5{
  font-size:20px;
  text-align:center;
}
#access .row > div > span{
  display:block;
  color:#DC4A3D;
  font-size:36px;
  margin-bottom:14px;
  text-align:center;
  margin-top:48px;
}
#access address{
  font-size:16px;
  text-align:center;
}
#access iframe{
  width:100%;
  height:350px;
  padding:0 0 0 10px;
}
#access .remarks{
  margin-left:10px;
}
#access .remarks > span{
  margin:0 10px;
}
@media screen and (max-width:767px){
  #access iframe{
    padding:0 10px;
  }
  #access .remarks{
    margin-left:0;
    padding:0 10px;
    font-size:12px;
    line-height:18px;
  }
}
/* works --------------------------------------------------------------------------------------------------------------------- */
#works .sp-slides-container *{
  overflow:visible;
}
#works .sp-slides{
  height:100%;
}
#works .sp-buttons{
  padding-top:2px;
  height:120px;
}
#works .sp-button{
  background-color:#222;
  border:2px solid #fff;
  width:15px;
  height:15px;
}
#works .sp-selected-button{
  background-color:#ffff00;
  border:2px solid #ffff00;
  width:15px;
  height:15px;
}
#works #slide_works .sp-slides .sp-slide > div.caption{
  overflow:hidden;
  margin-top:30px;
}
#works #slide_works .sp-slides .sp-slide > div em{
  display:block;
  font-size:16px;
  font-weight:bold;
  margin-bottom:6px;
  padding:4px;
  text-align:center;
  background-color:#222;
}
#works #slide_works .sp-slides .sp-slide > div p{
  text-align:center;
  font-size:12px;
  line-height:18px;
}
.workspc > div:nth-of-type(1) ul{
  margin: 0 0 0 auto;
  padding:0 0;
  width:240px;
}
.workspc > div:nth-of-type(1) ul li{
  list-style-type:none;
  font-size:18px;
  line-height:30px;
}
#worksexplain{
  margin: 0px 40px 0 10px;
  height:auto;
}
#worksexplain > div{
  display:none;
}
#worksexplain > div:nth-of-type(1){
  display:block;
}
#worksexplain em{
  display:block;
  text-align:center;
  background-color:#222;
  font-size:18px;
  line-height:30px;
  font-weight:bold;
  padding: 10px 0;
}
#worksexplain p{
  font-size:16px;
  padding: 10px 25px 0px 25px;
}
/* voice --------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 768px){
  #voice .row{
    width:100%;
    margin: 0;
  }
  #voice > div{
    padding: 0 20px;
  }
}
@media screen and (max-width: 767px) {
  #voice .row{
    width:auto;
  }
  #voice > div{
    padding: 0 15px;
  }
}
#voice > div > div.row:nth-of-type(n+2){
  display:table;
  margin-bottom:20px;
}
#voice div[class*="col-"]{
  float:none;
  display:table-cell;
  height:150px;
  overflow:hidden;
}
#voice .fukidashi_l,
#voice .fukidashi_r{
  background-color:#fff;
  border-radius:5px;
  position:relative;
}
#voice .fukidashi_l:after,
#voice .fukidashi_r:after{
  border:10px solid transparent;
  content:"";
  display:block;
  bottom:30px;
  width:0;
  position:absolute;
}
#voice .fukidashi_l:after{
  border-left-color:#fff;
  border-right-width:0;
  right:-10px;
}
#voice .fukidashi_r:after{
  border-right-color:#fff;
  border-left-width:0;
  left:-10px;
}
#voice p{
  color:#222;
  font-size:16px;
  line-height:24px;
  padding:24px;
  text-align:left;
}
#voice .voicepict{
  margin:0;
  padding:0;
  width:161px;
  height:100px !important;
}
#voice .voicepict img{
  min-height:50px;
  position:absolute;right:0;bottom:35px;left:0;
  margin: 0 auto;
}
#voice .img-responsive{
  max-width:100px;
}
#voice .userprofile{
  border:1px solid #fff;
  background-color:#111;
  color:#fff;
  font-size:14px;
  text-align:center;
  padding:4px 0;
  border-radius:2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  position:absolute;right:0;bottom:10px;left:0;margin:auto 5px;
}
@media screen and (max-width:767px){
  #voice .userprofile{
    border:none;
    font-size:11px;
    padding:2px 2px;
    position:absolute;right:0;bottom:10px;left:0;margin:auto 5px;
  }
  #voice .voicepict img{
    position:absolute;right:0;bottom:35px;left:0;margin:auto;
  }
  #voice p{
    font-size:12px;
    line-height:18px;
    padding:10px 12px;
  }
}
/* qanda --------------------------------------------------------------------------------------------------------------------- */
#qanda > div.row{
  margin:0;
}
#qanda h3{
  margin:10px 0 20px 0;
  padding:0;
}
#qanda .row > a{
  display:block;
  color:#fff;
  overflow:hidden;
  cursor:default;
}
@media screen and (max-width: 767px){ #qanda .row > a{ cursor:pointer; } } /* smartphone */
#qanda em{
  font-family:'Amiri', serif;
  font-size:36px;
  text-align:center;
  font-style:italic;
  vertical-align:0;
  margin:0;
}
#qanda h4{
  margin-top:10px;
  font-size:28px;
  padding-left:0 !important;
}
#qanda span.glyphicon-chevron-right{
  display:block;
  font-size:30px;
  color:#555;
  text-align:right;
}
@media screen and (min-width:767px){
  #qanda .collapse{
    display:block;
  }
}
@media screen and (max-width:767px){
  #ttlqanda h3{
    margin-bottom:20px;
  }
  #qanda h4{
    margin-top:0px;
    font-size:18px;
    padding-left:14px !important;
    padding-right:0 !important;
    line-height:28px;
  }
  #qanda .row:nth-child(even){
    margin-top:2px;
  }
  #qanda img.arrow1{
    cursor:pointer;
    width:36px;
    height:36px;
    text-align:right;
    margin:-4px 0 0 0;
    padding-right:0 !important;
  }
  #qanda em{
    font-size:20px;
    font-style:normal;
    font-weight:bold;
    margin:3px 5px 0 2px;
  }
  #qanda div[class*="visible-xs"]{ /* 右 arrow1 部分 */
    text-align:right;
    padding-right:0 !important;
    padding-left:6px !important;
  }
  #qanda p{
    margin-top:0;
    padding:10px 20px;
    border:1px solid #fff;
  }
}
/* company ------------------------------------------------------------------------------------------------------------------- */
#company img{
  min-width:100%;
  height:auto;
}
#company p.remarks{
  border:1px solid #fff;
  padding:12px 18px;
  line-height:24px;
  margin:15px 0;
}
#company #companytitlevisual{
  width:100%;
  position:relative;
  background:url('../img/company/bg_companytitlevisual.jpg') no-repeat left top;
  margin-bottom:10px;
}
#company #companytitlevisual.area1{
  -webkit-background-size:100% auto;
       -o-background-size:100% auto;
          background-size:100% auto;
}
#company #companytitlevisual.area1:before{
  content:"";
  display:block;
  padding-top:35.20084566596195%;
}
#company #companytitlevisual.area1 p{
  position:absolute;
  left:0;
  top:0;
  width:auto;
  height:333px;
}
#company .branchlist{
  padding:0 15px !important;
}
#company .branchlist > div{
  padding:2px !important;
}
#company .branchlist div p{
  text-align:center;
  padding-top:5px;
}
@media screen and (max-width:450px){
  #company .branchlist > div p{
    width:100%;
    height:30px;
    font-size:12px;
    line-height:15px;
  }
}
/* media --------------------------------------------------------------------------------------------------------------------- */
#slide_media{
  margin-top:0 !important;
  margin-bottom:10px !important;
}
#slide_media .slider-pro{
  margin-top:auto !important;
}
#slide_media .sp-slides{
  visibility:hidden;
}
/* toi ----------------------------------------------------------------------------------------------------------------------- */
#toi{
  margin-bottom:6px;
}
#toi h3{
  margin-bottom:0;
}
#toi .explain{
  margin:12px 0;
}
#toi .links{
  margin:16px 0;
}
/* toimail ------------------------------------------------------------------------------------------------------------------- */
#toimail{
  font-size:16px;
  line-height:30px;
}
#toimail .btn{
  width:100px;
  margin:0 10px;
}
#toimail em{
  padding:2px 5px;
  margin-right:5px;
  font-size:12px;
  vertical-align:2px;
}
#toimail em.h{
  background-color:#cc0000;
  color:#fff;
}
#toimail em.n{
  background-color:#9FCF10;
  color:#fff;
}
.toiconfirm p.msg{
  text-align:center;
  padding-bottom:15px;
  border-bottom:1px solid #555;
}
.toiconfirm div.row > div > div{
  font-size:14px;
  margin:0 15px;
  padding-bottom:5px;
  border-bottom:1px solid #555;
}
#toimail input[type="radio"]{
  margin-top:9px;
}
#toimail .err{
  background-color:pink;
}
#toimail i.errmsg{
  display:block;
  font-size:12px;
  font-style:normal;
  color:#ff0000;
}
/* foottoiarea --------------------------------------------------------------------------------------------------------------- */
#foottoiarea{
  position:fixed;
  left:0px;
  bottom:0px;
  display:block;
  z-index:1;
  width:100%;
  height:95px;
  background-color:#e99518;
}
#foottoiarea div.ft_tel{
  margin:2px auto;
  width:310px;
}
#foottoiarea div#ftarea{
  width:100%;
}
#foot-action{
  margin:0 auto;
  overflow:hidden;
  color:#fffff8;
}
/* 固定表示 :このページのいちばん上へもどる --------------------------------------------------------------------------------- */
#pageTop {
  display:none;
  position:fixed;
  bottom:72px;
  right:2px;
}
#pageTop a {
  display:block;
  z-index:2;
  padding:0;
  width:35px;
  height:35px;
  background-color:#bdce1e;
  color:#fff;
  font-weight:bold;
  text-decoration:none;
  text-align:center;
  border-radius:50px;
  -moz-border-radius:50px;
  -webkit-border-radius:50px;
  border-radius:50px;
}