@media screen and (max-width: 640px) {
	/**********************************
							構造・共通
	**********************************/

	.pc {
		display: none !important;
	}

	.sp {
		display: block;
	}

	.container {
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
		padding: 0 20px;
	}

	.container2 {
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
		padding: 0 20px;
	}

	/**********************************
						メイン、ヘッダー部分
	**********************************/

	#main_logo {
		padding: 0 20px;
	}

	#main_logo img {
		max-width: 100%;
	}

	.main_copy_title {
		font-size: 2.4rem;
	}

	.main_copy {
		padding: 0 10px;
		font-size: 1.4rem;
	}

	article section .container {
		display: block;
		padding: 70px 20px 85px 20px;
		position: relative;
	}

	article section .container2 {
		display: block;
		padding: 70px 20px 85px 20px;
		position: relative;
	}

	/**********************************
							イベント情報
	**********************************/

	ul.day_select {
		flex-wrap: wrap;
	}

	ul.day_select li {
		width: calc(100% / 3 - 18px);
	}

	ul.day_select li img {
		max-width: 100% !important;
	}

	.day_title {
		top: -55px;
	}

	.day_title img {
		width: 70%;
		display: block;
		margin: 0 auto;
	}

	.day_detail {
		display: block;
		min-height: auto;
		width: 100%;
		background: url("../images/day_border_sp.png") no-repeat;
		background-position: top center;
		background-size: 100% 100%;
		padding: 90px 35px 35px 35px;
		position: relative;
	}

	.event_name {
		font-size: 2.1rem;
		margin-top: 0;
		margin-bottom: 10px;
	}

	.event_description {
		flex-wrap: wrap;
		gap: 20px;
	}

	.event_description .desc_text {
		flex: 0 0 100%;
	}

	.event_description p {
		width: 100%;
	}

	.event_description p img {
		width: 45%;
		display: block;
		margin: 0 auto;
	}

	.event-info {
		justify-content: center;
	}

	.event-info dt {
		font-size: 1.6rem;
	}

	.event-info dd {
		font-size: 1.6rem;
	}


	/**********************************
							Youtube
	**********************************/
	.movie_colum {
		flex-wrap: wrap;
	}

	.movie_colum .long {
		width: 100% !important;
	}

	.movie_colum .movie_col {
		width: 100%;
	}

	.movie_colum .movie_col img {
		width: initial;
	}

	.responsive_box {
		display: flex;
		gap: 20px;
	}

	.res_col {
		width: 50%;
	}

	.res_col img {
		width: 100% !important;
	}

	/**********************************
	「描いてみんね！長崎」を活用された作品
	**********************************/

	.map {
		display: none !important;
	}

	.map2 {
		display: none !important;
	}

	.sp_map {
		position: relative;
		width: 100%;
	}

	.sp_map2 {
		position: relative;
		width: 100%;
	}

	.sp_map img {
		width: 100%;
		height: auto;
		display: block;
		background: #fff;
	}

	.sp_map map {
		position: relative;
		z-index: 99;
	}

	.sp_map2 img {
		width: 100%;
		height: auto;
		display: block;
	}

	.sp_map2 map {
		position: relative;
		z-index: 99;
	}


	/* 透明なリンクボタンの共通設定 */
	.map-link {
		position: absolute;
		width: 8%;
		height: 8%;
	}

	/* 個別の位置指定（％で指定するので、画像が縮んでもズレません） */
	.link-01 {
		top: 31%;
		left: 4%;
	}

	.link-02 {
		top: 8%;
		left: 28%;
	}

	.link-03 {
		top: 8%;
		right: 29%;
	}

	.link-04 {
		top: 21%;
		left: 50%;
	}

	.link-05 {
		top: 29%;
		right: 34%;
	}

	.link-06 {
		top: 38%;
		right: 31%;
	}

	.link-07 {
		top: 46%;
		right: 24%;
	}

	.link-08 {
		top: 54%;
		right: 33%;
	}

	.link-09 {
		right: 24%;
		bottom: 17%;
	}

	.link-10 {
		right: 5%;
		bottom: 13%;
	}

	.link-11 {
		right: 5%;
		bottom: 5%;
	}

	.link-12 {
		bottom: 8%;
		left: 8%;
	}

	.link-13 {
		bottom: 35%;
		left: 27%;
	}

	.link-14 {
		top: 59%;
		right: 17%;
	}

	.link-15 {
		top: 32%;
		left: 29%;
	}

	#work .main_copy_title {
		font-size: 2rem;
	}

}

@media screen and (min-width: 641px) {

	.sp {
		display: none !important;
	}

	.pc {
		display: block;
	}

	/**********************************
	「描いてみんね！長崎」を活用された作品
	**********************************/
	.sp_map {
		display: none !important;
	}

	.sp_map2 {
		display: none !important;
	}
}

/* ==========================================================================
   【タブレット用（760px 〜 1150px）】はみ出し・余白・アニメーション完全対策
   ========================================================================== */
@media screen and (min-width: 760px) and (max-width: 1150px) {
	.popup-content {
		/* ★【修正】display: none を廃止し、位置を画面外に飛ばして余白を完全にカット */
		display: block !important;
		position: absolute;
		top: -9999px !important;
		/* 非表示時は遥か上に飛ばして体積を消す */
		left: 0;
		right: auto !important;

		width: 350px !important;
		max-width: calc(100vw - 40px) !important;

		/* 初期状態の透明度と縮小（PC側で設定された transition がこれで正しく連動します） */
		opacity: 0;
		visibility: hidden;
		transform: scale(0);
		transform-origin: top center;
	}

	/* タブレット幅に合わせた各コンテンツの横幅・折り返し調整 */
	.map .long-content {
		width: 700px !important;
		max-width: calc(100vw - 40px) !important;
	}

	.map .long-content2 {
		width: 720px !important;
		max-width: calc(100vw - 40px) !important;
	}

	/* long-content2 の中身（カード群）を自動で折り返させる設定 */
	.map .long-content2,
	.map .long-content2>div,
	.map .long-content2 form {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 15px !important;
		justify-content: center !important;
	}

	/* 中のカード1枚1枚が潰れないように最低幅を確保 */
	.map .long-content2 .popup-content img,
	.map .long-content2>*>* {
		min-width: 320px !important;
		flex: 1 1 320px !important;
	}

	/* ★【重要】ホバーした時だけ正しい位置（top: 24px）に戻してフワッと広げる */
	.map-item:hover .popup-content {
		top: 24px !important;
		/* ピンの下の正しい位置に戻す */
		opacity: 1;
		visibility: visible;
		transform: scale(1);
		pointer-events: auto;
	}



}

@media screen and (min-width: 1150px) and (max-width: 1600px) {

	/* ホバー時にフワッと開く指定 */
	.map-item:hover .popup-content {
		opacity: 1;
		visibility: visible;
		transform: scale(1);
		pointer-events: auto;
	}

	/* あなたが調整してくれた幅の指定 */
	.map .long-content2 {
		width: 900px !important;
	}

	.map .long-content {
		width: 600px !important;
	}
}