@charset "utf-8";

/*-------------------------お知らせ-------------------------*/

.news {
  background-color: #f6f6f6;
  padding: 60px 20px;
  margin-top: 40px;
  margin-bottom: 80px;
}

.inner_wrap1 {
  max-width: 1000px;
  margin: 0 auto;
}

.news_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #40c4a0; /* 線の色 */
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.news_head h2 {
  font-size: 20px;
  font-weight: normal;
  color: #333;
}

.news_head h2 .en {
  color: #40c4a0; /* NEWSの緑色 */
  font-weight: bold;
}

.news_btn a {
    display: inline-block;
    padding: 7px 20px;
    font-size: 14px;
    background: #fff;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: relative;
}

.news_btn a::before {
  content: "▶";
  margin-right: 6px;
  font-size: 10px;
  vertical-align: middle;
}

.news_list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news_item {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 16px;
  transition: opacity 0.2s ease;
}

.news_item:hover {
  opacity: 0.7;
}

.news_date {
  color: #40c4a0; /* 日付の緑色 */
  width: 120px;
  font-size: 14px;
  flex-shrink: 0;
}

.news_title {
  font-size: 16px;
}


/*-------------------------お知らせここまで-------------------------*/

.info_bg {
	background-image: url('../img/top_bg1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 0;
  margin-bottom: 120px;
}

.clinic-info {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  background: #fff;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.clinic-left {
  flex: 1 1 330px;
  min-width: 300px;
}

.clinic-map {
  flex: 1 1 500px;
  min-width: 300px;
}

.clinic-name {
  font-size: 30px;
  color: #00b388;
  margin: 0;
  display: inline-block; /* clinic-subの参照基準にする */
  position: relative;
}

.clinic-sub {
  margin: 4px 0 20px;
  font-size: 14px;
  color: #00b388;
  font-family: 'Arial', sans-serif;
  display: block;
  position: relative;
  left: 23%;
  transform: translateX(-60%);
  width: max-content; /* テキスト幅に合わせる */
  margin-top: 4px;
}

.clinic-address {
  margin-bottom: 20px;
  font-size: 14px;
  color: #444;
}

.clinic-contact {
   display: flex;
   align-items: center;
   gap: 30px;
   margin-bottom: 20px;
   background: #59d3b2;
   border: 4px solid #59d3b2;
}

.clinic-contact .reserve {
 background: #ffffff;
    color: #00b388;
    padding: 15px 20px;
    font-size: 20px;
}

.clinic-contact .tel {
  background: #59d3b2;
    color: #fff;
    padding: 8px 14px;
    font-size: 22px;
    font-weight: 300;
    text-decoration: none;
}

.timetable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 14px;
  text-align: center;
  font-weight: 300;
}

.timetable th,
.timetable td {
  border-bottom: 1px solid #ccc;
  padding: 8px;
	font-weight: 300;
}

.timetable thead th:first-child,
.timetable tbody td:first-child {
  text-align: left;
  font-weight: bold;
	font-weight: 300;
}

.note {
  font-size: 13px;
  color: #333;
  margin-bottom: 16px;
}

.desc {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .clinic-info {
    display: block;
  }

  .clinic-map iframe {
    height: 250px;
  }
	
	.clinic-sub {
    left: 34%;
	margin: 0;
}
	
	.clinic-contact .reserve {
    padding: 13px 13px;
    font-size: 20px;
    text-wrap: nowrap;
}
	
	.clinic-contact .tel {
    padding: 8px 14px;
    font-size: 17px;
}
	
	.clinic-contact {
    gap: 10px;
    margin-bottom: 20px;
}
	
	.clinic-address {
    margin-bottom: 10px;
}
	
	.info_bg {
    padding: 60px 20px;
}
	
}

.greeting_flex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 300px;
}

.gf_left {
	width: 59%;
	position: relative;
}

.greeting-text {
  flex: 1 1 55%;
  min-width: 300px;
}

.greeting .ttl {
  font-size: 54px;
  font-weight: 300;
  margin-bottom: 70px;
}

.greeting p .en {
  color: #00b388;
}

.greeting .lead {
  font-size: 24px;
  margin-bottom: 20px;
}

.greeting-text p {
  font-size: 17px;
  margin-bottom: 18px;
}


.greeting-images img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

.img-sub {
  display: flex;
  gap: 20px;
}

.img-sub img {
  width: 50%;
}

.treatment{
    position: absolute;
    top: 74%;
    left: 40%;
    z-index: -1;
	max-width: 40%;
}

.building {
	position: absolute;
    z-index: -2;
    top: 99%;
    left: 80%;
	max-width: 54%;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .greeting {
    flex-direction: column;
  }

  .img-sub {
    flex-direction: column;
	display: none;
  }

  .img-sub img {
    width: 100%;
  }
	
.gf_left {
    width: 100%;
}

.greeting_flex {
	display: block;
	margin-bottom: 100px;
}
	
	.greeting .ttl {
           font-size: 22px;
        margin-bottom: 10px;
        text-wrap: nowrap;
        text-align: center;
}
	
	.greeting .lead {
    font-size: 20px;
}
	
}



