@charset "UTF-8";
/* Base
========================================================================== */
/*! 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 */
  -webkit-text-decoration: underline dotted;
          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-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;
}

/* ---------------------------------------------------------
 　■ レイアウト
--------------------------------------------------------- */
html {
  font-size: 62.5%;
  overflow: auto;
  min-height: 100%;
  position: relative;
}

body {
  background: #ffffff;
  line-height: 1.6;
  color: #313131;
  height: 100%;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

@media screen and (min-width: 768px) {
  body {
    min-width: 1024px;
  }
}

body.fixed {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

body,
select,
input,
button,
textarea {
  color: #313131;
  font-family: Maru Folk Medium, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
}

@media screen and (max-width: 767.98px) {
  body {
    font-size: 1.4rem;
  }
}

.font-s {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* === ol・ulのマーカーを表示を none に指定 === */
ol,
ul {
  list-style: none;
  padding: 0;
}

/* === 垂直型リストで画像を並べた時の隙間を消すための処理 === */
img,
input[type="image"] {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
  margin: 0;
}

/* === padding と border の幅を要素の幅と高さに含める === */
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* === 画像とIFRAMEの幅 === */
img,
iframe {
  max-width: 100%;
  height: auto;
}

/* === テキストリンク === */
a {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

a:hover {
  opacity: .7;
}

a.underline {
  text-decoration: underline;
}

dfn {
  font-style: normal;
}

/* table */
table {
  border-collapse: collapse;
  /* tdスキマ */
  margin: 0 auto;
  width: 100%;
}

@media screen and (max-width: 767.98px) {
  table {
    border-bottom: 1px solid #D9D8D8;
  }
}

table th,
table td {
  border: 1px solid #c9c9c9;
  font-size: 1.4rem;
  padding: 17px 20px;
}

table th {
  text-align: center;
  vertical-align: middle;
  background: #f9f8f5;
  white-space: nowrap;
  width: 25%;
}

/* === 共通クラス === */
@media screen and (min-width: 768px) {
  .hidden-pc {
    /* PCのみ非表示 */
    display: none;
  }
  .nowrap {
    /* PCのみ 改行禁止 */
    white-space: nowrap;
  }
}

@media screen and (max-width: 767px) {
  .hidden-sp {
    /* SPのみ非表示 */
    display: none;
  }
}

@media screen and (max-width: 1023.98px) {
  .hidden-tabSp {
    /* 1024px未満非表示 */
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  /* 1024px以上非表示 */
  .hidden-tabPc {
    display: none;
  }
}

/* 赤字 */
.red,
.caution {
  color: #990019;
}

/* micro clearfix */
.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

/* float */
.floL {
  float: left;
}

.floR {
  float: right;
}

/* spは解除 */
.sp .floL,
.sp .floR {
  float: none;
}

/* 画像リンク */
a:hover img {
  opacity: 0.65;
}

/* 外部リンク */
/*
a.blank.ico{
	position: relative;
	display: inline-block;
	padding-right: 20px;
}
a.blank.ico::before,
a.blank.ico::after{
	position: absolute;
	right: 3px;
	top: 6px;
	width: 9px;
	height: 9px;
	content: "";
	border: 1px solid #a7a7a7;
	background: #FFF;
}
a.blank.ico::after{
	right: 0;
	top: 3px;
}
*/
/* === 間隔調整 === */
.mt10 {
  margin-top: 10px;
}

.mt30 {
  margin-top: 30px;
}

.mt50 {
  margin-top: 50px;
}

.mb10 {
  margin-bottom: 10px;
}

.w20 {
  width: 20%;
}

.w40 {
  width: 40%;
}

.w50 {
  width: 50%;
}

.w60 {
  width: 60%;
}

.w80 {
  width: 80%;
}

.p10 {
  padding: 10px;
}

.p20 {
  padding: 20px;
}

.pb30 {
  padding-bottom: 30px;
}

.pb15 {
  padding-bottom: 15px;
}

.sml {
  font-size: 0.85em;
}

.lrg {
  font-size: 1.2em;
}

.algn_r {
  text-align: right;
}

.algn_c {
  text-align: center;
}

.algn_l {
  text-align: left;
}

@media screen and (min-width: 768px) {
  br.brfsp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  br.brfpc {
    display: none;
  }
}

.clr_b {
  clear: both;
}

/* === カート === */
.cartBox {
  line-height: 1.3;
}

.cartBox dl {
  margin: 0;
}

.cartBox dl dt .ttl {
  font-size: 1.9rem;
  font-style: normal;
  display: block;
  margin: 0 0 10px;
  font-weight: bold;
}

.cartBox dl dd {
  margin: 0;
}

.cartBox dl dd .text {
  font-size: 1.5rem;
}

@media screen and (max-width: 767.98px) {
  .cartBox dl dd .text {
    margin: 5px auto;
  }
}

.cartBox dl dd .price .yen {
  font-size: 2.6rem;
  color: #990019;
  font-weight: bold;
}

.cartBox dl dd .price .zei {
  font-size: 1.8rem;
  font-weight: bold;
  padding-left: .5rem;
}

@media screen and (max-width: 767.98px) {
  .cartBox dl dd .price .zei {
    font-size: 1.6rem;
  }
}

.cartBox dl dd .btn {
  text-align: center;
}

/* ボックス内アイコン */
.cartBox .ico {
  display: inline-block;
  padding: 3px 10px;
  font-size: 1.2rem;
  vertical-align: super;
  margin-right: 10px;
}

.cartBox .ico.souryo {
  border: 1px solid #f3c52a;
  background: #f3c52a;
}

.cartBox .ico.teiki {
  background: url(/images/nav02_ico.svg) 5% top no-repeat;
  border: 2px solid #009933;
  padding-left: 3em;
}

.cartBox .ico.haisou {
  border: 1px solid #DCDCDC;
  background: #FDFCF7;
}

/* === コンテンツ === */
.inner {
  width: 94%;
  width: 1024px;
  margin: 0 auto;
}

.inner {
  width: 1024px;
  margin: 0 auto;
}

#container {
  padding-top: 48px;
  padding-bottom: 72px;
}

@media screen and (max-width: 767.98px) {
  #container {
    padding-top: 24px;
    padding-bottom: 36px;
  }
}

.container-s,
.inner {
  width: 92%;
  max-width: 1080px;
  margin: 0 auto;
}

.container-m {
  width: 92%;
  max-width: 1280px;
  margin: 0 auto;
}

.container-l {
  width: 92%;
  max-width: 1530px;
  margin: 0 auto;
}

/* Header
========================================================================== */
/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
header#header {
  position: relative;
  color: #5c5342;
  z-index: 2000;
}

header#header.is-fixed {
  position: fixed;
  width: 100%;
}

header#header .upper {
  display: none;
}

@media screen and (min-width: 1024px) {
  header#header .upper {
    display: block;
    background: #f7f0e8;
  }
}

header#header .lower {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2%;
  background: #fff;
}

@media screen and (max-width: 1023.98px) {
  header#header .lower {
    padding: 6px 2.6%;
  }
}

@media screen and (max-width: 320px) {
  header#header .lower {
    padding: 6px 1%;
  }
}

@media screen and (min-width: 1024px) {
  header#header .lower {
    height: 72px;
  }
}

header#header .headerLogo {
  width: 18.8%;
  max-width: 272px;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 767.98px) {
  header#header .headerLogo {
    width: 160px;
  }
}

@media screen and (max-width: 320px) {
  header#header .headerLogo {
    width: 130px;
  }
}

header#header .headerLogo > a {
  display: flex;
  align-items: center;
}

@media screen and (max-width: 1023.98px) {
  header#header .headerLogo__img {
    width: 50vw;
    max-width: 280px;
  }
}

header#header .guideNav {
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 767.98px) {
  header#header .guideNav {
    display: none;
  }
}

header#header .guideNav__item > a {
  display: flex;
  align-items: center;
  color: inherit;
  margin: 0 1.6rem;
  padding: 4px;
  font-size: 1.2rem;
}

header#header .guideNav__item > a.icon-contact:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 17px;
  margin-right: 4px;
  background: url(../images/icon_mail.png) no-repeat center center/contain;
}

