@charset "utf-8";
/*
Theme Name: sapporo-rmc
Description: さっぽろ呼吸器内科クリニックのテーマ
Author: Snowholding
*/

/* 変数 */
:root {
   /* カラー */
   --text-color1: #595757;
   --bg-color1: #f6ffed;
   --bg-color2: #caf997;
   --bg-color3: #6eb80a;
   --btn-color1: #f3a100;
   --btn-color2: #7ed40c;
   /* フォント */
   --serif: "Yu Mincho", YuMincho, 游明朝, 游明朝体, serif;
   --sans_serif: "Yu Gothic", YuGothic, 游ゴシック, 游ゴシック体, sans-serif;
}

/* 下からふわっと出る */
.animation_box {
   opacity: 0;
   /* 初期値は透明にしておく */
   transition: 0.5s;
   /* 動くスピードを0.5秒に指定 */
   position: relative;
   /* 相対位置の設定 */
   top: 50px;
   /* 事前に下に50pxずらしておく */
}

.active {
   opacity: 1;
   /* 透明度を元に戻す */
   top: 0;
   /* ずらしていた位置を戻すことで上に上がっているようにみえる */
}

/*ページトップリンク*/
#page-top a {
   display: flex;
   justify-content: center;
   align-items: center;
   background: var(--btn-color2);
   border-radius: 5px;
   width: 60px;
   height: 60px;
   color: #fff;
   text-align: center;
   text-transform: uppercase;
   text-decoration: none;
   font-size: 1rem;
   transition: all 0.3s;
}

#page-top a:hover {
   background: var(--bg-color2);
}

/* モバイルフッターメニューボタン　ここから */
/*メニューをページ下部に固定*/
#sp-fixed-menu {
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 3;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul {
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
   width: 100%;
   border-top: 5px solid white;
}

#sp-fixed-menu li {
   justify-content: center;
   align-items: center;
   width: 50%;
   padding: 0;
   margin: 0;
   font-size: 14px;
}

#sp-fixed-menu li:first-child {
   background: var(--btn_01);
   border-right: 2px solid #fff;
}

#sp-fixed-menu li:last-child {
   background: var(--btn_01);
}

/*ボタンを調整*/
#sp-fixed-menu li a {
   color: var(--text-color1);
   text-decoration: none;
   background: var(--btn-color1);
   text-align: center;
   display: block;
   width: 100%;
   padding: 8px;
}

/* モバイルフッターメニューボタン　ここまで */

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

/*　左の動き　*/
#page-top.LeftMove {
   animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime {
   from {
      opacity: 0;
      transform: translateX(100px);
   }

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

/*　右の動き　*/
#page-top.RightMove {
   animation: RightAnime 0.5s forwards;
}

@keyframes RightAnime {
   from {
      opacity: 1;
      transform: translateX(0);
   }

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

/* ハンバーガーメニュー */
#g-nav {
   /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
   position: fixed;
   z-index: 999;
   /*ナビのスタート位置と形状*/
   top: 0;
   right: -120%;
   width: 100%;
   height: 100vh;
   /*ナビの高さ*/
   background: var(--bg-color1);
   /*動き*/
   transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive {
   right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
   /*ナビの数が増えた場合縦スクロール*/
   position: fixed;
   z-index: 999;
   width: 100%;
   height: 100vh;
   /*表示する高さ*/
   overflow: auto;
   -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
   /*ナビゲーション天地中央揃え*/
   position: absolute;
   z-index: 999;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/*リストのレイアウト設定*/
#g-nav li {
   list-style: none;
   text-align: center;
   border-bottom: 2px solid var(--btn-color2);
   margin: 10px 0;
}

#g-nav li a {
   color: var(--btn-color1);
   text-decoration: none;
   padding: 10px;
   display: block;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn {
   position: fixed;
   z-index: 9999;
   /*ボタンを最前面に*/
   top: 10px;
   right: 10px;
   cursor: pointer;
   width: 50px;
   height: 50px;
   background: var(--bg-color1);
}

/*×に変化*/
.openbtn span {
   display: inline-block;
   transition: all 0.4s;
   position: absolute;
   left: 14px;
   height: 3px;
   background-color: var(--btn-color2);
   width: 45%;
}

.openbtn span:nth-of-type(1) {
   top: 15px;
}

.openbtn span:nth-of-type(2) {
   top: 23px;
}

.openbtn span:nth-of-type(3) {
   top: 31px;
}

.openbtn.active span:nth-of-type(1) {
   top: 18px;
   left: 18px;
   transform: translateY(6px) rotate(-45deg);
   width: 30%;
}

.openbtn.active span:nth-of-type(2) {
   opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
   top: 30px;
   left: 18px;
   transform: translateY(-6px) rotate(45deg);
   width: 30%;
}

/*== ボタン共通設定 */

.btn {
   /*アニメーションの起点とするためrelativeを指定*/
   position: relative;
   overflow: hidden;
   /*ボタンの形状*/
   text-decoration: none;
   display: inline-block;
   padding: 10px 30px;
   text-align: center;
   outline: none;
   /*アニメーションの指定*/
   transition: ease 0.2s;
}

/*ボタン内spanの形状*/
.btn span {
   position: relative;
   z-index: 3;
   /*z-indexの数値をあげて文字を背景よりも手前に表示*/
   color: white;
}

.btn:hover span {
   color: var(--text-color1);
}

/*== 背景が流れる（左から右） */
.bgleft:before {
   content: "";
   /*絶対配置で位置を指定*/
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
   /*色や形状*/
   background: var(--btn-color2);
   /*背景色*/
   width: 100%;
   height: 100%;
   /*アニメーション*/
   transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
   transform: scale(0, 1);
   transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before {
   transform-origin: left top;
   transform: scale(1, 1);
}

/********このようなお悩みはありませんか？のボタンホバー********/
/*== 背景が流れる（中央から縦全体） */
.bgcentery:before {
   content: "";
   /*絶対配置で位置を指定*/
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
   /*色や形状*/
   background: var(--btn-color2);
   width: 100%;
   height: 100%;
   /*アニメーション*/
   transition: transform 0.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
   transform: scale(1, 0);
   transform-origin: center;
}

/*hoverした際の形状*/
.bgcentery:hover:before {
   transform: scale(1, 1);
}

html {
   font-size: 10px;
   font-family: var(--sans_serif);
   font-weight: bold;
   scroll-behavior: smooth;
}

body {
   font-size: 1.5rem;
   color: var(--text-color1);
}

/* ヘッダー */
header {
   background: white;
   padding: 10px 10px 0;
}

header h1 {
   transition: 0.2s;
}

header h1:hover {
   opacity: 0.6;
}

header .header_pc_top {
   display: none;
}

header .header_sp_top h1 {
   width: 80%;
   margin-bottom: 5px;
}

header .header_sp_top h1 a img {
   width: 100%;
}

header .header_sp_top .reserve {
   display: flex;
   justify-content: center;
}

header .header_sp_top .reserve .left {
   margin-right: 5px;
   width: 50%;
}

header .header_sp_top .reserve .right {
   width: 50%;
}

header .header_sp_top .reserve .left .web_button,
header .header_sp_top .reserve .right .tel_button {
   background: var(--btn-color2);
   margin: 0 auto;
   padding: 10px;
   border-radius: 5px;
   transition: 0.2s;
}

header .header_sp_top .reserve .left .web_button:hover,
header .header_sp_top .reserve .right .tel_button:hover {
   opacity: 0.6;
}

header .header_sp_top .reserve .left .web_button a,
header .header_sp_top .reserve .right .tel_button a {
   color: white;
   text-decoration: none;
   display: flex;
   justify-content: center;
   align-items: center;
}

header .header_sp_top .reserve .left .web_button img,
header .header_sp_top .reserve .right .tel_button img {
   width: 20px;
   margin-right: 5px;
}

header .header_sp_top .reception_time {
   text-align: center;
   font-size: 1.2rem;
}

header .header_sp_top .reserve .left .reception_time p:first-of-type {
   padding: 5px 0 0;
}

header .header_sp_top .reserve .left .reception_time p:last-of-type {
   padding: 5px 0;
}

header .header_sp_top .reserve .right .reception_time p {
   padding: 5px 0 0;
}

header nav ul {
   display: none;
}

header nav ul {
   display: none;
}

.index_header p {
   color: var(--btn-color1);
   animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

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

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

.index_header {
   position: relative;
}

.index_header img {
   width: 100%;
   object-fit: cover;
   height: 400px;
}

.index_header .open {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -130%);
   text-align: center;
   width: 100%;
   text-shadow:
      1px 0 0 #fff,
      0 1px 0 #fff,
      -1px 0 0 #fff,
      0 -1px 0 #fff,
      2px 2px 0 #fff;
   color: var(--btn-color1);
   font-size: 3.5rem;
}

.index_header .open span {
   font-size: 2.7rem;
}

.index_header .sp {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   width: 100%;
   text-shadow:
      1px 0 0 #fff,
      0 1px 0 #fff,
      -1px 0 0 #fff,
      0 -1px 0 #fff,
      0 0 0 #fff;
   color: var(--btn-color1);
   font-size: 2.5rem;
}

.index_header .pc {
   display: none;
   text-shadow:
      2px 0 0 #fff,
      0 1px 0 #fff,
      2px 0 0 #fff,
      0 -1px 0 #fff,
      0 0 0 #fff;
   color: var(--btn-color1);
}

.index_header .page .heading {
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding: 20px;
   background: var(--bg-color1);
}

.index_header .page .heading h1 span {
   display: block;
   font-size: 1.2rem;
   font-family: "Libre Baskerville", serif;
   text-transform: capitalize;
}

.index_header .page .heading h1 {
   font-size: 2.2rem;
}

.index_header .page .heading img {
   width: 70px;
   margin-right: 5px;
   object-fit: auto;
   height: auto;
}

.index_header .page .hero_header_img img {
   object-fit: cover;
   height: 300px;
}

#breadcrumbs {
   padding-left: 10px;
}

#breadcrumbs a {
   color: var(--text-color1);
   text-decoration: none;
}

