@charset "utf-8";
/*--------------------------------------------------------------------------------
heading
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-heading
--------------------------------------------------------------------------------*/
.c-heading { line-height: 1.6; }
.c-heading_main {
line-height: 1.2;
font-family: var(--ff-en);
font-size: var(--fs-5l);
font-weight: 500;
}
.c-heading_sub {
padding-top: 0.5rem;
font-family: var(--ff-go);
font-size: var(--fs-m);
font-weight: 500;
}
.c-heading.-white { color: #FFF; }
.c-heading.-white .c-heading_main:before { background-color: #FFF; }
/*--------------------------------------------------------------------------------
.c-hdline02
--------------------------------------------------------------------------------*/
.c-hdline02 {
line-height: 1.6;
font-weight: bold;
font-size: var(--fs-m);
background-color: var(--color-quaternary);
padding: 1.15rem 1.5rem;
border-left: 2px solid var(--color-secondary-dark);
}
/*--------------------------------------------------------------------------------
.c-hdline03
--------------------------------------------------------------------------------*/
.c-hdline03 {
line-height: 1.6;
font-size: var(--fs-2l);
font-weight: bold;
border-bottom: 1px solid var(--color-gray);
padding-bottom: 1.5rem;
margin-bottom: var(--space-m);
}
/*--------------------------------------------------------------------------------
icon
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
SVG mask icon
--------------------------------------------------------------------------------*/
:root {
--icon-arrow-thin: url('data:image/svg+xml;utf8,');
--icon-arrow: url('data:image/svg+xml;utf8,');
--icon-newwin: url('data:image/svg+xml;utf8,');
--icon-pdf: url('data:image/svg+xml;utf8,');
--icon-doc: url('data:image/svg+xml;utf8,');
--icon-xls: url('data:image/svg+xml;utf8,');
--icon-ppt: url('data:image/svg+xml;utf8,');
}
/*--------------------------------------------------------------------------------
link
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-arrow
--------------------------------------------------------------------------------*/
@media (min-width: 641px) { :root { --arrow-size: 3.5rem; } }
@media (max-width: 640px) { :root { --arrow-size: 3rem; } }
.c-arrow {
flex-shrink: 0;
position: relative;
display: inline-block;
vertical-align: middle;
line-height: 1;
width: var(--arrow-size);
height: var(--arrow-size);
border-radius: 50%;
}
.c-arrow,
.c-arrow:after { transition: var(--hover-trans); }
.c-arrow:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
background: currentColor;
color: currentColor;
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 40%;
animation-fill-mode: forwards;
}
.c-arrow.-prev:after { transform: scale(-1, 1); }
.c-arrow svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform: rotate(-90deg) scale(1, -1);
z-index: 2;
}
.c-arrow circle {
fill: transparent;
stroke: transparent;
stroke-width: 0;
}
@media (hover: hover) {
.c-arrow:hover circle,
.c-arrow-linkarea:hover .c-arrow circle,
.c-arrow-txt:hover .c-arrow circle {
stroke-width: 1px;
animation: arrow_circle 3.5s var(--cubic-bezier);
}
}
@keyframes arrow_circle {
from { stroke-dasharray: 0 251; }
to { stroke-dasharray: 251 251; }
}
:root {
/* default */
--arrow-circle: var(--color-secondary);
--arrow-bg: var(--color-secondary);
--arrow-bg-hover: trantparent;
--arrow-icon: #FFF;
--arrow-icon-hover: var(--color-secondary);
/* white */
--arrow-white-circle: #FFF;
--arrow-white-bg: #FFF;
--arrow-white-bg-hover: trantparent;
--arrow-white-icon: var(--color-tertiary);
--arrow-white-icon-hover: #FFF;
}
/* default */
.c-arrow { background-color: var(--arrow-bg); }
.c-arrow:after { background: var(--arrow-icon); }
.c-arrow circle { stroke: var(--arrow-circle); }
/* white */
.c-arrow.-white { background-color: var(--arrow-white-bg); }
.c-arrow.-white:after { background: var(--arrow-white-icon); }
.c-arrow.-white circle { stroke: var(--arrow-white-circle); }
@media (hover: hover) {
/* default */
.c-arrow:hover,
.c-arrow-linkarea:hover .c-arrow,
.c-arrow-txt:hover .c-arrow { background-color: var(--arrow-bg-hover); }
.c-arrow:hover:after,
.c-arrow-linkarea:hover .c-arrow:after,
.c-arrow-txt:hover .c-arrow:after { background: var(--arrow-icon-hover); }
/* white */
.c-arrow.-white:hover,
.c-arrow-linkarea:hover .c-arrow.-white,
.c-arrow-txtn:hover .c-arrow.-white { background-color: var(--arrow-white-bg-hover); }
.c-arrow.-white:hover:after,
.c-arrow-linkarea:hover .c-arrow.-white:after,
.c-arrow-txt:hover .c-arrow.-white:after { background: var(--arrow-white-icon-hover); }
}
/* .c-arrow-txt
----------------------------------------*/
.c-arrow-txt {
display: flex;
width: fit-content;
align-items: center;
column-gap: clamp(1rem, 3vw, 2rem);
position: relative;
transition: var(--hover-trans);
}
.c-arrow-txt { color: inherit; text-decoration: none; }
.c-arrow-txt:hover { color: var(--color-secondary); text-decoration: none; }
.c-arrow-txt.-en { font-family: var(--ff-en); font-weight: 500; }
/*--------------------------------------------------------------------------------
.c-newwin
--------------------------------------------------------------------------------*/
:root { --newwin-size: 0.95rem; --newwin-mgl: 0.5rem; --newwin-mgr: 0.5rem; --newwin-mgb: 0.15rem; }
.c-newwin[target="_blank"]:after {
content: "";
width: var(--newwin-size);
height: var(--newwin-size);
line-height: 1;
display: inline-block;
vertical-align: middle;
margin-left: var(--newwin-mgl);
margin-right: var(--newwin-mgr);
margin-bottom: var(--newwin-mgb);
background: currentColor;
color: currentColor;
mask-repeat: no-repeat;
mask-image: var(--icon-newwin);
transition: var(--hover-trans);
}
.c-newwin[target="_blank"]:after,
.c-newwin[target="_blank"]:hover:after { color: inherit; }
/*--------------------------------------------------------------------------------
table
--------------------------------------------------------------------------------*/
.c-tbl-scroll { overflow-x: auto; }
/*--------------------------------------------------------------------------------
.c-tbl
--------------------------------------------------------------------------------*/
.c-tbl {
width: 100%;
border: 0;
border-collapse: collapse;
}
.c-tbl th,
.c-tbl td { border-bottom: 1px solid var(--border-color); }
.c-tbl th,
.c-tbl td {
padding: 1.5rem;
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-tbl th {
padding-left: 0;
vertical-align: top;
white-space: nowrap;
}
/* break point
----------------------------------------*/
@media (max-width: 640px) {
.c-tbl.-break-sp { display: block; }
.c-tbl.-break-sp th,
.c-tbl.-break-sp td { width: 100%; display: block; padding-left: 0; padding-right: 0; }
.c-tbl.-break-sp th { border-bottom: 0; padding-bottom: 0; }
.c-tbl.-break-sp td { padding-top: 0.75rem; }
}
/*--------------------------------------------------------------------------------
.c-tbl02
--------------------------------------------------------------------------------*/
.c-tbl02 {
width: 100%;
border: 0;
border-collapse: collapse;
}
.c-tbl02 thead th,
.c-tbl02 thead td {
padding: 1rem;
background-color: var(--color-primary);
color: #FFF;
line-height: 1.6;
}
.c-tbl02 thead th:not(:first-child),
.c-tbl02 thead td:not(:first-child) { border-left: 1px solid rgba(255,255,255,0.2); }
.c-tbl02 tbody tr:not(:last-child) th,
.c-tbl02 tbody tr:not(:last-child) td { border-bottom: 1px solid var(--color-quaternary); }
.c-tbl02 tbody th:not(:first-child),
.c-tbl02 tbody td:not(:first-child) { border-left: 1px solid var(--color-quaternary); }
.c-tbl02 tbody th,
.c-tbl02 tbody td {
padding: 1.5rem;
background-color: #FFF;
vertical-align: middle;
word-break: keep-all;
overflow-wrap: anywhere;
}
@media (max-width: 999px) {
.c-tbl02 { font-size: var(--fs-s); }
.c-tbl02 tbody th,
.c-tbl02 tbody td { padding: 1rem; }
}
/*--------------------------------------------------------------------------------
tag
--------------------------------------------------------------------------------*/
:root {
/* default */
--tag-bg: var(--color-secondary);
--tag-bg-hover: var(--color-secondary-light);
--tag-txt: #FFF;
--tag-txt-hover: #FFF;
--tag-outline: var(--color-secondary);
--tag-outline-hover: var(--color-secondary-light);
--tag-outline-bg: trantparent;
--tag-outline-bg-hover: var(--color-secondary-light);
--tag-outline-txt: var(--color-secondary);
--tag-outline-txt-hover: #FFF;
}
.c-tag-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.c-tag { display: inline-block; vertical-align: top; }
.c-tag, .c-tag:hover,
.c-tag a, .c-tag a:hover,
.c-tag-list a,
.c-tag-list a:hover { color: inherit; text-decoration: none; }
.c-tag,
.c-tag-list li { line-height: 1.6; }
.c-tag a,
.c-tag-list a { display: block; }
.c-tag:not(:has(a)),
.c-tag a,
.c-tag-list li:not(:has(a)),
.c-tag-list li a { padding: 0.15em 0.5em; }
/* default */
.c-tag:not(:has(a)),
.c-tag-list li:not(:has(a)) { background-color: var(--tag-bg); color: var(--tag-txt); }
.c-tag a,
.c-tag-list li a { background-color: var(--tag-bg); color: var(--tag-txt); }
.c-tag.-outline:not(:has(a)),
.c-tag-list.-outline li:not(:has(a)) { border: 1px solid var(--tag-outline); background-color: var(--tag-outline-bg); color: var(--tag-outline-txt); }
.c-tag.-outline a,
.c-tag-list.-outline li a { border: 1px solid var(--tag-outline); background-color: var(--tag-outline-bg); color: var(--tag-outline-txt); }
.c-tag.is-active, .c-tag. a.is-active,
.c-tag-list li a.is-active { background-color: var(--tag-bg-hover); color: var(--tag-txt-hover); }
.c-tag.-outline.is-active, .c-tag.-outline a.is-active,
.c-tag-list.-outline li a.is-active { border-color: var(--tag-outline-hover); background-color: var(--tag-outline-bg-hover); color: var(--tag-outline-txt-hover); }
@media (hover: hover) {
a.c-tag:hover, .c-tag a:hover,
.c-tag-list li a:hover { background-color: var(--tag-bg-hover); color: var(--tag-txt-hover); }
a.c-tag.-outline:hover, .c-tag.-outline a:hover,
.c-tag-list.-outline li a:hover { border-color: var(--tag-outline-hover); background-color: var(--tag-outline-bg-hover); color: var(--tag-outline-txt-hover); }
}
/*--------------------------------------------------------------------------------
list
--------------------------------------------------------------------------------*/
:root { --list-mgl: 1em; --list-ol-mgl: 1.25em; }
.c-list { --list-rgap: 0.5rem; }
.c-list.-rgap-s { --list-rgap: 0.25rem; }
.c-list.-rgap-m { --list-rgap: 1rem; }
.c-list.-rgap-l { --list-rgap: 1.5rem; }
.c-list.-rgap-xl { --list-rgap: 2rem; }
.c-list.-rgap0 { --list-rgap: 0; }
.c-list.-primary { --list-mark-color: var(--color-primary); }
.c-list { display: flex; flex-direction: column; row-gap: var(--list-rgap); }
.c-list.-normal { margin-left: var(--list-mgl); list-style: disc; }
ol.c-list.-normal { margin-left: var(--list-ol-mgl); list-style: decimal; }
/* .c-list-mark
----------------------------------------*/
.c-list.-list-mark.-circle { --list-mark-size: 0.75em; --list-mark-mgt: 0.5em; }
.c-list.-list-mark.-square { --list-mark-size: 0.75em; --list-mark-mgt: 0.5em; }
.c-list.-list-mark li { position: relative; padding-left: calc(var(--list-mark-size) + 0.5rem); }
.c-list.-list-mark li:before {
content: "";
width: var(--list-mark-size);
height: var(--list-mark-size);
display: inline-block;
vertical-align: middle;
line-height: 1;
background-color: var(--list-mark-color);
position: absolute;
left: 0;
top: var(--list-mark-mgt);
}
.c-list.-list-mark.-circle li:before { border-radius: 50%; }
/* .c-list-mark-txt
----------------------------------------*/
.c-list.-list-mark-txt.-note { --list-mark-txt: "※"; --list-mark-txt-size: 1em; --list-mark-txt-mgt: 0; }
.c-list.-list-mark-txt li { position: relative; padding-left: calc(var(--list-mark-txt-size) + 0.25rem); }
.c-list.-list-mark-txt li:before {
content: var(--list-mark-txt);
width: var(--list-mark-txt-size);
height: var(--list-mark-txt-size);
font-size: var(--list-mark-txt-size);
display: inline-block;
vertical-align: middle;
color: var(--list-mark-color);
position: absolute;
left: 0;
top: var(--list-mark-txt-mgt);
}
/*--------------------------------------------------------------------------------
text animation
--------------------------------------------------------------------------------*/
.c-text-animate {
opacity: 0;
overflow: hidden;
display: inline-flex;
}
.c-text-animate:not(.-no-wrap) { flex-wrap: wrap; }
.c-text-animate.-mgr-0h { margin-right: 0.5em; }
.c-text-animate.-mgr-1 { margin-right: 1em; }
.c-text-animate.is-active { opacity: 1; }
.c-text-animate_item {
opacity: 0;
transform: translateY(50%);
}
.c-text-animate.is-active .c-text-animate_item {
animation: text-animate 1.2s var(--cubic-bezier);
animation-fill-mode: forwards;
}
@keyframes text-animate {
from { opacity: 0; transform: translateY(50%); }
to { opacity: 1; transform: translateY(0); }
}
/*--------------------------------------------------------------------------------
img animation
--------------------------------------------------------------------------------*/
.c-img-animate {
display: block;
height: 100%;
overflow: hidden;
}
.c-img-animate_img {
filter: blur(10px);
transform: scale(1.15);
}
.c-img-animate.is-active .c-img-animate_img {
animation: img-animate 2s var(--cubic-bezier);
animation-fill-mode: forwards;
}
@keyframes img-animate {
from { filter: blur(10px); transform: scale(1.15); }
to { filter: blur(0); transform: scale(1); }
}
/*--------------------------------------------------------------------------------
archive
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-archive-search
--------------------------------------------------------------------------------*/
.c-archive-search {
background-color: #FFF;
padding: var(--box-space-m);
margin-bottom: var(--space-l);
display: flex;
column-gap: var(--box-space-m);
row-gap: 1rem;
}
.c-archive-search_hd {
font-weight: bold;
font-size: var(--fs-m);
flex-shrink: 0;
}
@media (min-width: 1000px) {
.c-archive-search_hd { padding: 0 var(--box-space); }
}
@media (max-width: 999px) {
.c-archive-search { flex-direction: column; }
}
/*--------------------------------------------------------------------------------
.c-archive-list
--------------------------------------------------------------------------------*/
.c-archive-list {
display: flex;
flex-direction: column;
}
.c-archive-list_item {
border-bottom: 1px solid var(--border-color);
}
.c-archive-list_item:first-of-type {
margin-top: -1.75rem;
}
.c-archive-list_item:not(:has(a)),
.c-archive-list_item a {
display: flex;
column-gap: 2rem;
row-gap: 0.25rem;
padding: 1.75rem 0;
}
.c-archive-list_date { color: var(--color-gray-light); }
.c-archive-list_ttl {
flex: 1;
transition: var(--hover-trans);
display: flex;
column-gap: 2rem;
}
.c-archive-list_ttl:after {
content: "";
line-height: 1;
flex-shrink: 0;
align-self: center;
background: currentColor;
color: var(--color-secondary);
mask-repeat: no-repeat;
margin-left: auto;
transition: var(--hover-trans);
}
.c-archive-list_item a[target="_blank"] .c-archive-list_ttl:after {
width: 0.95rem;
height: 0.95rem;
mask-image: var(--icon-newwin);
}
.c-archive-list a,
.c-archive-list a:hover { color: inherit; text-decoration: none; }
.c-archive-list a:hover .c-archive-list_ttl { color: var(--color-link-hover); }
@media (max-width: 640px) {
.c-archive-list_item:not(:has(a)),
.c-archive-list_item a {
flex-direction: column;
}
}
/*--------------------------------------------------------------------------------
.c-archive
--------------------------------------------------------------------------------*/
.c-archive_item {
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.c-archive_item:not(:last-of-type) { border-bottom: 0; }
.c-archive_item:not(:has(a)),
.c-archive_item a {
display: grid;
grid-column-gap: var(--box-space-m);
padding: var(--box-space-m) 0;
}
.c-archive_item a { height: 100%; }
@media (min-width: 641px) {
.c-archive_item:not(:has(a)),
.c-archive_item a {
grid-template-columns: minmax(min(calc(380 / 1400 * 100vw), 380px), 180px) 1fr;
grid-template-rows: auto 1fr;
}
.c-archive_img { grid-area: 1 / 1 / 2 / 2; }
.c-archive_content { grid-area: 1 / 2 / 2 / 3; }
}
.c-archive_content { padding-bottom: 1rem; }
.c-archive_img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-archive_meta {
display: flex;
flex-wrap: wrap;
column-gap: 1.5rem;
row-gap: 0.75rem;
margin-bottom: 0.25rem;
}
.c-archive_tag {
font-size: var(--fs-2s);
}
.c-archive_date {
color: var(--color-gray-light);
}
.c-archive_ttl {
transition: var(--hover-trans);
font-weight: bold;
line-height: 1.6;
}
.c-archive_txt {
padding-top: 1rem;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
@media (min-width: 1000px) {
.c-archive_ttl { font-size: var(--fs-l); }
.c-archive_txt { -webkit-line-clamp: 3; }
}
@media (max-width: 999px) {
.c-archive_ttl { font-size: var(--fs-m); }
.c-archive_txt { -webkit-line-clamp: 2; }
}
@media (min-width: 641px) {
.c-archive_img img { aspect-ratio: 1.25 / 1; }
.c-archive_ttl { padding-top: 1.5rem; }
}
@media (max-width: 640px) {
.c-archive_img { margin-bottom: 1.5rem; }
.c-archive_img img { aspect-ratio: 1.5 / 1; }
.c-archive_img { margin-top: 1rem; }
.c-archive_meta { flex-direction: column; }
}
.c-archive a,
.c-archive a:hover { color: inherit; text-decoration: none; }
.c-archive a:hover .c-archive_ttl { color: var(--color-link-hover); }
/*--------------------------------------------------------------------------------
.c-archive-column
--------------------------------------------------------------------------------*/
.c-archive-column { display: grid; }
.c-archive-column_item {
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
@media (min-width: 641px) {
.c-archive-column { grid-template-columns: repeat(2, 1fr); }
.c-archive-column_item:nth-of-type(n+3) { border-top: 0; }
.c-archive-column_item:nth-of-type(even) { border-left: 1px solid var(--border-color); }
}
@media (max-width: 640px) {
.c-archive-column_item:not(:last-of-type) { border-bottom: 0; }
}
.c-archive-column_item:not(:has(a)),
.c-archive-column_item a {
display: grid;
grid-column-gap: var(--box-space-s);
}
.c-archive-column_item a { height: 100%; }
@media (min-width: 1000px) {
.c-archive-column_item:not(:has(a)),
.c-archive-column_item a {
grid-template-columns: minmax(min(calc(240 / 1400 * 100vw), 240px), 160px) 1fr;
grid-template-rows: auto 1fr;
}
.c-archive-column_img { grid-area: 1 / 1 / 3 / 2; }
.c-archive-column_tag { grid-area: 1 / 2 / 2 / 3; }
.c-archive-column_content { grid-area: 2 / 2 / 3 / 3; align-self: center; }
}
@media (min-width: 641px) {
.c-archive-column_item:not(:has(a)),
.c-archive-column_item a { padding: var(--box-space-s); }
.c-archive-column_item:nth-of-type(odd):not(:has(a)),
.c-archive-column_item:nth-of-type(odd) a { padding-left: 0; }
.c-archive-column_item:nth-of-type(even),
.c-archive-column_item:nth-of-type(even) a { padding-right: 0; }
}
@media (max-width: 640px) {
.c-archive-column_item:not(:has(a)),
.c-archive-column_item a { padding: var(--box-space-m) 0; }
}
.c-archive-column_content { padding-bottom: 1rem; }
.c-archive-column_img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-archive-column_tag {
font-size: var(--fs-2s);
}
.c-archive-column_date {
color: var(--color-gray-light);
display: inline-block;
margin: 0.75rem 0 0.25rem 0;
}
.c-archive-column_ttl {
transition: var(--hover-trans);
font-weight: bold;
font-size: var(--fs-m);
line-height: 1.6;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media (min-width: 1000px) {
.c-archive-column_img img { aspect-ratio: 1.25 / 1; }
}
@media (max-width: 999px) {
.c-archive-column_img { margin-bottom: 1.5rem; }
.c-archive-column_img img { aspect-ratio: 1.5 / 1; }
}
@media (max-width: 640px) {
.c-archive-column_img { margin-top: 1rem; }
}
.c-archive-column a,
.c-archive-column a:hover { color: inherit; text-decoration: none; }
.c-archive-column a:hover .c-archive-column_ttl { color: var(--color-link-hover); }
/*--------------------------------------------------------------------------------
article
--------------------------------------------------------------------------------*/
.c-article { padding-bottom: var(--space-3l); }
/*--------------------------------------------------------------------------------
.c-article-meta
.c-article-date
.c-article-ttl
--------------------------------------------------------------------------------*/
.c-article-meta {
display: flex;
flex-wrap: wrap;
column-gap: 1.5rem;
row-gap: 0.75rem;
margin-bottom: 0.25rem;
}
.c-article-date,
.c-article-meta_date {
color: var(--color-gray-light);
}
.c-article-date {
display: inline-block;
margin-bottom: 1.5rem;
}
.c-article-ttl {
line-height: 1.6;
font-size: var(--fs-2l);
font-weight: bold;
border-bottom: 1px solid var(--border-color);
padding-bottom: 2rem;
margin-bottom: var(--space-m);
}
/*--------------------------------------------------------------------------------
.c-article-block
--------------------------------------------------------------------------------*/
.c-article-block:not(:last-of-type) {
padding-bottom: var(--space-m);
}
.c-article-block:not(:has(.c-article-txt)) {
padding-bottom: 0;
}
.c-article-block:not(:has(.c-article-txt)) + .c-article-block:has(.c-article-txt) {
padding-top: var(--space-m);
}
.c-article-block:after {
content: "";
display: block;
height: 0;
clear: both;
}
/*--------------------------------------------------------------------------------
.c-article-txt
--------------------------------------------------------------------------------*/
.c-article-txt ul:not([list="none"]) { margin-left: var(--list-mgl); list-style: inherit; }
.c-article-txt ol:not([list="none"]) { margin-left: var(--list-ol-mgl); list-style: inherit; }
.c-article-txt img { vertical-align: middle; }
.c-article-txt a { text-decoration: underline; }
.c-article-txt a:hover { text-decoration: none; }
.c-article-txt a[target="_blank"]:not([icon="none"]):not(:has(img)):after {
content: "";
width: var(--newwin-size);
height: var(--newwin-size);
line-height: 1;
display: inline-block;
vertical-align: middle;
margin-left: var(--newwin-mgl);
margin-right: var(--newwin-mgr);
margin-bottom: var(--newwin-mgb);
background: currentColor;
color: currentColor;
mask-repeat: no-repeat;
mask-image: var(--icon-newwin);
transition: var(--hover-trans);
}
.c-article-txt a[target="_blank"]:not([icon="none"]):not(:has(img)):after,
.c-article-txt a[target="_blank"]:not([icon="none"]):not(:has(img)):hover:after {
color: inherit;
}
/*--------------------------------------------------------------------------------
.c-article-heading
--------------------------------------------------------------------------------*/
.c-article-heading {
margin: var(--space-s) 0;
}
/*--------------------------------------------------------------------------------
.c-article-img
--------------------------------------------------------------------------------*/
.c-article-img.-center {
text-align: center;
padding-bottom: var(--space-s);
}
.c-article-txt + .c-article-img.-center {
padding-top: var(--space-m);
}
.c-article-img img {
max-width: inherit;
width: 100%;
}
@media (min-width:641px) {
.c-article-img.-left,
.c-article-img.-right {
display: inline-block;
padding-bottom: 1.5rem;
}
.c-article-img.-left {
float: left;
margin-right: var(--space-s);
}
.c-article-img.-right {
float: right;
margin-left: var(--space-s);
}
}
@media (max-width:640px) {
.c-article-img.-left,
.c-article-img.-right {
width: 100% !important;
max-width: 100% !important;
text-align: center;
padding-bottom: var(--space-s);
}
}
/* caption */
.c-article-img_cp {
display: block;
text-align: center;
padding-top: 0.5rem;
color: var(--color-gray);
}
/*--------------------------------------------------------------------------------
.c-article-file
--------------------------------------------------------------------------------*/
.c-article-file {
padding: 0.5rem 0;
}
.c-article-txt + .c-article-file {
margin-top: 1.5rem;
}
.c-article-file_link {
display: inline-block;
position: relative;
padding-left: 2.8rem;
min-height: 2.4rem;
}
.c-article-file_link:before {
content: "";
display: inline-block;
width: 2.4rem;
height: 2.4rem;
background-position: left top;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: -0.4rem;
}
.c-article-file_link.-pdf:before { background-image: url("../image/icon/pdf.svg"); }
.c-article-file_link.-doc:before { background-image: url("../image/icon/doc.svg"); }
.c-article-file_link.-xls:before { background-image: url("../image/icon/xls.svg"); }
.c-article-file_link.-ppt:before { background-image: url("../image/icon/ppt.svg"); }
.c-article-file_link { text-decoration: underline; }
.c-article-file_link:hover { text-decoration: none; }
/*--------------------------------------------------------------------------------
alert
--------------------------------------------------------------------------------*/
.c-alert {
margin-bottom: var(--space-m);
text-align: left;
line-height: 1.4;
border: 1px solid var(--color-warning);
line-height: 1.6;
color: var(--color-warning);
padding: 0.8rem;
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
row-gap: 0.5rem;
align-items: center;
}
.c-alert_ttl {
font-size: var(--fs-2s);
font-weight: bold;
background-color: var(--color-warning);
color: #fff;
padding: 0.25rem 0.5rem;
vertical-align: middle;
white-space: nowrap;
}
.c-alert_mess {
font-size: var(--fs-s);
}
/*--------------------------------------------------------------------------------
pager
--------------------------------------------------------------------------------*/
.c-pager {
padding-top: var(--space-2l);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
column-gap: 0.5rem;
row-gap: 1.5rem;
line-height: 1;
}
.c-pager_item.-extend { }
.c-pager_item-link {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 0 0.5rem;
color: inherit;
text-decoration: none;
}
.c-pager_item-link:hover { color: var(--color-link-hover); text-decoration: none; }
.c-pager_item.is-active .c-pager_item-link,
.c-pager_item.is-active .c-pager_item-link:hover { color: var(--color-secondary); }
/* arrow
----------------------------------------*/
.c-pager_item.-prev { padding-right: 1rem; }
.c-pager_item.-next { padding-left: 1rem; }