header#header .navBtnWrap {
  display: flex;
  align-items: center;
}

header#header .myNav {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

header#header .myNav__item > a {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  margin: 0 6px;
  font-size: 12px;
}

@media screen and (max-width: 1279.98px) {
  header#header .myNav__item > a {
    margin: 0 6px;
    font-size: 8px;
  }
}

@media screen and (max-width: 767.98px) {
  header#header .myNav__item > a {
    margin: 0 4px;
    font-size: 8px;
  }
}

@media screen and (max-width: 320px) {
  header#header .myNav__item > a {
    margin: 0 1px;
  }
}

header#header .myNav__item > a:before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-bottom: 3px;
}

@media screen and (max-width: 1279.98px) {
  header#header .myNav__item > a:before {
    width: 26px;
    height: 26px;
    margin-bottom: 0;
  }
}

header#header .myNav__item.mypage > a:before {
  background: url(../images/icon_mypage.png) no-repeat center center/contain;
}

header#header .myNav__item.login > a:before,
header#header .myNav__item.logout > a:before {
  background: url(../images/icon_lock.png) no-repeat center center/contain;
}

header#header .myNav__item.cart > a:before {
  background: url(../images/icon_cart.png) no-repeat center center/contain;
}

header#header .myNav__item.cart {
  position: relative;
}

header#header .myNav__item.cart .count {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -4px;
  right: 0;
  background: #e6dccf;
  width: 17px;
  height: 17px;
  border-radius: 50%;
}

header#header .hamburger {
  position: relative;
  width: 40px;
  height: 40px;
  margin-left: 6px;
  border: 0;
  border-radius: 5px;
  background-color: #f7f0e8;
  z-index: 11;
  flex-shrink: 0;
}

@media screen and (max-width: 320px) {
  header#header .hamburger {
    margin-left: 4px;
  }
}

header#header .hamburger span {
  position: absolute;
  left: 6px;
  margin: auto;
  width: 28px;
  height: 2px;
  background: #857868;
  border-radius: 4px;
}

header#header .hamburger span:nth-child(1) {
  top: 10px;
}

header#header .hamburger span:nth-child(2) {
  top: 18px;
}

header#header .hamburger span:nth-child(3) {
  width: 16px;
  bottom: 10px;
}

header#header .hamburger.open span:nth-of-type(1) {
  -webkit-transform: translateY(9px) rotate(45deg);
          transform: translateY(9px) rotate(45deg);
}

header#header .hamburger.open span:nth-of-type(2) {
  opacity: 0;
}

header#header .hamburger.open span:nth-of-type(3) {
  width: 28px;
  -webkit-transform: translateY(-9px) rotate(-45deg);
          transform: translateY(-9px) rotate(-45deg);
}

header#header .hamburger,
header#header .hamburger span {
  display: inline-block;
  transition: all .5s;
}

@media screen and (min-width: 1024px) {
  header#header .hamburger,
  header#header .hamburger span {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  header#header .headerMiddle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 66%;
    height: 100%;
    padding: 2px 0;
  }
}

@media screen and (min-width: 1280px) {
  header#header .headerMiddle {
    min-width: 58%;
  }
}

header#header .welcomeBox {
  font-size: 14px;
}

@media screen and (max-width: 767.98px) {
  header#header .welcomeBox {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  header#header .welcomeBox {
    margin: 0 2%;
  }
}

@media screen and (max-width: 767.98px) {
  header#header .globalNav {
    width: 80%;
  }
}

@media screen and (max-width: 1023.98px) {
  header#header .globalNav {
    overflow-y: auto;
    position: absolute;
    top: 100%;
    right: 0;
    width: 50%;
    min-width: 320px;
    padding: 12px 0 0;
    margin: auto;
    z-index: 10;
    background-color: #fff;
  }
}

@media screen and (min-width: 1024px) {
  header#header .globalNav {
    display: flex;
    align-items: center;
    height: 100%;
  }
}

header#header.fade .globalNav {
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}

header#header.fade .globalNav.open {
  opacity: 1;
  visibility: visible;
}

@media screen and (min-width: 1024px) {
  header#header.fade .globalNav {
    opacity: 1;
    visibility: visible;
  }
}

header#header .globalNavMenu {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

@media screen and (min-width: 1024px) {
  header#header .globalNavMenu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    font-size: 16px;
  }
}

@media screen and (min-width: 1280px) {
  header#header .globalNavMenu {
    font-size: 16px;
  }
}

header#header .globalNavMenu__item {
  display: block;
  width: 100%;
}

@media screen and (max-width: 1023.98px) {
  header#header .globalNavMenu__item.has-submenu > a:after {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  header#header .globalNavMenu__item.has-submenu > a.is-open:after {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
  }
  header#header .globalNavMenu__item.has-submenu .dropdown__menu {
    margin-bottom: 20px;
    padding-bottom: 50px;
  }
  header#header .globalNavMenu__item.guide a {
    background-color: #f7f0e8;
  }
  header#header .globalNavMenu__item.guide a:after {
    background: url(../images/icon_next.png) no-repeat center center/contain;
  }
}

@media screen and (min-width: 1024px) {
  header#header .globalNavMenu__item {
    width: auto;
    height: 100%;
    margin: 0 2%;
    padding: 0;
  }
  header#header .globalNavMenu__item:hover > .dropdown,
  header#header .globalNavMenu__item:focus > .dropdown,
  header#header .globalNavMenu__item:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
  }
  header#header .globalNavMenu__item:hover > a:before,
  header#header .globalNavMenu__item:hover > a:after,
  header#header .globalNavMenu__item:focus-within > a:before,
  header#header .globalNavMenu__item:focus-within > a:after {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s;
  }
  header#header .globalNavMenu__item.guide {
    display: none;
  }
}

header#header .globalNavMenu__item > a {
  position: relative;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  color: inherit;
  font-weight: 500;
}

@media screen and (max-width: 1023.98px) {
  header#header .globalNavMenu__item > a {
    position: relative;
  }
  header#header .globalNavMenu__item > a:after {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 2px;
    width: 20px;
    height: 20px;
    margin: auto;
    background: url(../images/icon_arrow.png) no-repeat center center/contain;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
  }
}

@media screen and (min-width: 1024px) {
  header#header .globalNavMenu__item > a {
    display: inline-flex;
    height: 100%;
    padding: 0.5em 0;
  }
  header#header .globalNavMenu__item > a:after {
    opacity: 0;
    visibility: hidden;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 5px;
    background-color: #e6dccf;
    border-radius: 5px;
    transition: opacity .3s;
  }
  header#header .globalNavMenu__item > a:before {
    opacity: 0;
    visibility: hidden;
    content: "";
    display: block;
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    margin: auto;
    transition: opacity .3s;
    width: 0;
    height: 0;
    border-width: 10px 8px 0 8px;
    border-color: #e6dccf transparent transparent transparent;
    border-style: solid;
    z-index: 2;
  }
  header#header .globalNavMenu__item > a:hover:before, header#header .globalNavMenu__item > a:hover:after, header#header .globalNavMenu__item > a:focus:before, header#header .globalNavMenu__item > a:focus:after {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s;
  }
  header#header .globalNavMenu__item > a:hover {
    opacity: 1;
    text-decoration: none;
  }
}

header#header .globalNavMenu__item > a .icon {
  display: inline-block;
  margin-right: 14px;
}

@media screen and (max-width: 1023.98px) {
  header#header .globalNavMenu__item > a .icon img {
    width: auto;
    height: 20px;
  }
}

@media screen and (min-width: 1024px) {
  header#header .globalNavMenu__item > a .icon {
    margin-right: 6px;
  }
}

@media screen and (max-width: 1023.98px) {
  header#header .globalNavMenu__item > a.feature .icon img {
    width: auto;
    height: 25px;
  }
}

header#header .globalNavClose {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px auto;
  display: flex;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  box-shadow: none;
  background-color: transparent;
}

header#header .globalNavClose:before {
  content: "";
  display: inline-block;
  margin-right: 15px;
  width: 30px;
  height: 30px;
  background: url(../images/btn_close.png) no-repeat center center/contain;
}

