@charset "utf-8";
/*
Theme Name: showadori-mental-clinic
Description: 昭和通りメンタルクリニックのテーマ
Author: Snowholding
*/

:root {
   /* カラー */
   --btn_color: #ff936b;
   --bg_color: #fffaf6;
   --txt_color: #7d7d7d;
   --caution_color: #fc6652;

   /* フォント */
   --serif: "Yu Mincho", YuMincho, 游明朝, 游明朝体, serif;
   --sans_serif: "Yu Gothic", YuGothic, 游ゴシック, 游ゴシック体, sans-serif;
}

html {
   font-size: 10px;
   font-family: var(--sans_serif);
   font-weight: 700;
   text-align: justify;
   color: var(--txt_color);
}

body {
   font-size: 1.5rem;
}

a {
   text-decoration: none;
   color: var(--txt_color);
}

h2 {
   margin-bottom: 20px;
}

/* 見出し　ここから */
.h2 {
   border-bottom: 5px dashed var(--btn_color);
   padding-bottom: 10px;
}

.h3 {
   border-left: 6px solid var(--btn_color);
   padding-left: 10px;
}

.h4 {
   text-decoration: underline 2px dashed var(--btn_color);
   display: flex;
   justify-content: center;
}

/* 見出し　ここまで */

/* 予約ボタンブロック　ここから */
.reserve_block {
   margin: 30px 0;
   padding: 20px 10px 10px;
   background-color: white;
   border-radius: 10px;
}

.columns_btn img {
   width: 20px;
}

.columns_btn {
   display: flex;
   justify-content: center;
   margin: 20px 0;
}

.btn_web a,
.btn_tel a {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--btn_color);
   padding: 10px;
   margin: 5px;
   color: white;
   width: 160px;
   font-size: 1.2rem;
   border-radius: 50px;
   transition: all 0.3s;
}

.btn_web a:hover,
.btn_tel a:hover {
   opacity: 0.8;
}

.btn_web a img,
.btn_tel a img {
   margin-right: 5px;
}

.reserve_block .note {
   text-decoration: underline dashed 2px;
   text-decoration-color: var(--caution_color);
   text-align: center;
}

/* 予約ボタンブロック　ここまで */

/* ボタン　ここから */
.btn1 {
   display: flex;
   justify-content: center;
   align-items: center;
   /* background-color: var(--btn_color); */
   background: linear-gradient(270deg, #ff789a 0%, #fc6652 25%, #ff7879 51%, #ffd556 100%);
   background-position: 1% 50%;
   background-size: 200% auto;
   transition: all 0.3s ease-out;
   padding: 20px;
   margin: 30px auto;
   width: 100%;
   color: white;
   border-radius: 50px;
   position: relative;
}

.btn1:hover {
   color: #fff;
   background-position: 80% 50%;
}

.btn1:before {
   position: absolute;
   content: "";
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   height: 10px;
   width: 10px;
   transform: rotate(45deg);
   right: 30px;
}

/* ボタン　ここまで */

/*========= ナビゲーションドロップダウンメニュー ===============*/
/*==ナビゲーション全体の設定*/
nav {
   color: white;
   text-align: center;
   background-color: var(--bg_color);
}

/*ナビゲーションを横並びに*/
nav ul {
   list-style: none;
   display: flex;
   justify-content: center;
}

/*2階層目以降は横並びにしない*/
nav ul ul {
   display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li {
   position: relative;
   margin: 10px;
}

/*ナビゲーションのリンク設定*/
nav ul li a {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-decoration: none;
   color: var(--txt_color);
   padding: 5px 25px;
   border-radius: 10px;
   transition: all 0.3s;
}

nav ul li li a {
   padding: 10px 35px;
}

nav ul li a:hover {
   opacity: 0.8;
}

nav ul li:nth-of-type(2) a:hover {
   opacity: 1;
}

/*==矢印の設定*/

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

@media (min-width: 1024px) {
   nav ul li.has-child::before {
      top: 11px;
   }
}

/*3階層目を持つliの矢印の設定*/
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の指定*/
nav li.has-child ul {
   /*絶対配置で位置を指定*/
   position: absolute;
   left: 0;
   top: 62px;
   z-index: 4;
   /*形状を指定*/
   background: var(--btn_color);
   width: 250px;
   /*はじめは非表示*/
   visibility: hidden;
   opacity: 0;
   /*アニメーション設定*/
   transition: all 0.3s;
   /* width: 500px; */
   /* display: flex; */
   /* flex-wrap: wrap; */
   border-radius: 10px;
}

/* nav li.has-child ul li {
   width: 50%;
   margin: 0;
} */

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

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a {
   color: white;
   border-bottom: solid 1px rgba(255, 255, 255, 0.6);
}

nav li.has-child ul li:last-child a {
   border-bottom: none;
}

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

/*==3階層目*/

/*3階層目の位置*/
nav li.has-child ul ul {
   top: 0;
   left: 182px;
   background: #66adf5;
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active {
   background: #448ed3;
}

/*==768px以下の形状*/

@media (max-width: 768px) {
   nav {
      padding: 0;
   }

   nav ul {
      /* display: block; */
      display: none;
   }

   nav li.has-child ul,
   nav li.has-child ul ul {
      position: relative;
      left: 0;
      top: 0;
      width: 100%;
      visibility: visible;
      /*JSで制御するため一旦表示*/
      opacity: 1;
      /*JSで制御するため一旦表示*/
      display: none;
      /*JSのslidetoggleで表示させるため非表示に*/
      transition: none;
      /*JSで制御するためCSSのアニメーションを切る*/
   }

   /*矢印の位置と向き*/

   nav ul li.has-child::before {
      left: 20px;
   }

   nav ul ul li.has-child::before {
      transform: rotate(135deg);
      left: 20px;
   }

   nav ul li.has-child.active::before {
      transform: rotate(-45deg);
   }

   #g-nav ul {
      display: block;
   }
}

/*========= ナビゲーションドロップダウンメニュー　ここまで ===============*/

/* Topへ戻るボタン　ここから */
#pagetop {
   position: fixed;
   right: 30px;
   bottom: 60px;
   text-indent: -9999px;
   margin: 0;
   z-index: 2;
}

#pagetop a {
   position: relative;
   display: block;
   width: 65px;
   height: 65px;
   border-radius: 50%;
   background: rgba(255, 147, 107, 1);
   transition: opacity 0.6s ease;
}

