@charset "utf-8";
/* CSS Document */
@media all {
	html {
		font-size: 16px;
	}
	body {
		margin: 0;
		padding: 0;
		font-family: "Zen Kaku Gothic New", sans-serif;
		font-weight: 700;
		font-style: normal;
		color: #606060;
	}
	p, ul, ol, li, dl, dt, dd {
		margin: 0;
		padding: 0;
	}
	li {
		list-style: none;
	}
	h1, h2, h3, h4, h5, th {
		margin: 0;
	}
	iframe {
		border: 0;
	}
	a {
		text-decoration: none;
		color: #333333;
		transition: .3s;
	}
	a:hover {
		opacity: .7;
	}
	img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	* {
		box-sizing: border-box;
	}
	#pcview h1, #firstview h1, #latestnews h2, #restaurant h2, #tourism h2, #experience h2, #volunteer h2 {
		font-family: ab-kirigirisu, sans-serif;
		font-style: normal;
		font-weight: 400;
	}
	header {
		width: 100%;
		position: fixed;
		z-index: 2;
	}
	#pcview {
		position: fixed;
		width: 100%;
		height: 100vh;
		display: flex;
	}
	#pcview h1 {
		width: 5em;
		position: absolute;
		top: 30%;
		right: 50%;
		transform: translate(50%, -30%);
		z-index: 1;
		font-size: 3rem;
		color: #fff;
		text-align: center;
		line-height: 1.4;
		background: url("../images/maintitle_bg.png") no-repeat center 60%;
		background-size: 45%;
		padding-top: 40px;
	}
	#pcview p {
		width: 12em;
		font-size: 1.4rem;
		color: #fff;
		position: absolute;
		top: 65%;
		right: 50%;
		transform: translate(50%, -65%);
		z-index: 1;
		letter-spacing: 1.5px;
		text-align: center;
	}
	#pcview .image {
		width: 130px;
		position: absolute;
		bottom: 7%;
		right: 50%;
		transform: translate(50%, -7%);
		z-index: 1;
	}
	#firstview h1 {
		width: 250px;
		position: absolute;
		top: 50%;
		right: 50%;
		transform: translate(50%, -50%);
		z-index: 1;
		font-size: 3rem;
		color: #fff;
		text-align: center;
		line-height: 1.4;
		background: url("../images/maintitle_bg.png") no-repeat center 60%;
		background-size: 45%;
		padding-top: 40px;
	}
	#pcview h1 span, #firstview h1 span {
		display: block;
		font-size: 2rem;
		position: relative;
	}
	#pcview h1 span::before, #firstview h1 span::before {
		content: "";
		display: block;
		position: absolute;
		top: -1.1em;
		left: calc(50% - 90px);
		width: 180px;
		height: 30px;
		background: url(../images/maintitle_concierge.png) no-repeat;
		background-size: contain;
	}
	#contents {
		overflow: scroll;
		-ms-overflow-style: none;
		scrollbar-width: none;
		scroll-behavior: smooth;
	}
}
@media screen and (max-width: 767px) {
	/*ドロワーメニュー*/
	#drawermenu {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		z-index: 1;
	}
	nav {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 185vw;
		overflow-y: scroll;
		background: #5cbe51;
		padding-bottom: 40px;
	}
	/*ドロワーメニュー開閉ボタン*/
	#nav_toggle {
		display: block;
		width: 45px;
		height: 45px;
		position: absolute;
		top: 15px;
		right: 20px;
		z-index: 4;
		background-color: #92C7CF;
		padding: 10px;
		border-radius: 50%;
	}
	#nav_toggle div {
		position: relative;
	}
	#nav_toggle span {
		display: block;
		height: 2px;
		background: #fff;
		position: absolute;
		width: 100%;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;
	}
	#nav_toggle span:nth-child(1) {
		top: 4px;
	}
	#nav_toggle span:nth-child(2) {
		top: 12px;
	}
	#nav_toggle span:nth-child(3) {
		top: 20px;
	}
	/*開閉ボタンopen時*/
	.open #nav_toggle span:nth-child(1) {
		top: 12px;
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.open #nav_toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.open #nav_toggle span:nth-child(3) {
		top: 12px;
		-webkit-transform: rotate(-135deg);
		-moz-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}
	.menulist {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: 0 auto 20px;
		background: url("../images/drawermenu_bg.jpg") no-repeat #5cbe51;
		background-size: contain;
		background-position: top;
		padding-top: 48vw;
	}
	.menulist li {
		width: 17em;
		margin: 0 auto;
		border-bottom: solid 1px #fff;
		padding: 10px 0 10px 60px;
		position: relative;
	}
	.menulist li::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(2)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_2.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(3)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_3.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(4)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_4.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(5)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_5.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(6)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_7.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(7)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_6.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(8)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_8.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(9)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_9.png") no-repeat;
		background-size: contain;
	}
	.menulist li a {
		display: block;
		width: 100%;
		height: 100%;
		font-size: 1.2rem;
		color: #fff6a1;
	}
	.snslist {
		width: 85%;
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
	}
	.snslist li {
		width: calc(100% / 6);
		padding: 12px 12px 0 12px;
	}
	#contents {
		height: 100vh;
	}
}
@media screen and (min-width: 768px) {
.pcslideshow {
  width: 100%;
  height: 100vh !important;
}
	.menulist {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
	}
	.menulist li {
		width: 100%;
		border-bottom: solid 1px #fff;
		padding: 8px 0 8px 50px;
		position: relative;
	}
	.menulist li::before {
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(2)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_2.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(3)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_3.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(4)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_4.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(5)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_5.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(6)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_7.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(7)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_6.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(8)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_8.png") no-repeat;
		background-size: contain;
	}
	.menulist li:nth-of-type(9)::before{
		position: absolute;
		content: "";
		left: 0;
		bottom: 0;
		width: 40px;
		height: 40px;
		background: url("../images/pc_illust_menu_9.png") no-repeat;
		background-size: contain;
	}
	.menulist li a {
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0);
		font-size: 1.2rem;
	}
	.menulist li a:hover {
		background: rgba(255, 255, 255, .3);
	}
	.snslist {
		width: 65%;
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
	}
	.snslist li {
		width: calc(100% / 3);
		padding: 3px 10px 0 10px;
	}
	.slidearea {
		width: calc(100% - 950px);
		z-index: -1;
		position: relative;
	}
	.slidetext {
		display: block;
		width: 24vw;
		position: absolute;
		top: 50%;
		right: 50%;
		transform: translate(50%, -50%);
		z-index: 1;
	}
	.maincontents {
		width: 950px;
		background: url("../images/pc_main_bg.jpg") no-repeat center 20%;
	}
	.maincontents::after {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		right: 15px;
		width: 330px;
		height: 75px;
		background: url("../images/pc_illust_takeshima.png") no-repeat;
		background-size: contain;
	}
	nav {
		position: absolute;
		top: 40px;
		right: 40px;
		width: 280px;
	}
	#contents {
		width: 500px;
		height: 100vh;
		position: absolute;
		top: 0;
		right: 360px;
		background-color: #fff;
		z-index: 2;
	}
	#contents::-webkit-scrollbar {
		display: none;
	}
	.sp {
		display: none;
	}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.slidearea {
		display: none;
	}
	.maincontents {
		width: 100%;
	}
	nav {
		right: 20px;
		width: 240px;
	}
	.menulist li a {
		font-size: 1rem;
	}
	#contents {
		width: 480px;
		right: 280px;
	}
}