@charset "UTF-8";
/*
*
* Copyright (c) 2016, AD Line Inc. All rights reserved.
* Data : 2016.04.20
*
*/
/* Googleフォント　Noto Sans,Robot,Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Zen+Old+Mincho&display=swap");
/* アイコンフォント　Google Material,Font Awesome */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
/*****************************************************

 SCSS用
 
*****************************************************/
/*****************************************************

 Common - Layout
 
*****************************************************/
html {
  font-size: 10px; }

body {
  position: relative;
  width: auto;
  height: auto;
  background: #FFF;
  z-index: 0;
  color: #333333;
  font-size: 1.6rem;
  font-family: 'Zen Old Mincho','Noto Sans Japanese','Noto Sans', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif , serif;
  font-weight: normal;
  line-height: 1.65;
  letter-spacing: 0.5px; }

@media screen and (max-width: 896px) {
  html {
    font-size: 9px; }

  body {
    font-size: 1.4rem;
    line-height: 1.8; } }
/*　inner
----------------------------------------------------*/
.inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1%;
  position: relative; }

.inner_wide {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1%;
  position: relative; }

@media screen and (max-width: 896px) {
  .inner,
  .inner_wide {
    padding: 0 16px; } }
/*　PC/SP 表示・非表示
----------------------------------------------------*/
/*PCでは表示しない*/
@media screen and (min-width: 897px) {
  .pc_none {
    display: none !important; } }
/*SPでは表示しない*/
@media screen and (max-width: 896px) {
  .sp_none {
    display: none !important; } }
/*****************************************************

 Common - Parts
 
*****************************************************/
/*　背景・コンテンツボックス
----------------------------------------------------*/
.bk_blue {
  position: relative;
  background: #dce5ed;
  padding: 80px 0 60px;
  z-index: 1; }

.whiteline {
  position: relative; }
  .whiteline::before, .whiteline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
    z-index: 2; }
  .whiteline::before {
    top: 20px; }
  .whiteline::after {
    bottom: 20px; }

.schedule_bg {
  background-image: url("../images/common/bg_teeth.svg"), url("../images/common/bg_crutch.svg");
  background-repeat: no-repeat;
  background-position: left 60px top 60px,right 60px bottom 60px;
  background-size: 240px auto,250px auto; }

.box1 {
  position: relative;
  padding: 120px 0 !important; }
  .box1.ptp_0 {
    padding-top: 0 !important; }

.medical_bg {
  background: url("../images/home/bg_medical.jpg") no-repeat center/cover; }

@media screen and (max-width: 896px) {
  .box1 {
    padding: 60px 0 !important; }

  .bk_blue {
    padding: 60px 0 40px; }

  .whiteline::before {
    top: 10px; }
  .whiteline::after {
    bottom: 10px; } }
@media screen and (max-width: 896px) {
  .schedule_bg {
    background-position: left 12px top 30px, right 12px top 40px;
    background-size: 80px auto, 80px auto; } }
/*　見出し1
----------------------------------------------------*/
.main_ttl {
  font-size: 48px;
  font-weight: bold;
  color: #001e2d;
  writing-mode: vertical-rl; }

@media screen and (max-width: 896px) {
  .main_ttl {
    font-size: 25px; } }
/*　見出し2
----------------------------------------------------*/
.sub_ttl {
  margin-bottom: 48px;
  font-size: 36px;
  color: #274a6c;
  font-weight: bold;
  text-align: center;
  font-family: "Zen Old Mincho", serif; }
  .sub_ttl span {
    position: relative;
    display: flex;
    justify-content: center;
    font-size: 20px;
    color: #666666;
    font-weight: bold; }

.sub_ttl + p {
  font-size: 18px;
  line-height: 40px;
  margin-bottom: 64px;
  text-align: center; }

.sub_ttl_02 {
  margin-bottom: 24px;
  font-size: 28px;
  color: #274a6c;
  font-weight: bold;
  text-align: left;
  font-family: "Zen Old Mincho", serif; }
  .sub_ttl_02 span {
    position: relative;
    display: block;
    font-size: 14px;
    color: #666666;
    font-weight: bold;
    margin-bottom: 4px; }

.sub_ttl_02 + p {
  font-size: 16px;
  line-height: 40px;
  text-align: left;
  margin-bottom: 64px; }

@media screen and (max-width: 896px) {
  .sub_ttl {
    margin-bottom: 32px;
    font-size: 24px; }

  .sub_ttl span {
    font-size: 14px; }

  .sub_ttl + p {
    margin-bottom: 40px;
    font-size: 14px;
    line-height: 28px;
    text-align: left; } }
