@charset "UTF-8";
/*使用カラーの定義、呼び出しは color.$〇〇〇*/
/* Geologica */
/* Noto Sans JP */
/*フォントサイズ*/
/* Reset margin, padding, border
* *********************************** */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
em,
small,
strong,
sub,
sup,
mark,
del,
ins,
strike,
abbr,
dfn,
blockquote,
q,
cite,
code,
pre,
ol,
ul,
li,
dl,
dt,
dd,
div,
section,
article,
main,
aside,
nav,
header,
footer,
img,
figure,
figcaption,
address,
time,
audio,
video,
canvas,
iframe,
details,
summary,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
}

/* スマホ切り替え * *********************************** */
/* Typography * *********************************** */
html {
  font-size: 0.694447vw;
  -webkit-text-size-adjust: 100%;
}
@media only screen and (max-width: 768px) {
  html {
    font-size: 1.33333vw;
  }
}

body {
  font-size: 1.6rem;
  font-family: "Noto Sans JP", sans-serif;
  color: #282828;
  line-height: 1.7;
  letter-spacing: 0.05em;
  font-weight: 400;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.5;
    -webkit-font-smoothing: auto;
  }
}

* {
  font-family: inherit;
  font-size: inherit;
}

a,
a:visited {
  color: inherit;
}

/* Layout * *********************************** */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

article,
aside,
footer,
header,
nav,
section,
main {
  display: block;
}

* {
  box-sizing: border-box;
}

/* Elements * *********************************** */
a {
  text-decoration: none;
  cursor: pointer;
}

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

ol,
ul,
li {
  list-style: none;
  list-style-type: none;
}

img,
video {
  display: block;
}

img {
  border-style: none;
  display: block;
}

label, input[type=checkbox] {
  cursor: pointer;
}

button {
  cursor: pointer;
}

a {
  cursor: pointer;
}

br.sp {
  display: none;
  line-height: initial;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  br.sp {
    display: block;
    line-height: initial;
  }
}

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

.show_pc {
  display: block;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .show_pc {
    display: none !important;
  }
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .show_pc {
    display: block;
  }
}

.show_sp {
  display: none;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .show_sp {
    display: block;
  }
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .show_sp {
    display: none;
  }
}

/*レイアウト*/
.no-wrap {
  white-space: nowrap;
}

.flex {
  display: flex;
}

/*about margin*/
.mb-175 {
  margin-bottom: 12.2vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .mb-175 {
    margin: 0 auto;
    margin-bottom: 20vw;
  }
}

.mb-200 {
  margin-bottom: 13.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .mb-200 {
    margin: 0 auto;
    margin-bottom: 25.3vw;
  }
}

/*padding*/
.pb-150 {
  padding-bottom: 10.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .pb-150 {
    margin-bottom: 13.3vw;
  }
}

/*カラー*/
.color-lightgreen {
  color: #64c832;
}

.color-orange {
  color: #f08c1e;
}

.bg-green {
  background-color: #23aa46;
}

.bg-lightgreen {
  background-color: #64c832;
}

.bg-darkgreen {
  background-color: #097c29;
}

.bg-lightgray {
  background-color: #f6f4f2;
}

.bg-beigegray {
  background-color: #e4e4df;
}

/*ENTRYボタン*/
.header__button {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 6.3vw;
  width: 18.8vw;
  height: 6.3vw;
  background-color: #23aa46;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .header__button {
    width: 46.7vw;
    height: 16vw;
    right: 16vw;
  }
}
.header__button--body {
  font-family: "Geologica", sans-serif;
  font-size: 1.7vw;
  font-weight: 900;
  color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .header__button--body {
    font-size: 4.4vw;
  }
}

.header__button:hover, .header__button:active {
  background-color: #f08c1e;
  transition: 0.3s;
}

/*ハンバーガーの装飾*/
.hamburger-menu {
  /*3本線の装飾*/
  /*ハンバーガーをクリックで3本線を×マークに*/
  /*チェックボックスを隠す*/
  /*メニュー部分*/
  /*ハンバーガークリックでメニューを画面外へ*/
  /*メニュー装飾*/
  /*ナビゲーション部分*/
  /*SP版 TOP表示のためのスタイル*/
  /*メニュー内の横並び用margin*/
  /*新卒・キャリア採用ボタン*/
}
.hamburger-menu .menu-btn {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  width: 6.3vw;
  height: 6.3vw;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .menu-btn {
    width: 16vw;
    height: 16vw;
  }
}
.hamburger-menu .menu-btn span,
.hamburger-menu .menu-btn span:before,
.hamburger-menu .menu-btn span:after {
  content: "";
  display: block;
  height: 0.3vw;
  width: 2.8vw;
  background-color: #23aa46;
  position: absolute;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .menu-btn span,
  .hamburger-menu .menu-btn span:before,
  .hamburger-menu .menu-btn span:after {
    width: 7.2vw;
    height: 0.5vw;
  }
}
.hamburger-menu .menu-btn span:before {
  bottom: 1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .menu-btn span:before {
    bottom: 2.3vw;
  }
}
.hamburger-menu .menu-btn span:after {
  top: 1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .menu-btn span:after {
    top: 2.3vw;
  }
}
.hamburger-menu #menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0); /*メニューオープン時は真ん中の線を透明にする*/
}
.hamburger-menu #menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
.hamburger-menu #menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}
.hamburger-menu #menu-btn-check {
  display: none;
}
.hamburger-menu .menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  background-color: #ffffff;
}
.hamburger-menu .menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: #ffffff;
  transition: all 0.5s; /*アニメーション設定*/
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .menu-content {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 6.9vw;
    padding-left: 6.7vw;
    overflow-y: scroll;
  }
}
.hamburger-menu #menu-btn-check:checked ~ .menu-content {
  left: 0; /*メニューを画面内へ*/
}
.hamburger-menu .menu-title {
  font-family: "Geologica", sans-serif;
  font-size: 5.2vw;
  font-weight: 900;
  line-height: 1.2;
  color: #23aa46;
  margin-right: 5.2vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .menu-title {
    font-size: 5.3vw;
  }
}
.hamburger-menu .main-nav {
  display: flex;
  flex-direction: column;
  margin-top: 5vw;
  /*SEなど画面幅375px以下の場合　メニューが１画面に収まるよう調整*/
  /*sp版のみ横並び*/
  /*SP版アコーディオン*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav {
    width: 100%;
    margin-top: 7.7vw;
  }
}
.hamburger-menu .main-nav .flex {
  display: flex;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav .flex {
    flex-direction: column;
  }
}
.hamburger-menu .main-nav__item {
  margin-bottom: 3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav__item {
    padding: 2.7vw 0;
    border-bottom: 1px solid #e4e4df;
  }
}
.hamburger-menu .main-nav__item2 {
  margin-bottom: 3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav__item2 {
    padding: 2.7vw 0;
    border-bottom: 1px solid #e4e4df;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav__item2:last-of-type {
    border-bottom: none;
  }
}
.hamburger-menu .main-nav__link--heading {
  font-family: "Geologica", sans-serif;
  font-size: 1.4vw;
  font-weight: 900;
  line-height: 1.25;
  color: #23aa46;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav__link--heading {
    font-size: 4vw;
  }
}
.hamburger-menu .main-nav__link--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.1vw;
  font-weight: 500;
  line-height: 2.1;
  color: #000000;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav__link--title {
    font-size: 4.3vw;
  }
}
.hamburger-menu .main-nav__container {
  /*margin-topなし*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav__container {
    display: none;
  }
}
.hamburger-menu .main-nav__container--anchor--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 2.1;
  color: #000000;
  /*横線*/
  display: flex;
  align-items: center; /* 垂直中心 */
}
.hamburger-menu .main-nav__container--anchor--title:before {
  content: "";
  border-top: 1px solid #23aa46;
  width: 0.7vw;
  margin-right: 0.3vw;
}
.hamburger-menu .main-nav__container--anchor:first-of-type {
  margin-top: 1vw;
}
.hamburger-menu .main-nav__container--anchor2--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 2.1;
  color: #000000;
  /*横線*/
  display: flex;
  align-items: center; /* 垂直中心 */
}
.hamburger-menu .main-nav__container--anchor2--title:before {
  content: "";
  border-top: 1px solid #23aa46;
  width: 0.7vw;
  margin-right: 0.3vw;
}
.hamburger-menu .main-nav__container--anchor2:first-of-type {
  margin-top: 0;
}
.hamburger-menu .main-nav .js-accordion-trigger {
  position: relative;
}
.hamburger-menu .main-nav .main-nav__icon {
  position: absolute;
  top: 6vw;
  right: 6.7vw;
  font-size: 4vw;
  color: #23aa46;
  transition: transform 0.3s ease;
  width: 4vw;
}
.hamburger-menu .main-nav__container--sp {
  /*margin-topなし*/
}
.hamburger-menu .main-nav__container--sp--anchor--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 2.1;
  color: #000000;
  /*横線*/
  display: flex;
  align-items: center; /* 垂直中心 */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav__container--sp--anchor--title {
    font-size: 3.7vw;
  }
}
.hamburger-menu .main-nav__container--sp--anchor--title:before {
  content: "";
  border-top: 1px solid #23aa46;
  width: 0.7vw;
  margin-right: 0.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav__container--sp--anchor--title:before {
    width: 2.7vw;
    margin-right: 1.3vw;
  }
}
.hamburger-menu .main-nav__container--sp--anchor:first-of-type {
  margin-top: 1vw;
}
.hamburger-menu .main-nav__container--sp--anchor2--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 2.1;
  color: #000000;
  /*横線*/
  display: flex;
  align-items: center; /* 垂直中心 */
}
.hamburger-menu .main-nav__container--sp--anchor2--title:before {
  content: "";
  border-top: 1px solid #23aa46;
  width: 0.7vw;
  margin-right: 0.3vw;
}
.hamburger-menu .main-nav__container--sp--anchor2:first-of-type {
  margin-top: 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .sp-top {
    border-top: 1px solid #e4e4df;
    padding: 5.9vw 0;
    margin-right: 5.6vw;
  }
}
.hamburger-menu .flex .main-nav__list {
  margin-right: 5.6vw;
}
.hamburger-menu .main-nav__button {
  position: relative;
  display: flex;
  justify-content: center;
  width: 17.8vw;
  padding-top: 1.8vw;
  padding-bottom: 1.8vw;
  border: none;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav__button {
    width: 41.5vw;
    padding-top: 5.3vw;
    padding-bottom: 5.3vw;
  }
}
.hamburger-menu .main-nav__button--body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.1vw;
  font-weight: 600;
  color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav__button--body {
    font-size: 3.5vw;
  }
}
.hamburger-menu .main-nav__button--append {
  width: 1.4vw;
  position: absolute;
  right: 1.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .hamburger-menu .main-nav__button--append {
    width: 4vw;
  }
}
.hamburger-menu .new-graduate__button {
  background-color: #23aa46;
}
.hamburger-menu .career_recruit__button {
  background-color: #64c832;
}
.hamburger-menu .new-graduate__button:hover, .hamburger-menu .new-graduate__button:active {
  background-color: #f08c1e;
  transition: 0.3s;
}
.hamburger-menu .career_recruit__button:hover, .hamburger-menu .career_recruit__button:active {
  background-color: #f5b800;
  transition: 0.3s;
}
.hamburger-menu .main-nav__button:first-of-type {
  margin-bottom: 1.4vw;
}

/*スクロール時の表示・非表示の動き(ファーストビューを過ぎたら表示)*/
/* 最初は非表示 */
@media screen and (max-width: 768px) and (orientation: portrait) {
  #header {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
}

/* 表示状態 */
#header.visible {
  display: block;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
  opacity: 1;
}

/*テキスト表示範囲*/
.wrapper {
  max-width: 83.3vw;
  margin: 0 auto;
}

.wrapper2 {
  max-width: 62.5vw;
  margin: 0 auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .wrapper2 {
    max-width: 86%;
  }
}

.wrapper3 {
  max-width: 74.4vw; /*1072px*/
  margin: 0 auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .wrapper3 {
    max-width: 93%;
  }
}

/*section*/
.section-container {
  padding-bottom: 10.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .section-container {
    padding-bottom: 26.7vw;
  }
}

.section-container2 {
  padding-bottom: 10.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .section-container2 {
    padding-bottom: 13.3vw;
  }
}

.section-container3 {
  padding-bottom: 10.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .section-container3 {
    padding-bottom: 3.3vw;
  }
}

.section {
  margin: 10.4vw auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .section {
    margin: 20vw auto 26.7vw auto;
  }
}
.section__title {
  font-family: "Geologica", sans-serif;
  font-size: 9.4vw;
  font-weight: 900;
  line-height: 1;
  color: #23aa46;
  margin-bottom: 3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .section__title {
    font-size: 16.8vw;
    margin-bottom: 10.7vw;
  }
}
.section__title--lightgreen {
  font-family: "Geologica", sans-serif;
  font-size: 9.4vw;
  font-weight: 900;
  line-height: 1;
  color: #64c832;
  margin-bottom: 4.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .section__title--lightgreen {
    font-size: 16.8vw;
    white-space: nowrap;
    margin-bottom: 10.7vw;
  }
}
.section__subtitle {
  font-size: 2.1vw;
  font-weight: 700;
  color: #282828;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .section__subtitle {
    font-size: 5.3vw;
  }
}
.section__text {
  font-size: 1.1vw;
  font-weight: 500;
  margin-top: 5.2vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .section__text {
    font-size: 3.7vw;
    margin-top: 10.7vw;
  }
}

