@charset "UTF-8";

/* =========================================================

    ログイン前トップページ用css

========================================================= */


/* =============================================
  Custom Properties
============================================= */
:root {
  /* logo colors */
  --logo-gmo-blue: #005bac;
  --logo-gmo-gray: #5a5858;
  --logo-zcom-red: #d62825;

  /* Qplus colors */
  --qplus-orange1: #fdb33e;
  --qplus-orange2: #ff8a00;
  --qplus-green1: #f1f9f9;
  --qplus-green2: #e5f3f3;
  --qplus-green3: #6cd4d3;
  --qplus-green4: #48b9b7;
  --qplus-green5: #27a7a5;
  --qplus-green6: #218888;
  --qplus-green7: #344845;
  --qplus-green8: #d5e0e0;
  --qplus-green9: #839799;

  /* common colors */
  --common-black1: #222222;
  --common-gray1: #333333;
  --common-gray2: #555555;
  --common-gray3: #888888;
  --common-gray4: #dddddd;
  --common-pink1: #d82980;
}


/* ===============================================
  Font Setting
  Noto Sans: 400 (normal) / 700 (bold)
=============================================== */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NotoSansJP-Regular.woff) format("woff");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/NotoSansJP-Bold.woff) format("woff");
}


/* =========================================================
リセット用css
========================================================= */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}


html {
  font-size: 62.5%;
  height: 100%;
}

body {
  position: relative;
  font-family: "Noto Sans", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .2px;
  color: #0b2257;
  background-color: #ffffff;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: transparent url(../images/heroImg-bg.jpg) no-repeat 0 0;
  background-color:rgba(255,255,255,0.6);
  background-blend-mode:lighten;
  background-size: cover;
  -webkit-text-size-adjust: 100%;
}

@media screen and (min-width: 600px) {
  body {
    font-size: 1.6rem;
    background-color:rgba(255,255,255,0.2);

  }
}


button{
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: bold 14px "Noto Sans", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

a {
  text-decoration: none;
  cursor: pointer;
}

/* -------------------------------------

  共通スタイル

------------------------------------- */
/* --------------------------------
  部分的なスタイル
-------------------------------- */
/* sp/pcのみ */
.only-sp {
  display: block;
}
.only-pc {
  display: none;
}

@media screen and (min-width: 769px) {
  .only-sp {
    display: none;
  }
  .only-pc {
    display: block;
  }
}

/* テキスト */
/* サイズS */
.text-s {
  font-size: 0.875em;
}

.text-ss {
  font-size: 0.75em;
}

/* テキスト */
/* 中央寄せ */
.text-center {
  text-align: center;
}

/* 左寄せ */
.text-left {
  text-align: left;
}

/* 文字色（水色） */
.text-skyblue {
  color: #2bb0d0;
}

/* 文字色（紫） */
.text-purple {
  color: #724a96;
}

/* 文字色（ピンク） */
.text-pink {
  color: #d92980;
}

/* 文字色（オレンジ） */
.text-orange {
  color: #ee8c2c;
}

/* 文字色（黄緑） */
.text-lightgreen {
  color: #8cbb44;
}


/* section ----------*/
.section-block {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 42px 1.6rem;
  box-sizing: border-box;
}

@media screen and (min-width: 600px) {
  .section-block {
    padding: 96px 2rem;
  }
}

/* @media screen and (min-width: 1024px) {
  .section-block {
  }
} */

/* タイトル（h2,h3） ----------*/
.section-block h2 {
  font-size: 2.4rem;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 1px;
  margin: 0 0 2.4rem;
}
.section-block h2 .h2-subtext {
  font-size: 0.625em;
  display: block;
}


@media screen and (min-width: 600px) {
  .section-block h2 {
    font-size: 3.2rem;
  }
}

.section-block h3 {
  font-size: 2rem;
  text-align: center;
  letter-spacing: 2px;
  margin: 0 0 1.6rem;
}

.section-block h3 .h3-subtext {
  font-size: 0.75em;
  display: block;
}

@media screen and (min-width: 600px) {
  .section-block h3 {
    font-size: 2.8rem;
    margin: 0 0 3.2rem
  }
}

/* リード文 ----------*/
.section-lead {
  max-width: 880px;
  margin: 1rem auto 2rem;
}

@media screen and (min-width: 600px) {
  .section-lead {
    text-align: center;
    margin: 2rem auto 4rem;
  }
}

/* 新規登録ボタン */
.register-button {
  display: block;
  padding: 1rem 2rem;
  margin: 0 auto;
  text-align: center;
  border-radius: 100vh;
  box-sizing: border-box;
  background-color: #d92980;
  background-image: -webkit-linear-gradient( left, rgba(43,176,208, 20%) 0%, rgba(114,74,150, 20%) 25%, rgba(217,41,128, 20%) 50%, rgba(252,255,42, 20%) 75%, rgba(93,180,108, 20%) 100%);
  background-image: linear-gradient( 90deg, rgba(43,176,208, 20%) 0%, rgba(114,74,150, 20%) 25%, rgba(217,41,128, 20%) 50%, rgba(252,255,42, 20%) 75%, rgba(93,180,108, 20%) 100%);
  color: #ffffff;
  -webkit-transition: .3s;
  transition: .3s;
}
@media screen and (min-width: 600px) {
  .register-button {
  padding: 1.6rem 4rem;
  /* letter-spacing: 2px; */
  }
}

.register-button:hover {
  letter-spacing: 2px;
  box-shadow: 3.064px 2.571px 8px 0px rgba(54, 54, 54, 0.14);
}

.register-button:active {
  box-shadow: none;
}

/* ログインボタン */
.login-button {
  display: block;
  padding: 1.6rem 4rem;
  /* margin: 0 auto; */
  text-align: center;
  box-sizing: border-box;
  border-radius: 40px;
  border: 2px solid #d92980;
  background-color: #ffffff;
  color: #d92980;
  -webkit-transition: .3s;
  transition: .3s;
}

.login-button:hover {
  letter-spacing: 4px;
}

/* 緑色のボタン（一覧ページへの遷移に使用） */
.green-button {
  color: #0fa8a3;
  border: 2px solid #c4e2ea;
  border-radius: 24px;
  background-color: #f4fafb;
  padding: 1rem 2rem;;
  -webkit-transition: .3s;
  transition: .3s;
}

.green-button:hover {
  box-shadow: 3.064px 2.571px 8px 0px rgba(54, 54, 54, 0.14);
}

.green-button:active {
  box-shadow: none;
}


/* ボタンを右寄せにするボックス */
.linkbox-right {
  padding: 2rem 0;
  text-align: right;
}


/* アコーディオン
--------------------------- */
.accordion-panel {
  border: 1px solid var(--common-gray4);
  border-radius: 1.6rem;
  box-sizing: border-box;
  transition: .3s;
}

.accordion-panel:nth-child(n+2) {
  margin-top: 1rem;
}

.accordion-btn {
  position: relative;
  cursor: pointer;
  padding: 1rem 2rem;
}

.accordion-btn::after {
  content: "";
  display: block;
  position: absolute;
  right: 30px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 9px;
  height: 6px;
  background: transparent url(../images/arrowDown.png) no-repeat 0 0;
  background-size: cover;
  transition: .3s;
}
@media screen and (min-width: 600px) {
  .accordion-btn::after {
    width: 18px;
    height: 11px;
  }
}

.accordion-panel.is-select .accordion-btn::after {
  transform: rotate(180deg);
}

.accordion-btn button {
  font-size: 1.6rem;
  line-height: 1.5;
}

.accordion-box {
  display: none;  /* 初期状態：非表示 */
  padding: 0 2rem;
}

.accordion-inner {
  padding: 0 0 1rem 1rem;
}

.accordion-text {
  margin-top: 0.4rem;
}


/* ---------------------------
  list style
--------------------------- */
ul.list-dot__default,
ol.list-num__default {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}

ul.list-dot__default li,
ol.list-num__default li {
  position: relative;
  line-height: 1.5;
}

ul.list-dot__default li:nth-child(n + 2),
ol.list-num__default li:nth-child(n + 2) {
  margin-top: 0.4em;
}

/* dot
--------------------------- */
ul.list-dot__default {
  margin-left: 0.2em;
}

ul.list-dot__default li {
  padding-left: 0.8em;
}

ul.list-dot__default li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--common-gray1);
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 0.6em;
}

