@charset "UTF-8";

/* =========================================================
   Zoho Form - Sakura Style
========================================================= */

.zf-templateWidth {
  width: 100%;
  max-width: 970px;
  margin: 20px auto 50px;
  padding: 0 20px;
  box-sizing: border-box;
}

.zf-templateWrapper {
  width: 100%;
  padding: 48px 80px;
  background: #fffafa;
  border: 4px solid #fde6ea;
  box-sizing: border-box;
}

/* Zoho見出しはサイト側にタイトルがあるので非表示 */
.zf-tempHeadBdr {
  display: none;
}

.zf-subContWrap {
  padding: 0;
}

.zf-subContWrap ul,
.zf-templateWrapper ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 1項目 */
.zf-tempFrmWrapper {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 18px 0;
  border-bottom: 1px dashed #d8caca;
  box-sizing: border-box;
}

.zf-tempFrmWrapper .zf-labelName {
  width: 230px;
  flex-shrink: 0;
  padding-top: 8px;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.zf-tempFrmWrapper .zf-tempContDiv {
  flex: 1;
  min-width: 0;
}

/* 必須 */
.zf-important {
  color: #f00;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  margin-left: 4px;
}

/* input / select / textarea */
.zf-tempContDiv input[type="text"],
.zf-tempContDiv input[type="email"],
.zf-tempContDiv input[type="tel"],
.zf-tempContDiv textarea,
.zf-form-sBox {
  width: 100%;
  max-width: 100%;
  height: 32px;
  padding: 5px 8px;
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
  border-radius: 0;
  outline: none;
}

.zf-tempContDiv input[type="text"]:focus,
.zf-tempContDiv input[type="email"]:focus,
.zf-tempContDiv input[type="tel"]:focus,
.zf-tempContDiv textarea:focus,
.zf-form-sBox:focus {
  border-color: #e895b8;
  box-shadow: 0 0 0 2px rgba(232, 149, 184, 0.18);
}

.zf-tempContDiv textarea {
  min-height: 120px;
  height: 120px;
  resize: vertical;
}

/* 希望日：幅をやや短めに */
.zf-date .zf-tempContDiv input[type="text"] {
  max-width: 260px;
}

/* Zohoの補助ラベル dd-MMM-yyyy / 数値などは基本非表示 */
.zf-tempContDiv span > label {
  display: none;
}

/* datepicker説明文を出す場合 */
.zf-date .zf-tempContDiv::after {
  content: "カレンダーアイコンをクリックでカレンダー表示";
  display: block;
  margin-top: 5px;
  color: #000;
  font-size: 12px;
  font-weight: 700;
}

/* select */
.zf-form-sBox {
  max-width: 480px;
}

/* checkbox / radio */
.zf-oneColumns .zf-tempContDiv span,
.zf-twoColumns .zf-tempContDiv span,
.zf-threeColumns .zf-tempContDiv span,
.zf-sideBySide .zf-tempContDiv span,
.zf-multiAttType {
  display: block;
  margin: 0 0 9px;
  padding: 0;
}

.zf-tempContDiv input[type="checkbox"],
.zf-tempContDiv input[type="radio"] {
  width: 14px;
  height: 14px;
  margin: 3px 8px 0 0;
  vertical-align: top;
  box-sizing: border-box;
}

.zf-tempContDiv input[type="checkbox"] + label,
.zf-tempContDiv input[type="radio"] + label,
.zf-checkChoice {
  display: inline-block;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: top;
}

/* その他テキスト */
.zf-multiAttType input[type="text"] {
  display: inline-block;
  width: 360px;
  max-width: calc(100% - 80px);
  margin-left: 4px;
  vertical-align: middle;
}

/* エラー */
.zf-errorMessage {
  display: none;
  margin: 6px 0 0;
  color: #f00;
  font-size: 12px;
  font-weight: 700;
}

/* 送信ボタン */
.zf-fmFooter {
  padding: 34px 0 0;
  text-align: center;
}

.zf-submitColor {
  display: inline-block;
  min-width: 220px;
  padding: 14px 30px;
  border: none;
  border-radius: 0;
  background: #d41919;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.zf-submitColor:hover {
  opacity: 0.82;
}

/* clearfix */
.zf-clearBoth {
  clear: both;
}

/* =========================================================
   jQuery UI Datepicker icon / calendar
========================================================= */

.zf-date .zf-tempContDiv span {
  position: relative;
  display: inline-block;
  width: 260px;
  max-width: 100%;
}

.zf-date .ui-datepicker-trigger {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  cursor: pointer;
}

/* ボタンがbuttonTextで出る場合 */
.zf-date button.ui-datepicker-trigger {
  right: 4px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
}

/* =========================================================
   SP
========================================================= */

@media screen and (max-width: 767px) {
  .zf-templateWidth {
    margin: 20px auto 0;
    padding: 0 15px;
  }

  .zf-templateWrapper {
    padding: 16px 20px 28px 20px;
    border-width: 3px;
  }

  .zf-tempFrmWrapper {
    display: block;
    padding: 18px 0;
  }

  .zf-tempFrmWrapper .zf-labelName {
    width: 100%;
    padding-top: 0;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .zf-tempFrmWrapper .zf-tempContDiv {
    width: 100%;
  }

  .zf-date .zf-tempContDiv input[type="text"],
  .zf-date .zf-tempContDiv span,
  .zf-form-sBox {
    width: 100%;
    max-width: 100%;
  }

  .zf-multiAttType input[type="text"] {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 8px 0 0;
  }

  .zf-submitColor {
    width: 100%;
    min-width: 0;
  }

  /* datepickerの日付文字色を戻す */
  .ui-datepicker.ui-widget-content a,
  .ui-datepicker .ui-widget-content a,
  .ui-datepicker td a.ui-state-default {
    color: #454545 !important;
    -webkit-text-fill-color: #454545 !important;
  }

  /* 選択中の日付 */
  .ui-datepicker td a.ui-state-active {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* hover */
  .ui-datepicker td a.ui-state-hover {
    color: #454545 !important;
    -webkit-text-fill-color: #454545 !important;
  }
}

/* =========================================================
   Catalog form adjustment
========================================================= */

/* 住所 */
.zf-address .zf-addrCont {
  width: 100%;
}

.zf-address .address_row_1,
.zf-address .address_row_2 {
  width: 100%;
  margin: 0;
}

.zf-address .address_row_1 input,
.zf-address .address_row_2 input {
  width: 100%;
}

/* 電話番号 */
.zf-phonefld .zf-phwrapper,
.zf-phonefld .zf-phNumber {
  width: 100%;
}

.zf-phonefld label {
  display: none;
}

/* hidden項目まわりのエラーpが出ても邪魔しない保険 */
input[type="hidden"] + .zf-errorMessage {
  display: none !important;
}

/* 住所 */
.zf-address .zf-addrCont {
  width: 100%;
}

.zf-address .address_row_1,
.zf-address .address_row_2 {
  margin: 0 0 10px;
}

.zf-address .zf-addresCols {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.zf-address .zf-addresCols label {
  width: 52px;
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  flex-shrink: 0;
}

/* 郵便番号：短め */
.zf-address .address_row_1 input {
  width: 180px;
  flex: none;
}

/* 住所：横長 */
.zf-address .address_row_2 input {
  width: calc(100% - 64px);
  flex: 1;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .zf-address .zf-addresCols {
    gap: 8px;
  }

  .zf-address .zf-addresCols label {
    width: 42px;
  }

  .zf-address .address_row_1 input {
    width: 160px;
  }

  .zf-address .address_row_2 input {
    width: calc(100% - 50px);
  }
}

/* 住所内のラベルは表示する */
.zf-address .zf-addresCols label {
  display: block;
  width: 52px;
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  flex-shrink: 0;
}