@charset 'UTF-8';
/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;
*/
/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  @include sprite-width($icon-home);
}

.icon-email {
  @include sprite($icon-email);
}
*/
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/*! normalize.scss v2.1.2 | MIT/GPLv2 License | bit.ly/normalize-with-compass */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary
{
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video
{
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls])
{
    display: none;

    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */
[hidden]
{
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 */
html
{
    font-family: sans-serif;

  /* 1 */
        -ms-text-size-adjust: 100%;
  /* 2 */
    -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body
{
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus
{
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover
{
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1
{
  /* Set the font-size and line-height while keeping a proper vertical rhythm. */
    font-size: 2em;

  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
    margin-top: .75em;
    margin-bottom: .75em;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title]
{
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong
{
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn
{
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr
{
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark
{
    color: #000;
    background: #ff0;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp
{
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre
{
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */
q
{
    quotes: '\201C' '\201D' '\2018' '\2019';
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small
{
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup
{
    font-size: 75%;
    line-height: 0;

    position: relative;

    vertical-align: baseline;
}

sup
{
    top: -.5em;
}

sub
{
    bottom: -.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */
/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img
{
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root)
{
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure
{
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
fieldset
{
    margin: 0 2px;
    padding-top: .4625em;
    padding-right: .875em;
    padding-bottom: .9125em;
    padding-left: .875em;

  /* Apply borders and padding that keep the vertical rhythm. */
    border-color: #c0c0c0;
    border-top-width: .0625em;
    border-top-style: solid;
    border-right-width: .0625em;
    border-right-style: solid;
    border-bottom-width: .0625em;
    border-bottom-style: solid;
    border-left-width: .0625em;
    border-left-style: solid;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */
legend
{
  /* 1 */
    padding: 0;

    border: 0;
  /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 * 4. Improve appearance and consistency with IE 6/7.
 */
button,
input,
select,
textarea
{
    font-family: inherit;
  /* 1 */
    font-size: 100%;

  /* 2 */
    margin: 0;
  /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input
{
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select
{
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */
button,
html input[type='button'],
input[type='reset'],
input[type='submit']
{
  /* 2 */
    cursor: pointer;

    -webkit-appearance: button;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled]
{
    cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */
input[type='checkbox'],
input[type='radio']
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  /* 1 */
    padding: 0;
  /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type='search']
{
    -webkit-box-sizing: content-box;
  /* 1 */
       -moz-box-sizing: content-box;
            box-sizing: content-box;

    -webkit-appearance: textfield;
  /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration
{
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner
{
    padding: 0;

    border: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea
{
    overflow: auto;

  /* 1 */
    vertical-align: top;
  /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table
{
    border-spacing: 0;
    border-collapse: collapse;
}

@font-face {
    font-family: 'C1m';

    src: url('../fonts/eot/C1m.eot?1498463302');
    src: url('../fonts/eot/C1m.eot?&1498463302#iefix') format('embedded-opentype'), url('../fonts/woff/C1m.woff?1498463302') format('woff'), url('../fonts/ttf/C1m.ttf?1498463302') format('truetype'), url('../fonts/eot/C1m.eot?1498463302') format('embedded-opentype');
}
html
{
    font-size: 10px;

    -webkit-text-size-adjust: 100%;
}
html.is-drawer-open
{
    overflow: hidden;
}

body
{
    font-family: '游ゴシック', YuGothic, KoburinaGo-W3-83pv-RKSJ-H, Helvetica, Arial, 'Hiragino Kaku Gothic ProN','ＭＳ Ｐゴシック' , 'Meiryo', sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;

    margin: auto;

    color: #4c4c4c;
    background: #f2f2f2;
}

*,
*:before,
*:after
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

a
{
    outline: none;
}
a img
{
    pointer-events: none;
}

a:link
{
    text-decoration: none;

    outline: none;
}

a:visited
{
    text-decoration: none;

    outline: none;
}

a:hover
{
    outline: none;
}

a:active
{
    text-decoration: none;

    outline: none;
}

.inherit
{
    color: inherit;
}

.util-mt0
{
    margin-top: 0 !important;
}

.util-pt0
{
    padding-top: 0 !important;
}

.util-mb0
{
    margin-bottom: 0 !important;
}

.util-pb0
{
    padding-bottom: 0 !important;
}

.util-mt5
{
    margin-top: 5px !important;
}

.util-pt5
{
    padding-top: 5px !important;
}

.util-mb5
{
    margin-bottom: 5px !important;
}

.util-pb5
{
    padding-bottom: 5px !important;
}

.util-mt10
{
    margin-top: 10px !important;
}

.util-pt10
{
    padding-top: 10px !important;
}

.util-mb10
{
    margin-bottom: 10px !important;
}

.util-pb10
{
    padding-bottom: 10px !important;
}

.util-mt15
{
    margin-top: 15px !important;
}

.util-pt15
{
    padding-top: 15px !important;
}

.util-mb15
{
    margin-bottom: 15px !important;
}

.util-pb15
{
    padding-bottom: 15px !important;
}

.util-mt20
{
    margin-top: 20px !important;
}

.util-pt20
{
    padding-top: 20px !important;
}

.util-mb20
{
    margin-bottom: 20px !important;
}

.util-pb20
{
    padding-bottom: 20px !important;
}

.util-mt25
{
    margin-top: 25px !important;
}

.util-pt25
{
    padding-top: 25px !important;
}

.util-mb25
{
    margin-bottom: 25px !important;
}

.util-pb25
{
    padding-bottom: 25px !important;
}

.util-mt30
{
    margin-top: 30px !important;
}

.util-pt30
{
    padding-top: 30px !important;
}

.util-mb30
{
    margin-bottom: 30px !important;
}

.util-pb30
{
    padding-bottom: 30px !important;
}

.util-mt35
{
    margin-top: 35px !important;
}

.util-pt35
{
    padding-top: 35px !important;
}

.util-mb35
{
    margin-bottom: 35px !important;
}

.util-pb35
{
    padding-bottom: 35px !important;
}

.util-mt40
{
    margin-top: 40px !important;
}

.util-pt40
{
    padding-top: 40px !important;
}

.util-mb40
{
    margin-bottom: 40px !important;
}

.util-pb40
{
    padding-bottom: 40px !important;
}

.util-mt45
{
    margin-top: 45px !important;
}

.util-pt45
{
    padding-top: 45px !important;
}

.util-mb45
{
    margin-bottom: 45px !important;
}

.util-pb45
{
    padding-bottom: 45px !important;
}

.util-mt50
{
    margin-top: 50px !important;
}

.util-pt50
{
    padding-top: 50px !important;
}

.util-mb50
{
    margin-bottom: 50px !important;
}

.util-pb50
{
    padding-bottom: 50px !important;
}

.util-borderbottom
{
    border-bottom: 1px solid #d9d9d9;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    margin: 0;
}

ul,
ol,
li
{
    margin: 0;
    padding: 0;

    list-style-type: none;
}

p
{
    margin: 0;
}

dl
{
    margin: 0;
    padding: 0;
}

dd
{
    margin: 0;
}

img
{
    vertical-align: top;
}

em
{
    font-style: normal;
}

.ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail
{
    display: block;
}
.ps-container > .ps-scrollbar-y-rail
{
    position: absolute;
    right: 0;

    display: none;

    width: 5px;
    margin: 10px 0;

  /* please don't change 'position' */
    -webkit-transition: background-color .2s linear, opacity .2s linear;
       -moz-transition: background-color .2s linear, opacity .2s linear;
         -o-transition: background-color .2s linear, opacity .2s linear;
            transition: background-color .2s linear, opacity .2s linear;

    border-radius: 2px;
    background-color: #4d4d4d;
  /* there must be 'right' for ps-scrollbar-y-rail */
}
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y
{
    position: absolute;
    right: 0;

  /* there must be 'right' for ps-scrollbar-y */
    width: 5px;

  /* please don't change 'position' */
    -webkit-transition: background-color .2s linear;
       -moz-transition: background-color .2s linear;
         -o-transition: background-color .2s linear;
            transition: background-color .2s linear;

    border-radius: 2px;
    background-color: #00b9a7;
}
.ps-container > .ps-scrollbar-y-rail.in-scrolling
{
    opacity: .9;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
        filter: alpha(opacity=90);
}
.ps-container:hover > .ps-scrollbar-x-rail,
.ps-container:hover > .ps-scrollbar-y-rail
{
    opacity: .9;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
        filter: alpha(opacity=90);
}
.ps-container:hover > .ps-scrollbar-x-rail.in-scrolling,
.ps-container:hover > .ps-scrollbar-y-rail.in-scrolling
{
    opacity: .9;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
        filter: alpha(opacity=90);
}
.ps-container:hover > .ps-scrollbar-x-rail:hover
{
    opacity: .9;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
        filter: alpha(opacity=90);
}
.ps-container:hover > .ps-scrollbar-y-rail:hover
{
    opacity: .9;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
        filter: alpha(opacity=90);
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;

    -moz-box-sizing: border-box;
         box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}

.slick-list:focus
{
    outline: none;
}

.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}

.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}

.slick-track:after
{
    clear: both;
}

.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide
{
    float: right;
}

.slick-slide img
{
    display: block;
}

.slick-slide.slick-loading img
{
    display: none;
}

.slick-slide.dragging img
{
    pointer-events: none;
}

.slick-initialized .slick-slide
{
    display: block;
}

.slick-loading .slick-slide
{
    visibility: hidden;
}

.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}

.c1m
{
    font-family: 'C1m', sans-serif;
}

.util-em, .contentBox--agent p span
{
    font-weight: bold;

    background: #f1f180;
}

.fluid
{
    max-width: 100%;
    height: auto;
}

.util-fz8
{
    font-size: 8px !important;
    font-size: .8rem !important;
}

.util-fz9
{
    font-size: 9px !important;
    font-size: .9rem !important;
}

.util-fz10
{
    font-size: 10px !important;
    font-size: 1rem !important;
}

.util-fz11
{
    font-size: 11px !important;
    font-size: 1.1rem !important;
}

.util-fz12
{
    font-size: 12px !important;
    font-size: 1.2rem !important;
}

.util-fz13
{
    font-size: 13px !important;
    font-size: 1.3rem !important;
}

.util-fz14
{
    font-size: 14px !important;
    font-size: 1.4rem !important;
}

.util-fz15
{
    font-size: 15px !important;
    font-size: 1.5rem !important;
}

.util-fz16
{
    font-size: 16px !important;
    font-size: 1.6rem !important;
}

.util-fz17
{
    font-size: 17px !important;
    font-size: 1.7rem !important;
}

.util-fz18
{
    font-size: 18px !important;
    font-size: 1.8rem !important;
}

.util-fz19
{
    font-size: 19px !important;
    font-size: 1.9rem !important;
}

.util-fz20
{
    font-size: 20px !important;
    font-size: 2rem !important;
}

.util-fz21
{
    font-size: 21px !important;
    font-size: 2.1rem !important;
}

.util-fz22
{
    font-size: 22px !important;
    font-size: 2.2rem !important;
}

.util-fz23
{
    font-size: 23px !important;
    font-size: 2.3rem !important;
}

.util-fz24
{
    font-size: 24px !important;
    font-size: 2.4rem !important;
}

.util-fz25
{
    font-size: 25px !important;
    font-size: 2.5rem !important;
}

.util-fz26
{
    font-size: 26px !important;
    font-size: 2.6rem !important;
}

.util-fz27
{
    font-size: 27px !important;
    font-size: 2.7rem !important;
}

.util-fz28
{
    font-size: 28px !important;
    font-size: 2.8rem !important;
}

.util-fz29
{
    font-size: 29px !important;
    font-size: 2.9rem !important;
}

.util-fz30
{
    font-size: 30px !important;
    font-size: 3rem !important;
}

.util-fz31
{
    font-size: 31px !important;
    font-size: 3.1rem !important;
}

.util-fz32
{
    font-size: 32px !important;
    font-size: 3.2rem !important;
}

.util-fz33
{
    font-size: 33px !important;
    font-size: 3.3rem !important;
}

.util-fz34
{
    font-size: 34px !important;
    font-size: 3.4rem !important;
}

.util-fz35
{
    font-size: 35px !important;
    font-size: 3.5rem !important;
}

.util-fz36
{
    font-size: 36px !important;
    font-size: 3.6rem !important;
}

.util-fz37
{
    font-size: 37px !important;
    font-size: 3.7rem !important;
}

.util-fz38
{
    font-size: 38px !important;
    font-size: 3.8rem !important;
}

.util-fz39
{
    font-size: 39px !important;
    font-size: 3.9rem !important;
}

.util-fz40
{
    font-size: 40px !important;
    font-size: 4rem !important;
}

.util-fz41
{
    font-size: 41px !important;
    font-size: 4.1rem !important;
}

.util-fz42
{
    font-size: 42px !important;
    font-size: 4.2rem !important;
}

.util-fz43
{
    font-size: 43px !important;
    font-size: 4.3rem !important;
}

.util-fz44
{
    font-size: 44px !important;
    font-size: 4.4rem !important;
}

.util-fz45
{
    font-size: 45px !important;
    font-size: 4.5rem !important;
}

.util-fz46
{
    font-size: 46px !important;
    font-size: 4.6rem !important;
}

.util-fz47
{
    font-size: 47px !important;
    font-size: 4.7rem !important;
}

.util-fz48
{
    font-size: 48px !important;
    font-size: 4.8rem !important;
}

.fwb
{
    font-weight: bold !important;
}

.sp-show
{
    display: none;
}
@media screen and (max-width: 640px)
{
    .sp-show
    {
        display: block !important;
    }
}

@media screen and (max-width: 640px)
{
    .sp-hide
    {
        display: none !important;
    }
}

.textLink
{
    -webkit-transition: color .2s ease-out;
       -moz-transition: color .2s ease-out;
         -o-transition: color .2s ease-out;
            transition: color .2s ease-out;

    color: #00bba9 !important;
}
.textLink:hover
{
    color: #00e6cd !important;
}

/*
記事一覧の大きいアイテム

Markup:

Styleguide 36
*/
.articleItem > a
{
    display: block;

    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;

    color: inherit;
}
.articleItem > a:hover
{
    opacity: .7;
}

.articleItem-row
{
    display: table;

    width: 100%;
    min-height: 270px;

    table-layout: fixed;
}

.articleItem-image
{
    display: table-cell;

    width: 580px;

    vertical-align: top;

    background-repeat: no-repeat;
    background-position: 50% 30%;
    background-size: 100% auto;
}

.articleItem-image-inner
{
    position: relative;

    width: 100%;
    height: 100%;
}

.articleItem-tagLabel
{
    position: absolute;
    top: 0;
    right: 0;
}

.articleItem-text
{
    display: table-cell;

    width: 100%;
    padding: 30px 40px;

    vertical-align: top;

    background: #fafafa;
}

.articleItem-tagList
{
    margin: 0 0 10px;

    *zoom: 1;
}
.articleItem-tagList:before, .articleItem-tagList:after
{
    display: table;

    content: '';
}
.articleItem-tagList:after
{
    clear: both;
}
.articleItem-tagList > li
{
    float: left;

    margin: 0 3px 3px 0;
}
.articleItem-tagList .tag--page
{
    pointer-events: none;
}

.articleItem-lead
{
    font-size: 20px;
    font-size: 2rem;
    font-weight: bold;

    margin: 0 0 10px;

    color: #000;
}

.articleItem-name
{
    font-size: 14px;
    font-size: 1.4rem;

    margin: 0 0 10px;
}

.articleItem-description
{
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 2;

    padding: 5px 0 0;

    color: #333;
    border-top: 1px solid #d9d9d9;
}

/*
バナーエリア

Styleguide 15
*/
.bannerArea
{
    padding: 20px;

    text-align: center;

    border-bottom: 1px solid #d9d9d9;
}
.bannerArea:last-child
{
    border-bottom: none;
}
.bannerArea li
{
    margin: 0 0 20px;
}
.bannerArea li:last-child
{
    margin-bottom: 0;
}
.bannerArea a
{
    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}
.bannerArea a:hover
{
    opacity: .7;
}
.bannerArea.agent-banner a
{
    display: inline-block;
}

.bannerArea-image
{
    display: inline-block;

    width: 600px;
    height: 150px;

    vertical-align: top;
}
.bannerArea-image a
{
    display: block;
}

.bannerArea-text
{
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;

    display: inline-block;
}
.bannerArea-text > dt
{
    display: inline-block;

    padding: 0 10px 0 0;

    color: #00c9b5;
}
.bannerArea-text > dd
{
    display: inline-block;
}
.bannerArea-text a
{
    text-decoration: underline;

    color: #00e6cd;
}

.bannerArea-decoration
{
    color: #4c4c4c;
}

/*
パンくず

Markup:
<ul class="breadcrumb">
  <li><a href="#">TOP</a></li>
  <li>株式会社CINRA</li>
</ul>

Styleguide 17
*/
.breadcrumb
{
    font-size: 0;
    font-size: 0rem;

    color: #999;
}
.breadcrumb > li
{
    font-size: 12px;
    font-size: 1.2rem;

    display: inline;
}
.breadcrumb > li:after
{
    display: inline-block;

    padding: 0 4px;

    content: '>';
}
.breadcrumb > li:last-child:after
{
    display: none;
}
.breadcrumb a
{
    -webkit-transition: color .2s ease-out;
       -moz-transition: color .2s ease-out;
         -o-transition: color .2s ease-out;
            transition: color .2s ease-out;

    color: inherit;
}
.breadcrumb a:hover
{
    color: #00e6cd;
}

/*
ボタン

Styleguide 14
*/
.button-main, .l-form-agent .po-button-send-inner .po-button-send, .button-sub, .button-sub-2, .button-alert, .button-application, .button-searchJob, .button-favoriteCondition, .button-mailAlert
{
    line-height: 1.5;

    display: block;

    width: 100%;
    margin: 0;
    padding: 15px 0;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;
    text-align: center;

    border: 1px solid;
    border-radius: 4px;
    outline: none;
}
.button--short.button-main, .l-form-agent .po-button-send-inner .button--short.po-button-send, .button--short.button-sub, .button--short.button-sub-2, .button--short.button-alert, .button--short.button-application, .button--short.button-searchJob, .button--short.button-favoriteCondition, .button--short.button-mailAlert
{
    padding-top: 6px;
    padding-bottom: 6px;
}

/*
応募ボタン

Markup:
<button class="button-application">応募する</button>

Styleguide 14.1
*/
/*
メインボタン

Markup:
<button class="button-main">さがす</button>

Styleguide 14.2
*/
.button-main, .l-form-agent .po-button-send-inner .po-button-send
{
    color: #fff;
    border-color: #00aa9a;
    background: #00b8a6;
}
.button-main:hover, .l-form-agent .po-button-send-inner .po-button-send:hover
{
    background: #00d9c2;
}
.button-main.is-disabled, .l-form-agent .po-button-send-inner .is-disabled.po-button-send
{
    pointer-events: none;

    opacity: .4;
}
.button-main.is-disabled:hover, .l-form-agent .po-button-send-inner .is-disabled.po-button-send:hover
{
    background: #00b8a6;
}

/*
サブボタン

Markup:


Styleguide 14.3
*/
.button-sub
{
    font-weight: bold;

    color: #000;
    border-color: #d9d9d9;
    background: #fff;
}

.button-sub-2
{
    font-weight: normal;

    color: #000;
    border-color: #ccc;
    background: #d9d9d9;
}
.button-sub-2:hover
{
    background: #ccc;
}

/*
ネガティブボタン

Markup:


Styleguide 14.4
*/
.button-alert
{
    font-weight: normal;

    color: #fff;
    border: none;
    background: #db4e3f;
}
.button-alert:hover
{
    background: #e44736;
}

/*
一覧などへとぶボタン

Markup:
<a href="#" class="button-more">記事一覧へ</a>

Styleguide 14.5
*/
.button-more
{
    font-size: 14px;
    font-size: 1.4rem;

    display: block;

    width: 600px;
    margin: auto;
    padding: 10px 0;

    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
    text-align: center;

    color: inherit;
    background: #d9d9d9;
}
.button-more:hover
{
    opacity: .7;
}

.button--small
{
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 1;

    display: inline-block;

    width: auto;
    padding: 11px 30px;
}

.button--medium
{
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 1;

    display: block;

    padding: 11px 10px;
}

/*
この職種に応募する

Markup:
<a href="#" class="button-application"><span class="icon-application-2">この職種に応募する</span></a>
<a href="#" class="button-application--large"><span class="icon-application-2">この職種に応募する</span></a>

Styleguide 14.6
*/
.button-application
{
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;

    color: #fff;
    border-color: #3673a6;
    background: #3d82bb;
}
.button-application:hover
{
    background: #499de0;
}

.button-application--large
{
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;

    display: block;

    height: 150px;
    padding: 35px 0 0;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;
    text-align: center;

    color: #fff;
    border-color: #3673a6;
    background: #3d82bb;
}
.button-application--large:hover
{
    background: #499de0;
}

/*
この職種をお気に入りに登録

Markup:
<a href="#" class="button-favorite"><span class="icon-favoriteGreen">この職種をお気に入りに登録</span></a>

Styleguide 14.7
*/
.button-favorite, .button-favorite--border
{
    font-size: 15px;
    font-size: 1.5rem;

    display: block;

    padding: 19px;

    -webkit-transition: color .2s ease-out;
       -moz-transition: color .2s ease-out;
         -o-transition: color .2s ease-out;
            transition: color .2s ease-out;
    text-align: center;

    color: #00bba9;
    background: #fff;
}
.button-favorite:hover, .button-favorite--border:hover
{
    color: #00d9c2;
}
.is-animated.button-favorite, .is-animated.button-favorite--border
{
    pointer-events: none;
}
.is-added.button-favorite, .is-added.button-favorite--border
{
    font-weight: bold;

    color: #000 !important;
}

.button-favorite--border
{
    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;

    border: 1px solid #00bba9;
    border-radius: 4px;
}
.button-favorite--border:hover
{
    background: #e1faf8;
}

/*
求人をさがす

Markup:
<button type="submit" class="button-searchJob">求人をさがす</button>

Styleguide 14.8
*/
.button-searchJob
{
    color: #fff;
    border-color: #008275;
    background: #008275;
}
.button-searchJob:hover
{
    background: #00d9c2;
}

/*
この条件をお気に入りに入れる

Markup:

Styleguide 14.9
*/
.button-favoriteCondition
{
    font-size: 14px;
    font-size: 1.4rem;

    display: block;

    padding: 19px 10px;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;
    text-align: center;

    color: #fdfdfd;
    border-color: #00aa9a;
    background: #00bba9;
}
.button-favoriteCondition:hover
{
    background: #00d9c2;
}
.button-favoriteCondition.is-animated
{
    pointer-events: none;
}
.button-favoriteCondition.is-added
{
    border-color: #000;
    background-color: #000;
}
.button-favoriteCondition.is-added:hover
{
    background: #666;
}

/*
この条件をお気に入りに入れる

Markup:

Styleguide 14.9
*/
.button-mailAlert
{
    font-size: 14px;
    font-size: 1.4rem;

    display: block;

    padding: 19px 10px;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;
    text-align: center;

    color: #4c4c4c;
    border-color: #d9d9d9;
    background: #fff;
}
.button-mailAlert:hover
{
    background: #d9d9d9;
}

/*
カルーセル

Markup:

Styleguide 31
*/
.carousel
{
    position: relative;
}
.carousel .slick-dots
{
    font-size: 0;
    line-height: 0;

    position: absolute;

    display: block;

    width: 100%;
    padding: 10px 0;

    text-align: right;
}
.carousel .slick-dots li
{
    position: relative;

    display: inline-block;

    margin: 0 5px;
}
.carousel .slick-dots li button
{
    display: block;

    width: 10px;
    height: 10px;
    padding: 5px;

    cursor: pointer;
    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;

    color: transparent;
    border: 0;
    border-radius: 50%;
    outline: none;
    background: #999;
}
.carousel .slick-dots li button:hover, .carousel .slick-dots li button:focus
{
    background: #1a1a1a;
}
.carousel .slick-dots li.slick-active button
{
    background: #16b0a0;
}

.carousel-list
{
    position: relative;

    padding: 0 0 30px;
}

.carousel-item
{
    display: none;

    text-align: center;
}
.carousel-item img
{
    display: inline-block;

    max-width: 100%;
    max-height: 450px;
}

.carousel-text
{
    display: none;

    -webkit-user-select: auto;
       -moz-user-select: auto;
        -ms-user-select: auto;
            user-select: auto;
    text-align: left;
}

.carousel-arrow--left, .carousel-arrow--right
{
    position: absolute;
    top: 0;

    display: block;

    width: 50%;
    height: 100%;
}
.carousel-arrow--left:before, .carousel-arrow--right:before
{
    position: absolute;
    top: 0;
    bottom: 0;

    display: block;

    width: 55px;
    height: 55px;
    margin: auto;

    content: '';
    cursor: pointer;
    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;

    opacity: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .8);
}
.carousel-arrow--left:hover:before, .carousel-arrow--right:hover:before
{
    opacity: 1;
}
.carousel-arrow--left:hover:before:hover, .carousel-arrow--right:hover:before:hover
{
    background: white;
}

.carousel-arrow--left
{
    left: 0;
}
.carousel-arrow--left:before
{
    left: 22px;

    width: 54px;
    height: 54px;

    background-image: url(../img/sprite.png);
    background-position: -233px -92.5px;
    background-size: 466px 346.5px;
}

.carousel-arrow--right
{
    right: 0;
}
.carousel-arrow--right:before
{
    right: 22px;

    width: 54px;
    height: 54px;

    background-image: url(../img/sprite.png);
    background-position: -147px -171.5px;
    background-size: 466px 346.5px;
}

/*
最近チェックした企業

Markup:
<div class="checked">
  <ul>
    <li><a href="#"><img src="{{ config.placehold }}/140x61" alt="" class="fluid"></a></li>
    <li><a href="#"><img src="{{ config.placehold }}/140x61" alt="" class="fluid"></a></li>
    <li><a href="#"><img src="{{ config.placehold }}/140x61" alt="" class="fluid"></a></li>
    <li><a href="#"><img src="{{ config.placehold }}/140x61" alt="" class="fluid"></a></li>
    <li><a href="#"><img src="{{ config.placehold }}/140x61" alt="" class="fluid"></a></li>
    <li><a href="#"><img src="{{ config.placehold }}/140x61" alt="" class="fluid"></a></li>
    <li><a href="#"><img src="{{ config.placehold }}/140x61" alt="" class="fluid"></a></li>
    <li><a href="#"><img src="{{ config.placehold }}/140x61" alt="" class="fluid"></a></li>
  </ul>
</div>

Styleguide 8
*/
.checked > ul
{
    margin: 0 0 0 -10px;

    *zoom: 1;
}
.checked > ul:before, .checked > ul:after
{
    display: table;

    content: '';
}
.checked > ul:after
{
    clear: both;
}
.checked li
{
    float: left;

    width: 12.5%;
    padding: 0 0 0 10px;
}
.checked a
{
    display: block;

    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}
.checked a:hover
{
    opacity: .7;
}

/*
会社概要

Markup:


Styleguide 19
*/
.companyOverview-heading
{
    font-size: 16px;
    font-size: 1.6rem;

    margin: 0 0 15px;
}

.companyOverview-image
{
    margin: 0 0 10px;
}
.companyOverview-image > a
{
    display: block;
}

.companyOverview-table
{
    font-size: 14px;
    font-size: 1.4rem;

    display: table;

    width: 100%;

    table-layout: fixed;

    border-bottom: 1px solid #ccc;
}
.companyOverview-table dl
{
    display: table-row;
}
.companyOverview-table dt
{
    font-weight: bold;

    display: table-cell;

    width: 70px;
    padding: 8px 0;

    vertical-align: top;
}
.companyOverview-table dd
{
    display: table-cell;

    width: 100%;
    padding: 8px 0;

    vertical-align: top;
    word-break: break-all;
}

/*
コンテナ

画面幅に応じてwidthが変わる

Styleguide 1
*/
.container, .container--narrow
{
    position: relative;

    margin: auto;

    *zoom: 1;
}
.container:before, .container--narrow:before, .container:after, .container--narrow:after
{
    display: table;

    content: '';
}
.container:after, .container--narrow:after
{
    clear: both;
}

/*
通常コンテナ

Markup:
<div class="container" style="background-color: #333;">コンテナ</div>

Styleguide 1.1
*/
.container
{
    width: 960px;
}
@media screen and (min-width: 1220px)
{
    .container
    {
        width: 1200px;
    }
}

/*
狭いコンテナ(880px)

Markup:
<div class="container--narrow" style="background-color: #333;">コンテナ</div>

Styleguide 1.2
*/
.container--narrow
{
    width: 880px;
}

/*
要素が入ってくる白い背景の

Styleguide 35
*/
.contentBox, .contentBox--about
{
    background: #fff;
}

.contentBox-content
{
    padding: 25px 50px;

    *zoom: 1;
}
.contentBox-content:before, .contentBox-content:after
{
    display: table;

    content: '';
}
.contentBox-content:after
{
    clear: both;
}
.contentBox-content p
{
    line-height: 2;

    margin: 0 0 25px;
}
.contentBox-content p:last-child
{
    margin-bottom: 0;
}
.contentBox-content ul
{
    line-height: 2;

    padding: 15px 0 0;
}
.contentBox-content ul > li
{
    margin: 0 0 5px;
}
.contentBox-content strong
{
    font-weight: bold;
}

.contentBox--about .contentBox-content
{
    padding: 40px;
}
.contentBox--about .contentBox-content + .contentBox-content
{
    padding-top: 0;
}

.contentBox--agent
{
    font-size: 18px;
    font-size: 1.8rem;

    padding: 70px;

    text-align: center;

    background: #fff;
}
.contentBox--agent p
{
    line-height: 2;

    margin-bottom: 35px;
}
.contentBox--agent p:last-child
{
    margin-bottom: 0;
}

.contentBox--agent-heading
{
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 1.6;

    margin: 0 0 50px 0;
    padding: 30px 10px;

    text-align: center;

    color: #00cab6;
    border-top: 5px solid #00cab6;
    border-bottom: 5px solid #00cab6;
}

.contentBox--agentFlow
{
    background: #fff;
}
.contentBox--agentFlow .agentFlow
{
    padding: 40px 50px 50px 50px;

    text-align: center;
}
.contentBox--agentFlow .agentFlow p
{
    font-size: 16px;
    font-size: 1.6rem;

    margin-bottom: 40px;

    text-align: left;
}
.contentBox--agentFlow .tab-agent
{
    margin: 0;
    padding-bottom: 50px;
}
.contentBox--agentFlow .tab-body
{
    padding: 30px;
}
.contentBox--agentFlow .contentBox-descriptionList
{
    display: block;

    margin: 0 0 10px 0;
}
.contentBox--agentFlow .contentBox-descriptionList dd
{
    font-size: 16px;
    font-size: 1.6rem;
}

.contentBox--agentT
{
    background: #fff;
}

.contentBox--agentButtons .form-buttons li .badge-agent, .contentBox-list--2col_wrap .badge-agent
{
    font-size: 0;

    position: absolute;

    display: inline-block;
    overflow: hidden;

    width: 60px;
    height: 60px;

    vertical-align: middle;
    white-space: nowrap;
    text-indent: 100%;

    background-image: url(../img/sprite.png);
    background-position: -866px -268px;
}

.contentBox--agentButtons
{
    background: #fff;
}
.contentBox--agentButtons .form-buttons
{
    padding: 40px;
}
.contentBox--agentButtons .form-buttons li
{
    position: relative;
}
.contentBox--agentButtons .form-buttons li .button-main, .contentBox--agentButtons .form-buttons li .l-form-agent .po-button-send-inner .po-button-send, .l-form-agent .po-button-send-inner .contentBox--agentButtons .form-buttons li .po-button-send
{
    padding: 25px 0;
}
.contentBox--agentButtons .form-buttons li .badge-agent
{
    top: -20px;
    right: -20px;
}

.contentBox-list > li, .contentBox-list--flow > li, .contentBox-list--about > li
{
    display: table;

    width: 100%;
    padding: 20px 40px;

    table-layout: fixed;

    border-bottom: 1px solid #e6e6e6;
}
.contentBox-list > li:first-child, .contentBox-list--flow > li:first-child, .contentBox-list--about > li:first-child
{
    padding-top: 25px;
}
.contentBox-list > li:last-child, .contentBox-list--flow > li:last-child, .contentBox-list--about > li:last-child
{
    padding-bottom: 25px;

    border-bottom: none;
}

.contentBox-list--flow > li
{
    position: relative;
}
.contentBox-list--flow > li:before
{
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;

    display: block;

    width: 22px;
    width: 20px;
    height: 20px;
    height: 20px;
    margin: auto;

    content: '';

    background-image: url(../img/sprite.png);
    background-position: -900px -468px;
}
.contentBox-list--flow > li:first-child:before
{
    display: none;
}

.contentBox-list--2col_wrap
{
    float: left;

    width: 430px;
}
.contentBox-list--2col_wrap:nth-child(2n)
{
    float: right;
}
.contentBox-list--2col_wrap .heading--main
{
    position: relative;
}
.contentBox-list--2col_wrap .badge-agent
{
    top: -5px;
    right: 10px;
}

.contentBox-list--2col
{
    background: #fff;
}
.contentBox-list--2col > li
{
    position: relative;

    padding: 0 40px;

    border-bottom: 1px solid #e6e6e6;
}
.contentBox-list--2col > li:before
{
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;

    display: block;

    width: 22px;
    width: 20px;
    height: 20px;
    height: 20px;
    margin: auto;

    content: '';

    background-image: url(../img/sprite.png);
    background-position: -900px -468px;
}
.contentBox-list--2col > li:first-child:before
{
    display: none;
}
.contentBox-list--2col > li:last-child
{
    border-bottom: none;
}

.contentBox-image--bg
{
    display: table;

    width: 100%;
    height: 200px;
    margin-bottom: 30px;

    background: #f6f6f6;
}
.contentBox-image--bg p
{
    display: table-cell;

    text-align: center;
    vertical-align: middle;
}

.contentBox-list--about > li
{
    padding: 15px 20px;
}
.contentBox-list--about > li:last-child, .contentBox-list--about > li:first-child
{
    padding: 15px 20px;
}

.contentBox-image, .contentBox-image--center
{
    display: table-cell;

    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    width: 380px;
    padding: 0 20px 0 0;

    vertical-align: middle;
}

.contentBox-large-image
{
    padding: 70px 0 70px 80px;

    text-align: center;
}

.contentBox-image--center
{
    text-align: center;
    vertical-align: top;
}

.contentBox-descriptionList
{
    display: table-cell;

    width: 100%;

    vertical-align: top;
}
.contentBox-descriptionList > dt
{
    font-weight: bold;

    margin: 0 0 10px;
}
.contentBox-descriptionList > dd
{
    font-weight: normal;
    line-height: 1.8;
}

.contentBox-priceList > li
{
    padding: 20px 0;

    border-bottom: 1px solid #d9d9d9;
}
.contentBox-priceList > li:first-child
{
    padding-top: 0;
}

.contentBox-priceDescription > dt
{
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;

    display: inline-block;

    margin: 0 20px 0 0;
    padding: 5px 10px;

    vertical-align: middle;

    color: #00d4c0;
    background: #4d4d4d;
}
.contentBox-priceDescription > dd
{
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-size: 4rem;
    font-weight: bold;
    line-height: 1;

    display: inline-block;

    vertical-align: middle;

    color: #00d4c0;
}

.contentBox-priceNoticeList
{
    font-size: 14px;
    font-size: 1.4rem;
}

.contentBox-option
{
    padding: 40px 10px 35px;

    text-align: center;

    background: #f1f180;
}
.contentBox-option p
{
    font-size: 16px;
    font-size: 1.6rem;
}

.contentBox-option-heading
{
    font-size: 21px;
    font-size: 2.1rem;
    font-weight: bold;

    position: relative;

    margin: 0 0 15px;
    padding: 130px 0 0;
}
.contentBox-option-heading:before
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    display: block;

    width: 104px;
    height: 105px;
    margin: auto;

    content: '';

    background-image: url(../img/sprite.png);
    background-position: -406px -343px;
}

[data-order]:before
{
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: bold;

    display: inline-block;

    margin: 0 20px 0 0;

    content: attr(data-order);
    vertical-align: middle;

    color: #00b7a5;
}

/*
インプットの

Markup:
<div class="field">
    <label for="mailmagazine-email" class="field-label--mailmagazine"></label>
    <div class="field-input">
      <input type="email" name="" value="" placeholder="YourAddressHere" id="mailmagazine-email">
    </div>
  </div>
</div>

Styleguide 23
*/
.field
{
    display: table;

    width: 100%;
    padding: 0 10px 0 0;

    table-layout: fixed;
}

.field-notice
{
    font-size: 1.4rem;

    margin-top: 20px;

    color: #ccc;
}

.field-label--mail
{
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 56px;

    display: table-cell;

    width: 60px;

    text-align: center;
    vertical-align: top;
    vertical-align: top;

    color: #fff;
    border-radius: 4px 0 0 4px;
    background: #666;
}

.field-label--mail
{
    width: 60px;
    height: 58px;

    background-image: url(../img/sprite.png);
    background-position: -171px -92.5px;
    background-size: 466px 346.5px;
}

.field-input
{
    font-size: 16px;
    font-size: 1.6rem;

    display: table-cell;
    overflow: hidden;

    width: 100%;

    vertical-align: top;
}
.field-input input
{
    width: 100%;
    height: 58px;
    padding: 0 10px;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;

    color: #808080;
    border: 1px solid #bfbfbf;
    border-left: none;
    border-radius: 0 4px 4px 0;
    outline: none;
    background: #ccc;
}
.field-input input:focus
{
    border-color: #d9d9d9;
    background: #e6e6e6;
}

/*
フィルター

Markup:


Styleguide 30
*/
.filter
{
    margin: 1px 0 0;
}

.filter-list
{
    font-size: 14px;
    font-size: 1.4rem;

    border-bottom: 1px solid #ccc;
}
.filter-list > dt
{
    font-weight: bold;

    padding: 4px 20px;

    color: #f2f2f2;
    background: #999;
}
.filter-list > dd
{
    border-top: 1px solid #ccc;
    background: #e6e6e6;
}
.filter-list input[type='checkbox']
{
    position: absolute;

    opacity: 0;
}

.filter-label
{
    display: block;

    padding: 11px 25px;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;

    background: transparent;
}
.filter-label:hover
{
    background: #fdfdfd;
}
.filter-label.checked
{
    background: #fdfdfd;
}

/*
見出し

Styleguide 28
*/
.heading--main, .heading--sub, .heading--recruitment
{
    font-size: 16px;
    font-size: 1.6rem;

    padding: 12px;

    text-align: center;
}

/*
メインの見出し

Markup:
<h1 class="heading--main">募集中の職種</h1>

Styleguide 28.1
*/
.heading--main
{
    background: #e6e6e6;
}

/*
サブの見出し

Markup:
<h1 class="heading--sub">現在募集中の職種</h1>

Styleguide 28.2
*/
.heading--sub
{
    color: #fff;
    background: #999;
}

/*
現在募集中の職種の見出し

Markup:
<h1 class="heading--recruitment">現在募集中の職種</h1>

Styleguide 28.2
*/
.heading--recruitment
{
    color: #fff;
    background: #3d82bb;
}

/*
アイコン

Styleguide 4
*/
.icon-favorite, .icon-offer, .icon-column, .icon-guide, .icon-charge, .icon-mailmagazine, .icon-favoriteGreen, .icon-application_1, .icon-charge--large, .icon-guide--large, .icon-application_2, .icon-application-2--large, .icon-twitter, .icon-check, .icon-favoriteCondition, .icon-mailCondition, .icon-sort, .icon-delete, .icon-favoriteChecked, .icon-favoriteConditionChecked
{
    position: relative;

    display: inline-block;
}
.icon-favorite:before, .icon-offer:before, .icon-column:before, .icon-guide:before, .icon-charge:before, .icon-mailmagazine:before, .icon-favoriteGreen:before, .icon-application_1:before, .icon-charge--large:before, .icon-guide--large:before, .icon-application_2:before, .icon-application-2--large:before, .icon-twitter:before, .icon-check:before, .icon-favoriteCondition:before, .icon-mailCondition:before, .icon-sort:before, .icon-delete:before, .icon-favoriteChecked:before, .icon-favoriteConditionChecked:before, .icon-favorite:after, .icon-offer:after, .icon-column:after, .icon-guide:after, .icon-charge:after, .icon-mailmagazine:after, .icon-favoriteGreen:after, .icon-application_1:after, .icon-charge--large:after, .icon-guide--large:after, .icon-application_2:after, .icon-application-2--large:after, .icon-twitter:after, .icon-check:after, .icon-favoriteCondition:after, .icon-mailCondition:after, .icon-sort:after, .icon-delete:after, .icon-favoriteChecked:after, .icon-favoriteConditionChecked:after
{
    position: absolute;

    display: block;

    margin: auto;

    content: '';
}

/*
お気に入り

Markup:
<span class="icon-favorite">お気に入り</span>

Styleguide 4.1
*/
.icon-favorite
{
    padding: 0 0 0 17px;
}
.icon-favorite:before, .icon-favorite:after
{
    top: 0;
    bottom: 0;
    left: 0;
}
.icon-favorite:before
{
    width: 17px;
    height: 15px;

    background-image: url(../img/sprite.png);
    background-position: -226px -314.5px;
    background-size: 466px 346.5px;
}
a:hover .icon-favorite:before
{
    width: 17px;
    height: 15px;

    background-image: url(../img/sprite.png);
    background-position: -159px -314.5px;
    background-size: 466px 346.5px;
}

/*
求人を探す

Markup:
<span class="icon-offer">求人をさがす</span>

Styleguide 4.2
*/
.icon-offer
{
    padding: 0 0 0 21px;
}
.icon-offer:before, .icon-offer:after
{
    top: 0;
    bottom: 0;
    left: 0;

    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}
.icon-offer:before
{
    width: 21px;
    height: 17px;

    background-image: url(../img/sprite.png);
    background-position: -26px -314.5px;
    background-size: 466px 346.5px;
}
.icon-offer:after
{
    width: 21px;
    height: 17px;

    opacity: 0;
    background-image: url(../img/sprite.png);
    background-position: -276px -206.5px;
    background-size: 466px 346.5px;
}
a:hover .icon-offer:before
{
    opacity: 0;
}
a:hover .icon-offer:after
{
    opacity: 1;
}

/*
コラムを読む

Markup:
<span class="icon-column">コラムを読む</span>

Styleguide 4.3
*/
.icon-column
{
    padding: 0 0 0 17px;
}
.icon-column:before, .icon-column:after
{
    top: 0;
    bottom: 0;
    left: 0;

    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}
.icon-column:before
{
    width: 17px;
    height: 16px;

    background-image: url(../img/sprite.png);
    background-position: -104px -314.5px;
    background-size: 466px 346.5px;
}
.icon-column:after
{
    width: 17px;
    height: 16px;

    opacity: 0;
    background-image: url(../img/sprite.png);
    background-position: -49px -314.5px;
    background-size: 466px 346.5px;
}
a:hover .icon-column:before
{
    opacity: 0;
}
a:hover .icon-column:after
{
    opacity: 1;
}

/*
ご利用ガイド

Markup:
<span class="icon-guide">ご利用ガイド</span>

Styleguide 4.4
*/
.icon-guide
{
    padding: 0 0 0 21px;
}
.icon-guide:before, .icon-guide:after
{
    top: 0;
    bottom: 0;
    left: 0;

    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}
.icon-guide:before
{
    width: 21px;
    height: 17px;

    background-image: url(../img/sprite.png);
    background-position: -289px -92.5px;
    background-size: 466px 346.5px;
}
.icon-guide:after
{
    width: 21px;
    height: 17px;

    opacity: 0;
    background-image: url(../img/sprite.png);
    background-position: -289px -111.5px;
    background-size: 466px 346.5px;
}
a:hover .icon-guide:before
{
    opacity: 0;
}
a:hover .icon-guide:after
{
    opacity: 1;
}

/*
採用担当の方へ

Markup:
<span class="icon-charge">採用担当の方へ</span>

Styleguide 4.5
*/
.icon-charge
{
    padding: 0 0 0 17px;
}
.icon-charge:before, .icon-charge:after
{
    top: 0;
    bottom: 0;
    left: 0;

    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}
.icon-charge:before
{
    width: 17px;
    height: 14px;

    background-image: url(../img/sprite.png);
    background-position: -245px -314.5px;
    background-size: 466px 346.5px;
}
.icon-charge:after
{
    width: 17px;
    height: 14px;

    opacity: 0;
    background-image: url(../img/sprite.png);
    background-position: -320px -314.5px;
    background-size: 466px 346.5px;
}
a:hover .icon-charge:before
{
    opacity: 0;
}
a:hover .icon-charge:after
{
    opacity: 1;
}

/*
MailMagazine

Markup:
<span class="icon-mailmagazine">MailMagazine</span>

Styleguide 4.5
*/
.icon-mailmagazine
{
    padding: 0 0 0 25px;
}
.icon-mailmagazine:before, .icon-mailmagazine:after
{
    top: 0;
    bottom: 0;
    left: 0;

    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}
.icon-mailmagazine:before
{
    width: 17px;
    height: 13px;

    background-image: url(../img/sprite.png);
    background-position: -431px -234px;
    background-size: 466px 346.5px;
}
.icon-mailmagazine:after
{
    width: 17px;
    height: 13px;

    opacity: 0;
    background-image: url(../img/sprite.png);
    background-position: -431px -196px;
    background-size: 466px 346.5px;
}
a:hover .icon-mailmagazine:before
{
    opacity: 0;
}
a:hover .icon-mailmagazine:after
{
    opacity: 1;
}

/*
お気に入り(緑)

Markup:
<span class="icon-favoriteGreen">この企業をお気に入りに登録</span>

Styleguide 4.6
*/
.icon-favoriteGreen
{
    padding: 0 0 0 25px;
}
.icon-favoriteGreen:before, .icon-favoriteGreen:after
{
    top: 0;
    bottom: 0;
    left: 0;

    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}
.icon-favoriteGreen:before
{
    width: 16px;
    height: 14px;

    background-image: url(../img/sprite.png);
    background-position: -264px -314.5px;
    background-size: 466px 346.5px;
}
.icon-favoriteGreen:after
{
    width: 16px;
    height: 14px;

    opacity: 0;
    background-image: url(../img/sprite.png);
    background-position: -377px -314.5px;
    background-size: 466px 346.5px;
}
a:hover .icon-favoriteGreen:before
{
    opacity: 0;
}
a:hover .icon-favoriteGreen:after
{
    opacity: 1;
}

/*
この企業に応募する

Markup:
<span class="icon-application_1">この企業に応募する</span>

Styleguide 4.7
*/
.icon-application_1
{
    padding: 0 0 0 60px;
}
.icon-application_1:before, .icon-application_1:after
{
    top: 0;
    bottom: 0;
    left: 0;
}
.icon-application_1:before
{
    width: 47px;
    height: 27px;

    background-image: url(../img/sprite.png);
    background-position: -260px -277.5px;
    background-size: 466px 346.5px;
}

/*
求人を掲載したい企業の方へ

Markup:
<span class="icon-charge--large">求人を掲載したい企業の方へ</span>

Styleguide 4.10
*/
.icon-charge--large
{
    line-height: 1;

    padding: 45px 0 0 0;
}
.icon-charge--large:before, .icon-charge--large:after
{
    top: 0;
    right: 0;
    left: 0;
}
.icon-charge--large:before
{
    width: 41px;
    height: 29px;

    background-image: url(../img/sprite.png);
    background-position: -217px -277.5px;
    background-size: 466px 346.5px;
}

/*
ご利用になる求職者の方へ

Markup:
<span class="icon-guide--large">ご利用になる求職者の方へ</span>

Styleguide 4.11
*/
.icon-guide--large
{
    line-height: 1;

    padding: 45px 0 0 0;
}
.icon-guide--large:before, .icon-guide--large:after
{
    top: 0;
    right: 0;
    left: 0;
}
.icon-guide--large:before
{
    width: 38px;
    height: 33px;

    background-image: url(../img/sprite.png);
    background-position: -421px -48px;
    background-size: 466px 346.5px;
}

/*
この職種に応募する

Markup:
<span class="icon-application_2">この職種に応募する</span>
<span class="icon-application-2--large">この職種に応募する</span>

Styleguide 4.12
*/
.icon-application_2
{
    padding: 0 0 0 48px;
}
.icon-application_2:before, .icon-application_2:after
{
    top: 0;
    bottom: 0;
    left: 0;
}
.icon-application_2:before
{
    width: 40px;
    height: 26px;

    background-image: url(../img/sprite.png);
    background-position: -313px -249px;
    background-size: 466px 346.5px;
}

.icon-application-2--large
{
    line-height: 1;

    padding: 60px 0 0 0;
}
.icon-application-2--large:before, .icon-application-2--large:after
{
    top: 0;
    right: 0;
    left: 0;
}
.icon-application-2--large:before
{
    width: 64px;
    height: 42px;

    background-image: url(../img/sprite.png);
    background-position: -313px -48px;
    background-size: 466px 346.5px;
}

/*
header twitter アイコン

Markup:
<span class="icon-twitter">ご利用になる求職者の方へ</span>

Styleguide 4.13
*/
.icon-twitter
{
    line-height: 1;

    padding: 0 0 0 25px;
}
.icon-twitter:before, .icon-twitter:after
{
    top: 0;
    bottom: 0;
    left: 0;

    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}
.icon-twitter:before
{
    width: 17px;
    height: 14px;

    background-image: url(../img/sprite.png);
    background-position: -339px -314.5px;
    background-size: 466px 346.5px;
}
.icon-twitter:after
{
    width: 17px;
    height: 14px;

    opacity: 0;
    background-image: url(../img/sprite.png);
    background-position: -358px -314.5px;
    background-size: 466px 346.5px;
}
a:hover .icon-twitter:before
{
    opacity: 0;
}
a:hover .icon-twitter:after
{
    opacity: 1;
}
.icon-twitter:before
{
    width: 17px;
    height: 14px;

    background-image: url(../img/sprite.png);
    background-position: -339px -314.5px;
    background-size: 466px 346.5px;
}

/*
チェック

Markup:
<span class="icon-check">出版・編集</span>

Styleguide 4.14
*/
.icon-check
{
    padding: 0 0 0 30px;
}
.icon-check:before, .icon-check:after
{
    top: 0;
    bottom: 0;
    left: 0;
}
.icon-check:before
{
    width: 17px;
    height: 13px;

    background-image: url(../img/sprite.png);
    background-position: -418px -314.5px;
    background-size: 466px 346.5px;
}
.checked .icon-check:before
{
    width: 17px;
    height: 13px;

    background-image: url(../img/sprite.png);
    background-position: -437px -314.5px;
    background-size: 466px 346.5px;
}
.offer-checked .icon-check:before
{
    width: 17px;
    height: 13px;

    background-image: url(../img/sprite.png);
    background-position: -437px -314.5px;
    background-size: 466px 346.5px;
}
.sort-label.hover .icon-check:before
{
    width: 17px;
    height: 13px;

    background-image: url(../img/sprite.png);
    background-position: -437px -314.5px;
    background-size: 466px 346.5px;
}

/*
この条件をお気に入り追加

Markup:
<span class="icon-favoriteCondition">この条件をお気に入りに入れる</span>

Styleguide 4.15
*/
.icon-favoriteCondition
{
    line-height: 1;

    padding: 40px 0 0 0;
}
.icon-favoriteCondition:before, .icon-favoriteCondition:after
{
    top: 0;
    right: 0;
    left: 0;
}
.icon-favoriteCondition:before
{
    width: 23px;
    height: 20px;

    background-image: url(../img/sprite.png);
    background-position: -407px -277.5px;
    background-size: 466px 346.5px;
}

/*
この条件をお気に入り追加

Markup:
<span class="icon-favoriteCondition">この条件をお気に入りに入れる</span>

Styleguide 4.16
*/
.icon-mailCondition
{
    line-height: 1;

    padding: 40px 0 0 0;
}
.icon-mailCondition:before, .icon-mailCondition:after
{
    top: 0;
    right: 0;
    left: 0;
}
.icon-mailCondition:before
{
    width: 25px;
    height: 19px;

    background-image: url(../img/sprite.png);
    background-position: -432px -277.5px;
    background-size: 466px 346.5px;
}
.icon-mailCondition.icon-favoriteConditionChecked:before
{
    width: 32px;
    height: 21px;

    background-image: url(../img/sprite.png);
    background-position: -431px -211px;
    background-size: 466px 346.5px;
}
a:hover .icon-mailCondition.icon-favoriteConditionChecked:before
{
    width: 32px;
    height: 21px;

    background-image: url(../img/sprite.png);
    background-position: -277px -228.5px;
    background-size: 466px 346.5px;
}

/*
絞り込む・閉じる

Markup:
<span class="icon-sort--open">絞り込む</span>
<span class="icon-sort--close">閉じる</span>

Styleguide 4.17
*/
.icon-sort
{
    line-height: 1;

    padding: 0 0 0 25px;
}
.icon-sort:after
{
    top: 0;
    bottom: 0;
    left: 0;
}
.icon-sort:after
{
    width: 16px;
    height: 16px;

    background-image: url(../img/sprite.png);
    background-position: -86px -314.5px;
    background-size: 466px 346.5px;
}
.is-sort-open .icon-sort:after
{
    width: 16px;
    height: 16px;

    background-image: url(../img/sprite.png);
    background-position: -68px -314.5px;
    background-size: 466px 346.5px;
}

/*
削除

Markup:
<a href="#" class="icon-delete">削除</a>

Styleguide 4.18
*/
.icon-delete
{
    line-height: 1;

    padding: 0 0 0 20px;
}
.icon-delete:after
{
    top: 0;
    bottom: 0;
    left: 0;
}
.icon-delete:after
{
    width: 12px;
    height: 12px;

    background-image: url(../img/sprite.png);
    background-position: -450px -196px;
    background-size: 466px 346.5px;
}

/*
この職種をお気に入りに追加しました

Markup:
<span class="icon-favoriteChecked">この職種をお気に入りに追加しました</span>

Styleguide 4.19
*/
.icon-favoriteChecked
{
    line-height: 1;

    padding: 0 0 0 30px;
}
.icon-favoriteChecked:after
{
    top: 0;
    bottom: 0;
    left: 0;
}
.icon-favoriteChecked:after
{
    width: 23px;
    height: 15px;

    background-image: url(../img/sprite.png);
    background-position: -201px -314.5px;
    background-size: 466px 346.5px;
}
a:hover .icon-favoriteChecked:after
{
    width: 21px;
    height: 15px;

    background-image: url(../img/sprite.png);
    background-position: -178px -314.5px;
    background-size: 466px 346.5px;
}

/*
この条件をお気に入り追加しました

Markup:
<span class="icon-favoriteConditionChecked">この条件をお気に入り追加しました</span>

Styleguide 4.20
*/
.icon-favoriteConditionChecked
{
    line-height: 1;

    padding: 40px 0 0 0;
}
.icon-favoriteConditionChecked:before, .icon-favoriteConditionChecked:after
{
    top: 0;
    right: 0;
    left: 0;
}
.icon-favoriteConditionChecked:before
{
    width: 32px;
    height: 21px;

    background-image: url(../img/sprite.png);
    background-position: -431px -173px;
    background-size: 466px 346.5px;
}
a:hover .icon-favoriteConditionChecked:before
{
    width: 32px;
    height: 21px;

    background-image: url(../img/sprite.png);
    background-position: -277px -251.5px;
    background-size: 466px 346.5px;
}

/*
ヘッダー内アイコンテキスト(fade out)

Styleguide 6
*/
.iconText
{
    padding: 0 0 0 10px;

    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
    white-space: nowrap;
}
.is-header-short .iconText
{
    opacity: 0;
}

.industriesList, .industriesList--noborder, .industriesList_small
{
    position: relative;

    margin: 30px 0 0;
    padding: 20px 0;

    border-top: 1px solid #e6e6e6;
}
.industriesList:after, .industriesList--noborder:after, .industriesList_small:after
{
    position: absolute;
    right: 0;
    bottom: 0;

    display: block;

    width: 108px;
    height: 24px;

    content: '';

    background-image: url(../img/sprite.png);
    background-position: 0 -669px;
}
.industriesList ul, .industriesList--noborder ul, .industriesList_small ul
{
    *zoom: 1;
}
.industriesList ul:before, .industriesList--noborder ul:before, .industriesList_small ul:before, .industriesList ul:after, .industriesList--noborder ul:after, .industriesList_small ul:after
{
    display: table;

    content: '';
}
.industriesList ul:after, .industriesList--noborder ul:after, .industriesList_small ul:after
{
    clear: both;
}
.industriesList li, .industriesList--noborder li, .industriesList_small li
{
    font-size: 34px;
    font-size: 3.4rem;
    line-height: 1.8;

    float: left;
}
.industriesList li:after, .industriesList--noborder li:after, .industriesList_small li:after
{
    display: inline-block;

    padding: 0 5px 0 0;

    content: '/';
}
.industriesList li:last-child:after, .industriesList--noborder li:last-child:after, .industriesList_small li:last-child:after
{
    display: none;
}

.industriesList--noborder
{
    margin-top: 0;
    padding-top: 0;

    border-top: none;
}

.industriesList_small
{
    margin-top: 0;
    padding: 20px 0 35px 0;
    padding-top: 0;

    border-top: none;
}
.industriesList_small > ul
{
    padding: 0;
}
.industriesList_small > ul li
{
    font-size: 26px;
    font-size: 2.6rem;

    margin: 0;
}

/*
フッター内の大きなボタン

Markup:
<ul class="large-buttons">
  <li>
    <a href="#"><span class="icon-charge--large">求人を掲載したい企業の方へ</span></a>
  </li>
  <li>
    <a href="#"><span class="icon-guide--large">ご利用になる求職者の方へ</span></a>
  </li>
</ul>

Styleguide 21
*/
.large-buttons
{
    padding: 18px 0 40px;

    *zoom: 1;
    -webkit-font-smoothing: antialiased;
}
.large-buttons:before, .large-buttons:after
{
    display: table;

    content: '';
}
.large-buttons:after
{
    clear: both;
}
.large-buttons > li
{
    float: left;

    width: 50%;
    padding: 0 1px 0 0;
}
.large-buttons > li:last-child
{
    padding-right: 0;
}
.large-buttons a
{
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;

    display: block;

    height: 160px;
    padding: 48px 0 0;

    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
    text-align: center;

    color: #fff;
    background: #00b9a7;
}
.large-buttons a:hover
{
    opacity: .7;
}

/*
ロゴ

Styleguide 5
*/
.logo-header, .logo-cinra
{
    display: block;
    overflow: hidden;

    white-space: nowrap;
    text-indent: 100%;
}

/*
ヘッダー CINRA.JOBロゴ

Markup:
<h1 class="header-logo"><a href="/" class="logo-header">{{ config.name }}</a></h1>

Styleguide 5.1
*/
.logo-header:before, .logo-header:after
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    content: '';
    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}

.logo-header
{
    position: relative;

    width: 232px;
    height: 72px;
}
.logo-header:before
{
    width: 232px;
    height: 72px;

    -webkit-transition: opacity .4s ease-out;
       -moz-transition: opacity .4s ease-out;
         -o-transition: opacity .4s ease-out;
            transition: opacity .4s ease-out;

    background-image: url(../img/sprite.png);
    background-position: -626px -422px;
}
.logo-header:after
{
    width: 232px;
    height: 72px;

    -webkit-transition: opacity .4s ease-out .2s;
       -moz-transition: opacity .4s ease-out .2s;
         -o-transition: opacity .4s ease-out .2s;
            transition: opacity .4s ease-out .2s;

    opacity: 0;
    background-image: url(../img/sprite.png);
    background-position: -626px -346px;
}
.logo-header:hover:before
{
    opacity: 0;
}
.logo-header:hover:after
{
    opacity: 1;
}

/*
ヘッダー Twitter

Styleguide 5.2
*/
/*
フッター CINRA

Markup:
<div class="logo-cinra">cinra</div>

Styleguide 5.3
*/
.logo-cinra
{
    width: 96px;
    height: 27px;

    background-image: url(../img/sprite.png);
    background-position: -309px -277.5px;
    background-size: 466px 346.5px;
}

/*
メールアドレス登録フォーム

Markup:
<div class="mailAlert-form">
  <form action="#" method="post">
    <div class="mailaddressForm">
      <div class="mailaddressForm-field">
        <div class="field">
          <label for="mailalert-email" class="field-label--mail"></label>
          <div class="field-input">
            <input type="email" name="" value="" placeholder="YourAddressHere" id="mailalert-email">
          </div>
        </div>
      </div>
      <div class="mailaddressForm-button">
        <button type="submit" class="button-main">登録する</button>
      </div>
    </div>
  </form>
</div>

Styleguide 34
*/
.mailaddressForm
{
    display: table;

    width: 100%;

    table-layout: fixed;
}

.mailaddressForm-field
{
    display: table-cell;

    width: 100%;

    vertical-align: top;
}

.mailaddressForm-button
{
    display: table-cell;

    width: 120px;

    vertical-align: top;
}

/*
フッター内メルマガ登録

Markup:

Styleguide 22
*/
.mailmagazineBox p
{
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 2;

    padding: 20px 0;

    text-align: center;
}
.mailmagazineBox p.leaving
{
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1em;

    padding: 20px 0 0;
}
.mailmagazineBox p.left
{
    padding-top: 0;

    text-align: left;
}
.mailmagazineBox em
{
    background: #f1f180;
}

.mailmagazineBox-form
{
    display: table;

    width: 100%;

    table-layout: fixed;
}

.mailmagazineBox-field
{
    display: table-cell;

    width: 100%;

    vertical-align: top;
}

.mailmagazineBox-button
{
    display: table-cell;

    width: 120px;

    vertical-align: top;
}

.mailaddressForm-field
{
    position: relative;
}

div.mce_inline_error,
#mce-responses .response
{
    font-size: 12px;
    font-size: 1.2rem;

    position: absolute;
    top: -80%;

    padding: 10px;

    color: #fff;
    border-radius: 4px;
    background: #db4e3f;
}
div.mce_inline_error:before,
#mce-responses .response:before
{
    position: absolute;
    bottom: -10px;
    left: 7px;

    display: block;

    width: 8px;
    height: 8px;
    margin: auto;

    content: '';

    border-width: 10px 6px 0 6px;
    border-style: solid;
    border-color: #db4e3f transparent transparent transparent;
}

#mce-responses .response
{
    left: 60px;
}

#mce-responses #mce-success-response
{
    background: #3d82bb;
}
#mce-responses #mce-success-response:before
{
    border-color: #3d82bb transparent transparent transparent;
}

/*
モーダル

Markup:


Styleguide 33
*/
.overlay
{
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: none;

    width: 100%;
    height: 100%;
}
.is-modal .overlay
{
    display: block;
}

.modal
{
    position: absolute;
    z-index: 200;
    top: 50%;
    right: 0;
    left: 0;

    display: none;

    width: 800px;
    min-height: 220px;
    margin: auto;
    padding: 50px 60px;

    background: #333;
}
.modal.modal-sp
{
    width: 90%;
    padding: 30px 20px;
}
.is-modal .modal
{
    display: block;
}

.modal-header
{
    margin: 0 0 25px;

    text-align: center;

    color: #fff;
}

.modal-heading
{
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;

    margin: 0 0 10px;
}

.modal-heading--ja
{
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2;

    margin-top: 30px;
}

.modal-checked
{
    font-size: 0;
    font-size: 0rem;

    margin: 0 0 35px;
    padding: 25px 90px 15px;

    text-align: center;

    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.modal-checked li
{
    font-size: 18px;
    font-size: 1.8rem;

    display: inline-block;

    margin: 0 20px 10px 0;

    color: #00d0bc;
}

.modal-form
{
    padding: 0 90px;
}
.modal-form .field-notice
{
    color: #666;
}

.modal-sp .modal-form
{
    padding: 0;
}
.modal-sp .field-label--mail
{
    border-radius: 4px 0 0 4px;
}
.modal-sp .field-input
{
    border-radius: 0 4px 4px 0;
}
.modal-sp .field-input input
{
    height: 58px;
    padding-bottom: 0;
}
.modal-sp .field-submit
{
    margin-top: 20px;
}

/*
求人項目

Markup:
<div class="offerItem">
  <div class="offerItem-image">
    <img src="http://placehold.it/270x110" alt="大阪王将　渋谷店　※12月NEW OPEN" class="fluid">
    <em class="offerItem-subtext">週1日/3ｈOK！</em>
  </div>
  <div class="offerItem-text">
    <p><strong>【店舗スタッフ】★オープニングSTAFF大募集★週1～シフト自由◎高校生OK★まかない付</strong>
    </p>
    <dl class="offerItem-detail">
      <dt>大阪王将　渋谷店　※12月NEW OPEN</dt>
      <dd>飲食店</dd>
    </dl>
    <ul class="offerItem-tagList">
      <li>まかないあり</li>
    </ul>
    <dl class="offerItem-occupation">
      <dt>募集職種</dt>
      <dd>店長候補 / ホール / キッチン/マネージャー</dd>
    </dl>
  </div>
</div>

Styleguide 29
*/
.offerItem
{
    display: table;

    width: 100%;
    padding: 20px 20px 12px;

    table-layout: fixed;

    -webkit-transition: opacity .2s ease-out;
    -webkit-transition: opacity .1s ease-out, transform .3s ease-out, -webkit-transform .3s ease-out;
       -moz-transition: opacity .2s ease-out;
       -moz-transition: opacity .1s ease-out, transform .3s ease-out, -webkit-transform .3s ease-out;
         -o-transition: opacity .2s ease-out;
         -o-transition: opacity .1s ease-out, transform .3s ease-out, -webkit-transform .3s ease-out;
            transition: opacity .2s ease-out;
            transition: opacity .1s ease-out, transform .3s ease-out, -webkit-transform .3s ease-out;

    border-top: 1px solid #00d0bc;
    background: #fafafa;
}
a:hover .offerItem
{
    opacity: .7;
}
.offerItem.is-item-unloaded
{
    -webkit-transform: translate3d(0, 20px, 0);
       -moz-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);

    opacity: 0;
}

.offerItem-image
{
    display: table-cell;

    width: 270px;

    vertical-align: top;
}

.offerItem-subtext
{
    font-size: 13px;
    font-size: 1.3rem;
    font-weight: bold;

    display: block;

    margin: 10px 0 0;
    padding: 7px;

    text-align: center;

    color: #00665d;
    border: 1px solid #90c9c3;
    border-radius: 3px;
    background: #cce3e0;
}

.offerItem-text
{
    display: table-cell;

    width: 100%;
    padding: 0 0 0 22px;

    vertical-align: top;
}

.offerItem-detail
{
    margin: 0 0 10px;
}

.offerItem-lead
{
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;

    margin: 0 0 10px;

    color: #3d82bb;
}

.offerItem-name
{
    font-weight: bold;

    margin: 0 0 5px;
}

.offerItem-category
{
    font-size: 13px;
    font-size: 1.3rem;

    color: #808080;
}

.offerItem-tagList
{
    font-size: 0;
    font-size: 0rem;

    margin: 0 0 -5px;
    padding: 0 0 15px;
}
.offerItem-tagList > li
{
    font-size: 10px;
    font-size: 1rem;

    display: inline-block;

    margin: 0 5px 5px 0;
    padding: 2px 6px 3px;

    border-radius: 2px;
    background: #ccc;
}

.offerItem-occupation
{
    font-size: 13px;
    font-size: 1.3rem;

    padding: 12px 0 0;

    color: #808080;
    border-top: 1px solid #d9d9d9;
}
.offerItem-occupation > dt
{
    font-weight: bold;

    display: inline-block;

    margin: 0 10px 0 0;
}
.offerItem-occupation > dd
{
    display: inline-block;
}

/*
common footer内プロジェクトリスト

Styleguide 2
*/
.ourProject
{
    font-size: 0;
    font-size: 0rem;
}
.ourProject > dt
{
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;

    margin: 0 0 15px;

    color: #808080;
}
.ourProject > dd
{
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-size: 1.2rem;

    display: inline-block;

    margin: 0 0 20px;
}
.ourProject > dd a
{
    display: table;

    table-layout: fixed;

    color: #808080;
}

.ourProject-image
{
    display: table-cell;

    vertical-align: middle;
}
.ourProject-image img
{
    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;

    border: 1px solid #4d4d4d;
    border-radius: 2px;
    background: transparent;
}
a:hover .ourProject-image img
{
    background: #4d4d4d;
}

.ourProject-name
{
    font-weight: 700;

    display: table-cell;

    width: 140px;
    padding: 0 15px;

    vertical-align: middle;
}

/*
ページトップへ戻るボタン

Markup:
<a href="#pagetop" class="pagetop js-pagetop"></a>

Styleguide 3
*/
.pagetop
{
    display: block;

    padding: 23px 0 23px;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;
    text-align: center;

    background: #333;
}
.pagetop:hover
{
    background: #4d4d4d;
}

.pagetop-text
{
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;

    position: relative;

    display: inline-block;

    padding: 0 20px 0 0;

    color: #e5e5e5;
}
.pagetop-text:before
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    display: block;

    width: 8px;
    height: 8px;
    margin: auto;

    content: '';

    border-width: 0 4px 8px 4px;
    border-style: solid;
    border-color: transparent transparent #e5e5e5 transparent;
}

/*
ページネーション

Markup:
<div class="pagination">
  <ul>
    <li><a href="#">&lt;</a>
    </li>
    <li><span>...</span>
    </li>
    <li><a href="#">8</a>
    </li>
    <li><a href="#">9</a>
    </li>
    <li><a href="#" class="is-page-current">10</a>
    </li>
    <li><a href="#">11</a>
    </li>
    <li><a href="#">12</a>
    </li>
    <li><span>...</span>
    </li>
    <li><a href="#">&gt;</a>
    </li>
  </ul>
</div>

Styleguide 26
*/
.pagination
{
    font-size: 0;
    font-size: 0rem;

    position: relative;

    height: 48px;

    text-align: right;

    background: #e6e6e6;
}
.pagination ul
{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 700;

    display: inline-block;

    border-right: 1px solid #fdfdfd;
}
.pagination li
{
    float: left;
}
.pagination a,
.pagination span
{
    display: block;

    width: 46px;
    padding: 12px 0;

    text-align: center;

    color: #999;
    border-left: 1px solid #fdfdfd;
}
.pagination a.is-page-current,
.pagination span.is-page-current
{
    color: #e6e6e6;
    background: #999;
}
.pagination a
{
    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;
}
.pagination a:hover
{
    color: #e6e6e6;
    background: #999;
}
.pagination a.is-page-current
{
    color: #e6e6e6 !important;
    background: #999 !important;
}

.pagination-count, .pagination-page
{
    font-size: 12px;
    font-size: 1.2rem;

    position: absolute;
    top: 0;
    left: 0;

    padding-top: 15px;
    padding-bottom: 15px;

    color: #999;
}

.pagination-count
{
    padding-left: 30px;
}

.pagination-page
{
    padding-left: 20px;
}

/*
パネルアイテム

Markup:
<div class="panelItem">
  <div class="panelItem-image">
    <img src="{{ config.placehold }}/440x194" alt="" class="fluid">
  </div>
  <div class="panelItem-text">
    <b class="panelItem-categoryLabel categoryLabel--column">コラム</b>

    <p class="panelItem-lead">連載「ドイツのしごと事情から 見つめ直す、あなたの働き方」</p>
    <p class="panelItem-title"><em>第4回：新築よりも築100 年の方が価値がある？ 建築 的視点から見た、ドイツと 日本の違い</em></p>
  </div>
</div>

Styleguide 10
*/
.panelItem
{
    position: relative;
}
.panelItem a
{
    display: block;
}

.panelItem-link
{
    color: inherit;
}

.panelItem-image img
{
    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}
a:hover .panelItem-image img
{
    opacity: .7;
}

.panelItem-text
{
    line-height: 1.4;

    padding: 20px;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;

    background: #fafafa;
}
a:hover .panelItem-text
{
    background: #fff;
}
.panelItem-text > *:last-child
{
    margin-bottom: 0;
}

.panelItem-condition
{
    font-size: 13px;
    font-size: 1.3rem;

    color: #808080;
}
.panelItem-condition > dt
{
    font-weight: bold;
}

.panelItem-text--nobackground
{
    line-height: 1.4;

    padding: 20px 0 0;
}

.panelItem-footer
{
    padding: 10px 20px;

    border-top: 1px solid #d9d9d9;
    background: #fafafa;
}

.panelItem-delete
{
    font-size: 12px;
    font-size: 1.2rem;

    text-align: right;
}
.panelItem-delete a
{
    display: inline-block;

    -webkit-transition: color .2s ease-out;
       -moz-transition: color .2s ease-out;
         -o-transition: color .2s ease-out;
            transition: color .2s ease-out;

    color: #00bba9 !important;
}
.panelItem-delete a:hover
{
    color: #00e6cd !important;
}

.panelItem-font--xl
{
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;

    margin: 0 0 10px;
}

.panelItem-font--l
{
    font-size: 14px;
    font-size: 1.4rem;

    margin: 0 0 10px;
}
.panelItem-font--l > strong
{
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.45;

    color: #3d82bb;
}
.panelItem-font--l > em
{
    font-size: 12px;
    font-size: 1.2rem;
}

.panelItem-font--m
{
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bold;

    margin: 0 0 10px;
}

.panelItem-font--s
{
    font-size: 13px;
    font-size: 1.3rem;

    margin: 0 0 10px;
}

.panelItem-font--xs
{
    font-size: 12px;
    font-size: 1.2rem;

    padding: 10px 0 0;

    border-top: 1px solid #d9d9d9;
}

.panelItem-tagLabel
{
    position: absolute;
    top: 0;
    right: 0;
}

.panelItem-balloon
{
    font-size: 12px;
    font-size: 1.2rem;

    position: relative;

    margin: 10px 0 0;
    padding: 7px;

    text-align: center;

    color: #00665d;
    border: 1px solid #8fc8c2;
    border-radius: 2px;
    background: #cbe2df;
}
.panelItem-balloon:before
{
    position: absolute;
    top: -18px;
    right: 5px;

    display: block;

    width: 24px;
    height: 18px;

    content: '';

    background-image: url(../img/sprite.png);
    background-position: 0 -314.5px;
    background-size: 466px 346.5px;
}

/*
プロフィール

Markup:


Styleguide 25
*/
.profile
{
    margin: 10px 0 40px;
    padding: 30px 0 0;

    border: 1px solid #e6e6e6;
}

.profile-heading
{
    font-size: 20px;
    font-size: 2rem;
    font-weight: bold;

    margin: 0 0 15px;
    padding: 0 44px;
}

.profile-row, .profile-row--company
{
    display: table;

    width: 100%;
    padding: 0 44px 30px;

    table-layout: fixed;

    border-bottom: 1px solid #e6e6e6;
}
.profile-row:last-child, .profile-row--company:last-child
{
    border-bottom: none;
}

.profile-row--company
{
    padding-top: 30px;
}

.profile-image
{
    display: table-cell;

    width: 208px;
    padding: 0 40px 0 0;

    vertical-align: top;
}

.profile-text
{
    display: table-cell;

    width: 100%;

    vertical-align: top;
}
.profile-text > dt
{
    font-weight: bold;

    margin: 0 0 10px;
}
.profile-text > dd
{
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.71429;
}

.recommend
{
    padding: 30px 0 0;

    border: 8px solid #e6e6e6;
}

.recommend-image
{
    margin-bottom: 15px;
}

.recommend-text > dt
{
    font-weight: bold;

    margin: 0 0 10px;
}
.recommend-text > dd
{
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.71429;
}

/*
プルダウン

Markup:
<b class="categoryLabel--column">コラム</b>

Styleguide 12
*/
.pulldown
{
    font-size: 0;
    font-size: 0rem;

    position: relative;

    display: inline-block;

    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    margin: 0 10px 0 0;
    padding: 0 32px 0 0;

    text-align: left;
    vertical-align: top;
}
.pulldown:after
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    display: block;

    width: 17px;
    height: 17px;
    margin: auto;

    content: '';

    background-image: url(../img/sprite.png);
    background-position: -257px -206.5px;
    background-size: 466px 346.5px;
}
.pulldown:last-of-type
{
    padding-right: 0;
}
.pulldown:last-of-type:after
{
    display: none;
}

.pulldown-label
{
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 56px;

    display: inline-block;

    padding: 0 14px;

    text-align: center;
    vertical-align: top;

    color: #fff;
    border-radius: 4px 0 0 4px;
    background: #008275;
}

.pulldown-box
{
    font-size: 16px;
    font-size: 1.6rem;

    position: relative;

    display: inline-block;

    width: 230px;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;
    vertical-align: top;

    border: 1px solid #6d8c89;
    border-left: none;
    border-radius: 0 4px 4px 0;
    background: #779995;
}
.pulldown-box.is-pulldown-active
{
    border-color: #bfbfbf;
    background: #fff;
}

.pulldown-select, .pulldown-select--selected
{
    display: table;

    width: 100%;

    table-layout: fixed;
}

.pulldown-select--selected
{
    padding: 0 15px 0 0;
}

.pulldown-selectInner
{
    display: table-cell;

    width: 100%;
    height: 54px;
    padding: 0 0 0 20px;

    vertical-align: middle;

    color: #666;
}

.pulldown-text
{
    padding: 0 15px 0 0;

    cursor: default;
}

.pulldown-selected
{
    position: relative;

    color: #fff;
}
.pulldown-selected:after
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    display: block;

    width: 8px;
    height: 7px;
    margin: auto;

    content: '';

    background-image: url(../img/sprite.png);
    background-position: -124px -158.5px;
    background-size: 466px 346.5px;
}
.is-pulldown-active .pulldown-selected
{
    color: #4c4c4c;
}
.is-pulldown-active .pulldown-selected:after
{
    width: 8px;
    height: 7px;

    background-image: url(../img/sprite.png);
    background-position: -114px -158.5px;
    background-size: 466px 346.5px;
}

.pulldown-pulldown
{
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;

    display: none;
    overflow: auto;

    width: 100%;
    max-height: 340px;

    border: 1px solid #bfbfbf;
    background: #fff;
}

.pulldown-selectable
{
    font-size: 14px;
    font-size: 1.4rem;

    height: 34px;
    padding-left: 12px;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;

    background: transparent;
}
.pulldown-selectable:hover
{
    background: #89e6dc;
}

/*
プルダウン検索

Markup:
<div class="search">
  <div class="search-pulldown">
    <div class="pulldown">
      <div class="pulldown-label">業種</div>
      <div class="pulldown-box">
        <div class="pulldown-select">
          <div class="pulldown-selectInner">
            <div class="pulldown-selected">
              すべてすべてすべてすべてすべてすべて
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="pulldown">
      <div class="pulldown-label">業種</div>
      <div class="pulldown-box">
        <div class="pulldown-select">
          <div class="pulldown-selectInner">
            <div class="pulldown-selected">
              すべて
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="search-button">
    <button type="submit" class="button-main">さがす</button>
  </div>
</div>

Styleguide 13
*/
.search
{
    padding: 0;

    text-align: center;
}

.search-pulldown
{
    display: inline-block;
}

.search-button
{
    display: inline-block;

    width: 240px;

    vertical-align: top;
}

/*
セクション

表示上の区分けのため、sectionタグ以外でも使用します

Styleguide 7
*/
/*
セクション

Markup:
<a href="#pagetop" class="pagetop js-pagetop"></a>

Styleguide 7.1
*/
.section, .section--search
{
    padding: 0 0 30px;

    border-top: 1px solid #d9d9d9;
}

.section--search
{
    background: #e4e4e4;
}

/*
セクション見出しグループ

Markup:
<div class="section-hgroup">
  <h1 class="section-heading">SEARCH BY CONDITION</h1>
  <p class="section-heading--ja">条件からさがす</p>
</div>

Styleguide 7.2
*/
.section-hgroup
{
    padding: 0 0 25px;
}

/*
セクション見出し

Markup:
<h1 class="section-heading">SEARCH BY CONDITION</h1>

Styleguide 7.3
*/
.section-heading
{
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;

    position: relative;

    padding: 25px 0 0;

    text-align: center;
}
.section-heading:before
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    display: block;

    width: 35px;
    height: 6px;
    margin: auto;

    content: '';

    background: #00cdb9;
}
.section--search .section-heading
{
    color: #008275;
}

/*
セクション見出し(日本語)

Markup:
<h1 class="section-heading">SEARCH BY CONDITION</h1>
<p class="section-heading--ja">条件からさがす</p>

Styleguide 7.4
*/
.section-heading--ja
{
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1;

    margin: 10px 0 0;

    text-align: center;
}
.section--search .section-heading--ja
{
    color: #008275;
}

/*
SNSボタン

Markup:
<ul class="snsButton">
  <li>Twitter</li>
  <li>Facebook</li>
</ul>

Styleguide 18
*/
.snsButton
{
    display: inline-block;

    vertical-align: top;

    *zoom: 1;
}
.snsButton:before, .snsButton:after
{
    display: table;

    content: '';
}
.snsButton:after
{
    clear: both;
}
.snsButton > li
{
    float: left;

    margin: 0 0 0 5px;
}
.snsButton .fb-like span
{
    vertical-align: top !important;
}

.snsButton-pocket
{
    margin-right: -40px !important;
}

/*
ソート

Markup:

Styleguide 39
*/
.sort-toggle, .sort-button
{
    font-weight: bold;
    line-height: 58px;

    display: block;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;
    text-align: center;

    color: inherit;
}

.sort
{
    margin: 0 0 22px;
}

.sort-toggle
{
    margin: 0 0 1px;

    background: #d9d9d9;
}
.sort-toggle:hover
{
    background: #bfbfbf;
}

.sort-list
{
    font-size: 0;

    padding: 22px 55px;

    text-align: center;

    background: #d9d9d9;
}

.sort-item
{
    font-size: 14px;
    font-size: 1.4rem;

    display: inline-block;

    padding: 4px 5px;
}

.sort-label
{
    font-size: 14px;
    font-size: 1.4rem;

    padding: 4px 10px;

    cursor: pointer;
    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;

    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fff;
}
.sort-label:hover
{
    color: #00d0bc;
}
.sort-label.checked
{
    color: #fff;
    border-color: #8c8c8c;
    background: #999;
}

.sort-button
{
    width: 100%;
    padding: 0;

    color: #fff;
    border: none;
    background: #00bba9;
}
.sort-button:hover
{
    background: #00d0bc;
}

.spinner
{
    display: inline-block;

    width: 17px;
    height: 13px;

    background-image: url('../img/spinner.png?1496732574');
    background-repeat: no-repeat;
    background-position: 0 0;
}

.spinnerWrapper
{
    padding: 18px 0;
}

.spinner-block
{
    z-index: 0;

    display: block;

    width: 50px;
    height: 50px;
    margin: 140px auto;

    content: '';
    -webkit-transition: opacity .4s ease-out;
       -moz-transition: opacity .4s ease-out;
         -o-transition: opacity .4s ease-out;
            transition: opacity .4s ease-out;

    background: url('../img/spinner.gif?1496732574') 50% 0 no-repeat;
}

/*
強調するテキスト

Markup:
<p class="strongText">
  CINRA.JOBは、株式会社CINRAが運営する<em>求人情報サイト</em>です。業種・職種を問わず、<em>クリエーターのための就職・転職情報を掲載</em>。今クリエイティブ業界で<em>必要とされている人材情報</em>、<em>今ここにしかない出会いを</em>、さまざまなかたちで<em>発信・支援</em>しています。
</p>

Styleguide 38
*/
.strongText
{
    font-weight: bold;
    line-height: 2;
}
.strongText em
{
    background: #f1f180;
}

/*
サイドバーのなんでも入ってくるボックス

Markup:
<div class="subBox">
  <div class="subBox-image">
    <img src="{{ config.placehold }}/560x228" alt="" class="fluid">
  </div>

  <b class="panelItem-tagLabel tagLabel--work">私としごと</b>
  <p class="subBox-text--large">自分が好きなことをやり続ける自由を得るために</p>
  <p class="subBox-text--medium">株式会社FACT / ロック観光協会株式会社 鹿野 淳</p>
</div>

Styleguide 20
*/
.subBox
{
    position: relative;
}

.subBox-image
{
    overflow: hidden;

    margin: 0 0 10px;
}
.subBox-image img
{
    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}
a:hover .subBox-image img
{
    opacity: .7;
}

.subBox-text--large
{
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;

    margin: 0 0 5px;
}

.subBox-text--medium
{
    font-size: 14px;
    font-size: 1.4rem;
}

.tab, .tab-agent .tab-navi
{
    margin: 0 0 20px;

    border-bottom: 6px solid #00d0bc;
}
.tab > ul, .tab-agent .tab-navi > ul
{
    margin: 0 0 0 -1px;

    *zoom: 1;
}
.tab > ul:before, .tab-agent .tab-navi > ul:before, .tab > ul:after, .tab-agent .tab-navi > ul:after
{
    display: table;

    content: '';
}
.tab > ul:after, .tab-agent .tab-navi > ul:after
{
    clear: both;
}
.tab > ul > li, .tab-agent .tab-navi > ul > li
{
    float: left;

    width: 25%;
    padding: 0 0 0 1px;
}
.tab > ul > li > a, .tab-agent .tab-navi > ul > li > a
{
    font-weight: bold;
    line-height: 60px;

    display: block;

    text-align: center;

    color: #fff;
    border-bottom: 1px solid #f2f2f2;
    background: #999;
}
.tab > ul > li > a.is-tab-active, .tab-agent .tab-navi > ul > li > a.is-tab-active
{
    pointer-events: none;

    border-color: #00d0bc;
    background: #00d0bc;
}

.tab-agent
{
    position: relative;

    padding: 15px;
}
.tab-agent .tab-navi
{
    position: relative;
    z-index: 2;

    margin: 0;

    border-color: #4d4d4d;
}
.tab-agent .tab-navi > ul > li
{
    position: relative;

    width: 50%;
}
.tab-agent .tab-navi > ul > li > a
{
    line-height: 1.25 !important;

    padding: 20px 0;

    color: #8a8a89;
    border-color: #e5e5e5;
    background: #e5e5e5;
}
.tab-agent .tab-navi > ul > li > a.is-tab-active
{
    padding: 20px 0;

    color: #fff;
    border-color: #4d4d4d;
    background: #4d4d4d;
}
.tab-agent .tab-navi > ul > li .badge-agent
{
    font-size: 0;

    position: absolute;
    top: -10px;
    right: -10px;

    display: inline-block;
    overflow: hidden;

    width: 40px;
    height: 40px;

    content: '';
    vertical-align: middle;
    white-space: nowrap;
    text-indent: 100%;

    background-image: url(../img/sprite.png);
    background-position: -379px -48px;
    background-size: 466px 346.5px;
}
.tab-agent .tab-body
{
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;

    opacity: 0;
    border: 1px solid #d9d9d9;
}
.tab-agent .tab-body.is-tabBody-active
{
    position: relative;
    z-index: 1;

    opacity: 1;
}

/*
タグ

Styleguide 9
*/
.tag--footer, .tag--page
{
    display: inline-block;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;
    text-align: center;

    border-radius: 6px;
    background: #ccc;
}

/*
タグ(フッター)

Styleguide 9.1
*/
.tag--footer
{
    font-size: 14px;
    font-size: 1.4rem;

    padding: 5px 20px;

    color: #4c4c4c;
}
.tag--footer:hover
{
    background: #b2b2b2;
}

/*
タグ(ページ内)

Styleguide 9.2
*/
.tag--page
{
    font-size: 12px;
    font-size: 1.2rem;

    padding: 3px 8px;

    color: inherit;
    border-radius: 2px;
}
.tag--page:hover
{
    border-color: #737373;
    background: #808080;
}

/*
タグラベル

Markup:
<b class="tagLabel--special">特集</b>
<b class="tagLabel--column">コラム</b>
<b class="tagLabel--shigoto">私としごと</b>
<b class="tagLabel--work">私としごと</b>
<b class="tagLabel--series">連載</b>


Styleguide 11
*/
.tagLabel--special, .tagLabel--column, .tagLabel--shigoto, .tagLabel--series
{
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;

    display: inline-block;

    padding: 2px 8px;

    color: #fff;
}

.tagLabel--special
{
    background: #7680a6;
}

.tagLabel--column
{
    background: #ab61a5;
}

.tagLabel--shigoto
{
    background: #d78000;
}

.tagLabel--series
{
    background: #a59100;
}

.tagLabel--large
{
    font-size: 16px;
    font-size: 1.6rem;

    padding: 6px 8px;
}

/*
筆記体のテキスト
TODO: 画像にするかSVGにするか検討

Styleguide 27
*/
.text-special, .text-recruitInfo, .text-twitter, .text-mailmagazine, .text-interview, .text-column
{
    display: block;
    overflow: hidden;

    white-space: nowrap;
    text-indent: 100%;
}

/*
Special

Markup:
<span class="text-special">Special</span>

Styleguide 27.1
*/
.text-special
{
    width: 99px;
    height: 47px;

    background-image: url(../img/sprite.png);
    background-position: 0 -228.5px;
    background-size: 466px 346.5px;
}

/*
Recruit Info

Markup:
<span class="text-recruitInfo">Recruit Info</span>

Styleguide 27.2
*/
.text-recruitInfo
{
    width: 153px;
    height: 46px;

    background-image: url(../img/sprite.png);
    background-position: -313px 0;
    background-size: 466px 346.5px;
}

/*
Twitter(footer)

Markup:
<span class="text-twitter">Twitter</span>

Styleguide 27.3
*/
.text-twitter
{
    display: inline-block;

    width: 95px;
    height: 35px;

    background-image: url(../img/sprite.png);
    background-position: 0 -277.5px;
    background-size: 466px 346.5px;
}

/*
MailMagazine(footer)

Markup:
<span class="text-mailmagazine">MailMagazine</span>

Styleguide 27.4
*/
.text-mailmagazine
{
    display: inline-block;

    width: 174px;
    height: 47px;

    background-image: url(../img/sprite.png);
    background-position: -101px -228.5px;
    background-size: 466px 346.5px;
}

/*
interview

Markup:
<span class="text-interview">Interview</span>

Styleguide 27.5
*/
.text-interview
{
    display: inline-block;

    width: 118px;
    height: 34px;

    background-image: url(../img/sprite.png);
    background-position: -97px -277.5px;
    background-size: 466px 346.5px;
}

/*
column

Markup:
<span class="text-column">Column</span>

Styleguide 27.6
*/
.text-column
{
    display: inline-block;

    width: 86px;
    height: 34.5px;

    background-image: url(../img/sprite.png);
    background-position: -375px -92px;
    background-size: 466px 346.5px;
}

/*
ヘッダーの表示するツールチップ

jsで生成

Markup:
<div class="tooltip">求人をさがす</div>

Styleguide 32
*/
.tooltip
{
    font-size: 14px;
    font-size: 1.4rem;

    position: fixed;
    z-index: 1;
    top: 70px;

    display: inline-block;

    padding: 10px 20px;

    -webkit-transition:         transform .2s ease-out;
    -webkit-transition: -webkit-transform .2s ease-out;
       -moz-transition:         transform .2s ease-out;
       -moz-transition: -webkit-transform .2s ease-out;
         -o-transition:         transform .2s ease-out;
         -o-transition: -webkit-transform .2s ease-out;
            transition:         transform .2s ease-out;
            transition: -webkit-transform .2s ease-out;
    -webkit-transform: translate3d(0, -200px, 0);
       -moz-transform: translate3d(0, -200px, 0);
        -ms-transform: translate3d(0, -200px, 0);
            transform: translate3d(0, -200px, 0);
    pointer-events: none;

    color: #000;
    background: #00d4c0;
}
.tooltip.is-tooltip-visible
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

/*
トップページ記事一覧のパネル

Markup:
<div class="topPanel--large">
  <b class="topPanel-tagLabel tagLabel--column">コラム</b>

  <div class="topPanel-image">
    <img src="{{ config.placehold }}/900x608" alt="">
  </div>

  <div class="topPanel-text">
    <div class="topPanel-name">株式会社バニッシュ・スタンダード</div>
    <p class="topPanel-lead">個性豊かなバニッシュ・スタンダードが仕掛ける「HAPPY屋」ってなんだ？</p>
  </div>
</div>

<div class="topPanel--small">
  <b class="topPanel-tagLabel tagLabel--column">コラム</b>

  <div class="topPanel-image">
    <img src="{{ ../config.placehold }}/437x269" alt="">
  </div>

  <div class="topPanel-text">
    <div class="topPanel-name">株式会社バニッシュ・スタンダード</div>
    <p class="topPanel-lead">個性豊かなバニッシュ・スタンダードが仕掛ける「HAPPY屋」ってなんだ？</p>
  </div>
</div>

Styleguide 16
*/
.topPanel--large, .topPanel--small
{
    position: relative;

    overflow: hidden;

    width: 100%;

    -webkit-transition: background-color .4s ease-out;
       -moz-transition: background-color .4s ease-out;
         -o-transition: background-color .4s ease-out;
            transition: background-color .4s ease-out;

    background: #000;
    background-color: transparent;

    -webkit-font-smoothing: antialiased;
}
.topPanel--large:before, .topPanel--small:before
{
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: block;

    width: 50px;
    height: 50px;
    margin: auto;

    content: '';
    -webkit-transition: opacity .4s ease-out;
       -moz-transition: opacity .4s ease-out;
         -o-transition: opacity .4s ease-out;
            transition: opacity .4s ease-out;

    opacity: 0;
    background: url('../img/spinner.gif?1496732574') 50% 50% no-repeat;
}
.is-topArticlesInner-visible .topPanel--large, .is-topArticlesInner-visible .topPanel--small
{
    background-color: rgba(0, 0, 0, .05);
}
.is-topArticlesInner-visible .topPanel--large:before, .is-topArticlesInner-visible .topPanel--small:before
{
    opacity: 1;
}
.is-panel-visible.topPanel--large, .is-panel-visible.topPanel--small
{
    opacity: 1;
    background-color: black;
}
.is-panel-visible.topPanel--large:before, .is-panel-visible.topPanel--small:before
{
    opacity: 0;
}

.topPanel-inner
{
    position: relative;
    z-index: 1;

    height: 100%;
    max-height: 100%;

    -webkit-transition: opacity .4s ease-out;
       -moz-transition: opacity .4s ease-out;
         -o-transition: opacity .4s ease-out;
            transition: opacity .4s ease-out;

    opacity: 0;
}
.is-panel-visible .topPanel-inner
{
    opacity: 1;
}

.topPanel--large
{
    height: 608px;
}
.topPanel--large .topPanel-lead
{
    font-size: 26px;
    font-size: 2.6rem;

    margin: 0 0 5px;
}
.topPanel--large .topPanel-name
{
    font-size: 20px;
    font-size: 2rem;

    margin-bottom: 10px;
}

.topPanel--small
{
    height: 269px;
}

.topPanel-image
{
    height: 100%;
}
.topPanel-image img
{
    -webkit-transition: opacity .2s ease-out;
       -moz-transition: opacity .2s ease-out;
         -o-transition: opacity .2s ease-out;
            transition: opacity .2s ease-out;
}
a:hover .topPanel-image img
{
    opacity: .7;
}

.topPanel-text
{
    font-weight: bold;

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    padding: 50px 20px 15px;

    color: #fff;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, .8));
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC44Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(70%, rgba(0, 0, 0, .5)), color-stop(100%, rgba(0, 0, 0, .8)));
    background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, .8));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, .8));
    background-image:         linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, .8));
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(70%, rgba(0, 0, 0, .3)), color-stop(100%, rgba(0, 0, 0, .5)));
    background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 70%, rgba(0, 0, 0, .5));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 70%, rgba(0, 0, 0, .5));
    background-image:         linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 70%, rgba(0, 0, 0, .5));
    background-size: 100%;
    background-size: 100%;
    text-shadow: 0 0 6px rgba(0, 0, 0, .8);
}

.topPanel-tagLabel
{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
}

.topPanel-name
{
    font-size: 14px;
    font-size: 1.4rem;

    margin: 0 0 5px;
}

.topPanel-lead
{
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.36364;
}

/*
フッター twitter timeline

Markup:
<div class="twitterBox">
  タイムライン
</div>

Styleguide 24
*/
.twitterBox
{
    position: relative;

    overflow: hidden;

    height: 282px;
    padding: 0 25px 0 0;
}

.applicationForm-header
{
    line-height: 1;

    padding: 40px 20px;

    text-align: center;

    color: #00bba9;
    background: #4d4d4d;

    -webkit-font-smoothing: antialiased;
}

.applicationForm-heading
{
    font-family: 'Montserrat', sans-serif;
    font-size: 27px;
    font-size: 2.7rem;
    font-weight: 700;
}

.applicationForm-body
{
    padding: 30px 0 60px;
}

.applicationForm-company
{
    display: table;

    width: 100%;
    margin: 0 0 30px;

    table-layout: fixed;

    background: #fff;
}

.applicationForm-company-image
{
    display: table-cell;

    width: 270px;

    vertical-align: middle;
}

.applicationForm-company-text
{
    display: table-cell;

    width: 100%;
    padding: 15px 20px;

    vertical-align: middle;
}

.applicationForm-company-name
{
    font-size: 14px;
    font-size: 1.4rem;

    margin: 0 0 5px;
}

.applicationForm-company-occupation
{
    font-size: 20px;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.4;
}

.article-header
{
    background: #e6e6e6;
}

.article-header-column
{
    display: table;

    width: 100%;
    min-width: 960px;
    max-width: 1800px;
    margin: auto;

    table-layout: fixed;
}

.article-header-left
{
    display: table-cell;

    width: 60%;

    vertical-align: middle;

    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-background-size: auto 74%;
       -moz-background-size: auto 74%;
         -o-background-size: auto 74%;
            background-size: auto 74%;
}
@media screen and (min-width: 1220px)
{
    .article-header-left
    {
        width: 100%;

        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
    }
}

.article-header-right
{
    display: table-cell;

    width: 40%;
    height: 600px;
    padding: 40px;

    vertical-align: top;
}
@media screen and (min-width: 1220px)
{
    .article-header-right
    {
        width: 600px;
    }
}

.article-header-text
{
    min-height: 520px;
    padding: 40px;

    background: #fff;
}

.article-hgroup
{
    position: relative;

    padding: 35px 0 0;
}
.article-hgroup:before
{
    position: absolute;
    top: -6px;
    left: -120px;

    display: block;

    width: 154px;
    height: 6px;

    content: '';

    background: #00d4c0;
}
.article-hgroup [class^='tagLabel']
{
    margin: 0 0 15px;
}

.article-header-lead
{
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;

    margin: 0 0 10px;
}

.article-heading, .article-heading--special
{
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: normal;
    line-height: 1.7;
}
@media screen and (min-width: 1220px)
{
    .article-heading, .article-heading--special
    {
        font-size: 30px;
        font-size: 3rem;
    }
}

.article-heading--special
{
    line-height: 1.33333;
}

.article-subHeading, .article-subHeading--company, .article-subHeading--special
{
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 2;

    margin: 30px 0 10px;
}

.article-subHeading--company
{
    font-size: 20px;
    font-size: 2rem;
}

.article-subHeading--special
{
    margin-top: 10px;
}

.article-catch
{
    display: block;

    margin: 0 0 30px;
}

.article-tagList
{
    margin: 0 0 40px;

    *zoom: 1;
}
.article-tagList:before, .article-tagList:after
{
    display: table;

    content: '';
}
.article-tagList:after
{
    clear: both;
}
.article-tagList > li
{
    float: left;

    margin: 0 3px 3px 0;
}

.article-buttons > li
{
    margin: 0 0 10px;
}
.article-buttons > li:last-child
{
    margin-bottom: 0;
}

.article-meta
{
    padding: 15px 0;

    border-bottom: 1px solid #d9d9d9;
}

.article-breadcrumb
{
    float: left;

    width: 50%;
}

.article-snsButton
{
    float: right;

    width: 50%;

    text-align: right;
}

.article-inner, .article-lead
{
    padding: 30px 40px;
}
.article-inner .l-wysiwyg strong, .article-lead .l-wysiwyg strong
{
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 2;

    display: block;

    margin: 0 0 10px;

    color: #d78000;
}

.article-lead
{
    font-weight: bold;
    line-height: 2;

    border-bottom: 1px solid #e6e6e6;
}

.article-application
{
    position: relative;

    padding: 30px;

    background: #b2b2b2;
}
.article-application:before
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    display: block;

    width: 0;
    height: 0;
    margin: auto;

    content: '';

    border-width: 18px 11px 0 11px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.article-nextPage
{
    padding: 40px 0 50px;

    text-align: center;

    border-top: 1px solid #e6e6e6;
}
.article-nextPage > dt
{
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 700;

    margin: 0 0 15px;

    color: #808080;
}
.article-nextPage > dd
{
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: bold;
}

.article-controls
{
    *zoom: 1;
}
.article-controls:before, .article-controls:after
{
    display: table;

    content: '';
}
.article-controls:after
{
    clear: both;
}
.article-controls > li
{
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-size: 2rem;
    font-weight: 700;

    width: 50%;
}
.article-controls a
{
    display: block;

    padding: 20px;

    border-top: 1px solid #e6e6e6;
}

.article-back
{
    float: left;

    padding-right: 10px;
}

.article-next
{
    float: right;

    padding-left: 10px;

    text-align: right;
}

.article-offer
{
    padding: 40px 30px 40px 0;

    background: #f2f2f2;
}
.article-offer > h1
{
    margin: 0 0 20px;
}

.article-aside
{
    padding: 40px 0 0;

    background: #f2f2f2;
}

.article-aside-inner
{
    padding: 30px 30px 0 0;
}

.article-inner-snsButton
{
    text-align: right;
}

.article-leftImage, .article-rightImage
{
    display: table;

    width: 100%;

    table-layout: fixed;
}
.article-leftImage .left-image, .article-rightImage .left-image, .article-rightImage .right-image
{
    display: table-cell;

    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    width: 220px;
    padding: 0 40px 0 0;

    vertical-align: top;
}
.article-leftImage .text-wrapAround, .article-rightImage .text-wrapAround
{
    display: table-cell;

    width: 100%;

    vertical-align: top;
}

.article-rightImage .right-image
{
    padding: 0 0 0 40px;
}

.articleList-largeList
{
    padding: 22px 10px 8px;
}
.articleList-largeList > li
{
    margin: 0 0 22px;
}

.no-results
{
    margin: 40px 0;

    text-align: center;
}

.is-modal .l-body
{
    pointer-events: none;

            filter: blur(5px);
    -webkit-filter: blur(5px);
       -moz-filter: blur(5px);
        -ms-filter: blur(5px);
            filter: url('data:image/svg+xml;utf9,<svg%20version=\'1.1\'%20xmlns=\'http://www.w3.org/2000/svg\'><filter%20id=\'blur\'><feGaussianBlur%20stdDeviation=\'3\'%20/></filter></svg>#blur');
}

.l-boxSection, .l-boxSection--recruitment
{
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.6;

    background: #fefefe;
}

.l-boxSection
{
    background: #fefefe;
}

.l-boxSection--recruitment
{
    border-bottom: 2px solid #3d82bb;
    background: #f5f8fa;
}

.boxSection-inner--spacing p, .boxSection-inner--nospacing p
{
    margin: 0 0 20px;
}
.boxSection-inner--spacing p:last-child, .boxSection-inner--nospacing p:last-child
{
    margin-bottom: 0;
}
.boxSection-inner--spacing strong, .boxSection-inner--nospacing strong
{
    font-weight: bold;

    display: block;

    margin: 0 0 10px;
}

.boxSection-inner--spacing
{
    padding: 30px 40px;
}
.boxSection-inner--spacing.border
{
    border-bottom: 1px solid #e6e6e6;
}

.boxSection-ul, .boxSection-ul--bgwhite
{
    padding: 15px 0;
}
.boxSection-ul > li, .boxSection-ul--bgwhite > li
{
    font-weight: bold;

    padding: 10px 40px;

    border-bottom: 1px solid #e6e6e6;
}
.boxSection-ul > li:last-child, .boxSection-ul--bgwhite > li:last-child
{
    border-bottom: none;
}
.boxSection-ul > li:before, .boxSection-ul--bgwhite > li:before
{
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1;

    display: inline-block;

    width: 40px;
    padding: 0 15px 0 0;

    content: attr(data-alphabet);
    text-align: center;

    color: #3d82bb;
}

.boxSection-ul--bgwhite
{
    background: #fff;
}

.boxSection-dl, .boxSection-dl--nobordertop
{
    padding: 10px 0 30px;

    border-top: 1px solid #e6e6e6;
}
.boxSection-dl > dt, .boxSection-dl--nobordertop > dt
{
    float: left;

    padding: 10px 0 0 40px;
}
.boxSection-dl > dd, .boxSection-dl--nobordertop > dd
{
    padding: 10px 40px 10px 220px;

    border-bottom: 1px solid #e6e6e6;
}
.boxSection-dl .button-main, .boxSection-dl--nobordertop .button-main, .boxSection-dl .l-form-agent .po-button-send-inner .po-button-send, .l-form-agent .po-button-send-inner .boxSection-dl .po-button-send, .boxSection-dl--nobordertop .l-form-agent .po-button-send-inner .po-button-send, .l-form-agent .po-button-send-inner .boxSection-dl--nobordertop .po-button-send
{
    margin: 5px 0;
}

.boxSection-dl--nobordertop
{
    border-top: none;
}

.norecruitment
{
    font-size: 15px;
    font-size: 1.5rem;

    padding: 55px 0;

    text-align: center;
}

.l-column
{
    display: table;

    width: 100%;
    padding: 25px 0 0;

    table-layout: fixed;
}

.column-main
{
    display: table-cell;

    width: 100%;

    vertical-align: top;

    background: #fefefe;
}

.column-sub
{
    display: table-cell;

    width: 320px;

    vertical-align: top;

    background: #e6e6e6;
}

.l-commonFooter
{
    background: #333;
}

.commonFooter-container
{
    padding: 58px 0;

    border-top: 1px solid #4d4d4d;
}

.commonFooter-row
{
    display: table;

    width: 100%;

    table-layout: fixed;
}

.commonFooter-left
{
    display: table-cell;

    width: 66%;

    vertical-align: top;
}

.commonFooter-right
{
    display: table-cell;

    width: 33%;

    text-align: center;
    vertical-align: top;
}

.commonFooter-rightInner
{
    display: inline-block;

    text-align: left;
}

.commonFooter-navigation
{
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1;

    margin: 0 0 45px;

    *zoom: 1;
}
.commonFooter-navigation:before, .commonFooter-navigation:after
{
    display: table;

    content: '';
}
.commonFooter-navigation:after
{
    clear: both;
}
.commonFooter-navigation > dt
{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;

    position: relative;

    float: left;

    margin: 0 15px 0 0;
    padding: 2px 14px 2px 4px;

    color: #333;
    background: #808080;
}
.commonFooter-navigation > dt:after
{
    position: absolute;
    top: 0;
    right: 0;

    display: block;

    width: 0;
    height: 0;

    content: '';

    border-width: 0 0 16px 10px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}
.commonFooter-navigation > dd
{
    float: left;

    margin: 0 20px 0 0;
    padding: 2px;
}
.commonFooter-navigation a
{
    -webkit-transition: color .2s ease-out;
       -moz-transition: color .2s ease-out;
         -o-transition: color .2s ease-out;
            transition: color .2s ease-out;

    color: #e5e5e5;
}
.commonFooter-navigation a:hover
{
    color: #999;
}

.commonFooter-copyright
{
    padding: 15px 0 0;

    color: #808080;
}
.commonFooter-copyright > small
{
    font-size: 10px;
    font-size: 1rem;
}

.commonFooter-credit
{
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;

    margin: 0 0 20px;

    color: #808080;
}

.commonFooter-logo
{
    margin: 0 0 10px;

    color: #fff;
}

.commonFooter-copy
{
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 1;

    -webkit-transition: color .2s ease-out;
       -moz-transition: color .2s ease-out;
         -o-transition: color .2s ease-out;
            transition: color .2s ease-out;

    color: #808080;
}
a:hover .commonFooter-copy
{
    color: #fff;
}

.l-contents
{
    padding: 0 0 60px;

    border-bottom: 1px solid #fff;
}

.contents-header
{
    line-height: 1;

    padding: 70px 20px;

    text-align: center;

    color: #00bba9;
    background: #4d4d4d;

    -webkit-font-smoothing: antialiased;
}

.contents-heading
{
    font-family: 'Montserrat', sans-serif;
    font-size: 27px;
    font-size: 2.7rem;
    font-weight: 700;

    margin: 0 0 15px;
}

.contents-heading--ja
{
    font-size: 18px;
    font-size: 1.8rem;
}

.contents-meta
{
    padding: 15px 0;
}

.contents-body
{
    padding: 25px 0 0;

    border-top: 1px solid #d9d9d9;
}

.content-2col_body
{
    position: relative;

    float: left;

    width: 390px;

    border: 1px solid #e5e5e5;
}
.content-2col_body:nth-child(2n)
{
    float: right;
}
.content-2col_body:nth-child(2n):before
{
    position: absolute;
    top: calc(50% - 16px);
    left: -27px;

    width: 32px;
    height: 32px;

    content: '';

    background-image: url(../img/sprite.png);
    background-position: -578px -261px;
}

.favorites-section
{
    padding: 0 0 30px;
}
.favorites-section:last-child
{
    padding-bottom: 0;
}
.favorites-section .heading--link
{
    margin-bottom: 20px;
}
.favorites-section .heading--link:before
{
    display: inline-block;

    padding: 0 4px;

    content: '<';

    color: #999;
}

.favorites-sectionInner
{
    padding: 30px 0 0;
}

.favorites-search
{
    padding: 10px 0;
}

.l-footer
{
    background: #e4e4e4;
}

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

.footer-tagList
{
    font-size: 0;
    font-size: 0rem;

    text-align: center;
}
.footer-tagList > li
{
    display: inline-block;

    padding: 4px 2px;
}

.footer-asideInner
{
    position: relative;

    float: left;

    width: 50%;
    padding: 0 10px;
}

.footer-twitter, .footer-mailmagazine
{
    background: #f2f2f2;
}

.footer-twitter-follow
{
    height: 35px;
    padding: 7px 0 0;

    text-align: center;

    background: #ccc;
}
.footer-twitter-follow > *
{
    display: inline-block;

    vertical-align: top;
}

.footer-asideHeading
{
    line-height: 1;

    position: absolute;

    width: 100%;
    margin: -15px 0 0;

    text-align: center;
}

.footer-asideBox
{
    min-height: 378px;
    padding: 30px 35px;
}

.footer-applicationForm
{
    font-size: 10px;
    font-size: 1rem;
    line-height: 70px;

    text-align: center;

    color: #808080;
    background: #333;
}

.google_conversion_frame
{
    position: fixed;
}

.l-form input[type='text'], .l-form--confirm input[type='text'], .l-form-agent input[type='text'],
.l-form input[type='email'],
.l-form--confirm input[type='email'],
.l-form-agent input[type='email'],
.l-form input[type='url'],
.l-form--confirm input[type='url'],
.l-form-agent input[type='url'], .l-form textarea, .l-form--confirm textarea, .l-form-agent textarea, .form-select
{
    width: 100%;
    padding: 2px 6px;

    border: 1px solid #bfbfbf;
    border-radius: 4px;
}

.form-spacing--before, .form-spacing--after
{
    display: inline-block;

    vertical-align: top;
}

.form-spacing--before
{
    padding: 0 0 0 5px;
}

.form-spacing--after
{
    padding: 0 5px 0 0;
}

.l-form, .l-form--confirm, .l-form-agent
{
    font-size: 15px;
    font-size: 1.5rem;
}
.l-form input[type='text'], .l-form--confirm input[type='text'], .l-form-agent input[type='text'],
.l-form input[type='email'],
.l-form--confirm input[type='email'],
.l-form-agent input[type='email'],
.l-form input[type='url'],
.l-form--confirm input[type='url'],
.l-form-agent input[type='url']
{
    height: 32px;
}
.l-form textarea, .l-form--confirm textarea, .l-form-agent textarea
{
    height: 180px;

    resize: vertical;
}
.l-form select, .l-form--confirm select, .l-form-agent select
{
    z-index: 1;

    width: 100% !important;
    height: 36px !important;

    -webkit-appearance: none !important;
}

.l-form--confirm .form-box, .l-form--confirm .l-form-agent table tr, .l-form-agent table .l-form--confirm tr
{
    padding-top: 25px;
    padding-bottom: 25px;
}
.l-form--confirm .form-row
{
    margin: 0 0 10px;
}

.form-box, .l-form-agent table tr
{
    padding: 30px 0 30px 25px;

    border-bottom: 1px solid #e6e6e6;
}

.form-row
{
    display: table;

    width: 100%;
    margin: 0 0 20px;

    table-layout: fixed;
}
.form-row:last-child
{
    margin-bottom: 0;
}

.form-head, .l-form-agent table th
{
    display: table-cell;

    width: 220px;
    padding: 5px 0 0;

    vertical-align: top;
}

.form-data, .l-form-agent table td
{
    display: table-cell;

    width: 100%;

    vertical-align: top;
}

.form-data-row
{
    display: table;

    width: 100%;
    margin: 0 0 20px;

    table-layout: fixed;
}
.form-data-row:last-child
{
    margin-bottom: 0;
}

.form-data-head
{
    display: table-cell;

    width: 150px;
    padding: 5px 0 0;

    vertical-align: top;
}

.form-data-data
{
    display: table-cell;

    width: 100%;

    vertical-align: top;
}

.form-name
{
    display: inline-block;

    margin: 0 25px 0 0;
}

.form-label
{
    line-height: 32px;

    display: inline-block;

    width: 40px;
}

.form-check
{
    line-height: 1;

    display: inline-block;

    padding: 0 30px 0 0;
}
.form-check input
{
    display: inline-block;

    margin: 0 5px 0 0;
}

.form-field--small, .form-field--x-small, .form-field--medium, .form-field--large
{
    position: relative;

    display: inline-block;
}

.form-field--small
{
    width: 200px;
}

.form-field--x-small
{
    width: 90px;
}

.form-field--medium
{
    width: 400px;
}

.form-field--large
{
    width: 550px;
}

.form-select
{
    padding-right: 12px;
    padding-left: 12px;
}

.form-selectInner
{
    line-height: 30px;

    position: relative;
    z-index: 0;

    display: block !important;

    width: auto !important;
}
.form-selectInner:after
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    display: block;

    width: 0;
    height: 0;
    margin: auto;

    content: '';

    border-width: 8px 5px 0 5px;
    border-style: solid;
    border-color: #666 transparent transparent transparent;
}

.form-required
{
    font-weight: normal;
}
.form-required:after
{
    display: inline-block;

    padding: 0 0 0 5px;

    content: '\002605';

    color: #00bba9;
}

.form-alert
{
    position: absolute;
    z-index: 1;
    top: 5px;
    right: -220px;

    display: inline-block;

    width: 200px;
    padding: 0 10px;

    color: #fff;
    background: #f66;
}
.form-alert:before
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: -8px;

    display: block;

    width: 0;
    height: 0;
    margin: auto;

    content: '';
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);

    border-width: 5px 8px 5px 0;
    border-style: solid;
    border-color: transparent #f66 transparent transparent;
}

.form-footer
{
    padding: 30px;

    background: #e6e6e6;
}

.form-description > *
{
    margin: 0 0 5px;
}
.form-description > *:last-child
{
    margin-bottom: 0;
}
.form-description > dt
{
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
}

.form-agree
{
    line-height: 1;

    padding: 25px 0;
}
.form-agree input[type='checkbox']
{
    display: inline-block;

    margin: 0 10px 0 0;
}

.form-buttons
{
    margin: 0 0 0 -20px;

    *zoom: 1;
}
.form-buttons:before, .form-buttons:after
{
    display: table;

    content: '';
}
.form-buttons:after
{
    clear: both;
}
.form-buttons > li
{
    float: left;

    width: 50%;
    padding: 0 0 0 20px;
}

.form-button[disabled], .l-form-agent .po-button-send-inner [disabled].po-button-send
{
    pointer-events: none;

    opacity: .5;
}

.form-dataUnit
{
    display: inline-block;

    padding: 0 15px 0 10px;
}

.form-notice
{
    font-size: 12px;
    font-size: 1.2rem;

    padding: 5px 0;

    color: #656565;
}

.form-checkList
{
    padding: 0 0 40px 0;
}
.form-checkList > li
{
    margin: 0 0 15px;
}
.form-checkList > li:last-child
{
    margin-bottom: 0;
}

.form-checkList-note
{
    font-size: 14px;
}

.form-occupation
{
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: bold;

    display: inline-block;

    padding: 5px 0 0;
}

.form-back
{
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 60px;

    position: relative;

    display: inline-block;

    padding: 0 0 0 20px;

    color: #fff;
}
.form-back:hover
{
    text-decoration: underline;
}
.form-back:before
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    display: block;

    width: 0;
    height: 0;
    margin: auto;

    content: '';

    border-width: 4px 8px 4px 0;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
}

.form-inputValue
{
    padding: 5px 30px 0 0;

    word-break: break-all;
}

.form-complete
{
    padding: 30px;
}
.form-complete p
{
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.8;
}

.form-complete-inner
{
    position: relative;

    min-height: 180px;
    margin: 0 0 36px;
    padding: 15px 0 0 215px;
}
.form-complete-inner:before
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 180px;
    height: 181px;

    content: '';

    background-image: url(../img/sprite.png);
    background-position: 0 0;
}

.form-complete-mailmagazine
{
    position: relative;

    margin: 0 0 36px;
    padding: 120px 0 0;

    text-align: center;
}
.form-complete-mailmagazine:before
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    display: block;

    width: 219px;
    height: 83px;
    margin: auto;

    content: '';

    background-image: url(../img/sprite.png);
    background-position: -92px 0;
    background-size: 466px 346.5px;
}

