@charset "utf-8";
/*
Theme Name: 中の島メンタルクリニック
Description: 中の島メンタルクリニックのテーマ
Author: Snowholding
*/

:root {
   /* カラー */
   --txt_color_01: #6e5526;
   --txt_color_02: #434343;
   --base_01: #f3f3ed;
   --btn_01: #827628;

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

html {
   text-align: justify;
   font-family: var(--sans_serif);
   font-weight: 600;
   color: var(--txt_color_02);
   background: var(--base_01);
   scroll-behavior: smooth;
}

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

/* パンくず　ここから */
.breadcrumb_area {
   padding: 10px;
   background: #eeeeee;
}
/* パンくず　ここまで */

/* Topへ戻るボタン　ここから */
#pagetop {
   position: fixed;
   right: 0;
   bottom: 60px;
   text-indent: -9999px;
   margin: 0;
   z-index: 2;
}
#pagetop a {
   position: relative;
   display: block;
   width: 65px;
   height: 65px;
   background: var(--btn_01);
   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: 3px solid #fff;
   border-right: 3px solid #fff;
}
@media (max-width: 767px) {
   #pagetop a {
      width: 45px;
      height: 45px;
   }
   #pagetop a::before {
      top: 5px;
      width: 10px;
      height: 10px;
   }
}
/* Topへ戻るボタン　ここまで */

/* スマホフッターメニュー　ここから */
#sp-fixed-menu {
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}

#sp-fixed-menu ul {
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
   width: 100%;
}

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

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

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

#sp-fixed-menu li a {
   color: #fff;
   text-align: center;
   display: block;
   width: 100%;
   height: 55px;
   display: flex;
   justify-content: center;
   align-items: center;
}
#sp-fixed-menu li a span {
   line-height: 1.4;
}
#sp-fixed-menu img {
   width: 20px;
   margin-right: 10px;
}
/* スマホフッターメニュー　ここまで */

/* ボタン　ここから */
.btn {
   background: var(--btn_01);
   padding: 20px;
   border-radius: 50px;
   text-align: center;
   color: white;
   display: flex;
   justify-content: center;
   margin: 30px auto;
   width: 300px;
   border: 2px solid var(--btn_01);
   transition: all 0.2s;
}
.btn:hover {
   background: white;
   color: var(--btn_01);
}
/* ボタン　ここまで */

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

.slider-item01 {
   background: url(../nakanoshimamental/assets/img/slider01.webp);
}

.slider-item02 {
   background: url(../nakanoshimamental/assets/img/slider02.webp);
}

.slider-item03 {
   background: url(../nakanoshimamental/assets/img/slider03.webp);
}

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

/*矢印の設定*/

.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; /*ドットボタンの現在地表示の色*/
}

/* スライダ―　ここまで */

/* グローバルナビ　ここから */
nav {
   background: white;
   color: var(--txt_color_01);
   text-align: center;
}

/*ナビゲーションを横並びに*/
nav ul {
   list-style: none;
   display: flex;
   justify-content: center;
}
/*2階層目以降は横並びにしない*/
nav ul ul {
   display: block;
}

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

/*ナビゲーションのリンク設定*/
nav ul li a {
   display: block;
   text-decoration: none;
   color: var(--txt_color_01);
   padding: 20px 25px;
   transition: all 0.3s;
}

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

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

/*==矢印の設定*/

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

/*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(--txt_color_01);
   width: 600px;
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   /*はじめは非表示*/
   visibility: hidden;
   opacity: 0;
   /*アニメーション設定*/
   transition: all 0.3s;
}
nav li.has-child ul li {
   width: calc(100% / 2);
}

/*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: #fff;
   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 screen and (max-width: 768px) {
   nav {
      padding: 0;
      /* display: none; */
   }

   nav ul {
      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 a {
      border-bottom: none;
   }

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

   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 {
   /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
   position: fixed;
   z-index: 999;
   /*ナビのスタート位置と形状*/
   top: 0;
   right: -120%;
   width: 100%;
   height: 100vh; /*ナビの高さ*/
   background: var(--base_01);
   /*動き*/
   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%);
   display: block;
}

