@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');
/*
------------------------------
(C)NetlearningGroup master CSS
------------------------------
*/

:root {
    --font-family:  "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "Segoe UI", "verdana", sans-serif;

    --color-text-base: #333333;

    --color-black: #333333;
    --color-white: #ffffff;
    --color-gray-50: #f9f9f9;
    --color-gray-100: #e8e8e8;
    --color-gray-300: #bababa;
    --color-gray-500: #949494; /*白背景でAA準拠*/
    --color-gray-700: #767676; /*白背景でAAA準拠*/
    --color-gray-900: #4a4a4a;

    --font-weight-heavy: 700;
    --font-weight-bold: 500;
    --font-weight-regular: 400;
    --font-weight-light: 300;

    --font-size-s: 1.4rem;
    --font-size-m: clamp(1.4rem, 2vw, 1.6rem);
    --font-size-l: clamp(1.6rem, 2vw, 1.8rem);
    --font-size-xl: clamp(1.8rem, 2vw, 2rem);

    --font-size-h1: clamp(2.8rem, 5vw, 3.6rem);
    --font-size-h2: clamp(2.4rem, 4vw, 3.2rem);
    --font-size-h3: clamp(2rem, 3vw, 2.8rem);
    --font-size-h4: clamp(1.8rem, 3vw, 2.4rem);
    --font-size-h5: clamp(1.6rem, 2vw, 2rem);

    --size-base: 0.8rem; /* 基準になるスペース */
    --size-column: var(--size-04); /* カラム間の余白 */

    --size-005: calc(var(--size-base) * 0.5);
    --size-01: calc(var(--size-base) * 1);
    --size-02: calc(var(--size-base) * 2);
    --size-03: calc(var(--size-base) * 3);
    --size-04: calc(var(--size-base) * 4);
    --size-05: calc(var(--size-base) * 5);
    --size-06: calc(var(--size-base) * 6);
    --size-07: calc(var(--size-base) * 7);
    --size-08: calc(var(--size-base) * 8);
    --size-09: calc(var(--size-base) * 9);
    --size-10: calc(var(--size-base) * 10);
}


*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    overflow-y: auto;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    line-height: 1.8;
    font-size: var(--font-size-m);
    color: var(--color-text-base);
    font-family: var(--font-family);
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

