/* すべてのテキストに serif フォントを適用 */
body, h1, h2, h3, h4, h5, h6, p, a, li, dt, dd, span, div, input, button, textarea {
  font-family: serif;
}


html, body { overflow-x: hidden; }

.background-image1 {
  background-image: url('http://kurumidental.com/wp-content/uploads/2025/10/kurumi_mainnew.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 800px; /* 高さを設定しないと表示されません */
	margin-top: -30px;
}


@media (max-width: 768px) {
.background-image1 {
  background-image: url(http://kurumidental.com/wp-content/uploads/2025/10/kurumi-sp.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
	height: 400px; /* 高さを設定しないと表示されません */
	margin-top: -20px;
}

  }


.h2-title{
  text-align: center;
  font-size: 40px;
  font-family: serif;
  color: #EE7700;
  padding: 80px;
}



@media (max-width: 768px) {
.h2-title{
  text-align: center;
  font-size: 25px;
  font-family: serif;
  color: #EE7700;
  padding: 40px;
}

  }


/*------------------- メニュー（共通） -------------------*/
.nav {
  width: 100%;
  background: #fff;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.3s ease-in-out;
  z-index: 10;
}

/* PCデフォルト：横並び */
.nav-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
	padding:15px 0;
  gap: 13px;
/*   list-style: none;
  padding: 0 10px;
  margin: 0 auto;
  width: 100%;
  max-width: 1300px;
  box-sizing: border-box; */

  /* PCでは通常フロー */
  position: static;
  height: auto;
  flex-direction: row;
  background: none;
  box-shadow: none;
  overflow: visible;
  align-items: center;
}

/* 項目・リンク */
.nav-item { position: relative; text-align: center; flex: 0 1 auto; }
.nav-item a {
  text-decoration: none;
  color: #666;
  font-size: 15px;
  font-weight: bold;
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
  transition: color 0.3s ease;
  line-height: 1.6;
}

/* ドロップダウン（PC用） */
.has-dropdown .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  border-radius: 8px;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .4s ease, transform .4s ease;
  z-index: 10;
  line-height: 1.6;
}
.dropdown li { padding: 12px 0; }
.dropdown li a {
  text-decoration: none;
  color: #666;
  display: block;
  font-size: 14px;
  transition: background .3s ease, padding-left .3s ease;
  padding: 10px 0;
}
.dropdown li a:hover { background: #f4f4f4; padding-left: 25px; }
.has-dropdown.open .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ハンバーガー（PCでは非表示） */
.menu-toggle { display: none; }

/* ---------- モバイル専用 ---------- */
@media (max-width: 768px) {
  .nav { justify-content: space-between; padding: 10px 15px; }

  /* ハンバーガーを右上に固定 */
  .menu-toggle {
    display: inline-flex;
    position: fixed;
    top: 12px; right: 12px;
    z-index: 1001;
    font-size: 30px;
    background: #f5ca9e;
    color: #333;
    border: none;
    padding: 4px 12px;
    cursor: pointer;
    align-items: center; justify-content: center;
    border-radius: 8px;
  }

  /* メニューは全画面オーバーレイ（初期は非表示） */
  .nav-list {
    position: fixed;
    inset: 0;
    height: 100dvh;        /* iOS対策 */
    background: #fff;
    display: none;
    flex-direction: column;
    padding: 80px 15px 20px; /* トグルと被らない上余白 */
    box-sizing: border-box;
    overflow-y: auto;       /* 中だけスクロール */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 1000;
    align-items: center;
  }
  .nav-list.active { display: flex !important; }

  .nav-item { text-align: center; width: 100%; }
/*   .nav-item a {
    display: inline-block;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    box-sizing: border-box;
    padding: 10px 0;
  } */

  .nav-item a.active {
    color: #333333;
    background-color: rgba(74,144,226,.1);
    border-radius: 50%;
    padding: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    height: 30px;
    transition: background-color .3s ease;
    white-space: nowrap;
  }
  .nav-item a.active:hover { background-color: rgba(74,144,226,.2); }

  .has-dropdown.open + .nav-item { margin-top: 20px; }
  .nav-list { padding-top: 60px; } /* ボタンとの重なり防止 */

  /* メニュー展開中は背面スクロールを止める（JSで .nav-open を付与） */
  body.nav-open {
    position: fixed;
    left: 0; right: 0;
    width: 100%;
    top: var(--scroll-y, 0);
    overflow: hidden;
  }
}

/* ---------- タブレット（PCレイアウトの微調整のみ） ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-list { gap: 15px; max-width: 100%; }
  .nav-item a { font-size: 14px; padding: 6px 8px; }
}


/* その他モバイル用（テキストなど） */
@media (max-width: 768px) {
  .text-content {
    position: absolute;
    top: 20%;
    left: 5%;
    right: 5%;
    text-align: center;
    color: #333;
  }

  .text-content .size3rem {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .text-content .size1-5rem {
    font-size: 1rem;
    line-height: 1.4;
    margin-top: 10px;
  }

  .catchhighlight {
    background-color: rgba(255, 255, 255, 0.6);
    padding: 0 4px;
  }

  .h_inbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }

  .h_logo img {
    width: 150px;
    height: auto;
  }

  .h_contact {
    display: none;
  }
}
/* ---------------------------------------------選ばれる理由--------------------------------------------- */
.reason-section {
  background: #fff;
  padding: 60px 20px;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  color: #333;
}

.reason-text {
  flex: 1 1 550px;
}

.reason-text .reason-lead {
  color: #FF8300;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px solid #FF8300;
  display: inline-block;
}

.reason-text h2 {
  font-size: 26px;
  color: #222;
  margin-bottom: 18px;
  font-family: serif;
}

.reason-text p {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

.reason-image {
  flex: 1 1 500px;
}

.reason-image img {
  width: 90%;
  height: auto;
  border-radius: 8px;
  display: block;
}



/* レスポンシブ対応 */
/* PC用（～768px以上） */
.reason-section {
  background: #fff;
  padding: 60px 20px;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  color: #333;
}

.reason-inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 80px;
  gap: 40px;
  flex-wrap: wrap;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right;
  overflow: hidden;
}
.reason-inner.left {
  flex-direction: row;
}

.reason-inner.right {
  flex-direction: row-reverse;
}

/* テキストを前面に見せる */
.reason-text {
  position: relative;
  z-index: 1;
  flex: 1 1 550px;
  padding: 20px;
  border-radius: 8px;
}

.reason-text .reason-lead {
  color: #FF8300;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px solid #FF8300;
  display: inline-block;
}

.reason-text h3 {
  font-size: 26px;
  color: #222;
  margin-bottom: 18px;
  font-family: serif;
}

.reason-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.reason-image {
  flex: 1 1 500px;
}

.reason-image img {
  width: 90%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0;
  padding: 0;
}




/* 白フィルター（共通） */
.reason-inner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 背景画像を各ブロックで設定 */
.reason-01 {background-image: url('http://kurumidental.com./wp-content/uploads/2025/09/0003_01-1.jpg');
}
.reason-02 {
  background-image: url('http://kurumidental.com./wp-content/uploads/2025/09/0004_1-2.jpg');
}
.reason-03 {
  background-image: url('http://kurumidental.com./wp-content/uploads/2025/09/Reason-03-scaled.jpg');
}
.reason-04 {
  background-image: url('http://kurumidental.com./wp-content/uploads/2025/09/0024_02-scaled.jpg');
}
.reason-05 {
  background-image: url('http://kurumidental.com./wp-content/uploads/2025/09/0038_01.jpg');
}

/* ================================
   スマホ用（768px以下）
================================ */
@media screen and (max-width: 768px) {
  .reason-section {
    padding: 5px 16px;
  }

  .reason-inner,
  .reason-inner.left,
  .reason-inner.right {
    display: flex;
    margin-bottom: 36px;
    gap: 12px;
  }

  /* .reason-image {
    width: 100%;
    line-height: 0;
    margin: 0;
    padding: 0;
  } */

  .reason-image img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 8px;
  }
/* 
  .reason-text {
    width: 100%;
    padding: 0;
  } */

  .reason-text .reason-lead {
    font-size: 14px;
    margin-bottom: 6px;
    color: #FF8300;
    border-bottom: 2px solid #FF8300;
    display: inline-block;
  }

  .reason-text h3 {
    font-size: 18px;
    margin: 4px 0 10px;
    font-family: serif;
    color: #222;
  }

  .reason-text p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    color: #333;
  }
}




