@charset "UTF-8";
body {
  background-color: #ece6dc;
  /* font-family: FOT-筑紫B丸ゴシック,Josefin Sans,sans-serif,; */

  font-family:"Yu Gothic", YuGothic, Helvetica, Arial,
  "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
  Meiryo, メイリオ, sans-serif,;
  color: #091535
}

img {
  max-width: 100%;
}

#concept, #system, #system2, #plan, #faq, #access, #people, #wrapper  {
  padding: 40px 0 50px 0;
  /* 56→50へ変更 */
}

.section-inner {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}
/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  .section-inner {
    padding: 0 24px;
    max-width: 550px;
  }
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
  #concept, #system, #system2, #plan, #faq, #access, #people {
    padding: 40px 0 30px 0;
  }
}

/** -----------------------------------
    テキスト
-------------------------------------**/

h2.large {
  font-weight: bold;
  font-size: 32px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-bottom: 30px;
}

h3.small {
  font-weight: bold;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

p.large {
  font-size: 17px;
  line-height: 2;
  letter-spacing: 0.06em;
  font-weight: bold;
}

p.medium {
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.06em;
}

p.small {
  font-size: 13px;
  line-height: 1.5;
  /* line-height: 1.75;　 */
  letter-spacing: 0.03em;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  h2.large {
    font-weight: bold;
    font-size: 22px;
    line-height: 1.6;
    letter-spacing: 0.03em;
    margin-bottom: 20px;
  }

  h3.small {
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.03em;
  }

  p.large {
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.06em;
    font-weight: bold;
  }

  p.medium {
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.06em;
  }

  p.small {
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0.03em;
  }
}
/** -----------------------------------
    ボタン
-------------------------------------**/
.button-small {
  display: block;
  width: 198px;
  height: 50px;
  background-color: #F08658;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.03em;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
}

.button-large {
  display: block;
  width: 296px;
  height: 70px;
  background-color: #F08658;
  color: #fff;
  font-size: 17px;
  letter-spacing: 0.06em;
  font-weight: bold;
  line-height: 70px;
  text-align: center;
  border-radius: 35px;
}

.button-border {
  display: block;
  width: 192px;
  height: 50px;
  border: 1px solid #091535;
  color: #091535;
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  .button-large {
    display: block;
    width: 198px;
    height: 48px;
    font-size: 14px;
    line-height: 48px;
    border-radius: 24px;
  }
}


/** -----------------------------------
    見出し
-------------------------------------**/

.title-en {
  text-align: center;
  margin-bottom: 16px;
}

.icon {
  width: 16px;
  margin-bottom: 10px;
}

.title-en .title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 19px;
  letter-spacing: 0.13em;
  font-weight: bold;
}

/** -----------------------------------
    レイアウト
-------------------------------------**/
.col-2 {
  display: flex;
  justify-content: space-between;
}
.col-2 .item {
  width: calc((100% - 48px)/2);
}

.col-3 {
  display: flex;
  justify-content: space-between;
}
.col-3 .item {
  width: calc((100% - 48px)/3);
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  .col-2 {
    display: block;
  }
  .col-2 .item {
    width: 100%;
  }
  .col-3 {
    display: block;
  }
  .col-3 .item {
    width: 100%;
  }
}


/** -----------------------------------
    ヘッダー
-------------------------------------**/
#header {
  background-color: #ecc8b5;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  padding: 0 70px;
  position: fixed;
  top: 0;
  z-index: 999;
}

.header-logo {
  display: flex;
  align-items: center;
  width: 170px;
}
/* 追加 */
.header-logo a {
  display: flex;
}

.gnav-pc-wrap {
  padding-left: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gnav-sp-wrap {
  display: none;
}

ul.gnav-pc li {
  display: inline;
  margin-right: 30px; 
  /* margin-right: 30px; 間を狭く */
}

ul.gnav-pc li a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 17px;
  letter-spacing: 0.13em;
  color: #091535;
  font-weight: bold;
}

ul.gnav-pc li a:hover {
  color: #F08658;
}

