@charset "utf-8";

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 Body
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
body {
	position: relative;
	overflow: hidden;
	font-size: 100%;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	-webkit-overflow-scrolling: touch;
	-webkit-text-size-adjust: none;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	opacity: 1;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
}
.pc {
	display: none!important;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 Header
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
header {
	position: fixed;
    width: 100%;
	height: 80px;
	display: flex;
		justify-content: flex-start;
        align-content: center;
		align-items: center;
    z-index: 10000;
    background: #fff;
}
header a.headerLogo {
	position: absolute;
    width: 30%;
    height: 50px;
	top: 15px;
    left: 20px;
	display: block;
    z-index: 20000;
    background: url("../images/logo.png") no-repeat left center;
    background-size: contain;
    transition: all 0.2s ease;
}

/* SNSメニュー */
header ul.snsMenu {
	position: absolute;
    width: auto;
	height: 30px;
    top: 25px;
    right: 80px;
	display: flex;
		justify-content: flex-end;
		align-content: center;
		align-items: center;
		/*flex-wrap: wrap;*/
}
header ul.snsMenu li {
	width: 30px;
    height: 30px;
	display: inline-block;
    margin: 0 10px;
}
header ul.snsMenu li a {
	width: 30px;
    height: 30px;
	display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
header ul.snsMenu li a.x {
	background-image: url("../images/mark_x.svg");
}
header ul.snsMenu li a.facebook {
	background-image: url("../images/mark_facebook.svg");
}
header ul.snsMenu li a.instagram {
	background-image: url("../images/mark_instagram.svg");
}
header ul.snsMenu li a.youtube {
	background-image: url("../images/mark_youtube.svg");
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【ヘッダー】グローバルナビ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.openMenu {
	position: fixed;
	width: 100%;
	top: 0;
	right: 0;
}
.btn_nav {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 15px;
	right: 15px;
    border-radius: 30px;
    background: #ed1e79;
}
.open_nav,
.close_nav {
	display: flex;
		justify-content: center;
        align-content: center;
		align-items: center;
	cursor: pointer;
}
.open_nav .line1,
.open_nav .line2,
.open_nav .line3 {
	position: absolute;
	width: 30px;
	height: 1px;
	left: calc(50% - 15px);
    display: block;
	background: #fff;
	transform: rotate(0deg);
    transition: all 200ms;
}
.open_nav .line1 {
	top: 17px;
}
.open_nav .line2,
.close_nav .line2 {
	top: 25px;
}
.open_nav .line3 {
	top: 33px;
}
.close_nav .line1,
.close_nav .line3 {
	position: absolute;
    width: 36px;
	height: 1px;
    top: 25px;
	left: calc(50% - 18px);
    display: block;
	background: #fff;
    transition: all 200ms;
}
.close_nav .line1 {
	transform: rotate(-45deg);
}
.close_nav .line2 {
	display: none;
}
.close_nav .line3 {
	transform: rotate(45deg);
}
.sp_nav_wrap {
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	right: 0;
	display: none;/*表示・非表示*/
	z-index: 10000;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	background: #edf7f9;
	box-sizing: border-box;
}
.sp_nav {
	width: 90%;
	height: auto;
	display: block;
	margin: 80px auto;
}
.sp_nav ul.sp_nav_menu {
	width: 100%;
    display: flex;
		justify-content: flex-start;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
    margin: 0 auto;
}
.sp_nav ul.sp_nav_menu li {
	position: relative;
    width: 100%;
	display: block;
}
.sp_nav ul.sp_nav_menu li+li {
	border-top: solid 1px #ed1e79;
}
.sp_nav ul.sp_nav_menu li a,
.sp_nav ul.sp_nav_menu li p {
	width: 100%;
	display: flex;
		justify-content: flex-start;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
	padding: 30px 0;
    font-size: 1.3em;
	font-weight: 400;
	line-height: 1em;
    box-sizing: border-box;
}
.sp_nav ul.sp_nav_menu li a::after {
	position: absolute;
	content: '';
    width: 20px;
    height: 20px;
	right: 10px;
    display: block;
    background: url("../images/arrow.svg") no-repeat center center;
    background-size: contain;
	filter: invert(76%) sepia(60%) saturate(1106%) hue-rotate(288deg) brightness(92%) contrast(102%);
}
.sp_nav ul.sp_nav_menu li a .heart,
.sp_nav ul.sp_nav_menu li p .heart {
	display: none;
}
.sp_nav ul.sp_nav_menu li div.pullDownMenu {
	width: 100%;
	display: flex;
		justify-content: center;
		align-content: flex-start;
		align-items: flex-start;
		/*flex-wrap: wrap;*/
	margin-bottom: 20px;
	box-sizing: border-box;
}
.sp_nav ul.sp_nav_menu li ul.menuBlock {
	width: 100%;
	display: flex;
		justify-content: space-between;
		align-content: flex-start;
        align-items: flex-start;
		/*flex-wrap: wrap;*/
	margin: 0 auto;
}
.sp_nav ul.sp_nav_menu li ul.menuBlock li {
	width: 25%;
	display: flex;
		justify-content: center;
		align-content: center;
        align-items: center;
		flex-wrap: wrap;
	border: none;
	box-sizing: border-box;
}
.sp_nav ul.sp_nav_menu li ul.menuBlock li:nth-of-type(1) {
	border-left: solid 1px rgba(255,255,255,0.5);
}
.sp_nav ul.sp_nav_menu li ul.menuBlock li img {
	width: 50%;
	aspect-ratio: 1/1;
	display: block;
	object-fit: contain;
	object-position: 50% 50%;
}
.sp_nav ul.sp_nav_menu li ul.menuBlock li a {
	width: 70%;
    height: 40px;
	justify-content: center;
	margin: 0 auto;
	padding: 0 20px 0 0;
	font-size: 1.3em;
	line-height: 1em;
	text-align: center;
	color: #ed1e79;
	border-radius: 25px;
    background: #fff;
	box-sizing: border-box;
}
.sp_nav ul.sp_nav_menu li ul.menuBlock li a.btnDetail::after {
	filter: invert(76%) sepia(60%) saturate(1106%) hue-rotate(288deg) brightness(92%) contrast(102%);
}
.sp_nav ul.sp_nav_menu li ul.menuBlock li a.btnDetail::before {
	background: #ffdce8;
}
.sp_nav ul.sp_nav_menu li ul.menuBlock li a:active {
	opacity: 1;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 Common
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
main {
	position: relative;
	width: 100%;
	display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    margin-top: 80px;
}
.wrap {
    width: 100%;
    display: flex;
		justify-content: space-between;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
    padding: 40px 0;
}
.block {
	position: relative;
    width: 90%;
    display: flex;
		justify-content: space-between;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
    margin: 20px auto;
}
.content {
    position: relative;
    margin: 20px auto;
	padding: 30px 5%;
	border-radius: 20px;
	background: #fff;
	box-sizing: border-box;
}
.reverse {
	flex-direction: row-reverse;
}
.bgc_lightBlue {
	background: #edf7f9;
}

/*ページタイトル*/
.pageTitle {
	position: relative;
	width: 100%;
    height: 240px;
	display: flex;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		/*flex-wrap: wrap;*/
    background: #ed1e79;
}
.pageTitle::before,
.pageTitle::after {
	position: absolute;
	content: '';
	width: 100%;
    height: 30px;
	display: block;
	z-index: 1000;
}
.pageTitle::before {
	top: 0;
    background: url("../images/title_mask_top.svg") no-repeat left 30% center;
	background-size: cover;
}
.pageTitle::after {
	bottom: 0;
    background: url("../images/title_mask_bottom_blue.svg") no-repeat left 30% center;
	background-size: cover;
}
#attraction .pageTitle::after {
	bottom: 0;
    background: url("../images/title_mask_bottom.svg") no-repeat left 30% center;
	background-size: cover;
}
.pageTitle section {
	position: relative;
    height: 240px;
	display: flex;
		justify-content: flex-start;
		align-content: center;
		align-items: center;
	box-sizing: border-box;
}
.pageTitle .name {
	width: 40%;
	padding: 0 5%;
}
.pageTitle .name h2 {
	position: relative;
	width: 100%;
	display: block;
	font-family: a-otf-jun-pro, sans-serif;
	font-size: clamp(2em, 2.4vw, 3.6em);
	line-height: 1.2em;
	color: #fff;
}
.pageTitle .name h2::before {
	position: absolute;
	content: '';
	width: 100px;
	height: 100px;
	top: -35px;
	left: -45px;
	display: block;
	background: url("../images/page_title_heart.svg") no-repeat center center;
	background-size: contain;
	filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(124deg) brightness(95%) contrast(112%);
	opacity: 0.5;
}
.pageTitle .photo {
	width: 60%;
	justify-content: center;
}
.pageTitle .photo img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: 50% 50%;
}
.nameTag {
	width: 90%;
    display: flex;
		justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
	margin: 0 auto;
}
.nameTag img {
	width: 200px;
    height: 200px;
	display: block;
	z-index: 2000;
	margin: -100px 0 20px;
	object-fit: contain;
	object-position: 50% 50%;
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.nameTag .copy_main {
    width: 100%;
	display: block;
	margin-left: 3%;
	font-family: a-otf-jun-pro, sans-serif;
    font-size: clamp(2em, 2.4vw, 2.8em);
	font-weight: 300;
    line-height: 1.6em;
    color: #ed1e79;
}

/*中タイトル*/
.midTitle {
    position: relative;
    width: 100%;
    min-height: 60px;
    display: flex;
        justify-content: flex-start;
		align-content: flex-end;
        align-items: flex-end;
		flex-wrap: wrap;
    margin: 0 0 40px -40px;
    box-sizing: border-box;
}
.midTitle::before {
    position: absolute;
    content: '';
    width: 240px;
    aspect-ratio: 8/3;
    top: 0;
    left: -40px;
    display: block;
    background: url("../images/title_bg.svg") no-repeat center center;
    background-size: contain;
    filter: invert(91%) sepia(16%) saturate(105%) hue-rotate(160deg) brightness(105%) contrast(95%);
}
.midTitle.white::before {
    filter: invert(96%) sepia(2%) saturate(530%) hue-rotate(243deg) brightness(122%) contrast(100%);
}
.midTitle.pink::before {
    filter: invert(76%) sepia(60%) saturate(1106%) hue-rotate(288deg) brightness(92%) contrast(102%);
}
.midTitle img {
    width: auto;
    height: 60px;
    display: inline-block;
    z-index: 1000;
    margin-right: 10px;
}
.tall img {
    height: 80px;
}
.midTitle .name {
    z-index: 1000;
    font-size: 1.4em;
    font-weight: 400;
    line-height: 2.4em;
}
.midTitle.pink .name {
    color: #fff;
}

/*【共通】コピー／リード／テキスト*/
.commonCopy {
	width: 100%;
	display: block;
	margin-bottom: 20px;
	font-family: a-otf-jun-pro, sans-serif;
    font-size: clamp(1.8em, 2vw, 2.4em);
	font-weight: 300;
    line-height: 1.6em;
	text-align: center;
    color: #ed1e79;
}
.commonText {
	width: 100%;
	display: block;
    font-size: 1.6em;
	line-height: 2em;
    text-align: justify;
}
.commonText+.commonText {
	margin-top: 20px;
}

/*【共通】ボタンブロック*/
.btnBlock {
	width: 100%;
    display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
        flex-wrap: wrap;
    margin: 20px 0;
}

/* 背景が左から右に流れるボタン */
a.btnDetail {
	position: relative;
    width: 300px;
    height: 60px;
	display: flex;
		justify-content: center;
        align-content: center;
		align-items: center;
        flex-wrap: wrap;
	padding-right: 10px;
	font-size: 1.4em;
    line-height: 1.2em;
	letter-spacing: 0.05em;
	transition: 0.3s;
	text-align: center;
	color: #fff;
	border-radius: 30px;
	background: #ed1e79;
	box-sizing: border-box;
}
a.btnDetail.white {
	color: #ed1e79;
	background: #fff;
}
a.btnDetail::after {
	position: absolute;
	content: '';
    width: 30px;
    height: 30px;
	right: 10px;
    display: block;
    background: url("../images/arrow.svg") no-repeat center center;
    background-size: 20px 20px;
	filter: invert(100%) sepia(81%) saturate(136%) hue-rotate(13deg) brightness(115%) contrast(102%);
}
a.btnDetail.white::after {
	filter: invert(76%) sepia(60%) saturate(1106%) hue-rotate(288deg) brightness(92%) contrast(102%);
}
a.btnDetail.linkout::after {
    background: url("../images/icon_linkout.svg") no-repeat center center;
    background-size: 20px 20px;
	filter: invert(100%) sepia(81%) saturate(136%) hue-rotate(13deg) brightness(115%) contrast(102%);
}
a.btnDetail.pdf::after {
    right: 15px;
	background: url("../images/icon_pdf.svg") no-repeat center center;
    background-size: 26px 26px;
	filter: invert(100%) sepia(81%) saturate(136%) hue-rotate(13deg) brightness(115%) contrast(102%);
}
a.btnDetail span {
	position: relative;
}
a.btnDetail::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
	transform: scaleX(0);
	transform-origin: right;
	transition: all 0.3s ease;
	transition-property: transform;
	background: #ec80af;
	box-sizing: border-box;
}
a.btnDetail.white::before {
	background: #ffdce8;
}
a.btnDetail:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}

/*テキストリンク（矢印）*/
a.linkArrow,
a.linkBack,
a.linkPDF {
	position: relative;
	width: auto;
	min-height: 30px;
	display: flex;
		justify-content: flex-start;
        align-content: center;
		align-items: center;
	padding-right: 40px;
	font-size: 1.3em;
	line-height: 1em;
	box-sizing: border-box;
}
a.linkBack {
	padding-left: 40px;
}
a.linkArrow:active,
a.linkBack:active,
a.linkPDF:active {
	text-decoration: underline;
	color: #06c;
}
a.linkArrow::before,
a.linkArrow::after,
a.linkBack::before,
a.linkBack::after {
	position: absolute;
	content: '';
    width: 30px;
	aspect-ratio: 1/1;
	left: 0;
    display: block;
}
a.linkArrow::before,
a.linkArrow::after {
	right: 0;
}
a.linkBack::before,
a.linkBack::after {
	left: 0;
}
a.linkArrow::before,
a.linkBack::before {
	border-radius: 15px;
	background: #ed1e79;
}
a.linkBack::after,
a.linkBack::after {
	background: url("../images/arrow.svg") no-repeat center center;
	background-size: 20px 20px;
	filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(171deg) brightness(104%) contrast(101%);
}
a.linkBack::after {
	transform: scaleX(-1);
}

/*テキストリンク（PDF）*/
a.linkPDF::after {
	position: absolute;
	content: '';
    width: 30px;
	aspect-ratio: 1/1;
	right: 0;
    display: block;
	background: url("../images/icon_pdf.svg") no-repeat center center;
	background-size: contain;
	filter: invert(28%) sepia(79%) saturate(3134%) hue-rotate(316deg) brightness(90%) contrast(107%);
}

/*透明オーバーリンク*/
a.coverAll {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
    z-index: 1000;
    border-radius: 10px;
    background: #fff;
    opacity: 0;
    box-sizing: border-box;
    transition: all 200ms;
}
a.coverAll:active {
    opacity: 0.5;
    transition: all 200ms;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【Home】メインビジュアル
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.mainVisual {
	position: relative;
	width: 100%;
    display: flex;
		justify-content: center;
		align-content: flex-start;
		align-items: flex-start;
        flex-wrap: wrap;
}

/*コピー*/
.mainVisual .mainVisual_copy {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
        flex-wrap: wrap;
}
.mainVisual .mainVisual_copy .inner {
	position: relative;
    width: 90%;
    aspect-ratio: 5/1;
    display: flex;
		justify-content: flex-start;
		align-content: center;
		align-items: center;
        flex-wrap: wrap;
    margin: 0 auto;
    padding-left: 16%;
    box-sizing: border-box;
}
.mainVisual .mainVisual_copy img.copy {
	width: 35vw;
    display: block;
    margin: 20px 0;
}
.mainVisual .mainVisual_copy h2 {
	position: relative;
    width: 100%;
    display: block;
	font: 300 1.6vw/1em a-otf-jun-pro, sans-serif;
}
.mainVisual .mainVisual_copy img.illust {
	position: absolute;
    width: 16%;
    top: 15%;
    left: 0;
    display: block;
    z-index: 2000;
}

/*スライド*/
.mainVisual .mainVisual_slide {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: center;
		align-content: flex-start;
		align-items: flex-start;
        flex-wrap: wrap;
    padding: 20px 0;
    background: #ed1e79;
}
.mainVisual .mainVisual_slide::before {
	position: absolute;
    content: '';
	width: 102%;
    aspect-ratio: 192/14;
    top: -1px;
    left: -1%;
    display: block;
    z-index: 1000;
    background: url("../images/top/main_wave.svg") no-repeat center top;
    background-size: contain;
}
.mainVisual .mainVisual_slide::after {
	position: absolute;
    content: '';
	width: 20%;
    max-width: 300px;
    aspect-ratio: 1/1;
    top: -100px;
    right: 2%;
    display: block;
    z-index: 1000;
    background: url("../images/top/love_island.svg") no-repeat center top;
    background-size: contain;
}
.mainVisual .mainVisual_slide ul.slider_main {
    position: relative;
    width: 120%;
    display: block;
    margin: 0 -10%;
}
.mainVisual .mainVisual_slide ul.slider_main li {
    width: auto;
    display: block;
    margin: 0 10px;
}
.mainVisual .mainVisual_slide ul.slider_main li img {
    width: 100%;
	display: block;
    aspect-ratio: 40/72;
    object-fit: cover;
	object-position: 50% 50%;
	border-radius: 10px;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【Home】イベント情報
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#home .homeEvent {
	position: relative;
    width: 100%;
	display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    padding: 40px 0;
    background: url("../images/top/palm_tree.png") no-repeat right bottom #ed1e79;
    background-size: 200px;
    box-sizing: border-box;
}
#home .homeEvent .inner {
	position: relative;
    width: 90%;
    display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    margin: 0 auto;
}

/*スライド*/
#home .homeEvent ul.slider_event {
    position: relative;
    width: 90%;
    display: block;
    margin: 0 auto 40px;
}
#event ul.eventList {
	width: 100%;
    display: flex;
		justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
	margin-bottom: 20px;
}
#home .homeEvent ul.slider_event li {
    position: relative;
    width: auto;
    display: block;
    margin: 0 10px;
    box-sizing: border-box;
}
#event ul.eventList li {
    position: relative;
    width: 30%;
    display: block;
    margin: 20px 1.666%;
}
#home .homeEvent ul.slider_event li img,
#event ul.eventList li img {
    width: 100%;
	display: block;
    aspect-ratio: 1/1;
    object-fit: cover;
	object-position: 50% 50%;
    border-radius: 10px;
}
#home .homeEvent ul.slider_event li .area,
#event ul.eventList li .area {
    position: absolute;
    width: 100px;
    height: 30px;
    top: 20px;
    left: 0;
	display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
    font-size: 1.2em;
    line-height: 1em;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background: #fff9c0;
}
#home .homeEvent ul.slider_event li dl,
#event ul.eventList li dl {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
}
#home .homeEvent ul.slider_event li dl {
	color: #fff;
}
#home .homeEvent ul.slider_event li dl .done_s::after,
#event ul.eventList li dl .done_s::after {
    position: absolute;
	content: '本イベントは終了しました';
    width: 100%;
    height: 40px;
    top: -40px;
    right: 0;
	display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
	padding: 0 3%;
    font-size: 1.2em;
    line-height: 1em;
	color: #fff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
    background: rgba(255,0,0,0.8);
	box-sizing: border-box;
}
#home .homeEvent ul.slider_event li dl dt,
#event ul.eventList li dl dt {
    width: 100%;
	min-height: 2.8em;
	display: flex;
		justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
    margin: 20px 0 5px;
    font-size: 1em;
    line-height: 1.4em;
}
#home .homeEvent ul.slider_event li dl dt::before,
#event ul.eventList li dl dt::before {
    content: '開催日';
    width: 60px;
    height: 2em;
	display: inline-block;
    margin: -3px 5px 0 0;
    font-size: 0.9em;
    line-height: 2em;
    letter-spacing: 0.05em;
    text-align: center;
    color: #ed1e79;
	border: solid 1px #ed1e79;
	border-radius: 4px;
    background: #fff;
	box-sizing: border-box;
}
#home .homeEvent ul.slider_event li dl dd,
#event ul.eventList li dl dd {
    width: 100%;
	display: block;
    font-size: 1.3em;
    line-height: 1.4em;
}