/* お知らせ single */
#single {
   margin: 60px 10px;
   padding: 50px 0;
   background: var(--bg-color1);
   border-radius: 10px;
}

#single .inner {
   margin: 0 10px;
}

#single h1 {
   margin-bottom: 30px;
}

#single .post-categories {
   padding: 5px 0;
}

#single .post-categories li a {
   color: var(--btn-color1);
   text-decoration: none;
}

/* お知らせ一覧 archive */
#archive {
   margin: 60px 0;
}

#archive .inner {
   margin: 0 10px;
}

#archive article {
   margin: 30px 0;
   border-bottom: 1px solid var(--text-color1);
}

#archive article a {
   color: var(--text-color1);
   text-decoration: none;
}

#archive article .date {
   margin: 10px 0;
   padding: 4px 6px;
   background: var(--bg-color2);
   display: inline-block;
}

#archive article .ttl {
   margin: 10px 0;
   transition: 0.2s;
}

#archive article .ttl:hover {
   opacity: 0.6;
}

.sidebar_columns {
   margin: 60px 0;
}

#sidebar {
   background-color: #f9fff4;
   opacity: 1;
   background-image: linear-gradient(#ffffff 0.8px, transparent 0.8px),
      linear-gradient(90deg, #ffffff 0.8px, transparent 0.8px), linear-gradient(#ffffff 0.4px, transparent 0.4px),
      linear-gradient(90deg, #ffffff 0.4px, #f9fff4 0.4px);
   background-size:
      20px 20px,
      20px 20px,
      4px 4px,
      4px 4px;
   background-position:
      -0.8px -0.8px,
      -0.8px -0.8px,
      -0.4px -0.4px,
      -0.4px -0.4px;
   padding: 30px;
   margin: 0 10px;
}

#sidebar .inner {
   margin: 0;
}

#sidebar_new_article {
   margin-bottom: 20px;
}

#sidebar ul {
   margin: 10px 0;
}

#sidebar li {
   margin: 5px 0;
}

#sidebar a {
   text-decoration: none;
   color: var(--text-color1);
   transition: all 0.2s;
}

#sidebar a:hover {
   opacity: 0.6;
}

/* ページ送りナビ */
/*wp-pagenavi 11*/
.wp-pagenavi {
   clear: both;
   text-align: center;
   margin-bottom: 60px;
}

.wp-pagenavi a,
.wp-pagenavi span {
   color: #fff;
   background: var(--bg-color1);
   background-color: var(--btn-color2);
   background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px),
      linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
   background-size:
      100px 100px,
      100px 100px,
      10px 10px,
      10px 10px;
   background-position:
      -1px -1px,
      -1px -1px,
      -1px -1px,
      -1px -1px;
   border: 1px solid #fff;
   padding: 8px 15px !important;
   margin: 0 4px !important;
   white-space: nowrap;
   -webkit-border-radius: 3px;
   border-radius: 4px;
   transition: 0.2s ease-in-out;
   text-align: center;
   text-decoration: none;
}

.wp-pagenavi a:hover {
   color: var(--text-color1);
   background-color: var(--btn-color1);
   border-color: #999;
}

.wp-pagenavi span.current {
   color: var(--text-color1);
   background-color: var(--bg-color1);
   border-color: #999;
}

/* 共通パーツ　ここから */
.heading2 {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 20px;
}

.heading2 span {
   color: var(--btn-color1);
   font-size: 1.5rem;
   font-family: "Libre Baskerville", serif;
}

/* 共通パーツ　ここまで */

/* お知らせ */
#update {
   background: var(--bg-color1);
   margin: 50px 10px;
   padding: 30px 10px;
}

#update span {
   font-family: "Libre Baskerville", serif;
}

#update p {
   padding: 0;
}

#update .date_ttl {
   margin: 10px 0;
}

#update article a {
   position: relative;
   display: inline-block;
   text-decoration: none;
   color: var(--text-color1);
}

#update article a:after {
   position: absolute;
   bottom: 5px;
   left: 0;
   content: "";
   width: 100%;
   height: 2px;
   background: var(--btn-color1);
   transform: scale(0, 1);
   transform-origin: right top;
   transition: transform 0.3s;
}

#update article a:hover:after {
   transform-origin: left top;
   transform: scale(1, 1);
}

/* web予約 */
#web {
   background: url(../rmc/assets/img/web_reserve_img.webp);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   background-color: rgba(255, 255, 255, 0.85);
   background-blend-mode: lighten;
   padding: 30px 0;
   margin-bottom: 10px;
}

#web .contents {
   padding: 30px;
}

#web .notice {
   font-size: 2rem;
   padding: 10px 0 0;
   color: var(--btn-color1);
   text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.2);
}

#web p {
   text-align: center;
}

#web p em {
   font-weight: bold;
}

#web a {
   display: block;
   position: relative;
   background: var(--btn-color1);
   padding: 20px;
   border-radius: 40px;
   color: var(--text-color1);
   text-decoration: none;
   z-index: 2;
   text-align: center;
   margin: 20px auto 0;
   width: 300px;
}

#tel_reserve {
   background: url(../rmc/assets/img/tel_reserve_img.webp);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   background-color: rgba(255, 255, 255, 0.85);
   background-blend-mode: lighten;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 30px;
}

#tel_reserve .reservation_phone {
   padding: 30px;
   text-align: center;
   border-radius: 10px;
}

#tel_reserve .sp_only {
   display: none;
}

#tel_reserve .reservation_phone .balloon_right_btn {
   position: relative;
   display: inline-block;
   padding: 20px;
   margin-bottom: 20px;
   width: 100%;
   color: white;
   background-color: rgba(139, 234, 12, 0.7);
   border-radius: 10px;
   box-sizing: border-box;
}

#tel_reserve .reservation_phone .balloon_right_btn:before {
   content: "";
   position: absolute;
   bottom: -20px;
   left: 40px;
   border: 10px solid transparent;
   border-left: 25px solid rgba(139, 234, 12, 0.7);
   z-index: 0;
   transform: rotate(60deg);
}

#tel_reserve .reservation_phone a {
   display: flex;
   justify-content: center;
   align-items: center;
   background: var(--btn-color1);
   border-radius: 70px;
   color: white;
   text-decoration: none;
   width: 300px;
   margin: 10px auto 0;
   padding: 20px;
   transition: 0.2s;
}

#tel_reserve .reservation_phone a:hover {
   opacity: 0.6;
}

#tel_reserve .reservation_phone img {
   margin-right: 10px;
   width: 10%;
}

/* ワクチン接種 */
#vaccination {
   background: url(../rmc/assets/img/vaccination_img.webp);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   background-color: rgba(255, 255, 255, 0.85);
   background-blend-mode: lighten;
   margin: 50px 0;
   padding: 30px;
   /* clip-path: polygon(100% 6%, 100% 100%, 0 94%, 0 0); */
}

#vaccination .block p {
   text-align: center;
}

#vaccination img {
   width: 10%;
   margin-right: 10px;
}

#vaccination h2 {
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--btn-color1);
}

#vaccination h2 span {
   text-align: center;
}

#vaccination a {
   display: block;
   position: relative;
   background: var(--btn-color1);
   padding: 20px;
   border-radius: 40px;
   color: var(--text-color1);
   text-decoration: none;
   z-index: 2;
   text-align: center;
   margin: 20px auto 0;
   width: 300px;
}

/* 発熱外来 */
#fever_outpatient {
   margin-bottom: 20px;
}

#fever_outpatient h3 {
   border-left: 5px solid var(--btn-color1);
   border-right: 5px solid var(--btn-color1);
   color: var(--btn-color1);
   padding-left: 10px;
   padding-right: 10px;
   margin-bottom: 10px;
   display: inline-block;
}

#fever_outpatient a {
   display: block;
   position: relative;
   background: var(--btn-color1);
   padding: 20px;
   border-radius: 40px;
   color: var(--text-color1);
   text-decoration: none;
   z-index: 2;
   text-align: center;
   margin: 20px auto;
   width: 300px;
}

#fever_outpatient .columns {
   background: var(--bg-color1);
}

#fever_outpatient .left {
   padding: 40px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
}

#fever_outpatient .right {
   background: url(../rmc/assets/img/fever_outpatient_img.webp);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   width: 100%;
   height: 300px;
   clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 14%);
}

/* 新型コロナ後遺症外来について */
#long_covid span {
   background: linear-gradient(transparent 60%, #ff6 60%);
}

#long_covid .columns {
   background: var(--bg-color1);
}

#long_covid .left {
   padding: 40px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
}

