@charset "utf-8";
/* CSS Document */

/* cta_style  ------------------------------------------------------------------------------------------------------------------------*/
/* キラリと光らせる1 */
.cta_style1{
	display:block;
	position:relative;
	overflow:hidden;
	/*border-radius: 15px;*/ /*ボタン角が丸い場合コメント解除*/
}
.cta_style1::before {
	content:"";
	height:100%;
	width:30px;
	position:absolute;
	top:-180px;
	left:0;
	background-color: #fff;
	opacity:0;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	animation: cta_style1 2s ease-in-out infinite;
	-webkit-animation: cta_style1 2s ease-in-out infinite;
	pointer-events: none
}
@keyframes cta_style1 {
	0% {-webkit-transform: scale(0) rotate(45deg); opacity: 0;}
	80% {-webkit-transform: scale(0) rotate(45deg); opacity: 0.5;}
	81% {-webkit-transform: scale(4) rotate(45deg); opacity: 1;}
	100% {-webkit-transform: scale(50) rotate(45deg); opacity: 0;}
}

/* キラリと光らせる2 */
.cta_style2 {
	display:block;
	position:relative;
    overflow: hidden;
	/*border-radius: 15px;*/ /*ボタン角が丸い場合コメント解除*/
}
.cta_style2::before {
    display: block;
    position: absolute;
    left: -30%;
    top: -40%;
    content: "";
    width: 80px;
    height: 250px;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 100%);
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,.9)),color-stop(100%,rgba(255,255,255,0)));
    animation: cta_style2 2.5s infinite linear;
    -webkit-animation: cta_style2 2.5s infinite linear;
	pointer-events: none
}
@keyframes cta_style2 {
    0% {left: -30%;}
    20% {left: 120%;}
    100% {left: 120%;}
}

/* キラリと光らせる3 */
.cta_style3 {
    position: relative;
    display:block;
    overflow: hidden;
	/*border-radius: 15px;*/ /*ボタン角が丸い場合コメント解除*/
}
.cta_style3:before {
    content: "";
    width: 200%;
    height: 200%;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,1) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 55%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,1) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 55%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );
    position: absolute;
    top: -50%;
    left: -50%;
	 animation: cta_style3 1.5s infinite linear;
    -webkit-animation: cta_style3 2.5s infinite linear;
	pointer-events: none
}
@keyframes cta_style3 {
  from, 0% { -webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);transform: translate3d( -100%, 0, 0) rotate(45deg);opacity: 0;}
  20% {-webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);transform: translate3d( -100%, 0, 0) rotate(45deg);opacity: 1;}
  70% {-webkit-transform: translate3d( 100%, 0, 0) rotate(45deg);transform: translate3d( 100%, 0, 0) rotate(45deg);opacity: 1;}
  80% {-webkit-transform: translate3d( 100%, 0, 0) rotate(45deg);transform: translate3d( 100%, 0, 0) rotate(45deg);opacity: 0;}
  to, 100% {-webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);transform: translate3d( -100%, 0, 0) rotate(45deg);opacity: 0;}
}

/* 横に揺れる */
.cta_style4{
  display:block;
  animation: cta_style4 2s infinite;
}
@keyframes cta_style4 {
    0% {transform: translate(2px, 0px);}
    5% {transform: translate(-2px, 0px);}
    10% {transform: translate(2px, 0px);}
    15% {transform: translate(-2px, 0px);}
    20% {transform: translate(2px, 0px);}
    25% {transform: translate(-2px, 0px);}
    30% {transform: translate(0px, 0px);}
}

/* 上下に振動する */
.cta_style5{
  display:block;
	animation: cta_style5 2s infinite;
}
@keyframes cta_style5{
	0% {transform: translate(0px, 2px);}
	5% {transform: translate(0px, -2px);}
	10% {transform: translate(0px, 2px);}
	15% {transform: translate(0px, -2px);}
	20% {transform: translate(0px, 2px);}
	25% {transform: translate(0px, -2px);}
	30% {transform: translate(0px, 0px);}
}

/* ぽよよんと跳ねる */
.cta_style6{
  display:block;
  animation: cta_style6 2.5s infinite;
  opacity: 1;
}
@keyframes cta_style6 {
  0%, 40% {transform: skew(0deg, 0deg);}
  5% {transform: skew(5deg, 5deg);}
  10% {transform: skew(-4deg, -4deg);}
  15% {transform: skew(3deg, 3deg);}
  20% {transform: skew(-2deg, -2deg);}
  25% {transform: skew(1deg, 1deg);}
  30% {transform: skew(-0.6deg, -0.6deg);}
  35% { transform: skew(0.3deg, 0.3deg);}
}
 
/* どきどき収縮 */
.cta_style7{
  display:block;
  animation: cta_style7 2s ease-out infinite;
  opacity: 1;
}
@keyframes cta_style7 {
  0%, 40%, 60%, 80% {transform: scale(1.0);}
  50%, 70% {transform: scale(0.95);}
}

