@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('reset.css');
@import url('swiper-bundle.min.css');
@import url('fancybox.css');
@font-face {
font-family: 'Material Symbols';
font-style: normal;
src: url('material-symbols-sharp.woff2') format('woff2');
}

/* ####################################### */
/* css変数 */
/* ####################################### */
:root {
/* brand-color */
--brand-color: #d0a4c7;
--brand-rgb: 208, 164, 199;

/* sub-color */
--sub-black: #000; /* Black */
--sub-white: #fff; /* White */
/* Gray https://coolors.co/000000-66666e-9999a1-e6e6e9-f4f4f6 */
--sub-color-black: #333; /* Black */
--sub-color-gray-dark: #66666e; /* Dim gray */
--sub-color-gray: #9999a1; /* Taupe gray */
--sub-color-gray-light: #e6e6e9; /* Platinum */
--sub-color-gray-white: #f4f4f6; /* Anti-flash white */
--sub-color-red: #d00000; /* Red */
--sub-color-green: #52b788; /* Green */
--sub-color-gold: #7b5f34; /* Gold */
--sub-color-purple: #694895; /* Purple */

/* Make https://min-max-calculator.9elements.com */
/* VALUES px VIEWPORT min:320px | max:1920px */
/* Browser font: 16px */
--fsize-ss: clamp(0.563rem, 0.55rem + 0.06vw, 0.625rem); /* 9 - 10 */
--fsize-s: clamp(0.625rem, 0.6rem + 0.13vw, 0.75rem); /* 10 - 12 */
--fsize-m: clamp(0.75rem, 0.725rem + 0.13vw, 0.875rem); /* 12 - 14 */
--fsize-xm: clamp(0.875rem, 0.85rem + 0.13vw, 1rem); /* 14 - 16 */
--fsize-xxm: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); /* 16 - 20 */
--fsize-l: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem); /* 20 - 24 */
--fsize-xl: clamp(1.5rem, 1.4rem + 0.5vw, 2rem); /* 24 - 32 */
--fsize-xxl: clamp(2rem, 1.8rem + 1vw, 3rem); /* 32 - 48 */
--fsize-icon: 1rem;

/* Width */
--w-min: 360px;
--w-max: 1440px;
--w-normal: 1024px;
--w-narrow: 640px;
--w-960: 960px;
/* calc(--w-960 / Num); */
--w-30: 30%;
--w-50: 50%;
--w-70: 70%;
--w-80: 80%;
--w-90: 90%;
--w-100: 100%;

/* Height */
--h-header: 100px;
--h-input: 3rem;

/* Spacer */
--spacer-100: clamp(5rem, 4.75rem + 1.25vw, 6.25rem); /* 80 - 100 */
--spacer-200: clamp(10rem, 9.5rem + 2.5vw, 12.5rem); /* 160 - 200 */

/* Radius */
--r-0: 0.125rem;
--r-1: 0.25rem;
--r-2: 0.5rem;
--r-3: 1rem;
--r-50: 50%;
--r-100: 100vh;

/* Column */
--column-num: 2;

/* Gap */
--gap-0: 0.125rem;
--gap-1: 0.25rem;
--gap-2: 0.5rem;
--gap-3: 1rem;
--gap-4: 2rem;
--gap-5: 3rem;
--gap-6: 3.75rem;
/* Other calc(var(--gap-3) * Num); */

/* Fancybox */
--fancybox-zIndex: 9999;
}

@media screen and (width < 768px) and (orientation: portrait),
(width < 1024px) and (orientation: landscape) {
:root {
--fsize-xxm: clamp(1rem, 0.975rem + 0.13vw, 1.125rem); /* 16 - 18 */
--fsize-l: clamp(1.125rem, 1.1rem + 0.13vw, 1.25rem); /* 18 - 20 */
--fsize-xl: clamp(1.25rem, 1.225rem + 0.13vw, 1.375rem); /* 20 - 22 */
--fsize-xxl: clamp(1.375rem, 1.35rem + 0.13vw, 1.5rem); /* 22 - 24 */

--spacer-100: clamp(3.75rem, 3.5rem + 1.25vw, 5rem); /* 60 - 80 */
--spacer-200: clamp(7.5rem, 7rem + 2.5vw, 10rem); /* 120 - 160 */
}
} /* width < 768px, 1024px */


/* ####################################### */
/* Common */
/* ####################################### */
html {
scroll-behavior: smooth;
}

body {
margin: 0;
padding: 0;
color: var(--sub-color-black);
background-color: var(--sub-white);
font-weight: 400;
font-size: var(--fsize-m);
line-height: 1.6;
font-family: "Noto Sans JP", sans-serif;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

html.is-loading,
html.is-loading body {
position: fixed;
overflow: hidden;
width: 100%;
height: 100dvh;
}

:where(.material-symbols, .material-symbols-fill) {
vertical-align: middle;
margin: 0;
padding: 0;
font: normal normal var(--fsize-icon, 16px) 'Material Symbols';
/*font-family: 'Material Symbols';
font-style: normal;
font-weight: normal;*/
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.material-symbols {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-fill {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

strong, b, .bold {
font-weight: bold;
}

:where(header, #menu-full, #contents-jpa, footer) a {
text-decoration: none;
}
.note:not(.shop-item-buy .note) {
color: var(--sub-color-gray-dark) !important;
font-size: var(--fsize-s) !important;
}
.attention, .error {
color: var(--sub-color-red) !important;
}
.require {
color: var(--sub-white);
background-color: var(--brand-color) !important;
font: normal var(--fsize-s)/ 1.4 "Noto Sans", sans-serif !important;
white-space: nowrap;
border-radius: var(--r-100);
margin-inline: var(--gap-2);
padding: 0 var(--gap-1);
}

.is-en {
font-family: "Noto Sans", sans-serif;
}
.is-serif {
font-family: serif;
}

:where(.h2, .font-xl) {
font-size: var(--fsize-xl) !important;
}
:where(.h3, .font-l) {
font-size: var(--fsize-l) !important;
}
:where(.h4, .font-xxm) {
font-size: var(--fsize-xxm) !important;
}
:where(.h5, .h6, .font-xm) {
font-size: var(--fsize-xm) !important;
}
.font-m {
font-size: var(--fsize-m) !important;
}
.font-s {
font-size: var(--fsize-s) !important;
}
.font-ss {
font-size: var(--fsize-ss) !important;
}

.txt-brand {
color: var(--brand-color) !important;
}
.txt-gold {
color: var(--sub-color-gold) !important;
}
.txt-purple {
color: var(--sub-color-purple) !important;
}
.txt-left {
text-align: left !important;
}
.txt-center {
text-align: center !important;
}
.txt-right {
text-align: right !important;
}
.txt-nowrap {
white-space: nowrap;
}

.mt-1 {
margin-block-start: var(--gap-1);
}
.mb-1 {
margin-block-end: var(--gap-1);
}
.mt-2 {
margin-block-start: var(--gap-2);
}
.mb-2 {
margin-block-end: var(--gap-2);
}
.mt-3 {
margin-block-start: var(--gap-3);
}
.mb-3 {
margin-block-end: var(--gap-3);
}
.mt-4 {
margin-block-start: var(--gap-4);
}
.mb-4 {
margin-block-end: var(--gap-4);
}
.mt-5 {
margin-block-start: var(--gap-5);
}
.mb-5 {
margin-block-end: var(--gap-5);
}
.mt-6 {
margin-block-start: var(--gap-6);
}
.mb-6 {
margin-block-end: var(--gap-6);
}

.pt-1 {
padding-block-start: var(--gap-1);
}
.pb-1 {
padding-block-end: var(--gap-1);
}
.pt-2 {
padding-block-start: var(--gap-2);
}
.pb-2 {
padding-block-end: var(--gap-2);
}
.pt-3 {
padding-block-start: var(--gap-3);
}
.pb-3 {
padding-block-end: var(--gap-3);
}
.pt-4 {
padding-block-start: var(--gap-4);
}
.pb-4 {
padding-block-end: var(--gap-4);
}
.pt-5 {
padding-block-start: var(--gap-5);
}
.pb-5 {
padding-block-end: var(--gap-5);
}
.pt-6 {
padding-block-start: var(--gap-6);
}
.pb-6 {
padding-block-end: var(--gap-6);
}

.w-50 {
width: var(--w-50) !important;
}
.w-100 {
width: var(--w-100) !important;
}

.has-sticky {
position: sticky;
top: calc(var(--h-header) + 1rem);
}

.has-disabled {
pointer-events: none;
opacity: 0.25;
}

/* ####################################### */
/* Phrase */
/* ####################################### */
#phrase-jpa,
.phrase-line {
display: flex;
justify-content: center;
align-items: center;
}

#phrase-jpa {
position: fixed;
z-index: 9999;
overflow: hidden;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100dvh;
color: var(--sub-white);
background-color: var(--brand-color);
transition: opacity 0.6s ease-out;
transition-delay: 1.0s;
}
#phrase-jpa.is-delete {
opacity: 0;
user-select: none;
}

.phrase-line {
align-items: start;
flex-direction: column;
gap: var(--gap-5);
margin-inline: auto;
width: max-content;
font: 500 var(--fsize-xl)/1.6 "Noto Sans JP", sans-serif;
letter-spacing: 0.375rem;
}

.phrase-line div {
animation: none;
opacity: 0;
pointer-events: none;
user-select: none;
}
.phrase-line div.fadein-word {
animation-name: fadein-line;
animation-duration: 1.2s;
animation-timing-function: cubic-bezier(.32,.88,.51,1);
animation-fill-mode: both;
}
.phrase-line div:nth-child(1) {
animation-delay: 0.4s;
}
.phrase-line div:nth-child(2) {
animation-delay: 0.8s;
}
.phrase-line div:nth-child(3) {
animation-delay: 1.2s;
}

@keyframes fadein-line {
0% {transform: translateY(5rem); filter: blur(0.75rem); opacity: 0;}
100% {transform: translateY(0); filter: blur(0); opacity: 1;}
}

/* ####################################### */
/* Header */
/* ####################################### */
#header-jpa {
display: flex;
justify-content: start;
align-items: center;
gap: var(--gap-2);
padding: 0 var(--gap-3);
width: 100%;
height: var(--h-header);
background-color: rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(0.75rem);
backdrop-filter: blur(0.75rem);
/*color: var(--sub-white);
mix-blend-mode: difference;*/
}
.has-fixed {
position: fixed;
z-index: 9990;
top: 0;
}

/* Logo */
.header-logo {
}
.header-logo img {
width: auto;
height: calc(var(--h-header) * 0.75);
object-fit: contain;
pointer-events: none;
}
#header-jpa h1 {
margin-block: 0;
margin-inline-end: auto;
font: normal var(--fsize-xm)/1.4 "Noto Sans JP", sans-serif;
}
#header-jpa h1 a span {
display: block;
}
#header-jpa h1 a span:first-child,
#header-jpa h1 a span:last-child {
font-size: var(--fsize-ss);
}
#header-jpa h1 a span:first-child {
display: none;
pointer-events: none;
}

