@charset "UTF-8";

/* 紹介者キャンペーン：Word原稿の見出し・図解・説明文の順序に合わせる。 */
.referral-flow {
  display:grid;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}

.referral-step {
  padding:30px 34px 34px;
  border:2px solid #d5dfe2;
  background:#fff;
  min-width:0;
}

.referral-step-heading {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:26px;
}

.referral-step-tab {
  flex:0 0 auto;
  padding:10px 24px 10px 16px;
  clip-path:polygon(0 0,85% 0,100% 50%,85% 100%,0 100%);
  background:var(--pink);
  color:#fff;
  font-size:1.25rem;
  font-weight:800;
  line-height:1.5;
}

.referral-step h3 {
  font-size:1.5rem;
  line-height:1.65;
}

.referral-keep-word {
  display:inline-block;
}

.referral-diagram {
  max-width:650px;
  margin:0 auto 30px;
}

.referral-speech {
  position:relative;
  width:fit-content;
  max-width:100%;
  margin:0 auto 24px;
  padding:12px 23px;
  border:2px solid #d2a542;
  background:#fff6d8;
  font-size:1.125rem;
  font-weight:700;
  text-align:center;
}

.referral-speech::after {
  content:"";
  position:absolute;
  left:22px;
  bottom:-13px;
  width:20px;
  height:20px;
  border-left:2px solid #d2a542;
  border-bottom:2px solid #d2a542;
  background:#fff6d8;
  transform:skewY(-43deg);
}

.referral-people {
  display:grid;
  grid-template-columns:130px minmax(0,1fr) 130px;
  gap:24px;
  align-items:start;
}

.referral-person {
  text-align:center;
}

.referral-person img {
  width:96px;
  height:96px;
  margin:0 auto 6px;
}

.referral-person figcaption {
  font-size:1.125rem;
  font-weight:700;
}

.referral-transfer {
  position:relative;
  padding:12px 24px 12px 12px;
  margin-top:24px;
  text-align:center;
  font-size:1rem;
  font-weight:700;
  line-height:1.6;
}

.referral-transfer>span {
  position:absolute;
  inset:-6px 0;
  background:#e8f3f9;
  clip-path:polygon(0 20%,82% 20%,82% 0,100% 50%,82% 100%,82% 80%,0 80%);
}

.referral-transfer p {
  position:relative;
  z-index:1;
}

.referral-copy {
  max-width:840px;
  margin:0 auto;
  font-size:1rem;
  line-height:1.9;
}

.referral-circle-note {
  padding-left:1em;
  text-indent:-1em;
}

.referral-circle-note+.referral-circle-note {
  margin-top:14px;
}

.referral-note {
  margin-top:8px;
  padding-left:1em;
  text-indent:-1em;
}

.referral-copy-group+.referral-copy-group {
  margin-top:26px;
}

.referral-copy h4 {
  font-size:1.125rem;
  margin-bottom:7px;
  line-height:1.8;
}

.referral-bullet-list,.referral-choice-list {
  list-style:none;
  padding:0;
  margin:0;
}

.referral-bullet-list li,.referral-choice-list li {
  padding-left:1.2em;
  position:relative;
}

.referral-bullet-list li::before,.referral-choice-list li::before {
  content:"・";
  position:absolute;
  left:0;
}

.referral-choice-list li::before {
  content:"□";
}

.referral-step .application-screen {
  max-width:520px;
  margin:0 auto 28px;
}

.referral-mobile-break {
  display:none;
}

@media(max-width:700px) {
  .referral-flow {gap:20px;}
  .referral-step {padding:20px 17px 25px;}
  .referral-step-heading {gap:12px;align-items:flex-start;margin-bottom:22px;}
  .referral-step-tab {font-size:1rem;padding:7px 17px 7px 10px;}
  .referral-step h3 {font-size:1.125rem;line-height:1.7;}
  .referral-diagram {margin-bottom:24px;}
  .referral-speech {font-size:1rem;padding:10px 12px;margin-bottom:25px;}
  .referral-mobile-break {display:block;}
  .referral-people {grid-template-columns:66px minmax(0,1fr) 66px;gap:5px;}
  .referral-person img {width:60px;height:60px;}
  .referral-person figcaption {font-size:.875rem;}
  .referral-transfer {font-size:.875rem;padding:8px 12px 8px 4px;margin-top:10px;}
  .referral-transfer>span {inset:-13px 0;}
  .referral-copy h4 {font-size:1rem;}
  .referral-step .application-screen {margin-bottom:24px;}
}

@media print {
  .referral-step {break-inside:avoid;}
}