@charset "UTF-8";
@font-face {
  font-family: "ZenKakuGothicNew";
  src: url("../font/ZenKakuGothicNew-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }
@font-face {
  font-family: "ZenKakuGothicNew";
  src: url("../font/ZenKakuGothicNew-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }
@font-face {
  font-family: "ZenKakuGothicNew";
  src: url("../font/ZenKakuGothicNew-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: "Jost";
  src: url("../font/Jost-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Jost";
  src: url("../font/Jost-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }
@font-face {
  font-family: "Jost";
  src: url("../font/Jost-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal; }
[v-cloak] {
  display: none; }

html {
  font-size: 62.5%;
  /* 10px*/ }

body {
  background-color: #FFF;
  margin: 0;
  font-family: "ZenKakuGothicNew";
  font-weight: 500;
  font-size: 1.6rem;
  /* 16px */
  letter-spacing: 0.1em; }

.font-ja {
  font-family: "ZenKakuGothicNew"; }

.font-en {
  font-family: "Jost"; }

.font-bold {
  font-weight: bold; }

.text-c {
  text-align: center; }

.flex-c {
  display: flex;
  justify-content: center; }

.text-red {
  color: #FE0000; }

.margin-2em {
  margin: 2em; }

.margin-t6em {
  margin-top: 6em; }

.flex-box {
  display: flex; }

.br-sp {
  display: none; }

main {
  width: 100%;
  max-width: 1500px;
  min-height: calc(100vh - 100px);
  padding-bottom: 3em;
  margin: 0 auto; }

.container {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto; }

.max-w1240 {
  max-width: 1240px;
  margin: 0 auto; }

.max-w1280 {
  max-width: 1280px;
  margin: 0 auto; }

.max-w1300 {
  max-width: 1300px;
  margin: 0 auto; }

.max-w1500 {
  max-width: 1500px;
  margin: 0 auto; }

.bg-mint {
  background: #e7f6f1; }

.border {
  border: 1px solid #e7f6f1;
  margin: 20px 0;
  width: 100%; }
  .border.full::after {
    content: "";
    position: absolute;
    left: 0;
    border-top: 1px solid #aedfcd;
    width: calc(100vw - 15px); }
  .border.gray {
    border: 1px solid #FFF; }
    .border.gray::after {
      border-color: #E2E2E2;
      border-width: 2px; }

.notes-wrap {
  background: #F2F2F2;
  padding: 1em;
  font-size: 1.4rem;
  max-width: 850px;
  margin: 3em 0;
  line-height: 1.8; }

.pagination {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  gap: 10px; }
  .pagination .pagination-item {
    font-family: "Jost";
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    background-color: #f2f2f2;
    color: #333;
    font-size: 1.6rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none; }
  .pagination .pagination-item.active {
    background-color: #38B281; }
    .pagination .pagination-item.active a {
      color: #FFF;
      font-size: 2rem; }
  .pagination .pagination-arrow {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none; }
    .pagination .pagination-arrow::before {
      content: "";
      width: 100%;
      height: 100%;
      background: url("../images/i-ac-arrow.svg") no-repeat center; }
    .pagination .pagination-arrow.prev::before {
      transform: rotate(90deg); }
    .pagination .pagination-arrow.next::before {
      transform: rotate(-90deg); }

@media screen and (max-width: 768px) {
  .br-sp {
    display: block; }

  .pagination {
    gap: 5px; }

  .pagination .pagination-item {
    width: 45px;
    height: 45px; }

  .pagination .pagination-arrow {
    width: 45px;
    height: 45px; } }
button {
  transition: all .3s;
  line-height: 1.2; }
  button:hover {
    opacity: 0.5; }

a:hover {
  opacity: 0.5;
  cursor: pointer; }

.btn-style0 {
  border: 1px solid #F0F0F0;
  background: #FFF;
  color: #000;
  border-radius: 40px;
  width: 100%;
  max-width: 160px;
  height: 100%;
  padding: 10px;
  font-weight: bold;
  text-align: center; }

.btn-style1 {
  display: block;
  text-align: center;
  vertical-align: middle;
  background: #38B281;
  color: #FFF;
  border-radius: 40px;
  width: 100%;
  max-width: 250px;
  padding: 10px; }
  .btn-style1.black {
    background: #000; }

.btn-style2 {
  display: block;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #F0F0F0;
  background: #FFF;
  color: #000;
  width: 100%;
  max-width: 250px;
  padding: 10px;
  font-weight: bold; }

.btn-style3 {
  display: block;
  text-align: center;
  vertical-align: middle;
  background: #FFF;
  color: #38B281;
  border: 1px solid #38B281;
  border-radius: 40px;
  width: 100%;
  max-width: 250px;
  padding: 10px; }

.btn-style4 {
  display: block;
  text-align: center;
  vertical-align: middle;
  background: #FFF;
  font-weight: bold;
  border: 1px solid #CCC;
  font-size: 1.4rem;
  padding: 10px; }

.btn-logout {
  display: inline-block;
  color: #38B281;
  text-decoration: underline;
  margin: 1em 0; }

.btn-more {
  display: block;
  text-align: center;
  vertical-align: middle;
  background: #38B281;
  color: #FFF;
  border-radius: 40px;
  width: 100%;
  max-width: 250px;
  padding: 20px;
  margin: 5em auto;
  position: relative; }
  .btn-more::before {
    content: "";
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    background: #FFF;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    border-radius: 50%; }
  .btn-more::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 21px;
    width: 14px;
    height: 14px;
    border-left: 2px solid #39B282;
    border-bottom: 2px solid #39B282;
    transform: rotate(-45deg); }

.big {
  padding: 20px; }

.basic-btn {
  color: #000;
  background: #FFF;
  border: 1px solid #BFBFBF;
  padding: 10px;
  text-align: center;
  display: block; }
  .basic-btn.black {
    background: #000;
    color: #FFF; }

button:disabled {
  background: #ccc;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1 !important; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.2rem;
  padding: 1em;
  width: 95%;
  margin: 0 auto; }
  .breadcrumb li::after {
    content: ">";
    padding: 0 1em; }
  .breadcrumb li a {
    color: #38B281; }
  .breadcrumb li:last-of-type:after {
    content: none; }
  .breadcrumb li:last-of-type a {
    color: #000;
    cursor: default; }
    .breadcrumb li:last-of-type a:hover {
      opacity: 1;
      text-decoration: none;
      pointer-events: none; }

.title-style1 {
  font-family: "ZenKakuGothicNew";
  text-align: center;
  letter-spacing: 0.05em;
  font-weight: 500; }
  .title-style1 h2 {
    font-size: 4rem;
    font-weight: 500; }
  .title-style1 span {
    font-family: "Jost";
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: #3bb383;
    display: block; }

.title-style2 {
  /*背景グレーのタイトル*/
  width: 100%;
  background: #F0F0F0;
  padding: 25px 0; }
  .title-style2 h2 {
    font-family: "Jost";
    font-weight: 500;
    font-size: 3rem;
    letter-spacing: 0.2em;
    text-align: center;
    margin: 2em 0 3em 0; }
  .title-style2.mint {
    background: #E7F6F1; }

.title-style3 {
  font-family: "ZenKakuGothicNew";
  font-size: 1.8rem;
  margin: 0.5em 0; }

.title-style4 {
  margin-bottom: 1em; }
  .title-style4 h2 {
    font-family: "ZenKakuGothicNew";
    font-size: 2.5rem; }
  .title-style4 span {
    display: inline-block;
    font-family: "Jost";
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    color: #3bb383;
    margin-left: 1em; }

.title-style5 {
  width: 100%;
  padding: 20px;
  font-size: 1.6rem;
  font-weight: normal;
  border-bottom: 1px solid #E2E2E2; }

@media screen and (max-width: 768px) {
  .breadcrumb {
    width: 100%;
    padding: 0.5em; }
    .breadcrumb li {
      margin-bottom: 5px; }
    .breadcrumb li::after {
      padding: 0 0.5em; }

  .title-style1 h2 {
    font-size: 3.5rem; }

  .title-style2 {
    padding: 10px; }

  .title-style2 h2 {
    margin: 2em 0; }

  .title-style4 h2 {
    font-size: 2rem; }
  .title-style4 span {
    margin: 0; } }
::placeholder {
  color: #A0A0A0; }

::-ms-reveal {
  display: none; }

input, select {
  color: #000;
  font-size: 1.6rem; }

.form-wrap {
  width: 100%; }

.password-group {
  position: relative;
  width: 100%; }
  .password-group .password-toggle {
    position: absolute;
    right: 1.5rem;
    top: 55%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer; }

.form-style1 {
  /* 右に項目,左にフォーム */
  width: 100%;
  max-width: 760px; }
  .form-style1 .form-wrap {
    display: flex;
    margin-bottom: 1.5em; }
    .form-style1 .form-wrap .title {
      width: 250px; }
    .form-style1 .form-wrap .help-text {
      display: block;
      font-size: 1.4rem;
      line-height: 1.5; }
  .form-style1.form-border .form-wrap {
    padding-bottom: 1em;
    border-bottom: 1px dotted #BFBFBF; }

.form-wrap .title {
  width: 230px;
  line-height: 2.6; }
  .form-wrap .title.required {
    position: relative; }
    .form-wrap .title.required::after {
      position: absolute;
      right: 10px;
      top: 11px;
      content: "必須";
      display: inline-block;
      color: #FFF;
      background: #39B282;
      height: 1.5em;
      font-size: 1.4rem;
      padding: 0.1em 0.5em;
      line-height: 1.2; }
  .form-wrap .title.required2 {
    margin-right: 5px; }
    .form-wrap .title.required2::before {
      content: "※";
      color: #38B281; }
.form-wrap .form-group-input {
  width: 100%;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center; }
.form-wrap .unalterable {
  line-height: 1.5;
  word-break: break-all;
  min-height: 44px; }
.form-wrap .error-wrap {
  /* エラーメッセージ */
  margin: 0.5em 0;
  width: 100%; }
  .form-wrap .error-wrap .balloon {
    width: 100%;
    font-size: 1.4rem;
    color: #FF0000;
    background: #FFF5F5;
    border: solid 1px #FF0000;
    padding: 0.5em; }
.form-wrap .kome {
  font-size: 1.4rem;
  line-height: 1.6; }

/* テキストボックス */
.form-group-input input {
  width: 100%;
  border: 1px solid #CCC;
  height: 44px;
  padding: 0 0.5em; }
.form-group-input.postal-code {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  align-items: center; }
  .form-group-input.postal-code input {
    max-width: 200px; }
.form-group-input .birth-date-group {
  display: flex;
  align-items: baseline; }

/* テキストボックス 2つ */
.form-double {
  display: flex;
  gap: 0 10px;
  flex-wrap: wrap; }
  .form-double input {
    flex: 1; }

/* チェックボックス */
.checkbox-group {
  margin: 20px 0; }

.checkbox-item {
  display: flex;
  align-items: flex-start;
  margin: 15px 0; }
  .checkbox-item label {
    cursor: pointer;
    flex: 1; }
  .checkbox-item input[type="checkbox"] {
    margin-top: 5px;
    margin-right: 2em;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer; }
  .checkbox-item input[type="checkbox"]:checked {
    background-color: #fff;
    position: relative; }
  .checkbox-item input[type="checkbox"]:checked:after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg); }

/* ラジオボタン */
.form-group-radio {
  display: flex;
  align-items: center;
  gap: 10px; }
  .form-group-radio label {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-right: 3em;
    cursor: pointer; }
    .form-group-radio label:last-of-type {
      margin-right: 0; }
  .form-group-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 50%;
    outline: none;
    position: relative; }
    .form-group-radio input[type="radio"]:checked {
      border-color: #0078d4; }
    .form-group-radio input[type="radio"]:checked::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #0078d4; }

/* ドロップボックス */
.form-group-select {
  display: flex;
  flex-wrap: wrap; }
  .form-group-select .wrap {
    position: relative;
    border: 1px solid #CCC;
    min-width: 200px; }
    .form-group-select .wrap::before {
      position: absolute;
      top: 50%;
      right: 0;
      width: 34px;
      height: 100%;
      border-left: 1px solid #BFBFBF;
      padding: 0;
      content: "";
      color: #000;
      font-size: 1.3em;
      pointer-events: none;
      transform: translateY(-50%);
      z-index: 10;
      background: #ffffff; }
    .form-group-select .wrap::after {
      position: absolute;
      top: 45%;
      right: 11px;
      width: 0.8em;
      height: 1em;
      padding: 0;
      content: "∨";
      color: #000;
      font-size: 1.3rem;
      pointer-events: none;
      transform: translateY(-50%);
      z-index: 10; }
    .form-group-select .wrap select {
      padding: 10px;
      width: 100%; }

/* 確認画面 */
.conf-wrap {
  max-width: 700px;
  margin: 3em auto; }
  .conf-wrap dl.conf-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    vertical-align: middle; }
    .conf-wrap dl.conf-box dt {
      width: 230px;
      margin-bottom: 2em;
      line-height: 1.8; }
    .conf-wrap dl.conf-box dd {
      width: calc(100% - 230px);
      margin-bottom: 2em;
      word-break: break-all;
      white-space: pre-line;
      line-height: 1.8; }

.form-btn-wrap button {
  margin: 0 10px; }

input:disabled,
select:disabled {
  background: #ccc; }

#password, #password-confirm, .password-style {
  padding: 0 3em 0 0.5em !important; }

@media screen and (max-width: 768px) {
  .form-style1 .form-wrap {
    flex-wrap: wrap; }
    .form-style1 .form-wrap .title {
      width: 100%;
      background: #EEE;
      padding: 0 10px;
      margin-bottom: 10px; }

  /* 郵便番号 */
  .form-group-input.postal-code input {
    width: 190px; }
  .form-group-input.postal-code .btn-style3 {
    width: calc(100% - 200px);
    font-size: 1.2rem; }

  /* 生年月日 */
  .birth-date-group {
    width: 100%;
    flex-wrap: wrap; }
    .birth-date-group .form-group-select {
      width: calc( 100% - 50px );
      margin-bottom: 1em; }
      .birth-date-group .form-group-select .wrap {
        width: 100%; }
    .birth-date-group span {
      width: 50px; }

  /* ラジオボタン */
  .form-group-radio {
    flex-direction: column; }
    .form-group-radio label {
      width: 100%;
      margin: 0.5em 0; }

  /* 確認画面 */
  .conf-wrap dl.conf-box {
    flex-direction: column; }
    .conf-wrap dl.conf-box dt {
      width: 100%;
      background: #EEE;
      padding: 8px 10px;
      margin-bottom: 10px; }
    .conf-wrap dl.conf-box dd {
      width: 100%;
      padding: 0 10px;
      margin-bottom: 2em; } }
ul li {
  list-style: none; }

ul.list-style1 li {
  position: relative;
  padding-left: 1em; }
  ul.list-style1 li::before {
    position: absolute;
    content: "・";
    left: 0; }

ul.list-style2 {
  display: flex;
  flex-wrap: wrap;
  margin: 2em 0; }
  ul.list-style2 li {
    margin-left: 1.4em;
    text-indent: -1.7em;
    vertical-align: middle; }
    ul.list-style2 li::before {
      content: "";
      display: inline-block;
      width: 1.2em;
      height: 1.2em;
      background-image: url("../images/i-arrow-circle-green.svg");
      background-size: contain;
      margin-right: 0.5em; }

a {
  color: #000;
  text-decoration: none;
  position: relative; }
  a:hover {
    text-decoration: none;
    opacity: 0.6; }
  a.txt-link:hover {
    text-decoration: underline; }

header {
  position: relative;
  width: 100%;
  height: 100px;
  background: #FFF;
  z-index: 600; }
  header #hamburger-menu {
    display: none; }
  header #navi {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    background: #FFF;
    border-bottom: 1px solid #eee;
    z-index: 100;
    transition: 0.4s;
    /* ボタン */ }
    header #navi .navi-wrap {
      display: flex;
      width: 95%;
      height: 100%;
      align-items: center;
      margin: 0 auto; }
      header #navi .navi-wrap .logo-wrap {
        width: 170px;
        margin-right: 50px; }
        header #navi .navi-wrap .logo-wrap a {
          display: flex;
          width: 100%;
          height: 100%; }
        header #navi .navi-wrap .logo-wrap img, header #navi .navi-wrap .logo-wrap svg {
          width: 100%;
          height: auto; }
      header #navi .navi-wrap .navi-list {
        display: flex;
        flex: 1;
        height: 100px; }
        header #navi .navi-wrap .navi-list li {
          padding: 0 1.5em;
          position: relative;
          height: 100%; }
          header #navi .navi-wrap .navi-list li a {
            color: #000;
            font-size: 1.5rem;
            font-weight: bold;
            height: 100%;
            display: flex;
            align-items: center; }
            header #navi .navi-wrap .navi-list li a:hover {
              color: #38b281 !important;
              opacity: 1; }
          header #navi .navi-wrap .navi-list li.li-parent .title {
            height: 100%;
            cursor: pointer;
            font-size: 1.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold; }
          header #navi .navi-wrap .navi-list li.li-parent .li-child {
            position: absolute;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.25s 0.0833333333s, visibility 0.25s, transform 0.3333333333s cubic-bezier(0.33, 0, 0.24, 1); }
            header #navi .navi-wrap .navi-list li.li-parent .li-child .flex-box {
              background: #FFF;
              border-radius: 10px;
              flex-direction: column;
              mix-blend-mode: multiply;
              max-height: 520px;
              overflow-y: auto;
              -ms-overflow-style: none;
              scrollbar-width: none;
              border: 1px solid #EEE; }
              header #navi .navi-wrap .navi-list li.li-parent .li-child .flex-box::-webkit-scrollbar {
                display: none; }
            header #navi .navi-wrap .navi-list li.li-parent .li-child .menu-wrap {
              display: flex;
              align-items: flex-start;
              margin-bottom: 30px; }
              header #navi .navi-wrap .navi-list li.li-parent .li-child .menu-wrap img {
                width: 40%;
                border-radius: 10px; }
              header #navi .navi-wrap .navi-list li.li-parent .li-child .menu-wrap .menu-list {
                width: 60%;
                padding: 10px 0;
                margin-left: 50px; }
                header #navi .navi-wrap .navi-list li.li-parent .li-child .menu-wrap .menu-list .title {
                  color: #000;
                  font-size: 1.8rem;
                  justify-content: left; }
                  header #navi .navi-wrap .navi-list li.li-parent .li-child .menu-wrap .menu-list .title::before {
                    content: "";
                    display: inline-block;
                    width: 1em;
                    height: 1em;
                    margin-right: 7px;
                    background: url("../images/i-arrow-circle-green.svg") no-repeat;
                    background-position-y: 50%; }
                header #navi .navi-wrap .navi-list li.li-parent .li-child .menu-wrap .menu-list .subtitle {
                  color: #38b281;
                  font-size: 1.7rem;
                  margin: 1em 0; }
                header #navi .navi-wrap .navi-list li.li-parent .li-child .menu-wrap .menu-list .list-box {
                  display: inline-flex;
                  justify-content: space-between;
                  flex-wrap: wrap;
                  width: 100%; }
                  header #navi .navi-wrap .navi-list li.li-parent .li-child .menu-wrap .menu-list .list-box::before {
                    content: "";
                    display: block;
                    width: calc(100% / 4 - 5px);
                    height: 0;
                    order: 1; }
                  header #navi .navi-wrap .navi-list li.li-parent .li-child .menu-wrap .menu-list .list-box::after {
                    content: "";
                    display: block;
                    width: calc(100% / 4 - 5px);
                    height: 0; }
                  header #navi .navi-wrap .navi-list li.li-parent .li-child .menu-wrap .menu-list .list-box li {
                    width: calc(100% / 4 - 5px);
                    padding: 0.5em 0;
                    word-break: break-word; }
                    header #navi .navi-wrap .navi-list li.li-parent .li-child .menu-wrap .menu-list .list-box li a {
                      font-size: 1.7rem;
                      font-weight: 500; }
            header #navi .navi-wrap .navi-list li.li-parent .li-child .menu-wrap a {
              color: #000; }
            header #navi .navi-wrap .navi-list li.li-parent .li-child.product {
              /* 製品情報のメニュー */
              top: 70px;
              width: 800px;
              color: #000;
              padding: 30px 0; }
              header #navi .navi-wrap .navi-list li.li-parent .li-child.product .flex-box {
                padding: 50px; }
            header #navi .navi-wrap .navi-list li.li-parent .li-child.support {
              /* サポートのメニュー */
              top: 70px;
              width: 225px;
              padding: 30px 0; }
              header #navi .navi-wrap .navi-list li.li-parent .li-child.support .flex-box {
                padding: 30px; }
              header #navi .navi-wrap .navi-list li.li-parent .li-child.support .menu-wrap {
                margin-bottom: 0; }
              header #navi .navi-wrap .navi-list li.li-parent .li-child.support .list-box-support li {
                margin-bottom: 1.7em;
                padding: 0; }
                header #navi .navi-wrap .navi-list li.li-parent .li-child.support .list-box-support li:last-child {
                  margin-bottom: 0; }
          header #navi .navi-wrap .navi-list li.li-parent.li-parent:hover > .title {
            color: #38b281; }
          header #navi .navi-wrap .navi-list li.li-parent.li-parent:hover .li-child {
            visibility: visible;
            opacity: 1;
            transition: 0.5s;
            top: 50px;
            margin: 30px 0; }
      header #navi .navi-wrap .navi-login {
        display: flex;
        align-items: center;
        margin-left: auto;
        width: 415px; }
        header #navi .navi-wrap .navi-login a {
          margin: 0 10px; }
    header #navi .btn-search, header #navi .btn-login, header #navi .btn-cart, header #navi .hamburger {
      font-size: 1.2rem;
      width: 75px;
      height: 65px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #000; }
      header #navi .btn-search span, header #navi .btn-login span, header #navi .btn-cart span, header #navi .hamburger span {
        font-weight: bold; }
    header #navi .btn-style0 {
      max-width: 130px;
      font-size: 1.4rem;
      font-weight: 400;
      padding: 5px; }
    header #navi .account-name {
      margin: 0 10px;
      min-width: 115px;
      width: auto; }
  header.font-wh {
    /* header 文字色 白 */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
    header.font-wh #navi {
      border-bottom: none;
      /* ロゴ画像の色*/ }
      header.font-wh #navi .navi-wrap .navi-list li a,
      header.font-wh #navi .navi-wrap .navi-list li .title {
        color: #FFF; }
      header.font-wh #navi .i-search, header.font-wh #navi .i-user, header.font-wh #navi .i-cart, header.font-wh #navi .i-hamburger {
        fill: #FFF; }
      header.font-wh #navi .btn-search, header.font-wh #navi .btn-login, header.font-wh #navi .btn-cart, header.font-wh #navi .hamburger, header.font-wh #navi .account-name {
        color: #FFF; }
      header.font-wh #navi .btn-style0 {
        color: #FFF;
        background: none;
        border-color: #FFF; }
      header.font-wh #navi .logo-wrap path,
      header.font-wh #navi .logo-wrap rect {
        fill: #FFF; }
    header.font-wh.scrolled #navi {
      background: #FFF;
      border-bottom: 1px solid #EEE;
      transition: 0.4s;
      /* スクロール後のロゴの色*/ }
      header.font-wh.scrolled #navi .navi-wrap .navi-list li a,
      header.font-wh.scrolled #navi .navi-wrap .navi-list li .title {
        color: #000; }
      header.font-wh.scrolled #navi .btn-search, header.font-wh.scrolled #navi .btn-login, header.font-wh.scrolled #navi .btn-cart, header.font-wh.scrolled #navi .hamburger, header.font-wh.scrolled #navi .account-name {
        color: #000; }
      header.font-wh.scrolled #navi .i-search, header.font-wh.scrolled #navi .i-user, header.font-wh.scrolled #navi .i-cart, header.font-wh.scrolled #navi .i-hamburger {
        fill: #000; }
      header.font-wh.scrolled #navi .btn-style0 {
        color: #000;
        border-color: #000; }
      header.font-wh.scrolled #navi .logo-wrap path,
      header.font-wh.scrolled #navi .logo-wrap rect {
        fill: #38b281; }
  header #sp-navi {
    display: none; }

