@charset "UTF-8";

/* ######################################################################################

　パーツの名前

###################################################################################### */

.pageBase em {
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:2em;
    background:#f0f;
    width:4em;
    height:2em;
    color:#ffffff;
    font-style:normal;
}

/*.pageBase em + * {margin-top:0;}*/


.pageBase .block.dummy {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    background:#f0f0f0;
    height:60px;
    margin:0;
    padding:0 1em;
}
.pageBase .block.dummy + .dummy {
    margin-top:2px;
}



/* ######################################################################################

　accMenu　アコーディオンメニュー

###################################################################################### */
.accBtn {
    position:absolute;
    top:0;
    right:0;
    width:2.75em;
    height:calc(3em - 3px);
    cursor:pointer;
    background:#f5f8fa;
    z-index:10;
}
.accData {display:none;}

@-moz-document url-prefix() {
    .accBtn {height:calc(3em - 2px);}
    .accMenu:first-child .accBtn {top:-1px;}
}



@media all and (-ms-high-contrast: none) {
    .accBtn {height:calc(3em - 2px);}
    .accMenu:last-child .accBtn {height:calc(3em - 3px);}
}




.accBtn:before,
.accBtn:after {
    content:"";
    display:block;
    position:absolute;
    width: 1em;
    background: #005bac;
    height: 2px;
}
.accBtn:before {
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}
.accBtn:after {
    top:50%;
    left:50%;
    transform: translate(-50%,-50%) rotate(90deg);
}
.accBtn.open:after {display:none;}

.accBtn + ul {margin-top:1em;}

/* ######################################################################################

　基本カラー

###################################################################################### */
.yellow{color: #FFFF00;}
.white{color: #FFFFFF;}


/* ######################################################################################

　button　ボタン

###################################################################################### */
.button {
    opacity: 1;
    display: inline-block;
    position: relative;
    border: none;
    -webkit-appearance: none;
    box-shadow: none;
    border: 1px solid #333333;
    border-radius: 0;
    background: #cccccc;
    font-size: 1.4rem;
    max-width: 100%;
    font-weight: normal;
    font-family: "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    color: #111;
    vertical-align: middle;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition:opacity ease 0.3s;
}
.button:not(.disabled):hover {opacity: 0.8;}
.button:not(.disabled):active {
  top: 1px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
}
.button.block {
    display: block;
    width: 100%;
}
.button.block + .block {margin-top: 0.5em;}

/* サイズ
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .button {
    padding: 1em 2.5em;
    font-size: 1.4rem;
    }
}
@media print, screen and (max-width: 767px) {
    .button {
        padding: 1.25em 3em;
        font-size: 1.4rem;
    }
}
@media print, screen and (min-width: 768px) {
    .button.small {
        padding: 0.75em 1em;
        font-size: 1.3rem;
    }
}
@media print, screen and (max-width: 767px) {
    .button.small {
        padding: 1em 2.5em;
        font-size: 1.3rem;
    }
}
@media print, screen and (min-width: 768px) {
    .button.large {
        padding: 1.5em 4em;
        font-size: 1.5rem;
        font-weight: bold;
    }
}
@media print, screen and (max-width: 767px) {
    .button.large {
        padding: 1.5em 4em;
        font-size: 1.5rem;
        font-weight: bold;
    }
}

.button.form-submit {
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}
.button.next:not(.disabled) {
    background: #0073b3;
    color: #ffffff;
}
.button.after:after {margin-left: 0.5em;}
.button.before:before{margin-right: 0.5em;}

.button.before:before, .button.after:after {
    display: inline-block;
    vertical-align: middle;
    font-family: FontAwesome;
    content: "";
    width: 1em;
    height: 1em;
}
.button.before.snap, .button.after.snap {
/*
    padding-left: 4em!important;
    padding-right: 4em!important;
*/
}
.button.ico {
  /* ≫ */
  /* ≪ */
  /* 人物チーム */
  /* GoogleMaps */
}
.button.ico.before:before, .button.ico.after:after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    right: 0;
    transform: translateX(-50%);
}
.button.ico.before.arrowR:before, .button.ico.after.arrowR:after {
    background-image: url(../img/sub/ico_right_blue2.svg);
    background-size: 100%;
}
.button.ico.before.arrowR.blue:before, .button.ico.after.arrowR.blue:after,
.button.ico.before.arrowR.gradation:before, .button.ico.after.arrowR.gradation:after {background-image: url(../img/sub/ico_right_white_wj.svg);}
.button.ico.before.arrowR.blue.reserve:before, .button.ico.after.arrowR.blue.reserve:after {background-image: url(../img/sub/ico_right_blue2.svg);}

.button img.ico{
    vertical-align: middle;
    display: inline-block;
    margin: 0 5px;
}
.button.ico.before.youtube:before, .button.ico.after.youtube:after {
    background-image: url(../img/sub/ico-youtube.svg);
    width: 28px;
    height: 20px;
}

@media print, screen and (min-width: 768px) {
    .button.ico.before.arrowR.blue:hover:before,
    .button.ico.after.arrowR.blue:hover:after {background-image: url(../img/sub/ico_right_blue2.svg);}
    .button.ico.before.arrowR.blue.reserve:hover:before,
    .button.ico.after.arrowR.blue.reserve:hover:after,
	.button.ico.after.arrowR.white:hover:after{background-image: url(../img/sub/ico_right_white_wj.svg);}
}
@media screen and (max-width: 767px) {
    .button.ico.before:before, .button.ico.after:after {right: 3em;}
    .button.ico.before.arrowR.blue:before, .button.ico.after.arrowR.blue:after,
    .button.ico.before.arrowR.gradation:before, .button.ico.after.arrowR.gradation:after {
        background-image: url("../img/contents/waterjet/sub/ico_right_white_wj_sp.svg");
        width: 1.6em;
        right: 1em;
    }
}
 

.button.before.snap:after, .button.before.snap:before, .button.after.snap:after, .button.after.snap:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.button.before.snap:after, .button.after.snap:after {right: 0.75em;}
.button.before.snap:before, .button.after.snap:before {left: 0.75em;}

.button.disabled {
    box-shadow: none;
    cursor: no-drop;
    background: #cccccc;
    color: #aaaaaa;
}
.button.submit {
    background: #ff8000;
    color: #ffffff;
}
.button.back {
    background: #777777;
    color: #ffffff;
}
.button.del {
    background: #cc0000;
    color: #ffffff;
}

/* 色
-------------------------------------*/
.button.blue {
    background: #005BAC;
    border-color: #005BAC;
    color: #fff;
}
@media print, screen and (min-width: 768px) {
    .button.blue:hover {
        background:  #fff;
        border-color: #005BAC;
        color: #005BAC;
        opacity: 1;
    }
}
.button.blue.reserve {
    background: #fff;
    border-color: #005BAC;
    color: #005BAC;
}
@media print, screen and (min-width: 768px) {
    .button.blue.reserve:hover {
        background:  #005BAC;
        border-color: #005BAC;
        color: #fff;
        opacity: 1;
    }
}

.button.white {
    background: #fff;
    border-color: #E2E4EF;
    color: #005BAC;
}
@media print, screen and (min-width: 768px) {
    .button.white:hover {
        background:  #005BAC;
        border-color: #005BAC;
        color: #fff;
        opacity: 1;
    }
}

