@charset "UTF-8";

/*====================================================
**components
====================================================*/
/*category-wrapのスタイル
---------------------------------------*/
.category-wrap {}

.category-wrap ul.parent {
  display: flex;
  flex-wrap: wrap;
}

.category-wrap ul.parent>li {
  margin-bottom: var(--sm);
  padding-right: var(--sm);
  width: 25%;
}

.category-wrap ul.parent>li>a {
  font-weight: bold;
}

.category-wrap ul.sub-nav {
  margin-left: var(--sm);
}

@media only screen and (max-width: 992px) {
  .category-wrap ul.parent>li {
    width: 50%;
  }
}

@media only screen and (max-width:576px) {
  .category-wrap ul.parent>li {
    width: 100%;
  }
}

/*title2のスタイル
---------------------------------------*/
.post-contents h2,
.title2 {
  position: relative;
  font-weight: bold;
  height: calc(1.5em + var(--sm));
}

.post-contents h2 span,
.title2 span {
  display: inline-block;
  border-bottom: calc(2 * var(--bd-width)) solid var(--main-color);
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  content: "";
  padding-bottom: var(--sm);
}

.post-contents h2:after,
.title2:after {
  border-bottom: calc(2 * var(--bd-width)) solid #ccc;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
}

@media only screen and (max-width: 567px) {

  .post-contents h2 span,
  .title2 span,
  .post-contents h2:after,
  .title2:after,
  .post-contents h2,
  .title2 {
    position: static;
    height: auto;
  }
}

/*title3のスタイル
---------------------------------------*/
.post-contents h3,
.title3 {
  position: relative;
  padding: 0.3em 0 0.3em 0.8em;
  border-radius: 0px;
}

.post-contents h3:before,
.title3:before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0em;
  width: .3em;
  /* 四角形の横幅 */
  height: 1em;
  /* 四角形の縦幅 */
  background: var(--main-color);
  border-radius: 0px;
}

/*title4のスタイル
---------------------------------------*/
.title4,
.post-contents h4 {
  position: relative;
  color: var(--font-color);
}

.title4:after,
.post-contents h4:after {
  display: inline-block;
  width: 100px;
  height: var(--bd-width);
  background: var(--bd-color);
  vertical-align: middle;
  margin-left: 15px;
  content: "";
}

/*breadcrumbsのスタイル
---------------------------------------*/
.breadcrumbs {
  background: var(--bg-sub1-color);
  padding: var(--sm) 0;
}

/*layout*/
.breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
}

.breadcrumbs ul li {
  margin-right: var(--md);
}

/*style*/
.breadcrumbs ul {
  display: flex;
}

.breadcrumbs ul li {
  position: relative;
}

.breadcrumbs ul li a {
  text-decoration: underline;
}

.breadcrumbs ul li:after {
  content: ">";
  position: absolute;
  top: 0px;
  right: -10px;
  height: 0;
  width: 0;
  color: #aaa;
  margin-left: var(--md);
}

.breadcrumbs ul li:last-child:after {
  content: "";
}

/*footer-navのスタイル
---------------------------------------*/
.footer-nav {
  padding-top: var(--sm);
  padding-bottom: var(--sm);
}

.footer-nav ul li {
  padding-bottom: var(--xs);
}

.copyright-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: var(--xs);
}

.copyright-nav ul li {
  margin-left: var(--sm);
  margin-right: var(--sm);
}

@media only screen and (max-width: 992px) {
  .copyright-nav ul li {
    width: 100%;
    margin-bottom: var(--sm);
    margin-right: 0;
  }
}

/*inputスタイルのスタイル
---------------------------------------*/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
  color: var(--font-color);
  border-radius: var(--radius);
  border: solid 1px #ccc;
  background: var(--bg-sub1-color);
}

input:focus {
  outline: none;
  border: solid var(--bd-width) var(--main-color);
}

option:disabled {
  font-weight: bold;
  background: #ccc;
}

