/* ******************************************************************
 *	File name		: top.css
 *	Summary			: css base
 * ******************************************************************
 */
/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */


/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */

main h2{
	position:relative;
	width:100%;
	margin:0 0 25px;
	padding-top:40px;
	font-weight:bold;
	font-size:1.9rem;
	text-align:center;
	line-height:1.0;
	color:#FFF;
	}
	main h2::before{
		content:" ";
		position:absolute;
		top:-20px;
		left:calc(50% - 87px);
		width:174px;
		height:174px;
		border-top:1px solid rgba(255,255,255,1);
		border-left:1px solid rgba(255,255,255,1);
		border-right:1px solid transparent;
		border-bottom:1px solid transparent;
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
		transform:rotate(45deg);
		z-index:-1;
}

/* ------------------------------------------------
   main_img
------------------------------------------------- */

#main_img{
	position:relative;
	width:100%;
	height:933px;
	overflow:hidden;
	}
	#main_img::after{
		content:" ";
		position:absolute;
		left:calc(50% - 960px);
		top:0px;
		width:1920px;
		height:933px;
		background:url(../../image/top/main_img.png) no-repeat 0 0;
		z-index:1;
	}
	#main_img #main_box{
		position:relative;
		width:100%;
		height:520px;
		margin:108px 0 142px;
		overflow:hidden;
		z-index:5;
		}
		#main_img #main_box::after{
			content:" ";
			position:absolute;
			left:calc(50% - 438px);
			bottom:0px;
			width:260px;
			height:130px;
			background:url(../../image/top/Osaki_Colors_bg.png) no-repeat;
			z-index:100;
		}
		#main_img h1{
			position:absolute;
			top:0px;
			left:calc(50% - 438px);
			width:260px;
			height:100%;
			text-align:center;
			z-index:99;
			background:#F7F3C6;
		}
		#main_img h1 img{
			position:absolute;
			top:95px;
			left:calc(50% - 105px);
			width:210px;
			height:auto;
}
/* --- responsive --- */
@media screen and (max-width:880px){
	#main_img h1{
		left:0px;
	}
}
@media screen and (max-width:640px){
	#main_img h1{
		width:130px;
	}
	#main_img h1 img{
		top:95px;
		left:calc(50% - 52px);
		width:105px;
		height:auto;
	}
}

/* -----------------------------------------------------------------
   slide_contents
----------------------------------------------------------------- */

#slide_contents{
	position:relative;
	width:100%;
	height:520px;
	overflow:hidden;
}
#slide_clone{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:520px;
	overflow:hidden;
	}
	#slide_contents ul,
	#slide_clone ul{
		position:relative;
		width:100%;
		height:100%;
		display:grid;
		padding-right:24px;
		grid-template-columns:repeat(330px 1fr);
		grid-template-rows:repeat(calc(50% - 12px) 1fr);
		column-gap:24px;
		row-gap:24px;
	}
	#slide_contents ul li,
	#slide_clone ul li{
		position:relative;
		border:5px solid #FFF;
		background:#FFF;
		overflow:hidden;/* 520 */
		-moz-border-radius:30px;
		-webkit-border-radius:30px;
		border-radius:30px;
	}
	#slide_contents ul li,
	#slide_clone ul li{
		grid-row:1 / 3;
	}
	#slide_contents ul li.mini,
	#slide_clone ul li.mini{
		grid-row:1 / 2;
	}
	#slide_contents ul li.mini + li.mini,
	#slide_clone ul li.mini + li.mini{
		grid-row:2 / 3;
}
#slide_contents ul li figure,
#slide_clone ul li figure{
	width:100%;
	height:100%;
	overflow:hidden;
	}
	#slide_contents ul li img,
	#slide_clone ul li img{
		height:100%;
		width:auto;
		object-fit:cover;
}

#patasaki{
	position:absolute;
	left:calc(50% + 261px);
	bottom:100px;
	width:270px;
	height:325px;
	z-index:100;
}

