/* =====================================
   Page Common
===================================== */

/* -----------------------------
   Page Header
----------------------------- */

.page-header{
    position:relative;
    padding:120px 0;
    text-align:center;
    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.page-header::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(214,129,160,.70);
}

.page-header .container{
    position:relative;
    z-index:2;
}

.page-header .title{
    margin:0;
    color:#fff;
    font-size:3rem;
    font-weight:700;
    letter-spacing:.15em;
}

.page-header .sub{
    margin-top:12px;
    color:rgba(255,255,255,.9);
    font-size:1rem;
    font-weight:700;
    letter-spacing:.2em;
}


/* -----------------------------
   ページ別ヘッダー画像
----------------------------- */

.page-preventive .page-header{
    background-image:url("../img/header_preventive.webp");
}

.page-pediatric .page-header{
    background-image:url("../img/header_pediatric.webp");
}

.page-ortho .page-header{
    background-image:url("../img/header_ortho.webp");
}

.page-cerec .page-header{
    background-image:url("../img/header_cerec.webp");
}

.page-sleep .page-header{
    background-image:url("../img/header_sleep.webp");
}


.page_oral .page-header{
    background-image:url("../img/header_oral.webp");
}


.page-mouth_piece .page-header{
    background-image:url("../img/header_mouth_piece.webp");
}

.page-doctor .page-header{
    background-image:url("../img/header_doctor.webp");
}

.page-about .page-header{
    background-image:url("../img/header_about.webp");
}

.page-recruit .page-header{
    background-image:url("../img/header_recruit.webp");
}


/* -----------------------------
   コンテンツ
----------------------------- */

.content-section{

    padding:80px 0;

}


/* -----------------------------
   リード文
----------------------------- */

.concept-lead{

    font-size:1.35rem;
    font-weight:700;
    color:var(--main-pink);
    text-align:center;
    margin-bottom:50px;

}

/**/
.badge {
    background: var(--main-pink);
    padding: 10px 18px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 10px;
    display: inline-block;
}

/* -----------------------------
   共通カード
----------------------------- */
.rounded {
border-radius: 20px !important;
}
.border{
    border: 1px solid #eee !important;
}

.feature-card{

    background:#fff;
    border:1px solid #f6e3ea;
    border-radius:20px;
    padding:40px;
    margin-bottom:40px;
    box-shadow:0 10px 30px rgba(0,0,0,.04);

}

.feature-card h2{

    color:var(--main-pink);
    font-size:1.6rem;
    margin-bottom:25px;
    padding-bottom:15px;
    border-bottom:1px solid #f3dce4;

}


.info-card { 
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #eee;

}


/* Info Box */
.info-box{
    background: var(--accent-yellow);
    padding: 25px;
    border-radius: 15px;
    margin: 20px 0;
    border: 1px dashed #f3d67b;
    
}

