@charset "utf-8";

/* CSS Document */
@import url('https://fonts.googleapis.com/css2?&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900');

/************************
Main Visual
*************************/
.top .hero-body .main-visual {
  position: relative;
  margin: 34px auto 0;
  padding: 0 80px;
  aspect-ratio: 72 / 35;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(/img/20th-anniversary/img_mv_bg.png) no-repeat center center / contain;
}
.main-visual .mv_copy_wrapper {
  z-index: 20;
  position: relative;
  text-align: center;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.main-visual .mv_copy_wrapper h1 {
  margin-bottom: 24px;
  max-width: 867px;
  width: 100%;
}
.main-visual .mv_copy_wrapper .read_txt {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.625rem;
  line-height: 2;
  font-feature-settings: "palt";
}
.main-visual .mv_copy_wrapper .read_txt .furigana {
  position: relative;
}
.main-visual .mv_copy_wrapper .read_txt .furigana::before {
  width: max-content;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1;
  font-feature-settings: "palt";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.main-visual .mv_copy_wrapper .read_txt .furigana.txt_tsumugu::before {
  content: "つむぐ";
  letter-spacing: 1.4em;
  text-indent: 1.4em;
}
.main-visual .mv_copy_wrapper .read_txt .furigana.txt_holdings::before {
  content: "ホールディングス";
}
.main-visual .mv_copy_wrapper .sub_txt {
  margin-top: 8px;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1.5;
}
.main-visual .mv_bg_wrapper {
  position: absolute;
  inset: 0;
}

@media only screen and (max-width: 1300px) {
  .main-visual .mv_copy_wrapper h1 {
    max-width: 867px;
    width: 80%;
  }
  .main-visual .mv_copy_wrapper .read_txt {
    font-size: 1.25rem;
  }
  .main-visual .mv_copy_wrapper .read_txt .furigana::before {
    font-size: 0.75rem;
    top: -8px;
  }
  .main-visual .mv_copy_wrapper .sub_txt {
    font-size: 0.875rem;
  }
}

@media only screen and (max-width: 768px) {
  .top .hero-body .main-visual {
    margin: 0 auto;
    padding: 0 4%;
    aspect-ratio: 15 / 28;
    background: url(/img/20th-anniversary/img_mv_bg_sp.png) no-repeat center center / contain;
  }
  .main-visual .mv_copy_wrapper h1 {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 500px) {
  .main-visual .mv_copy_wrapper .read_txt {
    font-size: 0.875rem;
  }
  .main-visual .mv_copy_wrapper .read_txt .furigana::before {
    font-size: 0.5rem;
    top: -6px;
  }
  .main-visual .mv_copy_wrapper .sub_txt {
    font-size: 0.625rem;
  }
}

/************************
Anchor Link
*************************/
.anchor_link_nav {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(5 , 1fr);
}
.anchor_link_nav .anchor_link_nav_item a {
  height: 100%;
  padding-bottom: 17px;
  border-right: 1px solid #E2E2E2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  transition: opacity .3s ease-out;
  font-size: 0.938rem;
  font-weight: 500;
  color: #333;
  line-height: 1.25;
  text-align: center;
  position: relative;
}
.anchor_link_nav .anchor_link_nav_item:first-child a {
  border-left: 1px solid #E2E2E2;
}
.anchor_link_nav .anchor_link_nav_item a::after {
  content: "";
  background: url(/img/20th-anniversary/img_anchor_arrow.svg)no-repeat center center / contain;
  width: 12px;
  height: 7px;
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

@media (hover: hover) and (pointer: fine) {
  .anchor_link_nav .anchor_link_nav_item a:hover {
    opacity: .6;
  }
}

@media only screen and (max-width: 768px) {
  .anchor_link_nav {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .anchor_link_nav .anchor_link_nav_item a {
    padding: 0 16px 16px;
    border-bottom: 1px solid #E2E2E2;
    border-right: unset;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: opacity .3s ease-out;
  }
  .anchor_link_nav .anchor_link_nav_item a:first-child {
    border-left: unset;
  }
  .anchor_link_nav .anchor_link_nav_item a::after {
    position: relative;
    inset: unset;
    transform: unset;
  }
}

/************************
BASE
*************************/
.pc_only {
  display: block;
}
.pc_tablet_only {
  display: block;
}
@media only screen and (max-width: 768px) {
  .pc_only {
    display: none;
  }
}
@media only screen and (max-width: 500px) {
  .pc_tablet_only {
    display: none;
  }
}
.special_page_title_wrap:has(.section_read_txt) .special_page_title {
  margin-bottom: 32px;

  @media only screen and (max-width: 768px) {
    margin-bottom: 24px;
  }
}
.special_page_title {
  margin-bottom: 56px;
  padding-left: 48px;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 2rem;
  line-height: 1.5;
  position: relative;

  @media only screen and (max-width: 768px) {
    font-size: 1.5rem;
    padding-left: 40px;
    margin-bottom: 48px;
  }
}
.special_page_title::before {
  content: "";
  background: url(/img/20th-anniversary/img_title_deco.svg)no-repeat center center / contain;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 4px;
  left: 0;

  @media only screen and (max-width: 768px) {
    width: 32px;
    height: 32px;
  }
}
.section_read_txt {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.25rem !important;
  line-height: 2;

  @media only screen and (max-width: 768px) {
    font-size: 1.125rem !important;
  }
}
.section_read_txt.mb_40 {
  margin-bottom: 40px;
}
.section_read_txt.sp_mb_32 {
  @media only screen and (max-width: 768px) {
    margin-bottom: 32px;
  }
}
.section_read_txt .furigana {
  position: relative;
}
.section_read_txt .furigana::before {
  width: max-content;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 0.625rem;
  line-height: 1;
  font-feature-settings: "palt";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}
.section_read_txt .furigana.txt_tsumugu::before {
  content: "つむぐ";
  letter-spacing: 1.4em;
  text-indent: 1.4em;
}
.section_read_txt .furigana.txt_holdings::before {
  content: "ホールディングス";
}
.txt_img_set {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  gap: 64px;

  @media only screen and (max-width: 768px) {
    flex-direction: column-reverse;
    gap: 32px;
  }
}
.txt_img_set.reverse {
  flex-direction: row-reverse;

  @media only screen and (max-width: 768px) {
    flex-direction: column-reverse;
    gap: 32px;
  }
}
.txt_wrap {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  z-index: 2;
  position: relative;

  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}
.txt_wrap p {
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
}
.txt_wrap p.t_align_r {
  text-align: right;
}
.txt_wrap p .furigana {
  position: relative;
}
.txt_wrap p .furigana::before {
  width: max-content;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 0.625rem;
  line-height: 1;
  font-feature-settings: "palt";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}
.txt_wrap p .furigana.txt_tsumugu::before {
  content: "つむぐ";
  letter-spacing: 1.4em;
  text-indent: 1.4em;
}
.txt_wrap p .furigana.txt_holdings::before {
  content: "ホールディングス";
}
.img_wrap {
  z-index: 1;
}
.img_wrap .logo {
  @media only screen and (max-width: 768px) {
    max-width: 500px;
  }
  @media only screen and (max-width: 500px) {
    max-width: 258px;
  }
}
.img_wrap figure figcaption {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  text-align: center;
}
.img_wrap figure figcaption span {
  margin-right: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
}
.movie_wrapper {
  width: 80%;
  max-width: 711px;
  margin: 80px auto 0;

  @media only screen and (max-width: 768px) {
    max-width: unset;
    width: 100%;
    margin-top: 16px;
  }
}
.movie_wrapper .movie {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid #e2e2e2;
}
.movie_wrapper .movie>iframe {
  width: 100%;
  height: 100%;
}
.movie_wrapper .movie_title {
  margin-top: 16px;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}
.page_separator {
  margin: 40px auto 80px;

  @media only screen and (max-width: 768px) {
    margin-bottom: 0;
  }
}
.page_separator figure {
  width: 100%;
  text-align: center;

  @media only screen and (max-width: 768px) {
    width: 215vw;
  }
}
.page_separator.sp_r figure {
  @media only screen and (max-width: 768px) {
    position: relative;
    left: 100%;
    transform: translateX(-95%);
  }
}
.page_separator figure img {
  width: 100%;
  margin: 0 auto;
}
.disc_list {
  margin-left: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.disc_list li {
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.disc_list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}
.special_sub_title_wrap {
  margin: 80px auto 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;

  @media only screen and (max-width: 768px) {
    margin-bottom: 48px;
  }
}
.special_sub_title_wrap .special_sub_title {
  font-size: 1.75rem;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 500;

  @media only screen and (max-width: 768px) {
    font-size: 1.625rem;
  }
}
.special_sub_title_wrap .special_sub_title::after {
  content: "";
  width: 32px;
  height: 2px;
  display: inline-block;
}
.special_sub_title_wrap .special_sub_title.pink::after {
  background: #F4ADBD;
}
.special_sub_title_wrap .special_sub_title.yellow::after {
  background: #FAD182;
}
.special_sub_title_wrap .special_sub_title.blue::after {
  background: #94B6CA;
}
.special_sub_title_wrap .special_sub_read {
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  font-weight: 500;

  @media only screen and (max-width: 768px) {
    font-size: 0.875rem;
  }
}
.btn_area {
  width: 100%;
  text-align: center;
}
.btn_area .btn {
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px;
  font-size: 1rem;
  border: 1px solid #CFCFCF;
  border-radius: 60px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  line-height: 1.5;
  color: #333;
  position: relative;
  overflow: hidden;
  z-index: 1;
  opacity: 1;
}
.btn_area .btn::before {
  content: "";
  background: linear-gradient(90deg, #F4ADBD 0%, #FAD182 50%, #94B6CA 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
  transform: scaleX(0);
  transform-origin: left;
  transition: all .3s ease-out;
  z-index: -1;
  opacity: .3;
}
.btn_area .btn:hover:before {
  transform: scaleX(1);
}
.btn_area .btn::after {
  content: "";
  background: url(/img/20th-anniversary/img_btn_arrow.svg)no-repeat center center / contain;
  width: 23px;
  height: 9px;
}
.btn_area .btn.pdf::after {
  content: "";
  background: url(/img/20th-anniversary/img_pdf_icon.svg)no-repeat center center / contain;
  width: 16px;
  height: 18px;
}

/******************************
Top Message
*******************************/
#anc_top_message {
  margin-top: 80px;
  overflow: hidden;
}
#anc_top_message .txt_img_set .img_wrap {
  margin: 0 auto;
}
.top_message_deco {
  position: absolute;
  right: calc(50% - 50vw);
  bottom: 0;
  z-index: 0;

  @media only screen and (max-width: 768px) {
    right: calc(10% - 50vw);
  }
}
.top_message_deco img {
  width: 42vw;
  max-width: 700px;

  @media only screen and (max-width: 768px) {
    width: 100vw;
  }
}

@media only screen and (max-width: 768px) {
  #anc_top_message .txt_img_set {
    padding-bottom: 200px;
  }
}

/******************************
about_the_company_name
*******************************/
#anc_about_the_company_name {
  margin-top: 80px;
  overflow: hidden;
}
#anc_about_the_company_name .txt_wrap {
  @media only screen and (max-width: 768px) {
    order: 0;
  }
}
.about_the_company_name_deco {
  position: absolute;
  left: calc(50% - 50vw);
  top: 20%;
  z-index: 0;

  @media only screen and (max-width: 768px) {
    position: relative;
    order: 1;
  }
}
#anc_about_the_company_name .img_wrap {
  @media only screen and (max-width: 768px) {
    order: 2;
  }
}
.about_the_company_name_deco img {
  width: 42vw;

  @media only screen and (max-width: 768px) {
    width: 100vw;
  }
}

/******************************
anc_corporate_philosophy
*******************************/
#anc_corporate_philosophy {
  margin-top: 80px;
  overflow: hidden;
}
.txt_img_set.type_philosophy {
  align-items: center;

  @media only screen and (max-width: 768px) {
    align-items: flex-start;
    gap: 24px;
  }
}
.txt_img_set.type_philosophy .img_wrap {
  margin-right: calc(50% - 50vw);

  @media only screen and (max-width: 768px) {
    order: 0;
    position: relative;
    right: calc(50% - 60vw);
  }
}
.txt_img_set.reverse.type_philosophy .img_wrap {
  margin-left: calc(50% - 50vw);

  @media only screen and (max-width: 768px) {
    left: calc(50% - 50vw);
  }
}
.txt_img_set.type_philosophy .img_wrap picture img {
  width: 42vw;

  @media only screen and (max-width: 768px) {
    width: 100vw;
  }
}
.txt_img_set.type_philosophy .txt_wrap {
  @media only screen and (max-width: 768px) {
    display: contents;
  }
}
.txt_img_set.type_philosophy .txt_wrap p {
  @media only screen and (max-width: 768px) {
    order: -1;
  }
}
.philosophy_read {
  margin-bottom: 8px;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 1.5rem;
  letter-spacing: 0.1em;

  @media only screen and (max-width: 768px) {
    margin-bottom: 0;
    font-size: 1.25rem;
    order: 1;
  }
}
.philosophy_values_wrapper {
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 56px;
}
.philosophy_values_contents {
  width: 100%;
  padding-top: 170px;
  padding-left: 80px;
  position: relative;
  display: flex;
  justify-content: flex-start;

  @media only screen and (max-width: 768px) {
    padding: 0;
    flex-direction: column-reverse;
    gap: 24px;
  }
}
.philosophy_values_contents.type_r {
  justify-content: flex-end;
}
.philosophy_values_contents .txt_wrap .philosophy_read {
  margin-bottom: 0;
  order: 0;
}
.philosophy_values_contents .img_wrap {
  position: absolute;
  top: 0;
  z-index: 0;

  @media only screen and (max-width: 768px) {
    position: relative;
  }
}
.philosophy_values_contents .img_wrap.type_r {
  right: calc(50% - 50vw);
}
.philosophy_values_contents .img_wrap.type_l {
  left: calc(50% - 50vw);
}
.philosophy_values_contents .img_wrap picture img {
  width: 50vw;

  @media only screen and (max-width: 768px) {
    width: 100vw;
  }
}

