@charset "UTF-8";

/*======================
Article Header
=======================*/
.article_header {
width: var(--content-width);
margin-inline: auto;
}

/*----- Mobile -----*/
@media screen and (max-width: 767px) {

  .article_header {
  width: auto;
  margin-inline: var(--content-padding-sp);
  }

}


/*======================
Series Title
=======================*/
.series_title {
  padding-block: 2em;
  padding-inline: 6rem 0;
  position: relative;
}

.series_title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5rem;
  height: 5.8rem;
  background: url("../../common/img/icon_series_title.png") no-repeat center / contain;
  transform: translateY(-50%);
}

.series_title_heading {
  display: flex;
  align-items: baseline;
  gap: 0 0.5em;
}

.library_header_lead {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-green);
}

.library_header_heading {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}

.series_title_lead {
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.6;
}

.library_header_heading a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {

  .library_header_heading a:hover {
    color: var(--color-green);
  }

}


/*----- Mobile -----*/
@media screen and (max-width: 767px) {

  .series_title {
    padding-block: 1rem;
    padding-inline: 5rem 0;
  }
  
  .series_title_heading {
    flex-direction: column;
  }
  
  .library_header_lead {
    font-size: 1.1rem;
  }
  
  .library_header_heading {
    font-size: 1.6rem;
  }
  .series_title::before {
    width: 4rem;
    height: 4.64rem;
  }

  .series_title_lead {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-block: 0.4em 0;
  }

}


/*======================
Article Title
=======================*/
.article_title {
  position: relative;
  width: var(--content-width);
  aspect-ratio: 15 / 7;
  margin-inline: auto;
  background-image:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.1) 40%,
      rgba(0, 0, 0, 0) 80%
    ),
    var(--hero-image);
  background-repeat: no-repeat;
  background-position: var(--hero-position, center center);
  background-size: cover;
}

.article_title_content {
  position: absolute;
  right: 2.6rem;
  bottom: 2.6rem;
  left: 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.8rem;
}

.article_title_label {
  margin-inline: -3.8rem 0;
  padding-block: 0.35em;
  padding-inline: 1.35em;
  font-family: "Noto Serif JP", serif;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-white);
  background-color: rgba(94, 143, 25, 0.8);
  transform: rotate(-10deg);
}

.article_title_heading {
  width: 100%;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/*----- Mobile -----*/
@media screen and (max-width: 767px) {

  .article_title {
    width: 100%;
    aspect-ratio: 2 / 1;
  }
  
  .article_title_content {
    right: 1.4rem;
    bottom: 1.4rem;
    left: 1.4rem;
    gap: 1rem;
  }
  
  .article_title_label {
    margin-inline: -2rem 0;
    padding-block: 0.4em;
    padding-inline: 1em;
    font-size: 1.4rem;
    transform: rotate(-8deg);
  }
  
  .article_title_heading {
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
  }

}


/* ========================================
Artwork Credit
======================================== */
.artwork_credit {
  margin-block: 0.5rem 0;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--color-text-light);
  text-align: right;
}

/*----- Mobile -----*/
@media (max-width: 767px) {

  .artwork_credit {
    font-size: 1.1rem;
  }

}


/* ========================================
Article Body
======================================== */
.article_body {
  width: var(--content-width);
  margin-block: 3.5rem 0;
  margin-inline: auto;
}

/*----- Mobile -----*/
@media (max-width: 767px) {

  .article_body {
    width: auto;
    margin-inline: var(--content-padding-sp);
    margin-block: 2.5rem 0;
  }

}


/*======================
Article Intro
=======================*/
.article_intro {
  margin-block: 2rem 0;
  font-size: 2rem;
  line-height: 1.6;
}

.article_intro p {
  margin-block: 1.6rem 0;
}

/*----- Mobile -----*/
@media screen and (max-width: 767px) {

  .article_intro {
    margin-block: 1.5rem 0;
    font-size: 1.5rem;
  }

}