.logo__header {
  position: fixed;
  z-index: 80;
  top: 0;
  width: -moz-fit-content;
  width: fit-content;
  height: 6.3vw;
  /*ロゴ*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .logo__header {
    position: static;
    width: 58.4vw;
    height: 16vw;
    padding: 5.3vw 0;
  }
}
.logo__header a {
  display: inline-block;
}
.logo__header .logo {
  position: relative;
  top: 0;
  z-index: 70;
  width: 21.5vw;
  margin-top: 1.8vw;
  margin-left: 3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .logo__header .logo {
    width: 58.4vw;
    margin-top: 0;
  }
}

/*右端の文字*/
.parallax-container {
  position: fixed; /* 背景的に表示 */
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  overflow: hidden;
  z-index: 50;
  pointer-events: none !important;
  will-change: transform;
}
.parallax-container .side-text {
  position: absolute;
  top: 0;
  right: 0;
  width: 8.9vw;
  will-change: transform;
  transform: translateY(0);
  margin-top: 9.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .parallax-container .side-text {
    width: 8.6vw;
    margin-top: 0;
  }
}

/*ファーストビュー*/
.firstview {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #ffffff;
}
.firstview__copy {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  max-width: 83%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .firstview__copy {
    max-width: 100%;
    margin-bottom: 6.1vw;
    margin-left: 6.8vw;
  }
}
.firstview__text {
  font-family: "Geologica", sans-serif;
  font-size: 1.7vw;
  font-weight: 900;
  color: #23aa46;
  margin-left: 0.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .firstview__text {
    font-size: 4.7vw;
  }
}
.firstview__heading {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 10.4vw;
  font-weight: 900;
  line-height: 1.2;
  color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .firstview__heading {
    font-size: 18.1vw;
  }
}

/*スライドショーの設定*/
.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: anime 36s 0s infinite;
}

.slide1 {
  background-image: url("../assets/img/top/fv_img01.jpg");
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .slide1 {
    background-image: url("../assets/img/top/fv_img01-sp.png");
  }
}

.slide2 {
  background-image: url("../assets/img/top/fv_img02.jpg");
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .slide2 {
    background-image: url("../assets/img/top/fv_img02-sp.jpg");
  }
}

.slide3 {
  background-image: url("../assets/img/top/fv_img03.jpg");
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .slide3 {
    background-image: url("../assets/img/top/fv_img03-sp.png");
  }
}

.slide4 {
  background-image: url("../assets/img/top/fv_img01.jpg");
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .slide4 {
    background-image: url("../assets/img/top/fv_img01-sp.png");
  }
}

.slide5 {
  background-image: url("../assets/img/top/fv_img02.jpg");
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .slide5 {
    background-image: url("../assets/img/top/fv_img02-sp.jpg");
  }
}

.slide6 {
  background-image: url("../assets/img/top/fv_img03.jpg");
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .slide6 {
    background-image: url("../assets/img/top/fv_img03-sp.png");
  }
}

.slide:nth-of-type(2) {
  animation-delay: 6s;
}

.slide:nth-of-type(3) {
  animation-delay: 12s;
}

.slide:nth-of-type(4) {
  animation-delay: 18s;
}

.slide:nth-of-type(5) {
  animation-delay: 24s;
}

.slide:nth-of-type(6) {
  animation-delay: 30s;
}

@keyframes anime {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
    transform: scale(1.2);
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}
/*ファーストビュー下*/
.catch-bg {
  background-image: url("../assets/img/top/catch_img01.png");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 10vw 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .catch-bg {
    padding: 20vw 0;
  }
}

.catch__text {
  font-size: 2.8vw;
  font-weight: 900;
  line-height: 2;
  color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .catch__text {
    font-size: 4.8vw;
  }
}

/*円形背景*/
.story-wrapper {
  position: relative;
  overflow: hidden;
  padding-top: 10.4vw;
  margin-top: -4vw;
  z-index: 0;
}
.story-wrapper--beige::after, .story-wrapper--white::after {
  content: "";
  position: absolute;
  top: 10.4vw;
  left: 0;
  width: 100%;
  height: calc(100% - 7vw);
  z-index: -1;
}
.story-wrapper--beige::after {
  background-color: #f6f4f2;
}
.story-wrapper--white::after {
  background-color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .story-wrapper {
    padding-top: 20vw;
    margin-top: -6vw;
  }
  .story-wrapper--beige::after, .story-wrapper--white::after {
    top: 20vw;
    height: calc(100% - 10vw);
  }
}

.story-wrapper--beige {
  position: relative;
  overflow: hidden;
  z-index: 10;
}

/*SP版 NEXT PERSON 上padding調整*/
.story-wrapper2 {
  position: relative;
  overflow: hidden;
  padding-top: 10.4vw;
  margin-top: -4vw;
  z-index: 0;
}
.story-wrapper2--beige::after, .story-wrapper2--white::after {
  content: "";
  position: absolute;
  top: 10.4vw;
  left: 0;
  width: 100%;
  height: calc(100% - 7vw);
  z-index: -1;
}
.story-wrapper2--beige::after {
  background-color: #f6f4f2;
}
.story-wrapper2--white::after {
  background-color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .story-wrapper2 {
    padding-top: 6vw;
    margin-top: -6vw;
  }
  .story-wrapper2--beige::after, .story-wrapper2--white::after {
    top: 6vw;
    height: calc(100% - 10vw);
  }
}

.bg-ellipse {
  position: absolute;
  top: 0; /* 丸みの高さ（15vwの半分くらい）だけ上にずらす */
  left: 0;
  width: 120vw; /* 画面横幅より少し大きく */
  height: 15vw; /* 丸みの高さ */
  margin-left: -10vw; /* 横にはみ出させて丸みをしっかり見せる */
  background-color: #f6f4f2;
  border-top-left-radius: 100vw 15vw;
  border-top-right-radius: 100vw 15vw;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0); /* iOS描画バグ対策 */
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .bg-ellipse {
    height: 20vw;
    border-top-left-radius: 100vw 20vw;
    border-top-right-radius: 100vw 20vw;
  }
}

.bg-ellipse--white {
  position: absolute;
  top: 0; /* 丸みの高さ（15vwの半分くらい）だけ上にずらす */
  left: 0;
  width: 120vw; /* 画面横幅より少し大きく */
  height: 15vw; /* 丸みの高さ */
  margin-left: -10vw; /* 横にはみ出させて丸みをしっかり見せる */
  background-color: #ffffff;
  border-top-left-radius: 100vw 15vw;
  border-top-right-radius: 100vw 15vw;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0); /* iOS描画バグ対策 */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .bg-ellipse--white {
    height: 20vw;
    border-top-left-radius: 100vw 20vw;
    border-top-right-radius: 100vw 20vw;
  }
}

.content-wrapper {
  position: relative;
  z-index: 1;
  padding: 2vw 10vw 0 10vw;
  background-color: #f6f4f2;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .content-wrapper {
    padding: 0;
  }
}

.content-wrapper--white {
  position: relative;
  z-index: 1;
  padding: 2vw 10vw 0 10vw;
  background-color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .content-wrapper--white {
    padding: 6.9vw 0 0 0;
  }
}

/*STORY*/
.story {
  position: relative;
  /*story_buttonクリックで表示/非表示切り替え*/
}
.story__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4vw;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .story__title {
    font-size: 5.3vw;
    margin-bottom: 6.7vw;
  }
}
.story__decoration {
  position: absolute;
  top: -1.7vw;
  right: -1.7vw;
  width: 13.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .story__decoration {
    position: static;
    width: 23.3vw;
    margin: 0 auto;
    margin-bottom: 13.3vw;
  }
}
.story__img {
  width: 100%;
  margin-bottom: 3.4vw;
}
.story__body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.1vw;
  font-weight: 500;
  line-height: 2.1;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .story__body {
    font-size: 3.7vw;
  }
}
.story__button {
  position: relative;
  width: 13.9vw;
  padding: 0.8vw 1.6vw;
  margin: 0 auto;
  margin-top: 1.7vw;
  background-color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .story__button {
    width: 40vw;
    padding: 2.5vw 10.9vw;
    margin-top: 6.7vw;
  }
}
.story__button .label {
  font-family: "Geologica", sans-serif;
  font-size: 1vw;
  color: #000000;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .story__button .label {
    font-size: 2.9vw;
  }
}
.story__button .icon {
  position: absolute;
  right: 0.7vw;
  font-family: "Geologica", sans-serif;
  font-size: 1.4vw;
  color: #23aa46;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .story__button .icon {
    font-size: 4vw;
  }
}
.story__button:hover, .story__button:active {
  background-color: #23aa46;
  transition: 0.3s;
}
.story__button:hover .label, .story__button:hover .icon, .story__button:active .label, .story__button:active .icon {
  color: #ffffff;
  transition: 0.3s;
}
.story__copy--hide {
  display: none;
}
.story__copy--hide.is-visible {
  display: block;
}

.story:first-of-type {
  margin-bottom: 8.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .story:first-of-type {
    margin-bottom: 26.7vw;
  }
}

/*ABOUT*/
.about {
  background-color: #ffffff;
  padding: 1px 0;
}
.about__container {
  position: relative;
}
.about__text {
  font-size: 1.1vw;
  font-weight: 500;
  line-height: 2.1;
  color: #000000;
  margin-top: 5.9vw;
  margin-bottom: 8.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .about__text {
    font-size: 3.7vw;
    margin: 13.3vw 0;
  }
}
.about__button {
  position: relative;
  background-color: #64c832;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 21.2vw;
  padding: 1.4vw 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .about__button {
    width: 100%;
    padding: 5.3vw 0;
    margin-top: 20vw;
  }
}
.about__button--body {
  font-family: "Geologica", sans-serif;
  font-size: 1vw;
  font-weight: 500;
  color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .about__button--body {
    font-size: 4vw;
  }
}
.about__button--append {
  position: absolute;
  right: 2.1vw;
  width: 2.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .about__button--append {
    width: 8vw;
  }
}
.about__button:hover, .about__button:active {
  background-color: #f5b800;
  transition: 0.3s;
}
.about__img {
  position: absolute;
  top: 4.8vw;
  right: 0;
  width: 49vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .about__img {
    position: static;
    width: 100%;
  }
}