/* Header Menu */
.header-menu {
display: flex;
/*flex-direction: column;*/
gap: var(--gap-4);
}
.header-menu ul {
margin: 0;
padding: 0;
}

/* Member Navi */
.member-navi {
display: flex;
flex-wrap: nowrap;
justify-content: end;
align-items: center;
column-gap: var(--gap-3);
padding-inline: var(--gap-3);
}
.member-navi :where(li, a) {
color: var(--sub-white);
background-color: var(--sub-color-black);
border-radius: var(--r-100);
white-space: nowrap;
}
.member-navi li a {
padding-block: var(--gap-1);
padding-inline: var(--gap-3);
}
.member-navi li:hover,
.member-navi li:hover a {
background-color: var(--brand-color);
}

/* Global Navi */
.header-navi {
display: flex;
flex-wrap: wrap;
justify-content: start;
align-items: center;
column-gap: var(--gap-3);
padding-inline: var(--gap-3);
}
.header-navi > :where(li, a) {
position: relative;
user-select: none;
cursor: pointer;
}
.header-navi > li {
padding-block: 0.25rem;
}
.header-navi > li::before {
background: var(--brand-color);
content: '';
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
margin: auto;
transform-origin: right top;
transform: scale(0, 1);
transition: transform .6s;
}
.header-navi > li:hover,
.header-navi > li:hover > a {
color: var(--brand-color);
}
.header-navi > li:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}
.header-navi > li.has-sub > a {
display: inline-flex;
gap: var(--gap-1);
}
.header-navi > li.has-sub > a::after {
content: "\e313";
font-family: 'Material Symbols';
}

/* Global Navi Sub */
.header-navi > li > .header-sub {
position: absolute;
top: calc(var(--fsize-m) * 2);
left: 50%;
z-index: 5;
width: max-content;
opacity: 0;
transform: translate(-50%, -5%);
transition: opacity 0.8s ease-out, transform 0.3s ease-out;
pointer-events: none;
}
.header-navi > li:hover > .header-sub {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
}
.header-navi > li > .header-sub > ul {
margin-block-start: var(--gap-3);
padding: var(--gap-3);
background-color: var(--sub-white);
border: 1px solid var(--sub-color-gray);
}
.header-navi > li > .header-sub li > a {
display: inline-flex;
justify-content: space-between;
gap: var(--gap-3);
width: 100%;
padding-block: var(--gap-2);
padding-inline: var(--gap-3);
color: var(--sub-black);
}
.header-navi > li > .header-sub li > a::after {
content: "\e941";
font-family: 'Material Symbols';
}
.header-navi > li > .header-sub li > a:hover {
color: var(--sub-white);
background-color: var(--brand-color);
}
.header-navi > li > .header-sub li:not(:last-child) > a {
border-bottom: 1px solid var(--sub-color-gray-light);
}
.header-navi > li > .header-sub li:not(:last-child) > a:hover {
border-bottom: 1px solid var(--brand-color);
}

/* Menu Full Open <-> Close Button */
html.is-loading .header-button {
pointer-events: none;
}
.header-button {
display: none;
}
.hamburger {
position: relative;
width: calc(var(--h-header) * 0.75);
height: var(--h-header);
border: none;
background-color: transparent;
cursor: pointer;
}
.hamburger.is-open .hamburger-line {
background-color: transparent;
}
.hamburger.is-open .hamburger-line::before {
top: 0;
transform: rotate(45deg);
}
.hamburger.is-open .hamburger-line::after {
top: 0;
transform: rotate(-45deg);
}
.hamburger-line {
display: block;
height: 1px;
position: absolute;
top: auto;
left: 50%;
transform: translateX(-50%);
width: var(--w-50);
background-color: var(--sub-color-black);
transition: transform 0.4s linear;
}
.hamburger-line::before,
.hamburger-line::after {
content: "";
display: block;
height: 100%;
position: absolute;
width: 100%;
background-color: var(--sub-color-black);
transition: inherit;
}
.hamburger-line::before {
top: -6px;
}
.hamburger-line::after {
top: 6px;
}

/* @Menu Full Open */
#header-jpa.is-open {
background-color: rgba(255, 255, 255, 0);
}
#header-jpa.is-open :where(h1, .header-logo) {
opacity: 0;
pointer-events: none;
}

@media screen and (width < 1280px) {
#header-jpa.is-open {
-webkit-backdrop-filter: blur(0);
backdrop-filter: blur(0);
}
#header-jpa :is(.member-navi, .header-navi) {
display: none;
}
.header-button {
display: block;
pointer-events: auto;
}
} /* width < 1280px */

/* ####################################### */
/* Menu Fullscreen */
/* ####################################### */
#menu-full {
position: fixed;
z-index: 9989;
top: 0;
left: 0;
color: var(--sub-white);
background-color: rgba(var(--brand-rgb), .5);
-webkit-backdrop-filter: blur(0.75rem);
backdrop-filter: blur(0.75rem);
width: 100%;
height: 100dvh;
/*visibility: hidden;*/
opacity: 0;
pointer-events: none;
transition: opacity .3s ease-out;
}
#menu-full.is-open {
/*visibility: visible;*/
opacity: 1;
pointer-events: auto;
}

