@charset "utf-8";

input,
select,
textarea {
  font-size: 16px !important;
}

.timeline-wrap{ margin-bottom:20px; clear:both; padding-top:40px; }
.timeline-003{ display:flex; justify-content:center; list-style:none; padding:0; }
.timeline-003 li{
  display:flex; flex:1 1; flex-direction:column; align-items:center; position:relative; z-index:1;
  color:#969da3; font-size:.8em;
}
.timeline-003 li.prev,
.timeline-003 li.current{ color:#eb6877; }
.timeline-003 li::before{
  content:''; display:inline-block; width:14px; height:14px; margin-bottom:6px;
  border:2px solid #d6dde3; border-radius:50%; background-color:#fff;
}
.timeline-003 li.prev::before,
.timeline-003 li.current::before{ border-color:#eb6877; }
.timeline-003 li:not(:last-child)::after{
  content:''; position:absolute; top:8px; left:50%; z-index:-1; width:100%; height:2px; background-color:#d6dde3;
}
.timeline-003 li.current::before,
.timeline-003 li.prev::after{ background-color:#eb6877; }

.r-mi{
  float:left; width:96%; max-width:1024px; margin:10px 2% 10px 2%;
}

.r-3{
  position:relative; padding:.25em 0 .5em .5em; border-left:6px solid #EB6877;
  font-size:20px; font-weight:bold; letter-spacing:1px; width:100%; box-sizing:border-box; float:left;
}
.r-3::after{
  position:absolute; left:0; bottom:0; content:''; width:100%; height:0; border-bottom:1px solid #999;
}
@media (min-width:641px){
  .r-3{ padding:.25em 0 .5em .75em; }
}
.r-kose,
.r-ko{
  float:left; width:96%; max-width:1024px; border-bottom:1px dotted #ccc;
}
/*
.r-kose{ border-bottom:1px solid #999; }
.r-kose,.r-ko:last-child {
    border-bottom: none;
}*/
.r-ko{
  margin:0 2% 10px 2%;
  @media (min-width:641px){
    margin:10px 2% 0 2%;
    padding:10px 0 0 0;
  }
}
.r-kose{
  margin:0 2% 20px 2%;
  @media (min-width:641px){
    margin:10px 2% 0 2%;
    padding:10px 0 0 0;
  }
}

.r-ko1{
  float:left; width:100%; line-height:24px; margin-bottom:10px; font-size:14px; font-weight:bold;

  @media (min-width:641px){
    width:35%; line-height:40px; margin-bottom:0; font-weight:normal;
    font-size: 16px;
  }
}
.r-ko2{ float:left; width:10%; }
.r-ko3{
  float:left; width:100%;
  @media (min-width:641px){
    width:65%; line-height:40px;
  }
}

.r-hisu{
  float:right; width:40px; height:24px; text-align:center; color:#fff; font-size:12px; background-color:#EB6877;
  line-height:24px; margin-right:10px;

  @media (min-width:641px){
    height:40px; line-height:40px; margin-right:20px;
  }
}
.r-hisu2{ float:left; width:40px; height:40px; text-align:center; color:#fff; font-size:12px; line-height:40px; }


.hoge,
.hoge2,
.hoge3,
.hoge4,
.hoge5{
  border:0; padding:10px; font-size:14px; font-family:Arial, sans-serif; 
  border:3px solid #ccc; margin:0 0 20px; box-shadow:0 1px rgba(255,255,255,.5); border-radius:10px; box-sizing:border-box;
}
.hoge{ width:100%; background:url(../img/calender/ico_calendar_s.png) no-repeat right 15px center / 18px auto; }
.hoge2{ width:100%; }
.hoge3{ width:60%; }
.hoge4{ width:100%; margin:0 0 5px; }
.hoge5{ width:30%; }
@media (min-width:641px){
  .hoge5{ width:40%; }
}

.hoge:hover, .hoge:focus,
.hoge2:hover, .hoge2:focus,
.hoge3:hover, .hoge3:focus,
.hoge4:hover, .hoge4:focus,
.hoge5:hover, .hoge5:focus{ border-color:#23ABdd; outline:none; }

/* 新ページで .hoge3 に適用 */
select.hoge2,
select.hoge3{
  -webkit-appearance:auto !important;
  appearance:auto !important;
  background-image:none !important; /* 余計なカスタム矢印があれば無効化 */
}
.button-wrap{
  margin: 100px 0;
  clear: both;
}
.sou-b{
  text-align:center; 
  margin-bottom: 70px!important; 
  margin-top: 100px!important;
  padding-top: 100px !important;
}
@media (min-width:641px){
  .sou-b{ 
    margin-bottom: 100px; }
}
.sou-b input {
    display: block !important;  /* 縦に積み上げる */
    margin: 20px auto !important; /* 中央寄せ */
}
input.b-border {
    width: 90%;
    height: 3.45em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    font-weight: 500;
    /*margin-top: 50px;
    margin-bottom: 50px;*/
    background-color: #eb6877!important;
    color:#fff;
    box-sizing: border-box!important;
    border: solid 1px #eb6877!important;
    border-radius: 0.75em!important;
    transition: color 0.4s ease 0s, background-color 0.4s ease 0s;
    @media (min-width:641px){
      max-width: 25rem;
    }
}
input.b-border:hover{
  background-color: #fff!important;
  color: #EB6877;


}
input.b-border2 {
  text-align: center;
    width: 90%;
    height: 3.45em;
display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e3e5e6;
    border: solid 1px #e3e5e6!important;
    border-radius: 0.75em!important;
    color: #000;
    @media (min-width:641px){
      max-width: 25rem;
    }
    
}
input.b-border2:hover{
  background-color: #adafb1;
  color: #000;
  

}


/* ===== 説明文など ===== */
.come-txt{ float:left; width:100%; font-size:14px; line-height:18px; padding-bottom:15px; }
.rad-txt{ float:left; line-height:40px; letter-spacing:1px; padding-bottom:20px; padding-left: 20px;}
/* 行全部をタップ可能にしたい場合 */
.rad-txt > label {
  /*display: block;*/
  width: 100%;
  padding: 10px;
  cursor: pointer;
}
.rad-txt2{
  float:left; line-height:40px; letter-spacing:1px; 
  font-size:14px; padding-bottom:20px;
  @media (min-width:641px){
font-size:16px;
  }
}
.rad-txt2 a{ color:#eb6877; text-decoration:underline; }
.rad-txt2 a:hover{ text-decoration:none; }
input#r1{ margin-right:5px; }


.r-ko1{
  float:left; width:100%; line-height:24px; margin-bottom:10px; font-size:14px; font-weight:bold;

  @media (min-width:641px){
    width:35%; line-height:40px; margin-bottom:0; font-weight:normal;
    font-size: 16px;
  }
}
.r-ko2{ float:left; width:10%; }
.r-ko3{
  float:left; width:100%;
  @media (min-width:641px){
    width:65%; line-height:40px;
  }
}
.r-nai,
.r-nai2,
.r-naise,
.r-naise2{
  float:left; width:96%; max-width:1024px; margin:0 2%; padding:10px 0; box-sizing:border-box;
  border-bottom:1px dotted #ccc;
}
.r-nai,
.r-naise{ background-color:#f9f9f9; }
.r-naise,
.r-naise2{ border-bottom:1px solid #999; }
/* ===== カウンター ===== */
.counter-container{ display:flex; align-items:center; margin-bottom:25px; padding-left:15px; }
.counter-button{
  width:40px; height:40px; background:#fff; border:3px solid #ccc; border-radius:50%;
  font-size:20px; display:flex; justify-content:center; align-items:center; cursor:pointer;
}
.counter-button:hover,
.counter-button:focus{ border-color:#23ABdd; outline:none; }

.counter-input{
  width:100px; height:30px; text-align:center; border:3px solid #ccc; border-radius:10px; margin:0 10px; font-size:18px;
}
.counter-input:hover,
.counter-input:focus{ border-color:#23ABdd; outline:none; }

.required{ color:red; }

/* ===== ボタン ===== */
.button-container{ margin-bottom:10px; }
.button-container button{
  margin:5px;
  padding:5px 10px;            /* モバイル基準 */
  background-color:#ffffff;
  border:2px solid #ccc;
  border-radius:25px;
  cursor:pointer;
  font-size:13px;

  @media (min-width:641px){
    padding:10px 20px;
    font-size:16px;
  }
}
.button-container button:hover{ background-color:#e0e0e0; }
/* ===== テキストエリア ===== */
.text-area-container{ margin-top:10px; }

#guest-count-textarea,
#companion-count-textarea{
  width:100%; height:100px; padding:10px; border:1px solid #ccc; border-radius:5px;
}

#text-area{
  width:100%; height:100px; border:3px solid #ccc; border-radius:10px;
}
#text-area:hover,
#text-area:focus{ border-color:#23ABdd; outline:none; }