/*PERSON*/
.person__container {
  padding: 10.4vw 0;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container {
    padding: 10.4vw 0;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container {
    padding: 20vw 0 13.3vw 0;
  }
}
.person__container .swiper-wrapper {
  margin-top: 5.9vw;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-wrapper {
    margin-top: 5.9vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-wrapper {
    margin-top: 20vw;
  }
}
.person__container .swiper-slide {
  width: 16.66%;
  overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-slide {
    width: 16.66%;
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide {
    width: auto;
    margin-right: 10.7vw;
  }
}
.person__container .swiper-slide__figure {
  width: 100%;
  position: relative;
  margin-bottom: 1.3vw;
  overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-slide__figure {
    width: 100%;
    position: relative;
    margin-bottom: 1.3vw;
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide__figure {
    margin-bottom: 4.7vw;
  }
}
.person__container .swiper-slide__img {
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}
.person__container .swiper-slide__number {
  position: absolute;
  bottom: 0.6vw;
  left: 0.6vw;
  width: 4.6vw;
  transform: translateZ(0);
  will-change: transform;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-slide__number {
    position: absolute;
    bottom: 0.6vw;
    left: 0.6vw;
    width: 4.6vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide__number {
    bottom: 2.7vw;
    left: 2.1vw;
    width: 16.3vw;
  }
}
.person__container .swiper-slide__title {
  font-size: 1.4vw;
  font-weight: 700;
  line-height: 1.6;
  color: #000000;
  margin-bottom: 1.4vw;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-slide__title {
    font-size: 1.4vw;
    font-weight: 700;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 1.4vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide__title {
    font-size: 4.3vw;
    margin-bottom: 3.2vw;
  }
}
.person__container .swiper-slide__name {
  font-family: "Geologica", sans-serif;
  font-size: 1.7vw;
  font-weight: 300;
  line-height: 1;
  color: #23aa46;
  margin-bottom: 1vw;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-slide__name {
    font-family: "Geologica", sans-serif;
    font-size: 1.7vw;
    font-weight: 300;
    line-height: 1;
    color: #23aa46;
    margin-bottom: 1vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide__name {
    font-size: 5.3vw;
    margin-bottom: 4.9vw;
  }
}
.person__container .swiper-slide__name span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.8vw;
  font-weight: 400;
  color: #000000;
  margin-left: 0.7vw;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-slide__name span {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.8vw;
    font-weight: 400;
    color: #000000;
    margin-left: 0.7vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide__name span {
    font-size: 2.7vw;
  }
}
.person__container .swiper-slide__name--orange {
  font-family: "Geologica", sans-serif;
  font-size: 1.7vw;
  font-weight: 300;
  line-height: 1;
  color: #f08c1e;
  margin-bottom: 1vw;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-slide__name--orange {
    font-family: "Geologica", sans-serif;
    font-size: 1.7vw;
    font-weight: 300;
    line-height: 1;
    color: #f08c1e;
    margin-bottom: 1vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide__name--orange {
    font-size: 5.3vw;
    margin-bottom: 4.9vw;
  }
}
.person__container .swiper-slide__name--orange span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.8vw;
  font-weight: 400;
  color: #000000;
  margin-left: 0.7vw;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-slide__name--orange span {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.8vw;
    font-weight: 400;
    color: #000000;
    margin-left: 0.7vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide__name--orange span {
    font-size: 2.7vw;
  }
}
.person__container .swiper-slide__tag {
  display: flex;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-slide__tag {
    display: flex;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide__tag {
    flex-direction: column;
  }
}
.person__container .swiper-slide__tag--item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #ffffff;
  padding: 0.2vw 0.5vw;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-slide__tag--item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    background-color: #ffffff;
    padding: 0.2vw 0.5vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide__tag--item {
    justify-content: flex-start;
    padding: 1.5vw 1.5vw;
  }
}
.person__container .swiper-slide__tag--item span {
  font-size: 0.8vw;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-slide__tag--item span {
    font-size: 0.8vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide__tag--item span {
    font-size: 3.2vw;
  }
}
.person__container .swiper-slide__tag--item:not(:last-of-type) {
  margin-right: 0.7vw;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .person__container .swiper-slide__tag--item:not(:last-of-type) {
    margin-right: 0.7vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide__tag--item:not(:last-of-type) {
    margin-right: 0;
    margin-bottom: 1.3vw;
  }
}
.person__container .swiper-slide:hover .swiper-slide__img {
  transform: scale(1.1);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide:hover .swiper-slide__img {
    transform: scale(1);
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide:first-child {
    margin-left: 10.7vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__container .swiper-slide:last-child {
    margin-right: 0;
  }
}

/*Swiperスタイル*/
/* スライド拡大縮小 */
.swiper-container-custom {
  position: relative;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .swiper-container-custom {
    position: relative;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .swiper-container-custom {
    padding-bottom: 25.6vw;
  }
}

.swiper-button-wrapper {
  position: absolute;
  top: -2.5vw;
  right: 18.8vw;
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 10;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .swiper-button-wrapper {
    position: absolute;
    top: -2.5vw;
    right: 18.8vw;
    display: flex;
    flex-direction: row;
    gap: 10px;
    z-index: 10;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .swiper-button-wrapper {
    top: auto;
    bottom: 5vw;
    right: auto;
    left: 10.8vw;
  }
}

.swiper-button-prev,
.swiper-button-next {
  all: unset;
  width: 3.8vw !important;
  height: 3.8vw !important;
  background-color: #23aa46;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: static !important;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .swiper-button-prev,
  .swiper-button-next {
    all: unset;
    width: 3.8vw !important;
    height: 3.8vw !important;
    background-color: #23aa46;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: static !important;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 10.7vw !important;
    height: 10.7vw !important;
  }
}

.swiper-button-prev:after, .swiper-button-next:after {
  color: #ffffff;
  font-size: 1.8vw !important;
  font-weight: 100;
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .swiper-button-prev:after, .swiper-button-next:after {
    color: #ffffff;
    font-size: 1.8vw !important;
    font-weight: 100;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .swiper-button-prev:after, .swiper-button-next:after {
    font-size: 5.7vw !important;
    font-weight: 100;
  }
}

.swiper-slide-inner {
  transition: transform 0.5s ease, opacity 0.5s ease;
  transform: scale(0.8);
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .swiper-slide-inner {
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: scale(0.8);
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .swiper-slide-inner {
    transform: scale(1);
  }
}

.swiper-slide-active .swiper-slide-inner {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
}

/*WORKSTYLE & CAREER*/
/*タブ切り替え全体のスタイル 下記RECRUIT INFOでも.tabのスタイルあり、重複している場合は下記も修正をお願いします*/
.tab {
  margin-top: 50px;
  margin: 0 auto;
  margin-top: 5.9vw;
  /*働き方のタブ*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab {
    margin-top: 13.3vw;
  }
}
.tab__category {
  position: relative;
  z-index: 0;
  font-size: 1.5vw;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  height: 4.4vw;
  background-color: #e4e4df;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  transition: all 0.2s ease;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category {
    font-size: 4.7vw;
    height: 12vw;
  }
}
.tab__category:first-of-type {
  margin-right: 1.4vw;
  width: calc(50% - 0.7vw);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category:first-of-type {
    margin-right: 4vw;
    width: calc(50% - 2vw);
  }
}
.tab__category:last-of-type {
  width: calc(50% - 0.7vw);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category:last-of-type {
    width: calc(50% - 2vw);
  }
}
.tab__category:hover {
  transform: translateY(10px); /* 10px下に移動 */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category:hover {
    transform: translateY(4px); /* 8px下に移動 */
  }
}
.tab__content {
  display: none;
  clear: both;
}
.tab__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 3.1vw;
  background-color: #f6f4f2;
  padding: 4.5vw 5.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body {
    gap: 6.7vw;
    padding: 8vw 6.7vw;
  }
}
.tab__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: calc((100% - 6.2vw) / 3);
  max-width: calc((100% - 6.2vw) / 3);
  height: 21.5vw;
  padding: 2.1vw 1.7vw 2.1vw 1.7vw;
  background-color: #ffffff;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .tab__item {
    height: 23.5vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__item {
    width: 100%;
    max-width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    padding: 6vw 6.8vw;
  }
}
.tab__item--img {
  width: 4.9vw;
  margin-bottom: 1.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__item--img {
    width: 14.9vw;
    margin-bottom: 4vw;
  }
}
.tab__item--title {
  font-size: 1.4vw;
  font-weight: 900;
  line-height: 1.6;
  color: #64c832;
  text-align: center;
  margin-bottom: 1.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__item--title {
    font-size: 4.3vw;
    margin-bottom: 5vw;
  }
}
.tab__item--title.color-orange {
  font-size: 1.4vw;
  font-weight: 900;
  line-height: 1.6;
  color: #f08c1e;
  margin-bottom: 1.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__item--title.color-orange {
    font-size: 4.3vw;
    margin-bottom: 5vw;
  }
}
.tab__item--text {
  font-size: 0.9vw;
  line-height: 2;
  color: #282828;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__item--text {
    font-size: 3.2vw;
    line-height: 1.3;
  }
}
.tab__item--text small {
  font-size: 0.8vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__item--text small {
    font-size: 2.7vw;
  }
}

/*研修制度のタブ*/
#career__content .tab__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: calc((100% - 6.2vw) / 3);
  max-width: calc((100% - 6.2vw) / 3);
  height: 22.8vw;
  padding: 2.7vw 1.7vw 2.7vw 1.7vw;
  background-color: #ffffff;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  #career__content .tab__item {
    width: 100%;
    max-width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    padding: 6vw 6.8vw;
  }
}

#career__content .tab__item:nth-of-type(1), #career__content .tab__item:nth-of-type(2), #career__content .tab__item:nth-of-type(3) {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: calc((100% - 6.2vw) / 3);
  max-width: calc((100% - 6.2vw) / 3);
  height: 25.4vw;
  padding: 2.7vw 1.7vw 2.7vw 1.7vw;
  background-color: #ffffff;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  #career__content .tab__item:nth-of-type(1), #career__content .tab__item:nth-of-type(2), #career__content .tab__item:nth-of-type(3) {
    width: 100%;
    max-width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    padding: 6vw 6.8vw;
  }
}

/*ラジオボタンを全て消す*/
input[name=tab__category] {
  display: none;
}

/*タブの制御*/
/*選択されているタブのコンテンツのみを表示*/
#workstyle:checked ~ #workstyle__content,
#career:checked ~ #career__content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tab input:checked + .tab__category {
  background-color: #f6f4f2;
  color: #64c832;
}

.tab input:checked + .tab__category.color-orange {
  background-color: #f6f4f2;
  color: #f08c1e;
}

/*パララックス*/
/* 背景画像の見えている高さ */
.parallax {
  height: 500px;
  background-image: url("../assets/img/top/parallax_img01.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .parallax {
    height: 100vw;
    background-attachment: scroll;
  }
}

/*RECRUIT INFO*/
/*------------------------------------------------------------------*/
/*タブの制御(新卒とキャリア)*/
#new-graduate_recruit:checked ~ #new-graduate_recruit__content {
  display: block;
}

#career_recruit:checked ~ #career_recruit__content {
  display: block;
}

/*ラジオボタンを全て消す*/
input[name=tab__category2] {
  display: none;
}

/*選択されているタブのスタイルを変える*/
.tab input:checked + .tab__category2 {
  background-color: #f6f4f2;
  color: #23aa46;
}

.tab input:checked + .tab__category2.color-lightgreen {
  background-color: #f6f4f2;
  color: #64c832;
}

/*------------------------------------------------------------------*/
/*タブの制御(キャリア採用内の職種)*/
/*営業(コンベヤ)*/
#sales-conveyor:checked ~ #sales-conveyor__content {
  display: block;
}

#sales-energy:checked ~ #sales-energy__content {
  display: block;
}

/*設計(機械設計)*/
#design-machine:checked ~ #design-machine__content {
  display: block;
}

#design-machine:checked ~ #design-machine__content {
  display: block;
}

/*設計(電気設計)*/
#design-electricity:checked ~ #design-electricity__content {
  display: block;
}

#design-electricity:checked ~ #design-electricity__content {
  display: block;
}

/*設計(計画設計)*/
#design-plan:checked ~ #design-plan__content {
  display: block;
}

#design-plan:checked ~ #design-plan__content {
  display: block;
}

/*設計(構造設計)*/
#design-structure:checked ~ #design-structure__content {
  display: block;
}

#design-structure:checked ~ #design-structure__content {
  display: block;
}

/*ラジオボタンを全て消す*/
input[name=tab__category3] {
  display: none;
}

/*選択されているタブのスタイルを変える*/
.tab input:checked + .tab__category3 {
  background-color: #64c832;
  color: #ffffff;
  border: none;
}