/* Arrows */
#home .homeEvent .slick-prev,
#home .homeEvent .slick-next {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 50%;
    display: block;
    z-index: 1000;
    padding: 0;
	margin: 0;
    font-size: 0;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 20px;
	background: #fff;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
#home .homeEvent .slick-prev {
    left: -50px;
}
[dir="rtl"] .slick-prev {
    right: auto;
}
#home .homeEvent .slick-next {
    right: -50px;
}
[dir="rtl"] .slick-next {
    left: auto;
}
#home .homeEvent .slick-prev::before,
#home .homeEvent .slick-next::before {
    content: '';
	width: 40px;
    height: 40px;
	display: block;
    background: url("../images/arrow.svg") no-repeat center center;
    background-size: 24px 24px;
	filter: invert(29%) sepia(65%) saturate(7471%) hue-rotate(321deg) brightness(96%) contrast(93%);
}
#home .homeEvent .slick-prev::before {
    transform: scaleX(-1);
}
#home .homeEvent .slick-prev:hover,
#home .homeEvent .slick-next:hover {
    transition: all 200ms;
    opacity: 0.7;
}
#home .homeEvent .slick-prev:hover:before,
#home .homeEvent .slick-prev:focus:before,
#home .homeEvent .slick-next:hover:before,
#home .homeEvent .slick-next:focus:before {
    opacity: 1;
}
#home .homeEvent .slick-prev.slick-disabled:before,
#home .homeEvent .slick-next.slick-disabled:before {
    opacity: 0.25;
}
#home .homeEvent .slick-prev:before,
#home .homeEvent .slick-next:before {
    outline: none;
    font-family: "slick";
    font-size: 0;
    line-height: 1;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【Home】古宇利島スポット
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#home .homeSpot {
	position: relative;
    width: 100%;
	display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    padding: 40px 0;
    box-sizing: border-box;
}
#home .homeSpot .inner {
	position: relative;
    width: 90%;
    display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    margin: 0 auto;
}
#home .homeSpot h3 {
	width: 100%;
    display: block;
    font-family: a-otf-jun-pro, sans-serif;
    font-size: clamp(2em, 2.4vw, 3.6em);
    line-height: 1.6em;
}
#home .homeSpot img.illust {
	position: absolute;
    width: 25%;
    bottom: 0;
    left: 0;
    display: block;
}
#home .homeSpot .mapBox {
	position: relative;
    width: 75%;
    display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
	margin: 0 10% 80px auto;
}
#home .homeSpot .mapBox a.btnDetail {
	position: absolute;
    width: 170px;
    height: 40px;
    font: 300 1.2em/1em a-otf-jun-pro, sans-serif;
}

