@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Mukta:wght@200;300;400;500;600;700;800&family=Sen:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Hind+Vadodara:wght@300;400;500;600;700&family=Mukta+Malar:wght@200;300;400;500;600;700;800&family=Mukta:wght@200;300;400;500;600;700;800&family=Sen:wght@400..800&family=Signika+Negative:wght@300..700&display=swap');
:root {
  --black: #141417;
  --white: #fff;
  --gray: #ddd;
  --green: #8aa727;
  --green2: #78931d;
  --green3: #1c5c13;
  --lightgreen: #dde6a1;
  --lightgreen2: #eaeec6;
  --orange: #f56100;
  --lightorange: #ffd897;
  --lightorange2: #fff2c8;
  --darkorange: #7c441f;
  --red: #ba2c14;
  --blue: #4472c4;
  --lightblue: #deebf7;
}
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
@supports not (min-block-size: 100dvb) {
  :where(html) {
    block-size: 100%
  }
}
@media (prefers-reduced-motion: no-preference) {
  :where(html: focus-within) {
    var(--red) scroll-behavior: smooth
  }
}
:where(a) {
  text-underline-offset: .2ex
}
:where(:focus-visible) {
  outline: 2px solid var(--focus-color, Highlight);
  outline-offset: 2px
}
:where(ul, ol) {
  list-style: none
}
:where(img, picture, svg) {
  max-inline-size: 100%;
  block-size: auto;
  vertical-align: middle
}
p {
  margin: 0 0 .5rem
}
p:last-child {
  margin: 0
}
a {
  color: #0368d9
}
a:hover {}
a:not([href]):not([tabindex]):focus {
  outline: 0
}
img {
  width: 100%
}
strong {
  font-weight: 600
}
h2 {
  margin-bottom: 2rem;
  color: var(--green2);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2
}
h2 span {
  display: block;
  font-size: 3.5vw
}
h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin-bottom: 1rem
}
h4 {
  font-size: 1.125rem
}
small {
  line-height: 1.4;
  display: inline-block;
  max-width:100%;
  font-weight: 200
}
.small_text {
  text-align: left;
}
details {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--gray);
  border-radius: .5rem
}
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  font-size: 1.125rem;
  font-weight: 500;
}
summary::marker {
  display: none;
}
summary::before {
  content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"  fill="%23ba2c14" class="bi bi-plus-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z"/></svg>');
  width: 1rem;
  height: 1rem;
  padding-right: .5rem;
  vertical-align: middle
}
details[open] summary::before {
  content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23ba2c14" class="bi bi-dash-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z"/></svg>')
}
@media (min-width:768px) {
  h2 {
    font-size: 1.6rem
  }
}
body {
  block-size: 100%;
  block-size: 100dvb;
  font: 300 1rem/1.7 "Noto Sans JP", sans-serif;
  background-color: var(--white);
  color: var(--black);
  text-align: left;
  -webkit-font-smoothing: antialiased
}
/* Header */
.header-top {
  margin-bottom: .5rem;
  display: flex;
  justify-content: space-between
}
.tel1 {
  display: none
}
.tel1 img {
  width: 300px
}
.tel2 {
  margin-bottom: 1rem;
  text-align: center
}
.tel2 img {
  width: 250px
}
.cap {
  padding: .3rem .8rem;
  display: inline-block;
  background-color: var(--green);
  font-size: .875rem;
  color: var(--white);
  font-weight: 200;
  line-height: 1;
  border-radius: 1rem
}
.nav-sub {
  display: none
}
h1 {
  line-height: .8;
  text-align: center;
  color: var(--red);
  font-size: 2.5rem;
  font-family: "Mukta", sans-serif;
  font-weight: 500;
  font-style: normal
}
h1 img {
  display: block;
  width: 120px
}
h1 span {
  display: block;
  font-size: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  letter-spacing: .1rem
}
.header-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center
}
header .container {
  padding-top: .5rem;
  padding-bottom: 1rem;
}
@media (min-width:910px) {
  header .container {
    background: url("/public/images/default/mypage/responsive/header-bg.jpg") no-repeat 260px bottom;
    background-size: 170px
  }
  h1 {
    font-size: 3.5rem
  }
  h1 span {
    font-size: 1.5rem
  }
  h1 img {
    width: 200px
  }
  .nav-sub {
    display: grid;
    grid-gap: 1rem;
    grid-auto-flow: column;
    justify-content: start;
    font-size: .875rem;
    font-weight: 400
  }
  .nav-sub2 {
    display: none
  }
  .tel1 {
    display: block
  }
  .tel2 {
    display: none
  }
}
/* Navi */
.humberger {
  margin-left: auto;
  border: none;
  display: block;
  height: 44px;
  position: relative;
  z-index: 10;
  width: 40px;
  background-color: transparent
}
.humberger.-active .humberger__line {
  background-color: transparent
}
.humberger.-active .humberger__line::before {
  top: 0;
  transform: rotate(45deg)
}
.humberger.-active .humberger__line::after {
  top: 0;
  transform: rotate(-45deg)
}
.humberger__line {
  display: block;
  height: 2px;
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  background-color: var(--black);
  transition: .4s
}
.humberger__line:before, .humberger__line:after {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  background-color: var(--black);
  transition: inherit
}
.humberger__line:before {
  top: -10px
}
.humberger__line:after {
  top: 10px
}
.header__nav-area {
  position: fixed;
  bottom: 0;
  left: -100%;
  z-index: 9;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  background-color: var(--white);
  transition: .4s
}
.header__nav-area.-active {
  left: 0;
  visibility: visible
}
.global-navigation {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 400
}
.global-navigation a {
  padding: .5rem 1rem;
  display: block;
  color: var(--black);
  text-decoration: none
}
.nav-sub2 a {
  padding: .2rem 1rem;
  display: block;
  color: var(--black)
}
.global-navigation li {
  height: 100%
}
.nav-btn {
  margin: 0 1rem
}
.nav-wrap {
  margin-bottom: .5rem;
  position: absolute;
  top: 2.5rem;
  right: 1rem
}
.header__nav-area .btn {
  margin: 1rem
}
@media (min-width:910px) {
  .header {
    height: auto;
    font-size: 1rem;
    display: flex;
    justify-content: center
  }
  .header-inner {
    padding-right: 2rem;
    padding-left: 2rem;
    height: 5rem;
    max-width: 1200px;
    width: 100%;
    justify-content: space-between
  }
  .header__nav-area {
    position: static;
    height: auto;
    width: auto;
    visibility: inherit;
    background-color: transparent
  }
  .nav-wrap {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--red);
    color: var(--white)
  }
  .humberger {
    display: none
  }
  .global-navigation {
    margin: 0;
    display: grid;
    grid-auto-flow: column;
    justify-content: stretch
  }
  .global-navigation a {
    padding: .8rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--white);
    line-height: 1.2
  }
  .global-navigation a:hover, .global-navigation a.cur {
    background-color: #611a0f
  }
  .global-navigation a span {
    display: block
  }
  .current-menu-item a::after, .global-navigation a:hover::after {
    content: "";
    width: 100%;
    position: absolute;
    bottom: 0
  }
  .header__nav-area .btn {
    margin: 0
  }
}
/*  */
.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
  max-width: 1200px;
  width: 100%
}
@media (min-width: 768px) {
  .container {
    padding-right: 2rem;
    padding-left: 2rem
  }
}
.content-topbar {
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .875rem
}
.breadcrumbs {
  display: none
}
li.breadcrumb-item {
  display: flex;
  align-items: center
}
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding-right: .5rem;
  font-size: 1rem;
  float: left
}
.user {
  padding-left: 1.5rem;
}
.logout-prompt {
  display: block
}
@media (min-width: 768px) {
  .logout-prompt {
    display: inline
  }
}
@media (min-width: 910px) {
  .breadcrumbs {
    display: grid;
    grid-gap: .5rem;
    grid-auto-flow: column;
    justify-content: start
  }
}
/* Footer */
footer {
  margin-top: 4rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: var(--green);
  color: var(--white)
}
footer a {
  color: var(--white);
  text-decoration: none
}
.footer-sitemap {
  display: grid;
  grid-gap: 3rem
}
.footer-sitemap dt {
  margin-bottom: .5rem;
  font-size: 1.5rem;
  font-weight: 600
}
.footer-sitemap dd {
  font-size: .875rem;
  line-height: 1.2
}
.footer-sitemap li {
  margin-bottom: .6rem
}
.footer-copyright {
  font-size: .875rem
}
.grid1 {}
.grid2 {
  display: grid;
  grid-gap: 3rem
}
.pagetop p {
  margin-top: 0.5rem;
  text-align: right;
}
.pagetop img {
  width: auto;
}
@media (min-width: 768px) {
  .grid2 {
    grid-template-columns: repeat(2, 1fr)
  }
  .footer-sitemap {
    grid-template-columns: 2fr 1fr
  }
  .pagetop {
    display: block
  }
}
input {
  border: none
}
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select {
  padding: .5rem .75rem;
  border: 1px solid var(--gray);
  display: block;
  width: 100%;
  font-size: 1rem;
  line-height: 1.5;
  background-clip: padding-box
}
input[type="radio"], input[type="checkbox"] {
  margin-right: .5rem
}
label {
  margin-bottom: .5rem;
  display: block;
  font-weight: 500
}
label span {
  font-size: .875rem;
  font-weight: 200
}
.list-radio li, .list-radio2 {
  display: flex;
  align-items: center;
  line-height: 2
}
.list-radio label, .list-radio2 label {
  font-weight: 400
}
.ui-datepicker {
  padding: 1rem;
  background-color: var(--white);
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .3)
}
.ui-state-default {
  text-decoration: none
}
.btn {
  padding: .8rem 1.2rem;
  background-color: var(--red);
  color: var(--white);
  border-radius: 3rem;
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  min-width: 8rem;
  text-decoration: none;
  letter-spacing: .1rem;
  cursor: pointer
}
.btn:hover {
  opacity: .8
}
.btn-s {
  padding: .4rem 1rem !important;
  min-width: 4rem;
  font-size: 1rem !important
}
.btn-green {
  background-color: var(--green)
}
.btn-orange {
  background-color: var(--orange)
}
.btn-l {
  font-size: 1.5rem;
  max-width: inherit;
}
@media  (max-width: 410px) {
  .btn-l {
    font-size: 5.5vw;
  }
}
.btn-print {
    display: none
}
.header-green .btn {
  border: 1px solid var(--white)
}
@media (min-width: 569px) {
  .btn {
    padding: .8rem 1.6rem;
    font-size: 1.2rem;
  }
}
@media (min-width: 768px) {
  label {
    margin-bottom: 0
  }
  .login-input label {
    margin-bottom: .5rem
  }
  input[type="tel"], input[type="password"] {
    max-width: 14rem
  }
    .btn-print {
    display: block
}
}
.box {
  margin-bottom: 1rem;
  padding: 2rem;
  border: 1px solid var(--gray);
  display: flex;
  flex-direction: column;
  align-items: center
}
.box h2 {
  color: #611a0f
}
.box2 {
  padding: 2rem;
  border: 1px solid var(--green)
}
.box2 .lead,
.box2 .note {
  font-size: 0.7rem;
}
@media (min-width: 576px) {
  .box2 .lead,
  .box2 .note {
    font-size: 0.9rem;
  }
}
.box3 {
  border: 1px solid var(--green)
}
.finish2 {
  margin-bottom: 2rem;
  color: var(--green);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .2rem;
  text-align: center
}
.finish2::before {
  content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="%238ba727" class="bi bi-check-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>');
  padding-right: 1rem;
  display: inline-block;
  vertical-align: middle
}
.back-top::before {
  content: "←";
  padding-right: .5rem
}
.btn-area {
  margin-top: 2rem;
  margin-right: auto;
  margin-left: auto;
  display: grid;
  grid-gap: 1rem;
  grid-auto-flow: column;
  justify-content: center;
  max-width: 34rem;
  width: 100%
}
.btn-area2 {
  text-align: center;
}
.btn-area2 div {
  margin-bottom: 1rem
}
.return {
  background-color: #b2884f
}
.table-design {
  border-bottom: 1px dotted var(--gray);
  display: grid;
  grid-gap: 1rem
}
.table-design:last-child {
  margin-bottom: 0;
  border: none
}
.table-design dt {
  background-color: #e7f2c0;
  font-weight: 500
}
.table-design dt span {
  padding: .1rem .4rem;
  background-color: red;
  font-weight: 200;
  color: var(--white);
  font-size: .7rem;
  border-radius: 1rem;
  line-height: 1;
  white-space: nowrap
}
.item-thumb img {
  width: 5rem;
  height: auto
}
.regular-itemnum strong {
  font-size: 2rem;
  font-weight: 600
}
.item-standard-amount {
  text-decoration: line-through
}
.item-discount-amount {
  color: var(--red);
  font-weight: 600
}
.item-discount-amount strong {
  font-size: 1.25rem
}
.output-set strong {
  font-size: 1.5rem;
  font-weight: 600
}
.output-set strong.allprice_tax_included {
  font-size: 1.25rem
}
@media (min-width: 768px) {
  .table-design {
    grid-template-columns: auto 1fr;
    align-items: center
  }
  .table-design dt {
    margin-right: 2rem
  }
}
/* Form */
textarea {
  width: 100%;
  height: 5rem
}
.list-disc {
  margin-left: 1rem;
  list-style: disc;
  text-align: left
}
.w-500 {
  margin: auto;
  max-width: 32rem !important;
  width: 100%
}
.w-800 {
  margin: auto;
  max-width: 800px !important;
  width: 100%
}
.w-900 {
  margin: auto;
  max-width: 900px !important;
  width: 100%
}
.align-center {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center
}
.cross-sell-img {
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: grid;
  grid-gap: 2rem
}
.cross-sell-img2 {
  max-width: 600px;
  width: 100%
}
.tantousha {
  background-color: #f7f2e5
}
.tantousha div {
  padding: 2rem
}
.regular-itemnum {
  margin-bottom: 1rem;
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  grid-gap: .5rem;
  align-items: end;
  line-height: 1
}
.display-between {
  display: flex;
  flex-direction: column
}
.grid11 {
  display: grid;
  grid-gap: 1rem
}
.grid11-bottom {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dotted var(--gray)
}
.information {
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--gray)
}
.information-responsive {
  margin-bottom: 4rem;
}
.mypage-title {
  padding: 15px 20px;
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  border-bottom: 5px solid #e3ddd3;
}
.title-line {
  padding-bottom: 7px;
  border-bottom: 3px solid #e3ddd3;
}
.mypage-title.is-bg {
  background: #faf7f2;
}
.mypage-title h2 {
  margin: 0;
}
.mypage-text {
  height: 100%;
  display: flex;
  align-items: center;
}
@media (max-width: 767.8px) {
  .mypage-text {
    font-size: .875rem;
  }
  .sp-fs10 {
    font-size: 1.0rem;
  }
}
.tap-pc {
  display: block;
}
.tap-sp {
  display: none;
}
@media (max-width: 768px) {
  .tap-pc {
    display: none;
  }
  .tap-sp {
    display: block;
  }
}
@media (min-width: 768px) {
  .display-between {
    flex-direction: row;
    justify-content: space-between;
    align-items: center
  }
  .grid11 {
    grid-template-columns: 1fr auto;
    align-items: center;
    grid-gap: 2rem
  }
  /*
  .cross-sell-img {
    grid-template-columns: repeat(2, 1fr)
  }
  */
  .home-cross-sell-img {
    grid-template-columns: 59% auto
  }
  .regular-itemnum {
    margin-bottom: 0;
    justify-content: flex-end
  }
}
@media (max-width: 767.9px) {
  .home-cross-sell-img {
    grid-template-columns: 60% auto;
    grid-gap: 7px
  }
}
.loginarea {
  padding-top: 1rem;
  border-top: 1px solid var(--gray)
}
.main-lead {
  margin-bottom: 2rem;
  padding: 2rem;
  border: 1px solid var(--gray)
}
.header-red {
  padding: 1rem 2rem;
  color: var(--white);
  background-color: var(--red)
}
.header-red div {
  font-size: .875rem;
  line-height: 1.4
}
.header-green {
  padding: 1rem;
  background-color: var(--green);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center
}
header h2 {
  margin: 0;
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 2
}
header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600
}
.header-green a {
  color: var(--white)
}
.header-orange {
  padding: 1rem;
  background-color: var(--orange);
  color: var(--white)
}
.input-field {
  margin-bottom: 1rem;
  width: 100%
}

