@charset "utf-8";


:root {
	/*--ratio: 1;*/
	--ratio: 0;
	--move-y: 0;
	--img-scale: 1.1; 
	--img-move-y: 1;
  --c-length: 11; /* gallery-contentの数 */
  --c-height: 90svh;
  --sp-height: 100svh;
}




/*  navigation
--------------------------------------------------*/
.navigation {
  position: fixed;
  left: 5.5rem;
  bottom: 5.5rem;
  width: min(calc(430 / 1500 * 100%),430px);
  z-index: 11;
}
.navigation-link {
  position: absolute;
  top: 0;
  width: calc(196 / 430 * 100%);
  height: 100%;
}
.navigation-link1 {
  right: calc(196 / 430 * 100%);
}
.navigation-link2 {
  right: 0;
}
@media screen and (max-width: 768px){
  .navigation {
    left: 2.0rem;
    bottom: calc(2.0rem + 50px);
    width: min(calc(220 / 380 * 100%),430px);
  }
}




/*  contentsWrapper
--------------------------------------------------*/
.contentsWrapper {
	position: relative;
  width: 100%;
  height: calc(calc(var(--c-length, 0) * var(--c-height, 90svh)) + 100svh);
  min-height: 100svh;
  opacity: 0;
  transition: opacity .3s linear;
  overflow: clip;
}
.subLoaded .contentsWrapper {
  opacity: 1;
}
.contentsContainer {
	position: relative;
  width: 100%;
  height: calc(var(--c-length, 0) * var(--c-height, 90svh));
}
.contentsWrapper[data-ratio="ratio1"] .p-caption,
.contentsWrapper[data-ratio="ratio1"] .f-caption {
  transform: scale(1);
  transform-origin: right bottom;
  will-change: transform;
  transition: transform .3s linear;
}
.contentsWrapper[data-ratio="ratio0"] .p-caption,
.contentsWrapper[data-ratio="ratio0"] .f-caption {
  transform: scale(.5);
  transform-origin: right bottom;
  will-change: transform;
  transition: transform .3s linear;
}
@media screen and (max-width: 768px){
  .contentsWrapper {
    height: auto;
    min-height: 0;
  }
  .contentsContainer {
    height: auto;
  }
  .contentsWrapper[data-ratio="ratio0"] .p-caption,
  .contentsWrapper[data-ratio="ratio0"] .f-caption {
    transform: scale(1);
  }
}




/*  l-firstview
--------------------------------------------------*/
.l-firstview {
	position: relative;
	color: var(--white);
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  /*transform: translateY(calc(-100% * var(--move-y, 0)));
  will-change: transform;
  height: calc(var(--c-length, 0) * var(--c-height, 90svh));*/
  height: 100%;
  width: 100%;
  pointer-events: none;
  transition: opacity .5s cubic-bezier(.19, 1, .22, 1);
}
.firstview-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /*height: calc(var(--c-height, 90svh) * 2);*/
  height: 100%;
}
.firstview-title {
  font-size: 2.4rem;
  line-height: 2.23615417;
  letter-spacing: .24em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  /*visibility: hidden;*/
  opacity: 0;
  filter: blur(3px);
  will-change: visibility,opacity,filter;
  transition-timing-function: linear !important;
}
.firstview-copy {
  position: absolute;
  top: 15%;
  left: calc(560 / 1920 * 100%);
  font-size: 1.4rem;
  line-height: 3.41921429;
  letter-spacing: .2rem;
  pointer-events: auto;
  /*visibility: hidden;*/
  opacity: 0;
  filter: blur(3px);
  will-change: visibility,opacity,filter;
  transition-timing-function: linear !important;
}
@media screen and (max-width: 768px){
  .l-firstview {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: url(../img/img_gallery1.webp) no-repeat center center/cover;
    z-index: -1;
  }
  .firstview-wrapper {
    position: relative;
    left: auto;
    top: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5.0rem 0;
  }
  .firstview-title {
    position: relative;
    font-size: 2.0rem;
    letter-spacing: .24em;
    top: auto;
    left: auto;
    transform: translate(0, 0);
  }
  .firstview-copy {
    position: relative;
    font-size: 1.2rem;
    line-height: 1.75;
    top: auto;
    left: auto;
    transform: translate(0, 0);
    text-shadow: 0 0 5px var(--black), 0 0 5px var(--black);
  }
}




