@charset "UTF-8";
/*

	施設

	*/
/* Vendor */
/* Variable */
/*

breakpoints

*/
/*

base color

*/
/*

text color

*/
/*

table color

*/
/*

button color

*/
/*

width

*/
/*

webfonts

*/
/* Mixin */
/*

clearfix

*/
/*

メディアクエリ

ブレークポイント定義
```sass
$breakpoints:(
	tablet: 959px,
	sp: 679px
);
```

● max-widthで指定する
```sass
@include mq(sp) {
	height:40px;
}
```
```output css
@media screen and (max-width: 679px) {
	height: 40px;
}
```

● 範囲指定する場合は、引数に2つ入れる
```sass
@include mq(sp tablet) {
	height:40px;
}
```
```output css
@media screen and (min-width: 680px) and (max-width: 959px) {
	height: 40px;
}
```

● min-widthで指定する場合は第2引数をtrueにする
```sass
@include mq(tablet, true) {
	height:40px;
}
```
```output css
@media screen and (min-width: 960px) {
	height: 40px;
}
```

*/
/* Function */
html,
body {
  overflow-x: hidden;
  -ms-overflow-x: hidden; }

body.facilities {
  width: 100%;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", sans-serif;
  /* ↓↓↓ 共通部品 ↓↓↓ */
  /* ↑↑↑ 共通部品 ↑↑↑*/ }
  body.facilities a {
    text-decoration: none; }
  body.facilities .mv.green {
    background-image: url("../../images/facilities/mv.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat; }
    @media screen and (max-width: 575px) {
      body.facilities .mv.green {
        background-image: url("../../images/facilities/sp_mv.jpg");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat; } }
    body.facilities .mv.green p {
      text-align: center;
      padding-bottom: 0; }
      @media screen and (max-width: 1199px) {
        body.facilities .mv.green p {
          margin: 0;
          padding-bottom: 0; } }
      @media screen and (max-width: 767px) {
        body.facilities .mv.green p {
          font-size: 14px;
          font-size: 1.4rem; } }
      @media screen and (max-width: 575px) {
        body.facilities .mv.green p {
          font-size: 10px;
          font-size: 1rem; } }
      body.facilities .mv.green p .tab {
        display: none; }
        @media screen and (max-width: 1199px) {
          body.facilities .mv.green p .tab {
            display: block; } }
        @media screen and (max-width: 575px) {
          body.facilities .mv.green p .tab {
            font-size: 10px;
            font-size: 1rem; } }
    body.facilities .mv.green p + p {
      padding-top: 1%;
      padding-bottom: 5%; }
  body.facilities .cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 70px; }
    @media screen and (max-width: 767px) {
      body.facilities .cards {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
    body.facilities .cards .card {
      width: 23.5%;
      -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
      box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); }
      @media screen and (max-width: 767px) {
        body.facilities .cards .card {
          width: 48%; }
          body.facilities .cards .card:nth-child(n + 3) {
            margin-top: 25px; } }
      body.facilities .cards .card p {
        margin: 0; }
      body.facilities .cards .card__contents {
        padding: 0 6%;
        font-size: 15px;
        font-size: 1.5rem; }
        @media screen and (max-width: 1199px) {
          body.facilities .cards .card__contents {
            font-size: 12px;
            font-size: 1.2rem; } }
        @media screen and (max-width: 767px) {
          body.facilities .cards .card__contents {
            padding: 0 13%;
            font-size: 16px;
            font-size: 1.6rem; } }
        @media screen and (max-width: 575px) {
          body.facilities .cards .card__contents {
            padding: 0 6%;
            font-size: 12px;
            font-size: 1.2rem; } }
      body.facilities .cards .card__title {
        font-size: 26px;
        font-size: 2.6rem;
        font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
        font-weight: normal;
        text-align: center;
        letter-spacing: 5px;
        margin: 20px 0; }
        @media screen and (max-width: 1199px) {
          body.facilities .cards .card__title {
            font-size: 18px;
            font-size: 1.8rem; } }
        @media screen and (max-width: 767px) {
          body.facilities .cards .card__title {
            font-size: 26px;
            font-size: 2.6rem; } }
        @media screen and (max-width: 575px) {
          body.facilities .cards .card__title {
            font-size: 18px;
            font-size: 1.8rem; } }
      body.facilities .cards .card__text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-line-pack: justify;
        align-content: space-between;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        body.facilities .cards .card__text p {
          width: 100%; }
      body.facilities .cards .card__btn {
        width: 100%;
        height: 40px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: #009e96;
        margin-top: 20px; }
        @media screen and (max-width: 575px) {
          body.facilities .cards .card__btn {
            margin-top: 15px; } }
        body.facilities .cards .card__btn a {
          line-height: 40px;
          font-size: 14px;
          font-size: 1.4rem;
          color: #fff;
          text-align: center;
          display: block;
          position: relative;
          -webkit-transition: all .3s;
          -o-transition: all .3s;
          transition: all .3s;
          text-decoration: none; }
          body.facilities .cards .card__btn a .arrow {
            width: 17%;
            height: 1px;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 94%;
            -webkit-transform: translate(-100%, -50%);
            -ms-transform: translate(-100%, -50%);
            transform: translate(-100%, -50%);
            -webkit-transition: all .3s;
            -o-transition: all .3s;
            transition: all .3s; }
            body.facilities .cards .card__btn a .arrow::after {
              content: "";
              width: 12px;
              height: 1px;
              background-color: #fff;
              position: absolute;
              top: 50%;
              right: 0;
              -webkit-transform-origin: right;
              -ms-transform-origin: right;
              transform-origin: right;
              -webkit-transform: translateY(-50%) rotate(29.5deg);
              -ms-transform: translateY(-50%) rotate(29.5deg);
              transform: translateY(-50%) rotate(29.5deg);
              -webkit-transition: all .3s;
              -o-transition: all .3s;
              transition: all .3s; }
          body.facilities .cards .card__btn a:hover {
            background-color: #fff;
            color: #009e96; }
            body.facilities .cards .card__btn a:hover .arrow {
              background: #009e96; }
              body.facilities .cards .card__btn a:hover .arrow::after {
                background: #009e96; }
          @media screen and (max-width: 1199px) {
            body.facilities .cards .card__btn a {
              font-size: 10px;
              font-size: 1rem; } }
          @media screen and (max-width: 767px) {
            body.facilities .cards .card__btn a {
              font-size: 14px;
              font-size: 1.4rem; } }
          @media screen and (max-width: 575px) {
            body.facilities .cards .card__btn a {
              font-size: 10px;
              font-size: 1rem; } }
          body.facilities .cards .card__btn a .arrow {
            width: 15%; }
            @media screen and (max-width: 1199px) {
              body.facilities .cards .card__btn a .arrow {
                width: 12%; }
                body.facilities .cards .card__btn a .arrow::after {
                  width: 8px; } }
            @media screen and (max-width: 767px) {
              body.facilities .cards .card__btn a .arrow {
                width: 15%; }
                body.facilities .cards .card__btn a .arrow::after {
                  width: 12px; } }
            @media screen and (max-width: 575px) {
              body.facilities .cards .card__btn a .arrow {
                width: 10%; }
                body.facilities .cards .card__btn a .arrow::after {
                  width: 8px; } }
          body.facilities .cards .card__btn a:hover {
            outline: 1px #009e96 solid; }