@charset "utf-8";

/*デフォルトのフォーカススタイル解除とスタイル付け*/
.uk-input {
  height: unset;
  vertical-align: unset;
  display: unset;
  width: unset;
  outline: none;
}

input[type='date']:focus:not([tabindex^='-']),
input[type='time']:focus:not([tabindex^='-']),
input[type='number']:focus:not([tabindex^='-']),
input[type='text']:focus:not([tabindex^='-']),
input[type='tel']:focus:not([tabindex^='-']),
input[type='email']:focus:not([tabindex^='-']),
textarea[name='usermessage']:focus:not([tabindex^='-']) {
  outline: none;
  border: 2px solid rgba(100, 141, 133, 0.1);
}
input[type='date']:focus,
input[type='time']:focus,
input[type='number']:focus,
input[type='text']:focus,
input[type='tel']:focus,
input[type='email']:focus,
textarea[name="usermessage"]:focus {
  background-color: rgba(100, 141, 133, 0.1);
}
input[type='date']::placeholder,
input[type='time']::placeholder,
input[type='number']::placeholder,
input[type='text']::placeholder,
input[type='tel']::placeholder,
input[type='email']::placeholder,
textarea[name="usermessage"]::placeholder {
  opacity: 0.7;
}

.formTitle .must {
  display: inline-block;
  color: #fbfdf8;
  font-size: 12px;
  letter-spacing: 0.4px;
  background-color: #d47843;
  padding: 1px 5px;
  margin-left: 7.5px;
  vertical-align: 1px;
  border-radius: 1px;
}

.formContent span,
.formContent p {
  display: none;
}

.form-mainbox .formMenu:nth-of-type(3) .formTitle::after,
.form-mainbox .formMenu:nth-of-type(4) .formTitle::after,
.form-mainbox .formMenu:nth-of-type(5) .formTitle::after,
.form-mainbox .formMenu:nth-of-type(6) .formTitle::after,
.form-mainbox .formMenu:nth-of-type(7) .formTitle::after {
  display: none;
}
/***********************************************/

.formTitle {
  margin-bottom: 30px;
}
/* .formTitle::after {
  content: '必須';
  display: inline-block;
  color: #fbfdf8;
  font-size: 12px;
  letter-spacing: 0.4px;
  background-color: #d47843;
  padding: 1px 5px;
  margin-left: 7.5px;
  vertical-align: 1px;
  border-radius: 1px;
} */

input[type='date'],
input[type='time'],
input[type='number'] {
  padding: 15px;
  font-size: 16px;
  font-family: 'Noto Sans CJK JP', sans-serif;
  background-color: #fbfdf8;
  border: 2px solid rgba(100, 141, 133, 0.1);

  box-sizing: border-box;
}
input[type='text'],
input[type='tel'],
input[type='email'],
textarea[name="usermessage"],
.uk-select:not([multiple]):not([size]) {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  font-family: 'Noto Sans CJK JP', sans-serif;
  background-color: #fbfdf8;
  border: 2px solid rgba(100, 141, 133, 0.1);
  box-sizing: border-box;
}
.uk-select:not([multiple]):not([size]) {
  width: 24%;
  height: auto;
  background-image: none;
}



.datetime {
  margin-bottom: 70px;
}

/*受け取り*/
.datetime {
  width: 50%;
}
.datetime .formContent {
  display: flex;
}
input[type='date'],
input[type='time'] {
  width: 48%;
  -webkit-appearance: none;
  color: #061e21
}
input[type='date'] {
  margin-right: 4%;
}

