@charset "UTF-8";
/* ===== destyle.css v4.0.0 ===== */
*,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
}

html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}

body {
margin: 0;
}

main {
display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}

ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}

dt {
font-weight: bold;
}

dd {
margin-left: 0;
}

hr {
box-sizing: content-box;
height: 0;
overflow: visible;
border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
}

pre {
font-family: monospace, monospace;
font-size: inherit;
}

address {
font-style: inherit;
}

a {
background-color: transparent;
text-decoration: none;
color: inherit;
}

abbr[title] {
text-decoration: underline dotted;
}

b,
strong {
font-weight: bolder;
}

code,
kbd,
samp {
font-family: monospace, monospace;
font-size: inherit;
}

small {
font-size: 80%;
}

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sub {
bottom: -0.25em;
}

sup {
top: -0.5em;
}

svg,
img,
embed,
object,
iframe {
vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit;
}

button,
[type=button],
[type=reset],
[type=submit] {
cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
cursor: default;
}

:-moz-focusring {
outline: auto;
}

select:disabled {
opacity: inherit;
}

option {
padding: 0;
}

fieldset {
margin: 0;
padding: 0;
min-width: 0;
}

legend {
padding: 0;
}

progress {
vertical-align: baseline;
}

textarea {
overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}

::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}

[type=number] {
  -moz-appearance: textfield;
}

label[for] {
cursor: pointer;
}

details {
display: block;
}

summary {
display: list-item;
}

[contenteditable]:focus {
outline: auto;
}

table {
border-color: inherit;
border-collapse: collapse;
}

caption {
text-align: left;
}

td,
th {
vertical-align: top;
padding: 0;
}

th {
text-align: left;
font-weight: bold;
}

/* ===== 共通アニメーション ===== */
.js-fadein, .js-fadein-child > * {
opacity: 0;
transition: opacity 0.6s;
}
.js-fadein.on, .js-fadein-child > *.on {
opacity: 1;
}

/* ===== ベーススタイル ===== */
body {
font: 12px/1.5 "neue-haas-grotesk-display", "ryo-gothic-plusn", sans-serif;
color: #000;
background: #FFF;
}

body,
#contents,
.inner {
background-color: #ffffff;
}

/* -- inner -- */
.inner {
display: flex;
position: relative;
transition: left 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media screen and (max-width: 900px) {
.inner {
display: block;
}
}

/* -- tag -- */
a {
color: #000;
text-decoration: none;
transition: opacity 0.6s;
}
@media screen and (min-width: 901px) {
a:hover {
opacity: 0.6;
}
}

img {
width: 100%;
height: auto;
}

/* -- hide -- */
@media screen and (min-width: 901px) {
.hide-pc {
display: none !important;
}
}
@media screen and (max-width: 900px) {
.hide-sp {
display: none !important;
}
}

/* ===== footer (固定解除・末尾配置) ===== */
.footer {
position: relative !important;
top: auto !important;
right: auto !important;
transform: none !important;
opacity: 1 !important;
z-index: 10;
}

/* PC版：横スクロールの最右端・縦並び */
@media screen and (min-width: 901px) {
.footer {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: end;
height: 100vh;
padding: 0 60px 0 80px !important;
margin: 0 !important;
flex-shrink: 0;
}

.footer-link {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
margin: 0 0 23px 0 !important;
padding: 0 !important;
gap: 13px !important;
}

.footer-link li {
margin: 0 !important;
}
.footer-link li.copy img{
width: 16px;
height: auto;
object-fit: contain;
}
.footer div.copy{
display: none;
}
}

/* SP版：縦スクロールの最下部・横並び */
@media screen and (max-width: 900px) {
.footer {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
padding: 60px 0 80px !important;
margin: 0 !important;
}

.footer-link {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
gap: 32px !important;
}

.footer-link li {
margin: 0 !important;
}
.footer-link li.copy{
display: none;
}
.footer div.copy{
display: block;
}
.footer div.copy img{
width: auto;
height: 16px;
object-fit: contain;
}
}

/* ===== contents ===== */
#contents {
display: flex;
align-items: center;
min-height: 100vh;
overflow-x: scroll;
overflow-y: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
#contents::-webkit-scrollbar {
display: none;
}
@media screen and (max-width: 900px) {
#contents {
display: block;
overflow-x: hidden;
}
}