.form-complete-text
{
    font-size: 20px;
    font-size: 2rem;
    font-weight: bold;

    display: block;

    margin: 0 0 10px;
}

.l-form-agent
{
    min-height: 300px;

    background-color: #e6e6e6;
    background-image: url(../img/spinner.gif);
    background-repeat: no-repeat;
    background-position: center center;
}
.l-form-agent .po-webparts-container
{
    background: #fff;
}
.l-form-agent table
{
    width: 100%;

    table-layout: fixed;
}
.l-form-agent table th
{
    font-weight: normal;

    padding: 30px 25px 30px 25px;

    text-align: left;
}
.l-form-agent table th .po-required-elem:after
{
    display: inline-block;

    padding: 0 0 0 5px;

    content: '\002605';

    color: #00bba9;
}
.l-form-agent table td
{
    width: auto;
    padding: 30px 25px 30px 20px;
}
.l-form-agent table td .po-checkbox > div
{
    position: relative;

    margin-bottom: 5px;
    padding: 5px;
}
.l-form-agent table td .po-checkbox > div:last-of-type
{
    marin-bottom: 0;
}
.l-form-agent table td .po-checkbox > div > span
{
    font-size: 13px;

    position: relative;
    z-index: 1;

    margin: 0 10px 0 0;

    cursor: pointer;
}
.l-form-agent table td .po-checkbox > div > span:first-of-type
{
    font-weight: bold;

    position: static;
}
.l-form-agent table td .po-checkbox > div > span:first-of-type:before
{
    position: absolute;
    z-index: 0;
    top: 32px;
    right: 0;
    bottom: 0;
    left: 0;

    content: '';
    pointer-events: none;

    background: #f7f7f7;
}
.l-form-agent table td .po-checkbox > div > span:first-of-type:last-of-type:before
{
    display: none;
}
.l-form-agent table td .po-checkbox > div input[type='checkbox']
{
    position: relative;
    z-index: 1;

    display: inline-block;

    margin: 0 5px 0 0;
}
.l-form-agent table td .po-checkbox > div input[type='checkbox']:first-of-type
{
    margin-bottom: 13px;
}
.l-form-agent table td .po-checkbox > div input[type='checkbox']:first-of-type:last-of-type
{
    margin-bottom: 0;
}
.l-form-agent table td .po-checkbox > div br:last-child
{
    display: none;
}
.l-form-agent table td input[type='text']
{
    margin-right: 5px;
    margin-left: 5px;
}
.l-form-agent table td input[type='text']:last-child
{
    margin-right: 0;
}
.l-form-agent table td input[type='text']:first-child
{
    margin-left: 0;
}
.l-form-agent table td [data-alias='Person.P_Street'] textarea
{
    height: 50px;
}
.l-form-agent table td .po-radio-simple > span
{
    font-size: 13px;

    position: relative;
    z-index: 1;

    margin: 0 10px 0 0;

    cursor: pointer;
}
.l-form-agent table td .po-radio-simple input[type='radio']
{
    position: relative;
    z-index: 1;

    display: inline-block;

    margin: 0 5px 0 0;
}
.l-form-agent table td select
{
    width: auto !important;
    min-width: 270px;

    background: #fff;

    -webkit-appearance: menulist !important;
}
.l-form-agent table td .po-remark
{
    font-size: 13px;

    margin-top: 5px;

    text-align: right;
}
.l-form-agent table td .po-validation
{
    font-size: 13px;
    font-weight: bold;

    margin-top: 5px;

    color: red;
}
.l-form-agent table td + th
{
    border-left: 1px solid #e6e6e6;
}
.l-form-agent input[maxlength='2']
{
    width: 30px;
    max-width: 100%;
}
.l-form-agent input[maxlength='3']
{
    width: 45px;
    max-width: 100%;
}
.l-form-agent input[maxlength='4']
{
    width: 60px;
    max-width: 100%;
}
.l-form-agent input[maxlength='5']
{
    width: 75px;
    max-width: 100%;
}
.l-form-agent input[maxlength='6']
{
    width: 90px;
    max-width: 100%;
}
.l-form-agent input[maxlength='7']
{
    width: 105px;
    max-width: 100%;
}
.l-form-agent input[maxlength='8']
{
    width: 120px;
    max-width: 100%;
}
.l-form-agent input[maxlength='9']
{
    width: 135px;
    max-width: 100%;
}
.l-form-agent input[maxlength='10']
{
    width: 150px;
    max-width: 100%;
}
.l-form-agent input[maxlength='11']
{
    width: 165px;
    max-width: 100%;
}
.l-form-agent input[maxlength='12']
{
    width: 180px;
    max-width: 100%;
}
.l-form-agent input[maxlength='13']
{
    width: 195px;
    max-width: 100%;
}
.l-form-agent input[maxlength='14']
{
    width: 210px;
    max-width: 100%;
}
.l-form-agent input[maxlength='15']
{
    width: 225px;
    max-width: 100%;
}
.l-form-agent input[maxlength='16']
{
    width: 240px;
    max-width: 100%;
}
.l-form-agent input[maxlength='17']
{
    width: 255px;
    max-width: 100%;
}
.l-form-agent input[maxlength='18']
{
    width: 270px;
    max-width: 100%;
}
.l-form-agent input[maxlength='19']
{
    width: 285px;
    max-width: 100%;
}
.l-form-agent input[maxlength='20']
{
    width: 300px;
    max-width: 100%;
}
.l-form-agent input[maxlength='21']
{
    width: 315px;
    max-width: 100%;
}
.l-form-agent input[maxlength='22']
{
    width: 330px;
    max-width: 100%;
}
.l-form-agent input[maxlength='23']
{
    width: 345px;
    max-width: 100%;
}
.l-form-agent input[maxlength='24']
{
    width: 360px;
    max-width: 100%;
}
.l-form-agent input[maxlength='25']
{
    width: 375px;
    max-width: 100%;
}
.l-form-agent input[maxlength='26']
{
    width: 390px;
    max-width: 100%;
}
.l-form-agent input[maxlength='27']
{
    width: 405px;
    max-width: 100%;
}
.l-form-agent input[maxlength='28']
{
    width: 420px;
    max-width: 100%;
}
.l-form-agent input[maxlength='29']
{
    width: 435px;
    max-width: 100%;
}
.l-form-agent input[maxlength='30']
{
    width: 450px;
    max-width: 100%;
}
.l-form-agent input[maxlength='31']
{
    width: 465px;
    max-width: 100%;
}
.l-form-agent input[maxlength='32']
{
    width: 480px;
    max-width: 100%;
}
.l-form-agent input[maxlength='33']
{
    width: 495px;
    max-width: 100%;
}
.l-form-agent input[maxlength='34']
{
    width: 510px;
    max-width: 100%;
}
.l-form-agent input[maxlength='35']
{
    width: 525px;
    max-width: 100%;
}
.l-form-agent input[maxlength='36']
{
    width: 540px;
    max-width: 100%;
}
.l-form-agent input[maxlength='37']
{
    width: 555px;
    max-width: 100%;
}
.l-form-agent input[maxlength='38']
{
    width: 570px;
    max-width: 100%;
}
.l-form-agent input[maxlength='39']
{
    width: 585px;
    max-width: 100%;
}
.l-form-agent input[maxlength='40']
{
    width: 600px;
    max-width: 100%;
}
.l-form-agent .po-privacy-wrap
{
    font-size: 14px;

    overflow-y: auto;

    max-height: 200px;
    margin: 30px;
    padding: 20px;

    border: 1px solid #f7f7f7;
}
.l-form-agent .po-button-send-inner
{
    padding: 0 30px 30px 30px;
}
.l-form-agent .po-iframe
{
    min-height: 252px;
    padding: 20px;
}
.l-form-agent .po-iframe iframe
{
    width: 100% !important;

    border: none !important;
}