/* Fullscreen Navi */
.full-navi {
margin-inline-start: auto;
margin-inline-end: 0;
margin-block: 0;
width: 70%;
max-width: 960px;
min-width: 360px;
height: 100dvh;
overflow-y: auto;
overflow-x: hidden;
color: var(--sub-color-black);
background-color: rgba(255, 255, 255, 1);
opacity: 0;
clip-path: inset(0 0 0 100%);
transition: all .6s cubic-bezier(1,0,.6,1);
pointer-events: none;
}
#menu-full.is-open .full-navi {
opacity: 1;
clip-path: inset(0 0 0 0);
pointer-events: auto;
}
.full-navi > div {
padding-block-start: var(--h-header);
padding-block-end: var(--gap-4);
padding-inline: var(--gap-4);
opacity: 0;
transition: opacity .6s ease-out;
pointer-events: none;
}
#menu-full.is-open .full-navi > div {
opacity: 1;
pointer-events: auto;
}

.full-navi .navi-heading {
color: var(--brand-color);
font-size: var(--fsize-xm);
font-weight: bold;
}

.full-navi ul {
margin: 0;
padding: 0;
}
.full-navi ul :where(li, a) {
white-space: nowrap;
}
.full-navi ul li a {
display: inline-flex;
align-items: center;
gap: var(--gap-1);
width: 100%;
padding-block: var(--gap-2);
padding-inline: var(--gap-2);
user-select: none;
}
.full-navi ul li a:hover {
color: var(--brand-color);
}
.full-navi ul li:not(:last-child) a {
border-bottom: 1px solid var(--sub-color-gray-light);
}
.full-navi .column-main-menu ul li a::before {
content: "\e15b";
font-family: 'Material Symbols';
}

/* Main Menu Link */
.full-navi .column-main-menu {
width: calc((100% - var(--gap-3)) / 2);
border-top: 2px solid var(--brand-color);
}

/* Other Menu Link */
.full-navi .column-other-menu {
width: calc((100% - var(--gap-3)) / 2);
border-top: 2px solid var(--brand-color);
}

/* Login User Link */
.full-navi .column-user-menu {
width: calc((100% - var(--gap-3)) / 2);
border-top: 2px solid var(--brand-color);
}

/* Login Register Link */
.full-navi .column-member-menu {
margin-inline: auto;
width: calc((100% - var(--gap-3)) / 2);
}
.full-navi .column-member-menu ul {
display: flex;
gap: var(--gap-3);
}
.full-navi .column-member-menu :where(li, a) {
color: var(--sub-white);
background-color: var(--sub-color-black);
border-radius: var(--r-100);
white-space: nowrap;
}
.full-navi .column-member-menu li a {
padding-block: var(--gap-2);
padding-inline: var(--gap-3);
}
.full-navi .column-member-menu li:hover,
.full-navi .column-member-menu li:hover a {
color: var(--sub-white);
background-color: var(--brand-color);
}

/* Sub Menu Link */

/* About Link */

/* SNS Link */

/* ####################################### */
/* Form Reset */
/* ####################################### */
input[type="text"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="checkbox"],
input[type="radio"],
input[type="search"],
textarea,
select,
button {
all: revert;
box-sizing: border-box;
margin: 0;
outline: none;
}

/* Text, Text Area */
.form-control input {
white-space: nowrap;
text-align: left;
}
.form-control input[type="text"],
.form-control input[type="tel"],
.form-control input[type="date"],
.form-control input[type="datetime-local"],
.form-control input[type="time"],
.form-control input[type="number"],
.form-control input[type="email"],
.form-control input[type="password"],
.form-control textarea {
width: 100%;
height: var(--h-input);
padding-inline: 1rem;
border: 1px solid var(--sub-color-black);
border-radius: var(--r-1);
text-align: left;
background-color: var(--sub-color-gray-white);
transition: all .3s ease-out;
}
.form-control input[name="zipcode"] {
max-width: 8rem;
}
.form-control textarea {
height: auto;
vertical-align: bottom;
resize: vertical;
}

/* Select - Flex */
.form-control .select-flex {
display: flex;
align-items: center;
gap: var(--gap-3);
}

/* Select */
.form-control [class*="select-"]:not(.select-flex) {
position: relative;
display: flex;
align-items: center;
gap: var(--gap-1);
width: max-content;
}
.shop-item-option.form-control [class*="select-"] {
flex-direction: column;
align-items: start;
}
/*.form-control [class*="select-"]:not(:last-of-type) {
margin-inline-end: 1rem;
}*/
.form-control [class*="select-"] label {
display: block;
}
.form-control [class*="select-"] select {
--h-input: 2rem;
height: var(--h-input);
padding-inline: 0.5rem 1.5rem;
border: 1px solid var(--sub-color-black);
border-radius: var(--r-1);
background-color: var(--sub-white);
appearance: none; 
}
.form-control [class*="select-"]:not(.select-flex)::after {
--h-input: 2rem;
position: absolute;
z-index: 5;
display: block;
right: 0;
bottom: 0;
width: 1.5rem;
height: var(--h-input);
content: "";
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: 0.5rem;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>');
pointer-events: none;
}

/* Radio - Flex */
.form-control input[type="radio"] {
transform: scale(1.25);
cursor: pointer;
}
.form-control .radio-flex {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gap-3);
}
.form-control .radio-flex label {
display: flex;
align-items: center;
gap: calc(var(--gap-1) * 1.5);
cursor: pointer;
font-weight: normal;
}
.form-control input[type="radio"]:checked + span {
font-weight: 700;
}

/* Check Box - Flex */
.form-control input[type="checkbox"] {
transform: scale(1.25);
cursor: pointer;
}
.form-control .checkbox-flex {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gap-3);
}
.form-control .checkbox-flex label {
display: flex;
align-items: center;
gap: calc(var(--gap-1) * 1.5);
cursor: pointer;
font-weight: normal;
}

/* Focus */
.form-control input[type="text"]:focus,
.form-control input[type="tel"]:focus,
.form-control input[type="date"]:focus,
.form-control input[type="datetime-local"]:focus,
.form-control input[type="time"]:focus,
.form-control input[type="number"]:focus,
.form-control input[type="email"]:focus,
.form-control input[type="password"]:focus,
.form-control textarea:focus {
border: 1px solid var(--brand-color);
background-color: var(--sub-white);
}
.form-control input:not(:placeholder-shown),
.form-control textarea:not(:placeholder-shown) {
background-color: var(--sub-white);
}

/* Image Upload */
/*.file-upload {
display: block;
width: max-content;
}
.file-upload input[type="file"] {
display: block;
margin: .5rem 0;
cursor: pointer;
}
.file-upload figure {
width: 10rem;
height: auto;
cursor: pointer;
}
.file-upload figure img {
vertical-align: bottom;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border: 1px solid var(--primary-color-20);
}*/

/* Placeholder */
::placeholder {
color: var(--sub-color-gray-dark);
}

/* Required */
.form-control sup {
vertical-align: top;
margin-inline-start: .2rem;
font-size: var(--fsize-s);
color: var(--sub-color-red);
}

/* Label */
.form-control label {
font: 700 var(--fsize-m)/1.8 "Noto Sans JP", sans-serif;
}

/* Buttons [Submit, Reset] */
.submit-buttons {
margin-block: var(--gap-5) var(--gap-3);
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
gap: var(--gap-3);
user-select: none;
}
.submit-buttons.flex-start {
justify-content: start;
}
.submit-buttons.flex-center {
justify-content: center;
}
.submit-buttons.flex-end {
justify-content: end;
}

.submit-buttons [type="button"],
.submit-buttons [type="submit"],
.submit-buttons [type="reset"],
.submit-buttons a[class="button"],
.cart-remove button {
width: auto;
height: var(--h-input);
border: none;
font: 700 var(--fsize-m)/1 "Noto Sans JP", sans-serif;
text-align: center;
user-select: none;
cursor: pointer;
}
.submit-buttons a[class="button"] {
display: flex;
justify-content: center;
align-items: center;
}