.reason-inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 80px;
  gap: 40px;
  flex-wrap: wrap;
}
/* 背景の明るさ調整用オーバーレイ（必要に応じて） */
.reason-inner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.reason-text {
  position: relative;
  flex: 1 1 550px;
  z-index: 1; /* テキストを前面に */
  padding: 80px;
  border-radius: 8px;
}

/* 画像を非表示に（背景に移行するため） */
.reason-image {
  display: none;
}



@media screen and (max-width: 768px) {
  .reason-inner {
    background-image: none !important;
  }
  .reason-image {
    display: block;
  }
  .reason-text {
    background-color: transparent;
    padding: 10px;
  }
}



    @media (max-width: 768px) { /* 画面幅が768px以下のとき（スマホ表示時） */
      .pc-only {
        display: none; /* そのクラスが付いたbrタグを非表示にする */
      }
    }


















.gentle-treatment {
  background-color: #fffaf5;
  padding: 80px 20px;
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* 格子背景 */
.gentle-treatment::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#f2e2d6 1px, transparent 1px),
                    linear-gradient(90deg, #f2e2d6 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}

.gentle-treatment .container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}


.h2-title::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  /* background: #e0843d; */
}

/* 六角形バッジ */
.pickup-badge {
  position: absolute;
  top: -30px;
  left: 20px;
  background: #ff914d;
  color: #fff;
  padding: 12px 10px;
  width: 60px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.pickup-badge span {
  display: block;
  font-size: 20px;
  font-weight: 700;
}

/* 2カラム */
.treatment-grid {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.treatment-item {
  flex: 1 1 45%;
   max-width: 480px;
  background: #fff;
  border-radius: 12px;
  padding: 30px 20px 20px;
  box-shadow: 0 6px 16px rgba(255, 176, 122, 0.2);
  text-align: left;
  position: relative;
  border: 1px solid #ffe3d2;
}

/* 画像のラップと背景装飾 */
.image-wrapper {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

.image-wrapper img {
  width: 100%;
   max-width: 100%;
  height: auto;
  border-radius: 10px;
  position: relative;
  z-index: 2;
}

.image-bg {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 100%;
  height: 100%;
  background: #ffe3d2;
  border-radius: 10px;
  z-index: 1;
}

/* テキスト装飾 */
.treatment-item h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #d86500;
}

.treatment-item p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

.treatment-item p span.cavios {
  font-weight: bold;
  color: #ff914d;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .treatment-grid {
    flex-direction: column;
    gap: 30px;
  }

  .treatment-item {
    flex: 1 1 100%;
  }

  .pickup-badge {
    top: -20px;
    left: 10px;
  }
}



   @media (max-width: 768px) { /* 画面幅が768px以下のとき（スマホ表示時） */
 .gentle-treatment {
  background-color: #fffaf5;
  padding: 80px 20px;
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
  text-align: center;
  position: relative;
  overflow: hidden;
	 margin-top:-20px;
}
	  .gentle-treatment .container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
		  margin-top:-50px;
}
 
	   
    }












/* テキストブロック */
.treatment-item .text h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #222;
}

.treatment-item .text p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}

.treatment-item .text .cavios {
  color: #de5c85;
  font-weight: bold;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .treatment-item {
    flex: 1 1 100%;
  }

  .gentle-treatment .title {
    font-size: 20px;
  }

  .treatment-item .text h3 {
    font-size: 16px;
  }

  .treatment-item .text p {
    font-size: 13px;
  }
}





body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #fff;
  color: #333;
}

.flex_graph {
	display: flex;
	justify-content: center;
}
.oral-section {
  position: relative; /* relative にすることで::beforeを重ねられる */
/*   display: flex; */
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  padding: 60px 20px;
  background-color: rgba(255, 255, 255, 0.562);
  z-index: 0; /* ::before より上に来るように */
  overflow: hidden;
}

.oral-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 95%;
  background-image: url(http://kurumidental.com/wp-content/uploads/2025/09/0046.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.1; /* ★ここで背景画像だけに透明度を適用！ */
  z-index: -1;  /* 本体の背面に配置 */
}





.oral-text {
  flex: 1 1 800px;
  max-width: 700px;
  margin-top: 100px;
  margin-right: 70px;
}

.oral-text h3 {
  font-size: 1.6rem;
  color: #5a3d2e;
  margin-bottom: 20px;
  font-weight: bold;
}

.oral-text p {
  font-size: 16px;
  line-height: 1.8;
}

.oral-chart {
  position: relative;
  width: 600px;
  height: 600px;
}

.donut-svg {
  width: 100%;
  height: 100%;
}








