@charset "utf-8";
/*--------------------------------------------------------------------------------
title
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-ttl
--------------------------------------------------------------------------------*/
.c-ttl { font-family: var(--ff-go); }
.c-ttl.-en {
font-size: var(--fs-4l);
font-weight: 700;
line-height: var(--line-height-3s);
}
.c-ttl.-en:not([class*="u-fc"]) { color: var(--ttl-color, var(--color-primary)); }
.c-ttl.-jp {
font-weight: 500;
line-height: var(--line-height-s);
margin-top: 0.5rem;
}
/*--------------------------------------------------------------------------------
.c-ttl2
--------------------------------------------------------------------------------*/
.c-ttl2 {
font-family: var(--ff-go);
font-size: var(--fs-2l);
font-weight: 700;
line-height: var(--line-height-s);
position: relative;
padding-left: max(var(--space-2s), 1.25rem);
}
.c-ttl2:before {
content: "";
width: 4px;
height: 80%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: var(--color-primary);
}
.c-ttl2:not([class*="u-mgb"]) { margin-bottom: var(--ttl2-mgb, var(--space-m)); }
/*--------------------------------------------------------------------------------
.c-ttl3
--------------------------------------------------------------------------------*/
.c-ttl3 {
border-top: var(--ttl3-border, 1px solid var(--color-primary));
font-family: var(--ff-go);
font-size: var(--fs-l);
font-weight: 700;
line-height: var(--line-height-s);
}
.c-ttl3:not([class*="u-fc"]) { color: var(--ttl3-color, var(--color-primary)); }
.c-ttl3:not([class*="u-mgb"]) { margin-bottom: var(--ttl3-mgb, var(--space-s)); }
.c-ttl3:not([class*="u-pdt"]) { padding-top: var(--ttl3-pdt, var(--space-s)); }
/*--------------------------------------------------------------------------------
.c-ttl4
--------------------------------------------------------------------------------*/
.c-ttl4 {
font-family: var(--ff-go);
font-size: var(--fs-2m);
font-weight: 500;
line-height: var(--line-height-s);
background-color: var(--ttl4-bg, var(--color-primary));
padding: min(var(--space-3s), 0.75rem) var(--space-3s);
border-radius: var(--ttl4-rd, var(--rd-h2));
}
.c-ttl4:not([class*="u-fc"]) { color: var(--ttl4-color, #FFF); }
.c-ttl4:not([class*="u-mgb"]) { margin-bottom: var(--ttl4-mgb, var(--space-m)); }
/*--------------------------------------------------------------------------------
.c-ttl5
--------------------------------------------------------------------------------*/
.c-ttl5 {
border-bottom: var(--ttl3-border, 1px solid var(--border-color));
padding-bottom: 0.75em;
font-family: var(--ff-go);
font-size: var(--fs-l);
font-weight: 700;
line-height: var(--line-height-s);
}
.c-ttl5:not([class*="u-fc"]) { color: var(--ttl5-color, inherit); }
.c-ttl5:not([class*="u-mgb"]) { margin-bottom: var(--ttl5-mgb, var(--space-m)); }
/*--------------------------------------------------------------------------------
icon
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
SVG
--------------------------------------------------------------------------------*/
:root {
/* arrow（→） */
--icon-arrow: url("../icon/arrow.svg");
--icon-arrow-thin: url("../icon/arrow_thin.svg");
/* contact */
--icon-tel: url("../icon/tel.svg");
--icon-freedial: url("../icon/freedial.svg");
--icon-mail: url("../icon/mail.svg");
/* new window */
--icon-newwin: url("../icon/newwin.svg");
/* file */
--icon-file: url("../icon/file.svg");
/* SNS */
--icon-fb: url('data:image/svg+xml;utf8,');
--icon-fb2: url('data:image/svg+xml;utf8,');
--icon-insta: url('data:image/svg+xml;utf8,');
--icon-x: url('data:image/svg+xml;utf8,');
--icon-line: url('data:image/svg+xml;utf8,');
--icon-line2: url('data:image/svg+xml;utf8,');
--icon-youtube: url('data:image/svg+xml;utf8,');
--icon-tiktok: url('data:image/svg+xml;utf8,');
}
/*--------------------------------------------------------------------------------
.c-sns
--------------------------------------------------------------------------------*/
:root { --sns-size: 1.5rem; }
.c-sns {
flex-shrink: 0;
width: var(--sns-size);
height: var(--sns-size);
line-height: 1;
display: inline-block;
vertical-align: middle;
position: relative;
background: currentColor;
color: currentColor;
mask-repeat: no-repeat;
mask-position: center center;
mask-size: cover;
}
.c-sns.-fb { mask-image: var(--icon-fb); }
.c-sns.-fb2 { mask-image: var(--icon-fb2); }
.c-sns.-insta { mask-image: var(--icon-insta); }
.c-sns.-x { mask-image: var(--icon-x); }
.c-sns.-line { mask-image: var(--icon-line); }
.c-sns.-line2 { mask-image: var(--icon-line2); }
.c-sns.-youtube { mask-image: var(--icon-youtube); }
.c-sns.-tiktok { mask-image: var(--icon-tiktok); }
/* logo color
----------------------------------------*/
.c-sns.-color[class*="-fb"] { background-color: #0866FF; }
.c-sns.-color[class*="-insta"] {
background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow: hidden;
}
.c-sns.-color[class*="-insta"]:before {
content: "";
width: 110%;
height: 110%;
position: absolute;
left: -25%;
top: 45%;
background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
.c-sns.-color[class*="-x"] { background-color: #000; }
.c-sns.-color[class*="-line"] { background-color: #06c755; }
.c-sns.-color[class*="-youtube"] { background-color: #FF0000; }
.c-sns.-color[class*="-tiktok"] { background-color: #000; }
/*--------------------------------------------------------------------------------
.c-arrow
--------------------------------------------------------------------------------*/
:root {
/* default */
--default-arrow-size: 2.2rem;
--default-arrow-outline: 1px solid var(--color-primary);
--default-arrow-outline-hover: 1px solid var(--color-primary);
--default-arrow-bg: var(--color-primary);
--default-arrow-bg-hover: transparent;
--default-arrow-color: #FFF;
--default-arrow-color-hover: var(--color-primary);
}
.c-arrow.-white {
--default-arrow-outline: 1px solid #FFF;
--default-arrow-outline-hover: 1px solid #FFF;
--default-arrow-bg: #FFF;
--default-arrow-bg-hover: transparent;
--default-arrow-color: var(--color-primary);
--default-arrow-color-hover: #FFF;
}
.c-arrow {
cursor: pointer;
display: inline-block;
line-height: 1;
width: var(--arrow-size, var(--default-arrow-size));
height: var(--arrow-size, var(--default-arrow-size));
color: var(--arrow-color, var(--default-arrow-color));
position: relative;
}
.c-arrow.-prev { transform: rotate(180deg); }
.c-arrow.-down { transform: rotate(90deg); }
.c-arrow.-up { transform: rotate(-90deg); }
.c-arrow:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
border: var(--arrow-outline, var(--default-arrow-outline));
background-color: var(--arrow-bg, var(--default-arrow-bg));
border-radius: 50%;
transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out, background 0.2s ease-in-out, border 0.15s ease-in-out, fill 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.4s var(--cubic-bezier);
}
.c-arrow_icon {
display: block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.c-arrow_icon:before,
.c-arrow_icon:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: currentColor;
color: currentColor;
mask-image: var(--arrow-icon, var(--icon-arrow));
mask-repeat: no-repeat;
mask-position: center center;
mask-size: var(--arrow-icon-size, 38%);
animation-fill-mode: forwards;
}
.c-arrow_icon:after { transform: translateX(-100%); }
@media (hover: hover) {
.c-arrow_icon:before { animation-duration: 0.2s; }
.c-arrow_icon:after, a .c-arrow_icon:after { animation-duration: 0.4s; }
.c-arrow:hover .c-arrow_icon:before, a:hover .c-arrow_icon:before,
.c-arrow-txt:hover .c-arrow_icon:before,
.c-arrow-link:hover .c-arrow_icon:before {
animation-name: arrow_before;
animation-delay: 0s;
}
.c-arrow:hover .c-arrow_icon:after, a:hover .c-arrow_icon:after,
.c-arrow-txt:hover .c-arrow_icon:after,
.c-arrow-link:hover .c-arrow_icon:after {
animation-name: arrow_after;
animation-delay: 0.05s;
}
.c-arrow.-no-anime .c-arrow_icon:before,
.c-arrow.-no-anime .c-arrow_icon:after,
.c-arrow[class*="disabled"] .c-arrow_icon:before,
.c-arrow[class*="disabled"] .c-arrow_icon:after { animation: none; }
a:hover .c-arrow,
.c-arrow:hover,
.c-arrow-txt:hover .c-arrow,
.c-arrow-link:hover .c-arrow {
color: var(--arrow-color-hover, var(--default-arrow-color-hover));
}
a:hover .c-arrow:before,
.c-arrow:hover:before,
.c-arrow-txt:hover .c-arrow:before,
.c-arrow-link:hover .c-arrow:before {
border: var(--arrow-outline-hover, var(--default-arrow-outline-hover));
background-color: var(--arrow-bg-hover, var(--default-arrow-bg-hover));
transform: scale(1.2);
}
a:hover .c-arrow.-no-anime:before,
.c-arrow.-no-anime:hover:before,
.c-arrow-txt:hover .c-arrow.-no-anime:before,
.c-arrow-link:hover .c-arrow.-no-anime:before,
a:hover .c-arrow[class*="disabled"]:hover:before,
.c-arrow[class*="disabled"]:hover:before { transform: none; }
}
@keyframes arrow_before {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes arrow_after {
0% { transform: translateX(-100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
/*--------------------------------------------------------------------------------
.c-arrow-txt
--------------------------------------------------------------------------------*/
.c-arrow-txt {
--link-color: var(--txt-color);
--link-color-hover: var(--color-primary);
--link-deco: none;
--link-deco-hover: none;
--default-arrow-txt-ff: ;
--default-arrow-txt-fs: ;
--default-arrow-txt-fw: ;
--default-arrow-txt-cgap: 1rem;
}
.c-arrow-txt .c-arrow { flex-shrink: 0; }
.c-arrow-txt {
vertical-align: top;
position: relative;
transition: var(--hover-trans);
}
.c-arrow-txt:has(.c-arrow) {
display: inline-flex;
align-items: center;
column-gap: var(--arrow-txt-cgap, var(--default-arrow-txt-cgap));
}
.c-arrow-txt:not([class*="u-ff"]) { font-family: var(--arrow-txt-ff, var(--default-arrow-txt-ff)); }
.c-arrow-txt:not([class*="u-fs"]) { font-size: var(--arrow-txt-fs, var(--default-arrow-txt-fs)); }
.c-arrow-txt:not([class*="u-fw"]) { font-weight: var(--arrow-txt-fw, var(--default-arrow-txt-fw)); }
/*--------------------------------------------------------------------------------
.c-arrow02
--------------------------------------------------------------------------------*/
:root {
/* default */
--default-arrow02-size: 2.2rem;
--default-arrow02-color: var(--color-primary);
--default-arrow02-color-hover: var(--color-primary);
}
.c-arrow02 {
display: inline-block;
line-height: 1;
width: var(--default-arrow02-size);
height: var(--default-arrow02-size);
color: var(--arrow02-color, var(--default-arrow02-color));
position: relative;
overflow: hidden;
transition: var(--hover-trans);
}
.c-arrow02.-prev { transform: scale(-1, 1); }
.c-arrow02:before,
.c-arrow02:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: currentColor;
color: currentColor;
mask-image: var(--icon-arrow-thin);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 42%;
animation-fill-mode: forwards;
}
.c-arrow02:after { transform: translateX(-100%); }
@media (hover: hover) {
.c-arrow02:before { animation-duration: 0.2s; }
.c-arrow02:after, a .c-arrow02:after { animation-duration: 0.4s; }
.c-arrow02:hover:before, a:hover .c-arrow02:before,
.c-arrow02-link:hover .c-arrow02:before {
animation-name: arrow_before;
animation-delay: 0s;
}
.c-arrow02:hover:after, a:hover .c-arrow02:after,
.c-arrow02-link:hover .c-arrow02:after {
animation-name: arrow_after;
animation-delay: 0.05s;
}
.c-arrow02.-no-anime:before,
.c-arrow02.-no-anime:after { animation: none; }
.c-arrow02:hover, a:hover .c-arrow02,
.c-arrow02-link:hover .c-arrow02 {
color: var(--arrow02-color-hover, var(--default-arrow02-color-hover));
}
}
/*--------------------------------------------------------------------------------
.c-newwin
--------------------------------------------------------------------------------*/
:root { --newwin-size: 1em; --newwin-mgl: 0.25rem; --newwin-mgr: 0.25rem; --newwin-mgb: 0.15rem; }
.c-newwin[target="_blank"]:after,
a[target="_blank"] .c-newwin:after,
.c-article-txt a[target="_blank"]:not(:has(img, p, div, span)):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: var(--newwin-color, var(--color-primary));
mask-image: var(--icon-newwin);
mask-repeat: no-repeat;
mask-position: center center;
transition: var(--hover-trans);
}
/*--------------------------------------------------------------------------------
.c-file
--------------------------------------------------------------------------------*/
:root { --file-size: 1rem; --file-mgl: 0.5rem; --file-mgr: 0; --file-mgb: 0.15rem; }
.c-file {
line-height: 1;
vertical-align: middle;
display: inline-flex;
align-items: center;
column-gap: 0.25rem;
font-size: var(--fs-3s);
color: var(--file-color, var(--color-primary));
}
.c-file:before {
content: "";
width: var(--file-size);
height: var(--file-size);
display: inline-block;
margin-left:var(--file-mgl);
margin-right: var(--file-mgr);
margin-bottom: var(--file-mgb);
background: currentColor;
color: inherit;
mask-image: var(--icon-file);
mask-repeat: no-repeat;
mask-position: center center;
transition: var(--hover-trans);
}
/*--------------------------------------------------------------------------------
button
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-btn
--------------------------------------------------------------------------------*/
:root {
/* default */
--default-btn-fs: 1.1rem;
--default-btn-ff: var(--ff-go);
--default-btn-fw: 500;
--default-btn-txt: #FFF;
--default-btn-txt-hover: var(--color-primary);
--default-btn-icon-size: 1.5rem;
--default-btn-icon-side: 2.5rem;
--default-btn-arrow-size: var(--default-arrow-size);
--default-btn-arrow-side: 0.75rem;
--default-btn-pd: 1rem;
--default-btn-pd-side: 2rem;
/*--default-btn-width: ;*/
/*--default-btn-width-min: ;*/
--default-btn-radius: 9999px;
--default-btn-bg: var(--color-primary);
--default-btn-bg-hover: transparent;
--default-btn-outline: 1px solid transparent;
--default-btn-outline-hover: 1px solid var(--color-primary);
--default-btn-arrow-bg: #FFF;
--default-btn-arrow-bg-hover: transparent;
--default-btn-arrow-color: var(--color-primary);
--default-btn-arrow-color-hover: var(--color-primary);
--default-btn-icon-color: var(--color-primary);
--default-btn-icon-color-hover: var(--color-primary);
}
@media not (max-width: 760px) {
:root { --default-btn-width-min: min(100%, 300px); }
}
@media (max-width: 760px) {
:root { --default-btn-width-min: min(70%, 300px); }
}
.c-btn.-white {
--btn-txt: var(--color-primary);
--btn-txt-hover: #FFF;
--btn-bg: #FFF;
--btn-bg-hover: transparent;
--btn-outline: 1px solid transparent;
--btn-outline-hover: 1px solid #FFF;
--btn-arrow-bg: var(--color-primary);
--btn-arrow-bg-hover: transparent;
--btn-arrow-color: #FFF;
--btn-arrow-color-hover: #FFF;
--btn-icon-color: #FFF;
--btn-icon-color-hover: #FFF;
}
.c-btn:has(.c-btn_arrow, .c-btn_icon) {
--default-btn-pd-side: 1.5rem;
}
.c-btn:has(.c-file) {
--file-size: var(--default-btn-icon-size);
--file-mgr: 0;
--file-mgb: 0;
--file-mgl: 0;
--btn-file-filter: brightness(0) invert(1);
--btn-file-filter-hover: none;
}
.c-btn:has(.c-newwin) {
--newwin-mgl: 0;
--newwin-mgr: 0;
--newwin-mgb: 0;
}
.c-btn[data-btn-radius="0"] { --default-btn-radius: 0; }
.c-btn:not([data-btn-icon="auto"]) { --default-btn-cgap: 0; }
.c-btn {
--link-deco: none;
--link-deco-hover: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
border: none;
margin: 0;
outline: none;
cursor: pointer;
text-decoration: none;
line-height: var(--btn-line-height, var(--line-height-s));
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
transition: var(--hover-trans);
width: var(--btn-width, var(--default-btn-width));
min-width: var(--btn-width-min, var(--default-btn-width-min));
padding: var(--btn-pd, var(--default-btn-pd)) var(--btn-pd-side, var(--default-btn-pd-side));
border-radius: var(--btn-radius, var(--default-btn-radius));
border: var(--btn-outline, var(--default-btn-outline));
background-color: var(--btn-bg, var(--default-btn-bg));
color: var(--btn-txt, var(--default-btn-txt));
}
.c-btn:not([class*="u-fs"]) { font-size: var(--btn-fs, var(--default-btn-fs)); }
.c-btn:not([class*="u-fw"]) { font-weight: var(--btn-txt-fw, var(--default-btn-fw)); }
.c-btn:not([class*="u-ff"]) { font-family: var(--btn-txt-ff, var(--default-btn-ff)); }
.c-btn[data-btn-icon="auto"]:not([class*="u-cgap"], [class*="u-gap"]) { column-gap: var(--btn-cgap, var(--default-btn-cgap)); }
.c-btn, .c-btn:hover { color: var(--btn-txt, var(--default-btn-txt)); text-decoration: none; }
@media (hover: hover) {
.c-btn:hover {
background-color: var(--btn-bg-hover, var(--default-btn-bg-hover));
border: var(--btn-outline-hover, var(--default-btn-outline-hover));
color: var(--btn-txt-hover, var(--default-btn-txt-hover));
}
}
.c-btn_txt { text-align: center; }
.c-btn:not([data-btn-icon="auto"]):has(.c-btn_arrow, .c-btn_icon) .c-btn_txt { flex-grow: 2; }
.c-btn:has(.c-btn_arrow:not(:first-of-type)) { padding-right: var(--default-btn-arrow-side); }
.c-btn[data-btn-icon="auto"]:has(.c-btn_icon:not(:first-of-type)) { padding-right: var(--default-btn-icon-side); }
.c-btn:has(.c-btn_arrow:first-of-type) { padding-left: var(--default-btn-arrow-side); }
.c-btn[data-btn-icon="auto"]:has(.c-btn_icon:first-of-type) { padding-left: var(--default-btn-icon-side); }
.c-btn:has(.c-btn_arrow:not(:first-of-type)) .c-btn_txt,
.c-btn:not([data-btn-icon="auto"]):has(.c-btn_icon:not(:first-of-type)) .c-btn_txt { padding-right: var(--default-btn-pd-side); }
.c-btn:has(.c-btn_arrow:not(:first-of-type)) .c-btn_txt { padding-left: var(--default-btn-arrow-size); }
.c-btn:has(.c-btn_icon:not(:first-of-type)) .c-btn_txt { padding-left: var(--default-btn-icon-size); }
.c-btn:has(.c-btn_arrow:first-of-type) .c-btn_txt,
.c-btn:not([data-btn-icon="auto"]):has(.c-btn_icon:first-of-type) .c-btn_txt { padding-left: var(--default-btn-pd-side); }
.c-btn:has(.c-btn_arrow:first-of-type) .c-btn_txt { padding-right: var(--default-btn-arrow-size); }
.c-btn:has(.c-btn_icon:first-of-type) .c-btn_txt { padding-right: var(--default-btn-icon-size); }
.c-btn_arrow,
.c-btn_icon {
flex-shrink: 0;
line-height: 1;
position: relative;
transition: var(--hover-trans);
}
.c-btn_arrow { overflow: hidden; }
.c-btn_icon {
color: var(--btn-icon-color, var(--default-btn-icon-color));
}
.c-btn_icon:not(.c-file, .c-newwin) {
width: var(--btn-icon-size, var(--default-btn-icon-size));
height: var(--btn-icon-size, var(--default-btn-icon-size));
}
.c-btn .c-btn_arrow.-prev { transform: scale(-1, 1); }
.c-btn_arrow {
line-height: 1;
width: var(--btn-arrow-size, var(--default-btn-arrow-size));
height: var(--btn-arrow-size, var(--default-btn-arrow-size));
background-color: var(--btn-arrow-bg, var(--default-btn-arrow-bg));
color: var(--btn-arrow-color, var(--default-btn-arrow-color));
border-radius: 50%;
position: relative;
overflow: hidden;
transition: var(--hover-trans);
}
.c-btn_arrow:before,
.c-btn_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;
}
.c-btn_arrow:after { transform: translateX(-100%); }
.c-btn .c-file { filter: var(--btn-file-filter, var(--default-btn-file-filter)); }
@media (hover: hover) {
.c-btn_arrow:before { animation-duration: 0.2s; }
.c-btn_arrow:after { animation-duration: 0.4s; }
.c-btn:hover .c-btn_arrow:before {
animation-name: arrow_before;
animation-delay: 0s;
}
.c-btn:hover .c-btn_arrow:after {
animation-name: arrow_after;
animation-delay: 0.05s;
}
.c-btn:hover .c-btn_arrow {
background-color: var(--btn-arrow-bg-hover, var(--default-btn-arrow-bg-hover));
color: var(--btn-arrow-color-hover, var(--default-btn-arrow-color-hover));
}
.c-btn:hover .c-btn_icon { color: var(--btn-icon-color-hover, var(--default-btn-icon-color-hover)); }
.c-btn:hover .c-file { filter: var(--btn-file-filter-hover, var(--default-btn-file-filter-hover)); }
}
/*--------------------------------------------------------------------------------
list
--------------------------------------------------------------------------------*/
:root { --list-mgl: 1.15em; --list-ol-mgl: 1.15em; }
.c-list { display: flex; flex-direction: column; }
.c-list:not([class*="u-rgap"]):not([class*="u-gap"]) { row-gap: var(--list-rgap, 0.25rem); }
.c-list, ol.c-list { overflow: hidden; }
.c-list:not([data-list-style="none"]) > li { left: var(--list-mgl); padding-right: var(--list-mgl); list-style-type: disc; position: relative; }
ol.c-list:not([data-list-style="none"]) > li { left: var(--list-ol-mgl); padding-right: var(--list-ol-mgl); list-style-type: decimal; position: relative; }
.c-list[data-list-type="circle"] > li { list-style: circle; }
.c-list ul:not([class*="c-list"]):not(.c-notes),
.c-list ol:not([class*="c-list"]):not(.c-notes) { padding-left: 0.85em; }
/* .c-list-mark
----------------------------------------*/
.c-list-mark { --default-list-mark-size: 0.75em; --default-list-mark-mgt: 0.25em; --default-list-mark-pdl: 0.5em; }
.c-list-mark { display: flex; flex-direction: column; }
.c-list-mark:not([class*="u-rgap"]):not([class*="u-gap"]) { row-gap: var(--list-rgap, 0.25rem); }
.c-list-mark li,
.c-list-mark:not(:has(li)) { position: relative; padding-left: calc(var(--list-mark-size, var(--default-list-mark-size)) + var(--list-mark-pdl, var(--default-list-mark-pdl))); }
.c-list-mark li:before,
.c-list-mark:not(:has(li)):before {
content: "";
width: var(--list-mark-size, var(--default-list-mark-size));
height: var(--list-mark-size, var(--default-list-mark-size));
font-size: var(--list-mark-fs);
display: inline-block;
vertical-align: middle;
background-color: var(--list-mark-color, var(--color-primary));
position: absolute;
left: 0;
top: calc((1em - var(--list-mark-size, var(--default-list-mark-size))) + var(--list-mark-mgt, var(--default-list-mark-mgt)));
}
.c-list-mark.-circle li:before,
.c-list-mark.-circle:not(:has(li)):before {
border-radius: 50%;
}
/* .c-list-dot
----------------------------------------*/
.c-list-dot { --default-list-dot-size: 1em; --default-list-dot-mgt: 0; --default-list-dot-pdl: 0em; }
.c-list-dot { display: flex; flex-direction: column; }
.c-list-dot:not([class*="u-rgap"]):not([class*="u-gap"]) { row-gap: var(--list-rgap, 0.25rem); }
.c-list-dot li,
.c-list-dot:not(:has(li)) { position: relative; padding-left: calc(var(--list-dot-size, var(--default-list-dot-size)) + var(--list-dot-pdl, var(--default-list-dot-pdl))); }
.c-list-dot li:before,
.c-list-dot:not(:has(li)):before {
content: "・";
width: var(--list-dot-size, var(--default-list-dot-size));
height: var(--list-dot-size, var(--default-list-dot-size));
display: inline-block;
vertical-align: middle;
position: absolute;
left: 0;
top: calc((1em - var(--list-dot-size, var(--default-list-dot-size))) + var(--list-dot-mgt, var(--default-list-dot-mgt)));
}
/* .c-list-txt
.c-notes
----------------------------------------*/
.c-list-txt:has(li),
.c-notes:has(li) { display: flex; flex-direction: column; }
.c-list-txt:not(:has(li)),
.c-list-txt li:not(.col-full),
.c-notes:not(:has(li)),
.c-notes li:not(.col-full) { display: grid; grid-template-columns: max-content 1fr; }
.c-list-txt:not(:has(li)):not([class*="u-cgap"]):not([class*="u-gap"]),
.c-list-txt li:not([class*="u-cgap"]):not([class*="u-gap"]),
.c-notes:not(:has(li)):not([class*="u-cgap"]):not([class*="u-gap"]),
.c-notes li:not([class*="u-cgap"]):not([class*="u-gap"]) { column-gap: var(--list-txt-cgap, 0.25em); }
.c-list-txt:has(li):not([class*="u-rgap"]):not([class*="u-gap"]),
.c-notes:has(li):not([class*="u-rgap"]):not([class*="u-gap"]) { row-gap: var(--list-txt-rgap, 0.25rem); }
/* .c-list-kten
----------------------------------------*/
.c-list-kten li { display: inline; }
.c-list-kten li:not(:last-child):after {
content: "、";
width: 1em;
height: 1em;
}
/* .c-list-slash
----------------------------------------*/
.c-list-slash li { display: inline; }
.c-list-slash li:not(:last-child):after {
content: "／";
width: 1em;
height: 1em;
margin: 0 0.25rem;
}
/*--------------------------------------------------------------------------------
anchor list
--------------------------------------------------------------------------------*/
@media not (max-width: 1200px) {
.c-anchor-list { --default-col: 4; }
}
@media (max-width: 1200px) {
.c-anchor-list { --default-col: 3; }
}
@media (max-width: 760px) {
.c-anchor-list { --default-col: 2; }
}
.c-anchor-list {
--link-color: var(--txt-color);
--link-color-hover: var(--color-primary);
--link-deco: none;
--link-deco-hover: none;
--arrow-outline: 1px solid var(--border-color);
--arrow-outline-hover: 1px solid var(--color-primary);
--arrow-bg: transparent;
--default-arrow-bg-hover: transparent;
--arrow-color: var(--color-gray-light);
--arrow-color-hover: var(--color-primary);
display: grid;
grid-template-columns: repeat(var(--col, var(--default-col)), 1fr);
gap: 0 var(--space-s);
}
.c-anchor-list li {
line-height: var(--line-height-s);
border-bottom: 1px solid var(--border-color);
font-weight: bold;
}
.c-anchor-list li:not(:has(a)),
.c-anchor-list a {
height: 100%;
padding: 1.5rem 0;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 1.5rem;
}
/*--------------------------------------------------------------------------------
table
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-tbl（editor用）
--------------------------------------------------------------------------------*/
.c-tbl {
--tbl-border-color: var(--border-color-dark);
border-collapse: collapse;
line-height: var(--line-height-s);
}
.c-tbl th,
.c-tbl td {
padding: 0.75rem 1rem;
border-width: 1px;
border-style: solid;
border-color: var(--tbl-border-color);
}
.c-tbl thead th,
.c-tbl thead td {
padding: 0.5rem 1rem;
}
@media (max-width: 760px) {
.c-tbl th,
.c-tbl td { padding: 0.75rem; }
.c-tbl thead th,
.c-tbl thead td {
padding: 0.5rem 0.75rem;
}
}
/*--------------------------------------------------------------------------------
.c-tbl2
--------------------------------------------------------------------------------*/
.c-tbl2 {
--tbl2-border-color: var(--border-color-dark);
--tbl2-thead-color: var(--bg-gray);
--tbl2-thead-pd: 0.75rem;
--tbl2-tbody-pd: 1.5rem 1rem;
width: 100%;
border-collapse: collapse;
line-height: var(--line-height-s);
}
@media not (max-width: 760px) {
.c-tbl2[data-pd="s"] { --tbl2-tbody-pd: 1.25rem 1rem; }
.c-tbl2[data-pd="2s"] { --tbl2-tbody-pd: 1rem 1rem; }
}
@media (max-width: 760px) {
.c-tbl2 { --tbl2-tbody-pd: 1.5rem 0.75rem; }
.c-tbl2[data-pd="s"] { --tbl2-tbody-pd: 1.25rem 0.75rem; }
.c-tbl2[data-pd="2s"] { --tbl2-tbody-pd: 1rem 0.75rem; }
}
@media (max-width: 500px) {
.c-tbl2 { --tbl2-tbody-pd: 1.25rem 0.75rem; }
.c-tbl2[data-pd="s"] { --tbl2-tbody-pd: 1rem 0.75rem; }
.c-tbl2[data-pd="2s"] { --tbl2-tbody-pd: 0.75rem; }
}
.c-tbl2 caption {
font-weight: bold;
padding-bottom: 0.75rem;
}
.c-tbl2 th,
.c-tbl2 td {
padding: var(--tbl2-tbody-pd);
border: 1px solid var(--tbl2-border-color);
}
.c-tbl2 thead th,
.c-tbl2 thead td {
padding: var(--tbl2-thead-pd);
background-color: var(--tbl2-thead-color);
}
.c-tbl2:not(:has(thead)) th:first-of-type {
background-color: var(--tbl2-thead-color);
}
.c-tbl2 th[data-label] { display: none; }
@media (max-width: 760px) {
.c-tbl2[data-break="tab"] { display: grid; }
.c-tbl2[data-break="tab"] thead { display: none; }
.c-tbl2[data-break="tab"] tr {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
.c-tbl2[data-break="tab"]:not([data-type="1"]) tbody tr:not(:first-child) {
margin-top: var(--tbl2-tr-mgt, var(--space-s));
}
.c-tbl2[data-break="tab"][data-type="1"] tbody tr:not(:first-child) {
margin-top: var(--tbl2-tr-mgt, var(--space-2s));
}
.c-tbl2[data-break="tab"][data-type="1"] tr {
grid-template-columns: var(--tbl2-row-th-width, 30%) 1fr;
}
.c-tbl2[data-break="tab"][data-type="1"] th[data-group] {
grid-column: span 2;
padding: var(--tbl2-thead-pd);
}
.c-tbl2[data-break="tab"] th,
.c-tbl2[data-break="tab"] td {
width: 100% !important;
height: 100% !important;
text-align: left;
}
.c-tbl2[data-break="tab"]:not([data-type="1"]) td,
.c-tbl2[data-break="tab"]:not([data-type="1"]):not(:has(thead)) tr:not(:first-child) th,
.c-tbl2[data-break="tab"]:not([data-type="1"]):has(thead) th[data-label]:not(:first-child),
.c-tbl2[data-break="tab"][data-type="1"] tr:not(:has(th[data-group])) td:not(:first-of-type),
.c-tbl2[data-break="tab"][data-type="1"] tr:not(:has(th[data-group])) th:not(:first-of-type),
.c-tbl2[data-break="tab"][data-type="1"] tr:has(th[data-group]):first-of-type td:not(:first-of-type),
.c-tbl2[data-break="tab"][data-type="1"] tr:has(th[data-group]):first-of-type th:not(th[data-group] + th[data-label]) {
border-top: 0;
}
.c-tbl2[data-break="tab"][data-type] th {
border-right: 0;
}
.c-tbl2[data-break="tab"]:has(thead) th[data-label] {
font-weight: bold;
display: grid;
padding: var(--tbl2-thead-pd);
background-color: var(--tbl2-thead-color);
}
.c-tbl2[data-break="tab"][data-type]:has(thead) th[data-label] {
padding: var(--tbl2-tbody-pd);
}
.c-tbl2[data-break="tab"]:has(thead) th[data-label]:after {
content: attr(data-label);
}
.c-tbl2[data-break="tab"]:not(:has(thead)):not([data-type]) th {
padding: var(--tbl2-thead-pd);
}
}
@media (max-width: 500px) {
.c-tbl2[data-break="sp"] { display: grid; }
.c-tbl2[data-break="sp"] thead { display: none; }
.c-tbl2[data-break="sp"] tr {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
.c-tbl2[data-break="sp"]:not([data-type="1"]) tbody tr:not(:first-child) {
margin-top: var(--tbl2-tr-mgt, var(--space-s));
}
.c-tbl2[data-break="sp"][data-type="1"] tbody tr:not(:first-child) {
margin-top: var(--tbl2-tr-mgt, var(--space-2s));
}
.c-tbl2[data-break="sp"][data-type="1"] tr {
grid-template-columns: var(--tbl2-row-th-width, 30%) 1fr;
}
.c-tbl2[data-break="sp"][data-type="1"] th[data-group] {
grid-column: span 2;
padding: var(--tbl2-thead-pd);
}
.c-tbl2[data-break="sp"] th,
.c-tbl2[data-break="sp"] td {
width: 100% !important;
height: 100% !important;
text-align: left;
}
.c-tbl2[data-break="sp"]:not([data-type="1"]) td,
.c-tbl2[data-break="sp"]:not([data-type="1"]):not(:has(thead)) tr:not(:first-child) th,
.c-tbl2[data-break="sp"]:not([data-type="1"]):has(thead) th[data-label]:not(:first-child),
.c-tbl2[data-break="sp"][data-type="1"] tr:not(:has(th[data-group])) td:not(:first-of-type),
.c-tbl2[data-break="sp"][data-type="1"] tr:not(:has(th[data-group])) th:not(:first-of-type),
.c-tbl2[data-break="sp"][data-type="1"] tr:has(th[data-group]):first-of-type td:not(:first-of-type),
.c-tbl2[data-break="sp"][data-type="1"] tr:has(th[data-group]):first-of-type th:not(th[data-group] + th[data-label]) {
border-top: 0;
}
.c-tbl2[data-break="sp"][data-type="1"] th {
border-right: 0;
}
.c-tbl2[data-break="sp"]:has(thead) th[data-label] {
font-weight: bold;
display: grid;
padding: var(--tbl2-thead-pd);
background-color: var(--tbl2-thead-color);
}
.c-tbl2[data-break="sp"][data-type]:has(thead) th[data-label] {
padding: var(--tbl2-tbody-pd);
}
.c-tbl2[data-break="sp"]:has(thead) th[data-label]:after {
content: attr(data-label);
}
.c-tbl2[data-break="sp"]:not(:has(thead)):not([data-type]) th {
padding: var(--tbl2-thead-pd);
}
}
/*--------------------------------------------------------------------------------
.c-tbl3
--------------------------------------------------------------------------------*/
.c-tbl3 {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid var(--border-color-dark);
line-height: var(--line-height-s);
}
.c-tbl3 th,
.c-tbl3 td {
border-bottom: 1px solid var(--border-color-dark);
padding: 1.5rem;
}
.c-tbl3 th {
background-color: var(--bg-gray);
font-size: var(--fs-m);
white-space: nowrap;
width: var(--tbl3-th-width, 22%);
padding-top: calc(1.5rem - (1em - 1rem));
}
@media (max-width: 760px) {
.c-tbl3 {
display: grid;
}
.c-tbl3 tr {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
.c-tbl3 th,
.c-tbl3 td {
width: 100% !important;
height: 100% !important;
}
.c-tbl3 th {
padding: 0.5em 0.75rem;
font-size: var(--fs-m);
line-height: var(--line-height-s);
border-bottom: 0;
}
.c-tbl3 th:after {
display: none;
}
.c-tbl3 td {
padding: var(--space-m) 0.75rem;
}
.c-tbl3 tr:last-of-type td {
border-bottom: 0;
padding-bottom: 0;
}
}
/*--------------------------------------------------------------------------------
caption
--------------------------------------------------------------------------------*/
.c-cap {
position: relative;
}
.c-cap_txt {
font-size: var(--fs-s);
background-color: #FFF;
position: absolute;
left: 0;
bottom: 0;
border-radius: 0 var(--rd-q) 0 0;
padding: 1rem 1.25rem 0.75rem 1.25rem;
}
.c-cap_txt:after {
content: "";
width: var(--rd-q);
height: var(--rd-q);
display: inline-block;
position: absolute;
left: 100%;
bottom: 0;
background-color: #FFF;
mask: url("../img/mask_corner.svg") no-repeat left bottom;
background-size: contain;
}
.c-cap_txt.-cap-right {
border-radius: var(--rd-q) 0 0 0;
left: inherit;
right: 0;
}
.c-cap_txt.-cap-right:after {
left: inherit;
right: 100%;
transform: rotate(-90deg);
}
/*--------------------------------------------------------------------------------
text animation
--------------------------------------------------------------------------------*/
.c-text-animation {
opacity: 0;
overflow: hidden;
display: inline-flex;
}
.c-text-animation:not(.-no-wrap) { flex-wrap: wrap; }
.c-text-animation.is-active { opacity: 1; }
.c-text-animation_item {
opacity: 0;
transform: translateY(50%);
min-width: 0.25em; /* 半角スペース用 */
}
.c-text-animation.is-active .c-text-animation_item {
animation: text-animation 1.2s var(--cubic-bezier);
animation-fill-mode: forwards;
}
@keyframes text-animation {
from { opacity: 0; transform: translateY(50%); }
to { opacity: 1; transform: translateY(0); }
}
/*--------------------------------------------------------------------------------
archive
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-archive-list
--------------------------------------------------------------------------------*/
.c-archive-list {
--link-color: var(--txt-color);
--link-color-hover: var(--color-primary);
--link-deco: none;
--link-deco-hover: none;
display: flex;
flex-direction: column;
}
.c-archive-list_item {
border-bottom: 1px solid var(--border-color);
line-height: var(--line-height-s);
}
.c-archive-list_item:first-of-type {
margin-top: -1.25rem;
}
.c-archive-list_item:not(:has(a)),
.c-archive-list_item a {
display: flex;
column-gap: var(--space-s);
row-gap: 0.25rem;
padding: 1.25rem 0;
}
.c-archive-list_date {
flex-shrink: 0;
color: var(--color-gray);
font-size: var(--fs-s);
}
.archive-list_ttl-area {
--newwin-mgl: 0;
--newwin-mgr: 0;
--file-mgl: 0;
--file-mgr: 0;
}
.archive-list_ttl {
margin-right: 0.5rem;
}
@media not (max-width: 500px) {
.c-archive-list_date {
margin-top: calc(1rem - 1em);
}
/* Google翻訳 */
html.translated-ltr .c-archive-list_date { width: 10rem; }
}
@media (max-width: 500px) {
.c-archive-list_item:not(:has(a)),
.c-archive-list_item a {
flex-direction: column;
}
}
/*--------------------------------------------------------------------------------
.c-archive
--------------------------------------------------------------------------------*/
.c-archive { --cgap: var(--space-s); --rgap: var(--space-2l); }
@media not (max-width: 1200px) { .c-archive { --col: 4; } }
@media (max-width: 1200px) { .c-archive { --col: 3; } }
@media (max-width: 760px) { .c-archive { --col: 2; } }
.c-archive {
--link-color: var(--txt-color);
--link-color-hover: var(--color-primary);
--link-deco: none;
--link-deco-hover: none;
}
.c-archive:not(.-slider) {
display: grid;
grid-template-columns: repeat(var(--col), 1fr);
gap: var(--rgap) var(--cgap);
}
.c-archive_item {
line-height: var(--line-height-s);
}
.c-archive_img {
margin-bottom: 1rem;
border-radius: var(--rd-q);
overflow: hidden;
}
.c-archive_img img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
}
.c-archive_date {
font-size: var(--fs-s);
color: var(--color-gray);
display: inline-block;
margin-bottom: 0.5rem;
}
.c-archive_ttl-area {
--newwin-mgl: 0;
--newwin-mgr: 0;
--file-mgl: 0;
--file-mgr: 0;
}
.c-archive_ttl {
transition: var(--hover-trans);
margin-right: 0.5rem;
}
@media (hover: hover) {
.c-archive_item a:hover .c-archive_ttl { color: var(--link-color-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);
font-size: var(--fs-s);
}
.c-article-date {
display: inline-block;
margin-bottom: 0.75rem;
}
.c-article-ttl {
line-height: var(--line-height-s);
font-family: var(--ff-go);
font-size: var(--fs-2l);
font-weight: 600;
}
/*--------------------------------------------------------------------------------
.c-article-block-area
.c-article-block
--------------------------------------------------------------------------------*/
.c-article-block-area {
padding-top: var(--space-l);
}
.c-article-block {
width: 100%;
}
.c-article-block-area > .c-article-block:not(:last-of-type) {
padding-bottom: var(--space-l);
}
.c-article-block:after {
content: "";
display: block;
height: 0;
clear: both;
}
/*--------------------------------------------------------------------------------
.c-article-columns
--------------------------------------------------------------------------------*/
.c-article-columns { --cgap: var(--space-3s); --rgap: var(--space-3s); }
.c-article-columns:has(.c-article-txt) { --cgap: var(--space-s); --rgap: var(--space-l); }
.c-article-columns.-col1 { --col: 100%; }
.c-article-columns:not(.-col1) .c-article-img { --pdb: var(--space-2s); }
@media not (max-width: 760px) { .c-article-columns.-col1 .c-article-img.-center { --pdt: var(--space-l); --pdb: var(--space-l); } }
/* col4 */
@media not (max-width: 1000px) { .c-article-columns.-col4 { --col: calc(((100% + var(--cgap)) / 4) - var(--cgap)); } }
@media (max-width: 1000px) { .c-article-columns.-col4 { --col: calc(((100% + var(--cgap)) / 3) - var(--cgap)); } }
@media (max-width: 760px) { .c-article-columns.-col4 { --col: calc(((100% + var(--cgap)) / 2) - var(--cgap)); } }
/* col3 */
@media not (max-width: 1000px) { .c-article-columns.-col3 { --col: calc(((100% + var(--cgap)) / 3) - var(--cgap)); } }
@media (max-width: 1000px) { .c-article-columns.-col3 { --col: calc(((100% + var(--cgap)) / 2) - var(--cgap)); } }
@media (max-width: 500px) {
.c-article-columns.-col3 { --col: 100%; }
.c-article-columns.-col3 .c-article-img { --pdb: var(--space-m); }
.c-article-columns.-col3 > .c-article-block:has(.c-article-txt) { padding-bottom: calc(var(--space-2l) - var(--space-l)); }
}
/* col2 */
@media not (max-width: 500px) { .c-article-columns.-col2 { --col: calc(((100% + var(--cgap)) / 2) - var(--cgap)); } }
@media (max-width: 500px) {
.c-article-columns.-col2 { --col: 100%; }
.c-article-columns.-col2 .c-article-img { --pdb: var(--space-m); }
.c-article-columns.-col2 > .c-article-block:has(.c-article-txt) { padding-bottom: calc(var(--space-2l) - var(--space-l)); }
}
.c-article-columns {
display: flex;
flex-wrap: wrap;
align-items: start;
column-gap: var(--cgap);
row-gap: var(--rgap);
}
.c-article-columns:has(+ .c-article-columns) {
padding-bottom: var(--space-m);
}
.c-article-columns:has(+ .c-article-heading, + .c-article-sheading) {
padding-bottom: var(--space-l);
}
.c-article-columns:has(+ .c-article-block) {
padding-bottom: var(--space-2l);
}
.c-article-columns .c-article-block {
flex-basis: calc(var(--col) - 0.01px);
/*max-width: fit-content;*/
align-self: stretch;
}
.c-article-columns > .c-article-heading,
.c-article-columns > .c-article-sheading {
width: 100%;
margin-bottom: calc(-1 * var(--rgap));
}
.c-article-columns .c-article-block:has(> .c-article-img:nth-child(1):last-child) .c-article-img {
margin-left: 0;
margin-right: 0;
}
@media not (max-width: 760px) {
/*.c-article-columns .c-article-block:has(.c-article-txt) { flex-grow: 1; }*/
.c-article-columns .c-article-img.-left { margin-right: var(--space-s); }
.c-article-columns .c-article-img.-right { margin-left: var(--space-s); }
.c-article-columns.-col1 .c-article-img.-left { margin-right: var(--space-l); }
.c-article-columns.-col1 .c-article-img.-right { margin-left: var(--space-l); }
}
@media (max-width: 760px) {
.c-article-columns .c-article-img {
min-width: fit-content;
}
}
/*--------------------------------------------------------------------------------
.c-article-txt
--------------------------------------------------------------------------------*/
.c-article-txt ul:not([class*="c-list"]),
.c-article-txt ol:not([class*="c-list"]) { overflow: hidden; }
.c-article-txt ul:not([class*="c-list"]) li { left: var(--list-mgl); padding-right: var(--list-mgl); list-style-type: disc; position: relative; }
.c-article-txt ol:not([class*="c-list"]) li { left: var(--list-ol-mgl); padding-right: var(--list-ol-mgl); list-style-type: decimal; position: relative; }
.c-article-txt img { vertical-align: middle; }
.c-article-txt table:not([class]) { max-width: 100%; }
@media not (max-width: 760px) {
.c-article-txt table.-auto { width: auto; }
}
/* 絵文字 */
.c-article-txt img[src*="_mfile/smiley/"] {
width: 1rem;
vertical-align: middle;
margin-bottom: 0.15rem;
}
/*--------------------------------------------------------------------------------
.c-article-heading
.c-article-sheading
--------------------------------------------------------------------------------*/
.c-article-heading,
.c-article-sheading { padding-top: calc(var(--space-2l) - var(--space-l)); }
/*--------------------------------------------------------------------------------
.c-article-img
--------------------------------------------------------------------------------*/
.c-article-img { --pdb: var(--space-s); }
.c-article-img.-center { --pdt: var(--space-l); --pdb: var(--space-l); }
@media (max-width: 760px) {
.c-article-img:not(:has(.c-article-img_cap)) { --pdb: var(--space-m); }
}
.c-article-img.-center {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.c-article-block:has(.c-article-txt) .c-article-img {
padding-bottom: var(--pdb);
}
.c-article-txt + .c-article-img.-center {
padding-top: var(--pdt);
padding-bottom: 0;
}
.c-article-img img {
max-width: inherit;
width: 100%;
}
@media not (max-width: 760px) {
.c-article-img.-left,
.c-article-img.-right {
display: inline-block;
}
.c-article-img.-left {
float: left;
margin-right: var(--space-l);
}
.c-article-img.-right {
float: right;
margin-left: var(--space-l);
}
}
@media (max-width: 760px) {
.c-article-img {
width: auto !important;
min-width: fit-content;
margin-left: auto;
margin-right: auto;
}
.c-article-img img {
width: auto !important;
max-width: 100% !important;
}
}
/* caption */
.c-article-img_cap {
text-align: center;
padding-top: 0.5rem;
padding-bottom: 1rem;
font-size: var(--fs-s);
}
/*--------------------------------------------------------------------------------
.c-article-file
--------------------------------------------------------------------------------*/
.c-article-txt + .c-article-file {
margin-top: var(--space-s);
}
/*--------------------------------------------------------------------------------
alert
--------------------------------------------------------------------------------*/
.c-alert {
margin-bottom: var(--space-l);
text-align: left;
line-height: var(--line-height-s);
background-color: var(--bg-primary);
color: var(--color-primary);
padding: min(var(--inner-space-2s), 1.25rem);
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
align-items: center;
}
.c-alert_ttl {
font-size: var(--fs-2s);
font-weight: bold;
background-color: var(--color-primary);
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: grid;
grid-auto-columns: 1fr 2fr 1fr;
grid-template-areas:
"pager-prev pager-list pager-next";
align-items: center;
gap: var(--space-l) 1rem;
line-height: 1;
}
.c-pager_prev { grid-area: pager-prev; justify-self: start; }
.c-pager_next { grid-area: pager-next; justify-self: end; text-align: right; }
.c-pager_select-field { grid-area: pager-list; justify-self: center; }
@media (max-width: 760px) {
.c-pager {
grid-auto-columns: 1fr 1fr;
grid-template-areas:
"pager-list pager-list"
"pager-prev pager-next";
}
}
.c-pager_select-field {
width: min(100%, 440px);
min-width: fit-content;
position: relative;
border-radius: var(--rd-h2);
border: 1px solid var(--border-color);
}
.c-pager_label:after {
content: "";
width: 2rem;
height: 100%;
position: absolute;
right: 0.25rem;
top: 0;
z-index: 3;
pointer-events: none;
mask-image: url('data:image/svg+xml;utf8,');
mask-repeat: no-repeat;
mask-size: 40%;
mask-position: center center;
background-color: var(--txt-color);
}
.c-pager_label {
padding: 0.75rem 2.25rem 0.75rem 1rem;
border-radius: var(--rd-h2);
position: relative;
z-index: 2;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFF;
}
.c-pager_select {
outline: none;
background: none;
border: none;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
}
/*--------------------------------------------------------------------------------
to top
--------------------------------------------------------------------------------*/
.c-to-top-wrap {
width: 100%;
z-index: 99;
display: flex;
justify-content: end;
pointer-events: none;
padding: var(--space-s);
}
.c-to-top-wrap:has(.is-not-fix) {
position: absolute;
left: 0;
top: calc(-1 * (var(--space-s) + 1.5rem));
}
.c-to-top-wrap:not(:has(.is-not-fix)) {
position: fixed;
left: 0;
bottom: 0;
}
.c-to-top {
pointer-events: auto;
display: none;
cursor: pointer;
line-height: 1;
width: 3rem;
height: 3rem;
color: var(--color-primary);
position: relative;
transform: rotate(-90deg);
}
.c-to-top:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
outline: 1px solid var(--color-primary);
background-color: #FFF;
border-radius: 50%;
transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out, background 0.2s ease-in-out, border 0.15s ease-in-out, fill 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.4s var(--cubic-bezier);
}
.c-to-top_icon {
display: block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.c-to-top_icon:before,
.c-to-top_icon: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;
}
.c-to-top_icon:after { transform: translateX(-100%); }
@media (hover: hover) {
.c-to-top_icon:before { animation-duration: 0.2s; }
.c-to-top_icon:after, a .c-to-top_icon:after { animation-duration: 0.4s; }
.c-to-top:hover .c-to-top_icon:before, a:hover .c-to-top_icon:before {
animation-name: to-top_before;
animation-delay: 0s;
}
.c-to-top:hover .c-to-top_icon:after, a:hover .c-to-top_icon:after {
animation-name: to-top_after;
animation-delay: 0.05s;
}
.c-to-top:hover:before {
transform: scale(1.2);
}
}
@keyframes to-top_before {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes to-top_after {
0% { transform: translateX(-100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}