@charset "utf-8";
:root {
    --theme-maintxtcolor: #494949;
    --theme-midashicolor: #b5004e;
    --theme-linkcolor: #f93489;
    --theme-linkcolorhover: #d6015e;
    --theme-buttoncolor: #f93489;
    --theme-buttoncolorhover: #d6015e;
    --theme-buttontxtcolor: #ffffff;

    --spacing8: 8px;
    --inner_full: 90%;
}
html {line-height: 1.15;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, a, address, code, strong, i, center,	dl, dt, dd, ol, ul, li,
form, label, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, figure, figcaption, footer, header, menu, nav, section, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, section {display: block;}
body {line-height: 1;} ul,li {list-style: none;}
table {border-collapse:collapse;border-spacing:0;}img {max-width: 100%;height: auto;}
input[type="checkbox"] {width: 1em;}
[type="checkbox"],[type="radio"] {box-sizing: border-box;padding: 0;}
button,input,optgroup,select,textarea {font-family: sans-serif;font-size: 100%;line-height: 1.15;margin: 0;}
button,input {overflow: visible;}
button,select {text-transform: none;}
button,html [type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
textarea {overflow: auto;}
/* style
------------------------------------------------------------------------- */
html,body {
	color: var(--theme-maintxtcolor);
	padding: 0;
	margin: 0;
	font-size: 18px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
	height: 100%;
  position: relative;
  scroll-padding-top: 90px;
}
* html .clearfix { zoom: 1;}
*:first-child+html .clearfix {zoom: 1;}

/* text style
------------------------------------------------------------------------- */
.clear {clear: both;}
.clearfix:after,.container:after,section:after,dl:after,dl dd:after,ul:after,header .inner:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.btm {margin-bottom: 30px!important;}

a {
  color:var(--theme-linkcolor);
  text-decoration:none;
    &:hover {
      color: var(--theme-linkcolorhover);
    }
}
p {
  line-height: 1.4em;
}
.mini_note {
  font-size: 0.85em;
  line-height: 1.3em;
}
.mini_txt {
  font-size: 0.85em;
}
.mg2_txt {
  margin: 0 0 2em 0;
}

.flex {
  display: flex;
  justify-content: space-between;
    & .herf {
      width: 47%;
    }
    & .setting {
      line-height: 3em;
    }
}
.login_wrap,.password_wrap,.profile_wrap {
  width: auto;
  padding: 50px 40px;
    & p {
      line-height: 1.5em;
    }
    & h2 {
      text-align: center;
      margin: 0 0 30px 0;
      font-size: 1.3em;
    }
    & dl {
      width: auto;
        dt {
          margin: 0 0 4px 0;
          font-size: 0.9em;
        }
        dd {
          margin: 0 0 24px 0;
            & input {
              width: 100%;
              padding: 15px 10px;
              border-radius: 10px;
              border: 1px solid #8d8d8d;
              box-sizing: border-box;
            }
        }
    }
    & .remember {
      margin: 0 0 20px 0;
    }
    & .forgot,.already {
      margin: 0 0 40px 0;
    }
}
.profile_wrap {
  padding: 0 30px;
}
.error_message {
  font-size: 0.85em;
    & li {
      background-color: #ff0000;
      color: #fff;
      padding: 6px;
      margin: 4px 0;
    }
}
header {
  width: 100%;
  z-index: 999;
  padding: 10px;
  box-sizing: border-box;
  position: fixed;
  background-color: #fff;
  top: 0;
  background-color: none;
  transition: 0.3s ease;
  display: flex;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.059);
    & .logo {
      width: 40px;
      text-align: center;
    }
    & span {
      font-size: 14px;
      margin: 15px 0 0 1em;
      color: #494949;
    }
    & .login_btn {
      width: 100px;
      background-color: var(--theme-buttoncolor);
      text-align: center;
      margin: 0 10px 0 auto;
      border-radius: 30px;
        & a {
          display: block;
          color: #fff;
          text-align: center;
          padding: 10px;
        }
    }
    & form {
      margin: 0 0 0 auto;
        & button {
          width: 45px;
          margin: 5px 0 0 0;
          border: none;
          cursor: pointer;
          outline: none;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          transition: opacity 0.2s ease;
          background: transparent;
            & img {
              position: relative;
            }
        }
    }
    & .nav-container {
      position: relative;
      padding: 0;
      display: flex;
      margin: -4px 18px 0 auto;
      justify-content: flex-end;
        & #menu-toggle {
          display: none;
        }
        & .hamburger-btn {
          display: block;
          position: relative;
          width: 30px;
          height: 25px;
          cursor: pointer;
          z-index: 100;
            & span {
              display: block;
              position: absolute;
              width: 100%;
              height: 2px;
              background-color: #333;
              border-radius: 2px;
              transition: all 0.3s ease-in-out;
                &:nth-child(1) { top: 0; }
                &:nth-child(2) { top: 11px; }
                &:nth-child(3) { top: 22px; }
            }
        }
        & .global-nav {
          display: block;
          position: fixed;
          top: 0;
          right: -100%; /* 初期状態は画面の右外に隠す */
          width: 80%;    /* メニューの横幅 */
          height: 100vh;
          background-color: rgba(255, 255, 255, 0.95);
          box-shadow: -5px 0 15px rgba(0,0,0,0.1);
          padding-top: 80px; /* ボタンと被らないように */
          transition: all 0.3s ease-in-out;
          z-index: 99;
            & ul {
              flex-direction: column;
              align-items: center;
              gap: 0;
              box-sizing: border-box;
                & li {
                  width: auto;
                  text-align: center;
                   & a {
                      display: block;
                      padding: 26px 0;
                      border-bottom: 1px solid #eee;
                      margin: 0;
                      border-radius: 0;
                    } 
                }
                & form {
                  text-align: center;
                  margin: 10px 0;
                    & button {
          width: 45px;
          margin: 5px 0 0 0;
          border: none;
          cursor: pointer;
          outline: none;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          transition: opacity 0.2s ease;
          background: transparent;
            & img {
              position: relative;
            }
        }
                }
            }
        }
    }
    #menu-toggle:checked ~ .global-nav {
      right: 0;
    }
    #menu-toggle:checked ~ .hamburger-btn span:nth-child(1) {
      transform: translateY(11px) rotate(45deg);
    }
    #menu-toggle:checked ~ .hamburger-btn span:nth-child(2) {
      opacity: 0;
    }
    #menu-toggle:checked ~ .hamburger-btn span:nth-child(3) {
      transform: translateY(-11px) rotate(-45deg);
    }
}
main {
  width: auto;
  padding: 90px 0 40px 0;
    & .alert-success {
      text-align: center;
      margin: 50px 0;
      color: var(--theme-midashicolor);
      font-size: 1.1em;
    }
}
.back_gray {
  background-color: #f8f8f8;
}
section {
  display: block;
  margin: 0 0 60px 0;
}
h3.main {
  text-align: center;
  color: var(--theme-midashicolor);
}
h3.eventer {
  border-left: 6px solid var(--theme-maintxtcolor);
  padding: 5px 0 5px 14px;
  margin: 0 0 26px 0;
  font-size: 1.1em;
}
h3.candidate {
  color: var(--theme-midashicolor);
  padding: 10px;
  margin: 0 0 20px 0;
  background: -webkit-repeating-linear-gradient(-45deg, #ffeefc, #ffeefc 3px,#fff6ff 3px, #fff6ff 7px);
  background: repeating-linear-gradient(-45deg, #ffeefc, #ffeefc 3px,#fff6ff 3px, #fff6ff 7px);
}
.gray_btn {
  padding: 10px;
}
.logout_btn {
  width: 80%;
  margin: 30px auto;
    & button {
      width: 100%;
      border: none;
      background-color: #656565;
      color: #fff;
      padding: 15px 0;
      text-align: center;
    }
}
.eventer_wrap,.candidate_wrap,.admin_wrap {
  width: auto;
  padding: 0 20px;
    & .eventer_home {
      padding: 30px 0;
      text-align: center;
        p {
          line-height: 2em;
            & span {
              font-size: 0.85em;
            }
        }
    }
    & h2 {
      text-align: center;
      font-size: 1.2em;
      margin: 0 0 40px 0;
    }
    & dl {
      width: auto;
      padding: 0 20px;
        & dt {
          font-size: 0.9em;
          text-align: left;
          margin: 0 0 4px 0;
        }
        & dd {
          margin: 0 0 25px 0;
            & input {
              width: 100%;
              padding: 10px;
              box-sizing: border-box;
            }
        }
    }
    & .form_box {
      margin: 0 0 50px 0;
        & .keep_login {
          padding: 0 30px;
        }
        & small {
          font-size: 0.7em;
        }
    }
    & .main_box {
      padding: 30px 0;
    }
    & .situation {
      padding: 15px 0;
      margin: 4px 0;
      border-bottom: 1px solid #8c8c8c;
        & p {
          font-size: 0.8em;
          margin: 0 0 4px 0;
        }
        & ul {
          display: flex;
            & li {
              line-height: 0.8em;
              padding: 0 8px;
              margin: 8px 0;
              border-right: 1px solid #b8b8b8;
                &:last-child {
                  border: none;
                }
            }
        }
    }
}
.eventer_group {
  width: auto;
  padding: 20px;
    & .group_list {
      width: auto;
        & dl {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #8d8d8d;
            & dt {
              width: 15%;
              font-size: 1em;
              padding: 20px 0 15px 0;
              line-height: 1em;
              vertical-align: middle;
            }
            & dd {
              width: 85%;
              padding: 20px 0 15px 0;
              line-height: 1em;
              vertical-align: middle;
              position: relative;
                & span {
                  width: 78%;
                }
                & form {
                  width: 20%;
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  right: 0;
                    & button {
                      width: 100%;
                      padding: 5px 0;
                    }
                }
            }
        }
    }
}
ruby rt {
  display: none;
}
.tips {
  width: 85%;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #555;
  border-radius: 10px;
  position: relative;
  font-size: 0.85em;
  margin: 30px auto;
    & .title {
      text-align: center;
      margin: 0 0 10px 0;
      font-size: 1.1em;
    }
}
.result_wrap {
  width: auto;
    & .border_box {
      width: auto;
      padding: 15px 15px 5px 15px;
      background-color: #f9f9f9;
      border-radius: 8px;
      margin: 0 0 20px 0;
        & .created_date {
          font-size: 0.8em;
          line-height: 1.4em;
          color: #656565;
        }
    }
    & select {
      margin: 0 0 16px 0;
      padding: 5px;
    }
    & dl {
      display: flex;
      justify-content: space-between;
      width: auto;
      border-bottom: 1px dotted #cacaca;
      box-sizing: border-box;
      margin: 20px 0;
      padding: 0;
        &:last-child {
          border-bottom: none;
        }
        & dt {
          width: 20%;
          text-align: left;
          margin: 0;
          color: #828282;
        }
        & dd {
          width: 80%;
          margin: 0 0 8px 0;
          position: relative;
            & .details {
              width: 25%;
              position: absolute;
              top: 20%;
              transform: translateY(-50%);
              right: 0;
                & a {
                  padding: 4px 10px;
                  color: #fff;
                  background-color: var(--theme-buttoncolor);
                  font-size: 0.9em;
                  border-radius: 20px;
                }
            }
        }
    }
}
.add_candidate {
  width: auto;
  padding: 0 20px;
    & select {
      padding: 15px 10px;
      width: 100%;
      box-sizing: border-box;
    }
    & button {
      width: 100%;
      padding: 10px 0;
    }
}
.file-button::file-selector-button {
  color: white;
  background: #000;
  font-size: 16px;
  border: 0;
  border-radius: 10em;
  padding: 12px 20px;
  text-align: center;
}
.add_btn {
  width: 150px;
  margin: 20px auto;
}
.alert-danger {
  text-align: center;
  color: #ff0000;
  margin: 50px 0;
}
.welcome_wrap {
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 30px 20px 50px 20px;
    & .logo {
      width: 35%;
      margin: 0 auto 30px auto;
    }
    & h1 {
      text-align: center;
      font-size: 1.2em;
      margin: 0 0 30px 0;
    }
    & h2 {
      width: 70%;
      margin: 0 auto;
    }
    & p {
      line-height: 1.7em;
      margin: 0 0 2em 0;
    }
}
.account_edit {
  padding: 0 20px;
  width: auto;
  & label {
    width: auto;
    display: block;
    margin: 0 0 5px 0;
  }
  & input {
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 30px 0;
  }
}
.eventer_candidate_info {
  width: auto;
  padding: 0 20px;
    & h2 {
      font-size: 1.3em;
      text-align: center;
      margin: 0 0 40px 0;
    }
    & .profile_box {
        width: auto;
        padding: 0 20px;
          & .image {
            width: 60%;
            margin: 0 auto 10px auto;
          }
          & p {
            text-align: center;
            margin: 0 0 30px 0;
          }
    }
    & dl {
      width: auto;
      padding: 20px 0;
      border-bottom: 1px solid #b5b5b5;
        & dt {
          margin: 0 0 12px 0;
          padding: 0;
          font-size: 0.9em;
        }
        & dd {
          margin: 0;
          padding: 0;
            & .qr_code_img {
              width: 60%;
              margin: 16px auto 0 auto;
            }
        }
    }
}

.vote_wrap {
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 20px 20px;
    & button {
      padding: 0;
      border: none;
      background: transparent;
        & img {
          display: block;
        }
    }
    & textarea {
      width:100%;
      box-sizing: border-box;
      display: block;
      padding:10px;
      border-radius: 8px;
      margin: 0 0 30px 0;
    }
    & .flow_note {
      width: 90%;
      position: relative;
      margin-bottom: 20px;
      padding: 14px;
      box-sizing: border-box;
      border-radius: 8px;
      background-color: #ebebeb;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      margin: 0 auto 30px auto;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          border-style: solid;
          border-width: 20px 10px 0 10px;
          border-color: #ebebeb transparent transparent;
          translate: -50% 100%;
        }
    }
    & .flow1 {
      background-color: #ffeaf3;
      text-align: center;
      color: #9a114c;
      border-radius: 20px;
      padding: 8px;
      margin: 20px 0;
    }
    & h2 {
      text-align: center;
      margin: 0 0 30px 0;
      font-size: 22px;
      color: var(--theme-midashicolor);
    }
    & h3 {
      text-align: center;
      margin: 0 0 20px 0;
      font-size: 22px;
      color: var(--theme-midashicolor);
    }
    & .shop_name {
      padding: 20px 10px;
      width: 85%;
      border: 3px dotted var(--theme-linkcolor);
      margin: 20px auto 0 auto;
      border-radius: 14px;
      text-align: center;
      position: relative;
        & .event_info {
          & p {
            font-size: 18px;
            line-height: 1.8em;
            margin: 0 0 6px 0;
          }
          & span {
          font-size: 20px;
          font-style: italic;
          color:var(--theme-linkcolor);
          }
        }
        & .icon_heart {
          width: 30px;
          position: absolute;
          top: -15px;
          left: 0;
          right: 0;
          margin: 0 auto;
        }
        & .vote_period {
          width: 80%;
          text-align: center;
          margin: 20px auto 30px auto;
            & dt {
              background-color: #fff2f7;
              color:var(--theme-linkcolor);
              padding: 8px 0;
              border-radius: 20px;
              font-size: 16px;
            }
            & dd {
              padding: 8px 0;
              margin: 0 0 10px 0;
              font-size: 20px;
            }
        }
        & .price_note {
          text-align: center;
          font-size: 16px;
            & span {
              font-size: 22px;
              color:var(--theme-linkcolor);
            }
        }
    }
    
    & .cast_prof {
      width: auto;
      margin: 0 auto;
        & .img {
          width: 50%;
          box-sizing: border-box;
          box-shadow: 0 0 6px rgba(214, 1, 93, 0.175);
          overflow: hidden;
          border-radius: 50%;
          margin: 0 auto 14px auto;
            & img {
              width: 100%;
              aspect-ratio: 1 / 1;
              object-fit: cover;
            }
        }
        & .info {
          width: auto;
          text-align: center;
            & h3 {
              font-size: 22px;
              margin: 0 0 8px 0;
            }
            & .ruby {
              font-size: 16px;
              color:var(--theme-linkcolor);
              margin: 0 0 0 2px;
            }
        }
    }   
    & .vote_list {
      width: auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
        &::after {
          content: '';
          display: block;
          width: 31%;
        }
        & .box {
          width: 31%;
          border-radius: 12px;
          padding: 1px;
          box-sizing: border-box;
          box-shadow: 0 0 6px rgba(214, 1, 93, 0.175);
          margin: 0 0 14px 0;
            & .img {
              border-top-left-radius: 12px;
              border-top-right-radius: 12px;
              height: 130px;
              overflow: hidden;
            }
            & h3 {
              text-align: center;
              font-size: 15px;
              margin: 8px 0 4px 0;
              font-weight: 600;
              color: var(--theme-maintxtcolor);
            }
            & .ruby {
              font-size: 10px;
              text-align: center;
              margin: 0 0 8px 0;
              color: var(--theme-linkcolor);
            }
        }
    }
    & .price_at {
      text-align: center;
      margin: 0 auto 20px auto;
      border: 1px solid #8d8d8d ;
      width: 140px;
      padding: 8px;
      font-size: 14px;
    }
    & .quantity-picker {
      width: auto;
      margin: 0 auto 50px auto;
      display: flex;
      font-size: 18px;
      text-align: center;
        & .controls {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          margin: 0 auto;
            & .vote_number_select {
              font-size: 28px;
              padding: 10px 5px;
              text-align: center;
              margin: 0 12px;
            }
        }
        & button {
          background: #dfdfdf;
          border: none;
          cursor: pointer;
          font-size: 24px;
          color: #555;
          padding: 8px 15px 10px 15px;
          line-height: 1em;
            &:hover {
              background-color: #f0f0f0;
            }
        }
        & .input-count {
          width: 40px;
          text-align: center;
          border: none;
          font-size: 22px;
          margin: 0 5px;
          color: #333;
          -webkit-appearance: none;
        }
        & .unit {
          color: #333;
          margin-left: 5px;
      }
    }
}
.my_vote_wrap {
  width: auto;
  background-color: #f3f3f3;
    & .inner {
      padding: 40px 20px;
        & h3 {
          font-size: 20px;
          text-align: center;
          margin: 0 0 20px 0;
        }
        & table {
          width: 95%;
          margin: 0 auto;
          border-collapse: collapse;
            & th {
              padding: 10px;
              border: 1px solid #555;
                &:first-child {
                  width: 45%;
                }
            }
            & td {
              padding: 10px;
              border: 1px solid #555;
              background-color: #fff;
              text-align: right;
                &:first-child {
                  text-align: left;
                }
            }
        }
    }
}
.back_btn {
  width: 70%;
  margin: 30px auto;
  position: relative;
    & a {
        width: 100%;
        height: 100%;
        display: block;
        background-color: var(--theme-buttoncolor);
        color: #fff;
        text-align: center;
        padding: 14px 0;
        border-radius: 30px;
      }
    &::before {
      content: "";
      position: absolute;
      top: 40%;
      left: 20px;
      width: 10px;      /* 矢印の大きさ */
      height: 10px;     /* 矢印の大きさ */
      border-bottom: 1px solid #fff; /* 矢印の線の太さと色 */
      border-left: 1px solid #fff;
      transform: rotate(45deg);   /* 45度回転させて「くの字」にする */
    }
}
.thanks_page {
  & .img_box {
    width: auto;
    padding: 15px;
    box-sizing: border-box;
    width: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.213);
    border-radius: 20px;
    transform: rotate(-2deg);
    margin: 15px 0;
    position: relative;
      & img {
        border-radius: 15px;
      }
      & p {
        position: absolute;
        bottom: -30px;
        text-align: center;
        left: 0;
        right: 0;
        font-size: 30px;
        background-color: #ffb1d3;
        background-image: linear-gradient(0, #ffb1d3, #ffe4f0);
        color: #fff;
        padding: 15px 0;
        width: 70%;
        margin: 0 auto;
        border-radius: 20px;
        text-shadow: 0 0 6px rgba(0, 0, 0, 0.213);
      }
  }
  & .message {
    width: auto;
    border: 1px solid #ff4097;
    padding: 30px;
    border-radius: 20px;
    margin: 90px 0 0 0;
    line-height: 1.5em;
    position: relative;
      & img {
        position: absolute;
        top: -30px;
        left: 20px;
        width: 130px;
      }
  }
  & .keep {
    text-align: center;
    margin: 50px 0 0 0;
  }
}
.law_wrap {
  width: auto;
  padding: 0 20px;
    & dl {
      width: auto;
      display: block;
      border-bottom: 1px solid #dcdcdc;
      padding: 15px 0;
        & dt {
          margin: 0 0 8px 0;
          font-size: 16px;
        }
        & dd {
          font-size: 16px;
        }
    }
}
.policy_wrap {
  width: auto;
  padding: 0 20px;
  line-height: 1.5em;
  font-size: 16px;
  text-align: justify;
    & h3 {
      font-size: 1.1em!important;
      text-align: left!important;
      margin: 0 0 20px 0;
      border-bottom: 1px solid #828282;
      line-height: 2em;
      color: #333;
    }
    & h4 {
      font-size: 1.1em;
      margin: 0 0 20px 0;
    }
    & p {
         margin: 0 0 1em 0;
    }
    & ul {
          margin: 0 0 2em;
            & li {
              margin: 0 0 1em 1em;
              list-style-type: decimal;
              & ul {
                & li {
                  list-style-type: circle;
                }
              }
            }
        }
}
.main_btn {
  width: 85%;
  margin: 0 auto;
  display: block;
    & button {
      padding: 0;
      border: none;
      outline: none;
      font: inherit;
      color: inherit;
      background: none;
      background-color: var(--theme-buttoncolor);
      color: #fff;
      font-size: 1.1em;
      text-align: center;
      padding: 15px 0;
      cursor: pointer;
      border-radius: 40px;
      width: 100%;
    }
    & a {
      background-color: var(--theme-buttoncolor);
      color: #fff;
      font-size: 1.1em;
      text-align: center;
      padding: 15px 0;
      cursor: pointer;
      border-radius: 40px;
      width: 100%;
      display: block;
      height: 100%;
    }
    & .input_btn {
      border: none;
      outline: none;
      background-color: #555;
      color: #fff;
      font-size: 1.1em;
      text-align: center;
      padding: 15px 0;
      cursor: pointer;
      border-radius: 40px;
      width: 100%;
    }
}
.delete_wrap {
  width: auto;
    & .delete_button {
      width: 80%;
      margin: 0 auto;
      & button {
        width: 100%;
        border: none;
        background-color: #656565;
        color: #fff;
        text-align: center;
        padding: 16px 0;
      }
    }
}
.border_wrap {
  padding: 30px 0 0 0;
  border-bottom: 1px solid #cfcfcf;
    &:first-child {
      padding: 0;
    }
}
.candidate_wrap {
  & .participation {
    width: 90%;
    margin: 0 auto 50px auto;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
      & p {
        font-size: 1.1em;
        margin: 0 0 8px 0;
      }
      & span {
        font-size: 0.9em;
      }
      & a {
        width: 60%;
        padding: 16px;
        background-color: var(--theme-buttoncolor);
        color: #fff;
        display: block;
        text-align: center;
        margin: 20px auto 0 auto;
      }
  }
  & .vote_situation {
    width: auto;
    margin: 0 0 30px 0;
      & .vote_table {
        & table {
          width: 100%;
          border-collapse: collapse;
          font-size: 0.9em;
            & th {
              border: 1px solid #828282;
              padding: 4px 10px;
              font-size: 0.9em;
              background-color: #ededed;
            }
            & td {
              border: 1px solid #828282;
              padding: 10px;
              text-align: center;
                &:last-child {
                  text-align: right;
                }
            }
            & tfoot td {
              background-color: #fff4f9;
            }
        }
      }
  }
}
.admin_wrap .admins_list {
  width: auto;
  padding: 20px;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  margin: 0 0 15px 0;
  position: relative;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.045);
    & .id {
      background-color: #efefef;
      display: inline-block;
      padding: 3px 15px;
      font-size: 0.9em;
      border-radius: 5px;
      margin: 0 0 10px 0;
    }
    & .name {
      font-size: 1.2em;
    }
    & .email {
      font-size: 0.9em;
      padding: 3px 0 10px 0;
      border-bottom: 1px solid #eeeeee;
    }
    & .approved {
      font-size: 0.9em;
      padding: 10px 0;
      color: #828282;
    }
    & ul{
        width: 70%;
        margin: 10px auto 0 auto;
        display: flex;
        text-align: center;
        justify-content: space-between;
          &::after {
            display: none;
          }
          & li {
            width: 45%;
            & button {
              padding: 10px;
              width: 100%;
              box-sizing: border-box;
            }
          }
    }
    & .status {
      width: auto;
      position: absolute;
      top: 20px;
      right: 14px;
      text-align: center;
      font-size: 0.9em;
        & .badge-deleted {
          width: 100%;
          box-sizing: border-box;
          background-color: #dfdfdf;
          padding: 3px 12px;
          border-radius: 20px;
        }
        & .badge-approved {
          width: 100%;
          box-sizing: border-box;
          background-color: #b3ebff;
          color: #005270;
          padding: 3px 12px;
          border-radius: 20px;
        }
        & .badge-pending {
          width: 100%;
          box-sizing: border-box;
          background-color: #ffc4c4;
          color: #7c0000;
          padding: 3px 12px;
          border-radius: 20px;
        }
    }
}
footer {
  width: auto;
  padding: 10px;
  & .logo {
    width: 60px;
    margin: 20px auto;
  }
  & .copy {
    text-align: center;
    font-size: 12px;
  }
  & ul {
    margin: 30px 0;
    text-align: center;
      & li {
        display: block;
        margin: 20px 0;
      }
  }
}
.mg_updwon {
  margin: 30px auto;
}
@media (min-width: 660px) {
  main {
    width: 400px;
    padding: 90px 0 40px 0;
    margin: 0 auto;
  }
  header {
    width: 400px;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
  }
}

/* =============================================
   利用規約・特定商取引法ページ共通
   ============================================= */
.static-page-wrap {
  /* TODO: デザイナーが実装 */
}

/* 特定商取引法テーブル */
.transaction-table {
  /* TODO: デザイナーが実装 */
}