@media (max-width: 768px) {
    .header-green.m-tate  {
  display: block
}
}
@media (min-width: 768px) {
  .loginarea {
    padding-top: 3rem
  }
  header h2 {
    font-size: 1.5rem
  }
  .header-red {
    display: flex;
    justify-content: space-between;
    align-items: center
  }
}
.mt-05 {
  margin-top: .5rem
}
.mt-1 {
  margin-top: 1rem
}
.mt-2 {
  margin-top: 2rem
}
.mt-23 {
  margin-top: 2.3rem
}
.mt-3 {
  margin-top: 3rem
}
.mt-4 {
  margin-top: 4rem
}
.mr-05 {
  margin-right: .5rem
}
.mr-1 {
  margin-right: 1rem
}
.mr-2 {
  margin-right: 2rem
}
.mr-3 {
  margin-right: 3rem
}
.mr-4 {
  margin-right: 4rem
}
.mb-05 {
  margin-bottom: .5rem
}
.mb-1 {
  margin-bottom: 1rem
}
.mb-2 {
  margin-bottom: 2rem
}
.mb-3 {
  margin-bottom: 3rem
}
.mb-4 {
  margin-bottom: 4rem
}
.mb-5 {
  margin-bottom: 5rem
}
.ml-05 {
  margin-left: .5rem
}
.ml-1 {
  margin-left: 1rem
}
.ml-2 {
  margin-left: 2rem
}
.ml-3 {
  margin-left: 3rem
}
.ml-4 {
  margin-left: 4rem
}
.w-10 {
  max-width: 10rem !important
}
.w-12 {
  max-width: 12rem !important
}
.w-20 {
  max-width: 20rem !important
}
.w-30 {
  max-width: 30rem !important
}
.text-green {
  color: var(--green)
}
.gap1 {
  display: grid;
  grid-gap: 1rem
}
.tab {
  display: grid;
  grid-template-columns: repeat(2, 1fr)
}
.tab li {
  padding: .6rem 0;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}
