@charset "UTF-8";
/*--------------------------
Color
---------------------------*/
/*----------------------------------------------------
                     Home page
-----------------------------------------------------*/
body {
  overflow-x: hidden; }

/*COVID Banner*/
.covidbanner {
  z-index: 500;
  position: absolute;
  top: 182px;
  left: calc(50% + 130px);
  width: 450px; }
  @media only screen and (max-width: 768px) {
    .covidbanner {
      top: 240px;
      left: inherit;
      right: 20px;
      width: 380px; } }
  @media only screen and (max-width: 475px) {
    .covidbanner {
      position: fixed;
      bottom: 140px;
      top: inherit;
      left: 0;
      width: 100vw; } }
  @media only screen and (max-width: 375px) {
    .covidbanner {
      bottom: 140px; } }
  .covidbanner.topBan_none {
    top: 93px; }
    @media only screen and (max-width: 768px) {
      .covidbanner.topBan_none {
        top: 160px; } }
    @media only screen and (max-width: 475px) {
      .covidbanner.topBan_none {
        top: inherit;
        bottom: 75px; } }

/*Banner*/
.topBanner {
  z-index: 500;
  position: absolute;
  top: 93px;
  left: calc(50% + 130px);
  width: 450px; }
  @media only screen and (max-width: 768px) {
    .topBanner {
      top: 160px;
      left: inherit;
      right: 20px;
      width: 380px; } }
  @media only screen and (max-width: 475px) {
    .topBanner {
      position: fixed;
      bottom: 75px;
      top: inherit;
      left: 0;
      width: 100vw; } }
  @media only screen and (max-width: 375px) {
    .topBanner {
      bottom: 75px; } }
  .topBanner.hide {
    display: none; }
  .topBanner .close {
    position: absolute;
    display: block;
    width: 18px;
    height: 18px;
    bottom: 0;
    right: 0;
    background: url("../img/home/banner_close.png") no-repeat;
    background-size: cover; }
    .topBanner .close:hover {
      filter: brightness(120%);
      cursor: pointer; }

/*Section topMvArea*/
#topMvArea {
  width: 100%;
  height: 754px; }
  @media only screen and (max-width: 768px) {
    #topMvArea {
      height: 96.4vw;
      overflow-x: hidden; } }
  #topMvArea #bgimage {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 754px;
    background-size: cover; }
    @media only screen and (max-width: 768px) {
      #topMvArea #bgimage {
        display: none; } }
  #topMvArea #bgimage_sp {
    display: none; }
    @media only screen and (max-width: 768px) {
      #topMvArea #bgimage_sp {
        display: block;
        position: absolute;
        z-index: -1;
        width: 100vw;
        height: 115.733vw;
        background-size: cover; } }
  #topMvArea .wrap {
    width: 1200px;
    margin: 0 auto; }
    @media only screen and (max-width: 768px) {
      #topMvArea .wrap {
        width: 100vw;
        overflow-x: hidden; } }
    #topMvArea .wrap .titleBlock {
      clear: both;
      width: 426px; }
      @media only screen and (max-width: 768px) {
        #topMvArea .wrap .titleBlock {
          display: none; } }
      #topMvArea .wrap .titleBlock #topTitle {
        background-color: #2d5784;
        padding: 35px 0 40px;
        border-radius: 5px; }
        #topMvArea .wrap .titleBlock #topTitle h1 {
          text-align: center; }
        #topMvArea .wrap .titleBlock #topTitle p {
          text-align: center;
          color: #fff;
          padding: 20px 0 0; }
      #topMvArea .wrap .titleBlock #topInfo {
        text-align: center;
        margin: 30px 0 20px; }
      #topMvArea .wrap .titleBlock #topBtn {
        display: flex;
        justify-content: space-between; }
        #topMvArea .wrap .titleBlock #topBtn a {
          display: block;
          width: 202px;
          height: 48px;
          color: #fff;
          border-radius: 3px; }
        #topMvArea .wrap .titleBlock #topBtn .mapBtn a {
          background: #6a9cc9 url("../img/cmn/map_icon.png") 50px 10px no-repeat;
          padding: 18px 0 0 90px; }
        #topMvArea .wrap .titleBlock #topBtn .busBtn a {
          background: #6a9cc9 url("../img/cmn/bus_icon.png") 18px 15px no-repeat;
          padding: 18px 0 0 70px; }
        #topMvArea .wrap .titleBlock #topBtn .mapBtn a:hover,
        #topMvArea .wrap .titleBlock #topBtn .busBtn a:hover {
          opacity: 0.8;
          text-decoration: none; }
    #topMvArea .wrap .titleBlock_sp {
      display: none; }
      @media only screen and (max-width: 768px) {
        #topMvArea .wrap .titleBlock_sp {
          display: block;
          margin-top: 3vw; }
          #topMvArea .wrap .titleBlock_sp .wrap {
            display: flex;
            justify-content: space-around;
            width: 100vw;
            height: 16.4vw; }
            #topMvArea .wrap .titleBlock_sp .wrap h1 {
              width: 41vw; }
            #topMvArea .wrap .titleBlock_sp .wrap div {
              width: 39.733vw;
              margin-top: 2vw; }
          #topMvArea .wrap .titleBlock_sp .read_sp {
            width: 90vw;
            margin: 0 auto;
            font-size: 1.2rem;
            line-height: 1.5;
            text-align: center;
            color: #2d5784; } }

