@font-face {
  font-display: swap;
  font-family: "Noto Sans JP Subset";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans CJK JP"),
       local("NotoSansCJKjp-Regular"),
       local("NotoSansJP-Regular"),
       url("fonts/NotoSansJP-Regular.woff2") format("woff2");
}
  
@font-face {
  font-display: swap;
  font-family: "Noto Sans JP Subset";
  font-style: normal;
  font-weight: 700;
  src: local("NotoSansCJKjp-Bold"),
       local("NotoSansJP-Bold"),
       url("fonts/NotoSansJP-Bold.woff2") format("woff2");
}

:root {
  --preset-font-size: 16px;
  --text-color: hsla(0, 0%, 0%, 1); /*#36342f;*/
  --text-color-accent: #5e2015;
  --bg-color: #f1eee3;
  --bg-color-accent: #cfcbbe; 
  --content-width: 1280px;
  --break-sp: 560px;
  --break-pc: 960px;
  --space-unit: 0.8rem;
}

*:where(:not(iframe, canvas, img, svg, video):not(svg *)) { all: unset; display: revert; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { font-size: 62.5%; height: -webkit-fill-available; }
body { font-size: 1.6rem; min-height: 100vh; min-height: -webkit-fill-available; }
ol, ul { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img { max-width: 100%; object-fit: cover; }
table { border-collapse: collapse; }
input, button, textarea, select { font: inherit; }
h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; }

body {
  background: var(--bg-color, #f1eee3);
  color: var(--text-color, #36342f);
  font: 1.6rem/1.5 "Helvetica Neue", Helvetica, "Noto Sans JP Subset", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Yu Gothic", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/**********/
.font-sans { font-family: "Helvetica Neue", Helvetica, "Noto Sans JP Subset", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Yu Gothic", Meiryo, sans-serif; }
.font-serif { font-family: Georgia, "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; }
.font-mono	{ font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.font-palt { font-feature-settings: "palt"; }
.font-initial { font-feature-settings: initial; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }

/*==========
Layout
==========*/
.container { width: min(100%, var(--content-width)); margin: 0 auto; }

.px2\:8 { padding-left: clamp(1.6rem, 12vw - 5.12rem, 6.4rem); padding-right: clamp(1.6rem, 12vw - 5.12rem, 6.4rem); }
.px3\:5 { padding-left: clamp(2.4rem, 4vw + 0.16rem, 4rem); padding-right: clamp(2.4rem, 4vw + 0.16rem, 4rem); }
.px4 { padding-left: calc(var(--space-unit) * 4); padding-right: calc(var(--space-unit) * 4); }

.py1 { padding-top: var(--space-unit); padding-bottom: var(--space-unit); }
.py2 { padding-top: calc(var(--space-unit) * 2); padding-bottom: calc(var(--space-unit) * 2); }

.my4 { margin-top: calc(var(--space-unit) * 4); margin-bottom: calc(var(--space-unit) * 4); }
.mb3 { margin-bottom: calc(var(--space-unit) * 3); }
.mb4 { margin-bottom: calc(var(--space-unit) * 4); }

.heading-lead {
  position: relative;
  font-size: clamp(1.2rem, 0.5vw + 0.92rem, 1.4rem);
  line-height: 3.2rem;
  border-bottom: 1px solid #b1b1aa;
}

.lead-num {
  position: absolute;
  top: 0;
  right: 0;
  font-size: clamp(1.6rem, 0.5vw + 1.14rem, 1.8rem);
  line-height: 3.2rem;
}

.heading-title {
  font-size: clamp(2.8rem, 2vw + 1.68rem, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: clamp(4.2rem, 7.5vw, 7.2rem);
}

p {
  font-size: clamp(1.6rem, 0.5vw + 1.14rem, 1.8rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: left;
  overflow-wrap: break-word;
}

[lang="ja"] p { line-height: 2;  }

p:not([class*=en]) {
  letter-spacing: 0.025em;
  text-align: justify;
  margin-bottom: calc(var(--space-unit) * 4);
}

.text\:r { font-size: clamp(1.6rem, 0.5vw + 1.14rem, 1.8rem); } 


.static { position: static }
.fixed { position: fixed }
.absolute { position: absolute }
.relative { position: relative }
.sticky { position: sticky; }

.block { display: block }
.inline-block { display: inline-block }
.inline { display: inline }
.flex { display: flex }
.inline-flex { display: inline-flex }
.grid { display: grid }
.contents { display: contents }
.hidden { display: none }

.tabble { display: table; }
.table-caption { display: table-caption; }
.table-cell { display: table-cell; }
.table-column { display: table-column; }
.table-column-group { display: table-column-group; }
.table-footer-group { display: table-footer-group; }
.table-header-group { display: table-header-group; }
.table-row-group { display: table-row-group; }
.table-row { display: table-row; }

.defs { display: none; }

.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-scroll { overflow-y: scroll; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0 { right: 0; left: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; }
.grid-cols-auto-120 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.grid-cols-auto-160 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid-cols-auto-240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid-cols-auto-280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); }
.grid-cols-auto-320 { grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr)); }
.grid-cols-auto-360 { grid-template-columns: repeat(auto-fit, minmax(36rem, 1fr)); }
.grid-cols-auto-400 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 40rem), 1fr)); }
.grid-cols-auto-480 { grid-template-columns: repeat(auto-fit, minmax(48rem, 1fr)); }

.col-auto { grid-column: auto; }
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }
.col-start-13 { grid-column-start: 13; }
.col-start-auto { grid-column-start: auto; }
.col-end-1 { grid-column-end: 1; }
.col-end-2 { grid-column-end: 2; }
.col-end-3 { grid-column-end: 3; }
.col-end-4 { grid-column-end: 4; }
.col-end-5 { grid-column-end: 5; }
.col-end-6 { grid-column-end: 6; }
.col-end-7 { grid-column-end: 7; }
.col-end-8 { grid-column-end: 8; }
.col-end-9 { grid-column-end: 9; }
.col-end-10 { grid-column-end: 10; }
.col-end-11 { grid-column-end: 11; }
.col-end-12 { grid-column-end: 12; }
.col-end-13 { grid-column-end: 13; }
.col-end-auto { grid-column-end: auto; }

.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.grid-rows-none { grid-template-rows: none; }

.row-auto { grid-row: auto; }
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-4 { grid-row: span 4 / span 4; }
.row-span-5 { grid-row: span 5 / span 5; }
.row-span-6 { grid-row: span 6 / span 6; }
.row-span-full { grid-row: 1 / -1; }
.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }
.row-start-5 { grid-row-start: 5; }
.row-start-6 { grid-row-start: 6; }
.row-start-7 { grid-row-start: 7; }
.row-start-auto { grid-row-start: auto; }
.row-end-1 { grid-row-end: 1; }
.row-end-2 { grid-row-end: 2; }
.row-end-3 { grid-row-end: 3; }
.row-end-4 { grid-row-end: 4; }
.row-end-5 { grid-row-end: 5; }
.row-end-6 { grid-row-end: 6; }
.row-end-7 { grid-row-end: 7; }
.row-end-auto { grid-row-end: auto; }

