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


body{
    font-family: “Helvetica Neue”, Arial, “Hiragino Kaku Gothic ProN”, “Hiragino Sans”, Meiryo, sans-serif;
}

/*タイトル*/
.form-top .form-top-left h3{
    width: 100%;
    margin-top: 0;
    color: #fff;
    position: relative;
    font-weight: 700;
    font-family: “Helvetica Neue”, Arial, “Hiragino Kaku Gothic ProN”, “Hiragino Sans”, Meiryo, sans-serif;
    letter-spacing: .04em;
}

.form-top{
   background-color: #f94141;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   height:80px;
}


/* 背景 */
.form-bottom{
   background-image: url("https://d27rnpuamwvieu.cloudfront.net/0WIG9AwxHmbasYsJzzy0ZZwXX/normal");
   padding: 35px 25px;
}

/* フォーム背景 */
.form-editor{
   background-color: #fff;
   border-radius: 10px;
   padding: 20px;
   animation-name:fadeUpAnime;
   animation-duration:1.2s;
   animation-fill-mode:forwards;
   opacity:0;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}


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


.description-image {
  animation: fadeIn 2s ease 0s 1 normal;
  }
  @keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.description-image {
  margin-top: 15px;
  box-shadow: 3px 3px 0 #c6dfec;
  border-radius: 6px;
}

/* 中見出し */
.description-md-title {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #ffc700;
  margin: 0px 0px 5px 0px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .03em;
  padding: 20px 10px;
  color: #333;
  width: 100%;
  font-family: “Helvetica Neue”, Arial, “Hiragino Kaku Gothic ProN”, “Hiragino Sans”, Meiryo, sans-serif;
  position: relative;
  font-weight: 700;
  letter-spacing: .03em;
  font-size: 18px;
  line-height:1.4em;
  animation: fadeIn 2s ease 0s 1 normal;
  }

.description-md-title:before {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  content: '';
  border: 2px solid #333;
}

  @keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


/* 小見出し */
h5.description-title {
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,.2);
box-shadow: 0px 3px 3px rgba(0,0,0,.2);
background-color: #eeeee;
margin: 0px 0px 10px 0px;
border-image: linear-gradient(to right,#023979,#346194) 1/4px 0;
border-style: solid;
color: #016FC8;
font-size: 16px;
line-height: 15px;
padding: 10px 10px;
width:100%;
font-family: “Helvetica Neue”, Arial, “Hiragino Kaku Gothic ProN”, “Hiragino Sans”, Meiryo, sans-serif;
}

/*テキスト（見出しの説明文）*/
p.text-break{
  color: #333;
  font-size:15px;/*フォントサイズ1.2倍*/
  line-height:1.7em;/*行間サイズ文字の2.4倍*/
  margin:30px auto 50px;/*上に30px下に50pxの余白*/
  padding:0 10px;/*左右に10pxの余白*/
  font-family: “Helvetica Neue”, Arial, “Hiragino Kaku Gothic ProN”, “Hiragino Sans”, Meiryo, sans-serif;
}

/* 各項目名 */
.control-label {
  padding: 0px 10px;
  width: 100%;
  font-size: 15px;
  color: #555555;
  border-bottom: 2px solid #f94141;
}

input[type="radio"],input[type="checkbox"]{
  position: relative;
  top: 3px;/*ラジオボタンずれをなくす*/
}

/*ラジオボタンがチェックされた時の外側の円の色指定*/
.radio input[type=radio]:checked:after{
border-color:#f94141;　
}
/*ラジオボタンがチェックされた時の中央の円の色指定*/
.radio input[type=radio]:before {
background-color:#f94141;　
}

/*チェックボックスがチェックされた時の中の色指定*/
.checkbox-inline input[type=checkbox]:checked:after, .checkbox input[type=checkbox]:checked:after, input[type=checkbox]:checked:after {
background-color:#f94141;　
}
/*チェックボックスがチェックされた時の外枠の色指定*/
.checkbox-inline input[type=checkbox]:checked:after, .checkbox input[type=checkbox]:checked:after, input[type=checkbox]:checked:after {
border-color:#f94141 !important;　
}


/*テキストボックスがアクティブな状態の色指定*/
.form-control:focus{border-color:#f94141; 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{border-color:#f94141; 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:focus{border-color:#f94141; outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,165,0,.6)}


/*テキストボックス・エリアの回答入力欄の下に表示される文章の位置調整*/
.help-block{
  text-align: right;
}

.control-label:before{
   content: url("https://d27rnpuamwvieu.cloudfront.net/0Je9XsbpdgqsUhtFgzEPQvAXX/normal");
   width: 50% !important;
   height: 50％ !important;
   margin-right: 5px;
}

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

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

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

.col-sm-12{
  padding: 0px;
}

/* ボタン */
@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 {
    font-size:21px;
    padding: 15px;
    position: relative;
    display: block;
    width: 90%;
    height: auto;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    background-color: #f94141;
    border:#f94141 thin solid;
    overflow: hidden;
    margin:0 auto 40px !important;
}


.btn:hover {
   background-color: #346194;
   border:#346194 thin solid;
}


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