/*リストのレイアウト設定*/

#g-nav li {
   list-style: none;
   text-align: center;
}

#g-nav li a {
   color: var(--txt_color_02);
   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: 0;
   right: 10px;
   cursor: pointer;
   width: 50px;
   height: 50px;
}

/*×に変化*/
.openbtn span {
   display: inline-block;
   transition: all 0.4s;
   position: absolute;
   left: 14px;
   height: 3px;
   border-radius: 2px;
   background-color: var(--btn_01);
   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%;
}
/* ハンバーガーメニュー　ここまで */

/* アコーディオン　ここから */
/*アコーディオン全体*/
.accordion-area {
   list-style: none;
   width: 96%;
   max-width: 900px;
   margin: 0 auto;
}

.accordion-area li {
   margin: 10px 0;
}

.accordion-area section {
   border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.title {
   position: relative; /*+マークの位置基準とするためrelative指定*/
   cursor: pointer;
   font-size: 1.4rem;
   font-weight: bold;
   padding: 3% 3% 3% 50px;
   transition: all 0.5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after {
   position: absolute;
   content: "";
   width: 15px;
   height: 2px;
   background-color: #333;
}
.title::before {
   top: 48%;
   left: 15px;
   transform: rotate(0deg);
}
.title::after {
   top: 48%;
   left: 15px;
   transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
.title.close::before {
   transform: rotate(45deg);
}

.title.close::after {
   transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
   display: none; /*はじめは非表示*/
   background: var(--base_01);
   margin: 0 3% 3% 3%;
   padding: 3%;
}
/* アコーディオン　ここまで */

/* ページナビ　ここから */

/* ページナビ　ここまで */
.wp-pagenavi {
   margin: 30px 0;
   text-align: center;
}
/* ヘッダー　ここから */

header .container {
   display: flex;
   flex-direction: column;
   padding-top: 5px;
}
.logo_img a {
   transition: all 0.2s;
}
.logo_img a:hover {
   opacity: 0.8;
}
header .container .columns {
   display: flex;
   flex-direction: row;
   align-items: center;
}
header .logo_img img {
   width: 150px;
}
header .tel_btn img {
   width: 15px;
   margin-right: 10px;
}
header .tel_btn a {
   transition: all 0.2s;
}
header .tel_btn a:hover {
   opacity: 0.8;
}
header .tel_btn {
   margin: 5px;
}
header .tel_btn span {
   line-height: 1.3;
}
header .tel_btn a {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: white;
   background: var(--btn_01);
   padding: 10px;
   font-size: 1.2rem;
   border-radius: 10px;
}
header .web_btn {
   margin: 5px;
}
header .web_btn a {
   transition: all 0.2s;
}
header .web_btn a:hover {
   opacity: 0.8;
}
header .web_btn img {
   width: 20px;
   margin-right: 10px;
}
header .web_btn a {
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   background: var(--btn_01);
   padding: 12px;
   font-size: 1.3rem;
   border-radius: 10px;
}
/* ヘッダー　ここまで */
main {
   position: relative;
}
.catchcopy {
   writing-mode: vertical-rl;
   position: absolute;
   top: 45px;
   right: 20px;
   z-index: 2;
}
.catchcopy h2 {
   background: white;
   background-color: rgba(255, 255, 255, 0.8);
   padding: 10px 2px;
   margin: 5px;
   height: 330px;
}
.catchcopy p {
   background: white;
   background-color: rgba(255, 255, 255, 0.8);
   padding: 10px 2px;
   margin: 5px;
   height: 160px;
}
.catchcopy .block {
   margin-top: 25px;
   margin-right: 20px;
}
.catchcopy p:last-of-type {
   height: 330px;
}
.heading2 {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 40px;
   line-height: 1.6;
}
.heading2 span {
   font-size: 1.2rem;
   opacity: 0.8;
   font-family:
      Libre Baskerville,
      serif;
}
#info {
   margin: 100px 10px 60px;
   padding: 30px 0;
   background: white;
}
#info .inner {
   margin: 0 10px;
}
#info .date_ttl {
   margin: 10px 0;
}
#info .date_ttl p:last-of-type {
   margin-top: 0;
}
#info a {
   position: relative;
   display: inline-block;
   text-decoration: none;
}
#info a:after {
   position: absolute;
   bottom: 10px;
   left: 0;
   content: "";
   width: 100%;
   height: 1px;
   background: var(--txt_color_02);
   transform: scale(1, 1);
   transform-origin: left top;
   transition: transform 0.3s;
}
#info a:hover:after {
   transform-origin: right top;
   transform: scale(0, 1);
}
#covid {
   margin: 60px 10px;
   padding: 50px 0;
   background: white;
}
#covid .inner {
   margin: 0 10px;
}
#covid h2 {
   text-align: center;
   margin-bottom: 30px;
   /* position: relative; */
}
/* #covid h2:before {
  position: absolute;
  content: "";
  width: 100px;
  height: 4px;
  background-color: var(--btn_01);
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
} */
#covid .notice {
   text-decoration: underline;
}

