@charset "UTF-8";
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  border: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.5;
  font-weight: unset;
  font-size: inherit;
}

ol, ul {
  list-style: none;
}

*:focus {
  outline: none;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

input[type=submit],
input[type=button] {
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
}
input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}
input[type=submit]:focus,
input[type=button]:focus {
  outline-offset: -2px;
}

input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
  box-shadow: 0;
  outline: none;
  border: none;
}

textarea {
  resize: vertical;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

input {
  line-height: normal;
}

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

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

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

button {
  overflow: visible;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

select {
  border: none;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  -webkit-text-size-adjust: 100%;
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}

.pc {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
}

.wrap-12 {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .wrap-12 {
    width: 90%;
  }
}

.wrap-8 {
  max-width: 800px;
  width: 90%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .wrap-8 {
    width: 90%;
  }
}

/* 全体のコンテンツエリア（最大1400px） */
.btn-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative; /* absolute指定の基準点 */
  /* 重なり防止：PC版の高さ80pxを保持 */
  height: 80px;
}

/* ==========================================
   ボタン基本スタイル（PC版：高さ80px / 最大幅500px）
   ========================================== */
.btn-orange {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 左右中央配置 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  /* PC版サイズ設定 */
  width: 100%;
  max-width: 500px;
  height: 80px; /* PC版高さ 80px */
  padding: 0 40px;
  box-sizing: border-box;
  /* 見た目・配色 */
  background-color: #d94b11;
  border-radius: 9999px;
  text-decoration: none;
  /* 影 */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
  /* ホバーアニメーション */
  transition: opacity 0.3s ease;
}

/* テキストスタイル */
.btn-orange span {
  color: #ffffff;
  font-size: 22px; /* 高さに合わせて微調整 */
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 矢印アイコン */
.btn-orange::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #ffffff;
}

/* ホバーで80%透過 */
.btn-orange:hover {
  opacity: 0.8;
}

/* ==========================================
   画面幅1350px〜769px：比率を保ったまま縮小
   ========================================== */
@media screen and (max-width: 1350px) {
  /* 親要素の高さをボタンに同期 */
  .btn-container {
    height: 5.926vw;
  }
  .btn-orange {
    width: 37.037vw;
    height: 5.926vw; /* 1350pxのとき80px相当 */
    padding: 0 2.962vw;
    box-shadow: 0 0.592vw 1.111vw rgba(0, 0, 0, 0.25);
  }
  .btn-orange span {
    font-size: 1.63vw; /* 1350pxのとき22px相当 */
  }
  .btn-orange::after {
    right: 2.222vw;
    border-width: 0.518vw 0 0.518vw 0.889vw;
  }
}
/* ==========================================
   画面幅768px以下（SP版）：ご指定のサイズ・比率調整を反映
   ========================================== */
@media screen and (max-width: 768px) {
  /* 親要素の高さをボタン（15vw）に同期して重なりを解消 */
  .btn-container {
    height: 15vw;
  }
  .btn-orange {
    width: calc(100vw - 90px);
    max-width: none;
    height: 15vw;
    padding: 0 6vw;
    box-shadow: 0 0.8vw 1.5vw rgba(0, 0, 0, 0.25);
  }
  .btn-orange span {
    font-size: 4vw;
  }
  .btn-orange::after {
    right: 4vw;
    border-width: 1.5vw 0 1.5vw 2vw;
  }
}
.mv {
  position: relative;
  background-image: url("./../../images/bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  background-size: cover;
  padding: 80px 0 50px 0;
}
@media screen and (max-width: 768px) {
  .mv {
    padding: 50px 0 20px;
  }
}
.mv .logo {
  width: 300px;
  position: absolute;
  left: 5%;
  top: 2.5%;
}
@media screen and (max-width: 768px) {
  .mv .logo {
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.mv .logo a {
  display: block;
}
.mv_txt {
  max-width: 900px;
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .mv_txt {
    width: 100%;
  }
}

.date {
  text-align: center;
}
.date .wrap {
  margin: 0 auto;
}
.date-txt {
  color: #fff;
  font-size: 2.8rem;
}
@media screen and (max-width: 768px) {
  .date-txt {
    font-size: 1.8rem;
  }
}
.date {
  background-color: #6A3906;
  text-align: center;
  padding: 30px 0;
}
@media screen and (max-width: 768px) {
  .date {
    padding: 20px 0;
  }
}

.campaign {
  background-color: #FEF1DF;
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .campaign {
    padding: 50px 0;
  }
}

.step {
  background-color: #FAC66E;
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .step {
    padding: 50px 0;
  }
}
.step-ttl {
  max-width: 840px;
  margin: 0 auto;
  width: 90%;
}
@media screen and (max-width: 768px) {
  .step-ttl {
    width: 100%;
  }
}
.step-contain {
  margin-top: 50px;
}
@media screen and (max-width: 768px) {
  .step-contain {
    margin-top: 20px;
  }
}
.step-item {
  position: relative;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .step-item {
    margin-bottom: 20px;
  }
}
.step .btn-container {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .step .btn-container {
    bottom: 5%;
  }
}
.step .btn-container.sec {
  bottom: 10%;
}
@media screen and (max-width: 768px) {
  .step .btn-container.sec {
    bottom: 7%;
  }
}
.step .btn-container.third {
  bottom: 11%;
}
@media screen and (max-width: 768px) {
  .step .btn-container.third {
    bottom: 8%;
  }
}
.step .arrow {
  margin: 0 auto;
  width: 40px;
  margin-bottom: 70px;
}
@media screen and (max-width: 768px) {
  .step .arrow {
    margin-bottom: 25px;
  }
}

.tokuten {
  background-color: #FEF1DF;
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .tokuten {
    padding: 50px 0;
  }
}

.common-notes {
  /* 最大幅は親要素に準ずる */
  width: 100%;
  box-sizing: border-box;
  background-color: #fff; /* 画像の背景薄グレー色 */
  padding: 80px;
  color: #333333;
  line-height: 1.6;
  border-radius: 40px;
  margin-top: 50px;
}
@media screen and (max-width: 768px) {
  .common-notes {
    border-radius: 20px;
  }
}
.common-notes {
  /* ------------------------------------------
     PC版スタイル（基準値：1350px以上）
     ------------------------------------------ */
  font-size: 16px; /* 本文基準サイズ */
}
.common-notes .notes-section {
  margin-bottom: 40px;
}
.common-notes .notes-section:last-child {
  margin-bottom: 0;
}
.common-notes {
  /* 大タイトル（赤い左バー付き） */
}
.common-notes .notes-title {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.common-notes .notes-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.1em;
  background-color: #e60012; /* 赤いアクセントカラー */
  margin-right: 12px;
  flex-shrink: 0;
}
.common-notes {
  /* ●箇条書き（ぶら下げインデント：2行目以降1文字空け） */
}
.common-notes .notes-item {
  position: relative;
  padding-left: 1em; /* 1文字分の余白 */
  text-indent: -1em; /* 1行目を1文字分左へ移動（●を枠外へ） */
  margin-bottom: 10px;
}
.common-notes .notes-item::before {
  content: "●";
}
.common-notes .notes-item a {
  color: #0066cc;
  text-decoration: underline;
}
.common-notes {
  /* 給与お受取りエリアの横並び配置 */
}
.common-notes .notes-flex-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}
.common-notes .notes-flex-group .notes-text-area {
  flex: 1;
}
.common-notes {
  /* 金融機関名テーブル（CSS再現） */
}
.common-notes .bank-info-table {
  width: 360px;
  flex-shrink: 0;
  border: 1px solid #dcdcdc;
  background-color: #ffffff;
  text-align: center;
}
.common-notes .bank-info-table .bank-row {
  margin: 0;
}
.common-notes .bank-info-table .bank-row dt {
  background-color: #dbeaf6; /* 水色ヘッダー背景 */
  font-weight: bold;
  padding: 5px;
  font-size: 0.9em;
}
.common-notes .bank-info-table .bank-row dd {
  margin: 0;
  padding: 5px;
  background-color: #ffffff;
  font-size: 0.95em;
  border-bottom: 1px solid #eef2f5;
}
.common-notes .bank-info-table .bank-row:last-child dd {
  border-bottom: none;
}
.common-notes {
  /* ------------------------------------------
     画面幅 1350px〜769px：比率を保ったまま自動縮小
     ------------------------------------------ */
}
@media screen and (max-width: 1350px) and (min-width: 769px) {
  .common-notes {
    /* 1350px時に 16px 相当になる割合（16/1350 * 100 ≒ 1.185vw） */
    font-size: 1.185vw;
    padding: 2.96vw;
  }
  .common-notes .notes-section {
    margin-bottom: 2.96vw;
  }
  .common-notes .notes-title {
    /* 1350px時に 24px 相当（24/1350 * 100 ≒ 1.777vw） */
    font-size: 1.777vw;
    margin-bottom: 1.11vw;
  }
  .common-notes .notes-title::before {
    width: 0.296vw;
    margin-right: 0.888vw;
  }
  .common-notes .notes-item {
    margin-bottom: 0.74vw;
  }
  .common-notes .notes-flex-group {
    gap: 2.22vw;
  }
  .common-notes .bank-info-table {
    width: 26.66vw; /* 約360px相当 */
  }
  .common-notes .bank-info-table .bank-row dt {
    padding: 0.59vw 0.74vw;
  }
  .common-notes .bank-info-table .bank-row dd {
    padding: 0.74vw;
  }
}
.common-notes {
  /* ------------------------------------------
     画面幅 768px以下：SP版（高さを230px固定＆縦スクロール）
     ------------------------------------------ */
}
@media screen and (max-width: 768px) {
  .common-notes {
    /* SP仕様：高さを230pxに固定して縦スクロール化 */
    height: 230px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOSスクロール滑らか化 */
    padding: 20px;
    /* SP基本フォントサイズ：14px */
    font-size: 14px;
  }
  .common-notes .notes-section {
    margin-bottom: 25px;
  }
  .common-notes {
    /* SP大タイトル：18px */
  }
  .common-notes .notes-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .common-notes .notes-title::before {
    width: 3px;
    margin-right: 8px;
  }
  .common-notes .notes-item {
    margin-bottom: 8px;
  }
  .common-notes {
    /* SPでは表と文章を縦並びに切り替え */
  }
  .common-notes .notes-flex-group {
    flex-direction: column;
    gap: 15px;
  }
  .common-notes .notes-flex-group .bank-info-table {
    width: 100%; /* 横幅いっぱいに拡大 */
  }
}

.campaign02 {
  background-color: #FAC66E;
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .campaign02 {
    padding: 50px 0;
    padding-bottom: 20px;
  }
}
.campaign02-ttl {
  max-width: 840px;
  margin: 0 auto;
  width: 90%;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .campaign02-ttl {
    width: 100%;
    margin-bottom: 20px;
  }
}
.campaign02 .item-txt {
  background-color: #fff;
  padding: 50px 0;
  border: 1px solid #9A0217;
  border-radius: 0 0 20px 20px;
  margin-bottom: 50px;
}
.campaign02 .item-txt.sec {
  border: 1px solid #172A88;
}
@media screen and (max-width: 768px) {
  .campaign02 .item-txt {
    padding: 20px 0;
    margin-bottom: 30px;
  }
}
.campaign02 .item-txt .wrap {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 50px;
}
.campaign02 .item-txt .wrap.sec {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .campaign02 .item-txt .wrap.sec {
    width: 90%;
  }
}
@media screen and (max-width: 768px) {
  .campaign02 .item-txt .wrap {
    width: 90%;
    margin-bottom: 30px;
  }
}
.campaign02 .btn-container {
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .campaign02 .btn-container {
    margin-bottom: 30px;
  }
}

.footer .wrap {
  max-width: 1600px;
  width: 90%;
  margin: 0 auto;
}
.footer {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 300;
  width: 100%;
  background-color: #003894;
  padding-bottom: 120px;
}
@media screen and (max-width: 768px) {
  .footer {
    padding-bottom: 100px;
  }
}
.footer_contents {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  .footer_contents {
    font-size: 1.2rem;
    margin-bottom: 20px;
    flex-direction: column; /* 縦並びに変更 */
    gap: 10px;
  }
}
.footer .footer_txt {
  flex: 1;
}
.footer .page-top {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: bold;
  padding: 20px;
  text-decoration: none;
  border-bottom: 2px solid #ffffff;
}
@media screen and (max-width: 768px) {
  .footer .page-top {
    font-size: 1.6rem;
    padding: 10px;
  }
}
.footer .page-top .icon {
  margin-right: 10px;
  font-size: 28px;
}
@media screen and (max-width: 768px) {
  .footer .page-top .icon {
    font-size: 1.8rem;
  }
}
.footer .wrap {
  padding-top: 50px;
}
@media screen and (max-width: 768px) {
  .footer .wrap {
    padding-top: 30px;
  }
}
.footer_txt {
  margin-bottom: 30px;
  display: flex;
  -moz-column-gap: 20px;
       column-gap: 20px;
}
@media screen and (max-width: 768px) {
  .footer_txt {
    font-size: 1.4rem;
    margin-bottom: 20px;
    flex-direction: column; /* 縦並びに変更 */
    gap: 10px;
  }
}
.footer .logo-img {
  display: block;
  width: 200px;
  margin: 0 auto;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .footer .logo-img {
    width: 160px;
  }
}
.footer .copy {
  text-align: center;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .footer .copy {
    text-align: center;
    font-size: 1.2rem;
  }
}

.fixed-footer-bar {
  /* 画面下部に固定 */
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  /* 茶色背景：画面いっぱいに横幅が伸びる */
  width: 100%;
  background-color: #3d1c02; /* 深い茶色 */
  /* パディング設定（上下余白） */
  padding: 15px 0;
  box-sizing: border-box;
  /* 中央寄せ配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 影（他のコンテンツとの境界線をくっきりさせる用） */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

.fixed-btn-orange {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* PCサイズ設定：最大幅 600px */
  width: 100%;
  max-width: 600px;
  height: 60px;
  padding: 0 40px;
  box-sizing: border-box;
  /* 見た目・グラデーション背景 */
  background: linear-gradient(to right, #d94b11, #e05313);
  border-radius: 9999px;
  text-decoration: none;
  /* ボタン自体の影 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  /* アニメーション */
  transition: opacity 0.3s ease;
  /* テキスト設定 */
}
.fixed-btn-orange span {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.fixed-btn-orange {
  /* 矢印アイコン */
}
.fixed-btn-orange::after {
  content: "";
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #ffffff;
}
.fixed-btn-orange {
  /* ホバーで80%透過 */
}
.fixed-btn-orange:hover {
  opacity: 0.8;
}
.fixed-btn-orange {
  /* ------------------------------------------
     SP版（768px以下）：画面幅に合わせ左右余白20px
     ------------------------------------------ */
}
@media screen and (max-width: 768px) {
  .fixed-btn-orange {
    /* 画面幅の100%から左右余白40px（20px + 20px）を差し引く */
    width: calc(100% - 40px);
    max-width: none;
    height: 52px; /* スマホ用に高さを少し調整 */
  }
  .fixed-btn-orange span {
    font-size: 16px;
  }
  .fixed-btn-orange::after {
    right: 20px;
    border-width: 5px 0 5px 8px;
  }
}

.notes-container {
  /* PCでの最大幅を80%に設定（中央寄せ） */
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
  padding-right: 20px;
  /* 高さ250px固定 */
  height: 250px;
  /* デザイン・レイアウト（背景白・ボーダーなし） */
  box-sizing: border-box;
  background-color: #ffffff; /* 背景色：白 */
  border: none; /* ボーダー指定なし */
  /* 縦スクロール仕様 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかに */
  /* ------------------------------------------
     PC版（固定フォントサイズ：16px）
     ------------------------------------------ */
  font-size: 16px; /* 16px固定 */
  line-height: 1.6;
  color: #333333;
  /* 見出し【〜】のスタイル */
}
.notes-container .notes-heading {
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 5px;
}
.notes-container .notes-heading:first-child {
  margin-top: 0;
}
.notes-container {
  /* ●箇条書きのスタイル（ぶら下げインデント設定） */
}
.notes-container .notes-item {
  position: relative;
  padding-left: 1em; /* 1文字分の左余白 */
  text-indent: -1em; /* 1行目を1文字左へ（●を枠外に出す） */
  margin-bottom: 8px;
}
.notes-container .notes-item::before {
  content: "●";
}
.notes-container {
  /* ------------------------------------------
     SP版（768px以下：固定フォントサイズ 14px / 幅100%）
     ------------------------------------------ */
}
@media screen and (max-width: 768px) {
  .notes-container {
    max-width: 100%; /* スマホ時は画面幅に合わせる */
    font-size: 14px; /* 14px固定 */
    padding: 0 20px;
  }
  .notes-container .notes-heading {
    margin-top: 12px;
    margin-bottom: 4px;
  }
  .notes-container .notes-item {
    margin-bottom: 6px;
  }
}/*# sourceMappingURL=styles.css.map */