@media screen and (min-width: 1024px) {
  header#header .globalNavClose {
    display: none;
  }
}

header#header .dropdown {
  width: 100%;
}

@media screen and (max-width: 1023.98px) {
  header#header .dropdown {
    display: none;
    padding: 0 20px 0 50px;
  }
}

@media screen and (min-width: 1024px) {
  header#header .dropdown {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 1480px;
    margin: 0 auto;
  }
  header#header .dropdown.focused {
    opacity: 1;
    visibility: visible;
  }
}

header#header .dropdown__item {
  position: relative;
}

@media screen and (min-width: 1024px) {
  header#header .dropdown__item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 40px 2%;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
  }
}

@media screen and (min-width: 1280px) {
  header#header .dropdown__item {
    padding: 40px 4%;
  }
}

header#header .dropdown__moreBtn {
  position: absolute;
  top: 30px;
  right: 2%;
}

@media screen and (min-width: 1024px) {
  header#header .dropdown__moreBtn {
    right: 4%;
  }
}

@media screen and (max-width: 1023.98px) {
  header#header .dropdown__moreBtn {
    top: auto;
    bottom: 0;
    right: 0;
    font-size: 1.1rem;
  }
  header#header .dropdown__moreBtn:after {
    width: 37px;
    height: 37px;
    margin-left: 14px;
  }
}

@media screen and (max-width: 1023.98px) {
  header#header .dropdown__menu .col + .col {
    margin-top: 20px;
  }
}

@media screen and (min-width: 1024px) {
  header#header .dropdown__menu {
    display: flex;
    justify-content: space-between;
    flex-flow: row nowrap;
    width: 100%;
  }
  header#header .dropdown__menu .col {
    width: 30%;
    min-width: 320px;
  }
}

header#header .dropdown__menuItem {
  list-style: none;
  margin: 0;
  padding: 0;
}

header#header .dropdown__menuItem li {
  margin: 0;
}

header#header .dropdown__menuItem li > a {
  display: flex;
  align-items: center;
  padding: 10px;
}

@media screen and (max-width: 1023.98px) {
  header#header .dropdown__menuItem li > a {
    font-size: 1.2rem;
  }
}

@media screen and (min-width: 1024px) {
  header#header .dropdown__menuItem li > a {
    padding: 20px 3%;
  }
}

header#header .dropdown__menuItem li .icon-thumb {
  display: block;
  flex-shrink: 0;
  width: 30px;
  margin-right: 4px;
}

@media screen and (min-width: 1024px) {
  header#header .dropdown__menuItem li .icon-thumb {
    width: 60px;
    margin-right: 0;
  }
}

header#header .dropdown__ttl01 {
  position: relative;
  display: inline-block;
  margin-top: 0;
  margin-bottom: 40px;
  padding-bottom: 4px;
  font-size: 3rem;
  text-align: left;
}

@media screen and (max-width: 1023.98px) {
  header#header .dropdown__ttl01 {
    display: none;
  }
}

header#header .dropdown__ttl01:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 11px;
  background-color: #e6dccf;
  border-radius: 5px;
  line-height: 1;
}

header#header .dropdown__ttl02 {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 6px 20px 6px 62px;
  background-color: #e6dccf;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
}

@media screen and (min-width: 1024px) {
  header#header .dropdown__ttl02 {
    justify-content: center;
    padding: 12px 30px 12px 52px;
    margin: 0 0 12px;
    border-radius: 10px;
    font-size: 21px;
  }
}

@media screen and (min-width: 1280px) {
  header#header .dropdown__ttl02 {
    font-size: 24px;
  }
}

header#header .dropdown__ttl02:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

@media screen and (max-width: 1023.98px) {
  header#header .dropdown__ttl02:before {
    max-height: 24px;
    left: 10px;
  }
}

header#header .dropdown__ttl02.collagen:before {
  background-image: url(../images/icon/icon_collagen_wh.png);
  width: 50px;
  height: 28px;
}

@media screen and (max-width: 1023.98px) {
  header#header .dropdown__ttl02.collagen:before {
    width: 25px;
    height: 14px;
  }
}

header#header .dropdown__ttl02.bowel:before {
  background-image: url(../images/icon/icon_bowel_wh.png);
  width: 39px;
  height: 35px;
}

@media screen and (max-width: 1023.98px) {
  header#header .dropdown__ttl02.bowel:before {
    width: 20px;
    height: 17px;
  }
}

header#header .dropdown__ttl02.heart:before {
  background-image: url(../images/icon/icon_heart_wh.png);
  width: 41px;
  height: 36px;
}

@media screen and (max-width: 1023.98px) {
  header#header .dropdown__ttl02.heart:before {
    width: 20px;
    height: 18px;
  }
}

header#header .dropdown__ttl02.pickup:before {
  background-image: url(../images/icon/icon_pickup_wh.png);
  width: 35px;
  height: 40px;
}

header#header .dropdown__ttl02.labo:before {
  background-image: url(../images/icon/icon_labo_wh.png);
  width: 34px;
  height: 44px;
}

header#header .dropdown__ttl02.diary:before {
  background-image: url(../images/icon/icon_diary_wh.png);
  width: 48px;
  height: 40px;
}

@media screen and (min-width: 1024px) {
  header#header .dropdown__ttl02.pickup, header#header .dropdown__ttl02.labo, header#header .dropdown__ttl02.diary {
    padding: 12px 60px 12px 70px;
  }
}

@media screen and (min-width: 1024px) {
  header#header .dropdown#dd-feature .dropdown__menu .col {
    width: 32%;
  }
}

@media screen and (max-width: 1023.98px) {
  header#header .dropdown#dd-feature .dropdown__ttl02 {
    position: relative;
  }
  header#header .dropdown#dd-feature .dropdown__ttl02:after {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    margin: auto;
    background: url(../images/icon_arrow.png) no-repeat center center/contain;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

@media screen and (max-width: 1023.98px) {
  body.gnav-open {
    overflow-y: hidden;
  }
}

/* フォーム系ページ専用ナビ設定 */
body.entry.input header#header .globalNav,
body.entry.confirm header#header .globalNav,
body.shopping.input header#header .globalNav,
body.shopping.confirm header#header .globalNav,
body.cregister header#header .globalNav {
  display: none;
}

body.entry.input header#header .guideNav,
body.entry.confirm header#header .guideNav,
body.shopping.input header#header .guideNav,
body.shopping.confirm header#header .guideNav,
body.cregister header#header .guideNav {
  opacity: 0;
}

body.entry.input header#header .headerLogo > a,
body.entry.confirm header#header .headerLogo > a,
body.shopping.input header#header .headerLogo > a,
body.shopping.confirm header#header .headerLogo > a,
body.cregister header#header .headerLogo > a {
  pointer-events: none;
}

body.entry.input header#header .headerMiddle,
body.entry.confirm header#header .headerMiddle,
body.shopping.input header#header .headerMiddle,
body.shopping.confirm header#header .headerMiddle,
body.cregister header#header .headerMiddle {
  opacity: 0;
}

body.entry.input header#header .myNav,
body.entry.confirm header#header .myNav,
body.shopping.input header#header .myNav,
body.shopping.confirm header#header .myNav,
body.cregister header#header .myNav {
  display: none;
}

@media screen and (max-width: 1279.98px) {
  body.entry.input header#header .hamburger,
  body.entry.confirm header#header .hamburger,
  body.shopping.input header#header .hamburger,
  body.shopping.confirm header#header .hamburger,
  body.cregister header#header .hamburger {
    display: none;
  }
}

/* Footer
========================================================================== */
/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
footer#footer {
  border-top: 4px dotted #f1e9e5;
  color: #5c5342;
  /* === upper === */
  /* === SNS === */
  /* === フッターナビ === */
  /* === bottom === */
}

@media screen and (min-width: 768px) {
  footer#footer {
    border-top: 9px dotted #f1e9e5;
  }
}

footer#footer .footer-upper {
  position: relative;
  padding-top: 24px;
}

