.container{width: 100%; height: 73vh; height: 73dvh; position: relative; margin-top: -9vh;}
.slider{width: 100%; height: 60vh; height: 60dvh; position: relative; background-image: url("../images/top/parkmap.webp"); background-size: auto 100%; background-repeat: no-repeat; background-position: right 1em top; z-index: 1;}
.slick-img{width: 100%; height: 60vh; height: 60dvh; position: relative; background-size: auto 100%; background-repeat: no-repeat; background-position: right 1em top; }
.slick-img article{ border: #cccccc solid 2px; border-radius: 10px; width:calc(100% - 85vh); display: inline-block; margin: 0 0 0 1em; padding: 10px; position: absolute; bottom: 7vh; background-color: #fff; z-index: 3; max-width: 460px; text-align: center; }
.slick-img article::before{content: ""; margin: 0; position: absolute; left: 6.4vw; bottom: -2vh; width:4vh; height:4vh; border-right: 2px solid #cccccc; border-bottom: 2px solid #cccccc; background-color:#ffffff; transform: rotate(45deg);}
.slick-img article hgroup{background-color: var(--lightyellow); border-radius: 5px; color: var(--orange); padding: 0.3em 0 0.3em 60px; border: 2px solid var(--orange); font-weight: bold;}
.slick-img article hgroup h2{font-size: 18px; display: block;}
.slick-img article hgroup p{font-size: 16px; margin: 0 0.5em; padding: 0; display: block;}
.contenttext{outline:solid red 1px; display:flex; justify-content:flex-start; align-items:stretch;}
.slick-img article img{width: auto; height: 120px; display: block; margin: 10px auto;}
.slick-img article p{padding: 0; font-size: 16px; line-height: 1.4em;}
.slick-img article a{display: inline-block; font-weight: bold; color: #ffffff; border: 2px solid #ffffff; background-color: var(--orange); border-radius: 1.5em; font-size: 16px; padding: 0.2em 1em 0.2em 2em; text-decoration: none; filter: drop-shadow(2px 2px 3px #777); margin: 0.5em auto; position: relative;}
.slick-img article a span{position: relative; display: block; margin: 0;}
.slick-img article a span::before{content: ""; margin: 0; position: absolute; left: -1em; top: 0.25em; bottom: 0; width:0.5em; height:0.9em; clip-path: polygon(0 0, 0 100%, 100% 50%); background-color: var(--lightyellow); }
.thumbnail{position: relative; margin: -4vh 3vw 0 3vw; z-index: 3; left: 0; top:0;}

.thumbnail .thumbnail-img.slick-current{transform: scale(0.8); animation: 0.4s thumbscale ease-in-out forwards;}
.thumbnail .slick-current img {border: 4px solid var(--orange); }
.thumbnail .slick-current span{background-color: var(--orange); display: none; }
@keyframes thumbscale{
	0%{transform: scale(0.8);}
	100%{transform: scale(1);}
}

.thumbnail-img{position: relative; transform: scale(.80); transition: transform .5s; }
.thumbnail-img span{position: absolute; right: 7%; bottom:2px; display: block; width:86%; text-align: center; font-weight: bold; color: #ffffff; background-color: var(--green); border-radius: 5px; font-size: 18px; box-sizing: border-box; cursor: pointer; }
.thumbnail-img img{border: 3px solid #c3d94e; border-radius: 50%; filter: drop-shadow(2px 2px 3px #777); margin-bottom: 8px; height: auto; width: 100%; cursor: pointer; }
.thumbnail-img span.button{display:none; position: absolute; top: 0; left:0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.00)}
.thumbnail .thumbnail-img button{position: absolute; right: 7%; bottom:6px; width:86%; text-align: center; font-weight: bold; background-color: var(--lightyellow); border-radius: 1em; font-size: 18px; box-sizing: border-box; border: 2px solid var(--green); color: var(--green); padding-left:20px; cursor: pointer; filter: drop-shadow(2px 2px 3px #777);}
.thumbnail .thumbnail-img button::before{content: ""; margin: 0; position: absolute; left: 10px; top: 0.5em; width:8px; height:10px; clip-path: polygon(0 0, 0 100%, 100% 50%); background-color: var(--green); }

.thumbnail-img.slick-current span.button{display: block; opacity: 0; animation: 0.4s thumbbtn ease-in-out forwards; }
@keyframes thumbbtn{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

.slick-img.knowledge{ background-image: url("../images/top/map_knowledge.webp");}
.slick-img.health{ background-image: url("../images/top/map_health.webp");}
.slick-img.checkups{ background-image: url("../images/top/map_checkup.webp");}
.slick-img.food{ background-image: url("../images/top/map_food.webp");}
.slick-img.physical{ background-image: url("../images/top/map_physical.webp");}
.slick-img.cigarette{ background-image: url("../images/top/map_cigarette.webp");}
.slick-img.alcohol{ background-image: url("../images/top/map_alcohol.webp");}
.slick-img.mental{ background-image: url("../images/top/map_mental.webp");}
.slick-img.sleep{ background-image: url("../images/top/map_sleep.webp");}
.slick-img.medical{ background-image: url("../images/top/map_medical.webp");}

.slick-img hgroup::before{ content: ''; width: 90px; height: 90px; display: inline-block; margin: 0; position: absolute; top:10px; left: 10px; background-position: center; background-size: contain; background-repeat: no-repeat;}
.slick-img.knowledge hgroup::before{ background-image: url("../images/mamoru_knowledge.webp");}
.slick-img.health hgroup::before{ background-image: url("../images/mamoru_health.webp"); left: 20px; width: 80px; height: 80px}
.slick-img.checkups hgroup::before{ background-image: url("../images/mamoru_checkup.webp"); top:20px;}
.slick-img.food hgroup::before{ background-image: url("../images/mamoru_food.webp");}
.slick-img.physical hgroup::before{ background-image: url("../images/mamoru_physical.webp");}
.slick-img.cigarette hgroup::before{ background-image: url("../images/mamoru_cigarette.webp");}
.slick-img.alcohol hgroup::before{ background-image: url("../images/mamoru_alcohol.webp");}
.slick-img.mental hgroup::before{ background-image: url("../images/mamoru_mental.webp");}
.slick-img.sleep hgroup::before{ background-image: url("../images/mamoru_sleep.webp"); left: 20px;}
.slick-img.medical hgroup::before{ background-image: url("../images/mamoru_medical.webp");}

.mappoint{width:80vh ; height: 60vh; height: 60dvh; position: absolute; right: 0; top:0; background-image: url("../images/top/point.svg"); background-size: auto 100%; background-repeat: no-repeat; background-position: right 1em top; animation:2s ease-in 1.2s infinite alternate backwards running point; z-index: 2;}
@keyframes point{/*ポイントが上下に動く */
	0%{background-position: right 1em top;}
	50%{background-position: right 1em top -14px;}
	100%{background-position: right 1em top;}
}

#parkmap{width:auto; height: 60vh; height: 60dvh; position: absolute; right: 1em; top:0; z-index: 4; opacity:0;}
#m01,#m02,#m03,#m04,#m05,#m06,#m07,#m08,#m09,#m10{cursor: pointer;}

.mappoint02{width: auto; height: auto; display: inline-block; position: absolute; left: 3vw; top:5vh; z-index: 2; box-sizing: border-box; margin:0 auto auto 0;}
.mappoint02 p{font-size: 2.2vh; display: block; font-weight: bold; color: var(--green); text-align: center; transform: rotate(-8deg);} 
.mappoint02 p span{display: block; padding: -1em 1em 0em 1em; position: relative;}
.mappoint02 p span::before{content: ""; margin: 0; position: absolute; left: -1em; top:2em; width:0.3em; height:70%; background-color:var(--green); transform: rotate(-40deg); border-radius: 5px;}
.mappoint02 p span::after{content: ""; margin: 0; position: absolute; right: -1em; top:1em; width:0.3em; height:70%; background-color:var(--green); transform: rotate(30deg); border-radius: 5px;}
.mappoint02 p::before{content: ""; margin: 0; position: absolute; right: -1.5em; bottom:0; width:0.3em; height:50px; background-color:var(--green); transform: rotate(42deg); border-radius: 5px;}
.mappoint02 img{display: inline-block; width: 1.6em; height: auto; margin: 0 0.2em -0.4em 0;}

.slick_pause{position: relative; left: calc(50% - 8.6em); top: -3.5em; width: 2em; height: 2em; background-image: url("../images/top/pause.svg"); background-size: contain; background-repeat: no-repeat; background-position: left top; background-color: rgba(0,0,0,0.00); border: none; cursor: pointer; z-index: 3;}
.slick_pause.paused{background-image: url("../images/top/play.svg"); }

.sliderbg{position: absolute; background-color: var(--midgreen); bottom: 0; width: 100%; height: 7vw; border-radius: 10px 10px 0 0;}

/***********************************/
/* PC・タブレット横　
************************************/
@media screen and (max-width:1280px) and (orientation: landscape) {
section.main{max-width: 100vw;}
.slick-img article img{height: auto; max-width:96%; width: 100px; }
.slick-img hgroup::before{ width: 70px; height: 70px;}
.slick-img.health hgroup::before,.slick-img.sleep hgroup::before{left: 5px; width:60px; height: 60px; top:10px;}
.slick-img.health hgroup{padding-left: 60px;}
.mappoint02{ margin:1em auto auto 3em;}
.mappoint02 p{font-size: 2vmin;}
.thumbnail-img span{font-size: 1.4vw;}
.thumbnail .thumbnail-img button{font-size: 1.4vw; padding-left: 1em;}
.thumbnail .thumbnail-img button::before{left: 0.3em; top: 0.4em; width:0.6em; height:0.8em; }
.sliderbg{height: 9vw; }
}

/* 横レイアウト　縦と横の長さが近しい場合 ******/
@media screen and (min-height:88vw) and (orientation: landscape) {
.container{width: 100%; height: 66vh; height: 66dvh; margin-top: -5vh;}
.slider{width: 100%; height: 50vh; height: 50dvh;}
.slick-img{width: 100%; height: 50vh; height: 50dvh; }	
.mappoint{width:68vh ; height: 50vh; height: 50dvh;}
#parkmap{width:auto; height: 50vh; height:50dvh;}
.slick-img article{ width:calc(100% - 70vh);}
.slick-img article hgroup h2{font-size: 1.8vw;}
.slick-img article hgroup p{font-size: 1.6vw;} 
.slick-img article p{font-size: 1.6vw;}
.slick-img article a{font-size: 1.6vw; }	
.slick-img.health hgroup::before,.slick-img.sleep hgroup::before{left: 5px; width: 10vh; height: 10vh; top:5px;}
.slick-img.checkups hgroup::before{top:10px;}
.mappoint02{margin:-1em auto auto 4em;}
}

/* 横レイアウト　縦が短い場合 ******/
@media screen and (max-height:800px) and (orientation: landscape) {.mappoint02{left: 0; top:0vh;}}
@media screen and (max-height:740px) and (orientation: landscape) {
.slick-img article hgroup p{text-align: center; font-size: 15px} 
.slick-img article img{width: 70px; height: auto; margin:1em 0.5em; float: left;}
.slick-img article p{font-size: 15px; margin-top: 2em; margin-left: -2em; text-align: left; display: block;}
.slick-img article a{font-size: 15px; clear: both;}
.slick-img.checkups hgroup::before{top:10px;}
.slick-img.health hgroup::before,.slick-img.sleep hgroup::before{left: 15px; width: 10vh; height: 10vh; top:5px;}
.thumbnail-img span{font-size: 1.8vh;}
.thumbnail .thumbnail-img button{font-size: 1.8vh; padding-left: 1em;}
.thumbnail .thumbnail-img button::before{left: 0.3em; top: 0.4em; width:0.6em; height:0.8em; }
.sliderbg{height: 5vw; }
}

/* 縦レイアウト　タブレット******/
@media screen and (orientation: portrait) {
.container{height: auto; margin-top: -3vw;}
.slider{width: 100%; height: auto; background-size: 80% auto; background-position: center top; margin: 0;}
.slick-img{width: 100%; height: auto; background-size: 80% auto; background-position: center top; padding-top: 60vw;}
.slick-img article{width: 90%; display:flex; justify-content:center; align-items:center; flex-wrap: wrap; margin: 0px auto 14px auto; bottom: auto; top: 0; max-width: 90%; position: relative; }
.slick-img article::before{left: 6.5vw; bottom: -12px; width:20px; height:20px; }
.slick-img article hgroup{text-align: left; padding: 0.3em 0 0.3em 150px; display:flex; justify-content:flex-start; align-items:baseline; flex-wrap: wrap; width: 100%;}
.slick-img article hgroup h2{font-size: 22px}
.slick-img article hgroup p{font-size: 17px; height: auto;} 
.slick-img article img{display: none;}
.slick-img article p{display: block; font-size: 17px; margin:1em; text-align: left;}
.slick-img article a{display: inline-block; font-size: 17px; margin: 0;}
.slick-img hgroup::before{width: 110px; height: 110px; top:-50px; left: 30px; }
.slick-img.health hgroup::before,.slick-img.sleep hgroup::before{top:-10px;}
.slick-img.checkups hgroup::before{top:-30px;}
.mappoint{width:100%; height: 60.56vw; right: 0; background-position: center top; background-size: 80% auto;}
@keyframes point{/*ポイントが上下に動く */
	0%{background-position: center top}
	50%{background-position: center top -10px}
	100%{background-position: center top}
}	
	
#parkmap{width:80%; height: 60.56vw; right: 10%;}
.mappoint02{left: 3em; top:-2em;}
.mappoint02 p{font-size: 17px;}
.mappoint02 p::before{display: none;}
.thumbnail{margin: 0 30px; width: auto; box-sizing: border-box; }
.thumbnail-img span{ font-size: 1.7vw; }
.thumbnail .thumbnail-img button{font-size:1.7vw; padding-left: 1em;}
.thumbnail .thumbnail-img button::before{left: 0.3em; top: 0.4em; width:0.6em; height:0.8em; }

.sliderbg{height:24vw; }
}

@media screen and (max-width:949px) and (orientation: portrait) {/* slickのブレイクポイントslidesToShow:5,*/
.thumbnail-img span{ font-size: 2.3vw; }
.thumbnail .thumbnail-img button{font-size:2.3vw;}
}

@media screen and (max-width:719px) and (orientation: portrait) {/*横幅が小さめのタブレット*//* slickのブレイクポイントslidesToShow:4,*/
.container{height: auto; margin-top:1em;}
.mappoint02{left: 4em; top:-2em;}
.mappoint02 p{font-size: 2.6vw;}
.thumbnail-img span{ font-size: 2.7vw;}
.thumbnail .thumbnail-img button{font-size: 2.7vw;}
.slick-img article{display: block;}
.slick-img article::before{left: 9vw;}
.slick-img article hgroup{padding-left: 16vw; justify-content:center; align-items:center; min-height: 60px;}
.slick-img article hgroup h2{font-size: 17px;}
.slick-img article hgroup p{font-size: 15px;}
.slick-img article p{font-size: 16px; text-align: center; margin: 0.7em 0; }.slick-img article p span{display: block;}
.slick-img article a{font-size: 16px; margin-left: 0; display: inline-block;}
.sliderbg{height:32vw; }
	
.slick-img hgroup::before{width: 16vw; height: 16vw; position: absolute; top:14px; left: 4vw;}
.slick-img.health hgroup::before,.slick-img.sleep hgroup::before{width: 15vw; height: 15vw; top:14px; left: 5vw; }
.slick-img.checkups hgroup::before{top:18px;}
}
/* 縦レイアウト　スマホ******/
@media screen and (max-width:439px) and (orientation: portrait) {
.container{ margin-top:2em;}
.slick-img article::before{left: 12vw;}
.slider{background-size: 101% auto; }
.slick-img{ background-size: 101% auto; padding-top: 75vw;}

.thumbnail-img span{ font-size: 3.2vw; }
.thumbnail .thumbnail-img button{font-size:3.2vw;}	
	
.mappoint{width:100%; height: 75.7vw;  right: 0; top:0; background-size: 101% auto; }
#parkmap{width:100%; height: 76.47vw; right: 0; background-size: 101% auto; }
.mappoint02{left: 2em; top:-2.5em;}
.mappoint02 p{font-size: 3.6vw;}		
.mappoint02 p::before{ right: -0.8em; height:3.5em;}
.sliderbg{height:46vw; }

}