@charset "utf-8";
/* CSS Document */
.serviceMenuV2{
list-style:none;
padding:0;
margin:0 0 24px;
display:grid;
gap:22px;
}
.serviceMenuV2.sm-row-3{ grid-template-columns:repeat(3, 1fr); }
.serviceMenuV2.sm-row-4{ grid-template-columns:repeat(4, 1fr); }
/* 下段の2枚は中央寄せ（幅は上段の3列と同じ） */
.serviceMenuV2.sm-row-2{
display:flex;
justify-content:center;
gap:22px;
}
.serviceMenuV2.sm-row-2 > li{
flex:0 0 calc((100% - 44px) / 3);
}

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

/* すべてのカードを縦Flexに（詳しく見るを下端に固定） */
.serviceMenuV2 .sm-card{
display:flex;
flex-direction:column;
}

/* === カード共通 === */
.sm-card > a{
display:flex;
flex-direction:column;
flex:1;
height:100%;
background:#fff;
border:1px solid #e8ede9;
border-radius:14px;
padding:28px 28px 24px;
text-decoration:none;
color:#333;
position:relative;
box-shadow:0 6px 20px rgba(0,0,0,0.10);
transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.sm-card > a:hover{
transform:translateY(-4px);
box-shadow:0 12px 28px rgba(0,0,0,0.14);
}

.sm-card .sm-catch{
display:block;
color:rgba(0,96,64,0.85);
font-size:13.5px;
font-weight:bold;
margin-bottom:14px;
line-height:1.5;
letter-spacing:0.02em;
}
.sm-card .sm-title{
display:block;
font-weight:bold;
color:#222;
line-height:1.4;
letter-spacing:0.02em;
margin-bottom:14px;
}
.sm-card .sm-desc{
display:block;
color:#444;
line-height:1.9;
flex:1;
margin-bottom:20px;
}

/* 「詳しく見る」＋丸囲み矢印スタイル（右寄せ） */
.sm-card .sm-more{
display:inline-flex;
align-items:center;
gap:14px;
color:#1e5236;
font-weight:bold;
font-size:13.5px;
align-self:flex-end;
letter-spacing:0.03em;
margin-top:auto;
}
.sm-card .sm-arrow{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
background:#e4e549;
border:1.5px solid #e4e549;
border-radius:50%;
font-size:0;
line-height:1;
transition:background 0.3s ease, border-color 0.3s ease;
flex-shrink:0;
position:relative;
}
.sm-card .sm-arrow::after{
content:"";
width:7px;
height:7px;
border-top:1.5px solid #1e5236;
border-right:1.5px solid #1e5236;
transform:rotate(45deg);
margin-left:-2px;
transition:border-color 0.3s ease;
}
.sm-card > a:hover .sm-arrow{
background:#1e5236;
border-color:#1e5236;
}
.sm-card > a:hover .sm-arrow::after{
border-top-color:#fff;
border-right-color:#fff;
}

/* === 大カード === */
.sm-card-large .sm-title{
font-size:22px;
}
.sm-card-large .sm-desc{
font-size:14.5px;
}

/* === 矯正歯科カード用「矯正歯科の治療方法を選ぶ」誘導ラベル（見た目のみ） === */
.sm-card-ortho{
position:relative;
}
.sm-card-ortho > a{
padding-bottom:0;
overflow:hidden;
}
.sm-card-ortho .sm-ortho-label{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
width:calc(100% + 56px);
margin:20px -28px 0;
padding:14px 20px;
background:#e4e549;
color:#1e5236;
font-size:13px;
font-weight:bold;
line-height:1.4;
letter-spacing:0.05em;
}
.sm-card-ortho .sm-ortho-label-arrow{
display:inline-block;
font-size:14px;
line-height:1;
}

/* === 矯正歯科の子カードエリア（黄色系透過背景） === */
.sm-sub-menu-wrap{
background:rgba(228, 229, 73, 0.10);
border:1px solid rgba(228, 229, 73, 0.30);
border-radius:16px;
padding:22px 24px 12px;
margin:0 0 32px;
position:relative;
}

/* サブメニュー見出し */
.sm-sub-menu-heading{
display:flex;
align-items:center;
gap:12px;
margin-bottom:20px;
}
.sm-sub-menu-heading::before{
content:"";
width:5px;
height:22px;
background:#e4e549;
border-radius:2px;
flex-shrink:0;
}
.sm-sub-menu-label{
color:#1e5236;
font-weight:bold;
font-size:16px;
letter-spacing:0.05em;
line-height:1.4;
}

/* サブメニュー内のグリッド調整（背景リセット） */
.sm-sub-menu-wrap .sm-sub-menu{
padding:0;
background:none;
margin:0;
border-radius:0;
}

/* === 小カード（矯正子メニュー） === */
.sm-card-small > a{
padding:22px 22px 20px;
}
.sm-card-small .sm-catch{
font-size:13.5px;
line-height:1.55;
letter-spacing:-0.01em;
margin-bottom:10px;
}
.sm-card-small .sm-title{
font-size:17px;
margin-bottom:12px;
}
.sm-card-small .sm-desc{
font-size:13.5px;
line-height:1.75;
margin-bottom:16px;
}
.sm-card-small .sm-more{
font-size:12px;
}
.sm-card-small .sm-arrow{
width:28px;
height:28px;
}
.sm-card-small .sm-arrow::after{
width:5px;
height:5px;
margin-left:-1.5px;
}

/* === レスポンシブ === */
@media screen and (max-width:1024px){
.serviceMenuV2.sm-row-4{ grid-template-columns:repeat(2, 1fr); }
}
@media screen and (max-width:768px){
.serviceMenuV2{
gap:14px;
margin-bottom:18px;
}
.serviceMenuV2.sm-row-3,
.serviceMenuV2.sm-row-2{
grid-template-columns:1fr;
}
.serviceMenuV2.sm-row-2{
display:grid;
}
.serviceMenuV2.sm-row-2 > li{
flex:initial;
width:auto;
}
.serviceMenuV2.sm-row-4{
grid-template-columns:repeat(2, 1fr);
gap:12px;
}

.sm-card > a{
padding:22px 20px 20px;
border-radius:12px;
}
.sm-card-large .sm-title{ font-size:19px; margin-bottom:12px; }
.sm-card-large .sm-desc{ font-size:14px; margin-bottom:16px; }

.sm-card-ortho .sm-ortho-label{
width:calc(100% + 40px);
margin:16px -20px 0;
padding:12px 16px;
font-size:12px;
gap:10px;
}
.sm-card-ortho .sm-ortho-label-arrow{
font-size:13px;
}

.sm-sub-menu-wrap{
padding:18px 16px 6px;
border-radius:12px;
margin:0 0 22px;
}
.sm-sub-menu-heading{
margin-bottom:14px;
gap:10px;
}
.sm-sub-menu-heading::before{
width:4px;
height:18px;
}
.sm-sub-menu-label{ font-size:14px; }

.sm-card-small > a{ padding:16px 14px 14px; }
.sm-card-small .sm-catch{ font-size:11px; margin-bottom:8px; }
.sm-card-small .sm-title{ font-size:14.5px; margin-bottom:10px; line-height:1.4; }
.sm-card-small .sm-desc{ font-size:12.5px; line-height:1.7; margin-bottom:12px; }
.sm-card-small .sm-more{ font-size:11px; }
.sm-card-small .sm-arrow{ width:24px; height:24px; }
.sm-card-small .sm-arrow::after{ width:4px; height:4px; margin-left:-1px; }
}

@media screen and (max-width:480px){
.serviceMenuV2.sm-row-4{
grid-template-columns:repeat(2, 1fr);
gap:10px;
}
.sm-card-small > a{ padding:14px 12px 12px; }
.sm-card-small .sm-title{ font-size:13.5px; }
.sm-card-small .sm-desc{ font-size:12px; }
}

/* ==========================================================================
   SP時の並び順調整（矯正歯科カードの直後に子メニューを表示）
   ========================================================================== */
@media screen and (max-width:768px){
.contentsWrapService .contents{
display:flex;
flex-direction:column;
}
.contentsWrapService .ttlBox{ order:0; }

/* 上段・下段の <ul> を透明化して、内側の <li> を親の直接の子として扱う */
.contentsWrapService .serviceMenuV2.sm-row-3,
.contentsWrapService .serviceMenuV2.sm-row-2{
display:contents;
}

/* カード間の縦間隔 */
.contentsWrapService .serviceMenuV2 > li.sm-card{
margin-bottom:14px;
}

/* 並び順の指定 */
.contentsWrapService .serviceMenuV2.sm-row-3 > li:nth-child(1){ order:1; }  /* インプラント */
.contentsWrapService .serviceMenuV2.sm-row-3 > li:nth-child(2){ order:2; }  /* 矯正歯科 */
.contentsWrapService .sm-sub-menu-wrap{ order:3; }
.contentsWrapService .serviceMenuV2.sm-row-3 > li:nth-child(3){ order:4; }  /* セラミックス治療 */
.contentsWrapService .serviceMenuV2.sm-row-2 > li:nth-child(1){ order:5; }  /* 審美歯科 */
.contentsWrapService .serviceMenuV2.sm-row-2 > li:nth-child(2){ order:6; }  /* スポーツ歯科 */
.contentsWrapService .serviceMenuV2.sm-row-2 > li:nth-child(3){ order:7; }  /* マタニティ歯科 */
.contentsWrapService .komeTxt{ order:8; }
}
@media screen and (min-width:769px){
.pc-center{
	text-align: center;
}
	.pcNone{
		display:none;
	}
}
/*トップ理念*/
.fv-section {
  padding: 80px 0 64px;
}

/* ── 左右レイアウト ── */
.fv-layout {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}
.fv-left {
  flex-shrink: 0;
  width: 260px;
}
.fv-right {
  flex: 1;
  min-width: 0;
}

/* ── サブテキスト ── */
.fv-sub {
  font-size: 1.6rem;
  color: #000;
  margin-bottom: 36px;
}

/* ── リスト ── */
.fv-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── 各アイテム ── */
.fv-item {
  padding: 28px 0;
  border-top: 1px solid #e5e5e5;
}
.fv-item:last-child {
  border-bottom: 1px solid #e5e5e5;
}
.fv-item-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.fv-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,96,64,0.08);
  color: rgba(0,96,64,0.90);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.fv-item h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #005C42;
  letter-spacing: .03em;
  border: none;
  padding: 0;
  margin: 0;
}
.fv-item p {
  font-size: 1.6rem;
  line-height: 1.7;
  color: #000;
  margin: 0;
  padding-left: 46px;
}

