@charset "UTF-8";

/*
Theme Name:中山クリニック 再生医療専用テーマ
Description: 再生医療クリニック専用オリジナルテーマ
Version: 1.0.0
*/

/*******************************
初期化
********************************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent;}
*, *::before, *::after {-webkit-box-sizing: border-box; box-sizing: border-box;}
html {font-size: 62.5%; width: 100%; scroll-behavior: smooth;}
body {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff;
  overflow-x: hidden;
}
/*body p {margin-bottom: 1.5em;}*/
img {max-width: 100%; height: auto; vertical-align: top;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ul, ol {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
input {border: 1px solid #888; padding: 2px;}
button {appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
a {vertical-align: baseline; text-decoration: none; color: #1967d2;}
a:link, a:visited, a:active {color: #093b80; text-decoration: none;}
a:hover {text-decoration: none;}
ins {background-color: #ff9; color: #000; text-decoration: none;}
h1, h2, h3, h4, h5 {margin: 0; padding: 0;}
.pc {display: block;}
.sp {display: none;}

/*******************************
変数
********************************/
:root{
	--contents-wide: 1080px;
	--font-serif: "Lora", "Noto Serif JP", serif;
	--color-yellow: #e0a02b;
	--color-brown: #5d4037;
	--color-brown-light: #ded9d2;
}

/*******************************
全ページ共通
********************************/
/*********** フォント ************/
.font-small{font-size: 0.8em;}
.font-large{font-size: 1.2em;}
.font-bold{font-weight: bold;}
.font-red{color: #ff0000;}
.font-yellow{color: var(--color-yellow);}
.font-brown{color: var(--color-brown);}
.font-att{font-size: 0.8em; color: #a9a9a9;}

/*********** 背景 ************/
.bg-brown-light{background-color: var(--color-brown-light); padding: 2%;}
.bg-brown-light p:last-child{margin-bottom: 0;}
.bg-red-light{background-color: #ffeded; padding: 2%;}
.bg-red-light p:last-child{margin-bottom: 0;}

/*********** ボタン ************/
a.btn{display: inline-flex; justify-content: center; align-items: center; flex-direction: column; width: auto; min-width: 263px; height: 55px; background-color: #696969; padding: 0 3em; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5); text-align: center; color: #fff !important; font-weight: bold; line-height: 1.3; position: relative; transition: filter 0.3s;}
a.btn::after{content: ""; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; position: absolute; top: 50%; right: 7%; transform: translateY(-50%) rotate(45deg);}
a.btn:hover{text-decoration: none; filter: brightness(1.2);}

a.btn.green{background-color: #00C156;}
a.btn.blue{background-color: #006DEB;}
a.btn.red{background-color: transparent; background-image: linear-gradient(0deg, #e25b5d, #fe9986);}

/*********** 画像 ************/
figure{margin: 3em 0;}
figcaption{margin-bottom: 1em; caption-side: top; text-align: left; color: var(--color-brown); font-weight: bold; font-size: 1.2em;}

/*********** コンテンツ幅 ************/
.contents-container,
.page__contents-container,
.inner{width: 100%; max-width: var(--contents-wide); margin: 0 auto;}
.page__contents-container{padding-bottom: 130px;}

/*********** QA ************/
.qa-box{width: 83%; margin: 0 auto 5px;}
.qa-box summary{background-color: var(--color-brown-light); display: block; padding: 1em 4em; font-family: var(--font-serif); font-weight: 500; position: relative; cursor: pointer;}
.qa-box summary::marker{content: "";}
.qa-box summary::-webkit-details-marker{display: none;}
.qa-box summary::before,
.qa-box summary::after{content: ""; width: 1em; height: 1px; background-color: #333; position: absolute; top: 1.75em; right: 2.625em;}
.qa-box summary::after{transform: rotate(90deg); transition: transform 0.3s;}
.qa-box summary::before{transition: opacity 0.3s;}
.qa-box summary h4{border: none; padding: 0; margin: 0; font-size: 1em; font-weight: 500; line-height: 1.7; letter-spacing: 0;}
.qa-box[open] summary::before{opacity: 0;}
.qa-box[open] summary::after{transform: rotate(0);}
.qa-box .title{position: relative;}
.qa-box .title::before{content: "Q."; color: #3388ff; line-height: 1.2; position: absolute; top: 0; left: -1.25em;}
.qa-box .inner{width: 100%; padding: 1.75em 2.8em 2em; font-size: 15px;}
.qa-box .answer{padding-left: 1.5em; margin-bottom: 1.75em; font-family: var(--font-serif); font-weight: 500; position: relative;}
.qa-box .answer::before{content: "A."; color: #ff0000; line-height: 1.2; position: absolute; top: 0.25em; left: 0.25em;}
.qa-box .inner .headline-border-bottom{padding: 0 0 3px; margin-bottom: 1em; border-bottom: 1px solid currentcolor; font-weight: bold;}
.qa-box .inner .headline-border-bottom p{margin-bottom: 0;}

/*********** テーブル ************/
.table01{width: 100%; margin: 3em 0; font-size: 0.9em;}
.table01 thead th{background-color: #ffc800; padding: 0.45em; text-align: center; font-weight: 400; position: relative;}
.table01 thead th.blank{background-color: transparent;}
.table01 tbody th{background-color: var(--color-brown-light); padding: 1.51875em 1em; color: var(--color-brown); font-weight: bold; text-align: left; vertical-align: middle;}
.table01 tbody tr{border-top: 1px solid #333; border-bottom: 1px solid #333;}
.table01 tbody td{background-color: #f4f4f4; padding: 1.51875em 1em; vertical-align: middle; position: relative;}
.table01 thead tr th:not(:first-of-type)::before,
.table01 tbody tr td::before{content: ""; background-color: #fff; width: 4px; height: 100%; position: absolute; top: 0; left: -2px;}
.table01 tbody tr td:first-child::before{display: none;}
.table01 tbody td .font-small{display: inline-block; font-size: 0.9em;}
.table01 caption{margin-bottom: 1em; caption-side: top; text-align: left; color: var(--color-brown); font-weight: bold; font-size: 1.2em;}

.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table-scroll .table01{min-width:800px; width:100%; border-collapse:collapse;}

/*******************************
ヘッダー
********************************/
.header__top{display: flex; justify-content: space-between; align-items: center; padding: 28px 0;}
.header__btns ul{display: flex; justify-content: flex-end; align-content: center; gap: 15px;}
.header__menu__container{background-color: #4D4D4D; border: 1px solid #000; padding: 0;}
.header__menu{width: 100%;max-width: var(--contents-wide);display: flex;justify-content: space-between;margin: 0 auto;}
.header__menu li{flex: 1; text-align: center; position: relative;}
.header__menu li::after,
.header__menu li:first-child::before{content: ""; width: 1px; height: 60%; background-color: #fff; position: absolute; top: 50%;  transform: translateY(-50%);}
.header__menu li::after{right: 0;}
.header__menu li:first-child::before{left: 0;}
.header__menu a{display: inline-block; width: 100%; padding: 1.7em 0 1.5em; color: #fff; font-size: 15px; text-align: center; line-height: 1.3;}
.header__menu a:hover{background-color: #4D4D4D; filter: brightness(1.2);}


/*******************************
トップページ
********************************/
/*********** 見出し ************/
.home .contents-container h2,
.home .inner h2{margin-bottom: 40px; font-family: var(--font-serif); font-size: 32px; text-align: center; letter-spacing: 0.05em; font-weight: 400;}
.home .contents-container h3,
.home .inner h3{letter-spacing: 0.05em; font-weight: 400;}

.fv{position: relative;}
.fv > img{width: 100%;}
.fv__text{color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1;}
.fv__text .main{font-family: var(--font-serif); font-size: 32px; letter-spacing: 0.1em;}
.fv__text .sub{margin: 1em 0 2em; font-family: var(--font-serif); font-size: 18px; letter-spacing: 0.1em;}
.fv__text .cv{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 9px; margin-top: 37px; padding-left: 134px;}
.fv__text .cv .font-small{font-family: var(--font-serif);}

.top-menu{padding: 60px 0 114px;}
.top-menu ul{display: flex; justify-content: space-between; gap: 1.5em 2%; flex-wrap: wrap;}
.top-menu ul li{width: 31%;}
.top-menu ul a.btn{width: 100%; height: auto; padding: 1em 0 0.7em; font-size: 21px; font-family: var(--font-serif); font-weight: 400;}
.top-menu ul a.btn img{margin-bottom: 11px;}
.top-menu .problem-list{margin-bottom: 100px;}
.top-menu .problem-list a.btn{background-color: #D9D9D9; color: #696969 !important;}
.top-menu .problem-list a.btn::after{border-color: #696969;}
.top-menu .menu-list a.btn{background-color: #DED9D2; color: var(--color-brown) !important;}
.top-menu .menu-list a.btn::after{border-color: #5D4037;}
.top-menu .btns{width: 58%; display: flex; justify-content: center; flex-wrap: wrap; gap: 32px 40px; margin: 50px auto 0;}

.top-reason{background-color: #D9D9D9; padding: 92px 0 138px;}
.top-reason .box{width: 87%; background-color: #fff; display: flex; align-items: center; padding: 4% 3%; margin: 0 auto 30px;}
.top-reason .box-left{width: 30%; padding-right: 5%; text-align: center;}
.top-reason .box-left h3{font-size: 21px; font-family: var(--font-serif); line-height: 1.5;}
.top-reason .box-left h3 .point{width: 147px;display: block;background-color: var(--color-yellow);margin: 0 auto 7px;padding: 3px;border-radius: 50px;line-height: 1;color: #fff;font-size: 16px;}
.top-reason .box-right{width: 70%;}

.top-flow{padding: 90px 0;}
.top-flow h2{margin-bottom: 24px;}
.top-flow > p{margin-bottom: 68px; text-align: center;}
.top-flow .box{width: 87%; background-color: var(--color-brown-light); display: flex; align-items: center; margin: 0 auto 72px; position: relative;}
.top-flow .box::after{content: ""; width: 0; height: 0; border-style: solid; border-right: 23px solid transparent; border-left: 23px solid transparent; border-top: 24px solid #8c8279; border-bottom: 0; position: absolute; bottom: -48px; left: 50%; transform: translateX(-50%); z-index: 1;}
.top-flow .box-left{width: 68%; padding: 0 5.5%;}
.top-flow .box-left h3{display: block; background-color: #696969; width: 147px; margin-bottom: 12px; font-size: 21px; font-family: var(--font-serif); line-height: 1.5; color: #fff; text-align: center;}
.top-flow .box-right{width: 32%;}
.top-flow .box.no-arrow{margin-bottom: 0;}
.top-flow .box.no-arrow::after{display: none;}
.top-flow .att{width: 87%; margin: 9px auto 45px; font-size: 11px; color: #747474; text-align: right;}
.top-flow .cv{display: flex; flex-direction: column; align-items: center; gap: 1em; text-align: center;}
.top-flow .cv .font-small{font-family: var(--font-serif);}
.top-flow .cv a.btn{width: 332px;}

.top-news{background-color: #f0f0f0; padding: 65px 0 111px; border: 1px solid #000;}
.news__list{width: 73%; display: flex; justify-content: space-between; gap: 2%; margin: 0 auto;}
.news__list .box{width: 31%; display: flex; flex-direction: column;}
.news__list .box a{transition: opacity 0.3s;}
.news__list .box a:hover{opacity: 0.7;}
.news__list .box .thumbnail{width: 100%; margin-bottom: 11px;}
.news__list .box .thumbnail img{width: 100%; object-fit: cover; aspect-ratio: 25 / 17;}
.news__list .box time{display: block; font-size: 13px; color: #747474;}
.news__list .box .title{color: #333;}
.top-news .cv{margin-top: 60px; text-align: center;}

.top-qa{padding: 88px 0 68px;}
.top-qa h2{margin-bottom: 24px;}
.top-qa > p{margin-bottom: 44px; text-align: center;}
.top-qa .cv{margin-top: 60px; text-align: center;}


/*******************************
フッター
********************************/
.footer-cta{position: relative;}
.footer-cta > img{width: 100%;}
.footer-cta__text{width: 50%; color: #fff; text-align: center; position: absolute; top: 50%; left: 10%; transform: translate(-10%,-50%); z-index: 1;}
.footer-cta__text .main{font-family: var(--font-serif); font-size: 30px; letter-spacing: 0.1em; font-weight: 400;}
.footer-cta__text .sub{margin: 1em 0 2em; font-size: 14px; letter-spacing: 0.1em;}
.footer-cta__text .btns{margin-top: 38px;}
.footer-cta__text .btns ul{display: flex; justify-content: center; gap: 15px; }
.footer-cta__text .btns a.btn{min-width: 200px; padding: 0 1.25em;}

footer{background-color: #4d4d4d; color: #fff; font-size: 14px;}
.footer__inner{width: 100%; max-width: 1080px; margin: 0 auto; padding: 55px 0 100px; display: flex;}
.footer__logo{width: 31%;}
.footer__menu{width: 23%; padding-right: 1%;}
.footer__menu .title{margin-bottom: 0.5em; font-weight: bold;}
.footer__menu ul li{margin-bottom: 0.5em;}
.footer__menu ul a{padding-left: 1em; color: #fff; position: relative; transition: opacity 0.3s;}
.footer__menu ul a::before{content: ""; width: 0.5em; height: 1px; background-color: #fff; position: absolute; top: 50%; left: 0.25em; transform: translateY(-50%);}
.footer__menu ul a:hover{opacity: 0.7;}
.footer__cp{padding-bottom: 25px; text-align: center; font-family: var(--font-serif);}


/*******************************
目次
********************************/
.toc{width: 100%; border: 1px solid #333; padding: 20px 36px; margin-bottom: 50px;}
.toc__title{margin-bottom: 5px;}
.toc__title p{margin-bottom: 0 !important;}
.toc ul{margin: 0 !important; font-family: var(--font-serif); letter-spacing: 0.1em; list-style: none !important;}
.toc ul li{padding-left: 1.25em; position: relative;}
.toc ul li::before{content: "";display: inline-block;width: 0.4em;height: 0.4em;border: 0.1em solid var(--color-brown);border-left: 0;border-bottom: 0;vertical-align: middle;line-height: 1;position: absolute;top: 0.6em;left: 0.25em;transform: translateY(-25%) rotate(135deg);}
.toc ul li a{color: #333;}
.toc ul > li{font-weight: bold;}
.toc ul > li li{font-weight: 400;}

/*******************************
固定ページ
********************************/
/*********** ファーストビュー ************/
.page__fv{width: 100%; position: relative;}
.page__fv img{width: 100%; height: 340px; object-fit: cover;}
.page__fv .title{width: 864px; background-color: rgba(255, 255, 255, 0.7); padding: 3.25em 2em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.page__fv .title h1{text-align: center; font-size: 42px; font-family: var(--font-serif); line-height: 2; letter-spacing: 0.1em; font-weight: 400;}

/*********** パンくずリスト ************/
.page__breadcrumbs{display: flex; gap: 7px; padding: 14px 0 45px; font-size: 14px; color: #747474;}
.page__breadcrumbs a{color: #747474 !important; transition: opacity 0.3s;}
.page__breadcrumbs a:hover{opacity: 0.7;}

/*********** 文章 / リンク / 見出し ************/
.page__contents-container p{margin-bottom: 1.5em; letter-spacing: 0.05em;}
.page__contents-container > ol + p{margin-top: 1.5em;}
.page__contents-container a{color: #0066c0; transition: opacity 0.3s;}
.page__contents-container a:hover{opacity: 0.7;}
.page__contents-container .link-quotation{text-align: right; color: #909090; font-size: 0.8em;}
.page__contents-container .link-quotation a{color: #909090;}
.page__contents-container h2{background-color: #333; padding: 12px 35px; margin: 2.5em 0 1em; color: #fff; font-size: 2em; font-family: var(--font-serif); letter-spacing: 0.1em; line-height: 1.5; font-weight: 400;}
.page__contents-container h3{padding-bottom: 9px; margin: 2.85em 0 0.7em; border-bottom: 1px solid currentcolor; font-size: 1.75em; font-family: var(--font-serif); letter-spacing: 0.1em; line-height: 1.5; font-weight: 400;}
.page__contents-container h4{padding-left: 0.57em; margin: 2.5em 0 1em; border-left: 1px solid currentcolor; font-size: 1.3125em; font-family: var(--font-serif); letter-spacing: 0.1em; line-height: 1.5; font-weight: 400;}
.page__contents-container .underline{background: linear-gradient(transparent 50%, #ffc800 50%);}
.page__contents-container h2 .underline,
.page__contents-container h3 .underline{background: linear-gradient(transparent 70%, #ffc800 70%);}
.page__contents-container ul{margin-left: 1.5em; list-style: disc;}
.page__contents-container ul.check{list-style: none;}
.page__contents-container ul.check li{position: relative;}
.page__contents-container ul.check li::before{content: ""; position: absolute; left: -1.35em; top: 0.4em; width: 1em; height: 0.5em; border-left: 3px solid var(--color-yellow); border-bottom: 3px solid var(--color-yellow); transform: rotate(-45deg);}
.page__contents-container ul + p{margin-top: 1.5em;}
.page__contents-container ol{margin-left: 1.5em; list-style: decimal;}

/*********** ボタン ************/
.page__btns{margin: 1.5em 0;}
.page__btns ul{display: flex; gap: 2%; text-align: center; list-style: none;}
.page__btns li .micro-copy{display: block; margin-bottom: 5px; font-size: 0.8em; font-weight: bold;}

/*********** ボックス ************/
.page__contents-container .box-bg-glay{background-color: #f5f5f5; padding: 1.7%;}
.page__contents-container .box-bg-glay p{margin-bottom: 0;}

/*********** 画像 ************/
.page__contents-container .img-right{float: right; margin: 0 0 1.5em 1.5em;}
.page__contents-container .w250{max-width: 250px;}
.page__contents-container .w384{max-width: 384px;}
.page__contents-container .w400{max-width: 400px;}
.page__contents-container .img-banner{max-width: 321px; margin: 3em auto 5em; text-align: center;}

/*********** フレックス関連 ************/
.flex__container{display: flex; flex-wrap: wrap; justify-content: center; gap: 33px 4%;}
.flex__box{width: 48%; display: flex; gap: 4%;}
.flex__box .img{width: 180px;}
.flex__box .text{width: calc(96% - 180px);}
.flex__box .text h3{margin: 0 0 7px; padding: 0; color: var(--color-brown); border: none; font-size: 21px;}
.flex__box .text p{margin-bottom: 0;}

.flex__container02{display: flex; flex-wrap: wrap;}
.flex__container02.row2 .box{width: 48%; margin-bottom: 20px;}
.flex__container02.row2 .box:nth-child(2n-1){margin-right: 4%;}
.flex__container02.row3 .box{width: 32%; margin-bottom: 20px;}
.flex__container02.row3 .box:not(:nth-child(3n)){margin-right: 2%;}


/*********** フロー関連 ************/
.flow__container{margin-top: 65px; counter-reset: num 0;}
.flow__box{display: flex; flex-wrap: wrap;}
.flow__container .flow__box:not(:last-of-type){border-bottom: 1px dashed #A8A8A8; padding-bottom: 92px; margin-bottom: 40px; position: relative;}
.flow__container .flow__box:not(:last-of-type)::after{content: ""; width: 0; height: 0; border-style: solid; border-right: 16px solid transparent; border-left: 16px solid transparent; border-top: 18px solid #8c8279; border-bottom: 0; position: absolute; bottom: 46px; left: 35%; transform: translateX(-35%); z-index: 1;}
.flow__box h3{width: 100%; padding: 0; border-bottom: none; margin: 0 0 1em; counter-increment: num 1; order: 1;}
.flow__box h3::before{content: counter(num, decimal); margin-right: 0.5em;}
.flow__box > .text{width: calc(100% - 250px); padding-right: 24px; order: 2;}
.flow__box > .img{width: 250px; order: 3;}

.flow__box .cta{background-color: var(--color-brown-light); padding: 25px;}
.flow__box .cta__box{display: flex; align-items: center; gap: 8%;}
.flow__box .cta .cta__box:not(:last-of-type){border-bottom: 1px dashed #A8A8A8; padding-bottom: 25px; margin-bottom: 25px;}
.flow__box .cta__box .text{width: 66%; position: relative;}
.flow__box .cta__box .text::after{content: ""; width: 0; height: 0; border-style: solid; border-top: 7px solid transparent; border-bottom: 7px solid transparent;  border-right: 0; position: absolute; top: 50%; right: -6.5%; transform: translateY(-50%); z-index: 1;}
.flow__box .cta__box.green .text::after{border-left: 10px solid #00c156;}
.flow__box .cta__box.blue .text::after{border-left: 10px solid #006deb;}
.flow__box .cta__box .text p{margin-bottom: 0;}
.flow__box .cta__box .link{width: 26%;}
.flow__box .cta__box .link a.btn{width: 200px; min-width: 0; padding: 0.25em;}

/*********** プロフィール関連 ************/
.profile__container{width: 100%; background-color: #e8dcc8; display: flex; padding: 17px 1.9% 0; margin-bottom: 45px;}
.profile__container .img{width: 250px; padding-right: 5%; margin-right: 5%; position: relative;}
.profile__container .img::after{content: ""; width: 1px; height: 90%; background-color: var(--color-brown); position: absolute; top: 25%; right: 0; transform: translateY(-25%);}
.profile__container .text{width: calc(90% - 250px); padding-top: 9px;}
.profile__container .text p{margin-bottom: 0;}
.profile__container .text .name{margin-bottom: 9px; font-family: var(--font-serif);}
.profile__container .text .name .supervisor{display: block; font-size: 10px; color: var(--color-brown); font-family: initial;}
.profile__container .text .career{margin-bottom: 19px; font-size: 14px; font-family: var(--font-serif);}
.profile__container .text .link a{color: #0000ff; text-decoration: underline; font-size: 13px;}
.profile__container .text .link a:hover{text-decoration: none;}

.profile__container02{width: 100%;}
.profile__container02 .top{width: 100%; background-color: #e8e8e8; display: flex; align-items: center; padding: 1% 5% 0; margin-bottom: 1.5em}
.profile__container02 .top .img{width: 50%;max-width: 150px;}
.profile__container02 .top .text{width: 50%;padding-left: 5%;}
.profile__container02 .top .text h3{margin: 0; padding: 0; border: none; font-size: 1.4em;}
.profile__container02 .bottom{width: 100%; display: flex;}
.profile__container02 .bottom .text{width: 32%;}
.profile__container02 .bottom .text:not(:last-of-type){margin-right: 2%;}
.profile__container02 .bottom .text h3{margin: 0 0 0.5em; padding: 0 0 0.25em; font-size: 1.3em;}
.profile__container02 .bottom .text .link{margin-top: 1.5em; text-align: right;}

/*********** 記事一覧関連 ************/
.post__list{display: flex; flex-wrap: wrap;}
.post__list .box{width: 19.5%; margin: 0 0.5% 3% 0;}
.post__list .box:nth-child(5n){margin-right: 0;}
.post__list .box .thumbnail{width: 100%; margin-bottom: 0.25em;}
.post__list .box .thumbnail img{width: 100%; object-fit: cover; aspect-ratio: 208 / 140;}
.post__list .box .title{color: #333;}

/*********** 参考関連 ************/
.reference-container{background-color: #f4f4f4; padding: 2% 4%; margin: 150px 0;}
.reference-container p{margin-bottom: 0;}
.reference-container .title{border-bottom: 1px solid currentcolor; padding-bottom: 0.5em; margin-bottom: 0.5em; font-size: 1.2em;}
.reference-container ul{margin-left: 0; list-style: none;}

/*******************************
固定ページ__ひざの再生医療
********************************/
.re-medicine__fv{width: 100%; position: relative;}
.re-medicine__fv h1 img{width: 100%; height: 753px; object-fit: cover;}
.re-medicine__fv ul.merit-list{width: 100%; max-width: 1080px; display: flex; justify-content: center; gap: 2.5%; position: absolute; top: 57%; left: 50%; transform: translate(-50%, -57%);}
.re-medicine__fv ul.merit-list li{max-width: 176px; width: 16.3%;}
.re-medicine__fv .cta{background-color: rgba(255, 255, 255, 0.9); width: 100%; max-width: 1080px; display: flex; align-items: center; gap: 4%; padding: 14px 56px 26px; position: absolute; bottom: 4%; left: 50%; transform: translate(-50%, -4%);}
.re-medicine__fv .cta__text{width: 50%; text-align: center; font-size: 14px;}
.re-medicine__fv .cta__text .title{font-size: 30px; font-family: var(--font-serif); line-height: 2; letter-spacing: 0.1em; font-weight: 400;}
.re-medicine__fv .cta__text p{margin-bottom: 0;}
.re-medicine__fv .cta__text .promote{width: 100%; margin-top: 1em;}
.re-medicine__fv .cta__link{width: 21%;}
.re-medicine__fv .cta__link ul li:not(:last-of-type){margin-bottom: 0.8em;}
.re-medicine__fv .cta__link a.btn{min-width: 0; width: 100%; padding: 0 1.25em;}
.re-medicine__fv .cta__img{width: 21%; position: relative;}
.re-medicine__fv .cta__img::before{content: ""; background: url(./img/regenerative-medicine/img06.webp) center no-repeat; background-size: contain; width: 372px; height: 302px; position: absolute; right: -135px; bottom: -146px;}

.page__contents-container h2.headeline-border{background-color: transparent; margin-bottom: 1.5em; color: #333; position: relative;}
.page__contents-container h2.headeline-border::before{content: ""; width: 100%; height: 1px; background-color: #333; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 1;}
.page__contents-container h2.headeline-border .text{display: inline-block; background-color: #fff; width: 60%; padding: 0 1em; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}

.re-medicine .flex__box{width: calc(92% / 3); flex-direction: column; gap: 0;}
.re-medicine .flex__box h3{background-color: var(--color-brown); margin: 0; padding: 0.1em 0 0; text-align: center; color: #fff; line-height: 1.7;}
.re-medicine .flex__box .img{width: 61%; max-width: 200px; margin: 1.5em auto; text-align: center;}
.re-medicine .flex__box ul.problem-list{list-style: none;}
.re-medicine .flex__box ul.problem-list li{background-color: var(--color-brown-light); border-radius: 50px; text-align: center; font-weight: bold;}
.re-medicine .flex__box ul.problem-list li:not(:last-of-type){margin-bottom: 0.6em;}

.re-medicine__triangle{margin: 30px 0 0; padding-top: 40px; font-size: 28px; color: var(--color-brown); text-align: center; font-weight: bold; position: relative;}
.re-medicine__triangle::before{content: ""; width: 0; height: 0; border-style: solid; border-right: 16px solid transparent; border-left: 16px solid transparent; border-top: 18px solid #8c8279; border-bottom: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;}

.feature__box{width: 88%; max-width: 940px; background-color: var(--color-brown-light); display: flex; margin: 0 auto 24px;}
.feature__box .text{width: 68%; padding: 4%;}
.feature__box .text h3{padding: 0; margin: 0 0 12px; border: none; font-size: 21px; color: var(--color-brown);}
.feature__box .text h3 .num{background-color: var(--color-yellow); display: inline-block; width: 30px; height: 30px; margin-right: 0.25em; text-align: center; color: #fff;}
.feature__box .text p{margin-bottom: 0;}
.feature__box .img{width: 32%;}
.feature__box .img img{width: 100%; object-fit: cover; aspect-ratio: 30 / 23;}

.re-medicine__cta{width: 100vw; margin: 92px calc(50% - 50vw); position: relative;}
.re-medicine__cta > img{width: 100%; height: 680px; object-fit: cover;}
.re-medicine__cta .text{width: 100%; max-width: 1080px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.re-medicine__cta .text::before{content: ""; background: url(./img/regenerative-medicine/img16.webp) center no-repeat; background-size: contain; width: 247px; height: 247px; position: absolute; left: 50%; bottom: -67px;}
.re-medicine__cta .text .add{display: inline-block; width: auto; background-color: #ffc800; padding: 0.15em 1em 0; border-radius: 50px; text-align: center; font-weight: bold;}
.re-medicine__cta .text .add p{margin-bottom: 0;}
.re-medicine__cta .text h2{background-color: transparent; max-width: 488px; margin: 2px 0 16px; padding: 0; border-bottom: 1px solid currentColor; color: var(--color-brown); font-family: initial; font-weight: bold; letter-spacing: 0;}
.re-medicine__cta .text .cta{background-color: #fff; width: 60%;}
.re-medicine__cta .text .cta p{margin-bottom: 0;}
.re-medicine__cta .text .cta__micro-copy{background-color: var(--color-brown); padding: 0.25em 1em ; color: #fff; font-weight: bold; font-size: 18px; text-align: center;}
.re-medicine__cta .cta__link{padding: 6% 4%; text-align: center;}
.re-medicine__cta .cta__link a.btn{padding-right: 3em; padding-left: 4em; position: relative;}
.re-medicine__cta .cta__link a.btn.blue .appointment{background-color: #fff; width: 41px; height: 41px; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: #006deb; font-size: 11px; font-weight: 400; line-height: 1; position: absolute; left: 1em;}

.options-box{display: flex; gap: 2%; margin-bottom: 33px;}
.options-box .img{width: 24%; max-width: 250px;}
.options-box .text{width: 74%;}
.options-box .text h4{padding-left: 0; border-left: 0; margin: 0 0 0.32em; font-size: 1.75em; color: var(--color-brown); letter-spacing: 0.05em;}
.link-right{text-align: right;}

/*******************************
固定ページ__ひざの痛みについて
********************************/
.symptom__box{display: flex; flex-direction: row-reverse; gap: 2%;}
.symptom__box .img{width: 38%; max-width: 400%;}
.symptom__box .text{width: 60%;}
.symptom__box + h3{margin-top: 1.5em;}

/*******************************
固定ページ__半月板損傷
********************************/
.options-link{background-color: var(--color-brown-light); width: 80%; display: flex; align-items: center; margin: 0 auto 50px; border-radius: 5px; position: relative; transition: opacity 0.3s;}
.options-link .img{width: 24%; max-width: 200px; border-radius: 5px 0 0 5px;}
.options-link .img img{width: 100%;height: 100%;object-fit: cover;aspect-ratio: 1; border-radius: 5px 0 0 5px;}
.options-link .text{width: 76%; padding: 2% 5%;}
.options-link .text h4{margin: 0 0 10px; padding: 0; border: none;}
.options-link .text p{margin-bottom: 10px;}
.options-link a{position: absolute; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
.options-link:hover{opacity: 0.7;}


/*******************************
固定ページ__診療内容
********************************/
.contents__fv{width: 100%; position: relative;}
.contents__fv h1 img{width: 100%; height: 753px; object-fit: cover;}
.contents__fv ul.merit-list{width: 100%; max-width: 1080px; display: flex; justify-content: center; gap: 2.5%; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -57%);}
.contents__fv ul.merit-list li{max-width: 176px; width: 16.3%;}
.contents__fv .cta{background-color: rgba(255, 255, 255, 0.9); width: 100%; max-width: 1080px; display: flex; align-items: center; gap: 4%; padding: 2% 4% 3%; position: absolute; bottom: 4%; left: 50%; transform: translate(-50%, -4%);}
.contents__fv .cta__text{width: 81%; font-size: 14px;}
.contents__fv .cta__text .title{margin-bottom: 1em; font-size: 24px; font-family: var(--font-serif); line-height: 2; letter-spacing: 0.1em; font-weight: 400;}
.contents__fv .cta__text p{margin-bottom: 0;}

.contents__fv .cta__box{display: flex; align-items: center; gap: 4%;}
.contents__fv .cta .cta__box:not(:last-of-type){border-bottom: 1px dashed #A8A8A8; padding-bottom: 12px; margin-bottom: 12px;}
.contents__fv .cta__box .text{width: 66%; position: relative;}
.contents__fv .cta__box .text::after{content: ""; width: 0; height: 0; border-style: solid; border-top: 7px solid transparent; border-bottom: 7px solid transparent;  border-right: 0; position: absolute; top: 50%; right: -3.5%; transform: translateY(-50%); z-index: 1;}
.contents__fv .cta__box.green .text::after{border-left: 10px solid #00c156;}
.contents__fv .cta__box.blue .text::after{border-left: 10px solid #006deb;}
.contents__fv .cta__box .text p{margin-bottom: 0;}
.contents__fv .cta__box .link{width: 26%;}
.contents__fv .cta__box .link a.btn{width: 200px; min-width: 0; padding: 0.25em;}

.contents__fv .cta__img{width: 19%; position: relative;}
.contents__fv .cta__img::before{content: ""; background: url(./img/regenerative-medicine/img06.webp) center no-repeat; background-size: contain; width: 372px; height: 302px; position: absolute; right: -135px; bottom: -164px;}

.page__contents-container h2.headeline-border.contents{margin-bottom: 2.5em;}

.feature__box.contents h3 .num{width: auto; padding: 0 0.25em;}


/*******************************
固定ページ__PRP
********************************/
.feature__box .text h3 .num.point{display: inline-flex; flex-direction: column; width: auto; height:auto; padding: 0.5em; margin-top: -0.25em; line-height: 1; vertical-align: middle;}
.feature__box .text h3 .num.point .point-text{margin-bottom: 2px; font-size: 0.4em; position: relative;}

.flow__box.has-box{display: block;}
.flow__box.has-box .flow__box{border: none; padding: 0; margin: 30px 0 0;}
.flow__box.has-box .flow__box::after{display: none;}
.flow__box.has-box .flow__box h4{width: 100%; padding: 0; margin: 0 0 12px; border: none; font-size: 21px; color: var(--color-brown);}


/*******************************
固定ページ__APS
********************************/
.cta-block{width: 100%; background-color: #fff9f4; border: 2px solid var(--color-yellow); margin: 50px 0; display: flex;}
.cta-block .text{width: 70%; padding: 30px;}
.cta-block .text .title{font-size: 1.4em; font-family: var(--font-serif); font-weight: 500;}
.cta-block .text .link{text-align: center;}
.cta-block .img{width: 30%; position: relative;}
.cta-block .img img{width: 100%; position: absolute; right: -4px; bottom: 0;}