@media screen and (max-width: 768px) {
  .oral-section {
    flex-direction: column;
    align-items: center;
	  margin-top:-50px;
		  margin-bottom: -50px;
  }

  .oral-chart {
    width: 100%;
    max-width: 320px;  /* ←スマホサイズ内に収める */
    height: auto;
  }

  .donut-svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .oral-text {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .oral-text {
  flex: 1 1 100px;
  max-width: 700px;
  margin-top: 50px;

}
}


@media screen and (max-width: 768px) {
  /* flexを縦並びに変更 */
  .flex_graph {
    flex-direction: column;
    align-items: center; /* 中央揃え */
    gap: 30px; /* 本文と円グラフの隙間 */
  }

  /* 本文ブロックを全幅に */
  .oral-text {
    width: 100%;
    max-width: 100%;
    margin: 0; /* 上下余白をリセット */
    text-align: center; /* 中央揃えにしたい場合 */
  }

  /* 円グラフをスマホ幅に収める */
  .oral-chart {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
  }

  .donut-svg {
    width: 100%;
    height: auto;
    display: block;
  }
}































.director-section {
  background-color: #f8f6f3;
  padding: 40px 20px;
  font-family: "Noto Serif JP", serif;
}

.director-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.director-photo img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.director-profile h2 {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 10px;
}

.director-profile h3 {
  font-size: 20px;
  font-weight: normal;
  color: #b2904d;
  margin-bottom: 20px;
}

.director-profile .message {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
}

/* PC向けレイアウト */
@media screen and (min-width: 768px) {
  .director-container {
    flex-direction: row;
    align-items: flex-start;
  }

  .director-photo {
    flex: 1;
    max-width: 45%;
  }

  .director-profile {
    flex: 1;
    max-width: 55%;
    padding-left: 40px;
  }

  .director-profile h2 {
    font-size: 28px;
  }

  .director-profile h3 {
    font-size: 22px;
  }
}



.treatment-list {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
  font-family: "Noto Serif JP", serif;
	margin-top:-50px;
	margin-bottom:-20px;
}

.treatment-list h2 {
  /* font-size: 28px; */
  margin-bottom: 10px;
}

.treatment-list .subtitle {
  font-size: 16px;
  color: #555;
  margin-bottom: 40px;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
}

.card img {
  width: 100%;
  height: auto;
}

.card h3 {
  font-size: 18px;
  margin: 15px 0;
  color: #333;
}

.card .btn {
  display: inline-block;
  margin-bottom: 20px;
  padding: 10px 20px;
  border: 1px solid #b2904d;
  color: #b2904d;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s ease;
}

.card .btn:hover {
  background-color: #b2904d;
  color: #fff;
}

/* PC表示時：3列 */
@media screen and (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}














































.generation-section {
  padding: 60px 20px;
  background: #fdfdfb;
  font-family: 'Yu Gothic', sans-serif;
  color: #333;
}

.generation-intro {
  max-width: 1000px;
  margin: 0 auto 50px;
  text-align: center;
}

.generation-intro h2 {
  font-size: 2em;
  margin-bottom: 20px;
  color: #8B572A;
  border-bottom: 2px solid #d7c8b3;
  display: inline-block;
  padding-bottom: 5px;
}

.generation-blocks {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.generation-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.generation-block.child .gen-img {
  flex: 1 1 300px;
  max-width: 400px;
}
.generation-block .gen-img img {
  width: 100%;
  border-radius: 12px;
}

.generation-block .gen-text {
  flex: 2 1 500px;
}

.generation-block h3 {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #2b2b2b;
}

.generation-block p {
  margin-bottom: 10px;
  line-height: 1.7;
}

.generation-block ul {
  padding-left: 1em;
}

.generation-block ul li {
  list-style: disc;
  margin-bottom: 5px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .generation-block {
    flex-direction: column;
    text-align: left;
  }
  .generation-intro {
    text-align: left;
  }
  .generation-block h3 {
    font-size: 1.2em;
  }
}

























































/* ----------------------------------------------TOP特徴ブロック---------------------------------------------- */
/* 見出し */
.featurettl {
  color: #644A2F;
  font-size: 1.9rem;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  line-height: 1.5;
  
}
.h2size1 {
  font-size: 38px;
}
.featureline {
  background: linear-gradient(to top, #fff4d1 20%, transparent 24%);
}
/* ここまで */

/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* 見出し */
.featurettl {
	font-size: 17px;
	width: 100%;
	margin: 0 auto;
	}
.h2size1 {
  font-size: 25px;
}
}
.feature-section {
    flex-direction: column;
    padding: 20px 16px;
    font-family: 'Noto Serif JP', serif;
	margin-top:-30px
}

.feature-wrapper {
  display: flex;
  flex-direction: column;
     margin-bottom: 40px;
    padding: 20px 15px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

  .feature-sub {
    font-size: 0.9rem;
    color: #b95b83;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
    padding-left: 1em;
  }

.feature-block.block1{
  position: relative;
  overflow: hidden;
  color: #333;
  background-size: cover;
  background-position: center top;
  min-height: 500px;
}
.feature-block.block2 {
  position: relative;
  overflow: hidden;
  color: #333;
  background-size: cover;
  background-position: left top;
  min-height: 500px;
}

.feature-wrapper:nth-child(1) .feature-block {
  background-image: url('http://kurumidental.com./wp-content/uploads/2025/09/0035_new1-1-scaled.jpg');
}

.feature-wrapper:nth-child(2) .feature-block {
  background-image: url('http://kurumidental.com./wp-content/uploads/2025/09/Feature-Background-02-scaled.jpg');
}

.feature-wrapper:nth-child(3) .feature-block {
  background-image: url('http://kurumidental.com./wp-content/uploads/2025/09/0044_1.jpg');
}

.feature-wrapper:nth-child(4) .feature-block {
  background-image: url('http://kurumidental.com./wp-content/uploads/2025/09/Feature-Background-04-scaled.jpg');
}
.block1 h3,
.block1 p {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 12px rgb(255 255 255);
}
.feature-bg-img {
  display: none;
}

.feature-content {
  position: relative;
  z-index: 2;
  padding: 50px;
  max-width: 50%;
	text-align: center;
}

.feature-heading {
  /* font-family: 'Noto Serif JP', serif; */
  border-bottom: 1px solid #444;
  margin-bottom: 30px;
  padding-bottom: 10px;
  line-height: 1.2;
  color:#644A2F;
}

.sp {
  display: none;
}

.feature-sub {
   .feature-sub {
    font-size: 0.9rem;
    color: #b95b83;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
    padding-left: 1em;
  }

}

.feature-main {
  font-size: 32px;
  display: block;
  margin-top: 5px;
}

.featurehighlight {
  background: linear-gradient(to top, #fff4d1 50%, transparent 50%);
  display: inline-block;
  font-size: 23px;
  font-weight:700;
}
.featurehighlight2 {
  background: linear-gradient(to top, #ffffffa2 50%, transparent 50%);
}

.feature-description {
  font-size: 16px;
  margin-bottom: 30px;
  line-height: 1.8;
  padding: 1.2em;
  border-radius: 8px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(240, 240, 240, 0.3) 100%
  );
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
	text-align:left;
}

.feature-list {
  list-style: none;
  padding-left: 1.2em;
  margin-bottom: 30px;
}

.feature-list li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 1.5em;
  font-size: 15px;
}

.feature-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #d2b556;
  font-weight: bold;
}
.feature-content .feature-button {
  display: inline-block;
  background-color: #fff3e3;
  color: #d17b2e;
  border: 1px solid #d17b2e;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
margin: 20px auto 0 auto; /* 上下は20px、左右はautoで中央寄せ */
	text-align: center;
}

.feature-image {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 260px;
  z-index: 3;
}

.feature-image img {
  width: 100%;
  height: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border-radius: 6px;
  background: #fff;
}
/* ----------------------------------------------------
タブレット（768px～1024px）
---------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .feature-block.block1,
  .feature-block.block2 {
    height: auto;
    background-position: right top;
  }

  .feature-content {
    max-width: 100%;
    background: #ffffffc7;
    margin: 15px;
}
  .feature-bg-img {
    display: none;
  }
  img.sp.featureimg {
    margin: 0 auto;
  }
}

/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media screen and (max-width: 768px) {
  .bottndiv {
    text-align: center;
  }
  .sp {
    display: block;
  }
  .feature-wrapper {
    gap: 60px;
  }
  .feature-block.block1,
  .feature-block.block2 {
    height: auto;
    background-position: left top;
  }
  .feature-bg-img {
    display: block;

  }
  .feature-content {
    max-width: 100%;
	  padding: 20px 5px;
	}
  .feature-description {
	  font-size: 15px;
	  text-shadow: 1px 1px 2px rgb(255, 255, 255);
	  margin: 10px 0;
	  padding:0;
	}
  .feature-image {
    position: static;
    width: 100%;
    margin-top: 20px;
  }
	.feature-main {
	font-size: 20px;
	}
	.feature-sub {
		font-size: 14px;
	}
  .featurehighlight {
	  background: linear-gradient(to top, #fff4d1 30%, transparent 30%);
	  font-size: 18px;
	}
  .feature-content .feature-button {
/*     width:90%; */
  }


    .feature-button:hover {
    background-color: #e285a2;
  }

  .feature-description {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
  }

  .feature-sub::before {
    content: "✓";
    color: #f3a5bd;
    position: absolute;
    left: 0;
  }



@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }

  .feature-content {
    max-width: 100%;
    padding: 20px 10px;
  }

  img.sp.featureimg {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 16px;
    border-radius: 8px;
  }

  .feature-wrapper {
    gap: 20px;
    margin-bottom: 30px;
    padding: 16px;
  }

  .feature-block.block1,
  .feature-block.block2 {
    min-height: auto;
    height: auto;
    background: none;
  }

  .feature-heading {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .feature-description {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    padding: 0;
    margin: 0;
  }
 .feature-button {
display: inline-block;
        background-color: #fff3e3;
        color: #d17b2e;
        border: 1px solid #d17b2e;
        padding: 10px 20px;
        border-radius: 20px;
        font-weight: bold;
        text-decoration: none;
        transition: all 0.3s ease;
        /* align-items:center; は不要なプロパティなので削除を推奨しますが、残しても問題ありません */
        margin: 20px auto 0 auto; /* 上下は20px、左右はautoで中央寄せ */
  }

}















}

