@charset "UTF-8";
:root {
--svg-icon-mail-url: url('data:image/svg+xml;utf8,');
--svg-icon-mail-ratio: 30 / 21;
--svg-icon-line-url: url('data:image/svg+xml;utf8,');
--svg-icon-line-ratio: 38 / 27;
--svg-icon-phone-url: url('data:image/svg+xml;utf8,');
--svg-icon-phone-ratio: 14 / 17;
--svg-icon-down-url: url('data:image/svg+xml;utf8,');
--svg-icon-down-ratio: 18 / 12;
--svg-icon-left-url: url('data:image/svg+xml;utf8,');
--svg-icon-left-ratio: 12 / 18;
--svg-icon-right-url: url('data:image/svg+xml;utf8,');
--svg-icon-right-ratio: 12 / 18;
--svg-icon-tag-url: url('data:image/svg+xml;utf8,');
--svg-icon-tag-ratio: 1;
--svg-icon-plus-url: url('data:image/svg+xml;utf8,');
--svg-icon-plus-ratio: 1;
--svg-icon-minus-url: url('data:image/svg+xml;utf8,');
--svg-icon-minus-ratio: 1;
--svg-icon-twinkle-url: url('data:image/svg+xml;utf8,');
--svg-icon-twinkle-ratio: 1;
--svg-icon-flow-url: url('data:image/svg+xml;utf8,');
--svg-icon-flow-ratio: 1;
--svg-icon-badge-url: url('data:image/svg+xml;utf8,');
--svg-icon-badge-ratio: 1;
--svg-icon-japan-url: url('data:image/svg+xml;utf8,');
--svg-icon-japan-ratio: 1;
--svg-icon-close-url: url('data:image/svg+xml;utf8,');
--svg-icon-close-ratio: 1;
--svg-icon-left-thin-url: url('data:image/svg+xml;utf8,');
--avg-icon-left-thin-ratio: 10 / 16;
--svg-icon-right-thin-url: url('data:image/svg+xml;utf8,');
--svg-icon-right-thin-ratio: 10 / 16;
--svg-icon-check-url: url('data:image/svg+xml;utf8,');
--svg-icon-check-ratio: 32 / 28;
--svg-icon-calendar-url: url('data:image/svg+xml;utf8,');
--svg-icon-calendar-ratio: 1;
--svg-icon-update-url: url('data:image/svg+xml;utf8,');
--svg-icon-update-ratio: 17 / 21;
--svg-icon-exclamation-url: url('data:image/svg+xml;utf8,');
--svg-icon-exclamation-ratio: 1;
--svg-icon-file-url: url('data:image/svg+xml;utf8,');
--svg-icon-file-ratio: 1;
--svg-icon-paper-airplane-url: url('data:image/svg+xml;utf8,');
--svg-icon-paper-airplane-ratio: 37 / 30;
--svg-icon-search-url: url('data:image/svg+xml;utf8,');
--svg-icon-search-ratio: 1;
--svg-icon-close-bold-url: url('data:image/svg+xml;utf8,');
--svg-icon-close-bold-ratio: 1;
--svg-icon-external-url: url('data:image/svg+xml;utf8,');
--svg-icon-external-ratio: 1;
}
*,
*::before,
*::after {
box-sizing: border-box;
background-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
letter-spacing: 0.04em;
}
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figure, figcaption) {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: inherit;
}
:where(strong, em, b, i) {
font-weight: bold;
font-style: normal;
}
:where(ul, ol) {
list-style: none;
}
:where(img, picture, video, canvas, svg) {
display: block;
max-width: 100%;
height: auto;
}
:where(a) {
text-decoration: none;
color: inherit;
}
:where(button) {
border: none;
background: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
}
:root {
--is-pc: 1;
--is-sp: 0;
--viewport-width: 100vw;
--vw: calc(var(--viewport-width) / 100);
--base-width-number-pc: 1280;
--base-width-number-sp: 780;
--base-width-number: max(var(--base-width-number-pc) * var(--is-pc), var(--base-width-number-sp) * var(--is-sp));
--base-width: min(var(--viewport-width), var(--base-width-number) * 1px);
--px-to-size-in-base: calc(var(--base-width) / var(--base-width-number));
--color-primary-rgb: 213 19 19;
--color-primary: rgb(var(--color-primary-rgb));
--color-secondary-point-rgb: 213 180 111;
--color-secondary-point: rgb(var(--color-secondary-point-rgb));
--color-secondary-text-rgb: 210 158 53;
--color-secondary-text: rgb(var(--color-secondary-text-rgb));
--color-bg-gray-rgb: 243 243 243;
--color-bg-gray: rgb(var(--color-bg-gray-rgb));
--color-bg-pink-rgb: 255 216 216;
--color-bg-pink: rgb(var(--color-bg-pink-rgb));
--color-bg-beige-rgb: 242 234 217;
--color-bg-beige: rgb(var(--color-bg-beige-rgb));
--color-black-rgb: 10 13 21;
--color-black: rgb(var(--color-black-rgb));
--color-text-gray-rgb: 154 158 162;
--color-text-gray: rgb(var(--color-text-gray-rgb));
--color-line-rgb: 230 230 230;
--color-line: rgb(var(--color-line-rgb));
--font-family-base: "Noto Sans JP", sans-serif;
--font-family-deco: "Arial", sans-serif;
--transition-on: 0.3s;
--transition-off: 0.1s;
--site-gutter: calc(40 * var(--px-to-size-in-base));
--site-header-height: max(100 * var(--px-to-size-in-base) * var(--is-pc), 120 * var(--px-to-size-in-base) * var(--is-sp));
--content-width: max(1200 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
font-size: max(18 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.8;
font-family: var(--font-family-base);
font-feature-settings: "pwid" on;
scroll-behavior: smooth;
scroll-padding-top: var(--site-header-height);
background-color: var(--color-primary);
}
@media (max-width: 880px) {
:root {
--is-pc: 0;
--is-sp: 1;
}
}
body {
display: flow-root;
margin: 0;
background-color: #fff;
}
.js-has-pseudo [csstools-has-2q-33-2s-3d-1m-2w-2p-37-14-1a-2b-2x-38-2t-28-33-34-33-3a-2t-36-25-2t-32-39-2j-2p-36-2x-2p-19-2w-2x-2s-2s-2t-32-1p-2u-2p-30-37-2t-2l-15]:not(.does-not-exist):not(does-not-exist) {
overflow: hidden;
}
body:has(.SitePopoverMenu[aria-hidden=false]) {
overflow: hidden;
}
.hidden {
display: none !important;
}
@media (min-width: 880.1px) {
.hidden-pc {
display: none !important;
}
}
@media (max-width: 880px) {
.hidden-sp {
display: none !important;
}
}
.fs-16 {
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
.fs-18 {
font-size: max(18 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
}
.bold {
font-weight: bold;
}
.text-center {
text-align: center;
}
.mt-10 {
margin-top: calc(10 * var(--px-to-size-in-base));
}
.mt-20 {
margin-top: calc(30 * var(--px-to-size-in-base));
}
.mt-30 {
margin-top: calc(30 * var(--px-to-size-in-base));
}
.mt-30-60 {
margin-top: max(30 * var(--px-to-size-in-base) * var(--is-pc), 60 * var(--px-to-size-in-base) * var(--is-sp));
}
.mt-40 {
margin-top: calc(40 * var(--px-to-size-in-base));
}
.mt-60 {
margin-top: calc(60 * var(--px-to-size-in-base));
}
.mt-60-100 {
margin-top: max(60 * var(--px-to-size-in-base) * var(--is-pc), 100 * var(--px-to-size-in-base) * var(--is-sp));
}
.mt-70 {
margin-top: calc(70 * var(--px-to-size-in-base));
}
.mt-80 {
margin-top: calc(80 * var(--px-to-size-in-base));
}
.mt-90 {
margin-top: calc(90 * var(--px-to-size-in-base));
}
.mt-90-80 {
margin-top: max(90 * var(--px-to-size-in-base) * var(--is-pc), 80 * var(--px-to-size-in-base) * var(--is-sp));
}
.mt-100 {
margin-top: calc(100 * var(--px-to-size-in-base));
}
.mb-30 {
margin-bottom: calc(30 * var(--px-to-size-in-base));
}
.gap-y-40 {
display: grid;
grid-template-columns: 100%;
row-gap: calc(40 * var(--px-to-size-in-base));
}
.gap-y-30 {
display: grid;
grid-template-columns: 100%;
row-gap: calc(30 * var(--px-to-size-in-base));
}
.gap-y-80 {
display: grid;
grid-template-columns: 100%;
row-gap: calc(80 * var(--px-to-size-in-base));
}
.container {
margin-inline: auto;
width: var(--content-width);
}
.container-960 {
margin-inline: auto;
width: var(--content-width);
max-width: calc(960 * var(--px-to-size-in-base));
}
.TwoColumns {
margin-inline: auto;
width: var(--content-width);
display: grid;
}
@media (min-width: 880.1px) {
.TwoColumns {
grid-template-columns: 71.6666666667% 23.3333333333%;
justify-content: space-between;
}
}
@media (max-width: 880px) {
.TwoColumns {
grid-template-columns: 100%;
}
.TwoColumns .TwoColumns__sub {
margin-top: calc(100 * var(--px-to-size-in-base));
border-top: 1px solid var(--color-line);
padding-top: calc(100 * var(--px-to-size-in-base));
}
}
.pagination .nav-links {
position: relative;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
padding-inline: 5em;
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5em;
}
.pagination .nav-links .page-numbers:not(.prev, .next, .dots) {
aspect-ratio: 1;
min-width: 2.25em;
background-color: var(--color-bg-gray);
color: var(--color-primary);
border-radius: 0.25em;
display: grid;
place-items: center;
transition: background-color var(--transition-off);
}
.pagination .nav-links .page-numbers:not(.prev, .next, .dots):link:hover {
transition-duration: var(--transition-on);
background-color: rgb(var(--color-bg-gray-rgb), 0.9);
}
.pagination .nav-links .page-numbers:not(.prev, .next, .dots)[aria-current=page] {
background-color: var(--color-primary);
color: #fff;
}
.pagination .nav-links .page-numbers:is(.prev, .next) {
position: absolute;
display: flex;
align-items: center;
gap: 0.5em;
transition: color var(--transition-off);
}
.pagination .nav-links .page-numbers:is(.prev, .next):hover {
transition-duration: var(--transition-on);
color: var(--color-primary);
}
.pagination .nav-links .page-numbers:is(.prev, .next)::before, .pagination .nav-links .page-numbers:is(.prev, .next)::after {
width: auto;
height: 1em;
background-color: var(--color-primary);
}
.pagination .nav-links .page-numbers:is(.prev, .next):is(.prev) {
left: 0;
}
.pagination .nav-links .page-numbers:is(.prev, .next):is(.prev)::before {
content: "";
aspect-ratio: var(--svg-icon-left-ratio);
-webkit-mask-image: var(--svg-icon-left-url);
mask-image: var(--svg-icon-left-url);
}
.pagination .nav-links .page-numbers:is(.prev, .next):is(.next) {
right: 0;
}
.pagination .nav-links .page-numbers:is(.prev, .next):is(.next)::after {
content: "";
aspect-ratio: var(--svg-icon-right-ratio);
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
}
.Link {
display: inline-flex;
align-items: center;
gap: 0.7em;
transition: color var(--transition-off);
}
.Link:hover {
transition-duration: var(--transition-on);
color: var(--color-primary);
}
.Link:not(.--back)::after {
content: "";
aspect-ratio: var(--svg-icon-right-ratio);
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
background-color: var(--color-primary);
width: auto;
height: 1em;
}
.Link.--back::before {
content: "";
aspect-ratio: var(--svg-icon-left-ratio);
-webkit-mask-image: var(--svg-icon-left-url);
mask-image: var(--svg-icon-left-url);
background-color: var(--color-primary);
width: auto;
height: 1em;
}
.Background {
display: flow-root;
}
.Background:not(.--no-pad) {
padding-block: calc(60 * var(--px-to-size-in-base)) calc(100 * var(--px-to-size-in-base));
}
.Background.--white {
--separator-color: var(--color-line);
background-color: #fff;
color: var(--color-black);
}
.Background.--beige {
--separator-color: #fff;
background-color: var(--color-bg-beige);
color: var(--color-black);
}
.Background.--pink {
--separator-color: #fff;
background-color: var(--color-bg-pink);
color: var(--color-black);
}
.Background.--red {
--separator-color: #fff;
background-color: var(--color-primary);
color: #fff;
}
.Background.--add-cta-space {
padding-block-start: calc(180 * var(--px-to-size-in-base));
}
.Background.--campaign {
--separator-color: #fff;
background-color: var(--color-bg-beige);
color: var(--color-black);
background-image: url("../assets/campaign/bg-pattern.svg");
background-size: calc(4560 * var(--px-to-size-in-base)) auto;
background-position: 50% 59.5%;
}
:is(.PageHeader, .PageHeaderGenre) + .Background {
padding-block-start: 0;
}
.Separator {
display: block;
margin: calc(100 * var(--px-to-size-in-base)) auto calc(60 * var(--px-to-size-in-base));
width: max(1200 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
border: none;
border-top: 1px solid var(--separator-color, var(--color-line));
}
.HeadingA {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: max(40 * var(--px-to-size-in-base) * var(--is-pc), 56 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
}
.HeadingA .HeadingA__deco {
line-height: 1;
font-family: var(--font-family-deco);
font-weight: bold;
font-size: 50%;
color: var(--color-secondary-text);
}
.HeadingA .HeadingA__deco::first-letter {
color: var(--color-primary);
}
.HeadingB {
display: flex;
flex-direction: column;
font-size: max(36 * var(--px-to-size-in-base) * var(--is-pc), 48 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
}
.HeadingB::after {
content: "";
aspect-ratio: 48/19;
width: max(48 * var(--px-to-size-in-base) * var(--is-pc), 96 * var(--px-to-size-in-base) * var(--is-sp));
height: auto;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%;
}
.HeadingC {
font: bold max(28 * var(--px-to-size-in-base) * var(--is-pc), 36 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
border-bottom: 3px solid var(--color-primary);
padding-bottom: 0.2em;
}
.HeadingD {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
display: flex;
align-items: start;
gap: 0.4em;
}
.HeadingD::before {
content: "";
margin-top: 0.7em;
width: 0.8em;
height: calc(3 * var(--px-to-size-in-base));
background-color: var(--color-primary);
}
@media (max-width: 880px) {
.HeadingD::before {
height: calc(6 * var(--px-to-size-in-base));
}
}
.Button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: max(460 * var(--px-to-size-in-base) * var(--is-pc), 620 * var(--px-to-size-in-base) * var(--is-sp));
height: max(70 * var(--px-to-size-in-base) * var(--is-pc), 90 * var(--px-to-size-in-base) * var(--is-sp));
border-radius: calc(8 * var(--px-to-size-in-base));
font-weight: bold;
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
opacity: 1;
transition: background-color 0.1s;
background-color: var(--color-bg-gray);
}
.Button.--center {
margin-inline: auto;
}
.Button.--full {
width: 100%;
}
.Button:hover {
transition-duration: 0.3s;
background-color: #f9f9f9;
}
.Button::after {
content: "";
position: absolute;
right: calc(30 * var(--px-to-size-in-base));
width: 1em;
height: 1em;
background-color: var(--color-primary);
aspect-ratio: var(--svg-icon-right-ratio);
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
}
.Button.--white {
background-color: #fff;
color: var(--color-black);
}
.Button.--white:hover {
background-color: rgba(255, 255, 255, 0.5);
}
@property --contact-button-color1 {
syntax: "";
inherits: false;
initial-value: gray;
}
@property --contact-button-color2 {
syntax: "";
inherits: false;
initial-value: black;
}
.ContactButton {
border-radius: calc(8 * var(--px-to-size-in-base));
color: #fff;
line-height: 1.2;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, var(--contact-button-color1), var(--contact-button-color2));
transition: --contact-button-color1 0.2s, --contact-button-color2 0.2s;
}
.ContactButton::before {
content: "";
width: 2.22em;
height: 2.22em;
background-color: #fff;
-webkit-mask: var(--contact-button-icon-url) no-repeat center/var(--contact-button-icon-width) var(--contact-button-icon-height);
mask: var(--contact-button-icon-url) no-repeat center/var(--contact-button-icon-width) var(--contact-button-icon-height);
}
.ContactButton.-mail {
--contact-button-color1: #3e5ba6;
--contact-button-color2: #1f2d50;
--contact-button-icon-url: var(--svg-icon-mail-url);
--contact-button-icon-width: 77.5%;
--contact-button-icon-height: 52.5%;
}
.ContactButton.-mail:hover {
--contact-button-color1: #6f8ace;
--contact-button-color2: #3e5ba6;
}
.ContactButton.-line {
--contact-button-color1: #14cb3a;
--contact-button-color2: #00a422;
--contact-button-icon-url: var(--svg-icon-line-url);
--contact-button-icon-width: 95%;
--contact-button-icon-height: 67.5%;
}
.ContactButton.-line:hover {
--contact-button-color1: #39ef5f;
--contact-button-color2: #14cb3a;
}
@media (min-width: 880.1px) {
.ContactButton.-siteheader {
font-size: calc(18 * var(--px-to-size-in-base));
width: calc(150 * var(--px-to-size-in-base));
height: calc(70 * var(--px-to-size-in-base));
gap: calc(5 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.ContactButton.-siteheader {
font-size: calc(20 * var(--px-to-size-in-base));
width: calc(120 * var(--px-to-size-in-base));
height: calc(90 * var(--px-to-size-in-base));
flex-direction: column;
}
}
.ContactButton.-sitefooter {
font-size: max(28 * var(--px-to-size-in-base) * var(--is-pc), 44 * var(--px-to-size-in-base) * var(--is-sp));
width: 100%;
height: max(90 * var(--px-to-size-in-base) * var(--is-pc), 140 * var(--px-to-size-in-base) * var(--is-sp));
gap: max(10 * var(--px-to-size-in-base) * var(--is-pc), 50 * var(--px-to-size-in-base) * var(--is-sp));
}
@media (max-width: 880px) {
.ContactButton.-sitefooter {
justify-content: start;
padding-left: calc(50 * var(--px-to-size-in-base));
border-radius: calc(16 * var(--px-to-size-in-base));
}
}
.ContactButton.-sitepopovermenu {
font-size: calc(36 * var(--px-to-size-in-base));
height: calc(140 * var(--px-to-size-in-base));
border-radius: calc(16 * var(--px-to-size-in-base));
gap: calc(10 * var(--px-to-size-in-base));
}
@media (min-width: 880.1px) {
.ContactButton.-cta {
font-size: calc(28 * var(--px-to-size-in-base));
width: calc(360 * var(--px-to-size-in-base));
height: calc(90 * var(--px-to-size-in-base));
gap: calc(8 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.ContactButton.-cta {
font-size: calc(36 * var(--px-to-size-in-base));
width: calc(300 * var(--px-to-size-in-base));
height: calc(140 * var(--px-to-size-in-base));
gap: calc(12 * var(--px-to-size-in-base));
border-radius: calc(16 * var(--px-to-size-in-base));
}
}
.RecordList {
margin-top: calc(40 * var(--px-to-size-in-base));
display: grid;
max-width: calc(1200 * var(--px-to-size-in-base));
grid-template-columns: repeat(3, 1fr);
gap: calc(40 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.RecordList {
grid-template-columns: calc(432 * var(--px-to-size-in-base));
justify-content: center;
}
}
.RecordCard {
display: flex;
flex-direction: column;
gap: calc(12 * var(--px-to-size-in-base));
min-height: 100%;
}
.RecordCard .RecordCard__image {
aspect-ratio: 360/240;
width: 100%;
height: auto;
}
.RecordCard .RecordCard__image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: calc(12 * var(--px-to-size-in-base));
}
.RecordCard .RecordCard__title {
flex-grow: 1;
}
.RecordCard .RecordCard__price {
display: flex;
align-items: end;
gap: 0.5em;
font-weight: bold;
line-height: 1;
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
--price-size: 180%;
}
.RecordCard .RecordCard__price.--small {
--price-size: 150%;
}
.RecordCard .RecordCard__price dt {
translate: 0 -0.2em;
letter-spacing: 0;
}
.RecordCard .RecordCard__price dd {
display: flex;
align-items: baseline;
gap: 0.1em;
color: var(--color-primary);
}
.RecordCard .RecordCard__price dd em {
font-size: var(--price-size);
letter-spacing: 0;
}
.RecordCard .RecordCard__text {
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
line-height: 1.2;
color: var(--color-primary);
}
.Editor {
font-size: max(18 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.8;
color: var(--color-black);
overflow-wrap: anywhere;
}
.Editor :where(p) {
margin-block: 1em;
}
.Editor :where(h1, h2, h3, h4, h5, h6) {
margin-block: 2em 1.5em;
}
.Editor :where(h1, h2, h3, h4, h5, h6):where(h1) {
font: bold max(32 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.Editor :where(h1, h2, h3, h4, h5, h6):where(h2) {
font: bold max(28 * var(--px-to-size-in-base) * var(--is-pc), 36 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
border-bottom: 3px solid var(--color-primary);
padding-bottom: 0.2em;
}
.Editor :where(h1, h2, h3, h4, h5, h6):where(h3) {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
display: flex;
align-items: start;
gap: 0.8em;
}
.Editor :where(h1, h2, h3, h4, h5, h6):where(h3)::before {
content: "";
margin-top: 0.7em;
width: 0.8em;
height: calc(3 * var(--px-to-size-in-base));
background-color: var(--color-primary);
}
@media (max-width: 880px) {
.Editor :where(h1, h2, h3, h4, h5, h6):where(h3)::before {
height: calc(6 * var(--px-to-size-in-base));
}
}
.Editor :where(h1, h2, h3, h4, h5, h6):where(h4) {
font: bold max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.Editor :where(h1, h2, h3, h4, h5, h6):where(h5) {
font: bold max(18 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.Editor :where(h1, h2, h3, h4, h5, h6):where(h6) {
font: bold max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.Editor :where(strong) {
font-weight: bold;
}
.Editor :where(em) {
font-style: italic;
font-weight: inherit;
}
.Editor :where(a) {
color: var(--color-primary);
text-decoration: underline;
}
.Editor :where(ul) {
list-style: disc;
margin-left: 2em;
margin-block: 1.5em;
}
.Editor :where(ul) ::marker {
color: var(--color-primary);
}
.Editor :where(ol) {
list-style: decimal;
margin-left: 2em;
margin-block: 1.5em;
}
.Editor :where(ol) ::marker {
color: var(--color-primary);
font-family: var(--font-family-deco);
font-weight: bold;
}
.Editor :where(li) {
margin-block: 0.5em;
line-height: 1.5;
}
.Editor .wp-block-table {
margin-block: 2em;
}
.Editor .wp-block-table table {
--sp-white-space: nowrap;
}
.Editor .wp-block-table table.has-fixed-layout {
--sp-white-space: normal;
}
.Editor .wp-block-table table th,
.Editor .wp-block-table table td {
border: 1px solid var(--color-line);
padding: 0.5em 1em;
}
@media (max-width: 880px) {
.Editor .wp-block-table table th,
.Editor .wp-block-table table td {
white-space: var(--sp-white-space);
}
}
.Editor .wp-block-table table thead {
border-bottom: 1px solid var(--color-line);
background-color: var(--color-bg-beige);
}
.Editor .wp-block-table table tfoot {
border-top: 3px solid var(--color-line);
}
.Editor .wp-block-image {
margin-block: 2em;
}
.SiteHeader {
--width: min(100% - var(--site-gutter) * 2, 1600px);
position: fixed;
z-index: 100;
top: 0;
left: calc((100% - var(--width)) / 2);
width: var(--width);
height: var(--site-header-height);
background-color: #fff;
color: var(--color-black);
padding: 0 var(--site-gutter);
display: flex;
align-items: center;
border-radius: 0 0 max(12 * var(--px-to-size-in-base) * var(--is-pc), 16 * var(--px-to-size-in-base) * var(--is-sp)) max(12 * var(--px-to-size-in-base) * var(--is-pc), 16 * var(--px-to-size-in-base) * var(--is-sp));
gap: max(30 * var(--px-to-size-in-base) * var(--is-pc), 20 * var(--px-to-size-in-base) * var(--is-sp));
}
.SiteHeader .SiteHeader__logo {
flex-shrink: 0;
}
@media (min-width: 880.1px) and (max-width: 1600px) {
.SiteHeader .SiteHeader__description {
position: absolute;
left: calc(var(--site-gutter) + 85 * var(--px-to-size-in-base));
top: calc(18 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.SiteHeader .SiteHeader__description {
flex-grow: 1;
}
}
.SiteHeader .SiteHeader__nav {
flex-grow: 1;
flex-shrink: 0;
display: flex;
justify-content: end;
padding: calc(10 * var(--px-to-size-in-base)) calc(10 * var(--px-to-size-in-base)) 0 0;
}
@media (max-width: 1600px) {
.SiteHeader .SiteHeader__nav {
justify-content: center;
padding: calc(25 * var(--px-to-size-in-base)) 0 0;
}
}
@media (max-width: 880px) {
.SiteHeader .SiteHeader__nav {
display: none;
}
}
.SiteHeader .SiteHeader__contact {
flex-shrink: 0;
}
.SiteHeader .SiteHeader__menuButton {
margin-left: calc(10 * var(--px-to-size-in-base));
}
@media (min-width: 880.1px) {
.SiteHeader .SiteHeader__menuButton {
display: none;
}
}
.SiteHeaderLogo {
aspect-ratio: 55/72;
width: max(55 * var(--px-to-size-in-base) * var(--is-pc), 68 * var(--px-to-size-in-base) * var(--is-sp));
height: auto;
}
.SiteHeaderLogo a,
.SiteHeaderLogo img {
display: block;
width: 100%;
height: 100%;
}
.SiteHeaderDescription {
font-size: max(12 * var(--px-to-size-in-base) * var(--is-pc), 16 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
letter-spacing: 0;
}
@media (min-width: 880.1px) {
.SiteHeaderDescription br {
display: none;
}
}
.SiteHeaderNav {
--gap: 1.8em;
display: flex;
align-items: center;
font-size: calc(16 * var(--px-to-size-in-base));
gap: var(--gap);
}
.SiteHeaderNav .SiteHeaderNav__item {
--z-index: auto;
--transition-duration: 0.1s;
--deco-opacity: 0;
--deco-scale: 1.6;
--deco-pointer-events: none;
--arrow-opacity: 1;
--arrow-y: 0;
position: relative;
z-index: var(--z-index);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5em;
line-height: 1.2;
font-weight: bold;
}
.SiteHeaderNav .SiteHeaderNav__item:hover, .SiteHeaderNav .SiteHeaderNav__item[aria-expanded=true] {
--z-index: 1;
--transition-duration: 0.3s;
--deco-scale: 1;
--deco-opacity: 1;
--deco-pointer-events: auto;
--arrow-opacity: 0;
--arrow-y: 0.2em;
}
.SiteHeaderNav .SiteHeaderNav__item::before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
translate: -50% 0;
top: -1.5em;
min-width: 5em;
width: calc(100% + var(--gap) * 2);
height: 5em;
background-image: url('data:image/svg+xml;utf8,');
background-size: 5em 5em;
background-position: center top;
pointer-events: var(--deco-pointer-events);
transition: opacity var(--transition-duration), scale var(--transition-duration);
opacity: var(--deco-opacity);
scale: var(--deco-scale);
}
.SiteHeaderNav .SiteHeaderNav__item.-toggle::before {
height: calc(120 * var(--px-to-size-in-base));
}
.SiteHeaderNav .SiteHeaderNav__item span {
letter-spacing: 0;
}
.SiteHeaderNav .SiteHeaderNav__item::after {
content: "";
aspect-ratio: var(--svg-icon-down-ratio);
width: auto;
height: 0.75em;
}
.SiteHeaderNav .SiteHeaderNav__item.-toggle::after {
background-color: var(--color-primary);
-webkit-mask: var(--svg-icon-down-url) no-repeat center/contain;
mask: var(--svg-icon-down-url) no-repeat center/contain;
opacity: var(--arrow-opacity);
translate: 0 var(--arrow-y);
transition: opacity var(--transition-duration), translate var(--transition-duration);
}
.SiteHeaderSubPannel {
--offset-y: calc(20 * var(--px-to-size-in-base));
position: absolute;
top: calc(100% + var(--offset-y));
left: 0;
right: 0;
margin-inline: auto;
padding: calc(30 * var(--px-to-size-in-base));
width: calc(1200 * var(--px-to-size-in-base));
background-color: rgba(242, 234, 217, 0.95);
border-radius: calc(12 * var(--px-to-size-in-base));
}
.SiteHeaderSubPannel[aria-hidden=true] {
transition: visibility 0s 0.1s, opacity 0.1s linear, translate 0s 0.1s;
visibility: hidden;
opacity: 0;
translate: 0 calc(-10 * var(--px-to-size-in-base));
}
.SiteHeaderSubPannel:not([aria-hidden=true]) {
transition: visibility 0s, opacity 0.2s linear, translate 0.3s ease-in-out;
visibility: visible;
opacity: 1;
translate: 0 0;
}
.SiteHeaderSubPannel::before {
content: "";
position: absolute;
left: 0;
bottom: 100%;
width: 100%;
height: calc(var(--offset-y) + 0.5em);
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__header .SiteHeaderSubPannel__title {
font-size: calc(24 * var(--px-to-size-in-base));
font-weight: bold;
line-height: 1.5;
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__header .SiteHeaderSubPannel__toplink {
display: flex;
align-items: center;
gap: 1em;
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__header .SiteHeaderSubPannel__toplink::after {
content: "";
aspect-ratio: var(--svg-icon-right-ratio);
width: auto;
height: 1em;
background-color: var(--color-primary);
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__links {
margin-top: calc(20 * var(--px-to-size-in-base));
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: calc(80 * var(--px-to-size-in-base));
gap: calc(12 * var(--px-to-size-in-base));
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__links.-genre {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: calc(60 * var(--px-to-size-in-base));
gap: calc(12 * var(--px-to-size-in-base));
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__links > a {
background-color: #fff;
border-radius: calc(8 * var(--px-to-size-in-base));
line-height: 1.2;
display: flex;
transition: background-color 0.1s;
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__links > a:hover {
background-color: rgba(255, 255, 255, 0.5);
transition-duration: 0.3s;
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__links > a.-icon {
padding: 0 calc(20 * var(--px-to-size-in-base));
align-items: center;
gap: calc(20 * var(--px-to-size-in-base));
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__links > a.-icon::before {
content: "";
aspect-ratio: 1;
width: 2.2em;
height: auto;
background-color: var(--color-primary);
-webkit-mask-image: var(--mask-image);
mask-image: var(--mask-image);
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__links > a.-icon.-icon-badge {
--mask-image: var(--svg-icon-badge-url);
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__links > a.-icon.-icon-japan {
--mask-image: var(--svg-icon-japan-url);
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__links > a.-icon.-icon-flow {
--mask-image: var(--svg-icon-flow-url);
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__links > a.-icon.-icon-twinkle {
--mask-image: var(--svg-icon-twinkle-url);
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__links > a.-genre {
padding: 0 calc(8 * var(--px-to-size-in-base));
align-items: center;
}
.SiteHeaderSubPannel .SiteHeaderSubPannel__links > a.-genre img {
width: calc(90 * var(--px-to-size-in-base));
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.SiteHeaderContact {
display: flex;
align-items: center;
gap: calc(12 * var(--px-to-size-in-base));
}
.SiteHeaderPhone {
margin-left: calc(4 * var(--px-to-size-in-base));
width: calc(170 * var(--px-to-size-in-base));
white-space: nowrap;
display: flex;
flex-direction: column;
font-size: calc(14 * var(--px-to-size-in-base));
line-height: 1.2;
}
@media (max-width: 880px) {
.SiteHeaderPhone {
display: none;
}
}
.SiteHeaderPhone .SiteHeaderPhone__heading {
font-weight: bold;
}
.SiteHeaderPhone .SiteHeaderPhone__number {
font-size: 171%;
font-family: Arial, sans-serif;
font-weight: bold;
display: flex;
align-items: center;
gap: 0.15em;
}
.SiteHeaderPhone .SiteHeaderPhone__number::before {
content: "";
aspect-ratio: var(--svg-icon-phone-ratio);
width: auto;
height: 0.7em;
background-color: currentcolor;
-webkit-mask: var(--svg-icon-phone-url) no-repeat center/contain;
mask: var(--svg-icon-phone-url) no-repeat center/contain;
}
.SiteHeaderMenuButton {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6em;
font-size: calc(20 * var(--px-to-size-in-base));
line-height: 1;
font-family: Arial, sans-serif;
font-weight: 700;
color: var(--color-secondary-text);
}
.SiteHeaderMenuButton::before {
content: "";
width: 3em;
height: 1.6em;
background-color: var(--color-primary);
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.SiteHeaderMenuButton span::first-letter {
color: var(--color-primary);
}
.SpMenuList {
display: grid;
gap: calc(28 * var(--px-to-size-in-base));
line-height: 1.2;
}
.SpMenuList > li {
border-bottom: calc(2 * var(--px-to-size-in-base)) solid rgba(255, 255, 255, 0.5);
padding-bottom: calc(30 * var(--px-to-size-in-base));
}
.SpMenuList .SpMenuList__item {
width: 100%;
display: flex;
align-items: center;
gap: 0.625em;
font-size: calc(32 * var(--px-to-size-in-base));
font-weight: bold;
text-align: left;
}
.SpMenuList .SpMenuList__item::before {
content: "";
flex-shrink: 0;
width: 1em;
height: 0.125em;
background-color: var(--color-secondary-point);
background-image: linear-gradient(#fff, #fff);
background-size: 50% 100%;
}
.SpMenuList .SpMenuList__item > span {
flex-grow: 1;
letter-spacing: 0;
}
.SpMenuList .SpMenuList__item::after {
content: "";
flex-shrink: 0;
width: auto;
height: 1em;
margin-left: auto;
background-color: #fff;
}
.SpMenuList .SpMenuList__item.-link::after {
aspect-ratio: var(--svg-icon-right-ratio);
-webkit-mask: var(--svg-icon-right-url) no-repeat center/contain;
mask: var(--svg-icon-right-url) no-repeat center/contain;
}
.SpMenuList .SpMenuList__item.-toggle::after {
aspect-ratio: var(--svg-icon-plus-ratio);
-webkit-mask: var(--svg-icon-plus-url) no-repeat center/contain;
mask: var(--svg-icon-plus-url) no-repeat center/contain;
}
.SpMenuList .SpMenuList__item[aria-expanded=true]::after {
-webkit-mask: var(--svg-icon-minus-url) no-repeat center/contain;
mask: var(--svg-icon-minus-url) no-repeat center/contain;
}
.SpMenuList .SpMenuList__sub {
padding-block: calc(30 * var(--px-to-size-in-base)) calc(10 * var(--px-to-size-in-base));
}
.SpMenuList .SpMenuList__sub[aria-hidden=true] {
display: none;
}
.SpMenuList .SpMenuList__sub:not([aria-hidden=true]) {
display: block;
}
.SpMenuList .SpMenuList__subList {
display: grid;
gap: calc(20 * var(--px-to-size-in-base));
}
.SpMenuList .SpMenuList__subList.-genre {
grid-template-columns: repeat(2, 1fr);
gap: calc(20 * var(--px-to-size-in-base));
}
.SpMenuList .SpMenuList__subItem {
background-color: #fff;
color: var(--color-black);
border-radius: calc(8 * var(--px-to-size-in-base));
display: flex;
align-items: center;
padding-inline: calc(20 * var(--px-to-size-in-base)) calc(12 * var(--px-to-size-in-base));
height: calc(84 * var(--px-to-size-in-base));
font-size: calc(24 * var(--px-to-size-in-base));
font-weight: bold;
}
.SpMenuList .SpMenuList__subItem > span {
flex-grow: 1;
letter-spacing: 0;
}
.SpMenuList .SpMenuList__subItem::after {
content: "";
aspect-ratio: var(--svg-icon-right-ratio);
width: auto;
height: 1em;
background-color: var(--color-primary);
-webkit-mask: var(--svg-icon-right-url) no-repeat center/contain;
mask: var(--svg-icon-right-url) no-repeat center/contain;
}
.SpMenuList .SpMenuList__subItem.-genre {
padding-inline: 0 calc(12 * var(--px-to-size-in-base));
}
.SpMenuList .SpMenuList__subItem.-genre > img {
width: calc(90 * var(--px-to-size-in-base));
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.SpMenuList .SpMenuList__subTop {
margin-top: calc(40 * var(--px-to-size-in-base));
margin-left: auto;
display: flex;
width: -moz-fit-content;
width: fit-content;
align-items: center;
gap: calc(20 * var(--px-to-size-in-base));
font-size: calc(24 * var(--px-to-size-in-base));
font-weight: bold;
letter-spacing: 0;
}
.SpMenuList .SpMenuList__subTop::after {
content: "";
aspect-ratio: var(--svg-icon-right-ratio);
width: auto;
height: 1em;
background-color: currentcolor;
-webkit-mask: var(--svg-icon-right-url) no-repeat center/contain;
mask: var(--svg-icon-right-url) no-repeat center/contain;
}
.SitePopoverMenu {
position: fixed;
z-index: 101;
top: 0;
left: 0;
width: 100%;
max-height: 100%;
background-color: rgb(var(--color-primary-rgb)/0.95);
color: #fff;
display: grid;
grid-template-rows: var(--site-header-height) 1fr;
gap: calc(20 * var(--px-to-size-in-base));
padding-bottom: calc(40 * var(--px-to-size-in-base));
}
@media (min-width: 880.1px) {
.SitePopoverMenu {
display: none;
}
}
.SitePopoverMenu[aria-hidden=true] {
transition: visibility 0s 0.1s, opacity 0.1s;
visibility: hidden;
opacity: 0;
}
.SitePopoverMenu:not([aria-hidden=true]) {
transition: visibility 0s, opacity 0.2s;
visibility: visible;
opacity: 1;
}
.SitePopoverMenu .SitePopoverMenu__body {
--pad-y: calc(20 * var(--px-to-size-in-base));
padding-block: var(--pad-y);
overflow-y: auto;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black var(--pad-y), black calc(100% - var(--pad-y)), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black var(--pad-y), black calc(100% - var(--pad-y)), transparent 100%);
}
.SitePopoverMenuHeader {
padding-inline: var(--site-gutter);
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.SitePopoverMenuHeader .SitePopoverMenuHeader__logo {
aspect-ratio: 55/72;
width: calc(68 * var(--px-to-size-in-base));
height: auto;
}
.SitePopoverMenuHeader .SitePopoverMenuHeader__logo img {
display: block;
width: 100%;
height: 100%;
filter: brightness(0) invert(1);
}
.SitePopoverMenuHeader .SitePopoverMenuHeader__close {
width: calc(140 * var(--px-to-size-in-base));
height: 100%;
background-color: #fff;
border-radius: 0 0 calc(16 * var(--px-to-size-in-base)) calc(16 * var(--px-to-size-in-base));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5em;
font-size: calc(20 * var(--px-to-size-in-base));
line-height: 1;
font-family: Arial, sans-serif;
font-weight: 700;
color: var(--color-secondary-text);
}
.SitePopoverMenuHeader .SitePopoverMenuHeader__close::before {
content: "";
width: 2.4em;
height: 2.4em;
background-color: var(--color-primary);
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.SitePopoverMenuHeader .SitePopoverMenuHeader__close > span::first-letter {
color: var(--color-primary);
}
.SitePopoverMenuNav {
padding-inline: var(--site-gutter);
}
.SitePopoverMenuContact {
margin: calc(40 * var(--px-to-size-in-base)) auto 0;
width: calc(620 * var(--px-to-size-in-base));
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(20 * var(--px-to-size-in-base));
}
.SitePopoverMenuContact .SitePopoverMenuContact__phone {
grid-column: span 2;
border-radius: calc(16 * var(--px-to-size-in-base));
background: linear-gradient(to bottom, #f2ead9, #e9deb7);
color: var(--color-black);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(5 * var(--px-to-size-in-base));
height: calc(110 * var(--px-to-size-in-base));
line-height: 1;
}
.SitePopoverMenuContact .SitePopoverMenuContact__phone > span:nth-child(1) {
font-size: calc(56 * var(--px-to-size-in-base));
font-family: var(--font-family-deco);
font-weight: bold;
letter-spacing: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.15em;
}
.SitePopoverMenuContact .SitePopoverMenuContact__phone > span:nth-child(1)::before {
content: "";
aspect-ratio: var(--svg-icon-phone-ratio);
width: auto;
height: 0.8em;
background-color: currentcolor;
-webkit-mask: var(--svg-icon-phone-url) no-repeat center/contain;
mask: var(--svg-icon-phone-url) no-repeat center/contain;
}
.SitePopoverMenuContact .SitePopoverMenuContact__phone > span:nth-child(2) {
font-size: calc(20 * var(--px-to-size-in-base));
}
.SitePopoverMenuBottomClose {
margin-top: calc(60 * var(--px-to-size-in-base));
display: flex;
flex-direction: column;
align-items: center;
}
.SitePopoverMenuBottomClose button {
position: relative;
padding-left: 1.8em;
font-family: var(--font-family-deco);
line-height: 1.2;
}
.SitePopoverMenuBottomClose button::before, .SitePopoverMenuBottomClose button::after {
content: "";
position: absolute;
left: 0;
top: calc(50% - 2 * var(--px-to-size-in-base));
width: calc(40 * var(--px-to-size-in-base));
height: calc(4 * var(--px-to-size-in-base));
border-radius: calc(2 * var(--px-to-size-in-base));
background-color: #fff;
}
.SitePopoverMenuBottomClose button::before {
rotate: 45deg;
}
.SitePopoverMenuBottomClose button::after {
rotate: -45deg;
}
.SiteFooter .SiteFooter__beige {
padding-block: calc(60 * var(--px-to-size-in-base)) max(140 * var(--px-to-size-in-base) * var(--is-pc), 180 * var(--px-to-size-in-base) * var(--is-sp));
background-color: var(--color-bg-beige);
color: var(--color-black);
}
.SiteFooter .SiteFooter__red {
position: relative;
padding-block: calc(80 * var(--px-to-size-in-base)) calc(40 * var(--px-to-size-in-base));
background-color: var(--color-primary);
color: #fff;
}
.SiteFooter .SiteFooter__red::before {
content: "";
position: absolute;
top: min(-110 * var(--px-to-size-in-base) * var(--is-pc), -115 * var(--px-to-size-in-base) * var(--is-sp));
left: 0;
width: 100%;
height: max(170 * var(--px-to-size-in-base) * var(--is-pc), 190 * var(--px-to-size-in-base) * var(--is-sp));
background-image: url("../assets/common/footer-photo-v3.webp");
background-size: auto 100%;
background-position: center;
}
.SiteFooterContact {
margin-inline: auto;
width: var(--content-width);
}
.SiteFooterContact .SiteFooterContact__list {
margin-top: calc(30 * var(--px-to-size-in-base));
display: grid;
grid-template-columns: repeat(3, calc(360 * var(--px-to-size-in-base)));
justify-content: space-between;
}
@media (max-width: 880px) {
.SiteFooterContact .SiteFooterContact__list {
grid-template-columns: calc(620 * var(--px-to-size-in-base));
justify-content: center;
gap: calc(60 * var(--px-to-size-in-base));
}
}
.SiteFooterContact .SiteFooterContact__list dt {
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.4;
font-weight: bold;
display: flex;
flex-direction: column;
align-items: center;
}
.SiteFooterContact .SiteFooterContact__list dt::after {
content: "";
aspect-ratio: 26/38;
margin-block: max(10 * var(--px-to-size-in-base) * var(--is-pc), 15 * var(--px-to-size-in-base) * var(--is-sp));
width: 1em;
height: auto;
background-image: url("../assets/common/double-arrow-down.svg");
background-size: 100% 100%;
}
.SiteFooterContactPhone {
white-space: nowrap;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1.2;
}
@media (max-width: 880px) {
.SiteFooterContactPhone {
background-color: #fff;
border-radius: calc(16 * var(--px-to-size-in-base));
height: calc(120 * var(--px-to-size-in-base));
}
}
.SiteFooterContactPhone .SiteFooterContactPhone__number {
font-size: max(50 * var(--px-to-size-in-base) * var(--is-pc), 56 * var(--px-to-size-in-base) * var(--is-sp));
font-family: Arial, sans-serif;
font-weight: bold;
display: flex;
align-items: center;
gap: 0.15em;
}
.SiteFooterContactPhone .SiteFooterContactPhone__number::before {
content: "";
aspect-ratio: var(--svg-icon-phone-ratio);
width: auto;
height: 0.7em;
background-color: currentcolor;
-webkit-mask: var(--svg-icon-phone-url) no-repeat center/contain;
mask: var(--svg-icon-phone-url) no-repeat center/contain;
}
.SiteFooterContactPhone .SiteFooterContactPhone__text {
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 20 * var(--px-to-size-in-base) * var(--is-sp));
}
.SiteFooterNav {
margin-inline: auto;
width: var(--content-width);
display: flex;
align-items: start;
gap: calc(40 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.SiteFooterNav {
flex-direction: column;
gap: calc(50 * var(--px-to-size-in-base));
}
}
.SiteFooterNavLogo {
display: flex;
flex-direction: column;
align-items: start;
gap: calc(20 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.SiteFooterNavLogo {
flex-direction: row;
align-items: center;
}
}
.SiteFooterNavLogo img {
width: calc(110 * var(--px-to-size-in-base));
height: auto;
filter: brightness(0) invert(1);
}
.SiteFooterNavLogo p {
font-size: max(12 * var(--px-to-size-in-base) * var(--is-pc), 20 * var(--px-to-size-in-base) * var(--is-sp));
}
.SiteFooterNavList {
line-height: 1.5;
display: flex;
align-items: start;
gap: calc(80 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.SiteFooterNavList {
display: none;
}
}
.SiteFooterNavList .SiteFooterNavList__col {
display: flex;
flex-direction: column;
align-items: start;
gap: calc(20 * var(--px-to-size-in-base));
}
.SiteFooterNavList .SiteFooterNavList__link {
font-size: calc(18 * var(--px-to-size-in-base));
font-weight: bold;
display: flex;
align-items: center;
gap: calc(10 * var(--px-to-size-in-base));
}
.SiteFooterNavList .SiteFooterNavList__link:not(.-not-link) {
transition: opacity 0.1s;
}
.SiteFooterNavList .SiteFooterNavList__link:not(.-not-link):hover {
opacity: 0.7;
transition-duration: 0.3s;
}
.SiteFooterNavList .SiteFooterNavList__link::before {
content: "";
width: calc(16 * var(--px-to-size-in-base));
height: calc(2 * var(--px-to-size-in-base));
background-color: var(--color-secondary-point);
background-image: linear-gradient(#fff, #fff);
background-size: 50% 100%;
}
.SiteFooterNavList .SiteFooterNavList__toggle {
display: none;
}
.SiteFooterNavList .SiteFooterNavList__sublist {
margin-top: calc(10 * var(--px-to-size-in-base));
display: grid;
gap: calc(10 * var(--px-to-size-in-base));
font-size: calc(16 * var(--px-to-size-in-base));
padding-left: calc(30 * var(--px-to-size-in-base));
}
.SiteFooterNavList .SiteFooterNavList__sublist.-genre {
grid-template-columns: auto auto;
gap: calc(10 * var(--px-to-size-in-base)) calc(40 * var(--px-to-size-in-base));
}
.SiteFooterNavList .SiteFooterNavList__sublist a {
display: flex;
align-items: baseline;
gap: 0.4em;
transition: opacity 0.1s;
}
.SiteFooterNavList .SiteFooterNavList__sublist a:hover {
opacity: 0.7;
transition-duration: 0.3s;
}
.SiteFooterNavList .SiteFooterNavList__sublist a::before {
content: "";
aspect-ratio: var(--svg-icon-right-ratio);
background-color: currentcolor;
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
width: auto;
height: 0.66em;
}
.SiteFooterNavSpMenu {
width: 100%;
}
@media (min-width: 880.1px) {
.SiteFooterNavSpMenu {
display: none;
}
}
.SiteFooterBottom {
margin: calc(40 * var(--px-to-size-in-base)) auto 0;
width: max(1200 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
display: flex;
align-items: center;
}
@media (min-width: 880.1px) {
.SiteFooterBottom {
border-top: 1px solid #fff;
padding-top: calc(40 * var(--px-to-size-in-base));
justify-content: space-between;
}
}
@media (max-width: 880px) {
.SiteFooterBottom {
flex-direction: column;
gap: calc(60 * var(--px-to-size-in-base));
}
}
.SiteFooterBottom .SiteFooterBottom__nav {
display: flex;
align-items: center;
text-align: center;
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.2;
}
.SiteFooterBottom .SiteFooterBottom__nav > li {
display: flex;
align-items: center;
}
.SiteFooterBottom .SiteFooterBottom__nav > li:not(:first-child)::before {
content: "";
display: inline-block;
width: calc(1 * var(--px-to-size-in-base));
height: 1em;
background-color: currentcolor;
margin-inline: 1.5em;
}
@media (max-width: 880px) {
.SiteFooterBottom .SiteFooterBottom__nav > li:not(:first-child)::before {
margin-inline: 1em;
}
}
.SiteFooterBottom .SiteFooterBottom__nav > li > a {
display: flex;
align-items: baseline;
gap: 0.4em;
letter-spacing: 0;
transition: opacity 0.1s;
}
.SiteFooterBottom .SiteFooterBottom__nav > li > a:hover {
opacity: 0.7;
transition-duration: 0.3s;
}
.SiteFooterBottom .SiteFooterBottom__nav > li > a[target=_blank]::after {
content: "";
flex-shrink: 0;
width: 1em;
height: 1em;
background-color: currentcolor;
-webkit-mask-image: var(--svg-icon-external-url);
mask-image: var(--svg-icon-external-url);
translate: 0 0.1em;
}
.SiteFooterBottom .SiteFooterBottom__copy {
font-size: max(14 * var(--px-to-size-in-base) * var(--is-pc), 20 * var(--px-to-size-in-base) * var(--is-sp));
}
@media (max-width: 880px) {
.SiteFooterBottom .SiteFooterBottom__copy {
align-self: end;
}
}
.CtaBanner {
margin-inline: auto;
position: relative;
width: max(1200 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
height: max(583 * var(--px-to-size-in-base) * var(--is-pc), 1027 * var(--px-to-size-in-base) * var(--is-sp));
border-radius: max(16 * var(--px-to-size-in-base) * var(--is-pc), 20 * var(--px-to-size-in-base) * var(--is-sp));
background-color: var(--color-secondary-point);
background-size: 100% 100%;
}
@media (min-width: 880.1px) {
.CtaBanner {
background-image: url("../assets/common/cta-kari-pc.webp");
}
}
@media (max-width: 880px) {
.CtaBanner {
background-image: url("../assets/common/cta-kari-sp.webp");
}
}
.CtaBanner::before {
content: "";
position: absolute;
top: min(-43 * var(--px-to-size-in-base) * var(--is-pc), -50 * var(--px-to-size-in-base) * var(--is-sp));
left: max(125 * var(--px-to-size-in-base) * var(--is-pc), 90 * var(--px-to-size-in-base) * var(--is-sp));
aspect-ratio: 480/180;
width: calc(240 * var(--px-to-size-in-base));
height: auto;
background-image: url("../assets/common/cta-namakemono.webp");
background-size: 100% 100%;
}
.CtaBanner::after {
content: "";
position: absolute;
background-size: auto 100%;
}
@media (min-width: 880.1px) {
.CtaBanner::after {
right: calc(-40 * var(--px-to-size-in-base));
bottom: calc(-40 * var(--px-to-size-in-base));
width: calc(443 * var(--px-to-size-in-base));
height: calc(670 * var(--px-to-size-in-base));
background-image: url("../assets/common/cta-image01-pc.webp");
}
}
@media (max-width: 880px) {
.CtaBanner::after {
right: calc(-40 * var(--px-to-size-in-base));
top: calc(-55 * var(--px-to-size-in-base));
width: calc(400 * var(--px-to-size-in-base));
height: calc(600 * var(--px-to-size-in-base));
background-image: url("../assets/common/cta-image01-sp.webp");
}
}
.CtaBanner .CtaBanner__contact {
position: absolute;
display: flex;
left: max(87 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp));
top: max(312 * var(--px-to-size-in-base) * var(--is-pc), 590 * var(--px-to-size-in-base) * var(--is-sp));
gap: max(40 * var(--px-to-size-in-base) * var(--is-pc), 20 * var(--px-to-size-in-base) * var(--is-sp));
}
.CtaBannerPhone {
position: absolute;
top: calc(750 * var(--px-to-size-in-base));
left: calc(40 * var(--px-to-size-in-base));
width: calc(620 * var(--px-to-size-in-base));
height: calc(110 * var(--px-to-size-in-base));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: calc(16 * var(--px-to-size-in-base));
background: linear-gradient(to bottom, #f2ead9, #e9deb7);
line-height: 1;
}
@media (min-width: 880.1px) {
.CtaBannerPhone {
display: none;
}
}
.CtaBannerPhone .CtaBannerPhone__number {
font-size: calc(56 * var(--px-to-size-in-base));
font-weight: bold;
font-family: Arial, sans-serif;
display: flex;
align-items: center;
}
.CtaBannerPhone .CtaBannerPhone__number::before {
content: "";
aspect-ratio: var(--svg-icon-phone-ratio);
width: auto;
height: 0.8em;
background-color: currentcolor;
-webkit-mask: var(--svg-icon-phone-url) no-repeat center/contain;
mask: var(--svg-icon-phone-url) no-repeat center/contain;
margin-right: 0.15em;
}
.CtaBannerPhone .CtaBannerPhone__text {
font-size: calc(20 * var(--px-to-size-in-base));
}
.CTABannerB {
container-type: inline-size;
}
@media (min-width: 880.1px) {
.CTABannerB {
--px: calc(100cqw / 860);
}
}
@media (max-width: 880px) {
.CTABannerB {
--px: calc(100cqw / 700);
}
}
.CTABannerB .CTABannerB__inner {
display: flow-root;
position: relative;
z-index: 1;
background-color: #d5b46f;
font-size: calc(18 * var(--px));
}
@media (min-width: 880.1px) {
.CTABannerB .CTABannerB__inner {
aspect-ratio: 860/340;
border-radius: calc(16 * var(--px));
}
}
@media (max-width: 880px) {
.CTABannerB .CTABannerB__inner {
aspect-ratio: 700/600;
border-radius: calc(20 * var(--px));
}
}
.CTABannerB .CTABannerB__inner::before {
content: "";
position: absolute;
aspect-ratio: 360/100;
background-image: url("../assets/common/cta-b-photos.webp");
background-size: 100%;
}
@media (min-width: 880.1px) {
.CTABannerB .CTABannerB__inner::before {
left: calc(40 * var(--px));
top: calc(-50 * var(--px));
width: calc(360 * var(--px));
}
}
@media (max-width: 880px) {
.CTABannerB .CTABannerB__inner::before {
top: calc(-40 * var(--px));
left: 0;
right: 0;
margin: auto;
width: calc(480 * var(--px));
}
}
.CTABannerB .CTABannerB__inner::after {
content: "";
position: absolute;
z-index: -1;
right: 0;
top: 0;
width: 44%;
height: 100%;
background-image: url("../assets/common/logo-white.webp");
background-size: auto 120%;
background-position: 0% 50%;
opacity: 0.15;
}
@media (max-width: 880px) {
.CTABannerB .CTABannerB__inner::after {
width: 75%;
background-size: auto 110%;
background-position: 0% 70%;
}
}
.CTABannerB .CTABannerB__text1 {
display: flex;
align-items: end;
justify-content: center;
line-height: 1;
color: #fff;
text-shadow: calc(2 * var(--px)) calc(3 * var(--px)) calc(3 * var(--px)) rgba(157, 121, 48, 0.3);
letter-spacing: 0;
text-align: left;
font-weight: bold;
}
@media (min-width: 880.1px) {
.CTABannerB .CTABannerB__text1 {
margin-top: calc(30 * var(--px));
font-size: calc(32 * var(--px));
}
}
@media (max-width: 880px) {
.CTABannerB .CTABannerB__text1 {
margin-top: calc(95 * var(--px));
font-size: calc(42 * var(--px));
}
}
.CTABannerB .CTABannerB__text1 strong {
font-size: 200%;
letter-spacing: 0;
}
.CTABannerB .CTABannerB__text2 {
margin-top: calc(15 * var(--px));
font-size: calc(24 * var(--px));
line-height: 1.5;
font-weight: bold;
text-align: center;
}
@media (max-width: 880px) {
.CTABannerB .CTABannerB__text2 {
margin-top: calc(40 * var(--px));
font-size: calc(28 * var(--px));
}
}
.CTABannerB .CTABannerB__buttons {
margin-top: calc(10 * var(--px));
display: grid;
grid-template-columns: repeat(2, calc(360 * var(--px)));
justify-content: center;
gap: calc(10 * var(--px)) calc(40 * var(--px));
}
@media (max-width: 880px) {
.CTABannerB .CTABannerB__buttons {
margin-top: calc(20 * var(--px));
grid-template-columns: repeat(2, calc(300 * var(--px)));
gap: calc(20 * var(--px));
}
}
.CTABannerB .CTABannerB__buttons .ContactButton {
gap: 0.4em;
}
@media (min-width: 880.1px) {
.CTABannerB .CTABannerB__buttons .ContactButton {
height: calc(90 * var(--px));
border-radius: calc(12 * var(--px));
font-size: calc(28 * var(--px));
}
}
@media (max-width: 880px) {
.CTABannerB .CTABannerB__buttons .ContactButton {
height: calc(140 * var(--px));
font-size: calc(36 * var(--px));
border-radius: calc(16 * var(--px));
}
}
.CTABannerB .CTABannerB__buttons .ContactButton::before {
width: 2.2em;
height: 2.2em;
}
.CTABannerB .CTABannerB__buttons .CTABannerB__phone {
grid-column: span 2;
line-height: 1.1;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 880.1px) {
.CTABannerB .CTABannerB__buttons .CTABannerB__phone {
gap: calc(24 * var(--px));
pointer-events: none;
}
}
@media (max-width: 880px) {
.CTABannerB .CTABannerB__buttons .CTABannerB__phone {
height: calc(110 * var(--px));
flex-direction: column;
border-radius: calc(16 * var(--px));
background: linear-gradient(to bottom, #f2ead9, #e9deb7);
}
}
.CTABannerB .CTABannerB__buttons .CTABannerB__phone span {
font-family: var(--font-family-deco);
font-weight: bold;
font-size: calc(56 * var(--px));
letter-spacing: 0;
display: flex;
align-items: center;
gap: 0.15em;
}
.CTABannerB .CTABannerB__buttons .CTABannerB__phone span::before {
content: "";
aspect-ratio: var(--svg-icon-phone-ratio);
width: auto;
height: 0.7em;
background-color: currentcolor;
-webkit-mask-image: var(--svg-icon-phone-url);
mask-image: var(--svg-icon-phone-url);
}
.CTABannerB .CTABannerB__buttons .CTABannerB__phone small {
font-size: calc(18 * var(--px));
}
@media (max-width: 880px) {
.CTABannerB .CTABannerB__buttons .CTABannerB__phone small {
font-size: calc(20 * var(--px));
}
}
.AreaMap {
container-type: inline-size;
background-color: #c7e2f0;
}
@media (min-width: 880.1px) {
.AreaMap {
--px: min(100cqw / 860, 1px);
--font-size-dt: calc(20 * var(--px));
--font-size-dd: calc(18 * var(--px));
}
}
@media (max-width: 880px) {
.AreaMap {
--px: min(100cqw / 700, 1px);
--font-size-dt: calc(32 * var(--px));
--font-size-dd: calc(28 * var(--px));
}
}
.AreaMap dl {
position: relative;
margin-inline: auto;
background-size: 100% 100%;
}
@media (min-width: 880.1px) {
.AreaMap dl {
aspect-ratio: 860/400;
width: calc(860 * var(--px));
background-image: url("../assets/common/area-map-pc.svg");
}
}
@media (max-width: 880px) {
.AreaMap dl {
aspect-ratio: 700/760;
width: calc(700 * var(--px));
background-image: url("../assets/common/area-map-sp.svg");
}
}
.AreaMap .AreaMap__area {
position: absolute;
line-height: 1.2;
left: calc(var(--x) * var(--px));
top: calc(var(--y) * var(--px));
}
@media (min-width: 880.1px) {
.AreaMap .AreaMap__area {
padding: calc(15 * var(--px)) 0 0 calc(18 * var(--px));
}
}
@media (max-width: 880px) {
.AreaMap .AreaMap__area {
padding: calc(15 * var(--px)) 0 0 calc(15 * var(--px));
}
}
.AreaMap .AreaMap__area dt {
font-size: var(--font-size-dt);
font-weight: bold;
}
.AreaMap .AreaMap__area dd {
margin-top: 0.8em;
font-size: var(--font-size-dd);
}
.AreaMap .AreaMap__area ul {
display: grid;
grid-template-columns: repeat(var(--cols, 1), auto);
gap: 0.5em 2em;
}
@media (max-width: 880px) {
.AreaMap .AreaMap__area ul {
gap: 0.5em 0.8em;
}
}
.AreaMap .AreaMap__area ul li {
display: flex;
align-items: baseline;
gap: 0.3em;
}
.AreaMap .AreaMap__area ul li::before {
content: "";
width: 0.66em;
height: 0.66em;
border-radius: 50%;
background-color: var(--disc-color, var(--color-line));
}
.AreaMap .AreaMap__area.--tohoku {
--disc-color: #6784ad;
--x: 220;
--y: 32;
}
@media (max-width: 880px) {
.AreaMap .AreaMap__area.--tohoku {
--x: 40;
--y: 40;
--cols: 2;
}
}
.AreaMap .AreaMap__area.--kitakanto {
--disc-color: #f2a4a4;
--x: 591;
--y: 53;
}
@media (max-width: 880px) {
.AreaMap .AreaMap__area.--kitakanto {
--x: 505;
--y: 296;
}
.AreaMap .AreaMap__area.--kitakanto dt {
width: 3.5em;
}
}
.AreaMap .AreaMap__area.--kanto {
--disc-color: #d81313;
--x: 560;
--y: 207;
--cols: 2;
}
@media (max-width: 880px) {
.AreaMap .AreaMap__area.--kanto {
--x: 194;
--y: 540;
--cols: 3;
}
}
.AreaMap .AreaMap__area.--koshinetsu {
--disc-color: #d5b46f;
--x: 40;
--y: 155;
}
@media (max-width: 880px) {
.AreaMap .AreaMap__area.--koshinetsu {
--x: 40;
--y: 248;
}
.AreaMap .AreaMap__area.--koshinetsu dt {
width: 3.5em;
}
}
.FlowSteps {
margin-inline: auto;
width: var(--content-width);
--width: mypx(1200, 700);
--gap: max(60 * var(--px-to-size-in-base) * var(--is-pc), 110 * var(--px-to-size-in-base) * var(--is-sp));
--image-aspect-ratio: 360 / 240;
--arrow-width: calc(38 * var(--px-to-size-in-base));
--arrow-top: calc(110 * var(--px-to-size-in-base));
width: var(--width);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
}
.FlowSteps.--width-860 {
--width: mypx(860, 700);
--gap: max(43 * var(--px-to-size-in-base) * var(--is-pc), 110 * var(--px-to-size-in-base) * var(--is-sp));
--arrow-width: calc(30 * var(--px-to-size-in-base));
--arrow-top: calc(80 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.FlowSteps {
grid-template-columns: 100%;
}
}
.FlowSteps .FlowSteps__item {
position: relative;
}
@media (max-width: 880px) {
.FlowSteps .FlowSteps__item {
display: grid;
grid-template-columns: calc(320 * var(--px-to-size-in-base)) auto;
gap: 0 calc(50 * var(--px-to-size-in-base));
}
}
.FlowSteps .FlowSteps__item:not(:first-child)::before {
content: "";
position: absolute;
aspect-ratio: 38/26;
background-image: url("../assets/common/double-arrow-right.svg");
background-size: 100% 100%;
}
@media (min-width: 880.1px) {
.FlowSteps .FlowSteps__item:not(:first-child)::before {
width: var(--arrow-width);
height: auto;
right: calc(100% + var(--gap) / 2 - var(--arrow-width) / 2);
top: var(--arrow-top);
}
}
@media (max-width: 880px) {
.FlowSteps .FlowSteps__item:not(:first-child)::before {
--height: calc(35 * var(--px-to-size-in-base));
rotate: 90deg;
width: auto;
height: var(--height);
bottom: calc(100% + var(--gap) / 2 - var(--height) / 2);
left: 50%;
translate: -50% 0;
}
}
.FlowSteps .FlowSteps__item img {
aspect-ratio: var(--image-aspect-ratio);
width: 100%;
}
@media (max-width: 880px) {
.FlowSteps .FlowSteps__item img {
grid-row: span 3;
}
}
.FlowSteps .FlowSteps__item dt {
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
}
@media (min-width: 880.1px) {
.FlowSteps .FlowSteps__item dt {
margin-top: 0.8em;
}
}
.FlowSteps .FlowSteps__item dd {
margin-top: 0.5em;
}
.FlowCertificate {
margin-inline: auto;
width: var(--content-width);
--columns: 4;
position: relative;
padding: calc(30 * var(--px-to-size-in-base));
background-color: #fff;
}
.FlowCertificate:where(.--width-860) {
--columns: 3;
width: max(860 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
}
.FlowCertificate.--bg-gray {
background-color: var(--color-bg-gray);
}
@media (max-width: 880px) {
.FlowCertificate {
--columns: 2;
}
}
.FlowCertificate .FlowCertificate__heading {
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
}
.FlowCertificate .FlowCertificate__list {
margin-top: 1em;
display: grid;
width: -moz-fit-content;
width: fit-content;
grid-template-columns: repeat(var(--columns), 1fr);
gap: 0.5em 1em;
}
@media (max-width: 880px) {
.FlowCertificate .FlowCertificate__list {
width: auto;
gap: 0 1em;
}
}
.FlowCertificate .FlowCertificate__list li {
display: flex;
align-items: center;
gap: 0.3em;
}
.FlowCertificate .FlowCertificate__list li::before {
content: "";
width: 0.66em;
height: 0.66em;
border-radius: 50%;
background-color: var(--color-primary);
}
.FlowCertificate .FlowCertificate__image {
position: absolute;
top: calc(50% - 53 * var(--px-to-size-in-base));
right: calc(70 * var(--px-to-size-in-base));
width: auto;
height: calc(106 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.FlowCertificate .FlowCertificate__image {
top: calc(40 * var(--px-to-size-in-base));
right: calc(40 * var(--px-to-size-in-base));
}
}
.PageHeader {
position: relative;
overflow: hidden;
z-index: 1;
width: 100%;
height: max(420 * var(--px-to-size-in-base) * var(--is-pc), 400 * var(--px-to-size-in-base) * var(--is-sp));
color: #fff;
background-color: var(--color-primary);
}
.PageHeader .PageHeader__title {
padding-top: calc(200 * var(--px-to-size-in-base));
text-align: center;
font-size: max(60 * var(--px-to-size-in-base) * var(--is-pc), 64 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
}
.PageHeader::before {
content: "";
position: absolute;
z-index: -1;
bottom: 0;
aspect-ratio: 1110/792;
height: auto;
background-image: url("../assets/common/page-title-logo.webp");
background-size: 100% 100%;
}
@media (min-width: 880.1px) {
.PageHeader::before {
right: calc(50% + 200 * var(--px-to-size-in-base));
width: calc(555 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.PageHeader::before {
left: calc(50% - 20 * var(--px-to-size-in-base));
width: calc(460 * var(--px-to-size-in-base));
}
}
.PageHeader::after {
content: "";
position: absolute;
z-index: -1;
left: calc(50% + 300 * var(--px-to-size-in-base));
bottom: calc(5 * var(--px-to-size-in-base));
aspect-ratio: 1080/815;
width: calc(555 * var(--px-to-size-in-base));
height: auto;
background-image: url("../assets/common/page-title-twinkles.webp");
background-size: 100% 100%;
}
@media (max-width: 880px) {
.PageHeader::after {
display: none;
}
}
.PageHeaderGenre {
--bottom-height: max(140 * var(--px-to-size-in-base) * var(--is-pc), 160 * var(--px-to-size-in-base) * var(--is-sp));
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
height: max(520 * var(--px-to-size-in-base) * var(--is-pc), 1000 * var(--px-to-size-in-base) * var(--is-sp));
color: #fff;
background-color: var(--color-primary);
background-image: linear-gradient(#c40400, #c40400);
background-size: 100% var(--bottom-height);
background-position: 0 100%;
}
.PageHeaderGenre::before {
content: "";
position: absolute;
z-index: -1;
aspect-ratio: 1;
height: auto;
background-image: url("../assets/common/logo-white.webp");
background-size: 100% 100%;
opacity: 0.1;
}
@media (min-width: 880.1px) {
.PageHeaderGenre::before {
right: calc(50% + 360 * var(--px-to-size-in-base));
bottom: calc(-10 * var(--px-to-size-in-base));
width: calc(510 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.PageHeaderGenre::before {
left: calc(50% - 20 * var(--px-to-size-in-base));
width: calc(460 * var(--px-to-size-in-base));
}
}
.PageHeaderGenre .PageHeaderGenre__content {
position: relative;
margin-inline: auto;
width: var(--content-width);
height: 100%;
}
@media (max-width: 880px) {
.PageHeaderGenre .PageHeaderGenre__content {
width: 100%;
}
}
.PageHeaderGenre .PageHeaderGenre__hgroup {
position: absolute;
z-index: 1;
bottom: var(--bottom-height);
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media (min-width: 880.1px) {
.PageHeaderGenre .PageHeaderGenre__hgroup {
width: 66.667%;
height: calc(280 * var(--px-to-size-in-base));
gap: calc(20 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.PageHeaderGenre .PageHeaderGenre__hgroup {
width: 100%;
height: calc(360 * var(--px-to-size-in-base));
gap: calc(40 * var(--px-to-size-in-base));
}
}
.PageHeaderGenre .PageHeaderGenre__hgroup .PageHeaderGenre__title {
font-size: max(76 * var(--px-to-size-in-base) * var(--is-pc), 80 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
line-height: 1.1;
}
.PageHeaderGenre .PageHeaderGenre__hgroup .PageHeaderGenre__catch img {
width: max(799 * var(--px-to-size-in-base) * var(--is-pc), 500 * var(--px-to-size-in-base) * var(--is-sp));
height: auto;
}
.PageHeaderGenre .PageHeaderGenre__points {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
height: var(--bottom-height);
display: flex;
justify-content: center;
}
@media (min-width: 880.1px) {
.PageHeaderGenre .PageHeaderGenre__points {
width: 66.667%;
}
}
@media (max-width: 880px) {
.PageHeaderGenre .PageHeaderGenre__points {
width: 100%;
}
}
.PageHeaderGenre .PageHeaderGenre__points img {
width: 100%;
height: auto;
}
.PageHeaderGenre .PageHeaderGenre__image {
position: absolute;
aspect-ratio: 740/500;
height: auto;
max-width: none;
}
@media (min-width: 880.1px) {
.PageHeaderGenre .PageHeaderGenre__image {
bottom: 0;
left: 58%;
width: calc(740 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.PageHeaderGenre .PageHeaderGenre__image {
top: calc(10 * var(--px-to-size-in-base));
left: 0;
right: 0;
margin: auto;
width: calc(740 * var(--px-to-size-in-base));
}
}
.Topicpath {
margin-top: calc(30 * var(--px-to-size-in-base));
margin-inline: auto;
padding-inline: var(--site-gutter);
width: calc(var(--content-width) + var(--site-gutter) * 2);
display: flex;
align-items: center;
font-size: max(14 * var(--px-to-size-in-base) * var(--is-pc), 20 * var(--px-to-size-in-base) * var(--is-sp));
gap: 0.5em;
white-space: nowrap;
overflow-x: auto;
-webkit-mask-image: linear-gradient(to right, transparent, transparent calc(var(--site-gutter) / 3), black var(--site-gutter), black calc(100% - var(--site-gutter)), transparent calc(100% - var(--site-gutter) / 3), transparent);
mask-image: linear-gradient(to right, transparent, transparent calc(var(--site-gutter) / 3), black var(--site-gutter), black calc(100% - var(--site-gutter)), transparent calc(100% - var(--site-gutter) / 3), transparent);
scrollbar-width: none;
}
.Topicpath::-webkit-scrollbar {
display: none;
}
.Topicpath .Topicpath__link {
color: var(--color-primary);
}
.Topicpath .Topicpath__arrow {
background-color: var(--color-text-gray);
aspect-ratio: var(--svg-icon-right-thin-ratio);
-webkit-mask: var(--svg-icon-right-thin-url);
mask: var(--svg-icon-right-thin-url);
width: auto;
height: 0.5714285714em;
}
.HomeHero {
--slide-width: min(var(--viewport-width) - var(--site-gutter) * 2, 1600px);
--slide-height: calc(var(--slide-width) / (var(--slide-radio)));
margin-top: calc(var(--site-header-height) + max(60 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp)));
position: relative;
overflow: hidden;
}
@media (min-width: 880.1px) {
.HomeHero {
--slide-radio: 16 / 5;
--slide-gap: calc(20 * var(--px-to-size-in-base));
}
}
@media (min-width: 880.1px) and (min-width: 1780px) {
.HomeHero {
--slide-gap: calc(60 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.HomeHero {
--slide-radio: 7 / 5;
--slide-gap: calc(20 * var(--px-to-size-in-base));
}
}
.HomeHero .HomeHero__item {
display: block;
width: var(--slide-width);
height: var(--slide-height);
border-radius: calc(20 * var(--px-to-size-in-base));
contain: paint;
transition: filter 0.1s;
}
.HomeHero .HomeHero__item:link:hover {
transition-duration: 0.3s;
filter: saturate(1.18) contrast(1.06) brightness(1.03);
}
.HomeHero .HomeHero__item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.HomeHero .HomeHero__single {
margin-left: calc((100% - var(--slide-width)) / 2);
}
.HomeHero .HomeHero__placeholder {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: var(--slide-width);
height: var(--slide-height);
}
.HomeHero .HomeHero__viewport {
max-width: 2400px;
margin-inline: auto;
opacity: 0;
}
.HomeHero.--initialized .HomeHero__placeholder {
display: none;
}
.HomeHero.--initialized .HomeHero__viewport {
opacity: 1;
}
.HomeHero .HomeHero__container {
display: flex;
margin-left: calc(var(--slide-gap) / -1);
}
.HomeHero .HomeHero__slide {
box-sizing: content-box;
flex: 0 0 var(--slide-width);
padding-left: var(--slide-gap);
}
.HomeHero .HomeHero__controls {
margin-top: 1.25em;
margin-left: calc((100% - var(--slide-width)) / 2);
width: var(--slide-width);
display: flex;
align-items: center;
justify-content: end;
gap: 2.5em;
font-size: calc(16 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.HomeHero .HomeHero__controls {
font-size: calc(32 * var(--px-to-size-in-base));
gap: 2em;
}
}
.HomeHero .HomeHero__dots {
display: flex;
align-items: center;
gap: 1em;
}
@media (max-width: 880px) {
.HomeHero .HomeHero__dots {
gap: 0.8em;
}
}
.HomeHero .HomeHero__dots > button {
width: 1em;
height: 1em;
background-color: rgba(255, 255, 255, 0);
border-radius: 50%;
}
.HomeHero .HomeHero__dots > button::before {
content: "";
display: block;
width: 75%;
height: 75%;
border: 0.1em solid #fff;
border-radius: 50%;
}
.HomeHero .HomeHero__dots > button[aria-selected=true] {
background-color: rgb(255, 255, 255);
}
.HomeHero .HomeHero__arrows {
position: relative;
display: flex;
align-items: center;
height: 1.25em;
gap: 2.5em;
}
@media (max-width: 880px) {
.HomeHero .HomeHero__arrows {
gap: 2em;
}
}
.HomeHero .HomeHero__arrows::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 0.05em;
background-color: #fff;
pointer-events: none;
}
.HomeHero .HomeHero__arrows > button {
aspect-ratio: 12/18;
width: auto;
height: 1.125em;
background-color: #fff;
}
.HomeHero .HomeHero__arrows > button.--prev {
-webkit-mask-image: var(--svg-icon-left-url);
mask-image: var(--svg-icon-left-url);
}
.HomeHero .HomeHero__arrows > button.--next {
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
}
.HomeLeadBg {
position: relative;
overflow: hidden;
background-color: var(--color-primary);
color: #fff;
}
.HomeLeadBg::before, .HomeLeadBg::after {
content: "";
position: absolute;
height: auto;
background-size: 100% 100%;
pointer-events: none;
}
.HomeLeadBg::before {
top: max(50 * var(--px-to-size-in-base) * var(--is-pc), 180 * var(--px-to-size-in-base) * var(--is-sp));
right: calc(50% + max(520 * var(--px-to-size-in-base) * var(--is-pc), 245 * var(--px-to-size-in-base) * var(--is-sp)));
aspect-ratio: 818/1498;
width: max(409 * var(--px-to-size-in-base) * var(--is-pc), 205 * var(--px-to-size-in-base) * var(--is-sp));
background-image: url("../assets/home/lead-bg1.webp");
}
.HomeLeadBg::after {
top: max(280 * var(--px-to-size-in-base) * var(--is-pc), 180 * var(--px-to-size-in-base) * var(--is-sp));
left: calc(50% + max(380 * var(--px-to-size-in-base) * var(--is-pc), 190 * var(--px-to-size-in-base) * var(--is-sp)));
aspect-ratio: 1394/1892;
width: max(697 * var(--px-to-size-in-base) * var(--is-pc), 349 * var(--px-to-size-in-base) * var(--is-sp));
background-image: url("../assets/home/lead-bg2.webp");
}
.HomeBanners {
position: relative;
z-index: 1;
margin-top: max(25 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp));
display: grid;
grid-template-columns: max(960 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
justify-content: center;
gap: calc(20 * var(--px-to-size-in-base));
}
.HomeBanners a {
--filter: none;
--transition: filter 0.1s;
}
.HomeBanners a:hover {
--filter: saturate(1.18) contrast(1.06) brightness(1.03);
--transition: filter 0.3s;
}
.HomeBanners a img {
width: 100%;
height: auto;
border-radius: calc(10 * var(--px-to-size-in-base));
filter: var(--filter);
transition: var(--transition);
}
.HomeLead {
margin-inline: auto;
width: var(--content-width);
max-width: calc(960 * var(--px-to-size-in-base));
margin-top: calc(65 * var(--px-to-size-in-base));
}
.HomeLeadText {
position: relative;
z-index: 1;
margin-top: calc(65 * var(--px-to-size-in-base));
margin-inline: auto;
width: max(960 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
}
.HomeLeadText .HomeLeadText__1 {
font-size: max(32 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5em;
font-weight: bold;
text-align: center;
}
.HomeLeadText .HomeLeadText__1 strong {
font-size: 150%;
}
.HomeLeadText .HomeLeadText__2 {
margin-top: max(0 * var(--px-to-size-in-base) * var(--is-pc), 30 * var(--px-to-size-in-base) * var(--is-sp));
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
text-align: center;
}
.HomeLeadImage {
position: relative;
z-index: 1;
margin-block: max(30 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp)) calc(-80 * var(--px-to-size-in-base));
margin-inline: auto;
width: max(960 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
height: auto;
}
.HomeLeadBg2 {
padding-block: calc(114 * var(--px-to-size-in-base)) calc(100 * var(--px-to-size-in-base));
background-color: #cc0601;
}
.HomeLeadText2 {
position: relative;
z-index: 1;
margin-inline: auto;
width: max(960 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
}
.HomeSurprise {
margin-inline: auto;
width: var(--content-width);
position: relative;
z-index: 1;
margin-top: calc(60 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.HomeSurprise {
margin-top: calc(40 * var(--px-to-size-in-base));
}
}
.HomeSurprise .HomeSurprise__box {
position: relative;
padding: calc(40 * var(--px-to-size-in-base));
background-color: #fff;
color: var(--color-black);
}
.HomeSurprise .HomeSurprise__box::before {
content: "";
position: absolute;
inset: calc(10 * var(--px-to-size-in-base));
border: max(2 * var(--px-to-size-in-base) * var(--is-pc), 4 * var(--px-to-size-in-base) * var(--is-sp)) solid var(--color-primary);
pointer-events: none;
}
.HomeSurprise .HomeSurprise__box .HomeSurprise__heading {
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.2;
font-weight: bold;
text-align: center;
}
.HomeSurprise .HomeSurprise__box .HomeSurprise__heading h2 {
font-size: 150%;
}
.HomeSurprise .HomeSurprise__artcles {
margin-top: max(20 * var(--px-to-size-in-base) * var(--is-pc), 30 * var(--px-to-size-in-base) * var(--is-sp));
display: grid;
}
@media (min-width: 880.1px) {
.HomeSurprise .HomeSurprise__artcles {
grid-template-columns: repeat(5, 1fr);
gap: calc(20 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.HomeSurprise .HomeSurprise__artcles {
grid-template-columns: 100%;
gap: calc(30 * var(--px-to-size-in-base));
}
}
.HomeSurpriseArticle {
display: grid;
gap: calc(10 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.HomeSurpriseArticle {
grid-template-columns: calc(200 * var(--px-to-size-in-base)) auto;
gap: calc(10 * var(--px-to-size-in-base)) calc(30 * var(--px-to-size-in-base));
}
}
.HomeSurpriseArticle .HomeSurpriseArticle__image {
position: relative;
}
@media (max-width: 880px) {
.HomeSurpriseArticle .HomeSurpriseArticle__image {
grid-row: span 2;
}
}
.HomeSurpriseArticle .HomeSurpriseArticle__image img {
aspect-ratio: 1;
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
}
.HomeSurpriseArticle .HomeSurpriseArticle__image::after {
content: "買取";
font-size: calc(32 * var(--px-to-size-in-base));
line-height: 1.1;
text-align: center;
font-weight: bold;
color: var(--color-primary);
border: 0.1em solid currentcolor;
padding-block: 0.2em;
width: 1.5em;
position: absolute;
right: 0;
bottom: 0;
rotate: -15deg;
}
.HomeSurpriseArticle .HomeSurpriseArticle__title {
font-weight: bold;
line-height: 1.5;
}
@media (min-width: 880.1px) {
.HomeSurpriseArticle .HomeSurpriseArticle__title {
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
text-align: center;
}
}
.HomeSurpriseArticle .HomeSurpriseArticle__text {
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
@media (max-width: 880px) {
.HomeSurpriseArticle .HomeSurpriseArticle__text {
grid-row: span 3;
}
}
.HomeNayami {
margin-inline: auto;
width: var(--content-width);
position: relative;
z-index: 2;
}
.HomeNayami .HomeNayami__heading {
font-size: max(28 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
text-align: center;
}
.HomeNayami .HomeNayami__heading em {
font-size: max(42 * var(--px-to-size-in-base) * var(--is-pc), 56 * var(--px-to-size-in-base) * var(--is-sp));
}
.HomeNayami .HomeNayami__nav {
display: grid;
margin-top: max(60 * var(--px-to-size-in-base) * var(--is-pc), 80 * var(--px-to-size-in-base) * var(--is-sp));
}
@media (min-width: 880.1px) {
.HomeNayami .HomeNayami__nav {
grid-template-columns: repeat(4, 1fr);
gap: calc(24 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.HomeNayami .HomeNayami__nav {
grid-template-columns: repeat(2, 1fr);
gap: calc(30 * var(--px-to-size-in-base)) calc(20 * var(--px-to-size-in-base));
}
}
.HomeNayami .HomeNayami__nav > a {
--arrow-y: 0;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
gap: calc(5 * var(--px-to-size-in-base));
padding-bottom: calc(20 * var(--px-to-size-in-base));
line-height: 1.5;
font-weight: bold;
text-align: center;
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
border-radius: max(12 * var(--px-to-size-in-base) * var(--is-pc), 16 * var(--px-to-size-in-base) * var(--is-sp));
}
.HomeNayami .HomeNayami__nav > a:hover {
--arrow-y: 25%;
}
.HomeNayami .HomeNayami__nav > a > img {
margin-top: calc(-50 * var(--px-to-size-in-base));
aspect-ratio: 282/140;
width: 100%;
height: auto;
}
.HomeNayami .HomeNayami__nav > a::after {
content: "";
width: 1em;
height: auto;
background-color: var(--color-primary);
aspect-ratio: var(--svg-icon-down-ratio);
-webkit-mask-image: var(--svg-icon-down-url);
mask-image: var(--svg-icon-down-url);
transition: translate 0.3s;
translate: 0 var(--arrow-y);
}
.HomeNayami .HomeNayami__text {
margin: calc(40 * var(--px-to-size-in-base)) auto 0;
max-width: 960px;
}
.HomeNayami .HomeNayami__articles {
margin-top: calc(40 * var(--px-to-size-in-base));
display: grid;
gap: calc(30 * var(--px-to-size-in-base));
}
.HomeNayamiArticle {
padding: calc(40 * var(--px-to-size-in-base));
background-color: #fff;
display: flex;
}
@media (min-width: 880.1px) {
.HomeNayamiArticle {
gap: calc(40 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.HomeNayamiArticle {
flex-direction: column;
align-items: center;
gap: calc(20 * var(--px-to-size-in-base));
}
}
.HomeNayamiArticle .HomeNayamiArticle__heading {
display: flex;
align-items: center;
gap: calc(10 * var(--px-to-size-in-base));
font-size: calc(32 * var(--px-to-size-in-base));
line-height: 1.5;
font-weight: bold;
}
@media (max-width: 880px) {
.HomeNayamiArticle .HomeNayamiArticle__heading {
flex-direction: column;
gap: calc(5 * var(--px-to-size-in-base));
}
}
.HomeNayamiArticle .HomeNayamiArticle__heading span {
font-size: 87.5%;
line-height: 1;
display: grid;
grid-template: 1.57em/repeat(3, 1.57em);
gap: 0.15em;
}
.HomeNayamiArticle .HomeNayamiArticle__heading span i {
background-color: var(--color-black);
color: #fff;
display: grid;
place-content: center;
}
.HomeNayamiArticle .HomeNayamiArticle__solution0 {
margin-top: 1em;
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
color: var(--color-primary);
display: flex;
align-items: center;
gap: 0.5em;
}
@media (max-width: 880px) {
.HomeNayamiArticle .HomeNayamiArticle__solution0 {
justify-content: center;
}
}
.HomeNayamiArticle .HomeNayamiArticle__solution0::before {
content: "";
aspect-ratio: 38/26;
background-image: url("../assets/common/double-arrow-right.svg");
background-size: 100% 100%;
width: auto;
height: 1.1em;
}
.HomeNayamiArticle .HomeNayamiArticle__solution1 {
margin-top: calc(10 * var(--px-to-size-in-base));
font-size: calc(36 * var(--px-to-size-in-base));
line-height: 1.5;
font-weight: bold;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2em;
}
@media (max-width: 880px) {
.HomeNayamiArticle .HomeNayamiArticle__solution1 {
align-items: center;
}
}
.HomeNayamiArticle .HomeNayamiArticle__solution1 span {
padding: 0 0.4em;
background-color: var(--color-primary);
color: #fff;
white-space: nowrap;
}
.HomeNayamiArticle .HomeNayamiArticle__solution2 {
margin-top: max(20 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
@media (min-width: 880.1px) {
.HomeNayamiArticle .HomeNayamiArticle__image {
flex: 0 0 calc(320 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.HomeNayamiArticle .HomeNayamiArticle__image {
width: calc(320 * var(--px-to-size-in-base));
}
}
.HomeNayamiArticle .HomeNayamiArticle__image img {
width: 100%;
height: auto;
}
.HomeNayamiCta {
margin: calc(60 * var(--px-to-size-in-base)) auto calc(-200 * var(--px-to-size-in-base));
width: max(1200 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
}
.HomeNayamiCta .HomeNayamiCta__heading {
margin-bottom: calc(40 * var(--px-to-size-in-base));
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.HomeNayamiCta .HomeNayamiCta__heading h3 {
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
}
.HomeNayamiCta .HomeNayamiCta__heading h3 strong {
font-size: 150%;
}
.HomeNayamiCta .HomeNayamiCta__heading::after {
content: "";
margin-top: calc(10 * var(--px-to-size-in-base));
width: calc(26 * var(--px-to-size-in-base));
height: calc(38 * var(--px-to-size-in-base));
background-image: url("../assets/common/double-arrow-down.svg");
}
.HomeReasonsWrap {
position: relative;
z-index: 1;
overflow: hidden;
padding-block: calc(160 * var(--px-to-size-in-base)) calc(100 * var(--px-to-size-in-base));
background-color: var(--color-primary);
color: #fff;
}
.HomeReasonsBgPhotos {
--bottom: calc(180 * var(--px-to-size-in-base));
--item-width: calc(500 * var(--px-to-size-in-base));
--item-left-left: calc(-160 * var(--px-to-size-in-base));
--item-right-right: calc(-200 * var(--px-to-size-in-base));
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: var(--bottom);
margin-inline: auto;
width: 100%;
max-width: 1920px;
pointer-events: none;
}
@media (max-width: 1650px) {
.HomeReasonsBgPhotos {
--bottom: calc(-560 * var(--px-to-size-in-base));
--item-width: calc(450 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.HomeReasonsBgPhotos {
--bottom: calc(-140 * var(--px-to-size-in-base));
--item-width: calc(350 * var(--px-to-size-in-base));
--item-left-left: calc(-110 * var(--px-to-size-in-base));
--item-right-right: calc(-140 * var(--px-to-size-in-base));
}
}
.HomeReasonsBgPhotos .HomeReasonsBgPhotos__image {
position: absolute;
bottom: 0;
aspect-ratio: 500/1375;
width: var(--item-width);
height: auto;
}
.HomeReasonsBgPhotos .HomeReasonsBgPhotos__image.-left {
left: var(--item-left-left);
}
.HomeReasonsBgPhotos .HomeReasonsBgPhotos__image.-right {
right: var(--item-right-right);
}
.HomeReasons {
margin-inline: auto;
width: var(--content-width);
}
.HomeReasons .HomeReasons__heading {
font-size: max(32 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
text-align: center;
}
.HomeReasons .HomeReasons__heading em {
font-size: 150%;
}
.HomeReasons .HomeReasons__text {
margin: calc(30 * var(--px-to-size-in-base)) auto 0;
max-width: calc(960 * var(--px-to-size-in-base));
}
.HomeReasons .HomeReasons__strengthsHeading {
margin-top: calc(50 * var(--px-to-size-in-base));
font-size: calc(40 * var(--px-to-size-in-base));
line-height: 1.5em;
font-weight: bold;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: calc(20 * var(--px-to-size-in-base));
}
.HomeReasons .HomeReasons__strengthsHeading::before, .HomeReasons .HomeReasons__strengthsHeading::after {
content: "";
width: calc(39 * var(--px-to-size-in-base));
height: calc(62 * var(--px-to-size-in-base));
background-image: url("../assets/home/reasons-strengths-deco.svg");
background-size: 100% 100%;
}
.HomeReasons .HomeReasons__strengthsHeading::after {
scale: -1 1;
}
.HomeReasons .HomeReasons__strengthsHeading span em {
font-size: 160%;
}
.HomeReasonsStrengths {
margin-top: calc(80 * var(--px-to-size-in-base));
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: calc(60 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.HomeReasonsStrengths {
gap: calc(80 * var(--px-to-size-in-base)) calc(60 * var(--px-to-size-in-base));
}
}
.HomeReasonsStrengths .HomeReasonsStrengths__item {
width: max(360 * var(--px-to-size-in-base) * var(--is-pc), 320 * var(--px-to-size-in-base) * var(--is-sp));
counter-increment: strength-number;
}
.HomeReasonsStrengths .HomeReasonsStrengths__item > dt {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: calc(25 * var(--px-to-size-in-base));
}
.HomeReasonsStrengths .HomeReasonsStrengths__item > dt::before {
position: absolute;
left: 0;
top: calc(-39 * var(--px-to-size-in-base));
content: counter(strength-number, decimal-leading-zero);
color: #fff;
font-family: Arial, sans-serif;
font-size: calc(96 * var(--px-to-size-in-base));
line-height: 1;
font-weight: bold;
opacity: 0.3;
}
.HomeReasonsStrengths .HomeReasonsStrengths__item > dt > img {
position: relative;
aspect-ratio: 1;
width: calc(280 * var(--px-to-size-in-base));
height: auto;
border-radius: 50%;
}
.HomeReasonsStrengths .HomeReasonsStrengths__item > dt > div {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: calc(4 * var(--px-to-size-in-base));
}
.HomeReasonsStrengths .HomeReasonsStrengths__item > dt > div > span {
padding: 0 0.6em;
background-color: #fff;
color: var(--color-primary);
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.6;
font-weight: bold;
}
.HomeReasonsStrengths .HomeReasonsStrengths__item > dd {
margin-top: calc(12 * var(--px-to-size-in-base));
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
.HomeGenreWrap {
position: relative;
z-index: 1;
padding-block: calc(60 * var(--px-to-size-in-base)) calc(100 * var(--px-to-size-in-base));
background-color: var(--color-bg-pink);
color: var(--color-black);
}
.HomeGenreDecoration {
--offset: -0.2em;
overflow: hidden;
position: absolute;
z-index: -1;
inset: 0;
font-size: calc(96 * var(--px-to-size-in-base));
line-height: 1;
font-family: var(--font-family-deco);
font-weight: bold;
color: #fff;
opacity: 0.3;
pointer-events: none;
}
.HomeGenreDecoration > span {
position: absolute;
overflow: hidden;
white-space: nowrap;
letter-spacing: 0;
text-indent: calc(1em + var(--offset));
}
.HomeGenreDecoration > span small {
font-size: 66.6666666667%;
}
.HomeGenreDecoration > span:nth-child(1) {
top: var(--offset);
left: 0;
right: 0;
}
.HomeGenreDecoration > span:nth-child(2) {
right: var(--offset);
top: 0;
bottom: 0;
writing-mode: vertical-rl;
text-orientation: sideways;
}
.HomeGenreDecoration > span:nth-child(3) {
bottom: var(--offset);
left: 0;
right: 0;
rotate: 180deg;
}
.HomeGenreDecoration > span:nth-child(4) {
left: var(--offset);
top: 0;
bottom: 0;
writing-mode: vertical-rl;
text-orientation: sideways;
rotate: 180deg;
}
.HomeGenre {
margin-inline: auto;
width: var(--content-width);
}
.HomeGenre .HomeGenre__text {
margin: calc(40 * var(--px-to-size-in-base)) auto 0;
max-width: calc(960 * var(--px-to-size-in-base));
}
.HomeCaseVoice {
margin-inline: auto;
width: var(--content-width);
position: relative;
margin-top: calc(60 * var(--px-to-size-in-base));
padding: calc(38 * var(--px-to-size-in-base)) calc(48 * var(--px-to-size-in-base)) calc(48 * var(--px-to-size-in-base));
background-color: var(--color-bg-gray);
}
@media (max-width: 880px) {
.HomeCaseVoice {
padding: calc(40 * var(--px-to-size-in-base));
}
}
.HomeCaseVoice::before {
content: "";
position: absolute;
inset: calc(10 * var(--px-to-size-in-base));
border: 2px solid #fff;
pointer-events: none;
}
.HomeCaseVoice .HomeCaseVoice__heaading {
font-weight: bold;
line-height: 1.2;
text-align: center;
}
.HomeCaseVoice .HomeCaseVoice__heaading p {
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
}
.HomeCaseVoice .HomeCaseVoice__heaading h3 {
font-size: max(32 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp));
}
.HomeCaseVoice .HomeCaseVoice__articles {
margin-top: calc(30 * var(--px-to-size-in-base));
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(30 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.HomeCaseVoice .HomeCaseVoice__articles {
grid-template-columns: 100%;
}
}
.HomeCaseVoice .HomeCaseVoice__articles > article {
background-color: #fff;
padding: calc(20 * var(--px-to-size-in-base));
counter-increment: voice-number;
}
.HomeCaseVoice .HomeCaseVoice__articles > article h4 {
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
line-height: 1.5;
height: 2.5em;
display: flex;
align-items: center;
gap: 0.3em;
padding-left: 3em;
background-size: 2.5em 2.5em;
background-image: url("../assets/home/case-voice-icon.svg");
}
.HomeCaseVoice .HomeCaseVoice__articles > article h4::before {
content: "CASE" counter(voice-number);
font-size: 83.33%;
color: var(--color-secondary-text);
}
.HomeCaseVoice .HomeCaseVoice__articles > article p {
margin-top: calc(10 * var(--px-to-size-in-base));
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
display: flex;
flex-direction: column;
gap: calc(4 * var(--px-to-size-in-base));
}
.HomeCaseVoice .HomeCaseVoice__articles > article p::before, .HomeCaseVoice .HomeCaseVoice__articles > article p::after {
content: "";
width: 1.875em;
height: 1.25em;
background-image: url("../assets/home/case-voice-quote.svg");
background-size: 100% 100%;
}
.HomeCaseVoice .HomeCaseVoice__articles > article p::after {
align-self: flex-end;
scale: -1;
}
.HomeFlowSteps {
--gap: max(60 * var(--px-to-size-in-base) * var(--is-pc), 110 * var(--px-to-size-in-base) * var(--is-sp));
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
}
@media (max-width: 880px) {
.HomeFlowSteps {
grid-template-columns: 100%;
}
}
.HomeFlowSteps .HomeFlowSteps__item {
position: relative;
}
@media (max-width: 880px) {
.HomeFlowSteps .HomeFlowSteps__item {
display: grid;
grid-template-columns: calc(320 * var(--px-to-size-in-base)) auto;
gap: 0 calc(50 * var(--px-to-size-in-base));
}
}
.HomeFlowSteps .HomeFlowSteps__item:not(:first-child)::before {
content: "";
position: absolute;
aspect-ratio: 38/26;
background-image: url("../assets/common/double-arrow-right.svg");
background-size: 100% 100%;
}
@media (min-width: 880.1px) {
.HomeFlowSteps .HomeFlowSteps__item:not(:first-child)::before {
--width: calc(38 * var(--px-to-size-in-base));
width: var(--width);
height: auto;
right: calc(100% + var(--gap) / 2 - var(--width) / 2);
top: calc(110 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.HomeFlowSteps .HomeFlowSteps__item:not(:first-child)::before {
--height: calc(35 * var(--px-to-size-in-base));
rotate: 90deg;
width: auto;
height: var(--height);
bottom: calc(100% + var(--gap) / 2 - var(--height) / 2);
left: 50%;
translate: -50% 0;
}
}
.HomeFlowSteps .HomeFlowSteps__item img {
aspect-ratio: 360/240;
width: 100%;
height: auto;
}
@media (max-width: 880px) {
.HomeFlowSteps .HomeFlowSteps__item img {
grid-row: span 3;
}
}
.HomeFlowSteps .HomeFlowSteps__item dt {
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
}
@media (min-width: 880.1px) {
.HomeFlowSteps .HomeFlowSteps__item dt {
margin-top: 0.8em;
}
}
.HomeFlowSteps .HomeFlowSteps__item dd {
margin-top: 0.5em;
}
.HomeFlowCertificate {
position: relative;
padding: calc(30 * var(--px-to-size-in-base));
background-color: #fff;
}
.HomeFlowCertificate h3 {
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
}
.HomeFlowCertificate ul {
margin-top: 1em;
display: grid;
width: -moz-fit-content;
width: fit-content;
grid-template-columns: repeat(4, 1fr);
gap: 0.5em 1em;
}
@media (max-width: 880px) {
.HomeFlowCertificate ul {
width: auto;
grid-template-columns: repeat(2, 1fr);
gap: 0 1em;
}
}
.HomeFlowCertificate ul li {
display: flex;
align-items: center;
gap: 0.3em;
}
.HomeFlowCertificate ul li::before {
content: "";
width: 0.66em;
height: 0.66em;
border-radius: 50%;
background-color: var(--color-primary);
}
.HomeFlowCertificate img {
position: absolute;
top: calc(50% - 53 * var(--px-to-size-in-base));
right: calc(70 * var(--px-to-size-in-base));
width: auto;
height: calc(106 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.HomeFlowCertificate img {
top: calc(40 * var(--px-to-size-in-base));
right: calc(40 * var(--px-to-size-in-base));
}
}
.HomeArea {
margin-bottom: calc(100 * var(--px-to-size-in-base));
margin-inline: auto;
width: max(1200 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
}
.HomeAreaCta {
margin-inline: auto;
width: var(--content-width);
margin-block: max(100 * var(--px-to-size-in-base) * var(--is-pc), 60 * var(--px-to-size-in-base) * var(--is-sp)) calc(-200 * var(--px-to-size-in-base));
}
.HomeAreaCta .HomeAreaCta__text1 {
text-align: center;
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
}
.HomeAreaCta .HomeAreaCta__text2 {
margin-top: calc(10 * var(--px-to-size-in-base));
text-align: center;
}
.HomeAreaCta .HomeAreaCta__text2::after {
content: "";
display: block;
margin: calc(10 * var(--px-to-size-in-base)) auto max(60 * var(--px-to-size-in-base) * var(--is-pc), 50 * var(--px-to-size-in-base) * var(--is-sp));
aspect-ratio: 26/38;
width: calc(26 * var(--px-to-size-in-base));
background-image: url("../assets/common/double-arrow-down.svg");
}
.HomeNewsList {
margin-top: calc(40 * var(--px-to-size-in-base));
margin-inline: auto;
width: max(1200 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
}
.GenreList {
display: grid;
gap: calc(20 * var(--px-to-size-in-base));
margin-inline: auto;
}
@media (min-width: 880.1px) {
.GenreList {
width: calc(1200 * var(--px-to-size-in-base));
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
}
}
@media (max-width: 880px) {
.GenreList {
width: calc(700 * var(--px-to-size-in-base));
grid-template-columns: 100%;
grid-auto-rows: auto;
}
}
.GenreList .GenreList__col .GenreList__item {
width: 100%;
height: 100%;
background-color: var(--color-bg-beige);
display: grid;
line-height: 1.2;
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 36 * var(--px-to-size-in-base) * var(--is-sp));
border-radius: max(12 * var(--px-to-size-in-base) * var(--is-pc), 16 * var(--px-to-size-in-base) * var(--is-sp));
transition: background-color 0.1s;
}
.GenreList .GenreList__col .GenreList__item:hover {
transition-duration: 0.3s;
background-color: rgb(var(--color-bg-beige-rgb)/0.5);
}
@media (min-width: 880.1px) {
.GenreList .GenreList__col .GenreList__item {
padding: calc(10 * var(--px-to-size-in-base)) calc(16 * var(--px-to-size-in-base)) calc(20 * var(--px-to-size-in-base));
grid-template: calc(120 * var(--px-to-size-in-base)) 2lh auto/100%;
}
}
@media (max-width: 880px) {
.GenreList .GenreList__col .GenreList__item {
padding: calc(20 * var(--px-to-size-in-base));
grid-template: 2lh auto/calc(220 * var(--px-to-size-in-base)) 1fr;
gap: calc(10 * var(--px-to-size-in-base)) 0;
}
}
.GenreList .GenreList__col .GenreList__item .GenreList__image {
-o-object-fit: contain;
object-fit: contain;
}
.GenreList .GenreList__col .GenreList__item .GenreList__text {
position: relative;
display: flex;
align-items: center;
font-weight: bold;
}
@media (min-width: 880.1px) {
.GenreList .GenreList__col .GenreList__item .GenreList__text {
justify-content: center;
text-align: center;
}
}
.GenreList .GenreList__col .GenreList__item .GenreList__text::after {
content: "";
position: absolute;
right: max(8 * var(--px-to-size-in-base) * var(--is-pc), 0 * var(--px-to-size-in-base) * var(--is-sp));
top: calc(50% - 0.4em);
width: 0.8em;
height: 0.8em;
background-color: var(--color-primary);
aspect-ratio: var(--svg-icon-right-ratio);
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
}
.GenreList .GenreList__col .GenreList__item .GenreList__description {
margin-top: calc(8 * var(--px-to-size-in-base));
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.8;
}
@media (max-width: 880px) {
.GenreList .GenreList__col .GenreList__item .GenreList__description {
grid-column: span 2;
}
}
.HomeGenreList {
display: grid;
gap: calc(20 * var(--px-to-size-in-base));
}
@media (min-width: 880.1px) {
.HomeGenreList {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: calc(210 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.HomeGenreList {
grid-template-columns: 100%;
grid-auto-rows: calc(140 * var(--px-to-size-in-base));
}
}
.HomeGenreList .HomeGenreList__col .HomeGenreList__item {
width: 100%;
height: 100%;
background-color: #fff;
display: grid;
line-height: 1.2;
font-weight: bold;
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 36 * var(--px-to-size-in-base) * var(--is-sp));
border-radius: max(12 * var(--px-to-size-in-base) * var(--is-pc), 16 * var(--px-to-size-in-base) * var(--is-sp));
transition: background-color 0.1s;
}
.HomeGenreList .HomeGenreList__col .HomeGenreList__item[aria-current=page] {
background-color: rgba(255, 255, 255, 0.5);
}
.HomeGenreList .HomeGenreList__col .HomeGenreList__item:not([aria-current=page]):hover {
transition-duration: 0.3s;
background-color: var(--color-bg-beige);
}
@media (min-width: 880.1px) {
.HomeGenreList .HomeGenreList__col .HomeGenreList__item {
padding: calc(10 * var(--px-to-size-in-base)) calc(10 * var(--px-to-size-in-base)) calc(15 * var(--px-to-size-in-base));
grid-template: 1fr 2lh/100%;
}
}
@media (max-width: 880px) {
.HomeGenreList .HomeGenreList__col .HomeGenreList__item {
padding: calc(20 * var(--px-to-size-in-base));
grid-template: 100%/calc(220 * var(--px-to-size-in-base)) 1fr;
}
}
.HomeGenreList .HomeGenreList__col .HomeGenreList__item .HomeGenreList__image {
-o-object-fit: contain;
object-fit: contain;
}
.HomeGenreList .HomeGenreList__col .HomeGenreList__item .HomeGenreList__text {
position: relative;
display: flex;
align-items: center;
}
@media (min-width: 880.1px) {
.HomeGenreList .HomeGenreList__col .HomeGenreList__item .HomeGenreList__text {
justify-content: center;
text-align: center;
}
}
.HomeGenreList .HomeGenreList__col .HomeGenreList__item .HomeGenreList__text::after {
content: "";
position: absolute;
right: max(8 * var(--px-to-size-in-base) * var(--is-pc), 0 * var(--px-to-size-in-base) * var(--is-sp));
top: calc(50% - 0.4em);
width: 0.8em;
height: 0.8em;
background-color: var(--color-primary);
aspect-ratio: var(--svg-icon-right-ratio);
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
}
.GenreTopLeadWrap {
display: flow-root;
position: relative;
z-index: 1;
padding-block: 0 calc(100 * var(--px-to-size-in-base));
background-color: var(--color-bg-beige);
color: var(--color-black);
}
.GenreTopLeadPhotos {
position: absolute;
overflow: hidden;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
margin-inline: auto;
pointer-events: none;
}
@media (max-width: 880px) {
.GenreTopLeadPhotos {
display: none;
}
}
.GenreTopLeadPhotos::before {
content: "";
position: absolute;
height: auto;
aspect-ratio: 639/1778;
background-image: url("../assets/genre/genre-lead-photo1.webp");
background-size: 100% 100%;
left: calc(-60 * var(--px-to-size-in-base));
top: calc(100 * var(--px-to-size-in-base));
width: calc(280 * var(--px-to-size-in-base));
}
@media (min-width: 1600px) {
.GenreTopLeadPhotos::before {
left: calc(-60 * var(--px-to-size-in-base));
top: calc(45 * var(--px-to-size-in-base));
width: calc(320 * var(--px-to-size-in-base));
}
}
.GenreTopLeadPhotos::after {
aspect-ratio: 934/1812;
background-image: url("../assets/genre/genre-lead-photo2.webp");
background-size: 100% 100%;
content: "";
position: absolute;
right: calc(-200 * var(--px-to-size-in-base));
width: calc(420 * var(--px-to-size-in-base));
bottom: calc(40 * var(--px-to-size-in-base));
}
@media (min-width: 1600px) {
.GenreTopLeadPhotos::after {
right: calc(-200 * var(--px-to-size-in-base));
width: calc(467 * var(--px-to-size-in-base));
bottom: 0;
}
}
.GenreTopLead {
margin-top: calc(40 * var(--px-to-size-in-base));
margin-inline: auto;
width: max(960 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
}
.GenreTopLead .GenreTopLead__text1 {
font-size: max(32 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
text-align: center;
line-height: 1.5;
}
.GenreTopLead .GenreTopLead__text1 em {
font-size: max(48 * var(--px-to-size-in-base) * var(--is-pc), 56 * var(--px-to-size-in-base) * var(--is-sp));
}
.GenreTopLead .GenreTopLead__text2 {
margin-top: calc(20 * var(--px-to-size-in-base));
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
}
.GenreTopCta {
margin-block: calc(60 * var(--px-to-size-in-base)) calc(-200 * var(--px-to-size-in-base));
}
.GenreContainer {
margin-inline: auto;
width: var(--content-width);
}
.GenreSideNav .GenreSideNav__heading {
font: bold calc(20 * var(--px-to-size-in-base))/1.5 var(--font-family-base);
}
.GenreSideNav .GenreSideNav__list {
margin-top: calc(20 * var(--px-to-size-in-base));
display: grid;
gap: calc(8 * var(--px-to-size-in-base));
}
.GenreSideNav .GenreSideNav__list > li {
padding-bottom: calc(8 * var(--px-to-size-in-base));
border-bottom: 1px solid var(--color-line);
}
.GenreSideNav .GenreSideNav__item {
height: px(52);
background-color: #fff;
border-radius: calc(8 * var(--px-to-size-in-base));
line-height: 1.2;
display: flex;
align-items: center;
gap: calc(10 * var(--px-to-size-in-base));
transition: color 0.1s;
}
.GenreSideNav .GenreSideNav__item:hover {
transition-duration: 0.3s;
color: var(--color-primary);
}
.GenreSideNav .GenreSideNav__item img {
width: calc(80 * var(--px-to-size-in-base));
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.GenreSingleLead {
margin-inline: auto;
width: var(--content-width);
margin-top: calc(40 * var(--px-to-size-in-base));
}
@media (min-width: 880.1px) {
.GenreSingleLead {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: calc(25 * var(--px-to-size-in-base)) calc(40 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.GenreSingleLead {
display: grid;
grid-template-columns: 100%;
gap: calc(40 * var(--px-to-size-in-base));
}
}
.GenreSingleLead .GenreSingleLead__text1 {
font: bold max(32 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
@media (min-width: 880.1px) {
.GenreSingleLead .GenreSingleLead__text1 {
width: 100%;
}
}
.GenreSingleLead .GenreSingleLead__text1 em {
font-size: max(48 * var(--px-to-size-in-base) * var(--is-pc), 56 * var(--px-to-size-in-base) * var(--is-sp));
}
@media (min-width: 880.1px) {
.GenreSingleLead .GenreSingleLead__image {
width: calc(490 * var(--px-to-size-in-base));
}
}
.GenreSingleLead .GenreSingleLead__image img {
width: 100%;
height: auto;
}
@media (min-width: 880.1px) {
.GenreSingleLead .GenreSingleLead__text2 {
flex-shrink: 1;
width: calc(670 * var(--px-to-size-in-base));
}
}
.GenreSingleCta {
margin-block: calc(60 * var(--px-to-size-in-base)) calc(-200 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.GenreMarketTable {
overflow-x: scroll;
padding-bottom: 15px;
}
}
.GenreMarketTable table {
border-spacing: calc(10 * var(--px-to-size-in-base)) 0;
width: 100%;
}
@media (max-width: 880px) {
.GenreMarketTable table {
width: calc(1290 * var(--px-to-size-in-base));
}
}
.GenreMarketTable table :where(th, td) {
text-align: center;
vertical-align: middle;
font-weight: normal;
line-height: 1.2;
width: 33.33%;
}
.GenreMarketTable table thead th {
border-bottom: 2px solid var(--color-black);
padding-bottom: max(10 * var(--px-to-size-in-base) * var(--is-pc), 14 * var(--px-to-size-in-base) * var(--is-sp));
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
}
.GenreMarketTable table tbody :where(th, td) {
border-bottom: 1px solid var(--color-line);
padding-block: max(20 * var(--px-to-size-in-base) * var(--is-pc), 30 * var(--px-to-size-in-base) * var(--is-sp));
}
.GenreMarketTable table tbody :where(th, td):where(td) {
text-align: right;
}
.GenreMarketTable .GenreMarketTable__name {
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
display: block;
}
.GenreMarketTable .GenreMarketTable__subtext {
display: block;
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
.GenreMarketTable .GenreMarketTable__price {
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
}
.GenreMarketTable .GenreMarketTable__price.--saneya {
color: var(--color-primary);
}
.GenreMarketTable .GenreMarketTable__price b {
font-size: max(32 * var(--px-to-size-in-base) * var(--is-pc), 48 * var(--px-to-size-in-base) * var(--is-sp));
letter-spacing: 0;
}
@media (min-width: 880.1px) {
.GenreRecordList .GenreRecordList__pc {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(40 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.GenreRecordList .GenreRecordList__pc {
display: none;
}
}
@media (min-width: 880.1px) {
.GenreRecordList .GenreRecordList__sp {
display: none;
}
}
@media (max-width: 880px) {
.GenreRecordList .GenreRecordList__sp {
margin-inline: calc(var(--site-gutter) * -1);
}
}
.GenreBrandList {
display: grid;
}
@media (min-width: 880.1px) {
.GenreBrandList {
grid-template-columns: repeat(4, 1fr);
gap: calc(15 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.GenreBrandList {
grid-template-columns: repeat(2, 1fr);
gap: calc(20 * var(--px-to-size-in-base));
}
}
.GenreBrandList .GenreBrandList__item {
border: 1px solid var(--color-line);
}
.GenreBrandList .GenreBrandList__item .GenreBrandList__image {
aspect-ratio: 180/80;
width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
.GenreBrandList .GenreBrandList__item .GenreBrandList__text {
display: block;
margin: 0.5em 1em 1em;
text-align: center;
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.2;
min-height: 2lh;
}
.GenreBrandMore {
width: 100%;
height: 3em;
background-color: var(--color-bg-gray);
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
border-radius: 0.33em;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 880.1px) {
.GenreBrandMore {
display: none;
}
}
.GenreBrandMore::after {
content: "";
position: absolute;
right: 1.66em;
top: calc(50% - 0.4em);
width: 0.8em;
height: 0.8em;
background-color: var(--color-black);
aspect-ratio: var(--svg-icon-plus-ratio);
-webkit-mask-image: var(--svg-icon-plus-url);
mask-image: var(--svg-icon-plus-url);
}
.GenreReasons {
display: grid;
grid-template-columns: 100%;
gap: calc(30 * var(--px-to-size-in-base));
}
.GenreReasons .GenreReasons__article .GenreReasons__title {
font: bold max(20 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
display: flex;
align-items: start;
gap: 0.7em;
}
.GenreReasons .GenreReasons__article .GenreReasons__title::before {
content: "";
display: block;
aspect-ratio: var(--svg-icon-check-ratio);
width: auto;
height: 1.4em;
background-color: var(--color-primary);
-webkit-mask-image: var(--svg-icon-check-url);
mask-image: var(--svg-icon-check-url);
transition: background-color 0.25s;
}
.GenreReasons .GenreReasons__article .GenreReasons__text {
margin-top: 0.5em;
}
.GenrePoints .GenrePoints__article {
--bg-color: #fff;
--number-color: var(--color-bg-beige);
overflow: hidden;
position: relative;
z-index: 1;
padding: calc(30 * var(--px-to-size-in-base)) calc(30 * var(--px-to-size-in-base)) calc(30 * var(--px-to-size-in-base)) calc(40 * var(--px-to-size-in-base));
min-height: max(190 * var(--px-to-size-in-base) * var(--is-pc), 250 * var(--px-to-size-in-base) * var(--is-sp));
background-color: var(--bg-color);
counter-increment: GenrePoints;
}
.GenrePoints .GenrePoints__article:nth-child(odd) {
--bg-color: var(--color-bg-beige);
--number-color: #fff;
}
.GenrePoints .GenrePoints__article .GenrePoints__number {
font: bold max(28 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp))/1.2 var(--font-family-deco);
color: var(--number-color);
line-height: 2em;
position: absolute;
z-index: -1;
left: -0.66em;
writing-mode: vertical-rl;
text-orientation: sideways;
white-space: nowrap;
}
@media (min-width: 880.1px) {
.GenrePoints .GenrePoints__article .GenrePoints__number {
top: 50%;
translate: 0 -50%;
}
}
@media (max-width: 880px) {
.GenrePoints .GenrePoints__article .GenrePoints__number {
top: calc(40 * var(--px-to-size-in-base));
}
}
.GenrePoints .GenrePoints__article .GenrePoints__number::before {
content: "POINT";
letter-spacing: 0;
}
.GenrePoints .GenrePoints__article .GenrePoints__number::after {
content: counter(GenrePoints, decimal-leading-zero);
font-size: 200%;
letter-spacing: 0;
}
@media (max-width: 880px) {
.GenrePoints .GenrePoints__article .GenrePoints__number::after {
font-size: 175%;
}
}
.GenrePoints .GenrePoints__article .GenrePoints__title {
font: bold max(20 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.GenreAreaCta {
text-align: center;
}
.GenreAreaCta .GenreAreaCta__text1 {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 36 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.GenreAreaCta .GenreAreaCta__text2 {
margin-top: 0.5em;
}
.GenreAreaCta .GenreAreaCta__text2::after {
content: "";
display: block;
margin: 1em auto 2em;
background-image: url("../assets/common/double-arrow-down.svg");
background-size: 100% 100%;
aspect-ratio: 26/38;
width: 1.3em;
height: auto;
}
.GenreAreaCta.--no-banner {
text-align: left;
}
.GenreAreaCta.--no-banner .GenreAreaCta__text2::after {
display: none;
}
.GenreChildGenres {
display: grid;
gap: calc(20 * var(--px-to-size-in-base));
}
@media (min-width: 880.1px) {
.GenreChildGenres {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
}
}
@media (max-width: 880px) {
.GenreChildGenres {
width: calc(700 * var(--px-to-size-in-base));
grid-template-columns: 100%;
grid-auto-rows: auto;
}
}
.GenreChildGenres .GenreChildGenres__item {
background-color: var(--color-bg-beige);
display: grid;
line-height: 1.2;
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 36 * var(--px-to-size-in-base) * var(--is-sp));
border-radius: max(12 * var(--px-to-size-in-base) * var(--is-pc), 16 * var(--px-to-size-in-base) * var(--is-sp));
transition: background-color 0.1s;
}
.GenreChildGenres .GenreChildGenres__item:hover {
transition-duration: 0.3s;
background-color: rgb(var(--color-bg-beige-rgb)/0.5);
}
@media (min-width: 880.1px) {
.GenreChildGenres .GenreChildGenres__item {
padding: calc(10 * var(--px-to-size-in-base)) calc(16 * var(--px-to-size-in-base)) calc(20 * var(--px-to-size-in-base));
grid-template: calc(120 * var(--px-to-size-in-base)) 2lh auto/100%;
}
}
@media (max-width: 880px) {
.GenreChildGenres .GenreChildGenres__item {
padding: calc(20 * var(--px-to-size-in-base));
grid-template: 2lh auto/calc(220 * var(--px-to-size-in-base)) 1fr;
gap: calc(10 * var(--px-to-size-in-base)) 0;
}
}
.GenreChildGenres .GenreChildGenres__item .GenreChildGenres__image {
-o-object-fit: contain;
object-fit: contain;
}
.GenreChildGenres .GenreChildGenres__item .GenreChildGenres__title {
position: relative;
display: flex;
align-items: center;
font-weight: bold;
letter-spacing: 0;
}
@media (min-width: 880.1px) {
.GenreChildGenres .GenreChildGenres__item .GenreChildGenres__title {
justify-content: center;
text-align: center;
}
}
.GenreChildGenres .GenreChildGenres__item .GenreChildGenres__title::after {
content: "";
position: absolute;
right: 0;
top: calc(50% - 0.4em);
width: 0.8em;
height: 0.8em;
background-color: var(--color-primary);
aspect-ratio: var(--svg-icon-right-ratio);
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
}
.GenreChildGenres .GenreChildGenres__item .GenreChildGenres__description {
margin-top: calc(8 * var(--px-to-size-in-base));
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.8;
}
@media (max-width: 880px) {
.GenreChildGenres .GenreChildGenres__item .GenreChildGenres__description {
grid-column: span 2;
}
}
.NewsCategoryLabel {
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
color: #fff;
background-color: var(--color-primary);
padding-inline: 0.5em;
padding-block: 0.36em 0.4em;
line-height: 1;
transition: background-color var(--transition-off);
display: inline-block;
text-align: center;
}
.NewsCategoryLabel:hover {
transition-duration: var(--transition-on);
background-color: rgb(var(--color-primary-rgb)/0.7);
}
.NewsList {
display: grid;
}
@media (min-width: 880.1px) {
.NewsList {
grid-template-columns: max-content max-content 1fr;
gap: 0 calc(40 * var(--px-to-size-in-base));
}
}
.NewsList .NewsList__item {
display: grid;
align-items: center;
border-bottom: 1px solid var(--color-line);
}
@media (min-width: 880.1px) {
.NewsList .NewsList__item {
padding: calc(20 * var(--px-to-size-in-base)) calc(40 * var(--px-to-size-in-base));
grid-column: 1/-1;
grid-template-columns: subgrid;
}
}
@media (max-width: 880px) {
.NewsList .NewsList__item {
padding: calc(30 * var(--px-to-size-in-base)) 0;
grid-template-columns: auto 1fr;
gap: calc(20 * var(--px-to-size-in-base)) calc(30 * var(--px-to-size-in-base));
}
.js-has-pseudo [csstools-has-1a-26-2t-3b-37-24-2x-37-38-w-1a-26-2t-3b-37-24-2x-37-38-2n-2n-2x-38-2t-31-1m-2w-2p-37-14-1a-26-2t-3b-37-24-2x-37-38-2n-2n-2s-2p-38-2t-1a-19-19-32-2t-3b-15]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist) {
padding-top: calc(40 * var(--px-to-size-in-base));
}
.NewsList .NewsList__item:has(.NewsList__date.--new) {
padding-top: calc(40 * var(--px-to-size-in-base));
}
}
.NewsList .NewsList__item .NewsList__date {
position: relative;
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
.NewsList .NewsList__item .NewsList__date.--new::before {
content: "NEW";
font-family: Arial, sans-serif;
font-weight: bold;
color: var(--color-primary);
position: absolute;
left: 0;
bottom: 1.2em;
}
@media (min-width: 880.1px) {
.NewsList .NewsList__item .NewsList__category .NewsCategoryLabel {
width: 100%;
}
}
.NewsList .NewsList__item .NewsList__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
font-size: max(18 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
color: var(--title-color);
transition: color var(--transition-off);
}
.NewsList .NewsList__item .NewsList__title:hover {
transition-duration: var(--transition-on);
color: var(--color-primary);
}
.NewsList .NewsList__item .NewsList__title::after {
content: "";
flex: 0 0 0.8em;
height: auto;
background-color: var(--color-primary);
aspect-ratio: var(--svg-icon-right-ratio);
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
}
@media (max-width: 880px) {
.NewsList .NewsList__item .NewsList__title::after {
grid-column: 3/4;
grid-row: 1/3;
}
}
@media (max-width: 880px) {
.NewsList .NewsList__item .NewsList__title {
grid-column: 1/span 2;
}
}
.NewsArticle {
margin-inline: auto;
width: var(--content-width);
max-width: calc(960 * var(--px-to-size-in-base));
}
.NewsArticle .NewsArticle__header .NewsArticle__meta {
display: flex;
align-items: start;
gap: calc(20 * var(--px-to-size-in-base));
}
.NewsArticle .NewsArticle__header .NewsArticle__date {
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
.NewsArticle .NewsArticle__header .NewsArticle__categories {
display: flex;
flex-wrap: wrap;
gap: calc(10 * var(--px-to-size-in-base));
}
.NewsArticle .NewsArticle__header .NewsArticle__title {
margin-top: calc(10 * var(--px-to-size-in-base));
}
.NewsArticle .NewsArticle__body {
margin-top: calc(40 * var(--px-to-size-in-base));
}
.ColumnTag {
display: inline-flex;
align-items: center;
gap: 0.2em;
font-size: var(--column-tag-size, max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp)));
color: var(--color-black);
transition: color 0.1s;
}
.ColumnTag:hover {
transition-duration: 0.3s;
color: var(--color-primary);
}
.ColumnTag::before {
content: "";
width: 1em;
height: 1em;
background-color: var(--color-primary);
-webkit-mask-image: var(--svg-icon-tag-url);
mask-image: var(--svg-icon-tag-url);
}
.ColumnList {
--image-left-item-template: "image title" auto "image meta" 1fr / max(270 * var(--px-to-size-in-base) * var(--is-pc), 260 * var(--px-to-size-in-base) * var(--is-sp)) 1fr;
--image-left-item-gap: calc(12 * var(--px-to-size-in-base)) calc(40 * var(--px-to-size-in-base));
--sideabr-item-template: "image title" auto ". ." calc(10 * var(--px-to-size-in-base)) "meta meta" auto / max(100 * var(--px-to-size-in-base) * var(--is-pc), 200 * var(--px-to-size-in-base) * var(--is-sp)) 1fr;
--sideabr-item-gap: 0 calc(20 * var(--px-to-size-in-base));
--gap: calc(40 * var(--px-to-size-in-base));
--column: 3;
display: grid;
grid-template-columns: repeat(var(--column), 1fr);
gap: var(--gap);
}
@media (max-width: 880px) {
.ColumnList {
--column: 2;
}
}
@media (min-width: 880.1px) {
.ColumnList.--column-2 {
--column: 2;
}
}
@media (max-width: 880px) {
.ColumnList.--column-2 {
--column: 2;
}
}
.ColumnList.--image-left {
--column: 1;
--column-item-template: var(--image-left-item-template);
--column-item-gap: var(--image-left-item-gap);
}
@media (max-width: 880px) {
.ColumnList.--image-left {
--column: 1;
}
}
@media (min-width: 880.1px) {
.ColumnList.--sp-image-left {
--column: 3;
}
}
@media (max-width: 880px) {
.ColumnList.--sp-image-left {
--column: 1;
--column-item-template: var(--image-left-item-template);
--column-item-gap: var(--image-left-item-gap);
}
}
.ColumnList.--sidebar {
--gap: calc(20 * var(--px-to-size-in-base));
--item-image-radius: calc(4 * var(--px-to-size-in-base));
--item-title-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
--item-tag-size: max(14 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
--item-meta-direction: row;
--item-meta-wrap: wrap;
--item-date-text-align: right;
}
@media (min-width: 880.1px) {
.ColumnList.--sidebar {
--column: 1;
--column-item-template: var(--sideabr-item-template);
--column-item-gap: var(--sideabr-item-gap);
}
}
@media (max-width: 880px) {
.ColumnList.--sidebar {
--column: 1;
--column-item-template: var(--sideabr-item-template);
--column-item-gap: var(--sideabr-item-gap);
}
}
.ColumnListItem {
--default-template: "image" auto "title" auto "meta" auto / 1fr;
--default-gap: calc(12 * var(--px-to-size-in-base));
--template: var(--column-item-template, var(--default-template));
--gap: var(--column-item-gap, var(--default-gap));
position: relative;
}
.ColumnList.--sidebar .ColumnListItem {
padding-bottom: calc(10 * var(--px-to-size-in-base));
border-bottom: 1px solid var(--color-line);
}
.ColumnListItem .ColumnListItem__link {
display: block;
position: absolute;
inset: 0;
}
.ColumnListItem .ColumnListItem__ranking {
font: bold max(16 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.2 var(--font-family-deco);
position: absolute;
z-index: 1;
left: 0.5em;
top: 0;
width: 1.625em;
height: 1.8125em;
background-color: var(--color-black);
color: #fff;
pointer-events: none;
text-align: center;
line-height: 1.7;
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.3em), 0 100%);
}
.ColumnListItem .ColumnListItem__ranking.--ranking-1 {
background-color: #dab436;
}
.ColumnListItem .ColumnListItem__ranking.--ranking-2 {
background-color: #9b9992;
}
.ColumnListItem .ColumnListItem__ranking.--ranking-3 {
background-color: #dd8e71;
}
.ColumnListItem .ColumnListItem__grid {
--title-color: var(--color-black);
--image-opacity: 1;
--transition-duration: 0.1s;
display: grid;
grid-template: var(--template);
gap: var(--gap);
}
.ColumnListItem .ColumnListItem__link:hover + .ColumnListItem__grid {
--title-color: var(--color-primary);
--image-opacity: 0.7;
--transition-duration: 0.3s;
}
.ColumnListItem .ColumnListItem__image {
grid-area: image;
pointer-events: none;
}
.ColumnListItem .ColumnListItem__image img {
aspect-ratio: 3/2;
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
border-radius: var(--item-image-radius, max(8 * var(--px-to-size-in-base) * var(--is-pc), 12 * var(--px-to-size-in-base) * var(--is-sp)));
opacity: var(--image-opacity);
transition: opacity var(--transition-duration);
}
.ColumnListItem .ColumnListItem__title {
grid-area: title;
font-size: var(--item-title-size, max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp)));
line-height: 1.5;
font-weight: bold;
color: var(--title-color);
transition: color var(--transition-duration);
pointer-events: none;
}
.ColumnListItem .ColumnListItem__meta {
grid-area: meta;
display: flex;
flex-flow: var(--item-meta-direction, column) var(--item-meta-wrap, nowrap);
align-items: start;
gap: var(--gap);
}
.ColumnListItem .ColumnListItem__tags {
--column-tag-size: var(--item-tag-size);
position: relative;
display: flex;
flex-wrap: wrap;
gap: 0 calc(16 * var(--px-to-size-in-base));
}
.ColumnListItem .ColumnListItem__date {
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
color: var(--color-text-gray);
pointer-events: none;
flex-grow: 1;
text-align: var(--item-date-text-align, left);
}
.ColumnTopLead {
margin-inline: auto;
width: var(--content-width);
display: grid;
}
@media (min-width: 880.1px) {
.ColumnTopLead {
grid-template: "text1 text1" auto "image text2" auto/40.8333333333% 1fr;
gap: calc(20 * var(--px-to-size-in-base)) calc(40 * var(--px-to-size-in-base));
align-items: center;
}
}
@media (max-width: 880px) {
.ColumnTopLead {
grid-template: "text1" auto "image" auto "text2" auto/1fr;
gap: calc(40 * var(--px-to-size-in-base));
}
}
.ColumnTopLead .ColumnTopLead__text1 {
grid-area: text1;
text-align: center;
font-size: max(32 * var(--px-to-size-in-base) * var(--is-pc), 36 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
}
.ColumnTopLead .ColumnTopLead__text1 em {
font-size: 150%;
}
@media (max-width: 880px) {
.ColumnTopLead .ColumnTopLead__text1 em {
font-size: 140%;
}
}
.ColumnTopLead .ColumnTopLead__image {
grid-area: image;
aspect-ratio: 973/479;
height: auto;
}
.ColumnTopLead .ColumnTopLead__text2 {
grid-area: text2;
}
.ColumnTopLocalNav {
background-color: var(--color-bg-gray);
border-radius: max(10 * var(--px-to-size-in-base) * var(--is-pc), 16 * var(--px-to-size-in-base) * var(--is-sp));
display: flex;
line-height: 1.3;
}
@media (min-width: 880.1px) {
.ColumnTopLocalNav {
align-items: center;
justify-content: center;
font-size: calc(20 * var(--px-to-size-in-base));
height: calc(80 * var(--px-to-size-in-base));
gap: calc(60 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.ColumnTopLocalNav {
padding: calc(40 * var(--px-to-size-in-base));
font-size: calc(28 * var(--px-to-size-in-base));
flex-direction: column;
gap: calc(40 * var(--px-to-size-in-base));
}
}
.ColumnTopLocalNav a {
position: relative;
display: flex;
align-items: center;
gap: 0.5em;
transition: color var(--transition-off);
}
.ColumnTopLocalNav a:nth-child(n+2)::before {
content: "";
position: absolute;
}
@media (min-width: 880.1px) {
.ColumnTopLocalNav a:nth-child(n+2)::before {
border-left: 1px solid #fff;
left: calc(-30 * var(--px-to-size-in-base));
height: 1.6em;
}
}
@media (max-width: 880px) {
.ColumnTopLocalNav a:nth-child(n+2)::before {
border-top: 1px solid #fff;
width: 100%;
top: calc(-20 * var(--px-to-size-in-base));
left: 0;
}
}
.ColumnTopLocalNav a:hover {
color: var(--color-primary);
transition-duration: var(--transition-on);
}
.ColumnTopLocalNav a::after {
content: "";
width: 1em;
height: auto;
background-color: var(--color-primary);
aspect-ratio: var(--svg-icon-down-ratio);
-webkit-mask-image: var(--svg-icon-down-url);
mask-image: var(--svg-icon-down-url);
}
.ColumnTopPickup__inner {
padding-left: calc(50% - 600 * var(--px-to-size-in-base));
padding-right: calc(40 * var(--px-to-size-in-base));
display: flex;
gap: calc(60 * var(--px-to-size-in-base));
overflow-x: scroll;
scrollbar-width: none;
}
.ColumnTopPickup__inner::-webkit-scrollbar {
display: none;
}
@media (max-width: 880px) {
.ColumnTopPickup__inner {
padding-left: calc(50% - 216 * var(--px-to-size-in-base));
}
}
.ColumnTopPickup__item {
scroll-snap-align: start;
flex: 0 0 calc(360 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.ColumnTopPickup__item {
flex: 0 0 calc(432 * var(--px-to-size-in-base));
}
}
.ColumnArticle .ColumnArticle__header .ColumnArticle__meta {
margin-top: calc(30 * var(--px-to-size-in-base));
display: flex;
}
@media (min-width: 880.1px) {
.ColumnArticle .ColumnArticle__header .ColumnArticle__meta {
flex-wrap: wrap;
gap: 0 1rem;
}
}
@media (max-width: 880px) {
.ColumnArticle .ColumnArticle__header .ColumnArticle__meta {
flex-direction: column;
gap: calc(10 * var(--px-to-size-in-base));
}
}
.ColumnArticle .ColumnArticle__header .ColumnArticle__meta .ColumnArticle__tags {
display: flex;
flex-wrap: wrap;
gap: 0 1rem;
}
.ColumnArticle .ColumnArticle__header .ColumnArticle__meta .ColumnArticle__date {
flex-grow: 1;
display: flex;
justify-content: end;
gap: 1em;
color: #9a9ea2;
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
@media (max-width: 880px) {
.ColumnArticle .ColumnArticle__header .ColumnArticle__meta .ColumnArticle__date {
justify-content: start;
}
}
.ColumnArticle .ColumnArticle__header .ColumnArticle__meta .ColumnArticle__date time {
display: flex;
align-items: center;
gap: 0.2em;
}
.ColumnArticle .ColumnArticle__header .ColumnArticle__meta .ColumnArticle__date time.--updated {
--icon-url: var(--svg-icon-update-url);
}
.ColumnArticle .ColumnArticle__header .ColumnArticle__meta .ColumnArticle__date time.--created {
--icon-url: var(--svg-icon-calendar-url);
}
.ColumnArticle .ColumnArticle__header .ColumnArticle__meta .ColumnArticle__date time::before {
content: "";
width: 1em;
height: 1em;
background-color: currentcolor;
-webkit-mask-image: var(--icon-url);
mask-image: var(--icon-url);
}
.ColumnArticle .ColumnArticle__lead img {
margin: calc(40 * var(--px-to-size-in-base)) auto 0;
width: min(540px, 700 * var(--px-to-size-in-base));
height: auto;
border-radius: calc(16 * var(--px-to-size-in-base));
}
.ColumnArticle .ColumnArticle__lead p {
margin-top: calc(40 * var(--px-to-size-in-base));
}
.ColumnArticle .ColumnArticle__banner {
margin-top: calc(40 * var(--px-to-size-in-base));
}
.ColumnArticle .ColumnArticle__banner img {
border-radius: calc(12 * var(--px-to-size-in-base));
}
.ColumnArticle .ColumnArticleContents {
margin-top: calc(40 * var(--px-to-size-in-base));
background-color: var(--color-bg-gray);
position: relative;
padding: calc(40 * var(--px-to-size-in-base));
}
.ColumnArticle .ColumnArticleContents::before {
content: "";
position: absolute;
inset: calc(10 * var(--px-to-size-in-base));
border: 2px solid #fff;
pointer-events: none;
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__heading {
display: flex;
align-items: baseline;
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__heading .ColumnArticleContents__title {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__heading .ColumnArticleContents__deco {
font: bold max(14 * var(--px-to-size-in-base) * var(--is-pc), 20 * var(--px-to-size-in-base) * var(--is-sp))/1.2 var(--font-family-deco);
margin-left: 1em;
color: var(--color-secondary-text);
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__heading .ColumnArticleContents__deco::first-letter {
color: var(--color-primary);
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__list {
margin-top: calc(20 * var(--px-to-size-in-base));
display: grid;
line-height: 1.5;
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
gap: 1.25em;
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__list a {
transition: color var(--transition-off);
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__list a:hover {
transition-duration: var(--transition-on);
color: var(--color-primary);
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__list > li {
counter-increment: contents;
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__list > li > a {
display: block;
width: -moz-fit-content;
width: fit-content;
position: relative;
padding-left: 3.5em;
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__list > li > a::before {
font-size: 150%;
font-family: var(--font-family-deco);
font-weight: bold;
position: absolute;
left: 0;
top: -0.3em;
content: counter(contents, decimal-leading-zero);
color: var(--color-primary);
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__list > li > ol {
margin-left: 3.5em;
margin-top: 0.6em;
display: grid;
gap: 0.6em;
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__list > li > ol > li > a {
width: -moz-fit-content;
width: fit-content;
display: flex;
align-items: start;
gap: 0.6em;
}
.ColumnArticle .ColumnArticleContents .ColumnArticleContents__list > li > ol > li > a::before {
content: "";
margin-top: 0.6em;
width: 0.8em;
height: 2px;
background-color: var(--color-primary);
}
.ColumnArticle .ColumnArticle__body {
margin-top: calc(60 * var(--px-to-size-in-base));
}
.ColumnArticleAuthor {
margin-top: calc(80 * var(--px-to-size-in-base));
}
.ColumnArticleAuthor .ColumnArticleAuthor__tabs {
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
border-bottom: 2px solid var(--color-black);
display: flex;
align-items: stretch;
gap: 0.6em;
}
.ColumnArticleAuthor .ColumnArticleAuthor__tabs button {
--bg-color: var(--color-bg-gray);
--text-color: var(--color-black);
--icon-color: var(--color-primary);
padding: 0.6em 1.5em;
background-color: var(--bg-color);
color: var(--text-color);
border-radius: 0.25em 0.25em 0 0;
font-weight: bold;
font-size: 100%;
display: flex;
align-items: center;
gap: 0.5em;
}
.ColumnArticleAuthor .ColumnArticleAuthor__tabs button[aria-current=true] {
--bg-color: var(--color-black);
--text-color: #fff;
--icon-color: #fff;
}
.ColumnArticleAuthor .ColumnArticleAuthor__tabs button::before {
content: "";
aspect-ratio: var(--svg-icon-down-ratio);
margin-top: 0.2em;
width: 1em;
height: auto;
background-color: var(--icon-color);
-webkit-mask-image: var(--svg-icon-down-url);
mask-image: var(--svg-icon-down-url);
}
.ColumnArticleAuthor .ColumnArticleAuthor__body {
padding: calc(20 * var(--px-to-size-in-base)) calc(20 * var(--px-to-size-in-base)) 0;
display: grid;
grid-template-columns: max(90 * var(--px-to-size-in-base) * var(--is-pc), 180 * var(--px-to-size-in-base) * var(--is-sp)) 1fr;
gap: max(30 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp));
}
.ColumnArticleAuthor .ColumnArticleAuthor__body .ColumnArticleAuthor__thumbnail img {
aspect-ratio: 1;
width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
.ColumnArticleAuthorProfile .ColumnArticleAuthorProfile__name {
font: bold max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.ColumnArticleAuthorProfile .ColumnArticleAuthorProfile__description {
margin-top: 0.8em;
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
.ColumnArticlePrevNext {
margin-top: max(20 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp));
border-top: 1px solid var(--color-line);
padding-top: calc(38 * var(--px-to-size-in-base));
display: grid;
grid-template: "prev next" auto/1fr 1fr;
}
.ColumnArticlePrevNext .ColumnArticlePrevNext__prev {
grid-area: prev;
padding-right: calc(40 * var(--px-to-size-in-base));
border-right: 1px solid var(--color-line);
}
.ColumnArticlePrevNext .ColumnArticlePrevNext__next {
grid-area: next;
translate: -1px 0;
padding-left: calc(40 * var(--px-to-size-in-base));
border-left: 1px solid var(--color-line);
}
.ColumnArticlePrevNext .ColumnArticlePrevNext__link {
display: flex;
flex-direction: column;
position: relative;
transition: color var(--transition-off);
}
.ColumnArticlePrevNext .ColumnArticlePrevNext__link:hover {
transition-duration: var(--transition-on);
color: var(--color-primary);
}
.ColumnArticlePrevNext .ColumnArticlePrevNext__link::after {
content: "";
position: absolute;
width: 1em;
height: auto;
background-color: var(--color-primary);
aspect-ratio: var(--svg-icon-right-ratio);
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
top: max(32 * var(--px-to-size-in-base) * var(--is-pc), 50 * var(--px-to-size-in-base) * var(--is-sp));
}
.ColumnArticlePrevNext .ColumnArticlePrevNext__link .ColumnArticlePrevNext__label {
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
color: var(--color-text-gray);
}
.ColumnArticlePrevNext .ColumnArticlePrevNext__link .ColumnArticlePrevNext__title {
font-weight: bold;
}
.ColumnArticlePrevNext .ColumnArticlePrevNext__link.--prev {
padding-left: max(30 * var(--px-to-size-in-base) * var(--is-pc), 44 * var(--px-to-size-in-base) * var(--is-sp));
}
.ColumnArticlePrevNext .ColumnArticlePrevNext__link.--prev::after {
left: 0;
scale: -1 1;
}
.ColumnArticlePrevNext .ColumnArticlePrevNext__link.--next {
padding-right: max(30 * var(--px-to-size-in-base) * var(--is-pc), 44 * var(--px-to-size-in-base) * var(--is-sp));
}
.ColumnArticlePrevNext .ColumnArticlePrevNext__link.--next::after {
right: 0;
}
.ColumnArticleRelated {
margin-top: calc(60 * var(--px-to-size-in-base));
}
.ColumnArticleRelated .ColumnArticleRelated__heading {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 36 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.ColumnArticleRelated .ColumnArticleRelated__list {
margin-top: calc(30 * var(--px-to-size-in-base));
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(30 * var(--px-to-size-in-base)) calc(60 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.ColumnArticleRelated .ColumnArticleRelated__list {
grid-template-columns: 1fr;
gap: calc(40 * var(--px-to-size-in-base));
}
}
.ColumnArticleRelated .ColumnArticleRelated__list a {
display: flex;
align-items: center;
gap: calc(20 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.ColumnArticleRelated .ColumnArticleRelated__list a {
align-items: start;
}
}
.ColumnArticleRelated .ColumnArticleRelated__list a img {
aspect-ratio: 140/93;
width: max(140 * var(--px-to-size-in-base) * var(--is-pc), 200 * var(--px-to-size-in-base) * var(--is-sp));
-o-object-fit: cover;
object-fit: cover;
border-radius: calc(8 * var(--px-to-size-in-base));
}
.ColumnArticleRelated .ColumnArticleRelated__list a span {
font-size: max(18 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
}
.ColumnArticleAuthorArticle .ColumnArticleAuthorArticle__header {
display: flex;
gap: 0 1em;
}
@media (min-width: 880.1px) {
.ColumnArticleAuthorArticle .ColumnArticleAuthorArticle__header {
align-items: center;
}
}
@media (max-width: 880px) {
.ColumnArticleAuthorArticle .ColumnArticleAuthorArticle__header {
flex-direction: column;
}
}
.ColumnArticleAuthorArticle .ColumnArticleAuthorArticle__header h3 {
font-weight: bold;
}
.ColumnArticleAuthorArticle .ColumnArticleAuthorArticle__header a {
display: flex;
align-items: center;
gap: 0.5em;
font-size: max(14 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
transition: color 0.1s;
}
.ColumnArticleAuthorArticle .ColumnArticleAuthorArticle__header a:hover {
transition-duration: 0.3s;
color: var(--color-primary);
}
.ColumnArticleAuthorArticle .ColumnArticleAuthorArticle__header a::after {
content: "";
width: auto;
height: 1em;
background-color: var(--color-primary);
aspect-ratio: var(--svg-icon-right-ratio);
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
}
.ColumnArticleAuthorArticle .ColumnArticleAuthorArticle__list {
margin-top: calc(10 * var(--px-to-size-in-base));
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.3;
display: grid;
gap: 0.3em;
}
@media (max-width: 880px) {
.ColumnArticleAuthorArticle .ColumnArticleAuthorArticle__list {
margin-top: 1em;
gap: 1em;
}
}
.ColumnArticleAuthorArticle .ColumnArticleAuthorArticle__list a span {
color: var(--color-primary);
}
.ColumnArticleAuthorArticle .ColumnArticleAuthorArticle__list a time {
font-size: max(14 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
color: var(--color-text-gray);
}
.FaqArticles {
display: grid;
width: 100%;
grid-template-columns: 100%;
gap: calc(40 * var(--px-to-size-in-base));
}
.FaqArticle .FaqArticle__q {
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
line-height: 1.4;
display: flex;
gap: calc(20 * var(--px-to-size-in-base));
align-items: baseline;
}
.FaqArticle .FaqArticle__q::before {
content: "Q.";
font-size: max(36 * var(--px-to-size-in-base) * var(--is-pc), 50 * var(--px-to-size-in-base) * var(--is-sp));
font-family: var(--font-family-deco);
font-weight: bold;
color: var(--color-primary);
}
.FaqArticle .FaqArticle__a {
display: flex;
align-items: baseline;
gap: calc(20 * var(--px-to-size-in-base));
}
.FaqArticle .FaqArticle__a::before {
content: "A.";
font-size: max(36 * var(--px-to-size-in-base) * var(--is-pc), 50 * var(--px-to-size-in-base) * var(--is-sp));
font-family: var(--font-family-deco);
font-weight: bold;
}
.SideStack {
display: grid;
grid-template-columns: 1fr;
gap: max(40 * var(--px-to-size-in-base) * var(--is-pc), 60 * var(--px-to-size-in-base) * var(--is-sp));
}
.SideBanners {
display: grid;
grid-template-columns: 1fr;
gap: calc(20 * var(--px-to-size-in-base));
}
.SideBanners > a {
--opacity: 1;
--transition-duration: var(--transition-off);
}
.SideBanners > a:hover {
--opacity: 0.7;
--transition-duration: var(--transition-on);
}
.SideBanners > a img {
width: 100%;
height: auto;
border-radius: calc(12 * var(--px-to-size-in-base));
opacity: var(--opacity);
transition: opacity var(--transition-duration);
}
@media (max-width: 880px) {
.SideBanners {
margin-inline: auto;
width: calc(560 * var(--px-to-size-in-base));
}
}
.SideHeading {
font: bold max(20 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
margin-bottom: calc(20 * var(--px-to-size-in-base));
}
.SideSearch {
font-size: 16px;
display: grid;
grid-template: 3em/1fr 4.3em;
gap: 0.5em;
}
@media (max-width: 880px) {
.SideSearch {
font-size: max(16px, 28 * var(--px-to-size-in-base));
}
}
.SideSearch .SideSearch__input {
min-width: 0;
border: 1px solid var(--color-line);
border-radius: 0.25em;
padding: 0 0.5em;
font-size: 100%;
}
.SideSearch .SideSearch__button {
flex-shrink: 0;
border-radius: 0.25em;
padding: 0;
font-size: 100%;
background-color: var(--color-primary);
color: #fff;
}
.SideGenreList {
margin-top: calc(20 * var(--px-to-size-in-base));
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
gap: 0.5em;
display: flex;
flex-wrap: wrap;
}
@media (max-width: 880px) {
.SideGenreList {
gap: 0.833em;
}
}
.SideGenreList a {
flex-grow: 1;
display: block;
padding: 0.18em 0.36em;
background-color: var(--color-bg-gray);
color: var(--color-primary);
letter-spacing: 0;
transition: opacity var(--transition-off);
}
@media (max-width: 880px) {
.SideGenreList a {
padding: 0.25em 0.5em;
}
}
.SideGenreList a:hover {
transition-duration: var(--transition-on);
opacity: 0.7;
}
.SideTagList {
display: flex;
flex-wrap: wrap;
gap: calc(4 * var(--px-to-size-in-base)) calc(20 * var(--px-to-size-in-base));
}
.SideTagMore {
width: 100%;
height: 2.57em;
background-color: var(--color-bg-gray);
font-size: max(14 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
border-radius: 0.33em;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.SideTagMore::after {
content: "";
position: absolute;
right: 1.66em;
top: calc(50% - 0.4em);
width: 0.8em;
height: 0.8em;
background-color: var(--color-black);
aspect-ratio: var(--svg-icon-plus-ratio);
-webkit-mask-image: var(--svg-icon-plus-url);
mask-image: var(--svg-icon-plus-url);
}
:root {
--font-size-input: clamp(16px, 18 / 1280 * var(--viewport-width), 18px);
}
@media (max-width: 880px) {
:root {
--font-size-input: clamp(16px, 28 / 780 * var(--viewport-width), 28px);
}
}
.FormErrors {
padding: 2em;
background-color: var(--color-bg-pink);
}
.FormErrors ul {
margin-top: 0.5em;
margin-left: 1.5em;
list-style-type: disc;
line-height: 1.5;
}
.FormErrors ul li {
margin-top: 0.3em;
}
.FormInputError {
margin-top: 0.3em;
display: flex;
align-items: baseline;
color: var(--color-primary);
gap: 0.4em;
line-height: 1.5;
}
.FormInputError::before {
content: "";
flex-shrink: 0;
width: 1em;
height: 1em;
background-color: currentcolor;
-webkit-mask-image: var(--svg-icon-exclamation-url);
mask-image: var(--svg-icon-exclamation-url);
translate: 0 0.15em;
}
.FormInput {
--px: calc(1em / 18);
font-size: var(--font-size-input);
}
.FormInput:where(input[type=text], input[type=email], input[type=tel], select, textarea) {
display: block;
width: 100%;
border: 1px solid var(--color-line);
border-radius: calc(8 * var(--px));
padding: 0.8em 1em;
height: calc(60 * var(--px));
line-height: 1.5;
font-family: var(--font-family-base);
resize: vertical;
outline-color: var(--color-black);
}
.FormInput:where(input[type=text], input[type=email], input[type=tel], select, textarea):where(select) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: var(--svg-icon-down-url);
background-size: 0.8em auto;
background-repeat: no-repeat;
background-position: right 1em center;
}
.FormInput:where(input[type=text], input[type=email], input[type=tel], select, textarea):where(textarea) {
min-height: 8lh;
resize: vertical;
}
@supports (field-sizing: content) {
.FormInput:where(input[type=text], input[type=email], input[type=tel], select, textarea):where(textarea) {
resize: none;
height: -moz-fit-content;
height: fit-content;
field-sizing: content;
}
}
.FormInput:where(input[type=text], input[type=email], input[type=tel], select, textarea):invalid {
background-color: var(--color-bg-beige);
}
.FormInput:where(input[type=text], input[type=email], input[type=tel], select, textarea):invalid:where(select) {
color: var(--color-text-gray);
}
.FormInput:where(input[type=text], input[type=email], input[type=tel], select, textarea):user-invalid, .FormInput:where(input[type=text], input[type=email], input[type=tel], select, textarea)[data-posted=true]:invalid {
border-color: #d81313;
outline-color: #d81313;
}
.FormInput:where(input[type=text], input[type=email], input[type=tel], select, textarea):focus {
outline-style: solid;
outline-width: 2px;
outline-offset: -1px;
}
.FormInput:where(input[type=text], input[type=email], input[type=tel], select, textarea)::-moz-placeholder {
color: var(--color-text-gray);
}
.FormInput:where(input[type=text], input[type=email], input[type=tel], select, textarea)::placeholder {
color: var(--color-text-gray);
}
.FormInput:where(input[type=checkbox]) {
--size: max(1.33em, 16px);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: content-box;
padding: 0;
width: var(--size);
height: var(--size);
border-radius: calc(var(--size) / 6);
border: 1px solid var(--color-line);
background-color: var(--color-bg-beige);
}
.FormInput:where(input[type=checkbox]):checked {
border-color: #000;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%;
background-color: #000;
}
my-input-image {
font-size: var(--font-size-input);
display: block;
}
my-input-image .MyInputImageInner {
position: relative;
overflow: hidden;
border-radius: 0.23em;
width: min(16em, 100%);
height: 3em;
color: var(--color-black);
transition: opacity 0.3s;
}
my-input-image .MyInputImageInner[aria-busy=true] {
pointer-events: none;
opacity: 0.6;
}
my-input-image .MyInputImageInner.--empty {
background-color: #f3f3f3;
display: flex;
align-items: center;
}
my-input-image .MyInputImageInner.--empty:focus-within {
outline: 2px solid var(--color-black);
outline-offset: -2px;
}
my-input-image .MyInputImageInner.--empty span {
display: flex;
align-items: center;
padding-left: 1.2em;
gap: 0.3em;
white-space: nowrap;
}
my-input-image .MyInputImageInner.--empty span::before {
content: "";
aspect-ratio: 1;
flex: 0 0 1em;
height: auto;
background-color: currentcolor;
-webkit-mask-image: var(--svg-icon-file-url);
mask-image: var(--svg-icon-file-url);
}
my-input-image .MyInputImageInner.--empty input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
my-input-image .MyInputImageInner.--selected {
border: 1px solid var(--color-line);
background-color: #fff;
display: grid;
grid-template: 100%/calc(3em - 2px) 1fr 2em;
align-items: center;
}
my-input-image .MyInputImageInner.--selected img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
my-input-image .MyInputImageInner.--selected span {
padding-left: 0.5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
my-input-image .MyInputImageInner.--selected button {
height: 100%;
cursor: pointer;
background-color: var(--color-black);
-webkit-mask-image: var(--svg-icon-close-bold-url);
mask-image: var(--svg-icon-close-bold-url);
-webkit-mask-size: 0.66em 0.66em;
mask-size: 0.66em 0.66em;
transition: background-color 0.2s;
}
my-input-image .MyInputImageInner.--selected button:hover {
background-color: var(--color-primary);
}
.FormInputImageWrap {
display: grid;
grid-template-columns: auto;
gap: max(20 * var(--px-to-size-in-base) * var(--is-pc), 30 * var(--px-to-size-in-base) * var(--is-sp));
}
.FormRequiredLabel {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: px(16, 24);
width: 3.75em;
height: 1.875em;
background-color: #d81313;
color: #fff;
}
.FormRequiredLabel.--optional {
background-color: #9a9ea2;
}
.FormFields {
display: grid;
}
@media (min-width: 880.1px) {
.FormFields {
grid-template-columns: max-content 1fr;
gap: calc(30 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.FormFields {
grid-template-columns: 1fr;
}
}
.FormFields dt {
font-size: px(20, 32);
display: flex;
align-items: baseline;
}
@media (min-width: 880.1px) {
.FormFields dt {
justify-content: space-between;
gap: 1em;
padding-top: calc(var(--font-size-input) * 0.7);
}
}
@media (max-width: 880px) {
.FormFields dt {
gap: 0.625em;
}
.FormFields dt:not(:first-child) {
margin-top: calc(30 * var(--px-to-size-in-base));
}
}
.FormFields dt .FormFields__name {
font-size: 100%;
font-weight: bold;
}
@media (max-width: 880px) {
.FormFields dd {
margin-top: calc(20 * var(--px-to-size-in-base));
}
}
.FormCheckbox {
font-size: var(--font-size-input);
display: inline-flex;
align-items: center;
gap: 0.3em;
}
.FormSubmitButton {
position: relative;
margin-inline: auto;
font-size: max(28 * var(--px-to-size-in-base) * var(--is-pc), 44 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
width: max(360 * var(--px-to-size-in-base) * var(--is-pc), 620 * var(--px-to-size-in-base) * var(--is-sp));
height: max(90 * var(--px-to-size-in-base) * var(--is-pc), 140 * var(--px-to-size-in-base) * var(--is-sp));
border-radius: calc(12 * var(--px-to-size-in-base));
background: linear-gradient(to bottom, #3e5ba6, #1f2d50);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.FormSubmitButton::before {
content: "";
position: absolute;
left: 1.3em;
width: auto;
height: 1.1em;
aspect-ratio: var(--svg-icon-paper-airplane-ratio);
-webkit-mask-image: var(--svg-icon-paper-airplane-url);
mask-image: var(--svg-icon-paper-airplane-url);
background-color: currentcolor;
}
.FormAgreePrivacy {
display: flex;
align-items: center;
justify-content: center;
gap: calc(30 * var(--px-to-size-in-base));
}
.FormAgreePrivacy .FormAgreePrivacy__link {
color: var(--color-primary);
}
.ContactPrivacy {
font-size: 16px;
height: 200px;
overflow: auto;
border: 1px solid var(--color-line);
padding: 1em;
}
.ContactThankyou {
margin-inline: auto;
font-size: max(128 * var(--px-to-size-in-base) * var(--is-pc), 100 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 0.8;
font-family: var(--font-family-deco);
font-weight: bold;
text-align: center;
width: 6.875em;
background-image: url("../assets/contact/thankyou-bg.webp");
background-size: cover;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.PrivacyArticle .HeadingB {
margin-block: calc(80 * var(--px-to-size-in-base)) calc(30 * var(--px-to-size-in-base));
}
.PrivacyArticle p {
margin-top: 1em;
}
.PrivacyArticle ol {
margin-block: 1em;
margin-left: 1.6em;
list-style: decimal;
line-height: 1.5;
}
.PrivacyArticle ol li {
margin-top: 0.3em;
}
.PrivacyArticle ol li ol {
margin-top: 0.5em;
}
.AboutLead {
margin-inline: auto;
width: var(--content-width);
max-width: calc(960 * var(--px-to-size-in-base));
display: grid;
gap: calc(40 * var(--px-to-size-in-base));
}
.AboutLead .AboutLead__text1 {
text-align: center;
font-size: max(32 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
}
.AboutLead .AboutLead__text1 em {
font-size: 150%;
}
.AboutCaseBox {
margin-inline: auto;
width: var(--content-width);
padding: calc(40 * var(--px-to-size-in-base));
background-color: #fff;
}
.AboutCase {
counter-increment: AboutCase;
display: grid;
}
@media (min-width: 880.1px) {
.AboutCase {
grid-template: "title title title" auto "trouble arrow solution" auto "voice voice voice" auto/1fr calc(120 * var(--px-to-size-in-base)) 1fr;
gap: calc(30 * var(--px-to-size-in-base)) 0;
}
}
@media (max-width: 880px) {
.AboutCase {
grid-template: "title" auto "." calc(40 * var(--px-to-size-in-base)) "trouble" auto "arrow" calc(93 * var(--px-to-size-in-base)) "solution" auto "." calc(40 * var(--px-to-size-in-base)) "voice" auto/1fr;
}
}
.AboutCase:nth-child(n+2) {
margin-top: max(40 * var(--px-to-size-in-base) * var(--is-pc), 60 * var(--px-to-size-in-base) * var(--is-sp));
border-top: 1px solid var(--color-line);
padding-top: max(40 * var(--px-to-size-in-base) * var(--is-pc), 60 * var(--px-to-size-in-base) * var(--is-sp));
}
.AboutCase .AboutCase__title {
font: bold max(28 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
grid-area: title;
display: flex;
flex-direction: column;
min-height: max(80 * var(--px-to-size-in-base) * var(--is-pc), 90 * var(--px-to-size-in-base) * var(--is-sp));
padding-left: max(100 * var(--px-to-size-in-base) * var(--is-pc), 110 * var(--px-to-size-in-base) * var(--is-sp));
background-image: url("../assets/aboutus/case-icon.svg");
background-size: max(80 * var(--px-to-size-in-base) * var(--is-pc), 90 * var(--px-to-size-in-base) * var(--is-sp)) auto;
}
.AboutCase .AboutCase__title::before {
content: "CASE" counter(AboutCase);
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
color: var(--color-secondary-text);
}
.AboutCase .AboutCase__trouble {
grid-area: trouble;
}
.AboutCase .AboutCase__trouble h4 {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
display: flex;
gap: 0.125em;
}
.AboutCase .AboutCase__trouble h4 b {
width: 1.66em;
height: 1.66em;
background-color: var(--color-black);
color: #fff;
display: grid;
place-content: center;
}
.AboutCase .AboutCase__trouble p {
margin-top: calc(20 * var(--px-to-size-in-base));
font-size: max(18 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
.AboutCase .AboutCase__arrow {
grid-area: arrow;
background-image: url("../assets/common/double-arrow-right.svg");
background-size: calc(38 * var(--px-to-size-in-base)) auto;
background-position: 50% 50%;
}
@media (max-width: 880px) {
.AboutCase .AboutCase__arrow {
background-image: url("../assets/common/double-arrow-down.svg");
}
}
.AboutCase .AboutCase__solution {
grid-area: solution;
}
.AboutCase .AboutCase__solution h4 {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
display: flex;
gap: 0.125em;
}
.AboutCase .AboutCase__solution h4 b {
width: 1.66em;
height: 1.66em;
background-color: var(--color-primary);
color: #fff;
display: grid;
place-content: center;
}
.AboutCase .AboutCase__solution p {
margin-top: calc(20 * var(--px-to-size-in-base));
font-size: max(18 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
.AboutCase .AboutCase__voice {
grid-area: voice;
background-color: #f3f3f3;
padding: calc(20 * var(--px-to-size-in-base)) calc(40 * var(--px-to-size-in-base));
display: flex;
}
@media (min-width: 880.1px) {
.AboutCase .AboutCase__voice {
align-items: center;
gap: calc(56 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.AboutCase .AboutCase__voice {
flex-direction: column;
gap: calc(10 * var(--px-to-size-in-base));
}
}
.AboutCase .AboutCase__voice h4 {
font: bold max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
white-space: nowrap;
}
.AboutCase .AboutCase__voice p {
font-size: max(18 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
display: flex;
flex-direction: column;
gap: 0.2em;
}
.AboutCase .AboutCase__voice p::before, .AboutCase .AboutCase__voice p::after {
content: "";
aspect-ratio: 3/2;
width: auto;
height: 1.1em;
background-image: url("../assets/aboutus/case-quote.svg");
background-size: 100% 100%;
}
.AboutCase .AboutCase__voice p::before {
align-self: start;
}
.AboutCase .AboutCase__voice p::after {
align-self: end;
scale: -1 -1;
}
.AboutCta {
margin-inline: auto;
width: var(--content-width);
margin-bottom: calc(-200 * var(--px-to-size-in-base));
display: grid;
gap: calc(10 * var(--px-to-size-in-base));
}
.AboutCta .AboutCta__text1 {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
text-align: center;
}
@media (min-width: 880.1px) {
.AboutCta .AboutCta__text2 {
text-align: center;
}
}
.AboutCta .AboutCta__arrow {
height: calc(38 * var(--px-to-size-in-base));
background-image: url("../assets/common/double-arrow-down.svg");
background-size: auto 100%;
background-position: 50% 50%;
}
.AboutCta .AboutCta__banner {
margin-top: calc(20 * var(--px-to-size-in-base));
}
.AboutPromise {
margin-inline: auto;
width: var(--content-width);
display: grid;
gap: calc(40 * var(--px-to-size-in-base));
}
@media (min-width: 880.1px) {
.AboutPromise {
grid-template-columns: calc(490 * var(--px-to-size-in-base)) 1fr;
}
}
@media (max-width: 880px) {
.AboutPromise {
grid-template-columns: 1fr;
}
}
.AboutPromise .AboutPromise__lead {
font: bold max(32 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
text-align: center;
}
@media (min-width: 880.1px) {
.AboutPromise .AboutPromise__lead {
grid-column: 1/-1;
}
}
.AboutPromise .AboutPromise__image img {
width: 100%;
}
.AboutPromise .AboutPromise__text {
display: grid;
gap: 1em;
}
.AboutFourPromises {
margin-inline: auto;
width: var(--content-width);
position: relative;
padding: calc(40 * var(--px-to-size-in-base));
background-color: var(--color-primary);
color: #fff;
}
.AboutFourPromises::before {
content: "";
position: absolute;
inset: calc(10 * var(--px-to-size-in-base));
border: max(2 * var(--px-to-size-in-base) * var(--is-pc), 4 * var(--px-to-size-in-base) * var(--is-sp)) solid #fff;
pointer-events: none;
}
.AboutFourPromises .AboutFourPromises__heading {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
line-height: 1.2;
text-align: center;
}
.AboutFourPromises .AboutFourPromises__heading h3 {
font: bold max(32 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.AboutFourPromises .AboutFourPromises__articles {
margin-top: calc(30 * var(--px-to-size-in-base));
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(30 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.AboutFourPromises .AboutFourPromises__articles {
grid-template-columns: 1fr;
}
}
.AboutFourPromises .AboutFourPromises__articles article {
position: relative;
z-index: 1;
padding: calc(40 * var(--px-to-size-in-base));
background-color: #fff;
color: var(--color-black);
counter-increment: AboutFourPromises;
}
.AboutFourPromises .AboutFourPromises__articles article::before {
font: bold calc(96 * var(--px-to-size-in-base))/1.2 var(--font-family-deco);
content: counter(AboutFourPromises, decimal-leading-zero);
line-height: 0.8;
color: rgba(213, 180, 111, 0.3);
position: absolute;
z-index: -1;
left: 0;
top: 0;
letter-spacing: 0;
}
.AboutFourPromises .AboutFourPromises__articles article hgroup {
position: relative;
z-index: 1;
}
.AboutFourPromises .AboutFourPromises__articles article hgroup div {
font: bold calc(20 * var(--px-to-size-in-base))/1.2 var(--font-family-deco);
color: var(--color-secondary-text);
}
.AboutFourPromises .AboutFourPromises__articles article hgroup div::first-letter {
color: var(--color-primary);
}
.AboutFourPromises .AboutFourPromises__articles article hgroup h4 {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.AboutFourPromises .AboutFourPromises__articles article p {
margin-top: calc(20 * var(--px-to-size-in-base));
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
.AboutAnshin {
display: grid;
}
@media (min-width: 880.1px) {
.AboutAnshin {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: calc(12 * var(--px-to-size-in-base)) calc(60 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.AboutAnshin {
grid-template-columns: 1fr;
gap: calc(60 * var(--px-to-size-in-base));
}
}
.AboutAnshin .AboutAnshin__item {
display: grid;
}
@media (min-width: 880.1px) {
.AboutAnshin .AboutAnshin__item {
grid-row: 1/-1;
grid-template-rows: subgrid;
}
}
@media (max-width: 880px) {
.AboutAnshin .AboutAnshin__item {
gap: calc(12 * var(--px-to-size-in-base));
}
}
.AboutAnshin .AboutAnshin__item dt {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: max(12 * var(--px-to-size-in-base) * var(--is-pc), 20 * var(--px-to-size-in-base) * var(--is-sp));
}
.AboutAnshin .AboutAnshin__item dt img {
aspect-ratio: 1;
width: max(280 * var(--px-to-size-in-base) * var(--is-pc), 340 * var(--px-to-size-in-base) * var(--is-sp));
border-radius: 50%;
}
.AboutDaijobu {
margin-inline: auto;
width: var(--content-width);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(60 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.AboutDaijobu {
grid-template-columns: repeat(1, 1fr);
gap: calc(50 * var(--px-to-size-in-base));
}
}
@media (min-width: 880.1px) {
.AboutDaijobu .AboutDaijobu__item {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(12 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.AboutDaijobu .AboutDaijobu__item {
display: grid;
grid-template-columns: calc(240 * var(--px-to-size-in-base)) auto;
gap: calc(10 * var(--px-to-size-in-base)) calc(40 * var(--px-to-size-in-base));
}
}
.AboutDaijobu .AboutDaijobu__item picture {
position: relative;
}
@media (min-width: 880.1px) {
.AboutDaijobu .AboutDaijobu__item picture {
width: calc(280 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.AboutDaijobu .AboutDaijobu__item picture {
grid-row: 1/span 3;
}
}
.AboutDaijobu .AboutDaijobu__item picture img {
aspect-ratio: 1;
width: max(280 * var(--px-to-size-in-base) * var(--is-pc), 340 * var(--px-to-size-in-base) * var(--is-sp));
border-radius: 50%;
}
.AboutDaijobu .AboutDaijobu__item picture::after {
content: "買取";
font-size: calc(48 * var(--px-to-size-in-base));
line-height: 1.1;
text-align: center;
font-weight: bold;
color: var(--color-primary);
border: 0.1em solid currentcolor;
padding-block: 0.2em;
width: 1.5em;
position: absolute;
right: 0;
rotate: -15deg;
}
@media (min-width: 880.1px) {
.AboutDaijobu .AboutDaijobu__item picture::after {
bottom: 0;
}
}
@media (max-width: 880px) {
.AboutDaijobu .AboutDaijobu__item picture::after {
translate: 0 -100%;
}
}
.AboutDaijobu .AboutDaijobu__item dt {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
@media (min-width: 880.1px) {
.AboutDaijobu .AboutDaijobu__item dt {
text-align: center;
}
}
@media (max-width: 880px) {
.AboutDaijobu .AboutDaijobu__item dd {
grid-row: 2/span 2;
}
}
.AboutFiveReasons {
margin-inline: auto;
width: var(--content-width);
}
.AboutFiveReasons .AboutFiveReasons__article {
margin-top: calc(120 * var(--px-to-size-in-base));
counter-increment: AboutFiveReasons;
display: grid;
gap: calc(40 * var(--px-to-size-in-base));
}
@media (min-width: 880.1px) {
.AboutFiveReasons .AboutFiveReasons__article {
grid-template: "title title" auto "image text" auto/calc(490 * var(--px-to-size-in-base)) 1fr;
}
.AboutFiveReasons .AboutFiveReasons__article:nth-child(even) {
grid-template: "title title" auto "text image" auto/1fr calc(490 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.AboutFiveReasons .AboutFiveReasons__article {
grid-template: "title" auto "image" auto "text" auto/1fr;
}
}
.AboutFiveReasons .AboutFiveReasons__article .AboutFiveReasons__title {
font: bold max(32 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
grid-area: title;
position: relative;
z-index: 1;
text-align: center;
}
.AboutFiveReasons .AboutFiveReasons__article .AboutFiveReasons__title::before {
font: bold max(96 * var(--px-to-size-in-base) * var(--is-pc), 144 * var(--px-to-size-in-base) * var(--is-sp))/1.2 var(--font-family-deco);
content: counter(AboutFiveReasons, decimal-leading-zero);
color: rgba(213, 180, 111, 0.3);
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: -0.75em;
margin-inline: auto;
letter-spacing: 0;
}
.AboutFiveReasons .AboutFiveReasons__article .AboutFiveReasons__image {
grid-area: image;
}
.AboutFiveReasons .AboutFiveReasons__article .AboutFiveReasons__image img {
width: 100%;
height: auto;
}
@media (max-width: 880px) {
.AboutFiveReasons .AboutFiveReasons__article .AboutFiveReasons__image img {
width: calc(490 * var(--px-to-size-in-base));
margin-inline: auto;
}
}
.AboutFiveReasons .AboutFiveReasons__article .AboutFiveReasons__text {
grid-area: text;
}
.AboutFiveReasons .AboutFiveReasons__article .AboutFiveReasons__text h4 {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 36 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
margin-bottom: 0.9em;
display: flex;
flex-direction: column;
align-items: start;
gap: 0.25em;
white-space: nowrap;
}
.AboutFiveReasons .AboutFiveReasons__article .AboutFiveReasons__text h4 em {
padding-inline: 0.6em;
background-color: var(--color-primary);
color: #fff;
}
@media (max-width: 880px) {
.AboutFiveReasons .AboutFiveReasons__article .AboutFiveReasons__text h4 em {
padding-inline: 0.4em;
}
.AboutFiveReasons .AboutFiveReasons__article .AboutFiveReasons__text h4 em.--sp-narrow {
letter-spacing: 0;
}
}
.AboutFiveReasons .AboutFiveReasons__article .AboutFiveReasons__text ol {
list-style: decimal;
margin-left: 1.5em;
}
.AboutAreaList {
display: grid;
gap: calc(12 * var(--px-to-size-in-base));
}
.AboutAreaList details {
--summary-icon-url: var(--svg-icon-plus-url);
}
.AboutAreaList details[open] {
--summary-icon-url: var(--svg-icon-minus-url);
padding-bottom: 1em;
}
.AboutAreaList details summary {
position: relative;
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
height: 3.5em;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-gray);
border-radius: calc(8 * var(--px-to-size-in-base));
list-style: none;
cursor: pointer;
}
.AboutAreaList details summary::after {
content: "";
aspect-ratio: 1;
width: 1em;
background-color: var(--color-primary);
-webkit-mask-image: var(--summary-icon-url);
mask-image: var(--summary-icon-url);
position: absolute;
right: 2em;
}
.AboutAreaList details h4 {
margin-top: 1em;
}
.AboutAreaList details p {
margin-top: 1em;
}
.AboutAreaList details h4 + p {
margin-top: 0;
}
.AboutText1 .AboutText1__text1 {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
text-align: center;
}
.AboutText1 .AboutText1__text2 {
margin-top: calc(10 * var(--px-to-size-in-base));
}
@media (min-width: 880.1px) {
.AboutText1 .AboutText1__text2 {
text-align: center;
}
}
.AboutProcessSteps {
--gap: calc(86 * var(--px-to-size-in-base));
display: grid;
gap: var(--gap);
}
.AboutProcessSteps .AboutProcessSteps__article {
position: relative;
display: grid;
grid-template: "image text" auto/calc(490 * var(--px-to-size-in-base)) 1fr;
gap: calc(40 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.AboutProcessSteps .AboutProcessSteps__article {
grid-template: "image" auto "text" auto/1fr;
}
}
.AboutProcessSteps .AboutProcessSteps__article:nth-child(n+2)::before {
content: "";
position: absolute;
bottom: 100%;
left: 0;
right: 0;
margin: auto;
width: calc(32 * var(--px-to-size-in-base));
height: var(--gap);
background-image: url("../assets/common/double-arrow-down.svg");
background-size: 100% auto;
background-position: center;
}
.AboutProcessSteps .AboutProcessSteps__article .AboutProcessSteps__image {
grid-area: image;
}
.AboutProcessSteps .AboutProcessSteps__article .AboutProcessSteps__image img {
width: 100%;
}
@media (max-width: 880px) {
.AboutProcessSteps .AboutProcessSteps__article .AboutProcessSteps__image img {
margin-inline: auto;
max-width: 490px;
}
}
.AboutProcessSteps .AboutProcessSteps__article .AboutProcessSteps__text {
grid-area: text;
display: flex;
flex-direction: column;
justify-content: center;
gap: calc(20 * var(--px-to-size-in-base));
}
.AboutProcessSteps .AboutProcessSteps__article .AboutProcessSteps__text h3 {
font: bold max(28 * var(--px-to-size-in-base) * var(--is-pc), 36 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.AboutProcessLead {
margin-inline: auto;
width: var(--content-width);
display: grid;
grid-template: "text1 text1" auto "image text2" auto/calc(490 * var(--px-to-size-in-base)) 1fr;
gap: calc(40 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.AboutProcessLead {
grid-template: "text1" auto "image" auto "text2" auto/1fr;
gap: calc(40 * var(--px-to-size-in-base));
}
}
.AboutProcessLead .AboutProcessLead__text1 {
font: bold max(32 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
grid-area: text1;
text-align: center;
}
.AboutProcessLead .AboutProcessLead__image {
grid-area: image;
}
.AboutProcessLead .AboutProcessLead__image img {
width: 100%;
}
.AboutProcessLead .AboutProcessLead__text2 {
grid-area: text2;
align-self: center;
}
.AboutProcessCase {
display: flex;
}
@media (min-width: 880.1px) {
.AboutProcessCase {
justify-content: space-between;
}
}
@media (max-width: 880px) {
.AboutProcessCase {
flex-direction: column;
gap: calc(20 * var(--px-to-size-in-base));
}
}
.AboutProcessCase .AboutProcessCase__item {
--bg-color: var(--color-bg-gray);
--key-color: var(--color-black);
background-color: var(--bg-color);
padding: calc(40 * var(--px-to-size-in-base));
display: grid;
gap: calc(20 * var(--px-to-size-in-base));
}
.AboutProcessCase .AboutProcessCase__item.--come {
--bg-color: var(--color-bg-beige);
--key-color: var(--color-primary);
}
.AboutProcessCase .AboutProcessCase__item .AboutProcessCase__heading {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
display: flex;
gap: 0.125em;
}
@media (max-width: 880px) {
.AboutProcessCase .AboutProcessCase__item .AboutProcessCase__heading {
justify-content: center;
}
}
.AboutProcessCase .AboutProcessCase__item .AboutProcessCase__heading b {
width: 1.66em;
height: 1.66em;
background-color: var(--key-color);
color: #fff;
display: grid;
place-content: center;
}
.AboutProcessCase .AboutProcessCase__item .AboutProcessCase__price {
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
line-height: 1.2;
}
@media (max-width: 880px) {
.AboutProcessCase .AboutProcessCase__item .AboutProcessCase__price {
text-align: center;
}
}
.AboutProcessCase .AboutProcessCase__item .AboutProcessCase__price dd {
color: var(--key-color);
}
.AboutProcessCase .AboutProcessCase__item .AboutProcessCase__price dd em {
font-size: max(36 * var(--px-to-size-in-base) * var(--is-pc), 56 * var(--px-to-size-in-base) * var(--is-sp));
}
.AboutProcessCase .AboutProcessCase__item .AboutProcessCase__images {
display: flex;
align-items: center;
justify-content: center;
gap: calc(8 * var(--px-to-size-in-base));
}
.AboutProcessCase .AboutProcessCase__item .AboutProcessCase__images img {
aspect-ratio: 1;
width: calc(180 * var(--px-to-size-in-base));
}
.AboutProcessCase .AboutProcessCase__item .AboutProcessCase__images [aria-label="+"] {
aspect-ratio: 1;
width: calc(24 * var(--px-to-size-in-base));
height: auto;
background-color: var(--color-black);
-webkit-mask-image: var(--svg-icon-plus-url);
mask-image: var(--svg-icon-plus-url);
}
.AboutProcessCase .AboutProcessCase__item .AboutProcessCase__images [aria-label="+"]:nth-last-child(2) {
background-color: var(--key-color);
}
.AboutProcessAfter {
font: bold max(32 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
text-align: center;
padding-top: calc(50 * var(--px-to-size-in-base));
background-image: url("../assets/common/double-arrow-down.svg");
background-size: auto calc(38 * var(--px-to-size-in-base));
background-position: center top;
}
.ProcessMatomete {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(60 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.ProcessMatomete {
grid-template-columns: 1fr;
}
}
.ProcessMatomete .ProcessMatomete__item {
display: grid;
gap: calc(12 * var(--px-to-size-in-base));
}
.ProcessMatomete .ProcessMatomete__item dt {
font: bold max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
display: grid;
gap: calc(12 * var(--px-to-size-in-base));
}
.ProcessMatomete .ProcessMatomete__item dt img {
width: 100%;
}
.ProcessMatomete .ProcessMatomete__item dd ul {
display: flex;
flex-wrap: wrap;
gap: 0.2em 2.5em;
}
@media (max-width: 880px) {
.ProcessMatomete .ProcessMatomete__item dd ul {
gap: 0.2em 1em;
}
}
.ProcessMatomete .ProcessMatomete__item dd ul li {
display: flex;
align-items: baseline;
gap: 0.3em;
}
.ProcessMatomete .ProcessMatomete__item dd ul li::before {
content: "";
background-color: var(--color-primary);
aspect-ratio: 1;
width: 0.7em;
height: auto;
border-radius: 50%;
}
.AboutProcessFirst {
display: grid;
gap: calc(60 * var(--px-to-size-in-base));
}
@media (min-width: 880.1px) {
.AboutProcessFirst {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 880px) {
.AboutProcessFirst {
grid-template-columns: calc(480 * var(--px-to-size-in-base));
justify-content: center;
}
}
.AboutProcessFirst .AboutProcessFirst__item dt {
display: flex;
flex-direction: column;
align-items: center;
}
.AboutProcessFirst .AboutProcessFirst__item dt .AboutProcessFirst__top {
display: grid;
aspect-ratio: 1;
width: max(280 * var(--px-to-size-in-base) * var(--is-pc), 340 * var(--px-to-size-in-base) * var(--is-sp));
}
.AboutProcessFirst .AboutProcessFirst__item dt .AboutProcessFirst__top .AboutProcessFirst__image {
grid-area: 1/1;
width: 100%;
height: 100%;
border-radius: 50%;
}
.AboutProcessFirst .AboutProcessFirst__item dt .AboutProcessFirst__top .AboutProcessFirst__phrase {
font: bold max(20 * var(--px-to-size-in-base) * var(--is-pc), 25 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
padding-top: 1.1em;
grid-area: 1/1;
display: flex;
flex-direction: column;
align-items: start;
gap: 0.1675em;
}
.AboutProcessFirst .AboutProcessFirst__item dt .AboutProcessFirst__top .AboutProcessFirst__phrase span {
padding: 0.1em 0.75em;
background-color: var(--color-secondary-point);
color: #fff;
}
.AboutProcessFirst .AboutProcessFirst__item dt .AboutProcessFirst__term {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
margin-top: 0.5em;
}
.AboutProcessFirst .AboutProcessFirst__item dd {
margin-top: 0.6em;
}
.AboutProcessSusume {
position: relative;
padding: calc(40 * var(--px-to-size-in-base));
background-color: var(--color-bg-gray);
}
.AboutProcessSusume::before {
content: "";
position: absolute;
inset: calc(10 * var(--px-to-size-in-base));
border: max(2 * var(--px-to-size-in-base) * var(--is-pc), 4 * var(--px-to-size-in-base) * var(--is-sp)) solid #fff;
pointer-events: none;
}
.AboutProcessSusume h4 {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
text-align: center;
}
.AboutProcessSusume ul {
margin-top: calc(30 * var(--px-to-size-in-base));
display: grid;
}
@media (min-width: 880.1px) {
.AboutProcessSusume ul {
grid-template: calc(60 * var(--px-to-size-in-base))/repeat(3, 1fr);
gap: calc(30 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.AboutProcessSusume ul {
grid-template: repeat(3, calc(90 * var(--px-to-size-in-base)))/1fr;
gap: calc(20 * var(--px-to-size-in-base));
}
}
.AboutProcessSusume ul li {
font: bold max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
background-color: #fff;
display: flex;
align-items: center;
gap: 0.6em;
padding-left: 1em;
}
.AboutProcessSusume ul li::before {
content: "";
aspect-ratio: var(--svg-icon-check-ratio);
width: auto;
height: 1.2em;
background-color: var(--color-primary);
-webkit-mask-image: var(--svg-icon-check-url);
mask-image: var(--svg-icon-check-url);
}
.CompanyTable {
border-collapse: collapse;
width: 100%;
}
@media (max-width: 880px) {
.CompanyTable,
.CompanyTable tbody,
.CompanyTable tr,
.CompanyTable th,
.CompanyTable td {
display: block;
}
}
.CompanyTable :where(th, td) {
vertical-align: top;
text-align: left;
border: 1px solid var(--color-line);
padding: 0.6em 1em 0.55em;
line-height: 1.5;
}
@media (max-width: 880px) {
.CompanyTable :where(th, td):nth-child(n+2) {
border-top: none;
}
}
.CompanyTable :where(th, td):where(th) {
background-color: var(--color-bg-gray);
}
@media (min-width: 880.1px) {
.CompanyTable :where(th, td):where(th) {
width: 1%;
min-width: 12em;
white-space: nowrap;
}
}
.CompanyTable .CompanyTable__map {
margin-top: calc(10 * var(--px-to-size-in-base));
width: 100%;
height: max(230 * var(--px-to-size-in-base) * var(--is-pc), 320 * var(--px-to-size-in-base) * var(--is-sp));
}
.CompanyTable a {
transition: color 0.1s;
}
.CompanyTable a:hover {
transition-duration: 0.3s;
color: var(--color-primary);
}
.Sitemap {
margin-inline: auto;
width: var(--content-width);
display: grid;
line-height: 1.5;
gap: calc(20 * var(--px-to-size-in-base));
}
@media (min-width: 880.1px) {
.Sitemap {
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
}
}
.Sitemap a {
transition: color var(--transition-off);
}
.Sitemap a:hover {
transition-duration: var(--transition-on);
color: var(--color-primary);
}
@media (min-width: 880.1px) {
.Sitemap .Sitemap__section:first-child {
grid-column: span 3;
}
}
.Sitemap .Sitemap__list {
display: grid;
gap: calc(20 * var(--px-to-size-in-base));
}
.Sitemap .Sitemap__link {
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
width: -moz-fit-content;
width: fit-content;
white-space: nowrap;
display: flex;
align-items: baseline;
gap: 0.4em;
}
.Sitemap .Sitemap__link::before {
content: "";
flex: 0 0 0.8em;
height: 0.125em;
background-color: var(--color-primary);
translate: 0 -0.3em;
}
.Sitemap .Sitemap__sublist {
margin-top: 0.8em;
margin-left: 1.6em;
display: grid;
gap: 0.8em;
}
.Sitemap .Sitemap__sublist .Sitemap__sublist {
margin-left: 0;
border-left: 1px solid var(--color-line);
padding-left: 1em;
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
.Sitemap .Sitemap__sublink {
width: -moz-max-content;
width: max-content;
display: flex;
align-items: baseline;
gap: 0.8em;
}
.Sitemap .Sitemap__sublink::after {
content: "";
aspect-ratio: var(--svg-icon-right-ratio);
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
background-color: var(--color-primary);
width: auto;
height: 1em;
translate: 0 0.15em;
}
.CampaignTitle {
font-size: inherit;
position: relative;
z-index: 1;
width: 15em;
height: 2.4em;
font-weight: bold;
line-height: 1.2;
color: #d29e35;
text-align: center;
}
.CampaignTitle::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
top: 50%;
translate: 0 -50%;
aspect-ratio: 72/21;
width: 100%;
height: auto;
background-image: url("../assets/campaign/title-deco.webp");
background-size: 100% 100%;
}
.CampaignTitle.--top::before {
aspect-ratio: 960/280;
background-image: url("../assets/campaign/top-title-deco.webp");
}
.CampaignTopTitle {
margin-inline: auto;
width: var(--content-width);
max-width: calc(960 * var(--px-to-size-in-base));
font-size: max(64 * var(--px-to-size-in-base) * var(--is-pc), 52 * var(--px-to-size-in-base) * var(--is-sp));
}
@media (max-width: 880px) {
.CampaignTopTitle .CampaignTitle {
margin-left: calc(-1 * var(--site-gutter));
}
}
.CampaignLead1 {
margin-inline: auto;
width: var(--content-width);
max-width: calc(960 * var(--px-to-size-in-base));
display: grid;
grid-template: "image" auto "heading" auto "text" auto/1fr;
gap: calc(20 * var(--px-to-size-in-base));
}
.CampaignLead1 .CampaignLead1__heading {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
grid-area: heading;
text-align: center;
}
.CampaignLead1 .CampaignLead1__text {
grid-area: text;
}
@media (min-width: 880.1px) {
.CampaignLead1 .CampaignLead1__text {
text-align: center;
}
}
.CampaignLead1 .CampaignLead1__image {
grid-area: image;
margin-bottom: calc(20 * var(--px-to-size-in-base));
}
.CampaignLead1 .CampaignLead1__image img {
width: 100%;
height: auto;
}
.CampaignLead2 {
margin-inline: auto;
width: var(--content-width);
max-width: calc(960 * var(--px-to-size-in-base));
margin-top: max(100 * var(--px-to-size-in-base) * var(--is-pc), 60 * var(--px-to-size-in-base) * var(--is-sp));
display: grid;
}
@media (min-width: 880.1px) {
.CampaignLead2 {
grid-template: "heading image" auto "text image" auto/1fr 1fr;
gap: calc(20 * var(--px-to-size-in-base)) calc(40 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.CampaignLead2 {
grid-template: "heading" auto "text" auto "image" auto/1fr;
gap: calc(20 * var(--px-to-size-in-base));
}
}
.CampaignLead2 .CampaignLead2__heading {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
grid-area: heading;
}
@media (max-width: 880px) {
.CampaignLead2 .CampaignLead2__heading {
text-align: center;
}
}
.CampaignLead2 .CampaignLead2__text {
grid-area: text;
}
.CampaignLead2 .CampaignLead2__image {
grid-area: image;
}
.CampaignLead2 .CampaignLead2__image img {
width: 100%;
height: auto;
}
.CampaignTopGold {
margin-inline: auto;
width: var(--content-width);
max-width: calc(960 * var(--px-to-size-in-base));
position: relative;
z-index: 1;
margin-top: calc(40 * var(--px-to-size-in-base));
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
line-height: 1.2;
text-align: center;
padding: 1em;
background-color: #d5b46f;
color: #fff;
}
.CampaignTopGold strong {
font-size: 133.33%;
}
.CampaignTopGold::before {
content: "";
position: absolute;
inset: 0.33em;
border: 1px solid currentcolor;
pointer-events: none;
}
.CampaignLeadButton {
margin-inline: auto;
width: var(--content-width);
max-width: calc(960 * var(--px-to-size-in-base));
}
.CampaignLeadButton::before {
content: "";
display: block;
height: calc(65 * var(--px-to-size-in-base));
background-image: url("../assets/common/double-arrow-down.svg");
background-size: auto 60%;
background-position: 50% 50%;
}
.CampaignLeadButton a {
--contact-button-color1: #3e5ba6;
--contact-button-color2: #1f2d50;
margin-inline: auto;
display: flex;
align-items: center;
padding-left: 1.25em;
gap: 1.5em;
aspect-ratio: 700/120;
width: calc(700 * var(--px-to-size-in-base));
height: auto;
border-radius: calc(12 * var(--px-to-size-in-base));
font-size: calc(36 * var(--px-to-size-in-base));
font-weight: bold;
color: #fff;
background: linear-gradient(to bottom, var(--contact-button-color1), var(--contact-button-color2));
transition: --contact-button-color1 0.2s, --contact-button-color2 0.2s;
}
.CampaignLeadButton a:hover {
--contact-button-color1: #6f8ace;
--contact-button-color2: #3e5ba6;
}
.CampaignLeadButton a::before {
content: "";
display: block;
width: 1.38em;
height: auto;
background-color: currentcolor;
aspect-ratio: var(--svg-icon-search-ratio);
-webkit-mask-image: var(--svg-icon-search-url);
mask-image: var(--svg-icon-search-url);
}
.CampaignNayamiHeading {
font-size: max(28 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp));
line-height: 1.5;
font-weight: bold;
text-align: center;
}
.CampaignNayamiHeading em {
font-size: max(42 * var(--px-to-size-in-base) * var(--is-pc), 56 * var(--px-to-size-in-base) * var(--is-sp));
}
.CampaignNayami {
margin-inline: auto;
width: var(--content-width);
display: grid;
margin-top: max(60 * var(--px-to-size-in-base) * var(--is-pc), 80 * var(--px-to-size-in-base) * var(--is-sp));
}
@media (min-width: 880.1px) {
.CampaignNayami {
grid-template-columns: repeat(4, 1fr);
gap: calc(24 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.CampaignNayami {
grid-template-columns: repeat(2, 1fr);
gap: calc(30 * var(--px-to-size-in-base)) calc(20 * var(--px-to-size-in-base));
}
}
.CampaignNayami li {
background-color: var(--color-bg-gray);
display: flex;
flex-direction: column;
align-items: center;
gap: calc(5 * var(--px-to-size-in-base));
line-height: 1.5;
font-weight: bold;
text-align: center;
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
border-radius: max(12 * var(--px-to-size-in-base) * var(--is-pc), 16 * var(--px-to-size-in-base) * var(--is-sp));
}
.CampaignNayami li > img {
margin-top: calc(-50 * var(--px-to-size-in-base));
aspect-ratio: 282/140;
width: 100%;
height: auto;
}
.CampaignNayami li > span {
padding: 0 0.83em 1.5em;
}
.CampaignNayamiText {
font: bold calc(32 * var(--px-to-size-in-base))/1.5 var(--font-family-base);
padding-top: calc(75 * var(--px-to-size-in-base));
text-align: center;
background-image: url("../assets/common/double-arrow-down.svg");
background-size: calc(26 * var(--px-to-size-in-base)) auto;
background-position: 50% calc(25 * var(--px-to-size-in-base));
}
.CampaignAppealHeading {
font: bold max(48 * var(--px-to-size-in-base) * var(--is-pc), 56 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.CampaignAppealHeading small {
font-size: 75%;
}
.CampaignAppealHeading .CampaignAppealHeading__limited {
font-size: 50%;
padding: 0.15em 0.66em;
background-color: #fff;
color: var(--color-primary);
}
.CampaignAppeal {
margin-inline: auto;
width: var(--content-width);
position: relative;
z-index: 1;
padding: calc(40 * var(--px-to-size-in-base));
background-color: #fff;
color: var(--color-black);
display: grid;
gap: calc(30 * var(--px-to-size-in-base));
}
.CampaignAppeal::before {
content: "";
position: absolute;
inset: calc(10 * var(--px-to-size-in-base));
border: max(2 * var(--px-to-size-in-base) * var(--is-pc), 4 * var(--px-to-size-in-base) * var(--is-sp)) solid var(--color-primary);
pointer-events: none;
}
.CampaignAppeal .CampaignAppeal__hgroup {
text-align: center;
line-height: 1.2;
}
.CampaignAppeal .CampaignAppeal__hgroup div {
font: bold calc(24 * var(--px-to-size-in-base))/1.5 var(--font-family-base);
}
.CampaignAppeal .CampaignAppeal__hgroup h3 {
font: bold max(32 * var(--px-to-size-in-base) * var(--is-pc), 48 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.CampaignAppeal .CampaignAppeal__list {
display: grid;
}
@media (min-width: 880.1px) {
.CampaignAppeal .CampaignAppeal__list {
grid-template-columns: repeat(5, 1fr);
gap: calc(20 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.CampaignAppeal .CampaignAppeal__list {
grid-template-columns: 1fr;
gap: calc(30 * var(--px-to-size-in-base));
}
}
.CampaignAppeal .CampaignAppeal__list article {
display: grid;
}
@media (min-width: 880.1px) {
.CampaignAppeal .CampaignAppeal__list article {
grid-template: "image" auto "heading" auto "text" 1fr/1fr;
gap: calc(10 * var(--px-to-size-in-base));
}
}
@media (max-width: 880px) {
.CampaignAppeal .CampaignAppeal__list article {
grid-template: "image heading" auto "image text" 1fr/calc(200 * var(--px-to-size-in-base)) 1fr;
gap: calc(10 * var(--px-to-size-in-base)) calc(30 * var(--px-to-size-in-base));
}
}
.CampaignAppeal .CampaignAppeal__list article img {
grid-area: image;
aspect-ratio: 1;
width: 100%;
border-radius: 50%;
}
.CampaignAppeal .CampaignAppeal__list article h3 {
font: bold max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
grid-area: heading;
}
@media (min-width: 880.1px) {
.CampaignAppeal .CampaignAppeal__list article h3 {
text-align: center;
}
}
.CampaignAppeal .CampaignAppeal__list article p {
grid-area: text;
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 24 * var(--px-to-size-in-base) * var(--is-sp));
}
.CampaignDetails {
margin-inline: auto;
width: var(--content-width);
}
.CampaignDetails h3 {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
}
.CampaignDetails dl {
margin-top: calc(20 * var(--px-to-size-in-base));
display: grid;
grid-template-columns: max-content 1fr;
gap: calc(10 * var(--px-to-size-in-base)) calc(80 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.CampaignDetails dl {
grid-template-columns: 100%;
gap: 0;
}
}
.CampaignDetails dl dt {
font-size: max(20 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
}
@media (max-width: 880px) {
.CampaignDetails dl dt:nth-child(n+2) {
margin-top: calc(20 * var(--px-to-size-in-base));
}
}
.CampaignCases {
margin-inline: auto;
width: var(--content-width);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(60 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.CampaignCases {
grid-template-columns: 100%;
}
}
.CampaignCases > article {
background-color: #fff;
padding: calc(40 * var(--px-to-size-in-base));
counter-increment: case;
}
.CampaignCases > article h4 {
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
font-weight: bold;
line-height: 1.5;
height: 2.5em;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 3em;
background-size: 2.5em 2.5em;
background-image: url("../assets/campaign/case-icon.svg");
}
.CampaignCases > article h4::before {
content: "CASE" counter(case);
font-size: 83.33%;
color: var(--color-secondary-text);
}
.CampaignCases > article p {
margin-top: calc(20 * var(--px-to-size-in-base));
display: flex;
flex-direction: column;
gap: calc(4 * var(--px-to-size-in-base));
}
.CampaignCases > article p::before, .CampaignCases > article p::after {
content: "";
aspect-ratio: 3/2;
width: calc(30 * var(--px-to-size-in-base));
height: auto;
background-image: url("../assets/campaign/case-quote.svg");
background-size: 100% 100%;
}
.CampaignCases > article p::after {
align-self: flex-end;
scale: -1;
}
.CampaignCta {
margin-inline: auto;
width: var(--content-width);
margin-block: max(100 * var(--px-to-size-in-base) * var(--is-pc), 60 * var(--px-to-size-in-base) * var(--is-sp)) calc(-200 * var(--px-to-size-in-base));
}
.CampaignCta .CampaignCta__text {
font: bold max(24 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp))/1.5 var(--font-family-base);
text-align: center;
}
.CampaignCta .CampaignCta__text::after {
content: "";
display: block;
margin: calc(10 * var(--px-to-size-in-base)) auto max(60 * var(--px-to-size-in-base) * var(--is-pc), 50 * var(--px-to-size-in-base) * var(--is-sp));
aspect-ratio: 26/38;
width: calc(26 * var(--px-to-size-in-base));
background-image: url("../assets/common/double-arrow-down.svg");
}
.CampaignNav {
margin-inline: auto;
width: var(--content-width);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(40 * var(--px-to-size-in-base));
}
@media (max-width: 880px) {
.CampaignNav {
grid-template-columns: 100%;
gap: calc(100 * var(--px-to-size-in-base));
}
}
.CampaignNav dt {
display: flex;
justify-content: center;
font-size: max(24 * var(--px-to-size-in-base) * var(--is-pc), 44 * var(--px-to-size-in-base) * var(--is-sp));
}
.CampaignNav dd {
margin-top: calc(40 * var(--px-to-size-in-base));
}
.CampaignNav dd a {
margin: 1em auto 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 18.75em;
height: 3.5em;
border-radius: 0.5em;
font-weight: bold;
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 28 * var(--px-to-size-in-base) * var(--is-sp));
opacity: 1;
transition: background-color 0.1s;
background-color: var(--color-bg-gray);
}
@media (max-width: 880px) {
.CampaignNav dd a {
width: 22em;
height: 3.2em;
}
}
.CampaignNav dd a:hover {
transition-duration: 0.3s;
background-color: #f9f9f9;
}
.CampaignNav dd a::after {
content: "";
position: absolute;
right: calc(30 * var(--px-to-size-in-base));
width: 1em;
height: 1em;
background-color: var(--color-primary);
aspect-ratio: var(--svg-icon-right-ratio);
-webkit-mask-image: var(--svg-icon-right-url);
mask-image: var(--svg-icon-right-url);
}
.HSlider {
--container-width: max(1200 * var(--px-to-size-in-base) * var(--is-pc), 700 * var(--px-to-size-in-base) * var(--is-sp));
--item-width: max(360 * var(--px-to-size-in-base) * var(--is-pc), 432 * var(--px-to-size-in-base) * var(--is-sp));
--item-gap: max(60 * var(--px-to-size-in-base) * var(--is-pc), 100 * var(--px-to-size-in-base) * var(--is-sp));
--pad-align-start: max((var(--viewport-width) - var(--container-width)) / 2, var(--site-gutter));
--pad-align-center: calc((var(--viewport-width) - var(--item-width)) / 2);
--padding-inline: var(--pad-align-start);
--button-size: max(36 * var(--px-to-size-in-base) * var(--is-pc), 72 * var(--px-to-size-in-base) * var(--is-sp));
--button-x-offset: calc(var(--padding-inline) - 1em - 2px);
--button-y-offset: calc(50% - 0.5em);
position: relative;
overflow: hidden;
width: 100%;
padding-bottom: 1px;
}
@media (max-width: 880px) {
.HSlider {
--padding-inline: var(--pad-align-center);
--button-x-offset: calc(var(--padding-inline) - 1.2em);
}
}
.HSlider#HomeCaseRecordHslider {
--button-y-offset: calc((var(--item-width) * 240 / 360) / 2 - 0.5em);
}
.HSlider#HomeColumnHslider {
--item-width: max(270 * var(--px-to-size-in-base) * var(--is-pc), 432 * var(--px-to-size-in-base) * var(--is-sp));
--item-gap: max(40 * var(--px-to-size-in-base) * var(--is-pc), 100 * var(--px-to-size-in-base) * var(--is-sp));
--button-y-offset: calc((var(--item-width) * 180 / 270) / 2 - 0.5em);
}
.HSlider#ColumnPickupsHslider {
--button-y-offset: calc((var(--item-width) * 2 / 3) / 2 - 0.5em);
}
.HSlider .HSlider__wrapper {
position: relative;
}
.HSlider .HSlider__wrapper .HSlider__container {
padding-inline: var(--padding-inline);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--padding-inline);
scrollbar-width: none;
display: flex;
align-items: stretch;
gap: var(--item-gap);
}
.HSlider .HSlider__wrapper .HSlider__container::-webkit-scrollbar {
display: none;
}
.HSlider .HSlider__wrapper .HSlider__container .HSlider__item {
scroll-snap-align: start;
flex: 0 0 var(--item-width);
overflow: hidden;
}
.HSlider .HSlider__wrapper .HSlider__virtualviewport {
position: absolute;
top: 0;
left: var(--padding-inline);
width: var(--container-width);
height: 100%;
pointer-events: none;
}
.HSlider .HSlider__wrapper .HSlider__button {
font-size: var(--button-size);
width: 1em;
height: 1em;
border-radius: 50%;
background-color: var(--color-bg-gray);
color: var(--color-black);
position: absolute;
top: var(--button-y-offset);
transition: visibility 0s, opacity 0.2s;
}
.HSlider .HSlider__wrapper .HSlider__button:disabled {
transition: visibility 0s 0.2s, opacity 0.2s;
visibility: hidden;
opacity: 0;
}
.HSlider .HSlider__wrapper .HSlider__button.--prev {
--mask-image: var(--svg-icon-left-thin-url);
--mask-position: 45% center;
left: var(--button-x-offset);
}
.HSlider .HSlider__wrapper .HSlider__button.--next {
--mask-image: var(--svg-icon-right-thin-url);
--mask-position: 55% center;
right: var(--button-x-offset);
}
.HSlider .HSlider__wrapper .HSlider__button::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: currentcolor;
-webkit-mask-image: var(--mask-image);
mask-image: var(--mask-image);
-webkit-mask-position: var(--mask-position);
mask-position: var(--mask-position);
-webkit-mask-size: auto 0.5em;
mask-size: auto 0.5em;
}
.HSlider .HSlider__dots {
margin: max(30 * var(--px-to-size-in-base) * var(--is-pc), 40 * var(--px-to-size-in-base) * var(--is-sp)) auto 0;
width: var(--container-width);
display: flex;
align-items: center;
justify-content: center;
font-size: max(16 * var(--px-to-size-in-base) * var(--is-pc), 32 * var(--px-to-size-in-base) * var(--is-sp));
gap: 1em;
}
@media (max-width: 880px) {
.HSlider .HSlider__dots {
gap: 0.8em;
}
}
.HSlider .HSlider__dots > button {
--visible-ratio: 0;
--scale: calc(0.75 + 0.25 * var(--visible-ratio));
--red-opacity: var(--visible-ratio);
--transition-duration: 0.1s;
width: 1em;
height: 1em;
overflow: hidden;
border-radius: 50%;
background-color: var(--color-line);
scale: var(--scale);
transition: scale var(--transition-duration);
}
@media (max-width: 880px) {
.HSlider .HSlider__dots > button {
--scale: 0.75;
--red-opacity: 0;
--transition-duration: 0.25s;
}
.HSlider .HSlider__dots > button[aria-current=true] {
--scale: 1;
--red-opacity: 1;
}
}
.HSlider .HSlider__dots > button::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: var(--color-primary);
opacity: var(--red-opacity);
transition: opacity var(--transition-duration);
}
.LineBanner {
container-type: inline-size;
position: relative;
background-color: #14cb3a;
color: #fff;
height: auto;
overflow: hidden;
}
@media (min-width: 880.1px) {
.LineBanner {
--px: calc(100cqw / 960);
aspect-ratio: 960/240;
}
}
@media (max-width: 880px) {
.LineBanner {
--px: calc(100cqw / 700);
aspect-ratio: 700/500;
}
}
.LineBanner::before {
content: "";
display: block;
position: absolute;
bottom: 0;
aspect-ratio: 186/232;
height: auto;
background-image: url("../assets/line/line-banner-photo.webp");
background-size: 100% 100%;
}
@media (min-width: 880.1px) {
.LineBanner::before {
left: 0;
width: calc(186 * var(--px));
}
}
@media (max-width: 880px) {
.LineBanner::before {
left: calc(-90 * var(--px));
width: calc(372 * var(--px));
}
}
.LineBanner .LineBanner__heading {
position: absolute;
top: calc(40 * var(--px));
line-height: 1.2;
font-weight: bold;
}
@media (min-width: 880.1px) {
.LineBanner .LineBanner__heading {
left: calc(240 * var(--px));
font-size: calc(40 * var(--px));
}
}
@media (max-width: 880px) {
.LineBanner .LineBanner__heading {
left: calc(320 * var(--px));
font-size: calc(56 * var(--px));
}
}
.LineBanner .LineBanner__add {
position: absolute;
display: flex;
line-height: 1.8;
font-weight: bold;
}
@media (min-width: 880.1px) {
.LineBanner .LineBanner__add {
top: calc(150 * var(--px));
left: calc(240 * var(--px));
align-items: center;
gap: calc(8 * var(--px));
}
}
@media (max-width: 880px) {
.LineBanner .LineBanner__add {
top: calc(260 * var(--px));
left: calc(320 * var(--px));
flex-direction: column;
}
}
.LineBanner .LineBanner__add .LineBanner__addText {
font-size: calc(20 * var(--px));
}
@media (max-width: 880px) {
.LineBanner .LineBanner__add .LineBanner__addText {
font-size: calc(28 * var(--px));
}
}
.LineBanner .LineBanner__add .LineBanner__addId {
display: flex;
align-items: center;
gap: 0.5em;
font-size: calc(18 * var(--px));
}
.LineBanner .LineBanner__add .LineBanner__addId::before {
content: "";
flex-shrink: 0;
aspect-ratio: 32/24;
width: auto;
height: 1.33em;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%;
}
@media (max-width: 880px) {
.LineBanner .LineBanner__add .LineBanner__addId {
font-size: calc(24 * var(--px));
}
}
.LineBanner__qr {
position: absolute;
top: calc(40 * var(--px));
right: calc(60 * var(--px));
aspect-ratio: 1;
width: calc(160 * var(--px));
height: auto;
background-color: #fff;
}
@media (max-width: 880px) {
.LineBanner__qr {
display: none;
}
}
.LineBanner__qr img {
width: 100%;
height: 100%;
}
.LineBanner__qr span {
display: grid;
place-content: center;
width: 100%;
height: 100%;
color: #14cb3a;
font-size: calc(24 * var(--px));
font-weight: bold;
}
.LineBanner__button {
position: absolute;
bottom: calc(40 * var(--px));
left: calc(320 * var(--px));
width: calc(320 * var(--px));
height: calc(90 * var(--px));
border-radius: calc(12 * var(--px));
background-color: #fff;
color: #14cb3a;
font-size: calc(28 * var(--px));
font-weight: bold;
display: grid;
place-content: center;
}
@media (min-width: 880.1px) {
.LineBanner__button {
display: none;
}
}