/* -- simplebar -- */
.simplebar-track {
height: 16px !important;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
top: 4px;
height: 8px;
}
.simplebar-scrollbar::before {
background: rgba(0, 0, 0, 0.5);
border-radius: 10em;
height: 8px !important;
margin: 0 3px;
}
.simplebar-scrollbar.simplebar-visible::before {
opacity: 1;
}

/* ===== mv ===== */
.mv {
position: relative;
flex: 0 0 100vw !important;
width: 100vw !important;
min-width: 100vw !important;
height: 100vh !important;
height: 100svh !important;
overflow: hidden;
background-color: #d2e0e0; / 背景に画像同系色を敷いてサブピクセル隙間の白線を防止 */
}

/* ===== MV アニメーション ===== */
@keyframes zoomFadeIn {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}

@keyframes wipeInLeft {
0% {
opacity: 0;
clip-path: inset(0 100% 0 0);
transform: translateX(-15px);
}
100% {
opacity: 1;
clip-path: inset(0 0 0 0);
transform: translateX(0);
}
}

@keyframes simpleFadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

.mv .mv-visual-pc img,
.mv .mv-visual-sp img,
.mv .mv-txtcnt-tit,
.mv .mv-txtcnt-subtit,
.mv .mv-scroll,
.mv .mv-txt-lt {
opacity: 0;
}

.mv.is-animated .mv-txtcnt {
opacity: 1;
}

