@charset "UTF-8";
html{
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
h1{
  font-size: 2em;
  margin: 0.67em 0;
}
hr{
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
main{
  display: block;
}
pre{
  font-family: monospace, monospace;
  font-size: 1em;
}
a{
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}
abbr[title]{
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong{
  font-weight: bolder;
}
code,
kbd,
samp{
  font-family: monospace, monospace;
  font-size: 1em;
}
dfn{
  font-style: italic;
}
small{
  font-size: 80%;
}
img{
  border-style: none;
}
svg:not(:root){
  overflow: hidden;
}
button,
input,
optgroup,
select,
textarea{
  margin: 0;
}
button{
  overflow: visible;
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"]{
  -webkit-appearance: button;
}
html [type="button"]{
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring{
  outline: 1px dotted ButtonText;
}
fieldset{
  padding: 0.35em 0.75em 0.625em;
}
input{
  overflow: visible;
}
legend{
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress{
  display: inline-block;
  vertical-align: baseline;
}
select{
  text-transform: none;
}
textarea{
  overflow: auto;
}
[type="checkbox"],
[type="radio"]{
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{
  height: auto;
}
[type="search"]{
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration{
  -webkit-appearance: none;
}
::-webkit-file-upload-button{
  -webkit-appearance: button;
  font: inherit;
}
details{
  display: block;
}
summary{
  display: list-item;
}
template{
  display: none;
}
[hidden]{
  display: none;
}
@font-face {
  font-family: 'MyYuGothic';
  src: local("游ゴシック Medium"), local("YuGothic-Medium"), local("Yu Gothic Medium"), local("游ゴシック体"), local("YuGothic"), local("YuGothic-Regular");
}

@font-face {
  font-family: 'MyYuGothic';
  font-weight: bold;
  src: local("游ゴシック Bold"), local("YuGothic-Bold"), local("Yu Gothic"), local("游ゴシック体"), local("YuGothic");
}

@font-face {
  font-family: Lato;
  src: url("../fonts/Lato/Lato-Regular.ttf") format("truetype");
}

@font-face {
  font-family: Lato;
  font-weight: bold;
  src: url("../fonts/Lato/Lato-Bold.ttf") format("truetype");
}

/**
 * Base Style
 */
*,
*:after,
*:before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

html.is-gnav-show {
  overflow-y: hidden;
}

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin: 0;
  min-width: 1240px;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #000;
}

@media screen and (max-width: 767px) {
  body {
    min-width: inherit;
  }
}

a {
  color: #000;
  text-decoration: none;
}

@media screen and (min-width: 768px) {
  a:hover {
    text-decoration: none;
    opacity: 0.7;
  }
}

a:active {
  text-decoration: none;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

.text-feature-spacing {
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
}

/**
 * Layout Style
 */
/**=========================================
* .l-content-wrap
* SPの.gnav開閉時のスライド動作用
=========================================*/
.l-content-wrap {
  position: relative;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center top;
  z-index: 2;
  min-width: 1240px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .l-content-wrap {
    background-size: 655px auto;
    min-width: inherit;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@media screen and (max-width: 767px) {
  .l-content-wrap.is-show {
    -webkit-transform: translate3d(-305px, 0, 0);
            transform: translate3d(-305px, 0, 0);
  }
  .l-content-wrap.is-show:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    box-shadow: 4px 0 2px -2px rgba(0, 0, 0, 0.2);
  }
}

.l-content-wrap > .inner {
  overflow: hidden;
  min-height: 100vh;
}

.l-content-wrap--business {
  background-image: url(../img/business/body_bg.jpg);
}

@media screen and (max-width: 767px) {
  .l-content-wrap--business {
    background-image: url(../img/business/body_bg_sp.jpg);
  }
}

.l-content-wrap--company {
  background-image: url(../img/company/body_bg.jpg);
}

@media screen and (max-width: 767px) {
  .l-content-wrap--company {
    background-image: url(../img/company/body_bg_sp.jpg);
  }
}

.l-content-wrap--culture {
  background-image: url(../img/culture/body_bg.jpg);
}

@media screen and (max-width: 767px) {
  .l-content-wrap--culture {
    background-image: url(../img/culture/body_bg_sp.jpg);
  }
}

.l-content-wrap--information {
  background-image: url(../img/information/body_bg.jpg);
}

@media screen and (max-width: 767px) {
  .l-content-wrap--information {
    background-image: url(../img/information/body_bg_sp.jpg);
  }
}

.l-content-wrap--career {
  background-image: url(../img/career/body_bg.jpg);
}

@media screen and (max-width: 767px) {
  .l-content-wrap--career {
    background-image: url(../img/career/body_bg_sp.jpg);
  }
}

.l-content-wrap--member-index {
  background-image: url(../img/member/index_bg.jpg);
}

@media screen and (max-width: 767px) {
  .l-content-wrap--member-index {
    background-image: url(../img/member/index_bg_sp.jpg);
  }
}

.l-content-wrap--mecha_chemi {
  background-image: url(../img/mecha_chemi/body_bg.jpg);
}

@media screen and (max-width: 767px) {
  .l-content-wrap--mecha_chemi {
    background-image: url(../img/mecha_chemi/body_bg_sp.jpg);
    background-size: auto 283px;
  }
}

/**=========================================
* .l-container
=========================================*/
.l-container, .member-flow-inner {
  margin: 0 auto;
  padding: 0;
  width: 1240px;
}

.l-container:after, .member-flow-inner:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 767px) {
  .l-container, .member-flow-inner {
    padding: 0;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .cat-top .l-container, .cat-top .member-flow-inner {
    padding: 0 10px;
  }
}

/**=========================================
* .l-main
=========================================*/
.l-main {
  padding-bottom: 300px;
}

@media screen and (max-width: 767px) {
  .l-main {
    padding-bottom: 352px;
  }
}

.cat-top .l-main {
  padding-bottom: 327px;
}

@media screen and (max-width: 767px) {
  .cat-top .l-main {
    padding-bottom: 191px;
  }
}

/**=========================================
* .l-row-2
* 2カラム
=========================================*/
.l-row-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 -40px;
}

@media screen and (max-width: 767px) {
  .l-row-2 {
    display: block;
    margin: 0;
  }
}

.l-row-2.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.l-row-2 .l-col-1 {
  padding: 80px 40px 0;
  width: 50%;
}

@media screen and (max-width: 767px) {
  .l-row-2 .l-col-1 {
    padding: 40px 0 0;
    width: 100%;
  }
}

.l-row-2 .l-col-1:first-child {
  padding-top: 0;
}

.l-row-2 .l-col-1:nth-child(2) {
  padding-top: 0;
}

@media screen and (max-width: 767px) {
  .l-row-2 .l-col-1:nth-child(2) {
    padding-top: 40px;
  }
}

/**=========================================
* .l-row-3
* 3カラム
=========================================*/
.l-row-3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 -40px;
}

@media screen and (max-width: 767px) {
  .l-row-3 {
    display: block;
    margin: 0;
  }
}

.l-row-3.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.l-row-3 .l-col-1 {
  padding: 80px 40px 0;
  width: 33.333%;
}

@media screen and (max-width: 767px) {
  .l-row-3 .l-col-1 {
    padding: 40px 0 0;
    width: 100%;
  }
}

.l-row-3 .l-col-1:first-child {
  padding-top: 0;
}

.l-row-3 .l-col-1:nth-child(2), .l-row-3 .l-col-1:nth-child(3) {
  padding-top: 0;
}

@media screen and (max-width: 767px) {
  .l-row-3 .l-col-1:nth-child(2), .l-row-3 .l-col-1:nth-child(3) {
    padding-top: 40px;
  }
}

.l-row-3 .l-col-2 {
  padding: 80px 40px 0;
  width: 66.666%;
}

@media screen and (max-width: 767px) {
  .l-row-3 .l-col-2 {
    padding: 40px 0 0;
    width: 100%;
  }
}

.l-row-3 .l-col-2:first-child {
  padding-top: 0;
}

.l-row-3 .l-col-2:nth-child(2) {
  padding-top: 0;
}

@media screen and (max-width: 767px) {
  .l-row-3 .l-col-2:nth-child(2) {
    padding-top: 40px;
  }
}

/**
 * jquery.mCustomScrollbar.min.css
 * globalページのスクロールバープラグインのCSS
**/
.mCustomScrollbar {
  -ms-touch-action: pinch-zoom;
  touch-action: pinch-zoom;
}

.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action {
  -ms-touch-action: auto;
  touch-action: auto;
}

.mCustomScrollBox {
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  outline: 0;
  direction: ltr;
}

.mCSB_container {
  overflow: hidden;
  width: auto;
  height: auto;
}

.mCSB_inside > .mCSB_container {
  margin-right: 30px;
}

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-left: 30px;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-left: 0;
}

.mCSB_scrollTools {
  position: absolute;
  width: 16px;
  height: auto;
  left: auto;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: .75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}

.mCSB_outside + .mCSB_scrollTools {
  right: -26px;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  right: auto;
  left: 0;
}

.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  left: -26px;
}

.mCSB_scrollTools .mCSB_draggerContainer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto;
}

.mCSB_scrollTools a + .mCSB_draggerContainer {
  margin: 20px 0;
}

.mCSB_scrollTools .mCSB_draggerRail {
  width: 2px;
  height: 100%;
  margin: 0 auto;
  border-radius: 16px;
}

.mCSB_scrollTools .mCSB_dragger {
  cursor: pointer;
  width: 100%;
  height: 30px;
  z-index: 1;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  position: relative;
  width: 4px;
  height: 100%;
  margin: 0 auto;
  border-radius: 16px;
  text-align: center;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 12px;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 8px;
}

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonUp {
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools .mCSB_buttonDown {
  bottom: 0;
}

.mCSB_horizontal.mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-bottom: 30px;
}

.mCSB_horizontal.mCSB_outside > .mCSB_container {
  min-height: 100%;
}

.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  width: auto;
  height: 16px;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
}

.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: -26px;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
  margin: 0 20px;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 2px;
  margin: 7px 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 30px;
  height: 100%;
  left: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 4px;
  margin: 6px auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 12px;
  margin: 2px auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 8px;
  margin: 4px 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  display: block;
  position: absolute;
  width: 20px;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {
  left: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  right: 0;
}

.mCSB_container_wrapper {
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-right: 30px;
  margin-bottom: 30px;
}

.mCSB_container_wrapper > .mCSB_container {
  padding-right: 30px;
  padding-bottom: 30px;
  box-sizing: border-box;
}

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 20px;
}

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 20px;
}

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 0;
}

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 0;
}

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 20px;
}

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 0;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper {
  margin-right: 0;
  margin-left: 30px;
}

.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container {
  padding-right: 0;
}

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container {
  padding-bottom: 0;
}

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
  margin-left: 0;
}

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
}

.mCSB_scrollTools, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  -webkit-transition: opacity .2s ease-in-out,background-color .2s ease-in-out;
  transition: opacity .2s ease-in-out,background-color .2s ease-in-out;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar {
  -webkit-transition: width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;
  transition: width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;
}

.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 0;
  filter: "alpha(opacity=0)";
  -ms-filter: "alpha(opacity=0)";
}

.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag {
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)";
}

.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4);
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)";
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
  filter: "alpha(opacity=85)";
  -ms-filter: "alpha(opacity=85)";
}

.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)";
}

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp {
  background-image: url(mCSB_buttons.png);
  background-repeat: no-repeat;
  opacity: .4;
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)";
}

.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 0;
}

.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -20px;
}

.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -40px;
}

.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -56px;
}

.mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover, .mCSB_scrollTools .mCSB_buttonUp:hover {
  opacity: .75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}

.mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active, .mCSB_scrollTools .mCSB_buttonUp:active {
  opacity: .9;
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)";
}

.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0;
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px;
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px;
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 4px;
  margin: 6px auto;
}

.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px 0;
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -20px;
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -40px;
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -56px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px 0;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -20px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -40px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -56px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 4px;
  margin: 6px 0;
}

.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 6px;
  margin: 5px auto;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -16px 0;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -16px -20px;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -20px -40px;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -20px -56px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -96px 0;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -96px -20px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -40px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -56px;
}

.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 2px;
}

.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
}

.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 2px;
  margin: 7px auto;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded.mCSB_scrollTools .mCSB_dragger {
  height: 14px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 14px;
  margin: 0 1px;
}

.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 14px;
}

.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 14px;
  margin: 1px 0;
}

.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 16px;
  height: 16px;
  margin: -1px 0;
}

.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 4px;
}

.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 16px;
  width: 16px;
  margin: 0 -1px;
}

.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 4px;
  margin: 6px 0;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 -72px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -92px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -112px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -128px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px -72px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -92px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -112px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -128px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail {
  width: 4px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  background-color: transparent;
  background-position: center;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);
  background-repeat: repeat-y;
  opacity: .3;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}

.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  height: 4px;
  margin: 6px 0;
  background-repeat: repeat-x;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -16px -72px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -16px -92px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -20px -112px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -20px -128px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=);
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -96px -72px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -96px -92px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -112px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -128px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-repeat: repeat-y;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  background-repeat: repeat-x;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
}

.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger {
  height: 70px;
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 70px;
}

.mCS-3d-dark.mCSB_scrollTools, .mCS-3d.mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
  border-radius: 16px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
  width: 8px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2);
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #555;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 8px;
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 8px;
  margin: 4px 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2);
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 8px;
  margin: 4px auto;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1);
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

.mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}

.mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
  border-radius: 7px;
}

.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical {
  right: 1px;
}

.mCS-3d-thick-dark.mCSB_scrollTools_vertical, .mCS-3d-thick.mCSB_scrollTools_vertical {
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5);
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal, .mCS-3d-thick.mCSB_scrollTools_horizontal {
  bottom: 1px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  border-radius: 5px;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
  width: 12px;
  margin: 2px;
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  height: 12px;
  width: auto;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #555;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1);
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

.mCS-3d-thick-dark.mCSB_scrollTools {
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #777;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer {
  background-color: #fff;
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
  right: 0;
  margin: 12px 0;
}

.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: 0;
  margin: 0 12px;
}

.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
  left: 0;
  right: auto;
}

.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger {
  height: 50px;
}

.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 50px;
}

.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  filter: "alpha(opacity=20)";
  -ms-filter: "alpha(opacity=20)";
}

.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
  filter: "alpha(opacity=50)";
  -ms-filter: "alpha(opacity=50)";
}

.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
  filter: "alpha(opacity=20)";
  -ms-filter: "alpha(opacity=20)";
}

.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  filter: "alpha(opacity=50)";
  -ms-filter: "alpha(opacity=50)";
}

.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail {
  width: 6px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
}

.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 6px;
  margin: 5px 0;
}

.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 12px;
}

.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 12px;
  margin: 2px 0;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools .mCSB_draggerRail {
  width: 12px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  margin: 3px 5px;
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 6px;
  margin: 5px 3px;
  position: absolute;
  width: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 12px;
  margin: 2px 0;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail {
  border-color: #000;
  border-color: rgba(0, 0, 0, 0.2);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.6);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

/**=========================================
* scrollbar
* mCustomScrollbarのカスタマイズ
=========================================*/
.container--custom-scrollbar {
  padding: 40px;
}

.js-scrollbar-content {
  height: 250px;
}

@media screen and (max-width: 767px) {
  .js-scrollbar-content {
    height: 230px;
  }
}

.scrollbar-content--mytheme--a * {
  opacity: 1 !important;
  -webkit-filter: none !important;
          filter: none !important;
  -ms-filter: none !important;
}

.scrollbar-content--mytheme--a .mCS-my-theme.mCSB_scrollTools {
  width: 10px;
}

.scrollbar-content--mytheme--a .mCS-my-theme.mCSB_scrollTools .mCSB_draggerContainer {
  margin-bottom: 1px;
  padding-bottom: 4px;
}

.scrollbar-content--mytheme--a .mCS-my-theme.mCSB_scrollTools .mCSB_dragger {
  background-color: transparent !important;
  margin: 0 auto;
  padding: 0 0;
  height: 30% !important;
}

.scrollbar-content--mytheme--a .mCS-my-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff !important;
  width: 100%;
  height: 100%;
}

.scrollbar-content--mytheme--a .mCS-my-theme.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
  border-left: 1px solid #cdcdcd !important;
}

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #444444;
  opacity: 0.9;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  cursor: default;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  cursor: default;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -ms-user-select: none;
      user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

/**
 * Icon Style
**/
/**=========================================
* icon
=========================================*/
.icon {
  display: inline-block;
  line-height: 1;
  font-size: 0;
}

.icon:before {
  font-size: 1.6rem;
}

.icon-circle:before {
  content: "";
  display: block;
  background-color: #a8cb0c;
  border-radius: 100%;
  width: 8px;
  height: 8px;
}

.icon-toggle-arrow {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #333333;
  width: 70px;
  height: 70px;
  margin-top: 0;
  text-align: center;
}

.icon-toggle-arrow > span {
  position: relative;
  display: inline-block;
  width: 33px;
  height: 70px;
}

.icon-toggle-arrow > span:before, .icon-toggle-arrow > span:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  background-color: #fff;
  margin-top: -12px;
  height: 3px;
  width: 26px;
  -webkit-transition: .15s;
  transition: .15s;
}

