@charset "UTF-8";

700&display=swap");
/*---------------------------
	ページ固有
---------------------------*/
/*---------------------------
	共通変数とか
---------------------------*/
@media only screen and (max-width: 950px) {
  [data-media='pc'] {
    display: none; } }

@media only screen and (min-width: 951px) {
  [data-media='sp'] {
    display: none; } }

@media only screen and (max-width: 950px) {
  [data-media='pc'] {
    display: none; } }

@media only screen and (min-width: 951px) {
  [data-media='sp'] {
    display: none; } }

/*---------------------------
	共通レイアウト
---------------------------*/
/* ------------------
	reset
-------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  position: relative;
  color: #242424;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; }

li {
  list-style: none; }

img {
  max-width: 100%; }

/*---------------------------
	レイアウト
---------------------------*/
body {
  background: url(/tohyo/dancho1/img/pt.png);
  font-family: 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif, -apple-system, 'BlinkMacSystemFont', 'Helvetica Neue', Helvetica, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN'; }

.contents {
  width: 90%;
  max-width: 1010px;
  margin: 0 auto;
  margin: 60px auto 100px; }
  @media only screen and (max-width: 950px) {
    .contents {
      margin: 60px auto; } }

/*---------------------------
	結果発表
---------------------------*/
.result {
  max-width: 818px;
  margin: 0 auto; }
  @media only screen and (max-width: 950px) {
    .result {
      max-width: 400px; } }

/*---------------------------
	KV
---------------------------*/
.kv {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none; }
  @media only screen and (min-width: 951px) {
    .kv {
      width: 90%;
      max-width: 1010px;
      margin: 0 auto;
      width: 100%; } }

/*---------------------------
	Contents
---------------------------*/
.contents {
  box-shadow: 0 7px 0px 0px #ffa421;
  border-radius: 7px;
  position: relative;
  z-index: 0;
  background-color: #ffffff;
  /*---------------------------
	クエスチョンエリアのキャラクター
	---------------------------*/ }
  .contents::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 25px 10px rgba(255, 75, 70, 0.1);
    z-index: -1; }
  .contents::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 113px;
    height: 93px;
    background-image: url(/tohyo/group1/img/icon.png);
    background-size: 113px 93px;
    background-repeat: no-repeat; }
    @media only screen and (max-width: 950px) {
      .contents::after {
        top: -10px;
        width: 57px;
        height: 47px;
        background-size: 57px 47px; } }
  .contents-title {
    position: absolute;
    top: -30px;
    left: 0; }
    @media only screen and (max-width: 950px) {
      .contents-title {
        width: 90%;
        max-width: 340px; } }
  .contents-heading {
    font-size: 23px;
    text-align: center;
    color: #595959;
    padding-top: 60px;
    letter-spacing: 0.05em; }
    @media only screen and (max-width: 950px) {
      .contents-heading {
        width: 90%;
        margin: 0 auto 20px;
        font-size: 15px;
        text-align: center;
        letter-spacing: 0.05em; }
        .contents-heading:first-of-type {
          padding-top: 80px; }
        .contents-heading:not(:first-of-type) {
          padding-top: 30px; } }
    .contents-heading:nth-of-type(2) {
      padding: 20px 0 60px; }
      @media only screen and (max-width: 950px) {
        .contents-heading:nth-of-type(2) {
          padding: 20px 0; } }
  .contents-subheading {
    font-size: 23px;
    text-align: center;
    color: #5064ff;
    margin: 0 auto 50px; }
    @media only screen and (max-width: 950px) {
      .contents-subheading {
        font-size: 20px;
        margin: 0 auto 30px; } }
  .contents-flowchart {
    position: relative;
    text-align: center;
    margin-bottom: 60px; }
    @media only screen and (max-width: 950px) {
      .contents-flowchart {
        width: 90%;
        margin: 0 auto 120px; } }
    .contents-flowchart::after {
      content: '';
      position: absolute;
      top: -20px;
      right: -26px;
      width: 98px;
      height: 174px;
      background-image: url(/tohyo/group1/img/box.png);
      background-size: 98px 174px;
      background-repeat: no-repeat; }
      @media only screen and (max-width: 950px) {
        .contents-flowchart::after {
          top: auto;
          bottom: -97px;
          left: 50%;
          width: 49px;
          height: 87px;
          background-size: 49px 87px;
          transform: translateX(-50%); } }
  .contents-candidate {
    max-width: 840px;
    margin: 0 auto; }
    @media only screen and (max-width: 950px) {
      .contents-candidate {
        width: 90%; } }
    .contents-candidate-container {
      display: flex;
      flex-wrap: wrap; }
      @media only screen and (max-width: 950px) {
        .contents-candidate-container {
          justify-content: space-between; } }
    .contents-candidate-item {
      max-width: 250px; }
      @media only screen and (max-width: 950px) {
        .contents-candidate-item {
          max-width: 48%; }
          .contents-candidate-item:nth-of-type(n+3) {
            margin-top: 30px; } }
      @media only screen and (min-width: 951px) {
        .contents-candidate-item:not(:nth-of-type(3n+1)) {
          margin-left: 45px; } }
      @media only screen and (min-width: 951px) {
        .contents-candidate-item:nth-of-type(n+4) {
          margin-top: 50px; } }
      .contents-candidate-item-tmb {
        max-width: 250px; }
        @media only screen and (max-width: 950px) {
          .contents-candidate-item-tmb {
            max-width: 100%; } }
      .contents-candidate-item-caption {
        color: #5064ff; }
        .contents-candidate-item-caption-head {
          display: block;
          padding: 20px 0;
          font-weight: 700;
          font-size: 14px; }
        .contents-candidate-item-caption-body {
          font-size: 14px;
          line-height: 1.5; }
  .contents-period {
    text-align: center; }
    .contents-period-text {
      display: inline-block;
      font-size: 24px;
      color: #ff4b46;
      text-align: center;
      font-weight: 700; }
      @media only screen and (min-width: 951px) {
        .contents-period-text {
          background: linear-gradient(transparent 40%, #ffff00 40%); } }
      @media only screen and (max-width: 950px) {
        .contents-period-text-top, .contents-period-text-middle, .contents-period-text-bottom {
          background: linear-gradient(transparent 40%, #ffff00 40%); } }
    .contents-period-big {
      font-size: 38px; }
      @media only screen and (max-width: 950px) {
        .contents-period-big {
          font-size: 28px; } }
    .contents-period-middle {
      font-size: 28px; }
      @media only screen and (max-width: 950px) {
        .contents-period-middle {
          font-size: 22px; } }
    .contents-period-small {
      font-size: 24px; }
      @media only screen and (max-width: 950px) {
        .contents-period-small {
          font-size: 18px; } }
    .contents-period-process {
      font-size: 17px;
      color: #595959;
      margin-top: 20px;
      line-height: 1.8; }
      @media only screen and (max-width: 950px) {
        .contents-period-process {
          width: 90%;
          margin: 20px auto 0;
          font-size: 13px;
          text-align: left; } }
  .contents-apply {
    position: relative;
    margin: 80px 0 60px;
    text-align: center; }
    @media only screen and (max-width: 950px) {
      .contents-apply {
        margin: 120px 0 30px; } }
    .contents-apply button {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      background: none;
      border: 0;
      outline: none;
      display: block;
      max-width: 380px;
      margin: 0 auto;
      transition: all 0.3s ease-in-out;
      cursor: pointer; }
      [data-processed='1'] .contents-apply button {
        pointer-events: none;
        opacity: 0.3; }
      @media only screen and (max-width: 950px) {
        .contents-apply button {
          width: 90%; } }
      .contents-apply button:hover {
        transform: scale(0.95); }
    .contents-apply-close {
      font-weight: 700;
      line-height: 1.8;
      font-size: 16px; }
      @media only screen and (max-width: 950px) {
        .contents-apply-close {
          font-size: 14px; } }
      .contents-apply-close strong {
        display: block;
        font-size: 28px;
        color: #ff4b46; }
        @media only screen and (min-width: 951px) {
          .contents-apply-close strong {
            line-height: 1;
            margin-bottom: 10px; } }
        @media only screen and (max-width: 950px) {
          .contents-apply-close strong {
            font-size: 18px; } }
  .contents-attention {
    width: 90%;
    margin: 150px auto 110px;
    padding: 30px;
    background-color: #f4f4f5; }
    @media only screen and (max-width: 950px) {
      .contents-attention {
        margin: 30px auto;
        padding: 20px; } }
    .contents-attention-title {
      font-size: 20px;
      font-weight: 400;
      text-indent: -0.5em;
      line-height: 1;
      margin-bottom: 16px; }
      @media only screen and (max-width: 950px) {
        .contents-attention-title {
          font-size: 16px; } }
    .contents-attention-list li {
      font-size: 14px;
      text-indent: -1em;
      padding-left: 1em;
      line-height: 1.8; }
      @media only screen and (max-width: 950px) {
        .contents-attention-list li {
          font-size: 12px; } }
  .contents-mystery {
    width: 90%;
    margin: 70px auto 0; }
    @media only screen and (max-width: 950px) {
      .contents-mystery {
        margin: 60px auto 0; } }
    .contents-mystery-inner {
      max-width: 540px;
      margin: 0 auto; }
    @media only screen and (max-width: 950px) {
      .contents-mystery-title {
        max-width: 230px; } }
    .contents-mystery-title:not(:first-of-type) {
      margin-top: 50px; }
    .contents-mystery-subtitle {
      font-size: 18px;
      font-weight: 700;
      color: #ff4b46;
      margin-top: 30px; }
      @media only screen and (max-width: 950px) {
        .contents-mystery-subtitle {
          margin-top: 20px; } }
    .contents-mystery-text {
      margin-top: 20px;
      font-size: 15px;
      letter-spacing: 0.05em;
      line-height: 1.8; }
      @media only screen and (max-width: 950px) {
        .contents-mystery-text {
          font-size: 14px;
          margin-top: 10px; } }
  .contents-char-link {
    width: 90%;
    margin: 60px auto;
    text-align: center; }
    @media only screen and (max-width: 950px) {
      .contents-char-link {
        margin: 40px auto 40px; } }
    .contents-char-link a {
      display: inline-block;
      color: #ff4b46;
      line-height: 1.5;
      font-weight: 700;
      font-size: 20px;
      text-decoration: none;
      border-bottom: solid 1px #ff4b46; }
      .contents-char-link a::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 9px 0 9px 14px;
        border-color: transparent transparent transparent #ff4b46;
        vertical-align: -2px;
        margin-left: 4px; }
  .contents-question {
    width: 90%;
    margin: 70px auto 0;
    padding-bottom: 170px; }
    @media only screen and (max-width: 950px) {
      .contents-question {
        padding-bottom: 60px;
        margin: 0 auto; } }
    .contents-question-inner {
      max-width: 540px;
      margin: 0 auto; }
    .contents-question-title {
      margin-bottom: 46px; }
      @media only screen and (max-width: 950px) {
        .contents-question-title {
          margin-bottom: 30px; } }
    .contents-question-head {
      font-size: 18px;
      font-weight: 700;
      color: #ff4b46; }
      .contents-question-head:not(:first-of-type) {
        margin-top: 50px; }
        @media only screen and (max-width: 950px) {
          .contents-question-head:not(:first-of-type) {
            margin-top: 30px; } }
    .contents-question-body {
      margin-top: 30px;
      font-size: 15px; }
      @media only screen and (max-width: 950px) {
        .contents-question-body {
          margin-top: 10px; } }
      .contents-question-body span {
        font-size: 18px;
        font-weight: 700;
        color: #ff4b46; }
  .contents .contents-char-container {
    width: 100%;
    position: relative; }
    .contents .contents-char-container::before, .contents .contents-char-container::after {
      content: '';
      position: absolute;
      display: block;
      width: 106px;
      height: 124px;
      background-size: 106px 124px;
      background-repeat: no-repeat; }
    .contents .contents-char-container:nth-of-type(2) {
      margin-top: 60px; }
      @media only screen and (max-width: 950px) {
        .contents .contents-char-container:nth-of-type(2) {
          margin-top: 30px; } }

/*---------------------------
	INFO
---------------------------*/
.info {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: flex;
  justify-content: center;
  align-items: flex-start; }
  .info-pc {
    pointer-events: none;
    max-width: 108.11881%; }

/*---------------------------
	FUKI
---------------------------*/
.fuki {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  text-align: center; }

/*---------------------------
	MEMBERS
---------------------------*/
.member {
  transform: translateZ(0);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden; }
  @media only screen and (max-width: 950px) {
    .member {
      justify-content: space-between; } }
  .member-item {
    width: 20%; }
    @media only screen and (max-width: 950px) {
      .member-item {
        display: flex;
        justify-content: center;
        width: 48%; } }
    .member-item-button {
      position: relative;
      display: flex;
      justify-content: center;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      background: none;
      border: 0;
      outline: none;
      perspective: 1100px;
      transform-style: preserve-3d;
      cursor: pointer; }
      .member-item-button img {
        max-width: 109%;
        pointer-events: none;
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden; }
      @media only screen and (min-width: 951px) {
        .member-item-button {
          transition: 0.4s; }
          .member-item-button:hover {
            transform: scale(1.1); }
            .member-item-button:hover .member-item-fore {
              transform: rotateY(180deg); }
            .member-item-button:hover .member-item-back {
              transform: translate(-50%, 0) rotateY(0deg); } }
    .member-item-fore {
      position: relative;
      transition: 0.4s; }
    .member-item-back {
      position: absolute;
      transition: 0.4s;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0) rotateY(-180deg); }

/*---------------------------
	NOTE
	投票注意点
---------------------------*/
.notes {
  margin: 40px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .notes-item {
    margin-bottom: 10px; }
    .notes-item:last-child {
      margin-bottom: 0; }
    @media only screen and (max-width: 950px) {
      .notes-item {
        font-size: 12px; } }

/*---------------------------
	RETURN
	サイトへ戻る
---------------------------*/
.return {
  text-align: center;
  margin-bottom: 90px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .return-link {
    display: inline-block;
    transition: 0.4s; }
    .return-link:hover {
      transform: scale(0.95); }

/*---------------------------
	フッター
---------------------------*/
.footer {
  background: #ff4b46;
  text-align: center;
  padding: 25px 0;
  border-top: 5px solid #fe837f;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .footer-copyright {
    color: #fff;
    font-size: 10px; }

/*---------------------------
	MODAL
---------------------------*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  background: rgba(165, 225, 255, 0.8); }
  @media only screen and (min-width: 951px) {
    .modal::before, .modal::after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      flex-basis: 0;
      flex-grow: 1; } }
  .modal.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    overflow-y: auto; }
  .modal-tab {
    outline: none;
    flex-shrink: 0;
    width: 100%;
    display: flex;
    justify-content: center; }
    @media only screen and (max-width: 950px) {
      .modal-tab {
        padding: 60px 0; } }
  .modal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: #f8f9ff;
    pointer-events: none; }
  .modal-dialog {
    position: relative; }
    @media only screen and (max-width: 950px) {
      .modal-dialog {
        width: 100%; } }
    .modal-dialog-close {
      position: absolute;
      top: 0;
      left: 100%;
      margin-left: 10px;
      width: 40px;
      height: 40px;
      border: 0;
      background: none;
      outline: none;
      cursor: pointer; }
      .modal-dialog-close::before, .modal-dialog-close::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 4px;
        background: #fff; }
      .modal-dialog-close::before {
        transform: translate(0, -50%) rotate(45deg); }
      .modal-dialog-close::after {
        transform: translate(0, -50%) rotate(-45deg); }
      @media only screen and (min-width: 951px) {
        .modal-dialog-close {
          transition: 0.4s; }
          .modal-dialog-close:hover {
            transform: scale(1.2); } }
      @media only screen and (max-width: 950px) {
        .modal-dialog-close {
          top: -50px;
          left: auto;
          right: 0;
          margin-right: 10px; } }
  .modal-nav {
    margin-top: 20px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    @media only screen and (min-width: 951px) {
      .modal-nav {
        display: flex;
        justify-content: space-between; }
        [data-processed='1'] .modal-nav {
          justify-content: center; } }
    .modal-nav-item {
      display: none; }
      [data-step='1'] .modal-nav-item[data-step='1'],
      [data-step='2'] .modal-nav-item[data-step='2'],
      [data-step='3'] .modal-nav-item[data-step='3'] {
        display: block; }
      @media only screen and (max-width: 950px) {
        .modal-nav-item {
          text-align: center; }
          .modal-nav-item + .modal-nav-item {
            margin-top: 10px; } }
    .modal-nav-button {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      background: none;
      border: 0;
      outline: none;
      cursor: pointer; }
      @media only screen and (min-width: 951px) {
        .modal-nav-button {
          transition: 0.4s; }
          .modal-nav-button:hover {
            transform: scale(0.95); } }

/*---------------------------
	キャラクター
---------------------------*/
.ch {
  position: relative;
  max-width: 650px;
  background: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: none;
  /*---------------
		メイン
		（キャラ画像+キャラ名前）
	---------------*/
  /*---------------
		メッセージ
	---------------*/
  /*---------------
		プロフィール
	---------------*/
  /*---------------
		キャラクター
		ナビゲーション
	---------------*/ }
  @media only screen and (min-width: 951px) {
    .ch {
      padding: 40px; } }
  @media only screen and (max-width: 950px) {
    .ch {
      margin: 0 auto;
      padding: 20px 5%; } }
  [data-step='1'] .ch {
    display: block; }
  [data-member='chiaki'] .ch .ch {
    border: 2px solid #ff969b; }
  [data-member='chiaki'] .ch .ch-main-name {
    background: url(/tohyo/dancho1/img/chiaki/name.png) no-repeat right center;
    background-size: auto 100%; }
  [data-member='chiaki'] .ch .ch-main-img {
    background: url(/tohyo/dancho1/img/chiaki/photo.png) no-repeat center center;
    background-size: contain; }
  [data-member='chiaki'] .ch .ch-message-memberBox[data-member='chiaki'],
  [data-member='chiaki'] .ch .ch-profile-memberBox[data-member='chiaki'] {
    display: block; }
  [data-member='tamaki'] .ch .ch {
    border: 2px solid #a5e1ff; }
  [data-member='tamaki'] .ch .ch-main-name {
    background: url(/tohyo/dancho1/img/tamaki/name.png) no-repeat right center;
    background-size: auto 100%; }
  [data-member='tamaki'] .ch .ch-main-img {
    background: url(/tohyo/dancho1/img/tamaki/photo.png) no-repeat center center;
    background-size: contain; }
  [data-member='tamaki'] .ch .ch-message-memberBox[data-member='tamaki'],
  [data-member='tamaki'] .ch .ch-profile-memberBox[data-member='tamaki'] {
    display: block; }
  [data-member='arisa'] .ch .ch {
    border: 2px solid #9ba5ff; }
  [data-member='arisa'] .ch .ch-main-name {
    background: url(/tohyo/dancho1/img/arisa/name.png) no-repeat right center;
    background-size: auto 100%; }
  [data-member='arisa'] .ch .ch-main-img {
    background: url(/tohyo/dancho1/img/arisa/photo.png) no-repeat center center;
    background-size: contain; }
  [data-member='arisa'] .ch .ch-message-memberBox[data-member='arisa'],
  [data-member='arisa'] .ch .ch-profile-memberBox[data-member='arisa'] {
    display: block; }
  [data-member='iori'] .ch .ch {
    border: 2px solid #ffb47d; }
  [data-member='iori'] .ch .ch-main-name {
    background: url(/tohyo/dancho1/img/iori/name.png) no-repeat right center;
    background-size: auto 100%; }
  [data-member='iori'] .ch .ch-main-img {
    background: url(/tohyo/dancho1/img/iori/photo.png) no-repeat center center;
    background-size: contain; }
  [data-member='iori'] .ch .ch-message-memberBox[data-member='iori'],
  [data-member='iori'] .ch .ch-profile-memberBox[data-member='iori'] {
    display: block; }
  [data-member='hana'] .ch .ch {
    border: 2px solid #fffadc; }
  [data-member='hana'] .ch .ch-main-name {
    background: url(/tohyo/dancho1/img/hana/name.png) no-repeat right center;
    background-size: auto 100%; }
  [data-member='hana'] .ch .ch-main-img {
    background: url(/tohyo/dancho1/img/hana/photo.png) no-repeat center center;
    background-size: contain; }
  [data-member='hana'] .ch .ch-message-memberBox[data-member='hana'],
  [data-member='hana'] .ch .ch-profile-memberBox[data-member='hana'] {
    display: block; }
  [data-member='komachi'] .ch .ch {
    border: 2px solid #e1cd91; }
  [data-member='komachi'] .ch .ch-main-name {
    background: url(/tohyo/dancho1/img/komachi/name.png) no-repeat right center;
    background-size: auto 100%; }
  [data-member='komachi'] .ch .ch-main-img {
    background: url(/tohyo/dancho1/img/komachi/photo.png) no-repeat center center;
    background-size: contain; }
  [data-member='komachi'] .ch .ch-message-memberBox[data-member='komachi'],
  [data-member='komachi'] .ch .ch-profile-memberBox[data-member='komachi'] {
    display: block; }
  [data-member='ayumu'] .ch .ch {
    border: 2px solid #ffffa5; }
  [data-member='ayumu'] .ch .ch-main-name {
    background: url(/tohyo/dancho1/img/ayumu/name.png) no-repeat right center;
    background-size: auto 100%; }
  [data-member='ayumu'] .ch .ch-main-img {
    background: url(/tohyo/dancho1/img/ayumu/photo.png) no-repeat center center;
    background-size: contain; }
  [data-member='ayumu'] .ch .ch-message-memberBox[data-member='ayumu'],
  [data-member='ayumu'] .ch .ch-profile-memberBox[data-member='ayumu'] {
    display: block; }
  [data-member='sakura'] .ch .ch {
    border: 2px solid #ffd2e6; }
  [data-member='sakura'] .ch .ch-main-name {
    background: url(/tohyo/dancho1/img/sakura/name.png) no-repeat right center;
    background-size: auto 100%; }
  [data-member='sakura'] .ch .ch-main-img {
    background: url(/tohyo/dancho1/img/sakura/photo.png) no-repeat center center;
    background-size: contain; }
  [data-member='sakura'] .ch .ch-message-memberBox[data-member='sakura'],
  [data-member='sakura'] .ch .ch-profile-memberBox[data-member='sakura'] {
    display: block; }
  [data-member='hotaru'] .ch .ch {
    border: 2px solid #8cfaaa; }
  [data-member='hotaru'] .ch .ch-main-name {
    background: url(/tohyo/dancho1/img/hotaru/name.png) no-repeat right center;
    background-size: auto 100%; }
  [data-member='hotaru'] .ch .ch-main-img {
    background: url(/tohyo/dancho1/img/hotaru/photo.png) no-repeat center center;
    background-size: contain; }
  [data-member='hotaru'] .ch .ch-message-memberBox[data-member='hotaru'],
  [data-member='hotaru'] .ch .ch-profile-memberBox[data-member='hotaru'] {
    display: block; }
  [data-member='mako'] .ch .ch {
    border: 2px solid #d2b4ff; }
  [data-member='mako'] .ch .ch-main-name {
    background: url(/tohyo/dancho1/img/mako/name.png) no-repeat right center;
    background-size: auto 100%; }
  [data-member='mako'] .ch .ch-main-img {
    background: url(/tohyo/dancho1/img/mako/photo.png) no-repeat center center;
    background-size: contain; }
  [data-member='mako'] .ch .ch-message-memberBox[data-member='mako'],
  [data-member='mako'] .ch .ch-profile-memberBox[data-member='mako'] {
    display: block; }
  .ch-main {
    position: relative; }
    @media only screen and (min-width: 951px) {
      .ch-main {
        padding-left: 45%; } }
    .ch-main-img {
      pointer-events: none; }
      @media only screen and (min-width: 951px) {
        .ch-main-img {
          position: absolute;
          top: -5%;
          left: -13%;
          width: 58.77%; } }
      .ch-main-img:before {
        content: '';
        display: block;
        padding-top: 140.315%; }
    @media only screen and (min-width: 951px) {
      .ch-main-name {
        margin-left: -25%;
        width: 125%;
        height: 96px;
        margin-bottom: 25px; } }
    @media only screen and (max-width: 950px) {
      .ch-main-name {
        width: 100%;
        height: 65px; } }
  .ch-message {
    position: relative;
    font-size: 13px; }
    .ch-message-memberBox {
      display: none; }
    .ch-message-lead {
      margin-top: 10px; }
      .ch-message-lead span {
        padding: 2px;
        color: #ff4b46;
        font-weight: bold;
        background: #fff799; }
    .ch-message-text {
      margin-top: 10px; }
    .ch-message-voice {
      margin-top: 10px;
      width: 100%; }
      .ch-message-voice-title {
        position: relative;
        background: #fff; }
        .ch-message-voice-title::before, .ch-message-voice-title::after {
          content: '';
          position: absolute;
          top: 50%;
          width: 2px;
          height: 50%;
          background: #ff8d8a; }
        .ch-message-voice-title::before {
          left: 0; }
        .ch-message-voice-title::after {
          right: 0; }
        .ch-message-voice-title-img {
          display: flex;
          align-items: center; }
          .ch-message-voice-title-img::before, .ch-message-voice-title-img::after {
            content: '';
            flex-grow: 1;
            height: 2px;
            background: #ff8d8a; }
          .ch-message-voice-title-img img {
            flex-shrink: 1; }
      .ch-message-voice-box {
        background: #fff;
        padding: 5px 10px;
        border-left: 2px solid #ff8d8a;
        border-right: 2px solid #ff8d8a;
        border-bottom: 2px solid #ff8d8a; }
  .ch-profile {
    position: relative;
    margin-top: 30px; }
    .ch-profile-memberBox {
      display: none; }
    .ch-profile-lead {
      margin-top: 10px;
      font-size: 12px; }
      .ch-profile-lead span {
        padding: 2px;
        color: #ff4b46;
        font-weight: bold;
        background: #fff799; }
    .ch-profile-text {
      margin-top: 10px;
      font-size: 12px; }
  .ch-nav {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    background: #ff4b46;
    display: none;
    cursor: pointer; }
    [data-step='1'] .ch-nav {
      display: block; }
    @media only screen and (min-width: 951px) {
      .ch-nav {
        transition: 0.4s; }
        .ch-nav:hover {
          transform: scale(0.9); } }
    @media only screen and (max-width: 950px) {
      .ch-nav {
        display: none !important; } }
    .ch-nav::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 15px;
      height: 15px;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      pointer-events: none; }
    .ch-nav.ch-prev {
      right: 100%;
      margin-right: 50px; }
      .ch-nav.ch-prev::before {
        margin-left: 5px;
        transform: translate(-50%, -50%) rotate(-135deg); }
    .ch-nav.ch-next {
      left: 100%;
      margin-left: 50px; }
      .ch-nav.ch-next::before {
        margin-left: -5px;
        transform: translate(-50%, -50%) rotate(45deg); }

/*---------------------------
	応募フォーム
---------------------------*/
.form {
  position: relative;
  width: 555px;
  max-width: 100%;
  background: #fff;
  border: 3px solid #5064ff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 10px 25px 0 25px;
  display: none;
  /*---------------
	フォームヘッダー
	---------------*/
  /*---------------
	コンテンツ
	---------------*/
  /*---------------
	一覧(レイアウト)
	---------------*/
  /*---------------
	項目(レイアウト)
	---------------*/
  /*---------------
	入力用データ
	---------------*/ }
  @media only screen and (max-width: 950px) {
    .form {
      width: 100%;
      padding: 20px 0 0 0; } }
  [data-step='2'] .form,
  [data-step='3'] .form {
    display: block; }
  .form[data-status='confirm']::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999; }
  .form-header {
    position: relative;
    text-align: center;
    margin-bottom: 10px; }
    .form-header-item {
      position: absolute;
      top: 50%;
      right: 10px;
      padding: 5px 20px;
      display: inline-block;
      border: 1px solid #5064ff;
      color: #5064ff;
      border-radius: 30px;
      transform: translate(0, -50%);
      line-height: 1;
      letter-spacing: 1px; }
  .form-contents {
    position: relative;
    padding: 20px 32px;
    border: 2px solid #5064ff; }
    .form-contents-title {
      text-align: center;
      color: #5064ff;
      font-size: 30px;
      margin-bottom: 10px;
      letter-spacing: 0.05em; }
    .form-contents-description {
      text-align: center;
      color: #5064ff;
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 18px;
      letter-spacing: 0.05em; }
    .form-contents-footer {
      position: relative;
      text-align: center;
      color: #5064ff;
      padding: 20px 0;
      font-weight: bold; }
  .form-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative; }
    @media only screen and (max-width: 950px) {
      .form-list {
        width: 100%;
        margin: 0 auto; } }
  .form-item {
    width: 48%;
    display: flex;
    align-items: center;
    line-height: 1;
    position: relative;
    /*---------------
	チェックボックス
	---------------*/ }
    @media only screen and (max-width: 950px) {
      .form-item {
        width: 50%; } }
    .form-item:nth-of-type(n+3) {
      margin-top: 20px; }
    .form-item-error {
      margin: 10px 0; }
      .form-item-error span {
        display: inline-block;
        color: #ff4b46;
        font-weight: bold;
        background: #ff0;
        font-size: 13px; }
    .form-item-wrap {
      position: relative;
      display: inline-block;
      background-image: url(/tohyo/group1/img/form/checkbox.jpg);
      background-size: 100% auto;
      background-repeat: no-repeat;
      width: 34px;
      padding-bottom: 34px; }
      .form-item-wrap input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        outline: 0;
        overflow: hidden;
        opacity: 0;
        cursor: pointer;
        background: no-repeat center center;
        background-size: 100% auto; }
        .form-item-wrap input:checked + .checked {
          opacity: 1;
          visibility: visible; }
      .form-item-wrap .checked {
        position: absolute;
        top: -6px;
        left: -6px;
        width: 50px;
        height: 40px;
        z-index: 10;
        outline: 0;
        opacity: 0;
        visibility: hidden;
        background-image: url(/tohyo/group1/img/form/check.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        pointer-events: none; }
  .form-check-name {
    width: 80%;
    color: #5064ff;
    font-size: 20px;
    font-weight: 700;
    padding-left: .5em; }
    @media only screen and (max-width: 950px) {
      .form-check-name {
        font-size: 15px; } }
  .form-data {
    width: 100%;
    background: #fff;
    border: 2px solid #5064ff;
    margin-top: 30px; }
    .form-data-title {
      font-size: 18px;
      text-align: center;
      color: #5064ff;
      font-weight: bold;
      border-bottom: 2px solid #5064ff; }
    .form-data-detail {
      position: relative;
      width: 100%; }
      [data-status='confirm'] .form-data-detail {
        background-color: #f1f1f1; }
        [data-status='confirm'] .form-data-detail::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none; }
      .form-data-detail[data-type='textarea'] {
        height: 60px; }
      .form-data-detail[data-type='input'] {
        height: 80px; }
        [data-status='confirm'] .form-data-detail[data-type='input'] {
          pointer-events: none; }
      .form-data-detail textarea,
      .form-data-detail input {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        background: none;
        border: 0;
        outline: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 20px;
        font-size: 16px; }

/*---------------------------
	サンクス画面
---------------------------*/
.thanks {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(165, 225, 255, 0.8);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s; }
  .thanks.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    overflow-y: auto; }
  .thanks-tab {
    padding: 60px 0; }
  .thanks::before, .thanks::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%; }
  .thanks-dialog {
    position: relative;
    background: #fff;
    width: 555px;
    max-width: 100%;
    border: solid 2px #5064ff; }
    @media only screen and (max-width: 950px) {
      .thanks-dialog {
        width: 100%; } }
    .thanks-dialog-header {
      position: relative;
      text-align: center;
      margin-bottom: 35px; }
      @media only screen and (max-width: 950px) {
        .thanks-dialog-header {
          margin-bottom: 15px; }
          .thanks-dialog-header img {
            width: 100px; } }
    .thanks-dialog-text {
      position: relative;
      text-align: center;
      font-size: 27px;
      color: #ff4b46;
      font-weight: bold; }
      @media only screen and (max-width: 950px) {
        .thanks-dialog-text {
          font-size: 18px; } }
    .thanks-dialog-image {
      position: relative;
      text-align: center;
      margin-top: 30px;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none; }
      @media only screen and (max-width: 950px) {
        .thanks-dialog-image {
          width: 90%;
          margin: 15px auto 0; } }
    .thanks-dialog-notes {
      text-align: center;
      color: #ff4b46;
      font-size: 18px;
      margin-top: 20px;
      font-weight: bold; }
      @media only screen and (max-width: 950px) {
        .thanks-dialog-notes {
          font-size: 14px; } }
    .thanks-dialog-step {
      position: relative; }
      @media only screen and (max-width: 950px) {
        .thanks-dialog-step {
          width: 90%;
          margin: 0 auto; } }
    .thanks-dialog-image img {
      border: 2px solid #ff4b46; }
    .thanks-dialog-item {
      display: none; }
      [data-step='1'] .thanks-dialog-item[data-step='1'],
      [data-step='2'] .thanks-dialog-item[data-step='2'] {
        display: block; }
    .thanks-dialog-tw {
      text-align: center;
      margin: 20px 0 30px; }
      .thanks-dialog-tw-next {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        background: none;
        border: 0;
        outline: none;
        display: inline-block;
        cursor: pointer; }
        @media only screen and (min-width: 951px) {
          .thanks-dialog-tw-next {
            transition: 0.4s; }
            .thanks-dialog-tw-next:hover {
              transform: scale(0.9); } }
      .thanks-dialog-tw-submit {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        background: none;
        border: 0;
        outline: none;
        display: inline-block;
        cursor: pointer; }
        @media only screen and (min-width: 951px) {
          .thanks-dialog-tw-submit {
            transition: 0.4s; }
            .thanks-dialog-tw-submit:hover {
              transform: scale(0.9); } }
    .thanks-dialog-form {
      width: 100%;
      max-width: 460px;
      margin: 20px auto 0; }
      .thanks-dialog-form-textarea {
        padding: 10px;
        width: 100%;
        border-radius: 7px;
        border: 2px solid #b5b5b5;
        outline: none;
        font-size: 16px; }
    .thanks-dialog-tmb {
      margin-bottom: 20px; }
  .thanks-nav {
    margin-top: 20px;
    text-align: center; }
    .thanks-nav-return {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      background: none;
      border: 0;
      outline: none; }
      .thanks-nav-return img {
        pointer-events: none; }
      @media only screen and (min-width: 951px) {
        .thanks-nav-return {
          transition: 0.4s; }
          .thanks-nav-return:hover {
            transform: scale(0.9); } }
  .thanks .form-header {
    padding-top: 20px; }
  .thanks .form-contents {
    border: none; }

/*---------------------------
	投票後のアナウンス
---------------------------*/
.processed {
  margin: 20px auto;
  padding: 20px;
  border-radius: 15px;
  background: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 3px solid #ff4b46;
  display: flex; }
  @media only screen and (min-width: 951px) {
    .processed {
      width: 80%;
      max-width: 550px; } }
  .processed-icon {
    width: 150px;
    margin-right: 50px; }
    @media only screen and (max-width: 950px) {
      .processed-icon {
        width: 30%;
        margin-right: 20px; } }
  .processed-block {
    flex: 1;
    font-size: 18px; }
    @media only screen and (max-width: 950px) {
      .processed-block {
        font-size: 12px; } }
    .processed-block strong {
      font-size: 40px; }
      @media only screen and (max-width: 950px) {
        .processed-block strong {
          font-size: 25px; } }
    .processed-block-tweet {
      margin-top: 10px; }
      .processed-block-tweet-button {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        background: none;
        border: 0;
        outline: none;
        padding: 5px 0;
        width: 100%;
        color: #ff4b46;
        font-weight: bold;
        text-align: center;
        border: 2px solid #ff4b46;
        border-radius: 5px;
        cursor: pointer; }
        @media only screen and (min-width: 951px) {
          .processed-block-tweet-button {
            font-size: 15px;
            transition: 0.4s; }
            .processed-block-tweet-button:hover {
              transform: scale(0.9); } }
        @media only screen and (max-width: 950px) {
          .processed-block-tweet-button {
            font-size: 13px; } }

/*---------------------------
	再生プレイヤー
---------------------------*/
.soundplayer {
  display: flex;
  align-items: center; }
  .soundplayer-button {
    position: relative;
    width: 20.266%;
    margin-right: 10px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: none;
    border: 0;
    outline: none;
    cursor: pointer; }
    .soundplayer-button::before {
      content: '';
      display: block;
      padding-top: 100%;
      background: url(/tohyo/dancho1/img/play.png) no-repeat center center;
      background-size: 100% auto; }
    .soundplayer-button::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(/tohyo/dancho1/img/pause.png) no-repeat center center;
      background-size: 100% auto;
      opacity: 0; }
    [data-status='play'] .soundplayer-button::before {
      opacity: 0; }
    [data-status='play'] .soundplayer-button::after {
      opacity: 1; }
  .soundplayer-bar {
    position: relative;
    flex: 1;
    height: 20px; }
    .soundplayer-bar::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
      background: #ff4b46;
      pointer-events: none; }
    .soundplayer-bar-point {
      position: absolute;
      top: 50%;
      left: 0;
      width: 5px;
      height: 20px;
      background: #ff4b46;
      margin-top: -10px;
      pointer-events: none; }

.qr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(165, 225, 255, 0.8);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s; }
  .qr[data-member='chiaki'] {
    background: rgba(255, 150, 155, 0.8); }
  .qr[data-member='tamaki'] {
    background: rgba(165, 225, 255, 0.8); }
  .qr[data-member='arisa'] {
    background: rgba(155, 165, 255, 0.8); }
  .qr[data-member='iori'] {
    background: rgba(255, 180, 125, 0.8); }
  .qr[data-member='hana'] {
    background: rgba(255, 250, 220, 0.8); }
  .qr[data-member='komachi'] {
    background: rgba(225, 205, 145, 0.8); }
  .qr[data-member='ayumu'] {
    background: rgba(255, 255, 165, 0.8); }
  .qr[data-member='sakura'] {
    background: rgba(255, 210, 230, 0.8); }
  .qr[data-member='hotaru'] {
    background: rgba(140, 250, 170, 0.8); }
  .qr[data-member='mako'] {
    background: rgba(210, 180, 255, 0.8); }
  .qr.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    overflow-y: auto; }
  .qr::before, .qr::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%; }
  @media only screen and (max-width: 950px) {
    .qr-tab {
      width: 90%;
      margin: 0 auto; } }
  .qr-dialog {
    position: relative;
    max-width: 100%; }
  .qr-interview {
    margin-top: 30px;
    text-align: center; }
    .qr-interview-button {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      background: none;
      border: 0;
      outline: none; }
      @media only screen and (min-width: 951px) {
        .qr-interview-button {
          transition: 0.4s;
          cursor: pointer; }
          .qr-interview-button:hover {
            transform: scale(0.95); } }
      .qr-interview-button img {
        pointer-events: none; }