/*  l-gallery
--------------------------------------------------*/
.l-gallery {
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  overflow: clip;
}
.gallery-wrapper {
  position: relative;
  height: calc(var(--c-length, 0) * var(--c-height, 90svh));
  /*transform: translateY(calc(-100% * var(--move-y, 0)));*/
  transform: translateY(calc(( -100% + 100svh ) * var(--move-y, 0)));
  transform-origin: left top;
  will-change: transform;
}
.gallery-container {
  transform: scale(calc(2 - var(--ratio, 0)));
  transform-origin: left top;
}
.gallery-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.gallery-item {
  position: relative;
  display: flex;
  overflow: clip;
  width: 50%;
  height: calc(var(--c-height, 90svh));
}
.gallery-item:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background: rgba(46, 67, 77, .8);
  transition: opacity 1.6s cubic-bezier(.19, 1, .22, 1);
}
.gallery-item.active:after {
  opacity: 0;
}
.gallery-item__photo {
	width: 100%;
}
.gallery-item__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}




/*  l-message
--------------------------------------------------*/
.l-message {
  position: fixed;
  display: flex;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: clip;
  z-index: -1;
}
.message-content {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*pointer-events: none;*/
  opacity: 0;
  transition: opacity .3s linear 1s;
}
.subLoaded .message-content {
  opacity: 1;
}
.message-content__item {
  position: absolute;
  top: 0;
  right: 0;
  margin-inline: auto 0;
  width: 50%;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation: blurOut .3s linear both;
}
.message-content__item.active {
  animation: blurIn .6s linear both .5s;
}
.message-content:first-of-type .message-content__item.active {
  animation: blurIn .6s linear both;
}
.message-content__box {
  /*width: calc(660 / 960 * 100%);*/
  width: calc(700 / 960 * 100%);
  margin-inline: auto;
}
.message-content__title {
  position: relative;
  font-size: 7.0rem;
}
.message-content__title span {
  position: relative;
  display: inline-block;
  padding-right: 7.0rem;
}
.message-content__title span:after {
  content: '';
  position: absolute;
  right: 0;
  top: .1em;
  width: 1px;
  height: 250%;
  background: #523d24;
  transform: rotate(34deg);
  transform-origin: right top;
}
.message-content__detail {
  /*width: calc(420 / 660 * 100%);*/
  width: calc(460 / 700 * 100%);
  margin-inline: auto;
  margin-top: 7.5rem;
}
.message-content__detail__heading {
  font-size: 2.4rem;
  line-height: 1.75;
  letter-spacing: .14em;
  color: #727172;
}
.message-content__detail__desc {
  font-size: 1.8rem;
  line-height: 1.75;
  letter-spacing: .12em;
  color: #727172;
  margin-top: 4.5rem;
}
.message-content__detail__name {
  font-size: 1.8rem;
  line-height: 1.75;
  letter-spacing: .2em;
  color: #727172;
  margin-top: 3.0rem;
}
.message-content__detail__photo {
  width: 100%;
  margin-top: 4.5rem;
}
.message-content__detail__photo img {
  width: 50%;
}
@keyframes blurOut{
  0%{ 
    opacity: 1;
    transform: translate(0,0);
    filter: blur(0px);
  }
  100%{ 
    opacity: 0;
    transform: translate(0,-40px);
    filter: blur(5px);
  }
}
@keyframes blurIn{
  0%{ 
    opacity: 0;
    transform: translate(0,40px);
    filter: blur(5px);
  }
  100%{ 
    opacity: 1;
    transform: translate(0,0);
    filter: blur(0px);
  }
}
@media screen and (max-width: 768px){
  .l-message {
    position: relative;
    display: block;
    height: auto;
    z-index: 0;
    margin-top: 100lvh;
    background: url(../../img/common/bg_texture_yellow.webp) no-repeat center top / cover;
  }
  .message-content {
    position: relative;
    right: auto;
    top: auto;
    height: auto;
  }
  .message-content__item {
    position: relative;
    right: auto;
    top: auto;
    display: block;
    width: 100%;
    height: auto;
    animation: none;
  }
  .message-content__item__photo {
    width: 100%;
    height: 28.0rem;
    overflow: clip;
  }
  .message-content__item__photo img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
  }
  .message-content__box {
    width: calc(340 / 380 * 100%);
    margin-inline: auto;
    padding-block: 6.0rem 10.0rem;
  }
  .message-content__title {
    font-size: 5.0rem;
  }
  .message-content__title span {
    padding-right: 5.0rem;
  }
  .message-content__title span:after {
    top: -.1em;
  }
  .message-content__detail {
    width: calc(320 / 340 * 100%);
    margin-top: 6.5rem;
  }
  .message-content__detail__heading {
    font-size: 2.0rem;
  }
  .message-content__detail__desc {
    font-size: 1.6rem;
    line-height: 2;
    margin-top: 2.5rem;
  }
  .message-content__detail__name {
    font-size: 1.6rem;
    margin-top: 3.0rem;
  }
}




