@charset "utf-8";

/*----------追加----------*/
html {
    padding-top: 30px;
    background-color: #fffff0;
}
/*----------追加終了----------*/

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

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


h1 {
  margin: 0; /* 上下左右の余白をなくす */
  padding: 0; /* 必要に応じて追加 */
  padding:  0 5%;
}

/*-------tb and tb-------*/
@media screen and (max-width: 769px) {
    h1 { padding:  0; }
}
/*-------end tb /*-------

/*-------tb and tb-------*/
@media screen and (max-width: 400px) {
    h1 { padding:  0; }
}
/*-------end tb /*-------



/* 画像を中央に配置し、周りにマージンを追加 */
h1 img {
  display: block;
  margin: 0 auto; /* 上下の中央に配置 */
  padding: 0; /* 必要に応じて追加 */
  max-width: 100%; /* 親要素の幅に応じて画像が縮小される */
  border-radius: 8px;   /* ボーダーを角丸にする */ 
  /* border-radius: 8px; ボーダーを角丸にする */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 影を追加 */
}



/* ---------全部共通？-----------------------*/



  /*URLそのもの*/
#generated-url {
  display: inline; /* テキストのように表示 */
  font-size: 12px; /* フォントサイズを調整 */
  color: #333; /* テキスト色を変更 */
  word-wrap: break-word; /* 長い文字列の折り返し */
  max-width: 100%; /* 必要に応じて横幅制限 */
}

#result-url-section {
  display: flex; /* 横並びにするための設定 */
  justify-content: space-between; /* URLとボタンを左右に配置 */
  align-items: center; /* ボタンとURLの縦位置を合わせる */
  width: 60%; /* 幅を画面の60%に設定 */
  margin: 20px 0; /* 上下にマージンを追加し、中央寄せに */
  padding: 5px; /* 内側の余白 */
  border: 1px solid gray; /* 緑色の境界線 */
  border-radius: 2px; /* 角を丸く */
  background-color: #f9f9f9; /* 背景色 */
  /*background-color: #fff;*/
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/ /* 軽い影をつけて立体感を */
  box-shadow: none;
}

#urlcopy-sns-section {
  display: flex;
  align-items: center;
  justify-content: center; /* optional: 全体中央寄せにしたい場合 */
  flex-wrap: nowrap;
  gap: 0;
}

#generated-url {
  display: inline-block; /* URLをブロック表示しない */
  white-space: nowrap; /* URLが折り返さないように */
  overflow: hidden; /* はみ出した部分は非表示 */
  text-overflow: ellipsis; /* 長いURLは「...」で省略 */
  max-width: calc(100% - 120px); /* ボタンを含めてURLが収まるように最大幅を調整 */
  font-size: 12px; /* フォントサイズ */
  color: #333; /* テキスト色 */
  font-family: 'Arial', sans-serif; /* フォントファミリー */
}

#copy-url-button {
  background-color: #f3f3f3; /* ボタンの背景色 */
  color: rgb(0, 0, 0); /* ボタンの文字色 */
  border: 1px solid gray; /* 緑色の境界線 */
  padding: 5px 5px; /* 内側の余白 */
  font-size: 12px; /* フォントサイズ */
  cursor: pointer; /* カーソルをポインターに変更 */
  border-radius: 5px; /* 角を丸く */
  transition: background-color 0.3s ease; /* ホバー時の色変更にアニメーションを追加 */
}

#copy-url-button:hover {
  background-color: rgb(255, 255, 167); /* ホバー時の背景色 */
}

#copy-confirmation {
  display: none; /* 初期状態では非表示 */
  color: rgb(255, 79, 79); /* テキスト色 */
  font-weight: bold; /* 太字 */
  margin-top: 10px; /* 上の余白 */
  font-size: 12px; /* フォントサイズ */
}


/* --------------------------------*/
  


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

}