/*======================
Expert Profile
=======================*/
.expert_profile_container {
  margin-block: 3rem 0;
  padding-block: 4.2rem 2rem;
  padding-inline: 2.4rem;
  background-color: var(--color-profile-background);
  position: relative;
}

.expert_profile {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
}

.expert_profile_image {
  flex: 0 0 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
}

.expert_profile_label {
  position: absolute;
  top: 1rem;
  left: -0.5rem;
  font-size: 1.4rem;
  font-weight: 500;
  display: inline-block;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  color: var(--color-white);
  background-color: var(--color-green);
}

.expert_profile_label::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-top: 0.5rem solid #536d2d;
  border-left: 0.5rem solid transparent;
}

.expert_profile_image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.expert_profile_content {
  flex: 1;
  min-width: 0;
}

.expert_profile_name {
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  gap: 0 0.4em;
  align-items: baseline;
}

.expert_profile_name span {
  font-size: 1.4rem;
  font-weight: 400;
}

.expert_profile_text {
  margin-block: 1rem 0;
  font-size: 1.4rem;
  line-height: 1.4;
}

/*----- Mobile -----*/
@media screen and (max-width: 767px) {

  .expert_profile_container {
    margin-block: 2.8rem 0;
    padding: 1.6rem;
  }
  
  .expert_profile {
    gap: 1.5rem;
  }
  
  .expert_profile_image {
    flex-basis: 8.5rem;
    margin-block: 3rem 0;
  }
  
  .expert_profile_name {
    font-size: 1.6rem;
  }
  
  .expert_profile_name span {
    font-size: 1.2rem;
  }
  
  .expert_profile_text {
    font-size: 1.3rem;
    line-height: 1.6;
  }

}


/*======================
Article Link
=======================*/
.article_link {
  margin-block: 3.5rem 0;
}

.article_link_anchor {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-block: 2rem;
  padding-inline: 3rem 2rem;
  box-sizing: border-box;
  border: 1px solid var(--color-green);
  border-radius: 1.2rem;
  background-color: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.article_link_content {
  flex: 1;
  min-width: 0;
}

.article_link_title {
  text-decoration: underline;
  text-underline-offset: 0.35em;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-green);
}

.article_link_text {
  margin-block: 1em 0;
  font-size: 1.4rem;
  line-height: 1.4;
}

.article_link_image {
  flex: 0 0 18rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.article_link_image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) {
  .article_link_anchor:hover {
    background-color: var(--color-white);
    box-shadow: 0 0.6rem 1.6rem rgba(39, 37, 35, 0.12);
    transform: translateY(-2px);
  }
}

/*----- Mobile -----*/
@media screen and (max-width: 767px) {

  .article_link {
    margin-block: 2.8rem 0;
  }
  
  .article_link_anchor {
    display: block;
    padding: 2rem;
  }
  
  .article_link_title {
    font-size: 1.7rem;
    line-height: 1.6;
  }
  
  .article_link_text {
    font-size: 1.4rem;
  }
  
  .article_link_image {
    width: 60%;
    margin-block: 1.5rem 0;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
  }

}


/* ========================================
Talk
======================================== */
.talk {
  margin-block: 3.2rem 0;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.talk_icon {
  flex-shrink: 0;
  width: 6rem;
}

.talk_icon img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.talk_balloon {
  flex: 1;
}

.talk_name {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.4;
}

.talk_content {
  position: relative;
  padding-block: 3rem;
  padding-inline: 3rem;
  margin-block: 0.8rem 0;
  background: var(--color-dialog-background);
  border: 1px solid var(--color-border);
  border-radius: 1.6rem;
}

.talk_content::before,
.talk_content::after {
  content: "";
  position: absolute;
  top: 2rem;
  left: 0;
  translate: -100% -50%;
}

.talk_content::before {
  border-style: solid;
  border-width: 6px 15px 6px 0;
  border-color: transparent var(--color-border) transparent transparent;
}

.talk_content::after {
  left: 1px;
  border-style: solid;
  border-width: 5px 13px 5px 0;
  border-color: transparent var(--color-dialog-background) transparent transparent;
}

.talk_content p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.8;
}