/*  fixedcopy
--------------------------------------------------*/
.fixedcopy {
  position: relative;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.fixedcopy-title {
  font-size: 2.4rem;
  line-height: 2.23615417;
  letter-spacing: .24em;
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  filter: blur(3px);
  transform: translateY(10px);
  /*will-change: opacity,visibility,filter;*/
  transition-timing-function: linear !important;
}
@media screen and (max-width: 768px){
  .fixedcopy {
    position: relative;
    left: auto;
    top: auto;
    height: min(100lvh,68.0rem);
  }
  .fixedcopy-photo {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    overflow: clip;
  }
  .fixedcopy-photo__item {
    width: 100%;
    height: 100%;
    transform: scale(1.4);
  }
  .fixedcopy-photo__item img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
  }
  .fixedcopy-title {
    font-size: 2.0rem;
    letter-spacing: .24em;
  }
}




/*  l-outro
--------------------------------------------------*/
.l-outro {
  position: relative;
  z-index: 1;
}
.outro-photo {
  position: relative;
  width: 100%;
  height: 110svh;
  overflow: clip;
}
.outro-photo__item {
  width: 100%;
  height: 100%;
  /*transform: scale(1.6);*/
}
.outro-photo__item img {
  object-fit: cover;
  object-position: center bottom;
  width: 100%;
  height: 100%;
}
.outro-title {
  font-size: 2.4rem;
  line-height: 2.23615417;
  letter-spacing: .24em;
  color: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  filter: blur(3px);
  /*will-change: opacity,visibility,filter;*/
  transition-timing-function: linear !important;
}
@media screen and (max-width: 768px){
  .outro-photo {
    height: 110svh;
  }
  /*.outro-photo__item {
    transform: scale(1.4);
  }*/
  .outro-title {
    font-size: 2.0rem;
    letter-spacing: .24em;
  }
}