.result-container {
  background-color: #ffffff;
  padding: 2px 100px;
  margin: 0 auto; /* 自動マージンで中央揃えを補強 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* あなたの総合評価の要素 */
.overall-evaluation{
  margin: 0; /* 上下の余白: 20px, 左右: 自動中央揃え */
  padding: 0; /* 内側の余白 */
}
/* あなたの総合評価のタイトル色 */
.totalresult{
  color: #642c07; /* タイトルの色を青に */
  margin-bottom: 10px;
  font-size: 30px;
  text-align: left;
  font-weight: 600; /* 文字を太字に */
}

/* あなたの診断結果*/
.top-title{
    font-size: 30px;
    margin-top: 10px;
    padding: 0;
    font-weight: bold;
    text-align: center;
    color: #642c07
  }
  /* あなたは〇〇タイプです*/
  .score-type {
    font-size: 36px;
    margin: 5px;
    font-weight: bold;
    text-align: center;
    color: #642c07
  }

/*初期はオレンジで囲んでいた枠のところ */

.message {
  /* border: 2px solid #fcf7f7; 青色のボーダー */
  border-radius: 10px; /* 丸みを持たせる */
  padding:10px 0;
  margin-bottom: 20px;
  background-color: #ffffff; /* 背景色を白に */
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 影を付ける */
}


/*タイプ別のイラストを横並びにする */
.ego-score-type.horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  max-width: 800px;
  width: 100%;
  font-size: 36px;
  font-weight: bold;
  color: #642c07;
  box-sizing: border-box;
}

.ego-score-img-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ego-score-img {
    max-width: 250px;
    height: auto;
}

.ego-score-text {
    flex: 1;
    font-size: 36px;
    line-height: 1.5;
}

/* ✅ モバイル用スタイル（画面幅800px以下） */
@media screen and (max-width: 800px) {

    .ego-score-img {
      max-width: 130px;
    }
  
    .ego-score-text {
      font-size: 28px;
    }
  }

  

/* ✅ モバイル用スタイル（画面幅600px以下） */
@media screen and (max-width: 450px) {

    .ego-score-img {
      max-width: 130px;
    }
  
    .ego-score-text {
      font-size: 20px;
    }
  }

  @media screen and (max-width: 380px) {
    .ego-score-img {
        max-width: 110px;
      }
    .ego-score-text {
        font-size: 18px;
      }
    }



/* 途中、インクルードしているlovemessage.htmlファイルのCSS */
/* 大きい太字 */
.message-title {
  color: #642c07; /* タイトルの色を青に */
  margin-bottom: 10px;
  font-size: 35px;
  text-align: left;
  font-weight: 800; /* 文字を太字に */
}

/* 下線太太字 */
.allcomment{
  font-size: 30px;
  font-weight: bolder;
  color:#642c07;
  margin: 0;
  padding-top: 15px;
  padding-bottom: 1px; /* 下線とテキストの間隔を狭くする */
  border-bottom: 1px solid #472c04;  /* 太めの下線を追加 */
  

}


/* 小太字 */
.usertodo {
  font-weight: 550;
  color: rgb(77, 42, 26);
  font-size: 24px;
  margin-bottom: 0; /*特徴・注意点の下の余白を狭くする */
  
}

/*　点線の囲い太字 */
.proscons {
  font-size: 18px;
  border: 1px dashed rgb(107, 63, 27); /* 枠線の太さ、種類、色を指定 */
  padding: 5px; /* テキストと枠の間に余白を作る */
  border-radius: 5px; /* 角を丸くしたい場合 */
  display: inline-block; /* テキストのサイズに合わせて幅を調整 */
  margin-bottom: 0; /*特徴・注意点の下の余白を狭くする */
}
/*　点線の囲い 細め　おすすめコラム講座*/
.osusume {
  font-size: 18px;
  border: 1px dashed rgb(107, 63, 27); /* 枠線の太さ、種類、色を指定 */
  padding: 5px; /* テキストと枠の間に余白を作る */
  border-radius: 5px; /* 角を丸くしたい場合 */
  display: inline-block; /* テキストのサイズに合わせて幅を調整 */
  margin-bottom: 0; /*特徴・注意点の下の余白を狭くする */
}

/* 赤太字（注意点など） */
.bold-text {
  font-size: 20px;
  font-weight: bolder;
  color: rgb(236, 108, 91);
  line-height: 1; /* 行間を狭くする */
  margin-bottom: 5px; /* 下の余白を小さく */
}


/* -------------------------------------------------- */


/* --------------統計の棒グラフ-------------------- */

/* .type-chart-container {
  max-width: 800px;
  margin: 0 auto;
  background: #ffffff;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} */



/* ----------------統計の棒グラフおわり------------------------ */




/* レーダーチャートだけ共通*/

/* 表とチャートを横並びに配置する親コンテナ */

