/* 共通 */
.headwrap {
  margin: 5% 0;
}
.headwrap.center {
    text-align: center;
}

.headwrap h2 {
  font-size: 3rem;
}
.leadsec .headwrap h2 {
	padding: 50px 0 0;
}
.headwrap em {
	font-style: normal;
  font-size: 3rem;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.headwrap em::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 0.5em;
  background-color: #fff3d4;
  z-index: -1;
}
/* ==== 共通 ==== */
.design1, .design2 {
  font-size: 3.5rem;
  display: inline-block;
  position: relative;
  font-weight: 700;

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  overflow: hidden;
  line-height: 1.1;
}

/* ==== design1：ブラウン系（落ち着いた光沢） ==== */
.design1 {
  background-image: linear-gradient(135deg, #f9f4f1 0%, #7b5e47 30%, #a1887f 55%, #5d4037 75%, #f9f4f1 100%);
}
.design1::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%) skewX(-25deg);
  mix-blend-mode: screen;
  animation: shine1 3.5s ease-in-out infinite;
}

/* ==== design2：ピンク系（華やかな光沢） ==== */
.design2 {
  background-image: linear-gradient(135deg, #dd91a5, #d57397, #cb4872);
  
}
.design2::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%) skewX(-25deg);
  mix-blend-mode: screen;
  animation: shine2 4.2s ease-in-out infinite;
}
.design3 {
  font-size: 3.5rem;
}
h2,h3,h4 {
  font-family: 'Noto Serif JP', serif;
  color: #5b4633;
}
/* -------------------------- ファーストビュー -------------------------- */
.main-visual {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-image: url(../images/invisa/maininvi.png);
	background-size: cover;
    background-position: center;
}

/*------------------- ファーストビューブロック -------------------*/
.implant-block {
  display: flex;
  align-items: center;
  padding: 3rem;
}

.implant-text p {
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 1.6;
  margin-top: 3rem;
  margin-bottom: 5.5rem;
  color: #b15062;
  text-align: center;
}

.diagnosis-team {
	font-family: 'Noto Serif JP', serif;
  display: flex;
  align-items: center;
  /* gap: 0.5rem; */
  margin-bottom: 2rem;
}
.diagnosis {
  margin-right: -30px;
}
.team {
  margin-left: -30px;
}

.diagnosis, .team {
  background-color: #a48d8d;
  color: #fff;
  padding: 0.5rem 3.5rem;
  border-radius: 0px;
  font-weight: bold;
  font-size: 2.3rem;
}

.cross {
  color: #d36666;
  font-size: 5.5rem;
  z-index: 1;
}

.implant-points {
  list-style: none;
  padding-left: 0;
  margin-top: 25px;
}

.implant-points li {
  margin-bottom: 1rem;
  font-size: 2rem;
  background: #fef5f7;
  padding: 0.8rem 1rem;
  border-radius: 5px;
}

.pink {
  color: #e1497b;
  font-weight: bold;
}


/* キャッチコピー */
.text-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  z-index: 4;
  top: 40%;
}

.size3rem {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.5;
  color: #775c2c;
  /* text-shadow: 1px 1px 6px rgba(255, 255, 255, 0.6), 0 0 10px rgba(204, 183, 115, 0.2); */
  /* text-shadow: 1px 1px 6px rgba(255, 255, 255, 0.6), 0 0 10px #d5892e; */
  margin-bottom: 25px;
}

.bgwrap {
  position: relative;
  display: inline-block;
  padding: 0.3em 0.8em;
  background: linear-gradient(to right, rgb(255, 255, 255), rgb(250, 243, 220));
  box-shadow: 0 4px 20px rgba(255, 215, 115, 0.2);
  backdrop-filter: blur(4px);
}

