@charset "UTF-8";
/* ---- 基本設定 -------------------------------- */
/* ---- CSS Containment ---------------- */
main section,
main .products_mainvisual,
aside,
footer {
 content-visibility: auto;
 contain: content;
}
/* ---- レイアウト・マージン -------------------------------- */
.products_container {
 padding-block-start: 0;
}
.under.products main .container {
 width: 1160px;
 padding-inline: 90px;
}
@media screen and (max-width: 768px) {
 .under.products main .container {
 width: auto;
 padding-inline: 5.3333333333vw;
 }
}
/* ---- 一覧ページ -------------------------------- */
.products_inner:has(.news_year),
.products_inner:has(.news_list) {
 background-color: white;
}
@media print,
screen and (min-width: 768px) {
 .products_wrapper:has(.news_year)>*:last-child {
 padding-block-end: 60px;
 }
}
.year_selector {
 display: block flex;
 align-items: center;
 gap: 15px;
 font-family: 'Roboto Flex', 'Roboto', 'Noto Sans JP', sans-serif;
 &>p {
 margin-block: 0;
 font-size: 1.1rem;
 font-weight: 450;
 color: var(--color-justdb-navy);
 word-break: keep-all;
 }
 &>label {
 font-size: 1.1rem;
 font-weight: 450;
 color: var(--color-justdb-navy);
 }
}
.year_selector .year_list {
 flex-grow: 1;
 display: block flex;
 align-items: center;
 gap: 15px;
 flex-wrap: wrap;
 list-style: none;
}
.year_selector .year_page {
 flex-basis: 94px;
 border-radius: 15px;
 border: 1px solid #ddd;
 background-color: #f7f7f7;
 font-size: 1.1rem;
 font-weight: 450;
 line-height: 30px;
 transition: border-color 0.2s ease 0s,
 background-color 0.2s ease 0s;
 cursor: pointer;
 &:hover {
 border-color: var(--color-justdb-blue-50);
 background-color: var(--color-justdb-blue-10);
 &:hover a {
 color: var(--color-justdb-blue);
 }
 }
 &>a {
 display: block;
 width: 100%;
 height: 100%;
 /* padding-inline: 20px; */
 color: var(--color-justdb-navy);
 text-align: center;
 transition: color 0.2s ease 0s;
 pointer-events: none;
 cursor: auto;
 }
}
.year_selector .year_page.current_page {
 border-color: var(--color-justdb-blue);
 background-color: var(--color-justdb-blue);
 pointer-events: none;
 cursor: auto;
 & a {
 color: white;
 }
}
.year_selector .select_outer {
 position: relative;
 padding-inline: 15px;
 border-radius: 25px;
 border: 1px solid #ddd;
 background-color: #f7f7f7;
 transition: border-color 0.2s ease 0s;
 &::after {
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 right: 15px;
 width: 15px;
 height: 15px;
 border-block-start: 2px solid #ccc;
 border-inline-start: 2px solid #ccc;
 transform: translateY(-25%) rotate(45deg);
 transition: border-color 0.2s ease 0s;
 }
 &:hover {
 border-color: var(--color-justdb-blue);
 &::after {
 border-color: var(--color-justdb-blue);
 }
 }
}
.year_selector .year_select {
 border: none;
 background-color: #f7f7f7;
 font-size: 1.2rem;
 color: var(--color-justdb-navy);
}
.news_year {
 position: relative;
 padding-block: 3px;
 border-block: 1px solid rgb(153 153 153 / 1);
 background-color: rgb(var(--color-justdb-blue-dec) / 0);
 font-family: 'Roboto Flex', 'Roboto', 'Noto Sans JP', sans-serif;
 font-size: 1.8rem;
 font-weight: 350;
 text-align: center;
 cursor: pointer;
 &::after {
 content: "";
 display: block;
 position: absolute;
 width: 20px;
 height: 20px;
 top: 50%;
 right: 15px;
 border-block-end: 2px solid #999;
 border-inline-end: 2px solid #999;
 transition: transform 0.3s ease 0s;
 transform: translateY(-25%) rotate(225deg);
 }
 &:hover {
 background-color: rgb(var(--color-justdb-blue-dec) / 0.05);
 color: var(--color-justdb-blue);
 }
}
.news_year.is_close {
 border-block-end-color: rgb(153 153 153 / 0);
}
.news_year.is_close::after {
 transform: translateY(-75%) rotate(45deg);
}
.news_year.is_will_close {
 transition: border 0s linear 0.3s,
 color 0.3s ease 0s,
 background-color 0.3s ease 0s;
}
.news_year.is_will_open {
 transition: border 0s linear 0s,
 color 0.3s ease 0s,
 background-color 0.3s ease 0s;
}
.news_year:nth-last-child(-n+1 of .news_year).is_close {
 border-block-end-color: rgb(153 153 153 / 1);
}
.news_list {
 display: revert;
 margin-block-start: 25px;
 margin-block-end: 60px;
 list-style: none;
 opacity: 1;
 transition:
 display 0.3s ease 0s allow-discrete,
 opacity 0.3s ease 0s;
}
.news_list:nth-last-child(-n+1 of .news_list) {
 margin-block-end: 0;
}
.news_list.news_list_starting_style {
 @starting-style {
 opacity: 0;
 }
}
.news_year.is_close+.news_list {
 display: none;
 opacity: 0;
}
.news_list>li {
 margin-block: 10px;
 &~li {
 padding-block-start: 10px;
 border-block-start: 1px solid #ccc;
 }
}
.news_list>li.is_hidden {
 display: none;
}
.news_list>li.is_hidden+li {
 padding-block-start: 0;
 border-block-start: none;
}
.news_list .news_content {
 display: block flex;
 gap: 30px;
 padding-block: 10px;
 padding-inline: 10px;
 background-color: rgb(var(--color-justdb-blue-dec) / 0);
 transition:
 opacity 0.2s ease 0s,
 background-color 0.2s ease 0s;
 &:hover {
 background-color: rgb(var(--color-justdb-blue-dec) / 0.05);
 /* opacity: 0.7; */
 }
}
.news_list .date {
 display: block;
 font-family: 'Roboto Flex', 'Roboto', 'Noto Sans JP', sans-serif;
 font-size: 1.35rem;
 font-weight: 320;
 color: var(--color-justdb-blue);
 transform: translateY(1.8%);
}
.news_list .subject {
 display: block;
 font-family: 'Roboto Flex', 'Roboto', 'Noto Sans JP', sans-serif;
 font-size: 1.1rem;
 font-weight: 450;
 line-height: 1.8;
}
.news_list .subject_sub {
 font-size: 0.9em;
 font-weight: normal;
}
.news_pages {
 --item-size: 50px;
 display: block flex;
 justify-content: center;
 margin-block-end: 130px;
 margin-inline: auto;
}
@media screen and (min-width: 768px) {
 .news_pages {
 min-width: 1280px;
 }
}
.news_pages ol {
 display: block flex;
 gap: 15px;
}
.news_pages li {
 list-style: none;
 cursor: pointer;
}
.news_pages .news_page_link {
 display: block;
 width: var(--item-size);
 height: var(--item-size);
 background-color: rgb(var(--color-justdb-blue-dec) / 0);
 font-family: 'Roboto Flex', 'Roboto', 'Noto Sans JP', sans-serif;
 font-size: 1.5rem;
 font-weight: 350;
 line-height: var(--item-size);
 text-align: center;
 transition:
 background-color 0.2s ease 0s,
 color 0.2s ease 0s;
 pointer-events: none;
 &:hover {
 background-color: rgb(var(--color-justdb-blue-dec) / 0.1);
 color: var(--color-justdb-blue);
 }
}
.news_pages .current_page {
 font-weight: 450;
 color: var(--color-justdb-blue);
 pointer-events: none;
 cursor: auto;
}
.news_pages li:has(.current_page) {
 pointer-events: none;
}
.news_pages .omission {
 font-size: 1rem;
 color: #999;
 line-height: var(--item-size);
 &::after {
 content: "...";
 }
}
.news_pages .is_hidden {
 display: none;
}
.news_pages .prev_arrow,
.news_pages .next_arrow {
 margin-inline: 25px;
 cursor: pointer;
 & a {
 display: block;
 position: relative;
 width: var(--item-size);
 height: var(--item-size);
 background-color: rgb(var(--color-justdb-blue-dec) / 0);
 transition: background-color 0.2s ease 0s;
 pointer-events: none;
 &::after {
 content: "";
 display: block;
 position: absolute;
 width: 30%;
 height: 30%;
 top: 50%;
 left: 50%;
 border-inline-start: 2px solid #999;
 border-block-end: 2px solid #999;
 transition: border-color 0.2s ease 0s;
 }
 &:hover {
 background-color: rgb(var(--color-justdb-blue-dec) / 0.1);
 &::after {
 border-inline-start-color: var(--color-justdb-blue);
 border-block-end-color: var(--color-justdb-blue);
 }
 }
 }
}
.news_pages .prev_arrow {
 & a::after {
 transform: translate(-25%, -50%) rotate(45deg);
 }
}
.news_pages .next_arrow {
 & a::after {
 transform: translate(-75%, -50%) rotate(-135deg);
 }
}
.news_pages:has(li:first-child .current_page) .prev_arrow,
.news_pages:has(li:last-child .current_page) .next_arrow {
 display: none;
}
.sr_only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);
 border: 0;
}
@media screen and (max-width: 768px) {
 .products_wrapper:has(.news_year)>*:last-child {
 padding-block-end: 12vw;
 }
 .year_selector .year_list {
 gap: max(1.95vw, 10px);
 &>p {
 font-size: 1rem;
 }
 }
 .year_selector .year_page {
 flex-basis: clamp(80px, 18.8vw, 94px);
 font-size: 1rem;
 line-height: clamp(26px, 6vw, 30px);
 }
 .news_year {
 font-size: max(3.75vw, 1.25rem);
 &::after {
 width: 15px;
 height: 15px;
 }
 }
 .news_list {
 margin-block-start: 15px;
 margin-block-end: 30px;
 }
 .news_list .news_content {
 display: block flow;
 padding-inline: 0;
 }
 .news_list .date {
 width: fit-content;
 margin-block-end: 10px;
 padding-block-end: 10px;
 border-block-end: 2px solid var(--color-justdb-blue-30);
 font-size: max(2.8125vw, 1.05rem);
 }
 .news_list .subject {
 font-size: max(2.29167vw, 0.95rem);
 }
 .news_list .subject_sub {
 font-size: max(2.0625vw, 0.85rem);
 }
 .news_pages {
 --item-size: max(6.5vw, 35px);
 margin-block-end: 24vw;
 }
 .news_pages ul {
 gap: 1.95vw;
 }
 .news_pages .news_page_link {
 font-size: max(3.125vw, 1.2rem);
 }
 .news_pages .omission {
 font-size: 1rem;
 }
 .news_pages .prev_arrow,
 .news_pages .next_arrow {
 margin-inline: 3.255vw;
 }
}
/* ---- 個別ページ -------------------------------- */
.products_inner:has(.ttl-head) {
 background-color: white;
}
.ttl-head {
 display: block;
 width: fit-content;
 margin-block-end: 10px;
 padding-block-end: 10px;
 padding-inline: 0.1em;
 border-block-end: 2px solid var(--color-justdb-blue-30);
 font-family: 'Roboto Flex', 'Roboto', 'Noto Sans JP', sans-serif;
 font-size: 1.5rem;
 font-weight: 320;
 color: var(--color-justdb-blue);
}
.category_title {
 font-size: 38px;
 text-shadow: 0px 2px 6px #0000007a;
}
.mod-h2 .sub,
.mod-h2 .sub-b {
 margin-block-start: 15px;
 font-size: 1.25rem;
 color: var(--color-justdb-navy);
}
.mod-h2 {
 margin-block-start: 90px;
 border-block-start: none;
 &::before {
 display: none;
 }
}
.mod-txt a:hover {
 color: var(--color-justdb-blue) !important;
}
.link_hover:hover {
 color: var(--color-justdb-blue) !important;
}
.mod-txt .mod-btn a:hover {
 color: white !important;
}
@media print,
screen and (min-width: 768px) {
 .mod-h2 {
 padding-block-start: 0;
 }
}
.mod-h4::before {
 height: 1.2em;
 top: 50%;
 margin-block: 0;
 transform: translateY(-50%);
}
.before_after .head_01 {
 width: 25%;
}
.qa_list {
 line-height: 1.9;
 & dt,
 & dd {
 margin-inline-start: 1.5em;
 text-indent: -1.5em;
 }
 & dt span:first-of-type,
 & dd span:first-of-type {
 letter-spacing: 0.25em;
 }
 & dt:nth-of-type(n+2) {
 margin-block-start: 1em;
 }
}
@media only screen and (max-width: 767px) {
 .category_title {
 font-size: min(6.93333vw, 34.66665px);
 }
 .mod-h2 {
 margin-block-start: min(21.3333333333vw, 60px);
 padding-block-start: 0;
 font-size: min(5.8666666667vw, 2.125rem);
 }
 .mod-h3 {
 font-size: min(5.3333333333vw, 1.4375rem);
 }
 .mod-txt>p {
 font-size: min(4vw, 1rem);
 /* font-size: 4vw; */
 }
 .mod-link>p a {
 font-size: min(4vw, 1rem);
 overflow-wrap: break-word;
 }
 .mod-list__annotation li {
 font-size: min(3.2vw, 0.9rem);
 }
 .mod-table02>.before_after :is(th, td) {
 display: table-cell;
 width: auto;
 }
 .mod-table02>.before_after .head_01 {
 width: 30%;
 }
}</div><div class="naked_ctrl">
<form action="/index.cgi/speech" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://www.justsystems.com/jp/products/justdb/css/news.css">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://www.justsystems.com/jp/products/justdb/css/news.css" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech" selected="selected">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>