/*タブのスタイル*/
.tab {
  margin-top: 50px;
  margin: 0 auto;
  margin-top: 5.9vw;
  /*--------------------------------------------------------*/
  /*新卒・キャリアタブ*/
  /*--------------------------------------------------------*/
  /*職種タブ*/
  /*SP版のみ*/
  /*キャリア採用タブのtab__body部分のみpadding変更、それ以外はtab__body3と同じ*/
  /*ENTRYボタン*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab {
    margin-top: 13.3vw;
  }
}
.tab__category2 {
  position: relative;
  z-index: 0;
  font-size: 1.5vw;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  height: 4.4vw;
  background-color: #e4e4df;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  transition: all 0.2s ease;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category2 {
    font-size: 4.7vw;
    height: 12vw;
  }
}
.tab__category2:first-of-type {
  margin-right: 1.4vw;
  width: calc(50% - 0.7vw);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category2:first-of-type {
    margin-right: 4vw;
    width: calc(50% - 2vw);
  }
}
.tab__category2:last-of-type {
  width: calc(50% - 0.7vw);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category2:last-of-type {
    width: calc(50% - 2vw);
  }
}
.tab__category2:hover {
  transform: translateY(10px); /* 10px下に移動 */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category2:hover {
    transform: translateY(4px); /* 8px下に移動 */
  }
}
.tab__category3 {
  position: relative;
  z-index: 0;
  font-size: 1.1vw;
  font-weight: 500;
  line-height: 1;
  width: 9.7vw;
  height: 6.3vw;
  margin-top: 5.2vw;
  border: 0.5px solid #787878;
  color: #787878;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  float: left;
  transition: all 0.2s ease;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category3 {
    font-size: 3.7vw;
    width: 38vw;
    height: 14.7vw;
    margin-top: 4vw;
  }
}
.tab__category3 small {
  font-size: 0.8vw;
  margin-top: 0.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category3 small {
    font-size: 2.7vw;
    margin-top: 2vw;
  }
}
.tab__category3:not(:last-of-type) {
  margin-right: 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category3:not(:last-of-type) {
    margin-right: 0;
  }
}
.tab .career__tab:first-of-type {
  margin-left: 3.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab .career__tab:first-of-type {
    margin-left: 0;
  }
}
.tab .career__tab:last-of-type {
  margin-right: 3.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab .career__tab:last-of-type {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category3:first-of-type, .tab__category3:nth-of-type(2) {
    margin-top: 10.1vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__category3:nth-of-type(odd) {
    margin-right: 3.5vw;
  }
}
.tab__category3:hover {
  background-color: #64c832;
  color: #ffffff;
}
.tab__body3 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #f6f4f2;
  padding: 5.2vw 5.9vw;
  /*table*/
  /*キャリア採用職種タブのtable*/
  /*選考フロー*/
  /*ENTRYはこちら*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 {
    padding: 10vw 6.7vw 20vw 6.7vw;
  }
}
.tab__body3--title {
  font-size: 2.1vw;
  font-weight: 700;
  color: #282828;
  margin-top: 5.9vw;
  margin-bottom: 3.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3--title {
    font-size: 5.3vw;
    margin-top: 13.3vw;
    margin-bottom: 6.4vw;
  }
}
.tab__body3 .tab__table {
  padding-bottom: 5.9vw;
  border-bottom: 5px solid #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__table {
    padding-bottom: 13.3vw;
  }
}
.tab__body3 .tab__table table {
  text-align: left;
  background-color: #ffffff;
  font-size: 1.1vw;
  width: 55.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__table table {
    font-size: 3.2vw;
    width: 100%;
  }
}
.tab__body3 .tab__table tr {
  border-bottom: 0.5px solid #282828;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__table tr {
    display: flex;
    flex-direction: column;
  }
}
.tab__body3 .tab__table tr:first-of-type {
  border-top: 0.5px solid #282828;
}
.tab__body3 .tab__table th {
  font-weight: 500;
  background-color: #23aa46;
  color: #ffffff;
  width: 11.9vw;
  padding: 2.1vw 0 2.1vw 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__table th {
    width: 100%;
    padding: 3.3vw 0 3.3vw 3.3vw;
  }
}
.tab__body3 .tab__table td {
  color: #000000;
  padding: 2.1vw 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__table td {
    padding: 3.6vw 3.3vw;
  }
}
.tab__body3 .tab__table2 table {
  text-align: left;
  background-color: #ffffff;
  font-size: 1.1vw;
  width: 55.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__table2 table {
    font-size: 3.2vw;
    width: 100%;
  }
}
.tab__body3 .tab__table2 tr {
  border-bottom: 0.5px solid #282828;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__table2 tr {
    display: flex;
    flex-direction: column;
  }
}
.tab__body3 .tab__table2 tr:first-of-type {
  border-top: 0.5px solid #282828;
}
.tab__body3 .tab__table2 th {
  font-weight: 500;
  background-color: #64c832;
  color: #ffffff;
  width: 11.9vw;
  padding: 2.1vw 0 2.1vw 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__table2 th {
    width: 100%;
    padding: 3.3vw 0 3.3vw 3.3vw;
  }
}
.tab__body3 .tab__table2 td {
  color: #000000;
  padding: 2.1vw 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__table2 td {
    padding: 3.6vw 3.3vw;
  }
}
.tab__body3 .tab__flow {
  text-align: center;
  padding-bottom: 5.9vw;
  border-bottom: 5px solid #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__flow {
    width: 100%;
    padding-bottom: 13.3vw;
  }
}
.tab__body3 .tab__flow--img {
  width: 62.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__flow--img {
    width: 100%;
  }
}
.tab__body3 .tab__entry {
  text-align: center;
}
.tab__body3 .tab__entry--img {
  display: flex;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__entry--img {
    flex-direction: column;
    align-items: center;
  }
}
.tab__body3 .tab__entry--img a {
  transition: 0.7s;
}
.tab__body3 .tab__entry--img a:hover {
  transform: 0.7s;
  opacity: 0.7;
}
.tab__body3 .tab__entry--img a:not(:last-of-type) {
  margin-right: 4.2vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__entry--img a:not(:last-of-type) {
    margin-right: 0;
    margin-bottom: 5.3vw;
  }
}
.tab__body3 .tab__entry--img img {
  width: 19.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body3 .tab__entry--img img {
    width: 66.7vw;
  }
}
.tab__body4 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #f6f4f2;
  padding: 4.5vw 5.9vw 0 5.9vw;
  /*table*/
  /*キャリア採用職種タブのtable*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body4 {
    padding: 10vw 0 0 0;
  }
}
.tab__body4--title {
  font-size: 2.1vw;
  font-weight: 700;
  color: #282828;
  margin-top: 5vw;
  margin-bottom: 3.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body4--title {
    font-size: 5.3vw;
    margin-top: 12vw;
    margin-bottom: 6.4vw;
  }
}
.tab__body4 .tab__table {
  padding-bottom: 6vw;
  border-bottom: 5px solid #ffffff;
}
.tab__body4 .tab__table table {
  text-align: left;
  background-color: #ffffff;
  font-size: 1.1vw;
  width: 55.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body4 .tab__table table {
    font-size: 3.2vw;
    width: 100%;
  }
}
.tab__body4 .tab__table tr {
  border-bottom: 0.5px solid #282828;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body4 .tab__table tr {
    display: flex;
    flex-direction: column;
  }
}
.tab__body4 .tab__table tr:first-of-type {
  border-top: 0.5px solid #282828;
}
.tab__body4 .tab__table th {
  font-weight: 500;
  background-color: #23aa46;
  color: #ffffff;
  width: 11.9vw;
  padding: 2.1vw 0 2.1vw 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body4 .tab__table th {
    width: 100%;
    padding: 3.3vw 0 3.3vw 3.3vw;
  }
}
.tab__body4 .tab__table td {
  color: #000000;
  padding: 2.1vw 0 2.1vw 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body4 .tab__table td {
    padding: 3.6vw 3.3vw;
  }
}
.tab__body4 .tab__table2 {
  /*待遇のborder*/
}
.tab__body4 .tab__table2 table {
  text-align: left;
  background-color: #ffffff;
  font-size: 1.1vw;
  width: 55.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body4 .tab__table2 table {
    font-size: 3.2vw;
    width: 100%;
  }
}
.tab__body4 .tab__table2 tr {
  border-bottom: 0.5px solid #282828;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body4 .tab__table2 tr {
    display: flex;
    flex-direction: column;
  }
}
.tab__body4 .tab__table2 tr:first-of-type {
  border-top: 0.5px solid #282828;
}
.tab__body4 .tab__table2 th {
  font-weight: 500;
  background-color: #64c832;
  color: #ffffff;
  width: 11.9vw;
  padding: 2.1vw 0 2.1vw 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body4 .tab__table2 th {
    width: 100%;
    padding: 3.3vw 0 3.3vw 3.3vw;
  }
}
.tab__body4 .tab__table2 td {
  color: #000000;
  padding: 2.1vw 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab__body4 .tab__table2 td {
    padding: 3.6vw 3.3vw;
  }
}
.tab__body4 .tab__table2 .borderbtm-none {
  border-bottom: none !important;
}
.tab__body4 .tab__table2 tr.borderbtm-none td {
  padding-bottom: 0 !important;
}
.tab .tab__entry--container {
  padding: 10.4vw 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab .tab__entry--container {
    padding: 20vw 0;
  }
}
.tab .tab__entry--btn {
  position: relative;
  width: 41.7vw;
  margin: 0 auto;
  padding: 7.4vw;
  background-color: #64c832;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab .tab__entry--btn {
    width: 100%;
    padding: 13.3vw 0;
  }
}
.tab .tab__entry--btn span {
  font-family: "Geologica", sans-serif;
  font-size: 2.4vw;
  font-weight: 900;
  color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab .tab__entry--btn span {
    font-size: 6.7vw;
  }
}
.tab .tab__entry--btn img {
  position: absolute;
  width: 2.1vw;
  right: 3.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .tab .tab__entry--btn img {
    width: 8vw;
  }
}
.tab .tab__entry--btn:hover {
  background-color: #f5b800;
  transition: 0.3s;
}

/*ホバー タブ切替え時重なり*/
#career_recruit:checked ~ #career_recruit__content {
  position: relative;
  z-index: 1;
}

/*footer前ボタンエリア*/
.btnarea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.2vw;
  background-image: url("../assets/img/top/button-topbg_img01.png");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 10.4vw 0;
  /*新卒採用ボタン*/
  /*キャリア採用ボタン*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea {
    flex-direction: column;
    gap: 8vw;
    padding: 13.3vw 0 17.3vw 0;
  }
}
.btnarea__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29.2vw;
  padding: 7.5vw 0;
  background-color: #23aa46;
  color: #ffffff;
  transition: 0.3s;
  border: none;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea__button {
    width: 86.7vw;
    padding: 14vw 0;
  }
}
.btnarea__button--body {
  font-size: 1.7vw;
  font-weight: 900;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea__button--body {
    font-size: 5.3vw;
  }
}
.btnarea__button--append {
  position: absolute;
  right: 2.8vw;
  width: 2.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea__button--append {
    width: 8vw;
  }
}
.btnarea__button:hover, .btnarea__button:active {
  background-color: #f08c1e;
  transition: 0.3s;
}
.btnarea__button2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29.2vw;
  padding: 7.5vw 0;
  background-color: #64c832;
  color: #ffffff;
  border: none;
  transition: 0.3s;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea__button2 {
    width: 86.7vw;
    padding: 14vw 0;
  }
}
.btnarea__button2--body {
  font-size: 1.7vw;
  font-weight: 900;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea__button2--body {
    font-size: 5.3vw;
  }
}
.btnarea__button2--append {
  position: absolute;
  right: 2.8vw;
  width: 2.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea__button2--append {
    width: 8vw;
  }
}
.btnarea__button2:hover, .btnarea__button2:active {
  background-color: #f5b800;
  transition: 0.3s;
}

/*ファーストビュー*/
.about__fv {
  display: flex;
  align-items: center;
  height: -moz-fit-content;
  height: fit-content;
  margin: 9.7vw 0 3.5vw 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .about__fv {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    margin-top: 16vw;
    margin-bottom: 20vw;
  }
}
.about__fv--text {
  max-width: 62.5vw;
  margin: 0 auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .about__fv--text {
    max-width: 100%;
    margin: 0;
  }
}
.about__fv h2 {
  font-family: "Geologica", sans-serif;
  font-size: 5.9vw;
  font-weight: 900;
  line-height: 1;
  color: #64c832;
  margin-bottom: 4.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .about__fv h2 {
    font-size: 13.3vw;
    margin-bottom: 5.3vw;
    margin-left: 5.3vw;
  }
}
.about__fv p {
  font-size: 2.1vw;
  font-weight: 700;
  line-height: 1.7;
  color: #282828;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .about__fv p {
    font-size: 5.3vw;
    margin-left: 5.3vw;
    margin-bottom: 5.3vw;
  }
}
.about__fv .about__bg {
  width: 38.2vw;
  margin-right: 0.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .about__fv .about__bg {
    width: 100%;
  }
}

