@charset "UTF-8";

/* 全体共通 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  line-height: 1.7;
  color: #707070;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo",
    "Yu Gothic", "Helvetica", "Arial", sans-serif;
  background-color: #fff;
}

.sp {
  display: none;
}

.wrapper {
  width: 81%;
  max-width: 1180px;
  margin: 0 auto;
}

.section-inner {
  width: 90%;
  margin: 0 auto;
}

.section-background {
  background-color: #fff8e6;
  padding: 100px 0 150px;
}

.section-title {
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
}

/* お問い合わせ */
#contact {
  background-image: url(../img/dot_pattern_background_1180x524.png);
  background-size: cover;
  position: relative;
  z-index: 0;
  padding: 150px 0 100px;
}
#contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 134px solid transparent;
  border-right: 134px solid transparent;
  border-top: 78px solid #fff8e6; /* 上のセクションの背景色 */
  z-index: 1;
}
#contact:last-of-type::before {
  display: none;
}
#contact::after {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 と同義 */
  background-color: rgba(255, 255, 255, 0.6); /* 白で40%透明 */
  z-index: 0;
  pointer-events: none; /* クリック等のイベントを透過させる */
}
.contact-title {
  font-size: clamp(2.4rem, 2.85vw, 3.2rem);
  color: #707070;
  position: relative;
  z-index: 1;
  text-align: center;
}
.contact-title span {
  color: #f7b52c;
  position: relative;
  z-index: 2;
}
.contact-title::after {
  content: "どんなことでも、お気軽にお問い合わせください";
  font-size: clamp(1.6rem, 2em, 2.2rem);
  display: block;
  text-align: center;
  margin-top: 30px;
}
.contact-link {
  display: block;
  width: 53%;
  min-width: 285px;
  max-width: 508px;
  font-size: clamp(1.8rem, 1.5vw, 2.4rem);
  font-weight: bold;
  padding: 30px 30px;
  margin: 70px auto;
  border: 3px solid #f7b52c;
  color: #f7b52c;
  background-color: #fff;
  text-align: center;
  border-radius: 20px;
  position: relative;
  z-index: 2;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}
.contact-link::after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(../img/arrow_icon_default_ultrahighres.png);
  background-size: cover;
  display: block;
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
}
.contact-link:hover {
  background-color: #f7b52c;
  color: #fff;
  border-color: #fff;
}
.contact-link:hover::after {
  background-image: url(../img/arrow_icon_hover_ultrahighres.png);
}

/* ヘッダーエリア */
header {
  width: 100%;
  padding: 20px 0 20px 2%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 1;
}
.logo-img {
  width: 30%;
  height: 5%;
}
.logo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* メインビジュアル */

.hero {
  background-image: image-set(
    url("../img/header_left_background_itstyle_complex_2x.png") 2x,
    url("../img/header_left_background_itstyle_complex.png") 1x
  );
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  width: 100%;
  height: min(100vh, 900px);
  padding-left: 2%;
  padding-top: 80px;
  position: relative;
}

.hero-copy {
  font-size: clamp(2.4rem, 2vw + 1rem, 4rem);
  line-height: 1.7;
  color: #707070;
  padding-top: 150px;
}