/*  l-lifeinfo
--------------------------------------------------*/
.l-lifeinfo {
  position: relative;
  padding-block: 16.0rem;
  z-index: 1;
}
.lifeinfo-ttl {
  font-size: 4.2rem;
  color: #ffdc7c;
  text-align: center;
  margin-bottom: 5.5rem;
}
.lifeinfo-inner {
  max-height: 1500px;
}
.lifeinfo-tabs {
  width: 100%;
}
.lifeinfo-tablist {
  width: 100%;
  padding-inline: calc(100 / 1500 * 100%);
  gap: .8rem 2.3rem;
  margin-bottom: 5.0rem;
  border-bottom: solid 2px #263f15;
  flex-wrap: nowrap;
}
.lifeinfo-tab {
  width: 100%;
  height: 5.0rem;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--white);
  text-align: center;
  padding-bottom: .1em;
  background-color: #67785b;
  border-radius: 0 1.8rem 0 0;
  transition: background-color .3s linear,color .3s linear;
}
.lifeinfo-tab.active {
  background-color: #263f15;
}
.lifeinfo-tabpanel {
  width: 100%;
  overflow: clip;
}
.lifeinfo-tabpanel__contents {
  position: relative;
  width: calc(1300 / 1500 * 100%);
  margin-inline: auto;
}
.lifeinfo-map {
  position: relative;
  width: calc(980 / 1300 * 100%);
  margin-right: auto;
}
.lifeinfo-map__base {
  width: 100%;
}
.lifeinfo-map__plot {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.lifeinfo-map__plot__item {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: calc(40 / 980 * 100%);
  aspect-ratio: 40 / 58;
  margin-bottom: 0;
  box-sizing: border-box;
  padding-bottom: calc(18 / 980 * 100%);
  padding-right: calc(1 / 980 * 100%);
  font-size: min(1.95vw,26px);
  letter-spacing: -.025em;
  font-weight: 400;
  color: var(--white);
  cursor: pointer;
  transition: transform .2s linear;
  transform-origin: bottom center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#tabpanel-3 .lifeinfo-map__plot__item {
  width: calc(40 / 980 * 100%);
  aspect-ratio: 40 / 58;
  padding-bottom: calc(18 / 980 * 100%);
  padding-right: calc(1 / 980 * 100%);
  font-size: min(1.95vw,26px);
}
.lifeinfo-map__plot__item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="30.356" viewBox="0 0 25 30.356"><path d="M12.5,0C5.596,0,0,5.597,0,12.5s9.825,17.856,12.5,17.856,12.5-10.954,12.5-17.856S19.404,0,12.5,0ZM12.5,22.303c-5.415,0-9.804-4.389-9.804-9.803S7.085,2.697,12.5,2.697s9.804,4.388,9.804,9.803-4.39,9.803-9.804,9.803Z"/></svg>') no-repeat top center/100% auto;*/
  background: url('data:image/svg+xml;utf8,<svg id="rayer" xmlns="http://www.w3.org/2000/svg" width="40" height="58" viewBox="0 0 40 58"><g id="pin"><path d="M20,57.158c-2.228-3.038-13.13-18.165-17.58-29.176-.813-1.683-1.366-3.445-1.657-5.265-.021-.112-.034-.204-.047-.295l-.029-.2c-.049-.37-.088-.755-.116-1.145-.007-.106-.022-.219-.037-.333-.016-.118-.034-.235-.034-.341,0-.05.017-.274.018-.337,0-.081-.018-.305-.018-.354C.5,9.119,9.248.5,20,.5s19.5,8.619,19.5,19.212c0,.049-.017.273-.018.337,0,.08.018.305.018.354,0,.105-.018.222-.033.339-.016.114-.03.229-.038.337-.028.387-.066.773-.117,1.157l-.03.196c-.012.088-.024.176-.042.268-.293,1.837-.847,3.598-1.646,5.251-4.461,11.039-15.366,26.168-17.594,29.207Z" style="fill:%23263f15;"/><path d="M20,1c10.477,0,19,8.394,19,18.712,0,.038-.004.074-.006.111-.005.072-.01.144-.012.254.001.072.006.144.012.215.003.037.006.074.006.112,0,.084-.016.178-.029.272-.017.125-.033.251-.04.364-.029.399-.066.769-.109,1.099-.012.074-.023.147-.033.22-.011.081-.022.161-.045.279-.283,1.773-.822,3.488-1.6,5.096l-.015.03-.013.031c-4.203,10.402-14.214,24.521-17.117,28.515-2.903-3.994-12.913-18.113-17.116-28.515l-.013-.031-.015-.03c-.778-1.608-1.316-3.322-1.606-5.129-.017-.087-.028-.17-.04-.252l-.027-.183c-.049-.362-.086-.73-.114-1.126-.008-.117-.024-.241-.041-.364-.013-.095-.029-.189-.029-.275,0-.038.004-.075.006-.112.005-.071.01-.143.012-.252-.001-.073-.006-.145-.012-.217-.003-.037-.006-.073-.006-.111C1,9.394,9.523,1,20,1M20,0C8.954,0,0,8.825,0,19.712c0,.117.016.229.018.346-.002.116-.018.229-.018.346,0,.218.057.479.073.708.028.4.067.796.12,1.19.027.166.043.323.076.494.303,1.896.876,3.699,1.687,5.374,5.026,12.437,18.044,29.831,18.044,29.831,0,0,13.019-17.394,18.044-29.831.811-1.675,1.384-3.477,1.687-5.374.033-.171.049-.328.077-.494.052-.394.091-.79.12-1.19.015-.23.072-.491.072-.708,0-.117-.016-.23-.018-.346.002-.117.018-.229.018-.346C40,8.825,31.046,0,20,0h0Z" style="fill:%23fff;"/></g></svg>') no-repeat top center/100% auto;
}
/*.lifeinfo-map__plot__item::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  background: var(--white);
}*/
.lifeinfo-map__plot__item.active {
  transform: scale(1.2);
  z-index: 2;
}