@media screen and (min-width: 901px) {
.mv.is-animated .mv-visual-pc img {
animation: zoomFadeIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.mv.is-animated .mv-visual-pc img:nth-child(1) { animation-delay: 0.2s; }
.mv.is-animated .mv-visual-pc img:nth-child(2) { animation-delay: 0.8s; }
.mv.is-animated .mv-visual-pc img:nth-child(3) { animation-delay: 1.4s; }

.mv.is-animated .mv-txtcnt-tit,
.mv.is-animated .mv-txtcnt-subtit {
animation: wipeInLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 2.2s;
}

.mv.is-animated .mv-scroll,
.mv.is-animated .mv-txt-lt {
animation: simpleFadeIn 1s ease forwards;
animation-delay: 2.6s;
}
}

@media screen and (max-width: 900px) {
.mv.is-animated .mv-visual-sp img {
animation: zoomFadeIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.mv.is-animated .mv-visual-sp img:nth-child(1) { animation-delay: 0.2s; }
.mv.is-animated .mv-visual-sp img:nth-child(2) { animation-delay: 0.6s; }
.mv.is-animated .mv-visual-sp img:nth-child(3) { animation-delay: 1.0s; }
.mv.is-animated .mv-visual-sp img:nth-child(4) { animation-delay: 1.4s; }

.mv.is-animated .mv-txtcnt-tit,
.mv.is-animated .mv-txtcnt-subtit {
animation: wipeInLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 2.2s;
}

.mv.is-animated .mv-txt-lt {
animation: simpleFadeIn 1s ease forwards;
animation-delay: 2.6s;
}
}

.mv-visual {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #d2e0e0;
}

.mv-visual-pc {
display: flex;
width: 100%;
height: 100%;
background-color: #d2e0e0;
}
.mv-visual-pc img {
width: 33.3334%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
backface-visibility: hidden;
transform: translateZ(0);
}

.mv-visual-sp {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0;
width: 100%;
height: 100%;
background-color: #d2e0e0; /* 画像背景同系色 */
}
.mv-visual-sp img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
backface-visibility: hidden;
transform: translateZ(0);
}

/* 左上固定ロゴ */
.mv-txt-lt {
position: fixed;
top: 24px;
left: 23px;
z-index: 9999;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
pointer-events: none;
mix-blend-mode: difference;
isolation: auto;
}

.mv-txt-lt.is-show {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.mv-txt-lt img {
display: block;
width: auto;
height: 16px;
filter: brightness(0) invert(1);
}

.mv-txtcnt {
position: absolute;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
width: 70%;
text-align: center;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.mv-txtcnt-tit {
display: block;
width: 100%;
}
.mv-txtcnt-tit img {
display: block;
margin: 0 auto;
width: 100%;
max-width: 800px;
height: auto;
}

.mv-txtcnt-subtit {
display: block;
margin: 15px auto 0;
font-weight: 500;
font-size: 16px;
letter-spacing: 0.04em;
color: #FFF;
order: 2;
min-height: 0;
height: auto;
}

.mv-scroll {
font-weight: 500;
font-size: 10px;
letter-spacing: 0.12em;
text-align: right;
position: absolute !important;
bottom: 31px !important;
right: 41px !important;
width: 80px;
color: #FFF;
z-index: 2;
display: block !important;
}
.mv-scroll a {
display: block;
position: relative;
overflow: hidden;
padding-bottom: 5px;
color: #FFF;
}
.mv-scroll a::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #FFF;
content: "";
animation: anm_scroll 1.5s infinite;
}

@keyframes anm_scroll {
0% { transform: translateX(-100%); }
100% { transform: translateX(110%); }
}

@media screen and (max-width: 900px) {
.mv {
height: auto !important;
min-height: auto !important;
}

.mv-visual {
position: relative;
height: auto;
}

.mv-txtcnt {
width: 84%;
}

.mv-txtcnt-tit img {
max-width: 100%;
}

.mv-visual-sp {
height: auto;
grid-template-rows: auto;
}

.mv-visual-sp img {
height: auto;
object-fit: visible;
}

.mv-scroll {
display: none !important;
}
}

/* ===== catch ===== */
.catch {
display: flex;
align-items: center;
justify-content: center;
min-width: 680px;
height: 100vh;
padding: 0 6vw;
}
.catch-txt {
font-size: 13px;
line-height: 2.2;
letter-spacing: 0.04em;
text-align: left;
}
.catch-txt-sub {
border-top: 1px solid #9B9B9B;
padding-top: 14px;
margin-top: 80px;
font-size: 11px;
line-height: 1.8;
color: #797979;
}
.catch-txt > *:not(:last-child) {
margin-bottom: 28px;
}
@media screen and (max-width: 900px) {
.catch {
display: block;
margin: 110px 24px 80px;
min-width: auto;
height: auto;
padding: 0;
}
.catch-txt {
font-size: 11px;
line-height: 2.1;
text-align: center;
letter-spacing: 0.03em;
}
.catch-txt-sub {
padding-top: 16px;
margin-top: 80px;
font-size: 10px;
line-height: 1.85;
}
.catch-txt > *:not(:last-child) {
margin-bottom: 24px;
}
}

/* ===== item ===== */
.item {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
margin-left: 6vw;
height: 100vh;
}
.item > *:not(:last-child) {
margin-right: 10vw;
}
.item-img {
display: flex;
align-items: center;
}

@media screen and (min-width: 901px) {
.item-img img {
width: auto;
object-fit: contain;
}

.item-img.is-large img,
#gsapy01 .item-img img,
#gsapy04 .item-img img,
#gsapy08 .item-img img {
height: 100vh;
max-height: 100%;
}

.item-img.is-middle img,
#gsapy03 .item-img img,
#gsapy06 .item-img img {
height: calc(100vh - 80px);
max-height: calc(100% - 80px);
}

.item-img.is-small img,
#gsapy02 .item-img img,
#gsapy05 .item-img img,
#gsapy07 .item-img img {
height: calc(100vh - 340px);
max-height: calc(100% - 340px);
}
}

@keyframes itemFadeInUp {
0% {
opacity: 0;
transform: translateY(40px) !important;
}
100% {
opacity: 1;
transform: translateY(0) !important;
}
}

@media screen and (max-width: 900px) {
.item {
display: block;
margin-left: 0 !important;
padding: 0 0px;
height: auto;
left: 0 !important;
transform: none !important;
}
.item > * {
padding-top: 0;
height: auto;
margin-bottom: 64px;
}
.item > *:last-child {
margin-bottom: 0;
}
.item > *:not(:last-child) {
margin-right: 0;
}

.item-img {
display: flex;
justify-content: center;
width: 100%;
box-sizing: border-box;
left: 0 !important;
}

.item-img img {
width: 100%;
height: auto;
max-width: 100%;
left: 0 !important;
}

.item-img.is-large,
#gsapy01 .item-img,
#gsapy04 .item-img,
#gsapy08 .item-img {
padding: 0;
}

