@charset "utf-8";
/* ------ Settings ------ */
:root {
--base-color: 348 100% 38%; /* 深緋 */
--base-pale-color: 348 100% 43%;
--base-light-color: 348 100% 33%;
--base-dark-color: 348 100% 23%;
--seigaiha: url(/img/seigaiha-furusato-nozei.webp); /* furusato-nozei */
}
strong{
color: #cdae42; /* 金色 */
}
em{
color: #c20024; /* 深緋 */
}
/* -------------------- ★ Main ★ -------------------- */
/* ----- タブ切替 ----- */
.tabs{
display:flex;
width:100%;
}
.tab-panels .panel{
display:none;
}
.tab-panels .panel.active{
display:block;
}
.tab-btn{
flex:1;
min-width:0;
margin: 0 1px;
padding: 15px 3px;
cursor:pointer;
font-size: clamp(14px, calc(14px + 3 * ((100vw - 375px) / 825)), 17px);
padding: 15px 1px;
text-align:center;
background:#f3f3f3; /* グレー */
border:0;
box-shadow: 0 0 5px 0px rgba(0,0,0,0.6); /* 黒 */
border-radius: 8px 8px 0 0;
}
.tab-btn.active{
background-color: hsl(var(--base-color)); /* ベースカラー */
background: linear-gradient(to bottom,  hsl(var(--base-pale-color)), hsl(var(--base-light-color)));
color: #fff; /* 白 */
}
/* ----- 地図検索 ----- */
.imagemap{
width: 100%;
margin-top: 3px;
box-shadow: 0 0 5px 0px rgba(0,0,0,0.6); /* 黒 */
}
.imagemap-grid{
position: relative;
width: 100%;
height: auto;
}
.imagemap-grid img{
width: 100%;
height: auto;
}
.imagemap-grid a:hover{
background-color: rgba(255,255,255,0.3); /* 白 */
}
.area-link {
position: absolute;
display: block;
text-indent: -9999px; /* テキストを隠す */
}
.area-link:active {
background-color: rgba(255,255,255,0.3); /* 白 */
}
/* ----- 市町 ----- */
.shizuoka{
inset: 0;
pointer-events: auto;
clip-path: polygon(13.5833% 0.9091%,21.7500% 1.0000%,21.9167% 9.4545%,34.7500% 9.3636%,34.8333% 26.5455%,44.8333% 26.5455%,44.8333% 35.0000%,55.7500% 35.0000%,55.7500% 42.8182%,44.9167% 42.8182%,44.8333% 47.1818%,41.6667% 47.0909%,41.6667% 50.5%,44.9167% 50.5%,44.8333% 60.3636%,34.7500% 59.8182%,34.7500% 64.2727%,22.6667% 64.8182%,22.5833% 47.7273%,13.6667% 47.3636%,13.6667% 1.1818%,13.7500% 1.1818%,13.7500% 1.1818%,13.7500% 1.1818%,13.7500% 1.0000%,13.6667% 0.8182%,30.2500% 41.0000%);
}
.yaizu{left: 22.6667%;top: 65.0909%;width: 6.1667%;height: 13.6364%;}
.fujieda{left: 13.6667%;top: 47.95%;width: 8.35%;height: 25.7%;}
.shimada{left: 0.6%;top: 47.95%;width: 12.55%;height: 25.7%;}
.yoshida{left: 15.8%;top: 74.4545%;width: 6.0833%;height: 8.8182%;}
.makinohara{left: 6.8333%;top: 74.4%;width: 8.5%;height: 16.6364%;}
.omaezaki{
inset: 0;
pointer-events: auto;
clip-path: polygon(0.5833% 92.0000%,0.5833% 99.1818%,18.5000% 99.2727%,18.3333% 96.6364%,15.0833% 96.6364%,15.1667% 92.0000%,0.6667% 92.0000%,0.6667% 91.7273%);
}
.kawane{left: 0.6%;top: 0.75%;width: 12.55%;height: 46.2727%;}
.fuji{left: 45.6%;top: 17.8%;width: 21.2%;height: 16.5%;}
.fujinomiya{left: 45.6%;top: 0.78%;width: 21.2%;height: 16.5%;}
.numazu{
inset: 0;
pointer-events: auto;
clip-path: polygon(67.4167% 26.6364%,67.5000% 34.2727%,73.4167% 34.3636%,73.4167% 44.0000%,67.4167% 43.8182%,67.5000% 51.1818%,74.9167% 51.1818%,74.8333% 26.4545%,67.5000% 26.4545%,67.5000% 26.2727%);
}
.shimizu{left: 75.6667%;top: 35.0909%;width: 5.8333%;height: 7.7273%;}
.nagaizumi{left: 75.5833%;top: 26.4545%;width: 5.8333%;height: 8.0000%;}
.susono{left: 67.41%;top: 18.0000%;width: 23.92%;height: 7.55%;}
.gotemba{left: 67.41%;top: 9.3636%;width: 23.92%;height: 7.55%;}
.oyama{left: 67.41%;top: 0.78%;width: 23.92%;height: 7.7273%;}
.mishima{left: 82.2%;top: 26.4545%;width: 9.1%;height: 7.5455%;}
.kannami{left: 82.2%;top: 34.8%;width: 9.1%;height: 7.9%;}
.izunokuni{left: 75.6667%;top: 43.6364%;width: 15.5833%;height: 7.6364%;}
.izu{left: 64.9%;top: 52.1818%;width: 26.4%;height: 16.1818%;}
.nishiizu{left: 63.5%;top: 69.2727%;width: 14.8%;height: 8.25%;}
.matsuzaki{left: 63.5%;top: 78.2%;width: 14.8%;height: 8.25%;}
.atami{left: 92.0833%;top: 34.8%;width: 6.1667%;height: 16.5%;}
.ito{left: 92.0000%;top: 52.1818%;width: 7.3333%;height: 16.1818%;}
.higashiizu{left: 89.3%;top: 69.2727%;width: 7.68%;height: 12.6%;}
.kawazu{left: 78.9%;top: 69.2727%;width: 9.7%;height: 12.6%;}
.shimoda{
inset: 0;
pointer-events: auto;
clip-path: polygon(78.9000% 82.9091%,78.9000% 95.9091%,81.5000% 95.7273%,81.5000% 92.9091%,86.5833% 92.7273%,86.6667% 94.1818%,88.5833% 94.1818%,88.5833% 82.7273%,78.9167% 82.7273%,85.0000% 88.0000%);
}
.minamiizu{
inset: 0;
pointer-events: auto;
clip-path: polygon(64.8333% 87.4545%,64.8333% 96.0000%,71.6667% 96.1818%,71.6667% 99.4545%,78.1667% 99.3636%,78.1667% 87.2727%,64.8333% 87.4545%,69.5000% 91.7273%);
}
/* -------------------- ★★★★★ 768 ★★★★★ -------------------- */
/* -------------------- ★★★★★ 1024 ★★★★★ -------------------- */
/* -------------------- ★★★★★ 1200 ★★★★★ -------------------- */