.hero-copy span {
  color: #f7b52c;
}
.hero-achieve {
  display: flex;
  margin-top: 70px;
}
.achieve-circle {
  width: 16%;
  aspect-ratio: 1 / 1; /* 縦横比1:1 = 正円 */
  max-width: 233px;
  min-width: 200px;
  border-radius: 50%;
  background-color: #85c88a;
  margin-right: 25px;
}
.circle-contents {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.circle-contents h3,
p {
  color: #fff;
}
.circle-contents h3 {
  font-size: clamp(2rem, 1.6vw, 2.3rem);
  font-weight: 600;
}
.circle-contents p {
  font-size: clamp(1.6rem, 1.6vw, 2.3rem);
  margin-top: 15px;
  line-height: 1.9;
}
.achieve-circle:nth-of-type(n + 2) .circle-contents p {
  line-height: 1.2;
}
.circle-contents span {
  font-size: clamp(4.8rem, 3.47vw, 5.5rem);
}
.main-vj {
  width: 70%;
  height: 100%;
  /* 画像挿入時に消してください */
  background-color: #f0f0f0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

/* こんなお悩みありませんか？ */
.case {
  margin-top: 150px;
}
.case h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2rem, 2.2vw, 3.2rem);
  height: clamp(100px, 12.7vw, 183px);
  position: relative;
  text-align: center;
}
.case h2::before,
.case h2::after {
  content: "";
  width: 12%;
  aspect-ratio: 1 / 1; /* 正方形を維持 */
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.case h2::before {
  background-image: url(../img/think_women.png);
  left: 4%;
}

.case h2::after {
  background-image: url(../img/think_men.png);
  right: 4%;
}

.case-flex {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}
.case-contents {
  width: 32%;
  padding: 25px 20px;
  border: 3px solid #f7b52c;
}
.case-contents-img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.case-contents-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-contents h3 {
  font-size: 2rem;
  margin: 30px 0;
  text-align: center;
}
.case-contents ul {
  padding-left: 25px;
  margin: 0;
}
.case-contents li {
  font-size: 1.4rem;
  list-style: none;
  position: relative;
  margin-bottom: 20px;
}
.case-contents li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  background-color: #f7b52c;
  position: absolute;
  top: 0.6em;
  left: -20px;
}
.case-contents li:last-child {
  margin-bottom: 0;
}

/* ドット背景部分 */
.case-support {
  position: relative;
  margin: 100px 0;
  padding: 55px 0;
  width: 100%;
  overflow: hidden; /* 疑似要素のはみ出し防止 */
}
.case-support::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/dot_pattern_background_1180x524.png);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.27; /* ←背景だけに透過がかかる */
  z-index: 0;
}
.case-support-heading {
  position: relative;
  z-index: 1;
  width: 74.6%;
  max-width: 1000px;
  margin: 0 auto 100px;
  padding: 0 1em;
}
.case-support-top,
.case-support-bottom {
  color: #707070;
}
.case-support-top {
  font-size: clamp(2.2rem, 2vw, 3rem);
  text-align: left;
  font-weight: bold;
  margin: 0;
}
.case-support-bottom {
  font-size: clamp(2.2rem, 2vw, 3rem);
  text-align: right;
  font-weight: bold;
  margin: 0.2em 0 0;
}
.case-upport-bottom span {
  font-size: clamp(2.8rem, 3vw, 5rem);
  color: #f7b52c;
  font-weight: bold;
}
.case-support-tags {
  position: relative;
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 0 1rem;
}
.tag-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.tag-row img {
  width: 100%;
  max-width: 330px;
  height: auto;
}
.case-support-illust {
  width: 120px;
  max-width: 150px;
  height: auto;
  position: absolute;
  right: 20px;
  bottom: 0;
  transform: translateY(30%);
}
.case-support-illust img {
  width: 100%;
  height: 100%;
}

/* CRA紹介？ */

