@charset "utf-8";
/* component
=============================================================================== */
/*--------------------------------------------------------------------------------
icon
--------------------------------------------------------------------------------*/
:root {
--root-icon-size: 1.15em;
--root-icon-size-medium: 1.5em;
--root-icon-size-large: 1.75em;
--root-icon-size-x-large: 2em;
}
@media (min-width: 641px) { :root { --root-pager-icon-size: 1.4em; } }
@media (max-width: 640px) { :root { --root-pager-icon-size: 1.8em; } }
/*--------------------------------------------------------------------------------
SVG mask icon
--------------------------------------------------------------------------------*/
:root {
--icon-home: url('data:image/svg+xml;utf8,');
--icon-info: url('data:image/svg+xml;utf8,');
--icon-mail: url('data:image/svg+xml;utf8,');
--icon-tel: url('data:image/svg+xml;utf8,');
--icon-about: url('data:image/svg+xml;utf8,');
--icon-service: url('data:image/svg+xml;utf8,');
--icon-group: url('data:image/svg+xml;utf8,');
--icon-recruit: url('data:image/svg+xml;utf8,');
--icon-arrowV-circle: url('data:image/svg+xml;utf8,');
--icon-arrowV-prev: url('data:image/svg+xml;utf8,');
--icon-arrowV-next: url('data:image/svg+xml;utf8,');
--icon-arrowV-down: url('data:image/svg+xml;utf8,');
--icon-arrowV-up: url('data:image/svg+xml;utf8,');
--icon-arrow-down: url('data:image/svg+xml;utf8,');
--icon-arrow-up: url('data:image/svg+xml;utf8,');
--icon-add: url('data:image/svg+xml;utf8,');
--icon-remove: url('data:image/svg+xml;utf8,');
--icon-check: url('data:image/svg+xml;utf8,');
--icon-newwin: url('data:image/svg+xml;utf8,');
}
/*--------------------------------------------------------------------------------
.c-icon
--------------------------------------------------------------------------------*/
.c-icon { --icon-size: var(--root-icon-size); }
.c-icon.-medium { --icon-size: var(--root-icon-size-medium); }
.c-icon.-large { --icon-size: var(--root-icon-size-large); }
.c-icon.-x-large { --icon-size: var(--root-icon-size-x-large); }
.c-icon.-pager { --icon-size: var(--root-pager-icon-size); }
.c-icon {
position: relative;
width: var(--icon-size);
height: var(--icon-size);
line-height: 1;
display: inline-block;
vertical-align: middle;
background: currentColor;
color: inherit;
mask-repeat: no-repeat;
}
.c-icon.-home { mask-image: var(--icon-home); }
.c-icon.-info { mask-image: var(--icon-info); }
.c-icon.-mail { mask-image: var(--icon-mail); }
.c-icon.-tel { mask-image: var(--icon-tel); }
.c-icon.-arrowV-circle { mask-image: var(--icon-arrowV-circle); }
.c-icon.-arrowV-prev { mask-image: var(--icon-arrowV-prev); }
.c-icon.-arrowV-next { mask-image: var(--icon-arrowV-next); }
.c-icon.-arrowV-down { mask-image: var(--icon-arrowV-down); }
.c-icon.-arrowV-up { mask-image: var(--icon-arrowV-up); }
.c-icon.-arrow-down { mask-image: var(--icon-arrow-down); }
.c-icon.-arrow-up { mask-image: var(--icon-arrow-up); }
.c-icon.-add { mask-image: var(--icon-add); }
.c-icon.-remove { mask-image: var(--icon-remove); }
.c-icon.-check { mask-image: var(--icon-check); }
.c-icon.-newwin { mask-image: var(--icon-newwin); }
.c-icon.-primary { background-color: var(--color-primary-dark); }
.c-icon.-secondary { background-color: var(--color-secondary-dark); }
.c-icon.-tertiary { background-color: var(--color-tertiary-dark); }
.c-icon.-quaternary { background-color: var(--color-quaternary-dark); }
/*--------------------------------------------------------------------------------
.c-newwin
--------------------------------------------------------------------------------*/
:root { --newwin-size: 0.9em; --newwin-mgl: 0.5rem; }
.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);
background: currentColor;
color: inherit;
mask-repeat: no-repeat;
mask-image: var(--icon-newwin);
}
/*--------------------------------------------------------------------------------
.c-icon-img
--------------------------------------------------------------------------------*/
.c-icon-img { --icon-img-size: var(--root-icon-size); }
.c-icon-img.-medium { --icon-img-size: var(--root-icon-size-medium); }
.c-icon-img.-large { --icon-img-size: var(--root-icon-size-large); }
.c-icon-img.-x-large { --icon-img-size: var(--root-icon-size-x-large); }
.c-icon-img {
width: var(--icon-img-size);
height: var(--icon-img-size);
line-height: 1;
display: inline-block;
vertical-align: middle;
}
/*--------------------------------------------------------------------------------
.c-icon-txt
--------------------------------------------------------------------------------*/
:root {
--icon-txt-gap: 0.5rem;
--icon-txt-gap-m: 1rem;
--icon-txt-gap-l: 1.5rem;
}
.c-icon-txt { --icon-txt-img-size: var(--root-icon-size); }
.c-icon-txt.-medium { --icon-txt-img-size: var(--root-icon-size-medium); }
.c-icon-txt.-large { --icon-txt-img-size: var(--root-icon-size-large); }
.c-icon-txt.-x-large { --icon-txt-img-size: var(--root-icon-size-x-large); }
.c-icon-txt { display: inline-block; }
a .c-icon-txt { text-decoration: inherit; }
.c-icon-txt_img { margin-bottom: 0.15rem; }
.c-icon-txt { padding-left: calc(var(--icon-txt-img-size) + var(--icon-txt-gap)); }
.c-icon-txt_img { margin-left: calc(-1 * (var(--icon-txt-img-size) + var(--icon-txt-gap))); margin-right: var(--icon-txt-gap); }
.c-icon-txt.-cgap-m { padding-left: calc(var(--icon-txt-img-size) + var(--icon-txt-gap-m)); }
.c-icon-txt.-cgap-m .c-icon-txt_img { margin-left: calc(-1 * (var(--icon-txt-img-size) + var(--icon-txt-gap-m))); margin-right: var(--icon-txt-gap-m); }
.c-icon-txt.-cgap-l { padding-left: calc(var(--icon-txt-img-size) + var(--icon-txt-gap-l)); }
.c-icon-txt.-cgap-l .c-icon-txt_img { margin-left: calc(-1 * (var(--icon-txt-img-size) + var(--icon-txt-gap-l))); margin-right: var(--icon-txt-gap-l); }
.c-icon-txt.-end { padding-left: 0; }
.c-icon-txt.-end .c-icon-txt_img { margin-left: var(--icon-txt-gap); margin-right: 0; }
.c-icon-txt.-end.-cgap-m .c-icon-txt_img { margin-left: var(--icon-txt-gap-m); }
.c-icon-txt.-end.-cgap-l .c-icon-txt_img { margin-left: var(--icon-txt-gap-l); }
/*--------------------------------------------------------------------------------
button
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-btn
--------------------------------------------------------------------------------*/
.c-btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
border: none;
margin: 0;
outline: none;
cursor: pointer;
color: inherit;
text-decoration: none;
display: inline-flex;
gap: 1rem 0.5rem;
justify-content: center;
align-items: center;
line-height: 1.5;
border-radius: 0.3rem;
}
.c-btn_txt { flex: 1; }
.c-btn.-rd0 { border-radius: 0; }
.c-btn.-rd { border-radius: 9999px; }
.c-btn.-align-left { justify-content: flex-start; }
.c-btn.-narrow { padding: calc(0.5rem + 0.25em) 0.5rem; }
.c-btn.-normal,
.c-btn.-small,
.c-btn.-full,
.c-btn.-fit { padding: calc(0.5rem + 0.25em) 1rem; }
.c-btn.-medium { padding: calc(0.5rem + 0.25em) 2.5rem; }
.c-btn.-wide { padding: calc(0.5rem + 0.25em) 5rem; }
.c-btn.-small { line-height: 1.2; font-size: var(--fs-s); }
.c-btn.-full { width: 100%; }
.c-btn.-fit { width: 100%; height: 100%; }
:root {
/* link color */
--btn-link: var(--color-primary-lighter);
--btn-link-hover: var(--color-primary-lightest);
--btn-link-txt: var(--color-link);
--btn-link-txt-hover: var(--color-link-hover);
--btn-link-outline: #FFF;
--btn-link-outline-border: var(--border-color);
--btn-link-outline-border-hover: var(--color-primary);
--btn-link-outline-hover: var(--color-primary-lightest);
--btn-link-outline-txt: var(--color-link);
--btn-link-outline-txt-hover: var(--color-link-hover);
/* primary color */
--btn-primary: var(--color-primary-dark);
--btn-primary-hover: var(--color-primary);
--btn-primary-txt: #FFF;
--btn-primary-txt-hover: #FFF;
--btn-primary-outline: #FFF;
--btn-primary-outline-border: var(--color-primary-dark);
--btn-primary-outline-border-hover: var(--color-primary-dark);
--btn-primary-outline-hover: var(--color-primary-dark);
--btn-primary-outline-txt: var(--color-primary-dark);
--btn-primary-outline-txt-hover: #FFF;
/* secondary color */
--btn-secondary: var(--color-secondary-dark);
--btn-secondary-hover: var(--color-secondary);
--btn-secondary-txt: #FFF;
--btn-secondary-txt-hover: #FFF;
--btn-secondary-outline: #FFF;
--btn-secondary-outline-border: var(--color-secondary-dark);
--btn-secondary-outline-border-hover: var(--color-secondary-dark);
--btn-secondary-outline-hover: var(--color-secondary-dark);
--btn-secondary-outline-txt: var(--color-secondary-dark);
--btn-secondary-outline-txt-hover: #FFF;
/* tertiary color */
--btn-tertiary: var(--color-tertiary-dark);
--btn-tertiary-hover: var(--color-tertiary);
--btn-tertiary-txt: #FFF;
--btn-tertiary-txt-hover: #FFF;
--btn-tertiary-outline: #FFF;
--btn-tertiary-outline-border: var(--color-tertiary-dark);
--btn-tertiary-outline-border-hover: var(--color-tertiary-dark);
--btn-tertiary-outline-hover: var(--color-tertiary-dark);
--btn-tertiary-outline-txt: var(--color-tertiary-dark);
--btn-tertiary-outline-txt-hover: #FFF;
/* quaternary color */
--btn-quaternary: var(--color-quaternary-dark);
--btn-quaternary-hover: var(--color-quaternary);
--btn-quaternary-txt: #FFF;
--btn-quaternary-txt-hover: #FFF;
--btn-quaternary-outline: transparent;
--btn-quaternary-outline-border: var(--color-quaternary-dark);
--btn-quaternary-outline-border-hover: var(--color-quaternary-dark);
--btn-quaternary-outline-hover: var(--color-quaternary-dark);
--btn-quaternary-outline-txt: var(--color-quaternary-dark);
--btn-quaternary-outline-txt-hover: #FFF;
/* warning color */
--btn-warning: var(--color-warning-dark);
--btn-warning-hover: var(--color-warning);
--btn-warning-txt: #FFF;
--btn-warning-txt-hover: #FFF;
--btn-warning-outline: transparent;
--btn-warning-outline-border: var(--color-warning-dark);
--btn-warning-outline-border-hover: var(--color-warning-dark);
--btn-warning-outline-hover: var(--color-warning-dark);
--btn-warning-outline-txt: var(--color-warning-dark);
--btn-warning-outline-txt-hover: #FFF;
/* light color */
--btn-light: var(--color-gray-lightest);
--btn-light-hover: var(--color-gray-lighter);
--btn-light-txt: var(--txt-color);
--btn-light-txt-hover: var(--txt-color);
--btn-light-outline: var(--color-gray-lightest);
--btn-light-outline-border: var(--color-gray-light);
--btn-light-outline-border-hover: var(--color-gray-light);
--btn-light-outline-hover: var(--color-gray-lighter);
--btn-light-outline-txt: var(--txt-color);
--btn-light-outline-txt-hover: var(--txt-color);
/* dark color */
--btn-dark: var(--color-gray-dark);
--btn-dark-hover: var(--color-gray);
--btn-dark-txt: #FFF;
--btn-dark-txt-hover: #FFF;
--btn-dark-outline: transparent;
--btn-dark-outline-border: var(--color-gray-dark);
--btn-dark-outline-border-hover: var(--color-gray-dark);
--btn-dark-outline-hover: var(--color-gray-dark);
--btn-dark-outline-txt: var(--txt-color);
--btn-dark-outline-txt-hover: #FFF;
}
.c-btn.-link { background-color: var(--btn-link); color: var(--btn-link-txt); }
.c-btn.-primary { background-color: var(--btn-primary); color: var(--btn-primary-txt); }
.c-btn.-secondary { background-color: var(--btn-secondary); color: var(--btn-secondary-txt); }
.c-btn.-tertiary { background-color: var(--btn-tertiary); color: var(--btn-tertiary-txt); }
.c-btn.-quaternary { background-color: var(--btn-quaternary); color: var(--btn-quaternary-txt); }
.c-btn.-warning { background-color: var(--btn-warning); color: var(--btn-warning-txt); }
.c-btn.-light { background-color: var(--btn-light); color: var(--btn-light-txt); }
.c-btn.-dark { background-color: var(--btn-dark); color: var(--btn-dark-txt); }
.c-btn.-outline { border-width: 1px; border-style: solid; }
.c-btn.-outline.-link { background-color: var(--btn-link-outline); border-color: var(--btn-link-outline-border); color: var(--btn-link-outline-txt); }
.c-btn.-outline.-primary { background-color: var(--btn-primary-outline); border-color: var(--btn-primary-outline-border); color: var(--btn-primary-outline-txt); }
.c-btn.-outline.-secondary { background-color: var(--btn-secondary-outline); border-color: var(--btn-secondary-outline-border); color: var(--btn-secondary-outline-txt); }
.c-btn.-outline.-tertiary { background-color: var(--btn-tertiary-outline); border-color: var(--btn-tertiary-outline-border); color: var(--btn-tertiary-outline-txt); }
.c-btn.-outline.-quaternary { background-color: var(--btn-quaternary-outline); border-color: var(--btn-quaternary-outline-border); color: var(--btn-quaternary-outline-txt); }
.c-btn.-outline.-warning { background-color: var(--btn-warning-outline); border-color: var(--btn-warning-outline-border); color: var(--btn-warning-outline-txt); }
.c-btn.-outline.-light { background-color: var(--btn-light-outline); border-color: var(--btn-light-outline-border); color: var(--btn-light-outline-txt); }
.c-btn.-outline.-dark { background-color: var(--btn-dark-outline); border-color: var(--btn-dark-outline-border); color: var(--btn-dark-outline-txt); }
@media (hover: hover) {
.c-btn { transition: var(--hover-trans); }
.c-btn.-link:hover { background-color: var(--btn-link-hover); color: var(--btn-link-txt-hover); }
.c-btn.-primary:hover { background-color: var(--btn-primary-hover); color: var(--btn-primary-txt-hover); }
.c-btn.-secondary:hover { background-color: var(--btn-secondary-hover); color: var(--btn-secondary-txt-hover); }
.c-btn.-tertiary:hover { background-color: var(--btn-tertiary-hover); color: var(--btn-tertiary-txt-hover); }
.c-btn.-quaternary:hover { background-color: var(--btn-quaternary-hover); color: var(--btn-quaternary-txt-hover); }
.c-btn.-warning:hover { background-color: var(--btn-warning-hover); color: var(--btn-warning-txt-hover); }
.c-btn.-light:hover { background-color: var(--btn-light-hover); color: var(--btn-light-txt-hover); }
.c-btn.-dark:hover { background-color: var(--btn-dark-hover); color: var(--btn-dark-txt-hover); }
.c-btn.-outline.-link:hover { background-color: var(--btn-link-outline-hover); border-color: var(--btn-link-outline-border-hover); color: var(--btn-link-outline-txt-hover); }
.c-btn.-outline.-primary:hover { background-color: var(--btn-primary-outline-hover); border-color: var(--btn-primary-outline-border-hover); color: var(--btn-primary-outline-txt-hover); }
.c-btn.-outline.-secondary:hover { background-color: var(--btn-secondary-outline-hover); border-color: var(--btn-secondary-outline-border-hover); color: var(--btn-secondary-outline-txt-hover); }
.c-btn.-outline.-tertiary:hover { background-color: var(--btn-tertiary-outline-hover); border-color: var(--btn-tertiary-outline-border-hover); color: var(--btn-tertiary-outline-txt-hover); }
.c-btn.-outline.-quaternary:hover { background-color: var(--btn-quaternary-outline-hover); border-color: var(--btn-quaternary-outline-border-hover); color: var(--btn-quaternary-outline-txt-hover); }
.c-btn.-outline.-warning:hover { background-color: var(--btn-warning-outline-hover); border-color: var(--btn-warning-outline-border-hover); color: var(--btn-warning-outline-txt-hover); }
.c-btn.-outline.-light:hover { background-color: var(--btn-light-outline-hover); border-color: var(--btn-light-outline-border-hover); color: var(--btn-light-outline-txt-hover); }
.c-btn.-outline.-dark:hover { background-color: var(--btn-dark-outline-hover); border-color: var(--btn-dark-outline-border-hover); color: var(--btn-dark-outline-txt-hover); }
}
/*--------------------------------------------------------------------------------
tag
--------------------------------------------------------------------------------*/
.c-tag {
line-height: 1.5;
border-radius: 0.2rem;
padding: 0.25em 0.5em;
display: inline-block;
vertical-align: middle;
text-decoration: none;
}
.c-tag.-small { font-size: var(--fs-3s); }
.c-tag.-normal { font-size: var(--fs-2s); }
.c-tag.-medium { font-size: var(--fs-n); }
.c-tag.-large { font-size: var(--fs-m); }
:root {
/* primary light color */
--tag-primary-light: var(--color-primary-light);
--tag-primary-light-txt: #FFF;
--tag-primary-light-hover: #9CE1FE; /* 0.7 */
--tag-primary-light-txt-hover: #FFF;
/* warning color */
--tag-warning: var(--color-warning-dark);
--tag-warning-txt: #FFF;
--tag-warning-outline: transparent;
--tag-warning-outline-border: var(--color-warning-dark);
--tag-warning-outline-txt: var(--color-warning-dark);
}
.c-tag.-primary-light { background-color: var(--tag-primary-light); color: var(--tag-primary-light-txt); }
.c-tag.-warning { background-color: var(--tag-warning); color: var(--tag-warning-txt); }
.c-tag.-outline { border-width: 1px; border-style: solid; }
.c-tag.-outline.-warning { background-color: var(--tag-warning-outline); border-color: var(--tag-warning-outline-border); color: var(--tag-warning-outline-txt); }
@media (hover: hover) {
a.c-tag.-primary-light:hover { background-color: var(--tag-primary-light-hover); color: var(--tag-primary-light-txt-hover); }
}
/*--------------------------------------------------------------------------------
list
--------------------------------------------------------------------------------*/
:root { --list-mgl: 1.15em; }
.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.-warning { --list-mark-color: var(--color-warning); }
.c-list { display: flex; flex-direction: column; row-gap: var(--list-rgap); }
.c-list.-normal { margin-left: var(--list-mgl); list-style: disc; }
ol.c-list.-normal { margin-left: var(--list-mgl); list-style: decimal; }
/* .c-list-mark
----------------------------------------*/
.c-list.-list-mark.-circle { --list-mark-size: 0.9em; --list-mark-mgt: 0.4em; }
.c-list.-list-mark.-square { --list-mark-size: 0.9em; --list-mark-mgt: 0.4em; }
.c-list.-list-mark .c-list_item { position: relative; padding-left: calc(var(--list-mark-size) + 0.5rem); }
.c-list.-list-mark .c-list_item: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 .c-list_item:before { border-radius: 9999px; }
/* .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 .c-list_item { position: relative; padding-left: calc(var(--list-mark-txt-size) + 0.25rem); }
.c-list.-list-mark-txt .c-list_item: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);
}
/*--------------------------------------------------------------------------------
table
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-tbl
--------------------------------------------------------------------------------*/
.c-tbl {
width: 100%;
border: 0;
border-collapse: collapse;
}
.c-tbl th,
.c-tbl td {
padding: 0.75em;
border-width: 1px;
border-style: solid;
word-break: keep-all;
overflow-wrap: anywhere;
}
.c-tbl th {
padding-left: 1.5em;
padding-right: 1.5em;
text-align: center;
vertical-align: top;
}
.c-tbl td { background-color: #FFF; }
@media (max-width: 640px) {
.c-tbl th { padding: 0.75em; }
}
/* primary color */
.c-tbl th,
.c-tbl td { border-color: var(--color-primary-light); }
.c-tbl th { background-color: var(--color-primary-lighter); }
/* light color */
.c-tbl.-light th,
.c-tbl.-light td { border-color: var(--color-gray-light); }
.c-tbl.-light th { background-color: var(--color-gray-lightest); }
/*--------------------------------------------------------------------------------
.c-grid-tbl
--------------------------------------------------------------------------------*/
.c-grid-tbl {
width: 100%;
display: grid;
grid-template-columns: auto 1fr;
grid-auto-rows: auto;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.c-grid-tbl.-w15 { grid-template-columns: minmax(7em, 15%) 1fr; }
.c-grid-tbl.-w20 { grid-template-columns: minmax(7em, 20%) 1fr; }
.c-grid-tbl.-w25 { grid-template-columns: minmax(7em, 25%) 1fr; }
.c-grid-tbl.-w30 { grid-template-columns: minmax(7em, 30%) 1fr; }
.c-grid-tbl.-w35 { grid-template-columns: minmax(7em, 35%) 1fr; }
.c-grid-tbl_item {
border-width: 1px;
border-style: solid;
border-bottom: 0;
}
.c-grid-tbl_item.-ttl {
padding-left: 1.5em;
padding-right: 1.5em;
text-align: center;
font-weight: bold;
border-right-width: 0;
}
.c-grid-tbl_item.-valign-center { align-content: center; }
@media (min-width: 641px) {
.c-grid-tbl_item { padding: 0.75em; }
}
@media (max-width: 640px) {
.c-grid-tbl_item,
.c-grid-tbl_item.-ttl { padding: 0.75em; }
}
/* primary color */
.c-grid-tbl,
.c-grid-tbl_item { border-color: var(--color-primary-light); }
.c-grid-tbl_item.-ttl { background-color: var(--color-primary-lighter); }
/* break point
----------------------------------------*/
@media (max-width: 640px) {
.c-grid-tbl.-break-sp { grid-template-columns: 1fr; }
.c-grid-tbl.-break-sp .c-grid-tbl_item { padding: 1em 0.75em; }
.c-grid-tbl.-break-sp .c-grid-tbl_item.-ttl {
padding: 0.75em;
text-align: left;
border-right-width: 1px;
}
}
/*--------------------------------------------------------------------------------
column
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-column
--------------------------------------------------------------------------------*/
.c-column { display: flex; flex-wrap: wrap; }
.c-column.-inline { display: inline-flex; }
.c-column.-row { flex-direction: column; }
/* break point
----------------------------------------*/
@media (max-width: 640px) {
.c-column.-break-sp { flex-direction: column; }
}
@media (max-width: 480px) {
.c-column.-break-sp-s { flex-direction: column; }
}
/* image + text
----------------------------------------*/
.c-column.-img-default.-img-left,
.c-column.-img-default.-img-right { gap: var(--space-2s) var(--space-s); }
.c-column.-img-left .c-column_img,
.c-column.-img-right .c-column_txt { order: 1; }
.c-column.-img-left .c-column_txt,
.c-column.-img-right .c-column_img { order: 2; }
.c-column_txt { flex: 1; }
.c-column .c-column_img { width: min(40%, 360px); }
/* break point */
@media (max-width: 640px) {
.c-column.-img-default { flex-direction: column; }
.c-column.-img-default .c-column_txt { order: 2; }
.c-column.-img-default .c-column_img { order: 1; align-self: center; text-align: center; width: 100%; }
.c-column.-img-left.-break-sp .c-column_txt,
.c-column.-img-right.-break-sp .c-column_txt { order: 2; }
.c-column.-img-left.-break-sp .c-column_img,
.c-column.-img-right.-break-sp .c-column_img { order: 1; align-self: center; text-align: center; width: 100%; }
}
@media (max-width: 480px) {
.c-column.-img-left.-break-sp-s .c-column_txt,
.c-column.-img-right.-break-sp-s .c-column_txt { order: 2; }
.c-column.-img-left.-break-sp-s .c-column_img,
.c-column.-img-right.-break-sp-s .c-column_img { order: 1; align-self: center; text-align: center; width: 100%; }
}
/*--------------------------------------------------------------------------------
.c-grid
--------------------------------------------------------------------------------*/
.c-grid { display: grid; }
.c-grid.-column-2 { grid-template-columns: repeat(2, 1fr); }
.c-grid.-column-3 { grid-template-columns: repeat(3, 1fr); }
.c-grid.-column-4 { grid-template-columns: repeat(4, 1fr); }
/* break point
----------------------------------------*/
@media (max-width: 640px) {
.c-grid.-column-2.-break-sp { grid-template-columns: 1fr; }
}
/*--------------------------------------------------------------------------------
form
--------------------------------------------------------------------------------*/
:root {
--input-border: 1px solid var(--border-color);
--input-border-focus: 1px solid var(--border-color);
--input-border-error: 1px solid var(--color-warning-light);
--input-border-checked: 1px solid var(--color-primary-dark);
--input-bg: var(--color-gray-lightest);
--input-bg-focus: #FFF;
--input-bg-error: var(--color-warning-lightest);
--input-bg-checked: var(--color-primary-lightest);
--input-radius: 0.3rem;
--input-pd: 0.5rem;
}
/*--------------------------------------------------------------------------------
.c-txtbox
.c-txtarea
.c-select
--------------------------------------------------------------------------------*/
.c-txtbox.-narrow { width: max(15em, 40%); }
.c-txtbox.-wide { width: 100%; }
@media (min-width:641px) {
.c-txtbox.-medium { width: max(25em, 60%); }
.c-txtbox.-normal { width: max(35em, 80%); }
}
@media (max-width:640px) {
.c-txtbox.-medium,
.c-txtbox.-normal { width: 100%; }
}
.c-txtbox,
.c-txtarea,
.c-select {
display: inline-block;
outline: none;
padding: var(--input-pd);
border-radius: var(--input-radius);
border: var(--input-border);
background-color: var(--input-bg);
transition: background-color ease-out 0.1s, border-color ease-out 0.1s;
line-height: 1.5;
}
.c-txtarea {
width: 100%;
height: clamp(150px, (300 / 640 * 100vw), 300px);
resize: vertical;
}
.c-txtbox:focus,
.c-txtarea:focus {
border: var(--input-border-focus);
background-color: var(--input-bg-focus);
}
form .is-err .c-txtbox,
form .is-err .c-txtarea {
border: var(--input-border-error);
background-color: var(--input-bg-error);
}
/* .c-select
----------------------------------------*/
:root {
--select-icon-area: 1.25rem;
--select-icon-image: url('data:image/svg+xml;utf8,');
--select-icon: var(--color-gray-dark);
--select-icon-size: 80%;
}
.c-select-field {
display: inline-block;
position: relative;
}
.c-select-field:after {
content: "";
width: var(--select-icon-area);
height: 100%;
position: absolute;
right: calc(var(--input-pd) / 2);
top: 0;
pointer-events: none;
mask-image: var(--select-icon-image);
mask-repeat: no-repeat;
mask-size: var(--select-icon-size);
mask-position: center center;
background-color: var(--txt-color);
}
.c-select {
width: 100%;
overflow-x: hidden;
cursor: pointer;
padding-right: calc(var(--select-icon-area) + var(--input-pd));
}
.c-select:focus {
border: var(--input-border-focus);
background-color: var(--input-bg-focus);
}
form .is-err .c-select {
border: var(--input-border-error);
background-color: var(--input-bg-error);
}
/*--------------------------------------------------------------------------------
.c-checkbox
.c-radio
--------------------------------------------------------------------------------*/
:root {
--checkbox-size: 1.25rem;
--checkbox-radius: 0.2rem;
--checkbox-border: 0;
--checkbox-border-checked: 0;
--checkbox-bg: var(--color-gray-light);
--checkbox-bg-checked: var(--color-primary-dark);
--checkbox-icon-image: rl('data:image/svg+xml;utf8,');
--checkbox-icon-size: 65%;
--checkbox-icon: transparent;
--checkbox-icon-checked: #FFF;
--checkbox-mgt: 0.175em;
--radio-size: 1.25rem;
--radio-border: 0;
--radio-border-checked: 0;
--radio-bg: var(--color-gray-light);
--radio-bg-checked: var(--color-primary-dark);
--radio-icon-size: 35%;
--radio-icon: #FFF;
--radio-icon-checked: #FFF;
--radio-mgt: 0.175em;
}
.c-checkbox-field,
.c-radio-field {
cursor: pointer;
display: flex;
column-gap: 0.75rem;
align-self: flex-start;
padding: calc(var(--input-pd) + 0.25rem);
border-radius: var(--input-radius);
border: var(--input-border);
background-color: var(--input-bg);
transition: background-color ease-out 0.1s, border-color ease-out 0.1s;
line-height: 1.5;
}
.c-checkbox-field:has(input:checked) { border: var(--input-border-checked); background-color: var(--input-bg-checked); }
.c-radio-field:has(input:checked) { border: var(--input-border-checked); background-color: var(--input-bg-checked); }
form .is-err .c-checkbox-field,
form .is-err .c-radio-field {
border: var(--input-border-error);
background-color: var(--input-bg-error);
}
.c-checkbox-field_txt,
.c-radio-field_txt {
flex: 1;
}
.c-checkbox-field_input,
.c-radio-field_input {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.c-checkbox-field_input input,
.c-radio-field_input input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0, 0);
border: 0;
}
.c-checkbox-field_input:after,
.c-radio-field_input:after {
content: "";
}
/* .c-checkbox */
.c-checkbox-field_input {
width: var(--checkbox-size);
height: var(--checkbox-size);
border-radius: var(--checkbox-radius);
border: var(--checkbox-border);
background-color: var(--checkbox-bg);
margin-top: var(--checkbox-mgt);
}
.c-checkbox-field_input:after {
width: var(--checkbox-size);
height: var(--checkbox-size);
mask-image: var(--checkbox-icon-image);
mask-repeat: no-repeat;
mask-size: var(--checkbox-icon-size);
mask-position: center center;
background-color: var(--checkbox-icon);
}
.c-checkbox-field_input:has(input:checked) { border: var(--checkbox-border-checked); background-color: var(--checkbox-bg-checked); }
.c-checkbox-field_input:has(input:checked):after { background-color: var(--checkbox-icon-checked); }
/* .c-radio */
.c-radio-field_input {
width: var(--radio-size);
height: var(--radio-size);
border-radius: 100%;
border: var(--radio-border);
background-color: var(--radio-bg);
margin-top: var(--radio-mgt);
}
.c-radio-field_input:after {
width: var(--radio-icon-size);
height: var(--radio-icon-size);
border-radius: 100%;
background-color: var(--radio-icon);
}
.c-radio-field_input:has(input:checked) { border: var(--radio-border-checked); background-color: var(--radio-bg-checked); }
.c-radio-field_input:has(input:checked):after { background-color: var(--radio-icon-checked); }
/*--------------------------------------------------------------------------------
.c-form-label
--------------------------------------------------------------------------------*/
.c-form-label {
display: inline-block;
min-width: 3rem;
text-align: center;
line-height: 1;
border-radius: 0.2rem;
padding: 0.5em;
font-size: var(--fs-3s-rem);
font-weight: normal;
color: #FFF;
background-color: var(--color-gray);
}
.c-form-label.-required {
background-color: var(--color-warning-dark);
}
/*--------------------------------------------------------------------------------
.c-form-errmsg
--------------------------------------------------------------------------------*/
.c-form-errmsg {
font-size: var(--fs-s);
color: var(--color-warning-dark);
display: none;
}
form .is-err .c-form-errmsg {
display: block;
padding-bottom: 0.75rem;
}
/*--------------------------------------------------------------------------------
heading
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-heading01
--------------------------------------------------------------------------------*/
.c-heading01 {
line-height: 1.5;
font-family: var(--ff-go);
font-weight: 600;
font-size: var(--fs-m);
color: #FFF;
border-radius: 0.3rem;
padding: 0.7em 1rem;
background-color: var(--color-primary);
margin-bottom: var(--space-2s);
}
/*--------------------------------------------------------------------------------
.c-heading02
--------------------------------------------------------------------------------*/
.c-heading02 {
line-height: 1.5;
font-family: var(--ff-go);
font-weight: 700;
font-size: var(--fs-l);
padding-left: 1.25rem;
position: relative;
margin-bottom: var(--space-2s);
}
.c-heading02:before {
content: "";
width: 5px;
height: 100%;
display: inline-block;
position: absolute;
left: 0;
top: 0;
background-color: var(--color-primary-dark);
}
/*--------------------------------------------------------------------------------
other
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-gmap
--------------------------------------------------------------------------------*/
.c-gmap { width:100%; height:100%; vertical-align:bottom; }
.c-gmap, .c-gmap_canvas { width: 100%; }
@media print,screen and (min-width:641px) { .c-gmap, .c-gmap_canvas { height:500px; } }
@media screen and (max-width:640px) { .c-gmap, .c-gmap_canvas { height:400px; } }
/*--------------------------------------------------------------------------------
.c-bnr
--------------------------------------------------------------------------------*/
.c-bnr {
display: block;
border-radius: 0.3rem;
overflow: hidden;
}
.c-bnr.-outline { border-width: 1px; border-style: solid; }
.c-bnr.-outline.-primary { border-width: 2px; border-color: var(--color-primary-light); }
.c-bnr.-outline.-light { border-color: var(--color-gray-light); background-color: #FFF; }
@media (hover: hover) {
.c-bnr.-outline.-primary:hover { border-color: var(--color-primary); background-color: var(--color-primary-lightest); }
.c-bnr.-outline.-light:hover { background-color: var(--color-gray-lightest); }
}
/*--------------------------------------------------------------------------------
.c-noimage
--------------------------------------------------------------------------------*/
.c-noimage { outline: 1px solid var(--border-color-light); }
/*--------------------------------------------------------------------------------
.c-blinking
--------------------------------------------------------------------------------*/
.c-blinking { animation:blink 0.6s ease-in-out infinite alternate; }
@keyframes blink {
0% { opacity: 0; }
20% { opacity: 1; }
100% { opacity: 1; }
}
/* project
=============================================================================== */
/*--------------------------------------------------------------------------------
.p-breadcrumb
--------------------------------------------------------------------------------*/
.p-breadcrumb {
width: calc(var(--base-width) * 1px);
max-width: calc(100% - (var(--side-space) * 2));
margin: 0 auto;
padding: 1.5rem 0 var(--space-s) 0;
}
.p-breadcrumb_list {
list-style: none;
display: flex;
flex-wrap: wrap;
column-gap: 0.4rem;
row-gap: 0.5rem;
line-height: 1.4;
font-size: var(--fs-s);
}
.p-breadcrumb_list li { position: relative; }
.p-breadcrumb_list li:not(:first-child):before {
content: "";
display: inline-block;
vertical-align: middle;
width: 0.4rem;
height: 0.4rem;
border-top: 1px solid var(--color-gray);
border-right: 1px solid var(--color-gray);
transform: rotate(45deg);
margin-right: 0.6rem;
margin-bottom: 0.1rem;
}
.p-breadcrumb_list li:first-child a {
display: inline-flex;
column-gap: 0.4rem;
position: relative;
}
.p-breadcrumb_list li:first-child a:before {
content: "";
width: 1.2em;
height: 1.2em;
align-self: center;
line-height: 1;
background: var(--color-secondary-dark);
color: inherit;
mask-repeat: no-repeat;
mask-image: var(--icon-home);
}
@media (max-width: 640px) {
.p-breadcrumb { display: none; }
}
/*--------------------------------------------------------------------------------
.p-card
--------------------------------------------------------------------------------*/
.p-card {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: var(--space-3s);
}
.p-card_item {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
grid-gap: 0;
border: 1px solid var(--color-primary-light);
border-radius: 0.3rem;
overflow: hidden;
}
.p-card_inner {
display: block;
padding: var(--box-space-s);
}
.p-card_hd {
border-bottom: 1px solid var(--color-primary-light);
background-color: var(--color-primary-lightest);
line-height: 1.5;
}
.p-card_hd-ttl {
font-weight: bold;
font-size: var(--fs-m);
display: block;
}
.p-card_hd-ttl-sub {
color: var(--color-gray);
font-size: var(--fs-s);
}
.p-card_hd-link {
text-decoration: none;
display: grid;
grid-template-columns: 1fr auto;
grid-column-gap: 0.5rem;
}
.p-card_hd-link:after {
content: "";
margin-top: 0.15rem;
margin-right: -0.25rem;
width: 1.2em;
height: 1.2em;
line-height: 1;
display: inline-block;
vertical-align: middle;
background: currentColor;
color: inherit;
mask-repeat: no-repeat;
mask-image: var(--icon-arrowV-next);
}
.p-card_content {
display: flex;
column-gap: 1.25rem;
}
.p-card_tmb { width: max(100px,35%); }
.p-card_data { flex: 1; }
@media (max-width: 640px) {
.p-card {
grid-template-columns: 1fr;
}
}
/*--------------------------------------------------------------------------------
.p-pager
--------------------------------------------------------------------------------*/
.p-pager {
padding-top: var(--space-m);
display: flex;
flex-wrap: wrap;
column-gap: 0.5rem;
row-gap: 1.5rem;
line-height: 1;
}
.p-pager_item { font-size: var(--fs-2s); }
.p-pager_item.-extend { align-self: flex-end; padding: 0.75rem 0.25rem; }
.p-pager_item.-prev, .p-pager_item.-next { font-size: var(--fs-m); }
.p-pager_item-link {
display: block;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
min-width: 2.5rem;
padding: 0.5rem;
text-decoration: none;
background-color: #FFF;
border: 1px solid var(--border-color);
border-radius: 0.2rem;
}
.p-pager_item.-prev .p-pager_item-link, .p-pager_item.-next .p-pager_item-link { padding: 0.5rem; }
.p-pager_item.-is-active .p-pager_item-link { background-color: var(--color-secondary-dark); border-color: var(--color-secondary-dark); color: #FFF; }
.p-pager a { color: var(--gray); }
.p-pager a:hover { border-color: var(--color-secondary-dark); color: var(--color-secondary-dark); }
@media (max-width: 640px) {
.p-pager { justify-content: center; }
}
/*--------------------------------------------------------------------------------
archive
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.p-archive
--------------------------------------------------------------------------------*/
.p-archive_item {
display: flex;
column-gap: 1rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border-color-light);
}
.p-archive_item:not(:first-of-type) { padding-top: 1.25rem; }
.p-archive_item:first-of-type { padding-top: 0.5rem; }
.p-archive_date { color: var(--color-gray); }
.p-archive_ttl { flex: 1; }
/*--------------------------------------------------------------------------------
.p-archive-select
--------------------------------------------------------------------------------*/
.p-archive-select {
display: flex;
gap: 1rem;
padding-bottom: 1.5rem;
}
@media (min-width: 641px) {
.p-archive-select { display: none; }
}
/*--------------------------------------------------------------------------------
article
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.p-article-hd
.p-article-date
.p-article-ttl
--------------------------------------------------------------------------------*/
.p-article-hd {
line-height: 1.5;
padding-left: 1.25rem;
position: relative;
margin-bottom: var(--space-2s);
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-color);
}
.p-article-hd:before {
content: "";
width: 5px;
height: calc(100% - 1rem);
display: inline-block;
position: absolute;
left: 0;
top: 0;
background-color: var(--color-primary-dark);
}
.p-article-date {
color: var(--color-gray);
font-size: var(--fs-s);
display: inline-block;
margin-bottom: 0.5rem;
}
.p-article-ttl {
font-size: var(--fs-l);
font-weight: bold;
}
/*--------------------------------------------------------------------------------
.p-article-block
--------------------------------------------------------------------------------*/
.p-article-block {
padding-bottom: var(--space-m);
}
.p-article-block:after {
content: "";
display: block;
height: 0;
clear: both;
}
/*--------------------------------------------------------------------------------
.p-article-txt
--------------------------------------------------------------------------------*/
.p-article-txt ul:not([list="none"]) { margin-left: var(--list-mgl); list-style: disc; }
.p-article-txt ol:not([list="none"]) { margin-left: var(--list-mgl); list-style: decimal; }
.p-article-txt img { vertical-align: middle; }
.p-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);
background: currentColor;
color: inherit;
mask-repeat: no-repeat;
mask-image: var(--icon-newwin);
}
/*--------------------------------------------------------------------------------
.p-article-img
--------------------------------------------------------------------------------*/
.p-article-img {
padding-bottom: 1.5rem;
}
.p-article-img.-center {
text-align: center;
padding-bottom: 1.5rem;
}
.p-article-txt + .p-article-img.-center {
padding-top: var(--space-s);
padding-bottom: 0;
}
.p-article-img img {
max-width: inherit;
width: 100%;
}
@media (min-width:641px) {
.p-article-img.-left,
.p-article-img.-right {
display: inline-block;
}
.p-article-img.-left {
float: left;
margin-right: 2rem;
}
.p-article-img.-right {
float: right;
margin-left: 2rem;
}
}
@media (max-width:640px) {
.p-article-img.-left,
.p-article-img.-right {
width: 100% !important;
max-width: 100% !important;
text-align: center;
padding-bottom: 1.5rem;
}
}
/*--------------------------------------------------------------------------------
.p-article-file
--------------------------------------------------------------------------------*/
.p-article-txt + .p-article-file {
padding-top: var(--space-s);
}