@charset "UTF-8";
/* ==================== 1_base.css ==================== */
html {
  --color-red: #d30635;
  --color-blue: #1b62a7;
  background: black;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-feature-settings: "palt";
  letter-spacing: 0.025em;
  background: #ab0026;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main > * {
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 567px) {
  main {
    padding-top: 4.5rem;
  }
}

@media (min-width: 568px) {
  main {
    padding-top: 4rem;
  }
}

/* ==================== afaa.css ==================== */
.AFAA {
  margin: 0.5rem 0;
  display: flex;
  background: white;
  color: #1b62a7;
}

.AFAA p {
  text-align: justify;
}

.AFAA .logo {
  order: -1;
}

@media (max-width: 567px) {
  .AFAA {
    padding: 1rem;
    flex-direction: column;
  }
}

@media (min-width: 568px) {
  .AFAA {
    padding: 1rem;
    justify-content: space-around;
    align-items: center;
  }
  .AFAA img {
    max-width: none;
  }
  .AFAA .body h3 {
    text-align: left;
  }
}

/* ==================== connection.css ==================== */
.Connection {
  background: white;
}

.Connection section {
  border-top: 1px solid var(--color-blue);
}

.Connection h2 {
  line-height: 4rem;
}

.Connection h2 img {
  vertical-align: middle;
}

.Connection::after {
  content: "";
  display: block;
  width: 100%;
  background: no-repeat center center;
  background-size: cover;
}

.Connection .partners figure {
  margin: 0;
}

.Connection .cases ul {
  padding: 0;
  list-style-type: none;
}

.Connection .cases li {
  font-size: 125%;
}

@media (max-width: 567px) {
  .Connection section {
    margin: 2rem 1rem;
  }
  .Connection::after {
    background-image: url(../images/connection_image_sp.jpg);
    height: 12.5rem;
  }
}

@media (min-width: 568px) {
  .Connection section {
    margin: 3rem auto;
    width: calc(100% - 2rem);
    max-width: 50rem;
  }
  .Connection::after {
    background-image: url(../images/connection_image_pc.jpg);
    height: 18rem;
  }
}

/* partners */
/* cases */
@media (max-width: 567px) {
  .Connection .cases li {
    margin: 0.5em 0;
  }
}

@media (min-width: 568px) {
  .Connection .cases ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .Connection .cases li {
    padding: 0 1.5em;
  }
  .Connection .cases li:nth-of-type(n + 2) {
    position: relative;
  }
  .Connection .cases li:nth-of-type(n + 2)::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1.5em;
    transform: translateY(-50%) rotate(30deg);
    border-right: 1px solid black;
    background: black;
  }
}

/* ==================== flow.css ==================== */
.Flow {
  margin-top: 2rem;
  background: white;
}

.Flow h2 {
  margin: 0;
  background: #e8eff6 no-repeat right bottom;
  background-size: contain;
  text-align: left;
}

.Flow .body {
  text-align: justify;
}

.Flow .body .step {
  border-top: 1px solid #e9829a;
}

.Flow .body .step .cap h3 {
  color: #d30635;
  font-weight: normal;
}

.Flow .body .step .cap h3.bold {
  font-weight: 900;
  font-size: 130%;
}

.Flow .body .step .content {
  font-weight: 500;
}

.Flow .body .step .content .font-bold {
  font-weight: 900;
}

.Flow .body .step .content strong {
  font-weight: 900;
}

.Flow .body .step .content strong.red {
  color: #ab0026;
  font-weight: 900;
  font-size: 18px;
}

.Flow .body .step .content .text-lighter {
  font-weight: 300;
}

.Flow .body .step a {
  background-color: #22b2e7;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 8px 16px;
  display: inline-block;
}

.Flow .body .step a:hover {
  background-color: #1b62a7;
}

.Flow .body h4 {
  font-size: 135%;
  font-weight: bold;
}

.Flow .body h4 span {
  display: inline-block;
}

.Flow .step1 .member-tokuten span {
  font-weight: bold;
}

.Flow .step1 .member-tokuten p {
  color: #1b62a5;
  font-weight: bold;
  margin-top: 0;
}

.Flow .step2 .content .jukou-kaku {
  margin-bottom: 32px;
  display: flex;
  justify-content: normal;
  flex-wrap: wrap;
}

.Flow .step2 .content .jukou-kaku h4 {
  margin-bottom: 12px;
  text-align: unset;
}

