@charset "utf-8";
* {
    font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',"游ゴシック体","YuGothic","游ゴシック","Yu Gothic",'Meiryo','メイリオ', sans-serif;
}
body{
    margin: 0;
    padding: 0;
    background-color: #F4F4F4;
    font-size: 17px;
}
.abs {
    position: absolute;
}
.rel {
    position: relative;
}
.mt10 {
    margin-top: 10px;
}
.fcr {
    color: #e60000;
}
.fcp {
    color: #ff0057;
}
.fcb {
    color: #1080dc;
}
.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 60%,#ffff00 0%) repeat scroll 0 0;
}
#wrapper{
    margin: auto;
    background-color: #fff;
    padding: 20px;
}
img,video {
    width: 100%;
    vertical-align: middle;
}
.anno {
    font-size: 10px;
    color: gray;
    text-align: right;
    margin-top: -10px;
}
.sp {
    display: none;
}

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

h2 {
    padding: 15px 5px 15px 20px;
    border-left: 6px solid #f68384;
    background-color: #fff1f1;
    margin-top: 40px;
    font-size: 22px;
}
h2 {
    padding: 10px 5px 10px 10px;
    font-size: 19px;
}
.balloon01 {
    /*周りの余白。上下｜左右*/
    margin: 1em 0;
    overflow: hidden;
    display: flex;
  }

   .chatting01 {
    /*吹き出しの幅を変更する場合、下記autoを削除して20%から100%の値を指定してください*/
    width: auto;
  }

   .faceicon01 {
    display: inline-block;
    width: 55px;
    min-width: 55px;
    height: auto;
    position: relative;
  }

   .faceicon01 img {
    /*画像周りの線の指定。左から、線の種類、線の太さ、線の色*/
    box-sizing: border-box;
    width: 55px;
    max-width: 55px;
    height: 55px !important;
    object-fit: cover;
    border-radius: 50%;
  }

   .name01 {
    margin-top: -10px;
    /*アイコン名の文字サイズ*/
    font-size: 10px;
    /*アイコン名の文字の色*/
    color: #808080;
    text-align: center;
  }

   .says01 {
    display: block;
    position: relative;
    margin: 0 0 0 20px;
    padding: 12px;
    border-radius: 10pt;
    /*吹き出しの部分の背景色指定。※三角部分の色を除く*/
    background-color: #d7ebfe;
  }

   .says01:before {
    content: "";
    position: absolute;
    top: 12px;
    left: -26px;
    border: 11pt solid transparent;
    /*三角部分の色変更は下記より変更ください*/
    border-right: 11pt solid #d7ebfe;
  }

   .says01 p {
    margin: 0;
    padding: 0;
    letter-spacing: -0.01em;
  }

   .balloon02 {
    /*周りの余白。上下｜左右*/
    margin: 1em 0;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
  }

   .chatting02 {
    /*吹き出しの幅を変更する場合、下記autoを削除して20%から100%の値を指定してください*/
    width: auto;
  }

   .faceicon02 {
    display: inline-block;
    width: 55px;
    min-width: 55px;
    height: auto;
    position: relative;
    overflow: hidden;
  }

   .faceicon02 img {
    /*画像周りの線。線の種類｜線の太さ｜線の色*/
    width: 55px;
    max-width: 55px;
    height: 55px !important;
    object-fit: cover;
    box-sizing: border-box;
    border-radius: 50%;
  }

   .name02 {
    margin-top: -10px;
    /*アイコン名の文字サイズ*/
    font-size: 10px;
    /*アイコン名の文字の色*/
    color: #808080;
    text-align: center;
  }

   .says02 {
    display: block;
    position: relative;
    margin: 0;
    padding: 12px;
    border-radius: 10pt;
    /*吹き出しの背景色指定。※三角部分の色は下の.says:beforeから変更*/
    background-color: #ffc0cb;
    margin-right: 20px;
  }

   .says02:before {
    content: "";
    position: absolute;
    top: 15px;
    right: -11px;
    /*三角部分の色変更は下記カラーコードを変更ください*/
    border-left: 11px solid #ffc0cb;
    border-bottom: 11px solid transparent;
    border-top: 11px solid transparent;
  }

   .says02 p {
    margin: 0;
    padding: 0;
    letter-spacing: -0.01em;
  }

   .taC {
    text-align: center;
    font-size: 12px;
  }

  .comment__area {
    width: calc(100% - 20px);
    height: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 3px 3px 2px #F4D2DE;
    padding: 10px 10px 15px;
    margin-top: 30px;
    position: relative;
  }

   .comment__head {
    position: absolute;
    top: 0;
    left: 0;
    background: #ff80bf;
    border-radius: 5px;
    padding: 3px 5px;
    box-shadow: 2px 2px 2px #888;
  }

   .comment__head .head {
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 1px #888;
  }

   .comment__img {
    width: 100%;
    height: auto;
  }

   .comment__img img {
    width: 100%;
    height: auto;
  }

   .comment__detail {
    margin-top: 10px;
  }

   .comment__detail .name {
    font-size: 16px;
  }

   .comment__detail .text {
    font-size: 14px;
  }

   .comment__detail .name+.text {
    margin-top: 1em;
  }

   .comment__detail .text+.text {
    margin-top: 1em;
  }

   .comment__detail .text .bold {
    font-weight: bold;
  }

   .comment__detail .text .underline {
    position: relative;
  }

   .comment__detail .text .underline:before {
    content: '';
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 70%, #ffff00 71%, #ffff00 100%);
  }

   .comment__detail .attention {
    font-size: 10px;
    color: #666;
    margin-top: 1.4em;
  }

   .comment__detail .attention+.attention {
    margin-top: 1em;
  }

   .comment__img video,
   .comment__img iframe {
    width: 100%;
    aspect-ratio: 100%;
    display: block;
    object-fit: cover;
    margin: 0;
  }

   .comment__caption {
    font-size: 12px;
    text-align: right;
    margin-top: 10px;
  }

  .anc_all {
    background: #feeaf5;
    padding: 6% 2% 4%;
  }

   .box-ttl {
    width: 70px;
    margin: 3% auto 0;

  }

   .anc-wrapper {
    padding: 0 15px 15px;
    /* 枠の色 */
    margin: 0;
    vertical-align: bottom;
    color: #cb4067;
  }

   .container {
    /* コンテンツ部分の背景色 */
    background-color: #ffffff;
    padding: 2% 0;
  }

   .box-title {
    /* Q1部分の背景色 */
    background-color: #deebf3;
    text-align: center;
  }

   .tit {
    position: relative;
    bottom: -25px;
    z-index: 1;
    width: 80px;
    height: 80px;
    font-weight: bold;
    /* Q1部分の文字色 */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

   .box-content {
    padding: 0 2%;
    width: 96%;
    margin: 0 auto;

  }

   .anc_all p {
    margin: 20px 0 0;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
  }

   .main {
    padding: 0 2% 10px;
    margin: 0 auto;
    width: 94%;
  }

   .questions {
    font-size: 8px;
    margin: 15px auto 0;
  }

   ul,
   li,
   label,
   span {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    max-height: 99999px;
    text-align: center;
  }

   .btn_list {
    overflow: hidden;
    padding: 4.68% 5% 5% 5%;
    display: flex;
  }

   .btn_list li:first-child {
    padding-right: 2%;
  }

   .btn_list li {
    width: 50%;
  }

   .radio-input {
    display: none;
  }

   input[type="radio"]:checked+.y01,
   input[type="radio"]:checked+.n01,
   .input_img:hover {
    margin-top: 3px;
    /* 選択時のボタン文字色 */
    color: #010346;
    /* 選択時のボタン背景色 */
    background: #b2b7bd;
    /* 選択時のボタン影色 */
    border-bottom: 2px solid #8fa2b0;
  }

   .input_img {
    display: block;
    width: 100%;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 10%;
    border-radius: 8px;
    font-size: 8vw;
    line-height: 1;
    /* 非選択時のボタン文字色 */
    color: #fff;
    font-weight: bold;
    /* 非選択時のボタン背景色 */
    background: linear-gradient(#d8b45c, #a9751b);
    /* 非選択時のボタン影色 */
    border-bottom: 5px solid #92610b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    transition: all .3s;
    box-sizing: border-box;
  }

  @media (min-width: 620px) {
     .input_img {
      font-size: 42px;
    }
  }

   .btn_list li:last-child {
    padding-left: 2%;
  }

   .sp {
    display: none;
  }

  @media (max-width: 750px) {
     .sp {
      display: block;
    }
  }

  /*全体的な指定*/
  .blackwood_box {
    position: relative;
    /*色*/
    color: linear-gradient(#d8b45c, #a9751b);
    /*外側の余白。上下｜左右*/
    margin: 30px 0;
  }
   .blackwood_box .selecter {
    display: none;
  }
  /*アンケートボックス*/
  .blackwood_box .selecter+.choice-check {
    /* 非選択時のボタン文字色 */
    color: #fff;
    font-weight: bold;
    /* 非選択時のボタン背景色 */
    background: linear-gradient(#ec8fa9, #ec8fa9);
    display: block;

    /* 非選択時のボタン影色 */
    border-bottom: 5px solid #e1547b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    transition: all .3s;
    box-sizing: border-box;
    /*アンケート枠の内側余白。上下｜左右*/
    padding: 10px 15px;
    /*アンケート内の文字の太さ*/
    font-weight: bold;
    /*アンケートの角丸*/
    border-radius: 5px;
    /*アンケートボックス外側の下余白*/
    margin-bottom: 18px;
  }

  /*チェックをした時*/
  .blackwood_box .selecter:checked+.choice-check {
    margin-top: 3px;
    /* 選択時のボタン文字色 */
    color: #000;
    /* 選択時のボタン背景色 */
    background: #b2b7bd;
    /* 選択時のボタン影色 */
    border-bottom: 2px solid #8fa2b0;
    /*アンケートボックスの影。水平の距離｜垂直の距離｜ぼかし具合｜色の指定*/
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    transition: 200ms;
  }

  /* 画面サイズPCの時のみhover時に反応する様にする。
  ※SP時に以下の設定があると挙動がおかしくなります。 */
  @media (min-width: 601px) {
     .input_img {
      font-size: 42px;
    }
  }

   .btn_list li:last-child {
    padding-left: 2%;
  }

   .sp {
    display: none;
  }


/*widget全体のアニメーションの設定*/
   a.a-btn {
    display: inline-block;
    /*飾り*/
    text-decoration: none;
    /*ボタンの最大幅*/
    max-width: 98% !important;
    text-align: center;
    /*アニメーションの設定｜アニメーション名｜1回のサイクルに要する時間｜進め方｜実行回数｜*/
    animation: animate69 1s ease-in infinite;
    box-sizing: border-box;
  }
  /*アニメーションの詳細設定*/
  @keyframes animate69 {
    /*スタート時*/
    0% {
      /*傾斜変形角度*/
      transform: skewX(9deg);
    }
    10% {
      transform: skewX(-8deg);
    }
    20% {
      transform: skewX(7deg);
    }
    30% {
      transform: skewX(-6deg);
    }
    40% {
      transform: skewX(5deg);
    }
    50% {
      transform: skewX(-4deg);
    }
    60% {
      transform: skewX(3deg);
    }
    70% {
      transform: skewX(-2deg);
    }
    80% {
      transform: skewX(1deg);
    }
    90% {
      transform: skewX(0deg);
    }
    100% {
      transform: skewX(0deg);
    }
  }

  footer {
    font-size: 13px;
    padding: 5%;
    background: #ECECEC;
    text-align: center;
    margin-top: 10px;
  }