/*Section calBtnArea*/
#calBtnArea {
  width: 100%;
  padding: 45px 0 56px;
  background-color: #cdd7e0; }
  #calBtnArea .calBtn a {
    display: block;
    width: 782px;
    height: 70px;
    border-radius: 3px;
    margin: 0 auto;
    background: #6a9cc9 url("../img/cmn/calender_icon.png") 60px 10px no-repeat;
    padding: 28px 0 0 140px;
    color: #fff;
    font-size: 2rem; }
    #calBtnArea .calBtn a span {
      font-size: 1.4rem;
      padding-left: 2em; }
    #calBtnArea .calBtn a:hover {
      opacity: 0.8;
      text-decoration: none; }
  @media only screen and (max-width: 768px) {
    #calBtnArea {
      display: none; } }

/*Section topicsArea 2019.12.20追加*/
#topicsArea {
  padding: 20px 0 50px; }
  @media only screen and (max-width: 768px) {
    #topicsArea {
      padding: 5vw 0 10vw;
      overflow-x: hidden; } }
  #topicsArea .wrap {
    width: 1000px;
    padding: 30px 0;
    margin: 0 auto;
    background-color: #fff; }
    @media only screen and (max-width: 768px) {
      #topicsArea .wrap {
        width: 100vw;
        padding: 4vw 0;
        overflow-x: hidden; } }
    #topicsArea .wrap h2 {
      font-size: 2.4rem;
      padding: 5px 0;
      margin: 20px 0;
      text-align: center; }
      @media only screen and (max-width: 768px) {
        #topicsArea .wrap h2 {
          width: 100vw;
          font-size: 2.6rem; } }
    #topicsArea .wrap div.topicsWrap {
      display: flex;
      justify-content: space-around;
      width: 990px;
      padding: 0;
      font-size: 1.6rem; }
      @media only screen and (max-width: 768px) {
        #topicsArea .wrap div.topicsWrap {
          width: 80vw;
          height: 37vw;
          padding: 0;
          font-size: 1.4rem;
          margin: 0 auto; } }
      #topicsArea .wrap div.topicsWrap div.topicsBanner {
        width: 290px !important;
        height: 138px;
        line-height: 1.3;
        position: relative;
        overflow: hidden;
        margin: 0 20px;
        border-radius: 3px; }
        @media only screen and (max-width: 768px) {
          #topicsArea .wrap div.topicsWrap div.topicsBanner {
            width: 80vw !important;
            height: 37vw !important;
            margin: 0 0 5px; } }
        #topicsArea .wrap div.topicsWrap div.topicsBanner a {
          color: #fff;
          display: block;
          background: #2d5784; }
          #topicsArea .wrap div.topicsWrap div.topicsBanner a img {
            opacity: 0.4; }
          #topicsArea .wrap div.topicsWrap div.topicsBanner a h3 {
            width: 100%;
            font-size: 1.8rem;
            text-align: center;
            position: absolute;
            top: 42px; }
            @media only screen and (max-width: 768px) {
              #topicsArea .wrap div.topicsWrap div.topicsBanner a h3 {
                top: 12vw;
                font-size: 1.7rem; } }
            #topicsArea .wrap div.topicsWrap div.topicsBanner a h3 span {
              font-size: 72%;
              font-weight: normal; }
        #topicsArea .wrap div.topicsWrap div.topicsBanner a:hover {
          color: #fff;
          text-decoration: none;
          background: #6a9cc9; }

