/**********************************************
 * 基本設定・ボックスサイジング
 **********************************************/
*,
:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

/**********************************************
 * HTML/本文のベース
 **********************************************/
html {
  max-height: 100%;
  text-align: justify;
  text-justify: inter-ideograph;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%
}

body {
  font-family: Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: #38344a;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .016em;
  line-height: 1.6;
  margin: 0;
  text-indent: .016em;
  text-rendering: auto;
  text-shadow: 0 0 3px rgba(53, 49, 69, .25);
  word-wrap: break-word
}

.nextarea,
.paro:before,
body {
  background-color: #f4f7f9
}

footer,
header {
  display: block
}

/**********************************************
 * リンク・画像
 **********************************************/
a {
  color: #4dcfe0
}

a,
a:hover {
  text-decoration: none;
  text-shadow: 0 0 0 rgba(53, 49, 69, 0)
}

a:hover {
  color: #e04da3
}

a,
a amp-img,
a img,
a:active,
a:hover {
  outline: 0
}

amp-img,
img {
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  width: 100%
}

/**********************************************
 * フォーム・ボタン
 **********************************************/
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0
}

button {
  border: 0;
  outline: none;
  overflow: visible
}

button,
select {
  text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  appearance: button;
  cursor: pointer
}

button[disabled],
html input[disabled] {
  cursor: default
}

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

input {
  line-height: normal
}

input[type=checkbox],
input[type=radio] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto
}

textarea {
  overflow: auto
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit
}

[role=button] {
  cursor: pointer
}

/**********************************************
 * グリッド・レイアウト（行・コンテナ）
 **********************************************/
.row {
  clear: both
}

.container {
  margin-left: auto;
  margin-right: auto;
  position: relative
}

.container:after,
.container:before,
.row:after,
.row:before {
  content: " ";
  display: table
}

.container:after,
.row:after {
  clear: both
}

/**********************************************
 * グリッド（列：XS）
 **********************************************/
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  min-height: 1px;
  position: relative
}

.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  float: left
}

.col-xs-12 {
  width: 100%
}

.col-xs-11 {
  width: 91.66666667%
}

.col-xs-10 {
  width: 83.33333333%
}

.col-xs-9 {
  width: 75%
}

.col-xs-8 {
  width: 66.66666667%
}

.col-xs-7 {
  width: 58.33333333%
}

.col-xs-6 {
  width: 50%
}

.col-xs-5 {
  width: 41.66666667%
}

.col-xs-4 {
  width: 33.33333333%
}

.col-xs-3 {
  width: 25%
}

.col-xs-2 {
  width: 16.66666667%
}

.col-xs-1 {
  width: 8.33333333%
}

/**********************************************
 * レスポンシブ：SM（≥768px）
 **********************************************/
@media (min-width:768px) {
  .container {
    width: 750px
  }

  .col-sm-1,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9 {
    float: left
  }

  .col-sm-12 {
    width: 100%
  }

  .col-sm-11 {
    width: 91.66666667%
  }

  .col-sm-10 {
    width: 83.33333333%
  }

  .col-sm-9 {
    width: 75%
  }

  .col-sm-8 {
    width: 66.66666667%
  }

  .col-sm-7 {
    width: 58.33333333%
  }

  .col-sm-6 {
    width: 50%
  }

  .col-sm-5 {
    width: 41.66666667%
  }

  .col-sm-4 {
    width: 33.33333333%
  }

  .col-sm-3 {
    width: 25%
  }

  .col-sm-2 {
    width: 16.66666667%
  }

  .col-sm-1 {
    width: 8.33333333%
  }
}

/**********************************************
 * レスポンシブ：MD（≥992px）
 **********************************************/
@media (min-width:992px) {
  .container {
    width: 970px
  }

  .col-md-1,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9 {
    float: left
  }

  .col-md-12 {
    width: 100%
  }

  .col-md-11 {
    width: 91.66666667%
  }

  .col-md-10 {
    width: 83.33333333%
  }

  .col-md-9 {
    width: 75%
  }

  .col-md-8 {
    width: 66.66666667%
  }

  .col-md-7 {
    width: 58.33333333%
  }

  .col-md-6 {
    width: 50%
  }

  .col-md-5 {
    width: 41.66666667%
  }

  .col-md-4 {
    width: 33.33333333%
  }

  .col-md-3 {
    width: 25%
  }

  .col-md-2 {
    width: 16.66666667%
  }

  .col-md-1 {
    width: 8.33333333%
  }
}