/* Confirm, Modify, Cart Step Next <-> Back */
:is(.confirm-button, .modify-button, .cart-step-next, .cart-step-back) [type="submit"],
.submit-buttons a[class="button"] {
width: max-content;
min-width: 10rem;
}
:is(.confirm-button, .cart-step-next) [type="submit"],
.submit-buttons a[class="button"] {
color: var(--sub-white);
background-color: var(--sub-color-black);
padding-inline: var(--gap-4);
border-radius: var(--r-100);
}
:is(.confirm-button, .cart-step-next) [type="submit"]:hover,
.submit-buttons a[class="button"]:hover {
background-color: var(--brand-color);
}
:is(.modify-button, .cart-step-back) [type="submit"] {
color: var(--sub-color-black);
background-color: var(--sub-white);
padding-inline: var(--gap-4);
border: 1px solid var(--sub-color-gray);
border-radius: var(--r-100);
}
:is(.modify-button, .cart-step-back) [type="submit"]:hover {
color: var(--sub-white);
background-color: var(--sub-color-gray);
}

/* Cart Remove Button */
.cart-remove button {
--fsize-icon: 1.5rem;
height: auto;
background-color: transparent;
}
.cart-remove button:hover {
color: var(--sub-color-red);
}

/* Reset */
.submit-buttons [name="cancel"],
.submit-buttons [type="reset"] {
color: var(--sub-white);
background-color: var(--sub-color-gray-light);
}
.submit-buttons [name="cancel"]:hover,
.submit-buttons [type="reset"]:hover {
color: var(--sub-white);
background-color: var(--sub-color-gray);
}

/* Form Information */
:where(.form-info + .form-info, .order-info + .order-info) {
margin-block-start: var(--gap-4);
}
:where(.form-info, .order-info) :where(.error, .note) {
margin: 0;
padding: var(--gap-2) 0;
font-size: var(--fsize-s);
}
:where(.form-info, .order-info) .label {
font-weight: 700;
}

/* ####################################### */
/* Home Slider */
/* ####################################### */
#home-slider {
position: sticky;
z-index: -1;
top: 0;
margin: 0;
padding: 0;
width: 100%;
height: auto;
aspect-ratio: 1 / 0.625;
}

.home-phrase-wrapper {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: var(--sub-white);
background-color: rgba(0, 0, 0, 0.5);
user-select: none;
container-type: inline-size;
}
.home-phrase {
display: flex;
justify-content: space-evenly;
align-items: start;
flex-direction: column;
width: 100%;
height: 100%;
padding-block-start: var(--h-header);
}
.phrase-section {
width: clamp(360px, 80%, 640px);
height: auto;
}
.phrase-section:nth-child(1) {
margin-inline: 0 auto;
padding-inline-start: var(--gap-5);
}
.phrase-section:nth-child(2) {
margin-inline: auto 0;
padding-inline-end: var(--gap-5);
}
@container (width < 768px) {
.phrase-section:nth-child(1) {
padding-inline-start: var(--gap-3);
}
.phrase-section:nth-child(2) {
padding-inline-end: var(--gap-3);
}
}

.home-phrase-heading {
font-size: var(--fsize-xxl);
font-weight: 500;
letter-spacing: 0.25rem;
}
.home-phrase-line + .home-phrase-heading {
margin-block-start: var(--gap-6);
}
.home-phrase-line {
font-size: var(--fsize-xm);
font-weight: 400;
text-align: justify;
}

@media screen and (width < 768px) {
.home-phrase-heading {
font-size: var(--fsize-xm);
}
.home-phrase-line {
font-size: var(--fsize-s);
}
}

.swiper-slide img {
width: 100%;
height: var(--h-slider);
object-fit: cover;
pointer-events: none;
user-select: none;
}

:where(.swiper-slide-active img, .swiper-slide-duplicate-active img, .swiper-slide-prev img) {
animation-name: fadein-zoom;
animation-duration: 11s;
animation-timing-function: linear;
animation-fill-mode: both;
animation-play-state: paused;
}
#home-slider.is-active :where(.swiper-slide-active img, .swiper-slide-duplicate-active img, .swiper-slide-prev img) {
animation-play-state: running;
}

@keyframes fadein-zoom {
0% {transform: scale(1);}
100% {transform: scale(1.15);}
}

/* ####################################### */
/* Contents */
/* ####################################### */
#contents-jpa {
min-height: calc(100dvh - var(--h-header));
background-color: rgba(255, 255, 255, 0.25);
transition: background-color 1s ease-out;
}
#contents-jpa.is-animate {
background-color: rgba(255, 255, 255, 1);
}

/* Reset */
:where(#contents-jpa figure) {
margin: 0;
padding: 0;
}

/* Container */
.container-full {
container: full / inline-size;
padding-inline: 0;
width: var(--w-100);
}
.container-wide {
container: wide / inline-size;
padding-inline: var(--gap-3);
width: clamp(var(--w-min), var(--w-80), var(--w-max));
}
.container-normal {
container: normal / inline-size;
padding-inline: var(--gap-3);
width: clamp(var(--w-min), var(--w-90), var(--w-normal));
}
.narrow-wrapper {
margin-inline: auto;
width: min(var(--w-100), var(--w-narrow));
}
:where(.container-full, .container-wide, .container-normal) {
margin-inline: auto;
margin-block: 0;
padding-block-end: var(--spacer-100);
}
:where(.container-full, .container-wide, .container-normal) + [class^="container-"] {
padding-block-start: var(--spacer-100);
}
#contents-jpa > [class^="container-"]:first-child {
padding-block-start: max(var(--spacer-100), calc(var(--h-header) + 1rem));
}

.container-grid {
display: grid;
grid-template-columns: repeat(var(--column-num), 1fr);
column-gap: var(--gap-4);
row-gap: var(--gap-5);
margin-inline: auto;
}
/*@container normal (width >= 960px) {
.container-grid {
--column-num: 4;
}
}*/
@media screen and (width >= 1024px) {
.container-grid {
--column-num: 4;
}
}
@media screen and (width < 1024px) {
.container-grid {
--column-num: 3;
}
}
@media screen and (width < 768px) {
.container-grid {
--column-num: 2;
column-gap: var(--gap-2);
row-gap: var(--gap-3);
}
}

/* Container Heading */
.container-heading {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--gap-3);
font-size: var(--fsize-xl);
font-weight: 700;
white-space: nowrap;
width: max-content;
}
.container-heading span {
font-size: var(--fsize-m);
font-weight: 500;
}
.container-heading::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
transform: scale(1, 1);
transform-origin: right center;
background-color: var(--brand-color);
}
.container-heading + * {
margin-block-start: var(--gap-5);
}

@media screen and (width < 768px) {
.container-heading {
flex-wrap: wrap;
width: auto;
}
} /* width < 768px */

/* Flex Column */
.column-section {
display: flex;
align-items: center;
gap: var(--gap-3);
}

/* Column Side - Main */
.column-side {
width: 100%;
flex-shrink: 3;
align-self: start;
}
.column-main {
width: 100%;
flex-shrink: 1;
align-self: start;
}

/* Flex Column - Option */
.is-half > [class^="column-"] {
flex: 0 1 50%;
}
.is-reverse {
flex-direction: row-reverse;
}
.is-wrap {
flex-wrap: wrap;
}
.is-align-start {
align-items: start;
}
.is-align-stretch {
align-items: stretch;
}

@media screen and (width < 768px) {
.column-section {
flex-direction: column;
}
/*.column-image, .column-lead*/
.column-section > [class^="column-"] {
flex: initial;
width: 100%;
}
.column-section > [class^="column-"].has-sticky {
position: relative;
top: auto;
}
} /* width < 768px */

/* Common Lead */
.lead-common + .lead-common {
margin-block-start: var(--spacer-100);
padding-block-start: var(--spacer-100);
border-top: 1px solid var(--sub-color-gray-light);
}
.lead-common > h3 {
margin: 0;
color: var(--brand-color);
font-size: var(--fsize-xxm);
}
.lead-common :where(ul, ol) {
padding-inline-start: var(--gap-3);
}
.lead-common :where(ul, ol) li {
margin-block: var(--gap-2);
}
.lead-common :where(ul, ol) li::marker {
color: var(--sub-color-green);
font-size: var(--fsize-s);
}