#menu-button {
  display: none;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #header {
    height: 60px;
    padding: 0;
  }

  #header h1 {
    padding-left: 20px;
  }

  #header h1 a {
    display: flex;
  }

  .gnav-pc-wrap {
    display: none;
  }

  #menu-button {
    display: block;
    width: 60px;
    height: 60px;
    padding: 22px 18px;
  }

  .menu-button-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  .menu-button-inner span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #2D3D42;
    position: absolute;
  }

  .menu-button-inner span:nth-child(1) {
    top: 0;
  }

  .menu-button-inner span:nth-child(2) {
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .menu-button-inner span:nth-child(3) {
    bottom: 0;
  }

  /* スマホ用メニューのスタイル */
  .gnav-sp-wrap {
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    position: fixed;
    z-index: 100;
    padding-top: 100px;
    display: none;
  }

  ul.gnav-sp li {
    text-align: center;
    margin-bottom: 30px;
  }

  ul.gnav-sp li a {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 0.1em;
    color: #091535;
    font-weight: bold;
  }
}

 
/** -----------------------------------
    メインビジュアル
-------------------------------------**/
#mainvisual {
  width: 100vw;
  height: calc(100vh - 70px);
  background-image: url("../images/mainvisual-pc.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  margin-top: 70px;
  margin-bottom: 30px;
}

.copy-wrap {
  position: absolute;
  left: 120px;
  bottom: 120px;
}
.maincopy {
  color: #FFFFFF;
  font-size: 52px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-bottom: 40px;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.subcopy {
  color: #FFFFFF;
  font-size: 28px;
  font-weight: bold;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.badge {
  width: 172px;
  height: 172px;
  position: absolute;
  top: 80px;
  right: 100px;
}

.ribbon {
  /* width: 150vw; */
  /* width: 1500px; */
  /* height: 172px; */ 
  position: absolute;
  top: 510px;
  /* left: 50px; */
  width: 100vw;
}

.ribbon img {
  /* リボンの画像自体が親要素の幅を占めるようにする */
  width: 100%;
  height: auto; /* 幅に合わせて高さを自動調整 */
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #mainvisual {
    width: 100vw;
    height: 100vw;
    background-image: url("../images/mainvisual-sp.png");
    margin-top: 60px;
    margin-bottom: 30px;
  }
  #mainvisual .button-large {
    margin: 0 auto;
  }
  .maincopy {
    font-size: 22px;
    line-height: 1.6;
    letter-spacing: 0;
  }
  .copy-wrap {
    left: 24px;
    bottom: -20px;
  }
  .subcopy {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .badge {
    width: 94px;
    height: 94px;
    top: 16px;
    right: 16px;
  }
}

/** -----------------------------------
    スライダ
-------------------------------------**/
#wrapper .title-en {
  margin-bottom: 40px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #wrapper h2.large {
    text-align: center;
  }
  #wrapper p.medium {
    margin-bottom: 30px;
  }
  #wrapper .title-en {
    margin-bottom: 16px;
  }
}


/** -----------------------------------
    コンセプト
-------------------------------------**/
#concept .title-en {
  margin-bottom: 40px;
}

#concept .item img {
  /* 画像に影をつける */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  /* (任意)画像に少し角丸を加える */
  border-radius: 8px;
}

/* SVGのあしらい */
.divider-svg {
  width: 100%;
  height: 100px; /* SVGの高さを調整 */
  margin-top: -1px; /* 境目の隙間をなくすための調整 */
  line-height: 0; /* 余計な隙間をなくす */
}

.divider-svg svg {
  display: block; /* SVGをブロック要素にする */
}

/* SVGのあしらい（上下逆さま） */
.divider-svg-reverse {
  width: 100%;
  height: 100px; /* SVGの高さを調整 */
  margin-bottom: -1px; /* 境目の隙間をなくすための調整 */
  line-height: 0; /* 余計な隙間をなくす */
}

.divider-svg-reverse svg {
  display: block; /* SVGをブロック要素にする */
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #concept h2.large {
    text-align: center;
  }
  #concept p.medium {
    margin-bottom: 30px;
  }
  #concept .title-en {
    margin-bottom: 16px;
  }
  
}


/** -----------------------------------
    システム WORKSTYLE
-------------------------------------**/
#system {
  background-color: #FFFFFF;
  /* margin-top: 140px; */

  .card-img img{
    /* overflow: hidden; を追加 */
    overflow: hidden;
    border-top-left-radius: 10px; /* 左上を丸くする */
    border-top-right-radius: 10px; /* 右上を丸くする */
  }
}

#system h2.large {
  text-align: center;
}

#system p.medium {
  text-align: center;
  margin-bottom: 40px;
}

#system h3.small {
  text-align: center;
  margin-bottom: 16px;
}