/*共通*/
.form-mainbox .formMenu {
  margin-bottom: 70px;
}
.form-mainbox .formMenu li {
  margin-bottom: 20px;
}
.form-mainbox .formMenu .formMenu {
  display: flex;
  flex-wrap: wrap;
}
.form-mainbox .formMenu li {
  width: 48%;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-mainbox .formMenu li:nth-child(2n + 1) {
  margin-right: 4%;
}

/*セットメニュー*/
.form-mainbox .formMenu:nth-of-type(2) li:nth-child(2n) {
  margin-right: 4%;
}
.form-mainbox .formMenu:nth-of-type(2) li:nth-child(2n + 1) {
  margin-right: 0;
}
.form-mainbox .formMenu:nth-of-type(2) li:first-child {
  margin-right: calc(100% - 48%);
}
.form-mainbox .formMenu:nth-of-type(2) li:nth-child(8){
  margin-top: 40px;
}
.form-mainbox .formMenu:nth-of-type(2) li:nth-child(9){
  margin-top: 40px;
}

/*その他のメニュー*/

/*お客様情報の注釈*/
.username .formTitle {
  margin-bottom: 50px;
  position: relative;
}
.username .formTitle::before {
  content: 'カタカナでフルネームをご記入ください。（例：トリヤマ　ノブ）';
  display: inline-block;
  font-family: 'Yu Mincho', 'YuMincho', serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.4px;

  position: absolute;
  top: 40px;
}
.phone .formTitle {
  margin-bottom: 50px;
  position: relative;
}
.phone .formTitle::before {
  content: 'ハイフンなしでご入力ください。';
  display: inline-block;
  font-family: 'Yu Mincho', 'YuMincho', serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.4px;

  position: absolute;
  top: 40px;
}
.usermail .formTitle {
  margin-bottom: 50px;
  position: relative;
}
.usermail .formTitle::before {
  content: 'ご予約内容の確認メール送信のため使用します。半角英数字でご入力ください。';
  display: inline-block;
  font-family: 'Yu Mincho', 'YuMincho', serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.4px;

  position: absolute;
  top: 40px;
}
.birth .formTitle {
  margin-bottom: 50px;
  position: relative;
}
.birth .formTitle::before {
  content: 'ご登録のお客様には、当店より特典付のメールを送らせていただきます。';
  display: inline-block;
  font-family: 'Yu Mincho', 'YuMincho', serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.4px;

  position: absolute;
  top: 40px;
}

.showcostblock{
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 10;
  background: #000;
  padding: 20px;
  color: #FFF;
}

input[type='submit'] {
  width: 100%;
  height: 120px;
  border: none;
  background-color: #061e21cc;
  color: #ebf2d9;
  font-size: 16px;
  font-family: 'Noto Sans CJK JP', sans-serif;
  letter-spacing: 0.5px;

  /* position: relative;
  z-index: 1; */

  cursor: pointer;
}
input[type='submit']:hover {
  opacity: 0.5;
  transition: 0.5s;
}

/**/
/*予約確認フォーム*/
/**/
.checktrue h4 {
  /* display: none; */
  margin-bottom: 30px;
}
.checktrue .formContent span {
  display: block;
}

.checktrue .datetime {
  width: 100%;
  display: flex;

  margin-bottom: 0;
  padding-bottom: 40px;
  border-bottom: 3px solid rgba(100, 141, 133, 0.1);
}
.checktrue .order1 {
  padding-top: 40px;
}
.checktrue .order6 {
  padding-bottom: 40px;
  border-bottom: 3px solid rgba(100, 141, 133, 0.1);
}

.checktrue .datetime .formTitle {
  width: 30%;
  min-width: 210px;
}
.checktrue .datetime .formContent span:first-child {
  margin-right: 20px;
}

.checktrue .order1 .formTitle {
  width: 30%;
  min-width: 210px;
}
.checktrue .order1 {
  display: flex;
}
.checktrue .order1 .formContent {
  width: 70%;
  display: flex;
}
.checktrue .order1 .formContent ul {
  width: 100%;
}

.order .formTitle {
  margin-bottom: 15px;
}

.checktrue .order2,
.checktrue .order3,
.checktrue .order4,
.checktrue .order5,
.checktrue .order6 {
  padding-left: 30%;

  box-sizing: border-box;
  margin-bottom: 30px;
  margin-top: 30px;
}
.checktrue .order6 {
  margin-bottom: 0;
}

.order2{
  display: none;
}

.order2.active{
  display: block;
}

.confirmorderlist {
  padding-left: 20px;
  display: flex;
  align-items: center;
}
.order1 .confirmorderlist {
  padding-left: 0;
}
.order1 .confirmorderlist span:first-child {
  padding-right: 20px;
}

.confirmorderlist span:first-child {
  width: 45%;
  margin-right: 5%;
}
.confirmorderlist span:nth-child(2) {
  width: 50%;
}
.confirmorderlist span {
  margin-bottom: 10px;
}

.checktrue .text .formTitle,
.checktrue .tel .formTitle,
.checktrue .email .formTitle,
.checktrue .usermessage .formTitle {
  width: 30%;
  min-width: 210px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
.checktrue .text,
.checktrue .tel,
.checktrue .email,
.checktrue .usermessage {
  display: flex;
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom: 3px solid rgba(100, 141, 133, 0.1);
}
.checktrue .text .formTitle::before {
  content: '';
}
.checktrue .tel .formTitle::before {
  content: '';
}
.checktrue .email .formTitle::before {
  content: '';
}

.checktrue .formbtns {
  margin-top: 80px;
  display: flex;
}
.checktrue .formbtns a {
  width: 35%;
  margin-right: 5%;
  border: 2px solid #061e21cc;

  display: flex;
  justify-content: center;
  align-items: center;
}
.checktrue .formbtns a:hover {
  opacity: .5;
  transition: .5s;
}

/* input[type='submit']::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

  background: red;
  opacity: .2;
  transform-origin: 100% 100%;
  transform: scaleY(0);
  transition: transform ease 1s;
}
input[type='submit']:hover {
  color: #ebf2d9;
  opacity: 1;
}
input[type='submit']:hover::before {
  transform-origin: 0% 0%;
  transform: scaleY(1);
} */

/**/
/*完了ページ*/
/**/
.done img {
  display: none;
}
.done h4 {
  text-align: center;
  font-size: 24px;
  letter-spacing: .7px;
  line-height: 2.3;
  color: #d47843;
}
.done h4 span {
  display: block;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: #D47843;
  line-height: 1.6;
  margin-bottom: 30px;
}
.done .notice {
  text-align: center;
  line-height: 2;
}
.br-680 {
  display: none;
}

.phone-number {
  padding: 25px 30px;
  background-color: rgb(212, 120, 67, 0.1);
  display: block;
  color: #d47843;
  font-size: 24px;
  width: 260px;
  margin: 0 auto;
}
.phone-number:hover {
  color: #d47843;
}

.icon-phone svg {
  width: 28px;
}

.done h4 span.sub {
  font-size: 16px;
}


/**/
@media screen and (max-width: 1024px) {
  .datetime {
    width: 100%;
  }
  .form-mainbox .formMenu .formMenu {
    display: block;
  }
  .form-mainbox .formMenu li {
    width: 100%;
  }
  .form-mainbox .formMenu li:nth-child(2n + 1) {
    margin-right: 0;
  }
  .form-mainbox .formMenu li:nth-child(2n) {
    margin-right: 0;
  }
  .showcostblock{
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    z-index: 10;
    background: #000;
    padding: 20px;
    color: #FFF;
  }
  .uk-select:not([multiple]):not([size]) {
    width: 48%;
  }
}
@media screen and (max-width: 650px) {
  .usermail .formTitle,
  .birth .formTitle {
    margin-bottom: 70px;
  }
}
@media screen and (max-width: 550px) {
  .username .formTitle {
    margin-bottom: 70px;
  }
}
@media screen and (max-width: 520px) {
  .datetime .formContent {
    display: block;
  }
  input[type='date'] {
    display:block;
    width: 100%;
    margin-bottom: 20px;
    margin-right: 0;
    padding: 15px;
  }
  input[type='time'] {
    width: 100%;
    display: block;
    padding: 15px;
  }

  .form-mainbox .formMenu li {
    /* display: block; */
  }
  .form-mainbox .formMenu li div:first-child {
    margin-bottom: 10px;
    margin-right: 4%;
  }
  input[type="number"] {
    width: 100px;
  }
  .uk-select:not([multiple]):not([size]) {
    width: 100%;
  }

  .pickup-container {
    display: block;
  }
  #pickupDate {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  #pickupTime {
    width: 100%;
  }
  #wholeAmount,
  #wholeSet,
  #wholeWSet,
  #halfAmount,
  #halfSet,
  #halfWSet {
    display: block;
  }
  .formTitle-sub {
    margin-bottom: 10px;
  }
  #coffeeIceAmount,
  #coffeeHotAmount,
  #latteIceAmount,
  #latteHotAmount,
  #teaAmount,
  #cokeAmount,
  #orangeAmount,
  #appleAmount {
    display: block;
  }
}

