@charset "UTF-8";
/*フッター共通
---------------------------------------------------------------------------*/
#footer-contents, #footermenu {
  padding: 2rem var(--space-small) 2rem var(--space-large);
}

@media screen and (max-width: 700px) {
  #footer-contents, #footermenu {
    padding: 2rem var(--space-small) 2rem var(--space-small);
  }
}
/*追加指定ここまで*/
/*フッターのコンテンツ（住所やマップが入っているブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
#footer-contents {
  transition: 0.45s;
  display: grid;
  grid-template-columns: 30% 66%;
  -moz-column-gap: 4%;
       column-gap: 4%;
  align-items: center;
  background: #6a6462;
  color: #fff;
}
@media screen and (max-width: 1100px) {
  #footer-contents {
    display: block;
  }
}
#footer-contents .left h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 50px;
}
@media screen and (max-width: 1400px) {
  #footer-contents .left h3 {
    font-size: 25px;
  }
}
@media screen and (max-width: 1100px) {
  #footer-contents .left h3 {
    font-size: 22px;
  }
}
#footer-contents .left .navi {
  width: 100%;
  display: grid;
  grid-template-rows: repeat(3, max-content);
  grid-template-columns: repeat(2, max-content);
  grid-auto-flow: column;
  gap: 2rem 3rem;
  margin-bottom: 50px;
}
@media screen and (max-width: 1100px) {
  #footer-contents .left .navi {
    display: none;
  }
}
#footer-contents .left .navi li:hover a::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
#footer-contents .left .navi li a {
  font-size: 16px;
  padding: 0 3px 5px;
  position: relative;
}
#footer-contents .left .navi li a::before {
  background: #cfe5ff;
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}
@media screen and (max-width: 1100px) {
  #footer-contents .left .l-under {
    display: none;
  }
}
#footer-contents .left .l-under p {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
#footer-contents .left .l-under .icons {
  list-style: none;
  margin: 0 0 0 20px;
  padding: 0;
  display: flex;
  align-self: center;
}
@media screen and (max-width: 400px) {
  #footer-contents .left .l-under .icons {
    margin: 0;
  }
}
#footer-contents .left .l-under .icons li {
  margin-right: 10px;
}
@media screen and (max-width: 400px) {
  #footer-contents .left .l-under .icons li:first-child {
    margin-right: 0px;
    margin: 0 auto;
  }
}
#footer-contents .left .l-under .icons li:first-child a {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 400px) {
  #footer-contents .left .l-under .icons li:last-child {
    display: none;
  }
}
#footer-contents .left .l-under .icons img {
  width: 32px;
}
#footer-contents .left .l-under .icons i, #footer-contents .left .l-under .icons img {
  font-size: 40px;
  display: inline-block;
  transition: transform 0.3s;
}
#footer-contents .left .l-under .icons i:hover, #footer-contents .left .l-under .icons img:hover {
  animation: shakeTilt 0.6s ease-in-out;
}
@keyframes shakeTilt {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(15deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#footer-contents .left .l-under h3 {
  width: 400px;
}
#footer-contents .left .l-under h3 img {
  width: 100%;
}
@media screen and (max-width: 1100px) {
  #footer-contents .right {
    margin-bottom: 30px;
  }
}
#footer-contents .right .r-header {
  width: 100%;
}
#footer-contents .right .r-header .add {
  display: grid;
  grid-template-columns: 30% 65%;
  -moz-column-gap: 5%;
       column-gap: 5%;
  margin-bottom: 15px;
  padding: 0 10px 15px;
  border-bottom: 1px solid #fff;
}
#footer-contents .right .r-header .add:last-child {
  margin-bottom: 0px;
  padding: 0 10px;
  border-bottom: none;
}
@media screen and (max-width: 768px) {
  #footer-contents .right .r-header .add {
    display: block;
  }
}
#footer-contents .right .r-header .add .place {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}
#footer-contents .right .r-header .add .info a {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}
#footer-contents .right p {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #fff;
}
#footer-contents .right p span {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}
#footer-contents .right p {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
#footer-contents .right p ul li {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
#footer-contents .right p ul li a {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
#footer-contents .under {
  display: none;
}
@media screen and (max-width: 1100px) {
  #footer-contents .under {
    display: block;
    display: grid;
    grid-template-columns: 40% 55%;
  }
}
@media screen and (max-width: 768px) {
  #footer-contents .under {
    display: block;
  }
}
#footer-contents .under .inst {
  margin-right: 50px;
}
@media screen and (max-width: 768px) {
  #footer-contents .under .inst {
    margin-right: 0px;
    margin-bottom: 50px;
  }
}
#footer-contents .under .inst .sign {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width: 900px) {
  #footer-contents .under .inst .sign {
    text-align: center;
  }
}
#footer-contents .under .inst .icons {
  list-style: none;
  margin: 0 0 0 40px;
  padding: 0;
  display: flex;
  align-self: center;
}
@media screen and (max-width: 900px) {
  #footer-contents .under .inst .icons {
    margin: 0;
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: 400px) {
  #footer-contents .under .inst .icons {
    margin: 0;
  }
}
#footer-contents .under .inst .icons li {
  margin-right: 10px;
}
@media screen and (max-width: 900px) {
  #footer-contents .under .inst .icons li {
    display: flex;
    justify-content: center;
    margin: 0 10px;
  }
}
#footer-contents .under .inst .icons li span {
  margin: 0 10px;
}
@media screen and (max-width: 900px) {
  #footer-contents .under .inst .icons li span {
    display: none;
  }
}
#footer-contents .under .inst .icons img {
  width: 32px;
}
#footer-contents .under .inst .icons i {
  font-size: 40px;
  display: inline-block;
  transition: transform 0.3s;
}
#footer-contents .under .inst .icons i:hover {
  animation: shakeTilt 0.6s ease-in-out;
}
@keyframes shakeTilt {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(15deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#footer-contents .under h3 {
  width: 400px;
}
@media screen and (max-width: 900px) {
  #footer-contents .under h3 {
    width: 250px;
  }
}
@media screen and (max-width: 768px) {
  #footer-contents .under h3 {
    width: 300px;
    margin: 0 auto;
  }
}
#footer-contents .under h3 img {
  width: 100%;
}

/*追加指定ここまで*/
/*footer-contents内のマップ。レスポンシブにする為のものなので、基本は編集不要です。
---------------------------------------------------------------------------*/
.iframe-box {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  /*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
  position: relative;
  overflow: hidden;
}
.iframe-box iframe {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
  background: #363332;
  /*背景色*/
  color: #fff;
  /*文字色*/
  font-size: 0.8rem;
  /*文字サイズ。*/
  display: flex;
  /*flexボックスを使う指定*/
  justify-content: space-between;
  /*並びかたの種類の指定*/
  align-items: flex-start;
  /*垂直揃えの指定。上に配置されるように。*/
}
#footermenu a {
  text-decoration: none;
  color: inherit;
}
#footermenu ul {
  margin: 0;
  list-style: none;
  padding: 0 0.3em;
  flex: 1;
}
#footermenu .title {
  font-weight: bold;
  /*太字にする*/
  color: #ccc;
  /*文字色*/
  padding-bottom: 5px;
  /*下に空けるスペース*/
}