.card {
  height: 100%;
  background-color: #F2F8FB;
  border-radius: 10px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card .card-text {
  padding: 24px 24px 32px 24px;
}



/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #system h2.large span {
    display: block;
  }
  #system p.medium {
    margin-bottom: 30px;
  }
  .card {
    margin-bottom: 24px;
  }
}


/** -----------------------------------
    システム2 COMPANY
-------------------------------------**/
#system2 {
/* background-color: #FFFFFF; */
padding-bottom: 100px; /* 例として値を大きく変更 */

.card-img img{
  /* overflow: hidden; を追加 */
  overflow: hidden;
  border-top-left-radius: 10px; /* 左上を丸くする */
  border-top-right-radius: 10px; /* 右上を丸くする */
}
}

#system2 h2.large {
  text-align: center;
}

#system2 p.medium {
  text-align: center;
  margin-bottom: 40px;
}

#system2 h3.small {
  text-align: center;
  margin-bottom: 16px;
}

.card {
  height: 100%;
  background-color: #F2F8FB;
  border-radius: 10px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card .card-text {
  padding: 24px 24px 32px 24px;
}

.pc-only-br {
  display: block;
}



/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #system2 h2.large span {
    display: block;
  }
  #system2 p.medium {
    margin-bottom: 30px;
  }
  .card {
    margin-bottom: 24px;
  }
  .pc-only-br {
  display: none;
}
}

/** -----------------------------------
    PEOPLE
-------------------------------------**/
#people {

  margin-bottom: 0; /* 下の余白をなくす */
  padding-bottom: 0; /* 下のパディングをなくす */
 
  .card {
    height: 100%;
    background-color: #F2F8FB;
    border-radius: 10px;
    display: flex;
    overflow: hidden; /* カードから画像がはみ出さないようにする */
    /* 影の設定: x軸オフセット y軸オフセット ぼかしの半径 広がりの半径 色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out;
  }

  .card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }
 
  .card-img{
    width: 250px;
    height: 250px;
    min-width: 250px
  }  

  .card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 画像が親要素を覆うように拡大・トリミングする */
  }  

  /* width: 100%;
    height: 100%;
    object-fit: cover; */
    /* 画像が親要素を覆うように拡大・トリミングする */

    /* overflow: hidden; を追加 */
    /* overflow: hidden; */
    /* border-top-left-radius: 10px; /* 左上を丸くする*/
    /* border-bottom-left-radius: 10px; 右上を丸くする */ 
    /* width: 250px; */
    /* max-width: 100%; 親要素の幅を超えないようにする */
    /* width: 250px; */
    /* height: auto; 幅に合わせて高さを自動調整 */
  } 

  .card .card-text {
    flex-grow: 1; /* 余ったスペースを埋める */
    padding: 24px 24px 32px 24px;
  }


#people h2.large {
  text-align: center;
}

#people p.medium {
  text-align: center;
  margin-bottom: 40px;
}

#people p.medium2 {
  text-align: center;
  margin-bottom: 16px;
  font-weight: bold;
}


#people p.small {
  text-align: center;
  /* margin-bottom: 16px; */
}

#people h3.small {
  text-align: center;
  margin-bottom: 16px;
}

/* .card {
  height: 100%;
  background-color: #F2F8FB;
  border-radius: 10px;
} */

/* .card .card-text {
  padding: 24px 24px 32px 24px;
} */

/* SP用: デフォルトでは表示 */
.sp-only {
  display: inline;
}

/* ---------------------------------------------------- */
/* メンバーリストのレイアウト（PC・タブレット向け：2列） */
/* ---------------------------------------------------- */

.member-list {
  /* CSS Gridを適用 */
  display: grid;
  /* 2つの列を作成し、それぞれに均等な幅を与える */
  grid-template-columns: 1fr 1fr;
  /* 行と列の間の間隔を設定（PCでは少し広めに） */
  gap: 40px 30px; 
  /* 上下にマージンをとって、他のコンテンツから離す */
  margin-top: 40px; 
}

/* カード全体のスタイル */
.member-list .item {
  /* item内のcardを中央揃えにしたい場合など、必要に応じて調整 */
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center;
}

/* カード内の画像コンテナ */
.member-list .card-img {
  width: 100%; /* 親要素の幅いっぱいに */
  max-width: 250px; /* 画像の最大幅を制限（適宜調整） */
  margin: 0 auto; /* 中央寄せ */
  /* 画像が崩れないように、アスペクト比を維持したい場合はここに設定を追加 */
}

