@charset "utf-8";
/* font-family: "Zen Maru Gothic"; */

/* ・画面幅が最低320pxまでレスポンシブの設定をする
（ブレイクポイントは1024px 768px 480px） */

/* 色の変数　　例）color: var(--white); */
:root {
  --black: #000000;
  --white: #ffffff;
  --lightyellow: #fff5e0;
  --yellow: #fef1aa;
  --yellow01: #ffeabf;
  --brown: #42210b;
  --red: #d51e21;
  --orange: #ffba4a;
  --orange02: #e7b619;
  --orange03: #f18624;
  --orange04: #ff9e00;
  --pink: #ffe4de;
  --rightgreen: #dcf0c4;
  --green: #72b233;
}

:root {
  --header-height: 100px;
}
html {
  scroll-behavior: smooth; /* CSSだけで滑らかに移動できる */
}

body {
  font-family: "Zen Maru Gothic";
  font-weight: 500;
}

main {
  margin-top: var(--header-height);
}

/*******************************************************
ヘッダー
*******************************************************/

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 15;
  background-color: var(--lightyellow);
  padding-left: 25px;
  padding-right: 27px;
  transition: background-color 0.3s ease;
}

.header-inner {
  display: flex;

  height: 100%;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-logo img {
  max-width: 105px;
  width: 100%;
  display: block;
}

.recruit {
  display: flex;
  background-color: var(--white);
  border-radius: 30px;
  width: 274px;
  height: 60px;
  justify-content: center;
  align-items: center;
}

.header-text {
  font-size: 19px;
  color: var(--brown);
  text-align: justify;
  letter-spacing: 0.05em;
  font-weight: bold;
}

.header-right {
  display: flex;
  justify-content: flex-end;
  gap: 30px;
}

@media (max-width: 768px) {
  .header {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* スクロール後のクラス */
  .header.scrolled {
    background-color: transparent; /* 透明化 */
  }

  .header-left {
    gap: 0;
  }

  .header-logo img {
    width: 80%;
  }

  .recruit {
    width: 220px;
    height: 50px;
  }

  .header-text {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .header-logo img {
    width: 75%;
  }

  .recruit {
    width: 200px;
    margin-left: -16px;
  }

  .header-text {
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .header-logo img {
    width: 70%;
  }

  .recruit {
    width: 190px;
    height: 45px;
  }

  .header-text {
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .header {
    padding-left: 10px;
  }

  .header-logo img {
    width: 65%;
  }

  .recruit {
    width: 150px;
    margin-left: -25px;
  }

  .header-text {
    font-size: 12px;
  }
}
/* ↓↓↓↓↓↓↓↓↓↓ハンバーガー↓↓↓↓↓↓↓↓↓↓ */
.hamburger {
  position: relative;
  z-index: 15;
  cursor: pointer; /* マウスカーソルをポインタにする */
  transition: all 0.4s;
  height: 64px;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 線のスタイル */
.hamburger span {
  display: block;
  width: 43px;
  height: 2.4px;
  display: block;
  background-color: var(--red);
  position: absolute;
  transition: all 0.4s;
}

/* 各線の位置 */
.hamburger span:nth-of-type(1) {
  top: 25%;
}
.hamburger span:nth-of-type(2) {
  top: 50%;
}
.hamburger span:nth-of-type(3) {
  top: 75%;
}

/* ハンバーガーがアクティブ時 */
.hamburger.active span:nth-of-type(2) {
  opacity: 0;
}

.hamburger.active span:nth-of-type(1),
.hamburger.active span:nth-of-type(3) {
  top: 28px; /* 上下の線を中央に */
  background-color: var(--red);
}

.hamburger.active span:nth-of-type(1) {
  transform: rotate(-45deg);
}

.hamburger.active span:nth-of-type(3) {
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  .hamburger {
    position: fixed;

    height: 55px;
    width: 55px;

    transform: translateY(-50%);
  }

  .hamburger span {
    width: 38px;
  }
}

@media (max-width: 480px) {
  .hamburger {
    height: 50px;
    width: 50px;
  }

  .hamburger span {
    width: 35px;
  }
}
/* ↓↓↓↓↓↓↓↓↓↓ハンバーガー内メニュー↓↓↓↓↓↓↓↓↓↓ */

/* マスクはデフォルト非表示 */
.burger-mask {
  z-index: 5;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

/* .js-active で表示 */
.burger-mask.js-active {
  display: block;
}

.navi {
  position: fixed; /* 画面に固定配置 */
  top: 0; /* 上端に配置 */
  right: -400px;
  max-width: 400px;
  width: 100%;
  height: 100%; /* 高さを画面全体に */
  background-color: var(--lightyellow);
  border-left: var(--red) solid 2px;

  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 10; /* ハンバーガーボタンより後ろに表示 */
  visibility: hidden; /* 初期状態は非表示 */
  transition: all 0.6s; /* 表示切り替えを0.6秒かけて滑らかにする */
}

.navi.active {
  visibility: visible; /* 表示にする */
  right: 0;
}

.menu {
  text-align: center;
  padding-top: 50px;
}

.menu-list {
  display: flex; /* フレックス化 */
  flex-direction: column;
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  color: var(--brown);
  text-decoration: none;
  line-height: 1.5;
  padding-top: 20px;
  min-height: 60px; /* ボタンの高さを指定 */
  border-bottom: var(--red) solid 2px;
  width: min(100%, 300px); /* 幅は画面幅の100%か最大700pxまでに制限 */
  margin: 0 auto; /* 上下の余白0、左右は自動で中央寄せ */
}

.menu-text {
  font-size: clamp(20px, 2.5vw, 30px);
}

.menu-text-jp {
  font-size: clamp(15px, 2.5vw, 18px);
  padding-bottom: 10px;
}

.menu-list:hover {
  opacity: 0.7; /* ホバー時に少し薄くする */
}

li .round-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
}

.section1 {
  scroll-margin-top: 50px;
}

.section2,
.section3,
.section5 {
  scroll-margin-top: 80px;
}

.section4 {
  scroll-margin-top: 40px;
}

@media (max-width: 1024px) {
  .section1 {
    scroll-margin-top: 0px;
  }

  .section2,
  .section3 {
    scroll-margin-top: 60px;
  }
}

@media (max-width: 768px) {
  .section1 {
    scroll-margin-top: -70px;
  }

  .section4 {
    scroll-margin-top: 30px;
  }

  .section2,
  .section3,
  .section5 {
    scroll-margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .section1 {
    scroll-margin-top: -45px;
  }
}

@media (max-width: 360px) {
  .section1 {
    scroll-margin-top: -50px;
  }

  .section2,
  .section3,
  .section5 {
    scroll-margin-top: 40px;
  }
}

@media (max-width: 340px) {
  .menu {
    padding-top: 30px;
  }

  .menu-list {
    padding-top: 5px;
  }

  li .round-btn {
    padding-top: 30px;
  }
}
/*******************************************************
mv
*******************************************************/
.top {
  position: relative;
  background-color: var(--lightyellow);
  padding-top: 27px;
}

.top-box {
  position: absolute;
  max-width: 740px;
  width: 100%;
  background-color: var(--white);
  border-radius: 50px;
  top: 78%;
  left: 12%;
  z-index: 10;
}

.top-txt {
  color: var(--brown);
  font-size: 38px;
  font-weight: 800;
  text-align: justify;
  display: flex;
  justify-content: center;

  letter-spacing: 0.1em;
  line-height: 1.5;

  padding: 42px 44px;
}

.br-590 {
  display: none;
}

.dots-01 {
  background-image: radial-gradient(
    circle at center,
    #ff6991 25%,
    transparent 30%
  );
  background-position: top left;
  background-repeat: repeat-x;
  background-size: 1em 0.5em;
  padding-top: 0.4em;
}

.dots-02 {
  background-image: radial-gradient(
    circle at center,
    #fe8602 25%,
    transparent 30%
  );
  background-position: top left;
  background-repeat: repeat-x;
  background-size: 1em 0.5em;
  padding-top: 0.4em;
}

.dots-03 {
  background-image: radial-gradient(
    circle at center,
    #00bcab 25%,
    transparent 30%
  );
  background-position: top left;
  background-repeat: repeat-x;
  background-size: 1em 0.5em;
  padding-top: 0.4em;
}

.dots-04 {
  background-image: radial-gradient(
    circle at center,
    #40b8eb 25%,
    transparent 30%
  );
  background-position: top left;
  background-repeat: repeat-x;
  background-size: 1em 0.5em;
  padding-top: 0.4em;
}

@media (max-width: 1024px) {
  .top-box {
    left: 7%;
  }
}

@media (max-width: 900px) {
  .top-box {
    width: 80%;
  }

  .top-txt {
    font-size: clamp(23px, 3.5vw, 36px);
    padding: 30px 10px;
  }
}

@media (max-width: 767px) {
  .top-box {
    width: 75%;
    top: 90%;
    left: 11%;
  }

  .top-txt {
    padding: 35px 10px;
  }
}

@media (max-width: 590px) {
  .top-box {
    width: 75%;
    top: 90%;
    left: 13%;
  }

  .top-txt {
    font-size: 27px;
    padding: 35px 10px;
  }

  .br-590 {
    display: block;
  }
}

@media (max-width: 493px) {
  .top-box {
    top: 80%;
  }
  .top-txt {
    font-size: 24px;
  }
}

@media (max-width: 375px) {
  .top-box {
    width: 90%;
    left: 5%;
  }

  .top-txt {
    font-size: 22px;
    padding: 23px 10px;
  }
}

/* ↓↓↓↓↓↓↓↓↓↓スライダー↓↓↓↓↓↓↓↓↓↓ */
/* メインビジュアル */

.mv {
  display: flex;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.slide-pic {
  flex: 0 0 auto;
  width: 545px;
  margin-right: 40px;
}

.slide-pic img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .slide-pic {
    width: 300px;
    margin-right: 20px;
  }
}

/*******************************************************
共通/ボタン
*******************************************************/
.section-inner {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .section-inner {
    padding-right: max(5%, 20px);
    padding-left: max(5%, 20px);
  }
}

.tight {
  letter-spacing: -0.5em;
}

.parent-ttl {
  text-align: center;
}

.section-ttl {
  color: var(--brown);
  font-size: 65px;
  font-weight: 800;
}

.ttl-jp {
  color: var(--brown);
  font-size: 26px;
  font-weight: 800;
}

@media (max-width: 768px) {
  .ttl-jp {
    padding-top: 10px;
  }

  .parent-ttl-sp {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .section-ttl {
    font-size: 53px;
  }

  .ttl-jp {
    color: var(--brown);
    font-size: 25px;
  }
}

@media (max-width: 380px) {
  .section-ttl {
    font-size: 50px;
  }

  .ttl-jp {
    color: var(--brown);
    font-size: 23px;
  }
}
/* ↓↓↓↓↓↓↓↓↓↓ボタン↓↓↓↓↓↓↓↓↓↓ */

.btn {
  display: block;
  background-color: var(--red);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-align: center;
}

.btn:hover {
  opacity: 0.8;
}
/* *************ヘッダー************* */
.entry-btn {
  position: relative;
  width: 100%;
  max-width: 220px;
  color: var(--white);
  font-size: 23px;
  padding: 20px 70px;
  border-radius: 50px;
}

/* 矢印 */
.btn.entry-btn::before,
.btn.entry-btn::after {
  position: absolute; /* ボタン内での絶対配置 */
  top: 50%; /* ボタンの縦中央に配置 */
  right: 13px; /* ボタン右端から13pxの位置 */
  content: ""; /* 疑似要素を表示させるために必須 */
}

/* 横棒（::before） */
.btn.entry-btn::before {
  background-color: var(--white); /* 横棒の色 */
  width: 12px; /* 横棒の長さ */
  height: 2px; /* 横棒の太さ */
  transform: translateY(-50%); /* 中央補正（margin-top: 0px不要にできる） */
}

/* 矢印の先端（::after） */
.btn.entry-btn::after {
  width: 8px; /* 矢印の斜め部分の大きさ */
  height: 8px;
  margin-top: -4px; /* 縦位置を中央に補正 */
  transform: rotate(45deg); /* 正方形を45度回転させて矢印っぽくする */
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 860px) {
  .header-entry {
    display: none;
  }
}

/* *************2.セクション************* */
.sarch-btn {
  position: relative;
  width: 100%;
  max-width: 448px;
  height: 80px;
  color: var(--white);
  font-size: 21px;

  margin: 0 auto;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 矢印 */
.btn.sarch-btn::before,
.btn.sarch-btn::after {
  position: absolute; /* ボタン内での絶対配置 */
  top: 50%; /* ボタンの縦中央に配置 */
  right: 13px; /* ボタン右端から13pxの位置 */
  content: ""; /* 疑似要素を表示させるために必須 */
}

/* 横棒（::before） */
.btn.sarch-btn::before {
  background-color: var(--white); /* 横棒の色 */
  width: 16px; /* 横棒の長さ */
  height: 2px; /* 横棒の太さ */
  transform: translateY(-50%); /* 中央補正（margin-top: 0px不要にできる） */
}

/* 矢印の先端（::after） */
.btn.sarch-btn::after {
  width: 10px; /* 矢印の斜め部分の大きさ */
  height: 10px;
  margin-top: -4.5px; /* 縦位置を中央に補正 */
  transform: rotate(45deg); /* 正方形を45度回転させて矢印っぽくする */
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
  display: inline-block;
  vertical-align: middle;
}

.br-470 {
  display: none;
}

@media (max-width: 470px) {
  .br-470 {
    display: block;
  }
}

@media (max-width: 430px) {
  .sarch-btn {
    font-size: 17px;
  }
}

/* *************5.セクション************* */

.bottom-btn {
  position: relative;
  max-width: 386px;
  width: 100%;
  height: 96px;
  color: var(--white);
  font-size: 21px;
  padding: 0 63px;
  margin: 0 auto;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.square-bottom {
  display: flex;
  justify-content: center;
  gap: 44px;
  padding-top: 50px;
}

/* 矢印 */
.btn.bottom-btn::before,
.btn.bottom-btn::after {
  position: absolute; /* ボタン内での絶対配置 */
  top: 50%; /* ボタンの縦中央に配置 */
  right: 13px; /* ボタン右端から13pxの位置 */
  content: ""; /* 疑似要素を表示させるために必須 */
}

/* 横棒（::before） */
.btn.bottom-btn::before {
  background-color: var(--white); /* 横棒の色 */
  width: 23px; /* 横棒の長さ */
  height: 2px; /* 横棒の太さ */
  transform: translateY(-50%); /* 中央補正（margin-top: 0px不要にできる） */
}

/* 矢印の先端（::after） */
.btn.bottom-btn::after {
  width: 12px; /* 矢印の斜め部分の大きさ */
  height: 12px;
  margin-top: -6px; /* 縦位置を中央に補正 */
  transform: rotate(45deg); /* 正方形を45度回転させて矢印っぽくする */
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
  display: inline-block;
  vertical-align: middle;
}

.br-523 {
  display: none;
}

@media (max-width: 860px) {
  .square-bottom {
    display: block;

    padding-top: 0px;
  }
  .bottom-btn {
    margin-bottom: 20px;
  }
}

@media (max-width: 550px) {
  .bottom-btn {
    position: relative;

    width: 70%;
    height: 70px;
    font-size: 17px;
  }
}

@media (max-width: 523px) {
  .br-523 {
    display: block;
  }

  .bottom-btn {
    padding: 0 37px;
  }

  .bottom-btn {
    font-size: 16px;
  }

  /* 横棒（::before） */
  .btn.bottom-btn::before {
    width: 18px; /* 横棒の長さ */
  }
}

@media (max-width: 336px) {
  .bottom-btn {
    font-size: 14px;
  }
}

/*******************************************************
1.セクション
*******************************************************/
.section1 {
  background-color: var(--lightyellow);
  background-image: url(../img/1-message/back-ground.png);

  background-repeat: repeat-x;
  background-size: min(50%, 200px);
  background-position-y: 70%;
  padding-top: 118px;
  padding-bottom: 118px;
}

@media (max-width: 1024px) {
  .section1 {
    padding-top: 190px;
  }
}

@media (max-width: 560px) {
  .section1 {
    background-image: url(../img/1-message/back-ground-sp.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1400px 1000px; /* ←固定サイズで表示 */
    background-position-y: 80%;
  }
}

@media (max-width: 493px) {
  .section1 {
    padding-top: 150px;
  }
}

.ttl-1 {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.ttl-1::before {
  content: "";
  display: inline-block;
  position: absolute;
  max-width: 150px;
  width: 100%;
  height: 150px;
  background: url("../img/1-message/section-item.png") no-repeat center/contain;
  vertical-align: middle;
  transform: translate(-50%, -50%);
  top: 20%;
  left: -39%;
  z-index: -1;
}

@media (max-width: 1300px) {
  .ttl-1::before {
    left: -30%;
  }
}

@media (max-width: 1250px) {
  .ttl-1::before {
    left: 119%;
  }
}

@media (max-width: 768px) {
  .ttl-1::before {
    left: -35%;
  }
}

@media (max-width: 540px) {
  .ttl-1::before {
    width: 50%;
    left: -25%;
  }
}

@media (max-width: 360px) {
  .ttl-1::before {
    width: 47%;
    top: -86%;
    left: -37%;
    transform: rotate(27deg); /* 時計回りに45度回転 */
  }
}

.message-box {
  position: relative;
  max-width: 754px;
  width: 100%;
  height: 988px;
  margin: 0 auto;
  background-image: url("../img/1-message/rice.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 50px;
}

/* 柿の種とハッピーターン */
.message-box::before {
  content: "";
  position: absolute;
  max-width: 365px;
  width: 100%;
  height: 350px;
  background: url("../img/1-message/pic-item1.png") no-repeat center/contain;
  top: -18%;
  left: 68%;
  z-index: 2;
}

.message-box::after {
  content: "";
  position: absolute;
  max-width: 365px;
  width: 100%;
  height: 350px;
  background: url("../img/1-message/pic-item2.png") no-repeat center/contain;
  bottom: -2%;
  right: 86%;
  z-index: 2;
}

@media (max-width: 1146px) {
  .message-box::after {
    bottom: -172px;
    right: 60%;
  }
}

@media (max-width: 846px) {
  .message-box::before {
    left: 54%;
  }
}

@media (max-width: 768px) {
  .message-box::before {
    width: 85%;
    top: 0%;
    left: 44%;
  }

  .message-box::after {
    width: 85%;
    bottom: -130px;
    right: 50%;
  }
}

@media (max-width: 554px) {
  .message-box::before {
    width: 50%;
    top: -5%;
  }

  .message-box::after {
    width: 50%;
  }
}

@media (max-width: 460px) {
  .message-box::after {
    bottom: -178px;
  }
}

@media (max-width: 380px) {
  .message-box::before {
    top: -9%;
  }

  .message-box::after {
    bottom: -200px;
  }
}

/* 柿の種とハッピーターン */

.message-txt {
  color: var(--white);
  font-size: 23px;
  /* font-size: clamp(11px, 2.5vw, 23px); */
  line-height: 2.2;
  max-width: 533px;
  width: 100%;
  margin: 0 auto;
  padding-top: 85px;
}

.rice-inner {
  text-align: justify;
  margin-bottom: 23px;
  text-decoration-line: underline; /* アンダーライン */
  text-decoration-color: var(--orange);
  text-decoration-thickness: 3px; /* 線の太さ */
  text-underline-offset: 12px; /* 文字との距離 */
}

@media (max-width: 768px) {
  .br-768-non {
    display: none;
  }

  .message-box {
    background-size: cover;
  }

  .message-txt {
    font-size: 17px;
  }
}

@media (max-width: 600px) {
  .rice-inner {
    text-underline-offset: 5px;
  }
}

@media (max-width: 592px) {
  .br-592-non {
    display: none;
  }
}

@media (max-width: 481px) {
  .message-txt {
    margin-top: 65px;
  }

  .rice-inner {
    margin-bottom: 50px;
  }
}

@media (max-width: 423px) {
  .message-txt {
    width: 100%;
    padding-top: 61px;
  }

  .rice-inner {
    text-decoration-thickness: 2px;
  }
}

@media (max-width: 412px) {
  .rice-inner {
    margin-bottom: 30px;
  }
}

@media (max-width: 335px) {
  .message-txt {
    line-height: 1.9;
  }
}
/*******************************************************
2.セクション
*******************************************************/
.section2 {
  padding-top: 89px;
  padding-bottom: 137px;
}

@media (max-width: 768px) {
  .section2 {
    padding-top: 80px;
    padding-bottom: 60px;
  }
}

.ttl-2 {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.ttl-2::after {
  content: "";
  display: inline-block;
  position: absolute;
  max-width: 150px;
  width: 100%;
  height: 150px;
  background: url("../img/2-about-job/section-item.png") no-repeat
    center/contain;
  vertical-align: middle;
  transform: translate(50%, -50%);
  top: 16%;
  left: 75%;
  z-index: -1;
}

@media (max-width: 768px) {
  .ttl-2::after {
    top: -4%;
    left: 69%;
  }
}

@media (max-width: 540px) {
  .ttl-2::after {
    width: 43%;
  }
}

@media (max-width: 400px) {
  .ttl-2::after {
    top: -20%;
    left: 60%;
  }
}

.about-box {
  padding: 60px 56px 85px 56px;

  margin-top: 58px;

  background-color: var(--pink);
  border-radius: 95px;
}

.inner-top {
  display: flex;
  justify-content: space-between;
  gap: 52px;
  padding-bottom: 30px;
}

.inner-left {
  max-width: 420px;
  width: 100%;
}

.left-pic {
  width: 420px;
}

.left-ttl {
  display: inline-block;
  background-color: var(--red);
  color: var(--white);
  font-size: 32px;
  font-weight: 600;
  line-height: 42px;
  border-radius: 10px;
  padding: 0 13px 2px 13px;
  margin: 31px 0 15px 0;
}

.left-heading {
  color: var(--red);
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 28px;
}

.left-txt {
  color: var(--brown);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.9;
}

.right-item {
  width: 381px;
}

.schedule-ttl {
  max-width: 196px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 15px;
}

/*  スケジュール*/
.schedule-inner {
  position: relative;
  font-size: 14px;
}

.schedule-inner ul {
  display: flex; /* 横並び */
}

.schedule-inner li {
  display: flex; /* li 内も横並びに */
  flex-direction: column; /* 時間と内容を縦に積む */
  align-items: center;
  flex: 0 0 auto; /* 幅を自動にせず内容に合わせる */
  max-width: 824px;
  width: 20%;
}

.schedule_time {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 5.5em;
  height: 5.5em;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--red);
  border: var(--red) solid 3px;
  text-align: center;
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 15px;
}

.vertical {
  display: inline-block;
  transform: rotate(90deg) scaleY(-1); /* 90度回転させる */
  line-height: 1;
}

ul > li:not(:last-child) .schedule_time::before {
  content: "";
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 143%;
  width: 85%;
  height: 4px; /* 線の太さ */
  background-color: var(--red);
}

.schedule_content {
  text-align: center;
}

.schedule_content_detail {
  font-size: 15px;
  color: var(--brown);
  text-align: center;
  line-height: 1.6;
  font-weight: 800;
}

.charm {
  position: relative;
  background-color: var(--white);
  border-radius: 50px;
  max-width: 878px;
  width: 100%;
  height: 263px;
  padding: 30px 58px;
  margin-top: 41px;
  margin-bottom: 72px;
  z-index: 1;
}

.charm::after {
  content: "";
  position: absolute;
  bottom: 0%; /* 下からの位置 */
  right: 5%; /* 右からの位置 */
  width: 150px; /* 画像の幅 */
  height: 263px; /* 画像の高さ */
  background: url("../img/2-about-job/job-back.png") no-repeat center/contain;
  z-index: 2;
}

.charm-ttl {
  position: relative;
  color: var(--brown);
  font-size: 30px;
  font-weight: 800;
  text-align: center;
  padding-bottom: 26px;
  z-index: 3;
}

.charm-txt {
  position: relative;
  color: var(--red);
  font-size: 24px;
  font-weight: 700;
  z-index: 3;
}

.charm-txt:nth-child(1),
.charm-txt:nth-child(2) {
  padding-bottom: 20px;
}

.charm-txt:not(:last-child) {
  padding-bottom: 20px;
}

.charm-txt::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 18px;
  height: 24px;
  background: url("../img/2-about-job/icon.png") no-repeat center/contain;
  vertical-align: middle;
  left: -3%;
  top: 7%;
}

@media (max-width: 1024px) {
  .about-box {
    padding: 60px 25px;
    margin-top: 58px;
  }

  .inner-top {
    gap: 0px;
  }

  .right-item {
    width: 100%;
  }
}

@media (max-width: 920px) {
  .schedule_time {
    font-size: 19px;
  }

  .schedule_content_detail {
    font-size: 14px;
  }
}

@media (max-width: 860px) {
  .about-box {
    border-radius: 30px;
  }
  .inner-top {
    flex-direction: column;
    align-items: center;
  }

  .right-item {
    max-width: 381px;
    width: 100%;
    padding: 40px 0 30px 0;
  }

  .br-860-none {
    display: none;
  }

  .schedule-inner ul {
    display: block;
    flex-direction: column; /* li自体を縦に積む */
    align-items: center; /* 中央揃え */
  }

  .schedule-inner li {
    flex-direction: row; /* li内は横並び */
    align-items: center;

    max-width: 800px;
    width: 80%;
    gap: 30px;
    padding-top: 30px;
    margin: 0 auto;
    margin-left: 20%;
  }

  .schedule_time {
    margin-bottom: 0; /* 下余白を消す */
  }

  .schedule_content {
    flex: 1;
  }

  .schedule_content_detail {
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
  }

  /* liを縦積みにした場合の線を縦方向に変更 */
  ul > li:not(:last-child) .schedule_time::before {
    top: 100%; /* 自分の下から線を伸ばす */
    left: 50%; /* 真ん中に */
    width: 4px; /* 線の太さ */
    height: 60px; /* 線の長さ */
    transform: translate(-50%, 0); /* 横中央に調整 */
  }

  .charm {
    height: auto;
  }

  .charm::after {
    height: 250px;
  }

  .charm-ttl {
    font-size: 23px;
  }

  .charm-txt {
    font-size: 20px;
    line-height: 1.4;
    padding-left: 10px;
  }
}

@media (max-width: 688px) {
  .charm {
    padding: 30px 40px;
  }

  .charm-txt {
    font-size: 18px;
  }

  .charm-txt::before {
    height: 20px;
  }
}

@media (max-width: 542px) {
  .left-pic {
    width: 420px;
    width: 100%;
    max-width: 420px;
  }

  .charm {
    padding: 30px 30px;
  }

  .schedule-inner li {
    margin: 0 auto;
  }
}

@media (max-width: 518px) {
  .charm-txt {
    font-size: 16px;
    padding-left: 17px;
  }
}

@media (max-width: 480px) {
  .charm {
    margin-bottom: 50px;
  }

  .charm::after {
    height: 210px;
    right: 0%;
  }

  .charm-txt::before {
    height: 18px;
  }

  .schedule-inner li {
    gap: 15px;
    width: 100%;
  }

  .schedule_time {
    font-size: 17px;
  }
}

@media (max-width: 444px) {
  .charm {
    padding: 30px 20px;
  }

  .charm-txt {
    padding-left: 30px;
  }

  .charm-txt::before {
    left: 0%;
  }
}

@media (max-width: 387px) {
  .left-ttl {
    font-size: 23px;
  }

  .schedule-ttl {
    width: 60%;
  }
}

@media (max-width: 328px) {
  .charm-ttl {
    font-size: 20px;
  }

  .schedule_time {
    font-size: 15px;
  }

  .schedule_content_detail {
    font-size: 14px;
  }

  .schedule-inner li {
    gap: 14px;
  }
}

/*******************************************************
3.セクション
*******************************************************/
.section3 {
  background-color: var(--lightyellow);
  padding-top: 82px;
}

.ttl-3 {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.ttl-3::after {
  content: "";
  display: inline-block;
  position: absolute;
  max-width: 150px;
  width: 100%;
  height: 150px;
  background: url("../img/3-staff-voice/section-item.png") no-repeat
    center/contain;
  vertical-align: middle;
  transform: translate(50%, -50%);
  top: 38%;
  left: 80%;
  z-index: -1;
}

@media (max-width: 768px) {
  .ttl-3::after {
    top: 9%;
  }
}

@media (max-width: 650px) {
  .ttl-3::after {
    width: 45%;
    top: -15%;
    left: 74%;
  }
}

@media (max-width: 590px) {
  .ttl-3::after {
    width: 42%;
    top: -29%;
    left: 68%;
  }
}

@media (max-width: 523px) {
  .ttl-3::after {
    width: 38%;
    top: -37%;
    left: 63%;
  }
}

@media (max-width: 360px) {
  .ttl-3::after {
    left: 58%;
  }
}

.voice-inner {
  padding-left: 100px;
}

@media (max-width: 1024px) {
  .voice-inner {
    padding-left: 5vw;
  }
}

.voice-box {
  background-color: var(--rightgreen);
  max-width: 1190px;
  width: 100%;
  margin-top: 56px;
  padding-top: 82px;
  padding-bottom: 3px;
  /* 右側の角だけ丸める */
  border-top-right-radius: 100px; /* 上右角 */
  border-bottom-right-radius: 100px; /* 下右角 */
}

@media (max-width: 1210px) {
  .voice-box {
    width: 95%;
  }
}

@media (max-width: 440px) {
  .voice-box {
    padding-top: 40px;
  }
}

.voice-contents {
  padding-bottom: 83px;
}

.voice-ttl {
  position: relative;
  display: inline-block;
  width: fit-content;
  color: var(--white);
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  line-height: 66px;
  border-radius: 10px;
  padding: 0 18px 0 22px;
}

.ttl-green {
  background-color: var(--green);
}

.voice-ttl.ttl-green::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 30%;
  aspect-ratio: 154 / 376;
  background: url("../img/3-staff-voice/green-woman.png") no-repeat
    center/contain;
  transform: translateX(100%) translateY(-35%);
  left: 110%;
}

.ttl-yellow {
  background-color: var(--orange02);
}

.voice-ttl.ttl-yellow::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 35%;
  aspect-ratio: 177 / 389;
  background: url("../img/3-staff-voice/orange-woman.png") no-repeat
    center/contain;
  transform: translateX(100%) translateY(-35%);
  left: 86%;
  top: 66%;
}

.ttl-orange {
  background-color: var(--orange03);
}

.voice-ttl.ttl-orange::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 18%;
  aspect-ratio: 110 / 382;
  background: url("../img/3-staff-voice/red-woman.png") no-repeat center/contain;
  transform: translateX(100%) translateY(-35%);
  left: 87%;
}

.content {
  position: relative;
}

.br-730,
.br-600,
.br-435 {
  display: none;
}

@media (max-width: 860px) {
  .voice-ttl {
    font-size: 25px;
  }
}

@media (max-width: 761px) {
  .voice-ttl.ttl-green::after {
    width: 32%;
    left: 92%;
  }
  .voice-ttl.ttl-yellow::after {
    width: 33%;
    left: 75%;
  }
  /* .voice-ttl.ttl-orange::after {

  } */
}

@media (max-width: 730px) {
  .br-730 {
    display: block;
  }

  .voice-ttl {
    font-size: 23px;
    line-height: 1.4;
    padding: 5px 18px;
    text-align: left;
  }

  .voice-ttl.ttl-yellow::after {
    width: 50%;
    left: 97%;
  }

  .voice-ttl.ttl-orange::after {
    width: 30%;
    left: 105%;
  }
}

@media (max-width: 600px) {
  .br-600 {
    display: block;
  }

  .voice-ttl.ttl-green::after {
    width: 50%;
  }

  .voice-ttl.ttl-yellow::after {
    width: 40%;
    left: 72%;
  }

  .voice-ttl.ttl-orange::after {
    width: 25%;
    left: 79%;
  }
}

@media (max-width: 491px) {
  .voice-ttl {
    font-size: 22px;
    line-height: 1.4;
    padding: 5px 18px;
  }
}

@media (max-width: 435px) {
  .br-435 {
    display: block;
  }

  .voice-ttl.ttl-green::after {
    left: 65%;
  }

  .voice-ttl.ttl-yellow::after {
    width: 63%;
    left: 57%;
    top: 89%;
  }

  .voice-ttl.ttl-orange::after {
    width: 38%;
    left: 75%;
  }
}

@media (max-width: 360px) {
  .voice-ttl.ttl-green::after {
    left: 50%;
  }

  .voice-ttl.ttl-yellow::after {
    left: 38%;
  }

  .voice-ttl.ttl-orange::after {
    left: 66%;
  }
}

/* ==============================
   Swiper全体のスタイル
============================== */
.voiceSwiper {
  position: relative;
  width: 100%;
  overflow: visible; /* ★はみ出しても切れないように */
}

.voice-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 50px;
  height: 100%; /* スライドの高さを親に合わせる */
}

.swiper-slide {
  flex: 0 0 auto; /* 固定幅で横並び */
  width: 420px; /* スライド幅 */
  display: flex;
  height: auto; /* 高さは中身に合わせる */
  justify-content: center; /* スライド内のコンテンツ中央揃え */
}

/* ==============================
   Swiperナビゲーション配置
============================== */
.swiper-nav {
  width: 100%;
  display: flex;
  align-items: center;
  align-items: flex-start;
  padding: 0 20px;
  margin-bottom: 115px;
  gap: 20px;
}

/* ==============================
   Swiperスライダー用（voiceSwiper）
============================== */
.voiceSwiper {
  width: 420px;

  margin-right: auto;
  margin-left: 0;
}

/* ==============================
   プログレスバー（スクロールバー）
============================== */
.custom-progressbar {
  width: 236px; /* 横棒全体の幅 */
  height: 3px;
  background-color: var(--white);
  margin-right: 10px;
  overflow: hidden;
}

.custom-indicator {
  background-color: var(--brown);
  height: 100%;
  transition: transform 0.3s ease, width 0.3s ease;
}

.swiper-scrollbar {
  width: 100%;
  max-width: 236px;
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  z-index: 0;
}

/* ==============================
   左右ボタン（Pagination Flex）
============================== */
/* ボタンの親配置 */
/* ボタンを右に並べる */
.swiper-buttons {
  position: static;
  display: flex;
  gap: 30px;
}

/* 丸いボタン */
.swiper-button-prev,
.swiper-button-next {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: var(--red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  z-index: 0;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  opacity: 0.7;
}

/* 矢印の軸の線 */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
  position: absolute;
  width: 16px; /* 矢印の軸の長さ */
  height: 2px; /* 線の太さ */
  background-color: var(--white); /* 線の色 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 左矢印の線を回転 */
.swiper-button-prev::after {
  transform: translate(-50%, -50%) rotate(180deg);
}

/* 矢印先端の三角 */
.swiper-button-prev::before,
.swiper-button-next::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
  top: 50%;
  transform: translateY(-50%);
}

/* 左矢印の三角 */
.swiper-button-prev::before {
  transform: translateY(-50%) rotate(-135deg);
  left: 30%;
}

/* 右矢印の三角 */
.swiper-button-next::before {
  transform: translateY(-50%) rotate(45deg);
  left: 42%;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 1;
}
/* ==============================
   スライド内カードのスタイル
============================== */
.contents-box {
  position: relative;
  background-color: var(--white);
  border: var(--brown) solid 2px; /* 枠線 */
  border-radius: 20px; /* 角丸 */
  padding: 25px 19px 23px 19px; /* 内側の余白 */
  max-width: 420px;
  width: 100%;
  height: 100%; /* カードの高さを揃える */
}

.name-box {
  position: absolute;
  top: -20%;
  color: var(--white);
  font-size: 19px;
  text-align: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding-top: 15px;
  display: inline-block;
  max-width: 118px;
  width: 100%;
  height: 68px;
}

.contents-head {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 15px;
  min-height: 60px;
  display: flex;
  align-items: center;
}

.contents-txt {
  font-size: 15px;
  font-weight: 800;
  color: var(--brown);
  line-height: 1.6;
  flex: 1;
}

/* --green: #72b233; */
.name-green {
  background-color: var(--green);
}

.green-head {
  color: var(--green);
}

.green {
  color: var(--green);
}

/*  --orange02: #e7b619; */
.name-yellow {
  background-color: var(--orange02);
}

.yellow-head {
  color: var(--orange02);
}

.yellow {
  color: var(--orange02);
}

/*  --orange03: #f18624; */
.name-orange {
  background-color: var(--orange03);
}

.orange-head {
  color: var(--orange03);
}

.orange {
  color: var(--orange03);
}

/* @media (max-width: 768px) {
  .name-box {
    top: -15%;
  }
} */

/* @media (max-width: 500px) {
  .voiceSwiper {
    padding-right: 0;
  } 
} */

@media (max-width: 480px) {
  .br-480-none {
    display: none;
  }

  .voiceSwiper {
    max-width: 420px;
    width: 95%;
  }

  .swiper-nav {
    margin-bottom: 85px;
  }

  .name-box {
    top: -17%;
  }
}

@media (max-width: 426px) {
  .contents-head {
    font-size: 22px;
  }

  .contents-txt {
    font-size: 14px;
  }
}

/*******************************************************
4.セクション
*******************************************************/
.section4 {
  background-color: var(--lightyellow);
  padding-top: 125px;
  padding-bottom: 156px;
}

@media (max-width: 768px) {
  .section4 {
    padding-top: 85px;
    padding-bottom: 72px;
  }
}

.ttl-4 {
  position: relative;
  z-index: 0;
  display: inline-block;
}

.ttl-4::before {
  content: "";
  display: inline-block;
  position: absolute;
  max-width: 150px;
  width: 100%;
  height: 150px;
  background: url("../img/4-environment/section-item.png") no-repeat
    center/contain;
  vertical-align: middle;
  transform: translate(-50%, -50%);
  top: 19%;
  left: -22%;
  z-index: -1;
}

@media (max-width: 1280px) {
  .ttl-4::before {
    left: 124%;
  }
}

@media (max-width: 768px) {
  .ttl-4::before {
    left: -22%;
    top: 6%;
  }
}

@media (max-width: 660px) {
  .ttl-4::before {
    width: 36%;
    left: -16%;
    top: -1%;
  }
}
@media (max-width: 600px) {
  .ttl-4::before {
    left: -7%;
    top: -9%;
  }
}

@media (max-width: 537px) {
  .ttl-4::before {
    left: 2%;
  }
}

@media (max-width: 400px) {
  .ttl-4::before {
    left: 4%;
    top: -14%;
  }
}

@media (max-width: 350px) {
  .ttl-4::before {
    left: 6%;
    top: -23%;
  }
}

.environment-box {
  background-color: var(--yellow);
  max-width: 1190px;
  width: 100%;
  margin-top: 56px;
  padding-top: 126px;
  padding-bottom: 82px;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  /* 右寄せ */
  margin-left: auto; /* 左の余白を自動で広げる */
  margin-right: 0; /* 右端にくっつける */
}

@media (max-width: 1210px) {
  .environment-box {
    width: 95%;
  }
}

.environment-inner {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1400px) {
  .environment-inner {
    margin: 0;
  }
}

@media (max-width: 1024px) {
  .environment-inner {
    padding-right: max(5%, 20px);
    padding-left: max(5%, 20px);
  }
}

.environment-contents {
  margin-right: 0;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* flexアイテムも右端に揃える */
}
.environment-contents:not(:last-child) {
  padding-bottom: 96px;
}

.environment-content {
  position: relative;
  background-color: var(--white);
  border-radius: 50px;
  max-width: 719px;
  width: 100%;

  padding: 35px 38px 42px 0;

  display: flex;
  flex-direction: column;
  align-items: flex-end; /* flexアイテムも右端に揃える */
}

.content-03 {
  padding-top: 65px;
  padding-bottom: 72px;
}

.environment-pic {
  position: absolute;
  width: 420px;
  left: -28%;
  top: -18%;

  z-index: 1;
}

.content-inner {
  max-width: 435px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.heading-box {
  display: flex;
  flex-wrap: wrap;
  row-gap: 11px;
}

.environment-heading {
  display: inline-block;
  width: fit-content;
  font-size: 29px;
  font-weight: 600;
  color: var(--white);
  background-color: var(--orange04);
  border-radius: 10px;
  line-height: 44px;
  padding: 0 10px;
}

.environment-txt {
  font-size: 17px;
  color: var(--brown);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

@media (max-width: 990px) {
  .environment-box {
    padding-top: 60px;
  }

  .environment-contents {
    align-items: center;
  }

  .environment-contents:not(:last-child) {
    padding-bottom: 50px;
  }

  .environment-content {
    flex-direction: column-reverse;

    align-items: flex-start;
    padding: 40px 20px;
  }

  .environment-pic {
    position: static;
    transform: none;
    width: 80%;
    margin-bottom: 20px;
  }

  .content-inner {
    max-width: 100%;
    width: 100%;
    gap: 20px;
  }

  .heading-box {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .environment-content {
    align-items: center;
  }

  .environment-heading {
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .environment-box {
    margin-top: 40px;
    padding-bottom: 55px;
  }

  .environment-heading {
    font-size: 25px;
  }

  .environment-txt {
    font-size: 16px;
  }
}

@media (max-width: 410px) {
  .environment-content {
    padding: 30px 13px;
  }

  .environment-heading {
    font-size: 20px;
    line-height: 36px;
  }
  .environment-txt {
    font-size: 15px;
  }
}

@media (max-width: 338px) {
  .environment-heading {
    font-size: 18px;
  }
}
/*******************************************************
5.セクション
*******************************************************/
.section5 {
  background-color: var(--white);
  padding-top: 96px;
}

.ttl-5 {
  text-align: center;
  position: relative;
  z-index: 0;
  display: inline-block;
}

.ttl-5::after {
  content: "";
  display: inline-block;
  position: absolute;
  max-width: 150px;
  width: 100%;
  height: 150px;
  background: url("../img/5-q-and-a/section-item.png") no-repeat center/contain;
  vertical-align: middle;
  transform: translate(0%, -50%);
  top: 2%;
  left: 91%;
  z-index: -1;
}

@media (max-width: 540px) {
  .ttl-5::after {
    width: 90%;
  }
}

@media (max-width: 480px) {
  .ttl-5::after {
    width: 77%;
    top: -3%;
    left: 80%;
  }
}
/* faq */

/* -------------------------------
全体スタイル
--------------------------------- */
.faq-box {
  padding-top: 70px;
}

/* トグルリンク全体 */
.toggle-link {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左寄せに */
  background-color: var(--yellow01);
  color: var(--brown);
  font-size: 17px;
  font-weight: 800;
  line-height: 80px;
  cursor: pointer;
  padding: 5px 25px;
  border-radius: 10px;
  position: relative;
}

/* 左側をまとめるラッパー */
.toggle-link .left-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

/* Qアイコン */
.toggle-link .q-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--white);
  color: var(--red);
  font-weight: bold;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 24px;
}

/* プラス/マイナス */
.toggle-link .plus-minus {
  margin-left: auto;
  width: 30px;
  height: 2px;
  background-color: var(--brown);
  position: relative;
  transition: all 0.3s ease;
}

.toggle-link .plus-minus::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 30px;
  background-color: var(--brown);
  top: -14px;
  left: 14px;
  transition: all 0.3s ease;
}

.toggle-input:checked + .toggle-link .plus-minus::after {
  opacity: 0;
}

/* -------------------------------
開閉部分
--------------------------------- */
.toggle-main {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  background-color: #fff;
  font-size: 17px;
  line-height: 1.6;
  text-align: justify;
  padding: 0 25px;
}

/* チェックされたら開く */
.toggle-input:checked + .toggle-link + .toggle-main {
  max-height: 500px;
  padding: 15px 25px;
}

/* Aアイコン + flex */
.toggle-main dd {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  margin-top: 15px;
  font-weight: 700;
}

.toggle-main dd .a-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--red);
  color: var(--white);
  font-weight: bold;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 21px;
}

/* ↑↑↑↑faq↑↑↑↑ */

.faq-txt {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: center;
  font-size: 39px;
  color: var(--brown);
  font-weight: 800;
  padding-top: 100px;
}

.br-838,
.br-448 {
  display: none;
}

@media (max-width: 838px) {
  .br-838 {
    display: block;
  }

  .faq-txt {
    line-height: 1.3;
    gap: 20px;
  }
}

.section5-bottom {
  background-color: var(--lightyellow);
}

.btn-box {
  background-color: var(--lightyellow);

  padding-top: 90px;
  padding-bottom: 80px;
}

.br-860,
.br-566,
.br-419 {
  display: none;
}

@media (max-width: 860px) {
  .br-860 {
    display: block;
  }

  .toggle-link {
    font-size: 17px;
    line-height: normal;
    padding: 15px 25px;
  }

  /* プラス/マイナス */
  .toggle-link .plus-minus {
    width: 25px;
  }

  .toggle-link .plus-minus::after {
    height: 25px;

    top: -12px;
    left: 12px;
  }
}

@media (max-width: 768px) {
  .faq-txt {
    padding-bottom: 50px;
  }

  .btn-box {
    padding-top: 70px;
    padding-bottom: 50px;
  }
}

@media (max-width: 625px) {
  .toggle-link {
    font-size: 16px;
    padding: 15px 12px;
  }

  .toggle-main {
    font-size: 16px;
  }

  .toggle-input:checked + .toggle-link + .toggle-main {
    padding: 15px 12px;
  }
}

@media (max-width: 578px) {
  .faq-txt {
    font-size: 34px;
  }
}

@media (max-width: 566px) {
  .br-566 {
    display: block;
  }
}

@media (max-width: 506px) {
  .faq-txt {
    font-size: 30px;
  }
}

@media (max-width: 480px) {
  .faq-txt {
    padding-top: 80px;
  }
}

@media (max-width: 454px) {
  .faq-box {
    padding-top: 35px;
  }

  .toggle-link {
    font-size: 15px;
  }

  .toggle-main {
    font-size: 15px;
  }

  .toggle-link .q-icon,
  .toggle-main dd .a-icon {
    width: 40px;
    height: 40px;

    font-size: 20px;
  }

  /* プラス/マイナス */
  .toggle-link .plus-minus {
    width: 20px;
  }

  .toggle-link .plus-minus::after {
    height: 20px;

    top: -9px;
    left: 9px;
  }
}

@media (max-width: 448px) {
  .br-448 {
    display: block;
  }
}

@media (max-width: 419px) {
  .br-419 {
    display: block;
  }

  .toggle-link {
    padding: 15px 8px;
  }
}

@media (max-width: 374px) {
  .toggle-link {
    font-size: 14px;
  }

  .toggle-main {
    font-size: 14px;
  }
}

@media (max-width: 358px) {
  .br-566 {
    display: none;
  }

  .faq-txt {
    font-size: 26px;
  }
}

/*******************************************************
追従ぼたん
*******************************************************/

/* （entry） */
.show-btn {
  position: fixed;
  z-index: 10;
  bottom: 2%;
  left: 50%; /* 変更 */
  transform: translateX(-50%); /* 変更 */
  /* right: 0; */
  width: 100%;
  max-width: 250px;
  color: var(--white);
  font-size: 23px;
}

.sp-btn {
  display: block;
  background-color: var(--red);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 250px;
  color: var(--white);
  font-size: 23px;
  padding: 20px 0;
  border-radius: 50px;
}

/* 矢印 */
.btn.sp-btn::before,
.btn.sp-btn::after {
  position: absolute; /* ボタン内での絶対配置 */
  top: 50%; /* ボタンの縦中央に配置 */
  right: 13px; /* ボタン右端から13pxの位置 */
  content: ""; /* 疑似要素を表示させるために必須 */
}

/* 横棒（::before） */
.btn.sp-btn::before {
  background-color: var(--white); /* 横棒の色 */
  width: 15px; /* 横棒の長さ */
  height: 2px; /* 横棒の太さ */
  transform: translateY(-50%); /* 中央補正（margin-top: 0px不要にできる） */
}

/* 矢印の先端（::after） */
.btn.sp-btn::after {
  width: 8px; /* 矢印の斜め部分の大きさ */
  height: 8px;
  margin-top: -4px; /* 縦位置を中央に補正 */
  transform: rotate(45deg); /* 正方形を45度回転させて矢印っぽくする */
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
  display: inline-block;
  vertical-align: middle;
}

/* （トップ） */
.top-btn {
  position: relative;
}

.to-top {
  position: fixed;
  z-index: 10;
  bottom: 50px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: var(--red);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: none; /* 初期は非表示 */
  transition: transform 1s;
  /* flex で中央揃えに変更 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 上向き矢印を線で表現 */
.to-top::before {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--white);
  border-left: 2px solid var(--white);
  transform: translate(50%, -50%) rotate(45deg);
  top: 53%;
  left: 30%;
}
/* ホバー時 */
.to-top:hover {
  opacity: 0.7;
  transform: rotateY(360deg);
}

@media (max-width: 768px) {
  .to-top {
    right: 5px;
  }
}
/*******************************************************
フッター
*******************************************************/
footer {
  background-color: var(--brown);
  color: var(--white);
  font-size: 12px;

  text-align: center;
  padding: 57px 0;
}

.inner {
  padding: 0 10px;
}

.footer-nav {
  padding-bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.footer-nav > a:not(:first-child)::before {
  content: "｜";
  position: relative;
  right: 3%;
}

@media (max-width: 768px) {
  footer {
    padding-top: 35px;
    padding-bottom: 110px;
  }
}

@media (max-width: 479px) {
  footer {
    padding-top: 40px;
  }

  .footer-nav {
    flex-wrap: wrap;
  }

  .footer-nav > a:last-child::before {
    opacity: 0;
  }
}