@import url("https://fonts.googleapis.com/css2?family=Rockwell&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Corbel&display=swap");

/* カルーセルエリアのスタイル　ここから */
.carousel-container {
  max-width: 1200px;
  margin: 40px auto 90px auto;
  padding: 100px;
  background-color: #f4f4f4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.carousel {
  display: flex;
  align-items: center;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  width: calc(100% * 5 / 3); /* アイテム数 / 表示数 */
}

.carousel-item {
  min-width: calc(100% / 3); /* 表示するアイテム数に合わせる */
  flex: 1;
  align-self: center;
}

.carousel img {
  display: block;
  width: 90%;
  height: auto;
  box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.4);
}

.carousel-arrow {
  width: 40px;
  height: 40px;
  background-color: #9cc53a;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2; /* 矢印を上に表示 */
}

.left-arrow {
  left: 10px;
  z-index: 3; /* 左の矢印を常に最上層に表示 */
}

.right-arrow {
  right: 10px;
}
/* カルーセルエリアのスタイル　ここまで */

/* Work Shifts セクションのスタイル　ここから */
.work-shifts {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
}

/* h3上の装飾画像のスタイル */
.h3-decoration {
  max-width: 1200px;
  margin: 0 auto;
}

.h3-decoration img {
  width: 60%;
  text-align: center;
}

.work-shifts h3 {
  font-family: "Rockwell", serif;
  font-size: 50px;
  color: #b5551d;
  margin-bottom: 50px;
  font-weight: normal;
}

.work-shifts p {
  font-family: "Corbel", "Helvetica", sans-serif;
  font-size: 25px;
  color: #666;
  margin-bottom: 30px;
}

.shifts-container {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}

.shift {
  width: 45%;
  display: flex;
  position: relative;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  border-radius: 15px;
}