.cadcam-section{
      background-image: url('../img/nami_bg.png');
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;
      padding:60px 20px 150px; /* 上部の波を見せる余白を多めに取る */
      border-radius:6px;
    }

    .cadcam-section .wrap{
      max-width:1100px;
      margin:0 auto;
    }

    .cadcam-title{
      text-align:center;
      margin:0 0 18px;
      font-size: 48px;
      font-weight: 400;
      text-wrap: nowrap;
	  margin-top: 163px;
	  margin-bottom: 115px;
	 font-weight: 300;
    }

.cadcam-lead .under_line {
	border-bottom: 1px solid;
    padding-bottom: 5px;
}

    .cadcam-lead{
    text-align: center;
    margin: 0 auto 64px;
    line-height: 1.7;
    font-size: 24px;
    }

    .cadcam-inner{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
    }

    .cadcam-meta{
      min-width:240px;
    }

.cadcam-meta {
    min-width: 240px;
    margin: 0 auto;
}

    .cadcam-meta h3{
      font-size:14px;
      letter-spacing:4px;
      margin:0 0 12px;
    }

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

    .cadcam-list li{
      padding-left:30px;
      position:relative;
      margin-bottom:10px;
      font-size:17px;
    }

    .cadcam-list li:before{
      content:'✓';
      position:absolute;
      left:0;
      top:0;
      width:24px;
      height:24px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      background:#fff;
      border:1px solid #d7e8e1;
      color:#18a48a;
    }

    .cadcam-thumb{
      min-width:220px;
      text-align:right;
      position:relative;
      overflow:visible;
	  max-width: 71%;
    }

    .cadcam-thumb img{
      width:100%;
      border-radius:8px;
      transform: translateX(19%); /* 右にはみ出す量をここで調整 */
      will-change: transform;
    }

    .cadcam-cta{
      text-align:center;
      margin-top:60px;
    }

    .cadcam-btn{
      display:inline-block;
      padding:8px 18px;
      background:#fff;
      border-radius:8px;
      border: 1px solid rgb(0 0 0 / 24%);
      text-decoration:none;
      color:#222;
    }

   .pc_none {
	   display: none;
}

    @media (max-width:800px){
      .cadcam-thumb{
        text-align:center;
		margin: 0 auto;
        max-width: 85%;
      }
		
		.pc_none {
			display: block;
		}
		
   .cadcam-title {
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 20px;
	text-wrap: wrap;
}
		
.cadcam-meta {
    min-width: 240px;
    margin: 0 auto;
}
	
	.ftr-links ul {
    text-wrap: wrap!important;
}
		
	.cadcam-lead {
    font-size: 20px;
}
		
		.cadcam-meta h3 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 3px;
    border-bottom: 1px solid #42b89f;
}
		
		
.cadcam-section{
      padding:60px 20px 50px; /* 上部の波を見せる余白を多めに取る */
}
    }


:root{
  --accent:#18b395;
  --text:#333;
  --muted:#67746f;
  --wrap:1100px;
}

/* セクション全体 */
.features-section{
  padding:150px 20px;
  background:#fff;
}
.features-wrap {
	max-width:var(--wrap);
	margin:0 auto;
}

/* 見出し */
.features-heading {
  font-size:48px;
  text-align:center;
  color:var(--text);
  letter-spacing:2px;
  margin-bottom:40px;
  font-weight:300;
}
.features-heading .accent {
	color:var(--accent);
	letter-spacing:8px;
}

/* 各フィーチャー */
.feature {
  display:flex;
  gap:36px;
  align-items:center;
  margin-bottom:80px;
}
.feature:last-child {
	margin-bottom:0;
}

.ftr_ttl_flex {
	display: flex;
	
}

/* メタ情報（番号・タイトル・説明） */
.feature-meta {
	width:420px;
	min-width:240px
}
.num-wrap {
	display:flex;
	align-items:flex-start;
	gap:18px;
	margin-bottom:12px;
	margin-right: 20px;
}
.num-label {
	font-size:12px;
	color:var(--accent);
	text-transform:uppercase;
	letter-spacing:2px;
}
.num-big {
	font-size:56px;
	color:var(--accent);
	line-height:1;
	font-weight:700;
}
.feature-title {
	font-size:23px;
	color:var(--text);
	margin:0 0 12px;
	line-height:1.5;
	font-weight: 300;
}
.divider {
	height:2px;
	background:#e6f7ef;
	border-radius:2px;
	width:100%;
	margin: 0px 0 30px;
}
.feature-desc {
	line-height:1.9;
	margin:0
}

/* 画像エリア */
.feature-media {
	flex:1;
	text-align:right;
}
.feature-media img{
  width:100%;
  max-width:620px;
  border-radius:10px;
  display:inline-block;
  object-fit:cover;
}

/* 画像左寄せパターン（反転） */
.feature.reverse {
	flex-direction:row-reverse;
}

.feature.reverse .feature-media {
	text-align:left;
}