/*買う*/
#home .homeSpot .mapBox a.shopping {
	top: calc(50% + 0%);
    left: calc(50% - 40%);
}

/*遊ぶ*/
#home .homeSpot .mapBox a.play {
	top: calc(50% + 48%);
    left: calc(50% - 32%);
}

/*食べる*/
#home .homeSpot .mapBox a.eat {
	top: calc(50% + 41%);
    left: calc(50% + 32%);
}

/*泊まる*/
#home .homeSpot .mapBox a.stay {
	top: calc(50% - 30%);
    left: calc(50% + 36%);
}

#home .homeSpot .btnBlock a.btnDetail {
	margin-left: auto;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【Home】おすすめスポット
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#home .homeRecommendation {
	position: relative;
    width: 100%;
	display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    padding: 40px 0;
    background: #f7f5ed;
    box-sizing: border-box;
}
#home .homeRecommendation .inner {
	position: relative;
    width: 90%;
    display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    margin: 0 auto;
}

/*スライド*/
#home .homeRecommendation ul.slider_spot {
    position: relative;
    width: 260%;
    display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
    margin: 0 -80% 40px;
	transition: all 200ms;
}
#home .homeRecommendation ul.slider_spot li {
    position: relative;
    width: auto;
	aspect-ratio: 3/2;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    align-self: stretch;
    margin: 20px;
    padding: 30px 30px 0;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
}
#home .homeRecommendation ul.slider_spot li img {
    width: 36%;
	display: block;
    aspect-ratio: 1/1;
    object-fit: cover;
	object-position: 50% 50%;
    border-radius: 10px;
}
#home .homeRecommendation ul.slider_spot li .good {
    position: absolute;
    content: '';
    width: 12%;
    aspect-ratio: 1/1;
    top: 10px;
    left: -2%;
	display: block;
    z-index: 2000;
    background: url("../images/top/mark_good.svg") no-repeat center center;
    background-size: contain;
}
#home .homeRecommendation ul.slider_spot li dl {
	position: relative;
    width: 60%;
    display: flex;
		justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    padding: 10px 0;
    box-sizing: border-box;
}
#home .homeRecommendation ul.slider_spot li dl dt {
    width: 100%;
	display: flex;
		justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
    margin-bottom: 20px;
    font-family: a-otf-jun-pro, sans-serif;
	font-size: clamp(1.6em, 1.4vw, 1.8em);
	font-weight: 600;
    line-height: 1.4em;
    color: #ed1e79;
}
#home .homeRecommendation ul.slider_spot li dl dd {
    width: 100%;
	display: block;
	margin-bottom: 20px;
    font-size: 1.3em;
    line-height: 1.8em;
    text-align: justify;
}
#home .homeRecommendation ul.slider_spot li dl .hash {
    width: auto;
	display: inline-block;
	margin-right: 1em;
    font-size: 1.1em;
    line-height: 1.4em;
	color: #06c;
}
#home .homeRecommendation ul.slider_spot li dl .hash::before {
    content: '#';
}

/* Dots */
#home .homeRecommendation .slick-dots {
    position: absolute;
	width: 100%;
	bottom: -20px;
    display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
}
#home .homeRecommendation .slick-dots li {
    aspect-ratio: inherit !important;
	display: inline-block;
    margin: 0 5px !important;
    padding: 0 !important;
    border-radius: 2px;
    box-shadow: none !important;
}
#home .homeRecommendation .slick-dots li button {
    position: relative;
	width: 80px;
	height: 4px;
	display: inline-block;
	font-size: 0;
    cursor: pointer;
    border: none;
    outline: none;
    border-radius: 2px;
	opacity: 1;
}
#home .homeRecommendation .slick-dots li button:hover,
#home .homeRecommendation .slick-dots li button:focus {
    opacity: 1;
}
#home .homeRecommendation .slick-dots li button:hover:before {
    background: #fff;
	opacity: 1;
}
#home .homeRecommendation .slick-dots li button:before {
    position: absolute;
	content: '';
	width: 80px;
    height: 4px;
	top: 0;
    left: 0;
    border-radius: 2px;
	background: #ed1e79;
	opacity: 0.3;
}
#home .homeRecommendation .slick-dots li.slick-active button:before {
    opacity: 1;
    background: #ed1e79;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
