@charset "UTF-8";
/* ===================================================================
	Theme Name:		_theme
	Description:
	Theme URL:		
	Author:			k.k
	Author URI:		
	Version: 		2.0.0
	Update:			18.06.05
=================================================================== */
/**
*
* 1.	  Foundation
* 2.	  Layout
* 3.	  Object
* 3-1.	Component
* 3-2.	Project
* 3-3.	Utility
* 4.	  Pages
* 5.	  default
*/
.c-media__footerImg img,
.c-navi__contactList img,
.p-logo__header img,
.p-logo__footer img,
.index__leadList img,
.index__exampleList img,
.index__faqArrow img,
.index__historyImage img,
.index__serviceImage img,
.index__aboutMediwelLogo img {
  height: auto;
  width: 100%;
}

@media screen and (min-width: 600px) {
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  @-webkit-keyframes moveZoom {
    from {
      opacity: 0;
      -webkit-transform: translate(0, 0) scale(.5);
      transform: translate(0, 0) scale(.5);
      -webkit-transition: all 1s;
      transition: all 1s;
    }
    to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 1s;
      transition: all 1s;
    }
  }
  @keyframes moveZoom {
    from {
      opacity: 0;
      -webkit-transform: translate(0, 0) scale(.5);
      transform: translate(0, 0) scale(.5);
      -webkit-transition: all 1s;
      transition: all 1s;
    }
    to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition: all 1s;
      transition: all 1s;
    }
  }
  .moveZoom {
    -webkit-animation-name: moveZoom;
    animation-name: moveZoom;
  }
  @-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translateY(70px);
      transform: translateY(70px);
    }
    to {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translateY(70px);
      transform: translateY(70px);
    }
    to {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }
  @-webkit-keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translateX(100px);
      transform: translateX(100px);
    }
    to {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translateX(100px);
      transform: translateX(100px);
    }
    to {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
  }
  @-webkit-keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translateX(-100px);
      transform: translateX(-100px);
    }
    to {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  @keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translateX(-100px);
      transform: translateX(-100px);
    }
    to {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  .fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
  }
}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  /* 1 */
  text-decoration: underline;
  /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: .35em .75em .625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

/* 
 * Mixin for placeholder Color
 * @include placeholderColor(#00ff00);
 */
/* Mixin for placeholder Style
@include placeholder {
    // ここに書く...
    color: #00ff00;
    font-size: 20px;
    line-height: 1;
}
 */
html {
  background-size: contain;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
  letter-spacing: .07em;
  width: 100%;
}

html.wf-active {
  visibility: visible;
}

@media screen and (min-width: 600px) {
  html {
    font-size: 85%;
  }
}

@media screen and (min-width: 960px) {
  html {
    font-size: 87.5%;
  }
}

@media screen and (min-width: 1280px) {
  html {
    font-size: 100%;
  }
}

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

body {
  background: #fff;
  background-size: cover;
  font-family: "Noto Sans Japanese", sans-serif;
  /* アンチエイリアスを指定する */
  -webkit-font-smoothing: subpixel-antialiased;
  /* メトリクスカーニングを指定する */
  margin: 0;
  -moz-osx-font-smoothing: auto;
  overflow-x: hidden;
  text-align: center;
}

a {
  text-decoration: none;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: underline;
}

a:focus {
  text-decoration: none;
}

svg.none {
  display: none;
}

.container {
  width: 100%;
}

