/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjp.css');

/* Base */
body { background-color: #f0f4f8; }
p, ul, li, table, th, td { font-family: 'Noto Sans JP', sans-serif; color: #747474; }
section { padding: 30px 0; }
img { max-width: 100%; height: auto; display: block; }

/* Hero */
.hero-block { padding: 30px 0; }
.hero-block p { text-align: center; }
.hero-block p img { max-width: 500px; margin: 0 auto; border-radius: 8px; }
.hero-block h1 {
  text-align: center; font-family: 'M PLUS Rounded 1c', sans-serif;
  color: #00A0E8; font-size: 50px; line-height: 1.4; margin-bottom: 10px;
}
.hero-block h2 {
  text-align: center; font-size: 30px; line-height: 1.4; color: #00A0E8;
  font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700;
  background-color: rgba(0, 113, 206, 0.1); border: 2px solid #00A0E8;
  padding: 8px 16px; border-radius: 8px; display: block; width: 70%; margin: 0 auto;
}

/* Box */
.referrer-block {
  background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.1);
  border-radius: 12px; padding: 40px; margin-bottom: 15px;
}
.referrer-block.flow-block { padding: 0; background: #FDF7EC; }
.referrer-block.flow-block img { border-radius: 12px; }
.referrer-block h3 {
  text-align: center; font-size: 36px; line-height: 1.4; margin-bottom: 20px;
  color: #00A0E8; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700;
}
.referrer-block h4 {
  font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700; font-size: 24px; margin-bottom: 8px;
}
.referrer-block p { font-size: 18px; color: #073b4c; }
.referrer-lead h3 { color: #073b4c; }
.referrer-lead h3 span {
  color: #ff7b8b; background-image: linear-gradient(120deg, #ffff66 0%, #ffff66 100%);
  background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 80%;
}
.referrer-point {
  background: #ff7b8b; color: #fff; padding: 4px 8px; border-radius: 8px; text-align: center;
  font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700;
}

/* Entry */
.entry-wrap { padding: 20px 0 0; }
.entry-wrap h3 {
  text-align: center; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700;
  font-size: 28px; position: relative; padding: 0 65px;
}
.entry-wrap h3:before {
  position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 2px; content: ''; background: #000;
}
.entry-wrap h3 span { position: relative; padding: 0 1em; background: #f0f4f8; }
.entry-block { text-align: center; padding: 15px; }
.entry-block a {
  display: flex; justify-content: center; align-items: center;
  font-family: 'M PLUS Rounded 1c', sans-serif; width: 100%; max-width: 460px; margin: 0 auto;
  padding: 2em 1em; border: 2px solid #000; background: linear-gradient(to right, #00A0E8 50%, #000 50%);
  background-size: 200% auto; color: #fff; font-size: 20px; font-weight: 600;
  text-decoration: none; border-radius: 8px; transition: .3s; position: relative;
}
.entry-block a:after {
  content: ""; position: absolute; right: -7px; bottom: -7px; width: 100%; height: 100%;
  border-right: 2px solid #000; border-bottom: 2px solid #000; border-radius: 8px;
}
.entry-block a:hover { color: #fff; background-position: -100% 0; }

/* Login section */
.section-login { background: #fff; }
.password-link a {
  color: #333; padding-top: 5px; display: block; text-align: center;
}
.password-link a:hover { text-decoration: underline; }
.login-link { padding: 15px; }
.login-link a {
  display: block; max-width: 600px; border: 2px solid #000; background: #fff; text-align: center;
  color: #000; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700; font-size: 18px;
  padding: 20px; border-radius: 8px; margin: 0 auto;
}
.login-link a:hover { background: #000; color: #fff; }

/* FAQ (Accordion) */
.faq-wrap { padding: 30px 0; }
.faq-wrap h3 {
  text-align: center; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700;
  font-size: 28px; position: relative; padding: 0 65px;
}
.faq-wrap h3:before {
  position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 2px; content: ''; background: #000;
}
.faq-wrap h3 span { position: relative; padding: 0 1em; background: #f0f4f8; }

.gutter > *:not(:last-child) { margin-bottom: .5rem; }

.accordion_area .accordion_one .ac_header {
  background: #fff; border: 1px solid #f1f1f1; padding: 15px; position: relative; cursor: pointer; transition: .2s;
}
.accordion_area .accordion_one .ac_header:not(.open):hover { background: #f1f8ff; }
.accordion_area .accordion_one:nth-child(odd) .ac_header { background: #f5f5f5; }
.accordion_area .accordion_one:nth-child(odd) .ac_header:not(.open):hover { background: #f1f8ff; }

.accordion_area .accordion_one .ac_header .i_box {
  position: absolute; top: 50%; right: 1rem; width: 14px; height: 14px; margin-top: -7px;
}
.accordion_area .accordion_one .ac_header .i_box:before,
.accordion_area .accordion_one .ac_header .i_box:after {
  position: absolute; content: ""; box-sizing: border-box;
}
.accordion_area .accordion_one .ac_header .i_box:before { border-top: 2px solid #00A0E8; width: 14px; right: 3px; top: 6px; }
.accordion_area .accordion_one .ac_header .i_box:after  { border-left: 2px solid #00A0E8; height: 15px; right: 9px; top: 0; transition: .3s; }
.accordion_area .accordion_one .ac_header.open .i_box:after { height: 0; }

.accordion_area .accordion_one .ac_inner {
  display: none; padding: 15px 25px;
  border-left: 1px solid #f1f1f1; border-right: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1;
  background: #fff;
}
.accordion_one .ac_header.open + .ac_inner { display: block; } /* JSフォールバック */

.p-faq__headinner { display: block; padding-left: 25px; position: relative; line-height: 1.5; }
.p-faq__headinner::before {
  position: absolute; left: 0; content: "Q．"; color: #00A0E8; font-size: 16px; font-weight: bold;
}
.p-faq__headinner p.p-faq__q-txt { font-size: 15px; margin-bottom: 0; padding-right: 20px; }

.p-faq__bodyinner { display: block; padding-left: 35px; position: relative; line-height: 1.5; }
.p-faq__bodyinner::before {
  position: absolute; left: 0; content: "A．"; color: #de0000; font-size: 16px; font-weight: bold;
}
.p-faq__bodyinner p.p-faq__a-txt { font-size: 15px; margin-bottom: 0; }

/* Animate-in */
.animate-box { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.animate-box._in { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 767px) {
  body { font-size: 14px; }
  section { padding: 15px 0; }
  .hero-block h1 { font-size: 32px; }
  .hero-block h2 { font-size: 20px; width: 90%; padding: 6px 12px; }
  .hero-block p img { max-width: 80%; }
  .entry-wrap h3, .faq-wrap h3 { font-size: 22px; padding: 0 35px; }
  .entry-block a { font-size: 16px; padding: 1.5em 1em; }
  .referrer-block { padding: 20px; }
  .referrer-block h3 { font-size: 24px; margin-bottom: 0; }
  .referrer-block h4 { font-size: 18px; }
  .referrer-block p { font-size: 16px; }
  .referrer-point { font-size: 14px; padding: 4px 6px; margin-bottom: 6px; }
}

/*ロゴレギュレーション説明*/
.referrer-block .logo_info{
  font-size: 12px;
}

/*画像センター*/
.container img{
  margin: 0 auto;
}