/*--------------------------------
  メイン構造
----------------------------------*/
.support-inner, .circle-inner, .about-inner, .home-intro-inner, .home-director-inner, .graduate-voice-inner, .home-inner, .home-admission-inner, .home-steps-inner, .home-support-inner2 {
  padding: 80px 8%;
  width: 100%; /* まずは画面幅いっぱいに */
  max-width: 1400px; /* でも1400pxを超えない */
  margin: 0 auto;
}
.home-support-inner2 {
  padding: 80px 8% 180px;
}
.wave, .wave-orange {
  width: 100%;
}
.wave-orange {
  background-color: #FFEBC7;
}


/*--------------------------------
  背景色
----------------------------------*/
.circle-row, .home-director {
  background-color: #E7B880;
}
.about, .graduate-voice, .home-support2 {
  background-color: #FFEBC7;
}
/*--------------------------------
  点線
----------------------------------*/
.dotted-line {
  width: 100%;
  border-bottom: 6px dotted #E7B880;
  margin: 10px 0 20px;
}
.dotted-line_white {
  width: 100%;
  border-bottom: 6px dotted #ffffff;
  margin: 10px 0 20px;
}
/*--------------------------------
  ボタン
----------------------------------*/
.rounded-button {
  display: inline-block;
  padding: 10px 20px; /* 縦横の余白 */
  background-color: #DF8E2D; /* 背景色 */
  color: #fff; /* 文字色 */
  font-size: 1.8rem; /* 文字サイズ */
  font-weight: bold;
  text-decoration: none; /* 下線を消す */
  border: none; /* ボーダーを消す */
  border-radius: 30px; /* 角丸の半径 */
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.rounded-button:hover {
    opacity: 0.8;
}

.rounded-button::before {
  content: "▶";                       /* 三角アイコン */
  display: inline-block;
  width: 2.0em;                       /* 円の幅 */
  height: 2.0em;                      /* 円の高さ */
  line-height: 2.0em;                /* アイコンを真ん中に */
  margin-right: 1.5em;               /* テキストとの間隔 */
  background-color: #FEFBF3;             /* 円の背景色 */
  color: #d1a95f;                     /* アイコン（三角）の色 */
  border-radius: 50%;                 /* 円にする */
  text-align: center;                 /* アイコンを中央寄せ */
  font-size: 0.6em;                   /* アイコンサイズ */
}








@media screen and (max-width: 768px){

.rounded-button{
width: fit-content;
display: block;
margin: 0 auto;
font-size: 1.4rem;
text-align: center;
margin-top: 20px;
}

}
/*--------------------------------
  1. ご支援のお願い
----------------------------------*/
/* 全体の左右レイアウト */
.intro-content {
gap: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 左側のテキストは自動で広がる */
.intro-text {
  flex: 6;
  padding: 20px 0 0 0;
  text-align: left;
  line-height: 190%;
}
.intro-text h1, .about h2,  .graduate-voice h2, .home-admission-area h2,.graduate-voice-inner h2 {
  font-size: 3.2rem;
  color: #8F4400;
  width: fit-content;
  border-bottom: 7px dotted #E7B880;
  margin-bottom: 10px;
  padding-right: 50px;
  padding-bottom: 10px;
}
.intro-text p {
  padding-bottom: 10px;
}

@media screen and (max-width: 1156px){
.intro-text h1 {
  width: 380px;
  padding-right: 20px;
}

.intro-text p {
  padding: 10px 0 30px;
}
}

@media screen and (max-width: 768px) {
  .intro-content {
    flex-direction: column;
gap: 0px;
}
  .intro-text {
    width: 100%;
    padding: 0;
    text-align: center;
  }
  .intro-text h1 {
    padding-right: 0;
    margin-bottom: 15px;
    font-size: 2.0rem;
    width: 100%;
  }
  .intro-text p {
  font-size: 1.4rem;
    width: 100%;
    padding: 0;
    text-align: left;
  }
  .intro-images img {
    flex: none;
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
  }
}
/*--------------------------------
  丸のなか
----------------------------------*/
/* 並びの親コンテナ */
.circle-inner {
  display: flex;
  gap: 20px; /* 円同士の間隔 */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* 幅が狭くなると折り返す */
  margin: 0 auto; /* 必要に応じて */
}
/* 各円アイテム */
.circle-item {
  width: 450px;
  height: 450px;
  /* 幅に合わせて高さも同じに（常に正方形） */
  aspect-ratio: 1 / 1;
  background-color: #FFF9F0; /* 円の背景色 */
  border: 4px solid #E99C17;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 縦中央寄せ */
  align-items: center; /* 横中央寄せ */
  text-align: center;
  box-sizing: border-box;
  padding: 80px 20px; /* 内側余白 */
}
/* 円内のテキスト */
.circle-text {
  color: #966E42;
  margin: 0 0 10px; /* テキスト下に余白 */
  font-size: 1.8rem;
  line-height: 2.0;
}
.circle-text_orange {
  color: #C07D17;
}
/* 円内の画像 */
.circle-img {
  max-width: 60%; /* 円内に収まるように */
  height: auto;
}
/* スマホ対応：画面幅600px以下で上下に並び替え */
@media screen and (max-width: 768px) {
  .circle-inner {
    display: block;
    gap: 40px;
  }
  .circle-item {
    margin: 0 auto;
    /* 幅は親幅いっぱい、またはお好みのmax-width */
    width: 100%;
    max-width: 375px;
    height: auto; /* 任意で調整 */
    /* 高さは幅に合わせて自動で決定 */
    aspect-ratio: 1 / 1;
    justify-content: center;
    /* padding はそのままでOK。box-sizing: border-box が効いていれば枠内に収まります */
    padding: 0 30px;
  }
  .circle-item:nth-child(1) {
    margin-bottom: 40px;
  }
  .circle-row {
    flex-direction: column;
  }
  .circle-text { /* テキスト下に余白 */
    font-size: 1.6rem;
  }
  .circle-img {
    max-width: 45%; /* 円内に収まるように */
  }
  /* PC 固定 450px 幅にしたいなら（任意） */
}
/*--------------------------------
  2. マナーズが大事にしていること
----------------------------------*/
/* セクション全体 */
.about {
  text-align: center;
}
.about h2 {
  font-size: 3.2rem;
  color: #8F4400;
  text-align: left;
  border-bottom: 7px dotted #E7B880;
  margin-bottom: 10px;
  padding-right: 50px;
  padding-bottom: 10px;
}
/* .section-inner の中央寄せ */
.about .section-inner {
  text-align: left; /* about-block内は左右レイアウトのため左寄せ */
  padding-top: 70px;
}
/* about-block：左右レイアウト（4:6の比率） */
.about-block {
  display: flex;
  margin-bottom: 80px;
  align-items: center;
}
/* 左側：画像 */
.about-image-left {
  flex: 4;
}
.about-image-left img {
  width: 500px; /* 固定サイズ */
  height: 410px; /* 固定サイズ */
  object-fit: cover;
  border-radius: 25px;
}
/* 右側：テキストボックス */
.about-text-right {
  flex: 6;
  background-color: #fff;
  padding: 20px;
  border-radius: 0px 20px 20px 0px;
}


.about-text-right.second {
  border-radius: 20px 0px 0px 20px;
}

/* テキストボックス内の見出し */
.about-text-right_1 {
  font-size: 2.4rem;
  color: #AE7824;
  margin: 0 0 10px;
  border-bottom: 7px dotted #E7B880;
  margin-bottom: 10px;
  padding-right: 50px;
  padding-bottom: 10px;
}

.about-text-right_2 {
  font-size: 2.4rem;
  color: #C65C3F;
  margin: 0 0 10px;
  border-bottom: 7px dotted #E7B880;
  margin-bottom: 10px;
  padding-right: 50px;
  padding-bottom: 10px;
}

.about-text-right_3 {
  font-size: 2.4rem;
  color: #8A7617;
  margin: 0 0 10px;
  border-bottom: 7px dotted #E7B880;
  margin-bottom: 10px;
  padding-right: 50px;
  padding-bottom: 10px;
}




/* テキストボックス内の点線 */
.about-text-right .circle-dots {
  height: 7px;
  background-image: radial-gradient(#E7B880 3.5px, transparent 3.5px);
  background-repeat: repeat-x;
  background-size: 14px 7px;
  margin-bottom: 10px;
}
/* テキストボックス内の説明文 */
.about-text-right .description {
  color: #855726;
  line-height: 1.8;
}
.about-block:nth-child(2) {
  flex-direction: row-reverse;
}
/* コンテナ：PCで横並び2列、折り返し可 */
.image-text-row {
  display: flex;
  gap: 40px; /* アイテム間の余白 */
  justify-content: space-between;
  flex-wrap: wrap; /* 幅が狭いときは折り返す */
  margin: 0 auto;
}

/* 各アイテム */
.image-text-item {
  flex: 1 1 calc(50% - 20px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column; /* 縦方向に配置 */
  align-items: center; /* 子要素を横方向中央に配置 */ 
  position: relative;
}
/* アイテム内の画像 */
.image-text-img {
  width: 90%;
  display: block;
  align-items: center;
  margin-bottom: 10px;
}
/* アイテム内のテキスト */
.item-text {
width: 90%;
  margin: 0;
  color: #7A6A6A;
  line-height: 1.4;
}

.image-text-boy{
position: absolute;
  width: 7vw; 
  max-width: 90px;/* 画面幅の10%なので画面サイズで自動的に小さくなる */
  top: 25%;
  left: 95%;
}
/* スマホ対応：画面幅600px以下で1列に */
@media screen and (max-width: 768px) {
  .about-inner h2 {
    text-align: center;
    padding-right: 0;
    margin-bottom: 15px;
    font-size: 2.0rem;
    width: 100%;
  }
  .about p {
    font-size: 1.4rem;
  }
  /* 各ブロックを縦並びに */
  .about-block {
    flex-direction: column; /* IMG→TEXT の順 */
    align-items: flex-start; /* 左寄せ */
    gap: 20px; /* 要素間の隙間 */
  }
  .about-image-left img {
    width: 100%; /* 固定サイズ */
    height: auto; /* 固定サイズ */
  }
  /* 子要素をフル幅に */
  .about-image-left, .about-text-right {
    flex: none;
    width: 100%;
    padding: 0;
  }
  .about-block:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }
  .about-text-right h3 {
    font-size: 1.6rem;
    text-align: center;
    margin: 10px 15px 10px;
    padding-right: 0px;
    padding-bottom: 0px;
  }
  .about-text-right p {
    font-size: 1.4rem;
  }
  .about-text-right .description {
    padding: 0px 20px 20px;
  }
  
  .image-text-boy{
  width: 10vw; 
  max-width: 90px;/* 画面幅の10%なので画面サイズで自動的に小さくなる */
  top: 35%;
  left: 95%;
}
}
/*--------------------------------
  3. ホームの紹介
----------------------------------*/
.home-intro .image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}
.home-intro h2 {
  font-size: 3.2rem;
  color: #8F4400;
  margin: 0;
  margin-bottom: 10px;
}
.home-intro .description {
  line-height: 1.8;
  margin-top: 20px;
}
.home-intro_group {
position: relative;
  display: flex;
  gap: 20px; /* アイテム間の余白 */
  justify-content: center;
  flex-wrap: wrap; /* 幅が狭いときは折り返す */
  margin: 0 auto;
  padding: 20px 20px 0;
}
/* 各アイテム */
/* 親コンテナを相対配置に */
.home-intro_item {
   /* ←追加 */
  overflow: hidden; /* はみ出しを隠す */
  flex: 1 1 calc(50% - 20px);
  box-sizing: border-box;
  margin-bottom: 10px;
}

.home-intro_item:nth-child(2) {
padding-top: 40px;
}

/* 画像 */
.home-intro_item img {
  width: 550px;
  height: 320px;
  object-fit: cover;
  border-radius: 25px;
  display: block;
}
/* 見出しを画像上に重ねる */
.home-intro_h3left {
  position: absolute; /* ←追加 */
  top: 240px; /* 画像上部からの距離 */
  left: 0px; /* 画像左端からの距離 */
  margin: 0;
  padding: 6px 20px;
  background-color: #FFEBC7; /* オレンジ背景 */
  color: #503409;
  border-radius: 8px 8px 0 0; /* 角丸 */
  font-size: 1.8rem;
  z-index: 2;
}

.home-intro_h3right {
  position: absolute; /* ←追加 */
  top: 240px; /* 画像上部からの距離 */
  right: 35px; /* 画像左端からの距離 */
  margin: 0;
  padding: 6px 20px;
  color: #503409;
  border-radius: 8px 8px 0 0; /* 角丸 */
  font-size: 1.8rem;
  z-index: 2;
background-color: #F5BBA7;

}
/* 説明文を画像下部に重ねる */
.home-intro_item .item-text_left {
  position: absolute; /* ←追加 */
  bottom: -10px; /* 画像下部からの距離 */
  left: 0px; /* 画像左端からの距離 */
  right: 20px; /* 画像右端からの距離 */
  margin: 0;
  padding: 10px 30px;
  width: fit-content;
  background-color: #FFFFFF; /* 半透明の白背景 */
  color: #503409;
  border-radius: 0px 8px 8px ; /* 角丸 */
  font-size: 1.6rem;
  line-height: 3;
  z-index: 2;
  font-weight: 500;
}


.item-text_right{
  position: absolute; /* ←追加 */
  bottom: -10px; /* 画像下部からの距離 */
  right: 0px; /* 画像右端からの距離 */
  margin: 0;
  padding: 10px 30px;
  width: fit-content;
  color: #503409;
  background-color: #FFFFFF;
  border-radius: 0px 8px 8px 8px; /* 角丸 */
  font-size: 1.6rem;
  line-height: 3;
  z-index: 2;
  font-weight: 500;
}



.item-text_right span,.item-text_left span{
color: #B36C17;
}


/* SPでは1列 */
@media screen and (max-width: 768px) {
  .image-text-row {
    flex-direction: column;
  }
  .home-intro_item {
    flex: 1 1 100%;
  }
  
    .home-intro h2 {
    text-align: center;
    padding-right: 0;
    margin-bottom: 0px;
    margin: 0 auto;
    font-size: 2.0rem;
  }
  /* 画像サイズをレスポンシブに */
  .home-intro_item img {
    width: 100%;
    height: 250px;
    border-radius: 10px; /* 角丸 */
  }
  
  .home-intro_group {
  gap: 80px; /* アイテム間の余白 */
  justify-content: space-between;
  flex-wrap: wrap; /* 幅が狭いときは折り返す */
  margin: 0 auto;
}

/* 見出しを画像上に重ねる */
.home-intro_h3left {
  top: 140px; /* 画像上部からの距離 */
  left: 0px; /* 画像左端からの距離 */
  font-size: 1.6rem;
}

.home-intro_h3right {
height: 45px;
  top: 525px; /* 画像上部からの距離 */
  right: 0px; /* 画像左端からの距離 */
  font-size: 1.6rem;

}
/* 説明文を画像下部に重ねる */
.home-intro_item .item-text_left {
  top: 180px; /* 画像下部からの距離 */
  left: 0px; /* 画像左端からの距離 */
  right: 20px; /* 画像右端からの距離 */
  height: 110px;
  font-size: 1.4rem;
}

.item-text_right{
font-size: 1.4rem;
}



}
/*--------------------------------
  4. ホーム長紹介
----------------------------------*/
.home-director h2 {
  font-size: 3.2rem;
  color: #8F4400;
  width: fit-content;
  border-bottom: 6px dotted #ffffff;
  margin-bottom: 10px;
  padding-right: 50px;
  padding-bottom: 10px;
}
.director-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
  padding-bottom: 100px;
}
.director-box {
  flex: 1;
  gap: 20px;
  background-color: #fff;
  border-radius: 40px;
  padding: 30px;
}
.director-face {
  width: 120px;
  height: 120px;
}
.director-info {
  display: flex;
  padding-bottom: 15px;
  gap: 60px;
}
.director-info h3 {
  font-size: 1.9rem;
  margin-top: 0;
  margin-bottom: 10px;
  color: #C57413;
  align-self: center;
}
.voice-title_sp {
    font-size: 1.6rem;
  }
.director-box p {
  padding: 15px 0 10px;
}
@media screen and (max-width: 768px) {
  .home-director-inner {
    padding: 80px 0;
  }
  /* 見出しはそのまま中央寄せなど調整したい場合 */
  .home-director h2 {
    text-align: center;
    padding-right: 0;
    margin-bottom: 0px;
    margin: 0 auto;
    font-size: 2.0rem;
    width: 100%;
  }
  .home-director p {
    font-size: 1.4rem;
  }
  .voice-title_sp {
    font-size: 1.4rem;
  }
  /* Flex レイアウトを解除して縦並びに */
  .director-row {
    display: block;
    margin-top: 30px;
            padding-bottom: 0px;
  }




  /* 各カードをフル幅に */
  .director-box {
    width: 100%;
    margin-bottom: 20px;
    padding: 8%; /* 下に余白を追加 */
  }
  /* ヘッダー内の flex も解除して縦積み */
  .director-info {
    display: block;
    padding-bottom: 10px;
  }
  /* 画像と見出しを縦並び中央寄せ */
  .director-face, .director-info h3 {
    display: block;
    margin: 0 auto 10px;
    text-align: center;
  }
  .director-info h3 {
    font-size: 1.6rem;
  }
}
/*--------------------------------
  5. 卒業生の声
----------------------------------*/

/* セクション見出し */
.graduate-voice h2 {
  font-size: 3.2rem;
  color: #8F4400;
  margin-bottom: 10px;
}
/* ボックスを並べる行 */
.voice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
}
/* 各声のカード */
.voice-box {
  flex: 1;
  gap: 20px;
  background-color: #fff;
  border-radius: 40px;
  padding: 30px;
}
/* 顔写真 */
.voice-face {
  width: 120px;
  height: 120px;
  object-fit: cover;
}
.voice-header {
  display: flex;
  gap: 60px;
  padding-bottom: 15px;
}
/* 見出し */
.voice-title {
  font-size: 1.9rem;
  margin-top: 0;
  margin-bottom: 10px;
  color: #4d3411;
  align-self: center;
}
/* 本文 */
.voice-box p {
  padding: 15px 0 10px;
}
@media screen and (max-width: 768px) {
  .graduate-voice-inner {
    padding: 80px 0;
  }
  .graduate-voice p {
    font-size: 1.4rem;
  }
  .graduate-voice h2 {
    text-align: center;
    padding-right: 0;
    margin-bottom: 0px;
    margin: 0 auto;
    font-size: 2.0rem;
    width: 85%;
  }


  .graduate-voice-inner h2 {
    text-align: center;
    padding-right: 0;
    margin-bottom: 0px;
    margin: 0 auto;
    font-size: 2.0rem;
    width: 85%;
  }
  .voice-row {
    display: block; /* flex レイアウトを解除 */
  }
  /* 各カードをフル幅に */
  .voice-box {
    width: 100%;
    margin-bottom: 20px;
    padding: 8%; /* 下に余白を追加 */
  }

  .voice-box p {
    font-size: 1.4rem;
  }
  /* ヘッダー内の flex も解除 */
  .voice-header {
    display: block;
    gap: 0;
    padding-bottom: 10px; /* 調整用 */
  }
  /* 顔写真とタイトルを上下に並べたい場合 */
  .voice-header .voice-face, .voice-header .voice-title {
    display: block;
    margin: 0 auto 10px; /* 中央寄せ＋下余白 */
    text-align: center;
  }
  .voice-title {
    font-size: 1.6rem;
  }
}
/*--------------------------------
  6. 入居を希望する方へ
----------------------------------*/
.home-admission-area h2 {
  font-size: 3.2rem;
  color: #8F4400;
  margin-bottom: 10px;
}
.admission-info {
  background-color: #fff; /* 白背景 */
  padding: 40px 65px;
  border-radius: 8px;
  margin: 45px auto;
}
/* 各項目 */
.admission-item {
  margin-bottom: 20px;
}
/* 用語（見出し） */
.admission-item dt {
  position: relative;
  font-weight: bold;
  font-size: 2.0rem;
  color: #825A2D;
  padding-left: 24px; /* 丸アイコン分の余白 */
  margin-bottom: 8px;
}
/* dt の前に丸アイコンを追加 */
.admission-item dt::before {
  content: "";
  position: absolute;
  top: 0.6em; /* テキストの縦位置に合わせる */
  left: 0;
  width: 17px; /* 丸の直径 */
  height: 17px;
  background-color: #E99C17; /* 丸の色 */
  border-radius: 50%;
}
/* 説明文 */
.admission-item dd {
  margin: 0 0 0 24px; /* dt の丸分だけ左に寄せる */
  color: #362700;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .home-admission-area h2 {
    text-align: center;
    padding-right: 0;
    margin-bottom: 15px;
    font-size: 2.0rem;
    width: 100%;
  }
  .admission-info {
    padding: 15px;
  }
  .admission-item dt {
    font-size: 1.6rem;
  }
  .admission-item dd {
    font-size: 1.4rem;
  }
  .admission-item dt::before {
    width: 13px; /* 丸の直径 */
    height: 13px;
  }
}
/*--------------------------------
  7. ホームでの自立への3ステップ
----------------------------------*/
.home-steps-area_h2 {
  font-size: 2.4rem;
  color: #8F4400;
  margin-bottom: 10px;
  text-align: center;
}
.steps-row {
  display: flex;
  gap: 30px;
  justify-content: space-between; /* 左右に均等配置 */
  flex-wrap: wrap;
  margin-top: 40px;
}
/* 各ステップボックス */
.step-box {
  flex: 1 1 calc((100% - 60px) / 3); /* 3列レイアウト：gap 30px ×2 =60px */
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* 縦並び */
  position: relative;
}
/* 画像エリア：高さ固定 */
.step-box img {
  width: 100%;
  height: 190px; /* 画像部分の高さを固定 */
  object-fit: contain; /* 全体を収める */
  object-position: center;
  display: block;
}
.steps_no {
  width: 90px;
  height: 60px;
  text-align: center;
  font-size: 4.0rem;
  color: #FFFFFF;
  background-color: #E7B880;
  border-radius: 50px 50px 0 0;
  position: absolute;
  top: 140px;
}
/* 見出し */
.step-box h3 {
  font-size: 1.8rem;
  color: #ffffff;
  padding: 5px;
  text-align: center;
  background-color: #E7B880;
  border-radius: 0 15px 0 0;
}
/* 本文 */
.steps_text {
  flex: 1; /* 残りを本文が使う */
  padding: 5px 15px 10px;
  color: #333;
  line-height: 1.6;
  background-color: #FFFFFF;
  border-radius: 0 0 15px 15px;
}

/* SP対応：1列表示 */
@media screen and (max-width: 768px) {


.sen_SP{
display: block;
}

.sp_br{
display: block;
}
  .steps-row {
    flex-direction: column;
  }
  .step-box {
    flex: 1 1 100%;
    margin-bottom: 20px;
  }
  .step-box img {
    height: 200px; /* 自然な高さ */
  }
  .home-steps-area_h2 {
    text-align: center;
    padding-right: 0;
    margin-bottom: 15px;
    font-size: 2.0rem;
    width: 100%;
  }
  .step-box h3 {
    font-size: 1.5rem;
  }
  .steps_no {
    font-size: 2.5rem;
    width: 70px;
    height: 45px;
    text-align: center;
    color: #FFFFFF;
    background-color: #E7B880;
    border-radius: 50px 50px 0 0;
    position: absolute;
    top: 160px;
  }
  .steps_text {
    font-size: 1.4rem;
  }
}
/*--------------------------------
  8. 支援してくださる方へ
  (1と同じデザイン)
----------------------------------*/
.section8-inner2 {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 120px;
  padding-bottom: 180px;
}
@media screen and (max-width: 768px) {
  .home-support-inner2 {
    padding: 80px 8% 100px;
  }
}