/* -------------- 商業施設 -------------- */
/* 1 MaxValu金楽寺店 */
.lifeinfo-tabpanel1 .lifeinfo-map__plot__item1 {
  margin-left: calc(424 / 980 * 100%);
  margin-top: calc(338 / 980 * 100%);
}
/* 2 パントリー JR尼崎駅店 */
.lifeinfo-tabpanel1 .lifeinfo-map__plot__item2 {
  margin-left: calc(686 / 980 * 100%);
  margin-top: calc(368 / 980 * 100%);
}
/* 3 あまがさきキューズモール */
.lifeinfo-tabpanel1 .lifeinfo-map__plot__item3 {
  margin-left: calc(629 / 980 * 100%);
  margin-top: calc(212 / 980 * 100%);
}
/* 4 エディオン JR尼崎駅店 */
.lifeinfo-tabpanel1 .lifeinfo-map__plot__item4 {
  margin-left: calc(732 / 980 * 100%);
  margin-top: calc(397 / 980 * 100%);
}
/* 5 シマコーポレーション 尼崎店 */
.lifeinfo-tabpanel1 .lifeinfo-map__plot__item5 {
  margin-left: calc(213 / 980 * 100%);
  margin-top: calc(698 / 980 * 100%);
}
/* 6 スギ薬局 尼崎西長洲店 */
.lifeinfo-tabpanel1 .lifeinfo-map__plot__item6 {
  margin-left: calc(525 / 980 * 100%);
  margin-top: calc(699 / 980 * 100%);
}
/* 7 ウエルシア尼崎潮江店 */
.lifeinfo-tabpanel1 .lifeinfo-map__plot__item7 {
  margin-left: calc(547 / 980 * 100%);
  margin-top: calc(72 / 980 * 100%);
}
/* 8 サンディ 尼崎長洲店 */
.lifeinfo-tabpanel1 .lifeinfo-map__plot__item8 {
  margin-left: calc(618 / 980 * 100%);
  margin-top: calc(689 / 980 * 100%);
}
/* 9 スーパーマーケットバロー 尼崎店 */
.lifeinfo-tabpanel1 .lifeinfo-map__plot__item9 {
  margin-left: calc(774 / 980 * 100%);
  margin-top: calc(163 / 980 * 100%);
}
/* 10 ドラッグストアコスモス 長洲本通店 */
.lifeinfo-tabpanel1 .lifeinfo-map__plot__item10 {
  margin-left: calc(714 / 980 * 100%);
  margin-top: calc(658 / 980 * 100%);
}
/* 11 サンディ 尼崎潮江店 */
.lifeinfo-tabpanel1 .lifeinfo-map__plot__item11 {
  margin-left: calc(749 / 980 * 100%);
  margin-top: calc(128 / 980 * 100%);
}



/* -------------- 公園 -------------- */
/* 1 潮江団地公園 */
.lifeinfo-tabpanel2 .lifeinfo-map__plot__item1 {
  margin-left: calc(190 / 980 * 100%);
  margin-top: calc(277 / 980 * 100%);
}
/* 2 長洲西通1丁目公園 */
.lifeinfo-tabpanel2 .lifeinfo-map__plot__item2 {
  margin-left: calc(491 / 980 * 100%);
  margin-top: calc(401 / 980 * 100%);
}
/* 3 尼崎市記念公園 */
.lifeinfo-tabpanel2 .lifeinfo-map__plot__item3 {
  margin-left: calc(143 / 980 * 100%);
  margin-top: calc(434 / 980 * 100%);
}
/* 4 潮江1丁目緑地 */
.lifeinfo-tabpanel2 .lifeinfo-map__plot__item4 {
  margin-left: calc(505 / 980 * 100%);
  margin-top: calc(252 / 980 * 100%);
}
/* 5 金楽寺1丁目広場 */
.lifeinfo-tabpanel2 .lifeinfo-map__plot__item5 {
  margin-left: calc(436 / 980 * 100%);
  margin-top: calc(493 / 980 * 100%);
}
/* 6 潮江５丁目公園 */
.lifeinfo-tabpanel2 .lifeinfo-map__plot__item6 {
  margin-left: calc(410 / 980 * 100%);
  margin-top: calc(231 / 980 * 100%);
}
/* 7 潮江緑遊公園 */
.lifeinfo-tabpanel2 .lifeinfo-map__plot__item7 {
  margin-left: calc(374 / 980 * 100%);
  margin-top: calc(156 / 980 * 100%);
}
/* 8 波洲通り公園 */
.lifeinfo-tabpanel2 .lifeinfo-map__plot__item8 {
  margin-left: calc(216 / 980 * 100%);
  margin-top: calc(657 / 980 * 100%);
}