/*TOPIC01*/
.topic01 {
  background-image: url("../assets/img/about/topic01_bg01.jpg");
  background-size: cover;
  padding-top: 14.6vw;
  padding-bottom: 13.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 {
    padding-top: 25.1vw;
    padding-bottom: 25.3vw;
  }
}
.topic01__number {
  position: absolute;
  top: -11.4vw;
  left: 50%;
  transform: translateX(-50%);
  width: 31.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01__number {
    top: -18.3vw;
    width: 50.7vw;
  }
}
.topic01__heading {
  position: relative;
  font-size: 4.5vw;
  font-weight: 900;
  color: #f08c1e;
  text-align: center;
  margin-bottom: 9.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01__heading {
    font-size: 8vw;
    margin-bottom: 14vw;
  }
}
.topic01__heading:before {
  background-color: #f08c1e;
  bottom: -2.9vw; /* 線の位置 */
  content: "";
  height: 2.5px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 7.4vw; /* 線の長さ */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01__heading:before {
    bottom: -6.7vw;
    width: 13.3vw;
  }
}
.topic01 .message {
  position: relative;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5.2vw 6.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 .message {
    padding: 10.7vw 3.3vw 13.3vw 3.3vw;
  }
}
.topic01 .message__heading {
  position: relative;
  font-size: 4.5vw;
  font-weight: 900;
  color: #f08c1e;
  text-align: center;
  margin-bottom: 10.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 .message__heading {
    margin-bottom: 14vw;
  }
}
.topic01 .message__heading:before {
  background-color: #f08c1e;
  bottom: -2.9vw; /* 線の位置 */
  content: "";
  height: 2.5px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 7.4vw; /* 線の長さ */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 .message__heading:before {
    width: 13.3vw;
  }
}
.topic01 .message__flex {
  display: flex;
  align-items: center;
  margin-bottom: 5.2vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 .message__flex {
    flex-direction: column;
  }
}
.topic01 .message__figure {
  margin-right: 4.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 .message__figure {
    margin-right: 0;
  }
}
.topic01 .message__figure img {
  width: 27.1vw;
  margin-bottom: 2.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 .message__figure img {
    width: 53.3vw;
  }
}
.topic01 .message__header {
  color: #282828;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 .message__header {
    margin-bottom: 10.7vw;
  }
}
.topic01 .message__header--title {
  font-size: 1vw;
  margin-bottom: 1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 .message__header--title {
    font-size: 3.2vw;
    margin-bottom: 2.7vw;
  }
}
.topic01 .message__header--name {
  font-size: 2.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 .message__header--name {
    font-size: 5.3vw;
    margin-bottom: 2.7vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 .message__text {
    margin-bottom: 10.7vw;
  }
}
.topic01 .message__text h3 {
  font-size: 2.4vw;
  font-weight: 700;
  line-height: 2;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: linear-gradient(to right, #f08c1e 0%, #f08c1e 100%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  color: #ffffff;
  padding: 0;
  animation: none;
}
.topic01 .message__text h3.is-animated {
  animation: highlightIn 0.6s ease-out forwards;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 .message__text h3 {
    font-size: 5.3vw;
  }
}
.topic01 .message__text p {
  font-size: 1.1vw;
  font-weight: 500;
  line-height: 2.1;
  color: #282828;
  margin-top: 2.8vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic01 .message__text p {
    font-size: 3.7vw;
  }
}

@keyframes highlightIn {
  to {
    background-size: 100% 100%;
  }
}
/*TOPIC02*/
.topic02 {
  margin-bottom: 8.7vw;
  /*左寄せ*/
  /*右寄せ*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02 {
    margin-bottom: 10.7vw;
  }
}
.topic02__number {
  position: absolute;
  top: -6vw;
  left: 50%;
  transform: translateX(-50%);
  width: 31.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__number {
    top: -10vw;
    width: 50.7vw;
  }
}
.topic02__heading {
  position: relative;
  font-size: 4.5vw;
  font-weight: 900;
  line-height: 1.2;
  color: #64c832;
  text-align: center;
  margin-top: 7.2vw;
  margin-bottom: 9.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__heading {
    font-size: 8vw;
    margin-bottom: 14vw;
  }
}
.topic02__heading:before {
  background-color: #64c832;
  bottom: -2.9vw; /* 線の位置 */
  content: "";
  height: 2.5px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 7.4vw; /* 線の長さ */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__heading:before {
    bottom: -6.7vw;
    width: 13.3vw;
  }
}
.topic02 p {
  font-size: 1.1vw;
  font-weight: 500;
  line-height: 2.1;
  margin-bottom: 6.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02 p {
    font-size: 3.7vw;
  }
}
.topic02__figure {
  width: 59vw;
  margin: 0 auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__figure {
    width: 100%;
  }
}
.topic02__content {
  display: flex;
  gap: 4.9vw;
  margin-right: auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__content {
    max-width: 86%;
    flex-direction: column;
    gap: 6.7vw;
  }
}
.topic02__content--figure img {
  width: 45.8vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__content--figure img {
    width: 100%;
  }
}
.topic02__content--text {
  width: 30.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__content--text {
    width: 100%;
  }
}
.topic02__content--text span {
  font-size: 1.4vw;
  font-weight: 900;
  padding-left: 0.7vw;
  display: block;
  color: #ffffff;
  margin-bottom: 2.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__content--text span {
    font-size: 4.3vw;
    margin-bottom: 5.3vw;
  }
}
.topic02__content--text h3 {
  font-size: 2.1vw;
  font-weight: 900;
  color: #282828;
  margin-bottom: 3.2vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__content--text h3 {
    font-size: 5.3vw;
    margin-bottom: 5.3vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__content--text p {
    font-size: 3.7vw;
    line-height: 1.8;
  }
}
.topic02__content02 {
  display: flex;
  justify-content: flex-end;
  gap: 4.9vw;
  margin-left: auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__content02 {
    max-width: 86%;
    flex-direction: column-reverse;
    gap: 6.7vw;
  }
}
.topic02__content02--figure img {
  width: 45.8vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__content02--figure img {
    width: 100%;
  }
}
.topic02__content02--text {
  width: 30.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__content02--text {
    width: 100%;
  }
}
.topic02__content02--text span {
  font-size: 1.4vw;
  font-weight: 900;
  padding-left: 0.7vw;
  display: block;
  color: #ffffff;
  margin-bottom: 2.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__content02--text span {
    font-size: 4.3vw;
    margin-bottom: 5.3vw;
  }
}
.topic02__content02--text h3 {
  font-size: 2.1vw;
  font-weight: 900;
  color: #282828;
  margin-bottom: 3.2vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__content02--text h3 {
    font-size: 5.3vw;
    margin-bottom: 5.3vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic02__content02--text p {
    font-size: 3.7vw;
    line-height: 1.8;
  }
}

/*TOPIC03*/
.topic03 {
  padding-bottom: 10.4vw;
  /*モーダル部分*/
  /*オレンジ*/
  /*モーダル開いた部分*/
  /* モーダル背景は画面全体を覆う */
  /* モーダル本体は背景より上 */
  /*ホバーまたはクリック*/
  /*SVG画像*/
  /*オレンジ*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 {
    padding-bottom: 13.3vw;
  }
}
.topic03__number {
  position: absolute;
  top: -6vw;
  left: 50%;
  transform: translateX(-50%);
  width: 31.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03__number {
    top: -26vw;
    width: 50.7vw;
  }
}
.topic03__heading {
  position: relative;
  font-size: 4.5vw;
  font-weight: 900;
  line-height: 1.2;
  color: #23aa46;
  text-align: center;
  margin-top: 7.2vw;
  margin-bottom: 9.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03__heading {
    font-size: 8vw;
    margin-top: 16.2vw;
    margin-bottom: 14vw;
  }
}
.topic03__heading:before {
  background-color: #23aa46;
  bottom: -2.9vw; /* 線の位置 */
  content: "";
  height: 2.5px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 7.4vw; /* 線の長さ */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03__heading:before {
    bottom: -6.7vw;
    width: 13.3vw;
  }
}
.topic03 .modal {
  position: relative;
  width: 20.1vw;
  aspect-ratio: 1/1;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal {
    width: calc((100% - 2.6vw) / 2);
  }
}
.topic03 .modal__plus {
  position: absolute;
  top: 1.3vw;
  right: 1.3vw;
  font-size: 2.1vw;
  line-height: 1;
  color: #23aa46;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal__plus {
    font-size: 3.5vw;
  }
}
.topic03 .modal__heading {
  font-size: 1vw;
  font-weight: 700;
  color: #787878;
  margin-bottom: 2.6vw;
  text-align: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal__heading {
    font-size: 3.2vw;
    margin-bottom: 4.4vw;
  }
}
.topic03 .modal__heading--multiple {
  font-size: 1vw;
  font-weight: 700;
  color: #787878;
  margin-top: -0.5vw;
  margin-bottom: 2.3vw;
  text-align: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal__heading--multiple {
    font-size: 3.2vw;
    margin-bottom: 2vw;
  }
}
.topic03 .modal__title {
  font-family: "Geologica", sans-serif;
  font-size: 2.8vw;
  font-weight: 900;
  color: #23aa46;
  line-height: 1;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal__title {
    font-size: 7.5vw;
  }
}
.topic03 .modal__title span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  font-weight: 900;
  margin-left: 0.3vw;
  margin-right: 0.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal__title span {
    font-size: 3.2vw;
  }
}
.topic03 .modal-orange {
  position: relative;
  width: 20.1vw;
  aspect-ratio: 1/1;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal-orange {
    width: calc((100% - 2.6vw) / 2);
  }
}
.topic03 .modal-orange__plus {
  position: absolute;
  top: 1.3vw;
  right: 1.3vw;
  font-size: 2.1vw;
  line-height: 1;
  color: #f08c1e;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal-orange__plus {
    font-size: 3.5vw;
  }
}
.topic03 .modal-orange__heading {
  font-size: 1vw;
  font-weight: 700;
  color: #787878;
  margin-bottom: 2.6vw;
  text-align: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal-orange__heading {
    font-size: 3.2vw;
    margin-bottom: 4.4vw;
  }
}
.topic03 .modal-orange__heading--multiple {
  font-size: 1vw;
  font-weight: 700;
  color: #787878;
  margin-top: -0.5vw;
  margin-bottom: 2.3vw;
  text-align: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal-orange__heading--multiple {
    font-size: 3.2vw;
    margin-bottom: 2vw;
  }
}
.topic03 .modal-orange__title {
  font-family: "Geologica", sans-serif;
  font-size: 2.8vw;
  font-weight: 900;
  color: #f08c1e;
  line-height: 1;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal-orange__title {
    font-size: 7.5vw;
  }
}
.topic03 .modal-orange__title span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  font-weight: 900;
  margin-left: 0.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal-orange__title span {
    font-size: 3.2vw;
  }
}
.topic03 .modal-orange small {
  position: absolute;
  bottom: 1vw;
  font-size: 0.7vw;
  font-weight: 300;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal-orange small {
    font-size: 2.1vw;
    font-weight: 200;
  }
}
.topic03 .modal__container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modal__container {
    justify-content: initial;
    gap: 2.6vw;
  }
}
.topic03 .modalArea {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
.topic03 .modalArea.is-show {
  display: block;
}
.topic03 .modalBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background-color: rgba(30, 30, 30, 0.9);
}
.topic03 .modalWrapper {
  position: fixed;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background-color: #23aa46;
  width: 74%;
  height: 80%;
  overflow: auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalWrapper {
    width: 93%;
    height: -moz-fit-content;
    height: fit-content;
  }
}
.topic03 .modalWrapper-orange {
  position: fixed;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  background-color: #f08c1e;
  width: 74%;
  height: 80%;
  overflow: auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalWrapper-orange {
    width: 93%;
    height: -moz-fit-content;
    height: fit-content;
  }
}
.topic03 .modalContents {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 8.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 6.7vw;
    margin-bottom: 7.7vw;
  }
}
.topic03 .modalContents .closeModal {
  position: absolute;
  top: -6vw;
  right: 2.1vw;
  font-size: 3.1vw;
  line-height: 1;
  color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents .closeModal {
    font-size: 5.1vw;
  }
}
.topic03 .modalContents__icon {
  height: 4.9vw;
  margin-right: 2.2vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents__icon {
    height: 9.3vw;
    margin-right: 5.3vw;
  }
}
.topic03 .modalContents__body1 {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 4.8vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents__body1 {
    width: 100%;
    margin-left: 0;
    align-items: normal;
    margin-bottom: 5vw;
  }
}
.topic03 .modalContents__body1--container {
  display: flex;
  align-items: center;
}
.topic03 .modalContents__body1 h3 {
  font-size: 2.1vw;
  font-weight: 700;
  width: 23.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents__body1 h3 {
    font-size: 5.3vw;
    white-space: nowrap;
  }
}
.topic03 .modalContents__body1--unit-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 7.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents__body1--unit-container {
    margin: 0 auto;
    margin-top: 4vw;
  }
}
.topic03 .modalContents__body1--unit-container2 {
  display: flex;
  align-items: baseline;
  margin-top: 7.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents__body1--unit-container2 {
    margin: 0 auto;
    margin-top: 8.8vw;
  }
}
.topic03 .modalContents__body1--unit-number {
  font-family: "Geologica", sans-serif;
  font-size: 11.1vw;
  font-weight: 900;
  line-height: 0.8;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents__body1--unit-number {
    font-size: 21.3vw;
  }
}
.topic03 .modalContents__body1--unit-number2 {
  font-family: "Geologica", sans-serif;
  font-size: 8vw;
  font-weight: 900;
  line-height: 0.8;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents__body1--unit-number2 {
    font-size: 21.3vw;
  }
}
.topic03 .modalContents__body1--unit-creative {
  font-family: "Geologica", sans-serif;
  font-size: 5.9vw;
  font-weight: 900;
  line-height: 0.8;
}
.topic03 .modalContents__body1--unit {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.1vw;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents__body1--unit {
    font-size: 6vw;
  }
}
.topic03 .modalContents__body1 .modalContents__unit--before {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.1vw;
  font-weight: 700;
  line-height: 1;
  float: left;
  margin-right: 1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents__body1 .modalContents__unit--before {
    font-size: 6vw;
  }
}
.topic03 .modalContents__body1 .modalContents__unit--after {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.1vw;
  font-weight: 700;
  line-height: 1;
  float: right;
  margin-left: 0.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents__body1 .modalContents__unit--after {
    font-size: 6vw;
  }
}
.topic03 .modalContents__body2 {
  width: 34.4vw;
  font-size: 1.1vw;
  font-weight: 700;
  line-height: 2.1;
  color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03 .modalContents__body2 {
    width: 100%;
    font-size: 3.7vw;
    font-weight: 500;
    line-height: 1.8;
  }
}
.topic03 .modalContents__body2 img {
  width: 100%;
  margin-bottom: 2.1vw;
}
.topic03 .modalContents__body2 p {
  width: 89%;
}
.topic03 .closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}
.topic03 .is-show { /* モーダル表示用クラス */
  visibility: visible;
  opacity: 1;
}
.topic03 .modal:hover {
  background-color: #23aa46;
}
.topic03 .modal-orange:hover {
  background-color: #f08c1e;
}
.topic03 .modal:hover .modal__plus,
.topic03 .modal:hover .modal__heading,
.topic03 .modal:hover .modal__heading--multiple,
.topic03 .modal:hover .modal__title,
.topic03 .modal-orange:hover .modal-orange__plus,
.topic03 .modal-orange:hover .modal-orange__heading,
.topic03 .modal-orange:hover .modal-orange__heading--multiple,
.topic03 .modal-orange:hover .modal-orange__title {
  color: #ffffff;
}
.topic03 .modal:hover .topic03__svg--green path,
.topic03 .modal-orange:hover .topic03__svg--orange path {
  stroke: #ffffff;
}
.topic03__svg--green {
  max-width: 4.9vw;
  max-height: 4.9vw;
  margin-bottom: 1.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03__svg--green {
    max-width: 10.9vw;
    max-height: 10.9vw;
    margin-bottom: 3.1vw;
  }
}
.topic03__svg--green path {
  stroke: #23aa46;
  transition: stroke 0.3s, fill 0.3s;
}
.topic03__svg--orange {
  max-width: 4.9vw;
  max-height: 4.9vw;
  margin-bottom: 1.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .topic03__svg--orange {
    max-width: 10.9vw;
    max-height: 10.9vw;
    margin-bottom: 3.1vw;
  }
}
.topic03__svg--orange path {
  stroke: #f08c1e;
  transition: stroke 0.3s, fill 0.3s;
}

.modalArea {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
.modalArea.is-show {
  display: block;
}

/* モーダル背景は画面全体を覆う */
.modalBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background-color: rgba(30, 30, 30, 0.9);
}

/* モーダル本体は背景より上 */
.modalWrapper {
  position: fixed;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background-color: #23aa46;
  width: 74%;
  height: 80%;
  overflow: auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalWrapper {
    width: 93%;
    height: -moz-fit-content;
    height: fit-content;
  }
}

.modalWrapper-orange {
  position: fixed;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  background-color: #f08c1e;
  width: 74%;
  height: 80%;
  overflow: auto;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalWrapper-orange {
    width: 93%;
    height: -moz-fit-content;
    height: fit-content;
  }
}

.modalContents {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 8.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 6.7vw;
    margin-bottom: 7.7vw;
  }
}
.modalContents .closeModal {
  position: absolute;
  top: -6vw;
  right: 2.1vw;
  font-size: 3.1vw;
  line-height: 1;
  color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents .closeModal {
    font-size: 5.1vw;
  }
}
.modalContents__icon {
  height: 4.9vw;
  margin-right: 2.2vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents__icon {
    height: 9.3vw;
    margin-right: 5.3vw;
  }
}
.modalContents__body1 {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 4.8vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents__body1 {
    width: 100%;
    margin-left: 0;
    align-items: normal;
    margin-bottom: 5vw;
  }
}
.modalContents__body1--container {
  display: flex;
  align-items: center;
}
.modalContents__body1 h3 {
  font-size: 2.1vw;
  font-weight: 700;
  width: 23.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents__body1 h3 {
    font-size: 5.3vw;
    white-space: nowrap;
  }
}
.modalContents__body1--unit-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 7.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents__body1--unit-container {
    margin: 0 auto;
    margin-top: 4vw;
  }
}
.modalContents__body1--unit-container2 {
  display: flex;
  align-items: baseline;
  margin-top: 7.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents__body1--unit-container2 {
    margin: 0 auto;
    margin-top: 8.8vw;
  }
}
.modalContents__body1--unit-number {
  font-family: "Geologica", sans-serif;
  font-size: 11.1vw;
  font-weight: 900;
  line-height: 0.8;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents__body1--unit-number {
    font-size: 21.3vw;
  }
}
.modalContents__body1--unit-number2 {
  font-family: "Geologica", sans-serif;
  font-size: 8vw;
  font-weight: 900;
  line-height: 0.8;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents__body1--unit-number2 {
    font-size: 21.3vw;
  }
}
.modalContents__body1--unit-creative {
  font-family: "Geologica", sans-serif;
  font-size: 5.9vw;
  font-weight: 900;
  line-height: 0.8;
}
.modalContents__body1--unit {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.1vw;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents__body1--unit {
    font-size: 6vw;
  }
}
.modalContents__body1 .modalContents__unit--before {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.1vw;
  font-weight: 700;
  line-height: 1;
  float: left;
  margin-right: 1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents__body1 .modalContents__unit--before {
    font-size: 6vw;
  }
}
.modalContents__body1 .modalContents__unit--after {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.1vw;
  font-weight: 700;
  line-height: 1;
  float: right;
  margin-left: 0.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents__body1 .modalContents__unit--after {
    font-size: 6vw;
  }
}
.modalContents__body2 {
  width: 34.4vw;
  font-size: 1.1vw;
  font-weight: 700;
  line-height: 2.1;
  color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .modalContents__body2 {
    width: 100%;
    font-size: 3.7vw;
    font-weight: 500;
    line-height: 1.8;
  }
}
.modalContents__body2 img {
  width: 100%;
  margin-bottom: 2.1vw;
}
.modalContents__body2 p {
  width: 89%;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}

