@charset "utf-8";

/*
Theme Name: 医療法人山口整形外科クリニック
Description: 医療法人山口整形外科クリニックのテーマ
Author:Sugimedical
Version:1.0
Text Domain:yamaguchi orthopaedic clinic
*/

:root {
   /* カラー */
   --txt_color: #323232;
   --base_color_1: #FFFFFF;
   --base_color_2: #EDEDED;
   --base_color_3: #EEECE0;
   --base_color_4: #B9B9B9;
   --base_color_5: #F9F9F9;
   --main_color_1: #1094C4;
   --main_color_2: #2CB8DF;
   --main_color_3: #62B9D8;
   --main_color_4: #4CAFD3;
   --accent_color_1: #F15222;
   --border_yellow_1: #EBEE2D;


   /* フォントの太さ */
   --fontweight_bold: bold;
   --fontweight_normal: normal;


   /* フォントサイズ */
   --fontsize_08: 0.8rem;
   --fontsize_1: 1.0rem;
   --fontsize_12: 1.2rem;
   --fontsize_14: 1.4rem;
   --fontsize_16: 1.6rem;
   --fontsize_18: 1.8rem;
   --fontsize_20: 2.0rem;
   --fontsize_22: 2.2rem;
   --fontsize_24: 2.4rem;
   --fontsize_26: 2.6rem;
   --fontsize_28: 2.8rem;
   --fontsize_30: 3.0rem;
   --fontsize_32: 3.2rem;
   --fontsize_34: 3.4rem;
   --fontsize_36: 3.6rem;
   --fontsize_38: 3.8rem;
   --fontsize_40: 4.0rem;
   --fontsize_42: 4.2rem;


   /* シャドウ */
   --box_shadow_black_blur: 4px 4px 10px rgb(0, 0, 0, 10%);
   --box_shadow_black_blur_0: 15px 15px 0 rgb(131, 131, 131, 25%);

   --text_shadow1: 2px 2px 0px rgba(255, 255, 255, 1);
   --text_shadow2: 1px 2px 3px rgba(255, 255, 255, 0.8);


   /* ホバー */
   --transition_time: 0.2s;
   /* 変化の時間 */
   --hover_opacity: 0.8;
   /* ホバー時の透明度 */


   /* border-width */
   --border_width_1: 1px;
   --border_width_2: 2px;
   --border_width_3: 3px;
   --border_width_4: 4px;
   --border_width_5: 5px;

   /* letter-spacing */
   --letterspacing_01: 0.1em;
   --letterspacing_02: 0.2em;

   /* border-radius */
   --border_radius_5: 5px;
   --border_radius_10: 10px;
   --border_radius_20: 20px;


   /* フォント */
   --serif: 'Yu Mincho', YuMincho, 游明朝, 游明朝体, serif;
   --sans_serif: 'Yu Gothic', sans-serif;
   /* --sans_serif: Meiryo, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'MS PGothic', sans-serif; */
   --pacifico: 'Pacifico', cursive;
}

html {
   font-family: var(--sans_serif);
   text-align: justify;
   color: var(--txt_color);
   scroll-behavior: smooth;
}

a {
   color: var(--txt_color);
}

/* ホバーした時に透明度を変更する ここから */
.hover_opacity {
   transition: all var(--transition_time);

   &:hover {
      opacity: var(--hover_opacity);
   }
}

/* ホバーした時に透明度を変更する ここまで */

/* 見出し　ここから */
.index_h2 {
   text-align: center;
   margin-bottom: 40px;
}

.page_h2 {
   text-align: center;
   margin-bottom: 40px;
   padding: 20px;
   background-color: var(--main_color_1);
   color: var(--base_color_1);
   border-radius: var(--border_radius_10);
}

.page_h3 {
   border-left: 8px solid var(--main_color_1);
   padding: 10px 0 10px 10px;
   border-bottom: var(--border_width_2)solid var(--main_color_1);
   margin-bottom: 30px;
}

/* 見出し　ここまで */


/* 文字左寄せ */
.txt_left {
   text-align: left;
}

/* 文字中央寄せ */
.txt_center {
   text-align: center;
}

/* 文字右寄せ */
.txt_right {
   text-align: right;
}

/* 文字サイズ中 */
.fontsize_big {
   font-size: var(--fontsize_20);
}

/* 文字サイズ大 */
.fontsize_bigger {
   font-size: var(--fontsize_22);
}

/* 文字サイズ特大 */
.fontsize_biggest {
   font-size: var(--fontsize_24);
}

/* フォントの太さ　ここから */
.fontweight_bold {
   font-weight: var(--fontweight_bold);
}

.fontweight_normal {
   font-weight: var(--fontweight_normal);
}

/* フォントの太さ　ここまで */

/* 余白を設定するためのクラス　ここから */

/* 余白 */
.inner0_20 {
   margin: 0 20px;

   @media(min-width:768px) {
      margin: 0 40px;
   }

   @media(min-width:1024px) {
      margin: 0 60px;
   }

   @media(min-width:1280px) {
      width: 1200px;
      margin: 0 auto;
   }
}

.in_inner {
   margin: 0 30px;

   @media(min-width:768px) {
      margin: 0 40px;
   }
}

.mb10_0 {
   margin: 10px 0;
}

.mb20_0 {
   margin: 20px 0;
}

.mb30_0 {
   margin: 30px 0;
}

.mb40_0 {
   margin: 40px 0;
}

.mb50_0 {
   margin: 50px 0;
}

.mb60_0 {
   margin: 60px 0;
}

.mb70_0 {
   margin: 70px 0;
}

.mb80_0 {
   margin: 80px 0;
}

.mb90_0 {
   margin: 90px 0;
}

.mb100_0 {
   margin: 100px 0;
}

.pb10_0 {
   padding: 10px 0;
}

.pb20_0 {
   padding: 20px 0;
}

.pb30_0 {
   padding: 30px 0;
}

.pb40_0 {
   padding: 40px 0;
}

.pb50_0 {
   padding: 50px 0;
}

.pb60_0 {
   padding: 60px 0;
}

.pb70_0 {
   padding: 70px 0;
}

.pb80_0 {
   padding: 80px 0;
}

.pb90_0 {
   padding: 90px 0;
}

.pb100_0 {
   padding: 100px 0;
}

/* 余白を設定するためのクラス　ここまで */

/* 見出しの下線　spanに設定すること　ここから */
.heading_under_line {
   border-bottom: var(--border_width_5)solid var(--main_color_1);
   padding-bottom: 2px;
   display: inline-block;
}

