@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
/* アイコンインポート */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body {
  font-family: "Comic Neue" !important;
}
.text-navy {
    color: navy; /* テキストの色をネイビーに */
}
.text-darkgreen {
    color: darkgreen; /* テキストの色をネイビーに */
}
.text-red {
    color: indianred; /* テキストの色をインディアンレッドに */
}
.bg-mapkawaii-header {
	background-color: #C0DCED;
	background-image: -webkit-linear-gradient(330deg,rgba(122,182,238,1.00) 0%,rgba(195,234,244,1.00) 13.68%,rgba(223,236,234,1.00) 30.47%,rgba(233,243,231,1.00) 49.95%,rgba(245,235,231,1.00) 68.19%,rgba(243,216,225,1.00) 83.94%,rgba(198,198,242,1.00) 100%);
	background-image: -moz-linear-gradient(330deg,rgba(122,182,238,1.00) 0%,rgba(195,234,244,1.00) 13.68%,rgba(223,236,234,1.00) 30.47%,rgba(233,243,231,1.00) 49.95%,rgba(245,235,231,1.00) 68.19%,rgba(243,216,225,1.00) 83.94%,rgba(198,198,242,1.00) 100%);
	background-image: -o-linear-gradient(330deg,rgba(122,182,238,1.00) 0%,rgba(195,234,244,1.00) 13.68%,rgba(223,236,234,1.00) 30.47%,rgba(233,243,231,1.00) 49.95%,rgba(245,235,231,1.00) 68.19%,rgba(243,216,225,1.00) 83.94%,rgba(198,198,242,1.00) 100%);
	background-image: linear-gradient(120deg,rgba(122,182,238,1.00) 0%,rgba(195,234,244,1.00) 13.68%,rgba(223,236,234,1.00) 30.47%,rgba(233,243,231,1.00) 49.95%,rgba(245,235,231,1.00) 68.19%,rgba(243,216,225,1.00) 83.94%,rgba(198,198,242,1.00) 100%);
}
.display-p{
	font-size: 15px;
	font-weight: normal;
}
.card-body ul{
	padding-top: 0.1em;
	margin-bottom: 0.5em;
}
.card-body li{
	line-height: 1.5em;
	padding-bottom: 1em;
	color: rgba(34,63,136,1.00);
}
ul li ul li {
	margin: 0px;
	padding: 0px;
}

