body {
    padding: 20px;
    margin: 0;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    background-color: #F7F4F2;
    color: #252320;

}

@media (max-width: 768px) {
    body {
        padding: 10px; /* モバイルデバイス用にパディングを小さくする */
    }
}
.menu-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F7F4F2;
    max-width: 900px;
    margin: 0 auto;
    position: fixed;
    top: 0; /* 上部に固定 */
    left: 20px; /* 左端からの距離を調整 */
    right: 20px; /* 右端からの距離を調整 */
    z-index: 1000;
}


.logo img {
    height: auto; /* 画像の高さを自動調整してアスペクト比を維持 */
    width: 120px; /* ロゴの幅。必要に応じて調整 */
    margin-left: 20px; /* 左側の余白。必要に応じて調整 */
    margin-top: 20px; /* ロゴ画像の上部余白を追加 */
}


/* アイコンの基本スタイル */
.menu-icon {
    position: relative; /* この行を追加 */
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* メニューよりも高いz-index値 */
}

.bar1, .bar3 {
    width: 20px;
    height: 4px;
    background-color: #252320;
    transition: 0.3s;
}

.bar1_1  {
    width: 4px;
    height: 4px;
    background-color:  #252320;
    margin: 0 5px; /* 点を中央に配置 */
    transition: 0.3s;
}
.bar2 {
    width: 6px;
    height: 4px;
    background-color: #252320;
    margin: 0 5px; /* 点を中央に配置 */
    transition: 0.3s;
}

/* `change`クラスが適用されたときのアイコンの変形スタイル */
.change .bar1, .change .bar3 {
    width: 50px; /* 横棒の幅 */
    height: 4px; /* 横棒の高さ */
    background-color:  #252320; /* 横棒の色 */
    position: absolute; /* 位置を絶対位置指定に変更 */

}

.change .bar1 {
    transform: rotate(45deg); /* 上の棒を45度回転 */
    left: -10px; /* ×を左に10px移動 */
}

.change .bar2 {
    opacity: 0; /* 中央の点を非表示に */
}

.change .bar1_1  {
    opacity: 0; /* 中央の点を非表示に */
}

.change .bar3 {
    transform: rotate(-45deg); /* 下の棒を-45度回転 */
    left: -10px; /* ×を左に10px移動 */
}


.menu {

    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    position: fixed;
    top: 70px; /* メニューの高さを考慮 */
    left: 0;
    right: 0;
    background-color: #F7F4F2; /* 背景色を設定 */
    color: #252320; /* メニュー内の文字色を設定 */
    z-index: 999; /* menu-iconより1つ低い値 */
    overflow: auto; /* 必要に応じてスクロール */
    padding-top: 20px; /* 上部に余白を設定 */
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-size: 150%;
}


.menu-content {
    max-width: 900px;
    width: 100%;
    margin: auto; /* 中央揃えのためのマージン */
    background-color: #fff; /* 背景色 */
    padding: 20px; /* 適切な余白を追加 */

}



.menu a {
    display: block;
    text-decoration: none;
    color: #252320;
    padding: 10px;
    border-bottom: 0px solid #ddd;
    font-weight: 800; /* タイトルをより太く */
}

.menu a:last-child {
    border-bottom: none;
}


/*menuのデザイン*/
.menu {
    display: none; /* 初期状態では非表示 */
    position: fixed; /* 画面に固定 */
    top: 0; /* トップから0 */
    left: 0; /* 左から0 */
    right: 0; /* 右から0 */
    bottom: 0; /* ボトムから0 */
    background-color: #F7F4F2;
    color: #252320; /* メニュー内の文字色を設定 */
    z-index: 999; /* menu-iconより1つ低い値 */
    overflow: auto; /* 必要に応じてスクロール */
    padding-top: 60px; /* menu-iconに被らないように余白を設定 */
}
.menu-item {
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-style: normal;
    font-weight: 400;
}
.main {
    text-align: center;
}