/* -------------- 教育施設 -------------- */
/* 1 尼崎長洲保育園 */
.lifeinfo-tabpanel3 .lifeinfo-map__plot__item1 {
  margin-left: calc(408 / 980 * 100%);
  margin-top: calc(286 / 980 * 100%);
}
/* 2 YPC保育園JR尼崎駅前 */
.lifeinfo-tabpanel3 .lifeinfo-map__plot__item2 {
  margin-left: calc(487 / 980 * 100%);
  margin-top: calc(424 / 980 * 100%);
}
/* 3 ポポラー 兵庫ＪＲ尼崎駅前園 */
.lifeinfo-tabpanel3 .lifeinfo-map__plot__item3 {
  margin-left: calc(346 / 980 * 100%);
  margin-top: calc(184 / 980 * 100%);
}
/* 4 チャッピー保育園 */
.lifeinfo-tabpanel3 .lifeinfo-map__plot__item4 {
  margin-left: calc(468 / 980 * 100%);
  margin-top: calc(133 / 980 * 100%);
}
/* 5 梅花東幼稚園 */
.lifeinfo-tabpanel3 .lifeinfo-map__plot__item5 {
  margin-left: calc(621 / 980 * 100%);
  margin-top: calc(458 / 980 * 100%);
}
/* 6 尼崎長洲小規模園 */
.lifeinfo-tabpanel3 .lifeinfo-map__plot__item6 {
  margin-left: calc(547 / 980 * 100%);
  margin-top: calc(526 / 980 * 100%);
}
/* 7 尼崎市立金楽寺小学校 */
.lifeinfo-tabpanel3 .lifeinfo-map__plot__item7 {
  margin-left: calc(257 / 980 * 100%);
  margin-top: calc(606 / 980 * 100%);
}
/* 8 尼崎市立成良中学校 */
.lifeinfo-tabpanel3 .lifeinfo-map__plot__item8 {
  margin-left: calc(86 / 980 * 100%);
  margin-top: calc(887 / 980 * 100%);
}



