@keyframes slideleft {
  from {
    opacity: 0;
    transform: translateX(100px)
  }
  to {
    opacity: 1;
    transform: translateX(0)
  }
}
@keyframes slideright {
  from {
    opacity: 0;
    transform: translateX(-100px)
  }
  to {
    opacity: 1;
    transform: translateX(0)
  }
}
@media screen and (max-width: 750px), print {
  #canvas-container {
    bottom: -2px
  }
}
#location {
  position: relative;
  overflow: hidden
}
#location #main {
  position: relative
}
#location #main figure {
  position: relative
}
#location #main figure figcaption {
  position: absolute;
  bottom: 0em;
  right: 0em;
  color: #fff;
  font-size: min(2.4svw, 12px);
  text-shadow: 2px 3px 3px rgba(0, 0, 0, .4);
  z-index: 10;
	  	padding-right: 10px;
}
#location #main h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Cinzel", serif;
  font-size: min(9.8svw, 80px);
  letter-spacing: .1em;
  text-shadow: 0 0 10px rgba(0, 0, 0, .7);
  color: #fff
}
@media screen and (min-width: 751px), print {
  #location #main h1 {
    font-size: min(6.7svw, 48px)
  }
}
#location #contents .lead {
  background: #d5d5ce;
  background: linear-gradient(180deg, #D5D5CE 0%, rgb(213, 213, 206) 48%, rgb(255, 255, 255) 100%);
  text-align: center;
  padding: 3em 0 1em
}
@media screen and (min-width: 751px), print {
  #location #contents .lead {
    padding: 5em 0 6em
  }
}
#location #contents .lead .txt01 {
  font-size: min(6svw, 42px);
  letter-spacing: .1em;
  margin: 0 0 1em;
  padding-bottom: .5em
}
@media screen and (min-width: 751px), print {
  #location #contents .lead .txt01 {
    font-size: min(4.8svw, 30px)
  }
}
#location #contents .lead .txt02 {
  font-size: min(4.2svw, 24px);
  letter-spacing: .1em
}
@media screen and (min-width: 751px), print {
  #location #contents .lead .txt02 {
    font-size: min(3.2svw, 16px)
  }
}
#location #contents .sec01, #location #contents .sec02, #location #contents .sec03, #location #contents .sec04 {
  position: relative;
  padding: 2.25em 0 3em 0
}
@media screen and (min-width: 751px), print {
  #location #contents .sec01, #location #contents .sec02, #location #contents .sec03, #location #contents .sec04 {
    padding: 7em 0 5em 0
  }
}
#location #contents .sec01 h2, #location #contents .sec02 h2, #location #contents .sec03 h2, #location #contents .sec04 h2 {
  color: #404040;
  font-family: "Cinzel", serif;
  font-size: min(9svw, 72px);
  letter-spacing: .1em;
  margin-left: 5%;
  top: 0;
  left: 3%;
  z-index: 5;
}
@media screen and (min-width: 751px), print {
  #location #contents .sec01 h2, #location #contents .sec02 h2, #location #contents .sec03 h2, #location #contents .sec04 h2 {
    position: absolute;
    left: 10%;
    right: 0;
    margin: auto;
    opacity: 1;
    color: #333331;
  }
}
#location #contents .sec01 .flex, #location #contents .sec02 .flex, #location #contents .sec03 .flex, #location #contents .sec04 .flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  position: relative;
  margin: 0 0 3em
}
@media screen and (min-width: 751px), print {
  #location #contents .sec01 .flex, #location #contents .sec02 .flex, #location #contents .sec03 .flex, #location #contents .sec04 .flex {
    margin-bottom: 1em
  }
}
#location #contents .sec01 .flex::after, #location #contents .sec02 .flex::after, #location #contents .sec03 .flex::after, #location #contents .sec04 .flex::after {
  content: "";
  background: #9a9a82;
  width: 90%;
  height: 80%;
  position: absolute;
  top: 20%;
  left: 0
}
@media screen and (min-width: 751px), print {
  #location #contents .sec01 .flex::after, #location #contents .sec02 .flex::after, #location #contents .sec03 .flex::after, #location #contents .sec04 .flex::after {
    width: 70%;
    height: 75%
  }
}
#location #contents .sec01 .flex .inner, #location #contents .sec02 .flex .inner, #location #contents .sec03 .flex .inner, #location #contents .sec04 .flex .inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse
}
@media screen and (min-width: 751px), print {
  #location #contents .sec01 .flex .inner, #location #contents .sec02 .flex .inner, #location #contents .sec03 .flex .inner, #location #contents .sec04 .flex .inner {
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    align-items: center
  }
}
#location #contents .sec01 .flex .left, #location #contents .sec02 .flex .left, #location #contents .sec03 .flex .left, #location #contents .sec04 .flex .left {
  color: #fff;
  position: relative;
  z-index: 2;
  padding: 2em 2em 3em 2em
}
#location #contents .sec01 .flex .left dl dt, #location #contents .sec02 .flex .left dl dt, #location #contents .sec03 .flex .left dl dt, #location #contents .sec04 .flex .left dl dt {
  font-size: min(5svw, 32px);
  font-family: "Shippori Mincho";
  letter-spacing: .1em;
  letter-spacing: .1em;
  margin: 0 0 1em
}
@media screen and (min-width: 751px), print {
  #location #contents .sec01 .flex .left dl dt, #location #contents .sec02 .flex .left dl dt, #location #contents .sec03 .flex .left dl dt, #location #contents .sec04 .flex .left dl dt {
    font-size: min(4.2svw, 24px);
    margin: 0 0 .5em
  }
}
#location #contents .sec01 .flex .left dl dd, #location #contents .sec02 .flex .left dl dd, #location #contents .sec03 .flex .left dl dd, #location #contents .sec04 .flex .left dl dd {
  font-size: min(3.6svw, 18px);
  letter-spacing: .1em;
  font-weight: 300
}
@media screen and (min-width: 751px), print {
  #location #contents .sec01 .flex .left dl dd, #location #contents .sec02 .flex .left dl dd, #location #contents .sec03 .flex .left dl dd, #location #contents .sec04 .flex .left dl dd {
    font-size: min(3.2svw, 16px)
  }
}
#location #contents .sec01 .flex .right, #location #contents .sec02 .flex .right, #location #contents .sec03 .flex .right, #location #contents .sec04 .flex .right {
  width: 90%;
  margin: 0 2.5% 0 7.5%;
  position: relative;
  z-index: 2
}
#location #contents .sec01 .flex .right .photo .cap, #location #contents .sec02 .flex .right .photo .cap, #location #contents .sec03 .flex .right .photo .cap, #location #contents .sec04 .flex .right .photo .cap {
  color: #fff;
  display: block;
  font-size: min(3.2svw, 16px);
  margin-top: .5em
}
#location #contents .sec01 .flex::after, #location #contents .sec03 .flex::after {
  content: "";
  animation: slideright 1s ease forwards
}
@media screen and (min-width: 751px), print {
  #location #contents .sec01 .flex::after, #location #contents .sec03 .flex::after {
    width: 80%
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec01 .flex .left, #location #contents .sec03 .flex .left {
    padding: 2em 2em 2em 10%
  }
}
#location #contents .sec02 h2, #location #contents .sec04 h2 {
  margin-right: 5%;
  left: 5%;
  text-align: right
}
@media screen and (min-width: 751px), print {
  #location #contents .sec02 h2, #location #contents .sec04 h2 {
    right: 10%;
    left: auto
  }
}
#location #contents .sec02 .flex::after, #location #contents .sec04 .flex::after {
  content: "";
  background: #d5d5ce;
  left: auto;
  right: 0;
  animation: slideleft 1s ease forwards
}
#location #contents .sec02 .flex .left, #location #contents .sec04 .flex .left {
  color: #404040;
  padding: 2em 2em 3em 20%
}
@media screen and (min-width: 751px), print {
  #location #contents .sec02 .flex .left, #location #contents .sec04 .flex .left {
    padding: 2em 10% 2em 4em
  }
}
#location #contents .sec02 .flex .right, #location #contents .sec04 .flex .right {
  margin: 0 0 0 2.5%
}
#location #contents .sec02 .flex .right .photo .cap, #location #contents .sec04 .flex .right .photo .cap {
  color: #404040;
  text-align: right
}
@media screen and (min-width: 751px), print {
  #location #contents .sec01 .flex {
    flex-direction: row;
    align-items: center;
    justify-content: center
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec01 .flex .right {
    width: auto;
    margin: 0 0 50px;
    width: 50%
  }
  #location #contents .sec01 .flex .right img {
    width: 80%;
    margin-right: auto;
    display: block
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec01 .flex .left {
    width: 50%
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec02 .flex {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec02 .flex .left {
    width: 50%
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec02 .flex .right {
    width: auto;
    margin: 0 0 50px;
    width: 50%
  }
  #location #contents .sec02 .flex .right img {
    width: 80%;
    margin-left: auto;
    display: block
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec03 .flex {
    flex-direction: row;
    align-items: center;
    justify-content: center
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec03 .flex:after {
    width: 80%
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec03 .flex .left {
    width: 50%
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec03 .flex .right {
    width: auto;
    margin: 0 0 50px;
    width: 50%
  }
  #location #contents .sec03 .flex .right img {
    width: 80%;
    margin-right: auto;
    display: block
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec04 h2 {
    right: 20%
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec04 .flex {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec04 .flex .left {
    width: 50%
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec04 .flex .right {
    width: auto;
    margin: 0 0 50px;
    width: 50%
  }
  #location #contents .sec04 .flex .right img {
    width: 80%;
    margin-left: auto;
    display: block
  }
}
#location #contents .bunkyohongou {
  background: rgba(213, 213, 206, .65);
  color: #404040;
  position: relative;
  padding: 2.4em 0em 4em;
  margin: 0 0 2em
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou {
    background: url(../img/location/bunkyohongou_bg.webp) no-repeat bottom center, #d5d5ce;
    background-size: cover;
    max-width: 1004px;
    width: 100%;
    margin: 0 auto 5em;
    padding: 3.5em 5em;
    overflow: hidden
  }
}
#location #contents .bunkyohongou .cap {
  position: absolute;
  color: #fff;
  display: block;
  font-size: min(3.2svw, 16px);
  bottom: 0;
  right: 0;
  padding: .5em
}
#location #contents .bunkyohongou h2 {
  color: #55788e;
  font-size: min(6svw, 42px);
  text-align: center;
  position: relative;
  margin: 0 0 .5em;
  font-family: "Cinzel", serif;
  letter-spacing: .1em
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou h2 {
    font-size: min(4svw, 22px);
    background: #55788e;
    color: #fff;
    left: -7%;
    position: absolute;
    transform: rotate(-45deg);
    width: 26%;
    top: 5%
  }
}
#location #contents .bunkyohongou h2::after {
  content: "";
  width: 20px;
  height: 1px;
  background: #55788e;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%)
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou h2::after {
    content: none
  }
}
#location #contents .bunkyohongou .name {
  font-size: min(6.5svw, 46px);
  letter-spacing: .1em;
  text-align: center;
  margin: 0
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou .name {
    margin: 0 0 1.5em;
    font-size: min(4.6svw, 28px)
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou .grid {
    margin-bottom: 40px;
    display: grid;
    grid-template-areas: "figure txt01""figure txt";
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2em;
    letter-spacing: .1em;
    align-items: center
  }
}
#location #contents .bunkyohongou .txt01 {
  grid-area: txt01;
  font-size: min(5svw, 32px);
  margin: 0 0 1em;
  text-align: center;
  letter-spacing: .1em
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou .txt01 {
    text-align: left;
    margin: auto 0 0;
    font-size: min(4svw, 22px)
  }
}
#location #contents .bunkyohongou .txt01 .grayblue {
  color: #55788e;
  font-size: min(10svw, 82px);
  font-family: "Shippori Mincho", serif
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou .txt01 .grayblue {
    font-size: min(5.2svw, 36px)
  }
}
#location #contents .bunkyohongou .txt {
  grid-area: txt;
  font-size: min(3.8svw, 20px);
  text-align: center;
  margin: 1em 0 1.5em;
  line-height: 2
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou .txt {
    text-align: left;
    font-size: min(2.8svw, 14px);
    margin: .5em 0 1.5em
  }
}
#location #contents .bunkyohongou figure {
  grid-area: figure;
  position: relative
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou figure {
    width: 100%
  }
}
#location #contents .bunkyohongou figure figcaption {
  position: relative;
  text-align: right;
  display: block;
  bottom: 0;
  right: 0;
  color: #404040;
  font-size: min(3.2svw, 16px);
  margin-top: .5em;
	  	padding-right: 10px;
}
#location #contents .bunkyohongou dl {
  background: #fff;
  max-width: 1024px;
  width: 90%;
  margin: 0 auto
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou dl {
    width: 100%
  }
}
#location #contents .bunkyohongou dl dt {
  font-family: "Cinzel", serif;
  letter-spacing: .1em;
  text-align: center;
  font-size: min(4.4svw, 26px);
  background: #55788e;
  color: #fff;
  padding: .2em
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou dl dt {
    font-size: min(3.6svw, 18px)
  }
}
#location #contents .bunkyohongou dl dd {
  font-size: min(4svw, 22px);
  padding: .5em 1em 1em
}
#location #contents .bunkyohongou dl dd ul {
  gap: .5em;
  -moz-column-count: 2;
  column-count: 2;
  padding: 0;
  margin: 0;
  list-style: none
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou dl dd ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 34px;
    padding: 0;
    margin: 0
  }
}
#location #contents .bunkyohongou dl dd ul li {
  text-indent: -1em;
  padding-left: 1em;
  font-size: min(3.8svw, 20px);
  -moz-column-break-inside: avoid;
  break-inside: avoid;
  width: 100%
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou dl dd ul li {
    font-size: min(3.2svw, 16px);
    width: auto;
    list-style: none;
    white-space: nowrap
  }
}
#location #contents .bunkyohongou dl dd ul li.last {
  text-align: right
}
@media screen and (min-width: 751px), print {
  #location #contents .bunkyohongou dl dd ul li.last {
    width: 100%
  }
}
#location #contents .bunkyohongou .photobox {
  display: none
}
#location #contents .sec05 {
  width: 90%;
  margin: 0 auto 3em
}
@media screen and (min-width: 751px), print {
  #location #contents .sec05 {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto 3em
  }
}
#location #contents .sec05 h2 {
  font-family: "Cinzel", serif;
  letter-spacing: .1em;
  text-align: center;
  margin-bottom: 1.5em;
  font-size: min(5svw, 32px)
}
@media screen and (min-width: 751px), print {
  #location #contents .sec05 h2 {
    font-size: min(5.5svw, 40px);
    margin-bottom: .5em
  }
}
#location #contents .sec05 .tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 0 1em
}
@media screen and (min-width: 751px), print {
  #location #contents .sec05 .tab {
    flex-wrap: nowrap;
    gap: 1em;
    margin: 0 0 2em
  }
}
#location #contents .sec05 .tab li {
  width: 32%;
  margin: 0 0 5px
}
@media screen and (min-width: 751px), print {
  #location #contents .sec05 .tab li {
    width: 16.6666666667%
  }
}
#location #contents .sec05 .tab li a {
  display: block;
  text-align: center;
  padding: .7em 0;
  background: rgba(85, 120, 142, .3);
  color: #404040;
  font-size: min(2.8svw, 14px)
}
@media screen and (min-width: 751px), print {
  #location #contents .sec05 .tab li a {
    font-size: min(3.2svw, 16px);
    padding: 1em 0
  }
}
#location #contents .sec05 .tab li.active a {
  background: #55788e;
  color: #fff
}
@media screen and (min-width: 751px), print {
  #location #contents .sec05 .maparea {
    display: flex;
    gap: 2em
  }
}
#location #contents .sec05 .maparea .gmap {
  margin: 0 0 1em
}
#location #contents .sec05 .maparea .gmap #google-map {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1
}
@media screen and (min-width: 751px), print {
  #location #contents .sec05 .maparea .gmap #google-map {
    width: 430px
  }
}
#location #contents .sec05 .maparea .gm-svpc {
  display: none
}
#location #contents .sec05 .maparea .list {
  width: 100%
}
@media screen and (max-width: 750px), print {
  #location #contents .sec05 .maparea .list {
    width: 100%;
    height: 200px
  }
}
#location #contents .sec05 .maparea .list ul {
  display: none
}
#location #contents .sec05 .maparea .list ul.active {
  display: block
}
#location #contents .sec05 .maparea .list ul li {
  display: grid;
  grid-template-columns: 2em 1fr auto;
  align-items: center;
  margin: 0 0 .5em;
  padding: 0 0 .5em;
  border-bottom: 1px solid #d5dee3;
  width: 100%;
  cursor: pointer
}
#location #contents .sec05 .maparea .list ul li span {
  display: block
}
#location #contents .sec05 .maparea .list ul li span.number {
  background: #55788e;
  color: #fff;
  display: inline-block;
  text-align: center;
  font-size: min(2.8svw, 14px);
  padding: .25em 0
}
#location #contents .sec05 .maparea .list ul li span.name {
  padding: 0 0 0 1em;
  font-size: min(3.2svw, 16px)
}
@media screen and (min-width: 751px), print {
  #location #contents .sec05 .maparea .list ul li span.name {
    font-size: min(2.4svw, 12px)
  }
}
#location #contents .sec05 .maparea .list ul li .data {
  display: flex;
  align-items: baseline;
  margin: 0 0 0 auto;
  padding-left: .5em;
  font-size: min(2.8svw, 14px);
  line-height: 1.6;
  white-space: nowrap;
  flex-direction: column;
  width: 80px
}
@media screen and (min-width: 751px), print {
  #location #contents .sec05 .maparea .list ul li .data {
    font-size: min(2.4svw, 12px)
  }
}
#location #contents .sec05 .maparea .list ul li .data div {
  display: flex
}
#location #contents .sec05 .maparea .list ul li .data div.data-walk {
  font-size: min(3.6svw, 18px)
}
#location #contents .sec05 .maparea .list ul li .data div .distance_left {
  display: block;
  margin-left: -7px
}
#location #contents .sec05 .maparea .list ul li .data span {
  text-align: right
}
#location #contents .sec05 .maparea .list ul li .data span.li-data-min {
  font-size: min(3.6svw, 18px)
}
@media screen and (min-width: 751px), print {
  #location #contents .sec05 .maparea .list ul li .data span.li-data-min {
    font-size: min(3.6svw, 18px)
  }
}
@media screen and (min-width: 751px), print {
  #location #contents .sec05 .maparea .list ul li .data span {
    font-size: min(2.4svw, 12px)
  }
}
#location #contents .sec05 .maparea .list ul li.shopping .number {
  background-color: #d76390
}
#location #contents .sec05 .maparea .list ul li.education .number {
  background-color: #7d5e9d
}
#location #contents .sec05 .maparea .list ul li.medical .number {
  background-color: #3384bc
}
#location #contents .sec05 .maparea .list ul li.park .number {
  background-color: #75912f
}
#location #contents .sec05 .maparea .list ul li.culture .number {
  background-color: #3f8283
}
#location #contents .sec05 .maparea .list ul li.public .number {
  background-color: #db6c1b
}
.swiper {
  padding: 0 0 2em
}
@media screen and (min-width: 751px), print {
  .swiper {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto
  }
}
.swiper .swiper-slide {
  width: 70%;
  max-width: 400px;
  height: auto
}
.swiper .swiper-slide dl {
  text-align: center;
  padding: .5em 0 0 0
}
.swiper .swiper-slide dl dt {
  font-size: min(3.8svw, 20px);
  color: #404040
}
@media screen and (min-width: 751px), print {
  .swiper .swiper-slide dl dt {
    font-size: min(3.8svw, 20px)
  }
}
.swiper .swiper-slide dl dd {
  font-size: min(3.2svw, 16px);
  color: #9d9d9d
}
@media screen and (min-width: 751px), print {
  .swiper .swiper-slide dl dd {
    font-size: min(3.2svw, 16px)
  }
}
.swiper .swiper-pagination {
  text-align: center;
  bottom: 0
}
.swiper .swiper-pagination-bullet {
  background: #55788e;
  opacity: .25
}
.swiper .swiper-pagination-bullet-active {
  opacity: 1
} /*# sourceMappingURL=location.css.map */


    /* 波1セット分のラッパー */
    .wave-block {
      position: relative;
      width: 100%;
      height: 120px; /* 波を表示するための領域 */
      overflow: hidden;
      margin-top: 80px;
      background: transparent;
    }

    /* 下に固定したい場合は .wave-block に position:fixed などを付ける */
    .wave-container {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 70px;
      transition: all 1s;
      z-index: 1;
      pointer-events: none;
    }

    .wave-container canvas {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 70px;
      display: block;
      z-index: 1;
    }

    @media screen and (max-width: 750px), print {
      .wave-container {
        bottom: -2px;
      }
    }

    /* 見やすさ用のサンプル装飾 */
    .sample-box {
      max-width: 900px;
      margin: 0 auto;
      padding: 24px;
      font-size: 18px;
      line-height: 1.8;
    }

    .bg-1 { background: #b9c7d6; }
    .bg-2 { background: #d9d7c8; }
    .bg-3 { background: #b7b59f; }

    .image-wave-section {
      position: relative;
      width: 100%;
      margin: 40px auto;
      overflow: hidden;
    }

    .image-wave-section img {
      display: block;
      width: 100%;
      height: auto;
    }

.image-wave-section .access_midasi{
	  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Cinzel", serif;
  font-size: min(9.8svw, 80px);
  letter-spacing: .1em;
  text-shadow: 0 0 10px rgba(0, 0, 0, .7);
  color: #fff
}

.image-wave-section  figcaption {
  position: absolute;
  bottom: 0em;
  right: 0em;
  color: #fff;
  font-size: min(2.4svw, 12px);
  text-shadow: 2px 3px 3px rgba(0, 0, 0, .4);
  z-index: 10;
		padding-right: 10px;
}


@media screen and (min-width: 751px), print {
	.image-wave-section .access_midasi{    font-size: min(6.7svw, 48px)
  }
}

    .wave-container {
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 100%;
      height: 90px;
      z-index: 2;
      pointer-events: none;
    }

    .wave-container canvas {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 90px;
      display: block;
    }

    @media screen and (max-width: 750px) {
      .wave-container {
        height: 60px;
      }

      .wave-container canvas {
        height: 60px;
      }
    }

@media screen and (max-width: 750px) {
  .image-wave-section img {
    height: 680px; /* ←ここを大きくする */
	  object-fit: cover;
  }

  .wave-container {
    height: 60px;
  }

  .wave-container canvas {
    height: 60px;
  }
}