/* =============================================
   SUB-KEY (ページビジュアル)
   ============================================= */

.sub-key {
  padding: 160px 0 120px;
  background-image: url(../images/sub-key.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover !important;
  position: relative;
}

.sub .sub-key#company     { background-image: url(../images/sub-key_company.jpg); }
.sub .sub-key#vision      { background-image: url(../images/sub-key_vision.jpg); }
.sub .sub-key#program     { background-image: url(../images/sub-key_program.jpg); }
.sub .sub-key#information { background-image: url(../images/sub-key_information.jpg); }
.sub .sub-key#contact     { background-image: url(../images/sub-key_contact.jpg); }
.sub .sub-key#request     { background-image: url(../images/sub-key_request.jpg); }

.sub-key::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 0; }
.sub-key h2 { color: #fff; margin: 0; text-align: center; font-size: 32px; font-weight: 900; position: relative; z-index: 2; text-shadow: 0 2px 16px rgba(0,0,0,0.6); }

/* =============================================
   BREADCRUMBS
   ============================================= */

.breadcrumbs {
  width: 100%;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  background-color: #C21E86;
  color: #fff;
  font-size: 12px;
}

.breadcrumbs span { margin-right: 5px; }
.breadcrumbs a { color: #fff; }

/* =============================================
   #intro (ビジョン等サブページ)
   ============================================= */

#intro {
  background-image: url(../images/bg_intro.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

#intro .txt-box { width: 85%; max-width: 880px; margin: auto; position: relative; text-align: left; }
#intro h2 em { color: #C21E86; font-size: 80px; font-weight: bold; text-align: center; writing-mode: vertical-rl; position: absolute; font-style: normal; left: 0; }
#intro h3 { color: #333; font-size: 48px; text-align: center; }
#intro p { color: #333; font-size: 24px; }
#intro .button-round { border-color: #C21E86; color: #C21E86; }
#intro .button-round:hover { background-color: #C21E86; color: #fff; }

.sub #intro { background: none; }
.sub #intro .txt-box { padding-left: 100px; }

/* =============================================
   #about
   ============================================= */

#about { overflow: hidden; }
#about .flex { align-items: center; }
#about .flex .img_box { padding-left: 40px; position: relative; z-index: 2; }
#about .flex .img_box:after {
  content: "";
  position: absolute;
  background-color: rgba(194,30,134,.1);
  border-radius: 50%;
  height: 70vw;
  top: 5%;
  left: 21.888889%;
  max-height: 640px;
  max-width: 640px;
  width: 70vw;
  z-index: -1;
  overflow: hidden;
}

.sub #about .flex .img_box:after { display: none; }
#about .flex .img_box img { border-radius: 50px; }
#about h2.sec-ttl { margin-bottom: 30px; }

/* =============================================
   #service
   ============================================= */

#service {
  background-color: #fff;
  background-image: url(../images/bg_service.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

#service .service-box { position: relative; margin-bottom: 400px; }
#service .service-box .img-box { position: relative; width: 70%; padding-top: 32%; }
#service .service-box.reverse .img-box { margin: 0 0 0 auto; }
#service .service-box .img-box:before { content: ""; width: 110%; height: 100%; display: block; position: absolute; background-color: #9B1868; top: 100px; opacity: 0.1; }
#service .service-box.reverse .img-box:before { right: 0; }
#service .service-box .img-box img { object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#service .service-box .txt-box { position: absolute; bottom: -340px; width: 42%; padding: 5vw; right: 0; background-color: rgba(194,30,134,0.9); color: #fff; }
#service .service-box.reverse .txt-box { left: 0; }
#service .service-box .txt-box em.num { font-size: 120px; font-weight: bold; display: block; color: rgba(255,255,255,0.5); position: absolute; right: 20px; top: 0; }
#service .service-box .txt-box h3 { font-size: 32px; }

.sub #service { background: none; }

/* =============================================
   #program (サブページ)
   ============================================= */

#program { background-color: #E040A0; }
#program h2.sec-ttl, #program h2.sec-ttl em { color: #fff; }
#program h2.sec-ttl::after { background-color: #fff; }
#program h3 { font-size: 24px; text-align: center; color: #fff; }
#program h3 span { display: inline-block; margin-bottom: 10px; }

#program .program-list { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
#program .program-list .program { width: 30%; padding: 0; background-color: #fff; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
#program .program-list .program .txt-box { padding: 20px 25px 25px; }
#program .program-list .program:nth-child(2), #program .program-list .program:nth-child(5) { margin-top: 80px; }
#program .program-list .program:nth-child(3), #program .program-list .program:nth-child(6) { margin-top: 160px; }
#program .program-list .program table { table-layout: fixed; }
#program .program-list .program table td, #program .program-list .program table th { width: 50%; text-align: center; padding: .5em; }
#program .program-list .program .img-box { border: none; border-radius: 0; margin-bottom: 0; padding-top: 65%; }
#program .program-list .program .txt-box .category { display: inline-block; padding: 3px 14px; border-radius: 20px; background-color: #FDE8F4; color: #C21E86; font-size: 12px; margin-bottom: 15px; }
#program .program-list .program .txt-box h3 { font-size: 20px; margin: 0 0 20px; }
#program .program-list .program .txt-box .description { color: #333; text-align: center; }
#program .program-list .program .context { padding: 15px 0; border-top: 1px solid #FDE8F4; margin-top: 15px; }
#program .program-list .program .context h3 { margin-bottom: 15px; }
#program .program-list .program .context p { font-size: 14px; font-weight: normal; line-height: 1.5; }

.sub #program { background: none; position: relative; }
.sub #program h2.sec-ttl { color: #000; }
.sub #program h2.sec-ttl em { color: #C21E86; }
.sub #program h2.sec-ttl::after { background: #C21E86; }
.sub #program .button-round { border-color: #C21E86; color: #C21E86; }
.sub #program .button-round:hover { background-color: #C21E86; color: #fff; }

/* =============================================
   ビジョン価値観ページ
   ============================================= */

.vision-value { text-align: center; background-image: url(../images/bg1.jpg); background-repeat: no-repeat; background-position: top left; background-size: cover; padding-bottom: 0; }
.vision-value section { padding-bottom: 0; }
.vision-value ul { text-align: left; max-width: 900px; margin: auto; }
.vision-value ul li { padding: 1em; }
.vision-value strong { font-size: 18px; }

/* =============================================
   RESPONSIVE
   ============================================= */

@media screen and (max-width: 767px) {
  .sub-key { padding: 80px 0; margin-top: 70px; }

  #about .box { width: 100%; }
  #about .flex .img_box { padding: 0; }
  #about .flex .img_box:after { display: none; }

  #service .service-box { margin-bottom: 0; }
  #service .service-box .img-box { width: 100%; padding-top: 56.25%; }
  #service .service-box .txt-box { position: relative; bottom: 0; top: -60px; width: 90%; margin: 0 0 0 auto; }
  #service .service-box.reverse .txt-box { margin: 0; }
  #service .service-box .txt-box em.num { font-size: 42px; margin-bottom: 20px; }
  #service .service-box .txt-box h3 { font-size: 20px; }

  #program .program-list .program { width: 100%; margin-bottom: 30px; }
  #program h3 { font-size: 16px; }
  #program h3 span { width: 100%; }
  #program table tr th, #program table tr td { display: table-cell; }
  #program .program-list .program:nth-child(2),
  #program .program-list .program:nth-child(3),
  #program .program-list .program:nth-child(4),
  #program .program-list .program:nth-child(5),
  #program .program-list .program:nth-child(6) { margin-top: 0; }

  .sub #intro .txt-box { padding-left: 0; }
  #intro p { font-size: 14px; }
  #intro h2 { font-size: 24px; }
  #intro h3 { font-size: 25px; }
  #intro h2 em { writing-mode: horizontal-tb; position: static; font-size: 12px; font-weight: normal; left: auto; }
  #intro .txt-box { width: 100%; }

  .vision-value { padding-bottom: 0; }
  .vision-value strong { display: block; }
}