@charset "UTF-8";
/* ==========================================================================

    Theme Name: rakusai
    Theme URI: http://
    Author: Yuria Shoji
    Author URI: http://kiu.co.jp/
    Version: 1.0

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

@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/NotoSansCJKjp-Thin.eot'); /* IE9 Compat Modes */
    src: url('../fonts/NotoSansCJKjp-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/NotoSansCJKjp-Thin.woff') format('woff'), /* Modern Browsers */
    url('../fonts/NotoSansCJKjp-Thin.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/NotoSansCJKjp-Light.eot');
    src: url('../fonts/NotoSansCJKjp-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NotoSansCJKjp-Light.woff') format('woff'),
    url('../fonts/NotoSansCJKjp-Light.ttf')  format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/NotoSansCJKjp-DemiLight.eot');
    src: url('../fonts/NotoSansCJKjp-DemiLight.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NotoSansCJKjp-DemiLight.woff') format('woff'),
    url('../fonts/NotoSansCJKjp-DemiLight.ttf')  format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/NotoSansCJKjp-Regular.eot');
    src: url('../fonts/NotoSansCJKjp-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NotoSansCJKjp-Regular.woff') format('woff'),
    url('../fonts/NotoSansCJKjp-Regular.ttf')  format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/NotoSansCJKjp-Medium.eot');
    src: url('../fonts/NotoSansCJKjp-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NotoSansCJKjp-Medium.woff') format('woff'),
    url('../fonts/NotoSansCJKjp-Medium.ttf')  format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/NotoSansCJKjp-Bold.eot');
    src: url('../fonts/NotoSansCJKjp-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NotoSansCJKjp-Bold.woff') format('woff'),
    url('../fonts/NotoSansCJKjp-Bold.ttf')  format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/NotoSansCJKjp-Black.eot');
    src: url('../fonts/NotoSansCJKjp-Black.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NotoSansCJKjp-Black.woff') format('woff'),
    url('../fonts/NotoSansCJKjp-Black.ttf')  format('truetype');
}

html {
    font-size: 62.5%;
}