/*inputレイアウトのスタイル
---------------------------------------*/
.form-control {
  font-size: var(--fs-normal);
  padding: var(--xs) var(--sm);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 10px;
  font-size: var(--fs-normal);
}

input[type="tel"],
input[type="number"],
select {
  /*width:auto;*/
}

.form-label,
.form-entry,
.form-display,
.form-note {
  margin-bottom: var(--xs);
}

.form-label {
  padding-top: 1em;
  font-weight: bold;
}

.form-display,
.form-entry {
  padding-top: var(--xs);
  padding-bottom: var(--xs);
}

.form-display {
  background: #eee;
  padding: var(--xs);
}

/*btnのスタイル
---------------------------------------*/
a.btn,
button.btn,
input[type="button"].btn,
input[type="submit"].btn {
  position: relative;
  line-height: 1.3;
  display: inline-block;
  transition: all 0.5s;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  font-weight: var(--font-weight);
  background: var(--bg-color);
  border: var(--bd-width) solid var(--bd-color);
  border-radius: var(--radius);
  color: var(--font-color);
  cursor: pointer;
}

a.btn:hover,
button.btn:hover,
input[type="button"].btn:hover,
input[type="submit"].btn:hover {
  background: var(--hover-bg-color);
  border: var(--bd-width) solid var(--hover-bd-color);
  text-decoration: none;
  color: var(--hover-color);
}

a.btn:hover::before,
button.btn:hover::before,
input[type="button"].btn:hover::before,
input[type="submit"].btn:hover::before {
  color: var(--hover-color);
}

@media screen and (max-width: 1000px) {

  a.btn,
  button.btn,
  input[type="button"].btn,
  input[type="submit"].btn {
    line-height: 1.1;
  }
}

/*btnのサイズ
---------------------------------------*/
.btn-xs {
  padding: 2px var(--xs);
}

.btn-sm {
  padding: 5px var(--sm);
}

input[type="submit"],
input[type="button"],
.btn-md {
  padding: var(--xs) var(--md);
}

.btn-lg {
  padding: var(--sm) var(--lg);
}

.btn-xl {
  padding: var(--md) var(--xl);
}

@media only screen and (max-width: 567px) {
  .btn-lg {
    padding: var(--sm) var(--sm);
  }
  
  .btn-xl {
    padding: var(--md) var(--md);
  }
}
/* アクセシビリティ用ボタンの無効化スタイル
--------------------------------------*/
.button-reset {
  background: none;
  border: none;
}

/*alert
---------------------------------------*/
.alert {
  position: relative;
  padding: var(--sm);
  margin-bottom: var(--sm);
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 0.25rem;
}

.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}

/*badge
---------------------------------------*/
.badge {
  display: inline-block;
  line-height: 1.3;
  padding: 3px var(--sm);
  border-radius: 3px;
  font-size: var(--fs-xs);
  font-weight: bold;
}

.badge.opacity {
  color: #ccc;
  background-color: #eee;
}

.badge.taxonomy {
  color: #666;
  background-color: #eee;
}

.badge.rarity.sr {
  color: #9c901f;
  background-color: #faf6c3;
}

.badge.bg-normal,
.badge.rarity.common {
  color: #999;
  background-color: #ffffff;
  border: 1px solid #ccc;
}

.badge-required,
.bg-danger,
.badge.rarity.rare {
  color: #f40000;
  background-color: #ffe8e8;
}

.bg-main {
  color: #fff;
  background-color: var(--main-color);
}

.badge-required {
  font-size: var(--fs-xs);
}

.badge.rarity.ur {
  color: #fff;
  background: linear-gradient(90deg, rgba(255, 97, 97, 1), rgba(233, 178, 45, 1) 20%, rgba(192, 202, 75, 1) 34%, rgba(53, 179, 56, 1) 58%, rgba(86, 110, 243, 1) 79%, rgba(154, 39, 238, 1));
}

.badge.expiration {
  color: var(--main-color);
  background-color: #eee;
}