.icon-toggle-arrow > span:before {
  left: 0;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.icon-toggle-arrow > span:after {
  right: 0;
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

@media screen and (min-width: 768px) {
  .js-toggle:hover .icon-toggle-arrow > span:before, .js-toggle:hover .icon-toggle-arrow > span:after {
    margin-top: -6px;
  }
}

.js-toggle.is-toggle-button-active .icon-toggle-arrow > span:before, .js-toggle.is-toggle-button-active .icon-toggle-arrow > span:after {
  margin-top: -20px;
  width: 50px;
}

@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont.eot");
  src: url("../fonts/iconfont.eot?#iefix") format("eot"), url("../fonts/iconfont.woff2") format("woff2"), url("../fonts/iconfont.woff") format("woff"), url("../fonts/iconfont.ttf") format("truetype");
}

.icon-arrow-1:before, .icon-arrow-2:before, .icon-arrow-3:before, .icon-arrow-4:before, .icon-blank:before, .icon-entry:before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

.icon-arrow-1:before {
  content: "";
}

.icon-arrow-2:before {
  content: "";
}

.icon-arrow-3:before {
  content: "";
}

.icon-arrow-4:before {
  content: "";
}

.icon-blank:before {
  content: "";
}

.icon-entry:before {
  content: "";
}

/**
 * Title Style
**/
/**=========================================
* m-page-title
=========================================*/
.m-page-title {
  margin: 0;
  padding-top: 130px;
  padding-bottom: 60px;
  border-bottom: 2px solid rgba(168, 203, 12, 0.8);
  min-height: 264px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .m-page-title {
    padding-top: 175px;
    padding-bottom: 29px;
    min-height: inherit;
  }
}

.m-page-title > h1 {
  margin: 0;
  text-align: center;
  line-height: 1;
}

.m-page-title .text-eng {
  display: block;
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  margin-top: -3px;
  font-size: 4.8rem;
  line-height: 1;
  color: #a8cb0c;
  font-weight: normal;
  letter-spacing: 2px;
  vertical-align: top;
}

@media screen and (max-width: 767px) {
  .m-page-title .text-eng {
    font-size: 3rem;
    letter-spacing: 2px;
  }
}

.m-page-title .text {
  display: block;
  margin-top: 14px;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .m-page-title .text {
    margin-top: 15px;
    font-size: 1.4rem;
  }
}

.m-page-title-text {
  margin: 28px 0 -8px;
  font-size: 1.4rem;
  line-height: 2.14286;
  letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
  .m-page-title-text {
    margin: 21.5px 28px -6.5px;
    line-height: 1.92857;
    text-align: left;
    letter-spacing: 0;
  }
}

.m-page-title--member {
  padding-top: 224px;
  padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
  .m-page-title--member {
    padding-top: 175px;
    padding-bottom: 25px;
  }
}

.m-page-title--member .text-eng {
  font-size: 5.8rem;
}

@media screen and (max-width: 767px) {
  .m-page-title--member .text-eng {
    font-size: 3rem;
  }
}

.m-page-title--mecha_chemi .text-eng {
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
}

@media screen and (max-width: 767px) {
  .m-page-title--mecha_chemi .text-eng {
    font-size: 2.6rem;
  }
}

@media screen and (max-width: 767px) {
  .m-page-title--mecha_chemi .text {
    font-size: 1.3rem;
    letter-spacing: 0;
  }
}

/**=========================================
* m-title-lv1
=========================================*/
.m-title-lv1 {
  position: relative;
  margin: -5.4px 0;
  padding-bottom: 0;
  font-size: 3.6rem;
  line-height: 1.3;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .m-title-lv1 {
    margin: -10.8px 0;
    font-size: 1.9rem;
    line-height: 1.6;
  }
}

.m-title-lv1:first-child {
  margin-top: 0;
}

/**=========================================
* m-title-eng
=========================================*/
.m-title-eng {
  position: relative;
  margin: -3.9px 0;
  padding-bottom: 0;
  font-size: 2.6rem;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 3px;
}

@media screen and (max-width: 767px) {
  .m-title-eng {
    margin: -2.85px 0;
    font-size: 1.9rem;
  }
}

.m-title-eng:first-child {
  margin-top: 0;
}

/**=========================================
* m-title-lv2
* 左右に括弧があるタイトル
=========================================*/
.m-title-lv2 {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  margin: 0;
  padding: 6.5px 0;
  width: 100%;
  font-size: 2.4rem;
  line-height: 1.29167;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .m-title-lv2 {
    padding: 11px 10px;
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

.m-title-lv2:first-child {
  margin-top: 0;
}

.m-title-lv2 .text {
  padding: 0 30px 0 32px;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .m-title-lv2 .text {
    padding: 0 8px 0 12px;
  }
}

.m-title-lv2 .kazari {
  display: block;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.m-title-lv2 .kazari:before {
  content: "";
  display: block;
  position: absolute;
  background-color: #cdcdcd;
  height: 1px;
  top: 50%;
  left: 0;
  right: 14px;
}

.m-title-lv2 .kazari .square {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: scaleX(0.7);
          transform: scaleX(0.7);
}

@media screen and (max-width: 767px) {
  .m-title-lv2 .kazari .square {
    -webkit-transform: scaleX(0.6);
            transform: scaleX(0.6);
  }
}

.m-title-lv2 .kazari .square:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: -10px;
  margin-top: -13px;
  border-top: 1px solid #cdcdcd;
  border-left: 1px solid #cdcdcd;
  width: 26px;
  height: 26px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

@media screen and (max-width: 767px) {
  .m-title-lv2 .kazari .square:after {
    right: -35px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
  }
}

.m-title-lv2 .kazari--right {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.m-title-lv2.white {
  color: #fff;
}

.m-title-lv2.white .kazari:before {
  background-color: #fff;
}

.m-title-lv2.white .square:after {
  border-top-color: #fff;
  border-left-color: #fff;
}

/**=========================================
* m-title-lv3
=========================================*/
.m-title-lv3 {
  margin: -6px 0;
  font-size: 1.8rem;
  line-height: 1.66667;
}

@media screen and (max-width: 767px) {
  .m-title-lv3 {
    margin: -4px 0;
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

/**=========================================
* m-title-lv4
* 紺色背景
=========================================*/
.m-title-lv4 {
  background: #1f3143;
  margin: 80px 0 0 0;
  padding: 4px 10px;
  font-size: 1.8rem;
  line-height: 1.66667;
  text-align: center;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width: 767px) {
  .m-title-lv4 {
    margin-top: 40px;
    padding: 4.66667px 10px;
    font-size: 1.6rem;
  }
}

.m-title-lv4:first-child {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .m-title-lv4:first-child {
    margin-top: 0;
  }
}

/**=========================================
* m-title-orange
* オレンジ色
=========================================*/
.m-title-orange {
  margin: -7px 0;
  font-size: 1.8rem;
  line-height: 1.77778;
  color: #ff6600;
}

@media screen and (max-width: 767px) {
  .m-title-orange {
    padding: 6px 0;
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

/**=========================================
* m-title-hex
* 六角形背景のタイトル
=========================================*/
.m-title-hex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  padding: 20px;
  max-width: 275px;
  width: 100%;
  font-size: 1.8rem;
  line-height: 1.72222;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .m-title-hex {
    margin: 0 auto;
    width: 230px;
    height: 211px;
    font-size: 1.6rem;
  }
}

.m-title-hex:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: url(../img/common/hex_green.png) no-repeat center center;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}

.m-title-hex span {
  display: inline-block;
  position: relative;
  z-index: 2;
}

/**=========================================
* m-color-section-title
* 色付きセクションのタイトル
=========================================*/
.m-color-section-title {
  position: absolute;
  top: -38px;
  left: 50%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin: 0 0 0 -160px;
  padding: 23px 0 0 0;
  width: 320px;
  font-size: 2.4rem;
  line-height: 1.5;
  text-align: center;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .m-color-section-title {
    top: -25px;
    margin-left: -110px;
    padding-top: 18px;
    width: 220px;
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

.m-color-section--green .m-color-section-title {
  background-image: url(../img/common/color_ttl_bg_green.png);
}

.m-color-section--orange .m-color-section-title {
  background-image: url(../img/common/color_ttl_bg_orange.png);
}

/**
 * Text Style
 */
/**=========================================
* テキスト設定
=========================================*/
.strong {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text-green {
  color: #a8cb0c;
}

.text-orange {
  color: #ff6600;
}

.text-red {
  color: #cc0000;
}

.text-blue {
  color: #0a54b6;
}

.text-blue-dark {
  color: #4c5a69;
}

/**=========================================
* m-text-lv1
* 本文テキスト 15px
=========================================*/
.m-text-lv1, .member-profile-text {
  position: relative;
  margin: 21.5px 0 -8.5px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 2.13333;
  letter-spacing: 0.5px;
}

@media screen and (max-width: 767px) {
  .m-text-lv1, .member-profile-text {
    margin: 18.5px 0 -6.5px;
    font-size: 1.4rem;
    line-height: 1.92857;
  }
}

.m-text-lv1:first-child, .member-profile-text:first-child {
  margin-top: -6.5px;
}

@media screen and (max-width: 767px) {
  .m-text-lv1:first-child, .member-profile-text:first-child {
    margin-top: -6.5px;
    margin-bottom: -6.5px;
  }
}

/**=========================================
* m-text-lv2
* 本文テキスト　13px
=========================================*/
.m-text-lv2 {
  position: relative;
  margin: 10px 0 -5px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1.76923;
  letter-spacing: 0.5px;
}

@media screen and (max-width: 767px) {
  .m-text-lv2 {
    letter-spacing: 0;
  }
}

.m-text-lv2:first-child {
  margin-top: -3.46667px;
}

/**=========================================
* m-text-link
* 本文テキスト　13px
=========================================*/
.m-text-link {
  color: #ff6600;
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .m-text-link:hover {
    text-decoration: none;
  }
}

.m-text-link .icon-blank {
  margin: 0 3px;
  color: #ff6600;
}

.m-text-link .icon-blank:before {
  font-size: 1.4rem;
}

/**
* Form Style
*/
/**=========================================
* form
* [member] 社員一覧選択で使用
=========================================*/
form label.checkbox, form label.checkbox-text {
  position: relative;
  z-index: 5;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
}

form label.checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #B3B3B3;
  background: #fff;
}

@media screen and (max-width: 767px) {
  form label.checkbox {
    width: 16px;
    height: 16px;
  }
}

form label.checkbox-text {
  padding-left: calc(20px + 5px);
  line-height: 20px;
}

@media screen and (max-width: 767px) {
  form label.checkbox-text {
    padding-left: calc(16px + 5px);
    line-height: 16px;
  }
}

form label.checkbox-text:before, form label.checkbox:after, form label.checkbox-text:after {
  content: '';
  position: absolute;
  box-sizing: border-box;
}

form label.checkbox:after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: calc(50% - (((17px / 12 ) * 5) / 2));
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: calc(((17px / 12 ) * 5) * -1) auto auto;
  border-right: 3px solid #ff6600;
  border-bottom: 3px solid #ff6600;
  display: block;
  width: calc(((17px / 12 ) * 5));
  height: 17px;
  z-index: 1;
}

form label.checkbox-text:before {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  left: 0px;
  top: 0;
  border: 1px solid #B3B3B3;
  z-index: 3;
}

@media screen and (max-width: 767px) {
  form label.checkbox-text:before {
    width: 16px;
    height: 16px;
  }
}

form label.checkbox-text:after {
  display: block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-right: 3px solid #ff6600;
  border-bottom: 3px solid #ff6600;
  top: calc(50% - (((17px / 12 ) * 5) / 2));
  left: calc((20px / 2) - (((17px / 12 ) * 5) / 2));
  z-index: 1;
  margin-top: calc(((17px / 12 ) * 5) * -1);
  width: calc(((17px / 12 ) * 5));
  height: 17px;
}

@media screen and (max-width: 767px) {
  form label.checkbox-text:after {
    left: calc((16px / 2) - (((13px / 12 ) * 5) / 2));
    margin-top: calc(((14px / 12 ) * 5) * -1);
    width: calc(((14px / 12 ) * 5));
    height: 14px;
  }
}

form input[type="checkbox"] {
  outline: none;
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  position: absolute;
  left: calc(20px * -1);
  z-index: 2;
  box-shadow: 20px 0px #FFF;
  margin: 0px;
  width: 20px;
  height: 20px;
  outline: none;
  padding: 0;
}

@media screen and (max-width: 767px) {
  form input[type="checkbox"] {
    left: calc(16px * -1);
    box-shadow: 16px 0px #FFF;
    width: 16px;
    height: 16px;
  }
}

form input[type="checkbox"]:checked {
  box-shadow: none;
}

form input[type="checkbox"]:checked:focus {
  opacity: 0.1;
}

form input[type="checkbox"]:focus {
  background-color: #fff;
}

form input[type="checkbox"] + label {
  cursor: pointer;
  line-height: 1.6;
}

form .checkbox-text input[type="checkbox"] {
  display: block;
}

/**
* Table Style
*/
/*==================================================
* responsive tables
==================================================*/
.js-table-wrap {
  position: relative;
  width: 100%;
}

.js-table-wrap > .table-wrap-inner {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: auto;
}

.js-table-wrap > .table-wrap-inner::-webkit-scrollbar {
  height: 5px;
}

.js-table-wrap > .table-wrap-inner::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.js-table-wrap > .table-wrap-inner::-webkit-scrollbar-thumb {
  background: #bcbcbc;
}

.js-table-wrap table {
  table-layout: fixed;
  margin-bottom: 0;
  border-spacing: 0;
}

.js-table-wrap table td {
  border: none;
  border-width: 0;
  padding: 0;
  vertical-align: top;
}

.js-table-wrap table td img {
  vertical-align: top;
}

/**=========================================
* m-table
=========================================*/
.m-table {
  table-layout: fixed;
  border-spacing: 0;
  margin: 60px 0 0 0;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .m-table {
    margin-top: 20px;
  }
}

.m-table:first-child {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .m-table > tbody {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .m-table > tbody > tr {
    display: block;
    width: 100%;
  }
}

.m-table > tbody > tr:last-child th,
.m-table > tbody > tr:last-child td {
  border-bottom: none;
}

.m-table > tbody > tr > th,
.m-table > tbody > tr > td {
  position: relative;
  border-bottom: 1px solid #cdcdcd;
  padding: 30px;
  font-weight: normal;
  text-align: left;
  word-break: break-all;
  vertical-align: top;
  font-size: 1.6rem;
  line-height: 2;
}

@media screen and (max-width: 767px) {
  .m-table > tbody > tr > th,
  .m-table > tbody > tr > td {
    display: block;
    font-size: 1.3rem;
    line-height: 1;
  }
}

.m-table > tbody > tr > th > .text,
.m-table > tbody > tr > td > .text {
  margin: 15.5px 0 -8.5px;
  font-size: 1.5rem;
  line-height: 2.13333;
}

@media screen and (max-width: 767px) {
  .m-table > tbody > tr > th > .text,
  .m-table > tbody > tr > td > .text {
    margin: -6.5 0;
    font-size: 1.3rem;
    line-height: 2;
  }
}

.m-table > tbody > tr > th > .text.small,
.m-table > tbody > tr > td > .text.small {
  margin: 10.5px 0 -9.5px;
  font-size: 1.3rem;
}

.m-table > tbody > tr > th > .text:first-child,
.m-table > tbody > tr > td > .text:first-child {
  margin-top: -8.5px;
}

.m-table > tbody > tr > th {
  background-color: #4c5a69;
  width: 142px;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .m-table > tbody > tr > th {
    border-bottom: none;
    padding: 13px 28px;
    width: 100%;
    text-align: left;
  }
}

.m-table > tbody > tr > td {
  background-color: #f6f6f6;
}

@media screen and (max-width: 767px) {
  .m-table > tbody > tr > td {
    padding: 20px 28px;
  }
}

/**=========================================
* m-table-lv2
=========================================*/
.m-table-lv2 {
  table-layout: fixed;
  border-spacing: 0;
  margin: 30px 0 0 0;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .m-table-lv2 {
    margin-top: 15px;
  }
}

.m-table-lv2:first-child {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .m-table-lv2 > tbody {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .m-table-lv2 > tbody > tr {
    display: table;
    width: 100%;
  }
}

.m-table-lv2 > tbody > tr:first-child th,
.m-table-lv2 > tbody > tr:first-child td {
  padding-top: 0;
}

.m-table-lv2 > tbody > tr > th,
.m-table-lv2 > tbody > tr > td {
  padding: 24px 0 0;
  vertical-align: top;
  font-weight: normal;
}

.m-table-lv2 > tbody > tr > th > .text,
.m-table-lv2 > tbody > tr > td > .text {
  margin: -8.5px 0;
  font-size: 1.5rem;
  line-height: 2.13333;
}

@media screen and (max-width: 767px) {
  .m-table-lv2 > tbody > tr > th > .text,
  .m-table-lv2 > tbody > tr > td > .text {
    margin: -6.5 0;
    font-size: 1.3rem;
    line-height: 2;
  }
}

.m-table-lv2 > tbody > tr > th {
  width: 68px;
}

@media screen and (max-width: 767px) {
  .m-table-lv2 > tbody > tr > th {
    width: 55px;
  }
}

/**
 * Block Style
**/
/**=========================================
* m-anchor-content
* ページ内リンク位置調整（ヘッダーのfixed被り対策）
=========================================*/
.m-anchor-content {
  display: block;
  margin-top: -48px;
  padding-top: 48px;
}

@media screen and (max-width: 767px) {
  .m-anchor-content {
    margin-top: -54px;
    padding-top: 54px;
  }
}

/**=========================================
* js-show-animate
* フレームインした際に下からフェードインするコンテンツ
=========================================*/
.js-show-animate {
  position: relative;
  top: 30px;
  opacity: 0;
  -webkit-transition: opacity 1s, top .8s;
  transition: opacity 1s, top .8s;
}

.js-show-animate.is-show {
  top: 0;
  opacity: 1;
}

.js-tl-show .js-tl {
  position: relative;
  top: 30px;
  -webkit-transition: opacity 1s, top .8s;
  transition: opacity 1s, top .8s;
  opacity: 0;
}

.js-tl-show .js-tl.is-show {
  top: 0;
}

@media screen and (min-width: 768px) {
  .js-show-animate-pc {
    position: relative;
    top: 30px;
    opacity: 0;
    -webkit-transition: opacity 1s, top .8s;
    transition: opacity 1s, top .8s;
  }
  .js-show-animate-pc.is-show {
    top: 0;
    opacity: 1;
  }
  .js-tl-show-pc .js-tl {
    position: relative;
    top: 30px;
    -webkit-transition: opacity 1s, top .8s;
    transition: opacity 1s, top .8s;
    opacity: 0;
  }
  .js-tl-show-pc .js-tl.is-show {
    top: 0;
  }
}

@media screen and (max-width: 767px) {
  .js-show-animate-sp {
    position: relative;
    top: 30px;
    opacity: 0;
    -webkit-transition: opacity 1s, top .8s;
    transition: opacity 1s, top .8s;
  }
  .js-show-animate-sp.is-show {
    top: 0;
    opacity: 1;
  }
  .js-tl-show-sp .js-tl {
    position: relative;
    top: 30px;
    -webkit-transition: opacity 1s, top .8s;
    transition: opacity 1s, top .8s;
    opacity: 0;
  }
  .js-tl-show-sp .js-tl.is-show {
    top: 0;
  }
}

/**=========================================
* section format
=========================================*/
.m-section-lv2 {
  margin: 80px 0 0 0;
}

@media screen and (max-width: 767px) {
  .m-section-lv2 {
    margin-top: 50px;
  }
}

.m-section-lv2:first-child {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .m-section-lv2:first-child {
    margin-top: 0;
  }
}

.m-color-section {
  position: relative;
  margin: 120px 0 0 0;
  padding: 98px 0;
}

@media screen and (max-width: 767px) {
  .m-color-section {
    margin-top: 80px;
    padding-top: 35px;
    padding-bottom: 50px;
  }
}

.m-color-section:first-child {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .m-color-section:first-child {
    margin-top: 20px;
  }
}

.m-color-section--green {
  background: #b5d330;
}

.m-color-section--orange {
  background: #ff944c;
}

.m-page-body {
  background-color: rgba(255, 255, 255, 0.8);
  padding-top: 100px;
  padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .m-page-body {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.m-page-body--member-index {
  padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
  .m-page-body--member-index {
    padding-top: 20px;
  }
}

.m-body-lv1 {
  padding-top: 95px;
}

@media screen and (max-width: 767px) {
  .m-body-lv1 {
    padding-top: 50px;
  }
}

.m-body-lv2 {
  overflow: hidden;
  padding: 60px 100px 0;
}

@media screen and (max-width: 767px) {
  .m-body-lv2 {
    padding: 40px 40px 0;
  }
}

.m-body-lv3, .company-section {
  overflow: hidden;
  padding: 40px 0 0 0;
}

@media screen and (max-width: 767px) {
  .m-body-lv3, .company-section {
    padding-top: 20px;
  }
}

.m-lead {
  margin: 32px 0 -8px;
  padding: 0 100px;
  font-size: 1.4rem;
  line-height: 2.14286;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .m-lead {
    margin-top: 17px;
    padding: 0 40px;
    letter-spacing: 0;
  }
}

.m-lead:first-child {
  margin-top: -8px;
}

.m-image {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .m-image {
    margin-top: 15px;
  }
}

/**=========================================
* m-anchor-list
* ページ内リンクリスト
=========================================*/
.m-anchor-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style: none;
  margin: 80px 0 0;
  padding: 0;
  width: 100%;
  line-height: 1;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .m-anchor-list {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 37px;
    padding: 0 30px;
  }
}

.m-anchor-list:first-child {
  margin-top: -10px;
}

.m-anchor-list > li {
  position: relative;
  margin: 0 40px;
}

@media screen and (max-width: 767px) {
  .m-anchor-list > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 10px 0 0;
    padding: 0 10px;
    width: 50%;
    vertical-align: middle;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .m-anchor-list > li.col-2-sp {
    width: 100%;
  }
}

.m-anchor-list > li:before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #555;
  height: 1px;
}

@media screen and (max-width: 767px) {
  .m-anchor-list > li:before {
    right: 10px;
    left: 10px;
  }
}

.m-anchor-list > li a {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding: 4px 24px 7px 0;
  font-size: 1.6rem;
  line-height: 1.875;
  font-weight: bold;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .m-anchor-list > li a {
    padding: 12px 20px 12px 0;
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.27273;
    letter-spacing: 0;
    vertical-align: middle;
    text-align: center;
  }
}

.m-anchor-list > li a:hover {
  opacity: 1;
}

.m-anchor-list > li .icon {
  position: absolute;
  bottom: 11px;
  right: -2px;
  z-index: 1;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transition: .15s;
  transition: .15s;
}

@media screen and (max-width: 767px) {
  .m-anchor-list > li .icon {
    right: 10px;
  }
}

.m-anchor-list > li .icon:before {
  color: #ff6600;
  font-size: 2.2rem;
}

@media screen and (max-width: 767px) {
  .m-anchor-list > li .icon:before {
    font-size: 2rem;
  }
}

@media screen and (min-width: 768px) {
  .m-anchor-list > li:hover .icon {
    bottom: 6px;
  }
}

/**=========================================
* icon list
* アイコン付きリスト
=========================================*/
.m-icon-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-icon-list > li {
  position: relative;
  margin-top: 20px;
  padding: 0 0 0 1.4em;
  font-size: 1.5rem;
  line-height: 2.13333;
}

@media screen and (max-width: 767px) {
  .m-icon-list > li {
    font-size: 1.4rem;
  }
}

.m-icon-list > li:first-child {
  margin-top: 0;
}

.m-icon-list > li.indent-3 {
  padding-left: 3em;
}

.m-icon-list > li.indent-3 .icon-text {
  color: #1f3143;
}

.m-icon-list > li .icon {
  position: absolute;
  top: 12px;
  left: 0;
}

@media screen and (max-width: 767px) {
  .m-icon-list > li .icon {
    top: 10px;
  }
}

.m-icon-list > li .icon-text {
  position: absolute;
  top: 0px;
  left: 0;
}

@media screen and (max-width: 767px) {
  .m-icon-list > li .icon-text {
    top: 0;
  }
}

.m-icon-list.thin > li {
  margin-top: 7.5px;
  margin-bottom: -8.5px;
}

@media screen and (max-width: 767px) {
  .m-icon-list.thin > li {
    margin-top: 5.06667px;
  }
}

.m-icon-list.thin > li:first-child {
  margin-top: -8.5px;
}

.m-icon-list.bd > li {
  border-bottom: 1px solid #dcdcdc;
  padding-bottom: 20px;
}

/**=========================================
* m-icon-link
* アイコンリンク
=========================================*/
.m-icon-link, .gnav-link-home, .gnav-link > li {
  margin: 0;
}

@media screen and (max-width: 767px) {
  .m-icon-link, .gnav-link-home, .gnav-link > li {
    margin-top: 0;
  }
}

.m-icon-link:first-child, .gnav-link-home:first-child, .gnav-link > li:first-child {
  margin-top: -5.2px;
}

.m-icon-link > a, .gnav-link-home > a, .gnav-link > li > a,
.m-icon-link > span.no-link,
.gnav-link-home > span.no-link,
.gnav-link > li > span.no-link {
  position: relative;
  display: block;
  padding: 5.2px 0 5.2px 22px;
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .m-icon-link > a, .gnav-link-home > a, .gnav-link > li > a,
  .m-icon-link > span.no-link,
  .gnav-link-home > span.no-link,
  .gnav-link > li > span.no-link {
    padding: 14.2px 0 14.2px 25px;
    letter-spacing: 1px;
  }
}

.m-icon-link > a .icon, .gnav-link-home > a .icon, .gnav-link > li > a .icon,
.m-icon-link > span.no-link .icon,
.gnav-link-home > span.no-link .icon,
.gnav-link > li > span.no-link .icon {
  position: absolute;
  top: 7.2px;
  left: 0;
}

@media screen and (max-width: 767px) {
  .m-icon-link > a .icon, .gnav-link-home > a .icon, .gnav-link > li > a .icon,
  .m-icon-link > span.no-link .icon,
  .gnav-link-home > span.no-link .icon,
  .gnav-link > li > span.no-link .icon {
    top: 17.8px;
  }
}

.m-icon-link > a .icon:before, .gnav-link-home > a .icon:before, .gnav-link > li > a .icon:before,
.m-icon-link > span.no-link .icon:before,
.gnav-link-home > span.no-link .icon:before,
.gnav-link > li > span.no-link .icon:before {
  font-size: 1.2rem;
  color: #a8cb0c;
}


.m-icon-link > span.no-link,
.gnav-link-home > span.no-link,
.gnav-link > li > span.no-link {
  color: rgba(0, 0, 0, 0.4);
}

.m-icon-link .no-link-text, .gnav-link-home .no-link-text, .gnav-link > li .no-link-text {
  font-size: 1.3rem;
  line-height: 1.4;
  color: black;
}

@media screen and (max-width: 767px) {
  .m-icon-link .no-link-text, .gnav-link-home .no-link-text, .gnav-link > li .no-link-text {
    font-size: 1.3rem;
  }
}

/**
 * Nav Style
**/
/**=========================================
* .gnav
=========================================*/
@media screen and (max-width: 767px) {
  .gnav-cover {
    position: fixed;
    display: none;
    top: 0;
    bottom: 0;
    right: 490px;
    width: 100%;
    height: 100%;
    background: url(../img/common/bg_gnav_cover.png);
    z-index: 90;
    right: 305px;
  }
}

@media screen and (max-width: 767px) {
  .gnav-cover.is-show {
    display: block !important;
    z-index: 101;
  }
}

.gnav {
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  min-width: 1240px;
  height: 0;
  -webkit-transition: height .3s;
  transition: height .3s;
}

@media screen and (max-width: 767px) {
  .gnav {
    z-index: 1;
    overflow: auto;
    width: 305px;
    min-width: inherit;
    height: 100%;
    color: #fff;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
  }
}

.gnav:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  height: 100vh;
}

.gnav.is-show {
  -webkit-overflow-scrolling: touch;
  height: 100vh;
}

@media screen and (max-width: 767px) {
  .gnav.is-show {
    opacity: 1;
  }
}

.gnav.is-scroll {
  overflow-y: scroll;
}

.gnav.is-visible {
  display: block;
  left: inherit !important;
}

.gnav.is-hidden {
  display: none;
}

/**=========================================
* gnav-content
=========================================*/
.is-show .gnav-content {
  height: 100vh;
}

.gnav-content {
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-right: -15px;
  height: 100vh;
  position: relative;
  width: calc(100% + 15px);
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.8);
}

@media screen and (max-width: 767px) {
  .gnav-content {
    top: 0;
    z-index: auto;
    overflow: auto;
    padding-top: 0;
    width: 100%;
    min-width: inherit;
    height: 100%;
    color: #fff;
  }
}

.gnav-scroll-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  padding: 0 15px 0 0;
  width: 1240px;
  min-height: 100vh;
}

@media screen and (max-width: 767px) {
  .gnav-scroll-wrapper {
    display: block;
    padding: 0 13px 0 20px;
    width: 100%;
  }
}

.gnav-inner {
  position: relative;
  padding: 60px 0 70px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .gnav-inner {
    padding: 0 0 90px;
  }
}

.gnav-row-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  clear: both;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .gnav-row-4 {
    display: block;
    margin: 0;
  }
}

.gnav-col-1 {
  margin: 0;
  padding: 0 20px;
  width: 25%;
  list-style: none;
}

@media screen and (max-width: 767px) {
  .gnav-col-1 {
    position: relative;
    padding: 0;
    width: 100%;
  }
}

.gnav-link-home {
  margin: 0 0 0 20px;
}

@media screen and (max-width: 767px) {
  .gnav-link-home {
    margin-top: 15px;
    margin-left: 0;
  }
}

.gnav-link-home > a {
  display: inline-block;
}

.gnav-link-home > a .icon:before {
  color: #000;
}

.gnav-section {
  margin: 38px 0 0 0;
}

@media screen and (max-width: 767px) {
  .gnav-section {
    margin: 16px 0 0 0;
  }
}

.gnav-section-title {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.gnav-section-title > a {
  position: relative;
  display: block;
}

.gnav-section-title > a:after {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  border-top: 3px solid #a8cb0c;
  width: 100%;
  height: 60px;
}

@media screen and (max-width: 767px) {
  .gnav-section-title > a:after {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .gnav-section-title > a:hover {
    opacity: 1;
  }
}

.gnav-section-title span {
  display: block;
  padding-bottom: 7px;
  color: #a8cb0c;
  font-size: 1.4rem;
  line-height: 1.42857;
  letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
  .gnav-section-title span {
    border-bottom: 3px solid #a8cb0c;
    letter-spacing: 1px;
  }
}

.gnav-section-title--company > a:after {
  background-image: url(../img/common/gnav_ttl_company.jpg);
}

.gnav-section-title--business > a:after {
  background-image: url(../img/common/gnav_ttl_business.jpg);
}

.gnav-section-title--member > a:after {
  background-image: url(../img/common/gnav_ttl_member.jpg);
}

.gnav-section-title--mecha_chemi > a:after {
  background-image: url(../img/common/gnav_ttl_mecha_chemi.jpg);
}

.gnav-section-title--project > a:after {
  background-image: url(../img/common/gnav_ttl_project.jpg);
}

.gnav-section-title--career > a:after {
  background-image: url(../img/common/gnav_ttl_career.jpg);
}

.gnav-section-title--culture > a:after {
  background-image: url(../img/common/gnav_ttl_culture.jpg);
}

.gnav-section-title--recruit > a:after {
  background-image: url(../img/common/gnav_ttl_recruit.jpg);
}

.gnav-link {
  margin: 20px 0 0 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 767px) {
  .gnav-link {
    margin: 10px 0 0 0;
  }
}

/* メニューアイコン */
.icon-menu {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  width: 19px;
  height: 14px;
}

@media screen and (max-width: 767px) {
  .icon-menu {
    margin-right: 0;
    width: 22px;
    height: 17px;
  }
}

.icon-menu > span, .icon-menu:before, .icon-menu:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #a8cb0c;
  height: 2px;
  width: 19px;
  -webkit-transition: .25s ease-in;
  transition: .25s ease-in;
}

@media screen and (max-width: 767px) {
  .icon-menu > span, .icon-menu:before, .icon-menu:after {
    background-color: #000;
    border-radius: 6px;
    height: 2px;
    width: 22px;
  }
}

.icon-menu > span {
  margin-top: -1px;
  top: 50%;
}

.icon-menu:before {
  margin-top: 0px;
  top: 0px;
}

.icon-menu:after {
  margin-top: -2px;
  top: 100%;
}

/* 閉じるボタン */
.gnav-close-button {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 0px;
  right: 10px;
  z-index: 70;
  height: 60px;
  width: 60px;
}

@media screen and (max-width: 767px) {
  .gnav-close-button {
    position: fixed;
    top: 0;
    right: 0;
    height: 55px;
    width: 55px;
    z-index: 50;
  }
}

.gnav-close-button span, .gnav-close-button:before, .gnav-close-button:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #000;
  border-radius: 4px;
  height: 2px;
  width: 24px;
  -webkit-transition: .25s ease-in;
  transition: .25s ease-in;
}

@media screen and (max-width: 767px) {
  .gnav-close-button span, .gnav-close-button:before, .gnav-close-button:after {
    right: 2px;
    width: 27px;
  }
}

.gnav-close-button span {
  opacity: 0;
}

.gnav-close-button:before {
  top: 28px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

@media screen and (max-width: 767px) {
  .gnav-close-button:before {
    top: 24px;
  }
}

.gnav-close-button:after {
  top: 28px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

@media screen and (max-width: 767px) {
  .gnav-close-button:after {
    top: 24px;
  }
}

@media screen and (min-width: 768px) {
  .gnav-close-button:hover:before {
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
}

@media screen and (min-width: 768px) {
  .gnav-close-button:hover:after {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
}

.gnav-button--entry {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #444;
  margin-top: 15px;
  padding: 13px 0;
  width: 130px;
  color: #a8cb0c;
  -webkit-transition: .3s;
  transition: .3s;
}

@media screen and (min-width: 768px) {
  .gnav-button--entry {
    display: none;
  }
}

.gnav-button--entry.no-link {
  background: #ccc;
  color: rgba(255, 255, 255, 0.7);
}

.gnav-button--entry .icon {
  position: relative;
  top: 0px;
  margin-right: 5px;
  -webkit-transition: .3s;
  transition: .3s;
}

.gnav-button--entry .icon:before {
  font-size: 2.2rem;
}

.gnav-button--entry .text {
  position: relative;
  top: 0px;
  padding-top: 3px;
  height: 24px;
  -webkit-transition: .3s;
  transition: .3s;
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1.3rem;
  letter-spacing: 2px;
}

/**=========================================
* .path-nav
* ぱんくず
=========================================*/
.path-nav {
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px 20px 5px 10px;
  max-width: 100%;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .path-nav {
    display: none;
  }
}

.path-nav > ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.path-nav > ol > li {
  position: relative;
  display: inline-block;
  padding: 0 10px 0 20px;
}

.path-nav > ol > li > a,
.path-nav > ol > li > span {
  font-size: 1.3rem;
}

@media screen and (min-width: 768px) {
  .path-nav > ol > li > a:hover {
    opacity: 1;
    text-decoration: underline;
  }
}

.path-nav > ol > li:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 5px;
  margin-left: -3px;
  border-top: 1px solid #555;
  border-right: 1px solid #555;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.path-nav > ol > li:first-child:before {
  display: none;
}

/**=========================================
* .local-nav
* 緑帯のローカルナビ
=========================================*/
.local-nav {
  background: rgba(168, 203, 12, 0.85);
}

@media screen and (max-width: 767px) {
  .local-nav {
    display: none;
  }
}

.local-nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  line-height: 1;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .local-nav ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.local-nav ul > li {
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .local-nav ul > li {
    width: 50%;
  }
}

.local-nav ul > li:before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 0;
  bottom: 12px;
  background: #fff;
  width: 1px;
}

.local-nav ul > li:first-child:before {
  display: none;
}

.local-nav ul > li > a,
.local-nav ul > li > .no-link {
  display: block;
  padding: 12px 24px 13px;
  font-weight: bold;
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: 1px;
}

.local-nav ul > li > a .text,
.local-nav ul > li > .no-link .text {
  display: inline-block;
  position: relative;
}

.local-nav ul > li > a .text:before,
.local-nav ul > li > .no-link .text:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -16px;
  background-color: #ff6600;
  height: 4px;
  -webkit-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transition-timing-function: easeIn;
          transition-timing-function: easeIn;
  opacity: 0;
}

.local-nav ul > li > .no-link {
  color: rgba(255, 255, 255, 0.7);
}

.local-nav ul > li .no-link-text {
  letter-spacing: 0;
  color: #fff;
  font-size: 1.3rem;
}

.local-nav ul > li > a:hover {
  opacity: 1;
}

.local-nav ul > li > a:hover .text:before {
  opacity: 1;
  left: 0;
  right: 0;
}

.local-nav ul > li.current > a .text:before {
  opacity: 1;
  left: 0;
  right: 0;
}

.local-nav ul > li.blank .text {
  position: relative;
  padding-right: 21px;
}

.local-nav ul > li .icon-blank {
  position: absolute;
  top: -1px;
  right: 0;
  margin-left: 8px;
}

.local-nav ul > li .icon-blank:before {
  font-size: 1.4rem;
}

/**=========================================
* .footer-page-nav
* 上部borderのナビ
=========================================*/
.footer-page-nav {
  margin: 100px 0 0;
}

@media screen and (max-width: 767px) {
  .footer-page-nav {
    margin-top: 50px;
  }
}

.footer-page-nav-title {
  margin: -7.5px auto 0;
  padding: 0 0 18.5px;
  width: 1240px;
  font-size: 1.6rem;
  line-height: 1.9375;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .footer-page-nav-title {
    margin: -7.5px auto 0;
    padding: 0 0 18.5px;
    width: 100%;
    font-size: 1.5rem;
    line-height: 1.4;
  }
}

.footer-page-nav-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  border-top: 1px solid #dcdcdc;
}

@media screen and (max-width: 767px) {
  .footer-page-nav-inner {
    display: block;
    padding: 0 40px;
  }
}

.footer-page-nav-link {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-right: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  padding: 27.5px 24px;
  min-width: 226px;
  font-size: 1.5rem;
  line-height: 1.33333;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .footer-page-nav-link {
    display: block;
    border-left: 1px solid #dcdcdc;
    padding: 17.5px 25px 17.5px 15px;
    min-width: inherit;
    font-size: 1.4rem;
    line-height: 1.35714;
  }
}

.footer-page-nav-link:first-child {
  border-left: 1px solid #dcdcdc;
}

.footer-page-nav-link.no-link {
  color: rgba(0, 0, 0, 0.4);
}

.footer-page-nav-link .no-link-text {
  color: black;
  font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
  .footer-page-nav-link .no-link-text {
    font-size: 1.3rem;
  }
}

.footer-page-nav-link:before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(220, 220, 220, 0.5);
  -webkit-transition: .3s;
  transition: .3s;
}

.footer-page-nav-link .icon {
  position: absolute;
  top: 50%;
  right: 20px;
  z-index: 3;
  margin-top: -11px;
  -webkit-transition: .3s;
  transition: .3s;
}

@media screen and (max-width: 767px) {
  .footer-page-nav-link .icon {
    right: 13px;
    margin-top: -8px;
  }
}

.footer-page-nav-link .icon:before {
  font-size: 2.2rem;
}

@media screen and (max-width: 767px) {
  .footer-page-nav-link .icon:before {
    font-size: 1.7rem;
  }
}

.footer-page-nav-link .icon.icon-blank:before {
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .footer-page-nav-link .icon.icon-blank:before {
    font-size: 1.2rem;
  }
}

.footer-page-nav-link .text {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding-right: 24px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media screen and (max-width: 767px) {
  .footer-page-nav-link .text {
    padding-right: 0;
  }
}

.footer-page-nav-link--member {
  width: 500px;
}

@media screen and (max-width: 767px) {
  .footer-page-nav-link--member {
    margin: 0 auto;
    padding-right: 13px;
    padding-left: 13px;
    max-width: 294px;
    width: 100%;
  }
}

.footer-page-nav-link--member .text {
  padding-right: 0;
}

@media screen and (min-width: 768px) {
  .footer-page-nav a.footer-page-nav-link:hover {
    opacity: 1;
  }
  .footer-page-nav a.footer-page-nav-link:hover:before {
    top: 0%;
  }
  .footer-page-nav a.footer-page-nav-link:hover .text {
    opacity: 0.8;
  }
  .footer-page-nav a.footer-page-nav-link:hover .icon-arrow-2 {
    right: 15px;
  }
  .footer-page-nav a.footer-page-nav-link:hover .icon-blank {
    margin-top: -14px;
  }
}

@media screen and (min-width: 768px) {
  .footer-page-nav a.footer-page-nav-link.current {
    border-bottom: none;
  }
}

@media screen and (max-width: 767px) {
  .footer-page-nav a.footer-page-nav-link.current {
    border-right: none;
    border-left: none;
  }
}

.footer-page-nav a.footer-page-nav-link.current:first-child {
  border-left: none;
}

.footer-page-nav a.footer-page-nav-link.current:last-child {
  border-right: none;
}

@media screen and (max-width: 767px) {
  .footer-page-nav a.footer-page-nav-link.current:last-child {
    border-bottom: none;
  }
}

.footer-page-nav a.footer-page-nav-link.current .icon {
  display: none;
}

.footer-page-nav a.footer-page-nav-link.current .text {
  padding-right: 0;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .footer-page-nav a.footer-page-nav-link.current .text {
    padding: 0;
  }
}

@media screen and (min-width: 768px) {
  .footer-page-nav a.footer-page-nav-link.current:hover:before {
    top: 100%;
  }
}

@media screen and (min-width: 768px) {
  .footer-page-nav a.footer-page-nav-link.current:hover {
    opacity: 1;
  }
}

.footer-page-nav .footer-page-nav-inner .footer-page-link-project {
  display: block;
  margin: 0;
  border-top: none;
}

@media screen and (max-width: 767px) {
  .footer-page-nav .footer-page-nav-inner .footer-page-link-project {
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .footer-page-nav .footer-page-nav-inner .footer-page-link-project:nth-child(2) {
    border-left: none;
  }
}

@media screen and (min-width: 768px) {
  .footer-page-nav .footer-page-nav-inner .footer-page-link-project.current {
    border-bottom: none;
  }
}

@media screen and (max-width: 767px) {
  .footer-page-nav .footer-page-nav-inner .footer-page-link-project.current {
    border-right: none;
    border-left: none;
  }
}

.footer-page-nav .footer-page-nav-inner .footer-page-link-project.current:first-child {
  border-left: none;
}

.footer-page-nav .footer-page-nav-inner .footer-page-link-project.current:last-child {
  border-right: none;
}

@media screen and (max-width: 767px) {
  .footer-page-nav .footer-page-nav-inner .footer-page-link-project.current:last-child {
    border-bottom: none;
  }
}

.footer-page-nav .footer-page-nav-inner .footer-page-link-project.current .icon {
  display: none;
}

.footer-page-nav .footer-page-nav-inner .footer-page-link-project.current .text {
  padding-right: 0;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .footer-page-nav .footer-page-nav-inner .footer-page-link-project.current .text {
    padding: 0;
  }
}

/**
 * Header Style
 */
/**=========================================
* header
=========================================*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

@media screen and (max-width: 767px) {
  .header {
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 14px 10px 12px;
    width: 100%;
    height: 55px;
  }
}

@media screen and (max-width: 767px) {
  .header.is-gnav-show {
    -webkit-transform: translateX(-305px);
            transform: translateX(-305px);
  }
}

.header-button-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 260px;
  z-index: 10;
}

@media screen and (max-width: 767px) {
  .header-button-container {
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
    padding: 9px 10px 7px;
    width: 50px;
    height: 50px;
  }
}

@media screen and (max-width: 767px) {
  .header-button-container.is-gnav-show {
    -webkit-transform: translateX(-305px);
            transform: translateX(-305px);
  }
}

.header-title {
  display: inline-block;
  position: relative;
  margin: 0;
  line-height: 1;
  font-size: 0;
}

.header-title-container {
  line-height: 1;
  font-size: 0;
}

.header-title > a {
  position: relative;
  display: inline-block;
  padding: 17px 23px 15px;
  line-height: 1;
  font-size: 0;
}

@media screen and (max-width: 767px) {
  .header-title > a {
    padding: 0;
    width: 201px;
  }
}

.header-title:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.9);
}

@media screen and (max-width: 767px) {
  .header-title:before {
    display: none;
  }
}

.header-title:after {
  content: "";
  display: block;
  position: absolute;
  right: -30px;
  top: 0;
  border-top: 25px solid rgba(255, 255, 255, 0.9);
  border-right: 15px solid rgba(255, 255, 255, 0);
  border-bottom: 25px solid rgba(255, 255, 255, 0);
  border-left: 15px solid rgba(255, 255, 255, 0.9);
  width: 0;
  height: 0;
}

@media screen and (max-width: 767px) {
  .header-title:after {
    display: none;
  }
}

.header-button, .header-button--gnav, .header-button--entry {
  position: absolute;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #444;
  padding-bottom: 2px;
  padding: 13px 0;
  width: 130px;
  color: #a8cb0c;
  -webkit-transition: .3s;
  transition: .3s;
}

@media screen and (max-width: 767px) {
  .header-button, .header-button--gnav, .header-button--entry {
    background: #fff;
  }
}

.header-button .icon, .header-button--gnav .icon, .header-button--entry .icon {
  position: relative;
  top: 0px;
  margin-right: 5px;
  -webkit-transition: .3s;
  transition: .3s;
}

.header-button .icon:before, .header-button--gnav .icon:before, .header-button--entry .icon:before {
  font-size: 2.2rem;
}

.header-button .text, .header-button--gnav .text, .header-button--entry .text {
  position: relative;
  top: 0px;
  padding-top: 3px;
  height: 24px;
  -webkit-transition: .3s;
  transition: .3s;
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1.3rem;
  letter-spacing: 2px;
}

@media screen and (min-width: 768px) {
  .header-button:hover, .header-button--gnav:hover, .header-button--entry:hover {
    opacity: 1;
    padding-top: 30px;
  }
  .header-button:hover .icon, .header-button--gnav:hover .icon, .header-button--entry:hover .icon,
  .header-button:hover .text,
  .header-button--gnav:hover .text,
  .header-button--entry:hover .text {
    top: -8px;
  }
}

.header-button.no-link, .no-link.header-button--gnav, .no-link.header-button--entry {
  background: #999;
  color: rgba(255, 255, 255, 0.6);
}

@media screen and (min-width: 768px) {
  .header-button.no-link:hover, .no-link.header-button--gnav:hover, .no-link.header-button--entry:hover {
    opacity: 1;
    padding-top: 13px;
  }
  .header-button.no-link:hover .icon, .no-link.header-button--gnav:hover .icon, .no-link.header-button--entry:hover .icon,
  .header-button.no-link:hover .text,
  .no-link.header-button--gnav:hover .text,
  .no-link.header-button--entry:hover .text {
    top: 0px;
  }
}

.header-button--gnav {
  cursor: pointer;
  right: 132px;
}

@media screen and (max-width: 767px) {
  .header-button--gnav {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: #fff;
    right: 0;
    width: 55px;
    height: 55px;
  }
}

.header-button--gnav .icon {
  margin-right: 10px;
}

@media screen and (max-width: 767px) {
  .header-button--gnav .icon {
    margin-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .header-button--gnav .text {
    display: none;
  }
}

.header-button--entry {
  right: 0;
}

@media screen and (max-width: 767px) {
  .header-button--entry {
    display: none;
  }
}

.header-button--entry .icon {
  top: 2px;
}

.header-button--entry .icon:before {
  font-size: 2.2rem;
}

@media screen and (min-width: 768px) {
  .header-button--entry.no-link:hover .icon {
    top: 2px;
  }
}

/**
 * Footer Style
**/
/**=========================================
* search
* 検索機能
=========================================*/
.search-box {
  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -190px;
}

@media screen and (max-width: 767px) {
  .search-box {
    top: 210px;
    margin-left: -160px;
    padding-right: 58px;
    padding-left: 10px;
    width: 320px;
  }
}

@media screen and (min-width: 768px) {
  .cat-top .search-box {
    margin-left: -170px;
  }
}

@media screen and (max-width: 767px) {
  .cat-top .search-box {
    top: 95px;
  }
}

form#search .search_keyword,
form#search .category,
form#search form.search .number,
form.search form#search .number {
  width: 150px;
  height: 27px;
  line-height: 29px;
  -webkit-appearance: none;
  padding: 0 0 0 7px;
  border: 1px solid #CCCBCB;
  font-size: 1.4rem;
  color: #d9d9d9;
  vertical-align: middle;
  border-radius: 3px;
}

@media screen and (max-width: 767px) {
  form#search .search_keyword,
  form#search .category,
  form#search form.search .number,
  form.search form#search .number {
    font-size: 1.6rem;
  }
}

form#search .search_keyword,
form.search .search_keyword {
  color: #333;
}

form#search .category {
  width: 100px;
  margin-left: 3px;
  height: 29px;
  padding-left: 3px;
  color: #666;
}

form#search .category option {
  line-height: 29px;
}

form#search input[type=submit] {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  height: 29px;
  margin-left: 2px;
  padding: 0 12px 0 32px;
  border: none;
  background: #e5e5e5 url(../img/common/search01.png) no-repeat 7px 6px;
  font-size: 1.2rem;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 3px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  opacity: 0.9;
}

@media screen and (max-width: 767px) {
  form#search input[type=submit] {
    font-size: 1.6rem;
  }
}

form#search input[type=submit]:hover {
  background: #f4be17 url(../img/common/search03.png) no-repeat 7px 6px;
  color: #fff;
}

