@charset "UTF-8";
/* CSS Document */
/* ======================================

フォント

====================================== */
/* ======================================

リセット・調整

====================================== */
html, body, div, p, span, ul, ol, li, table, th, td, h1, h2, h3, h4, h5, h6, a, form, input, textarea, dl, dt, dd, iframe, figure {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

* {
  box-sizing: border-box; }

body {
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #4b4b4b;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box; }

p {
  text-align: justify; }

img {
  display: block;
  max-width: 100%;
  border: 0; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

table th {
  font-weight: 700; }

@keyframes scroll-right {
  0% {
    background-position: 100% 60%; }
  100% {
    background-position: 0 60%; } }
@keyframes bounce {
  0% {
    transform: translate(-50px, 0); }
  25% {
    transform: translate(-110px, 0); }
  50% {
    transform: translate(-50px, 0); }
  75% {
    transform: translate(10px, 0); }
  100% {
    transform: translate(-50px, 0); } }
@keyframes bouncesp {
  0% {
    transform: translate(-20px, 0); }
  25% {
    transform: translate(-50px, 0); }
  50% {
    transform: translate(-20px, 0); }
  75% {
    transform: translate(10px, 0); }
  100% {
    transform: translate(-20px, 0); } }
section > h2 {
  font-size: 28px;
  margin-bottom: 2em;
  text-align: center; }
  @media screen and (max-width: 1000px) {
    section > h2 {
      font-size: 20px;
      margin-bottom: 1.5em; } }

#container header {
  height: 182px;
  padding: 0 55px 0 80px;
  background-image: url("../images/bg-header.png");
  /* 画像のパスを指定 */
  background-repeat: repeat-x;
  /* 水平方向に繰り返す */
  background-size: auto 121px;
  /* 背景画像のサイズを指定 */
  background-position: bottom;
  animation: scroll-right 1000s linear infinite;
  /* アニメーションの適用 */
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center; }
  @media screen and (max-width: 1000px) {
    #container header {
      height: 81px;
      padding: 0 15px;
      background-size: auto 60px; } }
  #container header h1 span {
    font-size: 12px;
    display: block; }
    @media screen and (max-width: 1000px) {
      #container header h1 span {
        font-size: 11px; } }
  #container header h1 #logo img {
    width: 240px; }
    @media screen and (max-width: 1000px) {
      #container header h1 #logo img {
        width: 150px; } }
  #container header img.car {
    width: 144px;
    height: 144px;
    animation: bounce 4s linear infinite; }
    @media screen and (max-width: 1000px) {
      #container header img.car {
        width: 70px;
        height: 70px;
        animation: bouncesp 4s linear infinite; } }
#container #fv {
  padding: 70px;
  width: calc(100% - 100px);
  margin: 0 auto;
  background: url("../images/fv+.png") bottom no-repeat;
  background-size: cover;
  border-radius: 30px;
  aspect-ratio: 2/1; }
  @media screen and (max-width: 1000px) {
    #container #fv {
      padding: 35px;
      width: calc(100% - 30px);
      border-radius: 15px;
      aspect-ratio: 1/1; } }
  @media only screen and (max-width: 1000px) and (min-width: 767px) {
    #container #fv {
      aspect-ratio: 2/1; } }
  #container #fv img {
    width: 30%; }
    @media screen and (max-width: 1000px) {
      #container #fv img {
        width: 60%; } }
    @media only screen and (max-width: 1000px) and (min-width: 767px) {
      #container #fv img {
        width: 30%; } }
#container #news {
  background: #fff3f0;
  position: relative;
  z-index: -1;
  top: -20vw;
  padding-top: calc(20vw + 60px);
  padding-bottom: 0;
  padding-bottom: 100px;
  margin-bottom: -20vw; }
  @media screen and (max-width: 1000px) {
    #container #news {
      padding-top: calc(20vw + 30px);
      padding-bottom: 30px; } }
  #container #news table {
    display: block;
    width: fit-content;
    margin: 0 auto;
    max-width: 1000px; }
    @media screen and (max-width: 1000px) {
      #container #news table {
        max-width: calc(100% - 30px); } }
    #container #news table tr th, #container #news table tr td {
      padding: 10px;
      font-size: 17px;
      vertical-align: top; }
      @media screen and (max-width: 1000px) {
        #container #news table tr th, #container #news table tr td {
          padding: 5px 10px;
          font-size: 15px; } }
    #container #news table tr th {
      color: #c4747e; }
    #container #news table tr td p.add {
      font-size: 90%; }