.is-show { /* モーダル表示用クラス */
  visibility: visible;
  opacity: 1;
}

/*ホバーまたはクリック*/
.modal:hover {
  background-color: #23aa46;
}

.modal-orange:hover {
  background-color: #f08c1e;
}

.modal:hover .modal__plus,
.modal:hover .modal__heading,
.modal:hover .modal__heading--multiple,
.modal:hover .modal__title,
.modal-orange:hover .modal-orange__plus,
.modal-orange:hover .modal-orange__heading,
.modal-orange:hover .modal-orange__heading--multiple,
.modal-orange:hover .modal-orange__title {
  color: #ffffff;
}

.modal:hover .topic03__svg--green path,
.modal-orange:hover .topic03__svg--orange path {
  stroke: #ffffff;
}

/* モーダル表示時のbodyスクロール禁止 */
body.modal-open {
  overflow: hidden;
}

/*フォトギャラリー*/
/*フォトギャラリーの無限スクロール*/
.gallery__container {
  margin: 10.4vw 0;
  /*2行目のスクロール位置をずらす*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .gallery__container {
    margin: 13.3vw 0 20vw 0;
  }
}
.gallery__container h2 {
  font-family: "Geologica", sans-serif;
  font-size: 2.8vw;
  font-weight: 900;
  color: #64c832;
  text-align: center;
  margin-bottom: 3.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .gallery__container h2 {
    font-size: 6.7vw;
    margin-bottom: 10.7vw;
  }
}
.gallery__container .gallery__wrapper {
  width: 100vw;
  overflow: hidden;
}
.gallery__container .gallery__wrapper:first-of-type {
  margin-bottom: 1.4vw;
}
.gallery__container .gallery {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.gallery__container .scroll-track {
  display: flex;
  gap: 1.4vw;
  width: -moz-max-content;
  width: max-content;
  animation: infinity-scroll-left 80s linear infinite;
}
.gallery__container .gallery__wrapper:nth-of-type(2) .scroll__list {
  transform: translateX(-5.6vw);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .gallery__container .gallery__wrapper:nth-of-type(2) .scroll__list {
    transform: translateX(-10.7vw);
  }
}
.gallery__container .scroll__list {
  display: flex;
  flex-shrink: 0;
  gap: 1.4vw;
  height: 17.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .gallery__container .scroll__list {
    height: 40vw;
  }
}
.gallery__container .scroll__list figure {
  height: 17.4vw;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .gallery__container .scroll__list figure {
    height: 40vw;
  }
}
.gallery__container .scroll__list figure.photoA, .gallery__container .scroll__list figure.photoB, .gallery__container .scroll__list figure.photoE, .gallery__container .scroll__list figure.photoF, .gallery__container .scroll__list figure.photoH, .gallery__container .scroll__list figure.photoI {
  width: 25vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .gallery__container .scroll__list figure.photoA, .gallery__container .scroll__list figure.photoB, .gallery__container .scroll__list figure.photoE, .gallery__container .scroll__list figure.photoF, .gallery__container .scroll__list figure.photoH, .gallery__container .scroll__list figure.photoI {
    width: 57.2vw;
  }
}
.gallery__container .scroll__list figure.photoC, .gallery__container .scroll__list figure.photoD, .gallery__container .scroll__list figure.photoG, .gallery__container .scroll__list figure.photoJ {
  width: 12vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .gallery__container .scroll__list figure.photoC, .gallery__container .scroll__list figure.photoD, .gallery__container .scroll__list figure.photoG, .gallery__container .scroll__list figure.photoJ {
    width: 28.5vw;
  }
}
.gallery__container .gallery img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/*footer前ボタンエリア*/
.btnarea-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("../assets/img/about/button-aboutbg_img01.jpg");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 10.4vw 0;
  /*募集要項ボタン*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea-about {
    padding: 13.3vw 0 24.9vw 0;
  }
}
.btnarea-about h2 {
  font-size: 2.1vw;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea-about h2 {
    font-size: 5.3vw;
    margin-bottom: 6.7vw;
  }
}
.btnarea-about__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41.7vw;
  padding: 7.5vw 0;
  background-color: #23aa46;
  color: #ffffff;
  border: none;
  transition: 0.3s;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea-about__button {
    width: 86.7vw;
    padding: 14vw 0;
  }
}
.btnarea-about__button--body {
  font-size: 2.4vw;
  font-weight: 900;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea-about__button--body {
    font-size: 5.3vw;
  }
}
.btnarea-about__button--append {
  position: absolute;
  right: 2.8vw;
  width: 2.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea-about__button--append {
    width: 8vw;
  }
}
.btnarea-about__button:hover, .btnarea-about__button:active {
  background-color: #f08c1e;
  transition: 0.3s;
}

.person__heading {
  text-align: center;
  margin-top: 4vw;
  margin-bottom: 7.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__heading {
    margin-top: 13.7vw;
    margin-bottom: 17.6vw;
  }
}
.person__heading h2 {
  font-family: "Geologica", sans-serif;
  font-size: 2.9vw;
  font-weight: 900;
  line-height: 1;
  color: #23aa46;
  margin-bottom: 1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__heading h2 {
    font-size: 7.5vw;
  }
}
.person__heading p {
  font-size: 1vw;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person__heading p {
    font-size: 2.7vw;
  }
}
.person .article {
  position: relative;
  /*オレンジ*/
  /*黄色*/
}
.person .article__number {
  position: absolute;
  top: -7.6vw;
  left: 8.1vw;
  font-family: "Geologica", sans-serif;
  font-size: 10.8vw;
  font-weight: 900;
  line-height: 1;
  color: #23aa46;
  text-align: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__number {
    top: -9.2vw;
    font-size: 20vw;
  }
}
.person .article__number span {
  display: block;
}
.person .article__number--volume {
  font-size: 2.8vw;
  margin-bottom: -1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__number--volume {
    font-size: 5.3vw;
  }
}
.person .article__number--orange {
  position: absolute;
  top: -7.6vw;
  left: 8.1vw;
  font-family: "Geologica", sans-serif;
  font-size: 10.8vw;
  font-weight: 900;
  line-height: 1;
  color: #f08c1e;
  text-align: center;
}
.person .article__number--orange span {
  display: block;
}
.person .article__number--orange--volume {
  font-size: 2.8vw;
  margin-bottom: -1vw;
}
.person .article__container {
  display: flex;
  margin-bottom: 8.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__container {
    flex-direction: column;
    margin-bottom: 13.3vw;
  }
}
.person .article__container .article__img {
  width: 50vw;
  height: 31.2vw;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 3.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__container .article__img {
    width: 93vw;
    height: auto;
    margin-bottom: 6.7vw;
  }
}
.person .article__container .article__heading {
  /*オレンジ*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__container .article__heading {
    width: 86%;
    margin: 0 auto;
  }
}
.person .article__container .article__heading--title {
  font-size: 4.5vw;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 4.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__container .article__heading--title {
    font-size: 6.7vw;
    margin-bottom: 4vw;
  }
}
.person .article__container .article__heading--container {
  display: flex;
  align-items: center;
  line-height: 1;
}
.person .article__container .article__heading--container:first-of-type {
  margin-bottom: 1.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__container .article__heading--container:first-of-type {
    margin-bottom: 3.2vw;
  }
}
.person .article__container .article__heading--name {
  font-size: 3.1vw;
  color: #23aa46;
  margin-right: 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__container .article__heading--name {
    font-size: 7.2vw;
    margin-right: 4vw;
  }
}
.person .article__container .article__heading--name--orange {
  font-size: 3.1vw;
  color: #f08c1e;
  margin-right: 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__container .article__heading--name--orange {
    font-size: 7.2vw;
    margin-right: 4vw;
  }
}
.person .article__container .article__heading--year {
  font-size: 1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__container .article__heading--year {
    font-size: 2.7vw;
  }
}
.person .article__container .article__heading .job {
  font-size: 1vw;
  background-color: #e4e4df;
  padding: 0.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__container .article__heading .job {
    font-size: 2.7vw;
    padding: 1.5vw 2.1vw;
  }
}
.person .article__container .article__heading .job:first-of-type {
  margin-right: 0.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__container .article__heading .job:first-of-type {
    margin-right: 1.3vw;
  }
}
.person .article__body {
  font-size: 1.1vw;
  background-color: #64c832;
  padding: 10.4vw 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body {
    padding: 6.7vw 0 14vw 0;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body--container:first-of-type {
    padding: 6.9vw 3.3vw 10.7vw 3.3vw;
  }
}
.person .article__body--container {
  position: relative;
  background-color: #ffffff;
  padding: 7vw 5.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body--container {
    padding: 10.7vw 3.3vw 10.7vw 3.3vw;
  }
}
.person .article__body--container img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 3.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body--container img {
    margin-bottom: 6.7vw;
  }
}
.person .article__body--container h3 {
  font-size: 3.8vw;
  font-weight: 700;
  line-height: 1.4;
  color: #64c832;
  margin-bottom: 2.8vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body--container h3 {
    font-size: 6.7vw;
  }
}
.person .article__body--container p {
  font-size: 1.1vw;
  line-height: 2.1;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body--container p {
    font-size: 3.7vw;
    line-height: 1.8;
  }
}
.person .article__body--container:not(:last-child):after {
  background-color: #64c832;
  bottom: 0; /* 線の位置 */
  content: "";
  height: 1.5px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 31.7vw; /* 線の長さ */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body--container:not(:last-child):after {
    height: 1px;
    width: 53.3vw;
  }
}
.person .article__body--yellow {
  font-size: 1.1vw;
  background-color: #f5b800;
  padding: 10.4vw 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body--yellow {
    padding: 6.7vw 0 14vw 0;
  }
}
.person .article__body--yellow--container {
  position: relative;
  background-color: #ffffff;
  padding: 7vw 5.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body--yellow--container {
    padding: 10.7vw 3.7vw;
  }
}
.person .article__body--yellow--container img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 3.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body--yellow--container img {
    margin-bottom: 6.7vw;
  }
}
.person .article__body--yellow--container h3 {
  font-size: 3.8vw;
  font-weight: 700;
  line-height: 1.4;
  color: #f5b800;
  margin-bottom: 2.8vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body--yellow--container h3 {
    font-size: 6.7vw;
  }
}
.person .article__body--yellow--container p {
  font-size: 1.1vw;
  line-height: 2.1;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body--yellow--container p {
    font-size: 3.7vw;
    line-height: 1.8;
  }
}
.person .article__body--yellow--container:not(:last-child):after {
  background-color: #f5b800;
  bottom: 0; /* 線の位置 */
  content: "";
  height: 1.5px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 31.7vw; /* 線の長さ */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person .article__body--yellow--container:not(:last-child):after {
    height: 1px;
    width: 53.3vw;
  }
}

.person-list {
  margin-bottom: 10.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list {
    margin-bottom: 20vw;
  }
}
.person-list h2 {
  font-size: 5.9vw;
  font-weight: 900;
  color: #23aa46;
  text-align: center;
  margin-bottom: 5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list h2 {
    font-size: 6.7vw;
    margin-bottom: 10.7vw;
  }
}
.person-list__container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__container {
    gap: 5.9vw;
  }
}
.person-list__item {
  width: 19.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__item {
    width: calc((100% - 5.9vw) / 2);
  }
}
.person-list__figure {
  max-width: 19.4vw;
  position: relative;
  margin-bottom: 1.3vw;
  overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__figure {
    max-width: 100%;
  }
}
.person-list__img {
  width: 19.4vw;
  height: auto;
  transition: transform 0.6s ease;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__img {
    width: 43.7vw;
  }
}
.person-list__number {
  position: absolute;
  bottom: 0.6vw;
  left: 0.6vw;
  width: 4.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__number {
    bottom: 2.9vw;
    left: 2.5vw;
    width: 12.3vw;
  }
}
.person-list__title {
  font-size: 1.4vw;
  font-weight: 700;
  line-height: 1.6;
  color: #000000;
  margin-bottom: 1.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__title {
    font-size: 3.2vw;
    margin-bottom: 3.7vw;
  }
}
.person-list__name {
  font-family: "Geologica", sans-serif;
  font-size: 1.7vw;
  font-weight: 300;
  line-height: 1;
  color: #23aa46;
  margin-bottom: 1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__name {
    font-size: 5.3vw;
    margin-bottom: 2vw;
  }
}
.person-list__name span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.8vw;
  font-weight: 400;
  color: #000000;
  margin-left: 0.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__name span {
    font-size: 2.7vw;
  }
}
.person-list__name--orange {
  font-family: "Geologica", sans-serif;
  font-size: 1.7vw;
  font-weight: 300;
  line-height: 1;
  color: #f08c1e;
  margin-bottom: 1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__name--orange {
    font-size: 5.3vw;
    margin-bottom: 2vw;
  }
}
.person-list__name--orange span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.8vw;
  font-weight: 400;
  color: #000000;
  margin-left: 0.7vw;
  margin-left: 0.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__name--orange span {
    font-size: 2.7vw;
  }
}
.person-list__tag {
  display: flex;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__tag {
    flex-direction: column;
  }
}
.person-list__tag--item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #e4e4df;
  padding: 0.2vw 0.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__tag--item {
    padding: 0.6vw 1.3vw;
  }
}
.person-list__tag--item span {
  font-size: 0.8vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__tag--item span {
    font-size: 2.7vw;
  }
}
.person-list__tag--item:not(:last-of-type) {
  margin-right: 0.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .person-list__tag--item:not(:last-of-type) {
    margin-right: 0;
    margin-bottom: 1.3vw;
  }
}