#searchBlockInContent .formArea .keyword,
#searchBlockInContent .formArea form#search .category,
form#search #searchBlockInContent .formArea .category,
#searchBlockInContent .formArea form.search .number,
form.search #searchBlockInContent .formArea .number,
#searchBlockInContent .formArea form.search .category,
form.search #searchBlockInContent .formArea .category {
  width: 232px;
  padding: 18px 0 15px;
}

#searchBlockInContent .formArea .keyword span,
#searchBlockInContent .formArea form#search .category span,
form#search #searchBlockInContent .formArea .category span,
#searchBlockInContent .formArea form.search .number span,
form.search #searchBlockInContent .formArea .number span,
#searchBlockInContent .formArea form.search .category span,
form.search #searchBlockInContent .formArea .category span {
  margin: 0 15px;
}

#searchBlockInContent .formArea .keyword input,
#searchBlockInContent .formArea form#search .category input,
form#search #searchBlockInContent .formArea .category input,
#searchBlockInContent .formArea form.search .number input,
form.search #searchBlockInContent .formArea .number input,
#searchBlockInContent .formArea form.search .category input,
form.search #searchBlockInContent .formArea .category input {
  width: 120px;
  line-height: 1.1;
}

#searchBlockInContent .formArea .category {
  width: 259px;
  padding: 18px 0 15px;
}

#searchBlockInContent .formArea .category span {
  margin: 0 15px;
}

#searchBlockInContent .formArea .button {
  width: 113px;
  background: #e0f1cc;
  padding: 18px 0 15px;
}

#searchBlockInContent .formArea .button input {
  margin: 0 15px;
  line-height: 1.2;
}

#searchBlockInContent .formArea div {
  float: left;
}

/* [SP] form#search
----------------------------------------------- */
@media screen and (max-width: 767px) {
  form#search .search_keyword {
    box-sizing: border-box;
    width: 57.14%;
    float: left;
  }
  form#search .category {
    box-sizing: border-box;
    width: 35.71%;
    margin: -1px 0 0 7.14%;
    float: left;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAAvklEQVQoFY2QMQqEMBBFv7ERa/EMXkGw11K8QbDXzuN4BHv7QO6ifUgj7v4UAdlVM8Uwf+b9YZJISnlqrfEUZVlinucnBGKaJgghbiHOyLyFKIoCbdvecpyReYvo/Ma2bajrGtbaC58kCdZ1RZ7nl/4/4d5EsO/7nzl7IUtodBexMMagaRrs+06JLMvcNWmaOv2W/C/TMAyD58dxROgSmvxFFMdxoOs6lliWBXEcuzokXRbRoJRyvqqqQvye+QDMDz1D6yuj9wAAAABJRU5ErkJggg==) no-repeat #fff right 50%;
    -webkit-appearance: none;
  }
  form#search input[type=submit] {
    width: 100%;
    margin: 10px 0 0;
    padding: 0 10px;
    background: #fff;
    letter-spacing: normal;
    -webkit-appearance: none;
    clear: both;
  }
  form#search input[type=submit]:hover,
  form#search input[type=submit]:active,
  form#search input[type=submit]:focus {
    background-image: none;
  }
}

/**=========================================
* footer-link
* フッターリンク
=========================================*/
#footer {
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  width: 100%;
  background: url(../img/common/footer_bg.png) no-repeat center bottom;
}

@media screen and (max-width: 767px) {
  #footer {
    background-image: url(../img/common/footer_bg_sp.png);
    background-size: 705px auto;
  }
}

#footer .footer {
  position: relative;
  left: 50%;
  margin-left: -620px;
  padding: 200px 440px 0 430px;
  width: 1240px;
  height: 300px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #footer .footer {
    margin-left: -300px;
    padding: 285px 0 0 0;
    width: 600px;
    height: 362px;
    text-align: left;
  }
}

.cat-top #footer {
  background: none;
}

@media screen and (max-width: 767px) {
  .cat-top #footer {
    bottom: -10px;
  }
}

.cat-top #footer .footer {
  background: url(../img/common/footer_hex.png) no-repeat center bottom;
  padding: 200px 397px 0 447px;
  height: 330px;
}

@media screen and (max-width: 767px) {
  .cat-top #footer .footer {
    background-image: url(../img/common/footer_hex_sp.png);
    background-position: center top;
    background-size: 510px auto;
    padding: 170px 0 0 0;
    height: 256px;
  }
}

.copyright {
  font-size: 1.2rem;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .copyright {
    display: block;
    margin: 0 auto;
    width: 320px;
    padding-top: 10px;
    padding-left: 10px;
    font-size: 1rem;
  }
}

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

@media screen and (max-width: 767px) {
  .footer-link {
    margin: 0 auto;
    width: 320px;
  }
}

.footer-link > li {
  position: relative;
  display: inline-block;
}

.footer-link > li:before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  background-color: #000;
  width: 1px;
}

.footer-link > li:first-child:before {
  display: none;
}

.footer-link > li > a {
  padding: 0 10px;
  font-size: 1.3rem;
  color: #000;
}

@media screen and (max-width: 767px) {
  .footer-link > li > a {
    font-size: 1.2rem;
  }
}

@media screen and (min-width: 768px) {
  .footer-link > li > a:hover {
    text-decoration: underline;
    opacity: 1;
  }
}

.pagetop, .pagebottom {
  position: fixed;
  right: 40px;
  bottom: 90px;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #a8cb0c;
  border-radius: 100%;
  padding: 12px 0 0;
  width: 46px;
  height: 46px;
  color: #a8cb0c;
  text-align: center;
  line-height: 1.125;
  -webkit-transition: bottom 0.4s ease-out, opacity 0.4s ease-out;
  transition: bottom 0.4s ease-out, opacity 0.4s ease-out;
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .pagetop, .pagebottom {
    right: 10px;
    bottom: 80px;
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
    letter-spacing: 1px;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
  }
}

@media screen and (max-width: 767px) {
  .pagetop.is-gnav-show, .is-gnav-show.pagebottom {
    -webkit-transform: translateX(-305px);
            transform: translateX(-305px);
  }
}

.pagetop .icon:before, .pagebottom .icon:before {
  font-size: 1.8rem;
}

@media screen and (min-width: 768px) {
  .pagetop:hover, .pagebottom:hover {
    opacity: 1;
    bottom: 100px;
  }
}

.pagetop.is-tap, .is-tap.pagebottom {
  opacity: 0;
}

.pagetop.is-visible, .is-visible.pagebottom {
  cursor: pointer;
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .pagetop.is-visible:hover, .is-visible.pagebottom:hover {
    opacity: 0.85;
  }
}

.pagebottom {
  bottom: 30px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

@media screen and (max-width: 767px) {
  .pagebottom {
    bottom: 30px;
  }
}

@media screen and (max-width: 767px) {
  .pagebottom.is-gnav-show {
    -webkit-transform: translateX(-305px) rotate(180deg);
            transform: translateX(-305px) rotate(180deg);
  }
}

@media screen and (min-width: 768px) {
  .pagebottom:hover {
    bottom: 20px;
  }
}

/**
 * helper class
**/
.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.ov-hidden {
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .ov-hidden-sp {
    overflow: hidden;
  }
}

.pos-relative {
  position: relative;
}

.is-hidden {
  display: none !important;
}

/* display for responsive
========================================================================== */
.hide-on-mobile {
  display: block !important;
}

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

.hide-on-desktop {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .hide-on-desktop {
    display: block !important;
  }
}

.hide-on-mobile-br {
  display: block !important;
  line-height: 0;
}

@media screen and (max-width: 767px) {
  .hide-on-mobile-br {
    display: none !important;
  }
}

.hide-on-desktop-br {
  display: none !important;
  line-height: 0;
}

@media screen and (max-width: 767px) {
  .hide-on-desktop-br {
    display: block !important;
  }
}

.hide-on-desktop-br br {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .hide-on-desktop-br br {
    display: block !important;
  }
}

.hide-on-mobile-inline-block {
  display: inline-block !important;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .hide-on-mobile-inline-block {
    display: none !important;
  }
}

.hide-on-desktop-inline-block {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .hide-on-desktop-inline-block {
    display: inline-block !important;
    line-height: 1;
  }
}

/* Font size
========================================================================== */
/* Relative size */
.size-xsmall {
  font-size: 0.9rem !important;
}

.size-small {
  font-size: 1.1rem !important;
}

.size-medium {
  font-size: 1.2rem !important;
}

.size-medium-ex {
  font-size: 1.3rem !important;
}

.size-large {
  font-size: 1.4rem !important;
}

.size-xlarge {
  font-size: 1.6rem !important;
}

.size-xxlarge {
  font-size: 1.8rem !important;
}

@media screen and (min-width: 768px) {
  .size-xxlarge-pc {
    font-size: 1.8rem !important;
  }
}

.size-xxxlarge {
  font-size: 2rem !important;
}

/* Absolute size */
.size-10px {
  font-size: 1rem !important;
}

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 767px) {
  .size-10px-sp {
    font-size: 1rem !important;
  }
  .size-12px-sp {
    font-size: 1.2rem !important;
  }
  .size-13px-sp {
    font-size: 1.3rem !important;
  }
  .size-14px-sp {
    font-size: 1.4rem !important;
  }
  .size-16px-sp {
    font-size: 1.6rem !important;
  }
}

/* Display
========================================================================== */
.dn {
  display: none !important;
}

.db {
  display: block !important;
}

.di {
  display: inline !important;
}

.ib {
  display: inline-block !important;
}

.dt {
  display: table !important;
}

.dtc {
  display: table-cell !important;
}

/* Font
========================================================================== */
.weight-normal {
  font-weight: normal !important;
}

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

.text-line {
  text-decoration: underline !important;
}

.letter-05 {
  letter-spacing: -0.5px !important;
}

.letter-0 {
  letter-spacing: 0px !important;
}

.letter-1 {
  letter-spacing: -1px !important;
}

.letter-2 {
  letter-spacing: -2px !important;
}

.letter1 {
  letter-spacing: 1px !important;
}

@media screen and (max-width: 767px) {
  .letter-1-sp {
    letter-spacing: -1px !important;
  }
  .letter-2-sp {
    letter-spacing: -2px !important;
  }
}

/* Float
========================================================================== */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/* Align
========================================================================== */
/* Horizontal */
.align-left {
  text-align: left !important;
}

.align-center {
  text-align: center !important;
}

.align-right {
  text-align: right !important;
}

/* Vertical */
.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-baseline {
  vertical-align: baseline !important;
}

@media screen and (min-width: 768px) {
  .align-left-pc {
    text-align: left !important;
  }
  .align-center-pc {
    text-align: center !important;
  }
}

@media screen and (max-width: 767px) {
  .align-left-sp {
    text-align: left !important;
  }
  .align-center-sp {
    text-align: center !important;
  }
}

/* Space
========================================================================== */
.space-normal {
  margin-bottom: 1rem !important;
}

.space-near {
  margin-bottom: 0.5rem !important;
}

.space-far {
  margin-bottom: 1.5rem !important;
}

.space-section {
  margin-bottom: 30px !important;
}

.space-module {
  margin-bottom: 25px !important;
}

.space-none {
  margin-bottom: 0 !important;
}

/* Margin
========================================================================== */
.mt-40 {
  margin-top: -40px !important;
}

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

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

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

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

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

.mt-1 {
  margin-top: -1px !important;
}

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

.mt1 {
  margin-top: 1px !important;
}

.mt2 {
  margin-top: 2px !important;
}

.mt3 {
  margin-top: 3px !important;
}

.mt4 {
  margin-top: 4px !important;
}

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

.mt6 {
  margin-top: 6px !important;
}

.mt7 {
  margin-top: 7px !important;
}

.mt8 {
  margin-top: 8px !important;
}

.mt9 {
  margin-top: 9px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mr-8 {
  margin-right: -8px !important;
}

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

.mr-2 {
  margin-right: -2px !important;
}

.mr-1 {
  margin-right: -1px !important;
}

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

.mr1 {
  margin-right: 1px !important;
}

.mr2 {
  margin-right: 2px !important;
}

.mr3 {
  margin-right: 3px !important;
}

.mr4 {
  margin-right: 4px !important;
}

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

.mr6 {
  margin-right: 6px !important;
}

.mr7 {
  margin-right: 7px !important;
}

.mr8 {
  margin-right: 8px !important;
}

.mr9 {
  margin-right: 9px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mb-1 {
  margin-bottom: -1px !important;
}

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

.mb1 {
  margin-bottom: 1px !important;
}

.mb2 {
  margin-bottom: 2px !important;
}

.mb3 {
  margin-bottom: 3px !important;
}

.mb4 {
  margin-bottom: 4px !important;
}

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

.mb6 {
  margin-bottom: 6px !important;
}

.mb7 {
  margin-bottom: 7px !important;
}

.mb8 {
  margin-bottom: 8px !important;
}

.mb9 {
  margin-bottom: 9px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ml-8 {
  margin-left: -8px !important;
}

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

.ml-2 {
  margin-left: -2px !important;
}

.ml-1 {
  margin-left: -1px !important;
}

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

.ml1 {
  margin-left: 1px !important;
}

.ml2 {
  margin-left: 2px !important;
}

.ml3 {
  margin-left: 3px !important;
}

.ml4 {
  margin-left: 4px !important;
}

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

.ml6 {
  margin-left: 6px !important;
}

.ml7 {
  margin-left: 7px !important;
}

.ml8 {
  margin-left: 8px !important;
}

.ml9 {
  margin-left: 9px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mt-1 {
  margin-top: -1px !important;
}

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

.mt1 {
  margin-top: 1px !important;
}

.mt2 {
  margin-top: 2px !important;
}

.mt3 {
  margin-top: 3px !important;
}

.mt4 {
  margin-top: 4px !important;
}

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

.mt6 {
  margin-top: 6px !important;
}

.mt7 {
  margin-top: 7px !important;
}

.mt8 {
  margin-top: 8px !important;
}

.mt9 {
  margin-top: 9px !important;
}

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

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

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

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

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

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

@media screen and (max-width: 767px) {
  .mt-40-sp {
    margin-top: -40px !important;
  }
  .mt-30-sp {
    margin-top: -30px !important;
  }
  .mt-20-sp {
    margin-top: -20px !important;
  }
  .mt-15-sp {
    margin-top: -15px !important;
  }
  .mt-10-sp {
    margin-top: -10px !important;
  }
  .mt-5-sp {
    margin-top: -5px !important;
  }
  .mt-1-sp {
    margin-top: -1px !important;
  }
  .mt0-sp {
    margin-top: 0 !important;
  }
  .mt1-sp {
    margin-top: 1px !important;
  }
  .mt2-sp {
    margin-top: 2px !important;
  }
  .mt3-sp {
    margin-top: 3px !important;
  }
  .mt4-sp {
    margin-top: 4px !important;
  }
  .mt5-sp {
    margin-top: 5px !important;
  }
  .mt6-sp {
    margin-top: 6px !important;
  }
  .mt7-sp {
    margin-top: 7px !important;
  }
  .mt8-sp {
    margin-top: 8px !important;
  }
  .mt9-sp {
    margin-top: 9px !important;
  }
  .mt10-sp {
    margin-top: 10px !important;
  }
  .mt15-sp {
    margin-top: 15px !important;
  }
  .mt20-sp {
    margin-top: 20px !important;
  }
  .mt25-sp {
    margin-top: 25px !important;
  }
  .mt30-sp {
    margin-top: 30px !important;
  }
  .mt35-sp {
    margin-top: 35px !important;
  }
  .mt40-sp {
    margin-top: 40px !important;
  }
  .mt45-sp {
    margin-top: 45px !important;
  }
  .mt50-sp {
    margin-top: 50px !important;
  }
  .mt55-sp {
    margin-top: 55px !important;
  }
  .mt60-sp {
    margin-top: 60px !important;
  }
  .mr-40-sp {
    margin-right: -40px !important;
  }
  .mr-30-sp {
    margin-right: -30px !important;
  }
  .mr-20-sp {
    margin-right: -20px !important;
  }
  .mr-15-sp {
    margin-right: -15px !important;
  }
  .mr-10-sp {
    margin-right: -10px !important;
  }
  .mr-8-sp {
    margin-right: -8px !important;
  }
  .mr-5-sp {
    margin-right: -5px !important;
  }
  .mr-1-sp {
    margin-right: -1px !important;
  }
  .mr0-sp {
    margin-right: 0 !important;
  }
  .mr1-sp {
    margin-right: 1px !important;
  }
  .mr2-sp {
    margin-right: 2px !important;
  }
  .mr3-sp {
    margin-right: 3px !important;
  }
  .mr4-sp {
    margin-right: 4px !important;
  }
  .mr5-sp {
    margin-right: 5px !important;
  }
  .mr6-sp {
    margin-right: 6px !important;
  }
  .mr7-sp {
    margin-right: 7px !important;
  }
  .mr8-sp {
    margin-right: 8px !important;
  }
  .mr9-sp {
    margin-right: 9px !important;
  }
  .mr10-sp {
    margin-right: 10px !important;
  }
  .mr15-sp {
    margin-right: 15px !important;
  }
  .mr20-sp {
    margin-right: 20px !important;
  }
  .mr25-sp {
    margin-right: 25px !important;
  }
  .mr30-sp {
    margin-right: 30px !important;
  }
  .mr35-sp {
    margin-right: 35px !important;
  }
  .mr40-sp {
    margin-right: 40px !important;
  }
  .mr45-sp {
    margin-right: 45px !important;
  }
  .mr50-sp {
    margin-right: 50px !important;
  }
  .mr55-sp {
    margin-right: 55px !important;
  }
  .mr60-sp {
    margin-right: 60px !important;
  }
  .mb-40-sp {
    margin-bottom: -40px !important;
  }
  .mb-30-sp {
    margin-bottom: -30px !important;
  }
  .mb-20-sp {
    margin-bottom: -20px !important;
  }
  .mb-15-sp {
    margin-bottom: -15px !important;
  }
  .mb-10-sp {
    margin-bottom: -10px !important;
  }
  .mb-5-sp {
    margin-bottom: -5px !important;
  }
  .mb-1-sp {
    margin-bottom: -1px !important;
  }
  .mb0-sp {
    margin-bottom: 0 !important;
  }
  .mb1-sp {
    margin-bottom: 1px !important;
  }
  .mb2-sp {
    margin-bottom: 2px !important;
  }
  .mb3-sp {
    margin-bottom: 3px !important;
  }
  .mb4-sp {
    margin-bottom: 4px !important;
  }
  .mb5-sp {
    margin-bottom: 5px !important;
  }
  .mb6-sp {
    margin-bottom: 6px !important;
  }
  .mb7-sp {
    margin-bottom: 7px !important;
  }
  .mb8-sp {
    margin-bottom: 8px !important;
  }
  .mb9-sp {
    margin-bottom: 9px !important;
  }
  .mb10-sp {
    margin-bottom: 10px !important;
  }
  .mb15-sp {
    margin-bottom: 15px !important;
  }
  .mb20-sp {
    margin-bottom: 20px !important;
  }
  .mb25-sp {
    margin-bottom: 25px !important;
  }
  .mb30-sp {
    margin-bottom: 30px !important;
  }
  .mb35-sp {
    margin-bottom: 35px !important;
  }
  .mb40-sp {
    margin-bottom: 40px !important;
  }
  .mb45-sp {
    margin-bottom: 45px !important;
  }
  .mb50-sp {
    margin-bottom: 50px !important;
  }
  .mb55-sp {
    margin-bottom: 55px !important;
  }
  .mb60-sp {
    margin-bottom: 60px !important;
  }
  .ml-40-sp {
    margin-left: -40px !important;
  }
  .ml-30-sp {
    margin-left: -30px !important;
  }
  .ml-20-sp {
    margin-left: -20px !important;
  }
  .ml-15-sp {
    margin-left: -15px !important;
  }
  .ml-10-sp {
    margin-left: -10px !important;
  }
  .ml-8-sp {
    margin-left: -8px !important;
  }
  .ml-5-sp {
    margin-left: -5px !important;
  }
  .ml-1-sp {
    margin-left: -1px !important;
  }
  .ml0-sp {
    margin-left: 0 !important;
  }
  .ml1-sp {
    margin-left: 1px !important;
  }
  .ml2-sp {
    margin-left: 2px !important;
  }
  .ml3-sp {
    margin-left: 3px !important;
  }
  .ml4-sp {
    margin-left: 4px !important;
  }
  .ml5-sp {
    margin-left: 5px !important;
  }
  .ml6-sp {
    margin-left: 6px !important;
  }
  .ml7-sp {
    margin-left: 7px !important;
  }
  .ml8-sp {
    margin-left: 8px !important;
  }
  .ml9-sp {
    margin-left: 9px !important;
  }
  .ml10-sp {
    margin-left: 10px !important;
  }
  .ml15-sp {
    margin-left: 15px !important;
  }
  .ml20-sp {
    margin-left: 20px !important;
  }
  .ml25-sp {
    margin-left: 25px !important;
  }
  .ml30-sp {
    margin-left: 30px !important;
  }
  .ml35-sp {
    margin-left: 35px !important;
  }
  .ml40-sp {
    margin-left: 40px !important;
  }
  .ml45-sp {
    margin-left: 45px !important;
  }
  .ml50-sp {
    margin-left: 50px !important;
  }
  .ml55-sp {
    margin-left: 55px !important;
  }
  .ml60-sp {
    margin-left: 60px !important;
  }
  .mt-40-sp {
    margin-top: -40px !important;
  }
  .mt-30-sp {
    margin-top: -30px !important;
  }
  .mt-20-sp {
    margin-top: -20px !important;
  }
  .mt-15-sp {
    margin-top: -15px !important;
  }
  .mt-10-sp {
    margin-top: -10px !important;
  }
  .mt-5-sp {
    margin-top: -5px !important;
  }
  .mt-1-sp {
    margin-top: -1px !important;
  }
  .mt0-sp {
    margin-top: 0 !important;
  }
  .mt1-sp {
    margin-top: 1px !important;
  }
  .mt2-sp {
    margin-top: 2px !important;
  }
  .mt3-sp {
    margin-top: 3px !important;
  }
  .mt4-sp {
    margin-top: 4px !important;
  }
  .mt5-sp {
    margin-top: 5px !important;
  }
  .mt6-sp {
    margin-top: 6px !important;
  }
  .mt7-sp {
    margin-top: 7px !important;
  }
  .mt8-sp {
    margin-top: 8px !important;
  }
  .mt9-sp {
    margin-top: 9px !important;
  }
  .mt10-sp {
    margin-top: 10px !important;
  }
  .mt15-sp {
    margin-top: 15px !important;
  }
  .mt20-sp {
    margin-top: 20px !important;
  }
  .mt25-sp {
    margin-top: 25px !important;
  }
  .mt30-sp {
    margin-top: 30px !important;
  }
  .mt35-sp {
    margin-top: 35px !important;
  }
}

/* Padding
========================================================================== */
.pt0 {
  padding-top: 0 !important;
}

.pt1 {
  padding-top: 1px !important;
}

.pt2 {
  padding-top: 2px !important;
}

.pt3 {
  padding-top: 3px !important;
}

.pt4 {
  padding-top: 4px !important;
}

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

.pt6 {
  padding-top: 6px !important;
}

.pt7 {
  padding-top: 7px !important;
}

.pt8 {
  padding-top: 8px !important;
}

.pt9 {
  padding-top: 9px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pr1 {
  padding-right: 1px !important;
}

.pr2 {
  padding-right: 2px !important;
}

.pr3 {
  padding-right: 3px !important;
}

.pr4 {
  padding-right: 4px !important;
}

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

.pr6 {
  padding-right: 6px !important;
}

.pr7 {
  padding-right: 7px !important;
}

.pr8 {
  padding-right: 8px !important;
}

.pr9 {
  padding-right: 9px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

.pb1 {
  padding-bottom: 1px !important;
}

.pb2 {
  padding-bottom: 2px !important;
}

.pb3 {
  padding-bottom: 3px !important;
}

.pb4 {
  padding-bottom: 4px !important;
}

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

.pb6 {
  padding-bottom: 6px !important;
}

.pb7 {
  padding-bottom: 7px !important;
}

.pb8 {
  padding-bottom: 8px !important;
}

.pb9 {
  padding-bottom: 9px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

.pl1 {
  padding-left: 1px !important;
}

.pl2 {
  padding-left: 2px !important;
}

.pl3 {
  padding-left: 3px !important;
}

.pl4 {
  padding-left: 4px !important;
}

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

.pl6 {
  padding-left: 6px !important;
}

.pl7 {
  padding-left: 7px !important;
}

.pl8 {
  padding-left: 8px !important;
}

.pl9 {
  padding-left: 9px !important;
}

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 767px) {
  /* Padding
  ========================================================================== */
  .pt0-sp {
    padding-top: 0 !important;
  }
  .pt1-sp {
    padding-top: 1px !important;
  }
  .pt2-sp {
    padding-top: 2px !important;
  }
  .pt3-sp {
    padding-top: 3px !important;
  }
  .pt4-sp {
    padding-top: 4px !important;
  }
  .pt5-sp {
    padding-top: 5px !important;
  }
  .pt6-sp {
    padding-top: 6px !important;
  }
  .pt7-sp {
    padding-top: 7px !important;
  }
  .pt8-sp {
    padding-top: 8px !important;
  }
  .pt9-sp {
    padding-top: 9px !important;
  }
  .pt10-sp {
    padding-top: 10px !important;
  }
  .pt15-sp {
    padding-top: 15px !important;
  }
  .pt20-sp {
    padding-top: 20px !important;
  }
  .pt25-sp {
    padding-top: 25px !important;
  }
  .pt30-sp {
    padding-top: 30px !important;
  }
  .pt35-sp {
    padding-top: 35px !important;
  }
  .pt40-sp {
    padding-top: 40px !important;
  }
  .pt45-sp {
    padding-top: 45px !important;
  }
  .pt50-sp {
    padding-top: 50px !important;
  }
  .pt55-sp {
    padding-top: 55px !important;
  }
  .pt60-sp {
    padding-top: 60px !important;
  }
  .pr0-sp {
    padding-right: 0 !important;
  }
  .pr10-sp {
    padding-right: 10px !important;
  }
  .pr15-sp {
    padding-right: 15px !important;
  }
  .pr20-sp {
    padding-right: 20px !important;
  }
  .pr25-sp {
    padding-right: 25px !important;
  }
  .pr30-sp {
    padding-right: 30px !important;
  }
  .pr35-sp {
    padding-right: 35px !important;
  }
  .pr40-sp {
    padding-right: 40px !important;
  }
  .pr45-sp {
    padding-right: 45px !important;
  }
  .pr50-sp {
    padding-right: 50px !important;
  }
  .pr55-sp {
    padding-right: 55px !important;
  }
  .pr60-sp {
    padding-right: 60px !important;
  }
  .pr80-sp {
    padding-right: 80px !important;
  }
  .pr100-sp {
    padding-right: 100px !important;
  }
  .pb0-sp {
    padding-bottom: 0 !important;
  }
  .pb10-sp {
    padding-bottom: 10px !important;
  }
  .pb15-sp {
    padding-bottom: 15px !important;
  }
  .pb20-sp {
    padding-bottom: 20px !important;
  }
  .pb25-sp {
    padding-bottom: 25px !important;
  }
  .pb30-sp {
    padding-bottom: 30px !important;
  }
  .pb35-sp {
    padding-bottom: 35px !important;
  }
  .pb40-sp {
    padding-bottom: 40px !important;
  }
  .pb45-sp {
    padding-bottom: 45px !important;
  }
  .pb50-sp {
    padding-bottom: 50px !important;
  }
  .pb55-sp {
    padding-bottom: 55px !important;
  }
  .pb60-sp {
    padding-bottom: 60px !important;
  }
  .pl0-sp {
    padding-left: 0 !important;
  }
  .pl10-sp {
    padding-left: 10px !important;
  }
  .pl15-sp {
    padding-left: 15px !important;
  }
  .pl20-sp {
    padding-left: 20px !important;
  }
  .pl25-sp {
    padding-left: 25px !important;
  }
  .pl30-sp {
    padding-left: 30px !important;
  }
  .pl35-sp {
    padding-left: 35px !important;
  }
  .pl40-sp {
    padding-left: 40px !important;
  }
  .pl45-sp {
    padding-left: 45px !important;
  }
  .pl50-sp {
    padding-left: 50px !important;
  }
  .pl55-sp {
    padding-left: 55px !important;
  }
  .pl60-sp {
    padding-left: 60px !important;
  }
}

/* width
========================================================================== */
@media screen and (max-width: 767px) {
  .w40-sp {
    display: inline-block;
    width: 40px !important;
  }
}

.w25-per {
  margin: 0 auto;
  width: 25% !important;
}

.w25-per {
  margin: 0 auto;
  width: 25% !important;
}

.w33-per {
  margin: 0 auto;
  width: 33.333% !important;
}

.w40-per {
  margin: 0 auto;
  width: 40% !important;
}

.w45-per {
  margin: 0 auto;
  width: 45% !important;
}

.w50-per {
  margin: 0 auto;
  width: 50% !important;
}

.w55-per {
  margin: 0 auto;
  width: 55% !important;
}

.w60-per {
  margin: 0 auto;
  width: 60% !important;
}

.w65-per {
  margin: 0 auto;
  width: 65% !important;
}

.w70-per {
  margin: 0 auto;
  width: 70% !important;
}

.w75-per {
  margin: 0 auto;
  width: 75% !important;
}

.w80-per {
  margin: 0 auto;
  width: 80% !important;
}

.w85-per {
  margin: 0 auto;
  width: 85% !important;
}

.w90-per {
  margin: 0 auto;
  width: 90% !important;
}

.w95-per {
  margin: 0 auto;
  width: 95% !important;
}

.w100-per {
  margin: 0 auto;
  width: 100% !important;
}

/**
 * Top Style
*/
/**=========================================
* ロード画面
=========================================*/
#loadingBg {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 500;
  background: #fff;
}

#loading {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 600;
  margin-top: -130px;
  padding: 0;
  width: 100%;
  height: 260px;
  text-align: center;
}

#loadingHex {
  position: relative;
  display: block;
  margin: 60px auto 0;
  width: 1240px;
  height: 90px;
  opacity: 0;
}

@media screen and (max-width: 767px) {
  #loadingHex {
    width: 300px;
  }
}

#loading-text {
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  margin: 0 auto;
  text-align: center;
  width: 1240px;
  color: #a8cb0c;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  #loading-text {
    width: 300px;
  }
}