#long_covid .right {
   background: url(../rmc/assets/img/long_covid_img.webp);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   width: 100%;
   height: 300px;
   clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 14%);
}

/* 発熱外来の下層ページ */
#p_fever_outpatient_layer {
   margin: 60px 0;
   padding: 50px 0;
   background: var(--bg-color1);
}

#p_fever_outpatient_layer .inner {
   margin: 0 10px;
   padding: 50px 10px;
   background: white;
}

#p_fever_outpatient_layer .heading2 em {
   background: none;
}

#p_fever_outpatient_layer .right {
   margin: 10px 0;
}

#p_fever_outpatient_layer em {
   background: linear-gradient(transparent 60%, #ff6 60%);
}

#p_fever_outpatient_layer .dl_btn {
   width: 300px;
}

#p_fever_outpatient_layer .reserve_block {
   margin-top: 60px;
}

/* 当クリニックの特徴 */
#feature {
   background-color: #f9fff4;
   opacity: 1;
   background-image: linear-gradient(#e5e5e5 2.4000000000000004px, transparent 2.4000000000000004px),
      linear-gradient(90deg, #e5e5e5 2.4000000000000004px, transparent 2.4000000000000004px),
      linear-gradient(#e5e5e5 1.2000000000000002px, transparent 1.2000000000000002px),
      linear-gradient(90deg, #e5e5e5 1.2000000000000002px, #f9fff4 1.2000000000000002px);
   background-size:
      60px 60px,
      60px 60px,
      12px 12px,
      12px 12px;
   background-position:
      -2.4000000000000004px -2.4000000000000004px,
      -2.4000000000000004px -2.4000000000000004px,
      -1.2000000000000002px -1.2000000000000002px,
      -1.2000000000000002px -1.2000000000000002px;
   margin: 40px 0;
   padding: 40px 10px;
}

#feature .columns {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

#feature img {
   width: 60px;
   height: 60px;
   padding: 10px;
   background: white;
   border: 5px solid var(--btn-color1);
   border-radius: 50%;
}

#feature .feature_points {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 10px;
   padding: 10px 10px 5px;
   background-color: rgba(255, 255, 255, 0.7);
   box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.3);
   width: calc(100% / 2.5);
}

#feature .points {
   font-family: "Bevan", serif;
   font-size: 2.6rem;
   background: linear-gradient(transparent 80%, #ff6 80%);
   padding-bottom: 0px;
   margin-bottom: 20px;
   transform: rotate(-2deg);
}

#feature p {
   font-family: var(--serif);
}

/* このようなお悩みはありませんか？ */
#worries {
   position: relative;
   background: rgb(123, 207, 30);
   background: linear-gradient(124deg,
         rgba(123, 207, 30, 1) 0%,
         rgba(222, 255, 186, 0.6) 49%,
         rgba(237, 255, 217, 0.4) 100%);
   margin: 50px 0;
   padding: 50px 10px;
}

#worries::before {
   position: absolute;
   content: "";
   background: url(assets/img/circle_white.svg);
   background-repeat: no-repeat;
   background-size: cover;
   width: 120px;
   height: 120px;
   top: 10%;
   right: 5%;
}

#worries .respiratory .treatment ul::before {
   position: absolute;
   content: "";
   background: url(assets/img/circle_white.svg);
   background-repeat: no-repeat;
   background-size: cover;
   width: 70px;
   height: 70px;
   bottom: -10%;
   left: 20%;
}

#worries .internal-medicine .treatment ul::before {
   position: absolute;
   content: "";
   background: url(assets/img/circle_white.svg);
   background-repeat: no-repeat;
   background-size: cover;
   width: 80px;
   height: 80px;
   top: 75%;
   right: 5%;
}

#worries a {
   display: block;
   background: var(--btn-color1);
   padding: 20px;
   border-radius: 40px;
   color: white;
   text-decoration: none;
   z-index: 2;
   width: 300px;
   text-align: center;
}

#worries ul li:last-of-type {
   padding-bottom: 20px;
}

#worries h2 {
   text-align: center;
}

#worries h2 em {
   display: block;
}

#worries .respiratory {
   position: relative;
}

#worries .respiratory h3 {
   position: absolute;
   top: 5%;
   writing-mode: vertical-lr;
   border-right: 1px solid var(--text-color1);
   padding: 0 5px 0 0;
   z-index: 1;
}

#worries .respiratory img {
   width: 60%;
   padding-top: 20%;
}

#worries .internal-medicine {
   position: relative;
}

#worries .internal-medicine h3 {
   position: absolute;
   top: 10%;
   right: 0;
   writing-mode: vertical-lr;
   border-right: 1px solid var(--text-color1);
   padding: 0 5px 0 0;
   z-index: 1;
}

#worries .internal-medicine .img_box {
   text-align: right;
}

#worries .internal-medicine img {
   width: 60%;
   padding-top: 20%;
}

.animation {
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-duration: 1.5s;
}

.animation_02 {
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-duration: 2s;
}

.enlargement_reduction {
   animation-name: kakudai_syukusyo;
   transform: scale(0.95, 0.95);
}

@keyframes kakudai_syukusyo {
   100% {
      transform: scale(1, 1);
   }
}

/* 健康診断受付中 */
#medical_examination {
   background: var(--bg-color1);
   margin: 50px 10px;
   padding: 40px 10px;
}

#medical_examination h2 {
   display: flex;
   justify-content: center;
   background: var(--btn-color1);
   padding: 10px;
   margin-bottom: 30px;
   color: white;
}

#medical_examination .medical_examination_img {
   display: flex;
   justify-content: center;
}

#medical_examination img {
   width: 150px;
}

#medical_examination ul {
   margin: 30px 0;
}

#medical_examination ul li {
   padding: 4px 0;
}

#medical_examination li span {
   background: var(--btn-color2);
   padding: 2px 10px;
   margin-right: 10px;
   color: white;
   font-size: 1.6rem;
}

#medical_examination a {
   display: block;
   position: relative;
   background: var(--btn-color1);
   padding: 20px;
   border-radius: 40px;
   color: var(--text-color1);
   text-decoration: none;
   z-index: 2;
   text-align: center;
   margin: 20px auto 0;
   width: 300px;
}

/* ワクチンの下層ページ */
#p_vaccination {
   background: var(--bg-color1);
   margin: 60px 10px;
   padding: 50px 0 10px;
}

#p_vaccination .inner {
   margin: 0 10px;
}

#p_vaccination h2 {
   text-align: center;
   padding: 10px;
   margin-bottom: 40px;
   border-top: 4px solid var(--btn-color2);
   border-bottom: 4px solid var(--btn-color2);
}

#p_vaccination h3 {
   border-left: 4px solid var(--btn-color2);
   padding-left: 10px;
   margin-bottom: 20px;
}

#p_vaccination .block {
   margin: 30px 0 20px;
}

#p_vaccination ul {
   background: white;
   padding: 20px;
}

#p_vaccination li {
   position: relative;
   margin: 8px;
}

#p_vaccination li:before {
   position: absolute;
   content: "-";
   left: -10px;
}

#p_vaccination p span {
   color: #cf2e2e;
}

/* 健康診断受付中の下層ページ */
#p_medical_examination {
   margin: 60px 10px;
   padding: 50px 0;
   background: var(--bg-color1);
   text-align: center;
}

#p_medical_examination .inner {
   margin: 0 10px;
}

#p_medical_examination .notice {
   background: linear-gradient(transparent 80%, #ff6 80%);
   display: inline-block;
   padding-bottom: 0;
}

#p_medical_examination table {
   margin: 30px 0 20px;
   background: var(--bg-color2);
   border: 2px solid var(--btn-color2);
}

#p_medical_examination table th {
   border-bottom: 2px solid var(--btn-color2);
   border-right: 2px solid white;
   background: var(--btn-color2);
   padding: 10px;
}

#p_medical_examination table th:last-of-type {
   border-right: none;
}

#p_medical_examination table td {
   border-bottom: 2px solid white;
   border-right: 2px solid white;
   padding: 5px;
}

#p_medical_examination table tr:not(:first-of-type) td:last-of-type {
   border-right: none;
}

#p_medical_examination table tr:last-of-type td {
   border-bottom: none;
}

#p_medical_examination .block1 p {
   text-align: left;
}

#p_medical_examination em {
   text-decoration: underline;
   font-size: 1.6rem;
}

#p_medical_examination .block2 {
   text-align: left;
   margin: 30px 0;
}

#p_medical_examination .block2 h2 {
   border-bottom: 4px solid var(--btn-color2);
   margin-bottom: 20px;
}

#p_medical_examination ul {
   background: white;
   margin: 30px 0;
   padding: 30px;
}

#p_medical_examination li {
   margin: 8px 0;
   position: relative;
}

#p_medical_examination li:before {
   position: absolute;
   content: "-";
   top: 0;
   left: -10px;
}

/* オンライン診療について */
#online {
   /* background: var(--bg-color1); */
   margin: 50px 0;
   padding: 40px 10px;
   position: relative;
}

#online:before {
   position: absolute;
   content: "";
   background-color: var(--bg-color1);
   width: 300px;
   height: 700px;
   top: 0;
   right: 0;
}

#online h2 em {
   display: block;
}

#online .note p:last-of-type {
   font-size: 2rem;
   text-decoration: underline;
   font-weight: bold;
}