@media screen and (max-width: 896px) {
  .sub_ttl_02 {
    margin-bottom: 18px;
    font-size: 2.1rem;
    line-height: 1.5; }

  .sub_ttl_02 span {
    font-size: 1.2rem;
    margin-bottom: 2px; }

  .sub_ttl_02 + p {
    margin-bottom: 40px;
    font-size: 1.4rem;
    line-height: 1.8; } }
/*　見出し3
----------------------------------------------------*/
h3 {
  position: relative;
  font-size: 24px;
  font-weight: bold;
  font-family: "Zen Old Mincho", serif;
  margin-bottom: 24px; }

h3 + p {
  font-size: 16px;
  line-height: 32px; }

/*　見出し4
----------------------------------------------------*/
h4 {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  font-family: "Zen Old Mincho", serif;
  margin-bottom: 20px; }

h4 + p {
  font-size: 16px;
  line-height: 28px; }

@media screen and (max-width: 896px) {
  h3 {
    margin-bottom: 16px;
    font-size: 2.0rem;
    line-height: 1.5; }

  h3 + p {
    font-size: 1.4rem;
    line-height: 1.8; }

  h4 {
    margin-bottom: 20px;
    font-size: 1.7rem;
    line-height: 1.5; }

  h4 + p {
    font-size: 1.4rem;
    line-height: 1.8; } }
/*　ボタン
----------------------------------------------------*/
.bace_btn_link {
  position: relative;
  display: block;
  width: 300px;
  padding: 16px 40px;
  box-sizing: border-box;
  text-align: center;
  font-size: 18px;
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  text-decoration: none;
  background: #274a6c;
  transition: .3s; }
  .bace_btn_link.btn_center {
    margin: 60px auto 0; }
  .bace_btn_link::after {
    position: absolute;
    top: 23px;
    right: 20px;
    content: '\f101';
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    line-height: 20px;
    font-family: 'Font Awesome 5 free';
    font-style: normal;
    transition: .3s; }
  .bace_btn_link:hover {
    transition: .3s;
    opacity: 0.7; }
    .bace_btn_link:hover::after {
      transition: .3s;
      opacity: 0.7; }

@media screen and (max-width: 896px) {
  .bace_btn_link {
    display: block;
    width: 80%;
    max-width: 200px;
    margin: 0 auto;
    box-sizing: border-box;
    font-size: 1.3rem;
    padding: 10px 14px;
    line-height: 1.4; }

  .bace_btn_link::after {
    right: 10px;
    font-size: 14px;
    top: 50%;
    transform: translateY(-50%); } }
