@charset "utf-8";
/*--------------------------------------------------------------------------------
title
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-ttl
--------------------------------------------------------------------------------*/
.c-ttl { line-height: var(--line-height-2s); }
.c-ttl:not([class*="u-mgb"]) { margin-bottom: calc(var(--ttl-mgb, var(--space-l)) + 1rem); }
.c-ttl.-center { text-align: center; }
.c-ttl_en {
font-family: var(--ff-en);
font-size: calc(2.2 * var(--fs-2l));
font-weight: 500;
}
.c-ttl_jp {
font-family: var(--ff-go);
font-weight: 500;
font-size: var(--fs-m);
margin-top: 0.5rem;
}
.c-ttl_en:not([class*="u-fc"]) { color: var(--ttl-en-color, var(--color-primary)); }
.c-ttl_jp:not([class*="u-fc"]) { color: var(--ttl-jp-color, var(--txt-color)); }
/*--------------------------------------------------------------------------------
icon
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
SVG
--------------------------------------------------------------------------------*/
:root {
--icon-arrow: url("../icon/arrow.svg");
--icon-newwin: url("../icon/newwin.svg");
--icon-file: url("../icon/file.svg");
--icon-tel: url("../icon/tel.svg");
--icon-mail: url("../icon/mail.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-youtube: url('data:image/svg+xml;utf8,');
--icon-tiktok: url('data:image/svg+xml;utf8,');
}
/*--------------------------------------------------------------------------------
.c-sns
--------------------------------------------------------------------------------*/
:root { --default-sns-size: 1.5rem; --default-sns-btn-size: 2.25rem; --default-sns-btn-pd: 0.35em; --default-sns-btn-rd: 100%; }
.c-sns-btn {
flex-shrink: 0;
width: var(--sns-btn-size, var(--default-sns-btn-size));
height: var(--sns-btn-size, var(--default-sns-btn-size));
line-height: 1;
border-radius: var(--sns-btn-rd, var(--default-sns-btn-rd));
background: var(--sns-btn-bg);
padding: var(--sns-btn-pd, var(--default-sns-btn-pd));
position: relative;
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
transition: var(--hover-trans);
}
.c-sns-btn.-color { --sns-bg: #FFF; --sns-bg-hover: #FFF; }
.c-sns-btn .c-sns {
width: 100%;
height: 100%;
}
.c-sns {
flex-shrink: 0;
width: var(--sns-size, var(--default-sns-size));
height: var(--sns-size, var(--default-sns-size));
line-height: 1;
display: inline-block;
vertical-align: middle;
position: relative;
background: var(--sns-bg, currentColor);
color: currentColor;
mask-repeat: no-repeat;
mask-position: center center;
mask-size: var(--sns-mask-size, cover);
transition: var(--hover-trans);
}
.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.-youtube { mask-image: var(--icon-youtube); }
.c-sns.-tiktok { mask-image: var(--icon-tiktok); }
.c-sns.-mail { mask-image: var(--icon-mail); }
.c-sns.-tel { mask-image: var(--icon-tel); }
@media (hover: hover) {
.c-sns:hover,
a:hover .c-sns { background: var(--sns-bg-hover, currentColor); }
.c-sns-btn:hover .c-sns { background: var(--sns-bg-hover, currentColor); }
.c-sns-btn:hover { background: var(--sns-btn-bg-hover); }
}
/* button & logo color
----------------------------------------*/
.c-sns-btn.-color:has([class*="-insta"]),
.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-btn.-color:has([class*="-insta"]):before,
.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-btn.-color:has([class*="-fb"]),
.c-sns.-color[class*="-fb"] { background-color: #0866FF; }
.c-sns-btn.-color:has([class*="-x"]),
.c-sns.-color[class*="-x"] { background-color: #000; }
.c-sns-btn.-color:has([class*="-line"]),
.c-sns.-color[class*="-line"] { background-color: #06c755; }
.c-sns-btn.-color:has([class*="-youtube"]),
.c-sns.-color[class*="-youtube"] { background-color: #FF0000; }
.c-sns-btn.-color:has([class*="-tiktok"]),
.c-sns.-color[class*="-tiktok"] { background-color: #000; }
/*--------------------------------------------------------------------------------
.c-arrow
--------------------------------------------------------------------------------*/
:root {
/* default */
--default-arrow-size: 2.8rem;
--default-arrow-outline: 1px solid transparent;
--default-arrow-outline-hover: 1px solid transparent;
--default-arrow-bg: var(--color-gray-darker);
--default-arrow-bg-hover: var(--color-primary);
--default-arrow-color: #FFF;
--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.8s; }
.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% { 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-arrow-txt
--------------------------------------------------------------------------------*/
.c-arrow-txt {
--link-color: var(--txt-color);
--link-color-hover: var(--txt-color);
--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-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: #FFF;
--default-btn-pd: 1rem;
--default-btn-pd-side: 2rem;
/*--default-btn-width: ;*/
/*--default-btn-width-min: ;*/
--default-btn-radius: 0.4rem;
--default-btn-bg: var(--color-primary);
--default-btn-bg-hover: var(--color-primary-light);
--default-btn-outline: transparent;
--default-btn-outline-hover: transparent;
}
@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 {
--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, .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));
}
}
/*--------------------------------------------------------------------------------
list
--------------------------------------------------------------------------------*/
:root { --list-mgl: 1.15em; --list-ol-mgl: 1.15em; }
.c-list { display: flex; flex-direction: column; line-height: var(--list-line-height, var(--line-height-s)); }
.c-list:not([class*="u-rgap"]):not([class*="u-gap"]) { row-gap: var(--list-rgap, 0.4rem); }
.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.6em; --default-list-mark-mgt: 0.1em; --default-list-mark-pdl: 0.75em; }
.c-list-mark { display: flex; flex-direction: column; line-height: var(--list-line-height, var(--line-height-s)); }
.c-list-mark:not([class*="u-rgap"]):not([class*="u-gap"]) { row-gap: var(--list-rgap, 0.4rem); }
.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-secondary-lighter));
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; line-height: var(--list-line-height, var(--line-height-s)); }
.c-list-dot:not([class*="u-rgap"]):not([class*="u-gap"]) { row-gap: var(--list-rgap, 0.4rem); }
.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; line-height: var(--list-line-height, var(--line-height-s)); }
.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.4em); }
.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;
}
/*--------------------------------------------------------------------------------
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 {
--pd: 1.25rem;
--icon-size: 0.85rem;
line-height: var(--line-height-s);
border-bottom: 1px solid rgba(var(--rgb-border-color));
}
.c-archive-list_item:not(:has(a)),
.c-archive-list_item a {
display: flex;
column-gap: var(--space-s);
row-gap: 0.25rem;
padding: var(--pd);
padding-left: 0;
position: relative;
}
.c-archive-list_date {
flex-shrink: 0;
color: var(--color-gray);
font-size: var(--fs-s);
margin-top: calc(1rem - 1em);
}
.c-archive-list_ttl {
--newwin-mgl: 0;
--newwin-mgr: 0;
--file-mgl: 0;
--file-mgr: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.5rem;
}
.c-archive-list_item a {
padding-right: calc(var(--icon-size) + var(--pd) + 1rem);
}
.c-archive-list_item a:after {
content: "";
width: var(--icon-size);
height: var(--icon-size);
background: currentColor;
color: var(--color-gray);
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: cover;
transition: color 0.2s ease-in-out, transform 0.6s var(--cubic-bezier);
position: absolute;
right: var(--pd);
top: 50%;
transform: translateY(-50%);
}
.c-archive-list_item a[target="_blank"]:after {
content: "";
color: var(--color-gray);
mask-image: var(--icon-newwin);
}
@media (max-width: 760px) {
.c-archive-list_item:not(:has(a)),
.c-archive-list_item a {
flex-direction: column;
}
}
@media (hover: hover) {
.c-archive-list_item a:hover:after {
color: var(--link-color-hover);
}
.c-archive-list_item a:not([target="_blank"]):hover:after {
transform: translateY(-50%) translateX(0.4rem);
}
}
/*--------------------------------------------------------------------------------
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: 1rem;
margin-bottom: 0.5rem;
}
.c-article-date,
.c-article-meta_date {
color: var(--color-gray);
font-size: var(--fs-s);
}
.c-article-date {
display: inline-block;
margin-bottom: 1rem;
}
.c-article-ttl {
line-height: var(--line-height-s);
font-family: var(--ff-go);
font-size: var(--fs-2l);
font-weight: 700;
padding-bottom: 1em;
border-bottom: 1px solid rgba(var(--rgb-border-color-dark));
}
/*--------------------------------------------------------------------------------
.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-top: calc(-1 * var(--space-s));
margin-bottom: var(--space-l);
text-align: left;
line-height: var(--line-height-s);
border: 1px solid var(--color-red-light);
background-color: var(--bg-red);
color: var(--color-red);
padding: min(3.5%, 1em);
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
align-items: center;
container-type: inline-size;
}
.c-alert_ttl {
font-size: min(3.25cqw, var(--fs-2s));
font-weight: bold;
background-color: var(--color-red);
color: #FFF;
padding: 0.25rem 0.5rem;
vertical-align: middle;
white-space: nowrap;
}
.c-alert_mess {
font-size: min(3.5cqw, 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(50%, 400px);
min-width: fit-content;
position: relative;
}
.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: 0.2rem;
position: relative;
z-index: 2;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--border-color);
background-color: var(--bg-gray);
}
.c-pager_select {
outline: none;
background: none;
border: none;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
}
.c-pager_select-field:has(.c-pager_select:focus) .c-pager_label {
background-color: #FFF;
}