#loading-text .text-1 {
  display: block;
  font-size: 2rem;
  letter-spacing: 4px;
  opacity: 0;
}

#loading-text .text-2 {
  display: block;
  margin-top: 17px;
  font-size: 1.3rem;
  letter-spacing: 2px;
  opacity: 0;
}

.loading-hexagon {
  position: relative;
  width: 88px;
  height: 50.81px;
  background-color: #fff;
  margin: 25.40px 0;
  border-left: solid 5px #a8cb0c;
  border-right: solid 5px #a8cb0c;
  /*custom*/
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  margin-top: -44px;
  margin-left: -50px;
  -webkit-transform: translate3d(1, 1, 1) scale(1) rotate(90deg);
          transform: translate3d(1, 1, 1) scale(1) rotate(90deg);
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-animation: hexRotate 2s infinite linear;
          animation: hexRotate 2s infinite linear;
}

.loading-hexagon:before,
.loading-hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 62.23px;
  height: 62.23px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 7.8873px;
}

.loading-hexagon:before {
  top: -31.1127px;
  border-top: solid 7.0711px #a8cb0c;
  border-right: solid 7.0711px #a8cb0c;
}

.loading-hexagon:after {
  bottom: -31.1127px;
  border-bottom: solid 7.0711px #a8cb0c;
  border-left: solid 7.0711px #a8cb0c;
}

@-webkit-keyframes hexRotate {
  0% {
    -webkit-transform: scale(1) rotate(90deg);
            transform: scale(1) rotate(90deg);
  }
  50% {
    margin-top: -60px;
    -webkit-transform: scale(1) rotate(270deg);
            transform: scale(1) rotate(270deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(450deg);
            transform: scale(1) rotate(450deg);
  }
}

@keyframes hexRotate {
  0% {
    -webkit-transform: scale(1) rotate(90deg);
            transform: scale(1) rotate(90deg);
  }
  50% {
    margin-top: -60px;
    -webkit-transform: scale(1) rotate(270deg);
            transform: scale(1) rotate(270deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(450deg);
            transform: scale(1) rotate(450deg);
  }
}

/**=========================================
* [top] top-main
=========================================*/
.cat-top {
  position: relative;
  min-height: 100vh;
}

.js-animate {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 0;
}

.js-animate.is-show {
  opacity: 1;
}

.js-show-elem {
  -webkit-transition: 1s;
  transition: 1s;
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .js-show-elem {
    -webkit-transition: 1.5s;
    transition: 1.5s;
  }
}

.js-show-elem.is-show {
  opacity: 1;
}

.top-bg-hex {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
}

.top-bg-hex .top-bg-hex-main {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../img/top/bg_hex_main.png) no-repeat center top;
}

@media screen and (max-width: 767px) {
  .top-bg-hex .top-bg-hex-main {
    background-image: url(../img/top/bg_hex_main_sp.png);
    background-position: center top;
    background-size: 905px auto;
  }
}

.top-bg-hex .top-bg-hex-content {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../img/top/bg_hex_content.png) no-repeat center 0;
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
}

@media screen and (max-width: 767px) {
  .top-bg-hex .top-bg-hex-content {
    background-image: url(../img/top/bg_hex_content_sp.png);
    background-position: center top;
    background-size: 905px auto;
    -webkit-transition: 1.5s;
    transition: 1.5s;
  }
}

.top-bg-hex .top-bg-hex-content.is-show {
  opacity: 1;
}

/**=========================================
* [top] top-hex-item
* ■ 丸スタイル
* 最初 : w79 h102
* 最後 : w111 はみだし、中 80
* １つ : w254 h220
* 差分 : w63 h111
* 重なってない幅 : w128
*
* ■ 写真
* １つ : w258 h224（border込み w4px h2px）
=========================================*/
.top-hex-item {
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  z-index: -1;
  margin-left: -620px;
  width: 1240px;
  height: 100%;
  /* 写真 */
}

@media screen and (max-width: 767px) {
  .top-hex-item {
    margin-left: -160px;
    width: 320px;
  }
}

.top-hex-item .photo {
  position: absolute;
  margin-top: -2px;
  margin-left: -4px;
}

@media screen and (max-width: 767px) {
  .top-hex-item .photo {
    margin-top: -1px;
    margin-left: -2px;
    width: 129px;
  }
}

.top-hex-item .photo.js-tl {
  opacity: 0;
}

.top-hex-item .photo.js-animate {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 0;
}

.top-hex-item .photo.is-show {
  opacity: 1;
}

/**=========================================
* [top] top-main
=========================================*/
.top-main {
  position: relative;
  padding: 294px 0;
  height: 765px;
}

@media screen and (max-width: 767px) {
  .top-main {
    padding: 146px 0 0 0;
    height: 568px;
  }
}

.top-main-title {
  margin: 0;
  padding: 0 0 0 40px;
  line-height: 1;
  font-size: 0;
}

@media screen and (max-width: 767px) {
  .top-main-title {
    margin: 0 auto;
    padding-left: 0;
    width: 294px;
  }
}

.top-main-title.js-show-title {
  -webkit-transition: 1.2s;
  transition: 1.2s;
  opacity: 0;
}

.top-main-title.is-show {
  opacity: 1;
}

.top-main-scroll {
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  display: block;
  color: #fff;
  text-align: center;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .top-main-scroll {
    color: #555;
  }
}

.top-main-scroll-container {
  cursor: pointer;
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 100px;
  display: inline-block;
  margin-left: -10px;
  width: 50px;
}

@media screen and (max-width: 767px) {
  .top-main-scroll-container {
    margin-left: -25px;
    bottom: 19px;
  }
}

@media screen and (min-width: 768px) {
  .top-main-scroll-container:hover {
    opacity: 0.7;
  }
}

.top-main-scroll .icon {
  position: relative;
  top: -5px;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-animation: sdb 2s infinite;
          animation: sdb 2s infinite;
}

.top-main-scroll .icon:before {
  font-size: 1.8rem;
}

@media screen and (max-width: 767px) {
  .top-main-scroll .icon:before {
    font-size: 1.3rem;
  }
}

.top-main-scroll .text {
  position: relative;
  top: -7px;
  letter-spacing: 2px;
  font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
  .top-main-scroll .text {
    top: -2px;
    font-size: 1.2rem;
  }
}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  10% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  10% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

/**=========================================
* [top] top-banner
=========================================*/
.top-banner {
  position: absolute;
  z-index: 5;
  top: 0;
  width: 520px;
}

@media screen and (max-width: 767px) {
  .top-banner {
    -webkit-transition: opacity 1.5s;
    transition: opacity 1.5s;
  }
}

@media screen and (max-width: 767px) {
  .top-banner {
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    padding: 0 25px;
    width: 100%;
    max-width: 320px;
  }
}

@media screen and (max-width: 320px) {
  .top-banner {
    top: 0;
  }
}

.top-banner > a {
  display: block;
}

/**=========================================
* [top] top-news
=========================================*/
.top-news {
  position: absolute;
  z-index: 5;
  bottom: 140px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 520px;
  padding-top: 100px;
}

@media screen and (max-width: 767px) {
  .top-news {
    left: 0;
    bottom: 60px;
    padding: 60px 25px 0;
    width: 100%;
  }
}

.top-news-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #333;
  margin: 0;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 12px 0;
  width: 83px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  font-weight: normal;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .top-news-title {
    padding: 0 14px;
    width: 74px;
  }
}

.top-news-title > span {
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1.4rem;
  line-height: 1;
}

.top-news-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #fff;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 9.2px 15px;
}

@media screen and (max-width: 767px) {
  .top-news-body {
    padding: 6.4px 12px;
  }
}

.top-news-text {
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .top-news-text {
    font-size: 1.3rem;
  }
}

/**=========================================
* [top] top-main-hex
=========================================*/
.top-main .top-hex-item {
  /* 丸 */
  /* 画像 */
}

.top-main .top-hex-item.js-photo-container {
  z-index: 1;
}

.top-main .top-hex-item .circle {
  position: absolute;
  margin-top: -13px;
  margin-left: -13px;
  background: url(../img/top/hex_circle.png) no-repeat center center;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
  -webkit-transition-timing-function: easeOut;
          transition-timing-function: easeOut;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .circle {
    background-size: 15px 15px;
    margin-top: -7px;
    margin-left: -7px;
    width: 14px;
    height: 14px;
  }
}

.top-main .top-hex-item .circle.js-tl {
  opacity: 0;
  -webkit-transform: scale3d(0.1, 0.1, 1);
          transform: scale3d(0.1, 0.1, 1);
}

.top-main .top-hex-item .circle.is-show {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

.top-main .top-hex-item .main-hex {
  position: absolute;
  width: 254px;
  height: 220px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex {
    width: 127px;
    height: 110px;
  }
}

.top-main .top-hex-item .main-hex-1 {
  top: 212px;
  left: 16px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex-1 {
    top: 106px;
    left: 0px;
  }
}

.top-main .top-hex-item .main-hex-2 {
  top: 322px;
  left: 207px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex-2 {
    top: 161px;
    left: 95.5px;
  }
}

.top-main .top-hex-item .main-hex-3 {
  top: 212px;
  left: 397px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex-3 {
    top: 106px;
    left: 190.5px;
  }
}

.top-main .top-hex-item .main-hex.row1 {
  top: -118px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.row1 {
    top: -59px;
  }
}

.top-main .top-hex-item .main-hex.row2 {
  top: -8px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.row2 {
    top: -4px;
  }
}

.top-main .top-hex-item .main-hex.row3 {
  top: 102px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.row3 {
    top: 51px;
  }
}

.top-main .top-hex-item .main-hex.row4 {
  top: 212px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.row4 {
    top: 106px;
  }
}

.top-main .top-hex-item .main-hex.row5 {
  top: 322px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.row5 {
    top: 161px;
  }
}

.top-main .top-hex-item .main-hex.row6 {
  top: 432px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.row6 {
    top: 216px;
  }
}

.top-main .top-hex-item .main-hex.row7 {
  top: 542px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.row7 {
    top: 271px;
  }
}

.top-main .top-hex-item .main-hex.row8 {
  top: 652px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.row8 {
    top: 326px;
  }
}

.top-main .top-hex-item .main-hex.col-3 {
  left: -556px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.col-3 {
    left: -286px;
  }
}

.top-main .top-hex-item .main-hex.col-2 {
  left: -365px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.col-2 {
    left: -190.5px;
  }
}

.top-main .top-hex-item .main-hex.col-1 {
  left: -174px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.col-1 {
    left: -95px;
  }
}

.top-main .top-hex-item .main-hex.col1 {
  left: 16px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.col1 {
    left: 0px;
  }
}

.top-main .top-hex-item .main-hex.col2 {
  left: 206.5px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.col2 {
    left: 95.25px;
  }
}

.top-main .top-hex-item .main-hex.col3 {
  left: 397px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.col3 {
    left: 190.5px;
  }
}

.top-main .top-hex-item .main-hex.col4 {
  left: 587.5px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.col4 {
    left: 285.75px;
  }
}

.top-main .top-hex-item .main-hex.col5 {
  left: 778px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.col5 {
    left: 381px;
  }
}

.top-main .top-hex-item .main-hex.col6 {
  left: 969px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.col6 {
    left: 476.5px;
  }
}

.top-main .top-hex-item .main-hex.col7 {
  left: 1159px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.col7 {
    left: 571.5px;
  }
}

.top-main .top-hex-item .main-hex.col8 {
  left: 1350px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.col8 {
    left: 667px;
  }
}

.top-main .top-hex-item .main-hex.col9 {
  left: 1540px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .main-hex.col9 {
    left: 762px;
  }
}

.top-main .top-hex-item .circle-1 {
  top: 0px;
  left: 63px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .circle-1 {
    left: 31.5px;
  }
}

.top-main .top-hex-item .circle-2 {
  top: 0px;
  left: 191px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .circle-2 {
    left: 95.5px;
  }
}

.top-main .top-hex-item .circle-4 {
  top: 220px;
  left: 191px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .circle-4 {
    top: 110px;
    left: 95.5px;
  }
}

.top-main .top-hex-item .circle-5 {
  top: 220px;
  left: 63px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .circle-5 {
    top: 110px;
    left: 31.5px;
  }
}

.top-main .top-hex-item .line {
  display: block;
  position: absolute;
  z-index: -1;
  margin-left: 0px;
  width: 127px;
  height: 4px;
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .line {
    width: 63.5px;
    height: 2px;
  }
}

.top-main .top-hex-item .line:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
  -webkit-transition-timing-function: easeOut;
          transition-timing-function: easeOut;
}

.top-main .top-hex-item .line.is-repeat:before {
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
}

.top-main .top-hex-item .line.hide:before {
  background: transparent;
}

.top-main .top-hex-item .line-1 {
  top: 0;
  left: 63px;
  margin-top: -1.5px;
  margin-left: 0.5px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .line-1 {
    left: 31.5px;
    margin-top: -0.5px;
    margin-left: -0.5px;
  }
}

.top-main .top-hex-item .line-2 {
  top: 0;
  left: 191px;
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
  margin-top: -1.5px;
  margin-left: 1px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .line-2 {
    left: 95.5px;
    margin-top: -1px;
    margin-left: -1px;
  }
}

.top-main .top-hex-item .line-3 {
  top: 110px;
  left: 254px;
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
  margin-top: -1px;
  margin-left: 0.5px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .line-3 {
    top: 55px;
    left: 127px;
    margin-top: -0.5px;
    margin-left: 0px;
  }
}

.top-main .top-hex-item .line-4 {
  top: 220px;
  left: 191px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  margin-top: -1.5px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .line-4 {
    top: 110px;
    left: 95.5px;
    margin-top: -0.5px;
  }
}

.top-main .top-hex-item .line-5 {
  top: 220px;
  left: 63px;
  -webkit-transform: rotate(-120deg);
          transform: rotate(-120deg);
  margin-top: -1px;
  margin-left: 1px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .line-5 {
    top: 110px;
    left: 31.5px;
    margin-top: -0.5px;
    margin-left: 0.5px;
  }
}

.top-main .top-hex-item .line-6 {
  top: 110px;
  left: 0px;
  -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
  margin-top: -1px;
  margin-left: 1px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .line-6 {
    top: 55px;
    margin-top: -0.5px;
    margin-left: 0px;
  }
}

.top-main .top-hex-item .line.is-show:before {
  left: 129px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .line.is-show:before {
    left: 63.5px;
  }
}

.top-main .top-hex-item .js-top-animate-container .line:before {
  -webkit-transition-duration: 1.5s;
          transition-duration: 1.5s;
  -webkit-transition-timing-function: easeIn;
          transition-timing-function: easeIn;
}

.top-main .top-hex-item .photo-main {
  margin-top: 0;
  margin-left: 0;
  top: 0;
  right: -175px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .photo-main {
    display: none;
  }
}

.top-main .top-hex-item .photo-1 {
  top: 102px;
  left: 971px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .photo-1 {
    top: 216px;
    left: 191px;
  }
}

.top-main .top-hex-item .photo-2 {
  top: 322px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .photo-2 {
    top: 216px;
    left: 0;
  }
}

.top-main .top-hex-item .photo-3 {
  top: 432px;
  left: 780px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .photo-3 {
    top: 326px;
    left: 191px;
  }
}

.top-main .top-hex-item .photo-4 {
  top: -8px;
  left: 780px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .photo-4 {
    top: 2px;
    left: 191px;
  }
}

.top-main .top-hex-item .photo-5 {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .photo-5 {
    display: block;
    top: 2px;
    left: 286.5px;
  }
}

.top-main .top-hex-item .photo-6 {
  top: 212px;
  left: 780px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .photo-6 {
    top: 271px;
    left: 95.5px;
  }
}

.top-main .top-hex-item .photo-7 {
  top: 322px;
  left: 971px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .photo-7 {
    top: 271px;
    left: 286.5px;
  }
}

.top-main .top-hex-item .photo-8 {
  top: 212px;
  right: -175px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .photo-8 {
    top: 161px;
    left: 286.5px;
    z-index: 1;
  }
}

.top-main .top-hex-item .photo-9 {
  top: 542px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-main .top-hex-item .photo-9 {
    top: 161px;
    left: 286.5px;
  }
}

/**=========================================
* [top] top-section-lead
=========================================*/
.top-section.top-section-lead {
  position: relative;
  margin-top: -113px;
  height: 771px;
}

@media screen and (max-width: 767px) {
  .top-section.top-section-lead {
    margin-top: 0;
    height: 418px;
  }
}

.top-section.top-section-lead .top-lead {
  margin: 0;
  padding: 251.2px 0 0;
  width: 50%;
  font-size: 2rem;
  line-height: 1.75;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .top-section.top-section-lead .top-lead {
    padding: 13.5px 0 0;
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.85714;
    letter-spacing: 0;
  }
}

.top-section.top-section-lead .top-lead.js-animate-lead {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 0;
}

.top-section.top-section-lead .top-lead.is-show {
  opacity: 1;
}

.top-section.top-section-lead .top-hex-item {
  /* 画像 */
}

.top-section.top-section-lead .top-hex-item .photo-1 {
  top: 0;
  left: 780px;
}

@media screen and (max-width: 767px) {
  .top-section.top-section-lead .top-hex-item .photo-1 {
    top: 34px;
    left: 286.5px;
  }
}

.top-section.top-section-lead .top-hex-item .photo-2 {
  top: 220px;
  left: 780px;
}

@media screen and (max-width: 767px) {
  .top-section.top-section-lead .top-hex-item .photo-2 {
    top: 144px;
    left: 286.5px;
  }
}

.top-section.top-section-lead .top-hex-item .photo-3 {
  top: 330px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section.top-section-lead .top-hex-item .photo-3 {
    top: 254px;
    left: 286.5px;
  }
}

.top-section.top-section-lead .top-hex-item .photo-4 {
  top: 550px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section.top-section-lead .top-hex-item .photo-4 {
    top: 309px;
    left: 191px;
  }
}

/**=========================================
* [top] hex-title base
=========================================*/
.hex-title-container {
  position: relative;
  z-index: 10;
  margin: 0 auto;
  width: 1240px;
  -webkit-perspective: 4000px;
          perspective: 4000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective-origin: bottom;
          perspective-origin: bottom;
}

@media screen and (max-width: 767px) {
  .hex-title-container {
    width: 320px;
  }
}

a.hex-title {
  cursor: pointer;
}

a.hex-title.link {
  z-index: 5;
}

a.hex-title.link .inner {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
}

@media screen and (min-width: 768px) {
  a.hex-title.link:hover {
    opacity: 1;
  }
}

@media screen and (min-width: 768px) {
  a.hex-title.link:hover .inner {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
    opacity: 1;
  }
}

.hex-title {
  position: absolute;
  z-index: 50;
  margin: 0;
  margin-top: -2px;
  margin-left: -4px;
  width: 258px;
  height: 224px;
  text-align: center;
  font-weight: normal;
}

@media screen and (max-width: 767px) {
  .hex-title {
    margin-top: -1px;
    margin-left: -2px;
    width: 129px;
    height: 112px;
  }
}

.hex-title .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 258px;
  height: 224px;
}

@media screen and (max-width: 767px) {
  .hex-title .inner {
    width: 129px;
    height: 112px;
  }
}

.hex-title .photo {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

.hex-title > span {
  display: block;
}

.hex-title .text-eng {
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  display: block;
  position: relative;
  padding-left: 2px;
  font-size: 3.2rem;
  line-height: 1;
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .hex-title .text-eng {
    font-size: 1.6rem;
  }
}

.hex-title .text-eng.letter1 {
  padding-left: 1px;
}

.hex-title .text {
  display: block;
  position: relative;
  margin-top: 10px;
  padding-left: 2px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .hex-title .text {
    margin-top: 0;
  }
}

.hex-title .text.letter-1 {
  padding-left: 0;
}

.hex-title .icon {
  position: absolute;
  left: 50%;
  bottom: 30px;
  margin-left: -11px;
}

@media screen and (max-width: 767px) {
  .hex-title .icon {
    bottom: 16px;
  }
}

.hex-title .icon:before {
  font-size: 2.2rem;
  color: #fff;
}

/**=========================================
* [top] top-section format
=========================================*/
.top-section {
  position: relative;
}

.top-section .l-container, .top-section .member-flow-inner {
  position: relative;
}

@media screen and (max-width: 767px) {
  .top-section .l-container, .top-section .member-flow-inner {
    margin: 0 auto;
    width: 320px;
  }
}

.top-section .top-lead {
  position: absolute;
  font-size: 1.8rem;
  line-height: 1.66667;
}

@media screen and (max-width: 767px) {
  .top-section .top-lead {
    position: relative;
    width: 100%;
    font-size: 1.3rem;
    line-height: 1.69231;
    letter-spacing: 1px;
    color: #000;
  }
}

@media screen and (max-width: 767px) {
  .top-section .top-section-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 1px;
    color: #000;
  }
}

/**=========================================
* [top] top-section-company
=========================================*/
.top-section-company {
  margin-top: 0;
  height: 770px;
}

@media screen and (max-width: 767px) {
  .top-section-company {
    height: 495px;
  }
}

.top-section-company .hex-title {
  top: 330px;
  left: 398px;
}

@media screen and (max-width: 767px) {
  .top-section-company .hex-title {
    top: 165px;
    left: 95.5px;
  }
}

@media screen and (max-width: 767px) {
  .top-section-company .top-section-title {
    position: relative;
    top: 350px;
  }
}

.top-section-company .top-lead {
  right: 100px;
  margin: 0;
  padding: 394.2px 0 0;
  width: 460px;
}

@media screen and (max-width: 767px) {
  .top-section-company .top-lead {
    position: relative;
    right: inherit;
    top: 350px;
    padding: 8px 5px 0 0;
    width: 100%;
  }
}

.top-section-company .top-hex-item {
  /* 画像 */
}

.top-section-company .top-hex-item .photo-main {
  top: 0;
  left: 16px;
}

@media screen and (max-width: 767px) {
  .top-section-company .top-hex-item .photo-main {
    left: -95.5px;
    width: 321px;
  }
}

.top-section-company .top-hex-item .photo-1 {
  top: -110px;
  left: 398px;
}

@media screen and (max-width: 767px) {
  .top-section-company .top-hex-item .photo-1 {
    top: -55px;
    left: 95.5px;
  }
}