.l-header
{
    position: fixed;
    z-index: 10;

    width: 100%;
    min-width: 1020px;

    background: #1a1a1a;
}

.header-inner
{
    position: relative;

    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    height: 60px;
    padding: 10px 0;

    -webkit-transition: padding .2s ease-out .05s;
       -moz-transition: padding .2s ease-out .05s;
         -o-transition: padding .2s ease-out .05s;
            transition: padding .2s ease-out .05s;

    *zoom: 1;
}
.header-inner:before, .header-inner:after
{
    display: table;

    content: '';
}
.header-inner:after
{
    clear: both;
}
.is-header-short .header-inner
{
    padding-top: 0;
    padding-bottom: 0;
}

.header-logo
{
    position: absolute;
    z-index: 0;
    top: 3px;
    right: 0;
    left: 0;

    width: 232px;
    height: 72px;
    margin: auto;

    -webkit-transition: all .2s ease-out;
       -moz-transition: all .2s ease-out;
         -o-transition: all .2s ease-out;
            transition: all .2s ease-out;
}
.is-header-short .header-logo
{
    top: -6px;

    -webkit-transform: scale(.9);
       -moz-transform: scale(.9);
        -ms-transform: scale(.9);
            transform: scale(.9);
}

.header-favorite
{
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 80px;

    position: relative;
    z-index: 1;

    display: block;
    float: left;
    overflow: hidden;

    width: 145px;
    height: 80px;
    margin: -10px 0;
    padding: 0 24px;

    -webkit-transition: background-color .2s ease-out, width .2s ease-out, height .2s .05s, line-height .2s .05s, margin .2s .05s;
       -moz-transition: background-color .2s ease-out, width .2s ease-out, height .2s .05s, line-height .2s .05s, margin .2s .05s;
         -o-transition: background-color .2s ease-out, width .2s ease-out, height .2s .05s, line-height .2s .05s, margin .2s .05s;
            transition: background-color .2s ease-out, width .2s ease-out, height .2s .05s, line-height .2s .05s, margin .2s .05s;

    color: #fff;
    border-right: 1px solid #4d4d4d;
    border-left: 1px solid #4d4d4d;
    background: #1a1a1a;
}
.header-favorite:hover
{
    color: #1a1a1a;
    background: #00e6cd;
}
.is-header-short .header-favorite
{
    line-height: 60px;

    width: 67px;
    height: 60px;
    margin-top: 0;
    margin-bottom: 0;
}

