@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Nunito:wght@700;800&display=swap');
/* ===================================
   CSS カスタムプロパティ
=================================== */
:root {
    /* 学年カラー */
    --color-grade1-bg:    #f97316;
    --color-grade1-light: #fff7ed;
    --color-grade1-dark:  #c2410c;

    --color-grade2-bg:    #3b82f6;
    --color-grade2-light: #eff6ff;
    --color-grade2-dark:  #1d4ed8;

    --color-grade3-bg:    #8b5cf6;
    --color-grade3-light: #f5f3ff;
    --color-grade3-dark:  #6d28d9;

    /* ベースカラー */
    --color-base:           #fafaf9;
    --color-surface:        #ffffff;
    --color-border:         #e7e5e4;
    --color-border-light:   #f5f5f4;
    --color-text-primary:   #1c1917;
    --color-text-secondary: #78716c;
    --color-text-link:      #0369a1;
    --color-accent:         #ea500c;

    /* 科目カラー */
    --color-subject-english: #dc2626;
    --color-subject-math:    #2563eb;
    --color-subject-science: #d97706;
    --color-subject-shared:  #b45309;

    /* タイポグラフィ */
    --font-main: 'Noto Sans JP', 'Zen Maru Gothic', 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', sans-serif;


    /* シャドウ */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);

    /* 角丸 */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-xl:   24px;
    --radius-pill: 999px;

    /* トランジション */
    --transition: 0.22s ease;
}
*, *::before, *::after { box-sizing: border-box; }
html {
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    width: 100%;
}
body.page-flat,
body.flat {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}
main {
    width: min(960px, 92%);
    margin: 0 auto;
    padding: 2rem 0 3rem;
}
footer p {
    line-height: 2;
    text-align: center;
    padding: 14px 0;
    font-size: 16px;
}


/* ===================================
    index 中学ポピー1年生～3年生 修正
=================================== */
.subject-list {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
    margin-top: 2rem;
}

.subject-list div {
    width:44%;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}
.subject-list div a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 1rem 0;
    font-size: 20px;
    color:#FFF;
}
.subject-list div.math{
    background-color: #109cda;
}
.subject-list div.sci{
    background-color: #f6ab00;
}
.subject-list div.eng{
    background-color: #ea500c;
}
.subject-list div.eng-standard{
    background-color: #ecaf1f;
}
.subject-list div.eng:hover,
.subject-list div.eng-standard:hover,
.subject-list div.math:hover,
.subject-list div.sci:hover {
opacity: 0.3;
transition: .3s;
background-color: rgb(70, 62, 62);
color:#FFF;
}


@media screen and (max-width: 559px) {
.subject-list div {
width:90%;
}
}
/* ===================================
   パンくずリスト
=================================== */
.breadcrumb {
    display: inline-block;
    margin: 1.2rem 0;
    padding: 0.45rem 1.2rem;
    font-size: 0.8rem;
    background-color: var(--color-border-light);
    color: var(--color-text-secondary);
    border-radius: var(--radius-pill);
}
#ud a         { color: var(--color-text-link); }
#ud a:visited { color: var(--color-text-link); font-weight: bold; }
#ud a:hover   { color: var(--color-text-primary); font-weight: bold; }


/* ===================================
  4技能スタディワーク
=================================== */
ul.workbook-number {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;        /* ← 追加：ブラウザデフォルトのpadding-leftを消す */
    margin: 1rem auto 0;
}
/* li が4つ以下のときだけ中央揃え */
ul.workbook-number:has(li:first-child:nth-last-child(-n+4)) {
    justify-content: center;
}

.workbook-number li {
    width:23%;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    padding: 0;
    font-size: 1.1rem;
    background-color:#ddd;
    margin-right: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    min-height: 48px; /* aタグのpadding上下 + フォントサイズ相当 */
  }
.workbook-number li a {
    display: block;
    text-decoration: none;
    padding: 12.8px;
    border-radius: 0.5rem;
    width: 100%;
  }

  @media screen and (max-width:559px) {
.workbook-number li {
    width: calc(33.333% - 0.6rem);  /* 3列になるよう変更 */
    white-space: nowrap;             /* 文字折り返し禁止 */
    font-size: 1rem;                 /* 必要に応じてフォントサイズ調整 */
    margin-bottom: 0.6rem;
    margin-right: 0.4rem;
    /*width:90%;
    margin-bottom: 0.6rem;
    font-size: 1.2rem;
    margin-right: 0.4rem;*/
}
}

.eigo a{
    background-color:#ea500c;
    color:#FFF;
}
.c-eigo a{
    background-color:#ecaf1f;
    color:#FFF;
}
.eigo a:hover,
.c-eigo a:hover{
    opacity: 0.3;
    transition: .3s;
    background-color: rgb(70, 62, 62);
    color:#FFF;
}