/* CRAとは内セクションタイトル共通 */
.follow-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.category-tag {
  display: inline-block;
  color: #fff;
  padding: 5px 25px;
  font-size: clamp(1.6rem, 1.4vw, 1.8rem);
  border-radius: 13px;
  margin-right: 10px;
}
.tag-red {
  background-color: #f58087;
}
.tag-green {
  background-color: #55cd96;
}
.tag-blue {
  background-color: #559ccd;
}
.follow-section-flex {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.follow-section-img {
  width: 49%;
}
.follow-section-text {
  width: 46%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.follow-section-text p {
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  line-height: 1.6;
  color: #707070;
}

/* CRAとは？ */
.what-cra-title {
  text-align: center;
}

.what-cra h2 {
  display: inline-block; /* ←中央揃えかつ子要素の左揃えに必要 */
  text-align: left; /* ←左揃えにする */
  position: relative;
}
.what-cra h2 span {
  color: #f7b52c;
}
.what-cra h2::before {
  content: "就労移行支援事業所";
  display: block;
  font-size: clamp(1.1rem, 1.6vw, 2.3rem);
  color: #707070;
  margin-bottom: 0.3em;
}
.what-cra h2::after {
  content: "";
  display: block;
  width: 10%;
  aspect-ratio: 1 / 1;
  background-image: url(../img/chomp.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: -40px;
}

.three-power {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.three-power-img {
  width: 38%;
  height: auto;
}
.three-power-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.three-power h3 {
  font-size: clamp(2.2rem, 2.5vw, 3.2rem);
}
.three-power h3 span {
  color: #fa9898;
}
.three-power h3 span:last-child {
  color: #f7b52c;
}

.what-cra-text {
  font-size: clamp(1.5rem, 1.52vw, 1.8rem);
  color: #707070;
  margin: 80px 0 50px;
  line-height: 1.8;
}

.three-power-box {
  display: flex;
  justify-content: space-between;
}
.three-power-card {
  width: 27%;
  padding: 30px 15px;
  border-radius: 30px;
}
.three-power-card:first-child {
  background-color: #f58087;
}
.three-power-card:nth-child(2) {
  background-color: #559ccd;
}
.three-power-card:last-child {
  background-color: #56cd96;
}
.three-power-card {
  width: 30%;
  min-width: 231px;
  padding: 30px 15px;
  border-radius: 30px;
}
.three-power-card h4 {
  font-size: clamp(1.6rem, 1.38vw, 2rem);
  color: #fff;
  text-align: center;
}
.three-power-card p {
  font-size: clamp(1.3rem, 1.38vw, 1.8rem);
  color: #fff;
  margin-top: 20px;
}

/* 個別支援プログラム */
#program {
  margin-top: 150px;
}

/* カリキュラム */
#curriculum {
  margin-top: 150px;
}

.curriculum-title {
  text-align: center;
}
.curriculum-title h2 {
  font-size: clamp(2rem, 2.2vw, 3.2rem);
  border: 3px solid #707070;
  padding: 20px;
  display: inline-block;
}

.curriculum-contents {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 30px;
  margin-top: 50px;
}
.curriculum-card {
  /* width: 31.2%; */
  width: calc((100% - 60px) / 3);
  padding: 30px 20px;
  background-size: 200% 200%;
  cursor: pointer;
}
.curriculum-card:hover {
  background-position: 100% 0;
  background-size: 200% 200%;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0)
  );
}
.curriculum-card:first-child {
  background-color: #55cd96;
}
.curriculum-card:nth-child(2) {
  background-color: #f58087;
}
.curriculum-card:nth-child(3) {
  background-color: #559ccd;
}
.curriculum-card:nth-child(4) {
  background-color: #ff9d3f;
}
.curriculum-card:nth-child(5) {
  background-color: #8693f7;
}
.curriculum-card p {
  color: #fff;
}
.curriculum-img {
  width: 43%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* 画像挿入時に消してください */
  background-color: #f0f0f0;
  margin: 20px auto 30px;
}
.curriculum-card h3 {
  font-size: 2rem;
  color: #fff;
  text-align: center;
}
.curriculum-card p {
  font-size: 1.6rem;
  height: 142px;
}
.curriculum-card button {
  font-size: 1.4rem;
  padding: 6px 30px;
  margin: 20px auto 0;
  display: block;
  color: #fff;
  border: none;
  border-radius: 11px;
  position: relative;
  transition: transform 0.3s ease;
}
.curriculum-card:hover button {
  transform: scale(1.05);
}
.curriculum-card button::after {
  content: "";
  background-image: url(../img/arrow_kunoji_white_hd.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
}
.curriculum-card:nth-child(1) button {
  background-color: #038b4c;
}
.curriculum-card:nth-child(2) button {
  background-color: #e80311;
}
.curriculum-card:nth-child(3) button {
  background-color: #0055cc;
}
.curriculum-card:nth-child(4) button {
  background-color: #e66a00;
}
.curriculum-card:nth-child(5) button {
  background-color: #2c43e6;
}

/* カリキュラムポップアップ */
.modal-overlay {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.37);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.modal-content {
  width: 92%;
  height: 95%;
  max-width: 902px;
  border-radius: 25px;
  padding: 50px 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close-btn {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 30px;
  right: 7.2%;
  cursor: pointer;
}
.close-btn-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.close-btn-box::after {
  content: "Close";
  font-size: 1.5rem;
  color: #fff;
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}
.close-btn-box span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
}
.close-btn-box span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn-box span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-title {
  font-size: clamp(2.4rem, 3vw, 2.8rem);
  text-align: center;
  color: #fff;
  margin-top: 30px;
}

.modal-img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  object-fit: cover;
  margin: 30px auto 0;
  /* 画像挿入時に消してください */
  background-color: #f0f0f0;
}

.modal-text {
  font-size: 1.8rem;
  line-height: 1.7;
  color: #fff;
  margin: 30px auto 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #fff;
}