body {
    background: #F2F2F2;
    color: #3F3F3F;
    font-family: sans-serif;
    font-size: 14px; font-size: 1.4rem;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

::-moz-selection {
    background: #A4DDF1;
    text-shadow: none;
}

::selection {
    background: #A4DDF1;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

p{ margin: 0; }

ul,ol,li,dl,dt,dd{
    margin: 0;
    padding: 0;
    list-style: none;
}

img{
    max-width: 100%; 
    height:auto;
}

a,
a:hover{
    color: #15B3D2;
}

a:hover{
    text-decoration: underline;
}

a:focus{
    outline: none;
    color: #15B3D2;
    text-decoration: none;
}


audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

button{
    outline: none;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.modal-header:before,
.modal-header:after {
    content: " ";
    display: table;
}

.modal-header:after {
    clear: both;
}

.modal-header {
    *zoom: 1;
}

.block{ display: block; }

.mb10{ margin: 0 0 10px; }
.mb20{ margin: 0 0 20px; }
.mb30{ margin: 0 0 30px; }
.mb40{ margin: 0 0 40px; }

.mr5{ margin: 0 5px 0 0; }
.ml5{ margin: 0 0 0 5px; }

.mtb10{ margin: 10px 0; }

.rgt{ text-align: right; }
.ctr{ text-align: center; }


.inl-block{ display: inline-block; }

.pc{ display: none; }

.btn-blue{
    position: relative;
    display: block;
    overflow: hidden;
    width: 140px;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    border: none;
    -webkit-box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    -moz-box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    -o-box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    -ms-box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    background: #27B4D0;
    color: #fff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.btn-blue:hover,
.btn-pink:hover,
.btn-gray:hover{
    color: #fff;
    text-decoration: none;
}

.btn-blue:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #23A2BB;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.btn-blue:hover:before,
.btn-blue:focus:before,
.btn-blue:active:before,
.btn-pink:hover:before,
.btn-pink:focus:before,
.btn-pink:active:before,
.btn-gray:hover:before,
.btn-gray:focus:before,
.btn-gray:active:before{
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.btn-pink{
    position: relative;
    display: block;
    overflow: hidden;
    width: 140px;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    border: none;
    -webkit-box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    -moz-box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    -o-box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    -ms-box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    background: #FF97AF;
    color: #fff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.btn-pink:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FF6E8F;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.btn-gray{
    position: relative;
    display: block;
    overflow: hidden;
    width: 140px;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    border: none;
    -webkit-box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    -moz-box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    -o-box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    -ms-box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    box-shadow: 2px 2px 2px rgba(165,165,165,0.2);
    background: #D6DBE0;
    color: #fff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.btn-gray:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #BDC5CD;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.btn-nav{
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    border: none;
    -webkit-box-shadow: 2px 2px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    -moz-box-shadow: 2px 2px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    -o-box-shadow: 2px 2px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    -ms-box-shadow: 2px 2px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    box-shadow: 2px 2px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    background: #F9F9F9;
    color: #26B2D0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    font-size: 16px; font-size: 1.6rem;
    font-weight: bold;
}

.btn-nav:hover{
    -webkit-box-shadow: 2px 2px 2px rgba(165,165,165,0.2), 0 0 5px rgba(165,165,165,0.2);
    -moz-box-shadow: 2px 2px 2px rgba(165,165,165,0.2), 0 0 5px rgba(165,165,165,0.2);
    -o-box-shadow: 2px 2px 2px rgba(165,165,165,0.2), 0 0 5px rgba(165,165,165,0.2);
    -ms-box-shadow: 2px 2px 2px rgba(165,165,165,0.2), 0 0 5px rgba(165,165,165,0.2);
    box-shadow: 2px 2px 2px rgba(165,165,165,0.2), 0 0 5px rgba(165,165,165,0.2);
    background: #27B4D0;
    color: #fff;
    text-decoration: none;
}

.btn-white{
    position: relative;
    display: inline-block;
    overflow: hidden;
    /*width: 135px;*/
    height: 38px;
    line-height: 36px;
    margin: 0;
    padding: 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #D8D8D8;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0);
    color: #3F3F3F;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
}

.btn-white:hover{
    border: 1px solid #D8D8D8;
    background: #e5e5e5;
    color: #3F3F3F;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
}

.btn-white i{
    color: #BFBFBF;
    font-size: 18px; font-size: 1.8rem;
}

.btn-outline-blue{
    display: inline-block;
    padding: 4px 12px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #65C8E0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    color: #65C8E0;
    text-decoration: none;
}

.btn-outline-blue:hover,
.btn-outline-blue.hover{
    background: #74CDE3;
    color: #fff;
    text-decoration: none;
}

.btn-outline-gray{
    display: inline-block;
    padding: 4px 12px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #E5E5E5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    color: #3F3F3F;
    text-decoration: none;
    vertical-align: middle;
}

.btn-outline-gray:hover,
.btn-outline-gray.hover{
    background: #F2F2F2;
    color: #3F3F3F;
    text-decoration: none;
}

.btn-outline-navy{
    display: inline-block;
    padding: 4px 12px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #214149;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    color: #214149;
    text-decoration: none;
    vertical-align: middle;
}

.btn-outline-navy:hover,
.btn-outline-navy.hover{
    background: #214149;
    color: #fff;
    text-decoration: none;
}
.btn-outline-pink{
    display: inline-block;
    padding: 4px 12px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #D44C71;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    color: #D44C71;
    text-decoration: none;
    vertical-align: middle;
}

.btn-outline-pink:hover,
.btn-outline-pink.hover{
    background: #D44C71;
    color: #fff;
    text-decoration: none;
}

select {
    position: relative;
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    display: inline;
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border:1px solid #D8D8D8;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    background: #f2f2f2;
    background: url(../img/arrow_select@3x.png) right 50% no-repeat, -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: url(../img/arrow_select@3x.png) right 50% no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
    background: url(../img/arrow_select@3x.png) right 50% no-repeat, -webkit-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    background: url(../img/arrow_select@3x.png) right 50% no-repeat, -o-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    background: url(../img/arrow_select@3x.png) right 50% no-repeat, -ms-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    background: url(../img/arrow_select@3x.png) right 50% no-repeat, linear-gradient(to bottom, #ffffff 0%,#f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0);
    background-size: 24px 7px,100%;
    cursor: pointer;
    text-indent: .01px; /*Firefox*/
    text-overflow: ""; /*Firefox*/
    outline: none;
}

select::-moz-focus-inner {
    border: 0px;
}
select::-ms-expand {
  display: none;
}

select::-ms-expand {
  display: none;
}

select.multiple{
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#f2f2f2 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0);
    background-size: 100%;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea{
    width: 100%;
    margin: 0;
    padding: 0 10px;
    border: none;
    border: 1px solid #D8D8D8;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
    resize: none;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"]{
    height: 36px;
    line-height: 36px;
}

label{
    position: relative;
}

.one-set{
    width: 100%;
}

.num-input{
    width: 50%;
}

input[type="text"].two-set,
input[type="password"].two-set,
input[type="email"].two-set,
input[type="tel"].two-set,
select.two-set{
    display: inline-block;
    width: 45%;
}
.wrapper{
    margin: 0 10px;
}

.form-control{
    color: #3F3F3F;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control{
    background: #f2f2f2;
}

/* ==============
    MOBILE: Header
   ============== */

#header-container{
    position: relative;
    height: 80px;
    margin: 20px 0;
}

#header-container .logo{
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

#header-container .logo a{
    overflow: hidden;
    display: block;
    width: 80px;
    height: 0;
    padding: 80px 0 0;
    background: url(../img/logo_rakusai@3x.png) no-repeat left top;
    background-size: 80px;
    text-align: center;
}

#header-container .logo-mha{
    position: absolute;
    display: block;
    overflow: hidden;
    width: 74px;
    height: 0;
    top: 0;
    right: 10px;
    padding: 15px 0 0;
    background: url(../img/logo_mha.png) no-repeat left top;
    background-size: 74px 15px;
}

.sb-toggle-left{
    position: absolute;
    display: block;
    top: 0;
    left: 10px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #65C8E0;
    font-size: 30px; font-size: 3.0rem;
}

.btn-white{
    width: 100%;
}

.nav-slide{
    padding: 0 10px;
}

.side-menu{
    margin: 0 -10px 20px;
    border-top: 1px solid #35555D;
}

.side-menu li a{
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid #35555D;
    color: #B9C3C8;
}

.side-menu li a:hover,
.side-menu li.active a{
    background: #17373F;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
}

.side-menu li a i{
    margin: 0 10px 0 0;
    font-size: 20px; font-size: 2.0rem;
}

.side-menu .btn-white{
    width: 100%;
}

.nav-slide .login-info{
    margin: 10px 0;
    color: #B9C3C8;
}

/* ==============
    MOBILE: Main
   ============== */

#main-container{
    padding: 0 0 40px;
}

#main-container .hx-main{
    position: relative;
    line-height: 1.4;
    margin: 0 0 20px;
    padding: 0 0 0 14px;
    font-weight: normal;
    font-size: 24px; font-size: 2.4rem;
}

#main-container .hx-main:before{
    position: absolute;
    content: " ";
    display: block;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #27B4D0;
    background: -moz-linear-gradient(top, #27B4D0 0%, #A4DDF1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27B4D0), color-stop(100%,#A4DDF1));
    background: -webkit-linear-gradient(top, #27B4D0 0%,#A4DDF1 100%);
    background: -o-linear-gradient(top, #27B4D0 0%,#A4DDF1 100%);
    background: -ms-linear-gradient(top, #27B4D0 0%,#A4DDF1 100%);
    background: linear-gradient(to bottom, #27B4D0 0%,#A4DDF1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27B4D0', endColorstr='#A4DDF1',GradientType=0);
}

#main-container .alert-error{
    margin: 0 0 20px;
    padding: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    background: #FCD8D8;
    color: #D50008;
    text-align: center;
}

#main-container .alert-info{
    margin: 0 0 20px;
    padding: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    background: #CDECF5;
    color: #2fb3da;
    text-align: center;
}


#main-container .alert-message{
    margin: 0 0 20px;
    padding: 10px 20px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    background: #FBD9E2;
    color: #D44C71;
}

.alert-osl{
    margin: 20px 0;
    padding: 10px 20px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    background:#d5defa;
    color: #395ed7;
}

#main-container i{
    margin-right: 5px;
}

#main-container .card{
    margin: 0 0 30px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    background: #fff;
    -webkit-box-shadow:1px 1px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    -moz-box-shadow:1px 1px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    -o-box-shadow:1px 1px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    -ms-box-shadow:1px 1px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    box-shadow:1px 1px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
}

#main-container .card-header{
    position: relative;
    padding: 20px 0 0;
}

