@charset "utf-8";

/* 全体のスタイル  naviメニューのPHPをインクルードしたと　このようにBODYとヘッダーを書くといい感じに小さくなる*/
  
/*----------追加----------*/
html {
    padding-top: 30px;
    background-color: #fffff0;
}
/*----------追加終了----------*/

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }


  .main-content {
  background-color: #fffff0;
  margin: 0;
  padding: 0;
}

.content-wrapper{
  margin: 0;
  padding: 0 100px;

}

h1 {
  text-align: center;
  margin: 0;
  padding: 0;
}

/* 画像を中央に配置し、周りにマージンを追加 */
h1 img {
  display: block;
  margin: 0 auto; /* 上下の中央に配置 */
  padding: 0; /* 必要に応じて追加 */
  /*max-width: 100%;*/ /* 親要素の幅に応じて画像が縮小される */
  max-width: 90%;
}

/*----------追加----------*/
h1 img {
  padding:  0 5%;
}
/*----------追加終了----------*/

/* 人気の診断コンテナのスタイル */
.diagnosis-container {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  margin: 0;
  padding: 0;

}

.diagnosis-container h2 {
  margin: 10px 0 0 0;
  padding: 0;
}



/* 人気の診断6記事コンテナのスタイル */
.articles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 記事間のスペース */
  padding: 20px;
  justify-content: flex-start; /* 左揃え */
  background-color: #ffffff; /* 背景色を白に設定 */
  margin-bottom: 40px; /* 下に20pxの余白を追加 */
 
    border-top-left-radius: 0;  /* 左上の角を丸めない */
    border-top-right-radius: 0; /* 右上の角を丸めない */
    border-bottom-left-radius: 10px;  /* 左下の角を10pxで丸める */
    border-bottom-right-radius: 10px; /* 右下の角を10pxで丸める */
  
  
}


/* 人気の診断6記事のスタイル */
.article {
  width: calc(50% - 20px); /* 2カラムで3行のレイアウト */
  box-sizing: border-box; /* パディングとボーダーを含む幅 */
  display: flex;
  align-items: flex-start; /* イラストとテキストを上に揃える */
  gap: 10px; /* イラストとテキスト間のスペース */
  text-decoration: none; /* 下線を消す */
}


/* 人気の診断6記事のイラストのスタイル */
.article-image {
  width: 160px; /* イラストの幅を指定（必要に応じて調整） */
  height: auto; /* 高さを自動調整 */
  border-radius: 8px; /* ボーダーを角丸にする */
}


/* 人気の診断6記事のテキストコンテナのスタイル */
.article-text-container {
  display: flex;
  flex-direction: column; /* タイトルと本文を上下に配置 */
  flex: 1; /* テキストが残りのスペースを占める */
}

/* 人気の診断6記事のタイトルのスタイル */
.article-title {
  font-size: 18x; /* タイトルのサイズを指定（必要に応じて調整） */
  margin: 0; /* タイトルのマージンをリセット */
  color: gray; /* タイトルの色を指定（必要に応じて調整） */
  font-weight:11px; /* 太字を指定（必要に応じて調整） */
}


/* 人気の診断6記事の本文のスタイル */
.article-body {
  font-size: 14px; /* 本文のサイズを指定（必要に応じて調整） */
  margin: 5px 0 0; /* 本文のマージンを指定 */
  color: #666; /* 本文の色を指定（必要に応じて調整） */
}


/* タブメニューのスタイル */
.tabs {
  font-weight: bold; /* 文字を太字に */
  color: #666;
  display: flex;
  justify-content: flex-start; /* タブを左寄せにする */
  position: relative;
  z-index: 1; /* タブが枠よりも前面に表示されるように */
  gap: 0; /* タブ間にスペースを追加 */
  
}

/* タブボタンのスタイル */
.tab-button {
  background-color: #ffffff; /* タブの背景色 */
  border: 2px solid #ddd; /* タブボタンのボーダー */
  border-radius: 10px 10px 0 0; /* 上側の角を丸くする */
  padding: 15px 30px; /* ボタンの内側のスペース */
  cursor: pointer; /* カーソルをポインターにする */
  font-size: 18px; /* フォントサイズを大きくする */
  text-align: center; /* テキストを中央揃え */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* 背景色と影、変形のトランジション効果 */
  margin-right: 1px; /* タブ間の余白を減らす */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* タブに影をつけて浮いている感じを演出 */
}

/* アクティブなタブボタンのスタイル */
.tab-button.active {
  background-color: #b47d7d;  /* アクティブなタブボタンの背景色を目立たせる */
  color: white; /* アクティブなタブボタンの文字色 */
  transform: scale(1.05); /* アクティブなタブを少し大きく */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* アクティブなタブにさらに影を追加 */
}

/* タブボタンにホバー時のスタイル */
.tab-button:hover {
  background-color: #e4c4c4; /* ホバー時の背景色 */
  transform: scale(1.03); /* ホバー時にタブを少し大きくする */
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2); /* ホバー時の影を強調 */
}

