/*
Theme Name: 武南クリニック2024
Theme URI: https://yokusuru-demo.com/template10/bunan_clinic/
Version: 1.0
*/


/* ------------------------------
   アーカイブページ用カスタムCSS
------------------------------ */

/* 投稿詳細ページ（single.php）装飾 */
.single-article {
  max-width: 800px;
  margin: 2em auto;
  padding: 2em;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  background-color: #fff;
}

.single-article h1 {
  font-size: 24px;
  font-weight: bold;
  border-left: 6px solid #3f7663;
  padding-left: 0.6em;
  margin-bottom: 0.5em;
  word-break: break-word;
}

.single-article .date {
  color: #999;
  font-size: 14px;
  margin-bottom: 1.5em;
  display: block;
}

.single-article .content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 2em;
  word-wrap: break-word;
}

.single-article .back-link {
  border-top: 1px solid #ccc;
  padding-top: 1em;
  font-size: 14px;
}

.single-article .back-link a {
  color: #3f7663;
  font-weight: bold;
  text-decoration: none;
}

.single-article .back-link a:hover {
  text-decoration: underline;
}

/* 投稿詳細ページ（single.php）装飾 */

    .top-news__tab {
/*        padding: 13px 0 0;*/
        width: 65%;
        /* padding: 13px 0 0; */
        width: 65%;
        display: flex;
        width: 100%;
        justify-content: flex-end;        
    }
    
        .top-news__body {
        margin-top: 0px;
    }
    
    
    /* ブログ詳細ページ（single.php の post 用） */

