@charset "utf-8";

/* 本文専用。共通見出し・ヘッダー・フッターには適用しない。 */
.p-about {
  background-color: var(--color-bg-cream);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 2rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.p-about__inner {
  width: 84%;
  max-width: var(--inner-width);
  margin-inline: auto;
}

.p-about__ribbon {
  border-top: .6rem solid var(--color-primary);
}

.p-about__title {
  width: min(90%, 61rem);
  margin: 0 auto;
  padding: 1rem 3rem 1.4rem;
  background: url("../../img/common/top_title.png") no-repeat center / 100% 100%;
  color: var(--color-text-invert);
  font-size: clamp(2.2rem, 2.65vw, 3.2rem);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.p-about__intro {
  padding-bottom: 5rem;
  background-color: var(--color-bg-cream);
}

.p-about__cloud {
  position: relative;
  display: grid;
  align-items: center;
  width: 90%;
  min-height: 30rem;
  margin-top: 3rem;
  margin-inline: auto;
  padding: 6rem 16%;
  background: url("../../img/about/about-cloud.svg") no-repeat center / 100% 100%;
}

.p-about__definition {
  margin: 0;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.p-about__otter {
  position: absolute;
  right: 4rem;
  bottom: -1rem;
  width: 13rem;
  height: auto;
  pointer-events: none;
}

.p-about__vision {
  padding-bottom: 8rem;
  background-color: var(--color-bg-yellow);
}

.p-about__vision-body {
  margin-top: 5rem;
}

.p-about__text {
  margin: 0;
}

.p-about__flow {
  width: min(100%, 62rem);
  margin-top: 2.4rem;
  margin-inline: auto;
  padding: 2.4rem 3.2rem;
  border-radius: 2.4rem;
  background-color: var(--color-bg-white);
}

.p-about__flow-title {
  margin: 0;
  color: var(--color-primary);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

.p-about__flow-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
  margin: 0;
  margin-top: 1.2rem;
  padding: 0;
  list-style: none;
}

.p-about__flow-item {
  display: grid;
  place-items: center;
  min-height: 8.6rem;
  padding: 1rem 2rem 1rem 1rem;
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
  background-color: var(--color-secondary);
  color: var(--color-text-invert);
  font-size: 2.6rem;
  font-weight: 700;
}

.p-about__lead {
  margin-top: 2.4rem;
}

.p-about__steps {
  display: grid;
  gap: 1.6rem;
  margin: 0;
  margin-top: 3rem;
  padding: 0;
  list-style: none;
}

.p-about__step {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-height: 8.6rem;
  overflow: hidden;
  border: .1rem solid var(--color-secondary);
  border-radius: 2.4rem;
  background-color: var(--color-bg-white);
}

.p-about__step-label {
  display: grid;
  align-items: center;
  padding: 1.2rem 2.5rem;
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
  background-color: var(--color-secondary);
  color: var(--color-text-invert);
  font-size: 2.6rem;
  font-weight: 700;
}

.p-about__step-text {
  align-self: center;
  margin: 0;
  padding: 1.6rem 3.2rem;
}

.p-about__emphasis {
  color: var(--color-primary);
  font-weight: 700;
}

.p-about__message {
  position: relative;
  width: min(82%, 70rem);
  min-height: 11.4rem;
  margin-top: 5.6rem;
  margin-inline: auto;
  padding: 2.8rem 3rem 2.8rem 10rem;
  border-radius: 2.4rem;
  background-color: var(--color-secondary);
}

.p-about__guide {
  position: absolute;
  bottom: 0;
  left: -1.2rem;
  width: 9rem;
  height: auto;
  pointer-events: none;
}

.p-about__message-text {
  margin: 0;
  color: var(--color-text-invert);
  font-weight: 700;
  text-align: center;
  font-size: 1.8rem;
}

.p-about__learn {
  padding-bottom: 8rem;
}

.p-about__links {
  display: grid;
  gap: 2.2rem;
  margin: 0;
  margin-top: 4rem;
  padding: 0;
  list-style: none;
}

.p-about__link {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-height: 8rem;
  padding: 2.4rem 5.6rem;
  border: .1rem solid var(--color-secondary);
  border-radius: 1.6rem;
  background-color: var(--color-bg-white);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s ease-out;
}

.p-about__link-text {
  min-width: 0;
}

.p-about__arrow {
  flex-shrink: 0;
  color: var(--color-primary);
}

.p-about__link:focus-visible {
  outline: .3rem solid var(--color-primary);
  outline-offset: .3rem;
}

@media (hover: hover) and (pointer: fine) {
  .p-about__link:hover {
    opacity: .6;
  }
}

.p-about__mobile-break {
  display: none;
}

@media screen and (max-width: 767px) {
  .p-about__mobile-break {
    display: inline;
  }

  .p-about__intro {
    padding-bottom: 7rem;
  }
  .p-about__inner {
    width: calc(100% - 3.2rem);
  }

  .p-about__ribbon {
    border-top-width: .4rem;
  }

  .p-about__title {
    width: 94%;
    padding: 1.2rem 2.4rem;
    font-size: 2.8rem;
  }

  .p-about__text {
    font-size: 1.8rem;
  }

  .p-about__intro > .p-about__inner {
    width: 100%;
  }

  .p-about__cloud {
    display: block;
    width: 100%;
    min-height: 0;
    margin-top: 4rem;
    padding: 0;
    background: none;
  }

  .p-about__cloud-copy {
    position: relative;
    padding: 2rem 2.8rem;
    background-color: var(--color-bg-white);
  }

  .p-about__cloud-copy::before,
  .p-about__cloud-copy::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.4rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 375 24' preserveAspectRatio='none'%3E%3Cpath d='M0 18Q35 -12 75 18Q125 -14 175 18Q220 -12 265 18Q320 -14 375 18V24H0Z' fill='white'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    content: "";
    pointer-events: none;
  }

  .p-about__cloud-copy::before {
    top: -2.3rem;
  }

  .p-about__cloud-copy::after {
    bottom: -2.3rem;
    transform: rotate(180deg);
  }

  .p-about__definition {
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
  }

  .p-about__otter {
    position: static;
    display: block;
    width: 13rem;
    height: auto;
    margin-top: 4rem;
    margin-inline: auto;
  }

  .p-about__vision-body {
    margin-top: 3.2rem;
  }

  .p-about__flow {
    padding: 2rem 1.6rem;
  }

  .p-about__flow-title {
    font-size: 2rem;
  }

  .p-about__flow-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
    width: 80%;
    margin-inline: auto;
  }

  .p-about__flow-item {
    min-height: 8rem;
    padding: 1.4rem 1rem 2.8rem;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
    font-size: 2.4rem;
  }

  .p-about__step {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 1.6rem;
  }

  .p-about__step-label {
    min-height: 8rem;
    padding: 1.6rem 1rem 3rem;
    place-items: center;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
    font-size: 2.6rem;
  }

  .p-about__step-text {
    padding: 2rem 2.8rem 2.4rem;
    font-size: 1.8rem;
  }

  .p-about__desktop-break {
    display: none;
  }

  .p-about__message {
    width: 100%;
    min-height: 20rem;
    margin-top: 3.2rem;
    padding: 3.2rem 2.4rem 3.2rem 11rem;
  }

  .p-about__guide {
    left: 0;
    width: 10rem;
  }

  .p-about__message-text {
    text-align: left;
  }

  .p-about__vision,
  .p-about__learn {
    padding-bottom: 5rem;
  }

  .p-about__links {
    gap: 1.6rem;
    margin-top: 3.2rem;
  }

  .p-about__link {
    min-height: 6.4rem;
    padding: 1.6rem 2rem;
  }

  .p-about__link-text {
    font-size: 1.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-about__link {
    transition: none;
  }
}

@media print {
  .p-about__title {
    background-image: none;
    color: var(--color-text);
  }

  .p-about__flow-item,
  .p-about__step-label,
  .p-about__message-text {
    color: var(--color-text);
  }

  .p-about__cloud {
    background-image: none;
  }

  .p-about__step,
  .p-about__message,
  .p-about__link-item {
    break-inside: avoid;
  }
}

/* ==========================================================================
   記事詳細（single-about.php）
   --------------------------------------------------------------------------
   専門家の写真・紹介・プロフィールと、記事部（中見出し／画像／小見出し／本文）。
   内容はすべてACFフィールドから出力する。
   ========================================================================== */

/* 本文の最大幅。PCで1000pxに収める。 */
.p-about-single .l-inner--narrow {
  max-width: 100rem;
}

/* --- 専門家の紹介 --------------------------------------------------------- */

/*
 * 紹介文・プロフィール・見出しは <BR> を改行文字に置き換えて渡すため、
 * 改行だけを保持する（余分な空白は詰める）。
 */
.p-about-single__comment,
.p-about-single__speaker-name,
.p-about-single__profile-text,
.p-about-single__head,
.p-about-single__head-s {
  white-space: pre-line;
}

.p-about-single__intro {
  padding: 3.2rem;
  border: .1rem solid var(--color-border);
  border-radius: 1.6rem;
  background-color: var(--color-bg-white);
}

.p-about-single__speech {
  display: grid;
  grid-template-columns: 22rem minmax(0, 1fr);
  align-items: center;
  gap: 3.2rem;
}

.p-about-single__speaker {
  margin: 0;
}

.p-about-single__speaker-image {
  display: block;
  width: 100%;
  height: auto;
}

.p-about-single__speech-body {
  min-width: 0;
}

.p-about-single__comment {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.8;
}

.p-about-single__speaker-name {
  margin-top: 1.6rem;
  font-size: 1.8rem;
  font-weight: 700;
}

/* --- プロフィール --------------------------------------------------------- */
.p-about-single__profile {
  margin-top: 3.2rem;
  padding: 2.4rem 3.2rem;
  border-radius: 1.6rem;
  background-color: var(--color-bg-yellow);
}

.p-about-single__profile-title {
  margin: 0;
  color: var(--color-primary);
  font-size: 1.8rem;
  font-weight: 700;
}

.p-about-single__profile-text {
  margin-top: 1.2rem;
  font-size: 1.5rem;
  line-height: 1.8;
}

/* --- フリーテキスト・記事部・ブロックエディタ本文 -------------------------- */

.p-about-single__free,
.p-about-single__article-body,
.p-about-single__body {
  margin-top: 4rem;
  padding: 3.2rem;
  border: .1rem solid var(--color-border);
  border-radius: 1.6rem;
  background-color: var(--color-bg-white);
  font-size: 1.8rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.p-about-single__free + .p-about-single__article-body,
.p-about-single__article-body + .p-about-single__body {
  margin-top: 2.4rem;
}

.p-about-single__free > :first-child,
.p-about-single__text > :first-child,
.p-about-single__body > :first-child {
  margin-top: 0;
}

.p-about-single__free img,
.p-about-single__text img,
.p-about-single__body img {
  max-width: 100%;
  height: auto;
}

.p-about-single__free strong,
.p-about-single__free b,
.p-about-single__text strong,
.p-about-single__text b,
.p-about-single__body strong,
.p-about-single__body b {
  font-weight: 700;
}

.p-about-single__head {
  margin: 0;
  padding-bottom: 1.2rem;
  border-bottom: .2rem solid var(--color-primary);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
}

.p-about-single__figure {
  margin: 0;
  margin-top: 2.4rem;
}

.p-about-single__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-m);
}

.p-about-single__head-s {
  margin-top: 3.2rem;
  color: var(--color-primary);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}

.p-about-single__text {
  margin-top: 1.6rem;
}

/* --- 一覧へ戻る ----------------------------------------------------------- */
.p-about-single__back {
  margin-top: 6.4rem;
  text-align: center;
}

.p-about-single__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: min(100%, 36rem);
  min-height: 5.6rem;
  padding: 1.2rem 2.4rem;
  border: .2rem solid var(--color-primary);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-white);
  color: var(--color-primary);
  font-size: 1.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s ease-out;
}

.p-about-single__button:focus-visible {
  outline: .3rem solid var(--color-primary);
  outline-offset: .4rem;
}

@media (hover: hover) and (pointer: fine) {
  .p-about-single__button:hover {
    opacity: .6;
  }
}

@media screen and (max-width: 767px) {
  .p-about-single__intro {
    padding: 2rem;
  }

  .p-about-single__speech {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    justify-items: center;
  }

  .p-about-single__speaker-image {
    width: 16rem;
  }

  .p-about-single__profile {
    margin-top: 2.4rem;
    padding: 2rem;
  }

  .p-about-single__free,
  .p-about-single__article-body,
  .p-about-single__body {
    margin-top: 3.2rem;
    padding: 2rem;
  }

  .p-about-single__head {
    font-size: 2rem;
  }

  .p-about-single__head-s {
    margin-top: 2.4rem;
    font-size: 1.8rem;
  }

  .p-about-single__back {
    margin-top: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-about-single__button {
    transition: none;
  }
}

@media print {
  .p-about-single__back {
    display: none;
  }

  .p-about-single__intro,
  .p-about-single__figure {
    break-inside: avoid;
  }
}