#online a {
   display: block;
   position: relative;
   background: var(--btn-color1);
   padding: 20px;
   border-radius: 40px;
   color: var(--text-color1);
   text-decoration: none;
   z-index: 2;
   text-align: center;
   margin: 20px auto 0;
   width: 300px;
}

#online .online_img {
   margin: 30px 0 0;
}

/* オンライン診療の下層ページ */
#p_online_layer {
   margin: 60px 0;
   padding: 50px 0;
   background: var(--bg-color1);
}

#p_online_layer .inner {
   margin: 0 10px;
}

#p_online_layer h2 {
   text-align: center;
   margin-bottom: 20px;
}

#p_online_layer .block,
#p_online_layer .online_flow_block,
#p_online_layer .environment_block {
   background: white;
   margin: 40px 0;
   padding: 30px;
}

#p_online_layer a {
   display: flex;
   justify-content: center;
   align-items: center;
   background: var(--btn-color1);
   border-radius: 70px;
   color: white;
   text-decoration: none;
   width: 300px;
   margin: 20px auto;
   padding: 20px;
   transition: 0.2s;
}

#p_online_layer a:hover {
   opacity: 0.6;
}

#p_online_layer .reserve_bnr a {
   background: none;
}

#p_online_layer .columns_merit {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

#p_online_layer .columns_merit .merit_block {
   width: calc(100% / 2);
   padding: 5px;
}

#p_online_layer .columns_merit em {
   color: var(--btn-color2);
}

#p_online_layer .online_flow_block .columns {
   display: flex;
   flex-wrap: wrap;
}

#p_online_layer .online_flow_block .online_flow_img {
   width: calc(100% / 2);
   padding: 5px;
}

#p_online_layer .online_flow_block {
   text-align: center;
}

#p_online_layer .online_flow_block span {
   display: inline-block;
   font-family: "Libre Baskerville", serif;
   background: linear-gradient(transparent 80%, #ff6 80%);
   margin-top: 10px;
}

#p_online_layer .environment_block .columns {
   display: flex;
   flex-wrap: wrap;
}

#p_online_layer .environment_block .environment_img {
   width: calc(100% / 2);
   padding: 5px;
}

#p_online_layer .reserve_bnr img {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* 当クリニックの新型コロナウイルス感染症対策について */
#covid19 {
   background: rgb(237, 255, 217);
   background: linear-gradient(124deg,
         rgba(237, 255, 217, 0) 0%,
         rgba(222, 255, 186, 0.3956933115042892) 63%,
         rgba(123, 207, 30, 0.6954131994594712) 100%);
   margin: 50px 10px;
   padding: 40px 10px;
}

#covid19 ul {
   padding: 20px 0 20px 30px;
}

#covid19 li {
   padding: 4px 0 4px 20px;
   position: relative;
}

#covid19 li:before {
   position: absolute;
   content: "■";
   color: var(--btn-color1);
   left: 0;
}

/* 医療DX加算　ここから */
#dx {
   background: var(--bg-color1);
   margin: 50px 0;
   padding: 40px 10px;
}

#dx .columns1 {
   margin: 0 0 30px;
}

#dx .columns2,
#dx .columns3,
#dx .columns4,
#dx .columns5,
#dx .columns6,
#dx .columns7,
#dx .columns8,
#dx .columns9 {
   margin: 30px 0;
}

#dx .columns img {
   object-fit: cover;
   height: 180px;
}

#dx a {
   display: block;
   position: relative;
   background: var(--btn-color1);
   padding: 20px;
   border-radius: 40px;
   color: var(--text-color1);
   text-decoration: none;
   z-index: 2;
   text-align: center;
   margin: 20px auto;
   width: 100%;
}

/* 医療DX加算 　ここまで*/
/* 診療時間 */
#consultation_hours {
   background: var(--bg-color1);
   margin: 50px 0 0;
   padding: 40px 10px;
}

#consultation_hours table {
   width: 100%;
   text-align: center;
   margin-bottom: 10px;
}

#consultation_hours table th {
   background: var(--btn-color2);
   color: white;
   padding: 5px;
   font-size: 1.8rem;
}

#consultation_hours table th:first-of-type {
   width: 40%;
}

#consultation_hours table td {
   background: var(--bg-color1);
   padding: 5px;
   color: var(--text-color1);
   border-bottom: 1px solid #7dd71b;
   background: white;
}

#consultation_hours table tr:last-of-type td {
   border-bottom: none;
}

#consultation_hours .holiday {
   background: var(--btn-color1);
   color: white;
   padding: 2px 10px;
   margin-right: 10px;
}

#consultation_hours p {
   padding: 5px 0;
}

#consultation_hours p span {
   color: #cf2e2e;
}

#consultation_hours .payment {
   color: var(--text-color1);
   font-weight: bold;
   text-decoration: underline;
   font-size: 1.6rem;
}

.timetable_access {
   background: var(--bg-color1);
}

/* 交通のご案内 */
#access {
   padding: 40px 10px;
}

#access a {
   display: block;
   position: relative;
   background: var(--btn-color1);
   padding: 20px;
   border-radius: 40px;
   color: var(--text-color1);
   text-decoration: none;
   z-index: 2;
   text-align: center;
   margin: 20px auto 0;
   width: 300px;
}

/* SNS */
#sns {
   text-align: center;
   background: var(--bg-color1);
   padding: 50px 10px 30px;
   margin: 50px 0 0;
}

#sns .balloon {
   position: relative;
   display: inline-block;
   background: var(--btn-color1);
   padding: 10px;
   margin-bottom: 20px;
   border-radius: 5px;
}

#sns .balloon::before {
   position: absolute;
   content: "";
   right: 0;
   bottom: -14px;
   left: 0;
   width: 0px;
   height: 0px;
   margin: auto;
   border-style: solid;
   border-color: var(--btn-color1) transparent transparent transparent;
   border-width: 15px 15px 0px 15px;
}

#sns .balloon h2 {
   color: white;
}

#sns .contents {
   padding: 20px 0;
   display: flex;
}

#sns .contents .fb {
   width: calc(100% / 2);
   padding: 5px;
}

#sns .contents .insta {
   width: calc(100% / 2);
   padding: 5px;
}

#sns .contents .fb img {
   width: 100%;
   border: 2px solid #1877f2;
   box-sizing: border-box;
   transition: 0.2s;
}

#sns .contents .insta img {
   border: 2px solid #cf0071;
   box-sizing: border-box;
   width: 100%;
   transition: 0.2s;
}

#sns .contents .fb img:hover,
#sns .contents .insta img:hover {
   opacity: 0.6;
   transform: scale(1.05);
}

/* allsapporo　ここから */
.all_sap_bnr_block {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   margin: 20px 0;
   font-size: 1.3rem;
}

.all_sap_bnr_block .all_sap_bnr,
.all_sap_bnr_block .industrialdoctorlink {
   color: var(--text-color1);
   margin: 10px 0;
   transition: all 0.2s;
}

.all_sap_bnr_block .industrialdoctorlink {
   font-size: 1.6rem;
}

.all_sap_bnr_block .all_sap_bnr:hover,
.all_sap_bnr_block .industrialdoctorlink:hover {
   opacity: 0.6;
}


/* allsapporo　ここまで */

/* フッター  ここから*/
footer {
   background-color: var(--bg-color3);
   padding: 30px 0 60px;
   text-align: center;
   color: white;
}

footer a {
   transition: all 0.2s;
}

footer a:hover {
   opacity: 0.6;
}

footer .columns1_1 img {
   width: 300px;
}

footer .address em {
   background: white;
   color: var(--bg-color3);
   display: inline-block;
   padding: 2px 10px;
   margin-right: 10px;
}

footer .columns1_1,
footer .columns1_2,
footer .columns1_3 {
   margin: 20px 0;
}

footer .columns1_3 .tel_block a {
   background: white;
   padding: 15px;
   margin: 0 auto;
   text-decoration: none;
   color: var(--bg-color3);
   border-radius: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 300px;
   font-size: 2.2rem;
}

footer .columns1_3 .block {
   margin: 10px 0;
}

footer .columns1_3 p {
   padding: 5px 0;
}

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

footer .columns2 h2 {
   display: none;
}

footer .columns2 .heading2 span {
   color: white;
}

footer .columns2 .columns {
   background: white;
   color: var(--bg-color3);
}

footer .columns2 .column_right {
   padding: 30px;
}

footer .columns2 a {
   background: var(--bg-color3);
   padding: 20px;
   border-radius: 50px;
   width: 300px;
}

footer .columns3 .consultation_hours .heading2 span {
   color: var(--bg-color3);
}

footer .columns3 {
   margin: 30px 10px 10px;
   color: var(--bg-color3);
   background: white;
}

footer .columns3 .columns3_1 {
   padding: 10px 30px;
}

footer .columns3 table {
   border: 2px solid var(--bg-color3);
}

footer .columns3 table th {
   border-bottom: 2px solid var(--bg-color3);
   padding: 5px;
   background: var(--bg-color3);
   color: white;
}

footer .columns3 table td {
   border-bottom: 2px solid var(--bg-color3);
   padding: 5px;
}

footer .columns3 table tr:last-of-type td {
   border-bottom: none;
}

footer .columns3 .consultation_hours .holiday {
   background: var(--bg-color3);
   color: white;
   padding: 2px 5px;
   margin-right: 10px;
}

