@charset "UTF-8";
html {
  height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  margin: 0;
  height: 100%; }

h1 {
  color: #404040;
  font-size: 1.733rem;
  font-weight: bold;
  padding-bottom: 20px;
  margin: 0; }

@media screen and (max-width: 768px) {
  h1 {
    font-size: 1rem;
    padding-bottom: 18px; } }

h2 {
  color: #404040;
  font-size: 1.733rem;
  font-weight: bold;
  padding-bottom: 20px;
  line-height: 1.5;
  margin: 0; }

@media screen and (max-width: 768px) {
  h2 {
    font-size: 18px;
    padding-bottom: 18px; } }

h3 {
  color: #303030;
  font-size: 1.067rem;
  font-weight: bold;
  padding: 28px 0 4px 0;
  line-height: 1.5;
  margin: 0; }

@media screen and (max-width: 768px) {
  h3 {
    font-size: 1rem;
    padding: initial; } }

p {
  color: #606060;
  font-size: 14px;
  line-height: 1.75;
  margin: 0; }

@media screen and (max-width: 768px) {
  p {
    font-size: 12px; } }

a {
  text-decoration: none;
  display: inline-block;
  vertical-align: top;
  color: #1f44b1;
  font-size: 1rem;
  line-height: 1.5;
  padding: 2px 0 2px 25px;
  position: relative;
  transition: opacity 0.3s ease;
  font-size: 14px; }

a:before {
  background: url(assets/arrow_right.png) no-repeat;
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 0;
  margin: -10px 0 0 0;
  background-size: 100%; }

a.no-icon {
  padding: 0; }

a.no-icon:before {
  display: none; }

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 470px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  background: #fff;
  border: #dcdcdc 1px solid;
  border-radius: 4px;
  padding: 0 12px;
  margin: 0 15px 0 0;
  color: #303030;
  font-size: 1rem;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  input[type="text"]:read-only,
  input[type="email"]:read-only,
  input[type="password"]:read-only {
    color: #606060;
    background-color: #f9f9f9; }

@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"] {
    width: 100%;
    height: 45px;
    max-width: 100%;
    padding: 0 6px;
    margin: 0;
    border-radius: 2px; } }

input[type="checkbox"] {
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  position: absolute; }
  input[type="checkbox"] + span {
    display: inline-block;
    vertical-align: middle;
    color: #505050;
    font-size: 16px;
    line-height: 1.5;
    padding: 2px 0 2px 32px;
    position: relative;
    -moz-user-select: no; }
    input[type="checkbox"] + span:before {
      background: #fff;
      border: #dcdcdc 1px solid;
      z-index: 0;
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      width: 20px;
      height: 20px;
      left: 0;
      margin: -10px 0 0 0; }
  input[type="checkbox"]:checked + span:before {
    background: url(assets/checkbox_checked.png) no-repeat;
    opacity: 1;
    background-position: 1.5px;
    background-size: 14px; }

@media screen and (max-width: 768px) {
  input[type="checkbox"] + span {
    line-height: 1.3;
    padding: 2px 0 2px 24px;
    font-size: 12px; }
    input[type="checkbox"] + span:before {
      width: 16px;
      height: 16px; }
  input[type="checkbox"]:checked + span:before {
    background-size: 10px; } }