.tab_lev01 li {
  background-color: #482520;
  border-radius: 1rem 1rem 0 0;
  border-radius: 1rem 1rem 0 0;
  color: var(--white);
  text-align: center
}
.tab_lev01 li.active {
  background-color: var(--green)
}
.tabCtg {
  border-top: 6px solid var(--green)
}
.tabBrd {
  border-top: 6px solid var(--green)
}
.tab_lev02 {
  margin-top: 1rem;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: .5rem
}
.tab_lev02 li {
  border: 3px solid var(--gray);
  border-radius: 1rem
}
.tab_lev02 li.active {
  border: 3px solid var(--green);
  color: var(--green)
}
.tab_lev02.brd {
  grid-template-columns: repeat(4, 1fr)
}
.tab_lev02.brd li {
  font-size: 2.6vw
}
.tab_lev03 {
  margin-top: 1rem;
  grid-gap: 0.6rem;
  display: flex;
  justify-content: space-around
}
.tab_lev03 li {
  border-bottom: 3px solid var(--gray);
  width: 100%
}
.tab_lev03.brdcngn li { margin-bottom: 10px; width: 170px;}
.tab_lev03.brdesn li { margin-bottom: 10px; width: 215px;}
.tab_lev03 li i {
  width: 3rem;
  font-style: normal
}
.tab_lev03 li:nth-child(2) i, .tab_lev03 li:nth-child(4) i {
  width: 4rem
}
@media (max-width: 768px) {
  .tab_lev03.brdesn.over_six_columns li{
    font-size: 0.7rem;
  }
}
.tab_lev03 li.active {
  border-bottom: 3px solid var(--green);
  color: var(--green)
}
.tab_lev03 span {
  display: flex;
  align-items: center;
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: left center;
  height: 40px
}
.panel01, .panel02, .panel03 {
  display: none
}
.panel01.active, .panel02.active, .panel03.active {
  display: block
}
.itemArea {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem
}
.itemArea img:hover {
  opacity: .7
}
.item a {
  display: block
}
.item > a {
  border: 1px solid var(--gray);
  border-bottom: none
}
.itemArea .itemlink {
  display: grid;
  grid-auto-flow: column;
  font-size: .875rem
}
.tabCtg .tab_lev02 li.active img, .tab_lev03 li.active img {
  opacity: 0
}
@media (min-width: 569px) {
  .itemArea {
    grid-template-columns: repeat(3, 1fr)
  }
  .itemArea .itemlink {
    font-size: 1rem
  }
  .tab li {
    font-size: 1rem
  }
  .tab_lev01 li {
    font-size: 1.5rem
  }
  .tab_lev02 {
    margin-top: 2rem;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem
  }
  .tab_lev02.brd li {
    font-size: .875rem
  }
}
@media (min-width: 992px) {
  .tab li {
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: center .5rem
  }
	.tab li:nth-child(5) {
    background-size: 60px;
  }
	.tab li:nth-child(6) {
    background-size: 60px;
  }
  .tab_lev02 li {
    justify-content: end;
    height: 6rem
  }
  .tab.brdcngn li, .tab.brdesn li{
    background-size: 50px;
    display: flex;
    justify-content: end;
    height: 100px;
    line-height: 1.2
  }
  .tab_lev02.brd li {
    height: auto
  }
  .tab_lev02.brd {
    grid-template-columns: repeat(5, 1fr)
  }
  .tab_lev03 {
    grid-gap: 1rem;
  }
  .tab_lev03 span {
    padding-left: 46px
  }
  .itemArea {
    grid-template-columns: repeat(4, 1fr)
  }
  .tab_lev03 li i {
    width: auto !important
  }
}
.itemlink a {
  padding: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  font-weight: 600;
  line-height: 1;
  text-decoration: none
}
.itemlink a:hover {
  opacity: .8
}
.singleitem {
  background-color: var(--green);
}
.regularitem {
  background-color: var(--orange)
}
@media (min-width: 992px) {
  .singleitem::before, .regularitem::before {
    content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23fff" viewBox="0 0 24 24"><path d="m2.009 12.002c0-5.517 4.48-9.997 9.998-9.997s9.998 4.48 9.998 9.997c0 5.518-4.48 9.998-9.998 9.998s-9.998-4.48-9.998-9.998zm8.211-4.843c-.141-.108-.3-.157-.456-.157-.389 0-.755.306-.755.749v8.501c0 .445.367.75.755.75.157 0 .316-.05.457-.159 1.554-1.203 4.199-3.252 5.498-4.258.184-.142.29-.36.29-.592 0-.23-.107-.449-.291-.591z" fill-rule="nonzero"/></svg>');
    padding-right: .2rem;
    display: inline-block;
    vertical-align: text-top
  }
  .dog {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg02-1.png")
  }
  .active.dog {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg02-1_on.png")
  }
  .catoyatsu {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg02-2.png")
  }
  .active.catoyatsu {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg02-2_on.png")
  }
  .catoyatsu {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg02-2.png")
  }
  .active.catoyatsu {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg02-2_on.png")
  }
  .petcare {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg02-3.png")
  }
  .active.petcare {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg02-3_on.png")
  }
  .cake {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg02-4.png")
  }
  .active.cake {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg02-4_on.png")
  }
  .scoop {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg2-5.png")
  }
  .active.scoop {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg2-5_on.png")
  }
	.toy {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg2-6.png")
  }
  .active.toy {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg2-6_on.png")
  }
  .dryfood {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg03-1.png")
  }
  .active > .dryfood {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg03-1_on.png")
  }
  .wetfood {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg03-2.png")
  }
  .active > .wetfood {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg03-2_on.png")
  }
  .oyatsu {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg03-4.png")
  }
  .active > .oyatsu {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg03-4_on.png")
  }
  .soup {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg03c-3.png")
  }
  .active > .soup {
    background-image: url("/public/images/default/mypage/responsive/item/tab_ctg03c-3_on.png")
  }
  .dogdryfood {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-1.png")
  }
  .dogdryfood.active {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-1_on.png")
  }
  .dogwetfood {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-2.png")
  }
  .dogwetfood.active {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-2_on.png")
  }
  .dogtreat {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-6.png")
  }
  .dogtreat.active {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-6_on.png")
  }
  .catdryfood {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-3.png")
  }
  .catdryfood.active {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-3_on.png")
  }
  .catwetfood {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-4.png")
  }
  .catwetfood.active {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-4_on.png")
  }
  .cattreat {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-7.png")
  }
  .cattreat.active {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-7_on.png")
  }
  .catsoup {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-5.png")
  }
  .catsoup.active {
    background-image: url("/public/images/default/mypage/responsive/item/tab_brd03-5_on.png")
  }
}
.formBox01 {
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: var(--lightgreen2);
  border-radius: 1rem
}
.kagoregular .formBox01 {
  background-color: var(--lightorange2)
}
.formBox01 h2 {
  color: var(--green);
  font-size: 1.5rem;
  font-weight: 600
}
.kagoregular .formBox01 h2 {
  color: var(--orange)
}
.formBox01 h2 span {
  padding-left: .5rem;
  display: inline-block;
  font-size: 1rem
}
@media (max-width: 768px) {
  .formBox01 h2 span {
    display: block;
    margin-top: .7rem;
  }
}
.kagoBox {
  padding: 1rem;
  border: 6px solid var(--green);
  border-radius: 1rem
}
.kagoregular {
  border: 6px solid var(--orange)
}
.bg-wrap {
  margin-bottom: .5rem;
  display: flex;
  grid-gap: .5rem
}
.bg-green {
  padding: .3rem .5rem;
  background-color: var(--green);
  display: inline-block;
  color: var(--white);
  font-size: .875rem;
  border-radius: .3rem;
  line-height: 1
}
.bg-orange {
  padding: .3rem .5rem;
  background-color: var(--orange);
  display: inline-block;
  color: var(--white);
  font-size: .875rem;
  border-radius: .3rem;
  line-height: 1
}
.justify-between {
  display: grid;
  grid-gap: 1rem
}
.t-form01 {
  margin-bottom: 1rem;
  border-right: 1px solid var(--green);
  border-left: 1px solid var(--green);
}
.t-form01 div:last-child dd {
  border-bottom: none
}
.t-form01-petdate {
  margin-bottom: 0
}
.d-wrap dt {
  padding: 1rem;
  font-weight: 500;
  background-color: var(--lightgreen);
  color: var(--green3)
}
.d-wrap dd {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center
}
.formBox02 .t-form01 dt {
  background-color: var(--lightorange);
  color: var(--darkorange)
}
.d-wrap {
  border-bottom: 1px solid var(--green)
}
.t-form01b {
  margin-bottom: 0;
  border-bottom: none
}
.formBox02 .t-form01, .formBox02 .d-wrap {
  border-color: var(--orange)
}
.t-form02 {
  margin-bottom: 1rem;
  border: 1px solid var(--green);
  border-bottom: none;
  background-color: var(--white)
}
.kagoregular .t-form02 {
  border: 1px solid var(--orange)
}
.t-form02 dt {
  padding: .5rem;
  background-color: var(--lightgreen);
  font-weight: 600
}
.kagoregular .t-form02 dt {
  background-color: var(--lightorange)
}
.t-form02 dd {
  padding: .5rem 1rem;
  border-bottom: solid 1px var(--green)
}
.t-form02 div:last-child dd {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: .5rem;
  align-items: end
}
.t-form02 div:last-child dd select {
  max-width: 8rem
}
.item-data {
  display: grid;
  grid-gap: 1rem
}
.pricetotal {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dotted var(--gray)
}
.sec02 {
  padding: 1rem;
  border: 1px solid var(--orange);
  font-size: .875rem
}
@media (min-width: 768px) {
  .kagoBox, .formBox01 {
    padding: 2rem
  }
  .item-data {
    grid-template-columns: 5rem 1fr 6rem;
    align-items: center;
    grid-gap: 2rem
  }
  .justify-between {
    grid-template-columns: repeat(2, 1fr)
  }
  .d-wrap {
    display: grid;
    grid-template-columns: 13rem 1fr
  }
  .kaiyaku-box .d-wrap {
    grid-template-columns: 15rem 1fr
  }
  .t-form01-petdate .d-wrap {
    grid-template-columns: 21rem 1fr
  }
  .t-form02 {
    border-bottom: solid 1px var(--green);
    display: grid;
    grid-template-columns: 10rem 1fr 12rem 8rem
  }
  .t-form02 dd {
    border-bottom: none
  }
}
.chuumon {
  margin: 2rem auto 1rem;
  border: 2px solid var(--black);
  max-width: 600px
}
.chuumon header {
  padding: .5rem 2rem;
  background-color: var(--black);
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 600
}
.list-chuumon {
  padding: 1rem 2rem
}
.list-chuumon dl {
  font-size: 1.125rem;
  font-weight: 600
}
.list-chuumon div {
  display: flex;
  justify-content: space-between
}
.list-chuumon div:last-child {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--black)
}
.alnC {
  margin-bottom: 1rem;
  color: var(--darkorange);
  font-size: 1.3rem;
  font-weight: 600
}
.teiki-select {
  margin-bottom: 1rem;
  border: 3px solid var(--orange);
  background-color: var(--white)
}
.teiki-select header {
  margin-bottom: 1rem;
  padding: .5rem 1rem;
  background-color: var(--orange);
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 600
}
.teiki-select01, .teiki-select02 {
  padding-bottom: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  grid-gap: .5rem
}
.teiki-select01 dt, .teiki-select02 dt {
  font-weight: 600
}
/*
.teiki-select01 select {
  width: 8rem
}
*/
.teiki-select02 div {
  margin-bottom: .5rem;
  display: flex;
  grid-gap: .5rem
}
.teiki-select02 select {
  width: 13rem
}
@media (min-width: 768px) {
  .teiki-select02 label {
    display: flex;
    align-items: center;
    grid-gap: .5rem
  }
}
.tab-group {
  margin-top: 1rem
}
#tab-group {
  display: grid;
  grid-auto-flow: column;
  align-items: flex-end;
  width: 100%;
  color: var(--white);
  font-size: 4vw;
  font-weight: 600
}
#tab-group .tab {
  padding: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer
}
#tab-group .active {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem
}
#tab-group .inactive {}
#tab-group .tab-1 {
  border-top-left-radius: .5rem;
  background-color: var(--green)
}
#tab-group .tab-2 {
  border-top-right-radius: .5rem;
  background-color: var(--blue)
}
#tab-group .tab-1:hover, #tab-group .tab-2:hover {
  opacity: .9
}
@media (min-width: 576px) {
  #tab-group {
    font-size: 1.25rem
  }
}
.required {
  margin-left: .2rem;
  padding: .2rem .3rem;
  display: inline-block;
  font-size: .7rem;
  font-weight: 200;
  background-color: var(--red);
  color: var(--white);
  border-radius: 1rem;
  line-height: 1
}
.pet-header {
  padding: 1rem;
  border-right: 1px solid var(--green);
  border-left: 1px solid var(--green);
  font-size: 1.25rem;
  font-weight: 600;
  background-color: var(--lightblue);
  border-bottom: 3px solid var(--blue)
}
.birthlist {
  margin-bottom: .5rem;
  display: grid;
  grid-template-columns: 8rem 6rem 6rem;
  grid-gap: .5rem
}
.birthlist div {
  display: grid;
  grid-auto-flow: column;
  grid-gap: .5rem;
  align-items: self-end
}
.cardarea {
  margin-top: 2rem;
  padding: .6rem .8rem .6rem 4rem;
  border: 1px solid var(--red);
  border-radius: .5rem;
  line-height: 1.4;
  font-size: .875rem;
  position: relative;
  color: var(--red)
}
.cardarea::before {
  content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23e63737" width="32" height="32" viewBox="0 0 256 256"><g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"><path d="M 81.549 8.451 c -11.248 -11.25 -29.553 -11.25 -40.803 0 c -8.447 8.447 -10.786 21.129 -6.028 31.975 L 1.501 73.643 c -0.341 0.341 -0.547 0.793 -0.581 1.272 L 0.005 87.858 c -0.041 0.578 0.171 1.146 0.581 1.556 C 0.962 89.791 1.471 90 2 90 c 0.047 0 0.094 -0.002 0.141 -0.005 l 12.943 -0.915 c 0.48 -0.034 0.933 -0.24 1.273 -0.581 l 3.928 -3.929 c 0.304 -0.304 0.501 -0.696 0.564 -1.121 l 1.169 -7.903 l 7.887 -1.169 c 0.872 -0.129 1.556 -0.813 1.685 -1.686 l 1.168 -7.886 l 7.903 -1.169 c 0.425 -0.063 0.818 -0.261 1.122 -0.564 l 7.79 -7.79 c 10.849 4.758 23.528 2.419 31.975 -6.028 C 86.999 43.805 90 36.559 90 28.853 C 90 21.146 86.999 13.9 81.549 8.451 z M 73.869 25.908 c -2.7 2.7 -7.077 2.7 -9.777 0 s -2.7 -7.077 0 -9.777 s 7.077 -2.7 9.777 0 S 76.569 23.208 73.869 25.908 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"/></g></svg>');
  left: .8rem;
  position: absolute
}
.cardarea svg {
  background-color: var(--red);
  color: var(--red)
}
.yukoukigen {
  align-items: flex-end;
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  grid-gap: .5rem
}
.content-header {
  margin-bottom: 2rem
}
.img-reason02 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem
}
.box-reason dt {
  margin-left: 1.2rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #623518;
  color: var(--white);
  border-radius: .5rem;
  display: inline-block;
  position: relative
}
.box-reason dt:before {
  content: "";
  position: absolute;
  height: 1.3rem;
  width: 1.3rem;
  background-color: #623518;
  top: 1rem;
  left: -1.3rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%)
}
.box-reason dd span, .box-reason2 {
  margin-right: 1.3rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 2px solid var(--lightgreen);
  display: block;
  background-color: #fff9dc;
  border-radius: 1rem;
  position: relative
}
.box-reason dd span:before {
  content: "";
  position: absolute;
  height: 1.3rem;
  width: 1.3rem;
  background-color: var(--lightgreen);
  top: 1rem;
  right: -1.3rem;
  clip-path: polygon(0% 0, 100% 0, 0 100%)
}
.box-reason .t-form01 {
  border-top: 1px solid var(--green);
  border-bottom: 1px solid var(--green)
}
.box-reason .t-form01 div {
  display: grid;
  grid-template-columns: 6rem 1fr
}
.box-reason .t-form01 dt {
  margin: 0;
  padding: 1rem;
  border-bottom: 1px solid var(--green);
  background-color: var(--lightgreen);
  color: var(--green3);
  border-radius: 0;
}
.box-reason .t-form01 dt:before, .box-reason .t-form01 dd:before {
  position: static
}
.box-reason .t-form01 div:last-child dt {
  border-bottom: none
}
.box-reason .t-form01 dd {
  margin: 0;
  padding: 1rem;
  border: none;
  border-bottom: 1px solid var(--green);
  background-color: #fff9dc;
  border-radius: 0
}
.box-reason .t-form01 dd img {
  max-width: 15rem
}
.box-reason .t-form01 .list-seibun dt {
  padding: 0;
  border-bottom: none;
  background-color: transparent;
  color: var(--black);
  font-weight: 600;
  z-index: 9999
}
.box-reason .t-form01 .list-seibun dd {
  margin-bottom: .5rem;
  padding: 0;
}
.todokesaki {
  padding: 1rem;
  border-bottom: 1px dotted var(--gray);
  display: grid;
  grid-gap: .5rem;
  align-items: center
}
.todokesaki li:last-child {
  display: flex;
  grid-gap: .5rem
}
.todokesaki li span:first-child {
  display: inline-block;
  margin-right: 1rem;
}
.todokesaki.list-header {
  display: none;
}
.otodoke {
  display: block;
  font-size: .75rem;
  font-weight: 200;
  line-height: 1
}
.display-flex {
  display: flex;
  grid-gap: .5rem;
  align-items: self-end
}
.list-check li {
  color: var(--green);
  position: relative;
  font-weight: 500
}
.list-check li::before {
  content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%238aa727" class="bi bi-check-square-fill" viewBox="0 0 16 16"><path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm10.03 4.97a.75.75 0 0 1 .011 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.75.75 0 0 1 1.08-.022z"/></svg>');
  padding-right: .4rem;
  vertical-align: middle
}
.list-check li div {
  color: var(--black);
  font-weight: 200
}
@media (min-width: 768px) {
  .img-reason02 {
    grid-template-columns: auto;
    grid-auto-flow: column
  }
  .box-reason dd span {
    margin-right: 9rem
  }
  .todokesaki {
    grid-template-columns: 8rem 1fr 6rem 9rem;
  }
  .todokesaki.list-header {
    display: grid;
  }
  .todokesaki li span:first-child {
    display: none;
  }
  .box-reason dd, .box-reason2 {
    background-repeat: no-repeat;
    background-position: right top
  }
  .box-reason dd {
    min-height: 140px
  }
  .box-reason .list-seibun dd {
    min-height: auto
  }
  .box-reason-2-a {
    background-image: url("/public/images/default/mypage/responsive/regular-box-reason-bg01.png")
  }
  .box-reason-2-b {
    background-image: url("/public/images/default/mypage/responsive/regular-box-reason-bg03.png")
  }
  .box-reason-2-c {
    background-image: url("/public/images/default/mypage/responsive/regular-box-reason-bg02.png")
  }
  .box-reason-2-d {
    background-image: url("/public/images/default/mypage/responsive/regular-box-reason-bg04.png")
  }
  .box-reason .t-form01 .list-seibun dt {
    width: 13rem;
    text-align: right;
    float: left;
  }
}
table.list-reason02 {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0
}
.list-reason02 {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0
}
.list-reason02 th {
  padding: .5rem 0;
  border: 1px solid var(--green);
  width: 50%;
  text-align: center;
  background-color: var(--green);
  color: var(--white)
}
.list-reason02 td {
  padding: .5rem;
  border: 1px solid var(--green);
  text-align: center;
  background-color: var(--lightgreen)
}
.img-reason04 {
  margin: 1rem 0 2rem;
  text-align: center
}
.img-reason04-inner {
  padding: .2rem .5rem;
  background-color: var(--white);
  display: inline-block;
  border: 2px solid var(--green);
  border-radius: .3rem
}
.img-reason04-inner strong {
  color: var(--red)
}
.red {
    color: red
}

.edit-note {
  text-align: center;
  font-weight: bold;
}

@media (max-width: 569px) {
  .edit-note {
    text-align: left;
  }
}


.error:not(:empty) {
  color: red;
  font-size: .875rem;
  font-weight: 600;
  margin-top: .5rem;
  margin-bottom: .2rem;
}
.bold {
  font-weight: 600;
}
.text-center {
  text-align: center;
}
.text-break, .text-break-product {
  word-wrap: break-word;
  word-break: keep-all;
}
.text-break-price {
  display: block;
}
@media (max-width: 976px) and (min-width: 768px) {
  .text-break-product {
      word-break: break-all;
  }
}
.varRed {
  color: var(--red);
}