@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Noto+Sans+JP:wght@100..900&display=swap');

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

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

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}


/* ==========================================================================
	Reset
============================================================================= */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-shadow: none;
  outline: none;
}

html {
  height: 100%;
}

body, h1, h2, h3, h4, h5, h6, p, em, i, dl, dt, dd, ol, ul, li, figure  {
  margin: 0;
	padding: 0;
}

body {
  -webkit-text-size-adjust: 100%; /* for iOS, Android */
}

main {
  display: block;
}


h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p {
  margin: 0 0 1.5rem;
}

ul, ol {
  list-style: none;
}

img {
  height: auto;
  vertical-align: top;
}

em {
  font-style:normal;
	font-weight:normal;
}

strong, b {
  font-weight: bold;
  font-style: normal;
}

button {
	padding: 0;
  border-style: none;
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  line-height: 1;
}

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

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


/* ==========================================================================
  CSS Variables
============================================================================= */
:root {
  --fz-34: 2.125rem;
	--fz-30: 1.875rem;
	--fz-28: 1.75rem;
	--fz-26: 1.625rem;
	--fz-24: 1.5rem;
  --fz-22: 1.375rem;
  --fz-20: 1.25rem;
  --fz-18: 1.125rem;
  --fz-17: 1.0625rem;
  --fz-16: 1rem;
  --fz-15: 0.9375rem;
  --fz-14: 0.875rem;
  --fz-13: 0.8125rem;
  --fz-12: 0.75rem;
  --fz-11: 0.6875rem;
  --fz-10: 0.625rem;
  --color-primary: #ed6c00;
	--color-primary-rgb: 237,108,0;
  --color-primary-dark: #d35200;
	--color-primary-dark-rgb: 211,82,0;
  --color-primary-light: #ff861a;
	--color-primary-light-rgb: 255,134,26;
	--color-secondary: #8b674a;
	--color-secondary-rgb: 139,103,74;
  --color-secondary-dark: #714d30;
	--color-secondary-dark-rgb: 113,77,48;
  --color-secondary-light: #a58164;
	--color-secondary-light-rgb: 165,129,100;
  --color-white: #fff;
	--color-white-rgb: 255,255,255;
  --color-black: #000;
	--color-black-rgb: 0,0,0;
  --color-gray: #756d68;
  --color-gray-light: #c3bbb6;
  --color-gray-lightest: #f6f2f1;
  --color-red: #e82942;
	--color-red-rgb: 232,41,66;
	--color-text: #222;
	--color-border: #ddd5d0;
  --color-caution: #f00;
  --color-caution-rgb: 255,0,0;
	--color-required: #f3668c;
	--color-tag-category: #8b674a;
	--color-tag-category-rgb: 139,103,74;
	--color-tag-common: #ed6c00;
	--color-tag-common-rgb: 237,108,0;
	--color-tag-reserve: #f3668c;
	--color-tag-reserve-rgb: 243,102,140;
	--color-tag-sale: #e82942;
	--color-tag-sale-rgb: 232,41,66;
}


/* ==========================================================================
  Typography
============================================================================= */
body {
  font-family: "Lato", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: var(--fz-16);
  font-weight: normal;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 769px) {
	body {
		font-size: var(--fz-15);
	}
}

sup{
  vertical-align: baseline;
  position: relative;
  top: -1ex;
  font-size:0.6em;
}

sub{
  vertical-align: baseline;
  position: relative;
  top: 0ex;
  font-size:0.6em;
}

abbr[title] {
  text-decoration: none;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (max-width: 768px) {
	button, a {
		touch-action: manipulation;
	}
}

@media (any-hover: hover) {
  a:hover {
    text-decoration: none;
		transition: all 0.2s;
  }
	
	a:hover img,
	a:hover span {
		transition: all 0.2s;
  }
}

:focus {
  outline: none;
}

select,
button,
input,
textarea {
  font-size: var(--fz-16);
	color: var(--color-text);
}

select,
input,
textarea {
  background-color: var(--color-gray-lightest);
}

input:-webkit-autofill,
textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px var(--color-gray-lightest) inset;
}

@media (min-width: 769px) {
	select,
	input,
	textarea {
		font-size: var(--fz-15);
	}
}


/* ==========================================================================
	Utilities
============================================================================= */
.tel-link {
  text-decoration: none;
}

@media (min-width: 769px) {
  .tel-link {
    pointer-events: none;
    cursor: default;
  }
}

/* media query */
@media (max-width: 768px) {
	.sp-hide {
		display: none;
	}
	.pc-hide {
		display: block;
	}
}

@media (min-width: 769px) {
  .sp-hide {
    display: block;
  }
	.pc-hide {
    display: none;
  }
}

/* align */
.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

/* pointer */
.inactive,
.is-disabled {
	pointer-events: none;
  cursor: default;
}

/* price */
.price {
	letter-spacing: 0;
}

.tax {
  font-weight: normal !important;
}

.unit {
	font-size: var(--fz-12);
	margin-left: 0.2em;
}

.unit span {
	font-weight: normal !important;
}

/* text */
.red {
  color: var(--color-red);
}

.omit {
	color: var(--color-caution);
}

.caution {
	color: var(--color-caution);
	line-height: 1.4;
	margin-bottom: 15px;
}

.lead {
	margin-bottom: 20px;
	line-height: 1.4;
}

/* margin bottom */
.mb0 {
	margin-bottom: 0 !important;
}

.mb5 {
	margin-bottom: 5px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.mb15 {
	margin-bottom: 15px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.mb40 {
	margin-bottom: 40px !important;
}

.mb50 {
	margin-bottom: 40px !important;
}

.mb60 {
	margin-bottom: 40px !important;
}

/* size auto */
.w-auto {
	width: auto !important;
}

.h-auto {
	height: auto !important;
}


/* ==========================================================================
	Header
============================================================================= */
.site-header {
  width: 100%;
  height: 55px;
  background-color: var(--color-white);
	border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  left: 0;
  z-index: 6000;
}

@media (min-width: 769px) {
  .site-header {
    height: 70px;
    position: relative;
  }
}

.site-header_inner {
  width: 100%;
  height: 100%;
	padding: 0 15px;
  display: flex;
	justify-content: center;
  align-items: center;
	column-gap: 15px;
	position: relative;
}

@media (min-width: 769px) {
  .site-header_inner {
    padding: 0 20px;
		justify-content: space-between;
		column-gap: 20px;
  }
}

@media (min-width: 961px) {
  .site-header_inner {
		column-gap: 30px;
  }
}

.site-header_logo {
  margin: 0 auto;
}

.site-header_logo a {
	display: block;
	width: 140px;
}

.site-header_logo img {
	width: 100%;
}

@media (min-width: 769px) {
  .site-header_logo {
		margin: 0;
  }
	
	.site-header_logo a {
		width: 162px;
	}
}

@media (min-width: 961px) {
	.site-header_logo a {
		width: 188px;
	}
}

.site-header_left {
  display: flex;
	flex: 1 0 0;
  align-items: center;
	justify-content: flex-start;
	column-gap: 15px;
}

@media (min-width: 769px) {
  .site-header_left {
		display: none;
  }
}

.site-header_btn-drawer,
.site-header_btn-sp-search {
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.site-header_btn-drawer {
	transform: translateX(0);
	transition: all .2s;
	z-index: 8000;
}

.site-header_btn-drawer.is-active {
	transform: translateX(86vw);
}

.site-header_btn-drawer span,
.site-header_btn-sp-search span {
	color: var(--color-text);
	font-size: var(--fz-24);
	line-height: 1;
}

.site-header_btn-drawer.is-active span {
	color: var(--color-white);
}

@media (max-width: 768px) {/* only SP */
	.site-header_btn-drawer span.icon-cross,
	.site-header_btn-sp-search span.icon-cross {
		font-size: var(--fz-22);
  }
}

@media (min-width: 769px) {
  .site-header_btn-drawer,
	.site-header_btn-sp-search {
    display: none;
  }
	
	.site-header_search{
		flex: 1;
	}
}

.site-header_right {
  display: flex;
	flex: 1 0 0;
	align-items: center;
  justify-content: flex-end;
  column-gap: 10px;
}

@media (min-width: 769px) {
	.site-header_right {
		height: 100%;
		flex: 0;
		column-gap: 15px;
	}
}

@media (min-width: 1301px) {
	.site-header_right {
		column-gap: 18px;
	}
}

@media (min-width: 769px) {
	.site-header_member {
		height: 100%;
		position: relative;
	}
	
	.site-header_member .btn-member {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.site-header_member .btn-member:before {
		transform: translateY(-3px);
	}
}

.site-header_cart {
  transform: translateY(2px);
  position: relative;
}

.site-header_cart .count {
	width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-red);
	font-size: var(--fz-10);
	line-height: 1;
	color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(var(--color-black-rgb), 0.15);
  position: absolute;
	top: -9px;
	right: -9px;
}

.site-header_favorite a.btn-favorite,
.site-header_member a.btn-member,
.site-header_cart a.btn-cart {
  color: var(--color-text);
	font-size: var(--fz-24);
	line-height: 1;
	text-decoration: none;
}

@media (min-width: 769px) {
	.site-header_cart {
    transform: none;
  }
	
	.site-header_favorite a.btn-favorite,
	.site-header_member a.btn-member,
	.site-header_cart a.btn-cart {
		height: 100%;
  }
	
	.site-header.minimal .site-header_btn-drawer {
    display: none;
  }
}

@media (min-width: 769px) and (any-hover: hover) {
  .site-header_favorite a.btn-favorite:hover,
	.site-header_member a.btn-member:hover,
	.site-header_cart a.btn-cart:hover::before {
		color: var(--color-primary);
  }
}


/* ==========================================================================
	Footer
============================================================================= */
.site-footer {
  width: 100%;
  background-color: var(--color-primary);
	position: relative;
}

.site-footer a {
	color: var(--color-white);
  text-decoration: none;
}

@media (any-hover: hover) {
  .site-footer a:hover {
		color: var(--color-white);
		opacity: 0.7;
	}
}

.page-min-height .site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
}

.site-footer_inner {
  width: 100%;
  max-width: 1300px;
	margin: 0 auto;
  padding: 40px 15px;
	display: flex;
	flex-direction: column;
	gap: 40px 15px;
}

@media (min-width: 769px) {
  .site-footer_inner {
    padding: 40px 20px;
		flex-direction: row;
		justify-content: space-between;
		gap: 40px 20px;
  }
}

@media (min-width: 1301px) {
  .site-footer_inner {
    padding: 40px 0;
		gap: 40px 30px;
  }
}

.site-footer_left {}

.site-footer_right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px 0;
}

@media (min-width: 769px) {
	.site-footer_right {
		justify-content: flex-end;
	}
}

.footer-sns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 20px;
}

@media (min-width: 769px) {
	.footer-sns {
	  justify-content: flex-end;
	}
}

