@charset "utf-8";
/*--------------------------------------------------------------------------------
heading
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-heading
--------------------------------------------------------------------------------*/
.c-heading { line-height: 1.6; }
.c-heading_main {
line-height: 1;
position: relative;
padding-left: 1.25rem;
padding-bottom: 1.25rem;
}
.c-heading_main:before {
content: "";
width: 0.5rem;
height: 0.5rem;
position: absolute;
left: 0;
top: 0.25rem;
border-radius: 50%;
background-color: var(--color-primary);
}
.c-heading_sub {
font-size: var(--fs-5l);
font-weight: 400;
line-height: 1.2;
}
.c-heading.-white { color: #FFF; }
.c-heading.-white .c-heading_main:before { background-color: #FFF; }
/*--------------------------------------------------------------------------------
.c-heading02
--------------------------------------------------------------------------------*/
.c-heading02 {
line-height: 1.6;
text-align: center;
}
.c-heading02_ttl-sub {
color: var(--color-primary);
font-size: var(--fs-s);
}
.c-heading02_ttl {
font-family: var(--ff-go);
font-weight: 700;
font-size: var(--fs-3l);
padding-top: 0.25rem;
}
/*--------------------------------------------------------------------------------
icon
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
SVG
--------------------------------------------------------------------------------*/
/* background用は fill='#...' → fill='%23...'に変更 */
:root {
--icon-arrow: url('data:image/svg+xml;utf8,');
--icon-insta: url('data:image/svg+xml;utf8,');
--icon-movie: url('data:image/svg+xml;utf8,');
--icon-newwin: url('data:image/svg+xml;utf8,');
/* file */
/* background用カラー設定有 */
--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,');
--icon-pdf-fill: url('data:image/svg+xml;utf8,');
--icon-doc-fill: url('data:image/svg+xml;utf8,');
--icon-xls-fill: url('data:image/svg+xml;utf8,');
--icon-ppt-fill: url('data:image/svg+xml;utf8,');
--icon-tel: url('data:image/svg+xml;utf8,');
--icon-plus: url('data:image/svg+xml;utf8,');
--icon-minus: url('data:image/svg+xml;utf8,');
--icon-cancel: url('data:image/svg+xml;utf8,');
}
.c-icon {
width: 1rem;
height: 1rem;
line-height: 1;
display: inline-block;
vertical-align: middle;
background: currentColor;
color: inherit;
mask-repeat: no-repeat;
}
.c-icon.-insta { mask-image: var(--icon-insta); }
.c-icon.-movie { mask-image: var(--icon-movie); }
/*--------------------------------------------------------------------------------
link
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-arrow
--------------------------------------------------------------------------------*/
:root {
--arrow-size: 2rem;
--arrow-bg: var(--color-secondary);
--arrow-bg-hover: var(--color-secondary);
}
.c-arrow {
display: inline-block;
line-height: 1;
width: var(--arrow-size);
height: var(--arrow-size);
background-color: var(--arrow-bg);
color: #FFF;
border-radius: 50%;
position: relative;
overflow: hidden;
transition: var(--hover-trans);
}
.c-arrow.-prev { transform: scale(-1, 1); }
.c-arrow:before,
.c-arrow:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: currentColor;
color: currentColor;
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 38%;
animation-fill-mode: forwards;
}
@media (hover: hover) {
.c-arrow:hover { background-color: var(--arrow-bg-hover); }
.c-arrow:before { animation-duration: 0.9s; }
.c-arrow:after { transform: translateX(-100%); animation-duration: 0.3s; }
.c-arrow-link-area:hover .c-arrow:before,
.c-link-btn:hover .c-arrow:before {
animation-name: arrow_before;
animation-delay: 0s;
}
.c-arrow-link-area:hover .c-arrow:after,
.c-link-btn:hover .c-arrow:after {
animation-name: arrow_after;
animation-delay: 0.05s;
}
}
@keyframes arrow_before {
0% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(100%); opacity: 0; }
}
@keyframes arrow_after {
0% { transform: translateX(-100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
/*--------------------------------------------------------------------------------
.c-link-btn
--------------------------------------------------------------------------------*/
:root {
/* default */
--linkbtn-outline: var(--color-secondary);
--linkbtn-outline-hover: var(--color-secondary);
--linkbtn-bg: trantparent;
--linkbtn-bg-hover: var(--color-secondary);
--linkbtn-txt: var(--txt-color);
--linkbtn-txt-hover: #FFF;
--linkbtn-arrow: #FFF;
--linkbtn-arrow-hover: var(--color-secondary);
--linkbtn-arrow-bg: var(--color-secondary);
--linkbtn-arrow-bg-hover: #FFF;;
/* white */
--linkbtn-white-outline: #FFF;
--linkbtn-white-outline-hover: #FFF;
--linkbtn-white-bg: trantparent;
--linkbtn-white-bg-hover: #FFF;
--linkbtn-white-txt: #FFF;
--linkbtn-white-txt-hover: var(--txt-color);
--linkbtn-white-arrow: var(--color-secondary);
--linkbtn-white-arrow-hover: #FFF;
--linkbtn-white-arrow-bg: #FFF;
--linkbtn-white-arrow-bg-hover: var(--color-secondary);
/* bg white */
--linkbtn-bg-white-outline: #FFF;
--linkbtn-bg-white-outline-hover: #FFF;
--linkbtn-bg-white-bg: #FFF;
--linkbtn-bg-white-bg-hover: trantparent;
--linkbtn-bg-white-txt: var(--txt-color);
--linkbtn-bg-white-txt-hover: #FFF;
--linkbtn-bg-white-arrow: #FFF;
--linkbtn-bg-white-arrow-hover: var(--color-secondary);
--linkbtn-bg-white-arrow-bg: var(--color-secondary);
--linkbtn-bg-white-arrow-bg-hover: #FFF;
}
.c-link-btn {
display: flex;
width: fit-content;
align-items: center;
column-gap: 2.5rem;
position: relative;
padding: 0.65rem 0.65rem 0.65rem 4rem;
border-radius: 9999px;
transition: var(--hover-trans);
}
.c-link-btn:has(.-prev) {
padding: 0.65rem 4rem 0.65rem 0.65rem;
}
.c-link-btn,
.c-link-btn:hover { text-decoration: none; }
.c-link-btn { border: 1px solid var(--linkbtn-outline); background-color: var(--linkbtn-bg); color: var(--linkbtn-txt); }
.c-link-btn.-white { border: 1px solid var(--linkbtn-white-outline); background-color: var(--linkbtn-white-bg); color: var(--linkbtn-white-txt); }
.c-link-btn.-bg-white { border: 1px solid var(--linkbtn-bg-white-outline); background-color: var(--linkbtn-bg-white-bg); color: var(--linkbtn-bg-white-txt); }
@media (hover: hover) {
.c-link-btn:hover { border-color: var(--linkbtn-outline-hover); background-color: var(--linkbtn-bg-hover); color: var(--linkbtn-txt-hover); }
.c-link-btn.-white:hover { border-color: var(--linkbtn-white-outline-hover); background-color: var(--linkbtn-white-bg-hover); color: var(--linkbtn-white-txt-hover); }
.c-link-btn.-bg-white:hover { border-color: var(--linkbtn-bg-white-outline-hover); background-color: var(--linkbtn-bg-white-bg-hover); color: var(--linkbtn-bg-white-txt-hover); }
}
/* .c-arrow
----------------------------------------*/
.c-link-btn .c-arrow { background-color: var(--linkbtn-arrow-bg); color: var(--linkbtn-arrow); }
.c-link-btn.-white .c-arrow { background-color: var(--linkbtn-white-arrow-bg); color: var(--linkbtn-white-arrow); }
.c-link-btn.-bg-white .c-arrow { background-color: var(--linkbtn-bg-white-arrow-bg); color: var(--linkbtn-bg-white-arrow); }
@media (hover: hover) {
.c-link-btn:hover .c-arrow { background-color: var(--linkbtn-arrow-bg-hover); color: var(--linkbtn-arrow-hover); }
.c-link-btn.-white:hover .c-arrow { background-color: var(--linkbtn-white-arrow-bg-hover); color: var(--linkbtn-white-arrow-hover); }
.c-link-btn.-bg-white:hover .c-arrow { background-color: var(--linkbtn-bg-white-arrow-bg-hover); color: var(--linkbtn-bg-white-arrow-hover); }
}
/*--------------------------------------------------------------------------------
.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; }
/*--------------------------------------------------------------------------------
.c-tel
--------------------------------------------------------------------------------*/
.c-tel {
--color-link-deco: none;
--color-link-hover-deco: none;
font-size: var(--tel-fs, var(--fs-2l));
font-weight: var(--tel-fw, 600);
line-height: 1;
display: inline-flex;
text-decoration: none;
}
.c-tel:before {
content: "";
width: 1em;
height: 1em;
background: var(--tel-icon-bg, var(--color-primary));
color: currentColor;
mask-image: var(--icon-tel);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 70%;
}
.c-tel,
.c-tel:hover { color: var(--tel-color, inherit); }
/*--------------------------------------------------------------------------------
button
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-btn
--------------------------------------------------------------------------------*/
:root {
/* default */
--btn-bg: var(--color-secondary);
--btn-bg-hover: var(--color-secondary-light);
--btn-txt: #FFF;
--btn-txt-hover: #FFF;
/* primary */
--btn-primary-bg: var(--color-primary);
--btn-primary-bg-hover: var(--color-primary-light);
--btn-primary-txt: #FFF;
--btn-primary-txt-hover: #FFF;
}
.c-btn {
/* reset */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
border: none;
margin: 0;
outline: none;
cursor: pointer;
color: inherit;
text-decoration: none;
line-height: 1.6;
display: inline-block;
text-align: center;
padding: 0.65rem 3rem;
border-radius: 9999px;
transition: var(--hover-trans);
}
.c-btn, .c-btn:hover,
.c-btn a, .c-btn a:hover { text-decoration: none; }
.c-btn { background-color: var(--btn-bg); color: var(--btn-txt); }
.c-btn.-primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-txt); }
@media (hover: hover) {
.c-btn { transition: var(--hover-trans); }
.c-btn:hover { background-color: var(--btn-bg-hover); color: var(--btn-txt-hover); }
.c-btn.-primary:hover { background-color: var(--btn-primary-bg-hover); color: var(--btn-primary-txt-hover); }
}
/*--------------------------------------------------------------------------------
table
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.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; }
}
/*--------------------------------------------------------------------------------
tag
--------------------------------------------------------------------------------*/
:root {
/* default */
--tag-bg: var(--color-primary);
--tag-bg-hover: var(--color-primary-light);
--tag-txt: #FFF;
--tag-txt-hover: #FFF;
--tag-outline: var(--color-primary);
--tag-outline-bg: trantparent;
--tag-outline-bg-hover: var(--color-primary);
--tag-outline-txt: var(--color-primary);
--tag-outline-txt-hover: #FFF;
}
/*--------------------------------------------------------------------------------
.c-tag-list
--------------------------------------------------------------------------------*/
.c-tag-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.c-tag-list a,
.c-tag-list a:hover { color: inherit; text-decoration: none; }
.c-tag-list li { line-height: 1.6; }
.c-tag-list a { display: block; }
.c-tag-list li:not(:has(a)),
.c-tag-list li a { padding: 0.25em 0.5em; }
/* default */
.c-tag-list li:not(:has(a)) { background-color: var(--tag-bg); color: var(--tag-txt); }
.c-tag-list li a { background-color: var(--tag-bg); color: var(--tag-txt); }
.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-list.-outline li a { border: 1px solid var(--tag-outline); background-color: var(--tag-outline-bg); color: var(--tag-outline-txt); }
@media (hover: hover) {
.c-tag-list li a:hover { background-color: var(--tag-bg-hover); color: var(--tag-txt-hover); }
.c-tag-list.-outline li a:hover { background-color: var(--tag-outline-bg-hover); color: var(--tag-outline-txt-hover); }
}
/*--------------------------------------------------------------------------------
list
--------------------------------------------------------------------------------*/
:root { --list-mgl: 1em; }
.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 { margin-left: var(--list-mgl); list-style: disc; }
ol.c-list { margin-left: var(--list-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);
}
/*--------------------------------------------------------------------------------
archive
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.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-tertiary); }
.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-light);
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); }
.c-archive-list a:hover .c-archive-list_ttl:after { color: var(--color-primary); }
@media (max-width: 640px) {
.c-archive-list_item:not(:has(a)),
.c-archive-list_item a {
flex-direction: column;
}
}
/*--------------------------------------------------------------------------------
.c-archive
--------------------------------------------------------------------------------*/
:root { --archive-item-gap: 1rem; }
@media (min-width: 1000px) { :root { --archive-column: 3; } }
@media (max-width: 999px) { :root { --archive-column: 2; } }
@media (max-width: 640px) { :root { --archive-column: 1; } }
.c-archive {
display: flex;
flex-wrap: var(--archive-item-wrap, wrap);
row-gap: var(--space-l);
}
.c-archive a,
.c-archive a:hover { color: inherit; text-decoration: none; }
.c-archive_item {
width: calc(100% / var(--archive-column));
height: 100%;
padding: 0 var(--archive-item-gap);
}
.c-archive_img img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
}
.c-archive_date { color: var(--color-tertiary); }
.c-archive_ttl {
padding-top: 1.25rem;
padding-right: 1rem;
font-size: var(--fs-m);
font-weight: bold;
line-height: 1.6;
transition: var(--hover-trans);
}
.c-archive a:hover .c-archive_ttl { color: var(--color-link-hover); }
.c-archive_desc {
padding-top: 0.5rem;
font-size: var(--fs-s);
padding-right: 1rem;
}
/*--------------------------------------------------------------------------------
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-tertiary);
}
.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: 2.5rem;
margin-bottom: var(--space-l);
}
/*--------------------------------------------------------------------------------
.c-article-block
--------------------------------------------------------------------------------*/
.c-article-block {
max-width: 1200px;
margin: 0 auto;
}
.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-tertiary);
}
/*--------------------------------------------------------------------------------
.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: var(--icon-pdf); }
.c-article-file_link.-doc:before { background-image: var(--icon-doc); }
.c-article-file_link.-xls:before { background-image: var(--icon-xls); }
.c-article-file_link.-ppt:before { background-image: var(--icon-ppt); }
.c-article-file_link { text-decoration: underline; }
.c-article-file_link:hover { text-decoration: none; }
/*--------------------------------------------------------------------------------
.c-article-back
--------------------------------------------------------------------------------*/
.c-article-back { text-align: center; }
.c-article-back .c-link-btn { margin: 0 auto; }
/*--------------------------------------------------------------------------------
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 {
--arrow-size: 2.5rem;
--arrow-bg-hover: var(--color-secondary-light);
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-primary); }
/* arrow
----------------------------------------*/
.c-pager_item.-prev { padding-right: 1.25rem; }
.c-pager_item.-next { padding-left: 1.25rem; }