#main-container .card-header h2.hx-sub,
.modal-body .hx-sub{
    margin: 0 0 20px;
    padding: 0 10px;
    font-size: 20px; font-size: 2.0rem;
    font-weight: bold;
    text-align: left;
}

.modal-body .hx-sub{
    margin-top: 10px;
    padding: 0;
}

#main-container .card-header .hx-line,
.modal-body .hx-line{
    display: block;
    width: 100%;
    height: 3px;
    background: #27b4d0;
    background: -moz-linear-gradient(left, #27b4d0 0%, #a4ddf1 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#27b4d0), color-stop(100%,#a4ddf1));
    background: -webkit-linear-gradient(left, #27b4d0 0%,#a4ddf1 100%);
    background: -o-linear-gradient(left, #27b4d0 0%,#a4ddf1 100%);
    background: -ms-linear-gradient(left, #27b4d0 0%,#a4ddf1 100%);
    background: linear-gradient(to right, #27b4d0 0%,#a4ddf1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27b4d0', endColorstr='#a4ddf1',GradientType=1 );
}

.modal-body .form-group .form-parts .num-input{
    width: 50%;
}

#main-container .card-body{
    padding: 20px 10px;
}

#main-container .card-body .form-area dt{
    margin: 0 0 10px;
    color: #204048;
    font-weight: bold;
}

#main-container .card-body .form-area dd{
    margin: 0 0 20px;
    font-weight: normal;
}

#main-container .card-body .dl-news,
#main-container .card-body .dl-inquiry{
    margin: 0 -10px;
}

#main-container .card-body .dl-news dt,
#main-container .card-body .dl-inquiry dt{
    margin: 0 0 5px;
    padding: 0 10px;
    color: #204048;
    font-size: 12px; font-size: 1.2rem;
}

#main-container .card-body .dl-news dd,
#main-container .card-body .dl-inquiry dd{
    margin: 0 0 10px;
    padding: 0 10px 10px;
    border-bottom: 1px solid #D8D8D8;
}

.dl-news a{
    color: #0A4371;
}

#main-container .card-body .dl-news-detail dt{
    margin: 0 0 10px;
    color: #204048;
}

#main-container .card-body .dl-news-detail dd{
    margin: 0 0 20px;
}

#main-container .summary{
    margin: 0 0 10px;
}

#main-container .summary .dl-arrow{
    width:100%;
    height: 60px;
    margin: 0 0 20px;
}

#main-container .summary .dl-arrow dt{
    position: relative;
    float: left;
    display: inline;
    width: 40%;
    height: 60px;
    line-height: 60px;
    background: #27B4D0;
    color: #fff;
    font-size: 18px; font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
}