#pagetop a:hover {
   opacity: 0.3;
}

#pagetop a::before {
   position: absolute;
   top: 7px;
   right: 0;
   bottom: 0;
   left: 0;
   display: block;
   width: 14px;
   height: 14px;
   margin: auto;
   content: "";
   transform: rotate(-45deg);
   border-top: 4px solid #fff;
   border-right: 4px solid #fff;
}

@media (max-width: 767px) {
   #pagetop a {
      width: 45px;
      height: 45px;
   }

   #pagetop a::before {
      top: 5px;
      width: 10px;
      height: 10px;
   }
}

/* Topへ戻るボタン　ここまで */

/*========= ナビゲーションのためのCSS ここから===============*/
#g-nav {
   /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
   position: fixed;
   z-index: 999;
   /*ナビのスタート位置と形状*/
   top: 0;
   right: -120%;
   width: 100%;
   height: 100vh;
   /*ナビの高さ*/
   background: var(--bg_color);
   /*動き*/
   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;
}

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

.g-nav-list_h {
   display: flex;
   align-items: center;
   font-size: 2rem;
   font-family: var(--serif);
   color: var(--txt_color);
}

.g-nav-list_h img {
   margin-right: 10px;
   width: 30px;
}

#g-nav-list .g-nav-list1,
#g-nav-list .g-nav-list3,
#g-nav-list .g-nav-list4 {
   padding: 10px;
}

#g-nav-list .g-nav-list1 ul {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   width: 100%;
   margin: 10px 0;
}

#g-nav-list .g-nav-list1 li {
   width: 45%;
   margin: 5px;
   background-color: var(--btn_color);
   border-radius: 10px;
}

#g-nav-list .g-nav-list2 {
   background-color: white;
}

#g-nav-list .g-nav-list2 a {
   color: var(--txt_color);
   text-decoration: underline 3px dashed var(--btn_color);
}

#g-nav-list .g-nav-list2 ul {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
}

#g-nav-list .g-nav-list3 li {
   width: 90%;
   margin: 20px auto;
   padding: 5px;
   background-color: var(--btn_color);
   border-radius: 10px;
}

#g-nav-list .g-nav-list4 ul {
   display: flex;
   margin: 10px;
}

#g-nav-list .g-nav-list4 li {
   background-color: var(--btn_color);
   border-radius: 50px;
   margin: 5px;
}

#g-nav-list .g-nav-list4 li img {
   width: 20px;
   margin-right: 5px;
}

#g-nav-list .g-nav-list4 li a {
   display: flex;
   flex-direction: row;
   justify-content: center;
   color: white;
}

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

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

/*×に変化*/
.openbtn span {
   display: inline-block;
   transition: all 0.4s;
   position: absolute;
   left: 14px;
   height: 3px;
   border-radius: 2px;
   background-color: var(--btn_color);
   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%;
}

