@charset "UTF-8";
/*! Made with Bones: http://themble.com/bones :) */
/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.

Helpful articles on Sass file organization:
http://thesassway.com/advanced/modular-css-naming-conventions

******************************************************************/
/*********************
IMPORTING PARTIALS
These files are needed at the beginning so that we establish all
our mixins, functions, and variables that we'll be using across
the whole project.
*********************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700,900,700i|Roboto+Condensed:300i");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/******************************************************************
Site Name:
Author:

Stylesheet: Mixins Stylesheet

This is where you can take advantage of Sass' great features: Mixins.
I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.

A WORD OF WARNING: It's very easy to overdo it here. Be careful and
remember less is more.

Helpful:
http://sachagreif.com/useful-sass-mixins/
http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code
http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins/

******************************************************************/
/*********************
TRANSITION
*********************/
/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include transition(all 0.2s ease-in-out);
*/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
/*********************
MEDIA QUERY
*********************/
/******************************************************************
Site Name:
Author:

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*********************
FONTS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*********************
SHADOWS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*********************
HEADER
*********************/
/*
Here's a great tutorial on how to
use color variables properly:
http://sachagreif.com/sass-color-variables/
*/
/******************************************************************
Site Name:
Author:

Stylesheet: Typography

Need to import a font or set of icons for your site? Drop them in
here or just use this to establish your typographical grid. Or not.
Do whatever you want to...GOSH!

Helpful Articles:
http://trentwalton.com/2012/06/19/fluid-type/
http://ia.net/blog/responsive-typography-the-basics/
http://alistapart.com/column/responsive-typography-is-a-physical-discipline

******************************************************************/
/*********************
FONT FACE (IN YOUR FACE)
*********************/
/*  To embed your own fonts, use this syntax
  and place your fonts inside the
  library/fonts folder. For more information
  on embedding fonts, go to:
  http://www.fontsquirrel.com/
  Be sure to remove the comment brackets.
*/
/*  @font-face {
      font-family: 'Font Name';
      src: url('/wp-content/themes/mob-hp/library/css/library/fonts/font-name.eot');
      src: url('/wp-content/themes/mob-hp/library/css/library/fonts/font-name.eot#iefix') format('embedded-opentype'),
             url('/wp-content/themes/mob-hp/library/css/library/fonts/font-name.woff') format('woff'),
             url('/wp-content/themes/mob-hp/library/css/library/fonts/font-name.ttf') format('truetype'),
             url('/wp-content/themes/mob-hp/library/css/library/fonts/font-name.svg#font-name') format('svg');
      font-weight: normal;
      font-style: normal;
  }
*/
/*
The following is based of Typebase:
https://github.com/devinhunt/typebase.css
I've edited it a bit, but it's a nice starting point.
*/
/*
 i imported this one in the functions file so bones would look sweet.
 don't forget to remove it for your site.
*/
/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
p {
  -ms-word-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3; }

/******************************************************************
Site Name:
Author:

Stylesheet: Grid Stylesheet

I've seperated the grid so you can swap it out easily. It's
called at the top the style.scss stylesheet.

There are a ton of grid solutions out there. You should definitely
experiment with your own. Here are some recommendations:

http://gridsetapp.com - Love this site. Responsive Grids made easy.
http://susy.oddbird.net/ - Grids using Compass. Very elegant.
http://gridpak.com/ - Create your own responsive grid.
https://github.com/dope/lemonade - Neat lightweight grid.


The grid below is a custom built thingy I modeled a bit after
Gridset. It's VERY basic and probably shouldn't be used on
your client projects. The idea is you learn how to roll your
own grids. It's better in the long run and allows you full control
over your project's layout.

******************************************************************/
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; }

.center {
  margin: 0 auto; }

/*
Mobile Grid Styles
These are the widths for the mobile grid.
There are four types, but you can add or customize
them however you see fit.
*/
@media (max-width: 767px) {
  .m-all {
    box-sizing: border-box;
    width: 100%;
    padding-right: 0; }
  .m-1of2 {
    box-sizing: border-box;
    width: 50%; }
  .m-1of3 {
    box-sizing: border-box;
    width: 33.33%; }
  .m-2of3 {
    box-sizing: border-box;
    width: 66.66%; }
  .m-1of4 {
    box-sizing: border-box;
    width: 25%; }
  .m-3of4 {
    box-sizing: border-box;
    width: 75%; } }

/* Portrait tablet to landscape */
@media (min-width: 768px) and (max-width: 1029px) {
  .t-all {
    box-sizing: border-box;
    width: 100%;
    padding-right: 0; }
  .t-1of2 {
    box-sizing: border-box;
    width: 50%; }
  .t-1of3 {
    box-sizing: border-box;
    width: 33.33%; }
  .t-2of3 {
    box-sizing: border-box;
    width: 66.66%; }
  .t-1of4 {
    box-sizing: border-box;
    width: 25%; }
  .t-3of4 {
    box-sizing: border-box;
    width: 75%; }
  .t-1of5 {
    box-sizing: border-box;
    width: 20%; }
  .t-2of5 {
    box-sizing: border-box;
    width: 40%; }
  .t-3of5 {
    box-sizing: border-box;
    width: 60%; }
  .t-4of5 {
    box-sizing: border-box;
    width: 80%; } }

/* Landscape to small desktop */
@media (min-width: 1030px) {
  .d-all {
    box-sizing: border-box;
    width: 100%; }
  .d-1of2 {
    box-sizing: border-box;
    width: 50%; }
  .d-1of3 {
    box-sizing: border-box;
    width: 33.33%; }
  .d-2of3 {
    box-sizing: border-box;
    width: 66.66%; }
  .d-1of4 {
    box-sizing: border-box;
    width: 25%; }
  .d-3of4 {
    box-sizing: border-box;
    width: 75%; }
  .d-1of5 {
    box-sizing: border-box;
    width: 20%; }
  .d-2of5 {
    box-sizing: border-box;
    width: 40%; }
  .d-3of5 {
    box-sizing: border-box;
    width: 60%; }
  .d-4of5 {
    box-sizing: border-box;
    width: 80%; }
  .d-1of6 {
    box-sizing: border-box;
    width: 16.6666666667%; }
  .d-1of7 {
    box-sizing: border-box;
    width: 14.2857142857%; }
  .d-2of7 {
    box-sizing: border-box;
    width: 28.5714286%; }
  .d-3of7 {
    box-sizing: border-box;
    width: 42.8571429%; }
  .d-4of7 {
    box-sizing: border-box;
    width: 57.1428572%; }
  .d-5of7 {
    box-sizing: border-box;
    width: 71.4285715%; }
  .d-6of7 {
    box-sizing: border-box;
    width: 85.7142857%; }
  .d-1of8 {
    box-sizing: border-box;
    width: 12.5%; }
  .d-5of8 {
    box-sizing: border-box;
    width: 62.5%; }
  .d-1of9 {
    box-sizing: border-box;
    width: 11.1111111111%; }
  .d-1of10 {
    box-sizing: border-box;
    width: 10%; }
  .d-1of11 {
    box-sizing: border-box;
    width: 9.09090909091%; }
  .d-1of12 {
    box-sizing: border-box;
    width: 8.33%; } }

/*********************
IMPORTING MODULES
Modules are reusable blocks or elements we use throughout the project.
We can break them up as much as we want or just keep them all in one.
I mean, you can do whatever you want. The world is your oyster. Unless
you hate oysters, then the world is your peanut butter & jelly sandwich.
*********************/
/******************************************************************
Site Name:
Author:

Stylesheet: Button Styles

Buttons are a pretty important part of your site's style, so it's
important to have a consistent baseline for them. Use this stylesheet
to create all kinds of buttons.

Helpful Links:
http://galp.in/blog/2011/08/02/the-ui-guide-part-1-buttons/

******************************************************************/
/*********************
BUTTON DEFAULTS
We're gonna use a placeholder selector here
so we can use common styles. We then use this
to load up the defaults in all our buttons.

Here's a quick video to show how it works:
http://www.youtube.com/watch?v=hwdVpKiJzac

*********************/
.btn--base-color, .btn--reverse-color, .home .title-line-sec .variable-btn, .btn--deactive {
  padding: 1em 3em;
  border-radius: 3em;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  cursor: pointer;
  transition: all .2s ease; }
  .btn--base-color:hover, .btn--reverse-color:hover, .home .title-line-sec .variable-btn:hover, .btn--deactive:hover, .btn--base-color:focus, .btn--reverse-color:focus, .home .title-line-sec .variable-btn:focus, .btn--deactive:focus {
    opacity: 1.0 !important;
    text-decoration: none;
    outline: none; }
  .btn--base-color:active, .btn--reverse-color:active, .home .title-line-sec .variable-btn:active, .btn--deactive:active {
    top: 1px; }