.shift-banner {
  width: 80px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.shift-content {
  padding: 20px;
  text-align: center;
}

.shift h3 {
  font-family: "Rockwell", serif;
  font-size: 25px;
  color: #e96d23;
  margin-bottom: 10px;
  font-weight: bold;
}

.shift-b h3 {
  color: #007395;
  font-weight: bold;
}

.shift p {
  font-family: "Corbel", "Helvetica", sans-serif;
  font-size: 25px;
  color: #666;
  line-height: 1.6;
}

.shift strong {
  font-weight: bold;
}

.workshift-text {
  /* width: 900px; */
  margin: 0 auto;
}

.duties-section {
  width: 85%;
  margin: 0 auto;
  padding: 20px 30px 20px 50px;
  background-color: #fff;
  border-left: 20px solid #9cc53a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  border-radius: 15px;
  text-align: left;
}

.duties-section h3 {
  font-family: "Rockwell", serif;
  font-size: 1.5em;
  color: #688426;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}

.duties-section ul {
  padding: 0;
}

.duties-section ul li {
  font-family: "Corbel", "Helvetica", sans-serif;
  font-size: 25px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 10px;
}

.duties-section ul li strong {
  font-weight: bold;
  color: #333;
}
/* Work Shifts セクションのスタイル　ここまで */

.oneday-flow h3 {
  font-family: "Rockwell", serif;
  font-size: 50px;
  color: #688426;
  margin-bottom: 50px;
  text-align: center;
  font-weight: normal;
}

/* タイムラインのスタイル　ここから */
.oneday-flow {
  max-width: 1200px;
  margin: 47px auto; /* box-shadow修正 */
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.oneday-flow h4 {
  font-family: "Corbel", "Helvetica", sans-serif;
  font-size: 25px;
  color: #688426;
  text-align: center;
  margin-bottom: 20px;
}

.oneday-flow p {
  font-size: 25px;
  text-align: center;
  margin: 0 auto;
}

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

.timeline img {
  width: 100%;
}

.timeline p {
  font-family: "Corbel", "Helvetica", sans-serif;
  margin-top: 15px;
  margin-bottom: 30px;
  width: 90%;
  font-size: 25px;
}

.Please-note {
  color: #688426;
  font-weight: bold;
}
/* タイムラインのスタイル　ここまで */

/* Students & Class Typesのスタイル　ここから */
.Class-Types {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
}

.h3-decoration {
  max-width: 100%;
  text-align: center;
}

.Class-Types h3 {
  font-family: "Rockwell", serif;
  font-size: 50px;
  color: #007395;
  margin-bottom: 50px;
  font-weight: normal;
}

.h3-introduction {
  max-width: 900px;
  margin: 0 auto 20px auto;
}

.h3-introduction p {
  font-family: "Corbel", "Helvetica", sans-serif;
  font-size: 25px;
  width: 90%;
  text-align: center;
  margin: 0 auto;
}

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

.features h4 {
  font-family: "Corbel", "Helvetica", sans-serif;
  font-size: 25px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.features p {
  font-family: "Corbel", "Helvetica", sans-serif;
  font-size: 25px;
  width: 90%;
  margin: 0 auto 20px auto;
  line-height: 1.4;
}

.features img {
  max-width: 50%;
  text-align: center;
}
/* Students & Class Typesのスタイル　ここまで */

/* Dress Codeエリアのスタイル　ここから */
.Dress-Code {
  max-width: 1200px;
  margin: 40px auto;
  text-align: center;
}

.Dress-Code h3 {
  font-family: "Rockwell", serif;
  font-size: 50px;
  color: #b5551d;
  margin-bottom: 50px;
  font-weight: normal;
}

.h3-introduction {
  max-width: 900px;
  margin: 0 auto 20px auto;
}

.h3-introduction p {
  font-family: "Corbel", "Helvetica", sans-serif;
  font-size: 25px;
  width: 90%;
  text-align: center;
  margin: 0 auto;
}

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

.clothes h4 {
  font-family: "Corbel", "Helvetica", sans-serif;
  font-size: 25px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.clothes p {
  font-family: "Corbel", "Helvetica", sans-serif;
  font-size: 25px;
  width: 90%;
  margin: 0 auto 20px auto;
}

.clothes img {
  max-width: 50%;
  text-align: center;
}
/* Dress Codeエリアのスタイル　ここまで */

/* Eventエリアのスタイル　ここから */
.event {
  max-width: 1200px;
  margin: 40px auto;
  text-align: center;
}

.event h3 {
  font-family: "Rockwell", serif;
  font-size: 50px;
  color: #688426;
  margin-bottom: 50px;
  font-weight: normal;
}

.h3-introduction {
  max-width: 900px;
  margin: 0 auto 20px auto;
}

.h3-introduction p {
  font-family: "Corbel", "Helvetica", sans-serif;
  font-size: 25px;
  width: 90%;
  text-align: center;
  margin: 0 auto;
  line-height: 1.4;
}

.event-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 30px;
}

.event-item {
  width: 30%;
  text-align: center;
  margin-bottom: 30px;
}

.event-item img {
  width: 90%;
  height: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-item p {
  font-family: "Rockwell", serif;
  font-size: 25px;
  color: #007395;
  margin-top: 10px;
}
/* Eventエリアのスタイル　ここまで */

/* フッターエリアのスタイル　ここから */
.footer {
  color: white;
  text-align: center;
  margin-top: 40px;
}

.footer-logo img {
  width: 212px;
  height: 56px;
  margin: 20px 0;
}

.footer-links {
  background-color: #d9d9d9;
  margin-top: 20px;
  padding: 30px 0;
}

.footer-links a {
  font-family: "Rockwell", serif;
  color: #000;
  margin: 0 10px;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}
/* フッターエリアのスタイル　ここまで */

/* 修正　ここから -------------------------------------------------------------------------------------------------------------*/
body {
  margin: 0;
}

/* header ここから --------------------------------------------------------------------*/
.header-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 12px !important;
  padding-bottom: 5px !important;
  padding-left: 30px;
  padding-right: 24px;
}
@media screen and (min-width: 768px) {
  .header-content {
    height: 96px;
  }
}
.logo img {
  width: 140px;
}
.l-header__nav {
  display: none;
}
@media screen and (min-width: 768px) {
  .l-header__nav ul {
    display: flex;
    flex-wrap: wrap; /* アイテムを折り返す */
    justify-content: flex-end; /* アイテムを右寄せにする */
    gap: 10px; /* アイテム間のスペース */
    list-style: none; /* リストマーカーを削除 */
    padding: 0; /* パディングをリセット */
    margin: 0; /* マージンをリセット */
  }
  .l-header__nav ul {
    display: flex;
    flex-wrap: wrap; /* アイテムを折り返す */
    justify-content: flex-end; /* アイテムを右寄せにする */
    gap: 10px; /* アイテム間のスペース */
    list-style: none; /* リストマーカーを消す */
    padding: 0; /* パディングをリセット */
    margin: 0; /* マージンをリセット */
  }
  .l-header__nav ul li {
    width: fit-content; /* li要素の幅を内容にフィットさせる */
  }
  .l-header__nav ul li a {
    text-decoration: none;
    padding: 10px;
    display: block;
    text-align: right;
  }
}
@media screen and (min-width: 1200px) {
  .l-header__nav ul {
    display: none;
  }
}
.l-header__nav--pc {
  display: none;
}
@media screen and (min-width: 1200px) {
  .l-header__nav--pc {
    display: block;
  }
}
.l-header__right {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 121px;
  justify-content: space-between;
  padding-bottom: 10px;
}
@media screen and (min-width: 768px) {
  .l-header__right {
    display: none;
  }
}
.apply-cta {
  font-family: "Rockwell", serif;
  font-size: 14px;
}
.c-button-drawer {
  background: #e96d23;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  position: relative;
}
/* 吹き出し部分 */
.c-button-drawer::after {
  content: ""; /* 吹き出しの内容 */
  position: absolute; /* 絶対位置指定 */
  bottom: -8px; /* メニューの下に配置 */
  left: 50%; /* メニューの真ん中に配置 */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent; /* 吹き出しの左側の三角形 */
  border-right: 5px solid transparent; /* 吹き出しの右側の三角形 */
  border-bottom: 5px solid #e96d23; /* 吹き出しの底部 */
  opacity: 0; /* 初期状態で透明 */
  transition: opacity 0.3s ease; /* アニメーションの設定 */
  visibility: hidden; /* 初期状態で非表示 */
}
.c-button-drawer.show::after {
  opacity: 1; /* 表示状態で不透明 */
  visibility: visible; /* 表示状態で可視 */
}

.c-button-drawer.is-checked .c-button-drawer__line:nth-of-type(1) {
  background: #fff;
  left: 25%;
  top: 50%;
  transform: rotate(-45deg);
}
.c-button-drawer.is-checked .c-button-drawer__line:nth-of-type(2) {
  display: none;
}
.c-button-drawer.is-checked .c-button-drawer__line:nth-of-type(3) {
  background: #fff;
  left: 25%;
  top: 50%;
  transform: rotate(45deg);
}
.c-button-drawer__line {
  position: absolute;
  border-radius: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  background: #fff;
  transition: transform 0.3s linear, top 0.3s linear;
}
.c-button-drawer__line:nth-of-type(1) {
  left: 50%;
  transform: translateX(-50%);
  top: 7px;
}
.c-button-drawer__line:nth-of-type(2) {
  left: 50%;
  transform: translateX(-50%);
  top: 12px;
}
.c-button-drawer__line:nth-of-type(3) {
  left: 50%;
  transform: translateX(-50%);
  top: 17px;
}
ul {
  display: block;
  list-style: none; /* リストスタイルを削除 */
  margin: 0; /* マージンをリセット */
  padding: 0; /* パディングをリセット */
  unicode-bidi: normal; /* バイディレクショナルの設定をリセット */
}
.c-drawer-menu {
  max-height: 0; /* 初期状態で高さを0に設定 */
  width: 150px;
  height: 120px; /* 高さの設定はアニメーションの最大値に合わせる */
  font-family: "Rockwell", serif;
  font-size: 18.67px;
  border-top: 10px solid #e96d23;
  border-right: 1px solid #e96d23;
  border-bottom: 1px solid #e96d23;
  border-left: 1px solid #e96d23;
  background: #fff;
  border-radius: 10px;
  margin-left: auto;
  margin-right: 20px;
  padding: 10px;
  position: absolute; /* ドロップダウンの位置を調整するために絶対位置指定 */
  top: 80%; /* ボタンの下に表示 */
  right: 0; /* ボタンの右側に合わせる */
  z-index: 2000; /* メニューが他の要素の上に表示されるようにする */
  overflow: hidden; /* 内容がはみ出さないようにする */
  transition: max-height 0.3s ease, opacity 0.3s ease; /* アニメーションの設定 */
  opacity: 0; /* 初期状態で透明 */
}
.c-drawer-menu.show {
  max-height: 120px; /* アニメーションの最大高さに合わせる */
  opacity: 1; /* アニメーションで透明度を上げる */
}
.c-drawer-menu ul {
  list-style: none; /* デフォルトのリストスタイルを無効にする */
  padding: 0;
  margin: 0;
}
.c-drawer-menu li {
  padding: 5px 0; /* アイテム間に5pxのスペースを追加 */
  position: relative; /* 擬似要素のために相対位置を設定 */
}
.c-drawer-menu li:not(:last-child)::after {
  content: ""; /* 擬似要素の内容 */
  display: block; /* ブロック要素として表示 */
  height: 1px; /* 線の高さ */
  width: 150px;
  background: #e96d23; /* 線の色 */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px; /* アイテムの下に線を配置 */
}
@media screen and (min-width: 768px) {
  .logo img {
    width: 140px;
  }
  .l-header__nav {
    display: block;
  }
}
/* header ここまで --------------------------------------------------------------------*/

.duties-section {
  width: auto;
}
@media screen and (min-width: 768px) {
  .duties-section {
    width: 85%;
    margin: 0 auto;
    padding: 20px 30px 20px 50px;
    background-color: #fff;
    border-left: 20px solid #9cc53a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    text-align: left;
  }
}

/* job__slider-area ここから ------------------------------------------------------------------*/
.job__slider-area {
  background-color: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.job__slider {
}
.swiper {
}
.job__swiper {
  padding-top: 25px;
  padding-bottom: 20px;
}
.swiper-wrapper {
  text-align: center;
  align-items: center;
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.job__slide {
}
.job-card {
}
.job-card__image2 img,
.job-card__image3 img,
.job-card__image5 img,
.job-card__image8 img,
.job-card__image9 img,
.job-card__image12 img,
.job-card__image13 img,
.job-card__image14 img,
.job-card__image16 img {
  width: 94px;
}
@media screen and (min-width: 768px) {
  .job-card__image2 img,
  .job-card__image3 img,
  .job-card__image5 img,
  .job-card__image8 img,
  .job-card__image9 img,
  .job-card__image12 img,
  .job-card__image13 img,
  .job-card__image14 img,
  .job-card__image16 img {
    width: 130.189px;
  }
}
@media screen and (min-width: 1024px) {
  .job-card__image2 img,
  .job-card__image3 img,
  .job-card__image5 img,
  .job-card__image8 img,
  .job-card__image9 img,
  .job-card__image12 img,
  .job-card__image13 img,
  .job-card__image14 img,
  .job-card__image16 img {
    width: 190px;
  }
}
.job-card__image1 img,
.job-card__image4 img,
.job-card__image6 img,
.job-card__image7 img,
.job-card__image10 img,
.job-card__image11 img,
.job-card__image15 img {
  width: 117.65px;
}
@media screen and (min-width: 768px) {
  .job-card__image1 img,
  .job-card__image4 img,
  .job-card__image6 img,
  .job-card__image7 img,
  .job-card__image10 img,
  .job-card__image11 img,
  .job-card__image15 img {
    width: 180.98px;
  }
}
@media screen and (min-width: 1024px) {
  .job-card__image1 img,
  .job-card__image4 img,
  .job-card__image6 img,
  .job-card__image7 img,
  .job-card__image10 img,
  .job-card__image11 img,
  .job-card__image15 img {
    width: 240px;
  }
}

/* 左矢印 */
.job__prev::before {
  position: absolute;
  content: ""; /* 矢印の文字 */
  background-image: url(./img/arrow_left.png);
  background-size: contain;
  width: 23px;
  height: 23px;
  left: 40px;
}
/* 右矢印 */
.job__next::before {
  position: absolute;
  content: ""; /* 矢印の文字 */
  background-image: url(./img/arrow_right.png);
  background-size: contain;
  width: 23px;
  height: 23px;
  right: 40px;
}
.job__prev::after,
.job__next::after {
  display: none;
}

.job__next {
}
@media screen and (min-width: 768px) {
  .job__slider-area {
  }
  .job__slider {
    width: 648px;
    padding-left: 60px;
    padding-right: 60px;
    margin-inline: auto;
  }
  .swiper {
  }
  .job__swiper {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .job__slider-area {
  }
  .job__slider {
    width: auto;
    padding-left: 100px;
    padding-right: 100px;
  }
  .swiper {
  }
  .job__swiper {
    padding-left: 30px;
    padding-right: 30px;
  }
}
/* job__slider-area ここまで ------------------------------------------------------------------*/

/* 残り全て ここから ---------------------------------------------------------------------------*/
.hidden-tb {
  display: block;
}
.hidden-sp {
  display: none;
}
.introduction {
  padding-bottom: 35px;
}
.introduction h2 {
  letter-spacing: 0.04em;
}
.introduction p {
  line-height: 1.26;
  padding-inline: 2px;
}
.work-shifts {
  margin-top: 0;
}
.work-shifts h3 {
  margin-top: 5px;
  letter-spacing: -0.04em;
  margin-bottom: 13px;
  font-size: 20px;
}
.h3-decoration img {
  width: 72vw;
}
.work-shifts p {
  font-size: 16px;
  margin-bottom: 22px;
}
.shifts-container {
  flex-direction: column;
  gap: 24px;
}
.shift-a {
  width: auto;
  border-left: 5px solid #e96d23;
  border-radius: 5px;
}
.shift-b {
  width: auto;
  border-left: 5px solid #00ade1;
  border-radius: 5px;
}
.work-shifts {
  padding-inline: 50px;
  margin-bottom: -55px;
}
.shift-content {
  padding-top: 6px;
  padding-bottom: 0;
  padding-left: 0;
}
.shift-content h3 {
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: -10px;
}
.shift-content p {
  margin-left: -6px;
  line-height: 1.33;
}
.shift-content-b p {
  margin-bottom: 20px;
}
.space {
  height: auto;
}
.duties-section {
  width: auto;
  border-left: 5px solid #9cc53a;
  border-radius: 5px;
  padding: 10px;
  padding-right: 26px;
  padding-bottom: 18px;
}
.duties-section h3 {
  font-size: 16px;
}
.duties-section ul {
  padding-top: 0;
  padding-left: 12px;
}
.duties-section ul li {
  font-size: 16px;
  list-style: disc;
  line-height: 1.3;
  margin-bottom: 4px;
}
.duties-section h3 {
  margin-top: 0;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}
.oneday-flow {
  padding-inline: 50px;
}
.oneday-flow h3 {
  margin-top: 5px;
  letter-spacing: -0.04em;
  margin-bottom: 13px;
  font-size: 20px;
}
.oneday-flow p {
  font-size: 16px;
  line-height: 1.42;
}
.oneday-flow h4 {
  margin-top: 5px;
  letter-spacing: 0em;
  margin-top: 27px !important;
  margin-bottom: 40px;
  font-size: 16px;
}
.timeline img {
  height: 20px;
}
.timeline p {
  margin-top: 5px;
  margin-bottom: 14px;
  margin-inline: 0;
  width: auto;
  letter-spacing: 0.01em;
}
.timeline p :last-child {
  margin-bottom: 20px;
}
.Please-note {
  margin-top: 40px;
}
.Please-note p {
  line-height: 1.15;
  font-size: 16px;
  letter-spacing: -0.03em;
}
.Class-Types {
  margin-top: -57px;
  padding-inline: 50px;
}
.Class-Types h3 {
  margin-top: 5px;
  letter-spacing: -0.04em;
  margin-bottom: 13px;
  font-size: 20px;
}
.h3-introduction p {
  font-size: 16px;
  letter-spacing: 0.02em;
}
.features h4 {
  font-size: 16px;
  margin-bottom: 10px;
}
.features p {
  width: auto;
  font-size: 16px;
  margin-top: -10px;
  line-height: 1.32;
  letter-spacing: 0.01em;
  margin-bottom: 0;
}
.stage-classes {
  margin-top: 7px !important;
}
.features img {
  max-width: 64%;
  height: 3px;
}
.elementary-aged {
  margin-top: 7px !important;
}
.school {
  margin-top: 10px !important;
}
.adults {
  margin-top: 10px !important;
}
.Dress-Code {
  margin-top: -40px;
  margin-bottom: -17px !important;
  padding-inline: 50px;
}
.Dress-Code h3 {
  margin-top: 5px;
  letter-spacing: -0.04em;
  margin-bottom: 13px;
  font-size: 20px;
}
.dress-code-p1 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
}
.male-teachers {
  font-size: 16px !important;
  margin-bottom: 10px !important;
}
.clothes p {
  width: auto;
  font-size: 16px;
  margin-top: -10px;
  line-height: 1.32;
  margin-bottom: 0;
}
.female-teachers {
  font-size: 16px !important;
  margin-top: 30px !important;
}
.male-teachers-decoration img {
  max-width: 64%;
  height: 3px;
}
.female-teachers-p {
  margin-bottom: 23px !important;
  letter-spacing: 0.01em;
}
.female-teachers-p2 {
  letter-spacing: 0.01em;
}
.event {
  padding-inline: 50px;
  margin-bottom: -35px;
}
.event h3 {
  margin-top: 5px;
  letter-spacing: -0.04em;
  margin-bottom: 13px;
  font-size: 20px;
}
.event-p {
  letter-spacing: 0.02em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  line-height: 1.34 !important;
}
.event-gallery {
  display: flex;
}
.event-item p {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 0.01em;
}
.event-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  grid-template-rows: repeat(3, auto); /* 3行 */
  gap: 15px; /* アイテム間の隙間を設定 */
  row-gap: 12px;
  padding-top: 0;
  padding-bottom: 0;
  padding-inline: 16px;
}
.event-item {
  text-align: center; /* 画像とテキストを中央揃え */
  width: auto;
  margin-bottom: 0;
}
.event-item img {
  max-width: 100%; /* 画像を要素内で調整 */
  height: auto;
}

/* footer ここから --------------------------------------------------------------------*/
.footer-logo img {
  width: 180px;
  height: auto;
  margin-bottom: 16px;
}
.footer-links {
  padding-top: 10px;
}
.footer-links a {
  width: auto;
  margin: 0;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  grid-template-rows: repeat(2, auto); /* 2行 */
  padding-inline: 15px;
  padding-bottom: 10px;
  row-gap: 5px;
  margin-top: 0;
}
.footer-links a {
  text-align: center; /* 各リンクを中央に配置 */
}

/* footer ここまで --------------------------------------------------------------------*/

/* TB ここかから --------------------------------------------------------------------*/

@media screen and (min-width: 768px) {
  .hidden-sp {
    display: block;
  }
  .hidden-tb {
    display: none;
  }
  .header-content {
    padding-right: 63px;
    height: 108px;
  }
  .logo img {
    width: 100%;
    padding-top: 0;
    padding-left: 10px;
  }
  .l-header__nav {
    display: block;
    padding-top: 0;
  }
  .l-header__nav ul li {
    letter-spacing: -0.04em;
  }
  .l-header__nav ul li a {
    text-decoration: none;
    padding: 10px;
    display: block;
    text-align: right;
    padding-inline: 3px;
  }
  .introduction p {
    line-height: 1.2;
    font-size: 20px;
  }
  .job__slider {
    width: auto;
    padding-left: 60px;
    padding-right: 60px;
    margin-inline: auto;
  }
  .job__swiper {
    padding-inline: 59px;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .job__next::before {
    width: 45px;
    height: 45px;
    top: -10px;
    right: -11px;
  }
  .job__prev::before {
    width: 45px;
    height: 45px;
    top: -10px;
    left: -11px;
  }
  .job-card h3 {
    font-size: 16px;
  }
  .job__slider {
    padding-inline: 100px;
  }
  .job__swiper {
    padding-inline: 30px;
  }
  .work-shifts h3 {
    font-size: 36px;
    letter-spacing: 0.02em;
    margin-top: 17px;
    margin-bottom: 36px;
  }
  .h3-decoration img {
    margin-top: 60px;
    width: 445px;
  }
  .workshift-text {
    font-size: 20px !important;
    padding-inline: 30.9px !important;
    letter-spacing: 0.01em !important;
    line-height: 1.32 !important;
    margin-bottom: 50px !important;
  }
  .work-shifts {
    padding-inline: 70px;
  }
  .shifts-container {
    padding-inline: 119px;
    margin-bottom: 57px;
  }
  .shift-content h3 {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: -5px;
  }
  .shift-content p {
    font-size: 20px !important;
    line-height: 1.32 !important;
    margin-left: -6px;
    letter-spacing: -0.01em;
  }
  .shift-content {
    padding-bottom: 10px;
  }
  .shift-a {
    width: auto;
    border-left: 10px solid #e96d23;
    border-radius: 10px;
    padding-left: 8px;
    margin-bottom: 50px;
  }
  .shift-b {
    border-radius: 10px;
  }
  .shifts-container {
    gap: 0;
  }
  .shift-content h3 {
    margin-top: 13px;
  }
  .workshift-text1 {
    margin-bottom: 20px !important;
  }
  .duties-section {
    border-radius: 10px !important;
    border-left: 10px solid #9cc53a;
  }
  .duties-section h3 {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .duties-section ul li {
    font-size: 20px !important;
    line-height: 1.32 !important;
    margin-left: 6px;
    letter-spacing: -0.01em;
  }
  .duties-section ul {
    padding-left: 22px;
  }
  .h3-decoration img {
    margin-top: 57px;
  }
  .oneday-flow h3 {
    font-size: 36px;
    letter-spacing: 0.02em;
    margin-top: 17px;
    margin-bottom: 36px;
  }
  .duties-section-p {
    font-size: 20px !important;
    line-height: 1.32 !important;
    margin-left: 6px;
    letter-spacing: -0.03em;
    padding-inline: 10px;
  }
  .oneday-flow {
    padding-inline: 79px;
  }
  .oneday-flow h4 {
    font-size: 20px;
    margin-top: 36px !important;
    margin-bottom: 16px;
  }
  .timeline img {
    height: 30px;
  }
  .timeline p {
    font-size: 20px !important;
    line-height: 1.32 !important;
    margin-left: 6px;
    padding-top: 5px;
    padding-inline: 20px;
    padding-bottom: 21px;
  }
  .Please-note p {
    font-size: 20px !important;
    line-height: 1.32 !important;
    padding-inline: 10px;
    margin-top: -15px;
    line-height: 1.5 !important;
  }
  .Class-Types h3 {
    font-size: 36px;
    letter-spacing: 0.02em;
    margin-top: 17px;
    margin-bottom: 36px;
  }
  .h3-introduction p {
    font-size: 20px !important;
    line-height: 1.32 !important;
  }
  .Class-Types {
    padding-inline: 70px;
    margin-bottom: 0;
  }
  .features h4 {
    font-size: 20px !important;
    line-height: 1.32 !important;
  }
  .features p {
    font-size: 20px !important;
    line-height: 1.32 !important;
    padding-inline: 10px;
    margin-bottom: 37px;
  }
  .features img {
    width: 280px;
    margin-bottom: 20px;
  }
  .stage-classes {
    margin-top: 10px !important;
  }
  .shift-b .shift-banner {
    background-color: #00ade1;
  }
  .shift-banner {
    width: 20px;
  }
  .stage-classes-p {
    padding-inline: 30px !important;
  }
  .elementary-aged-p {
    padding-inline: 40px !important;
  }
  .school-p {
    padding-inline: 32px !important;
  }
  .adults-p {
    padding-inline: 32px !important;
  }
  .Dress-Code h3 {
    font-size: 36px;
    letter-spacing: 0.02em;
    margin-top: 17px;
    margin-bottom: 36px;
  }
  .Dress-Code {
    padding-inline: 70px;
  }
  .dress-code-p1 {
    padding-inline: 30px;
  }
  .male-teachers {
    font-size: 20px !important;
    line-height: 1.32 !important;
    margin-top: 24px !important;
    margin-bottom: 10px !important;
  }
  .clothes p {
    font-size: 20px !important;
    line-height: 1.32 !important;
    margin-bottom: 37px;
    padding-inline: 30px;
    letter-spacing: 0.01em;
  }
  .male-teachers-decoration img {
    width: 370px;
    margin-top: 20px;
    height: 3px;
  }
  .female-teachers {
    font-size: 20px !important;
    line-height: 1.32 !important;
    margin-bottom: 10px !important;
  }
  .female-teachers-p2 {
    font-size: 18px !important;
    line-height: 1.32 !important;
    padding-inline: 30px;
    letter-spacing: 0.01em;
    margin-top: 20px !important;
  }
  .event {
    padding-inline: 70px;
  }
  .event h3 {
    font-size: 36px;
    letter-spacing: 0.02em;
    margin-top: 17px;
    margin-bottom: 36px;
  }
  .event-p {
    padding-inline: 20px;
    margin-bottom: 50px !important;
  }
  .event-gallery {
    gap: 120px;
    row-gap: 50px;
  }
  .event-item p {
    font-size: 21px;
    margin-top: 15px;
  }
  .footer {
    padding-top: 40px;
  }
  .footer-logo img {
    width: 220px !important;
    margin-bottom: 50px;
  }
  .footer-links {
    display: flex;
    flex-direction: row;
    justify-content: space-between !important;
  }
  .footer-links a {
    padding-inline: 8px;
  }
  .hidden-sp {
    display: block;
  }
  .hidden-tb {
    display: none;
  }
}

/* PC ここかから --------------------------------------------------------------------*/

/* header ここから --------------------------------------------------------------------*/

@media screen and (min-width: 1024px) {
  .l-header__nav {
    display: none;
  }
  .l-header__nav--pc {
    display: block;
  }
  .logo img {
    width: 100%;
    padding-top: 10px;
    padding-left: 15px;
  }
  nav ul li a {
    padding: 0 12px;
    font-size: 19px;
    letter-spacing: -0.01em;
  }
  .header-content {
    padding-top: 0 !important;
  }
  .introduction {
    padding-top: 59px !important;
    padding-bottom: 74px;
  }
  .introduction h2 {
    font-size: 50px !important;
    letter-spacing: -0.03em;
    margin-top: 37px;
  }
  .introduction p {
    font-size: 25px !important;
    padding-inline: 50px;
    line-height: 1.2 !important;
  }
  /* 左矢印 */
  .job__prev::before {
    width: 50px;
    height: 50px;
  }
  /* 右矢印 */
  .job__next::before {
    width: 50px;
    height: 50px;
  }
  .job__slider {
    width: auto;
    max-width: 1000px !important;
    padding-inline: 50px !important;
  }
  .job__swiper {
    padding-left: 10px;
    padding-right: 10px;
  }
  .work-shifts h3 {
    font-size: 50px !important;
    letter-spacing: -0.03em;
    margin-top: 37px;
    margin-bottom: 56px;
  }
  .work-shifts {
    padding-top: 56px;
    padding-inline: 95px;
  }
  .work-shifts p {
    font-size: 25px !important;
    padding-inline: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.03em;
  }
  .workshift-text {
    margin-bottom: 26px !important;
  }
  .shifts-container {
    flex-direction: row;
    justify-content: space-between;
    padding-inline: 0 !important;
    margin-bottom: 50px !important;
  }
  .shift-a {
    width: 46%;
    border-left: 15px solid #e96d23;
  }
  .shift-b {
    width: 46%;
    border-left: 15px solid #00ade1;
  }
  .shift-content h3 {
    font-size: 25px !important;
    padding-inline: 50px;
    line-height: 1.2 !important;
    letter-spacing: -0.03em;
    margin-top: 12px !important;
    margin-bottom: 20px !important;
  }
  .shift-content {
    padding-left: 13px !important;
  }
  .shift-a {
    margin-bottom: 0;
  }
  .duties-section {
    border-radius: 15px !important;
    border-left: 15px solid #9cc53a;
    margin-top: 60px !important;
  }
  .duties-section h3 {
    font-size: 25px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .duties-section ul {
    padding-left: 60px !important;
    padding-right: 40px;
  }
  .duties-section ul li {
    font-size: 25px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em;
    text-indent: -1px !important;
  }
  .oneday-flow h3 {
    font-size: 50px !important;
    letter-spacing: -0.04em;
    margin-top: 32px;
    margin-bottom: 56px;
  }
  .h3-decoration img {
    width: 582px;
    margin-top: 70px;
  }
  .oneday-flow p {
    font-size: 25px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.03em;
    margin-top: 10px !important;
    margin-bottom: 30px !important;
  }
  .oneday-flow h4 {
    font-size: 25px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.1em;
    margin-top: 60px !important;
    margin-bottom: 22px !important;
  }
  .timeline img {
    max-width: 900px !important;
    height: 40px;
  }
  .timeline {
    margin-inline: auto;
  }
  .Class-Types h3 {
    font-size: 50px !important;
    letter-spacing: -0.04em;
    margin-top: 32px;
    margin-bottom: 56px;
  }
  .h3-introduction p {
    font-size: 25px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em;
    margin-top: 60px !important;
    margin-bottom: 22px !important;
  }
  .features p {
    font-size: 25px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em;
    margin-bottom: 16px !important;
  }
  .features img {
    width: 370px;
  }
  .features h4 {
    font-size: 25px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em;
  }
  .stage-classes {
    margin-top: -8px !important;
  }
  .stage-classes-p {
    margin-bottom: 40px !important;
  }
  .school {
    margin-top: 0 !important;
  }
  .adults {
    margin-top: 0 !important;
  }
  .Dress-Code h3 {
    font-size: 50px !important;
    letter-spacing: -0.04em;
    margin-top: 30px;
  }
  .h3-decoration-dress-code {
    margin-top: 40px;
  }
  .clothes h4 {
    font-size: 25px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em;
  }
  .clothes p {
    font-size: 25px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em;
    margin-bottom: 20px !important;
  }
  .clothes img {
    width: 370px;
  }
  .female-teachers {
    margin-top: -5px !important;
  }
  .female-teachers-p2 {
    margin-top: 40px !important;
  }
  .event h3 {
    font-size: 50px !important;
    letter-spacing: -0.04em;
    margin-top: 30px;
  }
  .event-gallery {
    margin-top: 35px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 65px;
    row-gap: 40px;
    padding-top: 0;
    padding-bottom: 0;
    padding-inline: 16px;
  }
  .event-gallery-item p {
    font-size: 25px !important;
    padding-inline: 0;
    line-height: 1.23 !important;
    letter-spacing: 0.03em !important;
  }
  .box-shadow {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 -10px 20px rgba(0, 0, 0, 0.2);
  }
}

/* box-shadow修正 --------------------------------------------------------------------------*/
.work-shifts {
  margin-top: 30px;
}

.box-shadow {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 -10px 20px rgba(0, 0, 0, 0.2);
}

.add-section {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  padding-inline: 70px;
}
.add-section__text {
  padding-top: 20px;
  font-family: "Corbel", "Helvetica", sans-serif;
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.add-section .h4-decoration img {
  margin-top: 40px;
  height: 3px;
}
.event .h3-decoration img {
  margin-top: 0px;
}
@media screen and (max-width: 1000px) {
  .add-section__text {
    font-size: 20px;
  }
}
@media screen and (max-width: 768px) {
  .add-section {
    margin-top: 60px;
  }
  .add-section__text {
    font-size: 16px;
  }
}