/* ----------------------------------------------世代ごとの取り組み---------------------------------------------- */

/* ----------------------------------------------世代ごとの取り組み（子供ブロック）---------------------------------------------- */

/* ----------------------------------------------
  子供ブロック（PC・スマホ両対応）
---------------------------------------------- */
.child-section {
  background: #fff;
  padding: 60px 20px;
  overflow: hidden;
}

.child-inner {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

.child-text {
  flex: 1 1 500px;
  z-index: 2;
}

.child-text h3 {
  font-size: 24px;
  border-bottom: 1px solid #c8b69f;
  padding-bottom: 12px;
  color: #5a4b41;
  margin-bottom: 16px;
}
.child-text h3 span {
  color: #c09355;
  font-weight: bold;
}

.child-text p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 20px;
  color: #333;
}

.child-list {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
}
.child-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  color: #5a4b41;
  margin-bottom: 12px;
}
.child-list .dot {
  position: absolute;
  top: 6px;
  left: 0;
  width: 8px;
  height: 8px;
  background: #d17b2e;
  border-radius: 50%;
}

.child-btn {
  display: inline-block;
  background-color: #fff3e3;
  color: #d17b2e;
  border: 1px solid #d17b2e;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}
.child-btn:hover {
  background-color: #ffe7c2;
}

/* 画像部分 */
.child-images {
  flex: 1 1 500px;
  position: relative;
  min-height: 360px;
  max-width: 500px;
  width: 100%;
}
.child-images img {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s;
}
.child-main {
  top: 0;
  left: 80px;
  width: 260px;
  z-index: 2;
}
.child-sub {
  top: 160px;
  left: 0;
  width: 180px;
  z-index: 1;
}
.child-bg {
  top: 0;
  right: -60px;
  width: 380px;
  z-index: 0;
  opacity: 1;
}

/* スマホ対応 */
 @media screen and (max-width: 768px) {
.child-images-layered {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 280px;
  margin: 0 auto;
}

.child-images-layered img {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* 中央の画像：最前面 */
.img-center {
  top: 0;
  left: 50%;
  width: 55%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0.5;
}

/* 左の画像 */
.img-left {
  top: 20px;
  left: 10%;
  width: 45%;
  z-index: 1;
  opacity: 0.5;
}

/* 右の画像 */
.img-right {
  top: 20px;
  right: 10%;
  width: 45%;
  z-index: 2;
opacity: 0.5;
}

.child-images{
  opacity: 0.35;
}
.child-btn {
  display: inline-block;
  background-color: #fff3e3;
  color: #d17b2e;
  border: 1px solid #d17b2e;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  align-items:center;
 margin-top:20px;
}	 
}



@media screen and (max-width: 768px) {
.child-section {
    background: #fff;
    padding: 30px 20px;
    overflow: hidden;
	margin-top:-50px;
	margin-bottom:-50px;
}
}

@media screen and (max-width: 768px) {
    /* -----------------------------------------------------------------
       ★ 順序変更と h3 の分離：Flexboxのorderとposition: absoluteを使用 ★
       ★ 画像の透明度（opacity）は一切変更していません ★
       ----------------------------------------------------------------- */
    .child-section {
        background: #fff;
        padding: 30px 20px;
        overflow: hidden;
        margin-top: -50px;
        margin-bottom: -50px;
    }

    .child-inner {
        /* Flexboxの縦積みと位置指定の基準 */
        flex-direction: column; 
        align-items: center;
        gap: 20px; /* 隙間を調整 */
        position: relative; /* h3の絶対配置の基準とする */
        padding-top: 130px; /* h3のスペースを空ける */
        flex-wrap: nowrap; /* 念のため折り返しを無効化 */
    }

    /* 1. h3をコンテナから分離し、先頭に絶対配置 */
    .child-text h3 {
        /* Flexboxの制御外に置き、先頭に固定 */
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%); /* 中央寄せ */
        width: calc(100% - 40px); /* 左右のpaddingを考慮した幅 */
        max-width: 500px;
        margin: 0; /* マージンをリセット */
        text-align: left; /* ★既存のPC設定に合わせ左寄せを維持（必要に応じて）★ */
        padding-top: 40px;
        padding-bottom: 12px;
        border-bottom:none;
        z-index: 10;
        box-sizing: border-box;
        font-size: 20px; /* SPサイズに調整 */
    }
    /* 既存のh3 span のスタイルは維持 */

    /* 2. 画像コンテナを2番目（h3の直後）に配置 */
    .child-images {
        order: 1; /* h3はabsoluteで独立。Flex要素としてはこれが最初 */
        flex: none; 
        width: 100%; 
        max-width: 500px;
        min-height: 280px; /* SPでの画像の重なりに必要な最低限の高さ */
        margin: 0 auto;
        /* ★ 画像の透明度（opacity）は既存のPC版/SP版の値を維持します ★ */
    }

    /* 3. テキストコンテナ（本文、リスト、ボタン）を3番目（画像の下）に配置 */
    .child-text {
        order: 2; /* 画像の後に表示 */
        flex: none; 
        width: 100%; 
        max-width: 500px;
        /* h3分離のため、h3以外の要素のマージンを調整 */
        padding-top: 0;
		text-align: center;
    }
    
    /* h3が分離したので、本文・リストはh3の下に配置される */
    .child-text p {
        margin-top: 0; 
        text-align: left; /* テキストは左寄せを維持 */
    }
    .child-list {
        text-align: left; /* リストは左寄せを維持 */
    }

    /* ボタンの調整（既存のSPコードから調整） */
    .child-btn {
        display: inline-block;
        margin-top: 20px;
        /* 中央寄せを維持したい場合は以下の2行を有効化（今回は配置変更のみのため無効化）*/
        /* margin-left: auto; */
        /* margin-right: auto; */
    }
    
    /* ----------------------------------------------
       既存のSPコードの微調整（配置に影響する部分のみ）
       ---------------------------------------------- */
    
    /* 既存のSP画像レイアウトのスタイルはそのまま維持 */
    .child-images img {
        position: absolute;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
    }
    
    /* 既存のSPレイアウトクラスは変更せず、そのまま維持（または削除） */
    .child-images-layered, .img-center, .img-left, .img-right {
        /* 既存のdisplay: none; または元のSPスタイルを維持 */
    }
    
    /* 既存のコードをそのまま維持 */
    .child-images {
        /* opacity: 0.35; の設定は、既存コードに存在するためここでは変更しません */
        opacity: 0.35;
    }
}

















.bannar {
  text-align: center;  /* バナーを中央に配置 */
  margin: 20px 0;      /* バナーの上下に余白を追加 */
}

.bannar img {
  width: 100%;         /* 画像の幅を親要素に合わせて調整 */
  max-width: 800px;    /* 最大幅を800pxに制限 */
  height: auto;        /* 高さを自動調整 */
  display: block;      /* 画像が行内要素にならないように */
  margin: 0 auto;      /* 画像を中央に配置 */
}

.recruit_bannar{
	text-align: center;  /* バナーを中央に配置 */
  margin: 20px 0;      /* バナーの上下に余白を追加 */
}

.recruit_bannar-image{
 width: 100%;         /* 画像の幅を親要素に合わせて調整 */
  max-width: 400px;    /* 最大幅を800pxに制限 */
  height: auto;        /* 高さを自動調整 */
  display: block;      /* 画像が行内要素にならないように */
  margin: 0 auto;      /* 画像を中央に配置 */
}


/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media (max-width: 768px) {
.recruit_bannar-image{
	width: 100%;         /* 画像の幅を親要素に合わせて調整 */
  max-width: 300px;    /* 最大幅を800pxに制限 */
  height: auto;        /* 高さを自動調整 */
  display: block;      /* 画像が行内要素にならないように */
  margin: 0 auto;      /* 画像を中央に配置 */
  }
}

/*-------------------------------------- 症例ブロック --------------------------------------*/
.case-slider {
  background-image: url("../img/casebg.jpg"); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  padding: 10px 0;
/*   margin: 0 auto; */
	margin-top:-50px;
}
.case-slider::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.8);
  z-index: 1;
}
.case-slider > * {
  position: relative;
  z-index: 2;
}