.single-post .p-magazine .article {
  max-width: 1000px;
  /* max-width: 800px; */
  margin: 2em auto;
  padding: 2em;
  border-radius: 10px;
  background: #f5f8f1;
  border-top: 1px solid #45b078;
  border-bottom: 1px solid #45b078;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* タイトル */
.single-post .p-magazine .article__title {
  font-size: 24px;
  font-weight: bold;
  border-left: 6px solid #45b078;
  padding-left: 0.6em;
  margin-bottom: 0.5em;
  word-break: break-word;
}

/* 日付 */
.single-post .p-magazine .article__date {
  color: #999;
  font-size: 14px;
  margin-bottom: 1.5em;
  display: block;
}

/* 本文 */
.single-post .p-magazine .wyswyg {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 2em;
  word-wrap: break-word;
}

/* 本文内要素 */
.single-post .p-magazine .wyswyg p {
  margin-bottom: 1.5em;
}
.single-post .p-magazine .wyswyg img {
  max-width: 100%;
  height: auto;
  margin: 20px 0;
}
.single-post .p-magazine .wyswyg h2,
.single-post .p-magazine .wyswyg h3 {
  margin: 2em 0 1em;
  font-weight: bold;
}
.single-post .p-magazine .wyswyg ul,
.single-post .p-magazine .wyswyg ol {
  margin-left: 1.2em;
  padding-left: 1em;
}

/* 戻るリンク（必要なら） */
.single-post .p-magazine .back-link {
  border-top: 1px solid #ccc;
  padding-top: 1em;
  font-size: 14px;
}
.single-post .p-magazine .back-link a {
  color: #45b078;
  font-weight: bold;
  text-decoration: none;
}
.single-post .p-magazine .back-link a:hover {
  text-decoration: underline;
}

.single-post .p-magazine .back-link {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #ccc;
}

.single-post .p-magazine .back-link a {
  display: inline-block;
  color: #45b078;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid #45b078;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.single-post .p-magazine .back-link a:hover {
  background: #45b078;
  color: #fff;
}

/* スマホ対応（768px以下） */
@media screen and (max-width: 768px) {
  .single-article {
    padding: 1.2em 1em;
    margin: 1em;
  }

  .single-article h1 {
    font-size: 20px;
    padding-left: 0.5em;
  }

  .single-article .content {
    font-size: 15px;
  }

  .single-article .back-link {
    font-size: 13px;
  }
  
  .top-news__tab {
     margin-top: 0px; 
}

.top-news__tab li {
    width: 50%;
}
  
}




/* ▼ お問い合わせフォーム全体を中央寄せ（ブログ詳細と同じ） */
.contact-form-wrapper {
  max-width: 800px;
  margin: 2em auto;
  padding: 2em;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* ▼ WPForms全体 */
.contact-form-wrapper .wpforms-container {
  margin: 0;
  padding: 0;
}

/* ▼ 各フィールドの余白 */
.contact-form-wrapper .wpforms-field {
  margin-bottom: 24px;
}

/* ▼ 入力欄のデザイン */
.contact-form-wrapper .wpforms-field input[type="text"],
.contact-form-wrapper .wpforms-field input[type="email"],
.contact-form-wrapper .wpforms-field input[type="tel"],
.contact-form-wrapper .wpforms-field textarea,
.contact-form-wrapper .wpforms-field select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

/* ▼ ラベルのスタイル */
.contact-form-wrapper .wpforms-field-label {
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
  color: #333;
}

/* ▼ 必須マーク */
.contact-form-wrapper .wpforms-required-label {
  color: #e53935;
  margin-left: 6px;
}

/* ▼ チェックボックスやラジオボタンラベルの間隔調整 */
.contact-form-wrapper .wpforms-field-label-inline {
  margin-right: 20px;
}

/* ▼ 送信ボタン */
.contact-form-wrapper .wpforms-submit {
  background-color: #45b078;
  color: #fff;
  padding: 10px 30px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}
.contact-form-wrapper .wpforms-submit:hover {
  background-color: #45b078;
}

/* ▼ フォームを中央寄せにするラッパー */
.form-box {
  max-width: 800px;
  margin: 0 auto;
  padding: 2em;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* ▼ WPFormsの各フィールドを整える */
.form-box .wpforms-field {
  margin-bottom: 24px;
}

/* ▼ 入力欄のスタイル */
.form-box .wpforms-field input[type="text"],
.form-box .wpforms-field input[type="email"],
.form-box .wpforms-field input[type="tel"],
.form-box .wpforms-field textarea,
.form-box .wpforms-field select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* ▼ ラベル */
.form-box .wpforms-field-label {
  font-weight: bold;
  margin-bottom: 6px;
  display: block;
  color: #333;
}

/* ▼ 送信ボタン */
.form-box .wpforms-submit {
  background-color: #45b078;
  color: #fff;
  padding: 10px 30px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}

.form-box .wpforms-submit:hover {
  background-color: #45b078;
}

.wpforms-container .wpforms-form .wpforms-field-label, .wpforms-container .wpforms-form .wpforms-field-sublabel, .wpforms-container .wpforms-form .wpforms-field-description, .wpforms-container .wpforms-form textarea, .wpforms-container .wpforms-form li, .wpforms-container .wpforms-form th {
    text-align: left;
}

.iframe-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin-top: 2em;
}
.iframe-wrap iframe {
  display: block;
  width: 100%;
  min-width: 500px; 
  height: 600px;
  border: 0;
}
.iframe-closure {
	display:block;
	width: 100%;
	min-width: 500px;
	height: 600px;
}

.two-column {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.two-column .main-content {
  width: 100%;
  max-width: 720px;
}
.two-column .side-area {
  width: 100%;
  max-width: 300px;
}
@media screen and (max-width: 768px) {
  .two-column {
    flex-direction: column;
  }
  .two-column .main-content,
  .two-column .side-area {
    max-width: 100%;
    width: 100%;
  }
}


/* ================================
   採用情報（recruit）ページ用CSS
   ================================ */

/* ====== 職種リスト（ボタン） ====== */

/* 職種ボタンの一覧をグリッド化 */
.top-trouble_list-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(10px, auto);
  gap: 16px;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .top-trouble_list-box {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}

/* ボタン共通 */
.flow-box_btn {
  display: block;
  background: #45b078;
  color: #ffffff;
  font-weight: bold;
  border: 1px solid #45b078;
  padding: 12px 16px;
  text-align: center;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 2px 4px #465954;
  border-radius: 40px;
}
.flow-box_btn:hover {
  background-color: #53d190;
}

/* 非公開ボタン（グレーアウト） */
.flow-box_btn.flow-box_btn_closed {
  background: #eee;
  color: #aaa;
  border-color: #ccc;
  pointer-events: none;
  box-shadow: none;
  opacity: 0.6;
  cursor: not-allowed;
}

/* ====== 見出し調整 ====== */
.tit01 {
  font-size: 2rem;
  margin-bottom: 1em;
  text-align: center;
}
.tit03 {
  font-size: 1.4rem;
  border-left: 4px solid #478e6c;
  padding-left: 10px;
  margin-top: 40px;
  margin-bottom: 20px;
}

/* ====== テーブル整形 ====== */
.tb04 {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}
.tb04 td {
  border: 1px solid #ccc;
  padding: 20px 30px;
  vertical-align: top;
  font-size: 0.95rem;
}

.tb04 td:first-child {
    width: 20%;
    font-weight: bold;
    text-align: left;
    background-color: #fffee4;
    font-size: 16px;
    word-wrap: break-word;
}
.tb04 td:first-child span {
	font-size: 13px;
}

.tb04 td {
	background-color: #ffffff;
	color: #465954;
}

/* .tb04 tr:nth-child(even) {
  background: #f9f9f9;
} */


/* 応募フォームボタン */

.mt10 {
    margin: 10px 0;
}
.btn02 a {
    display: inline-block;
    position: relative;
    padding: 12px 16px;
    border-radius: 10px;
    line-height: 1;
    color: #fff;
    text-align: center;
    letter-spacing: 0.02em;
    transition: ease-in-out 0.2s;
    background-color: #45b078;
    width: 24%;
    
}
@media screen and (max-width: 640px) {
    .btn02 a {
    display: block;
    width: 100% !important;
  }
}

/* テーブルの横スクロール対応（スマホ） */
.recruit-table-wrapper {
  overflow-x: auto;
}

/* ====== テキストエリア整形 ====== */
.recruit-info .text {
  margin-bottom: 20px;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* ====== 募集なし表示スタイル ====== */
.no-recruitment {
  padding: 20px 0;
  color: #999;
  text-align: center;
}



/* レスポンシブ：スマホ時にテーブルをスクロール可能に */
/* @media screen and (max-width: 768px) {
  .tb04 {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tb04 td {
  border: 1px solid #ccc;
  padding: 10px 10px;
  vertical-align: top;
  font-size: 0.95rem;
}
  .tb04 table {
    width: 100%;
    min-width: 600px;
  }  
  
}

@media screen and (max-width: 768px) {
  .contents-wrapper {
    padding-left: 4%;
    padding-right: 4%;
  }
} */
/* テーブルの横スクロール対応（スマホ） */
.recruit-table-wrapper {
  overflow-x: auto; /* 既に存在しますが、念のため残します */
  -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズにする */
}

/* レスポンシブ：スマホ時にテーブルをスクロール可能に */
@media screen and (max-width: 768px) {
  /* .tb04 (テーブル本体) の親要素である .recruit-table-wrapper にスクロールを適用 */
  /* .tb04 自体には display: block; を適用しない */
    .contents-wrapper {
    padding-left: 20px; /* 左側に15pxのパディングを追加 */
    padding-right: 20px; /* 右側に15pxのパディングを追加 */
  }

  .recruit-table-wrapper {
    display: block; /* ラッパー要素をブロック要素として扱う */
    width: 100%; /* 親要素の幅に合わせる */
    /* overflow-x: auto; と -webkit-overflow-scrolling: touch; は既に外で定義済みなので不要だが、
       もし外の定義が効かない場合はここに含める */
  }

  .tb04 {
    /* ここでは display: block; を削除し、テーブルの特性を維持します */
    width: 100%; /* テーブル自身の幅を親要素に合わせる */
    min-width: 600px; /* ★重要: テーブルのコンテンツが読みにくくならない最低限の幅を設定 */
    margin-bottom: 20px;
    /* 必要に応じて、この min-width の値を調整してください。
       コンテンツが快適に表示される最小の幅を指定します。
       この値より画面幅が狭いと、親の .recruit-table-wrapper で横スクロールが発生します。 */
  }
  
  /* .tb04 td のパディングは既にメディアクエリ内で定義されているのでそのまま */
  .tb04 td {
    border: 1px solid #ccc;
    padding: 10px 10px;
    vertical-align: top;
    font-size: 0.95rem;    
  }
  
  .recruit-info .text {
  margin: 20px 0;
  line-height: 1.7;
  font-size: 0.95rem;
 }

 .mt10 {
    margin: 15px 0;
 }
}

.iframe-wrap iframe {
  width: 965px;
  height: 1000px;
  border: 0;
  transform: scale(0.85); /* PC時 */
  transform-origin: top left;
}

#doc-title {
    display: none;!important
}

@media screen and (max-width: 768px) {
  .iframe-wrap iframe {
	width: 100%;
    transform: scale(0.99);
    height: 1020px;
  }
}



/* スクロールボックスを基準にする */
.tableset--scroll {
  position: relative;
}

/* 置き換え用の固定ヘッダー */
.tp-sticky-head {
  position: sticky;      /* スクロール領域の上に吸着 */
  top: 0;
  z-index: 50;
  background: #fff;      /* 透け防止 */
  pointer-events: none;  /* 下のテーブルがクリックできるように */
}

/* TablePressの見た目に合わせる */
.tp-sticky-head table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;   /* 横ズレ防止のため固定 */
}

/* 見た目を揃える（必要に応じて） */
.tp-sticky-head th {
  background: #fff;
}


@media screen and (max-width: 768px) {
.tableset.tableset--roominfo.tableset--scroll {
    height: 350px;
  }
}	

table#tablepress-22 {
    position: static;
    top: auto;
    margin-top: -59px;
    margin-bottom: 0px;
}

@media screen and (max-width: 767px) {
  .dt-container .dt-layout-cell {
    padding: 0 !important;
  }
}