@charset "UTF-8";
/*================================================================
 *FILE          :page.css
 *DESCRIPTION   :resetはressを使用。環境変数とmixinは_mixin.scss内に記述。
                 それぞれfoundationよりインポート。
 *AUTHOR        :
 *--------------------------------------------------------------
 *(C)
=================================================================*/
/* フォント定設
-----------------------------------------------------------------*/
@font-face {
  font-family: 'MyYuGothicM';
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
  /* 游ゴシックMediumが存在しないWindows8.1用 */ }

@font-face {
  font-family: 'MyYuGothicM';
  font-weight: bold;
  src: local("YuGothic-Bold"), local("Yu Gothic Bold");
  /* PostScript Nameを認識できないChrome用にFull Nameを指定 */ }

@font-face {
  font-family: 'MyYuMinchoM';
  font-weight: normal;
  src: local("YuMincho-Medium"), local("Yu Mincho Medium"), local("YuMincho-Regular");
  /* 游明朝Mediumが存在しないWindows8.1用 */ }

@font-face {
  font-family: 'MyYuMinchoM';
  font-weight: bold;
  src: local("YuMincho-Demibold"), local("Yu Mincho");
  /* PostScript Nameを認識できないChrome用にFull Nameを指定 */ }

/* イージング
-----------------------------------------------------------------*/
/* デュレーション
-----------------------------------------------------------------*/
/*================================================================
 *FILE					:_components.scss
 *DESCRIPTION   :全ページ共通コンポーネント カスタムCSS
 *AUTHOR				:
 *--------------------------------------------------------------
 *(C)
=================================================================*/
.l-contents {
  font-family: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
  .l-contents p {
    -webkit-font-feature-settings: inherit;
    font-feature-settings: inherit; }

@media print, screen and (max-width: 767px) {
  .p-section-frame + .p-section-frame {
    margin: 80px auto 0; } }

@media print, screen and (min-width: 768px) {
  .p-section-frame + .p-section-frame {
    margin: 48px auto 0; } }

p, span, a, h3, h2 {
  -webkit-font-feature-settings: inherit;
  font-feature-settings: inherit; }

@media print, screen and (max-width: 767px) {
  a:active, a:focus, a:hover {
    opacity: 1; } }

/* 共通パーツ
-----------------------------------------------------------------*/
/* ボタン
-----------------------------------------------------------------*/
@media print, screen and (max-width: 767px) {
  .btn-container {
    display: -ms-grid;
    display: grid;
    gap: 24px;
    margin: 40px auto 0; } }

@media print, screen and (min-width: 768px) {
  .btn-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 73px auto 0;
    gap: 11px 22px; } }

@media print, screen and (min-width: 768px) {
  .p-btn {
    width: 280px;
    letter-spacing: 0.2em; } }