.modal-skill {
  display: flex;
  margin-top: 50px;
}

.modal-skill dt,
.skill-label {
  font-size: clamp(1.2rem, 1.5vw, 1.8rem);
  white-space: nowrap; /* 折り返し防止 */
  color: #fff;
}
.modal-skill dt {
  font-weight: bold;
  margin: 0 20px 0 0;
}
.modal-skill dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.skill-item {
  display: flex;
  align-items: center;
  margin: 0 20px 20px 0;
}
.skill-item img {
  width: 2em;
  height: 2em;
  max-width: 23px;
  max-height: 23px;
  margin-left: 0.3em;
  vertical-align: middle;
}
.skill-label {
  margin-right: 7px;
}

.modal-job {
  margin-top: 30px;
  display: flex;
  align-items: center;
}
.modal-job dt,
.modal-job dd {
  font-size: clamp(1.2rem, 1.5vw, 1.8rem);
  white-space: nowrap; /* 折り返し防止 */
  color: #fff;
}
.modal-job dt {
  font-weight: bold;
  margin-right: 20px;
}
.modal-job dd {
  margin-right: 20px;
}

/* カリキュラムポップアップ制御 */
#curriculum-modal {
  display: none; /* 初期は非表示 */
  position: fixed;
  inset: 0;
  z-index: 1000;
}

#curriculum-modal:not(.hidden) {
  display: block;
}

#curriculum-modal .close-btn {
  cursor: pointer;
}

#curriculum-modal .modal-title,
#curriculum-modal .modal-text {
  color: #fff;
}

#curriculum-modal.show .modal-overlay {
  animation: fadeIn 0.6s ease forwards;
}

#curriculum-modal.show .modal-content {
  animation: slideUp 0.6s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translate(-50%, -40%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

/* 外部実習について */
#ex-training {
  margin-top: 200px;
}

/* 提携企業先 */
#practice {
  margin-top: 150px;
  width: 100%;
  position: relative;
}
.practice-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 32.2vw, 280px);
  font-size: clamp(1.4rem, 2.71vw, 2.8rem);
  color: #f7b52c;
  background-color: #fff;
  border: 3px solid #f7b52c;
  text-align: center;
  padding: 18px;
}
.practice-flex {
  display: flex;
}
.nola,
.wfs {
  width: 50%;
  border: 3px solid #f7b52c;
  background-color: #fff;
  padding: 50px 50px;
}
.wfs {
  border-left: none;
}
.practice-logo {
  width: 68%;
  height: 120px;
  object-fit: cover;
  margin: 0 auto;
}
.practice-logo img {
  width: 100%;
  height: 100%;
}
.company-name {
  font-size: clamp(2rem, 4vw, 2.4rem);
  margin-top: 50px;
  text-align: center;
}
.company-introduction {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: #707070;
  margin-top: 30px;
}

/* そのほか取り組み */
#other-attempt {
  margin-top: 200px;
  display: flex;
  justify-content: space-around;
}

.attempt-content {
  width: 37%;
  display: flex;
  flex-direction: column;
}
.attempt-img {
  width: 100%;
  max-width: 386px;
}
.attempt-title {
  font-size: clamp(1.8rem, 2.2vw, 2.2rem);
  text-align: center;
  margin: 20px 0 0;
}
.attempt-content .category-tag {
  margin: 5px auto 20px;
}
.attempt-text {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  color: #707070;
  line-height: 1.7;
}

/* CRA独自の支援 */

