@charset "UTF-8";
/* ===========================================
* Foundation
* ======================================== */
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
/* TOPへ戻るのボタン */
.c-btn.fin {
text-align: center;
margin: 0 auto;
margin-top: 80px;
max-width: 389px;
background-color: gray;
}
@media screen and (max-width: 1024px) {
.c-btn.fin {
max-width: 336px;
}
}
/* TOPへ戻るボタンの挙動 */
.c-btn.fin {
text-align: center;
margin: 0 auto;
margin-top: 80px;
max-width: 389px;
background-color: gray;
}
.c-btn__link.back::after {
background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_93_606)'%3E%3Cmask id='mask0_93_606' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='26' height='26'%3E%3Cpath d='M0 26L26 26L26 0L2.27299e-06 -2.27299e-06L0 26Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_93_606)'%3E%3Cpath d='M12.9998 -0.000489418C15.5708 -0.000289193 18.0841 0.76221 20.2218 2.19061C22.3595 3.61911 24.0256 5.64941 25.0095 8.02471C25.9934 10.4001 26.2508 13.0138 25.7493 15.5355C25.2477 18.0571 24.0097 20.3734 22.1918 22.1915C20.9887 23.4169 19.5548 24.3918 17.9729 25.0598C16.3909 25.7279 14.6923 26.076 12.975 26.0838C11.2578 26.0917 9.55602 25.7593 7.96802 25.1058C6.38002 24.4523 4.93722 23.4906 3.72292 22.2764C2.50862 21.0621 1.54702 19.6193 0.893517 18.0313C0.240017 16.4432 -0.0924823 14.7415 -0.0845821 13.0242C-0.076682 11.307 0.271418 9.60841 0.939418 8.02641C1.60752 6.44451 2.58242 5.01061 3.80782 3.80751C5.01212 2.59651 6.44462 1.63641 8.02242 0.982809C9.60022 0.32921 11.2919 -0.00508957 12.9998 -0.000489418ZM18.9998 14.2775L18.9998 11.8435L10.3298 11.8435L14.1298 7.84351L12.3758 5.99951L5.67582 13.0595L12.3758 20.1205L14.1258 18.2775L10.3258 14.2775L18.9998 14.2775Z' fill='white'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_93_606'%3E%3Crect width='26' height='26' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
background-size: contain;
transition: left 0.2s;
transform: translateY(-50%);
left: 20px;
}
.c-btn__link.back:hover::after {
left: 15px;
}
@media screen and (max-width: 1024px) {
.c-btn.fin {
max-width: 336px;
}
}
/* 資料ダウンロードバナー */
.p-bnr {
margin-top: 68px;
padding-bottom: 50px;
}
.p-bnr__link {
display: block;
max-width: 585px;
margin-inline: auto;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
transition: opacity 0.25s;
}
.p-bnr__link:hover {
opacity: 0.7;
}
@media screen and (max-width: 1024px) {
.p-bnr {
margin-top: 40px;
padding-bottom: 40px;
}
}
/* 仕上がりイメージ */
.p-image-item {
display: flex;
align-items: center;
gap: 24px 88px;
margin-right: calc(50% - 50vw);
}
.p-image-item:nth-child(even) {
flex-direction: row-reverse;
margin-right: auto;
margin-left: calc(50% - 50vw);
}
.p-image-item + .p-image-item {
margin-top: 88px;
}
.p-image-item__body {
max-width: 390px;
}
.p-image-item__heading {
font-family: var(--ff-serif);
font-size: 21px;
font-weight: var(--fw-bold);
color: var(--c-accent);
letter-spacing: 0.05em;
border-bottom: solid 1px #707070;
max-width: fit-content;
padding-bottom: 12px;
}
.p-image-item__text {
font-size: 15px;
font-weight: var(--fw-regular);
letter-spacing: 0;
line-height: 2.3;
margin-top: 20px;
}
.p-image-item__pic {
max-width: 798px;
position: relative;
}
.p-image-item__pic::after {
content: "";
position: absolute;
mask: url('data:image/svg+xml,');
mask-size: contain;
width: 31px;
aspect-ratio: 1;
background-color: var(--c-white);
top: 18px;
left: 15px;
}
.p-image-item__link {
transition: opacity 0.25s;
}
.p-image-item__link:hover {
opacity: 0.7;
}
.p-image-item:nth-child(even) .p-image-item__pic::after {
left: auto;
right: 15px;
}
@media screen and (max-width: 1024px) {
.p-image-item,
.p-image-item:nth-child(even) {
flex-direction: column-reverse;
margin: 0;
}
.p-image-item + .p-image-item {
margin-top: 80px;
}
.p-image-item__body {
max-width: 798px;
width: 100%;
}
.p-image-item__heading {
font-size: 20px;
padding-bottom: 12px;
}
.p-image-item__pic {
margin: 0 calc(50% - 50vw);
}
.p-image-item__text {
line-height: 1.8;
letter-spacing: 0.038em;
margin-top: 20px;
}
.p-image-item__pic::after {
mask: url('data:image/svg+xml,');
width: 18px;
top: 12px;
left: 12px;
}
.p-image-item:nth-child(even) .p-image-item__pic::after {
right: auto;
left: 12px;
}
}
/* 仕上がりイメージモーダル */
.p-image-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: transparent;
width: 100%;
height: 100%;
max-width: 100vw !important;
max-height: 100lvh !important;
margin: 0;
padding: 0;
border: none;
}
.p-image-modal[open] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.p-image-modal__close {
position: fixed;
top: 10px;
right: 10px;
font-size: 40px;
color: var(--c-white);
pointer-events: none;
}
.p-image-modal::backdrop {
background-color: rgba(0, 0, 0, 0.8);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.p-image-modal__body {
margin-inline: auto;
width: 90vw;
max-width: 1258px;
height: 473px;
max-height: 90vh;
display: grid;
grid-template-columns: 430px 1fr;
background-color: var(--c-white);
overflow: auto;
}
.p-image-modal__content {
padding: clamp(2.5rem, -2.266rem + 7.45vw, 4.25rem); /* 68-40 */
display: grid;
place-content: center;
}
.p-image-modal__scroll {
width: 100%;
overflow: auto;
}
.p-image-modal__variation-list.p-variation-list {
row-gap: 24px;
grid-template-columns: repeat(2, 346px);
width: 100%;
min-height: 330px;
}
.p-image-modal__variation-list .p-variation-list__item {
padding-right: 0;
}
.p-image-modal__variation-list .p-variation-list__item:nth-child(-n + 3) {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
.p-image-modal__variation-list .p-variation-list__pic {
position: relative;
}
.p-image-modal__variation-list .p-variation-list__pic span {
position: absolute;
display: block;
font-size: 20px;
font-weight: 700;
color: var(--c-white);
left: 8px;
top: 4px;
}
@media screen and (max-width: 1024px) {
.p-image-modal__body {
grid-template-columns: 1fr;
max-width: 336px;
overflow: hidden;
}
.p-image-modal__body {
height: auto;
}
.p-image-modal__pic {
text-align: center;
}
.p-image-modal__pic > img {
max-height: auto;
width: 100%;
}
.p-image-modal__variation-list.p-variation-list {
min-height: auto;
}
.p-image-modal__content {
max-width: fit-content;
padding: 32px 0 24px 18px;
}
.p-image-modal__variation-list.p-variation-list {
display: flex;
flex-wrap: nowrap;
max-width: none;
}
.p-image-modal__variation-list .p-variation-list__item {
padding-bottom: 26px !important;
flex-shrink: 0;
}
.p-image-modal__variation-list .p-variation-list__item:last-child {
padding-right: 40px;
}
.p-image-modal__variation-list .p-variation-list__pic {
max-width: 95px;
}
.p-image-modal__variation-list .p-variation-list__colors-label {
font-size: 11px;
}
.p-image-modal__variation-list .p-variation-list__colors dd {
font-size: 12px;
}
.p-image-modal__variation-list .p-variation-list__colors-label.-base {
margin-top: 16px;
}
.p-image-modal__scroll {
scrollbar-color: #aaa #e5e5e5;
}
.p-image-modal__scroll::-webkit-scrollbar-track {
background: #e5e5e5; /* トラックの色 */
border-radius: 5px;
background-color: #e5e5e5;
}
.p-image-modal__scroll::-webkit-scrollbar-thumb {
background: #aaa; /* バーの色 */
border-radius: 5px;
background-color: #aaa;
}
.p-image-modal__variation-list .p-variation-list__pic span{
font-size: 14px;
font-weight: 600;
top: 8px;
left: 8px;
}
}
/*# sourceMappingURL=style.css.map */