@charset "UTF-8";
/*	com-color
サイト内で主に使用する色の変数
------------------------------------ */
/*	使用フォント一覧
------------------------------------ */
@font-face {
  font-family: "NotoSansJP-Black";
  src: url(../fonts/NotoSansJP-Black.ttf);
}
@font-face {
  font-family: "NotoSansJP-Bold";
  src: url(../fonts/NotoSansJP-Bold.ttf);
}
@font-face {
  font-family: "NotoSansJP-ExtraBold";
  src: url(../fonts/NotoSansJP-ExtraBold.ttf);
}
@font-face {
  font-family: "NotoSansJP-Medium";
  src: url(../fonts/NotoSansJP-Medium.ttf);
}
@font-face {
  font-family: "NotoSansJP-Regular";
  src: url(../fonts/NotoSansJP-Regular.ttf);
}
@font-face {
  font-family: "NotoSansJP-SemiBold";
  src: url(../fonts/NotoSansJP-SemiBold.ttf);
}
@font-face {
  font-family: "JosefinSans-Bold";
  src: url(../fonts/JosefinSans-Bold.ttf);
}
@font-face {
  font-family: "JosefinSans-ExtraLight";
  src: url(../fonts/JosefinSans-ExtraLight.ttf);
}
@font-face {
  font-family: "JosefinSans-Light";
  src: url(../fonts/JosefinSans-Light.ttf);
}
@font-face {
  font-family: "JosefinSans-Medium";
  src: url(../fonts/JosefinSans-Medium.ttf);
}
@font-face {
  font-family: "JosefinSans-Regular";
  src: url(../fonts/JosefinSans-Regular.ttf);
}
@font-face {
  font-family: "JosefinSans-SemiBold";
  src: url(../fonts/JosefinSans-SemiBold.ttf);
}
@font-face {
  font-family: "JosefinSans-Thin";
  src: url(../fonts/JosefinSans-Thin.ttf);
}
/*	transition,hover
ホバー時のtransition秒数を統一、ホバーアクション
------------------------------------ */
/*	media-screen
画面サイズごとのcss設定に使用
------------------------------------ */
@media screen and (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}
/*	layout
その他パーツ
------------------------------------ */
/*	com-color
サイト内で主に使用する色の変数
------------------------------------ */
/*	使用フォント一覧
------------------------------------ */
@font-face {
  font-family: "NotoSansJP-Black";
  src: url(../fonts/NotoSansJP-Black.ttf);
}
@font-face {
  font-family: "NotoSansJP-Bold";
  src: url(../fonts/NotoSansJP-Bold.ttf);
}
@font-face {
  font-family: "NotoSansJP-ExtraBold";
  src: url(../fonts/NotoSansJP-ExtraBold.ttf);
}
@font-face {
  font-family: "NotoSansJP-Medium";
  src: url(../fonts/NotoSansJP-Medium.ttf);
}
@font-face {
  font-family: "NotoSansJP-Regular";
  src: url(../fonts/NotoSansJP-Regular.ttf);
}
@font-face {
  font-family: "NotoSansJP-SemiBold";
  src: url(../fonts/NotoSansJP-SemiBold.ttf);
}
@font-face {
  font-family: "JosefinSans-Bold";
  src: url(../fonts/JosefinSans-Bold.ttf);
}
@font-face {
  font-family: "JosefinSans-ExtraLight";
  src: url(../fonts/JosefinSans-ExtraLight.ttf);
}
@font-face {
  font-family: "JosefinSans-Light";
  src: url(../fonts/JosefinSans-Light.ttf);
}
@font-face {
  font-family: "JosefinSans-Medium";
  src: url(../fonts/JosefinSans-Medium.ttf);
}
@font-face {
  font-family: "JosefinSans-Regular";
  src: url(../fonts/JosefinSans-Regular.ttf);
}
@font-face {
  font-family: "JosefinSans-SemiBold";
  src: url(../fonts/JosefinSans-SemiBold.ttf);
}
@font-face {
  font-family: "JosefinSans-Thin";
  src: url(../fonts/JosefinSans-Thin.ttf);
}
/*	transition,hover
ホバー時のtransition秒数を統一、ホバーアクション
------------------------------------ */
/*	media-screen
画面サイズごとのcss設定に使用
------------------------------------ */
@media screen and (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}
/*	layout
その他パーツ
------------------------------------ */
/*	font-size
スマホ時にフォントサイズを自動で変更
※13px以下は文字が読めないためPC/SP同じサイズ
------------------------------------ */
/* =========================================

    main layout  all
    PC時のみ反映させるcss

========================================= */
/*	cmn parts
------------------------------------ */
@media screen and (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}
/*	pc inner
------------------------------------ */
/* =========================================
    top  PC
    top-about
========================================= */
#top-about .inner {
  padding: 135px 0 170px;
}

/* =========================================
    top  PC
    top-banner
========================================= */
#top-banner .inner {
  padding: 120px 0;
}

/* =========================================
    top  PC
    top-charm
========================================= */
#top-charm .inner {
  padding: 150px 0 120px;
}

/* =========================================
    top  PC
    flowchart
========================================= */
#flowchart .inner {
  padding: 150px 0 120px;
}

/* =========================================
    top  PC
    top-link
========================================= */
#top-link .inner {
  padding: 120px 10px;
}

/* =========================================
    top  PC
    top-news
========================================= */
#top-news .inner {
  padding: 90px 0;
}

/* =========================================
    top  PC
    top-entry
========================================= */
#top-entry .inner {
  padding: 120px 0;
}

/* =========================================
    top  PC
    footer
========================================= */
#footer .inner {
  padding: 120px 0;
}

/* =========================================
    sub  PC
    sub-entry
========================================= */
#sub-entry .inner {
  padding: 120px 0;
}

/* =========================================
    sub  PC
    sub-work
========================================= */
#sub-work .inner {
  padding: 140px 0 120px;
}

#sub-flow .inner {
  padding: 140px 0 110px;
}

/* =========================================
    sub  PC
    sub-charm
========================================= */
#sub-charm .inner {
  padding: 150px 0 120px;
}

#sub-voice .inner {
  padding: 140px 0 120px;
}

/* =========================================
    sub  PC
    sub-recruit
========================================= */
#sub-person .inner {
  padding: 140px 0 190px;
}

#sub-banner .inner {
  padding: 90px 0 100px;
}

#sub-recruit .inner {
  padding: 140px 0 120px;
}

#sub-recruitment .inner {
  padding: 140px 0 115px;
}

/* =========================================
    sub  PC
    sub-company
========================================= */
#sub-greeting .inner {
  padding: 140px 0 120px;
}

#sub-company .inner {
  padding: 140px 0 120px;
}