/* number
--------------------------- */
ol.list-num__default {
  counter-reset: number 0;
}

ol.list-num__default li {
  padding-left: 2em;
}

ol.list-num__default li::before {
  counter-increment: number 1;
  content: counter(number) ". ";
  display: block;
  width: 2em;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}


/* ------------------------------------------

  ヘッダーナビゲーション

------------------------------------------ */
/* ------------------------------------------
　SP/PC ナビゲーション切り替え
------------------------------------------ */
.header-SP {
  display: block;
}
.header-PC {
  display: none;
}

@media screen and (min-width: 1024px) {
  .header-SP {
    display: none;
  }
  .header-PC {
    display: block;
  }
}

.header-inner {
  background: transparent;
  /* position: fixed; */
  z-index: 10;
  width: 100%;
  padding: 1rem 0 1rem 1rem;
  box-sizing: border-box;
  -webkit-transition: .6s;
  transition: .6s;
}

@media screen and (min-width: 600px) {
  .header-inner {
    padding: 1rem;
  }
}

.header-with-box {
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-transition: .3s;
  transition: .3s;
}

@media screen and (min-width: 600px) {
  .header-with-box {
    margin: 0 auto;
  }
}

@media screen and (min-width: 1024px) {
  .header-with-box {
    max-width: 1260px;
    width: 100%;
    -webkit-box-pack: end;
    justify-content: flex-end;
    margin: 0 auto;
  }
}

/* infoQロゴ */
.header-logo {
  display: block;
  flex: 0 1 104px;
  transition: .3s;
}
@media screen and (min-width: 425px) {
  .header-logo {
    flex: 0 0 104px;
  }
}
@media screen and (min-width: 600px) {
  .header-logo {
    display: none;
  }
}

/* @media screen and (min-width: 1025px) {
  .header-logo {
    display: block;
  }
} */

/* ------------------------------------------
　ナビゲーション　スクロール後固定＆ロゴ表示
------------------------------------------ */
/* ヘッダー背景を透明から白へ */
.header-inner.header-tranform {
  position: fixed;
  /* z-index: 99; */
  background: rgba(255, 255, 255, 96%);
}

/* ロゴを表示 */
@media screen and (min-width: 600px) {
  /* .header-inner.header-tranform .header-with-box {
  } */
  .header-inner.header-tranform .header-logo {
    margin-right: 1vw;
    display: block;
    transition: 1s;
  }
}

/* ------------------------------------------
　登録・ログインボタン
------------------------------------------ */
/* 新規登録・ログインボタン */
.header-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 50px 0 5vw;
}
@media screen and (min-width: 1024px) {
  .header-buttons {
    margin-left: 1vw;
    margin-right: 0;
  }
}

/* 新規登録ボタン */
.header-inner .register-button {
  display: inline-block;
  width: 120px;
  height: 32px;
  line-height: 32px;
  vertical-align: middle;
  padding: 0 1.6rem;
  font-size: 0.875em;
  margin: 0 1rem 0 0;
}
@media screen and (max-width: 1200px) and (min-width: 1024px) {
  .header-inner .register-button {
    width: 10vw;
    font-size: 1.3vw;
  }
}
@media screen and (max-width: 600px) {
  .header-inner .register-button {
    width: 100px;
  }
}

/* ログインボタン */
.header-inner .login-button {
  display: inline-block;
  width: 96px;
  height: 32px;
  vertical-align: middle;
  padding: 0 4px;
  font-size: 0.875em;
  white-space: nowrap;
}
@media screen and (max-width: 1200px) and (min-width: 1024px) {
  .header-inner .login-button {
    width: 8vw;
    font-size: 1.3vw;
  }
}
@media screen and (max-width: 600px) {
  .header-inner .login-button {
    width: auto;
    padding: 0 1.6rem;
  }
}
@media screen and (max-width: 425px) {
  .header-inner .login-button {
    padding: 0 3vw;
  }
}

.header-inner .login-button:hover {
  letter-spacing: 2px;
}

/* SPドロワーメニュー登録・ログインボタン */
/* 新規登録ボタン */
.header-SP .nav-buttons {
  margin: 0 auto 10px;
}

.header-SP .nav-buttons .register-button {
  width: 140px;
  font-size: 1em;
}

.header-SP .nav-buttons .login-button {
  width: 96px;
  font-size: 1em;
}

/* SNS */
.header-sns {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 1024px) {
  .header-sns {
    margin-left: 2vw;
  }
}

.header-sns li {
  margin: 0 4px;
}
@media screen and (max-width: 600px) {
  .header-sns li {
    margin: 0 8px;
  }
}

.header-sns li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  box-shadow: 3.064px 2.571px 8px 0px rgba(54, 54, 54, 0.14);
  transition: .6s;
}
@media screen and (max-width: 600px) {
  .header-sns li a {
    width: 48px;
    height: 48px;
  }
}

.header-sns li a:hover {
  box-shadow: none;
}

.header-sns li img {
  max-width: 26px;
  height: auto;
}

.header-sns .tw img {
  max-width: 20px;
}

/* ------------------------------------------
  PC用ナビゲーション
------------------------------------------ */
.navPC ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.navPC ul li {
  font-size: 0.938em;
  line-height: 1.5;
}
@media screen and (max-width: 1200px) {
  .navPC ul li {
    font-size: 1.2vw;
  }
}

.navPC ul li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #142346;
  padding: 0 1vw;
  transition: .3s;
}

.navPC ul li a:hover {
  color: #d92980;
}

.navPC ul li a::after {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  bottom: -0.6em;
  content: '';
  width: 48%;
  margin: auto;
  height: 3px;
  background: #d92980;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
@media screen and (max-width: 1024px) {
  .navPC ul li a::after {
    display: none;
  }
}

.navPC ul li a:hover::after {
  transform: scale(1, 1);
}

/* ------------------------------------------
  SP用ナビゲーション
------------------------------------------ */
/* トグルボタン =============*/
/* .drawer--right .drawer-hamburger {
} */

/* @media screen and (min-width: 768px) {
  .drawer-toggle {
    top: 30px;
  }
} */

/* ドロワーボタン（drawer.min.cssを上書き）
--------------------------- */
.drawer-hamburger {
  position: absolute;
  width: 24px;
  padding: 12px .75rem 12px;
  top: 13px;
}

/* ハンバーガーアイコン */
.drawer-hamburger-icon {
  margin-top: 0;
}

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
  height: 2px;
  transition: all .6s cubic-bezier(.19,1,.22,1);
  background-color: #142346;
}

.drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
  top: -8px;
}

.drawer-hamburger-icon:after, .drawer-hamburger-icon:after {
  top: 8px;
}

/* close icon */
.drawer--right.drawer-open .drawer-hamburger {
  right: 0;
}

/* SPナビゲーション */
.drawer-nav {
  width: 300px;
}

.drawer--right .drawer-nav {
  right: -100%;
}

/* ナビ上部 */
.drawer-menu-top {
  padding: 30px 20px 10px;
  background-color: #FFFFFF;
}

/* infoQロゴ */
.sp-nav-logo {
  width: 160px;
  margin: 0 auto;
  padding-bottom: 20px;
}

/* 新規登録・ログインボタン */
.nav-buttons {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  margin: 0 auto 20px;
}

/* リンク */
.drawer-menu {
  width: 88%;
  margin: 0 auto 3rem;
}

.drawer-menu li a {
  position: relative;
  display: block;
  width: 100%;
  color: #2d3240;
  /* text-align: center; */
  border-bottom: 1px solid #eeeeee;
  padding: 1.6rem 0
}

.drawer-menu li a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 8px;
  display: block;
  width: 7px;
  height: 12px;
  background: transparent url(../images/arrowRightGrey.png) no-repeat 0 0;
  background-size: 7px 12px;
}

.drawer-menu li:first-of-type a {
  border-top: 1px solid #eeeeee;
}