@media screen and (min-width: 1001px) and (max-width: 1300px) {
  header #navi .navi-wrap .logo-wrap {
    width: 100px; }

  header #navi .navi-wrap .navi-list li {
    font-size: 0.9rem; }

  header #navi .navi-wrap .navi-login a,
  header #navi .navi-wrap .navi-list li a {
    font-size: 1.5rem; }

  header #navi .navi-wrap .navi-login {
    width: 380px;
    margin-left: auto; }

  header #navi .navi-wrap .navi-login a {
    margin: 0 5px; }

  header #navi .navi-wrap .navi-login .btn-search,
  header #navi .navi-wrap .navi-login .btn-login,
  header #navi .navi-wrap .navi-login .btn-cart {
    font-size: 1.2rem; } }
@media screen and (max-width: 1000px) {
  header {
    height: 64px;
    /* アコーディオン */ }
    header #hamburger-menu {
      display: block; }
    header #navi {
      height: 64px;
      transition: 0.4s; }
      header #navi .navi-wrap {
        display: none; }
      header #navi .hamburger {
        font-size: 0.8rem;
        font-weight: bold;
        width: 60px;
        border-left: 1px solid #EEE;
        padding: 0 10px; }
      header #navi .btn-search, header #navi .btn-login, header #navi .btn-cart {
        font-size: 0.8rem;
        font-weight: bold;
        width: 48px; }
      header #navi .i-search svg, header #navi .i-user svg, header #navi .i-cart svg {
        width: 20px;
        height: 30px; }
      header #navi .i-hamburger {
        padding: 0 10px; }
        header #navi .i-hamburger svg {
          width: 20px;
          height: 30px; }
    header #sp-navi {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: left; }
      header #sp-navi a:hover {
        opacity: 1 !important; }
      header #sp-navi .flex-box {
        width: 100%;
        justify-content: right; }
        header #sp-navi .flex-box .btn-search, header #sp-navi .flex-box .btn-login, header #sp-navi .flex-box .btn-cart {
          margin-right: 5px; }
      header #sp-navi.active .logo-wrap path, header #sp-navi.active .logo-wrap rect {
        fill: #38b281; }
      header #sp-navi .logo-wrap {
        text-align: center;
        min-width: 95px;
        height: 64px;
        z-index: 200;
        margin: 0 10px;
        padding: 5px 0; }
        header #sp-navi .logo-wrap a {
          display: block;
          width: 100%;
          height: 100%; }
        header #sp-navi .logo-wrap img, header #sp-navi .logo-wrap svg {
          width: 100%;
          height: 100%;
          object-fit: contain; }
      header #sp-navi .sp-menu {
        left: 0;
        opacity: 0;
        position: absolute;
        bottom: 50px;
        z-index: 10;
        width: 100%;
        background: #FFF;
        border-bottom: 1px solid #EEE;
        height: auto;
        transition: 0.4s;
        padding-bottom: 50px; }
        header #sp-navi .sp-menu .navi-list {
          background: #FFF;
          font-size: 1.5rem; }
          header #sp-navi .sp-menu .navi-list li {
            border-bottom: 1px solid #EEE; }
            header #sp-navi .sp-menu .navi-list li a {
              display: block;
              width: 100%;
              padding: 26px 20px; }
        header #sp-navi .sp-menu .navi-login {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          background: #FFF;
          box-shadow: 0px 5px 5px rgba(157, 157, 157, 0.5);
          border-bottom: 1px solid #EEE;
          font-size: 1.5rem;
          font-weight: 500; }
          header #sp-navi .sp-menu .navi-login .btn-style0 {
            border-color: #EEE;
            color: #000;
            font-weight: 500; }
          header #sp-navi .sp-menu .navi-login .mypage-list {
            width: 100%;
            margin-top: 1.5em;
            position: relative;
            z-index: 10;
            font-size: 1.4rem; }
            header #sp-navi .sp-menu .navi-login .mypage-list .ac-parent {
              margin-bottom: 0; }
              header #sp-navi .sp-menu .navi-login .mypage-list .ac-parent.active {
                max-height: max-content; }
            header #sp-navi .sp-menu .navi-login .mypage-list .mypage.ac-child {
              background: none; }
            header #sp-navi .sp-menu .navi-login .mypage-list::before {
              content: "";
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              background: #e7f6f1;
              border-radius: 6px 0 0 6px;
              width: calc(100% + 20px);
              height: 100%;
              z-index: -10; }
          header #sp-navi .sp-menu .navi-login .list-box-mypage {
            background: #e7f6f1;
            padding: 20px 0 20px 20px;
            border-radius: 0 0 0 6px;
            font-weight: 500; }
            header #sp-navi .sp-menu .navi-login .list-box-mypage::before {
              content: "";
              display: block;
              position: absolute;
              top: 50px;
              left: 0;
              width: calc(100% + 20px);
              border-top: 1px solid #FFF; }
            header #sp-navi .sp-menu .navi-login .list-box-mypage li > a {
              display: block;
              padding: 1em;
              margin: 0; }
            header #sp-navi .sp-menu .navi-login .list-box-mypage .list-arrow {
              padding-left: 20px;
              margin: 1em 0; }
              header #sp-navi .sp-menu .navi-login .list-box-mypage .list-arrow li {
                margin-left: 1.4em;
                text-indent: -1.4em;
                vertical-align: middle;
                margin-right: 1.4em;
                margin-bottom: 1em; }
                header #sp-navi .sp-menu .navi-login .list-box-mypage .list-arrow li::before {
                  content: "";
                  display: inline-block;
                  width: 1.2em;
                  height: 1.2em;
                  background-image: url(../images/i-arrow-circle-green.svg);
                  background-size: contain; }
              header #sp-navi .sp-menu .navi-login .list-box-mypage .list-arrow a {
                display: inline; }
        header #sp-navi .sp-menu .li-child {
          background: #F0F0F0;
          text-align: left; }
          header #sp-navi .sp-menu .li-child.product .menu-wrap {
            display: flex;
            flex-wrap: wrap;
            padding: 20px 25px; }
            header #sp-navi .sp-menu .li-child.product .menu-wrap .product-img {
              width: 45%;
              border-radius: 6px; }
            header #sp-navi .sp-menu .li-child.product .menu-wrap .title {
              width: 55%;
              padding: 20px; }
              header #sp-navi .sp-menu .li-child.product .menu-wrap .title::before {
                display: block;
                content: "";
                width: 1em;
                height: 1em;
                background: url(../images/i-arrow-circle-green.svg) no-repeat;
                background-size: contain;
                vertical-align: middle;
                position: absolute;
                left: 0;
                top: 25px; }
            header #sp-navi .sp-menu .li-child.product .menu-wrap .subtitle {
              color: #38b281;
              margin: 1em 0; }
            header #sp-navi .sp-menu .li-child.product .menu-wrap .menu-list {
              width: 100%; }
              header #sp-navi .sp-menu .li-child.product .menu-wrap .menu-list .list-box {
                width: 100%;
                display: inline-flex;
                flex-wrap: wrap; }
                header #sp-navi .sp-menu .li-child.product .menu-wrap .menu-list .list-box li {
                  margin: 1em 0;
                  width: 50%; }
              header #sp-navi .sp-menu .li-child.product .menu-wrap .menu-list a {
                padding: 0; }
          header #sp-navi .sp-menu .li-child .menu-wrap {
            width: 100%;
            font-size: 1.5rem; }
      header #sp-navi.active {
        background: #FFF; }
        header #sp-navi.active .sp-menu {
          opacity: 1;
          top: 62px;
          height: calc(100vh - 49px);
          overflow: auto;
          border-top: 1px solid #EEE;
          transition: 0.4s; }
        header #sp-navi.active .navi-wrap .navi-list li a,
        header #sp-navi.active .navi-wrap .navi-list li .title {
          color: #000; }
        header #sp-navi.active .btn-search, header #sp-navi.active .btn-login, header #sp-navi.active .btn-cart, header #sp-navi.active .hamburger {
          color: #000; }
        header #sp-navi.active .i-search, header #sp-navi.active .i-user, header #sp-navi.active .i-cart, header #sp-navi.active .i-hamburger {
          fill: #000; }
        header #sp-navi.active .btn-style0 {
          color: #000;
          border-color: #000; }
        header #sp-navi.active .hamburger {
          border-color: #EEE; }
    header.scrolled #navi {
      background: #FFF;
      border-bottom: 1px solid #EEE;
      transition: 0.4s; }
      header.scrolled #navi .hamburger {
        border-color: #EEE; }
    header #navi.active {
      border-bottom: 1px solid #EEE !important; }
    header .ac-parent {
      overflow: hidden; }
    header .ac-parent > a {
      padding: 15px;
      cursor: pointer;
      position: relative;
      display: block; }
    header .ac-parent > a::after {
      content: "";
      width: 15px;
      height: 10px;
      background-image: url("../images/i-ac-arrow.svg");
      background-repeat: no-repeat;
      background-size: 100%;
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
      transition: transform 0.3s; }
    header .ac-parent.active > a::after {
      transform: rotate(180deg);
      top: 38%; }
    header .li-child, header .ac-child {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease-out; } }