.case-inner {
  gap: 40px;
  max-width: 1300px;
  width: 100%;
  padding: 0 20px;
  margin: 0 auto;
}

/* 見出し */
.case-header {
  text-align: center;
  padding: 5px 20px;
  font-family: "Noto Serif JP", serif;
  color: #5b4633;
}
.case-main {
  font-size: 50px;
  line-height: 1.2;
  font-weight: 400;
  color: #000;
}
.case-main .gold {
  font-size: 2.5rem;
  letter-spacing: 0.03em;
  color: #f57c00; /* オレンジ */
}
.case-main .highlight-line {
  display: inline-block;
  position: relative;
  font-size: 3.5rem;
  margin-top: 10px;
  background: linear-gradient(135deg, #ff9800, #f57c00, #ffb74d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

/* カルーセルブロック */
.case-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.case-carousel::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -30px;
  right: -30px;
  bottom: -20px;
  border-radius: 16px;
  z-index: -1;
}
.case-carousel-track {
  display: flex;
  transition: transform 0.7s ease-out;
  width: 100%;
}
.case-carousel-slide {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 100%;
  box-sizing: border-box;
}
.case-slide {
  display: flex;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 20px;
  border-radius: 12px;
}

/* 症例詳細部分 */
.case-info {
  width: 100%;
  padding: 15px;
}
.case-bfafp {
  max-width: 873px;
  margin: 0 auto;
  padding: 12px;
}
p.case-heading {
  background: #f57c00;
  color: #fff;
  padding: 6px 10px;
  margin: 8px 0;
  font-weight: bold;
  border-radius: 4px;
}
.case-text {
  background: #fff8f1;
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 12px;
  padding: 8px 10px;
  border-left: 4px solid #ffb74d;
}

/* ビフォーアフター */
.case-before-after {
  display: flex;
  justify-content: center;
  max-width: 873px;
  margin: 0 auto 16px;
}
.arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #f57c00;
  padding: 0 5px;
  font-weight: bold;
}
.case-before-after p {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  background-color: #fff8f1;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;
  width: 80px;
  margin: 0 auto 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #f57c00;
}
p.before, p.after {
  position: absolute;
  top: 0;
}
.beforediv,
.afterdiv {
  position: relative;
}
.case-before-after img {
  border-radius: 6px;
  max-width: 100%;
  margin: 0 auto;
  border: 2px solid #ffcc80;
  width:300px;

}