/* カード内の画像 */
.member-list .card-img img {
  width: 100%;
  height: auto;
  display: block;
  /* 画像の角を丸くするなどの装飾もここで行う */
  /* border-radius: 50%; 例: 画像を丸くする */
}

/* ---------------------------------------------------- */
/* スマホ向けの調整（メディアクエリ） */
/* ---------------------------------------------------- */

/* 画面幅が767px以下の場合に適用 (sp-onlyのブレイクポイントに合わせる) */
@media screen and (max-width: 767px) {
  .member-list {
    /* スマホでは1列表示にする */
    grid-template-columns: 1fr;
    /* 行の間の間隔を設定（スマホで空きすぎるのを防止） */
    gap: 30px; /* 項目間の間隔を狭める */
    margin-top: 20px;
  }
  
  /* スマホでの画像サイズの調整（例: 少し小さくする） */
  .member-list .card-img {
    max-width: 200px;
  }
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #people h2.large span {
    display: block;
  }
  #people p.medium {
    margin-bottom: 30px;
  }
  .card {
    margin-bottom: 24px;
  }
  .pc-only {
    display: inline;
  }
  /* SP用改行を無効にする */
  .sp-only {
    display: none;
  }
}

/** -----------------------------------
    料金プラン RECRUIT
-------------------------------------**/
#plan {
 background-color: #FFFFFF;
/* 親要素を相対位置に設定 */
 position: relative;
/* 画像がはみ出すのを許容 */
 /* overflow: visible; */
 overflow: hidden;
/* 画像の高さ分、上部のパディングを追加 */
  padding-top: 80px; /* 例として値を大きく変更 */
  padding-bottom: 200px; /* 例として値を大きく変更 */
}

#plan .pc-only,
#plan .sp-only {
  /* 画像を絶対位置に設定 */
  position: absolute;
  /* 上部からの位置を調整（マイナスの値で上方向にずらす） */
  top: 0px; /* 例として100px上にずらしています */
  /* 水平方向の中央に配置 */
  left: 50%;
  /* 左寄せを打ち消し、中央寄せにする */
  transform: translateX(-50%);
  /* 画像がテキストの上に表示されるようにする */
  /* z-index: 10; */
}

#plan h2.large {
  text-align: center;
  /* z-indexを使うための準備 */
  position: relative; 
  /* 画像のz-index(1)よりも高い値に設定 */
  z-index: 11; 
}

#plan p.medium {
  text-align: center;
  margin-bottom: 40px;
  /* z-indexを使うための準備 */
  position: relative; 
  /* 画像のz-index(1)よりも高い値に設定 */
  z-index: 11; 
}

.plan-pc-image {
  /* 絶対位置に設定 */
  position: absolute;
  /* 親要素に対する位置を調整 */
  top: 50px;
  left: 50%;
  
  transform: translateX(-50%);
  /* テキストの上に表示されるようにz-indexを設定 */
  z-index: 10;
  /* 画像のサイズ調整（任意） */
  width: 100%;
  max-width: 900px; /* 例: 最大幅を設定 */
}

.section-inner-description{
  display: flex;
  flex-direction: column;
  gap: 20px;

  /* 背景画像を指定 */
  /* background-image: url(../images/plan-pc.png); */
  
  /* 画像の繰り返しをなしに設定 */
  background-repeat: no-repeat;
  
  /* 背景画像のサイズを要素に合わせる */
  background-size: cover;
  
  /* 背景画像を中央に配置 */
  background-position: center;

  /* 要素の高さを設定（画像サイズに合わせて調整） */
  min-height: 200px; /* 例: 画像の高さに合わせて調整してください */

    /* z-indexを有効にするためにpositionを設定 */
  position: relative;

    /* plan-pc-image（z-index: 10）より手前に表示 */
  z-index: 11;
}

.section-inner-description-item{

  display: flex;
  justify-content: center; /* アイテム全体を中央に寄せます */
  gap: 20px; /* ★アイテム間の間隔を20pxに固定 */
  align-items: flex-start;
  margin-bottom: 40px; 
  flex-wrap: wrap; 

  /* display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap; Allows images to wrap on smaller screens */
}

