@charset "utf-8";

/* ============================================================
   外部フォント読み込み
   ============================================================ */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ============================================================
   ベースリセット
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-size: unset;
    padding: 0;
    margin: 0;
}

html {
    min-height: 100%;
    font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #444;
    background-color: #eee;
}


/* ============================================================
   学年別 背景色・見出し色
   ============================================================ */
body#sho1 { background-color: rgba(233, 85, 19, 0.4); }
body#sho2 { background-color: rgba(16, 140, 207, 0.4); }
body#sho3 { background-color: rgba(235, 110, 143, 0.4); }
body#sho4 { background-color: rgba(0, 160, 80, 0.4); }
body#sho5 { background-color: rgba(240, 140, 0, 0.4); }
body#sho6 { background-color: rgba(0, 108, 184, 0.4); }

body#sho1 main h2 { color: rgba(233, 85, 19, 0.8); }
body#sho2 main h2 { color: rgba(16, 140, 207, 0.8); }
body#sho3 main h2 { color: rgba(235, 110, 143, 0.8); }
body#sho4 main h2 { color: rgba(0, 160, 80, 0.8); }
body#sho5 main h2 { color: rgba(240, 140, 0, 0.8); }
body#sho6 main h2 { color: rgba(0, 108, 184, 0.8); }


/* ============================================================
   ヘッダー
   ============================================================ */
header {
    width: 100%;
    background-color: #fff;
    padding: 1rem;
    box-shadow: 0px 4px 5px -3px rgba(0, 0, 0, 0.3), -1px -3px 5px -3px rgba(0, 0, 0, 0.25);
}

header h1 img { width: 12.5rem; vertical-align: baseline; }

header h1 a {
    text-align: center;
    font-size: clamp(1.2rem, 2vw, 2.4rem);
    display: block;
    text-decoration: none;
    color: #f18d00;
}

header h1 br { display: none; }

header nav {
    text-align: right;
    font-size: clamp(9px, 1.5vw, 16px);
}

header nav a {
    display: inline-block;
    width: 33%;
    text-decoration: none;
    border: 4px solid #036eb8;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    color: #036eb8;
}

header nav a img { width: 1.6rem; }

/* level02 ヘッダー（下層ページ用） */
header.level02 div { max-width: 960px; margin: auto; }
header.level02 h1 { display: inline-block; width: 70%; }
header.level02 h1 a {
    font-size: clamp(0.9rem, 1.8vw, 1.6rem);
    text-align: left;
}
header.level02 h1 a img { width: 8rem; }
header.level02 nav { display: inline-block; width: 28%; }
header.level02 nav a { width: 100%; }

/* タブレット */
@media screen and (min-width: 560px) and (max-width: 959px) {
    header, main { width: 100%; }
    header h1 br { display: inline-block; }
    header nav a { padding: 0.2rem; }
    header.level02 h1 { width: 68%; }
    header.level02 h1 a { font-size: clamp(9px, 1.5vw, 16px); }
    header.level02 h1 a img { width: 6rem; }
    header.level02 h1 br { display: none; }
    header.level02 nav { width: 30%; }
}

/* スマートフォン */
@media screen and (max-width: 559px) {
    header, main { width: 100%; }
    header h1 { width: 100%; }
    header h1 br { display: inline-block; }
    header h1 a { font-size: 2rem; }
    header h1 a img { width: 8rem; }
    header nav a { width: 40%; padding: 0.2rem; }
    header.level02 { max-width: 800px; margin: auto; }
    header.level02 h1 { width: 100%; }
    header.level02 h1 a {
        font-size: clamp(0.9rem, 1vw, 1rem);
        text-align: center;
    }
    header.level02 h1 a img { width: 5.5rem; }
    header.level02 nav { width: 100%; }
}


/* ============================================================
   メインコンテンツ
   ============================================================ */