.top-section-company .top-hex-item .photo-2 {
  top: 550px;
  left: 398px;
}

@media screen and (max-width: 767px) {
  .top-section-company .top-hex-item .photo-2 {
    top: 220px;
    left: 191px;
  }
}

.top-section-company .top-hex-item .photo-3 {
  top: 660px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-company .top-hex-item .photo-3 {
    top: 275px;
    left: 286.5px;
  }
}

/**=========================================
* [top] top-section-business
=========================================*/
.top-section-business {
  margin-top: 0;
  height: 660px;
}

@media screen and (max-width: 767px) {
  .top-section-business {
    height: 549px;
  }
}

.top-section-business .hex-title {
  top: 331px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-business .hex-title {
    top: 220px;
    left: 95.5px;
  }
}

@media screen and (max-width: 767px) {
  .top-section-business .top-section-title {
    position: relative;
    top: 405.2px;
  }
}

.top-section-business .top-lead {
  left: 93px;
  margin: 0;
  padding: 394.2px 0 0;
  width: 450px;
}

@media screen and (max-width: 767px) {
  .top-section-business .top-lead {
    position: relative;
    top: 405.2px;
    left: inherit;
    padding-top: 8px;
    width: 100%;
  }
}

.top-section-business .top-hex-item {
  /* 画像 */
}

.top-section-business .top-hex-item .photo-main {
  top: 0;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-business .top-hex-item .photo-main {
    top: 55px;
    left: 95.5px;
    width: 321px;
  }
}

.top-section-business .top-hex-item .photo-1 {
  top: 0px;
  left: 397px;
}

@media screen and (max-width: 767px) {
  .top-section-business .top-hex-item .photo-1 {
    top: 55px;
    left: 0;
    width: 226px;
  }
}

.top-section-business .top-hex-item .photo-2 {
  top: 550px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-business .top-hex-item .photo-2 {
    top: 165px;
    left: 0;
  }
}

.top-section-business .top-hex-item .photo-3 {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-section-business .top-hex-item .photo-3 {
    display: block;
    top: 0px;
    left: 286.5px;
  }
}

.top-section-business .top-hex-item .photo-4 {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-section-business .top-hex-item .photo-4 {
    display: block;
    top: 221px;
    left: -95.5px;
  }
}

/**=========================================
* [top] top-section-work
=========================================*/
.top-section-work {
  height: 770px;
}

@media screen and (max-width: 767px) {
  .top-section-work {
    height: 496px;
  }
}

.top-section-work .hex-title {
  top: 219px;
  left: 399px;
}

@media screen and (max-width: 767px) {
  .top-section-work .hex-title {
    top: 111px;
    left: 96.5px;
  }
}

.top-section-work .text-eng {
  text-align: left;
  line-height: 1.1875;
}

@media screen and (max-width: 767px) {
  .top-section-work .text-eng {
    top: -5px;
    letter-spacing: 1px;
  }
}

@media screen and (max-width: 767px) {
  .top-section-work .top-section-title {
    position: relative;
    top: 405.2px;
  }
}

.top-section-work .top-lead {
  right: 93px;
  margin: 0;
  padding: 189.2px 0 0;
  width: 450px;
}

@media screen and (max-width: 767px) {
  .top-section-work .top-lead {
    position: relative;
    top: 405.2px;
    right: inherit;
    padding-top: 8px;
    width: 100%;
  }
}

.top-section-work .top-hex-item {
  /* 画像 */
}

.top-section-work .top-hex-item .photo-green {
  top: 0px;
  left: 398px;
}

.top-section-work .top-hex-item .photo-1 {
  top: 109px;
  left: 16px;
}

@media screen and (max-width: 767px) {
  .top-section-work .top-hex-item .photo-1 {
    top: 56px;
    left: -95.5px;
    width: 321px;
  }
}

.top-section-work .top-hex-item .photo-2 {
  top: 550px;
  left: 208px;
}

@media screen and (max-width: 767px) {
  .top-section-work .top-hex-item .photo-2 {
    top: 276px;
    left: 0;
  }
}

.top-section-work .top-hex-item .photo-3 {
  top: 440px;
  left: 398px;
  z-index: 5;
}

@media screen and (max-width: 767px) {
  .top-section-work .top-hex-item .photo-3 {
    top: 221px;
    left: 96.5px;
  }
}

.top-section-work .top-hex-item .photo-4 {
  top: 329px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-work .top-hex-item .photo-4 {
    top: 165px;
    left: 191px;
    width: 226px;
  }
}

.top-section-work .top-hex-item .photo-5 {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-section-work .top-hex-item .photo-5 {
    display: block;
    top: 2px;
    left: -94.5px;
  }
}

/**=========================================
* [top] top-section-mecha_chemi
=========================================*/
.top-section-mecha_chemi {
  margin-top: 0;
  height: 660px;
}

@media screen and (max-width: 767px) {
  .top-section-mecha_chemi {
    height: 550px;
  }
}

.top-section-mecha_chemi .hex-title {
  top: 221px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-mecha_chemi .hex-title {
    top: 166px;
    left: 96.5px;
  }
}

.top-section-mecha_chemi .hex-title .text-eng {
  letter-spacing: 0;
  -webkit-transform: scaleX(0.85);
          transform: scaleX(0.85);
  margin: -20px -100px 0;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
}

.top-section-mecha_chemi .hex-title .text {
  letter-spacing: 0;
}

@media screen and (max-width: 767px) {
  .top-section-mecha_chemi .top-section-title {
    position: relative;
    top: 405.2px;
  }
}

.top-section-mecha_chemi .top-lead {
  left: 93px;
  margin: 0;
  padding: 394.2px 0 0;
  width: 450px;
}

@media screen and (max-width: 767px) {
  .top-section-mecha_chemi .top-lead {
    position: relative;
    top: 405.2px;
    left: inherit;
    padding-top: 8px;
    width: 100%;
  }
}

.top-section-mecha_chemi .top-hex-item {
  /* 画像 */
}

.top-section-mecha_chemi .top-hex-item .photo-main {
  top: 0;
  left: 398px;
}

@media screen and (max-width: 767px) {
  .top-section-mecha_chemi .top-hex-item .photo-main {
    top: 55px;
    left: 0px;
    width: 416.5px;
  }
}

.top-section-mecha_chemi .top-hex-item .photo-1 {
  top: -110px;
  left: 208px;
}

@media screen and (max-width: 767px) {
  .top-section-mecha_chemi .top-hex-item .photo-1 {
    top: 220px;
    left: -94.5px;
    width: 226px;
  }
}

.top-section-mecha_chemi .top-hex-item .photo-2 {
  top: 110px;
  left: 17px;
}

@media screen and (max-width: 767px) {
  .top-section-mecha_chemi .top-hex-item .photo-2 {
    top: 0px;
    left: 191px;
  }
}

.top-section-mecha_chemi .top-hex-item .photo-3 {
  top: 441px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-mecha_chemi .top-hex-item .photo-3 {
    top: 276px;
    left: 96.5px;
  }
}

/**=========================================
* [top] top-section-story
=========================================*/
.top-section-story {
  margin-top: 0;
  height: 881px;
  /* 画像 */
}

@media screen and (max-width: 767px) {
  .top-section-story {
    height: 825px;
  }
}

.top-section-story .hex-title {
  top: 110px;
  left: 399px;
  z-index: 10;
}

@media screen and (max-width: 767px) {
  .top-section-story .hex-title {
    top: 55px;
    left: 96.5px;
  }
}

@media screen and (max-width: 767px) {
  .top-section-story .hex-title .text {
    font-size: 1rem;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}

.top-section-story .hex-title .icon {
  z-index: 7;
}

@media screen and (max-width: 767px) {
  .top-section-story .hex-title .text-eng {
    letter-spacing: 1px;
    text-align: center;
  }
}

.top-section-story .hex-title .text-eng-small, .top-section-story .hex-title .text-eng-num {
  position: relative;
  z-index: 6;
  display: inline;
  vertical-align: middle;
  letter-spacing: 2px;
  color: #fff;
}

.top-section-story .hex-title .text-eng-small {
  font-size: 1.8rem;
}

@media screen and (max-width: 767px) {
  .top-section-story .hex-title .text-eng-small {
    font-size: 1.2rem;
  }
}

.top-section-story .hex-title .text-eng-num {
  font-size: 4rem;
}

@media screen and (max-width: 767px) {
  .top-section-story .hex-title .text-eng-num {
    font-size: 2.5rem;
  }
}

.top-section-story .hex-title--story-1 {
  top: 221px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-story .hex-title--story-1 {
    top: 220px;
    left: 0px;
  }
}

.top-section-story .hex-title--story-1 .photo {
  z-index: 5;
}

.top-section-story .hex-title--story-2 {
  top: 331px;
  left: 399px;
}

@media screen and (max-width: 767px) {
  .top-section-story .hex-title--story-2 {
    top: 550px;
    left: 191px;
  }
}

.top-section-story .hex-title--story-2 .photo {
  z-index: 5;
}

.top-section-story .text-eng {
  text-align: left;
  line-height: 1.1875;
}

.top-section-story .top-project-title-1,
.top-section-story .top-project-title-2 {
  position: absolute;
  text-shadow: 0px 0px 7.68px #1f3143;
  margin: 0;
  width: 380px;
  font-size: 2.4rem;
  line-height: 1.5;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .top-section-story .top-project-title-1,
  .top-section-story .top-project-title-2 {
    position: absolute;
    right: inherit;
    left: 50%;
    margin: 0 0 0 -127.5px;
    padding: 0;
    width: 100%;
    font-size: 1.3rem;
    line-height: 1.38462;
    width: 255px;
    letter-spacing: 1px;
  }
}

.top-section-story .top-project-title-1 {
  z-index: 3;
  right: 200px;
  padding: 474.2px 0 0;
}

@media screen and (max-width: 767px) {
  .top-section-story .top-project-title-1 {
    top: 0px;
    padding-top: 340px;
  }
}

.top-section-story .top-project-title-2 {
  z-index: 2;
  left: 150px;
  padding: 589.2px 0 0;
}

@media screen and (max-width: 767px) {
  .top-section-story .top-project-title-2 {
    left: 50%;
    padding-top: 670px;
  }
}

.top-section-story .top-lead {
  z-index: 1;
  margin: 0;
  width: 380px;
  color: #fff;
  text-shadow: 0px 0px 7.68px #1f3143;
  letter-spacing: 1px;
}

@media screen and (min-width: 768px) {
  .top-section-story .top-lead {
    width: 390px;
  }
}

@media screen and (max-width: 767px) {
  .top-section-story .top-lead {
    right: inherit;
    width: 100%;
    line-height: 1.38462;
  }
}

.top-section-story .top-lead--story-1 {
  right: 200px;
  padding: 554.2px 0 0;
}

@media screen and (min-width: 768px) {
  .top-section-story .top-lead--story-1 {
    right: 160px;
    width: 420px;
  }
}

@media screen and (max-width: 767px) {
  .top-section-story .top-lead--story-1 {
    position: absolute;
    top: 380px;
    left: 50%;
    right: inherit;
    margin: 0 0 0 -127.5px;
    padding: 0;
    width: 255px;
    letter-spacing: 0px;
  }
}

.top-section-story .top-lead--story-2 {
  left: 150px;
  padding: 669.2px 0 0;
}

@media screen and (min-width: 768px) {
  .top-section-story .top-lead--story-2 {
    width: 440px;
  }
}

@media screen and (max-width: 767px) {
  .top-section-story .top-lead--story-2 {
    position: absolute;
    top: 710px;
    left: 50%;
    right: inherit;
    margin: 0 0 0 -127.5px;
    padding: 0;
    width: 255px;
    letter-spacing: 0;
  }
}

.top-section-story .top-hex-item .photo-1 {
  z-index: 10;
  top: 2px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-story .top-hex-item .photo-1 {
    top: 0;
    left: 191px;
  }
}

.top-section-story .top-hex-item .photo-2 {
  top: 110px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-story .top-hex-item .photo-2 {
    top: 165px;
    left: 0;
    width: 321px;
  }
}

.top-section-story .top-hex-item .photo-3 {
  top: 220px;
  left: 16px;
}

@media screen and (max-width: 767px) {
  .top-section-story .top-hex-item .photo-3 {
    top: 495px;
    left: 0;
    width: 321px;
  }
}

.top-section-story .top-hex-item .photo-4 {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-section-story .top-hex-item .photo-4 {
    display: block;
    top: 0;
    left: 191px;
  }
}

.top-section-story .top-hex-item .photo-5 {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-section-story .top-hex-item .photo-5 {
    display: block;
    top: 55px;
    left: 286.5px;
  }
}

.top-section-story .top-hex-item .photo-6 {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-section-story .top-hex-item .photo-6 {
    display: block;
    top: 716px;
    left: -95.5px;
  }
}

/**=========================================
* [top] top-section-career
=========================================*/
.top-section-career {
  height: 879px;
}

@media screen and (max-width: 767px) {
  .top-section-career {
    height: 605px;
  }
}

.top-section-career .hex-title {
  padding-bottom: 30px;
  top: 220px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-career .hex-title {
    top: 110px;
    left: 96px;
  }
}

.top-section-career .text-eng {
  padding-left: 26px;
  text-align: left;
  line-height: 1.1875;
}

@media screen and (max-width: 767px) {
  .top-section-career .text-eng {
    padding-left: 8px;
    letter-spacing: 1px;
  }
}

@media screen and (max-width: 767px) {
  .top-section-career .top-section-title {
    position: relative;
    top: 294px;
    text-shadow: 0px 0px 7.68px #fff;
    padding: 0 0 0 25px;
  }
}

.top-section-career .top-lead {
  right: 72px;
  margin: 0;
  padding: 249.2px 0 0;
  width: 310px;
}

@media screen and (max-width: 767px) {
  .top-section-career .top-lead {
    position: relative;
    top: 294px;
    text-shadow: 0px 0px 7.68px #fff;
    right: inherit;
    padding: 8px 0 0 25px;
    width: 100%;
  }
}

.top-section-career .top-hex-item {
  /* 画像 */
}

.top-section-career .top-hex-item .photo-main {
  top: 110px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-career .top-hex-item .photo-main {
    top: 220px;
    left: 0px;
    width: 321px;
  }
}

.top-section-career .top-hex-item .photo-1 {
  top: 0px;
  left: 208px;
}

@media screen and (max-width: 767px) {
  .top-section-career .top-hex-item .photo-1 {
    top: 0px;
    left: -94.5px;
  }
}

.top-section-career .top-hex-item .photo-2 {
  top: 110px;
  left: 398px;
}

@media screen and (max-width: 767px) {
  .top-section-career .top-hex-item .photo-2 {
    top: 55px;
    left: 0px;
  }
}

.top-section-career .top-hex-item .photo-3 {
  top: 330px;
  left: 398px;
  z-index: 5;
}

@media screen and (max-width: 767px) {
  .top-section-career .top-hex-item .photo-3 {
    top: 165px;
    left: 0px;
  }
}

.top-section-career .top-hex-item .photo-4 {
  top: 660px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-career .top-hex-item .photo-4 {
    top: 495px;
    left: 191px;
  }
}

.top-section-career .top-hex-item .photo-5 {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-section-career .top-hex-item .photo-5 {
    display: block;
    top: 440px;
    left: 286.5px;
  }
}

/**=========================================
* [top] top-section-corporate
=========================================*/
.top-section-corporate {
  height: 662px;
}

@media screen and (max-width: 767px) {
  .top-section-corporate {
    height: 495px;
  }
}

.top-section-corporate .hex-title {
  padding-bottom: 30px;
  top: 110px;
  left: 398px;
}

@media screen and (max-width: 767px) {
  .top-section-corporate .hex-title {
    top: 55px;
    left: 96.5px;
  }
}

.top-section-corporate .text-eng {
  padding-left: 10px;
  line-height: 1.1875;
}

@media screen and (max-width: 767px) {
  .top-section-corporate .text-eng {
    top: 5px;
    padding-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .top-section-corporate .top-section-title {
    position: relative;
    top: 245px;
    padding: 0 25px 0;
  }
}

.top-section-corporate .top-lead {
  left: 100px;
  margin: 0;
  padding: 174.2px 0 0;
  width: 310px;
}

@media screen and (max-width: 767px) {
  .top-section-corporate .top-lead {
    position: relative;
    top: 245px;
    left: inherit;
    padding: 8px 25px 0;
    width: 100%;
  }
}

.top-section-corporate .top-hex-item {
  /* 画像 */
}

.top-section-corporate .top-hex-item .photo-main {
  top: 0px;
  left: 16px;
}

@media screen and (max-width: 767px) {
  .top-section-corporate .top-hex-item .photo-main {
    top: 165px;
    left: 0;
    width: 321px;
  }
}

.top-section-corporate .top-hex-item .photo-1 {
  top: 0px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-corporate .top-hex-item .photo-1 {
    left: 191px;
  }
}

.top-section-corporate .top-hex-item .photo-2 {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-section-corporate .top-hex-item .photo-2 {
    display: block;
    top: 386px;
    left: -95.5px;
  }
}

/**=========================================
* [top] top-section-recruit
=========================================*/
.top-section-recruit {
  margin-top: -1px;
  height: 769px;
}

@media screen and (max-width: 767px) {
  .top-section-recruit {
    height: 660px;
  }
}

.top-section-recruit .hex-title {
  padding-bottom: 30px;
  top: 219px;
  left: 588px;
}

@media screen and (max-width: 767px) {
  .top-section-recruit .hex-title {
    top: 111px;
    left: 95.5px;
  }
}

.top-section-recruit .text-eng {
  line-height: 1.1875;
}

@media screen and (max-width: 767px) {
  .top-section-recruit .top-section-title {
    text-shadow: 0px 0px 7.68px #fff;
    padding: 220px 0 0 25px;
  }
}

.top-section-recruit .top-lead {
  right: 85px;
  margin: 0;
  padding: 374.2px 0 0;
  width: 310px;
}

@media screen and (max-width: 767px) {
  .top-section-recruit .top-lead {
    text-shadow: 0px 0px 7.68px #fff;
    right: inherit;
    padding: 8px 0 0 25px;
    width: 100%;
  }
}

.top-section-recruit .top-hex-item {
  /* 画像 */
}

.top-section-recruit .top-hex-item .photo-main {
  top: 218px;
  left: 588px;
}

@media screen and (max-width: 767px) {
  .top-section-recruit .top-hex-item .photo-main {
    top: 165px;
    left: 0;
    width: 321px;
  }
}

.top-section-recruit .top-hex-item .photo-1 {
  top: 0px;
  left: 208px;
}

@media screen and (max-width: 767px) {
  .top-section-recruit .top-hex-item .photo-1 {
    top: 0;
    left: -93.5px;
  }
}

.top-section-recruit .top-hex-item .photo-2 {
  top: 109px;
  left: 398px;
}

@media screen and (max-width: 767px) {
  .top-section-recruit .top-hex-item .photo-2 {
    top: 57px;
    left: 1px;
  }
}

.top-section-recruit .top-hex-item .photo-3 {
  top: 330px;
  left: 398px;
}

@media screen and (max-width: 767px) {
  .top-section-recruit .top-hex-item .photo-3 {
    display: none;
  }
}

.top-section-recruit .top-hex-item .photo-4 {
  top: 660px;
  left: 589px;
}

@media screen and (max-width: 767px) {
  .top-section-recruit .top-hex-item .photo-4 {
    top: 441px;
    left: 96.5px;
  }
}

.top-section-recruit .top-hex-item .photo-5 {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-section-recruit .top-hex-item .photo-5 {
    display: block;
    top: 496px;
    left: 1px;
  }
}

.top-section-recruit .top-hex-item .photo-6 {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-section-recruit .top-hex-item .photo-6 {
    display: block;
    top: 552px;
    left: -93.5px;
  }
}

/**
 * Company Page Style
**/
.company-section {
  position: relative;
}

.company-section:before {
  content: "";
  display: block;
  position: absolute;
  top: 40px;
  left: 50%;
  z-index: 1;
  margin-left: -95px;
  width: 175px;
  height: 610px;
  background: url(../img/company/miryoku_bg_1.png) no-repeat left center;
  background-size: 100% 100%;
}

@media screen and (max-width: 767px) {
  .company-section:before {
    display: none;
  }
}

.company-section:after {
  content: "";
  display: block;
  position: absolute;
  top: 40px;
  left: calc(50% + 80px);
  right: -100%;
  z-index: 1;
  background-color: #f4f4f4;
  height: 610px;
}

@media screen and (max-width: 767px) {
  .company-section:after {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .company-section--2:before {
    height: 750px;
  }
}

@media screen and (min-width: 768px) {
  .company-section--2:after {
    height: 750px;
  }
}

.company-section-bg-1 {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: url(../img/company/miryoku_img_bg.png) no-repeat center bottom;
}

@media screen and (max-width: 767px) {
  .company-section-bg-1 {
    background-image: url(../img/company/miryoku_img_bg_sp.png);
    background-size: 655px auto;
  }
}

.company-section-inner {
  position: relative;
  margin: 0 auto;
  width: 1240px;
}

@media screen and (max-width: 767px) {
  .company-section-inner {
    width: 100%;
  }
}

.company-section-lead {
  position: relative;
  background-color: #4c5a69;
  margin: 0;
  padding: 70px 610px 0 15px;
  height: 305px;
  font-size: 3.2rem;
  line-height: 1.36842;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
  .company-section-lead {
    padding: 34.5px 40px 79.5px;
    height: auto;
    font-size: 1.9rem;
    line-height: 1.36842;
  }
}

.company-section-lead:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
  z-index: 1;
  background-color: #4c5a69;
}

@media screen and (max-width: 767px) {
  .company-section-lead:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    height: 53px;
    background: url(../img/company/miryoku_bg_1_sp.png) no-repeat left center;
    background-size: 100% 100%;
  }
}

@media screen and (min-width: 768px) {
  .company-section--2 .company-section-lead {
    height: 375px;
  }
}

.company-section-body {
  position: relative;
  z-index: 5;
  margin-top: -305px;
  margin-left: 700px;
  padding-top: 105px;
  padding-right: 20px;
  height: 610px;
}

@media screen and (max-width: 767px) {
  .company-section-body {
    z-index: 3;
    background-color: #f4f4f4;
    margin-top: 0;
    margin-left: 0;
    padding: 18px 40px 75px;
    height: inherit;
  }
}

@media screen and (min-width: 768px) {
  .company-section--2 .company-section-body {
    padding-top: 30px;
  }
}

.company-section-image--1 {
  position: relative;
  z-index: 4;
  margin-top: -320px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .company-section-image--1 {
    margin: -50px auto 0;
    padding-bottom: 62px;
    max-width: 320px;
  }
}

.company-section-image--2 {
  position: relative;
  z-index: 4;
  margin-top: -390px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .company-section-image--2 {
    margin: -40px auto 0;
    max-width: 320px;
  }
}

.company-section-image--3 {
  position: relative;
  z-index: 4;
  margin-top: -50px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .company-section-image--3 {
    margin: -50px auto 0;
    padding: 0 10px;
  }
  .company-section-image--3 img {
    width: 100%;
    max-width: 320px;
  }
}

.company-tenbou-lead {
  margin: 34px 0 -6px;
  font-size: 2.4rem;
  line-height: 1.5;
  text-align: center;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .company-tenbou-lead {
    margin: 16px 0 -4px;
    padding: 0 40px;
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

/**=========================================
* [company] product
* 新しい製品
=========================================*/
.product-title {
  margin: 76px 0 0;
  font-size: 3.6rem;
  line-height: 1;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .product-title {
    margin-top: 50px;
    font-size: 1.9rem;
  }
}

.product-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -20px;
  padding: 0;
  list-style: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 767px) {
  .product-list {
    display: block;
    margin: 0;
  }
}

.product-list > li {
  position: relative;
  padding: 40px 40px 0;
  width: 50%;
}

@media screen and (max-width: 767px) {
  .product-list > li {
    padding: 25px 27px 0;
    width: 100%;
  }
}

.product-list > li:first-child {
  margin: 0 25%;
}

@media screen and (max-width: 767px) {
  .product-list > li:first-child {
    margin: 0;
  }
}

.product-list > li > .text {
  position: absolute;
  left: 100px;
  bottom: 66px;
  margin: 0;
  color: #a8cb0c;
  font-size: 2.4rem;
  line-height: 1;
  font-weight: bold;
  letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
  .product-list > li > .text {
    left: 40px;
    bottom: 25.25253%;
    font-size: 1.6rem;
  }
}

/**=========================================
* [company] data
=========================================*/
.data-text {
  margin: 28px 0 -12px 0;
  font-size: 3rem;
  line-height: 1.8;
  font-weight: bold;
  color: #1f3143;
}

@media screen and (max-width: 767px) {
  .data-text {
    margin: 14px 0 -6px 0;
    padding: 0 12px;
    font-size: 1.5rem;
  }
}

.data-text:first-child {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  .data-text--1 {
    position: absolute;
    left: 556px;
    font-size: 3.2rem;
    line-height: 1.6875;
    margin-top: 80px;
  }
}

@media screen and (max-width: 767px) {
  .data-text--1 {
    display: inline-block;
  }
}

@media screen and (min-width: 768px) {
  .data-text--2 {
    position: absolute;
    left: 100px;
    margin-top: 450px;
  }
}

@media screen and (max-width: 767px) {
  .data-text--2 {
    display: inline-block;
    margin-top: 44px;
  }
}

@media screen and (max-width: 767px) {
  .data-image {
    margin-top: 15px;
  }
}

.data-image--2 {
  padding-top: 90px;
}

@media screen and (max-width: 767px) {
  .data-image--2 {
    padding-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .data-image {
    width: 100%;
  }
  .data-image > img {
    width: 100%;
    max-width: 375px;
  }
}

.data-row-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 80px;
}

@media screen and (max-width: 767px) {
  .data-row-2 {
    margin-top: 40px;
  }
}

.data-row-2:first-child {
  margin-top: 0;
}

.data-row-2 > .data-col-1 {
  width: 50%;
}

@media screen and (max-width: 767px) {
  .data-row-2 > .data-col-1 {
    padding: 0 12px;
    width: 100%;
  }
  .data-row-2 > .data-col-1 > img {
    width: 100%;
    max-width: 160px;
  }
}

@media screen and (max-width: 767px) {
  .data-row-2.break-sp {
    display: block;
  }
  .data-row-2.break-sp > .data-col-1 {
    width: 100%;
  }
  .data-row-2.break-sp > .data-col-1 > img {
    width: 100%;
    max-width: 375px;
  }
  .data-row-2.break-sp > .data-col-1:nth-child(2) {
    margin-top: 40px;
  }
}

@media screen and (max-width: 767px) {
  .data-row-2--product .data-col-1 {
    width: 50%;
  }
}

.data-title {
  margin: 80px 0 0 0;
  font-size: 4rem;
  line-height: 1;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .data-title {
    margin-top: 50px;
    padding: 0 12px;
    font-size: 2rem;
    line-height: 1.3;
  }
}

.data-title:first-child {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .data-title:first-child {
    margin-top: 25px;
  }
}

.data-title > .text-small {
  display: block;
  margin-top: 18px;
  font-size: 1.8rem;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .data-title > .text-small {
    margin-top: 9px;
    font-size: 1rem;
  }
}

/**=========================================
* [company] global
=========================================*/
.global-member {
  overflow: hidden;
  position: relative;
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .global-member {
    margin: 25px 14px 0;
  }
}

.global-member:first-child {
  margin-top: 0;
}

.global-member:after {
  content: "";
  display: block;
  position: absolute;
  top: 60px;
  right: 0;
  z-index: 2;
  background: transparent url(../img/company/global/person_ttl_green.png) no-repeat right bottom;
  background-size: auto;
  height: 230px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .global-member:after {
    top: 128px;
    background-image: url(../img/company/global/person_ttl_green_sp.png);
    background-size: auto 100%;
    height: 59px;
  }
}

.global-member-header {
  position: relative;
  cursor: pointer;
  margin-bottom: -1px;
}

.global-member-header:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: 100% auto;
  background-position: left top;
  background-repeat: no-repeat;
  width: 100%;
  bottom: 0;
}

.global-member-header--1:before {
  background-image: url(../img/company/global/member_1_bg.jpg);
}

@media screen and (max-width: 767px) {
  .global-member-header--1:before {
    background-image: url(../img/company/global/member_1_bg_sp.jpg);
  }
}

.global-member-header--2:before {
  background-image: url(../img/company/global/member_2_bg.jpg);
}

@media screen and (max-width: 767px) {
  .global-member-header--2:before {
    background-image: url(../img/company/global/member_2_bg_sp.jpg);
  }
}

.global-member-header--3:before {
  background-image: url(../img/company/global/member_3_bg.jpg);
}

@media screen and (max-width: 767px) {
  .global-member-header--3:before {
    background-image: url(../img/company/global/member_3_bg_sp.jpg);
  }
}

.global-member-header--4:before {
  background-image: url(../img/company/global/member_4_bg.jpg);
}

@media screen and (max-width: 767px) {
  .global-member-header--4:before {
    background-image: url(../img/company/global/member_4_bg_sp.jpg);
  }
}

.global-member-header--5:before {
  background-image: url(../img/company/global/member_5_bg.jpg);
}

@media screen and (max-width: 767px) {
  .global-member-header--5:before {
    background-image: url(../img/company/global/member_5_bg_sp.jpg);
  }
}

.global-member-header--6:before {
  background-image: url(../img/company/global/member_6_bg.jpg);
}

@media screen and (max-width: 767px) {
  .global-member-header--6:before {
    background-image: url(../img/company/global/member_6_bg_sp.jpg);
  }
}

.global-member-header--7:before {
  background-image: url(../img/company/global/member_7_bg.jpg);
}

@media screen and (max-width: 767px) {
  .global-member-header--7:before {
    background-image: url(../img/company/global/member_7_bg_sp.jpg);
  }
}

@media screen and (min-width: 768px) {
  .global-member-header:hover:before,
  .global-member-header:hover .global-member-title {
    opacity: 0.7;
  }
}

.global-member-header:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 40px;
  left: 40px;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.8);
  height: 60px;
}

