@charset "UTF-8";
/* ===============================
Base
=============================== */
a {
  transition: .35s; }

a:hover {
  transition: .35s; }

body {
  background: var(--color-bg);
  color: var(--color-font);
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.8;
  font-feature-settings: "palt";
  letter-spacing: 1px; }

footer {
  position: relative;
  background: var(--color-primary);
  color: var(--color-footer-font); }
  footer .copy {
    text-align: center;
    font-family: "helvetica-lt-pro", sans-serif; }

input {
  font-size: 0.8rem;
  color: var(--color-primary); }

input[type="text"] {
  border: 1px solid var(--color-secondary);
  padding: 8px 14px; }

input[type="select"] {
  border: 1px solid var(--color-secondary);
  padding: 8px 14px; }

input[type="date"] {
  border: 1px solid var(--color-secondary);
  padding: 8px 14px; }

input[type="number"] {
  border: 1px solid var(--color-secondary);
  padding: 8px 14px; }

input[type="password"] {
  border: 1px solid var(--color-secondary);
  padding: 8px 14px; }

input[type="email"] {
  border: 1px solid var(--color-secondary);
  padding: 8px 14px; }

input[type="tel"] {
  border: 1px solid var(--color-secondary);
  padding: 8px 14px; }

textarea {
  border: 1px solid var(--color-secondary);
  padding: 8px 14px; }

select {
  border: 1px solid var(--color-secondary);
  padding: 8px 14px; }

input[type="radio"] {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-secondary);
  border-radius: 50%;
  vertical-align: -2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

input[type="radio"]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #000;
  content: ''; }

textarea {
  border: 1px solid var(--color-secondary);
  padding: 4px 10px; }

.error {
  color: var(--color-accent-red);
  padding: 5px 0;
  font-size: 0.8rem;
  position: relative; }
  .error span {
    background: var(--color-accent-red);
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-family: "helvetica-lt-pro", sans-serif;
    width: 1.1rem;
    font-size: 0.8rem;
    line-height: 1.4;
    vertical-align: middle;
    display: table-cell;
    float: left;
    margin-top: 2px;
    margin-right: 5px; }

/* ===============================
Common UI
=============================== */
.section_ttl {
  font-size: 1.2rem;
  padding: 8% 0%; }