/*========= ナビゲーションのためのCSS ここまで===============*/

/* ヒーローヘッダー　ここから */
.p_hero_header_img img {
   border-radius: 0;
}

.p_hero_header_block {
   position: relative;
}

.p_hero_header_block h1 {
   position: absolute;
   top: 50%;
   left: 50px;
   transform: translatey(-50%);
   color: white;
   letter-spacing: 0.1em;
   font-family: var(--serif);
}

#hero_header {
   position: relative;
}

#hero_header .catchcopy {
   position: absolute;
   top: 50%;
   right: 30px;
   transform: translatey(-50%);
   writing-mode: vertical-rl;
   height: 290px;
   font-size: 2rem;
   z-index: 2;
}

#hero_header .catchcopy p {
   margin: 0 0 0 15px;
}

#hero_header .catchcopy .catchcopy1 {
   background-color: rgba(255, 255, 255, 0.78);
   background-blend-mode: lighten;
   border-radius: 5px;
   padding: 10px 5px;
}

#hero_header .catchcopy .catchcopy2 {
   background-color: rgba(255, 255, 255, 0.78);
   background-blend-mode: lighten;
   border-radius: 5px;
   padding: 10px 5px;
}

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

/*==================================================
スライダーのためのcss　ここから
===================================*/
.slider {
   position: relative;
   z-index: 1;
   /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
   height: 60vh;
   /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

@media (min-width: 768px) {
   .slider {
      height: 90vh;
   }
}

/*　背景画像設定　*/

.slider-item01 {
   background: url(../showadori-mental/assets/img/hero-header1.webp);
}

.slider-item02 {
   background: url(../showadori-mental/assets/img/hero-header2.webp);
}

/* .slider-item03 {
   background: url(../showadori-mental/assets/img/hero-header3.webp);
} */

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

@media (min-width: 768px) {
   .slider-item {
      height: 90vh;
   }
}

/*矢印の設定*/

/* .slick-prev,
.slick-next {
   position: absolute;
   z-index: 3;
   top: 42%;
   cursor: pointer;
   outline: none;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   height: 25px;
   width: 25px;
} */

.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: 8px;
   /*ドットボタンのサイズ*/
   height: 8px;
   /*ドットボタンのサイズ*/
   display: block;
   border-radius: 50%;
   background: #fff;
   /*ドットボタンの色*/
}

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

/* スライダーのためのcss　ここまで */

header {
   margin: 10px 0;
}

header a {
   transition: all 0.3s;
}

header a:hover {
   opacity: 0.8;
}

header .inner {
   margin: 0 10px;
}

header .columns_l img {
   width: 250px;
}

header .columns_r img {
   width: 20px;
}

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

header .btn_block a {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--btn_color);
   padding: 10px;
   margin: 5px;
   color: white;
   width: 150px;
   font-size: 1.2rem;
   border-radius: 50px;
}

header .columns_r_block span {
   color: var(--caution_color);
}

header .btn_block img {
   margin-right: 10px;
}

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

header .btn_line a {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #57c76d;
   padding: 10px;
   margin: 10px;
   color: white;
   width: 200px;
   font-size: 1.2rem;
   border-radius: 50px;
}

header .btn_line img {
   margin-right: 10px;
}

#parking_ticket {
   background-color: var(--bg_color);
   padding: 30px 0;
   margin: 60px 0;
}

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

#parking_ticket p {
   text-align: center;
}

#parking_ticket span {
   color: var(--caution_color);
   font-size: 1.7rem;
}

/* お知らせ　ここから */
#news {
   background-color: var(--bg_color);
   margin: 60px 0;
   padding: 50px 0;
}

#news h2 {
   display: flex;
   justify-content: center;
}

#news .inner {
   margin: 0 10px;
   padding: 30px 10px;
   background-color: white;
   border-radius: 10px;
}

#news article {
   display: block;
   padding-bottom: 4px;
   position: relative;
   margin-bottom: 25px;
}

#news article:after {
   background-color: var(--btn_color);
   bottom: 0;
   content: "";
   display: block;
   height: 2px;
   left: 0;
   position: absolute;
   transition: 0.5s all;
   width: 100%;
}

#news article:hover:after {
   width: 0;
}

#news a {
   transition: all 0.3s;
}

#news a:hover {
   opacity: 0.8;
}

#news .btn1 {
   margin: 30px 0 30px auto;
   width: 200px;
}

/* お知らせ　ここまで */

/* アーカイブページ　ここから */
#archive .inner article {
   margin: 30px 0;
}