/* Common Table */
.table-common {
min-width: 100%;
width: fit-content;
border-spacing: 0;
border-collapse: collapse;
}
.table-common caption {
padding-block: var(--gap-2);
padding-inline: var(--gap-2);
}
.table-common caption.is-gray {
color: var(--sub-white);
background-color: var(--sub-color-gray);
}
.table-common :where(th, td) {
padding-block: var(--gap-2);
padding-inline: var(--gap-2);
}
.table-common.is-border :where(th, td) {
border: 1px solid var(--sub-color-gray);
}

/* Table Information */
.table-info {
overflow: hidden;
display: grid;
grid-template-columns: max-content 1fr;
margin-inline: auto;
border: 1px solid var(--brand-color);
border-radius: var(--r-1);
}
.table-info > div {
padding-inline-start: var(--gap-3);
padding-inline-end: var(--gap-4);
padding-block: var(--gap-3);
word-break: break-all;
}
.table-info > div.info-heading {
display: flex;
align-items: center;
color: var(--sub-white);
background-color: var(--brand-color);
font-weight: 600;
white-space: nowrap;
}
.table-info > div.info-heading:not(:nth-child(1)) {
border-top: 1px solid var(--sub-white);
}
.table-info > div:not(.info-heading):not(:nth-child(2)) {
border-top: 1px solid var(--brand-color);
}

/* Table Information Link Button */
.table-info .has-button {
display: flex;
align-items: center;
gap: var(--gap-3);
}
.table-info .has-button.is-contact {
grid-column-end: span 2;
justify-content: center;
}
.table-info .has-button a {
display: inline-flex;
align-items: center;
gap: var(--gap-1);
padding-block: var(--gap-1);
padding-inline: var(--gap-3);
border: 1px solid var(--brand-color);
border-radius: var(--r-100);
white-space: nowrap;
user-select: none;
}
.table-info .has-button a:hover {;
color: var(--sub-white);
background-color: var(--brand-color);
}

@media screen and (width < 768px) {
.table-info {
grid-template-columns: 1fr;
}
.table-info > div {
padding-inline: var(--gap-3);
padding-block: var(--gap-2);
}
.table-info > div.info-heading:not(:nth-child(1)), .table-info > div:not(.info-heading):not(:nth-child(2)):not(.has-button.is-contact) {
border-top: none;
}
.table-info .has-button.is-contact {
grid-column-end: span 1;
}
} /* width < 768px */

/* ####################################### */
/* Home Contents */
/* ####################################### */
/* Column */
.column-home-grid {
--column-num: 8;
display: grid;
grid-template-columns: repeat(var(--column-num), 1fr);
column-gap: 0;
align-items: center;
}
.column-home-image {
position: relative;
display: flex;
grid-row-start: 1;
}
.column-home-image.is-conductor {
grid-column-start: 1;
grid-column-end: span 6;
}
.column-home-image.is-stonerium {
grid-column-start: 3;
grid-column-end: span 6;
}
.column-home-image::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.column-home-image.is-conductor::after {
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1) 95%, rgba(255, 255, 255, 1) 100%);
}
.column-home-image.is-stonerium::after {
background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 20%);
}
.column-home-image img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: left top;
pointer-events: none;
}
.column-home-image.is-stonerium img {
object-position: center center;
}

.column-home-lead {
z-index: 1;
display: flex;
flex-direction: column;
grid-row-start: 1;
padding-inline: var(--gap-4);
}
.column-home-lead.is-conductor {
grid-column-start: 6;
grid-column-end: span 3;
}
.column-home-lead.is-stonerium {
grid-column-start: 1;
grid-column-end: span 3;
}
.column-home-lead :is(.lead-heading, p, .view-more) {
text-shadow:
1px 1px 1px rgba(255, 255, 255, .5),
-1px -1px 1px rgba(255, 255, 255, .5),
-1px 1px 1px rgba(255, 255, 255, .5),
1px -1px 1px rgba(255, 255, 255, .5),
0 1px 1px rgba(255, 255, 255, .5),
0 -1px 1px rgba(255, 255, 255, .5),
-1px 0 1px rgba(255, 255, 255, .5),
1px 0 1px rgba(255, 255, 255, .5);
}
.lead-heading {
position: relative;
margin-block: var(--gap-2);
font: 700 var(--fsize-l)/1.4 "Noto Sans JP", sans-serif;
white-space: nowrap;
width: max-content;
}
.lead-heading::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
transform: scale(1, 1);
transform-origin: right center;
background-color: var(--brand-color);
}

/* Latest News */
.jpa-news {
}
.jpa-news > div > a {
display: grid;
grid-template-columns: 8rem 1fr;
gap: var(--gap-2);
align-items: center;
padding-block: var(--gap-4);
border-bottom: 1px solid var(--sub-color-gray);
}
.jpa-news > div > a:hover {
color: var(--brand-color);
border-bottom: 1px solid var(--brand-color);
}

.jpa-news > div > a :where(.post-date, .post-title) {
margin: 0;
font: 400 var(--fsize-m)/1.8 "Noto Sans JP", sans-serif;
}
.post-date {
padding-inline: var(--gap-1);
white-space: nowrap;
}
.new .post-title::before {
content: "New";
margin-inline-end: var(--gap-2);
padding: var(--gap-0) var(--gap-2);
border-radius: var(--r-100);
font: 500 var(--fsize-s)/1 "Noto Sans", sans-serif;
color: var(--sub-white);
background-color: var(--brand-color);
}

/* Contact */
.is-contact-link {
display: block;
position: relative;
margin-inline: auto;
margin-block: 0;
padding-block: var(--gap-4) var(--gap-5);
padding-inline: var(--gap-5);
width: clamp(var(--w-min), 66.6666%, var(--w-normal));
color: var(--sub-white);
}
.is-contact-link::before, .is-contact-link::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.4s ease-out;
}
.is-contact-link::before {
z-index: -1;
background-color: var(--brand-color);
}
.is-contact-link::after {
z-index: -2;
background: transparent url("../img/contact_hover.webp") no-repeat center 20%;
background-size: cover;
}
.is-contact-link:hover::before {
opacity: 0.5;
}
.is-contact-link .contact-heading {
margin-block: var(--gap-3);
white-space: nowrap;
}
.is-contact-link .contact-heading:nth-child(1) {
font-weight: 500;
font-family: "Noto Sans", sans-serif;
font-size: 2.5rem;
letter-spacing: 0.15rem;
}
.is-contact-link .contact-heading:nth-child(2) {
font-size: 1.25rem;
}

@media screen and (width < 768px) {
.column-home-image.is-conductor {
grid-column-start: 1;
grid-column-end: span 7;
}
.column-home-image.is-stonerium {
grid-column-start: 2;
grid-column-end: span 7;
}
.column-home-image img {
aspect-ratio: 1.414 / 1;
object-position: right top;
}
.column-home-lead.is-conductor {
grid-column-start: 1;
grid-column-end: span 8;
}
.column-home-lead.is-stonerium {
grid-column-start: 1;
grid-column-end: span 8;
}
.jpa-news > div > a {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
gap: var(--gap-2);
align-items: center;
}
.post-date {
padding-inline: 0;
}
.new .post-title::before {
display: block;
width: max-content;
}
.is-contact-link {
padding-block: var(--gap-3) var(--gap-4);
padding-inline: var(--gap-4);
}
.is-contact-link p br {
display: none;
}
} /* width < 768px */

/* ####################################### */
/* News */
/* ####################################### */

/* ####################################### */
/* Philosophy */
/* ####################################### */
.column-jpa-book {
width: calc((100% - var(--gap-3)) / 2);
}
.column-jpa-book tr {
border-bottom: 1px solid var(--sub-color-gray);
}
.column-jpa-book tr td {
}
.column-jpa-book tr th.book-cover {
min-width: 80px;
max-width: 140px;
}
.column-jpa-book tr th.book-cover img {
width: 100%;
pointer-events: none;
}

/* ####################################### */
/* Message */
/* ####################################### */
.message-photo {
}
.message-photo img {
margin-inline: auto;
width: clamp(180px, 90%, 240px);
}

/* ####################################### */
/* About */
/* ####################################### */
.lesson-detail {
padding-block-start: var(--gap-5);
}
.lesson-detail .lesson-heading {
margin-block-start: 0;
color: var(--sub-color-green);
font-size: var(--fsize-xm);
font-weight: 500;
}