/* ------------------------------------------

  メインビジュアル

------------------------------------------ */
.mainvisual {
  padding-bottom: 6vw;
}
@media screen and (min-width: 769px) {
  .mainvisual {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}
@media screen and (min-width: 1025px) {
  .mainvisual {
    padding-bottom: 8vw;
  }
}

.mainvisual-inner {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 3.2rem 0 0;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .mainvisual-inner {
    justify-content: space-between;
    gap: 0 calc((72 / 1246) * 100%);
    max-width: 1246px;
    padding-top: 4rem;
  }
}

.mainvisual-inner .left {
  text-align: center;
}
@media screen and (min-width: 769px) {
  .mainvisual-inner .left {
    flex: 0 0 calc((360 / 1246) * 100%);
  }
}

.mainvisual-inner .right {
  display: none;
}
@media screen and (min-width: 769px) {
  .mainvisual-inner .right {
    display: block;
    flex: 0 1 100%;
  }
}

/* ロゴ */
@media screen and (min-width: 600px) and (max-width: 768px) {
  .mainvisual-inner .left h1 {
    text-align: center;
  }
  .mainvisual-inner .left h1 img {
    max-width: 360px;
  }
}

/* 吹き出し */
.mainvisual-inner .right .baloon {
  display: flex;
}

@media screen and (min-width: 600px) {
  .mainvisual-inner .baloon {
    position: relative;
  }

  .mainvisual-inner .baloon .yellow {
    position: relative;
    top: 88px;
    left: 64px;
  }

  .mainvisual-inner .baloon .green {
    position: relative;
    left: 32px;
  }

  .mainvisual-inner .baloon .pink {
    position: relative;
    top: 88px;
    left: 24px;
  }

  .mainvisual-inner .baloon .blue {
    position: relative;
    top: 88px;
    left: -40px;
  }
}

/* 新規登録ボタン */
.mainvisual-inner .register-button {
  display: block;
  max-width: 340px;
  width: 88%;
  padding: 1.6rem 2rem;
  margin: 0 auto 0;
  text-align: center;
  box-sizing: border-box;
  color: #ffffff;
}

.mainvisual-inner .left .register-button__lead {
  margin-top: 0.8rem;
  line-height: 1.5;

  span {
    display: inline-block;
  }
}

.mainvisual-inner .left .register-button {
  font-size: 5vw;

  span {
    display: inline-block;
  }
}

@media screen and (min-width: 426px) {
  .mainvisual-inner .left .register-button {
    font-size: 2rem;
  }
}

@media screen and (min-width: 600px) {
  .mainvisual-inner .left .register-button {
    width: 100%;
    margin: 1em auto 0 auto;
    padding: 1.6rem 0;
  }
}

@media screen and (min-width: 769px) {
  .mainvisual-inner .left .register-button {
    padding: 1.2rem 0;
    font-size: 1.7vw;
    line-height: 1.5;
  }
}

@media screen and (min-width: 1025px) {
  .mainvisual-inner .left .register-button {
    padding: 1.6rem;
    font-size: 1.08em;

    span {
      display: inline;
    }
  }
}

@media screen and (min-width: 1200px) {
  .mainvisual-inner .left .register-button {
    font-size: 1.25em;
  }
}


/* ------------------------------------------

  各コンテンツ

------------------------------------------ */
/* header {
  z-idnex: 1;
}
section.mainvisual {
  z-idnex: 2;
}
main {
  z-index: 3;
}
footer {
  z-index: 3;
} */


/* 一時的キャンペーンバナー 2025/02追加 */
/* .cp_banner_sp {
  max-width: 480px;
  display: block;
  padding: 1rem 1rem 3.2rem 1rem;
  margin: 0 auto;
}

@media screen and (min-width: 769px) {
  .cp_banner_sp {
    display: none;
  }
} */


/* ------------------------------------------
  紹介プログラム バナー
------------------------------------------ */
@media screen and (min-width: 769px) {
  .beforeLogin__referral-reward {
    padding-top: 4vw;
  }
}

.beforeLogin__referral-inner {
  padding: 0 4vw 8vw 4vw;
}
@media screen and (min-width: 600px) {
  .beforeLogin__referral-inner {
    padding-bottom: 6vw;
  }
}
@media screen and (min-width: 769px) {
  .beforeLogin__referral-inner {
    background-color: #ffffff;
    position: relative;
  }
}
@media screen and (min-width: 1025px) {
  .beforeLogin__referral-inner {
    padding-bottom: 4vw;
  }
}

@media screen and (min-width: 769px) {
  .beforeLogin__referral-inner::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 4vw;
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 95%);
    position: absolute;
    left: 0;
    top: -4vw;
    z-index: -1;
  }
}

.beforeLogin__referral-bnr {
  text-align: center;
}

.beforeLogin__referral-bnr img {
  vertical-align: top;
  max-width: 1024px;
  width: 100%;
}

.beforeLogin__referral-bnr a {
  transition: 0.3s;
}
.beforeLogin__referral-bnr a:hover {
  opacity: 0.7;
}

.beforeLogin__referral-bnr .switch-pc {
  display: none;
}
@media screen and (min-width: 769px) {
  .beforeLogin__referral-bnr .switch-pc {
    display: inline-block;
  }
}

.beforeLogin__referral-bnr .switch-sp {
  display: inline-block;
}
@media screen and (min-width: 769px) {
  .beforeLogin__referral-bnr .switch-sp {
    display: none;
  }
}


/* ------------------------------------------
  ポイント交換先
------------------------------------------ */
.point-exchange {
  position: relative;
  background-image: url(../images/exchangeFemale.jpg);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: bottom right -30vw;
  background-size: contain;
}

@media screen and (min-width: 600px) {
  .point-exchange {
    background-position: bottom right -80px;
    background-size: 480px 500px;
    padding: 96px 0 56px;
  }
}

@media screen and (min-width: 769px) {
  .point-exchange {
    background-position: bottom right -30px;
    background-size: 480px 500px;
    padding: 96px 0 56px;
  }
}

@media screen and (min-width: 1025px) {
  .point-exchange {
    background-position: bottom right 8%;
  }
}

@media screen and (min-width: 1401px) {
  .point-exchange {
    background-position: bottom right 20%;
  }
}

.point-exchange .section-block {
  padding: 0 1.6rem 42px;
}

/* タイトルイメージ画像 */
.point-exchange .title-image {
  text-align: center;
}

.point-exchange .title-image img {
  width: 56%;
  max-width: 297px;
}

@media screen and (min-width: 600px) {
  .point-exchange .title-image {
    position: absolute;
    top: -88px;
    left: 40px;
  }
  .point-exchange .title-image img {
    width: 20vw;
  }
}


/* リアルタイム交換 */
.realtime-exchange {
  position: relative;
  border-radius: 32px;
  background-image: -webkit-linear-gradient( left, rgb(234,244,249) 0%, rgb(249,236,243) 30%, rgb(251,251,242) 75%, rgb(246,248,244) 100%);
  background-image: linear-gradient( 90deg, rgb(234,244,249) 0%, rgb(249,236,243) 30%, rgb(251,251,242) 75%, rgb(246,248,244) 100%);
  width: 100%;
  height: auto;
  padding: 2.4rem;
  margin: 0 auto;
  box-sizing: border-box;
}

.realtime-exchange::before {
  content: '';
  position: absolute;
  top: -24px;
  right: 16px;
  width: 56px;
  height: 56px;
  background: transparent url(../images/stripCirclePurple.png) no-repeat 0 0;
  background-size: contain;

}

@media screen and (min-width: 600px) {
  .realtime-exchange::before {
    top: -48px;
    right: 32px;
    width: 142px;
    height: 142px;
    background-size: contain;
  }
}

.realtime-exchange h3 {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
          line-height: 1.2;
  margin: 0 0 2.4rem;
}