#archive .inner article:first-of-type {
   margin-top: 0;
}

#archive .inner article .ttl {
   border-bottom: 2px dashed var(--btn_color);
   margin-top: 5px;
}

#archive a {
   transition: all 0.3s;
}

#archive a:hover {
   opacity: 0.8;
}

/* アーカイブページ　ここまで */

/* シングルページ　ここから */
.sidebar_columns {
   background-color: var(--bg_color);
   padding: 50px 10px;
   margin: 60px 0;
}

#single article img {
   width: 300px;
}

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

#single p a,
#single span a {
   text-decoration: underline 3px var(--caution_color);
}

#single .previous_next_post {
   display: flex;
   justify-content: space-between;
   margin: 30px 0;
}

#single .post_link {
   border-bottom: 2px solid var(--btn_color);
}

#single .post_link a {
   transition: all 0.3s;
}

#single .post_link a:hover {
   opacity: 0.8;
}

/* シングルページ　ここまで */
/* パンくずリスト　ここから */
#breadcrumb {
   margin: 0 20px;
}

/* パンくずリスト　ここまで */
/*wp-pagenavi ここから*/
.wp-pagenavi {
   clear: both;
   text-align: center;
   margin: 40px 0;
}

.wp-pagenavi a,
.wp-pagenavi span {
   color: var(--btn_color);
   background-color: #ffffff;
   padding: 8px 15px;
   margin: 0 2px;
   -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 var(--btn_color);
}

.wp-pagenavi a:hover {
   color: #fff;
   background-color: var(--btn_color);
}

.wp-pagenavi span.current {
   color: #fff;
   background-color: var(--btn_color);
}

/*wp-pagenavi ここまで*/

/* サイドバー　ここから */
#sidebar {
   border: 1px solid var(--btn_color);
   border-radius: 10px;
   padding: 30px 0;
   background-color: white;
}

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

#sidebar h2 {
   border-bottom: 2px solid var(--txt_color);
}

#sidebar li {
   margin: 15px 0;
   border-bottom: 1px dashed var(--btn_color);
}

#archive_list {
   margin: 20px 0;
}

#sidebar a {
   transition: all 0.3s;
}

#sidebar a:hover {
   opacity: 0.8;
}

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

/* 院長コラム　ここから */
#column {
   background-color: var(--bg_color);
   margin: 60px 0;
   padding: 50px 0;
}

#column h2 {
   display: flex;
   justify-content: center;
}

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

#column .column {
   background-color: white;
   border-radius: 10px;
   padding: 20px;
}

#column .column article .block_inner {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   margin-left: 15px;
}

#column .column article .block_inner .left {
   margin-right: 15px;
}

#column .column article .block_inner .right {
   border-bottom: 2px solid var(--btn_color);
}

#column .column .block {
   padding: 15px;
   margin: 20px 0;
   border-radius: 10px;
   box-shadow: 2px 2px 2px var(--btn_color);
   background-color: #ffffff;
   opacity: 1;
   background-image: linear-gradient(#f1f1f1 1.2000000000000002px, transparent 1.2000000000000002px),
      linear-gradient(to right, #f1f1f1 1.2000000000000002px, #ffffff 1.2000000000000002px);
   background-size: 24px 24px;
}

#column .column time {
   margin-bottom: 5px;
   display: block;
}

#column a {
   transition: all 0.3s;
}

#column a:hover {
   opacity: 0.8;
}

/* 院長コラム　ここまで */

/* こんな症状ありませんか　ここから */
#symptoms {
   background-color: var(--bg_color);
   margin: 60px 0;
   padding: 50px 0;
}

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

#symptoms ul {
   background-color: white;
   padding: 30px;
   border-radius: 10px;
}

#symptoms li img {
   width: 20px;
   margin-right: 10px;
}

#symptoms .columns_l {
   padding: 30px;
}

#symptoms li {
   display: flex;
   /* justify-content: center; */
   margin: 10px;
}

/* こんな症状ありませんか　ここまで */

/* クリニック情報　ここから */
#clinic_date {
   background-color: var(--bg_color);
   margin: 60px 0 40px;
   padding: 50px 0;
   border-top: 5px solid var(--btn_color);
   border-bottom: 5px solid var(--btn_color);
}

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

#clinic_date .block {
   margin: 20px 0;
}

#clinic_date h2 {
   display: flex;
   justify-content: center;
}

#clinic_date h3 {
   display: flex;
   justify-content: center;
}

#clinic_date .table_1 {
   border: 2px solid var(--btn_color);
   text-align: center;
}