.person-list__item:nth-of-type(1), .person-list__item:nth-of-type(2), .person-list__item:nth-of-type(3) {
  margin-bottom: 3.1vw;
}

.person-list__item:hover .person-list__img {
  transform: scale(1.1);
}

.opacity05 {
  opacity: 0.5;
}

/*footer前ボタンエリア*/
.btnarea-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("../assets/img/person/button-personbg_img01.jpg");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 10.4vw 0;
  /*募集要項ボタン*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea-person {
    padding: 13.3vw 0 24.9vw 0;
  }
}
.btnarea-person h2 {
  font-size: 2.1vw;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea-person h2 {
    font-size: 5.3vw;
    margin-bottom: 6.7vw;
  }
}
.btnarea-person__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41.7vw;
  padding: 7.5vw 0;
  background-color: #23aa46;
  color: #ffffff;
  border: none;
  transition: 0.3s;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea-person__button {
    width: 86.7vw;
    padding: 14vw 0;
  }
}
.btnarea-person__button--body {
  font-size: 2.4vw;
  font-weight: 900;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea-person__button--body {
    font-size: 5.3vw;
  }
}
.btnarea-person__button--append {
  position: absolute;
  right: 2.8vw;
  width: 2.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .btnarea-person__button--append {
    width: 8vw;
  }
}
.btnarea-person__button:hover, .btnarea-person__button:active {
  background-color: #f08c1e;
  transition: 0.3s;
}

.entry {
  background-image: url("../assets/img/entry/entry_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  width: 100%;
  height: 40vw;
  padding-top: 12.7vw;
  margin-top: 6.3vw;
  margin-bottom: 6.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .entry {
    height: 66.7vw;
    padding-top: 20vw;
    padding-left: 6.7vw;
    margin-top: 0;
    margin-bottom: 10.7vw;
  }
}
.entry h2 {
  font-family: "Geologica", sans-serif;
  font-size: 5.9vw;
  font-weight: 900;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .entry h2 {
    font-size: 13.3vw;
  }
}
.entry p {
  font-size: 2.1vw;
  font-weight: 700;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .entry p {
    font-size: 5.3vw;
  }
}

.flow {
  width: 100%; /* ステップフロー全体の横幅を指定 */
  display: flex; /* flexboxで横並びにする */
  justify-content: space-between; /* 横並びにしたものを等間隔で並べる */
  margin-bottom: 3.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .flow {
    overflow: hidden;
    margin-bottom: 6.7vw;
  }
}
.flow li {
  font-size: 1.4vw;
  font-weight: 700; /* 文字サイズを指定 */
  color: #787878; /* 文字色を黒に指定 */
  width: 33.3333333333%; /* 横幅を三等分した1つの大きさに指定 */
  background: #f6f4f2; /* 背景色をグレーに指定 */
  height: 7vw;
  text-align: left; /* 文字を中央寄せにする */
  position: relative; /* 基準位置とする */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .flow li {
    height: 18.7vw;
    font-size: 3.2vw;
    justify-content: flex-start;
  }
}
.flow li span {
  font-family: "Geologica", sans-serif;
  font-size: 1.4vw;
  font-weight: 900;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .flow li span {
    font-size: 2.7vw;
  }
}
.flow li:first-child {
  padding: 0 0 0 3.3vw; /* 最初と最後以外には左に適度な余白を指定 */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .flow li:first-child {
    padding: 3.2vw 0 0 3.3vw;
  }
}
.flow li:nth-child(2) {
  padding: 0 0 0 3.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .flow li:nth-child(2) {
    padding: 3.2vw 0 0 6.3vw;
  }
}
.flow li:nth-child(3) {
  padding: 0 0 0 3.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .flow li:nth-child(3) {
    padding: 3.2vw 0 0 7.3vw;
  }
}
.flow li::before, .flow li::after {
  content: ""; /* 疑似要素では必須 */
  width: 0; /* 横幅を0に指定 */
  height: 0; /* 高さを0に指定 */
  display: block; /* ブロック要素にする */
  position: absolute; /* 相対位置に指定 */
}
.flow li::before {
  border: solid 3.9vw transparent; /* 32pxのborderを指定 */
  border-right: solid 1.7vw transparent; /* 幅を合わせるため右線は13pxにする */
  border-left: solid 1.7vw #ffffff; /* 白い三角形を作成して▷の形で上に重ねて削り取る */
  top: auto; /* 重ねる位置(縦軸)を調整 */
  left: 0; /* 重ねる位置(横軸)を調整 */
  z-index: 1; /* 重なり順を指定 */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .flow li::before {
    border: solid 11.5vw transparent;
    border-right: solid 5.4vw transparent;
    border-left: solid 5.4vw #ffffff;
    top: -2vw;
  }
}
.flow li::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1.4vw; /* ← 修正: border-leftの幅と揃える */
  border-top: 3.5vw solid transparent;
  border-bottom: 3.5vw solid transparent;
  border-left: 1.4vw solid #f6f4f2;
  z-index: 2;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .flow li::after {
    border-top: 9.5vw solid transparent;
    border-bottom: 9.5vw solid transparent;
    border-left: 4.4vw solid #f6f4f2;
    right: -4.4vw; /* ← border-leftの幅と同じ */
  }
}
.flow li:first-child::before, .flow li:last-child::after {
  content: none; /* 最初のliの左と最後のliの右は作らない */
}
.flow li.current {
  color: #ffffff;
  background: #23aa46;
}
.flow li.current::after {
  border-left: solid 1.4vw #23aa46;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .flow li.current::after {
    border-left: solid 4.4vw #23aa46;
  }
}

.flow__text {
  margin-bottom: 3.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .flow__text {
    margin-bottom: 7.1vw;
  }
}
.flow__text p {
  font-size: 1.1vw;
  font-weight: 500;
  color: #282828;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .flow__text p {
    font-size: 3.2vw;
  }
}
.flow__text p span {
  color: #f2545b;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
  form {
    margin-bottom: 20vw;
  }
}

.form {
  width: 100%;
  margin-bottom: 3.3vw;
  /*PC版のみ横並び*/
  /*セレクトボックス,プルダウンのスタイル*/
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form {
    margin-bottom: 8vw;
  }
}
.form table, .form label, .form__annotation {
  font-weight: 600;
  color: #787878;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form table, .form label, .form__annotation {
    font-weight: 500;
  }
}
.form tr {
  border-top: 0.5px solid #000000;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form tr {
    display: flex;
    flex-direction: column;
  }
}
.form tr:last-of-type {
  border-bottom: 0.5px solid #000000;
}
.form th {
  width: 19.1vw;
  background-color: #f6f4f2;
  padding: 2.4vw 0 2.4vw 1.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form th {
    width: 100%;
    padding: 3.7vw 0 3.7vw 2.7vw;
  }
}
.form td {
  width: 43.4vw;
  padding: 2.4vw 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form td {
    font-size: 3.2vw;
    width: 100%;
    padding: 4vw 1.3vw;
  }
}
.form .flex {
  display: flex;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form .flex {
    display: block;
  }
}
.form label span {
  margin-right: 1.4vw;
  white-space: nowrap;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form label span {
    margin-right: 2.5vw;
  }
}
.form input[type=radio]:checked {
  accent-color: #23aa46;
}
.form input[type=text], .form input[type=tel], .form input[type=email] {
  padding: 0.4vw 1vw;
  border: 0.5px solid #787878;
  border-radius: 8px;
}
.form textarea {
  display: block;
  padding: 0.4vw 1vw;
  border: 0.5px solid #787878;
  border-radius: 8px;
  resize: vertical; /* 縦方向のリサイズを許可 */
  line-height: 1.5;
  height: 15em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form textarea {
    padding: 3.3vw;
  }
}
.form input[type=text]::-moz-placeholder, .form input[type=tel]::-moz-placeholder, .form input[type=email]::-moz-placeholder, .form textarea::-moz-placeholder {
  color: #d6d6d6;
}
.form input[type=text]::placeholder, .form input[type=tel]::placeholder, .form input[type=email]::placeholder, .form textarea::placeholder {
  color: #d6d6d6;
}
.form input[type=text]:focus, .form input[type=tel]:focus, .form input[type=email]:focus, .form textarea:focus {
  outline: 1px solid #23aa46;
}
.form input[type=tel], .form input[type=email], .form textarea {
  width: 100%;
}
.form__title {
  text-align: left;
  font-size: 1.1vw;
  color: #787878;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form__title {
    font-size: 3.2vw;
    font-weight: 500;
  }
}
.form__title span {
  color: #f2545b;
}
.form__title small {
  display: block;
  font-size: 0.8vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form__title small {
    display: inline-block;
    font-size: 2.7vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form__body {
    width: 100%;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form__body label {
    display: flex !important;
    align-items: center;
    width: 100%;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form__body input {
    width: 100%;
    height: 9.6vw;
  }
}
.form__annotation {
  font-size: 1vw;
  font-weight: 500;
  margin-top: 1.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form__annotation {
    font-size: 2.7vw;
    font-weight: 400;
    margin-top: 4.1vw;
  }
}
.form #last-name, .form #last-name-furigana {
  margin-right: 2.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form #last-name, .form #last-name-furigana {
    margin-right: 0;
    margin-bottom: 1.3vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form #last-name label, .form #first-name label, .form #last-name-furigana label, .form #first-name-furigana label {
    display: block !important;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form #last-name input, .form #first-name input, .form #last-name-furigana input, .form #first-name-furigana input {
    display: inline;
    width: 91%;
  }
}
.form__birth #year, .form__birth #month, .form__birth #day {
  width: 8.5vw;
}
.form__birth span {
  margin-left: 1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form .radio-group {
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form .radio-group label {
    display: flex;
    align-items: center;
  }
}
.form .radio-group label:first-of-type {
  margin-right: 1.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form .radio-group label:first-of-type {
    margin-right: 0;
    margin-bottom: 3vw;
  }
}
.form .radio-group input[type=radio] {
  width: 0.9vw;
  height: 0.9vw;
  margin-right: 0.5vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form .radio-group input[type=radio] {
    width: 2.9vw;
    height: 2.9vw;
    margin-right: 1.6vw;
  }
}
.form .birth-group {
  display: flex;
  gap: 1.5em;
  flex-wrap: wrap;
  align-items: flex-start;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form .birth-group {
    gap: 0;
  }
}
.form .birth-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form .birth-item label {
    margin-right: 2.3vw;
  }
}
.form .birth-item input {
  width: 5em;
}
.form .birth-item span {
  font-size: 0.9em;
  margin-top: 0.2em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form .birth-item span {
    margin-left: 3vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form__address {
    flex-direction: column;
    align-items: flex-start !important;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form__address span {
    margin-bottom: 2.7vw;
  }
}
.form__address #post-code {
  width: 9.3vw;
  margin-right: 1.2vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form__address #post-code {
    width: 29.4vw;
  }
}
.form__address #prefectures {
  width: 13.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form__address #prefectures {
    width: 100%;
  }
}
.form__address #city, .form__address #building {
  width: 24.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form__address #city, .form__address #building {
    width: 100%;
  }
}
.form .post-code-wrapper {
  margin-bottom: 1.4vw;
  display: block;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form .post-code-wrapper {
    margin-bottom: 0;
  }
}
.form .post-code {
  flex-direction: row;
  align-items: center !important;
}
.form__address:not(:last-of-type) {
  margin-bottom: 1.4vw;
  display: block;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form__address:not(:last-of-type) {
    margin-top: 2.7vw;
  }
}
.form__select {
  color: #787878;
  font-weight: 600;
  padding-left: 1vw;
  /*プルダウン選択時*/
  /*プルダウンホバー・選択時*/
  /*プルダウン選択時のチェックマーク非表示*/
  /*プルダウン内の区切り線*/
}
.form__select:hover {
  background-color: #d9d9d9;
}
.form__select option {
  color: #787878;
  padding: 0.5vw 1vw;
}
.form__select option:checked {
  background: #e4e4df;
}
.form__select option:hover,
.form__select option:focus-visible {
  color: #000000;
  background-color: #e4e4df;
  outline: none;
}
.form__select option::checkmark {
  display: none;
}
.form__select hr {
  margin: 0;
  color: #cccccc;
}
.form__select:hover {
  border-radius: 8px 8px 0 0;
}
.form select, .form ::picker(select) {
  -webkit-appearance: base-select;
     -moz-appearance: base-select;
          appearance: base-select;
}
.form select {
  width: 19.8vw;
  border-color: #cccccc;
  border-radius: 8px;
  background-color: #f6f4f2;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .form select {
    width: 100%;
    height: 9.6vw;
    line-height: 7.6vw;
  }
}
.form select::picker-icon {
  color: #23aa46;
}
.form select:focus {
  border-radius: 8px 8px 0 0;
}
.form select::picker(select) {
  border-color: #e4e4df;
  border-radius: 0 0 8px 8px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.form__academic-bg {
  width: 100%;
}

.privacy {
  text-align: center;
  font-size: 1.1vw;
  color: #787878;
  background-color: #f6f4f2;
  padding: 1.2vw 0;
  margin-bottom: 2.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .privacy {
    font-size: 3.2vw;
    padding: 4vw 2.7vw;
    margin-bottom: 6vw;
  }
}
.privacy__text a {
  color: #23aa46;
  border-bottom: 0.5px solid #23aa46;
}

.privacy-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .privacy-checkbox {
    margin-bottom: 13.3vw;
  }
}
.privacy-checkbox input[type=checkbox] {
  width: 1.4vw;
  height: 1.4vw;
  margin: 0;
  margin-top: 0.2vw;
  margin-right: 0.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .privacy-checkbox input[type=checkbox] {
    width: 4vw;
    height: 4vw;
    margin-top: 0.6vw;
    margin-right: 2vw;
  }
}
.privacy-checkbox input[type=checkbox]:checked {
  accent-color: #23aa46;
}
.privacy-checkbox label {
  font-size: 1.1vw;
  line-height: 1;
  color: #787878;
  border-radius: 8px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .privacy-checkbox label {
    font-size: 3.2vw;
  }
}