.footer-sns li a {
	width: 28px;
  height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-sns li a img {
	width: 100%;
}

.copyright {
	font-size: var(--fz-13);
	line-height: 1;
	letter-spacing: 0;
  color: var(--color-white);
	text-align: center;
}

@media (min-width: 769px) {
  .copyright {
		font-size: var(--fz-12);
		text-align: right;
  }
}


/* ==========================================================================
	Layout
============================================================================= */
.layout {
  font-size: 3.73333vw;
  line-height: 1.42857;
}

@media (min-width: 769px) {
  .layout {
    font-size: 1.45833vw;
  }
}

@media (min-width: 961px) {
  .layout {
    font-size: 1.07692vw;
  }
}

@media (min-width: 1301px) {
  .layout {
    font-size: 0.875rem;
  }
}

.layout-right-side,
.layout-left-side,
.layout-one-column,
.layout-narrow {
  width: 100%;
	padding: 20px 15px 40px;
  margin: 0 auto;
}

.layout-right-side,
.layout-left-side,
.layout-one-column {
	max-width: 1300px;
}

.layout-narrow {
	max-width: 980px;
}

.layout-right-side,
.layout-left-side {
	display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.layout-left-side {
	gap: 40px 0;
}

@media (min-width: 769px) {
	.layout-right-side,
	.layout-left-side,
	.layout-one-column,
	.layout-narrow {
		padding: 25px 20px 50px;
  }
	
	.layout-right-side {
		flex-direction: row;
  }
	
	.layout-left-side {
		flex-direction: row-reverse;
  }

	.layout-right-side,
	.layout-left-side {
		gap: 0 50px;
  }
}

@media (min-width: 1301px) {
  .layout-right-side,
	.layout-left-side,
	.layout-one-column,
	.layout-narrow {
		padding: 30px 0 60px;
  }
	
	.layout-right-side,
	.layout-left-side {
		gap: 0 60px;
  }
}


/* ==========================================================================
	Site main
============================================================================= */
.site-main {
  width: 100%;
}

@media (min-width: 769px) {
	.layout-right-side .site-main {
		width: calc(70% - calc(50px/2));
  }
	
	.layout-left-side .site-main {
		width: calc(80% - calc(50px/2));
  }
	
	.page-cart-confirm .site-main,
	.page-order-complete .site-main,
	.page-member-register .site-main,
	.page-inquiry .site-main,
	.page-member-order-history .site-main,
	.page-member-order-history-detail .site-main {
		font-size: var(--fz-14);
	}
}

@media (min-width: 1301px) {
	.layout-right-side .site-main {
		width: calc(70% - calc(60px/2));
  }
	
	.layout-left-side .site-main {
		width: calc(80% - calc(60px/2));
  }
}


/* ==========================================================================
	Side
============================================================================= */
.side {
  width: 100%;
}

@media (min-width: 769px) {
  .layout-right-side .side {
		width: calc(30% - calc(50px/2));
  }
	
	.layout-left-side .side {
		width: calc(20% - calc(50px/2));
  }
}

@media (min-width: 1301px) {
  .layout-right-side .side {
		width: calc(30% - calc(60px/2));
  }
	
	.layout-left-side .side {
		width: calc(20% - calc(60px/2));
  }
}


/* ==========================================================================
	Forms
============================================================================= */
.select-wrap {
  width: 100%;
	height: 44px;
}

.search-block_select.select-wrap {
	width: 85px;
  height: 100%;
	display: flex;
	align-items: center;
}

.search-block_select.select-wrap::after {
  content: "";
  display: block;
  width: 1px;
  height: 60%;
  background-color: var(--color-border);
}

@media (min-width: 769px) {
	.select-wrap{
		max-width: 400px;
	}
	
	.search-block_select.select-wrap {
		width: 75px;
	}
}

.select-wrap select {
  width: 100%;
  height: 100%;
	padding: 0 20px 0 10px;
	background-size: 14px auto;
	border: 2px solid var(--color-gray-lightest);
  border-radius: 4px;
  background-color: var(--color-gray-lightest);
  text-overflow: ellipsis;
}

.search-block_select.select-wrap select {
	background-size: 11px auto;
	border-radius: 4px 0 0 4px;
	padding: 0 20px 0 10px;
}

@media (min-width: 769px) {	
	.search-block_select.select-wrap select {
		padding: 0 14px 0 10px;
  }
}

.select-wrap--center {
  position: relative;
}

.select-wrap--center .select-wrap_select-item {
  width: 100%;
	background-size: 15px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  cursor: pointer;
}

@media (min-width: 769px) {
  .select-wrap--center .select-wrap_select-item {
    background-size: 14px auto;
  }
}

.select-wrap--center select {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 150;
  opacity: 0;
  cursor: pointer;
}

.form-checkbox,
.form-radio {
	padding-left: 25px;/* form-checkbox(radio):before width + padding 5px */
  position: relative;
	cursor: pointer;
}

.form-checkbox::before,
.form-checkbox_text::after,
.form-radio::before {
	width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-light);
  content: '\0020';
  position: absolute;
	top: 0;
	left: 0;
  box-sizing: border-box;
}

.form-checkbox::before {
	border-radius: 4px;
  display: block;
}

.form-checkbox_text::after {
	border-radius: 4px;
	background-color: var(--color-primary);
  display: none;
}

.form-radio::before {
  border-radius: 50%;
  display: block;
}

.form-radio_text::before,
.form-radio_text::after {
  border-radius: 50%;
  content: '\0020';
  display: none;
  position: absolute;
  box-sizing: border-box;
}

.form-radio_text::before {
	width: 10px;
  height: 10px;
  background-color: var(--color-primary);
	top: 5px;
	left: 5px; 
  z-index: 100;
}

.form-radio_text::after {
	width: 20px;
  height: 20px;
  border: 2px solid var(--color-primary);
  top: 0;
  left: 0;
  z-index: 50;
}

@media (min-width: 769px) {
	.form-checkbox,
	.form-radio {
    padding-left: 21px;/* form-checkbox(radio):before width + padding 5px */
  }

  .form-checkbox::before,
	.form-checkbox_text::after,
	.form-radio::before {
    width: 16px;
    height: 16px;
		top: 2px;
  }
	
	.form-radio_text::before {
    width: 8px;
		height: 8px;
		top: 6px;
		left: 4px;
  }
	
	.form-radio_text::after {
    width: 16px;
    height: 16px;
		top: 2px;
  }
}

.form-checkbox [type="checkbox"],
.form-radio [type="radio"] {
  clip: rect(0, 0, 1px, 1px);
  overflow: hidden;
  position: absolute;
}

.form-checkbox [type="checkbox"]:checked + .form-checkbox_text::after,
.form-radio [type="radio"]:checked + .form-radio_text::before,
.form-radio [type="radio"]:checked + .form-radio_text::after {
  display: block;
}

.form-checkbox [type="checkbox"]:checked + .form-checkbox_text::after {
	border-color: var(--color-primary);
}

.form-field,
.form-textarea {
  width: 100%;
	border: 2px solid var(--color-gray-lightest);
  border-radius: 4px;
  background-color: var(--color-gray-lightest);
}

.form-field {
	height: 44px;
  padding: 10px;
}

.form-textarea {
	height: 140px;
	padding: 6px 10px;
  resize: vertical;
}

@media (min-width: 769px) {
  .form-field,
	.form-textarea {
		max-width: 400px;
  }
}

.form-field:focus,
.form-textarea:focus,
.form-table .select-wrap select:focus,
.order-section .select-wrap select:focus {
  border-color: var(--color-primary);
	transition: all .2s;
}

.form-field.is-error,
.form-textarea.is-error,
.form-table .select-wrap select.is-error,
.order-section .select-wrap select.is-error {
  border-color: var(--color-caution);
}

.required {
  border-radius: 3px;
  background-color: var(--color-required);
	font-size: var(--fz-11);
	line-height: 1;
  color: var(--color-white);
  font-weight: normal;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
	padding: 4px 8px;
}

.error-message {
	padding-top: 2px;
	font-size: var(--fz-14);
	line-height: 1.4;
  color: var(--color-caution);  
}

.notice {
	padding-top: 2px;
	font-size: var(--fz-13);
	line-height: 1.4;
  color: var(--color-gray);
	text-indent: -1em;
  padding-left: 1em;
}

@media (min-width: 769px) {
	.notice {
		font-size: var(--fz-12);
	}
}

.view-password,
.view-password-confirm {
	padding-top: 10px;
}

.view-password .form-checkbox_text,
.view-password-confirm .form-checkbox_text {
  line-height: 1;
  vertical-align: 1px;
}

.radio-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@media (min-width: 769px) {
  .radio-list {
    flex-direction: column;
    align-items: flex-start;
  }
}

.radio-list li {
	margin-right: 20px;
}

@media (min-width: 769px) {
  .radio-list li {
    margin-right: 0;
  }
}

.radio-list li > label + div {
	margin-top: 5px;
}

.form-buttons {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
	gap: 15px 0;
}

@media (min-width: 769px) {
  .form-buttons {
    flex-direction: row;
		gap: 0 10px;
  }
}

.form-buttons .btn,
.form-buttons .btn--border {
	width: 100%;
	max-width: 350px;
}


/* ==========================================================================
	Search block
============================================================================= */
.search-block {
	width: 100%;
	display: none;
}

@media (max-width: 768px) {/* only SP */
	.site-header_search.search-block {
		padding: 15px;
		background-color: var(--color-white);
		position: absolute;
		top: 55px;/* header-height */
	}
	
	.site-header_search.search-block.is-open {
		display: block;
	}
	
	/* home */
	.site-main_search.search-block {
		padding: 15px;
		background-color: #fff;
	}
	
	.site-main_search.search-block {
		display: block;
	}
	
	.home .site-header_btn-sp-search {
		display: none;
	}
}

@media (min-width: 769px) {	
  .search-block {
		display: block;
  }
	
	/* home */
	.site-main_search.search-block {
		display: none;
	}
}

.search-block_wrap {
	height: 44px;
	border-radius: 4px;
	background-color: var(--color-gray-lightest);
}

@media (min-width: 769px) {	
  .search-block_wrap {
		height: 40px;
	}
}

.search-block_form {
  width: 100%;
  height: 100%;
}

.search-block_inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.search-block_field {
  height: 100%;
	padding: 0 7px;
  border: none;
	background-color: transparent;
}

.search-block_field:-ms-input-placeholder,
.search-block_field::placeholder,
.search-block_field:-ms-input-placeholder,
.search-block_field::-ms-input-placeholder {
  color: var(--color-gray);
}

@media (min-width: 769px) {
	.search-block_field {
		padding: 0 10px;
  }
}

.search-block_button {
	width: 40px;
  height: 100%;
  border: none;
	border-radius: 0 2px 2px 0;
  background-color: transparent;
	color: var(--color-text);
	font-size: var(--fz-24);
	line-height: 1;
  display: flex;
	align-items: center;
  justify-content: center;
}

@media (min-width: 769px) {
	.search-block_button {
		font-size: var(--fz-22);
	} 
}

@media (any-hover: hover) {
	.search-block_button:hover {
		color: var(--color-primary);
		transition: all 0.2s;
  }
}


/* ==========================================================================
	Layer
============================================================================= */
.layer {
  width: 100%;
  height: 100vh;
  background-color: rgba(var(--color-black-rgb), 0.5);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

@media (max-width: 768px) {
	.layer {
		pointer-events: auto;
	}
}


/* ==========================================================================
	Drawer
============================================================================= */
.drawer {
  display: block;
	background-color: rgba(var(--color-black-rgb), 0.5);
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -100%;
  opacity: 0;
  transition: opacity .2s;
  z-index: 7000;
}

.drawer.is-open {
  left: 0;
	opacity: 1;
}

.drawer_inner {
  width: 86vw;
  height: 100%;
	background-color: var(--color-white);
  overflow: auto;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-86vw);
  transition: all .2s;
}

.drawer.is-open .drawer_inner {
  transform: translateZ(0);
}

.drawer a {
  text-decoration: none;
}

.drawer .member-block {
	padding: 20px;
  background-color: rgba(var(--color-primary-rgb), 0.2);
  text-align: center;
}

.drawer .member-block.is-logged {
  background-color: var(--color-primary);
  text-align: left;
}

.drawer .member-block_name,
.drawer .member-block_point {
	font-size: var(--fz-14);
  color: var(--color-white);
}

.drawer .member-block_name strong,
.drawer .member-block_point strong {
	font-size: var(--fz-18);
}

.drawer .member-block_btn-login {
	width: 100%;
	max-width: 350px;
	height: 50px;
	margin: 0 auto 10px;
	font-size: var(--fz-16);
}

.drawer .member-menu {
  background-color: rgba(var(--color-primary-rgb), 0.2);
}

.drawer .member-menu li {
	border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.4);
}

.drawer-lv1_item {
	border-bottom: 1px solid var(--color-border);
}
.drawer .member-menu li a,
.drawer-lv1_item > a,
.drawer-lv2_item > a,
.drawer-lv3_item > a {
	color: var(--color-text);
}

.drawer .member-menu li a,
.drawer-lv1_item > a {
	padding: 20px 15px;
	font-size: var(--fz-16);
}

.drawer-lv2_item > a {
	width: 100%;
	padding: 15px 15px 15px 30px;
}

.drawer-lv1_item > a {
	width: 100%;
	display: block;
}

.drawer-lv1_item.has-sub > a,
.drawer-lv2_item.has-sub > a {
  display: flex;
	justify-content: space-between;
  align-items: center;
}

.drawer-lv1_item.has-sub > a:after,
.drawer-lv2_item.has-sub > a:after {
	font-size: var(--fz-18);
	transform: rotateX(0);
	transition: all .2s linear;
}

.drawer-lv1_item.has-sub.is-open > a:after,
.drawer-lv2_item.has-sub.is-open > a:after {
  transform: rotateX(180deg);
	transition: all .2s linear;
}	

.drawer-lv1 + .drawer-lv1 {
  border-top: 1px solid var(--color-border);
}

.drawer-lv2,
.drawer-lv3 {
	display: none;
}

.drawer-lv3_item > a {
	display: block;
	width: 100%;
	padding: 15px 15px 15px 45px;
}


/* ==========================================================================
	Navigation
============================================================================= */
/* header navigation */
.site-navigation {
  display: none;
}

@media (min-width: 769px) {
	.site-navigation {
		display: block;
	}
		
	.nav-lv1 {
		display: flex;
		column-gap: 20px;
	}
}

@media (min-width: 1301px) {
  .nav-lv1 {
    column-gap: 30px;
  }
}

.nav-lv1 a {
	text-decoration: none;
}

.nav-lv1_item {
  display: flex;
  align-items: center;
}

.nav-lv1_item > a > span {
  padding-right: 5px;
	color: var(--color-text);
  font-size: var(--fz-15);
  font-weight: bold;
  white-space: nowrap;
}

.nav-lv1_item.has-sub > a:after {
	display: inline-block;
	color: var(--color-text);
	font-size: var(--fz-12);
	transform: rotateX(0);
}

.nav-lv1_item.has-sub.is-open > a:after {
	transform: rotateX(180deg);
}

.nav-lv1_item.has-sub.is-open > a span {
    color: var(--color-primary);
}

@media (any-hover: hover) {
  .nav-lv1_item > a:hover span {
    color: var(--color-primary);
  }
	.nav-lv1_item.has-sub > a:after {
		color: var(--color-text);
	}
}

.sub-nav {
  width: 100%;
  /*max-height: 0;*/
  border-top: 1px solid var(--color-border);
  background-color: var(--color-white);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  overflow:auto;
}

.is-open .sub-nav {
  /*max-height: 100vh;*/
height: calc(100vh - 50px);
	display: block;
	transition: all .2s linear;
}

.nav-lv2 {
  width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

@media (min-width: 961px) {
	.nav-lv2 {
		padding: 30px 20px;
		grid-template-columns: repeat(6, 1fr);
	}
}

@media (min-width: 1301px) {
  .nav-lv2 {
		padding: 30px 0;
		grid-template-columns: repeat(8, 1fr);
  }
}

.nav-lv2_item,
.nav-lv3 {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}

.nav-lv2_item > a {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-border);
  font-weight: bold;
}

.nav-lv3_item > a {
  font-size: var(--fz-14);
  font-weight: normal;
}

.nav-lv2_item > a,
.nav-lv3_item > a{
	color: var(--color-text);
}

@media (any-hover: hover) {
  .nav-lv2_item > a:hover,
	.nav-lv3_item > a:hover {
    color: var(--color-primary);
  }
}

/* footer navigation */
.footer-navigation {
	display: flex;
	flex-direction: column;
	gap: 10px 0;
}

@media (min-width: 769px) {
	.footer-navigation {
	  flex-direction: row;
	  gap: 0 40px;
	}
}

@media (min-width: 1301px) {
	.footer-navigation {
	  gap: 0 60px;
	}
}

.footer-navigation ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 15px;
}

@media (min-width: 769px) {
	.footer-navigation ul {
	  display: flex;
		flex-direction: column;
	  gap: 10px 0;
	}
}

.footer-navigation a {
	font-size: var(--fz-14);
}

@media (min-width: 769px) {
	.footer-navigation a {
		font-size: var(--fz-13);
	}
}