/* 見出しの下線　spanに設定すること　ここまで */

/* マーカーを引く ここから*/
.marker_under {
   background: linear-gradient(transparent 60%, #ecca2f 0%);
   display: inline;
   padding: 0 1px 0px;
   font-size: var(--fontsize_18);
   font-weight: var(--fontweight_bold);
}

/* マーカーを引く ここまで */

/* 下線のリンク ここから */
.under_line_link {
   text-decoration: underline;
   text-underline-offset: 0.3em;
   text-decoration-color: var(--txt_color);
}

/* 下線のリンク ここまで */

.caution {
   color: var(--accent_color_1);
}

/* 円形リスト　ここから */
.circle_ul {
   padding-left: 40px;
   margin: 30px 0;
   font-size: var(--fontsize_22);

   li {
      position: relative;
      margin: 10px 0;

      &:before {
         position: absolute;
         content: '●';
         top: 2px;
         left: -22px;
         border-radius: 50%;
         font-size: var(--fontsize_18);
         color: var(--main_color_1);
         /* transform: translateY(-50%); */
         /* width: 12px; */
         /* height: 12px; */
         /* background-color: var(--main_color_1); */

      }
   }
}

/* 円形リスト　ここまで */

/* 定義リスト　ここから */
.definition_list {
   dt {
      background-color: var(--main_color_4);
      color: var(--base_color_1);
      padding: 5px;
      text-align: center;
      font-weight: var(--fontweight_bold);
      margin-bottom: 10px;
   }
}

/* 定義リスト　ここまで */

/* 数字リスト　ここから */
.number_ol {
   counter-reset: listnum;

   /* カウンターをリセット */
   li {
      text-indent: -1em;
      padding-left: 1em;

      /* 標準のスタイルは消す */
      &::before {
         counter-increment: listnum;
         /* counter-resetと同じ文字列 */
         /* content: counter(listnum); */
         content: counter(listnum)".";
         /* 半角スペースを入れて""の中にピリオドを追加 */
         padding-right: 10px;
         color: var(--main_color_4);
         /* vertical-align: middle; */
         font-size: var(--fontsize_26);
         font-family: var(--pacifico);
         font-weight: var(--fontweight_bold);
      }
   }
}

/* 数字リスト　ここまで */

/* 塗りの電話ボタン ここから */
.tel_btn {
   background-color: var(--accent_color_1);
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
   border-radius: 9999px;
   width: 270px;
   font-weight: var(--fontweight_bold);
   margin: 30px auto;

   a {
      color: var(--base_color_1);
      font-size: var(--fontsize_20);

      img {
         width: 30px;
         margin-right: 10px;
      }
   }
}

/* 塗りの電話ボタン ここまで */

/* 線の電話ボタン ここから */
.tel_btn_line {
   background: none;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
   border-radius: 9999px;
   width: 270px;
   font-weight: var(--fontweight_bold);
   margin: 30px auto;
   border: var(--border_width_2) solid var(--base_color_1);

   a {
      color: var(--base_color_1);
      font-size: var(--fontsize_20);

      img {
         width: 30px;
         margin-right: 10px;
      }
   }
}

/* 線の電話ボタン ここまで */


/* 右矢印の塗りのボタン　ここから */
.btn_fill {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--accent_color_1);
   color: var(--base_color_1);
   padding: 22px 40px;
   margin: 30px auto;
   width: 80%;
   border-radius: 9999px;
   /* 丸みのあるボタン */
   font-weight: var(--fontweight_bold);
   transition: transform var(--transition_time), opacity var(--transition_time);
   column-gap: 10px;
   /* アイコンとテキストの間隔 */
   position: relative;
   text-align: center;
   font-size: var(--fontsize_20);

   @media (min-width: 1024px) {
      width: 300px;
   }
}

/* 右矢印の作成 */
.btn_fill::after {
   content: '';
   display: inline-block;
   width: 8px;
   height: 8px;
   border-top: var(--border_width_2) solid var(--base_color_1);
   border-right: var(--border_width_2) solid var(--base_color_1);
   transform: rotate(45deg);
   margin-left: 10px;
   margin-right: 5px;
   /* 位置調整 */
   transition: transform var(--transition_time) ease;
   position: absolute;
   right: 20px;
}

/* ホバー時の挙動 */
.btn_fill:hover {
   opacity: var(--hover_opacity);
}

.btn_fill:hover::after {
   transform: translateX(5px) rotate(45deg);
   /* 右に少し動く */
}

/* 右矢印の塗りのボタン　ここまで */

/* 右矢印の線のボタン　ここから */
.btn_line {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--base_color_1);
   color: var(--accent_color_1);
   border: var(--border_width_2) solid var(--accent_color_1);
   padding: 22px 40px;
   margin: 30px auto;
   width: 80%;

   border-radius: 9999px;
   /* 丸みのあるボタン */
   font-weight: var(--fontweight_bold);
   transition: transform var(--transition_time), opacity var(--transition_time);
   column-gap: 10px;
   /* アイコンとテキストの間隔 */
   position: relative;
   text-align: center;
   font-size: var(--fontsize_20);

   @media (min-width: 1024px) {
      width: 300px;
   }
}

/* 右矢印の作成 */
.btn_line::after {
   content: '';
   display: inline-block;
   width: 8px;
   height: 8px;
   border-top: var(--border_width_2) solid var(--accent_color_1);
   border-right: var(--border_width_2) solid var(--accent_color_1);
   transform: rotate(45deg);
   margin-left: 10px;
   margin-right: 5px;
   /* 位置調整 */
   transition: transform var(--transition_time) ease;
   position: absolute;
   right: 20px;
}

/* ホバー時の挙動 */
.btn_line:hover {
   opacity: var(--hover_opacity);
}

.btn_line:hover::after {
   transform: translateX(5px) rotate(45deg);
   /* 右に少し動く */
}

/* 右矢印の線のボタン　ここまで */

/* テーブル1　ここから */
.table_block_1 {

   table {
      margin-bottom: 20px;
      border: var(--border_width_1) solid var(--base_color_4);
   }

   th,
   td {
      border: 1px solid var(--base_color_4);
      padding: 10px;
      text-align: center;
      vertical-align: middle;
   }

   th {
      background-color: var(--main_color_1);
      color: var(--base_color_1);
   }

   td {
      color: var(--main_color_1);
      font-weight: var(--fontweight_bold);

      &:first-child {
         color: var(--txt_color);
         font-size: var(--fontsize_14);
      }
   }

   .holiday {
      font-weight: var(--fontweight_bold);

      .holiday_bg {
         color: var(--txt_color);
         background-color: var(--base_color_3);
         border-radius: var(--border_radius_5);
         padding: 5px;
         /* 見栄え調整 */
      }
   }
}

