@charset "utf-8";

main.top {
  padding-top: 0;
  background: linear-gradient(to bottom, #0146B7 0%, transparent min(86rem, 860px), transparent 100%);
  background-color: var(--color-black);
}

/* ----- mv ----- */

main.top section.mv {
  background-image: url(../img/_top/bg_mv.webp);
  background-size: min(140rem, 1400px);
  background-position: center top;
  background-repeat: no-repeat;
}

main.top section.mv div.container {
  padding: min(26rem, 260px) 20px min(8rem, 80px);
}

main.top section.mv h2.mv_ttl {
  font-size: min(5.4rem, 54px);
  font-weight: 700;
  line-height: 1.4;
}

main.top section.mv div.mv_txt {
  margin-top: min(6rem, 60px);
  font-size: min(3.2rem, 32px);
  font-weight: 600;
  line-height: 1.8;
}

@media (max-width: 799px) {
  main.top section.mv {
    background-image: url(../img/_top/bg_mv.webp);
    background-size: 60rem;
    background-position: right top;
    background-repeat: no-repeat;
  }
  
  main.top section.mv div.container {
    padding: 12rem 2rem 5rem;
  }
  
  main.top section.mv h2.mv_ttl {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.4;
  }
  
  main.top section.mv div.mv_txt {
    margin-top: 4rem;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.8;
  }
}

/* ----- about ----- */

main.top section.about h2.top_ttl {
  text-align: center;
}

main.top section.about p.about_lead {
  margin-top: min(4rem, 40px);
  font-size: min(4rem, 40px);
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

main.top section.about p.about_txt {
  margin-top: min(4rem, 40px);
  font-size: min(1.6rem, 16px);
  font-weight: 400;
  text-align: center;
  line-height: 2.2;
}

main.top section.about div.about_contents {
  display: flex;
  flex-direction: column;
  gap: 0;
}

main.top section.about div.about_contents div.about_content {
  background-image: url(../img/_top/bg_about01.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

main.top section.about div.about_contents div.about_content:last-of-type {
  background-image: url(../img/_top/bg_about02.webp);
}

main.top section.about div.about_contents div.about_content div.about_content_item {
  margin-left: auto;
  width: min(70rem, 700px);
  min-height: min(4.5rem, 45px);
  padding: min(10rem, 100px);
  background: rgb(45, 47, 72, .8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: min(2rem, 20px);
}

main.top section.about div.about_contents div.about_content:last-of-type div.about_content_item {
  margin-left: 0;
  margin-right: auto;
}

main.top section.about div.about_contents div.about_content div.about_content_item h3.about_ttl {
  font-size: min(3rem, 30px);
  font-weight: 600;
  line-height: 1.4;
}

main.top section.about div.about_contents div.about_content div.about_content_item p.about_content_txt {
  font-size: min(2rem, 20px);
  font-weight: 400;
  line-height: 1.8;
}

@media (max-width: 799px) {
  main.top section.about p.about_lead {
    margin-top: 2rem;
    font-size: 2.4rem;
  }
  
  main.top section.about p.about_txt {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 2.2;
  }
  
  main.top section.about div.about_contents div.about_content {
    background-image: url(../img/_top/bg_about_sp01.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  
  main.top section.about div.about_contents div.about_content:last-of-type {
    background-image: url(../img/_top/bg_about_sp02.webp);
  }
  
  main.top section.about div.about_contents div.about_content div.about_content_item {
    margin-left: 0;
    margin-top: 24rem;
    width: 100%;
    min-height: auto;
    padding: 4rem 2rem;
    gap: 2rem;
  }
  
  main.top section.about div.about_contents div.about_content:last-of-type div.about_content_item {
    margin-left: 0;
    margin-right: 0;
  }
  
  main.top section.about div.about_contents div.about_content div.about_content_item h3.about_ttl {
    font-size: 2.4rem;
    line-height: 1.4;
  }
  
  main.top section.about div.about_contents div.about_content div.about_content_item p.about_content_txt {
    font-size: 1.6rem;
    line-height: 1.8;
  }
}

/* ----- business ----- */

main.top section.business {
  background-color: #fff;
  color: var(--color-black);
}

main.top section.business div.container {
  padding-bottom: min(4rem, 40px);
}

main.top section.business h2.top_ttl {
  color: #0046B7;
}

main.top section.business p.business_lead {
  margin-top: min(4rem, 40px);
  font-size: min(1.6rem, 16px);
  font-weight: 400;
  line-height: 2.2;
}

main.top section.business div.business_contents {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 0;
  color: #fff;
}

main.top section.business div.business_contents a.business_content {
  display: grid;
  grid-template-rows: subgrid; 
  grid-row: span 3;
  gap: min(2rem, 20px);
  padding: min(4rem, 40px) 0;
  background-image: url(../img/_top/bg_business01.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

main.top section.business div.business_contents a.business_content:nth-of-type(2) {
  background-image: url(../img/_top/bg_business02.webp);
}

main.top section.business div.business_contents a.business_content:nth-of-type(3) {
  background-image: url(../img/_top/bg_business03.webp);
}

main.top section.business div.business_contents a.business_content:nth-of-type(4) {
  background-image: url(../img/_top/bg_business04.webp);
}

main.top section.business div.business_contents a.business_content h3.business_ttl {
  font-size: min(3.0rem, 30px);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

main.top section.business div.business_contents a.business_content p.business_content_txt {
  font-size: min(1.6rem, 16px);
  font-weight: 400;
  line-height: 2.2;
  width: min(24.5rem, 245px);
  margin: 0 auto;
}

@media (max-width: 799px) {
  main.top section.business div.container {
    padding-bottom: 2rem;
  }
  
  main.top section.business p.business_lead {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 2.2;
  }
  
  main.top section.business div.business_contents {
    grid-template-columns: repeat(2, 1fr); 
  }
  
  main.top section.business div.business_contents a.business_content {
    gap: 2rem;
    padding: 2rem 1rem;
  }
  
  main.top section.business div.business_contents a.business_content h3.business_ttl {
    font-size: 1.8rem;
    line-height: 1.4;
    letter-spacing: 0em;
  }
  
  main.top section.business div.business_contents a.business_content p.business_content_txt {
    font-size: 1.3rem;
    width: 100%;
    line-height: 1.8;
  }
}

/* ----- */

main.top div.under_bg {
  background-image: url(../img/_top/bg_under.webp);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* ----- case ----- */

main.top section.case p.case_lead {
  margin-top: min(4rem, 40px);
  font-size: min(1.6rem, 16px);
  font-weight: 400;
  line-height: 2.2;
}

main.top section.case div.case_wrap {
  margin-top: min(4rem, 40px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(1.6rem, 16px);
}

main.top section.case div.case_wrap a.case_item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0;
}

main.top section.case div.case_wrap a.case_item div.case_category {
  margin-top: min(2rem, 20px);
  width: fit-content;
  padding: min(.5rem, 5px);
  border-radius: min(.5rem, 5px);
  background-color: var(--color-red);
  color: #fff;
  font-size: min(1.2rem, 12px);
  font-weight: 600;
}

main.top section.case div.case_wrap a.case_item h3.case_ttl {
  margin-top: min(1rem, 10px);
  font-size: min(3rem, 30px);
  font-weight: 600;
  line-height: 1.4;
}

main.top section.case div.case_wrap a.case_item p.case_txt {
  margin-top: min(1rem, 10px);
  font-size: min(1.6rem, 16px);
  font-weight: 400;
  line-height: 2.2;
}

@media (max-width: 799px) {
  main.top section.case p.case_lead {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 2.2;
  }
  
  main.top section.case div.case_wrap {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
  }

  main.top section.case div.case_wrap a.case_item div.case_category {
    margin-top: 1rem;
    padding: 0.4rem;
    border-radius: .4rem;
    font-size: 1.2rem;
  }
  
  main.top section.case div.case_wrap a.case_item h3.case_ttl {
    margin-top: 1rem;
    font-size: 2rem;
  }
  
  main.top section.case div.case_wrap a.case_item p.case_txt {
    margin-top: 1rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8;
  }
}

/* ----- news ----- */

main.top section.news div.news_contents {
  margin-top: min(4rem, 40px);
}

main.top section.news div.news_contents a.news_item {
  display: flex;
  flex-direction: column;
  gap: min(1rem, 10px);
  padding: min(2rem, 20px) 0;
  border-bottom: min(.1rem, 1px) solid #fff;
}

main.top section.news div.news_contents a.news_item:first-of-type {
  padding-top: 0;
}

main.top section.news div.news_contents a.news_item div.news_info {
  display: flex;
  align-items: center;
  gap: min(1rem, 10px);
}

main.top section.news div.news_contents a.news_item div.news_info div.date {
  font-size: min(1.4rem, 14px);
  font-weight: 400;
  color: #9F9F9F;
}

main.top section.news div.news_contents a.news_item div.news_info div.news_category {
  width: fit-content;
  padding: min(.5rem, 5px);
  border-radius: min(.5rem, 5px);
  background-color: var(--color-red);
  color: #fff;
  font-size: min(1.2rem, 12px);
  font-weight: 600;
}

main.top section.news div.news_contents a.news_item div.news_ttl {
  font-size: min(2rem, 20px);
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 799px) {
  main.top section.news div.news_contents {
    margin-top: 4rem;
  }
  
  main.top section.news div.news_contents a.news_item {
    gap: 1rem;
    padding: 2rem 0;
    border-bottom: .1rem solid #fff;
  }
  
  main.top section.news div.news_contents a.news_item div.news_info {
    gap: 0.5rem;
  }
  
  main.top section.news div.news_contents a.news_item div.news_info div.date {
    font-size: 1.2rem;
  }
  
  main.top section.news div.news_contents a.news_item div.news_info div.news_category {
    padding: 0.4rem;
    border-radius: .4rem;
    font-size: 1.1rem;
  }
  
  main.top section.news div.news_contents a.news_item div.news_ttl {
    font-size: 1.6rem;
  }
}

/* ----- topics ----- */

main.top section.topics div.topics_contents {
  margin-top: min(4rem, 40px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(4rem, 40px);
}

main.top section.topics div.topics_contents a.topics_item {
  width: 100%;
  padding-top: min(23.9rem, 239px);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: min(2rem, 20px);
  grid-template-columns: 1fr;
  align-items: end;
  padding-bottom: min(4rem, 40px);
  background-image: url(../img/_top/bg_topics01.webp);
  background-size: min(25rem, 250px);
  background-position: right bottom;
  background-repeat: no-repeat;
}

main.top section.topics div.topics_contents a.topics_item:nth-of-type(2) {
  background-image: url(../img/_top/bg_topics02.webp);
}

main.top section.topics div.topics_contents a.topics_item:nth-of-type(3) {
  background-image: url(../img/_top/bg_topics03.webp);
}

main.top section.topics div.topics_contents a.topics_item h3.topics_ttl {
  width: min(29rem, 290px);
  font-size: min(3rem, 30px);
  font-weight: 700;
  line-height: 1.4;
}

main.top section.topics div.topics_contents a.topics_item p.topics_txt {
  width: min(28rem, 280px);
  font-size: min(1.6rem, 16px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

@media (max-width: 799px) {
  main.top section.topics div.topics_contents {
    margin-top: 4rem;
    grid-template-columns: repeat(1, 1fr);
    gap: 4rem;
  }
  
  main.top section.topics div.topics_contents a.topics_item {
    padding-top: 15rem;
    gap: 2rem;
    padding-bottom: 4rem;
    background-size: 25rem;
    background-position: right bottom;
    background-repeat: no-repeat;
  }
  
  main.top section.topics div.topics_contents a.topics_item h3.topics_ttl {
    width: 28rem;
    font-size: 2.4rem;
    letter-spacing: 0em;
  }
  
  main.top section.topics div.topics_contents a.topics_item p.topics_txt {
    width: 28rem;
    font-size: 1.4rem;
    line-height: 1.8;
  }
}

/* ----- company ----- */

main.top section.company div.company_contents {
  margin: min(8rem, 80px) auto 0;
  width: min(90rem, 900px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

main.top section.company div.company_contents div.company_content {
  display: grid;
  grid-template-columns: min(15rem, 150px) 1fr;
  align-items: start;
  gap: 0;
  padding: min(4rem, 40px) 0;
  border-bottom: min(.1rem, 1px) solid #fff;
  position: relative;
}

main.top section.company div.company_contents div.company_content:first-of-type {
  padding-top: 0;
}

main.top section.company div.company_contents div.company_content::before {
  content: '';
  display: block;
  position: absolute;
  width: min(15rem, 150px);
  height: min(0.3rem, 3px);
  background-color: #fff;
  left: 0;
  bottom: 0;
  transform: translateY(50%);
}

main.top section.company div.company_contents div.company_content div.company_term {
  font-size: min(1.6rem, 16px);
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

main.top section.company div.company_contents div.company_content div.company_value {
  display: flex;
  flex-direction: column;
  gap: min(.5rem, 5px);
  padding-left: min(2rem, 20px);
}

main.top section.company div.company_contents div.company_content div.company_value span {
  font-size: min(1.6rem, 16px);
  font-weight: 400;
  line-height: 1.4;
}

@media (max-width: 799px) {
  main.top section.company div.company_contents {
    margin: 4rem auto 0;
    width: 100%;
  }
  
  main.top section.company div.company_contents div.company_content {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
    padding: 2rem 0;
    border-bottom: .1rem solid #fff;
  }
  
  main.top section.company div.company_contents div.company_content::before {
    content: none;
  }
  
  main.top section.company div.company_contents div.company_content div.company_term {
    font-size: 1.4rem;
    text-align: left;
  }
  
  main.top section.company div.company_contents div.company_content div.company_value {
    gap: 0.5rem;
    padding-left: 0;
  }
  
  main.top section.company div.company_contents div.company_content div.company_value span {
    font-size: 1.4rem;
  }
}

/* ----- contact ----- */

main.top section.contact h2.top_ttl, 
main.top section.contact div.top_ttl_sub {
  text-align: center;
}

main.top section.contact p.contact_lead {
  margin-top: min(4rem, 40px);
  font-size: min(1.6rem, 16px);
  line-height: 2.2;
  text-align: center;
}

main.top section.contact div.contact_contents {
  width: min(90rem, 900px);
  margin: min(4rem, 40px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(2.4rem, 24px);
}

main.top section.contact div.contact_contents a.contact_content {
  height: min(28.5rem, 285px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(2.4rem, 24px);
  font-weight: 600;
  line-height: 1.8;
  border: min(.2rem, 2px) solid #fff;
  text-align: center;
}

@media (max-width: 799px) {
  main.top section.contact p.contact_lead {
    margin-top: 4rem;
    font-size: 1.4rem;
    line-height: 1.8;
    text-align-last: left;
  }

  main.top section.contact div.contact_contents {
    width: 100%;
    margin: 2rem auto 0;
    gap: 0.4rem;
  }

  main.top section.contact div.contact_contents a.contact_content {
    height: 11rem;
    font-size: 1.2rem;
    border: .2rem solid #fff;
    letter-spacing: .04em;
  }
}