.btn--with-icon .btn-text {
  position: relative;
  display: inline-block; }
  @media print, screen and (max-width: 767px) {
    .btn--with-icon .btn-text {
      padding: 0 16px 0px 0;
      -webkit-font-feature-settings: inherit;
      font-feature-settings: inherit;
      letter-spacing: 0.17em; } }
  @media print, screen and (min-width: 768px) {
    .btn--with-icon .btn-text {
      padding-right: 20px; } }
  .btn--with-icon .btn-text .c-externaLink {
    stroke: #94a1ae;
    fill: #94a1ae; }
    @media print, screen and (max-width: 767px) {
      .btn--with-icon .btn-text .c-externaLink {
        position: absolute;
        top: 0;
        right: -1px;
        bottom: 0;
        margin: auto 0;
        -webkit-transition-timing-function: cubic-bezier(0.3, 0.4, 0.1, 1);
        transition-timing-function: cubic-bezier(0.3, 0.4, 0.1, 1);
        -webkit-transition-duration: 0.2s;
        transition-duration: 0.2s; } }
    @media print, screen and (min-width: 768px) {
      .btn--with-icon .btn-text .c-externaLink {
        position: absolute;
        top: 0;
        right: -1px;
        bottom: 0;
        margin: auto 0;
        -webkit-transition-timing-function: cubic-bezier(0.3, 0.4, 0.1, 1);
        transition-timing-function: cubic-bezier(0.3, 0.4, 0.1, 1);
        -webkit-transition-duration: 0.2s;
        transition-duration: 0.2s; } }
  .btn--with-icon .btn-text .c-internalLink {
    stroke: #F25387;
    fill: #F25387; }
    @media print, screen and (max-width: 767px) {
      .btn--with-icon .btn-text .c-internalLink {
        position: absolute;
        top: 0;
        right: -2px;
        bottom: 0;
        margin: auto 0;
        -webkit-transition-timing-function: cubic-bezier(0.3, 0.4, 0.1, 1);
        transition-timing-function: cubic-bezier(0.3, 0.4, 0.1, 1);
        -webkit-transition-duration: 0.2s;
        transition-duration: 0.2s;
        width: 8.5px;
        height: 9px; } }
    @media print, screen and (min-width: 768px) {
      .btn--with-icon .btn-text .c-internalLink {
        position: absolute;
        top: 0;
        right: -2px;
        bottom: 0;
        margin: auto 0;
        -webkit-transition-timing-function: cubic-bezier(0.3, 0.4, 0.1, 1);
        transition-timing-function: cubic-bezier(0.3, 0.4, 0.1, 1);
        -webkit-transition-duration: 0.2s;
        transition-duration: 0.2s;
        width: 8px;
        height: 8px; } }

.clear-btn {
  color: #F25387;
  text-align: center;
  display: block;
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-transition-timing-function: cubic-bezier(0.3, 0.4, 0.1, 1);
  transition-timing-function: cubic-bezier(0.3, 0.4, 0.1, 1);
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  border-radius: 30px;
  backdrop-filter: blur(9.5px);
  font-size: 14px;
  border: solid 2px #F25387;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  @media print, screen and (max-width: 767px) {
    .clear-btn {
      width: 282px;
      height: 62px;
      margin: 0 auto;
      padding: 2px 0 0; } }
  @media print, screen and (min-width: 768px) {
    .clear-btn {
      font-size: 14px;
      width: 282px;
      height: 62px;
      letter-spacing: 0.14em;
      padding: 23px 0; } }
  .clear-btn:visited {
    color: #F25387; }
  .clear-btn:focus {
    opacity: 1; }

/* カラム
-----------------------------------------------------------------*/
/* タイトル
-----------------------------------------------------------------*/
/* アーカイブ（記事一覧ページ）
-----------------------------------------------------------------*/
/* 近くの都道府県で探す
-----------------------------------------------------------------*/
/* キーワード（タグ）
-----------------------------------------------------------------*/
/* 最近チェックした職場 / ◯◯件の他の職場
-----------------------------------------------------------------*/
/* 地域から職場を探す（アコーディオン）
-----------------------------------------------------------------*/
/* モーダル
-----------------------------------------------------------------*/
body.is-fixed {
  overflow: hidden;
  height: 100vh; }

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.46);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  @media print, screen and (min-width: 768px) {
    .modal {
      padding: 40px 20px; } }

.modal:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  margin-left: -0.2em; }

.modal.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  overflow: hidden; }

/* サイドカラム　会社紹介
-----------------------------------------------------------------*/
/* 記事（親・子共通）ページ　コンバージョンボタン
-----------------------------------------------------------------*/
/* 記事（親・子共通）ページ　ページトップ
-----------------------------------------------------------------*/
/* 記事（親・子共通）ページ　特集 / おすすめ記事
-----------------------------------------------------------------*/
/* 子記事ページ　プロフィール　（個人インタビュー / 一日の流れ）
-----------------------------------------------------------------*/
/* パンくず
-----------------------------------------------------------------*/
/* オートページャー
-----------------------------------------------------------------*/
/* 親記事へのページトップ
-----------------------------------------------------------------*/
/* 他の共通クラスまとめ
-----------------------------------------------------------------*/
@media print, screen and (max-width: 767px) {
  .p-btn {
    width: 280px; } }