.talk_content ul + p,
.talk_content p + p {
  margin-block: 2rem 0;
}

.talk_content ul {
  margin-block: 2rem 0;
}

.talk_content ul li {
  list-style: none;
  font-size: 1.6rem;
  line-height: 1.6;
  padding-inline: 1em 0;
  position: relative;
}

.talk_content ul li + li {
  margin-block: 0.5em 0;
}

.talk_content ul li:before {
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-green);
  position: absolute;
  top: 0.65em;
  left: 0.2em;
}


/* ========================================
Talk Expert
======================================== */

.talk--expert {
  flex-direction: row-reverse;
}

.talk--expert .talk_name {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.talk--expert .talk_content {
  background: var(--color-white);
}

.talk--expert .talk_content::before,
.talk--expert .talk_content::after {
  left: auto;
  translate: 100% -50%;
}

.talk--expert .talk_content::before {
  right: 0;
  border-width: 6px 0 6px 15px;
  border-color: transparent transparent transparent var(--color-border);
}

.talk--expert .talk_content::after {
  right: 1px;
  border-width: 5px 0 5px 13px;
  border-color: transparent transparent transparent var(--color-white);
}



/*----- Mobile -----*/
@media (max-width: 767px) {

  .talk {
    gap: 1.2rem;
  }
  
  .talk_icon {
    width: 4.8rem;
  }
  
  .talk_name {
    font-size: 1.2rem;
  }
  
  .talk_content {
    padding: 2rem;
    border-radius: 1.2rem;
  }
  
  .talk_content p {
    font-size: 1.4rem;
  }

  .talk_content ul li {
    font-size: 1.4rem;
  }

}


/* ========================================
Reader Letter
======================================== */
.reader_letter {
  --letter-line-height: 3.2rem;
  --letter-bg-color: #fffefb;
  --letter-border-color: #e2a89b;
  --letter-line-color: #d7dfe5;

  position: relative;
  margin-block: 3.5rem 0;
  padding: 3.2rem 3rem 2.6rem;
  border: 1px solid var(--letter-border-color);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--letter-line-height) - 1px),
      var(--letter-line-color) calc(var(--letter-line-height) - 1px),
      var(--letter-line-color) var(--letter-line-height)
    ),
    var(--letter-bg-color);
}

.reader_letter_label {
  position: absolute;
  display: inline-block;
  color: var(--color-text);
  -webkit-text-stroke: 6px var(--letter-bg-color);
  paint-order: stroke;

  
  font-size: 1.8rem;
  font-weight: 500;
  top: -0.5em;
  left: 2.8rem;
}

.reader_letter_text {
  font-family: "Noto Serif JP", serif;
  font-size: 1.6rem;
  line-height: var(--letter-line-height);
}

.reader_letter_profile {
  font-size: 1.3rem;
  line-height: var(--letter-line-height);
  text-align: right;
}

.reader_letter_note {
  margin-block: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.4;
  padding-inline: 1em 0;
  text-indent: -1em;
  color: var(--color-text-light);

}

/*----- Mobile -----*/
@media screen and (max-width: 767px) {

  .reader_letter {
    --letter-line-height: 2.8rem;

    margin-block: 2.5rem 0;
    padding: 2.8rem 2rem 2rem;
  }

  .reader_letter_label {
    font-size: 1.6rem;
    top: -0.5em;
    left: 2rem;
  }

  .reader_letter_text {
    font-size: 1.4rem;
  }

  .reader_letter_profile {
    font-size: 1.2rem;
  }

}


/* ========================================
Article Heading
======================================== */
.article_heading {
  margin-block: 6rem 0;
  padding-block: 1.5rem;
  padding-inline:  1.8rem;
  background: var(--color-heading-background);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.5;
}

