/* IBM Plex Sans JP */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@700&display=swap');

.f-ibmplexjp { font-family: 'IBM Plex Sans JP', serif; font-weight: 700; }

/* ページタイトル */
#aboutus .arc__title h2 { font-size: 12.9rem; line-height: 1; }
#aboutus .arc__title span { font-size: 2.3rem; }
#aboutus .arc__title .page_top_text { font-size: 16px; margin-top: 30px; line-height: 2; font-weight: normal; }

/* sec共通 */
#aboutus .sec_inner { max-width: 1260px; width: calc(100% - 80px); margin: 0 auto; }
#aboutus h3.sec_title { font-size: 5rem; line-height: 1; font-weight: 800; }
#aboutus .sec_title_wrap { display: inline-block; }
#aboutus .sec_title_line { width: 240px; height: 5px !important; margin: 15px 0 4rem; background-color: #f39800 !important; }
#aboutus .sec_title_wrap .sec_title_line { width: 100%; }
#aboutus .sec_top_text { font-family: 'Noto Sans JP', sans-serif; font-size: 30px; line-height: 2; margin-bottom: 8rem; letter-spacing: 0.1em; font-weight: 700; }

/* section 共通 */
#aboutus .vision, #aboutus .mission, #aboutus .value, #aboutus .philosophy { padding-bottom: 20rem; }

/* Mission */
#aboutus .mission .sec_subtitle_wrap { width: fit-content; }
#aboutus .sec_subtitle { font-family: 'Noto Sans JP', sans-serif; padding: 0 10px; font-size: 14.5rem; white-space: nowrap; line-height: 1.6; font-weight: 900; letter-spacing: 0.5rem; }
#aboutus .mission .sec_subtitle {
  flex-direction: row; align-items: center; justify-content: flex-start;
  padding-bottom: 20px; display: flex !important; font-weight: 900 !important;
  font-size: 14.5rem !important; line-height: 1 !important; white-space: nowrap !important; margin-bottom: 60px !important;
}
#aboutus .mission .sec_subtitle span { position: relative; display: inline-block; z-index: 1; padding-bottom: 15px; }
#aboutus .mission .sec_subtitle span::after {
  content: ''; position: absolute; left: 0; z-index: -1;
  background-color: #eb5628; width: 0; transition: width 0.8s ease-in-out; height: 35px; bottom: 3px;
}
#aboutus .mission .sec_subtitle.js-show span::after { width: 100%; }

/* sec_subtitle_line */
#aboutus .sec_subtitle_line {
  position: relative; top: -72px; z-index: -1; margin-bottom: 3rem;
  height: 60px !important; background-color: #eb5628 !important;
  clip-path: inset(0 100% 0 0);
}
.sec_subtitle_line.animated__colorBox { width: 100%; }

