/**
 * こちらにCSSを追記できます
 */

/* ヘッダー
--------------------------- */
/* 子メニューがあるliタグ */
.l-header__navigation-parent {
  position: relative;
  /* hover領域をheader高さいっぱいにする */
  display: flex;
  height: inherit;
}

.l-header__navigation-item .nav-parent {
}

.l-header__navigation-arrow {
  position: absolute;
  inline-size: 13px;
  left: 50%;
  transform: translateX(-50%);
  margin-block-start: 4px;
  bottom: 18px; /* hover領域をheader高さいっぱいにしたい場合は有効化 */
}

/* 親メニューhover時に子メニューを表示 */
.l-header__navigation-parent:hover .l-header__navigation-item-column {
  display: block;
  opacity: 1;
}

.l-header__navigation-item-column {
  position: absolute;
  display: none;
  opacity: 0;
  background-color: var(--color-base);
  /* top: 50px; hover領域の高さを広げない場合は有効化 */
  top: 80px; /* hover領域をheader高さいっぱいにしたい場合は有効化 */
  left: 50%;
  transform: translateX(-50%);
}

.l-header__navigation-item-column-menu {
  min-inline-size: 200px;
}

.l-header__navigation-item-column-menu-link {
  text-decoration: unset;
  display: block;
  inline-size: 100%;
  text-align: center;
  padding-block: 1em;
  padding-inline: 0.5em;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-main);
      color: #fff;
    }
  }

  &:focus-within {
    background-color: var(--color-main);
    color: #fff;
  }
}

/* サイドバー
--------------------------- */
.l-sidebar {
  display: flex;
  flex-direction: column;
  row-gap: 80px;

  --content-margin-block-start: 32px;
}

/* ウィジェット共通 */
.c-widget {
}

/* よく読まれている記事 */
.c-widget__read {
}

.c-widget__read-wrapper-title {
}

.c-widget__read-wrapper {
  margin-block-start: 35px;
  display: grid;
  row-gap: 20px;
}

.c-widget__read-wrap {
}

.c-widget__read-link {
  display: flex;
  column-gap: 8px;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
  min-block-size: 80px;

  @media (any-hover: hover) {
    &:hover {
      background-color: #74b498;

      .c-widget__read-title {
        color: #fff;
      }
    }
  }
}

.c-widget__read-title {
  font-size: 16px;
  color: var(--color-main);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease-in-out;
}

.c-widget__read-thumbnail {
  width: 60px;
}

/* カテゴリー一覧 */
.c-widget__categories {
}

.c-widget__title {
  padding-block: 1em;
  border-block-end: 1px solid var(--color-gray-200);
}

.c-widget__list {
  display: grid;
  margin-block-start: var(--content-margin-block-start);
  row-gap: 8px;
}

.c-widget__item {
}

.c-widget__link {
  border: 1px solid var(--color-gray-200);
  border-radius: 5px;
  display: grid;
  padding: 10px;
  place-items: center;
  text-align: center;
  height: 60px;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

  @media (any-hover: hover) {
    &:hover {
      background-color: #74b498;
      color: #fff;
    }
  }
}
.c-widget__archive {
}

.c-archive__dropdown {
  margin-block-start: var(--content-margin-block-start);
  width: 100%;
  padding: 10px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  -webkit-appearance: menulist; /* Safari and Chrome */
  -moz-appearance: menulist; /* Firefox */
  appearance: menulist;
}

.c-archive__dropdown option {
  padding: 10px;
  font-size: 1em;
}

/* トップページ：コラム
--------------------------- */
.p-top-column {
  background: #f7fbf8;
  padding-top: 80px;
  padding-bottom: 80px;
}
.p-top-column__inner {
  padding-right: 10vw;
  padding-left: 10vw;
}
@media (max-width: 767px) {
  .p-top-column__inner {
    padding-right: 3vw;
    padding-left: 3vw;
  }
}
.p-top-column__heading {
  text-align: center;
}
.p-top-column__heading-large {
  color: var(--color-main);
  font-size: 48px;
  font-weight: 300;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .p-top-column__heading-large {
    font-size: 32px;
  }
}
.p-top-column__heading-small {
  display: block;
  font-size: 16px;
}
@media (max-width: 767px) {
  .p-top-column__heading-small {
    font-size: 12px;
  }
}

.p-top-column__top {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 60px;

  /* トップページ内コラム記事のスタイル */
  .c-article {
    background: var(--color-base);
    border-radius: 15px;
    -webkit-box-shadow: 10px 10px 30px rgba(20, 74, 11, 0.1);
    box-shadow: 10px 10px 30px rgba(20, 74, 11, 0.1);
    padding: 20px 20px 25px;
    grid-template-rows: subgrid;
    grid-row: span 4;
    grid-template-columns: unset;
    grid-template-areas:
      "thumbnail thumbnail"
      "info info"
      "title title"
      "text text";
    border: 1px solid transparent;
    transition: border 0.3s ease-in-out;

    @media (any-hover: hover) {
      &:hover {
        border: 1px solid var(--color-main);
      }
    }
  }

  .c-article__info {
  }
  .c-article__date {
  }
  .c-article__category {
  }
  .c-article__category-item {
  }
  .c-article__title {
  }
  .c-article__text {
  }
  .c-article__thumbnail {
    aspect-ratio: 1.618 / 1;
    border-radius: 10px;
    object-fit: cover;
    overflow: clip;
  }
  .c-blank-message {
  }
}

