﻿
/* ////////////////////////////////////////
//
//             リセットCSS
//
///////////////////////////////////////////*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

body {
  line-height:1;
  zoom:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
  display:block;
}

nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

/* change colours to suit your needs */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* change colours to suit your needs */
mark {
  background-color:#ff9;
  color:#000; 
  font-style:italic;
   font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* change border colour to suit your needs */
hr {
  display:block;
  height:1px;
  border:0;   
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

input, textarea, [contenteditable] {
  user-select: auto;
}

h1{
	font-size:2.8rem;
}

h2{
	font-size:2.3rem;
}

h3{
	font-size:1.9rem;
}

/* ////////////////////////////////////////
//
//                 共通
//
///////////////////////////////////////////*/
:root{
	--bs-font-sans-serif: Meiryo, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--bs-gradient: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0));
}
.tag_item{border-radius: 10px;padding:5px 10px;margin:5px;cursor: pointer;}
.tagev{background-color:#f5b2ac;border: 3px solid #f19ca7;}
.tag0{background-color:#a1d8e2;border: 3px solid #00afcc;}
.tag1{background-color:#dbebc4;border: 3px solid #9fc24d;}
.tag2{background-color:#fad09e;border: 3px solid #f6ae54;}
.tag3{background-color:#f5b2ac;border: 3px solid #f19ca7;}
.tag4{background-color:#ffedab;border: 3px solid #fdd35c;}
.buttonUps{box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.9), inset -1px -1px 3px rgba(0, 0, 0, 0.3);}
.textmsg{color:#4a6b59;font-size:1.6rem;margin:0 30px;padding:10px;background-color:#eaf5ef;text-align:left;}
.wrap-text{word-wrap: break-word;overflow-wrap: break-word;word-break: break-word;}

/* ////////////////////////////////////////
//
//                 html
//
///////////////////////////////////////////*/
html {
	font-size: 62.5%;			/*ベースフォントサイズ*/
	scroll-behavior: smooth;	/*ページ内リンクスムーズ*/
}

/* ////////////////////////////////////////
//
//                 body
//
///////////////////////////////////////////*/
body{
	margin:0;
	font-family:var(--bs-font-sans-serif);
	font-weight:400;	/*太さ100～900：400が普通*/
	line-height:1.5;	/*行間：フォントサイズの0.5*/
	color:#212529;
	background-color:#fff;
	font-size:1.4rem;
}

/* ////////////////////////////////////////
//
//                 main
//
///////////////////////////////////////////*/
.main_top{
	position:absolute;
	width:100%;
}

/* ////////////////////////////////////////
//
//          コンテンツタイトル
//
///////////////////////////////////////////*/
.top_main_frm{
	width:100%;position: relative;margin:82px 0 0 0;
}
.top_title_frm{
	width:100%;text-align:center;margin-bottom:25px;
}
.top_title{
	width:80%;
	border-radius: 5px;padding:10px;
	background-color: rgba(0, 96, 141, 0.5);
	font-size:1.8rem;color:#fff;
	border: 3px solid rgba(255, 255, 255, 0.5);
}

/*コンテンツタイトルアイコンの余白*/
.title_icon{margin-right:5px;}

/* ==========================================
//
// ヘッダー枠
//
=============================================*/
.frm_header{
	position:fixed;width:calc(100% - 20px);
	/*height:65px;*/
	top:0;
	margin:0;padding:0;
	border-bottom: 3px solid #222;
	background-color:#fff;
	padding:10px 10px 5px 10px;
	border-left: 1px solid #b7b297;
}

/*アバターアイコン*/
.frm_logo{width:65px;top:0;/*z-index: 10000;*/}	/*ロゴ枠*/
.frm_logo img{	width:60px;height:60px;}	/*ロゴ画像*/
.frm_username{	
	position: fixed;
	left:85px;
	padding:5px 10px 5px 0;
	/*z-index: 9999;*/
	transition: transform 1s ease;
}

.frm_minsei{
	width:60px;height:60px;
	position: fixed;right:10px;top:10px;/*z-index: 9998;*/
}
.pushadd{		display:none;}
.pushlink{		display:none;}
.my_av_icon{}

.add_text{
	width:60px;height:60px;
	/* border-radius: 0 0 0 50%; 画像を丸くする */
	/* overflow: hidden; 丸くした画像がはみ出さないように 
	border: 2px solid #22613f;
	background-color:#666;*/
}

.qa_button{
	width:calc(50% - 50px);height:50px;border: 1px solid #fff;padding:5px 15px;font-size:1.7rem;
	margin:5px;background-color:#fff;border-radius: 10px;border: 2px solid #999;
	cursor: pointer;
}

/* ==========================================
//
// フッターグローバルメニュー
//
=============================================*/
.pankuzu_frm_bottom{height:56px;border-top: 3px solid #222;color:#fff;}
.back_frm{top:-75px;width:80px;height:45px;position: absolute;cursor: pointer;background-color:#00ada9;border-top: 3px solid #222;border-right: 3px solid #222;border-bottom: 3px solid #222;padding:5px 0;}
.footMenus{flex: 1;padding-top:2px;position: relative;cursor: pointer;}
.footSubs{position: absolute;bottom:0;flex-wrap: wrap;}
.footItem{width:100%;display: block;}
@media only screen and (min-width: 460px){.pankuzu_frm_bottom{height:60px;}.back_frm{top:-75px;width:85px;height:50px;}}
@media only screen and (min-width: 500px){.pankuzu_frm_bottom{height:65px;}.back_frm{top:-85px;width:90px;height:55px;}}
@media only screen and (min-width: 540px){.pankuzu_frm_bottom{height:70px;}.back_frm{top:-95px;width:95px;height:60px;}}
@media only screen and (min-width: 580px){.pankuzu_frm_bottom{height:75px;}.back_frm{top:-105px;width:100px;height:65px;}}

/* ==========================================
//
//        コンテンツ枠トップ
//
=============================================*/
/*下からニョキっとする場合の枠(mapはおかしくなるので使えない)*/
.cont_top_frm{
	width:calc(100% - 24px);
	padding:5px 5px 100px 5px;
	margin:5px;
	min-height: 700px;
	
}

/*下からニョキっとしない場合の枠*/
.cont_top_frm_noaction{
	width:calc(100% - 24px);
	padding:5px 5px 100px 5px;
	margin:5px;
	min-height: 700px;
}

/*縦幅を指定しない枠*/
.cont_top_frm_noheight{
	width:calc(100% - 24px);
	padding:5px;
	margin:5px;
}


/* ==========================================
//
//        SNS
//
=============================================*/
/*【SNS枠のCSS】*/
.frm_sns_main{width:calc(100% - 10px);font-size:1.6rem;margin-top:23px;}
.frm_sns_cntener{	/*フレーム全体*/
	width:100%;padding:0 0 20px 0;
}

.frm_sns_head{		display:flex;width:100%;}	/*ヘッダー全体*/
.frm_sns_icon{		width:50px;padding:5px;cursor: pointer;}	/*アイコン枠*/
.frm_sns_icon img{	width:40px;height:40px;cursor: pointer;}	/*アイコン*/
.frm_sns_name{
	position: relative;
	width:auto;
	flex-grow: 1;
	display:flex;
	flex-wrap: wrap;
	text-align:left;
	align-items: center;
	justify-content: center;
}
.frm_sns_menu{position: relative;width:50px;text-align:right;color:#999;
font-size:2.2rem;padding:5px 15px 0 0;}


/*メッセージ枠*/
.frm_sns_msg{
	width:100%;margin-bottom:10px;color:#666;
}
/*写真*/
.sns_photos {
	background-size: cover; /* 背景画像を要素の幅と高さに合わせてカバー */
	background-repeat: no-repeat; /* 背景画像のリピートを無効にする */
	background-position: center; /* 背景画像を中央に配置 */
	width:50%;height:130px;
}

.sns_photo1{background-color:#ccc;border-radius: 10px;border: 1px solid #ddd;}
.sns_photo2A{background-color:#ccc;border-radius: 10px 0 0 10px;}
.sns_photo2B{background-color:#ccc;border-radius: 0 10px 10px 0;}
.sns_photo4A{background-color:#ccc;border-radius: 10px 0 0 0;}
.sns_photo4B{background-color:#ddd;border-radius: 0 10px 0 0;}
.sns_photo4C{background-color:#ddd;border-radius: 0 0 0 10px;}
.sns_photo4D{background-color:#ccc;border-radius: 0 0 10px 0;}

.sns_top_bottun{
	width:60%;padding:17px 20px 17px 20px;
	background-color:#0068b7;border-radius: 10px;border: 1px solid #dfdbc7;
}

.kirikae{
	background-color:#ddd;border-radius: 5px;margin:10px;
	padding:6px;flex:1;font-size:1.8rem;border: 2px solid #fff;
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));
}


/* ==========================================
//
//        上にふわふわする三角
//
=============================================*/
.suke_frm_1{display:flex;flex-wrap: wrap;width:100%;margin-top:10px;}
.suke_frm_2{width:calc(50% - 10px);margin:5px;background-color:#fff;
	/*border-radius: 5px;filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));*/
	text-align:center;
}
.suke_icon img{
	border: 1px solid #ef857d;width:calc(100% - 10px);margin:5px;border-radius: 10px;
}

/* ==========================================
//
//        説明ページ
//
=============================================*/
.qa_frm{display:flex;flex-wrap:wrap;width:calc(100% - 10px);padding:10px 5px 5px 5px;font-size:1.5rem;}
.qa_set1{width:15%;}
.qa_set2{width:calc(85% - 10px);text-align:left;padding:5px;}

/* ==========================================
//
//        いいね
//
=============================================*/
/*いいね枠*/
.iine_main_frm{
	width:calc(100% - 20px);color:#666;padding:0 10px 0 10px;
	font-size:1.2rem;
	user-select: none;/*文字列長押しの自動選択が出来ない*/
}
.iine_main_frm .iine_size{font-size:1.6rem;}

/*いいね枠2*/
.iine_main_frm2{
	width:calc(100% - 20px);color:#666;padding:0;
	font-size:1.2rem;
	user-select: none;/*文字列長押しの自動選択が出来ない*/
}
.iine_main_frm2 .iine_size{font-size:1.6rem;}

/* ==========================================
//
//        コンテンツのボタン枠
//
=============================================*/
.kirikae_1{
	width:calc(100% - 2px);text-align:center;font-size:2.2rem;
	color:#fff;margin:0;padding:0;
}
.kirikae_2{
	width:100%;display:flex;padding:0;
}
.kirikae_3{
	background-color:#ddd;border-radius: 5px;margin:5px 5px 0 5px;
	padding:6px;flex:1;font-size:1.8rem;border: 2px solid #fff;
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));
}
.kirikae_3_B{
	background-color:#fff;border-radius: 15px;margin:5px 5px 0 5px;
	padding:6px;flex:1;font-size:1.8rem;border: 1px solid #999;
}

/*セリフ枠(三角)*/
.kirikae_4{}
.kirikae_4::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
}

.kirikae_4::before {
    bottom: -12px; /* 枠線用の位置調整 */
    border-width: 12px 12px 0 12px;
    border-color: #fff transparent transparent transparent; /* 枠線の色 */
}

.kirikae_4::after {
    bottom: -10px; /* 三角形本体の位置調整 */
    border-width: 10px 10px 0 10px;
    border-color: #3c6fcd transparent transparent transparent; /* 三角形本体の色 */
}
/*----------*/
.kirikae_5 {
    position: relative; /* 三角形を適切に配置するために相対位置に設定 */
}

.kirikae_5::before, .kirikae_5::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
}

.kirikae_5::before {
    top: -22px; /* 枠線用の位置調整 */
    border-width: 0 22px 22px 22px; /* 上向き三角形の枠線 */
    border-color: transparent transparent #fff transparent; /* 枠線の色 */
}

.kirikae_5::after {
    top: -20px; /* 三角形本体の位置調整 */
    border-width: 0 20px 20px 20px; /* 上向き三角形本体のサイズ */
    border-color: transparent transparent #3c6fcd transparent; /* 三角形本体の色 */
}

/* ==========================================
//
//        コンテンツ用パンくず
//
=============================================*/
.pankuzu_frm_bottom{
	width:100%;display:flex;padding:0;position: absolute;bottom: 0;
	background-color:#efecdb;position:fixed;bottom:0;text-align:center;
}
.pankuzu_item_bottom{
	border-right: 1px solid #d9d5bd;padding:0;
}

.pankuzu_item_text{
	background-color:#666;border-radius: 5px;margin:10px;
	padding:6px;flex:1;font-size:1.6rem;border: 2px solid #fff;
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));
	color:#eee;
}

.pankuzu_item_home{
	background-color:#c82c55;border-radius: 5px;margin:10px;
	padding:6px;flex:1;font-size:1.6rem;border: 2px solid #fff;
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));
	color:#eee;
}


/* ==========================================
//
//        便利
//
=============================================*/
/*画像を並べる*/
.sample_photo_S2 {display: grid;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));grid-gap: 10px;}
.sample_photo_S2 img {background-color:#aeaeae;width: 100%;}

/*上下中央揃え*/
.textcenter {
	display:flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size:2.0rem;
	text-align:center;
}

/*セリフの三角(左)*/
.serifu_arrow {
	position: absolute;
	top:35px;
	left:-10px;
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-right: 12px solid #e1e0b3;
}


.anline {
	background:linear-gradient(transparent 60%, #f1ecde 60%);
}

/*戻るボタン*/
.button_frm{text-align: center;padding:5px;}
.butoon_style{
	background-color: #b6dde3;
	cursor: pointer;
	border-radius: 10px;
	margin: 0px 3px 0px 3px;
	font-size: 2.0rem;
	padding: 6px 15px 6px 15px;
	color: #0a5382;
}

/*マイアバターアイコン用*/
.my_av_icon {

	border-radius: 50%; /* 画像を丸くする */
	overflow: hidden; /* 丸くした画像がはみ出さないようにする */
	/*border: 2px solid #c86c46;*/
	cursor: pointer;
}

/*アバターアイコン用丸*/
.rounded-image {
	border-radius: 50%; /* 画像を丸くする */
	overflow: hidden; /* 丸くした画像がはみ出さないようにする */
	border: 2px solid #c86c46;
	background-color: #999;
	cursor: pointer;
}

/*いいねアバターアイコン用丸*/
.rounded-image2 {
	border-radius: 50%; /* 画像を丸くする */
	overflow: hidden; /* 丸くした画像がはみ出さないようにする */
	border: 2px solid #c86c46;
	background-color: #999;
	width:40px;left:40px;
	margin:3px;
	cursor: pointer;
}

/*いいねコミュニティアイコン用丸*/
.rounded-image3 {
	border-radius: 10px; /* 画像を丸くする */
	overflow: hidden; /* 丸くした画像がはみ出さないようにする */
	/*border: 2px solid #c86c46;*/
	border: 2px solid #000;
	background-color: #fff;
	width:40px;left:40px;
	margin:3px;
	cursor: pointer;
}

/*いいねお店アイコン用丸*/
.rounded-image4 {
	border-radius: 10px; /* 画像を丸くする */
	overflow: hidden; /* 丸くした画像がはみ出さないようにする */
	border: 2px solid #008000;
	background-color: #999;
	width:40px;left:40px;
	margin:3px;
	cursor: pointer;
}

/*ヘッダー右側アイコン用*/
.my_takara_icon {
	border-radius:50%;
	overflow: hidden; /* 丸くした画像がはみ出さないようにする */
	cursor: pointer;
}

/* ==========================================
//
// 共有ポップアップ用
//
=============================================*/
.detail_popup_frm{overflow-y: scroll;display:none;position:fixed;top:0;width:100%;height:100%;background-color: rgba(0, 0, 0, 0.5);}
.detail_popup_2{min-height: 500px;width:calc(100% - 6px);transition: transform 0.3s ease;transform: translateY(100%);opacity: 0;border: 3px solid #30a0f0;position: absolute;top:540px;display:none;margin:0;padding:0;padding-bottom:200px;background-color:#fff;border-radius: 20px;}
.detail_popup_3{width:calc(100% - 20px);padding:10px;}
.detail_popup_4{width:30%;border-radius: 15px;background-color:#bbb;padding:3px;margin-bottom:10px;}
.dpop_close_button{font-size:4.2rem;position:absolute;top:-30px;right:10px;cursor: pointer;color:#1b6295;background-color: #fff;border-radius: 50%;width: 60px;height: 60px;border-top: 3px solid #30a0f0;}


/* ==========================================
//
// 共有サブポップアップ用
//
=============================================*/
[class*="subpop_overlay"] {
	display: none;
	position: fixed;
	top: -100px;
	/*left:0;*/
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 20;
	max-width: 600px;
	min-height:1200px;
	margin: 0px auto;
}
[class*="subpop_frm"] {
	display: none;max-width: 500px;
	position:fixed;top:50%;left:50%;transform: translate(-50%, -50%);
	width:80%;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	background-color:#fff;border: 2px solid #416a8e;border-radius: 10px;
	padding:10px;font-size:2.0rem;
}
.subpop_cancel{border-radius:10px;background-color:#999;padding:10px 20px;margin-right:5px;cursor: pointer;}
.subpop_ok{border-radius:10px;background-color:#fff;padding:10px 20px;margin-right:5px;cursor: pointer;}
.subpop_buttons{width:100%;margin-top:15px;}

/* ==========================================
//
// ローディングマークのスタイル
//
=============================================*/
#loadingOverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 24px;
}

/* ==========================================
//
// 管理メニューボタン
//
=============================================*/
.top_sns_add_button{position:fixed;bottom:140px;width:100%;background-color:#999;}
.sns_add_button{
	position: absolute;right:5px;background-color:#333;border-radius: 50%;color:#fff;
	padding:1px;border: 2px solid #fff;width:55px;height:55px;font-size:2.4rem;cursor: pointer;
	filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.6));}
@media only screen and (min-width: 460px){.top_sns_add_button{bottom:150px;}}
@media only screen and (min-width: 500px){.top_sns_add_button{bottom:160px;}}
@media only screen and (min-width: 540px){.top_sns_add_button{bottom:170px;}}
@media only screen and (min-width: 580px){.top_sns_add_button{bottom:180px;}}

/* ==========================================
//
// いいね選択枠
//
=============================================*/
.iine_select_frm{display:none;}
.iine_select_frm3{display:flex;flex-wrap: wrap;justify-content: left;font-size:2.1rem;}
.iine_select_frm3 div {padding:7px;text-align: center;cursor: pointer;}
/**/
.iine_fast_icon{position: relative;top:-10px;text-align:right;font-size:2.8rem;margin-left:10px;cursor: pointer;}
.comiine_fast_icon{position: relative;top:-10px;text-align:right;font-size:2.8rem;cursor: pointer;}
.iine_select{}

/* ==========================================
//
//        キラキラエフェクト
//
=============================================*/
.img-wrapper {
	position: relative;
	display: inline-block;
}

.img-wrapper img {
	display: block;
	width: 200px;
	height: auto;
}

.sparkle {
	position: absolute;
	width: 8px;
	height: 12px;
	background-color: yellow;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	opacity: 0;
	animation: sparkle 2.0s infinite;
}

.sparkle.top-left {
	top: -5px;
	left: -5px;
	animation-delay: 0s;
}

.sparkle.bottom-right {
	bottom: -5px;
	right: -5px;
	animation-delay: 0.75s;
}

@keyframes sparkle {
	0%, 100% {
		transform: scale(0.5);
		opacity: 0;
	}
	50% {
		transform: scale(1.5);
		opacity: 1;
	}
}

/* ==========================================
//
//        leaflet
//
=============================================*/
/*leafletレイヤー調整*/
.leaflet-tile-pane       { z-index: 200; } /* タイルレイヤー */
.leaflet-overlay-pane    { z-index: 400; } /* オーバーレイレイヤー */
.leaflet-shadow-pane     { z-index: 500; } /* 影レイヤー */
.leaflet-marker-pane     { z-index: 600; } /* マーカーレイヤー */
.leaflet-tooltip-pane    { z-index: 650; } /* ツールチップレイヤー */
.leaflet-popup-pane      { z-index: 700; } /* ポップアップレイヤー */
.leaflet-pane            { z-index: 400; } /* ベース */
.leaflet-map-pane canvas { z-index: 100; } /* 隠し */
.leaflet-map-pane svg    { z-index: 200; } /* 隠し */

/*共通フォントサイズ*/
.font1{font-size:2.6rem;}	/*最大*/
.font2{font-size:2.4rem;}	/**/
.font3{font-size:2.2rem;}	/**/
.font4{font-size:2.0rem;}	/**/
.font5{font-size:1.8rem;}	/**/
.font6{font-size:1.6rem;}	/**/
.font7{font-size:1.4rem;}	/**/
.font8{font-size:1.2rem;}	/**/
.font9{font-size:1.0rem;}	/*最小*/

/*共通カラー*/
.colA1{color:#ffffff;}.colA2{color:#ffffff;}.colA3{color:#ffffff;}	/*赤*/
.colB1{color:#ffffff;}.colB2{color:#ffffff;}.colB3{color:#ffffff;}	/*青*/
.colC1{color:#ffffff;}.colC2{color:#ffffff;}.colC3{color:#ffffff;}	/*黄色*/
.colD1{color:#ffffff;}.colD2{color:#ffffff;}.colD3{color:#ffffff;}	/**/
.colE1{color:#ffffff;}.colE2{color:#ffffff;}.colE3{color:#ffffff;}	/**/
.colF1{color:#ffffff;}.colF2{color:#ffffff;}.colF3{color:#ffffff;}	/**/

/*マーカーポップアップ*/
.leaflet-popup-content {
    font-size: 2.2rem; /* フォントサイズを変更 */
    padding: 2px; /* 内側の余白を設定 */
}
.leaflet-popup-tip-container {
	display: none; /* 吹き出しの先端（三角形）を非表示にする */
}
/* ポップアップの内部パディングを調整 */
.leaflet-popup-content-wrapper {
    padding: 3px; /* お好みのパディング値に変更 */
}

/* ポップアップのボーダーを消す */
.leaflet-popup {
    border: none !important;
}

.leaflet-popup-content-wrapper {
    border: none !important;
}

.leaflet-popup-tip {
    border: none !important;
    background: none !important; /* ティップの背景も消す場合 */
}

.leaflet-container {
	font-size:1.2rem;	/*フォントサイズ*/
}
.leaflet-tooltip {
	background-color: rgb(234 240 243) !important;
	border: 2px solid #000 !important;
	opacity: 1 !important;
	box-shadow: none !important;
}

.leaflet-tooltip-bottom{font-size: 1.4rem;text-align: center;display: inline-block;}

.leaflet-shadow-pane {
	display: none !important;
}

.custom-linekm{
	/*background: none !important;*/
	border: none !important;
	color: blue !important;
	font-size: 2.0rem !important;
	font-weight: bold;
}

/* ==========================================
//
//  戻る・進む・キャンセル・確認・これでOK
//
=============================================*/
.formBack{width:30%;border-radius:15px;background-color:#135e95;color:#fff;border: 2px solid #222;padding:10px 20px;cursor: pointer;margin-right:5px;}
.formNext{width:30%;border-radius:15px;background-color:#629513;color:#fff;border: 2px solid #222;padding:10px 20px;cursor: pointer;}
.formNg{border-radius:15px;background-color:#fff;border: 2px solid #0084e5;padding:10px 20px;margin-right:5px;cursor: pointer;color:#0084e5;}
.formOk{border-radius:15px;background-color:#fdecec;border: 2px solid #e52c00;padding:10px 20px;margin-left:5px;cursor: pointer;color:#e52c00;}

/* ==========================================
//
//  クリック星エフェクト
//
=============================================*/
.star {
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: gold;
	border-radius: 50%;
	pointer-events: none;
	opacity: 1;
	transition: transform 1s ease-out, opacity 1s ease-out;
}

/* ==========================================
//
//  文字大小エフェクト
//
=============================================*/
.animated-text {
	position: absolute; /* 独立して配置 */
	top: 50%; /* 垂直方向でセンター */
	transform: translateY(-50%); /* 完全に中央揃え */
}
/* 動く矢印 */
.animated-text {
	position: absolute; /* 独立して配置 */
	margin-left: 0.8rem; /* 「>>」と「リアルタイム写真」の間に余白 */
	top: 50%; /* 垂直方向でセンター */
	transform: translateY(-50%); /* 完全に中央揃え */
	animation: sway 5s ease-in-out infinite; /* 揺れるアニメーション */
}

/* 左右に揺れるアニメーション */
@keyframes sway {
	0%, 100% {
		transform: translateX(0) translateY(-50%); /* 元の位置 */
	}
	25% {
		transform: translateX(-3px) translateY(-50%); /* 左に揺れる */
	}
	50% {
		transform: translateX(3px) translateY(-50%); /* 右に揺れる */
	}
	75% {
		transform: translateX(-3px) translateY(-50%); /* 左に揺れる */
	}
}

/* 上下ギザギザ枠 */
.zigzag {
	clip-path: polygon(
	/* 上部ギザギザ (20個) */
	0% 10%, 5% 0%, 10% 10%, 15% 0%, 20% 10%, 25% 0%, 
	30% 10%, 35% 0%, 40% 10%, 45% 0%, 50% 10%, 55% 0%, 
	60% 10%, 65% 0%, 70% 10%, 75% 0%, 80% 10%, 85% 0%, 
	90% 10%, 95% 0%, 100% 10%,

	/* 右側 */
	100% 10%, 100% 90%,

	/* 下部ギザギザ (20個逆向き) */
	100% 90%, 95% 100%, 90% 90%, 85% 100%, 80% 90%, 75% 100%, 
	70% 90%, 65% 100%, 60% 90%, 55% 100%, 50% 90%, 45% 100%, 
	40% 90%, 35% 100%, 30% 90%, 25% 100%, 20% 90%, 15% 100%, 
	10% 90%, 5% 100%, 0% 90%,

	/* 左側 */
	0% 90%, 0% 10%
	);
}

/* 上下ふわふわ仕切り */
.cstm-wave-top-bottom {
  --mask:
    radial-gradient(33.6px at 50% 47px, #000 99%, #0000 101%) calc(50% - 40px) 0/80px 51% repeat-x,
    radial-gradient(33.6px at 50% -27px, #0000 99%, #000 101%) 50% 20px/80px calc(51% - 20px) repeat-x,
    radial-gradient(33.6px at 50% calc(100% - 47px), #000 99%, #0000 101%) calc(50% - 40px) 100%/80px 51% repeat-x,
    radial-gradient(33.6px at 50% calc(100% + 27px), #0000 99%, #000 101%) 50% calc(100% - 20px)/80px calc(51% - 20px) repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);

  @media (max-width: 1023px) {
    --mask:
      radial-gradient(30.24px at 50% 42.3px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 51% repeat-x,
      radial-gradient(30.24px at 50% -24.3px, #0000 99%, #000 101%) 50% 18px/72px calc(51% - 18px) repeat-x,
      radial-gradient(30.24px at 50% calc(100% - 42.3px), #000 99%, #0000 101%) calc(50% - 36px) 100%/72px 51% repeat-x,
      radial-gradient(30.24px at 50% calc(100% + 24.3px), #0000 99%, #000 101%) 50% calc(100% - 18px)/72px calc(51% - 18px) repeat-x;

    @media (max-height: 500px) {
      --mask:
        radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 51% repeat-x,
        radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px calc(51% - 10px) repeat-x,
        radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 100%/40px 51% repeat-x,
        radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px calc(51% - 10px) repeat-x;
    }
  }

  @media (max-width: 480px) {
    --mask:
      radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 51% repeat-x,
      radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px calc(51% - 10px) repeat-x,
      radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 100%/40px 51% repeat-x,
      radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px calc(51% - 10px) repeat-x;
  }
}

/* タップするとボタン小さく */
.push_action {
	user-select: none;
	transition: transform 0.1s ease;
}
.push_action:active {
	transform: scale(0.9);
}