ol {
    counter-reset: item;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

p a {
    text-decoration: underline;
    color: var(--color-primary-500, #001195);
}

p a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
select,
textarea {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

textarea {
    resize: vertical;
}

.l-contents {
    margin: 0 auto;
    padding: 0 1.6rem;
    width: clamp(375px, 90%, 1600px);
    position: relative;
}

.l-section {
    padding-top: var(--size-10);
    padding-bottom: var(--size-10);
}

.l-section > :first-child {
    margin-top: 0;
}

/* 余白 */
.u-mt-0 {
    margin-top: 0!important;
}

.u-mb-0 {
    margin-bottom: 0!important;
}

.u-pt-0 {
    padding-top: 0!important;
}

.u-pb-0 {
    padding-bottom: 0!important;
}

/* 別窓アイコン */
.c-blank {
    width: 1em;
    padding: 0 var(--size-005);
    display: inline-block;
}

/* エリア */
.l-area {
    margin-top: clamp(var(--size-05), 2vw, var(--size-10));
    padding-bottom:  clamp(var(--size-05), 2vw, var(--size-10));
}

/* テキスト */
.u-mt-text {
    margin-top: var(--size-03);
}

.u-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.c-text p {
    margin-top: var(--size-02);
}

.c-text p:first-child {
    margin-top: 0;
}

.u-fs-xl {
    font-size: var(--font-size-xl);
}

.u-fs-l {
    font-size: var(--font-size-l);
}

.u-fs-m {
    font-size: var(--font-size-m);
}

.u-fs-s {
    font-size: var(--font-size-s);
}

.u-fw-heavy {
    font-weight: var(--font-weight-heavy);
}

.u-fw-bold {
    font-weight: var(--font-weight-bold);
}

.u-fw-regular {
    font-weight: var(--font-weight-regular);
}

.u-fw-light {
    font-weight: var(--font-weight-light);
}

.u-ta-left {
    text-align: left;
}

.u-ta-center {
    text-align: center;
}

.u-ta-right {
    text-align: right;
}

/* ブロック */
.u-inblk {
    display: inline-block;
}

.u-blk {
    display: block;
}


/* リスト */
.u-mt-list {
    margin-top: var(--size-03);
}

.c-list__item {
    margin-bottom: var(--size-02);
}

.c-list__item:last-child {
    margin-bottom: 0;
}

.c-list .c-list {
    margin-top: var(--size-02);
    margin-left: var(--size-04);
}

.u-marker-dot {
    position: relative;
    padding-left: var(--size-02);
}

.u-marker-dot::before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: 1.5em;
    line-height: 1;
    color: var(--color-text-primary), #333;
}

.u-marker--num::before {
    counter-increment: item;
    content: counter(item)'.';
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary), #333;
    padding-right: var(--size-01);
}

.u-marker-asterisk::before {
    content: "※";
}

/* カラム */
.l-column {
    display: flex;
    gap: var(--size-column);
    flex-wrap: wrap;
}

.l-column__box {
    box-sizing: border-box;
}

.l-column[data-cols="2"] > .l-column__box {
    flex: 0 0 calc((100% - (var(--size-column) * 1)) / 2);
    max-width: calc((100% - (var(--size-column) * 1)) / 2);
}

.l-column[data-cols="3"] > .l-column__box {
    flex: 0 0 calc((100% - (var(--size-column) * 2)) / 3);
    max-width: calc((100% - (var(--size-column) * 2)) / 3);
}

.l-column[data-cols="4"] > .l-column__box {
    flex: 0 0 calc((100% - (var(--size-column) * 3)) / 4);
    max-width: calc((100% - (var(--size-column) * 3)) / 4);
}

.l-column[data-cols="5"] > .l-column__box {
    flex: 0 0 calc((100% - (var(--size-column) * 4)) / 5);
    max-width: calc((100% - (var(--size-column) * 4)) / 5);
}

.u-flex-01 {
    flex: 1!important;
    max-width: 100%!important;
}

.u-flex-02 {
    flex: 2!important;
    max-width: 100%!important;
}

.u-flex-03 {
    flex: 3!important;
    max-width: 100%!important;
}

.u-fd-rev {
    flex-direction: row-reverse;
}

/* 見出し */
.c-head {
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
}

.u-fs-h1 {
    font-size: var(--font-size-h1);
}

.u-my-h1 {
    margin-top: var(--size-10);
    margin-bottom: var(--size-04);
}

.u-fs-h2 {
    font-size: var(--font-size-h2);
}

.u-my-h2 {
    margin-top: var(--size-08);
    margin-bottom: var(--size-03);
}

.u-fs-h3 {
    font-size: var(--font-size-h3);
}

.u-my-h3 {
    margin-top: var(--size-07);
    margin-bottom: var(--size-03);
}

.u-fs-h4 {
    font-size: var(--font-size-h4);
}

.u-my-h4 {
    margin-top: var(--size-06);
    margin-bottom: var(--size-02);
}

.u-fs-h5 {
    font-size: var(--font-size-h5);
}

.u-my-h5 {
    margin-top: var(--size-05);
    margin-bottom: var(--size-02);
}


/* テーブル */
.u-mt-tbl {
    margin-top: var(--size-05);
}

.c-tbl {
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
}

.c-tbl--ptn01 {
    table-layout: fixed; 
    min-width: 600px;
}

.c-tbl__ttl,
.c-tbl__dtl {
    border: 1px solid var(--color-gray-100);
    padding: 0.75em 1em;
    text-align: left;
    vertical-align: top;
}

.c-tbl__ttl {
    font-weight: var(--font-weight-bold);
}

.c-tbl--ptn02 .c-tbl__ttl {
    min-width: clamp(calc(var(--size-01) *15), 2vw, calc(var(--size-02) *10));   
    width: 20%;
}


/* タブ */
.tab-wrap {
    margin-top: var(--size-05);
}

.tab-wrap .tab-wrap {
    margin-top: var(--size-05);
}

.tab-wrap .tab-list {
    display: flex;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}

.tab-wrap .tab-list .tab-btn {
    font-weight: 500;
    transition: background-color 0.3s;
    padding: var(--size-02);
    border: none;
    cursor: pointer;
    font-size: var(--font-size-l);
}

.tab-wrap .tab-panel {
    display: none;
    margin-top: var(--size-03);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tab-wrap .tab-panel[aria-hidden="false"] {
    display: block;
    animation: fade-in 0.8s;
    opacity: 1;
}

.tab-wrap .tab-panel .tab-panel {
    padding: 0;
}

/* tab-ptn-01 */
.tab-wrap.tab-ptn-01 > .tab-list {
    display: flex;
    justify-content: left;
    gap: 1.6rem;
    border-bottom: solid 3px var(--color-gray-100);
    line-height: 1.6;
}

.tab-wrap.tab-ptn-01 > .tab-list .tab-btn {
    padding-top: var(--size-02);
    padding-bottom: var(--size-02);
    padding-right: var(--size-03);
    padding-left: var(--size-03);
    background-color: transparent;
    font-weight: var(--font-weight-bold, 500);
    color: var(--color-gray-700);
    border-bottom: solid 3px var(--color-gray-100);
    cursor: pointer;
    outline: none;
    flex: none;
    margin-bottom: -0.3rem;
    width: auto;
}

.tab-wrap.tab-ptn-01 > .tab-list .tab-btn[aria-selected="true"] {
    position: relative;
    border-bottom: solid 3px var(--color-primary-500, #333);
    color: var(--color-primary-500, #333);
    font-weight: var(--font-weight-bold, 500);
}

/* tab-ptn-02 */
.tab-wrap.tab-ptn-02 > .tab-list {
    justify-content: size-between;
}

.tab-wrap.tab-ptn-02 > .tab-list .tab-btn {
    color: var(--color-gray-700);
    border-bottom: solid 3px var(--color-gray-100, #e8e8e8);
    width: 100%;
    background-color: transparent;
    flex: 1;
}

.tab-wrap.tab-ptn-02 > .tab-list .tab-btn[aria-selected="true"] {
    border-bottom: solid 3px var(--color-primary-500, #333);
    font-weight: var(--font-weight-bold, 500);
    color: var(--color-text-base);
}


/* カード */
.c-card {
    margin-top: var(--size-05);
}

.c-card__item {
    display: flex;
    flex-direction: column;
    border: solid 1px var(--color-gray-100);
    position: relative;
}

.c-card__thum {
    overflow: hidden;
}

.c-card__thum img {
    transition: all .3s ease;
    width: 100%;
}

a.c-card__item:hover .c-card__thum img {
    transform: scale(1.05);
}

.c-card__cnt {
    display: flex;
    flex-direction: column;
    gap: var(--size-02);
}

.c-card--thum .c-card__cnt {
    padding: var(--size-03) var(--size-04);
}

.c-card--text .c-card__cnt {
    padding: var(--size-04);
}

.c-card__ttl > :is(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
}


/* ボタン */
.u-mt-btn {
    margin-top: var(--size-03);
}

.c-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 32rem;
    font-weight: var(--font-weight-bold);
}

.c-btn--pill {
    border-radius: 9999px;
    padding-top: var(--size-02);
    padding-bottom: var(--size-02);
    padding-left: var(--size-03);
    padding-right: var(--size-03);
    transition: 0.3s;
}

.c-btn--pill.c-btn--primary {
    background-color: var(--color-primary-500, #333);
    color: var(--color-white);
    border: solid 2px transparent;
}

.c-btn--pill.c-btn--sub {
    background-color: var(--color-white);
    color: var(--color-primary-500, #333);
    border: solid 2px var(--color-primary-500, #333);
}

.c-btn--pill.c-btn--primary:hover {
    background-color: var(--color-white);
    color: var(--color-primary-500, #333);
    border: solid 2px var(--color-primary-500, #333);
}

.c-btn--pill.c-btn--sub:hover {
    background-color: var(--color-primary-500, #333);
    color: var(--color-white);
    border: solid 2px var(--color-white);
}



.item-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* テキストリンク */
.link-wrap {
    margin-top: var(--size-02);
}

.link-wrap .link-txt span {
    position: relative;
    font-weight: var(--font-weight-bold);
    display: inline-block;
}

/* パンくずリスト */
.c-bcrumb {
    font-size: var(--font-size-s);
    margin: var(--size-005) 0;
    overflow-x: auto
}

.c-bcrumb__list {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto
}

.c-bcrumb__item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.c-bcrumb__item:not(:last-child)::after {
    content: "›";
    color: var(--color-gray-500);
    margin: 0 var(--size-03);
}

.c-bcrumb__link {
    text-decoration: underline;
    color: var(--color-primary-500, #001195);
}

.c-bcrumb__link:hover {
    text-decoration: none;
}

.c-bcrumb__current {
    color: var(--color-gray-700);
    font-weight: var(--font-weight-bold);
    pointer-events: none;
}

/* アコーディオン */

.acd-wrap {
    margin-top: var(--size-05);
}

.acd-wrap .acd-ttl {
    position: relative;
    background: none;
    border: none;
    font-weight: var(--font-weight-bold);
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.acd-wrap .acd-ttl::after {
    content: url(../img/under_arrow.png);
    width: var(--size-03);
    height: var(--size-03);
    position: absolute;
    right: var(--size-03);
    transition: all 0.3s;
    top: 50%;
  transform: translateY(-50%) rotate(0deg);
}

.acd-wrap .acd-ttl[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(180deg);
}

.acd-wrap .acd-item[hidden] {
    display: none;
}


/* アコーディオン01 */
.acd-wrap.acd-ptn-01 .acd-box {
    border-top: solid 1px var(--color-gray-100);
}

.acd-wrap.acd-ptn-01 .acd-box:last-of-type {
    border-bottom: solid 1px var(--color-gray-100);
}

.acd-wrap.acd-ptn-01 .acd-ttl {
    padding: var(--size-02);
}

.acd-wrap.acd-ptn-01 .acd-item .acd-dtl {
    padding: 0 var(--size-02) var(--size-03);
}


@media print,screen and (max-width:929px){
.l-column {
    flex-direction: column;
}

.l-column[data-cols="2"] > .l-column__box,
.l-column[data-cols="3"] > .l-column__box,
.l-column[data-cols="4"] > .l-column__box,
.l-column[data-cols="5"] > .l-column__box {
    max-width: 100%;
    flex: 1;
    width: 100%;
}
}