@media (max-width: 768px) {
    .main {
        width: 100%; /* 小さい画面では横幅を100%に設定 */
        text-align: center;
    }
}

/*メニュー_テキスト*/
/* PC表示用の基本スタイル */
.menu-content_space {
    margin: 10%;
    display: flex; /* フレックスボックスを有効化 */
    flex-wrap: wrap; /* 子要素がコンテナを超える場合は折り返し */
}

.menu-content_space_l, .menu-content_space_r {
    flex-basis: 50%; /* 左右のエリアがコンテナの50%の幅を占める */
}

.menu-content_space_f {
    flex-basis: 100%; /* 下部エリアがコンテナの全幅を占める */
    text-align: left; /* テキストを左寄せに設定 */
    margin-top: 50px;
}

/* スマートフォン表示用のスタイル */
@media (max-width: 768px) {
    .menu-content_space {
        flex-direction: column; /* 要素を縦並びに配置 */
    }

    .menu-content_space_l, .menu-content_space_r, .menu-content_space_f {
        flex-basis: 100%; /* 各エリアがコンテナの全幅を占めるように設定 */
    }
}

.menu-content_tx {
    font-family: 'Outfit', sans-serif; /* Googleフォントを適用 */
    font-weight: 300; /* 希望のフォントの太さを指定: 100が最も細く、900が最も太い */
    text-decoration: none; /* リンクの下線を取り除く */
    margin-right: 20px; /* リンク間の間隔、必要に応じて調整してください */
    font-size: 180%;

}
.menu-content_tx2{
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 300; /* 希望のフォントの太さを指定: 100が最も細く、900が最も太い */
    font-size: 80%;

}

/*コンテンツエリア_テキスト*/

.slider-item {
    position: relative; /* スライダーアイテムを相対配置に設定 */
}

.text-container {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px; /* 好みのフォントサイズに調整 */
  font-weight: 400; /* 通常のテキスト用 */
  color: #333; /* テキストの色 */
    width: 900px;
    text-align: left;
    margin: 10px auto 0 auto; /* 上のマージンを保持し、左右は自動で中央揃え */
    z-index: 80;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-container {
  animation: fadeInUp 3s ease-out forwards;
  /* その他のスタイル設定 */
}


.text-container strong {
  font-weight: 700; /* 太字のテキスト用 */
}

.brand-name {
    font-size: 200%;
    font-weight: bold;
}
.cat {
    font-size: 80%;
    border: 1px solid  #252320;
    padding: 2px 10px; /* 適切な余白を追加 */
    border-radius: 3px; /* 角の丸みを設定 */
    margin-left: 3px ;
    margin-top: 0px;
    font-family: "futura-pt", sans-serif;
}

.client{
    font-size: 120%;
    font-family: "futura-pt", sans-serif;
}

.web{
    font-size: 120%;
    font-family: "futura-pt", sans-serif;
}




/*SNSアイコンのデザイン*/

.sns-icons {
    display: flex; /* アイコンを横並びにする */
    justify-content: left; /* アイコンを中央に配置 */
    align-items: left; /* アイコンを垂直方向の中央に配置 */
    padding: 10px; /* 余白を追加 */
}
 
.sns-icon {
    width: 40px; /* アイコンの幅を指定 */
    height: 40px; /* アイコンの高さを指定 */
    margin: 0 10px; /* アイコン間の余白を設定 */
    transition: transform 0.3s ease; /* ホバー時の拡大アニメーション用 */
}

.sns-icon:hover,
.b-icon:hover,
.menu-content_space_l a:hover .menu-content_tx,
.menu-content_space_l a:hover .menu-content_tx2 {
    transform: scale(1.1); /* ホバー時にテキストを少し大きくする */
}

.menu-content_tx:hover,
.menu-content_tx2:hover {
    transform: scale(1.1); /* ホバー時にテキストを少し大きくする */
}

.b-icon{    height: 60px; /* アイコンの高さを指定 */
}



/*コピーライトのデザイン*/
@media (min-width: 768px) {
.copyright {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 150px;
  }
}
@media (max-width: 769px) {
  .copyright {
      font-size: 10px;
      text-align: center;
      margin-bottom: 150px;
      }  
}

.sns-icons_f {
    display: flex; /* アイコンを横並びにする */
    justify-content: center; /* アイコンを中央に配置 */
    align-items: center; /* アイコンを垂直方向の中央に配置 */
    padding: 10px; /* 余白を追加 */
}  
/*ローディングのデザイン*/
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* 透明度を調整 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 他の要素よりも上に表示 */
}

