@charset "utf-8";

/*
------------------------------------------------------------------------------------------------------------
全体のCSS設定
------------------------------------------------------------------------------------------------------------
*/

body {
  background: #f5f5f5; /*PC表示外の背景色*/
  color: #333; /*全体の文字色*/
  margin: 0;
  padding: 0;
  font: 20px/1.6 "ヒラギノ角ゴシック", "Helvetica Neue", "Noto Sans JP"; /* 全体のフォント設定 */
}

html {
  scroll-behavior: smooth; /* スムーズスクロールを有効にする */
}

body img {
  max-width: 100%;
  vertical-align: bottom; /* 画像の持っている隙間をなくす */
}

p {
  font-weight: 300;
}

@media (max-width: 769px) {
  body {
    font: 15px/1.6 "ヒラギノ角ゴシック", "Helvetica Neue", "Noto Sans JP"; /* 全体のフォント設定 */
  }
}

/*
------------------------------------------------------------------------------------------------------------
リンク（全般）設定のCSS
------------------------------------------------------------------------------------------------------------
*/

a {
  color: #555; /*リンクテキストの色*/
  text-decoration: none; /* テキストの下線の非表示 */
}

a:hover .btn {
  position: relative; /*要素の位置をずらす(相対関係)*/
  top: 3pt; /*要素の位置を下に3ptずらす*/
  left: 3pt; /* 要素の位置を右に3ptずらす */
}

/*
------------------------------------------------------------------------------------------------------------
コンテナー（HPを囲むブロック）のCSS
------------------------------------------------------------------------------------------------------------
*/

#container {
  width: 1200px; /*コンテナー幅*/
  background-color: #fff; /*背景色設定*/
  border-left: 1px solid #ccc; /*左外枠の設定*/
  border-right: 1px solid #ccc; /*右外枠の設定*/
  text-align: center;
  margin: 0 auto; /*外側の余白設定*/
  overflow: hidden;
}

.container_inner {
  max-width: 900px;
  margin: 0 auto;
}

@media only screen and (max-width: 768px) {
  #container {
    width: 750px; /*コンテナー幅*/
  }

  .container_inner {
    margin: 0 40px 0 40px;
  }
}

/*
------------------------------------------------------------------------------------------------------------
spaceのCSS
------------------------------------------------------------------------------------------------------------
*/
.space_t20 {
  margin-top: 20px;
}

.space_b20 {
  margin-bottom: 20px;
}

.space_b40 {
  margin-bottom: 40px;
}

.space_b70 {
  margin-bottom: 70px;
}

/*
------------------------------------------------------------------------------------------------------------
ボタンのCSS
------------------------------------------------------------------------------------------------------------
*/
.btn_back {
  position: relative; /*親の設定*/
}

.btn {
  position: absolute; /*子の設定*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
  .btn {
    width: 82%;
    /* ボタンのサイズ調整 */
  }
}

/*
------------------------------------------------------------------------------------------------------------
ぬるま湯事務局説明
------------------------------------------------------------------------------------------------------------
*/

.overview_text {
  font-size: 23px;
  color: #676767;
  line-height: 1.8em;
}

.overview_img {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .w_50 {
    width: 50%;
  }
  .w_40 {
    width: 40%;
  }
  .w_25 {
    width: 25%;
  }

  .overview_text {
    font-size: 26px;
    letter-spacing: -0.02em;
  }
}

/*
------------------------------------------------------------------------------------------------------------
事務局に向いている方のCSS
------------------------------------------------------------------------------------------------------------
*/
.suitableperson {
  background-image: url(../images/suitableperson_pc.png);
  height: 894px;
  width: 100%;
  padding: 296px 0 0 285px;
  text-align: left;
}

.suitableperson_p {
  font-size: 23px;
  color: #676767;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 30px;
  padding-top: 20px;
}

