@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 共通部分 */
.pie-chart-wrapper {
    display: flex;
    flex-direction: row;  /* 横並びにする */
    flex-wrap: wrap;
    justify-content: center;  /* 中央寄せ */
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    padding: 0px 0;
    box-sizing: border-box;
}

.chart-box {
    flex: 1 1 45%; /* 2つ並べる */
    min-width: 250px;
    max-width: 350px;
    text-align: center;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
}

.chart-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 数値（グラフ中心のラベル） */
.chart-label {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    font-weight: bold;
    color: #000;
    background: none;
}

/* ----------------------- */
/* パイチャート専用スタイル */
/* ----------------------- */
.pie-chart-container {
    width: 90%;         /* コンテンツ幅に合わせる */
    max-width: 320px;   /* 最大幅を320pxに */
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
}

.pie-chart-container canvas {
    width: 100% !important;
    height: auto !important;
    transition: transform 0.3s ease-in-out;
}



/* ----------------------- */
/* バーチャート専用スタイル */
/* ----------------------- */
.bar-chart-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto;
    height: 500px;   /* 高さ固定 */
    padding: 10px;
    box-sizing: border-box;
}

.bar-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    transition: none !important; /* ホバー効果無効 */
}

/* 棒グラフ専用 */
.bar-chart-student-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto;
    height: 500px;
    padding: 10px;
    box-sizing: border-box;
}

canvas.bar-chart-student {
    width: 100% !important;
    height: 100% !important;
    transition: none !important;
}

/* ----------------------- */
/* スマホ対応（共通） */
/* ----------------------- */
@media (max-width: 768px) {
    .pie-chart-wrapper {
        justify-content: space-around;
        padding: 10px;
    }
    .chart-box {
        flex: 1 1 45%;
        min-width: 130px;
        max-width: 250px;
        padding: 5px;
    }
    /* 円グラフ用：コンテナを固定の正方形に設定 */
    .pie-chart-container {
        width: 90%;
        max-width: 240px;  /* 少し小さく */
        height: 240px;     /* 高さを固定して正方形に */
        margin: 0 auto;
        padding: 5px;
        box-sizing: border-box;
        position: relative;
    }
    /* canvasは親要素に合わせる */
    canvas.pie-chart {
        width: 100% !important;
        height: 100% !important;
    }
    /* 中央ラベルを微調整 */
    .chart-label {
        font-size: 16px;
        top: 67%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    /* タイトルの改行対応 */
    .chart-title {
        font-size: 18px;
        white-space: pre-line;
    }
    /* バーチャート・棒グラフの高さ調整 */
    .bar-chart-student-container{
        height: 300px;
        padding: 5px;
    }
    /* canvasは親要素のサイズに合わせる */
    canvas.bar-chart-student {
        width: 100% !important;
        height: 100% !important;
    }
}

    .bar-chart-student-container {
	/* スマホでは高さを縮小 */
        height: 300px;
        /* 必要に応じて余白も縮小 */
        padding: 5px;
}

    .bar-chart-deviation-container {
	/* スマホでは高さを縮小 */
        height: 300px;
        /* 必要に応じて余白も縮小 */
        padding: 5px;
}

.univ-compare {
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #fefefe;
  padding: 1.5em;
  margin: 2em 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-family: "Segoe UI", sans-serif;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.univ-compare .compare-header {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2em;
  text-align: center;
  flex-wrap: nowrap;
}

.univ-compare .compare-box {
  flex: 1 1 40%;
  min-width: 120px;
  font-weight: bold;
}

.univ-compare .compare-box .univ-school {
  font-size: 1rem;
  line-height: 2.2em; /* ← 余白を狭める */
}

.univ-compare .compare-box .univ-faculty {
  font-size: 0.95rem;
  color: #333;
  line-height: 2.1em; /* ← 余白を狭める */
}

.univ-compare .compare-box .univ-value {
  font-size: 1.8rem;
　margin-top: 0.4em;
  line-height: 1.2em;
}

.univ-compare .center {
  width: auto;
  min-width: 40px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #666;
  align-self: center;
  line-height: 2.3em;
}

.univ-compare .highlight .univ-value {
  color: #006B54;
  background-color: #eaf5ef;
  border-radius: 6px;
  display: inline-block;
}

.univ-compare .compare-title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 1em; /* ← ここを追加・調整（元は0.5emなど） */
  color: #444;
}

.univ-jobs-value {
  font-size: 0.85em;
}

@media (max-width: 480px) {
.univ-compare .compare-box .univ-value {
  font-size: 1.2rem;
  line-height: 1.2em;
	}
}



/* 横スクロール用コンテナ */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* タッチデバイスでスムーズなスクロール */
}

/* テーブル全体のスタイル */
.comparison-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 600px;  /* 表が折り返されず横にスクロールできるよう最小幅を設定 */
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* テーブルの見出し（キャプション）のスタイル */
.table-caption {
  font-size: 1.5em;
  margin-bottom: 10px;
  text-align: center;
  font-weight: bold;
  padding: 10px 0;
}

/* テーブルヘッダーのセル */
.table-header-cell {
  background-color: #f2f2f2;
  font-weight: bold;
  padding: 12px 15px;
  border: 1px solid #ddd;
  text-align: left;
}

/* テーブル本体のセル */
.table-cell {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
}

/* 偶数行に背景色を設定 */
.table-body .table-row:nth-child(even) {
  background-color: #f9f9f9;
}

/* マウスオーバー時の背景色変更 */
.table-body .table-row:hover {
  background-color: #eaeaea;
}

/* レスポンシブ対応 */
.gender-piechart-container {
    display: flex;
    justify-content: space-between; /* 横並びで配置 */
    flex-wrap: nowrap; /* 横並びを強制 */
    gap: 20px; /* チャート間の隙間 */
    width: 101%; /* 親要素の幅を100%に設定 */
}

.chart-wrapper {
    flex: 1; /* チャートの幅を均等に設定 */
    padding: 10px;
    min-width: 20%; /* 各チャートの最小幅を45%に設定 */
    max-width: 48%; /* チャートが横並びに収まるように最大幅を設定 */
    box-sizing: border-box; /* 幅がpaddingを含むように設定 */
}

@media (max-width: 1024px) {
    .gender-piechart-container {
        flex-direction: row; /* タブレットでも横並びにする */
    }

    .chart-wrapper {
        min-width: 20%; /* スマホと同様に、横並びになるよう最小幅を設定 */
        max-width: 48%; /* 横並びで収まるように最大幅を調整 */
    }
}

/* スマホ（480px以下）でも横並びにする */
@media (max-width: 480px) {
    .gender-piechart-container {
        flex-direction: row; /* 横並びを強制 */
    }

    .chart-wrapper {
        min-width: 20%; /* スマホ画面でも横並び */
        max-width: 48%; /* 幅を調整 */
    }
}



.rankingcontents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    margin: 30px 0;
    padding-top: 0px;
}
.ranking {

    text-align: center;
}