.realtime-exchange h3 .circle-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-image: -webkit-linear-gradient( 50deg, #fc8182 0%, #e74abe 100%);
  background-image: linear-gradient( 40deg, #fc8182 0%, #e74abe 100%);
  font-size: 1.2rem;
  text-align: center;
  color: #ffffff;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

@media screen and (min-width: 600px) {
  .realtime-exchange h3 .circle-mark {
    width: 88px;
    height: 88px;
    font-size: 1.8rem;
  }
}

.realtime-exchange h3 .textwrap {
  font-size: 1em;
  margin: 0 0 0 1rem;
}
.realtime-exchange h3 .subtext {
  color: #d92980;
  font-size: 0.625em;
  display: block;
}

@media screen and (min-width: 600px) {
  .realtime-exchange h3 .subtext {
    margin: 0 0 0 2rem;
  }
}

.realtime-exchange .flow {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
          -webkit-box-align: center;
                  align-items: center;
  flex-wrap: wrap;
}

@media screen and (min-width: 600px) {
  .realtime-exchange .flow {
    flex-wrap: nowrap;
  }
}

/* お手持ちのinfoQポイント */
.realtime-exchange .flow .flow01 {
  position: relative;
  text-align: center;
  max-width: 260px;
  border-radius: 1rem;
  padding: 3.2rem 2rem 2rem;
  margin: 0 0 1rem;
  background: #ffffff;
}

@media screen and (min-width: 600px) {
  .realtime-exchange .flow .flow01 {
    width: 26%;
  }
}

.realtime-exchange .flow .flow01::before {
  content: '';
  position: absolute;
  top: -2rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 53px;
  height: 52px;
  background: transparent url(../images/pointIcon.png) no-repeat;
  background-size: contain;
}

.realtime-exchange .flow .flow01 p {
  text-align: center;
}

/* 即時交換（矢印） */
.realtime-exchange .flow .flow02 {
  max-width: 226px;
  margin: 0 2rem;
}

@media screen and (min-width: 600px) {
  .realtime-exchange .flow .flow02 {
    width: 26%;
  }
}

/* リアルタイム交換 */
.realtime-exchange .flow .flow03 {
  max-width: 520px;
  border-radius: 1rem;
  padding: 1rem 2rem 2rem;
  background: #ffffff;
  box-sizing: border-box;
}

@media screen and (min-width: 600px) {
  .realtime-exchange .flow .flow03 {
    width: 48%;
  }
}

.realtime-exchange .flow .flow03 p {
  font-size: 1.25em;
  text-align: center;
  margin: 0 0 4px 0;
}

.realtime-exchange .flow .flow03 .logos {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}

.realtime-exchange .flow .flow03 img {
  width: 48%;
  border: 1px solid #eeeeee;
}

.realtime-exchange .flow .flow03 img:last-child {
  margin: 0 0 0 2rem;
}

/* その他選べる交換先 */
.exchange-list {
  position: relative;
}
@media screen and (min-width: 600px) {
  .exchange-list {
    max-width: 880px;
    margin: 0 auto;
  }
}

.exchange-list h3 {
  text-align: left;
  font-size: 1.25em;
  margin: 2em 0 1em;
}
@media screen and (min-width: 600px) {
  .exchange-list h3 {
    margin: 2em 0;
  }
}

.exchange-list .icons {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
@media screen and (min-width: 600px) {
  .exchange-list .icons {
    max-width: calc((680 / 880)* 100%);
  }
}
@media screen and (min-width: 1025px) {
  .exchange-list .icons {
    max-width: 680px;
  }
}

.exchange-list .icons li {
  flex: 0 1 calc((202 / 567)* 100%);
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  margin: 4px;
}
@media screen and (min-width: 600px) {
  .exchange-list .icons li {
    flex: 0 1 calc((202 / 680)* 100%);
  }
}
@media screen and (min-width: 1025px) {
  .exchange-list .icons li {
    flex: 0 1 auto;
  }
}

.exchange-list .icons li img {
  max-width: 100%;
  vertical-align: bottom;
}
@media screen and (min-width: 1025px) {
  .exchange-list .icons li img {
    max-width: 200px;
  }
}

/* ------------------------------------------
  さぁはじめよう
------------------------------------------ */
.lets-get-started {
  background: -webkit-linear-gradient(bottom, rgb(228 245 249) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(0deg, rgb(228 245 249) 0%, rgba(255,255,255,1) 100%);
}
@media screen and (min-width: 600px) {
  .lets-get-started .section-block {
    padding: 60px 2rem 0 2rem;
  }
}

.lets-get-started h2 {
  text-align: center;
}

.lets-get-started h2 .h2-subtext {
  margin: 1rem 0 0;
}

.lets-get-started .flow {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  flex-wrap: wrap;
  margin: 4rem 0 0;

}

.lets-get-started .flow li {
  text-align: center;
  padding: 0 0 2rem;
}

.lets-get-started .flow li img {
  width: 72%;
}

@media screen and (min-width: 600px) {
  .lets-get-started .flow {
    flex-wrap: nowrap
  }

  .lets-get-started .flow li img {
    width: 88%;
  }
}

/* タイトル
--------------------------- */
.lets-get-started .mainttl {
  text-align: center;
  margin-bottom: 4rem;
}
@media screen and (min-width: 769px) {
  .lets-get-started .mainttl {
    margin-bottom: 7rem;
  }
}

.lets-get-started .mainttl::after {
  display: none;
}

.lets-get-started .subttl {
  position: relative;
  margin: 0 0 2.4rem 0;
  font-size: 3.2rem;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .lets-get-started .subttl {
    text-align: center;
  }
}
@media screen and (max-width: 600px) {
  .lets-get-started .subttl {
    font-size: 2.4rem;
  }
}

@media screen and (min-width: 769px) {
  .lets-get-started .subttl::after {
    content: '';
    position: absolute;
    right: 120px;
    top: -30px;
    background: transparent url(../images/phonePoints.png) no-repeat;
    background-size: contain;
    width: 220px;
    height: 212px;
  }
}

.lets-get-started .subttl-image {
  max-width: 545px;
  width: 100%;
  display: block;
  margin: 0 0 2rem;
}
@media screen and (max-width: 600px) {
  .lets-get-started .subttl-image {
    display: inline-block;
    vertical-align: top;
  }
}

/* ------------------------------------------
  アンケートの種類
------------------------------------------ */
.survey-type {
  background-color: #e4f5f9;
}

.survey-type__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .survey-type__list {
    display: block;
    padding: 0 1rem;
  }
}

.survey-type__list li {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0.5rem 1rem;
}
@media screen and (max-width: 768px) {
  .survey-type__list li {
    justify-content: flex-start;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 72%);
  }

  .survey-type__list li:nth-child(n+2) {
    margin-top: 1rem;
  }
}

.survey-type__list .web,
.survey-type__list .online {
  flex: 0 0 48%;
  flex-wrap: nowrap;
  margin-bottom: 5rem;
}
@media screen and (max-width: 1024px) {
  .survey-type__list .web,
  .survey-type__list .online {
    flex: 0 0 50%;
    margin-bottom: inherit;
  }
}

.survey-type__list .kaijou,
.survey-type__list .homeuse,
.survey-type__list .nikki {
  flex: 0 1 33.33%;
  flex-wrap: wrap;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .survey-type__list .kaijou,
  .survey-type__list .homeuse,
  .survey-type__list .nikki {
    flex-wrap: nowrap;
  }
}

/* eyecatch
--------------------------- */
.survey-eyecatch {
  line-height: 1;
}

.survey-type__list .web .survey-eyecatch,
.survey-type__list .online .survey-eyecatch,
.survey-type__list .nikki .survey-eyecatch {
  flex: 0 0 220px;
}
.survey-type__list .kaijou .survey-eyecatch {
  flex: 0 0 300px;
}
.survey-type__list .homeuse .survey-eyecatch {
  flex: 0 0 280px;
}

@media screen and (max-width: 1024px) {
  .survey-type__list .web .survey-eyecatch,
  .survey-type__list .online .survey-eyecatch {
    flex: 0 0 calc((200 / 437) * 100%);
  }
}

@media screen and (max-width: 1024px) {
  .survey-type__list .kaijou .survey-eyecatch img {
    flex: 0 0 calc((300 / 327) * 100%);
  }
}

@media screen and (max-width: 1024px) {
  .survey-type__list .homeuse .survey-eyecatch img {
    flex: 0 0 calc((280 / 327) * 100%);
  }
}

@media screen and (max-width: 1024px) {
  .survey-type__list .nikki .survey-eyecatch img {
    flex: 0 0 calc((220 / 327) * 100%);
  }
}

@media screen and (max-width: 768px) {
  .survey-type__list .web .survey-eyecatch,
  .survey-type__list .online .survey-eyecatch,
  .survey-type__list .kaijou .survey-eyecatch,
  .survey-type__list .homeuse .survey-eyecatch,
  .survey-type__list .nikki .survey-eyecatch {
    flex: 0 0 calc((192 / 688) * 100%);
  }
}

/* text
--------------------------- */
.survey-type__list .web dl,
.survey-type__list .online dl {
  flex: 0 1 calc(100% - 220px);
  margin-left: 2rem;
}
@media screen and (max-width: 1024px) {
  .survey-type__list .web dl,
  .survey-type__list .online dl {
    flex: 0 1 auto;
    margin-left: 5vw;
    margin-right: 1rem;
  }
}

.survey-type__list .kaijou dl,
.survey-type__list .homeuse dl,
.survey-type__list .nikki dl {
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
  .survey-type__list .kaijou dl,
  .survey-type__list .homeuse dl,
  .survey-type__list .nikki dl {
    flex: 0 1 auto;
    margin-top: 0;
    margin-left: 5vw;
    margin-right: 1rem;
    text-align: left;
  }
}

.survey-type__list dt {
  font-size: 2.4rem;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .survey-type__list dt {
    font-size: 2rem;
  }
}
@media screen and (max-width: 425px) {
  .survey-type__list dt {
    font-size: 4vw;
  }
}

.survey-type__lead {
  margin: 1.6rem 0 1rem 0;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .survey-type__lead {
    margin: 0.5rem 0;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 425px) {
  .survey-type__lead {
    font-size: 3.2vw;
  }
}

@media screen and (min-width: 1025px) {
  .survey-type__lead span {
    display: inline-block;
  }
}

/* price
--------------------------- */
.survey-type__price {
  max-width: 200px;
  height: auto;
  display: inline-block;
  color: #ffffff;
  text-align: center;
  padding: 0.2rem 1rem;
  margin: 4px 0 0;
  line-height: 1.3;
}

.survey-type__list .web .survey-type__price {
  background-color: #2bb0d0;
}
.survey-type__list .online .survey-type__price {
  background-color: #724a96;
}
.survey-type__list .kaijou .survey-type__price {
  background-color: #d92980;
}
.survey-type__list .homeuse .survey-type__price {
  background-color: #ee8c2c;
}
.survey-type__list .nikki .survey-type__price {
  background-color: #5db46c;
}


/* ------------------------------------------
  会員登録について
------------------------------------------ */
.safety {
  position: relative;
  background: -webkit-linear-gradient(bottom, rgba(246,251,253,1) 0%, rgba(228,245,249,1) 100%);
  background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(228,245,249,1) 100%);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(228,245,249,1) 100%);
}

.safety::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 88vw;
  min-height: 120px;
  background-color: #ffffff;
  /* background: linear-gradient(0deg, rgb(246, 251, 252) 0%, rgba(255,255,255,1) 100%); */
  -webkit-clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
          clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
}