.badge.stock {
  color: #666;
  background-color: #eee;
}

/*
.bg-danger {
  color:#fff;
  background-color: #aaa;
  border:1px solid #aaa;
}
*/
/*formのスタイル
---------------------------------------*/
.form-btn {
  display: flex;
  padding: 1em 0;
  justify-content: space-between;
}

.form-btn .form-next,
.form-btn .form-back {
  width: 45%;
}

.form-btn .form-next {
  text-align: right;
}

label {
  display: inline-block;
}

.form-label {
  margin-bottom: var(--xs);
}

.list-item-label {
  margin-left: 0.3rem;
}

.error-message {
  color: var(--caution-color);
}

.input-error,
.input-error .list-group-item {
  background: #f8d7da !important;
  border-color: #f5c2c7;
}

/*searchformのスタイル
---------------------------------------*/
.search-wrap {
  padding: var(--md);
  border: 1px solid #ccc;
  background: #f5f5f5;
}

/*カードスタイルのスタイル
---------------------------------------*/
.card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  background: var(--bg-color);
  border: solid var(--bd-width) #eee;
  box-shadow: 0px 3px 5px 0px rgb(100, 100, 100, 0.2);
  z-index: 1;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: 0.35s ease-out;
  -webkit-transition: 0.35s ease-out;
  -moz-transition: 0.35s ease-out;
}

/*Google Chrome, Safari, Operaのみ適用*/
/*
@media screen and (-webkit-min-device-pixel-ratio: 0) {
   .card:hover{
    transform: translate3d(0, -3px, 0);
    -webkit-transform: translate3d(0, -3px, 0);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
  }
}
*/
.card-img {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 100%;
  overflow: hidden;
}

.card-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: 100%;
  max-width: 150%;
}

.card a.anchor-wrap {
  color: inherit;
  background-color: transparent;
  text-decoration: none;
}

.card .card-body {
  padding: var(--md);
}

.card .card-body a {
  text-decoration: none;
}

.card .date-label {
  color: #999;
}

.card .card-title {
  margin-bottom: var(--xs);
  font-weight: 400;
  /*color:var(--main-color);*/
}

/*
.card .card-title span{
  color:var(--accent1-color);
}
*/
.card .card-title i {
  color: var(--main-color);
}

.card-price {

}

.card-price .price {
  width: 100%;
  display: inline-block;
  font-size: var(--fs-md);
  font-family: Helvetica, "Helvetica Neue";
}

.card .card-link {
  margin-top: var(--sm);
  text-align: center
}

.item-contents .card .card-body {
  padding: var(--sm);
}

@media screen and (max-width: 1000px) {
  .card .card-body {
    padding: var(--xs);
  }

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

  .card .card-title,
  .card .card-note {
    font-size: var(--fs-xs);
  }

  .card-price .price {
    font-size: var(--fs-sm);
  }
}

.marker-m {
  background: linear-gradient(transparent 65%, var(--main-color) 65%);
  font-weight: bold;
}

.marker-s1 {
  background: linear-gradient(transparent 65%, var(--sub1-color) 65%);
  font-weight: bold;
}

.marker-s2 {
  background: linear-gradient(transparent 65%, var(--sub2-color) 65%);
  font-weight: bold;
}

.marker-s3 {
  background: linear-gradient(transparent 65%, var(--sub3-color) 65%);
  font-weight: bold;
}

.marker-a1 {
  background: linear-gradient(transparent 65%, var(--accent1-color) 65%);
  font-weight: bold;
}

.marker-a2 {
  background: linear-gradient(transparent 65%, var(--accent2-color) 65%);
  font-weight: bold;
}

.marker-a3 {
  background: linear-gradient(transparent 65%, var(--accent3-color) 65%);
  font-weight: bold;
}

/*ポイント表示
---------------------------------------*/
.point-wrap {}

.point-wrap .point {
  display: inline-block;
  line-height: 1.3;
  padding: 3px var(--sm);
  border-radius: 10px;
  background: #eee;
  color: #333;
}