/*sp_topInfo 2020.02.26追加*/
#sp_topInfo {
  display: none; }
  @media only screen and (max-width: 768px) {
    #sp_topInfo {
      overflow-x: hidden;
      display: block;
      width: 100vw;
      padding: 3vw 4vw 0;
      background-color: #fff;
      text-align: center; } }

/*Section newsArea*/
#newsArea {
  width: 100%;
  padding: 50px 0;
  background-color: #e9ecef; }
  @media only screen and (max-width: 768px) {
    #newsArea {
      padding: 5vw 0;
      overflow-x: hidden; } }
  #newsArea .wrap {
    display: flex;
    width: 1095px;
    margin: 0 auto; }
    @media only screen and (max-width: 768px) {
      #newsArea .wrap {
        display: block;
        width: 100vw;
        padding: 0 4vw; } }
    #newsArea .wrap h2 {
      width: 225px;
      font-family: Arial, Helvetica, "sans-serif";
      font-size: 3.5rem;
      font-weight: normal;
      letter-spacing: 3px; }
      @media only screen and (max-width: 768px) {
        #newsArea .wrap h2 {
          width: 92vw;
          font-size: 2.6rem; } }
    #newsArea .wrap dl {
      display: flex;
      flex-wrap: wrap;
      width: 870px;
      padding: 35px 0 20px 45px;
      border-left: 1px solid #2d5784; }
      @media only screen and (max-width: 768px) {
        #newsArea .wrap dl {
          display: block;
          width: 92vw;
          border-left: none;
          padding: 20px 0 0;
          font-size: 1.4rem; } }
      #newsArea .wrap dl dt {
        width: 205px;
        line-height: 1.3; }
        #newsArea .wrap dl dt.category-news {
          background: url("../img/cmn/news_cate01.png") top right no-repeat; }
        #newsArea .wrap dl dt.category-rec {
          background: url("../img/cmn/news_cate02.png") top right no-repeat; }
        #newsArea .wrap dl dt.category-cal {
          background: url("../img/cmn/news_cate03.png") top right no-repeat; }
        #newsArea .wrap dl dt.category-blog {
          background: url("../img/cmn/news_cate04.png") top right no-repeat; }
        @media only screen and (max-width: 768px) {
          #newsArea .wrap dl dt {
            width: 190px;
            margin-bottom: 5px; } }
      #newsArea .wrap dl dd {
        width: 619px;
        margin-bottom: 15px;
        padding-left: 10px;
        line-height: 1.3; }
        @media only screen and (max-width: 768px) {
          #newsArea .wrap dl dd {
            width: 100%;
            padding-left: 0; } }
  #newsArea .bknoLink {
    width: 1095px;
    margin: 0 auto;
    text-align: right; }
    @media only screen and (max-width: 768px) {
      #newsArea .bknoLink {
        width: 92vw;
        margin: 20px auto 0; } }
    #newsArea .bknoLink a {
      display: inline-block;
      padding: 5px 30px 5px 0;
      background: url("../img/cmn/link_arrow.png") center right no-repeat;
      background-size: 20px 20px; }