/*　タブ
----------------------------------------------------*/
.tab_nav {
  display: flex;
  justify-content: center;
  margin-bottom: 80px; }
  .tab_nav li {
    flex: 1;
    max-width: 400px; }
    .tab_nav li + li {
      margin-left: 40px; }
    .tab_nav li button {
      position: relative;
      width: 100%;
      padding: 16px;
      border: none;
      cursor: pointer;
      background: #dce5ed;
      font-size: 2rem;
      font-weight: bold;
      color: #274a6c;
      transition: .3s; }
      .tab_nav li button::after {
        content: "\f107";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        font-size: 16px;
        transition: .3s; }
      .tab_nav li button:hover {
        background: #274a6c;
        color: #fff; }
        .tab_nav li button:hover::after {
          color: #fff; }
    .tab_nav li.is_active button {
      background: #274a6c;
      color: #fff; }
      .tab_nav li.is_active button::after {
        color: #fff; }

.tab_content {
  display: none; }
  .tab_content.is_active {
    display: block; }

.tab_content {
  display: none; }
  .tab_content.is_active {
    display: block; }
    .tab_content.is_active button {
      background: #274a6c;
      color: #fff; }

@media screen and (max-width: 896px) {
  .tab_nav {
    flex-direction: row;
    margin: 0 16px 32px; }
    .tab_nav li {
      max-width: none;
      flex: 1; }
      .tab_nav li + li {
        margin-left: 8px; }
      .tab_nav li button {
        font-size: 1.3rem;
        padding: 9px 9px 10px;
        line-height: 1.4;
        box-sizing: border-box;
        text-align: center; }
        .tab_nav li button::after {
          display: block;
          right: 10px;
          font-size: 1.2rem; } }
/*　マップ
----------------------------------------------------*/
.map-area {
  position: relative;
  width: 100%;
  height: 500px; }
  .map-area iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

@media screen and (max-width: 896px) {
  .map-area {
    height: 220px; }
    .map-area iframe {
      height: 100%; } }
/*****************************************************

 Template - Header
 
*****************************************************/
/* global_header
----------------------------------------------------*/
.global_header {
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  width: 100%;
  height: auto;
  min-width: 1350px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 10; }
  .global_header .h_left_area {
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 60px 10px 20px; }
    .global_header .h_left_area .header_logo {
      width: 187px;
      height: 68px; }
      .global_header .h_left_area .header_logo a {
        display: block;
        width: 100%;
        height: 100%;
        text-indent: -9999px;
        overflow: hidden;
        background: url("../images/common/logo.svg") no-repeat;
        background-position: left top;
        background-size: contain; }
    .global_header .h_left_area .nav_menu {
      display: flex; }
      .global_header .h_left_area .nav_menu li a {
        color: #274a6c;
        font-weight: 600;
        text-decoration: none; }
        .global_header .h_left_area .nav_menu li a .fa-instagram,
        .global_header .h_left_area .nav_menu li a .fa-line {
          font-size: 2.4rem;
          line-height: 1;
          vertical-align: middle; }
      .global_header .h_left_area .nav_menu li + li {
        margin-left: 60px; }
  .global_header .reservation_box {
    width: 303px;
    height: auto; }
    .global_header .reservation_box a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      color: #fff;
      text-align: center;
      background: #274a6c;
      text-decoration: none; }
      .global_header .reservation_box a dl {
        line-height: 1; }
        .global_header .reservation_box a dl dt {
          font-size: 1.3rem; }
        .global_header .reservation_box a dl dd {
          margin-top: 7px;
          font-size: 2.8rem;
          font-weight: bold; }
          .global_header .reservation_box a dl dd::before {
            font-family: "Font Awesome 6 Free";
            content: "\f095";
            font-weight: 600;
            font-size: 2.6rem;
            margin-right: 8px; }

@media screen and (max-width: 896px) {
  .global_header {
    display: block;
    min-width: auto;
    position: sticky; }
    .global_header .h_left_area {
      padding: 10px 15px; }
      .global_header .h_left_area .header_logo {
        width: 146px;
        height: 53px; }
      .global_header .h_left_area .sp_menu_btn {
        color: #274a6c;
        font-size: 2.8rem;
        line-height: 1; }
      .global_header .h_left_area .nav_menu {
        display: block; }
        .global_header .h_left_area .nav_menu li a {
          color: #333333; }
        .global_header .h_left_area .nav_menu li + li {
          margin-left: 0; }

  .reservation_box {
    display: none; } }
/*　Web予約ボタン
----------------------------------------------------*/
.web_reserve_btn {
  display: block;
  width: 200px;
  height: auto;
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 9999;
  -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  -o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s; }
  .web_reserve_btn img {
    width: 100%;
    height: auto;
    display: block; }
  .web_reserve_btn:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 0.9; }

@media screen and (max-width: 896px) {
  .web_reserve_btn {
    width: 100px;
    height: 100px;
    right: 12px;
    bottom: 12px; } }
/* main_image_area
----------------------------------------------------*/
.main_image_area {
  position: relative;
  width: 100%;
  height: 100vh;
  /* トップコピー */
  /* 下層ページ */ }
  .main_image_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }
  .main_image_area .top_copy_en {
    position: absolute;
    top: calc(50% - 170px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    margin: 0;
    font-size: 4.4rem;
    line-height: 1;
    color: #f9f18f;
    letter-spacing: 0.06em;
    text-transform: none;
    font-family: "Pinyon Script", cursive;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
  .main_image_area .top_copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 180px;
    text-indent: -9999px;
    background: url("../images/home/maincover_logo.png") no-repeat center/contain; }
  .main_image_area.subpage {
    height: 400px; }
  .main_image_area .page_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    text-align: center; }
    .main_image_area .page_title span {
      display: block;
      font-size: 16px;
      margin-top: 10px; }

@media screen and (max-width: 896px) {
  .main_image_area {
    height: 600px; }
    .main_image_area.subpage {
      height: 180px; }
    .main_image_area .top_copy_en {
      top: calc(50% - 80px);
      font-size: 2.4rem;
      letter-spacing: 0.05em;
      color: #f9f18f;
      font-weight: bold;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
    .main_image_area .top_copy {
      width: 320px;
      height: 220px; }
    .main_image_area .page_title {
      font-size: 20px; }
      .main_image_area .page_title span {
        font-size: 12px; } }
/*****************************************************

 Page - Home
 
*****************************************************/
/* ドクター紹介
----------------------------------------------------*/
.top_doctor {
  max-width: 1920px;
  margin: 0 auto;
  display: flex; }

.top_doctor_col {
  width: 50%;
  display: flex;
  box-sizing: border-box;
  background: #fffff5; }
  .top_doctor_col:nth-child(even) {
    flex-direction: row-reverse;
    background: #f3f9f7; }

.top_doctor_col img {
  width: 50%;
  height: auto;
  display: block; }

.top_doctor_text {
  width: 50%;
  padding: 120px 80px;
  box-sizing: border-box; }

.top_doctor_name {
  font-weight: bold;
  margin: 40px 0 64px; }
  .top_doctor_name span {
    font-size: 24px;
    font-weight: bold; }

.top_doctor {
  max-width: 1920px;
  margin: 0 auto;
  display: flex; }

.top_doctor_col {
  width: 50%;
  display: flex;
  box-sizing: border-box;
  background: #fffff5; }
  .top_doctor_col:nth-child(even) {
    flex-direction: row-reverse;
    background: #f3f9f7; }
  .top_doctor_col img {
    width: 50%;
    height: auto;
    display: block; }
  .top_doctor_col .doctor_img_sp {
    display: none; }

.top_doctor_text {
  width: 50%;
  padding: 120px 80px;
  box-sizing: border-box; }

.top_doctor_name {
  font-weight: bold;
  margin: 40px 0 64px; }
  .top_doctor_name span {
    font-size: 24px;
    font-weight: bold; }

@media screen and (max-width: 896px) {
  .top_doctor {
    display: block; }

  .top_doctor_col {
    display: block;
    width: 100%; }
    .top_doctor_col:nth-child(even) {
      flex-direction: column; }
    .top_doctor_col > img:not(.doctor_img_sp) {
      display: none; }
    .top_doctor_col .doctor_img_sp {
      display: block;
      width: 100%;
      height: auto;
      object-fit: initial;
      object-position: initial; }

  .top_doctor_text {
    width: 100%;
    padding: 24px 20px 32px;
    box-sizing: border-box; }
    .top_doctor_text p {
      font-size: 1.3rem;
      line-height: 1.8; }
    .top_doctor_text .bace_btn_link {
      margin-top: 20px; }

  .top_doctor_name {
    font-size: 1.3rem;
    margin: 16px 0 0;
    line-height: 1.5; }
    .top_doctor_name span {
      font-size: 1.6rem; } }
/* 診療スケジュール
----------------------------------------------------*/
.schedule_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 24px; }
  .schedule_wrap .schedule_box {
    width: 43%;
    padding: 30px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
    .schedule_wrap .schedule_box .schedule_title {
      text-align: center;
      margin-bottom: 16px; }
    .schedule_wrap .schedule_box .schedule_table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed; }
      .schedule_wrap .schedule_box .schedule_table th,
      .schedule_wrap .schedule_box .schedule_table td {
        border: 1px solid #ccc;
        padding: 10px 3px;
        text-align: center;
        font-size: 1.4rem;
        line-height: 1.2;
        white-space: normal; }
      .schedule_wrap .schedule_box .schedule_table .subject {
        width: 130px;
        font-weight: bold; }
    .schedule_wrap .schedule_box .notice {
      font-size: 1.4rem;
      margin-top: 24px; }
    .schedule_wrap .schedule_box.dental .schedule_table thead th {
      background: #f9f9dd; }
    .schedule_wrap .schedule_box.ortho .schedule_table thead th {
      background: #f3f9f7; }

@media screen and (max-width: 896px) {
  .schedule_wrap {
    display: block; }

  .schedule_wrap .schedule_box {
    width: 100%;
    padding: 16px;
    margin-top: 16px;
    box-sizing: border-box; }

  .schedule_wrap .schedule_box:first-child {
    margin-top: 0; }

  .schedule_wrap .schedule_table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse; }

  .schedule_wrap .schedule_table th,
  .schedule_wrap .schedule_table td {
    padding: 6px 4px;
    font-size: 1.2rem;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word; }

  .schedule_wrap .schedule_table .subject {
    width: 80px; }

  .schedule_wrap .schedule_box .notice {
    font-size: 1.2rem; } }
/* 松本クリニックについて
----------------------------------------------------*/
.about_wrap {
  width: 100%; }

.sparkleline {
  background-image: url("../images/common/sparkleline_left.svg");
  background-repeat: no-repeat;
  background-position: left 0 top 30px;
  background-size: 800px auto; }

.instagram_bg {
  background-image: url("../images/common/sparkleline_left.svg"), url("../images/common/sparkleline_right.svg");
  background-repeat: no-repeat;
  background-position: left 0 top 30px,right 0 bottom 30px;
  background-size: 800px auto,800px auto; }

.about_panel {
  display: flex;
  justify-content: space-between;
  margin-top: 120px;
  /* 歯科 */
  /* 整形外科 */
  /* 設備 */ }
  .about_panel .about_text {
    width: 50%;
    box-sizing: border-box;
    padding: 4%;
    background: #fff;
    position: relative; }
    .about_panel .about_text p {
      line-height: 2; }
  .about_panel .about_img {
    width: 50%; }
    .about_panel .about_img img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .about_panel:nth-child(odd) {
    flex-direction: row-reverse; }
  .about_panel:nth-child(1) .about_text {
    background-image: url("../images/common/top_bg_dental.svg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 60% auto; }
  .about_panel:nth-child(2) .about_text {
    padding: 4% 0 0 10%;
    justify-content: flex-end !important;
    background-image: url("../images/common/top_bg_ortho.svg");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 60% auto; }
  .about_panel:nth-child(3) .about_text {
    background-image: url("../images/common/top_bg_facility.svg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 60% auto; }

@media screen and (max-width: 896px) {
  .about_panel {
    display: flex;
    flex-direction: column;
    margin-top: 40px; }
    .about_panel .about_img,
    .about_panel .about_text {
      width: 100%; }
    .about_panel .about_img {
      order: 1;
      margin-bottom: 12px; }
    .about_panel .about_text {
      order: 2;
      padding: 20px;
      box-sizing: border-box;
      background-position: right bottom;
      background-size: 75% auto; }
    .about_panel:nth-child(odd) {
      flex-direction: column; }
    .about_panel:nth-child(2) .about_text {
      padding: 20px;
      background-position: right bottom; } }
@media screen and (max-width: 896px) {
  .sparkleline {
    background-position: left 0 top 20px;
    background-size: 320px auto; }

  .instagram_bg {
    background-position: left 0 top 20px, right 0 bottom 20px;
    background-size: 320px auto, 320px auto; } }
/* 院内設備（スライド画像）
----------------------------------------------------*/
.scroll-infinity {
  margin-top: 80px; }

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden; }

.scroll-infinity__list {
  display: flex; }

.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both; }

.scroll-infinity__item {
  width: calc(100vw / 4);
  margin: 0 20px; }

.scroll-infinity__item > img {
  width: 100%;
  height: auto; }

.takeout_banner {
  display: flex;
  justify-content: center;
  padding-top: 80px; }
  .takeout_banner a {
    width: 696px;
    margin: 0 20px; }
    .takeout_banner a img {
      width: 100%;
      height: auto;
      display: block; }

@media screen and (max-width: 896px) {
  .scroll-infinity {
    margin-top: 40px; }

  .scroll-infinity__item {
    width: calc(100vw / 2.2);
    margin: 0 5px; }

  .takeout_banner {
    display: block;
    padding-top: 40px;
    text-align: center; }
    .takeout_banner a {
      display: block;
      width: 100%;
      margin: 0 0 20px; }
      .takeout_banner a img {
        display: block;
        width: 96%;
        height: auto;
        margin: 0 2%; } }
/* 歯科の診療案内
----------------------------------------------------*/
.top_medical_tabs {
  margin: 40px 0 0;
  padding: 40px 0; }
  .top_medical_tabs_list {
    display: flex;
    flex-wrap: wrap; }
    @media screen and (min-width: 897px) {
      .top_medical_tabs_list li {
        width: calc((100% - 120px) / 4);
        margin-left: 40px;
        margin-top: 40px; }
        .top_medical_tabs_list li:nth-child(4n + 1) {
          margin-left: 0; }
        .top_medical_tabs_list li:nth-child(-n + 4) {
          margin-top: 0; } }
    .top_medical_tabs_list li a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 40px 20px;
      text-align: center;
      color: #274a6c;
      background: #fff;
      border: 2px solid #f9f18f;
      font-size: 1.6rem;
      font-weight: bold;
      line-height: 1.4;
      text-decoration: none;
      transition: 0.3s; }
      .top_medical_tabs_list li a i {
        font-size: 2rem;
        color: #274a6c; }
      .top_medical_tabs_list li a:hover {
        background: #f9f18f;
        color: #274a6c; }

@media screen and (max-width: 896px) {
  .top_medical_tabs {
    padding: 0; }

  .top_medical_tabs_list li {
    width: calc((100% - 10px) / 2);
    margin-left: 10px;
    margin-top: 10px; }
    .top_medical_tabs_list li:nth-child(2n+1) {
      margin-left: 0; }
    .top_medical_tabs_list li a {
      padding: 20px 10px;
      font-size: 1.4rem; } }
/*****************************************************

 Page - Clinic
 
*****************************************************/
/*　院長紹介
----------------------------------------------------*/
.doctor_wrap {
  display: flex;
  justify-content: center; }
  .doctor_wrap .doctor_img img {
    width: 100%;
    height: auto;
    display: block; }
  .doctor_wrap .doctor_text {
    width: 50%;
    padding: 60px;
    box-sizing: border-box;
    background: #fff; }

.doctor_name {
  margin-bottom: 40px; }
  .doctor_name span {
    font-size: 2.4rem;
    font-weight: bold; }

.doctor_info {
  display: flex;
  margin-top: 40px; }
  .doctor_info .info_col {
    width: 48%; }
    .doctor_info .info_col + .info_col {
      margin-left: 4%; }
    .doctor_info .info_col .career_qualifications {
      position: relative;
      font-weight: bold;
      margin-bottom: 20px;
      background: #e9e9e9;
      padding: 4px 20px; }
    .doctor_info .info_col ul {
      margin-top: 10px; }
      .doctor_info .info_col ul li {
        font-size: 1.4rem;
        margin-bottom: 8px; }

@media screen and (max-width: 896px) {
  .doctor_wrap {
    display: block; }
    .doctor_wrap .doctor_img,
    .doctor_wrap .doctor_text {
      width: 100%; }
    .doctor_wrap .doctor_text {
      padding: 20px; }

  .doctor_name {
    font-size: 1.4rem;
    margin-bottom: 24px; }
    .doctor_name span {
      font-size: 1.8rem; }

  .doctor_info {
    flex-direction: column; }
    .doctor_info .info_col {
      width: 100%; }
      .doctor_info .info_col + .info_col {
        margin-left: 0;
        margin-top: 20px; } }
/*　機器紹介
----------------------------------------------------*/
.equipment_list {
  display: flex;
  flex-wrap: wrap; }

.equipment_item {
  width: 48%;
  margin-top: 80px;
  display: flex; }
  .equipment_item:nth-child(2n) {
    margin-left: 4%; }
  .equipment_item:nth-child(-n+2) {
    margin-top: 0; }

.equipment_img {
  width: 40%; }
  .equipment_img img {
    width: 100%;
    height: auto;
    display: block; }

.equipment_text {
  width: calc(60% - 40px);
  margin-left: 40px; }
  .equipment_text p {
    line-height: 1.8; }

.equipment_name {
  font-weight: bold;
  font-family: "Zen Old Mincho", serif;
  margin-bottom: 16px; }

@media screen and (max-width: 896px) {
  .equipment_list {
    display: block; }

  .equipment_item {
    width: 100%;
    display: block;
    margin: 40px 0 0 0 !important; }

  .equipment_item:first-child {
    margin-top: 0; }

  .equipment_item:nth-child(2n) {
    margin-left: 0 !important; }

  .equipment_img {
    width: 100%;
    margin: 0; }

  .equipment_img img {
    width: 100%;
    height: auto;
    display: block; }

  .equipment_text {
    width: 100%;
    margin: 16px 0 0 0; }

  .equipment_name {
    margin-bottom: 8px; } }
/*　採用情報
----------------------------------------------------*/
.recruit_block {
  margin-top: 40px; }

.recruit_ttl {
  margin-bottom: 40px; }

.recruit_list {
  display: flex;
  flex-wrap: wrap; }

.recruit_item {
  width: 48%;
  margin-top: 40px; }
  .recruit_item:nth-child(2n) {
    margin-left: 4%; }
  .recruit_item:nth-child(-n+2) {
    margin-top: 0; }

.recruit_job {
  padding-bottom: 20px;
  border-bottom: 1px solid #274a6c; }

.recruit_row {
  display: flex;
  margin-top: 16px; }

.recruit_label {
  width: 120px;
  font-weight: bold; }

.recruit_value {
  width: calc(100% - 120px);
  margin-left: 60px;
  line-height: 1.8; }

@media screen and (max-width: 896px) {
  .recruit_list {
    display: block; }

  .recruit_item {
    width: 100%;
    margin: 0 0 24px 0 !important; }

  .recruit_item:last-child {
    margin-bottom: 0; }

  .recruit_item:nth-child(2n) {
    margin-left: 0 !important; }

  .recruit_job {
    margin-bottom: 12px; }

  .recruit_row {
    display: block;
    margin-top: 12px; }

  .recruit_label {
    width: 100%;
    margin-bottom: 4px; }

  .recruit_value {
    width: 100%;
    margin: 0;
    line-height: 1.6; } }
/*　ドク松本の整形外科トーク
----------------------------------------------------*/
.radio_list {
  display: flex;
  flex-wrap: wrap; }
  .radio_list .radio_item {
    width: calc((100% - 60px) / 4);
    margin: 20px 0 0 20px;
    text-decoration: none; }
    .radio_list .radio_item:nth-of-type(4n+1) {
      margin-left: 0; }
    .radio_list .radio_item:nth-of-type(-n+4) {
      margin-top: 0; }

.radio_btn {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #e6f0f7;
  transition: 0.3s; }
  .radio_btn:hover {
    opacity: 0.7; }

.radio_play {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  position: relative; }
  .radio_play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-left: 12px solid #274a6c;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent; }
  .radio_play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 16px;
    background: #fff;
    transform: translate(-8px, -50%);
    display: none;
    box-shadow: 12px 0 0 #fff; }

/* =========================
   再生中
========================= */
.radio_item.is_playing .radio_play {
  background: #274a6c; }
  .radio_item.is_playing .radio_play::after {
    opacity: 0; }
  .radio_item.is_playing .radio_play::before {
    display: block; }

.radio_text {
  margin-left: 12px; }
  .radio_text dt {
    font-size: 1.2rem;
    color: #274a6c; }
  .radio_text dd {
    font-size: 1.4rem;
    font-weight: bold;
    color: #274a6c;
    margin-top: 4px; }
    .radio_text dd.small {
      font-size: 1.2rem; }

@media screen and (max-width: 896px) {
  .radio_list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px; }

  .radio_list .radio_item {
    width: 50%;
    padding: 0 5px;
    margin: 10px 0 0 0;
    box-sizing: border-box; }

  .radio_list .radio_item:nth-child(-n+2) {
    margin-top: 0; }

  .radio_list .radio_item:nth-of-type(4n+1),
  .radio_list .radio_item:nth-of-type(2n+1) {
    margin-left: 0 !important; }

  .radio_btn {
    display: flex;
    align-items: center;
    padding: 10px; }

  .radio_play {
    width: 32px;
    height: 32px;
    flex-shrink: 0; }

  .radio_text {
    margin-left: 8px; }
    .radio_text dt {
      font-size: 1.1rem; }
    .radio_text dd {
      font-size: 1.3rem; } }
@media screen and (max-width: 896px) {
  .radio_list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px; }
    .radio_list .radio_item {
      width: 50%;
      padding: 0 5px;
      margin: 10px 0 0 0;
      box-sizing: border-box; }
      .radio_list .radio_item:nth-of-type(1), .radio_list .radio_item:nth-of-type(2) {
        margin-top: 0; }
      .radio_list .radio_item:nth-of-type(n+3) {
        margin-top: 10px; }

  .radio_btn {
    display: flex;
    align-items: center;
    padding: 10px; }

  .radio_play {
    width: 32px;
    height: 32px;
    flex-shrink: 0; }

  .radio_text {
    margin-left: 8px; }
    .radio_text dt {
      font-size: 1.1rem; }
    .radio_text dd {
      font-size: 1.3rem; } }
.js_readmore {
  position: relative; }
  .js_readmore > .radio_item:nth-of-type(n+13) {
    display: none; }
  .js_readmore.is_open .radio_item {
    display: block; }

.readmore_btn {
  display: block;
  margin: 40px auto 0;
  padding: 14px 40px;
  background: #274a6c;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: .3s; }
  .readmore_btn:hover {
    opacity: 0.7; }

@media screen and (max-width: 896px) {
  .readmore_btn {
    width: 80%;
    max-width: 200px;
    margin: 32px auto 0;
    padding: 10px 14px;
    box-sizing: border-box;
    font-size: 1.3rem;
    line-height: 1.4; } }
/*　歯科の診療案内
----------------------------------------------------*/
.medical_tabs {
  margin-top: 40px;
  text-align: center; }
  .medical_tabs_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    .medical_tabs_list li {
      box-sizing: border-box;
      border: 2px solid #274a6c; }
      @media screen and (min-width: 897px) {
        .medical_tabs_list li {
          width: calc((100% - 60px) / 4);
          margin-left: 20px;
          margin-top: 20px; }
          .medical_tabs_list li:nth-child(4n+1) {
            margin-left: 0; }
          .medical_tabs_list li:nth-child(-n+4) {
            margin-top: 0; } }
      @media screen and (max-width: 896px) {
        .medical_tabs_list li {
          width: calc((100% - 20px) / 2);
          margin-left: 20px;
          margin-top: 20px; }
          .medical_tabs_list li:nth-child(2n+1) {
            margin-left: 0; }
          .medical_tabs_list li:nth-child(-n+2) {
            margin-top: 0; } }
      .medical_tabs_list li a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        text-align: center;
        text-decoration: none;
        color: #333333;
        font-weight: bold;
        font-size: 1.6rem;
        transition: 0.3s; }
        .medical_tabs_list li a::after {
          content: '\f107';
          font-family: "Font Awesome 6 Free";
          font-weight: 900;
          position: absolute;
          top: 50%;
          right: 16px;
          transform: translateY(-50%);
          font-size: 14px;
          color: #274a6c;
          transition: 0.3s; }
        .medical_tabs_list li a:hover {
          background: #274a6c;
          color: #fff; }
          .medical_tabs_list li a:hover::after {
            color: #fff; }

@media screen and (max-width: 896px) {
  .medical_tabs {
    margin-top: 24px; }

  .medical_tabs_list {
    justify-content: flex-start; }
    .medical_tabs_list li {
      width: calc((100% - 8px) / 2);
      margin-left: 8px;
      margin-top: 8px; }
      .medical_tabs_list li:nth-child(2n+1) {
        margin-left: 0; }
      .medical_tabs_list li:nth-child(-n+2) {
        margin-top: 0; }
      .medical_tabs_list li a {
        min-height: 44px;
        padding: 10px 28px 10px 10px;
        font-size: 1.3rem;
        line-height: 1.4;
        box-sizing: border-box; }
        .medical_tabs_list li a::after {
          right: 10px;
          font-size: 1.2rem; } }
.medical_content .medical_sub_ttl {
  display: inline-block;
  color: #274a6c;
  background-color: #dce5ed;
  padding: 8px 12px; }

.medical_head {
  background: #274a6c;
  color: #fff;
  padding: 4px 0;
  margin-top: 120px; }
  .medical_head h3 {
    margin: 0;
    text-align: center;
    color: #fff;
    font-weight: none; }

.medical_col2 {
  display: flex;
  justify-content: space-between;
  margin-top: 80px; }
  .medical_col2 .medical_text {
    width: 50%; }
  .medical_col2 .medical_img img {
    width: 100%;
    display: block; }

.medical_block {
  margin-top: 40px; }

.medical_border_ttl {
  border-bottom: 3px solid #dce5ed;
  margin: 40px 0 20px 0;
  padding-bottom: 18px; }

@media screen and (max-width: 896px) {
  .medical_col2 {
    display: block;
    margin-top: 40px; }
    .medical_col2 .medical_text,
    .medical_col2 .medical_img {
      width: 100%; }
    .medical_col2 .medical_img {
      margin-top: 20px; }

  .medical_head {
    margin-top: 60px; } }
/*****************************************************

 Template - Footer
 
*****************************************************/
.global_footer {
  background-color: #dce5ed;
  color: #77a5b7; }

.footer_main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px 120px 0;
  box-sizing: border-box; }

.footer_right {
  align-self: flex-start; }

.footer_left {
  display: flex;
  align-items: center; }

.footer_logo {
  width: 150px; }
  .footer_logo a {
    display: block; }
  .footer_logo img {
    width: 100%;
    height: auto;
    display: block; }

.footer_info {
  margin-left: 80px; }
  .footer_info p {
    font-weight: bold;
    line-height: 4.0rem; }

/* 右 */
.footer_nav_wrap {
  display: flex;
  align-items: center; }

.footer_nav {
  display: flex; }
  .footer_nav li {
    margin-left: 30px; }
    .footer_nav li:first-child {
      margin-left: 0; }
    .footer_nav li a {
      color: #77a5b7;
      text-decoration: none;
      font-weight: bold; }
      .footer_nav li a .fa-instagram,
      .footer_nav li a .fa-line {
        font-size: 2.4rem;
        line-height: 1;
        vertical-align: middle; }

.footer_btn {
  margin-left: 40px;
  padding: 6px 60px;
  background: #274a6c;
  color: #fff;
  border-radius: 50px;
  text-decoration: none; }

.footer_copylight {
  margin-top: 60px;
  padding: 12px 0;
  font-size: 1.4rem;
  text-align: center;
  color: #fff;
  background-color: #274a6c; }

@media screen and (max-width: 896px) {
  .map-area {
    height: 220px; }

  .footer_main {
    flex-direction: column;
    padding: 30px 20px 0; }

  .footer_left {
    flex-direction: column;
    text-align: center; }

  .footer_logo {
    width: 120px;
    margin-bottom: 16px; }

  .footer_info {
    margin-left: 0; }
    .footer_info p {
      font-size: 1.4rem;
      line-height: 2.2rem; }

  .footer_right {
    width: 100%;
    margin-top: 30px; }

  .footer_nav_wrap {
    flex-direction: column; }

  .footer_nav {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px; }
    .footer_nav li {
      margin: 0 10px 10px; }
    .footer_nav a {
      font-size: 1.4rem; }

  .footer_btn {
    display: block;
    width: 80%;
    max-width: 200px;
    margin: 0 auto;
    padding: 10px 14px;
    box-sizing: border-box;
    font-size: 1.3rem;
    line-height: 1.4;
    text-align: center; }

  .footer_copylight {
    margin-top: 30px;
    font-size: 1.2rem; } }