.header-navigation
{
    font-size: 14px;
    font-size: 1.4rem;

    position: relative;

    float: left;

    width: 370px;
    height: 100%;

    -webkit-transition: width .2s ease-out;
       -moz-transition: width .2s ease-out;
         -o-transition: width .2s ease-out;
            transition: width .2s ease-out;
}
.header-navigation a
{
    color: #fff;
}
.is-header-short .header-navigation
{
    width: 220px;
}

.header-navigation-item--1, .header-navigation-item--2, .header-navigation-item--3, .header-navigation-item--4
{
    position: absolute;

    overflow: hidden;

    -webkit-transition: width .2s ease-out .1s, top .2s ease-out, left .2s ease-out;
       -moz-transition: width .2s ease-out .1s, top .2s ease-out, left .2s ease-out;
         -o-transition: width .2s ease-out .1s, top .2s ease-out, left .2s ease-out;
            transition: width .2s ease-out .1s, top .2s ease-out, left .2s ease-out;
    white-space: nowrap;
}
.is-header-short .header-navigation-item--1, .is-header-short .header-navigation-item--2, .is-header-short .header-navigation-item--3, .is-header-short .header-navigation-item--4
{
    top: 20px;

    width: 20px;
}
.header-navigation-item--1 a, .header-navigation-item--2 a, .header-navigation-item--3 a, .header-navigation-item--4 a
{
    -webkit-transition: color .2s ease-out;
       -moz-transition: color .2s ease-out;
         -o-transition: color .2s ease-out;
            transition: color .2s ease-out;
}
.header-navigation-item--1 a:hover, .header-navigation-item--2 a:hover, .header-navigation-item--3 a:hover, .header-navigation-item--4 a:hover
{
    color: #00e6cd;
}