.button.gradation {
    border: none;
    color: #ffffff;
    background: #005bac;
    background: -moz-linear-gradient(left,  #1381d6 0%, #1381d6 50%, #005bac 100%);
    background: -webkit-linear-gradient(left,  #1381d6 0%, #1381d6 50%, #005bac 100%);
    background: linear-gradient(to right,  #1381d6 0%, #1381d6 50%, #005bac 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1381d6', endColorstr='#005bac',GradientType=1 );
}
.button.shadow {box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);}
.button.round {border-radius: 3em;}
.button.corner {border-radius: 4px;}

.button[class^="autoZip"] {
    background: #def1f5;
    padding: 0.5em;
    vertical-align: middle;
    margin-left: 0.5em;
}

@media print, screen and (max-width: 767px) {
    .button.xs-block {
        display: block;
        width: 100%;
        margin: 1em 0;
    }
}
@media print, screen and (max-width: 991px) {
    .button.sm-block {
        display: block;
        width: 100%;
        margin: 1em 0;
    }
}
@media screen and (max-width: 1199px) {
    .button.md-block {
        display: block;
        width: 100%;
        margin: 1em 0;
    }
}
@media screen and (max-width: 9999px) {
    .button.lg-block {
        display: block;
        width: 100%;
        margin: 1em 0;
    }
}

/* roundButton
-------------------------------------*/
.roundButton{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid #BABED1;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

/* ====================================================
	ボタンボックス
==================================================== */
.buttonBox {
    margin-top: 3em;
    margin-bottom: 3em;
    text-align: center;
}
.buttonBox.bgG {
    padding: 2em;
    background: #F5F8FA;
	margin-top: 0em;
}
.buttonBox.bgG li.col-sm-6:nth-child(n + 3){margin-top: 1em;}
.buttonBox .button + .button{margin-left: 1em;}
.buttonBox p {text-align: center;}
.buttonBox li .button {
    display: block;
    width: 100%;
}
.buttonBox.center .row {
    display: inline-block;
    width: 103%;
    max-width: 768px;
}
.buttonBox.center.single .row {max-width: 384px;}
.buttonBox .sunflex .button{
    display: flex;
    align-items: center;
    justify-content: center;
}


@media print, screen and (max-width: 767px) {
    .buttonBox {
        padding-left: 2em;
        padding-right: 2em;
    }
    .buttonBox .button{display: block; padding-left: 1em; padding-right: 1em;}
    .buttonBox > .row > .col-xs-12 {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    .buttonBox > .row .button.before.snap,
    .buttonBox > .row .button.after.snap{
        padding-left: 2em!important;
        padding-right: 2em!important;
    }
}
@media print, screen and (max-width: 991px) {
    .buttonBox > .row > .col-sm-12 {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    .buttonBox > .row .button.before.snap,
    .buttonBox > .row .button.after.snap{
        padding-left: 2em!important;
        padding-right: 2em!important;
    }
}
@media screen and (max-width: 1199px) {
    .buttonBox > .row > .col-md-12 {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    .buttonBox > .row .button.before.snap,
    .buttonBox > .row .button.after.snap{
        padding-left: 2em!important;
        padding-right: 2em!important;
    }
}
@media screen and (max-width: 9999px) {
    .buttonBox > .row > .col-lg-12 {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    .buttonBox > .row .button.before.snap,
    .buttonBox > .row .button.after.snap{
        padding-left: 2em!important;
        padding-right: 2em!important;
        line-height:1.3;
    }
}



/* ######################################################################################

　display

###################################################################################### */
@media print, screen and (min-width: 768px) {
    nav.pc, div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc , h3.pc {display: block;}
    nav.sp, div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp , h3.sp {display: none;}
    span.pc, img.pc, em.pc, br.pc {display: inline;}
    span.sp, img.sp, em.sp, br.sp , h3.sp {display: none;}
}
@media screen and (max-width: 767px) {
    nav.sp, div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp, h3.sp {display: block;}
    nav.pc, div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc, h3.pc {display: none;}
    span.sp, img.sp, em.sp, br.sp {display: inline;}
    span.pc, img.pc, em.pc, br.pc, h3.pc {display: none;}
}




/* ######################################################################################

    form

###################################################################################### */
/* 入力制限非表示 */
.aform-validation.student-id {display:none;}

/* フォームの高さ */
.aform-input[type="text"], .aform-text, .aform-email, .aform-password, .aform-tel, .aform-url, .aform-number, .aform-date, .aform-time, .aform-select, .aform-name, .aform-kana, .aform-zipcode, .aform-prefecture, .aform-calendar{height: 45px;}


/* 入力フォームすべて（テキストエリア・セレクトも含む）
-------------------------------------*/
.aform-input[type="text"], .aform-text, .aform-email, .aform-password, .aform-tel, .aform-url, .aform-number, .aform-date, .aform-time, .aform-textarea, .aform-select, .aform-name, .aform-kana, .aform-zipcode, .aform-prefecture, .aform-calendar, .aform-validate{
    border: none;
    background: #F6F6F6;
    border-radius: 3px;
    font-size: 1.5rem;
    font-family: Arial,"游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    padding: 0.5em 0.8em;
}

/* 入力フォームの長さ
-------------------------------------*/
@media print, screen and (min-width: 768px) {
  .aform-input.aform-text{width: 580px;}
  .aform-input.aform-email{width: 580px;} /* メール */
  .aform-input.aform-zipcode{width: 200px;} /* 郵便番号 */
  .aform-input.aform-tel{width: 200px;} /* 電話番号 */
  select.area{min-width: 200px; max-width: 100%;} /* セレクト */
  .aform-validate.aform-field-option-text{width: 150px;margin-left: 10px; padding: 0.5em; height: 35px!important;} /* その他テキスト */	
}
@media screen and (max-width: 767px){
  .aform-input.aform-text{width: 580px;}
  .aform-input.aform-email{width: 580px;} /* メール */
  .aform-input.aform-zipcode{width: 200px;} /* 郵便番号 */
  .aform-input.aform-tel{width: 200px;} /* 電話番号 */
  select.area{min-width: 200px; max-width: 100%;} /* セレクト */
  .aform-validate.aform-field-option-text{width: 200px; margin-left: 10px; padding: 0.5em; height: 35px!important;} /* その他テキスト */	
}



/* 姓名分割 */
.aform-name-ul li {display:inline-block;}
.aform-name-ul li+li {margin-left:1em;}

/* テキストエリア */
textarea.aform-textarea{width: 100%; max-width: 670px;}


/* ラジオボタン
-------------------------------------*/
.aform-radio-ul{margin-top: 0.9em; margin-bottom: 0.9em;}
.aform-radio-ul li{position: relative;}

@media print, screen and (min-width: 768px) {
  .aform-radio-ul li{display: inline-block; margin-right: 2.5em; min-height: 25px;}
}
@media screen and (max-width: 767px){
  .aform-radio-ul li{display: block;}
  .aform-radio-ul li + li{margin-top: 1.25em;}
  .pageRecruit_partners .aform-radio-ul li{display: inline-block; margin-right: 2.5em;margin-top: 0;}
  .pageRecruit_partners .aform-radio-ul li + li{margin-top: 0;}	
}



input[type="radio"] {
    /* visibility: hidden; */
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-99999px);
}
input[type="radio"] + label,
input[type="radio"] + span {
  position: relative;
  padding-left: 30px;
}
input[type="radio"] + label:before,
input[type="radio"] + span:before {
  content: "";
  display: inline-block;
  position: absolute;
}
input[type="radio"] + label:before,
input[type="radio"] + span:before {
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
  border: 1px solid #BABED1;
}
input[type="radio"]:checked + label:before,
input[type="radio"]:checked + span:before{border: 2px solid #1381D6;}

input[type="radio"] + label:after,
input[type="radio"] + span:after {
width: 10px;
height: 10px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  border-radius: 50%;
}
input[type="radio"]:checked + label:after, input[type="radio"]:checked + span:after {
  content: "";
  background: #1381D6;
}
input[type="radio"] + label, input[type="radio"] + span {
  cursor: pointer;
}
/* IE11 */
@media all and (-ms-high-contrast: none) {
input[type="radio"] + label:before,
input[type="radio"] + span:before {
  transform: translateY(-60%);
}
input[type="radio"] + label:after,
input[type="radio"] + span:after {
  transform: translateY(-75%);
}
}



/* チェックボタン
-------------------------------------*/
.aform-checkbox-ul{margin-top: 0.9em; margin-bottom: 0.9em; cursor: default;}
.aform-checkbox-ul li{position: relative;}

@media print, screen and (min-width: 768px) {
    .aform-checkbox-ul{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .aform-checkbox-ul li{
        width: 33.3%;
        margin-bottom: 1em;
    }
    .aform-checkbox-ul li:nth-last-of-type(2),
    .aform-checkbox-ul li:last-child{
        margin-bottom: 0;
    }
}
@media screen and (max-width: 767px){
    .aform-checkbox-ul li:nth-child(n+3){margin-top: 1.25em;}
    .aform-checkbox-ul li:nth-child(even){margin-left: 1em;}
    .aform-checkbox-ul{display: flex; justify-content: flex-start; flex-wrap: wrap;}
}


input[type="checkbox"] {
    /* visibility: hidden; */
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-99999px);
}

input[type="checkbox"] + label,
input[type="checkbox"] + span {
  position: relative;
  display: inline-block;
  padding-left: 30px;
  font-weight: normal;
}
input[type="checkbox"] + label:before, input[type="checkbox"] + span:before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0.25em;
    transform: translateY(-50%);
  }
  input[type="checkbox"] + label:before, input[type="checkbox"] + label:after, input[type="checkbox"] + span:before, input[type="checkbox"] + span:after{
    width: 1em;
    height: 1em;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  input[type="checkbox"] + label:before, input[type="checkbox"] + label:after, input[type="checkbox"] + span:before, input[type="checkbox"] + span:after{
    width: 1em;
    height: 1em;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  input[type="checkbox"] + label:before, input[type="checkbox"] + span:before {
    content: "";
    border-radius: 2px;
    background-color: #fff;
    border: 1px solid #BABED1;
    width: 20px;
    height: 20px;
  }
  input[type="checkbox"]:checked + label:after, input[type="checkbox"]:checked + span:after {
    content: "";
    background: url(../img/contents/ico-check.svg) center no-repeat;
    background-size: 100%;
    background-color: #1381D6;
    width: 20px;
    height: 20px;
    background-size: auto;
    border-radius: 2px;
  }
  input[type="checkbox"] + label, input[type="checkbox"] + span {
    cursor: pointer;
}

/* IE11 */
@media all and (-ms-high-contrast: none) {
  input[type="checkbox"] + label:before, input[type="checkbox"] + label:after, input[type="checkbox"] + span:before, input[type="checkbox"] + span:after{
    transform: translateY(-60%);
  }
}



/* 全体レイアウト
-------------------------------------*/
.aform-header{display: none;}
.aform-content{margin:3em 0 6em;}
.aform-content dl{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 1em 0;
  border-top: 1px solid #E6EDF1;
}
.aform-content dl:first-child{border-top: none;}
.aform-content dt{
  color: #333;
  font-size: 1.5rem;
  font-weight: bold;
}


@media print, screen and (min-width: 768px) {
  .aform-content dt{width: 340px;  padding-top: 0.85em; padding-right: 20px; line-height: 1.5;}
  .aform-content dd{width: calc(100% - 340px); line-height: 1.5;}
}
@media screen and (max-width: 767px){
  .aform-content dt{width: 100%; margin-bottom: 0.75em;}
  .aform-content dd{width: 100%;}
}



.aform-content .sample {
  color: #707F89;
  font-size: 1.3rem;
  margin-bottom: 0.5em;
  margin-top:0.25em;
  width:100%;
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.25;
}
.aform-content .sample:before {content:"※";}
.aform-content .sample.red {color:#CC0022;}
.aform-content .sample.blue {color:#1c4598;}
.aform-content .sample + .sample {margin-top:0;}

.aform-content .aform-input-example{
    margin-top: 0.25em;
    margin-bottom: 0.75em;
}

.inputGroup {
    padding:20px 0;
    background:#ffffff;
}


.formFlexItems {
    display: inline-flex;
    justify-content:flex-start;
    flex-wrap:wrap;
    align-content:flex-start;
    align-items:flex-start;
}
.formFlexItems.aform-radio-ul li + li {margin-top:0; margin-left:1em;}

.formItem dd + dt {margin-top:1em;}

.formItem.formFlexItems dt {width:100%;}
.formFlexItems > .formItem {margin-right:1em; padding-bottom:0;}
.formItem.formFlexItems dd:not(.aform-error) {margin-right:2em;}





/* 入力枠サイズ
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .aform-input.aform-text{width: 580px; max-width: 100%;}
    .aform-input.aform-email{width: 580px; max-width: 100%;} /* メール */
    .aform-input.aform-zipcode{width: 200px; max-width: 100%;} /* 郵便番号 */
    .aform-input.aform-tel{width: 200px; max-width: 100%;} /* 電話番号 */
    select.area{min-width: 200px; max-width: 100%;} /* セレクト */
    input#pt_date{width: 300px!important; max-width: 100%;} /* 設立年月日 */
    input#pt_employee{width: 300px; max-width: 100%;} /* 従業員数 */
    input#pt_capital{width: 300px; max-width: 100%;} /* 資本金 */
}
@media screen and (max-width: 767px){
    .aform-input.aform-text{width: 100%;}
    .aform-input.aform-email{width: 100%;} /* メール */
    .aform-input.aform-url{width: 100%;} /* HP */
    .aform-input.aform-zipcode{width: 200px;} /* 郵便番号 */
    .aform-input.aform-tel{width: 200px;} /* 電話番号 */
}


/* メール確認
-------------------------------------*/
.aform-twice-note{
  margin-top: 1em;
  display: block;
  color: #707F89;
  font-size: 1.3rem;
  margin-bottom: 0.5em;
}
.aform-content .aform-twice-note:after{
  content: "必須";
  position: relative;
  top: -1px;
  font-size: 1.1rem;
  line-height: 1.25;
  color: #DC0000;
  border: 1px solid #DC0000;
  margin-left: 1em;
  display: inline-block;
  vertical-align: middle;
  padding: 0.2em 0.5em;
}

/* 必須
-------------------------------------*/
.aform-label {
    position: relative;
    display: inline-block;
}
.aform-required{
    position: absolute;
    right: 0;
    font-size: 1.0rem;
    line-height: 1.25;
    color: #fff;
    border: 1px solid #DC0000;
    display: inline-block;
    vertical-align: middle;
    padding: 0.2em 1em;
    background: #DC0000;
    border-radius: 20px;
}
/*.dl_name_cap .aform-label:after,*/
/*.dl_tel .aform-label:after,*/
.dl_name_com .aform-label:after,
.dl_zip .aform-label:after,
.dl_area .aform-label:after,
.dl_address .aform-label:after,
.dl_message .aform-label:after {
    content:"任意";
    position: absolute;
    right: 0;
    font-size: 1.0rem;
    line-height: 1.25;
    color: #fff;
    border: 1px solid #9A9A9A;
    display: inline-block;
    vertical-align: middle;
    padding: 0.2em 1em;
    background:#9A9A9A;
    border-radius: 20px;
}


@media print, screen and (min-width: 768px) {
    .aform-label{width: 65%;}
    .aform-required,
    .dl_name_com .aform-label:after,
    .dl_zip .aform-label:after,
    .dl_area .aform-label:after,
    .dl_address .aform-label:after,
    .dl_message .aform-label:after,
    .dl_reply .aform-label:after,
	.dl_pt_name .aform-label:after,
	.dl_pt_name_cap .aform-label:after,
	.dl_pt_hp .aform-label:after,
	.dl_pt_date .aform-label:after,
	.dl_pt_employee .aform-label:after,
	.dl_pt_capital .aform-label:after,
	.dl_pt_admit .aform-label:after,
	.dl_pt_qualified .aform-label:after,
	.dl_pt_works .aform-label:after,
	.dl_pt_other .aform-label:after{
        top: 0.1em;
    }
    
}
@media screen and (max-width: 767px){
    .aform-required,
    .dl_name_com .aform-label:after,
    .dl_zip .aform-label:after,
    .dl_area .aform-label:after,
    .dl_address .aform-label:after,
    .dl_message .aform-label:after,
    .dl_reply .aform-label:after,
	.dl_pt_name .aform-label:after,
	.dl_pt_name_cap .aform-label:after,
	.dl_pt_hp .aform-label:after,
	.dl_pt_date .aform-label:after,
	.dl_pt_employee .aform-label:after,
	.dl_pt_capital .aform-label:after,
	.dl_pt_admit .aform-label:after,
	.dl_pt_qualified .aform-label:after,
	.dl_pt_works .aform-label:after,
	.dl_pt_other .aform-label:after{
        top: -0.1em;
    }
    .aform-required{right: -5.5em;}
    
    .dl_name_com .aform-label:after,
    .dl_name_cap .aform-label:after,
    .dl_address .aform-label:after,
    .dl_message .aform-label:after,
    .dl_tel .aform-label:after{
        right: -5.5em;
    }
}






.aform-required.none {border-color:#ffffff;}

.aform-required.blue {
    color: #1c4598;
    border: 1px solid #1c4598;
}



/* 入力例
-------------------------------------*/
/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */
input:placeholder-shown,
textarea:placeholder-shown {
    color: #98A2AE; }

/* Google Chrome, Safari, Opera 15+, Android, iOS */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #98A2AE; }

/* Firefox 18- */
input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #98A2AE; opacity: 1; }

/* Firefox 19+ */
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #98A2AE; opacity: 1; }

/* IE 10+ */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #98A2AE; }


/* 入力エラー
-------------------------------------*/
.aform-error{margin-top: 0.5em; margin-bottom:0;}
p.aform-error,
div.aform-error,
dd.aform-error,
.aform-error > *{color: #CC0022; font-size: 1.4rem;}
.aform-error + .aform-error {margin-top:0.25em;}

.aform-error {
    width:100%;
}

/* 個人情報保護方針
-------------------------------------*/
.dl_privacy dt {display:none;}
.dl_privacy dd {
    width: 100% !important;
    margin-top: 2em;
    background: #F6F6F6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.dl_privacy .aform-required{right: inherit; background: #233036; border:#233036;}
.dl_privacy dd .aform-checkbox-ul li{width: 100%;}

.aform-content .dl_agreement{border-top: none;}
.dl_agreement dd{margin-left: 25%;}

@media print, screen and (min-width: 768px) {
  .dl_privacy dd {padding: 3.5em 5em;}
  .dl_privacy dd .aform-checkbox-ul li{text-align: center;}
}
@media screen and (max-width: 767px){
  .dl_privacy dd {padding: 1.5em 1em;}
  .dl_privacy p.privacy{font-size: 1.4rem;}
  .dl_privacy .aform-required{left: 0; top: -3em;}
  .dl_privacy .aform-checkbox-ul{margin-top: 3em;}
  .dl_privacy .privacy-1{padding-top: 1em;}
}


/* ボタン
-------------------------------------*/
.aform-button-area{
    display: flex;
    margin-top: 3em;
    text-align: center;
    justify-content: center;
}
.aform-button-area input{
    opacity: 1;
    display: inline-block;
    position: relative;
    border: none;
    -webkit-appearance: none;
    box-shadow: none;
    border-radius: 0;
    font-size: 1.4rem;
    font-family: "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    vertical-align: middle;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    padding: 2em 4em;
    border: none;
    border: none;
    color: #ffffff;
    background: #005bac;
    background: -moz-linear-gradient(left,  #1381d6 0%, #1381d6 50%, #005bac 100%);
    background: -webkit-linear-gradient(left,  #1381d6 0%, #1381d6 50%, #005bac 100%);
    background: linear-gradient(to right,  #1381d6 0%, #1381d6 50%, #005bac 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1381d6', endColorstr='#005bac',GradientType=1 );
    transition: opacity ease 0.3s;
    font-weight: bold;
    min-width: 416px;
}
.aform-button-area input:hover{
  opacity: 0.8;
}

.aform-button-area > input + input{margin-left: 20px;}
.aform-button-area > input#aform_btn_back{background: #838296; color: #fff;}
.aform-button-area > input#aform_btn_back:hover{opacity: 0.8;}

.aform-button-area .arrow{position: relative;}
.aform-button-area .arrow:after{
    content: "";
    background-image: url(../img/sub/ico_right_white_wj.svg);
    position: absolute;
    width: 1.3em;
    height: 1.3em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    right: 2em;
    top: 2em;
}

@media print, screen and (min-width: 768px) {

}
@media screen and (max-width: 767px){
    .aform-button-area input{width: 100%; min-width: 100%; padding: 1.5em 4em;}
    .aform-button-area{flex-direction: column-reverse;}
    .aform-button-area > input + input{margin-left: 0;}
    .aform-button-area > input#aform_btn_back{margin-top: 0.75em;}
    .aform-button-area .arrow:after{
        top: 1.3em;
    }

}

/* フォーカス
-------------------------------------*/
textarea.error,
input[type="text"].error,
input[type="password"].error,
input[type="datetime"].error,
input[type="datetime-local"].error,
input[type="date"].error,
input[type="month"].error,
input[type="time"].error,
input[type="week"].error,
input[type="number"].error,
input[type="email"].error,
input[type="url"].error,
input[type="search"].error,
input[type="tel"].error,
input[type="color"].error,
select.error{
    border-width: 1px;
    border-color: #FDAFBC;
    background: #FFEDF5;
}
textarea:focus, input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus {
    border-color: #007ED9!important;
    outline: 0;
    outline: thin dotted \9;
    box-shadow: none;
    background-color: #F6FBFE;
}



/* ====================================================
    確認画面
==================================================== */
.aform-content #aform-confirm-form dt{padding-top: 0; margin-bottom: 0;}
.aform-content #aform-confirm-form dd{font-size: 1.6rem;}
#aform_confirm_msg{margin-top: 2em; margin-bottom: 2em;}

.aform-content #aform-confirm-form .aform-required{display: none;}
.aform-content #aform-confirm-form .aform-confirm.privacy, .aform-content #aform-confirm-form .aform-input.aform-note.supple{display: none;}
.aform-content #aform-confirm-form .dl_privacy dd{padding: 0; margin: 0; background: none}
.aform-content #aform-confirm-form .aform-label {padding-left: 0;}
.aform-content #aform-confirm-form .aform-label:after{display: none;}


@media print, screen and (min-width: 768px) {
    .aform-content #aform-confirm-form dt{padding-right: 60px;}
}
@media screen and (max-width: 767px){
    .aform-content #aform-confirm-form dt{margin-bottom: 0.75em;}
}

/* ====================================================
    完了画面
==================================================== */



/* ######################################################################################

    fancyBox 

###################################################################################### */
.fancybox-title-float-wrap {bottom:auto; top:calc(100% + 1em);}
/* キャプション */
.fancybox-title-float-wrap .child {white-space:normal;}
/* 重なり順 */
.fancybox-overlay {z-index: 99999999;}
.fancybox-opened {z-index: 999999999;}

/* ######################################################################################

　frame   フレーム 

###################################################################################### */
/* =======================================================
    frameBorder
========================================================== */
.frameBorder{margin-bottom: 2em; border: 5px solid #F5F8FA;}
@media print, screen and (min-width: 768px) {
    .frameBorder{padding: 30px;}
}
@media screen and (max-width: 767px){
    .frameBorder{padding: 1.5rem;}
}


/* ######################################################################################

　imgBox 

###################################################################################### */
.imgBox{margin: 2em 0;}
.imgBox img{width: 100%; height: auto;}
.imgBox img + p {margin-top:0.5em; line-height:1.25;}

@media print, screen and (min-width: 768px) {
    .frameBorder{padding: 30px;}
	.imgBox.alignR{float: right;  margin-top: 0px; margin-left: 20px;}
	.imgBox.alignR img,.imgBox.alignL img{width:385px; height: auto; }
	.imgBox.alignL{float: left;  margin-top: 0px; margin-right: 20px;}
}
@media screen and (max-width: 767px){
    .imgBox li + li{margin-top: 1em;}
}



/* ######################################################################################

    imgFit 

###################################################################################### */
.imgFitBox.cover img, img.imgFit.cover {
    object-fit: cover;
    font-family: "object-fit:cover";
  }
  
  .imgFitBox.contain img, img.imgFit.contain {
    object-fit: contain;
    font-family: "object-fit:contain";
  }
  
  .imgFitBox.fill img, img.imgFit.fill {
    object-fit: fill;
    font-family: "object-fit:fill";
  }
  
  .imgFitBox.none img, img.imgFit.none {
    object-fit: none;
    font-family: "object-fit:none";
  }
  
  .imgFitBox.scaleDown img, img.imgFit.scaleDown {
    object-fit: scale-down;
    font-family: "object-fit:scale-down";
  }


/* ######################################################################################

　imageHover  画像マウスオーバーアクション

###################################################################################### */
.imageHover.zoomCaption {
    display:block;
    overflow: hidden;
}
.imageHover.zoomCaption figure {
    position:relative;
    overflow: hidden;
    margin: 0;
    text-align: center;
}
.imageHover.zoomCaption figure:before,
.imageHover.zoomCaption figcaption {
    -webkit-transition:all 0.25s ease-in-out;
     -moz-transition:all 0.25s ease-in-out;
      -ms-transition:all 0.25s ease-in-out;
       -o-transition:all 0.25s ease-in-out;
          transition:all 0.25s ease-in-out;
    opacity: 0;
    position:absolute;
    left:0;
    width:100%;
}
.imageHover.zoomCaption figure:before {
    content:"";
    display:block;
    z-index:5;
    background-color: rgba(0,0,0,0.4);
    top:0;
    height:100%;
}
.imageHover.zoomCaption figcaption {
    transform:translateY(-50%);
    top: 50%;
    z-index:6;
    text-align: center;
    color: #FFF;
    font-size: 20px;
}
.imageHover.zoomCaption img {
    -webkit-transition:all 0.25s ease-in-out;
     -moz-transition:all 0.25s ease-in-out;
      -ms-transition:all 0.25s ease-in-out;
       -o-transition:all 0.25s ease-in-out;
          transition:all 0.25s ease-in-out;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

@media print, screen and (min-width: 768px) {
    .imageHover.zoomCaption:hover figure img {
        -webkit-transform:scale(1.06,1.06);
          -moz-transform:scale(1.06,1.06);
            -ms-transform:scale(1.06,1.06);
            -o-transform:scale(1.06,1.06);
                transform: scale(1.06,1.06);
    }
    .imageHover.zoomCaption:hover figure:before,
    .imageHover.zoomCaption:hover figcaption {opacity:1;}
}







/* ######################################################################################

　list　リスト 

###################################################################################### */
/* =======================================================
    listStyle
========================================================== */
.listStyle{margin: 0 0 2em;}
ul.listStyle{margin-left:1em;}
* + .listStyle{margin-top: 1.5em;}
.listStyle li{
    position: relative;
    line-height: 1.4;
}
.listStyle li:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}
.listStyle li a{
    color: #111;
    padding-bottom:0.1em;
    text-decoration:none;
	position: relative;
  	display: inline-block;
	overflow: inherit;
}
    /* hover時アンダーラインアニメーション
    -------------------------------------*/
.listStyle li a::after {
  	position: absolute;
  	bottom: 0px;
  	left: 0;
  	content: '';
  	width: 100%;
  	height: 1px;
  	background: #005BAC;
  	transform: scale(0, 1);
  	transform-origin: left top;
  	transition: transform .3s;
}
.listStyle li a:hover::after {
  	transform: scale(1, 1);
}
	

@media print, screen and (min-width: 768px) {
    .listStyle li{font-size: 1.5rem;}
    .listStyle li + li{margin-top: 0.5em;}
}
@media screen and (max-width: 767px){
    .listStyle li{font-size: 1.5rem;}
    .listStyle li + li{margin-top: 1em;}
}

/* ====================================================
　listDot
==================================================== */
.listDot{}
.listDot__item{
    position: relative;
    padding-left: 1em;
    display: block;
    text-decoration: none;
    color: #222;
    line-height: 1.4;
}
.listDot__item + .listDot__item{
  margin-top: 0.5em;
}
.listDot__item:before{
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #000000;
}


/* ######################################################################################

　pageTitle　大見出し：ページタイトル

###################################################################################### */

/* ====================================================
　基本設定
==================================================== */
.pageTitleBox{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.pageTitleBox .pageTitle{
    display: inline-block;
    margin-bottom: 0;
}

@media print, screen and (min-width: 768px) {
    .pageTitleBox{
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .pageTitleBox .pageTitle{font-size: 2.6rem;}
}
@media screen and (max-width: 767px){
    .pageTitleBox{
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
    .pageTitleBox .pageTitle{font-size: 1.6rem;}
}

/* ====================================================
　写真
==================================================== */
.pageTitleBox.img{
    background: #eee;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 130px;
}
.pageTitleBox.img .pageTitle{
    background: rgba(0, 91, 172, 0.85);
    min-width: 100px;
    color: #FFFFFF;
}
@media print, screen and (min-width: 768px) {
	/*下層ページメインイメージ*/
    .pageWorks .pageTitleBox.img{background-image:url("../../_works/item/mainimg_pc.jpg");}
    .pageTitleBox.img .pageTitle{padding: 0.25em 1.0em;}
}
@media screen and (max-width: 767px){
    .pageTitleBox.img{
        height: 80px;
        padding-bottom: 15px;
        background-image: url(../img/sub/pageTitle_sample_sp.png);
    }
    /*下層ページメインイメージ*/
    .pageWorks .pageTitleBox.img{background-image:url("../../_works/item/mainimg_sp.jpg");}
    .pageWorks.diagnosis .pageTitleBox.img{background-image:url("../../_works/item/mainimg_sp.jpg");}
    .pageTitleBox.img .pageTitle{padding: 0.5em 1.2em;}
}

/* ====================================================
　白背景・青背景
==================================================== */
.pageTitleBox.blue{background: #005BAC; color: #fff;}
.pageTitleBox.white{background: #fff;}
@media print, screen and (min-width: 768px) {
    .pageTitleBox.blue{height: 80px;}
    .pageTitleBox.white{height: 150px;}
}
@media screen and (max-width: 767px){
    .pageTitleBox.blue,
    .pageTitleBox.white{
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 50px;
        border-bottom: 1px solid #E6EDF1;
    }
}


/* ######################################################################################

　ハンバーガーメニュー：meanMenu

###################################################################################### */
/* ====================================================
　3＠デフォルト　※基本的には変更しない
==================================================== */
/* ＋－のはみ出し防止 */
.meanMenuAcc ul li,
.mean-container .mean-nav ul li {
    position: relative;
    z-index: 10;
    width: 88%!important;
    left: 50%;
    transform: translateX(-50%);
}
.meanMenuAcc ul li a.meanAcc-expand,
.mean-container .mean-nav ul li a.mean-expand {
    background: none !important;
    border: none !important;
}
.mean-container .mean-bar {
    padding: 0;
    min-height: 0;
}
.header {
    width: 100%;
    position: relative;
}
.mean-container .mean-bar {height: 0;}
.meanMenuAcc ul li a,
.mean-container .mean-nav ul li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.meanMenuAcc ul li a:not(.meanAcc-expand),
.mean-container .mean-nav ul li a:not(.mean-expand) {width: 100% !important;}


/* 重なり順 DF
-------------------------------------*/
.header {z-index: 9999;}
.mean-bar {z-index: 10000;}

/* ×スタイル DF
-------------------------------------*/
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(1) {transform: rotate(45deg);}
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(2) {opacity: 0;}
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(3) {transform: rotate(-45deg);}

/* ＋・－　スタイル DF
-------------------------------------*/
.meanMenuAcc ul li a.meanAcc-expand,
.mean-container .mean-nav ul li a.mean-expand {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px !important;
}

.meanMenuAcc ul li a.meanAcc-expand:before,
.meanMenuAcc ul li a.meanAcc-expand:after,
.mean-container .mean-nav ul li a.mean-expand:before,
.mean-container .mean-nav ul li a.mean-expand:after {
    content: "";
    display: block;
    position: absolute;
}
.meanMenuAcc ul li a.meanAcc-expand.meanAcc-clicked:after,
.mean-container .mean-nav ul li a.mean-expand.mean-clicked:after {display: none;}

/* MENU・CLOSE　スタイル DF
-------------------------------------*/
.mean-container a.meanmenu-reveal em {
    display: block;
    position: absolute;
    width: 100%;
    text-indent: 0;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    color: #000000;
    font-size: 11px;
}

/* スクロール対応 DF
-------------------------------------*/
.meanmenu-reveal.meanclose + .mean-nav {
    box-sizing: border-box;
    transition: height ease 0.3s;
    max-height: calc(100vh - 70px);
    /* 100% からヘッダの高さを引く*/
    overflow-y: scroll;
}

/* mmOpen時にbodyのスクロールを止める DF
-------------------------------------*/
/*
    html.mmOpen,
    html.mmOpen body {overflow: auto; height: 100%;}
    html.mmOpen body {overflow: hidden;}
*/
/* meanMenuAcc DF
-------------------------------------*/
.meanMenuAcc ul li a {
    display: block;
    border-top: 1px solid #383838;
    border-bottom: 1px solid #cccccc;
    text-decoration: none;
    text-transform: uppercase;
}
.meanMenuAcc ul {
    position: relative;
    z-index: 10;
}
.meanMenuAcc ul li {
    position: relative;
    float: left;
    width: 100%;
}
.meanMenuAcc ul li a.meanAcc-expand {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
}

/* #####################  ここから　meanMenu　個別設定  ##################### */
@media print, screen and (min-width: 768px) {
    .meanMenuAcc,
    .meanMenu {display: none !important;}
}
@media screen and (max-width: 767px) {

    .mmOpen {height:100vh; overflow:hidden;}

    /* =========================================================
    　ヘッダ高さ  ※[meanNavPush]にも設定
    ========================================================= */
    .header .contents {height: 70px;}
    .mean-container .mean-nav {
        margin-top: 70px;
        background:#ffffff;
        box-shadow:0 0 0 rgba(0,0,0,0);
        transition:box-shadow linear 0.5s;
    }
    .mmOpen .mean-container .mean-nav {box-shadow:0 5px 4px rgba(0,0,0,0.4);}
}
/* ====================================================
　≡ボタン
==================================================== */
.mean-container a.meanmenu-reveal {
    width: 70px;
    height: 70px;
    padding: 0;
    background: #005bac;
    background: -moz-linear-gradient(left,  #005bac 0%, #1381d6 100%);
    background: -webkit-linear-gradient(left,  #005bac 0%,#1381d6 100%);
    background: linear-gradient(to right,  #005bac 0%,#1381d6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005bac', endColorstr='#1381d6',GradientType=1 );
}
.mean-nav ul li li > a:not(fitst-of-child) {opacity: 1 !important;}

/* ====================================================
　≡スタイル
==================================================== */
.mean-container a.meanmenu-reveal span {
    position: relative;
    top: 15px;
    width: 40%;
    background: #ffffff;
    height: 2px;
    margin: 8px auto;
}

/* ====================================================
　×スタイル
==================================================== */
.mean-container a.meanmenu-reveal.meanclose span {
    top: 25px;
    left: 21px;
    width: 40%;
    background: #ffffff;
    height: 2px;
}

/* ====================================================
　MENU・CLOSE　スタイル
==================================================== */
.mean-container a.meanmenu-reveal em {
    bottom: 0;
    color: #000000;
    font-size: 11px;
}

/* ====================================================
　メニュースタイル
==================================================== */
.meanMenuAcc,
.mean-container .mean-nav {line-height:1; background: #252328;}

.meanMenuAcc > ul > li > a,
.mean-container .mean-nav > ul > li:not(.small) > a {
    background: #252328;
    border-top-color: #E1E1E1 !important;
    border-bottom:none !important;
    padding: 1.6em 3.5em 1.6em 5px !important;
    color: #ffffff;
    font-weight:bold;
    font-size:1.5rem;

}
.meanMenuAcc > ul > li.home > a,
.mean-container .mean-nav > ul > li.home > a {
    border-top:none;
    background:#005bac;
    color:#ffffff;
}
.meanMenuAcc > ul > li > ul > li > a,
.mean-container .mean-nav > ul > li > ul > li > a {
    background: #ffffff;
    border-top-color: #DBE2E6 !important;
    border-bottom:none !important;
    padding: 1.5em 3.5em 1.5em 15px !important;
    color: #005BAC;
    font-weight:bold;
    font-size:1.5rem;
}
.meanMenuAcc > ul > li > ul > li > ul > li a,
.mean-container .mean-nav > ul > li > ul > li > ul > li a {
    background: #ffffff;
    border-top-color: #DBE2E6 !important;
    border-bottom:none !important;
    color: #111111;
    font-size:1.3rem;
}
.meanMenuAcc > ul > li > ul > li > ul > li > a,
.mean-container .mean-nav > ul > li > ul > li > ul > li > a {
    padding: 1.2em 3.5em 1.2em calc(15px + 1em) !important;
}
.meanMenuAcc > ul > li > ul > li > ul > li > ul > li > a,
.mean-container .mean-nav > ul > li > ul > li > ul > li > ul > li > a {
    padding: 1.2em 3.5em 1.2em calc(15px + 2em) !important;
}

.meanMenuAcc > ul > li > ul > li > ul > li > ul > li > ul > li > a,
.mean-container .mean-nav > ul > li > ul > li > ul > li > ul > li > ul > li > a {
    padding: 1.2em 3.5em 1.2em calc(15px + 3em) !important;
}
.meanMenuAcc > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a,
.mean-container .mean-nav > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > a {
    padding: 1.2em 3.5em 1.2em calc(15px + 4em) !important;
}
.mean-container .mean-nav ul li:first-child a{margin-top: 2em;}

.mean-container .mean-nav ul li.small a{font-size: 1.3rem; font-weight: bold;}
.mean-container .mean-nav ul li.small:not(:last-child) a{padding: 3em 0 1em 5px!important;}
.mean-container .mean-nav ul li.small:last-child a{border-top: none; padding: 1em 0 1em 5px!important; margin-bottom: 3em;}






/* 下端の罫線 */
/*.meanMenuAcc ul li.mean-last a,
.mean-container .mean-nav > ul > li:last-child a {border-bottom: 1px solid #cccccc;}*/

/* ====================================================
　＋・－　スタイル
==================================================== */
.meanMenuAcc ul li a.meanAcc-expand,
.mean-container .mean-nav ul li a.mean-expand {
    width: 4em;
    height: 4em;
    background: none !important;
}
.mean-container .mean-nav ul > li > ul > li > ul > li a.mean-expand {
    width: 4em;
    height: 3em;
}


.meanMenuAcc ul li a.meanAcc-expand:before,
.meanMenuAcc ul li a.meanAcc-expand:after,
.mean-container .mean-nav ul li a.mean-expand:before,
.mean-container .mean-nav ul li a.mean-expand:after {
    background: #18639F;/* ＋－の色 */
    width: 1.25em;/* ＋－の間隔 */
    height: 2px; /* ＋－の太さ */
}

.meanMenuAcc ul li a.meanAcc-expand:before,
.mean-container .mean-nav ul li a.mean-expand:before {
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}
.meanMenuAcc ul li a.meanAcc-expand:after,
.mean-container .mean-nav ul li a.mean-expand:after {
    top:50%;
    left:50%;
    transform: translate(-50%,-50%) rotate(90deg);
}


/* ######################################################################################

    ページトップ

###################################################################################### */ 
.pageTop{}

@media print, screen and (min-width: 768px) {
    .pageTop{
        position: absolute!important;
        top: 50%;
        transform: translateY(-50%);
        right: 50px;
        width: 20px;
        height: 126px;
        background-image: url("../img/contents/waterjet/sub/pagetop.svg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 20px 126px;
        z-index: 8000;
        cursor: pointer;
        text-indent: -99999px;
    }
    
    .pageDown{
        position: absolute!important;
        top: 60%;
        transform: translateY(-60%);
        right: 50px;
        width: 20px;
        height: 136px;
        background-image: url("../img/contents/waterjet/sub/pagedown.svg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 20px 126px;
        z-index: 8000;
        cursor: pointer;
        text-indent: -99999px;
    }
}
@media screen and (max-width: 767px) {
    .pageTop{
        position: fixed;
        background: #005BAC;
        bottom: 80px;
        right: 15px;
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 8000;
    }
    .pageTop::after{
        position: absolute;
        content: "";
        background-image: url(../img/contents/waterjet/sub/ico_right_white_wj_sp.svg);
        background-repeat: no-repeat;
        background-position: center;
        width: 2em;
        height: 2em;
        transform: rotate(-90deg);
    }
}







/* ######################################################################################

　splitBox　等分割枠

###################################################################################### */
.splitBox {
    display:flex;
    flex-wrap:wrap;
    margin-bottom:1em;
}
.splitBox dl {border:1px solid #E6EDF1;}
.splitBox dt {
    background: #F5F8FA;
    padding: 0.75em;
    font-weight: bold;
}
.splitBox dd {padding: 0.75em;}

@media print, screen and (min-width: 768px) {
    .splitBox dl {width:50%;}
    .splitBox dl:nth-child(even) {border-left:none;}
}
@media print, screen and (max-width: 767px) {
    .splitBox dl {width:100%;}
    .splitBox dl+dl {margin-top:1em;}
}


/* ######################################################################################

      sunflex.column

###################################################################################### */
.sunflex.column3 > li + li,
.sunflex.column2 > li + li{margin-top: 2.5em;}


@media print, screen and (min-width: 768px) {
    .sunflex.column2 > li{width: 48%;}
    .sunflex.column2 > li:nth-of-type(2n){margin-left: 4%;}
    .sunflex.column2 > li:nth-of-type(1),
    .sunflex.column2 > li:nth-of-type(2){margin-top: 0;}
    
    .sunflex.column3 > li{width: 31.355932%; margin-left: 2.966102%;}
    .sunflex.column3 > li:nth-of-type(3n + 1){margin-left: 0;}
    .sunflex.column3 > li:nth-of-type(1),
    .sunflex.column3 > li:nth-of-type(2),
    .sunflex.column3 > li:nth-of-type(3){margin-top: 0;}
    
    .sunflex.column4 > li{width: 22.881355%; margin-left: 2.82486%;}
    .sunflex.column4 > li:nth-of-type(4n + 1){margin-left: 0;}
    .sunflex.column4 > li:nth-of-type(1),
    .sunflex.column4 > li:nth-of-type(2),
    .sunflex.column4 > li:nth-of-type(3),
    .sunflex.column4 > li:nth-of-type(4){margin-top: 0;}

    .mainColumn .sunflex.column2 > li{width: 48.125%;}
    .mainColumn .sunflex.column2 > li:nth-of-type(2n){margin-left: 3.75%;}
    .mainColumn .sunflex.column2 > li:nth-of-type(1),
    .mainColumn .sunflex.column2 > li:nth-of-type(2){margin-top: 0;}
    
    .mainColumn .sunflex.column3 > li{width: 31.25%; margin-left: 3.125%;}
    .mainColumn .sunflex.column3 > li:nth-of-type(3n + 1){margin-left: 0;}
    .mainColumn .sunflex.column3 > li:nth-of-type(1),
    .mainColumn .sunflex.column3 > li:nth-of-type(2),
    .mainColumn .sunflex.column3 > li:nth-of-type(3){margin-top: 0;}
    
    /* .mainColumn .sunflex li {display:flex; flex-wrap:wrap;} */
    .mainColumn .sunflex li > * {width:100%;}
    
}
@media screen and (max-width: 767px){
    .sunflex.column3 > li,
    .sunflex.column2 > li {width: 100%;}
    
    .sunflex.sp-column2 > li{width: 48%;}
    .sunflex.sp-column2 > li:nth-of-type(2n){margin-left: 4%;}
    .sunflex.sp-column2 > li:nth-of-type(1),
    .sunflex.sp-column2 > li:nth-of-type(2){margin-top: 0;}

    .sunflex + .sunflex {margin-top: 2.5em;}
}


/* ######################################################################################

　表：table

###################################################################################### */
/* ====================================================
　基本設定
==================================================== */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 1em;
}
caption {
    margin-bottom: 0.75em;
    text-align: left;
    font-size: 80%;
    font-weight: bold;
}

th, td {
    border-color: #E6EDF1;
    padding: 0.75em;
    text-align: left;
    font-weight: normal;
    font-size: 1.5rem;
    line-height: 1.85;
}
@media print, screen and (min-width: 768px) {
    th {
        font-weight: bold;
        background: #F5F8FA;
        padding: 0.75em;
        vertical-align: top;
    }
    td {padding: 0.75em;}
}
@media screen and (max-width: 767px) {
    th {
        font-weight: bold;
        background: #F5F8FA;
        padding: 0.75em;
    }
    td {padding: 0.75em;}
}

/* ====================================================
　囲み
==================================================== */
.borderHorizon th, .borderHorizon td {border-width: 1px 0;}
.borderHorizon tr + tr td, .borderHorizon tr + tr th {border-top-width: 0;}
* + .borderBox{margin-top: 3em;}

h1 + .borderBox,
h2 + .borderBox,
h3 + .borderBox,
h4 + .borderBox,
h5 + .borderBox,
h6 + .borderBox {margin-top:0;}

.pageResults .borderBox + table th,
.pageResults .borderBox + table td,
.borderBox th,
.borderBox td {border-width: 1px;}

.pageResults .borderBox + table tr + tr td,
.pageResults .borderBox + table tr + tr th,
.borderBox tr + tr td,
.borderBox tr + tr th {border-top-width: 0;}

.pageResults .borderBox + table th + th,
.pageResults .borderBox + table th + td,
.pageResults .borderBox + table td + td,
.pageResults .borderBox + table td + td,
.borderBox th + th,
.borderBox th + td,
.borderBox td + td,
.borderBox td + td {border-left-width: 0;}

/* ====================================================
　線種
==================================================== */
.pageResults .borderBox + table th,
.borderSolid th {border-style: solid;}

.pageResults .borderBox + table td,
.borderSolid td {border-style: solid;}

.pageResults .borderBox + table  td:before,
.borderSolid td:before {border-style: solid;}

.borderDotted th {border-style: dotted;}
.borderDotted td {border-style: dotted;}
.borderDotted td:before {border-style: dotted;}

.borderDashed th {border-style: dashed;}
.borderDashed td {border-style: dashed;}
.borderDashed td:before {border-style: dashed;}

/* ====================================================
　**のときTHをサイドに作る
==================================================== */
table.cell-xs-create td:before, table.cell-sm-create td:before, table.cell-md-create td:before, table.cell-lg-create td:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    border-width: 0 1px 0 0;
    border-color: #cccccc;
    background: #eeeeee;
    width: 6em;
    height: 100%;
    padding: 0.5em;
}
table.borderHorizon.cell-xs-create td:before, table.borderHorizon.cell-sm-create td:before, table.borderHorizon.cell-md-create td:before, table.borderHorizon.cell-lg-create td:before {border: none;}

@media screen and (max-width: 767px) {
    /* ====================================================
    　xsのときcellをBlock
    ==================================================== */
    table.xs-block {display: block;}
    table.xs-block caption, table.xs-block thead, table.xs-block tbody, table.xs-block tr, table.xs-block th, table.xs-block td {display: block;}
    table.xs-block th {
        padding-top: 0.3em;
        padding-bottom: 0.3em;
    }
    table.xs-block th + td,
    table.xs-block td + td {border-top-width: 0;}
    table.xs-block.borderBox td {border-left-width: 1px;}
    table.cell-xs-create th {display: none;}
    table.cell-xs-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-xs-create td:before {content: attr(title);}
    table.cell-xs-create td:nth-of-type(1) {border-top-width: 1px;}

    /* ====================================================
    　xsのとき横スクロール
    ==================================================== */
    .table-xs-scroll{overflow-x: scroll;}
    .table-xs-scroll table{width: 800px;}
}
@media print, screen and (max-width: 991px) {
    /* ====================================================
    　smのときcellをBlock
    ==================================================== */
    table.sm-block {display: block;}
    table.sm-block caption, table.sm-block thead, table.sm-block tbody, table.sm-block tr, table.sm-block th, table.sm-block td {display: block;}
    table.sm-block tr {margin-top: 0.5em;}
    table.sm-block tr + tr th {border-top-width: 1px;}
    table.sm-block th {
        padding-top: 0.3em;
        padding-bottom: 0.3em;
    }
    table.sm-block th + td,
    table.sm-block td + td {border-top-width: 0;}
    table.sm-block.borderBox td {border-left-width: 1px;}
    table.cell-sm-create th {display: none;}
    table.cell-sm-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-sm-create td:before {content: attr(title);}
    table.cell-sm-create td:nth-of-type(1) {border-top-width: 1px;}
}
@media screen and (max-width: 1199px) {
    /* ====================================================
    　mdのときcellをBlock
    ==================================================== */
    table.md-block {display: block;}
    table.md-block caption, table.md-block thead, table.md-block tbody, table.md-block tr, table.md-block th, table.md-block td {display: block;}
    table.md-block tr {margin-top: 0.5em;}
    table.md-block tr + tr th {border-top-width: 1px;}
    table.md-block th {
        padding-top: 0.3em;
        padding-bottom: 0.3em;
    }
    table.md-block th + td,
    table.md-block td + td {border-top-width: 0;}
    table.md-block.borderBox td {border-left-width: 1px;}
    table.cell-md-create th {display: none;}
    table.cell-md-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-md-create td:before {content: attr(title);}
    table.cell-md-create td:nth-of-type(1) {border-top-width: 1px;}
}
@media screen and (max-width: 9999px) {
    /* ====================================================
    　lgのときcellをBlock
    ==================================================== */
    table.lg-block {display: block;}
    table.lg-block caption, table.lg-block thead, table.lg-block tbody, table.lg-block tr, table.lg-block th, table.lg-block td {display: block;}
    table.lg-block tr {margin-top: 0.5em;}
    table.lg-block tr + tr th {border-top-width: 1px;}
    table.lg-block th {
        padding-top: 0.3em;
        padding-bottom: 0.3em;
    }
    table.lg-block th + td,
    table.lg-block td + td {border-top-width: 0;}
    table.lg-block.borderBox td {border-left-width: 1px;}
    table.cell-lg-create th {display: none;}
    table.cell-lg-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-lg-create td:before {content: attr(title);}
    table.cell-lg-create td:nth-of-type(1) {border-top-width: 1px;}
}


/* ######################################################################################

　text　テキスト

###################################################################################### */
p{font-size: 1.5rem; margin: 0 0 2em; line-height: 1.85;}
.textM{font-size: 1.4rem!important;}
.textS{font-size: 1.3rem!important;}




/* ######################################################################################

　title　タイトル

###################################################################################### */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.75em;
    padding: 0;
    line-height: 1.25;
    font-weight: bold;
  }
  
  @media print, screen and (min-width: 768px) {
    h1 {
      font-size: 40px;
      margin-bottom: 0;
    }
  }
  @media screen and (max-width: 767px) {
    h1 {
      font-size: 32px;
      margin-bottom: 0;
    }
  }
  
  @media print, screen and (min-width: 768px) {
    * + h2{margin-top: 3em;}
    h2 {
      font-size: 30px;
    }
  }
  @media screen and (max-width: 767px) {
    * + h2{margin-top: 3em;}
    h2 {
      font-size: 26px;
    }
  }
  
  @media print, screen and (min-width: 768px) {
    * + h3{margin-top: 3em;}
    h3 {
      font-size: 20px;
    }
  }
  @media screen and (max-width: 767px) {
    * + h3{margin-top: 3em;}
    h3 {
      font-size: 18px;
    }
  }
  
  @media print, screen and (min-width: 768px) {
    * + h4{margin-top: 3em;}
    h4 {
      font-size: 18px;
    }
  }
  @media screen and (max-width: 767px) {
    * + h4{margin-top: 3em;}
    h4 {
      font-size: 16px;
    }
  }
  
  @media print, screen and (min-width: 768px) {
    * + h5{margin-top: 3em;}
    h5 {
      font-size: 16px;
    }
  }
  @media screen and (max-width: 767px) {
    * + h5{margin-top: 2.5em;}
    h5 {
      font-size: 14px;
    }
  }
  
  @media print, screen and (min-width: 768px) {
    * + h6{margin-top: 1.5em;}
    h6 {
      font-size: 14px;
    }
  }
  @media screen and (max-width: 767px) {
    * + h6{margin-top: 1.5em;}
    h6 {
      font-size: 12px;
    }
  }

/* =======================================================
　titlePockey
========================================================== */
* + .titlePockey {margin-top:2em;}
.titlePockey {
    position: relative;
    overflow: visible;
}
.titlePockey span {
    padding: 0 0 0.7em 0;
    position: relative;
    display: inline-block;
}
.titlePockey span:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% - 15px);
    width: 1em;
    height: 3px;
}

@media print, screen and (min-width: 768px) {
    .titlePockey {
        font-size: 2.8rem;
        margin-bottom: 0.3em;
    }
}
@media screen and (max-width: 767px) {
    .titlePockey {
        font-size: 2.4rem;
        margin-bottom: 1.5em;
    }
}

/* サイズ
-------------------------------------*/
.titlePockey.small span {padding-bottom: 0.75em;}
.titlePockey.small span:before {
    top: 100%;
    height: 1px;
}

@media print, screen and (min-width: 768px) {
    .titlePockey.small {
        font-size: 1.6rem;
        margin-bottom: 1em;
    }
}
@media screen and (max-width: 767px) {
    .titlePockey.small {
        font-size: 1.5rem;
        margin-bottom: 1em;
    }
}

/* fix
-------------------------------------*/
.titlePockey.fix span:before {max-width: 1.5em;}

/* 色
-------------------------------------*/
/* グラデーション */
.titlePockey.gradation span:before{
    background: #18639F;
    background: -moz-linear-gradient(left,  #18639F 0%, #00A875 100%);
    background: -webkit-linear-gradient(left,  #18639F 0%,#00A875 100%);
    background: linear-gradient(to right,  #18639F 0%,#00A875 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18639F', endColorstr='#00A875',GradientType=1 );
}
.titlePockey.blue span:before{background: #005BAC;}

/* リンクあり
-------------------------------------*/
.titlePockey a{
    overflow: visible;
    display: block;
    position: relative;
    color: #111;
}
.titlePockey a span{
    position: relative;
    padding-left: 1.5em;
}
.titlePockey a span:after{
    content: "";
    position: absolute;
    left: 0;
    display: inline-block;
    top: 0.15em;
    margin-right: 0.5em;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url(../img/sub/ico_right_blue3.svg);
}
@media print, screen and (min-width: 768px) {
    .titlePockey a:hover{color: #005BAC;}
}

/* =======================================================
　catchCopy
========================================================== */
* + .catchCopy{margin-top: 2em;}
.catchCopy{font-weight: bold;}

@media print, screen and (min-width: 768px) {
    .catchCopy{font-size: 2.6rem; line-height: 1.6;}
    .catchCopy.small{font-size: 2.4rem;}
    .catchCopy.large{font-size: 3.0rem;}
}
@media screen and (max-width: 767px) {
    .catchCopy{font-size: 2.2rem; line-height: 1.5;}
    .catchCopy.small{font-size: 2.0rem;}
    .catchCopy.large{font-size: 2.4rem;}
}

/* 色
-------------------------------------*/
.catchCopy.blue,
.catchCopy span.blue{color: #005BAC;}

/* =======================================================
　titleSortLine
========================================================== */
* + .titleSortLine {margin-top:2em;}
.titleSortLine{
    margin-bottom: 1.5em;
    position: relative;
    padding-bottom: 0.5em;
}
.titleSortLine:before{
    content: "";
    display: block;
    position: absolute;
    top: calc(100% - 2px);
    width: 100%;
    height: 3px;
    max-width: 1.5em;
}
@media print, screen and (min-width: 768px) {
    .titleSortLine{font-size: 2.2rem;}
}
@media screen and (max-width: 767px) {
    .titleSortLine{font-size: 2.0rem;}
}

/* 色
-------------------------------------*/
/* グラデーション */
.titleSortLine.gradation:before{
    background: #18639F;
    background: -moz-linear-gradient(left,  #18639F 0%, #00A875 100%);
    background: -webkit-linear-gradient(left,  #18639F 0%,#00A875 100%);
    background: linear-gradient(to right,  #18639F 0%,#00A875 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18639F', endColorstr='#00A875',GradientType=1 );
}
/* 青 */
.titleSortLine.blue:before{background: #005BAC;}

/* 英語
-------------------------------------*/
.titleSortLine.langDouble{font-size: 1.5rem;}
.titleSortLine .en{
  margin-bottom: 0.25em;
  font-weight: 400;
}
@media print, screen and (min-width: 768px) {
  .titleSortLine .en{display: block; font-size: 5.2rem;}
}
@media screen and (max-width: 767px) {
  .titleSortLine .en{
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em;
    font-size: 2.8rem;
  }
}

/* ラインの長さ
-------------------------------------*/
.titleSortLine.lineWide:before{max-width: 2em;}


/* =======================================================
　titleUnderLeftLine
========================================================== */
* + .titleLeftUnderLine {margin-top:2em;}
.titleLeftUnderLine {
    margin-bottom: 1.0em;
    position: relative;
    padding-bottom: 0.75em;
    border-bottom: 1px solid #E6EDF1;
}
.titleLeftUnderLine span {
    position: relative;
    display: inline-block;
    padding-left: 0.75em;
    border-left-width: 2px;
    border-left-style: solid;
    text-decoration:none;
    color:#111111;
}
.titleLeftUnderLine.gradation span {border-left-width: 0;}
.titleLeftUnderLine.gradation span:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:4px;
    height:100%;
    background: #18639F;
    background: -moz-linear-gradient(top,  #18639F 0%, #00A875 100%);
    background: -webkit-linear-gradient(top,  #18639F 0%,#00A875 100%);
    background: linear-gradient(to bottom,  #18639F 0%,#00A875 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18639F', endColorstr='#00A875',GradientType=0 );
}
@media print, screen and (min-width: 768px) {
    .titleLeftUnderLine{font-size: 2.0rem;}
    .titleLeftUnderLine.gradation {font-size:2.2rem;}
    .titleLeftUnderLine .button {
		padding:0.7em 1em 0.6em 1.5em;
        float:right;
        margin-top:-5px;
    }
}
@media screen and (max-width: 767px) {
    .titleLeftUnderLine{font-size: 1.8rem;}
    .titleLeftUnderLine.gradation {font-size:2.0rem;}
    .titleLeftUnderLine.link {margin-bottom:4.5em;}
    .titleLeftUnderLine .button {
		padding:1.15em 2em;
        position:absolute;
        top:calc(100% + 1em) !important;
        display:block;
        margin:0 auto 1em;
        left:0;
        right:0;
        max-width:250px;
    }
    .titleLeftUnderLine .button:active,
    .titleLeftUnderLine .button:hover {
        top:calc(100% + 1em) !important;
    }
}

/* 色
-------------------------------------*/
/* 青 */
.titleLeftUnderLine.blue span{border-left-color: #005BAC;}



/* =======================================================
  titleUnderLine
========================================================== */
* + .titleUnderLine {margin-top:2.5em;}
.titleUnderLine{
    margin-bottom: 1.5em;
    position: relative;
    padding-bottom: 0.75em;
    border-bottom: 1px solid #E6EDF1;
  }
  
  
  @media print, screen and (min-width: 768px) {
    .titleUnderLine{font-size: 2.0rem;}
  }
  @media screen and (max-width: 767px) {
    .titleUnderLine{font-size: 1.8rem;}
  }
  
  /* tag
  -------------------------------------*/
  .titleUnderLine .tag{
    display: inline-block;
    vertical-align: middle;
    background: #ccc;
    color: #fff;
  }
  .titleUnderLine .tag img{
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.25em;
  }
  
  @media print, screen and (min-width: 768px) {
    .titleUnderLine .tag{
      display: inline-block;
      margin-right: 1.5em;
      padding: 0.75em 1.5em;
    }
    .titleUnderLine .tag{font-size: 1.5rem;}
  }
  @media screen and (max-width: 767px) {
    .titleUnderLine .tag{
        display: block;
        margin: 0 0 1em;
        padding: 0.5em 0.75em;
        text-align: center;
      }
    .titleUnderLine .tag{font-size: 1.3rem;}
  }
  
  /* 色 */
  .titleUnderLine .tag.blue{
    background: #005BAC;
  }
  

.bold{font-weight: bold;}

/* =======================================================
    titleBg
========================================================== */
* + .titleBg {margin-top:2em;}
.titleBg{
    margin-bottom: 1em;
    padding: 0.8em;
    font-weight: bold;
}
.titleBg.small{
    padding: 0.8em;
    padding-left: 1.25em;
    padding-right: 1.25em;
}

@media print, screen and (min-width: 768px) {
    .titleBg{font-size: 1.8rem;}
    .titleBg.small{font-size: 1.3rem;}
}
@media screen and (max-width: 767px) {
    .titleBg{font-size: 1.6rem;}
    .titleBg.small{font-size: 1.3rem;}
}

/* 色
-------------------------------------*/
.titleBg.gray{background-color: #F5F8FA;}
.titleBg.blue{background-color: #005BAC; color: #fff;}
.titleBg.brown{background-color: #8E6E58; color: #fff;}
.titleBg.lightBlue{background-color: #5FC2E8; color: #fff;}
.titleBg.navy{background-color: #001C4C; color: #fff;}
.titleBg.amairo{background-color: #1381d6; color: #fff;}
.titleBg.gradation{
    background: #18639F;
    background: -moz-linear-gradient(left,  #005BAC 0%, #1381D6 50%, #1381D6 70%, #00A875 100%);
    background: -webkit-linear-gradient(left,  #005BAC 0%, #1381D6 50%,#1381D6 70%, #00A875 100%);
    background: linear-gradient(to right,  #005BAC 0%, #1381D6 50%,#1381D6 70%, #00A875 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005BAC', endColorstr='#00A875',GradientType=1 );
    color: #fff;
}


/* =======================================================
    titleBold
========================================================== */
* + .titleBold {margin-top:3em;}
.titleBold{
    margin-bottom: 1.5em;
    font-weight: bold;
}
@media print, screen and (min-width: 768px) {
    .titleBold{font-size: 2.8rem;}
    .titleBold.large{font-size: 3.2rem;}
}
@media screen and (max-width: 767px) {
    .titleBold{font-size: 1.8rem;}
}

/* 色
-------------------------------------*/
.titleBold .blue,
.titleBold.blue{color: #005BAC;}




/* ######################################################################################

　お問い合わせフォーム用パーツ

###################################################################################### */
/* =======================================================
　その他職種応募フォーム
========================================================== */
.other_title_history_1,
.other_title_history_2,
.other_title_history_3{
    background-color: #F5F8FA;
    margin-top: 2em;
    margin-bottom: 1em;
    padding: 0.8em;
    font-weight: bold;
    }
.other_title_history_1 + .other_text{margin-bottom: 2em; color: #DC0000;}

.other_dl_enrollment_status_1,.other_dl_enrollment_status_2,
.other_title_history_3 + .other_dl_other{border-top: none !important; }


@media print, screen and (min-width: 768px){
.other_title_history_1,.other_title_history_2,.other_title_history_3{font-size: 1.8rem;}
}
@media screen and (max-width: 767px){
.other_title_history_1,.other_title_history_2,.other_title_history_3{font-size: 1.6rem;}
}





/* ######################################################################################

　topicsInfo　新着お知らせ

###################################################################################### */
.topicsInfo.borderSolid .entry {
    border-style: solid;
  }
  .topicsInfo.borderDashed .entry {
    border-style: dashed;
  }
  .topicsInfo.borderDotted .entry {
    border-style: dotted;
  }
  .topicsInfo.topBorder .entry:first-child {
    border-top-width: 1px;
  }
  .topicsInfo .entry {
    border-color: #dddddd;
    border-bottom-width: 1px;
    position: relative;
    line-height: 1.5;
  }
  .topicsInfo .entry a {
    color: #333333;
    text-decoration: none;
  }
  .topicsInfo .entry a:hover {
    text-decoration: underline;
  }
  .topicsInfo .tag {
    display: inline-block;
    font-size: 1.1rem;
    background: #cccccc;
    border-radius: 2px;
    padding: 0.3em 0.5em;
    white-space: nowrap;
    vertical-align: middle;
    margin: 0 0 0 1em;
    min-width: 6em;
    text-align: center;
    line-height: 1;
  }
  @media print, screen and (min-width: 768px) {
    .topicsInfo .entry {
      font-size: 15px;
    }
    .topicsInfo .tag {
      font-size: 10px;
    }
    .topicsInfo.dateBlock .date {
      padding: 0.7em 0.7em 0;
      font-size: 100%;
    }
    .topicsInfo.dateBlock .text {
      padding: 0.5em 0.7em 0.7em;
    }
    .topicsInfo.dateInline .date {
      display: table-cell;
      white-space: nowrap;
      padding: 10px;
      font-size: 100%;
    }
    .topicsInfo.dateInline .text {
      display: table-cell;
      padding: 10px;
    }
  }
  @media screen and (max-width: 767px) {
    .topicsInfo .entry {
      padding: 10px 0;
      font-size: 15px;
    }
    .topicsInfo .tag {
      font-size: 10px;
    }
    .topicsInfo .date {
      margin-bottom: 0.5em;
      padding: 0 5px;
      font-size: 100%;
    }
    .topicsInfo .text {
      padding: 0 5px;
    }
  }
  
  
  /* new */
  .topicsInfo .entry .new{color: #f00;}
  
  



/* ######################################################################################

　topicPath　パンくず

###################################################################################### */
.topicPath {
    width: 100%;
    padding: 1em 0;
    margin-bottom: 40px;
    clear: both;
    line-height: 1;
    background: #ffffff;
}
.topicPath ol {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    font-size: 0;
}
.topicPath.paddingR ol {padding-right: calc(50% - 260px + 5px);}
.topicPath ol li {font-size: 1.2rem;}
.topicPath ol li:before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 7px;
    background-image: url(../img/sub/ico_right_gray.svg);
    background-repeat: no-repeat;
    background-size: 100%;
}
.topicPath ol li:first-child:before {
    width: 11px;
    height: 12px;
    background-image: url(../img/sub/ico_home.svg);
}
.topicPath ol li a {
    color: #333333;
    text-decoration: none;
}
.topicPath ol li br{
    display: none;
}

@media print, screen and (min-width: 768px) {
    .topicPath {
        display: block;
        min-height: 44px;
    }
    .topicPath li {display: inline-block;}
    .topicPath li:before {
        margin-right: 0.25em;
        margin-left: 0.25em;
    }
    .topicPath a:hover {text-decoration: underline;}
}
@media screen and (max-width: 767px) {
    .topicPath {display: none;}
    .topicPath li + li {margin-top: 0.25em;}
    .topicPath li:before {
        margin-right: 0.75em;
        margin-left: 0.75em;
        margin-left: 0;
    }
}


/* ######################################################################################

　youtube 埋め込み

###################################################################################### */
.youtubeBox{margin: 2em 0;}

.youtube{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.youtube iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 767px) {
    iframe[src*="youtube"] {
        max-width: 100%;
        height: calc((100vw - 40px)/16*9);
        max-height: 310px;
    }
}


/* ######################################################################################

　wallBelt　帯背景

###################################################################################### */
.wallBelt {
    overflow: hidden;
    padding-top: 30px;
    padding-bottom: 30px;
}
@media print, screen and (min-width: 768px) {
    .wallBelt {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .wallBelt.narrow {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .wallBelt.wide {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .wallBelt.extra {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .wallBelt.topNarrow {padding-top: 15px;}
    .wallBelt.topWide {padding-top: 60px;}
    .wallBelt.topExtra {padding-top: 100px;}
    .wallBelt.bottomNarrow {padding-bottom: 15px;}
    .wallBelt.bottomWide {padding-bottom: 60px;}
    .wallBelt.bottomExtra {padding-bottom: 100px;}
}
@media screen and (max-width: 767px) {
    .wallBelt {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .wallBelt.narrow {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .wallBelt.wide {
        padding-top: 45px;
        padding-bottom: 45px;
    }
    .wallBelt.extra {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .wallBelt.topNarrow {padding-top: 15px;}
    .wallBelt.topWide {padding-top: 45px;}
    .wallBelt.topExtra {padding-top: 60px;}
    .wallBelt.bottomNarrow {padding-bottom: 15px;}
    .wallBelt.bottomWide {padding-bottom: 45px;}
    .wallBelt.bottomExtra {padding-bottom: 60px;}
}
.wallBelt.gray {background: #f8f9fa;}
.wallBelt.blue {background: #93adfb;}
.wallBelt.zero {
    padding-top: 0;
    padding-bottom: 0;
}
.wallBelt.topZero {padding-top: 0;}
.wallBelt.bottomZero {padding-bottom: 0;}


/* ######################################################################################

　youtube　モーダル

###################################################################################### */
.movieList .youtube {padding-top:0 !important;}
.youtubeVideo {position:relative; display:block;}
.youtubeVideo img {object-fit:cover; width:100%;}
.youtube-playbutton {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:60px;
    height:44px;
}
.youtube-playbutton-base {
    fill: #212121;
    fill-opacity: .8;
    transition:all 0.15s ease;
}
@media print, screen and (min-width: 768px) {
    .youtubeVideo img {height:149px;}
    .youtubeVideo:hover .youtube-playbutton-base {fill: #f00; fill-opacity:1;}
}
@media screen and (max-width: 767px) {
    .youtubeVideo img {height:calc((100vw - 60px)/16*9);}
}