.size1-5rem {
  font-size: 1.25rem;
  color: #5c4a1f;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.catchhighlight {
  background: linear-gradient(90deg, #d6b161, #f8e5ab);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-shadow: 0 0 8px rgb(123 100 33 / 40%);
    font-size: 64px;
}

/* 数字 */
.appeal {
  padding: 0 45px;
  margin: 50px 0;
  display: flex;
}
.appeal dl {
  display: grid;
  grid-template-columns: 10em 1fr;
  align-items: end;
  border-bottom: 2px solid #ffe7a2;
  width: 34.7em;
  margin: 0 1em 1.6em;
  color: #69492a;
}

.appeal dt {
  background: linear-gradient(135deg, #f1e0b5 20%, #f5e2a1 80%);
  text-align: center;
    font-size: 20px;
    line-height: 1.2;
    padding: 1em 1px;
}

.appeal i {
  font-size: 64%;
  display: block;
}

.appeal dd {
  font-size: 130%;
  padding: 0 0 0 0.4em;
  display: flex; /* これでdd内の要素を横並びにする */
  align-items: center; /* 上下の整列 */
}

.appeal dl dd em {
  margin: 0 0.2em 0.2em;
}

.appeal dd em {
  font-size: 240%;
  color: #d9c173;
  letter-spacing: -0.06em;
  line-height: 1;
  display: inline-block;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), 0 0 25px rgba(255, 255, 255, 0.6); /* テキストシャドウ */
}

.txt80 {
  font-size: 80%;
}



@media screen and (max-width: 768px) {
  .size3rem {
    font-size: 2rem;
  }
  .size1-5rem {
    font-size: 1rem;
  }
}

.white {
  color: white;
}
.tel {
  font-size: 30px;
  color: #363636;
}
/* ----------------------------------------------------
タブレット用（768px〜1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
}

/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media (max-width: 768px) {
}


/* -------------------------- リード文+バナーブロック -------------------------- */
.leadsec {
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgb(246 234 242 / 90%) 20%, /* #eaf0f6（明るめ）*/ rgb(250 245 248 / 90%) 80%, /* #f5f7fa（ほぼ白）*/ rgba(255, 255, 255, 1) 100%);
  position: relative;
  z-index: 0;
}
.leadsec::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    z-index: 1;
}
.leadsec::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    z-index: 1;
}
.leadbox {
  text-align: center;
  padding: 30px 0;
}
.leadbox span {
  border-bottom: 1px solid #cb4872;
}
.cv_banner {
	display: block;
  width: 75%;
  margin: 20px auto;
}
/* -------------------------- 数字で見る -------------------------- */
.numbersec {
  font-family: 'Noto Serif JP', serif;
    background-image: url(../images/invisa/bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 3.6em 0 0;
    overflow: hidden;
    min-height: 100vh;
}
.metrics {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 40px auto;
  text-align: center;
}

.invibadge {
  position: relative;
  width: 23%;
}

.wreath {
  width: 100%;
  height: auto;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.invilabel {
  font-size: 1.6em;
  font-weight: 700;
  margin-bottom: 6px;
  width: 160px;
  color: #b5a9c9;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
}

.invinumber {
  font-size: 42px;
  font-weight: 800;
}

.unit {
  font-size: 20px;
  margin-left: 4px;
}

.note {
  font-size: 14px;
  margin-top: 6px;
  color: #666;
}

.notes {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-top: 20px;
}


/* -------------------------- 他院との比較 -------------------------- */
:root{
  --bg: #fff9e8;
  --frame: #f1dbe8;
  --ribbon-gray:#828992;
  --ribbon-blue:#db8c9b;
  --blue: #5ac2ff;
  --text: #2b2f33;
  --muted:#6a7178;
  --good: #ff2ad1;
  --mark: #ffe96ba8;
}
.flexbox {
  max-width: 1200px;
    margin: 40px auto;
    padding: 0 16px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    gap: 20px;
    align-items: stretch;
}
/* パネル共通 */
.panel{
  position:relative; 
  border:5px solid var(--frame); 
  border-radius:28px;
  background:#fff; 
  padding:56px 28px 28px; 
}
.panel.legacy{
  border:5px solid #828992; 
}
.panel .ribbon{
  position:absolute; 
  left:50%; 
  transform:translateX(-50%);
  top:-24px; 
  background:var(--ribbon-gray); 
  color:#fff;
  padding:10px 34px; 
  font-size:20px; 
  font-weight:700; 
  border-radius:8px;
  letter-spacing:.08em;
  width: 75%;
  text-align: center;
}
.panel.wesmile .ribbon{ background:var(--ribbon-blue) }

/* コンテンツレイアウト */
.panelinner{
  display:grid; grid-template-columns:1fr; gap:22px;
}

/* 左：人物エリア */
.person-area{
  position:relative; min-height:280px;
  /* background: repeating-linear-gradient(135deg, #e7e9ec 0 7px, #f6f7f9 7px 14px); */
  border-radius:24px; 
  padding:18px; 
  display:flex; 
  align-items:center; 
  justify-content:center;
}
.person-area img{max-height:230px; width:auto; height:auto; display:block}

/* 吹き出し */
/* .bubble{
  position:absolute; background:#eef1f6; color:#222; padding:14px 18px;
  border-radius:10px; box-shadow:0 8px 16px rgba(0,0,0,.06); font-weight:700;
}
.bubble:after{
  content:""; position:absolute; bottom:-10px; left:26px;
  border:10px solid transparent; border-top-color:#eef1f6;
}
.b1{ top:18px; left:18px }
.b2{ top:56px; right:24px }
.b3{ bottom:18px; left:120px }
.b2:after{ left:auto; right:26px }
.b3:after{ top:auto; bottom:-10px; left:50px } */

/* リスト */
ul.list{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.list li{ display:flex; gap:12px; line-height:1.7; font-size:18px }
.list li::before{
  content:"✖"; font-weight:900; color:var(--muted); flex:0 0 1.2em; text-align:center;
}
.panel.wesmile .list li::before{ 
  content:"❀"; 
  color:var(--good) }

/* 蛍光ペン風 */
.hl{
  background:linear-gradient(to top, var(--mark) 0 62%, transparent 62% 100%);
  padding:0 .08em;
}


/* 中央矢印 */
.inviarrow{
  align-self:center; 
  justify-self:center; 
  width:0; 
  height:0;
  border-top:22px solid transparent; 
  border-bottom:22px solid transparent;
  border-left:28px solid var(--ribbon-blue);
}

/* レスポンシブ */
@media (max-width: 960px){
  .wrap{ grid-template-columns:1fr; gap:28px }
  .inviarrow{ display:none }
  .panel{ padding-top:64px }
}
/*==================================================================

	選ばれる理由

==================================================================*/
/* 見出し */
.dream-ttlbloc {
  margin: 30px auto;
}
.dreamttl {
  font-size: clamp(18px, 5vw, 40px); 
  color: #69492a;
  line-height: 1.4;
  margin-bottom: 15px;
  text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.6);
  position: relative;
  text-align: center;
  margin: 30px 0;
}
.dreamttl .mini {
  font-size: clamp(14px, 3vw, 25px);
  margin: 0 3px;
}

.dream-ttlbloc p .underline {
  text-decoration: none;
  border-bottom: 2px solid #bfa2509e;
}

/* セクションの背景 */
.reason {
  padding: 50px 0;
    position: relative;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgb(246 234 242 / 90%) 20%, /* #eaf0f6（明るめ）*/ rgb(250 245 248 / 90%) 80%, /* #f5f7fa（ほぼ白）*/ rgba(255, 255, 255, 1) 100%);
    z-index: 0;
    overflow: hidden;
}

.reason::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: 1;
}

.reason::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px; 
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: 1;
}

.idx_inr {
  position: relative;
  display: block;
  margin: 0 auto;
}

.idx_box {
  display: block;
  position: relative
}

.idx_lst li {
  position: relative;
  display: block;
  padding-left: 1em;
  margin-bottom: .5em;
  background-repeat: no-repeat;
  background-position: 0 .4em;
  background-size: .8em auto
}

.reason .idx_inr {
  max-width: 1400px;
  width: 100%;
  padding: 36px 0;
  margin-bottom: 30px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-color: #fff;
  background-position: 100% 0
}

.reason .idx_inr:nth-of-type(2) {
  background-position: 0 0
}
.reason .idx_inr:nth-of-type(4) {
  background-position: 0 0
}
.reason .idx_inr:nth-of-type(6) {
  background-position: 0 0
}

.reason .idx_box {
  /* color: #2e2e2e; */
  background-color: #ffffff61;
  box-shadow: 3px 3px 5px rgba(162,162,162,.2);
  max-width: 858px;
  margin: 0 auto 0 0;
  padding: 30px 24px 24px 65px;
}

.reason .idx_inr:nth-of-type(2) .idx_box {
  box-shadow: -3px 3px 5px rgba(162,162,162,.2);
  margin: 0 0 0 auto
}
.reason .idx_inr:nth-of-type(4) .idx_box {
  box-shadow: -3px 3px 5px rgba(162,162,162,.2);
  margin: 0 0 0 auto
}
.reason .idx_inr:nth-of-type(6) .idx_box {
  box-shadow: -3px 3px 5px rgba(162,162,162,.2);
  margin: 0 0 0 auto
}