/* テーブル1　ここまで */

/* ワクチン接種テーブル　ここから */
.vaccine_table_1 {
   border: var(--border_width_1) solid var(--base_color_4);

   th,
   td {
      border: 1px solid var(--base_color_4);
      padding: 10px;
      text-align: center;
      vertical-align: middle;
   }

   th {
      background-color: var(--base_color_3);
   }

   .tr_first {
      .th_first {
         width: 40%;
      }

      .th_second {
         width: 30%;
      }

      .th_third {
         width: 30%;
      }
   }
}

/* ワクチン接種テーブル　ここまで */

/*==================================================
スライダーのためのcss
===================================*/
.slider_block {
   position: relative;

   .slider {
      position: relative;
      z-index: 1;
      /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
      height: 70vh;

      /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      @media (min-width: 1280px) {
         height: 80vh;
      }
   }

   /*　背景画像設定　*/

   .slider-item01 {
      background: url(../yamaguchi-orthopaedic/assets/img/mv_img_1.webp);
      background-position: -180px;

      @media (min-width: 1024px) {
         background-position: center;
      }
   }

   .slider-item02 {
      background: url(../yamaguchi-orthopaedic/assets/img/mv_img_2.webp);

      @media (min-width: 1024px) {
         background-position: center;
      }
   }

   .slider-item03 {
      background: url(../yamaguchi-orthopaedic/assets/img/mv_img_3.webp);

      @media (min-width: 1024px) {
         background-position: center;
      }
   }

   .slider-item {
      width: 100%;
      /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
      height: 70vh;
      /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      background-repeat: no-repeat;
      /*背景画像をリピートしない*/
      /* background-position: center; */
      /*背景画像の位置を中央に*/
      background-size: cover;

      /*背景画像が.slider-item全体を覆い表示*/
      @media (min-width: 1280px) {
         height: 80vh;
      }
   }
}

/*矢印の設定*/

.slick-prev,
.slick-next {
   position: absolute;
   z-index: 3;
   top: 42%;
   cursor: pointer;
   /*マウスカーソルを指マークに*/
   outline: none;
   /*クリックをしたら出てくる枠線を消す*/
   border-top: 3px solid #fff;
   /*矢印の色*/
   border-right: 3px solid #fff;
   /*矢印の色*/
   height: 25px;
   width: 25px;
   display: none !important;

   @media (min-width:768px) {
      display: block !important;
   }
}

.slick-prev {
   /*戻る矢印の位置と形状*/
   left: 2.5%;
   transform: rotate(-135deg);
}

.slick-next {
   /*次へ矢印の位置と形状*/
   right: 2.5%;
   transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
   position: relative;
   z-index: 3;
   text-align: center;
   margin: -50px 0 0 0;
   /*ドットの位置*/
}

.slick-dots li {
   display: inline-block;
   margin: 0 5px;
}

.slick-dots button {
   color: transparent;
   outline: none;
   width: 15px;
   /*ドットボタンのサイズ*/
   height: 15px;
   /*ドットボタンのサイズ*/
   display: block;
   border-radius: 50%;
   background: #fff;
   /*ドットボタンの色*/
}

.slick-dots .slick-active button {
   background: var(--txt_color);
   /*ドットボタンの現在地表示の色*/
}

.catch_copy_block {
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
   color: var(--base_color_1);
   z-index: 2;
   writing-mode: vertical-rl;
   height: 310px;

   .catch_copy_block_1 {
      p {
         background-color: rgba(16, 148, 196, 89%);
         padding: 10px 0;
         margin: 0 5px;
         font-size: var(--fontsize_16);
         display: inline-block;
         width: 100%;
         letter-spacing: var(--letterspacing_02);
         font-weight: var(--fontweight_bold);
      }
   }

   .catch_copy_block_2 {
      p {
         background-color: rgba(16, 148, 196, 89%);
         padding: 10px 0;
         margin: 0 5px;
         font-size: var(--fontsize_14);
         display: inline-block;
         width: 100%;
         letter-spacing: var(--letterspacing_02);
      }
   }
}

/* ヘッダー　ここから */
header {
   .tel_btn {
      margin: 5px auto 10px;
      padding: 10px;
   }
}

/* ヘッダー　ここまで */

/* ヒーローヘッダー　ここから */
.p_hero_block {
   background-color: var(--main_color_4);
   height: 300px;

   .page_h1 {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      color: var(--base_color_1);
   }
}

/* ヒーローヘッダー　ここまで */
/* パンくずリスト　ここから */
#breadcrumb {
   margin-left: 10px;
}

/* パンくずリスト　ここまで */


/*========= PC ナビゲーションドロップダウンメニュー ===============*/
/*==ナビゲーション全体の設定*/
.header_nav {
   text-align: center;
   margin: 20px 0;
   display: none;
}

@media (min-width: 1024px) {
   .header_nav {
      display: block;
      margin: 40px 0 20px;
   }
}

.header_nav ul {
   list-style: none;
   display: flex;
   justify-content: center;
}

.header_nav ul span {
   font-size: 1.4rem;
   color: #757575;
}