/* Button */
.link_btn {
  margin-bottom: 5%; }
  .link_btn a {
    position: relative;
    display: block;
    text-align: center;
    padding: 5% 0;
    border: 1px solid var(--color-primary); }
    .link_btn a::after {
      content: "›";
      position: absolute;
      right: 5%;
      top: 17%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
    .link_btn a:hover {
      background: var(--color-primary);
      color: #fff; }
  .link_btn button {
    position: relative;
    width: 100%;
    display: block;
    text-align: center;
    padding: 5% 0;
    border: 1px solid var(--color-primary); }
    .link_btn button::after {
      content: "›";
      position: absolute;
      right: 5%;
      top: 17%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
    .link_btn button:hover {
      background: var(--color-primary);
      color: #fff; }

.link_bbtn {
  margin-bottom: 5%; }
  .link_bbtn a {
    position: relative;
    width: 100%;
    display: block;
    text-align: center;
    padding: 5% 0;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff; }
    .link_bbtn a::after {
      content: "›";
      position: absolute;
      right: 5%;
      top: 17%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
    .link_bbtn a:hover {
      background: none;
      border: 1px solid var(--color-primary);
      color: var(--color-primary); }
  .link_bbtn button {
    position: relative;
    width: 100%;
    display: block;
    text-align: center;
    padding: 5% 0;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff; }
    .link_bbtn button::after {
      content: "›";
      position: absolute;
      right: 5%;
      top: 17%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
    .link_bbtn button:hover {
      background: none;
      border: 1px solid var(--color-primary);
      color: var(--color-primary); }

.section_read {
  margin-bottom: 5%; }

.copy-text-button {
  width: 100%;
  position: relative;
  text-align: center;
  display: block;
  padding: 5% 0;
  border: 1px solid var(--color-primary);
  transition: 0.35s; }
  .copy-text-button svg {
    position: absolute;
    right: -40%;
    top: 35%; }
  .copy-text-button:hover {
    background: var(--color-primary);
    color: #fff;
    transition: 0.35s; }
    .copy-text-button:hover svg {
      fill: #fff; }

.link_rbtn {
  text-align: center;
  margin-bottom: 5%; }
  .link_rbtn button {
    position: relative;
    width: 100%;
    display: block;
    text-align: center;
    padding: 5% 0;
    border: 1px solid var(--color-accent-red);
    background: var(--color-accent-red);
    color: #fff; }
    .link_rbtn button::after {
      content: "›";
      position: absolute;
      right: 5%;
      top: 17%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
    .link_rbtn button:hover {
      background: none;
      border: 1px solid var(--color-accent-red);
      color: var(--color-accent-red); }

/* ===============================
Status Label
=============================== */
.available {
  background: var(--color-primary);
  color: #fff; }

.rented {
  background: var(--color-accent-red);
  color: #fff; }

.reservation {
  background: var(--color-accent-green);
  color: #fff; }

.select {
  background: var(--color-primary);
  color: #fff; }

.overdue {
  background: var(--color-accent-red);
  color: #fff; }

.use {
  background: var(--color-accent-green);
  color: #fff; }

/* ===============================
Checkbox
=============================== */
.check {
  display: flex;
  align-items: center;
  gap: 8px; }
  .check label {
    cursor: pointer; }
  .check input {
    display: none; }
    .check input:checked + .checkmark {
      background: var(--color-primary);
      border-color: var(--color-primary); }
      .check input:checked + .checkmark::after {
        display: block; }
  .check .checkmark {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-primary);
    position: relative;
    cursor: pointer;
    background: var(--color-bg); }
    .check .checkmark::after {
      content: "";
      position: absolute;
      display: none;
      left: 5px;
      top: 1px;
      width: 5px;
      height: 10px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg); }

/* ===============================
Filter Menu
=============================== */
.filter_menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 90%;
  height: 100dvh;
  background: var(--color-bg);
  transform: translateX(-100%);
  transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2000;
  display: flex;
  flex-direction: column; }

.filter_menu.active {
  transform: translateX(0); }

.filter_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  z-index: 1000; }

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

.filter_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px; }

.filter_body {
  flex: 1;
  overflow-y: auto;
  padding: 0 5% 15% 5%; }
  .filter_body label {
    display: block; }
  .filter_body .check {
    display: flex;
    width: 100%; }
    .filter_body .check .checkmark {
      margin-left: auto; }
  .filter_body .txtsearch_box {
    position: relative; }
    .filter_body .txtsearch_box input {
      background: none;
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--color-accent-dgray);
      padding: 1rem 3rem 1rem 0; }
      .filter_body .txtsearch_box input:focus {
        outline: none;
        border-bottom: 1px solid var(--color-accent-dgray); }
    .filter_body .txtsearch_box .txtsearch_icon {
      position: absolute;
      right: 12px;
      top: 60%;
      width: 24px;
      height: 24px;
      transform: translateY(-50%);
      pointer-events: none; }
      .filter_body .txtsearch_box .txtsearch_icon .serch {
        fill: var(--color-font); }
  .filter_body .loan {
    border-bottom: 1px solid var(--color-accent-dgray); }
    .filter_body .loan ul {
      padding: 1.6rem 0; }
      .filter_body .loan ul li {
        margin-bottom: 0.8rem; }
        .filter_body .loan ul li:last-child {
          margin-bottom: 0; }
  .filter_body .accordion {
    border-top: none;
    margin-bottom: 15%;
    /* header */
    /* icon */
    /* content */ }
    .filter_body .accordion .accordion_item {
      border-bottom: 1px solid var(--color-accent-dgray);
      position: relative; }
      .filter_body .accordion .accordion_item:has(.accordion_toggle:checked) .accordion_content {
        grid-template-rows: 1fr;
        visibility: visible; }
      .filter_body .accordion .accordion_item:has(.accordion_toggle:checked) .accordion_header {
        color: var(--color-font-hover);
        padding-bottom: 8%; }
        .filter_body .accordion .accordion_item:has(.accordion_toggle:checked) .accordion_header .icon {
          transform: rotate(180deg); }
          .filter_body .accordion .accordion_item:has(.accordion_toggle:checked) .accordion_header .icon::after {
            transform: translateX(-50%) scaleY(0); }
    .filter_body .accordion .accordion_header {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: .3s;
      font-size: 0.9rem;
      padding: 1.6rem 0;
      color: var(--color-font); }
    .filter_body .accordion .icon {
      position: relative;
      width: 14px;
      height: 14px;
      transition: .35s; }
      .filter_body .accordion .icon::before, .filter_body .accordion .icon::after {
        content: "";
        position: absolute;
        background: var(--color-font); }
      .filter_body .accordion .icon::before {
        top: 50%;
        left: 0;
        width: 100%;
        height: 0.5px;
        transform: translateY(-50%);
        transition: .35s; }
      .filter_body .accordion .icon::after {
        left: 50%;
        top: 0;
        width: 0.5px;
        height: 100%;
        transform: translateX(-50%);
        transition: .35s; }
    .filter_body .accordion .accordion_content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .4s ease;
      visibility: hidden; }
      .filter_body .accordion .accordion_content .accordion_inner {
        overflow: hidden;
        min-height: 0; }
        .filter_body .accordion .accordion_content .accordion_inner .accordion_grid li {
          margin-bottom: 1rem; }
        .filter_body .accordion .accordion_content .accordion_inner .price_search {
          margin-bottom: 8%;
          background: none;
          width: 41%;
          border: none;
          border: 0.5px solid var(--color-font-hover);
          padding: .5rem 1rem .5rem 1rem;
          background: #fff; }
        .filter_body .accordion .accordion_content .accordion_inner .search_box {
          position: relative; }
          .filter_body .accordion .accordion_content .accordion_inner .search_box input {
            background: none;
            width: 100%;
            border: none;
            border-bottom: 1px solid var(--color-accent-dgray);
            padding: 1rem 3rem 1rem 0;
            color: var(--color-font); }
            .filter_body .accordion .accordion_content .accordion_inner .search_box input:focus {
              outline: none;
              border-bottom: 1px solid var(--color-accent-dgray); }
          .filter_body .accordion .accordion_content .accordion_inner .search_box .search_icon {
            position: absolute;
            right: 12px;
            top: 60%;
            width: 24px;
            height: 24px;
            transform: translateY(-50%);
            pointer-events: none; }
            .filter_body .accordion .accordion_content .accordion_inner .search_box .search_icon .serch {
              fill: var(--color-font); }
        .filter_body .accordion .accordion_content .accordion_inner .alphabet {
          padding: 1rem 0;
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 20px;
          white-space: nowrap;
          color: var(--color-font); }
          .filter_body .accordion .accordion_content .accordion_inner .alphabet button {
            background: none;
            border: none;
            cursor: pointer;
            transition: .35s;
            color: var(--color-font); }
            .filter_body .accordion .accordion_content .accordion_inner .alphabet button:hover {
              opacity: .5;
              transition: .35s;
              color: var(--color-font); }
  .filter_body .searchBtn {
    position: relative;
    display: block;
    text-align: center;
    padding: 15px 0;
    border: 1px solid var(--color-accent-dgray);
    transition: .35s;
    width: 100%;
    margin: 0 auto; }
  .filter_body .searchBtn:after {
    content: "›";
    position: absolute;
    right: 5%;
    top: 17%;
    font-size: 1.2rem; }
  .filter_body .searchBtn:hover {
    border: 0.5px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    transition: .35s; }
  .filter_body .clearBtn {
    width: 100%;
    text-align: center;
    padding: 15px 0; }

.filter_close {
  position: fixed;
  top: 19px;
  right: 20px;
  width: 40px;
  height: 18px;
  cursor: pointer;
  z-index: 2000; }
  .filter_close span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-primary);
    transition: .35s; }
    .filter_close span:nth-child(1) {
      top: 10px;
      transform: rotate(25deg); }
    .filter_close span:nth-child(2) {
      top: 10px;
      transform: rotate(-25deg); }

.product_filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5%; }
  .product_filter .filter_open {
    margin: 0;
    padding: 0; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center; }

.page_numbers {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0 5%; }

.page_numbers a {
  font-size: 0.9rem;
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  line-height: 1;
  margin: 0 1vw; }

.page_numbers li.active a {
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary); }

.page_arrow {
  font-size: 1.6rem;
  color: var(--color-primary);
  text-decoration: none;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }

.end {
  text-align: center;
  color: var(--color-font-hover); }

.required {
  color: var(--color-accent-red); }

@media screen and (max-width: 480px) {
  main {
    margin-bottom: 15%; }

  .w-md {
    width: 90%;
    margin: 0 auto 10% auto; }

  .w-lg {
    width: 90%;
    margin: 0 auto 10% auto; }

  .w-full {
    width: 100%; }

  body {
    font-size: 0.9rem; }

  .tab {
    display: none; }

  /* header */
  header {
    /* hamburger */
    /* menu */ }
    header .logo {
      padding: 4% 0;
      border-bottom: 1px solid var(--color-accent-dgray); }
      header .logo a {
        display: block;
        width: 20%;
        margin: 0 auto; }
    header .menu_btn {
      position: fixed;
      top: 2%;
      right: 5%;
      width: 40px;
      height: 18px;
      cursor: pointer;
      z-index: 2000; }
      header .menu_btn span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--color-primary);
        transition: .35s; }
        header .menu_btn span:nth-child(1) {
          top: 0; }
        header .menu_btn span:nth-child(2) {
          top: 8px; }
        header .menu_btn span:nth-child(3) {
          bottom: 0; }
    header #menu_toggle {
      display: none; }
    header #menu_toggle:checked + .menu_btn span:nth-child(1) {
      top: 10px;
      transform: rotate(25deg);
      background: var(--color-secondary); }
    header #menu_toggle:checked + .menu_btn span:nth-child(2) {
      opacity: 0; }
    header #menu_toggle:checked + .menu_btn span:nth-child(3) {
      top: 10px;
      transform: rotate(-25deg);
      background: var(--color-secondary); }
    header #menu_toggle:checked ~ .global_menu {
      right: 0; }
    header .global_menu {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100vh;
      background: var(--color-primary);
      overflow-y: auto;
      transition: 0.45s cubic-bezier(0.76, 0, 0.24, 1);
      z-index: 1500;
      padding-bottom: 25%; }
      header .global_menu a {
        color: #fff; }
      header .global_menu .accordion {
        margin: 0 5%; }
      header .global_menu .sns {
        display: flex;
        justify-content: space-between;
        width: 20%;
        padding: 0 0 15% 5%; }
        header .global_menu .sns li {
          width: 38%; }
          header .global_menu .sns li a {
            display: block;
            background: var(--color-font-hover);
            border-radius: 100%;
            padding: 23%; }
            header .global_menu .sns li a:hover {
              background: #fff; }
      header .global_menu .otherLink {
        padding: 8% 5%; }
        header .global_menu .otherLink li a {
          display: block;
          padding: 1% 0;
          font-size: .8rem; }
          header .global_menu .otherLink li a:hover {
            color: var(--color-font-hover); }
      header .global_menu .loginArea {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15%; }
        header .global_menu .loginArea a {
          display: block;
          width: 49.9%;
          text-align: center;
          background: #fff;
          color: var(--color-font);
          font-size: .7rem;
          padding: 3% 0; }
          header .global_menu .loginArea a .icon {
            fill: var(--color-font);
            width: 14%;
            margin: 0 auto; }
          header .global_menu .loginArea a:hover {
            background: var(--color-font-hover); }
    header .under_menu {
      position: fixed;
      bottom: 0;
      display: flex;
      z-index: 100;
      border-top: 1px solid var(--color-accent-dgray);
      opacity: 0;
      transform: translateY(30px);
      animation: under_men .6s ease forwards; }
      header .under_menu li {
        width: 20%;
        position: relative; }
        header .under_menu li a {
          display: block;
          background: var(--color-primary);
          color: var(--color-bg);
          font-size: 2.6vw;
          text-align: center;
          padding: 14% 0; }
          header .under_menu li a .icon {
            width: 30%;
            margin: 0 auto; }
          header .under_menu li a .icn {
            fill: var(--color-bg); }
      header .under_menu li::after {
        content: "";
        width: 0.5px;
        height: 100%;
        background: var(--color-bg);
        position: absolute;
        right: 0;
        top: 0; }
      header .under_menu li:last-child a {
        background: var(--color-accent-gold); }
      header .under_menu li:last-child::after {
        width: 0px; }
  @keyframes under_men {
    0% {
      opacity: 0;
      transform: translateY(30px); }
    100% {
      opacity: 1;
      transform: translateY(0); } }
    header .txtsearch_box {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      border-bottom: 1px solid var(--color-accent-dgray); }
      header .txtsearch_box input {
        flex: 1;
        border: none;
        outline: none;
        padding: 10px 20px;
        background: var(--color-bg); }
      header .txtsearch_box input::placeholder {
        color: var(--color-font-hover); }
    header .txtsearch_btn {
      width: 18%;
      height: 100%;
      border: none;
      background: var(--color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 11px 0; }
      header .txtsearch_btn svg {
        width: 22px;
        height: 22px;
        fill: var(--color-font-hover);
        margin-top: 2px; }
      header .txtsearch_btn p {
        display: none; }

  .nav .news {
    text-align: center;
    background: var(--color-secondary);
    padding: 2% 5%;
    margin-bottom: 6%;
    font-size: 0.8rem; }
  .nav .desktop_nav {
    display: none; }

  /* footer */
  footer {
    position: relative;
    width: 100%;
    font-size: .8rem;
    padding: 12% 0 20% 0; }
    footer .sns {
      display: flex;
      justify-content: space-between;
      width: 18%;
      position: absolute;
      right: 5%;
      top: 4%; }
      footer .sns li {
        width: 38%; }
        footer .sns li a {
          display: block;
          background: var(--color-font-hover);
          border-radius: 100%;
          padding: 23%; }
          footer .sns li a:hover {
            background: #fff; }
    footer .copy {
      font-size: .8rem; }
    footer .information {
      margin: 0 5% 8%; }
      footer .information h2 {
        width: 30%;
        margin-bottom: 12%; }
      footer .information dl {
        margin-bottom: 5%; }
        footer .information dl dt {
          font-weight: 600;
          font-size: .9rem;
          margin-bottom: 2%; }
        footer .information dl:last-child {
          margin-bottom: 0; }
    footer nav {
      margin: 0 5%; }
    footer .otherLink {
      padding: 8% 0; }
      footer .otherLink li a {
        display: block;
        padding: 1% 0; }
        footer .otherLink li a:hover {
          color: var(--color-font-hover); }
    footer .loginArea {
      display: flex;
      justify-content: space-between;
      margin-bottom: 3%; }
      footer .loginArea a {
        display: block;
        width: 49.9%;
        text-align: center;
        background: #fff;
        color: var(--color-font);
        font-size: .7rem;
        padding: 3% 0; }
        footer .loginArea a .icon {
          fill: var(--color-font);
          width: 14%;
          margin: 0 auto; }
        footer .loginArea a:hover {
          background: var(--color-font-hover); }

  #check_btn {
    display: none; }

  .label_btn {
    display: none; }

  .wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease; }

  .content {
    overflow: hidden;
    opacity: 0;
    transform: translateY(-20px);
    transition: 0.4s ease; }

  .ttlarea {
    padding: 10% 0; }

  /*product_list*/
  .product_list .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 8%; }
  .product_list .sort {
    position: relative; }
  .product_list .sort_btn {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-primary); }
  .product_list .arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg); }
  .product_list .sort_menu {
    position: absolute;
    top: 60px;
    right: 0;
    width: 240px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    display: none;
    z-index: 10; }
    .product_list .sort_menu li {
      padding: 12px 20px;
      cursor: pointer; }
    .product_list .sort_menu li:hover {
      background: #f3f3f3; }
    .product_list .sort_menu li.active {
      font-weight: bold; }
  .product_list .sort_menu.show {
    display: block; }

  .product-card .img {
    position: relative; }
  .product-card .img img {
    width: 100%;
    display: block; }
  .product-card .badge {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-accent-red);
    color: #fff;
    padding: 2vw 5vw 6vw 1vw;
    font-size: 0.6rem;
    clip-path: polygon(0 0, 100% 0, 0 100%); }
  .product-card .info {
    line-height: 1.5;
    padding: 8% 0; }
    .product-card .info h3 {
      margin-bottom: 3%; }
    .product-card .info p {
      margin-bottom: 3%; }
    .product-card .info .brand {
      font-size: 0.9rem;
      font-family: "helvetica-lt-pro", sans-serif;
      margin-bottom: 0; }
    .product-card .info .name {
      font-size: 0.7rem; }
    .product-card .info .price {
      font-size: 0.9rem;
      font-family: "helvetica-lt-pro", sans-serif; }
      .product-card .info .price span {
        font-size: 0.7rem;
        margin-left: 0.3rem; }
    .product-card .info .number {
      font-size: 0.7rem;
      color: var(--color-font-hover);
      font-family: "helvetica-lt-pro", sans-serif; }
  .product-card .image-grid {
    margin-bottom: 3%;
    display: grid;
    grid-template-columns: 2.05fr 1fr;
    gap: 5px;
    aspect-ratio: 4 / 3; }
  .product-card .sub-imgs {
    display: grid;
    gap: 5px; }
  .product-card .name {
    font-size: 1.0rem; }
  .product-card .date {
    font-size: 0.9rem; }
  .product-card .date {
    font-size: 0.9rem; }
  .product-card .count {
    font-size: 0.7rem;
    color: var(--color-font-hover);
    position: relative; }
    .product-card .count span {
      position: absolute;
      right: 0; }
  .product-card a {
    display: block; }
  .product-card .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .product-card .orderdate {
    font-size: 1.0rem;
    font-family: "helvetica-lt-pro", sans-serif;
    margin-bottom: 2%; }
  .product-card .status {
    font-size: 0.6rem;
    padding: 4px 8px 2px 8px; }
  .product-card .info-box {
    display: flex;
    justify-content: space-between;
    line-height: 1.5; }
    .product-card .info-box .price {
      font-size: 0.8rem;
      font-family: "helvetica-lt-pro", sans-serif; }

  .product-box {
    padding-top: 10%; }
    .product-box .product_gallery {
      display: grid;
      grid-template-columns: 1fr 13vw;
      gap: 8px;
      margin-bottom: 5%; }
    .product-box .gallery_nav {
      display: block;
      flex-direction: column;
      gap: 15px;
      z-index: 10; }
      .product-box .gallery_nav .flickity-viewport {
        display: block;
        height: 100% !important;
        overflow: visible; }
      .product-box .gallery_nav .flickity-slider {
        position: static !important;
        transform: none !important;
        display: flex;
        flex-direction: column;
        gap: 0px; }
      .product-box .gallery_nav .nav_cell {
        cursor: pointer;
        touch-action: manipulation;
        position: static !important; }
    .product-box .gallery_main {
      flex: 1;
      z-index: 1;
      position: relative; }
    .product-box .nav_cell {
      cursor: pointer;
      margin-bottom: 8px;
      touch-action: manipulation;
      display: flex;
      flex-direction: column;
      width: 100% !important;
      transform: none !important; }
      .product-box .nav_cell img {
        width: 100%;
        display: block;
        opacity: .4;
        transition: .3s; }
    .product-box .nav_cell.is-nav-selected img {
      opacity: 1;
      border: 2px solid var(--color-primary);
      box-sizing: border-box; }
    .product-box .gallery_main {
      position: relative; }
    .product-box .badge {
      position: absolute;
      top: 0;
      left: 0;
      background: var(--color-accent-red);
      color: #fff;
      padding: 2vw 5vw 6vw 1vw;
      font-size: 0.6rem;
      clip-path: polygon(0 0, 100% 0, 0 100%); }
    .product-box .info {
      line-height: 1.5;
      margin-bottom: 2%; }
      .product-box .info h3 {
        margin-bottom: 3%; }
      .product-box .info p {
        margin-bottom: 3%; }
      .product-box .info .brand {
        font-size: 1.5rem;
        font-family: "helvetica-lt-pro", sans-serif;
        margin-bottom: 0; }
      .product-box .info .name {
        font-size: 0.8rem;
        margin-bottom: 4%; }
      .product-box .info .price {
        font-size: 1.1rem;
        font-family: "helvetica-lt-pro", sans-serif;
        margin-bottom: 0; }
        .product-box .info .price span {
          font-size: 0.7rem;
          margin-left: 0.3rem; }
      .product-box .info .number {
        font-size: 0.7rem;
        font-family: "helvetica-lt-pro", sans-serif;
        color: var(--color-font-hover);
        margin-bottom: 0; }
    .product-box .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8%; }
    .product-box .status {
      font-size: 0.6rem;
      padding: 2px 8px;
      margin-right: 1.0rem; }
    .product-box .actions {
      margin-bottom: 20%; }
      .product-box .actions .cart_btn {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 5% 0;
        border: 1px solid var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        transition: .35s;
        margin-bottom: 5%; }
      .product-box .actions .cart_btn::after {
        content: "›";
        position: absolute;
        right: 5%;
        top: 17%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .product-box .actions .cart_btn:hover {
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        background: var(--color-bg);
        transition: .35s; }
      .product-box .actions .bookmark_btn {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 5% 0;
        border: 1px solid var(--color-primary);
        transition: .35s; }
      .product-box .actions .bookmark_btn::after {
        content: "›";
        position: absolute;
        right: 5%;
        top: 17%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .product-box .actions .bookmark_btn:hover {
        border: 1px solid var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        transition: .35s; }
    .product-box .tags h3 {
      margin-bottom: 5%; }
    .product-box .tags .tag_list {
      display: flex;
      flex-wrap: wrap;
      gap: 2vw; }
      .product-box .tags .tag_list a {
        padding: 2vw 4vw;
        background: #fff;
        font-size: 0.7rem; }
    .product-box .detail {
      font-size: 0.8rem;
      margin-bottom: 15%; }

  .product_relateditem {
    background: var(--color-secondary);
    padding: 3% 0% 2% 0%; }
    .product_relateditem h2 {
      margin-bottom: 3%; }
    .product_relateditem .horizontal-scroll {
      display: flex;
      overflow-x: auto;
      gap: 5vw;
      margin-bottom: 12%;
      padding-bottom: 5%;
      scroll-behavior: smooth;
      cursor: grab;
      user-select: none;
      position: relative;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--color-font-hover); }
      .product_relateditem .horizontal-scroll a {
        webkituser-drag: none; }
      .product_relateditem .horizontal-scroll img {
        -webkit-user-drag: none; }
    .product_relateditem .horizontal-scroll::-webkit-scrollbar {
      height: 2px; }
    .product_relateditem .horizontal-scroll::-webkit-scrollbar-track {
      background: var(--color-font-hover); }
    .product_relateditem .horizontal-scroll::-webkit-scrollbar-thumb {
      background: var(--color-font-hover); }
    .product_relateditem .horizontal-scroll:active {
      cursor: grabbing; }
    .product_relateditem .horizontal-scroll::-webkit-scrollbar {
      height: 2px;
      width: 20px;
      background: var(--color-font-hover); }
    .product_relateditem .horizontal-scroll::-webkit-scrollbar-thumb {
      background: var(--color-primary); }
    .product_relateditem .product-card {
      flex: 0 0 34vw;
      flex-shrink: 0;
      scroll-snap-align: start; }
      .product_relateditem .product-card a {
        display: block; }

  .backbtn {
    padding: 5% 0 15% 0; }
    .backbtn a {
      position: relative;
      display: block;
      text-align: center;
      padding: 5% 0; }
      .backbtn a::after {
        content: "›";
        position: absolute;
        right: 20%;
        top: 17%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }

  /* bookmark */
  .bookmark {
    width: 16px;
    height: 20px;
    background-color: var(--color-primary);
    position: relative;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 75%, 0% 100%);
    transition: .35s; }
    .bookmark::after {
      content: "";
      position: absolute;
      top: 1px;
      left: 1px;
      right: 1px;
      bottom: 1.5px;
      background-color: var(--color-bg);
      /* 中の背景色 */
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 75%, 0% 100%); }
    .bookmark:hover::after {
      background-color: var(--color-primary);
      transition: .35s; }

  .bookmark.active::after {
    background-color: var(--color-primary);
    transition: .35s; }

  /*index*/
  .top_tabs {
    display: none; }

  .top_search {
    margin-bottom: 10%; }
    .top_search .search_links {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5%; }
    .top_search .search_box {
      display: block;
      padding: 8% 0;
      border-bottom: 1px solid var(--color-font-hover);
      position: relative; }
    .top_search .search_box::after {
      content: "›";
      position: absolute;
      right: 0;
      top: 15%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
    .top_search .search_box:hover {
      color: var(--color-font-hover); }

  .top_slider {
    overflow: hidden;
    margin-bottom: 18%; }
    .top_slider h2 {
      padding: 8% 5%; }
    .top_slider .swiper {
      width: 100%;
      position: relative;
      padding-bottom: 15%; }
    .top_slider .slider-wrapper {
      height: auto;
      position: relative; }
    .top_slider .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center; }
    .top_slider .swiper-button-prev::after, .top_slider .swiper-button-next::after {
      display: none; }
    .top_slider .swiper-button-prev, .top_slider .swiper-button-next {
      width: 20px;
      height: 20px;
      top: auto;
      bottom: 0;
      color: var(--color-primary); }
    .top_slider .swiper-button-prev::before,
    .top_slider .swiper-button-next::before {
      content: "";
      display: block;
      width: 2vw;
      height: 2vw;
      border-top: 1px solid var(--color-primary);
      border-right: 1px solid var(--color-primary); }
    .top_slider .swiper-button-prev::before {
      transform: rotate(-135deg); }
    .top_slider .swiper-button-next::before {
      transform: rotate(45deg); }
    .top_slider .swiper-pagination {
      margin: 0px auto 0 auto;
      display: flex;
      justify-content: center; }
    .top_slider .swiper-pagination-bullet {
      width: 5vw;
      height: 2px;
      background: #ccc;
      opacity: 1;
      border-radius: 0; }
    .top_slider .swiper-pagination-bullet-active {
      background: var(--color-primary); }

  .top_booknark {
    margin-bottom: 22%; }
    .top_booknark .horizontal-scroll {
      display: flex;
      overflow-x: auto;
      gap: 5vw;
      margin-bottom: 10%;
      padding-bottom: 8%;
      scroll-behavior: smooth;
      cursor: grab;
      user-select: none;
      position: relative;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--color-font-hover); }
      .top_booknark .horizontal-scroll a {
        -webkit-user-drag: none; }
      .top_booknark .horizontal-scroll img {
        -webkit-user-drag: none; }
    .top_booknark .horizontal-scroll::-webkit-scrollbar {
      height: 2px; }
    .top_booknark .horizontal-scroll::-webkit-scrollbar-track {
      background: var(--color-font-hover); }
    .top_booknark .horizontal-scroll::-webkit-scrollbar-thumb {
      background: var(--color-font-hover); }
    .top_booknark .horizontal-scroll:active {
      cursor: grabbing; }
    .top_booknark .horizontal-scroll::-webkit-scrollbar {
      height: 2px;
      width: 20px;
      background: var(--color-font-hover); }
    .top_booknark .horizontal-scroll::-webkit-scrollbar-thumb {
      background: var(--color-primary);
      background: var(--color-primary); }
    .top_booknark .product-card {
      flex: 0 0 34vw;
      flex-shrink: 0;
      scroll-snap-align: start; }

  .top_category {
    margin-bottom: 30%; }
    .top_category .category_grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4% 4%; }
      .top_category .category_grid .icn {
        width: 15vw;
        height: 15vw;
        margin: auto;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center; }
        .top_category .category_grid .icn img {
          width: 60%; }
      .top_category .category_grid a {
        display: block; }
      .top_category .category_grid li {
        text-align: center;
        font-size: 2.4vw; }
      .top_category .category_grid p {
        padding-top: 10%; }

  .top_color {
    margin-bottom: 30%; }
    .top_color .color_grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4% 4%; }
      .top_color .color_grid .icn {
        width: 8vw;
        height: 8vw;
        margin: auto;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center; }
        .top_color .color_grid .icn img {
          width: 100%; }
      .top_color .color_grid a {
        display: block; }
      .top_color .color_grid li {
        text-align: center;
        font-size: 2.4vw; }
      .top_color .color_grid p {
        padding-top: 10%; }

  .top_newitem {
    margin-bottom: 18%; }
    .top_newitem .product-card {
      width: 46%;
      margin-bottom: 12%; }

  /*.top_goods{padding: 0% 5%;margin-bottom: 18%;
    .accordion_goods {border-top: 1px solid var(--color-accent-dgray);margin-bottom: 15%;padding-bottom: 10%;
      a{transition: .35s;}
      a:hover{transition: .35s;}
      .accordion_goods_item {
        border-top: 1px solid var(--color-accent-dgray);
        position: relative;
        &:has(.accordion_goods_toggle:checked) {
          .accordion_goods_content {grid-template-rows: 1fr;visibility: visible;}
          .accordion_goods_header {color: var(--color-font-hover);padding-bottom: 8%;
            .icon {transform: rotate(180deg);
              &::after {
                transform: translateX(-50%) scaleY(0);
              }
            }
          }
        }
      }
      .accordion_goods_toggle {position: absolute;width: 100%;height: 100%;opacity: 0;cursor: pointer;z-index: 2;top: 0;left: 0;
        &:checked ~ .accordion_goods_header {color: var(--color-font);}
        &:checked ~ .accordion_goods_header .icon {transform: rotate(180deg);}
        &:checked ~ .accordion_goods_header .icon::after {transform: translateX(-50%) scaleY(0);}
      }
      .accordion_goods_header {position: relative;display: flex;justify-content: space-between;align-items: center;transition: .3s;font-size: 0.8rem;padding: 1.6rem 0;}
      .icon {position: relative;width: 14px;height: 14px;transition: .35s;
        &::before,&::after {content: "";position: absolute;background: var(--color-font);}
        &::before {top: 50%;left: 0;width: 100%;height: 0.5px;transform: translateY(-50%);transition: .35s;}
        &::after {left: 50%;top: 0;width: 0.5px;height: 100%;transform: translateX(-50%);transition: .35s;}
      }
      .accordion_goods_content {display: grid;grid-template-rows: 0fr;transition: grid-template-rows .4s ease;visibility: hidden; 
        .accordion_goods_inner {overflow: hidden;min-height: 0;
          .accordion_goods_grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2% 3%;height: auto;  padding-bottom: 20%;;
            .icn{width:15vw;height:15vw;margin:auto;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
              img{width:60%;}
            }
            a{display: block;}
            li{text-align:center;font-size: 2.4vw;}
            p{padding-top: 10%;}
          }
        }
      }
    }
  }*/
  .top_goods {
    margin-bottom: 30%; }
    .top_goods .category_grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4% 4%; }
      .top_goods .category_grid .icon {
        width: 15vw;
        height: 15vw;
        margin: auto;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center; }
        .top_goods .category_grid .icon img {
          width: 60%; }
      .top_goods .category_grid a {
        display: block; }
      .top_goods .category_grid li {
        text-align: center;
        font-size: 2.4vw; }
      .top_goods .category_grid p {
        padding-top: 10%; }

  .top_brand {
    margin-bottom: 12%; }
    .top_brand .search_box {
      position: relative; }
      .top_brand .search_box input {
        background: none;
        width: 100%;
        border: none;
        border-bottom: 1px solid var(--color-accent-dgray);
        padding: 1rem 3rem 1rem 0; }
        .top_brand .search_box input:focus {
          outline: none;
          border-bottom: 1px solid var(--color-accent-dgray); }
      .top_brand .search_box .search_icon {
        position: absolute;
        right: 12px;
        top: 60%;
        width: 24px;
        height: 24px;
        transform: translateY(-50%);
        pointer-events: none; }
        .top_brand .search_box .search_icon .serch {
          fill: var(--color-font); }
    .top_brand .alphabet {
      padding: 1rem 0;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 3px;
      font-family: "helvetica-lt-pro", sans-serif; }
      .top_brand .alphabet button {
        background: none;
        border: none;
        cursor: pointer;
        transition: .35s;
        color: var(--color-font);
        white-space: nowrap;
        padding: 2vw 0; }
        .top_brand .alphabet button.active {
          opacity: .5;
          transition: .35s;
          color: #fff;
          background: var(--color-secondary); }
        .top_brand .alphabet button:hover {
          opacity: .5;
          transition: .35s;
          color: #fff;
          background: var(--color-secondary); }
    .top_brand .search_links {
      font-family: "helvetica-lt-pro", sans-serif; }
      .top_brand .search_links .search_box {
        display: block;
        padding: 4% 0;
        position: relative; }
      .top_brand .search_links .search_box::after {
        content: "›";
        position: absolute;
        right: 0;
        top: 15%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .top_brand .search_links .search_box:hover {
        color: var(--color-font-hover); }
    .top_brand .more {
      text-align: center; }
      .top_brand .more button {
        color: var(--color-accent-gray); }

  .top_about {
    margin-bottom: 18%; }
    .top_about .txt_area {
      margin-bottom: 12%; }
      .top_about .txt_area p {
        margin-bottom: 6%; }
      .top_about .txt_area p:last-child {
        margin-bottom: 0; }
    .top_about .link_btn {
      margin-bottom: 12%; }
    .top_about dl {
      margin-bottom: 5%; }
      .top_about dl dt {
        font-weight: 600;
        font-size: .9rem;
        margin-bottom: 2%; }
      .top_about dl dd {
        font-size: 0.8rem; }
    .top_about .google_map iframe {
      width: 100%;
      height: 60vw; }

  /*product*/
  .product .section_ttl {
    padding-bottom: 2%; }
  .product .product-count {
    font-size: 0.7rem;
    margin-bottom: 2%;
    color: var(--color-font-hover); }
  .product .product-card {
    width: 46%;
    margin-bottom: 12%; }

  .product_history .section_ttl {
    padding-bottom: 2%; }
  .product_history .product-count {
    font-size: 0.7rem;
    margin-bottom: 2%;
    color: var(--color-font-hover); }
  .product_history .product-card {
    width: 46%;
    margin-bottom: 12%; }
  .product_history .history_container {
    margin-bottom: 5%;
    margin-bottom: 10%;
    border-bottom: 1px solid var(--color-font-hover); }
    .product_history .history_container .grid {
      margin-bottom: 0; }
    .product_history .history_container .date {
      color: var(--color-primary);
      margin-bottom: 3%;
      font-size: 1.0rem; }

  .step_container {
    padding-top: 15%;
    margin-bottom: 5%;
    font-size: 0.8rem; }
    .step_container .step_flow {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
      padding: 0% 10%; }
    .step_container .step_flow::before {
      content: "";
      position: absolute;
      top: 28%;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--color-font-hover);
      z-index: 0; }
    .step_container .step {
      text-align: center;
      position: relative;
      z-index: 1;
      width: 25%; }
    .step_container .step_circle {
      width: 2.0rem;
      height: 2.0rem;
      border-radius: 50%;
      border: 1px solid var(--color-font-hover);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      line-height: 1;
      color: var(--color-font-hover);
      background: var(--color-bg);
      margin: 0 auto 0 auto; }
    .step_container .step.active .step_circle {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #fff; }
    .step_container .step p {
      font-size: 0.7rem;
      color: var(--color-font-hover);
      padding-top: 0.3rem; }
    .step_container .step.active p {
      color: var(--color-primary); }
    .step_container .step.end .step_circle {
      background: var(--color-font-hover);
      border-color: var(--color-font-hover);
      color: #fff; }

  .ttl_container {
    padding: 0 5%;
    margin-bottom: 8%; }

  /* cart*/
  .cart_container .date {
    margin-bottom: 0px;
    font-size: 1.0rem;
    font-family: "helvetica-lt-pro", sans-serif;
    line-height: 1.5;
    margin-bottom: 10%; }
  .cart_container .status {
    margin-bottom: 4%;
    display: flex;
    justify-content: flex-start; }
    .cart_container .status .price {
      font-family: "helvetica-lt-pro", sans-serif;
      margin-left: 10px;
      font-size: 1.0rem; }
    .cart_container .status .available {
      font-size: 0.7rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      background: var(--color-primary);
      color: #fff; }
    .cart_container .status .delay {
      font-size: 0.7rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      background: var(--color-accent-red);
      color: #fff; }
    .cart_container .status .reservation {
      font-size: 0.7rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      background: var(--color-accent-green);
      color: #fff; }
  .cart_container input {
    font-size: 0.8rem; }
  .cart_container label {
    display: block;
    padding: 1% 0;
    cursor: pointer; }
  .cart_container textarea {
    width: 100%;
    height: 40vw; }
  .cart_container .noitem {
    font-size: 1.2rem;
    margin-bottom: 20%;
    text-align: center; }
  .cart_container .note {
    padding: 3% 0; }
  .cart_container .product_list {
    margin-bottom: 20%; }
  .cart_container .customer_info {
    font-size: 0.8rem;
    margin-bottom: 20%; }
    .cart_container .customer_info dl {
      display: table;
      width: 100%;
      margin-bottom: 1%; }
      .cart_container .customer_info dl dt {
        display: table-cell;
        width: 20%;
        font-size: 0.7rem; }
      .cart_container .customer_info dl dd {
        display: table-cell;
        width: 75%; }
  .cart_container .pickup_data {
    margin-bottom: 15%; }
    .cart_container .pickup_data dl {
      margin-bottom: 5%; }
      .cart_container .pickup_data dl dt {
        font-size: 0.7rem; }
    .cart_container .pickup_data .date dl {
      width: 60%; }
      .cart_container .pickup_data .date dl dd input[type="date"] {
        width: 100%;
        padding: 2% 4%; }
  .cart_container .payment_Info {
    margin-bottom: 15%; }
  .cart_container .use_point {
    margin-bottom: 15%; }
    .cart_container .use_point .note {
      color: var(--color-font-hover);
      padding-top: 3%; }
  .cart_container .notes {
    margin-bottom: 15%; }
    .cart_container .notes textarea {
      font-size: 0.8rem; }
  .cart_container .cart_ttl {
    font-size: 1.0rem;
    padding-bottom: 1%;
    margin-bottom: 6%;
    border-bottom: 1px solid var(--color-font-hover);
    position: relative; }
    .cart_container .cart_ttl button {
      width: 8%;
      position: absolute;
      right: 0;
      top: 5%; }
      .cart_container .cart_ttl button svg {
        fill: var(--color-primary); }
  .cart_container .product_cell {
    display: flex;
    justify-content: space-between;
    padding-bottom: 6%;
    margin-bottom: 6%;
    border-bottom: 1px solid var(--color-font-hover); }
    .cart_container .product_cell .pht {
      width: 24%; }
    .cart_container .product_cell .info {
      line-height: 1.5;
      width: 70%; }
      .cart_container .product_cell .info h3 {
        margin-bottom: 5px; }
      .cart_container .product_cell .info p {
        margin-bottom: 5px; }
      .cart_container .product_cell .info .brand {
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 1px; }
      .cart_container .product_cell .info .name {
        font-size: 0.6rem;
        margin-bottom: 7px; }
      .cart_container .product_cell .info .price {
        font-size: 0.9rem;
        font-weight: 500;
        font-family: "helvetica-lt-pro", sans-serif;
        margin-bottom: 2px; }
        .cart_container .product_cell .info .price span {
          font-size: 0.7rem;
          margin-left: 0.3rem;
          font-weight: normal; }
      .cart_container .product_cell .info .number {
        font-size: 0.6rem;
        color: var(--color-font-hover);
        font-family: "helvetica-lt-pro", sans-serif;
        margin-bottom: 1px; }
      .cart_container .product_cell .info .delete {
        font-size: 0.6rem;
        text-align: right;
        margin-left: auto;
        text-decoration: underline;
        text-underline-offset: 5px;
        margin-bottom: 0; }
  .cart_container .price_container {
    margin-bottom: 15%; }
    .cart_container .price_container .total_container {
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      display: flex;
      padding: 1% 0; }
      .cart_container .price_container .total_container .ttl {
        font-size: 0.8rem; }
      .cart_container .price_container .total_container .price {
        font-weight: 600;
        font-size: 1.2rem; }
        .cart_container .price_container .total_container .price span {
          font-size: 0.7rem;
          font-weight: normal; }
    .cart_container .price_container .price_cell {
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      display: flex;
      padding: 1% 0; }
      .cart_container .price_container .price_cell .ttl {
        font-size: 0.8rem; }
      .cart_container .price_container .price_cell .price {
        font-size: 0.8rem; }
        .cart_container .price_container .price_cell .price span {
          font-size: 0.7rem;
          font-weight: normal; }
  .cart_container .actions {
    margin-bottom: 5%; }
    .cart_container .actions .checkout_btn {
      width: 100%;
      position: relative;
      display: block;
      text-align: center;
      padding: 5% 0;
      border: 1px solid var(--color-primary);
      background: var(--color-primary);
      color: #fff;
      transition: .35s;
      margin-bottom: 5%; }
    .cart_container .actions .checkout_btn::after {
      content: "›";
      position: absolute;
      right: 5%;
      top: 17%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
    .cart_container .actions .checkout_btn:hover {
      border: 1px solid var(--color-primary);
      color: var(--color-primary);
      background: var(--color-bg);
      transition: .35s; }
    .cart_container .actions .shopping_btn {
      width: 100%;
      position: relative;
      display: block;
      text-align: center;
      padding: 5% 0;
      border: 1px solid var(--color-primary);
      transition: .35s; }
    .cart_container .actions .shopping_btn::after {
      content: "›";
      position: absolute;
      right: 5%;
      top: 17%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
    .cart_container .actions .shopping_btn:hover {
      border: 1px solid var(--color-primary);
      background: var(--color-primary);
      color: #fff;
      transition: .35s; }
  .cart_container .note {
    font-size: 0.7rem;
    margin-bottom: 0%; }
    .cart_container .note a {
      text-decoration: underline;
      text-underline-offset: 5px; }

  .complete_container {
    text-align: center;
    padding: 8% 0 0% 0; }
    .complete_container h2 {
      font-size: 1.2rem;
      margin-bottom: 5%; }
    .complete_container p {
      font-size: 0.8rem;
      margin-bottom: 8%; }
    .complete_container .actions {
      margin: 0 5% 0% 5%; }
      .complete_container .actions .checkout_btn {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 5% 0;
        border: 1px solid var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        transition: .35s;
        margin-bottom: 5%; }
      .complete_container .actions .checkout_btn::after {
        content: "›";
        position: absolute;
        right: 5%;
        top: 17%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .complete_container .actions .checkout_btn:hover {
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        background: var(--color-bg);
        transition: .35s; }
      .complete_container .actions .shopping_btn {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 5% 0;
        border: 1px solid var(--color-primary);
        transition: .35s; }
      .complete_container .actions .shopping_btn::after {
        content: "›";
        position: absolute;
        right: 5%;
        top: 17%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .complete_container .actions .shopping_btn:hover {
        border: 1px solid var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        transition: .35s; }

  /* mypage*/
  .mypage_container .mypage_menu {
    padding: 8% 0 8% 0; }
    .mypage_container .mypage_menu ul {
      display: flex;
      justify-content: space-between;
      font-size: 0.9rem;
      text-align: center; }
      .mypage_container .mypage_menu ul li {
        width: 33%; }
        .mypage_container .mypage_menu ul li a {
          display: block;
          padding: 5px 10px;
          background: #fff; }
          .mypage_container .mypage_menu ul li a:hover {
            background: var(--color-primary);
            color: #fff; }
          .mypage_container .mypage_menu ul li a.active {
            background: var(--color-primary);
            color: #fff; }
        .mypage_container .mypage_menu ul li:last-child {
          margin-right: 0; }
  .mypage_container .ttlarea {
    position: relative; }
    .mypage_container .ttlarea .btn {
      position: absolute;
      right: 0;
      top: 40%;
      display: flex;
      justify-content: space-between;
      width: 100px; }
      .mypage_container .ttlarea .btn li {
        width: 45%; }
        .mypage_container .ttlarea .btn li button {
          width: 100%;
          height: 100%; }
        .mypage_container .ttlarea .btn li a {
          display: block; }
      .mypage_container .ttlarea .btn li:nth-child(2) button {
        border-radius: 50%;
        background: #ececec;
        cursor: pointer;
        width: 100%;
        height: 100%; }
    .mypage_container .ttlarea .share_icon {
      fill: var(--color-primary); }
    .mypage_container .ttlarea .edit_icon {
      fill: var(--color-primary); }
    .mypage_container .ttlarea .edit_menu {
      position: absolute;
      top: 60px;
      right: 0;
      width: 240px;
      background: #fff;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      padding: 20px 0;
      display: none;
      z-index: 10; }
      .mypage_container .ttlarea .edit_menu li {
        padding: 12px 20px;
        cursor: pointer; }
      .mypage_container .ttlarea .edit_menu li:hover {
        background: #f3f3f3; }
      .mypage_container .ttlarea .edit_menu .delete {
        color: var(--color-accent-red);
        padding: 0; }
        .mypage_container .ttlarea .edit_menu .delete a {
          color: var(--color-accent-red); }
        .mypage_container .ttlarea .edit_menu .delete button {
          color: var(--color-accent-red); }
    .mypage_container .ttlarea .edit_menu.show {
      display: block; }
  .mypage_container .ttlarea textarea {
    width: 65%;
    height: 20%;
    border: none;
    background: var(--color-accent-dgray); }
  .mypage_container .bookmark_read_area textarea {
    width: 100%;
    height: 40vw;
    border: none;
    background: var(--color-accent-dgray); }
  .mypage_container .mypage_news {
    margin-bottom: 15%; }
    .mypage_container .mypage_news .accordion_mypage {
      border-top: 1px solid var(--color-accent-dgray);
      border-bottom: 1px solid var(--color-accent-dgray); }
      .mypage_container .mypage_news .accordion_mypage a {
        transition: .35s; }
      .mypage_container .mypage_news .accordion_mypage a:hover {
        transition: .35s; }
      .mypage_container .mypage_news .accordion_mypage .accordion_mypage_item {
        position: relative; }
        .mypage_container .mypage_news .accordion_mypage .accordion_mypage_item:has(.accordion_mypage_toggle:checked) .accordion_mypage_content {
          grid-template-rows: 1fr;
          visibility: visible; }
        .mypage_container .mypage_news .accordion_mypage .accordion_mypage_item:has(.accordion_mypage_toggle:checked) .accordion_mypage_header {
          color: var(--color-font-hover);
          padding-bottom: 8%; }
          .mypage_container .mypage_news .accordion_mypage .accordion_mypage_item:has(.accordion_mypage_toggle:checked) .accordion_mypage_header .att {
            opacity: 0.5; }
          .mypage_container .mypage_news .accordion_mypage .accordion_mypage_item:has(.accordion_mypage_toggle:checked) .accordion_mypage_header .icon {
            transform: rotate(180deg); }
            .mypage_container .mypage_news .accordion_mypage .accordion_mypage_item:has(.accordion_mypage_toggle:checked) .accordion_mypage_header .icon::after {
              transform: translateX(-50%) scaleY(0); }
      .mypage_container .mypage_news .accordion_mypage .accordion_mypage_toggle {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
        top: 0;
        left: 0; }
        .mypage_container .mypage_news .accordion_mypage .accordion_mypage_toggle:checked ~ .accordion_mypage_header {
          color: var(--color-font); }
        .mypage_container .mypage_news .accordion_mypage .accordion_mypage_toggle:checked ~ .accordion_mypage_header .icon {
          transform: rotate(180deg); }
        .mypage_container .mypage_news .accordion_mypage .accordion_mypage_toggle:checked ~ .accordion_mypage_header .icon::after {
          transform: translateX(-50%) scaleY(0); }
      .mypage_container .mypage_news .accordion_mypage .accordion_mypage_header {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        transition: .3s;
        font-size: 0.9rem;
        padding: 1.6rem 0; }
      .mypage_container .mypage_news .accordion_mypage .att {
        background: var(--color-accent-red);
        color: #fff;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        padding: 0 1%;
        text-align: center;
        line-height: 1.7;
        margin-left: 5px;
        font-size: 0.8rem; }
      .mypage_container .mypage_news .accordion_mypage .icon {
        position: relative;
        width: 14px;
        height: 14px;
        transition: .35s;
        margin-left: auto; }
        .mypage_container .mypage_news .accordion_mypage .icon::before, .mypage_container .mypage_news .accordion_mypage .icon::after {
          content: "";
          position: absolute;
          background: var(--color-font); }
        .mypage_container .mypage_news .accordion_mypage .icon::before {
          top: 50%;
          left: 0;
          width: 100%;
          height: 0.5px;
          transform: translateY(-50%);
          transition: .35s; }
        .mypage_container .mypage_news .accordion_mypage .icon::after {
          left: 50%;
          top: 0;
          width: 0.5px;
          height: 100%;
          transform: translateX(-50%);
          transition: .35s; }
      .mypage_container .mypage_news .accordion_mypage .accordion_mypage_content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .4s ease;
        visibility: hidden; }
        .mypage_container .mypage_news .accordion_mypage .accordion_mypage_content .accordion_mypage_inner {
          overflow: hidden;
          min-height: 0; }
          .mypage_container .mypage_news .accordion_mypage .accordion_mypage_content .accordion_mypage_inner .accordion_mypage_grid {
            padding-bottom: 0%; }
            .mypage_container .mypage_news .accordion_mypage .accordion_mypage_content .accordion_mypage_inner .accordion_mypage_grid a {
              display: block; }
            .mypage_container .mypage_news .accordion_mypage .accordion_mypage_content .accordion_mypage_inner .accordion_mypage_grid li {
              border-top: 1px solid var(--color-accent-dgray);
              padding: 5% 0 5% 0; }
            .mypage_container .mypage_news .accordion_mypage .accordion_mypage_content .accordion_mypage_inner .accordion_mypage_grid p {
              padding-top: 10%; }
  .mypage_container .bookmark_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    .mypage_container .bookmark_container .product-card {
      width: 46%;
      margin-bottom: 12%; }
    .mypage_container .bookmark_container .actions {
      margin: 0 5% 0% 5%; }
      .mypage_container .bookmark_container .actions .checkout_btn {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 5% 0;
        border: 1px solid var(--color-primary);
        transition: .35s;
        margin-bottom: 5%; }
      .mypage_container .bookmark_container .actions .checkout_btn::after {
        content: "›";
        position: absolute;
        right: 5%;
        top: 17%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .mypage_container .bookmark_container .actions .checkout_btn:hover {
        border: 1px solid var(--color-primary);
        background: var(--color-primary);
        transition: .35s;
        color: #fff; }
      .mypage_container .bookmark_container .actions .shopping_btn {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 5% 0;
        border: 1px solid var(--color-primary);
        transition: .35s; }
      .mypage_container .bookmark_container .actions .shopping_btn::after {
        content: "›";
        position: absolute;
        right: 5%;
        top: 17%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .mypage_container .bookmark_container .actions .shopping_btn:hover {
        border: 1px solid var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        transition: .35s; }
  .mypage_container .bookmark_read_area {
    margin-bottom: 10%; }
  .mypage_container .bookmark_detail .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 20%; }
  .mypage_container .bookmark_detail .product-card .delete_check:has(input:checked) .box:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5); }
  .mypage_container .bookmark_detail .product-card .delete_check {
    cursor: pointer;
    display: block;
    position: relative; }
    .mypage_container .bookmark_detail .product-card .delete_check input {
      display: none; }
      .mypage_container .bookmark_detail .product-card .delete_check input:checked + .delete_checkmark {
        background: var(--color-primary);
        border-color: var(--color-primary); }
        .mypage_container .bookmark_detail .product-card .delete_check input:checked + .delete_checkmark::after {
          display: block; }
    .mypage_container .bookmark_detail .product-card .delete_check .delete_checkmark {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 3;
      width: 18px;
      height: 18px;
      border: 1px solid var(--color-primary);
      background: var(--color-bg); }
      .mypage_container .bookmark_detail .product-card .delete_check .delete_checkmark::after {
        content: "";
        position: absolute;
        display: none;
        left: 5px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg); }
  .mypage_container .bookmark_detail .read_area p {
    text-align: center;
    font-size: 1.0rem;
    padding: 5% 0 15% 0; }
  .mypage_container .mypage_ttl_area {
    position: relative; }
    .mypage_container .mypage_ttl_area h2 {
      font-size: 1.4rem; }
    .mypage_container .mypage_ttl_area .product_filter .sort {
      margin-left: auto; }
    .mypage_container .mypage_ttl_area .search_box {
      position: relative;
      margin-bottom: 15%; }
      .mypage_container .mypage_ttl_area .search_box input {
        background: none;
        width: 100%;
        border: none;
        border-bottom: 1px solid var(--color-accent-dgray);
        padding: 1rem 3rem 1rem 0;
        color: var(--color-font); }
        .mypage_container .mypage_ttl_area .search_box input:focus {
          outline: none;
          border-bottom: 1px solid var(--color-accent-dgray); }
      .mypage_container .mypage_ttl_area .search_box .search_icon {
        position: absolute;
        right: 12px;
        top: 60%;
        width: 24px;
        height: 24px;
        transform: translateY(-50%);
        pointer-events: none; }
        .mypage_container .mypage_ttl_area .search_box .search_icon .serch {
          fill: var(--color-font); }
  .mypage_container .product_list {
    margin-bottom: 20%; }
  .mypage_container .history .product_list .product_filter {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .mypage_container .history .product_list .product_filter .check {
      margin-left: auto; }
    .mypage_container .history .product_list .product_filter .sort {
      margin-left: auto; }
  .mypage_container .history .history_container a {
    display: block;
    border-bottom: 1px solid var(--color-accent-dgray);
    margin-bottom: 8%;
    padding-bottom: 8%;
    width: 100%; }
    .mypage_container .history .history_container a:hover {
      opacity: 0.5; }
  .mypage_container .history .history_container .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2%; }
  .mypage_container .order .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10vw 5vw; }
  .mypage_container .mydate {
    margin-bottom: 0px;
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 2%;
    ont-family: Arial, Helvetica, "sans-serif"; }
  .mypage_container .mystatus {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 5%; }
    .mypage_container .mystatus .price {
      font-family: "helvetica-lt-pro", sans-serif;
      margin-left: 10px;
      font-size: 1.0rem; }
    .mypage_container .mystatus .available {
      font-size: 0.8rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      background: var(--color-primary);
      color: #fff; }
    .mypage_container .mystatus .delay {
      font-size: 0.8rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      background: var(--color-accent-red);
      color: #fff; }
    .mypage_container .mystatus .reservation {
      font-size: 0.8rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      background: var(--color-accent-green);
      color: #fff; }
  .mypage_container .info_container {
    padding: 5% 0; }
    .mypage_container .info_container .total_container {
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      display: flex;
      padding: 0.5% 0; }
      .mypage_container .info_container .total_container .ttl {
        font-size: 0.8rem; }
      .mypage_container .info_container .total_container .price {
        font-weight: 600;
        font-size: 1.2rem; }
        .mypage_container .info_container .total_container .price span {
          font-size: 0.7rem;
          font-weight: normal; }
    .mypage_container .info_container .cell {
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      display: flex;
      padding: 0.5% 0; }
      .mypage_container .info_container .cell .ttl {
        font-size: 0.8rem; }
      .mypage_container .info_container .cell .price {
        font-size: 0.8rem; }
        .mypage_container .info_container .cell .price span {
          font-size: 0.7rem;
          font-weight: normal; }
  .mypage_container .form_ttl_area {
    margin-bottom: 8%; }
    .mypage_container .form_ttl_area h2 {
      padding-bottom: 0; }
    .mypage_container .form_ttl_area p {
      font-size: 0.7rem; }
  .mypage_container .input_area .read_txt {
    margin-bottom: 5%; }
  .mypage_container .input_area input {
    background: #fff;
    font-size: 0.9rem; }
  .mypage_container .input_area textarea {
    background: #fff;
    font-size: 0.9rem;
    width: 100%;
    height: 100px; }
  .mypage_container .input_area .select-box {
    position: relative; }
    .mypage_container .input_area .select-box select {
      width: 100%;
      padding: 10px 14px;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
      border-radius: 0;
      background: #fff;
      padding-right: 25px; }
    .mypage_container .input_area .select-box select::-ms-expand {
      display: none; }
    .mypage_container .input_area .select-box::after {
      position: absolute;
      top: 45%;
      right: 5%;
      content: '';
      width: 7px;
      height: 7px;
      border-left: var(--color-primary) solid 1px;
      border-bottom: var(--color-primary) solid 1px;
      transform: rotate(-45deg) translateY(-50%);
      pointer-events: none; }
  .mypage_container .input_area .on_wrap {
    width: 100%; }
    .mypage_container .input_area .on_wrap input {
      width: 100%;
      margin-bottom: 3%; }
  .mypage_container .input_area .tw_wrap {
    width: 100%; }
    .mypage_container .input_area .tw_wrap input {
      width: 100%;
      margin-bottom: 3%; }
  .mypage_container .input_area dl {
    margin-bottom: 10%; }
  .mypage_container .input_area dt {
    margin-bottom: 3%; }
  .mypage_container .input_area .zip_area {
    display: flex;
    margin-bottom: 3%; }
    .mypage_container .input_area .zip_area input {
      width: 40%; }
  .mypage_container .input_area .zipserch {
    color: var(--color-accent-gray); }
    .mypage_container .input_area .zipserch a {
      display: flex;
      justify-content: flex-start; }
      .mypage_container .input_area .zipserch a span {
        padding: 7px 7px 0 7px; }
      .mypage_container .input_area .zipserch a svg {
        fill: var(--color-accent-gray);
        width: 0.8rem;
        margin-top: 8px; }
      .mypage_container .input_area .zipserch a:hover {
        color: var(--color-primary);
        text-decoration: underline; }
  .mypage_container .input_area .adress1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3%; }
    .mypage_container .input_area .adress1 .select-box {
      width: 28%; }
    .mypage_container .input_area .adress1 input[type="text"] {
      border: 1px solid var(--color-secondary);
      padding: 8px 14px;
      width: 70%; }
  .mypage_container .input_area .radio_area label {
    margin-right: 20px;
    cursor: pointer; }
  .mypage_container .input_area .radio_area input {
    margin-right: 5px;
    margin-top: -5px; }
  .mypage_container .input_area input[type="file"] {
    padding: 10px;
    cursor: pointer; }
  .mypage_container .input_area .teems_check .check {
    justify-content: center;
    padding: 5% 0 12% 0; }

  .brand_container {
    margin-bottom: 12%; }
    .brand_container .search_box {
      position: relative; }
      .brand_container .search_box input {
        background: none;
        width: 100%;
        border: none;
        border-bottom: 1px solid var(--color-accent-dgray);
        padding: 1rem 3rem 1rem 0; }
        .brand_container .search_box input:focus {
          outline: none;
          border-bottom: 1px solid var(--color-accent-dgray); }
      .brand_container .search_box .search_icon {
        position: absolute;
        right: 12px;
        top: 60%;
        width: 24px;
        height: 24px;
        transform: translateY(-50%);
        pointer-events: none; }
        .brand_container .search_box .search_icon .serch {
          fill: var(--color-font); }
    .brand_container .alphabet {
      padding: 1rem 0;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
      font-family: "helvetica-lt-pro", sans-serif; }
      .brand_container .alphabet a {
        display: block;
        text-align: center;
        padding: 1%;
        background: none;
        border: none;
        cursor: pointer;
        transition: .35s;
        color: var(--color-font);
        white-space: nowrap;
        padding: 2vw 0; }
        .brand_container .alphabet a.active {
          opacity: .5;
          transition: .35s;
          color: #fff;
          background: var(--color-secondary); }
        .brand_container .alphabet a:hover {
          opacity: .5;
          transition: .35s;
          color: #fff;
          background: var(--color-secondary); }
    .brand_container h3 {
      font-size: 1.1rem;
      border-bottom: 1px solid var(--color-font-hover);
      padding-bottom: 2%;
      margin-bottom: 2%; }
    .brand_container .search_links {
      font-family: "helvetica-lt-pro", sans-serif;
      margin-bottom: 12%; }
      .brand_container .search_links .search_box {
        display: block;
        padding: 4% 0;
        position: relative; }
      .brand_container .search_links .search_box::after {
        content: "›";
        position: absolute;
        right: 0;
        top: 15%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .brand_container .search_links .search_box:hover {
        color: var(--color-font-hover); }
    .brand_container .more {
      text-align: center; }
      .brand_container .more button {
        color: var(--color-accent-gray); }

  .login_container .pht {
    width: 90px;
    text-align: center;
    margin: 0 auto 5% auto; }
  .login_container input {
    background: #fff;
    font-size: 0.9rem; }
  .login_container .on_wrap {
    width: 100%; }
    .login_container .on_wrap input {
      width: 100%; }
  .login_container .pass {
    text-align: center;
    text-decoration: underline;
    margin-bottom: 20%; }
  .login_container .teems_check {
    margin-bottom: 5%; }
  .login_container .backbtn {
    padding: 0% 0 8% 0; }
  .login_container dl {
    margin-bottom: 10%; }
    .login_container dl:last-child {
      margin-bottom: 3%; }
  .login_container dt {
    margin-bottom: 3%; }
  .login_container .ttl_area {
    text-align: center;
    padding: 16% 0 12% 0; }
    .login_container .ttl_area h2 {
      font-size: 1.4rem;
      margin-bottom: 2%; }

  .other_container .ttl_area {
    padding: 8% 0; }
  .other_container .top_txt {
    margin-bottom: 5%; }
  .other_container .right_txt {
    text-align: right; }
  .other_container .txt_area dl {
    margin-bottom: 15%; }
    .other_container .txt_area dl dt {
      font-weight: 600;
      margin-bottom: 3%;
      font-size: 1.0rem; }
    .other_container .txt_area dl dd p {
      margin-bottom: 3%; }
    .other_container .txt_area dl dd ol li {
      list-style: decimal;
      margin-left: 25px;
      margin-bottom: 3%; }
  .other_container .tabel_area dl {
    margin-bottom: 15%; }
    .other_container .tabel_area dl dt {
      font-weight: 600;
      margin-bottom: 3%;
      font-size: 1.0rem; }
    .other_container .tabel_area dl dd p {
      margin-bottom: 3%; }
    .other_container .tabel_area dl dd ol li {
      list-style: decimal;
      margin-left: 25px;
      margin-bottom: 3%; }

  .actions {
    margin-bottom: 5%; }
    .actions .btn_primary {
      width: 100%;
      position: relative;
      display: block;
      text-align: center;
      padding: 5% 0;
      border: 1px solid var(--color-primary);
      background: var(--color-primary);
      color: #fff;
      transition: .35s;
      margin-bottom: 5%; }
    .actions .btn_primary::after {
      content: "›";
      position: absolute;
      right: 5%;
      top: 17%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
    .actions .btn_primary:hover {
      border: 1px solid var(--color-primary);
      color: var(--color-primary);
      background: var(--color-bg);
      transition: .35s; }
    .actions .btn_delete {
      width: 100%;
      position: relative;
      display: block;
      text-align: center;
      padding: 5% 0;
      border: 1px solid var(--color-accent-red);
      background: var(--color-accent-red);
      color: #fff;
      transition: .35s;
      margin-bottom: 5%; }
    .actions .btn_delete::after {
      content: "›";
      position: absolute;
      right: 5%;
      top: 17%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
    .actions .btn_delete:hover {
      border: 1px solid var(--color-accent-red);
      color: var(--color-accent-red);
      background: var(--color-bg);
      transition: .35s; }
    .actions .btn_nomal {
      width: 100%;
      position: relative;
      display: block;
      text-align: center;
      padding: 5% 0;
      border: 1px solid var(--color-primary);
      transition: .35s; }
    .actions .btn_nomal::after {
      content: "›";
      position: absolute;
      right: 5%;
      top: 17%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
    .actions .btn_nomal:hover {
      border: 1px solid var(--color-primary);
      background: var(--color-primary);
      color: #fff;
      transition: .35s; }

  .modal-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    top: 0;
    left: 0;
    z-index: 10;
    display: none; }

  .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

  .modal-content {
    width: 88vw;
    background-color: #fff;
    position: relative;
    padding: 8%;
    box-sizing: border-box;
    position: relative; }
    .modal-content ul {
      margin-bottom: 10%;
      padding-top: 5%;
      height: 30vh;
      overflow-y: auto;
      padding-right: 5%; }
      .modal-content ul li {
        position: relative;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--color-accent-dgray); }
        .modal-content ul li .info {
          width: 90%; }
        .modal-content ul li .name {
          font-size: 1.0rem; }
        .modal-content ul li .count {
          font-size: 0.7rem;
          color: var(--color-font-hover);
          position: relative; }
          .modal-content ul li .count span {
            position: absolute;
            right: 0; }
    .modal-content .icon {
      position: relative;
      width: 14px;
      height: 14px;
      transition: .35s;
      position: absolute;
      right: 0;
      top: 30%; }
      .modal-content .icon::before, .modal-content .icon::after {
        content: "";
        position: absolute;
        background: var(--color-font-hover); }
      .modal-content .icon::before {
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        transform: translateY(-50%);
        transition: .35s; }
      .modal-content .icon::after {
        left: 50%;
        top: 0;
        width: 1px;
        height: 100%;
        transform: translateX(-50%);
        transition: .35s; }

  .modalClose {
    display: block;
    text-align: center;
    color: #2675BC;
    transition: .5s; }

  .modalClose:hover {
    opacity: .5; }

  .close-btn {
    position: absolute;
    right: 25px;
    top: 25px;
    cursor: pointer; }

  .close-btn > div {
    width: 25px;
    height: 25px;
    position: relative; }

  .close-btn > div > span {
    width: 100%;
    height: 1px;
    background-color: var(--color-font);
    position: absolute;
    top: 50%;
    transform: translateY(-50%); }

  .close-btn > div > span:first-of-type {
    transform: rotate(45deg); }

  .close-btn > div > span:last-of-type {
    transform: rotate(-45deg); }

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

  .about_container .ttl_area {
    overflow: hidden;
    padding: 10% 0; }
    .about_container .ttl_area h2 {
      font-family: "helvetica-lt-pro", sans-serif;
      font-weight: 600;
      font-size: 13.5vw;
      letter-spacing: 0;
      line-height: 1.0;
      margin-left: -4px;
      margin-bottom: 12%; }
    .about_container .ttl_area p {
      margin: 0 auto;
      width: 90%;
      font-size: 4.6vw;
      font-weight: 600; }
  .about_container .read_area {
    width: 90%;
    margin: 0 auto 18% auto; }
    .about_container .read_area h3 {
      margin-bottom: 5%; }
  .about_container .pht {
    margin-bottom: 18%; }
  .about_container .txt_area {
    width: 90%;
    margin: 0 auto 10% auto; }
    .about_container .txt_area div {
      margin-bottom: 16%; }
      .about_container .txt_area div h4 {
        margin-bottom: 10%; }
        .about_container .txt_area div h4 b {
          font-family: "helvetica-lt-pro", sans-serif;
          font-weight: 600;
          font-size: 8.0vw;
          line-height: 1.3;
          etter-spacing: 0; }
        .about_container .txt_area div h4 span {
          font-weight: 500;
          font-size: 3.2vw; }
  .about_container .last_txt {
    padding: 8% 0;
    border-top: 1px solid var(--color-font-hover);
    border-bottom: 1px solid var(--color-font-hover);
    width: 90%;
    margin: 0 auto 20% auto; }

  .aboutdetail_container {
    margin-bottom: 18%; }
    .aboutdetail_container .txt_area {
      margin-bottom: 12%; }
      .aboutdetail_container .txt_area p {
        margin-bottom: 6%; }
      .aboutdetail_container .txt_area p:last-child {
        margin-bottom: 0; }
    .aboutdetail_container .link_btn {
      margin-bottom: 12%; }
    .aboutdetail_container dl {
      margin-bottom: 5%; }
      .aboutdetail_container dl dt {
        font-weight: 600;
        font-size: .9rem;
        margin-bottom: 2%; }
      .aboutdetail_container dl dd {
        font-size: 0.8rem; }
    .aboutdetail_container .google_map iframe {
      width: 100%;
      height: 60vw; } }
@media screen and (min-width: 481px) {
  .w-md {
    width: 70%;
    margin: 0 auto; }

  .w-lg {
    width: 90%;
    margin: 0 auto 8% auto; }

  .w-full {
    width: 100%; }

  .news {
    text-align: center;
    background: var(--color-secondary);
    padding: 8px 10px;
    font-size: 0.8rem; }

  #check_btn {
    display: none; }

  .label_btn {
    display: none; }

  .section_ttl {
    font-size: 1.6rem;
    padding: 20px 0%; }

  .link_btn a {
    position: relative;
    display: block;
    text-align: center;
    padding: 15px 0;
    border: 1px solid var(--color-primary); }
  .link_btn a::after {
    content: "›";
    position: absolute;
    right: 5%;
    top: 17%;
    font-size: 1.2rem; }
  .link_btn a:hover {
    border: 0.5px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff; }

  .filter_menu {
    width: 350px; }

  .bookmark {
    width: 16px;
    height: 20px;
    background-color: var(--color-primary);
    position: relative;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 75%, 0% 100%);
    transition: .35s; }

  .bookmark::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1.5px;
    background-color: var(--color-bg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 75%, 0% 100%); }

  .bookmark:hover::after {
    background-color: var(--color-primary);
    transition: .35s; }

  .bookmark.active::after {
    background-color: var(--color-primary);
    transition: .35s; }

  /*index*/
  .top_tabs {
    margin-bottom: 5%; }
    .top_tabs .tab_container {
      display: flex; }
    .top_tabs .tab_menu {
      width: 200px; }
    .top_tabs .tab {
      padding: 25.25% 25px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center; }
    .top_tabs .tab.active {
      background: #fff;
      border-bottom: 1px solid var(--color-accent-dgray); }
    .top_tabs .arrow {
      width: 6px;
      height: 6px;
      border-right: 1px solid var(--color-primary);
      border-bottom: 1px solid var(--color-primary);
      transform: rotate(-45deg); }
    .top_tabs .tab_contents {
      flex: 1;
      background: #fff; }
    .top_tabs .category_grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 0px;
      border-bottom: 1px solid var(--color-accent-dgray); }
    .top_tabs .category_grid li {
      display: table;
      line-height: 1.3; }
      .top_tabs .category_grid li a {
        font-size: 0.8rem;
        display: flex;
        display: block;
        padding: 14px 20px; }
      .top_tabs .category_grid li a:hover {
        background: var(--color-bg); }
      .top_tabs .category_grid li .icn {
        width: 40px;
        display: table-cell;
        padding-right: 5px; }
      .top_tabs .category_grid li p {
        display: block;
        display: table-cell;
        vertical-align: middle; }
    .top_tabs .tab_content {
      display: none; }
    .top_tabs .tab_content.active {
      display: block; }

  .top_search {
    display: none; }

  .top_slider {
    overflow: hidden;
    margin: 0 0% 8% 0%; }
    .top_slider h2 {
      margin: 0 8% 0% 8%; }
    .top_slider .swiper {
      width: 100%;
      position: relative;
      padding-bottom: 5%; }
    .top_slider .slider-wrapper {
      height: auto;
      position: relative; }
    .top_slider .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center; }
    .top_slider .swiper-button-prev {
      left: 33%; }
    .top_slider .swiper-button-next {
      right: 33%; }
    .top_slider .swiper-button-prev::after, .top_slider .swiper-button-next::after {
      display: none; }
    .top_slider .swiper-button-prev, .top_slider .swiper-button-next {
      width: 20px;
      height: 20px;
      top: auto;
      bottom: 0;
      color: var(--color-primary); }
    .top_slider .swiper-button-prev::before,
    .top_slider .swiper-button-next::before {
      content: "";
      display: block;
      width: 10px;
      height: 10px;
      border-top: 1px solid var(--color-primary);
      border-right: 1px solid var(--color-primary); }
    .top_slider .swiper-button-prev::before {
      transform: rotate(-135deg); }
    .top_slider .swiper-button-next::before {
      transform: rotate(45deg); }
    .top_slider .swiper-pagination {
      width: 30%;
      display: flex;
      justify-content: center;
      left: 35%; }
    .top_slider .swiper-pagination-bullet {
      width: 5vw;
      height: 2px;
      background: #ccc;
      opacity: 1;
      border-radius: 0; }
    .top_slider .swiper-pagination-bullet-active {
      background: var(--color-primary); }

  .top_booknark .link_btn {
    width: 36%;
    margin: 0 auto; }
  .top_booknark .horizontal-scroll {
    display: flex;
    overflow-x: scroll;
    gap: 30px;
    margin-bottom: 3%;
    padding-bottom: 1%;
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none;
    position: relative;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-font-hover); }
    .top_booknark .horizontal-scroll a {
      -webkit-user-drag: none; }
    .top_booknark .horizontal-scroll img {
      -webkit-user-drag: none; }
    .top_booknark .horizontal-scroll a {
      -webkit-user-drag: none; }
    .top_booknark .horizontal-scroll img {
      -webkit-user-drag: none; }
  .top_booknark .horizontal-scroll::-webkit-scrollbar {
    height: 6px;
    display: block; }
  .top_booknark .horizontal-scroll::-webkit-scrollbar-track {
    background: var(--color-font-hover);
    border-radius: 0px; }
  .top_booknark .horizontal-scroll::-webkit-scrollbar-thumb {
    background: var(--color-font-hover);
    border-radius: 0px; }
  .top_booknark .horizontal-scroll:active {
    cursor: grabbing; }
  .top_booknark .horizontal-scroll::-webkit-scrollbar {
    height: 2px;
    width: 20px;
    background: var(--color-font-hover); }
  .top_booknark .horizontal-scroll::-webkit-scrollbar-thumb {
    background: var(--color-primary); }
  .top_booknark .horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: #000; }
  .top_booknark .product-card {
    flex: 0 0 16vw;
    flex-shrink: 0;
    scroll-snap-align: start; }
    .top_booknark .product-card a {
      display: block; }

  .top_category .category_grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4% 2%; }
    .top_category .category_grid .icn {
      width: 4vw;
      height: 4vw;
      margin: auto;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center; }
      .top_category .category_grid .icn img {
        width: 60%; }
    .top_category .category_grid a {
      display: block; }
    .top_category .category_grid li {
      text-align: center;
      font-size: 0.75rem; }
    .top_category .category_grid p {
      padding-top: 5%; }

  .top_newitem .link_btn {
    width: 36%;
    margin: 0 auto; }
  .top_newitem .product-card {
    width: 17%;
    margin-bottom: 3%; }

  /*.top_goods{padding: 0% 5%;margin-bottom: 8%;
    .accordion_goods {border-top: 1px solid var(--color-accent-dgray);margin-bottom: 3%;padding-bottom: 3%;
      a{transition: .35s;}
      a:hover{transition: .35s;}
      .accordion_goods_item {
        border-bottom: 1px solid var(--color-accent-dgray);
        position: relative;

        &:has(.accordion_goods_toggle:checked) {

          .accordion_goods_content {
            grid-template-rows: 1fr;visibility: visible;
          }

          .accordion_goods_header {
            color: var(--color-font-hover);padding-bottom: 3%;;
            .icon {
              transform: rotate(180deg);

              &::after {
                transform: translateX(-50%) scaleY(0);
              }
            }
          }
        }
      }

      .accordion_goods_toggle {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
        top: 0;
        left: 0;

        &:checked ~ .accordion_goods_header {
          color: var(--color-font);
        }

        &:checked ~ .accordion_goods_header .icon {
          transform: rotate(180deg);
        }

        &:checked ~ .accordion_goods_header .icon::after {
          transform: translateX(-50%) scaleY(0);
        }
      }

      .accordion_goods_header {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: .3s;
        font-size: 0.8rem;
        padding: 1.6rem 0;
      }

      .icon {
        position: relative;
        width: 14px;
        height: 14px;
        transition: .35s;

        &::before,
        &::after {
          content: "";
          position: absolute;
          background: var(--color-font);
        }

        &::before {
          top: 50%;
          left: 0;
          width: 100%;
          height: 0.5px;
          transform: translateY(-50%);
          transition: .35s;
        }

        &::after {
          left: 50%;
          top: 0;
          width: 0.5px;
          height: 100%;
          transform: translateX(-50%);
          transition: .35s;
        }
      }

      .accordion_goods_content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .4s ease;
        visibility: hidden; 

        .accordion_goods_inner {
          overflow: hidden;min-height: 0;
          .accordion_goods_grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2% 3%;height: auto;  padding-bottom: 4%;;

            .icn{
            width:7vw;
            height:7vw;
            margin:auto;
            border-radius:50%;
            background:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
              img{width:60%;}
            }
            a{display: block;}
            li{text-align:center;font-size: .7rem;}
            p{padding-top: 5%;}
          }
        }
      }
      }
    }*/
  .top_brand .search_box {
    position: relative; }
    .top_brand .search_box input {
      background: none;
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--color-accent-dgray);
      padding: 1rem 3rem 1rem 0; }
      .top_brand .search_box input:focus {
        outline: none;
        border-bottom: 1px solid var(--color-accent-dgray); }
    .top_brand .search_box .search_icon {
      position: absolute;
      right: 12px;
      top: 60%;
      width: 24px;
      height: 24px;
      transform: translateY(-50%);
      pointer-events: none; }
      .top_brand .search_box .search_icon .serch {
        fill: var(--color-font); }
  .top_brand .alphabet {
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(27, 1fr);
    gap: 3px;
    font-family: "helvetica-lt-pro", sans-serif; }
    .top_brand .alphabet button {
      background: none;
      border: none;
      cursor: pointer;
      transition: .35s;
      color: var(--color-font);
      white-space: nowrap; }
      .top_brand .alphabet button.active {
        opacity: .5;
        transition: .35s;
        color: #fff;
        background: var(--color-secondary); }
      .top_brand .alphabet button:hover {
        opacity: .5;
        transition: .35s;
        color: #fff;
        background: var(--color-secondary); }
  .top_brand .search_links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3%;
    padding: 2% 0;
    font-family: "helvetica-lt-pro", sans-serif; }
    .top_brand .search_links .search_box {
      display: block;
      padding: 5% 0;
      position: relative; }
    .top_brand .search_links .search_box::after {
      content: "›";
      position: absolute;
      right: 0;
      top: 15%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
    .top_brand .search_links .search_box:hover {
      color: var(--color-font-hover); }
  .top_brand .more {
    text-align: center; }
    .top_brand .more button {
      color: var(--color-accent-gray); }

  .top_color .color_grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2% 4%; }
    .top_color .color_grid .icn {
      width: 4vw;
      height: 4vw;
      margin: auto;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center; }
      .top_color .color_grid .icn img {
        width: 90%; }
    .top_color .color_grid a {
      display: block; }
    .top_color .color_grid li {
      text-align: center;
      font-size: 0.7rem; }
    .top_color .color_grid p {
      padding-top: 5%; }

  .top_goods .category_grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 2% 4%; }
    .top_goods .category_grid .icn {
      width: 4vw;
      height: 4vw;
      margin: auto;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center; }
      .top_goods .category_grid .icn img {
        width: 60%; }
    .top_goods .category_grid a {
      display: block; }
    .top_goods .category_grid li {
      text-align: center;
      font-size: 0.7rem; }
    .top_goods .category_grid p {
      padding-top: 5%; }

  .top_about {
    position: relative; }
    .top_about .txt_area {
      margin-bottom: 3%;
      width: 35%; }
      .top_about .txt_area p {
        margin-bottom: 3%; }
      .top_about .txt_area p:last-child {
        margin-bottom: 0; }
    .top_about .link_btn {
      width: 35%;
      margin-bottom: 3%; }
    .top_about dl {
      margin-bottom: 1%; }
      .top_about dl dt {
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 5px; }
    .top_about dl:last-child {
      margin-bottom: 0; }
    .top_about .google_map iframe {
      width: 34vw;
      height: 23vw;
      position: absolute;
      right: 0%;
      bottom: 0; }

  .ttlarea {
    padding: 3% 0 2% 0; }
    .ttlarea .section_ttl {
      padding-bottom: 0%;
      font-size: 1.8rem; }
    .ttlarea p {
      font-size: 0.8vw; }

  .product_list .product_filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2%; }
  .product_list .check {
    display: flex;
    align-items: center;
    gap: 8px; }
    .product_list .check input {
      display: none; }
    .product_list .check input:checked + .checkmark::after {
      display: block; }
    .product_list .check input:checked + .checkmark {
      background-color: var(--color-primary);
      border-color: var(--color-primary); }
    .product_list .check .checkmark {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid #ccc;
      border-radius: 4px;
      position: relative;
      vertical-align: middle;
      margin-right: 0vw;
      cursor: pointer; }
    .product_list .check .checkmark::after {
      content: "";
      position: absolute;
      display: none;
      left: 6px;
      top: 2px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg); }
  .product_list .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 4%; }
  .product_list .sort {
    position: relative; }
  .product_list .sort_btn {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-primary); }
  .product_list .arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg); }
  .product_list .sort_menu {
    position: absolute;
    top: 30px;
    right: 0;
    width: 240px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    display: none;
    z-index: 10; }
    .product_list .sort_menu li {
      padding: 12px 20px;
      cursor: pointer; }
    .product_list .sort_menu li:hover {
      background: #f3f3f3; }
    .product_list .sort_menu li.active {
      font-weight: bold; }
  .product_list .sort_menu.show {
    display: block; }
  .product_list .section_ttl {
    padding-bottom: 2%; }
  .product_list .product-count {
    font-size: 0.7rem;
    margin-bottom: 2%;
    color: var(--color-font-hover); }

  .product-card {
    margin-bottom: 5%;
    /* NEWバッジ */
    /* 商品情報 */ }
    .product-card .img {
      position: relative; }
    .product-card .img img {
      width: 100%;
      display: block; }
    .product-card a {
      display: block; }
    .product-card a:hover {
      opacity: 0.7; }
    .product-card .badge {
      position: absolute;
      top: 0;
      left: 0;
      background: var(--color-accent-red);
      color: #fff;
      padding: 5px 20px 20px 5px;
      font-size: 0.6rem;
      clip-path: polygon(0 0, 100% 0, 0 100%); }
    .product-card .image-grid {
      margin-bottom: 3%;
      display: grid;
      grid-template-columns: 2.05fr 1fr;
      gap: 5px;
      aspect-ratio: 4 / 3; }
    .product-card .sub-imgs {
      display: grid;
      gap: 5px; }
    .product-card .name {
      font-size: 1.0rem; }
    .product-card .count {
      font-size: 0.7rem;
      color: var(--color-font-hover);
      position: relative; }
      .product-card .count span {
        position: absolute;
        right: 0; }
    .product-card .info {
      line-height: 1.5;
      padding: 8% 0 3% 0; }
      .product-card .info h3 {
        margin-bottom: 3%; }
      .product-card .info p {
        margin-bottom: 3%; }
      .product-card .info .brand {
        font-size: 0.9rem;
        font-family: "helvetica-lt-pro", sans-serif;
        margin-bottom: 0; }
      .product-card .info .name {
        font-size: 0.7rem; }
      .product-card .info .price {
        font-size: 0.9rem;
        font-family: "helvetica-lt-pro", sans-serif;
        margin-bottom: 0; }
        .product-card .info .price span {
          margin-left: 5px;
          font-size: 0.6rem; }
      .product-card .info .number {
        font-size: 0.7rem;
        color: var(--color-font-hover);
        font-family: "helvetica-lt-pro", sans-serif; }
    .product-card .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center; }
    .product-card .status {
      font-size: 0.7rem;
      padding: 2px 8px;
      line-height: 1.8;
      white-space: nowrap; }
    .product-card .orderdate {
      font-size: 1.0rem;
      font-family: "helvetica-lt-pro", sans-serif;
      margin-bottom: 2%; }
    .product-card .info-box {
      display: flex;
      justify-content: space-between;
      line-height: 1.5; }
      .product-card .info-box .status {
        font-size: 0.6rem;
        padding: 2px 8px 2px 8px; }
      .product-card .info-box .price {
        font-size: 0.8rem;
        font-family: "helvetica-lt-pro", sans-serif; }

  .product_filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5%; }
    .product_filter .check {
      margin-left: auto; }
    .product_filter .sort {
      margin-left: 10px; }

  .product {
    /*product_list*/ }
    .product .product-card {
      width: 17%; }
    .product .product-count {
      font-size: 0.7rem;
      margin-bottom: 2%;
      color: var(--color-font-hover); }

  .product-box {
    display: flex;
    justify-content: space-between;
    padding-top: 3%;
    /* NEWバッジ */
    /* 商品情報 */ }
    .product-box .product_gallery {
      display: grid;
      grid-template-columns: 1fr 15.2%;
      gap: 2%;
      margin-bottom: 0%;
      width: 55%; }
      .product-box .product_gallery .gallery_nav {
        display: block;
        flex-direction: column;
        gap: 15px; }
        .product-box .product_gallery .gallery_nav .flickity-viewport {
          display: block; }
        .product-box .product_gallery .gallery_nav .flickity-viewport {
          overflow: inherit; }
        .product-box .product_gallery .gallery_nav .flickity-slider {
          position: static !important;
          transform: none !important;
          display: block;
          flex-direction: column;
          gap: 0px; }
      .product-box .product_gallery .nav_cell {
        width: 100% !important;
        position: static !important;
        cursor: pointer;
        transform: none !important;
        margin-bottom: 8px; }
        .product-box .product_gallery .nav_cell img {
          width: 100%;
          display: block;
          opacity: .4;
          transition: .3s; }
      .product-box .product_gallery .nav_cell.is-nav-selected img {
        opacity: 1;
        border: 2px solid var(--color-primary);
        box-sizing: border-box; }
      .product-box .product_gallery .gallery_main {
        position: relative; }
      .product-box .product_gallery .main_cell img {
        width: 100%;
        display: block; }
      .product-box .product_gallery .main_image img {
        width: 100%;
        display: block; }
      .product-box .product_gallery .thumb_list {
        display: flex;
        flex-direction: column;
        gap: 2%; }
        .product-box .product_gallery .thumb_list img {
          width: 100%;
          cursor: pointer;
          opacity: .5;
          transition: .35s; }
        .product-box .product_gallery .thumb_list img:hover {
          opacity: .7; }
        .product-box .product_gallery .thumb_list img.active {
          border: 1px solid var(--color-primary);
          opacity: 1; }
    .product-box .product_info {
      width: 40%; }
    .product-box .badge {
      position: absolute;
      top: 0;
      left: 0;
      background: var(--color-accent-red);
      color: #fff;
      padding: 2vw 5vw 6vw 1vw;
      font-size: 0.6rem;
      clip-path: polygon(0 0, 100% 0, 0 100%); }
    .product-box .info {
      line-height: 1.5;
      padding: 8% 0 3% 0; }
      .product-box .info h3 {
        margin-bottom: 3%; }
      .product-box .info p {
        margin-bottom: 3%; }
      .product-box .info .brand {
        font-size: 0.9rem;
        font-family: "helvetica-lt-pro", sans-serif;
        margin-bottom: 0; }
      .product-box .info .name {
        font-size: 0.7rem; }
      .product-box .info .price {
        font-size: 0.9rem;
        font-family: "helvetica-lt-pro", sans-serif;
        margin-bottom: 0; }
        .product-box .info .price span {
          margin-left: 5px;
          font-size: 0.6rem; }
      .product-box .info .number {
        font-size: 0.7rem;
        color: var(--color-font-hover);
        font-family: "helvetica-lt-pro", sans-serif; }
    .product-box .bottom {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 5%; }
    .product-box .status {
      font-size: 0.7rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      margin-right: 20px; }
    .product-box .detail {
      font-size: 0.8rem;
      margin-bottom: 6%; }
    .product-box .actions {
      margin-bottom: 8%; }
      .product-box .actions .cart_btn {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 2% 0;
        border: 1px solid var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        transition: .35s;
        margin-bottom: 3%; }
      .product-box .actions .cart_btn::after {
        content: "›";
        position: absolute;
        right: 5%;
        top: 17%;
        font-size: 1.0rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .product-box .actions .cart_btn:hover {
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        background: var(--color-bg);
        transition: .35s; }
      .product-box .actions .bookmark_btn {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 2% 0;
        border: 1px solid var(--color-primary);
        transition: .35s; }
      .product-box .actions .bookmark_btn::after {
        content: "›";
        position: absolute;
        right: 5%;
        top: 17%;
        font-size: 1.0rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .product-box .actions .bookmark_btn:hover {
        border: 1px solid var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        transition: .35s; }
    .product-box .tags h3 {
      margin-bottom: 3%; }
    .product-box .tags .tag_list {
      display: flex;
      flex-wrap: wrap;
      gap: 5px; }
      .product-box .tags .tag_list a {
        padding: 8px 10px;
        background: #fff;
        font-size: 0.7rem; }
      .product-box .tags .tag_list a:hover {
        background: var(--color-primary);
        color: #fff; }

  .product_relateditem {
    background: var(--color-secondary);
    padding: 3% 0% 1% 0%;
    margin-bottom: 1%; }
    .product_relateditem h2 {
      margin-bottom: 1%; }
    .product_relateditem .horizontal-scroll {
      display: flex;
      overflow-x: auto;
      gap: 30px;
      margin-bottom: 0%;
      padding-bottom: 0%;
      scroll-behavior: smooth;
      cursor: grab;
      user-select: none;
      position: relative;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--color-font-hover); }
      .product_relateditem .horizontal-scroll a {
        -webkit-user-drag: none; }
      .product_relateditem .horizontal-scroll img {
        -webkit-user-drag: none; }
    .product_relateditem .horizontal-scroll::-webkit-scrollbar {
      height: 2px; }
    .product_relateditem .horizontal-scroll::-webkit-scrollbar-track {
      background: var(--color-font-hover); }
    .product_relateditem .horizontal-scroll::-webkit-scrollbar-thumb {
      background: var(--color-font-hover); }
    .product_relateditem .horizontal-scroll:active {
      cursor: grabbing; }
    .product_relateditem .horizontal-scroll::-webkit-scrollbar {
      height: 2px;
      width: 20px;
      background: var(--color-font-hover); }
    .product_relateditem .horizontal-scroll::-webkit-scrollbar-thumb {
      background: var(--color-primary);
      background: var(--color-primary); }
    .product_relateditem .product-card {
      flex: 0 0 16vw;
      flex-shrink: 0;
      croll-snap-align: start; }
      .product_relateditem .product-card a {
        display: block; }
    .product_relateditem .image-grid {
      margin-bottom: 3%;
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 0px;
      aspect-ratio: 4 / 3; }
    .product_relateditem .name {
      font-size: 1.0rem; }
    .product_relateditem .count {
      font-size: 0.7rem;
      color: var(--color-font-hover); }

  .backbtn {
    padding: 2% 0 6% 0; }
    .backbtn a {
      position: relative;
      display: block;
      text-align: center;
      padding: 1% 0;
      width: 120px;
      margin: 0 auto; }
    .backbtn a::after {
      content: "›";
      position: absolute;
      right: 0%;
      top: 12%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
    .backbtn a:hover {
      opacity: 0.8; }

  .step_container {
    padding: 4% 0 3% 0; }
    .step_container .step_flow {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
      padding: 0% 30%; }
    .step_container .step_flow::before {
      content: "";
      position: absolute;
      top: 28%;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--color-font-hover);
      z-index: 0; }
    .step_container .step {
      text-align: center;
      position: relative;
      z-index: 1;
      width: 25%; }
    .step_container .step_circle {
      width: 2.0rem;
      height: 2.0rem;
      border-radius: 50%;
      border: 1px solid var(--color-font-hover);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      line-height: 1;
      color: var(--color-font-hover);
      background: var(--color-bg);
      margin: 0 auto 0 auto; }
    .step_container .step.active .step_circle {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #fff; }
    .step_container .step p {
      font-size: 0.7rem;
      color: var(--color-font-hover);
      padding-top: 0.3rem; }
    .step_container .step.active p {
      color: var(--color-primary); }
    .step_container .step.end .step_circle {
      background: var(--color-font-hover);
      border-color: var(--color-font-hover);
      color: #fff; }

  .ttl_container {
    width: 90%;
    margin: 0 auto 0% auto; }
    .ttl_container h2 {
      font-size: 1.8rem; }

  .cart_container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 36%;
    gap: 80px; }
    .cart_container .date {
      font-size: 1.0rem;
      font-family: "helvetica-lt-pro", sans-serif;
      line-height: 1.5;
      margin-bottom: 5%; }
    .cart_container .status {
      margin-bottom: 2%;
      display: flex;
      justify-content: flex-start; }
      .cart_container .status .price {
        font-family: "helvetica-lt-pro", sans-serif;
        margin-left: 10px;
        font-size: 1.0rem; }
      .cart_container .status .available {
        font-size: 0.7rem;
        padding: 3px 8px;
        line-height: 1.8;
        white-space: nowrap;
        background: var(--color-primary);
        color: #fff; }
      .cart_container .status .delay {
        font-size: 0.7rem;
        padding: 3px 8px;
        line-height: 1.8;
        white-space: nowrap;
        background: var(--color-accent-red);
        color: #fff; }
      .cart_container .status .reservation {
        font-size: 0.7rem;
        padding: 3px 8px;
        line-height: 1.8;
        white-space: nowrap;
        background: var(--color-accent-green);
        color: #fff; }
    .cart_container input {
      font-size: 0.8rem; }
    .cart_container label {
      display: block;
      padding: 0.5% 0;
      cursor: pointer; }
    .cart_container textarea {
      width: 100%;
      height: 10vw; }
    .cart_container .noitem {
      font-size: 1.2rem;
      margin-bottom: 20%;
      text-align: center; }
    .cart_container .note {
      padding: 1% 0; }
    .cart_container .product_list {
      margin-bottom: 10%; }
    .cart_container .customer_info {
      font-size: 0.8rem;
      margin-bottom: 10%; }
      .cart_container .customer_info dl {
        display: table;
        width: 100%;
        margin-bottom: 1%; }
        .cart_container .customer_info dl dt {
          display: table-cell;
          width: 20%;
          font-size: 0.8rem; }
        .cart_container .customer_info dl dd {
          display: table-cell;
          width: 75%; }
    .cart_container .pickup_data {
      margin-bottom: 10%; }
      .cart_container .pickup_data dl {
        margin-bottom: 2%; }
        .cart_container .pickup_data dl dt {
          font-size: 0.7rem; }
      .cart_container .pickup_data .date {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0; }
        .cart_container .pickup_data .date dl {
          width: 48%; }
          .cart_container .pickup_data .date dl dd input[type="date"] {
            width: 100%; }
    .cart_container .payment_Info {
      margin-bottom: 10%; }
    .cart_container .use_point {
      margin-bottom: 10%; }
      .cart_container .use_point .note {
        color: var(--color-font-hover);
        padding-top: 1.5%; }
    .cart_container .notes {
      margin-bottom: 5%; }
      .cart_container .notes textarea {
        font-size: 0.8rem; }
    .cart_container .cart_ttl {
      font-size: 1.2rem;
      padding-bottom: 1%;
      margin-bottom: 3%;
      border-bottom: 1px solid var(--color-font-hover);
      position: relative; }
      .cart_container .cart_ttl button {
        width: 30px;
        position: absolute;
        right: 0;
        top: 10px; }
        .cart_container .cart_ttl button svg {
          fill: var(--color-primary); }
    .cart_container .product_cell {
      display: flex;
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--color-font-hover); }
      .cart_container .product_cell .pht {
        width: 80px;
        margin-right: 20px; }
      .cart_container .product_cell .info {
        line-height: 1.5;
        width: 100%; }
        .cart_container .product_cell .info h3 {
          margin-bottom: 5px; }
        .cart_container .product_cell .info p {
          margin-bottom: 5px; }
        .cart_container .product_cell .info .brand {
          font-size: 0.9rem;
          font-weight: 500;
          margin-bottom: 1px; }
        .cart_container .product_cell .info .name {
          font-size: 0.6rem;
          margin-bottom: 7px; }
        .cart_container .product_cell .info .price {
          font-size: 0.9rem;
          font-weight: 500;
          font-family: "helvetica-lt-pro", sans-serif;
          margin-bottom: 2px; }
          .cart_container .product_cell .info .price span {
            font-size: 0.7rem;
            margin-left: 0.3rem;
            font-weight: normal; }
        .cart_container .product_cell .info .number {
          font-size: 0.6rem;
          color: var(--color-font-hover);
          font-family: "helvetica-lt-pro", sans-serif;
          margin-bottom: 1px; }
        .cart_container .product_cell .info .delete {
          font-size: 0.6rem;
          text-align: right;
          margin-left: auto;
          text-decoration: underline;
          text-underline-offset: 5px;
          margin-bottom: 0; }
    .cart_container .cart_aside .cart_asideinner {
      position: sticky;
      display: block;
      top: 0;
      right: 0;
      padding-top: 30px; }
    .cart_container .price_container {
      margin-bottom: 5%; }
      .cart_container .price_container .total_container {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        display: flex;
        padding: 0.5% 0; }
        .cart_container .price_container .total_container .ttl {
          font-size: 0.8rem; }
        .cart_container .price_container .total_container .price {
          font-weight: 500;
          font-size: 1.5rem;
          font-family: "helvetica-lt-pro", sans-serif; }
          .cart_container .price_container .total_container .price span {
            font-size: 0.7rem;
            font-weight: normal; }
      .cart_container .price_container .price_cell {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        display: flex;
        padding: 0.5% 0; }
        .cart_container .price_container .price_cell .ttl {
          font-size: 0.8rem; }
        .cart_container .price_container .price_cell .price {
          font-size: 0.8rem;
          font-family: "helvetica-lt-pro", sans-serif; }
          .cart_container .price_container .price_cell .price span {
            font-size: 0.7rem;
            font-weight: normal; }
    .cart_container .note {
      font-size: 0.7rem;
      margin-bottom: 0%; }
      .cart_container .note a {
        text-decoration: underline;
        text-underline-offset: 5px; }
    .cart_container .actions {
      margin-bottom: 5%; }
      .cart_container .actions .checkout_btn {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 5% 0;
        border: 1px solid var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        transition: .35s;
        margin-bottom: 5%; }
      .cart_container .actions .checkout_btn::after {
        content: "›";
        position: absolute;
        right: 5%;
        top: 17%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .cart_container .actions .checkout_btn:hover {
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        background: var(--color-bg);
        transition: .35s; }
      .cart_container .actions .shopping_btn {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 5% 0;
        border: 1px solid var(--color-primary);
        transition: .35s; }
      .cart_container .actions .shopping_btn::after {
        content: "›";
        position: absolute;
        right: 5%;
        top: 17%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .cart_container .actions .shopping_btn:hover {
        border: 1px solid var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        transition: .35s; }

  .complete_container {
    text-align: center;
    padding: 3% 0 0% 0; }
    .complete_container h2 {
      font-size: 1.6rem;
      margin-bottom: 3%; }
    .complete_container p {
      font-size: 1.0rem;
      margin-bottom: 3%; }
    .complete_container .actions {
      width: 350px;
      margin: 0 auto; }
      .complete_container .actions .checkout_btn {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 5% 0;
        border: 1px solid var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        transition: .35s;
        margin-bottom: 5%; }
      .complete_container .actions .checkout_btn::after {
        content: "›";
        position: absolute;
        right: 5%;
        top: 17%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .complete_container .actions .checkout_btn:hover {
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        background: var(--color-bg);
        transition: .35s; }
      .complete_container .actions .shopping_btn {
        width: 100%;
        position: relative;
        display: block;
        text-align: center;
        padding: 5% 0;
        border: 1px solid var(--color-primary);
        transition: .35s; }
      .complete_container .actions .shopping_btn::after {
        content: "›";
        position: absolute;
        right: 5%;
        top: 17%;
        font-size: 1.2rem;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
      .complete_container .actions .shopping_btn:hover {
        border: 1px solid var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        transition: .35s; }

  /* mypage*/
  .mypage_container .mypage_menu {
    padding: 3% 0 3% 0; }
    .mypage_container .mypage_menu ul {
      display: flex;
      justify-content: space-between;
      font-size: 0.9rem;
      text-align: center; }
      .mypage_container .mypage_menu ul li {
        width: 33%; }
        .mypage_container .mypage_menu ul li a {
          display: block;
          padding: 5px 10px;
          background: #fff; }
          .mypage_container .mypage_menu ul li a:hover {
            background: var(--color-primary);
            color: #fff; }
          .mypage_container .mypage_menu ul li a.active {
            background: var(--color-primary);
            color: #fff; }
        .mypage_container .mypage_menu ul li:last-child {
          margin-right: 0; }
  .mypage_container .ttlarea {
    position: relative; }
    .mypage_container .ttlarea .btn {
      position: absolute;
      right: 0;
      top: 40%;
      display: flex;
      justify-content: space-between;
      width: 100px; }
      .mypage_container .ttlarea .btn li {
        width: 45%; }
        .mypage_container .ttlarea .btn li button {
          width: 100%;
          height: 100%; }
        .mypage_container .ttlarea .btn li a {
          display: block; }
      .mypage_container .ttlarea .btn li:nth-child(2) button {
        border-radius: 50%;
        background: #ececec;
        cursor: pointer;
        width: 100%;
        height: 100%; }
    .mypage_container .ttlarea .share_icon {
      fill: var(--color-primary); }
    .mypage_container .ttlarea .edit_icon {
      fill: var(--color-primary); }
    .mypage_container .ttlarea .edit_menu {
      position: absolute;
      top: 60px;
      right: 0;
      width: 240px;
      background: #fff;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      padding: 20px 0;
      display: none;
      z-index: 10; }
      .mypage_container .ttlarea .edit_menu li {
        padding: 12px 20px;
        cursor: pointer; }
      .mypage_container .ttlarea .edit_menu li:hover {
        background: #f3f3f3; }
      .mypage_container .ttlarea .edit_menu .delete {
        color: var(--color-accent-red);
        padding: 0; }
        .mypage_container .ttlarea .edit_menu .delete a {
          color: var(--color-accent-red); }
        .mypage_container .ttlarea .edit_menu .delete button {
          color: var(--color-accent-red); }
    .mypage_container .ttlarea .edit_menu.show {
      display: block; }
  .mypage_container .mypage_news {
    margin-bottom: 30px; }
    .mypage_container .mypage_news .accordion_mypage {
      border-top: 1px solid var(--color-accent-dgray);
      border-bottom: 1px solid var(--color-accent-dgray); }
      .mypage_container .mypage_news .accordion_mypage a {
        transition: .35s; }
      .mypage_container .mypage_news .accordion_mypage a:hover {
        transition: .35s; }
      .mypage_container .mypage_news .accordion_mypage .accordion_mypage_item {
        position: relative; }
        .mypage_container .mypage_news .accordion_mypage .accordion_mypage_item:has(.accordion_mypage_toggle:checked) .accordion_mypage_content {
          grid-template-rows: 1fr;
          visibility: visible; }
        .mypage_container .mypage_news .accordion_mypage .accordion_mypage_item:has(.accordion_mypage_toggle:checked) .accordion_mypage_header {
          color: var(--color-font-hover); }
          .mypage_container .mypage_news .accordion_mypage .accordion_mypage_item:has(.accordion_mypage_toggle:checked) .accordion_mypage_header .att {
            opacity: 0.5; }
          .mypage_container .mypage_news .accordion_mypage .accordion_mypage_item:has(.accordion_mypage_toggle:checked) .accordion_mypage_header .icon {
            transform: rotate(180deg); }
            .mypage_container .mypage_news .accordion_mypage .accordion_mypage_item:has(.accordion_mypage_toggle:checked) .accordion_mypage_header .icon::after {
              transform: translateX(-50%) scaleY(0); }
      .mypage_container .mypage_news .accordion_mypage .accordion_mypage_toggle {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
        top: 0;
        left: 0; }
        .mypage_container .mypage_news .accordion_mypage .accordion_mypage_toggle:checked ~ .accordion_mypage_header {
          color: var(--color-font); }
        .mypage_container .mypage_news .accordion_mypage .accordion_mypage_toggle:checked ~ .accordion_mypage_header .icon {
          transform: rotate(180deg); }
        .mypage_container .mypage_news .accordion_mypage .accordion_mypage_toggle:checked ~ .accordion_mypage_header .icon::after {
          transform: translateX(-50%) scaleY(0); }
      .mypage_container .mypage_news .accordion_mypage .accordion_mypage_header {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        transition: .3s;
        font-size: 0.9rem;
        padding: 1.6rem 0; }
      .mypage_container .mypage_news .accordion_mypage .att {
        background: var(--color-accent-red);
        color: #fff;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        padding: 0 5px;
        text-align: center;
        line-height: 1.7;
        margin-left: 5px;
        font-size: 0.8rem; }
      .mypage_container .mypage_news .accordion_mypage .icon {
        position: relative;
        width: 14px;
        height: 14px;
        transition: .35s;
        margin-left: auto; }
        .mypage_container .mypage_news .accordion_mypage .icon::before, .mypage_container .mypage_news .accordion_mypage .icon::after {
          content: "";
          position: absolute;
          background: var(--color-font); }
        .mypage_container .mypage_news .accordion_mypage .icon::before {
          top: 50%;
          left: 0;
          width: 100%;
          height: 0.5px;
          transform: translateY(-50%);
          transition: .35s; }
        .mypage_container .mypage_news .accordion_mypage .icon::after {
          left: 50%;
          top: 0;
          width: 0.5px;
          height: 100%;
          transform: translateX(-50%);
          transition: .35s; }
      .mypage_container .mypage_news .accordion_mypage .accordion_mypage_content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .4s ease;
        visibility: hidden; }
        .mypage_container .mypage_news .accordion_mypage .accordion_mypage_content .accordion_mypage_inner {
          overflow: hidden;
          min-height: 0; }
          .mypage_container .mypage_news .accordion_mypage .accordion_mypage_content .accordion_mypage_inner .accordion_mypage_grid {
            padding-bottom: 0px; }
            .mypage_container .mypage_news .accordion_mypage .accordion_mypage_content .accordion_mypage_inner .accordion_mypage_grid a {
              display: block; }
            .mypage_container .mypage_news .accordion_mypage .accordion_mypage_content .accordion_mypage_inner .accordion_mypage_grid li {
              border-top: 1px solid var(--color-accent-dgray);
              padding: 20px 0;
              font-size: 0.8rem; }
            .mypage_container .mypage_news .accordion_mypage .accordion_mypage_content .accordion_mypage_inner .accordion_mypage_grid p {
              padding-top: 20px; }
  .mypage_container .product_list {
    margin-bottom: 18%; }
    .mypage_container .product_list .product_filter {
      justify-content: flex-end; }
    .mypage_container .product_list .link_btn {
      width: 30%;
      margin: 0 auto; }
  .mypage_container .bookmark_container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 30px;
    margin-bottom: 30px; }
    .mypage_container .bookmark_container .product-card {
      margin-bottom: 30px; }
  .mypage_container .bookmark_detail .product-card {
    position: relative; }
    .mypage_container .bookmark_detail .product-card .check {
      position: absolute;
      right: 0;
      top: 0; }
  .mypage_container .bookmark_detail .product-card .delete_check:has(input:checked) .box:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5); }
  .mypage_container .bookmark_detail .product-card .delete_check {
    cursor: pointer;
    display: block;
    position: relative; }
    .mypage_container .bookmark_detail .product-card .delete_check input {
      display: none; }
      .mypage_container .bookmark_detail .product-card .delete_check input:checked + .delete_checkmark {
        background: var(--color-primary);
        border-color: var(--color-primary); }
        .mypage_container .bookmark_detail .product-card .delete_check input:checked + .delete_checkmark::after {
          display: block; }
    .mypage_container .bookmark_detail .product-card .delete_check .delete_checkmark {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 3;
      width: 18px;
      height: 18px;
      border: 1px solid var(--color-primary);
      background: var(--color-bg); }
      .mypage_container .bookmark_detail .product-card .delete_check .delete_checkmark::after {
        content: "";
        position: absolute;
        display: none;
        left: 5px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg); }
  .mypage_container .bookmark_detail .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 60px 30px;
    margin-bottom: 5%; }
  .mypage_container .bookmark_detail .read_area p {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 3%; }
  .mypage_container .mypage_ttl_area {
    display: flex;
    justify-content: space-between;
    padding: 5% 0 2% 0; }
    .mypage_container .mypage_ttl_area h2 {
      font-size: 1.4rem; }
    .mypage_container .mypage_ttl_area .search_box {
      position: relative;
      width: 30%; }
      .mypage_container .mypage_ttl_area .search_box input {
        background: none;
        width: 100%;
        border: none;
        border-bottom: 1px solid var(--color-accent-dgray);
        padding: 1rem 3rem 1rem 0;
        color: var(--color-font); }
        .mypage_container .mypage_ttl_area .search_box input:focus {
          outline: none;
          border-bottom: 1px solid var(--color-accent-dgray); }
      .mypage_container .mypage_ttl_area .search_box .search_icon {
        position: absolute;
        right: 12px;
        top: 40%;
        width: 24px;
        height: 24px;
        transform: translateY(-50%);
        pointer-events: none; }
        .mypage_container .mypage_ttl_area .search_box .search_icon .serch {
          fill: var(--color-font); }
  .mypage_container .history .product_list .product_filter {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .mypage_container .history .product_list .product_filter .check {
      margin-left: auto; }
    .mypage_container .history .product_list .product_filter .sort {
      margin-left: auto; }
  .mypage_container .history .history_container a {
    display: block;
    border-bottom: 1px solid var(--color-accent-dgray);
    margin-bottom: 30px; }
    .mypage_container .history .history_container a:hover {
      opacity: 0.5; }
  .mypage_container .history .history_container .date {
    margin-bottom: 0px;
    font-size: 1.2rem;
    font-family: "helvetica-lt-pro", sans-serif;
    line-height: 1.5;
    margin-bottom: 5px; }
  .mypage_container .history .history_container .status {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start; }
    .mypage_container .history .history_container .status .price {
      font-family: "helvetica-lt-pro", sans-serif;
      margin-left: 10px;
      font-size: 1.0rem; }
    .mypage_container .history .history_container .status .available {
      font-size: 0.7rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      background: var(--color-primary);
      color: #fff; }
    .mypage_container .history .history_container .status .delay {
      font-size: 0.7rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      background: var(--color-accent-red);
      color: #fff; }
    .mypage_container .history .history_container .status .reservation {
      font-size: 0.7rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      background: var(--color-accent-green);
      color: #fff; }
  .mypage_container .history .history_container .grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 30px;
    margin-bottom: 25px; }
  .mypage_container .ttlarea textarea {
    width: 80%;
    height: 62px;
    border: none;
    background: var(--color-accent-dgray); }
  .mypage_container .bookmark_read_area textarea {
    width: 100%;
    height: 80px;
    border: none;
    background: var(--color-accent-dgray);
    margin-bottom: 2%; }
  .mypage_container .order .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2vw 1vw; }
  .mypage_container .product_list {
    margin-bottom: 5%; }
  .mypage_container .mydate {
    margin-bottom: 0px;
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 1%;
    font-family: "helvetica-lt-pro", sans-serif; }
  .mypage_container .mystatus {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 3%; }
    .mypage_container .mystatus .price {
      font-family: "helvetica-lt-pro", sans-serif;
      margin-left: 10px;
      font-size: 1.0rem; }
    .mypage_container .mystatus .available {
      font-size: 0.8rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      background: var(--color-primary);
      color: #fff; }
    .mypage_container .mystatus .delay {
      font-size: 0.8rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      background: var(--color-accent-red);
      color: #fff; }
    .mypage_container .mystatus .reservation {
      font-size: 0.8rem;
      padding: 3px 8px;
      line-height: 1.8;
      white-space: nowrap;
      background: var(--color-accent-green);
      color: #fff; }
  .mypage_container .info_container {
    padding: 3% 0;
    width: 35%; }
    .mypage_container .info_container .total_container {
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      display: flex;
      padding: 0.5% 0; }
      .mypage_container .info_container .total_container .ttl {
        font-size: 0.8rem; }
      .mypage_container .info_container .total_container .price {
        font-weight: 600;
        font-size: 1.2rem; }
        .mypage_container .info_container .total_container .price span {
          font-size: 0.7rem;
          font-weight: normal; }
    .mypage_container .info_container .cell {
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      display: flex;
      padding: 0.5% 0; }
      .mypage_container .info_container .cell .ttl {
        font-size: 0.8rem; }
      .mypage_container .info_container .cell .price {
        font-size: 0.8rem; }
        .mypage_container .info_container .cell .price span {
          font-size: 0.7rem;
          font-weight: normal; }
  .mypage_container .backbtn {
    padding: 2% 0 6% 0; }
    .mypage_container .backbtn a {
      position: relative;
      display: block;
      text-align: center;
      padding: 1% 0;
      width: 20%;
      margin: 0 auto; }
    .mypage_container .backbtn a::after {
      content: "›";
      position: absolute;
      right: 0%;
      top: 12%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
    .mypage_container .backbtn a:hover {
      opacity: 0.8; }
  .mypage_container .bookmark_btn {
    width: 72%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; }
    .mypage_container .bookmark_btn .btn_primary {
      width: 48%;
      padding: 2% 0; }
    .mypage_container .bookmark_btn .btn_delete {
      width: 48%;
      padding: 2% 0; }
    .mypage_container .bookmark_btn .btn_nomal {
      width: 48%;
      padding: 2% 0; }
  .mypage_container .bookmark_onbtn {
    width: 72%;
    margin: 0 auto;
    display: flex;
    justify-content: center; }
    .mypage_container .bookmark_onbtn .btn_primary {
      width: 48%;
      padding: 2% 0; }
    .mypage_container .bookmark_onbtn .btn_delete {
      width: 48%;
      padding: 2% 0; }
    .mypage_container .bookmark_onbtn .btn_nomal {
      width: 48%;
      padding: 2% 0; }
  .mypage_container .form_ttl_area {
    padding: 4% 0; }
    .mypage_container .form_ttl_area h2 {
      padding-bottom: 0; }
    .mypage_container .form_ttl_area p {
      font-size: 0.7rem; }
  .mypage_container .input_area .read_txt {
    margin-bottom: 5%; }
  .mypage_container .input_area input {
    background: #fff;
    font-size: 0.9rem; }
  .mypage_container .input_area textarea {
    background: #fff;
    font-size: 0.9rem;
    width: 100%;
    height: 100px; }
  .mypage_container .input_area .select-box {
    position: relative; }
    .mypage_container .input_area .select-box select {
      width: 100%;
      padding: 10px 14px;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
      border-radius: 0;
      background: #fff;
      padding-right: 25px; }
    .mypage_container .input_area .select-box select::-ms-expand {
      display: none; }
    .mypage_container .input_area .select-box::after {
      position: absolute;
      top: 45%;
      right: 15px;
      content: '';
      width: 7px;
      height: 7px;
      border-left: var(--color-primary) solid 1px;
      border-bottom: var(--color-primary) solid 1px;
      transform: rotate(-45deg) translateY(-50%);
      pointer-events: none; }
  .mypage_container .input_area .on_wrap {
    width: 100%; }
    .mypage_container .input_area .on_wrap input {
      width: 100%;
      margin-bottom: 1%; }
  .mypage_container .input_area .tw_wrap {
    width: 100%;
    display: flex;
    justify-content: space-between; }
    .mypage_container .input_area .tw_wrap input {
      width: 49.5%;
      margin-bottom: 0%; }
  .mypage_container .input_area dl {
    margin-bottom: 3%;
    display: flex;
    justify-content: space-between; }
  .mypage_container .input_area dt {
    margin-bottom: 1%;
    width: 30%;
    padding: 12px 0 0 0; }
  .mypage_container .input_area dd {
    width: 70%; }
  .mypage_container .input_area .zip_area {
    display: flex;
    margin-bottom: 1%; }
    .mypage_container .input_area .zip_area input {
      width: 40%; }
  .mypage_container .input_area .zipserch {
    color: var(--color-accent-gray); }
    .mypage_container .input_area .zipserch a {
      display: flex;
      justify-content: flex-start; }
      .mypage_container .input_area .zipserch a span {
        padding: 12px 7px 0 14px; }
      .mypage_container .input_area .zipserch a svg {
        fill: var(--color-accent-gray);
        width: 0.8rem;
        margin-top: 12px; }
      .mypage_container .input_area .zipserch a:hover {
        color: var(--color-primary);
        text-decoration: underline; }
  .mypage_container .input_area .adress1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1%; }
    .mypage_container .input_area .adress1 .select-box {
      width: 29%; }
    .mypage_container .input_area .adress1 input[type="text"] {
      border: 1px solid var(--color-secondary);
      padding: 8px 14px;
      width: 70%; }
  .mypage_container .input_area .radio_area {
    display: flex; }
    .mypage_container .input_area .radio_area label {
      margin-right: 20px;
      cursor: pointer;
      display: flex; }
    .mypage_container .input_area .radio_area span {
      margin-top: -2px; }
    .mypage_container .input_area .radio_area input {
      margin-right: 5px; }
  .mypage_container .input_area input[type="file"] {
    padding: 10px;
    cursor: pointer; }
  .mypage_container .input_area .teems_check .check {
    justify-content: center;
    padding: 4% 0 6% 0; }
  .mypage_container .input_area .actions {
    width: 80%;
    display: flex;
    justify-content: space-between; }
    .mypage_container .input_area .actions .btn_primary {
      width: 49%;
      padding: 18px 0; }
    .mypage_container .input_area .actions a {
      width: 49%;
      padding: 18px 0; }
  .mypage_container .input_area .actions.on_btn {
    width: 30%;
    display: block; }
    .mypage_container .input_area .actions.on_btn .btn_primary {
      width: 100%;
      padding: 18px 0; }
    .mypage_container .input_area .actions.on_btn a {
      width: 49%;
      padding: 18px 0; }

  .brand_container .search_box {
    position: relative; }
    .brand_container .search_box input {
      background: none;
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--color-accent-dgray);
      padding: 1rem 3rem 1rem 0; }
      .brand_container .search_box input:focus {
        outline: none;
        border-bottom: 1px solid var(--color-accent-dgray); }
    .brand_container .search_box .search_icon {
      position: absolute;
      right: 12px;
      top: 60%;
      width: 24px;
      height: 24px;
      transform: translateY(-50%);
      pointer-events: none; }
      .brand_container .search_box .search_icon .serch {
        fill: var(--color-font); }
  .brand_container .alphabet {
    padding: 2rem 0;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 3px;
    font-family: "helvetica-lt-pro", sans-serif;
    margin-bottom: 5%; }
    .brand_container .alphabet a {
      display: block;
      text-align: center;
      background: none;
      border: none;
      cursor: pointer;
      transition: .35s;
      color: var(--color-font);
      white-space: nowrap;
      padding: 1rem 0; }
      .brand_container .alphabet a.active {
        opacity: .5;
        transition: .35s;
        color: #fff;
        background: var(--color-secondary); }
      .brand_container .alphabet a:hover {
        opacity: .5;
        transition: .35s;
        color: #fff;
        background: var(--color-secondary); }
  .brand_container h3 {
    border-bottom: 1px solid var(--color-font-hover);
    font-size: 1.2rem;
    padding-bottom: 1%;
    margin-bottom: 3%; }
  .brand_container .search_links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 0% 0;
    font-family: "helvetica-lt-pro", sans-serif;
    margin-bottom: 8%; }
    .brand_container .search_links .search_box {
      display: block;
      padding: 3% 0;
      position: relative; }
    .brand_container .search_links .search_box::after {
      content: "›";
      position: absolute;
      right: 0;
      top: 10%;
      font-size: 1.2rem;
      font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
    .brand_container .search_links .search_box:hover {
      color: var(--color-font-hover); }
  .brand_container .more {
    text-align: center; }
    .brand_container .more button {
      color: var(--color-accent-gray); }

  .login_container .pht {
    width: 90px;
    text-align: center;
    margin: 0 auto 3% auto; }
  .login_container .section_ttl {
    padding: 5% 0 2% 0; }
  .login_container .input_area {
    width: 50%;
    margin: 0 auto; }
  .login_container input {
    background: #fff;
    font-size: 0.9rem; }
  .login_container .on_wrap {
    width: 100%; }
    .login_container .on_wrap input {
      width: 100%; }
  .login_container .pass {
    text-align: center;
    text-decoration: underline;
    margin-bottom: 10%; }
  .login_container .backbtn {
    padding: 0% 0 4% 0; }
  .login_container dl {
    margin-bottom: 5%; }
    .login_container dl:last-child {
      margin-bottom: 1%; }
  .login_container dt {
    margin-bottom: 1%; }
  .login_container .actions {
    padding: 3% 0 0 0; }
    .login_container .actions .btn_primary {
      padding: 15px 0; }
    .login_container .actions .btn_nomal {
      padding: 15px 0; }
  .login_container .backbtn a {
    width: 200px; }
  .login_container .ttl_area {
    text-align: center;
    padding: 15% 0 8% 0; }
    .login_container .ttl_area h2 {
      font-size: 1.6rem;
      margin-bottom: 2%; }

  .other_container .ttl_area {
    padding: 3% 0; }
  .other_container .top_txt {
    margin-bottom: 3%; }
  .other_container .right_txt {
    text-align: right; }
  .other_container .txt_area dl {
    margin-bottom: 4%; }
    .other_container .txt_area dl dt {
      font-weight: 600;
      margin-bottom: 1%;
      font-size: 1.0rem; }
    .other_container .txt_area dl dd p {
      margin-bottom: 1%; }
    .other_container .txt_area dl dd ol li {
      list-style: decimal;
      margin-left: 25px;
      margin-bottom: 1%; }
  .other_container .tabel_area dl {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 4%; }
    .other_container .tabel_area dl dt {
      font-weight: 600;
      margin-bottom: 1%;
      width: 27%; }
    .other_container .tabel_area dl dd {
      width: 73%; }
      .other_container .tabel_area dl dd p {
        margin-bottom: 1%; }
      .other_container .tabel_area dl dd ol li {
        list-style: decimal;
        margin-left: 25px;
        margin-bottom: 1%; }

  .actions .btn_primary {
    width: 100%;
    position: relative;
    display: block;
    text-align: center;
    padding: 5% 0;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    transition: .35s;
    margin-bottom: 3%; }
  .actions .btn_primary::after {
    content: "›";
    position: absolute;
    right: 5%;
    top: 17%;
    font-size: 1.2rem;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
  .actions .btn_primary:hover {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background: var(--color-bg);
    transition: .35s; }
  .actions .btn_delete {
    width: 100%;
    position: relative;
    display: block;
    text-align: center;
    padding: 5% 0;
    border: 1px solid var(--color-accent-red);
    background: var(--color-accent-red);
    color: #fff;
    transition: .35s;
    margin-bottom: 3%; }
  .actions .btn_delete::after {
    content: "›";
    position: absolute;
    right: 5%;
    top: 17%;
    font-size: 1.2rem;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
  .actions .btn_delete:hover {
    border: 1px solid var(--color-accent-red);
    color: var(--color-accent-red);
    background: var(--color-bg);
    transition: .35s; }
  .actions .btn_nomal {
    width: 100%;
    position: relative;
    display: block;
    text-align: center;
    padding: 5% 0;
    border: 1px solid var(--color-primary);
    transition: .35s;
    margin-bottom: 3%; }
  .actions .btn_nomal::after {
    content: "›";
    position: absolute;
    right: 5%;
    top: 17%;
    font-size: 1.2rem;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; }
  .actions .btn_nomal:hover {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    transition: .35s; }

  .modal-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    top: 0;
    left: 0;
    z-index: 10;
    display: none; }

  .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

  .modal-content {
    width: 400px;
    background-color: #fff;
    position: relative;
    padding: 30px;
    box-sizing: border-box;
    position: relative; }
    .modal-content ul {
      margin-bottom: 30px;
      padding-top: 10px;
      height: 300px;
      overflow-y: auto;
      padding-right: 20px; }
      .modal-content ul li {
        position: relative;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--color-accent-dgray); }
        .modal-content ul li .info {
          width: 80%; }
        .modal-content ul li .name {
          font-size: 1.0rem; }
        .modal-content ul li .count {
          font-size: 0.7rem;
          color: var(--color-font-hover);
          position: relative; }
          .modal-content ul li .count span {
            position: absolute;
            right: 0; }
    .modal-content .icon {
      position: relative;
      width: 14px;
      height: 14px;
      transition: .35s;
      position: absolute;
      right: 0;
      top: 30%; }
      .modal-content .icon::before, .modal-content .icon::after {
        content: "";
        position: absolute;
        background: var(--color-font-hover); }
      .modal-content .icon::before {
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        transform: translateY(-50%);
        transition: .35s; }
      .modal-content .icon::after {
        left: 50%;
        top: 0;
        width: 1px;
        height: 100%;
        transform: translateX(-50%);
        transition: .35s; }

  .modalClose {
    display: block;
    text-align: center;
    color: #2675BC;
    transition: .5s; }

  .modalClose:hover {
    opacity: .5; }

  .close-btn {
    position: absolute;
    right: 25px;
    top: 25px;
    cursor: pointer; }

  .close-btn > div {
    width: 25px;
    height: 25px;
    position: relative; }

  .close-btn > div > span {
    width: 100%;
    height: 1px;
    background-color: var(--color-font);
    position: absolute;
    top: 50%;
    transform: translateY(-50%); }

  .close-btn > div > span:first-of-type {
    transform: rotate(45deg); }

  .close-btn > div > span:last-of-type {
    transform: rotate(-45deg); }

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

  .about_container {
    position: relative; }
    .about_container .ttl_area {
      overflow: hidden;
      padding: 6% 0 3% 0; }
      .about_container .ttl_area h2 {
        font-family: "helvetica-lt-pro", sans-serif;
        font-weight: 600;
        font-size: 6.5vw;
        letter-spacing: 0;
        line-height: 1.0;
        margin-left: -10px;
        margin-bottom: 4%; }
      .about_container .ttl_area p {
        font-size: 1.4rem;
        font-weight: 600;
        margin-left: 5%;
        line-height: 1.5; }
    .about_container .read_area {
      margin-bottom: 3%;
      margin-left: 5%;
      width: 44%; }
      .about_container .read_area h3 {
        margin-bottom: 2%; }
    .about_container .pht {
      position: absolute;
      right: 0;
      top: 6%;
      width: 34%; }
    .about_container .txt_area {
      margin-bottom: 4%;
      margin-left: 5%;
      width: 44%; }
      .about_container .txt_area div {
        margin-bottom: 8%; }
        .about_container .txt_area div h4 {
          margin-bottom: 4%; }
          .about_container .txt_area div h4 b {
            font-family: "helvetica-lt-pro", sans-serif;
            font-weight: 600;
            font-size: 2.8vw;
            line-height: 1.3;
            letter-spacing: 0; }
          .about_container .txt_area div h4 span {
            font-weight: 500;
            font-size: 1.0rem; }
    .about_container .last_txt {
      margin-left: 0%;
      padding: 2% 0;
      border-top: 1px solid var(--color-font-hover);
      border-bottom: 1px solid var(--color-font-hover);
      margin-bottom: 10%; }

  .aboutdetail_container {
    position: relative;
    display: flex;
    justify-content: space-between; }
    .aboutdetail_container .txt_area {
      margin-bottom: 3%;
      width: 35%; }
      .aboutdetail_container .txt_area p {
        margin-bottom: 3%; }
      .aboutdetail_container .txt_area p:last-child {
        margin-bottom: 0; }
    .aboutdetail_container .link_btn {
      width: 35%;
      margin-bottom: 3%; }
    .aboutdetail_container dl {
      margin-bottom: 1%; }
      .aboutdetail_container dl dt {
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 5px; }
    .aboutdetail_container dl:last-child {
      margin-bottom: 0; }
    .aboutdetail_container .google_map iframe {
      width: 34vw;
      height: 23vw; } }
@media screen and (min-width: 481px) and (max-width: 960px) {
  body {
    font-size: 0.8rem; }

  .tab {
    display: none; }

  header {
    /* hamburger */
    /* menu */ }
    header .logo {
      padding: 2% 0;
      border-bottom: 1px solid var(--color-accent-dgray); }
      header .logo a {
        display: block;
        width: 100px;
        margin: 0 auto; }
    header .menu_btn {
      position: fixed;
      top: 19px;
      right: 20px;
      width: 40px;
      height: 18px;
      cursor: pointer;
      z-index: 2000; }
      header .menu_btn span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--color-primary);
        transition: .35s; }
        header .menu_btn span:nth-child(1) {
          top: 0; }
        header .menu_btn span:nth-child(2) {
          top: 8px; }
        header .menu_btn span:nth-child(3) {
          bottom: 0; }
    header #menu_toggle {
      display: none; }
    header #menu_toggle:checked + .menu_btn span:nth-child(1) {
      top: 10px;
      transform: rotate(25deg);
      background: var(--color-secondary); }
    header #menu_toggle:checked + .menu_btn span:nth-child(2) {
      opacity: 0; }
    header #menu_toggle:checked + .menu_btn span:nth-child(3) {
      top: 10px;
      transform: rotate(-25deg);
      background: var(--color-secondary); }
    header #menu_toggle:checked ~ .global_menu {
      right: 0; }
    header .global_menu {
      position: fixed;
      top: 0;
      right: -100%;
      width: 50%;
      height: 100vh;
      background: var(--color-primary);
      overflow-y: auto;
      transition: 0.45s cubic-bezier(0.76, 0, 0.24, 1);
      z-index: 1500;
      padding-bottom: 25%;
      border-left: 1px solid var(--color-accent-dgray); }
      header .global_menu .logo {
        padding: 4% 0; }
        header .global_menu .logo a {
          width: 100px; }
      header .global_menu a {
        color: #fff; }
      header .global_menu .accordion {
        margin: 0 5%;
        border-top: 1px solid var(--color-accent-dgray); }
      header .global_menu .sns {
        display: flex;
        justify-content: space-between;
        width: 20%;
        padding: 0 0 15% 5%; }
        header .global_menu .sns li {
          width: 38%; }
          header .global_menu .sns li a {
            display: block;
            background: var(--color-font-hover);
            border-radius: 100%;
            padding: 23%; }
            header .global_menu .sns li a:hover {
              background: #fff; }
      header .global_menu .otherLink {
        padding: 8% 5%; }
        header .global_menu .otherLink li a {
          display: block;
          padding: 1% 0;
          font-size: .8rem; }
          header .global_menu .otherLink li a:hover {
            color: var(--color-font-hover); }
      header .global_menu .loginArea {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15%; }
        header .global_menu .loginArea a {
          display: block;
          width: 49.9%;
          text-align: center;
          background: #fff;
          color: var(--color-font);
          font-size: .7rem;
          padding: 3% 0; }
          header .global_menu .loginArea a .icon {
            fill: var(--color-font);
            width: 14%;
            margin: 0 auto; }
          header .global_menu .loginArea a:hover {
            background: var(--color-font-hover); }
    header .under_menu {
      position: fixed;
      bottom: 0;
      display: flex;
      z-index: 2;
      border-top: 1px solid var(--color-accent-dgray);
      opacity: 0;
      transform: translateY(30px);
      animation: under_men .6s ease forwards; }
      header .under_menu li {
        width: 20%;
        position: relative; }
        header .under_menu li a {
          display: block;
          background: var(--color-primary);
          color: var(--color-bg);
          font-size: 1.4vw;
          text-align: center;
          padding: 8% 0; }
          header .under_menu li a .icon {
            width: 17%;
            margin: 0 auto; }
          header .under_menu li a .icn {
            fill: var(--color-bg); }
      header .under_menu li::after {
        content: "";
        width: 0.5px;
        height: 100%;
        background: var(--color-bg);
        position: absolute;
        right: 0;
        top: 0; }
      header .under_menu li:last-child a {
        background: var(--color-accent-gold); }
      header .under_menu li:last-child::after {
        width: 0px; }
  @keyframes under_men {
    0% {
      opacity: 0;
      transform: translateY(30px); }
    100% {
      opacity: 1;
      transform: translateY(0); } }
    header .txtsearch_box {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      border-bottom: 1px solid var(--color-accent-dgray); }
      header .txtsearch_box input {
        flex: 1;
        border: none;
        outline: none;
        padding: 10px 20px;
        background: var(--color-bg); }
      header .txtsearch_box input::placeholder {
        color: var(--color-font-hover); }
    header .txtsearch_btn {
      width: 12%;
      height: 100%;
      border: none;
      background: var(--color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 10px 0; }
      header .txtsearch_btn svg {
        width: 22px;
        height: 22px;
        fill: var(--color-font-hover);
        margin-top: 2px; }
      header .txtsearch_btn p {
        display: none; }

  .nav .global_menu {
    display: none; }
  .nav .desktop_nav {
    display: none; }

  footer {
    position: relative;
    width: 100%;
    font-size: .8rem;
    padding: 8% 0 12% 0; }
    footer .sns {
      display: flex;
      justify-content: space-between;
      width: 12%;
      position: absolute;
      right: 5%;
      top: 4%; }
      footer .sns li {
        width: 38%; }
        footer .sns li a {
          display: block;
          background: var(--color-font-hover);
          border-radius: 100%;
          padding: 23%; }
          footer .sns li a:hover {
            background: #fff; }
    footer .copy {
      font-size: .8rem; }
    footer .information {
      overflow: hidden;
      margin: 0 5% 6% 5%; }
      footer .information h2 {
        width: 15%;
        margin-bottom: 8%; }
      footer .information dl {
        float: left;
        width: 50%; }
        footer .information dl dt {
          font-weight: 600;
          font-size: .8rem;
          margin-bottom: 2%; }
        footer .information dl:last-child {
          margin-bottom: 0; }
        footer .information dl dd {
          font-size: .7rem; }
    footer nav {
      margin: 0 5%; }
    footer .otherLink {
      padding: 6% 0; }
      footer .otherLink ul {
        display: flex;
        flex-wrap: wrap;
        font-size: 0.7rem; }
      footer .otherLink li {
        width: 25%;
        margin-bottom: 2%; }
        footer .otherLink li a {
          display: block;
          padding: 1% 0; }
          footer .otherLink li a:hover {
            color: var(--color-font-hover); }
    footer .accordion_content .accordion_inner ul {
      display: flex;
      flex-wrap: wrap; }
      footer .accordion_content .accordion_inner ul li {
        width: 32%; }
    footer .loginArea {
      display: flex;
      justify-content: space-between;
      margin-bottom: 3%; }
      footer .loginArea a {
        display: block;
        width: 49.9%;
        text-align: center;
        background: #fff;
        color: var(--color-font);
        font-size: .7rem;
        padding: 2% 0; }
        footer .loginArea a .icon {
          fill: var(--color-font);
          width: 6%;
          margin: 0 auto; }
        footer .loginArea a:hover {
          background: var(--color-font-hover); }

  .top_brand {
    margin-bottom: 8%; }
    .top_brand .alphabet {
      padding: 1rem 0;
      display: grid;
      grid-template-columns: repeat(14, 1fr);
      gap: 3px; }
      .top_brand .alphabet button {
        background: none;
        border: none;
        cursor: pointer;
        transition: .35s;
        color: var(--color-font);
        white-space: nowrap; }
        .top_brand .alphabet button.active {
          opacity: .5;
          transition: .35s;
          color: #fff;
          background: var(--color-secondary); }
        .top_brand .alphabet button:hover {
          opacity: .5;
          transition: .35s;
          color: #fff;
          background: var(--color-secondary); }
    .top_brand .search_links {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3%;
      padding: 2% 0; }
    .top_brand .more {
      text-align: center; }
      .top_brand .more button {
        color: var(--color-accent-gray); }

  .top_tabs {
    display: none; }

  .top_newitem {
    margin-bottom: 8%; }
    .top_newitem .link_btn {
      width: 50%;
      margin: 0 auto; }
    .top_newitem .product-card {
      width: 30%;
      margin-bottom: 5%; }

  .top_category {
    margin-bottom: 16%; }
    .top_category .category_grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4% 2%; }
      .top_category .category_grid .icn {
        width: 6vw;
        height: 6vw;
        margin: auto;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center; }
        .top_category .category_grid .icn img {
          width: 60%; }
      .top_category .category_grid a {
        display: block; }
      .top_category .category_grid li {
        text-align: center;
        font-size: 0.75rem; }
      .top_category .category_grid p {
        padding-top: 5%; }

  .top_color {
    margin-bottom: 8%; }
    .top_color .color_grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2% 4%; }
      .top_color .color_grid .icn {
        width: 6vw;
        height: 6vw;
        margin: auto;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center; }
        .top_color .color_grid .icn img {
          width: 90%; }
      .top_color .color_grid a {
        display: block; }
      .top_color .color_grid li {
        text-align: center;
        font-size: 0.7rem; }
      .top_color .color_grid p {
        padding-top: 5%; }

  .top_goods {
    margin-bottom: 8%; }
    .top_goods .category_grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2% 4%; }
      .top_goods .category_grid .icn {
        width: 6vw;
        height: 6vw;
        margin: auto;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center; }
        .top_goods .category_grid .icn img {
          width: 60%; }
      .top_goods .category_grid a {
        display: block; }
      .top_goods .category_grid li {
        text-align: center;
        font-size: 0.7rem; }
      .top_goods .category_grid p {
        padding-top: 5%; }

  .top_about {
    margin-bottom: 16%; }

  .mypage_container .order .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2vw 1vw; }
  .mypage_container .info_container {
    padding: 3% 0;
    width: 100%; }

  footer .accordion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2% 4%;
    border: none; }
    footer .accordion .accordion_item:nth-child(1) {
      border-top: 0.5px solid #6F6F6F; }
    footer .accordion .accordion_item:nth-child(2) {
      border-top: 0.5px solid #6F6F6F; }

  .about_container {
    position: relative; }
    .about_container .ttl_area h2 {
      margin-left: -4px; }
    .about_container .last_txt {
      width: 90%;
      margin: 0 auto 5% auto; } }
@media screen and (min-width: 961px) {
  .w-md {
    width: 60%;
    margin: 0 auto 8% auto; }

  .w-lg {
    width: 72%;
    margin: 0 auto 8% auto; }

  .w-full {
    width: 100%;
    margin-bottom: 8%; }

  body {
    font-size: 0.9rem; }

  .sp {
    display: none; }

  header.hide {
    top: -80px;
    /* ヘッダー高さ分 */ }

  header {
    position: fixed;
    background: var(--color-bg);
    top: 0;
    left: 0;
    width: 100%;
    transition: top 0.3s ease;
    z-index: 1000; }
    header .logo {
      padding: 23px 0% 23px 0; }
      header .logo a {
        display: block;
        width: 90px;
        margin: 0 auto; }
    header .menu_btn {
      display: none; }
    header #menu_toggle {
      display: none; }
    header .under_menu {
      z-index: 2;
      display: flex;
      justify-content: space-between;
      width: 150px;
      position: absolute;
      left: 3%;
      top: 20px; }
      header .under_menu li {
        width: 18%;
        position: relative; }
        header .under_menu li a {
          display: block;
          font-size: 2.6vw;
          text-align: center;
          padding: 16% 0; }
          header .under_menu li a .icon {
            width: 80%;
            margin: 0 auto; }
          header .under_menu li a .icn {
            fill: var(--color-primary);
            transition: .35s; }
          header .under_menu li a p {
            display: none; }
        header .under_menu li a:hover .icn {
          fill: var(--color-font-hover);
          transition: .35s; }
      header .under_menu li:first-child {
        display: none; }
    header .txtsearch_box {
      position: absolute;
      top: 20px;
      right: 3%;
      display: flex;
      height: 35px; }
      header .txtsearch_box input {
        border: 1px solid var(--color-primary);
        outline: none;
        width: 300px;
        padding: 10px 20px;
        background: var(--color-bg); }
      header .txtsearch_box input::placeholder {
        color: var(--color-font-hover); }
    header .txtsearch_btn {
      width: 110px;
      height: 100%;
      border: none;
      background: var(--color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 10px 0; }
      header .txtsearch_btn svg {
        width: 1.5vw;
        height: 1.2vw;
        fill: var(--color-font-hover);
        margin-top: 1%; }
      header .txtsearch_btn p {
        color: var(--color-font-hover);
        font-weight: normal; }
    header .global_menu {
      display: none; }

  .nav .desktop_nav {
    /* メガメニュー */ }
    .nav .desktop_nav .nav_list {
      display: flex;
      gap: 40px;
      justify-content: center;
      padding-bottom: 10px;
      font-size: 0.8rem; }
    .nav .desktop_nav .nav_item {
      padding-top: 0.5vw; }
      .nav .desktop_nav .nav_item a {
        padding: 1vw 0; }
    .nav .desktop_nav .mega_menu {
      position: absolute;
      top: 100%;
      z-index: 100;
      left: calc(-0vw);
      right: 0;
      top: 100px;
      transform: translateY(20px);
      transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      background: var(--color-primary);
      border-bottom: 1px solid var(--color-accent-dgray);
      visibility: hidden;
      transform: translateY(10px);
      transition: .3s ease;
      opacity: 0;
      font-size: 0.8rem; }
      .nav .desktop_nav .mega_menu .ttl {
        color: #fff;
        padding: 40px 0 20px 0px;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 500; }
      .nav .desktop_nav .mega_menu a {
        color: #fff; }
      .nav .desktop_nav .mega_menu a:hover {
        color: var(--color-font-hover); }
      .nav .desktop_nav .mega_menu ul {
        padding: 20px 40px 40px 40px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 10px; }
    .nav .desktop_nav .nav_item:nth-child(4) .mega_menu ul {
      grid-template-columns: repeat(6, 1fr);
      text-align: center; }
    .nav .desktop_nav .nav_item:nth-child(5) .mega_menu ul {
      grid-template-columns: repeat(7, 1fr);
      text-align: center; }
    .nav .desktop_nav .nav_item:hover .mega_menu {
      opacity: 1;
      padding: 10px 0;
      visibility: visible;
      transform: translateY(0); }

  footer {
    width: 100%;
    font-size: 0.8rem;
    padding: 5% 0; }
    footer section {
      overflow: hidden;
      position: relative;
      padding: 0 5%;
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 2% 4%; }
    footer .copy {
      font-size: 0.8rem; }
    footer .information {
      position: relative; }
      footer .information h2 {
        width: 25%;
        margin-bottom: 8%; }
      footer .information dl {
        margin-bottom: 5%; }
        footer .information dl dt {
          font-weight: 600;
          font-size: 0.9rem;
          margin-bottom: 2%; }
      footer .information dl:last-child {
        margin-bottom: 0; }
      footer .information .sns {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        justify-content: space-between;
        width: 15%;
        margin: 0 auto 2% auto;
        clear: both;
        padding-top: 2%; }
        footer .information .sns li {
          width: 43%; }
          footer .information .sns li a {
            display: block;
            background: var(--color-font-hover);
            border-radius: 100%;
            padding: 23%; }
          footer .information .sns li a:hover {
            background: #fff; }
    footer .accordion {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2% 4%;
      border: none; }
      footer .accordion .accordion_item:nth-child(1) {
        border-top: 0.5px solid #6F6F6F; }
      footer .accordion .accordion_item:nth-child(2) {
        border-top: 0.5px solid #6F6F6F; }
    footer .otherLink {
      padding: 5% 0 3% 0; }
      footer .otherLink ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 2% 4%; }
      footer .otherLink li a {
        display: block;
        padding: 1% 0; }
      footer .otherLink li a:hover {
        color: var(--color-font-hover); }
    footer .loginArea {
      display: flex;
      margin-bottom: 3%;
      justify-content: space-between; }
      footer .loginArea a {
        display: block;
        width: 49.9%;
        text-align: center;
        background: #fff;
        color: var(--color-font);
        font-size: 0.7rem;
        padding: 1% 0; }
        footer .loginArea a .icon {
          fill: var(--color-font);
          width: 6%;
          margin: 0 auto; }
      footer .loginArea a:hover {
        background: var(--color-font-hover); }

  main {
    padding-top: 60px; }

  #check_btn {
    display: none; }

  .label_btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    background: #fff;
    padding: 10px 0; }
    .label_btn svg {
      width: 0.9rem;
      margin-right: 0.5rem;
      transition: .35s; }
    .label_btn p {
      font-size: 0.8rem;
      transition: .35s; }

  .label_btn:hover .serch {
    fill: #ccc;
    transition: .35s; }
  .label_btn:hover p {
    color: #ccc;
    transition: .35s; }

  .wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease; }
    .wrapper .content {
      overflow: hidden;
      /* はみ出しを隠す */
      opacity: 0;
      transform: translateY(-20px);
      transition: 0.4s ease; }

  #check_btn:checked + .wrapper {
    grid-template-rows: 1fr;
    /* 高さを中身に合わせる */ }

  #check_btn:checked + .wrapper .content {
    opacity: 1;
    transform: translateY(0); }

  .ttl_container {
    width: 72%;
    margin: 0 auto 3% auto; }

  .tcolum-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    width: 72%;
    margin: 0 auto 8% auto; }

  .top_goods {
    width: 100%; }
    .top_goods .category_grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4% 2%; }

  .top_color {
    width: 100%; }
    .top_color .color_grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4% 2%; }

  .product_relateditem .w-lg {
    margin-bottom: 1%; }

  .about_container {
    position: relative; }
    .about_container .ttl_area {
      overflow: hidden;
      padding: 5% 0 3% 0; }
      .about_container .ttl_area h2 {
        margin-left: -10px; }
      .about_container .ttl_area p {
        margin-left: 14%; }
    .about_container .read_area {
      margin-left: 14%;
      width: 35%; }
    .about_container .pht {
      position: absolute; }
    .about_container .txt_area {
      margin-left: 14%;
      width: 35%; }
    .about_container .last_txt {
      width: 72%;
      margin: 0 auto 10% auto; } }