/* =============================================================
properties
============================================================= */
:root {
/* color
============================== */
--base-color: #333;
--base-color-light: #666;
--bg-color: #F5F5F5;
--key-color: #c00;
--key-color-light: #FFF0F1;
--border-color: #ccc;
--border-color-light: #ddd;
--border-color-input: #bbb;
/* layouts
============================== */
--inner-width-px: 1200px;
--inner-padding: min(40px, calc(4 * var(--vw)));
--header-height: 0px;
/* utility & fonts
============================== */
--vw: 1vw;
--vh: 1vh;
--slope-1px: clamp(0px, -0.95663px + 0.2551vw, 1px);
--leading-trim: calc((1em - 1lh) / 2);
--base-font-family: "Noto Sans JP", sans-serif;
--en-font-family: Lato, sans-serif;
/* icon
============================== */
--icon-arrow: url(../img/arrow-right.svg);
--icon-back: url(../img/arrow-left.svg);
--icon-down: url('data:image/svg+xml;utf8,');
--icon-blank: url('data:image/svg+xml;utf8,');
--icon-checked: url('data:image/svg+xml;utf8,');
--icon-search: url('data:image/svg+xml;utf8,');
--icon-schedule: url('data:image/svg+xml;utf8,');
--icon-map: url('data:image/svg+xml;utf8,');
--icon-job: url('data:image/svg+xml;utf8,');
--icon-person: url('data:image/svg+xml;utf8,');
--icon-tel: url('data:image/svg+xml;utf8,');
--icon-mail: url('data:image/svg+xml;utf8,');
--icon-website: url('data:image/svg+xml;utf8,');
}
/* =============================================================
base
* ============================================================= */
*,
*:before,
*:after {
box-sizing: border-box;
}
*[data-anchor-id] {
scroll-margin-top: var(--header-height);
}
html {
font-size: 62.5%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: var(--body-font-family);
font-size: calc(13px + var(--slope-1px) * 2);
font-weight: 500;
line-height: 1.5;
letter-spacing: .03em;
width: 100%;
height: 100%;
color: var(--base-color);
background: var(--bg-color);
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
}
img {
display: block;
max-width: 100%;
height: auto;
}
legend {
padding: 0;
}
svg {
width: 100%;
display: block;
overflow: unset;
}
svg path:not([fill]) {
fill: currentColor;
}
a {
cursor: pointer;
color: inherit;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
@media screen and (min-width: 769px) {
a[href^="tel:"] {
text-decoration: none !important;
pointer-events: none;
cursor: text;
}
}
:where(button) {
cursor: pointer;
background: none;
border: none;
padding: 0;
overflow: hidden;
}
/* =============================================================
wrapper
* ============================================================= */
/* l-wrapper
============================== */
.l-wrapper {
background: var(--base-bg-color);
color: var(--base-color);
letter-spacing: .03em;
line-height: 1.8;
-webkit-text-size-adjust: 100%;
font-family: var(--base-font-family);
display: flex;
flex-direction: column;
font-size: calc(14px + var(--slope-1px) * 2);
width: 100%;
min-height: 100%;
position: relative;
margin: 0 auto;
opacity: 0;
transition: opacity .4s ease-out;
}
body.is-loaded .l-wrapper {
opacity: 1;
}
@media screen and (max-width: 768px) {
.l-wrapper {
min-width: 0;
}
}
/* =============================================================
header
* ============================================================= */
/* l-header
============================== */
.l-header {
background: #fff;
padding-block: calc(24px + var(--slope-1px) * 8);
border-bottom: 1px solid var(--border-color-light);
display: flex;
align-items: center;
justify-content: center;
}
/* l-header-title
============================== */
.l-header-title {
font-size: calc(16px + var(--slope-1px) * 8);
font-weight: 700;
text-align: center;
}
/* =============================================================
main
* ============================================================= */
/* main
=============================== */
.l-main {
width: 100%;
max-height: 100%;
position: relative;
container-type: inline-size;
padding: 0;
flex-grow: 1;
padding-inline: var(--inner-padding);
}
.l-main__head {
width: calc(100% + var(--inner-padding) * 2);
margin-inline: calc(var(--inner-padding) * -1);
display: flex;
flex-direction: column;
--contents-padding-inline: var(--inner-padding);
}
.l-main__title {
padding: 24px var(--inner-padding);
background: #fff;
display: grid;
grid-template-columns: 100%;
gap: calc(10px + var(--slope-1px) * 2);
}
.l-main__title > * {
width: min(1200px, 100%);
margin-inline: auto;
}
.l-main__breadcrumbs {
order: -1;
padding: 10px var(--inner-padding);
}
.l-main__body {
width: var(--inner-width-px);
max-width: 100%;
margin-inline: auto;
padding-top: 40px;
container-type: inline-size;
container-name: MAIN-BODY;
}
@media screen and (max-width: 1040px) {
.l-main__body {
padding-top: 16px;
}
}
.l-main:has(.l-main__head) .l-main__body {
padding-top: 32px;
}
@media screen and (max-width: 1040px) {
.l-main:has(.l-main__head) .l-main__body {
padding-top: 13px;
}
}
/* =============================================================
footer
* ============================================================= */
/* l-footer
============================== */
.l-footer {
border-top: 1px solid var(--border-color-light);
}
/* l-footer-nav
============================== */
.l-footer-nav {
width: calc(1200px + var(--inner-padding) * 2);
max-width: 100%;
margin-inline: auto;
padding: 18px var(--inner-padding) 24px;
}
.l-footer-nav__item {
border-bottom: 1px solid var(--border-color-light);
}
.l-footer-nav__item a {
padding: 16px 8px 16px 0;
margin-block: var(--leading-trim);
text-decoration: none;
font-size: calc(12px + var(--slope-1px) * 1);
font-weight: 400;
line-height: 1;
display: grid;
grid-template-columns: 1fr auto;
transition: opacity .2s ease-out;
}
@media (any-hover: hover) {
.l-footer-nav__item a:hover {
opacity: .7;
}
}
.l-footer-nav__item a:after {
content: "";
display: block;
flex-shrink: 0;
width: calc(9px + var(--slope-1px) * 1);
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
}
.l-footer-nav__item a[target="_blank"]:after {
mask-image: var(--icon-blank);
}
/* l-footer-copyright
============================== */
.l-footer-copyright {
font-size: calc(12px + var(--slope-1px) * 1);
font-weight: 400;
background: var(--base-color-light);
color: #fff;
text-align: center;
line-height: 1;
padding-block: 24px;
}
/* ============================================================= *
navigation
* ============================================================= */
/* c-button
============================== */
.c-button {
font-size: calc(13px + var(--slope-1px) * 3);
font-weight: 700;
border-radius: 10px;
border: 1px solid var(--border-color);
height: calc(44px + var(--slope-1px) * 16);
text-decoration: none;
background: #fff;
color: var(--base-color);
display: flex;
align-items: center;
justify-content: center;
transition: filter .2s ease-out;
}
@media (any-hover: hover) {
.c-button:hover {
filter: brightness(0.94);
}
}
.c-button._primary {
border: 0;
color: #fff;
background: var(--key-color);
}
@media (any-hover: hover) {
.c-button._primary:hover {
filter: brightness(1.1);
}
}
.c-button._mynavi {
border: 0;
color: #fff;
background: #00AFEC;
}
@media (any-hover: hover) {
.c-button._mynavi:hover {
filter: brightness(1.1);
}
}
.c-button._mynavi img {
width: max(calc(64px + var(--slope-1px) * 21), 24%);
}
/* c-breadcrumbs
============================== */
.c-breadcrumbs {
font-size: calc(10px + var(--slope-1px) * 2);
font-weight: 500;
width: min(1200px, 100%);
margin-inline: auto;
}
.c-breadcrumbs__item {
display: inline;
word-break: break-all;
}
.c-breadcrumbs__item:not(:last-child) {
padding-right: 5px;
}
.c-breadcrumbs__item:not(:first-child):before {
content: "";
display: inline-block;
margin-right: 5px;
width: calc(8px + var(--slope-1px) * 2);
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-arrow) 50% 50%/contain no-repeat;
}
/* ============================================================= *
title
* ============================================================= */
/* c-page-title
============================== */
.c-page-title {
font-size: calc(18px + var(--slope-1px) * 4);
font-weight: 700;
margin-block: var(--leading-trim);
}
/* c-page-subtitle
============================== */
.c-page-subtitle {
font-size: calc(11px + var(--slope-1px) * 2);
font-weight: 500;
color: var(--base-color-light);
margin-block: var(--leading-trim);
}
/* ============================================================= *
index
* ============================================================= */
/* p-index
============================== */
.p-index {
display: grid;
grid-template-columns: 100%;
grid-template-areas: "nav" "head" "body" "foot";
gap: 24px min(40px, 3.333%);
padding-bottom: calc(32px + var(--slope-1px) * 32);
}
@container MAIN-BODY (width > 960px) {
.p-index {
grid-template-columns: 360px 1fr;
grid-template-areas: "head head" "nav body" "foot foot";
}
}
.p-index__head {
grid-area: head;
}
.p-index__body {
grid-area: body;
display: grid;
grid-template-columns: 100%;
gap: calc(16px + var(--slope-1px) * 8);
}
.p-index__foot {
grid-area: foot;
}
.p-index__nav {
grid-area: nav;
}
@container MAIN-BODY (width < 768px) {
.p-index__nav {
padding-bottom: 16px;
}
}
/* p-index-navigation
============================== */
.p-index-navigation {
display: flex;
justify-content: flex-end;
gap: 20px 32px;
}
@container MAIN-BODY (width < 768px) {
.p-index-navigation {
flex-direction: column;
align-items: center;
}
}
/* p-index-current
============================== */
.p-index-current {
display: flex;
align-items: baseline;
line-height: 1;
}
.p-index-current__total {
font-size: 15px;
}
.p-index-current__total em {
font-size: 26px;
color: var(--key-color);
padding-inline: 2px;
}
.p-index-current__range {
font-size: 13px;
}
/* p-index-pager
============================== */
.p-index-pager {
display: flex;
align-items: center;
gap: 20px;
}
.p-index-pager__list {
display: flex;
align-items: center;
gap: 10px;
}
@container MAIN-BODY (width < 768px) {
.p-index-pager__list {
gap: 8px;
}
}
.p-index-pager__list > li a {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 32px;
aspect-ratio: 1/1;
text-decoration: none;
transition: color .2s ease-out;
}
@media (any-hover: hover) {
.p-index-pager__list > li a:hover {
opacity: .6;
}
}
@container MAIN-BODY (width < 768px) {
.p-index-pager__list > li a {
width: 36px;
}
}
.p-index-pager__list > li a.is-current {
color: #fff;
background: var(--base-color);
pointer-events: none;
}
.p-index-pager__arrow a {
display: block;
transition: color .2s ease-out;
}
@media (any-hover: hover) {
.p-index-pager__arrow a:hover {
opacity: .6;
}
}
/* p-index-filter
============================== */
.p-index-filter {
position: sticky;
top: 16px;
background: #fff;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
display: grid;
grid-template-rows: auto 1fr auto;
}
@container MAIN-BODY (width > 960px) {
.p-index-filter {
max-height: calc(var(--vh) * 100 - 32px);
}
}
.p-index-filter__head {
background: var(--base-color);
color: #fff;
font-size: calc(16px + var(--slope-1px) * 2);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding-block: 20px;
line-height: 1;
position: relative;
z-index: 1;
}
.p-index-filter__head:after {
content: "";
display: block;
width: calc(100% - 48px);
height: 24px;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-inline: auto;
background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
.p-index-filter__body {
padding: 24px 32px;
display: grid;
grid-template-columns: 100%;
gap: 32px;
overflow-y: auto;
}
.p-index-filter__foot {
padding: 8px 24px 32px;
display: grid;
grid-template-columns: 100%;
gap: 20px;
position: relative;
z-index: 1;
}
.p-index-filter__foot:before {
content: "";
display: block;
width: calc(100% - 48px);
height: 24px;
position: absolute;
bottom: 100%;
left: 0;
right: 0;
margin-inline: auto;
background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
.p-index-filter__submit {
border-radius: 10px;
background: var(--key-color);
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
line-height: 1;
font-size: calc(16px + var(--slope-1px) * 2);
font-weight: 700;
gap: 5px;
transition: filter .2s ease-out;
}
.p-index-filter__submit:hover {
filter: brightness(1.1);
}
.p-index-filter__submit:before {
content: "";
display: block;
width: calc(18px + var(--slope-1px) * 2);
aspect-ratio: 1/1;
flex-shrink: 0;
background: currentColor;
mask: var(--icon-search) 50% 50%/contain no-repeat;
}
.p-index-filter__reset {
width: fit-content;
margin-inline: auto;
font-size: calc(13px + var(--slope-1px) * 1);
text-decoration: underline;
margin-block: var(--leading-trim);
}
.p-index-filter__reset:hover {
text-decoration: none;
}
/* p-index-filter-block
============================== */
.p-index-filter-block {
display: grid;
grid-template-columns: 100%;
gap: 16px;
min-width: 0;
font-size: calc(14px + var(--slope-1px) * 1);
}
.p-index-filter-block__head {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
line-height: 1;
margin-bottom: 16px;
}
.p-index-filter-block__head._schedule {
--icon: var(--icon-schedule);
}
.p-index-filter-block__head._area {
--icon: var(--icon-map);
}
.p-index-filter-block__head._job {
--icon: var(--icon-job);
}
.p-index-filter-block__head:before {
content: "";
display: block;
width: calc(18px + var(--slope-1px) * 2);
aspect-ratio: 1/1;
flex-shrink: 0;
background: var(--key-color);
mask: var(--icon) 50% 50%/contain no-repeat;
}
/* p-index-filter-radio
============================== */
.p-index-filter-radio {
display: flex;
width: fit-content;
gap: 8px;
align-items: center;
max-width: 100%;
line-height: 1;
}
.p-index-filter-radio:not(:first-child) {
margin-top: 14px;
}
.p-index-filter-radio input {
accent-color: var(--key-color);
width: calc(18px + var(--slope-1px) * 2);
aspect-ratio: 1/1;
appearance: none;
border: 1px solid var(--border-color-input);
border-radius: 50%;
transition: border .2s ease-out;
}
.p-index-filter-radio input:checked {
border-color: var(--key-color);
background-color: #fff;
background-image: radial-gradient(circle, #c00 0%, #c00 calc(5px + var(--slope-1px) * 1), transparent calc(5.5px + var(--slope-1px) * 1));
}
@media (any-hover: hover) {
.p-index-filter-radio:hover input {
border-color: var(--key-color);
}
}
/* p-index-filter-checkbox
============================== */
.p-index-filter-checkbox {
display: flex;
width: fit-content;
gap: 8px;
align-items: center;
max-width: 100%;
line-height: 1;
}
.p-index-filter-checkbox input {
accent-color: var(--key-color);
width: calc(18px + var(--slope-1px) * 2);
aspect-ratio: 1/1;
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--border-color-input);
appearance: none;
border-radius: 4px;
background: #fff;
transition: border .2s ease-out;
}
.p-index-filter-checkbox input:checked {
border: 0;
background: var(--icon-checked) 50% 50%/14px 14px no-repeat var(--key-color);
}
@media (any-hover: hover) {
.p-index-filter-checkbox:hover input {
border-color: var(--key-color);
}
}
/* p-index-filter-area
============================== */
.p-index-filter-area {
display: block;
min-width: 0;
width: 100%;
border-bottom: 1px solid var(--border-color-light);
}
.p-index-filter-area__head {
display: block;
width: 100%;
}
.p-index-filter-area:first-child .p-index-filter-area__head {
border-top: 1px solid var(--border-color-light);
}
.p-index-filter-area__toggle {
width: 100%;
height: 51px;
display: flex;
align-items: center;
line-height: 1;
padding: 20px 4px;
gap: 8px;
font-size: calc(14px + var(--slope-1px) * 1);
}
@media (any-hover: hover) {
.p-index-filter-area__toggle:hover {
opacity: .6;
}
}
.p-index-filter-area__toggle:after {
content: "";
width: 10px;
height: 10px;
background: currentColor;
mask: var(--icon-down) 50% 50%/contain no-repeat;
margin-left: auto;
transition: rotate .2s ease-out;
}
.p-index-filter-area__toggle.is-open:after {
rotate: 180deg;
}
.p-index-filter-area__selected {
border-radius: 3px;
padding: 6px;
color: #fff;
background: var(--base-color);
line-height: 1;
font-size: 12px;
font-weight: 700;
display: none;
}
.p-index-filter-area:has(input:checked) .p-index-filter-area__selected {
display: block;
}
.p-index-filter-area__body {
display: none;
padding: 6px 4px 20px;
}
.p-index-filter-area__control {
display: flex;
align-items: center;
margin-bottom: 16px;
font-size: calc(13px + var(--slope-1px) * 1);
gap: 12px;
}
.p-index-filter-area__control:before {
content: "";
width: 1px;
height: 18px;
background: var(--border-color-light);
order: 0;
}
.p-index-filter-area__control > button {
text-decoration: underline;
}
.p-index-filter-area__control > button:hover {
text-decoration: none;
}
.p-index-filter-area__control > button:first-child {
order: -1;
}
.p-index-filter-area:not(:has(label:nth-child(2))) .p-index-filter-area__control {
display: none;
}
.p-index-filter-area__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
/* p-index-card
============================== */
.p-index-card {
padding: calc(24px + var(--slope-1px) * 8) calc(20px + var(--slope-1px) * 12) calc(20px + var(--slope-1px) * 12);
background: #fff;
border: 1px solid var(--border-color-light);
border-radius: 16px;
font-size: calc(13px + var(--slope-1px) * 2);
}
.p-index-card__head {
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color-light);
margin-bottom: calc(16px + var(--slope-1px) * 8);
display: grid;
grid-template-columns: 100%;
gap: 12px;
}
.p-index-card__title {
font-size: calc(20px + var(--slope-1px) * 4);
font-weight: 700;
margin-block: var(--leading-trim);
}
.p-index-card__subtitle {
font-size: calc(11px + var(--slope-1px) * 2);
font-weight: 500;
color: var(--base-color-light);
margin-block: var(--leading-trim);
}
.p-index-card__profile {
display: grid;
grid-template-columns: 100%;
gap: 20px;
}
.p-index-card__item {
display: grid;
grid-template-columns: auto 1fr;
gap: 3px 12px;
}
@media screen and (max-width: 768px) {
.p-index-card__item {
gap: 6px 12px;
}
}
.p-index-card__item[data-label="year"] {
--icon: var(--icon-schedule);
}
.p-index-card__item[data-label="address"] {
--icon: var(--icon-map);
}
.p-index-card__item[data-label="job"] {
--icon: var(--icon-job);
}
.p-index-card__item[data-label="recruiter"] {
--icon: var(--icon-person);
}
.p-index-card__item[data-label="tel"] {
--icon: var(--icon-tel);
}
.p-index-card__item[data-label="mail"] {
--icon: var(--icon-mail);
}
.p-index-card__item[data-label="website"] {
--icon: var(--icon-website);
}
.p-index-card__item:before {
content: "";
grid-row: span 2;
display: block;
width: calc(30px + var(--slope-1px) * 6);
height: calc(30px + var(--slope-1px) * 6);
align-self: center;
border-radius: 50%;
background: var(--icon) 50% 50%/calc(16px + var(--slope-1px) * 2) no-repeat var(--key-color-light);
}
.p-index-card__label {
font-size: calc(13px + var(--slope-1px) * 1);
font-weight: 700;
color: var(--base-color-light);
margin-block: var(--leading-trim);
}
.p-index-card__data {
margin-block: var(--leading-trim);
word-break: break-all;
line-height: 1.5;
}
.p-index-card__foot {
margin-top: 24px;
padding-top: calc(16px + var(--slope-1px) * 8);
border-top: 1px solid var(--border-color-light);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(9px + var(--slope-1px) * 2);
}
.p-index-card__foot:has(.c-button:nth-child(3)) {
grid-template-columns: repeat(3, 1fr);
}
/* ============================================================= *
detail
* ============================================================= */
/* p-detail
============================== */
.p-detail {
padding-bottom: calc(32px + var(--slope-1px) * -4);
}
.p-detail__head {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
margin-bottom: calc(24px + var(--slope-1px) * 8);
gap: 24px;
}
@media screen and (max-width: 768px) {
.p-detail__head {
flex-direction: column;
align-items: flex-start;
}
}
.p-detail__body {
display: grid;
grid-template-columns: 100%;
gap: calc(20px + var(--slope-1px) * 12);
}
.p-detail__foot {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
margin-top: calc(16px + var(--slope-1px) * 8);
}
/* p-detail-back
============================== */
.p-detail-back {
font-size: calc(12px + var(--slope-1px) * 1);
border-radius: 10px;
border: 1px solid var(--border-color);
padding: 6px 8px;
gap: 5px;
display: flex;
align-items: center;
flex-wrap: wrap;
width: fit-content;
max-width: 100%;
background: transparent;
text-decoration: none;
transition: background .2s ease-out;
}
@media (any-hover: hover) {
.p-detail-back:hover {
background: #fff;
}
}
.p-detail-back:before {
content: "";
width: calc(8px + var(--slope-1px) * 1);
aspect-ratio: 1/1;
display: block;
background: currentColor;
flex-shrink: 0;
mask: var(--icon-back) 50% 50%/contain no-repeat;
}
/* p-detail-anchor-block
============================== */
.p-detail-anchor-block {
gap: calc(11px + var(--slope-1px) * 5);
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 344px;
max-width: 100%;
}
@media screen and (max-width: 768px) {
.p-detail-anchor-block {
width: 100%;
}
}
/* p-detail-anchor
============================== */
.p-detail-anchor {
font-size: calc(13px + var(--slope-1px) * 2);
font-weight: 700;
background: #fff;
color: var(--base-color);
border-radius: 10px;
border: 1px solid var(--border-color);
line-height: 1;
padding: 16px 8px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
position: relative;
transition: filter .2s ease-out;
}
@media (any-hover: hover) {
.p-detail-anchor:hover {
filter: brightness(0.96);
}
}
.p-detail-anchor:after {
content: "";
display: block;
width: calc(8px + var(--slope-1px) * 2);
aspect-ratio: 1/1;
background: currentColor;
mask: var(--icon-down) 50% 50%/contain no-repeat;
position: absolute;
top: 0;
bottom: 0;
right: calc(8px + var(--slope-1px) * 8);
margin-block: auto;
}
/* p-detail-contents
============================== */
.p-detail-contents {
padding: 0 calc(16px + var(--slope-1px) * 16) calc(24px + var(--slope-1px) * 8);
display: grid;
grid-template-columns: 100%;
gap: calc(24px + var(--slope-1px) * -2);
background: #fff;
border-radius: 16px;
}
.p-detail-contents__head {
font-size: calc(16px + var(--slope-1px) * 4);
font-weight: 700;
line-height: 1;
display: flex;
flex-direction: column;
width: fit-content;
gap: 18px;
}
.p-detail-contents__head:before {
content: "";
display: block;
width: 100%;
height: 2px;
background: var(--key-color);
}
/* p-detail-table
============================== */
.p-detail-table {
border-top: 1px solid var(--border-color-light);
width: 100%;
border-collapse: collapse;
font-size: calc(13px + var(--slope-1px) * 2);
}
.p-detail-table :is(th, td) {
border-bottom: 1px solid var(--border-color-light);
padding-block: calc(16px + var(--slope-1px) * 4 + var(--leading-trim));
font-weight: 500;
text-align: left;
word-break: break-all;
}
.p-detail-table th {
padding-inline: 12px;
background: var(--bg-color);
width: calc(96px + var(--slope-1px) * 64);
border-right: 1px solid var(--border-color-light);
}
.p-detail-table td {
padding-inline: 16px;
}
/* p-detail-contact
============================== */
.p-detail-contact {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.p-detail-contact .c-button {
width: min(calc(285px + var(--slope-1px) * 115), 100%);
}
/* p-detail-sticky
============================== */
.p-detail-sticky {
position: sticky;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(51, 51, 51, 0.9);
padding: calc(12px + var(--slope-1px) * 6) var(--inner-padding);
}
.p-detail-sticky .c-button {
width: min(calc(285px + var(--slope-1px) * 115), 100%);
}
/* ============================================================= *
404
* ============================================================= */
/* p-404
============================== */
.p-404 {
font-size: calc(15px + var(--slope-1px) * 1);
padding-bottom: calc(32px + var(--slope-1px) * 8);
}
@media screen and (max-width: 1040px) {
.p-404 {
padding-top: calc(8px + var(--slope-1px) * 8);
}
}
/* p-404-nav
============================== */
.p-404-nav {
display: grid;
text-align: center;
justify-content: center;
gap: 1em;
}
/* ============================================================= *
Utility
* ============================================================= */
/* Media Query Setting
====================================== */
.u-tablet-block {
display: none !important;
}
@media screen and (max-width: 768px) {
.u-tablet-block {
display: block !important;
}
}
.u-tablet-inline-block {
display: none !important;
}
@media screen and (max-width: 768px) {
.u-tablet-inline-block {
display: inline-block !important;
}
}
.u-tablet-flex {
display: none !important;
}
@media screen and (max-width: 768px) {
.u-tablet-flex {
display: flex !important;
}
}
@media screen and (max-width: 768px) {
.u-tablet-none {
display: none !important;
}
}
.u-mobile-block {
display: none !important;
}
@media screen and (max-width: 560px) {
.u-mobile-block {
display: block !important;
}
}
.u-mobile-inline-block {
display: none !important;
}
@media screen and (max-width: 560px) {
.u-mobile-inline-block {
display: inline-block !important;
}
}
.u-mobile-flex {
display: none !important;
}
@media screen and (max-width: 560px) {
.u-mobile-flex {
display: flex !important;
}
}
@media screen and (max-width: 560px) {
.u-mobile-none {
display: none !important;
}
}
/* text align
====================================== */
.u-ta-left {
text-align: left !important;
}
.u-ta-right {
text-align: right !important;
}
.u-ta-center {
text-align: center !important;
}
/* display
====================================== */
.u-d-block {
display: block !important;
}
.u-d-none {
display: none !important;
}
.u-d-inline {
display: inline !important;
}
.u-d-ib {
display: inline-block !important;
}
/* position
====================================== */
.u-pos-static {
position: static !important;
}
.u-pos-relative {
position: relative !important;
}
.u-pos-absolute {
position: absolute !important;
}
.u-pos-fixed {
position: fixed !important;
}
/* clear
====================================== */
.u-clearfix:after {
content: "";
visibility: hidden;
display: block;
clear: both;
}
/* other
====================================== */
.u-strong {
font-weight: bold !important;
}
.u-pointer {
cursor: pointer;
}
.u-nowrap {
white-space: nowrap;
}
.u-color-honda {
color: #CC0000 !important;
}
.u-color-ciao {
color: #0068b6 !important;
}
.u-color-mamoru {
color: #8fc31f !important;
}
.u-rotate-90 {
transform: rotate(90deg);
}
/* animationn
====================================== */
.u-no-transition {
transition: none !important;
}