/* .page-card : ページ全体の白いカード枠（旧 .waku） */
.page-card {
    flex: 1 0 auto;
    max-width: 980px;
    width: 90%;
    margin: 2rem auto;
    background-color: #fff;
    border-radius: 1rem;
    padding: 1rem;
}

@media (max-width: 600px) {
    .page-card {
        width: 90%;
        margin: 1rem auto;
        border-radius: 0.5rem;
        padding: 0.4rem;
    }
}

@media (max-width: 320px) {
    .page-card {
        width: 96%;
        padding: 0.2rem;
    }
}

/* .content-inner : コンテンツ内側の余白枠（旧 .form） */
.content-inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 0 1rem;
}

@media (max-width: 600px) {
    .content-inner {
        width: 100%;
        padding: 0.2rem;
    }
}


/* ============================================================
   見出し
   ============================================================ */
main h2 {
    text-align: center;
    padding: 0.2rem 0;
    font-size: clamp(1.1rem, 2vw, 2rem);
}

main h3 {
    text-align: center;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    padding: 0.2rem;
}

main h4 {
    text-align: center;
    font-weight: bold;
    font-size: clamp(1rem, 2.4vw, 1.6rem);
}

@media screen and (max-width: 559px) {
    main h2 {
        padding: 0.1rem 0;
        font-size: clamp(0.9rem, 1.8vw, 1.6rem);
    }
    main h3 {
        font-size: clamp(1.2rem, 1.4vw, 1.6rem);
    }
}