/*Section intro01*/
#intro01 {
  width: 1095px;
  height: 544px;
  margin: 150px auto;
  position: relative; }
  @media only screen and (max-width: 768px) {
    #intro01 {
      width: 100vw;
      margin: 60px auto;
      height: inherit;
      overflow: hidden; } }
  #intro01 .textBlock {
    position: absolute;
    z-index: 100;
    left: 100px;
    bottom: 0;
    width: 480px;
    opacity: 0;
    transition: all 1.2s ease;
    transition-delay: .75s; }
    @media only screen and (max-width: 768px) {
      #intro01 .textBlock {
        position: relative;
        width: 92vw;
        margin: 20px auto; } }
    #intro01 .textBlock.active {
      left: 0;
      opacity: 1; }
    #intro01 .textBlock h2 {
      font-size: 2.8rem;
      line-height: 2;
      letter-spacing: 5px;
      margin-bottom: 40px; }
      @media only screen and (max-width: 768px) {
        #intro01 .textBlock h2 {
          font-size: 2rem;
          line-height: 1.6;
          letter-spacing: 2px;
          margin-bottom: 20px; } }
    #intro01 .textBlock p {
      line-height: 1.6;
      margin-bottom: 20px; }
    #intro01 .textBlock .ditBtn a {
      display: block;
      text-align: center;
      width: 215px;
      padding: 10px 0;
      background-color: #6a9cc9;
      border-radius: 3px;
      color: #fff; }
      #intro01 .textBlock .ditBtn a:hover {
        text-decoration: none;
        opacity: 0.8; }
  #intro01 .photoBlock {
    position: absolute;
    right: -100px;
    top: 0;
    opacity: 0;
    transition: all 1.2s ease; }
    @media only screen and (max-width: 768px) {
      #intro01 .photoBlock {
        position: relative; } }
    #intro01 .photoBlock.active {
      right: 0;
      opacity: 1; }

#intro02 {
  width: 1095px;
  height: 515px;
  margin: 150px auto;
  position: relative; }
  @media only screen and (max-width: 768px) {
    #intro02 {
      width: 100vw;
      margin: 60px auto;
      height: inherit;
      overflow: hidden; } }
  #intro02 .textBlock {
    position: absolute;
    z-index: 100;
    right: 100px;
    bottom: 0;
    width: 480px;
    opacity: 0;
    transition: all 1.2s ease;
    transition-delay: .75s; }
    @media only screen and (max-width: 768px) {
      #intro02 .textBlock {
        position: relative;
        width: 92vw;
        margin: 20px auto; } }
    #intro02 .textBlock.active {
      right: 0;
      opacity: 1; }
    #intro02 .textBlock h2 {
      font-size: 2.8rem;
      text-align: right;
      line-height: 2;
      letter-spacing: 5px;
      margin-bottom: 40px; }
      @media only screen and (max-width: 768px) {
        #intro02 .textBlock h2 {
          font-size: 2rem;
          line-height: 1.6;
          letter-spacing: 2px;
          margin-bottom: 20px; } }
    #intro02 .textBlock p {
      line-height: 1.6;
      text-align: right;
      margin-bottom: 20px; }
    #intro02 .textBlock .ditBtn a {
      float: right;
      display: block;
      text-align: center;
      width: 215px;
      padding: 10px 0;
      background-color: #6a9cc9;
      border-radius: 3px;
      color: #fff; }
      #intro02 .textBlock .ditBtn a:hover {
        text-decoration: none;
        opacity: 0.8; }
  #intro02 .photoBlock {
    position: absolute;
    left: -100px;
    top: 0;
    opacity: 0;
    transition: all 1.2s ease; }
    @media only screen and (max-width: 768px) {
      #intro02 .photoBlock {
        position: relative;
        left: inherit;
        top: inherit; } }
    #intro02 .photoBlock.active {
      left: 0;
      opacity: 1; }