/* -----------------------------------------------------------------
   about
----------------------------------------------------------------- */

#about{
	position:relative;
	width:1000px;
	max-width:100%;
	min-height:480px;
	margin:-22px auto 70px;
	padding-left:555px;
	}
	#about h2{
		position:absolute;
		top:-60px;
		left:15px;
		width:auto;
		margin:0 0 25px;
		padding-top:0px;
	}
	#about h2::before{
		display:none;
	}
	#about p{
		font-size:1.0rem;
		line-height:1.85;
	}
	#about p strong{
		font-size:1.3rem;
	}

#osaki_area{
	position:absolute;
	bottom:30px;
	left:330px;
	width:160px;
	height:160px;
	background:#FFF;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.4);
	-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.4);
	box-shadow:5px 5px 5px rgba(0,0,0,0.4);
	}
	#osaki_area p{
		position:absolute;
		top:3px;
		left:3px;
		width:calc(100% - 6px);
		height:calc(100% - 6px);
		text-align:center;
		border:2px solid #FFE100;
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
		color:#000;
	}
	#osaki_area p a{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:relative;
		width:100%;
		height:100%;
		font-size:1.0rem;
		color:#000;
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
		transition-duration:0.5s;
		}
		#osaki_area p a:hover{
			background:rgba(255,225,0,0.2);
	}
	#osaki_area p a > span{
		padding-bottom:20px;
	}
	#osaki_area p a > span span{
		display:block;
		margin:7px 0 0;
		position:relative;
	}
	#osaki_area p a > span span::before,
	#osaki_area p a > span span::after{
		content:" ";
		display:block;
		position:absolute;
		top:0px;
		left:50%;
		border:8px solid transparent;
		border-left:10px solid rgba(0,0,0,1);
	}
	#osaki_area p a > span span::before{
		left:calc(50% - 5px);
	}
	#osaki_area p a > span span::after{
		left:calc(50% + 5px);
	}
	#osaki_area p a b{
		font-size:1.2rem;
}

/* --- responsive --- */
@media screen and (max-width:1000px){
	#about{
		min-height:0px;
		padding-left:270px;
		padding-right:20px;
		}
		#about h2{
			left:20px;
			width:250px;
		}
		#about p{
			font-size:0.87rem;
			line-height:1.85;
		}
		#about p strong{
			font-size:1.0rem;
	}

	#osaki_area{
		top:160px;
		bottom:auto;
		left:130px;
		width:120px;
		height:120px;
		}
		#osaki_area p a{
			font-size:0.77rem;
		}
		#osaki_area p a > span{
			padding-bottom:0px;
		}
		#osaki_area p a > span span{
			display:none;
		}
		#osaki_area p a b{
			font-size:0.9rem;
	}
}

/* --- responsive --- */
@media screen and (max-width:640px){
	#about{
		margin:-60px auto 70px;
		padding:0 20px;
		}
		#about h2{
			display:none;
	}
	#osaki_area{
		position:relative;
		top:0px;
		bottom:0px;
		left:0px;
		width:100%;
		height:30px;
		margin:15px 0 0;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		}
		#osaki_area p{
			-moz-border-radius:6px;
			-webkit-border-radius:6px;
			border-radius:6px;
		}
		#osaki_area p a{
			-moz-border-radius:6px;
			-webkit-border-radius:6px;
			border-radius:6px;
		}
		#osaki_area p br{
			display:none;
		}
}

/* -----------------------------------------------------------------
   news
----------------------------------------------------------------- */

#news{
	position:relative;
	width:980px;
	max-width:100%;
	margin:0 auto 50px;
}
/* --- responsive --- */
@media screen and (max-width:1000px){
	#news{
		padding:0 20px;
	}
}