@media print, screen and (min-width: 768px) {
  .p-btn {
    width: 280px;
    letter-spacing: 0.2em; } }

@media print, screen and (max-width: 767px) {
  .l-index-kv .l-index-kv__read .title {
    font-size: 9.46667vw; } }

@media print, screen and (max-width: 767px) {
  .index .s-headline {
    margin-top: 38px;
    letter-spacing: 0.07em;
    line-height: 1.5em; } }

@media print, screen and (min-width: 768px) {
  .index .s-headline {
    line-height: 1.5em; } }

@media print, screen and (max-width: 767px) {
  .index .s-about {
    margin-bottom: 96px; } }

@media print, screen and (min-width: 768px) {
  .index .s-about {
    padding-bottom: 40px; } }

.index .s-about .flex .about__body .text {
  font-weight: bold; }
  @media print, screen and (min-width: 768px) {
    .index .s-about .flex .about__body .text {
      margin-top: 50px;
      letter-spacing: 0.12em;
      margin-bottom: 44px; } }

@media print, screen and (max-width: 767px) {
  .index .s-product {
    margin-bottom: 96px; } }

@media print, screen and (min-width: 768px) {
  .index .s-product {
    padding-bottom: 40px; } }

@media print, screen and (max-width: 767px) {
  .index .s-product .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    margin: 39px auto 0; } }

@media print, screen and (min-width: 768px) {
  .index .s-product .flex {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 80px auto 0;
    max-width: 950px; } }

@media print, screen and (max-width: 767px) {
  .index .s-product .flex .product__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; } }

@media print, screen and (min-width: 768px) {
  .index .s-product .flex .product__body {
    min-width: 353px; } }

@media print, screen and (min-width: 768px) {
  .index .s-product .flex .product__body .tapple-img {
    display: inline-block;
    width: 320px;
    height: auto;
    margin-top: 0; } }

.index .s-product .flex .product__body .text {
  font-weight: bold; }
  @media print, screen and (max-width: 767px) {
    .index .s-product .flex .product__body .text {
      font-size: 14px;
      line-height: 2.14286;
      margin-top: 24px;
      margin-bottom: 24px;
      text-align: center;
      letter-spacing: 0.05em; } }
  @media print, screen and (min-width: 768px) {
    .index .s-product .flex .product__body .text {
      margin-top: 30px;
      margin-bottom: 42px;
      font-size: 16px;
      line-height: 2;
      letter-spacing: 0.05em; } }

@media print, screen and (max-width: 767px) {
  .index .s-product .flex .product__thumb .swiper {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc(100vw - 32px);
    -webkit-animation: transform 25s ease-in-out infinite both alternate;
    animation: transform 25s ease-in-out infinite both alternate;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; } }

@media print, screen and (min-width: 768px) {
  .index .s-product .flex .product__thumb .swiper {
    position: relative;
    z-index: 1;
    width: 470px;
    height: 470px;
    -webkit-animation: transform 25s ease-in-out infinite both alternate;
    animation: transform 25s ease-in-out infinite both alternate;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; } }

@media print, screen and (max-width: 767px) {
  .index .s-product .flex .product__thumb .swiper .swiper-slide {
    width: 100%;
    height: calc(100vw - 32px); } }

@media print, screen and (min-width: 768px) {
  .index .s-product .flex .product__thumb .swiper .swiper-slide {
    width: 470px;
    height: 470px; } }

@media print, screen and (max-width: 767px) {
  .index .s-product .flex .product__thumb {
    position: relative;
    padding-bottom: 54px; } }

@media print, screen and (min-width: 768px) {
  .index .s-product .flex .product__thumb {
    margin-right: 0;
    padding-bottom: 0;
    margin-left: 0; } }

@media print, screen and (max-width: 767px) {
  .index .s-product .flex .product__thumb .img-iphone {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 54vw;
    height: auto;
    margin: 0 auto; } }