footer .columns3 .consultation_hours p:first-of-type {
   text-align: left;
}

footer .columns3 .consultation_hours p span {
   color: #cf2e2e;
}

footer .columns3 .consultation_hours .payment {
   text-decoration: underline;
}

footer .columns3 a {
   text-decoration: none;
   color: var(--bg-color3);
}

footer .columns3 ul {
   margin: 20px 0;
   display: flex;
   justify-content: left;
   flex-wrap: wrap;
}

footer .columns3 li {
   margin: 5px;
}

footer .columns3 .symptoms h3 {
   background: var(--bg-color3);
   color: white;
   padding: 5px 10px;
}

footer .columns3 .symptoms1,
footer .columns3 .symptoms2 {
   margin: 20px 0;
}

footer .columns3 .symptoms1 h4,
footer .columns3 .symptoms2 h4 {
   background: var(--bg-color3);
   padding: 0 5px;
   color: white;
}

.copyright {
   font-size: 1.2rem;
}

/* クリニックについて */
#p_about {
   background: var(--bg-color1);
   margin: 60px 0;
}

#p_about .inner {
   margin: 0 10px;
}

#p_about #policy {
   padding: 50px 0;
}

#p_about .notice {
   text-align: center;
}

#p_about #policy h2 {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 20px;
}

#p_about li {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 20px 0;
   padding: 10px;
   position: relative;
}

#p_about li span {
   background: var(--btn-color1);
   border-radius: 50%;
   padding: 10px;
   color: white;
   width: 80px;
   height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
   box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
   font-size: 2.5rem;
   z-index: 2;
}

#p_about li em {
   background: white;
   font-family: var(--serif);
   padding: 70px 30px 30px;
   margin-top: -40px;
}

#p_about #outline {
   background: white;
   padding: 40px 0;
}

#p_about #outline .block {
   display: flex;
   padding: 10px 0;
}

#p_about #outline dt {
   margin-right: 10px;
   white-space: nowrap;
   background: var(--btn-color1);
   color: white;
   padding: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 50%;
}

#p_about #outline dd {
   border-top: 3px solid var(--btn-color2);
   border-bottom: 3px solid var(--btn-color2);
   padding: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 50%;
}

#p_about #consultation_hours {
   background: white;
}

#p_about #inside {
   margin: 60px 0;
}

#p_about #inside h2 {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 20px;
}

#p_about #inside .columns {
   display: flex;
   flex-wrap: wrap;
}

#p_about .inside_img {
   width: calc(100% / 2);
   padding: 10px;
}

#p_about .inside_img {
   transition: all 0.5s;
}

#p_about .inside_img img {
   border-radius: 30px 0 20px 0;
   object-fit: cover;
   height: 100px;
}

#p_about .inside_img:nth-of-type(2) img,
#p_about .inside_img:nth-of-type(3) img,
#p_about .inside_img:nth-of-type(6) img {
   border-radius: 0 30px 0 20px;
}

#p_about .inside_img:hover {
   transform: rotate(-2deg);
}

#p_about #access {
   /* background: white; */
   padding: 0 0 40px;
   margin: 0 0 60px;
}

#p_about #access .column_right {
   background: var(--bg-color2);
   padding: 30px;
}

/* 診療案内 */
#p_diagnosis {
   margin: 60px 0;
   padding: 50px 0;
   background: var(--bg-color1);
}

#p_diagnosis .inner {
   margin: 0 10px;
   padding: 50px 10px;
   background: white;
}

#p_diagnosis #greeting .left {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

#p_diagnosis #greeting .left .block {
   background: var(--btn-color2);
   padding: 10px 10px 0;
   margin-bottom: 10px;
   color: white;
   width: 100%;
}

#p_diagnosis #greeting .left .doctorname {
   font-family: var(--serif);
   font-size: 1.8rem;
}

#p_diagnosis #greeting .right .doctor_img {
   display: flex;
   justify-content: center;
}

#p_diagnosis #greeting .right img {
   border-radius: 50px 0 40px 0;
   border: 4px solid var(--btn-color1);
   object-fit: cover;
   object-position: top;
   width: 300px;
   height: 300px;
}

#p_diagnosis #career h3 {
   display: flex;
   align-items: center;
   border-bottom: 3px solid var(--btn-color2);
   padding-bottom: 10px;
   margin-bottom: 20px;
}

#p_diagnosis #career .logo_only_img img {
   width: 50px;
}

#p_diagnosis .logo_only_img {
   margin-right: 5px;
}

#p_diagnosis li {
   margin: 10px;
}

#p_diagnosis li span {
   background: var(--btn-color1);
   color: white;
   padding: 5px;
   display: inline-block;
   width: 110px;
   text-align: center;
}

#p_diagnosis #career {
   margin: 20px 0;
}

#p_diagnosis .learning,
#p_diagnosis .license,
#p_diagnosis .bg {
   padding: 20px 10px;
}

#p_diagnosis #subjects {
   margin: 50px 0 0;
}

#p_diagnosis #subjects .columns {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

#p_diagnosis #subjects .columns .bnr {
   padding: 5px;
   transition: all 0.5s;
}

#p_diagnosis #subjects .columns .bnr:hover {
   transform: rotate(-5deg);
   opacity: 0.8;
}

#p_diagnosis #subjects a {
   border-radius: 20px 0 10px 0;
   color: white;
   background: var(--btn-color1);
   text-decoration: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 10px;
   width: 150px;
}

#p_diagnosis .medical_subjects_img {
   display: flex;
   flex-direction: column;
   align-items: center;
}

#p_diagnosis #subjects a img {
   width: 60px;
}

/* 検査一覧 */
#p_inspection {
   margin: 60px 0;
   padding: 50px 0;
   background: var(--bg-color1);
}

#p_inspection .inner {
   margin: 0 10px;
}

#p_inspection .block {
   margin: 30px 0;
   padding: 30px;
   background: white;
}

#p_inspection .block:nth-of-type(odd) h3 {
   background: var(--btn-color1);
   display: inline-block;
   padding: 2px 10px;
   margin-bottom: 10px;
}

#p_inspection .block:nth-of-type(even) h3 {
   background: var(--btn-color2);
   display: inline-block;
   padding: 2px 10px;
   margin-bottom: 10px;
}

.reserve_block p {
   text-align: center;
   font-size: 1.8rem;
}

.btns a {
   background: var(--btn-color1);
   border-radius: 50px;
   display: block;
   width: 300px;
   padding: 25px;
   margin: 30px auto;
   text-decoration: none;
   color: var(--text-color1);
}

/* 初めての方へ */
#p_first {
   margin: 60px 0;
   padding: 50px 0;
   background: var(--bg-color1);
}

#p_first .inner {
   margin: 0 10px;
}

#p_first #necessary h3 {
   border-left: 5px solid var(--btn-color2);
   padding-left: 6px;
   margin-bottom: 10px;
}

#p_first #necessary .columns {
   display: flex;
}

#p_first #necessary .necessary_img {
   width: calc(100% / 3);
   padding: 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

#p_first #necessary .necessary_img img {
   box-shadow: 0px 10px 10px -9px rgba(0, 0, 0, 0.3);
}

#p_first #step {
   position: relative;
   background: white;
   margin: 30px 0;
   padding: 30px 10px;
}

#p_first #step:before {
   position: absolute;
   content: "";
   width: 2px;
   height: 90%;
   background: var(--btn-color2);
   top: 30px;
   left: 43px;
   z-index: 1;
}

#p_first #step .box {
   display: flex;
   align-items: baseline;
   padding: 20px 0;
}

#p_first #step .box .balloon {
   background: var(--btn-color2);
   height: 70px;
   line-height: 70px;
   border-radius: 50%;
   text-align: center;
   position: relative;
   z-index: 2;
}

#p_first #step .box .balloon h2 {
   padding: 0;
   color: white;
}

#p_first #step .box .right {
   margin-left: 20px;
   flex-grow: 1;
}

#p_first #step .box .right h3 {
   border-bottom: 5px solid var(--bg-color2);
   margin-bottom: 20px;
}

.dl_btn {
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--btn-color1);
   border-radius: 50px;
   padding: 15px;
   color: white;
   text-decoration: none;
   width: 250px;
   margin: 20px auto;
   transition: 0.2s;
}

.dl_btn:hover {
   opacity: 0.6;
}

.dl_btn img {
   margin-right: 10px;
   width: 40px;
}

#first #step .bnr_column {
   text-align: center;
   background: var(--bg-color1);
   padding: 70px 0;
   margin: 10px 0 0;
   border-radius: 10px;
}

#first #step .bnr_column a img {
   width: 80%;
   padding: 20px 0;
   transition: 0.2s;
}

#first #step .bnr_column a img:hover {
   opacity: 0.6;
}

#first #necessary #step .box {
   justify-content: space-around;
}

#first #step .reserve {
   border-top: 1px solid var(--text-color1);
   padding: 30px 0;
}

/* 産業医 */
#p_industrial_doctor {
   margin: 60px 0;
   background: var(--bg-color2);
   position: relative;
   z-index: 2;
}

#p_industrial_doctor:before {
   position: absolute;
   content: "";
   width: 100%;
   height: 100%;
   background: white;
   clip-path: polygon(100% 5%, 100% 26%, 27% 100%, 0 100%, 0% 75%);
   z-index: -1;
   top: 0;
}