.support-intro h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2rem, 2.2vw, 3.2rem);
  height: clamp(100px, 12.7vw, 183px);
  position: relative;
  text-align: center;
}
.support-intro h2::before,
.support-intro h2::after {
  content: "";
  width: 12%;
  aspect-ratio: 1 / 1; /* 正方形を維持 */
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.support-intro h2::before {
  background-image: url(../img/staff_women.png);
  left: 8%;
}

.support-intro h2::after {
  background-image: url(../img/staff_men.png);
  right: 6%;
}
.support-intro span {
  color: #f7b52c;
}

/* アーティクル内共通 */
.support-title {
  font-size: clamp(2rem, 2.2vw, 2.8rem);
  text-align: center;
}

/* 特別な講座(e-ラーニング) */
.e-learning {
  margin-top: 150px;
}
.e-learning h2::before {
  content: "ITスクールとの提携";
  display: block;
  text-align: center;
  margin-bottom: 5px;
  font-size: clamp(1.6rem, 2.2vw, 1.8rem);
}

.support-text {
  font-size: 1.6rem;
  color: #707070;
  margin: 40px auto 0;
  width: 80%;
}

/* デジハリ紹介 ハローPC教室紹介*/
.support-contents {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}

.digital-hollywood,
.hellow-pc {
  width: 44%;
}

.e-learning-img {
  width: 100%;
}

.e-learning-logo {
  width: 78%;
  margin: 30px auto;
}
.e-learning-logo img {
  width: 100%;
  height: 100%;
}

.e-learning-text {
  font-size: 1.6rem;
  color: #707070;
}

/* 絵本プロジェクト 、就活講座、合同プロジェクト*/
.ehon-project,
.job-coach,
.joint-project,
.absorb-support {
  margin-top: 200px;
}

.support-section-flex {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.support-section-img {
  width: 49%;
}
.support-section-text {
  width: 46%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.support-section-text p {
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  line-height: 1.7;
  color: #707070;
}
.sub-img-flex {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.sub-img {
  width: 48%;
}

.job-coach h2::before {
  content: "外部講師による";
  display: block;
  text-align: center;
  margin-bottom: 5px;
  font-size: clamp(1.6rem, 2.2vw, 1.8rem);
}

.absorb-support h3::before {
  content: "就職後も安心！";
  display: block;
  text-align: center;
  margin-bottom: 5px;
  font-size: clamp(1.6rem, 2.2vw, 1.8rem);
}

.absorb-title {
  font-size: 2.8rem;
  margin-bottom: 40px;
}

/* 同窓会 */

.reunion {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border: 3px solid #f7b52c;
  border-radius: 55px;
  background-color: #fff;
  padding: 50px;
  margin-top: 100px;
}
.reunion-text {
  width: 46%;
}
.reunion-text h3 {
  font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  font-weight: bold;
  text-align: center;
}
.reunion-text p {
  font-size: clamp(1.3rem, 1.6vw, 1.6rem);
  color: #707070;
  line-height: 1.7;
  margin-top: 25px;
}
.reunion-img {
  width: 46%;
}

/* 就職実績 */

.achivement-title {
  font-size: clamp(2.4rem, 3.39vw, 4rem);
  text-align: center;
}
.achivement-title span {
  color: #f7b52c;
}
.achivement-title::before {
  content: "多くの方が一歩を踏み出し、働き続けています!";
  font-size: clamp(1.6rem, 3.39vw, 2.2rem);
  display: block;
  text-align: center;
  margin-bottom: 30px;
}

.achievement-contents {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 70px;
}
.achievement-contents .achieve-circle {
  background-color: transparent;
  max-width: 350px;
  width: 40%;
  position: relative;
}
.achievement-contents .circle-contents {
  position: relative;
}
.achievement-contents .circle-contents img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.achievement-contents .circle-contents h3,
p {
  color: #707070;
}
.achievement-contents .circle-contents p span {
  color: #f7b52c;
}

.achievement-text h3 {
  font-size: clamp(2.5rem, 3.39vw, 3.2rem);
  text-align: center;
}
.achievement-text p {
  font-size: clamp(2.5rem, 3.39vw, 3.2rem);
  font-weight: bold;
  color: #707070;
  line-height: 1.7;
}

/* 就職先企業スライダー */

.company-slider {
  padding: 50px 0;
  background-image: url(../img/background_employment.png);
  background-size: cover;
}
.company-slider h2 {
  font-size: clamp(1.6rem, 1.66vw, 2.4rem);
  margin-bottom: 50px;
  text-align: center;
}
.slider-img {
  width: 13%;
  max-width: 200px;
  height: 128px;
  object-fit: cover;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 15px;
  box-sizing: border-box;
}
.slider-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* 画像挿入時に消してください↓ */
.img-blank {
  height: 128px;
  background-color: #f0f0f0;
}

/* ご家族・支援機関の方へ */
.for-supporters {
  padding: 0 16% 100px;
  position: relative;
}
.for-supporters::before {
  content: "";
  display: block;
  width: 23%;
  max-width: 280px;
  max-height: 280px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  background-color: #f0f0f0;
  /* 画像挿入 */
  /* background-image: url(); */
  position: absolute;
  top: 0;
  left: 5px;
}
.for-supporters::after {
  content: "";
  display: block;
  width: 23%;
  max-width: 280px;
  max-height: 280px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  background-color: #f0f0f0;
  /* 画像挿入 */
  /* background-image: url(); */
  position: absolute;
  bottom: 0;
  right: 5px;
}
.for-supporters h2 {
  font-size: clamp(2.4rem, 2.2vw, 3.6rem);
  text-align: center;
  padding-top: 30px;
  z-index: 2;
}
.for-supporters p {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.7;
  padding-top: 30px;
  position: sticky;
  z-index: 3;
}

.for-supporters-contents {
  margin-top: 100px;
  display: flex;
  justify-content: space-between;
}

.for-supporters-text {
  width: 46%;
}
.for-supporters-text h2 {
  font-size: clamp(1.8rem, 1.7vw, 3rem);
  line-height: 1.7;
}

.for-supporters-text p {
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  line-height: 1.7;
  color: #707070;
  margin-top: 20px;
}

.for-supporters-img {
  width: 49%;
}
/* .for-supporters-contents-img img{
  
} */

/* よくあるご質問 */
.faq-item {
  margin-top: 50px;
  cursor: pointer;
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-icon {
  width: clamp(3rem, 10vw, 7rem);
  height: clamp(3rem, 10vw, 7rem);
  border-radius: 50%;
  font-size: clamp(1.6rem, 6vw, 4rem); /* Responsive font size */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.q {
  background-color: #aed8fc;
}
.a {
  background-color: #ffc8c1;
}
.toggle-btn {
  width: clamp(2.2rem, 10vw, 3rem);
  height: clamp(2.2rem, 10vw, 3rem);
  position: relative;
}
.toggle-btn span {
  width: 100%;
  height: 4px;
  display: block;
  background-color: #707070;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all ease 0.5s;
}
.toggle-btn span:first-child {
  transform: rotate(90deg);
}
.toggle-active span:first-child {
  transform: rotate(0);
}

.faq-text {
  font-size: 1.6rem;
  margin-top: 30px;
}

.faq-answer {
  display: none;
  margin-top: 50px;
}

/* 施設情報 */

#center-info {
  margin: 150px auto;
}

.center-info-contents {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-direction: row;
  margin-top: 50px;
}

.info-card {
  width: clamp(280px, 32%, 340px);
  max-width: 380px;
  aspect-ratio: 380 / 520;
  background-color: #f0f0f0;
  border-radius: 20px;
  padding: 30px 20px;
  text-align: left;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card-red {
  background-color: #f28080;
}
.card-blue {
  background-color: #4c91c7;
}
.card-green {
  background-color: #55cd96;
}

.info-img {
  width: 100%;
  height: 180px;
  margin-bottom: 20px;
}
.info-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.info-card h3 {
  font-size: clamp(1.4rem, 1.2vw, 1.8rem);
  margin-bottom: 1rem;
  font-weight: bold;
}

.info-card p {
  font-size: clamp(1.2rem, 1vw, 1.6rem);
  line-height: 1.4;
  margin: 10px 0;
  color: #fff;
}

.info-card .info-address {
  min-height: 3.6em; /* 行数やフォントサイズに応じて調整 */
  display: flex;
  align-items: flex-start;
}

.info-card .info-time {
  font-size: clamp(1.1rem, 1.2vw, 1.4rem);
  font-weight: bold;
  margin: 20px 0 5px;
}

.info-card dl {
  display: flex;
  align-items: flex-start;
  gap: 1.5em;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.info-card dt {
  font-size: clamp(1.2rem, 1vw, 1.6rem);
  min-width: 60px;
}
.info-card dd {
  font-size: clamp(1.2rem, 1vw, 1.6rem);
  flex: 1;
}

.info-link {
  color: #fff;
  text-decoration: underline;
  text-align: center;
  font-weight: bold;
}

/* フッターエリア */
footer {
  background-color: #fff8e6;
  padding: 50px 0 30px;
}
.footer-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.cra-logo {
  width: 55.5%;
  max-width: 442px;
  object-fit: cover;
}
.cra-logo img {
  width: 100%;
  height: 100%;
}
.footer-left p {
  font-size: 1.6rem;
  color: #707070;
  margin-top: 20px;
}

.sns-icon {
  display: flex;
  gap: 20px;
}
.sns-img {
  width: 35px;
  height: 35px;
  object-fit: cover;
  display: block;
}
.sns-img img {
  width: 100%;
  height: 100%;
}

small {
  font-size: 1.2rem;
  display: block;
  text-align: center;
  margin-top: 50px;
}

@media screen and (max-width: 962px) {
  .curriculum-contents {
    justify-content: center;
  }
  .curriculum-card {
    width: 90%;
  }
  .three-power-box {
    flex-direction: column;
    justify-content: center;
  }
  .three-power-card {
    margin: 0 auto;
    width: 92%;
    margin-bottom: 20px;
  }
  .follow-section-title {
    flex-direction: column;
  }
  .follow-section-flex {
    margin-top: 40px;
  }
  .absorb-title {
    text-align: center;
  }
  .achieve-circle {
    width: calc((100% - 50px) / 3);
    min-width: auto;
  }
  .achieve-circle:last-of-type {
    margin-left: none;
  }
}

@media screen and (max-width: 682px) {
  .sp {
    display: block;
  }
  .section-background {
    padding: 50px 0;
  }
  .ehon-project,
  .job-coach,
  .joint-project,
  .absorb-support {
    margin-top: 100px;
  }
  .case-flex {
    flex-direction: column;
  }

  .case-contents {
    width: 100%;
    margin-bottom: 40px;
  }

  .follow-section-title {
    flex-wrap: wrap;
  }

  .curriculum-card {
    width: 90%;
  }
  .follow-section-flex {
    flex-direction: column;
  }

  .follow-section-img {
    width: 100%;
    margin-bottom: 20px;
  }
  .follow-section-text {
    width: 100%;
  }
  .follow-section-title > h2 {
    margin-bottom: 10px;
  }
  .practice-flex {
    flex-direction: column;
  }
  .nola,
  .wfs {
    width: 100%;
  }
  .wfs {
    border-left: 3px solid #f7b52c;
    border-top: none;
  }
  #other-attempt {
    flex-direction: column;
    align-items: center;
  }
  .attempt-content {
    width: 100%;
    margin-bottom: 40px;
  }
  .attempt-content .category-tag {
    margin-top: 10px;
  }
  .support-contents {
    flex-direction: column;
    justify-content: center;
  }
  .digital-hollywood,
  .hellow-pc {
    width: 100%;
    margin-bottom: 80px;
  }
  .hellow-pc {
    margin-bottom: 0;
  }
  .support-section-flex {
    flex-direction: column;
  }
  .support-section-img {
    width: 100%;
  }
  .support-section-text {
    width: 100%;
  }
  .support-section-text p {
    margin: 20px 0;
  }
  .reunion {
    flex-direction: column-reverse;
    align-items: center;
  }
  .reunion-img,
  .reunion-text {
    width: 100%;
  }
  .reunion-img {
    margin-bottom: 40px;
  }
  .achievement-contents {
    flex-direction: column;
  }
  .achievement-contents .achieve-circle {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .achievement-contents .achieve-circle {
    width: 80%;
    max-width: 400px;
  }

  .center-info-contents {
    flex-direction: column;
    align-items: center;
  }

  .info-card {
    width: 100%;
  }
  .for-supporters-contents {
    flex-direction: column-reverse;
  }
  .for-supporters-text {
    width: 100%;
  }
  .for-supporters-img {
    width: 100%;
    margin-bottom: 30px;
  }
  .case-support-illust img {
    display: none;
  }
  .case-support-bottom {
    text-align: left;
  }
  .three-power-img {
    width: 80%;
    margin-bottom: 20px;
  }
  .three-power {
    flex-direction: column;
  }
  .what-cra-text {
    margin-top: 20px;
  }
  .support-intro h2::before,
  .support-intro h2::after,
  .case h2::before,
  .case h2::after {
    display: none;
  }
  .footer-content {
    flex-direction: column;
    align-items: center;
  }
  .cra-logo {
    margin: 0 auto;
  }
  .modal-job,
  .modal-skill {
    flex-direction: column;
    align-items: flex-start;
  }
  .modal-job > dt,
  .modal-skill > dt {
    margin-bottom: 10px;
  }
  .modal-content {
    overflow-y: scroll;
  }
}