#clinic_date .table_1 th {
   padding: 5px;
   background-color: var(--btn_color);
   color: white;
   white-space: nowrap;
}

#clinic_date .table_1 td {
   background-color: white;
}

#clinic_date .table_1 td {
   border-bottom: 1px dashed var(--btn_color);
}

#clinic_date .table_1 tr:last-of-type td {
   border-bottom: none;
}

#clinic_date .table_2 {
   border: 2px solid var(--btn_color);
   text-align: center;
}

#clinic_date .table_2 th {
   padding: 5px;
   background-color: var(--btn_color);
   color: white;
   width: 180px;
}

#clinic_date .table_2 td {
   background-color: white;
}

#clinic_date .table_2 td {
   border-bottom: 1px dashed var(--btn_color);
}

#clinic_date .table_2 tr:last-of-type td {
   border-bottom: none;
}

#clinic_date .table_block em {
   background-color: var(--btn_color);
   color: white;
   padding: 5px 8px;
   margin-right: 10px;
}

#clinic_date .btn1:before {
   right: 15px;
}

/* クリニック情報　ここまで */

/* フッター　ここから */
footer {
   text-align: center;
}

footer .inner {
   margin: 0 10px;
}

footer img {
   width: 300px;
}

footer .columns_l {
   display: flex;
   justify-content: center;
}

footer .columns_r {
   margin: 10px 0;
}

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

footer .btn_block {
   display: flex;
   justify-content: center;
}

footer .btn_block a {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--btn_color);
   padding: 10px;
   margin: 5px;
   color: white;
   width: 150px;
   font-size: 1.2rem;
   border-radius: 50px;
}

footer .middle {
   margin: 30px 0;
   background-color: var(--bg_color);
}

footer .middle .columns_r {
   padding: 30px;
}

footer .bottom li {
   margin: 10px 0;
}

footer a {
   transition: all 0.3s;
}

footer a:hover {
   opacity: 0.8;
}

footer .bottom .menu_list {
   margin: 30px 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

footer .bottom .menu_list li {
   position: relative;
   padding-left: 30px;
   margin: 5px 0;
}

footer .bottom .menu_list li:before {
   position: absolute;
   content: "";
   width: 10px;
   height: 10px;
   border-radius: 10px;
   background-color: var(--btn_color);
   top: calc(100% / 2 - 5px);
   left: 10px;
}

footer .bottom .symptoms_list {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
}

footer .bottom .symptoms_list li {
   margin: 10px;
   padding-left: 15px;
   position: relative;
}

footer .bottom .symptoms_list li:before {
   position: absolute;
   content: "";
   width: 10px;
   height: 2px;
   background-color: var(--btn_color);
   top: calc(100% / 2 - 1px);
   left: 0;
}

footer .bottom .symptoms_list li:first-of-type:before {
   display: none;
}

footer .bottom .symptoms_list li:first-of-type {
   background-color: var(--btn_color);
   border-radius: 10px;
   padding: 5px 8px;
   color: white;
}

footer .table_2 {
   margin: 30px 0 0;
}

footer .table_2 {
   border: 2px solid var(--btn_color);
   text-align: center;
}

footer .table_2 th {
   padding: 5px;
   background-color: var(--btn_color);
   color: white;
   width: 180px;
}

footer .table_2 td {
   background-color: var(--bg_color);
}

footer .table_2 td {
   border-bottom: 1px dashed var(--btn_color);
}

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

footer .table_block em {
   background-color: var(--btn_color);
   padding: 5px 8px;
   color: white;
   margin-right: 10px;
}

footer .table_block p {
   text-align: left;
}

.copyright {
   margin-top: 20px;
   padding-bottom: 20px;
}

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

/* 診療案内　ここから */
#p_medical_information {
   margin: 60px 0;
}

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

#p_medical_information .symptoms_list {
   background-color: var(--bg_color);
   margin: 60px 0;
   padding: 50px 10px;
   border-radius: 10px;
}

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

#p_medical_information .connection {
   background-color: white;
   border-radius: 10px;
   padding: 20px 10px 10px;
}

#p_medical_information .first p {
   text-align: center;
}

#p_medical_information img {
   margin: 30px 0;
}

#p_medical_information .columns_btn {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   margin: 20px 0;
}

#p_medical_information .columns_btn .btn1 {
   width: 140px;
   margin: 5px;
   padding: 10px;
}

#p_medical_information .columns_btn .btn1:before {
   display: none;
}

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

/* 当院について　ここから */
#p_about {
   margin: 60px 0;
   padding: 50px 0;
   background-color: var(--bg_color);
}

#p_about .block1,
#p_about .block2 {
   margin-bottom: 60px;
}

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