.certificate-sample img {
margin-inline: auto;
width: clamp(240px, 75%, 480px);
height: auto;
border: 1px solid var(--sub-color-gray-light);
}

.lesson-grid {
display: grid;
grid-template-columns: clamp(80px, 20vw, 100px) 1fr;
column-gap: var(--gap-3);
}
.lesson-stone img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
margin-inline: auto;
border: 2px solid var(--brand-color);
border-radius: var(--r-2);
}

:where(.conductor-flow-line, .conductor-flow-fill) {
width: fit-content;
margin-inline: auto;
margin-block: var(--gap-2) !important;
padding-inline: var(--gap-3);
padding-block: var(--gap-2);
border: 2px solid var(--brand-color);
border-radius: var(--r-100);
line-height: 1.2;
text-align: center;
}
.conductor-flow-line {
background-color: var(--sub-white);
}
.conductor-flow-fill {
color: var(--sub-white);
background-color: var(--brand-color);
}
.conductor-flow-lecture {
width: fit-content;
margin-inline: auto;
margin-block: var(--gap-2);
padding-inline: var(--gap-3);
padding-block: var(--gap-3);
border: 2px solid var(--brand-color);
border-radius: var(--r-2);
}
.conductor-flow-arrow {
width: max-content;
margin-inline: auto;
}

:where(.column-lesson-main, .column-lesson-sample) {
align-self: start;
position: relative;
}
.column-lesson-main > h3 {
margin: 0;
color: var(--brand-color);
font-size: var(--fsize-xxm);
}
.sample-images {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--spacer-100);
}
.sample-images [class^="stonerium-"] {
max-width: 300px;
width: 75%;
}
.sample-images [class^="stonerium-"] img {
width: 100%;
height: auto;
}
@media screen and (width < 768px) {
.sample-images {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--gap-2);
}
}

/* ####################################### */
/* Access */
/* ####################################### */
:where(.column-access-address, .column-access-map) {
align-self: start;
position: relative;
}
.column-access-address > h3 {
margin: 0;
color: var(--brand-color);
font-size: var(--fsize-xxm);
}

.column-access-map .g-map {
magrin-inline: auto;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
}
.column-access-map .g-map iframe {
vertical-align: bottom;
width: 100%;
height: 100%;
}

@media screen and (width < 768px) {
.column-access-map {
width: 100vw !important;
margin-inline: calc(50cqw - 50vw);
}
}

/* ####################################### */
/* Conductor */
/* ####################################### */
.container-grid.result-conductor {
--column-num: 2;
gap: 0;
}
.container-grid.result-conductor div {
padding-block: var(--gap-2);
padding-inline: var(--gap-3);
border-bottom: 1px solid var(--sub-color-gray);
}
.container-grid.result-conductor :is(div:nth-child(1), div:nth-child(2)) {
color: var(--sub-white);
background-color: var(--brand-color);
font-weight: bold;
border-bottom: 1px solid var(--brand-color);
}
.container-grid.result-conductor div:nth-child(odd) {
border-right: 1px solid var(--sub-color-gray);
}
.container-grid.result-conductor div:nth-child(1) {
border-right: 1px solid var(--sub-white);
}

.container-grid.result-conductor div.has-button a {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--gap-1);
white-space: nowrap;
user-select: none;
}
.container-grid.result-conductor div.has-button a::before {
background: var(--brand-color);
content: '';
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
margin: auto;
transform-origin: right top;
transform: scale(0, 1);
transition: transform .6s;
}
.container-grid.result-conductor div.has-button a:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}

/* ####################################### */
/* Shop */
/* ####################################### */
.shop-menu {
display: flex;
justify-content: center;
align-items: center;
gap: var(--gap-3);
margin-block: var(--gap-4);
}
.shop-menu a {
display: inline-flex;
align-items: center;
gap: var(--gap-1);
padding-block: var(--gap-1);
padding-inline: var(--gap-3);
border-radius: var(--r-100);
user-select: none;
}
.shop-menu a:nth-child(1) {;
border: 1px solid var(--sub-color-green);
}
.shop-menu a:nth-child(2) {;
border: 1px solid var(--brand-color);
}
.shop-menu a:nth-child(1):hover {;
color: var(--sub-white);
background-color: var(--sub-color-green);
}
.shop-menu a:nth-child(1).current {
color: var(--sub-white);
background-color: var(--sub-color-green);
pointer-events: none;
}
.shop-menu a:nth-child(2):hover {;
color: var(--sub-white);
background-color: var(--brand-color);
}

/* Tab Menu */
#category-items .swiper-slide {
background-color:  var(--sub-white);
}
#category-tabs {
display: flex;
align-items: center;
gap: var(--gap-2);
margin-block: var(--gap-4);
border-bottom: 1px solid var(--brand-color);
list-style: none;
}
#category-tabs > a.swiper-pagination-bullet {
width: max-content;
height: auto;
color:  var(--sub-color-black);
background-color:  var(--sub-white);
margin: 0 !important;
padding-inline: var(--gap-3);
padding-block: var(--gap-2);
border-right: 1px solid var(--brand-color);
border-left: 1px solid var(--brand-color);
border-top: 1px solid var(--brand-color);
border-radius: var(--r-2) var(--r-2) 0 0;
opacity: 0.3;
user-select: none;
-webkit-user-select: none;
}
#category-tabs > a:is(.swiper-pagination-bullet-active, .swiper-pagination-bullet:hover) {
color:  var(--sub-white);
background-color:  var(--brand-color);
opacity: 1;
}

/* Item List */
.shop-item .has-photo {
overflow: hidden;
aspect-ratio: 1 / 1;
}
.shop-item img {
vertical-align: bottom;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform .3s ease-out;
}
.shop-item a {
display: block;
}
.shop-item a:hover img {
transform: scale(1.3);
}
.shop-item figcaption > * {
margin-block-start: var(--gap-1);
}

.member-limited {
color: var(--sub-white);
background-color: var(--brand-color);
padding-inline: var(--gap-3);
border-radius: var(--r-100);
width: max-content;
}

/* Item */
.column-section.is-shop-item {
align-items: start;
gap: var(--gap-3);
}

/* Item Images */
.shop-item-image {
position: sticky;
top: calc(var(--h-header) + 1rem);
flex-shrink: 3;
width: 100%;
}
.shop-item-thumbs {
display: flex;
flex-direction: column;
gap: var(--gap-4);
}
.shop-item-thumbs img {
width: 100%;
height: auto;
pointer-events: none;
}

/* Item Description */
.shop-item-description {
flex-shrink: 2;
width: 100%;
padding-inline: var(--gap-3);
}
.shop-item-title {
margin-block-start: 0;
margin-block-end: var(--gap-3);
font: 700 var(--fsize-xxm)/1.6 "Noto Sans JP", sans-serif;
font-weight: 700;
}
.shop-item-title span {
font-size: var(--fsize-m);
}
.shop-item-lead {
margin-block-end: var(--gap-3);
}
.shop-item-option {
display: flex;
flex-wrap: wrap;
gap: var(--gap-4);
}

/* Item Buy Button */
.shop-item-buy {
color: var(--sub-white);
background-color: var(--sub-color-black);
width: max-content;
margin: var(--gap-6) auto;
padding: var(--gap-2) var(--gap-4);
border-radius: var(--r-1);
text-align: center;
cursor: pointer;
}
.shop-item-buy:hover {
background-color: var(--brand-color);
}

/* Cart Items */
.cart-list {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--gap-6);
padding-block-end: var(--gap-2);
border-bottom: 1px solid var(--sub-color-gray);
}
.cart-list + .cart-list {
margin-block-start: var(--gap-3);
}

.cart-description {
display: flex;
flex-direction: column;
gap: var(--gap-2);
}
.cart-item-title {
margin-block-start: 0;
margin-block-end: var(--gap-2);
font: 700 var(--fsize-xm)/1.6 "Noto Sans JP", sans-serif;
font-weight: 700;
}
. cart-item-title span {
font-size: var(--fsize-m);
}

.cart-register {
display: flex;
flex-direction: column;
align-items: end;
gap: var(--gap-3);
margin-block-start: var(--gap-5);
text-align: right;
}
.cart-register + * {
margin-block-start: var(--gap-5);
}
:where(.cart-total, .cart-sub-total) strong {
font-size: var(--fsize-xxm);
}
.cart-total, .cart-sub-total {
font-size: var(--fsize-xm);
}
.cart-postage {
font-size: var(--fsize-xm);
}