/* 親コンテナ .container */
.container {
  display: flex;
  flex-wrap: wrap; /* 要素が画面サイズに応じて折り返し */
  justify-content: center; /* 子要素を中央に配置 */
  align-items: flex-start;  /* 子要素を上に揃える */
  gap: 0px; /* チャートとテーブル間の隙間 */
  margin-top: 1px; /* 上の余白 */
  padding: 0 20px; /* 親要素の左右の余白 */
  width: 100%; /* 親要素の幅を100%に */
  box-sizing: border-box; /* パディングを含めてサイズ計算 */
}

/* レーダーチャート */
.chart-wrapper {
  flex: 1; /* 横並び時に幅を調整 */
  max-width: 500px; /* 最大幅 */
  margin: 0 auto; /* 横方向の中央揃え */
}

#radarChart {
  width: 100%; /* 親要素の幅に合わせる */
  height: auto; /* 高さを自動調整 */
  max-width: 500px; /* 最大幅を指定 */
}

/* 結果表 */
.table-container {
  flex: 1; /* 横並び時に幅を調整 */
  max-width: 400px; /* 最大幅 */
  margin-bottom: 20px; /* 下の余白 */
  box-sizing: border-box; /* パディングを含めてサイズ計算 */
  margin: 0 auto; /* 横方向の中央揃え */
}



table {
  width: 100%; /* テーブルの幅を100%に設定 */
  border-collapse: collapse; /* 枠線の重なりを防ぐ */
}

td, th {
  border: 1px solid rgba(0, 0, 0, 0.1); /* 薄い黒の枠線 */
  padding: 5px; /* セル内の余白 */
  text-align: left; /* テキストを左寄せに */
  font-size: 12px; /* フォントサイズを小さく設定 */
}

th {
  background-color: #f2f2f2; /* ヘッダーの背景色を設定 */
}

td:first-child, th:first-child {
  min-width: 80px; /* 左側の列の最小幅を設定 */
}




h2 {
  color: #e99a24;
  text-align: center;
  padding: 0;
  margin: 5px;
}

h3 {
  color: #f37a09;
  text-align: left;
  
}

/* -----総合評価のテキストと画像の横並び　縦並び----- */
.all-reviews {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 20px;
  flex-wrap: wrap;
}

.all-reviews-text {
  flex: 3;
  line-height: 1.8;
  min-width: 250px;
}

.all-reviews-image {
  flex: 1;
  min-width: 150px;
}

.all-reviews-image img {
  max-width: 100%;
  height: auto;
  display: block;
    margin: 0 auto; /* ← この1行で中央揃え */
}

/* スマホ対応：縦並びに切り替え */
@media screen and (max-width: 600px) {
  .all-reviews {
    flex-direction: column;
  }

  .all-reviews-text,
  .all-reviews-image {
    flex: none;
    width: 100%;
  }

  .all-reviews-image {
    text-align: center;
    margin-top: 10px;
  
  }
}

/* -----レーダーチャートだけ共通終わり----- */
/* -------------------------------------------------- */


/* -----エゴグラムと散布図だけ共通----- */
/* -------------------------------------------------- */


/* あなたの得点は○点の表示場所 */
.score-container {
  text-align: center; /* テキストを中央揃えにする */
}
.score-item {
  margin: 0; /* マージンをリセット */
}

/* 9つのエリアのレジェンド全体のスタイル */

#legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3列に分ける */
  gap: 20px;  /* アイテム間のスペース */
  padding: 10px;
}

/* 各レジェンドアイテムの設定 */
.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* アイテム間の縦の間隔 */
}

#legend .legend-item span {
  font-size: 12px; /* フォントサイズを14pxに設定（必要に応じて調整） */
}

/* 色の設定 */
.legend-color {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 10px;
    border: 1px solid #919191; /* 薄い灰色の境界線 */
}

/* 16つのエリアのレジェンド全体のスタイル */

#legend16 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 3列に分ける */
  gap: 1px;  /* アイテム間のスペース */
  padding: 5px;
}

/* 各レジェンドアイテムの設定 */
.legend16-item {
  display: flex;
  align-items: center;
  margin-bottom: 1px; /* アイテム間の縦の間隔 */
  justify-content: center; /* グリッド全体を中央寄せ */
  justify-items: center;   /* 各セル内の要素も中央寄せ */
}

#legend16 .legend16-item span {
  font-size: 12px; /* フォントサイズを14pxに設定（必要に応じて調整） */
}

/* 色の設定 */
.legend16-color {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 5px;
  border: 1px solid #919191; /* 薄い灰色の境界線 */
}