恋の島 観光案内所とは
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#about .content {
	margin: 0 auto 20px;
	padding: 0;
}
#about hr {
	width: 100%;
	height: 10px;
    display: block;
	margin: 40px auto;
	border: none;
	background: #edf7f9;
}
#about .topBlock {
	width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: center;
        align-items: center;
		flex-wrap: wrap;
	padding: 40px 5% 0;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background: url("../images/about/bg.webp") no-repeat center bottom #5293d2;
	background-size: 100%;
}
#about .topBlock .space {
	width: 90%;
	aspect-ratio: 2/1;
    display: block;
	margin: 0 auto;
}
#about .topBlock .topBlock_text {
	width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: center;
        align-items: center;
		flex-wrap: wrap;
	margin: 0 auto;
}
#about .topBlock .topBlock_text h3 {
    width: 100%;
	min-height: 60px;
	display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
		flex-wrap: wrap;
	margin-bottom: 10px;
	padding: 10px 0;
	font-family: a-otf-jun-pro, sans-serif;
    font-size: clamp(2em, 3.6vw, 3.6em);
	font-weight: 600;
    line-height: 1.2em;
	text-align: center;
    color: #ed1e79;
	border: solid 1px #ed1e79;
	border-radius: 10px;
	background: #fcfaeb;
}
#about .topBlock .topBlock_text h3 span {
    width: 100%;
	display: block;
    font-size: 0.5em;
	font-weight: normal;
    line-height: 1.4em;
    text-align: center;
}
#about .topBlock .topBlock_text p {
    width: 100%;
	display: block;
	margin: 10px 0;
    font-size: 1.4em;
    line-height: 2em;
    text-align: justify;
	color: #fff;
}
#about .topBlock .topBlock_text a {
    margin: 20px 0 20px auto;
}
#about .bottomBlock {
	position: relative;
	width: 90%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
	margin: 40px auto;
}
#about .bottomBlock dl {
	position: relative;
    width: 50%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
	z-index: 1000;
}
#about .bottomBlock dl.tx1,
#about .bottomBlock dl.tx2 {
	width: 100%;
    margin: 20px 0;
}
#about .bottomBlock dl dt {
    width: 100%;
	display: block;
	margin-bottom: 20px;
	font-family: a-otf-jun-pro, sans-serif;
    font-size: clamp(2em, 2.2vw, 3.2em);
	font-weight: 300;
    line-height: 1.4em;
    color: #ed1e79;
}
#about .bottomBlock dl dt span {
    width: 100%;
	display: block;
    font-size: 0.8em;
    line-height: 1.4em;
}
#about .bottomBlock dl dd {
    width: 100%;
	display: block;
    font-size: 1.4em;
    line-height: 2em;
    text-align: justify;
}
#about .bottomBlock .mapBox {
    position: relative;
	width: 80%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
	margin: -40px auto 20px;
}
#about .bottomBlock .mapBox img.photo {
	position: absolute;
    width: 60%;
	bottom: 20px;
	right: 0;
    display: block;
    border-radius: 10px;
}
#about .bottomBlock p {
    width: 100%;
	display: block;
    font-size: 1.4em;
    line-height: 2em;
    text-align: justify;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
沖縄北部エリアの魅力（一覧）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*【共通】沖縄北部エリア観光スポット（地図メニュー）*/
.attractionMenu {
	position: relative;
    width: 100%;
	display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    padding: 40px 0 200px;
    background: url("../images/top/attraction_bg.webp") no-repeat center bottom #edf7f9;
    background-size: 160%;
    box-sizing: border-box;
}
#attraction .attractionMenu {
	padding: 80px 0;
	background: #edf7f9;
}
.attractionMenu .mapBox {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
	margin-bottom: 40px;
}
.attractionMenu .mapBox a.btnDetail {
	position: absolute;
    width: 120px;
    height: 30px;
    font-size: 1.2em;
    line-height: 1em;
    color: #ed1e79;
    background: #fff;
    border: solid 1px #ed1e79;
}
.attractionMenu .mapBox a.btnDetail::after {
	right: 5px;
	background-size: 16x 16px;
	filter: invert(76%) sepia(60%) saturate(1106%) hue-rotate(288deg) brightness(92%) contrast(102%);
}
.attractionMenu .mapBox a.btnDetail::before {
	background: #ffdce8;
}

/*00.古宇利島*/
.attractionMenu .mapBox a.p00 {
	width: 260px;
    top: calc(50% - 26%);
    left: calc(50% - 48%);
    font-weight: bold;
    color: #fff;
    border: none;
    background: #3fd0e8;
}
.attractionMenu .mapBox a.p00::after {
	filter: invert(100%) sepia(0%) saturate(24%) hue-rotate(114deg) brightness(108%) contrast(108%);
}
.attractionMenu .mapBox a.p00::before {
	background: #2f8bba;
}

/*01.恩納村*/
.attractionMenu .mapBox a.p01 {
	top: calc(50% + 3.3%);
    left: calc(50% - 45%);
}

/*02.金武町*/
.attractionMenu .mapBox a.p02 {
	top: calc(50% + 21.3%);
    left: calc(50% + 6%);
}

/*03.宜野座村*/
.attractionMenu .mapBox a.p03 {
	top: calc(50% + 12.3%);
    left: calc(50% + 6%);
}

/*04.名護市*/
.attractionMenu .mapBox a.p04 {
	top: calc(50% + 4.7%);
    left: calc(50% + 17%);
}

/*05.東村*/
.attractionMenu .mapBox a.p05 {
	top: calc(50% - 1.4%);
    left: calc(50% + 32%);
}

/*06.本部町*/
.attractionMenu .mapBox a.p06 {
	top: calc(50% - 4.7%);
    left: calc(50% - 42%);
}

/*07.今帰仁村*/
.attractionMenu .mapBox a.p07 {
	top: calc(50% - 13.2%);
    left: calc(50% - 36%);
}

/*08.大宜味村*/
.attractionMenu .mapBox a.p08 {
	top: calc(50% - 32.6%);
    left: calc(50% - 34%);
}

/*09.伊江村*/
.attractionMenu .mapBox a.p09 {
	top: calc(50% - 19.3%);
    left: calc(50% - 50%);
}

/*10.国頭村*/
.attractionMenu .mapBox a.p10 {
	top: calc(50% - 12.2%);
    left: calc(50% + 40%);
}

/*11.伊是名村*/
.attractionMenu .mapBox a.p11 {
	top: calc(50% - 41%);
    left: calc(50% - 16%);
}

/*12.伊平屋村*/
.attractionMenu .mapBox a.p12 {
	top: calc(50% - 41.5%);
    left: calc(50% + 34%);
}

.attractionMenu .textBox {
	width: 100%;
    display: flex;
		justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
}
.attractionMenu .textBox dl,
#attraction .message dl,
#attraction .detail dl {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    margin-bottom: 40px;
}
#attraction .message dl {
	margin-bottom: 0;
}
.attractionMenu .textBox dl dt,
#attraction .message dl dt,
#attraction .detail dl dt {
    width: 100%;
	display: block;
	margin-bottom: 20px;
	font-family: a-otf-jun-pro, sans-serif;
    font-size: clamp(2em, 3.6vw, 3.6em);
	font-weight: 300;
    line-height: 1.4em;
	text-align: center;
    color: #ed1e79;
}
#attraction .detail dl dt {
    font-size: clamp(1.8em, 2.4vw, 3.2em);
}
.attractionMenu .textBox dl dd,
#attraction .message dl dd,
#attraction .detail dl dd {
    width: 100%;
	display: block;
    font-size: 1.4em;
    line-height: 1.8em;
    text-align: justify;
}
.attractionMenu .textBox a.btnDetail {
	margin-left: auto;
}
#attraction .attractionMenu .textBox a.btnDetail {
	display: none;
}

/*メッセージ*/
#attraction .message {
	
}
#attraction .message img {
	width: 40%;
    display: block;
	margin: 0 auto 20px;
}
#attraction .message dl {
	width: 100%;
}

/*インデックス*/
#attraction ul.attractionMenu_list {
	width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
	margin: -160px 0 0;
}
#attraction ul.attractionMenu_list li {
	position: relative;
    width: 49%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		/*flex-wrap: wrap;*/
	overflow: hidden;
	margin: 10px 0;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
#attraction ul.attractionMenu_list li::before,
#attraction ul.attractionMenu_list li::after {
	position: absolute;
	content: '';
    width: 30px;
	aspect-ratio: 1/1;
	top: 10px;
	right: 10px;
    display: block;
}
#attraction ul.attractionMenu_list li::before {
	border-radius: 15px;
	background: #ed1e79;
}
#attraction ul.attractionMenu_list li::after {
	background: url("../images/arrow.svg") no-repeat center center;
	background-size: 20px 20px;
	filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(171deg) brightness(104%) contrast(101%);
}
#attraction ul.attractionMenu_list li img.thumb {
	width: 30%;
    display: block;
	align-self: stretch;
	object-fit: cover;
	object-position: 50% 50%;
}
#attraction ul.attractionMenu_list li div {
	width: 70%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
	align-self: stretch;
	padding: 20px;
}
#attraction ul.attractionMenu_list li div img {
	width: auto;
	height: 20px;
    display: block;
}
#attraction ul.attractionMenu_list li div h3 {
    width: 100%;
	display: block;
	font-family: a-otf-jun-pro, sans-serif;
    font-size: clamp(2em, 2.4vw, 3.6em);
	font-weight: 300;
    line-height: 1.4em;
}
#attraction ul.attractionMenu_list li div span {
    width: 100%;
	display: block;
	margin-top: 20px;
    font-size: 1em;
    line-height: 1.4em;
	color: #06C;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
沖縄北部エリアの魅力（詳細）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#attraction .detail .textBox {
	width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
}
#attraction .detail .textBox a.btnDetail {
	width: auto;
	margin-left: auto;
	padding: 0 50px 0 30px;
}
#attraction .detail .mapBox {
	position: relative;
	width: 60%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
	margin: 20px auto -20px;
}
#attraction .detail .mapBox img.photo_01,
#attraction .detail .mapBox img.photo_02 {
	position: absolute;
	width: 50%;
	aspect-ratio: 1/1;
    display: block;
	z-index: 1000;
	border-radius: 50%;
}
#attraction .detail .mapBox img.photo_01 {
	top: -5%;
	left: -30%;
}
#attraction .detail .mapBox img.photo_02 {
	bottom: 0;
	right: -30%;
}

/*人気のスポット*/
#attraction .popularSpots {
	position: relative;
    width: 100%;
	display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    padding: 40px 0;
    background: #edf7f9;
    box-sizing: border-box;
}
#attraction .popularSpots ul {
	width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
}
#attraction .popularSpots ul li {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: column-reverse;
	margin: 20px 0;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