footer {
  color: #FFF;
  background: #39B282;
  font-size: 1.5rem; }
  footer a {
    color: #FFF; }
  footer .footer-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    max-width: 1280px;
    margin: 0 auto; }
    footer .footer-wrap .logo-wrap {
      display: block;
      width: 100%;
      text-align: center;
      margin: 4em; }
      footer .footer-wrap .logo-wrap img {
        width: 100%;
        height: 100%;
        max-width: 326px;
        object-fit: contain; }
    footer .footer-wrap .title {
      margin-bottom: 1em;
      font-weight: bold; }
    footer .footer-wrap .list-style1 {
      font-size: 1.4rem; }
      footer .footer-wrap .list-style1 li {
        margin-bottom: 0.8em; }
    footer .footer-wrap .list-1, footer .footer-wrap .list-2, footer .footer-wrap .list-3, footer .footer-wrap .list-4 {
      display: flex;
      flex-direction: column;
      padding: 0; }
    footer .footer-wrap .list-3 .title {
      margin-bottom: 2.5em; }
    footer .footer-wrap .list-3 .information {
      font-weight: bold; }
    footer .footer-wrap .list-3 .link-box {
      display: flex;
      flex-direction: column;
      margin-top: 1em; }
    footer .footer-wrap .list-3 a {
      margin-bottom: 0.8em; }
    footer .footer-wrap .list-4 .list-style-sns {
      display: flex;
      justify-content: center; }
      footer .footer-wrap .list-4 .list-style-sns li {
        width: 30px;
        height: 30px;
        margin: 15px; }
      footer .footer-wrap .list-4 .list-style-sns a img {
        width: 100%;
        height: auto; }
  footer .copyright {
    font-family: "Jost";
    display: block;
    width: 100%;
    text-align: center;
    margin: 30px; }