#worries {
   background: var(--base_01);
   margin: 60px 0;
   padding: 80px 0 20px;
}
#worries .inner {
   border: 1px solid var(--btn_01);
   margin: 0 10px;
}
#worries section {
   margin: -30px 10px 50px;
}

#worries .img {
   margin-right: 10px;
}
#worries img {
   width: 20px;
}
#worries .container {
   margin: 40px 30px;
   background: white;
   padding: 20px;
}
#worries h2 {
   background: var(--base_01);
   padding: 10px;
}
#worries h3 {
   margin-bottom: 20px;
   display: flex;
}
#worries h3 img {
   transform: rotate(-25deg);
}
#worries li {
   display: flex;
}

#feature {
   margin: 60px 0;
   padding: 50px 0;
   background: #e3e3e3;
}
#feature .inner {
   margin: 0 10px;
}

#feature .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 30px 0;
}
#feature .heading2 {
   background: none;
}
#feature h3 {
   font-family:
      Libre Baskerville,
      serif;
   letter-spacing: 0.1em;
   color: var(--btn_01);
}
#feature .img {
   border: 3px dashed var(--btn_01);
   padding: 5px;
   border-radius: 50%;
   margin: 15px 0;
}
#feature img {
   border: 5px solid var(--btn_01);
   border-radius: 50%;
   object-fit: cover;
   width: 200px;
   height: 200px;
}

