/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 27 2024 | 02:04:34 */
/* 以下入試広報室奨学金tableレイアウト */
.item-th0 { grid-area: area-th0; border: 1px solid; border-color: #95989a; }  /* 初年度入学金 */  /* .item-th0にarea-th0という名前をつける */
.item-th1 { grid-area: area-th1; border: 1px solid; border-color: #95989a; padding-top:1.5rem; }  /* 通常 */
.item-th2 { grid-area: area-th2; border: 1px solid; border-color: #95989a; padding-top:0.5rem; }  /* 特奨AC */
.item-th3 { grid-area: area-th3; border: 1px solid; border-color: #95989a; padding-top:0.5rem; }  /* 特奨B */
.item-tr1 { grid-area: area-tr1; border: 1px solid; border-color: #95989a; padding-top:0.4rem; }  /* 入学金 */
.item-tr2 { grid-area: area-tr2; border: 1px solid; border-color: #95989a; padding-top:2rem; }  /* 授業料 */
.item-tr3 { grid-area: area-tr3; border: 1px solid; border-color: #95989a; padding-top:4rem; }  /* 受託徴収金 */
.item-tr4 { grid-area: area-tr4; border: 1px solid; border-color: #95989a; padding-top:1.5rem; }  /* 学友会 */
.item-tr5 { grid-area: area-tr5; border: 1px solid; border-color: #95989a; padding-top:1.5rem; }  /* 後援会 */
.item-tr6 { grid-area: area-tr6; border: 1px solid; border-color: #95989a; padding-top:0.5rem; }  /* 合計 */
.item-td1 { grid-area: area-td1; border: 1px solid; border-color: #95989a; }

.item-td2 { grid-area: area-td2; border: solid; border-width: 1px 0px 1px 1px; border-color: #95989a; }
.item-td3 { grid-area: area-td3; border: solid; border-width: 1px 1px 1px 0px; border-color: #95989a; }
.item-td4 { grid-area: area-td4; border: solid; border-width: 1px 0px 1px 1px; border-color: #95989a; }
.item-td5 { grid-area: area-td5; border: solid; border-width: 1px 1px 1px 0px; border-color: #95989a; }
.item-td6 { grid-area: area-td6; border: solid; border-width: 1px 0px 1px 1px; border-color: #95989a; }
.item-td7 { grid-area: area-td7; border: solid; border-width: 1px 1px 1px 0px; border-color: #95989a; }
.item-td8 { grid-area: area-td8; border: 1px solid; border: 1px solid; border-color: #95989a; padding-top:1rem; }
.item-td9 { grid-area: area-td9; border: 1px solid; border: 1px solid; border-color: #95989a; padding-top:1rem; }

/* sp-view */
@media only screen and (max-width: 767px) {
.item-tr2 { grid-area: area-tr2; border: 1px solid; border-color: #95989a; padding-top:5rem; }  /* 授業料 */
.item-tr3 { grid-area: area-tr3; border: 1px solid; border-color: #95989a; padding-top:0.2rem; }  /* 受託徴収金 */
.item-tr4 { grid-area: area-tr4; border: 1px solid; border-color: #95989a; padding-top:0.3rem; }  /* 学友会 */
.item-tr5 { grid-area: area-tr5; border: 1px solid; border-color: #95989a; padding-top:0.3rem; }  /* 後援会 */
.item-tr6 { grid-area: area-tr6; border: 1px solid; border-color: #95989a; padding-top:0.1rem; }  /* 合計 */
.item-td2 { grid-area: area-td2; border: solid; border-width: 1px 1px 0px 1px; border-color: #95989a; }
.item-td3 { grid-area: area-td3; border: solid; border-width: 0px 1px 1px 1px; border-color: #95989a; }
.item-td4 { grid-area: area-td4; border: solid; border-width: 1px 1px 0px 1px; border-color: #95989a; }
.item-td5 { grid-area: area-td5; border: solid; border-width: 0px 1px 1px 1px; border-color: #95989a; }
.item-td6 { grid-area: area-td6; border: solid; border-width: 1px 1px 0px 1px; border-color: #95989a; }
.item-td7 { grid-area: area-td7; border: solid; border-width: 0px 1px 1px 1px; border-color: #95989a; }
.item-td8 { grid-area: area-td8; border: 1px solid; border: 1px solid; border-color: #95989a; padding-top:1rem; }
.item-td9 { grid-area: area-td9; border: 1px solid; border: 1px solid; border-color: #95989a; padding-top:1rem; }
}


.item-td10 { grid-area: area-td10; border: 1px solid; border: 1px solid; border-color: #95989a; }
.item-td11 { grid-area: area-td11; border: 1px solid; border: 1px solid; border-color: #95989a; }
.item-td12 { grid-area: area-td12; border: 1px solid; border: 1px solid; border-color: #95989a; }

.container {
    display: grid;
    text-align: center;
    grid-template-columns: 10.5% 10.5% 13% 13% 13% 13% 13% 13%;
    grid-template-rows: 5rem auto auto 5rem 5rem auto; /* 6rem 8rem 8rem 8rem 8rem 8rem; */
    grid-template-areas:"area-th0 area-th0 area-th1  area-th1  area-th2  area-th2  area-th3  area-th3"
                        "area-tr1 area-tr1 area-td1  area-td1  area-td1  area-td1  area-td1  area-td1"
                        "area-tr2 area-tr2 area-td2  area-td3  area-td4  area-td5  area-td6  area-td7"
                        "area-tr3 area-tr4 area-td8  area-td8  area-td8  area-td8  area-td8  area-td8"
                        "area-tr3 area-tr5 area-td9  area-td9  area-td9  area-td9  area-td9  area-td9"
                        "area-tr6 area-tr6 area-td10 area-td10 area-td11 area-td11 area-td12 area-td12";
    grid-gap: 2px;
    color: #444;
}


@media only screen and (max-width: 767px) {
.container {
    display: grid;
    text-align: center;
    grid-template-columns: 8% 10.5% 13% 13% 13% 13% 13% 13%;
    grid-template-rows: 5rem 3rem auto auto 5rem 5rem auto; /* 6rem 8rem 6rem 6rem 8rem 8rem 8rem; */
    grid-template-areas:"area-th0 area-th0 area-th1  area-th1  area-th2  area-th2  area-th3  area-th3"
                        "area-tr1 area-tr1 area-td1  area-td1  area-td1  area-td1  area-td1  area-td1"
                        "area-tr2 area-tr2 area-td2  area-td2  area-td4  area-td4  area-td6  area-td6"
                        "area-tr2 area-tr2 area-td3  area-td3  area-td5  area-td5  area-td7  area-td7"
                        "area-tr3 area-tr4 area-td8  area-td8  area-td8  area-td8  area-td8  area-td8"
                        "area-tr3 area-tr5 area-td9  area-td9  area-td9  area-td9  area-td9  area-td9"
                        "area-tr6 area-tr6 area-td10 area-td10 area-td11 area-td11 area-td12 area-td12";
    grid-gap: 2px;
    color: #444;
}
.spfont { font-size:1.3rem; }
}

.thcolor { font-size: 1em !important; color: #fff  !important; background-color: #4169e1 !important; line-height:1.9rem; }
.tdcolor { color: #000 !important; background-color: #fafafa !important; }
.link { text-decoration: underline; color: #0000EE; font-weight: normal; }
/* 以上入試広報室奨学金tableレイアウト */


/*以下教務css*/
/*以下detailsタグによるアコーディオンスタイル設定*/
summary { position: relative; display: block; /* 矢印を消す */ padding: 10px 10px 10px 30px; /* アイコンの余白を開ける */ cursor: pointer; /* カーソルをポインターに */ font-weight: bold; background-color: #e2f0f7; transition: 0.2s; }
summary:hover { background-color: #ccebfb; }
summary::-webkit-details-marker { display: none; /* 矢印を消す */ }

/* 疑似要素でアイコンを表示 */
summary:before,
summary:after { content: ""; margin: auto 0 auto 10px; position: absolute; top: 0; bottom: 0; left: 0; }
summary:before { width: 16px; height: 16px; border-radius: 4px; background-color: #1da1ff; }
summary:after { left: 6px; width: 5px; height: 5px; border: 4px solid transparent; border-left: 5px solid #fff; box-sizing: border-box; transition: .1s; }

 /* オープン時のスタイル */
details[open] summary { background-color: #ccebfb; }
details[open] summary:after { transform: rotate(90deg); /* アイコンを回転 */ left: 4px; /* 位置を調整 */ top: 5px; /* 位置を調整 */ }

 /* アニメーション */
details[open] .details-content { animation: fadeIn 0.5s ease; }
@keyframes fadeIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: none; } }
/*以上detailsタグによるアコーディオンスタイル設定*/


/*以下table配置の異なるレイアウト(PC/SP)設定*/
 /* PC版のテーブル */
    .responsive-table { width: 100%; border-collapse: collapse; }
    .responsive-table th, .responsive-table td { border: 1px solid #ccc; padding: 10px; text-align: left; }

 /* スマホ版のスタイル */
    @media (max-width: 768px) { 
      .responsive-table { border: 0; }
      .responsive-table thead { display: none; /* ヘッダーを非表示 */ }
      .responsive-table tbody tr { display: flex; flex-direction: column; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; padding: 10px; }
      .responsive-table td { display: flex; justify-content: space-between; border: 0; padding: 5px 0; }
      .responsive-table td::before { content: attr(data-label); /* 項目名を表示 */ font-weight: bold; margin-right: 10px; }
    }
/*以下table配置の異なるレイアウト(PC/SP)設定*/


/* 以下偶数行に背景色を設定(縞模様にする) */
    table.striped { width: 100%; border-collapse: collapse; }
    table.striped th, 
    table.striped td { padding: 10px; border: 1px solid #ddd; }
    /* 偶数行に背景色を設定 */
    table.striped tbody tr:nth-child(even) th,
    table.striped tbody tr:nth-child(even) td { background: rgba(17, 150, 103, .1); }
    /* 奇数行は白（デフォルト） */
    table.striped tbody tr:nth-child(odd) th,
    table.striped tbody tr:nth-child(odd) td { background: white; }
/* 以上偶数行に背景色を設定(縞模様にする) */