.item-img.is-middle,
#gsapy03 .item-img,
#gsapy06 .item-img {
padding: 0 20px;
}

.item-img.is-small,
#gsapy02 .item-img,
#gsapy05 .item-img,
#gsapy07 .item-img {
padding: 0 80px;
}

.item-img img {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}

.item.on .item-img img,
.item-img.on img,
.js-fadein.on .item-img img,
.js-fadein-child.on .item-img img {
opacity: 1 !important;
transform: translateY(0) !important;
}

.item.is-animated .item-img img {
animation: itemFadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
}

/* ===== goods ===== */
.goods {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
margin-left: 8vw;
padding-right: 10vw;
height: 100vh;
}

.goods-head-tit {
font-weight: 500;
font-size: 13px;
letter-spacing: 0.02em;
margin-right: 60px;
white-space: nowrap;
align-self: flex-start;
margin-top: 15vh;
}

.goods-item {
margin-right: 80px;
}

.goods-info {
margin-bottom: 20px;
cursor: pointer;
transition: opacity 0.3s ease;
}

@media screen and (min-width: 901px) {
.goods-info:hover {
opacity: 0.6;
}
}

.goods-tit-sub {
font-size: 10px;
color: #9B9B9B;
margin-bottom: 12px;
}
.goods-tit {
font-weight: 500;
font-size: 18px;
line-height: 1.25;
letter-spacing: 0.03em;
}
.goods-price {
font-weight: 500;
font-size: 13px;
margin-top: 4px;
letter-spacing: 0.03em;
}

.goods-img {
display: flex;
align-items: flex-start;
gap: 2px;
}

.goods-img > * {
cursor: pointer;
display: block;
position: relative;
overflow: hidden;
}

.goods-img img {
width: 270px;
height: auto;
display: block;
transition: transform 0.4s ease;
}

@media screen and (min-width: 901px) {
.goods-img > *:hover img {
transform: scale(1.05);
}
}

.goods-color {
font-size: 10px;
color: #797979;
margin-top: 10px;
letter-spacing: 0.04em;
}

@media screen and (max-width: 900px) {
.goods {
display: block;
margin: 110px 20px 0;
padding: 0 0 120px;
height: auto;
}

.goods-head-tit {
text-align: center;
margin-right: 0;
margin-top: 0;
margin-bottom: 8px;
font-size: 13px;
}
.goods-item {
margin-right: 0;
margin-bottom: 75px;
}
.goods-item:last-child {
margin-bottom: 0;
}
.goods-info {
text-align: center;
margin-bottom: 20px;
}
.goods-tit-sub {
font-size: 9px;
margin-bottom: 10px;
}
.goods-tit {
font-size: 16px;
}
.goods-price {
font-size: 12px;
}
.goods-img {
justify-content: center;
gap: 2px;
}
.goods-img > * {
width: 48%;
max-width: 160px;
}
.goods-img img {
width: 100%;
max-width: 100%;
}
.goods-color {
text-align: center;
margin-top: 10px;
font-size: 10px;
}
}

/* ===== modal ===== */
.modal {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
padding: 20px;
width: 100vw;
height: 100vh;
height: 100dvh;
opacity: 0;
z-index: 10001; /* 固定ロゴ(.mv-txt-lt: 9999)より上 */
transition: opacity 0.4s ease;
pointer-events: none;
}
.modal.is-active {
opacity: 1;
pointer-events: auto;
}
.modal-open {
filter: blur(21px);
z-index: 980;
}
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh;
background: rgba(0, 0, 0, 0.45);
z-index: 10000; /* 固定ロゴより上・モーダル本体より下 */
display: none;
}
.modal-bg.act {
display: block;
}

.modal-body {
position: relative;
width: 100%;
max-width: 860px;
margin: auto;
background: #FFF;
border-radius: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: visible !important;
}

.modal-close {
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
width: 24px;
height: 24px;
border: none;
background: none;
z-index: 100;
padding: 0;
}
.modal-close::before,
.modal-close::after {
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 1px;
background: #000;
content: "";
}
.modal-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.modal-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
border: none;
background: none;
}

