@charset "UTF-8";

/*====================================================
**projects
====================================================*/
/* 会員ページ
------------------------------------- */
.member-main{
  background: #f7f7f7;
}
/* 予約履歴
------------------------------------- */
ul.reserve-history li{
  border-bottom:1px solid #ccc;
  padding:var(--sm) 0;
  margin:var(--sm) 0;
}
ul.reserve-history .basic{
  background: #f7f7f7;
  padding: var(--sm);
  height: 100%;
}
ul.reserve-history .item{
  border-bottom:1px dotted #ccc;
  padding:var(--sm) 0;
  margin:var(--sm) 0;
}
ul.reserve-history .item:first-child{
  padding-top:0;
  margin-top:0;
}
ul.reserve-history .item:last-child{
  padding-bottom:0;
  margin-bottom:0;
  border:none;
}
/* 出店プラン
------------------------------------- */
td.light{
  text-align:center;
  border-bottom: none;
  border-bottom: var(--bd-width) solid var(--bd-color);
  background:#fff;
  color:#666;
}
td.standard{
  text-align:center;
  border-bottom: none;
  background:var(--main-color)!important;
  color:white;
}

td.premium{
  text-align:center;
  border-bottom: none;
  color: white;
  background: #ddc700!important;
}

/*詳細ページのスタイル
---------------------------------------*/
.item-contents-wrap{
  padding-left: var(--md);
}
.item-contents-wrap .title{
  line-height: 1.8;
}
.item-contents-wrap h3{
  color:var(--main-color);
  font-size: calc(var(--fs-sm) * 1.2);
}
.item-contents-wrap .item-price{
  font-size: var(--fs-md);
  font-weight: bold;
  padding: var(--sm);
  background: var(--sub1-color);
  border-radius: var(--radius);
}
@media only screen and (max-width: 992px){
  .item-contents-wrap{
    padding-left: 0;
  } 
}

/*購入ページのスタイル
---------------------------------------*/
.purchase-currency {
  padding: 0;
  border: none;
}

.purchase-currency label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    max-width: 350px;
    margin-bottom: .4em;
    padding: .5em .7em;
    border: 1px solid var(--bd-color);
    border-radius: 3px;
    background-color: var(--bg-sub1-color);
    cursor: pointer;
}

.purchase-currency label:has(:checked) {
    background-color: var(--main-color);
    color: #fff;
}

.purchase-currency label::before,
.purchase-currency label:has(:checked)::after {
    border-radius: 50%;
    content: '';
}

.purchase-currency label::before {
    width: 14px;
    height: 14px;
    background-color: #fff;
}

.purchase-currency label:has(:checked)::after {
    position: absolute;
    top: 50%;
    left: calc(7px + .7em);
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background-color: var(--main-color);
}

.purchase-currency input {
    display: none;
}

/*loginページのスタイル
---------------------------------------*/
.form-signin {
  width: 100%;
  max-width: 380px;
  padding: 15px;
  margin: auto;
  padding-top:5vh;
  padding-bottom:5vh;
}

/*item-listのスタイル
---------------------------------------*/
.item-list{
  position: relative;
}
.item-list.row {
  --bs-gutter-x: 1rem;
}
.lottery-list:hover > .favorite-wrap,
.item-list:hover > .favorite-wrap{
  visibility: visible;
}
.favorite-wrap{
  position: absolute;
  left:0;
  top:50%;
  width:100%;
  height:100px;
  margin-top:-50px;
  z-index: 100;
  visibility:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(255,255,255,0.7);
}
.favorite_btn{
  cursor: pointer;
}
.badge.favorite_btn{
  color:#999;
  border:1px solid #ccc;
}
.badge.favorite-active{
  color: var(--accent2-color);
  border-color: var(--accent2-color);
  background-color: #fff;
}
.favorite_btn.active,
.favorite_btn:hover{
  color:var(--main-color)!important;
  border-color:var(--main-color)!important;
}
.favorite_btn i{
  pointer-events: none;
}
.favorite-count{
  color: #999;
  display: flex;
  align-items: center;
  justify-content:flex-end;
}
.favorite-count.favorite-active{
  color: var(--accent2-color);
}
.item-card{
  height: 100%;
  background-color: var(--bg-sub1-color);
  border-radius: var(--radius);
}
.item-card .item-main{
  padding:var(--sm);
}
.item-card .item-title{
  
}
.item-card .catchphrase{
  
}
@media screen and (max-width: 567px) {
  .item-card .catchphrase{
    font-size: var(--fs-xs);
  }
}

