@charset "utf-8";
* {
    font-family: Hiragino Sans, Arial,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',"游ゴシック体","YuGothic","游ゴシック","Yu Gothic",'Meiryo','メイリオ', sans-serif;
}
body{
    margin: 0;
    padding: 0;
}
.abs {
    position: absolute;
}
.rel {
    position: relative;
}

.mt10 {
    margin-top: 10px;
}

.fcr {
    color: #ff0000;
}
.fcdr {
    color: #e60000;
}
.fcp {
    color: #ff00ff;
}
.fcb {
    color: #0000ff;
}
.fcsb {
    color: #0497FF;
}

.fsm {
    font-size: 19px;
}
.fsl {
    font-size: 21px;
}
.fsll {
    font-size: 23px;
}

.tal {
    text-align: left;
}
.tar {
    text-align: right;
}
.tac {
    text-align: center;
}
.bold {
    font-weight: bold;
}

.mark {
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 0%,#ffff00 0%) repeat scroll 0 0;
}

#wrapper{
    margin: auto;
    padding: 14px;
}
img,video {
    width: 100%;
    vertical-align: middle;
}
p {
    text-align: center;
    font-size: 21px;
    font-weight: bold;
}
.anno {
    font-size: 10px;
    color: gray;
    text-align: right;
    margin-top: -10px;
}
.sp {
    display: none;
}

@media only screen and (min-width: 767px){
    body {
        background-color: #F4F4F4;
    }
    #wrapper{
        max-width: 620px;
        background-color: #fff;
        margin: auto;
    }
    .sp {
        display: block;
    }
}