.header_nav ul ul {
   display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
.header_nav ul li {
   position: relative;
   /* border-left: 1px solid #dddddd; */
   padding: 5px 20px;
   transition: all 0.2s;
   font-weight: var(--fontweight_bold);
}

@media (min-width: 1280px) {
   .header_nav ul li {
      padding: 5px 20px;
   }
}

/* .header_nav ul li:last-of-type {
   border-right: 2px solid #dddddd;
} */

/*ナビゲーションのリンク設定*/
.header_nav ul li a {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-decoration: none;
   font-size: var(--fontsize_20);
}

.header_nav ul li li a {
   padding: 10px 35px;
}

/*==矢印の設定*/
/*2階層目を持つliの矢印の設定*/
.header_nav ul li.has-child::before {
   content: "";
   position: absolute;
   left: 12px;
   top: 15px;
   width: 6px;
   height: 6px;
   transform: rotate(135deg);
}

@media (min-width: 1024px) {
   .header_nav ul li.has-child::before {
      left: 7px;
      top: 15px;
      display: none;
   }
}

/*3階層目を持つliの矢印の設定*/
/* .header_nav ul ul li.has-child::before {
   content: '';
   position: absolute;
   left: 6px;
   top: 17px;
   width: 6px;
   height: 6px;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   transform: rotate(45deg);
} */
/*== 2・3階層目の共通設定 */
/*下の階層を持っているulの指定*/
.header_nav li.has-child ul {
   position: absolute;
   left: 0;
   top: 45px;
   z-index: 4;
   visibility: hidden;
   opacity: 0;
   transition: all 0.3s;
   width: 100%;
   background-color: #EDEDED;
   color: #68686F;
   width: 200px;
   border-radius: 10px;
   padding: 10px;
}

.header_nav li.has-child ul li {
   margin: 0;
   padding: 0;
   border: none;
   font-weight: var(--fontweight_normal);
}

.header_nav li.has-child ul li a {
   padding: 5px 0;
}

/*hoverしたら表示*/
.header_nav li.has-child:hover>ul,
.header_nav li.has-child ul li:hover>ul,
.header_nav li.has-child:active>ul,
.header_nav li.has-child ul li:active>ul {
   visibility: visible;
   opacity: 1;
}

/*ナビゲーションaタグの形状*/
.header_nav li.has-child ul li a {
   color: #68686F;
   border-bottom: 1px solid #323232;
   /* border-right: 1px solid white;
   border-left: 1px solid white; */
   line-height: 1.6;
}

.header_nav li.has-child ul li a:hover,
.header_nav li.has-child ul li a:active {
   opacity: 0.8;
}

/*==3階層目*/
/*3階層目の位置*/
/* .header_nav li.has-child ul ul {
   top: 0;
   left: 182px;
   background: #66adf5;
}
.header_nav li.has-child ul ul li a:hover,
.header_nav li.has-child ul ul li a:active {
   background: #448ed3;
} */
/*========= PC ナビゲーションドロップダウンメニュー　ここまで ===============*/


/* シングルページ　ここから */
.post_block_common {
   position: relative;
   background-color: #f5f5f5;
}

.post_block_common .columns #sidebar #new_article .title_list li {
   margin: 5px 0;
}

/* 前後の記事プレビュー　ここから */
.previous_next_post {
   display: flex;
   justify-content: space-between;
   margin: 20px 0;
}

.previous_next_post .post_link {
   text-decoration: underline;
}

/* 前後の記事プレビュー　ここから */
/* シングルページ　ここまで */

/* アーカイブページ　ここから */
#archive article {
   margin: 10px 0;
   border-bottom: 1px solid #323232;
}

/*wp-pagenavi 17*/
.wp-pagenavi {
   clear: both;
   text-align: center;
   margin: 20px 0 30px;
}

.wp-pagenavi a,
.wp-pagenavi span {
   color: #686e6f;
   background-color: #FFFFFF;
   padding: 8px 15px;
   margin: 0 2px;
   white-space: nowrap;
   -webkit-transition: 0.2s ease-in-out;
   -moz-transition: 0.2s ease-in-out;
   -o-transition: 0.2s ease-in-out;
   transition: 0.2s ease-in-out;
   text-align: center;
   text-decoration: none;
   border: thin dotted #686e6f;
}

.wp-pagenavi a:hover {
   color: #fff;
   background-color: #686e6f;
}

.wp-pagenavi span.current {
   color: #fff;
   background-color: #686e6f;
}

/* アーカイブページ　ここまで */
/* サイドバー　ここから */
#sidebar {
   h2 {
      margin-bottom: 20px;
   }
}

/* サイドバー　ここまで */

/* トップページ　ここから */
.logo_img {
   width: 300px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
}




#index_points {
   margin: 120px 0 80px;

   .index_h2 {

      span {
         border-bottom: 1px solid var(--main_color_1);
         border-width: var(--border_width_5);
         padding-bottom: 2px;
         font-size: var(--fontsize_32);
      }
   }

   .columns_1 {
      position: relative;

      /* z-index: 2; */
      &:before {
         position: absolute;
         content: "";
         top: -10%;
         left: 0;
         width: 90%;
         height: 100%;
         background-color: var(--base_color_3);
         z-index: -1;
      }

      .index_h3 {
         position: relative;
         padding-left: 40px;
         color: var(--main_color_1);
         margin-bottom: 30px;
         font-size: var(--fontsize_24);

         &:before {
            position: absolute;
            content: '1';
            color: var(--main_color_1);
            left: 0;
            background-color: var(--base_color_1);
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border-radius: var(--border_radius_5);
            font-size: var(--fontsize_30);
         }
      }
   }

   .columns_2 {
      position: relative;
      margin: 130px 0;

      /* z-index: 2; */
      &:before {
         position: absolute;
         content: "";
         top: -10%;
         right: 0;
         width: 90%;
         height: 100%;
         background-color: var(--base_color_3);
         z-index: -1;
      }

      .index_h3 {
         position: relative;
         padding-left: 40px;
         color: var(--main_color_1);
         margin-bottom: 30px;
         font-size: var(--fontsize_24);

         &:before {
            position: absolute;
            content: '2';
            color: var(--main_color_1);
            left: 0;
            background-color: var(--base_color_1);
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border-radius: var(--border_radius_5);
            font-size: var(--fontsize_30);
         }
      }
   }

   .columns_3 {
      position: relative;
      margin: 130px 0 0;

      /* z-index: 2; */
      &:before {
         position: absolute;
         content: "";
         top: -10%;
         left: 0;
         width: 90%;
         height: 100%;
         background-color: var(--base_color_3);
         z-index: -1;
      }

      .index_h3 {
         position: relative;
         padding-left: 40px;
         color: var(--main_color_1);
         margin-bottom: 30px;
         font-size: var(--fontsize_24);

         &:before {
            position: absolute;
            content: '3';
            color: var(--main_color_1);
            left: 0;
            background-color: var(--base_color_1);
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border-radius: var(--border_radius_5);
            font-size: var(--fontsize_30);
         }
      }
   }
}

#index_philosophy {
   .index_h3 {
      text-align: center;
   }

   .img_block {
      position: relative;

      p {
         position: absolute;
         content: '';
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
         text-align: center;
         background-color: rgba(255, 255, 255, 0.78);
         width: 100%;
         padding: 10px;
         font-weight: var(--fontweight_bold);
      }
   }
}

