/* フォントのインポート */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* 全体のスタイリング */
body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Serif JP', serif; /* 日本語フォント */
    color: #333; /* テキストの色 */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif; /* 英語フォント */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ヘッダー部分 */
.header {
  display: flex; /* フレックスコンテナを定義 */
  justify-content: space-between; /* 左右のアイテムを画面の両端に配置 */
  align-items: center; /* アイテムを中央に垂直揃え */
  padding: 20px 20px; /* パディングでコンテンツに余白を持たせる */
  background: white; /* ヘッダーの背景色 */
}

.nav-index {
  color: black; /* ナビゲーションアイテムの文字色 */
  text-decoration: none; /* テキストの下線を無効化 */
  margin-left: 20px; /* ナビゲーションアイテム間の余白 */
  margin-right: 20px; /* ナビゲーションアイテム間の余白 */
}

.nav-item {
  color: black; /* ナビゲーションアイテムの文字色 */
  text-decoration: none; /* テキストの下線を無効化 */
  padding: 0 10px; /* 左右のパディング */
  display: flex; /* フレックスボックスモデルを適用 */
  align-items: center; /* 縦の中心に配置 */
  height: 100%; /* 親要素と同じ高さに設定 */
}

/* 商品情報リンクに縦線を追加 */
.nav-item:not(:last-child) {
  border-right: 1px solid white; /* 右側の境界線を白で設定 */
  margin-right: 20px; /* 線と隣のナビゲーションアイテムの間に余白を設定 */
  padding-right: 20px; /* 線とテキストの間に余白を設定 */
}
.navbar {
  display: flex; /* ナビゲーションバーもフレックスコンテナとして定義 */
} 
/* ヒーローセクション */
.hero h1 {
    font-size: 2.5rem;
    color: white;
    background: #FFA500;
    text-align: left;
    padding: 40px 15% 0px 15%;
    margin-bottom: 0;
}

.hero div {
  color: white;
  background: #FFA500;
  padding: 0px 15% 20px 15%;
  text-align: left;
  font-size: 10px;
  font-family: 'Noto Serif JP', serif; /* 日本語フォント */
}

/* 製品価格セクション */
.products {
    display: flex;
    justify-content: space-around;
    padding: 20px 15%;
    text-align: center;
}

.products p{
  text-align: center;
  color: #000000;
  font-size: 32px;
}

.products div{
  padding: 10px 0;
}

.products button{
  background-color: #FFA500;
  color: white;
  border: none;
  font-size: 15px;
}

/* 製品特徴セクション */
.features {
  display: flex; /* Flexboxを使って2つのdivを横並びにする */
}

.feature_1, .feature_2 {
  flex: 1; /* 各divが等しい幅になるようにする */
  padding: 20px; /* 内側の余白 */
}

.feature_2{
  padding-top: 15%;
}

.features h2{
  font-size: 3rem;
}

.features h2, .environment h2 {
    color: black;
    padding: 10px;
    text-align: center;
}


.feature{
  border-top: solid 1px #FFA500;
  padding: 10px;
} 

.qa-item{
    background-color: #FFA500;
    padding: 20px;
    margin: 10px;
}

/* Q&Aセクション */
.qa-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.qa h2{
  font-size: 3rem;
  text-align: center;
  font-family: 'Noto Serif JP', serif; /* 日本語フォント */
}

.questions {
  display: flex; /* Flexboxを使用して要素を横に並べる */
  justify-content: space-around; /* 要素間に均等なスペースを提供 */
  margin: 0px 15% 0px 15%; /* 左右の余白 */ 
}

.question_1, .question_3 {
  flex-basis: calc(50% - 20px); /* 要素のベースの幅を計算 */
  /* flex-basisの値から、2つの要素間の余白を引いた幅になるように調整 */
  margin: 10px 10px 0px 10px; /* 周囲の要素との間隔 */
  /* 必要に応じて、paddingやその他のスタイルを追加 */
  background-color: #FFA500;
}
.question_2, .question_4{
  flex-basis: calc(50% - 20px);
  margin: 0px 10px 10px 10px;
  background-color: #FFB347;
}

.questions p {
 font-size: 15px;
}

.title, .content {
  padding: 5px;
}

.qa{
  padding-bottom: 10%;
}

/* 運営環境セクション */
.environment{
  padding-bottom: 10%;
}

.environment_title {
    display: flex;
    justify-content: space-between;
    padding:0% 15%;
}

.environment_item {
  display: flex;
  justify-content: space-between;
  padding:0% 15%;
}

.env-item-title {
  font-size: 3rem;
  color: black;
  text-align: left;
}

.env-item {
    width: calc(33.333% - 20px);
    border-right: solid 1px #FFA500;
    border-left: solid 1px #FFA500 ;
    padding: 20px 30px 20px 10px;
    margin: 10px;
}

/* フッター */
.footer {
    background: #FFB347;
    color: white;
    padding: 2% 0%;
    font-size: 10px;
    
}

.footer-content {
  display: flex; /* Flexboxを使用して横並びにする */
  justify-content: space-between; /* 両端にアイテムを配置 */
  padding: 0% 10%; /* パディングを適用 */
}

.footer-PP-tokusho {
  align-items: center;
  padding-top: 2%;
}

.footer-link {
  color: white; /* リンクの色を白に設定 */
  text-decoration: none; /* 下線を削除 */
  padding: 0 1rem; /* パディングを適用 */
}

/* レスポンシブ対応 */
/* メディアクエリでスマートフォン表示のスタイルを調整 */
@media (max-width: 768px) {
  /* ヘッダー内ナビゲーションのスタイリング */
  .header {
      background-color: #ffffff;
      flex-direction: column;
      padding: 20px;
  }

  .nav-item {
      margin-bottom: 10px; /* 上部ナビゲーションのアイテム間の余白 */
  }

  /* ヒーローセクション */
  .hero h1,
  .hero div {
      padding: 20px; /* パディングをスマートフォンに適したサイズに調整 */
      text-align: center; /* 中央寄せ */
  }

  /* 製品特徴セクション */
  .features,
  .environment_title,
  .environment_item {
      flex-direction: column;
  }

  .feature_1, .feature_2 {
      padding: 20px; /* 内側の余白を調整 */
  }

  .feature_2 {
      padding-top: 0; /* 上部のパディングを削除 */
  }

  .environment_item {
      padding: 20px;
  }

  .env-item {
      width: calc(100% - 20px);
      border-right: none; /* 縦線を削除 */
      border-left: none; /* 縦線を削除 */
      padding: 10px;
      text-align: center; /* 中央寄せ */
  }

  .env-item-title-2{
    text-align: left;
  }

  .env-item-content{
    text-align: left;
  }

  .nav-index{
    margin: 10px 0px;
  }

  /* Q&Aセクション */
  .questions {
      flex-direction: column;
  }

  .question_1, .question_2, .question_3, .question_4 {
      margin: 10px 0; /* 上下のみにマージンを適用 */
  }

  /* フッター */
  .footer-content {
      flex-direction: column;
  }
}