#p_about h2 {
   display: flex;
   justify-content: center;
   align-items: center;
}

#p_about .catchcopy {
   display: flex;
   justify-content: center;
   text-decoration: underline 4px solid var(--btn_color);
   margin: 30px 0;
   font-size: 2rem;
}

#p_about h2 img {
   width: 40px;
   margin-right: 10px;
}

#p_about .message {
   background: url(../showadori-mental/assets/img/logo_only.svg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 300px;
   background-color: rgba(255, 255, 255, 0.9);
   background-blend-mode: lighten;
   border-radius: 10px;
   padding: 30px;
}

#p_about .doctor_name {
   display: flex;
   align-items: center;
   justify-content: flex-end;
}

#p_about .doctor_name span {
   font-family: var(--serif);
   font-size: 1.8rem;
}

#p_about .columns {
   background-color: white;
   padding: 30px;
   margin: 30px 0;
   border-radius: 10px;
}

#p_about .career {
   padding: 10px 30px;
}

#p_about .career h3 {
   font-family: var(--serif);
}

#p_about .career .columns_l,
#p_about .career .columns_c,
#p_about .career .columns_r {
   margin: 30px 0;
}

#p_about .career ul {
   margin: 10px 0;
}

#p_about .career li {
   margin: 5px 0;
   position: relative;
   padding-left: 35px;
}

#p_about .career li:before {
   position: absolute;
   content: "";
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: var(--btn_color);
   top: calc(100% / 2 - 5px);
   left: 20px;
}

#p_about .block3 h2 {
   justify-content: flex-start;
}

#p_about .block3 .columns {
   display: flex;
   flex-wrap: wrap;
   padding: 10px;
}

#p_about .block3 .img_block {
   width: calc(100% / 2);
   padding: 10px;
   margin: 10px 0;
}

#p_about .p_about_img {
   margin-bottom: 20px;
   transition: all 0.5s;
}

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

#p_about .p_about_img img {
   box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.4);
}

/* 当院について　ここまで */
/* 初めて受診される患者様へ　ここから */
#p_first {
   margin: 60px 0;
   padding: 50px 0;
   background-color: var(--bg_color);
}

#p_first .inner {
   margin: 0 10px;
   background-color: white;
   border-radius: 10px;
   padding: 50px 30px;
}

#p_first h2 {
   display: flex;
   justify-content: center;
   align-items: center;
}

#p_first .first_message {
   font-size: 1.8rem;
   background: linear-gradient(transparent 70%, #ffdcb8 0%);
   display: inline;
   /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
   padding: 0 2px 4px;
}

#p_first .block {
   margin: 50px 0 0;
}

#p_first ol {
   border: 2px dashed var(--btn_color);
   border-radius: 10px;
   padding: 20px;
   margin: 20px 10px;
   counter-reset: number 0;
}

#p_first ol li:before {
   counter-increment: number 1;
   /* number カウンタの増加数をセット */
   content: counter(number) ". ";
   /* 表示形式を指定 */
   color: var(--caution_color);
}

#p_first ol li {
   margin: 5px 0;
}

/* 初めて受診される患者様へ　ここまで */
/* よくあるご質問　ここから */
#p_question {
   margin: 60px 0;
   padding: 50px 0;
   background-color: var(--bg_color);
}

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

#p_question .block {
   margin: 60px 0;
}

#p_question .qa {
   background-color: white;
   border-radius: 10px;
   padding: 20px;
}

#p_question .qa span {
   text-decoration: underline 2px var(--btn_color);
}

#p_question .qa img {
   width: 60px;
}

#p_question .qa .btn1 {
   width: 200px;
}

#p_question .video_columns {
   display: flex;
   flex-direction: column;
}

#p_question .video_columns .block {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 10px 0;
}

#p_question .youtube {
   width: 100%;
   height: auto;
   aspect-ratio: 16 / 9;
}

#p_question .canon_video {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 10px 0;
}

#p_question .qa_block {
   display: flex;
   align-items: center;
   margin: 10px 0;
}

#p_question .qa_block.q {
   text-decoration: underline 3px dashed var(--btn_color);
}

#p_question .qa_block.a {
   display: flex;
   align-items: flex-start;
   padding-left: 20px;
}

#p_question .qa table {
   border: 2px solid var(--btn_color);
   margin: 0 auto 40px;
   width: 90%;
}

#p_question .qa table th {
   padding: 10px;
   border-right: 1px dashed var(--btn_color);
}

#p_question .qa table td {
   padding: 10px;
   text-align: right;
}

#p_question .qa table tr:nth-of-type(even) {
   background-color: var(--bg_color);
}

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

