@charset "utf-8";
/*--------------------------------------------------------------------------------
Google検索
--------------------------------------------------------------------------------*/
.c-gsc * { box-sizing: border-box; }
.c-gsc .gsc-control-cse { background: none; border: none; padding: 0; }
.c-gsc .gsc-search-box { margin-bottom: 0 !important; }
.c-gsc .gsc-input { height: 100%; }
.c-gsc .gsc-input-box { height: 100%; padding: 0; }
.c-gsc .gsib_a { height: 100%; }
.c-gsc input.gsc-input { display: block; height: 100%!important; -webkit-appearance: none; background-color: transparent !important; }
.c-gsc .gsib_b { height: 100%; }
.c-gsc .gsst_b { height: 100%; padding: 0; }
.c-gsc .gsst_a { display: block; height: 100%; padding: 0; text-decoration: none; }
.c-gsc .gscb_a { height: 100%; line-height: 1; display: flex; justify-content: center; align-items: center; }
.c-gsc td.gsc-search-button { height: 100%; }
.c-gsc .gsc-search-button-v2 { height: 100%; border: none; display: flex; justify-content: center; align-items: center; margin-left: 0; padding: 0; }
.c-gsc .gsc-search-button-v2:hover,
.c-gsc .gsc-search-button-v2:focus { box-shadow: none; outline: none; }
/* 全体の高さ */
@media (min-width: 761px) { :root { --gsc-height: 2.25rem; } }
@media (max-width: 760px) { :root { --gsc-height: 2.5rem; } }
.c-gsc .gsc-search-box { height: var(--gsc-height); }
/* フィールドとボタンの間のマージン */
.c-gsc td.gsc-input { padding-right: 0 !important; }
/* フィールド */
.c-gsc .gsc-input-box {
border: 0;
border-right: 0;
border-radius: 0;
}
.c-gsc .gsib_a { padding: 0 0 0 0.5rem; }
.c-gsc input.gsc-input {
font-size: 1rem;
background-size: auto min(1rem, 15px) !important; /* Google提供画像 */
}
/* クリアボタン */
.c-gsc .gscb_a {
width: 1.75rem;
font-size: 1.5rem;
color: var(--color-primary-light) !important;
}
/* 検索ボタン */
.c-gsc .gsc-search-button-v2 {
width: 3rem;
background: var(--color-primary);
border-radius: 0;
}
.c-gsc .gsc-search-button-v2:hover,
.c-gsc .gsc-search-button-v2:focus {
background: var(--color-primary-light);
}
.c-gsc .gsc-search-button-v2 svg { width: 0.9rem; height: 0.9rem; }
/* 検索結果 */
@media (min-width: 761px) { :root { --gsc-results-wp-space: calc(100% - (var(--side-space) * 2)); } }
@media (max-width: 760px) { :root { --gsc-results-wp-space: calc(100% - 3rem); } }
.gsc-results-wrapper-overlay {
width: var(--gsc-results-wp-space) !important;
height: var(--gsc-results-wp-space) !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%);
}
/*--------------------------------------------------------------------------------
heading
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-heading
--------------------------------------------------------------------------------*/
.c-heading {
line-height: var(--line-height-s);
font-family: var(--ff-go);
font-weight: 500;
border-top: 2px solid var(--color-gray-lighter2);
position: relative;
}
.c-heading:not([class*="u-mgb"]) { margin-bottom: var(--heading-mgb, max(2rem, var(--space-s))); }
.c-heading_txt {
display: inline-block;
padding-top: max(1.5rem, var(--space-s));
border-top: 2px solid var(--color-primary);
margin-top: -2px;
}
.c-heading_label {
display: inline-block;
vertical-align: middle;
margin-bottom: 0.25em;
padding: 0.5em;
font-size: var(--fs-s-rem);
color: #FFF;
line-height: 1;
background-color: var(--color-red-light);
}
@media (min-width: 761px) {
.c-heading:not([class*="u-fs"]) { font-size: var(--fs, calc(var(--fs-3l) + 0.15rem)); }
}
@media (max-width: 760px) {
.c-heading:not([class*="u-fs"]) { font-size: var(--fs, var(--fs-3l)); }
}
/*--------------------------------------------------------------------------------
.c-heading2
--------------------------------------------------------------------------------*/
.c-heading2 {
line-height: var(--line-height-s);
font-family: var(--ff-go);
font-weight: 600;
}
.c-heading2:not([class*="u-mgb"]) { margin-bottom: var(--heading2-mgb, clamp(1.5rem, var(--space-2s), 2rem)); }
.c-heading2:not([class*="u-fc"]) { color: var(--color, var(--color-primary)); }
.c-heading2:not([class*="u-fs"]) { font-size: var(--fs, var(--fs-3l)); }
/*--------------------------------------------------------------------------------
.c-heading3
--------------------------------------------------------------------------------*/
.c-heading3 {
line-height: var(--line-height-s);
font-family: var(--ff-go);
font-size: var(--fs-l);
font-weight: 500;
background-color: var(--bg, var(--pale-color-primary));
color: #FFF;
padding: 0.65rem 0.75rem;
}
.c-heading3:not([class*="u-mgb"]) { margin-bottom: var(--heading3-mgb, clamp(1.5rem, var(--space-2s), 2rem)); }
.c-heading3:not([class*="u-fs"]) { font-size: var(--fs, var(--fs-l)); }
/*--------------------------------------------------------------------------------
.c-heading4
--------------------------------------------------------------------------------*/
.c-heading4 {
line-height: var(--line-height-s);
font-family: var(--ff-go);
font-size: var(--fs-l);
font-weight: 600;
padding-left: clamp(0.5rem, 3vw, 1rem);
border-left: clamp(2px, calc(4 / 400 * 100vw), 4px) solid var(--color-primary);
}
.c-heading4:not([class*="u-mgb"]) { margin-bottom: var(--heading4-mgb, clamp(1.5rem, var(--space-2s), 2rem)); }
.c-heading4:not([class*="u-fs"]) { font-size: var(--fs, var(--fs-2l)); }
/*--------------------------------------------------------------------------------
icon
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
SVG
--------------------------------------------------------------------------------*/
:root {
/* arrow（→） */
--icon-arrow-alt-thin: url('data:image/svg+xml;utf8,');
--icon-arrow-alt: url('data:image/svg+xml;utf8,');
--icon-arrow-alt-thick: url('data:image/svg+xml;utf8,');
/* arrow（>） */
--icon-arrow-chevron: url('data:image/svg+xml;utf8,');
--icon-arrow-chevron-circle: url('data:image/svg+xml;utf8,');
/* add・remove */
--icon-add-circle: url('data:image/svg+xml;utf8,');
--icon-remove-circle: url('data:image/svg+xml;utf8,');
--icon-add-fill-circle: url('data:image/svg+xml;utf8,');
--icon-remove-fill-circle: url('data:image/svg+xml;utf8,');
/* SNS */
--icon-fb: url('data:image/svg+xml;utf8,');
--icon-fb02: 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-line02: url('data:image/svg+xml;utf8,');
--icon-youtube: url('data:image/svg+xml;utf8,');
--icon-tiktok: url('data:image/svg+xml;utf8,');
--icon-fb-btn: url('data:image/svg+xml;utf8,');
--icon-insta-btn: url('data:image/svg+xml;utf8,');
--icon-x-btn: url('data:image/svg+xml;utf8,');
--icon-line-btn: url('data:image/svg+xml;utf8,');
--icon-youtube-btn: url('data:image/svg+xml;utf8,');
--icon-tiktok-btn: url('data:image/svg+xml;utf8,');
/* nav */
--icon-nav-dl: url("../img/icon/dl.svg");
--icon-nav-access: url("../img/icon/access.svg");
--icon-nav-reserve: url("../img/icon/reserve.svg");
--icon-nav-contact: url("../img/icon/contact.svg");
--icon-tel: url('data:image/svg+xml;utf8,');
--icon-newwin: url('data:image/svg+xml;utf8,');
--icon-down: url('data:image/svg+xml;utf8,');
--icon-up: url('data:image/svg+xml;utf8,');
--icon-search: url('data:image/svg+xml;utf8,');
}
/*--------------------------------------------------------------------------------
.c-icon
--------------------------------------------------------------------------------*/
:root { --default-icon-size: 1rem; }
.c-icon {
width: var(--icon-size, var(--default-icon-size));
height: var(--icon-size, var(--default-icon-size));
line-height: 1;
display: inline-block;
vertical-align: middle;
position: relative;
background: currentColor;
color: var(--icon-color, currentColor);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
}
.c-icon.-nav-dl { mask-image: var(--icon-nav-dl); }
.c-icon.-nav-access { mask-image: var(--icon-nav-access); }
.c-icon.-nav-reserve { mask-image: var(--icon-nav-reserve); }
.c-icon.-nav-contact { mask-image: var(--icon-nav-contact); }
.c-icon.-search { mask-image: var(--icon-search); }
/*--------------------------------------------------------------------------------
.c-sns
--------------------------------------------------------------------------------*/
:root { --default-sns-size: 1.4rem; }
.c-sns {
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: currentColor;
color: currentColor;
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
}
.c-sns.-fb { mask-image: var(--icon-fb); }
.c-sns.-fb02 { mask-image: var(--icon-fb02); }
.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.-line02 { mask-image: var(--icon-line02); }
.c-sns.-youtube { mask-image: var(--icon-youtube); }
.c-sns.-tiktok { mask-image: var(--icon-tiktok); }
.c-sns.-fb-btn { mask-image: var(--icon-fb-btn); }
.c-sns.-insta-btn { mask-image: var(--icon-insta-btn); }
.c-sns.-x-btn { mask-image: var(--icon-x-btn); }
.c-sns.-line-btn { mask-image: var(--icon-line-btn); }
.c-sns.-youtube-btn { mask-image: var(--icon-youtube-btn); }
.c-sns.-tiktok-btn { mask-image: var(--icon-tiktok-btn); }
/* 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; }
/* button
----------------------------------------*/
:root {
--sns-btn-outline: 1px solid var(--border-color);
--sns-btn-outline-hover: var(--sns-btn-outline);
--sns-btn-bg: transparent;
--sns-btn-bg-hover: transparent;
--sns-btn-pd: 0.8rem;
}
.c-sns-btn {
border: var(--sns-btn-outline);
background-color: var(--sns-btn-bg);
border-radius: 100%;
padding: var(--sns-btn-pd);
line-height: 1;
display: inline-flex;
vertical-align: top;
transition: var(--hover-trans);
}
@media (hover: hover) {
.c-sns-btn:hover {
border: var(--sns-btn-outline-hover);
background-color: var(--sns-btn-bg-hover);
}
.c-sns-btn .c-sns { transition: opacity 0.2s ease-in-out; }
.c-sns-btn:hover .c-sns { opacity: 0.6; }
}
/*--------------------------------------------------------------------------------
.c-file
--------------------------------------------------------------------------------*/
:root {
--default-file-size: 2rem;
}
.c-file {
width: var(--file-size, var(--default-file-size));
height: var(--file-size, var(--default-file-size));
margin: var(--file-mgt, 0) var(--file-mgr, 0.75rem) var(--file-mgb, 0) var(--file-mgl, 0);
line-height: 1;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.c-file.-pdf { background-image: url("../img/icon/pdf.svg"); }
.c-file.-doc { background-image: url("../img/icon/doc.svg"); }
.c-file.-xls { background-image: url("../img/icon/xls.svg"); }
.c-file.-ppt { background-image: url("../img/icon/ppt.svg"); }
/*--------------------------------------------------------------------------------
.c-arrow
--------------------------------------------------------------------------------*/
:root {
/* default */
--default-arrow-size: 2.2rem;
--default-arrow-outline: 1px solid transparent;
--default-arrow-outline-hover: 1px solid transparent;
--default-arrow-bg: var(--color-primary);
--default-arrow-bg-hover: var(--color-primary-light);
--default-arrow-color: #FFF;
--default-arrow-color-hover: #FFF;
}
.c-arrow.-gray-line {
--arrow-bg: #FFF;
--arrow-bg-hover: var(--color-primary);
--arrow-outline: 1px solid var(--color-gray-light);
--arrow-outline-hover: 1px solid var(--color-primary);
--arrow-color: var(--color-primary);
--arrow-color-hover: #FFF;
}
.c-arrow.-disabled {
--arrow-bg: var(--color-gray-lighter);
--arrow-bg-hover: var(--color-gray-lighter);
--arrow-outline: 1px solid var(--color-gray-lighter);
--arrow-outline-hover: 1px var(--color-gray-lighter);
--arrow-color: #FFF;
--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));
border: var(--arrow-outline, var(--default-arrow-outline));
background-color: var(--arrow-bg, var(--default-arrow-bg));
color: var(--arrow-color, var(--default-arrow-color));
border-radius: 50%;
position: relative;
overflow: hidden;
transition: var(--hover-trans);
}
.c-arrow.-prev { transform: scale(-1, 1); }
.c-arrow:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: currentColor;
color: currentColor;
mask-image: var(--icon-arrow-alt-thick);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 38%;
}
/* .newwin
----------------------------------------*/
.c-arrow.-newwin:after {
mask-image: var(--icon-newwin);
}
/*--------------------------------------------------------------------------------
.c-arrow2
--------------------------------------------------------------------------------*/
:root {
/* default */
--default-arrow2-size: 1.2rem;
--default-arrow2-outline: 1px solid var(--color-gray-dark);
--default-arrow2-outline-hover: 1px solid var(--color-primary);
--default-arrow2-color: var(--color-gray-dark);
--default-arrow2-color-hover: var(--color-primary);
}
.c-arrow-txt:has(.c-arrow2) {
--default-arrow-size: var(--default-arrow2-size);
}
.c-arrow2 {
display: inline-block;
vertical-align: top;
width: var(--arrow2-size, var(--default-arrow2-size));
height: var(--arrow2-size, var(--default-arrow2-size));
line-height: 1;
background: currentColor;
color: var(--arrow2-color, var(--default-arrow2-color));
mask-image: var(--icon-arrow-chevron-circle);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
transition: var(--hover-trans);
}
.c-arrow2.-prev { transform: scale(-1, 1); }
.c-arrow2.-up { transform: rotate(-90deg); }
.c-arrow2.-down { transform: rotate(90deg); }
@media (hover: hover) {
.c-arrow-txt:hover .c-arrow2,
.c-arrow2:hover, a:hover .c-arrow2,
.js_linkblock:hover .c-arrow2 {
color: var(--arrow2-color-hover, var(--default-arrow2-color-hover));
}
}
/*--------------------------------------------------------------------------------
.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: min(0.5rem + 0.25vw);
}
.c-arrow-txt:not(:has(.c-arrow2)) { --arrow-txt-cgap: clamp(1rem, 4vw, 1.25rem); }
.c-arrow-txt .c-arrow { flex-shrink: 0; }
.c-arrow-txt .c-arrow2 { vertical-align: middle; margin-bottom: 0.25rem; margin-left: var(--arrow-txt-cgap, var(--default-arrow-txt-cgap)); }
.c-arrow-txt {
line-height: var(--line-height);
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-icon-txt
--------------------------------------------------------------------------------*/
.c-icon-txt:has(.c-file) {
--icon-txt-mgt: calc(-1 * (var(--file-size, var(--default-file-size)) / 2) + 0.85em);
--icon-txt-pdt: calc((var(--file-size, var(--default-file-size)) / 2) - 0.85em);
--file-mgt: 0;
--file-mgr: 0;
--file-mgb: 0;
--file-mgl: 0;
}
.c-icon-txt:has(.c-icon) {
--icon-txt-mgt: calc(-1 * (var(--icon-size, var(--default-icon-size)) / 2) + 0.85em);
--icon-txt-pdt: calc((var(--icon-size, var(--default-icon-size)) / 2) - 0.85em);
}
.c-icon-txt .c-icon,
.c-icon-txt .c-file { flex-shrink: 0; margin-top: var(--icon-txt-mgt); }
.c-icon-txt {
--link-color: var(--txt-color);
--link-color-hover: var(--color-primary);
--link-deco: none;
--link-deco-hover: none;
line-height: var(--line-height);
display: inline-flex;
vertical-align: top;
position: relative;
transition: var(--hover-trans);
padding-top: var(--icon-txt-pdt);
}
.c-icon-txt:not([class*="u-cgap"], [class*="u-gap"]) {
column-gap: min(0.5rem + 0.25vw);
}
/*--------------------------------------------------------------------------------
.c-newwin
--------------------------------------------------------------------------------*/
:root { --newwin-size: 0.75rem; --newwin-mgl: 0.5rem; --newwin-mgr: 0.5rem; --newwin-mgb: 0.1rem; }
.c-newwin[target="_blank"]:after {
content: "";
width: var(--newwin-size);
height: var(--newwin-size);
line-height: 1;
display: inline-block;
vertical-align: middle;
margin-left: var(--newwin-mgl);
margin-right: var(--newwin-mgr);
margin-bottom: var(--newwin-mgb);
background: currentColor;
color: currentColor;
mask-repeat: no-repeat;
mask-image: var(--icon-newwin);
transition: var(--hover-trans);
}
.c-newwin[target="_blank"]:after,
.c-newwin[target="_blank"]:hover:after { color: inherit; }
/*--------------------------------------------------------------------------------
.c-tel
--------------------------------------------------------------------------------*/
.c-tel {
--link-color: var(--color-primary);
--link-color-hover: var(--color-primary);
--link-deco: none;
--link-deco-hover: none;
font-weight: var(--tel-fw, 600);
line-height: 1;
display: inline-flex;
vertical-align: top;
text-decoration: none;
}
.c-tel:not([class*="u-fc"]) {
color: var(--tel-color, var(--color-primary));
}
.c-tel:not([class*="u-fs"]) {
font-size: var(--tel-fs, var(--fs-4l));
}
.c-tel:before {
content: "";
width: 1em;
height: 1em;
background: var(--tel-icon-bg, var(--color-primary));
color: currentColor;
mask-image: var(--icon-tel);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 80%;
}
/*--------------------------------------------------------------------------------
button
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-btn
--------------------------------------------------------------------------------*/
:root {
/* default */
--default-btn-fs: inherit;
--default-btn-ff: inherit;
--default-btn-fw: inherit;
--default-btn-txt: var(--txt-color);
--default-btn-txt-hover: var(--color-primary);
--default-btn-icon-size: 1.5rem;
--default-btn-icon-side: 0.75rem;
--default-btn-arrow-size: 1rem;
--default-btn-arrow-side: 0.75rem;
--default-btn-cgap: min(0.75rem + 0.25vw);
--default-btn-pd: 0.5em;
--default-btn-pd-side: 1.5em;
/*--default-btn-width: ;*/
/*--default-btn-width-min: ;*/
--default-btn-radius: 0.35rem;
--default-btn-bg: #FFF;
--default-btn-bg-hover: #FFF;
--default-btn-outline: 1px solid var(--color-gray-light);
--default-btn-outline-hover: 1px solid var(--color-primary);
--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);
}
.c-btn[data-btn-pd="s"] { --default-btn-pd: 0.35em; --default-btn-pd-side: 1.25em; }
.c-btn[data-btn-pd="m"] { --default-btn-pd: 0.75em; }
.c-btn[data-btn-pd="l"] { --default-btn-pd: 1em; }
@media (max-width: 600px) {
.c-btn[data-btn-pd="m"] { --default-btn-pd: 1em; }
.c-btn[data-btn-pd="l"] { --default-btn-pd: 1.25em; }
}
.c-btn[data-btn-width="s"] { --default-btn-width-min: min(100%, 240px); }
.c-btn[data-btn-width="m"] { --default-btn-width-min: min(100%, 320px); }
.c-btn[data-btn-width="l"] { --default-btn-width-min: min(100%, 480px); }
.c-btn[data-btn-radius="0"] { --default-btn-radius: 0; }
.c-btn[data-btn-radius="100"] { --default-btn-radius: 9999px; }
.c-btn:not([data-btn-icon="auto"]) { --default-btn-cgap: 0; }
.c-btn:has(.c-icon) { --default-btn-icon-size: 1.15rem; }
.c-btn:has(.c-icon.-pdf, .c-icon.-doc, .c-icon.-xls, .c-icon.-ppt, .c-file) { --default-btn-icon-size: 1.5rem; }
.c-btn[data-btn-pd="m"]:has(.c-icon.-pdf, .c-icon.-doc, .c-icon.-xls, .c-icon.-ppt, .c-file),
.c-btn[data-btn-pd="l"]:has(.c-icon.-pdf, .c-icon.-doc, .c-icon.-xls, .c-icon.-ppt, .c-file) { --default-btn-icon-size: 2rem; }
.c-btn:has(.c-file) {
--file-mgt: 0;
--file-mgr: 0;
--file-mgb: 0;
--file-mgl: 0;
--default-btn-file-filter: none;
--default-btn-file-filter-hover: none;
}
.c-btn.-primary {
--btn-txt: #FFF;
--btn-txt-hover: #FFF;
--btn-bg: var(--color-primary);
--btn-bg-hover: var(--color-primary-light);
--btn-outline: 0;
--btn-outline-hover: 0;
--btn-arrow-color: #FFF;
--btn-arrow-color-hover: #FFF;
--btn-icon-color: #FFF;
--btn-icon-color-hover: #FFF;
--btn-file-filter: brightness(0) invert(1);
--btn-file-filter-hover: brightness(0) invert(1);
}
.c-btn.-primary-line {
--btn-txt: var(--color-primary);
--btn-txt-hover: #FFF;
--btn-bg: #FFF;
--btn-bg-hover: var(--color-primary);
--btn-icon-color: var(--color-primary);
--btn-icon-color-hover: #FFF;
--btn-outline: 1px solid var(--color-primary);
--btn-outline-hover: 1px solid var(--color-primary);
--btn-icon-color: var(--color-primary);
--btn-icon-color-hover: #FFF;
--btn-file-filter: none;
--btn-file-filter-hover: brightness(0) invert(1);
}
.c-btn.-secondary {
--btn-txt: #FFF;
--btn-txt-hover: #FFF;
--btn-bg: var(--color-secondary);
--btn-bg-hover: var(--color-secondary-light);
--btn-outline: 0;
--btn-outline-hover: 0;
--btn-arrow-color: #FFF;
--btn-arrow-color-hover: #FFF;
--btn-icon-color: #FFF;
--btn-icon-color-hover: #FFF;
--btn-file-filter: brightness(0) invert(1);
--btn-file-filter-hover: brightness(0) invert(1);
}
.c-btn.-secondary-line {
--btn-txt: var(--color-secondary);
--btn-txt-hover: #FFF;
--btn-bg: #FFF;
--btn-bg-hover: var(--color-secondary);
--btn-outline: 1px solid var(--color-secondary);
--btn-outline-hover: 1px solid var(--color-secondary);
--btn-arrow-color: var(--color-secondary);
--btn-arrow-color-hover: #FFF;
--btn-icon-color: var(--color-secondary);
--btn-icon-color-hover: #FFF;
--btn-file-filter: none;
--btn-file-filter-hover: brightness(0) invert(1);
}
.c-btn.-red {
--btn-txt: #FFF;
--btn-txt-hover: #FFF;
--btn-bg: var(--color-red);
--btn-bg-hover: var(--color-red-light);
--btn-outline: 0;
--btn-outline-hover: 0;
--btn-arrow-color: #FFF;
--btn-arrow-color-hover: #FFF;
--btn-icon-color: #FFF;
--btn-icon-color-hover: #FFF;
--btn-file-filter: brightness(0) invert(1);
--btn-file-filter-hover: brightness(0) invert(1);
}
.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(--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));
}
.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,
.js_linkblock:hover .c-btn {
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:not([data-btn-icon="auto"]):has(.c-btn_arrow:not(:first-of-type)) { padding-right: var(--default-btn-arrow-side); }
.c-btn:not([data-btn-icon="auto"]):has(.c-btn_icon:not(:first-of-type)) { padding-right: var(--default-btn-icon-side); }
.c-btn:not([data-btn-icon="auto"]):has(.c-btn_arrow:first-of-type) { padding-left: var(--default-btn-arrow-side); }
.c-btn:not([data-btn-icon="auto"]):has(.c-btn_icon:first-of-type) { padding-left: var(--default-btn-icon-side); }
.c-btn:not([data-btn-icon="auto"]):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:not([data-btn-icon="auto"]):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_arrow,
.c-btn_icon {
flex-shrink: 0;
line-height: 1;
position: relative;
overflow: hidden;
transition: var(--hover-trans);
}
.c-btn_icon {
width: var(--btn-icon-size, var(--default-btn-icon-size));
height: var(--btn-icon-size, var(--default-btn-icon-size));
color: var(--btn-icon-color, var(--default-btn-icon-color));
}
.c-btn .c-btn_arrow.-prev { transform: scale(-1, 1); }
.c-btn_arrow {
width: var(--btn-arrow-size, var(--default-btn-arrow-size));
height: var(--btn-arrow-size, var(--default-btn-arrow-size));
}
.c-btn_arrow:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: currentColor;
color: var(--btn-arrow-color, var(--default-btn-arrow-color));
mask-image: var(--icon-arrow-alt-thick);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 90%;
animation-fill-mode: forwards;
}
.c-btn .c-file { filter: var(--btn-file-filter, var(--default-btn-file-filter)); }
@media (hover: hover) {
.c-btn:hover .c-btn_arrow:after { 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; line-height: var(--line-height); }
.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; }
/* .-cols
----------------------------------------*/
.c-list.-cols2,
.c-list-mark.-cols2 { --list-cols: 2; }
.c-list.-cols3,
.c-list-mark.-cols3 { --list-cols: 3; }
.c-list.-cols4,
.c-list-mark.-cols4 { --list-cols: 4; }
@media (min-width: 761px) {
.c-list[class*="-cols"],
.c-list-mark[class*="-cols"] { --cgap: 3rem; }
}
@media (max-width: 760px) {
.c-list[class*="-cols"],
.c-list-mark[class*="-cols"] { --cgap: clamp(2rem, 6vw, 3rem); }
.c-list.-cols2,
.c-list-mark.-cols2 { --list-cols: 1; }
.c-list.-cols3,
.c-list-mark.-cols3 { --list-cols: 2; }
.c-list.-cols4,
.c-list-mark.-cols4 { --list-cols: 2; }
}
@media (max-width: 600px) {
.c-list.-cols3,
.c-list-mark.-cols3 { --list-cols: 1; }
.c-list.-cols4,
.c-list-mark.-cols4 { --list-cols: 2; }
}
.c-list[class*="-cols"],
.c-list-mark[class*="-cols"] {
display: grid;
width: fit-content;
column-gap: var(--cgap);
grid-template-columns: repeat(var(--list-cols), auto);
}
.c-list[class*="-cols"] .col-full,
.c-list-mark[class*="-cols"] .col-full { grid-column: span var(--list-cols); }
/* .c-list-mark
----------------------------------------*/
.c-list-mark { --list-mark-size: 0.8em; --list-mark-mgt: 0.5em; }
.c-list-mark { display: flex; flex-direction: column; line-height: var(--line-height); }
.c-list-mark[data-list-fs="s"] { --list-mark-fs: var(--fs-s); }
.c-list-mark[data-list-fs="m"] { --list-mark-fs: var(--fs-m); }
.c-list-mark[data-list-fs="l"] { --list-mark-fs: var(--fs-l); }
.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) + 0.75rem); }
.c-list-mark li:before,
.c-list-mark:not(:has(li)):before {
content: "";
width: var(--list-mark-size);
height: var(--list-mark-size);
font-size: var(--list-mark-fs);
display: inline-block;
vertical-align: middle;
line-height: 1;
background-color: var(--list-mark-color, var(--pale-color-primary));
position: absolute;
left: calc((1em - var(--list-mark-size)) / 2);
top: var(--list-mark-mgt);
}
.c-list-mark.-circle li:before,
.c-list-mark.-circle:not(:has(li)):before { --list-mark-size: 0.5em; --list-mark-mgt: 0.6em; border-radius: 9999px; }
.c-list-mark.-circle li,
.c-list-mark.-circle:not(:has(li)) { padding-left: calc(var(--list-mark-size) + 0.5rem); }
/* .c-list-txt
.c-notes
----------------------------------------*/
.c-list-txt:has(li),
.c-notes:has(li) { display: flex; flex-direction: column; }
.c-list-txt,
.c-notes { line-height: var(--line-height); }
.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.25rem); }
.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-row
----------------------------------------*/
.c-list-row { display: flex; flex-wrap: wrap; }
.c-list-row.-kten:not([class*="u-cgap"]):not([class*="u-gap"]) { column-gap: var(--list-row-cgap, 1rem); }
.c-list-row.-kten li:not(:last-child):after {
content: "、";
width: 1em;
height: 1em;
}
/*--------------------------------------------------------------------------------
flex
--------------------------------------------------------------------------------*/
.c-flex { display: flex; flex-direction: column; }
/* .c-flex-row
----------------------------------------*/
.c-flex-row { display: flex; flex-wrap: wrap; align-items: center; }
.c-flex-row.-nowrap { flex-wrap: nowrap; }
.c-flex-row.-top { align-items: flex-start; }
.c-flex-row.-bottom { align-items: flex-end; }
.c-flex-row.-baseline { align-items: baseline; }
.c-flex-row.-content-center { justify-content: center; }
/*--------------------------------------------------------------------------------
image area（image + text）
--------------------------------------------------------------------------------*/
.c-img-area { display: flex; }
.c-img-area:not(.-normal) { flex-wrap: wrap; }
.c-img-area:has(.c-img-area_img.-left),
.c-img-area:has(.c-img-area_img.-right) { gap: 2rem var(--space-s); }
.c-img-area_txt { flex: 1; }
.c-img-area_img { width: var(--img-area-wide, 35%); }
@media (min-width: 761px) {
.c-img-area:not(.-normal):not([data-break="sp"]) > .c-img-area_img.-right { order: 2; }
.c-img-area:not([data-break="sp"]) .c-img-area_img.-right.-top { margin-top: calc(-1 * (var(--space-m) + 0.5rem)); }
}
@media (min-width: 601px) {
.c-img-area[data-break="sp"] > .c-img-area_img.-right { order: 2; }
.c-img-area[data-break="sp"] .c-img-area_img.-right.-top { margin-top: calc(-1 * (var(--space-m) + 0.5rem)); }
}
@media (max-width: 760px) {
.c-img-area:not(.-normal):not([data-break="sp"]) { flex-direction: column; }
.c-img-area:not(.-normal):not([data-break="sp"]) .c-img-area_img {
width: var(--img-area-wide, fit-content);
min-width: inherit;
max-width: 560px;
margin-inline: auto;
}
}
@media (max-width: 600px) {
.c-img-area[data-break="sp"] { flex-direction: column; }
.c-img-area[data-break="sp"] .c-img-area_img {
width: var(--img-area-wide, fit-content);
min-width: inherit;
margin-inline: auto;
}
}
/*--------------------------------------------------------------------------------
image cols
--------------------------------------------------------------------------------*/
@media (min-width: 761px) {
.c-img-cols.-cols4 { --cols: 4; }
.c-img-cols.-cols3 { --cols: 3; }
.c-img-cols { --default-col-max: 560px; }
.c-img-cols:has(> :nth-child(1):last-child) { --default-col-max: 800px; }
}
.c-img-cols { --cols: 2; }
.c-img-cols:has(> :nth-child(1):last-child) { --cols: 1; }
.c-img-cols[data-img-size="m"] { --col-max: 640px; }
.c-img-cols[data-img-size="l"] { --col-max: 960px; }
.c-img-cols[data-img-size="fit"] { --col-max: 100%; }
.c-img-cols_item.line,
.c-img-cols_item.line-img img { border: 1px solid var(--border-color); }
.c-img-cols {
width: fit-content;
margin-inline: auto;
display: grid;
grid-template-columns: repeat(var(--cols), auto);
gap: 1.5rem var(--space-3s);
justify-items: center;
}
.c-img-cols_item { max-width: var(--col-max, var(--default-col-max)); }
@media (max-width: 760px) {
.c-img-cols[data-break]:not([data-break="sp"]) { grid-template-columns: auto; }
}
@media (max-width: 600px) {
.c-img-cols[data-break="sp"] { grid-template-columns: auto; }
}
/*--------------------------------------------------------------------------------
table
--------------------------------------------------------------------------------*/
table { line-height: var(--line-height); }
thead { line-height: var(--line-height-s); }
table small { display: inline-block; line-height: var(--line-height-s); }
.c-tbl {
width: 100%;
border-collapse: collapse;
}
.c-tbl th {
width: 25%;
background-color: var(--pale-color-primary-lightest);
}
.c-tbl td { vertical-align: middle; }
@media (min-width: 761px) {
.c-tbl { border-top: 1px solid var(--pale-color-primary); }
.c-tbl th, .c-tbl td { border-bottom: 1px solid var(--pale-color-primary); }
.c-tbl th, .c-tbl td { padding: 1.25rem; }
.c-tbl[data-pd="s"] th,
.c-tbl[data-pd="s"] td { padding: 1rem; }
}
@media (max-width: 760px) {
.c-tbl.-normal { font-size: var(--fs-s); border-top: 1px solid var(--pale-color-primary); }
.c-tbl.-normal th, .c-tbl.-normal td { border-bottom: 1px solid var(--pale-color-primary); }
.c-tbl.-normal th,
.c-tbl.-normal td { padding: 1rem 0.75rem; }
.c-tbl.-normal[data-pd="s"] th,
.c-tbl.-normal[data-pd="s"] td { padding: 0.75rem; }
.c-tbl:not(.-normal) { display: grid; }
.c-tbl:not(.-normal) tr {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
.c-tbl:not(.-normal) th,
.c-tbl:not(.-normal) td {
width: 100% !important;
height: 100% !important;
text-align: left;
}
.c-tbl:not(.-normal) th { padding: 0.5rem 0.75rem; }
.c-tbl:not(.-normal) td { padding: 1.25rem 0.75rem; }
.c-tbl:not(.-normal) tr:last-child td:last-child { padding-bottom: 0.5rem; }
}
/*--------------------------------------------------------------------------------
.c-tbl2
--------------------------------------------------------------------------------*/
.c-tbl2 {
width: 100%;
border-collapse: collapse;
line-height: var(--line-height-s);
}
.c-tbl2:has(.sticky) {
/* ※stickyでborderが消える現象の対策 */
border-collapse: separate;
border-spacing: 0;
/* */
border-bottom: 1px solid var(--pale-color-primary);
}
.c-tbl2 .sticky {
position: sticky;
left: 0;
top: 0;
z-index: 2;
}
.c-tbl2 th,
.c-tbl2 td {
padding: 1em;
vertical-align: middle;
}
.c-tbl2 thead th {
padding: 0.75em 1rem;
background-color: var(--pale-color-primary-lightest);
}
.c-tbl2[data-pd="m"] th,
.c-tbl2[data-pd="m"] td { padding: 1.25rem; }
.c-tbl2[data-pd="m"] thead th { padding: 0.75rem 1.25rem; }
.c-tbl2 thead[data-th-bg="dark"] th {
background-color: var(--pale-color-primary);
color: #FFF;
}
.c-tbl2 thead[data-th-bg="dark"] th:first-child { border-left: 1px solid var(--pale-color-primary); }
.c-tbl2 thead[data-th-bg="dark"] th { border-right: 1px solid rgba(255,255,255,0.4); }
.c-tbl2 thead[data-th-bg="dark"] th:last-child { border-right-color: var(--pale-color-primary); }
.c-tbl2 tbody[data-th-bg] th,
.c-tbl2 tbody th.bg { background-color: var(--pale-color-primary-lightest); }
.c-tbl2:not(:has(.sticky)) th,
.c-tbl2:not(:has(.sticky)) td {
border: 1px solid var(--pale-color-primary);
}
.c-tbl2:has(.sticky) th,
.c-tbl2:has(.sticky) td {
border-top: 1px solid var(--pale-color-primary);
}
.c-tbl2:has(.sticky) tbody:not([data-th-bg]) .sticky:not(.bg) { background-color: #FFF; }
.c-tbl2:has(.sticky) th,
.c-tbl2:has(.sticky) td { border-right: 1px solid var(--pale-color-primary); }
.c-tbl2:has(.sticky) thead th:first-child,
.c-tbl2:has(.sticky) tbody td:first-child,
.c-tbl2:has(.sticky) tbody th:first-child { border-left: 1px solid var(--pale-color-primary); }
@media (max-width: 760px) {
.c-tbl2 { font-size: var(--fs-s); }
.c-tbl2 thead th,
.c-tbl2 th,
.c-tbl2 td {
padding: 0.75em;
}
.c-tbl2[data-pd="m"] th,
.c-tbl2[data-pd="m"] td { padding: 1rem 0.75rem; }
.c-tbl2[data-pd="m"] thead th { padding: 0.75rem; }
}
/*--------------------------------------------------------------------------------
.c-tbl3
--------------------------------------------------------------------------------*/
.c-tbl3 {
width: 100%;
border-collapse: collapse;
line-height: var(--line-height-s);
}
.c-tbl3:has(.sticky) {
/* ※stickyでborderが消える現象の対策 */
border-collapse: separate;
border-spacing: 0;
/* */
border-bottom: 1px solid var(--pale-color-quaternary);
}
.c-tbl3 .sticky {
position: sticky;
left: 0;
top: 0;
z-index: 2;
}
.c-tbl3 th,
.c-tbl3 td {
padding: 1em;
vertical-align: middle;
}
.c-tbl3 thead th {
padding: 0.75em 1rem;
background-color: var(--pale-color-quaternary-lightest);
}
.c-tbl3[data-pd="m"] th,
.c-tbl3[data-pd="m"] td { padding: 1.25rem; }
.c-tbl3[data-pd="m"] thead th { padding: 0.75rem 1.25rem; }
.c-tbl3 thead[data-th-bg="dark"] th {
background-color: var(--pale-color-quaternary);
color: #FFF;
}
.c-tbl3 thead[data-th-bg="dark"] th:first-child { border-left: 1px solid var(--pale-color-quaternary); }
.c-tbl3 thead[data-th-bg="dark"] th { border-right: 1px solid rgba(255,255,255,0.4); }
.c-tbl3 thead[data-th-bg="dark"] th:last-child { border-right-color: var(--pale-color-quaternary); }
.c-tbl3 tbody[data-th-bg] th,
.c-tbl3 tbody th.bg { background-color: var(--pale-color-quaternary-lightest); }
.c-tbl3:not(:has(.sticky)) th,
.c-tbl3:not(:has(.sticky)) td {
border: 1px solid var(--pale-color-quaternary);
}
.c-tbl3:has(.sticky) th,
.c-tbl3:has(.sticky) td {
border-top: 1px solid var(--pale-color-quaternary);
}
.c-tbl3:has(.sticky) tbody:not([data-th-bg]) .sticky:not(.bg) { background-color: #FFF; }
.c-tbl3:has(.sticky) th,
.c-tbl3:has(.sticky) td { border-right: 1px solid var(--pale-color-quaternary); }
.c-tbl3:has(.sticky) thead th:first-child,
.c-tbl3:has(.sticky) tbody td:first-child,
.c-tbl3:has(.sticky) tbody th:first-child { border-left: 1px solid var(--pale-color-quaternary); }
@media (max-width: 760px) {
.c-tbl3 { font-size: var(--fs-s); }
.c-tbl3 thead th,
.c-tbl3 th,
.c-tbl3 td {
padding: 0.75em;
}
.c-tbl3[data-pd="m"] th,
.c-tbl3[data-pd="m"] td { padding: 1rem 0.75rem; }
.c-tbl3[data-pd="m"] thead th { padding: 0.75rem; }
}
/*--------------------------------------------------------------------------------
.c-tbl4
--------------------------------------------------------------------------------*/
.c-tbl4 {
width: 100%;
border-collapse: collapse;
}
.c-tbl4 th {
width: 20%;
white-space: nowrap;
}
.c-tbl4.-normal th { white-space: nowrap; }
.c-tbl4 td { vertical-align: middle; }
@media (min-width: 761px) {
.c-tbl4.-line-top tr:first-child th,
.c-tbl4.-line-top tr:first-child td { border-top: 1px solid var(--border-color); }
.c-tbl4 th, .c-tbl4 td {
padding: 1.25rem 0;
border-bottom: 1px solid var(--border-color);
}
.c-tbl4 td { padding-left: 1.25rem; }
.c-tbl4:not(.-line-top) tr:first-child th,
.c-tbl4:not(.-line-top) tr:first-child td { padding-top: 0; }
}
@media (max-width: 760px) {
.c-tbl4.-normal.-line-top tr:first-child th,
.c-tbl4.-normal.-line-top tr:first-child td { border-top: 1px solid var(--border-color); }
.c-tbl4.-normal th, .c-tbl4.-normal td {
padding: 1rem 0;
border-bottom: 1px solid var(--border-color);
}
.c-tbl4.-normal td { padding-left: 1rem; }
.c-tbl4:not(.-line-top).-normal tr:first-child th,
.c-tbl4:not(.-line-top).-normal tr:first-child td { padding-top: 0; }
.c-tbl4:not(.-normal) { display: grid; }
.c-tbl4:not(.-normal) tr {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
.c-tbl4:not(.-normal) th,
.c-tbl4:not(.-normal) td {
width: 100% !important;
height: 100% !important;
text-align: left;
}
.c-tbl4:not(.-normal) th {
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-color);
}
.c-tbl4:not(.-normal) td { padding: 1rem 0 1.5rem 0; }
.c-tbl4:not(.-normal) tr:last-child td:last-child { padding-bottom: 0.5rem; }
}
/*--------------------------------------------------------------------------------
box
--------------------------------------------------------------------------------*/
:root {
/* default */
--default-box-pd: var(--box-space-s);
--default-box-bg: var(--pale-color-primary-lightest);
--default-box-outline: none;
--default-box-hd-bg: var(--pale-color-primary);
--default-box-hd-color: #FFF;
}
.c-box[data-box-pd="m"] { --default-box-pd: var(--box-space-m); }
.c-box[data-box-pd="l"] { --default-box-pd: var(--box-space-l); }
.c-box.-line {
--box-bg: transparent;
--box-outline: 2px solid var(--pale-color-primary-light);
}
.c-box.-gray-line {
--box-bg: transparent;
--box-outline: 2px solid var(--border-color);
}
.c-box.-gray {
--box-bg: var(--color-gray-lightest);
}
.c-box.-quaternary {
--box-bg: var(--pale-color-quaternary-lightest);
}
.c-box-hd:has(+.c-box.-quaternary) {
--box-hd-bg: var(--pale-color-quaternary-light);
--box-hd-color: var(--txt-color);
}
.c-box.-red-line {
--box-bg: transparent;
--box-outline: 2px solid var(--pale-color-red);
}
.c-box.-red {
--box-bg: var(--pale-color-red-lightest);
}
.c-box.-quinary-line {
--box-bg: transparent;
--box-outline: 2px solid var(--color-quinary);
}
.c-box-hd:has(+.c-box.-red-line),
.c-box-hd:has(+.c-box.-red) {
--box-hd-bg: var(--color-red-light);
}
.c-box:not([class*="u-pd"]) { padding: var(--box-pd, var(--default-box-pd)); }
.c-box {
border: var(--box-outline, var(--default-box-outline));
background-color: var(--box-bg, var(--default-box-bg));
}
.c-box-hd + .c-box { border-top: 0; }
.c-box-hd {
background-color: var(--box-hd-bg, var(--default-box-hd-bg));
color: var(--box-hd-color, var(--default-box-hd-color));
padding: 0.75rem 1rem;
line-height: var(--line-height);
}
.c-box-hd:not([class*="u-fw"]) { font-weight: bold; }
.c-box-hd:not([class*="u-fs"]) { font-size: var(--fs-m); }
@media (max-width: 760px) {
.c-box_hd { padding: 0.75rem; }
}
/* .c-box-contact
----------------------------------------*/
:root {
/* default */
--default-box-contact-line: var(--pale-color-primary-light);
}
.c-box-contact.-line { --box-contact-line: var(--pale-color-primary-lighter); }
.c-box-contact.-gray-line { --box-contact-line: var(--border-color-light); }
.c-box-contact.-red { --box-contact-line: var(--pale-color-red); }
.c-box-contact.-red-line { --box-contact-line: var(--pale-color-red-lighter); }
.c-box-contact {
display: grid;
align-items: center;
line-height: var(--line-height);
}
.c-box-contact_ttl {
text-align: center;
font-weight: bold;
position: relative;
}
@media (min-width: 761px) {
.c-box-contact {
grid-template-columns: auto 1fr;
}
.c-box-contact_ttl {
padding-left: var(--box-space-s);
padding-right: calc(var(--box-pd, var(--default-box-pd)) + var(--box-space-s));
}
.c-box-contact_txt {
padding-left: var(--box-space-m);
border-left: 1px solid var(--box-contact-line, var(--default-box-contact-line));
}
}
@media (max-width: 760px) {
.c-box-contact { justify-items: center; }
.c-box-contact_ttl {
padding-bottom: 1rem;
border-bottom: 1px solid var(--box-contact-line, var(--default-box-contact-line));
}
.c-box-contact_txt {
text-align: center;
align-items: center;
padding-top: var(--box-space-s);
}
.c-box-contact_txt * {
justify-content: center;
}
}
/*--------------------------------------------------------------------------------
definition list
--------------------------------------------------------------------------------*/
.c-dl-list {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem;
line-height: var(--line-height);
}
.c-dl-list dt {
color: var(--color-primary);
}
.c-dl-list dd {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.5rem;
}
.c-dl-list dd:before {
content: "...";
}
@media (max-width: 760px) {
.c-dl-list:not([data-no-break]) { grid-template-columns: 1fr; }
.c-dl-list:not([data-no-break]) { gap: 0.25rem 0.5rem; }
.c-dl-list:not([data-no-break]) dd:not(:last-child) { padding-bottom: 0.5rem; }
}
/*--------------------------------------------------------------------------------
tag list
--------------------------------------------------------------------------------*/
.c-tag-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
line-height: var(--line-height-s);
}
.c-tag-list li {
color: var(--color-primary-lighter);
border: 1px solid var(--pale-color-primary-light);
background-color: #FFF;
padding: 0.5em 0.75em;
}
@media (max-width: 760px) {
.c-tag-list { font-size: var(--fs-s); }
}
/*--------------------------------------------------------------------------------
tab
--------------------------------------------------------------------------------*/
.c-tab-wrap.-scroll { overflow-x: auto; }
.c-tab-wrap.-scroll .c-tab_item { min-width: fit-content; }
.c-tab {
--link-color: var(--txt-color);
--link-color-hover: var(--color-tertiary-light);
--link-deco: none;
--link-deco-hover: none;
width: 100%;
line-height: var(--line-height-s);
display: flex;
}
.c-tab_item {
width: 100%;
text-align: center;
}
.c-tab_item a {
display: grid;
height: 100%;
place-items: center;
padding: 1rem;
position: relative;
background-color: var(--color-gray-lightest);
border-bottom: 1px solid var(--color-tertiary-light);
}
.c-tab_item:not(:first-child) a:before {
content: "";
width: 1px;
height: 35%;
background-color: var(--color-gray-light);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.c-tab_item:has(.is-active) + .c-tab_item a:before,
.c-tab_item a.is-active:before {
display: none;
}
.c-tab_item a.is-active {
background-color: var(--color-tertiary-light);
color: #FFF;
}
@media (max-width: 760px) {
.c-tab-wrap {
width: 100vw;
margin-left: calc(-1 * var(--side-space));
margin-right: calc(-1 * var(--side-space));
}
}
/*--------------------------------------------------------------------------------
accordion
--------------------------------------------------------------------------------*/
.c-acod {
line-height: var(--line-height);
border-bottom: 1px solid var(--border-color);
padding: 1rem;
transition: var(--hover-trans);
display: flex;
align-items: center;
column-gap: 1rem;
}
.c-acod:first-of-type {
border-top: 1px solid var(--border-color);
}
.c-acod.is-active { background-color: var(--pale-color-quaternary-lightest); }
.c-acod-item { padding: 2rem 1rem 3rem 1rem; }
.c-acod-item:last-of-type { padding-bottom: 1.5rem; }
.c-acod-item:not(:last-of-type) {
border-bottom: 1px solid var(--border-color);
}
.c-acod .icon {
flex-shrink: 0;
margin-left: auto;
position: relative;
width: 1rem;
}
.c-acod .icon:before,
.c-acod .icon:after {
content: "";
display: inline-block;
--width: 0.75rem;
--height: 1px;
width: var(--width);
height: var(--height);
background: var(--color-tertiary);
position: absolute;
right: 0;
top: 50%;
margin-top: calc(-1 * var(--height) / 2);
}
.c-acod .icon:after {
transition: transform 0.5s var(--cubic-bezier);
transform-origin: center center;
transform: rotate(90deg) scale(1,1);
}
.c-acod.is-active .icon:after {
transform: rotate(90deg) scale(0,1);
}
@media (max-width: 760px) {
.c-acod { padding: 0.75rem; }
.c-acod-item { padding: 1.25rem 0.75rem 2.25rem 0.75rem; }
.c-acod-item:last-of-type { padding-bottom: 1.25rem; }
}
/*--------------------------------------------------------------------------------
anchor top
--------------------------------------------------------------------------------*/
.c-anchor-top {
--link-color: var(--txt-color);
--link-color-hover: var(--color-primary);
--link-deco: none;
--link-deco-hover: none;
display: flex;
justify-content: flex-end;
}
.c-anchor-top:not([class*="u-pdt"]) { padding-top: var(--space-2s); }
.c-anchor-top_link {
font-size: var(--fs-s);
line-height: var(--line-height-s);
width: fit-content;
position: relative;
padding-left: calc(1.2rem + (min(0.5rem + 0.25vw)));
}
.c-anchor-top_link:before {
content: "";
width: 1.2rem;
height: 1.2rem;
line-height: 1;
position: absolute;
top: 0.065rem;
left: 0;
background: currentColor;
color: var(--color-gray-dark);
mask-image: var(--icon-arrow-chevron-circle);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
transition: var(--hover-trans);
transform: rotate(-90deg);
}
@media (max-width: 760px) {
.c-anchor-top_link:before { top: 0.025rem; }
}
@media (hover: hover) {
.c-anchor-top_link:hover:before { color: currentColor; }
}
/*--------------------------------------------------------------------------------
archive
--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------
.c-archive-list
--------------------------------------------------------------------------------*/
.c-archive-list {
line-height: var(--line-height);
display: flex;
flex-direction: column;
}
.c-archive-list_item {
border-bottom: 1px solid var(--border-color);
}
.c-archive-list_item:first-of-type {
margin-top: -1.5rem;
}
.c-archive-list_item:not(:has(a)),
.c-archive-list_item a {
display: flex;
column-gap: 2rem;
row-gap: 0.25rem;
padding: 1.35rem 0;
}
.c-archive-list_date {
color: var(--color-gray);
font-size: var(--fs-s);
}
.c-archive-list_area-ttl {
--file-size: 1.8rem;
flex: 1;
display: flex;
column-gap: 2.5rem;
}
.c-archive-list_item a[target="_blank"] .c-archive-list_area-ttl:after {
content: "";
width: 0.9rem;
height: 0.9rem;
line-height: 1;
flex-shrink: 0;
align-self: center;
background: currentColor;
color: var(--color-primary);
mask-image: var(--icon-newwin);
mask-repeat: no-repeat;
margin-left: auto;
transform: translateX(-1rem);
transition: var(--hover-trans);
}
.c-archive-list_ttl {
display: flex;
align-items: flex-start;
transition: var(--hover-trans);
}
.c-archive-list_icon { flex-shrink: 0; }
.c-archive-list a,
.c-archive-list a:hover { color: inherit; text-decoration: none; }
.c-archive-list a:hover .c-archive-list_ttl { color: var(--link-color); }
@media (max-width: 760px) {
.c-archive-list_item:not(:has(a)),
.c-archive-list_item a {
flex-direction: column;
}
}
/*--------------------------------------------------------------------------------
form
--------------------------------------------------------------------------------*/
/* input
----------------------------------------*/
input[type=text],
input[type=tel],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=url],
select,
textarea {
border: 1px solid var(--border-color);
padding: .25em .5em;
box-sizing: border-box;
border-radius: .25em;
}
.c-ip-2s { width: 5em }
.c-ip-s { width: 30%; min-width: 240px; }
.c-ip-m { width: 50%; min-width: 300px; }
.c-ip-l { width: 75%; min-width: 360px; }
.c-ip-max { width: 100%; }
@media (max-width:425px) {
.c-ip-s { width: 50%; }
.c-ip-m { width: 75%; min-width: auto; }
.c-ip-l { width: 100%; min-width: auto; }
}
/* radio
----------------------------------------*/
input[type=radio] {
position: absolute;
opacity: 0;
z-index: -1;
}
input[type=radio]+label {
display:flex;
align-items: center;
cursor:pointer;
}
input[type=radio]+label:before {
content:"";
display:inline-block;
width:1.25em;
height:1.25em;
border-radius:1.25em;
vertical-align:middle;
border:2px solid var(--color-gray);
background-color:#fff;
margin-right:.25em;
box-sizing:border-box;
-webkit-transition:border-color ease-in-out .15s, background-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition:border-color ease-in-out .15s, background-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
transition:border-color ease-in-out .15s, background-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}
input[type=radio]:hover+label:before {
border-color:var(--color-gray);
background-color:var(--color-gray);
box-shadow:inset 0 0 0 0.25em #fff;
}
input[type=radio]:checked+label:before {
border-color:var(--color-primary);
background-color:var(--color-primary);
box-shadow:inset 0 0 0 0.25em #fff;
}
.radio-group {
display: flex;
flex-wrap: wrap;
gap: 0.5em 1.5em;
}
/* checkbox
----------------------------------------*/
.chk-group {
display: flex;
flex-wrap: wrap;
gap: 0.5em 1.5em;
}
.chk-group label {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
box-sizing: border-box;
}
.chk-group label input {
position: absolute;
z-index: -1;
opacity: 0;
}
.chk-group .chk-txt {
display: inline-block;
padding-left: 1.5em;
}
.chk-group .indicator {
display: inline-block;
position: absolute;
width:1.25em;
height:1.25em;
background: var(--color-gray-light);
border-radius: .25em;
}
.chk-group label:hover input ~ .indicator,
.chk-group label input:focus ~ .indicator {
background: var(--color-gray);
}
.chk-group label input:checked ~ .indicator {
background: var(--color-primary);
}
.chk-group label:hover input:not([disabled]):checked ~ .indicator,
.chk-group label input:checked:focus ~ .indicator {
background: var(--color-primary);
}
.chk-group label input:disabled ~ .indicator {
background: var(--color-gray-light);
opacity: 0.6;
pointer-events: none;
}
.indicator:after {
content: '';
position: absolute;
display: none;
}
.chk-group label input:checked ~ .indicator:after {
display: block;
}
.chk-group .checkbox .indicator:after {
left: .45em;
top: .1em;
width: .4em;
height: .75em;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.chk-group .checkbox input:disabled ~ .indicator:after {
border-color: var(--color-gray-dark);
}
/* c-form
----------------------------------------*/
.c-form {
border-top: 1px solid var(--pale-color-primary);
}
.c-form-item {
display: grid;
grid-template-columns: 1fr 3fr;
grid-column-gap: 1em;
border-bottom: 1px solid var(--pale-color-primary);
}
.c-form-item02 {
width: 100%;
border-bottom: 1px solid var(--pale-color-primary);
}
.c-form-item-label {
min-width: 16em;
padding: 1.25em 1em;
background-color: var(--pale-color-primary-lightest);
font-weight: 500;
}
@media (max-width:760px) {
.c-form-item {
grid-template-columns: 1fr;
}
.c-form-item-label {
width: 100%;
padding: 1em;
}
}
.c-form-item-label-inner {
position: relative;
padding-right: 4em;
box-sizing: border-box;
line-height: var(--line-height-2s);
}
.c-form-item-required {
position: absolute;
top: 0;
right: 0;
display: inline-block;
padding: 0.25em 0.5em;
margin-left: 1em;
background-color: var(--color-red);
border-radius: .25em;
color: #fff;
font-size: var(--fs-2s);
}
.c-form-item-optional {
position: absolute;
top: 0;
right: 0;
display: inline-block;
padding: 0.25em 0.5em;
margin-left: 1em;
background-color: var(--color-gray-dark);
border-radius: .25em;
color: #fff;
font-size: var(--fs-2s);
}
.c-form-item-input {
padding: 1em 0;
}
.c-form-item-input02 {
padding: 1em;
}
p.error {
font-size: var(--fs-s);
color: #fff;
background-color: var(--color-red-lighter);
margin-top: .5em;
padding: .25em .5em;
}
/* c-form-btn
----------------------------------------*/
.c-form-btn {
display: flex;
flex-wrap: wrap;
gap: var(--space-2s);
justify-content: center;
}
/* c-form-chk
----------------------------------------*/
.c-form-chk-alart {
padding: 1em;
background-color: var(--pale-color-primary-lightest);
border: 1px solid var(--pale-color-primary);
border-radius: .25em;
box-sizing: border-box;
margin-bottom: var(--space-s);
text-align: center;
}
.c-form-chk-alart.error {
background-color: #ffffff;
border: 2px solid var(--color-red);
color: var(--color-red);
font-weight: 500;
}
.c-form-chk-setup-alart {
padding: 1em;
background-color: #ffffff;
border: 1px solid var(--color-red);
border-radius: .25em;
box-sizing: border-box;
margin-bottom: var(--space-s);
color: var(--color-red);
text-align: center;
}
/* c-form-end
----------------------------------------*/
.c-form-end-msg {
text-align: center;
}
.c-form-end-remail {
}
.c-form-end-remail-title {
display: flex;
align-items: center;
}
.c-form-end-remail-title img {
display: inline-block;
margin-right: .5em;
}
/*--------------------------------------------------------------------------------
news/info
--------------------------------------------------------------------------------*/
.info-hd:not(:first-of-type) {
margin-top: var(--space-l);
}
.info-hd .date {
font-size: var(--fs-2s);
}
.info-hd .cate {
font-size: var(--fs-2s);
display: inline-block;
margin-left: 1em;
}
.info-detail {
padding-top: 1.5em;
padding-bottom: var(--block-space-m);
}
@media screen and (max-width:640px) {
.info-hd {
font-size: var(--fs-s);
}
}
/* l-side-news-nav */
.l-side-news-nav:not(:last-of-type) {
}
.l-side-news-nav-title {
display: block;
padding: var(--fs-s);
background-color: var(--color-primary);
border-radius: 0.35rem;
color: #fff;
font-weight: 500;
}
.l-side-news-nav-list {
list-style: none;
}
.l-side-news-nav-list li {
border-bottom:1px solid var(--border-color);
padding: 0.75em;
line-height: var(--line-height-2s);
}
.l-side-news-nav-list a { display: block; }
.l-side-news-nav-list a,
.l-side-news-nav-list a:visited,
.l-side-news-nav-list a:hover {
text-decoration: none;
}
/* サムネイル有 */
.l-side-news-nav-list li.cols {
display: flex;
padding-left: 0;
padding-right: 0;
}
.l-side-news-nav-list li.cols .photo,
.l-side-news-nav-list li.cols .txt {
-ms-flex-item-align: center;
align-self: center;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
.l-side-news-nav-list li.cols .photo {
width: 30%;
padding-right: 1em;
}
.l-side-news-nav-list li.cols .txt {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.l-side-news-nav-list li.cols .sbikou {
font-size: var(--fs-s);
}
@media print,screen and (min-width:761px) {
.l-side-news-nav-list li.cols .txt {
font-size: var(--fs-s);
}
}
/* 最新の投稿 */
.l-side-news-recent-list .date {
font-size: var(--fs-2s);
}
/*----------------------------------------------------------------------------------------------------
Photo hover
----------------------------------------------------------------------------------------------------*/
.p-hvPhoto {
width: 100%;
position: relative;
overflow: hidden;
}
.p-hvPhoto__img {
transition: transform 0.8s var(--cubic-bezier);
width: 100%;
height: 100%;
object-fit: cover;
font-family: "object-fit:cover;"
}
.ua-pc .p-hvPhoto:hover .p-hvPhoto__img,
.ua-pc .js__linkBox:hover .p-hvPhoto__img {
transform: scale(1.04) rotate(0.001deg);
}
/*----------------------------------------------------------------------------------------------------
Photo zoom
----------------------------------------------------------------------------------------------------*/
.p-zmPhoto {
display: inline-block;
}
.p-zmPhoto a {
display: block;
position: relative;
}
.p-zmPhoto a:after {
content: "";
width: 1.2em;
height: 1.2em;
display: inline-block;
position: absolute;
right: 0.75em;
bottom: 0.75em;
background: url("../image/icon/zoom.svg") no-repeat center center;
background-size: contain;
}
/*----------------------------------------------------------------------------------------------------
ブログパターン
----------------------------------------------------------------------------------------------------*/
.glog {
margin-top:1.25em;
}
.glog:after {
content:"";
display:block;
height:0;
clear:both;
}
.glog ul,
.glog ol {
list-style:inherit;
margin-left:1.25em;
}
.glog ol {
list-style:decimal;
}
.glog-txt {
box-sizing:border-box;
word-break:break-all;
}
.glog-image-left .glog-txt {
float:right;
}
.glog-image-right .glog-txt {
float:left;
}
.glog-image-left .glog-img,
.glog-image-right .glog-img {
display:inline-block;
margin-bottom:0.5em;
margin-top:0.5em;
box-sizing:border-box;
}
.glog-image-left .glog-img {
float:left;
}
.glog-image-right .glog-img {
float:right;
}
.glog-image-center .glog-img {
display:block;
text-align:center;
margin-bottom:1em;
}
@media only screen and (max-width:640px) {
.glog-txt {
width:inherit !important;
}
.glog-image-left .glog-img,
.glog-image-right .glog-img {
float:none;
display:block;
text-align:center;
margin-bottom:1em;
width:inherit !important;
}
}
/* Table ----------------------------------------*/
.glog table {
width:100%;
max-width:100%;
border-collapse:collapse;
border-spacing:0;
border:0;
}
.glogTbl th,
.glogTbl td {
border:1px solid #8bc9e9;
text-align:left;
padding:12px 15px;
}
.glogTbl th {
background-color:#eaf5fb;
}
@media only screen and (max-width:767px) {
.glogTbl {
font-size:93.8%;
}
.glogTbl th,
.glogTbl td {
padding:0.75em;
}
}
@media only screen and (max-width:500px) {
.glogTbl th,
.glogTbl td {
padding:0.5em;
}
}
/*
.p-glog {
text-align: left;
}
.p-glog:not(:first-of-type) {
padding-top: 2em;
}
.p-glog:after {
content: "";
display: block;
height: 0;
clear: both;
}
.p-glog a {
text-decoration: underline;
}
.p-glog a:hover {
text-decoration: none;
}
.p-glog ul,
.p-glog ol {
margin-left: 1.25em;
}
.p-glog b,
.p-glog strong {
font-weight: 500;
}
.p-glog__txt {
word-break: break-all;
}
.p-glog__txt--column,
.p-glog__img--center,
.p-glog__datafile {
width: 100%;
}
.p-glog__img--center {
text-align: center;
}
.p-glog__img--left,
.p-glog__img--right {
display: inline-block;
}
.p-glog__img--left:not([data-mg="0"]),
.p-glog__img--right:not([data-mg="0"]),
.img--center__item[data-ps="top"]:not([data-mg="0"]) {
margin-bottom: 1.5em;
}
.img--center__item[data-ps="bottom"]:not([data-mg="0"]) {
margin-top: 1.5em;
}
.p-glog__img--center img,
.p-glog__img--left img,
.p-glog__img--right img {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
.img--center__item {
display: inline-block;
}
.p-glog__datafile {
padding: 0.5em 0;
}
.p-glog__datafile + .p-glog__txt {
padding-top: 1em;
}
.p-glog__txt + .p-glog__datafile {
padding-top: 1em;
}
.p-glog__img__cp {
display: block;
text-align: center;
line-height: var(--line-height-s);
padding-top: 0.5em;
font-size: var(--fs-2s);
color: rgba(0,0,0,0.5);
}
.p-glog__back {
padding-top: var(--block-space-l);
}
.p-glog__more {
padding-top: 1.5em;
}
@media print, screen and (min-width:641px) {
.p-glog__img--left {
float: left;
margin-right: 1.5em;
}
.p-glog__img--right {
float: right;
margin-left: 1.5em;
}
.p-glog__img--left img,
.p-glog__img--right img,
.img--center__item img {
max-width: 100% !important;
}
}
@media screen and (max-width:640px) {
.p-glog__img--left,
.p-glog__img--right,
.p-glog__img--left + .p-glog__txt,
.p-glog__img--right + .p-glog__txt {
width: 100% !important;
}
.p-glog__img--left,
.p-glog__img--right {
max-width: 100% !important;
text-align: center;
}
.p-glog__img--left img,
.p-glog__img--right img,
.img--center__item img {
width: 100% !important;
}
}
/*--------------------------------------------------------------------------------
非公開
--------------------------------------------------------------------------------*/
.private-alert p {
text-align: left;
background-color: #fff0f5;
border: 1px dotted #eb2d32;
line-height: var(--line-height-s);
color: #eb2d32;
padding: 0.75em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.private-alert b {
font-size: var(--fs-3s);
font-weight: 500;
background-color: #eb2d32;
color: #fff;
padding: 0.4em 0.4em 0.5em 0.4em;
vertical-align: middle;
margin-right: 1em;
white-space: nowrap;
}
.private-alert small {
font-size: var(--fs-s);
-webkit-flex: 1;
flex: 1;
}
/*----------------------------------------------------------------------------------------------------
ページネーション
----------------------------------------------------------------------------------------------------*/
.p-pagination {
width: 100%;
display: flex;
margin-top: var(--space-s);
}
.p-pagination--center {
justify-content: center;
}
.p-pagination__list {
list-style: none;
text-align: center;
display: flex;
flex-wrap:wrap;
justify-content: center;
margin-left: -0.5em;
margin-right: -0.5em;
}
.p-pagination__list a,
.p-pagination__list a:visited,
.p-pagination__list a:hover { text-decoration: none; }
.p-pagination__list li {
line-height: 1;
}
.p-pagination a {
display: block;
}
.p-pagination__list li,
.p-pagination__list li a {
display: flex;
justify-content: center;
align-items: center;
}
.p-pagination__list li a {
width: 2em;
height: 2em;
padding: 1em;
border-radius: 2em;
margin-left: 0.5em;
margin-right: 0.5em;
line-height: 1;
border:1px solid var(--color-primary);
}
.p-pagination__list li a:hover {
border:1px solid var(--color-primary-light);
}
.p-pagination__list li span.is-active {
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
padding: 1em;
border-radius: 2em;
margin-left: 0.5em;
margin-right: 0.5em;
line-height: 1;
color: #fff;
background-color: var(--color-primary);
}
.p-pagination__list li.first:after,
.p-pagination__list li.last:before {
content: "...";
font-size: var(--fs-3s);
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
}
.p-pagination .more {
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
}
.p-pagination .more .p-arrow { font-size: var(--fs-3l); margin-bottom: 0; }
.p-pagination .more-prev { padding-right: 1em; }
.p-pagination .more-next { padding-left: 1em; }