/* レスポンシブ */
@media (max-width:980px){
  .feature{
    flex-direction:column-reverse;
    align-items:center;
    text-align:center;
  }
  .feature-meta {
	  width:100%;
	  min-width:0;
	  margin-bottom: 20px;
	}
  .feature-media {
	  width:100%;
	  text-align:center;
	}
  .feature.reverse .feature-meta{
	  text-align:center;
	}
	
	.feature-title {
	  text-align: left;
	  font-size: 20px;
	}
	
	.sp_none {
		display: none;
	}
	
	.feature {
		display: block;
	}
	
	.feature-desc {
    text-align: left;
}
	
	.features-section {
    padding: 100px 20px;
}
}

/* 微調整（必要なら数値を変えてください） */
@media (max-width:640px){
  .features-heading {
	  font-size:22px;
	  margin-bottom:20px;
	}
  .num-big {
	  font-size:44px;
	}
  .feature {gap:20px;
	  margin-bottom:80px;
	}
	
	{
        font-size: 26px;
        margin-bottom: 28px;
    }
}

.medical-bg {
  position: relative;
  background: url('../img/back.jpg') no-repeat center center / cover;
  padding: 60px 0;
  z-index: 1;
  overflow: hidden; /* 擬似要素がはみ出さないように */
}

.medical-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
  z-index: -1; /* 背景の下に配置 */
}

.medical {
  max-width: 1200px;
  margin: 0 auto;
}

.medical-title {
  font-size: 28px;
  margin-bottom: 40px;
  font-weight: 600;
}
.medical-title span {
  color: #00bfa5; /* 医療系ミントカラー */
}

.medical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}

.medical-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
  background: #fff url("../img/texture.png"); /* 背景テクスチャ画像 */
  background-size: cover;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  text-decoration: none;
  color: #333;
  transition: transform .2s, box-shadow .2s;
}

.medical-card img {
      margin-top: 10px;
    margin-bottom: 20px;
}

.medical-card h3 {
  font-size: 16px;
  margin: 0;
}
.medical-card p {
  font-size: 12px;
  color: #555;
  margin: 6px 0 0;
  letter-spacing: .15em;
}

/* 右下の緑三角 */
.medical-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-width: 0 0 16px 16px;
  border-style: solid;
  border-color: transparent transparent #00bfa5 transparent;
  border-bottom-left-radius: 2px;
}

/* 押下アニメーション */
.medical-card:active {
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}


.medical-title {
    text-align: center;
    font-size: 48px;
    margin-bottom: 80px;
    font-weight: 300;
    padding-top: 110px;
}

.medical-title span {
  color: #00bfa5;
}

/* 上部カード */
.medical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(181px, 1fr));
  gap: 24px;
  margin-bottom: 60px;
  background: #ffffff;
  padding: 30px;
}

.medical-card h3 {
  margin: 0;
  font-size: 16px;
}
.medical-card p {
  margin: 6px 0 0;
  font-size: 12px;
  color: #555;
  letter-spacing: .15em;
}
.medical-card::after {
  content: "";
  position: absolute;
      right: 10px;
    bottom: 10px;
  border-width: 0 0 16px 16px;
  border-style: solid;
  border-color: transparent transparent #00bfa5 transparent;
}
.medical-card:active {
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* 下部詳細 */
.medical-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 60px;
}
@media (max-width: 960px){
  .medical-detail { grid-template-columns: 1fr; gap: 44px; }
}

.md-chip {
       margin: 0 auto 40px;
    padding: 20px 20px;
    background: #59d3b2;
    color: #fff;
    font-weight: 700;
    letter-spacing: .35em;
    text-align: center;
    border-radius: 10px;
    font-size: 24px;
}
.md-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
  align-items: start;
}
@media (max-width: 720px){
  .md-body { grid-template-columns: 1fr; }
	
	.cadcam-thumb img {
     transform: translateX(0%);
}
	
	.medical-title {
    text-align: center;
    font-size: 22px;
    margin-bottom: 40px;
    font-weight: 300;
    padding-top: 0px;
}
	
	.md-chip {
    font-size: 20px;
}
	
	.cadcam-meta h3 {
    font-size: 18px;
    margin-bottom: 25px;
    padding-bottom: 5px;
}
}
.md-photo img {
  width: 100%;
  display: block;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(16,24,40,.12);
}
.md-text {
  color: #475256;
  line-height: 1.9;
  font-size: 15px;
  text-align: left;
}
.md-text p { margin: 0 0 10px; color: #444;}


/*------------------------- CAD/CAM冠メリット -------------------------*/

.cadcam-meta h3 {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #42b89f; /* 細いグリーンの下線 */
  color: #333;
}

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

.cadcam-list li {
  position: relative;
  color: #333;
  line-height: 1.8;
  padding-left: 40px; /* アイコン分余白 */
  margin-bottom: 15px;
}

.cadcam-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 24px;
  height: 24px;
  background: url("../img/tf_icon.png") no-repeat center center;
  background-size: contain;
}


@media (max-width: 720px){
    .cadcam-meta h3 {
        font-size: 20px;
        margin-bottom: 10px;
        padding-bottom: 5px;
	}
	
	.ftr-links {
        display: block;
    }
	
}