.Flow .step2 .content .jukou-kaku h4 .del {
  color: #f00;
  text-decoration: line-through;
  display: inline !important;
}

.Flow .step2 .content .jukou-kaku h4 .del span {
  color: #000;
  display: inherit;
}

.Flow .step2 .content .jukou-kaku .inner-left {
  padding-right: 32px;
}

.Flow .step2 .content .jukou-kaku .inner-right {
  color: #EB1C24;
}

.Flow .step2 .content .jukou-kaku .inner-right p {
  margin: 0;
}

.Flow .step2 .content .jukou-kaku .inner-right h5 {
  margin: 0;
  font-size: 1rem;
  line-height: normal;
}

.Flow .step2 .content .jukou-kaku .inner-right h5 span {
  font-size: 200%;
}

.Flow .step2 .content .jukou-kaku .inner-right .coupon-chord {
  font-weight: 900;
  color: #000;
}

.Flow .step2 .set-contents {
  display: flex;
  margin-bottom: 24px;
}

.Flow .step2 .set-contents h5 {
  margin: 0;
  font-weight: normal;
  font-size: inherit;
}

.Flow .step2 .set-contents ul {
  margin: 0;
}

.Flow .step2 .no-decoration {
  color: #0874b5 !important;
  padding: 0 !important;
  background-color: unset !important;
}

.Flow .step3 h4 {
  color: var(--color-blue);
}

.Flow .step3 figure {
  margin: 0;
}

.Flow .step ul.notes {
  padding: 0;
  list-style-type: none;
}

.Flow .step ul.notes li {
  position: relative;
  padding-left: 1.1em;
}

.Flow .step ul.notes li::before {
  content: "※";
  position: absolute;
  left: 0;
}

@media (max-width: 567px) {
  .Flow h2 {
    background-image: url(../images/flow_back_sp.jpg);
    height: 13.75rem;
  }
  .Flow h2 img {
    position: relative;
    left: 1rem;
    top: 1rem;
    width: 85%;
  }
  .Flow .body {
    padding: 0 1rem 2rem;
  }
  .Flow .step {
    padding-top: 1.5rem;
  }
  .Flow .step:not(.step1) {
    margin-top: 1.5rem;
  }
  .Flow .step h3 {
    margin-top: 0;
    text-align: center;
  }
  .Flow .body .step .content {
    padding-left: 1rem;
  }
  .Flow .step3 .content > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .Flow .step3 .content > div:nth-of-type(n + 2) {
    margin-top: 1rem;
  }
  .Flow .step3 h4 {
    margin-bottom: 0;
    text-align: center;
  }
  .Flow .step4 figure {
    margin-top: 1.5rem;
    text-align: center;
  }
}

@media (min-width: 568px) {
  .Flow .body {
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 60rem;
  }
  .Flow h2 {
    padding-left: 2rem;
    background-image: url(../images/flow_back_pc.jpg);
    line-height: 15rem;
  }
  .Flow h2 img {
    vertical-align: middle;
  }
  .Flow .step {
    display: grid;
    grid-template-columns: 16rem auto;
    align-items: center;
    padding: 2rem 1rem;
  }
  .Flow .step .cap {
    width: 16rem;
  }
  .Flow .step .content *:first-child {
    margin-top: 0;
  }
  .Flow .step .content *:last-child {
    margin-bottom: 0;
  }
  .Flow .step3 .content {
    display: table;
  }
  .Flow .step3 .content > div {
    display: table-row-group;
  }
  .Flow .step3 .content > div > div {
    display: table-cell;
    vertical-align: middle;
  }
  .Flow .step3 .content > div:nth-of-type(n + 2) > div {
    padding-top: 1rem;
  }
  .Flow .step3 .content .image {
    padding-right: 1rem;
    text-align: center;
  }
  .Flow .step3 .content .image img {
    max-width: none;
  }
  .Flow .step3 h4 {
    margin-bottom: 0;
  }
  .Flow .step4 .content {
    display: flex;
    align-items: center;
  }
  .Flow .step4 .content figure {
    margin: 0;
    padding-left: 1rem;
  }
  .Flow .step4 .content figure img {
    max-width: none;
  }
  .Flow .step6 h4 span:nth-of-type(1) {
    display: block;
  }
}

/* ==================== footer.css ==================== */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1rem 2rem;
  background: black;
  color: rgba(255, 255, 255, 0.7);
}