#container img.cloud-top {
  width: 100%;
  margin-top: 120px; }
  @media screen and (max-width: 1000px) {
    #container img.cloud-top {
      margin-top: 30px; } }
#container img.cloud-bottom {
  width: 100%;
  margin-bottom: 120px; }
  @media screen and (max-width: 1000px) {
    #container img.cloud-bottom {
      margin-bottom: 30px; } }
#container #message {
  padding: 100px 15px;
  position: relative; }
  @media screen and (max-width: 1000px) {
    #container #message {
      padding: 30px 15px; } }
  #container #message .message-2col {
    width: 940px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 80px; }
    @media screen and (max-width: 1000px) {
      #container #message .message-2col {
        flex-direction: column;
        width: 100%;
        justify-content: center;
        gap: 30px; } }
    #container #message .message-2col img {
      width: 200px; }
      @media screen and (max-width: 1000px) {
        #container #message .message-2col img {
          width: 100px;
          margin: 0 auto; } }
    #container #message .message-2col div .message-content {
      margin-bottom: 2em; }
      @media screen and (max-width: 1000px) {
        #container #message .message-2col div .message-content {
          font-size: 16px;
          padding: 0 2em; } }
    #container #message .message-2col div .name {
      text-align: right;
      font-size: 14px; }
      @media screen and (max-width: 1000px) {
        #container #message .message-2col div .name {
          font-size: 14px;
          text-align: center; } }
      #container #message .message-2col div .name span {
        font-size: 22px;
        margin-left: 1em; }
        @media screen and (max-width: 1000px) {
          #container #message .message-2col div .name span {
            font-size: 20px; } }
  #container #message .insert-01 {
    position: absolute;
    width: 153px;
    top: -80px;
    right: 80px; }
    @media screen and (max-width: 1000px) {
      #container #message .insert-01 {
        width: 80px;
        top: -30px;
        right: 15px; } }
  #container #message .insert-02 {
    position: absolute;
    width: 190px;
    bottom: -80px;
    left: 80px; }
    @media screen and (max-width: 1000px) {
      #container #message .insert-02 {
        width: 95px;
        bottom: -25px;
        left: 15px; } }
#container #info {
  padding-top: 100px;
  background: url("../images/bg-info.png") no-repeat;
  background-size: cover;
  padding-bottom: 100px; }
  @media screen and (max-width: 1000px) {
    #container #info {
      padding: 0 0 15px;
      padding-top: 30px; } }
  #container #info .info-2col {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 100px; }
    @media screen and (max-width: 1000px) {
      #container #info .info-2col {
        width: 100%;
        flex-direction: column;
        padding: 0 15px;
        gap: 30px; } }
    #container #info .info-2col div {
      width: 450px; }
      @media screen and (max-width: 1000px) {
        #container #info .info-2col div {
          width: 100%; } }
      #container #info .info-2col div h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 0.5em; }
        #container #info .info-2col div h3::before {
          content: "●"; }
      #container #info .info-2col div table {
        font-size: 13px; }
        #container #info .info-2col div table.timetable {
          width: 100%;
          margin-bottom: 0.5em;
          line-height: 1.25; }
          #container #info .info-2col div table.timetable tr {
            border-bottom: 1px solid #ccc; }
            #container #info .info-2col div table.timetable tr:last-child {
              border-bottom: 0; }
              #container #info .info-2col div table.timetable tr:last-child td:first-child {
                border-bottom-left-radius: 10px; }
              #container #info .info-2col div table.timetable tr:last-child td:last-child {
                border-bottom-right-radius: 10px; }
            #container #info .info-2col div table.timetable tr th, #container #info .info-2col div table.timetable tr td {
              padding: 10px;
              text-align: center;
              border-right: 1px solid #ccc;
              white-space: nowrap;
              font-size: 15px; }
              @media screen and (max-width: 1000px) {
                #container #info .info-2col div table.timetable tr th, #container #info .info-2col div table.timetable tr td {
                  padding: 5px;
                  font-size: 13px; } }
              #container #info .info-2col div table.timetable tr th:last-child, #container #info .info-2col div table.timetable tr td:last-child {
                border-right: 0; }
            #container #info .info-2col div table.timetable tr th {
              background: #fe9aa6; }
              #container #info .info-2col div table.timetable tr th:first-child {
                border-top-left-radius: 10px; }
              #container #info .info-2col div table.timetable tr th:last-child {
                border-top-right-radius: 10px; }
            #container #info .info-2col div table.timetable tr td {
              background: #fff; }
              #container #info .info-2col div table.timetable tr td span.open::after {
                display: block;
                content: url("../images/timetable-open.svg");
                width: 18px;
                height: 18px;
                margin: 0 auto; }
                @media screen and (max-width: 1000px) {
                  #container #info .info-2col div table.timetable tr td span.open::after {
                    width: 14px;
                    height: 14px; } }
              #container #info .info-2col div table.timetable tr td span.close::after {
                display: block;
                content: url("../images/timetable-close.svg");
                width: 16px;
                height: 16px;
                margin: 0 auto; }
                @media screen and (max-width: 1000px) {
                  #container #info .info-2col div table.timetable tr td span.close::after {
                    width: 12px;
                    height: 12px; } }
              @media screen and (max-width: 1000px) {
                #container #info .info-2col div table.timetable tr td span.ampm {
                  display: block; } }
              @media screen and (max-width: 1000px) {
                #container #info .info-2col div table.timetable tr td span.period {
                  display: block;
                  font-size: 10px; } }
          #container #info .info-2col div table.timetable + p {
            font-size: 14px; }
        #container #info .info-2col div table.service {
          width: 100%; }
          #container #info .info-2col div table.service tr {
            border-bottom: 1px solid #ccc; }
            #container #info .info-2col div table.service tr:first-child {
              border-top: 1px solid #ccc; }
            #container #info .info-2col div table.service tr td {
              padding: 10px;
              vertical-align: top; }
              #container #info .info-2col div table.service tr td:first-child {
                white-space: nowrap; }