/* 散布図の設定 */

    /* コンテナに幅とアスペクト比の制限を設定 */
    .chart-container {
      max-width: 800px;     /* 最大幅を400pxに制限 */
      width: 100%;          /* 親要素の幅に合わせる */
      /*aspect-ratio: 1 / 1;*/  /* 正方形に設定 */
      /*position: relative;*/   /* レスポンシブで正方形を維持するために必要 */
      margin: 0 auto;        /* 横方向の中央寄せ */
      /*background-color: #2CCE8C;*/
  }

  /* キャンバス自体はコンテナにフィットさせる */
  #scatterPlot {
      width: 100%;
      height: 100%;
  }

/* ここから別のCSS */

#score-table {
  flex: 1;
  margin-top: 20px;
  
} 




/* -----散布図だけ共通終わり----- */
/* -------------------------------------------------- */

/* -----エゴグラムだけ共通----- */
/* -------------------------------------------------- */


/* 得点の表のところ */
.result-table {
  width: 90%;
  max-width: 400px;     /* ← PC時にこれ以上広がらないように制限 */
  border-collapse: collapse;
  margin: 20px; /* 表を中央に配置 (上下20pxの余白、左右自動調整) */
  text-align: center;
  font-size: 14px; /* 全体の文字サイズを少し小さめに設定 */
}

.result-table th, .result-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.result-table th {
  background-color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px; /* 全体の文字サイズを少し小さめに設定 */
}


/* エゴグラム診断タイプ別統計のセクション */


/* "全部の統計" テキスト */
#total-stats-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* レスポンシブ画像 */
#total-stats-image {
  max-width: 100%;  /* 親要素の幅に合わせて最大幅を調整 */
  height: auto;     /* アスペクト比を保ちながら高さを自動で調整 */
  margin-top: 10px;
}

/* カラフルトグルボタン */

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

.toggle-item {
  margin-bottom: 15px;
  border: 1px solid #dddddd;
  border-radius: 5px;
}


.toggle-button {
  color: white;
  border: none;
  padding: 10px;
  width: 100%;
  text-align: left;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
}

.toggle-button:hover {
  transform: translateY(-5px); /* ボタンを少し浮き上がらせる */
  background-color: #8A6C2B; /* 背景色を変更 */
}

.toggle-button:active {
  transform: translateY(0); /* クリック時に元の位置に戻す */
}
.toggle-button.a {
  background-color: #69a757; /* 緑色 */
}

.toggle-button.b {
  background-color: #f58c81; /* ピンク色 */
}

.toggle-button.c {
  background-color: rgb(107, 107, 206); /* 青色 */
}

.toggle-button.d {
  background-color: rgb(231, 179, 81); /* オレンジ色 */
}

.toggle-button.e {
  background-color: rgb(122, 98, 67); /* ピンク色 */
}


.toggle-content {
  display: none; /* 初期状態では非表示 */
  padding: 10px;
  background-color: white;
}

.toggle-content.active {
  display: block; /* activeクラスが追加されたときに表示 */
}

.toggle-content p {
  margin: 0;
}

.toggle-content a {
  color: blue; /* リンクの色を青に設定 */
  text-decoration: underline; /* 下線を追加 */
}

/* エゴグラム動画 */
.youtube-container.egogram {
  position: relative;
  width: 100%;
  max-width: 400px;  /* パソコン時：最大400pxに */
  aspect-ratio: 16 / 9; /* 横長比率を明示 */
  margin: 0 auto;
  overflow: hidden;
}

/* スマホでは最大90%に */
@media screen and (max-width: 767px) {
  .youtube-container.egogram {
    width: 70%;
  }
}

.youtube-container.egogram iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 0;
}


/* -----エゴグラムだけ共通終わり----- */


/* -----ビジネス版エゴグラムだけ共通----- */
.bg-low {
  background-color: rgba(215, 245, 246, 1); /* 青系：かなり低い・やや低い */
}
.bg-medium {
  background-color: rgba(236, 255, 227, 1); /* 黄緑系：中程度 */
}
.bg-high {
  background-color: rgba(254, 240, 238, 1); /* ピンク系：高い・かなり高い */
}

/* -----ビジネス版エゴグラムだけ共通終わり----- */
/* -------------------------------------------------- */



.message-section {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px; /* 内部セクションの角を丸くする */
  background-color: #ffffff; /* 内部セクションの背景色 */
}

.message-section h4 {
  color: #312d05; /* 注意点タイトルの色を濃いグレーに */
  margin-bottom: 5px;
  font-size: 30px;
}