#p_industrial_doctor:after {
   position: absolute;
   content: "";
   width: 100%;
   height: 1000px;
   background: white;
   clip-path: polygon(0 58%, 0 33%, 100% 75%, 100% 100%);
   z-index: -1;
   top: 0;
}

#p_industrial_doctor .inner {
   margin: 0 10px;
   padding: 50px 0;
}

#p_industrial_doctor h3 {
   /* position: relative;
   margin-bottom: 40px;
   text-align: center;
   z-index: 1; */
   border-top: 5px double var(--btn-color1);
   border-bottom: 5px double var(--btn-color1);
   padding: 10px;
   display: flex;
   justify-content: center;
}

#p_industrial_doctor h3:before {
   /* position: absolute;
   content: "";
   width: 80%;
   height: 40px;
   top: 10px;
   left: 10px;
   z-index: -1;
   background: var(--btn-color1);
   clip-path: polygon(11% 0, 100% 0, 89% 100%, 0% 100%); */
}

#p_industrial_doctor .block {
   margin: 30px 0;
}

#p_industrial_doctor .block h3 {
   margin-bottom: 10px;
   padding: 0;
   border-top: none;
   justify-content: left;
}

#p_industrial_doctor .block h3:before {
   display: none;
}

#p_industrial_doctor .animation_box {
   background: #003984;
   margin: 20px 20px 0;
   padding: 30px 30px 10px;
   text-align: center;
   transition: all 0.2s;
}

#p_industrial_doctor .animation_box:hover {
   opacity: 0.6;
}

#p_industrial_doctor .animation_box h3 {
   justify-content: center;
}

#p_industrial_doctor .logo_minds_img {
   display: flex;
   justify-content: center;
   align-items: center;
}

#p_industrial_doctor .logo_minds_img img {
   width: 100px;
}

#p_industrial_doctor a {
   text-decoration: none;
   color: white;
}

/* アクセス */
#traffic {
   margin: 60px 10px;
}

#traffic #access {
   margin: 0;
}

/* 呼吸器内科 */
#p_respiratory {
   margin: 60px 0;
   padding: 50px 0;
   background: var(--bg-color1);
}

#p_respiratory .inner {
   margin: 0 10px;
}

#p_respiratory .block {
   background: white;
   margin: 30px 0;
   padding: 30px;
}

#p_respiratory h3 {
   border-bottom: 4px solid var(--btn-color2);
   margin-bottom: 30px;
}

#p_respiratory a {
   display: block;
   background: var(--btn-color1);
   border-radius: 40px;
   text-align: center;
   text-decoration: none;
   color: var(--text-color1);
   width: 300px;
   margin: 20px auto;
   padding: 15px;
}

/* 内科 */
#p_internal_medicine {
   margin: 60px 0;
   padding: 50px 0;
   background: var(--bg-color1);
}

#p_internal_medicine .inner {
   margin: 0 10px;
}

#p_internal_medicine .block {
   background: white;
   margin: 30px 0;
   padding: 30px;
}

#p_internal_medicine h3 {
   border-bottom: 4px solid var(--btn-color2);
   margin-bottom: 30px;
}

#p_internal_medicine a {
   display: block;
   background: var(--btn-color1);
   border-radius: 40px;
   text-align: center;
   text-decoration: none;
   color: var(--text-color1);
   width: 300px;
   margin: 20px auto;
   padding: 15px;
}

#p_internal_medicine #medical_examination {
   background: white;
   margin: 50px 0;
}

/* 院内掲示物について　ここから */
#p_dx .inner{
   margin: 0 10px;
}
/* 院内掲示物について　ここまで */

/* 各下層ページ */
#covid_19,
#bronchial_asthma,
#copd,
#iip,
#lung_cancer,
#influenza,
#cold,
#nso,
#sao,
#diabetes,
#hbp,
#lifestyle_disease,
#palpitations,
#stomach_ache {
   background: var(--bg-color1);
   margin: 60px 10px;
   padding: 30px 10px;
}

#covid_19 #contents h2,
#bronchial_asthma #contents h2,
#copd #contents h2,
#iip #contents h2,
#lung_cancer #contents h2,
#influenza #contents h2,
#cold #contents h2,
#nso #contents h2,
#sao #contents h2,
#diabetes #contents h2,
#hbp #contents h2,
#lifestyle_disease #contents h2,
#palpitations #contents h2,
#stomach_ache #contents h2 {
   text-align: center;
   padding: 30px 0 20px;
}