/* -------------- 病院 -------------- */
/* 1 すずき歯科クリニック */
.lifeinfo-tabpanel4 .lifeinfo-map__plot__item1 {
  margin-left: calc(576 / 980 * 100%);
  margin-top: calc(385 / 980 * 100%);
}
/* 2 かいと整形外科リハビリクリニック */
.lifeinfo-tabpanel4 .lifeinfo-map__plot__item2 {
  margin-left: calc(559 / 980 * 100%);
  margin-top: calc(443 / 980 * 100%);
}
/* 3 かいべクリニック */
.lifeinfo-tabpanel4 .lifeinfo-map__plot__item3 {
  margin-left: calc(559 / 980 * 100%);
  margin-top: calc(447 / 980 * 100%);
}
/* 4 前谷耳鼻咽喉科 */
.lifeinfo-tabpanel4 .lifeinfo-map__plot__item4 {
  margin-left: calc(599 / 980 * 100%);
  margin-top: calc(431 / 980 * 100%);
}
/* 5 たにぐちクリニック */
.lifeinfo-tabpanel4 .lifeinfo-map__plot__item5 {
  margin-left: calc(564 / 980 * 100%);
  margin-top: calc(126 / 980 * 100%);
}
/* 6 アップル歯科尼崎駅前 */
.lifeinfo-tabpanel4 .lifeinfo-map__plot__item6 {
  margin-left: calc(639 / 980 * 100%);
  margin-top: calc(449 / 980 * 100%);
}
/* 7 尼崎N’s歯科口腔クリニック */
.lifeinfo-tabpanel4 .lifeinfo-map__plot__item7 {
  margin-left: calc(694 / 980 * 100%);
  margin-top: calc(455 / 980 * 100%);
}
/* 8 にしはまこどもクリニック */
.lifeinfo-tabpanel4 .lifeinfo-map__plot__item8 {
  margin-left: calc(649 / 980 * 100%);
  margin-top: calc(507 / 980 * 100%);
}
/* 9 上原クリニック */
.lifeinfo-tabpanel4 .lifeinfo-map__plot__item9 {
  margin-left: calc(643 / 980 * 100%);
  margin-top: calc(563 / 980 * 100%);
}
/* 10 まつうら整形外科 */
.lifeinfo-tabpanel4 .lifeinfo-map__plot__item10 {
  margin-left: calc(408 / 980 * 100%);
  margin-top: calc(118 / 980 * 100%);
}
/* 11 阪神医生協診療所 */
.lifeinfo-tabpanel4 .lifeinfo-map__plot__item11 {
  margin-left: calc(584 / 980 * 100%);
  margin-top: calc(674 / 980 * 100%);
}
/* 12 尼崎中央病院 */
.lifeinfo-tabpanel4 .lifeinfo-map__plot__item12 {
  margin-left: calc(819 / 980 * 100%);
  margin-top: calc(221 / 980 * 100%);
}
/* 13 尼崎総合医療センター */
/*.lifeinfo-tabpanel4 .lifeinfo-map__plot__item13 {
  margin-left: calc(0 / 980 * 100%);
  margin-top: calc(0 / 980 * 100%);
}*/




/* -------------- 銀行 -------------- */
/* 1 大阪シティ信用金庫尼崎支店 */
.lifeinfo-tabpanel5 .lifeinfo-map__plot__item1 {
  margin-left: calc(462 / 980 * 100%);
  margin-top: calc(369 / 980 * 100%);
}
/* 2 商工組合中央金庫 尼崎支店 */
.lifeinfo-tabpanel5 .lifeinfo-map__plot__item2 {
  margin-left: calc(572 / 980 * 100%);
  margin-top: calc(308 / 980 * 100%);
}
/* 3 徳島大正銀行 尼崎支店 */
.lifeinfo-tabpanel5 .lifeinfo-map__plot__item3 {
  margin-left: calc(591 / 980 * 100%);
  margin-top: calc(308 / 980 * 100%);
}
/* 4 三井住友銀行 あまがさきキューズモール店 */
.lifeinfo-tabpanel5 .lifeinfo-map__plot__item4 {
  margin-left: calc(630 / 980 * 100%);
  margin-top: calc(204 / 980 * 100%);
}
/* 5 尼崎長洲本通郵便局 */
.lifeinfo-tabpanel5 .lifeinfo-map__plot__item5 {
  margin-left: calc(645 / 980 * 100%);
  margin-top: calc(523 / 980 * 100%);
}
/* 6 尼崎信用金庫 潮江支店 */
.lifeinfo-tabpanel5 .lifeinfo-map__plot__item6 {
  margin-left: calc(750 / 980 * 100%);
  margin-top: calc(126 / 980 * 100%);
}
/* 7 りそな銀行 尼崎北支店 */
.lifeinfo-tabpanel5 .lifeinfo-map__plot__item7 {
  margin-left: calc(869 / 980 * 100%);
  margin-top: calc(181 / 980 * 100%);
}
/* 8 京都銀行 尼崎北支店 */
.lifeinfo-tabpanel5 .lifeinfo-map__plot__item8 {
  margin-left: calc(900 / 980 * 100%);
  margin-top: calc(126 / 980 * 100%);
}





.lifeinfo-info {
  position: absolute !important;
  top: 0;
  right: 0;
  width: calc(250 / 1300 * 100%);
  height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  --scrollbar-color-track: transparent;
  --scrollbar-color-thumb: #d4d9d0;
}
.lifeinfo-info__list {
  width: 100%;
  padding-block: 0 1.9rem;
  margin-inline: auto;
}
.lifeinfo-info__list__item {
  position: relative;
  font-size: 1.6rem;
  line-height: 1.71428571;
  cursor: pointer;
  padding-left: 3.5rem;
  transition: color .4s linear;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}
