/* 学位取得までの年数の図（早期卒業制度）
   標準カリキュラム（9年）と最短カリキュラム（6年）を、同じ物差しで並べて見せる。

   図全体がひとつの grid になっている。
   横は「1列＝1年」の9列と、右端の円のための1列。
   下の grid-template-areas が、そのまま図の設計図になっている。
   白い枠も帯も円もこの同じ列の上に置いているので、枠と帯の境目は必ずそろう。
   年数を変えたいときは、この表の中でその部品が占める列を増やす／減らせばよい。

   n1/n2 カリキュラムの名前   u1/u2 学部        g1/g2 大学院博士課程
   e1/l1 前期・後期          e2    前期・後期   a1〜a3,b1/b2 年数の帯
   c1/c2 合計年数の円        lk    2つの円をつなぐ矢印   bd 「早期学位取得が可能！」 */
.degreeChart {
    /* 図の寸法。矢印の長さや円の位置は、ここから計算している。 */
    --bar-h: 52px;      /* 帯の高さ */
    --goal-size: 158px; /* 円の直径 */
    --goal-col: 190px;  /* 右端、円を置く列の幅 */
    --col-gap: 6px;
    --row-gap: 8px;
    --line: 15px;       /* 矢印の太さ */
    --line-color: #8ecb6b;
    --curve-inset: 18px; /* 弧を、円の真下ではなく少し左寄りから出すためのずらし幅 */
    /* 円が帯の行から上下にはみ出す高さ */
    --goal-over: calc((var(--goal-size) - var(--bar-h)) / 2);

    max-width: min(1040px, 100%);
    margin: 32px auto 8px;
    color: #1f2328;

    display: grid;
    grid-template-columns: repeat(9, 1fr) var(--goal-col);
    column-gap: var(--col-gap);
    row-gap: var(--row-gap);
    grid-template-areas:
        "n1 n1 n1 n1 n1 n1 n1 n1 n1 . "
        "u1 u1 u1 u1 g1 g1 g1 g1 g1 . "
        "u1 u1 u1 u1 e1 e1 l1 l1 l1 . "
        "a1 a1 a1 a1 a2 a2 a3 a3 a3 c1"
        ".  .  .  .  .  .  lk lk lk lk"
        "n2 n2 n2 n2 n2 n2 lk lk lk lk"
        "u2 u2 u2 g2 g2 g2 lk lk lk lk"
        "u2 u2 u2 e2 e2 e2 lk lk lk lk"
        "b1 b1 b1 b2 b2 b2 c2 c2 c2 . ";
    /* 5行目は、上の円のはみ出しと矢印の出だしのための場所。ここだけ高さを決めている。 */
    grid-template-rows: auto auto auto auto 58px auto auto auto auto;
    /* いちばん下の円と、その右のバッジが、最後の行からはみ出すぶん。
       円が小さい幅ではバッジのほうが下に出るので、大きいほうを取る。 */
    padding-bottom: max(var(--goal-over), 54px);
}

/* --- カリキュラムの名前 --- */
.degreeChart__planName {
    margin: 0;
    align-self: end;
    font-size: 17px;
    font-weight: bold;
    color: #0f9b9e;
    letter-spacing: 0.04em;
}

/* --- 学部／大学院の白い箱 --- */
.degreeChart__box {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: 6px 4px;
    border: 1.5px solid #333;
    border-radius: 6px;
    background-color: #fff;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

/* --- カリキュラム1つぶんを囲むカード（狭い画面だけ） --- */
/* 広い画面は2つのカリキュラムを1枚の図として見せるので、カードは出さない。 */
.degreeChart__card { display: none; }

/* --- 年数の帯 --- */
.degreeChart__seg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--bar-h);
    font-size: 17px;
    font-weight: bold;
    line-height: 1;
}

/* 数字と「年」をひとまとめにした span。
    b と「年」を別々の flex アイテムにすると baseline 揃えの関係で
    文字全体が帯の上側に寄ってしまうため、span にまとめて中央に置く。 */
.degreeChart__segText {
    display: block;
}

.degreeChart__seg b {
    font-size: 34px;
    font-weight: bold;
}

/* 帯の色。左のティールから右の黄緑へ、区切りをまたいで一本につながって見えるように、
   となり合う区分で端の色を合わせてある。
   文字が乗るので、いちばん明るいところでも読める濃さで止めている。 */