#qa {
   margin: 60px 0;
   padding: 50px 0;
   background-color: #ffffff;
   opacity: 1;
   background-image: linear-gradient(#f3f3ed 1.8px, transparent 1.8px),
      linear-gradient(90deg, #f3f3ed 1.8px, transparent 1.8px), linear-gradient(#f3f3ed 0.9px, transparent 0.9px),
      linear-gradient(90deg, #f3f3ed 0.9px, #ffffff 0.9px);
   background-size:
      45px 45px,
      45px 45px,
      9px 9px,
      9px 9px;
   background-position:
      -1.8px -1.8px,
      -1.8px -1.8px,
      -0.9px -0.9px,
      -0.9px -0.9px;
}
#qa .heading2 {
   background: none;
}
#qa li a {
   text-decoration: underline;
}
#consultationhours {
   margin: 60px 0;
   padding: 50px 0;
   background: repeating-linear-gradient(
      -40deg,
      rgba(243, 243, 237, 0.6),
      rgba(243, 243, 237, 0.6) 8px,
      rgba(255, 255, 255, 0.6) 0,
      rgba(255, 255, 255, 0.6) 15px
   );
}
#consultationhours .inner {
   margin: 0 10px;
}
#consultationhours .heading2 {
   background: none;
}
#consultationhours table {
   border: 1px solid var(--btn_01);
   width: 100%;
   font-size: 1.2rem;
   text-align: center;
}
#consultationhours table th {
   padding: 2px;
   background: var(--txt_color_01);
   color: white;
}
#consultationhours table td {
   padding: 2px;
   background: white;
}
#consultationhours table tr:nth-of-type(2) td {
   border-bottom: 1px solid var(--btn_01);
}
#consultationhours table tr:nth-of-type(2) td:first-of-type,
#consultationhours table tr:nth-of-type(3) td:first-of-type {
   background-color: var(--txt_color_01);
   color: white;
   border-top: 1px solid white;
}
#consultationhours p em {
   background-color: var(--txt_color_01);
   padding: 5px 10px;
   margin-right: 10px;
   color: white;
}
#consultationhours .container {
   padding: 20px 30px 50px;
   margin: 20px 0;
   background: white;
   border: 1px solid var(--btn_01);
}
#consultationhours .container .notice {
   background: linear-gradient(transparent 60%, #ff6 60%);
   display: inline;
   padding: 0 2px 4px;
   text-decoration: none;
}
#consultationhours .container p {
   text-decoration: underline;
   text-align: center;
   font-size: 1.7rem;
   padding: 0 2px 4px;
}
#consultationhours .tel_block {
   margin: 30px 0;
}
#consultationhours .tel_block div {
   margin-bottom: 20px;
}
#consultationhours .tel_block a {
   font-family: var(--serif);
   font-size: 2.4rem;
   position: relative;
   display: inline-block;
   text-decoration: none;
}
#consultationhours .tel_block a:after {
   position: absolute;
   bottom: 1px;
   left: 0;
   content: "";
   width: 100%;
   height: 1px;
   background: var(--txt_color_02);
   transform: scale(1, 1);
   transform-origin: left top;
   transition: transform 0.3s;
}
#consultationhours .tel_block a:hover:after {
   transform-origin: right top;
   transform: scale(0, 1);
}
#consultationhours .tel_block a span {
   font-size: 1.5rem;
}
#consultationhours .web_btn img {
   width: 30px;
   margin-right: 10px;
}
#consultationhours .web_btn {
   transition: all 0.2s;
}
#consultationhours .web_btn:hover {
   opacity: 0.8;
}
#consultationhours .web_btn a {
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   background: var(--btn_01);
   padding: 20px;
   border-radius: 50px;
   width: 250px;
   margin: 30px auto;
}
#consultationhours .online_qualification {
   margin: 20px 0;
}
/* フッター　ここから */
footer {
   margin-top: 100px;
   padding-bottom: 70px;
   border-top: 2px solid var(--btn_01);
   background: var(--txt_color_01);
}
footer .top {
   padding-top: 30px;
   background: white;
}
footer .logo_img {
   margin: 0 auto;
   width: 300px;
}
footer .logo_img img {
   width: 300px;
}
footer .top .columns {
   display: flex;
   justify-content: center;
   padding: 20px 0;
}
footer .tel_btn {
   background: var(--btn_01);
   padding: 10px;
   margin: 5px;
   border-radius: 10px;
   width: calc(100% / 2);
   transition: all 0.2s;
}
footer .tel_btn:hover {
   opacity: 0.8;
}
footer .tel_btn a {
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   background: var(--btn_01);
   font-size: 1.2rem;
}
footer .tel_btn span {
   text-align: center;
}
footer .tel_btn img {
   width: 20px;
   margin-right: 10px;
}
footer .web_btn {
   margin: 5px;
   width: calc(100% / 2);
}
footer .web_btn a {
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   background: var(--btn_01);
   padding: 10px;
   height: 68px;
   font-size: 1.3rem;
   border-radius: 10px;
   transition: all 0.2s;
}
footer .web_btn a:hover {
   opacity: 0.8;
}
footer .web_btn img {
   width: 20px;
   margin-right: 10px;
}
footer .middle {
   color: white;
   text-align: center;
}
footer .middle .address {
   padding: 30px;
}
footer .middle .parking {
   margin-top: 30px;
}
footer .bottom {
   padding: 0 10px;
   border-top: 1px solid white;
}
footer .bottom a {
   color: white;
}
footer .bottom1 {
   margin: 30px 0;
}
footer .bottom2 {
   margin: 30px 0;
}
footer .bottom h3 {
   margin: 10px 0;
}
footer .bottom h3 em {
   background: white;
   color: var(--btn_01);
   padding: 5px 10px;
}
footer ul {
   padding-left: 35px;
}
footer li {
   position: relative;
}
footer li:before {
   position: absolute;
   content: "";
   width: 10px;
   height: 2px;
   background-color: white;
   top: 14px;
   left: -15px;
}
footer li a {
   transition: all 0.2s;
}
footer li a:hover {
   opacity: 0.8;
}
.copyright {
   text-align: center;
   font-size: 1.2rem;
   color: white;
   padding-top: 20px;
}
/* フッター　ここまで */