#index_medical_information {
   .columns {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;

      .img_block {
         width: calc(100% / 2.2);

         .img {
            background-color: var(--base_color_2);
            border-radius: var(--border_radius_10);
            transition: all 0.5s;

            &:hover {
               transform: rotate(3deg);
            }
         }
      }
   }
}


#index_news {
   background-color: var(--base_color_5);
   box-shadow: var(--box_shadow_black_blur_0);

   .date_title {
      margin: 20px 0;
   }
}


/* トップページ ここまで */

/* クリニック案内 ここから */
#p_about {
   #equipment_block {
      .img {
         margin: 30px 0;

         img {
            box-shadow: var(--box_shadow_black_blur);
            object-fit: cover;
            height: 300px;
         }
      }
   }

   .rehabilitation_situation_block {
      img {
         box-shadow: var(--box_shadow_black_blur);
      }

      .recommend {
         span {
            font-size: var(--fontsize_24);
         }
      }
   }
}

/* 院内設備紹介スライダー ここから */

.slider_setup .slide_inner {
   text-align: center;
   position: relative;
}

.slider_setup .slide_inner .caption {
   position: absolute;
   content: '';
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   background-color: rgba(78, 78, 78, 0.8);
   width: 100%;
   padding: 10px;
   /* margin-top: 10px; */
   font-weight: bold;
   font-size: var(--fontsize_18);
   color: var(--base_color_1);
}

.slider_setup {
   position: relative;
   margin: 0 auto;
   max-width: 600px;
   /* 必要に応じて調整 */
   height: 770px;
}

.slider_main img {
   width: 100%;
   height: 620px;
   /* 高さを固定 */
   object-fit: cover;
   /* 画像の比率を保ちつつトリミング */
   vertical-align: top;
}

.slider_thumb {
   margin-top: 20px;
   /* メインとサムネイルの間隔を詰める */
   height: 80px;
}

.slider_thumb img {
   width: 100%;
   height: 80px;
   /* サムネイルの高さを固定 */
   object-fit: cover;
   /* 画像の比率を保ちつつトリミング */
   vertical-align: top;
}

.slider_thumb .slick-slide {
   margin: 0 5px;
   /* サムネイル間の間隔 */
   cursor: pointer;
   opacity: 0.6;
   transition: opacity 0.3s;
}

.slider_thumb .slick-slide:hover,
.slider_thumb .slick-current {
   opacity: 1;
   /* アクティブおよびホバー時は不透明 */
}

.slick-slide {
   height: 620px;
}

/* 院内設備紹介スライダー ここまで */

/* スライダー矢印（サムネイル横） */
.slider_thumb .slick-prev,
.slider_thumb .slick-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   z-index: 2;
   width: 30px;
   height: 30px;
   background-color: var(--base_color_4);
   /* グレーの背景（仮）後で調整可 */
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
}


/* 矢印アイコン（擬似要素で作成） */
.slider_thumb .slick-prev::before,
.slider_thumb .slick-next::before {
   position: absolute;
   content: '';
   width: 8px;
   height: 8px;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   display: block;
   top: 10px;
   left: 7px;
}

.slider_thumb .slick-prev {
   left: -40px;
}

.slider_thumb .slick-prev::before {
   transform: rotate(-135deg);
   margin-left: 4px;
}

.slider_thumb .slick-next {
   right: -40px;
}

.slider_thumb .slick-next::before {
   transform: rotate(45deg);
   margin-right: 4px;
}


/* クリニック案内 ここまで */

/* 初めての方へ ここから */
#p_first {
   .first_time_inner_block {
      background-color: var(--base_color_3);
      padding: 30px;
      border-radius: var(--border_radius_10);

      .heading {
         font-weight: var(--fontweight_bold);
         color: var(--main_color_1);
         margin-bottom: 30px;
      }
   }

   .belongings_block {
      img {
         box-shadow: var(--box_shadow_black_blur);
      }
   }

   .flow_block {
      .flow_inner_block {
         background-color: var(--base_color_2);
         border-radius: var(--border_radius_10);
         padding: 20px;
      }

      .flow_inner_block_1 {
         h4 {
            position: relative;
            padding-left: 40px;

            &:before {
               position: absolute;
               content: '1';
               color: var(--main_color_1);
               background-color: var(--base_color_1);
               border-radius: var(--border_radius_5);
               padding: 10px;
               top: 50%;
               transform: translateY(-50%);
               left: 0px;
               width: 15px;
               height: 15px;
               line-height: 15px;
               text-align: center;
               font-size: var(--fontsize_22);
            }
         }
      }

      .flow_inner_block_2 {
         background-color: var(--base_color_3);

         h4 {
            position: relative;
            padding-left: 40px;

            &:before {
               position: absolute;
               content: '2';
               color: var(--main_color_1);
               background-color: var(--base_color_1);
               border-radius: var(--border_radius_5);
               padding: 10px;
               top: 50%;
               transform: translateY(-50%);
               left: -5px;
               width: 15px;
               height: 15px;
               line-height: 15px;
               text-align: center;
               font-size: var(--fontsize_22);
            }
         }
      }

      .flow_inner_block_3 {
         h4 {
            position: relative;
            padding-left: 40px;

            &:before {
               position: absolute;
               content: '3';
               color: var(--main_color_1);
               background-color: var(--base_color_1);
               border-radius: var(--border_radius_5);
               padding: 10px;
               top: 50%;
               transform: translateY(-50%);
               left: -5px;
               width: 15px;
               height: 15px;
               line-height: 15px;
               text-align: center;
               font-size: var(--fontsize_22);
            }
         }
      }

      .flow_inner_block_4 {
         background-color: var(--base_color_3);

         h4 {
            position: relative;
            padding-left: 40px;

            &:before {
               position: absolute;
               content: '4';
               color: var(--main_color_1);
               background-color: var(--base_color_1);
               border-radius: var(--border_radius_5);
               padding: 10px;
               top: 50%;
               transform: translateY(-50%);
               left: -5px;
               width: 15px;
               height: 15px;
               line-height: 15px;
               text-align: center;
               font-size: var(--fontsize_22);
            }
         }
      }

      .flow_inner_block_5 {
         h4 {
            position: relative;
            padding-left: 40px;

            &:before {
               position: absolute;
               content: '5';
               color: var(--main_color_1);
               background-color: var(--base_color_1);
               border-radius: var(--border_radius_5);
               padding: 10px;
               top: 50%;
               transform: translateY(-50%);
               left: -5px;
               width: 15px;
               height: 15px;
               line-height: 15px;
               text-align: center;
               font-size: var(--fontsize_22);
            }
         }
      }

      .flow_inner_block_6 {
         background-color: var(--base_color_3);

         h4 {
            position: relative;
            padding-left: 40px;

            &:before {
               position: absolute;
               content: '6';
               color: var(--main_color_1);
               background-color: var(--base_color_1);
               border-radius: var(--border_radius_5);
               padding: 10px;
               top: 50%;
               transform: translateY(-50%);
               left: -5px;
               width: 15px;
               height: 15px;
               line-height: 15px;
               text-align: center;
               font-size: var(--fontsize_22);
            }
         }
      }
   }
}