@media screen and (min-width: 600px) {
  .safety::before {
    height: 40vw;
  }
}

.safety .section-block {
  padding: 24px 1.6rem 48px;
}

@media screen and (min-width: 769px) {
  .safety .section-block {
    padding: 96px 1.6rem 48px;
  }
}

/* infoQサイトの安全性
--------------------------- */
@media screen and (min-width: 769px) {
  .section-block.safety-security {
    padding-top: 150px;
  }
}

.safety-security .mainttl {
  position: absolute;
  top: 40px;
  left: 1.6rem;
}
@media screen and (max-width: 768px) {
  .safety-security .mainttl {
    position: static;
    margin: -5vw 0 0 0;
  }
}
@media screen and (max-width: 600px) {
  .safety-security .mainttl {
    margin-top: 0;
  }
}

.safety-security .mainttl img {
  width: 100%;
  max-width: 538px;
}

.safety-items {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .safety-items {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.safety-items li {
  flex: 0 1 240px;
  border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid rgba(201,228,255,0.35);
  box-shadow: -2px 1px 26px -3px rgba(201,228,255,0.35);
  box-sizing: border-box;
  padding: 4rem 1.6rem;
}
@media screen and (max-width: 1024px) {
  .safety-items li {
    padding: 3.2rem 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .safety-items li {
    flex: 0 1 48%;
    padding: 1.6rem;
  }
}

.safety-items li:nth-child(n+2) {
  margin-left: 2rem;
}
@media screen and (max-width: 768px) {
  .safety-items li:nth-child(n+2) {
    margin-left: 0;
  }
}

@media screen and (max-width: 768px) {
  .safety-items li:nth-child(n+3) {
    margin-top: 4vw;
  }
}

.safety-items dl {
  text-align: center;
}

/* title */
.safety-items__title {
  font-size: 1.8rem;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .safety-items__title {
    font-size: 2.8vw;
  }
}
@media screen and (max-width: 425px) {
  .safety-items__title {
    font-size: 4vw;
  }
}

.safety-items__title span {
  display: inline-block;
}
@media screen and (max-width: 425px) {
  .safety-items__title span {
    display: block;
  }
  .safety-items li:nth-child(3) .safety-items__title span {
    display: inline-block;
  }
}

/* pic */
.safety-items__pic {
  padding-top: 3rem;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .safety-items__pic {
    padding-top: 3vw;
  }
}

@media screen and (max-width: 768px) {
  .safety-items li:nth-child(1) .safety-items__pic {
    padding-top: 4vw;
  }
}
@media screen and (max-width: 425px) {
  .safety-items li:nth-child(1) .safety-items__pic {
    padding-top: 6vw;
  }
}

@media screen and (max-width: 768px) {
  .safety-items li:nth-child(3) .safety-items__pic {
    padding-top: 1vw;
  }
}
@media screen and (max-width: 425px) {
  .safety-items li:nth-child(3) .safety-items__pic {
    padding-top: 3vw;
  }
}

.safety-items__pic img {
  height: 120px;
}
@media screen and (max-width: 768px) {
  .safety-items__pic img {
    height: auto;
  }
}
@media screen and (max-width: 425px) {
  .safety-items__pic img {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .safety-items li:nth-child(1) .safety-items__pic img {
    max-width: calc((160 / 320) * 100%);
    min-width: 100px;
  }
}

@media screen and (max-width: 768px) {
  .safety-items li:nth-child(2) .safety-items__pic img {
    max-width: calc((140 / 320) * 100%);
    min-width: 100px;
  }
}

@media screen and (max-width: 768px) {
  .safety-items li:nth-child(3) .safety-items__pic img {
    max-width: calc((220 / 320) * 100%);
    min-width: 100px;
  }
}

@media screen and (max-width: 768px) {
  .safety-items li:nth-child(4) .safety-items__pic img {
    max-width: calc((200 / 320) * 100%);
    min-width: 100px;
  }
}

/* lead */
.safety-items__lead {
  padding-top: 2rem;
  font-size: 1.6rem;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .safety-items__lead {
    padding-top: 2vw;
    padding-bottom: 1vw;
    font-size: 2.4vw;
  }
}
@media screen and (max-width: 425px) {
  .safety-items__lead {
    padding-top: 4vw;
    font-size: 1.4rem;
  }
}

.safety-items li:nth-child(1) .safety-items__lead {
  padding-top: 3rem;
}

@media screen and (max-width: 768px) {
  .safety-items li:nth-child(1) .safety-items__lead {
    padding-top: 3vw;
  }
}
@media screen and (max-width: 425px) {
  .safety-items li:nth-child(1) .safety-items__lead {
    padding-top: 7vw;
  }
}

@media screen and (max-width: 425px) {
  .safety-items li:nth-child(3) .safety-items__lead {
    padding-top: 3vw;
  }
}

/* 簡単3ステップで登録
--------------------------- */
.section-block.kantan-3steps {
  padding: 32px 0 56px;
}
@media screen and (min-width: 600px) {
  .section-block.kantan-3steps {
    padding: 32px 0 72px;
  }
}

.step-items {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.step-items li {
  max-width: 280px;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 0 0 4rem;
}
@media screen and (min-width: 600px) {
  .step-items li {
    width: 33.333%;
  }
}

.step-items li:not(:last-child) {
  position: relative;
}

.step-items li:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -56px;
  right: 0;
  left: 0;
  margin: auto;
  display: block;
  width: 24px;
  height: 30px;
  background: transparent url(../images/triangleArrowDown.png) no-repeat 0 0;
  background-size: contain;
}
@media screen and (min-width: 600px) {
  .step-items li:not(:last-child)::after {
    top: 0;
    bottom: 0;
    left: auto;
    right: -24px;
    background: transparent url(../images/triangleArrowRight.png) no-repeat 0 0;
    background-size: contain;
  }
  .step-items li:not(:last-child) {
    margin-right: 4.8rem;
  }
}

@media screen and (min-width: 600px) {
  .step-items dl {
    display: flex;
    justify-content: center;
    align-items: space-between;
    flex-wrap: wrap;
  }
}

.step-items dt {
  text-align: center;
  font-size: 1.125em;
}
@media screen and (min-width: 600px) {
  .step-items dt {
    padding: 0 0 2rem;
  }
}

/* step番号 */
.step-items dt .step {
  font-size: 2em;
  font-style: italic;
  display: block;
}
.step-items dt .step .no {
  color: #29adce;
}

.step-items dd {
  text-align: center;
}

/* ステップイメージ */
.step-image {
  width: 160px;
  height: auto;
  margin-bottom: 1rem;
}
@media screen and (min-width: 600px) {
  .step-image {
    width: 240px;
    margin-bottom: 2rem;
  }
}

/* ------------------------------------------
  CTA
------------------------------------------ */
.cta {
  background: -webkit-linear-gradient(bottom, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%);
  padding: 0 0 4rem;
}

@media screen and (min-width: 600px) {
  .cta {
    background: #ffffff;
    padding: 0;
  }
}

@media screen and (min-width: 1024px) {
  .cta {
    background: #ffffff url(../images/cta-bg.jpg) no-repeat top right;
    background-size: cover;
  }
}

.cta-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

@media screen and (min-width: 769px) {
  .cta-inner {
    flex-wrap: nowrap;
  }
}

/* イメージ  */
.cta-inner .cta-image {
  flex: 0 1 auto;
  text-align: center;
}

.cta-inner .cta-image img {
  width: 100%;
  vertical-align: middle;
}

@media screen and (min-width: 600px) {
  .cta-inner .cta-image img {
    max-width: 570px;
  }
}

/* ボタン */
.cta-inner .button-area {
  flex: 0 1 100%;
  margin-top: 2rem;
  padding: 0 2rem;
}

@media screen and (min-width: 600px) {
  .cta-inner .button-area {
    flex: 0 1 80%;
    padding: 0;
  }
}

@media screen and (min-width: 769px) {
  .cta-inner .button-area {
    flex: 0 1 450px;
    margin-top: 0;
    padding-right: 2rem;
  }
}

.cta-inner .button-area .cta-txt {
  margin-bottom: 2rem;
  line-height: 1.8;
}

.cta-inner .register-button {
  font-size: 1.125em;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 340px;
  width: 80%;
  border-radius: 100vh;
  margin: 0 auto;
}

@media screen and (min-width: 600px) {
  .cta-inner .register-button {
    width: 94%;
  }
}

@media screen and (min-width: 769px) {
  .cta-inner .register-button {
    max-width: 400px;
    font-size: 1.25em;
    display: block;
  }
}

@media screen and (min-width: 1024px) {
  .cta-inner .register-button {
    margin: 0;
  }
}

.cta-inner .register-button span,
.cta-inner .register-button em {
  display: block;
  padding: 0 0.1em;
}

@media screen and (min-width: 769px) {
  .cta-inner .register-button span,
  .cta-inner .register-button em {
    display: inline-block;
    padding: 0;
  }
}


/* ------------------------------------------
  もっと知りたい
------------------------------------------ */
.more-info {
  width: 100%;
  background: transparent url(../images/snsBg.jpg) no-repeat bottom center
  /* background-size: contain; */
}
/* @media screen and (min-width: 600px) {
  .more-info {
    background-size: cover;
  }
} */

/* 各バナー */
.more-info-links {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  flex-wrap: wrap;
}

@media screen and (min-width: 769px) {
  .more-info-links {
    margin: 5.6rem 0 2.4rem;
  }
}

.more-info-links > div {
  margin-bottom: 1rem;
  border-bottom: 1px solid #eeeeee;
  padding: 0 0 1rem 0;
}

@media screen and (min-width: 600px) {
  .more-info-links > div {
    width: 80%;
    border-bottom: none;
  }
}

@media screen and (min-width: 769px) {
  .more-info-links > div {
    width: 48%;
    padding: 0;
    margin: 0 0 3.2rem;
  }
  .more-info-links > div:nth-child(odd) {
    margin: 0 3.2rem 3.2rem 0;
  }
}

.more-info-links > div h3 {
  font-size: 0.875em;
  text-align: left;
  margin-bottom: 0.2em;
}

.more-info-links > div dl {
  display: -webkit-box;
  display: flex;
  /* -webkit-box-pack: justify;
          justify-content: space-between; */

  /* border: 1px solid #efefef; */
}
@media screen and (min-width: 600px) {
  .more-info-links > div dl {
    border: 1px solid #eeeeee;
  }
}

.more-info-links > div dl dt {
  width: 42%;
  font-size: 14px;
  overflow: hidden;
}

/* バナー画像 */
.more-info-links > div dl dt a img {
  vertical-align: bottom;
  -webkit-transition: .6s;
  transition: .6s;
}

.more-info-links > div dl dt a:hover img {
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);

}

@media screen and (min-width: 600px) {
  .more-info-links > div dl dt {
    width: 64%;
    max-width: 320px;
  }
}

.more-info-links > div dl dd {
  width: 58%;
  font-size: 0.938em;
  padding: 0 2rem;
}

@media screen and (min-width: 600px) {
  .more-info-links > div dl dd {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
            align-content: center;
    flex-wrap: wrap;
    width: 36%;
    /* padding-left: 1rem; */
    /* text-align: center; */
  }
  /* .more-info-links > div dl dd p {
    font-size: 1.125em;
  } */
}


/* キャンペーン(グリーン) */
.green-text {
  color: #0fa8a3;
}

/* 自主調査(パープル) */
.purple-text {
  color: #724a95;
}

/* チャットでインタビュー(ピンク) */
.pink-text {
  color: #fa4578;
}

/* Qplus(イエロー) */
.yellow-text {
  color: #fba113;
}

/* ボタン */
.more-info-links .button-area {
  width: 100%;
  text-align: center;
  margin: 0.5em 0 1rem;
}

@media screen and (min-width: 1024px) {
  /* ボタン */
  .more-info-links .button-area {
    margin: 1rem 0 1rem;
  }
}

.more-info-links a.button {
  display: inline-block;
  line-height: 1;
  width: 88%;
  font-size: 0.938em;
  color: #ffffff;
  border-radius: 16px;
  padding: 0.5em 1rem;
  box-sizing: border-box;
  -webkit-transition: .3s;
  transition: .3s;
}

/* キャンペーン */
.more-info-links .campaign .button {
  background-color: #0fa8a3;
}

.more-info-links .campaign a.border {
  width: 88%;
  display: inline-block;
  background-color: #eaf2f4;
  color: #0fa8a3;
  font-size: 0.938em;
  line-height: 1;
  border: 2px solid #0fa8a3;
  border-radius: 16px;
  padding: 6px 1rem;
  margin: 0 0 1em;
  box-sizing: border-box;
  -webkit-transition: .3s;
  transition: .3s;
}

.more-info-links a.border:hover,
.more-info-links a.button:hover {
  letter-spacing: 1px;
  box-shadow: 3.064px 2.571px 8px 0px rgba(54, 54, 54, 0.14);
}

.more-info-links a.border:active,
.more-info-links a.button:active {
  box-shadow: none;
}

/* 自主調査(パープル) */
.more-info-links .survey .button {
  background-color: #724a95;
}

/* チャットでインタビュー(ピンク) */
.more-info-links .interview .button {
  background-color: #fa4578;
}

/* Qplus(イエロー) */
.more-info-links .qplus .button {
  background-color: #fba113;
}

/* sns */
.more-info .sns {
  padding: 0 1.6rem 3.2rem;
}

@media screen and (min-width: 600px) {
  .more-info .sns {
    padding: 0 1.6rem 7.2rem;
  }
}

.more-info .sns .title-image {
  text-align: center;
  padding: 0 0 2rem;
}

.more-info .sns .title-image img {
  width: 160px;
}

@media screen and (min-width: 600px) {
  .more-info .sns .title-image img {
    width: 240px;
  }
}

.more-info .sns h2 {
  position: relative;
}

.more-info .sns h2::before {
  content: '';
}

/* SNS */
.more-info .sns-links {
  display: flex;
  justify-content: center;
  gap: 3vw;
}
@media screen and (min-width: 769px) {
  .more-info .sns-links {
    gap: 3rem;
  }
}

.more-info .sns-links li {
  flex: 0 1 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 4px;
  text-align: center;
  line-height: 1;
  transition: .3s;
}

.more-info .sns-links li:hover {
  letter-spacing: 1px;
  box-shadow: 3.064px 2.571px 8px 0px rgba(54, 54, 54, 0.14);
}

.more-info .sns-links li a {
  display: block;
  width: 100%;
  padding: 3vw 0;
  color: #142346;
}
@media screen and (min-width: 600px) {
  .more-info .sns-links li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
  }
}

@media screen and (min-width: 600px) {
  .more-info .sns-links__logo {
    flex: 0 0 32px;
  }
}

@media screen and (min-width: 769px) {
  .more-info .sns-links__logo {
    flex: 0 1 64px;
  }
}

.more-info .sns-links__logo img {
  max-width: 32px;
  vertical-align: middle;
}

@media screen and (min-width: 600px) {
  .more-info .sns-links__logo img {
    max-width: 100%;
  }
}

.more-info .sns-links__brand {
  margin-top: 1rem;
  font-size: 3.8vw;
}

@media screen and (min-width: 425px) {
  .more-info .sns-links__brand {
    font-size: 3.2vw;
  }
}

@media screen and (min-width: 600px) {
  .more-info .sns-links__brand {
    flex: 0 1 auto;
    margin-top: 0;
    padding-left: 2.2vw;
  }
}

@media screen and (min-width: 769px) {
  .more-info .sns-links__brand {
    padding-left: 1.2em;
    font-size: 1.25em;
  }
}

/* X */
.more-info .sns-links .tw .sns-links__logo {
  flex: 0 1 24px;
}

@media screen and (min-width: 769px) {
  .more-info .sns-links .tw .sns-links__logo {
    flex: 0 1 48px;
  }
}


/* ------------------------------------------
  faq
------------------------------------------ */
.faq {
  position: relative;
}

@media screen and (min-width: 600px) {
  .faq {
    display: flex;
  }
}

@media screen and (min-width: 600px) {
  .faq .mainttl {
    flex: 0 1 30%;
    text-align: left;
    line-height: 1.4;
    font-size: 1.5em;
  }
}

.faq .mainttl span {
  color: #999999;
}

/* アコーディオン
--------------------------- */
.faq .accordion {
  flex: 0 1 70%;
}

.faq .accordion-panel {
  border-color: #c4e2ea;
}

.faq .accordion-panel:hover {
  box-shadow: 3.064px 2.571px 8px 0px rgba(54, 54, 54, 0.14);
}

.faq .accordion-panel:hover,
.faq .accordion-panel.is-select,
.faq .accordion-panel:has(button:focus) {
  background-color: #f4fafb;
}

.faq .accordion-panel em {
  font-style: italic;
  margin-right: 2rem;
}

.faq .accordion-btn em {
  color: #0fa8a3;
}

.faq .accordion-box em {
  color: #d92980;
}

/* ワンタイムパスワードのメールが届かない */
.faq .accordion-box .list-num__default {
  margin: 1rem 0;
  padding-left: 3rem;
}

/* その他のよくある質問 */
.faq-more__btn {
  margin-top: 2rem;
  text-align: right;
}
.faq-more__btn a {
  display: inline-block;
}

/* ------------------------------------------
  お知らせ
------------------------------------------ */
.news {
  position: relative;
}

@media screen and (min-width: 600px) {
  .news {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
  }
}

.news h2 span {
  color: #999999;
}

@media screen and (min-width: 600px) {
  .news h2 {
    width: 30%;
    max-width: 360px;
    text-align: left;
    line-height: 1.4;
    font-size: 1.5em;
  }
}

.news-list li dl {
  border-bottom: 1px solid #dddddd;
  padding: 2rem 0;
}

@media screen and (min-width: 600px) {
  .news-list-wrap {
    width: 70%;
  }
}

.news-list dt time {
  color: #999999;
  font-size: 0.913em;
}

.news-list dd a {
  color: #142346;
  -webkit-transition: .3s;
  transition: .3s;
}

.news-list dd a:hover {
  opacity: 0.8;
}

/* カテゴリー共通 */
.category {
  font-size: 0.875em;
  color: #ffffff;
  padding: 2px 1rem;
  margin: 0 1rem 0 0;
}

/* 重要 */
.category.important {
  background-color: #e73c3c;
  color: #ffffff;
}

/* お知らせ */
.category.notice {
  background-color: #FF9800;
  color: #ffffff;
}

/* 新規リリース */
.category.campaign {
  background-color: #4596fb;
  color: #ffffff;
}

/* キャンペーン */
.category.newRelease {
  background-color: #0fa8a3;
  color: #ffffff;
}

/* 自主調査 */
.category.Survey {
  background-color: #724a95;
  color: #ffffff;
}


/* ------------------------------------------

フッター

  ------------------------------------------ */
footer {
  position: relative;
  background: transparent url(../images/footerCtaBg.jpg) no-repeat bottom right;
  background-size: cover;
}

@media screen and (min-width: 600px) {
  footer {
    background-size: contain;
  }
}
  /* ------------------------------------------
    フッター ナビゲーション
  ------------------------------------------ */
.footer-cta {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  flex-wrap: wrap;
  max-width: 375px;
  margin: 0 auto 4rem;
}

@media screen and (min-width: 600px) {
  .footer-cta {
    margin: 0 auto 96px;
  }
}

.footer-cta img {
  width: 80px;
}

@media screen and (min-width: 600px) {
  .footer-cta img {
    width: 160px;
  }
}

.footer-cta p {
  width: 100%;
  text-align: center;
  font-size: 1.25em;
  margin: 1rem 0;
}

@media screen and (min-width: 600px) {
  .footer-cta p {
    margin: 2rem 0;
  }
}

.footer-cta .register-button {
  font-size: 1em;
  letter-spacing: 2px;
}

.footer-cta .register-button:hover {
  letter-spacing: 3px;
}

.footer-cta .register-button:active {
  box-shadow: none;
}

/* ------------------------------------------
  ナビゲーション
------------------------------------------ */
.footer-nav {
  background-color: #35b1bc;
  padding: 0 0 16px;
}

@media screen and (min-width: 600px) {
  .footer-nav {
    padding: 32px 0 16px;
  }
}

.footer-nav nav {
  max-width: 1200px;
}

@media screen and (min-width: 600px) {
  .footer-nav nav {
    width: 96%;
    margin: 0 auto;
  }
}


.footer-nav nav .nav01 a,
.footer-nav nav .nav02 a {
  color: #ffffff;
  /* margin: 0 2rem; */
}

.footer-nav nav .nav01 {
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  /* flex-wrap: wrap; */
  /* margin: 0 0 1rem; */
}

.footer-nav nav .nav01 li {
  width: 25%;
  text-align: center;
}

/* .footer-nav nav .nav01 li:not(:last-child) a::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 48px;
  background: #ffffff;
} */


.footer-nav nav .nav01 a {
  position: relative;
  display: block;
  /* width: 96%; */
  background: rgba(255, 255, 255, 16%);
  line-height: 1.4;
  padding: 1rem 4px;
  -webkit-transition: .3s;
  transition: .3s;
}

.footer-nav nav .nav01 li:not(:last-child) a {
  border-right: 1px solid #35b1bc;
}

@media screen and (min-width: 600px) {
  .footer-nav nav .nav01 a {
    background: transparent;
  }
  .footer-nav nav .nav01 li:not(:last-child) a {
    border-right: 1px solid #eeeeee;
  }
  .footer-nav nav .nav01 a:hover {
    letter-spacing: 2px;
  }
}


.footer-nav nav .nav02 {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  flex-wrap: wrap;
  font-size: 0.813em;
  margin: 2rem 0 0;
}

.footer-nav nav .nav02 li {
  width: 50%;
  padding: 4px;
  box-sizing: border-box;
  text-align: center;
}

@media screen and (min-width: 600px) {
  .footer-nav nav .nav02 li {
    width: auto;
  }
}

.footer-nav nav .nav02 a {
  /* margin: 0 1rem; */
  -webkit-transition: .3s;
  transition: .3s;
}

.footer-nav nav .nav02 a:hover {
  padding-bottom: 6px;
  border-bottom: 1px dotted #eeeeee;
}

/* ------------------------------------------
  sns
------------------------------------------ */
footer .sns {
  width: 200px;
  margin: 3.2rem auto 1rem;
}

footer .sns dt {
  text-align: center;
}

footer .sns dt img {
  width: 100px;
}

footer .sns dd {
  padding: 8px 0;
}

.footerSns {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footerSns li {
  margin: 0 1rem;
  flex: 0 0 32px;
  line-height: 1;
}

.footerSns li img {
  vertical-align: middle;
}

.footerSns .tw {
  flex: 0 0 28px;
}

/* ------------------------------------------
  コピーライト
------------------------------------------ */
footer .copyright {
  font-size: 0.75em;
  font-weight: 400;
  color: #eeeeee;
  text-align: center;
  width: 96%;
  margin: 0 auto;
}

/* ------------------------------------------
  バナーエリア
------------------------------------------ */
footer .banner-area {
  position: relative;
  background: #ffffff;
}

footer .banner-area > div {
  max-width: 1200px;
  margin: 0 auto;
}

/* サイトシール */
footer .banner-area .siteseal-banners {
  display: flex;
  justify-content: center;
  padding: 3rem 0;
  flex-direction: column;
  align-items: center;
}

@media screen and (min-width: 600px) {
  footer .banner-area .siteseal-banners {
    justify-content: center;
    flex-direction: row;
  }
}

footer .banner-area .siteseal-banners li {
  display: flex;
  align-items: center;
  padding: 0.8rem 0.8rem;
}

/* その他バナー */
footer .banner-area {
  &:has(.various-banners) {
    padding: 3rem 2rem;
  }

  .various-banners {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem 2rem;

    img {
      vertical-align: top;
    }
  }
}


/* ----------------------------
セキュリティフッター
---------------------------- */
.security-footer {
  width: 100%;
}
.logos {
  width: 96%;
  margin: 0 auto;
  padding: 20px 20px;
  .logo {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    img {
      width: auto;
      height: 18px;
    }
  }
  .sns-logos {
    display: flex;
    justify-content: center;
    gap: 0 10px;
    > li {
      height: 20px;
    }
    > li > a > img {
      width: 20px;
      height: 20px;
    }
  }
}

.siteseals {
  text-align: center;
  padding: 40px 0;
  img {
    margin: 0 5px;
  }
}


@media screen and (min-width: 600px) {
  .security-footer {
    width: 1024px;
    margin: 0 auto;
  }

  .logos {
    width: 100%;
    display: flex;
    padding: 20px 10px;
    .logo {
      padding-bottom: 0;

      img {

      }
    }
    .sns-logos {
      padding-left: 20px;
    }
  }
}



@media screen and (min-width: 600px) {
  .siteseals {

    /* padding: 1rem; */
  }
}



/* ------------------------------------------
 トップへ戻る
------------------------------------------ */
#page-top {
  position: relative;
  z-index: 1000;
  display: none;
  position: fixed;
  right: 8px;
  bottom: 64px;
  width: 40px;
  height: 40px;
}

#page-top a {
  border-radius: 50px;
  background: rgba(51, 51, 51, 0.2);
  display: block;
  width: 40px;
  height: 40px;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: .3s;
  transition: .3s;
}

#page-top a:after {
  content: "";
  background: transparent url(../images/topArrow.png) 0 0 no-repeat;
  background-size: contain;
  width: 32px;
  height: 32px;
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 20px;
  font-size: 2rem;
}