/* 診療案内　ここから */
.p_visual {
   position: relative;
}
.p_visual h1 {
   position: absolute;
   content: "";
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
   font-family: var(--serif);
   white-space: nowrap;
   letter-spacing: 0.1em;
}
.p_visual img {
   object-fit: cover;
   height: 450px;
}

#p_about .contents1 {
   margin: 60px 10px;
   padding: 50px 10px;
   background: white;
   border: 1px solid var(--btn_01);
}
#p_about h2 {
   text-align: center;
   margin-bottom: 30px;
}
.doctor_name {
   text-align: right;
   font-family: var(--serif);
}
#p_about .contents2 {
   margin: 60px 10px;
   padding: 50px 10px;
   background: white;
}
#p_about table {
   border: 1px solid var(--txt_color_01);
   text-align: center;
}
#p_about table th {
   padding: 5px;
   background: var(--txt_color_01);
   color: white;
   border-bottom: 1px solid white;
}
#p_about table tr:last-of-type th {
   border-bottom: none;
}
#p_about table td {
   padding: 2px;
   border-bottom: 1px solid var(--txt_color_01);
}
#p_about table tr:last-of-type td {
   border-bottom: none;
}
#p_about .contents4 {
   margin: 60px 0;
   padding: 50px 10px;
   background: white;
}
#p_about .img {
   text-align: center;
   width: calc(100% / 2);
   padding: 5px;
   margin-bottom: 10px;
}
#p_about .img img {
   box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}
#p_about .columns {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}
#p_about #consultationhours table tr:nth-of-type(2) td:first-of-type,
#p_about #consultationhours table tr:nth-of-type(3) td:first-of-type {
   background-color: var(--txt_color_01);
}
#p_about .contents3 table th{
   border-bottom: none;
}
/* 診療案内　ここまで */

/* 診療科目　ここから */
#p_contents .btn {
   width: 100%;
   padding: 10px;
   margin-top: auto;
}
#p_contents {
   margin: 20px 0;
   padding: 40px 0 0;
   background: url(../nakanoshimamental/assets/img/texture1.svg);
   background-repeat: no-repeat;
   background-position: left;
   background-size: cover;
   filter: sepia(5%);
}
#p_contents .inner {
   margin: 0 10px;
}
#p_contents h2 {
   text-align: center;
   margin-bottom: 30px;
}
#p_contents .columns {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   margin: 40px 0 0;
}
#p_contents .container {
   background: white;
   padding: 20px 10px 0;
   margin: 5px;
   width: calc(100% / 2.2);
   display: flex;
   flex-direction: column;
}
#p_contents .container .img {
   margin-right: 5px;
   transform: rotate(-30deg);
}
#p_contents .container img {
   width: 30px;
}
#p_contents .container p {
   margin-bottom: 20px;
}
#p_contents .container h3 {
   display: flex;
   justify-content: center;
}

#p_qa {
   margin: 60px 0 0;
   padding: 50px 0 0;
}
#p_qa .inner {
   margin: 0 10px;
}
#p_qa h2 {
   border-bottom: 1px solid var(--txt_color_02);
   margin-bottom: 30px;
}
#p_qa a {
   text-decoration: underline;
   transition: all 0.2s;
}
#p_qa a:hover {
   opacity: 0.8;
}
#p_qa h3 {
   position: relative;
   margin-bottom: 20px;
}
#p_qa h3:before {
   position: absolute;
   content: "Q";
   top: -40px;
   left: -30px;
   font-size: 4.5rem;
   font-family:
      Libre Baskerville,
      serif;
   color: var(--txt_color_01);
   opacity: 0.3;
}
#p_qa .block {
   padding: 40px 40px 40px 60px;
   margin: 40px 0;
   background: white;
}
#p_qa .block p {
   position: relative;
   padding-left: 35px;
}
#p_qa .block p:before {
   position: absolute;
   content: "";
   height: 2px;
   width: 10px;
   background-color: var(--txt_color_02);
   top: 15px;
   left: 17px;
}
/* 診療科目　ここまで */