@media screen and (min-width: 768px) {
  footer#footer .footer-upper {
    padding-top: 72px;
    padding-bottom: 170px;
  }
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-branding {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

@media screen and (min-width: 768px) {
  footer#footer .footer-branding {
    height: 170px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}

footer#footer .footer-sns {
  display: flex;
  justify-content: center;
}

footer#footer .footer-sns a {
  display: block;
  width: 40px;
  height: 40px;
  margin: 16px 20px;
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-sns a {
    width: 25px;
    height: 25px;
    margin: 6px;
  }
}

footer#footer .logo {
  text-align: center;
}

@media screen and (max-width: 767.98px) {
  footer#footer .logo {
    width: 160px;
  }
}

footer#footer .logo a {
  display: block;
}

footer#footer .footer-nav {
  display: flex;
  justify-content: space-around;
  /* === お問い合わせ === */
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

footer#footer .footer-nav .nav-col {
  flex-shrink: 0;
  margin: 0 50px 0 0;
}

@media screen and (max-width: 1279.98px) {
  footer#footer .footer-nav .nav-col {
    margin: 0 40px 0 0;
  }
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .nav-col {
    width: 100%;
    margin: 20px 0 0;
    padding-left: 20px;
  }
}

footer#footer .footer-nav .nav-col li a {
  display: block;
  color: inherit;
}

footer#footer .footer-nav .nav-col:last-child {
  margin-right: 0;
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .nav-col:last-child {
    margin-top: 0;
  }
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .nav-col.contact {
    width: 100%;
    padding-left: 0;
  }
}

footer#footer .footer-nav .ttl {
  margin: 0 0 1em;
  font-size: 1.8rem;
}

@media screen and (max-width: 1279.98px) {
  footer#footer .footer-nav .ttl {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .ttl {
    margin-bottom: 0;
    font-size: 1.5rem;
  }
}

footer#footer .footer-nav .product-list li ul li {
  margin-left: 1em;
}

@media screen and (max-width: 1279.98px) {
  footer#footer .footer-nav .product-list li ul li > a {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .product-list {
    padding-left: 1em;
  }
}

footer#footer .footer-nav .page-list li {
  font-size: 1.8rem;
}

@media screen and (max-width: 1279.98px) {
  footer#footer .footer-nav .page-list li {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .page-list li {
    font-size: 1.5rem;
  }
}

footer#footer .footer-nav .page-list li + li {
  margin-top: 50px;
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .page-list li + li {
    margin-top: 10px;
  }
}

footer#footer .footer-nav .contactBox {
  width: 240px;
  padding: 32px 16px;
  box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.35);
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .contactBox {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
  }
}

footer#footer .footer-nav .contactBox__ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 32px;
  font-size: 1.8rem;
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .contactBox__ttl {
    margin: 0 0 10px;
    font-size: 1.6rem;
  }
}

footer#footer .footer-nav .contactBox__ttl:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 41px;
  margin-right: 4px;
  background: url(../images/icon_phone.png) no-repeat center center/contain;
}

footer#footer .footer-nav .contactBox .contactList {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .contactBox .contactList {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
  }
}

footer#footer .footer-nav .contactBox .contactList__ttl {
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  text-align: center;
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .contactBox .contactList__ttl {
    font-size: 1.5rem;
  }
}

footer#footer .footer-nav .contactBox .contactList__txt {
  margin: 0;
  padding: 0;
}

footer#footer .footer-nav .contactBox .contactList__item {
  margin-top: 40px;
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .contactBox .contactList__item {
    margin: 10px;
  }
}

footer#footer .footer-nav .contactBox .contactList .tel-num {
  display: flex;
  align-items: center;
  font-size: 2.1rem;
}

@media screen and (max-width: 767.98px) {
  footer#footer .footer-nav .contactBox .contactList .tel-num {
    font-size: 1.7rem;
  }
}

footer#footer .footer-nav .contactBox .contactList .tel-num:before {
  content: "";
  display: inline-block;
  width: 31px;
  height: 18px;
  margin-right: 8px;
  background: url(../images/icon_free-dial.png) no-repeat center center/contain;
}

footer#footer .footer-nav .contactBox .contactList .tel-hour {
  display: block;
  font-size: 1.2rem;
}

footer#footer .footer-nav .contactBox .contactList .tel-hour > .second-line {
  display: inline-block;
  padding-left: 5em;
}

footer#footer .footer-bottom {
  padding: 1.6rem 0;
  text-align: center;
  background-color: #f7f0e8;
}

footer#footer .list-comp {
  display: flex;
  align-items: center;
  justify-content: center;
}

footer#footer .list-comp li {
  border-right: 1px solid;
  line-height: 1.2;
}

footer#footer .list-comp li:last-child {
  border: none;
}

footer#footer .list-comp li a {
  display: block;
  padding: 0 .5em;
  color: inherit;
  font-size: 1.2rem;
}

@media screen and (max-width: 767.98px) {
  footer#footer .list-comp li a {
    font-size: 1rem;
  }
}

footer#footer .copy {
  font-size: 1.2rem;
}

@media screen and (max-width: 767.98px) {
  footer#footer .copy {
    font-size: 1rem;
  }
}

/* === TOPへ戻るリンク === */
.pagetop {
  display: block;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  bottom: 10px;
  right: 10px;
  margin: 0;
  z-index: 10;
}

@media screen and (max-width: 1500px) {
  .pagetop {
    bottom: 120px;
  }
}

@media screen and (max-width: 767.98px) {
  .pagetop {
    width: 30px;
    height: 30px;
    bottom: 9px;
    right: 2%;
  }
}

.pagetop.active {
  opacity: 1;
  visibility: visible;
}

.pagetop a {
  display: block;
}

.pagetop a:hover {
  opacity: 0.7;
}

/* フォーム系ページ専用ナビ設定 */
body.entry.input footer#footer,
body.entry.confirm footer#footer,
body.shopping.input footer#footer,
body.shopping.confirm footer#footer,
body.cregister footer#footer {
  border-top: none;
}

body.entry.input footer#footer > .footer-upper,
body.entry.confirm footer#footer > .footer-upper,
body.shopping.input footer#footer > .footer-upper,
body.shopping.confirm footer#footer > .footer-upper,
body.cregister footer#footer > .footer-upper {
  display: none;
}

body.entry.input footer#footer .list-comp,
body.entry.confirm footer#footer .list-comp,
body.shopping.input footer#footer .list-comp,
body.shopping.confirm footer#footer .list-comp,
body.cregister footer#footer .list-comp {
  display: none;
}

/* Button
========================================================================== */
/* ---------------------------------------------------------
 　 ボタン
--------------------------------------------------------- */
.btnWrap._spaceTop {
  margin-top: 60px;
}

@media screen and (max-width: 767.98px) {
  .btnWrap._spaceTop {
    margin-top: 30px;
  }
}

.btnWrap._col-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 767.98px) {
  .btnWrap._col-2 {
    flex-direction: column;
  }
  .btnWrap._col-2 > * {
    margin: 10px;
  }
}

@media screen and (min-width: 768px) {
  .btnWrap._col-2 > * {
    margin: 0 20px;
  }
}

.btnNext {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 1.8rem;
}

.btnNext:after {
  content: "";
  display: inline-block;
  bottom: 0;
  width: 61px;
  height: 61px;
  margin-left: 32px;
  background: url(../images/icon_next.png) no-repeat center center/contain;
  line-height: 1;
}

@media screen and (max-width: 767.98px) {
  .btnNext {
    font-size: 1.1rem;
  }
  .btnNext:after {
    width: 37px;
    height: 37px;
    margin-left: 14px;
  }
}

.btnNextSecondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1em;
  border-radius: 32px;
  background-color: #e6dccf;
  font-size: 2.4rem;
  text-align: center;
}

@media screen and (max-width: 1279.98px) {
  .btnNextSecondary {
    font-size: 1.8rem;
  }
}

.btnNextSecondary:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 35px;
  width: 45px;
  height: 45px;
  margin: auto;
  background: url(../images/icon_next.png) no-repeat center center/contain;
  line-height: 1;
}

@media screen and (max-width: 1279.98px) {
  .btnNextSecondary:after {
    width: 32px;
    height: 32px;
    right: 20px;
  }
}