#loading-overlay img {
    width: 100px; /* 画像の幅 */
    height: 100px; /* 画像の高さ */
}
/* ANOUT_bace */

  

/* ANOUT_bace */
.ab_container {
    max-width: 900px;
    background-color: white;
    padding: 20px;
    margin-left: auto; /* 左側の余白を自動調整 */
    margin-right: auto; /* 右側の余白を自動調整 */
  }
  
  
  .ab_content {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .ab_image {
    width: 40%; /* 画像はコンテナの50%を占める */
  }
  
  .ab_text {
    width: 60%; /* テキストはコンテナの60%を占める */
    padding: 0 20px; /* 適切な間隔を設定 */
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-size: 140%;
    font-weight: 500;
    text-align: left;
    line-height: 2;

    opacity: 0; /* 初期状態ではテキストを透明に設定 */
    animation: fadeInAnimation ease 3s; /* アニメーションを追加 */
    animation-fill-mode: forwards; /* アニメーション終了時のスタイルを維持 */
  }
  
  @keyframes fadeInAnimation {
    0% { opacity: 0; transform: translateY(20px); } /* アニメーション開始時 */
    100% { opacity: 1; transform: translateY(0); } /* アニメーション終了時 */
  }
  
  .about_L02{
    line-height: 3;
    font-weight: 600;
    font-size: 130%;
  }

  .about_02{
    line-height: 2;

    font-size: 130%;
  }
.ab_image02 {
    display: block; /* 画像をブロック要素として表示 */
    margin: 20px auto; /* 上下に20pxのマージンを設定し、左右を中央揃えにする */
    width: 80%;  /* 画像の幅を80%に設定 */
    height: auto; /* 高さを自動で調整して、アスペクト比を維持 */
  }

  .ab_image03 {
    display: block; /* 画像をブロック要素として表示 */
    margin: 20px auto 0; /* 上に20px、左右を中央揃えにし、下にはマージンを設定しない */
    width: 300px; /* 画像の幅を設定 */
    height: auto; /* 高さを自動で調整して、アスペクト比を維持 */
    opacity: 0; /* 初期状態では画像を透明に設定 */
    animation: fadeInAnimation ease 3s; /* アニメーションを追加 */
    animation-fill-mode: forwards; /* アニメーション終了時のスタイルを維持 */
  }
  
  

  .ab_image01 {
    display: block; /* 画像をブロック要素として表示 */
    margin: 20px auto; /* 上下に20pxのマージンを設定し、左右を中央揃えにする */
    width: 80%; /* 画像の幅を80%に設定 */
    height: auto; /* 高さを自動で調整して、アスペクト比を維持 */
  }

  
  /* スマホの場合のレスポンシブデザイン */
  @media (max-width: 768px) {
    .ab_content {
      flex-direction: column; /* スマホでは縦に並ぶようにする */
    }
  
    .ab_image,
    .ab_text {
      width: 80%; /* スマホでは画像とテキストをコンテナの100%に設定 */
    }

    .ab_image02 {
      display: block; /* 画像をブロック要素として表示 */

      width: 100%;  /* 画像の幅を設定 */
      height: auto; /* 高さを自動で調整して、アスペクト比を維持 */
    }
  }

  
   /* 表部分*/
   
   .info-table {
    width: 500px; /* テーブルの幅 */
    border-collapse: collapse; /* セル間の境界線を一つに */
    margin-top: 20px; /* 上部のマージン */
  }
  
  .info-table th,
  .info-table td {
    padding: 10px; /* セルのパディング */
    text-align: left; /* テキストを左揃え */
    border-bottom: 0px solid #ddd; /* 下部の境界線 */
  }
  
  .info-table th {
    background-color: #f8f8f8; /* 背景色 */
    font-weight: normal; /* フォントの太さ */
  }
  
  .info-table td {

  }
  
  /* 特定のクラスに対するスタイル */
  .about_L02 {
    font-size: 1.5em; /* フォントサイズ */
    font-weight: bold; /* フォントの太さ */
    color: #333; /* フォント色 */
  }
  
  .about_02 {
    font-size: 1em; /* フォントサイズ */
    color: #666; /* フォント色 */
  }
  
/* 既存のスタイルの下に追加 */
.about-table {
  width: 700px; /* テーブルの幅 */
  border-collapse: collapse; /* セル間の境界線を一つに */
  margin-top: 20px; /* 上部のマージン */
  margin-left: auto; /* 左側の余白を自動調整 */
  margin-right: auto; /* 右側の余白を自動調整 */
}


/* これは既にあるかもしれませんが、表の見た目を整えるための基本的なスタイルです */
.about-table th, .about-table td {
  padding: 8px; /* セル内のパディング */
  border: 0px solid #ddd; /* セルの境界線 */
  text-align: left; /* テキストを左寄せ */
}

.about-table th {

}

.about_label {
  font-weight: 600;
  font-family: "fot-tsukuardgothic-std", sans-serif;

}

  /* スマホの場合のレスポンシブデザイン */
  @media (max-width: 768px) {
    .about-table {
      width: 100%; /* テーブルの幅 */
    }
  }
    
  /* formpage*/


.fm_content {
  display: flex;
  flex-direction: column; /* Change from row to column for better vertical alignment */
  justify-content: center; /* Align items vertically center */
  align-items: center; /* Align items horizontally center */
  height: 60vh; /* Full screen height */
  margin-top: 0; /* Remove top margin */
  padding-top: 0; /* Remove top padding */
}
.fm_setsumei {
  width: 100%;
  font-size: 15px;
  padding-top: 150px;
  padding-bottom: 50px;
}


/* Add this to remove margins from the first element within the form, if necessary */
.fm_content > form > *:first-child {
  margin-top: 0;
}
.top_contact_space{
  margin-top: 10px;
}
form {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
}

form div, form textarea {
  width: 100%;
}

form label, form input {
  width: 100%;
}


.field:nth-of-type(2) {
  margin: 26px 0;
}

label, input, textarea {
  font-family: 'Outfit', sans-serif; /* Googleフォントを適用 */
  padding: 18px;
  font-size: 2em; /* Increase font size */
}
.far{font-family: 'Outfit', sans-serif; /* Googleフォントを適用 */
}
label i {
  margin: 0 10px 0 0;
}

.field:focus-within label {
  color: #000;
  letter-spacing: 2px;
}

input, textarea {
  background: white;
  border: none;
  border-radius: 4px;
  box-shadow: 0 8px 6px -6px #555;
}

input:focus, textarea:focus {
  background: white;
  box-shadow: none;
}

textarea {
  resize: none;
}

textarea::-webkit-scrollbar {
  width: 0;
}

input[name="name"]::placeholder {
  font-size: 50%; /* お名前のサイズを設定 */
}
input[name="email"]::placeholder {
  font-size: 50%; /* Eメールのプレースホルダーテキストのサイズを設定 */
}
textarea[name="message"]::placeholder {
  font-size: 50%; /* プレースホルダーテキストのサイズを設定 */
}

button {

  background: rgba(158, 156, 156, 0.5);
  margin: 16px 0 50px 0;
  padding: 8px 16px;
  color: #413f3f;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 8px 6px -6px #555;
  font-size: 150%;
}

button:hover {
  letter-spacing: 2px;
  box-shadow: none;
}

@media (max-width: 768px) {
  .fm_content, form {
    max-width: 100%;
    padding: 0 10px;
  }

  form div, form label, form input, form textarea {
    width: 100%; /* スマートフォン表示時の幅を調整 */
  }

  /* 他に必要なスタイル調整を追加 */
}

*, *::before, *::after {
  box-sizing: border-box;
}

.fm_content, form {
  max-width: 100%;
  padding: 0 10px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fm_content {
  animation: fadeInUp 1s ease-out forwards;
}

.fm_content {
  position: relative; /* z-indexを適用するためにはpositionが必要 */
  z-index: 10; /* 他の要素より前面に */
}

.footer {
  width: 100%;
  position: relative;
  bottom: 0;
}



.footer_contact_space {
  margin-top: 150px; /* 上部に50pxのスペースを追加 */
}



/* メインテキストコンテナ */
.text-container {
  max-width: 800px;
  padding: 20px;
  margin: 20px auto;
  text-align: left;
  line-height: 1.8;
  background-color: #F7F4F2;
  color: #252320;
}

/* 採用情報テーブルのコンテナ */
.about-table {
  width: 100%;
  max-width: 800px;
  background-color: #ffffff;
  padding: 20px;
  margin: 20px auto;
  border-collapse: collapse;
}

.about-table th, .about-table td {
  padding: 20px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.about_label {
  font-weight: 600;
  color: #252320;
}

/* コンテナのスタイリング */
.ab_container {
  max-width: 900px;
  padding: 20px;
  margin: 20px auto;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* レスポンシブ調整 */
@media (max-width: 768px) {


  
  /* 見出しのフォントサイズ調整 */
  /* 採用情報の見出しに上部余白を追加 */
  .text-container h1 {
    font-size: 1.1em; /* 見出しのフォントサイズ */
    font-weight: bold;
    margin-top: 2em; /* 上部に余白を追加 */
    margin-bottom: 0.5em;
  }
  
  
  .text-container h2 {
    font-size: 1.1em; /* 見出しのフォントサイズ */
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 0.5em;
  }

  
  .text-container {
    width: 100%;
      padding: 10px;
      font-size: 0.9em ;
  }
  .about-table, .ab_container {
      width: 100%;
      padding: 10px;
      font-size: 0.9em ;
  }

  .text-container p {
    font-size: 1em; /* 必要に応じてサイズを調整 */
    line-height: 1.3;
    color: #252320;
  }

}
/* メインテキストエリアのフォントサイズ調整 */
.text-container {
  font-size: 1.1em ;
  line-height: 1.8 ;
  color: #252320;
}

/* 見出しのフォントサイズ調整 */
/* 採用情報の見出しに上部余白を追加 */
.text-container h1 {
  font-size: 2em; /* 見出しのフォントサイズ */
  font-weight: bold;
  margin-top: 2em; /* 上部に余白を追加 */
  margin-bottom: 0.5em;
}


.text-container h2 {
  font-size: 1.5em; /* 小見出しのサイズを拡大 */
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/* テキストの余白設定 */
.text-container p, .text-container ul {
  margin-bottom: 1em; /* 段落とリストの下部に余白を追加 */
}

/* .text-container 内の特定の段落のフォントサイズを調整 */
.text-container p {
  font-size: 1.2em; /* 必要に応じてサイズを調整 */
  line-height: 1.8;
  color: #252320;
}
@media (max-width: 768px) {
  .about-table td {
      display: block;
      width: 100%;
  }
  .about-table tr {
      display: block;
      margin-bottom: 10px; /* 各項目間にスペースを追加 */
  }
  .about-table .about_label {
      font-weight: bold;
      margin-bottom: 5px; /* ラベルの下に少し余白を追加 */
  }

  .r-container {
      font-size: 1em ;
  }
  
  
}

.r-container {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333; /* テキストの色 */
    width: 900px;
    text-align: left;
    margin: 10px auto 0 auto; /* 上のマージンを保持し、左右は自動で中央揃え */
    z-index: 80;
    font-size: 1em ;
}

.r-container {
  animation: fadeInUp 3s ease-out forwards;
  /* その他のスタイル設定 */
}