/* 初めての方へ ここまで */

/*　よくあるご質問　ここから　*/
#p_qa {
   .qa_inner_block {
      h3 {
         position: relative;
         margin: 0 0 30px 50px;
         padding-bottom: 10px;
         border-bottom: var(--border_width_2) solid var(--main_color_1);

         &:before {
            position: absolute;
            content: 'Q';
            color: var(--base_color_1);
            background-color: var(--main_color_1);
            border-radius: var(--border_radius_5);
            padding: 10px;
            top: 50%;
            transform: translateY(-60%);
            left: -45px;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            font-family: var(--pacifico);
         }
      }

      p {
         position: relative;
         padding-left: 60px;
         font-weight: var(--fontweight_bold);

         &:before {
            position: absolute;
            content: 'A';
            color: var(--base_color_1);
            background-color: var(--accent_color_1);
            border-radius: var(--border_radius_5);
            padding: 10px;
            top: 50%;
            transform: translateY(-50%);
            left: 15px;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            font-family: var(--pacifico);
         }
      }


      .vaccine_table_1_block {
         h3 {
            margin-left: 0;

            &:before {
               display: none;
            }
         }
      }
   }

}

/*　よくあるご質問　ここまで　*/

/*　診療案内　ここから　*/
#p_medical_information {
   .medical_subject_block {
      .marker_under {
         font-size: var(--fontsize_22);
      }
   }

   #disease_block {
      img {
         box-shadow: var(--box_shadow_black_blur);
      }
   }

   #symptoms_block {
      .img {
         position: relative;
         margin: 30px 0;
         overflow: hidden;
         /* &:before{
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
         } */

         &:hover img {
            transform: scale(1.1);
            /* 拡大 */
            opacity: 0.8;
            /* transition: transform .6s ease; */
         }

         img {
            /* border: var(--border_width_4) solid var(--main_color_2); */
            height: auto;
            transition: transform .6s ease;
            /* ゆっくり変化させる */
         }

         span {
            position: absolute;
            content: '';
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(255, 255, 255, 0.8);
            width: 100%;
            text-align: center;
            padding: 10px;
            font-size: var(--fontsize_18);
            font-weight: var(--fontweight_bold);
            /* border-left: var(--border_width_4) solid var(--main_color_2); */
            /* border-right: var(--border_width_4) solid var(--main_color_2); */
         }
      }
   }
}

/*　診療案内　ここまで　*/

/*　院長紹介　ここから　*/
#p_profile {
   .greeting_block {
      img {
         margin: 30px 0;
         box-shadow: var(--box_shadow_black_blur);
      }
   }

   .doctor_name {
      margin-top: 20px;
   }

   .career_block {
      .definition_list_block {
         margin: 20px 0;

         dt {
            background-color: var(--main_color_4);
            color: var(--base_color_1);
            padding: 5px;
            text-align: center;
            font-weight: var(--fontweight_bold);
            margin-bottom: 10px;
         }
      }
   }
}

/*　院長紹介　ここまで　*/

/*　アクセス・診療時間　ここから　*/
#p_access {
   .access_block {
      .left {
         margin: 30px 0;

         img {
            border: var(--border_width_5) solid var(--base_color_3)
         }
      }
   }

   #index_medical_subject {
      .inner0_20 {
         margin: 0;

         .columns {
            .left {
               display: none;
            }

            .right {
               .index_h2 {
                  text-align: center;
                  margin-bottom: 40px;
                  padding: 20px;
                  background-color: var(--main_color_1);
                  color: var(--base_color_1);
                  border-radius: var(--border_radius_10);
               }
            }
         }
      }
   }
}

/*　アクセス・診療時間　ここまで　*/

/*　個人情報保護方針　ここから　*/
#p_privacy_policy {
   .additional_notes_inner_block {
      border: var(--border_width_1)solid var(--main_color_1);
      padding: 30px;
   }
}

/*　個人情報保護方針　ここまで　*/



/* フッター ここから */
footer {
   margin: 60px 0 0;

   .footer_h3 {
      background-color: var(--base_color_2);
      padding: 2px 10px;

      img {
         width: 40px;
         margin-right: 5px;
      }
   }

   .footer_bottom {
      background-color: var(--main_color_3);
      padding: 20px 20px 60px;

      .columns_top {
         .tel_btn_line {
            margin: 10px auto 20px;
            padding: 10px;
         }
      }

      .columns_bottom {
         li {
            margin: 2px 0;

            a {
               color: var(--base_color_1);
               font-size: var(--fontsize_14);
            }
         }

         .columns_bottom_ul_child {

            li {
               position: relative;
               padding-left: 35px;

               &:before {
                  position: absolute;
                  content: '';
                  background-color: var(--base_color_1);
                  width: 10px;
                  height: 1px;
                  top: 50%;
                  left: 20px;
                  transform: translateY(-50%);
               }
            }
         }
      }

      .table_block_1 {
         table {
            background-color: var(--base_color_1);
            border: none;

            tr {
               th {
                  background-color: var(--base_color_1);
                  color: var(--txt_color);
                  border: var(--border_width_1)solid var(--main_color_3);
                  color: var(--main_color_3);
               }

               td {
                  border: var(--border_width_1)solid var(--main_color_3);
                  color: var(--main_color_3);
               }
            }
         }

         .holiday {
            color: var(--base_color_1);

            .holiday_bg {
               background-color: var(--base_color_1);
               color: var(--main_color_3);
            }
         }

         p {
            color: var(--base_color_1);
         }
      }
   }

   .copyright {
      font-size: var(--fontsize_12);
      margin-top: 60px;
      color: var(--base_color_1);
   }
}