/* 各アイテムのセット: 画像とテキストを縦に並べる */
.item-set {
  display: flex;
  flex-direction: column; 
  align-items: center; 
  text-align: center;
  flex-shrink: 0; 
  flex-grow: 0;
  
  /* ★修正: すべてのアイテムセットに共通の固定幅または最大幅を設定 */
  width: 280px; /* 例として固定幅を設定（この値を調整してください） */
  /* max-width: 300px; */
}

.section-inner-description-item img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  width: 180px; /* 例: 幅を250pxに固定する場合 */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */

  /* 画像をヘッダーの下に表示する */
  position: relative;
  z-index: 0;
}


/* 改行を制御するためのCSS */
.no-wrap {
  /*
   * white-space: nowrap;
   * その要素内のテキストを強制的に1行に表示し、改行を禁止します。
   */
  white-space: nowrap;
  
  /*
   * display: inline-block;
   * モバイルなど画面幅が非常に狭い場合に、
   * span全体をひと塊として、その塊の手前で折り返そうと動作を促します。
   */
  display: inline-block;
}

/* pc-onlyクラスを持つ要素を非表示にする */
.pc-only {
  display: none;
}


/* SVGのあしらい */
.divider-svg2 {
  width: 100%;
  height: 100px; /* SVGの高さを調整 */
  margin-top: -1px; /* 境目の隙間をなくすための調整 */
  line-height: 0; /* 余計な隙間をなくす */
}

.divider-svg2 svg {
  display: block; /* SVGをブロック要素にする */
}

/* SVGのあしらい（上下逆さま） */
.divider-svg-reverse2 {
  width: 100%;
  height: 100px; /* SVGの高さを調整 */
  margin-bottom: -1px; /* 境目の隙間をなくすための調整 */
  line-height: 0; /* 余計な隙間をなくす */
}

.divider-svg-reverse2 svg {
  display: block; /* SVGをブロック要素にする */
}


/* ホバーのトリガーとなる a タグの設定 */
.item-set a {
  /* 重要な修正: transformを効かせるためにブロック要素にする */
  display: block; 
  
  /* 必須: ホバー時のアニメーションを滑らかにする */
  /* transform の変化を 0.3秒かけてゆっくり実行 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  
  /* デフォルトの影を設定（ホバー時の変化の基準点とする） */
  /* もし影がないなら、これは不要です */
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); */ 
}

/* a タグにホバーした時のスタイル */
.item-set a:hover {
  /* アイコン全体をふわっと1.08倍に拡大 */
  transform: scale(1.08); 
  
  /* 影を濃くして、より浮き上がっているように見せる（オプション） */
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); */
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #plan p.medium {
    margin-bottom: 30px;
  }
  #plan p.medium span {
    display: block;
  }

  #plan {
    /* 使用したい青色を指定してください（例: b9dad2） */
    /* RGB(185, 218, 210) に、不透明度 0.23 を設定 */
    background-color: rgba(162, 213, 205, 0.26);
  }

  .section-inner-description-item{
    /* ★修正: 1列表示にするため、アイテムを中央に寄せつつ、gapも調整 */
    justify-content: center;
    gap: 30px; /* 縦方向の間隔としても使われます */
  }
  
  /* 共通の item-set の幅を100%に設定 */
  .item-set {
    /* ★修正: 縦一列にするため、幅を大きくします */
    flex-basis: 80% !important; /* !important で、行ごとの flex-basis を上書き */
    max-width: 300px; /* スマホで広がりすぎないように制限 */
    margin: 10px 0;
  }
  
  /* 画像の幅を親要素（item-set）に合わせて調整 */
  .section-inner-description-item img {
    /* ★修正: 以前の flex-basis: 45%; は不要。親要素の幅を占めるようにする */
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .plan-pc-image {
    display: none; /* ★画像を非表示 */
  }

  /* .section-inner-description-item{ */
    /*
      * 小さな画面では画像を2つずつ並べる
      * flex-basis: 45% とすることで、画像が2つ並んだときに隙間が生まれる
      */
    /* justify-content: space-around; */
  /* } */

  /* .section-inner-description-item img {
    flex-basis: 45%;
    max-width: 45%;
  } */
}

/** -----------------------------------
    CTA
-------------------------------------**/
#cta {
  background-image: url("../images/cta-bg-pc.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #FFFFFF;
  padding: 90px 0;
  margin: 70px 0;
}

#cta h2.large {
  text-align: center;
}

#cta p.large {
  text-align: center;
}