/**********************************************
 * レスポンシブ：LG（≥1200px）
 **********************************************/
@media (min-width:1200px) {
  .container {
    width: 1170px
  }

  .col-lg-1,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9 {
    float: left
  }

  .col-lg-12 {
    width: 100%
  }

  .col-lg-11 {
    width: 91.66666667%
  }

  .col-lg-10 {
    width: 83.33333333%
  }

  .col-lg-9 {
    width: 75%
  }

  .col-lg-8 {
    width: 66.66666667%
  }

  .col-lg-7 {
    width: 58.33333333%
  }

  .col-lg-6 {
    width: 50%
  }

  .col-lg-5 {
    width: 41.66666667%
  }

  .col-lg-4 {
    width: 33.33333333%
  }

  .col-lg-3 {
    width: 25%
  }

  .col-lg-2 {
    width: 16.66666667%
  }

  .col-lg-1 {
    width: 8.33333333%
  }
}

/**********************************************
 * 広告スペース・ユーティリティ
 **********************************************/
.adspace {
  background-color: #eaeff2;
  background-image: url(../wp-content/themes/amp_jobportal01/common/images/adentry.webp);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 132px 32px
}

.clear {
  clear: both;
  height: 0;
  visibility: hidden
}

.noshadow {
  text-shadow: 0 0 0 rgba(53, 49, 69, 0)
}

.outline_00 {
  outline: none
}

.showpc,
.sphide {
  display: block
}

.showsp {
  display: none
}

.dummylink {
  color: #4dcfe0
}

.dummylink:hover {
  color: #e04da3
}

.boxshadow {
  box-shadow: 0 10px 30px 1px rgba(44, 0, 81, .2)
}

.op05 {
  opacity: .5
}

.btn-radius-solid-wide-link a {
  position: relative;
  z-index: 9999;
  pointer-events: auto
}

/**********************************************
 * オプションボタン（肯定/否定）
 **********************************************/
.option_act {
  background-color: #fa9ce7;
  border: 2px solid #fa9ce7;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
  text-align: center;
  transition: all .2s ease;
  width: 100%
}

.option_act:after {
  background-color: #fff;
  content: "";
  height: 10px;
  margin-right: -5px;
  margin-top: -5px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  transform: rotate(-45deg);
  width: 10px
}

.option_act:hover {
  background-color: #93dae2;
  border: 2px solid #93dae2;
  color: #fff
}

.option_neg {
  background-color: hsla(0, 0%, 100%, .1);
  border: 2px solid hsla(0, 0%, 100%, 0);
  color: hsla(0, 0%, 100%, .4);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 0;
  text-align: center;
  width: 100%
}

/**********************************************
 * オプションリスト
 **********************************************/
ul.option {
  list-style: none;
  margin: 0;
  padding: 0;
  text-shadow: 0 0 0 rgba(53, 49, 69, 0)
}

ul.option li {
  float: left;
  margin: 0;
  padding: 2px;
  width: 25%
}

/**********************************************
 * 円グラフ・比率表示
 **********************************************/
.pieblock {
  border-radius: 50%;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 120px
}

.pieblock:after {
  background-color: #f6f6f6;
  border-radius: 50%;
  content: "";
  display: block;
  height: 80px;
  left: 20px;
  top: 20px;
  width: 80px
}

.pieblock:after,
.wariai {
  position: absolute;
  text-align: center
}

.wariai {
  font-size: 16px;
  font-weight: 700;
  left: 50%;
  margin-left: -60px;
  padding-top: 46px;
  top: 0;
  width: 120px;
  z-index: 1
}