#attraction .popularSpots ul li .textBox {
	width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
	padding: 40px;
	box-sizing: border-box;
}
#attraction .popularSpots ul li .textBox h3 {
    width: 100%;
	display: flex;
		justify-content: flex-start;
        align-content: center;
        align-items: center;
	margin-bottom: 20px;
    font-size: 1.8em;
    line-height: 1.2em;
}
#attraction .popularSpots ul li .textBox h3 span {
    width: 60px;
	aspect-ratio: 1/1;
	display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
	margin: -20px 10px 0 0;
	padding-top: 20px;
    font: 700 1em/1 'Times New Roman', Times, serif;
    line-height: 1em;
	background: url("../images/mark_crown.svg") no-repeat center center;
	background-size: contain;
}
#attraction .popularSpots ul li .textBox h3 span::before {
    content: 'No.';
	display: inline-block;
    font-size: 0.8em;
}
#attraction .popularSpots ul li .textBox dl {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    margin-bottom: 40px;
}
#attraction .popularSpots ul li .textBox dt {
    width: 100%;
	display: block;
	margin-bottom: 20px;
	font-family: a-otf-jun-pro, sans-serif;
    font-size: 2.4em;
	font-weight: 300;
    line-height: 1.4em;
    color: #ed1e79;
}
#attraction .popularSpots ul li .textBox dd {
    width: 100%;
	display: block;
    font-size: 1.4em;
    line-height: 1.8em;
    text-align: justify;
}
#attraction .popularSpots ul li .textBox a {
    width: 100%;
	display: flex;
		justify-content: flex-start;
        align-content: center;
        align-items: center;
	margin: 10px 0;
    font-size: 1.3em;
    line-height: 0.9em;
	color: #06c;
}
#attraction .popularSpots ul li .textBox a:hover {
    text-decoration: underline;
}
#attraction .popularSpots ul li .textBox a::before {
    content: '';
	width: 24px;
	aspect-ratio: 1/1;
	display: inline-block;
	margin-right: 10px;
	filter: invert(22%) sepia(62%) saturate(5119%) hue-rotate(199deg) brightness(93%) contrast(100%);
}
#attraction .popularSpots ul li .textBox a.address::before {
    background: url("../images/icon_map.svg") no-repeat center center;
	background-size: contain;
}
#attraction .popularSpots ul li .textBox a.url::before {
    background: url("../images/icon_hp.svg") no-repeat center center;
	background-size: contain;
}
#attraction .popularSpots ul li .photoBox {
	position: relative;
	width: 100%;
	aspect-ratio: 2/1;
    display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#attraction .popularSpots ul li .photoBox .catg {
    position: absolute;
	width: 120px;
	aspect-ratio: 1/1;
	top: -60px;
	right: 2%;
	display: block;
}
#attraction .popularSpots ul li .photoBox .catg.shopping {
    background: url("../images/icon_shopping.svg") no-repeat center center;
	background-size: contain;
}
#attraction .popularSpots ul li .photoBox .catg.play {
    background: url("../images/icon_play.svg") no-repeat center center;
	background-size: contain;
}
#attraction .popularSpots ul li .photoBox .catg.eat {
    background: url("../images/icon_eat.svg") no-repeat center center;
	background-size: contain;
}
#attraction .popularSpots ul li .photoBox .catg.stay {
    background: url("../images/icon_stay.svg") no-repeat center center;
	background-size: contain;
}
#attraction .popularSpots .btnBlock {
    justify-content: space-between;
	flex-direction: row-reverse;
	margin: 20px 0;
}
#attraction .popularSpots a.btnDetail {
	width: 48%;
	padding: 0 60px 0 40px;
	font-size: 1.4em;
}
#attraction .popularSpots a.linkBack {
	margin: 40px auto 0 0;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
古宇利島スポット
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*【共通】カテゴリーメニュー（下部）*/
#spot ul.catgMenu {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    margin: 20px auto;
}
#spot ul.catgMenu li {
	position: relative;
    width: 25%;
    display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
		flex-wrap: wrap;
	align-self: stretch;
	box-sizing: border-box;
}
#spot ul.catgMenu li+li {
	border-left: solid 1px #ed1e79;
}
#spot ul.catgMenu li img {
	width: 60%;
	aspect-ratio: 1/1;
    display: block;
	margin: 0 auto 20px;
}
#spot ul.catgMenu li a.btnDetail {
	width: 90%;
	height: 40px;
	font-size: 1.2em;
}

/*インデックス一覧*/
#spot ul.spotList {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    margin: 0 auto;
}
#spot ul.spotList li {
	position: relative;
    width: 48%;
    display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
	align-self: stretch;
    margin: 15px 0;
	padding-bottom: 90px;
	border-radius: 20px;
	background: #fff;
	box-sizing: border-box;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
#spot ul.spotList li img {
	width: 100%;
	aspect-ratio: 3/2;
    display: block;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
#spot ul.spotList li div {
	position: relative;
    width: 100%;
	min-height: 100px;
    display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    margin: 20px 0;
	padding: 0 5%;
}
#spot ul.spotList li div h3 {
    width: 100%;
	display: block;
	margin-bottom: 20px;
	font-family: a-otf-jun-pro, sans-serif;
	font-size: clamp(1.6em, 1.4vw, 2em);
	font-weight: 300;
    line-height: 1.4em;
	text-align: center;
}
#spot ul.spotList li div span {
    width: auto;
	height: 36px;
	display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
	margin: 5px 1%;
	padding: 0 2%;
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: center;
	border: solid 1px #ed1e79;
	border-radius: 4px;
	box-sizing: border-box;
}
#spot ul.spotList li a {
    position: absolute;
	width: 240px;
	bottom: 30px;
}

/*詳細*/
#spot .titleBlock,
#event .titleBlock {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-end;
        align-items: flex-end;
		flex-wrap: wrap;
    margin-bottom: 40px;
	padding: 20px 0 30px;
	border-bottom: solid 5px #ed1e79;
}
#spot .titleBlock::after,
#event .titleBlock::after {
	position: absolute;
	content: '';
	width: 200px;
	height: 200px;
	bottom: -50px;
	right: -120px;
	display: block;
	background: url("../images/page_title_heart.svg") no-repeat center center;
	background-size: contain;
	filter: invert(28%) sepia(79%) saturate(3134%) hue-rotate(316deg) brightness(90%) contrast(107%);
	transform: scaleX(-1);
	opacity: 0.2;
}
#spot .titleBlock h3,
#event .titleBlock h3 {
    width: 70%;
	display: inline-block;
	font-family: a-otf-jun-pro, sans-serif;
	font-size: clamp(1.8em, 2.4vw, 2.4em);
	font-weight: 600;
    line-height: 1.3em;
	white-space: pre-line;
}
#spot .titleBlock ul {
	width: 30%;
    display: flex;
		justify-content: flex-end;
        align-content: center;
        align-items: center;
		/*flex-wrap: wrap;*/
}
#spot .titleBlock ul li {
    width: auto;
	height: 30px;
	display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
	margin: 0 1%;
	padding: 0 2%;
    font-size: clamp(0.8em, 1vw, 1.2em);
	line-height: 1.2em;
    text-align: center;
	border: solid 1px #ed1e79;
	border-radius: 4px;
	box-sizing: border-box;
}

/*情報*/
#spot .infoBlock,
#spot .osusumeBlock,
#spot .accessBlock,
#spot .noteBlock,
#spot .galleryBlock {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    margin-bottom: 40px;
}
#spot .infoBlock img.photo {
	position: relative;
    width: 100%;
    aspect-ratio: 3/2;
	display: block;
	margin-bottom: 10px;
    border-radius: 10px;
    object-fit: cover;
	object-position: 50% 50%;
}
#spot .infoBlock table,
#event .infoBlock table {
	width: 100%;
    display: table;
}
#spot .infoBlock table tr+tr,
#event .infoBlock table tr+tr {
	border-top: dashed 1px #ccc;
}
#spot .infoBlock table th,
#spot .infoBlock table td,
#event .infoBlock table th,
#event .infoBlock table td {
	display: table-cell;
    padding: 20px 5px;
    font-size: 1.3em;
    line-height: 1.6em;
    text-align: left;
    vertical-align: top;
}
#spot .infoBlock table th,
#event .infoBlock table th {
	position: relative;
    width: 140px;
    padding-left: 40px;
    font-size: 1.2em;
    color: #666;
    background-position: left top 14px;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    box-sizing: border-box;
}
#spot .infoBlock table th::before,
#event .infoBlock table th::before {
	position: absolute;
	content: '';
    width: 30px;
	height: 30px;
	top: 15px;
	left: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
	filter: invert(28%) sepia(79%) saturate(3134%) hue-rotate(316deg) brightness(90%) contrast(107%);
}
#spot .infoBlock table th.clock::before,
#event .infoBlock table th.clock::before {
	background-image: url("../images/icon_clock.svg");
}
#spot .infoBlock table th.close::before,
#event .infoBlock table th.close::before {
	background-image: url("../images/icon_close.svg");
}
#spot .infoBlock table th.address::before,
#event .infoBlock table th.address::before {
	background-image: url("../images/icon_address.svg");
}
#spot .infoBlock table th.tel::before,
#event .infoBlock table th.tel::before {
	background-image: url("../images/icon_tel.svg");
}
#spot .infoBlock table th.genre::before,
#event .infoBlock table th.genre::before {
	background-image: url("../images/icon_genre.svg");
}
#spot .infoBlock table th.pay::before,
#event .infoBlock table th.pay::before {
	background-image: url("../images/icon_pay.svg");
}
#spot .infoBlock table th.website::before,
#event .infoBlock table th.website::before {
	background-image: url("../images/icon_website.svg");
}
#event .infoBlock table th.calendar::before {
	background-image: url("../images/icon_calendar.svg");
}
#spot .infoBlock table td a,
#event .infoBlock table td a {
	color: #06c;
}
#spot .infoBlock table td a:hover,
#event .infoBlock table td a:hover {
	text-decoration: underline;
}