#main-container .summary .dl-arrow.gray dt{
    background: #909090;
}

#main-container .summary .dl-arrow.pink dt{
    background: #FF6E8F;
}

#main-container .summary .dl-arrow dt:after{
    content: " ";
    position: absolute;
    display: block;
    top: 0;
    right: -20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 0 30px 20px;
    border-color: transparent transparent transparent #27B4D0;
}

#main-container .summary .dl-arrow.gray dt:after{
    border-color: transparent transparent transparent #909090;
}

#main-container .summary .dl-arrow.pink dt:after{
    border-color: transparent transparent transparent #FF6E8F;
}

#main-container .summary .dl-arrow dd{
    height: 60px;
    line-height: 60px;
    padding: 0 0 0 50%;
    -webkit-box-shadow:1px 1px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    -moz-box-shadow:1px 1px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    -o-box-shadow:1px 1px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    -ms-box-shadow:1px 1px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    box-shadow:1px 1px 2px rgba(165,165,165,0.2), 0 0 3px rgba(165,165,165,0.2);
    background: #65C8E0;
    color: #fff;
    font-size: 16px; font-size: 1.6rem;
    text-align: center;
}

#main-container .summary .dl-arrow dd a{
    color: #fff;
    text-decoration: underline;
}


#main-container .summary .dl-arrow.gray dd{
    background: #ABABAB;
}

#main-container .summary .dl-arrow.pink dd{
    background: #FF97AF;
}

#main-container .summary .dl-arrow dd span{
    font-size: 35px; font-size: 3.5rem;
    font-weight: bold;
}

.emp-btn-area{
    margin: 0 0 20px;
}

.emp-btn-area .btn-pink{
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding: 0;
    font-size: 18px; font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    color: #fff;
}
.emp-btn-area .btn-pink:hover{
    color: #fff;
    text-decoration: none;
}

#page-link{
    margin: 0 -10px;
}

#page-link li{
    float: left;
    display: inline;
    width: 50%;
    margin: 0;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#page-link li .btn-nav{
    width: 100%;
    padding: 32px 0;
    margin: 0 0 16px;
}

#page-link li .btn-nav .ico{
    display: block;
    height: 41px;
    margin: 0 0 10px;
    color: #A4DDF1;
    font-size: 40px; font-size: 4.0rem;
}

#page-link li .btn-nav .ico i{
    line-height: 41px;
    vertical-align: top;
}

.form-col2 label{
    color: #214149;
}

.form-col2 p.full span{
    display: block;
    width: 100%;
}

.checkbox-inline,
.form-col2 label.checkbox-inline{
    margin: 0 10px 10px 0;
    padding: 0;
    color: #3F3F3F;
}

.checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline{
    margin-left: 0;
}

.checkbox-inline .icheckbox_flat-blue{
    margin: 0 5px 0 0;
}

.btn-area{
    text-align: right;
}

.btn-area li{
    display: inline-block;
    margin: 0 0 10px 10px;
}

.tbl-area{
    margin: 0 -10px;
}

.tbl-area table{
    table-layout: fixed;
}

.table-striped thead{
    display: block;
    float: left;
    border-right: 2px solid #E0E5EA;
    border-top: 1px solid #d8d8d8;
}

.table-striped th{
    display: block;
    width: auto;
    height: 50px;
    color: #214149;
    font-weight: bold;
    font-size: 12px; font-size: 1.2rem;
}

.table-striped > thead > tr > th{
    padding: 8px 10px;
    border-bottom: 1px solid #d8d8d8;
}

.table-striped tbody{
    display: block;
    width: auto;
    border-top: 1px solid #d8d8d8;
    overflow-x: auto;
    white-space: nowrap;
}

.table-striped tbody tr{
    display: inline-block;
    margin: 0 -3px;
    border-left: 1px solid #d8d8d8;
}

.table-striped td{
    display: block;
    height: 50px;
    font-size: 12px; font-size: 1.2rem;
}

.table>tbody>tr>td{
    padding: 8px 10px;
    border-top: none;
    border-bottom: 1px solid #d8d8d8;
}

.table-striped th.check-area{
    min-height: 42px;
}

.table-striped td i{
    margin: 0 0 0 5px;
}

.table-striped td i.fa-home{
    font-size: 18px; font-size: 1.8rem;
}

.table-striped .btn-blue{
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 1.4;
    padding: 5px 5px;
    font-size: 12px; font-size: 1.2rem;
}

.page-number{
    margin: 0 0 10px;
}

.pagination-area{
    text-align: center;
}

.pagination{
    margin: 0 0 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
}