.gap-0 { gap: 0; }
.gap-1 { gap: 0.4rem; }
.gap-2 { gap: 0.8rem; }
.gap-3 { gap: 1.2rem; }
.gap-4 { gap: 1.6rem; }
.gap-5 { gap: 2rem; }
.gap-6 { gap: 2.4rem; }
.gap-8 { gap: 3.2rem; }
.gap-px { gap: 1px; }
.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.4rem; }
.gap-x-2 { column-gap: 0.8rem; }
.gap-x-3 { column-gap: 1.2rem; }
.gap-x-4 { column-gap: 1.6rem; }
.gap-x-5 { column-gap: 2rem; }
.gap-x-6 { column-gap: 2.4rem; }
.gap-x-8 { column-gap: 3.2rem; }
.gap-x-px { column-gap: 1px; }
.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.4rem; }
.gap-y-2 { row-gap: 0.8rem; }
.gap-y-3 { row-gap: 1.2rem; }
.gap-y-4 { row-gap: 1.6rem; }
.gap-y-5 { row-gap: 2rem; }
.gap-y-6 { row-gap: 2.4rem; }
.gap-y-8 { row-gap: 3.2rem; }
.gap-y-px { row-gap: 1px; }

.flex-row	{ flex-direction: row; }
.flex-row-reverse	{ flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/*==========
Width/Hwight
==========*/
.w-1\/2, .w-2\/4, .w-3\/6, .w-6\/12 { width: 50%; }
.w-1\/3, .w-2\/6, .w-4\/12 { width: calc(100% / 3); }
.w-2\/3, .w-4\/6, .w-8\/12 { width: calc(100% / 3 * 2); }
.w-1\/4, .w-3\/12 { width: 25%; }
.w-3\/4, .w-9\/12 { width: 75%; }
.w-1\/5 { width: 20%; }
.w-2\/5 { width: 40%; }
.w-3\/5 { width: 60%; }
.w-4\/5 { width: 80%; }
.w-1\/6, .w-2\/12 { width: calc(100% / 6); }
.w-5\/6, .w-10\/12 { width: calc(100% / 6 * 5); }
.w-1\/12 { width: calc(100% / 12); }
.w-5\/12 { width: calc(100% / 12 * 5); }
.w-7\/12 { width: calc(100% / 12 * 7); }
.w-11\/12 { width: calc(100% / 12 * 11); }
.w-0 { width: 0; }
.w-1px { width: 1px; }
.w-12 { width: 1.2rem; }
.w-16 { width: 1.6rem; }
.w-20 { width: 2rem; }
.w-24 { width: 2.4rem; }
.w-32 { width: 3.2rem; }
.w-36 { width: 3.6rem; }
.w-48 { width: 4.8rem; }
.w-60 { width: 6rem; }
.w-64 { width: 6.4rem; }
.w-72 { width: 7.2rem; }
.w-80 { width: 8rem; }
.w-96 { width: 9.6rem; }
.w-100 { width: 10rem; }
.w-120 { width: 12rem; }
.w-160 { width: 16rem; }
.w-200 { width: 20rem; }
.w-240 { width: 24rem; }
.w-300 { width: 30rem; }
.w-360 { width: 35rem; }


/*==========
Spacing
==========*/

.sx-0 > * + * { margin-left: 0; }
.sx-1 > * + * { margin-left: var(--space-unit); }
.sx-2 > * + * { margin-left: calc(var(--space-unit) * 2); }
.sx-3 > * + * { margin-left: calc(var(--space-unit) * 3); }
.sx-4 > * + * { margin-left: calc(var(--space-unit) * 4); }
.sx-5 > * + * { margin-left: calc(var(--space-unit) * 5); }

.sy-0 > * + * { margin-top: 0; }
.sy-1 > * + * { margin-top: var(--space-unit); }
.sy-2 > * + * { margin-top: calc(var(--space-unit) * 2); }
.sy-3 > * + * { margin-top: calc(var(--space-unit) * 3); }
.sy-4 > * + * { margin-top: calc(var(--space-unit) * 4); }
.sy-5 > * + * { margin-top: calc(var(--space-unit) * 5); }

/*==========
Typography
==========*/
.font-sans { font-family: "Helvetica Neue", Helvetica, "Noto Sans JP Subset", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, "Yu Gothic", Meiryo, sans-serif; }
.font-serif { font-family: Georgia, "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; }
.font-mono	{ font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.subpixel { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

.palt { font-feature-settings: "palt"; }
.initial { font-feature-settings: initial; }

.t-12 { font-size: 1.2rem; }
.t-14 { font-size: 1.4rem; }
.t-16 { font-size: 1.6rem; }
.t-18 { font-size: 1.8rem; }
.t-20 { font-size: 2rem; }
.t-24 { font-size: 2.4rem; }
.t-30 { font-size: 3rem; }
.t-36 { font-size: 3.6rem; }
.t-48 { font-size: 4.8rem; }
.t-64 { font-size: 6.4rem; }
.t-80 { font-size: 8rem; }

.t-12\:14 { font-size: clamp(1.2rem, 0.5vw + 0.92rem, 1.4rem); }
.t-12\:16 { font-size: clamp(1.2rem, 1vw + 0.64rem, 1.6rem); }
.t-12\:18 { font-size: clamp(1.2rem, 1.5vw + 0.36rem, 1.8rem); }
.t-12\:20 { font-size: clamp(1.2rem, 2vw + 0.08rem, 2rem); }
.t-12\:24 { font-size: clamp(1.2rem, 3vw - 0.48rem, 2.4rem); }

.t-xs { font-size: clamp(1.2rem, 0.5vw + 0.92rem, 1.4rem); }
.t-s { font-size: clamp(1.4rem, 0.5vw + 1.12rem, 1.6rem); }
.t-r { font-size: clamp(1.6rem, 0.5vw + 1.14rem, 1.8rem); }
.t-m { font-size: clamp(1.6rem, 1vw + 1.04rem, 2rem); }
.t-l { font-size: clamp(2rem, 1vw + 1.44rem, 2.4rem); }
.t-xl { font-size: clamp(2.4rem, 3vw + 0.7rem, 3rem); }
.t-2xl { font-size: clamp(3rem, 4.5vw + 0.48rem, 4.8rem); }

.t-thin { font-weight: 200; }
.t-light { font-weight: 300; }
.t-regular { font-weight: 400; }
.t-medium { font-weight: 500 }
.t-semibold { font-weight: 600; }
.t-bold { font-weight: 700; }
.t-extrabold { font-weight: 800; }
.t-black { font-weight: 900; }

.t-italic { font-style: italic; }
.t-underline { text-decoration: underline; }
.t-dashed { text-decoration: dashed; }
.t-dotted { text-decoration: dotted; }
.t-double { text-decoration: double; }
.t-delete { text-decoration: line-through; }
.t-uppercase { text-transform: uppercase; }
.t-lowercase { text-transform: lowercase; }
.t-capitalize { text-transform: capitalize; }
.t-normal { font-style: normal; text-decoration: none; text-transform: none; }

.t-wrap { white-space: normal; }
.t-nowrap { white-space: nowrap; }
.t-pre { white-space: pre; }
.t-pre-line { white-space: pre-line; }
.t-pre-wrap { white-space: pre-wrap; }

.t-break { overflow-wrap: normal; word-break: normal; }
.t-break-all { word-break: break-all; }
.t-break-words { overflow-wrap: break-word; }
.t-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.t-left { text-align: left; }
.t-right { text-align: right; }
.t-center { text-align: center; }
.t-justify { text-align: justify; }

.tracking-tighter { letter-spacing: -0.08em; }
.tracking-tight { letter-spacing: -0.016em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.016em; }
.tracking-wider { letter-spacing: 0.08em; }
.tracking-widest { letter-spacing: 0.16em; }

.bg-fixed { background-attachment: fixed; }
.bg-local { background-attachment: local; }
.bg-scroll { background-attachment: scroll; }
.bg-clip-border { background-clip: border-box; }
.bg-clip-padding { background-clip: padding-box; }
.bg-clip-content { background-clip: content-box; }
.bg-clip-text { background-clip: text; }

.bg-transparent { background-color: transparent; }

.fill-current { fill: currentColor; }
.stroke-current { stroke: currentColor; }
/* 
clamp([min]rem, [v]vw + [r]rem, [max]rem)
x — current viewport width value (px).
y — resulting fluid font size for a current viewport width value x (px).
v — viewport width value that affects fluid value change rate (vw).
r — relative size equal to browser font size. Default value is 16px.

y1 = v / 100 * x1 + r
y2 = v / 100 * x2 + r

r = y1 - (v / 100 * x1)

v = (100 * (y2 − y1)) / (x2 - x1)
r = ((x1 * y2) - (x3 * y2)) / (x1 - x2)



text-xs 1.2(12px break560px) 1.4(14px break960px)
v = (100 * (14 - 12)) / (960 - 560)
v = 100 * 2 / 400
v = 0.5(vw)

r = ((560 * 14) - (960 * 12)) / (560 - 960)
r = (7840 - 11520) / -400
r = -3680 / -400
r = 9.2(px) = 0.92rem


16 560 20 960
v = (100 * (16 - 12)) / 400
v = 0.5(vw)

560x12 = 6720 / 960x12 = 11520
560x14 = 7840 / 960x14 = 13340
560x16 = 8960 / 960x16 = 15360
560x18 = 10080 / 960x18 = 17280
560x20 = 11200 / 960x20 = 19200
560x24 = 13440 / 960x24 = 23040
560x28 = 15680 / 960x28 = 26880
560x32 = 17920 / 960x32 = 30720
560x36 = 20160 / 960x36 = 34560
560x40 = 22400 / 960x40 = 38400
560x42 = 23520

r = ((560 * 16) - (960 * 12)) / -400
r = (8960 - 11520) / -400
r = -2560 / -400
r = -6.4px = -0.64rem

*/
/*====== Header ======*/
.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.branding {
  position: absolute;
  top: 20px;
  left: 20px;
}

.branding-logo {
  width: clamp(50px, 8vw, 70px);
 /* height: clamp(227px, 22.7vw * 1.6, 227px * 1.z);*/
  fill: var(--text-color);
}

@media(min-width: 768px) {
  .branding {
    top: 40px;
    left: 40px;
  }

}

.branding-icon-s {
  display: none;
}

.stalker {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #36342f;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.2s , background 0.2s, width 0.2s, height 0.2s, border 0.2s;
}
.stalker.is-moved {
  opacity: 0.5;
}
.stalker.is-outside {
  opacity: 0;
}
.stalker.is-hover {
  background: #fffc44;
  border: none;
  width: 64px;
  height: 64px;
}


.main {
  display: block;
}

/*====== Hero ======*/
.hero-contents {
  position: relative;
  width: 100%;
  height: calc(100vh - 60px);
  padding: 45px 0 0 45px;
}

.hero-container {
  width: 100%;
  height: 100%;
  background: rgb(212, 212, 212);
  border-radius: 12px 0 0 12px;
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid-contents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 100px 0;
}

.item-container {
  position: relative;
  display: block;
  width: 100%;
  background: rgb(180, 81, 81);
  overflow: hidden;
}

.item-view {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.item-view::after {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 200%;
  background: linear-gradient(to bottom, var(--bg-color), var(--bg-color) 50%, hsla(0,0%,100%,0));
  z-index: 2;
}

.item-container.show .item-view::after {
  transition: transform .8s cubic-bezier(0.5, 1, 0.89, 1);
  transform: translateY(-100%);
}