/* メニューをページ下部に固定 ここから */
#fixed_menu {
   position: fixed;
   width: 100%;
   bottom: 0px;
   opacity: 0.95;
   font-size: 1.4rem;
   z-index: 2;

   .tel_btn {
      width: 100%;
   }
}

@media (min-width: 1024px) {
   #fixed_menu {
      display: none;
   }
}

#fixed_menu .img {
   display: flex;
   justify-content: center;
}

#fixed_menu .img img {
   width: 20px;
   text-align: center;
}

/*メニューを横並びにする*/
#fixed_menu ul {
   display: flex;
   list-style: none;
   padding-top: 0;
   margin: 0 auto;
   width: 90%;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

}


#fixed_menu ul li {
   width: 50%;
   padding: 0;
   margin: 0;
   text-align: center;
   line-height: 1.3;
}

#fixed_menu ul li .tel_btn,
#fixed_menu ul li .link_btn {
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   padding: 10px;
   border-radius: 0;
   margin: 0;
}

#fixed_menu ul li .tel_btn img {
   width: 20px;
   margin-right: 5px;
}

#fixed_menu li:first-of-type {
   border-right: 2px solid #fff;
}


#fixed_menu li:first-of-type .link_btn {
   background-color: rgba(44, 184, 223, 0.9);
   border-radius: 5px 0 0 0;
}

#fixed_menu li:last-of-type .tel_btn {
   background-color: rgba(16, 148, 196, 0.9);
   border-radius: 0 5px 0 0;
}

/* メニューをページ下部に固定 ここまで */

/* フッター　ここまで */


/* ハンバーガーメニュー　ここから */
.menu-toggle {
   cursor: pointer;
   /* Initially hidden */
   padding: 10px;
   position: fixed;
   top: 10px;
   right: 5px;
   background-color: none;
   border-radius: 5px;
   z-index: 5;
}

.menu-toggle span {
   display: block;
   width: 35px;
   height: 3px;
   margin: 7px 0;
   background-color: #1094C4;
   transition: 0.4s;
}

.menu-toggle.open span:nth-child(1) {
   transform: rotate(-45deg) translate(-6px, 6px);
   background-color: white;
}

.menu-toggle.open span:nth-child(2) {
   opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
   transform: rotate(45deg) translate(-8px, -8px);
   background-color: white;
}

.menu {
   display: flex;
   flex-direction: column;
   position: fixed;
   top: 0;
   right: -100%;
   /* Initially hidden off-screen */
   width: 250px;
   height: 100%;
   background-color: #1094C4;
   /* Blue background */
   border-left: 1px solid #ccc;
   transition: right 0.4s ease;
   z-index: 4;
   margin: 0;
   text-align: left;
   overflow-y: auto;
}

.menu img {
   width: 20px;
   margin-right: 5px;
}

.menu.open {
   right: 0;
   /* Slide in from the right */
}

.menu ul {
   list-style-type: none;
   padding: 0;
   padding-top: 60px;
   display: block;
   font-size: 1.4rem;
   background-color: #1094C4;
}

.menu li {
   border-bottom: 1px solid white;
   border-left: none;
   border-right: none !important;
   position: relative;
}

.menu a {
   display: block;
   padding: 10px;
   text-decoration: none;
   color: white;
}

.menu a:hover {
   background-color: #1094C4;
}

.menu .tel_btn {
   background: none;
   font-size: 1.6rem;
   margin: 10px 0;
}

.submenu {
   display: none;
   padding-left: 20px;
   margin-top: 0 !important;
   padding-top: 0 !important;
}

.submenu li {
   border: none;
   margin: 2px 5px;
}

.accordion-link {
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   margin-bottom: 5px;
}

.accordion-icon {
   font-size: 2rem;
   transition: transform 0.4s;
   color: white;
   position: absolute;
   top: 7px;
   right: 15px;
   padding: 0 10px 4px 10px;
   z-index: 1;
}

.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   /* Dark overlay */
   z-index: 3;
   display: none;
   transition: opacity 0.4s;
}

.overlay.open {
   display: block;
   opacity: 1;
}

.accordion-toggle.active .accordion-icon {
   transform: rotate(0deg);
}

@media (min-width: 1024px) {
   .menu-toggle {
      display: none;
      /* Hide on larger screens */
   }
}

@media (max-width: 1025px) {
   .menu-toggle {
      display: block;
      /* Show on smaller screens */
   }
}

/* ハンバーガーメニュー　ここまで */


/* ページトップリンク　ここから */
/*リンクの形状*/
#page-top a {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #929292;
   border-radius: 0;
   width: 45px;
   height: 45px;
   color: #fff;
   text-align: center;
   text-transform: uppercase;
   text-decoration: none;
   transition: all 0.3s;

   @media (min-width: 1024px) {
      width: 55px;
      height: 55px;
   }
}

#page-top a:hover {
   opacity: 0.8;
}

#page-top a:before {
   position: absolute;
   content: '';
   top: 50%;
   left: 50%;
   width: 13px;
   height: 13px;
   border-left: 3px solid white;
   border-bottom: 3px solid white;
   transform: translate(-50%, -30%) rotate(135deg);
   z-index: 1;
}

/*リンクを右下に固定*/
#page-top {
   position: fixed;
   right: 10px;
   bottom: 50px;
   z-index: 2;
   /*はじめは非表示*/
   opacity: 0;
   transform: translateY(100px);

   @media (min-width: 1024px) {
      bottom: 40px;
   }
}