@media (min-width: 768px) {
   #sp-fixed-menu {
      display: none;
   }

   #page-top {
      bottom: 10px;
   }

   .header_top .tel_button {
      display: none;
   }

   .header_top h1 img {
      width: 100%;
   }

   .index_header .open {
      font-size: 5rem;
      transform: translate(-50%, -100%);
   }

   .index_header .open span {
      font-size: 4.5rem;
   }

   .index_header .sp {
      display: none;
   }

   .index_header .pc {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2.5rem;
      width: 100%;
      text-align: center;
   }

   header .header_sp_top .reserve .left {
      margin-right: 20px;
   }

   header .header_sp_top .reserve .left .tel_button a,
   header .header_sp_top .reserve .right .tel_button a {
      font-size: 1.8rem;
   }

   header .header_sp_top .reserve .left .tel_button img,
   header .header_sp_top .reserve .right .tel_button img {
      width: 30px;
      margin-right: 10px;
   }

   /* 固定ページのヘッダー */
   .index_header .page .columns {
      display: flex;
   }

   .index_header .page .heading {
      align-items: center;
      height: 300px;
   }

   .index_header .page .columns .left {
      width: 400px;
   }

   .index_header .page .columns .right {
      flex-grow: 1;
   }

   #single {
      margin: 60px 30px;
   }

   #single .inner {
      margin: 0 30px;
   }

   #archive {
      margin: 60px 0;
   }

   #archive .inner {
      margin: 0 30px;
   }

   #sidebar {
      margin: 0 30px;
   }

   #update {
      margin: 60px 5%;
      padding: 30px;
   }

   #update {
      display: flex;
      align-items: center;
   }

   #update h2 {
      margin-bottom: 0;
      width: 30%;
   }

   #update .title {
      width: 70%;
   }

   .web_tel_reserve {
      display: flex;
   }

   #web {
      padding: 60px 0;
      margin-right: 10px;
      margin-bottom: 0;
      width: calc(100% / 2);
   }

   #web .contents {
      padding: 0 5%;
   }

   #web p {
      text-align: left;
   }

   #tel_reserve .reservation_phone .balloon_right_btm {
      margin-bottom: 40px;
   }

   #tel_reserve {
      width: calc(100% / 2);
   }

   #tel_reserve .sp_only {
      display: block;
   }

   #tel_reserve .reservation_phone .left {
      text-align: left;
   }

   /* 発熱外来 */
   #fever_outpatient .columns {
      display: flex;
   }

   #fever_outpatient .left {
      width: 50%;
   }

   #fever_outpatient .left p {
      text-align: left;
   }

   #fever_outpatient a {
      margin: 20px auto 0;
   }

   #fever_outpatient .right {
      width: 50%;
      height: 520px;
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 12% 0);
   }

   #long_covid .columns {
      display: flex;
   }

   #long_covid .columns .left {
      width: 60%;
      order: 2;
   }

   #long_covid .columns .left p {
      text-align: left;
   }

   #long_covid .columns .right {
      width: 40%;
      height: 520px;
      clip-path: polygon(100% 0, 86% 100%, 0 100%, 0 0);
   }

   /* 発熱外来の下層ページ */
   #p_fever_outpatient_layer .inner {
      margin: 0 30px;
      padding: 50px 30px;
   }

   #p_fever_outpatient_layer .columns {
      display: flex;
      align-items: center;
   }

   #p_fever_outpatient_layer .left,
   #p_fever_outpatient_layer .right {
      width: calc(100% / 2);
      padding: 10px;
   }

   #feature {
      margin: 50px 0;
      padding: 40px 20px;
   }

   #feature .columns {
      flex-wrap: nowrap;
   }

   #feature .feature_points {
      width: calc(100% / 3);
      margin: 30px 10px;
      padding: 20px 20px 10px;
   }

   #feature img {
      width: 70px;
      height: 70px;
      padding: 20px;
   }

   #worries ul li {
      padding: 2px 0;
   }

   #worries .respiratory a {
      width: 60%;
      padding: 16px 0;
      border-radius: 40px;
   }

   #worries .internal-medicine a {
      width: 70%;
      padding: 16px 0px;
      border-radius: 40px;
   }

   #worries .respiratory {
      display: flex;
      align-items: center;
      padding: 20px;
   }

   #worries .respiratory img {
      width: 40%;
      padding-top: 5%;
      margin-right: 15px;
   }

   #worries .respiratory .treatment ul::before {
      width: 100px;
      height: 100px;
      bottom: -40%;
   }

   #worries .internal-medicine {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      padding: 30px;
   }

   #worries .internal-medicine h3 {
      right: 10%;
   }

   #worries .internal-medicine .img_box {
      text-align: center;
   }

   #worries .internal-medicine img {
      padding-top: 5%;
      width: 70%;
   }

   #worries .internal-medicine .treatment {
      margin-left: auto;
   }

   #worries .internal-medicine .treatment ul::before {
      top: 90%;
   }

   #vaccination {
      padding: 60px 5%;
   }

   #vaccination .block {
      margin: 0;
      width: 100%;
   }

   #medical_examination {
      margin: 50px 30px;
      padding: 60px 5%;
   }

   #medical_examination .merit {
      display: flex;
      justify-content: center;
   }

   #medical_examination img {
      width: 100px;
   }

   #medical_examination .medical_examination_img {
      margin-right: 15px;
   }

   #p_medical_examination {
      margin: 60px 30px;
   }

   #p_medical_examination .inner {
      margin: 0 30px;
   }

   #covid19 {
      margin: 50px 30px;
      padding: 60px 5%;
   }

   #covid19 img {
      width: 300px;
   }

   #covid19 .columns {
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   #covid19 ul {
      padding: 20px 0;
   }

   #covid19 .columns .left {
      flex-grow: 1;
      display: flex;
   }

   #covid19 .columns .right {
      width: 300px;
      margin: 0 0 0 20px;
   }

   #dx {
      margin: 50px 0;
      padding: 60px 5%;
   }

   #dx .columns {
      display: flex;
      flex-wrap: wrap;
   }

   #dx .columns1,
   #dx .columns2,
   #dx .columns3,
   #dx .columns4,
   #dx .columns5,
   #dx .columns6,
   #dx .columns7,
   #dx .columns8,
   #dx .columns9 {
      width: calc(100% / 2);
      padding: 10px;
   }

   #dx .columns2,
   #dx .columns3,
   #dx .columns4,
   #dx .columns5,
   #dx .columns6,
   #dx .columns7,
   #dx .columns8,
   #dx .columns9 {
      margin: 0 0 30px;
   }

   .timetable_access {
      display: flex;
      margin: 50px 0;
      padding: 60px 10px;
   }

   .timetable_access #consultation_hours {
      width: calc(100% / 2);
   }

   .timetable_access #access {
      width: calc(100% / 2);
   }

   #consultation_hours {
      margin: 0;
      padding: 0 10px;
   }

   #consultation_hours table th:first-of-type {
      width: 35%;
   }

   #access {
      margin: 0;
      padding: 0 10px;
   }

   #sns {
      margin: 50px 0 30px;
      padding: 60px 5% 20px;
   }

   #sns .contents {
      justify-content: center;
   }

   #sns .contents .fb {
      padding: 20px;
      width: 300px;
   }

   #sns .contents .insta {
      padding: 20px;
      width: 300px;
   }

   .all_sap_bnr {
      width: 400px;
   }

   #p_about .inner {
      margin: 0 30px;
   }

   #p_about #policy .inner {
      margin: 0 30px;
   }

   #p_about #policy ol {
      display: flex;
      justify-content: center;
   }

   #p_about .inside_img img {
      height: 200px;
   }

   #p_about #consultation_hours {
      padding: 40px 20px;
   }

   #p_about #outline dt {
      width: 40%;
   }

   #p_about #outline dd {
      width: 60%;
   }

   #p_about .columns1 .inner {
      margin: 0 10px;
   }

   #p_about #outline .inner {
      margin: 0 30px;
   }

   #p_about #access .columns {
      display: flex;
   }

   #p_about #access .column_right {
      display: flex;
      flex-direction: column;
      justify-content: center;
   }

   #p_about iframe {
      height: 320px;
   }

   #p_diagnosis .inner {
      margin: 0 30px;
      padding: 50px 30px;
   }

   #p_diagnosis #greeting .columns {
      display: flex;
      align-items: center;
   }

   #p_diagnosis #greeting .left {
      margin-right: 20px;
   }

   #p_diagnosis #greeting .left .notice {
      text-align: left;
   }

   #p_diagnosis #career .columns {
      display: flex;
   }

   #p_diagnosis #career .learning,
   #p_diagnosis #career .license {
      width: calc(100% / 2);
   }

   #online {
      margin: 80px 0;
      padding: 60px 5%;
   }

   #online:before {
      width: 550px;
      height: 620px;
   }

   #online .online_img {
      margin: 0 0 0 30px;
   }

   #online .columns {
      display: flex;
      align-items: center;
   }

   #online .columns .left {
      width: calc(100% / 2);
   }

   #online .columns .right {
      width: calc(100% / 2);
   }

   /* オンラインの下層ページ */
   #p_online_layer .inner {
      margin: 0 30px;
   }

   #p_online_layer .columns1 {
      display: flex;
      align-items: center;
   }

   #p_online_layer .columns1 .left,
   #p_online_layer .columns1 .right {
      width: calc(100% / 2);
      padding: 10px;
   }

   #p_online_layer .columns2 {
      display: flex;
      align-items: center;
   }

   #p_online_layer .columns2 .left,
   #p_online_layer .columns2 .right {
      width: calc(100% / 2);
      padding: 10px;
   }

   #p_online_layer .reserve_btns {
      display: flex;
      justify-content: center;
   }

   #p_online_layer .columns_merit {
      flex-wrap: nowrap;
   }

   #p_online_layer .online_flow_block .online_flow_img {
      width: calc(100% / 3);
      padding: 10px;
   }

   #p_online_layer .environment_block .environment_img {
      width: calc(100% / 4);
      padding: 10px;
   }

   /* ワクチンの下層ページ */
   #p_vaccination {
      margin: 60px 30px;
   }

   #p_vaccination .inner {
      margin: 0 30px;
   }

   #p_inspection {
      margin: 60px 30px;
      padding: 50px 0;
   }

   #p_inspection .inner {
      margin: 0 30px;
   }

   .reserve_block .btns {
      display: flex;
      justify-content: center;
   }

   .reserve_block .btns a {
      margin: 20px 10px;
   }

   #p_first {
      margin: 60px 30px;
   }

   #p_first .inner {
      margin: 0 30px;
   }

   #p_first #necessary .necessary_img {
      padding: 10px;
   }

   #p_first #step {
      padding: 30px;
   }

   #p_first #step:before {
      left: 62px;
   }

   #p_first .dl_btn {
      width: 350px;
   }

   #p_industrial_doctor {
      margin: 60px 30px;
   }

   #p_industrial_doctor .inner {
      margin: 0 30px;
   }

   #p_industrial_doctor .columns {
      display: flex;
      align-items: center;
   }

   #p_industrial_doctor .columns .left,
   #p_industrial_doctor .columns .right {
      width: calc(100% / 2);
      padding: 20px;
   }

   #p_industrial_doctor .logo_minds_img img {
      width: 200px;
   }

   #traffic {
      margin: 80px 5%;
   }

   #p_respiratory {
      margin: 60px 0;
   }

   #p_respiratory .inner {
      margin: 0 30px;
   }

   #p_respiratory .columns {
      display: flex;
   }

   #p_respiratory .columns .left,
   #p_respiratory .columns .right {
      width: calc(100% / 2);
      padding: 10px;
   }

   #p_respiratory .columns .right {
      display: flex;
      flex-direction: column;
   }

   #p_respiratory .columns .right a {
      margin-top: auto;
   }

   #p_internal_medicine {
      margin: 60px 0;
   }

   #p_internal_medicine .inner {
      margin: 0 30px;
   }

   #p_internal_medicine .columns {
      display: flex;
   }

   #p_internal_medicine .columns .left,
   #p_internal_medicine .columns .right {
      width: calc(100% / 2);
      padding: 10px;
   }

   #p_internal_medicine .columns .right {
      display: flex;
      flex-direction: column;
   }

   #p_internal_medicine .columns .right a {
      margin-top: auto;
   }

   #p_dx .inner{
      margin: 0 30px;
   }

   #online #what,
   #online #online_first,
   #online #online_reserve,
   #online #merit,
   #online #flow,
   #online #usage_environment {
      padding: 40px;
   }

   #covid_19,
   #bronchial_asthma,
   #copd,
   #iip,
   #lung_cancer,
   #influenza,
   #cold,
   #nso,
   #sao,
   #diabetes,
   #hbp,
   #lifestyle_disease,
   #palpitations,
   #stomach_ache {
      margin: 60px 30px;
      padding: 30px;
   }
}