/*おすすめ*/
#spot .osusumeBlock dl {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
	margin-bottom: 20px;
}
#spot .osusumeBlock dl dt {
    width: 100%;
	display: flex;
		justify-content: flex-start;
        align-content: flex-end;
        align-items: flex-end;
		/*flex-wrap: wrap;*/
	margin: 20px 0;
	font-family: a-otf-jun-pro, sans-serif;
    font-size: clamp(1.8em, 2vw, 2.4em);
	font-weight: 300;
    line-height: 1.6em;
    color: #ed1e79;
}
#spot .osusumeBlock dl dt::before {
    content: '';
	width: 20%;
	aspect-ratio: 5/6;
	display: inline-block;
	margin: -40px 10px -20px 0;
	background: url("../images/spot/illust_osusume.svg") no-repeat center center;
	background-size: contain;
}
#spot .osusumeBlock dl dd {
    width: 100%;
	display: block;
	margin-top: 20px;
    font-size: 1.4em;
    line-height: 1.8em;
    text-align: justify;
}
#spot .osusumeBlock img.photo {
	width: 60%;
    aspect-ratio: 4/3;
	display: block;
	margin: 0 auto;
    border-radius: 10px;
    object-fit: cover;
	object-position: 50% 50%;
}

/*アクセス*/
#spot .accessBlock iframe,
#event .accessBlock iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 3/2;
    display: block;
	margin-bottom: 20px;
}
#spot .accessBlock address,
#event .accessBlock address {
    width: calc(100% - 220px);
	display: flex;
		justify-content: flex-start;
        align-content: center;
        align-items: center;
		flex-wrap: wrap;
    font-size: 1.2em;
    line-height: 1.6em;
}
#spot .accessBlock address strong,
#event .accessBlock address strong {
    width: 100%;
	display: block;
	margin-bottom: 10px;
    font-size: 1.4em;
    line-height: 1.2em;
}
#spot .accessBlock a.btnDetail,
#event .accessBlock a.btnDetail {
    width: 200px;
	height: 50px;
	font-size: 1.3em;
}

/*注釈*/
#spot .noteBlock {
	margin-bottom: 20px;
	padding-top: 20px;
	font-size: 1.2em;
    line-height: 1.6em;
	border-top: solid 1px #ccc;
}

/*フォトギャラリー*/
#spot .galleryBlock {
	margin-top: 20px;
}
#spot .galleryBlock ul {
	width: 100%;
    display: flex;
		justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
}
#spot .galleryBlock ul li {
	width: 30%;
    display: block;
	align-self: stretch;
	margin: 10px 1.666%;
}
#spot .galleryBlock ul li a {
	position: relative;
}
#spot .galleryBlock ul li a::after {
	position: absolute;
	content: '';
	width: 30px;
    aspect-ratio: 1/1;
	bottom: 10px;
	right: 10px;
	display: block;
	z-index: 1000;
    background: url("../images/icon_enlarger.svg") no-repeat center center;
	background-size: contain;
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(317deg) brightness(104%) contrast(101%);
}
#spot .galleryBlock ul li img {
	position: relative;
	width: 100%;
    aspect-ratio: 4/3;
	display: block;
    border-radius: 10px;
    object-fit: cover;
	object-position: 50% 50%;
}
#spot .galleryBlock ul li span {
	width: 100%;
	display: block;
	margin-top: 10px;
	font-size: 1.2em;
    line-height: 1.6em;
	text-align: center;
}


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

/*一覧*/
/*【Home】イベント情報内に記述*/

/*詳細*/
#event .titleBlock h3 {
    width: calc(100% - 100px);
}
#event .titleBlock span {
    width: 100px;
	height: 36px;
	display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
	margin: 5px 0 -5px;
    font-size: clamp(1em, 1vw, 1.4em);
    text-align: center;
	border: solid 1px #ed1e79;
	border-radius: 20px;
	background: #fff9c0;
	box-sizing: border-box;
}
#event .done {
    width: 100%;
    height: 30px;
	display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
	padding: 0 20px;
    font-size: 1.2em;
    line-height: 1em;
	color: #fff;
	border-radius: 3px;
    background: red;
	box-sizing: border-box;
}
#event .done::after {
    content: '本イベントは修正しました';
}
#event .flyerBlock,
#event .infoBlock,
#event .accessBlock {
	position: relative;
	width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    margin-bottom: 40px;
}

/*チラシ*/
#event .flyerBlock {
	width: 80%;
	margin: 0 auto 40px;
}
#event .flyerBlock .flip-container {
  width: 100%;
  z-index: 1000;
  perspective: 1000px;
  cursor: pointer;
}
#event .flyerBlock .flip-image {
  width: 100%;
  transition: transform 0.6s ease-in-out;
  transform-style: preserve-3d;
  position: relative; 
}
#event .flyerBlock .flip-image img {
  width: 100%;
  height: auto; 
  object-fit: contain;
  display: block;
  backface-visibility: hidden;
}
#event .flyerBlock .flip-image img:nth-child(1) {
  transform: rotateY(0deg);
}
#event .flyerBlock .flip-image img:nth-child(2) {
  transform: rotateY(180deg);
  position: absolute; 
  top: 0;
  left: 0;
}
#event .flyerBlock .flip-container.is-flipped .flip-image {
  transform: rotateY(180deg);
}
#event .flyerBlock .btnFlip {
	position: relative;
    width: 120px;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
	margin-top: 20px;
}
#event .flyerBlock .btnFlip .btn {
	width: 50%;
	height: 40px;
    display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
	font-size: 1.4em;
    line-height: 1em;
	cursor: pointer;
	border: none;
	background: #ddd;
	box-sizing: border-box;
}
#event .flyerBlock .btnFlip .btn.omote {
	padding-left: 10px;
	border-right: solid 1px #fff;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}
#event .flyerBlock .btnFlip .btn.ura {
	padding-right: 10px;
	border-left: solid 1px #fff;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}
.flyerBlock input[type="radio"] {
	display: none;
}
#omote:checked ~ .btnFlip .omote,
#ura:checked ~ .btnFlip .ura {
	color: #fff;
	cursor: inherit;
	background: #ed1e79;
}
#event .flyerBlock a.linkPDF {
	position: absolute;
	bottom: 5px;
	right: 0;
}

/*情報*/
#event .infoBlock {
	width: 100%;
}
#event .infoBlock table {
	width: 100%;
}
#event .infoBlock dl {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
	margin-bottom: 40px;
}
#event .infoBlock dl dt {
    width: 100%;
	display: block;
	font-family: a-otf-jun-pro, sans-serif;
    font-size: clamp(2em, 2.4vw, 2.8em);
	font-weight: 300;
    line-height: 1.4em;
    color: #ed1e79;
}
#event .infoBlock dl dd {
    width: 100%;
	display: block;
	margin-top: 20px;
    font-size: 1.6em;
    line-height: 1.8em;
    text-align: justify;
}
#event .infoBlock .note {
	width: 100%;
	display: block;
	margin-bottom: 40px;
	padding-top: 20px;
	font-size: 1.2em;
    line-height: 1.6em;
	border-top: solid 1px #ccc;
}

/*情報*/
#event .accessBlock {
	/*スポットと併用*/
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
パンフレット
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#pamphlet ul.pamphletList {
	width: 100%;
    display: flex;
		justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
}
#pamphlet ul.pamphletList li {
    position: relative;
    width: 23%;
    display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
	align-self: stretch;
    margin: 15px 1%;
	padding: 15px 15px 60px 15px;
	border-radius: 10px;
	background: #fff;
    box-sizing: border-box;
	transition: all 200ms;
}
@media screen and (max-width: 1400px) {
#pamphlet ul.pamphletList li {
    width: 31%;
    margin: 15px 1%;
}
}
#pamphlet ul.pamphletList img {
    width: 90%;
	display: block;
    aspect-ratio: 1/1;
    object-fit: contain;
	object-position: 50% 100%;
	/*box-shadow: 5px 5px 10px rgba(0,0,0,0.2);*/
}
#pamphlet ul.pamphletList li .area {
    position: absolute;
    width: 100px;
    height: 30px;
    top: 30px;
    left: 0;
	display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
    font-size: 1.2em;
    line-height: 1em;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background: #fff9c0;
}
#pamphlet ul.pamphletList h3 {
    width: 100%;
	min-height: 2.8em;
	display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
    margin: 25px 0;
    font-size: clamp(1.2em, 1.4vw, 1.6em);
	font-weight: 300;
    line-height: 1.4em;
	text-align: center;
}
#pamphlet ul.pamphletList li a {
    position: absolute;
    width: 80%;
    height: 50px;
    bottom: 20px;
    font-size: 1.3em;
    line-height: 1em;
}
#pamphlet ul.pamphletList li a.btnDetail::after {
	background: url("../images/icon_pdf.svg") no-repeat center center;
    background-size: 24px 24px;
	filter: invert(100%) sepia(81%) saturate(136%) hue-rotate(13deg) brightness(115%) contrast(102%);
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
交通アクセス
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#access .content {
	margin: 0 auto 20px;
}
#access .inner {
	width: 100%;
    display: flex;
		justify-content: space-between;
        align-content: center;
        align-items: center;
		flex-wrap: wrap;
	margin: 0 auto 20px;
}
#access hr {
	width: 100%;
	height: 10px;
    display: block;
	margin: 40px auto;
	border: none;
	background: #edf7f9;
}
#access img.root {
	width: 60%;
    display: block;
	margin: 0 20% 20px;
}
#access img.time {
	width: 50%;
    display: block;
}
#access img.map {
	width: 50%;
    display: block;
}
#access .bus_link {
	width: 100%;
    display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
		flex-wrap: wrap;
}
#access .bus_link p {
    width: 100%;
	display: block;
	margin-bottom: 20px;
    font-size: 1.6em;
    line-height: 1.6em;
	text-align: center;
}
#access .bus_link a {
    width: 360px;
}
#access img.bus {
	width: 80%;
    display: block;
	margin: 40px auto 0;
}
#access address {
    width: 100%;
	display: block;
	margin-bottom: 20px;
    font-size: 1.4em;
    line-height: 1.8em;
}
#access iframe {
    width: 100%;
	aspect-ratio: 3/2;
	display: block;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 運営会社
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#company .content {
	margin: 0 auto 20px;
}
#company table {
	width: 100%;
	display: table;
    margin: 20px auto;
    border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;
    box-sizing: border-box;
}
#company table th,
#company table td {	
    display: table-cell;
    padding: 20px;
    font-size: 1.4em;
	line-height: 1.8em;
    text-align: left;
    vertical-align: top;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    box-sizing: border-box;
}
#company table th {
	width: 200px;
	background: #edf7f9;
}
#company table td a {	
    text-decoration: underline;
    color: #06c;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
