@charset "utf-8";

/* フェードインの仕込み */
.box-basic,
.hot-cnt ul li,
.thumb-slider-outer,
.charm,
.chiikiokoshi,
.about li,
.bn-list {
	opacity: 0;
	position: relative;
	top: 30px;
}

.home .charm {
	top: 0;
}

.hot-cnt ul li + li,
.about li + li {
	top: 60px;
}

.hot-cnt ul li + li + li {
	top: 90px;
}

/* 波 */
.home .wave-area .wave {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 480px;
	font-size: 0;
	overflow: hidden;
	background-image: url(../images/index/index_wave01.png);
	background-position: 0 0;
	background-size: auto 100%;
}

.home .wave-area .wave-top {
	height: 11px;
}

.home .wave-area .wave-bottom {
	background-image: url(../images/index/index_wave02.png);
	background-position: 0 0;
	background-size: auto 100%;
	height: 14px;
	top: auto;
	bottom: 0
}

@media screen and (max-width: 750px) {
/* 波 */
.home .wave-area .wave {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	overflow: hidden;
	background-image: url(../images/index/index_wave01.png);
	background-position: 0 0;
	background-size: auto 100%;
}

.home .wave-area .wave-top {
	height: 5px;
}

.home .wave-area .wave-bottom {
	background-image: url(../images/index/index_wave02.png);
	background-position: 0 0;
	background-size: auto 100%;
	height: 7px;
	top: auto;
	bottom: 0
}
}

/* スライダー */
.slider-outer {
	position: relative;
}

.slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #fff;
}

.slider .bx-wrapper {
	width: 1280px;
	margin-bottom: 0;
}

.slider .bx-wrapper .bx-viewport {
	overflow: visible !important;
}

.slider-thumb {
	overflow: hidden;
	position: absolute;
	bottom: -60px;
	width: 100%;
	text-align: center;
}

.slider-thumb li {
	margin-right: 14px;
	display: inline-block;
}

.slider-thumb li:last-child {
	margin-right: 0;
}

.slider-thumb li a {
	display: block;
	width: 140px;
	height: 47px;
	border-radius: 10px;
}

.slider-thumb li img {
	border-radius: 10px;
}

.slider-thumb li a.active {
	display: block;
	width: 136px;
	height: 43px;
	border: 2px solid #008390;
	overflow: hidden;
	position: relative;
	top: 3px;
}

.slider-thumb li a.active img {
	margin: -2px 0 0 -2px;
}

@media screen and (max-width: 750px) {
.slider-thumb {
	bottom: -20px;
	overflow: visible;
}

.slider-thumb li {
	width: 10px;
	height: 10px;
	background: none;
	overflow: visible;
}

.slider-thumb li a {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	border: 1px solid #000;
	background: none;
}

.slider-thumb li a.active {
	width: 10px;
	height: 10px;
	border: 1px solid #008391;
	background: #008391;
}

.slider-thumb li img {
	display: none;
}
}

/* 特集リンク */
.special-outer {
	margin-bottom: 86px;
}

.special {
	position: relative;
	padding-top: 50px;
	height: 696px;
	background: url(../images/index/index_bg02.png) no-repeat;
	background-position: 20px 110px;
}

.special h2,
.hot-cnt h2 {
	margin-bottom: 20px;
}

/*.special .photo {
	position: absolute;
	top: 155px;
	right: 140px;
}*/

.special .catch-txt {
	margin-bottom: 30px;
	text-align: center;
}

.special .sp-list {
	margin: 32px auto 0;
	width: 1008px;
	overflow: hidden;
}

.special .sp-list li {
	float: left;
	width: 496px;
}

.special .sp-list li:not(:last-child) {
	margin-right: 16px;
}

@media screen and (max-width: 750px) {
.special-outer {
	margin-bottom: 0;
}

.special .sp-list,
.special .sp-list li {
	float: none;
	width:100%;
}

.special .sp-list li:not(:last-child) {
	margin-right: 0;
	margin-bottom: 3%;
}
}

.hot-cnt ul {
	position: relative;
	top: -50px;
	margin: 0 auto;
	width: 1044px;
	overflow: hidden;
}

.hot-cnt ul .catch-txt {
	padding: 0 25px 0 45px;
}

.hot-cnt ul li {
	float: left;
	margin-right: 20px;
	width: 328px;
	position: relative;
}

.hot-cnt ul li:hover {
	opacity: .7;
}

.hot-cnt .box-new {
	margin: 0 auto 16px;
	padding-top: 8px;
	width: 300px;
	border-bottom: 1px dotted #000;
	background: #fff;
	border-radius: 8px 8px 0 0;
}

.hot-cnt .box-new p {
	color: #D20425;
	font-size: 18px;
	font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	text-align: center;
}

