@charset "UTF-8";
/* CSS Document */

main * {
box-sizing: border-box;
}
/* =========================================================
　周辺観光
========================================================= */


/* カテゴリータイトル
--------------------------------------------------------- */
@media screen and (max-width:767px) {
	.category {
	background: url(images/category_title_bg.jpg) no-repeat center top;
	background-size: 150% auto;
	}
}
@media screen and (min-width:768px) , print {
	.category {
	background: url(images/category_title_bg.jpg) no-repeat center top;
	background-size: 100% auto;
	}
}
#culture,#art,#nature {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#course {
width: 100%;
}


/* 観光地
--------------------------------------------------------- */
@media screen and (max-width:767px) {
	.corner {
	margin: 0 auto 6em;
	max-width: 1000px;
	font-size: 80%;
	line-height: 1.6;
	padding: 0 4%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}
	.corner_box {
	width: 100%;
	margin: 0 0 3em;
	}
	.corner_box img {
	margin: 0 auto 1em;
	}
	.corner_box h3 {
	color: #053;
	font-weight: bold;
	font-size: 150%;
	text-align: center;
	line-height: 1;
	margin: 0;
	}
	.corner_box .etc {
	text-align: center;
	}
	.corner_box a {
	background: url(../common/img/arrow_r.png) no-repeat left center;
	background-size: 6px auto;
	padding-left: 8px;
	}
	/*-------------------- */
	/*カテゴリー内容
	-------------------- */
	.sp_main img {
	width: 100%;
	margin-top: 45px;
	margin-bottom: -6px;
	}
	/*カテゴリー内容ここまで
	-------------------- */
}


@media screen and (min-width:768px) , print {
	.corner {
	margin: 0 auto 6em;
	max-width: 1000px;
	/*font-size: 80%;*/
	line-height: 1.6;
	/*padding: 0 4%;*/}
	.corner_box {
	/*width: 32%;*/
	margin: 0 0 3em;
	}
	.corner_box img {
	margin: 0 auto 1em;
	}
	.corner_box h3 {
	color: #053;
	font-weight: bold;
	font-size: 150%;
	text-align: center;
	line-height: 1;
	margin: 0;
	}
	.corner_box .etc {
	text-align: center;
	}
	.corner_box a {
	background: url(../common/img/arrow_r.png) no-repeat left center;
	background-size: 6px auto;
	padding-left: 8px;
	}
}


/*カテゴリー内容
-------------------- */
.sp_main img {
display: none;
}
#culture .sightseeing_title {
background-image: url(images/culture_tit_bg.png);
background-position: 0;
background-repeat: no-repeat;
height: 200px;
width: 100%;
padding: 45px;
}
#art .sightseeing_title {
background-image: url(images/art_tit_bg.png);
background-position: 0;
background-repeat: no-repeat;
height: 180px;
width: 100%;
padding: 45px;
}
#nature .sightseeing_title {
background-image: url(images/nature_tit_bg.png);
background-position: 0;
background-repeat: no-repeat;
height: 200px;
width: 100%;
padding: 45px;
}
#course .sightseeing_title {
background-image: url(images/course_tit_bg.png);
background-position: 0;
background-repeat: no-repeat;
height: 200px;
width: 100%;
padding: 45px;
}
#culture .sightseeing_title h2,
#art .sightseeing_title h2,
#nature .sightseeing_title h2,
#course .sightseeing_title h2 {
font-family: "游明朝体","ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
max-width: 400px;
font-size: 3.5em;
font-weight: 600;
color: #333;
margin-top: 10px;
}
#culture .sightseeing_title p,
#art .sightseeing_title p,
#nature .sightseeing_title p,
#course .sightseeing_title p {
max-width: 450px;
font-size: 1.2em;
line-height: 2.0em;
}/*カテゴリー内容ここまで
-------------------- */


/* 一覧
--------------------------------------------------------- */
/* Controls
---------------------------------------------------------------------- */
.controls {
max-width: 1000px;
display: flex;
justify-content: space-between;
position: relative;
}
.controls[data-filter="all"] {
border: none;
border-top: 5px solid #a11404;
color: #fff;
}
.controls button {
font-family: "游明朝体","ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
font-weight: bold;
border: none;
border-top: 5px solid #a11404;
background-color: #EEE;
white-space: normal;
/* width: 33.2%; */
width: 19.54%;
padding: .6em 0 .8em;
/*margin: 0px -1px;*/
text-align: center;
font-size: 1em;
/*
background-image: url(images/arrow.png);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 20px;
*/
outline: none;
}
.controls button::after {
content: "";
width: 7px;
height: 7px;
border: 3px solid;
border-color: transparent transparent #a11404 #a11404;
display: block;
transform: rotate(-45deg);
margin: 0 auto;
}
.control[data-filter=".around"] {
border-top: 5px solid #ce891e;
}
.controls .around_b::after {
content: "";
width: 7px;
height: 7px;
border: 3px solid;
border-color: transparent transparent #ce891e #ce891e;
display: block;
transform: rotate(-45deg);
margin: 0 auto;
}
.control[data-filter=".play"] {
border-top: 5px solid #ceb81e;
}
.controls .play_b::after {
content: "";
width: 7px;
height: 7px;
border: 3px solid;
border-color: transparent transparent #ceb81e #ceb81e;
display: block;
transform: rotate(-45deg);
margin: 0 auto;
}
.control[data-filter=".family"] {
border-top: 5px solid #577800;
}
.controls .family_b::after {
content: "";
width: 7px;
height: 7px;
border: 3px solid;
border-color: transparent transparent #577800 #577800;
display: block;
transform: rotate(-45deg);
margin: 0 auto;
}
.control[data-filter=".gulf"] {
border-top: 5px solid #005533;
}
.controls .gulf_b::after {
content: "";
width: 7px;
height: 7px;
border: 3px solid;
border-color: transparent transparent #005533 #005533;
display: block;
transform: rotate(-45deg);
margin: 0 auto;
}
.controls a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
text-indent: 100%; /*テキスト非表示*/
white-space: nowrap; /*テキスト非表示*/
overflow: hidden; /*テキスト非表示*/
}
.container {
/*padding:2%;*/
text-align: justify;
margin-top: 3em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.container .mix {
width: 24%;
background-color: #efefef;
padding: 10px;
}
.container .gap {
background-color: rgba(255,255,255,0.00);
width: 24%;
}
.container .mix img {
width: 100%;
height: auto;
}
#container .mix {
display: none;
}
@media screen and (max-width:767px) {
	.controls {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	}
	.controls button {
	width: 49.7%;
	margin-bottom: 0.6%;
	}
}