/*----- Mobile -----*/
@media (max-width: 767px) {

  .article_heading {
    margin-block: 4rem 0;
    padding-block: 1.4rem;
    padding-inline: 1.6rem;
    font-size: 1.6rem;
  }

}

/*======================
Article Image
=======================*/
.article_image {
  margin-block: 3.2rem;
}

.article_image img {
  display: block;
  width: 100%;
  height: auto;
}

.article_image_large {
  width: 80rem;
  margin-inline: auto;
}

.article_image_medium {
  width: 60rem;
  margin-inline: auto;
}

@media (max-width: 767px) {

  .article_image {
    margin-block: 2.4rem;
  }
  
  .article_image_large,
  .article_image_medium {
    width: 100%;
  }

}

/* ========================================
Article Panel
======================================== */
.article_panel {
  width: 100%;
  margin-block: 3.2rem 0;
  padding-block: 3rem;
  padding-inline: 3rem;
  background-color: var(--color-highlight-background);
}

.article_text + .article_panel {
  margin-block: 1rem 0;
}


/*----- Mobile -----*/
@media (max-width: 767px) {

  .article_panel {
    margin-block: 2.4rem;
    padding: 2rem;
  }

}

/* ========================================
Article Text
======================================== */
.article_text {
  margin-block: 3.2rem 0;
}

.article_text p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.8;
}

.article_text p + p {
  margin-block: 1.6rem 0;
}

/*----- Mobile -----*/
@media (max-width: 767px) {

  .article_text {
    margin-block: 2.4rem 0;
  }
  
  .article_text p {
    font-size: 1.4rem;
  }

}


/* ========================================
Text Highlight
======================================== */
.text_highlight {
  display: inline;
  font-weight: 700;
  background-image: linear-gradient(
    transparent 40%,
    var(--color-highlight) 40%
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* ========================================
Check Test
======================================== */
.check_test_heading {
  position: relative;
  margin-inline: 1.5em 0;
  padding-block: 0 0.4em;
  padding-inline: 0.6em 0;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
  border-bottom: solid 1px var(--color-text);
}

.check_test_heading::before {
  content: "";
  position: absolute;
  left: -1.8em;
  top: -0.15em;
  width: 1.8em;
  height: 1.6em;
  border-top: solid 1px var(--color-text);
  border-left: solid 1px var(--color-text);
  border-right: solid 1px var(--color-text);
}

.check_test_heading::after {
  content: "";
  position: absolute;
  left: -1.2em;
  top: 0.1em;
  width: 0.65em;
  height: 0.7em;
  border-top: solid 2px var(--color-text);
  border-left: solid 2px var(--color-text);
  transform: rotate(-135deg);
}

.check_test_sub_heading {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.4;
  margin-block: 2.5rem 0;
}

.check_test_list {
  margin-block: 2.5rem 0;
}

.check_test_list li {
  position: relative;
  display: flex;
  gap: 0.4em;
  list-style: none;
  font-size: 1.6rem;
  line-height: 1.4;
}

.check_test_list li + li {
  margin-block: 1em 0;
}

.check_test_list li::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 1.38em;
  height: 1.38em;
  border: solid 2px var(--color-text);
  background-color: var(--color-white);
}

.check_test_list li::after {
  content: "";
  position: absolute;
  left: 0.4em;
  top: 0.5em;
  width: 0.6em;
  height: 0.8em;
  border-top: solid 2px var(--color-heading-background);
  border-left: solid 2px var(--color-heading-background);
  transform: translateY(-50%) rotate(-135deg);
}

.check_test_note {
  margin-block: 2rem 0;
  font-size: 1.6rem;
  line-height: 1.6;
  padding-inline: 1em 0;
  text-indent: -1em;
}

.check_test_note + .check_test_note {
  margin-block: 0;
}


/*----- Mobile -----*/
@media (max-width: 767px) {

  .check_test_heading {
    font-size: 1.6rem;
  }

  .check_test_sub_heading {
    font-size: 1.4rem;
    margin-block: 2rem 0;
  }
  
  .check_test_list {
    margin-block: 2rem 0;
  }

  .check_test_list li {
    font-size: 1.4rem;
  }

  .check_test_note {
    margin-block: 1.6rem 0;
    font-size: 1.3rem;
  }

}


/* ========================================
Recommended Article
======================================== */
.recommended_article {
  position: relative;
  margin-block: 6.2rem 0;
  padding-block: 3rem;
  padding-inline: 3rem;
  border: 1px solid var(--color-green);
  border-radius: 1.2rem 0 1.2rem 1.2rem;
  background-color: var(--color-dialog-background);
}

.recommended_article_label {
  position: absolute;
  top: -1px;
  right: -1px;
  padding-block: 0.5em;
  padding-inline: 1em;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-white);
  background-color: var(--color-green);
  border-radius: 0.8rem 0.8rem 0 0;
  transform: translateY(-100%);
}