@media screen and (max-width: 767.98px) {
  .btnNextSecondary:after {
    width: 22px;
    height: 22px;
    right: 18px;
  }
}

.btnAddCart {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 275px;
  padding: 8px 30px;
  border-radius: 5px;
  background-color: #857868;
  color: #fff;
  font-size: 2.1rem;
}

.btnAddCart:before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 30px;
  margin-right: 16px;
  background: url(../images/product/icon_cart_btn.png) no-repeat center center/contain;
}

@media screen and (max-width: 767.98px) {
  .btnAddCart {
    justify-content: center;
    width: auto;
    font-size: 1.6rem;
  }
  .btnAddCart:before {
    width: 30px;
    height: 20px;
    margin-right: 10px;
  }
}

/* 矢印ボタン */
.arrowBtn {
  display: inline-block;
  padding: 8px 50px;
  border: 0;
  border-radius: 30px;
  color: #fff;
  font-size: 1.8rem;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
}

@media screen and (max-width: 767.98px) {
  .arrowBtn {
    padding: 8px 30px;
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 768px) {
  .arrowBtn {
    min-width: 325px;
  }
}

.arrowBtn span {
  position: relative;
  display: inline-block;
  padding: 0 32px 0 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: 1.8rem;
  line-height: 1;
  margin-top: -3px;
}

.arrowBtn span::before,
.arrowBtn span::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}