/* ── SP ── */
@media (max-width: 1081px) {
  .fv-section {
    padding: 80px 0 60px;
  }
  .fv-layout {
    flex-direction: column;
    gap: 24px;
  }
  .fv-left {
    width: 100%;
  }
  .fv-sub {
    font-size: 14px;
    margin-bottom: 28px;
  }
  .fv-item {
    padding: 22px 0;
  }
  .fv-item h3 {
    font-size: 18px;
  }
  .fv-item p {
    font-size: 15px;
    padding-left: 46px;
  }
}

/* コラム*/
.column-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.column-links a {
  display: block;
  padding: 18px 20px 18px 36px;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
  transition: background 0.2s, color 0.2s;
}
.column-links a:first-child {
  border-top: 1px solid #e0e0e0;
}
.column-links a::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-top: 2px solid rgba(0,96,64,0.80);
  border-right: 2px solid rgba(0,96,64,0.80);
}
.column-links a:hover {
  background: #f5faf7;
  color: rgba(0,96,64,0.90);
}
/*バナー*/
.to-consal{
		display: block;
		width:90%;
		max-width:600px;
		margin-left: auto;
		margin-right: auto;
		margin-top:4%;
	margin-bottom:2%;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		border-radius:16px;
	}
	.to-consal img{
		width:100%;
		border-radius:16px;
	}

#reserve:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/about/slide03.jpg) center center/cover no-repeat!important;
  z-index: -1
}
#reserve:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8)!important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 0;
}
#reserve h2,
.shinryoTime dl dt,
.shinryoTime dl dd,
.shinryoTel dl dt,
.shinryoTel dl dd{
color:#333!important;
z-index: 2!important;
}
#reserve h2 span{
color:#005C42!important;	
}
.shinryoTime,
.shinryoTel{
z-index: 2!important;	
}
.shinryoTel dl dd p span a{
color:#333!important;
border-bottom: 1px solid #333!important;
}
.contentsWrapInfo .shinryoInfo{
background: none!important;
}