恋の島便り（お知らせ）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#news .newsList,
#news .detail {
	margin: 20px auto;
	padding: 40px;
	border-radius: 20px;
	background: #fff;
	box-sizing: border-box;
}
.newsList {
	position: relative;
    width: 90%;
	display: flex;
		justify-content: space-between;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	margin: 20px auto;
	box-sizing: border-box;
}
.newsList ul {
	position: relative;
    width: 100%;
	display: flex;
		justify-content: space-between;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
}
.newsList ul li {
	position: relative;
    width: 100%;
	display: flex;
		justify-content: space-between;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
    align-self: stretch;
    margin: 10px 0;
    padding-bottom: 20px;
    box-sizing: border-box;
}
.newsList ul li::after {
	position: absolute;
    content: '';
    width: 30px;
    height: 30px;
    bottom: 0;
    right: 0;
	display: block;
    background: url("../images/arrow.svg") no-repeat center center;
    background-size: contain;
    filter: invert(29%) sepia(65%) saturate(7471%) hue-rotate(321deg) brightness(96%) contrast(93%);
}
.newsList ul li .thumb,
.newsTitle .thumb {
    width: 20%;
	display: block;
    aspect-ratio: 1/1;
	overflow: hidden;
	border-radius: 10px;
    background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.newsTitle .thumb {
    position: absolute;
	width: 100px;
	top: 40px;
	left: 40px;
}
.newsList ul li .kouri,
.newsTitle .kouri {
    background-image: url("../images/news/thumb.png");
}
.newsList ul li .onna,
.newsTitle .onna {
    background-image: url("../images/attraction/name_onna-village.svg");
}
.newsList ul li .kin,
.newsTitle .kin {
    background-image: url("../images/attraction/name_kin-town.svg");
}
.newsList ul li .ginoza,
.newsTitle .ginoza {
    background-image: url("../images/attraction/name_ginoza-village.svg");
}
.newsList ul li .nago,
.newsTitle .nago {
    background-image: url("../images/attraction/name_nago-city.svg");
}
.newsList ul li .higashi,
.newsTitle .higashi {
    background-image: url("../images/attraction/name_higashi-village.svg");
}
.newsList ul li .motobu,
.newsTitle .motobu {
    background-image: url("../images/attraction/name_motobu-town.svg");
}
.newsList ul li .nakijin,
.newsTitle .nakijin {
    background-image: url("../images/attraction/name_nakijin-village.svg");
}
.newsList ul li .ogimi,
.newsTitle .ogimi {
    background-image: url("../images/attraction/name_ogimi-village.svg");
}
.newsList ul li .ie,
.newsTitle .ie {
    background-image: url("../images/attraction/name_ie-village.svg");
}
.newsList ul li .kunigami,
.newsTitle .kunigami {
    background-image: url("../images/attraction/name_kunigami-village.svg");
}
.newsList ul li .izena,
.newsTitle .izena {
    background-image: url("../images/attraction/name_izena-village.svg");
}
.newsList ul li .iheya,
.newsTitle .iheya {
    background-image: url("../images/attraction/name_iheya-village.svg");
}
.newsList ul li div {
	position: relative;
    width: calc(100% - 23%);
	display: flex;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
}
.newsList ul li div .date {
	width: 100%;
    height: 20px;
	display: flex;
		justify-content: flex-start;
		align-content: center;
		align-items: center;
    font-size: 1.2em;
	line-height: 30px;
    color: #ed1e79;
}
.newsList ul li div .jyuyo,
#news .detail .jyuyo {
	position: absolute;
	width: 80px;
    height: 30px;
	top: 0;
	right: 0;
	display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
    margin-right: 5px;
    font-size: 1.2em;
	line-height: 1em;
    border-radius: 2px;
	background: #ff0000;
}
#news .detail .jyuyo {
	top: 40px;
	right: 40px;
}
.newsList ul li div .jyuyo::before,
#news .detail .jyuyo::before {
	content: '重 要';
    color: #fff;
}
.newsList ul li div dl {
	width: 100%;
	display: flex;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
    margin-top: 20px;
}
.newsList ul li div dt {
	width: 100%;
	display: block;
    margin-bottom: 10px;
    font-size: 1.8em;
	line-height: 1.4em;
}
.newsList ul li div dl dd {
	width: 100%;
	display: block;
    font-size: 1.3em;
	line-height: 1.8em;
    text-align: justify;
}
.wp-pagenavi {
	width: 100%;
	display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
	margin: 40px auto;
	text-align: center;
	font-size: 1.4em;
	line-height: 1em;
}
.wp-pagenavi a,
.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.prevpostslink {
	min-width: 40px;
    height: 40px;
    display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
    margin: 0 5px;
	text-decoration: none;
    border: none;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}
.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.prevpostslink {
	border: none;
}
.wp-pagenavi a:hover {
	border-color: #ed1e79;
}
.wp-pagenavi a,
.wp-pagenavi span {
    border: none;
    border-radius: 10px;
	box-sizing: border-box;
}
.wp-pagenavi a.page,
.wp-pagenavi span.pages {
	border: none;
}
.wp-pagenavi span.current {
	width: 40px;
    height: 40px;
    display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
    margin: 0 5px;
	font-weight: bold;
	color: #FFF;
	border: none;
	background: #ed1e79;
    box-sizing: border-box;
}
.wp-pagenavi span.extend {
	padding: 5px 10px;
    border: none;
}
.wp-pagenavi .first,
.wp-pagenavi .last {
	width: 60px;
    height: 40px;
    display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
    margin: 0 5px;
	font-size: 0.9em;
	color: #ed1e79;
	border: solid 1px #ed1e79;
	background: #fff;
    box-sizing: border-box;
}

/*-- News（詳細ページ） --*/
.newsTitle {
	width: 100%;
	min-height: 120px;
	display: flex;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	margin-bottom: 20px;
	padding: 0 0 30px 120px;
	border-bottom: solid 1px #CCC;
	box-sizing: border-box;
}
.newsTitle .date {
	width: auto;
	display: block;
	margin: 10px 0 20px;
	font-size: 1.2em;
	line-height: 1em;
	color: #ed1e79;
}
.newsTitle h3 {
	width: 100%;
	display: block;
	font-size: 1.8em;
	line-height: 1.4em;
}
.newsArticle {
	width: 100%;
    display: flex;
		justify-content: space-between;
		align-content: flex-start;
		align-items: flex-start;
        flex-wrap: wrap;
}
.newsArticle div,
.newsArticle .wp-block-group {
	width: 100%;
	display: block;
	padding: 20px 0;
}
/*
.newsArticle h4 {
	position: relative;
	width: 100%;
	min-height: 50px;
    display: flex;
		justify-content: flex-start;
		align-content: center;
		align-items: center;
	margin: 20px 0;
	padding: 5px 20px;
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1.2em;
	color: #0095de;
	border-radius: 25px;
	background: #d9eff4;
	box-sizing: border-box;
}
.newsArticle h4::before {
	position: absolute;
	content: '';
	width: 24px;
	height: 24px;
	top: -8px;
	left: -20px;
    display: block;
	background: url("../images/mark_heart.svg") no-repeat center center;
	background-size: contain;
}*/
.newsArticle h1 {
	font-size: 2.4em;
	line-height: 1.2em;
}
.newsArticle h2 {
	font-size: 2.2em;
	line-height: 1.2em;
}
.newsArticle h3 {
	font-size: 2em;
	line-height: 1.2em;
}
.newsArticle h4 {
	font-size: 1.8em;
	line-height: 1.2em;
}
.newsArticle h5 {
	font-size: 1.6em;
	line-height: 1.2em;
}
.newsArticle h6 {
	font-size: 1.5em;
	line-height: 1.2em;
}
.newsArticle p {
	width: 100%;
    display: block;
	padding: 10px 0;
	font-size: 1.4em;
	font-weight: normal;
	line-height: 1.8em;
	box-sizing: border-box;
}
.newsArticle a {
	text-decoration: underline !important;
	color: #06c;
}
.newsArticle hr {
	width: 100%;
	height: 4px;
	display: block;
	margin: 20px 0;
	border: none;
	background: #ed1e79;
}
.newsArticle .wp-block-image {
	width: 100%;
    display: flex;
		justify-content: space-between;
		align-content: flex-start;
		align-items: flex-start;
        flex-wrap: wrap;
}
.newsArticle .aligncenter {
	display: block;
    margin-left: auto;
    margin-right: auto;
}
.newsArticle .alignleft {
	display: block;
    margin-right: auto;
}
.newsArticle .alignright {
	display: block;
    margin-left: auto;
}
.newsArticle figure {
	padding: 10px 20px;
	box-sizing: border-box;
}
.newsArticle figcaption {
	width: 100%;
	display: block;
	font-size: 1.3em;
	line-height: 1.6em;
	text-align: center;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
お問い合わせ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#contact ul.list {
	width: 100%;
	display: flex;
		justify-content: space-between;
		align-content: stretch;
		align-items: flex-start;
		flex-wrap: wrap;
	margin: 0 auto;
	padding: 20px 5% 40px;
    border: solid 1px #009d95;
    box-sizing: border-box;
}
#contact ul.list .list_title {
	width: 100%;
	display: block;
    margin: 20px 0;
	font-size: 1.8em;
	line-height: 1.2em;
    text-align: center;
}
#contact ul.list li {
	width: 100%;
	display: block;
    margin: 5px 0;
	font-size: 1.4em;
	line-height: 1.8em;
}
#contact ul.list li::before {
	content: "●";
	display: inline-block;
    text-indent: -1em;
    color: #009d95;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
