@charset "UTF-8";
/* フォームスタイル
-------------------------------------------- */
input,textarea, select, .textarea-scroll{
    font-size: 1.6rem;
    border: 1px solid var(--color-gray-400);
    padding: 1rem;
    vertical-align: middle;
    border-radius: 0.2rem;
    width: 100%;
}
input::placeholder,
select:invalid{
  color: var(--color-gray-400);
}
select option {
  color: var(--color-gray-600);
}
input[type=radio]{
  appearance: none;
  position: absolute;
  border:none;
}
.select-birth{
  gap: 1rem;
}
.select-birth select{
    max-width: 10rem;
}
.radio_wrap,
.select-wrap{
  width: 100%;
}
.radio_wrap label{
    padding: 1rem 1rem 1rem 4rem;
    width:100%;
}
.radio_wrap.flexbox label:not(.radio_block){
    width: calc(100% / 4);
    margin-left: 0;
    margin-right: auto;
}
@media screen and (max-width: 768px) {
  .radio_wrap.flexbox{
    flex-direction: column;
    gap: 1rem;
  }
  .radio_wrap.flexbox label{
    width: 100%;
  }
}
@media (hover: hover) and (pointer: fine) {
  .radio_wrap label:hover{
    background: var(--color-gray-100);
  }
}
.radio_wrap .radio_block{
  width: 100%;
}
.select-wrap.birth,
.select-wrap.address{
  gap: 1rem;
}
.select-wrap.birth select{
  max-width: 8rem;
}
.select-wrap.birth select:nth-of-type(1){
  max-width: 12rem;
}
.select-wrap.address select{
  max-width: 12rem;
}
.textarea-scroll{
  height: 24rem;
  margin-bottom: 2.4rem;
  text-align: left;
  padding: 1em;
  overflow-y: scroll;
  border: 1px solid var(--color-gray-400);
}
.textarea-scroll *{
  line-height: 1.6;
  font-size: 1.4rem;
  color: var(--color-gray-600);
}
.textarea-scroll .heading-3{
  background-color: var(--color-gray-200);
  padding-block: 1.2rem;
  font-size: initial;
}
.textarea-scroll .wrap{
  margin-bottom: 3rem;
}
.textarea-scroll .ttl{
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.icon-required{
  color: #f00;
  font-size: 1.8rem;
}
.consent_area.checkbox label{
  font-size:1.2rem;
}
.btn_wapper{
  margin-block: 4rem 2rem;
}
/* checkbox  */
.checkbox{  
  position: relative;
  width: 100%;
}
.checkbox_icon {
  appearance: none;
  height: 1.8rem;
  width: 1.8rem;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 0.4rem;
  transform: translateY(-50%) translateX(0);
}
.checkbox_icon:checked {
  background-color: #3B6DCA;
  border-color:#3B6DCA;
}
.checkbox_icon:checked + label{
  font-weight: bold;
}
.checkbox_icon:checked::before {
  content: "";
  display: block;
  position: relative;
  left: 5px;
  top: 0px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.checkbox_icon:focus-visible {
  outline: 2px solid #1d9bf0;
  outline-offset: 2px;
}
.checkbox_icon + label{
  display: block;
  padding: 1rem 0 1rem 3rem;
}
.js-extra-field .checkbox_icon{
    outline: red solid 0.3rem;
}
@media (hover: hover) and (pointer: fine) {
  .checkbox_icon + label:hover{
    background-color: var(--color-gray-100);
  }
}
/* radio */
.radio_icon{
    padding-left: 30px;
    display: block;
    cursor: pointer;
    position: relative;
}
.radio_icon input{
  position:absolute;
  z-index:-1;
  opacity:0;
}
.radio_icon .indicator{
  width:20px;
  height:20px;
  border: 1px solid var(--color-gray-400);
  position:absolute;
  top:1.2rem;
  left:1rem;
  border-radius: 0.2rem;
  border-radius:50%;
}

.radio_icon input:checked ~ .indicator{
    border-color: #3B6DCA;
    border-width: .2rem;
}
.radio_icon .indicator::after{
  content:'';
  display:none;
  position:absolute;
}
.radio_icon:has(input:checked){
  font-weight: bold;
}
.radio_icon input:checked ~ .indicator::after{
  display:block;
}
.radio_icon .indicator::after{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3B6DCA;
    top: 3px;
    left: 3px;
}
.section-form .tab-control{
    justify-content: center;
}
.section-form .tab-control li{
    max-width: 32rem;
    display: inline;
}
.section-form .tab-contents{
    border-right:0;
    border-bottom: 0;
    border-left: 0;
    padding-top: 3.6rem;
}
/* カレンダー
-------------------------------------------- */
.calendar-area {
  padding-bottom: 6rem;
  }
.calendar-area .tableCaption{
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 0.1rem solid var(--color-gray-300);
}
.calendar-area .tableCaption p.calendar_arrow {
    padding: 1rem 2rem;
    width: min(12rem, 100%);
    color: var(--color-gray-400);
    position: relative;
    border-radius: 0.2rem;
}
.calendar-area .tableCaption p.calendar_arrow.arrow-left:before,
.calendar-area .tableCaption p.calendar_arrow.arrow-right:before{
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--color-gray-400);
  border-right: 0;
  position: absolute;
  top: 50%;
}
.calendar-area .tableCaption p.calendar_arrow.arrow-left:before{
  transform: scale(-1, 1) translateY(-50%) translateX(0); 
  left: 2rem;
}
.calendar-area .tableCaption p.calendar_arrow.arrow-right:before{
  transform: translateY(-50%) translateX(0);
  right: 2rem;
}
.calendar-area .tableCaption p.calendar_arrow.act{
  color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {
  .calendar-area .tableCaption p.calendar_arrow.act:hover{
      background-color: var(--color-gray-200);
      cursor: pointer;
  }
}
.calendar-area .tableCaption p.calendar_arrow.act:before{
  border-left-color: var(--color-primary);
}
.calendar-area table {
    width: 100%;
}
.calendar-area .tableCaption p.calendar_cap {
    font-size: 2.4rem;
    font-weight: bold;
    padding: 10px;
}
.calendar-area table thead {
    background-color: var(--color-white);
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
}
.calendar-area table :not(thead) tr {
    border-top: 0.1rem solid var(--color-gray-300);
}
.calendar-area table thead tr{
  border-top: 0.1rem solid var(--color-gray-400);
}
.calendar-area table tr th {
    padding: 0.8rem 0;
    text-align: center;
}
.calendar-area table tr th span.day {
  font-size: 1.8rem;
  line-height: 1;
}
.calendar-area table tr th span.week {
    display: block;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.4;
}
.calendar-area table tr th.saturday {
    background-color: #eff5f9;
}
.calendar-area table tr th.saturday span.day {
    color: #2d4ced;
}
.calendar-area table tr th.sunday {
    background-color: #ffedee;
}
.calendar-area table tr th.sunday span.day {
    color: #ed2d5e;
}
.calendar-area table tr td{
    vertical-align: middle;
    height: 100%;
}
.calendar-area table tr td:not(:has(.calender-select-btn)),
.calendar-area table .calender-select-btn{
  padding: 0.65rem 0.5rem;
  text-align: center;
}
.calendar-area table tr td:not(.time):not(:has(.calender-select-btn)){
  background-color: var(--color-gray-200);
}
.calendar-area table tr td.time {
    background-color: #FAFAFA;
    color: var(--color-gray-600);
    font-size: clamp(1.3rem,4vw,1.5rem);
}
.calendar-area table .calender-select-btn {
    display: block;
    height: 100%;
    font-size: 2rem;
    cursor: pointer;
    color: #52B33E;
    box-sizing: border-box;
}
@media (hover: hover) and (pointer: fine) {
  .calendar-area table .calender-select-btn:hover{
    background-color:lightyellow;
  }
}
.calendar-area table .calender-select-none{
    color:var(--color-gray-400);
}
.calendar-area table tfoot tr{
  border-block: 0.1rem solid var(--color-gray-400);
}

@media screen and (max-width: 768px) {
  .calendar-area .tableCaption p.calendar_arrow{
      width: min(9rem, 100%);
      font-size: 1.4rem;
      padding: 1rem 1.5rem;
  }
  .calendar-area .tableCaption p.calendar_arrow.arrow-left{
    text-align: left;
  }
  .calendar-area .tableCaption p.calendar_arrow.arrow-left:before{
    left:0;
  }
  .calendar-area .tableCaption p.calendar_arrow.arrow-right{
    text-align: right;
  }
  .calendar-area .tableCaption p.calendar_arrow.arrow-right:before{
    right:0;
  }
}

/* 決済ページ
-------------------------------------------- */
.section-apply .price_wrapper {
    padding-block: 30px;
    background-color: var(--color-gray-100);
    border-block-end: 1px solid var(--color-gray-300);
}
.section-apply .price_wrapper .ttl{
  font-size: clamp(1.6rem, 4vw, 2rem);
  line-height: 1;
  justify-content: center;
  align-items: baseline;
}
.section-apply .price_wrapper .ttl em{
    font-size: 1.8em;
    margin-inline:0.3rem;
    vertical-align: text-bottom;
}
.section-apply .radio_wrap{
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
}
.card_area > .flexbox{  
  width:100%;
}
.card_area #card-info {
  width: calc(100% - 27rem);
}
.card_area .img_area{
    width: 27rem;
}

#card-info .alertTxt {
  font-size: 1.2rem;
  color: var(--color-warning);
  margin-top: 10px;
  text-align: left;
}
.card-info-input{
  font-size: 1.6rem;
  border: 1px solid var(--color-gray-400);
  padding: 1rem;
  vertical-align: middle;
  border-radius: 0.2rem;
  width: 100%;
}