.hot-cnt ul li:first-child dl:hover {
	background: rgba(223, 183, 26, 0.1);
}

.hot-cnt ul li:nth-child(2) dl:hover {
	background: rgba(64, 148, 189, 0.1);
}

.hot-cnt ul li:last-child dl:hover {
	background: rgba(195, 76, 82, 0.1);
}

.hot-cnt .box-new dt {
	padding: 8px 8px 0 8px;
	color: #AAA;
	border-top: 1px dotted #000;
}

.hot-cnt .box-new dd {
	padding: 0 8px 8px 8px;
	font-weight: bold;
}

.hot-cnt ul li .index-fukidashi {
	position: absolute;
	bottom: 0px;
	left: 260px;
	width: 90px;
}

.hot-cnt ul li .index-fukidashi img {
	width: 100%;
}

.hot-cnt ul li:last-child {
	margin-right: 0;
}

.hot-cnt ul li > a {
	display: block;
	padding-bottom: 30px;
}

.hot-cnt ul li a:hover,
.hot-cnt ul li a img:hover {
	text-decoration: none;
	opacity: 1;
}

.hot-cnt ul li a.color1,
.hot-cnt ul li a.color2,
.hot-cnt ul li a.color3 {
	background: none !important;
}

.hot-cnt ul li a.color1 {
	color: #DFB71A;
	background: none !important;
}

.hot-cnt ul li a.color2 {
	color: #4094BD;
}

.hot-cnt ul li a.color3 {
	color: #C34C52;
}

.hot-cnt ul li a.color1:before,
.hot-cnt ul li a.color1:after,
.hot-cnt ul li a.color2:before,
.hot-cnt ul li a.color2:after,
.hot-cnt ul li a.color3:before,
.hot-cnt ul li a.color3:after {
	position: absolute;
	right: 15px;
	display: block;
	content: '';
	width: 10px;
	height: 2px;
}