/*cart-item-listのスタイル
---------------------------------------*/
ul.cart-item-list li{
  --img-width:120px;
  display: flex;
  padding:var(--sm) 0;
  border-bottom:1px solid #eee;
}
ul.cart-item-list li:first-child{
  border-top:1px solid #eee;
}
ul.cart-item-list .item-img{
  width:var(--img-width);
}
ul.cart-item-list .item-detail{
  align-items: center;
  width:calc(100% - var(--img-width));
  padding: 0 var(--md);
}
.item-detail .item-name,
.item-detail .privilege,
.item-detail .expiration{
  width: 100%;
  font-weight:normal;
}
.main_item,.sub_item{
  background:white;
}
.main_item{
  color:var(--main-color);
  border:1px solid var(--main-color);
}
.sub_item{
  color:var(--sub1-color);
  border:1px solid var(--sub1-color);
}
.cart-option-wrap{
  padding:var(--xs);
}
.cart-option-wrap .badge.option{
  border:1px solid #ccc;
  background-color: #eee;
  font-weight: normal;
}
.trash{
  display: inline-block;
  /*
  border-left: 1px solid #eee;
  padding:0 var(--xs);
  */
  cursor: pointer;
}
.trash i{
  pointer-events: none;
}
/* square スタイル*/
#card-container {
  margin-top: 15px!important;
  min-height: 60px;
}

/*purchaseページのスタイル
---------------------------------------*/
.purchase-main-wrap{
  position:relative;
  min-height: 450px;
}
.price-wrap{
  position:absolute;
  top:0;
  right:0;
}
.price-detail{
  display: flex;
  flex-wrap: wrap;
}
.price-detail dt{
  width:60%;
}
.price-detail dd{
  text-align: right;
  width:40%;
}
.price-detail.total-price{
  margin-top:var(--xs);
  padding-top:var(--xs);
  border-top:1px solid  #666;
}
.price-detail.total-price dt,
.price-detail.total-price dd{
  font-weight: bold;
  font-size: var(--fs-md);
  color:var(--main-color);
}
.noshi-img{
  position: relative;
}
.noshi-label,.noshi-name{
  position: absolute;
  left:0;
  display: flex;
  align-items: center;
  width:100%;
}
.noshi-label{
  top:15%;
  font-size: var(--fs-md);
  letter-spacing: 0.2em;
}
.noshi-name{
  top:60%;
}
.noshi-font{
  font-weight: bold;
  writing-mode: vertical-rl;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
@media only screen and (max-width: 1200px){
  .price-wrap{
    position:static;
  }
}

/* 料金詳細 のスタイル
----------------------------------------------------------- */
.price-wrapper {
  background: #eee;
  padding: var(--sm);
  color: #000;
}

table.price-subtotal,
table.price-detail {
  width: 100%;
}

table.price-subtotal th,
table.price-detail th {
  padding: var(--sm);
  text-align: left;
  width: 75%;
}

table.price-detail th {
  font-weight: normal;
}

table.price-subtotal td,
table.price-detail td {
  text-align: right;
  width: 25%;
}

table.price-subtotal {
  margin-top: var(--md);
}

table.price-subtotal th,
table.price-subtotal td {
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--font-color);
}

.price-total-wrap {
  padding: var(--md) var(--sm);
}

.price-total {
  color: var(--caution-color);
  font-weight: bold;
  font-size: var(--fs-lg);
}

/* アイテムカート のスタイル
----------------------------------------------------------- */
.item-detail .price {
  font-size: var(--fs-md);
  font-weight: bold;
}

.item-detail .num {
  display: inline-block;
  line-height: 1.3;
  padding: 3px var(--sm);
  border-radius: 3px;
  font-size: var(--fs-sm);
  background: #eee;
  border: 1px solid #ccc;
}