#intro03 {
  width: 1095px;
  height: 544px;
  margin: 150px auto 190px;
  position: relative; }
  @media only screen and (max-width: 768px) {
    #intro03 {
      width: 100vw;
      margin: 60px auto;
      height: inherit;
      clear: both;
      overflow: hidden; } }
  #intro03 .textBlock {
    position: absolute;
    z-index: 100;
    left: 100px;
    bottom: 0;
    width: 480px;
    opacity: 0;
    transition: all 1.2s ease;
    transition-delay: .75s; }
    @media only screen and (max-width: 768px) {
      #intro03 .textBlock {
        position: relative;
        width: 92vw;
        margin: 20px auto; } }
    #intro03 .textBlock.active {
      left: 0;
      opacity: 1; }
    #intro03 .textBlock h2 {
      font-size: 2.8rem;
      line-height: 2;
      letter-spacing: 5px;
      margin-bottom: 40px; }
      @media only screen and (max-width: 768px) {
        #intro03 .textBlock h2 {
          font-size: 2rem;
          line-height: 1.6;
          letter-spacing: 2px;
          margin-bottom: 20px; } }
    #intro03 .textBlock p {
      line-height: 1.6;
      margin-bottom: 20px; }
    #intro03 .textBlock .ditBtn a {
      display: block;
      text-align: center;
      width: 215px;
      padding: 10px 0;
      background-color: #6a9cc9;
      border-radius: 3px;
      color: #fff; }
      #intro03 .textBlock .ditBtn a:hover {
        text-decoration: none;
        opacity: 0.8; }
  #intro03 .photoBlock {
    position: absolute;
    right: -100px;
    top: 0;
    opacity: 0;
    transition: all 1.2s ease; }
    @media only screen and (max-width: 768px) {
      #intro03 .photoBlock {
        position: relative; } }
    #intro03 .photoBlock.active {
      right: 0;
      opacity: 1; }

/*Section doctorProfile 2020.02.21追加*/
#doctorProfile {
  width: 100%;
  margin: 0 auto;
  background-color: #cdd7e0; }
  @media only screen and (max-width: 768px) {
    #doctorProfile {
      width: 92vw;
      margin: 0 auto 30px;
      background-color: #fff;
      overflow-x: hidden; } }
  #doctorProfile ul {
    display: flex;
    justify-content: space-between;
    width: 990px;
    margin: 0 auto; }
    @media only screen and (max-width: 768px) {
      #doctorProfile ul {
        display: block; } }
    #doctorProfile ul li {
      margin-top: -50px; }
      @media only screen and (max-width: 768px) {
        #doctorProfile ul li {
          margin-top: 0; } }
      #doctorProfile ul li a {
        width: 472px;
        border: 1px solid #6a9cc9;
        background-color: #f6f9fc;
        display: flex;
        justify-content: space-between;
        padding: 12px; }
        @media only screen and (max-width: 768px) {
          #doctorProfile ul li a {
            width: 92vw;
            margin-bottom: 15px; } }
        #doctorProfile ul li a .ph {
          width: 90px; }
        #doctorProfile ul li a .text {
          width: 340px;
          line-height: 1.5; }
          @media only screen and (max-width: 768px) {
            #doctorProfile ul li a .text {
              width: inherit;
              padding-left: 12px; } }
        #doctorProfile ul li a:hover {
          text-decoration: none;
          border: 1px solid #9c4dd3;
          background-color: #fff; }