/* Value */
#aboutus .value_details { margin-top: 10rem; text-align: left; }
#aboutus .value_detail_item { margin-bottom: 8rem; }
.value_tag {
  display: block; width: fit-content; background-color: #eb5628; color: #fff;
  font-size: 1.4rem; font-weight: bold; padding: 2px 8px; margin-bottom: 1rem;
}
.value_heading {
  display: block; width: fit-content; font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900; font-size: 14.5rem; line-height: 1.1; margin-bottom: 2rem;
  background: linear-gradient(transparent 70%, #f39800 70%) 0 0 / 100% 100% no-repeat;
  padding-right: 10px;
}
#aboutus .value_heading { background: linear-gradient(transparent 80%, #eb5628 80%) !important; line-height: 1.2 !important; }
#aboutus .value_heading .f-ibmplexjp { display: inline-block; line-height: 1; position: relative; top: 0.8rem; font-size: 17rem !important; }
.value_description { margin-top: 2rem; font-size: 1.6rem; line-height: 2; }
.logo_section { margin-top: 12rem; padding-top: 4rem; }

/* Logo / Character */
.logo_main_img { text-align: center; margin: 6rem 0 10rem; }
.logo_main_img img { width: 100%; max-width: 700px; margin: 0 auto; display: block; }
.character_container { display: flex; align-items: flex-start; justify-content: space-between; gap: 5%; margin-bottom: 10rem; }
.character_visual { width: 45%; }
.character_visual img { width: 91%; height: auto; display: block; margin: 0 auto; }
.character_info { width: 50%; text-align: left; margin-top: 40px; }
.character_label { display: inline-block; font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 2.8rem; border-bottom: 5px solid #f39800; margin-bottom: 2rem; }
.character_name_img { margin: 0 3rem 3rem; }
.character_name_img img { width: 100%; max-width: 320px; }
.character_name_wrap { margin-bottom: 1rem; }
.character_text { width: 70%; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 1.8rem; line-height: 2.3; letter-spacing: 0.2rem; }
.character_text p { margin-bottom: 1em; }

/* Approach */
#aboutus .approach { background-color: #ffefbe; padding: 12rem 0 24rem; position: relative; }
#aboutus .approach .sec_inner { position: relative; z-index: 2; }
#aboutus .approach .sec_subtitle_jp { font-size: 10rem; margin: 10px 0 4rem; font-weight: 900; font-family: 'Noto Sans JP', sans-serif; letter-spacing: 0.8rem; }
#aboutus .approach_slogan { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 28px; letter-spacing: 0.2rem; line-height: 1.8; }
#aboutus .approach_slogan p { margin-bottom: 0.7em; }
#aboutus .approach_slogan p:last-child { margin-bottom: 0; }

/* nav highlight */
#aboutus header nav .parents > li:first-of-type .f-en { color: #f39800 !important; }

/* footer */
body.aboutus footer { padding-top: 60px; }

/* PC (min-width: 768px) */
@media screen and (min-width: 768px) {
  .value_tag { font-size: 2.2rem !important; padding: 8px 20px !important; margin-bottom: 3rem !important; letter-spacing: 0.1em !important; font-weight: 700 !important; }
  #aboutus .value_detail_item { margin-bottom: 12rem !important; }
  #aboutus .value_heading .f-ibmplexjp { display: inline-block; line-height: 1; position: relative; top: 0.8rem; font-size: 17rem !important; }
  #aboutus .approach .sec_top_text { margin-bottom: 14.3rem; }
}

/* SP (max-width: 767px) */
@media (max-width: 767px) {
  #aboutus .arc__title h2 { font-size: 52px; }
  #aboutus .arc__title span { font-size: 16px; }
  #aboutus .arc__title .page_top_text { font-size: 14px; margin: 30px 0 80px; }
  #aboutus .sec_inner { width: calc(100% - 40px); }
  #aboutus h3.sec_title { font-size: 26px; }
  #aboutus .sec_title_line { width: 125px; margin: 5px 0 4rem; }
  #aboutus .sec_top_text { font-size: 15px; margin-bottom: 30px; }
  #aboutus .vision, #aboutus .mission, #aboutus .value, #aboutus .philosophy { padding-bottom: 100px; }
  #aboutus .sec_subtitle { font-size: 74px; line-height: 1.6; }
  #aboutus .mission .sec_subtitle { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 30px; font-size: 74px !important; line-height: 1.1 !important; margin-bottom: 40px !important; }
  #aboutus .mission .sec_subtitle span { padding-bottom: 10px; }
  #aboutus .mission .sec_subtitle span::after { height: 24px; }
  #aboutus .mission .sec_subtitle .line-drama::after { bottom: 5px; }
  #aboutus .mission .sec_subtitle .line-okose::after { bottom: 3px; }
  #aboutus .sec_subtitle_line { top: -15px; margin-bottom: 16px; height: 15px !important; }
  .value_details { margin-top: 60px; }
  .value_detail_item { margin-bottom: 60px; }
  .value_heading { font-size: 74px; margin-bottom: 1.5rem; }
  #aboutus .value_heading { display: inline !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; background: linear-gradient(transparent 73%, #eb5628 73%, #eb5628 93%, transparent 93%) !important; line-height: 1.3 !important; padding: 0 5px 2px !important; width: auto !important; }
  #aboutus .value_heading .f-ibmplexjp { display: inline-block; line-height: 1; position: relative; top: 4px; font-size: 85px !important; }
  #aboutus .value_heading br { flex-basis: 100%; height: 0; }
  .value_description { margin-top: 2rem; }
  .logo_section { margin-top: 12rem; }
  .logo_section .value_description p { display: inline; margin: 0; }
  .logo_main_img { margin: 30px 0 45px; }
  .character_container { flex-direction: column; gap: 40px; }
  .character_info { width: 100%; order: 1; }
  .character_visual { width: 80%; margin: 0 auto; order: 2; }
  .character_label { font-size: 22px; margin-bottom: 4rem; }
  .character_name_img { width: 70%; margin-bottom: 20px; margin: 0 auto; }
  .character_text { font-size: 14px; line-height: 1.7; width: 90%; margin: 0 auto; }
  #aboutus .value { padding-bottom: 0; }
  #aboutus .approach { padding: 10rem 0 134px; }
  #aboutus .approach .sec_subtitle_jp { font-size: 49px; margin: 10px 0 50px; }
  #aboutus .approach_slogan { font-size: 16px; line-height: 3rem; letter-spacing: 0.1rem; }
}