.degreeChart__seg--a  { background: linear-gradient(90deg, #3fb9b4, #6fbd66); }
.degreeChart__seg--b  { background: linear-gradient(90deg, #6fbd66, #88c13a); }
.degreeChart__seg--c  { background: linear-gradient(90deg, #88c13a, #b6c81b); }
.degreeChart__seg--ab { background: linear-gradient(90deg, #3fb9b4, #7cbf50); }
.degreeChart__seg--bc { background: linear-gradient(90deg, #7cbf50, #b6c81b); }

/* 帯の右端の三角。最後の区分の外側にはみ出す形で描く。 */
.degreeChart__seg--end::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    width: 22px;
    height: 100%;
    background-color: #b6c81b;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* --- 「合計9年」「最短6年」の円 --- */
/* 枠は帯と同じ高さにしておき、円はそこから上下にはみ出させる。
   こうすると、円の中心が帯の中心とそろう。 */
.degreeChart__goal {
    position: relative;
    height: var(--bar-h);
}

.degreeChart__goalCircle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* 矢印の描き始めを隠して、円から出ているように見せる */
    box-sizing: border-box;
    width: var(--goal-size);
    height: var(--goal-size);
    border: 2px dashed #555;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* 上の円は図の右端にそろえる。帯の三角と重ならない位置になる。 */
.degreeChart__goal--total .degreeChart__goalCircle {
    left: auto;
    right: 0;
    transform: translateY(-50%);
}

.degreeChart__goalLabel {
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}

.degreeChart__goalYears {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

/* 数字だけ色を変える。色は HTML 側の --num で指定する。 */
.degreeChart__goalYears b {
    font-size: 56px;
    font-weight: bold;
    color: var(--num, #b6c81b);
}

/* --- 2つの円をつなぐ矢印 --- */
/* 9年の円の下から、6年の円の右へ。四分楕円ひとつぶんの、継ぎ目のない曲線。
   上端では縦向き、下端では横向きになるので、円から出て円へ入る向きが自然にそろう。
   角丸の半径を箱いっぱい（100%）にすると、右辺と下辺が1本の弧に溶ける。 */
.degreeChart__link {
    grid-area: lk;
    position: relative;
}

.degreeChart__linkCurve {
    position: absolute;
    box-sizing: border-box;
    /* 上端＝9年の円の中心よりすこし左。円は右端ぞろえなので、中心も右端から測る。
       描き始めは円の白い面に隠れるので、円の左下から出ていくように見える。 */
    top: 0;
    right: calc(var(--goal-size) / 2 - var(--line) / 2 + var(--curve-inset));
    /* 左端＝6年の円の右のふち（矢じりのぶんだけ手前で止める） */
    left: calc((100% - var(--goal-col) - var(--col-gap)) / 2 + var(--goal-size) / 2 + 18px);
    /* 下端＝6年の円の中心の高さ。つまり最短カリキュラムの帯の行の真ん中。 */
    bottom: calc(-1 * (var(--row-gap) + var(--bar-h) / 2 + var(--line) / 2));

    border-right: var(--line) solid var(--line-color);
    border-bottom: var(--line) solid var(--line-color);
    border-bottom-right-radius: 100% 100%;
}

/* 矢じり。弧が横向きに終わるところに、線の太さの中心をそろえて置く。 */
.degreeChart__linkCurve::after {
    content: '';
    position: absolute;
    z-index: 3; /* 6年の円より前に出して、円のふちに刺さって見えるようにする */
    right: 100%;
    bottom: calc(-1 * (var(--line) / 2 + 19px));
    width: 27px;
    height: 38px;
    background-color: var(--line-color);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* 縦積みになる狭い画面用の、まっすぐ下を向いた矢印。
   上の曲がる矢印と入れ替えて使う。 */
.degreeChart__linkStraight {
    display: none;
    justify-self: center;
    width: 44px;
    height: 68px;
    background-color: var(--line-color);
    clip-path: polygon(29% 0, 71% 0, 71% 56%, 100% 56%, 50% 100%, 0 56%, 29% 56%);
}

/* --- 「早期学位取得が可能！」 --- */
/* 矢印と同じ場所に置き、図の右端、6年の円の右下に添える。
   弧がいちばん下まで下りきる高さ（＝6年の円の中心）より下から始めているので、
   幅がどう変わっても弧とぶつかることがない。
   transform で下げているため、行の高さには影響しない。 */
.degreeChart__badge {
    grid-area: lk;
    justify-self: end;
    align-self: end;
    transform: translateY(calc(100% + var(--row-gap) + var(--bar-h) / 2 + 6px));
    margin: 0;
    padding: 10px 16px;
    background-color: #1f3468;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}

/* 横並びのままだが、円を置く幅に余裕がないところ。
   円が大きいままだと、下の帯の三角に円がかぶってしまうので一回り小さくする。 */
@media (min-width: 1150px) and (max-width: 1329px) {
    .degreeChart {
        --goal-size: 132px;
        --goal-col: 152px;
    }
    .degreeChart__goalYears b { font-size: 46px; }
    .degreeChart__goalLabel { font-size: 16px; }
}

/* 円を帯の右に置くには、1年ぶんの列がある程度の幅を持っている必要がある。
   本文の左右余白が広いぶん、切り替えはやや広めの1150pxで行う。 */
@media (max-width: 1149px) {
    /* 狭い画面では、2つのカリキュラムをそれぞれカードにして縦に並べる。
       カードの中は「白い箱 → 年数の帯 → 矢印 → 合計年数の円」の横一列。
       帯は矢羽根の形にして、左から右へ進んでいくことが見た目で分かるようにする。

       列は「半年＝1列」の18列＋右端の円の列（円と矢印がここに入る）。
       広い画面は9年ぶんを同じ物差しで並べるが、この幅では最短カリキュラムの
       「大学院博士課程」が読める幅にならないので、
       最短カリキュラムだけはカードの幅いっぱいに引き伸ばしている。
       年数の長さくらべは、右の円（9年／6年）が受け持つ。

       帯と箱のあいだの細いすき間は、列の間隔ではなく部品の左右マージンで作る。
       18列もあると列の間隔の合計が大きくなりすぎて、帯に文字が入らなくなるため。 */
    .degreeChart {
        --goal-size: 132px;
        --goal-col: calc(var(--goal-size) + 30px);
        --notch: 14px;      /* 矢羽根の、とがり／くぼみの深さ */
        --arrow-w: 26px;    /* 帯と円をつなぐ小さい矢印の長さ */
        --card-pad: 14px;   /* カードの内側の余白 */
        --seg-gap: 2px;     /* 部品の左右に置くすき間（見た目のすき間はこの2倍） */

        grid-template-columns: repeat(18, 1fr) var(--goal-col);
        column-gap: 0;
        grid-template-areas:
            "n1 n1 n1 n1 n1 n1 n1 n1 n1 n1 n1 n1 n1 n1 n1 n1 n1 n1 . "
            "u1 u1 u1 u1 u1 u1 u1 u1 g1 g1 g1 g1 g1 g1 g1 g1 g1 g1 c1"
            "u1 u1 u1 u1 u1 u1 u1 u1 e1 e1 e1 e1 l1 l1 l1 l1 l1 l1 c1"
            "a1 a1 a1 a1 a1 a1 a1 a1 a2 a2 a2 a2 a3 a3 a3 a3 a3 a3 c1"
            ".  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . "
            "n2 n2 n2 n2 n2 n2 n2 n2 n2 n2 n2 n2 n2 n2 n2 n2 n2 n2 . "
            "u2 u2 u2 u2 u2 u2 u2 u2 u2 g2 g2 g2 g2 g2 g2 g2 g2 g2 c2"
            "u2 u2 u2 u2 u2 u2 u2 u2 u2 e2 e2 e2 e2 e2 e2 e2 e2 e2 c2"
            "b1 b1 b1 b1 b1 b1 b1 b1 b1 b2 b2 b2 b2 b2 b2 b2 b2 b2 c2"
            "bd bd bd bd bd bd bd bd bd bd bd bd bd bd bd bd bd bd bd";
        /* 5行目は2枚のカードのあいだの空き。ここだけ高さを決めている。 */
        grid-template-rows: auto auto auto auto 30px auto auto auto auto auto;
        padding: var(--card-pad);
        padding-bottom: 0;
    }

    /* カードの下地。grid の行番号は上の設計図の何行目かを指している
       （1〜4行目＝標準カリキュラム、6〜9行目＝最短カリキュラム）。
       内側の余白は、図の padding のぶんだけ外へはみ出して作る。 */
    .degreeChart__card {
        display: block;
        grid-column: 1 / -1;
        margin: calc(-1 * var(--card-pad));
        border: 1px solid #dfeaf1;
        border-radius: 16px;
        background-color: #f7fbfd;
    }

    .degreeChart__card--std   { grid-row: 1 / 5; }
    .degreeChart__card--short { grid-row: 6 / 10; }

    /* カリキュラムの名前は、カードの肩に乗せるタグの形にする。 */
    .degreeChart__planName {
        justify-self: start;
        align-self: center;
        margin-bottom: 6px;
        padding: 7px 18px;
        border-radius: 999px;
        background-color: #0f9b9e;
        color: #fff;
        font-size: 15px;
    }

    .degreeChart__box { margin-inline: var(--seg-gap); }

    /* 帯を矢羽根にする。右端をとがらせ、続きの帯は左端をくぼませて噛み合わせる。 */
    .degreeChart__seg {
        align-self: start;
        margin-inline: var(--seg-gap);
        clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%,
                           calc(100% - var(--notch)) 100%, 0 100%);
    }

    .degreeChart__seg--b,
    .degreeChart__seg--c,
    .degreeChart__seg--bc {
        clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%,
                           calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
    }

    /* とがりは矢羽根そのものが持つので、外へ足していた三角は使わない。 */
    .degreeChart__seg--end::after { display: none; }

    /* 円は、白い箱と帯の行にまたがって、その真ん中の高さに置く。
       左に、帯から円へ入っていく小さい矢印を添える。 */
    .degreeChart__goal {
        height: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
    }

    .degreeChart__goal::before {
        content: '';
        flex: none;
        width: var(--arrow-w);
        height: 12px;
        background-color: var(--line-color);
        clip-path: polygon(0 36%, 55% 36%, 55% 0, 100% 50%, 55% 100%, 55% 64%, 0 64%);
    }

    .degreeChart__goalCircle,
    .degreeChart__goal--total .degreeChart__goalCircle {
        position: static;
        transform: none;
    }

    /* 2つの円をつなぐ矢印は、カードが分かれるこの並べ方では使わない。 */
    .degreeChart__link { display: none; }

    /* 「早期学位取得が可能！」は、カードの外に置く一行の説明にする。 */
    .degreeChart__badge {
        grid-area: bd;
        justify-self: center;
        align-self: auto;
        transform: none;
        margin-top: 22px;
        padding: 0;
        background-color: transparent;
        color: #1f3468;
        font-size: 15px;
    }

    .degreeChart__badge br { display: none; }
}

@media (max-width: 600px) {
    /* 画面幅に合わせて、図の部品をひとまわりずつ小さくする。
       帯・矢印・円が1行に収まる必要があるので、
       円・矢印・矢羽根のとがりは vw でも頭打ちにしている。 */
    .degreeChart {
        --bar-h: 40px;
        --goal-size: min(96px, 22vw);
        --goal-col: calc(var(--goal-size) + 24px);
        --notch: min(14px, 2.4vw);
        --arrow-w: min(22px, 4.8vw);
        --card-pad: 12px;
    }
    /* 「大学院博士課程」は半分の幅しかないので、画面幅に合わせて文字を縮める。 */
    .degreeChart__box { font-size: min(12.5px, 3.05vw); min-height: 32px; border-width: 1px; padding: 4px 2px; }
    .degreeChart__planName { font-size: min(14px, 3.7vw); padding: 6px 14px; }
    .degreeChart__seg { font-size: min(13px, 3.2vw); }
    .degreeChart__seg b { font-size: min(24px, 6vw); }
    .degreeChart__goalLabel { font-size: min(14px, 3.7vw); }
    .degreeChart__goalYears { font-size: min(15px, 3.9vw); }
    .degreeChart__goalYears b { font-size: min(42px, 11vw); }
    .degreeChart__goalCircle { border-width: 1.5px; }
    .degreeChart__badge { font-size: min(15px, 3.9vw); }
}

@media (min-width: 601px) and (max-width: 1149px) {
    .degreeChart {
        --bar-h: 70px;
        --goal-size: 156px;
        --goal-col: 180px;
        --card-pad: 20px;
    }

    .degreeChart__planName {
        padding: 10px 24px;
        font-size: 28px;
    }

    .degreeChart__box {
        min-height: 52px;
        font-size: 22px;
    }

    .degreeChart__seg {
        font-size: 22px;
    }

    .degreeChart__seg b {
        font-size: 48px;
    }

    .degreeChart__goalLabel {
        font-size: 22px;
    }

    .degreeChart__goalYears {
        font-size: 25px;
    }

    .degreeChart__goalYears b {
        font-size: 64px;
    }
}