@charset "UTF-8";
.abt-title{
  margin-bottom: 3vw;
}

.blueback{/* 背景１ */
  width: 100%;
  background-image: url(../images/about/about_background02.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  aspect-ratio: 1440/980;
  display: grid;
  place-content: center;
}
@media screen and (max-width:900px){
  .blueback{
    aspect-ratio: 390/547;
  }
}
@media screen and (max-width:500px){
  .blueback{
    background-size: 300% 100%;
    aspect-ratio: 390/1000;
  }
}
.about-text{
  color: #fff;
  padding: 50px 0;
}
.about-letter{
  font-size: calc(64/1400*100vw);
  font-weight: normal;
  padding: 0;
  line-height: 1;
}
.at8{
  font-size: calc(36/1400*100vw);
  font-weight: normal;
}
.m9{
  font-size: calc(16/1400*100vw);
  line-height: 2em;
  font-weight: normal;
}
@media screen and (max-width: 900px) {
  .about-letter{
  font-size: calc(64/900*100vw);
  font-weight: normal;
  padding: 0;
  line-height: 1;
}
  .at8{
    font-size: calc(36/900*100vw);
  }
  .m9{
    font-size: calc(16/900*100vw);
    line-height: 2em;
  }
}
@media screen and (max-width: 500px) {
  .about-letter{
  font-size: calc(64/500*100vw);
  font-weight: normal;
}
  .at8{
    font-size: calc(20/500*100vw);
    margin-bottom: 6vw;
  }
  .m9{
    font-size: calc(16/500*100vw);
  }
}
/* ↓街紹介＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.town-cont-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(190/1440*100vw);
}
.town-header{
  margin-bottom: 155px;
}

.mybr{
  display: inline-block;
}
.town-cont{
  display: flex;
  justify-content: space-between;
}
.town-cont-reverse{
  flex-direction: row-reverse;
}
.town-cont-img{
  flex-basis: 55%;
}
.town-cont-text{
  flex-basis: 42%;
}
.town-cont-text h3{
  font-size: calc(32rem/16);
  margin-bottom: 20px;
}
.town-cont-text p{
  font-size: calc(20rem/16);
  font-size: clamp(calc(14rem/16),calc(20/1440*100vw),calc(20rem/16));
  margin-bottom: calc(40/1440*100vw);
  font-feature-settings: "palt" 1;
  letter-spacing: 0.05em;
}
@media screen and (max-width:900px){
  .town-cont{
    flex-direction: column;
  }
  .town-cont-img{
    margin-bottom: 30px;
  }
  .town-cont-text{
    text-align: center;
  }
  .town-cont-text p{
    font-size: clamp(calc(14rem/16),calc(18/900*100vw),calc(18rem/16));
  }
}
/* ↑街紹介 */

/* ↓挨拶＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.blueback2{
  padding-bottom: calc(250/1440*100vw);
  width: 100%;
  background-image: url(../images/about/about_backimage1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.msg-header {
  text-align: right;
  margin-top: 170px;
}
.msg-title{
  width: 100%;
  height: calc(250/1440*100vw);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
}
.jp{
  margin-top: 10px;
}
.msg-cont{
  display: flex;
  justify-content: space-between;
}
.msg-cont-sg{
  margin-bottom: calc(150/1440*100vw);
  margin-top: calc(120/1440*100vw);
}

.msg-cont-reverse{
  flex-direction: row-reverse;
}
.msg-cont-img{
  flex-basis: 30%;
}
.msg-cont-text{
  flex-basis: 60%;
}
.m4bc{
  padding-bottom: 36px;
}
.position {
  font-size: calc(20/1440*100vw); /* 名前より小さく */
  margin-right: 0.5em;
  vertical-align: middle; /* 中央に寄せる */
}
.m10{
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.8em;
}
.m10 .block {
  display: inline-block;
}
@media screen and (max-width: 900px) {
  .m10{
  font-size: calc(20/900*100vw);
  line-height: 1.6em;
}
.position {
  font-size: calc(18/900*100vw); /* 名前より小さく */
}
}

@media screen and (max-width: 768px) {
  .blueback2 {
    padding: 150px 0;
    background-size: cover;
  }
  .msg-header {
    margin-top: 40px;
    text-align: center;
  }
  .msg-title {
    justify-content: center;
    height: auto;
    flex-direction: column;
    text-align: center;
    margin-bottom: 50px;
  }
  .msg-cont {
    flex-direction: column;
    align-items: center;
    padding: 0 5%;
    text-align: center;
  }
.msg-cont-img {
    flex-basis: auto;
    width: 80%;
    max-width: 300px; /* 適切な上限値を設定 */
    margin: 0 auto;
  }
  .msg-cont-text {
    margin-top: 20px;
    padding: 0 10px;
  }
  .m10{
  font-size: clamp(12px, 1.4vw, 20px);
  line-height: 1.8em;
}
}

/* -------------------- */
.movie-section{
  /* max-width: 1200px; */
  width: 100%;
  height: auto;
  text-align: center;
  padding-bottom: 10%;
  padding-top: 5%;
  overflow: hidden;
}

.movie-section iframe{
  margin: 0 auto;
  width: 90%;
  max-width: 766px;
  height: auto;
  aspect-ratio: 16/9;
}
/* --------------------- */
.outline-title{
  margin-bottom: 50px;
}
.outline{
  display: flex;
  gap: 14px;
}
.outline-map{
  flex-basis: 48%;
}
.outline-map iframe{
  width: 100%;
  aspect-ratio: 586/320;
}
.outline-info{
  font-size: calc(20rem/16);
  flex-basis: 52%;
  border-top: 1px solid #444;
}
.outline-info-item{
  border-bottom: 1px solid #444;
  display: grid;
  grid-template-columns: 3fr 10fr;
  padding: 44px 0;
}
@media screen and (max-width:800px){
  .outline{
    flex-direction: column;
  }
  .outline-info{
    font-size: calc(12rem/16);
  }
}