.pagination>li>a,
.pagination>li>span{
    color: #15B3D2;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover{
    border-color: #15B3D2;
    background-color: #15B3D2;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover{
    color: #15B3D2;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span{
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.pagination>li:last-child>a,
.pagination>li:last-child>span{
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.modal-title{
    margin: 0;
    font-size: 18px; font-size: 1.8rem;
    font-weight: normal;
    color: #fff;
}

.modal-header .modal-header-rgt{
    text-align: right;
}

.modal-header .modal-header-rgt .btn-outline-navy,
.modal-header .modal-header-rgt .btn-outline-pink{
    font-weight: bold;
}

.modal-content{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
}

.modal-header{
    margin: 0 0 20px;
    padding: 8px 10px;
    border-bottom: none;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    background: #69C8DE;
}

.modal-body .line-area{
    margin: 0 -10px 20px;
}

.modal-body{
    padding: 0 10px 20px;
    max-height : -webkit-calc(100vh - 115px);
    max-height: calc(100vh - 115px);
    overflow-y: auto;
}

.modal-body.noscroll{
    max-height: auto;
    overflow-y: hidden;
}

#job_create .modal-body{
    max-height : -webkit-calc(100vh - 210px);
    max-height: calc(100vh - 210px);
}

.modal-header .close{
    margin: 3px 0 0;
}

.modal-body section{
    position: relative;
}

.modal-body .top-btn-area{
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    text-align: right;
}

.modal-body .top-btn-area li{
    display: inline-block;
    margin: 0 0 0 10px;
}

.modal-body .top-btn-area li .btn-blue{
    width: auto;
    padding: 0 10px;
}

.modal-body .form-group label{
    color: #214149;
}

.modal-body .form-group label.checkbox-inline{
    color: #3F3F3F;
}

.modal-footer{
    padding: 8px 10px;
    text-align: left;
    background: #E6F0FA;
    color: #214149;
}

.modal-footer p span{
    display: inline-block;
    margin: 0 0 0 10px;
}

.modal-footer p span i{
    margin: 0 2px 0 0;
    color: #15B3D2;
}

.required,
.optional,
.recommend,
.notice{
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin: 0 0 0 10px;
    padding: 0 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    color:#fff;
    font-size: 12px; font-size: 1.2rem;
    font-weight: normal;
}

.required{
    background: #EB416E;
}

.optional{
    background: #27B4D0;
}

.recommend{
    background: #395ed7;
}

.notice{
    color: #000;
}

.has-error{
    color: #EB416E;
    font-size: 12px; font-size: 1.2rem;
}

.progress-bar{
    background-color: #27B4D0;
}

.form-inline{
    width: 45%;
}

.tbl-area .new{
    display: inline-block;
    margin: 0 3px 0 0;
    padding: 0 3px;
    border: 1px solid #EB416F;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    color: #EB416F;
    font-size: 12px; font-size: 1.2rem;
}

.tbl-area .update{
    display: inline-block;
    margin: 0 3px 0 0;
    padding: 0 3px;
    border: 1px solid #FF8047;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    color: #FF8047;
    font-size: 12px; font-size: 1.2rem;
}

.tbl-area .commision{
    display: inline-block;
    margin: 0 3px 0 0;
    padding: 0 3px;
    border: 1px solid #953C90;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    color: #953C90;
    font-size: 12px; font-size: 1.2rem;
}


.form-control[readonly]::-webkit-input-placeholder {
    opacity:0;
}

.form-control[readonly]::-moz-placeholder {
    opacity:0;
}

.form-control[readonly]:-ms-input-placeholder {
    opacity:1;
    color:#f2f2f2;
}

.toggleblock{

    overflow: hidden;
    display: inline-block !important;
    margin: 0 5px 0 0;
    width: 20px !important;
    height: 0;
    padding: 20px 0 0;
    background: url(../img/btn_plus@2x.png) no-repeat left center;
    background-size: 20px;
    cursor: pointer;
    vertical-align: bottom;
}

.modal-body .top-btn-area li.fac_file_btn_li,
.modal-body .top-btn-area li#fac_file_btn_li{
    display: none;
}

.message-guide span{
    position: relative;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    margin: 0 15px 0 0;
    padding: 0 5px 0 10px;
    border-radius: 2px 0 0 2px;
    background: #27B4D0;
    color: #fff;
}

.message-guide span:after{
    content: " ";
    position: absolute;
    display: block;
    top: 0;
    right: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 5px;
    border-color: transparent transparent transparent #27B4D0;
}

.message-step{
    margin: 20px -10px;
    padding: 10px;
    border-bottom: 1px solid #27b4d0;
}

.message-step .ttl{
    font-weight: bold;
    font-size: 16px; font-size: 1.6rem;
    color: #27b4d0;
}

.open-cont{
    width: 100%;
}

.flex-wrap{
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: stretch;
}

.form-flex{
    flex: 1;
}

.flex-wrap .txt-lft{
    display: inline-block;
    height: 36px;
    line-height: 36px;
    margin: 0 10px 0 0;
}

.flex-wrap .txt-ctr{
    display: inline-block;
    height: 36px;
    line-height: 36px;
    margin: 0 10px;
}

.flex-wrap .txt-rgt{
    display: inline-block;
    height: 36px;
    line-height: 36px;
    margin: 0 0 0 10px;
}

.top-btn-area{
    text-align: right;
}

.top-btn-area li{
    display: inline-block;
    margin: 0 0 10px 10px;
}

.top-btn-area li .btn-blue,
.top-btn-area li .btn-pink{
    width: auto;
    padding: 0 10px;
}

.hx-btn-area{
    margin: 10px 10px 10px 0;
}

.job-title .hx-btn-area{
    margin: 10px 0 0;
}

.job-title{
    position: relative;
    margin: 10px 10px 0;;
}