.pie {
  background: #fff;
  background-image: linear-gradient(90deg, transparent 50%, #bc7ac8 0);
  border-radius: 50%;
  height: 120px;
  width: 120px
}

.pie:before {
  background-color: inherit;
  border-radius: 0 100% 100% 0/50%;
  content: "";
  display: block;
  height: 100%;
  margin-left: 50%;
  transform-origin: left
}

.deg225:before {
  background-color: #bc7ac8;
  transform: rotate(45deg)
}

.deg315:before {
  background-color: #bc7ac8;
  transform: rotate(135deg)
}

/**********************************************
 * タイトルアイコン（白/黒）
 **********************************************/
.title_w {
  background-image: url(../wp-content/themes/amp_jobportal01/common/images/icon/menu_w.svg)
}

.title_b,
.title_w {
  background-position: 0;
  background-repeat: no-repeat;
  background-size: auto 100%;
  line-height: 1;
  margin: 4px 0;
  padding-left: 26px
}

.title_b {
  background-image: url(../wp-content/themes/amp_jobportal01/common/images/icon/menu.svg)
}

/**********************************************
 * 見出し・相対配置・テキスト整形
 **********************************************/
h2,
h3 {
  font-size: 100%;
  font-weight: inherit;
  margin: 0;
  padding: 0
}

.relativebox {
  position: relative;
  z-index: 2
}

.text-center {
  text-align: center
}

/**********************************************
 * 余白ユーティリティ（SP用）
 **********************************************/
.sp-top-bottom20 {
  padding: 20px 0
}

.sp-top-bottom10 {
  padding: 10px 0
}

.sp-top40 {
  padding-top: 40px
}

.sp-top20 {
  padding-top: 20px
}

.sp-top10 {
  padding-top: 10px
}

.sp-top5 {
  padding-top: 5px
}

.sp-bottom80 {
  padding-bottom: 80px
}

.sp-bottom60 {
  padding-bottom: 60px
}

.sp-bottom40 {
  padding-bottom: 40px
}

.sp-bottom20 {
  padding-bottom: 20px
}

.sp-bottom10 {
  padding-bottom: 10px
}

.sp-bottom5 {
  padding-bottom: 5px
}

.sp20 {
  padding-left: 20px;
  padding-right: 20px
}

.sp5 {
  padding-left: 5px;
  padding-right: 5px
}

.sp10 {
  padding-left: 10px;
  padding-right: 10px
}

/**********************************************
 * アイコン・リンク（サイズ調整）
 **********************************************/
.iconsp_r {
  margin-right: 6px
}

.iconsp_c,
.iconsp_l {
  margin-left: 6px
}

.iconsp_c {
  margin-right: 6px
}

.link {
  display: inline-flex
}

.link_ss {
  height: 12px;
  vertical-align: -.05em;
  width: 12px
}

.link_n {
  height: 20px;
  vertical-align: -.15em;
  width: 20px
}

.linkimg {
  opacity: 1;
  position: relative;
  transition: .2s
}

.linkimg:hover {
  opacity: .6
}

/**********************************************
 * ボタン（グラデ/メイン）
 **********************************************/
.bg-btn {
  background: #ffbd84;
  background: -moz-linear-gradient(left, #ffbd84 0, #ff1f8e 100%);
  background: -webkit-linear-gradient(left, #ffbd84, #ff1f8e);
  background: linear-gradient(90deg, #ffbd84, #ff1f8e)
}

.btn-main {
  background-color: #ff1f8e;
  border: none;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 10px 15px 0 rgba(233, 30, 99, .15);
  box-shadow: 0 10px 15px 0 rgba(233, 30, 99, .15);
  display: inline-block;
  line-height: 56px;
  outline: 0;
  padding: 0 32px;
  position: relative
}

.lnk {
  overflow: hidden
}

.lnk,
.lnk:hover {
  color: #fff
}

.circle {
  background: hsla(0, 0%, 100%, .15);
  border-radius: 50%;
  display: block;
  height: 250px;
  position: absolute;
  right: -160px;
  top: -35%;
  -webkit-transition: .3s;
  transition: .3s;
  width: 250px
}

.lnk:hover span.circle {
  right: -140px
}

/**********************************************
 * ボタン（角丸ソリッド風リンク）
 **********************************************/
.btn-radius-solid-wide-link a {
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(top, #fdfbfb, #ebedee);
  background: linear-gradient(180deg, #fdfbfb, #ebedee);
  border: 1px solid #ccc;
  border-radius: 5px;
  -webkit-box-shadow: inset 1px 1px 1px #fff;
  box-shadow: inset 1px 1px 1px #fff;
  font-weight: 700;
  outline: none;
  text-align: center
}

.btn-radius-solid-wide-link a:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(bottom, #fdfbfb, #ebedee);
  background: linear-gradient(0deg, #fdfbfb, #ebedee)
}

.btn-radius-solid-wide-link a {
  display: block;
  width: 100%
}

.btn-radius-solid-wide-link a,
.btn-radius-solid-wide-link a:hover {
  color: #38344a;
  padding: 10px 20px
}

/**********************************************
 * 見出し下線・フォントサイズ/太さ
 **********************************************/
.headingundeline01 {
  background: -moz-linear-gradient(45deg, rgba(100, 102, 201, .85) 0, rgba(201, 100, 194, .85) 50%, rgba(209, 133, 89, .85) 100%);
  background: -webkit-linear-gradient(45deg, rgba(100, 102, 201, .85), rgba(201, 100, 194, .85) 50%, rgba(209, 133, 89, .85));
  background: linear-gradient(45deg, rgba(100, 102, 201, .85), rgba(201, 100, 194, .85) 50%, rgba(209, 133, 89, .85));
  display: block;
  height: 3px;
  width: 100%
}

.fs12 {
  font-size: 12px
}

.fs14 {
  font-size: 14px
}

.fs16 {
  font-size: 16px
}

.fs30 {
  font-size: 30px
}

.fw700 {
  font-weight: 700
}

/**********************************************
 * 色クラス・背景色
 **********************************************/
.fc_FFA500 {
  color: orange
}

.fc_544e6e {
  color: #544e6e
}

.fc_322e39 {
  color: #322e39
}

.bg_w {
  background-color: #fff
}

.bg_38344a {
  background-color: #38344a
}

.bg_777da7 {
  background: #777da7;
  color: #fff
}

/**********************************************
 * テキスト装飾・区切り・角丸
 **********************************************/
.underline {
  text-decoration: underline
}

.centerborder {
  display: block;
  height: 3px;
  margin: 20px auto;
  width: 70px
}

.radius5 {
  border-radius: 5px
}

/**********************************************
 * レビュー/評価ボックス
 **********************************************/
.blbox {
  clear: both;
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
  position: relative;
  width: 100%;
  z-index: 1
}

.ratebox {
  float: left
}

.rate,
.ratebox {
  font-size: 14px;
  overflow: hidden
}

.rate {
  letter-spacing: 0;
  position: relative
}

.rate:before {
  color: #e4e4e4;
  content: "★★★★★★★★★★";
  font-size: 14px;
  letter-spacing: 0;
  text-shadow: 0 0 0 rgba(53, 49, 69, 0)
}

.rate10,
.rate6,
.rate6-5,
.rate7,
.rate8,
.rate8-5,
.rate9,
.rate9-5 {
  color: orange;
  font-size: 14px;
  left: 0;
  letter-spacing: 0;
  overflow: hidden;
  position: absolute;
  top: 0
}

.rate10:before,
.rate6-5:before,
.rate6:before,
.rate7:before,
.rate8-5:before,
.rate8:before,
.rate9-5:before,
.rate9:before {
  content: "★★★★★★★★★★";
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0;
  text-shadow: 0 0 0 rgba(53, 49, 69, 0)
}

.rate6 {
  width: 6em
}

.rate6-5 {
  width: 6.5em
}

.rate7 {
  width: 7em
}

.rate8 {
  width: 8em
}

.rate8-5 {
  width: 8.5em
}

.rate9 {
  width: 9em
}

.rate9-5 {
  width: 9.5em
}

.rate10 {
  width: 10em
}

/**********************************************
 * ループ詳細（タイトル/内容）
 **********************************************/
.roop_qr_title {
  float: left;
  padding: 10px 5px 10px 10px;
  position: relative;
  text-align: left;
  width: 25%
}

.roop_qr_title:after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.roop_detailbox {
  clear: both;
  font-size: 16px;
  overflow: hidden;
  padding: 10px 0;
  position: relative
}

.roop_detail_title {
  float: left;
  font-weight: 700;
  padding-right: 10px;
  text-align: left;
  width: 25%
}

.roop_detail_cont {
  border-left: 3px solid #eee;
  float: left;
  padding-left: 10px;
  width: 75%
}

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

ul.roop_treatmentlist li {
  border: 1px solid orange;
  border-radius: 3px;
  color: #a36900;
  float: left;
  font-size: 12px;
  margin: 0 5px 5px 0;
  padding: 3px 6px
}

/**********************************************
 * 収入ボックス（背景/棒グラフ風）
 **********************************************/
.roop_avincomebox {
  background-color: hsla(50, 17%, 93%, .6);
  background-image: url(../wp-content/themes/amp_jobportal01/common/images/enbg.webp);
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: 290px 182px;
  border-top: 1px solid hsla(0, 0%, 89%, .8);
  overflow: hidden;
  padding-top: 20px;
  position: relative
}

.roop_avincomeboxsp {
  margin-left: auto;
  margin-right: auto;
  max-width: 80%
}

.jobnamebox {
  box-shadow: inset 0 2px #dcdcdc;
  float: left;
  font-size: 12px;
  padding-top: 10px;
  text-align: center;
  width: 25%
}

.verticalbox {
  float: left;
  height: 50px;
  margin-left: 7%;
  margin-right: 7%;
  position: relative;
  width: 11%
}

.verticalboxcontmoney {
  background: #9da3e9;
  border-radius: 5px 5px 0 0;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%
}

.par05 {
  height: 5%
}

.par05,
.par20 {
  display: inline-block
}

.par20 {
  height: 20%
}

.par40 {
  height: 40%
}

.par40,
.par45 {
  display: inline-block
}

.par45 {
  height: 45%
}

.par50 {
  height: 50%
}

.par50,
.par55 {
  display: inline-block
}

.par55 {
  height: 55%
}

.par60 {
  height: 65%
}

.par60,
.par75 {
  display: inline-block
}

.par75 {
  height: 75%
}

.par80 {
  height: 80%
}

.par80,
.par90 {
  display: inline-block
}

.par90 {
  height: 90%
}

.par100 {
  display: inline-block;
  height: 100%
}

.roop_bottombox {
  background-color: #2bb9b0;
  border-radius: 0 0 5px 5px
}

/**********************************************
 * パロボックス（見た目/色）
 **********************************************/
.paro {
  border: 2px dotted #ddd;
  border-radius: 5px;
  padding: 10px
}

.paro,
.parobox {
  position: relative
}

.parobox {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 14px 1px rgba(44, 0, 81, .2);
  display: block;
  margin-bottom: 10px;
  padding: 3px
}

ul#parobox {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0
}

ul#parobox li {
  float: left;
  height: 15px;
  margin-right: 1%;
  width: 24%
}

ul#parobox li:first-child {
  border-radius: 16px 0 0 16px
}

ul#parobox li:nth-child(n+4) {
  border-radius: 0 16px 16px 0;
  margin-right: 0;
  width: 25%
}

.parobox_75 {
  background-color: #99e429;
  background: -webkit-linear-gradient(top, #99e429, #60b500);
  background: linear-gradient(180deg, #99e429, #60b500)
}

.parobox_bl {
  background-color: #f4f4f4
}

.parocoment {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px
}

/**********************************************
 * 吹き出し・点滅アニメーション
 **********************************************/
.balloon-right {
  background: #38344a;
  color: #fff;
  float: left;
  font-size: 13px;
  font-weight: 700;
  margin: 0 10px 0 0;
  max-width: 100%;
  min-width: 90px;
  padding: 7px 5px;
  position: relative;
  text-align: center;
  text-shadow: 0 0 0 rgba(53, 49, 69, 0)
}

.balloon-right:before {
  border: 6px solid transparent;
  border-left-color: #38344a;
  content: "";
  left: 100%;
  margin-top: -6px;
  position: absolute;
  top: 50%
}

.blinking {
  animation: blinkAnime .7s infinite alternate
}

@keyframes blinkAnime {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/**********************************************
 * ロゴ・メインビジュアル背景
 **********************************************/
.logo {
  height: 164px;
  left: 30px;
  position: absolute;
  top: 22px;
  transition: .5s;
  width: 374px;
  z-index: 11
}

.mainpicture,
.topareabg:before {
  background-image: url(../wp-content/uploads/2020/11/ashifc.webp)
}

.topareabg {
  position: relative
}

.topareabg:before {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  content: "";
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  left: 0;
  opacity: .7;
  position: absolute;
  right: 0;
  top: 0
}

/**********************************************
 * ページ番号・次エリア配置
 **********************************************/
.page_nuber {
  font-size: 40px
}

.nextarea {
  margin-top: -190px;
  position: relative;
  z-index: 2
}

.nextareacont {
  padding-top: 250px
}

.largeadsp {
  margin: 0 auto 30px;
  max-width: 768px
}

.job_mainpicturearea {
  padding-left: 90px
}

/**********************************************
 * メインピクチャー内テキスト
 **********************************************/
.mainpicture_jobinfobox {
  bottom: 0;
  color: #fff;
  display: block;
  font-weight: 700;
  left: 0;
  letter-spacing: 0;
  line-height: 1.3;
  margin-bottom: 96px;
  margin-left: 96px;
  position: absolute;
  text-shadow: 0 0 10px rgba(53, 49, 69, .4);
  transition: .5s
}

.pagepicturebg {
  background: -webkit-linear-gradient(top, rgba(14, 12, 52, 0) 19%, rgba(14, 12, 52, .2) 43%, rgba(5, 5, 23, .6));
  background: linear-gradient(180deg, rgba(14, 12, 52, 0) 19%, rgba(14, 12, 52, .2) 43%, rgba(5, 5, 23, .6));
  width: 100%
}

.mainpicture_job,
.pagetitle {
  font-size: 70px
}

.mainpicture_job h2,
.pagetitle h2 {
  font-size: 70px;
  margin: 0;
  padding: 0
}

/**********************************************
 * スクロール誘導（矢印/テキスト）
 **********************************************/
.scroll {
  background-image: url(../wp-content/themes/amp_jobportal01/common/images/scroll.webp);
  background-repeat: no-repeat;
  background-size: 12px 71px;
  bottom: 3em;
  color: #333;
  height: 1em;
  left: 0;
  margin-left: -50px;
  padding-top: 80px;
  text-decoration: none;
  width: 3em;
  z-index: 6
}

.arrow,
.scroll {
  position: absolute
}

.arrow {
  animation: arrow-animation 2s ease-in-out infinite;
  border: .5px solid #333;
  height: 4em;
  margin-left: 5px;
  width: 0
}

.arrow:after {
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 10px solid #333;
  content: "";
  display: block;
  height: 10px;
  left: -2px;
  position: absolute;
  top: 100%;
  width: 1px
}

@keyframes arrow-animation {
  0% {
    height: 1em
  }

  66% {
    height: 4em
  }
}

/**********************************************
 * ページ画像・背景ブラー
 **********************************************/
.pagepicture {
  background-image: url(../wp-content/uploads/2020/11/ashifc.webp)
}

.divmainpicture,
.pagepicture {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  text-shadow: 0 0 0 rgba(53, 49, 69, 0);
  width: 100%;
  z-index: 3
}

.divmainpicture,
.pagepicture,
.pagepicturebg {
  border-radius: 4px 0 0 4px;
  height: 420px;
  transition: .5s
}

.divbg {
  position: relative
}

.divbg:before {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  content: "";
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  left: 0;
  opacity: .7;
  position: absolute;
  right: 0;
  top: 0
}

.categorybg:before,
.categorymainpicture {
  background-image: url(../wp-content/themes/amp_jobportal01/common/images/category.webp)
}

/**********************************************
 * マーカー・検索ボックス
 **********************************************/
#marker {
  height: 0;
  position: absolute;
  top: 250px;
  width: 0
}

.search_container {
  box-sizing: border-box
}

.search_container input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fafafa;
  border: 0 solid #000;
  border-radius: 4px 0 0 4px;
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  color: #38344a;
  cursor: pointer;
  float: left;
  margin: 0;
  padding: 15px 20px;
  width: 65%
}

.search_container input[type=text]:focus {
  background-color: #fffaef;
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .2);
  outline: 0
}

.search_container input[type=submit] {
  background: none;
  border: none;
  border-radius: 0 4px 4px 0;
  box-shadow: inset 1px 1px 4px transparent;
  color: #fff;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  padding: 15px 0;
  position: relative;
  text-align: center;
  width: 100%
}

/**********************************************
 * ランキングリスト
 **********************************************/
.lanking {
  margin-bottom: 20px
}

.lankingimg {
  float: left;
  position: relative;
  width: 15%
}

.lankingimg:after {
  background: #8a8171;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  height: 22px;
  left: 0;
  margin-left: -10px;
  margin-top: -10px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 22px
}

.lanking01:after {
  content: "1"
}

.lankingimg amp-img {
  height: auto;
  width: 100%
}

.lankingimgtxtbox {
  float: left;
  font-size: 18px;
  line-height: 1.4;
  width: 85%
}

.lanking a,
.lanking a:hover {
  border-radius: 5px;
  color: #38344a;
  display: block;
  padding: 10px
}

.lanking a:hover {
  background-color: #fff
}

/**********************************************
 * ページバナー・パンくず
 **********************************************/
.page_banner {
  background-color: #f0efea;
  border: 1px solid #e4e4e4;
  padding: 20px
}

.breadcrumbs_sp {
  border-top: 1px solid #c6c6c6;
  padding: 40px 0
}

ol.breadcrumbs {
  letter-spacing: normal;
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: uppercase
}

ol.breadcrumbs li {
  display: inline;
  font-size: 16px;
  margin: 0 12px 0 0;
  padding: 0
}

ol.breadcrumbs li:before {
  content: "〉";
  margin: 0 12px 0 0;
  padding: 0
}

ol.breadcrumbs li:first-child:before {
  content: "";
  margin-left: -12px
}

/**********************************************
 * フッター共通
 **********************************************/
footer {
  background: #8796ac;
  color: #fff;
  min-height: 300px;
  position: relative
}

footer a {
  color: #fff;
  text-decoration: underline
}

footer a:hover {
  color: #fff;
  text-decoration: none
}

.footerline {
  background-image: url(../wp-content/themes/amp_jobportal01/common/images/ftber.webp);
  background-size: cover;
  color: #fff;
  display: block;
  height: 6px;
  margin-top: 20px;
  text-align: center;
  width: 100%
}

.footerline_indigo {
  background-color: #4dcfe0;
  height: 2px;
  width: 100%
}

.footercommonbox {
  margin: 80px auto 0;
  overflow: hidden
}

.footercommonbox_title {
  border-bottom: 1px dashed #fff;
  margin-bottom: 4px;
  padding-bottom: 5px;
  width: 100%
}

.rgl {
  border-top: 1px dashed #fff;
  padding-top: 60px;
  width: 100%
}

.footercopi {
  font-size: 14px;
  padding: 10px 0 60px
}

/**********************************************
 * デコレーション「Thanks」セクション
 **********************************************/
.requirements {
  padding-top: 60px;
  position: relative
}

.requirements:before {
  color: #e7ebf2;
  content: "Thanks";
  font-size: 700%;
  font-weight: 700;
  left: 50%;
  line-height: 1;
  position: absolute;
  text-shadow: 0 0 0 rgba(53, 49, 69, 0);
  text-transform: capitalize;
  top: 0;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%)
}

/**********************************************
 * レスポンシブ微調整（≤1199px）
 **********************************************/
@media only screen and (max-width:1199px) {
  .logo {
    height: 136px;
    left: 40px;
    top: 34px;
    width: 310px
  }

  .page_nuber {
    font-size: 38px
  }

  .mainpicture_jobinfobox {
    margin-bottom: 78px;
    margin-left: 78px
  }

  .mainpicture_job,
  .mainpicture_job h2,
  .pagetitle,
  .pagetitle h2 {
    font-size: 64px
  }

  .nextarea {
    margin-top: -190px
  }

  .lankingimg {
    width: 16%
  }

  .lankingimgtxtbox {
    width: 84%
  }
}

/**********************************************
 * レスポンシブ微調整（≤991px）
 **********************************************/
@media only screen and (max-width:991px) {
  .logo {
    height: 88px;
    left: 25px;
    top: 23px;
    width: 200px
  }

  .scroll {
    bottom: 2.5em;
    margin-left: -34px
  }

  .mainpicture_jobinfobox {
    margin-bottom: 46px;
    margin-left: 46px
  }

  .mainpicture_job,
  .pagetitle {
    font-size: 56px
  }

  .job_mainpicturearea {
    padding: 60px 0 0 60px
  }

  .nextarea {
    margin-top: -160px
  }

  .nextareacont {
    padding-top: 180px
  }

  .largeadsp {
    margin: 30px auto
  }

  .divmainpicture,
  .pagepicture,
  .pagepicturebg {
    height: 380px
  }

  .sphide {
    display: none
  }

  .requirements {
    padding-top: 0;
    position: relative
  }

  .requirements:before {
    content: ""
  }
}

/**********************************************
 * レスポンシブ微調整（≤767px・-webkit対策）
 **********************************************/
@media only screen and (max-width:767px) and (-webkit-min-device-pixel-ratio:0) {
  .divbg:before {
    content: "";
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    opacity: .7
  }
}

/**********************************************
 * レスポンシブ微調整（≤767px）
 **********************************************/
@media only screen and (max-width:767px) {

  .roop_detailbox,
  body {
    font-size: 18px
  }

  .showpc {
    display: none
  }

  .showsp {
    display: block
  }

  .sp-top40 {
    padding-top: 20px
  }

  .sp-bottom80 {
    padding-bottom: 60px
  }

  .sp-bottom60 {
    padding-bottom: 40px
  }

  .sp-bottom40 {
    padding-bottom: 20px
  }

  .link_ss {
    height: 12px;
    vertical-align: -.12em;
    width: 12px
  }

  .link_n {
    height: 16px;
    vertical-align: -.15em;
    width: 16px
  }

  .linkimg:hover {
    opacity: 1
  }

  .fs30 {
    font-size: 24px
  }

  .mainpicture_job,
  .mainpicture_job h2,
  .pagetitle,
  .pagetitle h2 {
    font-size: 36px
  }

  .page_nuber {
    font-size: 24px
  }

  .arrow {
    height: 3em
  }

  @keyframes arrow-animation {
    0% {
      height: 1em
    }

    66% {
      height: 3em
    }
  }

  .divmainpicture,
  .pagepicture,
  .pagepicturebg {
    height: 280px
  }

  .roop_avincomeboxsp {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%
  }

  .roop_avincomebox {
    background-size: 160px 100px
  }

  .verticalbox {
    height: 40px
  }

  ol.breadcrumbs li {
    font-size: 14px
  }

  .footercommonbox {
    margin: 60px auto 0
  }

  .topareabg:before {
    content: "";
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    opacity: .7
  }
}

/**********************************************
 * レスポンシブ微調整（≤479px）
 **********************************************/
@media only screen and (max-width:479px) {
  .logo {
    height: 79px;
    left: 10px;
    top: 7px;
    width: 180px
  }

  .page_nuber {
    font-size: 20px
  }

  .job_mainpicturearea {
    padding: 40px 0 0 40px
  }

  .mainpicture_jobinfobox {
    margin-bottom: 20px;
    margin-left: 20px
  }

  .pagetitle,
  .pagetitle h2 {
    font-size: 26px
  }

  .mainpicture_job,
  .mainpicture_job h2 {
    font-size: 30px
  }

  .scroll {
    background-size: 10px 59px;
    bottom: 1.5em;
    margin-left: -24px;
    padding-top: 70px
  }

  .arrow {
    height: 2.2em
  }

  @keyframes arrow-animation {
    0% {
      height: .5em
    }

    66% {
      height: 2.2em
    }
  }

  .nextarea {
    margin-top: -120px
  }

  .nextareacont {
    padding-top: 150px
  }

  .largeadsp {
    margin: 20px auto
  }

  .divmainpicture,
  .pagepicture,
  .pagepicturebg {
    height: 190px
  }

  .lankingimgtxtbox {
    font-size: 16px
  }
}

/**********************************************
 * レスポンシブ微調整（≤321px）
 **********************************************/
@media only screen and (max-width:321px) {

  .roop_detailbox,
  body {
    font-size: 14px
  }

  .mainpicture_job,
  .mainpicture_job h2,
  .pagetitle,
  .pagetitle h2 {
    font-size: 25px;
    padding-bottom: 5px
  }
}