@charset "utf-8";
/* CSS Document */

textarea { max-height: 60dvh; }
button:disabled {background: #ccc;}

label.required_label {
  display: inline-block;
  width: 100%;
  padding: 5px;
  border: #F98D46 solid 1px;
  background: #fff3ec;
  cursor: pointer;
}
label.required_label:has(input[type="checkbox"]:checked) { 
  border-color: #09B47E;
}

.error_file,
.error_radio,
.error_checkbox {
  color: #F98D46;
  font-weight: bold;
  /* JSで表示にするため初期非表示 */
  display: none;
}


.list-nerikore_goods {
  gap: 10px;
}
.list-nerikore_goods li {
  display: flex;
  flex-direction: column;
}

.list-compact {
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin-top: auto;
}
.list-compact dt {
  font-weight: bold;
}


/* modal */
.modal {
  padding: 200px 0;
}

/* モーダルを開くボタン */
.modal__trigger {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 8px;
  border-radius: 5px;
  border: #ddd solid 1px;
  cursor: pointer;
  transition: .3s;
}

.del1 .modal__trigger {
  background: #eee;
}
.modal__trigger:hover {
  background-color: #CDE7DB;
}



/* モーダル本体 */
.modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.modal__layer {
  height: 100%;
  background: rgba(50, 50, 50, .85);
  cursor: pointer;
}

.modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 40px), 1000px);
  height: calc(100% - 40px);
  padding: 20px 25px;
  background: #fff;
}

.modal__inner {
  position: relative;
  overflow-y: scroll;
  height: 100%;
  padding: 0 20px 20px;
}

/* モーダルを閉じるボタン */
.modal__close__wrap {
  position: sticky;
  top: 0;
  right: 0;
  width: 44px;
  margin-left: auto;
  text-align: right;
}
.modal__close {
  position: relative;
  width: 44px;
  height: 44px;
  background: rgba(50, 50, 50, 1);
  cursor: pointer;
  transition: opacity .6s;
}

.modal__close:hover {
  opacity: .6;
}

.modal__close:before,
.modal__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  content: '';
}

.modal__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* モーダル内 前後 */

.modal__prev,
.modal__next {
  position: absolute;
  top: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 5px 0;
  color: #fff;
  text-align: center;
  font-weight: bold;
  transform: translateY(-50%);
  background: rgba(50, 50, 50, 1); 
  z-index: 100;
  cursor: pointer;
}
.modal__prev:hover,
.modal__next:hover {
  opacity: .6;
}
.modal__prev {
  left: -15px;
}
.modal__next {
  right: -15px;
}

.modal__prev .txt,
.modal__next .txt {
  font-size: .5em;
}


/* モーダル内のコンテンツ */
.modal__content {
}

.modal__text {
  margin-top: 30px;
  line-height: 2.875;
}


/* 星 */

.stars span{
  display: flex;               /* 要素をフレックスボックスにする */
  flex-direction: row-reverse; /* 星を逆順に並べる */
  justify-content: center;   
}

.stars input[type='radio']{
  display: none;               /* デフォルトのラジオボタンを非表示にする */
}

.stars label{
  color: #D2D2D2;              /* 未選択の星をグレー色に指定 */
  font-size: 30px;             /* 星の大きさを30pxに指定 */
  padding: 0 5px;              /* 左右の余白を5pxに指定 */
  cursor: pointer;             /* カーソルが上に乗ったときに指の形にする */
}

.stars label:hover,
.stars label:hover ~ label,
.stars input[type='radio']:checked ~ label{
  color: #F8C601;              /* 選択された星以降をすべて黄色にする */
}


.form_list,
.form_list2 {
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin-top: 1em;
}

.form_list dt,
.form_list2 dt {
  font-size: 1.1em;
  font-weight: bold;
}

.form_list dd {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.form_list dd > label {
  width: 40%;
  max-width: 320px;
  padding: 10px;
  border-radius: 10px;
  border: #aaa solid 1px;
  cursor: pointer;
}
.form_list dd > label input {
  display: none;
}
.form_list dd > label input > .txt {
}
.form_list dd > label .icon {
  margin-left: -1em;
  color: transparent;
}
.form_list dd > label:hover,
.form_list dd > label:has(:checked) {
  background: #FDEDD3;
  border-color: #F98D46;
}
.form_list dd > label:hover .icon,
.form_list dd > label:has(:checked) .icon {
  color: #F98D46;
}

.form_list textarea {
  width: 100%;
  height: 3em;
}



.modal__content h5 {
  position: relative;
  margin: 1em 0 1.5em;
  padding: 10px;
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
  background-color: #2b8161;
}
.modal__content h5:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  width: 20px;
  height: 10px;
  margin-top: -1px;
  background-color: #2b8161;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.modal__content h6 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  margin: 1em 0;
  font-size: 1.1em;
  font-weight: bold;
}
.modal__content h6:before,
.modal__content h6:after {
  content: '';
  display: block;
  width: auto;
  height: 1px;
  flex-grow: 1;
  background: #2b8161;
}


.modal__content hr {
  margin: 50px 0;
  border-top: #E7E4DF solid 1px;
}


.list-goods {
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin-top: 1em;
  line-height: 1.8;
}
.list-goods dt {
  font-weight: bold;
}
.list-goods dd {
  margin-left: 1em;
}





@media print, screen and (max-width: 768px) {
}
@media print, screen and (min-width: 769px) {
  
  .form_list2 {
    display: flex;
    gap: .5em;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
  }
  .form_list2 dt {
    width: 7em;
  }
  .form_list2 dd {
  }
}