#cta p.large span {
  display: block;
}

#cta .button-large {
  margin: 0 auto;
  margin-top: 40px;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #cta {
    background-image: url("../images/cta-bg-sp.jpg");
    padding: 90px 0;
    margin: 30px 0;
  }

  #cta h2.large span {
    display: block;
  }

  #cta p.large span {
    display: inline;
  }
}

/** -----------------------------------
    FAQ
-------------------------------------**/
#faq {
}

#faq h2.large {
  text-align: center;
}

.faq {
  border-radius: 8px;
  margin-bottom: 24px;
  background-color: #F5F5F6;
}

.faq-head, .faq-body {
  padding: 24px 72px 24px 32px;
}

.faq-head {
  position: relative;
}

.faq-head::after {
  content: "";
  background-image: url("../images/arrow.png");
  background-size: contain;
  width: 14px;
  height: 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 24px;
  margin: auto;
}

.faq-head p.medium::before {
  content: "Q";
  /* display: inline-block; は維持 */
  display: inline-block;
  font-weight: bold;
  color:#F08658;
  margin-right: 8px; /* Qと質問文の間にスペースを確保 */

  /* 必要に応じてQと質問文の縦位置を揃えるために調整 */
  /* vertical-align: top; など */
}

/* Aの追加（スマホでも崩れにくいよう調整） */
.faq-body p.medium::before {
  content: "A";
  /* display: inline-block; は維持 */
  display: inline-block;
  font-weight: bold;
  color: #007bff;
  margin-right: 8px; /* Aと回答文の間にスペースを確保 */

  /* 必要に応じてAと回答文の縦位置を揃えるために調整 */
  /* vertical-align: top; など */
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  .faq-body {
    padding: 24px;
  }
}


/** -----------------------------------
    アクセス
-------------------------------------**/
#access {
}

#access h2.large {
  text-align: center;
}

.gmap {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.gmap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

#access .button-border {
  margin-top: 30px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #access .button-border {
    margin: 0 auto;
  }

  #access p.medium {
    margin: 20px 0;
  }
}


/** -----------------------------------
    フッター
-------------------------------------**/
#footer {
  background-color: #ecc8b5;
  text-align: center;
  padding: 40px 0;
  margin-top: 60px;
  
}

#footer a {
  color: #091535;
}

.footer-logo {
  display: flex;
  align-items: center;
  width: 170px;
  margin: 0 auto; /* この1行を追加 */
}


.footer-link, .copyright {
  margin-top: 32px;
  font-size: 15px;
  margin-bottom: 60px;
}

.copyright {
  color: #091535;
}

.footer-link {
  margin-bottom: 32px;
}

.footer-link li {
  display: inline;
  margin-right: 20px;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  #footer {
    padding: 40px 0 20px 0;
  }
  .footer-link {
    margin-bottom: 70px;
  }
  .footer-link li {
    display: block;
    margin: 0 0 20px 0;
  }
}


/* ================================================ */
/*  3. 自動再生するスライダー  */
/* ================================================ */

.autoplay {
    /*幅の最大値を600pxに*/
    /*幅をもたせて中央寄せにする*/
    max-width: 600px;
    margin: 0 auto;

}

.autoplay img {
  /* 画像に影をつける */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  /* (任意)画像に少し角丸を加える */
  border-radius: 8px;
}



/* ================================================ */
/*  もっと見るボタンのコンテナ １to2*/
/* ================================================ */

/* もっと見るボタンのコンテナ */
.more-info-button-container {
    text-align: center;
    padding: 30px 0; /* 上下の余白 */
    background-color: #ece6dc; /* 区切りとして背景色を付ける */
}

.more-info-button-container2 {
    text-align: center;
    padding: 30px 0; /* 上下の余白 */
    background-color: #fffffff; /* 区切りとして背景色を付ける */
}


/* もっと見るボタン本体 */
.more-info-button {
    display: inline-flex; /* アイコンとテキストを横並びにするため */
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    color: #F08658; /* メインカラー（例として緑を設定） */
    border: 2px solid #F08658;
    padding: 10px 20px;
    border-radius: 25px;
    transition: all 0.3s;
}

/* もっと見るボタン本体 */
.more-info-button2 {
    display: inline-flex; /* アイコンとテキストを横並びにするため */
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    color: #F08658; /* メインカラー（例として緑を設定） */
    border: 2px solid #F08658;
    padding: 10px 20px;
    border-radius: 25px;
    transition: all 0.3s;
}