/* ボタン */
.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 30px;
}
.implant-btn {
  display: inline-flex;
  padding: 14px 28px;
  background: linear-gradient(135deg, #ff9800, #f57c00);
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  box-shadow: 0 5px 15px rgba(245, 124, 0, 0.4);
  transition: all 0.3s ease;
}
.implant-btn:hover {
  background: linear-gradient(135deg, #f57c00, #ef6c00);
  box-shadow: 0 6px 18px rgba(245, 124, 0, 0.5);
  transform: translateY(-2px);
}

/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media (max-width: 768px) {
  .case-inner {
    flex-direction: column;
    padding: 0 15px;
    gap: 30px;
  }
  .case-title-area,
  .case-carousel {
    width: 100%;
  }
  .case-carousel-slide {
    gap: 0;
  }
  .case-carousel-track {
    flex-direction: column;
  }
  .case-carousel-slide {
    display: block;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
  }
  .case-slide {
    flex-direction: column;
    margin: 0 auto 40px;
    width: 100%;
  }
  .case-info {
    width: 100%;
    padding: 1px;
	  margin-top:-10px;
  }
  .case-heading {
    font-size: 15px;
    margin-bottom: 5px;
  }
  .case-text {
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
  }
  .case-before-after {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .case-before-after img {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
  }
  .case-before-after p {
    font-size: 12px;
    margin-bottom: 3px;
  }
  .case-before-after p.before,
  .case-before-after p.after {
    position: static;
    margin: 0 auto 6px;
    font-size: 12px;
  }
  .arrow-icon {
    display: none;
  }
  .case-bfafp {
    padding: 10px;
	  margin-right: 15px;
  }
  .case-main {
    font-size: 28px;
    line-height: 1.3;
  }
  .case-main .gold,
  .case-main .highlight-line {
    font-size: 24px;
  }
}




.case-inner {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto !important;   /* ←中央寄せを強制 */
  padding: 0 15px !important;  /* 左右パディングを均等に */
  box-sizing: border-box;      /* パディング込みで幅を計算 */
}

.case-slider, 
.case-carousel, 
.case-slide, 
.case-carousel-slide {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .case-inner {
    flex-direction: column;
    gap: 30px;
    padding: 0 15px !important; /* 左右の余白を揃える */
  }
}



.beforediv,
.afterdiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  height: 250px; /* ここで高さを固定する */
  overflow: hidden; /* 画像がはみ出しても表示しないようにする */
}

.beforediv img,
.afterdiv img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいに表示し、余白をなくす */
}


@media screen and (max-width: 768px) {
  /* スマホでは画像を縦に並べる */
  .case-before-after {
    flex-direction: column;
    gap: 20px;
  }

  .beforediv,
  .afterdiv {
    width: 100%; /* 親要素の幅に合わせて画像エリアを100%にする */
    height: auto; /* 高さを自動調整に戻す */
  }

  /* Before/Afterの画像 */
  .beforediv img,
  .afterdiv img {
    height: auto; /* 画像の高さを自動に設定 */
    max-width: 100%; /* 画像の最大幅を100%に設定 */
    object-fit: contain; /* 縦横比を維持して枠に収める */
  }

  /* 横並びの矢印を非表示にする */
  .case-before-after .arrow-icon {
    display: none;
  }
}


































/* 独自の取り組み */
.clinic-points {
  display: grid;
  grid-template-columns: repeat( 3, 1fr);
  gap: 20px;
  justify-content: center;
  padding: 50px 20px;
  color: #633b3b;
  font-family: 'Noto Serif JP', serif;
    max-width: 1200px;   /* ←追加（お好みで幅調整） */
  margin: 0 auto;      /* ←追加（中央寄せ） */
  
}

.sp-br {
  display: none;
}





.point {
  position: relative;
  background: #ffe9d8;
  padding: 20px;
  border: 1px solid #ffbf8b;
  box-shadow: 0 4px 10px rgba(234, 179, 200, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.point:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(234, 179, 200, 0.3);
}

.point img {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid #f3d9e4;
}

.point h3 {
	position: absolute;
	top: 235px;
	right: -2px;
	font-size: 17px;
	box-shadow: 4px 4px 4px rgba(229, 186, 203, .25);
	padding: 0.3em 3em 0.3em 0.8em;
	background-color: #ffa965;
	color: #783f11;
}
.point h3::after {
  content: "＞";
  position: absolute;
  right: 0.8em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #d86d91; /* アクセントカラー */
  font-weight: bold;
}

.point .gold {
  color: #da7e9b;
  font-size: 23px;
  margin: 0 5px;
}

.point p {
	font-size: 16px;
	line-height: 1.7;
	color: #704a56;
}

@media (max-width: 768px) {
  .hero-text {
    flex-direction: column;
  }

  .hero-overlay {
    flex-direction: column;
    align-items: flex-start;
  }
  .nomalvertical-text {
    writing-mode: horizontal-tb;
    text-align: left;
  }
}

/* タブレット用（768px〜1024px） */
@media (max-width: 1024px) {
  .leading-clinic {
    background-position: center top;
    background-size: cover;
  }
}

/* スマホ用（〜767px） */
@media (max-width: 767px) {
  .leading-clinic {
    background-image: url(http://kurumidental.com./wp-content/uploads/2025/09/equipmentbg_sp.png);
    background-size: cover;
    background-position: center top;
    min-height: auto;
    margin-top:-10px;
  }

    .clinic-points {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px;
    padding: 20px 16px;
    max-width: 100%;
    margin: 0 auto;
  }


	.point h3 {
	  top:200px;
	  font-size: 15px;
	}
}


/* iPad Pro（1024px以上）に対応 */
@media (max-width: 1024px) {
    .point h3 {
        position: relative; /* absoluteからrelativeに変更 */
        top: auto; /* 上の位置を解除 */
        right: auto; /* 右の位置を解除 */
        font-size: 16px; /* フォントサイズを調整 */
        padding: 0.3em 2.5em 0.3em 0.8em; /* パディングを調整 */
        margin-top: 20px; /* 上の余白を追加 */
        margin-left: auto;
        margin-right: auto; /* 左右中央に配置 */
        width: auto; /* 幅を自動調整 */
        box-shadow: 2px 2px 3px rgba(229, 186, 203, .25); /* 少し軽いシャドウ */
    }
}



.map {
  background: linear-gradient(to bottom, #ffffff, #f5f7fa);
  padding: 60px 20px;
}

.map-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 30px;
  box-sizing: border-box;
}

.map-left {
  flex: 1 1 55%;
  min-width: 300px;
}

.map-left iframe {
  width: 100%;
  height: 350px;
  border: 0;
  border-radius: 8px;
}

.map-right {
  flex: 1 1 40%;
  min-width: 260px;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  padding-top: 10px;
}

.map-text {
  margin: 0;
}

/* ---------- レスポンシブ対応 ---------- */
@media (max-width: 768px) {
  .map-box {
    flex-direction: column;
    padding: 20px;
  }
.map {
  background: linear-gradient(to bottom, #ffffff, #f5f7fa);
  padding: 10px 20px;
}
  .map-left iframe {
    height: 300px;
  }

  .map-right {
    padding-top: 0;
    text-align: left;
  }

  .map-text{
    margin: 0;
    font-size: 14px;
}
  }

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .map-box {
    flex-direction: row;
    padding: 24px;
    gap: 20px;
  }

  .map-left {
    flex: 1 1 60%;
  }

  .map-right {
    flex: 1 1 40%;
    font-size: 15px;
    padding-top: 0;
  }

  .map-left iframe {
    height: 320px;
  }

  .map-text {
    font-size: 15px;
    margin-top: 10px;
  }
}




.case-section {
  background-color:white;
  padding: 60px 20px;
  font-family: "Noto Serif JP", serif;
	margin-top:-22px;
	margin-bottom: -50px;
}


.case-text {
  flex: 1;
  color: #333;
}

.case-number {
  font-size: 60px;
  color: #ff943e;
  margin: 0;
  font-weight: bold;
}

.case-text h3 {
  font-size: 24px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.case-highlight {
  color: #fd7e00;
  font-weight: bold;
}

.case-description {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.case-benefits {
  list-style: none;
  padding-left: 0;
  margin-bottom: 30px;
}

.case-benefits li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 16px;
}

.case-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #d64f7a;
}

.case-btn {
  display: inline-block;
  background: #ffa965;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.case-btn:hover {
  background: #ffa965;
}

.case-container {
  display: flex;
  flex-direction: row;  /* 横並びに配置 */
  gap: 40px;  /* テキストと画像の間にスペースを追加 */
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;  /* 垂直方向の中央揃え */
}

.case-container {
  display: flex;
  flex-direction: row;  /* 横並びに配置 */
  gap: 40px;  /* テキストと画像の間にスペースを追加 */
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;  /* 垂直方向の中央揃えをflex-startに変更 */
}

.case-text {
  flex: 1;
  color: #333;
}

.case-image {
  flex: 1;  /* 画像の親要素の横幅を均等にする */
  display: flex;
  justify-content: center;  /* 画像を中央に配置 */
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}

.case-image img {
  width: auto;    /* 横幅を自動調整 */
  height: auto;   /* 高さを自動調整 */
  max-width: 100%; /* 画像の最大幅を100%に設定 */
  object-fit: contain;  /* 画像が切れないように、元の比率を保ちながら表示 */
  margin-top: 100px;
}

.image-placeholder {
  text-align: center;
  color: #aaa;
  font-size: 18px;
  font-weight: bold;
}

/* モバイル版の修正 */
@media screen and (max-width: 768px) {
  .case-container {
    flex-direction: column;  /* スマホでは縦並びに変更 */
  }

  .case-image {
    width: 100%;  /* モバイルで画像の幅を100%に調整 */
  }

  .case-image img {
    width: 100%;
    height: auto;
  }
}

/* モバイル版の修正（既存のCSSに追加または修正） */
@media screen and (max-width: 768px) {
    .case-container {
        flex-direction: column; 
    }
    
    /* ********** 画像の位置変更 ********** */
    /* 症例写真（画像）ブロックを一番上に移動 (order: -1または1など) */
    .case-image {
        order: -1; /* 負の値にすることで、他の要素（デフォルトorder: 0）より前に表示される */
        width: 100%;
        margin-bottom: 30px; /* テキストとの間に適切な余白を追加 */
		margin-top:-80px;
    }

    /* テキストブロックを画像の下に配置 (order: 0 または 1) */
    .case-text {
        order: 0; /* デフォルトの順序 (0) を維持するか、1を設定する */
    }
    /* ********************************** */

    .case-image img {
        width: 100%;
        height: auto;
    }
}




.leadp{
  text-align: center;
}





.featurewrap {
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 16px 16px;
  margin: 0;
  padding: 40px;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
  margin: auto;
}

.feature-card {
  background: #fff;
  padding: 32px 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.feature-text {
  padding: 20px;
  position: relative;
}

.feature-text h3 {
  font-size: 1.3rem;
  margin: 0 0 10px;
  color: #5b4633;
  position: relative;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #9dbbd7;
  padding-bottom: 15px;
}
.feature-text span {
  color: #3b89d1;
  font-size: 1.6rem
}


.feature-card p {
  color: #444;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}
@media screen and (max-width: 768px) {
.featurewrap {
  padding: 10px;
}
}

.line-reservation-container {
  text-align: center; /* 親コンテナで中央揃え */
  margin: 40px auto;
}



.line-reservation {
  background-color: #ffffff; /* 背景を白に統一 */
  padding: 30px 40px; /* 内側のパディング調整 */
  text-align: center;
  border-radius: 10px; /* 角丸を追加して柔らかい印象に */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 微妙な影をつけて浮き立たせる */
  max-width: 800px;
  margin: 0 auto; /* 上下のマージンなし */
}

.line-reservation .reservation-description {
  font-size: 18px;
  color: #555;
  margin-bottom: 15px;
  font-family: 'Arial', sans-serif;
}

.line-reservation .reservation-detail {
  font-size: 16px;
  color: #777;
  margin-bottom: 30px;
  font-family: 'Arial', sans-serif;
}

.qr-code-container {
  text-align: center;
  margin-bottom: 20px;
}

.qr-code {
  width: 180px; /* QRコードのサイズを少し大きめに */
  height: 180px;
  object-fit: cover;
  border-radius: 8px; /* QRコードに丸みを加える */
}

@media (max-width: 768px) {
  .line-reservation {
    padding: 20px 30px; /* モバイル表示時のパディング調整 */
    margin: 20px; /* 上下のマージンを調整 */
  }

  .qr-code {
    width: 220px; /* スマホでより大きくQRコードを表示 */
    height: 220px;
  }
}





/* モバイルだけ改行させる */
@media (max-width: 768px) {
 .sp-br {
    display: block;
  }
}





/*-------------------------------------- ピックアップブロック --------------------------------------*/
.treatment-wrapper {
      max-width: 1300px;
      margin: 0 auto;
      background: #f3f9ff;
      padding: 60px 40px;
      position: relative;
    }
    .treatment-bg-label p{
      font-size: 64px;
      color: rgba(0,0,0,0.1);
      letter-spacing: 0.15em;
      position: absolute;
      top: 0;
      left: 40px;
      z-index: 2;
    }
    .treatment-layout {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      position: relative;
      z-index: 1;
    }
    .treatment-left, .treatment-right {
      flex: 1 1 100%;
    }
      .treatment-left {
        flex: 2;
      }
      .treatment-right {
        flex: 3;
        position: relative;
      padding-right: 8%;
      }
    .treatment-left img {
      width: 100%;
    }
    /* ボタン */
    .viewmore {
      text-align: center;
    }
    .treatment-btn {
        display: inline-block;
        background: linear-gradient(135deg, #004e66 0%, #3ba6d1 50%, #b1e4f5 100%);
        color: white;
        text-align: center;
        padding: 12px 32px;
        font-style: italic;
        font-weight: bold;
        margin-top: 20px;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
    }

    .treatment-btn:hover {
        color: white;
        background: linear-gradient(135deg, #003849 0%, #2c9ec8 50%, #a8e0f0 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    }

    .treatment-ribbon {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #004e66 0%, #3ba6d1 50%, #b1e4f5 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
    }
    .treatment-ribbon span {
      transform: rotate(-45deg);
      color: white;
      font-size: 16px;
      text-align: center;
      line-height: 1.6;
    }
    .treatment-vertical-label {
      position: absolute;
      top: 210px;
      right: 0;
      writing-mode: vertical-rl;
      font-size: 32px;
      color: #004e66;
      line-height: 1.4;
      font-weight: bold;
    }
    .treatment-vertical-label span {
      font-size: 30px;
    }
    .treatment-headline {
      font-size: 24px;
      line-height: 1.8;
      margin-top: 10%;
      margin-bottom: 40px;
    }
    .treatment-box {
      display: flex;
      align-items: flex-start;
      position: relative;
      background: #f7f7f7;
      padding: 20px;
      margin-bottom: 20px;
    }
    .treatment-box img {
      position: absolute;
      top: -10px;
      left: -15px;
      width: 190px;
      height: auto;
      margin-right: 20px;
    }
    .treatment-box strong {
      font-size: 1.2rem;
      display: block;
      margin-bottom: 8px;
    }
    .treatment-box p {
      margin: 0;
      line-height: 1.6;
    }
    .treatment-txt {
      padding: 0 0 0 25%;
    }
    em.under {
      background: linear-gradient(
    to bottom,
    transparent 0,
    transparent 70%,
    rgba(59, 166, 209, 0.3) 70%,
    rgba(59, 166, 209, 0.3) 100%
  );
    }
    /* 逆配置用 */
.treatment-layout.reverse {
  flex-direction: row-reverse;
}

/* ------------------2つ目（逆向き）だけ左側にする */
.treatment-layout.reverse .treatment-ribbon {
  left: -40px;
  right: auto;
}

.treatment-layout.reverse .treatment-vertical-label {
  left: 0;
  right: auto;
  text-align: left;
}
/* 2つ目（.dark）だけ色変える */
.treatment-wrapper.dark {
  background: #f1ede6;
}

.treatment-wrapper.dark .treatment-ribbon {
background: linear-gradient(135deg, #F79428 0%, #FCBB76 50%, #f5e8d0 100%);
box-shadow: 0 4px 10px rgba(180, 140, 100, 0.3);
}
.treatment-wrapper.dark .treatment-ribbon span {
      color: #69492a;
}

.treatment-wrapper.dark .treatment-btn {
  background: linear-gradient(135deg, #F79428 0%, #FCBB76 50%, #f5e8d0 100%);
  color: #69492a;
}

.treatment-wrapper.dark .treatment-btn:hover {
  background: linear-gradient(135deg, #c4a77d 0%, #dec4a1 50%, #f5e8d0 100%);
  color: #69492a;
}
.treatment-wrapper.dark .treatment-bg-label p{
  right: 0;
  left: auto;
}
.treatment-wrapper.dark .treatment-vertical-label {
  color: #2c3e50;
}
.treatment-wrapper.dark .treatment-headline {
  padding-left: 50px;
}
.treatment-wrapper.dark .reverse .treatment-right {
    padding-left: 10%;
    padding-right: 0;
}
.treatment-wrapper.dark .reverse .treatment-right .treatment-vertical-label {
    color: #977c4c;
}
.treatment-wrapper.dark .treatment-headline em.under {
      background: linear-gradient(
  to bottom,
  transparent 0,
  transparent 70%,
  rgba(196, 167, 125, 0.3) 70%,
  rgba(196, 167, 125, 0.3) 100%
);
    }

/* ----------------------------------------------------
スマホ用（〜767px）
---------------------------------------------------- */
@media (max-width: 768px) {
  .treatment-wrapper {
   padding: 60px 15px; 
  }
  .treatment-layout {
  flex-direction: column;
  gap: 20px;
}
.treatment-left, .treatment-right {
  flex: 1 1 100%;
  padding-right: 0;
}
.treatment-headline {
  font-size: 20px;
  margin-bottom: 24px;
  line-height: 1.5;
  text-align: center;
}
.treatment-box {
  padding: 10px 5px;
	flex-direction: column;
	margin: auto;
}

.treatment-box img {
  position: relative;
  top: 0;
  left: 0;
  margin-right: 5px;
  flex:1;
	margin:auto;
	width:80%;
}
.treatment-txt {
  padding: 0;
  flex: 3;
}
.treatment-bg-label p{
  font-size: 2rem;
  width: 100%;
  top:0;
  left: 6%;
}
.treatment-ribbon span {
  font-size: 0.9rem;
}
.treatment-vertical-label {
  position: static;
  writing-mode: initial;
  font-size: 1.5rem;
  font-weight: normal;
  text-align: center;
}
.treatment-vertical-label span {
    font-size: 1.7rem;
}
.viewmore {
  text-align: center;
}
.treatment-ribbon {
  width: 140px;
  height: 140px;
  top: -152px;
  right: 20px;
  font-size: 12px;
}
.treatment-btn {
  width: 100%;
  padding: 14px 0;
  font-size: 16px;
}
.treatment-box strong {
  font-size: 0.8rem;
}
.treatment-box p {
    font-size: 0.9rem;
}
.treatment-layout.reverse {
  flex-direction: column;
}

/* ------------------2つ目（逆向き）だけ左側にする */
.treatment-wrapper.dark .reverse .treatment-right {
  padding: 0;
}
.treatment-wrapper.dark .treatment-headline {
    padding-left: 0;
}
.treatment-wrapper.dark .treatment-ribbon {
    left: -5px;
    top: -180px;
}
}

/* ---------------------------------------------------- タブレット版（iPad Pro含む） ---------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .treatment-wrapper {
    padding: 60px 20px;
    overflow: hidden; /* 横スクロール防止 */
  }
  .treatment-layout {
    flex-direction: row;
    gap: 30px;
  }
  .treatment-left, .treatment-right {
    flex: 1 1 48%;  /* 横並びにし、スペースを確保 */
  }
  .treatment-left {
    flex: 2;
  }
  .treatment-right {
    flex: 3;
    padding-right: 5%;
  }
  .treatment-left img {
    width: 100%;
  }
  .treatment-headline {
    font-size: 22px;
    margin-bottom: 30px;
    line-height: 1.6;
    text-align: center;
  }
  .treatment-box {
    padding: 15px 20px;
  }

  .treatment-box img {
    position: relative;
    top: 0;
    left: 0;
    margin-right: 15px;
    flex: 1;
  }
  .treatment-txt {
    padding: 0 0 0 5%;
  }
  .treatment-bg-label p {
    font-size: 2.5rem;
    width: 100%;
    top: 0;
    left: 8%;
  }
  .treatment-ribbon span {
    font-size: 1rem;
  }
  .treatment-vertical-label {
    position: static;
    writing-mode: initial;
    font-size: 1.8rem;
    font-weight: normal;
    text-align: center;
  }
  .treatment-vertical-label span {
    font-size: 2rem;
  }
  .viewmore {
    text-align: center;
  }
  .treatment-ribbon {
    width: 160px;
    height: 160px;
    top: -130px;
    right: 30px;
    font-size: 14px;
    display: none;
  }
  .treatment-btn {
    width: auto;
    padding: 16px 30px;
    font-size: 18px;
  }
  .treatment-box strong {
    font-size: 1rem;
  }
  .treatment-box p {
    font-size: 16px;
  }
  .treatment-layout.reverse {
    flex-direction: row-reverse;
  }

  /* ------------------2つ目（逆向き）だけ左側にする */
  .treatment-wrapper.dark .reverse .treatment-right {
    padding: 0;
  }
  .treatment-wrapper.dark .treatment-headline {
    padding-left: 0;
  }
  .treatment-wrapper.dark .treatment-ribbon {
    left: -10px;
    top: -150px;
    display: none;
  }
}

/* お知らせ */
.news { padding: 40px 0;  width: 80%; margin: auto;}
.newsttl { font-weight: 700; letter-spacing: .15em; margin-bottom: 12px; display: flex; flex-direction: column;}
.news__list { list-style: none; margin: 0; padding: 0; }
.news__item { border-bottom: 1px solid #eee; padding: 12px 0; }
.news__link { display: flex; gap: 1rem; align-items: baseline; text-decoration: none; }
.news__date { min-width: 7em; font-variant-numeric: tabular-nums; color: #666; }
.news__title { color: #222; }
.news__more { text-align: right; margin-top: 12px; }
.btn-more { display: inline-block; padding: .5em 1em; border: 1px solid #ee7700; color: #ee7700;}
.news span.jp {font-size: 40px; font-family: serif; color: #EE7700;}
@media (max-width: 768px) {
	.news {width: 90% }
	.news span.jp {font-size: 25px;}
}


/*======================================================
   ベーススタイル (メディアクエリの外側) - PC版のルール
======================================================*/
.pc-br {
    /* PC版（デフォルト）では改行タグを表示させる */
    /* <br>タグの既定の表示（インライン要素として機能し、改行する） */
    display: inline !important; 
}


/*======================================================
   モバイル版スタイル (max-width: 768px)
======================================================*/
@media (max-width: 768px) {
    .pc-br {
        /* モバイル版では改行タグを非表示にする（改行しない） */
        display: none !important;
    }
}