@media screen and (max-width: 767px) {
  .global-member-header:after {
    display: none;
  }
}

.global-member-header .icon-toggle {
  display: block;
  position: absolute;
  right: 40px;
  top: 50%;
  z-index: 3;
  background-color: #333333;
  margin-top: -35px;
  width: 70px;
  height: 70px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .global-member-header .icon-toggle {
    top: 207px;
    right: 15px;
    margin-top: 0;
    -webkit-transform: scale(0.643);
            transform: scale(0.643);
    -webkit-transform-origin: right top;
            transform-origin: right top;
  }
}

.global-member-header .icon-toggle > span {
  position: relative;
  display: inline-block;
  width: 33px;
  height: 70px;
}

.global-member-header .icon-toggle > span:before, .global-member-header .icon-toggle > span:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  background-color: #fff;
  margin-top: -12px;
  height: 3px;
  width: 26px;
  -webkit-transition: .15s;
  transition: .15s;
}

.global-member-header .icon-toggle > span:before {
  left: 0;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.global-member-header .icon-toggle > span:after {
  right: 0;
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

@media screen and (min-width: 768px) {
  .global-member-header:hover .icon-toggle > span:before, .global-member-header:hover .icon-toggle > span:after {
    margin-top: -6px;
  }
}

.global-member-title {
  position: relative;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  padding: 80px 130px 60px 460px;
  width: 100%;
  height: 290px;
  font-weight: normal;
  text-align: left;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .global-member-title {
    padding: 187px 0 0;
    height: inherit;
  }
}

@media screen and (max-width: 767px) {
  .global-member-title .inner {
    background: rgba(168, 203, 12, 0.8);
    padding: 20px 68px 20px 28px;
    width: 100%;
  }
}

.global-member-title .icon-flag {
  position: absolute;
  width: 74px;
}

@media screen and (max-width: 767px) {
  .global-member-title .icon-flag {
    top: 148px;
    right: 15px;
    width: 57px;
  }
}

.global-member-title .text-1 {
  display: block;
  margin-top: -5px;
  padding-left: 100px;
  font-size: 1.8rem;
  line-height: 1.55556;
}

@media screen and (max-width: 767px) {
  .global-member-title .text-1 {
    padding-left: 0;
    font-size: 1.6rem;
  }
}

.global-member-title .text-2 {
  display: block;
  margin-top: 5px;
  padding-left: 100px;
  font-size: 1.5rem;
  line-height: 1.55556;
}

@media screen and (max-width: 767px) {
  .global-member-title .text-2 {
    padding-left: 0;
    font-size: 1.4rem;
  }
}

.global-member .is-toggle-button-active .icon-toggle > span:before, .global-member .is-toggle-button-active .icon-toggle > span:after {
  margin-top: -20px;
  width: 50px;
}

.global-member-body {
  display: none;
  background-color: #b8d43b;
  position: relative;
  z-index: 4;
  padding: 0 40px 40px;
}

@media screen and (max-width: 767px) {
  .global-member-body {
    padding: 0 15px 15px;
  }
}

.global-member-body .inner {
  background: rgba(255, 255, 255, 0.8);
  padding: 60px 60px 120px;
}

@media screen and (max-width: 767px) {
  .global-member-body .inner {
    padding: 30px 13px;
  }
}

.global-member-body section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 60px 0 0 0;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .global-member-body section {
    display: block;
    margin-top: 30px;
  }
}

.global-member-body section:first-child {
  margin-top: 0;
}

.global-member-body .text-container {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-right: 60px;
}

@media screen and (max-width: 767px) {
  .global-member-body .text-container {
    padding-right: 0;
  }
}

.global-member-body .title {
  margin: -7px 0;
  font-size: 1.8rem;
  line-height: 1.77778;
}

.global-member-body .image {
  width: 380px;
}

@media screen and (max-width: 767px) {
  .global-member-body .image {
    margin-top: 30px;
    width: 100%;
  }
}

/**=========================================
* [company] global-map
* 海外拠点
=========================================*/
.global-map-nav {
  position: relative;
  background: url(../img/company/global/map_bg.png) no-repeat center top;
  background-size: 100% auto;
  margin: 40px 0 0;
  height: 447px;
}

@media screen and (max-width: 767px) {
  .global-map-nav {
    background-image: url(../img/company/global/map_bg_sp.png);
    margin: 20px auto 0;
    max-width: 350px;
    height: 133px;
  }
}

.global-map-nav-item {
  cursor: pointer;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .global-map-nav-item {
    background-size: 100% auto;
  }
}

@media screen and (min-width: 768px) {
  .global-map-nav-item:hover img {
    opacity: 0;
  }
}

.global-map-nav-item.is-tab-button-active img {
  opacity: 0;
}

.global-map-nav-item.eu {
  top: 14px;
  left: 134px;
}

@media screen and (max-width: 767px) {
  .global-map-nav-item.eu {
    top: 5px;
    left: 38px;
    width: 62px;
    height: 55.5px;
  }
}

@media screen and (min-width: 768px) {
  .global-map-nav-item.eu:hover {
    background-image: url(../img/company/global/btn_europe_on.png);
  }
}

.global-map-nav-item.eu.is-tab-button-active {
  background-image: url(../img/company/global/btn_europe_on.png);
}

@media screen and (max-width: 767px) {
  .global-map-nav-item.eu.is-tab-button-active {
    background-image: url(../img/company/global/btn_europe_on_sp.png);
  }
}

.global-map-nav-item.asia {
  top: 135px;
  left: 358px;
}

@media screen and (max-width: 767px) {
  .global-map-nav-item.asia {
    top: 38px;
    left: 101px;
    width: 62.5px;
    height: 55.5px;
  }
}

@media screen and (min-width: 768px) {
  .global-map-nav-item.asia:hover {
    background-image: url(../img/company/global/btn_asia_on.png);
  }
}

.global-map-nav-item.asia.is-tab-button-active {
  background-image: url(../img/company/global/btn_asia_on.png);
}

@media screen and (max-width: 767px) {
  .global-map-nav-item.asia.is-tab-button-active {
    background-image: url(../img/company/global/btn_asia_on_sp.png);
  }
}

.global-map-nav-item.na {
  top: 45px;
  left: 800px;
}

@media screen and (max-width: 767px) {
  .global-map-nav-item.na {
    top: 12px;
    left: 226px;
    width: 68.5px;
    height: 60.5px;
  }
}

@media screen and (min-width: 768px) {
  .global-map-nav-item.na:hover {
    background-image: url(../img/company/global/btn_na_on.png);
  }
}

.global-map-nav-item.na.is-tab-button-active {
  background-image: url(../img/company/global/btn_na_on.png);
}

@media screen and (max-width: 767px) {
  .global-map-nav-item.na.is-tab-button-active {
    background-image: url(../img/company/global/btn_na_on_sp.png);
  }
}

.global-map-body {
  background-color: rgba(31, 49, 67, 0.8);
  margin: 0 40px;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .global-map-body {
    margin: 0 25px;
  }
}

.global-map-title {
  position: relative;
  left: -60px;
  display: inline-block;
  background: url(../img/company/global/map_ttl_bg.png) no-repeat right top;
  background-size: 100% 100%;
  margin: 0;
  padding: 10px 60px;
  color: #ff6600;
  font-size: 1.8rem;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .global-map-title {
    left: -13px;
    padding: 7px 30px;
    font-size: 1.4rem;
  }
}

.global-map-content {
  background-repeat: no-repeat;
  background-position: right top;
  padding: 108px 30px 40px 60px;
}

@media screen and (max-width: 767px) {
  .global-map-content {
    background-size: 320px auto;
    padding: 100px 13px 50px;
  }
}

@media screen and (min-width: 768px) {
  .global-map-content .mCS_no_scrollbar {
    padding-right: 30px;
  }
}

.global-map-content--eu {
  background-image: url(../img/company/global/map_bg_europe.png);
}

@media screen and (max-width: 767px) {
  .global-map-content--eu {
    background-image: url(../img/company/global/map_bg_europe_sp.png);
  }
}

.global-map-content--asia {
  background-image: url(../img/company/global/map_bg_asia.png);
}

@media screen and (max-width: 767px) {
  .global-map-content--asia {
    background-image: url(../img/company/global/map_bg_asia_sp.png);
  }
}

.global-map-content--na {
  background-image: url(../img/company/global/map_bg_na.png);
}

@media screen and (max-width: 767px) {
  .global-map-content--na {
    background-image: url(../img/company/global/map_bg_na_sp.png);
  }
}

.global-map-content .js-scrollbar-content {
  margin-top: 80px;
}

@media screen and (max-width: 767px) {
  .global-map-content .js-scrollbar-content {
    margin-top: 25px;
  }
}

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

.global-place-list > li {
  margin: 0;
  border-bottom: 1px solid #cdcdcd;
  padding: 12px 0 13.83333px;
}

.global-place-list > li:first-child {
  padding-top: 0;
}

.global-place-list > li .text-1 {
  margin: 0;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.55556;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .global-place-list > li .text-1 {
    font-size: 1.4rem;
    letter-spacing: 1px;
  }
}

.global-place-list > li .text-1 > a {
  color: #fff;
}

@media screen and (min-width: 768px) {
  .global-place-list > li .text-1 > a:hover {
    text-decoration: underline;
  }
}

.global-place-list > li .text-2 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.55556;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .global-place-list > li .text-2 {
    font-size: 1.4rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0px;
  }
}

/**
 * Business Page Style
**/
/**=========================================
* [business] development
* 事業展開
=========================================*/
.business-development {
  overflow: hidden;
  position: relative;
  background-color: #a8cb0c;
  margin: 60px 0 0 0;
  height: 490px;
}

@media screen and (max-width: 767px) {
  .business-development {
    margin-top: 50px;
    height: inherit;
  }
}

.business-development--red {
  background-color: #ff6600;
}

.business-development--red .business-development-body {
  color: #fff;
}

.business-development--blue {
  background-color: #d2d6d9;
}

.business-development:first-child {
  margin-top: 0;
}

.business-development > .inner {
  margin: 0 auto;
  padding: 0 0 0 80px;
  width: 1240px;
}

@media screen and (max-width: 767px) {
  .business-development > .inner {
    padding: 0;
    width: 100%;
  }
}

.business-development-title {
  position: relative;
  background-color: #fff;
  margin: 0;
  padding: 51.5px 0 36.5px 0px;
  font-size: 2.4rem;
  line-height: 1.29167;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .business-development-title {
    margin-left: 67px;
    padding: 18px 0 25px;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 1;
  }
}

.business-development-title .text {
  position: relative;
  padding-left: 10px;
}

.business-development-title:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70px;
  background: url(../img/business/ttl_bg_white.png) no-repeat left bottom;
  background-size: 100% 100%;
  width: 70px;
}

@media screen and (max-width: 767px) {
  .business-development-title:before {
    left: -35px;
    width: 35px;
  }
}

.business-development-title:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -100%;
  left: 100%;
  z-index: 1;
  background-color: #fff;
}

@media screen and (max-width: 767px) {
  .business-development-title:after {
    display: none;
  }
}

.business-development-image {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin-top: 81px;
}

@media screen and (max-width: 767px) {
  .business-development-image {
    position: relative;
    text-align: right;
    margin-top: 25px;
    width: 100%;
  }
}

.business-development-body {
  position: relative;
  padding: 40px 815px 40px 10px;
}

@media screen and (max-width: 767px) {
  .business-development-body {
    padding: 25px 40px 0;
  }
}

/**=========================================
* [business] create
* 私たちが創り出すもの
=========================================*/
.business-create {
  position: relative;
  margin-top: 80px;
  border-top: 5px solid #a8cb0c;
}

@media screen and (max-width: 767px) {
  .business-create {
    margin-top: 50px;
  }
}

.business-create:first-child {
  margin-top: 0;
}

.business-create-image {
  position: absolute;
  right: 0;
  text-align: right;
}

@media screen and (max-width: 767px) {
  .business-create-image {
    position: relative;
    background-color: #4c5a69;
    padding-left: 27px;
  }
}

.business-create-text-container {
  background-color: #4c5a69;
}

.business-create-text-container > .inner {
  margin: 0 auto;
  padding: 58px 680px 60px 100px;
  min-height: 300px;
  width: 1240px;
}

@media screen and (max-width: 767px) {
  .business-create-text-container > .inner {
    padding: 25px 40px 50px;
    width: 100%;
    min-height: inherit;
  }
}

.business-create-text-container .title {
  margin: -4.5px 0;
  font-size: 3rem;
  color: #a8cb0c;
  line-height: 1.3;
}

@media screen and (max-width: 767px) {
  .business-create-text-container .title {
    margin: -3.5px 0;
    font-size: 1.9rem;
    line-height: 1.36842;
  }
}

.business-create-text-container .text {
  margin: 33px 0 -7px;
  font-size: 1.8rem;
  line-height: 1.77778;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .business-create-text-container .text {
    margin: 16.5px 0 -6.5px;
    font-size: 1.4rem;
    line-height: 1.92857;
  }
}

.business-create-list {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 0 auto;
  padding: 40px 80px 0;
  width: 1240px;
}

@media screen and (max-width: 767px) {
  .business-create-list {
    display: block;
    padding: 0 40px;
    width: 100%;
  }
}

.business-create-list .item {
  margin: 0;
  padding: 0 20px;
  width: 290px;
}

@media screen and (max-width: 767px) {
  .business-create-list .item {
    margin-top: 25px;
    padding: 0;
    width: 100%;
  }
  .business-create-list .item img {
    width: 100%;
  }
}

.business-create-list .item > .name {
  margin: 16.5px 0 0 0;
  font-size: 1.5rem;
  line-height: 1.46667;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .business-create-list .item > .name {
    display: block;
    margin: 8.86957px 0 0;
    font-size: 1.6rem;
    line-height: 1.3913;
    text-align: left;
  }
}

/**
 * Page Style
**/
/**=========================================
* [member] index
=========================================*/
.page-member-index {
  position: relative;
}

.search-select-table {
  margin: 0 auto;
  border-spacing: 0;
  width: 870px;
}

@media screen and (max-width: 767px) {
  .search-select-table {
    width: 100%;
  }
}

.search-select-table th {
  background: #333333;
  border-spacing: 0;
  border-bottom: 1px solid #a7cc0c;
  padding: 15px 0 15px 2px;
  width: 100px;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .search-select-table th {
    padding: 13px 8px;
    width: 82px;
    font-size: 1.4rem;
    vertical-align: top;
    letter-spacing: 0;
    text-align: center;
  }
}

.search-select-table td {
  border-spacing: 0;
  border-bottom: 1px solid #a7cc0c;
  padding: 15px 20px;
  font-size: 1.5rem;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .search-select-table td {
    padding: 8px 10px;
  }
}

.search-select-table td label {
  padding-right: 34px;
}

@media screen and (max-width: 767px) {
  .search-select-table td label {
    margin: 5px 0;
    padding-right: 20px;
    font-size: 1.3rem;
  }
}

.search-select-table td > span {
  position: relative;
  display: inline-block;
}

.search-select-table td > span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #fff;
  width: 20px;
  height: 20px;
}

.member-search-button-container {
  margin-top: 30px;
  text-align: center;
}

.member-search-button-container input[type=submit] {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  display: inline-block;
  cursor: pointer;
  outline: none;
  position: relative;
  z-index: 2;
  background-color: #ff6600;
  border-radius: 0;
  border: none;
  padding: 16px 23px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
}

.member-search-button-container input[type=submit]:focus {
  outline: none;
}

@media screen and (min-width: 768px) {
  .member-search-button-container input[type=submit]:hover {
    opacity: 0.7;
  }
}

.member-search-button-container input[type=reset] {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  display: inline-block;
  cursor: pointer;
  outline: none;
  position: relative;
  z-index: 2;
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #000;
  padding: 0 0px 12px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  line-height: 1;
  color: #555;
  text-align: center;
}

.member-search-button-container input[type=reset]:focus {
  outline: none;
}

@media screen and (min-width: 768px) {
  .member-search-button-container input[type=reset]:hover {
    opacity: 0.7;
  }
}

.search-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-bottom: 40px;
}

@media screen and (max-width: 767px) {
  .search-result {
    overflow: hidden;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
  }
}

.search-result .item-link {
  padding: 70px 20px 0;
  width: 25%;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .search-result .item-link {
    margin-top: 25px;
    padding: 0 10px 0;
    width: 159px;
  }
}

.search-result .item-link .item-image {
  margin: 0 auto;
  width: 197px;
}

@media screen and (max-width: 767px) {
  .search-result .item-link .item-image {
    width: 100%;
  }
}

.search-result .item-link.js-tl {
  opacity: 0;
}

@media screen and (min-width: 768px) {
  .search-result .item-link.is-show-item:hover {
    opacity: 0.7 !important;
  }
}

.search-result .item-text-green {
  margin: 20px 0 0;
  font-weight: bold;
  color: #a7cc0c;
  font-size: 1.5rem;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .search-result .item-text-green {
    margin: 10.1px 0 -3.9px 0;
    font-size: 1.3rem;
    line-height: 1.6;
    -webkit-font-feature-settings: "palt" 1;
            font-feature-settings: "palt" 1;
  }
}

.search-result .item-text-1 {
  margin: 16.5px 0 -3.5px;
  font-size: 1.3rem;
  line-height: 1.53846;
}

@media screen and (max-width: 767px) {
  .search-result .item-text-1 {
    margin: 11.5px 0 0.5px;
  }
}

.search-result .item-text-2 {
  margin: 5px 0 0;
  font-size: 1.3rem;
}

@media screen and (max-width: 767px) {
  .search-result .item-text-2 {
    margin: 0;
  }
}

.search-anchor-container {
  position: fixed;
  right: 0;
  left: 0;
  bottom: -80px;
  z-index: 4;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.4s;
  transition: opacity 0.3s ease-out, -webkit-transform 0.4s;
  transition: opacity 0.3s ease-out, transform 0.4s;
  transition: opacity 0.3s ease-out, transform 0.4s, -webkit-transform 0.4s;
  min-width: 1240px;
}

@media screen and (max-width: 767px) {
  .search-anchor-container {
    min-width: inherit;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .search-anchor-container.is-gnav-show {
    -webkit-transform: translateX(-305px);
            transform: translateX(-305px);
  }
}

.search-anchor-container.is-active-show {
  bottom: 0px;
  opacity: 1;
}

.search-anchor-container.is-active-position {
  position: absolute;
  bottom: 310px;
}

@media screen and (max-width: 767px) {
  .search-anchor-container.is-active-position {
    bottom: 320px;
  }
}

.search-anchor {
  position: relative;
  display: block;
  background-color: #ff6600;
  margin: 0 auto 40px;
  padding: 16px 0;
  width: 233px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
}

.search-anchor .icon:before {
  font-size: 1.8rem;
}

@media screen and (min-width: 768px) {
  .search-anchor:hover {
    opacity: 0.7;
  }
}

/**=========================================
* [member] 下層
=========================================*/
.member-main {
  position: relative;
  margin: 0 auto;
  padding: 0;
  padding-right: 20px;
  width: 1240px;
}

@media screen and (max-width: 767px) {
  .member-main {
    overflow: hidden;
    padding: 0;
    width: 100%;
    min-height: 740px;
  }
}

.member-main-body {
  position: relative;
  padding: 274px 0 0 609px;
}

@media screen and (max-width: 767px) {
  .member-main-body {
    margin: 0 auto;
    padding: 355px 40px 0;
    max-width: 375px;
    min-height: 433px;
  }
}

.member-main-body:before {
  content: "";
  display: block;
  position: absolute;
  top: 154px;
  left: 494px;
  z-index: -1;
  background: url(../img/member/hex_main.png) no-repeat left top;
  background-size: 100% 100%;
  width: 744px;
  height: 696px;
}

@media screen and (max-width: 767px) {
  .member-main-body:before {
    background-image: url(../img/member/hex_main_green_sp.png);
    top: 300px;
    left: -25px;
    width: 425px;
    height: 433px;
  }
}

@media screen and (max-width: 767px) {
  .member-main-body:after {
    content: "";
    display: block;
    position: absolute;
    top: 300px;
    right: -25px;
    z-index: -1;
    background: url(../img/member/hex_main_gray_sp.png) no-repeat left top;
    background-size: 100% 100%;
    width: 425px;
    height: 433px;
  }
}

.member-main-image {
  position: absolute;
  top: 0;
  left: -40px;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .member-main-image {
    left: 50%;
    margin-left: -159px;
    width: 368px;
  }
}

@media screen and (min-width: 768px) {
  .member-main-title-container {
    height: 305px;
  }
}

.member-main-title {
  margin: -7px 0;
  padding: 0;
  font-size: 3.8rem;
  line-height: 1.36842;
  letter-spacing: 3px;
  text-align: justify;
}

@media screen and (max-width: 767px) {
  .member-main-title {
    margin: -4.5px 0;
    font-size: 2.3rem;
    line-height: 1.3913;
    letter-spacing: 1px;
    text-align: left;
  }
}

.member-main-text-1 {
  margin: 69.5px 0 -2.5px 0;
  font-size: 2.6rem;
  line-height: 1.19231;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .member-main-text-1 {
    margin: 20px 0 -3.5px 0;
    font-size: 1.9rem;
    line-height: 1.36842;
  }
}

.member-main-text-2 {
  margin: 13px 0 -5px;
  font-size: 1.4rem;
  line-height: 1.71429;
}

.member-profile-title {
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  margin: 84px 0 0 0;
  padding: 0 110px 0 0;
  text-align: right;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: normal;
  color: #a8cb0c;
  letter-spacing: 3px;
}

@media screen and (max-width: 767px) {
  .member-profile-title {
    margin-top: 50px;
    padding-right: 0;
    font-size: 1.4rem;
  }
}

@media screen and (min-width: 768px) {
  .member-profile-text {
    margin: 11.5px 0 -8.5px;
    padding: 0 110px 0 0;
  }
}

@media screen and (max-width: 767px) {
  .member-profile-text {
    margin-top: 6.5px;
  }
}

.member-page-body {
  padding-top: 20px;
  padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .member-page-body {
    padding-top: 0;
    padding-bottom: 40px;
  }
}

.member-section-1-container {
  margin: 60px auto 0;
  padding: 0 20px;
  width: 1240px;
}

@media screen and (max-width: 767px) {
  .member-section-1-container {
    margin-top: 50px;
    padding: 0 40px;
    width: 100%;
  }
}

.member-section-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 20px;
  padding-right: 310px;
  padding-left: 10px;
}

@media screen and (max-width: 767px) {
  .member-section-1 {
    display: block;
    margin-top: 50px;
    padding: 0;
  }
}

.member-section-1:first-child {
  margin-top: 0;
}

.member-section-1:nth-child(2n) {
  padding-right: 0;
  padding-left: 310px;
}

@media screen and (max-width: 767px) {
  .member-section-1:nth-child(2n) {
    padding-left: 0;
  }
}

.member-section-1 > .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: url(../img/member/hex_green.png) no-repeat center center;
  background-size: 100% 100%;
  margin: 0;
  padding: 20px;
  width: 275px;
  height: 253px;
  font-size: 1.8rem;
  line-height: 1.72222;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .member-section-1 > .title {
    margin: 0 auto;
    width: 230px;
    height: 211px;
    font-size: 1.6rem;
  }
}

.member-section-1:nth-child(2n) > .title {
  background-image: url(../img/member/hex_orange.png);
}

.member-section-1 > .body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 37px;
  padding-bottom: 37px;
  padding-left: 25px;
}

@media screen and (max-width: 767px) {
  .member-section-1 > .body {
    padding: 23px 0 0;
  }
}

.member-image-container {
  overflow: hidden;
  background-color: #1f3143;
  margin-top: 60px;
}

@media screen and (max-width: 767px) {
  .member-image-container {
    margin-top: 50px;
    text-align: center;
  }
}

.member-image-container .l-container, .member-image-container .member-flow-inner {
  padding: 0 20px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .member-image-container .l-container, .member-image-container .member-flow-inner {
    padding: 0;
    width: 100%;
  }
}

.member-image-container .l-container img, .member-image-container .member-flow-inner img {
  width: 33.333%;
}

@media screen and (max-width: 767px) {
  .member-image-container .l-container img, .member-image-container .member-flow-inner img {
    width: 100%;
  }
}

.member-flow {
  background-color: #1f3143;
  margin-top: 60px;
  color: #fff;
}

.member-flow-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 75px 20px 0;
}

@media screen and (max-width: 767px) {
  .member-flow-inner {
    display: block;
    padding: 25px 40px 0;
    width: 100%;
  }
}

.member-flow-title {
  margin: 0;
  width: 190px;
  font-size: 1.8rem;
  line-height: 1.72222;
  letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
  .member-flow-title {
    width: 100%;
  }
}

.member-flow-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .member-flow-body {
    display: block;
    padding: 25px 0 0 15px;
  }
}

.member-flow-item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding: 40px 30px 80px;
}

@media screen and (max-width: 767px) {
  .member-flow-item {
    padding: 35px 22px 25px;
  }
}

.member-flow-item .icon {
  position: absolute;
  top: 0px;
  left: -17px;
}

@media screen and (max-width: 767px) {
  .member-flow-item .icon {
    width: 33px;
  }
}

.member-flow-item .list {
  margin: 0;
  padding: 0;
  list-style: none;
  letter-spacing: 1px;
}

.member-flow-item .list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin: 19px 0 -6px;
  line-height: 1;
}

.member-flow-item .list > li:first-child {
  margin-top: -6px;
}

.member-flow-item .time {
  margin-right: 10px;
  font-size: 1.3rem;
  line-height: 2.1;
  color: #a8cb0c;
}

@media screen and (max-width: 767px) {
  .member-flow-item .time {
    font-size: 1.4rem;
    line-height: 1.8;
  }
}

.member-flow-item .text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1.5rem;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .member-flow-item .text {
    font-size: 1.4rem;
  }
}

.member-section-2-container {
  position: relative;
  margin: 0 auto;
  padding: 0 0 0 90px;
  width: 1240px;
  min-height: 644px;
}

@media screen and (max-width: 767px) {
  .member-section-2-container {
    padding: 0 40px;
    width: 100%;
    min-height: inherit;
  }
}

.member-section-2 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 50px;
}

@media screen and (max-width: 767px) {
  .member-section-2 {
    display: block;
    padding-top: 50px;
    padding-right: 0;
  }
}

.member-section-2 .text-container {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 30px;
  padding-right: 70px;
}

@media screen and (max-width: 767px) {
  .member-section-2 .text-container {
    padding-top: 0;
    padding-right: 0;
  }
}

.member-section-2:nth-child(2) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.member-section-2:nth-child(2) .text-container {
  padding-left: 70px;
}

@media screen and (max-width: 767px) {
  .member-section-2:nth-child(2) .text-container {
    padding-left: 0;
  }
}

.member-section-2 .title {
  margin: -4.5px 0;
  font-size: 1.8rem;
  line-height: 1.72222;
  color: #a8cb0c;
}

@media screen and (max-width: 767px) {
  .member-section-2 .title {
    margin: -3.77778px 0;
    font-size: 1.6rem;
  }
}

.member-section-2 .image-1 {
  width: 490px;
}

@media screen and (max-width: 767px) {
  .member-section-2 .image-1 {
    position: relative;
    top: inherit;
    right: inherit;
    margin-top: 25px;
    width: 100%;
    text-align: center;
  }
}

.member-section-2 .image-2 {
  width: 490px;
}

@media screen and (max-width: 767px) {
  .member-section-2 .image-2 {
    position: relative;
    top: inherit;
    right: inherit;
    margin-top: 25px;
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .member-section-2 .image-1 > img,
  .member-section-2 .image-2 > img {
    width: 100%;
  }
}

/**=========================================
* [member] relative-member
* 社員一覧リンク
=========================================*/
.relative-member {
  margin-top: 100px;
}

@media screen and (max-width: 767px) {
  .relative-member {
    margin-top: 75px;
  }
}

.relative-member-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 20px;
}

@media screen and (max-width: 767px) {
  .relative-member-body {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 0;
  }
}

.relative-member-body.justify-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (min-width: 768px) {
  .relative-member-body.row-6 {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}

@media screen and (min-width: 768px) {
  .relative-member-body.row-6 .relative-member-link {
    width: calc(100% / 6);
  }
}

.relative-member-link {
  display: block;
  margin-top: 40px;
  width: calc(100% / 5);
}

@media screen and (max-width: 767px) {
  .relative-member-link {
    margin-top: 25px;
    padding: 0 10px 0;
    width: 159px;
  }
}

.relative-member-link > .image {
  margin: 0 auto;
  width: 160px;
}

@media screen and (max-width: 767px) {
  .relative-member-link > .image {
    width: 139px;
  }
}

.relative-member-link > .text {
  margin: 15.5px 0 -4.5px 0;
  color: #a8cb0c;
  font-size: 1.5rem;
  line-height: 1.6;
  text-align: center;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .relative-member-link > .text {
    margin: 10.1px 0 -3.9px 0;
    font-size: 1.3rem;
  }
}

.relative-member-link > .text-gakubu {
  margin: 16.5px 0 0.5px;
  font-size: 1.3rem;
  line-height: 1.53846;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .relative-member-link > .text-gakubu {
    padding: 0 3px;
  }
}

@media screen and (max-width: 767px) {
  .relative-member-link > .text-gakubu {
    -webkit-font-feature-settings: "palt" 1;
            font-feature-settings: "palt" 1;
  }
}

.relative-member-link .text-1,
.relative-member-link .text-2 {
  font-size: 1.3rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .relative-member-link .text-1,
  .relative-member-link .text-2 {
    padding: 0 3px;
  }
}

.relative-member-link .text-1 {
  margin: 11.5px 0 0.5px;
}

.relative-member-link .text-2 {
  margin: 0;
}

/**=========================================
* [project] relative-link
* プロジェクトバナーリンク
=========================================*/
.relative-link-container {
  margin: 80px auto 0;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .relative-link-container {
    margin-top: 40px;
  }
}

.relative-link, .footer-page-nav .footer-page-link-project {
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 20px;
  padding: 10px 70px 10px 173px;
  border: 1px solid #dcdcdc;
  width: 500px;
  line-height: 1.33333;
  font-weight: bold;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .relative-link, .footer-page-nav .footer-page-link-project {
    margin: 20px auto 0;
    padding: 10px 37px 10px 85px;
    max-width: 294px;
    width: 100%;
  }
}

.relative-link-title {
  margin: 80px 0 0;
  font-size: 1.8rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .relative-link-title {
    margin-top: 40px;
    font-size: 1.4rem;
  }
}

.relative-link > span, .footer-page-nav .footer-page-link-project > span {
  position: relative;
  z-index: 3;
}

.relative-link:before, .footer-page-nav .footer-page-link-project:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: -1px;
  left: 0;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  width: 160px;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

@media screen and (max-width: 767px) {
  .relative-link:before, .footer-page-nav .footer-page-link-project:before {
    width: 85px;
  }
}

.relative-link:after, .footer-page-nav .footer-page-link-project:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(220, 220, 220, 0.5);
  -webkit-transition: .3s;
  transition: .3s;
}