@media (min-width: 1024px) {
   .openbtn {
      display: none;
   }

   .index_header img {
      height: 600px;
   }

   header {
      padding: 30px 10px;
   }

   header .header_sp_top {
      display: none;
   }

   header .header_pc_top {
      display: flex;
      align-items: center;
   }

   header .header_pc_top h1 img {
      width: 350px;
   }

   header .header_pc_top nav {
      font-size: 1.2rem;
      text-align: center;
      margin-left: auto;
   }

   header .header_pc_top ul {
      display: flex;
   }

   header .header_pc_top li {
      margin: 0 10px;
   }

   header .header_pc_top li a {
      position: relative;
      display: inline-block;
      text-decoration: none;
      color: var(--text-color1);
   }

   header .header_pc_top li a::after {
      position: absolute;
      content: "";
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--btn-color1);
      transform: scale(0, 1);
      transform-origin: center top;
      transition: transform 0.3s;
   }

   header .header_pc_top li a:hover:after {
      transform: scale(1, 1);
   }

   header .header_pc_top li em {
      display: block;
   }

   header .header_pc_top li span {
      font-family: "Libre Baskerville", serif;
      font-size: 1.2rem;
   }

   .index_header .page .heading {
      height: 400px;
   }

   .index_header .page .hero_header_img img {
      object-position: top;
      height: 400px;
   }

   .index_header .page .heading h1 {
      font-size: 3rem;
   }

   .index_header .open {
      font-size: 7.5rem;
      transform: translate(-50%, -80%);
   }

   .index_header .open span {
      font-size: 5.5rem;
   }

   .index_header .pc {
      font-size: 4rem;
   }

   #update {
      margin: 80px 10%;
   }

   #update .title .date_ttl {
      display: flex;
   }

   #update .title .date_ttl p:first-of-type {
      margin-right: 20px;
   }

   .web_tel_reserve {
      margin: 80px 0;
   }

   #web {
      margin-right: 20px;
   }

   /* 発熱外来 */
   #fever_outpatient picture {
      padding: 20px 0;
   }

   /* 発熱外来の下層ページ */
   #p_fever_outpatient_layer .inner {
      margin: 0 10%;
   }

   #feature {
      margin: 80px 0;
      padding: 60px 5%;
   }

   #feature .feature_points {
      margin: 30px 20px;
   }

   #worries {
      margin: 80px 0;
      padding: 70px 10px;
   }

   #worries .respiratory img {
      margin-right: 60px;
   }

   #vaccination {
      margin: 80px 0;
   }

   #p_vaccination {
      margin: 60px 10%;
   }

   #medical_examination {
      margin: 80px 10%;
   }

   #p_medical_examination {
      margin: 60px 10%;
   }

   #covid19 {
      margin: 80px 10%;
   }

   #dx {
      margin: 80px 0;
   }

   .timetable_access {
      margin: 80px 0;
   }

   #sns {
      margin: 80px 0 40px;
      padding: 60px 5% 30px;
   }

   #worries:before {
      width: 300px;
      height: 300px;
      top: 10%;
      right: 5%;
   }

   #worries .respiratory {
      margin-bottom: 120px;
   }

   #worries .respiratory .treatment ul::before {
      width: 200px;
      height: 200px;
      bottom: -60%;
      left: 10%;
   }

   #worries .internal-medicine .treatment ul::before {
      top: 100%;
      right: 0;
      width: 120px;
      height: 120px;
   }


   footer {
      padding: 20px 0;
   }

   footer .columns1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
   }

   footer .columns1_1,
   footer .columns1_2,
   footer .columns1_3 {
      margin: 0;
   }

   footer .columns1_2 {
      text-align: left;
      padding: 0 20px;
   }

   footer .columns1_3 .tel_block {
      margin: 0;
   }

   footer .columns1_3 .usually {
      margin-bottom: 20px;
   }

   footer .columns2 .columns {
      display: flex;
      align-items: center;
   }

   footer .columns2 a {
      margin-top: 20px;
   }

   footer .columns2 a span {
      color: white;
   }

   footer .columns2 .column_right {
      text-align: left;
   }

   footer .columns3 {
      background: white;
   }

   footer .columns3 .symptoms1 {
      margin-right: 30px;
   }

   footer .columns3 .columns3_1 {
      display: flex;
      padding: 30px;
   }

   footer .columns3_1 nav {
      display: flex;
      justify-content: space-around;
      width: calc(100% / 2);
   }

   footer .columns3_1 .symptoms li {
      margin: 5px 0;
   }

   footer .columns3 ul {
      flex-direction: column;
      text-align: left;
      margin: 0;
   }

   footer .columns3 .consultation_hours {
      width: calc(100% / 2);
   }

   footer .columns3 .consultation_hours p {
      text-align: left;
   }

   footer .columns3 .symptoms {
      margin: 0;
   }

   footer .columns3 .symptoms .columns {
      display: flex;
      text-align: left;
   }

   #p_about .inner {
      margin: 0 10%;
   }

   #p_about #policy .inner {
      margin: 0;
   }

   #p_about .columns1 {
      margin: 0;
   }

   #p_about .columns1 .inner {
      display: flex;
   }

   #p_about #outline .inner {
      display: flex;
      flex-direction: column;
   }

   #p_about #consultation_hours .inner {
      display: flex;
      flex-direction: column;
   }

   #p_about #inside .inner {
      margin: 0;
   }

   #p_about .columns .inside_img {
      width: calc(100% / 3);
   }

   #p_about #access .inner {
      margin: 0 30px;
   }

   #p_diagnosis .inner {
      margin: 0 10%;
   }

   #p_diagnosis #subjects .columns .bnr {
      padding: 10px;
   }

   #p_inspection {
      margin: 60px 10%;
   }

   #p_first {
      margin: 60px 10%;
   }

   #p_industrial_doctor {
      margin: 60px 10%;
   }

   #p_industrial_doctor .animation_box {
      margin: 20px 10% 0;
   }

   .sidebar_columns {
      display: flex;
   }

   .sidebar_columns main {
      flex-grow: 1;
      margin: 0 20px 0 10%;
   }

   #archive .inner {
      margin: 0;
   }

   .sidebar_columns #sidebar {
      margin: 0 10% 0 0;
   }

   #single {
      margin: 0;
   }

   #p_respiratory .inner {
      margin: 0 10%;
   }

   #p_internal_medicine .inner {
      margin: 0 10%;
   }

   #online .column .right a {
      margin: 20px 0 20px auto;
   }

   #online {
      padding: 60px 5%;
   }

   #p_online_layer .inner {
      margin: 0 10%;
   }

   #p_online_layer .columns1 .left,
   #p_online_layer .columns1 .right {
      padding: 20px;
   }

   #p_medical_examination {
      margin: 60px 15%;
   }

   #p_dx .inner{
      margin: 0 10%;
   }

   #covid_19,
   #bronchial_asthma,
   #copd,
   #iip,
   #lung_cancer,
   #influenza,
   #cold,
   #nso,
   #sao,
   #diabetes,
   #hbp,
   #lifestyle_disease,
   #palpitations,
   #stomach_ache {
      margin: 60px 10%;
   }
}

@media (min-width: 1280px) {
   header {
      padding: 30px 5%;
   }

   .index_header .open {
      font-size: 9rem;
      transform: translate(-50%, -90%);
   }

   .index_header .open span {
      font-size: 8.5rem;
   }

   .index_header .pc {
      font-size: 5rem;
   }

   header .header_pc_top nav {
      font-size: 1.5rem;
   }

   header .header_pc_top h1 img {
      width: 400px;
   }

   .sidebar_columns main {
      margin: 0 30px 0 15%;
   }

   .sidebar_columns #sidebar {
      margin: 0 15% 0 0;
   }

   #update {
      margin: 80px 15%;
   }

   #tel_reserve .reservation_phone {
      margin: 0 10%;
   }

   #vaccination {
      margin: 120px 0;
      padding: 60px 15%;
   }

   /* 発熱外来 */
   #fever_outpatient h2 {
      margin-bottom: 40px;
   }

   #long_covid h2 {
      margin-bottom: 40px;
   }

   #feature {
      margin: 120px 0;
      padding: 60px 10%;
   }

   /* 発熱外来の下層ページ */
   #p_fever_outpatient_layer .inner {
      margin: 0 15%;
   }

   #worries {
      margin: 120px 0;
      padding: 80px 10%;
   }

   #worries .respiratory {
      margin-bottom: 120px;
   }

   #worries .internal-medicine h3 {
      right: 5%;
   }

   #online {
      margin: 120px 0;
      padding: 80px 10%;
   }

   #online:before {
      width: 1100px;
   }

   #online h2 {
      margin-bottom: 40px;
   }

   #medical_examination {
      margin: 120px 15%;
   }

   #covid19 {
      margin: 120px 15%;
   }

   #dx {
      margin: 120px 0;
   }

   #covid19 h2 {
      margin-bottom: 30px;
   }

   .timetable_access {
      margin: 120px 0;
      padding: 80px 5%;
   }

   #sns {
      margin: 120px 0 40px;
      padding: 80px 10% 40px;
   }

   footer .columns1 {
      padding: 0 5%;
   }

   footer .columns1_3 .tel_block {
      display: flex;
   }

   footer .columns1_3 .usually {
      margin: 0 20px 0 0;
   }

   footer .columns3 {
      margin: 30px 5% 10px;
   }

   #p_about .inner {
      margin: 0 15%;
   }

   #p_diagnosis .inner {
      margin: 0 15%;
   }

   #p_inspection {
      margin: 60px 15%;
   }

   #p_first {
      margin: 60px 15%;
   }

   #p_industrial_doctor {
      margin: 60px 15%;
   }

   #traffic {
      margin: 150px 10%;
   }

   #p_respiratory .inner {
      margin: 0 15%;
   }

   #p_respiratory .columns .left,
   #p_respiratory .columns .right {
      padding: 20px;
   }

   #p_internal_medicine .inner {
      margin: 0 15%;
   }

   #p_internal_medicine .columns .left,
   #p_internal_medicine .columns .right {
      padding: 20px;
   }

   #p_online_layer .inner {
      margin: 0 15%;
   }

   #p_vaccination {
      margin: 60px 15%;
   }

   #p_dx .inner{
      margin: 0 15%;
   }

   #covid_19,
   #bronchial_asthma,
   #copd,
   #iip,
   #lung_cancer,
   #influenza,
   #cold,
   #nso,
   #sao,
   #diabetes,
   #hbp,
   #lifestyle_disease,
   #palpitations,
   #stomach_ache {
      margin: 60px 15%;
   }
}