@charset "UTF-8";
/* **************************************
CSS Information

Site URL:
File name:  frontpage.css
Summary:  CSS For frontpage
Created:  2023/03/01
************************************** */
/*=======================================
  Headline
=======================================*/
/*------------------------------
  Heading
-------------------------------*/
/* Subheading-------------*/

/*=======================================
  common
=======================================*/
@media screen and (max-width: 768px) {}

/*=======================================
  hero
=======================================*/
.hero {
  margin: 0 auto 100px auto;
  padding: 0;
  background-image: url(../img/home/hero_002@2x.jpg);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 1180px;
  max-width: 1280px;
  min-height: 600px;
}
.hero_copy {
  margin: 0 auto;
  padding: 130px 60px;
  max-width: 1080px;
  font-family: 'Shippori Mincho', serif;
  font-weight: bold;
}
.hero_copy_ttl {
  margin: 0 0 16px 0;
  padding: 0;
  font-size: 3.6rem;
}
.hero_copy_ttl span {
  padding: 0 16px;
  background-color: rgba(255, 255, 255, 0.7);
}
.hero_copy_lead {
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.7);
  max-width: 470px;
  font-size: 2rem;
}

@media screen and (max-width: 768px) {
  .hero {
    margin: 0 auto 10px auto;
    padding: 0;
    background-image: url(../img/home/hero_002@2x.jpg);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    max-width: 100%;
    min-height: auto;
  }
  .hero_copy {
    padding: 60px 10px;
  }
  .hero_copy_ttl {
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 2.8rem;
  }
  .hero_copy_lead {
    padding: 6px;
    max-width: 470px;
    font-size: 1.6rem;
  }
}


/*=======================================
  frontpage advantage
=======================================*/
.f_advantage {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(10vw + 10px);
}
.f_advantage::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 10vw solid #F5F3FF;
  border-left: 100vw solid transparent;
}
.f_advantage_contents {
  position: relative;
  margin: 0 auto;
  width: 960px;
}
.f_advantage_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}
.f_advantage_box_item {
  width: calc(33.3% - 20px);
}
.f_advantage_box_ttl {
  font-size: 3.6rem;
  font-weight: bold;
}
.f_advantage_box_ttl span {
  margin-right: 1.6rem;
  font-family: 'Roboto', sans-serif;
  font-size: 4.4rem;
  color: #6455A1;
}

@media screen and (max-width: 768px) {
  .f_advantage_contents {
    position: relative;
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
  }
  .f_advantage_box_item {
    width: 100%;
  }
  .f_advantage_box_item img {
    width: 100vh;
  }
  .f_advantage_box_ttl {
    font-size: 2.8rem;
    font-weight: bold;
  }
  .f_advantage_box_ttl span {
    margin-right: 1.6rem;
    font-family: 'Roboto', sans-serif;
    font-size: 3.6rem;
    color: #6455A1;
  }
}

/*=======================================
  frontpage business
=======================================*/
.f_business {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(10vw + 10px);
  background-color: #F5F3FF;
}
.f_business::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 10vw solid #FFF;
  border-left: 100vw solid transparent;
}
.f_business_contents {
  position: relative;
  margin: 0 auto;
  width: 960px;
}
.f_business_box {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 40px;
  margin: 0 auto;
  max-width: 880px;
}
.f_business_box_item {}
.f_business_link {
  position: relative;
  display: block;
  padding: 16px 20px;
  background-color: #FFF;
  font-size: 2rem;
  font-weight: bold;
}
.f_business_link::after {
  position: absolute;
  top: 50%;
  right: 1em;
  width: 0.5em;
  height: 0.5em;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  content: "";
}

@media screen and (max-width: 768px) {
  .f_business_contents {
    position: relative;
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
  }
  .f_business_box {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 auto;
    max-width: 880px;
  }
}


/*=======================================
  frontpage faq
=======================================*/
.f_faq {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(10vw + 10px);
}
.f_faq::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 10vw solid #F5F3FF;
  border-left: 100vw solid transparent;
}
.f_faq_contents {
  position: relative;
  margin: 0 auto;
  width: 960px;
}

@media screen and (max-width: 768px) {
  .f_faq_contents {
    position: relative;
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
  }
}

/*=======================================
  frontpage results
=======================================*/
.f_results {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(10vw + 10px);
  background-color: #F5F3FF;
}
.f_results::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 10vw solid #FFF;
  border-left: 100vw solid transparent;
}
.f_results_contents {
  position: relative;
  margin: 0 auto;
  width: 960px;
}
.f_results_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}
.f_results_box_item {
  flex-grow: 1;
}
.f_results_link {
  margin: 1rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .f_results_contents {
    position: relative;
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
  }
  .f_results_box_item img {
    width: 100vh;
  }
}