select {
  background: url(assets/arrow_select.png) no-repeat right center;
  display: inline-block;
  vertical-align: middle;
  width: 470px;
  height: 42px;
  line-height: 40px;
  padding: 0 31px 0 12px;
  background-size: 31px;
  border: #dcdcdc 1px solid;
  border-radius: 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #303030;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none; }

@media screen and (max-width: 768px) {
  select {
    width: 100%;
    height: 45px; } }

input[type="radio"] {
  display: none; }
  input[type="radio"] + .radioLabel {
    position: relative;
    padding: 0 0 0 42px; }
    input[type="radio"] + .radioLabel:before {
      position: absolute;
      content: "";
      display: block;
      top: 50%;
      left: 25px;
      margin-left: -5px;
      margin-top: -5px;
      width: 8px;
      height: 8px;
      background: #505050;
      border-radius: 50%;
      opacity: 0; }
    input[type="radio"] + .radioLabel:after {
      position: absolute;
      content: "";
      display: block;
      top: 50%;
      left: 15px;
      margin-top: -10px;
      width: 16px;
      height: 16px;
      border: #dcdcdc 1px solid;
      border-radius: 50%; }
  input[type="radio"]:checked + .radioLabel:before {
    opacity: 1; }

.fileLabel {
  width: 130px;
  line-height: 42px;
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  background: #909090;
  border: 0;
  outline: 0;
  border-radius: 4px; }
  .fileLabel .validateError {
    width: 1000px;
    background-color: white;
    display: inline-block;
    text-align: left; }

input[type="file"] {
  display: none; }

span {
  color: #606060; }

@media screen and (max-width: 768px) {
  .fileLabel {
    width: 100%; } }

input[type="submit"] {
  width: 180px;
  height: 42px;
  line-height: 42px;
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  background: #606060;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px; }
  input[type="submit"]:disabled {
    background: #dcdcdc;
    cursor: not-allowed; }

@media screen and (max-width: 768px) {
  input[type="submit"] {
    width: 100%;
    border-radius: 2px; } }

button {
  width: 180px;
  height: 42px;
  line-height: 42px;
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  background: #606060;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 7px; }
  button:disabled {
    background: #dcdcdc;
    cursor: not-allowed; }

@media screen and (max-width: 768px) {
  button {
    width: 100%;
    height: 45px;
    line-height: 45px;
    font-size: 13px; } }

.formLabel {
  display: block;
  color: #505050;
  font-size: 1rem;
  line-height: 1;
  font-weight: bold;
  padding: 0 0 7px 0; }

.formLabel.required:after {
  content: "必須";
  width: 43px;
  height: 17px;
  line-height: 17px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  background: #ff0000;
  color: #fff;
  font-size: 0.867rem;
  font-weight: normal;
  border-radius: 4px;
  margin: 0 0 0 10px; }

@media screen and (max-width: 768px) {
  .formLabel {
    font-size: 12px; }
  .formLabel.required:after {
    width: 32px;
    height: 13px;
    line-height: 13px;
    font-size: 10px;
    border-radius: 2px; } }

.header {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dcdcdc;
  position: sticky;
  background-color: #fff;
  z-index: 10000;
  top: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
  .header a, .header h1 {
    padding: 0; }
    .header a::before, .header h1::before {
      content: none; }
  .header__inner {
    margin: 0 auto;
    color: #303030;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
  .header .header__logo {
    font-size: inherit;
    margin: 0; }
    .header .header__logo__link {
      display: block;
      height: 100%; }
    .header .header__logo .headerLogoImage {
      vertical-align: baseline;
      width: auto;
      height: 100%; }
  .header .left_col {
    height: 100%;
    height: 64px;
    display: flex;
    align-items: center; }
    .header .left_col .header__logo {
      height: 42px; }
    .header .left_col .nav {
      height: 35px;
      margin-left: 20px; }
      .header .left_col .nav__list {
        width: 100%;
        list-style: none;
        display: flex;
        justify-content: space-around;
        margin: 0;
        padding: 0; }
        .header .left_col .nav__list__item {
          margin-left: 20px;
          height: 32px;
          position: relative;
          display: inline-flex; }
          .header .left_col .nav__list__item .list__item--target {
            width: auto;
            height: 100%;
            margin: 0;
            display: flex;
            align-items: center;
            cursor: pointer;
            color: #303030;
            font-size: 14px;
            line-height: 1.35;
            height: 20px; }
          .header .left_col .nav__list__item .list__item--second-level {
            list-style: none;
            position: absolute;
            display: flex;
            flex-wrap: wrap;
            padding: 20px 30px;
            visibility: hidden;
            background-color: #fff;
            opacity: 0;
            top: 0;
            width: 150px;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
          .header .left_col .nav__list__item .open {
            visibility: visible;
            opacity: 1;
            z-index: 100;
            top: 35px; }
        .header .left_col .nav__list .list__item {
          width: 100%;
          height: 35px;
          background-color: #fff;
          color: #303030; }
          .header .left_col .nav__list .list__item__link {
            padding: 7px 0px;
            color: #303030;
            font-size: 14px;
            line-height: 1.35;
            width: 100%;
            display: inline-block; }
            .header .left_col .nav__list .list__item__link:hover {
              color: #1f44b1; }
          .header .left_col .nav__list .list__item__category-name {
            margin: 0;
            color: #303030;
            font-size: 16px;
            font-weight: bold;
            background: url(assets/nav_arrow.png) no-repeat;
            padding-right: 22px;
            background-position: right center;
            background-size: 20px;
            transition: 0.2s; }
            .header .left_col .nav__list .list__item__category-name:hover {
              opacity: 0.7; }
          .header .left_col .nav__list .list__item__no-arrow-category-name {
            margin: 0;
            color: #303030;
            font-size: 16px;
            font-weight: bold;
            background-position: right center;
            background-size: 20px;
            transition: 0.2s;
            cursor: pointer; }
            .header .left_col .nav__list .list__item__no-arrow-category-name:hover {
              opacity: 0.7; }
          .header .left_col .nav__list .list__item__image {
            width: 20px;
            height: 20px; }
  .header .right_col--PC {
    height: 64px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end; }
    .header .right_col--PC .link {
      height: 22px; }
      .header .right_col--PC .link__text {
        color: #1f44b1;
        font-size: 14px;
        line-height: 1.35;
        padding: 2px 0px 2px 25px;
        background: url(assets/arrow_right.png) no-repeat;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 20px; }
    .header .right_col--PC .header__logo {
      height: 22px; }
  .header .right_col--SP {
    height: 45px;
    width: 78px;
    margin-left: auto;
    justify-content: space-between;
    align-items: center;
    display: none; }
    .header .right_col--SP .nav {
      height: 35px; }
      .header .right_col--SP .nav__list {
        width: 100%;
        list-style: none;
        display: flex;
        justify-content: space-around;
        margin: 0;
        padding: 0; }
        .header .right_col--SP .nav__list__item {
          height: 32px;
          position: relative;
          display: inline-flex; }
          .header .right_col--SP .nav__list__item .list__item--target {
            width: auto;
            height: 100%;
            margin: 0;
            display: flex;
            align-items: center;
            cursor: pointer;
            color: #303030;
            font-size: 14px;
            line-height: 1.35;
            height: 20px; }
          .header .right_col--SP .nav__list__item .list__item--second-level {
            list-style: none;
            position: fixed;
            right: 0;
            display: flex;
            flex-wrap: wrap;
            visibility: hidden;
            background-color: #fff;
            opacity: 0;
            top: 0;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
            .header .right_col--SP .nav__list__item .list__item--second-level__icon_menu {
              padding: 14px 31px 11px;
              width: 138px; }
            .header .right_col--SP .nav__list__item .list__item--second-level__sp_user {
              padding: 1px 7px;
              width: 170px; }
          .header .right_col--SP .nav__list__item .open {
            visibility: visible;
            opacity: 1;
            z-index: 100;
            top: 53px;
            position: fixed;
            right: 0; }
          .header .right_col--SP .nav__list__item .open.icon_menu::before {
            content: "";
            position: absolute;
            top: -14px;
            left: 50%;
            margin-left: 52px;
            border: 7px solid transparent;
            border-bottom: 8px solid #fff;
            filter: drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.06)); }
          .header .right_col--SP .nav__list__item .open.sp_user::before {
            content: "";
            position: absolute;
            top: -16px;
            left: 50%;
            margin-left: 45px;
            border: 8px solid transparent;
            border-bottom: 8px solid #fff;
            filter: drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.06)); }
        .header .right_col--SP .nav__list .list__item {
          width: 100%;
          height: 40px;
          background-color: #fff;
          color: #303030; }
          .header .right_col--SP .nav__list .list__item__link {
            padding: 7px 0px;
            color: #303030;
            font-size: 14px;
            line-height: 1.35;
            width: 100%;
            display: inline-block;
            padding-left: 4px; }
            .header .right_col--SP .nav__list .list__item__link:hover {
              color: #1f44b1; }
          .header .right_col--SP .nav__list .list__item__category-name {
            margin: 0 0 3px;
            color: #303030;
            font-size: 16px;
            font-weight: bold;
            background-position: right center;
            background-size: 20px; }
            .header .right_col--SP .nav__list .list__item__category-name__after-second {
              border-top: 1px solid;
              border-color: #cbcbcb;
              width: calc(100% + 200px);
              padding-top: 14px;
              margin: 6px -32px 3px;
              text-indent: 32px; }
              .header .right_col--SP .nav__list .list__item__category-name__after-second__link {
                color: #303030;
                text-indent: initial;
                margin: 2px 0; }
                .header .right_col--SP .nav__list .list__item__category-name__after-second__link:hover {
                  color: #1f44b1; }
          .header .right_col--SP .nav__list .list__item__image {
            width: 20px;
            height: 20px; }
    .header .right_col--SP .icon__menu-size {
      width: 32px;
      height: 32px;
      margin: 6px 0; }
    .header .right_col--SP .user__icon-size {
      width: 32px;
      height: 32px; }
    .header .right_col--SP .login_link {
      margin: 0;
      height: 32px;
      text-align: end; }
      .header .right_col--SP .login_link .loginLinkImage {
        width: 32px;
        height: 100%; }
  .header .not-logined {
    display: flex;
    justify-content: space-between;
    width: 250px;
    margin: 0 20px; }
    .header .not-logined__button {
      border-radius: 4px;
      width: 118px;
      height: 30px;
      text-align: center;
      font-size: 13px;
      line-height: 30px;
      font-weight: 400; }
    .header .not-logined .login_button {
      color: #fff;
      background-color: #1f44b1;
      border: 1px solid #1f44b1; }
    .header .not-logined .new_member_button {
      color: #666;
      background-color: #fff;
      border: 1px solid #e9e9e9; }

@media screen and (max-width: 768px) {
  .header {
    height: 46px;
    width: 100%; }
    .header__inner {
      padding: 0 10px; }
      .header__inner .left_col {
        height: 45px; }
        .header__inner .left_col .header__logo {
          height: 32px; }
        .header__inner .left_col .nav {
          height: 32px;
          display: none; }
      .header__inner .right_col--PC {
        display: none; }
      .header__inner .right_col--SP {
        display: flex; }
        .header__inner .right_col--SP .nav {
          height: 32px;
          display: flex; } }

.user-front-footer {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #333;
  padding: 0 0 50px 0;
  position: relative;
  z-index: 99; }
  .user-front-footer a {
    padding: 0; }
    .user-front-footer a::before {
      content: none; }
  .user-front-footer .footer-inner-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto; }
    .user-front-footer .footer-inner-wrapper .menu-wrapper {
      padding: 40px 0 0 0; }
      .user-front-footer .footer-inner-wrapper .menu-wrapper .footer-nav-menu {
        text-align: center;
        padding: 0 80px;
        list-style: none;
        margin-top: 0;
        margin-bottom: 1rem;
        margin: 0; }
        .user-front-footer .footer-inner-wrapper .menu-wrapper .footer-nav-menu .nav-part {
          display: inline-block;
          vertical-align: top;
          padding: 7px 0;
          margin: 0 40px 0 0; }
          .user-front-footer .footer-inner-wrapper .menu-wrapper .footer-nav-menu .nav-part .footer-link {
            font-size: 14px;
            color: #ddd;
            line-height: 1.35;
            opacity: 1;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            text-decoration: none; }
            .user-front-footer .footer-inner-wrapper .menu-wrapper .footer-nav-menu .nav-part .footer-link:hover {
              opacity: 0.75; }
        .user-front-footer .footer-inner-wrapper .menu-wrapper .footer-nav-menu .only-sp-nav-part {
          display: none; }
    .user-front-footer .footer-inner-wrapper .bottom-wrapper {
      padding: 35px 0 0 0; }
      .user-front-footer .footer-inner-wrapper .bottom-wrapper .copy-right {
        margin: 0;
        font-size: 0.933rem;
        color: #ddd;
        line-height: 1.35;
        text-align: center; }

@media screen and (max-width: 768px) {
  .user-front-footer {
    margin-top: 25px;
    padding: 0 0 45px 0; }
    .user-front-footer .footer-inner-wrapper {
      max-width: none; }
      .user-front-footer .footer-inner-wrapper .menu-wrapper {
        padding: 20px 0 0 0; }
        .user-front-footer .footer-inner-wrapper .menu-wrapper .footer-nav-menu {
          text-align: left;
          padding: 0; }
          .user-front-footer .footer-inner-wrapper .menu-wrapper .footer-nav-menu .nav-part {
            display: block;
            vertical-align: top;
            padding: 0;
            margin: 0; }
            .user-front-footer .footer-inner-wrapper .menu-wrapper .footer-nav-menu .nav-part .footer-link {
              display: block;
              font-size: 12px;
              line-height: 1.3;
              padding: 8px 20px; }
          .user-front-footer .footer-inner-wrapper .menu-wrapper .footer-nav-menu .only-sp-nav-part {
            display: block; }
      .user-front-footer .footer-inner-wrapper .bottom-wrapper .copy-right {
        font-size: 12px;
        line-height: 1.3; } }

.tmpSignup {
  max-width: 1000px;
  min-height: 480px;
  padding: 0 20px;
  margin: 42px auto 32px auto;
  min-height: calc(100% - 65px - 74px - 104px); }

.tmpSignupDiscription .discriptionWrapper {
  padding: 0 10px;
  margin-bottom: 20px; }

.tmpSignupForm .validateError p {
  color: red; }

.tmpSignupWrapper {
  width: 960px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden; }
  .tmpSignupWrapper label {
    display: block;
    font-size: 14px;
    line-height: 3.29;
    letter-spacing: normal;
    color: #333333; }
  .tmpSignupWrapper .emailSignupViewButton {
    display: none; }
  .tmpSignupWrapper .tmpSignupInnerWrapper {
    width: 400px;
    padding: 30px 0; }
  .tmpSignupWrapper .emailSignupWrapper {
    max-height: 455px;
    padding-right: 30px;
    display: flex;
    flex-direction: column; }
    .tmpSignupWrapper .emailSignupWrapper input[type="text"] {
      width: 100%; }
    .tmpSignupWrapper .emailSignupWrapper .tmpSignupForm {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 180px;
      margin-bottom: 10px; }
      .tmpSignupWrapper .emailSignupWrapper .tmpSignupForm .formPartWrapper {
        width: 100%;
        margin: 0; }
    .tmpSignupWrapper .emailSignupWrapper .tmpSignupAlert {
      margin-top: auto;
      border-top: #dcdcdc 1px solid; }
      .tmpSignupWrapper .emailSignupWrapper .tmpSignupAlert .alert-list {
        padding-left: 20px; }
        .tmpSignupWrapper .emailSignupWrapper .tmpSignupAlert .alert-list .list-item {
          color: #606060;
          font-size: 14px;
          line-height: 1.75;
          margin: 0; }
        .tmpSignupWrapper .emailSignupWrapper .tmpSignupAlert .alert-list .only-list-item {
          font-weight: bold; }
        .tmpSignupWrapper .emailSignupWrapper .tmpSignupAlert .alert-list a {
          padding: 0;
          color: #009ea8;
          text-decoration: underline; }
          .tmpSignupWrapper .emailSignupWrapper .tmpSignupAlert .alert-list a::before {
            content: none; }
  .tmpSignupWrapper .snsLinkageWrapper {
    padding-left: 30px;
    border-left: #dcdcdc 1px solid; }
    .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithApple {
      width: 100%;
      height: 60px;
      background: none;
      margin-bottom: 20px;
      padding: 0; }
    .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithApple > div {
      position: relative;
      border: none;
      outline: none;
      max-width: 100% !important; }
      .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithApple > div:before {
        background: url(assets/apple.png) no-repeat;
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        background-size: contain;
        background-position: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-left: -65px; }
      .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithApple > div:after {
        content: "Sign in with Apple";
        display: inline-block;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 15px;
        margin-left: 11px;
        letter-spacing: -0.05em; }
    .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithApple text {
      font-size: 0; }
    .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithLine {
      width: 100%;
      height: 60px;
      position: relative;
      background-color: #00c300;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.2;
      letter-spacing: normal;
      color: #ffffff;
      margin-bottom: 20px; }
      .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithLine:before {
        background: url(assets/line.png) no-repeat;
        content: "";
        display: inline-block;
        width: 60px;
        height: 60px;
        background-size: 50% 50%;
        background-position: center;
        vertical-align: middle;
        position: absolute;
        top: 0;
        left: 0;
        border-right: #00b900 1px solid; }
    .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithGoogle {
      width: 100%;
      height: 60px;
      position: relative;
      background-color: #ffffff;
      font-family: 'Roboto', sans-serif;
      color: rgba(0, 0, 0, 0.54);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
      margin-bottom: 20px; }
      .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithGoogle:before {
        background: url(assets/google.png) no-repeat;
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        background-size: contain;
        background-position: center;
        position: absolute;
        top: 50%;
        left: 48%;
        transform: translate(-50%, -50%);
        margin-left: -100px; }
    .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithFacebook {
      width: 100%;
      height: 60px;
      position: relative;
      background-color: #1877F2; }
      .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithFacebook:before {
        background: url(assets/facebook.png) no-repeat;
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        background-size: contain;
        background-position: 50%;
        position: absolute;
        top: 50%;
        left: 45%;
        transform: translate(-50%, -50%);
        margin-left: -100px; }

@media screen and (max-width: 768px) {
  .tmpSignup {
    max-width: 100%;
    padding: 0 20px; } }
  @media screen and (max-width: 768px) and (max-width: 768px) {
    .tmpSignup {
      max-width: 100%;
      min-height: 0;
      margin: 22px 0 32px 0; } }

@media screen and (max-width: 768px) {
    .tmpSignup p {
      font-size: 14px; }
  .tmpSignup {
    min-height: calc(100% - 47px - 54px - 95px); }
  .tmpSignupDiscription .discriptionWrapper {
    line-height: 1.65;
    padding: 0; }
  .buttonWrapper button {
    font-size: 16px; }
  .tmpSignupAlert {
    padding: initial;
    font-size: 1.083em;
    padding-left: 20px;
    padding-right: 20px; }
  .tmpSignupWrapper {
    width: 100%; }
    .tmpSignupWrapper .emailSignupViewButton {
      font-size: 16px;
      display: block;
      position: relative;
      height: 45px;
      background-color: #fff;
      color: #666;
      border: #e9e9e9 1px solid; }
      .tmpSignupWrapper .emailSignupViewButton::after {
        position: absolute;
        content: "";
        width: 10px;
        height: 10px;
        border-right: 1px solid #666;
        border-bottom: 1px solid #666;
        top: 50%;
        right: 10px;
        transform: translate(0, -7px) rotate(45deg);
        transition: 0.2s ease-in-out; }
      .tmpSignupWrapper .emailSignupViewButton.clicked::after {
        transform: translate(0, -3px) rotate(-135deg); }
    .tmpSignupWrapper .tmpSignupForm {
      width: 100%; }
    .tmpSignupWrapper .emailSignupWrapper {
      visibility: visible;
      max-height: 470px;
      transition: max-height .2s ease-in-out, visibility  .1s linear; }
      .tmpSignupWrapper .emailSignupWrapper .buttonWrapper {
        width: 100%;
        margin-top: 15px; }
      .tmpSignupWrapper .emailSignupWrapper .tmpSignupAlert {
        margin-top: 10px;
        padding: 20px 0;
        height: 220px;
        border-bottom: #dcdcdc 1px solid; }
        .tmpSignupWrapper .emailSignupWrapper .tmpSignupAlert .alert-list .only-list-item {
          margin-top: 10px; }
    .tmpSignupWrapper .discriptionWrapper {
      width: 100%;
      text-align: center; }
    .tmpSignupWrapper .tmpSignupInnerWrapper {
      width: 100%;
      padding: 0;
      margin-top: 10px; }
    .tmpSignupWrapper .snsLinkageWrapper {
      margin-top: 20px;
      border-left: none; }
      .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithLine:before {
        width: 50px;
        height: 50px; }
      .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithApple,
      .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithLine {
        font-size: 16px;
        height: 50px; }
      .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithGoogle {
        width: 99%;
        margin-left: 1.5px;
        font-size: 16px;
        height: 50px; }
        .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithGoogle:before {
          width: 35px;
          height: 35px; }
      .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithFacebook {
        font-size: 16px;
        height: 50px; }
        .tmpSignupWrapper .snsLinkageWrapper .snsLinkageWithFacebook:before {
          width: 35px;
          height: 35px; }
    .tmpSignupWrapper .hiddenOnlySp {
      visibility: hidden;
      max-height: 0; } }

.signupWrapper {
  max-width: 1000px;
  min-height: 480px;
  padding: 0 20px;
  margin: 42px auto 32px auto; }
  .signupWrapper .signupInner {
    padding: 0 20px; }
  .signupWrapper .validateError {
    display: block;
    color: red;
    font-size: 12px; }
    .signupWrapper .validateErrorForSnsLinkage > p {
      color: red;
      font-size: 20px; }
      .signupWrapper .validateErrorForSnsLinkage > p a {
        color: #009ea8;
        font-weight: bold;
        vertical-align: initial;
        text-decoration: underline;
        padding: 0 5px 0 0;
        font-size: 18px; }
        .signupWrapper .validateErrorForSnsLinkage > p a::before {
          content: none; }
  .signupWrapper .formPartWrapper {
    margin-top: 20px; }
    .signupWrapper .formPartWrapper .passwordWrapper {
      display: flex;
      flex-wrap: wrap; }
      .signupWrapper .formPartWrapper .passwordWrapper p {
        font-size: 14px;
        margin: 0;
        padding-bottom: 5px;
        line-height: 2.7; }
      .signupWrapper .formPartWrapper .passwordWrapper .validateError {
        width: 100%; }
    .signupWrapper .formPartWrapper .formLabel {
      margin: 10px 0 0 0; }
    .signupWrapper .formPartWrapper .password {
      margin-bottom: 10px; }
    .signupWrapper .formPartWrapper span {
      color: #606060; }
    .signupWrapper .formPartWrapper .nameForm {
      display: flex;
      width: 100%; }
      .signupWrapper .formPartWrapper .nameForm .nameWrapper {
        display: block; }
      .signupWrapper .formPartWrapper .nameForm input {
        width: 202px; }
    .signupWrapper .formPartWrapper .birthWrapper {
      display: flex;
      color: #505050; }
      .signupWrapper .formPartWrapper .birthWrapper label {
        padding: 10px;
        line-height: 2.7; }
    .signupWrapper .formPartWrapper .birthComboBox {
      width: 122px; }
    .signupWrapper .formPartWrapper .collegeGradeComboBox {
      width: 84px; }
    .signupWrapper .formPartWrapper .caution {
      color: red; }
    .signupWrapper .formPartWrapper .radioWrapper {
      display: flex; }
      .signupWrapper .formPartWrapper .radioWrapper .radioSelectWrapper {
        margin-left: -15px;
        margin-right: 15px;
        color: #505050; }
    .signupWrapper .formPartWrapper .fileLabel span {
      color: #ffffff; }
  .signupWrapper .qualificationCheckboxWrapper {
    display: flex;
    flex-wrap: wrap; }
    .signupWrapper .qualificationCheckboxWrapper label {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      width: 18%;
      padding-right: 10px; }
  .signupWrapper .gradeWrapper {
    display: flex; }
  .signupWrapper .policyLinkWrapper {
    text-align: center;
    padding-top: 24px;
    padding-bottom: 20px; }
    .signupWrapper .policyLinkWrapper a {
      padding-right: 30px; }
  .signupWrapper .agreementWrapper {
    text-align: center; }
  .signupWrapper .buttonWrapper {
    margin-top: 32px;
    text-align: center; }
  .signupWrapper .gradePartWrapper label {
    padding: 10px;
    line-height: 3;
    color: #505050;
    font-weight: bold; }
  .signupWrapper .fileLabel .validateError {
    display: inline-block;
    font-weight: normal; }
  .signupWrapper .cautionMessage {
    position: absolute;
    padding-left: 20px;
    padding-top: 10px; }
  .signupWrapper .lastPart {
    padding-bottom: 10px; }
  .signupWrapper select:disabled {
    background-color: #909090; }
  .signupWrapper .label-with-help {
    display: flex;
    align-items: center; }
  .signupWrapper .help-mark {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background-color: #0066ff;
    color: white !important;
    border-radius: 50%;
    font-size: 12px;
    cursor: help;
    margin-left: 4px;
    position: relative;
    vertical-align: middle;
    flex-shrink: 0; }
    .signupWrapper .help-mark::after {
      content: attr(data-tooltip);
      position: absolute;
      top: 50%;
      left: calc(100% + 8px);
      transform: translateY(-50%);
      padding: 8px 12px;
      background-color: #333;
      color: #fff;
      font-size: 12px;
      font-weight: normal;
      line-height: 1.4;
      white-space: normal;
      width: 300px;
      max-width: calc(100vw - 100px);
      box-sizing: border-box;
      border-radius: 4px;
      text-align: left;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
      z-index: 1000;
      pointer-events: none; }
    .signupWrapper .help-mark::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
      margin-left: 2px;
      border: 6px solid transparent;
      border-right-color: #333;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
      z-index: 1000; }
    .signupWrapper .help-mark:hover::after, .signupWrapper .help-mark:hover::before {
      opacity: 1;
      visibility: visible; }

@media screen and (max-width: 768px) {
  .signupWrapper {
    font-size: 12px; } }
  @media screen and (max-width: 768px) and (max-width: 768px) {
    .signupWrapper {
      max-width: 100%;
      min-height: 0;
      margin: 22px 0 32px 0; } }

@media screen and (max-width: 768px) {
    .signupWrapper .signupInner .formPartWrapper .nameForm .nameWrapper {
      padding-right: 5px; }
    .signupWrapper .signupInner .formPartWrapper .nameForm input {
      width: 100%; }
    .signupWrapper .signupInner .formPartWrapper .nameForm .validateError {
      margin-right: 5px; }
    .signupWrapper .signupInner .formPartWrapper .birthComboBox {
      width: 100%; }
    .signupWrapper .signupInner .formPartWrapper .qualificationCheckboxWrapper label {
      width: 40%;
      font-size: 12px; }
    .signupWrapper .signupInner .policyLinkWrapper a {
      font-size: 12px; }
    .signupWrapper .signupInner .cautionMessage {
      position: initial;
      padding-left: 0;
      padding-top: 0; }
    .signupWrapper .help-mark {
      width: 16px;
      height: 16px;
      line-height: 16px;
      font-size: 11px; }
      .signupWrapper .help-mark::after {
        width: 220px;
        max-width: calc(100vw - 60px);
        font-size: 11px;
        padding: 6px 10px; } }

.login {
  max-width: 1000px;
  min-height: 480px;
  padding: 0 20px;
  margin: 42px auto 32px auto;
  min-height: calc(100% - 65px - 74px - 104px); }

.logo.loginHeader {
  height: 65px;
  background-position: 5%;
  border-bottom: 1px solid;
  background-size: 150px;
  border-bottom: solid 1px #dcdcdc; }

.annualUpdateConfirmationWrapper {
  margin-top: 20px;
  margin-bottom: 40px;
  padding: 20px;
  border: 2px solid #ff0000; }
  .annualUpdateConfirmationWrapper a {
    padding: 0;
    color: #009ea8;
    text-decoration: underline; }
    .annualUpdateConfirmationWrapper a:before {
      display: none; }
  .annualUpdateConfirmationWrapper p {
    font-size: 14px;
    color: #ff0000; }

.loginWrapper {
  display: flex; }
  .loginWrapper a {
    padding: 0;
    color: #009ea8;
    padding-top: 20px;
    text-decoration: underline; }
    .loginWrapper a:before {
      display: none; }
  .loginWrapper .emailLoginViewButton {
    display: none; }
  .loginWrapper .loginForm {
    visibility: visible;
    max-height: 520px;
    transition: max-height 0.2s ease-in-out, visibility 0.1s linear; }
  .loginWrapper .loginInnerWrapper {
    display: block; }
    .loginWrapper .loginInnerWrapper label {
      display: block;
      font-size: 14px;
      line-height: 3.29;
      letter-spacing: normal;
      color: #333333; }
    .loginWrapper .loginInnerWrapper input[type="text"],
    .loginWrapper .loginInnerWrapper [type="password"] {
      width: 400px;
      margin: 0; }
    .loginWrapper .loginInnerWrapper .passwordWrapper {
      width: 400px;
      position: relative; }
    .loginWrapper .loginInnerWrapper .passwordEye {
      background: url(assets/password_invisible.png) no-repeat;
      background: url(assets/password_visible.png) no-repeat;
      width: 21px;
      height: 18px;
      position: absolute;
      background-position: center;
      background-repeat: no-repeat;
      padding: 12px 0 12px 0;
      display: inline;
      background: none;
      right: 15px;
      top: 0; }
    .loginWrapper .loginInnerWrapper .checkboxWrapper {
      padding-bottom: 20px; }
      .loginWrapper .loginInnerWrapper .checkboxWrapper label span {
        font-size: 14px; }
    .loginWrapper .loginInnerWrapper .loginButton {
      width: 400px;
      height: 60px;
      font-size: 16px;
      background-color: #1f44b1; }
    .loginWrapper .loginInnerWrapper .loginErrorBox {
      width: 400px; }
      .loginWrapper .loginInnerWrapper .loginErrorBox p {
        color: red;
        line-height: 2.7; }
  .loginWrapper .emailLoginWrapper {
    padding: 30px 30px 30px 0px; }
  .loginWrapper .socialLoginWrapper {
    width: 375px;
    padding: 30px 0px 30px 30px;
    border-left: #dcdcdc 1px solid; }
    .loginWrapper .socialLoginWrapper button {
      width: 100%;
      height: 60px;
      font-size: 16px; }
    .loginWrapper .socialLoginWrapper .signInWithApple {
      background: none;
      margin-bottom: 20px;
      padding: 0; }
    .loginWrapper .socialLoginWrapper .signInWithApple > div {
      position: relative;
      border: none;
      outline: none;
      max-width: 100% !important; }
      .loginWrapper .socialLoginWrapper .signInWithApple > div:before {
        background: url(assets/apple.png) no-repeat;
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        background-size: contain;
        background-position: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-left: -65px; }
      .loginWrapper .socialLoginWrapper .signInWithApple > div:after {
        content: "Sign in with Apple";
        display: inline-block;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 15px;
        margin-left: 11px;
        letter-spacing: -0.05em; }
    .loginWrapper .socialLoginWrapper .signInWithApple text {
      font-size: 0; }
    .loginWrapper .socialLoginWrapper .signInWithLine {
      position: relative;
      background-color: #00c300;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      font-size: 15px;
      line-height: 1.2;
      letter-spacing: normal;
      color: #ffffff;
      margin-bottom: 20px; }
      .loginWrapper .socialLoginWrapper .signInWithLine:before {
        background: url(assets/line.png) no-repeat;
        content: "";
        display: inline-block;
        width: 60px;
        height: 60px;
        background-size: 50% 50%;
        background-position: center;
        vertical-align: middle;
        position: absolute;
        top: 0;
        left: 0;
        border-right: #00b900 1px solid; }
    .loginWrapper .socialLoginWrapper .signInWithGoogle {
      position: relative;
      background-color: #ffffff;
      font-family: 'Roboto', sans-serif;
      color: rgba(0, 0, 0, 0.54);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
      margin-bottom: 20px; }
      .loginWrapper .socialLoginWrapper .signInWithGoogle:before {
        background: url(assets/google.png) no-repeat;
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        background-size: contain;
        background-position: center;
        position: absolute;
        top: 50%;
        left: 48%;
        transform: translate(-50%, -50%);
        margin-left: -100px; }
    .loginWrapper .socialLoginWrapper .signInWithFacebook {
      position: relative;
      background-color: #1877F2; }
      .loginWrapper .socialLoginWrapper .signInWithFacebook:before {
        background: url(assets/facebook.png) no-repeat;
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        background-size: contain;
        background-position: 50%;
        position: absolute;
        top: 50%;
        left: 45%;
        transform: translate(-50%, -50%);
        margin-left: -100px; }
  .loginWrapper .createAccountLinkWrapper {
    margin-top: 30px; }
    .loginWrapper .createAccountLinkWrapper .createAccountTitle,
    .loginWrapper .createAccountLinkWrapper .createAccountLinkButton {
      display: none; }

@media screen and (max-width: 768px) {
  .annualUpdateConfirmationWrapper {
    padding: 10px; }
  .logo.loginHeader {
    background-size: 50%; }
  .login {
    min-height: calc(100% - 47px - 54px - 95px); } }
  @media screen and (max-width: 768px) and (max-width: 768px) {
    .login {
      max-width: 100%;
      min-height: 0;
      margin: 22px 0 32px 0; } }

@media screen and (max-width: 768px) {
  .login {
    min-height: calc(100% - 47px - 54px - 95px); }
  .loginWrapper {
    display: block; }
    .loginWrapper .loginButton {
      width: 100%;
      height: 50px; }
    .loginWrapper .hiddenOnlySp {
      visibility: hidden;
      max-height: 0; }
    .loginWrapper .emailLoginViewButton {
      display: block;
      position: relative;
      background-color: #fff;
      color: #666;
      border: #e9e9e9 1px solid;
      font-size: 16px; }
      .loginWrapper .emailLoginViewButton::after {
        position: absolute;
        content: "";
        width: 10px;
        height: 10px;
        border-right: 1px solid #666;
        border-bottom: 1px solid #666;
        top: 50%;
        right: 10px;
        transform: translate(0, -7px) rotate(45deg);
        transition: 0.2s ease-in-out; }
    .loginWrapper .emailLoginViewButton.clicked::after {
      transform: translate(0, -3px) rotate(-135deg); }
    .loginWrapper .loginInnerWrapper input[type="text"],
    .loginWrapper .loginInnerWrapper [type="password"] {
      width: 100%; }
    .loginWrapper .loginInnerWrapper .checkboxWrapper {
      padding-top: 30px;
      padding-bottom: 3px; }
    .loginWrapper .loginInnerWrapper .loginErrorBox {
      width: 100%; }
    .loginWrapper .loginInnerWrapper .passwordWrapper {
      width: 100%; }
      .loginWrapper .loginInnerWrapper .passwordWrapper .passwordEye {
        top: 5%; }
    .loginWrapper .loginInnerWrapper .loginButton {
      width: 100%;
      height: 50px; }
    .loginWrapper .loginInnerWrapper {
      padding: 15px 0px; }
    .loginWrapper .socialLoginWrapper {
      width: auto;
      border-left: none; }
      .loginWrapper .socialLoginWrapper .signInWithLine:before {
        width: 50px;
        height: 50px; }
      .loginWrapper .socialLoginWrapper button {
        width: 100%;
        height: 50px; }
      .loginWrapper .socialLoginWrapper .signInWithApple > div:before {
        margin-left: -70px; }
      .loginWrapper .socialLoginWrapper .signInWithApple > div:after {
        font-size: 16px;
        margin-left: 11px; }
      .loginWrapper .socialLoginWrapper .signInWithLine {
        font-size: 16px; }
      .loginWrapper .socialLoginWrapper .signInWithGoogle {
        font-size: 16px; }
        .loginWrapper .socialLoginWrapper .signInWithGoogle:before {
          width: 35px;
          height: 35px; }
      .loginWrapper .socialLoginWrapper .signInWithFacebook {
        font-size: 16px; }
        .loginWrapper .socialLoginWrapper .signInWithFacebook:before {
          width: 35px;
          height: 35px; }
    .loginWrapper .createAccountLinkWrapper {
      margin-top: 15px; }
      .loginWrapper .createAccountLinkWrapper p {
        font-size: 14px;
        line-height: 3.29;
        letter-spacing: normal;
        color: #333333; }
      .loginWrapper .createAccountLinkWrapper .createAccountTitle {
        display: block; }
      .loginWrapper .createAccountLinkWrapper .createAccountLinkButton {
        width: calc(100% - 2px);
        height: 48px;
        border-radius: 7px;
        font-size: 16px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.2;
        text-decoration: none;
        color: #666;
        border: #e9e9e9 1px solid;
        text-decoration: none; }
    .loginWrapper .createAccountLinkText {
      display: none; } }

.recoveryRequest {
  max-width: 1000px;
  min-height: 480px;
  padding: 0 20px;
  margin: 42px auto 32px auto; }
  .recoveryRequest .recoveryMailFormWrapper label {
    color: #505050;
    margin: 27px 0 0 0;
    display: block;
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: bold; }
  .recoveryRequest .recoveryMailFormWrapper .validateError p {
    color: red; }
  .recoveryRequest .requestDiscription {
    padding: 0 10px;
    padding-bottom: 32px;
    border-bottom: #dcdcdc 1px solid; }
    .recoveryRequest .requestDiscription .sendMailSubject {
      margin-top: 20px; }
  .recoveryRequest .resetButtonWrapper {
    margin: 32px 0 0 0;
    text-align: center; }

@media screen and (max-width: 768px) and (max-width: 768px) {
  .recoveryRequest {
    max-width: 100%;
    min-height: 0;
    margin: 22px 0 32px 0; } }

@media screen and (max-width: 768px) {
  .recoveryRequest .requestDiscription .sendMailSubject {
    margin-top: 18px; } }

.passwordRecovery {
  max-width: 1000px;
  min-height: 480px;
  padding: 0 20px;
  margin: 42px auto 32px auto; }
  .passwordRecovery .recoveryDiscription {
    padding: 0 10px;
    padding-bottom: 32px;
    border-bottom: #dcdcdc 1px solid; }
  .passwordRecovery .passwordRecoveryInputWrapper {
    margin: 27px 0 0 0; }
  .passwordRecovery .inputWrapper {
    padding-bottom: 10px; }
    .passwordRecovery .inputWrapper label {
      color: #505050;
      margin: 27px 0 0 0;
      display: block;
      padding-bottom: 10px;
      font-size: 14px;
      font-weight: bold; }
    .passwordRecovery .inputWrapper p {
      display: inline; }
    .passwordRecovery .inputWrapper .validateError p {
      display: block;
      color: red; }
  .passwordRecovery .submitWrapper {
    margin: 32px 0 0 0;
    text-align: center; }
  .passwordRecovery a {
    display: block; }

@media screen and (max-width: 768px) and (max-width: 768px) {
  .passwordReset {
    max-width: 100%;
    min-height: 0;
    margin: 22px 0 32px 0; } }

.error {
  padding: 0 20px;
  max-width: 960px;
  min-height: 448px;
  margin: 0 auto;
  padding-bottom: 32px; }
  .errorTitle {
    color: #404040;
    font-size: 26px;
    font-weight: bold;
    padding: 42px 0 20px 0; }
  .errorSentence {
    margin-left: 10px;
    margin-bottom: 5px; }
  .error .links {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    margin-top: 22px; }
    .error .linksItem {
      width: 110px;
      font-size: 15px; }
      .error .linksItem:first-child {
        margin-bottom: 7px; }

@media screen and (max-width: 768px) {
  .error {
    padding-bottom: 25px;
    min-height: 173px; }
    .errorTitle {
      font-size: 18px;
      line-height: 21.6px;
      margin-bottom: 8px;
      padding: 22px 0 18px 0; }
    .errorSentence {
      font-size: 12px;
      line-height: 18px;
      margin-left: 0px; }
    .error .links {
      margin-left: 0px;
      margin-top: 17px; }
      .error .linksItem {
        font-size: 12px; } }

.connect {
  max-width: 1000px;
  min-height: 480px;
  padding: 0 20px;
  margin: 42px auto 32px auto; }
  .connect .description {
    padding: 0 10px;
    padding-bottom: 32px;
    border-bottom: #dcdcdc 1px solid; }
  .connect .linkageResultText {
    text-align: center;
    margin: 27px 0 0 0; }
  .connect .backLinkWrapper {
    display: block;
    text-align: center; }
  .connect .backLink {
    padding: 0;
    color: #009ea8;
    padding-top: 20px;
    text-decoration: underline; }
    .connect .backLink:before {
      content: none; }
  .connect .snsLinkageFormWrapper {
    margin: 27px 0 0 0; }
  .connect .snsLinkageForm {
    display: flex;
    justify-content: center; }
  .connect .snsLinkageButton {
    width: 365px;
    height: 60px;
    font-weight: bold;
    font-size: 15px;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #ffffff; }
    .connect .snsLinkageButtonWithApple {
      background: none;
      padding: 0;
      margin-bottom: 20px; }
      .connect .snsLinkageButtonWithApple > div {
        position: relative;
        border: none;
        outline: none;
        max-width: 100% !important; }
        .connect .snsLinkageButtonWithApple > div:before {
          background: url(assets/apple.png) no-repeat;
          content: "";
          display: inline-block;
          width: 18px;
          height: 18px;
          background-size: contain;
          background-position: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin-left: -65px; }
        .connect .snsLinkageButtonWithApple > div:after {
          content: "Sign in with Apple";
          display: inline-block;
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 15px;
          margin-left: 11px;
          letter-spacing: -0.05em; }
      .connect .snsLinkageButtonWithApple text {
        font-size: 0; }
    .connect .snsLinkageButtonWithLine {
      position: relative;
      background-color: #00c300;
      margin-bottom: 20px; }
      .connect .snsLinkageButtonWithLine:before {
        background: url(assets/line.png) no-repeat;
        content: "";
        display: inline-block;
        width: 60px;
        height: 60px;
        background-size: 50% 50%;
        background-position: center;
        vertical-align: middle;
        position: absolute;
        top: 0;
        left: 0;
        border-right: #00b900 1px solid; }
    .connect .snsLinkageButtonWithGoogle {
      position: relative;
      background-color: #ffffff;
      font-family: 'Roboto', sans-serif;
      color: rgba(0, 0, 0, 0.54);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
      margin-bottom: 20px; }
      .connect .snsLinkageButtonWithGoogle:before {
        background: url(assets/google.png) no-repeat;
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        background-size: contain;
        background-position: center;
        position: absolute;
        top: 50%;
        left: 48%;
        transform: translate(-50%, -50%);
        margin-left: -100px; }
    .connect .snsLinkageButtonWithFacebook {
      position: relative;
      background-color: #1877F2; }
      .connect .snsLinkageButtonWithFacebook:before {
        background: url(assets/facebook.png) no-repeat;
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        background-size: contain;
        background-position: 50%;
        position: absolute;
        top: 50%;
        left: 45%;
        transform: translate(-50%, -50%);
        margin-left: -100px; }
  .connect .snsDisLinkageButtonWithApple {
    width: 365px;
    height: 60px;
    font-weight: bold;
    font-size: 15px;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #ffffff;
    background-color: #000000;
    margin-bottom: 20px; }

@media screen and (max-width: 768px) {
  .connect {
    max-width: 100%;
    padding: 0 20px; } }
  @media screen and (max-width: 768px) and (max-width: 768px) {
    .connect {
      max-width: 100%;
      min-height: 0;
      margin: 22px 0 32px 0; } }

@media screen and (max-width: 768px) {
    .connect .snsLinkageButton {
      font-size: 16px;
      width: 100%;
      height: 50px; }
      .connect .snsLinkageButtonWithApple > div:before {
        margin-left: -70px; }
      .connect .snsLinkageButtonWithApple > div:after {
        font-size: 16px;
        margin-left: 11px; }
      .connect .snsLinkageButtonWithApple text {
        font-size: 0; }
      .connect .snsLinkageButtonWithLine:before {
        width: 50px;
        height: 50px; }
      .connect .snsLinkageButtonWithGoogle:before {
        width: 35px;
        height: 35px; }
      .connect .snsLinkageButtonWithFacebook:before {
        width: 35px;
        height: 35px; }
    .connect .snsDisLinkageButtonWithApple {
      width: 100%;
      height: 50px;
      font-size: 16px; } }