@media (max-width: 767px) {
  .p-top-column__top {
    gap: 15px;
    grid-template-columns: 1fr;
    padding-top: 20px;
  }
}

/* コラム一覧ページ
--------------------------- */
.p-column-list {
  display: grid;
  grid-template-columns: 1fr 240px;
  padding-inline: 10vw;
  padding-block: clamp(40px, 16.888px + 6.163vw, 80px);
  column-gap: min(80px, 4vw);
  inline-size: min(100%, 1440px);
  margin-inline: auto;
}

@media (max-width: 767px) {
  .p-column-list {
    padding-inline: 3vw;
    grid-template-columns: unset;
    column-gap: unset;
  }
}

@media (max-width: 1023px) {
  .p-column-list {
    grid-template-columns: unset;
  }
}

.p-column-list__inner {
}

.p-column-list__side {
  padding-block: 1em;
}

.p-column-list__side-category-item {
}
.p-column-list__side-category-item.-current {
}
.p-column-list__main {
}
.p-column-list__articles {
}

.c-article {
  grid-template-columns: min(300px, 100%) 1fr;
  grid-template-areas:
    "thumbnail info"
    "thumbnail title"
    "thumbnail text";
}

@media (max-width: 767px) {
  .c-article {
    grid-template-columns: unset;
    grid-template-areas:
      "thumbnail thumbnail"
      "info info"
      "title title"
      "text text";
  }
}

.c-article__info {
  grid-area: info;
  display: flex;
  justify-content: space-between;
}

.c-article__date {
}
.c-article__category {
  /* style.cssの.c-article__categoryを打ち消し */
  -webkit-box-align: unset;
  -ms-flex-align: unset;
  align-items: unset;
  border: unset;
  border-radius: unset;
  -webkit-box-pack: unset;
  justify-content: unset;
  padding: unset;
  /* スタイルを追加 */
  display: flex;
  gap: 1em;
}