@media screen and (max-width: 768px) {
  .suitableperson {
    background-image: url(../images/suitableperson_sp.png);
    height: 1024px;
    width: 100%;
    padding: 298px 0 0 109px;
  }

  .suitableperson_p {
    font-size: 25px;
    letter-spacing: 0.05em;
    line-height: 41px;
    padding-top: 20px;
  }

  p.suitableperson_p:nth-child(7) {
    padding-top: 12px;
  }

  p.suitableperson_p:nth-child(8) {
    padding-top: 12px;
  }
}

/*
------------------------------------------------------------------------------------------------------------
仲間の紹介
------------------------------------------------------------------------------------------------------------
*/

.voice-p {
  color: #676767;
  font-size: 19px;
  padding: 0 245px 0 245px;
  text-align: justify; /* 両端揃え */
  text-align-last: left; /* 最終行を中央揃え */
}

.voice_1 {
  background-image: url(../images/introduction01_pc.png);
  height: 572px;
  width: 100%;
  padding-top: 329px;
}

.voice_2 {
  background-image: url(../images/introduction02_pc.png);
  height: 637px;
  width: 100%;
  padding-top: 372px;
}

.voice_3 {
  background-image: url(../images/introduction03_pc.png);
  height: 639px;
  width: 100%;
  padding-top: 372px;
}

.voice_4 {
  background-image: url(../images/introduction04_pc.png);
  height: 486px;
  width: 100%;
  padding-top: 372px;
}

.voice_5 {
  background-image: url(../images/introduction05_pc.png);
  height: 543px;
  width: 100%;
  padding-top: 372px;
}

.voice_6 {
  background-image: url(../images/introduction06_pc.png);
  height: 551px;
  width: 100%;
  padding-top: 372px;
}

.voice_7 {
  background-image: url(../images/introduction07_pc.png);
  height: 530px;
  width: 100%;
  padding-top: 329px;
}

@media only screen and (max-width: 768px) {
  .voice-p {
    font-size: 26px;
    padding: 0 75px 0 75px;
    text-align: justify; /* 両端揃え */
    text-align-last: left; /* 最終行を中央揃え */
  }

  .voice_1 {
    background-image: url(../images/introduction01_sp.png);
    height: 934px;
    width: 100%;
    padding-top: 480px;
  }

  .voice_2 {
    background-image: url(../images/introduction02_sp.png);
    height: 981px;
    width: 100%;
    padding-top: 480px;
  }

  .voice_3 {
    background-image: url(../images/introduction03_sp.png);
    height: 1020px;
    width: 100%;
    padding-top: 480px;
  }

  .voice_4 {
    background-image: url(../images/introduction04_sp.png);
    height: 642px;
    width: 100%;
    padding-top: 480px;
  }

  .voice_5 {
    background-image: url(../images/introduction05_sp.png);
    height: 851px;
    width: 100%;
    padding-top: 480px;
  }

  .voice_6 {
    background-image: url(../images/introduction06_sp.png);
    height: 811px;
    width: 100%;
    padding-top: 480px;
  }

  .voice_7 {
    background-image: url(../images/introduction07_sp.png);
    height: 753px;
    width: 100%;
    padding-top: 480px;
  }
}

/*
------------------------------------------------------------------------------------------------------------
インタビュー
------------------------------------------------------------------------------------------------------------
*/

.interview_box {
  margin-bottom: 60px;
  position: relative;
}