/* calendar navスタイル
----------------------------------------------------------- */
.calendar-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.calendar-nav li{
  margin:5px;
}
/* calendarスタイル
----------------------------------------------------------- */
.calendar {
  padding-top: 30px;
  padding-bottom: 30px;
}

.calendar-row {
  margin-bottom: 15px;
}

.calendar-container {
  height: 100%;
  padding: var(--spx);
  background: #fff;
}

.table-calendar-wrapper {
  overflow: scroll;
  max-height: 85vh;
}

.table-calendar {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ccc;
}

.table-calendar thead td {
  background-color: var(--bg-sub1-color);
}

.table-calendar thead th {
  position: -webkit-sticky;
  position: sticky;
  white-space: nowrap;
  top: 0;
  z-index: 1;
}

.table-calendar thead tr:nth-child(1) th {
  top: 0;
}

.table-calendar thead tr:nth-child(2) th {
  top: 2rem;
}

.table-calendar thead th {
  z-index: 2;
}

.table-calendar thead tr th:first-child {
  z-index: 3;
}

.table-calendar th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
}

.table-calendar th,
.table-calendar td {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
}

.table-calendar .date {
  font-size: var(--fs-sm);
}

.table-calendar .possible {
  display: inline-block;
  pointer-events: all;
  cursor: pointer;
}

.table-calendar .possible:hover {
  color: #007bff;
}

.table-calendar .impossible {
  color: #ccc;
}

.table-calendar .sat {
  color: #007bff;
}

.table-calendar thead .sat {
  background: #e1f3f4;
}

.table-calendar .sun {
  color: #dc3545;
}

.table-calendar thead .sun {
  background: #f7e1e2;
}

.table-calendar .status {
  padding: 5px 0;
}

.table-calendar .calendar-cell {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: pointer;
}

.table-calendar .calendar-cell:hover {
  background-color:var(--main-color);
  opacity: 0.5;
}

.calendar-ym {
  padding: 10px;
  text-align: center;
}

.calendar-price {
  word-wrap: break-word;
  font-size: 0.7rem;
  padding: 5px 0;
  font-family: Helvetica, "Helvetica Neue";
}

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

  .table-calendar th,
  .table-calendar td {
    padding: 6px 3px !important;
  }
}

@media screen and (max-width:992px) {
  .calendar-container {
    padding: 0;
  }

  .table-calendar th,
  .table-calendar td {
    padding: 10px 3px !important;
  }
}

/* timetableのスタイル
----------------------------------------*/
.time-calendar{
  width:100%;
}
.time-calendar td,.time-calendar th{
  padding : var(--xs);
  border-bottom: 1px solid #ccc;
}
.time-calendar th{
  background: var(--bg-sub1-color);
}

.time-calendar-wrap input[type=radio] {
  display: inline-block;
}

.time-calendar-wrap label {
  position: relative;
  flex: 1;
}

.time-calendar-wrap input {
  width: 50px;
  height: 30px;
  opacity: 0;
}

.time-calendar-wrap .list-item-label {
  position: absolute;
  top: 0;
  left: 0;
  color: #666;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-right: 1px solid #b6b6b6;
}

.time-calendar-wrap label:last-child .list-item-label {
  border-right: none;
}

.time-calendar-wrap input[type=radio]+.list-item-label::before {
  display: none;
}

.time-calendar-wrap input[type=radio]+.list-item-label::after {
  display: none;
}

.time-calendar-wrap .list-item-label {
  margin: 0px;
}

.time-calendar-wrap div:last-child .list-item-label {
  border-right: 0;
}

.time-calendar-wrap input:focus+.list-item-label {
  outline: #000;
  border: 2px solid #000;
}

.time-calendar-wrap input:hover+.list-item-label,
.time-calendar-wrap input:checked+.list-item-label {
  background: var(--main-color);
  font-weight: 500;
  color: var(--bg-color);
}

/*option-listのスタイル
---------------------------------------*/
.option-card{
  
}
.option-card-img{
  aspect-ratio: 4 / 3; 
  overflow: hidden;  
}
.option-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; 
}
.option-main{
  padding:var(--xs);
}
.option-title{
  margin-bottom:var(--xs);
}
.option-catchphrase{
  margin-bottom:var(--xs);
}
.option-choices{
  padding:var(--xs);
  background-color: #eee;
}