.recommended_article_heading {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: solid 1px var(--color-green);
  padding-block: 0 1rem;
}

.recommended_article_body {
  display: flex;
  gap: 2.4rem;
  margin-block: 1.5rem 0;
}

.recommended_article_image {
  flex: 0 0 12.8rem;
}

.recommended_article_image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.recommended_article_content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.recommended_article_text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.6;
}

.recommended_article_button {
  margin-block: auto 0;
}

.recommended_article_button a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding-block: 0.5em;
  padding-inline: 1.2em;
  border-radius: 0.6rem;
  background-color: var(--color-terracotta);
  box-shadow: 0 0.4rem 0 var(--color-terracotta-shadow);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-white);
  text-decoration: none;
  transition:
    filter 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.recommended_article_button a::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

@media (hover: hover) {
  .recommended_article_button a:hover {
    filter: brightness(1.04);
    transform: translateY(2px);
    box-shadow: 0 0.2rem 0 var(--color-terracotta-shadow);
  }
}

/*----- Mobile -----*/
@media (max-width: 767px) {

  .recommended_article {
    margin-block: 4.2rem 0;
    padding-block: 2rem;
    padding-inline: 2rem;
  }

  .recommended_article_label {
    max-width: calc(100% - 2rem);
    padding-block: 0.4em;
    padding-inline: 1em;
    font-size: 1.1rem;
  }

  .recommended_article_heading {
    font-size: 1.4rem;
  }

  .recommended_article_body {
    gap: 1.6rem;
    margin-block: 2rem 0;
  }

  .recommended_article_image {
    flex: 0 0 10rem;
  }

  .recommended_article_text {
    font-size: 1.2rem;
    line-height: 1.7;
  }

  .recommended_article_button a {
    gap: 0.4em;
    font-size: 1.2rem;
    margin-block: 1rem 0;
    padding-inline: 0.5rem 0.8rem;
  }

  .recommended_article_button a::before {
    width: 0.5em;
    height: 0.5em;
  }

}

/* ========================================
Article Summary
======================================== */
.article_summary {
  margin-block: 6rem 0;
  padding-block: 3.2rem;
  padding-inline: 4rem;
  border: solid 4px var(--color-terracotta);
  position: relative;
}

.article_summary_heading {
  font-size: 1.6rem;
  color: var(--color-terracotta);
  padding-inline: 0.5em;
  position: absolute;
  top: -1rem;
  left: 1rem;
  background: var(--color-page-background);
}

.article_summary p {
  margin: 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-terracotta);
}

/*----- Mobile -----*/
@media (max-width: 767px) {

  .article_summary {
    margin-block: 4rem 0;
    padding: 2rem;
    border-width: 3px;
  }

  .article_summary_heading {
    font-size: 1.4rem;
  }

  .article_summary p {
    font-size: 1.6rem;
    line-height: 1.7;
  }

}

/* ========================================
Article Back
======================================== */
.article_back {
  margin-block: 4rem;
  text-align: center;
}

.article_back a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-green);
  text-underline-offset: 0.3em;
}

.article_back a::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}