/* news_menu */
#news #news_menu{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	width:100%;
}
#news #news_menu ul{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:center;
	flex-wrap:wrap;
	position:relative;
	width:100%;
	list-style:none;
	}
	#news #news_menu ul li{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:relative;
		width:94px;
		height:30px;
		margin:0 4px 7px;
		font-size:0.84rem;
		text-align:center;
		background:#FFF;
		border:1px solid #FFF;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		color:#FFF;
		cursor:pointer;
		line-height:1;
		transition-duration:0.5s;
	}
	#news #news_menu ul li#tm_all{
		background:#FFF;
		border:1px solid #75BB29;
		color:#75BB29;
	}
	#news #news_menu ul li#tm_news{
		background:#6CB7C7;
	}
	#news #news_menu ul li#tm_event{
		background:#75BB29;
	}
	#news #news_menu ul li#tm_tourist{
		background:#F19DB1;
	}
	#news #news_menu ul li#tm_htax{
		background:#978B9E;
	}
	#news #news_menu ul li#tm_patazaki{
		background:#F4A000;
	}

	/* active */
	#news #news_menu ul li::before{
		content:" ";
		position:absolute;
		bottom:-14px;
		left:calc(50% - 4px);
		border:7px solid transparent;
		border-top:7px solid rgba(255,255,255,1);
		opacity:0;
		transition-duration:0.5s;
	}
	#news #news_menu ul li::after{
		content:" ";
		position:absolute;
		bottom:-12px;
		left:calc(50% - 4px);
		border:7px solid transparent;
		border-top:7px solid rgba(255,255,255,1);
		opacity:0;
		transition-duration:0.5s;
	}
	#news #news_menu ul li:hover::before,
	#news #news_menu ul li.active::before,
	#news #news_menu ul li:hover::after,
	#news #news_menu ul li.active::after{
		opacity:1;
	}

	#news #news_menu ul li#tm_all::before{
		border-top:7px solid #75BB29;
	}
	#news #news_menu ul li#tm_all::after{
		border-top:7px solid rgba(255,255,255,1);
	}
	#news #news_menu ul li#tm_news::after{
		border-top:7px solid #6CB7C7;
	}
	#news #news_menu ul li#tm_event::after{
		border-top:7px solid #75BB29;
	}
	#news #news_menu ul li#tm_tourist::after{
		border-top:7px solid #F19DB1;
	}
	#news #news_menu ul li#tm_htax::after{
		border-top:7px solid #978B9E;
	}
	#news #news_menu ul li#tm_patazaki::after{
		border-top:7px solid #F4A000;
}

/* --- responsive --- */
@media(max-width:767px){
	#news #news_menu ul{
		justify-content:space-around;
		}
		#news #news_menu ul li{
			margin:0 0 10px;
	}
}


