@charset "UTF-8";
@import url(breakpoints.css);

:root {
  /* header */
  --var-c-header-text: #ffffff;
  --var-s-header-height: 400px;
  --var-s-header-h1: 36px;
  --var-s-header-p: 18px;
  --var-c-header-p: rgba(0, 0, 0, 0.5);
  --var-s-explanation-text: 1.5rem;
  --var-c-explanation-text: #fff;
  --var-c-explanation-back-to: rgba(57, 210, 248, 1);
  --var-c-explanation-back-from: rgba(48, 97, 96, 1);

  /* 大見出し */
  --var-c-h2-border-from: #6DA6D9;
  --var-c-h2-border-to: #1F4F7B;
  --var-s-h2-text: 2rem;

  /* TOP Message PC用 */
  --var-c-TM-back: #008ce9ec;
  --var-c-TM-midashi-text: #231815;
  --var-c-TM-nakami-text: #ffffff;
  --var-s-TM-back-height: 600px;
  --var-s-TM-text: 1.875rem;

  /* TOP Message TB・SP用 */
  --var-c-TM-back-TBSP: #e4fcff;
  --var-c-TM-text-TBSP: #0093a7;
  --var-c-TM-bordertop-TBSP: #1dc1d6;
  --var-s-TM-bordertop-TBSP: 6px;
  --var-c-TM-shadow-TBSP: rgba(0, 0, 0, 0.32);

  /* 募集職種見出し */
  --var-c-bosyuhead-border-left: #7db4e6;
  --var-s-bosyuhead-border-left: 5px;
  --var-c-bosyuhead-border-bottom: #d7d7d7;
  --var-s-bosyuhead-border-bottom: 3px;
  --var-c-bosyuhead-back: #f4f4f4;
  --var-c-bosyuhead-text: #494949;
  --var-s-bosyuhead-text: 21px;

  /* 募集要項 button PC用 */
  --var-c-bosyu-text: #1c5c9b;
  --var-s-bosyu-text: 1.6rem;
  --var-c-bosyu-back: #deecffdd;
  --var-c-bosyu-maru: #AFEEEE;
  /* 募集要項 TB・SP用 */
  --var-c-bosyu-text-TBSP: #1c5c9b;
  --var-s-bosyu-text-TBSP: 21px;
  --var-c-bosyu-back-TBSP: #deecffdd;
  --var-c-bosyu-border-bottom-TBSP: #bfcadadd;
  --var-s-bosyu-border-bottom-TBSP: 2px;
  --var-c-bosyu-shadow-TBSP: rgba(0, 0, 0, .3);

  /* マルハの魅力 */
  --var-s-appeal-height: 266px;
  --var-c-appeal-back: #1aa8a16e;
  --var-s-appeal-text-width: 886px;
  --var-s-appeal-img-width: 1000px;
  --var-s-appeal-title: 24px;
  --var-s-appeal-img-height-TB: 150px;
  --var-s-appeal-title-TB: 20px;
  --var-s-appeal-text-TB: 16px;

  /* Q&A */
  --var-c-qa-text: #1b2538;
  --var-c-q-text-hover: #00838f;
  --var-c-q-back: rgba(27, 37, 56, 0.1);
  --var-s-qaMark-text: 1.5rem;
  --var-s-plusMark-text: 1.7em;


}