.hx-job-title{
    line-height: 1.6;
    margin: 0;
    font-size: 16px; font-size: 1.6rem;
    font-weight: bold;
}

.requirements{
    margin: 0 0 10px;
    text-align: right;
}

.part_open_item{
    padding: 3px;
    background-color: #FBF106;
}

 #copyfacname{
     display: inline-block;
     margin: 5px 0 0;
     padding: 3px 8px;
     border-radius: 3px;
     background: #CDECF5;
 }

.detail-label{
    padding: 3px;
    background: #ffd1dc;
}

#main-container .cont-area{
    padding: 0 10px;
}

#main-container .cont-area .dl-inl{
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}

#main-container .cont-area .dl-inl dt{
    margin: 0 20px 0 0;
}

#main-container .cont-area .dl-inl dt .icheckbox_flat-blue{
    margin: 0 0 0 10px;
}

#main-container .cont-area .dl-inl dd{

}

.li-job-anchor li{
    display: inline-block;
    margin: 0 10px 10px 0;
}

.li-job-anchor li a{
    display: block;
    margin: 0;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #395ed7;
    border-radius: 2px;
    color: #395ed7;
    text-decoration: none;
    text-align: center;
}

#main-container .li-job-anchor li a i{
    margin: 0 0 0 10px;
}

.tooltip, .tooltip2 {
    position: relative;
    color: #17373F;
    margin: 0 0 0 5px;
}
.hint {
    text-align: left;
    position: absolute;
    z-index: 1;
    transition: opacity 500ms;
    width: 260px;
    bottom: 125%;
    left: 50%; 
    margin-left: -30px;
}

.hint.adjusted{
    margin-left: -230px;
}

.tooltip.large .hint{
    width: 480px;
    margin-left: -60px;
    bottom: 0;
    top: 125%;
}
.hint > .text {
    background-color: rgba(53,85,93,0.9);
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px; font-size: 1.2rem;
    display: inline-block;
    line-height: 1.4;
}
.hint > .text::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 30px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(53,85,93,0.9) transparent transparent transparent;
}

.hint.adjusted > .text::after {
    left: 230px;
}

.tooltip.large .hint > .text::after {
    left: 60px;
    top: inherit;
    bottom: 125%;
    border-color: transparent transparent rgba(53,85,93,0.9) transparent;
}

.check-blc-box .checkbox-inline{
    display: block;
}

.edit-col2{
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: stretch;
    margin: 0 -10px;
}

.edit-col2 .form-group{
    width: 50%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/* ==============
    MOBILE: Footer
   ============== */

#footer-container .footer-upper{
    padding: 0 10px 10px;
    background-color: #f2f2f2;
}

#footer-container .privacymark {
    display: flex;
    align-items: center;
    line-height: 1.2;
    font-size: 0.9em;
}

#footer-container .privacymark .mark {
    background-color: transparent;
    width: 80px;
    height: auto;
    margin-right: 20px;
}

#footer-container .wrapper{
    margin: 0;
    width: 100%;
    border-top: 1px solid #D8D8D8;
    background: #F9F9F9;
}

#footer-container .copy{
    height: 40px;
    line-height: 40px;
    margin: 0;
    text-align: center;
}


/* login footer */
#login + #footer-container .footer-upper {
    margin: 0 auto;
    padding: 0 0 10px;
    max-width: 400px;
}

#login + #footer-container .privacymark {
    justify-content: center;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

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

    .pc{ display: block; }
    .sp{ display: none; }

    .tb-ctr{
        text-align: center;
    }

    .tb-right{
        text-align: right;
    }

    body{
        font-family: 'Noto Sans Japanese', sans-serif;
        background: #214149;
    }

    .wrapper {
        /*width: 90%;
        margin: 0 5%;*/
       margin: 0;
    }

/* ============
    WIDE: Header
   ============ */

    #header-container{
        height: 160px;
        margin: 0;
        background: #69C8DE;
    }
    
    #header-container .logo{
        width: 160px;
        height: 160px;
    }
    
    #header-container .logo a{
        width: 160px;
        padding: 160px 0 0;
        background: url(../img/logo_rakusai_pc.png) no-repeat center center;
        background-size: 120px;
    }

    #header-container .logo-mha{
        display: none;
    }

    #side-bar{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 100%;
        background: #214149;
    }

    .side-menu{
        margin: 0;
    }

    .btn-white{
        width: 135px;
    }