/* 固定ページの共通パーツ　ここから */
.p_heading2 {
   border-bottom: 2px solid var(--txt_color_02);
   margin-bottom: 30px;
}
.p_heading3 {
   border-left: 3px solid var(--txt_color_01);
   border-right: 3px solid var(--txt_color_01);
   margin-bottom: 20px;
   padding: 0 15px;
   display: inline-block;
}
.p_heading4 {
   border-bottom: 1px dashed var(--txt_color_02);
   display: inline-block;
}
.p_ul {
   margin: 30px 10px;
   padding: 30px 30px 30px 40px;
   border: 1px dashed var(--txt_color_01);
   background: white;
}
.p_li {
   position: relative;
   padding: 5px 0;
}
.p_li:before {
   position: absolute;
   content: "";
   background-color: var(--txt_color_01);
   width: 10px;
   height: 10px;
   border-radius: 30%;
   top: 15px;
   left: -15px;
}
.p_block {
   margin: 40px 0;
}
/* 固定ページの共通パーツ　ここまで */

/* 診療内容　ここから */
#p_depression,
#p_adjustment_disorder,
#p_schizophrenia,
#p_panic,
#p_bipolar_disorder,
#p_ocd,
#p_eating_disorder,
#p_sleep_impediment,
#p_autonomic_dystonia,
#single,
#archive {
   margin: 60px 0;
   padding: 20px 0 0;
}
#p_depression .inner,
#p_adjustment_disorder .inner,
#p_schizophrenia .inner,
#p_panic .inner,
#p_bipolar_disorder .inner,
#p_ocd .inner,
#p_eating_disorder .inner,
#p_sleep_impediment .inner,
#p_autonomic_dystonia .inner,
#single .inner,
#archive .inner {
   margin: 0 10px;
}
/* 診療内容　ここまで */

/* アーカイブ　ここから */
#archive article {
   border-bottom: 1px solid var(--txt_color_01);
   margin: 15px 0;
}
#archive article a {
   transition: all 0.2s;
}
#archive article a:hover {
   opacity: 0.8;
}
/* アーカイブ　ここまで */

/* シングルページ　ここから */
.previous_next_post {
   display: flex;
   justify-content: space-between;
   margin: 30px 0;
}
.previous_next_post .post_link {
   border-bottom: 2px solid var(--btn_01);
}
/* シングルページ　ここまで */

