@charset "UTF-8";
/*------------------------------------------------------------
  MENU
  ・レスポンシブ設定
  ・ベース設定
  ・フォーム要素ベース
  ・チェックボック・ラジオ
  ・レイアウト//フォームヘッダー・タイトル・フッター・概要
  ・レイアウト//各項目・項目グループ
  ・注釈・コメント
  ・同意文
  ・レイアウト：フォームボタン
  ・確認画面
  ・確認→完了　loading
  ・完了画面
  ・ガーリックシール
  ・ボタン
  ・項目ごとの調整
------------------------------------------------------------*/
/*------------------------------------------------------------
  レスポンシブ設定
------------------------------------------------------------*/
/*------------------------------------------------------------
  ベース設定
------------------------------------------------------------*/
body {
  -webkit-text-size-adjust: 100%;
  color: #333;
  font-family: 'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  font-size: 15px;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  word-wrap: break-word;
}

a {
  color: inherit;
}

/*------------------------------------------------------------
  フォーム要素ベース
------------------------------------------------------------*/
input[type="text"], textarea, select {
  border: 1px solid #ccc;
  border-radius: 0;
  font-family: 'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  font-size: 15px;
  margin: 0;
  outline: none;
  padding: .2em .5em;
}

input[type="text"]:focus, textarea:focus, select:focus {
  outline: none;
}

input[type="text"] {
  width: 40%;
}

textarea {
  resize: vertical;
  width: 100%;
}

@media screen and (max-width: 567px) {
  input[type="text"], textarea, select {
    font-size: 16px;
    padding: .35em .5em;
  }
  input[type="text"] {
    width: 100% !important;
  }
  textarea {
    width: 100% !important;
  }
  select {
    background-color: #fff;
    color: inherit;
    height: 40px;
    width: 100% !important;
  }
}

/*------------------------------------------------------------
  チェックボック・ラジオ
------------------------------------------------------------*/
.gf-element-checkbox {
  font-size: 14px;
}

.gf-element-checkbox li {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.gf-element-checkbox li input, .gf-element-checkbox li label {
  cursor: pointer;
}

.gf-element-checkbox li input {
  margin-bottom: 1px;
}

.gf-element-checkbox li label {
  margin-left: 5px;
}

.gf-element-radio {
  font-size: 14px;
}

.gf-element-radio li {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.gf-element-radio li input, .gf-element-radio li label {
  cursor: pointer;
}

.gf-element-radio li input {
  margin-bottom: 1px;
}

.gf-element-radio li label {
  margin-left: 5px;
}

@media screen and (max-width: 567px) {
  .gf-element-checkbox {
    font-size: 15px;
  }
  .gf-element-radio {
    font-size: 15px;
  }
}

/*------------------------------------------------------------
  チェックボックスリスト・ラジオリスト
------------------------------------------------------------*/
.gf-checklist--x {
  margin: -3px -7px;
}

.gf-checklist--x li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 5px 7px;
}

.gf-checklist--y li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.gf-checklist--y li + li {
  margin-top: 10px;
}

.gf-radiolist--x {
  margin: -3px -7px;
}

.gf-radiolist--x li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 5px 7px;
}

.gf-radiolist--y li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.gf-radiolist--y li + li {
  margin-top: 10px;
}

@media screen and (max-width: 567px) {
  .gf-checklist--x li {
    margin: 10px 7px;
  }
  .gf-checklist--y li + li {
    margin-top: 14px;
  }
  .gf-radiolist--x li {
    margin: 10px 7px;
  }
  .gf-radiolist--y li + li {
    margin-top: 14px;
  }
}

/*------------------------------------------------------------
  レイアウト//フォームヘッダー・タイトル・フッター・概要
------------------------------------------------------------*/
.gf-title {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 20px;
}

.gf-step-label {
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 5px;
}

.gf-required-message {
  font-size: 13px;
  margin-bottom: 7px;
  text-align: right;
}

.gf-required-message span {
  color: #f00;
  font-weight: bold;
}

/*------------------------------------------------------------
  レイアウト//各項目・項目グループ
------------------------------------------------------------*/
.gf-item {
  border-top: 1px solid #ccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.gf-item__title {
  background-color: #cfe4f2;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  line-height: 1.5;
  padding: 12px;
  width: 28%;
}

.gf-item__description {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  line-height: 1.4;
  padding: 12px;
  width: 72%;
}