/*　上に上がる動き　*/
#page-top.UpMove {
   animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
   from {
      opacity: 0;
      transform: translateY(100px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/*　下に下がる動き　*/
#page-top.DownMove {
   animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
   from {
      opacity: 1;
      transform: translateY(0);
   }

   to {
      opacity: 1;
      transform: translateY(100px);
   }
}

/* ページトップリンク　ここまで */

/* 背中を押す予約セクション　ここから */
.reserve_block {
   .left {
      margin-bottom: 40px;

      img {
         box-shadow: var(--box_shadow_black_blur_0);
      }
   }

   .right {
      .marker_under {
         font-size: var(--fontsize_22);
      }
   }

   .tel_btn {
      margin-top: 40px;
   }
}

/* 背中を押す予約セクション　ここまで */


/* ブレイクポイント768px以上　ここから */
@media (min-width: 768px) {
   header {
      .columns {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 10px;

         .logo_img {
            width: 400px;

            img {
               width: 400px;
            }
         }

         .right {
            margin-right: 100px;
         }
      }

      .tel_btn {
         margin: 0;
      }
   }

   footer {
      .footer_bottom {
         padding: 10px;

         .columns_top {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .logo_img {
               width: 400px;
            }

            .right {
               margin-right: 50px;
            }

            .tel_btn_line {
               margin: 0px auto;
            }
         }
      }
   }
}

/* ブレイクポイント768px以上　ここまで */
/* ブレイクポイント1024px以上　ここから */
@media (min-width: 1024px) {
   header {
      .columns {
         padding: 10px 30px;

         .logo_img {
            width: 500px;

            img {
               width: 500px;
            }
         }

         .right {
            margin-right: 0;

            .tel_btn {
               padding: 20px;

               a {
                  font-size: var(--fontsize_22);
               }
            }
         }
      }

   }

   .slider_block {
      .catch_copy_block {
         height: 400px;
         right: 70px;

         .catch_copy_block_1 {
            p {
               font-size: var(--fontsize_24);
            }
         }

         .catch_copy_block_2 {
            p {
               font-size: var(--fontsize_18);
            }
         }
      }
   }


   #index_points {
      .inner0_20 {
         display: flex;
         gap: 50px;
      }

      .columns_1 {
         margin-top: 90px;

         &:before {
            height: 80%;
         }

      }

      .columns_2 {
         margin-top: 90px;

         &:before {
            height: 80%;
         }

         .inner0_20 {
            flex-direction: row-reverse;
         }
      }

      .columns_3 {
         margin-top: 90px;

         &:before {
            height: 80%;
         }

      }

      img {
         width: 500px;
      }
   }

   #index_philosophy {
      .columns {
         display: flex;
         justify-content: center;
         gap: 30px;
      }

      img {
         max-width: 400px;
      }
   }


   #index_medical_information {
      .columns {
         .img_block {
            width: calc(100% / 4.4);
         }
      }

      /* .pc_only {
         display: none;
      } */
   }

   #index_medical_subject {
      .columns {
         display: flex;
         justify-content: center;
         gap: 30px;

         .left,
         .right {
            width: calc(100% / 2);

         }
      }
   }

   #index_news {
      .columns {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 30px;
      }

      .left {
         width: 40%;
         margin-top: 10px;

      }

      .right {
         width: 60%;
         border-left: var(--border_width_2) solid var(--base_color_4);
         padding-left: 50px;

         .date_title {
            display: flex;
            gap: 20px;
            margin: 10px 0;
         }
      }
   }

   footer {
      .footer_top {
         .columns {
            display: flex;
            gap: 30px;

            .left,
            .right {
               width: calc(100% / 2);
            }
         }

         .btn_fill {
            margin-top: 10px;
         }
      }

      .footer_bottom {
         padding: 30px;

         .columns_top {
            .logo_img {
               width: 500px;

               img {
                  width: 100%;
               }
            }

            .right {
               margin-right: 0;

               .tel_btn_line {
                  padding: 20px;

                  a {
                     font-size: var(--fontsize_22);
                  }
               }
            }
         }
      }
   }

   #p_about {

      #equipment_block {
         .columns {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;

            .img {
               width: calc(100% / 4.5);
               margin: 0;

               img {
                  height: 200px;
               }
            }
         }
      }

      .rehabilitation_situation_block {
         .columns {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;

            .left,
            right {
               width: calc(100% / 2);

            }

            .right {
               margin-top: -80px;
            }
         }
      }
   }

   #p_first {
      .belongings_block {
         .columns {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;

            img {
               width: 400px;
            }
         }
      }
   }

   #p_medical_information {
      #disease_block {
         .disease_inner_block {
            margin: 50px 0;

            .columns {
               display: flex;
               justify-content: left;
               align-items: center;
               gap: 30px;

               .left {
                  img {
                     width: 300px;
                  }
               }

               .right {
                  .btn_line {
                     margin: 30px auto 0 0;
                  }
               }
            }
         }
      }

      #symptoms_block {
         .columns {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            flex-wrap: wrap;

            .img {
               width: calc(100% / 3.3);
               margin: 0;

               img {
                  object-fit: cover;
                  height: 200px;
               }
            }
         }
      }
   }

   #p_profile {
      .greeting_block {
         .columns {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;

            img {
               margin: 0;
            }
         }
      }

      .academic_qualification_columns {
         display: flex;
         gap: 30px;

         .academic_background_block,
         .qualification_block {
            width: calc(100% / 2);
         }
      }

      .career_block {
         .definition_list_block {
            display: flex;

            dt {
               width: 20%;
               margin: 0 10px 0 0;
               display: flex;
               justify-content: center;
               align-items: center;
            }

            dd {
               width: 80%;
               ;
            }
         }
      }
   }

   #p_access {
      .access_block {
         .left {
            .img {
               width: 800px;
               margin: 0 auto;

               img {
                  width: 100%;
               }
            }
         }
      }

      #index_medical_subject {
         .right {
            width: 100%;
         }
      }
   }

   .reserve_block {
      .columns {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 30px;

         .left {
            width: 400px;
         }
      }
   }

   /* 疾患ページのレイアウト ここから*/
   .wp-block-columns {
      display: flex;
      gap: 30px;
   }

   /* 疾患ページのレイアウト ここまで*/
}

/* ブレイクポイント1024px以上　ここまで */

/* ブレイクポイント1280px以上　ここから */
@media (min-width: 1280px) {
   .slider_block {
      .catch_copy_block {
         height: 530px;
         right: 70px;

         .catch_copy_block_1 {
            p {
               font-size: var(--fontsize_30);
            }
         }

         .catch_copy_block_2 {
            p {
               font-size: var(--fontsize_24);
            }
         }
      }
   }

   .footer_bottom {
      .columns_top {
         display: flex;
         justify-content: space-between;

         .logo_img {
            width: 400px;
         }
      }

      .columns_bottom {
         display: flex;
         margin-top: 20px;

         .left {

            ul {
               margin: 0;
               display: flex;
               justify-content: space-around;
            }

            width: 60%;

            .columns_bottom_list_parent.adjustment {
               margin-top: 5px;

               .columns_bottom_ul_child {
                  display: flex;
                  flex-direction: column;
               }
            }
         }

         .right {
            width: 40%;
         }
      }
   }



   .post_block_common {
      .columns {
         display: flex;

         main {
            width: 900px;
            padding-right: 30px;
         }
      }

      #sidebar {
         width: 300px;
      }
   }
}

/* ブレイクポイント1280px以上　ここまで */