/* 拡大縮小 */
.cta_style8{
  display:block;
  -webkit-animation: cta_style8 2.0s infinite ease-in-out;
  animation: cta_style8 2.0s infinite ease-in-out;
}
@keyframes cta_style8 {
	0%, 100% {transform: scale(0.9);}
	50% {transform: scale(1.0);}
}

/* ぷにぷに */
.cta_style9 {
  display:block;
	animation: cta_style9 0.8s infinite;
}
@keyframes cta_style9 {
	0% {transform: scale(1, 1);}
	50% {transform: scale(0.98, 1.15)}
}

/* もちもち */
.cta_style10 {
  display:block;
  animation: cta_style10 3s infinite;
}
@keyframes cta_style10 {
    0% {transform: scale(1, 0.8);}
    20% {transform: scale(0.8, 1.1);}
    95% {transform: scale(1, 1);}
    100% {transform: scale(1, 0.8);}
}


/* マーカー */
.marker01 {
    background: linear-gradient(transparent 50%, rgba(255, 215, 0,0.5) 50%); /* 黄色 */
    display: inline;
}

.marker02 {
    background: linear-gradient(transparent 50%, rgba(255, 0, 255,0.5) 50%); /* ピンク */
    display: inline;
}

.marker03 {
    background: linear-gradient(transparent 50%, rgba(0, 255, 255,0.5) 50%); /* 空色 */
    display: inline;
}

.marker04 {
    background: linear-gradient(transparent 50%, rgba(0, 0, 255,0.5) 50%); /* 青色 */
    display: inline;
}

	.TypeA1{
	    background: linear-gradient(rgba(171, 107, 191, 0.1), rgba(171, 107, 191, 0.9), rgba(171, 107, 191, 0.1));
	    height:100px;width:100%;display: flex; justify-content: center; align-items: center;font-size:40px;}
	.TypeA2{
	    background: linear-gradient(rgba(171, 107, 191, 0.1), rgba(171, 107, 191, 0.9), rgba(171, 107, 191, 0.1));
	    height:100px;width:100%;display: flex; justify-content: center; align-items: center;font-size:40px;}
	.TypeA3{
	    background: linear-gradient(rgba(185, 89, 159, 0.1), rgba(185, 89, 159, 0.9), rgba(185, 89, 159, 0.1));
	    height:100px;width:100%;display: flex; justify-content: center; align-items: center;font-size:40px;}
	.TypeA4{
	    background: linear-gradient(rgba(199, 72, 128, 0.1), rgba(199, 72, 128, 0.9), rgba(199, 72, 128, 0.1));
	    height:100px;width:100%;display: flex; justify-content: center; align-items: center;font-size:40px;}
	.TypeA5{
	    background: linear-gradient(rgba(213, 54, 96, 0.1), rgba(213, 54, 96, 0.9), rgba(213, 54, 96, 0.1));
	    height:100px;width:100%;display: flex; justify-content: center; align-items: center;font-size:40px;}
	.TypeA6{
        background: linear-gradient(rgba(227, 36, 64, 0.1), rgba(227, 36, 64, 0.9), rgba(227, 36, 64, 0.1));
	    height:100px;width:100%;display: flex; justify-content: center; align-items: center;font-size:40px;}
    .TypeA7{
        background: linear-gradient(rgba(241, 15, 32, 0.1), rgba(241, 15, 32, 0.9), rgba(241, 15, 32, 0.1));
        height:100px;width:100%;display: flex; justify-content: center; align-items: center;font-size:40px;}

   .AttentionText {
        padding: 5px 20px 0px 20px!important;
        border-radius: 20px!important;
        font-size: 24px!important;
        background-color:white;
       }

    /* Scroll用 */
  	.TypeS00{
          background-color: rgba(92, 124, 227, 0.6);height:50px;width:100%;display: flex; justify-content: center; align-items: center;font-size:24px;}


    /* Scroll・Attention用 */
  	.TypeSA0{background-color: rgba(0, 100, 255, 0.6);height:10px;width:100%;display: flex; justify-content: right; align-items:flex-end;font-size:40px;}

       #MapArea {
            position:absolute;
            top:0px;
            left:0px;
            height:300px; /* プログラムで全体に広げている */
            width:100%;
            background:rgba(255,255,255,.08);
            z-index: 9999
       }
        #MapArea > span {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 50px 0 0 50px;
            background-color: rgb(0 0 0 / 0.3);
            color: #fff;
            line-height: 1;
        }
.popup-bg-cover{
	position: fixed; /* ブラウザの定位置に固定 */
	background: rgba(255, 255, 255, .5); /* 背景色を半透明の黒色に */
	width: 100%; /* 要素の横幅を画面全体に */
	height: 100%; /* 要素の高さを画面全体に */
	top: 0; /* 要素の固定位置をブラウザ最上部に合わせる */
	left: 0; /* 要素の固定位置をブラウザ左側に合わせる */
}
.heatmap {
    width:100%;
    height:100%;
}