.header-navigation-item--1
{
    top: 3px;
    left: 18px;
}
.is-header-short .header-navigation-item--1
{
    left: 24px;
}

.header-navigation-item--2
{
    top: 3px;
    left: 190px;
}
.is-header-short .header-navigation-item--2
{
    left: 67px;
}

.header-navigation-item--3
{
    bottom: 3px;
    left: 18px;
}
.is-header-short .header-navigation-item--3
{
    left: 115px;
}

.header-navigation-item--4
{
    bottom: 3px;
    left: 190px;
}
.is-header-short .header-navigation-item--4
{
    left: 165px;
}

.header-submenu
{
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;

    height: 41px;
    margin: auto;
}
.header-submenu ul
{
    *zoom: 1;
}
.header-submenu ul:before, .header-submenu ul:after
{
    display: table;

    content: '';
}
.header-submenu ul:after
{
    clear: both;
}
.header-submenu li
{
    float: left;

    border-right: 2px solid #fff;
}
.header-submenu li:last-child
{
    border-right: none;
}
.header-submenu a
{
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-size: 1.3rem;

    display: block;

    height: 41px;
    padding: 8px 12px 0;

    -webkit-transition: all .2s ease-out;
       -moz-transition: all .2s ease-out;
         -o-transition: all .2s ease-out;
            transition: all .2s ease-out;

    color: #fff;
    border: 2px solid #fff;
}
.header-submenu a:hover
{
    color: #00e6cd;
    border-color: #00e6cd;
}