/* #region ===== header ===== */
.header {
  color: var(--var-c-header-text);
  height: var(--var-s-header-height);
  background-image: url('../images/recruit/top7.png');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.header h1 {
  font-size: var(--var-s-header-h1);
  margin-bottom: 20px;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.header p {
  font-size: var(--var-s-header-p);
  background-color: var(--var-c-header-p);
  padding: 30px;
}

.head_explanation {
  font-size: var(--var-s-explanation-text);
  color: var(--var-c-explanation-text);
  background-image: linear-gradient(90deg, var(--var-c-explanation-back-to), var(--var-c-explanation-back-from));
  text-align: center;
  padding: 2%;
  background-blend-mode: overlay;
}

/* #endregion */

/* #region ===== 見出し ===== */
h2 {
  position: relative;
  padding: 1.5em 0.5em 0 0;
  font-size: var(--var-s-h2-text);
}

h2:after {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(to right, var(--var-c-h2-border-from), var(--var-c-h2-border-to));
}

/* #endregion */

/* #region ===== トップメッセージ ===== */
/* #region PC用 */
.main {
  margin-bottom: 50px;
}

.container_pc {
  width: 960px;
  margin: 0 auto;
}

.topMessage {
  width: 100%;
  padding: 36px 0;
  position: relative;
}

.topMessage .bg {
  height: var(--var-s-TM-back-height);
  background-color: var(--var-c-TM-back);
  width: 90%;
  margin: 0 auto;
}

.topMessage .itemBoxWrap {
  position: absolute;
  top: 0;
  right: 0;
}

.topMessage .itemBoxWrap .itemBox {
  width: 100%;
  margin-bottom: 80px;
}

.topMessage .itemBoxWrap .itemBox .itemFigure {
  float: right;
  height: auto;
}

.topMessage .itemBoxWrap .itemBox .itemFigure img {
  max-width: 349px;
  max-height: 50vh;
  height: auto;
  vertical-align: bottom;
}

.topMessage .itemBoxWrap .itemBox .itemDescription .itemHeading {
  font-size: var(--var-s-TM-text);
  color: var(--var-c-TM-midashi-text);
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  padding: 64px 0 16px;
}

.topMessage .itemBoxWrap .itemBox .itemDescription .itemTxt {
  color: var(--var-c-TM-nakami-text);
}

.topMessage .itemBoxWrap .itemBox .itemDescription {
  width: 52.33%;
  float: left;
  margin-left: 9.375%;
}

/* #endregion */
/* #region 携帯・タブレット対応 */
.container,
.item-list {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.centered-image {
  max-width: 100%;
  max-height: 50vh;
}

.text-center {
  color: var(--var-c-TM-text-TBSP);
  background: var(--var-c-TM-back-TBSP);
  border-top: solid var(--var-s-TM-bordertop-TBSP) var(--var-c-TM-bordertop-TBSP);
  box-shadow: 0 3px 4px var(--var-c-TM-shadow-TBSP);
  text-align: center;
  margin-top: 20px;
  padding: 0.5em 1em;
  margin: 2em 0;
}

.text-center p {
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

/* #endregion */
/* #endregion */

/* #region ===== 現在募集している職種 ===== */
.recruitment_type {
  width: 960px;
  margin: 0 auto;
}

.contact-head {
  color: var(--var-c-bosyuhead-text);
  background: var(--var-c-bosyuhead-back);
  border-left: solid var(--var-s-bosyuhead-border-left) var(--var-c-bosyuhead-border-left);
  border-bottom: solid var(--var-s-bosyuhead-border-bottom) var(--var-c-bosyuhead-border-bottom);
  font-size: var(--var-s-bosyuhead-text);
  padding: 0.4em 0.5em;
  margin: 0px;
  font-weight: bold;
}

.article-area {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.contact-over {
  margin: 10px auto;
  max-width: 720px;
}

.link-wrap {
  display: flex;
  margin-bottom: 2em;
  margin: 20px auto;
}

.explanation {
  width: 1500px;
  margin-right: 0;
  margin-bottom: 10px;
}

/* #region TB用 */
@media screen and (max-width: 1179px) {
  .article-area:active {
    transform: scale(0.95);
  }

  .recruitment_type {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .link-wrap {
    display: flex;
  }

  .explanation {
    width: 70%;
    margin: 10px 10px;
  }

  .contact-over {
    width: 600px;
    max-width: none;
  }

  .article-area {
    width: 200px;
    margin: 10px auto;
    text-align: center;
  }

}

/* #endregion */
/* #region SP用 */
@media screen and (max-width: 800px) {
  .recruitment_type {
    padding: 0 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: auto;

  }

  .link-wrap {
    display: block;
  }

  .explanation {
    width: 100%;
  }

  .contact-over {
    width: 100%;
    max-width: none;
  }

  .article-area {
    width: 200px;
    margin: 10px auto;
    text-align: center;
  }

}

/* #endregion */
/* #endregion */

/* #region ===== 募集要項 ===== */
a.btn-flat:before,
a.btn-flat:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

a.btn-flat {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

.btn,
a.btn,
button.btn {
  color: var(--var-c-bosyu-text);
  font-size: var(--var-s-bosyu-text);
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
}

/* #region PC用 */
a.btn-flat {
  background: var(--var-c-bosyu-back);
  overflow: hidden;
  padding: 15px 30px;
  border-radius: 10px;
  font-family: "游ゴシック", serif;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  background: var(--var-c-bosyu-maru);
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 143px;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-80%) translateY(-18px);
  transform: translateX(-80%) translateY(-18px);

  border-radius: 50%;
}

a.btn-flat:hover:before {
  width: 400px;
  height: 400px;
  -webkit-transform: translateX(-10%) translateY(-100px);
  transform: translateX(-10%) translateY(-100px);
}

/* #endregion */
/* #region tb・SP用ボタン*/
a.btn--tbspbosyu {
  color: var(--var-c-bosyu-text-TBSP);
  background-color: var(--var-c-bosyu-back-TBSP);
  border-bottom: 5px solid var(--var-c-bosyu-border-bottom-TBSP);
  font-size: var(--var-s-bosyu-text-TBSP);
  padding: 10%;
  border-radius: 10%;
}

a.btn--tbspbosyu:hover {
  color: var(--var-c-bosyu-text-TBSP);
  background: var(--var-c-bosyu-back-TBSP);
  border-bottom: var(--var-s-bosyu-border-bottom-TBSP) solid var(--var-c-bosyu-border-bottom-TBSP);
  margin-top: 3px;
}

a.btn--shadow {
  -webkit-box-shadow: 0 3px 5px var(--var-c-bosyu-shadow-TBSP);
  box-shadow: 0 3px 5px var(--var-c-bosyu-shadow-TBSP);
}

/* #endregion */
/* #endregion */

/* #region ===== マルハの魅力 ===== */
.enchantment {
  width: 960px;
  margin: 0 auto;
}

.inner {
  display: flex;
  margin-bottom: 30px;
}

.enchantment .inner .right_img .image {
  width: 100%;
  margin: 0;
  padding: 0;
}

.enchantment .inner .left_img .image {
  width: 100%;
  margin: 0;
  padding: 0;
}

.inner .image img {
  width: 100%;
}

.appeal_pc {
  height: var(--var-s-appeal-height);
  object-fit: cover;
}

.inner .right_text,
.inner .left_text {
  height: var(--var-s-appeal-height);
  background: var(--var-c-appeal-back);
  padding: 10px 10px 10px 20px;
  width: var(--var-s-appeal-text-width);
}

.inner .right_img,
.inner .left_img {
  width: var(--var-s-appeal-img-width);
}

.inner .title {
  font-size: var(--var-s-appeal-title);
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.inner .text {
  margin: 10px 0 0;
  padding: 0;
}

/* #region TB用 */
.item-list .item {
  background: var(--var-c-appeal-back);
  width: 90%;
  margin: 15px auto;
  padding: 0;
  box-sizing: border-box;
}

.item-list .item .image {
  height: var(--var-s-appeal-img-height-TB);
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.item-list .item .image::before {
  content: "";
  display: block;
  padding-top: 58%;
}

.item-list .item .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  object-fit: cover;
}

.item-list .item .body {
  padding: 20px;
  margin-bottom: 20px;
}

.item-list .item .title {
  font-size: var(--var-s-appeal-title-TB);
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.item-list .item .description {
  font-size: var(--var-s-appeal-text-TB);
  margin: 5px 0 0;
  padding: 0;
}

/* #endregion */
/* #endregion */

/* #region ===== Q&A ===== */
.cp_qa *,
.cp_qa *:after,
.cp_qa *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cp_qa .cp_actab {
  color: var(--var-c-qa-text);
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 0 1em 0;
}

.cp_qa .cp_actab input {
  position: absolute;
  opacity: 0;
}

/* #region 質問 */
.cp_qa .cp_actab label {
  background: var(--var-c-q-back);
  font-weight: bold;
  line-height: 1.6em;
  position: relative;
  display: block;
  margin: 0 0 0 0;
  padding: 1em 2em 1em 2.5em;
  cursor: pointer;
  text-indent: 1em;
  border-radius: 0.5em;
}

.cp_qa .cp_actab label::before {
  font-size: var(--var-s-qaMark-text);
  content: 'Q';
  font-family: serif;
  margin-left: -2em;
  padding-right: 0.5em;
}

.cp_qa .cp_actab label:hover {
  transition: all 0.3s;
  color: var(--var-c-q-text-hover);
}

/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {
  font-size: var(--var-s-plusMark-text);
  content: '＋';
  font-weight: bold;
  line-height: 2em;
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  width: 2em;
  height: 2em;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
}

/* #endregion */
/* #region 答え */
.cp_qa .cp_actab .cp_actab-content {
  position: relative;
  overflow: hidden;
  max-height: 0;
  padding: 0 0 0 2.5em;
  -webkit-transition: max-height 0.2s;
  transition: max-height 0.2s;
  border-radius: 0 0 0.5em 0.5em;
}

.cp_qa .cp_actab .cp_actab-content::before {
  font-size: var(--var-s-qaMark-text);
  content: 'A';
  font-family: serif;
  position: absolute;
  margin: 0.4em 0 0 -1em;
  padding: 0;
}

.cp_qa .cp_actab .cp_actab-content p {
  margin: 1em 1em 1em 0;
}

/* #endregion */
/* #region 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked~.cp_actab-content {
  max-height: 40em;
  border: 10px solid rgba(27, 37, 56, 0.1);
}

/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab input:checked~label {
  color: var(--var-c-q-text-hover);
  border-radius: 0.5em 0.5em 0 0;
}

/* 質問をクリックした時の+の動き */
.cp_qa .cp_actab input[type=checkbox]:checked+label::after {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

/* #endregion */
/* #endregion */