@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');

body {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    background-color:#ffffff ;
    color: #333333;
font-size: 14px !import;
}

.form-top {
    display: none;
}

.form-top-left {
    display: none;
}

.form-top-right {
    display: none;
}

.form-editor {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px 10px;
    animation-name: fadeUpAnime;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    opacity: 0;
    color: #666;
    font-size: 16px !important;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.description-md-title {
    display: flex;
    justify-content: center;
    background-color: initial !important;
    color: #c7b6ac;
    padding: initial;
    margin: initial;
    box-shadow: initial;
    text-align: center;
    font-size: 18px !important;
    font-weight: bold !important;
}

h4 {
    font-family: 'Montserrat', sans-serif;
    position: relative;
    padding: 1.5rem;
    text-align: center;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    color: #fff;
   font-size: 16px !important;
    font-weight: 600;
}

h4:before {
    position: absolute;
    bottom: -10px;
    left: calc(50% - 30px);
    width: 60px;
    height: 2px;
    content: '';
    border-radius: 3px;
    background: #c7b6ac;
}

h5 {
    border-bottom: #fff solid 1px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px !important;
    font-weight: 600;
}

h5:before {
    content: "●";
    font-size: 16px !important;
    margin-right: 10px;
}

.control-label {
    color: #333333;
    border-bottom: #dddddd solid 1px;
    width: 100%;
    margin-bottom: 20px;
    font-size: 14px !important;
    font-weight: 400;
    font-weight: bold !important;
}

.control-label:before {
    content: "●";
   font-size: 10px !important;
    margin-right: 10px;
}

.form-group {
    margin-bottom: 30px;
}

.text-break {
    line-height: 1.8em;
    font-size: 14px;
    font-weight: 400;
}



.description-image img {
    width: 100%;
}

.label-danger {
    background-color: #c7b6ac;
    font-size: 1p3x !important;
    font-weight: bold;
}

.help-block {
    text-align: right;
    color: #666;
    font-size: 16px !important;
}

.col-xs-4 {
    display: none;
}

.col-sm-6, .col-sm-8 {
    width: 100%;
}

@keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }

    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}

/* ▼▼ ボタン05 ここから ▼▼ */
:root {
  --btn-bg-color: #9a8c84; /* 背景色はここのカラーコードを変更 */
  --btn-font-color: #ffffff; /* 文字色はここのカラーコードを変更 */
--btn-bg-color: #9a8c84; /* 背景は白 */
}

.btn-primary, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus, .btn-primary.active, .btn-primary:active, .btn-primary:hover, .open>.btn-primary.dropdown-toggle {
  color: var(--btn-font-color);
  background: var(--btn-bg-color);
  border: none;
  width: 100%;
  height: 50px; /* ボタンの高さはここを変更 */
  border-radius: 30px;
  padding: 0 15px 0 15px;
  font-size: 18px; /* メインの文字の大きさはここを変更 */
font-weight: bold;
  letter-spacing: 0.1em;
  outline: none;
}

.btn-primary::before {

  font-size: 14px; /* 吹き出しの文字の大きさはここで変更 */
  padding: 0 20px;
  margin: 0 auto;
  color: var(--btn-sub-color);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -25px;
  background: url(https://d27rnpuamwvieu.cloudfront.net/0Y54bp6tXKruPBucVoW5QLwXX/1040) no-repeat left center, url(https://d27rnpuamwvieu.cloudfront.net/0BzUlVX8oXbpqnQ05hXP2xwXX/1040) no-repeat right center;
  background-size: 14px, 14px;
 pointer-events: none;
}
/* ▲▲ ボタン05 ここまで ▲▲ */

.btn:hover {
    background-color: #fffff !important;
    border: #ccc thin solid !important;
}

.btn::after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);

}

.radio label,
.checkbox label {
    font-size: 16px !important;
}

.radio input[type=radio]:checked:after {
    border-color: #fff;
border: 1px solid #666;
}

.radio input[type=radio]:before {
    background-color: #c7b6ac;
}



.has-success .checkbox,
.has-success .checkbox-inline,
.has-success.checkbox-inline label,
.has-success.checkbox label,
.has-success .control-label,
.has-success .help-block,
.has-success .radio,
.has-success .radio-inline,
.has-success.radio-inline label,
.has-success.radio label {
    color: #fff !important;
}

.form-control:focus {
    border-color: #dddddd;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(100,100,50,.6);
}

.has-success .form-control,
.has-success .form-control:focus {
    border-color: #dddddd;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(100,100,50,.6);
}

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
    color: #c7b6ac;
    font-size: 12px !important;
}

.text-break {
    color: #333;
}

.radio label, .checkbox label {
    font-size: 14px !important;
}