.gf-item__line {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.gf-item.unit_end {
  border-bottom: 1px solid #ccc;
}

.gf-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -14px -8px;
}

.gf-group input[type="text"] {
  width: auto;
}

.gf-group__item {
  margin: 14px 8px;
}

.gf-group__item * {
  vertical-align: middle;
}

.gf-group__item label {
  display: inline-block;
  font-size: 14px;
  margin-right: 5px;
}

.gf-group__item label + .gf-element-radio,
.gf-group__item label + .gf-element-checkbox {
  margin-top: 8px;
}

.required-icon {
  color: #f00;
  display: inline-block;
  font-weight: bold;
  margin-left: 3px;
  line-height: 1;
  vertical-align: top;
}

@media screen and (max-width: 567px) {
  .gf-item {
    border: none;
    display: block;
  }
  .gf-item__title {
    background-color: transparent;
    border: none;
    font-size: 16px;
    margin-bottom: 10px;
    padding: 0 0 5px;
    width: auto;
    border-bottom: 1px dotted #ccc;
  }
  .gf-item__description {
    padding: 0;
    width: auto;
  }
  .gf-item__line {
    width: 100%;
  }
  .gf-item + .gf-item {
    margin-top: 25px;
  }
  .gf-group {
    display: block;
    margin: 0;
  }
  .gf-group__item {
    margin: 0;
  }
  .gf-group__item label {
    margin-bottom: 7px;
    margin-right: 0;
  }
  .gf-group__item label + .gf-element-radio,
  .gf-group__item label + .gf-element-checkbox {
    margin-top: 0;
  }
  .gf-group__item .gf-element-checkbox label,
  .gf-group__item .gf-element-radio label {
    margin-bottom: 0;
  }
  .gf-group__item + .gf-group__item {
    margin-top: 20px;
  }
}

/*------------------------------------------------------------
  注釈・コメント
------------------------------------------------------------*/
.gf-item-commnet {
  font-size: 13px;
  line-height: 1.4;
}

.gf-item-commnet.comment-upper {
  margin-bottom: 12px;
}

label + .gf-item-commnet.comment-upper {
  margin-top: 12px;
}

.gf-item-commnet.comment-lower {
  margin-top: 14px;
}

.gf-item-commnet.comment-right {
  display: inline-block;
  margin-left: 10px;
}

.gf-item-commnet.comment-group-upper {
  margin: 14px 8px 0 8px;
  width: 100%;
}

.gf-item-commnet.comment-group-lowder {
  margin: 0 8px 14px 8px;
  width: 100%;
}

@media screen and (max-width: 567px) {
  label + .gf-item-commnet.comment-upper {
    margin-top: 5px;
  }
  .gf-item-commnet.comment-right {
    margin-left: 0;
    margin-top: 14px;
    width: 100%;
  }
  .gf-item-commnet.comment-group-upper {
    margin: 0 0 12px 0;
  }
  .gf-item-commnet.comment-group-lowder {
    margin: 14px 0 0 0;
  }
}

/*------------------------------------------------------------
  同意文
------------------------------------------------------------*/
.gf-agreement {
  border: 1px solid #ccc;
  height: 120px;
  margin-top: 30px;
  overflow: auto;
  padding: 10px;
  width: 100%;
}

/*------------------------------------------------------------
  レイアウト：フォームボタン
------------------------------------------------------------*/
.gf-switcher {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 30px;
}

.gf-switcher .btn + .btn {
  margin-left: 30px;
}

@media screen and (max-width: 567px) {
  .gf-switcher {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background: #f7f7f7;
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
            box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
  }
  .gf-switcher .btn {
    margin: 13px 0;
  }
  .gf-switcher .btn + .btn {
    margin-left: 0;
  }
}

/*------------------------------------------------------------
  確認画面
------------------------------------------------------------*/
.gf-confirm-grouplabel {
  display: none;
  /*使いたいときは個別CSSで表示させる*/
  margin-bottom: 5px;
}

.gf-confirm-unitset {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.gf-confirm-unit {
  display: none;
  /* 右コメント 単位として入力値の後ろにつけたい場合は個別CSSで表示させる */
  margin-left: .3em;
}

@media screen and (max-width: 567px) {
  .gf-scene-confirm .gf-item__title {
    font-size: 18px;
  }
  .gf-scene-confirm .gf-item + .gf-item {
    margin-top: 30px;
  }
  .gf-scene-confirm .gf-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -5px;
  }
  .gf-scene-confirm .gf-group__item {
    margin: 0 5px;
  }
}