.relative-link.project01:before, .footer-page-nav .project01.footer-page-link-project:before {
  background-image: url(../img/member/link_bg_project01.png);
}

@media screen and (max-width: 767px) {
  .relative-link.project01:before, .footer-page-nav .project01.footer-page-link-project:before {
    background-image: url(../img/member/link_bg_project01_sp.png);
  }
}

.relative-link.project02:before, .footer-page-nav .project02.footer-page-link-project:before {
  background-image: url(../img/member/link_bg_project02.png);
}

@media screen and (max-width: 767px) {
  .relative-link.project02:before, .footer-page-nav .project02.footer-page-link-project:before {
    background-image: url(../img/member/link_bg_project02_sp.png);
  }
}

.relative-link.member, .footer-page-nav .member.footer-page-link-project {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 768px) {
  .relative-link.member, .footer-page-nav .member.footer-page-link-project {
    margin-top: 40px;
    height: 79px;
  }
}

@media screen and (max-width: 767px) {
  .relative-link.member, .footer-page-nav .member.footer-page-link-project {
    min-height: 75px;
  }
}

.relative-link.member:before, .footer-page-nav .member.footer-page-link-project:before {
  background-image: url(../img/member/link_bg_member.png);
}

@media screen and (max-width: 767px) {
  .relative-link.member:before, .footer-page-nav .member.footer-page-link-project:before {
    background-image: url(../img/member/link_bg_member_sp.png);
  }
}

@media screen and (min-width: 768px) {
  .relative-link.member .text, .footer-page-nav .member.footer-page-link-project .text {
    display: inline-block;
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 767px) {
  .relative-link.member .text, .footer-page-nav .member.footer-page-link-project .text {
    text-indent: 1em;
  }
}

.relative-link .text-small, .footer-page-nav .footer-page-link-project .text-small {
  display: block;
  font-size: 1.3rem;
  -webkit-transition: .3s;
  transition: .3s;
}

.relative-link .text, .footer-page-nav .footer-page-link-project .text {
  display: block;
  margin-top: 2px;
  font-size: 1.5rem;
  -webkit-transition: .3s;
  transition: .3s;
}

@media screen and (max-width: 767px) {
  .relative-link .text, .footer-page-nav .footer-page-link-project .text {
    font-size: 1.3rem;
  }
}

.relative-link .icon, .footer-page-nav .footer-page-link-project .icon {
  position: absolute;
  right: 38px;
  top: 50%;
  margin-top: -11px;
  -webkit-transition: .3s;
  transition: .3s;
}

@media screen and (max-width: 767px) {
  .relative-link .icon, .footer-page-nav .footer-page-link-project .icon {
    margin-top: -8px;
    right: 15px;
  }
}

.relative-link .icon:before, .footer-page-nav .footer-page-link-project .icon:before {
  font-size: 2.2rem;
}

@media screen and (max-width: 767px) {
  .relative-link .icon:before, .footer-page-nav .footer-page-link-project .icon:before {
    font-size: 1.7rem;
  }
}

@media screen and (min-width: 768px) {
  .relative-link:hover, .footer-page-nav .footer-page-link-project:hover {
    opacity: 1;
  }
  .relative-link:hover:before, .footer-page-nav .footer-page-link-project:hover:before {
    opacity: 0.9;
  }
  .relative-link:hover:after, .footer-page-nav .footer-page-link-project:hover:after {
    top: 0%;
  }
  .relative-link:hover .icon, .footer-page-nav .footer-page-link-project:hover .icon {
    right: 31px;
  }
  .relative-link:hover .text-small, .footer-page-nav .footer-page-link-project:hover .text-small,
  .relative-link:hover .text,
  .footer-page-nav .footer-page-link-project:hover .text {
    opacity: 0.8;
  }
}

/**
 * project Page Style
**/
/**=========================================
* [project] header
* 画像背景エリア
=========================================*/
.project-header {
  overflow: hidden;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.project-header.project-1 {
  background-image: url(../img/project/project01/header_bg.jpg);
}

@media screen and (max-width: 767px) {
  .project-header.project-1 {
    background-image: url(../img/project/project01/header_bg_sp.jpg);
  }
}

.project-header.project-2 {
  background-image: url(../img/project/project02/header_bg.jpg);
}

@media screen and (max-width: 767px) {
  .project-header.project-2 {
    background-image: url(../img/project/project02/header_bg_sp.jpg);
  }
}

.project-header .inner {
  position: relative;
  margin: 0 auto;
  padding: 170px 10px 296px;
  width: 1240px;
  text-align: right;
}

@media screen and (max-width: 767px) {
  .project-header .inner {
    padding: 95px 40px 140px;
    width: 100%;
  }
}

.project-header .lead {
  display: inline-block;
  margin: 0;
  text-align: left;
  font-size: 2.8rem;
  line-height: 1.5;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .project-header .lead {
    padding-left: 0;
    font-size: 1.9rem;
    line-height: 1.47368;
  }
}

.project-header .page-link {
  display: block;
  position: absolute;
  bottom: -20px;
  right: 0;
  z-index: 1;
  background: url(../img/project/ttl_bg_1.png) no-repeat right top;
  padding: 11px 25px 27px 100px;
  width: 560px;
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
  -webkit-transition: .3s;
  transition: .3s;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .project-header .page-link {
    background-image: url(../img/project/ttl_bg_1_sp.png);
    background-position: left top;
    background-size: 100% 100%;
    bottom: 0;
    padding: 8px 12px 8px 35px;
    width: 294px;
    font-size: 1.2rem;
  }
}

@media screen and (min-width: 768px) {
  .project-header .page-link:hover {
    opacity: 1;
    padding-top: 15px;
    bottom: -5px;
  }
  .project-header .page-link:hover .icon {
    top: 15px;
  }
}

.project-header .page-link .eng {
  font-size: 1.3rem;
}

@media screen and (max-width: 767px) {
  .project-header .page-link .eng {
    display: block;
  }
}

.project-header .page-link .icon {
  position: absolute;
  top: 11px;
  left: 70px;
  -webkit-transition: .3s;
  transition: .3s;
}

@media screen and (max-width: 767px) {
  .project-header .page-link .icon {
    top: inherit;
    left: inherit;
    right: 12px;
    bottom: 8px;
  }
}

.project-header .page-link .icon:before {
  font-size: 2.2rem;
}

@media screen and (max-width: 767px) {
  .project-header .page-link .icon:before {
    font-size: 1.7rem;
  }
}

/**=========================================
* [project] page-title
=========================================*/
.project-page-title {
  display: block;
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 2;
  background: url(../img/project/ttl_bg_2.png) no-repeat right top;
  background-size: 100% 100%;
  margin: 0;
  padding: 23px 120px 0 20px;
  width: 740px;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .project-page-title {
    position: relative;
    left: inherit;
    bottom: inherit;
    background: none;
    padding: 15px 40px 0;
    width: 100%;
  }
}

.project-page-title:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: -1px;
  left: -100%;
  right: 100%;
  z-index: 1;
  background-color: #fff;
}

.project-page-title .eng {
  display: block;
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #ff6600;
  font-size: 2.4rem;
  font-weight: normal;
  letter-spacing: 8px;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .project-page-title .eng {
    font-size: 1.2rem;
    letter-spacing: 4px;
  }
}

.project-page-title .num {
  margin-left: 10px;
  font-size: 3.8rem;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .project-page-title .num {
    position: relative;
    top: 2px;
    margin-left: 5px;
    font-size: 1.9rem;
  }
}

.project-page-title .text {
  display: block;
  border-bottom: 4px solid #ff6600;
  padding: 21px 0 30px;
  font-size: 3.6rem;
  line-height: 1.33333;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .project-page-title .text {
    border-bottom-width: 2px;
    padding: 11.83333px 0 14.83333px;
    font-size: 1.8rem;
    letter-spacing: 1px;
  }
}

/**=========================================
* [project] intro
=========================================*/
.project-intro {
  margin: 40px 0 0 0;
}

@media screen and (max-width: 767px) {
  .project-intro {
    margin-top: 25px;
  }
}

.project-intro-button {
  line-height: 1;
  display: inline-block;
  cursor: pointer;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  -webkit-transition: .3s;
  transition: .3s;
}

.project-intro-button-container {
  border-bottom: 1px solid #ccc;
  text-align: right;
  line-height: 1;
  font-size: 0;
}

@media screen and (max-width: 767px) {
  .project-intro-button {
    display: block;
  }
}

.project-intro-button .inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 767px) {
  .project-intro-button .inner {
    display: block;
    text-align: left;
  }
}

.project-intro-button .text {
  display: inline-block;
  padding: 17px 68px 17px 20px;
  font-size: 1.5rem;
}

@media screen and (max-width: 767px) {
  .project-intro-button .text {
    display: block;
    padding: 17px 55px 17px 14px;
    font-size: 1.3rem;
  }
}

.project-intro-button .icon-toggle-arrow {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  width: 48px;
  height: inherit;
}

.project-intro-button .icon-toggle-arrow > span {
  width: 20px;
  height: 100%;
  -webkit-transition: .4s;
  transition: .4s;
}

.project-intro-button .icon-toggle-arrow > span:before, .project-intro-button .icon-toggle-arrow > span:after {
  margin-top: -6px;
  height: 2px;
  width: 16px;
}

.project-intro-button.is-toggle-button-active {
  background-color: #ccc;
  color: #fff;
}

.project-intro-button.is-toggle-button-active .icon-toggle-arrow > span:before, .project-intro-button.is-toggle-button-active .icon-toggle-arrow > span:after {
  margin-top: -12px;
  width: 30px;
}

@media screen and (min-width: 768px) {
  .project-intro-button.is-toggle-button-active:hover .icon-toggle-arrow > span {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .project-intro-button.is-toggle-button-active:hover .icon-toggle-arrow > span:before, .project-intro-button.is-toggle-button-active:hover .icon-toggle-arrow > span:after {
    margin-top: -12px;
  }
}

@media screen and (min-width: 768px) {
  .project-intro-button:hover {
    background-color: #ccc;
  }
}

.project-intro-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 40px;
}

@media screen and (max-width: 767px) {
  .project-intro-body {
    display: block;
    padding: 13px;
  }
}

.project-intro-body.is-toggle-active {
  background-color: #ccc;
}

.project-intro-body .image {
  width: 480px;
}

@media screen and (max-width: 767px) {
  .project-intro-body .image {
    width: 100%;
  }
}

.project-intro-body .m-text-lv1, .project-intro-body .member-profile-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-top: 0;
  padding-left: 25px;
}

@media screen and (max-width: 767px) {
  .project-intro-body .m-text-lv1, .project-intro-body .member-profile-text {
    margin-top: 10px;
    padding-left: 0;
  }
}

/**=========================================
* [project] member
=========================================*/
.project-member-row-3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 110px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 767px) {
  .project-member-row-3 {
    display: block;
    margin-bottom: 65px;
  }
}

.project-member-row-3 .col-1 {
  position: relative;
  border-right: 1px solid #fff;
}

@media screen and (max-width: 767px) {
  .project-member-row-3 .col-1 {
    overflow: hidden;
    background-color: #1f3143;
    margin-top: 5px;
    border-right: none;
    border-bottom: 1px solid #fff;
  }
}

.project-member-row-3 .image {
  width: 100%;
}

.project-member-row-3 .image > img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .project-member-row-3 .image > img {
    vertical-align: top;
  }
}

.project-member-row-3 .text-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(31, 49, 67, 0.9);
  padding: 19px 0 24px;
  text-align: center;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .project-member-row-3 .text-container {
    position: relative;
    margin-left: 0;
    padding: 15px 13px;
  }
}

.project-member-row-3 .text-container .name {
  display: block;
  margin-top: -7px;
  color: #a8cb0c;
  font-size: 1.8rem;
  line-height: 1.77778;
}

@media screen and (max-width: 767px) {
  .project-member-row-3 .text-container .name {
    margin-top: -5.44444px;
    font-size: 1.4rem;
  }
}

.project-member-row-3 .text-container .position {
  display: block;
  margin-top: 5.83333px;
  margin-bottom: -4.16667px;
  color: #a8cb0c;
  font-size: 1.5rem;
  line-height: 1.55556;
}

@media screen and (max-width: 767px) {
  .project-member-row-3 .text-container .position {
    margin-top: 1.66667px;
    margin-bottom: -3.33333px;
    font-size: 1.2rem;
  }
}

.project-member-row-3 .text-container .info {
  display: block;
  margin-top: 14px;
  margin-bottom: -6px;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.92308;
}

@media screen and (max-width: 767px) {
  .project-member-row-3 .text-container .info {
    margin-top: 7px;
    margin-bottom: -3px;
    font-size: 1.2rem;
    line-height: 1.5;
  }
}

/**=========================================
* [project] Chapter
=========================================*/
.project-chapter {
  position: relative;
  border-top: 1px solid #333;
}

.project-chapter:before {
  content: "";
  display: block;
  position: absolute;
  top: -34px;
  left: 50%;
  background-size: 100%;
  margin-left: -620px;
  width: 345px;
  height: 68px;
}

@media screen and (max-width: 767px) {
  .project-chapter:before {
    top: -17px;
    left: 27px;
    margin-left: 0;
    width: 172.5px;
    height: 34px;
  }
}

.project-chapter-inner {
  position: relative;
  margin: 0 auto;
  padding-bottom: 110px;
  width: 1240px;
}

@media screen and (max-width: 767px) {
  .project-chapter-inner {
    padding: 0 40px 70px;
    width: 100%;
  }
}

.project-chapter--gray {
  background-color: #f4f4f4;
}

.project-chapter--gray:before {
  background-image: url(../img/project/ttl_bg_3.png);
}

.project-chapter--gray .project-chapter-inner {
  background-color: #f4f4f4;
}

.project-chapter--white {
  background-color: #fff;
}

.project-chapter--white:before {
  background-image: url(../img/project/ttl_bg_4.png);
}

.project-chapter--white .project-chapter-inner {
  background-color: #fff;
}

.project-chapter-number {
  position: absolute;
  top: -24px;
  left: 36px;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width: 767px) {
  .project-chapter-number {
    top: -10px;
    left: 45px;
  }
}

.project-chapter-number .text-1 {
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 2.4rem;
  letter-spacing: 7px;
}

@media screen and (max-width: 767px) {
  .project-chapter-number .text-1 {
    position: relative;
    top: -2px;
    font-size: 1.2rem;
    letter-spacing: 4px;
  }
}

.project-chapter-number .num-1 {
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  position: relative;
  top: 5px;
  display: inline-block;
  padding-left: 10px;
  padding-right: 48px;
  font-size: 3.8rem;
  color: #ff6600;
}

@media screen and (max-width: 767px) {
  .project-chapter-number .num-1 {
    top: 0;
    padding-right: 20px;
    padding-left: 0;
    font-size: 1.9rem;
  }
}

.project-chapter-number .num-1:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 16px;
  background-color: #333;
  margin-top: -22px;
  width: 1px;
  height: 45px;
  -webkit-transform: rotate(29deg);
          transform: rotate(29deg);
}

@media screen and (max-width: 767px) {
  .project-chapter-number .num-1:before {
    right: 5px;
    margin-top: -12px;
    height: 24px;
  }
}

.project-chapter-number .num-2 {
  position: relative;
  top: 2px;
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 2.6rem;
}

@media screen and (max-width: 767px) {
  .project-chapter-number .num-2 {
    position: relative;
    top: -2px;
    font-size: 1.3rem;
  }
}

.project-chapter-title {
  margin: 0 0 -7px;
  padding: 103px 0 0;
  text-align: center;
  font-size: 2.8rem;
  line-height: 1.5;
  letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
  .project-chapter-title {
    padding: 25.73684px 0 0;
    font-size: 1.8rem;
    line-height: 1.47368;
    text-align: left;
  }
}

.project-chapter-body {
  padding: 74px 0 0;
}

@media screen and (max-width: 767px) {
  .project-chapter-body {
    padding: 25px 0 0;
  }
}

.project-chapter-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .project-chapter-row {
    display: block;
  }
}

.project-chapter-row .col-image {
  width: 50%;
}

@media screen and (max-width: 767px) {
  .project-chapter-row .col-image {
    width: 100%;
  }
}

.project-chapter-row .image-1 {
  text-align: right;
}

@media screen and (max-width: 767px) {
  .project-chapter-row .image-1 {
    margin: 0 auto 24px;
    width: 220px;
  }
}

.project-chapter-row .image-2 {
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .project-chapter-row .image-2 {
    margin-top: 24px;
    width: 100%;
  }
}

.project-chapter-row .col-text {
  padding: 0 100px 0 40px;
  width: 50%;
}

@media screen and (max-width: 767px) {
  .project-chapter-row .col-text {
    padding: 0;
    width: 100%;
  }
}

.project-chapter-row .col-text .m-text-lv1, .project-chapter-row .col-text .member-profile-text {
  margin-top: 53.5px;
}

@media screen and (max-width: 767px) {
  .project-chapter-row .col-text .m-text-lv1, .project-chapter-row .col-text .member-profile-text {
    margin-top: 18.5px;
  }
}

.project-chapter-row .col-text .m-text-lv1:first-child, .project-chapter-row .col-text .member-profile-text:first-child {
  margin-top: -6.5px;
}

.project-chapter-row.reverse .col-image .image-1 {
  text-align: left;
}

@media screen and (min-width: 768px) {
  .project-chapter-row.reverse .col-text {
    padding-right: 40px;
    padding-left: 100px;
  }
}

.project-image {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -30px;
  height: 380px;
}

@media screen and (max-width: 767px) {
  .project-image {
    margin-top: -20px;
    height: 190px;
  }
}

.project-image--1 {
  background-image: url(../img/project/project01/bg_1.jpg);
}

.project-image--2 {
  background-image: url(../img/project/project01/bg_2.jpg);
}

@media screen and (max-width: 767px) {
  .project-image--2 {
    background-image: url(../img/project/project01/bg_2_sp.jpg);
    background-position: right center;
  }
}

.project-image--3 {
  background-image: url(../img/project/project02/bg_1.jpg);
}

.project-image--4 {
  background-image: url(../img/project/project02/bg_2.jpg);
}

/**
 * Career Page Style
**/
.bg-career-body {
  background: url(../img/career/message_bg.png) no-repeat center 211px;
}

@media screen and (max-width: 767px) {
  .bg-career-body {
    background-image: url(../img/career/message_bg_sp.png);
    background-size: 655px auto;
    background-position: center 210px;
  }
}

/**=========================================
* [career] message
* 担当者からのメッセージ
=========================================*/
.career-message-inner {
  margin: 80px auto 0;
  padding: 0 100px 100px;
  width: 1240px;
}

@media screen and (max-width: 767px) {
  .career-message-inner {
    margin-top: 50px;
    padding: 0 40px 0;
    width: 100%;
  }
}

.career-message-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  width: 100%;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .career-message-title {
    display: block;
  }
}

.career-message-title .eng {
  font-family: 'Lato', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: url(../img/common/hex_orange.png) no-repeat center center;
  background-size: 100% 100%;
  margin: 0 0 0 24px;
  padding: 0 0 0 8px;
  width: 231px;
  height: 213px;
  font-size: 2.6rem;
  line-height: 1.72222;
  font-weight: normal;
  text-align: center;
  letter-spacing: 8px;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .career-message-title .eng {
    margin: 0 auto;
    padding-left: 3px;
    width: 115.5px;
    height: 106.5px;
    font-size: 1.3rem;
    letter-spacing: 3px;
  }
}

.career-message-title .text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: block;
  padding-right: 257px;
  font-size: 2rem;
  line-height: 1.55;
  text-align: center;
  letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
  .career-message-title .text {
    margin-top: 28.6px;
    padding-right: 0;
    font-size: 1.6rem;
  }
}

.career-message-body {
  margin-top: -48px;
  padding: 0 150px;
}

@media screen and (max-width: 767px) {
  .career-message-body {
    margin-top: 50px;
    padding: 0;
  }
}

/**=========================================
* [career] system
* SBスクール
=========================================*/
.page-career-index .system-cahrt-table {
  margin: 0 auto;
  width: 1040px;
}

@media screen and (max-width: 767px) {
  .page-career-index .system-cahrt-table {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .chart-head {
    width: 102px;
  }
}

@media screen and (max-width: 767px) {
  .chart-head img {
    vertical-align: top;
    width: 102px;
  }
}

@media screen and (max-width: 767px) {
  .chart-body img {
    vertical-align: top;
    width: 865px;
  }
}

.career-educational {
  padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
  .career-educational {
    padding-bottom: 60px;
  }
}

/**=========================================
* [career] voice
* 受講者の声
=========================================*/
.career-voice-section {
  background: #4c5a69 url(../img/career/voice_bg.png) no-repeat center top;
  background-attachment: fixed;
  margin-top: 0;
  padding: 236px 0 80px;
}

@media screen and (max-width: 767px) {
  .career-voice-section {
    background-image: url(../img/career/voice_bg_sp.png);
    background-size: 655px auto;
    background-attachment: scroll;
    display: block;
    padding: 50px 0 0;
  }
}

.career-voice-section-body {
  padding: 190px 100px 0;
}

@media screen and (max-width: 767px) {
  .career-voice-section-body {
    display: block;
    padding: 50px 27px;
  }
}

.career-voice {
  margin: 80px 0 0;
}

@media screen and (max-width: 767px) {
  .career-voice {
    margin: 50px 0 0;
  }
}

.career-voice:first-child {
  margin: 0;
}

@media screen and (max-width: 767px) {
  .career-voice:first-child {
    margin: 0;
  }
}

.career-voice-title {
  position: relative;
  left: -30px;
  background-color: #a8cb0c;
  margin: 0;
  padding: 19px 40px 76px;
  width: 440px;
  font-size: 2.4rem;
  line-height: 1.33333;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .career-voice-title {
    left: -15px;
    padding: 9px 0px 54px 15px;
    width: calc(100% - 34px);
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

.career-voice-title .square {
  display: inline-block;
  position: absolute;
  top: 86px;
  right: -18px;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}

.career-voice-title .square:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #a8cb0c;
  width: 120px;
  height: 120px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

.career-voice-body {
  position: relative;
  background: #fff;
  margin-top: -62px;
  padding: 80px 85px;
}

@media screen and (max-width: 767px) {
  .career-voice-body {
    margin-top: -43px;
    padding: 50px 13px;
  }
}

.career-voice-body > section {
  margin-top: 45px;
}

.career-voice-body > section:first-child {
  margin-top: 0;
}

/**=========================================
* [career] careerstep
* キャリアステップ
=========================================*/
.careerstep {
  position: relative;
  margin: 120px 0 0 0;
}

@media screen and (max-width: 767px) {
  .careerstep {
    margin-top: 50px;
  }
}

.careerstep-image-2 {
  position: absolute;
  top: 50px;
  left: 50%;
}

@media screen and (max-width: 767px) {
  .careerstep-image-2 {
    position: relative;
    top: inherit;
    left: inherit;
    margin-top: 25px;
    padding: 0 40px;
  }
  .careerstep-image-2 > img {
    width: 100%;
  }
}

.careerstep-header {
  position: relative;
  background: #1f3143;
  padding: 140px 0 50px;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .careerstep-header {
    padding: 25px 40px;
  }
}

.careerstep-title {
  position: absolute;
  bottom: 50px;
  left: calc(50% + 58px);
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.75;
  font-weight: normal;
}

@media screen and (max-width: 767px) {
  .careerstep-title {
    position: relative;
    bottom: inherit;
    left: inherit;
    margin: 22px 0 -3px;
    font-size: 1.2rem;
    line-height: 1.5;
  }
}

.careerstep-flow-container {
  background: url(../img/career/careerstep/bg_dot.png) repeat-y 28px top;
  background-size: 5px auto;
  margin: 0 auto;
  width: 1240px;
}

@media screen and (max-width: 767px) {
  .careerstep-flow-container {
    background-position: 46px top;
    background-size: 3px auto;
    width: 100%;
  }
}

.careerstep-flow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 60px 0 0 0;
}

@media screen and (max-width: 767px) {
  .careerstep-flow {
    display: block;
    padding: 50px 0 0 0;
  }
}

.careerstep-flow-col-left {
  padding: 0 66px 0 75px;
  width: 50%;
}

@media screen and (max-width: 767px) {
  .careerstep-flow-col-left {
    padding: 0 40px 0 70px;
    width: 100%;
  }
}

.careerstep-flow-col-right {
  padding: 0 110px 0 0;
  width: 50%;
}

@media screen and (max-width: 767px) {
  .careerstep-flow-col-right {
    padding: 24px 40px 0 70px;
    width: 100%;
  }
}

.careerstep-flow .flow-title {
  position: relative;
  margin: 0;
  line-height: 1;
}

.careerstep-flow .flow-title:before {
  content: "";
  display: block;
  position: absolute;
  top: 7px;
  left: -45px;
  right: 0;
  background-color: #a8cb0c;
  height: 1px;
}

@media screen and (max-width: 767px) {
  .careerstep-flow .flow-title:before {
    left: -20px;
  }
}

.careerstep-flow .flow-title:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: -54px;
  background: url(../img/career/careerstep/icon_hex.png) no-repeat center center;
  background-size: cover;
  width: 20px;
  height: 19px;
}

@media screen and (max-width: 767px) {
  .careerstep-flow .flow-title:after {
    top: 1px;
    left: -30px;
    width: 15px;
    height: 13px;
  }
}

.careerstep-flow .flow-title > .text {
  position: relative;
  left: -8px;
  display: inline-block;
  background: #fff;
  padding: 0 10px;
  font-size: 1.5rem;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .careerstep-flow .flow-title > .text {
    left: -4px;
    padding: 0 4px;
    font-size: 1.4rem;
  }
}

.careerstep-flow .flow-text-1 {
  margin: 20.5px 0 -4.5px;
  font-size: 1.5rem;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .careerstep-flow .flow-text-1 {
    font-size: 1.4rem;
  }
}

.careerstep-flow .flow-text-2 {
  margin: 8.5px 0 -6.5px;
  font-size: 1.8rem;
  line-height: 1.72222;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .careerstep-flow .flow-text-2 {
    margin: 10.5px 0 -4.5px;
    font-size: 1.9rem;
    line-height: 1.47368;
  }
}

/**
 * culture Page Style
**/
/**=========================================
* [culture] wlb
* ワークライフバランス
=========================================*/
.bg-wlb-body {
  background: url(../img/culture/wlb/bg_1.png) no-repeat center top;
}

@media screen and (max-width: 767px) {
  .bg-wlb-body {
    background-image: url(../img/culture/wlb/bg_1_sp.png);
    background-size: 655px auto;
    background-position: center 20px;
  }
}

.wlb-1-row .l-col-1:first-child {
  width: 597px;
}

@media screen and (max-width: 767px) {
  .wlb-1-row .l-col-1:first-child {
    width: 100%;
  }
}

.wlb-1-row .l-col-1:nth-child(2) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.wlb-2-row .m-text-lv1, .wlb-2-row .member-profile-text {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .wlb-graph {
    text-align: center;
  }
  .wlb-graph img {
    max-width: 294px;
    width: 100%;
  }
}

.m-title-hex.wlb {
  position: relative;
  margin: 0 auto;
  width: 220px;
  height: 191px;
}

@media screen and (max-width: 767px) {
  .m-title-hex.wlb {
    width: 192.5px;
    height: 167px;
  }
}

.m-title-hex.wlb:before {
  content: "";
  display: block;
  position: absolute;
  top: 150px;
  left: -19px;
  z-index: 1;
  background: url(../img/culture/wlb/ttl_hex_gray.png) no-repeat;
  background-size: 100% 100%;
  width: 125px;
  height: 108px;
}

@media screen and (max-width: 767px) {
  .m-title-hex.wlb:before {
    top: 132px;
    left: -17px;
    width: 109.5px;
    height: 94.5px;
  }
}

.wlb-voice {
  position: relative;
  background: #f6f6f6;
}

@media screen and (max-width: 767px) {
  .wlb-voice {
    background: transparent;
  }
}

@media screen and (max-width: 767px) {
  .wlb-voice:before {
    content: "";
    display: block;
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f6f6f6;
  }
}

.wlb-voice-inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 100px auto 0;
  padding: 60px 100px 60px 0;
  width: 1240px;
}

@media screen and (max-width: 767px) {
  .wlb-voice-inner {
    display: block;
    margin-top: 55px;
    padding: 0 40px 50px;
    width: 100%;
  }
}

.wlb-voice-image {
  position: relative;
  margin-top: -120px;
  padding-right: 40px;
}

@media screen and (max-width: 767px) {
  .wlb-voice-image {
    margin: -30px auto 10px;
    padding-right: 0;
    width: 209px;
  }
}