.l-listButtons
{
    padding: 20px 15px 10px;
}

.listButtons-button
{
    padding: 0 0 10px;
}

.l-main
{
    position: relative;

    padding: 80px 0 0;
}
.l-main:before
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 80px;

    content: '';

    background: #1a1a1a;
}

.l-offer
{
    padding: 20px 25px;

    background: #f2f2f2;
}
.l-offer > h1
{
    margin: 0 0 20px;
}

.offer-checked
{
    font-size: 18px;
    font-size: 1.8rem;
}
.offer-checked ul
{
    padding: 0 0 25px;
}
.offer-checked li
{
    display: inline-block;

    padding: 0 20px 0 0;
}

.offer-list > li
{
    margin: 0 0 20px;
}
.offer-list > li:last-child
{
    margin-bottom: 0;
}

.l-panel > ul
{
    *zoom: 1;
}
.l-panel > ul:before, .l-panel > ul:after
{
    display: table;

    content: '';
}
.l-panel > ul:after
{
    clear: both;
}
.l-panel li
{
    float: left;

    width: 25%;
    margin: 0 0 20px;
    padding: 0 10px;
}

.l-panel--column3 > ul
{
    margin: 0 0 0 -30px;

    *zoom: 1;
}
.l-panel--column3 > ul:before, .l-panel--column3 > ul:after
{
    display: table;

    content: '';
}
.l-panel--column3 > ul:after
{
    clear: both;
}
.l-panel--column3 > ul + ul
{
    margin-top: 30px;
}
.l-panel--column3 li
{
    float: left;

    width: 33.33333%;
    padding: 0 0 0 30px;
}
.l-panel--column3 a
{
    display: block;

    color: inherit;
}

