@charset "UTF-8";
/*------------------------------------------------------------
	カラー
------------------------------------------------------------*/
/* 制作実績の制作区分ラベル。一覧で見分けやすいよう区分ごとに色を変える。
   白文字を載せるため、いずれも読みやすい濃さに合わせている */
/*------------------------------------------------------------
	フォント
------------------------------------------------------------*/
/*------------------------------------------------------------
	ブレイクポイント
	デザイン幅：PC 1512px / SP 375px　1rem = 10px
------------------------------------------------------------*/
/* タブレット：SPデザイン(375px)を1rem=15pxまで比例拡大し、
   563px以上はコンテンツ列(37.5rem=562px)を中央寄せする境界 */
/* Works / Process セクションのドット地紋
   （Figma実測：#eaeaea・直径2px・5px間隔。テクスチャなので画面幅で変えずpx固定） */
/* タブレット（SPレイアウトを中央寄せする幅） */
/*------------------------------------------------------------
	下層ページ共通
	（トップページ以外はこのファイルと common.css だけを読み込む）
------------------------------------------------------------*/
.subPage {
  padding-bottom: 12rem;
}

/*------------------------------------------------------------
	ページ見出し
------------------------------------------------------------*/
.pageHead {
  padding: 14rem 0 5rem;
  border-bottom: 3px solid #383838;
  background-color: #fff;
  background-image: radial-gradient(#eaeaea 1px, transparent 1px);
  background-size: 5px 5px;
  background-position: 0 0;
}
.pageHead .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
}
.pageHead .headLine01 .txtBox {
  width: auto;
}
.pageHead .lead {
  font-weight: 700;
  font-size: 2rem;
  line-height: 3rem;
  letter-spacing: 0.1rem;
}

/*------------------------------------------------------------
	パンくず
------------------------------------------------------------*/
.breadcrumb {
  padding: 2rem 0 0;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  line-height: 2rem;
}
.breadcrumb li + li::before {
  content: "＞";
  margin-right: 1rem;
  color: #999;
}
.breadcrumb a {
  text-decoration: underline;
}
@media (hover: hover) {
  .breadcrumb a:hover {
    opacity: 0.65;
  }
}

/*------------------------------------------------------------
	カード一覧（ブログ・制作実績で共通の見た目）
------------------------------------------------------------*/
.cardList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 3rem;
  margin-top: 6rem;
}

.cardList > li,
.cardList > .item {
  display: flex;
}

/* カード本体 */
.cardList .item,
.cardList > li > a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding-bottom: 2rem;
  border: 2px solid #383838;
  border-radius: 0.8rem 0.8rem 0 0.8rem;
  background-color: #fff;
}
@media (hover: hover) {
  .cardList .item:hover,
  .cardList > li > a:hover {
    opacity: 0.75;
  }
}

.cardList .img {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  /* カードの高さが揃ってもサムネイルの高さは変えない */
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 384/220;
  /* 枠線の内側カーブ（外側半径 − 線幅）に合わせる */
  border-radius: calc(0.8rem - 2px) calc(0.8rem - 2px) 0 0;
  background-color: #e9e9e9;
  overflow: hidden;
}

.cardList .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* アイキャッチが無いときのロゴ表示 */
.cardList .img .mark {
  display: block;
  width: 6.0957rem;
  height: 5rem;
  flex-shrink: 0;
}
.cardList .img .mark img {
  object-fit: contain;
}

.cardList .img .logoTxt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 20rem;
}

.cardList .img .lead {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: normal;
  letter-spacing: 0.07rem;
}

.cardList .img .name {
  display: block;
  width: 13.5rem;
}
.cardList .img .name img {
  object-fit: contain;
}

.cardList .img .noImg {
  width: 6.0957rem;
  height: 5rem;
  object-fit: contain;
}

.cardList .textBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0 2rem;
}

.cardList .tag,
.cardList .date {
  padding: 0.3rem 0.7rem;
  background-color: #db3333;
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 2.1rem;
  letter-spacing: 0.112rem;
}

/* 記事一覧はカテゴリーと日付を横並びにする */
.cardList .metaRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.cardList .metaRow .date {
  background-color: #383838;
}

.cardList .name,
.cardList .ttl {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.8rem;
  letter-spacing: 0.09rem;
}

/* 院長名・出身大学 */
.cardList .doctor {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #666;
}

/* 右下の折れ角 */
.cardList .corner {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: block;
  width: 2rem;
  height: 2rem;
}

/*------------------------------------------------------------
	制作区分の絞り込み
------------------------------------------------------------*/
.filterList {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 4rem;
}
.filterList a {
  display: block;
  padding: 0.8rem 2rem;
  border: 2px solid #383838;
  border-radius: 5rem;
  background-color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: normal;
}
@media (hover: hover) {
  .filterList a:hover {
    opacity: 0.65;
  }
}
.filterList .current a {
  background-color: #383838;
  color: #fff;
}
.filterList .current a:link, .filterList .current a:visited, .filterList .current a:hover {
  color: #fff;
}