/* PC時の外側矢印ナビゲーション */
.modal-body #modalSlider > .splide__arrows > .splide__arrow {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background: none;
border: none;
z-index: 1000;
}
.modal-body #modalSlider > .splide__arrows > .splide__arrow--prev {
left: -65px;
}
.modal-body #modalSlider > .splide__arrows > .splide__arrow--next {
right: -65px;
}
.modal-body #modalSlider > .splide__arrows > .splide__arrow svg {
display: none;
}
.modal-body #modalSlider > .splide__arrows > .splide__arrow::before {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
content: "";
}
.modal-body #modalSlider > .splide__arrows > .splide__arrow--prev::before {
transform: translate(-25%, -50%) rotate(-135deg);
}
.modal-body #modalSlider > .splide__arrows > .splide__arrow--next::before {
transform: translate(-75%, -50%) rotate(45deg);
}

.modal-inner {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"slider info"
"slider text";
align-items: start;
padding: 44px 48px;
gap: 0 40px;
}

.modal .modal-slider {
grid-area: slider;
width: 100%;
position: relative;
padding-bottom: 28px;
}
.modal .modal-slider .splide__slide {
display: flex;
align-items: center;
justify-content: center;
height: 390px;
}
.modal .modal-slider img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

.modal .modal-slider .splide__pagination {
bottom: 8px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 6px;
padding: 0;
z-index: 10;
}
.modal .modal-slider .splide__pagination li {
display: flex;
align-items: center;
}
.modal .modal-slider .splide__pagination button {
width: 4px;
height: 4px;
background: #b5b5b5;
border: none;
border-radius: 50%;
padding: 0;
opacity: 1;
transition: background 0.3s, transform 0.3s;
}
.modal .modal-slider .splide__pagination button.is-active {
background: #000;
transform: scale(1.2);
}

.modal-info {
grid-area: info;
display: flex;
flex-direction: column;
justify-content: center;
}
.modal-txtcnt-sub {
font-size: 11px;
color: #9B9B9B;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.modal-txtcnt-tit {
font-weight: 500;
font-size: 20px;
line-height: 1.3;
letter-spacing: 0.02em;
color: #000;
margin-bottom: 6px;
}
.modal-txtcnt-price {
font-weight: 500;
font-size: 14px;
letter-spacing: 0.04em;
color: #000;
margin-bottom: 16px;
}
.modal-txtcnt-btn {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-weight: 500;
font-size: 12px;
color: #000;
margin-bottom: 24px;
}

.modal-txtcnt-btn a {
display: inline-flex;
align-items: center;
justify-content: center;
height: 18px;
padding: 2px 8px 1px;
background: #000;
border-radius: 2px;
font-style: italic;
font-weight: 600;
font-size: 10px;
line-height: 1;
letter-spacing: 0.08em;
color: #FFF;
margin-left: 4px;
text-align: center;
box-sizing: border-box;
}

.modal-txtcnt-txt {
grid-area: text;
font-size: 12px;
line-height: 1.85;
color: #000;
letter-spacing: 0.02em;
margin-top: 0;
}

/* SPモーダル調整（幅の拡大・余白最適化） */
@media screen and (max-width: 900px) {
.modal {
padding: 20px 16px;
height: 100vh;
height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.modal-body {
width: 90%;
max-width: 420px; / 四角を大きく調整 */
max-height: calc(100dvh - 40px);
overflow-y: auto;
border-radius: 0;
margin: auto;
}
.modal-close {
top: 14px;
right: 14px;
width: 20px;
height: 20px;
}

.modal-inner {
display: flex;
flex-direction: column;
padding: 28px 24px 28px;
}

.modal-info {
order: 1;
margin-bottom: 18px;
}
.modal-txtcnt-sub {
margin-bottom: 4px;
}
.modal-txtcnt-tit {
font-size: 17px;
margin-bottom: 4px;
}
.modal-txtcnt-price {
font-size: 13px;
margin-bottom: 10px;
}
.modal-txtcnt-btn {
margin-bottom: 0;
}

.modal .modal-slider {
order: 2;
width: 100%;
margin-bottom: 16px;
padding-bottom: 24px;
}
.modal .modal-slider .splide__slide {
height: 280px; /* 枠の拡大に合わせて画像表示エリアも拡大 */
}

.modal-txtcnt-txt {
order: 3;
font-size: 11px;
line-height: 1.8;
}
}