@media screen and (max-width: 768px) {
  #card-element input{
    font-size:15px !important;
  }
  #card-info .alertTxt {
    font-size: 12px;
  }
}

/* 入力フォーム エラーメッセージ */
.red {
  color: var(--color-warning);
}

.bold {
  font-weight: bold;
}

/* 決済中モーダル */
.payment_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.payment_modal .payment_modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: white;
  padding: 30px;
  text-align: center;
  width: 300px; /* モーダルの幅を固定 */
  height: 250px; /* モーダルの幅を固定 */
  font-size: 18px;
  font-weight: bold;
  /* アニメーションを適用するスパン要素 */
  /* アニメーションを適用 */
}
.payment_modal .payment_modal-content .payment_modal_icon {
  margin: 25px auto;
  width: 80%;
  opacity: 0.9;
}
.payment_modal .payment_modal-content .animated-dots {
  display: inline-block;
}
@-webkit-keyframes dotAnimation {
  0% {
    content: "・";
  }
  25% {
    content: "・・";
  }
  50% {
    content: "・・・";
  }
  75% {
    content: "・・・・";
  }
  100% {
    content: "・";
  }
}
@keyframes dotAnimation {
  0% {
    content: "・";
  }
  25% {
    content: "・・";
  }
  50% {
    content: "・・・";
  }
  75% {
    content: "・・・・";
  }
  100% {
    content: "・";
  }
}
.payment_modal .payment_modal-content .animated-dots::after {
  content: "";
  display: inline-block;
  -webkit-animation: dotAnimation 1.5s infinite steps(3);
          animation: dotAnimation 1.5s infinite steps(3);
}