.more-info-button:hover {
    background-color: #F08658;
    color: #ffffff;
}

.more-info-button2:hover {
    background-color: #F08658;
    color: #ffffff;
}


/* アイコンの擬似要素 */
.more-info-button .icon-arrow::after {
    content: ">"; /* または Unicodeで「\2193」など */
    font-size: 1.2em;
    margin-left: 10px;
    display: inline-block;
    transition: transform 0.3s;
}

/* アイコンの擬似要素 */
.more-info-button2 .icon-arrow::after {
    content: ">"; /* または Unicodeで「\2193」など */
    font-size: 1.2em;
    margin-left: 10px;
    display: inline-block;
    transition: transform 0.3s;
}


.more-info-button:hover .icon-arrow::after {
    /* ホバー時に色が変わるなど、別の装飾をすることも可能 */
    transform: translateY(3px); /* 軽く動かす */
}

.more-info-button2:hover .icon-arrow::after {
    /* ホバー時に色が変わるなど、別の装飾をすることも可能 */
    transform: translateY(3px); /* 軽く動かす */
}


/* ホバー時のアイコンの色変更 */
.more-info-button:hover {
    color: #ffffff;
}

/* ホバー時のアイコンの色変更 */
.more-info-button2:hover {
    color: #ffffff;
}


.more-info-button:hover .icon-arrow::after {
    color: inherit; /* 親要素の色を継承 */
}

.more-info-button2:hover .icon-arrow::after {
    color: inherit; /* 親要素の色を継承 */
}



/* ================================================ */
/* 募集職種の「仕事内容 🔽」ボタンのスタイル */
/* ================================================ */

/* 対象の要素：職種名 (h3.small)
  擬似要素を配置するための基準となるコンテナ
*/
.section-inner-description-item h3.small {
  /* 擬似要素を配置するために、h3を相対的な配置の基準とする */
  position: relative;
  /* 職種名と下の「仕事内容」表示エリアの間に十分なスペースを確保 */
  padding-bottom: 30px; 
}

/* -------------------------------------------
   ::after で「仕事内容」テキストを表示
   ------------------------------------------- */
.section-inner-description-item h3.small::after {
  content: "仕事内容"; /* テキストを追加 */
  
  /* 絶対配置で h3 要素の中央・下部に配置 */
  position: absolute;
  bottom: 0; 
  /* 50%の位置から左に少しずらし、三角マークと中央に揃える */
  left: 50%;
  transform: translateX(-50%) translateX(-10px); /* 中央寄せの調整と左へのオフセット */
  
  /* テキストのスタイル調整 */
  font-size: 14px; /* テキストサイズ */
  color: #007bff; /* テキストの色 (例: 青) */
  white-space: nowrap; /* 折り返しを防ぐ */
  line-height: 1; /* 行の高さを調整 */

  /* ホバーアニメーション */
  transition: transform 0.2s ease-in-out;
}


/* -------------------------------------------
   ::before で下向き三角マークを表示
   ------------------------------------------- */
.section-inner-description-item h3.small::before {
  content: ""; /* 三角マークは空の content */
  display: block;
  
  /* absolute でテキストの右側に配置 */
  position: absolute;
  bottom: 3px; /* テキストのベースラインに合わせて調整 */
  /* 50%の位置から右に少しずらし、テキストの右横に配置 */
  left: 50%; 
  transform: translateX(-50%) translateX(30px); /* 中央寄せの調整と右へのオフセット */

  /* CSSのボーダーで三角形を描画 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px; /* 下向き三角の大きさ */
  border-color: #007bff transparent transparent transparent; /* テキストと同じ色 */
  
  /* ホバーアニメーション */
  transition: transform 0.2s ease-in-out;
}


/* -------------------------------------------
   ホバー時のアクション (任意)
   ------------------------------------------- */
/* <a>要素にホバーしたときに、テキストと三角マークを同時に動かす */
.section-inner-description-item .item-set a:hover h3.small::after {
  /* 下に3px移動させる */
  transform: translateX(-50%) translateX(-10px) translateY(3px); 
}

.section-inner-description-item .item-set a:hover h3.small::before {
  /* 下に3px移動させる */
  transform: translateX(-50%) translateX(30px) translateY(3px); 
  border-color: #0056b3 transparent transparent transparent; /* ホバー時に色を少し濃くする */
}