/* Target Elements
---------------------------------------------------------------------- */
.mix,
.gap {
display: inline-block;
vertical-align: top;
}
.mix {
background: #fff;
/*border-top:5rem solid currentColor;*/
border-radius: 2px;
margin-bottom: 3rem;
position: relative;
}
.mix:before {
/*content: '';*/
display: inline-block;
}
/*
.mix.aroundtext {
padding: 1em;
}
*/
.mix .text {
padding: 1em .5em;
}
.mix h3 {
font-weight: bold;
color: #333;
font-size: 1.3em;
}
.mix .text p {
color: #333;
line-height: #ce891e;
line-height: 1.8;
/*font-size: 1.2em;*/
}
.mix a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
text-indent: 100%; /*テキスト非表示*/
white-space: nowrap; /*テキスト非表示*/
overflow: hidden; /*テキスト非表示*/
}
.mix a:hover {
opacity:0.2;
filter: alpha(opacity=20);
-ms-filter: "alpha( opacity=20 )";
background: #fff;
}
.around::before {
content: "景色";
display: block;
background-color: #ce891e;
color: #fff;
border-radius: 5px;
max-width: 30%;
text-align: center;
position: absolute;
top: 5px;
left: 5px;
padding: 3px 13px;
}
.play::before {
content: "体験";
display: block;
background-color: #ceb81e;
color: #fff;
border-radius: 5px;
max-width: 30%;
text-align: center;
position: absolute;
top: 5px;
left: 5px;
padding: 3px 13px;
}
.family::before {
content: "ファミリー";
display: block;
background-color: #570;
color: #fff;
border-radius: 5px;
max-width: 38%;
text-align: center;
position: absolute;
top: 5px;
left: 5px;
padding: 3px 13px;
}
.gulf::before {
content: "ゴルフ";
display: block;
background-color: #053;
color: #fff;
border-radius: 5px;
max-width: 30%;
text-align: center;
position: absolute;
top: 5px;
left: 5px;
padding: 3px 13px;
}
.container .big {
width: 49.5%;
content:"";
}
/*
.more a{
display: block;
background-color: #654424;
padding: 0.5em; 
text-align: center;
color: #fff;
background-image: url(../img/arrow_w_l.png);
background-repeat: no-repeat;
background-size: 12px 20px;
background-position: right 10px center;
}
.more {
margin-top: 2em;
}
*/
@media screen and (max-width:767px){
	.container {
	display: block;
	}
	.container .mix {
	width: 100%;
	display: flex;
	}
	.container .mix img {
	width: 50%;
	height: 100%;
	max-width: 300px;
	}
	.mix .text {
	padding: 1em .5em 1em 1.5em;
	}
}
@media screen and (max-width:767px) {
	.container {
	display: block;
	}
	.container .mix {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	}
	.container .mix img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	}
}


/* 中ページレイアウト
--------------------------------------------------------- */
.corner {
text-align: center;
margin: 0 auto 6em;
}
.corner_inner {
max-width: 800px;
margin: 0 auto;
}
.corner_inner h3 {
text-align: center;
font-size: 3em;
font-weight: bold;
color: #333;
margin: 1.5em 0;
line-height: 1.2;
}
.corner_box {
margin: 1em 0 4em;
}
.corner_inner h4 {
font-size: 2em;
line-height: 1.3;
padding: 0 0 7px;
color: #333;
border-bottom: 1px solid #bb2210;
margin: 1em 0 .5em;
text-align: left;
}
.corner_inner img {
width: 100%;
height: auto;
max-width: 800px;
margin: 1em 0;
}
.corner_inner p {
text-align: left;
line-height: 1.8;
}
.back_btn p {}
.back_btn a {
background: #b21 url(../common/img/arrow_w.png) no-repeat 98% center;
background-size: 7px auto;
padding: 1em;
color: #FFF;
width: 100%;
max-width: 800px;
display: block;
margin: 0 auto;
}
@media screen and (max-width:767px) {
	.corner {
	padding: 0 20px;
	}
}