/* news_list */
#news #news_list ul{
	position:relative;
	width:100%;
	max-width:100%;
	list-style:none;
	text-align:left;
	}
	#news #news_list ul:after{
		content:" ";
		position:absolute;
		bottom:0px;
		left:0px;
		width:100%;
		height:1px;
		background:#FFF;
	}
	#news #news_list ul li{
		display:none;
		position:relative;
		width:100%;
		margin:0px;
		padding:13px 0px 13px 185px;
		font-weight:bold;
		font-size:0.87rem;
		color:#000;
		border-bottom:1px dotted rgba(255,255,255,0.5);
		line-height:1.4;
		}
		#news #news_list ul li span.date{
			display:block;
			position:absolute;
			top:13px;
			left:0px;
			font-weight:normal;
			font-size:inherit;
			text-align:left;
			color:#000;
		}
		#news #news_list ul li::before{
			content:" ";
			display:-webkit-flex;
			display:flex;
			justify-content:center;
			align-items:center;
			position:absolute;
			top:11px;
			left:80px;
			width:84px;
			height:22px;
			margin:0 4px 7px;
			font-size:0.72rem;
			text-align:center;
			background:#FFF;
			border:1px solid #FFF;
			-moz-border-radius:6px;
			-webkit-border-radius:6px;
			border-radius:6px;
			color:#FFF;
			cursor:pointer;
			line-height:1;
			transition-duration:0.5s;
			}
			#news #news_list ul li.news::before{
				content:"お知らせ";
				background:#6CB7C7;
			}
			#news #news_list ul li.event::before{
				content:"イベント";
				background:#75BB29;
			}
			#news #news_list ul li.tourist::before{
				content:"観光物産";
				background:#F19DB1;
			}
			#news #news_list ul li.htax::before{
				content:"ふるさと納税";
				background:#978B9E;
			}
			#news #news_list ul li.patazaki::before{
				content:"パタ崎さん";
				background:#F4A000;
			}

		#news #news_list ul li a{
			display:block;
			position:relative;
			width:calc(100% + 185px);
			min-height:calc(100% + 26px);
			margin:-13px 0 -13px -185px;
			padding:13px 0 13px 185px;
			font-weight:bold;
			text-decoration:underline;
			color:#000;
			z-index:100;
			transition-duration:0.5s;
			}
			#news #news_list ul li a:hover{
				background:rgba(255,255,255,0.1)
}
/* --- responsive --- */
@media(max-width:767px){
	#news #news_list ul{
		margin:0 0 25px;
		}
		#news #news_list ul li{
			padding:38px 0px 13px 0px;
			}
			#news #news_list ul li:before{
				height:20px;
				font-size:0.77rem;
			}
			#news #news_list ul li a{
				width:100%;
				margin:-38px 0 -13px 0px;
				padding:38px 0 13px 0px;
	}
}

#news_list_page{
	position:relative;
	width:100%;
	padding:10px;
	text-align:center;
	}
	#news_list_page a{
		display:inline-block;
		position:relative;
		width:100px;
		height:20px;
	}
	#news_list_page a::before,
	#news_list_page a::after{
		content:" ";
		position:absolute;
		left:calc(50% - 4px);
		border:7px solid transparent;
		border-top:7px solid rgba(0,0,0,1);
	}
	#news_list_page a::before{
		top:0px;
	}
	#news_list_page a::after{
		top:8px;
}
/* --- responsive --- */
@media(max-width:767px){
}

/* -----------------------------------------------------------------
   more
----------------------------------------------------------------- */

.more_btn{
	position:relative;
	text-align:center;
}
.more_btn a{
	display:inline-block;
	margin:0 auto;
	padding:7px 25px;
	font-size:0.9rem;
	background:#F1E900;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.4);
	-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.4);
	box-shadow:3px 3px 2px rgba(0,0,0,0.4);
	color:#000;
	transition-duration:0.5s;
	}
	.more_btn a:hover{
		text-decoration:none;
		opacity:0.7;
}

/* -----------------------------------------------------------------
   tour
----------------------------------------------------------------- */

#tour,
#tourist{
	width:100%;
	margin:0 auto 100px;
	padding:20px 0;
	overflow:hidden;
}

/* -----------------------------------------------------------------
   turn_contents
----------------------------------------------------------------- */