サイトポリシー
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#policy .content {
	margin: 0 auto 20px;
}
#policy .box {
	width: 100%;
	display: flex;
		justify-content: space-between;
		align-content: stretch;
		align-items: flex-start;
		flex-wrap: wrap;
	margin: 0 auto;
	padding: 20px 0;
}
#policy hr {
	width: 100%;
	height: 1px;
	border: none;
	background: #ddd;
}
#policy .date {
	width: auto;
	display: block;
    margin: 20px 0 20px auto;
	font-size: 1.3em;
	line-height: 1.6em;
	text-align: right;
}
#policy .text {
	width: 100%;
	clear: both;
	font-size: 1.3em;
	line-height: 1.8em;
	text-align: justify;
}
#policy .text+.text {
	margin-top: 20px;
}
#policy .text .note {
	font-size: 0.8em;
}
#policy b {
	display: block;
	font-size: 1em;
}
#policy .subject {
	width: 100%;
	clear: both;
	margin-bottom: 15px;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1.6em;
}
#policy .text a {
	color: #06C;
	text-decoration: underline;
}
#policy dl {
	width: 100%;
	display: flex;
		justify-content: space-between;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	margin: 10px 0;
}
#policy dl dt {
	width: 2em;
	float: left;
	padding: 0;
	font-size: 1.3em;
	line-height: 1.8em;
}
#policy dl dd {
	width: calc(100% - 2em);
	display: block;
	font-size: 1.4em;
	line-height: 1.6em;
    text-align: justify;
}
#policy dl ul {
	width: calc(100% - 3em);
	display: flex;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	margin: 10px 0 0 auto;
}
#policy dl ul li {
	width: 100%;
	margin-top: 10px;
	font-size: 1.3em;
	line-height: 1.6em;
}
#policy dl ul.disc li {
	list-style-position: outside;
	list-style-type: disc;
}
#policy ol {
	width: 90%;
	display: flex;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	margin: 0 auto 0;
}
#policy ol b {
	display: block;
	font-size: 1.1em;
    text-indent: -2em;
}
#policy ol li {
	width: 100%;
	display: list-item;
	margin: 10px 0;
	font-size: 1.3em;
	line-height: 1.6em;
	list-style: decimal outside;
}
#policy .contact {
	width: 100%;
	clear: both;
	margin: 0 auto 20px;
	font-size: 1.6em;
	line-height: 1em;
	text-align: center;
}
#policy .tel {
	width: 100%;
	clear: both;
	padding-top: 20px;
	font-size: 2em;
	line-height: 1.4em;
	text-align: center;
}
#policy .tel span {
	font-size: 1.6em;
}
#policy .tel span.small {
	font-size: 0.6em;
}
#policy .privacy_contact {
	width: 49%;
	display: block;
}
#policy .privacy_contact h2 {
	width: 100%;
	margin-bottom: 5px;
	padding: 10px 0;
	font-size: 1.1em;
	line-height: 1.4em;
	background: #edf7f9;
	text-align: center;
	border: none;
}
#policy .privacy_contact h3 {
	width: 100%;
	padding: 5px 0;
	font-size: 1.4em;
	line-height: 1.4em;
	text-align: center;
}
#policy .privacy_contact address {
	width: 100%;
	margin-bottom: 5px;
	padding: 5px 0;
	font-size: 1.1em;
	line-height: 1.4em;
	text-align: center;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
サイトマップ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#sitemap .content {
	margin: 0 auto 20px;
}
#sitemap ul.list {
	width: 100%;
	display: flex;
		justify-content: space-between;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	margin: 0 auto;
}
#sitemap ul.list li {
	width: 100%;
	display: block;
    align-self: stretch;
    border-bottom: solid 1px #DDD;
}
#sitemap ul.list li:nth-last-of-type(-n+2) {
	border-bottom: none;
}
#sitemap ul.list li a,
#sitemap ul.list li p {
	width: 100%;
	display: block;
	padding: 30px 0;
	font-size: 1.3em;
	line-height: 1em;
}
#sitemap ul.list li p {
	padding: 40px 10px;
}
#sitemap ul.list li a::before {
	content: '';
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-right: 10px;
	background: url("../images/arrow.svg") no-repeat center bottom 5px;
	background-size: contain;
	filter: invert(29%) sepia(65%) saturate(7471%) hue-rotate(321deg) brightness(96%) contrast(93%);
}
#sitemap ul.list li a:hover {
    transition: all 200ms;
    opacity: 0.5;
}
#sitemap ul.list li.half {
	width: 49%;
}
#sitemap ul.listS {
	width: calc(100% - 20px);
	display: flex;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	margin: 0 0 10px 20px;
}
#sitemap ul.listS li {
	width: 25%;
    display: block;
	margin-bottom: 30px;
	border: none;
}
#sitemap ul.list li.half ul.listS li {
	width: 100%;
}
#sitemap ul.listS li a {
	width: 100%;
	display: block;
	padding: 5px 0 5px 30px;
	font-size: 1.3em;
	line-height: 1.2em;
    box-sizing: border-box;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【共通】沖縄県自治体バナー
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.municipality {
	width: 100%;
	display: flex;
		justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    padding: 40px 0;
    /*background: #f7f7f7;*/
}
body.home .municipality {
	background: #f7f7f7;
}
.municipality ul {
	width: 90%;
    display: flex;
		justify-content: space-between;
        align-content: flex-start;
        align-items: flex-start;
		flex-wrap: wrap;
    margin: 0 auto;
}
.municipality ul li {
	width: 24%;
    display: block;
    margin: 5px 0;
}
.municipality ul li a {
	width: 100%;
    height: 70px;
    display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
    border: solid 1px #ccc;
    background: #fff;
    box-sizing: border-box;
}
.municipality ul li a img {
	height: 90%;
    aspect-ratio: 72/25;
    display: block;
    object-fit: contain;
    object-position: 50% 50%;
}
.municipality ul li a:hover {
	transition: all 200ms;
    opacity: 0.5;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【Home】バナー広告
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.banner_ad {
	position: relative;
    width: 100%;
	display: flex;
		justify-content: center;
        align-content: center;
        align-items: center;
		flex-wrap: wrap;
    padding: 30px 0;
    background: #ed1e79;
    box-sizing: border-box;
}

/*スライド*/
.banner_ad ul.slider_ad {
    position: relative;
    width: 100%;
    display: block;
	margin: 0;
}
.banner_ad ul.slider_ad li {
	width: auto;
    display: inline-block;
    margin: 10px;
	background: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.banner_ad ul.slider_ad li img {
    width: 100%;
	aspect-ratio: 40/12;
	display: block;
    object-fit: cover;
	object-position: 50% 50%;
}
.banner_ad ul.slider_ad li a:hover {
    opacity: 0.5;
    transition: all 200ms;
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Footer
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
footer {
	position: relative;
    width: 100%;
	display: flex;
		justify-content: center;
		align-content: space-between;
		align-items: center;
        flex-wrap: wrap;
    background: url("../images/footer_bg.webp") no-repeat center top;
	background-size: cover;
}
footer #page-top{
	position: fixed;
	width: 60px;
	right: 10px;
	bottom: 0;
	z-index: 30000;
    border-radius: 30px;
	background: #ed1e79;
}
footer .inner {
	position: relative;
    width: 90%;
    max-width: 1600px;
    display: flex;
		justify-content: center;
		align-content: flex-start;
		align-items: flex-start;
        flex-wrap: wrap;
    margin: 0 auto;
	padding: 80px 0 480px;
}
footer .info {
	position: relative;
    width: 100%;
    display: flex;
		justify-content: center;
		align-content: flex-start;
		align-items: flex-start;
        flex-wrap: wrap;
}
footer .info a.logo {
	width: 24%;
    display: block;
    margin-bottom: 40px;
}
footer .info address {
	width: 100%;
    display: flex;
		justify-content: center;
		align-content: flex-start;
		align-items: flex-start;
        flex-wrap: wrap;
    margin-bottom: 10px;
}
footer .info address p {
	width: 100%;
    display: block;
	font-size: 1.4em;
    line-height: 1.8em;
	text-align: center;
}
footer .info address p a {
	text-decoration: none;
}
footer .info ul {
	width: 100%;
	display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		/*flex-wrap: wrap;*/
    margin: 20px 0;
}
footer .info ul li {
	display: block;
	margin: 0 10px;
}
footer .info ul li a.btnDetail {
	width: 200px;
	height: 40px;
	font-size: 1.3em;
}
footer .bottom {
	position: absolute;
    width: 100%;
	bottom: 0;
    display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
        flex-wrap: wrap;
	padding: 40px 0;
}
footer .bottom ul {
	width: 100%;
	display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		/*flex-wrap: wrap;*/
    margin-bottom: 40px;
}
footer .bottom ul li {
	display: block;
	padding-right: 20px;
	font-size: 1.2em;
	line-height: 1em;
}
footer .bottom ul li+li {
	padding-left: 20px;
	border-left: solid 1px rgba(0,0,0,0.5);
}
footer .bottom ul li a {
	color: #000;
}
footer .bottom ul li a:hover {
	text-decoration: underline;
    color: #54c3f1;
}
footer .bottom .copyright {
	width: 100%;
    display: block;
	font-size: 1em;
    line-height: 1em;
	text-align: center;
}