/* タブコンテンツの基本スタイル */
.tab-content {
  display: none; /* デフォルトでは非表示 */
  padding: 20px; /* コンテンツ内の余白 */
  margin-top: 0; /* 上部の余白 */
  border: 2px solid #e4c4c4; /* 枠線を追加 */
  border-radius: 10px; /* 角を丸くする */
  text-align: left; /* テキストを左揃え */
  background-color: #ffffff; /* 背景色を設定 */
}

/* アクティブなタブコンテンツのスタイル */
.tab-content.active {
  display: block; /* アクティブなタブコンテンツを表示 */
  
}


footer {
  background-color: #fffff0;; /* 背景色 */
  padding: 20px 0; /* 上下のパディング */
  text-align: center; /* 中央寄せ */
}

/* フッターコンテナ */
.footer-container {
  display: flex; /* フレックスボックスを使用 */
  justify-content: center; /* 中央寄せ */
  margin-bottom: 20px; /* カラムとロゴの間の隙間 */
}

/* 各カラムのスタイル */
.footer-column {
  margin: 0 30px; /* 左右の余白 */
  text-align: left; /* 文字を左寄せ */
}

/* リストのスタイル */
ul {
  list-style: none; /* リストマーカーを消す */
  padding: 0; /* パディングを消す */
}

/* リストアイテムのスタイル */
li {
  margin: 10px 0; /* 各アイテムの上下の隙間 */
}

/* リンクのスタイル */
a {
  text-decoration: none; /* 下線を消す */
  color: #333; /* リンクの色 */
  transition: color 0.3s ease; /* 色の変化にトランジションを追加 */
}

/* リンクホバー時のスタイル */
a:hover {
  color: #007BFF; /* ホバー時の色 */
  
}

/* ロゴのスタイル */
.footer-logo {
  text-align: center; /* ロゴを中央寄せ */
  margin-top: 20px; /* カラムとロゴの間の隙間 */
}

.footer-logo img {
  max-width: 100px; /* ロゴの最大幅 */
  height: auto; /* 高さは自動調整 */
}



@media (max-width: 1100px) {
 /* 全体のコンテンツコンテナの左右余白を小さく */
 .content-wrapper {
  padding: 0 20px; /* 左右のパディングを5pxに設定 */
}


}

 @media (max-width: 768px) {
 
 /*----------追加----------*/
    h1 img {
      max-width: 100%;
      padding:  0;
    }
/*----------追加終了----------*/

 /* 人気の記事 */
  .diagnosis-container img {
    max-width: 70%;
    height: auto; /* アスペクト比を保持 */
  
  }

/* ナビゲーションメニューのリスト */
.nav-menu {
  display: flex;
  gap: 10px; /* メニューアイテムの間隔を狭くする */
  flex-wrap: nowrap; /* アイテムを1行に収める */
  justify-content: center; /* 中央に配置 */
  align-items: center; /* アイテムを垂直方向に中央揃え */
  overflow: hidden; /* アイテムがはみ出さないように */
}

/* ナビゲーションメニューのリンク */
.nav-menu li a {
  font-size: 8px; /* フォントサイズをさらに小さくする */
  white-space: nowrap; /* テキストを折り返さない */
  display: flex; /* アイコンとテキストを横並びに */
  align-items: center; /* アイコンとテキストを縦に中央揃え */
}

/* 画像のスタイル（アイコン画像を調整） */
.nav-menu a img {
  width: 40px; /* 画像のサイズを小さくする */
  height: auto; /* アスペクト比を保持 */
  margin-right: 5px; /* アイコンとテキストの間に余白を追加 */
}


.logo img {
  width: 60px; 
  height: auto; /* アスペクト比を保持 */
  /*margin-left: 80px;*/ /* 左側に隙間 */
  margin-left: 40px;

}


 /* 全体のコンテンツコンテナの左右余白を小さく */
 .content-wrapper {
  padding: 0 10px; /* 左右のパディングを5pxに設定 */
}

/* 各記事を１列の立て並びにする */
.article {
  width: 100%; /* 各記事の並びを1列にする */
  margin: 0; /* */
  padding: 0; /* 内部のパディングも小さく */
}




/* 画像の幅を100%に調整して画面幅に収める */
.article-image {
  max-width: 50%;
  height: auto; /* アスペクト比を保持 */
}


  
  .tabs {
    overflow-x: auto; /* スクロール可能にする */
    white-space: nowrap; /* 子要素を横に並べる */
  }

  .tab-button {
    flex: 0 0 auto; /* 横に並べるための設定 */
    margin-right: 5px; /* ボタン間のスペースを縮小 */
    padding: 8px; /* タブのパディングを調整 */
    font-size: 16px;
  }
}


/*アイホンSE2の画面は　375pxです */

@media (max-width: 500px) {

 /*----------追加----------*/
    h1 img {
      max-width: 100%;
      padding:  0;
    }
/*----------追加終了----------*/


  .content-wrapper{
    padding: 0 5px;
  
  }

  .article-image {
    width: 90px; /* 記事の画像 */
    height: auto; /* 高さを自動調整 */
    border-radius: 8px; /* ボーダーを角丸にする */
  }

  .article-title {
    font-size: 14px;   /* 記事のタイトル */
  }

  .article-body {
    font-size: 10px; /* 記事の説明文 */
  } 

}