footer > * {
  margin: 1rem 0;
}

footer p {
  text-align: justify;
}

footer dl {
  text-align: left;
}

footer dl dt {
  color: white;
}

footer dl a {
  color: inherit;
  text-decoration: none;
}

footer dl a:hover {
  text-decoration: underline;
}

@media (max-width: 567px) {
  footer dl {
    font-size: 90%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  footer dt {
    padding: 1em 1em 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
  }
  footer dd {
    margin: 0;
    padding: 0 1em 1em;
  }
}

@media (min-width: 568px) {
  footer p {
    width: 40rem;
  }
  footer dl {
    display: grid;
    grid-template-columns: max-content auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 75%;
  }
  footer dl > * {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding: 1em;
  }
  footer dd {
    margin: 0;
  }
}

/* ==================== form.css ==================== */
.Form {
  background: white;
}

.Form dl {
  margin: 2rem auto;
  text-align: left;
}

.Form dt {
  font-weight: bold;
}

.Form input,
.Form textarea,
.Form button {
  outline: none;
}

.Form input {
  box-sizing: border-box;
  width: 100%;
  border: none;
  padding: 0.75em;
  background: rgba(0, 0, 0, 0.05);
  font-size: inherit;
  font-family: inherit;
}

.Form textarea {
  box-sizing: border-box;
  width: 100%;
  border: none;
  padding: 0.75em;
  background: rgba(0, 0, 0, 0.05);
  font-size: inherit;
  font-family: inherit;
  height: 10em;
}

.Form button {
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.Form .sended {
  margin: 3rem 0;
}

.Form .sended p {
  margin: 1.5rem 0;
}

.Form .sended a {
  color: var(--color-red);
  font-weight: bold;
  font-size: 120%;
}

@media (max-width: 567px) {
  .Form {
    width: 23rem;
    margin: 1rem;
    padding: 1rem;
  }
  .Form dt {
    margin: 0.5em 0;
  }
  .Form dd {
    margin: 0.5em 0;
    margin: 0;
  }
  .Form input,
  .Form textarea {
    font-size: 16px;
  }
}

@media (min-width: 568px) {
  .Form {
    box-sizing: border-box;
    width: 48rem;
    margin: 2rem auto;
    padding: 2rem;
  }
  .Form dl {
    display: grid;
    grid-template-columns: max-content auto;
    grid-gap: 1em;
    align-items: center;
    width: 40rem;
  }
  .Form input[name="name"], .Form input[name="email"], .Form input[name="tel"] {
    width: 20em;
  }
}

/* ==================== form_sended.css ==================== */
/* ==================== header.css ==================== */
header {
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 11;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  background: rgba(171, 0, 38, 0.4);
}

@media (max-width: 567px) {
  header {
    justify-content: space-between;
    height: 4.5rem;
    padding: 0 0.5rem;
  }
  header .logo img {
    width: 3rem;
  }
  header .btn {
    display: block;
  }
  header .btn a {
    display: block;
  }
  header .btn a:first-child {
    margin-bottom: 6px;
  }
  header .btn a img {
    height: 7vw;
    display: block;
  }
}

@media (min-width: 568px) {
  header {
    padding: 0 1rem;
    height: 4rem;
  }
  header img {
    font-size: 0.8rem;
  }
  header .btn {
    margin-left: auto;
    display: flex;
  }
  header .btn a {
    display: inline-block;
    margin: 0 0.7vw;
  }
  header .title {
    margin-left: 2rem;
  }
}

/* ==================== igfi.css ==================== */
.IGFI {
  margin: 0.5rem 0;
}

.IGFI h2 {
  text-align: left;
  border-bottom: 1px solid black;
  padding-bottom: 0.5rem;
}

.IGFI h3 {
  text-align: left;
}

.IGFI p {
  text-align: justify;
}

.IGFI p span.about {
  color: #1b62a7;
}

.IGFI p:nth-of-type(1) {
  font-size: 125%;
}

@media (max-width: 567px) {
  .IGFI {
    padding: 1rem;
    background: white;
  }
}

@media (min-width: 568px) {
  .IGFI {
    padding: 2rem;
    padding-right: 50%;
    background: white url(../images/igfi_back_pc.jpg) no-repeat right center;
    background-size: contain;
  }
  .IGFI h3 {
    margin-top: 2rem;
  }
}

/* ==================== loaded.css ==================== */
body:not(.loaded) {
  opacity: 0;
}

body.loaded {
  opacity: 1;
  transition: opacity 400ms ease;
}

/* ==================== message.css ==================== */
.Message {
  overflow: hidden;
  background: #e8eff6;
  margin-top: 2rem;
}

.Message h2 {
  font-size: 115%;
  text-align: left;
}

.Message h2 .title img {
  display: block;
  margin-bottom: 1em;
}

.Message p {
  text-align: justify;
}

.Message figure {
  margin: 0;
}

@media (max-width: 567px) {
  .Message {
    padding: 1rem;
  }
  .Message h2 span {
    display: block;
  }
  .Message .pic {
    float: right;
    margin-top: -1.5em;
  }
  .Message .pic img {
    display: inline-block;
    margin: 0 0 1em 1em;
  }
  .Message figure {
    padding: 3rem 0;
  }
  .Message figure img {
    transform: scale(1.2);
  }
}

@media (min-width: 568px) {
  .Message {
    padding: 2rem;
    padding-right: 50%;
    position: relative;
  }
  .Message h2 {
    display: flex;
    align-items: center;
  }
  .Message h2 .title {
    margin-left: 1rem;
    order: 1;
  }
  .Message p:nth-of-type(1) {
    margin-top: 1.5rem;
  }
  .Message figure {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(2rem, -50%);
    max-width: none;
  }
}

/* ==================== offer.css ==================== */
.Offer {
  margin: 2rem 0;
}

.Offer .body {
  padding: 2rem 1rem;
}

.Offer.cp2004 .btn {
  margin-top: 1rem;
}

@media (max-width: 567px) {
  .Offer {
    background: white;
  }
  .Offer::before {
    content: "";
    display: block;
    width: 100%;
    height: 17.5rem;
    background: url(../images/offer_back_sp.jpg) no-repeat left top;
    background-size: cover;
  }
  .Offer .body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .Offer .body h2 {
    margin: 0;
  }
}

@media (min-width: 568px) {
  .Offer {
    background: white url(../images/offer_back_pc.jpg) no-repeat right center;
    background-size: contain;
  }
  .Offer .body {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    grid-gap: 0 1rem;
  }
  .Offer .body h2 {
    grid-column: 1/3;
  }
}

/* ==================== offer_cp2004.css ==================== */
@media (min-width: 568px) {
  .Offer.cp2004 .body {
    display: flex;
    flex-direction: column;
  }
}

/* ==================== program.css ==================== */
.Program .body {
  background: white;
}

.Program h2 {
  line-height: 5rem;
}

.Program h2 img {
  vertical-align: middle;
}

.Program .table dl {
  text-align: left;
}

.Program .table dt {
  color: var(--color-red);
}

.Program .table dd {
  font-size: 125%;
}

.Program .table dl {
  border-bottom: 1px solid #ccc;
}

.Program .image figure {
  margin: 0;
}

@media (max-width: 567px) {
  .Program .body {
    padding: 1rem 1rem 2rem;
  }
  .Program h2 img {
    font-size: 3.5vw;
  }
  .Program .image {
    margin: 1.5rem 0;
  }
  .Program .image img {
    max-width: none;
  }
  .Program .table dt {
    border-top: 1px solid #ccc;
    padding: 1em 1em 0;
  }
  .Program .table dd {
    padding: 0 1em 1em;
    margin: 0;
  }
}

@media (min-width: 568px) {
  .Program .body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
  .Program .body .image {
    order: 1;
    margin-left: 3rem;
  }
  .Program .table dl {
    display: grid;
    grid-template-columns: max-content max-content;
  }
  .Program .table dt {
    border-top: 1px solid #cccccc;
    padding: 0 1em;
    line-height: 3rem;
  }
  .Program .table dd {
    border-top: 1px solid #cccccc;
    padding: 0 1em;
    line-height: 3rem;
    margin: 0;
  }
}

/* ==================== recommend.css ==================== */
.Recommend {
  margin-top: 2rem;
  background: white;
}

.Recommend h2 {
  margin: 0;
  background: white no-repeat right bottom;
}

.Recommend h2 img {
  vertical-align: middle;
}

@media (max-width: 567px) {
  .Recommend h2 {
    padding-bottom: 1px;
    background: white;
  }
  .Recommend h2::before {
    content: "";
    display: block;
    width: 100%;
    height: 17.5rem;
    background: url(../images/recommend_back_sp.jpg) no-repeat center center;
    background-size: cover;
  }
  .Recommend h2 img {
    display: block;
    width: 80%;
    margin: 1.5rem auto;
  }
}

@media (min-width: 568px) {
  .Recommend h2 {
    background: white url(../images/recommend_back_pc.jpg) no-repeat right center;
    background-size: contain;
    line-height: 12.5rem;
  }
}

.Recommend {
  overflow: hidden;
}

.Recommend .case {
  position: relative;
  background: #ab0026;
}

.Recommend .case::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: white url(../images/recommend_arrow.svg) no-repeat center bottom;
  background-size: 101%;
}

.Recommend .features {
  background: white;
}

.Recommend .features2,
.Recommend .features4,
.Recommend .features6 {
  padding-top: 0;
}

.Recommend .features p {
  text-align: justify;
}

@media (max-width: 567px) {
  .Recommend .case {
    margin-bottom: 1.5rem;
  }
  .Recommend .case::after {
    height: 1.5rem;
  }
  .Recommend .case h3 {
    margin: 0;
    padding: 1.5rem;
  }
  .Recommend .case h3 img {
    width: 100%;
  }
  .Recommend .features {
    padding: 1rem;
  }
  .Recommend .features2,
  .Recommend .features4,
  .Recommend .features6 {
    padding-top: 0;
  }
  .Recommend .features h3 img {
    font-size: 1.2rem;
  }
  .Recommend .features > img {
    width: 100%;
  }
  .Recommend .features p {
    font-size: 125%;
  }
}

@media (min-width: 568px) {
  .Recommend {
    overflow: hidden;
  }
  .Recommend .body {
    padding: 0 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .Recommend .case {
    margin-bottom: 1.25rem;
    order: 1;
  }
  .Recommend .case::after {
    height: 1.25rem;
  }
  .Recommend .features {
    order: 2;
  }
  .Recommend .features2,
  .Recommend .features4,
  .Recommend .features6 {
    order: 3;
  }
  .Recommend .case h3,
  .Recommend .features {
    padding: 0 1rem;
  }
  .Recommend .case1,
  .Recommend .case3 {
    position: relative;
  }
  .Recommend .case1::before,
  .Recommend .case3::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    background: #ab0026;
    width: 100%;
    height: 100%;
  }
  .Recommend .case1::before {
    right: 100%;
  }
  .Recommend .case3::before {
    left: 100%;
  }
  /* order */
}

/* ==================== top.css ==================== */
.Top {
  position: relative;
}

.Top .body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.Top .body h1 {
  margin: 0;
}

.Top .body p {
  margin: 1rem 0 0;
}

.Top .back {
  overflow: hidden;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
}

.Top .back video {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
}

.Top .back::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/video_filter.png);
  background-size: 4px;
}