.lifeinfo-info__list__item + .lifeinfo-info__list__item {
  border-top: solid 1px #7d8c72;
}
.lifeinfo-info__list__item__num {
  position: absolute;
  left: 0;
  top: 1.7rem;
  width: 2.4rem;
  height: 3.5rem;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--white);
  border-radius: 0;
  padding-bottom: .65em;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('data:image/svg+xml;utf8,<svg id="_rayer" xmlns="http://www.w3.org/2000/svg" width="24.449" height="35.97" viewBox="0 0 24.449 35.97"><g id="conts"><path d="M24.332,13.831c.032-.244.056-.49.074-.738.009-.143.044-.304.044-.44,0-.072-.01-.143-.011-.214.001-.072.011-.142.011-.214C24.449,5.473,18.976,0,12.224,0S0,5.473,0,12.225c0,.072.01.142.011.214-.001.072-.011.142-.011.214,0,.135.035.297.044.44.017.248.041.494.074.738.016.103.026.2.047.306.185,1.176.536,2.294,1.031,3.332,3.072,7.713,11.029,18.5,11.029,18.5,0,0,7.957-10.787,11.029-18.5.495-1.039.846-2.156,1.031-3.332.02-.106.03-.203.047-.306Z" style="fill:%23263f15;"/></g></svg>') no-repeat center top/100% 100%;
}
.lifeinfo-info__list__item__name {
  width: 100%;
  letter-spacing: .01em;
  font-size: 1.6rem;
  line-height: 1.35;
}
.lifeinfo-info__list__item__min {
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: 0;
  margin-top: .2em;
}
@media (any-hover: hover){
  .lifeinfo-tab {
    transition: background-color .3s linear;
  }
  .lifeinfo-tab:hover {
    background-color: #263f15;
  }
}
@supports (scrollbar-width: auto) {
  .lifeinfo-info {
    scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
  }
}
@media screen and (max-width: 1000px){
  .lifeinfo-tablist {
    padding-inline: 0;
    gap: 1.0rem;
  }
  .lifeinfo-tabpanel__contents {
    width: 100%;
  }
  .lifeinfo-map {
    width: calc(880 / 1300 * 100%);
  }
  .lifeinfo-info {
    width: calc(350 / 1300 * 100%);
  }
}
@media screen and (max-width: 768px){
  .l-lifeinfo {
    padding-block: 7.0rem 8.0rem;
  }
  .lifeinfo-ttl {
    font-size: 2.6rem;
    margin-bottom: 4.5rem;
  }
  .lifeinfo-inner {
    width: 100%;
  }
  .lifeinfo-tablist {
    padding-inline: calc(10 / 380 * 100%);
    margin-inline: auto;
    margin-bottom: 0;
    gap: .2rem;
    flex-wrap: wrap;
  }
  .lifeinfo-tab {
    width: calc((100% - 1.0rem) / 5);
    height: 5.0rem;
    font-size: 1.3rem;
    line-height: 1.25;
    border-radius: .5rem .5rem 0 0;
  }
  .lifeinfo-map {
    width: 100%;
  }
  /*.lifeinfo-map__plot__item {
    font-size: 0.9rem;
    width: calc(35 / 980 * 100%);
    translate: -16% -30%;
  }*/
  .lifeinfo-info {
    position: relative !important;
    width: 100%;
    max-height: 22.0rem;
  }
  .lifeinfo-info__list {
    width: calc(320 / 380 * 100%);
    padding-block: 0 2.5rem;
  }
  .lifeinfo-info__list__item {
    font-size: 1.2rem;
    padding-left: 3.0rem;
    padding-top: 1.2rem;
    margin-top: 1.2rem;
  }
  .lifeinfo-info__list__item__num {
    top: 1.4rem;
    width: 2.0rem;
    height: 3.0rem;
    font-size: 1.2rem;
  }
  .lifeinfo-info__list__item__name {
    font-size: 1.3rem;
  }
  .lifeinfo-info__list__item__min {
    font-size: 1.1rem;
  }

}