/*Section contMenu*/
#contMenu {
  width: 100%;
  padding: 20px 0 40px;
  background-color: #cdd7e0; }
  @media only screen and (max-width: 768px) {
    #contMenu {
      padding: 20px 0;
      overflow-x: hidden; } }
  #contMenu ul {
    width: 990px;
    margin: 40px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    @media only screen and (max-width: 768px) {
      #contMenu ul {
        width: 92vw;
        display: block;
        margin: 20px auto 0; } }
    #contMenu ul li {
      margin-bottom: 30px; }
      #contMenu ul li a {
        display: block;
        position: relative;
        width: 300px;
        height: 445px;
        padding: 25px;
        background-color: #fff;
        border-radius: 12px; }
        #contMenu ul li a:hover {
          background-color: #deeefc;
          text-decoration: none; }
        @media only screen and (max-width: 768px) {
          #contMenu ul li a {
            width: 92vw;
            height: auto; } }
        #contMenu ul li a h3 {
          font-size: 20px;
          text-align: center;
          margin: 20px auto; }
        #contMenu ul li a p {
          font-size: 1.5rem;
          line-height: 1.5; }
        #contMenu ul li a .dit {
          width: 250px;
          position: absolute;
          bottom: 25px;
          text-align: center;
          padding: 8px 30px 8px 0;
          background: url("../img/cmn/link_arrow.png") no-repeat;
          background-position: center right 55px;
          background-size: 20px 20px; }
          @media only screen and (max-width: 768px) {
            #contMenu ul li a .dit {
              margin: 20px auto 0;
              position: relative;
              bottom: inherit;
              background-position: center right 50px; } }
        @media only screen and (max-width: 768px) {
          #contMenu ul li a img {
            width: 100%; } }

/*Section accessMap*/
#accessMap {
  width: 100%;
  padding: 70px 0 40px;
  background-color: #e9ecef; }
  @media only screen and (max-width: 768px) {
    #accessMap {
      padding: 30px 0;
      overflow-x: hidden; } }
  #accessMap h2 {
    text-align: center;
    font-size: 3.6rem;
    font-weight: normal; }
    @media only screen and (max-width: 768px) {
      #accessMap h2 {
        font-size: 2.6rem; } }
  #accessMap div {
    width: 1015px;
    margin: 30px auto;
    padding: 35px 50px;
    background-color: #fff;
    text-align: center; }
    @media only screen and (max-width: 768px) {
      #accessMap div {
        width: 100vw;
        margin: 20px auto 0;
        padding: 10px; } }

/*Section homeFooter*/
#homeFooter {
  width: 100%;
  height: 880px;
  padding-top: 50px;
  background: url("../img/cmn/ft_home_img.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover; }
  @media only screen and (max-width: 768px) {
    #homeFooter {
      width: 100vw;
      height: 140vw;
      background-size: contain; } }
  #homeFooter .name {
    width: 420px;
    margin: 0 auto;
    text-align: center; }
    @media only screen and (max-width: 768px) {
      #homeFooter .name {
        width: 80vw; } }
  #homeFooter .time {
    width: 420px;
    margin: 20px auto 0;
    text-align: center; }
    @media only screen and (max-width: 768px) {
      #homeFooter .time {
        width: 80vw; } }
  #homeFooter .btn {
    width: 420px;
    margin: 30px auto 0;
    display: flex;
    justify-content: space-between; }
    @media only screen and (max-width: 768px) {
      #homeFooter .btn {
        width: 80vw; } }
    #homeFooter .btn a {
      display: block;
      width: 202px;
      height: 48px;
      color: #fff;
      border-radius: 3px; }
      @media only screen and (max-width: 768px) {
        #homeFooter .btn a {
          width: 39vw; } }
    #homeFooter .btn .mapBtn a {
      background: #6a9cc9 url("../img/cmn/map_icon.png") 50px 10px no-repeat;
      padding: 18px 0 0 90px; }
      @media only screen and (max-width: 768px) {
        #homeFooter .btn .mapBtn a {
          background-position: 20px 10px;
          padding: 18px 0 0 60px; } }
    #homeFooter .btn .busBtn a {
      background: #6a9cc9 url("../img/cmn/bus_icon.png") 18px 15px no-repeat;
      padding: 18px 0 0 70px; }
      @media only screen and (max-width: 768px) {
        #homeFooter .btn .busBtn a {
          background-position: 10px 12px;
          padding: 10px 20px 0 70px;
          font-size: 1.4rem; } }
    #homeFooter .btn .mapBtn a:hover,
    #homeFooter .btn .busBtn a:hover {
      opacity: 0.8;
      text-decoration: none; }

/*Section footerGroupLogo Home調整用*/
@media only screen and (max-width: 768px) {
  #footerGroupLogo {
    padding: 25px 0 55vw !important; } }

/*# sourceMappingURL=front.css.map */