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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

body { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size:clamp(14px, calc(10.434782608695652px + 0.43478260869565216vw), 16px); /*font-size:16px;*/ line-height: 1.6em; color: #333; transition: 0.3s; }

/* コンテンツが少ない場合のフッター位置対策 */
.wrapper { min-height: 100vh; display: flex; flex-direction: column; transition: 0.3s; }
.main { flex: 1 1 auto; transition: 0.3s; }



h2 { padding: 15px; max-width: 1280px; margin: 0 auto; }
.icon_search { background: url('../images/icon_search.png') left 5px center no-repeat; background-size: 32px; padding-left: 42px; }


/* エリアページタイトル */
div.title_wrap { max-width: 1280px; margin: 0 auto; padding: 15px 15px 0 15px; }
div.title_wrap h2.area_title { background: url('../images/pin-area.png') left 5px center no-repeat; background-size: 32px; padding: 15px 15px 15px 42px; }
div.title_wrap h2.area_title span { font-size: 80%; display: inline-block; }
div.title_wrap p { border-top: 1px solid #333; padding: 10px 10px 0 10px; }
@media screen and (max-width:767px) {
div.title_wrap { padding: 10px 10px 0 10px; }
div.title_wrap h2.area_title { padding: 10px 10px 10px 42px; }
div.title_wrap p { padding: 10px 10px 0 10px; }
}




div.header_top { max-width: 100%; height: 72px; background: linear-gradient(0.25turn ,#5EACFC ,#87B6F1); border-radius: 0 0 32px 0; }
div.head_top_wrapper { max-width: 1440px; height: 72px; margin: 0 auto; padding: 0 0 0 56px; align-items: center; display: flex; background: url(../images/iki_icon.png) left center no-repeat; background-size: 56px; }
div.head_top_wrapper p a { text-shadow: 0 0 6px rgba(7,34,128,1.0); }


/* ==========================================================================
地図エリアのスタイル
========================================================================== */

.content_wrapper { display: flex; max-width: 1280px; margin: 0 auto 40px auto; padding: 10px; box-sizing: border-box; }
	  
.map-wrapper {
width: 50%;
padding: 10px;
box-sizing: border-box;
/*display: flex;
flex: 0 0 auto;*/
}

.map-inner {
position: sticky; top:10px;
}

/* 地図全体のコンテナ */
.map-container {
position: relative;
display: inline-block; /* 画像のサイズに合わせる */
width: 100%;
border: 1px solid #333;
border-radius: 15px;
overflow: hidden;
}

.map-ex { }
.map-ex ul { }
.map-ex ul li { font-size: 80%; display: inline-block; margin-right: 8px; }
.map-ex span.detail-pin {
width: 18px;
height: 18px;
background-size: 18px;
}

/* 地図画像 */
.map-image {
display: block;
width: 100%;
height: auto;
}

/* ピンの共通スタイル */
.map-pin {
position: absolute;
width: 36px;  /* ピン画像の横幅 */
height: 36px; /* ピン画像の縦幅 */
background-color: transparent; 
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: none;
cursor: pointer;
color: #fff;
padding: 9px 0 0 0;
font-size: 14px;
line-height:1.4em;

/* ピンの「中心・下端」が指定座標（top, left）に重なるように調整 */
transform: translate(-50%, -100%);
transition: transform 0.2s ease, filter 0.2s ease;
z-index: 10;
}

.area-pin {
width: 48px;  /* ピン画像の横幅 */
}

/* ホバー時の演出（少し大きくなって影がつく） */
.map-pin:hover {
transform: translate(-50%, -100%) scale(1.3);
filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3));
z-index: 11; /* ホバーしたピンを一番上にする */
}

/* ホバー時の演出（少し大きくなって影がつく） */
.area-pin:hover {
transform: translate(-50%, -100%) scale(1.3);
filter: drop-shadow(0 0 8px rgba(255,255,255,1.0));
z-index: 11; /* ホバーしたピンを一番上にする */
}



    
/* バス停のピン */
.pin-busstop {
background-image: url('../images/pin-busstop.png');
z-index: 11 !important
}
/* スポットのピン */
.pin-spot {
background-image: url('../images/pin-spot.png'); 
}
/* 掲載のピン */
.pin-publish {
background-image: url('../images/pin-publish.png');
}

/* 飲食店のピン */
.pin-eat {
background-image: url('../images/pin-eat.png');
}
/* ホテルのピン */
.pin-hotel {
background-image: url('../images/pin-hotel.png');
}
/* 観光スポットのピン */
.pin-sights {
background-image: url('../images/pin-sights.png');
}
/* 神社のピン */
.pin-shrine {
background-image: url('../images/pin-shrine.png');
}
/* 観光案内所のピン */
.pin-info {
background-image: url('../images/pin-info.png');
}
/* お土産店のピン */
.pin-souvenir {
background-image: url('../images/pin-souvenir.png');
}


/* トップページ エリアのピン */
.pin-area {
background-image: url('../images/pin-area.png');
}
/* トップページ エリアのピン（文字） */
.area_icon {
color: #000;
font-size: 12px;
padding: 32px 0 0 0;
background-size: 36px;
}

/* ==========================================================================
一覧表エリアのスタイル
========================================================================== */
.list-wrapper {
width: 50%;
padding: 10px;
box-sizing: border-box;
}

.spot-list {
list-style: none;
padding: 0;
margin: 0;
}

.spot-list a {
text-decoration: none;
color: #000;
}
	
.spot-list li {
background-color: #fff;
margin-bottom: 10px;
border: 1px solid #333;
border-radius: 15px;
transition: all 0.3s ease;

 /* スクロール時に画面下から80px浮くように余白を設定 */
scroll-margin-bottom: 100px; 
}


/* ピンの共通スタイル */
.detail-pin_busstop {
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
color: #fff;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.detail-pin {
display: inline-block;
color: #fff;
padding: 0 4px 0 28px;
border-radius: 5px;
margin-right: 5px;
}
.icon-sights {
background-image: url(../images/icon_sights.png);
background-position: left center;
background-repeat: no-repeat;
background-size: 24px;
background-color: #009245;
}
.icon-hotel {
background-image: url(../images/icon_hotel.png);
background-position: left center;
background-repeat: no-repeat;
background-size: 24px;
background-color: #754c24;
}
.icon-eat {
background-image: url(../images/icon_eat.png);
background-position: left center;
background-repeat: no-repeat;
background-size: 24px;
background-color: #f15a24;
}
.icon-shrine {
background-image: url(../images/icon_shrine.png);
background-position: left center;
background-repeat: no-repeat;
background-size: 24px;
background-color: #662d91;
}
.icon-info {
background-image: url(../images/icon_info.png);
background-position: left center;
background-repeat: no-repeat;
background-size: 24px;
background-color: #0071bc;
}
.icon-souvenir {
background-image: url(../images/icon-souvenir.png);
background-position: left center;
background-repeat: no-repeat;
background-size: 24px;
background-color: #fbb03b;
}

.icon_keisai { width:24px; height: 24px; padding: 2px 4px; }

.detail-pin-publish {
background-size: 16px;
}

/* --------------------------------------------------------------------------
ピンがクリックされてアクティブになった時のスタイル
------------------------------------------------================---------- */
.spot-list li.is-active {
background-color: #fff9db; /* 薄い黄色ハイライト */
/*border-color: #f59f00;      枠線をオレンジに */
/*font-weight: bold;*/
/*transform: translateX(8px);  少し右に飛び出させる */
/*box-shadow: 0 4px 10px rgba(245, 159, 0, 0.15);*/
}
.area_list {
background: url(../images/pin-area.png) left 8px center no-repeat;
background-size: 32px;
padding-left: 32px
}
.area_list div {
background: url(../images/icon-arrow.png) right 16px center no-repeat;
background-size: 20px;
min-width: 100%;
transition: 0.3s;
}
.area_list div:hover {
background: url(../images/icon-arrow.png) right 8px center no-repeat;
background-size: 20px;
transition: 0.3s;
}
.spot-link {
color: #007aff;
text-decoration: none;
display: inline-block;
margin-top: 5px;
}
.spot-link:hover {
text-decoration: underline;
}

.spot_name { font-size:110%; font-weight: bold; line-height: 1.4em; }
.area_name { font-size:120%; font-weight: bold; display: inline-block; min-width: 200px; line-height: 1.4em; }
.spot_address { font-size:80%; display: block; line-height: 1.4em; }
.spot_tag { font-size: 70%; border: 1px solid #1887FF; color: #1887FF; background: #fff; border-radius: 15px; min-width: 36px; padding: 0 8px; display: inline-block; text-align: center; line-height: 1.6em; }

/* トップページ　エリア用のスタイル　
.area_cont_top { display:flex; background: url(../images/icon-arrow.png) right 8px center no-repeat; background-size: 20px; }
.area_cont_top div:nth-child(1) { padding: 15px; }*/


.spot_ph { display: inline-block; width: 100%; height: 90px; border-radius: 10px; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.spot_cont_top { display:flex; }
.spot_cont_top div:nth-child(1) { width: 64%; padding: 15px; }
.spot_cont_top div:nth-child(2) { width: 36%; padding: 15px; text-align: right; }

/* 掲載区分 
.kubun_keisai div:nth-child(1) { width: 100%; }*/

.spot_info_box { background: rgba(0,0,0,0.05); padding: 5px 10px 10px 10px; border-radius: 0 0 15px 15px; width: 100%; }


.visit-btn { background-color: #ec5751; padding: 5px 25px; border-radius: 10px; text-decoration: none; color: #fff; border-bottom: 3px solid #a03838; float: right; margin: 3px 0 0 0; }

.bt_info { font-size: 90%; background-color: #c7e7f9; padding: 4px 15px 4px 27px; border-radius: 10px; background-image: url(../images/bt_info.png); background-size: 16px; background-position: left 7px center; text-decoration: none; margin-right: 2px; }
.bt_info:hover { background-color: #8cd4f4; text-decoration: none; }

.bt_spot { font-size: 90%; background-color: #c7e7f9; padding: 4px 15px 4px 25px; border-radius: 10px; background-image: url(../images/pin-publish.png); background-size: 17px; background-position: left 7px center; text-decoration: none; margin-right: 2px; }
.bt_spot:hover { background-color: #8cd4f4; text-decoration: none; }
	
/* トップページ 
.top_map { width: 50%; }
.top_list { width: 50%; }*/




/* ページトップ 
div#pagetop { text-align: center; }
div#pagetop a { display: inline-block; text-decoration: none; color: #000; background: url("../images/icon-arrow_top.png") left 8px center no-repeat; background-size: 20px; padding: 5px 12px 5px 34px; margin: 5px; border: 1px solid #333; border-radius: 25px; font-size: 14px; background-color: #fff; }
div#pagetop:hover {}*/

/* ページトップ */
div#pagetop { position:fixed; right:49%; width:40px; height:40px; border-radius:20px; background:rgba(0,0,0,0.4); z-index: 10; }
div#pagetop a { display:block; width:40px; height:40px; background:url(../images/icon_top.png) center center no-repeat; background-size:24px; }
div#pagetop:hover { background:rgba(0,0,0,0.6); }
@media (max-width:767px) {
div#pagetop { position:fixed; right:44%; width:32px; height:32px; border-radius:16px; background:rgba(0,0,0,0.4); }
div#pagetop a { display:block; width:32px; height:32px; background:url(../images/icon_top.png) center center no-repeat; background-size:20px; }
div#pagetop:hover { background:rgba(0,0,0,0.6); }
}


/* AIコンシェルジュ */
.aic_bt { text-decoration: none; display: block; position: fixed; z-index: 1000; text-align: center; width: 80px; height: 80px; border-radius: 40px; bottom:32px; right:16px; box-shadow: 0 3px 9px rgba(0,0,0,0.3); border: 1px solid #000; background-image: url("../images/aic_icon.jpg"); background-position: center center; background-size: cover; }

.aic_bt span { background-color: #0071BC; color:#fff; text-decoration: none; display: block; margin: 72px 0 0 0; text-align: center; border-radius: 10px; line-height: 1.0em; font-size: 12px; padding: 3px; box-shadow: 0 3px 9px rgba(0,0,0,0.3); }

@media screen and (max-width:767px) {
.aic_bt { width: 56px; height: 56px; border-radius: 28px; bottom: 16px; right: 6px; background-size: 56px; }
.aic_bt span { margin: 48px 0 0 0; border-radius: 10px; line-height: 1.0em; font-size: 10px; }
}



.footer { background: #009C37; padding: 0 10px; }
.copyright { max-width: 1280px; margin: 0 auto; padding: 10px 10px 10px; font-size:clamp(12px, calc(10.995305164319248px + 0.2347417840375587vw), 14px)/*14px*/; text-align: center; color: #fff; }


/* 壱岐交通バナー */
.freepass_bn { display: block; width:80%; min-height: 32px; background:url(../images/IMG_8665_002.jpg) center center no-repeat; background-size: cover;border: 1px solid #333; margin: 10px auto 25px; text-align: center; text-decoration: none; padding: 10px; color: #fff; font-size: 130%; text-shadow: 0 0 5px rgba(7,34,128,1.0); font-weight: 400; }

.freepass_bn span { background: #fff; display: inline-block; color: #000; font-size: 10px; padding: 0 10px; border-radius: 15px; text-shadow:none; line-height: 1.8em; }
@media screen and (max-width:767px) {
.freepass_bn { width:90%; margin: 10px auto 25px; padding: 10px; font-size: 125%; }
}



@media screen and (max-width:767px) {
div.header_top { height: 56px; border-radius: 0 0 24px 0; }
div.head_top_wrapper { height: 56px; padding: 0 0 0 44px; background-size: 42px; }	
	
.top_map { width: 100%; }
.top_list { width: 100%; }

.content_wrapper { display: block; }
.map-wrapper { width: 100%; padding: 0; }
.list-wrapper { width: 100%; padding: 0; }
	
.map-container {
/*position: relative;*/
/*top:0;*/
border-radius: 10px;
}

.spot-list li { border-radius: 10px; margin-bottom: 5px; }
.spot_ph { height: 80px; }
.spot_info_box { border-radius: 0 0 10px 10px; }

.spot_cont_top div:nth-child(1) { padding: 10px; }
.spot_cont_top div:nth-child(2) { padding: 10px; }
	
/* ピンの共通スタイル */
.map-pin {
width: 30px;
height: 30px;
font-size: 12px;
}
.area-pin {
width: 40px;
}
/* エリアのピン（文字） */
.area_icon {
font-size: 10px;
padding: 24px 0 0 0;
background-size: 30px;
}
/* スポットのピン */
.pin-eat,.pin-hotel,.pin-sights,.pin-shrine,.pin-info,.pin-souvenir
{ padding: 8px 0 0 0; }

}





/* エリア選択ボタン */
	.area_wrap { max-width: 1280px; margin: 0 auto; padding: 10px; }
	.area_wrap ul { list-style: none; }
	.area_wrap ul li { display: inline-block; }
	.area_wrap ul li a { text-decoration: none; display: block; border: 1px solid #000; padding: 3px 18px; border-radius: 30px; background: #fff; color: #000; margin: 3px; }
	.area_wrap ul li a:hover { background: #fff9db; }

	.area_wrap ul li.active_bt a { background: #D96563; color: #fff; pointer-events: none; border: 1px solid #fff ; box-shadow: 0 0 3px 3px #EBAFAE; }