/* 教科別 h3 カラー */
main h3.lang { color: rgba(239, 133, 140, 1); border-bottom: 1px dotted rgba(239, 133, 140, 1); }
main h3.math { color: rgba(106, 159, 212, 1); border-bottom: 1px dotted rgba(106, 159, 212, 1); }
main h3.eng  { color: rgba(142, 128, 182, 1); border-bottom: 1px dotted rgba(142, 128, 182, 1); }
main h3.sci  { color: rgba(132, 210, 151, 1); border-bottom: 1px dotted rgba(132, 210, 151, 1); }
main h3.soc  { color: #f7ab00;                border-bottom: 1px dotted rgba(247, 171, 0, 1); }
main h3.test { color: #696969;                border-bottom: 1px dotted rgb(8, 8, 8); }


/* ============================================================
   パンくずリスト（旧 .pankuzu）
   ============================================================ */
.breadcrumb p {
    font-size: clamp(0.6rem, 1.4vw, 0.8rem);
    margin: 1rem;
    background-color: #eee;
    padding: 0 1.4rem;
    border-radius: 50px;
    text-align: left;
}

.breadcrumb a {
    color: #0066c0;
}

.breadcrumb a:hover {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.breadcrumb a:visited {
    text-decoration: none;
    color: #0066c0;
    font-weight: bold;
}


/* ============================================================
   前年度案内（旧 #sakunen）
   ============================================================ */
.prev-year-notice {
    font-size: clamp(0.7rem, 1.7vw, 0.9rem);
    text-align: center;
    margin: 1rem 0 2rem;
}

.prev-year-notice a         { color: #0066c0; }
.prev-year-notice a:hover   { text-decoration: none; color: #333; font-weight: bold; }
.prev-year-notice a:visited { text-decoration: none; color: #0066c0; }


/* ============================================================
   コンテンツ列レイアウト（旧 .flex_ud / .one / .two）
   ============================================================ */
.eigo-columns {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
    margin-top:1rem;
}

/* .eigo-col : 列内の各ブロック（旧 .one / .two） */
.eigo-col {
    padding: 2%;
    text-align: center;
    width: 100%;
}

@media (min-width: 600px) {
    .eigo-col {
        flex: 1;
    }
}


/* ============================================================
   リンクリスト（旧 ul.work-wrap / li.eigo / li.ddd）
   ============================================================ */
ul.item-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

/* 番号バッジ（span） */
ul.item-list span {
    border: 1px solid #fff;
    border-radius: 2px;
    font-weight: bold;
    color: #fff;
    vertical-align: middle;
}

/* リンクあり項目（旧 li.eigo） */
ul.item-list li.eigo-item {
    max-width: 100%;
    display: block;
    text-align: center;
    border-radius: 0.3rem;
    padding: 0.4rem;
    font-size: clamp(0.8rem, 1.7vw, 1rem);
    margin: 0 1rem 1rem;
    background-color: #eb6153;
    cursor: pointer;
}

ul.item-list li.eigo-item a {
    display: block;
    text-decoration: none;
    color: #fff;
}

ul.item-list li.eigo-item:hover {
    opacity: 0.3;
    transition: 0.3s;
    background-color: rgb(70, 62, 62);
}

/* 未公開項目（旧 li.ddd） */
ul.item-list li.eigo-item--disabled {
    max-width: 100%;
    display: block;
    text-align: center;
    border-radius: 0.3rem;
    padding: 0.4rem;
    font-size: clamp(0.8rem, 1.7vw, 1rem);
    margin: 0 1rem 1rem;
    background-color: #ddd;
    color: #666;
    cursor: default;
}


/* ============================================================
   ソングページ 歌詞エリア（旧 .song）
   ============================================================ */
.song {
    text-align: center;
    font-family: "Kiwi Maru", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    margin: 0.6rem 0 3rem;
    margin-top: 2rem;
}

.song p {
    margin-bottom: 5px;
    font-weight: bold;
}

.song p > span {
    font-size: 80%;
    font-weight: normal;
}

/* くりかえし表示 */
.song span.rep {
    color: #00a5a0;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
}

/* 拍手などの案内テキスト */
.song span.guide {
    color: #666;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
}

/* マーカー強調 */
.song span.marker {
    background-color: #e4f78f;
    display: inline-block;
    padding: 0.1rem 0.2rem;
    line-height: 1.5;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
}

.song img {
    margin-right: 0.3rem;
}

/* オーディオプレーヤーのレスポンシブ対応 */
audio {
    display: block;
    width: 100%;
    margin: 0.8rem auto;
    max-width: 500px;
}

@media screen and (max-width: 559px) {
    .song {
        font-size: clamp(0.8rem, 2vw, 1.2rem);
margin: 1.6rem 0 1rem 0.6rem;
    }
    .song span.rep {
        color: #583f99;
        font-size: clamp(0.8rem, 2vw, 1.2rem);
    }
    audio {
        width: 100%;
        max-width: 100%;
    margin: 0.4rem auto;
    }
}

@media (max-width: 320px) {
    .song { margin: 0.6rem 0 1rem; }
    audio {
        width: 100%;
        max-width: 100%;
    }
}


/* ============================================================
   アコーディオン（歌詞・日本語訳）
   ============================================================ */

/* サマリー行：コンパクトなテキストリンク風 */
.accordion-summary {
    display: block;
    list-style: none;
    max-width: 500px;
    margin: 0 auto 7px;
    /*padding: 0.6rem 1rem 0.6rem 2.4rem;*/
    padding: 1rem 2rem;
    border-bottom: 2px solid #e6e4e4;
    text-align: left;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    color: #2d2d2d;
    font-weight: normal;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}
@media screen and (max-width: 559px) {
.accordion-summary {
    padding: 0.6rem 1rem 0.6rem 2.4rem;
}
}
.accordion-summary::-webkit-details-marker { display: none; }

/* ▶ 矢印アイコン（右端） */
.accordion-summary::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #2d2d2d;
    border-bottom: 2px solid #2d2d2d;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s;
}

/* 開いた状態：矢印を上向きに */
.js-details[open] > .accordion-summary,
.accordion-summary.is-active {
    border-bottom: none;
    color:#ddd;
}

.accordion-summary.is-active::after,
.js-details[open] > .accordion-summary::after {
    transform: translateY(-30%) rotate(225deg);
}

/*.accordion-summary:hover {
    color: #333;
    border-bottom-color: #aaa;
}

/* .btn はテキストラベルとして残す（アイコン不要） */
.accordion-summary .btn {
    /* 装飾なし。テキストのみ表示 */
}

/* アコーディオン本文（旧 .details-content） */
.accordion-body {
    max-width: 500px;
    margin: 0 auto;
    padding: 16px 20px;
    margin-bottom: 7px;
    border-bottom: 2px solid #e6e4e4;
    line-height: 1.8rem;
}

.accordion-body p {
    margin: 0 0 20px;
    color: #2d2d2d;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    text-align: left;
    font-weight: normal;
    padding: 0 2rem 1rem;
}

.accordion-body p:last-of-type {
    margin: 0 0 12px;
}

/* アコーディオン内の閉じるボタン */
.accordion-body .close-btn {
    display: block;
    margin: 0 auto;
    padding: 8px 32px;
    background: #00a5a0;
    color: #fff;
    text-align: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;

}

.accordion-body .close-btn:hover { opacity: 0.8; }

/* アコーディオン内コンテンツラッパー（旧 .content） */
.accordion-inner {
    margin-bottom: 1rem;
}


/* ============================================================
   ふりつけ動画リンク（旧 .furituke / #set）
   ============================================================ */
.choreography-link {
    margin: 0 auto 7px;
    max-width: 500px;
    border-bottom: 2px solid #e6e4e4;
    text-align: left;
    position: relative;
    /*padding: 0.6rem 1rem 0.6rem 2.4rem;*/
    padding: 1rem 2rem;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    color: #2d2d2d;
    font-weight: normal;
}

.choreography-link a { color: #0066c0; }
.choreography-link a:hover   { text-decoration: none; color: #333; font-weight: bold; }
.choreography-link a:visited { text-decoration: none; color: #0066c0; }


/* ============================================================
   フッター
   ============================================================ */
footer {
    position: relative;
    width: 100%;
    text-align: center;
    padding: 0;
    z-index: 100;
}

footer p { text-align: center; padding:0;margin:0;}


/* ============================================================
   マージンユーティリティ
   ============================================================ */
.mt1 { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }
.mt3 { margin-top: 3rem; }
.mb1 { margin-bottom: 0.8rem; }
.mb2 { margin-bottom: 2rem; }
.mb3 { margin-bottom: 3rem; }
.mb4 { margin-bottom: 4rem; }
.mb5 { margin-bottom: 5rem; }
.mb8 { margin-bottom: 8rem; }


@media print {
    /* 印刷時に不要な要素を隠す */
header, footer {
    display: none !important;
}
  /* レイアウト調整 */
body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 12pt; /* 印刷に適したサイズ */
    color: #000;
    background: #fff;
    /* ページ全体をグレースケールに*/
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    zoom: 100%;
}
body#sho1,body#sho2{
    background-color: #fff;}
  /* リンクのURLを表示する */
a:after {
    content: " ( " attr(href) " )";
    font-size: 70%;
    color: #0066c0;
    font-family: 'roboto','メイリオ','Meiryo','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','Osaka','ＭＳ Ｐゴシック',sans-serif;
}
  header.level02,
  footer,
  .breadcrumb,
  .level02 nav,
  .eigo-item--disabled {
    display: none !important;
  }
  .page-card,
  .content-inner {
    margin: 0;
    padding: 0;
    margin:auto;
  }
  .eigo-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 8mm;
  }
  .eigo-col {
    flex: 1 1 45%;
    min-width: 45%;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .item-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .item-list li {
    margin-bottom: 4mm;
  }
ul.item-list li.eigo-item {
    background-color: #eee;
}
ul.item-list li.eigo-item a {
    color: #000;
}
ul.item-list span {
    border: 1px solid #454545;
    color: #454545;
}
}