#page-top a:hover {
  background: rgba(51, 51, 51, 0.4);
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
}
@media screen and (min-width: 426px) {
  #page-top {
    right: 24px;
    bottom: 64px;
    width: 50px;
    height: 50px;
  }

  #page-top a {
    width: 50px;
    height: 50px;
  }


}




/* ------------------------------------------
  ログイン モーダル画面
------------------------------------------ */
.modal-close:hover,
#modal-open:hover {
  cursor: pointer;
}

#modal-content-01 {
  display: none;
  width: 330px;
  margin: 0;
  padding: 2rem 1.6rem;
  background: #ffffff;
  box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.4);
  position: fixed;
  z-index: 12;
  border-radius: 5px;
  line-height: 1.7;
}
@media screen and (max-width: 425px) {
  #modal-content-01 {
    position: absolute;
    width: 90%;
  }
}

#modal-content-01 .indexLoginBox {
  text-align: center;
  display: -webkit-box;
  display: flex;
  margin-bottom: 8px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

#modal-content-01 .indexLoginBox dl {
  margin-top: 24px;
}

/* infoQロゴ */
#modal-content-01 .indexLoginBox > dt {
  text-align: center;
}

#modal-content-01 .indexLoginBox > dt img {
  width: 160px;
}

@media screen and (max-width: 425px) {
  #modal-content-01 .indexLoginBox {
    padding: 8px;
  }
}