@media screen and (max-width: 756px) {
  footer .footer-wrap {
    width: 100%; }
    footer .footer-wrap .logo-wrap {
      margin: 2em; }
      footer .footer-wrap .logo-wrap img {
        width: 40vw;
        min-width: 150px; }
    footer .footer-wrap .list-1, footer .footer-wrap .list-2, footer .footer-wrap .list-3, footer .footer-wrap .list-4 {
      width: 100%;
      flex-wrap: wrap;
      margin: 0; }
      footer .footer-wrap .list-1 p, footer .footer-wrap .list-2 p, footer .footer-wrap .list-3 p, footer .footer-wrap .list-4 p {
        width: 100%; }
    footer .footer-wrap .list-3 .title {
      border-bottom: 1px solid #6BC5A1; }
    footer .footer-wrap .list-3 .information {
      border-bottom: 1px solid #6BC5A1; }
      footer .footer-wrap .list-3 .information span {
        display: block;
        padding: 1.5em; }
    footer .footer-wrap .list-3 .link-box {
      padding: 0 1.5em; }
      footer .footer-wrap .list-3 .link-box a {
        display: block;
        margin: 1em 0; }
    footer .footer-wrap .list-4 {
      padding: 1em; }
    footer .footer-wrap .title {
      margin: 0; }
    footer .footer-wrap .sp-ac-child {
      opacity: 0;
      max-height: 0;
      transition: 0.4s;
      padding-left: 1em; }
      footer .footer-wrap .sp-ac-child li {
        margin: 1.5em 0; }
    footer .footer-wrap .list-1 .sp-ac-parent {
      border-top: 1px solid #6BC5A1; }
    footer .footer-wrap .sp-ac-parent {
      position: relative;
      border-bottom: 1px solid #6BC5A1;
      padding: 1.5em; }
      footer .footer-wrap .sp-ac-parent::after {
        content: "";
        width: 15px;
        height: 10px;
        background-image: url("../images/i-ac-arrow-white.svg");
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        transition: transform 0.2s; }
      footer .footer-wrap .sp-ac-parent.active::after {
        transform: translateY(-50%) rotate(180deg) translateZ(0); }
      footer .footer-wrap .sp-ac-parent.active + .sp-ac-child {
        opacity: 1;
        max-height: max-content;
        transition: 0.4s;
        padding: 1em;
        border-bottom: 1px solid #6BC5A1; }
        footer .footer-wrap .sp-ac-parent.active + .sp-ac-child li {
          margin: 1.5em 0; }
    footer .footer-wrap .copyright {
      font-size: 0.7em;
      margin: 30px 10px; } }
/* モーダルの背景オーバーレイ */
.modal-overlay {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  transition: background-color 0.3s ease, visibility 0.3s ease;
  visibility: hidden; }

/* モーダルが開いたときに表示 */
.modal-overlay.active {
  background-color: rgba(231, 246, 241, 0.8);
  pointer-events: auto;
  visibility: visible; }

/* モーダル本体のスタイル */
.modal-style1 {
  background-color: #FFF;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 1200px;
  height: 90%;
  padding: 50px;
  position: relative;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: auto; }

/* モーダルが開いたときのモーダル本体のスタイル */
.modal-overlay.active .modal-style1 {
  opacity: 1;
  transform: translateY(0) scale(1); }

.close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 2em;
  cursor: pointer;
  border: none;
  background: none;
  transition: transform 0.2s ease, color 0.2s ease; }
  .close-button:hover {
    transform: scale(1.1); }

.modal-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.8rem;
  font-weight: bold; }

.modal-content {
  margin-bottom: 30px; }
  .modal-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8; }

.note {
  font-size: 1.4rem;
  color: #666;
  line-height: 1.8; }

/* 開くボタンのスタイル */
.open-modal-btn {
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  margin: 20px 0;
  transition: color 0.2s ease; }
  .open-modal-btn:hover {
    text-decoration: underline; }

@media screen and (max-width: 768px) {
  .modal-style1 {
    padding: 20px; } }
/*検索フォーム*/
.search_modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 300; }