/******************************
anc_related_materials
*******************************/
#anc_related_materials {
  margin-top: 80px;
  overflow: hidden;
}
.related_materials_wrapper {
  display: grid;
  grid-template-columns: 3fr auto 4fr;
  width: 100%;
  align-items: stretch;

  @media only screen and (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}
.divider {
  width: 1px;
  background-color: #e2e2e2;
  margin: 0 16px;

  @media only screen and (max-width: 768px) {
    width: unset;
    height: 1px;
    margin: 24px 0;
  }
}
.related_materials_content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;

  @media only screen and (max-width: 768px) {
    gap: 24px;
  }
}
.related_materials_img_wrap {
  display: grid;
  gap: 16px;
  flex: 1;
}
.related_materials_img_wrap.type_three {
  grid-template-columns: repeat(3, 1fr);
}
.related_materials_img_wrap.type_four {
  grid-template-columns: repeat(4, 1fr);
}
.related_materials_img_wrap figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}


/******************************
INDEX
*******************************/
.top .hero-body {
  padding: 0;
  height: auto;
}
.top .page-title {
  background: #fff;
}
.top .page-title .breadcrumb {
  top: 170px;
}
.top .page-title .breadcrumb li a i::before {
  color: #3273dc;
}
.top .page-title .breadcrumb li a,
.top .page-title .breadcrumb li + li::before {
  color: #3e3a39;
}