.point-wrap .name,
.point-wrap .point-num {
  font-size: var(--fs-md);
}

.point-wrap .point-num {
  font-weight: bold;
  color: var(--main-color)
}

/*テーブルスタイルのスタイル
---------------------------------------*/
.table,
.tableStyle {
  border-collapse: collapse;
  border-top: var(--bd-width) solid var(--bd-color);
  /*border-right: var(--bd-width) solid var(--bd-color);*/
  width: 100%;
}

.table th,
.tableStyle th {
  background: var(--bg-color);
  color: var(--font-color);
}

.table tr th,
.tableStyle tr th,
.table td,
.tableStyle td {
  border-bottom: var(--bd-width) solid var(--bd-color);
  /*border-left: var(--bd-width) solid var(--bd-color);*/
}

.table td,
.tableStyle td {
  background: var(--bg-color);
}

.table th,
.table td {
  padding: var(--sm);
}

.table-striped td:nth-child(odd) {
  background-color: var(--bg-sub1-color);
}


/*テーブルレイアウトのスタイル
---------------------------------------*/
.tableLayout {
  table-layout: fixed;
  /*IEなどで、テーブル内でinputを使うと、はみ出る不具合を防ぐ*/
  border-collapse: collapse;
  border-spacing: 0;
}

.table-p th,
.table-p td,
.tableLayout th,
.tableLayout td {
  padding: var(--xs);
}

.tr-section-xs th,.tr-section-xs td{
  padding: var(--xs) 0; }  

.tr-section-sm th,.tr-section-sm td{
  padding: var(--sm) 0; }  

.tr-section-md th,.tr-section-md td{
  padding: var(--md) 0; }  
      
@media screen and (max-width: 1000px) {

  .tableLayout th,
  .tableLayout td {
    display: block;
  }
}

/*-------------------スマホ時にテーブルをスライド-----------------------*/
.scrollTable {
  overflow: auto;
}

@media screen and (max-width: 1000px) {
  .scrollTable table {
    width: 1280px !important;
    ;
  }
}

@media screen and (max-width: 576px) {
  .scrollTable table {
    width: 900px !important;
    ;
  }

  /*
  .scrollTable table tr th,.scrollTable table tr td{
    width:auto!important;
  }
  .scrollTable table tr th:first-child{
    width:150px!important;
  }
*/
}

/* contact frameスタイル
----------------------------------------------------------- */
.frame-contact {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  background: var(--bg-sub1-color);
  padding: var(--md);
}

/* paginationスタイル
----------------------------------------------------------- */
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  overflow: auto;
}

.page-link {
  position: relative;
  display: block;
  color: var(--main-color);
  text-decoration: none;
  background-color: var(--bg-color);
  border: 1px solid var(--bd-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}

.page-link:hover {
  z-index: 2;
  background-color: var(--bg-sub1-color);
  border-color: var(--bd-color);
}

.page-link:focus {
  z-index: 3;
  color: var(--main-color);
  background-color: var(--bg-color);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}

.page-item.active .page-link {
  z-index: 3;
  color: var(--bg-color);
  background-color: var(--main-color);
  border-color: var(--bd-color);
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: var(--bg-color);
  border-color: var(--bd-color);
}

.page-link {
  padding: var(--xs) var(--sm);
}

.page-item:first-child .page-link {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: var(--fs-sm);
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-xs);
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}


/* tooltipスタイル
----------------------------------------------------------- */
.tooltip {
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.tooltip .description {
  color: #fff;
  display: none;
  position: absolute;
  padding: 5px;
  font-size: var(--fs-sm);
  line-height: 1.3;
  border-radius: 5px;
  background: var(--main-color);
  width: 140px;
  text-align: center;
  z-index: 9;
  box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 30%);
}

.tooltip .description:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 10px solid transparent;
  border-top: 10px solid var(--main-color);
  margin-left: -10px;
  z-index: 9;
}