.submit {
  position: relative;
  width: 20.2vw;
  margin: 0 auto;
  margin-bottom: 14.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .submit {
    width: 100%;
    margin-bottom: 26.7vw;
  }
}
.submit__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.4vw 0;
  background-color: #23aa46;
  border: none;
  transition: 0.3s;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .submit__button {
    padding: 5.3vw 0;
  }
}
.submit__button--append {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.8vw;
  width: 2.1vw;
  height: 2.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .submit__button--append {
    right: 4vw;
    width: 8vw;
    height: 8vw;
  }
}

.submit__button:hover {
  background-color: #f08c1e;
  transition: 0.3s;
}

input[type=submit] {
  font-size: 1vw;
  font-weight: 600;
  color: #ffffff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  input[type=submit] {
    font-size: 4vw;
  }
}

/*確認画面*/
.confirm {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .confirm {
    flex-direction: column;
  }
}
.confirm__text {
  margin-bottom: 6.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .confirm__text {
    margin-bottom: 13.3vw;
  }
}
.confirm__text p {
  font-size: 1.1vw;
  font-weight: 500;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .confirm__text p {
    font-size: 3.2vw;
  }
}
.confirm .submit:first-of-type {
  margin-bottom: 6.7vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .confirm .submit:first-of-type {
    margin-bottom: 6.7vw;
  }
}
.confirm .submit {
  margin: 0 2.1vw;
  margin-bottom: 14.4vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .confirm .submit {
    margin: 0;
    margin-bottom: 25.4vw;
  }
}
.confirm .submit__button--append {
  position: absolute;
  top: 2vw;
  transform: translateY(-50%);
  right: 0.8vw;
  width: 2.1vw;
  height: 2.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .confirm .submit__button--append {
    top: 8vw;
    right: 4vw;
    width: 8vw;
    height: 8vw;
  }
}
.confirm .submit__button2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.4vw 0;
  background-color: #64c832;
  border: none;
  transition: 0.3s;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .confirm .submit__button2 {
    padding: 5.3vw 0;
  }
}
.confirm .submit__button2--append {
  position: absolute;
  top: 2vw;
  transform: translateY(-50%);
  right: 0.8vw;
  width: 2.1vw;
  height: 2.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .confirm .submit__button2--append {
    top: 8vw;
    right: 4vw;
    width: 8vw;
    height: 8vw;
  }
}
.confirm .submit .submit__button2:hover, .confirm .submit .submit__button2:active {
  background-color: #f5b800;
  transition: 0.3s;
}
.confirm .submit__button {
  position: relative;
}

.thanks {
  margin: 6.9vw 0 14.4vw 0;
  color: #282828;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .thanks {
    margin: 13.3vw 0 20vw 0;
  }
}
.thanks h2 {
  font-size: 3.8vw;
  font-weight: 900;
  text-align: center;
  color: #23aa46;
  margin-bottom: 7.1vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .thanks h2 {
    font-size: 5.3vw;
    margin-bottom: 13.3vw;
  }
}
.thanks h3 {
  font-size: 1.4vw;
  font-weight: 700;
  margin-top: 5.2vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .thanks h3 {
    font-size: 3.2vw;
    margin-top: 11.6vw;
  }
}
.thanks p {
  font-size: 1.1vw;
  font-weight: 600;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .thanks p {
    font-size: 3.2vw;
    font-weight: 500;
  }
}

.footer {
  position: relative;
  z-index: 60;
  /*ロゴ*/
  /*コピー*/
  /*サイトマップ*/
}
.footer__logo {
  width: 20.2vw;
  margin: 0 auto;
  margin-bottom: 7.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer__logo {
    width: 46.7vw;
    margin-bottom: 13.3vw;
  }
}
.footer__copy {
  width: 74.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer__copy {
    width: 86%;
    margin: 0 auto;
  }
}
.footer .footer-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 5vw;
  margin-right: 4.4vw;
  /*SP版　＋アイコン用 */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer .footer-nav {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 86%;
    margin: 0 auto;
    margin-top: 11.2vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer .footer-nav__list {
    width: 100%;
  }
}
.footer .footer-nav__item {
  margin-bottom: 3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer .footer-nav__item {
    padding: 2.7vw 0;
    border-bottom: 1px solid #e4e4df;
  }
}
.footer .footer-nav__link {
  display: flex;
  flex-direction: column;
}
.footer .footer-nav__link--heading {
  font-family: "Geologica", sans-serif;
  font-size: 1.4vw;
  font-weight: 900;
  line-height: 1.25;
  color: #23aa46;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer .footer-nav__link--heading {
    font-size: 4vw;
  }
}
.footer .footer-nav__link--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.1vw;
  font-weight: 500;
  line-height: 2.1;
  color: #000000;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer .footer-nav__link--title {
    font-size: 4.3vw;
  }
}
.footer .footer-nav .footer-nav__trigger {
  position: relative;
}
.footer .footer-nav__container--sp {
  /*margin-topなし*/
}
.footer .footer-nav__container--sp--anchor--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 2.1;
  color: #000000;
  /*横線*/
  display: flex;
  align-items: center; /* 垂直中心 */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer .footer-nav__container--sp--anchor--title {
    font-size: 3.7vw;
  }
}
.footer .footer-nav__container--sp--anchor--title:before {
  content: "";
  border-top: 1px solid #23aa46;
  width: 0.7vw;
  margin-right: 0.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer .footer-nav__container--sp--anchor--title:before {
    width: 2.7vw;
    margin-right: 1.3vw;
  }
}
.footer .footer-nav__container--sp--anchor:first-of-type {
  margin-top: 1vw;
}
.footer .footer-nav__container--sp--anchor2--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 2.1;
  color: #000000;
  /*横線*/
  display: flex;
  align-items: center; /* 垂直中心 */
}
.footer .footer-nav__container--sp--anchor2--title:before {
  content: "";
  border-top: 1px solid #23aa46;
  width: 0.7vw;
  margin-right: 0.3vw;
}
.footer .footer-nav__container--sp--anchor2:first-of-type {
  margin-top: 0;
}
.footer .footer-nav__container--anchor--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 2.1;
  color: #000000;
  /*横線*/
  display: flex;
  align-items: center; /* 垂直中心 */
}
.footer .footer-nav__container--anchor--title:before {
  content: "";
  border-top: 1px solid #23aa46;
  width: 0.7vw;
  margin-right: 0.3vw;
}
.footer .footer-nav__container--anchor:first-of-type {
  margin-top: 1.9vw;
}
.footer__container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer__container {
    width: 86%;
    margin: 0 auto;
    flex-direction: column;
    margin-top: 10.7vw;
    margin-bottom: 10.7vw;
  }
}
.footer__container--link {
  display: flex;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer__container--link {
    margin-bottom: 7.3vw;
  }
}
.footer__container--site-link {
  font-size: 0.8vw;
  color: #000000;
  margin-right: 0.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer__container--site-link {
    font-size: 3.2vw;
    margin-right: 1.9vw;
  }
}
.footer__container--icon {
  width: 0.8vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer__container--icon {
    width: 3.3vw;
  }
}
.footer__container--copyright {
  font-size: 0.7vw;
  color: #282828;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer__container--copyright {
    font-size: 2.7vw;
  }
}

/*背景ベージュ*/
.footer-beige {
  position: relative;
  z-index: 60;
  /*ロゴ*/
  /*コピー*/
  /*サイトマップ*/
}
.footer-beige .story-wrapper {
  top: auto;
}
.footer-beige__logo {
  width: 20.2vw;
  margin: 0 auto;
  margin-bottom: 7.6vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige__logo {
    width: 46.7vw;
    margin-bottom: 13.3vw;
  }
}
.footer-beige__copy {
  width: 74.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige__copy {
    width: 86%;
    margin: 0 auto;
  }
}
.footer-beige .footer-beige-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 5vw;
  margin-right: 4.4vw;
  /*SP版　＋アイコン用 */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige .footer-beige-nav {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 86%;
    margin: 0 auto;
    margin-top: 11.2vw;
  }
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige .footer-beige-nav__list {
    width: 100%;
  }
}
.footer-beige .footer-beige-nav__item {
  margin-bottom: 3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige .footer-beige-nav__item {
    padding: 2.7vw 0;
    border-bottom: 1px solid #e4e4df;
  }
}
.footer-beige .footer-beige-nav__link {
  display: flex;
  flex-direction: column;
}
.footer-beige .footer-beige-nav__link--heading {
  font-family: "Geologica", sans-serif;
  font-size: 1.4vw;
  font-weight: 900;
  line-height: 1.25;
  color: #23aa46;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige .footer-beige-nav__link--heading {
    font-size: 4vw;
  }
}
.footer-beige .footer-beige-nav__link--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.1vw;
  font-weight: 500;
  line-height: 2.1;
  color: #000000;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige .footer-beige-nav__link--title {
    font-size: 4.3vw;
  }
}
.footer-beige .footer-beige-nav__container--anchor--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 2.1;
  color: #000000;
  /*横線*/
  display: flex;
  align-items: center; /* 垂直中心 */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige .footer-beige-nav__container--anchor--title {
    font-size: 3.7vw;
  }
}
.footer-beige .footer-beige-nav__container--anchor--title:before {
  content: "";
  border-top: 1px solid #23aa46;
  width: 0.7vw;
  margin-right: 0.3vw;
}
.footer-beige .footer-beige-nav__container--anchor:first-of-type {
  margin-top: 1.9vw;
}
.footer-beige .footer-beige-nav .footer-beige-nav__trigger {
  position: relative;
}
.footer-beige .footer-beige-nav__container--sp {
  /*margin-topなし*/
}
.footer-beige .footer-beige-nav__container--sp--anchor--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 2.1;
  color: #000000;
  /*横線*/
  display: flex;
  align-items: center; /* 垂直中心 */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige .footer-beige-nav__container--sp--anchor--title {
    font-size: 3.7vw;
  }
}
.footer-beige .footer-beige-nav__container--sp--anchor--title:before {
  content: "";
  border-top: 1px solid #23aa46;
  width: 0.7vw;
  margin-right: 0.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige .footer-beige-nav__container--sp--anchor--title:before {
    width: 2.7vw;
    margin-right: 1.3vw;
  }
}
.footer-beige .footer-beige-nav__container--sp--anchor:first-of-type {
  margin-top: 1vw;
}
.footer-beige .footer-beige-nav__container--sp--anchor2--title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 2.1;
  color: #000000;
  /*横線*/
  display: flex;
  align-items: center; /* 垂直中心 */
}
.footer-beige .footer-beige-nav__container--sp--anchor2--title:before {
  content: "";
  border-top: 1px solid #23aa46;
  width: 0.7vw;
  margin-right: 0.3vw;
}
.footer-beige .footer-beige-nav__container--sp--anchor2:first-of-type {
  margin-top: 0;
}
.footer-beige__container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6.9vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige__container {
    width: 86%;
    margin: 0 auto;
    flex-direction: column;
    margin-top: 10.7vw;
    margin-bottom: 10.7vw;
  }
}
.footer-beige__container--link {
  display: flex;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige__container--link {
    margin-bottom: 7.3vw;
  }
}
.footer-beige__container--site-link {
  font-size: 0.8vw;
  color: #000000;
  margin-right: 0.3vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige__container--site-link {
    font-size: 3.2vw;
    margin-right: 1.9vw;
  }
}
.footer-beige__container--icon {
  width: 0.8vw;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige__container--icon {
    width: 3.3vw;
  }
}
.footer-beige__container--copyright {
  font-size: 0.7vw;
  color: #282828;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
  .footer-beige__container--copyright {
    font-size: 2.7vw;
  }
}

/*SP版アコーディオン*/
.footer-nav__details summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  list-style: none; /* デフォルトの三角形を非表示にする */
}

.footer-nav__icon {
  position: absolute;
  top: 6vw;
  right: 6.7vw;
  font-size: 4vw;
  color: #23aa46;
  transition: transform 0.3s ease;
  width: 4vw;
}

.footer-beige-nav__details summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  list-style: none; /* デフォルトの三角形を非表示にする */
}

.footer-beige-nav__icon {
  position: absolute;
  top: 6vw;
  right: 6.7vw;
  font-size: 4vw;
  color: #23aa46;
  transition: transform 0.3s ease;
  width: 4vw;
}