.interview_box::before {
  position: absolute;
  display: block;
  content: "";
  background-image: url(../images/q_pc.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 47px;
  height: 41px;
  top: -19px;
  left: -23px;
}

.interview_box:nth-child(3):after {
  position: absolute;
  display: block;
  content: "";
  background-image: url(../images/before_after_pc.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 163px;
  height: 154px;
  top: 282px;
  right: -5px;
}

.interview p {
  text-align: left;
  text-align: justify; /* 両端揃え */
  text-align-last: left; /* 最終行を中央揃え */
}

.interview_title_box {
  width: 898px;
  height: 57px;
  border: 2px solid #333;
  border-radius: 5px;
}

.interview_title {
  font-size: 22px;
  font-weight: 500;
  padding-left: 37px;
  padding-top: 10px;
}

.interview_subtitle {
  color: #676767;
  font-size: 21px;
  font-weight: 600;
  padding: 15px 40px 0 40px;
}

.interview_p {
  color: #676767;
  line-height: 1.8em;
  font-size: 21px;
  padding: 15px 40px 0 40px;
}

.multiple_lines {
  line-height: 1.5em;
  padding-top: 5px;
}

.top {
  padding-top: 15px;
}

.lower_tier {
  padding-top: 5px;
}

.last {
  padding-right: 180px;
  padding-bottom: 30px;
}

@media only screen and (max-width: 768px) {
  .interview_box {
    margin-bottom: 70px;
    position: relative;
  }

  .interview_box::before {
    position: absolute;
    display: block;
    content: "";
    background-image: url(../images/q_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 47px;
    height: 41px;
    top: -19px;
    left: -25px;
  }

  .interview_box:nth-child(3):after {
    position: absolute;
    display: block;
    content: "";
    background-image: url(../images/before_after_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 137px;
    height: 127px;
    top: 680px;
    right: 40px;
  }

  .interview_title_box {
    width: 670px;
    height: 80px;
    border: 2px solid #333;
    border-radius: 5px;
  }

  .interview_title {
    font-size: 27px;
    font-weight: 600;
    padding-left: 27px;
    padding-top: 17px;
  }

  .interview_subtitle {
    font-size: 26px;
    padding: 20px 30px 0 30px;
  }

  .interview_p {
    line-height: 1.6em;
    font-size: 26px;
    padding: 20px 30px 0 30px;
  }

  .multiple_lines {
    padding-top: 10px;
  }

  .top {
    padding-top: 15px;
  }

  .lower_tier {
    padding-top: 5px;
  }

  .last {
    padding-bottom: 80px;
  }
}

/*
------------------------------------------------------------------------------------------------------------
メッセージ
------------------------------------------------------------------------------------------------------------
*/

.message-p {
  color: #676767;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.5;
  text-align: justify; /* 両端揃え */
  text-align-last: left; /* 最終行を中央揃え */
}

.left {
  padding: 0 337px 0 215px;
}

.right {
  padding: 0 215px 0 337px;
}

.message_1 {
  background-image: url(../images/message01_pc.png);
  height: 279px;
  width: 100%;
  padding-top: 95px;
}

.message_2 {
  background-image: url(../images/message02_pc.png);
  height: 305px;
  width: 100%;
  padding-top: 95px;
}

.message_3 {
  background-image: url(../images/message03_pc.png);
  height: 393px;
  width: 100%;
  padding-top: 95px;
}

.message_4 {
  background-image: url(../images/message04_pc.png);
  height: 526px;
  width: 100%;
  padding-top: 95px;
}

@media only screen and (max-width: 768px) {
  .message-p {
    font-size: 26px;
    padding: 0 73px 0 73px;
    line-height: 1.5;
    letter-spacing: -0.03em;
    text-align: justify; /* 両端揃え */
    text-align-last: left; /* 最終行を中央揃え */
  }

  .left .right {
    padding: 0 73px 0 73px;
  }

  .message_1 {
    background-image: url(../images/message01_sp.png);
    height: 381px;
    width: 100%;
    padding-top: 110px;
  }

  .message_2 {
    background-image: url(../images/message02_sp.png);
    height: 425px;
    width: 100%;
    padding-top: 110px;
  }

  .message_3 {
    background-image: url(../images/message03_sp.png);
    height: 637px;
    width: 100%;
    padding-top: 110px;
  }

  .message_4 {
    background-image: url(../images/message04_sp.png);
    height: 824px;
    width: 100%;
    padding-top: 110px;
  }
}

/*
------------------------------------------------------------------------------------------------------------
よくある質問
------------------------------------------------------------------------------------------------------------
*/
.question {
  padding-bottom: 100px;
}
.qa_box {
  padding: 42px 88px 27px 88px;
  margin: 0 127px 0 127px;
  border-bottom: 1px solid #dbd8d8;
}
.qa_head {
  font-size: 22px;
  font-weight: 500;
  text-align: left;
  position: relative;
}

.qa_head::before {
  position: absolute;
  display: block;
  content: "";
  background-image: url(../images/qa_q_pc.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 50px;
  height: 50px;
  top: -10px;
  left: -70px;
}

.qa_p {
  font-size: 21px;
  color: #676767;
  text-align: left;
  position: relative;
}

.qa_p::before {
  position: absolute;
  display: block;
  content: "";
  background-image: url(../images/qa_a_pc.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 50px;
  height: 50px;
  top: -10px;
  left: -70px;
}

@media only screen and (max-width: 768px) {
  .qa_box {
    padding: 48px 38px 53px 67px;
    margin: 0 40px 0 40px;
  }
  .qa_head {
    font-size: 27px;
    position: relative;
  }

  .qa_head::before {
    position: absolute;
    display: block;
    content: "";
    background-image: url(../images/qa_q_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    top: -10px;
    left: -70px;
  }

  .qa_p {
    font-size: 26px;
    position: relative;
  }

  .qa_p::before {
    position: absolute;
    display: block;
    content: "";
    background-image: url(../images/qa_a_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
    top: -10px;
    left: -70px;
  }
}

/*
------------------------------------------------------------------------------------------------------------
募集要項
------------------------------------------------------------------------------------------------------------
*/
.recruitment {
  padding-bottom: 100px;
}

.midashi {
  width: 270px;
  text-align: left;
  vertical-align: middle;
  font-size: 23px;
  font-weight: 600;
  border-top: 2px solid #279caa;
}

.m_top {
  border-top: none;
}

.detail {
  color: #676767;
  text-align: left;
  font-weight: 300;
  border-top: 2px solid #dbd8d8;
  font-size: 22px;
  padding: 25px 0;
}

.d_top {
  border-top: none;
}

@media only screen and (max-width: 768px) {
  .midashi {
    width: 198px;
    text-align: left;
    vertical-align: middle;
    font-size: 25px;
    font-weight: 600;
    border-top: 2px solid #279caa;
  }

  .m_top {
    border-top: none;
  }

  .detail_small {
    font-size: 21px;
  }

  .detail {
    color: #676767;
    text-align: left;
    border-top: 2px solid #dbd8d8;
    font-size: 23px;
    padding: 30px 0;
  }

  .d_top {
    border-top: none;
  }
}

/*
------------------------------------------------------------------------------------------------------------
申し込みフォームのCSS
------------------------------------------------------------------------------------------------------------
*/

form {
  background-color: #fffbe2;
  /* フォーム表、外側の背景色 */
}

.table_form {
  margin: 0 auto;
  /* フォーム表を中央に寄せる */
  width: 80%;
  /* フォーム表の幅調整 */
}

th,
.form_td {
  padding: 5px 10px;
  /* 余白調整 */
}

.table_form,
th,
.form_td {
  border: 1px solid #c9c9c9;
  border-collapse: collapse;
  /* 表の線 */
}

th {
  background-color: #f8f8f8;
  /* 背景色 */
  text-align: left;
  /* 水平方向の中央寄せ */
  vertical-align: middle;
  /* 垂直方向の中央寄せ */
  font-weight: 500;
}

.form_td {
  background-color: #ffffff;
  /* 背景色 */
  text-align: left;
}

/*送信ボタンの調整*/
.submit .pc {
  padding-top: 30px;
  padding-bottom: 30px;
  margin: auto;
}

/* td部分 */
.table_form .form_td {
  font-size: 18px;
  font-weight: 500;
  padding: 20px;
}

/* 入力部分 */
input[type="text"],
input[type="email"] {
  background: #ffffff;
  border: 1px solid #d0d0d0;
  display: block;
  font-size: 16px;
  padding: 10px 10px;
  width: 90%;
  transition: 0.8s;
  border-radius: 3px;
}

textarea {
  background: #ffffff;
  border: 1px solid #d0d0d0;
  display: block;
  font-size: 16px;
  padding: 10px 10px;
  width: 90%;
  height: 200px;
  transition: 0.8s;
  border-radius: 0;
}

.selectbox select {
  width: 90%;
  height: 3em;
  padding: 0.4em calc(0.8em + 30px) 0.4em 0.8em;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  background-color: #fff;
  color: #333333;
  font-size: 0.85em;
  cursor: pointer;
  font-weight: normal;
}

/* selectの矢印カスタマイス */
.selectbox {
  position: relative;
}

.selectbox::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 70px;
  width: 12px;
  height: 12px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
}

select {
  -webkit-appearance: none;
  appearance: none;
}

/* 必須の装飾 */
.Form-Item-Label-Required {
  border-radius: 6px;
  margin-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  width: 35px;
  display: inline-block;
  text-align: center;
  background: #e34234;
  color: #fff;
  font-size: 12px;
}

/* フォームのタイトル「お申し込みフォーム」 */
@media screen and (max-width: 768px) {
  .table_form {
    width: 90%;
  }

  .table_form th,
  .table_form tr,
  .table_form .form_td {
    border: none;
    /* ボーダーをなくす */
    display: block;
    /* スマホ用に表を並び替える */
  }

  .table_form th {
    font-size: 26px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 25px;
  }

  .table_form .form_td {
    font-size: 26px;
  }

  input[type="text"],
  input[type="email"] {
    padding: 8px 1em;
    width: 100%;
    height: 100px;
    display: block;
    margin: 0 auto;
    font-size: 1em;
  }

  textarea {
    padding: 8px 1em;
    width: 100%;
    height: 250px;
    display: block;
    margin: 0 auto;
    font-size: 1em;
  }

  .selectbox select {
    font-size: 1em;
    width: 100%;
  }

  .selectbox::after {
    top: 30px;
    right: 50px;
    width: 15px;
    height: 15px;
  }

  .submit .sp {
    padding-top: 40px;
    padding-bottom: 40px;
    display: block;
    margin: auto;
  }

  input.sp {
    width: 60%;
  }

  .Form-Item-Label-Required {
    border-radius: 6px;
    margin-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 45px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    background: #e34234;
    color: #fff;
    font-size: 18px;
  }
}

/*
------------------------------------------------------------------------------------------------------------
フッターの設定
------------------------------------------------------------------------------------------------------------
*/

footer {
  width: 100%;
  margin: 0 auto;
  font-size: 85%;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  color: #fff;
  position: relative;
  background-color: #393939;
  font-size: 90%;
}

footer a {
  color: #fff;
  margin: 10px 0;
}

footer p {
  margin: 15px 0;
}

.copy {
  color: #fff;
  font-size: 80%;
  text-align: center;
}

.copy a {
  text-decoration: underline;
  color: #ffffd0;
}

@media only screen and (max-width: 768px) {
  .footer {
    max-width: 750px;
    height: auto;
    padding-top: 0;
  }

  .footer__inner {
    text-align: left;
  }

  .footer__inner p {
    font-size: 24px;
  }

  .footer__inner a {
    padding: 5px 30px;
    color: #fff;
    padding-left: 30px;
    display: block;
    width: 100%;
  }

  .footer__inner li {
    padding: 0 10px 0 10px;
    font-size: 100%;
    border-bottom: 1px solid #ffffff;
  }

  footer p.copy {
    text-align: center;
    /*ブロック要素を中央配置*/
    padding: 40px 0;
    /*内側の余白設定*/
    font-size: 20px;
    /*文字サイズ*/
  }

  .container {
    display: flex;
    justify-content: space-between;
  }

  footer {
    /*mobile*/
    width: 100%;
    /*横幅設定*/
    font-size: 60%;
    /*文字サイズ*/
    margin-bottom: 0px;
    /*外側下の余白設定*/
  }

  .footer__inner li {
    font-size: 120%;
  }
}

/*
------------------------------------------------------------------------------------------------------------
その他
------------------------------------------------------------------------------------------------------------
*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
  display: block !important;
}
.sp {
  display: none !important;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}

@media only screen and (max-width: 768px) {
  input[type="image"] {
    padding-top: 10px;
    height: auto;
    width: 496px;
    margin: 0 auto;
  }
}