/* フォーム項目 */
#modal-content-01 .indexLoginBox dd {
  text-align: left;
  color: #405762;
  padding: 1rem 0 0;
}

/* メアド＆パスワード入力フィールド */
#modal-content-01 input:not(.login-button) {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 .5em;
  border: 2px solid #cccccc;
  color: #333333;
  font-size: 18px;
  font-size: 1.8rem;
  border-radius: 4px;
  box-sizing: border-box;
}

#modal-content-01 input:not(.login-button):focus {
  outline: 0;
  border-color: #E91E63;
}

/* ログインボタン */
#modal-content-01 .button-area .login-button {
  margin: 2rem auto 0;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: 2px;
  border: 3px solid #d92980;
  padding: 1rem 4rem;
  cursor: pointer;
}

/* パスワードをお忘れの方 */
.modal-content_login_forgetPW {
  margin-top: 24px;
  text-align: center;
}

.modal-content_login_forgetPW a {
  position: relative;
  font-size: 14px;
  font-size: 1.4rem;
  color: #405762;
  border-bottom: 1px dotted #405762;
  padding: 0 0 0.5em 24px;
  -webkit-transition: .3s;
  transition: .3s;
}

.modal-content_login_forgetPW a::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: transparent url(../images/help.png) 0 0 no-repeat;
  background-size: contain;
}