/*
An example button.
You can use this example if you want. Just replace all the variables
and it will create a button dependant on those variables.
*/
.btn--base-color {
  color: #fff !important;
  background-color: #009ce4; }
  .btn--base-color:hover, .btn--base-color:focus {
    background-color: #008ed0; }
  .btn--base-color:active {
    background-color: #008bcb; }

.btn--reverse-color, .home .title-line-sec .variable-btn {
  color: #009ce4;
  background-color: #fff; }
  .btn--reverse-color:hover, .home .title-line-sec .variable-btn:hover, .btn--reverse-color:focus, .home .title-line-sec .variable-btn:focus {
    background-color: whitesmoke; }
  .btn--reverse-color:active, .home .title-line-sec .variable-btn:active {
    background-color: #f2f2f2; }

.btn--deactive {
  color: #fff !important;
  background-color: #E0E0E0;
  cursor: default; }

/******************************************************************
Site Name:
Author:

Stylesheet: Form Styles

We put all the form and button styles in here to setup a consistent
look. If we need to customize them, we can do this in the main
stylesheets and just override them. Easy Peasy.

You're gonna see a few data-uri thingies down there. If you're not
sure what they are, check this link out:
http://css-tricks.com/data-uris/
If you want to create your own, use this helpful link:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

******************************************************************/
.form-custom {
  text-align: center; }
  .form-custom .announce {
    margin: 48px auto;
    width: 95%; }
    .form-custom .announce p {
      letter-spacing: .2em; }
      .form-custom .announce p span {
        display: block; }
      .form-custom .announce p.ios a {
        color: #ff8086; }
      .form-custom .announce p + p {
        margin-top: 1em; }
  .form-custom .supplement {
    max-width: 540px;
    text-align: center;
    margin: 24px auto;
    font-size: 12px;
    font-weight: bold;
    color: #aaa; }

/*********************
IMG DEFAULTS
*********************/
.cover,
.contain,
.contain-height {
  display: inline-block;
  position: relative;
  overflow: hidden; }

.cover img,
.contain img,
.contain-height img {
  position: absolute;
  width: auto;
  height: auto;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.cover img {
  min-width: 100%;
  min-height: 100%; }

.contain img {
  max-width: 100%;
  max-height: 100%; }

.contain-height img {
  max-height: 100%; }

/*********************
PAGINATION DEFAULTS
*********************/
.page-nav {
  margin-top: 48px;
  margin-left: 10%;
  font-weight: bold; }
  .page-nav .page-numbers {
    color: rgba(51, 102, 255, 0.5); }
    .page-nav .page-numbers + .page-numbers {
      margin-left: 1em; }
  .page-nav .current {
    color: #009ce4; }

/*********************
TITLE
見出しや標題に関するモジュール
*********************/
/*********************
PAGE TITLE
*********************/
.page-title {
  margin: 84px auto;
  text-align: center; }
  .page-title h1 {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: .1em;
    text-indent: .2em; }
  .page-title p {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .2em;
    text-indent: .2em; }
  .page-title .line {
    margin: 18px auto 0;
    height: 3px;
    width: 56px;
    background-color: #009ce4; }
  @media screen and (min-width: 481px) {
    .page-title h1 {
      letter-spacing: .2em; } }

@media screen and (min-width: 1030px) {
  .hidden-desktop {
    display: none !important; } }

/*********************
IMPORTING CUSTOM
テンプレートに関するスタイル
*********************/
/*********************
add_container_title-custom
コンテナーとページタイトルが入ったテンプレート
*********************/
.custom-add_container_title {
  width: 100%; }
  .custom-add_container_title .container {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 48px;
    padding: 15px; }
  .custom-add_container_title__content {
    margin: 0 auto; }
  @media screen and (min-width: 1030px) {
    .custom-add_container_title .container {
      margin-bottom: 84px; } }

/*********************
add_title-custom
ページタイトルが入ったテンプレート
*********************/
.custom-add_title {
  padding-top: 15px; }

/*********************
recruit-custom
採用関連のメイントピック用のテンプレート
*********************/
.recruit-custom {
  width: 100%; }
  .recruit-custom .recruit-container {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 48px;
    padding: 15px; }
  @media (min-width: 768px) {
    .recruit-custom .recruit-container {
      width: 738px; } }
  @media (min-width: 992px) {
    .recruit-custom .recruit-container {
      width: 962px; } }
  @media (min-width: 1200px) {
    .recruit-custom .recruit-container {
      width: 1170px; } }
  .recruit-custom__title {
    margin: 84px auto;
    text-align: center;
    color: #009ce4; }
    .recruit-custom__title .title__main {
      font-size: 26px;
      font-weight: bold;
      letter-spacing: .2em;
      text-indent: .2em; }
    .recruit-custom__title .title__sub {
      font-size: 12px;
      font-weight: bold;
      letter-spacing: .2em;
      text-indent: .2em; }
    .recruit-custom__title .title__line {
      margin: 18px auto 0;
      height: 3px;
      width: 56px;
      background-color: #009ce4; }
  .recruit-custom__content {
    margin: 0 auto; }
  @media screen and (min-width: 1030px) {
    .recruit-custom .container {
      margin-bottom: 84px; }
      .recruit-custom .container .title__main {
        font-size: 32px; } }

/*********************
contact-custom
お問い合わせページのテンプレート
*********************/
.custom-contact {
  width: 100%; }
  .custom-contact .container {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 48px;
    padding: 15px; }
  .custom-contact .caution {
    margin: 48px auto;
    width: 100%;
    text-align: center;
    letter-spacing: .2em; }
    .custom-contact .caution p {
      display: block;
      color: #95989a;
      line-height: 1.8em; }
      .custom-contact .caution p span {
        display: inline-block; }
  .custom-contact__content {
    margin: 0 auto; }
  @media screen and (min-width: 1030px) {
    .custom-contact .container {
      margin-bottom: 84px; }
      .custom-contact .container .page-title {
        display: none; } }

/*********************
privacy-policy-custom
プライバシーポリシーに関するテンプレート
*********************/
.privacy-management .privacy__title {
  margin-top: 0; }

.privacy-disclosure .intro {
  font-weight: bold; }
  .privacy-disclosure .intro ol {
    list-style-type: lower-roman; }
    .privacy-disclosure .intro ol li {
      margin-top: 18px; }

.privacy .tabs {
  margin: 84px auto 72px;
  max-width: 330px;
  text-align: center; }
  .privacy .tabs .tab-item {
    display: inline-block;
    width: 49%;
    padding: 1em;
    text-align: center;
    color: rgba(33, 33, 33, 0.4);
    font-weight: bold;
    letter-spacing: .1em;
    text-indent: .1em;
    box-sizing: border-box; }
    .privacy .tabs .tab-item + .tab-item {
      border-left: 3px solid #e0e0e0;
      margin-left: -8px; }
    .privacy .tabs .tab-item span {
      cursor: pointer; }
      .privacy .tabs .tab-item span:hover {
        color: rgba(33, 33, 33, 0.2);
        transition: .2s; }
  .privacy .tabs .is-active {
    color: #212121 !important; }

.privacy .caution {
  font-size: 12px; }

.privacy .file-box span {
  display: block;
  margin: .8em; }

.privacy .description {
  position: relative;
  list-style: none; }
  .privacy .description::before {
    position: absolute;
    left: -1em;
    content: '※'; }

.privacy .list-style--none {
  list-style: none; }

.privacy h4 {
  font-size: 18px; }

.privacy__title {
  margin: 0 auto;
  margin-top: 84px;
  text-align: center; }
  .privacy__title h2 {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .2em;
    text-indent: .2em; }
  .privacy__title .line {
    margin: 18px auto 0;
    height: 3px;
    width: 56px;
    background-color: #009ce4; }

@media screen and (min-width: 1030px) {
  .privacy__title h2 {
    font-size: 32px; } }

.privacy .info-box {
  margin: 32px auto 0;
  font-size: 14px; }
  .privacy .info-box dl {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: flex-end; }
    .privacy .info-box dl dt {
      width: 130px; }
    .privacy .info-box dl dd {
      width: 150px;
      text-align: right; }
  .privacy .info-box .author {
    margin-top: .5em; }
    .privacy .info-box .author dl {
      margin-top: .5em; }

.privacy .content {
  margin: 0 auto;
  margin-top: 48px;
  max-width: 580px; }
  .privacy .content p {
    line-height: 1.8em; }
    .privacy .content p ~ p {
      margin-top: 1em; }
  .privacy .content .privacy-list {
    margin: 0 12px;
    margin-top: 48px;
    max-width: 540px; }
    .privacy .content .privacy-list li {
      margin-top: 1em;
      font-weight: bold; }
  .privacy .content ol, .privacy .content ul {
    margin: 0 12px;
    margin-top: 1em;
    padding-left: 1em; }
  .privacy .content ul {
    list-style-type: disc; }
  .privacy .content > ol {
    list-style-type: decimal;
    font-weight: bold; }
    .privacy .content > ol > li {
      margin-top: 72px; }
      .privacy .content > ol > li h3 {
        font-size: 26px; }
      .privacy .content > ol > li > ul > li {
        margin-top: 8px; }
      .privacy .content > ol > li > ol {
        list-style-type: lower-roman; }
        .privacy .content > ol > li > ol > li {
          margin-top: 18px; }
          .privacy .content > ol > li > ol > li > ol {
            list-style-type: lower-latin; }
            .privacy .content > ol > li > ol > li > ol > li {
              margin-top: 8px;
              font-weight: normal !important; }
  .privacy .content .lower-latin {
    list-style-type: lower-latin; }
  .privacy .content .decimal {
    list-style-type: decimal; }
  .privacy .content .list-box {
    margin-top: 18px;
    margin-left: 1em; }
    .privacy .content .list-box dl {
      margin-top: 1em; }
      .privacy .content .list-box dl dt {
        font-weight: bold; }
      .privacy .content .list-box dl dd p {
        margin-top: 0;
        line-height: 1.5em; }
  .privacy .content .contact-address-list .no-disc {
    list-style-type: none; }
  .privacy .content .contact-address-list li ~ li {
    margin-top: 1em; }
  .privacy .content .contact-address-list li p {
    margin-top: 0;
    margin-left: 1em;
    font-weight: normal; }

.privacy section {
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0; }
  .privacy section:last-child {
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0; }
  .privacy section h3 {
    font-weight: bold;
    font-size: 18px; }

@media screen and (min-width: 1030px) {
  .privacy .content {
    margin-top: 72px;
    max-width: 780px; }
    .privacy .content .privacy-list {
      margin: 0 auto;
      margin-top: 48px;
      max-width: 580px; }
    .privacy .content section h3 {
      font-size: 26px; } }

.privacy .outro {
  margin-top: 48px;
  text-align: right; }

/*********************
BASE (MOBILE) SIZE
This are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many styles in
the other stylesheets. Remember, keep it light: Speed is Important.
*********************/
/******************************************************************
Site Name:
Author:

Stylesheet: Base Mobile Stylesheet

Be light and don't over style since everything here will be
loaded by mobile devices. You want to keep it as minimal as
possible. This is called at the top of the main stylsheet
and will be used across all viewports.

******************************************************************/
/*********************
GENERAL STYLES
*********************/
body {
  font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "palt" 1;
  letter-spacing: .1em;
  font-size: 14px;
  line-height: 1.5;
  color: #212121;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  body .main-wrapper {
    padding-top: 60px; }

iframe {
  max-width: 100%; }

@media screen and (min-width: 1030px) {
  body {
    font-size: 16px; }
    body .main-wrapper {
      padding-top: 130px; }
  .home .main-wrapper, .page-mobius-ai .main-wrapper, .page-new-logo .main-wrapper, .page-lab .main-wrapper, .page-box .main-wrapper {
    padding-top: 60px !important; } }

/********************
WORDPRESS BODY CLASSES
style a page via class
********************/
/* for sites that are read right to left (i.e. hebrew) */
/* home page */
/* blog template page */
/* archive page */
/* date archive page */
/* replace the number to the corresponding page number */
/* search page */
/* search result page */
/* no results search page */
/* individual paged search (i.e. body.search-paged-3) */
/* 404 page */
/* single post page */
/* individual post page by id (i.e. body.postid-73) */
/* individual paged single (i.e. body.single-paged-3) */
/* attatchment page */
/* individual attatchment page (i.e. body.attachmentid-763) */
/* style mime type pages */
/* author page */
/* user nicename (i.e. body.author-samueladams) */
/* paged author archives (i.e. body.author-paged-4) for page 4 */
/* category page */
/* individual category page (i.e. body.category-6) */
/* replace the number to the corresponding page number */
/* tag page */
/* individual tag page (i.e. body.tag-news) */
/* replace the number to the corresponding page number */
/* custom page template page */
/* individual page template (i.e. body.page-template-contact-php */
/* replace the number to the corresponding page number */
/* parent page template */
/* child page template */
/* replace the number to the corresponding page number */
/* if user is logged in */
/* paged items like search results or archives */
/* individual paged (i.e. body.paged-3) */
/*********************
LAYOUT & GRID STYLES
*********************/
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px; }

@media (min-width: 768px) {
  .container {
    width: 738px; } }

@media (min-width: 992px) {
  .container {
    width: 962px; } }

@media (min-width: 1200px) {
  .container {
    width: 1170px; } }

/*********************
LINK STYLES
*********************/
a, a:visited {
  color: #009ce4;
  text-decoration: none;
  transition: .2s;
  /* on hover */
  /* on click */
  /* mobile tap color */ }
  a:hover, a:focus, a:visited:hover, a:visited:focus {
    opacity: .2; }

/*********************
HEADER STYLES
*********************/
.gHeader {
  position: fixed;
  width: 100%;
  z-index: 10000;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.05), 0 3px 1px -2px rgba(0, 0, 0, 0.05); }

.main-header {
  position: relative;
  height: 60px;
  background-color: #fff; }
  .main-header .logo {
    display: flex;
    float: left;
    height: 100%;
    align-items: center;
    margin-left: 25px;
    z-index: 1000; }
    .main-header .logo a {
      line-height: 20px;
      height: 20px; }
      .main-header .logo a img {
        height: 28px;
        margin-top: -3px; }

.sub-header {
  display: none; }

.home .gHeader {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.01), 0 3px 1px -2px rgba(0, 0, 0, 0.01);
  transition: 1s; }
  .home .gHeader .sub-header {
    display: none !important; }

@media screen and (min-width: 1160px) {
  .sub-header {
    position: relative;
    display: block;
    height: 70px;
    width: 100%;
    background-color: #009ce4; } }

/*********************
表示ページ目印用オレンジポチ
*********************/
.main-nav .current-menu-item::after, .main-nav .current-page-ancestor::after, .sub-nav .current-menu-item::after, body[class*="page-recruit"] .sub-nav .current-page-ancestor::after {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ff8086; }

.main-nav .current-menu-item, .main-nav .current-page-ancestor {
  position: relative; }

.sub-nav .current-menu-item {
  position: relative; }
  .sub-nav .current-menu-item::after {
    bottom: -10px;
    content: '';
    width: 7px;
    height: 7px; }

body[class*="page-recruit"] .sub-nav .current-page-ancestor {
  position: relative; }
  body[class*="page-recruit"] .sub-nav .current-page-ancestor::after {
    bottom: -10px;
    content: '';
    width: 7px;
    height: 7px; }

/*********************
NAVIGATION STYLES
*********************/
/*
all navs have a .nav class applied via
the wp_menu function; this is so we can
easily write one group of styles for
the navs on the site so our css is cleaner
and more scalable.
*/
/*********************
メインナビゲーション
*********************/
.main-nav {
  display: none; }

@media screen and (min-width: 1160px) {
  .main-nav {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    display: flex;
    float: right; }
    .main-nav__content {
      display: flex;
      align-items: center;
      font-weight: 500;
      letter-spacing: 0.1em; }
      .main-nav__content li {
        display: inline-block;
        font-size: 14px; }
        .main-nav__content li a {
          position: relative;
          display: block;
          color: #212121;
          text-decoration: none;
          padding: 0.75em; }
    .main-nav .img-wrap {
      width: 172px;
      height: 60px;
      margin-left: 48px;
      border-left: 1px solid #ededed; } }

/*********************
サブナビゲーション
*********************/
@media screen and (min-width: 1030px) and (max-width: 1400px) {
  .sub-nav #menu-recruit li {
    margin: 0 12px;
    font-size: 12px; } }

@media screen and (min-width: 1160px) {
  .sub-nav {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1030px; }
    .sub-nav .name {
      float: left;
      font-weight: 600;
      margin-top: 5px;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
      .sub-nav .name__main {
        font-size: 32px;
        letter-spacing: .05em; }
      .sub-nav .name__sub {
        font-size: 10px;
        letter-spacing: .3em;
        margin-left: 2px;
        margin-top: -8px; }
    .sub-nav__content {
      display: flex;
      float: left;
      margin-left: 60px;
      padding: 26px 24px 16px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
      .sub-nav__content li {
        margin: 0 18px;
        font-size: 14px;
        letter-spacing: .1em;
        font-weight: bold; }
        .sub-nav__content li a {
          color: #fff; }
    .sub-nav .entry-btn {
      position: absolute;
      top: 50%;
      right: 50px;
      transform: translateY(-50%); }
      .sub-nav .entry-btn a {
        font-size: 14px; }
        .sub-nav .entry-btn a:hover {
          font-size: 14.5px;
          color: #ff8086;
          background-color: #fff; }
  .sub-nav #menu-privacy-policy li {
    margin: 0 12px;
    font-size: 12px; } }

@media screen and (min-width: 1030px) and (max-width: 1100px) {
  .sub-nav .name {
    margin-left: 18px; }
  .sub-nav__content {
    margin-left: 22px; }
  .sub-nav .entry-btn {
    right: 32px; } }

/*********************
ドロワーナビゲーション
参考URL: https://saruwakakun.com/html-css/reference/nav-drawer
*********************/
.drawer-nav {
  position: relative;
  height: 100%;
  float: right;
  align-items: center;
  /*チェックボックス等は非表示に*/ }
  .drawer-nav .hamburger,
  .drawer-nav .hamburger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box; }
  .drawer-nav .hamburger {
    margin-top: 8px;
    margin-right: 8px;
    width: 50px;
    height: 44px;
    transform: scale(0.5); }
  .drawer-nav .hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #009ce4;
    border-radius: 4px; }
  .drawer-nav .hamburger span:nth-of-type(1) {
    top: 0; }
  .drawer-nav .hamburger span:nth-of-type(2) {
    top: 20px; }
  .drawer-nav .hamburger span:nth-of-type(3) {
    bottom: 0; }
  .drawer-nav .hamburger.active span:nth-of-type(1),
  .drawer-nav .hamburger.active span:nth-of-type(3) {
    width: 20px; }
  .drawer-nav .hamburger.active span:nth-of-type(1) {
    -webkit-transform: translate(-1px, 13px) rotate(-45deg);
    transform: translate(-1px, 13px) rotate(-45deg); }
  .drawer-nav .hamburger.active span:nth-of-type(3) {
    -webkit-transform: translate(-1px, -13px) rotate(45deg);
    transform: translate(-1px, -13px) rotate(45deg); }
  .drawer-nav__unshown {
    display: none; }
  .drawer-nav__content {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1em;
    /* end .menu li */ }
    .drawer-nav__content > li:nth-of-type(even) > a {
      color: #fff;
      background-color: #009ce4;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
    .drawer-nav__content > li:nth-of-type(even).menu-item-has-children > a::before, .drawer-nav__content > li:nth-of-type(even).menu-item-has-children > a::after {
      background-color: #ffffff !important; }
    .drawer-nav__content li a {
      position: relative;
      display: block;
      color: #212121;
      text-decoration: none;
      padding: 1em 2em; }
    .drawer-nav__content li.menu-item-has-children > a {
      position: relative;
      display: block;
      text-decoration: none;
      padding: 0.75em 2em; }
      .drawer-nav__content li.menu-item-has-children > a::before, .drawer-nav__content li.menu-item-has-children > a::after {
        position: absolute;
        display: block;
        content: '';
        top: 40%;
        width: 2px;
        transition: .25s all ease;
        border-radius: 10px;
        background-color: #212121; }
      .drawer-nav__content li.menu-item-has-children > a::before {
        right: 57px;
        height: 12px;
        transform: rotate(-45deg); }
      .drawer-nav__content li.menu-item-has-children > a::after {
        right: 50px;
        height: 12px;
        transform: rotate(45deg); }
      .drawer-nav__content li.menu-item-has-children > a.active::before, .drawer-nav__content li.menu-item-has-children > a.active::after {
        top: 35%;
        right: 53px;
        height: 16px; }
    .drawer-nav__content li.menu-item-has-children > a:focus {
      opacity: 1 !important; }
    .drawer-nav__content li ul.sub-menu,
    .drawer-nav__content li ul.children {
      display: none;
      box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14), inset 0 1px 5px 0 rgba(0, 0, 0, 0.12), inset 0 3px 1px -2px rgba(0, 0, 0, 0.2); }
      .drawer-nav__content li ul.sub-menu li,
      .drawer-nav__content li ul.children li {
        border-bottom: 1px solid rgba(221, 221, 221, 0.8); }
        .drawer-nav__content li ul.sub-menu li a,
        .drawer-nav__content li ul.children li a {
          font-size: 12px;
          padding-left: 30px; }
          .drawer-nav__content li ul.sub-menu li a::before,
          .drawer-nav__content li ul.children li a::before {
            content: "- "; }

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;
  /*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;
  /*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out; }

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  /*最前面に*/
  width: 90%;
  /*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;
  /*最大幅（調整してください）*/
  height: 100%;
  background: #fff;
  /*背景色*/
  transition: .3s ease-in-out;
  /*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
  /*左に隠しておく*/ }
  #nav-content .img-wrap {
    height: 58px;
    width: 100%;
    margin-top: 12px; }
    #nav-content .img-wrap img {
      left: 92px; }

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;
  /*カバーを表示*/
  opacity: .5; }

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  /*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15); }

@media screen and (min-width: 1160px) {
  .drawer-nav {
    display: none; } }

/* end .nav */
/*********************
POSTS & CONTENT STYLES
*********************/
/* want to style individual post classes? Booya! */
/* post by id (i.e. post-3) */
/* general post style */
/* general article on a page style */
/* general style on an attatchment */
/* sticky post style */
/* hentry class */
/* style by category (i.e. category-videos) */
/* style by tag (i.e. tag-news) */
/* post meta */
.byline {
  color: #9fa6b4;
  font-style: italic;
  margin: 0; }

/* entry content */
.wp-caption {
  max-width: 100%;
  background: #eee;
  padding: 5px;
  /* images inside wp-caption */ }
  .wp-caption img {
    max-width: 100%;
    margin-bottom: 0;
    width: 100%; }
  .wp-caption p.wp-caption-text {
    font-size: 0.85em;
    margin: 4px 0 7px;
    text-align: center; }

/* end .wp-caption */
/* image gallery styles */
/* end .gallery */
/* gallery caption styles */
.tags {
  margin: 0; }

/******************************************************************
PAGE NAVI STYLES
******************************************************************/
.pagination,
.wp-prev-next {
  margin: 1.5em 0; }

.pagination {
  text-align: center; }
  .pagination ul {
    display: inline-block;
    background-color: #fff;
    white-space: nowrap;
    padding: 0;
    clear: both;
    border-radius: 3px; }
  .pagination li {
    padding: 0;
    margin: 0;
    float: left;
    display: inline;
    overflow: hidden;
    border-right: 1px solid #95989a; }
  .pagination a, .pagination span {
    margin: 0;
    text-decoration: none;
    padding: 0;
    line-height: 1em;
    font-size: 1em;
    font-weight: normal;
    padding: 0.75em;
    min-width: 1em;
    display: block;
    color: #2980b9; }
    .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus {
      background-color: #2980b9;
      color: #fff; }
  .pagination .current {
    cursor: default;
    color: #5c6b80; }
    .pagination .current:hover, .pagination .current:focus {
      background-color: #fff;
      color: #5c6b80; }

/* end .bones_page_navi */
/* fallback previous & next links */
.wp-prev-next .prev-link {
  float: left; }

.wp-prev-next .next-link {
  float: right; }

/* end .wp-prev-next */
/*********************
SIDEBARS & ASIDES
*********************/
.widget ul li {
  /* deep nesting */ }

.no-widgets {
  background-color: #fff;
  padding: 1.5em;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-bottom: 1.5em; }

/*********************
FOOTER STYLES
*********************/
.main-footer {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  text-align: center; }
  .main-footer .logo {
    padding: 42px 0; }
    .main-footer .logo a {
      display: inline;
      line-height: 20px;
      height: 20px; }
      .main-footer .logo a img {
        height: 24px; }
  .main-footer .access-list li ~ li {
    margin-top: 18px; }
  .main-footer .access-list li .name {
    color: #95989a;
    font-family: "Roboto Condensed", "游ゴシック体", "Yu Gothic", YuGothic, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    font-size: 26px; }
    .main-footer .access-list li .name a {
      color: #95989a; }
  .main-footer .access-list li .divider {
    height: 1px;
    width: 100%;
    background-color: #95989a; }
  .main-footer .access-list li .data {
    margin-top: 18px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em; }
    .main-footer .access-list li .data .phone {
      margin-left: 1em; }
    .main-footer .access-list li .data .address {
      margin-top: 4px; }
  .main-footer .sidebar {
    position: relative;
    margin-top: 72px; }
    .main-footer .sidebar .help-list {
      font-size: 14px; }
      .main-footer .sidebar .help-list li ~ li {
        margin-top: 8px; }
      .main-footer .sidebar .help-list li a {
        color: #95989a; }
    .main-footer .sidebar .copyright {
      display: block;
      margin: 18px auto;
      font-size: 12px;
      letter-spacing: .1em; }
  @media (min-width: 768px) and (max-width: 1029px) {
    .main-footer .main-footer-wrap .sidebar .help-list {
      margin: 0 auto;
      width: 520px;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      justify-content: space-around; }
      .main-footer .main-footer-wrap .sidebar .help-list li ~ li {
        margin-top: 0; } }
  @media screen and (min-width: 1030px) {
    .main-footer .main-footer-wrap {
      text-align: left;
      padding: 32px; }
      .main-footer .main-footer-wrap .access-list li ~ li {
        margin-top: 0; }
      .main-footer .main-footer-wrap .access-list li .name {
        margin-left: 12px;
        font-size: 32px; }
      .main-footer .main-footer-wrap .access-list li .data {
        margin-left: 12px;
        margin-right: 12px; }
      .main-footer .main-footer-wrap .sidebar {
        margin-top: 0;
        text-align: right; } }

/*
if you checked out the link above:
http://www.alistapart.com/articles/organizing-mobile/
you'll want to style the footer nav
a bit more in-depth. Remember to keep
it simple because you'll have to
override these styles for the desktop
view.
*/
/* end .footer-links */
.error404 .sub-header {
  display: none; }

.error404 .error-page {
  min-height: calc(100vh-$main-header-height); }
  .error404 .error-page .text-box {
    margin: 140px auto;
    text-align: center; }
    .error404 .error-page .text-box h1 {
      font-size: 48px; }

/*********************
front-page
トップページ
*********************/
.home {
  /*********************
  トップ画面
  *********************/
  /*********************
  共通section
  *********************/
  /*********************
  title-line-sec section
  *********************/
  /*********************
  mission section
  *********************/
  /*********************
  vision section
  *********************/
  /*********************
  value section
  *********************/
  /*********************
  license-list
  *********************/ }
  .home .hero {
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
    height: 90vh;
    overflow: hidden; }
    .home .hero .mission {
      position: absolute;
      top: 48%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 72px;
      font-weight: bold;
      z-index: 1000;
      color: #fff;
      text-align: center;
      width: 100%;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
      .home .hero .mission span {
        display: inline-block; }
    .home .hero .video_wrapper::after {
      border-radius: 40%;
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #ee88aa, rgba(250, 238, 255, 0.3) 90%, rgba(230, 238, 255, 0.5));
      animation: color-fade 3s infinite linear; }
    .home .hero .video_wrapper video {
      position: absolute;
      left: 50%;
      -webkit-transform: translate(-50%, 0%);
      transform: translate(-50%, 0%);
      min-width: 100%;
      max-height: 100%; }
    .home .hero .scroll {
      position: relative;
      top: 75%; }
      .home .hero .scroll p {
        padding-top: 22px;
        text-align: center;
        font-weight: bold;
        color: #fff; }
      .home .hero .scroll span {
        position: absolute;
        top: 0;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-left: -12px;
        border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-animation: sdb 1.5s infinite;
        animation: sdb 1.5s infinite;
        box-sizing: border-box; }

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0; } }

@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0; } }
  @media screen and (min-width: 768px) {
    .home .hero .mission {
      font-size: 120px; } }
  @media screen and (min-width: 1030px) {
    .home .hero {
      position: relative; }
      .home .hero .video_wrapper video {
        max-height: unset;
        min-height: 100%; }
      .home .hero .mission {
        font-size: 138px; }
      .home .hero .scroll {
        top: 80%; } }
  .home .main .topic-wrapper {
    background-image: linear-gradient(240deg, #b7f4ff 0%, #80bbf3 100%);
    padding: 8px; }
    .home .main .topic-wrapper .topic {
      max-width: 1080px;
      margin: 16px auto;
      text-align: center; }
      .home .main .topic-wrapper .topic .box-wrapper {
        display: flex;
        flex-flow: column; }
    .home .main .topic-wrapper h2 {
      font-weight: bold;
      color: #0956ba;
      font-size: 24px;
      opacity: 0.8; }
    .home .main .topic-wrapper .box {
      position: relative;
      margin: 12px auto;
      width: 325px;
      height: 200px;
      background-color: #efefef;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
      border-radius: 10px; }
      .home .main .topic-wrapper .box a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-indent: 100%;
        /*テキスト非表示*/
        white-space: nowrap;
        /*テキスト非表示*/
        overflow: hidden;
        /*テキスト非表示*/ }
      .home .main .topic-wrapper .box a:hover {
        opacity: 0.6;
        filter: alpha(opacity=60);
        -ms-filter: "alpha( opacity=60 )";
        background: #fff; }
    .home .main .topic-wrapper .box1 {
      background-image: url("/wp-content/themes/mob-hp/library/images/banner-1.png"); }
    .home .main .topic-wrapper .box2 {
      background-image: url("/wp-content/themes/mob-hp/library/images/banner-2.png"); }
    .home .main .topic-wrapper .box3 {
      background-image: url("/wp-content/themes/mob-hp/library/images/banner-3.png"); }
  .home .main .vr-model {
    background-image: linear-gradient(to right, #f3b1d6 0%, #2366e2 50%, #f3b1d6 100%); }
    .home .main .vr-model .topic {
      max-width: 1560px; }
      .home .main .vr-model .topic h2 {
        color: #ffffff;
        opacity: 1; }
      .home .main .vr-model .topic h4 {
        color: #ffffff;
        opacity: 1;
        margin-bottom: 12px; }
      .home .main .vr-model .topic .box-wrapper {
        margin: 0 auto;
        margin-bottom: 32px;
        justify-content: center !important;
        flex-flow: row; }
        .home .main .vr-model .topic .box-wrapper .box {
          background-image: none; }
  .home .main .cm-wrapper {
    background-image: linear-gradient(to right, #ffddd7 0%, #ffafbd 100%); }
    .home .main .cm-wrapper .topic {
      max-width: 1560px; }
      .home .main .cm-wrapper .topic h2 {
        color: #e92c37; }
      .home .main .cm-wrapper .topic .box-wrapper {
        margin: 0 auto; }
        .home .main .cm-wrapper .topic .box-wrapper .box {
          background-image: none; }
  @media screen and (min-width: 768px) {
    .home .main .cm-wrapper .topic .box-wrapper {
      flex-flow: wrap; } }
  @media screen and (min-width: 1000px) and (max-width: 1340px) {
    .home .main .cm-wrapper .topic .box-wrapper .box {
      width: 240px;
      height: 160px; } }
  @media screen and (min-width: 1030px) {
    .home .main .topic-wrapper .topic .box-wrapper {
      flex-flow: row;
      justify-content: space-between; }
    .home .main .cm-wrapper .topic .box-wrapper {
      flex-flow: wrap; } }
  .home .main .sec {
    position: relative;
    overflow: hidden;
    z-index: 0; }
    .home .main .sec .img-wrap {
      position: absolute;
      float: left;
      height: 100%;
      z-index: -1; }
      .home .main .sec .img-wrap img {
        position: absolute;
        right: 0; }
    .home .main .sec .carousel li {
      height: 720px; }
    .home .main .sec .content-wrap {
      padding: 98px 10%;
      margin-left: 32px; }
      .home .main .sec .content-wrap .title__main {
        margin-left: -48px;
        font-weight: 700;
        font-style: italic;
        font-size: 72px; }
      .home .main .sec .content-wrap .title__sub {
        margin-top: -12px;
        font-size: 12px;
        letter-spacing: .3em; }
      .home .main .sec .content-wrap .title__line {
        position: relative;
        margin-top: 12px;
        height: 3px;
        width: 55px;
        border-radius: 3px;
        background-color: #95989a; }
        .home .main .sec .content-wrap .title__line::after {
          position: absolute;
          top: -1px;
          right: -12px;
          content: '';
          height: 6px;
          width: 6px;
          border-radius: 3px;
          background-color: #ff8086; }
      .home .main .sec .content-wrap .leading {
        margin-top: 26px;
        font-size: 24px;
        font-weight: bold;
        letter-spacing: .1em; }
      .home .main .sec .content-wrap .description {
        margin-top: 26px;
        margin-bottom: 32px;
        font-size: 14px;
        letter-spacing: .2em;
        line-height: 1.8em;
        font-weight: bold; }
      .home .main .sec .content-wrap ul {
        margin-top: 26px;
        margin-bottom: 32px;
        font-weight: bold; }
        .home .main .sec .content-wrap ul li {
          margin-top: 18px; }
          .home .main .sec .content-wrap ul li h3 {
            font-size: 24px;
            margin-left: -44px; }
            .home .main .sec .content-wrap ul li h3 span {
              color: #b0bec5;
              font-size: 20px; }
          .home .main .sec .content-wrap ul li p {
            color: #959595;
            font-size: 12px; }
  @media screen and (max-width: 1029px) {
    .home .sec img {
      min-height: 100%;
      min-width: 100%;
      opacity: .1; } }
  @media screen and (min-width: 1030px) and (max-width: 1350px) {
    .home .main .sec {
      height: 1184px !important; } }
  @media screen and (min-width: 1030px) {
    .home .main .sec {
      height: 832px; }
      .home .main .sec .img-wrap {
        position: relative;
        overflow: hidden; }
        .home .main .sec .img-wrap img {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
      .home .main .sec .section-content {
        position: relative; }
        .home .main .sec .section-content .content-wrap {
          float: left;
          margin-left: 120px;
          margin-top: 140px;
          padding: 0; }
          .home .main .sec .section-content .content-wrap .title__sub {
            margin-top: -12px;
            font-size: 12px;
            letter-spacing: .3em; }
          .home .main .sec .section-content .content-wrap .title__line {
            position: relative;
            margin-top: 12px;
            height: 3px;
            width: 55px;
            border-radius: 3px; }
            .home .main .sec .section-content .content-wrap .title__line::after {
              position: absolute;
              top: -1px;
              right: -12px;
              content: '';
              height: 6px;
              width: 6px;
              border-radius: 3px;
              background-color: #ff8086; }
          .home .main .sec .section-content .content-wrap .leading {
            margin-top: 48px;
            font-size: 32px;
            letter-spacing: .1em; }
          .home .main .sec .section-content .content-wrap .description {
            margin-top: 48px;
            margin-bottom: 32px;
            margin-right: 2em;
            max-width: 580px;
            font-size: 16px;
            letter-spacing: .2em;
            line-height: 1.8em; }
          .home .main .sec .section-content .content-wrap ul li h3 {
            font-size: 24px;
            margin-left: 0; }
          .home .main .sec .section-content .content-wrap ul li p {
            margin: 0 24px;
            font-size: 14px; } }
  .home .title-line-sec {
    position: relative;
    background-color: #009ce4;
    color: #fff; }
    .home .title-line-sec .title__line {
      background-color: #fff !important; }
    .home .title-line-sec .section-content .content-wrap {
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
  @media screen and (min-width: 1030px) {
    .home .title-line-sec {
      position: relative;
      background-color: #fff;
      flex-direction: row-reverse; }
      .home .title-line-sec .img-wrap {
        position: relative;
        width: 50%;
        float: right !important;
        overflow: hidden;
        z-index: 0; }
        .home .title-line-sec .img-wrap img {
          min-width: 100%;
          min-height: 100%;
          right: 0; }
      .home .title-line-sec .section-content {
        position: relative; }
        .home .title-line-sec .section-content .content-wrap {
          float: right !important;
          margin-right: 120px;
          color: #212121;
          text-shadow: none !important; }
          .home .title-line-sec .section-content .content-wrap .title {
            position: relative; }
            .home .title-line-sec .section-content .content-wrap .title__line {
              background-color: #95989a !important; }
          .home .title-line-sec .section-content .content-wrap .variable-btn {
            color: #fff;
            background-color: #009ce4; }
            .home .title-line-sec .section-content .content-wrap .variable-btn:hover, .home .title-line-sec .section-content .content-wrap .variable-btn:focus {
              background-color: #008ed0; }
            .home .title-line-sec .section-content .content-wrap .variable-btn:active {
              background-color: #008bcb; } }
  .home .home-mission .section-content .content-wrap .leading span {
    display: inline-block; }
  .home .home-mission .section-content .content-wrap .description ul {
    font-size: 14px; }
    .home .home-mission .section-content .content-wrap .description ul li {
      margin-top: 12px;
      line-height: 20px; }
      .home .home-mission .section-content .content-wrap .description ul li span {
        color: #959595;
        font-size: 12px; }
  @media screen and (min-width: 1030px) {
    .home .home-mission .section-content .content-wrap .leading span {
      display: block; }
    .home .home-mission .section-content .content-wrap .description ul {
      margin-left: 12px; }
      .home .home-mission .section-content .content-wrap .description ul li {
        margin-top: 8px !important; }
        .home .home-mission .section-content .content-wrap .description ul li span {
          font-size: 14px; } }
  .home .home-vision .section-content .content-wrap .title__line {
    background-color: #95989a; }
  .home .home-vision .section-content .content-wrap .description h3 {
    margin-top: 24px; }
  .home .home-vision .section-content .content-wrap .description p {
    font-size: 12px;
    margin-top: 18px;
    opacity: 0.9; }
  @media screen and (min-width: 1030px) {
    .home .home-vision .section-content .content-wrap .img-wrap {
      width: 50%; }
      .home .home-vision .section-content .content-wrap .img-wrap img {
        max-height: 100%; }
    .home .home-vision .section-content .content-wrap .description h3 {
      margin-top: 24px; }
    .home .home-vision .section-content .content-wrap .description p {
      color: #959595;
      font-size: 14px;
      margin-left: 12px;
      margin-top: 8px;
      opacity: 1; } }
  .home .home-value .banner {
    margin: 84px auto;
    display: flex;
    justify-content: center; }
    .home .home-value .banner .img-wrap {
      margin-left: -16px;
      height: 50px;
      z-index: 100;
      overflow: visible; }
    .home .home-value .banner #youtube {
      display: block;
      width: 285px;
      height: 70px;
      background-color: #fff; }
      .home .home-value .banner #youtube img {
        opacity: 1;
        border: 1px solid #aaa; }
  @media screen and (min-width: 1030px) {
    .home .home-value {
      height: 924px !important; }
      .home .home-value .banner {
        justify-content: start; }
        .home .home-value .banner .img-wrap {
          margin-left: 0px; } }
  .home .license-list {
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14), inset 0 1px 5px 0 rgba(0, 0, 0, 0.12), inset 0 3px 1px -2px rgba(0, 0, 0, 0.2); }
    .home .license-list .row li {
      text-align: center; }
      .home .license-list .row li .img-wrap {
        margin: 32px;
        width: 80px;
        height: 80px; }
  @media screen and (min-width: 1030px) {
    .home .license-list {
      margin-top: 120px; } }

/*********************
BUSINESS
*********************/
/*********************
business-top
事業紹介
*********************/
.page-business .page-title {
  margin: 84px auto 0px; }

.business-top .wrapper {
  margin: 0 auto;
  padding: 10px; }
  .business-top .wrapper .list-wrapper {
    margin: 42px auto;
    max-width: 970px; }
    .business-top .wrapper .list-wrapper .item-list {
      justify-content: center; }
      .business-top .wrapper .list-wrapper .item-list .item {
        padding: 32px;
        width: 100%;
        box-sizing: border-box; }
        .business-top .wrapper .list-wrapper .item-list .item .img-box {
          margin: 0 auto;
          width: 271px;
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
          transition: .3s ease-out; }
          .business-top .wrapper .list-wrapper .item-list .item .img-box:hover {
            transform: scale(1.05); }
          .business-top .wrapper .list-wrapper .item-list .item .img-box .img-wrapper {
            position: relative;
            margin: 0 auto;
            display: block;
            height: 200px; }
        .business-top .wrapper .list-wrapper .item-list .item .item-name {
          margin-top: 18px;
          text-align: center;
          color: #95989a;
          font-weight: bold;
          letter-spacing: .1em;
          text-indent: .1em; }

@media screen and (min-width: 1030px) {
  .business-top .wrapper {
    width: 70%; }
    .business-top .wrapper .heading {
      margin: 48px 10%;
      font-size: 18px;
      letter-spacing: .3em;
      text-indent: .3em; } }

@media screen and (min-width: 1280px) {
  .business-top .item {
    width: 33.33% !important; }
    .business-top .item .img-box {
      max-width: 360px; }
    .business-top .item .img-wrapper {
      max-width: 320px !important; } }

/*********************
基幹
*********************/
.business {
  position: relative;
  background-color: #fff; }
  .business .hero {
    position: relative;
    height: 320px;
    z-index: 0; }
    .business .hero .img-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -1; }
      .business .hero .img-wrap img {
        min-width: 100%;
        min-height: 100%;
        right: 0; }
    .business .hero .title-wrapper {
      margin: 0 auto;
      width: 80%;
      text-align: center;
      color: #fff;
      font-weight: bold;
      padding-top: 100px;
      text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); }
      .business .hero .title-wrapper h2 {
        display: inline;
        padding: 0 24px;
        font-size: 64px;
        background: linear-gradient(transparent 70%, #172f79 0%); }
      .business .hero .title-wrapper p {
        letter-spacing: .35em; }
  .business .content-wrapper {
    background: linear-gradient(-90deg, #3165dd, #4d6bb0);
    color: #fff;
    font-weight: bold;
    box-sizing: border-box;
    padding: 48px 12px; }
    .business .content-wrapper .content {
      margin: 0 auto;
      width: 80%;
      max-width: 720px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      text-align: center; }
      .business .content-wrapper .content h3 {
        display: inline;
        font-size: 28px;
        padding-right: 12px;
        background: linear-gradient(transparent 70%, #172f79 0%); }
      .business .content-wrapper .content .text {
        margin-top: 32px;
        text-align: left; }
        .business .content-wrapper .content .text p:nth-child(n + 1) {
          margin-top: 32px; }
      .business .content-wrapper .content .img-wrapper {
        display: block;
        position: relative;
        margin: 32px auto; }
        .business .content-wrapper .content .img-wrapper img {
          max-width: 100%; }
  @media screen and (min-width: 1030px) {
    .business .hero {
      height: calc(100vh - (60px + 120px));
      float: left; }
      .business .hero .title-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        padding-top: 0px;
        transform: translate(-50%, -50%); }
        .business .hero .title-wrapper h2 {
          font-size: 84px; }
    .business .content-wrapper {
      float: right;
      height: calc(100vh - (60px + 120px));
      overflow-y: scroll;
      -ms-overflow-style: none;
      /* IE, Edge 対応 */
      scrollbar-width: none;
      /* Firefox 対応 */ }
      .business .content-wrapper .content {
        text-align: left; }
        .business .content-wrapper .content h3 {
          font-size: 42px; }
    .business .content-wrapper::-webkit-scrollbar {
      /* Chrome, Safari 対応 */
      display: none; } }

/********************
　製造
********************/
.business-manufacturing .hero .title-wrapper h2 {
  background: linear-gradient(transparent 70%, #b4afac 0%); }

.business-manufacturing .content-wrapper {
  background: linear-gradient(-90deg, #d4d2d1, #989593); }
  .business-manufacturing .content-wrapper .content h3 {
    background: linear-gradient(transparent 70%, #3d3938 0%); }

/********************
　金融
********************/
.business-finance .hero .title-wrapper h2 {
  font-size: 48px;
  background: linear-gradient(transparent 70%, #d1af4f 0%);
  padding: 0; }
  .business-finance .hero .title-wrapper h2 span {
    padding: 0; }

.business-finance .content-wrapper {
  background: linear-gradient(-90deg, #fac83e, #d1af4f); }
  .business-finance .content-wrapper .content h3 {
    background: linear-gradient(transparent 70%, #322300 0%); }

@media screen and (min-width: 1030px) {
  .business-finance .hero .title-wrapper h2 {
    padding: 0 24px;
    font-size: 64px; } }

/********************
　コンサル・DX
********************/
.business-dx .hero .title-wrapper h2 {
  background: linear-gradient(transparent 70%, #d98e67 0%);
  font-size: 48px;
  padding: 0; }

.business-dx .content-wrapper {
  background: linear-gradient(-90deg, #fa8444, #d98e67); }
  .business-dx .content-wrapper .content h3 {
    background: linear-gradient(transparent 70%, #371500 0%); }

@media screen and (min-width: 1030px) {
  .business-dx .hero .title-wrapper h2 {
    padding: 0 24px;
    font-size: 64px; } }

/********************
　先端技術・AI
********************/
.business-ai .hero .title-wrapper h2 {
  background: linear-gradient(transparent 70%, #50b3af 0%);
  font-size: 48px;
  padding: 0; }

.business-ai .content-wrapper {
  background: linear-gradient(-90deg, #4eddd8, #50b3af); }
  .business-ai .content-wrapper .content h3 {
    background: linear-gradient(transparent 70%, #002826 0%); }
  .business-ai .content-wrapper .content .btn-wrap {
    text-align: center;
    margin: 48px 0; }
  .business-ai .content-wrapper .content .img-wrapper img {
    max-width: 110%; }

@media screen and (min-width: 1030px) {
  .business-ai .hero .title-wrapper h2 {
    padding: 0 24px;
    font-size: 64px; }
  .business-ai .content-wrapper .content .btn-wrap {
    text-align: left;
    margin: 48px 0; }
    .business-ai .content-wrapper .content .btn-wrap .btn--base-color {
      font-size: 12px; } }

/********************
　バイオインフォマティクス
********************/
.business-bioinfomatics .hero .title-wrapper h2 {
  font-size: 36px;
  background: none;
  padding: 0; }
  .business-bioinfomatics .hero .title-wrapper h2 span {
    display: inline;
    padding: 0px;
    background: linear-gradient(transparent 70%, #4fb45e 0%); }

.business-bioinfomatics .content-wrapper {
  background: linear-gradient(-90deg, #35da4e, #4fb45e); }
  .business-bioinfomatics .content-wrapper .content h3 {
    background: linear-gradient(transparent 70%, #033f15 0%); }

@media screen and (min-width: 1030px) {
  .business-bioinfomatics .hero .title-wrapper h2 {
    font-size: 64px; }
    .business-bioinfomatics .hero .title-wrapper h2 div span {
      padding: 0 24px; } }

/*********************
NEWS
*********************/
/*********************
news
最新情報
*********************/
.news {
  padding-top: 15px; }
  .news .content {
    position: relative;
    margin: 32px auto;
    width: 90%;
    border-left: 1px solid #95989a; }
    .news .content::before, .news .content::after {
      position: absolute;
      content: '';
      left: -6px;
      width: 10px;
      height: 10px;
      border-radius: 50%; }
    .news .content::before {
      top: -5px;
      background-color: #fff;
      border: 1px solid #009ce4; }
    .news .content::after {
      bottom: -5px;
      background-color: #009ce4; }
    .news .content li {
      margin-left: 10%;
      padding: 16px 0;
      font-weight: bold;
      letter-spacing: .1em;
      border-bottom: 1px solid #ddd; }
      .news .content li .info .date, .news .content li .info .category {
        display: inline-block;
        font-size: 12px; }
      .news .content li .info .date {
        margin-right: 1em;
        font-weight: normal; }
      .news .content li .info .category.business {
        color: #0d47a1; }
      .news .content li .info .category.product {
        color: #009688; }
      .news .content li .info .category.company {
        color: #607d8b; }
      .news .content li .info .category.recruit {
        color: #2196f3; }
      .news .content li .info .category.gallery {
        color: #ff8086; }
      .news .content li .info .category.other {
        color: #f44336; }
      .news .content li .title {
        font-size: 14px; }
        .news .content li .title a {
          color: #212121; }
  @media screen and (min-width: 1030px) {
    .news .content {
      width: 70%; } }

/*********************
COMPANY
*********************/
/*********************
company-president
社長あいさつ
*********************/
.president {
  /*********************
共通section
*********************/
  /*********************
TOP MESSAGE
*********************/ }
  .president .sec {
    width: 100%; }
    .president .sec .img-wrap {
      position: relative;
      height: 400px; }
      .president .sec .img-wrap .img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
    .president .sec .content-wrap {
      position: relative;
      padding: 48px 15%; }
      .president .sec .content-wrap .title {
        font-size: 18px;
        font-family: "Georgia", Cambria, Times New Roman, Times, serif;
        letter-spacing: .2em; }
        .president .sec .content-wrap .title span {
          display: block; }
        .president .sec .content-wrap .title .small {
          font-size: 14px; }
      .president .sec .content-wrap .description {
        color: #263238;
        margin: 32px 0;
        letter-spacing: .05em;
        line-height: 2em; }
        .president .sec .content-wrap .description p {
          margin-top: 1.2em; }
        .president .sec .content-wrap .description .author {
          margin-top: 32px;
          text-align: right;
          letter-spacing: .1em; }
          .president .sec .content-wrap .description .author .name {
            margin-left: 1em;
            font-weight: bold; }
          .president .sec .content-wrap .description .author img {
            height: 25px;
            width: 105px; }
  @media screen and (min-width: 1030px) {
    .president .sec {
      display: flex;
      flex-direction: row-reverse; }
      .president .sec:nth-child(even) .content-wrap {
        box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14), inset 0 1px 5px 0 rgba(0, 0, 0, 0.12), inset 0 3px 1px -2px rgba(0, 0, 0, 0.2); }
      .president .sec .img-wrap {
        height: 660px;
        width: 50%;
        box-sizing: border-box; }
      .president .sec .content-wrap {
        min-height: 600px;
        padding: 0;
        width: 50%; }
        .president .sec .content-wrap .content {
          position: absolute;
          top: 50%;
          right: 18%;
          transform: translateY(-50%);
          width: 70%;
          max-width: 720px; }
          .president .sec .content-wrap .content .title {
            font-size: 26px; }
          .president .sec .content-wrap .content .description {
            margin-bottom: 0;
            font-size: 14px;
            letter-spacing: .1em;
            line-height: 2em; } }
  .president .top-message .img-wrap {
    margin-top: 32px; }
    .president .top-message .img-wrap .img {
      height: inherit;
      width: 100%;
      background-image: url("/wp-content/themes/mob-hp/library/images/top-message.png");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat; }
  @media screen and (min-width: 1030px) {
    .president .top-message {
      max-width: 1480px;
      margin: 0 auto; }
      .president .top-message .img-wrap .img {
        background-image: url("/wp-content/themes/mob-hp/library/images/top-message.png");
        background-size: contain;
        max-width: 480px;
        left: 48px;
        transform: translate(0%, -50%); } }

/*********************
company-mobius
企業情報
*********************/
.company-mobius .info-list {
  width: 100%; }
  .company-mobius .info-list .item {
    display: flex;
    padding: 18px;
    padding-right: 0;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: .05em;
    border-bottom: 1px solid #95989a; }
    .company-mobius .info-list .item dt {
      width: 30%; }
    .company-mobius .info-list .item dd {
      width: 70%; }
      .company-mobius .info-list .item dd span {
        display: block; }
      .company-mobius .info-list .item dd .position-list .item {
        margin-top: 0;
        margin-left: 0;
        padding-top: 0;
        padding-left: 0;
        border-bottom: none; }
        .company-mobius .info-list .item dd .position-list .item:last-child {
          padding-bottom: 0px; }
        .company-mobius .info-list .item dd .position-list .item dt {
          min-width: 200px; } /*120px→200px（2025/5/29）*/
        .company-mobius .info-list .item dd .position-list .item dd.no-header {
          width: 100%; } 

@media screen and (min-width: 768px) {
  .company-mobius .info-list {
    width: 40%; } }

/*********************
company-organization
組織図
*********************/
.company-organization picture source, .company-organization img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 650px; }

/*********************
company-history
沿革
*********************/
.company-history .content {
  position: relative;
  margin: 0 auto;
  width: 90%;
  font-size: 14px;
  border-left: 1px solid #95989a; }
  .company-history .content::before, .company-history .content::after {
    position: absolute;
    content: '';
    left: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%; }
  .company-history .content::before {
    top: -5px;
    background-color: #fff;
    border: 1px solid #009ce4; }
  .company-history .content::after {
    bottom: -5px;
    background-color: #009ce4; }
  .company-history .content dl {
    margin-left: 10%;
    padding: 16px 0;
    font-weight: bold;
    letter-spacing: .1em;
    border-bottom: 1px solid #ddd; }
    .company-history .content dl dt {
      font-weight: normal; }

@media screen and (min-width: 1030px) {
  .company-history .content {
    width: 60%; } }

/*********************
company-achievement
業績
*********************/
.company-achievement .chart {
  margin: 0 auto;
  width: 80%;
  max-width: 400px; }

.company-achievement .statement {
  margin: 32px auto;
  width: 220px;
  letter-spacing: .2em;
  color: #009ce4; }
  .company-achievement .statement span {
    display: block; }
    .company-achievement .statement span a {
      color: #ff8086; }

@media screen and (min-width: 1030px) {
  .company-achievement .statement {
    width: 250px; } }

/*********************
company-license
資格
*********************/
.company-license .entire__sub-title, .company-license .person__sub-title {
  margin: 18px auto;
  text-align: center; }
  .company-license .entire__sub-title .text, .company-license .person__sub-title .text {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .2em;
    text-indent: .2em; }
  .company-license .entire__sub-title .line, .company-license .person__sub-title .line {
    margin: 12px auto 0;
    height: 3px;
    width: 15px;
    background-color: #009ce4; }

.company-license .entire {
  margin: 0 auto;
  width: 80%; }
  .company-license .entire .item-list .item {
    margin: 32px auto;
    text-align: center; }
    .company-license .entire .item-list .item .title {
      margin: 0 auto;
      width: 80%;
      padding: 8px;
      font-size: 14px;
      font-weight: bold;
      border-bottom: 1px solid #95989a; }
    .company-license .entire .item-list .item .img-wrap {
      width: 200px;
      height: 200px; }
      .company-license .entire .item-list .item .img-wrap img {
        width: 120px; }
    .company-license .entire .item-list .item .description {
      letter-spacing: .12em;
      line-height: 2em;
      font-size: 14px; }

.company-license .person {
  margin: 0 auto;
  margin-top: 64px; }
  .company-license .person .item-list {
    position: relative;
    margin: 0 auto;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: .1em;
    max-width: 460px; }
    .company-license .person .item-list .item {
      margin-top: 32px; }
      .company-license .person .item-list .item dl {
        display: flex;
        margin: 12px 18px; }
        .company-license .person .item-list .item dl dt {
          width: 80%; }
        .company-license .person .item-list .item dl dd {
          width: 20%;
          text-align: right; }
          .company-license .person .item-list .item dl dd::after {
            content: "名"; }
      .company-license .person .item-list .item:nth-last-of-type(1) {
        margin-bottom: 62px; }
      .company-license .person .item-list .item .degree-item {
        margin-top: 32px; }
    .company-license .person .item-list .updateDay {
      position: absolute;
      right: 0;
      bottom: 0; }

@media screen and (min-width: 768px) {
  .company-license .entire .item-list .item {
    box-sizing: border-box;
    padding: 0 5%; }
  .company-license .person {
    margin-top: 96px; }
    .company-license .person .item-list {
      justify-content: flex-start;
      margin: 0 auto;
      width: 80%;
      max-width: 80%; }
      .company-license .person .item-list .item {
        width: 50%;
        box-sizing: border-box;
        padding: 0 5%; }
        .company-license .person .item-list .item:nth-last-of-type(1) {
          margin-bottom: 24px; }
      .company-license .person .item-list .updateDay {
        right: 5%; } }

/*********************
company-customer
主要取引先
*********************/
.company-customer {
  margin: 0 auto;
  width: 70%;
  text-align: center; }
  .company-customer .info-list {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: .05em; }
    .company-customer .info-list li {
      padding: 9px; }
  @media screen and (min-width: 768px) {
    .company-customer {
      text-align: left; } }

/*********************
solution
*********************/
/*********************
solution
ソリューション
*********************/
.solution .wrapper {
  margin: 0 auto;
  padding: 10px; }
  .solution .wrapper .heading {
    margin: 45px 10%;
    position: relative;
    text-align: center;
    color: #0d47a1;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: .2em;
    text-indent: .2em; }
    .solution .wrapper .heading span {
      display: block; }
  .solution .wrapper .list-wrapper {
    margin-bottom: 120px; }
    .solution .wrapper .list-wrapper .item-list {
      justify-content: center; }
      .solution .wrapper .list-wrapper .item-list .item {
        padding: 32px;
        width: 100%;
        box-sizing: border-box; }
        .solution .wrapper .list-wrapper .item-list .item .img-box {
          margin: 0 auto;
          max-width: 320px;
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
          padding: 12px;
          transition: .3s ease-out; }
          .solution .wrapper .list-wrapper .item-list .item .img-box:hover {
            transform: scale(1.05); }
          .solution .wrapper .list-wrapper .item-list .item .img-box .img-wrapper {
            position: relative;
            margin: 0 auto;
            display: block;
            max-width: 300px;
            height: 200px; }
        .solution .wrapper .list-wrapper .item-list .item .item-name {
          margin-top: 18px;
          text-align: center;
          color: #95989a;
          font-weight: bold;
          letter-spacing: .1em;
          text-indent: .1em; }
      .solution .wrapper .list-wrapper .item-list .item-ai .img-box .img-wrapper {
        max-width: 240px; }
      .solution .wrapper .list-wrapper .item-list .item-box .img-box .img-wrapper {
        max-width: 200px; }

@media screen and (min-width: 1030px) {
  .solution .wrapper {
    width: 70%; }
    .solution .wrapper .heading {
      margin: 48px 10%;
      font-size: 18px;
      letter-spacing: .3em;
      text-indent: .3em; } }

@media screen and (min-width: 1280px) {
  .solution .item {
    width: 33.33% !important; }
    .solution .item .img-box {
      max-width: 360px; } }

/*********************
AI
*********************/
/*********************
ai-main
メビウスのAI
*********************/
.ai-main .img-wrapper {
  display: block;
  position: relative;
  margin: 32px auto;
  width: 150px;
  height: 150px; }
  .ai-main .img-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%; }

.ai-main .btn-wrap {
  text-align: center; }

.ai-main .line {
  margin: 8px 0px;
  position: relative;
  height: 3px;
  width: 56px;
  background-color: #009ce4; }

.ai-main .hero {
  background-image: url("/wp-content/themes/mob-hp/library/images/ai/hero-bg.jpg");
  background-position: bottom;
  background-color: #efefef;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  padding: 24px 24px 36px; }
  .ai-main .hero .title {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin: 72px 0 32px; }
  .ai-main .hero h2 {
    margin: 24px;
    text-align: center; }
  .ai-main .hero .btn-wrap {
    margin: 52px auto 52px; }
  .ai-main .hero .scroll {
    padding: 32px auto;
    position: relative; }
    .ai-main .hero .scroll p {
      padding-top: 22px;
      text-align: center;
      font-weight: bold;
      color: #fff; }
    .ai-main .hero .scroll span {
      position: absolute;
      top: 0;
      left: 50%;
      width: 24px;
      height: 24px;
      margin-left: -12px;
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdb 1.5s infinite;
      animation: sdb 1.5s infinite;
      box-sizing: border-box; }

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0; } }

@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0; } }

.ai-main .mobius {
  background-image: url("/wp-content/themes/mob-hp/library/images/ai/mobius-bg.jpg");
  background-position: bottom;
  background-color: #efefef;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  padding: 32px;
  color: #fff; }
  .ai-main .mobius .title {
    margin: 24px auto;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
    .ai-main .mobius .title span {
      font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
  .ai-main .mobius .content-wrap .content section {
    margin: 48px auto; }
    .ai-main .mobius .content-wrap .content section .text {
      margin: 24px auto 12px; }
      .ai-main .mobius .content-wrap .content section .text h3 {
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: bold;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
        .ai-main .mobius .content-wrap .content section .text h3 span {
          font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
      .ai-main .mobius .content-wrap .content section .text p {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
    .ai-main .mobius .content-wrap .content section .img-wrapper {
      margin: 0 auto; }

.ai-main .introduction {
  padding: 64px 32px; }
  .ai-main .introduction h2 {
    font-size: 20px;
    font-weight: bold;
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
    .ai-main .introduction h2 div {
      line-height: 32px; }
    .ai-main .introduction h2 span {
      font-size: 32px;
      color: #009ce4;
      font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic, "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .ai-main .introduction p {
    margin: 32px auto; }

.ai-main .case {
  padding: 32px; }
  .ai-main .case .number {
    color: #009ce4;
    font-weight: bold; }
    .ai-main .case .number span {
      font-size: 24px; }
  .ai-main .case h3 {
    font-size: 24px;
    font-weight: bold; }
  .ai-main .case .before h4, .ai-main .case .after h4 {
    margin-top: 18px;
    padding: 8px 12px;
    font-weight: bold;
    border: 1px solid #b1b1b1;
    background-color: #fff;
    display: inline-block; }
  .ai-main .case .before p, .ai-main .case .after p {
    margin: 12px 12px 0; }
  .ai-main .case .case-img .img-wrapper {
    width: 100%;
    height: 700px; }

.ai-main .industry {
  background-color: #F2F2F2; }
  .ai-main .industry .case1 .case-img .img-wrapper {
    height: 700px; }
  .ai-main .industry .case2 .case-img .img-wrapper {
    height: 400px; }

.ai-main .koi .logo .img-wrapper {
  width: 200px;
  height: 200px; }

.ai-main .koi .case3 p {
  margin: 12px; }

.ai-main .koi .case3 .case-img .img-wrapper {
  height: 1200px; }

.ai-main .example {
  padding: 48px 32px;
  background-image: url("/wp-content/themes/mob-hp/library/images/ai/example-bg.jpg");
  background-position: bottom;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden; }
  .ai-main .example .title {
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
    .ai-main .example .title span {
      font-size: 32px; }
  .ai-main .example .line {
    margin: 8px auto;
    background-color: #fff; }
  .ai-main .example .item-wrapper {
    display: flex;
    flex-direction: column; }
    .ai-main .example .item-wrapper .item {
      margin: 12px;
      padding: 12px;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      background-color: #fff; }
      .ai-main .example .item-wrapper .item h4 {
        margin-top: 8px;
        margin-left: 8px;
        padding: 0 8px 0;
        display: inline-block;
        font-weight: bold;
        font-size: 18px;
        color: #355CA1;
        background: linear-gradient(transparent 60%, #F6ED8C 60%); }
      .ai-main .example .item-wrapper .item .item-img .img-wrapper {
        width: auto;
        margin: 8px; }
  .ai-main .example .text {
    margin: 24px auto 42px;
    color: #fff;
    font-weight: bold;
    text-align: center; }

.ai-main .flow {
  padding: 32px 0px;
  margin-bottom: 32px; }
  .ai-main .flow h3 {
    font-size: 24px;
    font-weight: bold;
    text-align: center; }
  .ai-main .flow .line {
    margin: 8px auto; }
  .ai-main .flow .img-wrapper {
    width: 90%;
    height: 760px; }

.ai-main .pamphlet {
  padding: 64px 0;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed; }
  .ai-main .pamphlet p {
    text-align: center;
    font-weight: bold; }
  .ai-main .pamphlet .btn-wrap {
    margin-top: 32px; }

@media screen and (min-width: 768px) {
  .ai-main .btn-wrap a {
    font-size: 14px; }
  .ai-main .hero {
    padding: 48px 48px 72px; }
    .ai-main .hero .title {
      font-size: 72px; }
    .ai-main .hero h2 {
      margin-bottom: 72px;
      letter-spacing: 0.2em;
      font-weight: bold;
      color: #808080; }
      .ai-main .hero h2 div {
        display: inline; }
    .ai-main .hero .btn-wrap {
      margin: 52px auto 92px; }
    .ai-main .hero .scroll p {
      color: #fff; }
    .ai-main .hero .scroll span {
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff; }
  @-webkit-keyframes sdb {
    100% {
      -webkit-transform: rotate(-45deg) translate(-40px, 40px);
      opacity: 0; } }
  @keyframes sdb {
    100% {
      transform: rotate(-45deg) translate(-40px, 40px);
      opacity: 0; } }
  .ai-main .mobius {
    padding-bottom: 86px; }
    .ai-main .mobius .title {
      font-size: 52px;
      margin: 82px auto 42px;
      max-width: 920px; }
    .ai-main .mobius .content-wrap {
      margin: 24px auto;
      padding: 0 72px;
      background: rgba(65, 139, 240, 0.8);
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
      max-width: 720px; }
      .ai-main .mobius .content-wrap .content {
        padding: 18px 0;
        border-left: 1px solid #fff; }
        .ai-main .mobius .content-wrap .content .propose, .ai-main .mobius .content-wrap .content .solution, .ai-main .mobius .content-wrap .content .niigata {
          display: flex; }
          .ai-main .mobius .content-wrap .content .propose .text, .ai-main .mobius .content-wrap .content .solution .text, .ai-main .mobius .content-wrap .content .niigata .text {
            width: 75%;
            margin: 0; }
            .ai-main .mobius .content-wrap .content .propose .text h3, .ai-main .mobius .content-wrap .content .solution .text h3, .ai-main .mobius .content-wrap .content .niigata .text h3 {
              font-size: 28px !important;
              border-left: 6px solid #fff;
              padding-left: 32px; }
            .ai-main .mobius .content-wrap .content .propose .text p, .ai-main .mobius .content-wrap .content .solution .text p, .ai-main .mobius .content-wrap .content .niigata .text p {
              padding-left: 58px; }
          .ai-main .mobius .content-wrap .content .propose .img-wrapper, .ai-main .mobius .content-wrap .content .solution .img-wrapper, .ai-main .mobius .content-wrap .content .niigata .img-wrapper {
            width: 18%;
            margin: 32px auto; }
  .ai-main .introduction {
    display: flex;
    flex-direction: row-reverse;
    width: 80%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 82px 32px; }
    .ai-main .introduction .text {
      width: 60%; }
      .ai-main .introduction .text h2 {
        font-size: 32px; }
        .ai-main .introduction .text h2 div {
          line-height: 48px; }
        .ai-main .introduction .text h2 span {
          font-size: 56px; }
    .ai-main .introduction .img-wrapper {
      margin: 24px;
      width: 40%;
      height: auto;
      margin-bottom: 0; }
  .ai-main .case {
    padding: 48px; }
    .ai-main .case .logo .img-wrapper {
      width: 200px;
      height: 200px; }
    .ai-main .case .case1, .ai-main .case .case2, .ai-main .case .case3 {
      max-width: 820px;
      margin: 0 auto;
      font-weight: bold; }
      .ai-main .case .case1 .number span, .ai-main .case .case2 .number span, .ai-main .case .case3 .number span {
        font-size: 36px; }
      .ai-main .case .case1 h3, .ai-main .case .case2 h3, .ai-main .case .case3 h3 {
        font-size: 42px;
        margin-bottom: 28px; }
      .ai-main .case .case1 .wrapper, .ai-main .case .case2 .wrapper, .ai-main .case .case3 .wrapper {
        display: flex; }
        .ai-main .case .case1 .wrapper .before, .ai-main .case .case1 .wrapper .after, .ai-main .case .case2 .wrapper .before, .ai-main .case .case2 .wrapper .after, .ai-main .case .case3 .wrapper .before, .ai-main .case .case3 .wrapper .after {
          width: 50%; }
      .ai-main .case .case1 .case-img .img-wrapper, .ai-main .case .case2 .case-img .img-wrapper, .ai-main .case .case3 .case-img .img-wrapper {
        width: 700px;
        height: 400px; }
  .ai-main .koi .logo .img-wrapper {
    width: 240px;
    height: 240px; }
  .ai-main .koi .case-img .img-wrapper {
    width: 700px !important;
    height: 900px !important; }
  .ai-main .example {
    padding: 72px 0; }
    .ai-main .example .title {
      font-size: 42px; }
      .ai-main .example .title span {
        font-size: 68px; }
    .ai-main .example .line {
      margin: 12px auto 32px; }
    .ai-main .example .item-wrapper {
      flex-direction: row;
      margin: 0 auto;
      max-width: 800px; }
      .ai-main .example .item-wrapper .item {
        width: 33%; }
        .ai-main .example .item-wrapper .item .item-img .img-wrapper {
          margin: 8px; }
  .ai-main .flow {
    margin-bottom: 64px; }
    .ai-main .flow h3 {
      margin: 32px auto 24px;
      font-size: 48px; }
    .ai-main .flow .line {
      margin: 0 auto 32px; }
    .ai-main .flow .img-wrapper {
      width: 700px;
      height: 700px; }
    .ai-main .flow .btn-wrap {
      margin-top: 64px; } }

/*********************
Seminar
*********************/
/*********************
recruit-top
採用トップページ
*********************/
.seminar20210616 {
  background-image: url("/wp-content/themes/mob-hp/library/images/seminar_bg.jpg"); }
  .seminar20210616 .container {
    max-width: 1200px;
    margin: auto; }
  .seminar20210616 a {
    color: blue; }
  .seminar20210616 .text-wrap {
    padding: 0 24px; }
  .seminar20210616 .overview_container {
    display: flex;
    flex-direction: column; }
  .seminar20210616 .overview_container img {
    width: 270px;
    height: 320px;
    margin: 32px auto; }
  .seminar20210616 p {
    margin-top: 24px;
    font-size: 1em; }
  .seminar20210616 h1 {
    display: flex;
    flex-direction: column;
    font-size: 3em;
    width: max-content;
    margin: 32px auto; }
  .seminar20210616 h2 {
    font-weight: bold; }
  .seminar20210616 .seminar_title {
    width: max-content;
    padding: 0 0.2em 0 0.3em;
    background-image: linear-gradient(120deg, #cdd2ef 0%, #cdd2ef 35%, #99bbec 50%, #4bcce4 75%, #2ef3e1 100%);
    background-size: 100% 0.4em;
    background-repeat: no-repeat;
    background-position: 0 90%;
    white-space: nowrap;
    font-weight: bold; }
  .seminar20210616 .section_title {
    width: 100%;
    border-style: solid;
    border-width: 0 0 1px 0;
    letter-spacing: 0.1em;
    text-align: center;
    color: #009ce4;
    font-size: 2em;
    font-weight: bold;
    margin-top: 2em; }
  .seminar20210616 .summary {
    font-weight: bold; }
  .seminar20210616 .speaker {
    padding: 0;
    margin-top: 12px; }
  .seminar20210616 .speaker li {
    list-style-type: none; }
  .seminar20210616 .title {
    font-weight: bold;
    font-size: 18px;
    padding: 0 0.2em 0 0.3em;
    background-image: linear-gradient(transparent 50%, #fdd8fb 0%);
    background-size: 100% 1em;
    background-repeat: no-repeat;
    background-position: 0 90%; }
  .seminar20210616 .sub_title {
    display: block;
    width: max-content;
    white-space: nowrap; }
  .seminar20210616 .memo {
    margin: 0; }
  .seminar20210616 .memo li {
    color: #ed8a70; }
  .seminar20210616 .agenda {
    margin-top: 32px; }
    .seminar20210616 .agenda p {
      font-weight: bold;
      color: #009ce4; }
  .seminar20210616 .overview {
    border-collapse: collapse;
    border-spacing: 0;
    word-break: break-all; }
  .seminar20210616 .overview th {
    border-bottom: 1px solid #dbdbdb;
    min-width: 105px;
    padding: 14px 8px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle; }
  .seminar20210616 .overview td {
    border-bottom: 1px solid #dbdbdb;
    padding: 14px 0px; }
  .seminar20210616 .btn-wrap {
    margin-top: 32px;
    margin-bottom: 64px;
    text-align: center;
    font-size: 14px; }
  .seminar20210616 .btn--base-color {
    margin: auto;
    color: #fff !important;
    background-color: #009ce4;
    padding: 1em 3em;
    border-radius: 3em;
    font-weight: 700;
    letter-spacing: 0.2em;
    cursor: pointer; }
  @media screen and (min-width: 1030px) {
    .seminar20210616 .seminar_title {
      font-size: 78px; }
    .seminar20210616 .overview_container {
      flex-direction: row; }
    .seminar20210616 .btn--base-color {
      font-size: 16px; }
    .seminar20210616 .agenda h2 .title {
      font-size: 24px; }
    .seminar20210616 .agenda h2 .sub_title {
      font-size: 18px; } }

/*********************
box
*********************/
/*********************
box
*********************/
.dx-box .img-wrapper {
  display: block;
  position: relative;
  margin: 32px auto;
  width: 150px;
  height: 150px; }
  .dx-box .img-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%; }

.dx-box .btn-wrap {
  text-align: center; }

.dx-box .line {
  margin: 8px 0px;
  position: relative;
  height: 3px;
  width: 56px;
  background-color: #009ce4; }

.dx-box .hero {
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  padding: 24px 24px 36px; }
  .dx-box .hero .img-wrapper {
    width: 200px;
    height: 150px; }
  .dx-box .hero .title {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin: 72px 0 32px; }
  .dx-box .hero h2 {
    margin: 24px;
    text-align: center; }
  .dx-box .hero .btn-wrap {
    margin: 52px auto 52px; }
  .dx-box .hero .scroll {
    padding: 32px auto;
    position: relative; }
    .dx-box .hero .scroll p {
      padding-top: 22px;
      text-align: center;
      font-weight: bold;
      color: #808080; }
    .dx-box .hero .scroll span {
      position: absolute;
      top: 0;
      left: 50%;
      width: 24px;
      height: 24px;
      margin-left: -12px;
      border-left: 1px solid #808080;
      border-bottom: 1px solid #808080;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdb 1.5s infinite;
      animation: sdb 1.5s infinite;
      box-sizing: border-box; }

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0; } }

@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0; } }

.dx-box .mobius {
  background-image: url("/wp-content/themes/mob-hp/library/images/dx/bg_01.png");
  background-position: bottom;
  background-color: #efefef;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  padding: 32px;
  color: #fff; }
  .dx-box .mobius .title {
    margin: 24px auto;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
    .dx-box .mobius .title span {
      font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
  .dx-box .mobius .content-wrap .content section {
    margin: 48px auto; }
    .dx-box .mobius .content-wrap .content section .text {
      margin: 24px auto 12px; }
      .dx-box .mobius .content-wrap .content section .text h3 {
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: bold;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
        .dx-box .mobius .content-wrap .content section .text h3 span {
          font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
      .dx-box .mobius .content-wrap .content section .text p {
        font-size: 16px;
        font-weight: normal;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
    .dx-box .mobius .content-wrap .content section .img-wrapper {
      margin: 0 auto; }

.dx-box .example {
  padding: 48px 32px;
  background: linear-gradient(-90deg, #0061D5, #318eff);
  background-color: #efefef;
  background-position: bottom;
  background-color: #efefef;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden; }
  .dx-box .example .title {
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
    .dx-box .example .title span {
      font-size: 32px; }
  .dx-box .example .line {
    margin: 8px auto;
    background-color: #fff; }
  .dx-box .example .item-wrapper {
    display: flex;
    flex-direction: column; }
    .dx-box .example .item-wrapper .item {
      margin: 12px;
      padding: 12px;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      background-color: #fff; }
      .dx-box .example .item-wrapper .item h4 {
        margin-top: 8px;
        margin-left: 8px;
        padding: 0 8px 0;
        display: inline-block;
        font-weight: bold;
        font-size: 18px;
        color: #355CA1; }
        .dx-box .example .item-wrapper .item h4 div {
          display: inline; }
      .dx-box .example .item-wrapper .item .item-img .img-wrapper {
        width: auto;
        margin: 8px; }
      .dx-box .example .item-wrapper .item p {
        margin: 18px 12px; }
      .dx-box .example .item-wrapper .item span {
        display: block;
        font-size: 15px; }
  .dx-box .example .text {
    margin: 24px auto 42px;
    color: #fff;
    font-weight: bold;
    text-align: center; }
  .dx-box .example .btn-wrap {
    margin: 42px auto; }

.dx-box .plan {
  padding: 32px 0px; }
  .dx-box .plan h3 {
    font-size: 24px;
    font-weight: bold;
    text-align: center; }
  .dx-box .plan .line {
    margin: 8px auto; }
  .dx-box .plan table {
    border-collapse: separate;
    /* 表の線と線の間を空ける */
    margin: 52px auto;
    border-spacing: 5px;
    /* 表の線と線の間の幅 */
    word-break: break-all; }
    .dx-box .plan table th {
      max-width: 182px; }
    .dx-box .plan table tr:nth-child(odd) {
      background-color: #ddd;
      /* 背景色指定 */ }
    .dx-box .plan table tr:nth-child(even) {
      background-color: #f8f8f8;
      /* 背景色指定 */ }
    .dx-box .plan table th, .dx-box .plan table td {
      padding: 5px 10px;
      /* 余白指定 */
      text-align: center;
      vertical-align: middle; }
      .dx-box .plan table th span, .dx-box .plan table td span {
        display: block; }
    .dx-box .plan table .dx-box_header {
      background-color: #fff !important;
      font-weight: bold; }
      .dx-box .plan table .dx-box_header th, .dx-box .plan table .dx-box_header td {
        padding: 12px 10px; }
  .dx-box .plan p {
    max-width: 720px;
    margin: 32px auto; }
  .dx-box .plan .img-wrapper {
    width: 90%;
    height: 760px; }

@media screen and (min-width: 768px) {
  .dx-box .btn-wrap a {
    font-size: 14px; }
  .dx-box .hero {
    padding: 48px 48px 72px; }
    .dx-box .hero .img-wrapper {
      width: 350px;
      height: 300px; }
    .dx-box .hero .title {
      font-size: 48px; }
    .dx-box .hero h2 {
      margin-bottom: 72px;
      letter-spacing: 0.2em;
      font-weight: bold;
      color: #808080; }
      .dx-box .hero h2 div {
        display: inline; }
    .dx-box .hero .btn-wrap {
      margin: 52px auto 92px; }
    .dx-box .hero .scroll p {
      color: #808080; }
    .dx-box .hero .scroll span {
      border-left: 1px solid #808080;
      border-bottom: 1px solid #808080; }
  @-webkit-keyframes sdb {
    100% {
      -webkit-transform: rotate(-45deg) translate(-40px, 40px);
      opacity: 0; } }
  @keyframes sdb {
    100% {
      transform: rotate(-45deg) translate(-40px, 40px);
      opacity: 0; } }
  .dx-box .mobius {
    padding-bottom: 86px; }
    .dx-box .mobius .title {
      font-size: 52px;
      margin: 82px auto 42px;
      max-width: 920px; }
    .dx-box .mobius .content-wrap {
      margin: 24px auto;
      padding: 0 72px;
      background: rgba(65, 139, 240, 0.8);
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
      max-width: 720px; }
      .dx-box .mobius .content-wrap .content {
        padding: 18px 0;
        border-left: 1px solid #fff; }
        .dx-box .mobius .content-wrap .content .propose, .dx-box .mobius .content-wrap .content .solution, .dx-box .mobius .content-wrap .content .niigata {
          display: flex; }
          .dx-box .mobius .content-wrap .content .propose .text, .dx-box .mobius .content-wrap .content .solution .text, .dx-box .mobius .content-wrap .content .niigata .text {
            width: 75%;
            margin: 0; }
            .dx-box .mobius .content-wrap .content .propose .text h3, .dx-box .mobius .content-wrap .content .solution .text h3, .dx-box .mobius .content-wrap .content .niigata .text h3 {
              font-size: 28px !important;
              border-left: 6px solid #fff;
              padding-left: 32px; }
            .dx-box .mobius .content-wrap .content .propose .text p, .dx-box .mobius .content-wrap .content .solution .text p, .dx-box .mobius .content-wrap .content .niigata .text p {
              padding-left: 58px; }
          .dx-box .mobius .content-wrap .content .propose .img-wrapper, .dx-box .mobius .content-wrap .content .solution .img-wrapper, .dx-box .mobius .content-wrap .content .niigata .img-wrapper {
            width: 18%;
            margin: 32px auto; }
        .dx-box .mobius .content-wrap .content .propose .img-wrapper {
          width: 22%; }
        .dx-box .mobius .content-wrap .content .solution .img-wrapper {
          width: 22%; }
  .dx-box .introduction {
    display: flex;
    flex-direction: row-reverse;
    width: 80%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 82px 32px; }
    .dx-box .introduction .text {
      width: 60%; }
      .dx-box .introduction .text h2 {
        font-size: 32px; }
        .dx-box .introduction .text h2 div {
          line-height: 48px; }
        .dx-box .introduction .text h2 span {
          font-size: 56px; }
    .dx-box .introduction .img-wrapper {
      margin: 24px;
      width: 40%;
      height: auto;
      margin-bottom: 0; }
  .dx-box .case {
    padding: 48px; }
    .dx-box .case .logo .img-wrapper {
      width: 200px;
      height: 200px; }
    .dx-box .case .case1, .dx-box .case .case2, .dx-box .case .case3 {
      max-width: 820px;
      margin: 0 auto;
      font-weight: bold; }
      .dx-box .case .case1 .number span, .dx-box .case .case2 .number span, .dx-box .case .case3 .number span {
        font-size: 36px; }
      .dx-box .case .case1 h3, .dx-box .case .case2 h3, .dx-box .case .case3 h3 {
        font-size: 42px;
        margin-bottom: 28px; }
      .dx-box .case .case1 .wrapper, .dx-box .case .case2 .wrapper, .dx-box .case .case3 .wrapper {
        display: flex; }
        .dx-box .case .case1 .wrapper .before, .dx-box .case .case1 .wrapper .after, .dx-box .case .case2 .wrapper .before, .dx-box .case .case2 .wrapper .after, .dx-box .case .case3 .wrapper .before, .dx-box .case .case3 .wrapper .after {
          width: 50%; }
      .dx-box .case .case1 .case-img .img-wrapper, .dx-box .case .case2 .case-img .img-wrapper, .dx-box .case .case3 .case-img .img-wrapper {
        width: 700px;
        height: 400px; }
  .dx-box .koi .logo .img-wrapper {
    width: 240px;
    height: 240px; }
  .dx-box .koi .case-img .img-wrapper {
    width: 700px !important;
    height: 550px !important; }
  .dx-box .example {
    padding: 72px 0; }
    .dx-box .example .title {
      font-size: 42px; }
      .dx-box .example .title span {
        font-size: 68px; }
    .dx-box .example .line {
      margin: 12px auto 32px; }
    .dx-box .example .item-wrapper {
      flex-direction: row;
      margin: 0 auto;
      max-width: 1080px; }
      .dx-box .example .item-wrapper .item {
        width: 33%; }
        .dx-box .example .item-wrapper .item .item-img .img-wrapper {
          margin: 8px; }
  .dx-box .plan h3 {
    margin: 32px auto 24px;
    font-size: 48px; }
  .dx-box .plan .line {
    margin: 0 auto 32px; }
  .dx-box .plan .img-wrapper {
    width: 700px;
    height: 700px; }
  .dx-box .plan .btn-wrap {
    margin-top: 64px; } }

/*********************
RECRUIT
*********************/
/*********************
recruit-top
採用トップページ
*********************/
.recruit-top {
  height: 100%;
  /*********************
particle.js
*********************/
  /* ---- particles.js container ---- */
  /*********************
トップ画面
*********************/
  /*********************
共通
*********************/
  /*********************
メッセージ
*********************/
  /*********************
人材育成
*********************/
  /*********************
社員インタビュー
*********************/
  /*********************
メビウスフォト
*********************/
  /*********************
採用Q&A
*********************/
  /*********************
採用バナー
*********************/ }
  .recruit-top #particles-js {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    z-index: -1; }
  .recruit-top .hero {
    position: relative;
    width: 100%; }
    .recruit-top .hero .title-wrap {
      margin-top: 120px;
      margin-bottom: 120px;
      text-align: center;
      color: #009ce4; }
      .recruit-top .hero .title-wrap .title-main {
        font-size: 48px;
        font-style: italic;
        font-weight: 900;
        letter-spacing: .1em;
        text-indent: -.1em;
        line-height: 1.3em; }
        .recruit-top .hero .title-wrap .title-main span {
          display: block; }
      .recruit-top .hero .title-wrap .title-sub {
        margin-top: 20px;
        letter-spacing: .4em;
        text-indent: -.4em; }
    .recruit-top .hero .news {
      box-sizing: border-box;
      padding: 32px;
      width: 100%;
      background-color: rgba(10, 10, 10, 0.8);
      color: #fff; }
      .recruit-top .hero .news .news-content {
        margin: 0 auto;
        width: 100%;
        max-width: 500px; }
        .recruit-top .hero .news .news-content .heading {
          color: #ff8086;
          font-weight: bold;
          letter-spacing: .1em;
          text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); }
        .recruit-top .hero .news .news-content ul {
          margin-top: 18px;
          max-height: 7em;
          overflow-y: scroll; }
          .recruit-top .hero .news .news-content ul li {
            position: relative;
            font-weight: bold; }
            .recruit-top .hero .news .news-content ul li + li {
              margin-top: 1em; }
            .recruit-top .hero .news .news-content ul li .info {
              color: #fff;
              text-decoration: none;
              font-size: 12px; }
              .recruit-top .hero .news .news-content ul li .info .category {
                margin-left: 1em;
                letter-spacing: .1em; }
              .recruit-top .hero .news .news-content ul li .info .recruit {
                color: #c5e1c5; }
              .recruit-top .hero .news .news-content ul li .info .graduate {
                color: #d0eaf9; }
              .recruit-top .hero .news .news-content ul li .info .career {
                color: #ffeb3b; }
              .recruit-top .hero .news .news-content ul li .info .intern {
                color: #b2ebf2; }
              .recruit-top .hero .news .news-content ul li .info .gallery {
                color: #ff8086; }
            .recruit-top .hero .news .news-content ul li .title {
              display: block;
              font-size: 14px; }
              .recruit-top .hero .news .news-content ul li .title a {
                color: #fff !important; }
  @media screen and (min-width: 768px) {
    .recruit-top .hero .title-wrap .title-main {
      font-size: 72px;
      letter-spacing: .2em;
      text-indent: -.2em; }
    .recruit-top .hero .news {
      margin: 0 auto;
      margin-bottom: 124px;
      width: 80%;
      max-width: 820px; }
      .recruit-top .hero .news .news-content {
        max-width: 700px; }
        .recruit-top .hero .news .news-content .heading {
          margin-right: 2em;
          float: left;
          font-size: 26px; }
        .recruit-top .hero .news .news-content ul {
          margin-top: 0px; }
          .recruit-top .hero .news .news-content ul li {
            display: flex; }
            .recruit-top .hero .news .news-content ul li .info {
              display: flex;
              font-size: 12px; }
              .recruit-top .hero .news .news-content ul li .info .date {
                letter-spacing: .2em; }
              .recruit-top .hero .news .news-content ul li .info .category {
                display: inline-block;
                min-width: 72px; }
            .recruit-top .hero .news .news-content ul li .title {
              display: inline !important;
              margin-left: 1em; } }
  .recruit-top .content section {
    box-sizing: border-box;
    color: #009ce4;
    padding: 38px;
    width: 100%;
    text-align: center; }
    .recruit-top .content section header .title-wrap h2 {
      font-size: 26px;
      font-weight: bold;
      letter-spacing: .2em; }
    .recruit-top .content section header .title-wrap p {
      font-size: 12px;
      line-height: 12px;
      letter-spacing: .2em; }
    .recruit-top .content section header .icon-wrap {
      margin-top: 24px;
      height: 40px;
      width: 40px; }
    .recruit-top .content section .text-wrap {
      margin-top: 21px;
      font-weight: bold;
      line-height: 1.5em;
      letter-spacing: .05em; }
      .recruit-top .content section .text-wrap p {
        margin-bottom: 1em; }
      .recruit-top .content section .text-wrap .from {
        margin-top: 32px;
        font-size: 16px;
        display: block;
        text-align: right; }
    .recruit-top .content section .btn-wrap {
      margin-top: 32px;
      margin-bottom: 18px;
      text-align: center; }
  @media screen and (min-width: 768px) {
    .recruit-top .content .recruit-top-container {
      margin: 0 auto;
      width: 80%;
      max-width: 920px;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
      background-color: #fff; } }
  .recruit-top .message {
    border-bottom: 5px solid #009ce4; }
    .recruit-top .message .message-content {
      margin: 0 auto;
      width: 100%;
      max-width: 520px; }
      .recruit-top .message .message-content .text-wrap {
        text-align: left;
        color: #263238; }
  .recruit-top .training .lead {
    margin: 32px 0;
    color: #0d47a1;
    font-weight: bold;
    font-size: 26px; }
    .recruit-top .training .lead p span {
      display: inline-block; }
  .recruit-top .people {
    background-color: rgba(10, 10, 10, 0.8) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
    .recruit-top .people .people-content {
      color: #fff; }
      .recruit-top .people .people-content header .lead {
        margin-top: 24px;
        font-weight: bold; }
      .recruit-top .people .people-content .people-carousel {
        margin: 32px 0; }
        .recruit-top .people .people-content .people-carousel .slick-prev, .recruit-top .people .people-content .people-carousel .slick-next {
          top: 42%; }
        .recruit-top .people .people-content .people-carousel .item {
          text-align: center; }
          .recruit-top .people .people-content .people-carousel .item .img-wrap {
            margin: 0 auto;
            width: 200px;
            height: 254px;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
            background-color: #ddd; }
          .recruit-top .people .people-content .people-carousel .item .department {
            margin: 24px auto; }
            .recruit-top .people .people-content .people-carousel .item .department span {
              position: relative;
              color: #fff;
              font-weight: bold;
              font-size: 14px;
              letter-spacing: .1em; }
              .recruit-top .people .people-content .people-carousel .item .department span::before {
                position: absolute;
                top: -10px;
                left: 50%;
                transform: translateX(-50%);
                content: '';
                width: 32px;
                height: 3px;
                background-color: #fff; }
  .recruit-top .gallery .gallery-content .lead {
    margin-top: 24px;
    font-weight: bold; }
  .recruit-top .gallery .gallery-content .gallery-carousel {
    margin: 32px 0; }
    .recruit-top .gallery .gallery-content .gallery-carousel .item .img-wrap {
      margin: 0 auto;
      width: 300px;
      height: 254px;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
      background-color: #999; }
  .recruit-top .recruit-contact {
    border-top: 5px solid #009ce4;
    border-bottom: 5px solid #009ce4; }
  @media screen and (min-width: 768px) {
    .recruit-top .recruit-contact {
      margin-top: 72px;
      padding: 72px;
      border-top: none;
      border-bottom: none; }
      .recruit-top .recruit-contact .recruit-contact-content header .divider {
        margin: 20px auto;
        width: 360px;
        height: 5px;
        background-color: #009ce4; } }
  .recruit-top .banner {
    max-width: 540px;
    justify-content: left; }
    .recruit-top .banner .img-wrap {
      margin: 16px auto;
      height: 50px;
      overflow: visible; }
    .recruit-top .banner #youtube {
      display: block;
      width: 170px;
      height: 50px;
      background-color: #fff; }
      .recruit-top .banner #youtube img {
        border: 1px solid #777; }
    .recruit-top .banner #rikunavi2022 {
      width: 240px;
      height: 50px;
      background-color: #fff; }
    .recruit-top .banner #recruit_hojo {
      width: 240px;
      height: 50px;
      background-color: #fff; }

/*********************
recruit-training
人材育成
*********************/
.recruit-training {
  /*********************
共通項目
*********************/
  /*********************
目指す社員
*********************/
  /*********************
5つの柱
*********************/
  /*********************
教育体系
*********************/ }
  .recruit-training .hero .img-wrap {
    width: 100%;
    height: 200px; }
  .recruit-training .hero .arrow svg {
    display: block;
    margin: 0 auto;
    color: #ff8086;
    font-size: 40px; }
  .recruit-training .training-content .training-container {
    margin: 0 auto;
    max-width: 560px; }
    .recruit-training .training-content .training-container .sec-main {
      padding: 36px 0;
      text-align: center;
      letter-spacing: .1em;
      font-weight: bold; }
      .recruit-training .training-content .training-container .sec-main .heading-wrap h2 {
        display: inline-block;
        position: relative;
        padding: 12px 24px;
        font-size: 18px;
        color: #009ce4;
        background-color: #fff;
        border: 3px solid #009ce4;
        letter-spacing: .2em; }
  @media screen and (min-width: 768px) {
    .recruit-training .training-content .training-container .sec-main {
      padding: 72px 0; }
      .recruit-training .training-content .training-container .sec-main .heading-wrap h2 {
        font-size: 22px; } }
  .recruit-training .goal .catch {
    position: relative;
    margin: 24px auto;
    padding: 16px;
    max-width: 240px; }
    .recruit-training .goal .catch::before, .recruit-training .goal .catch::after {
      position: absolute;
      content: "";
      width: 30px;
      height: 30px;
      border: 1px solid #e0e0e0; }
    .recruit-training .goal .catch::before {
      top: 0;
      left: 0;
      border-right: none;
      border-bottom: none; }
    .recruit-training .goal .catch::after {
      right: 0;
      bottom: 0;
      border-top: none;
      border-left: none; }
    .recruit-training .goal .catch p {
      color: #009ce4; }
      .recruit-training .goal .catch p span {
        font-size: 32px; }
      .recruit-training .goal .catch p .strong {
        color: #ff8086; }
  .recruit-training .goal .text p:nth-child(n+2) {
    margin-top: 1em; }
  @media screen and (min-width: 768px) {
    .recruit-training .goal .catch {
      margin: 48px auto;
      max-width: 480px; }
      .recruit-training .goal .catch p span {
        font-size: 48px; } }
  .recruit-training .belief .description {
    margin-top: 18px; }
  .recruit-training .belief .belief-list {
    margin-top: 48px;
    padding: 0 32px;
    text-align: left; }
    .recruit-training .belief .belief-list li:not(:first-child) {
      margin-top: 26px; }
    .recruit-training .belief .belief-list li h5 {
      font-size: 26px;
      color: #009ce4; }
    .recruit-training .belief .belief-list li p {
      font-size: 14px;
      letter-spacing: .1em; }
  @media screen and (min-width: 768px) {
    .recruit-training .belief .belief-list {
      margin: 0 auto;
      margin-top: 72px;
      width: 80%;
      text-align: left; }
      .recruit-training .belief .belief-list li:not(:first-child) {
        margin-top: 36px; }
      .recruit-training .belief .belief-list li h5 {
        font-size: 32px;
        color: #009ce4; }
      .recruit-training .belief .belief-list li p {
        font-size: 18px;
        letter-spacing: .1em; } }
  .recruit-training .system {
    /*********************
      教育体系 - 共通項目
      *********************/
    /*********************
      教育体系 - 入社前研修
      *********************/ }
    .recruit-training .system figure {
      margin: 32px auto; }
      .recruit-training .system figure .tabs {
        margin: auto; }
        .recruit-training .system figure .tabs .tab-item {
          margin: .5em 0;
          padding: .5em 1em;
          display: inline-block;
          border-left: 1px solid #e0e0e0;
          margin-left: -5px; }
          .recruit-training .system figure .tabs .tab-item:last-child {
            border-right: 1px solid #e0e0e0; }
          .recruit-training .system figure .tabs .tab-item span {
            cursor: pointer;
            color: rgba(33, 33, 33, 0.5); }
            .recruit-training .system figure .tabs .tab-item span:hover {
              color: rgba(33, 33, 33, 0.2);
              transition: .2s; }
        .recruit-training .system figure .tabs .is-active {
          color: #0d47a1 !important; }
      .recruit-training .system figure table {
        margin: 0 auto;
        margin-top: 32px; }
        .recruit-training .system figure table tr {
          background-color: #f5f5f5; }
          .recruit-training .system figure table tr:nth-of-type(even) {
            background-color: #e0e0e0; }
          .recruit-training .system figure table tr td {
            padding: 1em;
            vertical-align: middle;
            border: 1px solid #fff; }
            .recruit-training .system figure table tr td.training-type {
              color: #fff;
              background-color: rgba(51, 102, 255, 0.8); }
            .recruit-training .system figure table tr td.details span {
              display: block; }
    @media screen and (min-width: 481px) {
      .recruit-training .system figure {
        margin: 32px auto; }
        .recruit-training .system figure .tabs {
          margin: auto; }
          .recruit-training .system figure .tabs .tab-item {
            padding: 1em;
            min-height: 110px;
            display: inline-block;
            -webkit-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            border-left: 1px solid #e0e0e0;
            margin-left: -5px; }
            .recruit-training .system figure .tabs .tab-item:last-child {
              border-right: 1px solid #e0e0e0; } }
    .recruit-training .system .item {
      margin-top: 48px;
      position: relative;
      width: 100%; }
      .recruit-training .system .item::before {
        content: "";
        display: block;
        padding-top: 75%;
        /* 高さを幅の75%に固定 */ }
    .recruit-training .system .img-wrap {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0; }
    .recruit-training .system .sec-sub {
      padding: 32px 0; }
      .recruit-training .system .sec-sub h3 {
        position: relative;
        display: inline-block;
        padding: 0 65px;
        color: #ff8086;
        font-size: 16px; }
        .recruit-training .system .sec-sub h3::before, .recruit-training .system .sec-sub h3::after {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          content: '';
          height: 3px;
          width: 45px;
          background-color: #ff8086; }
        .recruit-training .system .sec-sub h3::before {
          left: 0; }
        .recruit-training .system .sec-sub h3::after {
          right: 0; }
      .recruit-training .system .sec-sub .description {
        margin-top: 18px; }
        .recruit-training .system .sec-sub .description p:nth-child(n+2) {
          margin-top: 1em; }
      .recruit-training .system .sec-sub .training-list {
        margin-top: 36px; }
        .recruit-training .system .sec-sub .training-list li {
          padding: 0 32px; }
          .recruit-training .system .sec-sub .training-list li:nth-child(n+2) {
            margin-top: 24px; }
          .recruit-training .system .sec-sub .training-list li h5 {
            color: #009ce4; }
          .recruit-training .system .sec-sub .training-list li svg {
            color: #009ce4;
            margin-top: 12px;
            font-size: 80px; }
          .recruit-training .system .sec-sub .training-list li p {
            margin-top: 18px;
            font-size: 14px;
            font-weight: normal; }
      .recruit-training .system .sec-sub .training-carousel {
        margin: 0 auto;
        max-width: 480px; }
    @media screen and (min-width: 768px) {
      .recruit-training .system .pre .training-list li:nth-child(2) {
        margin-top: 0; } }
    .recruit-training .system .other .circle {
      margin: 0 auto;
      margin-top: 8px;
      width: 5px;
      height: 5px;
      background-color: #009ce4;
      border-radius: 50%; }
    .recruit-training .system .other p {
      margin-top: 8px !important; }

/*********************
recruit-people
社員紹介
*********************/
.recruit-people .content .person-list {
  justify-content: center; }
  .recruit-people .content .person-list .item {
    text-align: center; }
    .recruit-people .content .person-list .item a:hover {
      opacity: .6; }
    .recruit-people .content .person-list .item .img-wrap {
      width: 280px;
      height: 350px;
      background-color: #ddd;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
      transition: .3s ease-out; }
      .recruit-people .content .person-list .item .img-wrap:hover {
        transform: scale(1.05); }
    .recruit-people .content .person-list .item .info {
      padding: 16px;
      font-size: 14px;
      color: #009ce4;
      font-weight: bold; }
      .recruit-people .content .person-list .item .info .position {
        letter-spacing: .2em;
        text-indent: -.2em; }
      .recruit-people .content .person-list .item .info .department {
        letter-spacing: .2em;
        text-indent: -.2em; }
      .recruit-people .content .person-list .item .info .line {
        margin: 0 auto;
        margin-top: 12px;
        width: 35px;
        height: 3px;
        background-color: #009ce4; }

@media screen and (max-width: 767px) {
  .recruit-people .content .person-list .item:nth-child(n+2) {
    margin-top: 48px; } }

@media screen and (max-width: 1029px) {
  .recruit-people .content .person-list .item:nth-child(n+3) {
    margin-top: 48px; } }

@media screen and (min-width: 1030px) {
  .recruit-people .content .person-list .item:nth-child(n+4) {
    margin-top: 48px; } }

/*********************
recruit-people-person
社員紹介-詳細
*********************/
.recruit-people-person {
  text-align: center; }
  .recruit-people-person .hero .arrow-wrap {
    display: none; }
  .recruit-people-person .hero .hero-content .img-wrap {
    width: 100%;
    height: 400px; }
  .recruit-people-person .hero .hero-content .text {
    letter-spacing: .1em; }
    .recruit-people-person .hero .hero-content .text .catch {
      padding: 16px;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      background-color: #009ce4; }
    .recruit-people-person .hero .hero-content .text .position {
      padding: 8px;
      color: #009ce4;
      background-color: #fff;
      border-bottom: 1px solid #009ce4; }
    .recruit-people-person .hero .hero-content .text .caption {
      padding: 16px; }
      .recruit-people-person .hero .hero-content .text .caption .department__main {
        font-size: 12px;
        display: inline-block; }
      .recruit-people-person .hero .hero-content .text .caption .department__sub {
        font-size: 12px;
        display: inline-block; }
      .recruit-people-person .hero .hero-content .text .caption .name::after {
        content: 'さん';
        font-size: 12px; }
    .recruit-people-person .hero .hero-content .text .profile {
      padding: 16px 0; }
      .recruit-people-person .hero .hero-content .text .profile dl {
        margin: 0 auto;
        width: 80%; }
        .recruit-people-person .hero .hero-content .text .profile dl dt, .recruit-people-person .hero .hero-content .text .profile dl dd {
          display: inline-block; }
        .recruit-people-person .hero .hero-content .text .profile dl dt {
          width: 96px; }
          .recruit-people-person .hero .hero-content .text .profile dl dt::after {
            content: ' :'; }
        .recruit-people-person .hero .hero-content .text .profile dl dd {
          width: 192px; }
        .recruit-people-person .hero .hero-content .text .profile dl .join dd::after {
          content: '年'; }
  @media screen and (min-width: 768px) {
    .recruit-people-person .hero {
      position: relative;
      height: 600px; }
      .recruit-people-person .hero .hero-content {
        position: relative; }
        .recruit-people-person .hero .hero-content .img-wrap {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, 0);
          width: 100%;
          height: 600px; }
        .recruit-people-person .hero .hero-content .text {
          position: relative;
          margin-left: 36px; }
          .recruit-people-person .hero .hero-content .text .catch {
            position: absolute;
            top: 360px;
            font-size: 32px; }
          .recruit-people-person .hero .hero-content .text .position {
            position: absolute;
            top: 360px;
            padding: 0 24px;
            border-bottom: none;
            font-size: 48px;
            font-weight: bold;
            letter-spacing: .2em; }
          .recruit-people-person .hero .hero-content .text .caption {
            position: absolute;
            top: 460px;
            text-align: left; }
            .recruit-people-person .hero .hero-content .text .caption .department__main, .recruit-people-person .hero .hero-content .text .caption .department__sub {
              font-weight: bold; }
            .recruit-people-person .hero .hero-content .text .caption .name {
              font-size: 26px;
              font-weight: bold;
              text-indent: 1em; }
          .recruit-people-person .hero .hero-content .text .profile {
            position: absolute;
            top: 460px;
            right: 80px;
            font-size: 12px;
            background-color: rgba(255, 255, 255, 0.4); }
            .recruit-people-person .hero .hero-content .text .profile dl {
              width: 100%;
              font-weight: bold; } }
  @media screen and (min-width: 1030px) {
    .recruit-people-person .hero {
      margin: 0 auto;
      margin-top: 48px;
      max-width: 1080px; }
      .recruit-people-person .hero .arrow-wrap {
        position: relative;
        height: 600px;
        display: block;
        width: 120px; }
        .recruit-people-person .hero .arrow-wrap a {
          width: 60px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
        .recruit-people-person .hero .arrow-wrap .arrow--left {
          margin-bottom: 4px; }
        .recruit-people-person .hero .arrow-wrap .arrow--right {
          margin-top: 4px; }
      .recruit-people-person .hero .left {
        float: left; }
      .recruit-people-person .hero .right {
        float: right; }
      .recruit-people-person .hero .hero-content {
        margin: 0 auto;
        width: 800px; } }
  .recruit-people-person .content-wrap .container {
    max-width: 520px; }
  .recruit-people-person .content-wrap .content {
    padding: 32px 0; }
    .recruit-people-person .content-wrap .content .question-list .item {
      margin: 32px 0;
      width: 100%; }
      .recruit-people-person .content-wrap .content .question-list .item dt {
        color: #009ce4;
        font-size: 18px;
        font-weight: bold; }
        .recruit-people-person .content-wrap .content .question-list .item dt span {
          display: inline-block; }
      .recruit-people-person .content-wrap .content .question-list .item dd {
        margin-top: 18px;
        line-height: 1.75em;
        letter-spacing: .15em;
        text-align: left; }
    .recruit-people-person .content-wrap .content .link-peopleList {
      margin-top: 32px;
      margin-right: 2em;
      text-align: right;
      font-weight: bold;
      letter-spacing: .05em; }
      .recruit-people-person .content-wrap .content .link-peopleList a svg {
        margin-left: .5em; }
  @media screen and (min-width: 1030px) {
    .recruit-people-person .content-wrap {
      padding-bottom: 48px; }
      .recruit-people-person .content-wrap .container {
        max-width: 1170px;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); }
        .recruit-people-person .content-wrap .container .content {
          padding: 32px 180px; } }

/*********************
recruit-gallery
ギャラリー
*********************/
.recruit-gallery .recruit-container .content main article.hentry:not(:first-child) {
  margin-top: 144px; }

.recruit-gallery .recruit-container .content main article.hentry header {
  padding: 12px;
  border-left: 18px solid #009ce4;
  font-weight: bold;
  letter-spacing: .05em; }
  .recruit-gallery .recruit-container .content main article.hentry header time {
    font-size: 12px; }
  .recruit-gallery .recruit-container .content main article.hentry header h2 {
    font-size: 18px;
    letter-spacing: .1em; }

.recruit-gallery .recruit-container .content main article.hentry .article-content p {
  padding: 32px 0;
  letter-spacing: .05em; }

@media screen and (min-width: 1030px) {
  .recruit-gallery .recruit-container .content main article.hentry header {
    padding: 12px 24px; }
    .recruit-gallery .recruit-container .content main article.hentry header h2 {
      font-size: 26px; } }

/*********************
recruit-requirement
募集要項
*********************/
.recruit-requirement .requirement-container .wrap {
  margin: 0 auto; }
  .recruit-requirement .requirement-container .wrap .tabs {
    margin: 0 auto;
    margin-bottom: 48px;
    max-width: 330px;
    text-align: center; }
    .recruit-requirement .requirement-container .wrap .tabs .tab-item {
      display: inline-block;
      width: 49%;
      padding: 1em;
      text-align: center;
      color: rgba(33, 33, 33, 0.4);
      font-weight: bold;
      letter-spacing: .1em;
      text-indent: .1em;
      box-sizing: border-box; }
      .recruit-requirement .requirement-container .wrap .tabs .tab-item + .tab-item {
        border-left: 3px solid #e0e0e0;
        margin-left: -8px; }
      .recruit-requirement .requirement-container .wrap .tabs .tab-item span {
        cursor: pointer; }
        .recruit-requirement .requirement-container .wrap .tabs .tab-item span:hover {
          color: rgba(33, 33, 33, 0.2);
          transition: .2s; }
    .recruit-requirement .requirement-container .wrap .tabs .is-active {
      color: #212121 !important; }
  .recruit-requirement .requirement-container .wrap .content {
    display: none;
    overflow: hidden; }
    .recruit-requirement .requirement-container .wrap .content section {
      letter-spacing: .1em; }
      .recruit-requirement .requirement-container .wrap .content section h2 {
        font-size: 26px;
        border-bottom: 3px solid #95989a; }
      .recruit-requirement .requirement-container .wrap .content section .list-wrapper {
        margin: 18px auto;
        width: 90%; }
        .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl {
          padding: 18px; }
          .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl dt {
            font-size: 18px;
            font-weight: bold; }
          .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl dd {
            margin-top: 6px; }
            .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl dd p {
              font-size: 14px; }
              .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl dd p ul li {
                margin-bottom: 12px; }
              .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl dd p em {
                font-size: 12px; }
      .recruit-requirement .requirement-container .wrap .content section + section {
        margin-top: 32px; }
    .recruit-requirement .requirement-container .wrap .content .requirement-entry .text-wrap {
      margin-top: 48px;
      text-align: center; }
      .recruit-requirement .requirement-container .wrap .content .requirement-entry .text-wrap .text {
        color: #ff8086;
        font-weight: bold;
        letter-spacing: .1em; }
        .recruit-requirement .requirement-container .wrap .content .requirement-entry .text-wrap .text span {
          display: inline-block; }
    .recruit-requirement .requirement-container .wrap .content .requirement-entry .btn-wrap {
      margin-top: 18px;
      padding: 16px;
      text-align: center; }

.recruit-requirement #graduate-content h2 {
  border-color: #009ce4; }

.recruit-requirement #career-content h2 {
  border-color: #ff8086; }

@media screen and (max-width: 767px) {
  .recruit-requirement {
    margin: 0 auto;
    width: 90%; } }

@media screen and (min-width: 768px) {
  .recruit-requirement .requirement-container .wrap .content {
    margin: 0 auto;
    max-width: 820px; }
    .recruit-requirement .requirement-container .wrap .content section h2 {
      padding-left: 1em;
      border-bottom: 1px solid #95989a !important; }
    .recruit-requirement .requirement-container .wrap .content section .list-wrapper {
      margin: 48px auto !important; }
      .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl {
        width: 100%;
        display: table;
        padding: 0 !important; }
        .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl dt {
          display: table-cell;
          padding: 18px;
          width: 30%;
          color: #fff;
          vertical-align: middle;
          text-align: center;
          background-color: rgba(51, 102, 255, 0.7); }
          .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl dt span {
            font-size: 14px; }
        .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl dd {
          display: table-cell;
          padding: 18px;
          width: 70%;
          vertical-align: middle;
          border: 1px solid #e0e0e0;
          border-left: none; }
          .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl dd p {
            font-size: 14px; }
        .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl:nth-child(n+1) dt {
          border-bottom: 1px solid #fff; }
        .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl:last-child dt {
          border-bottom: none; }
        .recruit-requirement .requirement-container .wrap .content section .list-wrapper dl:nth-child(n+2) dd {
          border-top: none; }
    .recruit-requirement .requirement-container .wrap .content section + section {
      margin-top: 72px !important; }
  .recruit-requirement .requirement-container #career-content dt {
    background-color: rgba(255, 87, 34, 0.7) !important; } }

/*********************
recruit-faq
採用Q&A
*********************/
.faq {
  margin: 0 auto;
  max-width: 600px; }
  .faq section {
    letter-spacing: .1em; }
    .faq section:not(:first-child) {
      margin-top: 48px; }
    .faq section h2 {
      font-size: 26px;
      border-bottom: 1px solid #95989a; }
    .faq section .list-wrapper {
      margin: 18px auto;
      width: 90%; }
      .faq section .list-wrapper li {
        font-weight: bold; }
        .faq section .list-wrapper li:not(:first-child) {
          margin-top: 36px; }
        .faq section .list-wrapper li.open > h5::before {
          content: '\25BC'; }
        .faq section .list-wrapper li .question {
          display: flex;
          cursor: pointer;
          outline: none; }
          .faq section .list-wrapper li .question::before {
            display: inline-block;
            content: '\25B6';
            padding-right: .5em;
            color: #009ce4 !important; }
          .faq section .list-wrapper li .question p {
            display: inline-block; }
        .faq section .list-wrapper li .answer {
          display: none;
          margin-top: 8px;
          padding: 8px;
          border-bottom: 1px solid #95989a; }
          .faq section .list-wrapper li .answer p {
            line-height: 1.8em;
            font-size: 14px;
            font-weight: normal; }
            .faq section .list-wrapper li .answer p:not(:first-child) {
              margin-top: 1em; }
  @media screen and (min-width: 1030px) {
    .faq section .list-wrapper {
      margin: 24px auto; } }

/*********************
recruit-entry
エントリー
*********************/
.recruit-entry {
  position: relative;
  /* ---- particles.js container ---- */ }
  .recruit-entry #particles-js {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    z-index: -1; }
  .recruit-entry .container .content {
    min-height: 100vh;
    text-align: center;
    letter-spacing: .2em;
    color: #009ce4;
    overflow: hidden; }
    .recruit-entry .container .content .title-wrap {
      margin: 48px auto; }
      .recruit-entry .container .content .title-wrap h1 {
        font-size: 72px;
        letter-spacing: .2em;
        font-weight: 900;
        font-style: italic; }
      .recruit-entry .container .content .title-wrap p span {
        display: inline-block; }
    .recruit-entry .container .content .section-wrap {
      margin: 0 auto;
      max-width: 920px; }
      .recruit-entry .container .content .section-wrap section {
        padding: 32px; }
        .recruit-entry .container .content .section-wrap section h2 {
          font-size: 26px;
          letter-spacing: .2em;
          font-weight: bold; }
        .recruit-entry .container .content .section-wrap section p {
          font-size: 11px; }
        .recruit-entry .container .content .section-wrap section .btn-wrap {
          margin-top: 24px; }
  @media screen and (min-width: 481px) {
    .recruit-entry .container .content .title-wrap h1 {
      font-size: 72px; } }
  @media screen and (min-width: 768px) {
    .recruit-entry .container .content {
      min-height: 80vh; }
      .recruit-entry .container .content .title-wrap {
        margin: 128px; } }

/*********************
ACCESS
*********************/
/*********************
access
アクセス
*********************/
.access section {
  position: relative;
  padding: 48px 0; }
  .access section:nth-of-type(even) {
    background-color: #f5f5f5; }
  .access section .access-anchor {
    position: absolute;
    top: -60px;
    display: block; }
  .access section .container .row {
    justify-content: baseline; }
  .access section .container .content {
    max-width: 420px;
    margin: 0 auto; }
    .access section .container .content .info-box {
      padding-left: 48px;
      font-weight: bold;
      letter-spacing: .05em; }
      .access section .container .content .info-box .heading-box {
        margin-left: -24px;
        padding-left: 12px;
        border-left: 12px solid #009ce4; }
        .access section .container .content .info-box .heading-box h2 {
          font-size: 26px; }
          .access section .container .content .info-box .heading-box h2 span {
            display: inline-block; }
        .access section .container .content .info-box .heading-box p {
          font-size: 12px; }
      .access section .container .content .info-box .address-box {
        margin-top: 32px; }
        .access section .container .content .info-box .address-box .nearby {
          max-width: 300px;
          margin-top: 8px;
          font-size: 12px; }
          .access section .container .content .info-box .address-box .nearby span {
            display: inline-block; }
          .access section .container .content .info-box .address-box .nearby .station {
            min-width: 60px;
            float: left; }
      .access section .container .content .info-box .number-box {
        margin-top: 18px; }
        .access section .container .content .info-box .number-box dl {
          display: inline-block; }
          .access section .container .content .info-box .number-box dl.fax {
            margin-left: 1em; }
    .access section .container .content .map-box {
      margin-top: 32px;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); }
      .access section .container .content .map-box .map-wrap {
        position: relative;
        height: 360px;
        overflow: hidden; }
        .access section .container .content .map-box .map-wrap iframe,
        .access section .container .content .map-box .map-wrap object,
        .access section .container .content .map-box .map-wrap embed {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }

@media screen and (min-width: 481px) {
  .access section .access-anchor {
    top: -130px; }
  .access section .container .content .info-box .heading-box {
    margin-left: -36px;
    padding-left: 24px;
    border-left: 12px solid #009ce4; }
    .access section .container .content .info-box .heading-box h2 {
      font-size: 32px;
      letter-spacing: .1em; } }

@media screen and (min-width: 768px) {
  .access section .container .content {
    max-width: 100%; }
    .access section .container .content .info-box .address-box dt {
      min-width: 80px; } }

/*********************
SITE MAP
*********************/
/*********************
site-map
サイトマップ
*********************/
.site-map .content {
  margin: 0 auto;
  max-width: 920px; }
  .site-map .content ul {
    list-style-type: none !important; }
    .site-map .content ul a {
      color: #0d47a1 !important; }
  .site-map .content .row > ul {
    padding: 0 2em;
    max-width: 420px;
    font-weight: bold;
    letter-spacing: .1em; }
    .site-map .content .row > ul > li {
      margin-top: 32px; }
      .site-map .content .row > ul > li h3 {
        font-size: 18px;
        padding: .5em;
        border-bottom: 1px solid #e0e0e0; }
      .site-map .content .row > ul > li > ul {
        margin-left: 1em; }
        .site-map .content .row > ul > li > ul > li::before {
          content: '- '; }
        .site-map .content .row > ul > li > ul > li ~ li {
          margin-top: .5em; }

@media screen and (min-width: 1030px) {
  .site-map .content {
    margin: 0 auto;
    max-width: 920px; }
    .site-map .content ul {
      list-style-type: none !important; }
      .site-map .content ul a {
        color: #0d47a1 !important; }
    .site-map .content .row > ul > li h3 {
      font-size: 20px; } }

/*********************
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
*********************/
@media print {
  /******************************************************************
Site Name:
Author:

Stylesheet: Print Stylesheet

This is the print stylesheet. There's probably not a lot
of reasons to edit this stylesheet. If you want to
though, go for it.

******************************************************************/
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important; }
  a, a:visited {
    color: #444 !important;
    text-decoration: underline; }
    a:after, a:visited:after {
      content: " (" attr(href) ")"; }
    a abbr[title]:after, a:visited abbr[title]:after {
      content: " (" attr(title) ")"; }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  tr, img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  @page {
    margin: 0.5cm; }
  p, h2, h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; }
  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  nav {
    display: none; } }

/*********************
SINGLE PAGE
*********************/
/*********************
single
シングルページ
*********************/
.single .container {
  margin-top: 32px;
  margin-bottom: 144px;
  max-width: 780px; }
  .single .container .info .date, .single .container .info .category {
    display: inline-block;
    font-size: 12px; }
  .single .container .info .date {
    margin-right: 1em;
    font-weight: normal; }
  .single .container .info .category {
    font-weight: bold; }
    .single .container .info .category.business {
      color: #0d47a1; }
    .single .container .info .category.product {
      color: #009688; }
    .single .container .info .category.company {
      color: #607d8b; }
    .single .container .info .category.recruit {
      color: #2196f3; }
    .single .container .info .category.gallery {
      color: #ff8086; }
    .single .container .info .category.other {
      color: #f44336; }
  .single .container .title {
    font-weight: bold;
    font-size: 24px; }
  @media screen and (min-width: 768px) {
    .single .container .title {
      font-size: 32px; } }
  .single .container .content {
    margin: 32px auto; }
    .single .container .content p {
      margin-bottom: 1em; }

/*********************
NEW LOGO
*********************/
/*********************
new-logo
*********************/
.new-logo {
  font-weight: bold; }
  .new-logo .img-wrapper {
    display: block;
    position: relative;
    margin: 32px auto;
    width: 150px;
    height: 150px; }
    .new-logo .img-wrapper img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 100%;
      max-height: 100%; }
  .new-logo .hero {
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    height: calc(100vh - 60px);
    text-align: center; }
    .new-logo .hero .logo {
      margin-top: 30vh;
      width: 80%;
      max-width: 820px; }
    .new-logo .hero .title {
      font-size: 24px;
      font-weight: bold;
      margin: 32px 0 32px; }
    .new-logo .hero h2 {
      margin: 24px; }
    .new-logo .hero .btn-wrap {
      margin: 52px auto 52px; }
    .new-logo .hero .scroll {
      padding: 32px auto;
      position: relative; }
      .new-logo .hero .scroll p {
        padding-top: 22px;
        text-align: center;
        font-weight: bold;
        color: #fff; }
      .new-logo .hero .scroll span {
        position: absolute;
        top: 0;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-left: -12px;
        border-left: 1px solid #808080;
        border-bottom: 1px solid #808080;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-animation: sdb 1.5s infinite;
        animation: sdb 1.5s infinite;
        box-sizing: border-box; }

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0; } }

@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0; } }
  .new-logo .color {
    color: #fff;
    font-weight: bold; }
    .new-logo .color .box {
      padding: 64px 32px;
      font-size: 18px; }
    .new-logo .color .blue {
      background-color: #008BD5; }
    .new-logo .color .pink-orange {
      background-color: #EB6D73; }
  .new-logo .concept {
    padding: 32px; }
    .new-logo .concept h2 {
      margin: 32px auto;
      font-size: 32px;
      font-weight: bold;
      text-align: center; }
    .new-logo .concept p {
      max-width: 620px;
      margin: 0 auto; }
    .new-logo .concept .motif-wrapper {
      margin: 72px auto; }
      .new-logo .concept .motif-wrapper .img-wrapper {
        margin: 12px auto; }
      .new-logo .concept .motif-wrapper .i-01 {
        height: 78px; }
      .new-logo .concept .motif-wrapper .i-02 {
        width: 200px;
        height: 62px; }
      .new-logo .concept .motif-wrapper .i-03 {
        height: 80px; }
      .new-logo .concept .motif-wrapper .caption {
        text-align: center; }
  .new-logo .wg {
    overflow-x: visible; }
    .new-logo .wg h3 {
      text-align: center;
      font-size: 36px;
      font-weight: bold; }
      .new-logo .wg h3 span {
        display: inline-block; }
    .new-logo .wg h4 {
      text-align: center;
      font-size: 20px;
      margin: 38px auto 4px; }
    .new-logo .wg p {
      padding: 32px;
      max-width: 620px;
      margin: 0 auto; }
    .new-logo .wg .img-wrapper {
      width: 230px; }
    .new-logo .wg .a02 {
      left: -60px; }
    .new-logo .wg .a03 {
      transform: scale(1.2); }
    .new-logo .wg .a04 {
      left: 30px;
      transform: scale(1.3); }
    .new-logo .wg .a06 {
      transform: scale(1.3); }
    .new-logo .wg .a08 {
      transform: scale(1.2); }
  .new-logo .gallery {
    background-color: #009ce4;
    margin: 64px auto;
    overflow: hidden; }
    .new-logo .gallery .carousel {
      max-width: 1560px;
      margin: 0 auto; }
      .new-logo .gallery .carousel .bg-img {
        width: 100%;
        height: 250px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden; }
      .new-logo .gallery .carousel .b01 {
        background-image: url("/wp-content/themes/mob-hp/library/images/new-logo/b01.jpg"); }
      .new-logo .gallery .carousel .b02 {
        background-image: url("/wp-content/themes/mob-hp/library/images/new-logo/b02.jpg"); }
      .new-logo .gallery .carousel .b03 {
        background-image: url("/wp-content/themes/mob-hp/library/images/new-logo/b03.jpg"); }
      .new-logo .gallery .carousel .b04 {
        background-image: url("/wp-content/themes/mob-hp/library/images/new-logo/b04.jpg"); }
      .new-logo .gallery .carousel .b05 {
        background-image: url("/wp-content/themes/mob-hp/library/images/new-logo/b05.png"); }
      .new-logo .gallery .carousel .b06 {
        background-image: url("/wp-content/themes/mob-hp/library/images/new-logo/b06.jpg"); }
  @media screen and (min-width: 1030px) {
    .new-logo .btn-wrap a {
      font-size: 14px; }
    .new-logo .hero .title {
      font-size: 28px; }
    .new-logo .hero h2 {
      margin-bottom: 72px;
      letter-spacing: 0.2em;
      font-weight: bold;
      color: #808080; }
      .new-logo .hero h2 div {
        display: inline; }
    .new-logo .hero .btn-wrap {
      margin: 52px auto 92px; }
    .new-logo .hero .scroll {
      margin-top: 84px; }
      .new-logo .hero .scroll p {
        color: #fff; }
      .new-logo .hero .scroll span {
        border-left: 1px solid #808080;
        border-bottom: 1px solid #808080; }
    @-webkit-keyframes sdb {
      100% {
        -webkit-transform: rotate(-45deg) translate(-40px, 40px);
        opacity: 0; } }
    @keyframes sdb {
      100% {
        transform: rotate(-45deg) translate(-40px, 40px);
        opacity: 0; } }
    .new-logo .color {
      display: flex; }
      .new-logo .color .box {
        width: 50%;
        padding: 180px 38px;
        font-size: 30px;
        text-align: center; }
    .new-logo .concept {
      text-align: center; }
      .new-logo .concept h2 {
        margin: 128px auto 64px;
        font-size: 64px; }
      .new-logo .concept p {
        max-width: 720px;
        margin: 0 auto;
        font-size: 18px; }
      .new-logo .concept .motif-wrapper {
        margin: 72px auto; }
        .new-logo .concept .motif-wrapper .img-wrapper {
          width: 380px;
          margin: 12px auto; }
        .new-logo .concept .motif-wrapper .i-01 {
          height: 168px; }
        .new-logo .concept .motif-wrapper .i-02 {
          width: 380px;
          height: 172px; }
        .new-logo .concept .motif-wrapper .i-03 {
          height: 190px; }
        .new-logo .concept .motif-wrapper .caption {
          text-align: center; }
    .new-logo .wg h3 {
      margin: 128px auto 64px;
      font-size: 64px; }
    .new-logo .wg h4 {
      font-size: 24px;
      margin: 38px auto; }
    .new-logo .wg p {
      max-width: 720px;
      margin: 0 auto;
      font-size: 18px; }
    .new-logo .wg .img-wrapper {
      width: 480px;
      height: 320px; }
    .new-logo .wg .a02 {
      left: -160px; }
    .new-logo .wg .a03 {
      transform: scale(1.2); }
    .new-logo .wg .a04 {
      left: 140px;
      transform: scale(1.3); }
    .new-logo .wg .a06 {
      transform: scale(1.3); }
    .new-logo .wg .a08 {
      transform: scale(1.5); }
    .new-logo .wg .a09 {
      transform: scale(1.7);
      height: 760px; }
    .new-logo .gallery {
      overflow: hidden; }
      .new-logo .gallery .carousel .bg-img {
        height: 500px; } }

/*********************
LAB
*********************/
/*********************
lab
*********************/
.lab {
  font-weight: bold; }
  .lab .img-wrapper {
    display: block;
    position: relative;
    margin: 32px auto;
    width: 150px;
    height: 150px; }
    .lab .img-wrapper img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 100%;
      max-height: 100%; }
  .lab .bg-img {
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden; }
  .lab .hero {
    background-image: url("/wp-content/themes/mob-hp/library/images/lab/hero.jpg");
    text-align: center;
    background-color: #fff;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
    .lab .hero .logo {
      margin-top: 30vh;
      width: 90%; }
    .lab .hero .title {
      font-weight: bold;
      margin: 128px 0 64px; }
      .lab .hero .title h1 {
        font-size: 36px;
        background: linear-gradient(315deg, #ff2d1e 0%, #3333ff 100%);
        display: inline-block;
        padding: 0 24px;
        text-shadow: none; }
      .lab .hero .title h2 {
        font-size: 24px;
        margin: 24px; }
        .lab .hero .title h2 span {
          display: block; }
      .lab .hero .title p {
        margin-top: 32px;
        font-size: 16px;
        padding: 18px; }
        .lab .hero .title p span {
          display: block; }
    .lab .hero .btn-wrap {
      margin: 52px auto 52px; }
    .lab .hero .scroll {
      padding: 32px auto;
      position: relative; }
      .lab .hero .scroll p {
        padding-top: 22px;
        text-align: center;
        font-weight: bold;
        color: #fff; }
      .lab .hero .scroll span {
        position: absolute;
        top: 0;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-left: -12px;
        border-left: 1px solid #808080;
        border-bottom: 1px solid #808080;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-animation: sdb 1.5s infinite;
        animation: sdb 1.5s infinite;
        box-sizing: border-box; }

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0; } }

@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: rotate(-45deg) translate(-30px, 30px);
    opacity: 0; } }
  .lab .concept {
    padding: 68px 32px;
    text-align: center; }
    .lab .concept h2 {
      font-size: 48px; }
    .lab .concept h3 {
      margin-bottom: 36px; }
    .lab .concept p {
      margin-top: 24px; }
    .lab .concept span {
      background: linear-gradient(transparent 60%, #F6ED8C 60%); }
  .lab .map picture source, .lab .map img {
    display: block;
    margin: 32px auto 0;
    width: 100%;
    max-width: 1080px; }
  .lab .space {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
    .lab .space .en {
      font-size: 48px; }
    .lab .space .ja {
      font-size: 16px; }
    .lab .space .bg-img {
      padding: 32px;
      box-sizing: border-box;
      height: 320px; }
      .lab .space .bg-img .en {
        display: inline; }
    .lab .space .text {
      margin-top: 32px; }
      .lab .space .text p {
        margin-bottom: 12px; }
    .lab .space .wrapper {
      max-width: 1080px;
      margin: 0 auto; }
    .lab .space .title {
      color: #000;
      text-shadow: none;
      margin-bottom: 8px;
      padding-left: 16px; }
      .lab .space .title h2 {
        display: inline-block; }
      .lab .space .title h3 {
        display: inline-block; }
    .lab .space .keyaki {
      background-image: url("/wp-content/themes/mob-hp/library/images/lab/keyaki.jpg"); }
      .lab .space .keyaki .en {
        background: linear-gradient(transparent 60%, #01B264 60%); }
    .lab .space .nemophila {
      background-image: url("/wp-content/themes/mob-hp/library/images/lab/nemophila.jpg"); }
      .lab .space .nemophila .en {
        background: linear-gradient(transparent 60%, #3396F4 60%); }
    .lab .space .cosmos {
      background-image: url("/wp-content/themes/mob-hp/library/images/lab/cosmos.jpg"); }
      .lab .space .cosmos .en {
        background: linear-gradient(transparent 60%, #FA679A 60%); }
    .lab .space .viola {
      background-image: url("/wp-content/themes/mob-hp/library/images/lab/viola.jpg"); }
      .lab .space .viola .en {
        background: linear-gradient(transparent 60%, #623C87 60%); }
    .lab .space .kaede {
      background-image: url("/wp-content/themes/mob-hp/library/images/lab/kaede.jpg"); }
      .lab .space .kaede .en {
        background: linear-gradient(transparent 60%, #EF3030 60%); }
    .lab .space .poppy {
      background-image: url("/wp-content/themes/mob-hp/library/images/lab/poppy.jpg"); }
      .lab .space .poppy .en {
        background: linear-gradient(transparent 60%, #F2700F 60%); }
    .lab .space .sakura {
      background-image: url("/wp-content/themes/mob-hp/library/images/lab/sakura.jpg"); }
      .lab .space .sakura .en {
        background: linear-gradient(transparent 60%, #FF97C6 60%); }
  .lab .usage {
    background-image: url("/wp-content/themes/mob-hp/library/images/lab/majid-rangraz-OO-p8TnDT34-unsplash-3.jpg");
    padding: 64px 0; }
    .lab .usage .title {
      font-weight: bold;
      font-size: 18px;
      text-align: center;
      margin: 42px auto 12px; }
      .lab .usage .title span {
        font-size: 32px; }
    .lab .usage .line {
      margin: 8px auto;
      background-color: #fff; }
    .lab .usage .item-wrapper {
      display: flex;
      flex-direction: column;
      text-align: center; }
      .lab .usage .item-wrapper .item h4 {
        margin-bottom: 32px;
        display: inline-block;
        font-weight: bold;
        font-size: 18px;
        color: #000;
        background: linear-gradient(transparent 60%, #F6ED8C 60%); }
      .lab .usage .item-wrapper .item .item-img {
        width: 150px;
        margin: 12px auto;
        text-align: center;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        border-radius: 500px;
        background-color: #fff; }
        .lab .usage .item-wrapper .item .item-img .img-wrapper {
          width: auto;
          margin: 12px 32px; }
  @media screen and (min-width: 1030px) {
    .lab .hero .title {
      margin: 256px auto 128px; }
      .lab .hero .title h1 {
        font-size: 72px; }
      .lab .hero .title h2 {
        font-size: 48px; }
      .lab .hero .title p {
        font-size: 18px; }
        .lab .hero .title p span {
          display: inline-block; }
    .lab .concept {
      margin: 128px auto; }
      .lab .concept h2 {
        font-size: 78px; }
    .lab .space .en {
      font-size: 78px; }
    .lab .space .bg-img {
      height: 640px; }
      .lab .space .bg-img .wrapper {
        margin-top: 60px; }
    .lab .usage {
      padding: 128px 0 256px; }
      .lab .usage .title span {
        font-size: 48px; }
      .lab .usage .item-wrapper {
        flex-direction: row;
        margin: 0 auto;
        max-width: 800px;
        margin-top: 32px; }
        .lab .usage .item-wrapper .item {
          width: 33%; }
          .lab .usage .item-wrapper .item .item-img {
            width: 200px; }
            .lab .usage .item-wrapper .item .item-img .img-wrapper {
              height: 200px;
              margin: 12px 42px; } }