/*------------------------------------------------------------
  確認→完了　loading
------------------------------------------------------------*/
@-webkit-keyframes loading {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  50% {
    -webkit-transform: scale(1.2) rotate(90deg);
            transform: scale(1.2) rotate(90deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(180deg);
            transform: scale(1) rotate(180deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  50% {
    -webkit-transform: scale(1.2) rotate(90deg);
            transform: scale(1.2) rotate(90deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(180deg);
            transform: scale(1) rotate(180deg);
  }
}

.gf-scene-loading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 40px 0;
}

.gf-scene-loading svg.icon {
  -webkit-animation: 1.5s linear 0s infinite loading;
          animation: 1.5s linear 0s infinite loading;
  display: inline-block;
  height: 80px;
  width: auto;
  vertical-align: bottom;
}

.gf-scene-loading svg.icon path {
  fill: #777;
}

@media screen and (max-width: 567px) {
  .gf-scene-loading {
    padding: 30px 0;
  }
  .gf-scene-loading .icon img {
    height: 60px;
  }
}

/*------------------------------------------------------------
  完了画面
------------------------------------------------------------*/
.gf-scene-complete {
  line-height: 1.5;
}

.gf-scene-complete a {
  color: inherit;
  text-decoration: underline;
}

/*------------------------------------------------------------
  ガーリックシール
------------------------------------------------------------*/
.gf-seal {
  margin-top: 10px;
  text-align: right;
}

@media screen and (max-width: 567px) {
  .gf-seal {
    margin-top: 30px;
    text-align: center;
  }
}

/*------------------------------------------------------------
  ボタン
------------------------------------------------------------*/
.btn {
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-block;
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
}

.btn:hover {
  opacity: 0.8;
}

.btn-zip {
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
  background: -webkit-gradient(linear, left top, left bottom, from(#a3a3a3), to(#494949));
  background: linear-gradient(to bottom, #a3a3a3 0%, #494949 100%);
  border-radius: 5px;
  border: none;
  color: #fff;
  padding: 2px 10px;
  margin: 0;
}

input[type=text] + .btn-zip {
  margin-left: 7px;
}

.btn-agree {
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  padding: 12px 30px;
}

@media print, screen and (min-width: 568px) {
  .btn-agree {
    background: #333;
  }
}

@media screen and (max-width: 567px) {
  .btn-agree {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#078c30), to(#104a39));
    background-image: linear-gradient(#078c30 0%, #104a39 100%);
    text-shadow: 1px 1px 1px rgba(5, 29, 17, 0.66);
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
            box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
    border-bottom: solid 2px #122d0f;
  }
}

.btn-next {
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  padding: 12px 30px;
}

@media print, screen and (min-width: 568px) {
  .btn-next {
    background: #333;
  }
}

@media screen and (max-width: 567px) {
  .btn-next {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#078c30), to(#104a39));
    background-image: linear-gradient(#078c30 0%, #104a39 100%);
    text-shadow: 1px 1px 1px rgba(5, 29, 17, 0.66);
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
            box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
    border-bottom: solid 2px #122d0f;
  }
}

.btn-prev {
  border-radius: 5px;
  border: none;
  font-size: 18px;
  padding: 12px 30px;
}

@media print, screen and (min-width: 568px) {
  .btn-prev {
    color: #333;
    background: #ccc;
  }
}

@media screen and (max-width: 567px) {
  .btn-prev {
    color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#929292), to(#51524f));
    background-image: linear-gradient(#929292 0%, #51524f 100%);
    text-shadow: 1px 1px 1px rgba(31, 33, 32, 0.66);
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
            box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
  }
}

@media screen and (max-width: 567px) {
  .btn {
    min-width: 75%;
  }
  .btn-zip {
    font-size: 14px;
    min-width: inherit;
    width: 5em;
    padding: 9px;
  }
  .btn-agree {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .btn-next {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .btn-prev {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}

/*------------------------------------------------------------
  項目ごとの調整
------------------------------------------------------------*/
#garlic_zip {
  width: 7em !important;
}
/*# sourceMappingURL=garlic.dev.css.map */