.wlb-voice-text-container {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.wlb-voice-title {
  margin: 0;
  font-size: 2.6rem;
  line-height: 1.15385;
}

@media screen and (max-width: 767px) {
  .wlb-voice-title {
    font-size: 1.9rem;
    line-height: 1.47368;
  }
}

.wlb-voice-footer {
  margin: 30px 0 0 0;
  border-top: 1px solid #7d7d7d;
  padding: 24px 0 0;
  font-size: 1.6rem;
  line-height: 1.75;
}

@media screen and (max-width: 767px) {
  .wlb-voice-footer {
    margin-top: 24px;
    padding-top: 21px;
    font-size: 1.2rem;
    line-height: 1.5;
  }
}

.wlb-voice .reverse {
  padding-right: 0;
  padding-left: 100px;
}

@media screen and (max-width: 767px) {
  .wlb-voice .reverse {
    padding: 0 40px 50px;
  }
}

.wlb-voice .reverse .wlb-voice-image {
  padding-right: 0;
  padding-left: 40px;
}

@media screen and (max-width: 767px) {
  .wlb-voice .reverse .wlb-voice-image {
    padding-left: 0;
  }
}

/**=========================================
* [culture] questionnaire
* 若手社員アンケート
=========================================*/
.question-section {
  margin: 80px 45px 0;
}

@media screen and (max-width: 767px) {
  .question-section {
    overflow: hidden;
    margin-top: 50px;
    margin-right: 0;
    margin-left: 0;
    padding: 0 12px;
  }
}

.question-section:first-child {
  margin-top: 0;
}

.question-body {
  margin: 60px 0 0;
}

@media screen and (max-width: 767px) {
  .question-body {
    margin-top: 25px;
  }
}

.question-body:first-child {
  margin-top: 0;
}

.question-title-lv1 {
  position: relative;
  background: #fff;
  border-radius: 20px;
  margin: 0;
  padding: 32px 0;
  text-align: center;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .question-title-lv1 {
    border-radius: 10px;
    padding: 16px 15px 16px 10px;
  }
}

.question-title-lv1:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -39px;
  left: 50%;
  margin-left: -10px;
  border-top: 20px solid #fff;
  border-right: 10px solid rgba(255, 255, 255, 0);
  border-bottom: 20px solid rgba(255, 255, 255, 0);
  border-left: 10px solid rgba(255, 255, 255, 0);
}

@media screen and (max-width: 767px) {
  .question-title-lv1:after {
    bottom: -20px;
    margin-left: -5px;
    border-top-width: 10px;
    border-right-width: 5px;
    border-bottom-width: 10px;
    border-left-width: 5px;
  }
}

.question-title-lv1 > .text {
  position: relative;
  display: inline-block;
  padding: 0 0 0 75px;
  font-size: 3.2rem;
  line-height: 1.5;
  color: #1f3143;
}

@media screen and (max-width: 767px) {
  .question-title-lv1 > .text {
    padding-left: 37px;
    font-size: 1.6rem;
  }
}

.question-title-lv1 > .text:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  background: url(../img/culture/questionnaire/icon_mike.png) no-repeat left top;
  background-size: 100% 100%;
  margin-top: -35px;
  width: 60px;
  height: 70px;
}

@media screen and (max-width: 767px) {
  .question-title-lv1 > .text:before {
    margin-top: -17px;
    width: 30px;
    height: 35px;
  }
}

.question-title-lv2 {
  margin: -5.6px 0;
  font-size: 2.8rem;
  line-height: 1.4;
  color: #1f3143;
}

@media screen and (max-width: 767px) {
  .question-title-lv2 {
    margin: -6px 0;
    font-size: 1.5rem;
    line-height: 1.8;
  }
}

.question-fukidashi-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 30px;
}

@media screen and (max-width: 767px) {
  .question-fukidashi-row {
    padding: 0 27px;
  }
}

.question-fukidashi-row > .col-1 {
  padding: 0 20px;
  width: 50%;
}

@media screen and (max-width: 767px) {
  .question-fukidashi-row > .col-1:not(:first-child) {
    margin-top: 25px !important;
  }
}

.question-image-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 80px;
}

@media screen and (max-width: 767px) {
  .question-image-row {
    margin-top: 40px;
  }
  .question-image-row img {
    width: 100%;
    max-width: 320px;
  }
}

.question-image-row:first-child {
  margin-top: 0;
}

.question-image-row > .col-1 {
  width: 50%;
}

@media screen and (max-width: 767px) {
  .question-image-row > .col-1 {
    padding: 0 12px;
  }
}

@media screen and (max-width: 767px) {
  .page-questionnaire .break-sp {
    display: block;
  }
  .page-questionnaire .break-sp > .col-1 {
    padding: 0;
    width: 100%;
  }
  .page-questionnaire .break-sp > .col-1 > img {
    max-width: 375px;
  }
  .page-questionnaire .break-sp > .col-1:nth-child(2) {
    margin-top: 40px;
  }
}

.question-text-1 {
  margin: -7px 0;
  font-size: 1.8rem;
  line-height: 1.77778;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .question-text-1 {
    margin: -6.5px 0;
    font-size: 1.4rem;
    line-height: 1.92857;
  }
}

.question-text-2 {
  margin: 6.16667px 0 -5.83333px;
  font-size: 1.5rem;
  line-height: 2.13333;
}

@media screen and (max-width: 767px) {
  .question-text-2 {
    margin: 4.5px 0 -7.5px;
    font-size: 1.2rem;
    line-height: 2.25;
  }
}

.question-yubi-item {
  background-repeat: no-repeat;
  background-position: left 12px;
  margin-top: 40px;
  padding-left: 66px;
}

@media screen and (max-width: 767px) {
  .question-yubi-item {
    background-size: 33px auto;
    margin-top: 25px;
    padding-left: 32px;
  }
}

.question-yubi-item--orange {
  background-image: url(../img/culture/questionnaire/icon_hand_orange.png);
}

.question-yubi-item--orange > .inner {
  background-color: #ff6600;
}

.question-yubi-item--blue {
  background-image: url(../img/culture/questionnaire/icon_hand_blue.png);
}

.question-yubi-item--blue > .inner {
  background-color: #4c5a69;
}

.question-yubi-item--blue > .inner:before {
  border-color: transparent #4c5a69 #4c5a69 transparent;
}

.question-yubi-item--green > .inner {
  background-color: #a8cb0c;
}

.question-yubi-item--green > .inner:before {
  border-color: transparent #a8cb0c #a8cb0c transparent;
}

.question-yubi-item--global {
  background-image: url(../img/culture/questionnaire/icon_earth.png);
  background-position: left 19px;
}

@media screen and (max-width: 767px) {
  .question-yubi-item--global {
    background-size: 22px;
  }
}

.question-yubi-item--global > .inner {
  position: relative;
}

.question-yubi-item--global > .inner:before {
  content: "";
  position: absolute;
  top: 12px;
  left: -22px;
  border-width: 6px 11px;
  border-style: solid;
  width: 0;
  height: 0;
}

@media screen and (max-width: 767px) {
  .question-yubi-item--global > .inner:before {
    left: -10px;
    border-width: 3px 5px;
  }
}

.question-yubi-item:first-child {
  margin-top: 0;
}

.question-yubi-item > .inner {
  border-radius: 10px;
  padding: 19px 18px;
  color: #fff;
}

.question-work-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
  margin: 0 55px;
  padding: 20px 20px 40px;
}

@media screen and (max-width: 767px) {
  .question-work-row {
    margin: 0 28px;
    padding: 10px 15px 25px;
  }
}

.question-work-row > .col-1 {
  padding: 0 20px;
}

.question-work-item {
  position: relative;
  background: url(../img/culture/questionnaire/icon_medal.png) no-repeat left 20px;
  padding: 30px 0 20px 58px;
}

@media screen and (max-width: 767px) {
  .question-work-item {
    background-size: 20px auto;
    padding: 20px 0 18px 29px;
  }
}

.question-work-item:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffb07c;
  border-radius: 3px;
  height: 6px;
}

@media screen and (max-width: 767px) {
  .question-work-item:before {
    height: 3px;
  }
}

.question-member {
  position: relative;
  padding: 16px 55px;
}

@media screen and (max-width: 767px) {
  .question-member {
    padding: 12px 0;
  }
}

.question-member:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -26px;
  left: -26px;
  bottom: 0;
  background: url(../img/culture/questionnaire/bg_hex.png) repeat-y center top;
}

@media screen and (max-width: 767px) {
  .question-member:before {
    background-size: 600px auto;
  }
}

.question-member-text {
  position: relative;
  text-align: center;
  margin: 0;
  padding-bottom: 20px;
  line-height: 100px;
}

@media screen and (max-width: 767px) {
  .question-member-text {
    line-height: 40px;
  }
}

.question-member-text > .text-1,
.question-member-text > .text-2,
.question-member-text > .text-3 {
  display: block;
  margin: 20px 0 0;
  padding: 14px 15px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.3;
}

@media screen and (max-width: 767px) {
  .question-member-text > .text-1,
  .question-member-text > .text-2,
  .question-member-text > .text-3 {
    margin: 12px 28px 0;
    padding: 12px 9px;
    font-size: 1.4rem;
  }
}

.question-member-text > .text-1 .small,
.question-member-text > .text-2 .small,
.question-member-text > .text-3 .small {
  font-size: 1.5rem;
  font-weight: normal;
}

@media screen and (max-width: 767px) {
  .question-member-text > .text-1 .small,
  .question-member-text > .text-2 .small,
  .question-member-text > .text-3 .small {
    font-size: 1.2rem;
  }
}

.question-member-text > .text-1 {
  background-color: #4c5a69;
  color: #fff;
}

.question-member-text > .text-2 {
  background-color: #78818d;
  color: #fff;
}

.question-member-text > .text-3 {
  background-color: #c6cacf;
  color: #4c5a69;
}

.question-clip-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -30px;
  padding: 0 40px;
}

@media screen and (max-width: 767px) {
  .question-clip-row {
    margin-top: 0;
    padding: 0 28px;
  }
}

.question-clip-row > .col-1 {
  padding: 0 15px;
  width: 33.333%;
}

.question-clip-item {
  position: relative;
  background: #fff url(../img/culture/questionnaire/bg_paper.png) repeat center top;
  margin-top: 50px;
  border-width: 8px;
  border-radius: 10px;
  border-style: solid;
  padding: 24px 19px 13px;
}

@media screen and (max-width: 767px) {
  .question-clip-item {
    background-size: 5px auto;
    margin-top: 28px;
    border-width: 4px;
    padding: 24px 14px 17px;
  }
}

.question-clip-item:first-child {
  margin-top: 38px;
}

.question-clip-item--orange {
  border-color: #ff6600;
}

.question-clip-item--green {
  border-color: #a8cb0c;
}

@media screen and (max-width: 767px) {
  .question-clip-item.orange-sp {
    border-color: #ff6600;
  }
}

@media screen and (max-width: 767px) {
  .question-clip-item.green-sp {
    border-color: #a8cb0c;
  }
}

.question-clip-item:before {
  content: "";
  display: block;
  position: absolute;
  top: -36px;
  left: 50%;
  background: url(../img/culture/questionnaire/icon_clip_1.png) no-repeat left top;
  background-size: 100% 100%;
  margin-left: -39px;
  width: 78px;
  height: 48px;
}

@media screen and (max-width: 767px) {
  .question-clip-item:before {
    top: -18px;
    margin-left: -19px;
    width: 39px;
    height: 24px;
  }
}

.question-clip-item.v2 {
  border-radius: 0;
  border-top: none;
  padding-top: 40px;
}

@media screen and (max-width: 767px) {
  .question-clip-item.v2 {
    padding-top: 25px;
  }
}

.question-clip-item.v2:before {
  top: -23px;
  right: 28px;
  left: inherit;
  width: 44px;
  height: 48px;
}

@media screen and (max-width: 767px) {
  .question-clip-item.v2:before {
    top: -12px;
    right: 14px;
    width: 22px;
    height: 24px;
  }
}

.question-clip-item.v2.question-clip-item--heart:before {
  top: -24px;
  left: 60px;
  right: inherit;
  width: 52px;
  height: 49px;
}

@media screen and (max-width: 767px) {
  .question-clip-item.v2.question-clip-item--heart:before {
    top: -12px;
    left: 32px;
    width: 26px;
    height: 25px;
  }
}

.question-clip-item.v2.question-clip-item--orange:before {
  background-image: url(../img/culture/questionnaire/icon_clip_2_orange.png);
}

.question-clip-item.v2.question-clip-item--orange.question-clip-item--heart:before {
  background-image: url(../img/culture/questionnaire/icon_heart_orange.png);
}

.question-clip-item.v2.question-clip-item--green:before {
  background-image: url(../img/culture/questionnaire/icon_clip_2_green.png);
}

.question-clip-item.v2.question-clip-item--green.question-clip-item--heart:before {
  background-image: url(../img/culture/questionnaire/icon_heart_green.png);
}

.question-clip-item.v2.question-clip-item--orange:before {
  background-image: url(../img/culture/questionnaire/icon_clip_2_orange.png);
}

.question-clip-item.v2.question-clip-item--green:before {
  background-image: url(../img/culture/questionnaire/icon_clip_2_green.png);
}

.question-hirameki-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -40px;
  padding: 0 34px;
}

@media screen and (max-width: 767px) {
  .question-hirameki-row {
    margin-top: 0;
    padding: 0 27px;
  }
}

.question-hirameki-row .col-1 {
  padding: 0 20px;
  width: 50%;
}

.question-hirameki-item {
  position: relative;
  background-color: #ff6600;
  margin-top: 40px;
  border-radius: 10px;
  color: #fff;
}

.question-hirameki-item .question-text-2 {
  position: absolute;
  padding-left: 28px;
  bottom: 36px;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .question-hirameki-item .question-text-2 {
    bottom: 24px;
    padding-left: 10px;
  }
}

.question-difficult {
  position: relative;
  background: #4c5a69 url(../img/culture/questionnaire/icon_shizuku.png) no-repeat 31px 20px;
  border-radius: 10px 10px 0 0;
  padding: 23px 24px 23px 80px;
}

@media screen and (max-width: 767px) {
  .question-difficult {
    background-position: 20px 15px;
    background-size: 21px auto;
    padding: 19px 24px 19px 50px;
  }
}

.question-difficult:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -19px;
  left: 0;
  right: 0;
  background: url(../img/culture/questionnaire/bg_hirameki.png) no-repeat center top;
  background-size: 100% 100%;
  height: 20px;
}

@media screen and (max-width: 767px) {
  .question-difficult:after {
    bottom: -10px;
    height: 10px;
  }
}

.question-hirameki {
  position: relative;
  background: url(../img/culture/questionnaire/icon_hirameki.png) no-repeat 20px 48px, url(../img/culture/questionnaire/icon_hirameki_hito.png) no-repeat center bottom;
  padding: 41px 24px 93px 80px;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .question-hirameki {
    background-position: 15px 20px, center bottom;
    background-size: 21px auto, 48px auto;
    padding: 23px 21px 53px 50px;
  }
}

.question-mood-row {
  background-color: #fff;
  margin: 0 54px;
  padding: 30px 40px 50px;
}

@media screen and (max-width: 767px) {
  .question-mood-row {
    margin: 0 17px;
    padding: 5px 15px 25px;
  }
}

.question-mood-item {
  position: relative;
}

.question-mood-item > .inner {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: right bottom 8px;
  padding: 20px 56px 20px 0;
}

@media screen and (max-width: 767px) {
  .question-mood-item > .inner {
    background-position: right bottom 3px;
    background-size: 25px 33px;
    padding: 20px 0 23px;
  }
}

.question-mood-item > .inner.orange {
  background-image: url(../img/culture/questionnaire/icon_isu_orange.png);
}

.question-mood-item > .inner.green {
  background-image: url(../img/culture/questionnaire/icon_isu_green.png);
}

.question-mood-item > .inner.blue {
  background-image: url(../img/culture/questionnaire/icon_isu_blue.png);
}

.question-mood-item:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #c6cacf;
  border-radius: 3px;
  height: 6px;
}

@media screen and (max-width: 767px) {
  .question-mood-item:before {
    height: 3px;
  }
}

.question-mood-item strong {
  font-size: 2.4rem;
}

@media screen and (max-width: 767px) {
  .question-mood-item strong {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 768px) {
  .question-mood-item .question-text-2 {
    margin-top: 0;
  }
}

.question-advice-item {
  background-repeat: no-repeat;
  background-position: left top;
  margin-top: 40px;
  padding-left: 98px;
}

@media screen and (max-width: 767px) {
  .question-advice-item {
    background-size: 49px auto;
    margin-top: 25px;
    padding-left: 49px;
  }
}

.question-advice-item--orange {
  background-image: url(../img/culture/questionnaire/icon_message_orange.png);
}

.question-advice-item--orange > .inner {
  background-color: #ff6600;
}

.question-advice-item--blue {
  background-image: url(../img/culture/questionnaire/icon_message_blue.png);
}

.question-advice-item--blue > .inner {
  background-color: #4c5a69;
}

.question-advice-item:first-child {
  margin-top: 0;
}

.question-advice-item > .inner {
  border-radius: 10px;
  padding: 19px 30px;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .question-advice-item > .inner {
    padding: 15px 20px;
  }
}

/**
 * Information Page Style
**/
/**=========================================
* [information] message
=========================================*/
.l-col-1.message-r {
  position: relative;
  padding-bottom: 60px;
}

@media screen and (max-width: 767px) {
  .l-col-1.message-r {
    padding-bottom: 0;
  }
}

.message-strong {
  margin: 46px 0 0;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .message-strong {
    font-size: 1.6rem;
  }
}

/**=========================================
* [information] outline
=========================================*/
.faq {
  margin: 60px 0 0;
}

@media screen and (max-width: 767px) {
  .faq {
    margin-top: 45px;
  }
}

.faq:first-child {
  margin-top: 0;
}

.faq-q {
  position: relative;
  margin: 0;
  padding: 25px 0 25px 102px;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .faq-q {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 0 25px;
  }
}

.faq-q > .icon {
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 767px) {
  .faq-q > .icon {
    position: relative;
    top: inherit;
    left: inherit;
    width: 45px;
  }
}

.faq-q > .text {
  display: block;
  margin: -7px 0;
  font-size: 1.8rem;
  line-height: 1.77778;
}

@media screen and (max-width: 767px) {
  .faq-q > .text {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: -4px 0 -4px 10px;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

.faq-a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.faq-a > .icon {
  display: block;
  width: 141px;
  text-align: right;
}

@media screen and (max-width: 767px) {
  .faq-a > .icon {
    width: 45px;
  }
}

.faq-a > .text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: block;
  margin: -8.5px 0 -8.5px 22px;
  padding: 23px 0 0;
  font-size: 1.5rem;
  line-height: 2.13333;
}

@media screen and (max-width: 767px) {
  .faq-a > .text {
    margin: -6.5px 0 -6.5px 10px;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.92857;
  }
}

/**
 * Mecha_chemi Page Style
**/
/**=========================================
* [mecha_chemi] development
* 事業展開
=========================================*/
.mecha_chemi-career {
  overflow: hidden;
  position: relative;
  margin: 80px 0 0;
  min-height: 460px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-career {
    margin-top: 50px;
    height: inherit;
  }
}

.mecha_chemi-career:first-child {
  margin-top: 0;
}

.mecha_chemi-career-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: calc(50% + 180px);
  text-align: right;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-career-image {
    position: relative;
    padding-right: 20px;
    width: 100%;
  }
}

.mecha_chemi-career--reverse .mecha_chemi-career-image {
  left: inherit;
  right: 0;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-career--reverse .mecha_chemi-career-image {
    padding-right: 0;
    padding-left: 20px;
  }
}

.mecha_chemi-career-image img {
  position: relative;
  z-index: 2;
}

.mecha_chemi-career-image:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  right: 260px;
  z-index: 1;
  background-color: #a8cb0c;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-career-image:after {
    display: none;
  }
}

.mecha_chemi-career--reverse .mecha_chemi-career-image:after {
  left: 260px;
  right: -100%;
}

.mecha_chemi-career > .inner {
  position: relative;
  z-index: 2;
  background-color: #f4f4f4;
  margin: 100px 0 0 calc(50% - 80px);
  padding: 80px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-career > .inner {
    margin: -40px 20px 0;
    padding: 20px;
    width: calc(100% - 40px);
  }
}

.mecha_chemi-career--reverse > .inner {
  margin: 100px calc(50% - 80px) 0 0;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-career--reverse > .inner {
    margin: -20px 20px 0;
  }
}

.mecha_chemi-career-title {
  position: relative;
  margin: 0;
  max-width: 520px;
  font-size: 2.4rem;
  line-height: 1.29167;
  letter-spacing: 2px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-career-title {
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 1;
  }
}

.mecha_chemi-career--reverse .mecha_chemi-career-title {
  margin-left: auto;
}

.mecha_chemi-career-body {
  position: relative;
  margin-top: 40px;
  max-width: 520px;
}

.mecha_chemi-career--reverse .mecha_chemi-career-body {
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-career-body {
    margin: 20px 0 0;
    max-width: inherit;
  }
}

.career-image-2-row {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .career-image-2-row {
    margin-right: -20px;
    margin-left: -20px;
  }
}

.career-image-2-row-container {
  margin: 0 auto;
  max-width: 1040px;
}

@media screen and (min-width: 768px) {
  .career-image-2-row > .l-col-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    padding-left: 20px;
    padding-right: 20px;
    width: 50%;
  }
}

.m-title-hex.career-image {
  position: relative;
  width: 220px;
  height: 191px;
}

@media screen and (max-width: 767px) {
  .m-title-hex.career-image {
    width: 192.5px;
    height: 167px;
  }
}

.m-title-hex.career-image:before {
  content: "";
  display: block;
  position: absolute;
  top: 40px;
  left: 170px;
  z-index: 1;
  background: url(../img/mecha_chemi/ttl_hex_gray.png) no-repeat;
  background-size: 100% 100%;
  width: 125px;
  height: 108px;
}

@media screen and (max-width: 767px) {
  .m-title-hex.career-image:before {
    top: 132px;
    left: -17px;
    width: 109.5px;
    height: 94.5px;
  }
}

.career-image-2-row .m-icon-list {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 30px auto 0;
}

.career-image-2-row .m-icon-list > li {
  text-align: left;
}

.mecha_chemi-kaibou-gyoumu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-kaibou-gyoumu {
    display: block;
  }
}

.mecha_chemi-kaibou-gyoumu > .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #1f3143;
  margin: 0;
  padding: calc(20px - 18px * (30 / 18 - 1) / 2) 0;
  width: 220px;
  font-size: 1.8rem;
  line-height: 1.66667;
  text-align: center;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-kaibou-gyoumu > .title {
    width: 100%;
  }
}

.mecha_chemi-kaibou-gyoumu > .body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: 20px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-kaibou-gyoumu > .body {
    margin-top: 20px;
    padding-left: 0;
  }
}

.mecha_chemi-kaibou-gyoumu > .body .m-text-lv1, .mecha_chemi-kaibou-gyoumu > .body .member-profile-text {
  margin: 0;
}

.mecha_chemi-kaibou-senmon__container {
  background: url(../img/mecha_chemi/kaibou_img.jpg) no-repeat left top;
  background-size: contain;
  margin: 40px 0 0;
  padding-left: 370px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-kaibou-senmon__container {
    background-position: center top;
    padding-top: 200px;
    padding-left: 0;
  }
}

.mecha_chemi-kaibou-senmon {
  background-color: #f4f4f4;
  padding: 35px 25px 40px 35px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-kaibou-senmon {
    padding: 20px;
  }
}

.mecha_chemi-kaibou-senmon .m-icon-list.thin > li {
  margin-top: 8px;
  padding-top: 0;
}

.mecha_chemi-voice-list-container {
  margin-top: 60px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-list-container {
    margin-top: 30px;
  }
}

.mecha_chemi-voice-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.mecha_chemi-voice-list:first-child {
  margin-top: -40px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-list:first-child {
    margin-top: -25px;
  }
}

.mecha_chemi-voice-thumb {
  display: block;
  position: relative;
  margin: 40px calc(65px + 35px) 0 35px;
  min-width: 250px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-thumb {
    margin: 25px 10px 0;
    min-width: inherit;
    padding: 0 10px 0 0;
    width: 190px;
  }
}

.mecha_chemi-voice-thumb:before {
  content: "";
  display: block;
  position: absolute;
  background: #1f3143;
  top: 130px;
  left: 0;
  bottom: 0;
  width: 100%;
  -webkit-transform: skewX(30deg) translateX(30px);
          transform: skewX(30deg) translateX(30px);
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-thumb:before {
    top: 100px;
    -webkit-transform: skewX(30deg);
            transform: skewX(30deg);
  }
}

.mecha_chemi-voice-thumb .popup-icon {
  position: absolute;
  top: 155px;
  left: 205px;
  width: 24px;
  height: 16px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-thumb .popup-icon {
    top: 110px;
    left: 140px;
    width: 12px;
    height: 8px;
  }
}

.mecha_chemi-voice-thumb .popup-icon:before, .mecha_chemi-voice-thumb .popup-icon:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}

.mecha_chemi-voice-thumb .popup-icon:before {
  position: relative;
  top: 0;
  left: 0;
  background-color: #fff;
}

.mecha_chemi-voice-thumb .popup-icon:after {
  position: absolute;
  top: 8px;
  left: -8px;
  border: 2px solid #fff;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-thumb .popup-icon:after {
    border-width: 1px;
    top: 4px;
    left: -4px;
  }
}

.mecha_chemi-voice-thumb > .thumb {
  position: relative;
  z-index: 3;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-thumb > .thumb {
    width: 140px;
  }
}

.mecha_chemi-voice-thumb > .name {
  display: block;
  position: relative;
  z-index: 4;
  padding: 17px 0 20px 80px;
  color: #a8cb0c;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  line-height: 1.4;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-thumb > .name {
    padding: 10px 0 15px 25px;
    font-size: 1.3rem;
  }
}

.mecha_chemi-other-project-nav-title {
  margin: 120px auto 0;
  max-width: 1200px;
  border-top: 2px solid #ff6600;
  border-right: 2px solid #ff6600;
  border-left: 2px solid #ff6600;
  padding: calc(25px - 24px * 0.4 / 2) 0 0;
  font-size: 2.4rem;
  line-height: 1.4;
  text-align: center;
  letter-spacing: .1em;
  color: #ff6600;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-other-project-nav-title {
    margin: 60px auto 0;
    max-width: 294px;
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

.mecha_chemi-other-project-nav .relative-link-container {
  max-width: 1080px;
}

/**=========================================
* modal window
=========================================*/
.js-modal-button:focus {
  outline-color: none;
  outline: none;
}

.m-detail-content {
  margin: 0 auto;
  max-width: 860px;
}

.m-detail-content .mfp-close,
.m-detail-content .m-detail-content__close {
  cursor: pointer;
  display: block;
  background: url(../img/mecha_chemi/btn_close.png) no-repeat left top;
  background-size: 68px auto;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: calc(430px - 68px);
  width: 68px;
  height: 44px;
  font-size: 0;
  line-height: 1;
  text-align: center;
  color: #fff;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .m-detail-content .mfp-close,
  .m-detail-content .m-detail-content__close {
    right: 0;
    left: inherit;
    margin-left: 0;
  }
}

.m-detail-content .m-detail-content__close {
  top: inherit;
  bottom: 0;
  left: inherit;
  right: 0;
  margin-left: 0;
  -webkit-transform: scale(1, -1);
          transform: scale(1, -1);
}

.m-detail-content-inner {
  cursor: default;
  position: relative;
  z-index: 2;
  background: #fff;
  margin-bottom: 80px;
  padding-bottom: 80px;
}

.mecha_chemi-voice-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-header {
    display: block;
  }
}

.mecha_chemi-voice-header > .head-image {
  position: relative;
  top: -20px;
  margin-bottom: -20px;
  width: 410px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-header > .head-image {
    display: block;
    width: 205px;
  }
}

.mecha_chemi-voice-header > .head-text-container {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 40px 0 0 20px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-header > .head-text-container {
    padding: 20px 0 0 20px;
  }
}

.mecha_chemi-voice-header > .head-text-container > .head-post {
  display: block;
  border-bottom: 4px solid #a8cb0c;
  padding: 0 0 20px 0;
  font-size: 2rem;
  line-height: 1.5;
  color: #a8cb0c;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-header > .head-text-container > .head-post {
    border-bottom: 2px solid #a8cb0c;
    padding-bottom: 10px;
  }
}

.mecha_chemi-voice-header > .head-text-container > .head-title {
  margin: calc(40px - 28px * (52 / 28 - 1)) 0 0;
  font-size: 2.8rem;
  line-height: 1.85714;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-header > .head-text-container > .head-title {
    margin: calc(25px - 24px * 0.6) 0 0;
    font-size: 2.4rem;
    line-height: 1.6;
  }
}

.mecha_chemi-voice-section {
  margin-top: 40px;
  padding: 0 40px;
}

@media screen and (max-width: 767px) {
  .mecha_chemi-voice-section {
    margin-top: 25px;
    padding: 0 20px;
  }
}

.mecha_chemi-voice-section > .title {
  background: url(../img/common/hex_green.png) no-repeat left top 3px;
  background-size: 25px auto;
  margin: 0;
  padding-left: 35px;
  font-size: 1.8rem;
  line-height: 1.72222;
}

.mecha_chemi-voice-section > .body {
  padding-top: 15px;
  padding-left: 35px;
}

/**=========================================
* magnific popup custom
=========================================*/
.mfp-container {
  padding: 60px 10px;
}

.mfp-wrap {
  cursor: pointer !important;
}

.mfp-wrap {
  opacity: 0;
  -webkit-transition: .2s;
  transition: .2s;
}

.mfp-wrap.mfp-ready {
  opacity: 1;
}

.mfp-wrap.mfp-removing {
  opacity: 0;
}

.mfp-bg {
  background-color: #1f3143;
  opacity: 0;
  -webkit-transition: .2s;
  transition: .2s;
}

.mfp-ready.mfp-bg {
  opacity: 0.95;
}

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