@charset "utf-8";

@font-face {
    font-family: "DIN-Regular";
    src: url('../img/inewpro/FONT/DIN-Regular.otf') format('opentype');
    font-weight: 400;
}
@font-face {
    font-family: "DIN Condensed Bold";
    src: url('../img/inewpro/FONT/DIN Condensed Bold.ttf') format('TrueType');
    font-weight: 400;
}

@font-face {
    font-family: "UtsukushiFONT";
    src: url('../img/inewpro/FONT/UtsukushiFONT.otf') format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: "NotoSansCJKjp";
    src: url('../img/inewpro/FONT/NotoSansCJKjp.otf') format('opentype');
    font-weight: 400;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*cssのリセット*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    /*    margin: 0;
    padding: 0;*/
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
}

html {
    margin-top: 0 !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ul,
ol {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    /*    padding: 0;*/
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
    transition: all .3s;
}

a:not(.short):hover {
    opacity: .7;
}
a.short:hover {
    cursor: default;
}

ins {
    text-decoration: none;
    color: #000;
    background-color: #ff9;
}

mark {
    font-weight: bold;
    font-style: italic;
    color: #000;
    background-color: #ff9;
}


abbr[title],
dfn[title] {
    cursor: help;
    border-bottom: 1px dotted;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

hr {
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #ccc;
}

input[type="submit"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="button"],
input[type="reset"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

button {
    outline: none;
    padding: 0;
    appearance: none;
    background-color: transparent;
    border: none;

}

html {
    font-size: 62.5%;
}

body {
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    color: #000000;
    line-height: 1.5;
}

img {
    width: 100%;
    image-rendering: -webkit-optimize-contrast;
    vertical-align: bottom;
}

.inner {
    width: 90%;
    max-width: 1170px;
    margin: 0 auto;
}

@media (max-width: 575px) {
	.inner {
		width: 100%;
	}
}
article {
    overflow: hidden;
}

/*-----------------------
         header
-------------------------*/

header {
    /* background-image: linear-gradient(90deg, rgba(241, 207, 99, 1) 23%, rgba(241, 193, 35, 1) 53%, rgba(255, 207, 99, 1) 82%); */
    background-image: linear-gradient(90deg, rgba(241, 193, 35, 1) 23%, rgba(241, 207, 99, 1) 53%, rgba(241, 193, 35, 1) 82%);
}
header .inner {
    width: 100%;
}
header,
header .subl.top {
    background-color: var(--gre1);
    color: var(--ylw2);
}

header:before {
    content: '';
    inset: 0;
    position: absolute;
    display: block;
    background-image: linear-gradient(to right, #00000071 0%, #00000000 30%, #00000000 40%, #00000000 60%, #00000071);
}

header .td.logo {
    color: #fff;
}

header :where(.td.mainMenu) a {
    --arc: var(--ylw2);
}

header .logo svg * {
    fill: #ffffff;
}

header .cart svg * {
    fill: #ffffff;
}

header .td.tp,
header input+.swh li {
    background-color: var(--ylw1);
}

header .td.cart .cart {
    background-color: #71717188;
}

.floatTOP>div {
    background-color: var(--gre1);
    background-image: radial-gradient(circle at 50% 24%, #00000000, #00000088);
    text-shadow: 0 .4em .6em #00000033;
    color: #ffffff;
}

@media screen and (min-width:840px) {
    :root {
        --half: linear-gradient(to right, #00000071, #00000000, #00000071);
    }

    header:before {
        /* background-image: linear-gradient(to right, #00000071, #00000000, #00000071); */
    }

    header .subl.top {
        background-color: transparent;
    }

    header .subl.top .xi>label>.subl:before {
        background-color: var(--gre1);
        opacity: .96;
    }
}

header :where(.subl > .xi > label)>a[act] {
    color: #ffffff;
    --arc: #ffffff;
}

body {
    --ylw1: #177cff;
    --ylw2: #177cff;
    --gre1: #F1C123;
    --gre2: #168673;
}

.caches {
    overflow: hidden;
    height: 0;
}

.flx0 .inner,
.flx0 .outer,
.flx .inner,
.flx .outer,
.flx1 .inner {
    padding: 8vw calc(8vw - env(safe-area-inset-right)) 8vw calc(8vw - env(safe-area-inset-left));
}

@media screen and (min-width:840px) {

    .flx0 .inner,
    .flx0 .outer,
    .flx .inner,
    .flx .outer,
    .flx1 .inner {
        padding: 48px calc(48px - env(safe-area-inset-right)) 48px calc(48px - env(safe-area-inset-left));
    }
}

.PurcFloat {
	display: flex;
    justify-content: flex-end;
}

.PurcFloat,
.PurcFloat:hover,
.PurcFloat:visited {
    inset: auto auto 2em;
}

.PurcFloat .statPic {
/*    inset: auto 0 0;*/
}

.PurcFloat,
.PurcFloat:hover,
.PurcFloat:visited {
    --ry: 30vw;
    pointer-events: none;
}

:where(.PurcFloat, .PurcFloat:hover, .PurcFloat:visited) {
	max-width: 100%;
}

.PurcFloat>* {
    position: relative;
}

.PurcFloat>div>div {
    background-color: var(--gre1);
}

.PurcFloat .statPic {
    pointer-events: auto;
/*    inset: 0;*/
/*    margin: auto;*/
    width: fit-content;
    max-width: 70%;
	top: unset !important;
}

.PurcFloat .statPic .slg {
    display: none;
}

.PurcFloat .statPic .pic {
    max-width: 100%;
}

@media screen and (min-width: 1470px) {
	.PurcFloat .statPic {
		right: unset !important;
	}
}

@media screen and (min-width: 840px) {

    .PurcFloat,
    .PurcFloat:hover,
    .PurcFloat:visited {
        --ry: 250px;
    }

    .PurcFloat .statPic {
        max-width: 40%;
    }
}

@keyframes bfloatIZ {
    0% {
        transform: translateY(-6em);
    }

    100% {
        transform: translateY(-7em);
    }
}

.section_ttl h2{
    font-weight: 400;
    text-align: center;
    font-size: clamp(24px, 3.646vw, 70px);
}
@media screen and (max-width: 768px) {

    .pc_br{
        display: none;
    }
}

/*-----------------------
        top
-------------------------*/

#top{
	position: relative;
    /*margin-top: 93px;*/
}
@media screen and (max-width: 840px) {
	#top{
	    /*margin-top: 60px;*/
	}
}


@media screen and (max-width: 768px) {
    #top{
        background-image: url('top_bg.png');
        background-size: cover;
        background-position: 59%;
        height: 750px;
        /*margin-top: 60px;*/
    }
    .top_bg{
        display: none;
    }

}

a[href^="tel:"] {
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}

a:not(.short) {
  transition: opacity 0.3s;
}
a:not(.short):hover {
  opacity: 0.7;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

a {
  text-decoration: none;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
  width: 100%;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
/*  filter: blur(10px);*/
}

/* フォームリセット */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/* 共通パーツ */
.img_panel {
  display: block;
	margin-top: 0;
	margin-bottom: 0;
}

/* buy */
.buy {
  margin-top: 7rem;
  margin-bottom: 10rem;
  background-color: #fff;
}

.buy__inner {
  padding: 0 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.buy__title {
  width: 400px;
}

.buy__container {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  width: 100%;
}

.buy__content {
  position: relative;
  display: flex;
  justify-content: center;
}

.buy__button {
  width: 70%;
  top: 74%;
  padding: 0 25px;
  text-align: center;
  margin-bottom: 1.5rem;
}

@media (max-width: 575px) {
	.buy__button {
		width: 100%;
	}
}

.cart__button {
  background-image: linear-gradient(#25a937 0%, #0a4e23 50%, #034e1e 51%);
  border: 2px solid #60880b;
  width: 100%;
  text-shadow: 0 0 5px #000000;
  color: #f7e500;
  padding: clamp(1rem, 0.125rem + 3vw, 1.5rem);
  font-size: clamp(2rem, 0.125rem + 3.73vw, 5.875rem);
  font-weight: 700;
}

.cart__button:not(.short):hover {
  transform: translate(-3px, -3px) scale(1.1);
  box-shadow: 6px 6px 6px #00000064;
}

/* footer */
.footer {
  display: flex;
  justify-content: flex-end;
  width: 750px;
}
@media screen and (max-width: 1024px) {
  .footer {
    display: block;
  }
}

.PurcFloat .statPic {
  position: fixed;
  bottom: 0;
  width: 150px;
}
@media screen and (max-width: 1024px) {
  .PurcFloat .statPic {
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  .PurcFloat .statPic {
    width: 100px;
  }
}

@-webkit-keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

.whitespace-nowrap {
  white-space: nowrap;
}
.fs-md {
  font-size: normal !important;
}
.fs-lg {
  font-size: large !important;
}
.fs-xl {
  font-size: larger !important;
}
.fs-xxl {
  font-size: x-large !important;
}
.fs-xxxl {
  font-size: xx-large !important;
}
.fs-sm {
  font-size: small !important;
}
.fs-xs {
  font-size: smaller !important;
}
.fs-xxs {
  font-size: x-small !important;
}
.fs-xxxs {
  font-size: xx-small !important;
}

.font-xs {
  font-size: 0.75rem !important;
}
.font-sm {
  font-size: 0.875rem !important;
}
.font-base {
  font-size: 1rem !important;
}
.font-lg {
  font-size: 1.125rem !important;
}
.font-xl {
  font-size: 1.25rem !important;
}
.font-2xl {
  font-size: 1.5rem !important;
}
.font-3xl {
  font-size: 1.875rem !important;
}
.font-3-5xl {
  font-size: 2rem !important;
}
.font-4xl {
  font-size: 2.25rem !important;
}
.font-4-5rem {
  font-size: 2.5rem !important;
}
.font-5xl {
  font-size: 3rem !important;
}
.font-5-5xl {
  font-size: 3.5rem !important;
}
.font-6xl {
  font-size: 4rem !important;
}
.font-6-5xl {
  font-size: 4.5rem !important;
}
.font-7xl {
  font-size: 5rem !important;
}
.font-7-5rxl {
  font-size: 5.5rem !important;
}
.font-8xl {
  font-size: 6rem !important ;
}
.font-8-5xl {
  font-size: 6.5rem !important;
}
.font-9xl {
  font-size: 7rem !important;
}
.font-9-5xl {
  font-size: 7.5rem !important;
}
.font-10xl {
  font-size: 8rem !important;
}

.font-0-25vw {
  font-size: 0.25vw !important;
}
.font-0-5vw {
  font-size: 0.5vw !important;
}
.font-0-75vw {
  font-size: 0.75vw !important;
}
.font-1vw {
  font-size: 1vw !important;
}
.font-1-25vw {
  font-size: 1.25vw !important;
}
.font-1-5vw {
  font-size: 1.5vw !important;
}
.font-1-75vw {
  font-size: 1.75vw !important;
}
.font-2vw {
  font-size: 2vw !important;
}
.font-2-25vw {
  font-size: 2.25vw !important;
}
.font-2-5vw {
  font-size: 2.5vw !important;
}
.font-2-75vw {
  font-size: 2.75vw !important;
}
.font-3vw {
  font-size: 3vw !important;
}
.font-3-25vw {
  font-size: 3.25vw !important;
}
.font-3-5vw {
  font-size: 3.5vw !important;
}
.font-3-75vw {
  font-size: 3.75vw !important;
}
.font-4vw {
  font-size: 4vw !important;
}
.font-4-25vw {
  font-size: 4.25vw !important;
}
.font-4-25vw {
  font-size: 4.25vw !important;
}
.font-4-5vw {
  font-size: 4.5vw !important;
}
.font-4-75vw {
  font-size: 4.75vw !important;
}
.font-5vw {
  font-size: 5vw !important;
}
.font-5-25vw {
  font-size: 5.25vw !important;
}
.font-5-5vw {
  font-size: 5.5vw !important;
}
.font-5-75vw {
  font-size: 5.75vw !important;
}
.font-6vw {
  font-size: 6vw !important;
}
.font-6-25vw {
  font-size: 6.25vw !important;
}
.font-6-5vw {
  font-size: 6.5vw !important;
}
.font-6-75vw {
  font-size: 6.75vw !important;
}
.font-7vw {
  font-size: 7vw !important;
}
.font-7-25vw {
  font-size: 7.25vw !important;
}
.font-7-5vw {
  font-size: 7.5vw !important;
}
.font-7-75vw {
  font-size: 7.75vw !important;
}
.font-8vw {
  font-size: 8vw !important;
}
.font-8vw {
  font-size: 8vw !important;
}

.font-8-25vw {
  font-size: 8.25vw !important;
}

.font-8-5vw {
  font-size: 8.5vw !important;
}

.font-8-75vw {
  font-size: 8.75vw !important;
}

.font-9vw {
  font-size: 9vw !important;
}

.font-9-25vw {
  font-size: 9.25vw !important;
}

.font-9-5vw {
  font-size: 9.5vw !important;
}

.font-9-75vw {
  font-size: 9.75vw !important;
}

.font-10vw {
  font-size: 10vw !important;
}

@media (max-width: 1199px) {
  .font-xl-xs {
    font-size: 0.75rem !important;
  }
  .font-xl-sm {
    font-size: 0.875rem !important;
  }
  .font-xl-base {
    font-size: 1rem !important;
  }
  .font-xl-lg {
    font-size: 1.125rem !important;
  }
  .font-xl-xl {
    font-size: 1.25rem !important;
  }
  .font-xl-2xl {
    font-size: 1.5rem !important;
  }
  .font-xl-3xl {
    font-size: 1.875rem !important;
  }
  .font-xl-3-5xl {
    font-size: 2rem !important;
  }
  .font-xl-4xl {
    font-size: 2.25rem !important;
  }
  .font-xl-4-5xl {
    font-size: 2.5rem !important;
  }
  .font-xl-5xl {
    font-size: 3rem !important;
  }
  .font-xl-5-5xl {
    font-size: 3.5rem !important;
  }
  .font-xl-6xl {
    font-size: 4rem !important;
  }
  .font-xl-6-5xl {
    font-size: 4.5rem !important;
  }
  .font-xl-7xl {
    font-size: 5rem !important;
  }
  .font-xl-7-5rxl {
    font-size: 5.5rem !important;
  }
  .font-xl-8xl {
    font-size: 6rem !important ;
  }
  .font-xl-8-5xl {
    font-size: 6.5rem !important;
  }
  .font-xl-9xl {
    font-size: 7rem !important;
  }
  .font-xl-9-5xl {
    font-size: 7.5rem !important;
  }
  .font-xl-10xl {
    font-size: 8rem !important;
  }
}

@media (max-width: 991px) {
  .font-lg-xs {
    font-size: 0.75rem !important;
  }
  .font-lg-sm {
    font-size: 0.875rem !important;
  }
  .font-lg-base {
    font-size: 1rem !important;
  }
  .font-lg-lg {
    font-size: 1.125rem !important;
  }
  .font-lg-xl {
    font-size: 1.25rem !important;
  }
  .font-lg-2xl {
    font-size: 1.5rem !important;
  }
  .font-lg-3xl {
    font-size: 1.875rem !important;
  }
  .font-lg-3-5xl {
    font-size: 2rem !important;
  }
  .font-lg-4xl {
    font-size: 2.25rem !important;
  }
  .font-lg-4-5xl {
    font-size: 2.5rem !important;
  }
  .font-lg-5xl {
    font-size: 3rem !important;
  }
  .font-lg-5-5xl {
    font-size: 3.5rem !important;
  }
  .font-lg-6xl {
    font-size: 4rem !important;
  }
  .font-lg-6-5xl {
    font-size: 4.5rem !important;
  }
  .font-lg-7xl {
    font-size: 5rem !important;
  }
  .font-lg-7-5rxl {
    font-size: 5.5rem !important;
  }
  .font-lg-8xl {
    font-size: 6rem !important ;
  }
  .font-lg-8-5xl {
    font-size: 6.5rem !important;
  }
  .font-lg-9xl {
    font-size: 7rem !important;
  }
  .font-lg-9-5xl {
    font-size: 7.5rem !important;
  }
  .font-lg-10xl {
    font-size: 8rem !important;
  }
}

@media (max-width: 767px) {
  .font-md-xxxxs {
    font-size: 0.4rem !important;
  }
  .font-md-xxxs {
    font-size: 0.5rem !important;
  }
  .font-md-xxs {
    font-size: 0.625rem !important;
  }
  .font-md-xs {
    font-size: 0.75rem !important;
  }
  .font-md-sm {
    font-size: 0.875rem !important;
  }
  .font-md-base {
    font-size: 1rem !important;
  }
  .font-md-lg {
    font-size: 1.125rem !important;
  }
  .font-md-xl {
    font-size: 1.25rem !important;
  }
  .font-md-2xl {
    font-size: 1.5rem !important;
  }
  .font-md-3xl {
    font-size: 1.875rem !important;
  }
  .font-md-3-5xl {
    font-size: 2rem !important;
  }
  .font-md-4xl {
    font-size: 2.25rem !important;
  }
  .font-md-4-5xl {
    font-size: 2.5rem !important;
  }
  .font-md-5xl {
    font-size: 3rem !important;
  }
  .font-md-5-5xl {
    font-size: 3.5rem !important;
  }
  .font-md-6xl {
    font-size: 4rem !important;
  }
  .font-md-6-5xl {
    font-size: 4.5rem !important;
  }
  .font-md-7xl {
    font-size: 5rem !important;
  }
  .font-md-7-5rxl {
    font-size: 5.5rem !important;
  }
  .font-md-8xl {
    font-size: 6rem !important ;
  }
  .font-md-8-5xl {
    font-size: 6.5rem !important;
  }
  .font-md-9xl {
    font-size: 7rem !important;
  }
  .font-md-9-5xl {
    font-size: 7.5rem !important;
  }
  .font-md-10xl {
    font-size: 8rem !important;
  }
}
@media (max-width: 575px) {
  .font-sm-xxs {
    font-size: 0.65rem !important;
  }
  .font-sm-xs {
    font-size: 0.75rem !important;
  }
  .font-sm-sm {
    font-size: 0.875rem !important;
  }
  .font-sm-base {
    font-size: 1rem !important;
  }
  .font-sm-lg {
    font-size: 1.125rem !important;
  }
  .font-sm-xl {
    font-size: 1.25rem !important;
  }
  .font-sm-2xl {
    font-size: 1.5rem !important;
  }
  .font-sm-3xl {
    font-size: 1.875rem !important;
  }
  .font-sm-3-5xl {
    font-size: 2rem !important;
  }
  .font-sm-4xl {
    font-size: 2.25rem !important;
  }
  .font-sm-4-5xl {
    font-size: 2.5rem !important;
  }
  .font-sm-5xl {
    font-size: 3rem !important;
  }
  .font-sm-5-5xl {
    font-size: 3.5rem !important;
  }
  .font-sm-6xl {
    font-size: 4rem !important;
  }
  .font-sm-6-5xl {
    font-size: 4.5rem !important;
  }
  .font-sm-7xl {
    font-size: 5rem !important;
  }
  .font-sm-7-5rxl {
    font-size: 5.5rem !important;
  }
  .font-sm-8xl {
    font-size: 6rem !important ;
  }
  .font-sm-8-5xl {
    font-size: 6.5rem !important;
  }
  .font-sm-9xl {
    font-size: 7rem !important;
  }
  .font-sm-9-5xl {
    font-size: 7.5rem !important;
  }
  .font-sm-10xl {
    font-size: 8rem !important;
  }
}

.shop_panel {
	margin-bottom: 1.5rem;
}

.shop_panel .inner {
	width: 90%;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.shop_panel .inner h3 {
	padding-top: 8rem;
	padding-bottom: 8rem;
}
@media (max-width: 575px) {
    .shop_panel .inner {
        width: 85%;
    }
	
	.shop_panel .inner h3 {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
}

.shop_panel .title {
	text-align: center;
	font-weight: 600;
	padding-bottom: 1rem;
}

.part.purcContents1, .part.purcContents2 {
    display: block;
    overflow: auto;
    white-space: nowrap;
	padding-bottom: 1vw;
}

.part.purcContents1 .item, .part.purcContents2 .item {
    display: inline-block;
    vertical-align: top;
	width: 80%;
}

.part.purcContents1 .item, .part.purcContents2 .item {
    padding-left: 15px;
}

.part.purcContents1 .item .panel, .part.purcContents2 .item .panel {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.part.purcContents1 .item .name, .part.purcContents2 .item .name {
	text-align: center;
	font-weight: 500;
	min-height: 3em;
}

.part.purcContents1 .item img, .part.purcContents2 .item img {
  padding: clamp(1rem, 0.125rem + 3vw, 1.5rem);
}

.part.purcContents1 .item .price, .part.purcContents2 .item .price {
	text-align: center;
	font-weight: 500;
}

.part.purcContents1 .item .buy__button, .part.purcContents2 .item .buy__button {
	padding: unset;
	width: 80%;
}

.part.purcContents1 .item .cart__button, .part.purcContents2 .item .cart__button {
  padding: clamp(1rem, 0.125rem + 3vw, 0.5rem);
}

.part:is(.purcContents1)::-webkit-scrollbar, .part:is(.purcContents2)::-webkit-scrollbar {	
	-webkit-appearance: none;
	width: 8px;
	height: 8px;
}

.part:is(.purcContents1)::-webkit-scrollbar-track, .part:is(.purcContents2)::-webkit-scrollbar-track {
	background-color:#f4f5f6;
	background-image:linear-gradient(to left, #00000000 0%, #f4f5f655 10%, #f4f5f6dd 50%, #f4f5f655 90%, #00000000 100%);
	border-radius:4px;
}
.part:is(.purcContents1)::-webkit-scrollbar-thumb, .part:is(.purcContents2)::-webkit-scrollbar-thumb {
	background-color:#031746;
	width:8px;
	height:8px;
	border-radius:4px;
	box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
.part:where(.purcContents1) .item, .part:where(.purcContents2) .item {
	scroll-snap-align:center;
}

@media screen and (min-width: 640px) {
    .part.purcContents1, .part.purcContents2 {
        font-size: 50%;
    }
	
    .part.purcContents1 .item, .part.purcContents2 .item {
        width: 44%;
    }
}

@media screen and (min-width: 1000px) {
    .part.purcContents1 .item, .part.purcContents2 .item {
        width: 30%;
    }
}

.controlr1, .controlr2 {
	display:flex;
	position:absolute;
	inset:65% 0 0;
	padding:1em 1em .5em;
	gap:1em;
	justify-content:center;
	align-items:flex-end;
	pointer-events:none;
}
.controlr1 li, .controlr2 li {
	display:block;
	pointer-events:all;
	cursor:pointer;
}
.controlr1 :is(.back, .front), .controlr2 :is(.back, .front) {
    z-index: 5;
}
.controlr1 :where(.back, .front), .controlr2 :where(.back, .front) {
	position:absolute;
	inset:-3em auto auto;
	height:4em;
	width:1.5em;
}
.controlr1 :where(.back, .front):before,
.controlr1 :where(.back, .front):after,
.controlr2 :where(.back, .front):before,
.controlr2 :where(.back, .front):after {
	position:absolute;
	display:block;
	content:'';
	width:8px;
	height:2em;
	color: #aaaaaa;
	background-color:#aaaaaacc;
	inset:auto;
	top:0;
}
.controlr1 .back:before, .controlr2 .back:before {
	transform:skewX(-30deg);
}
.controlr1 .front:before, .controlr2 .front:before {
	transform:skewX(30deg);
}
.controlr1 .back:after, .controlr2 .back:after {
	transform:rotateX(180deg) skewX(-30deg);
}
.controlr1 .front:after, .controlr2 .front:after {
	transform:rotateX(180deg) skewX(30deg);
}
.controlr1 .back:before,
.controlr1 .back:after,
.controlr2 .back:before,
.controlr2 .back:after {
	left:0;
	transform-origin:bottom left;
}
.controlr1 .front:before,
.controlr1 .front:after,
.controlr2 .front:before,
.controlr2 .front:after {
	right:0;
	transform-origin:bottom right;
}
.controlr1 .back, .controlr2 .back {
	left:-2.5em;
}
.controlr1 .front, .controlr2 .front {
	right:-2.5em;
}

.sp_br {
	display: none;
}

@media screen and (max-width: 768px) {
    .sp_br{
        display: block;
    }
	.controlr1 :where(.back, .front), .controlr2 :where(.back, .front) {
		height:2em;
		width:1em;
	}
	.controlr1 :where(.back, .front):before,
	.controlr1 :where(.back, .front):after,
	.controlr2 :where(.back, .front):before,
	.controlr2 :where(.back, .front):after {
		width:4px;
		height:1em;
	}
	.controlr1 .back, .controlr2 .back {
		left:-1.5em;
	}
	.controlr1 .front, .controlr2 .front {
		right:-1.5em;
	}
}