/* Payment */
.bank-wrapper {
overflow: hidden;
width: clamp(300px, var(--w-80), calc(var(--w-960) / 1.5));
/* --margin margin-block-start: var(--gap-4);*/
margin-inline: auto;
border: 1px solid var(--sub-color-gray);
border-radius: var(--r-2);
font-size: var(--fsize-xm);
}
.bank-account {
padding: var(--gap-3);
}
.bank-account + div {
border-top: 1px solid var(--sub-color-gray);
}
.column-section.is-bank {
gap: 0;
}
.transfer-heading {
flex-shrink: 3;
width: 100%;
padding: var(--gap-3);
/*border-top: 1px solid var(--sub-color-gray);*/
background-color: var(--sub-color-gray-light);
font-weight: 700;
}
.transfer-price {
flex-shrink: 2;
width: 100%;
/*border-top: 1px solid var(--sub-color-gray);*/
padding: var(--gap-3);
}

/* Howto Order */
.shop-howto + .shop-howto {
margin-block-start: var(--gap-5);
}
.shop-howto > h3 {
margin: 0;
color: var(--sub-color-green);
}
.shop-howto :where(ul, ol) {
padding-inline-start: var(--gap-3);
}
.shop-howto :where(ul, ol) li {
list-style-position: inside;
margin-block: var(--gap-1);
}

@media screen and (width < 768px) {
.shop-item-image {
position: static;
top: auto;
}
} /* width < 768px */

/* ####################################### */
/* Regist */
/* ####################################### */
.regist-confirm .form-info {
padding-block-end: var(--gap-2);
border-bottom: 1px solid var(--sub-color-gray);
}

.label-discount {
color: var(--brand-color);
}

/* ####################################### */
/* My Page */
/* ####################################### */
#membership-licensed .swiper-slide {
background-color: var(--sub-white);
}
#membership-licensed .swiper-slide .membership-jpa {
opacity: 0;
transition: opacity 0.2s linear;
}
#membership-licensed .swiper-slide.swiper-slide-active .membership-jpa {
opacity: 1;
}

.membership-jpa + .membership-jpa {
padding-block-start: var(--spacer-100);
}

/* Membership Card */
.membership-card {
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: var(--gap-2);
width: clamp(300px, 100%, 480px);
aspect-ratio: 1.618 / 1;
background: url("../img/membership_card.png") no-repeat left top;
background-size: contain;
margin-inline: auto;
padding: var(--gap-3);
border-radius: var(--r-2);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.card-logo {
display: flex;
align-items: center;
gap: var(--gap-3);
user-select: none;
pointer-events: none;
}
.card-logo img {
width: clamp(30px, 10%, 50px);
height: auto;
}
.membership-card .card-title {
flex-grow: 1;
/*display: flex;
align-items: center;*/
font-weight: 700;
font-size: var(--fsize-xxl);
text-indent: var(--gap-3);
letter-spacing: var(--gap-3);
user-select: none;
}
.membership-card .member-number {
font-size: var(--fsize-xm);
}
.membership-card .member-name {
font-weight: 600;
font-size: var(--fsize-l);
}

/* Membership Avatar */
.membership-avatar {
position: relative;
width: clamp(80px, 50%, 160px) ;
margin-inline: auto;
}
.membership-avatar img {
overflow: hidden;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--r-100);
}
.membership-avatar .add-avatar label {
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
width: max-content;
height: auto;
aspect-ratio: 1 / 1;
color: var(--sub-black);
background-color: var(--sub-white);
padding: var(--gap-2);
border: 1px solid var(--brand-color);
border-radius: var(--r-100);
cursor: pointer;
}
.membership-avatar .add-avatar:hover label {
color: var(--sub-white);
background-color: var(--brand-color);
}
.membership-avatar .add-avatar label :where(.material-symbols, .material-symbols-fill) {
font-size: var(--fsize-xxm);
}
.membership-avatar .add-avatar input[type="file"] {
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: transparent;
background-color: transparent;
cursor: pointer;
user-select: none;
}
.membership-avatar .add-avatar input[type="file"]::file-selector-button {
display: none;
/*position: absolute;
left: 0;
top: 0;*/
}

/* Membership Digital Certificate */
.membership-certificate {
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--gap-2);
width: clamp(300px, 100%, 480px);
aspect-ratio: 1 / 1;
background-repeat: no-repeat;
background-position:  center center;
background-size: contain;
margin-inline: auto;
/*border: 1px solid var(--sub-color-gray);*/
filter: drop-shadow(0 0 2px var(--sub-color-gray));
}
.membership-certificate.is-stone-conductor {
background-image: url("../img/certificate_stone_conductor.webp");
}
.membership-certificate.is-stone-conductor-light {
background-image: url("../img/certificate_stone_conductor_light.webp");
}
.membership-certificate.is-stone-rium {
background-image: url("../img/certificate_stone_rium.webp");
}
.membership-certificate.is-power-stone {
background-image: url("../img/certificate_power_stone.webp");
}
.membership-certificate [class^="license-"] {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: max-content;
user-select: none;
}
.membership-certificate  .license-type {
top: 36%;
}
.membership-certificate .license-name {
top: 58%;
border-bottom: 1px solid var(--sub-color-gold);
}
.membership-certificate.is-stone-rium .license-name {
top: 55%;
border-bottom: 1px solid var(--sub-color-gold);
}
.membership-certificate.is-power-stone .license-name {
top: 55%;
border-bottom: 1px solid var(--sub-color-purple);
}
:is(.membership-certificate.is-stone-conductor, .membership-certificate.is-stone-conductor-light) .license-date {
top: 20%;
right: 5%;
left: auto;
transform: translateX(0);
border-bottom: 1px solid var(--sub-color-gold);
}
.membership-certificate.is-stone-rium .license-date {
top: 75%;
border-bottom: 1px solid var(--sub-color-gold);
}
.membership-certificate.is-power-stone .license-date {
top: 75%;
border-bottom: 1px solid var(--sub-color-purple);
}

/* Membership Information */
.membership-info {
overflow: hidden;
display: grid;
grid-template-columns: max-content 1fr;
margin-inline: auto;
border: 1px solid var(--brand-color);
border-radius: var(--r-1);
}
.membership-info > div {
padding-inline-start: var(--gap-3);
padding-inline-end: var(--gap-4);
padding-block: var(--gap-3);
word-break: break-all;
}
.membership-info > div.info-heading {
display: flex;
align-items: center;
color: var(--sub-white);
background-color: var(--brand-color);
font-weight: 600;
white-space: nowrap;
}
.membership-info > div.info-heading:not(:nth-child(1)) {
border-top: 1px solid var(--sub-white);
}
.membership-info > div:not(.info-heading):not(:nth-child(2)) {
border-top: 1px solid var(--brand-color);
}

/* Membership Information Link Button */
.membership-info .has-button {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--gap-3);
}
.membership-info .has-button.is-licensed {
flex-wrap: wrap;
justify-content: flex-start;
gap: var(--gap-3);
}
.membership-info .has-button.is-purchase-history {
justify-content: flex-start;
}
.membership-info .has-button.is-membership {
grid-column-end: span 2;
justify-content: flex-end;
}
.membership-info .has-button a,
.membership-info .has-button a.swiper-pagination-bullet {
display: inline-flex;
align-items: center;
gap: var(--gap-1);
padding-block: var(--gap-1);
padding-inline: var(--gap-3);
border: 1px solid var(--brand-color);
border-radius: var(--r-100);
white-space: nowrap;
user-select: none;
}
.membership-info .has-button a.swiper-pagination-bullet {
margin: 0;
width: auto;
height: auto;
background-color:  var(--sub-white);
opacity: 1;
}
.membership-info .has-button a.swiper-pagination-bullet-active {
color: var(--sub-white);
background-color: var(--brand-color);
}
.membership-info .has-button a:hover {;
color: var(--sub-white);
background-color: var(--brand-color);
}
.license-tabs a.swiper-pagination-bullet.tab00 {
display: none;
pointer-events: none;
}