.arrowBtn span::before {
  box-sizing: border-box;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.arrowBtn span::after {
  right: 9px;
  width: 6px;
  height: 6px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* 左矢印 */
.arrowBtn.bak span {
  padding: 0 0 0 32px;
}

.arrowBtn.bak span::before {
  right: auto;
  left: -6px;
}

.arrowBtn.bak span::after {
  left: 1px;
  right: auto;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}

/* 下向き */
.arrowBtn.down span::after {
  top: -2px;
  right: 8px;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

/* 黄色 */
.arrowBtn.bg-y {
  position: relative;
  background: #fad862;
  box-shadow: 0px 3px 0px #e1c258;
  cursor: pointer;
}

.arrowBtn.bg-y span {
  color: #353535;
}

.arrowBtn.bg-y span::before {
  border: 2px solid #353535;
}

.arrowBtn.bg-y span::after {
  border-top: 2px solid #353535;
  border-right: 2px solid #353535;
}

.arrowBtn.bg-y:hover {
  background: #E0B417;
  box-shadow: 0px 3px 0px #A1800A;
}

.arrowBtn.bg-y:active {
  top: 3px;
  box-shadow: none;
}

/* 緑 */
.arrowBtn.bg-g {
  position: relative;
  background: #a18e78;
  box-shadow: 0px 4px 0px #c8c0b5;
  cursor: pointer;
}

.arrowBtn.bg-g span {
  color: #ffffff;
}

.arrowBtn.bg-g span::before {
  border: 2px solid #ffffff;
}

.arrowBtn.bg-g span::after {
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

.arrowBtn.bg-g:hover {
  opacity: 0.7;
}

.arrowBtn.bg-g:active {
  top: 4px;
  box-shadow: none;
}

/* グレー */
.arrowBtn.bg-gr {
  position: relative;
  background: #CCCCCC;
  box-shadow: 0px 4px 0px #A0A0A0;
  cursor: pointer;
}

.arrowBtn.bg-gr span {
  color: #ffffff;
}

.arrowBtn.bg-gr span::before {
  border: 2px solid #ffffff;
}

.arrowBtn.bg-gr span::after {
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

.arrowBtn.bg-gr:hover {
  background: #BBBBBB;
  box-shadow: 0px 4px 0px #909090;
}

.arrowBtn.bg-gr:active {
  top: 4px;
  box-shadow: none;
}

/* 白 */
.arrowBtn.bg-w {
  position: relative;
  background: #ffffff;
  box-shadow: 0px 4px 0px #a18e78;
  border: 2px solid #a18e78;
  cursor: pointer;
}

.arrowBtn.bg-w span {
  color: #a18e78;
}

.arrowBtn.bg-w span::before {
  border: 2px solid #a18e78;
}

.arrowBtn.bg-w span::after {
  border-top: 2px solid #a18e78;
  border-right: 2px solid #a18e78;
}

.arrowBtn.bg-w:hover {
  background: #ffffff;
  box-shadow: 0px 4px 0px #c8c0b5;
  border: 2px solid #c8c0b5;
}

.arrowBtn.bg-w:active {
  top: 4px;
  box-shadow: none;
  border: 1px solid #c8c0b5;
}

/* 赤 */
.arrowBtn.bg-r {
  position: relative;
  background: #a18e78;
  box-shadow: 0px 4px 0px #c8c0b5;
  cursor: pointer;
}

.arrowBtn.bg-r span {
  color: #ffffff;
}

.arrowBtn.bg-r span::before {
  border: 2px solid #ffffff;
}

.arrowBtn.bg-r span::after {
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

.arrowBtn.bg-r:hover {
  opacity: 0.7;
}

.arrowBtn.bg-r:active {
  top: 4px;
  box-shadow: none;
}

/* カート */
.arrowBtn.cart {
  position: relative;
  background: #a18e78;
  box-shadow: 0px 4px 0px #007a5a;
  padding: 10px 50px;
  cursor: pointer;
}

@media screen and (max-width: 767.98px) {
  .arrowBtn.cart {
    padding: 10px;
    width: 95%;
  }
}

.arrowBtn.cart span {
  color: #ffffff;
}

.arrowBtn.cart span::before {
  border: 2px solid #ffffff;
}

.arrowBtn.cart span::after {
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

.arrowBtn.cart:hover {
  background: #c8c0b5;
  box-shadow: 0px 4px 0px #006622;
}

.arrowBtn.cart:active {
  top: 4px;
  box-shadow: none;
}

/* Form 主にマイページ類、商品ページコメント
========================================================================== */
/* ---------------------------------------------------------
 　■ フォーム用
--------------------------------------------------------- */
.loginBox,
.registBox,
.payBox,
.cardBox,
form .cartBox,
.delivBox,
.delivdateBox,
.messageBox,
.contactBox,
.couponBox,
.forgotBox {
  margin: 0 auto 40px;
  /* width: 880px; */
  width: 100%;
}

.loginBox table,
.registBox table,
.payBox table,
.cardBox table,
form .cartBox table,
.delivBox table,
.delivdateBox table,
.messageBox table,
.contactBox table,
.couponBox table,
.forgotBox table {
  margin-bottom: 10px;
}

.loginBox table th,
.registBox table th,
.payBox table th,
.cardBox table th,
.delivBox table th,
.delivdateBox table th,
.messageBox table th,
.contactBox table th,
.couponBox table th,
.forgotBox table th {
  /* width: 230px; */
  background-color: #f5f5f5;
  border: none;
  text-align: left;
  font-size: 1.5rem;
  color: #353535;
  font-weight: bold;
  padding: 0px 10px;
  vertical-align: top;
  position: relative;
  border: 1px solid #dedede;
  padding: 10px 15px;
}

.loginBox table td,
.registBox table td,
.payBox table td,
.cardBox table td,
.cartBox table td,
.delivBox table td,
.delivdateBox table td,
.messageBox table td,
.contactBox table td,
.couponBox table td,
.forgotBox table td {
  /* width: 780px; */
  border: none;
  text-align: left;
  font-size: 1.6rem;
  color: #353535;
  vertical-align: top;
  border: 1px solid #dedede;
  padding: 10px 20px;
}

.loginBox table td div + div,
.registBox table td div + div,
.payBox table td div + div,
.cardBox table td div + div,
form .cartBox table td div + div,
.delivBox table td div + div,
.delivdateBox table td div + div,
.messageBox table td div + div,
.contactBox table td div + div,
.couponBox table td div + div,
.forgotBox table td div + div {
  margin-top: 10px;
}

/* フォーム共通 */
.ttlULine {
  display: flex;
  justify-content: center;
  margin: 0 auto 40px;
  text-align: center;
}

@media screen and (max-width: 767.98px) {
  .ttlULine {
    margin: 0 auto 20px;
  }
}

.ttlULine > span {
  position: relative;
  padding-bottom: 4px;
  z-index: 1;
}

.ttlULine > span:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  margin: auto;
  background-color: #e6dccf;
  border-radius: 5px;
  line-height: 1;
  z-index: -1;
}

@media screen and (max-width: 767.98px) {
  .ttlULine > span:after {
    height: 6px;
  }
}

form input {
  padding: 5px;
}

/* 20180703ここから変更 */
form input[type="text"],
form input[type="tel"],
form input[type="email"],
form input[type="password"],
textarea {
  margin: 0;
  border: 1px solid #cdcdcd;
}

form input[type="tel"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="text"]:focus {
  /* background-color: #d5ffee; */
  background-color: #fbddd8;
  background-color: #fbddd8;
  outline: 0;
}

form input[type="tel"],
form input[type="email"],
form input[type="password"],
form input[type="text"] {
  margin: 5px;
  border-radius: 5px;
}

/* 20180703ここまで変更 */
form input:placeholder-shown {
  color: #a7a7a7;
}

form input::-webkit-input-placeholder {
  color: #a7a7a7;
}

form input::-moz-placeholder {
  color: #a7a7a7;
}

form input:-ms-input-placeholder {
  color: #a7a7a7;
}

form input.name,
input.zip {
  width: 230px;
}

form input.name:nth-child(1n) {
  margin-right: 2%;
}

form input.address,
form input.tel,
form input.mail,
form input.name_l,
form textarea.message {
  width: 540px;
}

form input.pass {
  width: 325px;
}

form input.mail:nth-child(n+2),
form input.pass:nth-child(n+2) {
  margin-top: 10px;
}

form textarea {
  width: 100%;
  height: 100px;
}

form td dl dt {
  display: inline-block;
  width: 20%;
  white-space: nowrap;
}

form td dl dd {
  display: inline-block;
  margin: 0;
  width: 79%;
}

form td dl dd input {
  margin: 5px 0;
}

.btnBox {
  margin: 40px 0 0;
  text-align: center;
}

form .btnBox .arrowBtn {
  margin: 5px;
}

.btnBox > p {
  display: inline-block;
}

a.btn {
  display: inline-block;
  border-radius: 3px;
  padding: 5px 20px;
  background: #F8F8F8;
  border: 1px solid #CCC;
  text-decoration: none;
  color: #353535;
}

.w45 {
  display: inline-block;
  width: 45px;
}

/* 入力例表示 */
form .ex {
  font-size: 1.4rem;
  display: block;
  color: #a18e78;
}

form .tb_name1 input.name,
form .tb_name2 input.name,
form .tb_name1 input.name_l,
form .tb_name2 input.name_l,
form .customer_id input.cregist_num,
form input.zip1,
form input.zip2,
form input.address,
form input.tel1,
form input.tel2,
form input.tel3,
form input.mail,
form input.pass,
form input.specifiedDate,
form .yymmdd .select-wrap,
form .tb_deliver .select-wrap,
form .contactBox textarea.message,
form .tb_sex label.radio:after,
form label.radio.credit:after,
form label.radio.transfer:after,
form label.radio.cash:after,
form label.radio.shortest:after,
form label.radio.specified:after,
form .tb_mailmag label.radio:after {
  background-color: #ffced6;
}

/* 必須項目入力済み */
form .tb_name1 input.name.done,
form .tb_name2 input.name.done,
form .tb_name1 input.name_l.done,
form .tb_name2 input.name_l.done,
form .customer_id input.cregist_num.done,
form input.zip1.done,
form input.zip2.done,
form input.address.done,
form input.tel1.done,
form input.tel2.done,
form input.tel3.done,
form input.mail.done,
form input.pass.done,
form input.specifiedDate.done,
form .yymmdd .select-wrap.done,
form .tb_deliver .select-wrap.done,
form .contactBox textarea.message.done,
form .tb_sex label.radio.done:after,
form label.radio.credit.done:after,
form label.radio.transfer.done:after,
form label.radio.cash.done:after,
form label.radio.shortest.done:after,
form label.radio.specified.done:after,
form .tb_mailmag label.radio.done:after {
  background-color: #ffffff;
}

form .yymmdd .select-wrap,
form .tb_deliver .select-wrap {
  position: relative;
  display: inline-block;
}

form .yymmdd .select-wrap::after,
form .tb_deliver .select-wrap::after,
form .tb_card .select-wrap::after {
  content: "";
  display: block;
  position: absolute;
  right: 7px;
  top: calc(50% - 5px);
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 7px 0 7px;
  border-color: #929292 transparent transparent transparent;
}

/* フォーム共通 エラー表示（右固定） */
form {
  position: relative;
}

form .errorBox {
  color: #fff;
  padding: 0 5px;
  position: fixed;
  right: 0;
  top: 50%;
  border: 1px solid #dedede;
  background: #f5f5f5;
  border-radius: 10px;
}

form .errorBox p {
  margin: 2px 0 2px 8px;
  color: #646464;
}

form .errorBox p span {
  font-weight: bold;
  color: #99001A;
}

/* エラー表示（入力欄下） */
form .errMsg {
  color: #ee001A;
  font-size: 1.8rem;
  font-weight: bold;
  display: block;
}

form .errMsgNone {
  display: none;
}

/* 入力ページ */
.contentsBox {
  margin-bottom: 40px;
}

.contentsBox .boxTtl {
  color: #313131;
  background: #e6dccf;
  margin: 0 0 30px;
  padding: 5px 20px;
}

.contentsBox p {
  letter-spacing: .02rem;
  margin: 0 0 20px 10px;
}

.contact .contentsBox .contactInfo {
  display: table;
  width: 100%;
}

.contact .contentsBox .contactInfo dt {
  display: table-cell;
  width: 50%;
}

.contact .contentsBox .contactInfo .phone {
  display: table-cell;
  width: 20%;
  font-size: 1.8rem;
  color: #a18e78;
}

.contact .contentsBox .contactInfo .time {
  display: table-cell;
  width: 30%;
}

@media screen and (max-width: 767px) {
  .contact .contentsBox .contactInfo dt {
    display: inline-block;
    width: 100%;
  }
  .contact .contentsBox .contactInfo .phone {
    display: inline-block;
    width: 100%;
  }
  .contact .contentsBox .contactInfo .time {
    display: inline-block;
    width: 100%;
  }
}

/* 確認ページ */
.confirm .contentsBox {
  text-align: left;
  padding-bottom: 20px;
  font-size: 1.6rem;
  letter-spacing: .05rem;
}

/* 完了ページ */
.complete .contentsBox {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: .05rem;
}

/* ============= 性別・メールマガジン・支払い方法　ラジオボタン ============= */
.tb_mailmag td,
.payBox td {
  line-height: 40px;
  /* ラジオボタンがあるtdの高さを調整 */
}

input[type=radio] {
  display: none;
  /* 標準スタイルを消す */
}

.radio {
  position: relative;
  padding: 0 0 0 30px;
  margin-right: 20px;
}

.radio.mag_yes {
  margin-right: 40px;
}

.radio:hover:after {
  border-color: #9E9E9E;
  /* ボックスの境界線を実線で指定する */
}

.radio:after,
.radio:before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
}

.radio:after {
  left: 0;
  margin-top: -8px;
  width: 18px;
  height: 18px;
  border: 1px solid #9E9E9E;
  background: #F1F2F4;
  border-radius: 50%;
}

.radio:before {
  left: 4px;
  margin-top: -4px;
  width: 10px;
  height: 10px;
  background: #9E9E9E;
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
}

input[type=radio]:checked + .radio:before {
  opacity: 1;
  /* 要素を表示する */
}

/* 支払い方法 */
.payBox .radio {
  position: relative;
  padding: 0 0 0 30px;
  margin-right: 20px;
}

.radio.credit:after,
.radio.transfer:after,
.radio.cash:after {
  left: 0px;
  /* 左から配置の基準位置を決める */
}

.radio.credit:before,
.radio.transfer:before,
.radio.cash:before {
  left: 5px;
  /* 左から配置の基準位置を決める */
}

/* 支払い方法クレジットカード利用促進 */
.payBox .balloon-wrap {
  margin: 5px 0 10px;
}

.payBox .balloon {
  position: relative;
  display: inline-block;
  background: #ffe8eb;
  border-radius: .5em;
  padding: 10px 15px;
  max-width: 100%;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
}

.payBox .balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -10px;
  border: 15px solid transparent;
  border-top: 15px solid #ffe8eb;
}

.payBox .balloon p {
  margin: 0;
  padding: 0;
}

.payBox .balloon p > span:after {
  content: '';
  background: url("/images/cart/ico_present_p.svg") no-repeat center center;
  padding-right: 30px;
}

.payBox .balloon p > span > span {
  color: #ff186a;
}

/* ============= 都道府県・生年月日・お届け先・カード情報・お届け時間　セレクト ============= */
table.tb_address td.area,
table.tb_yymmdd td.yymmdd,
table.tb_deliver td,
table.tb_card td.card,
table.tb_card td.expiration,
table.tb_card td.payments,
table.tb_delivdate td {
  line-height: 1em;
  /* セレクトボックスがあるtdの高さを調整 */
}

/* .tb_yymmdd td.yymmdd span {
	display: inline-block;
} */
.select-wrap {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background-color: #ffffff;
  /* background-image: url(../images/arrow_down.png);
  background-repeat: no-repeat;
  background-position: 90% center; */
  border: 1px solid #a0a0a0;
  color: #333;
  margin: 0 15px 0 0;
  padding-left: 5px;
  vertical-align: middle;
}

.select-wrap.area,
.select-wrap.yyyy,
.select-wrap.card_yy {
  width: 8em;
}

.select-wrap.mmdd {
  width: 6em;
  margin-left: 40px;
}

.select-wrap.card_mm {
  width: 6em;
  margin-left: 10px;
}

.select-wrap.deliver,
.select-wrap.card,
.select-wrap.payments,
.select-wrap.delivdate {
  width: 10em;
}

.select-wrap select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
  display: block;
  width: 200%;
  /* fallback non calc support */
  width: calc(100% + 5em);
  margin: 0 0 0 -.06rem;
  padding: 11px 35px 11px 11px;
  padding: .06875rem .21875rem .06875rem .1375rem;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 1.6rem;
  line-height: 1.3;
}

.entypo-down-open-mini:before {
  content: '';
  font-family: 'entypo', sans-serif;
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 12px;
  margin-top: -8px;
  font-size: 1.6rem;
  line-height: 1;
  color: #333;
}

table.tb_address .errMsg,
table.tb_deliver .errMsg {
  padding-left: 0;
  /* セレクトボックスの横のエラーメッセージのpadding-leftを調整 */
}

table.tb_card span {
  display: inline-block;
  width: 20%;
}

table.tb_card td.save span {
  display: inline-block;
  width: 25%;
  margin-left: 30px;
}

table.tb_card tr:nth-child(n+2) {
  margin-top: 10px;
}

.delivBox .deliv-cl {
  display: none;
}

.delivBox .deliv-cl.activ {
  display: table-row;
}

/* ============= カード情報の保持　チェックボックス ============= */
input[type=checkbox] {
  display: none;
  /* 標準スタイルを消す */
}

.checkbox {
  box-sizing: border-box;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

.checkbox:hover {
  background-color: #e2edd7;
}

.checkbox:hover:after {
  border-color: #9E9E9E;
}

.checkbox:after {
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 0px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #bbb;
  content: '';
}

.checkbox:before {
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 6px;
  display: block;
  margin-top: -7px;
  width: 5px;
  height: 9px;
  border-right: 3px solid #9E9E9E;
  border-bottom: 3px solid #9E9E9E;
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

input[type=checkbox]:checked + .checkbox:before {
  opacity: 1;
}

/* 郵便番号 */
.tb_zip input.zip1 {
  width: 100px;
}

.tb_zip input.zip2 {
  width: 120px;
}

.tb_address th {
  margin-top: 0;
  padding-top: 0;
}

.tb_address tr:nth-child(n+2) {
  margin-top: 10px;
}

/* 電話番号 */
.tb_tel input.tel1,
.tb_tel input.tel2,
.tb_tel input.tel3 {
  width: 120px;
}

@media screen and (max-width: 767px) {
  .tb_tel input.tel1,
  .tb_tel input.tel2,
  .tb_tel input.tel3 {
    width: 27%;
  }
}

/* ============= グリーンボタン ============= */
a.btn_g {
  display: inline-block;
  border-radius: 30px;
  padding: 12px 45px;
  background: #dceee7;
  border: none;
  text-decoration: none;
  color: #232323;
  font-size: 2rem;
  line-height: 1em;
  box-shadow: 0px 5px 0px #33a74e;
  cursor: pointer;
}

a.btn_g:nth-child(2n) {
  margin-left: 3%;
}

.btnBox p {
  display: block;
}

/* ============= 住所入力ボタン ============= */
a.input_adrs {
  border-radius: 20px;
  padding: 2px 12px;
  background: #ffffff;
  border: 1px solid #bababa;
  color: #353535;
  font-size: 1.6rem;
  line-height: 1em;
  margin-left: 15px;
  cursor: pointer;
}

/* ============= 個人情報の取扱について ============= */
.privacyPolicy {
  background: #F9F9F9;
  height: 180px;
  width: 90%;
  margin: 10px auto;
  padding: 15px 0 20px;
  overflow: auto;
  border: 1px solid #dedede;
}

.privacyPolicy .ttl {
  background: none;
  margin: 0 20px 10px;
  padding: 0;
  font-size: 1.7rem;
  font-weight: bold;
  color: #333333;
}

.privacyPolicy p {
  margin: 10px 20px;
}

.privacyPolicy dl {
  margin: 0 25px 10px;
  padding: 0;
}

.privacyPolicy dl dt {
  display: list-item;
  margin: 20px 0 5px 20px;
  padding: 0;
}

.privacyPolicy dl dd {
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------
 　■ カート
--------------------------------------------------------- */
/* カートに商品がないとき */
.cartBoxNone {
  text-align: center;
}

.cartBoxNone p {
  padding-top: 2%;
  font-size: 1.6rem;
  letter-spacing: .05rem;
}

/* カートに商品があるとき */
form .cartBox table th {
  height: 40px;
  background-color: #f5f5f5;
  border-top: none;
  border-bottom: none;
  border-left: dotted 1px #dedede;
  border-right: dotted 1px #dedede;
  text-align: center;
  font-size: 1.6rem;
  color: #353535;
  font-weight: normal;
  padding: 0px 10px;
  vertical-align: middle;
}

form .cartBox table th.delete {
  width: 10%;
  border-left: none;
}

form .cartBox table th.image,
form .cartBox table th.price,
form .cartBox table th.quantity {
  width: 15%;
}

form .cartBox table th.item {
  width: 30%;
}

form .cartBox table th.subtotal {
  width: 15%;
  border-right: none;
}

form .cartBox table td {
  border: none;
  text-align: left;
  font-size: 1.6rem;
  border: dotted 1px #dddddd;
  border-top: none;
  color: #353535;
  padding: 10px;
  vertical-align: middle;
}

form .cartBox table td:first-child {
  border-left: none;
}

form .cartBox table td:last-child {
  border-right: none;
}

form .cartBox table .pricetd {
  text-align: right;
}

form .cartBox table th.resulttd {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: dotted 1px #dddddd;
  text-align: right;
}

form .cartBox table td.pricetd {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: dotted 1px #dddddd;
}

form .cartBox table td.quantity {
  position: relative;
  text-align: right;
}

form .cartBox table td span {
  display: inline-block;
  margin-right: 10px;
}

form .cartBox table ul#quantity_level {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

@media screen and (max-width: 767.98px) {
  /* ---------------------------------------------------------
 　■ フォーム
--------------------------------------------------------- */
  form input[type="text"] {
    margin: 5px 0;
  }
  form table th,
  form table td {
    display: inline-block;
  }
  .loginBox,
  .registBox,
  .payBox,
  .cardBox,
  form .cartBox,
  .delivBox,
  .delivdateBox,
  .messageBox,
  .contactBox,
  .couponBox,
  .forgotBox {
    margin: 0 auto 30px;
    width: 100%;
  }
  .registBox table,
  .registBox table tbody,
  .registBox table tr,
  .registBox table th,
  .registBox table td {
    display: block;
  }
  .loginBox table,
  .registBox table,
  .payBox table,
  .cardBox table,
  form .cartBox table,
  .delivBox table,
  .delivdateBox table,
  .messageBox table,
  .contactBox table,
  .couponBox table,
  .forgotBox table {
    width: 100%;
    border-bottom: none;
  }
  .loginBox table th,
  .registBox table th,
  .payBox table th,
  .cardBox table th,
  form .cartBox table th,
  .delivBox table th,
  .delivdateBox table th,
  .messageBox table th,
  .contactBox table th,
  .couponBox table th,
  .forgotBox table th {
    width: 100%;
    padding: 5px 50px 5px 5px;
    border: none;
  }
  .loginBox table td,
  .registBox table td,
  .payBox table td,
  .cardBox table td,
  .cardBox table td.card,
  .delivBox table td,
  .delivdateBox table td,
  .messageBox table td,
  .contactBox table td,
  .couponBox table td,
  .forgotBox table td {
    width: 100%;
    padding: 5px 10px;
    border: none;
  }
  .w45 {
    width: 10%;
    margin-bottom: 5%;
  }
  .contentsBox {
    margin-bottom: 20px;
  }
  .contentsBox p {
    letter-spacing: 0;
    margin: 0 0 20px;
  }
  /* 欄外補足 */
  form aside {
    font-size: 1.2rem;
  }
  /* エラー表示（右固定） */
  form .errorBox {
    position: fixed;
    right: 5px;
    left: auto;
    bottom: 5px;
    top: auto;
  }
  .shopping.input form .errorBox {
    bottom: -35px;
  }
  /* エラー表示（入力欄下） */
  form .errMsg {
    padding-left: 0;
    font-size: 1.6rem;
  }
  form input.address,
  form input.tel,
  form input.mail,
  form input.pass,
  form input.name_l,
  form textarea.message,
  form td.message {
    width: 100%;
  }
  form input.name {
    width: 80%;
    max-width: 230px;
    margin: 0 0 5px;
  }
  form input.zip {
    width: 60%;
  }
  form .tb_tel input {
    margin: 0 0 5px;
  }
  form input.specifiedDate {
    width: 60%;
  }
  form .tb_tel .tel1,
  form .tb_tel .tel2,
  form .tb_tel .tel3 {
    width: 28%;
  }
  form .tb_name1 input.name,
  form .tb_name2 input.name,
  form .tb_name1 input.name_l,
  form .tb_name2 input.name_l {
    width: 47%;
  }
  form .btnBox .arrowBtn {
    width: 80%;
    /* min-width: 300px; */
    padding-right: 0;
    padding-left: 0;
    margin: 5px 0;
    cursor: pointer;
  }
  /* 完了ページ = = = = = = = = = = = = = = = = = */
  .complete .contentsBox {
    text-align: left;
  }
  /* ============= グリーンボタン ============= */
  a.btn_g {
    font-size: 1.8rem;
  }
  a.btn_g:nth-child(2n) {
    margin-top: 5%;
    margin-left: 3%;
  }
  /* ============= 性別・メールマガジン・支払い方法　ラジオボタン ============= */
  .radio {
    margin-right: 10%;
  }
  .radio.mag_yes {
    margin-right: 0px;
  }
  .tb_mailmag td label,
  .payBox td label {
    font-size: 1.5rem;
  }
  .tb_delivdate .radio.specified + input.specifiedDate[type=text] {
    margin-top: 10px;
  }
  /* ============= 都道府県・生年月日・お届け先・カード情報・お届け時間　セレクト ============= */
  table.tb_address td.area,
  table.tb_yymmdd td.yymmdd,
  table.tb_deliver td,
  table.tb_card td.expiration,
  table.tb_card td.payments,
  table.tb_card td.card {
    line-height: 1.5em;
    /* セレクトボックスがあるtdの高さを調整 */
  }
  .select-wrap {
    margin: 0 3% 0 0;
  }
  .tb_deliver .select-wrap {
    background-position: 95% center;
  }
  .select-wrap.area {
    width: 40%;
  }
  .select-wrap.yyyy {
    width: 22%;
  }
  .select-wrap.mmdd {
    width: 17%;
    margin-left: 4%;
  }
  .select-wrap.deliver {
    background-position: 95% center;
    width: 80%;
  }
  .select-wrap.card_yy {
    width: 30%;
  }
  .select-wrap.card_mm {
    width: 22%;
  }
  .select-wrap.payments,
  .select-wrap.delivdate {
    width: 70%;
  }
  table.tb_card tr {
    height: auto;
  }
  table.tb_card span {
    display: block;
    width: 100%;
  }
  form .tb_tel input[type=text] {
    width: 25%;
  }
  form .tr_card_num input[type=text] {
    width: 20%;
  }
  /* カートの中 */
  form .cartBox table th.delete,
  form .cartBox table th.image,
  form .cartBox table th.item,
  form .cartBox table th.price,
  form .cartBox table th.quantity,
  form .cartBox table th.subtotal {
    display: none;
  }
  form .cartBox table tr {
    border: solid 1px #dddddd;
    border-radius: 10px;
    margin-bottom: 10%;
  }
  form .cartBox table tr:first-child {
    border: none;
  }
  form .cartBox table td {
    width: 100%;
    border: none;
    text-align: center;
  }
  form .cartBox table td.quantity {
    padding: 8% 0;
  }
  form .cartBox table td span {
    left: 20%;
  }
  form .cartBox table ul#quantity_level {
    right: 35%;
  }
  form .cartBox table td.pricetd {
    text-align: center;
    border-bottom: none;
  }
  form .cartBox table tr.resulttr {
    border: solid 1px #dddddd;
  }
  form .cartBox table th.resulttd {
    border-bottom: dotted 1px #dddddd;
    border-radius: 9px 9px 0 0;
    text-align: center;
  }
  table.tb_card td.save span {
    width: 50%;
    display: inline-block;
  }
  /* === mypage 購入履歴詳細 === */
  .mypage.history.detail .cardBox table.shipping tr:first-child {
    background: #F5F5F5;
  }
  .mypage.history.detail .cardBox table.shipping tr:first-child th {
    float: left;
    width: auto;
    padding: 5px;
  }
  .mypage.history.detail .cardBox table.shipping tr:first-child th + th::before {
    content: " ";
    display: inline-block;
  }
  .mypage.history.detail .cardBox table.shipping tr td {
    text-align: right;
  }
  .mypage.history.detail .cardBox table.shipping tr td.pricetd:first-child {
    text-align: left;
  }
  .mypage.history.detail .cardBox table.shipping,
  .mypage.history.detail .cardBox table.shipping tr.p-goods {
    border-bottom: 1px solid #DDDDDD;
  }
  .mypage.history.detail .cardBox table.shipping tr.p-goods td:nth-child(2)::before {
    content: "単価：";
    display: inline-block;
    font-size: 1.2rem;
  }
  .mypage.history.detail .cardBox table.shipping tr.p-goods td:nth-child(3)::before {
    content: "数量：";
    display: inline-block;
    font-size: 1.2rem;
  }
  .mypage.history.detail .cardBox table.shipping tr.p-goods td:nth-child(4)::before {
    content: "小計：";
    display: inline-block;
    font-size: 1.2rem;
  }
  .mypage.history.detail .cardBox table.shipping tr.resulttr th,
  .mypage.history.detail .cardBox table.shipping tr.resulttr td {
    width: 50%;
    float: left;
    padding: 5px 20px 5px 5px;
  }
}

@media screen and (max-width: 460px) {
  a.btn_g:nth-child(2n) {
    margin-left: 0px;
  }
}

/* Utility
========================================================================== */
.visuallyHidden {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  white-space: nowrap;
  clip-path: inset(50%);
}

.span-br {
  display: inline-block;
}

.mt-0 {
  margin-top: 0;
}

.indent-half {
  text-indent: -.5em;
  margin-left: .5em;
}
/*# sourceMappingURL=base.css.map */