.l-sitemap
{
    background: #fff;
}

.sitemap-list, .sitemap-companyList
{
    padding: 0 0 30px;
}
.sitemap-list > li, .sitemap-companyList > li
{
    padding: 10px 40px;

    border-bottom: 1px solid #e6e6e6;
}
.sitemap-list > li:last-child, .sitemap-companyList > li:last-child
{
    border-bottom: none;
}
.sitemap-list a, .sitemap-companyList a
{
    color: inherit;
}

.sitemap-companyList
{
    padding-top: 20px;
}
.sitemap-companyList > li
{
    *zoom: 1;
}
.sitemap-companyList > li:before, .sitemap-companyList > li:after
{
    display: table;

    content: '';
}
.sitemap-companyList > li:after
{
    clear: both;
}

.sitemap-companyColumn
{
    float: left;

    width: 50%;
}

.subSection-inner
{
    padding: 20px;
}
.subSection-inner ul
{
    margin: -20px 0 0;
}
.subSection-inner li
{
    padding: 20px 0;

    border-bottom: 1px solid #ccc;
}

.subSection-balloon
{
    position: relative;

    display: block;

    margin: 0 0 25px;
    padding: 15px 20px;

    -webkit-transition: background-color .2s ease-out;
       -moz-transition: background-color .2s ease-out;
         -o-transition: background-color .2s ease-out;
            transition: background-color .2s ease-out;
    text-align: center;

    color: #fff;
    background: #00bba9;
}
.subSection-balloon:before
{
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;

    display: block;

    width: 0;
    height: 0;
    margin: auto;

    content: '';
    -webkit-transition: border-color .2s ease-out;
       -moz-transition: border-color .2s ease-out;
         -o-transition: border-color .2s ease-out;
            transition: border-color .2s ease-out;

    border-width: 18px 10px 0 10px;
    border-style: solid;
    border-color: #00bba9 transparent transparent transparent;
}
a:hover .subSection-balloon
{
    background: #00d9c2;
}
a:hover .subSection-balloon:before
{
    border-color: #00d9c2 transparent transparent transparent;
}

