@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: Black;
    color: #fff;
}

.form-top {
    background-image: url(https://d27rnpuamwvieu.cloudfront.net/0kPYppVocrgvpNmilbax9fQXX/normal);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 260px;
}

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

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

.form-editor {
    background-color: #000;
    border-radius: 10px;
    padding: 10px 20px;
    animation-name: fadeUpAnime;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    opacity: 0;
    color: #fff;
}

@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: initial;
    padding: initial;
    margin: initial;
    box-shadow: initial;
    text-align: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

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: 3rem;
    font-weight: 600;
}

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

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

h5:before {
    content: "●";
    font-size: 1.0em;
    margin-right: 10px;
}

.control-label {
    color: #fff;
    border-bottom: #fff solid 1px;
    width: 100%;
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 400;
}

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

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

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

.description-image {
    border-radius: 6px;
    width: 100%;
    height: 150px;
    object-fit: cover;
}

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

.label-danger {
    background-color: #834848;
    font-size: 0.7em;
    font-weight: normal;
}

.col-sm-8{
    font-size: 0.8em;
}

.help-block {
    text-align: right;
    color: #fff;
}

.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;
    }
}

.btn {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #000;
    border: white thin solid;
    overflow: hidden;
    margin: 0 auto 40px !important;
}

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

.btn::after {
    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%);
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.radio label, .checkbox label {
    font-size: 1.2em;
}

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

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

.checkbox-inline input[type=checkbox]:checked:after, .checkbox input[type=checkbox]:checked:after, input[type=checkbox]:checked:after {
    background-color: #C8968B;
    border-color: #C8968B !important;
}

.checkbox-inline input[type=checkbox]:checked:after, .checkbox input[type=checkbox]:checked:after, input[type=checkbox]::selection {
    border-color: #C8968B !important;
}

.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: #7D6F52;
    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: #7D6F52;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(100,100,50,.6);
}