@media screen and (width < 768px) {
.membership-card {
gap: var(--gap-1);
}
.membership-card .card-title {
font-size: var(--fsize-l);
}
.membership-card .member-number {
font-size: var(--fsize-m);
}
.membership-card .member-name {
font-size: var(--fsize-xm);
}
.membership-info {
grid-template-columns: 1fr;
}
.membership-info > div {
padding-inline: var(--gap-3);
padding-block: var(--gap-2);
}
.membership-info > div.info-heading:not(:nth-child(1)), .membership-info > div:not(.info-heading):not(:nth-child(2)):not(.has-button.is-membership) {
border-top: none;
}
.membership-info .has-button.is-membership {
grid-column-end: span 1;
}
} /* width < 768px */

/* ####################################### */
/* Purchase History */
/* ####################################### */
.purchase-history {
display: grid;
grid-template-columns: max-content 1fr max-content;
margin-inline: auto;
border: 1px solid var(--brand-color);
border-radius: var(--r-1);
}
.purchase-history + .purchase-history {
margin-block-start: var(--gap-4);
}
.purchase-history > div {
padding-inline: var(--gap-3);
padding-block: var(--gap-3);
word-break: break-all;
}
.purchase-history > .history-heading {
display: flex;
align-items: center;
color: var(--sub-white);
background-color: var(--brand-color);
font-weight: 600;
white-space: nowrap;
}
.purchase-history > .history-item {
display: flex;
flex-direction: column;
gap: var(--gap-2);
}
.purchase-history > .history-item > .item-heading {
font-size: var(--fsize-xm);
font-weight: 600;
white-space: nowrap;
}
.purchase-history > .history-item > div {
}
.purchase-history > .history-item > div + div {
padding-block-start: var(--gap-2);
border-top: 1px solid var(--sub-color-gray);
}
.purchase-history > div.history-heading:not(:nth-child(1)) {
border-top: 1px solid var(--sub-white);
}
.purchase-history > div:not(.history-heading):nth-child(n+4) {
border-top: 1px solid var(--brand-color);
}
.purchase-history > .history-total {
display: flex;
align-items: center;
font-weight: 600;
white-space: nowrap;
border-left: 1px solid var(--brand-color);
}

@media screen and (width < 768px) {
.purchase-history {
grid-template-columns: 1fr;
}
.purchase-history > .history-total {
border-left: none;
border-top: 1px solid var(--brand-color);
}
} /* width < 768px */

/* ####################################### */
/* Link in Text */
/* ####################################### */
.link-underline {
color: var(--sub-black);
border-bottom: 1px solid var(--brand-color);
}
.link-underline:hover {
color: var(--brand-color);
}

/* ####################################### */
/* Link Line */
/* ####################################### */
.link-line {
font: 400 var(--fsize-m)/1 "Noto Sans", sans-serif;
user-select: none;
}
.link-line a {
position: relative;
vertical-align: middle;
display: inline-flex;
align-items: center;
gap: var(--gap-1);
}
.link-line a::before {
background: var(--brand-color);
content: '';
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
margin: auto;
transform-origin: right top;
transform: scale(0, 1);
transition: transform .6s;
}
.link-line a:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}

/* ####################################### */
/* View More, Back Page */
/* ####################################### */
:where(.view-more, .back-page) {
position: relative;
margin-inline: auto;
margin-block: var(--gap-5) var(--gap-3);
padding-block: var(--gap-1);
width: max-content;
font: 400 var(--fsize-m)/1 "Noto Sans", sans-serif;
user-select: none;
cursor: pointer;
}
:where(.view-more, .back-page) a {
display: inline-flex;
align-items: center;
gap: var(--gap-1);
}
:where(.view-more, .back-page) a::before {
background: var(--brand-color);
content: '';
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
margin: auto;
transform-origin: right top;
transform: scale(0, 1);
transition: transform .6s;
}
:where(.view-more, .back-page) a:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}

/* ####################################### */
/* Other Navigation List */
/* ####################################### */
.other-navi-list {
overflow: hidden;
list-style: none;
margin-inline: auto;
padding: 0;
border: 1px solid var(--sub-color-gray-light);
border-radius: var(--r-2);
}
.other-navi-list li + li {
border-top: 1px solid var(--sub-color-gray-light);
}
.other-navi-list li a {
display: inline-flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: var(--gap-3);
}
.other-navi-list li a:hover {
color: var(--sub-white);
background-color: var(--sub-color-green);
}

/* ####################################### */
/* Pagination */
/* ####################################### */
.pagination {
margin: var(--gap-5) auto;
}
.pagination ul {
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
gap: var(--gap-2);
margin: 0;
padding: 0;
list-style: none;
}
.pagination.flex-start ul {
justify-content: start;
}
.pagination.flex-center ul {
justify-content: center;
}
.pagination.flex-end ul {
justify-content: end;
}

/* Page Number */
.pagination ul li {
font: normal var(--fsize-m)/var(--fsize-icon) "Noto Sans", sans-serif;
text-align: center;
user-select: none;
}
.pagination ul li:not(:has(a)), .pagination ul li a {
aspect-ratio: 1 / 1;
width: var(--fsize-icon, 16px);
height: var(--fsize-icon, 16px);
padding: var(--gap-2);
border-radius: var(--r-100);
box-sizing: content-box;
}

/* Not a link */
.pagination ul li:not(:has(a)) {
color: var(--sub-white);
background-color: var(--brand-color);
border: 1px solid var(--brand-color);
}

/* Page Number Hover */
.pagination ul li a {
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid var(--sub-color-black);
}
.pagination li a:hover {
color: var(--sub-white);
background-color: var(--brand-color);
border: 1px solid var(--brand-color);
}

/* ####################################### */
/* Footer */
/* ####################################### */
#footer-jpa {
width: 100%;
padding-inline: var(--gap-4);
border-top: 1px solid var(--sub-color-gray);
background-color: var(--sub-white);
}
.footer-navi {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--gap-3);
padding-block: var(--gap-3);
min-height: var(--h-header);
}

.footer-navi nav {
display: flex;
justify-content: start;
align-items: center;
gap: var(--gap-4);
}

.footer-navi ul {
margin: 0;
padding: 0;
}
.footer-navi ul[class*="menu-"] {
display: flex;
justify-content: start;
align-items: center;
gap: var(--gap-3);
}

/* SNS */
.footer-navi .menu-sns li[class*="sns-"] img {
width: auto;
height: 18px;
}
.sns-facebook img {
filter: invert(100%);
}

@media screen and (width < 768px) {
.footer-navi, .footer-navi nav {
flex-direction: column;
justify-content: start;
align-items: start;
gap: var(--gap-3);
}
} /* width < 768px */

/* ####################################### */
/* Scroll in Animation */
/* ####################################### */
:where([data-in-view="image"], [data-in-view="lead"] > *) {
opacity: 0;
}

[data-in-view="image"].is-animate {
animation: 1s slide-in-clip cubic-bezier(.53,.28,0,.9) both;
}

/*[data-in-view="lead"] > :not(.lead-heading, .container-heading) {
transform: translateY(clamp(2rem, 150%, 10rem));
}*/
[data-in-view="lead"] > :not(.lead-heading, .container-heading).is-animate {
animation: 1s fade-in-scroll cubic-bezier(.11,.31,.36,1) both;
}

[data-in-view="lead"] > :where(.lead-heading, .container-heading).is-animate {
animation: 0.3s slide-in-clip cubic-bezier(.53,.28,0,.9) 0.3s both;
}
[data-in-view="lead"] > :where(.lead-heading, .container-heading).is-animate::before {
animation: 0.4s slide-in-heading cubic-bezier(.53,.28,0,.9) 0.8s both;
}

@keyframes slide-in-clip {
from {opacity: 0; clip-path: inset(0 100% 0 0);}
to {opacity: 1; clip-path: inset(0 0 0 0);}
}

@keyframes slide-in-heading {
from {transform: scale(1, 1);}
to {transform: scale(0, 1);}
}

@keyframes fade-in-scroll {
0% {opacity: 0;}
1% {transform: translateY(clamp(2rem, 150%, 10rem));}
100% {opacity: 1; transform: translateY(0);}
}