.subSection-recruitment p
{
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.71429;
}
.subSection-recruitment a
{
    color: inherit;
}

.subSection-button
{
    padding: 20px 0 0;
}

.l-topArticles
{
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}

.topArticles-inner
{
    position: relative;

    min-width: 1020px;
    max-width: 1800px;
    height: 610px;
    margin: auto;
    padding: 0 10px 0 0;

    -webkit-transition: opacity 1s ease-out;
       -moz-transition: opacity 1s ease-out;
         -o-transition: opacity 1s ease-out;
            transition: opacity 1s ease-out;
    pointer-events: none;

    background: #f2f2f2;

    *zoom: 1;
}
.topArticles-inner:before, .topArticles-inner:after
{
    display: table;

    content: '';
}
.topArticles-inner:after
{
    clear: both;
}
.topArticles-inner:before
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    content: '';
    -webkit-transition: opacity 1s ease-out 1s;
       -moz-transition: opacity 1s ease-out 1s;
         -o-transition: opacity 1s ease-out 1s;
            transition: opacity 1s ease-out 1s;

    background: url('../img/top_text.png?1496732574') 50% 50% no-repeat;
}
.topArticles-inner.is-topArticlesInner-visible
{
    pointer-events: auto;
}
.topArticles-inner.is-topArticlesInner-visible:before
{
    opacity: 0;
}

.topArticles-left
{
    float: left;

    width: 50%;
}

.topArticles-right
{
    position: relative;

    float: left;
    overflow: hidden;

    width: 50%;
    height: 608px;
    padding: 0 15px 0 0;
}

.topArticles-list
{
    *zoom: 1;
}
.topArticles-list:before, .topArticles-list:after
{
    display: table;

    content: '';
}
.topArticles-list:after
{
    clear: both;
}
.topArticles-list > li
{
    float: left;

    width: 50%;
    padding: 0 0 4px 4px;
}
.topArticles-list a
{
    display: block;
}

.l-wysiwyg h1
{
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.66667;

    position: relative;

    margin: 0 0 30px;
    padding: 20px 0 0;
}
.l-wysiwyg h1:before
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 35px;
    height: 6px;

    content: '';

    background: #00cab6;
}
.l-wysiwyg p
{
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2;

    margin: 0 0 30px;
}
.l-wysiwyg img
{
    display: block;

    max-width: 100%;
    height: auto;
    margin: 0 0 30px;

    text-align: center;
}
.l-wysiwyg .is_bold
{
    font-weight: bold;
}
.l-wysiwyg .wp-caption
{
    max-width: 100%;
    margin: 0 0 30px;
}
.l-wysiwyg .wp-caption img
{
    margin-bottom: 0;
}
.l-wysiwyg .wp-caption-text
{
    font-size: 12px;
    font-size: 1.2rem;

    padding: 5px 12px;

    background: #e6e6e6;
}
.l-wysiwyg .cinra_comment
{
    margin: 30px 0;
    padding: 10px 16px;

    border: #eaeaea solid 10px;
}

.l-wysiwyg a,
.wysiwyg a
{
    -webkit-transition: color .2s ease-out;
       -moz-transition: color .2s ease-out;
         -o-transition: color .2s ease-out;
            transition: color .2s ease-out;

    color: #00bba9;
}
.l-wysiwyg a:hover,
.wysiwyg a:hover
{
    color: #00e6cd;
}

.wysiwyg strong
{
    display: inline-block;

    margin-bottom: 0;
}
.wysiwyg .is_bold
{
    font-weight: bold;
}