@font-face {
  font-family: "Noto Sans Japanese";
  font-style: normal;
  font-weight: 400;
  src: local("NotoSansJP-Regular.otf"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format("opentype");
}

@font-face {
  font-family: "Gidolinya-Regular";
  font-style: normal;
  font-weight: 400;
  src: local("Gidolinya-Regular.otf"), url("/fonts/lp/hpstaff/Gidolinya-Regular.otf") format("opentype"), url("/fonts/lp/hpstaff/Gidole-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "DIN-Mittelschrift";
  font-style: normal;
  font-weight: normal;
  src: local("DIN_Mittelschrift.ttf"), url("/fonts/lp/hpstaff/DIN_Mittelschrift.ttf") format("truetype");
}

.din-mittelschrift {
  font-family: "DIN-Mittelschrift", sans-serif;
}

.gidole {
  font-family: "Gidolinya-Regular", sans-serif;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
}

button:focus {
  outline: none;
}

select {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

h1{
  line-height: 3;
}

h2,
h3,
h4,
h5,
h6 {
  color: inherit;
  line-height: 1.4;
}

ul,
ol {
  padding-left: 1em;
}

li > ul,
li > ol {
  margin-bottom: 0;
}

dd {
  margin-left: 0;
}

table {
  width: 100%;
}

th {
  text-align: left;
}

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

[src$=".svg"],
[data$=".svg"] {
  width: 100%;
}

i,
cite,
em,
address,
dfn {
  font-style: normal;
}

code,
pre {
  font-family: Consolas, Menlo, Courier, monospace;
}

code {
  background-color: rgba(0, 0, 0, .06);
  padding: .2em;
}

pre code {
  background-color: inherit;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
blockquote,
p,
address,
hr,
table,
fieldset,
figure,
pre {
  margin-bottom: 0;
  margin-top: 0;
}

.minimap {
  display: none !important;
  z-index: -1 !important;
}

.miniregion {
  display: none !important;
  z-index: -1 !important;
}

@media screen and (min-width: 600px) {
  .minimap {
    border: 30px solid #666 !important;
    display: block !important;
    z-index: 10000 !important;
  }
  .miniregion {
    display: block !important;
    right: 3.61% !important;
    z-index: 10001 !important;
  }
}

/* #Header
   -------------------------------------------------------------------------- */
/*doc
---
title: header
name: header
categories: [layout]
---
`<body>`タグ直下にある`<header>`タグのスタイルです。
ロゴやグローバルナビゲーションのレイアウトを含むことはできますが、
コンポーネント自体はobject/projectレイヤーで定義します。
```block
<body>
  <header class="l-header">
    <div class="l-header__logo">
      <h1 class="p-logo">logo</h1>
    </div>
    <nav class="l-header__global-nav">
      <ul class="p-global-nav">
        <li></li>
        <li></li>
      <ul>
    </nav>
  </header>
</body>
```
*/
.l-header {
  background: #00664b;
  color: #fff;
  padding: 0;
}

.l-header__left {
  margin: 0;
  padding: 0;
  width: 100%;
}

.l-header__right {
  display: none;
  float: right;
}

.l-header__phrase {
  float: right;
  padding: .5rem 0;
}

@media screen and (min-width: 960px) {
  .l-header__left {
    float: left;
    width: 700px;
  }
  .l-header__right {
    display: block;
    text-align: right;
  }
  .l-header__right a {
    color: #fff;
    font-size: 2.4rem;
    position: relative;
    top: 0;
  }
  .l-header__phrase {
    float: left;
    padding: 13px 0 0 20px;
  }
}

/* #Footer
   -------------------------------------------------------------------------- */
/*doc
---
title: footer
name: footer
categories: [layout]
---
`<body>`タグ直下にある`<footer>`タグのスタイルです。
コピーライトやナビゲーションのレイアウトを含むことはできますが、
コンポーネント自体はobject/projectレイヤーで定義します。
```block
<body>
  <footer class="l-footer">
    <div class="l-footer__copyright">
      <small class="p-copyright"></small>
    </div>
    <nav class="l-footer__sub-nav">
      <ul class="p-foot-nav">
        <li></li>
        <li></li>
      <ul>
    </nav>
  </footer>
</body>
```
*/
.l-footer {
  background: #00664b;
  color: #fff;
  font-size: 1rem;
  padding: 20px 0 65px;
  position: relative;
  width: 100%;
}

.l-footer::after {
  clear: both;
  content: "";
  display: table;
}

.l-footer a {
  color: #fff;
}

.l-footer__left {
  float: left;
  width: 100%;
}

.l-footer__right {
  float: right;
  width: 100%;
}

.l-footer__companyTitle {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.l-footer__companyDetailBody::after {
  clear: both;
  content: "";
  display: table;
}

.l-footer__companyDetailBodyLeft {
  float: left;
  list-style: none;
  margin-right: 2%;
  padding: 0;
  width: 70%;
}

.l-footer__companyDetailBodyRight {
  background: #fff;
  float: left;
  margin: 0;
  padding: 1px;
  width: 60px;
}

.l-footer__companyDetailBodyRight img {
  width: 100%;
}

.l-footer__recruitingPersonnel {
  margin-top: 10px;
}

.l-footer__recruitingPersonnel a {
  text-decoration: underline;
}

.l-footer__recruitingPersonnel a:hover {
  text-decoration: none;
}

.l-footer__copyright {
  color: #fff;
  display: block;
  margin-top: 20px;
  text-align: center;
}

@media screen and (min-width: 600px) {
  .l-footer {
    padding: 30px 0 20px;
  }
  .l-footer__left {
    float: left;
    margin: 0;
    width: 25%;
  }
  .l-footer__right {
    float: right;
    width: 70%;
  }
  .l-footer__copyright {
    text-align: left;
  }
}

@media screen and (min-width: 960px) {
  .l-footer {
    font-size: 14px;
  }
  .l-footer__companyTitle {
    font-size: 18px;
  }
}

/* #Main
   -------------------------------------------------------------------------- */
/*doc
---
title: main
name: main
categories: [layout]
---
`<main>`タグのスタイルです。ドキュメントのメインコンテンツを示し、ドキュメント内で1つしか記述できません。
<article>タグや<nav>タグなどの中に入れることはできません。
取り扱いの難しいタグなので、使わないという選択をするのもいいでしょう。
```block
<body>
  <main id="l-main">
  </main>
</body>
```
*/
@media screen and (min-width: 960px) {
  .l-main {
    margin: 0 auto;
    width: 960px;
  }
  .l-main::after {
    clear: both;
    content: "";
    display: table;
  }
}

/* #Sidebar
   -------------------------------------------------------------------------- */
/*doc
---
title: side
name: side
categories: [layout]
---
`<aside>`タグが使われるようなサイドバーのスタイルです。
ナビゲーションやバナーなどのレイアウトを含むことはできますが、
コンポーネント自体はobject/projectレイヤーで定義します。
<body>
  <article class="l-content"></article>
  <aside class="l-side">
    <div class="l-side__item">
       <ul class="p-side-nav"></ul>
    </div>
    <div class="l-side__item">
       <div class="p-banner"></div>
    </div>
  </aside>
</body>
```
*/
/* #Section
   -------------------------------------------------------------------------- */
/*doc
---
title: section
name: section
categories: [layout]
---
`<section>`タグを使うようなセクションの余白（`margin`）を管理します。
コンポーネント単位での余白はobject/utility/_margin.scssで管理をします。
サイズはデフォルトで3つ、最大で5つとします。
1. tiny(optional)
2. small
3. medium(default)
4. large
5. huge(optional)
Modifierなしをmedium、変更する場合にはModifierを指定します。
```block
<div class="l-section">
  <h2>見出し2</h2>
</div>
<div class="l-section l-section--small">
  <h2>見出し2</h2>
</div>
<div class="l-section l-section--large">
  <h2>見出し2</h2>
</div>
```
*/
/* #Content
   -------------------------------------------------------------------------- */
/*doc
---
title: content
name: content
categories: [layout]
---
`<article>`タグが使われるようなメインコンテンツのスタイルです。
ナビゲーションやバナーなどのレイアウトを含むことはできますが、
コンポーネント自体はobject/projectレイヤーで定義します。
```block
<body>
  <article class="l-content s-blog">
    <header class="l-content__lead"></header>
  </article>
</body>
```
*/
.l-content {
  margin: 0 auto;
  width: 90%;
}

.l-content::after {
  clear: both;
  content: "";
  display: table;
}

.l-content__mv {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 70%, white 99%, white 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(70%, white), color-stop(99%, white), to(white));
  margin: 0 auto;
  position: relative;
  width: 100%;
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.l-content__mv::after {
  clear: both;
  content: "";
  display: table;
}

@media screen and (min-width: 600px) {
  .l-content__mv {
    background: none;
  }
}

@media screen and (min-width: 960px) {
  .l-content__header {
    width: 98%;
  }
  .l-content__footer {
    width: 850px;
  }
  .l-content__mv {
    max-width: 1400px;
  }
}

/* #Box
   -------------------------------------------------------------------------- */
/*doc
---
title: Box
name: Box
categories: [Component]

*/
/* #Button
   -------------------------------------------------------------------------- */
/*doc
---
title: Button
name: Button
categories: [Component]

*/
.c-button__entry {
  display: none;
}

.c-button__recruitingPersonnel {
  background: #318262;
  border-bottom: 2px solid #032548;
  border-radius: 3px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 2px 0 rgba(191, 222, 128, .2), 0 2px 2px rgba(0, 0, 0, .19);
  box-shadow: inset 0 2px 0 rgba(191, 222, 128, .2), 0 2px 2px rgba(0, 0, 0, .19);
  color: #fff;
  display: block;
  font-size: .8rem;
  margin: 0 auto 10px;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  width: 90%;
}

.c-button__recruitingPersonnel:hover {
  background: #1f533e;
}

.c-button__recruitingPersonnel:active {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .3);
  box-shadow: 0 0 2px rgba(0, 0, 0, .3);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

.c-button__recruitingPersonnel a {
  display: block;
  padding: 5px;
}

.c-button__recruitingPersonnel span {
  text-decoration: underline;
  -webkit-text-decoration-color: #fff;
  text-decoration-color: #fff;
}

.c-button__recruitingPersonnelSp {
  display: block;
}

.c-button__recruitingPersonnelPc {
  display: none;
}

/* .c-button__pageup {
  bottom: 6rem;
  position: fixed;
  right: -2rem;
  z-index: 1;
}

.c-button__pageup img {
  width: 40%;
}

.c-button__pageup a:hover {
  opacity: .8;
}

.c-button__pageup--stop {
  right: 0;
}

.c-button__pageup--keep {
  right: 0;
} */

@media screen and (min-width: 600px) {
  .c-button__entry {
    display: block;
    margin: 0 auto;
    width: 539px;
  }
  .c-button__recruitingPersonnel {
    font-size: 12px;
    margin: 0 0 10px;
    width: 60%;
  }
  .c-button__recruitingPersonnel a {
    padding: 10px;
  }
  .c-button__recruitingPersonnelSp {
    display: none;
  }
  .c-button__recruitingPersonnelPc {
    display: block;
  }
  .c-button__pageup {
    bottom: 4rem;
    right: 2.5rem;
  }
  .c-button__pageup img {
    width: 60%;
  }
  .c-button__pageup--stop {
    bottom: 4.5rem;
  }
  .c-button__pageup--keep {
    bottom: 4.5rem;
  }
  /* Base Button Style */
  .btn {
    background-color: #ffc000;
    border: 1px solid #c1c1c1;
    border-radius: 6px;
    color: #000;
    display: block;
    margin: 20px auto;
    padding: 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transform-style: flat;
    transform-style: flat;
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
    width: 539px;
  }
  .btn:before,
  .btn:after {
    content: "";
    position: absolute;
    -webkit-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
  }
  /* Paper effect – slightly raised off background */
  .paper {
    border-color: #dedede;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(128, 128, 128, .1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(128, 128, 128, .1) inset;
  }
  /* Raised effect – pushes up on hover */
  .paper-raise:before {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }
  .paper-raise:hover {
    border: 1px solid #c1c1c1;
  }
  .paper-raise:hover:before {
    -webkit-box-shadow: 0 15px 10px -10px rgba(31, 31, 31, .5);
    box-shadow: 0 15px 10px -10px rgba(31, 31, 31, .5);
  }
  .paper-raise-flatten {
    border-color: #c1c1c1;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .paper-raise-flatten:before {
    border-radius: 6px;
    -webkit-box-shadow: 3px 3px 0 0 #c1c1c1;
    box-shadow: 3px 3px 0 0 #c1c1c1;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }
  .paper-raise-flatten:hover {
    background: #ff8400;
    border-color: #dedede;
  }
  .paper-raise-flatten:hover:before {
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(193, 193, 193, .1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(193, 193, 193, .1) inset;
  }
}

/* #Dialog
   -------------------------------------------------------------------------- */
/*doc
---
title: Dialog
name: Dialog
categories: [Component]

*/
/* #Grid
   -------------------------------------------------------------------------- */
/*doc
---
title: Grid
name: Grid
categories: [Component]

*/
/* #Icon
   -------------------------------------------------------------------------- */
/*doc
---
title: Icon
name: Icon
categories: [Component]

*/
.c-icon__freeDial {
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
  top: -6px;
}

/* #List
   -------------------------------------------------------------------------- */
/*doc
---
title: List
name: List
categories: [Component]

*/
.c-list__symbol--caution li::before {
  content: "※";
}

.c-list__symbol--square li::before {
  background: #333;
  content: "";
  display: inline-block;
  height: .75em;
  margin: 0 .5rem 0 0;
  width: .75em;
}

.c-listNavi__side {
  padding: 0 0 2rem;
}

.c-listNum__root {
  counter-reset: numRoot;
  line-height: 1.6;
  margin: 0 auto;
  padding: 0;
}

.c-listNum__root > li {
  display: block;
  padding-bottom: 1em;
  position: relative;
}

.c-listNum__root > li[data-chapter] {
  margin-top: 2em;
}

.c-listNum__root > li::before {
  content: "第" counter(numRoot) "条";
  counter-increment: numRoot;
  font-weight: 700;
}

.c-listNum__root > li::after {
  content: attr(data-chapter);
  font-weight: 500;
  position: absolute;
  top: -1.5em;
}

.c-listNum__root > li em {
  font-weight: 700;
  margin: 0 .5em;
}

.c-listNum__root > li em::before {
  content: "(";
}

.c-listNum__root > li em::after {
  content: ")";
}

.c-listNum__root p {
  margin: 0;
  padding: 0;
}

.c-listNum__under {
  counter-reset: numUnder01;
  padding: 0;
}

.c-listNum__under > li {
  display: block;
}

.c-listNum__under > li::before {
  content: counter(numUnder01) ")";
  counter-increment: numUnder01;
  margin-right: .5em;
}

/* #Media
   -------------------------------------------------------------------------- */
/*doc
---
title: Media
name: Media
categories: [Component]

*/
.c-media__headerLogo--sp {
  display: block;
}

.c-media__headerLogo--pc {
  display: none;
}

.c-media__footerImg {
  display: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

@media screen and (min-width: 600px) {
  .c-media__headerLogo--sp {
    display: none;
  }
  .c-media__headerLogo--pc {
    display: block;
  }
  .c-media__footerImg {
    display: block;
    margin: 15px auto;
    width: 70%;
  }
}

/* #Print
   -------------------------------------------------------------------------- */
/*doc
---
title: Print
name: Print
categories: [Component]

*/
/* #Decoration
   -------------------------------------------------------------------------- */
/*doc
---
title: Decoration
name: Decoration
categories: [Component]

*/
.c-drt__parentheses::before {
  content: "(";
}

.c-drt__parentheses::after {
  content: ")";
}

.c-drt__colon--after::after {
  content: ":";
}

.c-drt__asterisk::before {
  content: "※";
}

/* #Navigation
   -------------------------------------------------------------------------- */
/*doc
---
title: Navi
name: Navi
categories: [Component]

*/
.c-navi__link {
  list-style: none;
  margin-top: 10px;
  padding: 0;
}

.c-navi__link::after {
  clear: both;
  content: "";
  display: table;
}

.c-navi__linkList {
  float: left;
  margin-right: 20px;
  position: relative;
}

.c-navi__linkList::after {
  background: #fff;
  bottom: 3px;
  content: "";
  height: 11px;
  position: absolute;
  right: -10px;
  top: 3px;
  width: 1px;
}

.c-navi__linkList a {
  text-decoration: underline;
}

.c-navi__linkList a:hover {
  text-decoration: none;
}

.c-navi__linkList a:active {
  text-decoration: none;
}

.c-navi__linkList:last-child {
  margin-right: 0;
}

.c-navi__linkList:last-child::after {
  background: none;
}

.c-navi__contact {
  background: #ededed;
  bottom: 0;
  display: block;
  list-style: none;
  padding: 3px 1%;
  position: fixed;
  width: 100%;
  z-index: 2;
}

.c-navi__contactList {
  border-radius: 6px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  padding: 2.5% 1%;
  width: 49.505%;
}

.c-navi__contactList:nth-child(1) {
  background: linear-gradient(to bottom, #32c2f7 0%, #2395ec 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#32c2f7), to(#2395ec));
  float: left;
}

.c-navi__contactList:nth-child(2) {
  background: linear-gradient(to bottom, #ffc000 0%, #e7a700 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#ffc000), to(#e7a700));
  float: right;
  text-shadow: 2px 2px 1px #000,-2px 2px 1px #000,2px -2px 1px #000,-2px -2px 1px #000;
  text-shadow: 2px 2px 0 #000,-2px 2px 0 #000,2px -2px 0 #000,-2px -2px 0 #000;
}

@media screen and (min-width: 600px) {
  .c-navi__contact {
    display: none;
  }
}

@media screen and (min-width: 960px) {
  .c-navi__linkList::after {
    height: 16px;
  }
}

/* #BreadCrumb
   -------------------------------------------------------------------------- */
/*doc
---
title: BreadCrumb
name: BreadCrumb
categories: [Project]

*/
.p-breadcrumb {
  border: 1px solid #000;
  margin: 0 auto;
  max-width: 1200px;
}

.p-breadcrumb ul {
  list-style: none;
  width: 100%;
}

.p-breadcrumb ul::after {
  clear: both;
  content: "";
  display: table;
}

.p-breadcrumb ul li {
  float: left;
}

@media screen and (min-width: 960px) {
  .p-breadcrumb {
    display: none;
  }
}

/* #Articles
   -------------------------------------------------------------------------- */
/*doc
---
title: Articles
name: Articles
categories: [Project]

*/
@media screen and (min-width: 960px) {
  .p-articles {
    display: none;
  }
}

/* #Gallery
   -------------------------------------------------------------------------- */
/*doc
---
title: Gallery
name: Gallery
categories: [Project]
---

<body>

</body>
```
*/
/* #Slide
   -------------------------------------------------------------------------- */
/*doc
---
title: Slide
name: Slide
categories: [Project]
---

<body>

</body>
```
*/
/* #Form
   -------------------------------------------------------------------------- */
/*doc
---
title: Form
name: Form
categories: [Project]
---

<body>

</body>
```
*/
/* #News
   -------------------------------------------------------------------------- */
/*doc
---
title: News
name: News
categories: [Project]
---

<body>

</body>
```
*/
/* #Logo
   -------------------------------------------------------------------------- */
/*doc
---
title: Logo
name: Logo
categories: [Project]
---

<body>

</body>
```
*/
.p-logo__header {
  float: left;
  margin: 4px 0;
  padding: 0;
  width: 45%;
}

.p-logo__footer {
  height: 2rem;
  margin: 0 0 2rem;
  padding: 0;
  width: 200px;
}

@media screen and (min-width: 600px) {
  .p-logo__header img {
    width: auto;
  }
  .p-logo__footer {
    width: 100%;
  }
}

@media screen and (min-width: 960px) {
  .p-logo__header {
    height: auto;
    margin: 10px 0;
    width: 18rem;
  }
  .p-logo__footer {
    margin: 0 0 20px;
    width: auto;
  }
}

/* #Slide
   -------------------------------------------------------------------------- */
/*doc
---
title: Slide
name: Slide
categories: [Project]
---

<body>

</body>
```
*/
.p-heading {
  font-weight: normal;
}

.p-heading__example {
  font-size: 2rem;
  margin: 3px 0;
}

.p-heading__history {
  color: #33B69D;
  font-size: 20px;
  line-height: 28px;
  padding: 15px 0 10px;
}

.p-heading__history em {
  font-size: 3rem;
  letter-spacing: 0;
  position: relative;
  top: 3px;
}

.p-heading__history span {
  font-size: 30px;
  position: relative;
}

.p-heading__historyTextTitle {
  color: #33B69D;
  text-indent: 5px;
}

.p-heading__serviceTitle {
  color: #33B69D;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 30px 0;
}

.p-heading__serviceTitle em {
  font-size: 3rem;
  letter-spacing: -2px;
  position: relative;
  top: 4px;
}

.p-heading__serviceTitle--sizeM {
  font-size: 2.2rem;
}

.p-heading__serviceTitle--sizeL {
  font-size: 2.4rem;
}

.p-heading__serviceSubTitle {
  font-size: 1.25rem;
  font-weight: normal;
  margin: 10px;
  text-indent: -11px;
  width: 100%;
}

.p-heading__serviceSubTitle span {
  font-size: 1.6rem;
}

.p-heading__serviceSubTitle {
  color: #00529d;
  display: inline-block;
}

.p-heading__serviceSubTitle br {
  line-height: 0;
}

.p-heading__serviceSubTitle small {
  display: block;
  font-size: 1rem;
  text-indent: 0;
}

@media screen and (min-width: 960px) {
  .p-heading__example {
    font-size: 40px;
    margin-top: 100px;
  }
  .p-heading__history {
    font-size: 4rem;
    line-height: 120%;
    margin-bottom: 40px;
  }
  .p-heading__history em {
    font-size: 6rem;
    letter-spacing: -8px;
  }
  .p-heading__history span {
    font-size: 3rem;
    position: relative;
    top: -13px;
  }
  .p-heading__serviceTitle {
    font-size: 30px;
    line-height: 55px;
    padding: 50px 0;
  }
  .p-heading__serviceTitle em {
    font-size: 7rem;
    letter-spacing: -8px;
    position: relative;
    top: 10px;
  }
  .p-heading__serviceTitle--sizeM {
    font-size: 4rem;
  }
  .p-heading__serviceTitle--sizeL {
    font-size: 4.2rem;
    letter-spacing: -2px;
  }
  .p-heading__serviceSubTitle {
    display: inline-block;
    font-size: 2.4rem;
    margin-bottom: 20px;
    text-indent: -33px;
    width: auto;
  }
  .p-heading__serviceSubTitle span {
    font-size: 3.2rem;
  }
  .p-heading__serviceSubTitle small {
    font-size: 1.2rem;
    text-indent: 1px;
  }
}

/* #Mv
   -------------------------------------------------------------------------- */
/*doc
---
title: Mv
name: Mv
categories: [Project]
---

<body>

</body>
```
*/
.p-mv__area {
  background: url(/images/lp/hpstaff/mv_bg.png) no-repeat center;
  background-size: cover;
  -webkit-box-shadow: 3px 10px 5px -4px #e2e2e2;
  box-shadow: 3px 10px 5px -4px #e2e2e2;
  margin-bottom: 3rem;
  position: relative;
}

.p-mv__area::after {
  clear: both;
  content: "";
  display: table;
}

.p-mv__photo {
  margin: 0 auto;
  width: 100%;
}

.p-mv__pc {
  display: none;
}

.p-mv__sp {
  display: block;
}

@media screen and (min-width: 600px) {
  .p-mv__pc {
    display: block;
  }
  .p-mv__sp {
    display: none;
  }
}

@media screen and (min-width: 960px) {
  .p-mv__area {
    overflow: hidden;
  }
}

/* #Float
   -------------------------------------------------------------------------- */
/*doc
---
title: Float
name: Float
categories: [Utility]

*/
.u-fl-l {
  float: left;
}

.u-fl-r {
  float: right;
}

/* margin style
=================================================================== */
.u-mt0 {
  margin-top: 0px !important;
}

.u-mr0 {
  margin-right: 0px !important;
}

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

.u-ml0 {
  margin-left: 0px !important;
}

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

.u-mr5 {
  margin-right: 5px !important;
}

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

.u-ml5 {
  margin-left: 5px !important;
}

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

.u-mr10 {
  margin-right: 10px !important;
}

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

.u-ml10 {
  margin-left: 10px !important;
}

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

.u-mr15 {
  margin-right: 15px !important;
}

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

.u-ml15 {
  margin-left: 15px !important;
}

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

.u-mr20 {
  margin-right: 20px !important;
}

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

.u-ml20 {
  margin-left: 20px !important;
}

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

.u-mr25 {
  margin-right: 25px !important;
}

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

.u-ml25 {
  margin-left: 25px !important;
}

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

.u-mr30 {
  margin-right: 30px !important;
}

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

.u-ml30 {
  margin-left: 30px !important;
}

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

.u-mr35 {
  margin-right: 35px !important;
}

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

.u-ml35 {
  margin-left: 35px !important;
}

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

.u-mr40 {
  margin-right: 40px !important;
}

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

.u-ml40 {
  margin-left: 40px !important;
}

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

.u-mr45 {
  margin-right: 45px !important;
}

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

.u-ml45 {
  margin-left: 45px !important;
}

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

.u-mr50 {
  margin-right: 50px !important;
}

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

.u-ml50 {
  margin-left: 50px !important;
}

.u-mt55 {
  margin-top: 55px !important;
}

.u-mr55 {
  margin-right: 55px !important;
}

.u-mb55 {
  margin-bottom: 55px !important;
}

.u-ml55 {
  margin-left: 55px !important;
}

.u-mt60 {
  margin-top: 60px !important;
}

.u-mr60 {
  margin-right: 60px !important;
}

.u-mb60 {
  margin-bottom: 60px !important;
}

.u-ml60 {
  margin-left: 60px !important;
}

.u-mt65 {
  margin-top: 65px !important;
}

.u-mr65 {
  margin-right: 65px !important;
}

.u-mb65 {
  margin-bottom: 65px !important;
}

.u-ml65 {
  margin-left: 65px !important;
}

.u-mt70 {
  margin-top: 70px !important;
}

.u-mr70 {
  margin-right: 70px !important;
}

.u-mb70 {
  margin-bottom: 70px !important;
}

.u-ml70 {
  margin-left: 70px !important;
}

.u-mt75 {
  margin-top: 75px !important;
}

.u-mr75 {
  margin-right: 75px !important;
}

.u-mb75 {
  margin-bottom: 75px !important;
}

.u-ml75 {
  margin-left: 75px !important;
}

.u-mt80 {
  margin-top: 80px !important;
}

.u-mr80 {
  margin-right: 80px !important;
}

.u-mb80 {
  margin-bottom: 80px !important;
}

.u-ml80 {
  margin-left: 80px !important;
}

.u-mt85 {
  margin-top: 85px !important;
}

.u-mr85 {
  margin-right: 85px !important;
}

.u-mb85 {
  margin-bottom: 85px !important;
}

.u-ml85 {
  margin-left: 85px !important;
}

.u-mt90 {
  margin-top: 90px !important;
}

.u-mr90 {
  margin-right: 90px !important;
}

.u-mb90 {
  margin-bottom: 90px !important;
}

.u-ml90 {
  margin-left: 90px !important;
}

.u-mt95 {
  margin-top: 95px !important;
}

.u-mr95 {
  margin-right: 95px !important;
}

.u-mb95 {
  margin-bottom: 95px !important;
}

.u-ml95 {
  margin-left: 95px !important;
}

.u-mt100 {
  margin-top: 100px !important;
}

.u-mr100 {
  margin-right: 100px !important;
}

.u-mb100 {
  margin-bottom: 100px !important;
}

.u-ml100 {
  margin-left: 100px !important;
}

@media screen and (max-width: 959px) {
  .u-mt0--sp {
    margin-top: 0px !important;
  }
  .u-mr0--sp {
    margin-right: 0px !important;
  }
  .u-mb0--sp {
    margin-bottom: 0px !important;
  }
  .u-ml0--sp {
    margin-left: 0px !important;
  }
  .u-mt5--sp {
    margin-top: 5px !important;
  }
  .u-mr5--sp {
    margin-right: 5px !important;
  }
  .u-mb5--sp {
    margin-bottom: 5px !important;
  }
  .u-ml5--sp {
    margin-left: 5px !important;
  }
  .u-mt10--sp {
    margin-top: 10px !important;
  }
  .u-mr10--sp {
    margin-right: 10px !important;
  }
  .u-mb10--sp {
    margin-bottom: 10px !important;
  }
  .u-ml10--sp {
    margin-left: 10px !important;
  }
  .u-mt15--sp {
    margin-top: 15px !important;
  }
  .u-mr15--sp {
    margin-right: 15px !important;
  }
  .u-mb15--sp {
    margin-bottom: 15px !important;
  }
  .u-ml15--sp {
    margin-left: 15px !important;
  }
  .u-mt20--sp {
    margin-top: 20px !important;
  }
  .u-mr20--sp {
    margin-right: 20px !important;
  }
  .u-mb20--sp {
    margin-bottom: 20px !important;
  }
  .u-ml20--sp {
    margin-left: 20px !important;
  }
  .u-mt25--sp {
    margin-top: 25px !important;
  }
  .u-mr25--sp {
    margin-right: 25px !important;
  }
  .u-mb25--sp {
    margin-bottom: 25px !important;
  }
  .u-ml25--sp {
    margin-left: 25px !important;
  }
  .u-mt30--sp {
    margin-top: 30px !important;
  }
  .u-mr30--sp {
    margin-right: 30px !important;
  }
  .u-mb30--sp {
    margin-bottom: 30px !important;
  }
  .u-ml30--sp {
    margin-left: 30px !important;
  }
  .u-mt35--sp {
    margin-top: 35px !important;
  }
  .u-mr35--sp {
    margin-right: 35px !important;
  }
  .u-mb35--sp {
    margin-bottom: 35px !important;
  }
  .u-ml35--sp {
    margin-left: 35px !important;
  }
  .u-mt40--sp {
    margin-top: 40px !important;
  }
  .u-mr40--sp {
    margin-right: 40px !important;
  }
  .u-mb40--sp {
    margin-bottom: 40px !important;
  }
  .u-ml40--sp {
    margin-left: 40px !important;
  }
  .u-mt45--sp {
    margin-top: 45px !important;
  }
  .u-mr45--sp {
    margin-right: 45px !important;
  }
  .u-mb45--sp {
    margin-bottom: 45px !important;
  }
  .u-ml45--sp {
    margin-left: 45px !important;
  }
  .u-mt50--sp {
    margin-top: 50px !important;
  }
  .u-mr50--sp {
    margin-right: 50px !important;
  }
  .u-mb50--sp {
    margin-bottom: 50px !important;
  }
  .u-ml50--sp {
    margin-left: 50px !important;
  }
  .u-mt55--sp {
    margin-top: 55px !important;
  }
  .u-mr55--sp {
    margin-right: 55px !important;
  }
  .u-mb55--sp {
    margin-bottom: 55px !important;
  }
  .u-ml55--sp {
    margin-left: 55px !important;
  }
  .u-mt60--sp {
    margin-top: 60px !important;
  }
  .u-mr60--sp {
    margin-right: 60px !important;
  }
  .u-mb60--sp {
    margin-bottom: 60px !important;
  }
  .u-ml60--sp {
    margin-left: 60px !important;
  }
  .u-mt65--sp {
    margin-top: 65px !important;
  }
  .u-mr65--sp {
    margin-right: 65px !important;
  }
  .u-mb65--sp {
    margin-bottom: 65px !important;
  }
  .u-ml65--sp {
    margin-left: 65px !important;
  }
  .u-mt70--sp {
    margin-top: 70px !important;
  }
  .u-mr70--sp {
    margin-right: 70px !important;
  }
  .u-mb70--sp {
    margin-bottom: 70px !important;
  }
  .u-ml70--sp {
    margin-left: 70px !important;
  }
  .u-mt75--sp {
    margin-top: 75px !important;
  }
  .u-mr75--sp {
    margin-right: 75px !important;
  }
  .u-mb75--sp {
    margin-bottom: 75px !important;
  }
  .u-ml75--sp {
    margin-left: 75px !important;
  }
  .u-mt80--sp {
    margin-top: 80px !important;
  }
  .u-mr80--sp {
    margin-right: 80px !important;
  }
  .u-mb80--sp {
    margin-bottom: 80px !important;
  }
  .u-ml80--sp {
    margin-left: 80px !important;
  }
  .u-mt85--sp {
    margin-top: 85px !important;
  }
  .u-mr85--sp {
    margin-right: 85px !important;
  }
  .u-mb85--sp {
    margin-bottom: 85px !important;
  }
  .u-ml85--sp {
    margin-left: 85px !important;
  }
  .u-mt90--sp {
    margin-top: 90px !important;
  }
  .u-mr90--sp {
    margin-right: 90px !important;
  }
  .u-mb90--sp {
    margin-bottom: 90px !important;
  }
  .u-ml90--sp {
    margin-left: 90px !important;
  }
  .u-mt95--sp {
    margin-top: 95px !important;
  }
  .u-mr95--sp {
    margin-right: 95px !important;
  }
  .u-mb95--sp {
    margin-bottom: 95px !important;
  }
  .u-ml95--sp {
    margin-left: 95px !important;
  }
  .u-mt100--sp {
    margin-top: 100px !important;
  }
  .u-mr100--sp {
    margin-right: 100px !important;
  }
  .u-mb100--sp {
    margin-bottom: 100px !important;
  }
  .u-ml100--sp {
    margin-left: 100px !important;
  }
}

@media screen and (min-width: 960px) {
  .u-mt0--pc {
    margin-top: 0px !important;
  }
  .u-mr0--pc {
    margin-right: 0px !important;
  }
  .u-mb0--pc {
    margin-bottom: 0px !important;
  }
  .u-ml0--pc {
    margin-left: 0px !important;
  }
  .u-mt5--pc {
    margin-top: 5px !important;
  }
  .u-mr5--pc {
    margin-right: 5px !important;
  }
  .u-mb5--pc {
    margin-bottom: 5px !important;
  }
  .u-ml5--pc {
    margin-left: 5px !important;
  }
  .u-mt10--pc {
    margin-top: 10px !important;
  }
  .u-mr10--pc {
    margin-right: 10px !important;
  }
  .u-mb10--pc {
    margin-bottom: 10px !important;
  }
  .u-ml10--pc {
    margin-left: 10px !important;
  }
  .u-mt15--pc {
    margin-top: 15px !important;
  }
  .u-mr15--pc {
    margin-right: 15px !important;
  }
  .u-mb15--pc {
    margin-bottom: 15px !important;
  }
  .u-ml15--pc {
    margin-left: 15px !important;
  }
  .u-mt20--pc {
    margin-top: 20px !important;
  }
  .u-mr20--pc {
    margin-right: 20px !important;
  }
  .u-mb20--pc {
    margin-bottom: 20px !important;
  }
  .u-ml20--pc {
    margin-left: 20px !important;
  }
  .u-mt25--pc {
    margin-top: 25px !important;
  }
  .u-mr25--pc {
    margin-right: 25px !important;
  }
  .u-mb25--pc {
    margin-bottom: 25px !important;
  }
  .u-ml25--pc {
    margin-left: 25px !important;
  }
  .u-mt30--pc {
    margin-top: 30px !important;
  }
  .u-mr30--pc {
    margin-right: 30px !important;
  }
  .u-mb30--pc {
    margin-bottom: 30px !important;
  }
  .u-ml30--pc {
    margin-left: 30px !important;
  }
  .u-mt35--pc {
    margin-top: 35px !important;
  }
  .u-mr35--pc {
    margin-right: 35px !important;
  }
  .u-mb35--pc {
    margin-bottom: 35px !important;
  }
  .u-ml35--pc {
    margin-left: 35px !important;
  }
  .u-mt40--pc {
    margin-top: 40px !important;
  }
  .u-mr40--pc {
    margin-right: 40px !important;
  }
  .u-mb40--pc {
    margin-bottom: 40px !important;
  }
  .u-ml40--pc {
    margin-left: 40px !important;
  }
  .u-mt45--pc {
    margin-top: 45px !important;
  }
  .u-mr45--pc {
    margin-right: 45px !important;
  }
  .u-mb45--pc {
    margin-bottom: 45px !important;
  }
  .u-ml45--pc {
    margin-left: 45px !important;
  }
  .u-mt50--pc {
    margin-top: 50px !important;
  }
  .u-mr50--pc {
    margin-right: 50px !important;
  }
  .u-mb50--pc {
    margin-bottom: 50px !important;
  }
  .u-ml50--pc {
    margin-left: 50px !important;
  }
  .u-mt55--pc {
    margin-top: 55px !important;
  }
  .u-mr55--pc {
    margin-right: 55px !important;
  }
  .u-mb55--pc {
    margin-bottom: 55px !important;
  }
  .u-ml55--pc {
    margin-left: 55px !important;
  }
  .u-mt60--pc {
    margin-top: 60px !important;
  }
  .u-mr60--pc {
    margin-right: 60px !important;
  }
  .u-mb60--pc {
    margin-bottom: 60px !important;
  }
  .u-ml60--pc {
    margin-left: 60px !important;
  }
  .u-mt65--pc {
    margin-top: 65px !important;
  }
  .u-mr65--pc {
    margin-right: 65px !important;
  }
  .u-mb65--pc {
    margin-bottom: 65px !important;
  }
  .u-ml65--pc {
    margin-left: 65px !important;
  }
  .u-mt70--pc {
    margin-top: 70px !important;
  }
  .u-mr70--pc {
    margin-right: 70px !important;
  }
  .u-mb70--pc {
    margin-bottom: 70px !important;
  }
  .u-ml70--pc {
    margin-left: 70px !important;
  }
  .u-mt75--pc {
    margin-top: 75px !important;
  }
  .u-mr75--pc {
    margin-right: 75px !important;
  }
  .u-mb75--pc {
    margin-bottom: 75px !important;
  }
  .u-ml75--pc {
    margin-left: 75px !important;
  }
  .u-mt80--pc {
    margin-top: 80px !important;
  }
  .u-mr80--pc {
    margin-right: 80px !important;
  }
  .u-mb80--pc {
    margin-bottom: 80px !important;
  }
  .u-ml80--pc {
    margin-left: 80px !important;
  }
  .u-mt85--pc {
    margin-top: 85px !important;
  }
  .u-mr85--pc {
    margin-right: 85px !important;
  }
  .u-mb85--pc {
    margin-bottom: 85px !important;
  }
  .u-ml85--pc {
    margin-left: 85px !important;
  }
  .u-mt90--pc {
    margin-top: 90px !important;
  }
  .u-mr90--pc {
    margin-right: 90px !important;
  }
  .u-mb90--pc {
    margin-bottom: 90px !important;
  }
  .u-ml90--pc {
    margin-left: 90px !important;
  }
  .u-mt95--pc {
    margin-top: 95px !important;
  }
  .u-mr95--pc {
    margin-right: 95px !important;
  }
  .u-mb95--pc {
    margin-bottom: 95px !important;
  }
  .u-ml95--pc {
    margin-left: 95px !important;
  }
  .u-mt100--pc {
    margin-top: 100px !important;
  }
  .u-mr100--pc {
    margin-right: 100px !important;
  }
  .u-mb100--pc {
    margin-bottom: 100px !important;
  }
  .u-ml100--pc {
    margin-left: 100px !important;
  }
}

/* padding style
=================================================================== */
.u-p-t {
  padding-top: 1em !important;
}

.u-p-r {
  padding-right: 1em !important;
}

.u-p-b {
  padding-bottom: 1em !important;
}

.u-p-l {
  padding-left: 1em !important;
}

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

.u-pr0 {
  padding-right: 0px !important;
}

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

.u-pl0 {
  padding-left: 0px !important;
}

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

.u-pr5 {
  padding-right: 5px !important;
}

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

.u-pl5 {
  padding-left: 5px !important;
}

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

.u-pr10 {
  padding-right: 10px !important;
}

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

.u-pl10 {
  padding-left: 10px !important;
}

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

.u-pr15 {
  padding-right: 15px !important;
}

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

.u-pl15 {
  padding-left: 15px !important;
}

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

.u-pr20 {
  padding-right: 20px !important;
}

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

.u-pl20 {
  padding-left: 20px !important;
}

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

.u-pr25 {
  padding-right: 25px !important;
}

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

.u-pl25 {
  padding-left: 25px !important;
}

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

.u-pr30 {
  padding-right: 30px !important;
}

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

.u-pl30 {
  padding-left: 30px !important;
}

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

.u-pr35 {
  padding-right: 35px !important;
}

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

.u-pl35 {
  padding-left: 35px !important;
}

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

.u-pr40 {
  padding-right: 40px !important;
}

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

.u-pl40 {
  padding-left: 40px !important;
}

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

.u-pr45 {
  padding-right: 45px !important;
}

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

.u-pl45 {
  padding-left: 45px !important;
}

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

.u-pr50 {
  padding-right: 50px !important;
}

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

.u-pl50 {
  padding-left: 50px !important;
}

.u-pt55 {
  padding-top: 55px !important;
}

.u-pr55 {
  padding-right: 55px !important;
}

.u-pb55 {
  padding-bottom: 55px !important;
}

.u-pl55 {
  padding-left: 55px !important;
}

.u-pt60 {
  padding-top: 60px !important;
}

.u-pr60 {
  padding-right: 60px !important;
}

.u-pb60 {
  padding-bottom: 60px !important;
}

.u-pl60 {
  padding-left: 60px !important;
}

.u-pt65 {
  padding-top: 65px !important;
}

.u-pr65 {
  padding-right: 65px !important;
}

.u-pb65 {
  padding-bottom: 65px !important;
}

.u-pl65 {
  padding-left: 65px !important;
}

.u-pt70 {
  padding-top: 70px !important;
}

.u-pr70 {
  padding-right: 70px !important;
}

.u-pb70 {
  padding-bottom: 70px !important;
}

.u-pl70 {
  padding-left: 70px !important;
}

.u-pt75 {
  padding-top: 75px !important;
}

.u-pr75 {
  padding-right: 75px !important;
}

.u-pb75 {
  padding-bottom: 75px !important;
}

.u-pl75 {
  padding-left: 75px !important;
}

.u-pt80 {
  padding-top: 80px !important;
}

.u-pr80 {
  padding-right: 80px !important;
}

.u-pb80 {
  padding-bottom: 80px !important;
}

.u-pl80 {
  padding-left: 80px !important;
}

.u-pt85 {
  padding-top: 85px !important;
}

.u-pr85 {
  padding-right: 85px !important;
}

.u-pb85 {
  padding-bottom: 85px !important;
}

.u-pl85 {
  padding-left: 85px !important;
}

.u-pt90 {
  padding-top: 90px !important;
}

.u-pr90 {
  padding-right: 90px !important;
}

.u-pb90 {
  padding-bottom: 90px !important;
}

.u-pl90 {
  padding-left: 90px !important;
}

.u-pt95 {
  padding-top: 95px !important;
}

.u-pr95 {
  padding-right: 95px !important;
}

.u-pb95 {
  padding-bottom: 95px !important;
}

.u-pl95 {
  padding-left: 95px !important;
}

.u-pt100 {
  padding-top: 100px !important;
}

.u-pr100 {
  padding-right: 100px !important;
}

.u-pb100 {
  padding-bottom: 100px !important;
}

.u-pl100 {
  padding-left: 100px !important;
}

@media screen and (max-width: 959px) {
  .u-pt0--sp {
    margin-top: 0px !important;
  }
  .u-mr0--sp {
    margin-right: 0px !important;
  }
  .u-mb0--sp {
    margin-bottom: 0px !important;
  }
  .u-ml0--sp {
    margin-left: 0px !important;
  }
  .u-pt5--sp {
    margin-top: 5px !important;
  }
  .u-mr5--sp {
    margin-right: 5px !important;
  }
  .u-mb5--sp {
    margin-bottom: 5px !important;
  }
  .u-ml5--sp {
    margin-left: 5px !important;
  }
  .u-pt10--sp {
    margin-top: 10px !important;
  }
  .u-mr10--sp {
    margin-right: 10px !important;
  }
  .u-mb10--sp {
    margin-bottom: 10px !important;
  }
  .u-ml10--sp {
    margin-left: 10px !important;
  }
  .u-pt15--sp {
    margin-top: 15px !important;
  }
  .u-mr15--sp {
    margin-right: 15px !important;
  }
  .u-mb15--sp {
    margin-bottom: 15px !important;
  }
  .u-ml15--sp {
    margin-left: 15px !important;
  }
  .u-pt20--sp {
    margin-top: 20px !important;
  }
  .u-mr20--sp {
    margin-right: 20px !important;
  }
  .u-mb20--sp {
    margin-bottom: 20px !important;
  }
  .u-ml20--sp {
    margin-left: 20px !important;
  }
  .u-pt25--sp {
    margin-top: 25px !important;
  }
  .u-mr25--sp {
    margin-right: 25px !important;
  }
  .u-mb25--sp {
    margin-bottom: 25px !important;
  }
  .u-ml25--sp {
    margin-left: 25px !important;
  }
  .u-pt30--sp {
    margin-top: 30px !important;
  }
  .u-mr30--sp {
    margin-right: 30px !important;
  }
  .u-mb30--sp {
    margin-bottom: 30px !important;
  }
  .u-ml30--sp {
    margin-left: 30px !important;
  }
  .u-pt35--sp {
    margin-top: 35px !important;
  }
  .u-mr35--sp {
    margin-right: 35px !important;
  }
  .u-mb35--sp {
    margin-bottom: 35px !important;
  }
  .u-ml35--sp {
    margin-left: 35px !important;
  }
  .u-pt40--sp {
    margin-top: 40px !important;
  }
  .u-mr40--sp {
    margin-right: 40px !important;
  }
  .u-mb40--sp {
    margin-bottom: 40px !important;
  }
  .u-ml40--sp {
    margin-left: 40px !important;
  }
  .u-pt45--sp {
    margin-top: 45px !important;
  }
  .u-mr45--sp {
    margin-right: 45px !important;
  }
  .u-mb45--sp {
    margin-bottom: 45px !important;
  }
  .u-ml45--sp {
    margin-left: 45px !important;
  }
  .u-pt50--sp {
    margin-top: 50px !important;
  }
  .u-mr50--sp {
    margin-right: 50px !important;
  }
  .u-mb50--sp {
    margin-bottom: 50px !important;
  }
  .u-ml50--sp {
    margin-left: 50px !important;
  }
  .u-pt55--sp {
    margin-top: 55px !important;
  }
  .u-mr55--sp {
    margin-right: 55px !important;
  }
  .u-mb55--sp {
    margin-bottom: 55px !important;
  }
  .u-ml55--sp {
    margin-left: 55px !important;
  }
  .u-pt60--sp {
    margin-top: 60px !important;
  }
  .u-mr60--sp {
    margin-right: 60px !important;
  }
  .u-mb60--sp {
    margin-bottom: 60px !important;
  }
  .u-ml60--sp {
    margin-left: 60px !important;
  }
  .u-pt65--sp {
    margin-top: 65px !important;
  }
  .u-mr65--sp {
    margin-right: 65px !important;
  }
  .u-mb65--sp {
    margin-bottom: 65px !important;
  }
  .u-ml65--sp {
    margin-left: 65px !important;
  }
  .u-pt70--sp {
    margin-top: 70px !important;
  }
  .u-mr70--sp {
    margin-right: 70px !important;
  }
  .u-mb70--sp {
    margin-bottom: 70px !important;
  }
  .u-ml70--sp {
    margin-left: 70px !important;
  }
  .u-pt75--sp {
    margin-top: 75px !important;
  }
  .u-mr75--sp {
    margin-right: 75px !important;
  }
  .u-mb75--sp {
    margin-bottom: 75px !important;
  }
  .u-ml75--sp {
    margin-left: 75px !important;
  }
  .u-pt80--sp {
    margin-top: 80px !important;
  }
  .u-mr80--sp {
    margin-right: 80px !important;
  }
  .u-mb80--sp {
    margin-bottom: 80px !important;
  }
  .u-ml80--sp {
    margin-left: 80px !important;
  }
  .u-pt85--sp {
    margin-top: 85px !important;
  }
  .u-mr85--sp {
    margin-right: 85px !important;
  }
  .u-mb85--sp {
    margin-bottom: 85px !important;
  }
  .u-ml85--sp {
    margin-left: 85px !important;
  }
  .u-pt90--sp {
    margin-top: 90px !important;
  }
  .u-mr90--sp {
    margin-right: 90px !important;
  }
  .u-mb90--sp {
    margin-bottom: 90px !important;
  }
  .u-ml90--sp {
    margin-left: 90px !important;
  }
  .u-pt95--sp {
    margin-top: 95px !important;
  }
  .u-mr95--sp {
    margin-right: 95px !important;
  }
  .u-mb95--sp {
    margin-bottom: 95px !important;
  }
  .u-ml95--sp {
    margin-left: 95px !important;
  }
  .u-pt100--sp {
    margin-top: 100px !important;
  }
  .u-mr100--sp {
    margin-right: 100px !important;
  }
  .u-mb100--sp {
    margin-bottom: 100px !important;
  }
  .u-ml100--sp {
    margin-left: 100px !important;
  }
}

@media screen and (min-width: 960px) {
  .u-pt0--pc {
    margin-top: 0px !important;
  }
  .u-mr0--pc {
    margin-right: 0px !important;
  }
  .u-mb0--pc {
    margin-bottom: 0px !important;
  }
  .u-ml0--pc {
    margin-left: 0px !important;
  }
  .u-pt5--pc {
    margin-top: 5px !important;
  }
  .u-mr5--pc {
    margin-right: 5px !important;
  }
  .u-mb5--pc {
    margin-bottom: 5px !important;
  }
  .u-ml5--pc {
    margin-left: 5px !important;
  }
  .u-pt10--pc {
    margin-top: 10px !important;
  }
  .u-mr10--pc {
    margin-right: 10px !important;
  }
  .u-mb10--pc {
    margin-bottom: 10px !important;
  }
  .u-ml10--pc {
    margin-left: 10px !important;
  }
  .u-pt15--pc {
    margin-top: 15px !important;
  }
  .u-mr15--pc {
    margin-right: 15px !important;
  }
  .u-mb15--pc {
    margin-bottom: 15px !important;
  }
  .u-ml15--pc {
    margin-left: 15px !important;
  }
  .u-pt20--pc {
    margin-top: 20px !important;
  }
  .u-mr20--pc {
    margin-right: 20px !important;
  }
  .u-mb20--pc {
    margin-bottom: 20px !important;
  }
  .u-ml20--pc {
    margin-left: 20px !important;
  }
  .u-pt25--pc {
    margin-top: 25px !important;
  }
  .u-mr25--pc {
    margin-right: 25px !important;
  }
  .u-mb25--pc {
    margin-bottom: 25px !important;
  }
  .u-ml25--pc {
    margin-left: 25px !important;
  }
  .u-pt30--pc {
    margin-top: 30px !important;
  }
  .u-mr30--pc {
    margin-right: 30px !important;
  }
  .u-mb30--pc {
    margin-bottom: 30px !important;
  }
  .u-ml30--pc {
    margin-left: 30px !important;
  }
  .u-pt35--pc {
    margin-top: 35px !important;
  }
  .u-mr35--pc {
    margin-right: 35px !important;
  }
  .u-mb35--pc {
    margin-bottom: 35px !important;
  }
  .u-ml35--pc {
    margin-left: 35px !important;
  }
  .u-pt40--pc {
    margin-top: 40px !important;
  }
  .u-mr40--pc {
    margin-right: 40px !important;
  }
  .u-mb40--pc {
    margin-bottom: 40px !important;
  }
  .u-ml40--pc {
    margin-left: 40px !important;
  }
  .u-pt45--pc {
    margin-top: 45px !important;
  }
  .u-mr45--pc {
    margin-right: 45px !important;
  }
  .u-mb45--pc {
    margin-bottom: 45px !important;
  }
  .u-ml45--pc {
    margin-left: 45px !important;
  }
  .u-pt50--pc {
    margin-top: 50px !important;
  }
  .u-mr50--pc {
    margin-right: 50px !important;
  }
  .u-mb50--pc {
    margin-bottom: 50px !important;
  }
  .u-ml50--pc {
    margin-left: 50px !important;
  }
  .u-pt55--pc {
    margin-top: 55px !important;
  }
  .u-mr55--pc {
    margin-right: 55px !important;
  }
  .u-mb55--pc {
    margin-bottom: 55px !important;
  }
  .u-ml55--pc {
    margin-left: 55px !important;
  }
  .u-pt60--pc {
    margin-top: 60px !important;
  }
  .u-mr60--pc {
    margin-right: 60px !important;
  }
  .u-mb60--pc {
    margin-bottom: 60px !important;
  }
  .u-ml60--pc {
    margin-left: 60px !important;
  }
  .u-pt65--pc {
    margin-top: 65px !important;
  }
  .u-mr65--pc {
    margin-right: 65px !important;
  }
  .u-mb65--pc {
    margin-bottom: 65px !important;
  }
  .u-ml65--pc {
    margin-left: 65px !important;
  }
  .u-pt70--pc {
    margin-top: 70px !important;
  }
  .u-mr70--pc {
    margin-right: 70px !important;
  }
  .u-mb70--pc {
    margin-bottom: 70px !important;
  }
  .u-ml70--pc {
    margin-left: 70px !important;
  }
  .u-pt75--pc {
    margin-top: 75px !important;
  }
  .u-mr75--pc {
    margin-right: 75px !important;
  }
  .u-mb75--pc {
    margin-bottom: 75px !important;
  }
  .u-ml75--pc {
    margin-left: 75px !important;
  }
  .u-pt80--pc {
    margin-top: 80px !important;
  }
  .u-mr80--pc {
    margin-right: 80px !important;
  }
  .u-mb80--pc {
    margin-bottom: 80px !important;
  }
  .u-ml80--pc {
    margin-left: 80px !important;
  }
  .u-pt85--pc {
    margin-top: 85px !important;
  }
  .u-mr85--pc {
    margin-right: 85px !important;
  }
  .u-mb85--pc {
    margin-bottom: 85px !important;
  }
  .u-ml85--pc {
    margin-left: 85px !important;
  }
  .u-pt90--pc {
    margin-top: 90px !important;
  }
  .u-mr90--pc {
    margin-right: 90px !important;
  }
  .u-mb90--pc {
    margin-bottom: 90px !important;
  }
  .u-ml90--pc {
    margin-left: 90px !important;
  }
  .u-pt95--pc {
    margin-top: 95px !important;
  }
  .u-mr95--pc {
    margin-right: 95px !important;
  }
  .u-mb95--pc {
    margin-bottom: 95px !important;
  }
  .u-ml95--pc {
    margin-left: 95px !important;
  }
  .u-pt100--pc {
    margin-top: 100px !important;
  }
  .u-mr100--pc {
    margin-right: 100px !important;
  }
  .u-mb100--pc {
    margin-bottom: 100px !important;
  }
  .u-ml100--pc {
    margin-left: 100px !important;
  }
}

/* #Position
   -------------------------------------------------------------------------- */
/*doc
---
title: Position
name: Position
categories: [Utility]

*/
.u-pos-t {
  position: top;
}

.u-pos-r {
  position: right;
}

.u-pos-b {
  position: bottom;
}

.u-pos-l {
  position: left;
}

/* #Size
   -------------------------------------------------------------------------- */
/*doc
---
title: Size
name: Size
categories: [Utility]

*/
.u-fs10 {
  font-size: 10px;
}

.u-fs11 {
  font-size: 11px;
}

.u-fs12 {
  font-size: 12px;
}

.u-fs13 {
  font-size: 13px;
}

.u-fs14 {
  font-size: 14px;
}

.u-fs15 {
  font-size: 15px;
}

.u-fs16 {
  font-size: 16px;
}

.u-fs17 {
  font-size: 17px;
}

.u-fs18 {
  font-size: 18px;
}

.u-fs19 {
  font-size: 19px;
}

.u-fs20 {
  font-size: 20px;
}

.u-col1 {
  width: 100%;
}

.u-col2 {
  width: 50%;
}

.u-col3 {
  width: 33.33333%;
}

.u-col4 {
  width: 25%;
}

.u-col5 {
  width: 20%;
}

.u-col6 {
  width: 16.66667%;
}

.u-col7 {
  width: 14.28571%;
}

.u-col8 {
  width: 12.5%;
}

/* #Text
   -------------------------------------------------------------------------- */
/*doc
---
title: Text
name: Text
categories: [Utility]

*/
.u-txt-l {
  text-align: left;
}

.u-txt-r {
  text-align: right;
}

.u-txt-bold {
  font-weight: bold;
}

/* display style
=================================================================== */
.u-dp__sp {
  display: inline-block;
}

.u-dp__tab {
  display: none;
}

.u-dp__pc {
  display: none;
}

@media screen and (min-width: 600px) {
  .u-dp__sp {
    display: none;
  }
  .u-dp__tab {
    display: inline-block;
  }
  .u-dp__pc {
    display: none;
  }
}

@media screen and (min-width: 960px) {
  .u-dp__sp {
    display: none;
  }
  .u-dp__tab {
    display: none;
  }
  .u-dp__pc {
    display: inline-block;
  }
}

/* br style
=================================================================== */
.u-br--sp {
  display: block;
}

.u-br--pc {
  display: none;
}

@media screen and (min-width: 600px) {
  .u-br--sp {
    display: none;
  }
  .u-br--pc {
    display: block;
  }
}

@media screen and (min-width: 960px) {
  .u-br--sp {
    display: none;
  }
  .u-br--pc {
    display: block;
  }
}

/* #Index
   -------------------------------------------------------------------------- */
/*doc
---
title: Index
name: Index
categories: [Page]

*/
.index__leadBody {
  list-style: none;
}

.index__leadBody::after {
  clear: both;
  content: "";
  display: table;
}

.index__leadList {
  float: left;
  margin: 0 2%;
  width: 29%;
}

.index__leadImage--sp {
  display: block;
}

.index__leadImage--pc {
  display: none;
}

.index__exampleArea {
  margin: 30px 0;
  line-height: 1.5;
}

.index__example {
  background: #33B69D;
  color: #fff;
  padding: 0 0 10px;
}

.index__exampleLead {
  padding: 10px 0 12px;
}

.index__exampleBody {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index__exampleBody::after {
  clear: both;
  content: "";
  display: table;
}

.index__exampleList {
  float: left;
  margin: 0 2% 2%;
  width: 29%;
}

.index__exampleImage {
  display: none;
  top:1560px;
}

.index__flowArea {
  background: #e8f6ff url(/images/lp/hpstaff/contents_bg.png) no-repeat center top;
  background-size: cover;
  margin: 50px auto;
  padding: 2rem 1rem 1rem;
  width: 100%;
}

.index__flow {
  list-style: none;
  margin: 20px auto 0;
  padding: 0;
  width: 100%;
}

.index__flow li {
  background: #fff;
  border: 2px dotted #c1c1c1;
  color: #323733;
  color: #323733;
  counter-increment: flow_num;
  display: block;
  height: 120px;
  margin-bottom: 30px;
  padding: 10px 0;
  position: relative;
}

.index__flow li p {
  border-left: 1px solid #d9d9d9;
  height: 95px;
  margin: 0 0 0 70px;
  padding: 0 10px 0 20px;
}

.index__flow li::before {
  color: #00529d;
  content: counter(flow_num);
  font-family: "DIN-Mittelschrift", sans-serif;
  font-size: 5rem;
  left: 35px;
  margin: auto 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.index__flow li::after {
  background: url(/images/lp/hpstaff/arrow.png) no-repeat center top;
  background-size: 20px;
  bottom: -170px;
  content: "";
  left: 0;
  margin: auto;
  padding: 80px;
  position: absolute;
  right: 0;
}

.index__flow li:last-child::after {
  background: none;
}

.index__flow01,
.index__flow02,
.index__flow03,
.index__flow04,
.index__flow05 {
  display: block;
  font-size: 25px;
  margin-bottom: 10px;
}

.index__flowTitle {
  color: #00529d;
  font-size: 2rem;
  font-weight: normal;
}

.index__faq {
  background: #fff;
}

.index__faqBody {
  color: #00529d;
  font-size: 2rem;
  margin: 10px auto;
  padding: 0;
  text-align: left;
  width: 90%;
}

.index__faqTitle {
  background: url(/images/lp/hpstaff/q.png) no-repeat 0 top;
  background-size: 22px auto;
  margin-bottom: 15px;
  margin-left: 7px;
  padding: .8rem 0 .8rem 4rem;
}

.index__faqDetail {
  background: url(/images/lp/hpstaff/a.png) no-repeat left top;
  background-size: 22px auto;
  margin-left: 7px;
  padding: .8rem 0 .8rem 4rem;
}

.index__faqArrow {
  margin: 1rem auto;
  width: 20%;
}

.index__historyArea {
  background: #e8f6ff url(/images/lp/hpstaff/contents_bg.png) no-repeat center top;
  background-size: cover;
}

.index__history {
  counter-reset: history_num1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.index__history::after {
  clear: both;
  content: "";
  display: table;
}

.index__historyList {
  counter-increment: history_num;
  margin: 0 0 30px;
}

.index__historyList::after {
  clear: both;
  content: "";
  display: table;
}

.index__historyList:nth-child(1) .index__historyTextTitle {
  text-indent: -6px;
}

.index__historyList:nth-child(2) .index__historyTextTitle,
.index__historyList:nth-child(3) .index__historyTextTitle {
  text-indent: -9px;
}

.index__historyImage {
  float: left;
  margin: 0;
  padding: 0;
  width: 49%;
}

.index__historyText {
  float: right;
  width: 49%;
  word-break: break-all;
}

.index__historyTextTitle {
  color: #00529d;
  line-height: 13px;
  margin: 3px 0 3px 20px;
  text-align: justify;
  text-justify: inter-ideograph;
}

.index__historyTextTitle::before {
  content: counter(history_num);
  font-family: DIN-Mittelschrift,sans-serif;
  font-size: 1.85rem;
  font-weight: bold;
  position: relative;
  top: 2px;
}

.index__historyTextDetail {
  margin: 10px 0 30px 15px;
  padding-left: 5px;
}

.index__serviceArea {
  margin: 0 auto;
  width: 90%;
}

.index__serviceBox {
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
}

.index__service {
  list-style: none;
}

.index__service::after {
  clear: both;
  content: "";
  display: table;
}

.index__serviceDetail {
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-box;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 0 30px;
}

.index__serviceImage {
  margin: 0;
  padding: 0;
  width: 49%;
}

.index__serviceText {
  color: #6e6666;
  text-align: left;
  width: 49%;
  word-break: break-all;
}

.index__serviceText--left p {
  float: left;
  width: 90%;
}

.index__serviceText--right p {
  float: right;
  width: 90%;
}

.index__about {
  background: url(/images/lp/hpstaff/about_bg.png) no-repeat center;
  background-size: cover;
  margin-top: 60px;
  padding: 20px 0;
  position: relative;
}

.index__about p {
  text-align: left;
  text-shadow: 2px 2px 1px #fff, 2px -2px 1px #fff, -2px 2px 1px #fff, -2px -2px 1px #fff;
}

.index__aboutTitle {
  color: #33B69D;
  font-size: 2.4rem;
  font-weight: normal;
  left: 0;
  position: absolute;
  right: 0;
  top: -2.3rem;
  z-index: -1;
  line-height: 1;
}

.index__aboutMediwelLogo {
  margin: 1rem auto;
  width: 2rem;
}

.index #map {
  display: none;
}

.miniregion {
  display: none;
}

@media screen and (min-width: 600px) {
  .index__serviceArea {
    width: 100%;
  }
  .index__example {
    padding: 0 0 15px;
  }
  .index__exampleLead {
    font-size: 15px;
    padding: 20px 0 25px;
  }
  .index__flow li {
    margin-bottom: 50px;
  }
  .index__flow li::after {
    background-size: 40px;
  }
  .index__historyList:nth-child(1) .index__historyTextTitle {
    text-indent: -15px;
  }
  .index__historyList:nth-child(2) .index__historyTextTitle,
  .index__historyList:nth-child(3) .index__historyTextTitle {
    text-indent: -24px;
  }
  .index__historyTextTitle {
    font-size: 2rem;
    line-height: 150%;
    margin: -10px 0 30px 40px;
    text-align: left;
  }
  .index__historyTextTitle::before {
    font-size: 3.7rem;
    font-weight: bold;
  }
  .index__historyTextDetail {
    font-size: 20px;
    margin: -10px 0 30px 37px;
    padding-left: 5px;
  }
  .index__faqBody {
    background-image: url(/images/lp/hpstaff/q_bg.png), url(/images/lp/hpstaff/a_bg.png);
    background-position: left top, right bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: 150px auto, 150px auto;
    padding: 90px 0;
  }
  .index__leadImage--sp {
    display: none;
  }
  .index__leadImage--pc {
    display: block;
  }
}

@media screen and (min-width: 960px) {
  .index__leadBody {
    margin: 100px auto;
    padding: 0;
    width: 1000px;
  }
  .index__leadList {
    margin: 0 10px;
    width: 300px;
  }
  .index__flow {
    width: 865px;
  }
  .index__flow li::before {
    font-size: 50px;
  }
  .index__flowTitle {
    font-size: 25px;
  }
  .index__flowArea {
    margin: 50px auto 0;
    width: 100%;
  }
  .index__exampleArea {
    margin: 0;
  }
  .index__example {
    position: relative;
  }
  .index__example small {
    display: block;
    padding: 20px 0 30px;
  }
  .index__exampleLead {
    font-size: 30px;
    padding: 30px 0;
  }
  .index__exampleBody {
    margin: 0 auto;
    width: 1000px;
  }
  .index__exampleList {
    margin: 0 5px 5px;
    width: 323px;
  }
  .index__exampleImage {
    bottom: 50px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 1430px;
  }
  .index__exampleImage::after {
    clear: both;
    content: "";
    display: table;
  }
  .index__faq {
    padding: 65px 0 10px;
  }
  .index__faqBody {
    font-size: 28px;
    margin: 60px auto 0;
    padding: 90px 0 40px 55px;
    width: 750px;
  }
  .index__faqTitle {
    background-position: left 5px;
    background-size: 30px auto;
    margin-bottom: 70px;
  }
  .index__faqDetail {
    background-position: left 5px;
    background-size: 30px auto;
  }
  .index__faqArrow {
    margin-bottom: 70px;
    width: 77.5px;
  }
  .index__historyArea {
    margin-bottom: 70px;
    padding: 50px 0;
  }
  .index__history {
    margin: 0 auto;
    width: 900px;
  }
  .index__historyImage {
    width: 440px;
  }
  .index__historyText {
    width: 440px;
  }
  .index__historyList:nth-child(1) .index__historyTextTitle {
    text-indent: -17px;
  }
  .index__historyList:nth-child(2) .index__historyTextTitle,
  .index__historyList:nth-child(3) .index__historyTextTitle {
    text-indent: -27px;
  }
  .index__serviceBox {
    margin-bottom: 120px;
  }
  .index__serviceText--left,
  .index__serviceText--right {
    float: none;
  }
  .index__serviceText--left p,
  .index__serviceText--right p {
    font-size: 1.4rem;
    line-height: 150%;
    padding: 0 5%;
    width: 74.5%;
  }
  .index__serviceText--left p {
    float: right;
  }
  .index__serviceText--right p {
    float: left;
  }
  .index__serviceImage {
    width: 51%;
  }
  .index__serviceImage--left,
  .index__serviceImage--right {
    float: none;
  }
  .index__about p {
    line-height: 40px;
    text-align: center;
  }
  .index__aboutArea {
    padding-bottom: 50px;
    width: 800px;
  }
  .index__aboutTitle {
    font-size: 60px;
    top: -60px;
  }
  .miniregion {
    display: block;
  }
}

@media screen and (min-width: 1280px) {
  .index__exampleImage {
    display: block;
  }
  .index__exampleImageLeft,
  .index__exampleImageRight {
    margin: 0;
    width: 215px;
  }
  .index__exampleImageLeft {
    float: left;
  }
  .index__exampleImageRight {
    float: right;
  }
}

/*# sourceMappingURL=../maps/default.css.map */

/* #20190704 追加css
   -------------------------------------------------------------------------- */
   .joboffer{
    width:31.6%;
    height:240px;
    margin-right: 2.5%;
    margin-bottom: 2.5%;
    padding: 20px;
    background-color:#fff;
    float:left;
   }

   .joboffer:last-child {
      margin-right: 0;
    }
    /* IE7、IE8対策 */
    .joboffer + .joboffer + .joboffer {
      margin-right: 0;
    }

   .area_job{
    border-bottom: #707070 1px solid;
    text-align:left;
    padding-top:8px;
    padding-bottom: 8px;
   }

   .item{
    font-size: 1rem;
    padding-right:2rem;
   }

  .green{
    color: #83b90e;
   }

   .blue{
    color:#00529d;
   }

   .offer_contents{
    font-size: 1.2rem;
    color:#000;
    text-align: left;
    padding-top:8px;
   }

   .annotation{
    font-size: 1rem;
    color:#000;
    text-align: left;
   }

@media screen and (max-width: 375px) {
  .index__exampleBody {
    padding: 0 2%;
  }

  .joboffer{
    height:200px;
    padding: 8px;
   }

   .item{
    font-size: 0.5rem;
    padding-right:0.5rem;
   }

    .offer_contents{
    font-size: 1.25rem;
   }

  .annotation{
    font-size: 0.75rem;
    color:#000;
    text-align: left;
   }
}