/* ==========================================================================
	Member block
============================================================================= */
.member-block {
  width: 100%;
  background-color: rgba(var(--color-primary-rgb), 0.2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.member-block_btn-login a {
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
	border-radius: 3px;
	color: var(--color-white);
	font-size: var(--fz-16);
  font-weight: bold;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (any-hover: hover) {
  .member-block_btn-login a:hover {
    color: var(--color-white);
  }
}

.member-block_register-link a {
  color: var(--color-text);
	text-decoration: none;
}

@media (any-hover: hover) {
  .member-block_register-link a:hover {
    color: var(--color-primary);
  }
}


/* ==========================================================================
	Member info popup
============================================================================= */
.member-info-popup {
	width: 140px;
  display: none;
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  /*z-index: 7000;*/
  transform: translateX(-50%);
}

.is-logged .member-info-popup {
	width: 180px;
  transform: translateX(-59%);
}

.member-info-popup_inner {
	border-radius: 0 0 8px 8px;
  background-color: var(--color-white);
  box-shadow: 0 0 5px rgba(var(--color-black-rgb), 0.3);
  overflow: hidden;
}

.member-info-popup::before {
	width: 14px;
  height: 14px;
  background-color: var(--color-white);
  box-shadow: 0 0 5px rgba(var(--color-black-rgb), 0.3);
  content: '\0020';
  display: block;
  position: absolute;
	top: -7px;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%) rotate(-45deg);
}

.is-logged .member-info-popup::before {
  background-color: var(--color-primary);
  transform: translateX(52%) rotate(-45deg);
}

.member-info-popup.is-popup-open {
  display: block;
}

.member-info-popup.is-hover::before {
  background-color: var(--color-primary-dark);
}

.member-info-popup .member-block {
  border: none;
  background-color: var(--color-primary);
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 100;
  display: flex;
}

.member-info-popup .member-block a {
	padding: 15px;
  color: var(--color-white);
	text-decoration: none;
  display: block;
}

@media (any-hover: hover) {
  .member-info-popup .member-block a:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
  }
}

.member-info-popup .member-block_name,
.member-info-popup .member-block_point {
  font-size: var(--fz-11);
  color: var(--color-white);
}

.member-info-popup .member-block_name strong,
.member-info-popup .member-block_point strong {
  font-size: var(--fz-15);
}

.member-info-popup ul {
  width: 100%;
  background-color: var(--color-white);
  position: relative;
  z-index: 50;
}

.member-info-popup li:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.member-info-popup li a {
  padding: 15px 10px 15px 15px;
	color: var(--color-text);
	font-size: var(--fz-14);  
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

@media (any-hover: hover) {
  .member-info-popup li a:hover {
    color: var(--color-primary);
  }
}


/* ==========================================================================
	Free banner
============================================================================= */
.free-banner {
	background-color: var(--color-primary);
}

.free-banner_inner {
	height: 44px;
	background-image: url("../images/common/bg_bnr_a_sp_left.png"), url("../images/common/bg_bnr_a_sp_right.png");
	background-repeat: no-repeat, no-repeat;
  background-size: 84px auto, 84px auto;
  background-position: left center, right center;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 769px) {
  .free-banner_inner {
    height: 52px;
    background-image: url("../images/common/bg_bnr_a_pc_left.png"), url("../images/common/bg_bnr_a_pc_right.png");
    background-size: 383px auto, 382px auto;
		background-position: left -180px center, right -180px center;
  }
}

@media (min-width: 961px) {
  .free-banner_inner {
    background-position: left -90px center, right -90px center;
  }
}

@media (min-width: 1301px) {
  .free-banner_inner {
    background-position: left center, right center;
  }
}

.free-banner_text {
	font-size: var(--fz-18);
	font-weight: bold;
	line-height: 1;
	color: var(--color-white);
	letter-spacing: 0;
	white-space: nowrap;
}

.free-banner_price {
	display: inline;
	font-size: var(--fz-12);
}

.free-banner_price .price {
	font-family: "Lato", serif;
	font-size: var(--fz-22);
  font-weight: 700;
	margin-right: 0.1em;
}

/* banner text with icon */
.free-banner_text.icon-bnr {
	min-height: 28px;
	padding-left: 36px;
	transform: translateY(0.1em);
}

.icon-bnr {
	background: url("../images/svg/bnr_free_track.svg") no-repeat left top/28px 28px;
}

@media (min-width: 769px) {
  .free-banner_text {
		font-size: var(--fz-22);
  }
	
  .free-banner_text .price {
    font-size: var(--fz-26);
  }
	
	.free-banner_text.icon-bnr {
	  min-height: 32px;
	  padding-left: 40px;
	}
	
	.icon-bnr {
		background-size: 32px 32px;
	}
}


/* ==========================================================================
	Information block
============================================================================= */
.information-block {
  width: 100%;
	padding: 20px 15px 0 15px;
}

@media (min-width: 769px) {
.information-block {
    padding: 20px 20px 0 20px;
  }
}

.information-block_inner {
  width: 100%;
	max-width: 1300px;
  margin: 0 auto;
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}


/* ==========================================================================
	Information box
============================================================================= */
.information-box {
  width: 100%;
	padding: 15px;
  border-radius: 4px;
  background-color: rgba(var(--color-primary-rgb), 0.08);
}

.information-box_date {
	font-size: var(--fz-14);
	margin-bottom: 5px;
  color: var(--color-primary);
  display: block;
}
.information-box_date:before {
  font-size: var(--fz-15);
	margin-right: 5px;
}

.information-box_text {
	font-size: var(--fz-14);
  line-height: 1.4;
}

.information-box_text a {
  color: var(--color-primary);
}

@media (any-hover: hover) {
  .information-box_text a:hover {
    text-decoration: none;
		transition: all 0.2s;
  }
}


/* ==========================================================================
	New release box
============================================================================= */
.new-release-box_link {
  width: 100%;
  height: 100%;
  text-decoration: none;
  display: block;
}

@media (any-hover: hover) {
  .new-release-box_link:hover img {
    opacity: 0.7;
		transition: all .2s;
  }
}

.new-release-box_image {
  width: 100%;
	height: auto;
	margin-bottom: 10px;
  text-align: center;
	aspect-ratio: 1 / 1;
  overflow: hidden;
	position: relative;
}

.new-release-box_image > img {
  width: 100%;
	height: 100%;
	object-fit: contain;
}

.new-release-box_category {
	padding: 4px 8px;
	margin-bottom: 3px;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-secondary);
	font-size: var(--fz-11);
	line-height: 1;
  color: var(--color-white);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.new-release-box_title {
  width: 100%;
  max-height: calc((20 / 14)* 2em);
	margin-bottom: 10px;
	color: var(--color-text);
  font-size: var(--fz-14);
  line-height: 1.4;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media (any-hover: hover) {
  a:hover .new-release-box_title {
		color: var(--color-primary);
		transition: all 0.2s;
	}
}

@supports (-webkit-line-clamp: 2) {
  .new-release-box_title {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
}

.new-release-box_title::before,
.new-release-box_title::after {
  content: '…';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 2em;
  -ms-wrap-flow: start;
  display: block;
}

@supports (-webkit-line-clamp: 2) {
  .new-release-box_title::before,
	.new-release-box_title::after {
    content: normal;
  }
}

.new-release-box_title::after {
  background: currentColor;
  color: white;
  top: auto;
}

.new-release-box_price {
	font-size: var(--fz-11);
  line-height: 1;
  font-weight: bold;
	color: var(--color-text);
}

@media (min-width: 769px) {
  .new-release-box_price {
    font-size: var(--fz-12);
  }
}

.new-release-box_price .price {
	font-size: var(--fz-18);
	margin-right: 0.1em;
}

.new-release-box_release-date {
	font-size: var(--fz-14);
	line-height: 1;
  color: var(--color-tag-reserve);
  font-weight: bold;
	width: 100%;
}


/* ==========================================================================
	Pickup box
============================================================================= */
.pickup-box_link {
  width: 100%;
  height: 100%;
  text-decoration: none;
  display: block;
}

@media (any-hover: hover) {
  .pickup-box_link:hover img {
    opacity: 0.7;
		transition: all .2s;
  }
}

.pickup-box_image {
  width: 100%;
	height: auto;
	margin-bottom: 10px;
	aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

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

.pickup-box_title {
	color: var(--color-text);
	font-size: var(--fz-14);
  line-height: 1.4;
  text-align: center;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media (any-hover: hover) {
	a:hover .pickup-box_title {
		color: var(--color-primary);
		transition: all 0.2s;
	} 
}

@supports (-webkit-line-clamp: 2) {
  .pickup-box_title {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
}

.pickup-box_title::before,
.pickup-box_title::after {
  content: '…';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 2em;
  -ms-wrap-flow: start;
  display: block;
}

@supports (-webkit-line-clamp: 2) {
  .pickup-box_title::before,
	.pickup-box_title::after {
    content: normal;
  }
}

.pickup-box_title::after {
  background: currentColor;
  color: white;
  top: auto;
}


/* ==========================================================================
	Title
============================================================================= */
.page-title {
  width: 100%;
	padding-bottom: 14px;
	margin-bottom: 20px;
  border-bottom: 2px solid var(--color-primary);
	font-size: var(--fz-24);
  line-height: 1.4;
}

/* ---- Each Title ---- */
.section-title {
	font-size: var(--fz-14);
  line-height: 1;
}

.section-title .en {
	font-size: var(--fz-30);
  font-weight: 300;
	line-height: 1;
	letter-spacing: 0;
	color: var(--color-primary);
}

.item-detail_title {
	font-size: var(--fz-22);
  line-height: 1.4;
}

.login-block_title,
.qa-section_title,
.text-section h1,
.text-border-section h1 {
	font-size: var(--fz-20);
  line-height: 1.4;
}

.text-section h2,
.text-border-section h2 {
	font-size: var(--fz-18);
	line-height: 1.4;
}

.text-section h3,
.text-border-section h3,
.special-item-box_title {
	font-size: var(--fz-16);
	line-height: 1.4;
}

.special-item-box_title {
  font-weight: bold;
}

.order-section h2,
.thanks-section h2,
.register-section h2,
.address-section h2 {
	font-size: var(--fz-20);
}

.book-section_title,
.modal_title,
.related-items h3,
.recent-items h3 {
	font-size: var(--fz-18);
}

@media (min-width: 769px) {
  .search-meta .narrow-down-popup_title {		
    font-size: var(--fz-18);
  }
}

.page-member-order-history-detail .order-section h2 {
	font-size: var(--fz-16);
}

.order-section h3 {
	font-size: var(--fz-14);
}


/* ==========================================================================
	Slick
============================================================================= */
.slick-arrow {
	width: 48px;
	height: 48px;
  border-radius: 3px;
  top: 50%;
  z-index: 2000;
  transform: translateY(-50%);
}

@media (min-width: 769px) {
	.slick-arrow {
    width: 40px;
		height: 40px;
  }
}

.slick-arrow::before {
  display: none;
}

.slick-arrow.slick-disabled {
  opacity: 0;
}

.slick-arrow.slick-prev {
	left: 0;
}

.slick-arrow.slick-next {
	right: 0;
}

.slick-arrow.slick-prev,
.slick-arrow.slick-next {
  background-color: rgba(var(--color-primary-rgb), 0.5);
	background-size: 22px 22px;
}

@media (min-width: 769px) {
	.slick-arrow.slick-prev,
	.slick-arrow.slick-next {
		background-size: 18px 18px;
	} 
}

@media (any-hover: hover) {
	.slick-arrow.slick-prev:hover,
	.slick-arrow.slick-next:hover {
    background-color: rgba(var(--color-primary-rgb), 1.0);
		transition: all .2s;
  }
}


/* ==========================================================================
	Buttons
============================================================================= */
.btn,
.btn--border {
	height: 56px;
	border-radius: 3px;
  overflow: hidden;
}

@media (min-width: 769px) {
	.btn,
	.btn--border {
		height: 50px;	
	}
}

.btn .btn_link,
.btn--border .btn_link {
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
	color: var(--color-white);
	font-size: var(--fz-16);
  font-weight: bold;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: all .3s;
}

.address-chosen .btn .btn_link {
	pointer-events: none;
	background-color: var(--color-gray-light);
}

@media (any-hover: hover) {
  .btn .btn_link:hover,
	.btn--border .btn_link:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
  }
}

.btn--border {
  border: 1px solid var(--color-primary);
}

.btn--border .btn_link {
  background-color: var(--color-white);
	color: var(--color-primary);
}

@media (any-hover: hover) {
  .btn--border .btn_link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
  }
}

button.btn,
button.btn--border {
  padding: 0;
  margin: 0;
  border: none;
  background-color: var(--color-primary);
	font-size: var(--fz-16);
  color: var(--color-white);
  font-weight: bold;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .3s;
}

@media (any-hover: hover) {
  button.btn:hover,
	button.btn--border:hover {
    background-color: var(--color-primary-dark);
		color: var(--color-white);
  }
}

button.btn--border {
  border: 1px solid var(--color-primary);
  background-color: var(--color-white);
  color: var(--color-primary);
}

.address-chosen button.btn-set.btn--border {
	pointer-events: none;
  border: 1px solid var(--color-gray-light);
  background-color: var(--color-white);
  color: var(--color-gray-light);
}

@media (any-hover: hover) {
  button.btn--border:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
  }
}

.inline-button {
  padding: 0;
  margin: 0;
  border: none;
  color: var(--color-primary);
	font-size: var(--fz-16);
  text-decoration: underline;
}

@media (min-width: 769px) {
	.inline-button {
		font-size: var(--fz-15);
	}
}

@media (any-hover: hover) {
	.inline-button:hover {
		text-decoration: none;
		transition: all 0.2s;
	}
}

.btn-change,
.btn-apply,
.btn-auto-address,
.cart-box_btn-buy-again,
.btn-view-status,
.btn-add-cart,
.btn-delete {
	height: 34px;
}

.btn-change,
.btn-apply,
.btn-delete {
	width: 80px;
  margin-bottom: 0;
}

.btn-auto-address,
.cart-box_btn-buy-again,
.btn-view-status {
	width: 120px;
}

.btn-add-cart {
	width: calc(100% - 90px);
	max-width: 350px;
}

@media (min-width: 769px) {
	.btn-add-cart {
		width: 100%;
	}
}

button.btn--border.btn-auto-address {
	display: inline-block;
}

.btn-change .btn_link,
.btn-apply .btn_link,
button.btn.btn-change,
button.btn.btn-add-cart,
button.btn--border.btn-auto-address,
button.btn--border.btn-delete,
.cart-box_btn-buy-again .btn_link,
.btn-view-status.btn--border .btn_link {
	font-size: var(--fz-15);
	font-weight: normal;
}

.btn-add {
	width: 100%;
	max-width: 350px;
}

button.btn--border.btn-add {
	margin: 0 auto;
}

.btn-add:before,
.btn-add-cart:before {
	margin-right: 0.4em;
	font-weight: normal;
}

.btn.is-disabled,
.btn.inactive {
  background-color: var(--color-gray-light) !important;
}

.btn--border.is-disabled,
.btn--border.inactive{
  border-color: var(--color-gray-light) !important;
  color: var(--color-gray-light) !important;
}


/* ==========================================================================
	Book section
============================================================================= */
.book-section:not(:last-child) {
  padding-bottom: 20px;
}

/* Target position adjustment on SP */
@media (max-width: 768px) {/* only SP */
	.book-section:before {
		content: "";
    display: block;
    height: 70px; /* header height + padding */
    margin-top: -70px; /* negative margin */
    visibility: hidden;
	}
}

.book-section_title {
	margin-bottom: 10px;
}

.book-section .section-inner {
  display: grid;
	row-gap: 15px;
}

@media (min-width: 769px) {
  .book-section .section-inner {
		grid-template-columns: repeat(4, 1fr);
    gap: 40px 20px;
  }
}

@media (min-width: 961px) {
  .book-section .section-inner {
		grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1301px) {
	.book-section .section-inner {
		grid-template-columns: repeat(6, 1fr);
		gap: 40px 30px;
  }
}


/* ==========================================================================
	Book box
============================================================================= */
.book-box {
	padding-bottom: 15px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
	column-gap: 15px;
}

@media (min-width: 769px) {
  .book-box {
    padding-bottom: 0;
		border-bottom: none;
    flex-direction: column;
		column-gap: 0;
		row-gap: 10px;
  }
}

.book-box_image {
	width: calc(20% - calc(15px/2));
	min-width: 104px;
	height: auto;
  overflow: hidden;
}

@media (min-width: 769px) {
  .book-box_image {
    width: 100%;
  }
}

.book-box_image a {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
	display: block;
}

.book-box_image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (any-hover: hover) {
  .book-box_image a:hover img {
    opacity: 0.7;
		transition: all .2s;
  }
}

.book-box_content {
	width: calc(80% - calc(15px/2));
}

@media (min-width: 769px) {
  .book-box_content {
    width: 100%;
  }
}

.book-box_title {
	font-size: var(--fz-14);
  line-height: 1.4;
	text-decoration: none;
  display: block;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
}

@supports (-webkit-line-clamp: 3) {
  .book-box_title {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
  }
}

.book-box_title::before,
.book-box_title::after {
  content: '…';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 3em;
  -ms-wrap-flow: start;
  display: block;
}

@supports (-webkit-line-clamp: 3) {
  .book-box_title::before,
	.book-box_title::after {
    content: normal;
  }
}

@media (min-width: 769px) {
  .book-box_title {
    max-height: calc((20 / 14) * 4em);
  }
	
	@supports (-webkit-line-clamp: 4) {
    .book-box_title {
      -webkit-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 4;
    }
  }
	
	.book-box_title::before,
	.book-box_title::after {
    top: 4em;
  }
	
  @supports (-webkit-line-clamp: 4) {
    .book-box_title::before,
		.book-box_title::after {
      content: normal;
    }
  }
}

.book-box_title::after {
  background: currentColor;
  color: white;
  top: auto;
}

.book-box_title a {
	color: var(--color-text);
  text-decoration: none;
}

@media (any-hover: hover) {
  .book-box_title a:hover {
		color: var(--color-primary);
	}
}

.book-box_publisher {
	margin-bottom: 5px;
	font-size: var(--fz-13);
  line-height: 1.4;
  color: var(--color-gray);
}

.book-box_meta {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.book-box_price {
	font-size: var(--fz-11);
	line-height: 1;
  font-weight: bold;
}

@media (min-width: 769px) {
  .book-box_price {
    font-size: var(--fz-12);
  }
}

.book-box_price .price {
	font-size: var(--fz-18);
	margin-right: 0.1em;
}

.book-box_price .before-price {
	font-size: var(--fz-10);
  color: var(--color-gray);
}

.book-box_price .before-price .price {
	font-size: var(--fz-14);
	margin-right: 0.1em;
}

.book-box_price .after-price {
	margin-left: 5px;
	font-size: var(--fz-11);
  color: var(--color-red);
}

.book-box_price .after-price .price {
	font-size: var(--fz-15);
	margin-right: 0.1em;
}

.book-box_price .point {
	font-size: var(--fz-14);
  color: var(--color-red);
  font-weight: bold;
}

.book-box_meta_inner {
	width: calc(100% - 26px);
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.book-box_tags-and-date {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.book-box_free,
.book-box_reserve,
.book-box_sale,
.book-box_outstock,
.book-box_restock {
	padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: calc(infinity * 1px);
	font-size: var(--fz-11);
	line-height: 1;
	letter-spacing: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-box_free {
  border-color: var(--color-tag-common);
  color: var(--color-tag-common);
}

.book-box_reserve {
  background-color: rgba(var(--color-tag-reserve-rgb), 0.2);
  color: var(--color-text);
}

.book-box_sale {
  background-color: var(--color-tag-sale);
	border-color: var(--color-tag-sale);
  color: var(--color-white); 
}

.book-box_outstock {
  border-color: var(--color-tag-sale);
  color: var(--color-tag-sale);
}

.book-box_restock {
  border-color: var(--color-tag-sale);
  color: var(--color-tag-sale);
}

.book-box_favorite {
	width: 26px;
  padding: 0;
  margin-bottom: 0;
  margin-left: auto;
  border: none;
	font-size: var(--fz-26);
  line-height: 1;
}

.book-box_favorite .heart-off {
  width: 100%;
  height: auto;
  color: rgba(var(--color-primary-rgb), 0.5);
}

.book-box_favorite .heart-on {
  width: 100%;
  height: auto;
  color: var(--color-red);
  display: none;
}

@media (any-hover: hover) {
  .book-box_favorite:hover .heart-off {
    color: rgba(var(--color-primary-rgb), 1.0);
		transition: all 0.2s;
  }
}

.book-box_favorite.is-checked .heart-off {
  display: none;
}

.book-box_favorite.is-checked .heart-on {
  display: block;
}


/* ==========================================================================
	Book categories
============================================================================= */
.book-categories {
  border-top: 1px solid var(--color-gray-light);
  border-left: 1px solid var(--color-gray-light);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 40px;
}

@media (min-width: 769px) {
  .book-categories {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 961px) {
  .book-categories {
    grid-template-columns: repeat(7, 1fr);
  }
}

.book-categories li {
  border-right: 1px solid var(--color-gray-light);
  border-bottom: 1px solid var(--color-gray-light);
}

.book-categories li a {
	color: var(--color-text);
	font-size: var(--fz-16);
  font-weight: bold;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
	padding: 12px;
}

@media (any-hover: hover) {
	.book-categories li a:hover {
		color: var(--color-primary);
		transition: all 0.2s;
	} 
}

@media (min-width: 769px) {
	.book-categories li a {
		font-size: var(--fz-15);
	}
}

.book-categories li.is-disabled a {
  color: var(--color-gray-light);
}


/* ==========================================================================
	Search meta
============================================================================= */
.search-meta {
  width: 100%;
  display: flex;
  justify-content: space-between;
	column-gap: 15px;
  position: relative;
}

@media (min-width: 769px) {
  .search-meta {
    justify-content: flex-start;
    align-items: center;
		column-gap: 10px;
  }
}

.search-meta .select-sort {
	width: calc(50% - calc(15px/2));
  border: 1px solid var(--color-gray-light);
	font-size: var(--fz-15);
  font-weight: bold;
	line-height: 1;
}

@media (min-width: 769px) {
  .search-meta .select-sort {
    width: 130px;
		font-size: var(--fz-14);
  }
}

.search-meta .select-wrap--center .select-wrap_select-item {
	padding: 15px 22px 15px 10px;
}

@media (min-width: 769px) {
  .search-meta .select-wrap--center .select-wrap_select-item {
    padding: 10px 21px 10px 10px;
  }
}

.search-meta .btn-narrow-down {
	width: calc(50% - calc(15px/2));
  border: 1px solid var(--color-gray-light);
	background-color: var(--color-white);
	background-size: 15px auto;
	font-size: var(--fz-15);
  font-weight: bold;
	line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
	padding: 15px 10px;
  z-index: 200;
}

@media (min-width: 769px) {
  .search-meta .btn-narrow-down {
		width: auto;
		border-radius: calc(infinity * 1px);
    border: 1px solid var(--color-primary);
    background: none;
		font-size: var(--fz-14);
    font-weight: normal;
		padding: 10px 15px;
    color: var(--color-primary);
  }
}

@media (min-width: 769px) and (any-hover: hover) {
  .search-meta .btn-narrow-down:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
		transition: all 0.2s;
  }
}

@media (max-width: 768px) {/* only SP */
  .is-narrow-down-popup-open .search-meta .btn-narrow-down {
    border-bottom: none;
  }
}

.search-meta .narrow-down-popup {
  width: 100%;
	padding: 15px;
  border: 1px solid var(--color-gray-light);
  background-color: var(--color-white);
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 100;
  display: none;
}

@media (min-width: 769px) {
  .search-meta .narrow-down-popup {
    width: 100%;
		max-width: 600px;
		padding: 20px;
    border: none;
    border-radius: 6px;
    position: fixed;
    top: 50%;
    left: 50%;
    /*z-index: 6500;*/
    transform: translate(-50%, -50%);
  }
}

.is-narrow-down-popup-open .search-meta .narrow-down-popup {
  display: block;
}

.search-meta .narrow-down-popup_title {
  display: none;
}

@media (min-width: 769px) {
  .search-meta .narrow-down-popup_title {
    display: block;
		margin-bottom: 20px;
  }
}

.search-meta .narrow-down-popup_close {
  display: none;
}

@media (min-width: 769px) {
  .search-meta .narrow-down-popup_close {
		width: 18px;
    height: 18px;
		color: var(--color-text);
		font-size: var(--fz-18);
		line-height: 1;
    padding: 0;
    border: none;
    display: flex;
		justify-content: center;
		align-items: center;
    position: absolute;
		top: 20px;
    right: 20px;
  }
}

@media (any-hover: hover) {
	.search-meta .narrow-down-popup_close:hover {
		color: var(--color-primary);
		transition: all 0.2s;
	}
}

.search-meta .narrow-down-popup table {
  width: 100%;
	margin-bottom: 20px;
  border-collapse: collapse;
	font-size: var(--fz-14);
}

.search-meta .narrow-down-popup table th {
	width: 32%;
  padding: 0 10px 15px 0;
  text-align: left;
}
.search-meta .narrow-down-popup table tr:last-child > th {
  padding: 0 10px 0 0;
}

.search-meta .narrow-down-popup table td {
	width: 68%;
  padding: 0 0 15px 0;
}
.search-meta .narrow-down-popup table tr:last-child > td {
	padding: 0;
}

.search-meta .narrow-down-popup table td input[type="text"] {
  width: 100%;
	height: 44px;
  padding: 10px;
  border-radius: 4px;
  background-color: var(--color-gray-lightest);
}

.search-meta .narrow-down-popup table td .select-wrap select {
	width: 100%;
  height: 44px;
	padding: 0 20px 0 10px;
	background-size: 14px auto;
  border-radius: 4px;
  background-color: var(--color-gray-lightest);
  text-overflow: ellipsis;
}

.search-meta .narrow-down-popup table td .price-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
	column-gap: 5px;
}

@media (min-width: 769px) {
  .search-meta .narrow-down-popup table td .price-wrap {
    justify-content: flex-start;
  }
}

.search-meta .narrow-down-popup table td .price-wrap input[type="text"] {
	width: 100%;
}

.search-meta .narrow-down-popup .btn-narrow-down-popup {
	width: 100%;
	max-width: 350px;
	height: 50px;
  margin: 0 auto;
	border-radius: 25px;
  border: none;
	font-size: var(--fz-16);
  color: var(--color-white);
  font-weight: bold;
  background-color: var(--color-primary);
  display: flex;
  justify-content: center;
  align-items: center;
}
	
@media (any-hover: hover) {
	.search-meta .narrow-down-popup .btn-narrow-down-popup:hover {
		background-color: var(--color-primary-dark);
		transition: all 0.2s;
	}
}

.search-meta .pager {
  margin-left: auto;
  display: none;
}

@media (min-width: 769px) {
  .search-meta .pager {
    display: flex;
  }
}


/* ==========================================================================
	Pager
============================================================================= */
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
	column-gap: 4px;
}

@media (min-width: 769px) {
  .pager {
    justify-content: flex-end;
  }
}

.pager li {
  line-height: 1;
}

.pager li a {
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
	column-gap: 4px;
}

@media (min-width: 769px) {
	.pager li a {
		column-gap: 2px;
	}
}

@media (any-hover: hover) {
	.pager li a:hover {
    background-color: rgba(var(--color-primary-rgb), 0.08);
  }
}

.pager li.number {
  border-radius: 4px;
	font-size: var(--fz-16);
  font-weight: bold;
  overflow: hidden;
}

.pager li.number a {
	padding: 15px 18px;
}

@media (min-width: 769px) {
	.pager li.number a {
		padding: 10px 14px;
	}
}

.pager li.number.is-current a {
  background-color: var(--color-gray-light);
  color: var(--color-white);
}

.pager li.prev,
.pager li.next {
  border-radius: 4px;
  border: 1px solid var(--color-primary);
	font-size: var(--fz-14);
}

.pager li.prev a,
.pager li.next a {
	padding: 15px 10px;
}

@media (min-width: 769px) {
	.pager li.prev a,
	.pager li.next a {
		padding: 10px;
	}
}

@media (any-hover: hover) {	
	.pager li.prev a:hover,
	.pager li.next a:hover {
    background: var(--color-primary);
    color: var(--color-white);
  }
}

.pager li.inactive a {
	color: var(--color-gray-light);
}

.pager li.prev.inactive,
.pager li.next.inactive {
  border-color: var(--color-gray-light);
}


/* ==========================================================================
	Page top
============================================================================= */
.page-top {
	width: 48px;
  height: 48px;
  display: none;
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 4500;
  overflow: hidden;
}

@media (min-width: 769px) {
	.page-top {
    bottom: 20px;
    right: 20px;
  }
}

@media (min-width: 1301px) {
	.page-top {
    bottom: 30px;
    right: 30px;
  }
}

@media (max-width: 768px) {/* only SP */
	.page-item-detail .page-top {
		display: none !important;
	}
}

.page-top a {
  width: 100%;
  height: 100%;
	border-radius: 3px;
	background-color:rgba(var(--color-primary-light-rgb), 0.5);
	color: var(--color-white);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (any-hover: hover) {
  .page-top a:hover {
    background-color:rgba(var(--color-primary-light-rgb), 0.75);
    color: var(--color-white);
		transition: all 0.2s;
  }
}


/* ==========================================================================
	Item detail
============================================================================= */
.item-detail {
  display: flex;
  flex-direction: column;
}

@media (min-width: 769px) {
  .item-detail {
    flex-direction: row;
		column-gap: 20px;
  }
}

@media (min-width: 1301px) {
  .item-detail {
		column-gap: 50px;
  }
}

.item-detail_publisher {
	margin-bottom: 20px;
  color: var(--color-gray);
}

.item-detail_images {
  width: 100%;
	margin-bottom: 20px;
  position: relative;
}

.item-detail_images .inner {
  position: relative;
  overflow: hidden;
}

.item-detail_images .inner .image-box {
  height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.item-detail_images .inner .image-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.item-detail_images .inner::after {
  width: 100%;
  height: 100%;
  background: var(--color-white) url(../js/libs/slick/ajax-loader.gif) no-repeat 50% 50%/50px auto;
  content: '\0020';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 700;
}

.item-detail_images .inner.slick-initialized {
  height: auto;
  overflow: visible;
}

.item-detail_images .inner.slick-initialized::after {
  display: none;
}

.item-detail_images .slick-prev {
	left: -5px;
}

.item-detail_images .slick-next {
	right: -5px;
}

.item-detail_images .slick-slide {
  height: auto !important;
}

.item-detail_images .slick-counter {
  position: absolute;
  left: 50%;
	bottom: 10px;
  transform: translateX(-50%);
}

.item-detail_images .thumbnail {
	margin-top: 8px;
}

.item-detail_images .thumbnail .slick-track {
	display: flex;
	gap: 0 2px;
}

.item-detail_images .thumbnail .item {
	width: calc(calc(100vw - 40px)/5) !important;
	height: calc(calc(100vw - 40px)/5) !important;
	aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  cursor: pointer;
}

@media (min-width: 769px) {
	.item-detail_images .thumbnail .slick-track {
		width: 100% !important;
    transform: none !important;
		flex-wrap: wrap;
		gap: 2px;
	}
	
	.item-detail_images .thumbnail .item {
		width: calc(calc(100% - 28px)/5) !important;
		height: calc(calc(100% - 28px)/5) !important;
	}	
}

.item-detail_images .thumbnail .item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.item-detail_images .thumbnail .item.slick-current {
  border-color: var(--color-primary);
}

.item-detail_description {
	margin-bottom: 20px;
  line-height: 1.8;
}

@supports (-webkit-line-clamp: 5) {
  .item-detail_description p {
    -webkit-box-orient: vertical;
    display: -webkit-box;
//    -webkit-line-clamp: 5;
  }
}

.item-detail_description p::before,
.item-detail_description p::after {
  content: '…';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 5em;
  -ms-wrap-flow: start;
  display: block;
}

@supports (-webkit-line-clamp: 5) {
  .item-detail_description p::before,
	.item-detail_description p::after {
    content: normal;
  }
}

.item-detail_description p::after {
  background: currentColor;
  color: white;
  top: auto;
}

.item-detail_description p + p {
  margin-top: 15px;
}

.item-detail_description .item-detail_more {
	font-size: var(--fz-15);
  color: var(--color-primary);
  text-align: right;
}

.item-detail_description .item-detail_more button {
  padding: 0;
  margin: 0;
  border: none;
  color: var(--color-primary);
  text-decoration: underline;
}

@media (any-hover: hover) {
  .item-detail_description .item-detail_more button:hover {
    text-decoration: none;
  }
}

.item-detail_price-box,
.item-detail_price-box2 {
  width: 100%;
	margin-bottom: 20px;
	font-size: var(--fz-12);
  line-height: 1;
  display: flex;
	justify-content: space-between;
}

.item-detail_price {
  margin-bottom: 0;
  font-weight: bold;
}

.item-detail_price-and-tags {
	display: flex;
	flex-direction: column;
	gap: 3px 0;
}

@media (min-width: 769px) {
	.item-detail_price-and-tags {
		flex-direction: row;
		gap: 0 10px;
	}
}

.item-detail .price {
  font-size: var(--fz-28);
	font-weight: bold;
	margin-right: 0.1em;
}

.item-detail .before-price {
	font-size: var(--fz-11);
  color: var(--color-gray);
}

.item-detail .before-price .price {
	font-size: var(--fz-16);
	margin-right: 0.1em;
}

.item-detail .after-price {
	margin-left: 7px;
	font-size: var(--fz-12);
  color: var(--color-red);
  font-weight: bold;
}

.item-detail .after-price .price {
	font-size: var(--fz-28);
	margin-right: 0.1em;
}

.item-detail .point {
	font-size: var(--fz-13);
  color: var(--color-red);
}

.item-detail .point span {
	font-size: var(--fz-15);
  font-weight: bold;
}

.item-detail_tags {
  display: flex;
	align-items: center;
	gap: 3px;
}

.item-detail_free,
.item-detail_free2,
.item-detail_reserve,
.item-detail_reserve2,
.item-detail_sale,
.item-detail_outstock,
.item-detail_restock {
	margin: 0;
  border: 1px solid transparent;
  border-radius: calc(infinity* 1px);
	line-height: 1;
	letter-spacing: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-detail_free,
.item-detail_reserve,
.item-detail_sale,
.item-detail_outstock,
.item-detail_restock {
	padding: 3px 6px;
	font-size: var(--fz-11);
}

.item-detail_free2,
.item-detail_reserve2 {
	width: 100%;
	padding: 6px 12px;
	font-size: var(--fz-14);
}

@media (min-width: 769px) {
	.item-detail_free2,
	.item-detail_reserve2 {
		width: auto;
		font-size: var(--fz-13);
	}
}

.item-detail_free,
.item-detail_free2 {
  border-color: var(--color-tag-common);
  color: var(--color-tag-common);
}

.item-detail_reserve {
  background-color: rgba(var(--color-tag-reserve-rgb), 0.2);
}

.item-detail_reserve2 {
  background-color: rgba(var(--color-tag-reserve-rgb), 0.2);
}

.item-detail_sale {
  background-color: var(--color-tag-sale);
	border-color: var(--color-tag-sale);
  color: var(--color-white);
}

.item-detail_outstock {
  border: 1px solid var(--color-tag-sale);
  color: var(--color-tag-sale);
}

.item-detail_restock {
  border: 1px solid var(--color-tag-sale);
  color: var(--color-tag-sale);
}

.item-detail_free2 i,
.item-detail_reserve2 i {
	font-size: var(--fz-17);
  margin-right: 5px;
}

@media (min-width: 769px) {
	.item-detail_free2 i,
	.item-detail_reserve2 i {
		font-size: var(--fz-16);
	}
}

.item-detail_reserve2 i {
	color: var(--color-tag-reserve);
}

.item-detail_reserve2 span {
  color: var(--color-tag-reserve);
  font-weight: bold;
	margin-right: 5px;
}

.item-detail_favorite {
  padding: 0;
  margin: 0;
  border: none;
	font-size: var(--fz-34);
  cursor: pointer;
}

.item-detail_favorite .heart-off {
  width: 100%;
  height: auto;
}

.item-detail_favorite .heart-off::before {
  color: rgba(var(--color-primary-rgb), 0.5);
}

@media (any-hover: hover) {
  .item-detail_favorite:hover .heart-off::before {
    color: rgba(var(--color-primary-rgb), 1.0);
		transition: all 0.2s;
  }
}

.item-detail_favorite .heart-on {
  width: 100%;
  height: auto;
  display: none;
}

.item-detail_favorite .heart-on::before {
  color: var(--color-red);
}

.item-detail_favorite.is-checked .heart-off {
  display: none;
}

.item-detail_favorite.is-checked .heart-on {
  display: block;
}

.item-detail_meta {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

@media (min-width: 769px) {
	.item-detail_meta {
		flex-direction: row;
	}
}

.item-detail_cart {
  width: 100%;
	padding: 15px;
	border-top: 1px solid var(--color-border);
  background-color: var(--color-white);
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 5700;
}

@media (min-width: 769px) {
  .item-detail_cart {
    padding: 0;
		border-top: none;
    margin-bottom: 20px;
    position: static;
  }
}

.item-detail_cart .agree {
	margin-bottom: 15px;
}

@media (min-width: 769px) {
	.item-detail_cart .agree {
		margin-bottom: 20px;
	}
}

.item-detail_cart .agree .form-checkbox {
  margin-right: 5px;
}

.item-detail_cart .agree .inline-button {
  text-decoration: underline;
}

@media (any-hover: hover) {
  .item-detail_cart .agree .inline-button:hover {
    text-decoration: none;
  }
}

.item-detail_cart .btn,
.item-detail_cart .btn--border {
  width: 100%;
	max-width: 350px;
	height: 50px;
  margin: 0 auto;
  border: none;
  background-color: var(--color-primary);
	font-size: var(--fz-16);
	font-weight: bold;
  color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-detail_cart .btn i,
.item-detail_cart .btn--border i {
  margin-right: 0.5em;
	font-size: var(--fz-18);
}

.item-detail_info {
  width: 100%;
}

.item-detail_info dt {
  border-top: 1px solid var(--color-border);
	font-size: var(--fz-18);
  font-weight: bold;
  display: flex;
	justify-content: space-between;
  align-items: center;
  cursor: pointer;
	padding: 20px 0;
}

@media (min-width: 769px) {
	.item-detail_info dt {
		padding: 15px 0;
	}
}

.item-detail_info dt:after {
	color: var(--color-text);
	transform: rotateX(0);
	transition: all .2s linear;
}

.item-detail_info dt.is-open:after {
	transform: rotateX(180deg);
	transition: all .2s linear;
}

.item-detail_info dd {
	display: none;
}

.item-detail_info dt.default-open + dd {
	display: block;
}

.item-detail_info dd .song-detail {
  text-align: right;
}

.item-detail_info dd .song-detail button {
  padding: 0;
  margin: 0;
  border: none;
  color: var(--color-primary);
  text-decoration: underline;
}

@media (any-hover: hover) {
	.item-detail_info dd .song-detail button:hover {
		text-decoration: none;
		transition: all 0.2s;
	}
}

.item-detail_info dd .song-detail button.is-detail::before {
  content: attr(data-expanded);
  display: inline;
}

.item-detail_info dd .song-detail button.is-detail span {
  display: none;
}

.item-detail_info dd .song-list {
	padding: 15px 0 20px 1.5em;
}

.item-detail_info dd .song-list.is-active {
  display: block;
}

.item-detail_info dd .song-list.is-deactive {
  display: none;
}

.item-detail_info dd .song-list li {
  line-height: 1.4;
  list-style: disc;
}

.item-detail_info dd .song-list li:not(:last-child) {
	margin-bottom: 5px;
}

.item-detail_info dd .song-list-table {
	margin-top: 15px;
  margin-bottom: 20px;
}

.item-detail_info dd .song-list-table.is-active {
  display: table;
}

.item-detail_info dd .song-list-table.is-deactive {
  display: none;
}

.item-detail_info dd .song-info-table,
.item-detail_info2 dd .song-info-table {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.4;
}

.item-detail_info dd .song-info-table th,
.item-detail_info2 dd .song-info-table th {
	width: 30%;
	padding-right: 10px;
  text-align: left;
	vertical-align: top;
}

.item-detail_info dd .song-info-table tr:not(:last-child) th,
.item-detail_info2 dd .song-info-table tr:not(:last-child) th {
	padding-bottom: 5px;
}

@media (min-width: 769px) {
	.item-detail_info dd .song-info-table tr:not(:last-child) th,
	.item-detail_info2 dd .song-info-table tr:not(:last-child) th {
    padding-bottom: 10px;
  }
}

.item-detail_info dd .song-info-table td,
.item-detail_info2 dd .song-info-table td {
	width: 60%;
	vertical-align: top;
}

.item-detail_info dd .song-info-table tr:not(:last-child) td,
.item-detail_info2 dd .song-info-table tr:not(:last-child) td {
	padding-bottom: 5px;
}

@media (min-width: 769px) {
	.item-detail_info dd .song-info-table tr:not(:last-child) td,
	.item-detail_info2 dd .song-info-table tr:not(:last-child) td {
    padding-bottom: 10px;
  }
}

.item-detail_info2 {
	width: 100%;
	padding-bottom: 20px;
	border-top: 1px solid var(--color-border);
}

.item-detail_info2 dt {
	font-weight: bold;
	padding: 20px 0;
}

@media (min-width: 769px) {
	.item-detail_info2 dt {
		padding: 15px 0;
	}
}

.item-detail_info2 dt.ttl-detail {
	font-size: var(--fz-18);
}

.item-detail_info2 dd + dt {
	padding: 20px 0 0.5em 0;
}

.item-detail_variation {
	width: 100%;
	padding: 20px 0 0 0;
	border-top: 1px solid var(--color-border);
}

@media (min-width: 769px) {
	.item-detail_variation {
		padding: 15px 0 0 0;
	}
}

.item-detail_variation h3 {
	font-size: var(--fz-18);
	margin-bottom: 20px;
}

.item-detail_variation li {
	padding-left: 1em;
	margin-bottom: 10px;
	text-indent: -0.6em;
}

@media (min-width: 769px) {
	.item-detail_variation h3 {
		margin-bottom: 15px;
	}
}

.item-detail_variation li::before {
	content: '・';
	display: inline-block;
	vertical-align: middle;
}

.item-detail_variation li .price {
    margin-bottom: 0;
    text-indent: 0;
}

.item-detail_variation li a {
    color: var(--color-primary);
}

@media (any-hover: hover) {
	.item-detail_variation li a:hover {
		color: var(--color-primary);
	}
}

.item-detail_variation .price {
	font-size: var(--fz-16);
}

.item-detail_variation .price .tax {
	margin-left: 0.1em;
}


/* ==========================================================================
	Song list table
============================================================================= */
.song-list-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.song-list-table td {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
	padding: 10px;
}

.song-list-table td.num {
	width: 8%;
  background-color: rgba(var(--color-primary-rgb), 0.08);
  text-align: center;
}

.song-list-table td.info {
  background-color: var(--color-white);
	display: flex;
  justify-content: space-between;
}

.song-list-table td.info .cont {
	flex: 1;
}

.song-list-table td .link {
	width: 50px;
	display: flex;
	justify-content: flex-end;
}

.song-list-table td .link a {
	text-decoration: none;
}

.song-list-table td .link a i {
	font-size: var(--fz-30);
}

@media (any-hover: hover) {
	.song-list-table td .link a:hover i {
		transition: all 0.2s;
		opacity: 0.7;
	}
}

.song-list-table td .title {
	margin-bottom: 0.5em;
}

.song-list-table td .title a {
  color: var(--color-primary);
}

@media (any-hover: hover) {
  .song-list-table td .title a:hover {
    color: var(--color-primary);
  }
}

.song-list-table tr:nth-of-type(even) td.info {
  background-color: var(--color-gray-lightest);
}


/* ==========================================================================
	Special item box
============================================================================= */
.special-item-box_link {
	color: var(--color-text);
  text-decoration: none;
  display: flex;
	align-items: flex-start;
  justify-content: space-between;
	column-gap: 10px;	
}

@media (any-hover: hover) {
	.special-item-box_link:hover {
		color: var(--color-primary);
		transition: all .2s;
	}
	
  .special-item-box_link:hover img { 
    opacity: 0.7;
		transition: all .2s;
  }
}

.special-item-box_image {
	width: calc(30% - 5px);
	height: auto;
	aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

.special-item-box_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.special-item-box_text {
	width: calc(70% - 5px);
}

.special-item-box_title {
	margin-bottom: 10px;
}

.special-item-box_description {
	font-size: var(--fz-14);
  line-height: 1.6;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
}

@supports (-webkit-line-clamp: 4) {
  .special-item-box_description {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 4;
  }
}

@media (min-width: 769px) {
  @supports (-webkit-line-clamp: 5) {
    .special-item-box_description {
      -webkit-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 5;
    }
  }
}

.special-item-box_description::before,
.special-item-box_description::after {
  content: '…';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 4em;
  -ms-wrap-flow: start;
  display: block;
}

@supports (-webkit-line-clamp: 4) {
  .special-item-box_description::before,
	.special-item-box_description::after {
    content: normal;
  }
}

@media (min-width: 769px) {
  .special-item-box_description::before,
	.special-item-box_description::after {
    top: 5em;
  }
  @supports (-webkit-line-clamp: 5) {
    .special-item-box_description::before,
		.special-item-box_description::after {
      content: normal;
    }
  }
}

.special-item-box_description::after {
  background: currentColor;
  color: white;
  top: auto;
}


/* ==========================================================================
	Item box
============================================================================= */
.item-box_image {
	margin-bottom: 10px;
}

.item-box_image a {
 	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
  overflow: hidden;
	display: block;
}

.item-box_image a:before {
	position: absolute;
	content: "";
	display: block;
	height: auto;
	aspect-ratio: 1 / 1;
}

.item-box_image a img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (any-hover: hover) {
  .item-box_image a:hover img {
    opacity: 0.7;
		transition: all .2s;
  }
}

.item-box_title {
	margin-bottom: 5px;
	font-size: var(--fz-14);
  line-height: 1.4;
  overflow: hidden;
}

.item-box_title p {
  margin-bottom: 0;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
}

@supports (-webkit-line-clamp: 2) {
  .item-box_title p {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
}

.item-box_title p::before,
.item-box_title p::after {
  content: '…';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 2em;
  -ms-wrap-flow: start;
  display: block;
}

@supports (-webkit-line-clamp: 2) {
  .item-box_title p::before,
	.item-box_title p::after {
    content: normal;
  }
}

.item-box_title p::after {
  background: currentColor;
  color: white;
  top: auto;
}

.item-box_title a {
	color: var(--color-text);
  text-decoration: none;
}

@media (min-width: 769px) {
  .item-box_title a:hover {
    color: var(--color-primary);
		transition: all 0.2s;
  }
}

.item-box_price {
	font-size: var(--fz-11);
}

@media (min-width: 769px) {
  .item-box_price {
    font-size: var(--fz-12);
  }
}

.item-box_price .price {
  font-size: var(--fz-18);
	font-weight: bold;
	margin-right: 0.1em;
}


/* ==========================================================================
	Modal
============================================================================= */
.modal {
	width: calc(100% - 30px);
	max-width: 750px;
	height: auto;
	padding: 20px;
  border-radius: 6px;
  background-color: var(--color-white);
  line-height: 1.4;
  position: fixed;
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%);
  display: none;
}

@media (min-width: 769px) {
	.modal {
		width: calc(100% - 40px);
	}
}

.modal.is-active {
  display: block;
}

.modal_title {
	margin-bottom: 20px;
	padding-right: 30px;
	display: block;
}

.modal_btn-close1 {
	width: 100%;
	max-width: 350px;
	height: 50px;
  padding: 0;
  margin: 0 auto;
  border: none;
  border-radius: 3px;
  background-color: var(--color-primary);
	font-size: var(--fz-16);
	font-weight: bold;
  color: var(--color-white);
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
	transition: all .3s;
}

@media (any-hover: hover) {
	.modal_btn-close1:hover {
		background-color: var(--color-primary-dark);
		transition: all 0.2s;
	}
}

.modal_btn-close2 {
	font-size: var(--fz-20);
	line-height: 1;
  padding: 0;
  margin: 0;
  border: none;
  position: absolute;
	top: 20px;
	right: 20px;
}

@media (any-hover: hover) {
	.modal_btn-close2:hover {
		color: var(--color-primary);
		transition: all 0.2s;
	}
}

.modal .modal-notice {
  padding-left: 1.5em;
	margin: 0.5em 0;
  list-style: disc;
}

.modal_text {
	margin-bottom: 20px;
}

.modal_text > h4 {
	margin-bottom: 5px;
	font-size: var(--fz-16);
	line-height: 1.4;
}

.modal_text > p {
	margin-bottom: 15px;
	line-height: 1.4;
}

.modal_text > p:last-child {
	margin-bottom: 0;
}

.modal_text > p:has(+ h4),
.modal_text > ul:has(+ h4) {
	margin-bottom: 20px;
}

.modal_text > p:has(+ ul) {
	margin-bottom: 5px;
}

.modal .modal-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 769px) {
  .modal .modal-wrap {
    flex-direction: row;
    justify-content: space-between;
  }
}

.modal-buttons {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 10px;
}

.modal-buttons .btn,
.modal-buttons .btn--border {
	width: 100%;
	max-width: 350px;
	height: 50px;
}

@media (min-width: 769px){
  .modal-buttons {
    flex-direction: row;
		justify-content: center;
  }

  .modal-buttons .btn,
  .modal-buttons .btn--border {
		max-width: 100%;
  }
}


/* ==========================================================================
	Notice
============================================================================= */
.notice-block {
  width: 100%;
	padding: 13px 15px;
	margin-bottom: 10px;
  border-radius: 3px;
  background-color: rgba(var(--color-primary-rgb), 0.08);
	font-size: var(--fz-14);
  color: var(--color-primary);
  line-height: 1;
	display: flex;
	align-items: center;
	column-gap: 5px;
}

.notice-block:before {
  font-size: 16px;
}

.notice-block .price {
  font-weight: bold;
}


/* ==========================================================================
	Cart box
============================================================================= */
.cart-box-head {
  display: none;
}
@media (min-width: 769px) {
  .cart-box-head {
    width: 100%;
		padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
		column-gap: 10px;
  }
	
	.order-section .cart-box-head {
		border-color: var(--color-border);
	}
	
  .alert + .inner .cart-box-head,
  .notice-block + .inner .cart-box-head {
		padding-top: 10px;
  }
	
  .cart-box-head p {
		font-size: var(--fz-13);
    line-height: 1;
                                margin:0;
  }
	
	.cart-box-head .item {
		text-align: left;
		flex: 1;
  }
  .cart-box-head .price,
	.cart-box-head .qty,
	.cart-box-head .sub-total {
    text-align: center;
		flex-shrink: 0;
  }
	.cart-box-head .price,
	.cart-box-head .sub-total {
    width: 110px;
  }
  .cart-box-head .qty {
    width: 50px;
  }
}

.cart-box {
	padding: 15px 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
	column-gap: 10px;
}

.order-section .cart-box {
	border-color: var(--color-border);
}

.cart-box_reserve {
	margin: 15px 0 0 0;
	font-size: var(--fz-16);
  font-weight: bold;
	display: block;
}

.cart-box_reserve span {
	margin-left: 20px;
	font-size: var(--fz-13);
  color: var(--color-red);
  font-weight: normal;
}

.cart-box_image {
	width: calc(30% - 5px);
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media (min-width: 769px) {
	.cart-box_image {
		width: calc(14% - 5px);
	}
}

.cart-box_image .image-box {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	
}

.cart-box_image .image-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (any-hover: hover) {
  .cart-box_image .image-box a:hover img {
    opacity: 0.7;
		transition: all .2s;
  }
}

.cart-box_detail {
	width: calc(70% - 5px);
	display: flex;
	flex-direction: column;
	gap: 5px 0;
}

@media (min-width: 769px) {
	.cart-box_detail {
		width: calc(86% - 5px);
		flex-direction: row;
		gap: 0 10px;
	}
}

.cart-box_delete {
  width: 100%;
	max-width: 80px;
	height: 34px;
	border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-primary);
  overflow: hidden;
	margin-top: 10px;
}

.cart-box_delete a {
  width: 100%;
	height: 100%;
	color: var(--color-primary);
	font-size: var(--fz-14);
  text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
  
}

@media (min-width: 769px) {
  .cart-box_delete {
    width: auto;
		max-width: auto;
		height: auto;
		border-radius: 0;
		border: none;
		margin-top: 5px;
  }
	
	.cart-box_delete a {
    width: auto;
    height: auto;
		text-decoration: underline;
    display: inline;
		text-align: center;
  }
}

@media (any-hover: hover) {
  .cart-box_delete a:hover {
    background-color: transparent;
    color: var(--color-primary);
    text-decoration: none;
		transition: all 0.2s;
  }
}

.cart-box_text {
  display: flex;
	flex-direction: column;
	row-gap: 5px;
}

@media (min-width: 769px) {
  .cart-box_text {
		flex: 1;
  }
}

.cart-box_title {
	font-size: var(--fz-14);
  line-height: 1.4;
}
.cart-box_title a {
	color: var(--color-text);
}

@media (any-hover: hover) {
	.cart-box_title a:hover {
		color: var(--color-primary);
		transition: all 0.2s;
	} 
}

.cart-box_title a,
.cart-box_title span,
.page-cart-confirm .cart-box_title,
.page-member-order-history-detail .cart-box_title {
  text-decoration: none;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

@supports (-webkit-line-clamp: 4) {
  .cart-box_title a,
	.cart-box_title span,
	.page-cart-confirm .cart-box_title,
	.page-member-order-history-detail .cart-box_title {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 4;
  }
}

.cart-box_title a::before,
.cart-box_title a::after,
.cart-box_title span::before,
.cart-box_title span::after,
.page-cart-confirm .cart-box_title::before,
.page-cart-confirm .cart-box_title::after,
.page-member-order-history-detail .cart-box_title::before,
.page-member-order-history-detail .cart-box_title::after {
  content: '…';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 4em;
  -ms-wrap-flow: start;
  display: block;
}

@supports (-webkit-line-clamp: 4) {
  .cart-box_title a::before,
	.cart-box_title a::after,
	.cart-box_title span::before,
	.cart-box_title span::after,
	.page-cart-confirm .cart-box_title::before,
	.page-cart-confirm .cart-box_title::after,
	.page-member-order-history-detail .cart-box_title::before,
	.page-member-order-history-detail .cart-box_title::after {
    content: normal;
  }
}

.cart-box_title a::after,
.cart-box_title span::after,
.page-cart-confirm .cart-box_title::after,
.page-member-order-history-detail .cart-box_title::after {
  background: currentColor;
  color: white;
  top: auto;
}

.cart-box_title span.canceled,
.cart-box_end-of-sale {
	display: block;
	font-size: var(--fz-14);
	color: var(--color-red);
	font-weight: bold;
	line-height: 1.4;
}

.cart-box_publisher {
	margin-top: 5px;
	font-size: var(--fz-13);
  line-height: 1.4;
  color: var(--color-gray);
}

.cart-box_price,
.cart-box_qty,
.cart-box_sub-total {
  text-align: right;
  display: flex;
  justify-content: space-between;
}
.cart-box_price,
.cart-box_qty {
	align-items: center;
}

.cart-box_price::before,
.cart-box_qty::before,
.cart-box_sub-total::before {
	font-size: var(--fz-14);
  content: attr(data-label);
  display: block;
}

.cart-box_price .price,
.cart-box_sub-total .price {
	font-size: var(--fz-18);
}

@media (min-width: 769px) {
	.cart-box_price .price,
	.cart-box_sub-total .price {
		font-size: var(--fz-16);
	}
}

.cart-box_qty [type="text"] {
	width: 60px;
	height: 44px;
	padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: var(--color-gray-lightest);
  text-align: right;
}

@media (min-width: 769px) {
	.cart-box_qty [type="text"] {
		height: 40px;
	}
}

.price-discount {
	display: flex;
	align-items: center;
	column-gap: 5px;
	line-height: 1;
	margin-top: 5px;
}
.price-discount_name {
	font-size: var(--fz-12);
	color: var(--color-gray);
}
.price-discount .price {
	color: var(--color-red);
}

@media (min-width: 769px) {
  .cart-box_price,
	.cart-box_qty,
	.cart-box_sub-total {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
		flex-shrink: 0;
  }
	.cart-box_price,
	.cart-box_sub-total {
		width: 110px;
  }
	.cart-box_qty {
		width: 50px;
  }
  .cart-box_price::before,
	.cart-box_qty::before,
	.cart-box_sub-total::before {
    display: none;
  }
	.cart-box_qty [type="text"] {
		width: 50px;
	}
	.price-discount {
		flex-direction: column;
		align-items: flex-end;
		column-gap: 0;
	}
}


/* ==========================================================================
	Table
============================================================================= */
.cart-total-price-table {
  width: 100%;
	border-collapse: collapse;
	font-size: var(--fz-15);
	letter-spacing: 0;
}

@media (min-width: 769px) {
  .cart-total-price-table {
		width: 290px;
		margin-left: auto;
		font-size: var(--fz-14);
  }
}

.cart-total-price-table th,
.cart-total-price-table td {
	padding-bottom: 10px;
  font-weight: normal;
	vertical-align: baseline;
	line-height: 1;
}

.cart-total-price-table th {
  text-align: left;
}

.cart-total-price-table td {
  text-align: right;
}

.cart-total-price-table tbody > tr:first-child th,
.cart-total-price-table tbody > tr:first-child td {
	padding-top: 10px;
}

@media (min-width: 769px) {
	.cart-total-price-table tbody > tr:last-child th,
	.cart-total-price-table tbody > tr:last-child td {
		padding-bottom: 0;
	}
}

.cart-total-price-table td .t-price {
	font-size: var(--fz-18);
	letter-spacing: 0;
}

@media (min-width: 769px) {
	.cart-total-price-table td .t-price {
		font-size: var(--fz-16);
	}
}

.cart-total-price-table .coupon td,
.cart-total-price-table .point td {
	color: var(--color-red);
}

.cart-total-price-table td .offset {
	margin-right: -6px;
}

.cart-price-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-price-table th,
.cart-price-table td {
	padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
	vertical-align: baseline;
	line-height: 1;
}

.cart-price-table th {
  text-align: left;
}

.cart-price-table td {
  text-align: right;
}

@media (min-width: 769px) {	
	.cart-price-table tbody > tr:first-child th,
	.cart-price-table tbody > tr:first-child td {
		padding: 0 0 12px 0;
	}
}

.cart-price-table td .offset {
	margin-right: -6px;
}

.cart-total-price-table .total {
	border-top: 2px solid var(--color-border);
}
.cart-total-price-table .total th,
.cart-total-price-table .total td {
	padding-top: 10px;
}

.cart-price-table .total-price th,
.cart-total-price-table .total th {
	font-size: var(--fz-16);
  font-weight: bold;
}

.cart-price-table .total-price td,
.cart-total-price-table .total td {
	font-size: var(--fz-24);
  font-weight: bold;
	letter-spacing: 0;
}

@media (min-width: 769px) {
	.cart-price-table .total-price td,
	.cart-total-price-table .total td {
		font-size: var(--fz-22);
	}
}

.cart-price-table .point th {
	font-size: var(--fz-15);
  font-weight: normal;
}

.cart-price-table .point td {
	font-size: var(--fz-18);
}

@media (min-width: 769px) {
	.cart-price-table .point th {
		font-size: var(--fz-14);
	}
	
	.cart-price-table .point td {
		font-size: var(--fz-16);
	}
}

.disp-total-price,
.disp-get-points {
	letter-spacing: 0;
}


/* ==========================================================================
	Form table
============================================================================= */
.form-table {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.4;
}

.form-table th {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
}

.form-table tbody tr:not(:last-child) th {
	padding-bottom: 3px;
}

@media (min-width: 769px) {
  .form-table th {
    width: 25%;
    vertical-align: top;
    display: table-cell;
  }
	
	.form-table tbody tr:not(:last-child) th {
		padding-bottom: 20px;
	}
}

.form-table th .required {
	margin-left: 5px;
}

.form-table td {
  width: 100%;
  display: block;
}
.form-table tbody tr:not(:last-child) td {
	padding-bottom: 20px;
}

@media (min-width: 769px) {
  .form-table td {
    width: 75%;
    display: table-cell;
  }
}


/* ==========================================================================
	Calendar table
============================================================================= */
.calendar-table {
  border-collapse: collapse;
	font-size: var(--fz-15);
  line-height: 1;
}

@media (min-width: 481px) {
	.calendar-table {
		font-size: var(--fz-14);
	}
}

@media (min-width: 769px) {
	.calendar-table {
		font-size: var(--fz-13);
	}
}

.calendar-table caption {
	margin-bottom: 5px;
	font-size: var(--fz-24);
  line-height: 1;
  font-weight: bold;
}

.calendar-table caption span {
	font-size: var(--fz-14);
  line-height: 1.07692;
  font-weight: normal;
}

.calendar-table thead th {
  width: calc(100% / 7);
	padding-bottom: 6px;
  color: var(--color-gray);
  font-weight: normal;
}

.calendar-table tbody td {
	padding: 12px 0;
	width: calc(100% / 7);
  border-right: 1px solid var(--color-white);
  border-bottom: 1px solid var(--color-white);
  background-color: var(--color-gray-lightest);
  text-align: center;
  vertical-align: middle;
}

@media (min-width: 481px) {
	.calendar-table tbody td {
    padding: 10px 0;
  }
}

@media (min-width: 769px) {
  .calendar-table tbody td {
    padding: 8px 0;
  }
}

.calendar-table tbody td.holiday1 {
  background-color: rgba(var(--color-red-rgb), 0.2);
}

.calendar-table tbody td.holiday2 {
  background-color: rgba(var(--color-primary-rgb), 0.2);
}

.calendar-table tbody td.empty {
  background-color: var(--color-white);
}


/* ==========================================================================
	Point table
============================================================================= */
.point-table {
  width: 100%;
  border-top: 1px solid var(--color-border);
  border-collapse: collapse;
}

.point-table thead {
  display: none;
}

@media (min-width: 769px) {
  .point-table thead {
    display: table-header-group;
  }
}

.point-table tr {
  width: 100%;
	padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  display: -ms-grid;
  display: grid;
	-ms-grid-columns: 4fr 1fr;
  grid-template-columns: 4fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

@media (min-width: 769px) {
  .point-table tr {
    border-bottom: none;
    display: table-row;
  }

  .point-table thead th {
    border-bottom: 1px solid var(--color-border);
    background-color: rgba(var(--color-primary-rgb), 0.08);
    text-align: left;
		padding: 7px 10px 7px 0;
  }
	
	.point-table thead th:first-child {
		padding: 7px 10px;
	}

  .point-table thead th.date {
    width: 20%;
  }

  .point-table thead th.status {
    text-align: right;
		white-space: nowrap;
  }
}

.point-table tbody td {
	vertical-align: baseline;
}

.point-table tbody td.date {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
}

.point-table tbody td.content {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.point-table tbody td.date::before,
.point-table tbody td.content::before {
	width: 3.5em;
  content: attr(data-sp-label);
  display: inline-block;
}

.point-table tbody td.content .inner {
  display: inline-block;
  vertical-align: top;
  position: relative;
	text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

@supports (-webkit-line-clamp: 2) {
  .point-table tbody td.content .inner {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
}

.point-table tbody td.content .inner::before,
.point-table tbody td.content .inner::after {
  content: '…';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 2em;
  -ms-wrap-flow: start;
  display: block;
}

@supports (-webkit-line-clamp: 2) {
  .point-table tbody td.content .inner::before,
	.point-table tbody td.content .inner::after {
    content: normal;
  }
}

.point-table tbody td.content .inner::after {
  background: currentColor;
  color: white;
  top: auto;
}

.point-table tbody td.status {
  text-align: right;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.point-table tbody td.status .point {
	font-size: var(--fz-20);
}

.point-table tbody td.status.is-use {
  color: var(--color-red);
}

@media (min-width: 769px) {
  .point-table tbody td {
		padding: 10px 10px 10px 0;
    border-bottom: 1px solid var(--color-border);
  }
	
	.point-table tbody td:first-child {
		padding: 10px;
  }
	
	.point-table tbody td.date {
		width: 20%;
		white-space: nowrap;
  }

  .point-table tbody td.content {
    display: table-cell;
  }
	
	.point-table tbody td.date::before,
  .point-table tbody td.content::before {
    display: none;
  }

  .point-table tbody td.content .inner {
    width: 100%;
  }
	
  @supports (-webkit-line-clamp: 1) {
    .point-table tbody td.content .inner {
      -webkit-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 1;
    }
  }

  .point-table tbody td.content .inner::before,
	.point-table tbody td.content .inner::after {
    top: 1em;
  }
	
  @supports (-webkit-line-clamp: 1) {
    .point-table tbody td.content .inner::before,
		.point-table tbody td.content .inner::after {
      content: normal;
    }
  }

  .point-table tbody td.status {
    display: table-cell;
  }

  .point-table tbody td.status br {
    display: none;
  }
}


/* ==========================================================================
	Cart side
============================================================================= */
@media (min-width: 769px) {
  .cart-side {
		padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
  }
}

@media (min-width: 961px) {
  .cart-side {
		padding: 20px;
  }
}

@media (min-width: 1301px) {
  .cart-side {
		padding: 25px;
  }
}

.cart-side .cart-price-table {
	margin-bottom: 20px;
}

@media (min-width: 769px) {
  .cart-side .cart-price-table {
		margin-bottom: 15px;
  }
}

.cart-side .btn,
.cart-side .btn--border {
	width: 100%;
	max-width: 350px;
  margin: 0 auto;
}

.cart-side .btn {
  margin-bottom: 10px;
}


/* ==========================================================================
	Login block
============================================================================= */
.login-block {
	padding: 20px 0;
  border-top: 1px solid var(--color-border);
}

.login-block:first-child {
	padding: 0 0 20px 0;
	border-top: none;
}

.login-block:last-child {
	padding: 20px 0 0 0;
}

@media (min-width: 769px) {
  .login-block {
		width: calc(50% - 25px);
		padding: 30px;
		border-radius: 6px;
		border: 1px solid var(--color-border);
  }
	
	.login-block:first-child {
		padding: 30px;
		border-top: 1px solid var(--color-border);
	}
	
	.login-block:last-child {
		padding: 30px;
	}
}

@media (min-width: 1301px) {
  .login-block {
		width: calc(50% - 30px);
		padding: 40px;
  }
	.login-block:first-child,
	.login-block:last-child {
		padding: 40px;
	}
}

.login-block_title {
	margin-bottom: 10px;
}

.login-block_field {
	margin-bottom: 20px;
}

.login-block_label {
	margin-bottom: 3px;
  line-height: 1.4;
  display: block;
}

.login-block_forget {
	margin-bottom: 20px;
  line-height: 1.4;
  text-align: center;
}

.login-block_btn-login,
button.btn.login-block_btn-login,
.login-block_btn-register {
	width: 100%;
	max-width: 350px;
  margin: 0 auto;
}

.login-block .register-text {
	margin-bottom: 15px;
  line-height: 1.4;
}


/* ==========================================================================
	Alert
============================================================================= */
.alert {
  width: 100%;
	padding: 13px 15px;
	margin-bottom: 10px;
  border-radius: 3px;
  background-color: rgba(var(--color-caution-rgb), 0.08);
	font-size: var(--fz-14);
  color: var(--color-caution);
  line-height: 1;
  display: flex;
  align-items: center;
	column-gap: 5px;
}

.alert:before {
  font-size: var(--fz-16);
}

.alert p {
                                margin-bottom: 0;
}

/* ==========================================================================
	Q&A block
============================================================================= */
.qa-block {
  width: 100%;
}

.qa-block dt,
.qa-block dd {
  display: flex;
  align-items: baseline;
}

.qa-block {
	border-bottom: 1px solid var(--color-border);
}

.qa-block dt {
	padding: 15px 0;
	border-top: 1px solid var(--color-border);
	cursor: pointer;
}
.qa-block dt:first-child {
	padding: 0 0 15px 0;
	border-top: none;
}

.qa-block dd {
	padding-bottom: 15px;
}

.qa-block dt p,
.qa-block dd p {
  padding-left: 5px;
  width: 100%;
	line-height: 1.4;
}

.qa-block dt::before,
.qa-block dd::before {
  font-size: var(--fz-16);
  line-height: 1;
  font-weight: 700;
  content: 'Q';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
}

.qa-block dt::before {
  color: var(--color-primary);
  content: 'Q';
}
.qa-block dd::before {
  color: var(--color-gray);
  content: 'A';
}

@media (any-hover: hover) {
	.qa-block dt:hover p {
    color: var(--color-primary);
  }
}


/* ==========================================================================
	Member menu
============================================================================= */
.member-menu {
  width: 100%;
  border-top: 1px solid var(--color-border);
}

.member-menu li {
  width: 100%;
  border-bottom: 1px solid var(--color-border);
}

.member-menu li a {
  width: 100%;
	color: var(--color-text);
	font-size: var(--fz-16);
  text-decoration: none;
  display: flex;
	justify-content: space-between;
  align-items: center;
}

.side .member-menu li a {
	padding: 15px 0;
}

@media (min-width: 769px) {
  .member-menu li a {
		font-size: var(--fz-14);
  }
}

@media (any-hover: hover) {
	.member-menu li a:hover {
    color: var(--color-primary);
  }
}


/* ==========================================================================
	Link
============================================================================= */
.blank-link,
.info-link {
  color: var(--color-primary);
	text-decoration: underline;
}

.info-link {
  padding: 0;
  margin: 0;
  border: none;
	font-size: var(--fz-13);
  line-height: 1.4;
}

@media (any-hover: hover) {
  .blank-link:hover,
	.info-link:hover {
    color: var(--color-primary);
    text-decoration: none;
  }
}

.blank-link::before,
.info-link::before {
  margin-right: 0.2em;
  vertical-align: middle;
	font-size: var(--fz-14);
	color: var(--color-gray);
}


/* ==========================================================================
	Order block
============================================================================= */
.order-block {
  border-radius: 6px;
  border: 1px solid var(--color-border);
	margin-bottom: 20px;
}

.order-block_header {
	padding: 10px 15px;
  background-color: rgba(var(--color-primary-rgb), 0.08);
  border-bottom: 1px solid var(--color-border);
	font-size: var(--fz-15);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.order-block_order-date {
  margin-bottom: 0;
}

.order-block_order-number {
  margin-bottom: 0;
}

.order-block_order-number span {
  display: inline-block;
  margin-left: 15px;
  color: var(--color-red);
  font-weight: bold;
}

.order-block_content {
	padding: 15px;
}

.order-block_total {
	padding-top: 15px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 769px) {
	.order-block_header {
		font-size: var(--fz-13);
	}
	
	.order-block_total {
    justify-content: flex-end;
  }
}

.order-block_total dt {
	font-size: var(--fz-16);
  line-height: 1;
  font-weight: bold;
}

@media (min-width: 769px) {
  .order-block_total dt {
		padding-right: 20px;
  }
}

.order-block_total dd {
	font-size: var(--fz-22);
  line-height: 1;
  text-align: right;
  font-weight: bold;
	letter-spacing: 0;
}

.order-block_footer {
	padding: 15px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
	gap: 10px;
}

.order-block_delivery-status {
  text-align: center;
}

.order-block_btn {
	width: 100%;
	max-width: 350px;
}

@media (min-width: 769px) {
  .order-block_footer {
    flex-direction: row;
		justify-content: space-between;
    align-items: flex-start;
  }	
}


/* ==========================================================================
	Address box
============================================================================= */
.address-box {
	padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.address-box_name {
	margin-bottom: 5px;
	font-size: var(--fz-18);
  line-height: 1.4;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.address-box_address {
	margin-bottom: 10px;
	font-size: var(--fz-15);
	line-height: 1.4;
}

.address-box .btn-delete {
	width: 80px;
	height: 34px;
	font-size: var(--fz-15);
  font-weight: normal;
}

.address-box .btn-set {
	width: calc(100% - 90px);
	height: 34px;
	font-size: var(--fz-15);
  font-weight: normal;
}

@media (min-width: 769px) {
	.address-box_name {
		font-size: var(--fz-16);
	}
	
	.address-box_address {
		font-size: var(--fz-14);
	}
	
	.address-box button.btn.btn-change,
	.address-box .btn-delete,
	.address-box .btn-set {
		font-size: var(--fz-13);
	}
}

.address-box_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
	column-gap: 10px;
}


/* ==========================================================================
	Favorite box
============================================================================= */
.favorite-box {
	padding-bottom: 15px;
  display: flex;
	flex-direction: row;
  align-items: flex-start;
	column-gap: 15px;
	border-bottom: 1px solid var(--color-border);
}

@media (min-width: 769px) {
  .favorite-box {
		padding-bottom: 0;
    border-bottom: none;
		flex-direction: column;
		column-gap: 0;
		row-gap: 10px;
  }
}

.favorite-box_image {
	width: calc(20% - calc(15px/2));
	min-width: 104px;
  overflow: hidden;
}

@media (min-width: 769px) {
  .favorite-box_image {
    width: 100%;
  }
}

.favorite-box_image a {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
	display: block;
}

.favorite-box_image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (min-width: 769px) {
  .favorite-box_image a:hover img {
    opacity: 0.7;
		transition: all .2s;
  }
}

.favorite-box_content {
	width: calc(80% - calc(15px/2));
}

@media (min-width: 769px) {
  .favorite-box_content {
    width: 100%;
  }
}

.favorite-box_title {
  margin-bottom: 0;
	font-size: var(--fz-14);
  line-height: 1.4;
}

@media (min-width: 769px) {
  .favorite-box_title {
    max-height: calc((20 / 14) * 4em);
  }
}

.favorite-box_title a {
	color: var(--color-text);
  text-decoration: none;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

@media (any-hover: hover) {
	.favorite-box_title a:hover {
		color: var(--color-primary);
		transition: all 0.2s;
	} 
}

@supports (-webkit-line-clamp: 3) {
	.favorite-box_title a {
		-webkit-box-orient: vertical;
		display: -webkit-box;
		-webkit-line-clamp: 3;
	}
}

@media (min-width: 769px) {
	@supports (-webkit-line-clamp: 4) {
		.favorite-box_title a {
			-webkit-box-orient: vertical;
			display: -webkit-box;
			-webkit-line-clamp: 4;
		}
	}
}

.favorite-box_title a::before,
.favorite-box_title a::after {
  content: '…';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 3em;
  -ms-wrap-flow: start;
  display: block;
}

@supports (-webkit-line-clamp: 3) {
  .favorite-box_title a::before,
	.favorite-box_title a::after {
    content: normal;
  }
}

@media (min-width: 769px) {
	@supports (-webkit-line-clamp: 4) {
		.favorite-box_title a::before,
		.favorite-box_title a::after {
			content: normal;
		}
	}
	
	.favorite-box_title a::before,
	.favorite-box_title a::after {
		top: 4em;
	}
}

.favorite-box_title a::after {
  background: currentColor;
  color: white;
  top: auto;
}

.favorite-box_price {
	font-size: var(--fz-11);
  font-weight: bold;
}

@media (min-width: 769px) {
  .favorite-box_price {
		font-size: var(--fz-12);
  }
}

.favorite-box_price .price {
	font-size: var(--fz-18);
	margin-right: 0.1em;
}

.favorite-box_publisher {
	margin-bottom: 5px;
	font-size: var(--fz-13);
  color: var(--color-gray);
  line-height: 1.4;
}

.favorite-box_buttons {
	margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
	justify-content: space-between;
	gap: 10px;
}

@media (min-width: 769px) {
  .favorite-box_buttons {
    flex-direction: column;
    align-items: flex-start;
		justify-content: flex-start;
  }
}

.favorite-box .book-box_meta {
	align-items: flex-start;
}

.favorite-box .book-box_meta_inner {
	width: 100%;
}


/* ==========================================================================
	Tag
============================================================================= */
.txt {
	line-height: 2;
}

.small {
	font-size: var(--fz-13);
}

.list {
  list-style: disc;
}

.num-list {
  list-style: decimal;
}

.list li,
.num-list li {
	margin-left: 1em;
}

.kome-list {
	list-style:  none;
	list-style-position: inside;
	font-size: var(--fz-14);
	color: var(--color-gray);
}

.kome-list li:before {
	content: "※";
	width: 1em;
	height: 1em;
}

.kome-list li {
	text-indent: -1.2em;
	padding-left: 1.2em;
}

.list li:not(:last-child),
.num-list li:not(:last-child),
.kome-list li:not(:last-child) {
	margin-bottom: 5px;
}

.note {
  padding-left: 1em;
	font-size: var(--fz-12);
  color: var(--color-gray);
  line-height: 1.4;
  text-indent: -1em;
}

.term-block dt {
	font-size: var(--fz-16);
  line-height: 1.4;
  font-weight: bold;
}

.term-block dd {
	margin-bottom: 20px;
	padding-left: 1em;
  line-height: 1.4;
}

.term-block dd:last-child {
	margin-bottom: 0;
}

.term-block dd ul:first-child,
.term-block dd ol:first-child {
	margin-top: 5px;
}

.hr {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
}


/* ==========================================================================
	Top page
============================================================================= */
.new-release-section,
.pickup-section {
  width: 100%;
	padding: 40px 15px;
}

.new-release-section {
  background-color: var(--color-white);
}

.pickup-section {
  background-color: rgba(var(--color-primary-rgb), 0.08);
  position: relative;
}

@media (min-width: 769px) {
  .new-release-section,
	.pickup-section {
    padding: 50px 20px;
  }
}

@media (min-width: 1301px) {
  .new-release-section,
	.pickup-section {
    padding: 60px 0;
  }
}

.section-title {
  width: 100%;
	margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section-title .en {
	padding-bottom: 5px;
  text-align: center;
}

.new-release-section .section-inner,
.pickup-section .section-inner {
  width: 100%;
	max-width: 1300px;
	padding-left: calc(15px / 2);/* .new-release-box padding/2 */
}

.new-release-section .section-inner {
	margin: 0 auto 20px;
}

.pickup-section .section-inner {
	margin: 0 auto ;
  position: relative;
}

@media (min-width: 769px) {
	.new-release-section .section-inner,
	.pickup-section .section-inner {
		padding-left: 10px;/* .new-release-box padding/2 */
	}
}

.new-release-section .section-inner::after,
.pickup-section .section-inner::after {
  width: 100%;
  height: 100%;
  background: var(--color-white) url(../js/libs/slick/ajax-loader.gif) no-repeat 50% 50%/50px auto;
  content: '\0020';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 700;
}

.new-release-section .section-inner.slick-initialized,
.pickup-section .section-inner.slick-initialized {
  height: auto;
}

.new-release-section .section-inner.slick-initialized::after,
.pickup-section .section-inner.slick-initialized::after {
  display: none;
}

.new-release-section .new-release-box,
.pickup-section .pickup-box {
  padding-right: 15px;
}

@media (min-width: 769px) {
  .new-release-section .new-release-box,
	.pickup-section .pickup-box {
    padding-right: 20px;
  }
}

.btn-more {
	max-width: 350px;
  margin: 0 auto;
}


/* ==========================================================================
	New books
============================================================================= */
.new-books-list {
  width: 100%;
	max-width: 1300px;
	padding: 20px 15px 40px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .new-books-list {
		padding: 25px 20px 50px;
  }
}

@media (min-width: 1301px) {
  .new-books-list {
		padding: 30px 0 60px;
  }
}

.new-books-list .book-section:not(:last-child) {
  padding-bottom: 40px;
}

@media (min-width: 769px) {
	.new-books-list .book-section:not(:last-child) {
		padding-bottom: 60px;
	}
}

.new-books-list h2 {
	margin-bottom: 15px;
	font-size: var(--fz-22);
}


/* ==========================================================================
	Search page
============================================================================= */
.search-list {
	max-width: 1300px;
  width: 100%;
	padding: 20px 15px 40px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .search-list {
    padding: 25px 20px 50px;
  }
}

@media (min-width: 1301px) {
  .search-list {
    padding: 30px 0 60px;
  }
}

.search-list .search-words {
	margin-bottom: 20px;
  font-size: var(--fz-22);
}

.search-list .search-words .found-count {
	font-size: var(--fz-14);
  font-weight: normal;
}

.search-list .search-meta {
	margin-bottom: 20px;
}


/* ==========================================================================
	Item detail page
============================================================================= */
.item-detail-content {
  width: 100%;
	max-width: 1300px;
	padding: 20px 15px;
  margin: 0 auto;
}

@media (min-width: 769px) {
	.item-detail-content {
    padding: 25px 20px 20px 20px;
  }
	
	.item-detail-content .site-main {
		width: auto;
		flex: 1;
	}
	
	.item-detail-content .side {
		width: 35%;
	}
}

@media (min-width: 1301px) {
  .item-detail-content {
		padding: 30px 0 20px 0;
  }
}

.spacial-items {
  width: 100%;
	max-width: 1300px;
	padding: 20px 15px;
  margin: 0 auto;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 769px) {
  .spacial-items {
		padding: 20px;
  }
}

@media (min-width: 1301px) {
	.spacial-items {
		padding: 20px 0;
	}
}

.spacial-items h3 {
	margin-bottom: 10px;
	font-size: var(--fz-18);
}

@media (min-width: 769px) {
  .spacial-items h3 {
    display: none;
  }
}

.spacial-items .inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.spacial-items .special-item-box {
  width: 100%;
	margin-bottom: 20px;
}

@media (min-width: 769px) {
  .spacial-items .inner {
    flex-direction: row;
    justify-content: space-between;
		column-gap: 50px;
  }
	
	.spacial-items .special-item-box {
		width: calc(calc(100% - 50px)/2);
    margin-bottom: 0;
  }
}

@media (min-width: 1301px) {
  .spacial-items .inner {
		column-gap: 60px;
  }
	
	.spacial-items .special-item-box {
		width: calc(calc(100% - 60px)/2);
  }
}

.spacial-items .special-item-box:last-of-type {
  margin-bottom: 0;
}

.related-items,
.recent-items {
  width: 100%;
	max-width: 1300px;
  margin: 0 auto;
  border-bottom: 1px solid var(--color-border);
}
.related-items {
	padding: 20px 15px;
}
.recent-items {
	padding: 20px 15px 40px;
}

@media (min-width: 769px) {
  .related-items {
		padding: 20px;
	}
	.recent-items {
		padding: 20px 20px 50px;
	}
}

@media (min-width: 1341px) {/* 1301px + padding 40px */
  .related-items {
		padding: 20px 0;
	}
	.recent-items {
		padding: 20px 0 60px;
	}
}

.related-items h3,
.recent-items h3 {
	margin-bottom: 10px;
}

.related-items .inner,
.recent-items .inner {
  position: relative;
}

.related-items .inner::after,
.recent-items .inner::after {
  width: 100%;
  height: 100%;
  background: var(--color-white) url(../js/libs/slick/ajax-loader.gif) no-repeat 50% 50%/50px auto;
  content: '\0020';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 700;
}

.related-items .inner.slick-initialized,
.recent-items .inner.slick-initialized {
  height: auto;
}

.related-items .inner.slick-initialized::after,
.recent-items .inner.slick-initialized::after {
  display: none;
}

.related-items .inner .slick-track,
.recent-items .inner .slick-track {
  display: flex;
	column-gap: 15px;
}

.related-items .item-box,
.recent-items .item-box {
	width: calc(calc(100vw - 75px)/3);
}

@media (min-width: 768px) {/* only SP */
	.related-items .item-box,
	.recent-items .item-box {
		width: calc(calc(100vw - 90px)/4);
	}
}

@media (min-width: 769px) {
	.related-items .item-box,
	.recent-items .item-box {
		width: calc(calc(100vw - 100px)/4);
	}
}

@media (min-width: 961px) {
	.related-items .item-box,
	.recent-items .item-box {
		width: calc(calc(100vw - 145px)/7);
	}
}

@media (min-width: 1301px) {
	.related-items .item-box,
	.recent-items .item-box {
		width: calc(calc(1300px - 105px)/8);
	}
}

.related-items .slick-prev,
.recent-items .slick-prev {
	left: -5px;
}

.related-items .slick-next,
.recent-items .slick-next {
	right: -5px;
}


/* ==========================================================================
	Cart
============================================================================= */
.page-cart .cart-side,
.page-cart-confirm .cart-side,
.page-order .cart-side {
	border-top: 2px solid var(--color-border);
}

@media (min-width: 769px) {
	.page-cart .cart-side,
	.page-cart-confirm .cart-side,
	.page-order .cart-side {
		border-top: 1px solid var(--color-border);
	}
}

.confirm-box {
	display: flex;
	justify-content: space-between;
	column-gap: 10px;
}

.confirm-box_text {
	width: calc(100% - 90px);
}

.confirm-box_button {
	width: 80px;
}

.order-block_content .confirm-box_text {
	width: 100%;
}


/* ==========================================================================
	Order
============================================================================= */
@media (max-width: 768px) {/* only SP */
  .page-order .radio-list {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

.price-discount, .coupon, .use-point, .cash-on-delivery, .late-pay {
        display: none;
}

.coupon_apply {
        height: 36px;
}

.payment-radio-list {
	margin-top: 15px;
}

.payment-radio-list li:not(:first-child) {
	margin-top: 15px;
}

.order-section {
	padding: 15px 0;
  border-top: 1px solid var(--color-border);
}

.order-section:first-child {
	padding: 0 0 15px 0;
	border-top: none;
}

.order-section:last-child {
	padding: 15px 0 0 0;
}

.order-section .radio-list li {
	margin-bottom: 15px;
}

.order-section h2 {
	margin-bottom: 10px;
}

.order-section h3 {
	margin-bottom: 3px;
}

.order-section input + ul,
.storeatpay_note ul {
	margin-top: 10px;
}

.delivery-address-section h2 {
  display: flex;
  justify-content: space-between;
}

@media (min-width: 769px) {
  .delivery-address-section h2 {
    justify-content: flex-start;
  }
	
  .delivery-address-section h2 .btn-change {
    margin-left: 15px;
  }
}

.delivery-address-section h2 .btn-change .btn_link {
	font-weight: normal;
}

.order-section .name {
	font-size: var(--fz-16);
	margin-bottom: 0.2em;
}

.delivery-address-section p,
.payments-section p,
.receipt-section p {
	line-height: 1.4;
}

.card-number,
.expiration-date,
.security-code,
.cardholder {
	margin-top: 15px;
}

.payments-card-section {
	margin-bottom: 15px;
}

.expiration-date .inner {
  display: flex;
  align-items: center;
	column-gap: 10px;
}

.expiration-date .select-wrap {
	height: 44px;
}

@media (min-width: 769px) {
  .expiration-date .select-wrap {
		height: 40px;
  }
}

.expiration-date .select-wrap.month,
.expiration-date .select-wrap.month select {
	width: 65px;
}

.expiration-date .select-wrap.year,
.expiration-date .select-wrap.year select {
	width: 85px;
}

.security-code .inner {
  display: flex;
	column-gap: 10px;
}

.security-code .form-field {
	width: 65px;
}

.security-code .text p {
	font-size: var(--fz-13);
}

.coupon-section .inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
	column-gap: 10px;
}

.coupon-section .form-field {
	width: calc(100% - 90px)
}

@media (min-width: 769px) {
	.coupon-section .form-field {
		width: 400px;
	}
}

.coupon-section .btn-apply .btn_link {
  font-weight: normal;
}

.point-section .owned-points {
  width: 100%;
	padding: 15px;
	margin-bottom: 15px;
  border-radius: 6px;
  background-color: rgba(var(--color-primary-rgb), 0.08);
	font-size: var(--fz-12);
  line-height: 1;
}

@media (min-width: 769px) {
  .point-section .owned-points {
		max-width: 400px;
  }
}

.point-section .owned-points p {
  margin-bottom: 0;
  color: var(--color-gray);
}

.point-section .owned-points p:first-of-type {
  width: 100%;
	margin-bottom: 10px;
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
}

.point-section .owned-points p .point {
	font-size: var(--fz-20);
  font-weight: bold;
}

.point-section .inner {
	padding-left: 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
	column-gap: 10px;
}

@media (min-width: 769px) {
	.point-section .inner {
		padding-left: 21px;
	}
}

.point-section .btn-apply {
	width: 80px;
	min-width: 80px;
	height: 34px;
}

.point-section .btn-apply .btn_link {
  font-weight: normal;
}

.point-section .radio-list li {
	width: 100%;
}

.delivery-time-section .delivery_time {
	display: block;
	margin-top: 5px;
	padding-left: 25px;
}

@media (min-width: 769px) {
	.delivery-time-section .delivery_time {
		padding-left: 21px;
	}
}

@media (max-width: 768px) {/* only SP */
  .delivery-time-section .radio-list li {
    width: 100%;
    margin-right: 0;
  }
}

@media (min-width: 769px) {
  .point-section .form-field,
	.delivery-time-section .select-wrap {
    width: calc(400px - 21px);
  }
}

.delivery-section p,
.delivery-option-section p {
	font-size: var(--fz-12);
  color: var(--color-gray);
}

.card-image img {
  width: 295px;
}

#card_holder_name {
  text-transform:uppercase;
}

/* ==========================================================================
	Order complete
============================================================================= */
.thanks-section h2 {
	margin-bottom: 10px;
}

.thanks-section p {
	line-height: 1.4;
}

.thanks-section .thanks-message {
	margin-bottom: 20px;
}

.thanks-section .lead > p + p,
.thanks-section .thanks-message > p + p {
	margin-top: 15px;
}

.order-number {
  width: 100%;
	max-width: 850px;
	margin-bottom: 15px;
	padding: 15px;
  border-radius: 3px;
  background-color: rgba(var(--color-primary-rgb), 0.08);
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 769px) {
  .order-number {
    justify-content: flex-start;
  }
}

.order-number span {
	font-size: var(--fz-18);
  font-weight: bold;
	margin-left: 0.1em;
}

.complete-buttons {
	padding-top: 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
	gap: 15px 0;
}

@media (min-width: 769px) {
  .complete-buttons {
    flex-direction: row;
		gap: 0 10px;
  }
}

.complete-buttons .btn,
.complete-buttons .btn--border {
	width: 100%;
	max-width: 350px;
  margin-bottom: 0;
}


/* ==========================================================================
	Login
============================================================================= */
.page-member-login .inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 769px) {
  .page-member-login .inner {
    flex-direction: row;
    justify-content: space-between;
  }
}


/* ==========================================================================
	Register
============================================================================= */
.page-member-register .alert {
	margin-bottom: 20px;
}

.register-section {
  padding: 20px 0;
	border-top: 1px solid var(--color-border);
}

.register-section:first-child {
  padding: 0 0 20px 0;
	border-top: none;
}

.register-section h2 {
	margin-bottom: 10px;
}

.page-member-register .register-section p,
.page-member-mypage .register-section p {
  line-height: 1.4;
}

.page-member-register .section03 h2 + p,
.page-member-register .section04 h2 + p,
.page-member-mypage .section03 h2 + p,
.page-member-mypage .section04 h2 + p {
	margin-bottom: 15px;
}

.page-member-register .register-section p + p,
.page-member-mypage .register-section p + p {
	margin-top: 15px;
}

.page-member-register .register-section th {
  font-weight: bold;
}

.page-member-register .select-wrap {
	height: 44px;
}

.page-member-register .select-wrap.year {
	width: 85px;
  display: inline-block;
	margin-right: 5px;
}

.page-member-register .select-wrap.month,
.page-member-register .select-wrap.day {
	width: 65px;
  display: inline-block;
	margin: 0 5px;
}

.page-member-register .form-field.postal-code {
  width: 100px;
	margin: 0 5px;
}

.page-member-register .radio-list {
	flex-direction: row;
	column-gap: 20px;
}

.p-country-name {
        display: none;
}

/* ==========================================================================
	Q&A
============================================================================= */
.qa-menu {
	margin-bottom: 40px;
	border-top: 1px solid var(--color-gray-light);
  border-left: 1px solid var(--color-gray-light);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 769px) {
  .qa-menu {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 961px) {
  .qa-menu {
    grid-template-columns: repeat(6, 1fr);
  }
}

.qa-menu li {
  border-right: 1px solid var(--color-gray-light);
  border-bottom: 1px solid var(--color-gray-light);
}

.qa-menu li a {
	color: var(--color-text);
  font-weight: bold;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
	padding: 12px;
}

@media (any-hover: hover) {
	.qa-menu li a:hover {
		color: var(--color-primary);
		transition: all 0.2s;
	} 
}

.qa-menu li.is-disabled a {
  color: var(--color-gray-light);
}

.qa-section {
	margin-bottom: 40px;
}

/* Target position adjustment on SP */
@media (max-width: 768px) {/* only SP */
	.qa-section:before {
		content: "";
    display: block;
    height: 70px; /* header height + padding */
    margin-top: -70px; /* negative margin */
    visibility: hidden;
	}
}

.qa-section_title {
	margin-bottom: 10px;
}


/* ==========================================================================
	Calendar
============================================================================= */
.page-calendar .calendar-header {
  width: 100%;
	margin-bottom: 15px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
}

.page-calendar .calendar-header h2 {
	font-size: var(--fz-24);
  line-height: 1.6;
}

.page-calendar .calendar-header h2 span {
  margin-left: 0.4em;
	font-size: var(--fz-14);
  line-height: 1;
}

.page-calendar .calendar-apply {
  width: 100%;
	margin-bottom: 15px;
  display: flex;
  justify-content: flex-end;
	column-gap: 20px;
}

.page-calendar .calendar-apply li {
	font-size: var(--fz-12);
  line-height: 1;
}

.page-calendar .calendar-apply li::before {
	width: 14px;
  height: 14px;
  margin-right: 0.4em;
  content: '\0020';
  display: inline-block;
  vertical-align: middle;
}

.page-calendar .calendar-apply li.holiday1::before {
  background-color: rgba(var(--color-red-rgb), 0.2);
}

.page-calendar .calendar-apply li.holiday2::before {
  background-color: rgba(var(--color-primary-rgb), 0.2);
}

.page-calendar .inner {
	display: grid;
	gap: 30px;
}

@media (min-width: 481px) {
	.page-calendar .inner {
		grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 769px) {
  .page-calendar .inner {
		grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 961px) {
	.page-calendar .inner {
		grid-template-columns: repeat(4, 1fr);
  }
}

.page-calendar .inner .calendar-table {
	width: 100%;
}


/* ==========================================================================
	Inquiry
============================================================================= */
.page-inquiry .alert {
	margin-bottom: 20px;
}

.inquiry-section {
  padding: 20px 0;
	border-top: 1px solid var(--color-border);
}

.inquiry-section:first-child {
  padding: 0 0 20px 0;
	border-top: none;
}

.page-inquiry .inquiry-section h2 {
	margin-bottom: 10px;
	font-size: var(--fz-20);
}

.page-inquiry .inquiry-section h3 {
	margin-bottom: 10px;
	font-size: var(--fz-18);
}

.page-inquiry .inquiry-section p {
	margin-bottom: 15px;
	line-height: 1.4;
}

.page-inquiry .inquiry-section p:last-child {
	margin-bottom: 0;
}

.page-inquiry .inquiry-section th {
  font-weight: bold;
}

.page-inquiry .inquiry-section .inquiry-privacy {
	margin-top: 15px;
	text-align: center;
}


/* ==========================================================================
	Mypage
============================================================================= */
.mypage-block {
  width: 100%;
	padding: 15px;
  border-radius: 6px;
  background-color: rgba(var(--color-primary-rgb), 0.08);
}

@media (min-width: 769px) {
	.mypage-block {
		padding: 20px;
		margin-bottom: 40px;
	}
}

@media (min-width: 1301px) {
  .mypage-block {
		margin-bottom: 60px;
  }
}

.mypage-block .owned-points {
  width: 100%;
	margin-bottom: 10px;
  line-height: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

@media (min-width: 769px) {
  .mypage-block .owned-points {
    justify-content: center;
		column-gap: 5px;
  }
}

.mypage-block .owned-points .point {
	font-size: var(--fz-20);
  font-weight: bold;
}

.mypage-block .owned-points .point .unit {
  font-weight: normal;
}

.mypage-block .expiration-date {
	margin-top: 10px;
	margin-bottom: 0;
	font-size: var(--fz-13);
  color: var(--color-gray);
}

@media (min-width: 769px) {
  .mypage-block .expiration-date {
    text-align: center;
  }
}

.mypage-block .btn-point {
	width: 100%;
	max-width: 350px;
	margin: 20px auto 0
}

.mypage-block .about-point {
	margin-top: 15px;
  margin-bottom: 0;
  text-align: center;
}


/* ==========================================================================
	Points
============================================================================= */
.page-member-points .about-point {
	margin-bottom: 15px;
}

.page-member-points .search-meta {
	margin-bottom: 20px;
  justify-content: flex-start;
  align-items: center;
}

.page-member-points .search-meta .select-wrap {
	width: 160px;
	height: 44px;
}

@media (min-width: 769px) {
  .page-member-points .search-meta .select-wrap {
		height: 40px;
  }
}

.page-member-points .point-table {
	margin-bottom: 20px;
}


/* ==========================================================================
	Order history
============================================================================= */
.page-member-order-history .search-meta {
	margin-bottom: 20px;
	justify-content: flex-start;
	align-items: center;
}

.page-member-order-history .search-meta .select-wrap {
	width: 160px;
	height: 44px;
}

@media (min-width: 769px) {
  .page-member-order-history .search-meta .select-wrap {
		height: 40px;
  }
}

.page-member-order-history-detail .order-section h2 {
	margin-bottom: 5px;
}

@media (min-width: 769px) {
  .page-member-order-history-detail .cart-total-price-table {
		width: 100%;
		margin-left: 0;
  }
	.page-member-order-history-detail .cart-total-price-table th {
		text-align: right;
		
	}.page-member-order-history-detail .cart-total-price-table td {
		width: 180px;
	}
}

.page-member-order-history-detail .order-block_delivery-status .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.page-member-order-history-detail .order-block_delivery-status .inner > ul {
	text-align: left;
}

@media (min-width: 769px) {
	.page-member-order-history-detail .order-block_delivery-status > p {
		text-align: left;
	}
}

.page-member-order-history-detail .cart-box_btn-buy-again{
	margin-left: auto;
}

@media (min-width: 769px) {
	.page-member-order-history-detail .cart-box_btn-buy-again{
		margin-left: 0;
	}
}

.page-member-order-history-detail .btn-back {
	width: 100%;
	max-width: 350px;
	margin: 0 auto;
}


/* ==========================================================================
	Address
============================================================================= */
.address-section {
	margin-bottom: 20px;
}

.address-section h2 {
	margin-bottom: 10px;
}

.address-section .address-box-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
	gap: 15px;
}

.address-section .address-box {
  width: 100%;
}

.address-section .address-box.address-chosen {
	border: 2px solid var(--color-primary);
}

@media (min-width: 769px) {
  .address-section .address-box {
		width: calc(50% - calc(15px/2));
  }
}

@media (min-width: 961px) {
  .address-section .address-box {

		width: calc(33.3333% - 10px);
  }
}


/* ==========================================================================
	Favorites
============================================================================= */
.page-member-favorites .upper {
  display: none;
}

@media (min-width: 769px) {
  .page-member-favorites .upper {
		display: flex;
		margin-bottom: 20px;
  }
}

.page-member-favorites .favorite-box-wrap {
	display: grid;
	row-gap: 15px;
	margin-bottom: 20px;
}

@media (min-width: 769px) {
  .page-member-favorites .favorite-box-wrap {
		grid-template-columns: repeat(3, 1fr);
    gap: 40px 15px;
  }
}

@media (min-width: 769px) {
	.page-member-favorites .favorite-box-wrap {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1025px) {
	.page-member-favorites .favorite-box-wrap {
		grid-template-columns: repeat(5, 1fr);
	}
}

.point-radio-list .is-disabled {
  color: rgb(170, 170, 170);
}

.note-section .radio-list li{
	width:100%;
}

.note-section .radio-list textarea {
	width: 100%;
	height:auto;
}


/* ==========================================================================
	Clear button
============================================================================= */
.textClearFrame {
	display: inline-block;
	position: relative;
	width: 100%;
	flex-grow: 1;
}

@media (min-width: 769px) {
	.form-table .textClearFrame {
		max-width: 400px;
	}
}

.search-block_inner .textClearFrame {
	width: auto;
}

.textClearFrame input {
	width: 100%;
	padding-right: 20px;
}

.textClearFrame textarea {
	width: 100%;
	padding-right: 40px;/* Vertical scroll bar width */
}

.textClearFrame i.inputClear {
	display: block;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: var(--fz-16);
	line-height: 1;
	color: var(--color-gray);
}

@media (min-width: 769px) {
	.textClearFrame i.inputClear {
		font-size: var(--fz-12);
	}
}


/* ==========================================================================
	Text Page
============================================================================= */
.text-section,
.text-border-section {
	line-height: 1.8;
}

.text-section:not(:first-child) {
	padding-top: 30px;
}

.text-border-section:not(:first-child) {
	padding: 30px 0;
	border-top: 1px solid var(--color-border);
}
.text-border-section:first-child {
	padding: 0 0 30px 0;
	border-top: none;
}
.text-border-section:only-child {
	padding: 0;
}

.text-section h1,
.text-border-section h1 {
  margin-bottom: 20px;
}

.text-section h2,
.text-border-section h2 {
	margin-bottom: 5px;
}

.text-section h2 + h3,
.text-border-section h2 + h3 {
	margin-top: 20px;
	margin-bottom: 15px;
}

.text-section p,
.text-border-section p {
	margin-bottom: 15px;
	line-height: 1.8;
}
.text-section p:last-child,
.text-border-section p:last-child {
	margin-bottom: 0;
}

.text-section ul,
.text-section ol,
.text-border-section ul,
.text-border-section ol {
	margin-bottom: 15px;
	line-height: 1.8;
}
.text-section ul:last-child,
.text-section ol:last-child,
.text-border-section ul:last-child,
.text-border-section ol:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
	Switching by scripts.js
============================================================================= */
/* modal-open */
body.is-modal-open {
	overflow-y: hidden;
}
body.is-modal-open .layer {
  display: block;
	z-index: 9000;
}
body.is-modal-open .modal {
	z-index: 9999;
}

/* ---- only SP ---- */
@media (max-width: 768px) {
	/* var funcSmpMenu (drawer-open) */
	body.is-drawer-open {
		overflow-y: hidden;
	}
	body.is-drawer-open .site-header {
		z-index: 9999;
	}
	body.is-drawer-open .layer {
		display: block;
	}
	
	/* var funcSmpSearch (search-open) */
	body.is-search-open {
		overflow-y: hidden;
	}
	body.is-search-open .site-header {
		z-index: 9999;
	}
	body.is-search-open .layer {
		display: block;
		z-index: 9000;
	}
}

/* ---- only PC ---- */
@media (min-width: 769px) {
	/* var funcMenu (sub-nav-open) */
	body.is-sub-nav-open {
		overflow-y: hidden;
	}
	body.is-sub-nav-open .site-header {
		z-index: 9999;
	}
	body.is-sub-nav-open .member-info-popup.is-popup-open {
		display: none;
	}
	body.is-sub-nav-open .layer{
		display: block;
	}
	
	/* is-narrow-down-popup-open */
	body.is-narrow-down-popup-open {
		overflow-y: hidden;
	}
	body.is-narrow-down-popup-open .narrow-down-popup {
		z-index: 9999;
	}
	body.is-narrow-down-popup-open .layer {
    display: block;
		z-index: 9000;
  }
}

/* ==========================================================================
	Dynamic Control
============================================================================= */

.noDisp {
                                display: none;
}
.rowDisp {
                                display: table-row;
}
.flexDisp {
                                display: flex;
}
.gray999 {
                                color: #999;
}
.red {
                                color: #f00;
}
.alignRight {
                                text-align: right;
}
.alignCenter {
                                text-align: center;
}
.regist-confirm {
                                cursor: default;
}
.coupon_product {
                                flex-wrap: wrap;justify-content: flex-end;border:1px;
}
.flexInit {
                                flex-direction:initial;
}
.padTop100px {
                                padding-top:100px;
}