@media print, screen and (min-width: 768px) {
  .index .s-product .flex .product__thumb .img-iphone {
    position: absolute;
    z-index: 3;
    right: -32px;
    bottom: 1px;
    display: inline-block;
    width: 241px;
    height: auto; } }

@media print, screen and (max-width: 767px) {
  .index .s-action {
    margin-bottom: 96px; } }

@media print, screen and (max-width: 767px) {
  .index .s-action .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse; } }

@media print, screen and (min-width: 768px) {
  .index .s-action .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; } }

@media print, screen and (max-width: 767px) {
  .index .s-action .flex .action__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; } }

@media print, screen and (min-width: 768px) {
  .index .s-action .flex .action__body {
    min-width: 348px; } }

.index .s-action .flex .action__body .text {
  font-weight: bold; }
  @media print, screen and (max-width: 767px) {
    .index .s-action .flex .action__body .text {
      font-size: 14px;
      line-height: 2.14286;
      margin-top: 24px;
      margin-bottom: 24px;
      text-align: center;
      letter-spacing: 0.05em; } }
  @media print, screen and (min-width: 768px) {
    .index .s-action .flex .action__body .text {
      font-size: 15px;
      line-height: 2.13333;
      margin-top: 39.5px;
      margin-bottom: 47.5px;
      letter-spacing: 0.1em; } }

@media print, screen and (max-width: 767px) {
  .index .s-action .flex .action__thumb {
    position: relative; } }

@media print, screen and (min-width: 768px) {
  .index .s-action .flex .action__thumb {
    position: relative;
    margin-left: -10vw; } }

.index .s-action .flex .action__thumb .cover {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

@media print, screen and (max-width: 767px) {
  .index .s-action .flex .action__thumb .swiper {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc(100vw - 32px);
    -webkit-animation: transform 25s ease-in-out infinite both alternate;
    animation: transform 25s ease-in-out infinite both alternate;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; } }

@media print, screen and (min-width: 768px) {
  .index .s-action .flex .action__thumb .swiper {
    position: relative;
    z-index: 1;
    width: 680px;
    height: 680px;
    -webkit-animation: transform 25s ease-in-out infinite both alternate;
    animation: transform 25s ease-in-out infinite both alternate;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; } }

@media print, screen and (max-width: 767px) {
  .index .s-action .flex .action__thumb .swiper .swiper-slide {
    width: 100%;
    height: calc(100vw - 32px); } }

@media print, screen and (min-width: 768px) {
  .index .s-action .flex .action__thumb .swiper .swiper-slide {
    width: 680px;
    height: 680px; } }

.index .s-action .flex .action__thumb .thumb-img.thumb-img--1 {
  background-image: url(../images/pc/top/img_action1.jpg); }

.index .s-action .flex .action__thumb .thumb-img.thumb-img--2 {
  background-image: url(../images/pc/top/img_action2.jpg); }

.index .s-action .flex .action__thumb .thumb-img.thumb-img--3 {
  background-image: url(../images/pc/top/img_action3.jpg); }

.index .s-product .flex .product__thumb .thumb-img.thumb-img--1,
.index .s-product .flex .product__thumb .thumb-img.thumb-img--2,
.index .s-product .flex .product__thumb .thumb-img.thumb-img--3 {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover; }

.index .s-action .flex .action__thumb .thumb-img.thumb-img--1,
.index .s-action .flex .action__thumb .thumb-img.thumb-img--2,
.index .s-action .flex .action__thumb .thumb-img.thumb-img--3 {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover; }

@media print, screen and (min-width: 768px) {
  .index .s-recruit .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-flow: row-reverse;
    flex-flow: row-reverse;
  }
  .index .s-recruit .flex .recruit__thumb {
    margin-left: -10vw;
  }
  .index .s-recruit .flex .recruit__body .text {
  font-weight: bold;
}
  .index .s-recruit .flex .recruit__body .text {
    margin-top: 50px;
  }
}