.reason_ttl {
  position: relative;
  font-size: 26.87px;
  margin: 0 0 24px;
  border-bottom: 1px solid #977c4c;
}
.reason_ttl span{
  font-size: 35px;
  /* color: #bfa250; */
  background: linear-gradient(135deg, #95723c, #b19376, #8b5e3c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
  

.reason_ttl:before {
  content: "";
  display: block;
  position: absolute;
  width: 99px;
  aspect-ratio: 1/1;
  left: -45px;
  top: -24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.reason_ttl p span {
  border-bottom: 1px solid #cb4872;
}


.reason_lead {
  display: flex;
  align-items: center;
  padding: 0 0 16px;
  margin: 0 auto 15px 0;
  /* width: 60%; */
}

.reason_lead p {
  display: block;
}

.reason_lead span {
  border-bottom: 1px solid #b15062;
}

.reason_lead p i {
  display: block
}

.reason_lead p .ja {
  font-size: 27.52px
}

.reason_lead p .en {
  font-size: 39.63px;
  font-weight: 700;
}

.reason_lead figure {
  flex: 1;
}

.reason .idx_lst {
  font-size: 15px;
}
.reason .idx_lst li {
  line-height: 1.3;
}
.reason .idx_lst li::before {
  content: "●"; 
  font-size: 20px; 
  color: #C88E48; 
  margin-right: 10px; 
  position: relative;
  top: 3px;
}

.reason .idx_lst li span {
  display: block
}
.reason .idx_lst li em {
    font-weight: 600;
    font-size: 19px;
}
.reason01 li em{
  color: #C88E48;
}
.reason02 li em{
    color: #C88E48;
}
.reason03 li em{
    color: #C88E48;
}
.reason04 li em{
  color: #C88E48;
}

.reason_fig {
  position: absolute
}

.reason .idx_gnr_btn {
  width: unset;
  left: unset;
  right: 36px;
  bottom: 20px
}

.idx_gnr_01 {
	background-image: url(../images/invisa/dream01.png);
  background-repeat: no-repeat;
}


.idx_gnr_01 .reason_lead p {
  margin-right: 42px
}

.idx_gnr_01 .reason_lead figure img {
  width: 109px;
  aspect-ratio: 109/149
}

.idx_gnr_01 .idx_lst li:nth-of-type(3) {
  /* padding-left: .8em */
}

.idx_gnr_01 .reason_fig {
  width: 366px;
  bottom: 40px;
  right: 0px;
}

.idx_gnr_01 .reason_fig img {
  aspect-ratio: 366/272
}

.idx_gnr_02 {
	background-image: url(../images/invisa/dream02.png);
  background-repeat: no-repeat;
}

.idx_gnr_02 .reason_lead p {
  margin-right: 36px
}

.idx_gnr_02 .reason_lead figure img {
  width: 103px;
  aspect-ratio: 103/138
}

.idx_gnr_02 .idx_lst li:nth-of-type(2) span:nth-of-type(2) {
  margin-left: -.4em
}

.idx_gnr_02 .reason_fig {
  width: 378px;
  bottom: 40px;
  right: 42px
}

.idx_gnr_02 .reason_fig img {
  aspect-ratio: 378/269
}

.idx_gnr_03 {
	background-image: url(../images/invisa/dream03.png);
  background-repeat: no-repeat;
}


.idx_gnr_03 .reason_lead p {
  margin-right: 30px
}

.idx_gnr_03 .reason_lead figure img {
  width: 117px;
  aspect-ratio: 117/144
}

.idx_gnr_03 .idx_lst li:nth-of-type(2),.idx_gnr_03 .idx_lst li:nth-of-type(3) {
  padding-left: 1em
}

.idx_gnr_03 .reason_fig {
  width: 377px;
  bottom: 40px;
  right: 42px
}

.idx_gnr_03 .reason_fig img {
  aspect-ratio: 377/269
}


.idx_gnr_04{
	background-image: url(../images/invisa/dream04.png);
  background-repeat: no-repeat;
}
.idx_gnr_04 .reason_lead p {
  margin-right: 30px
}

.idx_gnr_04 .reason_lead figure img {
  width: 117px;
  aspect-ratio: 117/144
}

.idx_gnr_04 .idx_lst li:nth-of-type(2),.idx_gnr_04 .idx_lst li:nth-of-type(3) {
  padding-left: 1em
}

.idx_gnr_04 .reason_fig {
  width: 377px;
  bottom: 40px;
  right: 42px
}

.idx_gnr_04 .reason_fig img {
  aspect-ratio: 377/269
}

.idx_gnr_05{
	background-image: url(../images/invisa/dream05.png);
  background-repeat: no-repeat;
}
.idx_gnr_05 .reason_lead p {
  margin-right: 30px
}

.idx_gnr_05 .reason_lead figure img {
  width: 117px;
  aspect-ratio: 117/144
}

.idx_gnr_05 .idx_lst li:nth-of-type(2),.idx_gnr_05 .idx_lst li:nth-of-type(3) {
  padding-left: 1em
}

.idx_gnr_05 .reason_fig {
  width: 377px;
  bottom: 40px;
  right: 42px
}

.idx_gnr_05 .reason_fig img {
  aspect-ratio: 377/269
}

.idx_gnr_06{
	background-image: url(../images/invisa/dream06.png);
  background-repeat: no-repeat;
}
.idx_gnr_06 .reason_lead p {
  margin-right: 30px
}

.idx_gnr_06 .reason_lead figure img {
  width: 117px;
  aspect-ratio: 117/144
}

.idx_gnr_06 .idx_lst li:nth-of-type(2),.idx_gnr_05 .idx_lst li:nth-of-type(3) {
  padding-left: 1em
}

.idx_gnr_06 .reason_fig {
  width: 377px;
  bottom: 40px;
  right: 42px
}

.idx_gnr_06 .reason_fig img {
  aspect-ratio: 377/269
}

.h4_bloc h4{
  font-size: 1.25rem;
  font-weight: 600;
  border-left: 4px solid #c8b68c;
  padding-left: 0.6em;
  margin: 1.5em 0 0.5em;
}

/*------------------------------
ボタン
------------------------------*/

.btn03 {
  position: relative;
}
.btn03 a {
  display: inline-block;
  position: relative;
  min-width: 250px;
  box-sizing: border-box;
  padding: 17px 38px 17px 25px;
  margin: 20px 0;
  line-height: 1;
  border-radius: 40px;
  text-align: left;
  font-weight: bold;
  text-decoration: none;
  font-size: 15px;
}
.btn03 a:hover::before {
  right: 20px;
}

.btn03 a:hover::before{
	right: 20px;
}

.btn03 a:hover::after{
	left:0;
	top:0;
}
.btn03 a i{
	margin-right: 7px;
	font-size: 12px;
}
/* 一つ目のボタン */
.reasonbtv01 a {
	border: 1px solid #977c4c;
	color: #977c4c;
	transition: background-color 1s ease, color 1s ease;
}
.reasonbtv01 a:hover {
	color: #fff;
	background:#977c4c;
}

/* 二つ目のボタン */
.reasonbtv02 a {
  border: 1px solid #977c4c;
  color: #977c4c;
	transition: background-color 1s ease, color 1s ease;
}
.reasonbtv02 a:hover {
	color:#fff;
	background:#977c4c;
}

/* 三つ目のボタン */
.reasonbtv03 a {
	border: 1px solid #977c4c;
	color: #977c4c;
	transition: background-color 1s ease, color 1s ease;
}

.reasonbtv03 a:hover{
	color:#fff;
	background-color:#977c4c;
}
.reasonbtv03 a:hover::before{
	border-color:#977c4c;
  color: #fff;
}

/* 四つ目のボタン */
.reasonbtv04 a {
	border: 1px solid #977c4c;
	color: #977c4c;
	transition: background-color 1s ease, color 1s ease;
}

.reasonbtv04 a:hover{
	color:#fff;
	background-color:#977c4c;
}
.reasonbtv04 a:hover::before{
	border-color:#977c4c;
  color: #fff;
}
/* ----------------------------------------------------
タブレット用（768px〜1024px）
---------------------------------------------------- */
/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media (max-width: 768px) {

}
/*==================================================================

  お悩み（歯並びの種類）

==================================================================*/
:root{
  --pink: #f29ab3;
  --pink-strong: #e37498;
  --pink-bg: #fff3f7;
  --ink: #5b3a46;
}
.aligesec {
	background: url(../images/invisa/aligesecbg.png) no-repeat top center / 100%;
    padding: max(3.714vw, 48px) 0 max(5.429vw, 71px);
    aspect-ratio: 1400 / 977;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.alignment{
  padding: clamp(16px, 3vw, 32px);
  color: var(--ink);
  /* background: #ffffffcc; */
}

/* ===== グリッド（PCは上3＋下4固定） ===== */
.alignment__grid{
  /* list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 28px;
  justify-items: center;
  max-width: 980px; */
  display: grid;
  grid-template-columns: repeat(8, minmax(120px, 1fr));
  gap: 28px;
  justify-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.alignment__grid li { grid-column: span 2; }

/* 上3つを 2 / 4 / 6 に配置 */
.alignment__grid li:nth-child(1){ grid-column: 2 / span 2; }
.alignment__grid li:nth-child(2){ grid-column: 4 / span 2; }
.alignment__grid li:nth-child(3){ grid-column: 6 / span 2; }

/* ===== カード ===== */
.card{
  text-align: center;
}
.card__thumb{
  width: 200px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 10px;
  border-radius: 9999px;
  border: 4px solid var(--pink);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 2px 0 rgba(227,116,152,.12),
    0 8px 18px rgba(242,154,179,.15);
  transition: transform .15s ease, border-color .15s ease;
}
.card__thumb img{
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
  display: block;
}
.card figcaption{
  font-size: 1.3rem;
  line-height: 1.4;
  color: #b15062;
}

/* ホバー（任意） */
.card:hover .card__thumb{
  transform: translateY(-2px);
  border-color: var(--pink-strong);
}

/* ===== レスポンシブ ===== */
/* タブレット：3列。手動配置を解除して自然回り込み */
@media (max-width: 960px){
  .alignment__grid{
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
  .alignment__grid li:nth-child(-n+3){ grid-column: auto; }
}

/* スマホ：2列 */
@media (max-width: 640px){
  .alignment__grid{
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 22px;
  }
  .card__thumb{ width: 160px; }
}

/* 極小：1列 */
@media (max-width: 360px){
  .alignment__grid{
    grid-template-columns: 1fr;
  }
  .card__thumb{ width: 140px; }
}

/* ========== 2列になったら再配置 ========== */
@media (max-width: 640px){
  .alignment__grid{
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    max-width: 500px;
  }

  /* 手動配置リセット */
  .alignment__grid li{ grid-column: auto; }

  /* 上段（最初の3つ）は1〜2列ぶち抜きでセンターに */
  .alignment__grid li:nth-child(1),
  .alignment__grid li:nth-child(2),
  .alignment__grid li:nth-child(3){
    grid-column: 1 / span 2;
    justify-self: center;
  }
}

/* ====== 色（ページのピンクに合わせて調整可） ====== */
:root{
  --ink:#5b3a46;
  --pink:#f29ab3;
  --pink-strong:#e37498;
  --marker:#fff6a6;   /* 蛍光ペン風（やわらかいイエロー） */
  --panel:#fff9fb;    /* ごく薄いピンクの背景 */
}

/* ====== ブロック ====== */
.can-ortho{
  background: #fff9fbbd;
  border: 1px solid rgba(0, 0, 0, .04);
  padding: clamp(18px, 3vw, 28px) 16px;
  color: var(--ink);
  box-shadow: 0 10px 20px rgba(242, 154, 179, .10);
  width: 61%;
  margin: auto;
}
.can-ortho__inner{
  max-width: 880px;
  margin: 0 auto;
}

/* 見出し（下線＋一部強調） */
.can-ortho__title{
  margin: 0 0 14px;
  font-size: clamp(18px,2.2vw,24px);
  font-weight: 600;
  line-height: 1.4;
  border-bottom: 1px solid var(--pink);
  padding-bottom: 6px;
}
.can-ortho__title span{ color: var(--pink-strong); }

/* チェック付きリスト */
.can-ortho__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.can-ortho__list li{
  position: relative;
  padding-left: 36px;          /* チェックの幅ぶん */
  line-height: 1.9;
  font-size: clamp(15px,1.6vw,1.3rem);
}
.can-ortho__list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: .6em;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--pink-strong);
  border-radius: 6px;          /* 丸→四角の中間で上品に */
  color: var(--pink-strong);
  background: #fff;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

/* 蛍光ペン風ハイライト（語尾まで自然に） */
.marker{
  background: linear-gradient(transparent 65%, var(--marker) 65%);
  padding: 0 .1em;
}

/* 注意書き */
.can-ortho__note{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

/*==================================================================

  インビザライン取り扱い
  
==================================================================*/
/* ===== 3カラム特徴（ピンク） ===== */
:root{
  --pk-1:#f29ab3;     /* メイン */
  --pk-2:#e37498;     /* アクセント */
  --pk-bg:#fff5f8;    /* セクション背景 */
  --ink:#5b3a46;
  --muted:#7a5d66;
}

.features3.pink{
  background: var(--pk-bg);
  padding: clamp(24px, 4vw, 60px) 16px;
  color: var(--ink);
}
.features3__inner{
  /* max-width: 1100px; */
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 25px);
}

/* カード */
.feat{
  background: #fff;
  box-shadow: 0 10px 24px rgba(242,154,179,.15);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* 画像帯 */
.feat__media{
  margin: 0;
  background: #fff;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 24px);
  border-bottom: 4px solid rgba(226,116,152,.18);
}
.feat__media img{
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 本文 */
.feat__body{
  position: relative;
  padding: clamp(16px, 3vw, 24px);
}

/* 大きな番号（飾り） */
.feat__num{
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(226,116,152,.25); /* 輪郭だけピンク */
  text-stroke: 2px rgba(226,116,152,.25);
  pointer-events: none;
  user-select: none;
}

/* 見出し */
.feat__title{
  margin: 0 0 10px;
  padding-left: 8px;
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 700;
	/* border-left: 6px solid var(--pk-1); */
	text-align: center;
	margin-top: 25px;
}



/* ホバー（任意） */
.feat:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(242,154,179,.22);
  transition: .2s ease;
}

/* レスポンシブ */
@media (max-width: 960px){
  .features3__inner{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .features3__inner{ grid-template-columns: 1fr; }
  .feat{ border-radius: 16px; }
}
/*==================================================================

  比較表
  
==================================================================*/
/* -------------------比較表------------------- */
.comparesec {
  margin-bottom: max(4.643vw, 60px);
    padding: max(2.857vw, 37px) 0 max(0.714vw, 9px);
    background-image: url(../images/invisa/comparbg.png);
    background-size: cover;
    aspect-ratio: 1400 / 1000;
}
/* 見出し */
.comparisonttl {
  font-size: max(2.274vw, 40px);
  color: #69492a;
  line-height: 1.4;
  margin-bottom: 15px;
  text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.6);
  position: relative;
  text-align: center;
  margin: 30px 0;
}
.comparisonttl .implant {
  font-size: 50px;
  color: #e9568b;
}
.comparisonttl .allon4 {
  font-size: 50px;
  color: #ff2b77;
}
.comparisonttl .mini {
  font-size: 25px;
}

.comparison-table {
  max-width: 1400px;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
  font-family: 'Noto Serif JP';
  padding: 15px;
}

.header-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 0;
  position: relative;
  min-width: 900px;
  padding-left: 12%;
}

.circle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
  font-size: 18px;
  border: 1px solid #999;
  background-color: #fff;
}

.circle.allon4 {
  background-color: #e7bdcb;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  border: none;
}

.line-down {
  width: 2px;
  height: 40px;
  background-color: #999;
  margin: 0 auto;
}

.line-down.gold {
  background-color: #c1a753;
}

.row {
  display: flex;
  align-items: stretch;
  min-width: 900px;
  margin-bottom: 10px;
}
.hiyou span {
  font-size: 1.5rem;
  color: #df689e;
}

.label {
  width: 160px;
  background-color: #E3C4C4;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label-inner {
  text-align: center;
  padding: 10px;
}

.comp_icon {
  font-size: 30px;
  margin-bottom: 8px;
}

.comp_text {
  font-weight: bold;
  font-size: 16px;
}

.content {
  width: 50%;
  border: 1px solid #ccc;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  position: relative;
}

.content.gold {
  border: 1px solid #c1a753;
  background-color: #fdf8ef;
}

.content strong {
  font-weight: bold;
  color: #df689e;
}

.content .gold {
  color: #c1a753;
  font-weight: bold;
}

/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {
  .circle {
    width: 100px;
    height: 100px;
    font-size: 12px;
  }
  .circle.allon4{
    font-size: 12px;
  }
  .comparison-table {
    overflow-x: auto;
  }
  .header-row {
    justify-content: center;
    gap: 20%;
  }

  .header-row,
  .row {
    flex-wrap: nowrap;
    min-width: 100%; 
  }

  .label, .content {
    white-space: normal;
  }
  .content {
    padding: 20px 10px;
    font-size: 13px;
    text-align: left;
  }
}
/* -------------------比較ここまで------------------- */
/* -------------------    理想    ------------------- */
:root{
  --ink:#3f2d33; --muted:#7c6a70;
  --pink:#f29ab3; --pink-strong:#e37498;

  /* 相性色 */
  --peach-bg:#fff6ee; --peach-ac:#f3b880;
  --mint-bg:#eefaf6;  --mint-ac:#79c9ad;
  --lav-bg:#f7f2ff;   --lav-ac:#b7a6e9;
  --rose-bg:#fff1f6;  --rose-ac:#f08aaa;

  --card:#fff; --line:#efe7eb;
}

/* セクション */
.needs4{ padding: clamp(28px,4vw,64px) 16px; background:#fff; color:var(--ink); }
.needs4__grid{
  max-width: 1400px; margin: 0 auto;
  display:grid; gap: clamp(18px,2.6vw,28px);
  grid-template-columns: repeat(2, minmax(0,1fr));
}

/* カード共通 */
.needcard{
  position: relative;
  background: var(--card);
  border:5px solid var(--line);
  /* border-radius: 20px; */
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(242,154,179,.15);
  padding: clamp(18px,2.6vw,24px);
  display:flex; flex-direction:column; gap: 10px;
}

/* 色テーマ（淡い帯を背景に） */
.needcard.peach   { background: linear-gradient(180deg,var(--peach-bg),#fff 40%); }
.needcard.mint    { background: linear-gradient(180deg,var(--mint-bg), #fff 40%); }
.needcard.lavender{ background: linear-gradient(180deg,var(--lav-bg),  #fff 40%); }
.needcard.rose    { background: linear-gradient(180deg,var(--rose-bg), #fff 40%); }

/* 番号リボン */
.needcard__ribbon{
  position:absolute; 
  inset: 14px auto auto 14px;
  margin:0; 
  z-index:2;
  background:#fff; 
  border: 1px solid var(--pink);
  color:var(--pink); 
  font-weight:800; 
  line-height:1;
  border-radius: 12px; 
  padding: 10px;
  box-shadow: 0 6px 16px rgba(242,154,179,.18);
  top: 28px;
}
.needcard__ribbon span{ font-size: 20px; }

/* 見出し */
.needcard__head{ padding-left: 52px; }
.needcard__title{
  margin:0; font-size: clamp(18px,1.8vw,1.8rem); line-height:1.35;
}
.needcard__title span{
  font-size: 2rem;
  color: #e7a56b;
  font-weight: 600;
}
.mint .needcard__head .needcard__title span {
  color: #76d4b5;
}
.lavender .needcard__head .needcard__title span {
  color: #bca3e6;
}
.rose .needcard__head .needcard__title span {
  color: #e099b2;
}
.peach .needcard__ribbon {
  color: #e7a56b;
  border: 1px solid #e7a56b;
}
.mint .needcard__ribbon {
  color: #76d4b5;
  border: 1px solid #76d4b5;
}
.lavender .needcard__ribbon {
  color: #bca3e6;
  border: 1px solid #bca3e6;
}
.needcard__lead{
  margin:6px 0 0; color:var(--muted); font-size: 14px;
}

/* チェック付きリスト（SVG） */
.needcard__list{ margin:10px 0 0; padding:0; list-style:none; }
.needcard__list li{
  position:relative; padding-left: 28px;
  margin: 10px 0; line-height:1.8;
}
.needcard__list li::before{
 content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--pink);
  background: #fff;
}
.peach .needcard__list li::before{
  border: 2px solid #e7a56b;
}
.mint .needcard__list li::before{
  border: 2px solid #76d4b5;
}
.lavender .needcard__list li::before{
  border: 2px solid #bca3e6;
}


/* 根拠チップ */
.needcard__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 4px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--line);
  padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted);
  box-shadow: 0 6px 12px rgba(0,0,0,.04);
}
.chip::before{
  content:""; width:8px; height:8px; border-radius:50%; background: var(--pink);
}
.peach .chip::before {
  background: #e7a56b;
}
.mint .chip::before {
  background: #76d4b5;
}
.lavender .chip::before {
  background: #bca3e6;
}

/* 脚注 */
.needcard__note{ margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* ちょいホバー */
.needcard{ transition: transform .2s ease, box-shadow .2s ease; }

.needcard__img img {
	display: block;
	width: 80%;
	margin: 0 auto;
}
/* レスポンシブ */
@media (max-width: 960px){
  .needs4__grid{ grid-template-columns: 1fr; }
  .needcard__head{ padding-left: 48px; }
}
/*==================================================================

理想叶えるブロック
  
==================================================================*/
/*---------------------------------------------------------------------

 世代ごとの取り組み 

 ---------------------------------------------------------------------*/
/* セクションの背景 */
.sedai {
  padding: 60px 0 0 0;
  position: relative;
  background: linear-gradient(to right, rgb(255 255 255) 0%, rgb(246 234 242 / 90%) 20%, /* #eaf0f6（明るめ）*/ rgb(250 245 248 / 90%) 80%, /* #f5f7fa（ほぼ白）*/ rgb(255 255 255) 100%);  z-index: 0;
  overflow: hidden;
  font-family: 'Noto Serif JP', serif;
}

.sedai::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: 1;
}

.sedai::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px; 
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: 1;
}

.idx_inr {
  position: relative;
  display: block;
  margin: 0 auto;
}

.idx_box {
  display: block;
  position: relative
}

.idx_lst li {
  position: relative;
  display: block;
  padding-left: 1em;
  margin-bottom: .5em;
  background-repeat: no-repeat;
  background-position: 0 .4em;
  background-size: .8em auto
}

.sedai .idx_inr {
  max-width: 1400px;
  width: 100%;
  padding: 36px 0;
  margin-bottom: 30px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-color: #fff;
  background-position: 100% 0
}

.sedai .idx_inr:nth-of-type(2) {
  background-position: 0 0
}

.sedai .idx_box {
  background-color: #ffffff61;
  box-shadow: 3px 3px 5px rgba(162,162,162,.2);
  max-width: 858px;
  margin: 0 auto 0 0;
  padding: 30px 24px 24px 65px;
}

.sedai .idx_inr:nth-of-type(2) .idx_box {
  box-shadow: -3px 3px 5px rgba(162,162,162,.2);
  margin: 0 0 0 auto
}
.sedai .idx_inr:nth-of-type(4) .idx_box {
  box-shadow: -3px 3px 5px rgba(162,162,162,.2);
  margin: 0 0 0 auto
}

.sedai_ttl {
  position: relative;
  font-size: 26.87px;
  margin: 0 0 24px;
  border-bottom: 1px solid #977c4c;
  color: #5b4633;
}
.sedai_ttl span{
  font-size: 35px;
  color: #bfa250;
}
  

.sedai_ttl:before {
  content: "";
  display: block;
  position: absolute;
  width: 99px;
  aspect-ratio: 1/1;
  left: -45px;
  top: -24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.sedai_lead {
  display: flex;
  align-items: center;
  padding: 0 0 16px;
  margin: 0 auto 15px 0;
  /* width: 60%; */
}

.sedai_lead p {
  display: block;
  /* text-align: center */
}

.sedai_lead p i {
  display: block
}

.sedai_lead p .ja {
  font-size: 27.52px
}

.sedai_lead p .en {
  font-size: 39.63px;
  font-weight: 700
}

.sedai_lead figure {
  flex: 1
}

.sedai .idx_lst {
  font-size: 15px
}
.sedai .idx_lst li {
  line-height: 1.3;
  /* letter-spacing: -.06em */
}
.sedai .idx_lst li::before {
  content: "●";
  font-size: 20px;
  color: #C88E48;
  margin-right: 10px;
  position: relative;
  top: 3px;
}

.sedai .idx_lst li span {
  display: block
}
.sedai .idx_lst li em {
    font-weight: 600;
    font-size: 19px;
}
.sedai01 li em{
  color: #C88E48;
}
.sedai02 li em{
    color: #C88E48;
}
.sedai03 li em{
    color: #C88E48;
}
.sedai04 li em{
  color: #C88E48;
}

.sedai_fig {
  position: absolute
}

.sedai .idx_gnr_btn {
  width: unset;
  left: unset;
  right: 36px;
  bottom: 20px
}

.risou_01 {
	background-image: url(../images/invisa/risou01.png);
  background-repeat: no-repeat;
}


.risou_01 .sedai_lead p {
  margin-right: 42px
}

.risou_01 .sedai_lead figure img {
  width: 109px;
  aspect-ratio: 109/149
}
.risou_01 .sedai_fig {
  width: 366px;
  bottom: 40px;
  right: 0px;
}
.risou_01 .sedai_fig img {
  aspect-ratio: 366/272;
  padding: 10px;
  width: 366px;
}

.risou_02 {
	background-image: url(../images/invisa/risou02.png);
  background-repeat: no-repeat;
}

.risou_02 .sedai_lead p {
  margin-right: 36px
}

.risou_02 .sedai_lead figure img {
  width: 103px;
  aspect-ratio: 103/138
}

.risou_02 .idx_lst li:nth-of-type(2) span:nth-of-type(2) {
  margin-left: -.4em
}

.risou_02 .sedai_fig {
  width: 309px;
  bottom: 0px;
  right: 42px;
}

.risou_02 .sedai_fig img {
  aspect-ratio: 378/269
}

.risou_03 {
	background-image: url(../images/invisa/risou03.png);
  background-repeat: no-repeat;
}


.risou_03 .sedai_lead p {
  margin-right: 30px
}

.risou_03 .sedai_lead figure img {
  width: 117px;
  aspect-ratio: 117/144
}

.risou_03 .idx_lst li:nth-of-type(2),.risou_03 .idx_lst li:nth-of-type(3) {
  padding-left: 1em
}

.risou_03 .sedai_fig {
  width: 377px;
  bottom: 40px;
  right: 42px
}

.risou_03 .sedai_fig img {
  aspect-ratio: 377/269;
  width: 366px;
}

.spimg {
  display: none;
}
.spnone {
  display: block;
}


/*------------------------------
ボタン
------------------------------*/

.btn03 {
  position: relative;
}
.btn03 a {
  display: inline-block;
  position: relative;
  min-width: 250px;
  box-sizing: border-box;
  padding: 17px 38px 17px 25px;
  margin: 6px 0;
  line-height: 1;
  border-radius: 40px;
  text-align: left;
  font-weight: bold;
  text-decoration: none;
  font-size: 15px;
}
.btn03 a:hover::before {
  right: 20px;
}

.btn03 a:hover::before{
	right: 20px;
}

.btn03 a:hover::after{
	left:0;
	top:0;
}
.btn03 a i{
	margin-right: 7px;
	font-size: 12px;
}
/* 一つ目のボタン */
.sedaibtv01 a {
	border: 1px solid #977c4c;
	color: #977c4c;
	transition: background-color 1s ease, color 1s ease;
}
.sedaibtv01 a:hover {
	color: #fff;
	background:#977c4c;
}

/* 二つ目のボタン */
.sedaibtv02 a {
  border: 1px solid #977c4c;
  color: #977c4c;
	transition: background-color 1s ease, color 1s ease;
}
.sedaibtv02 a:hover {
	color:#fff;
	background:#977c4c;
}

/* 三つ目のボタン */
.sedaibtv03 a {
	border: 1px solid #977c4c;
	color: #977c4c;
	transition: background-color 1s ease, color 1s ease;
}

.sedaibtv03 a:hover{
	color:#fff;
	background-color:#977c4c;
}
.sedaibtv03 a:hover::before{
	border-color:#977c4c;
  color: #fff;
}

/* 四つ目のボタン */
.sedaibtv04 a {
	border: 1px solid #977c4c;
	color: #977c4c;
	transition: background-color 1s ease, color 1s ease;
}

.sedaibtv04 a:hover{
	color:#fff;
	background-color:#977c4c;
}
.sedaibtv04 a:hover::before{
	border-color:#977c4c;
  color: #fff;
}
/* ----------------------------------------------------
タブレット（768px～1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.sedai .idx_box {
    background-color: #ffffffd6;
  }
}
/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {
  .spimg {
    display: block;
  }
  .sedai .idx_box {
    background-color: #ffffffed;
    padding: 20px 10px;
  }
  .sedai_ttl {
    font-size: 1rem;
  }
  .sedai_ttl span {
    font-size: 1.7rem;
  }
  .sedai_lead {
    width: 100%;
    margin: 15px auto
  }
  .idx_gnr_01 .sedai_lead p,
  .idx_gnr_02 .sedai_lead p,
  .idx_gnr_03 .sedai_lead p {
    margin-right: 0;
}
.sedai .idx_lst li em {
  font-size: 18px;
}
.spnone {
  display: none;
}
.sedai .idx_inr,
.sedai .idx_inr:nth-of-type(2){
  background-position: left top;
}
}
/* デフォルトでは非表示（PC用） */
.sp-only {
  display: none;
}

/* モバイル（例：〜767px）のときだけ表示 */
@media screen and (max-width: 767px) {
  .sp-only {
    display: inline;
  }
}


/*---------------------------------------------------------------------

  理想(症例ブロック)
 
 ---------------------------------------------------------------------*/
span.color {
  font-size: 50px;
  background: linear-gradient(135deg, #dd91a5, #d57397, #cb4872);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
 .dreamsec {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 12px 12px;
  background-color: #fff;   
}
.dreamsec {
     font-family: 'Noto Serif JP', serif；
}


 .rejuvenation-block {
  background: #f9f6f2;
	 padding: 20px;
  position: relative;
  max-width: 1400px;
  margin: 20px auto;
}

.rejuvenation-inner {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 30px;
  align-items: flex-start;
}


.rejuvenation-left {
  flex: 1 1 50%;
}

.rejuvenation-right {
  flex: 1 1 45%;
  margin: auto;
}

.rejuvenation-right img {
  width: 100%;
  border-radius: 4px;
}

.rejuvenation-number {
  font-size: 72px;
  font-weight: bold;
  color: #b59b7d;
  line-height: 1;
  margin-bottom: 16px;
  font-family: 'Noto Serif JP', serif；
}

.rejuvenation-left h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.rejuvenation-left .accent {
  color: #b59b7d;
  font-weight: bold;
  font-size: 26px;
}

.rejuvenation-text {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 24px;
}

.rejuvenation-box {
  display: flex;
  gap: 20px;
  align-items: center;
  border-top: 3px solid #d2ba9f;
  padding-top: 20px;
}

.before-after-img img {
  width: 120px;
  height: auto;
}

.rejuvenation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rejuvenation-list li {
  font-size: 16px;
  line-height: 2;
  color: #333;
}

.rejuvenation-list .check {
  color: #b59b7d;
  font-weight: bold;
  margin-right: 8px;
}

.caption {
  font-size: 12px;
  color: #666;
  text-align: right;
  max-width: 1200px;
  margin: 10px auto 0;
}

.readmore {
  text-align: right;
  font-size: 14px;
  margin-top: 8px;
  margin-right: 20px;
  color: #444;
}

.readmore span {
  font-size: 12px;
}
/* 色 */
/* ─── 01：鮮やかピンク ─── */
.rejuvenation-block.pink01 {
  background: #fff0f4;
}
.pink01 .rejuvenation-number,
.pink01 .accent,
.pink01 .check {
  color: #d94c7f;
}
.pink01 .rejuvenation-box {
  border-top: 3px solid #f18da8;
}

/* ─── 02：ローズピンク ─── */
.rejuvenation-block.pink02 {
  background: #fce8ef;
}
.pink02 .rejuvenation-number,
.pink02 .accent,
.pink02 .check {
  color: #b35c7a;
}
.pink02 .rejuvenation-box {
  border-top: 3px solid #d7a4b4;
}

/* ─── 03：ワインローズ系 ─── */
.rejuvenation-block.pink03 {
  background: #f8f4f6;
}
.pink03 .rejuvenation-number,
.pink03 .accent,
.pink03 .check {
  color: #8f4e68;
}
.pink03 .rejuvenation-box {
  border-top: 3px solid #c399aa;
}


.twentytwenty {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
}

.twentytwenty img {
  width: 100%;
  height: auto;
  display: block;
}
/* button */
a.pickup-btn {
  display: block;
  padding: 10px;
  border: 2px solid #b15062;
  border-radius: 30px;
  width: 50%;
  margin: 20px auto;
  text-align: center;
  color: #b15062;
  transition: all 0.3s ease;
  font-weight: 800;
}
a.pickup-btn:hover {
  background: #b15062;
  color: #fff;
}
a.pickup-btn.flowbtn {
  margin: 20px 0;
}

/* ----------------------------------------------------
タブレット（768px～1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
}
/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {
  .rejuvenation-block.pink02 .rejuvenation-inner {
    flex-direction: column-reverse;
  }

  .rejuvenation-block.pink02 .rejuvenation-right {
    width: 100%;
    display: block;
  }

  .rejuvenation-block.pink02 .twentytwenty {
    min-height: 200px; /* 必要に応じて調整 */
  }
  span.color {
  font-size: 40px;
  }
}
/* -------------------------- 治療の流れ -------------------------- */
section.inviflow {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 12px 12px;
    background-color: #fff;
}
.flow_box {
  margin: 20px 0 75px;
  max-width: 1400px;
  margin: auto;
  font-family: 'Noto Serif JP', serif;
  color: #5b4633;
}


.flow_box h3 {
  color: #9a845c;
  border-bottom: 1px solid #d2c3a1;
  font-size: 1.7rem;
  margin-bottom: 20px;
  padding: 10px 0;
}
/* ul.implant_flow_vertical.com_btm_100 {
    padding-bottom: 60px;
} */
.implant_flow_vertical > li {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding-left: 100px;
	padding-bottom: 60px;
}
.implant_flow_vertical li:last-of-type {
	padding-bottom: 0;
}
.implant_flow_vertical > li::before,
.implant_flow_vertical > li::after {
	content: "";
	position: absolute;
	top: 0;
	font-family: quiche-stencil, sans-serif;
	font-weight: 100;
	font-style: normal;
	text-align: center;
	color: #a14242;
	font-size: 220%;
	line-height: 1.0em;
}
.implant_flow_vertical > li::before {
	z-index: 1;
	content: "1";
	width: 1.5em;
	line-height: 1.5em;
	background: #fff;
	border: 1px solid #a14242;
	border-radius: 50%;
	left: 0;
}
.implant_flow_vertical > li:nth-child(2)::before { content: "2"; }
.implant_flow_vertical > li:nth-child(3)::before { content: "3"; }
.implant_flow_vertical > li:nth-child(4)::before { content: "4"; }
.implant_flow_vertical > li:nth-child(5)::before { content: "5"; }
.implant_flow_vertical > li:nth-child(6)::before { content: "6"; }
.implant_flow_vertical > li:nth-child(7)::before { content: "7"; }
.implant_flow_vertical > li:nth-child(8)::before { content: "8"; }
.implant_flow_vertical > li::after {
	z-index: 0;
	width: 1px;
	height: 100%;
  left: 0.75em;
	background-color: #a14242;
}
.implant_flow_vertical li:last-of-type::after {
	display: none;
}
.implant_flow_vertical .img_r {
	width: 35.5%;
	max-width: 394px;
  flex: 2;
}

.implant_flow_vertical .implant_style1 > dt {
  font-size: 1.5rem;
	padding-top: 0.6em;
  padding-bottom: 0.6em;
	color: #d76c94;
}
.implant_flt.clearfix {
  display: flex;
    /* flex-direction: row-reverse; */
    align-items: flex-start;
    gap: 20px;
    background: #f9e5ee3b;
    padding: 30px;
}

.implant_flow_vertical .img_r {
  width: 35.5%;
  max-width: 394px;
}

.implant_flow_vertical .txt_l {
  padding: 0 15px;
  flex: 3;
}

.flow_box .grid_box1{
  flex-direction: row-reverse; 
  box-shadow:none;
  background: none;
  padding: 20px 0;
}
.implant_flow_vertical {
  flex: 3;
}
@media only screen and (max-width: 767px) {
  .flow_box {
    padding: 0 10px;
  }
	.implant_flow_vertical > li {
		padding-left: 15%;
		padding-bottom: 10%;
	}
	.implant_flow_vertical > li::before,
	.implant_flow_vertical > li::after {
		font-size: 160%;
	}
	.implant_flow_vertical .img_r {
		width: 75%;
		margin-bottom: 0.5em;
	}
	.implant_flow_vertical .txt_l {
		width: 100%;
	}
	.implant_flow_vertical .implant_style1 > dt {
		padding-top: 0;
		margin-bottom: 0.2em;
    font-size: 1.2rem;
	}
  .implant_flow_vertical .implant_style1 > dd {
    font-size: 0.85rem;
  }
  .implant_flt.clearfix {
    flex-direction: column; /* スマホでは縦並び */
  }
  .implant_flow_vertical .img_r {
    width: 100%;
    margin-bottom: 0.5em;
  }
  .implant_flow_vertical .txt_l {
    width: 100%;
    padding: 0;
  }
	.retina {
		width:100%;
		height:100%;
	}
}
/* -------------------------- 注意点 -------------------------- */
:root {
  --pink: #f29ab3;
  --pink-strong: #e37498;
  --ink: #3f2d33;
  --bg: #fff9fb;
}

.invisalign-caution {
  background: var(--bg);
  padding: clamp(40px, 5vw, 72px) 20px;
  border-radius: 24px;
  /* box-shadow: 0 10px 26px rgba(242, 154, 179, 0.15); */
  /* margin: 40px auto; */
}

.caution__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  color: var(--ink);
}

.caution__lead {
  font-size: 15px;
  color: #555;
  margin-bottom: 32px;
}

.caution__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.caution__item {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}

.caution__icon {
  font-size: 32px;
  margin-bottom: 12px;
  color: var(--pink-strong);
}

.caution__item h3 {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--ink);
}

.caution__item p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.caution__note {
  font-size: 12px;
  color: #777;
  margin-top: 20px;
}
/* 固定ボタンラッパー（PCは右下に、スマホは下部に全幅） */
.fixed-reservation-buttons {
  position: fixed;
  z-index: 1000;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ボタン共通スタイル */
.reservation-button {
  background-color: #f8c0c6;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.reservation-button i {
  font-size: 20px;
}

.reservation-button:hover {
  background-color: #f69a9f;
  transform: translateY(-3px);
  color: #fff;
}

.reservation-button:active {
  background-color: #f56b7b;
  transform: translateY(1px);
}

/* ▼ PC：右下に小さめで表示 */
@media screen and (min-width: 768px) {
  .fixed-reservation-buttons {
    bottom: 20px;
    right: 20px;
    flex-direction: row;
  }
}

/* ▼ モバイル：下部に全幅表示 */
@media screen and (max-width: 767px) {
  .fixed-reservation-buttons {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 10px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    justify-content: space-around;
  }

  .reservation-button {
    flex: 1;
    border-radius: 30px;
    font-size: 15px;
    padding: 12px 10px;
    max-width: 48%;
  }
}
/* 固定ボタンラッパー（PCは右下に縦並び、スマホは下部に全幅） */
.fixed-reservation-buttons {
  position: fixed;
  z-index: 1000;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ボタン共通スタイル */
.reservation-button {
  background-color: #f8c0c6;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
	gap: 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.reservation-button i {
  font-size: 20px;
}

.reservation-button:hover {
  background-color: #f69a9f;
  transform: translateY(-3px);
  color: #fff;
}

.reservation-button:active {
  background-color: #f56b7b;
  transform: translateY(1px);
}

/* ▼ PC：右下に縦並びで表示 */
@media screen and (min-width: 768px) {
  .fixed-reservation-buttons {
	  bottom: 82px;
	  right: 20px;
	  flex-direction: column; /* ←縦並び */
	  z-index: 10;
  }

  .reservation-button {
    width: 180px; /* 好みに応じて調整可 */
  }
}

/* ▼ モバイル：下部に全幅表示（横並び） */
@media screen and (max-width: 767px) {
	.footer-links {
		flex-direction: column;
	}
	.footer-section {
		width: 100%;
	}
  .fixed-reservation-buttons {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 10px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    justify-content: space-around;
    flex-direction: row; /* ←横並びのまま */
  }

  .reservation-button {
	  flex: 1;
	  border-radius: 30px;
	  font-size: 11px;
	  padding: 12px 10px;
	  max-width: 48%;
  }
}
/* ------チャットボット------ */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* トグルボタン */
.chat-toggle-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #d28fb0;
  color: #fff;
  padding: 12px 18px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

/* チャットウィンドウ */
.chat-box {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 600px;
  max-height: 80%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.chat-box.active {
  opacity: 1;
  pointer-events: auto;
  animation: fadeInUpZoom 0.5s ease forwards;
  height: 100vh;
  z-index: 20;
}

@keyframes fadeInUpZoom {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-header {
  background: linear-gradient(90deg, #d28fb0, #e8a6c3);
  color: #fff;
  padding: 12px 16px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.chat-header button {
  background: transparent;
  color: #fff;
  font-size: 18px;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background 0.3s;
}

.chat-header button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  font-size: 14px;
  background: #fceef3;
  scroll-behavior: smooth;
}

.chat-input {
  display: flex;
  border-top: 1px solid #ccc;
}

.chat-input input {
  flex: 1;
  border: none;
  padding: 10px;
  font-size: 16px;
  border-radius: 73px;
  border: 1px solid #ccc;
  margin: 5px;
}

.chat-input button {
  border: none;
  background: linear-gradient(90deg, #d28fb0, #e8a6c3);
  color: white;
  padding: 10px 15px;
  cursor: pointer;
}

.bot-message {
  background: #f7e5ec;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  animation: fadeInUp 0.3s ease;
  color: #a85b7c;
}

.user-message {
  background: #d28fb0;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  text-align: right;
  color: #ffffff;
  animation: fadeInUp 0.3s ease;
}

.chat-body a {
  color: #c26789;
  font-weight: bold;
  text-decoration: underline;
  transition: all 0.3s ease;
}

.chat-body a:hover {
  color: #a05d77;
  background-color: #f0dce6;
  padding: 2px 4px;
  border-radius: 4px;
  text-decoration: none;
}

.chat-body table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.chat-body th {
  background-color: #d28fb0;
  color: white;
  padding: 8px;
  border: 1px solid #ccc;
  text-align: center;
}

.chat-body td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: center;
}

.typing-indicator::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  background: #c26789;
  border-radius: 50%;
  animation: blink 1s infinite;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blink {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 1; }
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .chat-box {
    width: 100%;
    max-height: 80vh;
    left: 0;
    bottom: 10px;
    border-radius: 8px;
  }
  .chat-toggle-button {
    bottom: 70px;
    right: 5px;
    padding: 10px 18px;
    z-index:10;
  }
  .bot-message img {
    width: 100%;
  }
  .chat-box.active {
    bottom:64px;
  }
  .chat-input {
    z-index:500;
  }
}