@media screen and (max-width: 360px) {
  .usermail .formTitle {
    margin-bottom: 100px;
  }
}
@media screen and (max-width: 300px) {
  .username .formTitle {
    margin-bottom: 100px;
  }
}

/*確認フォーム*/
@media screen and (max-width: 800px) {
  .confirmorderlist span:first-child {
    width: 50%;
    margin-right: 40%;
  }
  .confirmorderlist span:nth-child(2) {
    width: 10%;
  }
}
@media screen and (max-width: 760px) {
  .checktrue .order2,
  .checktrue .order3,
  .checktrue .order4,
  .checktrue .order5,
  .checktrue .order6 {
    padding-left: 210px;
  }
}
@media screen and (max-width: 600px) {
  .checktrue .datetime {
    display: block;
  }
  .checktrue .datetime .formContent {
    padding-left: 20px;
  }
  .checktrue .order1 {
    display: block;
  }
  .checktrue .order1 .formContent {
    width: 100%;
  }
  .checktrue .order2,
  .checktrue .order3,
  .checktrue .order4,
  .checktrue .order5,
  .checktrue .order6 {
    padding-left: 0px;
    padding-left: 0%;
  }
  .checktrue .text,
  .checktrue .tel,
  .checktrue .email,
  .checktrue .usermessage {
    display: block;
  }
  .confirmorderlist span:first-child {
    width: 80%;
    margin-right: 10%;
  }
  .checktrue .text .formTitle,
  .checktrue .tel .formTitle,
  .checktrue .email .formTitle,
  .checktrue .usermessage .formTitle {
    margin-bottom: 20px;
  }
  .checktrue .text .formContent,
  .checktrue .tel .formContent,
  .checktrue .email .formContent, 
  .checktrue .usermessage .formContent {
    padding-left: 20px;
  }

  .mgn-top-100 {
    margin-top: 50px;
  }
}



@media screen and (max-width: 680px) {
  .br-680 {
    display: block;
  }
}
@media screen and (max-width: 370px) {
  .phone-number {
    width: unset;
    padding: 15px 20px;
  }
}