/* アクセス　ここから */
#p_access {
   margin: 60px 0;
   padding: 50px 0;
   background-color: var(--bg_color);
}

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

#p_access .block_inner {
   margin: 40px 0;
}

#p_access .transportation h3 {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
}

#p_access .transportation img {
   width: 30px;
   margin-right: 5px;
}

/* アクセス　ここまで */

/* 採用情報　ここから */
#p_recruit {
   margin: 60px 0;
   padding: 50px 0;
   background-color: var(--bg_color);
}

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

#p_recruit table {
   border: 2px solid var(--btn_color);
}

#p_recruit table th {
   background-color: var(--btn_color);
   color: white;
   padding: 10px;
   width: 130px;
   text-align: center;
}

#p_recruit table td {
   border-bottom: 1px dashed var(--btn_color);
   padding: 10px;
}

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

/* 採用情報　ここまで */


/* 症状一覧　ここから */
.symptoms_common .inner {
   margin: 0 10px;
}

.symptoms_common ul {
   margin: 20px;
   padding: 20px;
   border: 2px dashed var(--btn_color);
   background-color: white;
   border-radius: 10px;
}

.symptoms_common ul li {
   padding-left: 15px;
   margin: 5px 0;
   position: relative;
}

.symptoms_common ul li:before {
   position: absolute;
   content: "";
   width: 10px;
   height: 10px;
   border-radius: 10px;
   background-color: var(--btn_color);
   top: calc(100% / 2 - 5px);
   left: 0;
}

.symptoms_common .block {
   background-color: var(--bg_color);
   border-radius: 10px;
   margin: 60px 0;
   padding: 30px;
   counter-reset: number 0;
}

.symptoms_common .block ol li:before {
   counter-increment: number 1;
   /* number カウンタの増加数をセット */
   content: counter(number) ". ";
   /* 表示形式を指定 */
   color: var(--caution_color);
}

.symptoms_common ol li {
   margin: 30px 0;
}

.symptoms_common .columns {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.symptoms_common .block_inner2 {
   background-color: white;
   border-radius: 10px;
   margin: 20px;
   padding: 20px;
}

.symptoms_common img {
   margin: 30px 0;
}

/* 躁うつ病　ここから */
.symptoms_common .columns.block {
   margin: 0;
}

/* 躁うつ病　ここまで */

/* 症状一覧　ここまで */

@media (min-width: 768px) {
   header .columns {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   header .columns_r .columns {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
   }

   header .btn_block {
      justify-content: flex-end;
   }

   header .btn_block a {
      width: 170px;
      /* padding: 20px; */
      font-size: 1.5rem;
   }

   header .btn_line {
      justify-content: flex-end;
   }

   header .btn_line a {
      width: 170px;
      /* padding: 20px; */
      font-size: 1.5rem;
   }

   header .columns_r img {
      width: 25px;
   }

   #hero_header .catchcopy {
      font-size: 3.4rem;
      height: 480px;
      right: 70px;
   }

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

   #news .inner {
      margin: 0 30px;
      padding: 30px;
      display: flex;
      align-items: center;
   }

   #news h2 {
      width: 40%;
      margin-bottom: 0;
   }

   #news .ttl {
      width: 60%;
   }

   #news .date_ttl {
      display: flex;
      justify-content: flex-start;
   }

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

   #column .column {
      display: flex;
      flex-wrap: wrap;
      padding: 30px;
   }

   #column article {
      width: calc(100% / 2);
      padding: 10px 15px;
   }

   .sidebar_columns {
      padding: 50px 30px;
   }

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

   #column .btn1 {
      width: 300px;
   }

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

   #symptoms h2 {
      display: flex;
      justify-content: center;
   }

   #symptoms .columns {
      display: flex;
   }

   #symptoms .columns_l {
      padding: 0 20px 0 0;
      flex-grow: 1;
   }

   #symptoms .columns_r {
      width: 400px;
   }

   #symptoms .columns_r img {
      object-fit: cover;
      height: 500px;
   }

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

   #clinic_date .columns {
      display: flex;
      margin: 30px 0;
   }

   #clinic_date .columns .block {
      width: calc(100% / 2);
      padding-right: 20px;
      margin: 0;
   }

   #clinic_date .columns .table_block {
      width: calc(100% / 2);
   }

   #clinic_date .btn_web a,
   #clinic_date .btn_tel a {
      padding: 20px;
      margin: 10px;
      width: 300px;
      font-size: 1.5rem;
   }

   #clinic_date .btn_web a img,
   #clinic_date .btn_tel a img {
      width: 30px;
   }

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

   footer .btn_block a {
      padding: 20px;
      width: 200px;
      font-size: 1.5rem;
   }

   footer .columns_r img {
      width: 30px;
   }

   footer .columns.middle .columns {
      display: flex;
   }

   footer .columns.middle .columns_l {
      width: 60%;
   }

   footer .columns.middle .columns_r {
      width: 40%;
      display: flex;
      justify-content: center;
      flex-direction: column;
   }

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

   #p_medical_information .symptoms_list {
      padding: 50px 30px;
   }

   #p_medical_information .block1 .columns {
      display: flex;
      flex-direction: row-reverse;
   }

   #p_medical_information .block1 .columns .columns_r img {
      margin-left: 0;
      margin-right: 20px;
   }

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

   #p_medical_information .columns .columns_l {
      flex-grow: 1;
   }

   #p_medical_information .columns .columns_r img {
      width: 400px;
      margin-left: 20px;
   }

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

   #p_about .message {
      padding: 50px;
   }

   #p_about .career {
      display: flex;
      justify-content: space-around;
      padding: 10px;
   }

   #p_about .career .columns_l,
   #p_about .career .columns_c,
   #p_about .career .columns_r {
      padding: 10px;
      margin: 20px 0;
   }

   #p_about .block3 .img_block {
      width: calc(100% / 3);
      padding: 15px;
   }

   #p_about .block3 .columns {
      padding: 30px;
   }

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

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

   #p_access iframe {
      height: 500px;
   }

   #p_access .address {
      display: flex;
      justify-content: space-between;
   }

   #p_access .address .btn1 {
      margin: 10px auto 0;
   }

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

   .symptoms_common .columns {
      flex-direction: row;
   }

   .symptoms_common .columns_l {
      flex-grow: 1;
      margin-right: 20px;
   }

   .symptoms_common .columns_r img {
      width: 300px;
   }

   .symptoms_common .block {
      padding: 50px;
   }

   .symptoms_common .inner {
      margin: 0 30px;
   }

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