/* サイドバー　ここから */
#sidebar .inner {
   margin: 0 10px;
}
#sidebar li {
   margin: 4px 0;
}
#sidebar #sidebar_new_article {
   margin-bottom: 20px;
}
.sidebar_columns #sidebar li {
   transition: all 0.2s;
}
.sidebar_columns #sidebar li:hover {
   opacity: 0.8;
}
/* サイドバー　ここまで */

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

   #pagetop {
      bottom: 0;
   }

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

   #sp-fixed-menu {
      display: none;
   }

   header .container {
      flex-direction: row;
      justify-content: space-between;
      margin: 0 10px 10px 10px;
      padding-top: 10px;
   }
   header .logo_img img {
      width: 300px;
   }
   header .tel_btn a {
      font-size: 1.5rem;
   }
   header .web_btn a {
      font-size: 1.5rem;
      height: 59px;
   }

   #info {
      margin: 60px 30px;
   }

   #info .inner {
      margin: 0;
   }
   #info .heading2 {
      margin: 0 100px 0 0;
   }
   #info section {
      display: flex;
      justify-content: center;
      align-items: center;
   }
   #info .date_ttl {
      display: flex;
   }
   #info .date_ttl p:first-of-type {
      margin-top: 0;
      margin-right: 10px;
   }

   #covid {
      margin: 60px 30px;
   }
   #covid .inner {
      margin: 0 30px;
   }
   #worries .inner {
      margin: 0 30px;
   }
   #worries h2 {
      width: 450px;
      margin: 0 auto 40px;
   }
   #worries section {
      margin: -40px 30px 50px;
   }
   #worries .contents {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin: 40px 0;
   }
   #worries .container {
      width: calc(100% / 2.2);
      padding: 20px;
      margin: 10px;
   }

   #feature {
      position: relative;
      background: none;
   }
   #feature:before {
      position: absolute;
      content: "";
      background-color: #e3e3e3;
      width: 100%;
      height: 480px;
      top: 90px;
      z-index: -1;
   }
   #feature:after {
      position: absolute;
      content: "";
      background-color: #e3e3e3;
      width: 300px;
      height: 160px;
      border-radius: 50%;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
   }
   #feature .inner {
      margin: 0 30px;
   }
   #feature .columns {
      display: flex;
      justify-content: center;
   }
   #feature .container {
      width: calc(100% / 3);
      padding: 20px;
      margin: 0;
   }

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

   #consultationhours .inner {
      margin: 0 30px;
   }
   #consultationhours table {
      font-size: 1.5rem;
   }
   #consultationhours table th {
      padding: 10px;
   }
   #consultationhours .columns {
      display: flex;
      justify-content: center;
      margin: 30px 0;
   }
   #consultationhours .tel_block {
      width: calc(100% / 2);
      padding: 20px;
      margin: 0;
   }
   #consultationhours .web_block {
      width: calc(200% / 2);
      padding: 20px;
      margin: 0;
   }

   footer {
      padding-bottom: 20px;
   }
   footer .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
   }
   footer .logo_img {
      margin: 0 auto 0 0;
   }
   footer .tel_btn {
      width: 200px;
   }
   footer .web_btn {
      width: 200px;
   }
   footer .tel_btn a {
      font-size: 1.5rem;
   }
   footer .web_btn a {
      font-size: 1.5rem;
      height: 80px;
   }
   footer .bottom {
      display: flex;
      padding: 20px 30px 0;
   }
   footer .bottom1 {
      margin: 0;
      margin-right: 20px;
   }
   footer .bottom2 {
      margin: 0;
   }
   footer ul {
      padding-left: 20px;
   }

   #p_about .contents1 {
      margin: 60px 30px;
      padding: 50px 30px;
   }
   #p_about .contents2 {
      margin: 60px 30px;
      padding: 50px 30px;
   }
   #p_about .contents2 th {
      padding: 10px;
   }
   #p_about .contents2 td {
      padding: 10px;
   }
   #p_about .contents4 {
      padding: 50px 30px;
   }
   #p_about .img {
      padding: 10px;
   }

   #p_contents {
      margin: 60px 0;
      background-position: right;
   }
   #p_contents .inner {
      margin: 0 30px;
   }
   #p_contents .container {
      margin: 10px;
      padding: 30px 20px 0;
   }

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

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

   #p_depression .inner,
   #p_adjustment_disorder .inner,
   #p_schizophrenia .inner,
   #p_panic .inner,
   #p_bipolar_disorder .inner,
   #p_ocd .inner,
   #p_eating_disorder .inner,
   #p_sleep_impediment .inner,
   #p_autonomic_dystonia .inner,
   #single .inner,
   #archive .inner {
      margin: 0 30px;
   }
}