.hot-cnt ul li a.color1:before,
.hot-cnt ul li a.color2:before,
.hot-cnt ul li a.color3:before {
	top: 17px;
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.hot-cnt ul li a.color1:after,
.hot-cnt ul li a.color2:after,
.hot-cnt ul li a.color3:after {
	top: 23px;
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.hot-cnt ul li a.color1:before,
.hot-cnt ul li a.color1:after {background: #DFB71A;}
.hot-cnt ul li a.color2:before,
.hot-cnt ul li a.color2:after {background: #4094BD;}
.hot-cnt ul li a.color3:before,
.hot-cnt ul li a.color3:after {background: #C34C52;}

@media screen and (max-width: 750px) {
h2 img {
	width: 96%;
}

.special {
	margin-bottom: 40px;
	height: initial;
	height: auto;
	background: none;
}

.special .photo {
	position: static;
	margin-top: 10px;
}

.hot-cnt ul {
	top: 0;
	padding: 20px 0;
	width: 100%;
}

.hot-cnt ul li {
	float: none;
	margin-bottom: 15px;
	width: 100%;
}

.hot-cnt ul li .index-fukidashi {
	position: absolute;
	top: auto;
	right: calc(50% - 170px);
	left: auto;
	bottom: 6px;
}

.hot-cnt .box-new {
	width: 85%;
}
}

/* 地域の魅力 */
.charm {
	position: relative;
	top: -30px;
	z-index: 1000;
	padding: 150px 0;
	width: 901px;
	height: 356px;
	background: url(../images/index/index_h05_pc.png) no-repeat;
}

.charm .catch-txt {
	margin: 0 auto 30px;
	width: 270px;
}

@media screen and (max-width: 750px) {
.charm {
	top: -10px;
	padding: 25% 0 0px;
	width: 100%;
	height: initial;
	height: auto;
	background: url(../images/index/index_h05_sp.png) no-repeat;
	background-size: 100%;
}

.charm .catch-txt {
	margin: 0px auto 10px;
}

.charm .mb40 {
	margin-bottom: 0 !important;
}
}

/* 地域おこし協力隊 */
.chiikiokoshi {
	background: url(../images/common/com_bg03.png);
}

.chiikiokoshi .box-basic {
	position: relative;
	top: -20px;
	height: 562px;
	background-image:
		url(../images/index/index_ph02.png),
		url(../images/index/index_h06_pc.png);
	background-repeat: no-repeat, no-repeat;
	background-position: 86% 92%, 50% 0;
	background-size: 364px 210px, 1000px 420px;
}

.chiikiokoshi .box-basic .chiiki-inner {
	position: absolute;
	left: 225px;
	padding-top: 280px;
	width: 355px;
	height: 405px;
}

.chiikiokoshi .box-basic .chiiki-inner .catch-txt {
	margin: 0 auto 20px;
	width: 300px;
}

.chiikiokoshi .box-basic .chiiki-inner .btn-style {
	margin-bottom: 24px;
}

.chiikiokoshi dl {
	position: relative;
	left: -66px;
	width: 526px;
	overflow: hidden;
}

.chiikiokoshi dl dt {
	float: left;
	width: 110px;
}

.chiikiokoshi dl dt img {
	width: 100%;
}

.chiikiokoshi dl dd {
	position: relative;
	box-sizing: border-box;
	padding-left: 120px;
	width: 520px
}

.chiikiokoshi dl dd .title {
	margin-bottom: 10px;
	padding-bottom: 4px;
	border-bottom: 1px dotted #000;
}

.chiikiokoshi dl dd .title img {
	width: 196px;
}

.chiikiokoshi .report-title,
.chiikiokoshi .report-title br,
.chiikiokoshi .report-title span {
	line-height: 1.2 !important;
}

.chiikiokoshi .report-title {
	font-size: 18px;
	font-weight: bold;
}

.chiikiokoshi .report-title span {
	display: inline-block;
	padding-left: 16px;
	font-size: 14px;
	font-weight: normal;
}

.chiikiokoshi .read-btn {
	position: absolute;
	top: 50%;
	right: 0%;
}

.chiikiokoshi .read-btn a {
	display: block;
	padding: 4px 0;
	width: 80px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background: #000;
	border-radius: 18px;
}

.chiikiokoshi .read-btn a:hover {
	color: #333;
	background-color: transparent;
	border: 1px solid #000;
}

.chiikiokoshi .read-btn a:before,
.chiikiokoshi .read-btn a:after {
	position: absolute;
	right: 10px;
	display: block;
	content: '';
	width: 5px;
	height: 2px;
	background-color: #fff;
}
.chiikiokoshi .read-btn a:before {
	top: 14px;
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.chiikiokoshi .read-btn a:after {
	top: 18px;
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.chiikiokoshi .read-btn a:hover:before,
.chiikiokoshi .read-btn a:hover:after {
	background-color: #000;
}

@media screen and (max-width: 750px) {
.chiikiokoshi .box-basic {
	top: 20px;
	padding: 110% 0 50px;
	height: initial;
	height: auto;
	background: url(../images/index/index_h06_sp.png) no-repeat;
	background-size: 100%;
}

.chiikiokoshi .box-basic .chiiki-inner {
	position: static;
	padding-top: 0;
	width: 100%;
	height: initail;
	height: auto;
}

.chiikiokoshi .box-basic .chiiki-inner .catch-txt {
	margin: 0 auto;
	width: 92%;
}

.chiikiokoshi .box-basic .btn-style a {
	margin: 0 auto;
}

.chiikiokoshi dl {
	position: static;
	margin: 0 auto;
	width: 92%;
}

.chiikiokoshi dl dd {
	width: 100%;
}

.chiikiokoshi dl dd .report-title {
	padding-right: 88px;
}

.chiikiokoshi .report-title span {
	padding-left: 0;
}
}

/* JOINについて Facebook */
.about {
	margin: 0 auto;
	width: 990px;
}

.about li {
	float: left;
	width: 480px;
	height: 371px;
}

.about li > div {
	height: 350px;
}

.about li:first-child {
	margin-right: 30px;
}

.fb-area:hover {
	opacity: 1 !important;
}

.fb_iframe_widget,
.fb_iframe_widget > span,
.fb_iframe_widget > span > iframe {
	width: 100% !important;
}

@media screen and (max-width: 750px) {
.about {
	width: 100%;
}

.about li {
	width: 100%;
	height: initial;
	height: auto;
}

.about li:first-child {
	margin-right: 0;
}

.about li > div {
	height: initial;
	height: auto;
}
}

/* バナーリンクスライダー */
.bn-list {
	padding: 40px;
	width: 1000px;
	background: url(../images/common/com_bg04.png) 0 0;
}

@media screen and (max-width: 750px) {
.bn-list {
	padding: 40px 0;
	width: 100%;
	overflow: hidden;
}

.bn-list .bx-prev,
.bn-list .bx-next {
	display: none;
}

.bn-list {width: 100%; height: 100%; overflow-x: hidden;}
.bn-list .slide_all {width: 100%;margin: 0 auto;height: 205px;position: relative;}
.bn-list .slide_wrap {width: 300%; position: absolute; left: 50%; margin-left: -145px;}
.bn-list .bx-wrapper {max-width: 300% !important}
.bn-list .bx-viewport {overflow: visible !important;}
.bn-list .bn-slider {width: 100%;}
.bn-list .bn-slider li {width: 100%;}
.bn-list .bn-slider li img {width: 100%; vertical-align: bottom;}
}

.thumb-slider li img {
	width: 214px;
	height: 142px;
}

.thumb-slider-outer > img {
	width: 100%;
}