.search_modal .modal_bg {
  background: rgba(231, 246, 241, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%; }

.search_modal .modal_content {
  background: #FFF;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75px;
  box-sizing: border-box; }

/*削除ボタン*/
.search_modal .search_clear {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%); }

.search_modal .search_clear_btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  outline: 0; }

.search_modal .search_clear_btn span::before,
.search_modal .search_clear_btn span::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #BFBFBF; }

.search_modal .search_clear_btn span::before {
  transform: rotate(-45deg); }

.search_modal .search_clear_btn span::after {
  transform: rotate(45deg); }

.search_modal .form_wrap {
  width: 80%;
  height: 100%;
  max-width: 1094px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center; }

.search_modal .form_wrap img {
  margin-right: 22px; }

.search_modal .form_wrap .form_group_search {
  position: relative;
  width: 100%; }

.search_modal .form_wrap .form_group_search > input {
  display: block;
  width: 100%;
  height: 20px;
  color: #000;
  background: #FFF;
  border: none;
  border-left: 1px solid #BFBFBF;
  font-size: 1.6rem;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 0 8px;
  box-sizing: border-box; }

.search_modal .form_wrap .form_group_search > input::-webkit-search-cancel-button {
  -webkit-appearance: none; }

.search_modal .form_wrap .form_group_search > input:focus {
  outline: none; }

.search_modal .form_group_search .error {
  color: #FF0000;
  background: #FFF5F5;
  padding: 3px;
  position: absolute;
  font-size: 12px;
  top: 25px; }

.search_modal .form_group_search .error p {
  margin: 0; }

#search_tabs .tab_content {
  display: none; }

#search_products_selector:checked ~ #search_products .tab_content,
#search_non_products_selector:checked ~ #search_non_products .tab_content {
  pointer-events: auto;
  display: block; }

#search_products_selector:checked ~ #search_products .tab_header .option_R {
  display: block; }

#search_products_selector:checked ~ #search_products label.tab_item,
#search_non_products_selector:checked ~ #search_non_products label.tab_item {
  background: gray;
  color: white; }

@media screen and (max-width: 768px) {
  .search_modal .form_wrap {
    width: 90%; }
    .search_modal .form_wrap .search-img {
      height: 25px;
      margin-right: 15px; } }