/* ============
    WIDE: Main
   ============ */

    #main-container{
        position: relative;
        margin: 0 0 0 200px;
        padding: 0 0 20px;
        background: #f2f2f2;
    }

    #main-container #top-nav{
        position: relative;
        margin: 0 0 30px;
        padding: 12px 40px;
        -webkit-box-shadow: 0 1px 1px rgba(165,165,165,0.2);
        -moz-box-shadow: 0 1px 1px rgba(165,165,165,0.2);
        -o-box-shadow: 0 1px 1px rgba(165,165,165,0.2);
        -ms-box-shadow: 0 1px 1px rgba(165,165,165,0.2);
        box-shadow: 0 1px 1px rgba(165,165,165,0.2);
        background: #FFFFFF;
        text-align: right;
    }

    #main-container #top-nav .logo-mha{
        position: absolute;
        overflow: hidden;
        display: block;
        top: 16px;
        left: 40px;
        width: 148px;
        height: 0;
        padding: 30px 0 0;
        background: url(../img/logo_mha.png) no-repeat left top;
        background-size: contain;
    }

    #main-container #top-nav .login-info{
        display: inline-block;
        height: 38px;
        line-height: 38px;
        margin: 0 10px 0 0;
        vertical-align: top;
    }

    #main-container .main article{
        margin: 0 40px;
    }

    #main-container .hx-main{
        line-height: 1.4;
        padding: 0 0 0 16px;
        font-size: 30px; font-size: 3.0rem;
    }

    #main-container .hx-main:before{
        width: 6px;
    }

    #main-container .alert-error,
    #main-container .alert-info{
        font-size: 16px; font-size: 1.6rem;
    }

    #main-container .card-header h2.hx-sub{
        padding: 0 20px;
    }

    #main-container .card-body{
        padding: 20px;
    }

    #main-container .card-body .dl-news,
    #main-container .card-body .dl-inquiry{
        margin: 0 -20px;
    }

    #main-container .card-body .dl-news dt,
    #main-container .card-body .dl-inquiry dt{
        float: left;
        display: inline;
        width: 20%;
        margin: 0 0 5px;
        padding: 0 20px;
        color: #204048;
        font-size: 12px; font-size: 1.2rem;
    }

    #main-container .card-body .dl-news dd,
    #main-container .card-body .dl-inquiry dd{
        margin: 0 0 10px;
        padding: 0 20px 10px 20%;
        border-bottom: 1px solid #D8D8D8;
    }

    #main-container .summary{
        margin: 0 0 10px -25px;
    }

    #main-container .summary .dl-arrow,
    #main-container .summary .emp-btn-area{
        float: left;   /*2つ以上並ぶとき*/
        display: inline;   /*2つ以上並ぶとき*/
        width: 50%;   /*2つ並ぶとき*/
        /*width:33.3%;   3つ並ぶとき*/
        padding: 0 0 0 25px;
    }

    #page-link li{
        float: left;
        display: inline;
        margin: 0;
        padding: 0 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    #page-link .col3 li{
        width: 33.3%;
    }

    #page-link .col4 li{
        width: 25%;
    }

    #page-link li .btn-nav{
        width: 100%;
        padding: 27px 0;
        margin: 0 0 16px;
    }

    #page-link li .btn-nav .ico{
        height: 51px;
        font-size: 50px; font-size: 5.0rem;
    }

    #page-link li .btn-nav .ico i{
        line-height: 51px;
        vertical-align: top;
    }

    .form-col2{
        -js-display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        align-items: stretch;
        margin: 0 0 0 -40px;
    }

    .form-col2 p{
        display: inline-block;
        width: 50%;
        padding: 0 20px 0 40px;
    }

    .form-col2 p.full{
        display: block;
        width: 100%;
        padding: 0 0 0 40px;
    }

    .btn-area li{
        margin: 0 0 0 20px;
    }

    .tbl-area{
        margin: 0 -20px;
    }

    .table-striped thead{
        display: table-header-group;
        float: none;
        border: none;
    }

    .table-striped th{
        display: table-cell;
        width: auto;
        height: auto;
        text-align: center;
        font-size: 13px; font-size: 1.3rem;
    }

    .table-striped > thead > tr > th{
        border-bottom: 2px solid #E0E5EA;
    }

    .table-striped tbody{
        display: table-row-group;
        width: auto;
        overflow-x: visible;
        white-space: normal;
        border-top: none;
    }

    .table-striped tbody tr{
        display: table-row;
        border:none;
    }

    .table-striped tbody tr:hover{
        background: #F0FAFF;
    }

    .table-striped td{
        display: table-cell;
        font-size: 13px; font-size: 1.3rem;
    }

    .table-striped>tbody>tr>td{
        vertical-align: middle;
    }

    .table-striped>tbody>tr>td,
    .table-striped>tbody>tr>th,
    .table-striped>tfoot>tr>td,
    .table-striped>tfoot>tr>th,
    .table-striped>thead>tr>td,
    .table-striped>thead>tr>th{
        padding: 10px 5px;
    }

    .table-striped>thead>tr>th{
        padding: 10px 5px;
    }

    .table-striped>thead>tr>th:first-of-type,
    .table-striped>tbody>tr>td:first-of-type{
        padding: 10px 5px 10px 10px;
    }

    .table-striped>thead>tr>th:last-of-type,
    .table-striped>tbody>tr>td:last-of-type{
        padding: 10px 10px 10px 5px;
    }

    .table-striped th.check-area{
        min-height: auto;
    }

    .table-striped .btn-blue{
        display: block;
    }

    #company-top .table-striped th.th-copy{
        width: 28%;
    }

    #joblist .table-striped th.th-copy{
        width: 20%;
    }

    .modal-title{
        margin: 0;
        font-size: 20px; font-size: 2.0rem;
        display: inline;
        width: 65%;
        float: left;
    }

    .modal-header .modal-header-rgt{
        display: inline;
        float: right;
        width: 30%;
        padding: 0 10px 0 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .modal-header .modal-header-rgt .btn-outline-navy{
        text-align: left;
    }

    .modal-header,
    .modal-footer{
        padding: 12px 20px;
    }

    .modal-body .line-area{
        margin: 0 -20px 0;
    }

    .modal-body{
        padding: 0 20px 20px;
        max-height : -webkit-calc(100vh - 140px);
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }
    
    .modal-body.noscroll{
        max-height: none;
        overflow-y: hidden;
        font-size: 100%;
    }

    #job_create .modal-body{
        max-height : -webkit-calc(100vh - 220px);
        max-height: calc(100vh - 220px);
    }

    .modal-body .form-group{
        margin: 0 -20px;
        padding: 20px;
        border-bottom: 1px solid #D8D8D8;
    }

    .modal-body .form-group label{
        float: left;
        display: inline;
        width: 25%;
    }

    .modal-body .form-group label.checkbox-inline{
        float: none;
        display: inline-block;
        width: auto;
    }

    .modal-body .form-group .form-parts{
        float: right;
        display: inline;
        width: 75%;
    }

    .modal-body .form-group .form-parts .one-set{
        width: 50%;
    }

    .modal-body .form-group .form-parts .num-input{
        width: 25%;
    }

    .has-error{
        display: block;
        margin: 5px 0 0;
        color: #EB416E;
        font-size: 12px; font-size: 1.2rem;
    }

    .form-inline{
        width: 47%;
    }

    .modal-body .top-btn-area li .btn-blue{
        width: 140px;
        padding: 0;
    }

    .modal-body .top-btn-area li.fac_file_btn_li,
    .modal-body .top-btn-area li#fac_file_btn_li{
        display: inline-block;
    }

    .message-guide{
        margin: 20px 0;
    }

    .message-step{
        margin: 20px -20px;
        padding: 10px 20px;
    }
    
    .message-step .ttl{
        font-weight: bold;
        font-size: 18px; font-size: 1.8rem;
    }

    .job-title{
        margin: 20px;
    }

    .hx-btn-area{
        position: absolute;
        top: 5px;
        right: 20px;
    }

    .job-title .hx-btn-area{
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
    }

    .hx-job-title{
        font-size: 18px;
        font-size: 1.8rem;
    }

    .th-jobcount{
        width: 50px !important;
    }

    #main-container .cont-area{
        padding: 0 20px;
    }

	.topphoto_radio_container {
		float : left;
		margin : 5px;
	}
	.topphoto_radio_container img, .topphoto_radio_container .upload_div {
		height : 150px;
		padding : 4px;
		border-radius : 3px;
		box-shadow : 0px 0px 1px black;
		cursor : pointer;
	}
	.topphoto_radio_container .upload_div {
		width : min-150px;
	}
	.topphoto_delete_button {
		display : block;
		margin : 5px 1px;
		width : max-content;
		cursor : pointer;
	}