@media (min-width: 1024px) {
   .p_hero_header_img img {
      object-fit: cover;
      height: 500px;
   }

   .p_hero_header_block h1 {
      font-size: 4rem;
   }

   header .columns_l img {
      width: 350px;
   }

   header .btn_block a {
      width: 200px;
      font-size: 2rem;
   }

   header .inner {
      margin: 0 5%;
   }

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

   #news .inner {
      padding: 30px 5%;
      margin: 0 10%;
   }

   .sidebar_columns main {
      flex-grow: 1;
   }

   .sidebar_columns {
      display: flex;
      justify-content: space-between;
      padding: 50px 5%;
   }

   #sidebar {
      margin-left: 20px;
   }

   #sidebar .inner {
      margin: 0 30px;
      width: 250px;
   }

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

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

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

   footer .inner {
      margin: 0 5%;
   }

   footer .btn_block a {
      width: 300px;
      font-size: 2.5rem;
   }

   footer .columns.bottom .inner {
      display: flex;
   }

   footer .bottom .menu_list {
      width: 30%;
      padding: 10px;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
   }

   footer .bottom .symptoms_list {
      width: 30%;
      padding: 10px;
   }

   footer .bottom .table_block {
      flex-grow: 1;
      padding: 10px;
   }

   footer .bottom .symptoms_list {
      display: block;
      text-align: left;
   }

   footer .bottom .symptoms_list li:first-of-type {
      margin-top: 0;
      display: inline-block;
   }

   footer .bottom .symptoms_list li:not(:first-of-type) {
      padding-left: 25px;
   }

   footer .bottom .symptoms_list li:before {
      left: 10px;
   }

   footer .table_2 {
      margin: 0;
   }

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

   #p_medical_information .columns_btn .btn1 {
      width: 160px;
      padding: 20px;
   }

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

   #p_about .career .columns_l,
   #p_about .career .columns_c,
   #p_about .career .columns_r {
      padding: 20px;
   }

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

   #p_question .qa img {
      width: 100px;
   }

   #p_question .video_columns {
      flex-direction: row;
      justify-content: space-around;
   }

   #p_question .video_columns .block {
      margin: 10px;
   }

   #p_question .canon_video .youtube {
      max-width: 600px;
   }

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

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

   .symptoms_common .inner {
      margin: 0 10%;
   }

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

@media (min-width: 1280px) {
   #parking_ticket .inner {
      margin: 0 15%;
   }

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

   .sidebar_columns {
      padding: 50px 10%;
   }

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

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

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

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

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

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

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

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

   .symptoms_common .inner {
      margin: 0 15%;
   }

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