@media (min-width: 1024px) {
   .catchcopy {
      top: 80px;
   }
   header .container {
      margin: 0 5% 10px;
   }
   header .tel_btn img {
      width: 25px;
   }
   header .tel_btn span {
      line-height: normal;
   }
   header .web_btn a {
      height: 70px;
   }
   header .web_btn img {
      width: 30px;
   }
   #info {
      margin: 60px 10%;
   }
   #covid {
      margin: 60px 10%;
   }
   #covid .inner {
      margin: 0 5%;
   }
   #worries .inner {
      margin: 0 10%;
   }
   #worries section {
      margin: -40px 10% 50px;
   }
   #feature .inner {
      margin: 0 10%;
   }
   #qa .inner {
      margin: 0 10%;
   }
   #consultationhours .inner {
      margin: 0 10%;
   }
   footer .top {
      padding: 0 5%;
   }
   footer .middle .columns {
      display: flex;
   }
   footer .middle .address {
      padding: 20px 30px 0 30px;
   }
   footer .middle .address p {
      text-align: left;
   }
   footer .middle .address h3 {
      text-align: left;
   }
   footer .middle .parking {
      margin-top: 10px;
   }
   footer iframe {
      height: 400px;
   }
   footer .bottom {
      padding: 30px 5% 0;
   }
   footer .bottom2 {
      width: 500px;
   }
   footer .bottom2 ul {
      display: flex;
      flex-wrap: wrap;
   }
   footer .bottom2 li {
      margin: 10px;
      padding-right: 10px;
   }

   #p_about .contents1 {
      margin: 60px 10%;
      padding: 50px 5%;
   }
   #p_about .contents2 {
      margin: 60px 10%;
      padding: 50px 5%;
   }
   #p_about .contents4 {
      padding: 50px 10%;
   }

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

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

   #p_depression .inner,
   #p_adjustment_disorder .inner,
   #p_schizophrenia .inner,
   #p_panic .inner,
   #p_bipolar_disorder .inner,
   #p_ocd .inner,
   #p_eating_disorder .inner,
   #p_sleep_impediment .inner,
   #p_autonomic_dystonia .inner {
      margin: 0 10%;
   }

   .sidebar_columns {
      display: flex;
      margin-top: 60px;
   }
   .sidebar_columns #archive {
      margin: 0;
      padding: 0;
   }
   .sidebar_columns #archive .inner {
      margin-left: 10%;
   }
   #sidebar .inner {
      margin-right: 10%;
   }
   .sidebar_columns main {
      flex-grow: 1;
   }
   .sidebar_columns #sidebar {
      width: 300px;
   }
   .sidebar_columns #single {
      margin: 0;
      padding: 0;
   }

   #single .inner {
      margin-left: 10%;
   }
}

@media (min-width: 1280px) {
   .catchcopy {
      top: 20px;
      right: 40px;
   }
   .catchcopy .block {
      font-size: 2rem;
   }
   .catchcopy h2 {
      font-size: 3rem;
      height: 420px;
   }
   .catchcopy p {
      height: 210px;
   }
   .catchcopy p:last-of-type {
      height: 440px;
   }
   #info {
      margin: 60px 15%;
   }
   #covid {
      margin: 60px 15%;
   }
   #worries .inner {
      margin: 0 15%;
   }
   #feature .inner {
      margin: 0 15%;
   }
   #qa .inner {
      margin: 0 15%;
   }
   #consultationhours .inner {
      margin: 0 15%;
   }
   #consultationhours .tel_block {
      width: 65%;
   }

   #p_about .contents1 {
      margin: 60px 15%;
   }
   #p_about .contents2 {
      margin: 60px 15%;
   }
   #p_about .contents4 {
      padding: 50px 15%;
   }
   #p_about .img {
      width: calc(100% / 3);
   }

   #p_contents {
      background-position: top;
      padding: 40px 0 60px;
   }
   #p_contents .inner {
      margin: 0 15%;
   }
   #p_contents .container {
      width: calc(100% / 3.3);
   }

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

   #p_depression .inner,
   #p_adjustment_disorder .inner,
   #p_schizophrenia .inner,
   #p_panic .inner,
   #p_bipolar_disorder .inner,
   #p_ocd .inner,
   #p_eating_disorder .inner,
   #p_sleep_impediment .inner,
   #p_autonomic_dystonia .inner {
      margin: 0 15%;
   }

   .sidebar_columns #archive .inner {
      margin-left: 15%;
   }
   #sidebar .inner {
      margin-right: 15%;
   }

   #single .inner {
      margin-left: 15%;
   }
}