.navbar-brand  {
	font-weight: bold;
	color: #ff4974;
	text-shadow: -0.1em -0.1em 0.1em #FFFFFF,0.1em 0.1em 0.1em #FFFFFF,-0.1em 0.1em 0.1em #FFFFFF,0.1em -0.1em 0.1em #FFFFFF,0px -0.1em 0.1em #FFFFFF,0px 0.1em 0.1em #FFFFFF,-0.1em 0px 0.1em #FFFFFF,0px -0.1em 0.1em #FFFFFF,-0.1em -0.1em 0.1em #FFFFFF,0.1em 0.1em 0.1em #FFFFFF,-0.1em 0.1em 0.1em #FFFFFF,0.1em -0.1em 0.1em #FFFFFF;
}

    .jumbotron {
	background-size: cover;
	background-position: 0% 80%;
	text-shadow: -0.1em -0.1em 0.2em #FFFFFF,0.1em 0.1em 0.2em #FFFFFF,-0.1em 0.1em 0.2em #FFFFFF,0.1em -0.1em 0.2em #FFFFFF,0px -0.1em 0.2em #FFFFFF,0px 0.1em 0.2em #FFFFFF,-0.1em 0px 0.2em #FFFFFF,0px -0.1em 0.2em #FFFFFF,-0.1em -0.1em 0.2em #FFFFFF,0.1em 0.1em 0.2em #FFFFFF,-0.1em 0.1em 0.2em #FFFFFF,0.1em -0.1em 0.2em #FFFFFF;
	background-color: rgba(229,242,244,1.00);
}
/* 毎月背景を変える */
.background-1 .jumbotron{background-image: url(https://mapkawaii.com/kawaiimap/wp-content/uploads/2025/04/manzamou.jpg);}
.background-2 .jumbotron{background-image: url(../index/bg-sakura.jpg);}
.background-3 .jumbotron{background-image: url(../images/22_shizuoka/atami-beach.jpg);}
.background-4 .jumbotron{background-image: url(https://mapkawaii.com/kawaiimap/wp-content/uploads/2025/04/sunayama-beach2-1.jpg);}
.background-5 .jumbotron{background-image: url(https://mapkawaii.com/kawaiimap/wp-content/uploads/2025/04/Z6P_7468.jpg);}
.background-6 .jumbotron{background-image: url(https://mapkawaii.com/kawaiimap/wp-content/uploads/2025/04/okinawa-beach.jpg);}
.background-7 .jumbotron{background-image: url("../images/01_hokkaido/sapporo/moerenuma-park.jpg");}
.background-8 .jumbotron{background-image: url("../images/14_kanagawa/yokohamabaybridge.jpg");}
.background-9 .jumbotron{background-image: url(https://mapkawaii.com/kawaiimap/wp-content/uploads/2025/06/DSC_5310-scaled.jpg);}
.background-10 .jumbotron{background-image: url(https://mapkawaii.com/kawaiimap/wp-content/uploads/2025/06/DSC_4674-scaled.jpg);}
.background-11 .jumbotron{background-image: url(https://mapkawaii.com/kawaiimap/wp-content/uploads/2025/06/maeda-misaki-3-scaled.jpg);}
.background-0 .jumbotron{background-image: url(https://mapkawaii.com/kawaiimap/wp-content/uploads/2025/06/tancyame-1-scaled.jpg);}

    .jumbotron.jumbotron-fluid.text-center p {
	max-width: 500px;
	padding-left: 1em;
	padding-right: 1em;
	margin-left: auto;
	margin-right: auto;
}
    .card {
	margin-bottom: 1em;
}
    .card1 {	margin-bottom: 1em;
}
.positionrerative {
    position: relative;
}

.mapclip {
    width: 100%;
	height: 200px;
    position: relative;
    top: 0px;
    left: 0px;
	object-fit:cover;
}
#footerbg {
	background-image: url(fullmap.jpg);
	background-position: 50% 64%;
	background-size: cover;
	text-shadow: 0px 0px 10px #99DAFF,0px 0px 10px #99DAFF,0px 0px 10px #99DAFF,0px 0px 10px #99DAFF,0px 0px 10px #99DAFF;
	color: white;
}
#footerbg a{
	color: white;
	text-decoration: none;
	border-bottom: 1px dotted #FFFFFF;
}
#mapmain-background-out{
	background-image: -webkit-linear-gradient(178deg,rgba(187,230,248,1.00) 0%,rgba(80,188,232,1.00) 30.78%,rgba(80,188,232,1.00) 66.11%,rgba(187,230,248,1.00) 100%);
	background-image: -moz-linear-gradient(178deg,rgba(187,230,248,1.00) 0%,rgba(80,188,232,1.00) 30.78%,rgba(80,188,232,1.00) 66.11%,rgba(187,230,248,1.00) 100%);
	background-image: -o-linear-gradient(178deg,rgba(187,230,248,1.00) 0%,rgba(80,188,232,1.00) 30.78%,rgba(80,188,232,1.00) 66.11%,rgba(187,230,248,1.00) 100%);
	background-image: linear-gradient(272deg,rgba(187,230,248,1.00) 0%,rgba(80,188,232,1.00) 30.78%,rgba(80,188,232,1.00) 66.11%,rgba(187,230,248,1.00) 100%);
}
#mapmain { /* メインマップ 色補正
	filter: contrast(90%) brightness(100%); */
}
.mapindex#mapmain { /* メインマップ index */
	filter: contrast(100%);
}
#map-main { /* メインマップ サイズ感 */
	position: relative;
	max-width: 700px;
	touch-action: auto;
	overflow: hidden;
}

/* ドラクエの海みたいな */
#mapmain-background {
    position: relative;
    background: url('ocean_texture.jpg') repeat; /* タイル状の海画像 */
    animation: scrollOcean 180s linear infinite;
}

@keyframes scrollOcean {
    0% { background-position: 0 0; }
    100% { background-position: 400px 200px; } /* ゆっくりと動かす */
}





#ad-mainleftside,#ad-mainrightside { /* adsense左右 */
	position: absolute;
	top: 0%;
	height: 550px;
	width: 220px;
	background-color: rgba(255,255,255,0.05);
}
#ad-mainleftside {
	left: 50%;
	translate: -570px 180px;
}
#ad-mainrightside{
	left: 50%;
	translate: 350px 180px;
}
#ad-mobilebar{ /* adsense 中央モバイル */
	max-width: 700px;
	background-color: rgba(255,255,255,9.5);
	margin: 0 auto;
	height: auto;
}
@media screen and (max-width: 1050px) { /* 表示マネジメント */
#ad-mainleftside,#ad-mainrightside {
	display: none; /* 表示しない */
}
}
@media screen and (min-width: 1100px) { /* 表示マネジメント */
#ad-mobilebar{
	/* display: none; 表示しない */
}
}

/* アイコンスポット バリエーション アニメ2パターン*/
.spotpink a,.spotgreen a,.spotgray a,.spotnavy a,.spotbrown a,.spotorange a{
	display: block;
	z-index: 510;
  animation: purupuru 3s linear 0s infinite;
}

@keyframes purupuru {
    0%   { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態 */
    15%  { transform: scale(1.03, 0.98) translate(0.15em, 0.1em); } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
    25%  { transform: scale(0.98, 1.03) translate(-0.1em, -0.3em); } /* 潰れた反動が終り、空中で元に戻る */
    40% { transform: scale(1.0, 1.0) translate(0%, 0.1em); } /* 初期状態に戻る */
    50% { transform: scale(1.0, 1.0) translate(-0.05em, 0%); }
    60% { transform: scale(1.0, 1.0) translate(0.05em, 0%); }
    70% { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態に戻る */
}
/* ランキングBEST5の表示 */
.spotyellow.ranking {
  background: linear-gradient(to bottom, rgba(211,184,75,0.32), rgba(200,177,88,1.00));
  border-radius: 3px;
}
.spotgray.ranking {}
.spotorange.ranking {}
.spotnavy.ranking {}
.spotdarkgreen.ranking {}

.spotblue a,.spotred a,.spotyellow a,.spotbeige a,.spotperple a,.spotdarkgreen a,.spotcloseup{
	display: block;
	z-index: 510;
  animation: purupurupuru 3.5s linear 1s infinite;
}

/* 市町村TSVから表示 */
p.citylist{
	position: absolute;
	font-size: min(1.5vw, 10px); /* 文字サイズ */
	font-weight:bold;
	line-height: 1em !important;
	color: #eeecec;
	text-align: center;
	z-index: 10;
	transform: translate(-65%, 0%);
	text-shadow: -0.1em -0.1em 0.05em #4E9E49,-0.1em 0.1em 0.1em #4E9E49,0.1em -0.1em 0.05em #4E9E49,0px -0.1em 0.05em #4E9E49;
}
/* 拡大時 */
.spotmain-g p.citylist{
	font-size: min(2.5vw, 17px); /* 文字サイズ */
}

@keyframes purupurupuru {
    0%   { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態 */
    15%  { transform: scale(1.03, 0.98) translate(0.15em, 0.1em); } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
    25%  { transform: scale(0.98, 1.03) translate(-0.1em, -0.3em); } /* 潰れた反動が終り、空中で元に戻る */
    40% { transform: scale(1.0, 1.0) translate(0%, 0.1em); } /* 初期状態に戻る */
    50% { transform: scale(1.0, 1.0) translate(-0.05em, 0%); }
    60% { transform: scale(1.0, 1.0) translate(0.05em, 0%); }
    70% { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態に戻る */
}
/* アイコンスポット バリエーション */
.spotred, .spotblue, .spotyellow, .spotnavy,.spotpink,.spotgreen,.spotgray,.spotbeige,.spotperple,.spotbrown,.spotorange,.spotdarkgreen {
	position: absolute;
	left: 5%;
	top: 5%;
	font-size: calc(0.28rem + 0.70vw);
	font-size: calc(0.27rem + 0.85vw);
	font-size: calc(0.275rem + 0.90vw);
	font-size: min(1.7vw, 12px); /* 文字サイズ */
	font-weight: bold;
	line-height: 0.5rem;
	color: #FFFFFF;
	display: block;
	transform: translate(-50%,-50%);
	white-space: nowrap;
	z-index: 510;
	background-image: url(s);
	height: 23px;
}
/* 標準アイコン */
.spotred img, .spotblue img, .spotyellow img, .spotnavy img, .spotpink img,.spotgreen img,.spotgray img,.spotbeige img,.spotperple img,.spotbrown img,.spotorange img,.spotdarkgreen img {
	margin-right: 0px;
	width: 4.0vw;
	height: auto;
	min-width: 12px;
	min-height: 12px;
	max-width: 27px;
	max-height: 27px;
	display: block;
	filter: drop-shadow(1px -1px 1px rgba(255,255,255,1)) drop-shadow(-1px 1px 1px rgba(255,255,255,1));
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: 501;
	border-radius: 50%;
}
.spotmain p,.spotmain-g p{ /* 大きなアイコン */
	font-size: calc(0.4rem + 0.9vw);
	font-size: min(2.3vw, 15px); /* 文字サイズ */
	line-height: 1.0em;
}
.spotmain img,.spotmain-g img{ /* 大きなアイコン */
	width:4.0vw;height: auto;
	min-width: 20px;
	min-height: 20px;
	max-width: 27px;
	max-height: 27px;
}
.spottitle p{ /* スポットタイトル */
	font-size: calc(0.8rem + 1.8vw);
	font-size: min(3.5vw, 25px); /* 文字サイズ */
	line-height: 1.2em;
	z-index: 10;
	top:2.2em;
}
.spotmain-g .spottitle p{ /* スポットタイトル */
	font-size: min(6vw, 50px); /* 文字サイズ */
}
.spotred:hover, .spotblue:hover, .spotyellow:hover, .spotnavy:hover,.spotpink:hover,.spotgreen:hover,.spotgray:hover,.spotbeige:hover,.spotperple:hover,.spotbrown:hover,.spotorange:hover,.spotdarkgreen:hover {
	z-index: 511 !important;
}
.spotred a:hover img, .spotblue a:hover img, .spotyellow a:hover img, .spotnavy a:hover img, .spotpink a:hover img,.spotgreen a:hover img ,.spotgray a:hover img,.spotbeige a:hover img,.spotperple a:hover img,.spotbrown a:hover img,.spotorange a:hover img,.spotdarkgreen a:hover img {
	z-index: 501;
	height: auto;
	filter: brightness(1.0); /* 明るくする */
	cursor: pointer;
	filter: drop-shadow(-1px -1px 3px #ffffff) drop-shadow(1px 1px 3px #ffffff) drop-shadow(-1px 1px 3px #ffffff) drop-shadow(1px -1px 3px #ffffff);
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.whiteshadow{
	filter: drop-shadow(-1px -1px 3px #ffffff) drop-shadow(1px 1px 3px #ffffff) drop-shadow(-1px 1px 3px #ffffff) drop-shadow(1px -1px 3px #ffffff);
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.spotred a  ,  .spotblue a  ,  .spotyellow a  ,  .spotnavy a  ,  .spotpink a,.spotgreen a,.spotgray a,.spotbeige a,.spotperple a,.spotbrown a ,.spotorange a,.spotdarkgreen a {
	color: #FFFFFF;
	line-height: 0.9em;
	text-decoration: none;
}
.spotred p, .spotblue p, .spotyellow p, .spotnavy p, .spotpink p,.spotgreen p,.spotgray p,.spotbeige p,.spotperple p,.spotbrown p,.spotorange p,.spotdarkgreen p {
	display: block;
	position: absolute;
	transform: translate(clamp(0px, 4.2vw, 27px), -103%);
	z-index: 510;
}
/* アイコン文字サイズ hover */
.spotred a:hover p, .spotblue a:hover p, .spotyellow a:hover p, .spotnavy a:hover p, .spotpink a:hover p,.spotgreen a:hover p,.spotgray a:hover p,.spotbeige a:hover p,.spotperple a:hover p,.spotbrown a:hover p,.spotorange a:hover p,.spotdarkgreen a:hover p {
	z-index: 520;
	font-size: min(2.1vw, 15px);
	color: #ff4974;
	cursor: pointer;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	text-shadow: -1px -1px 0.1em #FFFFFF,1px 1px 0.1em #FFFFFF,-1px 1px 0.1em #FFFFFF,1px -1px 0.1em #FFFFFF;
	opacity: 100%;
}
.spotrightside p{
	text-align: right; /* 文字右寄せ*/
	transform: translate(-104%,-130%)
}
/* アイコン文字サイズ */
.spotnotext p,.iconindex p{
	opacity: 0%;
	font-size: min(1.7vw, 12px);
}
.spotrightside img{
	left: 100%;
	top: 0%;
	transform: translate(-5%,-22%) scale(-1,1);
}
.spotrightside a:hover img{
	transform: translate(-5%,-20%) scale(-1,1);
}
.spotred{
	text-shadow: -0.1em -0.1em 0.1em #BA5129,0.1em 0.1em 0.1em #BA5129,-0.1em 0.1em 0.1em #BA5129,0.1em -0.1em 0.1em #BA5129,0px -0.1em 0.1em #BA5129,0px 0.1em 0.1em #BA5129,-0.1em 0px 0.1em #BA5129,0px -0.1em 0.1em #BA5129,-0.1em -0.1em 0.1em #BA5129,0.1em 0.1em 0.1em #BA5129,-0.1em 0.1em 0.1em #BA5129,0.1em -0.1em 0.1em #BA5129;
}
#imagetitle h1{
	text-shadow: -0.1em -0.1em 0.1em #FFFFFF,0.1em 0.1em 0.1em #FFFFFF,-0.1em 0.1em 0.1em #FFFFFF,0.1em -0.1em 0.1em #FFFFFF,0px -0.1em 0.1em #FFFFFF,0px 0.1em 0.1em #FFFFFF,-0.1em 0px 0.1em #FFFFFF,0px -0.1em 0.1em #FFFFFF,-0.1em -0.1em 0.1em #FFFFFF,0.1em 0.1em 0.1em #FFFFFF,-0.1em 0.1em 0.1em #FFFFFF,0.1em -0.1em 0.1em #FFFFFF;
}
.spotyellow p{
	text-shadow: -0.1em -0.1em 0.1em #AB911B,0.1em -0.1em 0.1em #AB911B,0px -0.1em 0.1em #DDB42A,-0.1em -0.1em 0.1em #DDB42A,0.1em -0.1em 0.1em #AB911B,0.1em 0.1em 0.1em #AB911B,-0.1em 0.1em 0.1em #AB911B,0.1em 0.1em 0.1em #AB911B,-0.1em 0.1em 0.1em #AB911B,0px 0.1em 0.1em #AB911B,-0.1em 0px 0.1em #AB911B,0px -0.1em 0.1em #AB911B;
}
.spotblue p{
	text-shadow: -0.1em -0.1em 0.1em #339FEA,0.1em 0.1em 0.1em #339FEA,-0.1em 0.1em 0.1em #339FEA,0.1em -0.1em 0.1em #339FEA,0px -0.1em 0.1em #339FEA,0px 0.1em 0.1em #4EB1E9,-0.1em 0px 0.1em #339FEA,0px -0.1em 0.1em #339FEA,-0.1em -0.1em 0.1em #339FEA,0.1em 0.1em 0.1em #339FEA,-0.1em 0.1em 0.1em #339FEA,0.1em -0.1em 0.1em #339FEA;
}
.spotblue p{
	text-shadow: -0.1em -0.1em 0.1em #4EB1E9,0.1em -0.1em 0.1em #4EB1E9,-0.1em 0px 0.1em #4EB1E9,0px -0.1em 0.1em #4EB1E9,-0.1em -0.1em 0.1em #4EB1E9,0.1em -0.1em 0.1em #4EB1E9,
	0.1em 0.1em 0.1em #1492D9,0.1em 0.1em 0.1em #1492D9,-0.1em 0.1em 0.1em #1492D9,-0.1em 0.1em 0.1em #1492D9,0px 0.1em 0.1em #1492D9,0px -0.1em 0.1em #1492D9;
}
.spotnavy p{
	text-shadow: -0.1em -0.1em 0.1em #0d6a9f,0.1em 0.1em 0.1em #0d6a9f,-0.1em 0.1em 0.1em #0d6a9f,0.1em -0.1em 0.1em #0d6a9f,0px -0.1em 0.1em #0d6a9f,0px 0.1em 0.1em #0d6a9f,-0.1em 0px 0.1em #0d6a9f,0px -0.1em 0.1em #0d6a9f,-0.1em -0.1em 0.1em #0d6a9f,0.1em 0.1em 0.1em #0d6a9f,-0.1em 0.1em 0.1em #0d6a9f,0.1em -0.1em 0.1em #0d6a9f;
}
.spotpink p{
	text-shadow: -0.1em -0.1em 0.1em #D25F9C,0.1em 0.1em 0.1em #D25F9C,-0.1em 0.1em 0.1em #D25F9C,0.1em -0.1em 0.1em #D25F9C,0px -0.1em 0.1em #D25F9C,0px 0.1em 0.1em #D25F9C,-0.1em 0px 0.1em #D25F9C,0px -0.1em 0.1em #D25F9C,-0.1em -0.1em 0.1em #D25F9C,0.1em 0.1em 0.1em #D25F9C,-0.1em 0.1em 0.1em #D25F9C,0.1em -0.1em 0.1em #D25F9C;
}
.spotgreen p{
	text-shadow: -0.1em -0.1em 0.1em #4DB553,0.1em 0.1em 0.1em #37AC3E,-0.1em 0.1em 0.1em #4DB553,0.1em -0.1em 0.1em #4DB553,0px -0.1em 0.1em #4DB553,0px 0.1em 0.1em #37AC3E,-0.1em 0px 0.1em #4DB553,0px -0.1em 0.1em #4DB553,-0.1em -0.1em 0.1em #37AC3E,0.1em 0.1em 0.1em #4DB553,-0.1em 0.1em 0.1em #4DB553,0.1em -0.1em 0.1em #4DB553;
}
.spotgray p{
	text-shadow: -0.1em -0.1em 0.1em #969696,0.1em 0.1em 0.1em #969696,-0.1em 0.1em 0.1em #969696,0.1em -0.1em 0.1em #969696,0px -0.1em 0.1em #969696,0px 0.1em 0.1em #696969,-0.1em 0px 0.1em #969696,0px -0.1em 0.1em #969696,-0.1em -0.1em 0.1em #969696,0.1em 0.1em 0.1em #696969,-0.1em 0.1em 0.1em #696969,0.1em -0.1em 0.1em #696969;
}
.spotbeige p{
	text-shadow: -0.1em -0.1em 0.1em #AEA175,0.1em 0.1em 0.1em #AEA175,-0.1em 0.1em 0.1em #AEA175,0.1em -0.1em 0.1em #AEA175,0px -0.1em 0.1em #AEA175,0px 0.1em 0.1em #AEA175,-0.1em 0px 0.1em #AEA175,0px -0.1em 0.1em #AEA175,-0.1em -0.1em 0.1em #AEA175,0.1em 0.1em 0.1em #AEA175,-0.1em 0.1em 0.1em #AEA175,0.1em -0.1em 0.1em #AEA175;
}
.spotperple p{
	text-shadow: -0.1em -0.1em 0.1em #A23D9A,0.1em 0.1em 0.1em #A23D9A,-0.1em 0.1em 0.1em #A23D9A,0.1em -0.1em 0.1em #A23D9A,0px -0.1em 0.1em #A23D9A,0px 0.1em 0.1em #A23D9A,-0.1em 0px 0.1em #A23D9A,0px -0.1em 0.1em #A23D9A,-0.1em -0.1em 0.1em #A23D9A,0.1em 0.1em 0.1em #A23D9A,-0.1em 0.1em 0.1em #A23D9A,0.1em -0.1em 0.1em #A23D9A;
}
.spotbrown p{
	text-shadow: -0.1em -0.1em 0.1em #7C5E4D,0.1em 0.1em 0.1em #7C5E4D,-0.1em 0.1em 0.1em #7C5E4D,0.1em -0.1em 0.1em #7C5E4D,0px -0.1em 0.1em #7C5E4D,0px 0.1em 0.1em #7C5E4D,-0.1em 0px 0.1em #7C5E4D,0px -0.1em 0.1em #7C5E4D,-0.1em -0.1em 0.1em #7C5E4D,0.1em 0.1em 0.1em #7C5E4D,-0.1em 0.1em 0.1em #7C5E4D,0.1em -0.1em 0.1em #7C5E4D;
}
.spotorange p{
	text-shadow: -0.1em -0.1em 0.1em #D7842B,0.1em 0.1em 0.1em #D7842B,-0.1em 0.1em 0.1em #D7842B,0.1em -0.1em 0.1em #D7842B,0px -0.1em 0.1em #D7842B,0px 0.1em 0.1em #D7842B,-0.1em 0px 0.1em #D7842B,0px -0.1em 0.1em #D7842B,-0.1em -0.1em 0.1em #D7842B,0.1em 0.1em 0.1em #D7842B,-0.1em 0.1em 0.1em #D7842B,0.1em -0.1em 0.1em #D7842B;
}
.spotdarkgreen p{
	text-shadow: -0.1em -0.1em 0.1em #167610,0.1em 0.1em 0.1em #167610,-0.1em 0.1em 0.1em #167610,0.1em -0.1em 0.1em #167610,0px -0.1em 0.1em #167610,0px 0.1em 0.1em #167610,-0.1em 0px 0.1em #167610,0px -0.1em 0.1em #167610,-0.1em -0.1em 0.1em #167610,0.1em 0.1em 0.1em #167610,-0.1em 0.1em 0.1em #167610,0.1em -0.1em 0.1em #167610;
}
/* 地図クローズアップ囲み */
.spotcloseup {
	position: absolute;
	margin: 0px;
	padding: 0px;
	font-size: calc(0.5rem + 0.2vw);
	font-weight: bold;
	line-height: 1.5em;
	color: #C8E1E2;
	display: block;
	transform: translate(0%,0%);
	border-radius: 6px;
	border: 1.5px solid rgba(255,72,116,0.6); 
	background-color: rgba(198,240,200,0);
	z-index: 510;
}
.spotcloseup:hover{
	font-size: calc(0.2.5rem + 0vw);
	border: 1.5px solid rgba(255,255,255,1);
	background-color: rgba(255,255,255,0.3);
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.spotcloseup a {
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #ffffff;
	/*text-shadow: -1px -1px 2px #FFFFFF,1px 1px 2px #FFFFFF,-1px 1px 2px #FFFFFF,1px -1px 2px #FFFFFF,0px -1px 2px #FFFFFF,0px 1px 2px #FFFFFF,-1px 0px 2px #FFFFFF,0px -1px 2px #FFFFFF,-2px -2px 2px #FFFFFF,2px 2px 2px #FFFFFF,-2px 2px 2px #FFFFFF,2px -2px 2px #FFFFFF,0px -2px 2px #FFFFFF,0px 2px 2px #FFFFFF,-2px 0px 2px #FFFFFF,0px -2px 2px #FFFFFF; 明るくする */
	display: block;
	text-align: left;
	padding: 0px;
	margin: 0px;
}
.spotcloseup p{
	border: 1.5px solid rgba(255,72,116,0.9); 
	background-color: rgba(255,255,255,0.70);
	color: rgba(254,73,117,1.00);
	padding: 5px;
	margin: -10px;
	border-radius: 5px;
}
.spotcloseup:hover p{
	border: 1.5px solid rgba(255,255,255,1); 
	background-color: rgba(255,255,255,1);
}
.spotcloseup {
	padding-top: 7px;
	padding-right: 7px;
	padding-bottom: 7px;
	padding-left: 7px;
}
/* メニューボード背景 */
.menuboard {
	position: absolute;
    cursor: move;
	margin: 0px;
	padding: 0px;
	color: #C8E1E2;
	display: block;
	transform: translate(0%,0%);
	border-radius: 10px;
	background-color: rgba(94,115,156,0.83);
	z-index: 500;
	border: 2px solid rgba(222,225,232,1.00);
}
.full-screen {
	overflow: visible;
	width: 98.5%;
	display: block;
}
.full-screen div  {
}
.full-screen img  {
	border: 1px solid rgba(215,215,215,1.00);
	width: 90%;
}
.full-screen p  {
	padding-right: 2em;
}
.container a:hover img {
	filter: brightness(1.05); /* 明るくする */
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
#imagetitle {
	position: relative;
}
#imagetitle img {
	width: 100%;
}
#imagetitle h1 {
	position: absolute;
	margin: 1em;
	transform: translate(0%,-50%);
	top:40%;
	color: #FF4974;
}
.cloudanime,.weather-anime { /* 雲クラウドアニメ */
	display: inline;
	position: absolute;
	left: -2000px;
	filter: blur(0px);
	z-index: 5;
	width: 18vw;
	max-width: 150px;
	animation: cloudanime 100s linear 0s infinite;
	opacity: 1;
}	
.cloudanime img,.weather-anime img {
	width: 60%;
	/*filter: drop-shadow(-2vw 15vw 1.0vw rgba(0,0,0,0.08));*/
}
.weather-anime p{
	font-family: 'DIN Condensed', sans-serif;
	line-height: 1.2em;
	font-size: min(2.1vw, 15px);
	background-color: #ffffff;
	border-radius: 1.5em;
	display: block;
	text-shadow: -0.1em -0.1em 0.1em #ffffff,0.1em 0.1em 0.1em #ffffff,-0.1em 0.1em 0.1em #ffffff,0.1em -0.1em 0.1em #ffffff,0px -0.1em 0.1em #ffffff,0px 0.1em 0.1em #ffffff,-0.1em 0px 0.1em #ffffff,0px -0.1em 0.1em #ffffff,-0.1em -0.1em 0.1em #ffffff,0.1em 0.1em 0.1em #ffffff,-0.1em 0.1em 0.1em #ffffff,0.1em -0.1em 0.1em #ffffff;
}
.weather-title{
	color: #484848;
}
.weather-max{
	color: #E34B62;
}
.weather-min{
	color: #43B8F9;
}
@keyframes cloudanime {
    0%   { top:8%;left:90%;opacity: 0; }
    5%   { opacity: 1; }
    35%   { top:-2%;}
    60%   { top:-2%;}
    95%   { opacity: 1; }
    100%   { top:8%;left:-10%;opacity: 0; }/* 初期状態に戻る */
}
.iconindex{ /* アイコン のみ表示グループ */
	opacity: 90%;
	z-index: 100;
}
.iconindex img{ /* アイコン のみ表示グループ */
	min-width: 8px;
	max-width: 20px;
	width: 2.5vw;
	top:4px;
}
.iconindex .spotrightside img{
	left: 110%;
}
.icongroup{ /* アイコン フェードイン表示グループ */
	z-index: 510;
}
.icongroup div{ /* アイコン フェードイン表示グループ */
	opacity: 0;
	animation: icongroupfeedin 0.3s linear 0.5s forwards;
}
@keyframes icongroupfeedin {
    0%   {opacity: 0; }
    100% {opacity: 1; }
}
.snapscrollx { /*# スナップスクロール */
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
} 
.snapscrollx .snapbox {
	margin: 2vw;
	width: 250px;
	display: block;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	flex-shrink: 0;
	border: 1px solid rgba(214,214,214,1.00);
	background-color: rgba(253,237,241,1.00);
}
.snapscrollx .snapbox img{
	width: 100%;
	height: auto;
}
.snapscrollx .snapbox:nth-child(2n) {
	background-color: rgba(236,240,255,1.00);	
}
#sakura .card-header,#sakura2 .card-header,#sakura3 .card-header { /*# カードヘッダー桜 */
	background-image: url(bg-sakura.jpg);
	background-size: cover;
	background-position: 0% bottom;
	padding-top: 15px;
	padding-bottom: 15px;
	text-shadow: -0.1em -0.1em 0.1em #FFFFFF,0.1em 0.1em 0.1em #FFFFFF,-0.1em 0.1em 0.1em #FFFFFF,0.1em -0.1em 0.1em #FFFFFF,0px -0.1em 0.1em #FFFFFF,0px 0.1em 0.1em #FFFFFF,-0.1em 0px 0.1em #FFFFFF,0px -0.1em 0.1em #FFFFFF,-0.1em -0.1em 0.1em #FFFFFF,0.1em 0.1em 0.1em #FFFFFF,-0.1em 0.1em 0.1em #FFFFFF,0.1em -0.1em 0.1em #FFFFFF;
}
#sakura2 .card-header {
	background-position: 0% top;
}
.michinoeki .card-header,.michinoeki .modal-header { /*# カードヘッダー道の駅 */
	background-image: url("bg-roadsidestation.jpg");
	background-size: cover;
	background-position: 0% center;
	text-shadow: -0.1em -0.1em 0.1em #FFFFFF,0.1em 0.1em 0.1em #FFFFFF,-0.1em 0.1em 0.1em #FFFFFF,0.1em -0.1em 0.1em #FFFFFF,0px -0.1em 0.1em #FFFFFF,0px 0.1em 0.1em #FFFFFF,-0.1em 0px 0.1em #FFFFFF,0px -0.1em 0.1em #FFFFFF,-0.1em -0.1em 0.1em #FFFFFF,0.1em 0.1em 0.1em #FFFFFF,-0.1em 0.1em 0.1em #FFFFFF,0.1em -0.1em 0.1em #FFFFFF;
}
.onsen .card-header,.onsen .modal-header { /*# カードヘッダー温泉 */
	background-image: url("bg-onsen.jpg");
	background-size: cover;
	background-position: 0% center;
	text-shadow: -0.1em -0.1em 0.1em #FFFFFF,0.1em 0.1em 0.1em #FFFFFF,-0.1em 0.1em 0.1em #FFFFFF,0.1em -0.1em 0.1em #FFFFFF,0px -0.1em 0.1em #FFFFFF,0px 0.1em 0.1em #FFFFFF,-0.1em 0px 0.1em #FFFFFF,0px -0.1em 0.1em #FFFFFF,-0.1em -0.1em 0.1em #FFFFFF,0.1em 0.1em 0.1em #FFFFFF,-0.1em 0.1em 0.1em #FFFFFF,0.1em -0.1em 0.1em #FFFFFF;
}
.michinoeki .card-title,.michinoeki h4,.michinoeki h5{
	color: #4773D3;
}
.michinoeki .card-title a{ /*# タイトルカラー道の駅 */
	color: #0D3B9F;
}
.onsen .card-title a{ /*# タイトルカラー温泉 */
	color: #2AA6F3;
}

.airplane img,.ship img {
	max-width: 60px;
	translate: 0% -5%;
}
#activitymenu{ /*# アクティビティメニュー */
  display: flex;
  justify-content: center;
}
a.gotop{ /*# TOP▲ */
	position: absolute;
	bottom:1em;
	right:1em;
}
.gotop img{
	width: 50px;
}
.officiallink,.gmaplink{ /*# 公式リンクアイコン */
	width: 40px;
}
.officiallink { /*# 公式リンクアイコン */
	padding-right: 0.5em;
}
.officiallink_a,.googlelink_a,.kawaiilink_a,.instagram_a { 
	margin-bottom: 5px;
	max-width: 300px !important;
	margin: 0 auto !important;
}
.officiallink_a a ,.googlelink_a a,.kawaiilink_a a,.instagram_a a{
	height: 3em;
	line-height: 1.2em;
	display: table-cell;
	vertical-align: middle;
	background-repeat: no-repeat;
	text-decoration: none;
	word-break: break-all;
	padding-left: 39px;
	padding-right: 2em;
	font-size: 12px;
	overflow: hidden;
	color: #5B7DCD !important;
	max-width: 300px !important;
	margin: 0 auto !important;
}
.officiallink_a a:hover ,.googlelink_a a:hover,.kawaiilink_a a:hover,.instagram_a a:hover{
	background-color: #F0F7FC;
}
.officiallink_a a{ 
	background-image: url(../images/officialsite.jpg);
	background-size: 33px auto;
}
.googlelink_a a{
	background-image: url(../images/googlemap.png);
	background-size: 35px auto;
}
.kawaiilink_a a{
	background-image: url("../icon/mapkawaii.png");
	background-size: 35px auto;
}
.instagram_a a{
	background-image: url("../images/instagram.png");
	background-size: 35px auto;
}

.mappickup{ /*# マップピックアップ */
	position: relative;
	max-width:250px;
	width: 100%;
	aspect-ratio:1/0.7;
	min-height: 150px;
	overflow: hidden;
}
.mappickup img.mappickupmap{ /*# マップピックアップ 画像位置調整 */
	position: absolute;
	max-width:250px;
	width: 100%;
	translate:0% 0%;
	transform-origin: 0% 0%;
	scale:3;
	top: 0px;left:0px;
}
.mappickup .mappickupicon{ /*# マップピックアップ */
	width: 20%;
	width: min(20% 2em);
	position: absolute;
	translate:-50% -50%;
	top: 50%;left:50%;
	filter: drop-shadow(1px -1px 1px rgba(255,255,255,0.7)) drop-shadow(-1px 1px 1px rgba(0,0,0,0.3));
}

.responsive,.autoslider,.autoslider2 { /*# slickスライダー余白消す */
  overflow: hidden;
}
.autoslider .sliderArea,.autoslider2 .sliderArea { /*# slickスライダー */
  width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.autoslider .sliderArea.w300,.autoslider2 .sliderArea.w300 {
  max-width: 300px;
}
.autoslider img,.autoslider2 img {
  width: auto;
  height: 300px;
}
.display-4,.display-5,.display-6,.jumbotron h1{
	max-width:700px;
	margin: 0 auto;
}





.withphotocaption div{
	position: relative;
}
.withphotocaption p{
position: absolute;
left: 50%;
bottom: 3%;
transform: translateX(-50%);
color: white;
text-shadow: 0.1em 0.1em 1.5em #000000,-0.1em -0.1em 1.5em #000000;
text-align: center;
font-size: 10px;
width: 50%;
font-weight: bold;
}
.text-dark-navy {
  color: #1B1B91 !important; /* より濃いネイビー */
}
.img-cover150 { /*# スマホは 120pxになってる */
  height: 150px;
  width: 150px;
object-fit: cover;
}
.img-cover100 {
  height: 100px;
  width: 100px;
object-fit: cover;
}
.img-cover50 {
  height: 50px;
  width: 50px;
object-fit: cover;
}
.responsive .card .card-img-top ,.img-cover200,.newresponsive .card .card-img-top {
  height: 220px;
  width: 100%;
object-fit: cover;
}
.responsive .card h5.card-title{
  height: 2.5em;
	margin-bottom: 1em;
	overflow: hidden;
}
.responsive .card p{
  height: 4.5em;
	overflow: hidden;
}
.all-list p{
  height: 1.5em;
	overflow: hidden;
}
.height2em p,.all-list h4{
  height: 2.3em;
	overflow: hidden;
}
.all-list .col:hover {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* ぼかし効果付きのシャドウ */
    transition: box-shadow 0.3s ease-in-out; /* スムーズな変化を追加 */
}
.textgradation,.text-winter {
  background: linear-gradient(90deg, darkred, navy,brown);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.textgreengradation,.text-viewspot {
  background: linear-gradient(90deg, green, darkgreen,navy);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}.green-line {
  height: 1px; /* 線の太さ */
  border: none; /* デフォルトの枠線を消す */
  background: linear-gradient(90deg, green, darkgreen, navy);
}
.textbluegradation,.text-onsen,.text-beach {
  background: linear-gradient(90deg, #2E76E3, #30DAD7,navy);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.textnavygradation,.text-michinoeki {
  background: linear-gradient(90deg,navy, blue, green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.textredgradation,.text-kouyou,.text-gourmet {
  background: linear-gradient(90deg,#DB2727,#CB8C0C, #C6082B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.textpinkgradation,.text-kouyou,.text-gourmet {
  background: linear-gradient(90deg,#E780CB, #E1896F,#DF83A3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.textgoldgradation,.text-sakura {
  background: linear-gradient(170deg, #FFA500, #FFD700, #FF8C00, #FFA500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.modal-dialog {
    min-width: 350px; /* 最小幅を確保 */
}
.modal-content {
  min-width: 350px;
}
.modal-header button{
}
.modal-header .btn-close {
  width: 15px;
  height: 15px;
}
.modaliframe{
  min-width: 350px;
	width: 100%;
	height: 80vh;
}
.offcanvasiframe{
	width: 100%;
	height: 98%;
}


@media screen and (max-width: 580px) { /*# slickスマホ高さ150 */
.autoslider .slick-slide img,.autoslider2 .slick-slide img {
  height: 150px;
}
#ad-mainleftside,#ad-mainrightside {
	display: none;
}
.all-list p{
	font-size: 10px;
	height: 1.2em;
}
.all-list h4{
	font-size: 18px;
	height: 1.0em;
}
.img-cover150 {
  height: 120px;
  width: 120px;
object-fit: cover;
}

} /*# ここまで max-width: 580px */