/*ボックス内のリンクテキスト設定*/
/*ulタグ（メニューの１列あたり）*/
/*メニューの見出し(title)*/
/*フッター設定
---------------------------------------------------------------------------*/
small {
  font-size: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

footer {
  font-size: 0.7rem;
  /*文字サイズ*/
  background: #1d1b1b;
  /*背景色*/
  color: #fff;
  /*文字色*/
  text-align: center;
  /*内容をセンタリング*/
  padding: 1rem;
  /*ボックス内の余白*/
}
footer a {
  color: inherit;
  text-decoration: none;
}
footer .pr {
  display: block;
}

/*リンクテキスト*/
/*著作部分*/
/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
@media screen and (max-width: 400px) {
  .right p {
    text-align: center;
  }
}
.right p ul.icons {
  margin-left: 50px !important;
}
/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/
/*画像を囲むブロック*/
.mainimg-slick {
  width: 60vw;
  height: auto;
}
@media screen and (max-width: 700px) {
  .mainimg-slick {
    width: 80vw;
    margin-left: auto;
  }
}
@media screen and (max-width: 700px) {
  .mainimg-slick {
    width: 100vw;
    margin-left: auto;
  }
}
.mainimg-slick div {
  border-radius: 10vw 0 0 10vw;
}
@media screen and (max-width: 700px) {
  .mainimg-slick div {
    border-radius: 0;
  }
}

ul.slick-dots {
  margin: 0;
  padding: 0;
  line-height: 1;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: -30px;
}
ul.slick-dots li {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
}
ul.slick-dots li button {
  border: none;
  padding: 0;
  display: block;
  text-indent: -9999px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  background: #ccc;
}
ul.slick-dots li.slick-active button {
  background: #111;
}

/*丸いページナビボタン１個あたりの設定*/
/*buttonタグ*/
/*buttonのアクティブ時（現在表示されている画像を示すボタン）*//*# sourceMappingURL=footer.css.map */