.tooltip:hover .description {
  display: inline-block;
  top: -40px;
  left: -60px;
}

/* catalog */
.display-catalog {
  position: relative;
}

.display-catalog .catalog-text {
  position: absolute;
  bottom: 5px;
  right: 0;
}

.display-catalog .tooltip .description {
  width: 250px;
  text-align: left;
  font-size: var(--fs-sm);
}

.display-catalog .tooltip:hover .description {
  display: inline-block;
  top: -110px;
  left: -117px;
}

/*
----------------------------------------------------------- */
.link-target-iframe {
  cursor: pointer;
}

/* loadingスタイル
----------------------------------------------------------- */
/* ベースの本体 */
#loading.active {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .3);
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

#loading.active .loader005 {
  margin: 100px auto;
  font-size: var(--fs-md);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

@-webkit-keyframes load5 {

  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }

  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }

  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }

  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }

  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }

  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }

  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }

  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

@keyframes load5 {

  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }

  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }

  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }

  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }

  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }

  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }

  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }

  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

/* swiperスタイル
----------------------------------------------------------- */
.swiper-wrapper {
  display: flex;
  align-items: center;
}

.slider .swiper-slide {
  padding: 5px;
  text-align: center;
}

.slider .swiper-slide img {
  max-width: 100%;
  max-height: 600px;
}

.slider-thumbnail {
  margin-top: 3px;
}

.slider-thumbnail .swiper-slide {
  padding: 3px;
}

.swiper-container.slider-thumbnail .swiper-slide {
  opacity: 0.5;
}

.swiper-container.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}

.front-slider .swiper-slide {
  padding: 15px;
}

.front-slider .swiper-slide img {
  /*box-shadow: 0px 3px 7px 2px rgb(0 0 0 / 30%);*/
  /*border-radius: 10px;*/
}

.swiper-button-prev,
.swiper-button-next {
  background: rgba(255, 255, 255, 0.5);
}

:root {
  --swiper-theme-color: var(--main-color);
}

.swiper-pagination {
  position: static;
}

.swiper-pagination-bullet {
  margin-left: 5px;
  margin-right: 5px;
}

/* lightboxスタイル
----------------------------------------------------------- */
.lg-backdrop.in,
.lg-backdrop {
  opacity: 0.5;
}

.lg-outer .lg-video {
  width: 100%;
  height: 80vh;
  padding-bottom: 0;
}

.lg-outer .lg {
  width: 80% !important;
}

.lg-toolbar .lg-icon:hover {
  color: #ccc;
}

.lg-toolbar {
  background: none;
}

@media screen and (max-width:992px) {
  .lg-outer .lg {
    width: 95% !important;
  }

  .lg-outer .lg-video {
    width: 100%;
    height: 80vh;
    padding-bottom: 0;
  }

  .lg-toolbar {
    top: 5vh;
  }
}

/*会員ページの履歴ページのスタイル
---------------------------------------*/
.info_box {
  min-width: 200px;
  font-size: var(--fs-xs);
}

/* ページTOPへ戻る、BOTTOMへ行く
------------------------------------- */
#to_bottom,
#to_top {
  position: fixed;
  bottom: 20px;
  right: 15px;
  z-index: 999;
  transition: 0.5s;
  pointer-events: none;
  opacity: 0;
}

#to_top {
  bottom: 20px;
}

#to_bottom.active,
#to_top.active {
  opacity: 1;
  pointer-events: auto;
}

#to_bottom a,
#to_top a {
  display: inline-block;
  background-color: var(--main-color);
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  padding: 10px 15px;
  line-height: 1;
  border-radius: 0px;
  border: 1px solid #ffffff;
}

#to_bottom a .text,
#to_top a .text {
  font-size: var(--fs-xs);
}

#to_bottom a:hover,
#to_top a:hover {
  background: var(--hover-bg-color);
  border: var(--bd-width) solid var(--hover-bd-color);
  text-decoration: none;
  color: var(--hover-color);
}

