@charset "utf-8";
section.section-full {
    width:100%;
}
section.section {
    padding:0 2rem;
    max-width:var(--max-width);
}

.w-100 {
    width: 100px !important;
}
.w-150 {
    width: 150px !important;
}
.w-200 {
    width: 200px !important;
}
.w-300 {
    width: 300px !important;
}
.chk_box { display: block; position: relative; padding-left: 25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; bottom:0; }
.chk_box input[type="radio"] { display: none; }
.chk_box > .on { width: 20px; height: 20px; background: #ddd; position: absolute; bottom: 0; left: 0;  }
.chk_box input[type="radio"]:checked + .on { background: #333; }
.chk_box > .on:after { content: ""; position: absolute; display: none; }
.chk_box input[type="radio"]:checked + .on:after { display: block; }
.chk_box > .on:after { width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 6px; top: 2px; }


div#stnWrap {
    width:100%;
}
section.stnWrap {
    padding:0 2rem;
    max-width: var(--max-width);
    margin:0 auto;
}
section.stnfullWrap {
    width:100%;
}
div.stnBtnWrap {
    padding:1rem 0;
    display: flex; gap: 1rem;
}

header.stnHeader {
    width:100%; background: #e8f0fe;
}
header.stnHeader > section.stnHeader {
    padding:1rem 2rem;
    max-width: var(--max-width);
    margin:0 auto;
    display: flex; gap: 2rem; align-items: center;
}
header.stnHeader > section.stnHeader > article.headerTitle {
    display: flex; flex: 1; justify-content: center; align-items: center;
    font-size:.875rem; color:#666;
}
header.stnHeader > section.stnHeader > article.headerTitle > strong {
    font-size: 1rem; padding: 0 0 0 0; margin:0 0 0 0 ; font-weight: 500; padding:0 1rem; border-bottom:2px solid #ccc;
}
section.stnWrap h3 { font-weight: 500;
    font-family: var(--FontFamily); grid-column: 1 / 3
}
section.stnWrap h3 > i,
section.stnFooterWrap h3 > i {
    font-size:1rem; color: #135dba;
}

section.stnWriteWrap {
    display: grid; grid-template-columns:1fr 1fr; column-gap: 2rem;
}

div.stnFooterWrap {
    display: grid; grid-template-columns:1fr 1fr; column-gap: 2rem;
    padding:0 2rem;
    max-width: var(--max-width);
    margin:0 auto;
}

.spinner{display:flex;align-items:center;gap:8px;margin:6px 0; justify-content:space-between; width:100%; flex-wrap: wrap; }
.spinner label{min-width:90px}
.spinner .ctrl{display:flex;align-items:center;gap:4px}
.spinner button{width:32px;height:32px;cursor:pointer}
.spinner .ctrl { width:100%; }
.spinner > div.small { flex: 1; flex-basis: 100%; flex-grow: 1;  }
.spinner > label { font-size:.875rem; }


.pagination {
    text-align: center;
    width:100%;
    padding:50px 0;
    display: inline-block;
}

.pagination a {
    display: inline-block;
    line-height: 2rem;
    min-width: 40px;
    border:1px solid #a8a8a8;
    color: black;
    font-size:.8rem;
    text-decoration: none;
}

.pagination a.active {
    background-color: #eaeaea;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.youtube-wrap {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
}

.youtube-wrap iframe {
    border:0;
    width: 100%;
    height: 100%;
    display: block;
}
.youtube-thumb {
    width: 100%;
    height: 100%;
}
.youtube-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


div.video-buttons { display: grid; grid-template-columns: repeat(6, 1fr); }
div.video-buttons > button {
    cursor: pointer;
    border:1px solid #ebebeb;
    padding:1rem 1rem;
    font-size:12px; font-weight: 400;
}
div.video-buttons > button.active {
    background: #FFF;
}

@media (max-width: 768px) {
    div.video-buttons { display: grid; grid-template-columns: repeat(3, 1fr); }
}