.message-section p {
  margin: 5px 0; /* 段落の上下に余白を追加 */
  line-height: 1.6; /* 行間を少し広げる */
}



.custom-link {
  color: blue;  /* リンクの文字色を青に指定 */
  text-decoration: underline;  /* 下線を追加 */
}

.custom-link:hover {
  color: rgb(182, 30, 88);  /* ホバー時にリンクの色を変更 */
  text-decoration: underline;  /* ホバー時に下線を維持 */
}

/*ここから下が定型文以外*/

/*恋愛の横のアイコン*/
.love-icon {
  width: 60px;     /* 適宜調整（例：20〜32px程度） */
  height: auto;
  vertical-align: middle; /* テキストと縦位置を揃える */
  margin-left: 4px;       /* テキストとの余白 */
}


/* 法人商用利用について */

.business {
  text-align: justify;
  color: #555;
  margin-top: 50px;
  font-size: 28px;
  font-weight: bolder;
  padding: 0;

}


/* スクリーンサイズが900px以上の場合、横並びに */
@media (min-width: 1001px) {
  .container {
    flex-direction: row; /* アイテムを横並びに変更 */
    justify-content: space-between; /* 横並びでスペースを均等に */
  }
}



/* レスポンシブデザイン */
@media (max-width: 1000px) {

    /*------------追加------------*/
    .nav-menu {
      margin-right: 10px;
    }

    h1 {
      padding: 0;
    }

    .logo img {
      width: 80px; 
      height: auto; /* アスペクト比を保持 */
      margin-left: 20px; /* 左側に隙間 */
    }
    /*------------追加終了------------*/


  /* 画面幅が900px以下のとき、縦並びに */
  .container {
    flex-direction: column; /* アイテムを縦並びに変更 */
    padding:0 10px; /* 左右の余白を少なく */
  }

  /* チャートとテーブルをそれぞれ縦に並べる */
  .chart-wrapper,
  .table-container {
    max-width: 100%; /* 幅を100%に設定 */
    margin-bottom: 20px; /* 下の余白 */
  }

  .result-container {
    padding: 2px 20px; /* 左右の余白 (画面が小さいときに縮小可能) */
 
   }

}



/* レスポンシブスタイル */
@media (max-width: 768px) {


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

  .result-container {
   padding: 2px 10px; /* 左右の余白 (画面が小さいときに縮小可能) */

  }


/* あなたの総合評価の要素 */
.overall-evaluation{

  padding: 5px; /* 内側の余白 */
}
/* あなたの総合評価のタイトル色 */
.totalresult{
  font-size: 20px;
}

.message-title {
  font-size: 22px; /* スマホ用のタイトルサイズ */
}

.message-section h4 {
  font-size: 20px; /* スマホ用のサブタイトルサイズ */
}


/* -----散布図だけ共通----- */
/* -------------------------------------------------- */
.usertodo{
  font-size: 20px;
}
  
 /* あなたの得点は○点ですを２列へ */
.score-item {
  flex: 1 1 100%; /* 画面幅が小さくなったら縦に並べる */
}


/* -----散布図だけ共通終わり----- */
/* -------------------------------------------------- */

/* -----エゴグラムだけ共通----- */
/* -------------------------------------------------- */


/* 得点の表のところ */
.result-table {
  margin: 5px;
  font-size: 12px; /* 全体の文字サイズを少し小さめに設定 */
}

.result-table th, .result-table td {
  padding: 4px;
}

.result-table th {
  font-size: 13px; /* ヘッダー部分の文字サイズをさらに小さめに */
}


/* あなたは○○タイプですのところ */
.score-type {
  margin: 2px 0;
  font-size: 30px;
}
 /* インクルードmesseagesthmlのタイトルの色 */
.message-title {
  font-size: 24px;
}

.allcomment{
  font-size: 20px;
}

.bold-text{
  font-size: 18px;
}

.proscons {
  font-size: 18px;
}
}
 /* -----エゴグラムだけ共通おわり----- */
/* -------------------------------------------------- */

@media (max-width: 480px) {


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


  .result-container {

    padding: 2px 5px; /* 左右の余白 (画面が小さいときに縮小可能) */

  }

  .score-type {
    font-size: 24px;
  }
  
  h2 {
      font-size: 20px; /* スマホ用のサブ見出しサイズ */
  }
  
  h3 {
      font-size: 18px; /* スマホ用の見出しサイズ */
  }

  

  .message {
      padding: 5px; /* スマホ用のパディング */
  }



}