#container #access {
  padding: 100px 15px;
  position: relative; }
  @media screen and (max-width: 1000px) {
    #container #access {
      padding: 30px 30px 60px; } }
  #container #access iframe {
    display: block;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 5/2;
    margin: 0 auto;
    border-radius: 10px; }
    @media screen and (max-width: 1000px) {
      #container #access iframe {
        width: 100%;
        aspect-ratio: 1/1; } }
    @media only screen and (max-width: 1000px) and (min-width: 767px) {
      #container #access iframe {
        aspect-ratio: 5/2; } }
  #container #access .access-content {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0 0 50px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start; }
    @media screen and (max-width: 1000px) {
      #container #access .access-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px 0 0 0;
        gap: 15px; } }
    #container #access .access-content > img {
      width: 194px;
      height: auto;
      aspect-ratio: 1/1;
      margin-top: -100px; }
      @media screen and (max-width: 1000px) {
        #container #access .access-content > img {
          margin: 0 auto;
          width: 130px; } }
    #container #access .access-content .hospital-name {
      margin-left: 50px; }
      @media screen and (max-width: 1000px) {
        #container #access .access-content .hospital-name {
          margin-left: 0;
          text-align: center; } }
      #container #access .access-content .hospital-name img {
        width: 220px; }
        @media screen and (max-width: 1000px) {
          #container #access .access-content .hospital-name img {
            width: 180px;
            margin: 0 auto; } }
      #container #access .access-content .hospital-name p {
        font-size: 15px;
        margin-top: 1em; }
        @media screen and (max-width: 1000px) {
          #container #access .access-content .hospital-name p {
            text-align: center; } }
    #container #access .access-content .hospital-tel {
      text-align: center;
      margin-left: auto; }
      @media screen and (max-width: 1000px) {
        #container #access .access-content .hospital-tel {
          margin-left: 0; } }
      #container #access .access-content .hospital-tel a {
        font-family: "din-2014", sans-serif;
        font-weight: 400;
        width: fit-content;
        display: block;
        font-size: 32px;
        color: #fff;
        background: #fe8f98;
        border-radius: 100px;
        text-decoration: none;
        padding: 0.1em 2em;
        margin-bottom: 0.15em; }
        @media screen and (max-width: 1000px) {
          #container #access .access-content .hospital-tel a {
            font-size: 24px;
            margin: 0 auto 0.15em; } }
      #container #access .access-content .hospital-tel p {
        font-size: 12px;
        text-align: center; }
  #container #access .insert-03 {
    position: absolute;
    width: 120px;
    left: calc(50% + 300px);
    top: 20px; }
    @media screen and (max-width: 1000px) {
      #container #access .insert-03 {
        width: 96px;
        left: auto;
        right: 15px;
        top: -15px; } }
#container footer {
  height: 150px;
  background: url("../images/bg-footer.png") repeat-x bottom;
  background-size: auto 110px; }
  #container footer .copyright {
    font-size: 11px;
    text-align: center;
    color: #c4747e; }