/*------------------------------------------------------------
	記事本文
------------------------------------------------------------*/
.entry {
  width: 84rem;
  max-width: 100%;
  margin: 6rem auto 0;
}
.entry .eyecatch {
  display: block;
  margin-bottom: 5rem;
  border: 2px solid #383838;
  border-radius: 0.8rem;
  overflow: hidden;
}
.entry .eyecatch img {
  display: block;
  width: 100%;
  height: auto;
}
.entry p {
  margin-bottom: 2.5rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.7rem;
  line-height: 3.2rem;
  letter-spacing: 0.085rem;
}
.entry a {
  color: #db3333;
  text-decoration: underline;
}
.entry a:link, .entry a:visited, .entry a:hover {
  color: #db3333;
}
.entry ul,
.entry ol {
  margin: 0 0 2.5rem 2rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.7rem;
  line-height: 3.2rem;
}
.entry ul li {
  list-style: disc;
}
.entry ol li {
  list-style: decimal;
}
.entry img {
  max-width: 100%;
  height: auto;
}
.entry figure {
  margin: 0 0 3rem;
}
.entry figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.8rem;
}
.entry figcaption {
  margin-top: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #666;
  text-align: center;
}
.entry blockquote {
  margin: 0 0 3rem;
  padding: 2.5rem 3rem;
  border-left: 5px solid #ddd;
  background-color: #f8f8f8;
}
.entry blockquote p:last-child {
  margin-bottom: 0;
}
.entry table {
  width: 100%;
  margin-bottom: 3rem;
  border-collapse: collapse;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
}
.entry table th,
.entry table td {
  padding: 1.2rem 1.5rem;
  border: 1px solid #ddd;
  text-align: left;
}
.entry table th {
  background-color: #f8f8f8;
  font-weight: 700;
}
.entry strong {
  font-weight: 700;
}
.entry section + section {
  margin-top: 6rem;
}
.entry {
  /* 見出しはテーマ側のデザインに統一する。
     旧サイトから引き継いだ記事は本文のHTMLに style 属性で
     文字サイズや黄色の飾り罫が直接書かれているため、!important で打ち消している */
}
.entry h2 {
  margin: 6rem 0 2.5rem !important;
  padding: 1.2rem 2rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #383838 !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 2.6rem !important;
  line-height: 1.5;
  letter-spacing: 0.13rem;
}
.entry section > h2:first-child {
  margin-top: 0 !important;
}
.entry h3 {
  margin: 4.5rem 0 2rem !important;
  padding: 0 0 0 1.5rem !important;
  border: 0 !important;
  border-left: 5px solid #db3333 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #383838 !important;
  font-weight: 700;
  font-size: 2.2rem !important;
  line-height: 1.5;
  letter-spacing: 0.11rem;
}
.entry h4 {
  margin: 3.5rem 0 1.5rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #383838 !important;
  font-weight: 700;
  font-size: 2rem !important;
  line-height: 1.5;
}
.entry {
  /* ---- 本文に直接書かれた囲み装飾を外す ----
     旧サイトの記事は、導入文・目次・ポイント・FAQ・まとめなどが
     すべて style 属性つきの囲みカードになっている。
     枠と背景を取り払い、余白と文字の強弱だけで読ませる */
}
.entry .article-lead,
.entry .article-toc,
.entry .point-box,
.entry .caution-box,
.entry .doctor-comment,
.entry .summary-box,
.entry .cta-box,
.entry .gt-card,
.entry .faq-section,
.entry .faq-item,
.entry .faq-q,
.entry .faq-a,
.entry .merit-box,
.entry .demerit-box,
.entry .hosoku,
.entry .author-profile,
.entry .link-card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  text-align: left !important;
}
.entry .article-lead,
.entry .article-toc,
.entry .point-box,
.entry .caution-box,
.entry .doctor-comment,
.entry .summary-box,
.entry .cta-box,
.entry .gt-card,
.entry .faq-item,
.entry .merit-box,
.entry .demerit-box,
.entry .hosoku,
.entry .author-profile {
  margin: 0 0 3rem !important;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.7rem;
  line-height: 3.2rem;
}
.entry {
  /* 囲みの中に白文字・黄色文字が直接指定されているので本文の色に戻す
     （マーカーと表の見出しだけは背景を残す） */
}
.entry .article-toc *:not(mark):not(th),
.entry .point-box *:not(mark):not(th),
.entry .caution-box *:not(mark):not(th),
.entry .doctor-comment *:not(mark):not(th),
.entry .summary-box *:not(mark):not(th),
.entry .cta-box *:not(mark):not(th),
.entry .gt-card *:not(mark):not(th),
.entry .faq-item *:not(mark):not(th) {
  color: inherit !important;
  background: none !important;
}
.entry {
  /* 囲みの中だけ文字が小さく指定されているので、本文と同じ大きさに揃える */
}
.entry .article-lead p,
.entry .article-lead li,
.entry .point-box p,
.entry .caution-box p,
.entry .doctor-comment p,
.entry .summary-box p,
.entry .summary-box li,
.entry .cta-box p,
.entry .gt-card p,
.entry .merit-box li,
.entry .demerit-box li,
.entry .faq-item p {
  font-size: 1.7rem !important;
  line-height: 3.2rem !important;
}
.entry {
  /* クラスが付いていない黄色の帯（FAQの質問など）も同じように外す */
}
.entry div[style*="background: #fbc44c"] {
  padding: 0 !important;
  background: none !important;
  color: #383838 !important;
  font-weight: 700;
}
.entry {
  /* 目次。囲まずに、行頭の記号と字下げだけで階層を見せる */
}
.entry .article-toc li {
  list-style: none;
  font-size: 1.5rem !important;
  line-height: 2.8rem;
}
.entry .article-toc a {
  color: #383838 !important;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}
@media (hover: hover) {
  .entry .article-toc a:hover {
    color: #db3333 !important;
  }
}
.entry .article-toc > div:first-child {
  margin-bottom: 1.2rem !important;
  font-size: 1.7rem !important;
  font-weight: 700;
}
.entry {
  /* Point 01 などの通し番号は、見出しの前置きとして小さく添える */
}
.entry .point-box .point-number {
  margin-bottom: 0.3rem !important;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem !important;
  font-weight: 700;
  color: #8a8a8a !important;
  letter-spacing: 0.1rem;
}
.entry .point-box .point-title {
  margin-bottom: 1rem !important;
  font-size: 2rem !important;
  font-weight: 700;
  line-height: 1.6;
}
.entry {
  /* FAQ。色帯をやめて、質問を太字にするだけにする */
}
.entry .faq-q,
.entry .faq-a {
  margin: 0 !important;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.7rem !important;
  line-height: 3.2rem !important;
}
.entry .faq-q {
  font-weight: 700 !important;
}
.entry .faq-a {
  margin-top: 0.5rem !important;
}
.entry {
  /* ✅ や・が行頭に入っているリストは、黒丸を重ねない */
}
.entry .check-list,
.entry .feature-list,
.entry .article-lead ul,
.entry .article-toc ul {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.entry .check-list li,
.entry .feature-list li,
.entry .article-lead ul li,
.entry .article-toc ul li {
  list-style: none;
}
.entry {
  /* 本文リンクに直接書かれた黄色の文字色をサイトの色に戻す */
}
.entry a[style] {
  color: #db3333 !important;
}
.entry .article-toc a[style] {
  color: #383838 !important;
}
.entry {
  /* 本文中のお問い合わせボタンはサイトの配色に合わせる。
     上の文字色の指定より後に置いて、赤地に赤文字にならないようにしている */
}
.entry a.cta-btn,
.entry a.cta-btn-sub,
.entry .cta-box a.cta-btn,
.entry .cta-box a.cta-btn-sub {
  display: inline-block !important;
  margin-top: 0.5rem;
  padding: 1.4rem 3.4rem !important;
  border-radius: 5rem !important;
  background: #db3333 !important;
  color: #fff !important;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  text-decoration: none;
}
@media (hover: hover) {
  .entry a.cta-btn:hover,
  .entry a.cta-btn-sub:hover,
  .entry .cta-box a.cta-btn:hover,
  .entry .cta-box a.cta-btn-sub:hover {
    opacity: 0.75;
  }
}
.entry {
  /* 2つ目のボタンは黒にして主従を付ける */
}
.entry a.cta-btn-sub,
.entry .cta-box a.cta-btn-sub {
  background: #383838 !important;
}
.entry {
  /* 本文中の <mark>。ブラウザ標準の蛍光色は強すぎるので下線ふうに敷く */
}
.entry mark {
  background: linear-gradient(transparent 62%, rgba(219, 51, 51, 0.16) 62%) !important;
  color: inherit;
}

/*------------------------------------------------------------
	記事の見出し（single）
------------------------------------------------------------*/
.entryHead {
  width: 84rem;
  max-width: 100%;
  margin: 0 auto;
}
.entryHead .date {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background-color: #db3333;
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 2.1rem;
  letter-spacing: 0.112rem;
}
.entryHead .ttl {
  margin-top: 2rem;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.5;
  letter-spacing: 0.16rem;
}

.catList {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}
.catList a {
  display: block;
  padding: 0.4rem 1.4rem;
  border: 2px solid #383838;
  border-radius: 5rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  line-height: 2.2rem;
}
@media (hover: hover) {
  .catList a:hover {
    opacity: 0.65;
  }
}

/*------------------------------------------------------------
	記事下のナビゲーション
------------------------------------------------------------*/
.entryFoot {
  width: 84rem;
  max-width: 100%;
  margin: 8rem auto 0;
  padding-top: 5rem;
  border-top: 2px solid #383838;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}
.entryFoot .adjacent {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 2rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  line-height: 2.4rem;
}
.entryFoot .adjacent a {
  max-width: 32rem;
  text-decoration: underline;
}
@media (hover: hover) {
  .entryFoot .adjacent a:hover {
    opacity: 0.65;
  }
}

/*------------------------------------------------------------
	ページ送り
------------------------------------------------------------*/
.pager {
  margin-top: 6rem;
}
.pager ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.pager .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  height: 4.5rem;
  padding: 0 1.2rem;
  border: 2px solid #383838;
  border-radius: 0.5rem;
  background-color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
}
@media (hover: hover) {
  .pager .page-numbers:hover {
    opacity: 0.65;
  }
}
.pager .page-numbers.current {
  background-color: #383838;
  color: #fff;
}
.pager .page-numbers.dots {
  border: none;
}

/*------------------------------------------------------------
	記事なし
------------------------------------------------------------*/
.noPost {
  margin-top: 6rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.7rem;
  line-height: 3.2rem;
  text-align: center;
}

/*------------------------------------------------------------
	一覧へ戻るボタン（矢印を左向きにする）
------------------------------------------------------------*/
.comBtn01.back a {
  padding: 1.4rem 3rem 1.4rem 2rem;
}

.comBtn01.back .arrow {
  transform: rotate(-135deg);
}

/*------------------------------------------------------------
	SP
------------------------------------------------------------*/
@media all and (max-width: 896px) {
  .subPage {
    padding-bottom: 6rem;
  }
  .pageHead {
    padding: 9rem 0 3rem;
    border-bottom: 2px solid #383838;
  }
  .pageHead .content {
    gap: 1.5rem;
  }
  .pageHead .lead {
    font-size: 1.4rem;
    line-height: 2.4rem;
    letter-spacing: 0.07rem;
  }
  .breadcrumb {
    padding-top: 1.5rem;
  }
  .breadcrumb ol {
    font-size: 1.1rem;
    line-height: 1.8rem;
  }
  .breadcrumb li + li::before {
    margin-right: 0.5rem;
  }
  .cardList {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .cardList .item,
  .cardList > li > a {
    gap: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .cardList .img {
    gap: 0.5rem;
    flex-direction: column;
  }
  .cardList .img .mark {
    width: 3.6574rem;
    height: 3rem;
  }
  .cardList .img .logoTxt {
    width: 12rem;
    gap: 0.5rem;
  }
  .cardList .img .lead {
    font-size: 0.9rem;
    letter-spacing: 0.045rem;
  }
  .cardList .img .name {
    width: 8rem;
  }
  .cardList .textBox {
    padding: 0 1rem;
  }
  .cardList .tag,
  .cardList .date {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0.08rem;
  }
  .cardList .name,
  .cardList .ttl {
    font-size: 1.3rem;
    line-height: 2.2rem;
    letter-spacing: 0;
  }
  .cardList .doctor {
    font-size: 1.1rem;
    line-height: 1.8rem;
    gap: 0 0.5rem;
  }
  .cardList .corner {
    width: 1rem;
    height: 1rem;
  }
  .filterList {
    gap: 0.8rem;
    margin-top: 2.5rem;
  }
  .filterList a {
    padding: 0.6rem 1.4rem;
    font-size: 1.3rem;
  }
  .entryHead .ttl {
    margin-top: 1.5rem;
    font-size: 2.2rem;
    letter-spacing: 0.11rem;
  }
  .catList {
    gap: 0.8rem;
    margin-top: 2rem;
  }
  .catList a {
    font-size: 1.2rem;
    padding: 0.3rem 1.2rem;
  }
  .entry {
    margin-top: 3rem;
  }
  .entry .eyecatch {
    margin-bottom: 3rem;
  }
  .entry p {
    margin-bottom: 2rem;
    font-size: 1.4rem;
    line-height: 2.6rem;
    letter-spacing: 0.07rem;
  }
  .entry ul,
  .entry ol {
    margin-left: 1.8rem;
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
  .entry blockquote {
    padding: 1.5rem 2rem;
  }
  .entry table {
    font-size: 1.3rem;
  }
  .entry table th,
  .entry table td {
    padding: 0.8rem 1rem;
  }
  .entry.plain section + section {
    margin-top: 4rem;
  }
  .entry.plain h2 {
    margin: 4rem 0 2rem;
    padding: 1rem 1.5rem;
    font-size: 1.8rem;
    letter-spacing: 0.09rem;
  }
  .entry.plain h3 {
    margin: 3rem 0 1.5rem;
    padding-left: 1rem;
    border-left-width: 4px;
    font-size: 1.6rem;
  }
  .entry.plain h4 {
    margin: 2.5rem 0 1rem;
    font-size: 1.5rem;
  }
  .entryFoot {
    margin-top: 5rem;
    padding-top: 3rem;
    gap: 3rem;
  }
  .entryFoot .adjacent {
    font-size: 1.2rem;
    line-height: 2rem;
  }
  .pager {
    margin-top: 4rem;
  }
  .pager .page-numbers {
    min-width: 3.6rem;
    height: 3.6rem;
    padding: 0 0.8rem;
    font-size: 1.4rem;
  }
  .noPost {
    margin-top: 4rem;
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
  .comBtn01.back a {
    padding: 1rem 2rem 1rem 1.5rem;
  }
  .comBtn01 a {
    gap: 1.5rem;
    padding: 1rem 1.5rem 1rem 2rem;
  }
  .comBtn01 .txt {
    font-size: 1.5rem;
    letter-spacing: 0.12rem;
  }
}
/*------------------------------------------------------------
	タブレット（563px〜896px）
------------------------------------------------------------*/
@media all and (min-width: 563px) and (max-width: 896px) {
  .content {
    width: 37.5rem;
    margin-left: auto;
    margin-right: auto;
  }
}
/*------------------------------------------------------------
	お問い合わせフォーム
------------------------------------------------------------*/
.formStep {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 6rem;
}
.formStep li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2.5rem;
  border: 2px solid #383838;
  border-radius: 5rem;
  background-color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: normal;
  letter-spacing: 0.08rem;
}
.formStep .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-color: #383838;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
}
.formStep .current {
  border-color: #db3333;
  background-color: #db3333;
  color: #fff;
}
.formStep .current .num {
  background-color: #fff;
  color: #db3333;
}
@media all and (max-width: 896px) {
  .formStep {
    gap: 0.6rem;
    margin-top: 4rem;
  }
  .formStep li {
    gap: 0.6rem;
    padding: 0.8rem 1.4rem;
    font-size: 1.3rem;
  }
  .formStep .num {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.2rem;
  }
}

.formLead {
  margin-top: 4rem;
  font-size: 1.6rem;
  line-height: 3rem;
}
.formLead a {
  text-decoration: underline;
}
.formLead p + p {
  margin-top: 1.5rem;
}
@media all and (max-width: 896px) {
  .formLead {
    margin-top: 3rem;
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
}

.formError {
  margin-top: 3rem;
  padding: 2rem 2.5rem;
  border: 2px solid #db3333;
  border-radius: 1rem;
  background-color: #fdf2f2;
}
.formError .ttl {
  color: #db3333;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: normal;
}
.formError ul {
  margin-top: 1rem;
}
.formError li {
  font-size: 1.4rem;
  line-height: 2.6rem;
}
@media all and (max-width: 896px) {
  .formError {
    padding: 1.6rem;
  }
  .formError .ttl {
    font-size: 1.4rem;
  }
  .formError li {
    font-size: 1.3rem;
    line-height: 2.4rem;
  }
}

.contactForm {
  margin-top: 5rem;
  /* 自動入力プログラム用のおとり。人の目には触れさせない */
}
.contactForm .hpBox {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contactForm .formRow {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding: 3rem 0;
  border-top: 1px solid #ddd;
}
.contactForm .formRow:last-of-type {
  border-bottom: 1px solid #ddd;
}
.contactForm .formLabel {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 26rem;
  padding-top: 1.4rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: normal;
}
.contactForm .req,
.contactForm .any {
  flex: none;
  padding: 0.4rem 1rem;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  line-height: normal;
}
.contactForm .req {
  background-color: #db3333;
  color: #fff;
}
.contactForm .any {
  background-color: #eee;
  color: #777;
}
.contactForm .formInput {
  flex: 1;
  min-width: 0;
}
.contactForm input[type=text],
.contactForm input[type=email],
.contactForm input[type=tel],
.contactForm textarea,
.contactForm select {
  /* iOSは既定で内側に影と角丸を付けるため、枠線のデザインに合わせて消す */
  appearance: none;
  width: 100%;
  padding: 1.4rem 1.6rem;
  border: 2px solid #383838;
  border-radius: 0.8rem;
  background-color: #fff;
  color: #383838;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.contactForm input[type=text]::placeholder,
.contactForm input[type=email]::placeholder,
.contactForm input[type=tel]::placeholder,
.contactForm textarea::placeholder,
.contactForm select::placeholder {
  color: #bbb;
}
.contactForm input[type=text]:focus,
.contactForm input[type=email]:focus,
.contactForm input[type=tel]:focus,
.contactForm textarea:focus,
.contactForm select:focus {
  outline: 3px solid rgba(219, 51, 51, 0.35);
  outline-offset: 1px;
}
.contactForm textarea {
  resize: vertical;
}
.contactForm {
  /* セレクトは矢印を自前で描く */
}
.contactForm .selectBox {
  position: relative;
  display: block;
}
.contactForm .selectBox::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 2px solid #383838;
  border-bottom: 2px solid #383838;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.contactForm .selectBox select {
  appearance: none;
  padding-right: 4.5rem;
}
.contactForm .hasError input,
.contactForm .hasError textarea,
.contactForm .hasError select {
  border-color: #db3333;
  background-color: #fdf7f7;
}
.contactForm .errorText {
  margin-top: 0.8rem;
  color: #db3333;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 2.4rem;
}
.contactForm .confirmText {
  padding-top: 0.4rem;
  font-size: 1.6rem;
  line-height: 3rem;
}
.contactForm .confirmText .empty {
  color: #999;
}
@media all and (max-width: 896px) {
  .contactForm {
    margin-top: 4rem;
  }
  .contactForm .formRow {
    flex-direction: column;
    gap: 1.2rem;
    padding: 2.4rem 0;
  }
  .contactForm .formLabel {
    width: auto;
    padding-top: 0;
    font-size: 1.5rem;
  }
  .contactForm .formInput {
    width: 100%;
  }
  .contactForm input[type=text],
  .contactForm input[type=email],
  .contactForm input[type=tel],
  .contactForm textarea,
  .contactForm select {
    padding: 1.2rem 1.4rem;
    /* 16px未満だとiOSで拡大されるため下げない */
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  .contactForm .confirmText {
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
}

.privacyBox {
  margin-top: 4rem;
  padding: 3rem;
  border: 2px solid #383838;
  border-radius: 1rem;
  background-color: #f8f8f8;
  text-align: center;
}
.privacyBox .privacyText {
  font-size: 1.4rem;
  line-height: 2.6rem;
  text-align: left;
}
.privacyBox .checkBox {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: normal;
  cursor: pointer;
}
.privacyBox input[type=checkbox] {
  width: 2rem;
  height: 2rem;
  accent-color: #db3333;
}
.privacyBox.hasError {
  border-color: #db3333;
}
@media all and (max-width: 896px) {
  .privacyBox {
    margin-top: 3rem;
    padding: 2rem;
  }
  .privacyBox .privacyText {
    font-size: 1.3rem;
    line-height: 2.4rem;
  }
  .privacyBox .checkBox {
    font-size: 1.4rem;
  }
}

.formBtn {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 5rem;
}
.formBtn button.comBtn01 {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem 3rem;
  border: 2px solid #383838;
  border-radius: 5rem;
  background-color: #fff;
}
@media (hover: hover) {
  .formBtn button.comBtn01:hover {
    opacity: 0.65;
  }
}
.formBtn .comBtn01.primary {
  border-color: #db3333;
  background-color: #db3333;
  color: #fff;
}
.formBtn .comBtn01.primary .arrow {
  border-color: #fff;
}
@media all and (max-width: 896px) {
  .formBtn {
    flex-direction: column-reverse;
    align-items: center;
    gap: 1.5rem;
    margin-top: 4rem;
  }
  .formBtn button.comBtn01 {
    gap: 1.5rem;
    padding: 1.2rem 2.5rem;
  }
}

/*------------------------------------------------------------
	サンクスページ
------------------------------------------------------------*/
.thanksBox {
  margin-top: 6rem;
  padding: 6rem 4rem;
  border: 3px solid #383838;
  border-radius: 2rem;
  text-align: center;
  background-color: #fff;
  background-image: radial-gradient(#eaeaea 1px, transparent 1px);
  background-size: 5px 5px;
  background-position: 0 0;
}
.thanksBox .lead {
  font-weight: 700;
  font-size: 2.8rem;
  line-height: normal;
  letter-spacing: 0.14rem;
}
.thanksBox > .txt {
  margin-top: 3rem;
  font-size: 1.6rem;
  line-height: 3rem;
}
.thanksBox .note {
  margin-top: 3rem;
  color: #777;
  font-size: 1.3rem;
  line-height: 2.4rem;
}
.thanksBox .btnList {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 5rem;
}
@media all and (max-width: 896px) {
  .thanksBox {
    margin-top: 4rem;
    padding: 4rem 2rem;
  }
  .thanksBox .lead {
    font-size: 2rem;
  }
  .thanksBox > .txt {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
  .thanksBox .note {
    font-size: 1.2rem;
    line-height: 2.2rem;
  }
  .thanksBox .btnList {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 4rem;
  }
}

/*------------------------------------------------------------
	セクション見出し（下層ページ共通）
------------------------------------------------------------*/
.secTtl {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.secTtl .en {
  display: block;
  color: #db3333;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 5rem;
  line-height: 1;
}
.secTtl .ja {
  display: block;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: normal;
  letter-spacing: 0.12rem;
}
.secTtl {
  /* 赤帯・黒帯の中で使うとき */
}
.secTtl.white {
  color: #fff;
}
.secTtl.white .en {
  color: #fff;
}
@media all and (max-width: 896px) {
  .secTtl .en {
    font-size: 3.2rem;
  }
  .secTtl .ja {
    font-size: 1.8rem;
  }
}

/*------------------------------------------------------------
	会社案内
------------------------------------------------------------*/
.companyPage .companyProfile,
.companyPage .companyMember {
  margin-top: 10rem;
}
.companyPage .profileTable {
  width: 100%;
  margin-top: 4rem;
  border-top: 2px solid #383838;
  border-collapse: collapse;
}
.companyPage .profileTable th,
.companyPage .profileTable td {
  padding: 2.4rem 2rem;
  border-bottom: 1px solid #ddd;
  font-size: 1.6rem;
  line-height: 2.8rem;
  text-align: left;
  vertical-align: top;
}
.companyPage .profileTable th {
  width: 24rem;
  background-color: #f8f8f8;
  font-weight: 700;
}
.companyPage .memberList {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  margin-top: 5rem;
}
.companyPage .memberList .item {
  display: flex;
  gap: 5rem;
  padding: 5rem;
  border: 3px solid #383838;
  border-radius: 2rem;
  background-color: #fff;
}
.companyPage .memberList .photo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28rem;
  height: 28rem;
  border-radius: 1.6rem;
  overflow: hidden;
  background-color: #fff;
  background-image: radial-gradient(#eaeaea 1px, transparent 1px);
  background-size: 5px 5px;
  background-position: 0 0;
}
.companyPage .memberList .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.companyPage .memberList .photo {
  /* 写真が未登録のときはロゴを中央に置く */
}
.companyPage .memberList .photo .noImg {
  width: 12.2rem;
  height: 10rem;
  object-fit: contain;
}
.companyPage .memberList .textBox {
  flex: 1;
  min-width: 0;
}
.companyPage .memberList .name {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.companyPage .memberList .name .role {
  padding: 0.4rem 1.4rem;
  border-radius: 5rem;
  background-color: #db3333;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: normal;
}
.companyPage .memberList .name .ja {
  font-weight: 700;
  font-size: 2.4rem;
  line-height: normal;
  letter-spacing: 0.12rem;
}
.companyPage .memberList .lead {
  margin-top: 2rem;
  color: #db3333;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3.4rem;
}
.companyPage .memberList .txt {
  margin-top: 2rem;
  font-size: 1.5rem;
  line-height: 3rem;
}
.companyPage .memberList .txt strong {
  font-weight: 700;
}
@media all and (max-width: 896px) {
  .companyPage .companyProfile,
  .companyPage .companyMember {
    margin-top: 6rem;
  }
  .companyPage .profileTable {
    margin-top: 3rem;
    display: block;
  }
  .companyPage .profileTable tbody,
  .companyPage .profileTable tr,
  .companyPage .profileTable th,
  .companyPage .profileTable td {
    display: block;
    width: auto;
  }
  .companyPage .profileTable th {
    padding: 1.2rem 1.6rem;
    border-bottom: none;
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
  .companyPage .profileTable td {
    padding: 1.6rem;
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
  .companyPage .memberList {
    gap: 3rem;
    margin-top: 4rem;
  }
  .companyPage .memberList .item {
    flex-direction: column;
    gap: 2.5rem;
    padding: 3rem 2rem;
  }
  .companyPage .memberList .photo {
    width: 100%;
    height: 22rem;
  }
  .companyPage .memberList .name {
    gap: 1rem;
  }
  .companyPage .memberList .name .role {
    padding: 0.3rem 1.2rem;
    font-size: 1.2rem;
  }
  .companyPage .memberList .name .ja {
    font-size: 1.8rem;
  }
  .companyPage .memberList .lead {
    margin-top: 1.5rem;
    font-size: 1.7rem;
    line-height: 2.8rem;
  }
  .companyPage .memberList .txt {
    margin-top: 1.5rem;
    font-size: 1.4rem;
    line-height: 2.8rem;
  }
}

/*------------------------------------------------------------
	Gossaについて
------------------------------------------------------------*/
.aboutPage {
  padding-bottom: 0;
}
.aboutPage section {
  padding: 10rem 0;
}
.aboutPage {
  /* 本文の共通体裁 */
}
.aboutPage .body {
  margin-top: 4rem;
}
.aboutPage .body p {
  font-size: 1.8rem;
  line-height: 3.6rem;
  letter-spacing: 0.08rem;
}
.aboutPage .body p + p {
  margin-top: 2.5rem;
}
.aboutPage .body strong {
  font-weight: 700;
  background: linear-gradient(transparent 60%, rgba(236, 209, 108, 0.9) 60%);
}
.aboutPage .body .small {
  font-size: 1.6rem;
  line-height: 3rem;
  color: #777;
}
.aboutPage .body.white {
  color: #fff;
}
.aboutPage .body.white strong {
  background: none;
  color: #ecd16c;
}
.aboutPage .body.white .small {
  color: rgba(255, 255, 255, 0.7);
}
.aboutPage {
  /* 各セクションのリード（h3） */
}
.aboutPage .lead {
  margin-top: 3rem;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 5.2rem;
  letter-spacing: 0.15rem;
}
.aboutPage .lead em {
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(219, 51, 51, 0.25) 62%);
}
.aboutPage {
  /* ファーストビュー */
}
.aboutPage.subPage .aboutHead {
  padding: 14rem 0 8rem;
}
.aboutPage.subPage .aboutHead .content {
  gap: 2rem;
}
.aboutPage.subPage .aboutHead .en {
  color: #db3333;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 3.2rem;
  letter-spacing: 0.09rem;
}
.aboutPage.subPage .aboutHead .ttl {
  font-weight: 700;
  font-size: 4.8rem;
  line-height: 7.6rem;
  letter-spacing: 0.23rem;
}
.aboutPage.subPage .aboutHead .ttl em {
  display: inline-block;
  padding: 0 1rem;
  background-color: #db3333;
  color: #fff;
  font-style: normal;
}
.aboutPage {
  /* ダメなHPとは？ */
}
.aboutPage .badList {
  margin-top: 6rem;
  padding: 4rem;
  border: 3px solid #383838;
  border-radius: 2rem;
  background-color: #fff;
}
.aboutPage .badList .badTtl {
  display: inline-block;
  padding: 0.6rem 2rem;
  border-radius: 5rem;
  background-color: #383838;
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  line-height: normal;
  letter-spacing: 0.09rem;
}
.aboutPage .badList ul {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
}
.aboutPage .badList li {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2.5rem 2rem;
  border-radius: 1.2rem;
  background-color: #f8f8f8;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 3rem;
}
.aboutPage .badList .num {
  color: #db3333;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
}
.aboutPage {
  /* ダメなHPの定義 */
}
.aboutPage .defineBox {
  margin-top: 4rem;
  padding: 4rem;
  border-radius: 2rem;
  background-color: #db3333;
  color: #fff;
  text-align: center;
}
.aboutPage .defineBox .define {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 4.2rem;
  letter-spacing: 0.12rem;
}
.aboutPage .defineBox .define em {
  padding: 0.4rem 1.6rem;
  border-radius: 0.8rem;
  background-color: #fff;
  color: #db3333;
  font-style: normal;
}
.aboutPage .defineBox .note {
  margin-top: 2.5rem;
  font-size: 1.7rem;
  line-height: 3.2rem;
  text-align: left;
}
.aboutPage {
  /* 歯科で大事な3つの視点 */
}
.aboutPage .pointList {
  display: flex;
  gap: 2rem;
  margin-top: 5rem;
}
.aboutPage .pointList li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  border: 3px solid #383838;
  border-radius: 2rem;
  background-color: #fff;
  font-weight: 700;
  font-size: 2rem;
  line-height: 3.2rem;
  text-align: center;
}
.aboutPage .pointNote {
  margin-top: 2.5rem;
  font-size: 1.8rem;
  line-height: 3.2rem;
  text-align: center;
}
.aboutPage {
  /* 患者さんの事例（赤帯） */
}
.aboutPage .fault {
  background-color: #db3333;
}
.aboutPage .fault .caseLead {
  margin-top: 4rem;
  color: #fff;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3.6rem;
}
.aboutPage .caseList {
  display: flex;
  gap: 3rem;
  margin-top: 3rem;
}
.aboutPage .caseList .case {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4rem 3rem;
  border-radius: 2rem;
  background-color: #fff;
}
.aboutPage .caseList .caseHead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 2px solid #383838;
}
.aboutPage .caseList .badge {
  padding: 0.5rem 1.8rem;
  border-radius: 5rem;
  background-color: #db3333;
  color: #fff;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: normal;
}
.aboutPage .caseList .caseTtl {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3.4rem;
  letter-spacing: 0.1rem;
}
.aboutPage .caseList .caseTxt {
  margin-top: 2.5rem;
  /* 吹き出しの先端が上に2rem飛び出すので、その分より広く空けておく。
     文章が長いカードでも本文と重ならない */
  margin-bottom: 4rem;
  font-size: 1.7rem;
  line-height: 3.2rem;
}
.aboutPage .caseList {
  /* ドクターの心の声。吹き出しで見せる */
}
.aboutPage .caseList .caseVoice {
  position: relative;
  /* 2枚のカードで吹き出しの位置を下に揃える */
  margin-top: auto;
  padding: 2.5rem;
  border: 2px solid #383838;
  border-radius: 1.2rem;
  background-color: #f8f8f8;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 3.2rem;
}
.aboutPage .caseList .caseVoice::before, .aboutPage .caseList .caseVoice::after {
  content: "";
  position: absolute;
  left: 4rem;
  width: 0;
  height: 0;
  border-style: solid;
}
.aboutPage .caseList .caseVoice::before {
  top: -2rem;
  border-width: 0 1.2rem 2rem 1.2rem;
  border-color: transparent transparent #383838 transparent;
}
.aboutPage .caseList .caseVoice::after {
  top: -1.6rem;
  border-width: 0 1.2rem 2rem 1.2rem;
  border-color: transparent transparent #f8f8f8 transparent;
}
.aboutPage .fault .body {
  margin-top: 5rem;
}
.aboutPage {
  /* 知識不足の話 */
}
.aboutPage .knowledge {
  background-color: #fff;
  background-image: radial-gradient(#eaeaea 1px, transparent 1px);
  background-size: 5px 5px;
  background-position: 0 0;
}
.aboutPage {
  /* 目指すHP */
}
.aboutPage .figBox {
  margin-top: 5rem;
  padding: 5rem 4rem;
  border: 3px solid #383838;
  border-radius: 2rem;
  background-color: #fff;
  text-align: center;
}
.aboutPage .figBox .figLead,
.aboutPage .figBox .figNote {
  font-weight: 700;
  font-size: 2rem;
  line-height: normal;
}
.aboutPage .figBox .fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0;
  font-weight: 700;
  font-size: 3rem;
  line-height: normal;
  letter-spacing: 0.14rem;
}
.aboutPage .figBox .fig em {
  margin: 0 0.5rem;
  color: #db3333;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-size: 7.2rem;
  line-height: 0.9;
}
.aboutPage .figBox .fig small {
  color: #db3333;
  font-size: 3.4rem;
}
.aboutPage .figBox .row01,
.aboutPage .figBox .row02 {
  display: flex;
  align-items: baseline;
}
.aboutPage {
  /* HP制作会社の闇（黒帯） */
}
.aboutPage .dark {
  background-color: #383838;
}
.aboutPage .dark .question {
  margin-top: 5rem;
  padding: 4rem;
  border: 2px solid #fff;
  border-radius: 2rem;
  color: #fff;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 4.2rem;
  text-align: center;
}
.aboutPage .dark .question em {
  display: inline-block;
  margin-top: 1rem;
  color: #ecd16c;
  font-style: normal;
  font-size: 3rem;
}
.aboutPage {
  /* 偉人の言葉 */
}
.aboutPage .quoteList {
  display: flex;
  gap: 3rem;
  margin-top: 4rem;
}
.aboutPage .quoteList li {
  flex: 1;
  padding: 3.5rem 3rem;
  border-radius: 2rem;
  background-color: #f8f8f8;
  text-align: center;
}
.aboutPage .quoteList .quote {
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.8rem;
  letter-spacing: 0.11rem;
}
.aboutPage .quoteList .by {
  margin-top: 1.5rem;
  color: #db3333;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: normal;
}
.aboutPage .conclusion {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-top: 5rem;
  padding: 4rem;
  border: 3px solid #db3333;
  border-radius: 2rem;
  background-color: #fff;
}
.aboutPage .conclusion .ttl {
  flex: none;
  padding: 1rem 2.5rem;
  border-radius: 5rem;
  background-color: #db3333;
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  line-height: normal;
}
.aboutPage .conclusion .txt {
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.8rem;
}
.aboutPage .conclusion .txt em {
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(219, 51, 51, 0.25) 62%);
}
.aboutPage {
  /* 選ばれる理由 */
}
.aboutPage .reasonList {
  display: flex;
  gap: 3rem;
  margin-top: 4rem;
}
.aboutPage .reasonList .item {
  flex: 1;
  padding: 4rem 3rem;
  border: 3px solid #383838;
  border-radius: 2rem;
  background-color: #fff;
}
.aboutPage .reasonList .ttl {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.6rem;
  letter-spacing: 0.11rem;
}
.aboutPage .reasonList .num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: #db3333;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
}
.aboutPage .reasonList .txt {
  margin-top: 2.5rem;
  font-size: 1.8rem;
  line-height: 3.4rem;
}
.aboutPage .reasonList .txt strong {
  font-weight: 700;
  background: linear-gradient(transparent 60%, rgba(236, 209, 108, 0.9) 60%);
}
.aboutPage .reasonList .note {
  margin-top: 2rem;
  color: #777;
  font-size: 1.6rem;
  line-height: 2.8rem;
}
.aboutPage {
  /* お問い合わせ */
}
.aboutPage .aboutCta {
  background-color: #fff;
  background-image: radial-gradient(#eaeaea 1px, transparent 1px);
  background-size: 5px 5px;
  background-position: 0 0;
  border-top: 3px solid #383838;
  text-align: center;
}
.aboutPage .aboutCta .secTtl {
  align-items: center;
}
.aboutPage .aboutCta > .content > .txt {
  margin-top: 3rem;
  font-size: 1.8rem;
  line-height: 3.2rem;
}
.aboutPage .aboutCta .btnList {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 4rem;
}
.aboutPage .aboutCta .btnList li {
  width: 36rem;
}
.aboutPage .aboutCta .btnList a {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 2.5rem;
  border: 2px solid #383838;
  border-radius: 5rem;
  background-color: #fff;
}
@media (hover: hover) {
  .aboutPage .aboutCta .btnList a:hover {
    opacity: 0.65;
  }
}
.aboutPage .aboutCta .btnList .icon {
  flex: none;
  display: block;
  width: 3rem;
  height: 3rem;
}
.aboutPage .aboutCta .btnList .txt {
  flex: 1;
  font-weight: 700;
  font-size: 2rem;
  line-height: normal;
  text-align: left;
}
.aboutPage .aboutCta .btnList .arrow {
  flex: none;
  width: 0.707rem;
  height: 0.707rem;
  border-top: 2px solid #383838;
  border-right: 2px solid #383838;
  transform: rotate(45deg);
  box-sizing: content-box;
}
.aboutPage .aboutCta .btnList .line a {
  border-color: #41c15d;
  background-color: #41c15d;
  color: #fff;
}
.aboutPage .aboutCta .btnList .line .arrow {
  border-color: #fff;
}
@media all and (max-width: 896px) {
  .aboutPage section {
    padding: 6rem 0;
  }
  .aboutPage .body {
    margin-top: 3rem;
  }
  .aboutPage .body p {
    font-size: 1.4rem;
    line-height: 2.8rem;
  }
  .aboutPage .body p + p {
    margin-top: 2rem;
  }
  .aboutPage .body .small {
    font-size: 1.2rem;
    line-height: 2.4rem;
  }
  .aboutPage .lead {
    margin-top: 2.5rem;
    font-size: 2rem;
    line-height: 3.4rem;
    letter-spacing: 0.1rem;
  }
  .aboutPage.subPage .aboutHead {
    padding: 10rem 0 5rem;
  }
  .aboutPage.subPage .aboutHead .en {
    font-size: 1.3rem;
    line-height: 2.2rem;
  }
  .aboutPage.subPage .aboutHead .ttl {
    font-size: 2.4rem;
    line-height: 4.2rem;
    letter-spacing: 0.12rem;
  }
  .aboutPage.subPage .aboutHead .ttl em {
    padding: 0 0.6rem;
  }
  .aboutPage .badList {
    margin-top: 4rem;
    padding: 2.5rem 2rem;
  }
  .aboutPage .badList .badTtl {
    padding: 0.5rem 1.6rem;
    font-size: 1.5rem;
  }
  .aboutPage .badList ul {
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 2rem;
  }
  .aboutPage .badList li {
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
  .aboutPage .badList .num {
    font-size: 2.2rem;
  }
  .aboutPage .defineBox {
    margin-top: 3rem;
    padding: 2.5rem 2rem;
  }
  .aboutPage .defineBox .define {
    gap: 0.5rem;
    font-size: 1.7rem;
    line-height: 3rem;
  }
  .aboutPage .defineBox .define em {
    padding: 0.3rem 1rem;
  }
  .aboutPage .defineBox .note {
    margin-top: 2rem;
    font-size: 1.3rem;
    line-height: 2.6rem;
  }
  .aboutPage .pointList {
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 3rem;
  }
  .aboutPage .pointList li {
    padding: 2rem 1.5rem;
    font-size: 1.5rem;
    line-height: 2.6rem;
  }
  .aboutPage .pointNote {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
  .aboutPage .fault .caseLead {
    margin-top: 3rem;
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
  .aboutPage .caseList {
    flex-direction: column;
    gap: 2rem;
    margin-top: 2.5rem;
  }
  .aboutPage .caseList .case {
    padding: 2.5rem 2rem;
  }
  .aboutPage .caseList .caseHead {
    gap: 1.2rem;
    padding-bottom: 2rem;
  }
  .aboutPage .caseList .badge {
    padding: 0.4rem 1.4rem;
    font-size: 1.3rem;
  }
  .aboutPage .caseList .caseTtl {
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
  .aboutPage .caseList .caseTxt {
    margin-top: 2rem;
    margin-bottom: 3rem;
    font-size: 1.4rem;
    line-height: 2.8rem;
  }
  .aboutPage .caseList .caseVoice {
    padding: 2rem;
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
  .aboutPage .caseList .caseVoice::before, .aboutPage .caseList .caseVoice::after {
    left: 3rem;
  }
  .aboutPage .fault .body {
    margin-top: 3rem;
  }
  .aboutPage .figBox {
    margin-top: 3rem;
    padding: 3rem 2rem;
  }
  .aboutPage .figBox .figLead,
  .aboutPage .figBox .figNote {
    font-size: 1.5rem;
  }
  .aboutPage .figBox .fig {
    margin: 2rem 0;
    font-size: 1.8rem;
  }
  .aboutPage .figBox .fig em {
    font-size: 4.4rem;
  }
  .aboutPage .figBox .fig small {
    font-size: 2.2rem;
  }
  .aboutPage .dark .question {
    margin-top: 3rem;
    padding: 2.5rem 2rem;
    font-size: 1.5rem;
    line-height: 2.8rem;
  }
  .aboutPage .dark .question em {
    font-size: 1.9rem;
  }
  .aboutPage .quoteList {
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .aboutPage .quoteList li {
    padding: 2.5rem 2rem;
  }
  .aboutPage .quoteList .quote {
    font-size: 1.7rem;
    line-height: 2.8rem;
  }
  .aboutPage .quoteList .by {
    margin-top: 1rem;
    font-size: 1.3rem;
  }
  .aboutPage .conclusion {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 3rem;
    padding: 2.5rem 2rem;
  }
  .aboutPage .conclusion .ttl {
    padding: 0.6rem 2rem;
    font-size: 1.5rem;
  }
  .aboutPage .conclusion .txt {
    font-size: 1.7rem;
    line-height: 3rem;
  }
  .aboutPage .reasonList {
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
  }
  .aboutPage .reasonList .item {
    padding: 2.5rem 2rem;
  }
  .aboutPage .reasonList .ttl {
    gap: 1.2rem;
    font-size: 1.7rem;
    line-height: 2.8rem;
  }
  .aboutPage .reasonList .num {
    width: 4rem;
    height: 4rem;
    font-size: 1.6rem;
  }
  .aboutPage .reasonList .txt {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 2.8rem;
  }
  .aboutPage .reasonList .note {
    margin-top: 1.5rem;
    font-size: 1.2rem;
    line-height: 2.2rem;
  }
  .aboutPage .aboutCta > .content > .txt {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
  .aboutPage .aboutCta .btnList {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .aboutPage .aboutCta .btnList li {
    width: 100%;
    max-width: 33.5rem;
  }
  .aboutPage .aboutCta .btnList a {
    gap: 1.2rem;
    padding: 1.6rem 2rem;
  }
  .aboutPage .aboutCta .btnList .icon {
    width: 2.4rem;
    height: 2.4rem;
  }
  .aboutPage .aboutCta .btnList .txt {
    font-size: 1.5rem;
  }
}

/*------------------------------------------------------------
	セクション頭の帯写真（下層ページ共通）
------------------------------------------------------------*/
.hasBand {
  padding-top: 0;
}

.bandImg {
  display: block;
  width: 100%;
  height: 26rem;
  margin-bottom: 8rem;
}
.bandImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media all and (max-width: 896px) {
  .bandImg {
    height: 14rem;
    margin-bottom: 5rem;
  }
}

/*------------------------------------------------------------
	Gossaについて：画像まわり
------------------------------------------------------------*/
.aboutPage {
  /* ファーストビューの装飾 */
}
.aboutPage .aboutHead {
  position: relative;
  overflow: hidden;
}
.aboutPage .aboutHead .deco {
  position: absolute;
  display: block;
  pointer-events: none;
}
.aboutPage .aboutHead .deco img {
  width: 100%;
  height: auto;
}
.aboutPage .aboutHead {
  /* 「Dental」の文字。歯の後ろにうっすら敷く */
}
.aboutPage .aboutHead .str {
  right: -3rem;
  top: -4rem;
  width: 34rem;
  opacity: 0.06;
}
.aboutPage .aboutHead .tooth {
  right: 7rem;
  bottom: 0;
  width: 18rem;
}
.aboutPage .aboutHead .content {
  position: relative;
  z-index: 1;
}
.aboutPage {
  /* 本文＋画像の2段組 */
}
.aboutPage .withImg {
  display: flex;
  align-items: center;
  gap: 5rem;
  margin-top: 4rem;
}
.aboutPage .withImg .body {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}
.aboutPage .withImg .imgSide {
  flex: none;
  display: block;
  width: 42rem;
}
.aboutPage .withImg .imgSide img {
  width: 100%;
  height: auto;
}
.aboutPage {
  /* 事例カードの写真 */
}
.aboutPage .caseList .case {
  padding: 0;
  overflow: hidden;
}
.aboutPage .caseList .caseImg {
  display: block;
  width: 100%;
  height: 20rem;
}
.aboutPage .caseList .caseImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aboutPage .caseList .caseBody {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 3rem;
}
.aboutPage {
  /* 私たちが目指すHP・HPは育てるもの：背景写真 */
}
.aboutPage .goal {
  background: url(../img/about/goal_bg.webp) no-repeat right top/60% auto;
}
.aboutPage .grow {
  background: url(../img/about/grow_bg.webp) no-repeat right center/55% auto;
}
.aboutPage .figBox {
  position: relative;
  background: url(../img/about/fact_bg.webp) no-repeat center center/cover;
  /* 写真の上に文字を載せるので白でおおう */
}
.aboutPage .figBox::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.7rem;
  background-color: rgba(255, 255, 255, 0.93);
}
.aboutPage .figBox > * {
  position: relative;
  z-index: 1;
}
.aboutPage .figBox .figIcon {
  display: block;
  width: 8rem;
  margin: 0 auto 1.5rem;
}
.aboutPage .figBox .figIcon img {
  width: 100%;
  height: auto;
}
.aboutPage {
  /* 選ばれる理由のイラスト */
}
.aboutPage .reasonList .itemImg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20rem;
  margin-bottom: 2.5rem;
}
.aboutPage .reasonList .itemImg img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media all and (max-width: 896px) {
  .aboutPage .aboutHead .str {
    right: 1rem;
    top: 8rem;
    width: 20rem;
  }
  .aboutPage .aboutHead .tooth {
    right: 1rem;
    bottom: 0;
    width: 8rem;
  }
  .aboutPage .withImg {
    flex-direction: column;
    /* 縦並びでは中央寄せをやめる。中身の幅で縮まって文字がはみ出すため */
    align-items: stretch;
    gap: 2.5rem;
    margin-top: 3rem;
  }
  .aboutPage .withImg .imgSide {
    width: 100%;
  }
  .aboutPage .caseList .caseImg {
    height: 16rem;
  }
  .aboutPage .caseList .caseBody {
    padding: 2.5rem 2rem;
  }
  .aboutPage .goal {
    background-size: 100% auto;
  }
  .aboutPage .grow {
    background-size: 130% auto;
    background-position: right top;
  }
  .aboutPage .figBox .figIcon {
    width: 6rem;
    margin-bottom: 1rem;
  }
  .aboutPage .reasonList .itemImg {
    height: 14rem;
    margin-bottom: 2rem;
  }
}

/*------------------------------------------------------------
	タグ（カテゴリーをまたぐ話題の目印）
------------------------------------------------------------*/
.tagCloud {
  margin-top: 3rem;
  padding: 2.5rem 3rem;
  border: 2px solid #383838;
  border-radius: 1.2rem;
  background-color: #f8f8f8;
}
.tagCloud .ttl {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: normal;
  letter-spacing: 0.075rem;
}
.tagCloud ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}
.tagCloud a {
  display: block;
  padding: 0.4rem 1.4rem;
  border: 2px solid #383838;
  border-radius: 5rem;
  background-color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  line-height: 2.2rem;
}
@media (hover: hover) {
  .tagCloud a:hover {
    opacity: 0.65;
  }
}
.tagCloud .current a {
  border-color: #db3333;
  background-color: #db3333;
  color: #fff;
}
.tagCloud .current a:link,
.tagCloud .current a:visited,
.tagCloud .current a:hover {
  color: #fff;
}
@media all and (max-width: 896px) {
  .tagCloud {
    margin-top: 2rem;
    padding: 2rem;
  }
  .tagCloud .ttl {
    font-size: 1.4rem;
  }
  .tagCloud ul {
    gap: 0.8rem;
    margin-top: 1.2rem;
  }
  .tagCloud a {
    padding: 0.3rem 1.2rem;
    font-size: 1.2rem;
  }
}

/* 記事下のタグ */
.entryFoot .catList {
  margin-top: 0;
  justify-content: center;
}

.entryFoot .tagList a {
  border-width: 1px;
  border-color: #ccc;
  font-size: 1.3rem;
}

/*------------------------------------------------------------
	制作実績一覧

	記事一覧（.cardList）とは別物に見せたいので、
	サイトの見た目そのものが主役になる2列の大判カードにしている。
------------------------------------------------------------*/
.worksList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: 4rem 3rem;
  margin-top: 6rem;
}
.worksList .item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 2.5rem;
  border: 2px solid #383838;
  border-radius: 0.8rem 0.8rem 0 0.8rem;
  background-color: #fff;
}
@media (hover: hover) {
  .worksList .item:hover .img img {
    transform: scale(1.04);
  }
}
.worksList .img {
  display: flex;
  align-items: center;
  justify-content: center;
  /* カードの高さが揃ってもサムネイルの高さは変えない */
  flex-shrink: 0;
  width: 100%;
  /* ブラウザの画面と同じ比率。メインビジュアルをそのまま載せられる */
  aspect-ratio: 16/10;
  /* 枠線の内側カーブ（外側半径 − 線幅）に合わせる */
  border-bottom: 2px solid #383838;
  border-radius: calc(0.8rem - 2px) calc(0.8rem - 2px) 0 0;
  background-color: #e9e9e9;
  overflow: hidden;
}
.worksList .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s ease;
}
.worksList .img {
  /* アイキャッチ未設定のとき */
}
.worksList .img .noImg {
  width: 7.3rem;
  height: 6rem;
  object-fit: contain;
}
.worksList .textBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
  padding: 2.5rem 2.5rem 0;
}
.worksList {
  /* 新規開業は赤（既定）。リニューアルと専門サイト制作は色を変える */
}
.worksList .tag {
  padding: 0.3rem 0.9rem;
  background-color: #db3333;
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 2.1rem;
  letter-spacing: 0.112rem;
}
.worksList .tag.isRenewal {
  background-color: #1f6fb2;
}
.worksList .tag.isSpecial {
  background-color: #178040;
}
.worksList .name {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3.2rem;
  letter-spacing: 0.11rem;
}
.worksList .doctor {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #666;
}
.worksList {
  /* 認定医・専門医などの資格。医院名の邪魔をしないよう一段小さくする */
}
.worksList .license {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.9rem;
  color: #8a8a8a;
}
.worksList .corner {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: block;
  width: 2.4rem;
  height: 2.4rem;
}
@media all and (max-width: 896px) {
  .worksList {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 4rem;
  }
  .worksList .item {
    padding-bottom: 2rem;
  }
  .worksList .textBox {
    gap: 0.6rem;
    padding: 2rem 2rem 0;
  }
  .worksList .name {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
  .worksList .license {
    font-size: 1.1rem;
    line-height: 1.7rem;
  }
}