@media (max-width: 567px) {
  .Top {
    height: 21.5rem;
  }
  .Top .body {
    box-sizing: border-box;
    padding: 0 2rem;
  }
  .Top .back video {
    width: auto;
    height: 100%;
  }
  .Top .back::after {
    background-size: 2px;
  }
}

@media (min-width: 568px) {
  .Top {
    height: 28rem;
  }
  .Top .back video {
    width: 100%;
    height: auto;
  }
}

/* ==================== voice.css ==================== */
.Voice {
  padding: 2rem 1rem;
  background: url(../images/voice_back.jpg) no-repeat center center;
  background-size: cover;
}

.Voice h2 {
  margin: 0;
}

.Voice .voice {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1rem;
  margin-top: 1rem;
  padding: 1rem;
}

.Voice h3 {
  position: relative;
  margin-top: 0.5em;
  padding-left: 2.5em;
  color: var(--color-red);
  font-size: 125%;
  line-height: 1.3;
  text-align: left;
}

.Voice h3 span {
  display: inline-block;
}

.Voice p {
  margin-bottom: 0;
  text-align: justify;
}

.Voice h3::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.75em;
  height: 1.75em;
  transform: translateY(-50%);
  background: url(../images/voice_caption_icon.svg) no-repeat center center;
  background-size: contain;
}

@media (max-width: 567px) {
  .Voice h2 img {
    font-size: 3.5vw;
  }
}

@media (min-width: 568px) {
  .Voice .body {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    align-items: flex-end;
    max-width: 55rem;
  }
}
/*# sourceMappingURL=style.css.map */