.c-article__category-item {
  /* style.cssの.c-article__categoryを反映 */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid var(--color-gray-200);
  border-radius: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* スタイルを追加 */
  padding: 0.1em 0.8em;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-article__category-item + .c-article__category-item::before {
  content: ""; /* style.cssの. "・" を削除 */
}

.c-article__title {
  grid-area: title;
  font-size: 16px;
  color: var(--color-main);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-article__text {
  grid-area: text;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-article__thumbnail {
  grid-area: thumbnail;
}

.c-blank-message {
}

/* コラム詳細ページ
--------------------------- */
.p-column-detail {
  display: grid;
  grid-template-columns: 1fr 240px;
  padding-inline: 10vw;
  padding-block: clamp(40px, 16.888px + 6.163vw, 80px);
  column-gap: min(80px, 4vw);
  inline-size: min(100%, 1440px);
  margin-inline: auto;
}

@media (max-width: 1023px) {
  .p-column-detail {
    grid-template-columns: unset;
  }
}

.p-column-detail__title {
  display: flex;
  margin-inline: auto;
  /* padding-block-start: 40px; */
  padding-block-end: 25px;
  font-size: 24px;
  line-height: 1.5em;
  position: relative;
  word-break: break-all;
  inline-size: fit-content;
  margin-inline: auto;
  font-weight: 600;

  &::before {
    background-color: var(--color-gray-200);
    content: "";
    position: absolute;
    bottom: 0;
    height: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* .c-wp-contents h1の元のスタイル */
    /* left: calc(50% - 20vw);
    width: 40vw; */
  }

  &::after {
    content: "";
    background-color: var(--color-main);
    position: absolute;
    bottom: 0;
    height: 2px;
    left: calc(50% - 10vw);
    width: 20vw;
    /* .c-wp-contents h1の元のスタイル */
    /* left: calc(50% - 60px);
    width: 120px; */
  }
}
.p-column-detail__main {
  /* style.cssを上書き */
  .c-wp-contents h2:not([class]) {
    font-weight: 600;
  }

  .c-wp-contents p {
    font-size: 1rem;
  }
}

.p-column-detail__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-block: 2em;
}

.p-column-detail__date {
  color: var(--color-gray-800);
}

.p-column-detail__category {
  display: flex;
  gap: 1em;
}

.p-column-detail__category-item {
  color: var(--color-gray-800);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid var(--color-gray-200);
  border-radius: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.1em 0.8em;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-column-detail__eyecatch {
}
.p-column-detail__article-body {
  padding-block: 40px;
}

.c-wp-contents {
}

.p-column-detail__pagination {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

@media (max-width: 767px) {
  .p-column-detail__pagination {
    grid-auto-flow: row;
  }
}

.p-column-detail__prev {
}

.p-column-detail__next {
}

.p-column-detail__prev-link {
  display: block;
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  padding: 20px 5%;
  text-align: center;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

  @media (any-hover: hover) {
    &:hover {
      background-color: #74b498;
      color: #fff;
    }
  }
}

.p-column-detail__next-link {
  display: block;
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  padding: 20px 5%;
  text-align: center;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

  @media (any-hover: hover) {
    &:hover {
      background-color: #74b498;
      color: #fff;
    }
  }
}

@media (max-width: 767px) {
  .p-column-detail__main .c-wp-contents table {
    max-width: 74vw;
  }
}

/* コラム医師プロフィール --------------------------- */
.profile-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 子要素を中央揃え */
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 800px;
  margin: 20px auto;
}

.profile-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-bottom: 20px; /* 画像とテキストの間にスペースを追加 */
  object-fit: cover;
}

.profile-text {
  flex: 1;
  text-align: left; /* 文字を左寄せ */
  width: 100%; /* テキストの幅を100%に設定 */
}

.profile-text h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

/* テーブル --------------------------- */
  .hikaku {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* テーブルのレイアウトを固定 */
  }
  .hikaku th, .hikaku td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
    box-sizing: border-box;
    white-space: normal; /* テキストの折り返しを有効にする */
    word-wrap: break-word; /* 長い単語を折り返す */
  }
  .hikaku th:first-child {
    width: 20%;
  }
  .hikaku th:nth-child(2),
  .hikaku th:nth-child(3),
  .hikaku td:nth-child(2),
  .hikaku td:nth-child(3) {
    width: 40%;
  }

  /* スマホやタブレット向け */
  @media screen and (max-width: 600px) {
    .hikaku th, .hikaku td {
      font-size: 14px; /* スマホで見やすいようにフォントサイズを調整 */
    }
  }

/* テーブル --------------------------- */
  .hikaku2 {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* テーブルのレイアウトを固定 */
	margin: 0; /* テーブルの上下余白をなくす */  
  }
  .hikaku2 th, .hikaku2 td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
    box-sizing: border-box;
    white-space: normal; /* テキストの折り返しを有効にする */
    word-wrap: break-word; /* 長い単語を折り返す */
  }
  .hikaku2 th:first-child {
    width: 40%;
  }
  .hikaku2 th:nth-child(2),
  .hikaku2 th:nth-child(3),
  .hikaku2 td:nth-child(2),
  .hikaku2 td:nth-child(3) {
    width: 30%;
  }

  /* スマホやタブレット向け */
  @media screen and (max-width: 600px) {
    .hikaku2 th, .hikaku2 td {
      font-size: 14px; /* スマホで見やすいようにフォントサイズを調整 */
    }
  }

/* 追加　コラムに限らない
--------------------------- */

.p-top-about iframe {
  max-width: 750px; /* 最大幅を560pxに設定 */
  width: 95%; /* 親要素の幅に合わせて縮小 */
  height: auto;
  aspect-ratio: 16/9; /* アスペクト比を保持 */
  display: block; /* 要素をブロック要素に */
  margin: 0 auto; /* 左右のマージンを自動で調整して中央寄せ */
  border-radius: 10px; /* 角を丸くする */
  margin: 40px auto 0; /* 上部に20pxの余白を追加、左右は自動 */
}

/* 追加　コラムのリンクボタン
--------------------------- */

.p-top-clinic__item2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}

.p-top-clinic__item2-cta {
  display: flex; /* フレックスボックスを使用 */
  justify-content: space-between; /* ボタンの間隔を調整して左右に配置 */
  gap: 10px; /* ボタンの間にスペースを追加 */
  margin-top: auto;
  padding-top: 20px;
}

.p-top-clinic__item2-cta-button {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 10px;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 12px 0;
	width: 100%; /* ボタンを親要素の幅いっぱいに広げる */
}
.p-top-clinic__item2-cta-button.-web {
	background: var(--color-main);
	color: var(--color-base);
	-webkit-transition: -webkit-filter .3s cubic-bezier(0.4, 0.15, 0, 1);
	transition: -webkit-filter .3s cubic-bezier(0.4, 0.15, 0, 1);
	transition: filter .3s cubic-bezier(0.4, 0.15, 0, 1);
	transition: filter .3s cubic-bezier(0.4, 0.15, 0, 1), -webkit-filter .3s cubic-bezier(0.4, 0.15, 0, 1)
}
.p-top-clinic__item2-cta-button.-line {
	border: 1px solid var(--color-LINE);
	color: var(--color-LINE);
	-webkit-transition: background .3s cubic-bezier(0.4, 0.15, 0, 1);
	transition: background .3s cubic-bezier(0.4, 0.15, 0, 1)
}