.cp_arrows {
    position: relative;
    /*widget自体の高さ*/
    height: 50px;
    /*widgetの上余白*/
    margin-top: 1em;
    /*widgetの下余白*/
    margin-bottom: 1em;
  }



  /*一個目の矢印*/
  .cp_arrows .cp_arrowfirst {
    /*アニメーション設定。
     左からアニメーション名、動きの速さ（2s=2秒）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
    animation: arrow-move08 2s ease-in-out infinite;
  }



  /*二個目の矢印*/
  .cp_arrows .cp_arrowsecond {
    /*アニメーション設定。
     左からアニメーション名、動きの速さ（2s=2秒）、開始時間（1s=1秒後）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
    animation: arrow-move08 2s 1s ease-in-out infinite;
  }



  /*共通設定*/
  .cp_arrows .cp_arrow {
    position: absolute;
    /*矢印の到着位置　（縦位置）*/
    top: 100%;
    /*矢印の到着位置　（横位置）*/
    left: 45%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    /*透明度（0=透明、1=不透明）*/
    opacity: 0;
  }

   .content :first-child {
    margin-top: 0;
  }

  @keyframes arrow-move08 {

    /*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
    0% {
      top: 40%;
      opacity: 0;
    }

    /*2sの70％（1.7秒）時に不透明になる*/
    70% {
      opacity: 1;
    }

    /*2s（2秒）時に透明になる*/
    100% {
      opacity: 0;
    }
  }

   .cp_arrows .cp_arrow:before {
    /*矢印左の棒の設定。1番目の値は棒の角度、2番目の値は棒のX方向の位置。*/
    transform: rotate(30deg) translateX(-39%);
    /*矢印左の棒の起点。（top left=左上）*/
    transform-origin: top left;
  }

   .cp_arrows .cp_arrow:after {
    /*矢印右の棒の設定。1番目の値は棒の角度、2番目の値は棒のX方向の位置。*/
    transform: rotate(-30deg) translateX(39%);
    /*矢印右の棒の起点。（top right=右上）*/
    transform-origin: top right;
  }

   .cp_arrows .cp_arrow:before,
   .cp_arrows .cp_arrow:after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    /*矢印の棒の横の長さ*/
    width: 40px;
    /*矢印の棒の縦の長さ*/
    height: 3px;
    content: '';
    /*矢印の色*/
    background: #E91E63;
  }

   .cp_arrows *,
   .cp_arrows *:before,
   .cp_arrows *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

   .cp_arrows *,
   .cp_arrows *:before,
   .cp_arrows *:after {
    box-sizing: border-box;
  }

   content div:after,
   .content p:after {
    clear: both;
  }

   .content div :after,
   .content p:after {
    display: block;
    content: "";
    clear: both;
  }

  /* アンケート */
  .container {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 1rem;
  }

   .container .item {
    margin-bottom: 1rem;
  }



  /*Checkboxes styles*/
  input[type="checkbox"] {
    display: none;
  }

   .labelimage {
    display: block;
    margin-top: 5px;
  }

   input[type="checkbox"]+label {
    white-space: normal;
    border-radius: 0.25rem;
    background-color: #fff8e1;
    padding: 1rem 1rem 1rem 4rem;
    font-family: 'Open Sans', Arial, sans-serif;
    border: 0 solid transparent;
    text-decoration: none;
    transition: all 0.1s linear;
    position: relative;
    display: inline-block;
    width: auto;
    text-align: left;
    margin: 0.2em;
    font-size: 20px;
    color: #353535;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

   input[type="checkbox"]+label:before {
    content: '';
    display: block;
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #353535;
    border-radius: 4px;
    background: #fff;
  }

   input[type="checkbox"]:checked+label:after {
    content: '';
    display: block;
    position: absolute;
    top: 0.85rem;
    left: 1.1rem;
    width: 1.5rem;
    height: 1.5rem;
    background: url(https://file.mysquadbeyond.com/uploads/article_photo/photo/2719214/dae475f9-6ee3-4f11-8fcf-6f72740eb0f8.png) no-repeat center;
    background-size: contain;
  }

   input[type="checkbox"]:checked+label {
    transform: translate(0, 0.25rem);
    box-shadow: 0 0 0 0 #949494;
    background-color: #eb8046;
  }

footer{
    background-color: #999;
    text-align: center;
    padding: 30px 0;
}
footer a{
    color: #fff;
}


  /*Radiobutton styles*/
  input[type="radio"] {
    display: none;
  }

   input[type=radio].btnhide {
    display: none;
  }

   .labelimage {
    display: block;
    margin-top: 10px;
  }

   input[type="radio"]+label {
    white-space: normal;
    border-radius: 0.25rem;
    background-color: #fff8e1;
    padding: 1rem 1rem 1rem 4rem;
    font-family: 'Open Sans', Arial, sans-serif;
    border: 0 solid transparent;
    text-decoration: none;
    transition: all 0.1s linear;
    position: relative;
    display: inline-block;
    width: auto;
    text-align: left;
    margin: 0.5em;
    font-size: 20px;
    color: #353535;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

   input[type="radio"]+label:before {
    content: '';
    display: block;
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #353535;
    border-radius: 4px;
    background: #fff;
  }

   input[type="radio"]:checked+label:after {
    content: '';
    display: block;
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    width: 1.5rem;
    height: 1.5rem;
    background: url(https://file.mysquadbeyond.com/uploads/article_photo/photo/2719214/dae475f9-6ee3-4f11-8fcf-6f72740eb0f8.png) no-repeat center;
    background-size: contain;
  }

   input[type="radio"]:checked+label {
    transform: translate(0, 0.25rem);
    box-shadow: 0 0 0 0 #949494;
    background-color: #eb8046;
  }

   .radio {
    display: flex;
    margin: 20px auto;
  }

   .yes {
    margin-right: 20px;
    margin-left: 30px;
    flex-basis: 50%;
  }

   .no {
    flex-basis: 50%;
  }

   .q3 {
    display: flex;
    flex-direction: column;
  }

   h2 {
    /* 見出しの下線色 */
    border-bottom: 1px solid #51bbb5;
    margin: 0;
  }

   figure {
    margin: 0 auto 10px;
    padding: 0;
  }

   img {
    width: 100%;
    max-width: 100%;
    margin: 10px auto;
  }

   .list-ans {
    margin: 0;
    padding: 0;
    list-style: none;
  }

   .list-ans .radio-input {
    display: none;
  }

   .btn {
    /* 非選択時のボタン文字色 */
    color: #2b2b2b;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    word-break: break-all;
    /* 非選択時のボタン背景色 */
    background-color: #ededed;
    /* 非選択時のボタン影色 */
    box-shadow: 0 0.25rem 0 0 #949494;
    border: 0 solid transparent;
    border-radius: 0.25rem;
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem;
    position: relative;
    display: inline-block;
    transition: all 0.1s linear;
    box-sizing: border-box;
  }

   .btn:hover {
    /* マウスオン時のボタン背景色 */
    background-color: #f2f2f2;
    cursor: pointer;
  }

   .btn:active,
   .list-ans .radio-input:checked+.btn {
    transform: translate(0, 0.25rem);
    box-shadow: 0 0 0 0 #949494;
    /* 選択時のボタン背景色 */
    background-color: #bababa;
  }

   ::-moz-focus-inner {
    border-color: transparent;
  }

   .btn:focus {
    outline: none !important;
  }

  /* CTA */
  .cta-area {
    margin: 1em 0 1em;
    justify-content: center;
    display: flex;
    text-align: center;
  }

   .cta {
    width: auto;

    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    border: none;
    overflow: hidden;
    box-sizing: border-box;
    animation: bound2Btn 2s ease infinite;
  }

   a.cta:hover {
    opacity: 0.7;
    text-decoration: none;
  }

   a.cta:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-brite 3s ease-in-out infinite;
  }

   a.cta:active {
    box-shadow: 2px 2px 4px 0 rgba(255, 255, 255, .3),
      -2px -2px 4px 0 rgba(116, 125, 136, .2),
      inset -2px -2px 4px 0 rgba(255, 255, 255, .2),
      inset 2px 2px 4px 0 rgba(0, 0, 0, .2);
  }

   a.cta img {
    vertical-align: middle;
  }


  @keyframes bound2Btn {
    0% {
      transform: translateY(0);
    }

    15% {
      transform: translateY(-20px);
    }

    30% {
      transform: translateY(0);
    }

    45% {
      transform: translateY(-20px);
    }

    60% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(0);
    }
  }

  @-webkit-keyframes shiny-brite {
    0% {
      -webkit-transform: scale(0) rotate(45deg);
      opacity: 0;
    }

    80% {
      -webkit-transform: scale(0) rotate(45deg);
      opacity: 0.5;
    }

    81% {
      -webkit-transform: scale(4) rotate(45deg);
      opacity: 1;
    }

    100% {
      -webkit-transform: scale(50) rotate(45deg);
      opacity: 0;
    }
  }