/* ============
    WIDE: Footer
   ============ */

    #footer-container{
        position: relative;
        margin: 0 0 0 200px;
    }

    #footer-container .footer-upper{
        padding: 0 40px 20px;
    }

    #footer-container .privacymark {
        font-size: 1em;
    }
    
    #footer-container .privacymark .mark {
        width: 100px;
    }


}

@media only screen and (min-width: 1140px) {

    .wrapper {
        /*width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }

/* ============
    PC: Header
   ============ */


/* ============
    PC: Main
   ============ */

    .wrapper{
        width: 100%;
        margin: 0;
    }

    #main-container .bdr-box .news .date{
        float: left;
        display: inline;
        width: 20%;
        margin: 0 0 10px;
    }

    #main-container .bdr-box .news .info{
        display: block;
        padding: 0 0 10px 20%;
    }

    #main-container .item-detail .cart-area{
        margin: 0 0 10px;
    }

    #main-container .item-detail .cart-area .btn-area{
        float: left;
        display: inline;
        width: 254px;
        padding: 0 0 0 20px;
    }

    #main-container .item-detail .share{
        float: right;
        display: inline;
        width: auto;
        margin: 0 0 0 20px;
    }
    
    #main-container .item-detail .share li a{
        display: block;
        height: 46px;
        line-height: 46px;
        color: #DCDED6;
    }

    #main-container .login-form{
        margin: 0 0 20px;
    }

    #main-container .login-form dt{
        float: left;
        display: inline;
        width: 30%;
        height: 46px;
        line-height: 46px;
        margin: 0;
    }

    #main-container .login-form dd{
        padding: 0 0 0 30%;
    }

    #main-container .hgt-area{
        height: 200px;
    }
    
    .top-btn-area li .btn-blue,
    .top-btn-area li .btn-pink{
        width: 140px;
        padding: 0;
    }


/* ============
    PC: Footer
   ============ */


}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}


/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

/*    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }*/
}

.hideseek{
    display: none;
}







/* ==========================================================================
   応募
   ========================================================================== */



.tag{
    display: inline-block;
    line-height: 1;
    margin: 0 0 0 5px;
    padding: 2px 3px;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    font-size:11px; font-size: 1.1rem;
    font-weight: bold;
}

.tag-o-red{
    border: 1px solid #EF5350;
    color: #EF5350;
}

.tag-o-blue{
    border: 1px solid #27B4D0;
    color: #27B4D0;
}