.to-btn {
  width: 60px;
  height: 58px;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/*リストスタイルのスタイル
---------------------------------------*/

ul.list-style li {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  padding-left: 15px;
}

ul.list-style.sub-menu {
  margin-top: var(--xs);
}

ul.list-style {
  margin-left: 10px;
}

/*--リストマークの矢印型スタイル--*/
ul.list-style li:after {
  border-radius: 50%;
  width: 5px;
  height: 5px;
  display: block;
  position: absolute;
  left: 0;
  top: 1em;
  margin-top: calc(-0.5em + 2px);
  content: "";
  background: var(--main-color);
}

/*リストスタイル2のスタイル
---------------------------------------*/
.list-style2 {
  padding: 0;
  margin: 0;
  counter-reset: counter;
  list-style: none;
}

.list-style2 li {
  line-height: 1.5;
  padding: var(--xs) 0 var(--xs) 1.5em;
  position: relative;
}

.list-style2 li:before {
  content: counter(counter)".";
  counter-increment: counter;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.5em;
  width: 1.5em;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: var(--xs);
}

.list-style2 ul {
  counter-reset: counter;
}

.list-style2 ul li {
  padding: var(--xs) 0 0 2em;
}

.list-style2 ul li:before {
  content: "(" counter(counter)")";
  width: 1.8em;
}

/*リストスタイル3のスタイル
---------------------------------------*/

ul.list-style3 li {
  width: 100%;
  position: relative;
}

ul.list-style3.sub-menu {
  height: 0;
  overflow: hidden;
  transition-duration: 0.3s;
  background: var(--sub3-color);
}

ul.list-style3 li a,
ul.list-style3 li span {
  display: block;
  padding: var(--xs) 0;
  border-bottom: 1px solid var(--sub3-color);
}

ul.list-style3.sub-menu li a,
ul.list-style3.sub-menu li span {
  border-bottom: 1px solid var(--bg-color);
  padding-left: var(--xs);
}

ul.list-style3 li.sub-menu a,
ul.list-style3 li.sub-menu span {
  border-bottom: 1px solid var(--bg-color);
}

/*--リストマークのスタイル--*/
ul.list-style3 li a:after,
ul.list-style3 li.menu-item-has-children a:after {
  display: block;
  position: absolute;
  top: 50%;
  right: 0.5em;
  width: 0.5em;
  height: 0.5em;
  margin-top: -0.3em;
  content: "";
}

ul.list-style3 li a:after {
  border-top: solid 2px var(--main-color);
  border-right: solid 2px var(--main-color);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*--sub menuをOPENする「＋」の表示--*/
ul.list-style3 li.menu-item-has-children>a:after {
  border: none;
  /*
  color:var(--main-color);
  transform: rotate(0deg);
  	font-family: 'Font Awesome 5 Free';
	content:'\f067';
    font-weight: bold;
  margin-top:-1em;
  */
}

/* grayレイヤーのスタイル */
#gray-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  filter: alpha(opacity=50);
  z-index: -1;
}

/*form navのスタイル
---------------------------------------*/
.form-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--md);
}

.form-nav li {
  position: relative;
  margin-left: var(--xs);
  margin-right: var(--xs);
}

.form-nav li .circle {
  position: relative;
}

.form-nav li .circle:after {
  content: "";
  position: absolute;
  width: 70px;
  height: 2px;
  top: 50%;
  right: 0;
  margin-right: -70px;
  background-color: #ccc;
  ;
  z-index: 0;
}

.form-nav li:last-child .circle:after {
  width: 0;
  height: 0;
}

/*circleのスタイル
---------------------------------------*/
.circle {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  text-align: center;
  line-height: 1.3em;
  font-weight: bold;
  background-color: #ccc;
  /* 円の背景色 */
  color: #fff;
  /* 文字の色 */
}

.circle.current {
  background-color: var(--main-color);
  /* 円の背景色 */
  color: #fff;
  /* 文字の色 */
}

/* スクリーンリーダーのみ表示
--------------------------------------*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}