.info-box h3 ,.info-box h4 { 
    
    margin-top: 0;
    font-size: 1.1rem;
    color: #8a6d1a;
    
}


  .arrow { text-align: center; font-size: 2rem; color: #eee; margin: -10px 0 10px; }

  /* Flex Grid */
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;margin: 10px 0 20px;}
  .grid-item { background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #eee;}
  .grid-item h4{color: #c85a75; font-size:17px;font-weight: bold;}
  .grid-item p{margin:0;font-size:15px;}
  
  
  .notice-box { background: #fff5f5; border: 1px solid #feb2b2; padding: 25px; border-radius: 15px; margin-top: 40px; }
  .notice-box h3 { color: #c53030; margin-top: 0; font-size: 1.1rem; }

  /* セレックページ専用スタイル */
  .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 30px 0; }
  .spec-item { background: #fff; padding: 25px; border-radius: 15px; border: 2px solid var(--bg-light); position: relative; }
  .spec-item h3 { color: var(--main-pink); font-size: 1.1rem; margin-top: 0; margin-bottom: 10px; }
  
.card-body {
    padding: 20px;
}
.card-title{
    font-size: 1.1rem;
    color: var(--main-pink);
     font-weight: bold;
    margin: 0;
}
.card-text{
   margin-top: 10px !important;
   line-height: 1.2;
   font-size: 0.9rem;
   margin: 0;
}
  /* 矯正ページ専用の追加スタイル */
  .influence-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; }
  .influence-item { background: var(--bg-light); padding: 25px; border-radius: 15px; border: 1px solid #eee; }
  .influence-item h3 { color: var(--main-pink); margin-top: 0; font-size: 1.1rem; border-bottom: 1px dashed var(--main-pink); padding-bottom: 10px; }

  /* 症例写真エリア */
  .case-study { background: #fdfafb; padding: 30px; border-radius: 20px; text-align: center; margin: 40px 0; }
  .case-images { display: flex; gap: 20px; justify-content: center; margin-top: 20px; }
  .case-img-box { flex: 1; max-width: 300px; }
  .case-img-box img { width: 100%; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }


/* -----------------------------
   写真
----------------------------- */
.facility-item h3 { color: var(--main-pink); border-left: 4px solid var(--main-pink); padding-left: 15px; margin-bottom: 15px; font-size:20px;font-weight: bold;}
.facility-item img { width: 100%; border-radius: 15px; margin-bottom: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.facility-item p{margin-top:2px;}
.access-box { background: var(--bg-light); padding: 40px; border-radius: 20px; margin-top: 60px; display: flex; gap: 30px; }
.map-info { flex: 1; }



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

/* -----------------------------
   治療の流れ：ステップ図
----------------------------- */
.flow-container { margin-top: 40px; }
.flow-step { position: relative; padding-left: 60px; margin-bottom: 30px; }
.flow-step::before {
content: attr(data-step);
position: absolute; left: 0; top: 0;
width: 40px; height: 40px; background: var(--main-pink); color: #fff;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-weight: bold; font-size: 1.2rem;
}
.flow-step::after {
content: ''; position: absolute; left: 19px; top: 45px;
width: 2px; height: calc(100% - 25px); background: #eee;
}
.flow-step:last-child::after { display: none; }
.flow-step h3 { margin: 0 0 10px; color: var(--main-pink); }



/* -----------------------------
   マーカー
----------------------------- */

.highlight{

    background:linear-gradient(
        transparent 65%,
        #ffeaf2 65%
    );

    font-weight:700;

}


/* -----------------------------
   共通ボタン
----------------------------- */

.btn-main{

    display:inline-block;
    padding:15px 35px;
    border-radius:50px;
    background:var(--main-pink);
    color:#fff;
    font-weight:700;
    transition:.3s;

}

.btn-main:hover{

    background:#c86d8d;
    color:#fff;

}



/* -----------------------------
   チェックリスト
----------------------------- */
  .checklist {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.95rem;
  }
  .checklist li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: #444;
  }
  .checklist li::before {
    content: "□";
    position: absolute;
    left: 0;
    color: #c85a75;
    font-weight: bold;
  }
  .checklist li:last-child {
    margin-bottom: 0;
  }


/* -----------------------------
   MAP
----------------------------- */

.map-iframe iframe{

    border-radius:15px;
    overflow:hidden;
    min-height:320px;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
    width:100%;
    height:100%;
    border:0;

}


/* -----------------------------
   CTA
----------------------------- */

.cta-area{

    background:#fff7fa;
    border-radius:30px;
    padding:60px 40px;
    text-align:center;
    margin-top:80px;

}

.cta-area h2{

    color:var(--main-pink);
    margin-bottom:20px;

}


/* -----------------------------
   スマホ
----------------------------- */

@media (max-width:768px){

.page-header{

    padding:70px 0;

}

.page-header h1{

    font-size:2rem;

}

.page-header p{

    font-size:.9rem;

}

.content-section{

    padding:60px 0;

}

.feature-card{

    padding:25px;

}

.concept-lead{

    font-size:1.15rem;

}

.cta-area{

    padding:40px 20px;

}

    .influence-list { grid-template-columns: 1fr; }
    .case-images { flex-direction: column; align-items: center; }
}


/* 
求人ページ専用スタイル 
-----------------------------*/
.recruit-intro { background: #fff5f8; padding: 40px; border-radius: 20px; margin-bottom: 60px; text-align: center; }

.section-h2 { color: var(--main-pink); text-align: center; margin-bottom: 40px; font-size: 1.8rem; }

/* 研修会セクション */
.training-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 80px; }
.training-card { background: #fff; border: 1px solid #eee; border-radius: 15px; overflow: hidden; }
.training-card img { width: 100%; height: 200px; object-fit: cover; }
.training-content { padding: 20px; }
.training-content h3 { margin: 0 0 10px; font-size: 1.1rem; color: var(--main-pink); }
.training-content p { font-size: 0.9rem; margin: 0; }

/* 求人テーブル */
.recruit-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.recruit-table th, .recruit-table td { padding: 20px; border-bottom: 1px solid #eee; text-align: left; }
.recruit-table th { background: var(--bg-light); color: var(--main-pink); width: 30%; font-weight: bold; }

.message-box { border: 2px dashed var(--main-pink); padding: 30px; border-radius: 20px; margin-top: 40px; }
.message-box h3 { margin-top: 0; color: var(--main-pink); text-align: center; }

@media (max-width: 768px) {
.recruit-table th { width: 100%; display: block; padding-bottom: 5px; }
.recruit-table td { display: block; padding-top: 5px; }
}


/* 
院長・スタッフ紹介
-----------------------------*/
/* ボックス全体（横並びの設定） */
.message-box-style-B {
  display: flex;
  align-items: flex-start; /* 写真が小さいため、上揃えにしておくと文章が長くても綺麗に収まります */
  gap: 30px;
  padding: 30px 30px;
  margin: 20px auto;
}

/* 左側の写真エリア（幅を小さく固定） */
.doc-thumb-area {
  flex: 0 0 180px; /* 写真の幅を100pxに */
  text-align: center;
}

/* ★写真を「四角の角丸」に変更 */
.doc-thumb-img {
  width: 164px;
  height: 200px;
  border-radius: 8px; /* 四角を残しつつ、角をほんのり丸く */
  object-fit: cover;
  box-shadow: 2px 2px 2px rgb(0 0 0 / 28%)
}

/* 写真の下の小さめの名前 */
.doc-thumb-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 8px 0 0 0;
  white-space: nowrap;
}

/* 右側のテキストエリア */
.doc-text-area {
  flex: 1;
}

/* 1行目：メインキャッチコピー */
.message-box-style-B .msg-title {
  color: var(--main-pink);
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

/* 2行目：サブキャッチコピー */
.message-box-style-B .msg-sub {
  color: #555555; /* メインと同系色にして、すっきり見せています */
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 15px 0; /* 下の本文との間にすき間を作る */
  line-height: 1.5;
}

/* ★追加：さらに続くサブの文章（本文） */
.message-box-style-B .msg-body {
  color: #555555; /* 本文は落ち着いたグレーで読みやすく */
  font-size: 15px;
  line-height: 1.7; /* 長文でも目が疲れないように行間を広めに */
}

/* 本文内の段落ごとのすき間 */
.message-box-style-B .msg-body p {
  margin: 0 0 10px 0;
}
.message-box-style-B .msg-body p:last-child {
  margin-bottom: 0; /* 最後の段落の下すき間は無しに */
}
.doc-text-area h3{
    color: #514646;
    margin: 10px 0 0;
    padding:8px 4px;
    font-size: 16px;
    background-color:#fdfafb;
}


  .career-list { list-style: none; padding: 0; font-size: 0.95rem;margin-top: 0;}
  .career-list li { margin-bottom: 2px; padding-left: 1em; position: relative; }
  .career-list li::before { content: "・"; position: absolute; left: 0; color: var(--main-pink); font-weight: bold; }

/* 📱 スマホ画面（横幅が狭い端末）での見え方 */
@media (max-width: 600px) {
  .message-box-style-B {
    flex-direction: column; /* スマホでは縦並びにして窮屈さを解消 */
    align-items: center;    /* 写真と名前を中央に */
    text-align: left;       /* 文章は左揃えのまま読みやすく */
    padding: 30px 20px;
  }
  .doc-thumb-area {
    flex: none;
    margin-bottom: 15px;    /* 写真と文字の間のすき間 */
  }
  .message-box-style-B .msg-title {
    font-size: 20px;
    text-align: center;     /* スマホ時は見出しを中央にすると綺麗です */
  }
  .message-box-style-B .msg-sub {
    font-size: 15px;
    text-align: center;
  }
}