.modal-content_login_forgetPW a:hover {
  border-bottom: 1px dotted transparent;
}

#modal-overlay,
#modal-overlay_login {
  z-index: 11;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(51, 51, 51, 0.75);
}

#modal-open {
  text-decoration: underline;
  margin-right: .3em;
}

#modal-open {
  -webkit-transition: .3s;
  transition: .3s;
}

#modal-open:hover {
  background: #E91E63;
}

/* 閉じるボタン */
.modal-close {
  position: absolute;
  top: 0;
  right: 16px;
  margin-top: 8px;
  display: block;
  text-align: center;
}
@media screen and (max-width: 425px) {
  .modal-close {
    right: 8px;
  }
}

.modal-close img {
  width: 16px;
}

/* 入力エラーメッセージ */
#modal-content-01 .alert {
  display: block;
  line-height: 1.3;
  position: relative;
  font-size: 0.913em;
  color: #d92980;
  margin-top: 0.6em;
  padding-left: 22px;
}

#modal-content-01 .alert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: transparent url(../images/errorArrow.png) 0 0 no-repeat;
  background-size: contain;
}

/*-- ログイン失敗（上部に表示） --*/
.login-errorMessage {
  width: 322px;
  position: relative;
  font-size: 0.913em;
  color: #d92980 !important;
  line-height: 1.4;
  background: #f1e0e8;
  border-radius: 4px;
  border: 1px solid #d92980;
  margin: 1rem 0 1rem;
  padding: 4px 4px 4px 32px !important;
  box-sizing: border-box;
}
@media screen and (max-width: 425px) {
  .login-errorMessage {
    width: 100%;
  }
}

.login-errorMessage:before {
  content: '';
  position: absolute;
  top: 0;
  left: 6px;
  bottom: 0;
  margin: auto;
  display: inline-block;
  width: 21px;
  height: 18px;
  background: transparent url(../images/error.png) 0 0 no-repeat;
  background-size: contain;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ログインボタン */
.modal-content input[type=submit],
.modal-content input[type=button] {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  box-sizing: border-box;
  /* width: 100%; */
}

.modal-content input[type=email],
.modal-content input[type=password] {
  font-size: 1.6rem;
  font-weight: 700;
  color: #33475b;
  border-radius: 4px;
  border: 1px solid #bfcacb;
  background-color: #f9f9f9;
}

/* ----------------------------
アイコンでパスワードの表示・非表示切替
---------------------------- */
::-ms-reveal {
  display: none;
}

.input-wrap{
  position: relative;
}
/* @media screen and (min-width: 1024px) {
  .input-wrap{
    position: relative;
    width: fit-content;
  }
} */

.toggle-pass {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}