.turn_contents{
	position:relative;
	width:100%;
	min-height:350px;
	margin:0 0 40px;
	padding:0px !important;
	list-style:none;
	cursor:grab;
	}
	.turn_contents li{
		position:absolute;
		left:calc(50%);
		width:360px;
		font-size:1.0rem;
		background:#FFF;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
		opacity:1;
		transition-duration:0.5s;
		transform:scale(0);
	}
	.turn_contents li a{
		display:block;
		width:100%;
		height:100%;
		min-height:340px;
		padding:12px 20px 40px;
		text-decoration:none;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
		color:#000;
		transition-duration:0.5s;
		user-select:none;
		pointer-events:none;
		}
		.turn_contents li a:hover{
			background:rgba(0,0,0,0.1);
		}
		.turn_contents li a *{
			pointer-events:none;
	}

	.turn_contents li.position_center{
		left:calc(50% - 180px);
		margin:0px;
		transform:scale(1);
		opacity:1;
		z-index:10;
	}
	.turn_contents li.position_left{
		left:calc(50% - 468px);
		margin:0 -36px;
		transform: scale(0.8);
		z-index:9;
		opacity:0.8;
	}
	.turn_contents li.position_right{
		left:calc(50% + 180px);
		margin:0 -36px;
		transform: scale(0.8);
		z-index:9;
		opacity:0.8;
	}
	.turn_contents li.position_left_2{
		left:calc(50% - 562px);
		margin:0 -108px;
		transform: scale(0.4) !important;
		z-index:8;
		opacity:0.5;
	}
	.turn_contents li.position_right_2{
		left:calc(50% + 418px);
		margin:0 -108px;
		transform: scale(0.4) !important;
		z-index:8;
		opacity:0.5;
	}

	.turn_contents li a *,
	.turn_contents li a *{
		opacity:0;
	}
	.turn_contents li.position_center a *,
	.turn_contents li.position_left a *,
	.turn_contents li.position_right a *{
		opacity:1;
	}

	.turn_contents li figure{
		width:320px;
		height:200px;
		margin:0 0 5px;
		overflow:hidden;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
	}

	.turn_contents li p.ttitle{
		height:3.0rem;
		font-weight:500;
		font-size:1.1rem;
		overflow:hidden;
	}
	#tourist_turn.turn_contents li p.ttitle{
		height:1.5rem;
		margin:0 0 7px;
	}

	/* category */
	.turn_contents li .category{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:relative;
		width:116px;
		height:26px;
		margin:0 0 5px;
		font-size:0.87rem;
		background:#777;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		color:#FFF;
		}
		.turn_contents li .category.datebus{
			background:#6657A3;
	}

	/* plus_info */
	.turn_contents li .plus_info{
		font-weight:500;
		font-size:0.9rem;
	}

	/* date */
	.turn_contents li .date{
		position:absolute;
		left:20px;
		bottom:10px;
		width:calc(100% - 40px);
		height:25px;
		padding-top:5px;
		font-weight:500;
		border-top:1px solid #000;
		font-size:0.87rem;
	}


/* -----------------------------------------------------------------
   instagram
----------------------------------------------------------------- */

#instagram{
	position:relative;
	margin:0 auto 100px;
	}
	#instagram h2 img{
		display:inline-block;
		width:30px;
		height:30px;
		margin:-30px 0 7px;
}


#instagram #insta_select{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:center;
	flex-wrap:wrap;
	position:relative;
	margin:0 auto 10px;
	border-bottom:1px solid #FFF798;
	}
	#instagram #insta_select div{
		margin:0 10px;
		padding:7px 20px;
		font-weight:500;
		font-size:0.87rem;
		background:#FFF;
		-moz-border-radius:6px 6px 0 0;
		-webkit-border-radius:6px 6px 0 0;
		border-radius:6px 6px 0 0;
		transition-duration:0.5s;
		cursor:pointer;
		color:#999;
	}
	#instagram #insta_select div:hover,
	#instagram #insta_select div.active{
		background:#FFF798;
		color:#000;
}

#instagram .more_btn{
	margin:25px auto 0;
}

#i_dozo_disp{
	display:none;
}

/* -----------------------------------------------------------------
   links
----------------------------------------------------------------- */

#links{
	position:relative;
	width:100%;
	margin:0 0 60px;
	text-align:center;
}
#links ul{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	width:1000px;
	max-width:100%;
	margin:0 auto;
	padding:10px 10px 3px;
	border:1px solid rgba(255,255,255,0.9);
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	list-style:none;
}
#links ul li{
	width:235px;
	max-width:24.5%;
	margin:0 0 7px;
}
/* --- responsive --- */
@media screen and (max-width:1000px){
	#links{
		padding:0 20px;
	}
}
@media screen and (max-width:640px){
	#links ul li{
		width:48%;
		max-width:48%;
	}
}