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


/* =========================================================
　周辺観光
========================================================= */


/* カテゴリータイトル
--------------------------------------------------------- */
.c_title::before {
content: "Sightseeing";
}
@media screen and (max-width:767px) {
	.c_title {
	background: url(../common/img/category_title.png) no-repeat center bottom, url(images/category_title_bg.jpg) no-repeat center center;
	background-size: 220px auto, cover;
	}
}
@media screen and (min-width:768px) , print {
	.c_title {
	background: url(../common/img/category_title.png) no-repeat center bottom, url(images/category_title_bg.jpg) no-repeat center center;
	background-size: 340px auto, cover;
	}
}

/*カテゴリー内容
-------------------- */
.sp_mainimg {
display: none;
}
#art .sightseeing_title {
background-image: url(images/art_tit_bg.png);
background-position: 0;
background-size: cover;
background-repeat: no-repeat;
height: 220px;
width: 100%;
padding: 35px;
margin-bottom: 30px;
}
#nature .sightseeing_title{
background-image: url(images/nature_tit_bg.png);
background-position: 0;
background-repeat: no-repeat;
background-size: cover;
height: 250px;
width: 100%;
padding: 35px;
margin-bottom: 30px;
}
#family .sightseeing_title {
background-image: url(images/family_title_bg.png);
background-position: 0;
background-repeat: no-repeat;
background-size: cover;
height: 240px;
width: 100%;
padding: 35px;
margin-bottom: 30px;
}
#course .sightseeing_title {
background-image: url(images/course_tit_bg.png);
background-position: 0;
background-repeat: no-repeat;
background-size: cover;
height: 215px;
width: 100%;
padding: 35px;
margin-bottom: 30px;
}
#family .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: #006633;

/*margin-top: 10px;*/
}
#family .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;
}


/* モデルコース
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (max-width: 767px) {/* 767px以下 */
	.modelcourse section {
	margin: 0;
	width: 100%;
	}
	.modelcourse iframe {
	border: none;
	width: 100%;
	height: 400px;
	}
	.modelcourse .dl_course {
	color: #fff;
	}
	.modelcourse section div p {
	margin: 1.5em 0;
	}
	section.course1 {
	margin-bottom: 6em;
	}
}
@media screen and (min-width: 768px) {/* 768px以上 */
	.modelcourse section {
	margin: 0 auto 3em;
	max-width: 1200px;
	}
	.modelcourse section div p {
	margin: 1.5em 0;
	}
	.modelcourse section div {
	width: 48%;
	margin: 0 1% 0 0;
	float: left;
	}
	.modelcourse iframe {
	border: none;
	width: 100%;
	margin: 0;
	}
	.modelcourse .course1 iframe {
	height: 377px;
	}
	.modelcourse .dl_course {
	color: #fff;
	width: 48%;
	margin: 0 0% 0 1%;
	float: right;
	}
}
.modelcourse .dl_course dt {
background: #3b87cb;
margin: 0 0 0 0;
text-align: center;
width: 8.5em;
padding: .5em;
font-size: 120%;
margin-bottom: -2px;
}
.modelcourse .dl_course dt.hotel {
background: #932;
}
.modelcourse .dl_course dd {
background: #c29b34;
margin: -2.56em 0 1.4em 8.5em;
padding: .5em;
position: relative;
font-size: 120%;
}
.modelcourse .dl_course dd::after {
position: absolute;
left: -4.6em;
top: 2.8em;
content: "";
display: block;
width: 20px;
height: 10px;
margin: 0 0 -50px 0;
background: url("images/Modelcourse_bg_arrow.png") no-repeat left top;
background-size: 20px 10px;
}
.modelcourse .dl_course dd:last-child::after {
display: none;
}
.corner {
max-width: 1000px;
margin: 0 auto;
}
/* 一覧
--------------------------------------------------------- */
/* Controls
---------------------------------------------------------------------- */
.controls {
max-width: 1000px;
display: flex;
justify-content: space-between;
position: relative;
}
.controls[data-filter="all"] {
border: none;
background-color: #ff789c;
color: #fff;
}
.controls button {
font-family: "游明朝体","ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
font-weight: bold;
border: none;
border-top: 5px solid #c89533;
background: hsla(0,0%,0%,0.05);
white-space: normal;
/* width: 33.2%; */
width: 19.54%;
padding: 0.6em 0em 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 #c89533 #c89533;
display: block;
transform: rotate(-45deg);
margin: 0 auto;
}
.control[data-filter=".around"] {
border-top: 5px solid #968533;
}
.controls .around_b::after {
content: "";
width: 7px;
height: 7px;
border: 3px solid;
border-color:transparent transparent #968533 #968533;
display: block;
transform: rotate(-45deg);
margin: 0 auto;
}
.control[data-filter=".play"] {
border-top: 5px solid #647533;
}
.controls .play_b::after {
content: "";
width: 7px;
height: 7px;
border: 3px solid;
border-color:transparent transparent #647533 #647533;
display: block;
transform: rotate(-45deg);
margin: 0 auto;
}
.control[data-filter=".family"] {
border-top: 5px solid #326533;
}
.controls .family_b::after {
content: "";
width: 7px;
height: 7px;
border: 3px solid;
border-color:transparent transparent #326533 #326533;
display: block;
transform: rotate(-45deg);
margin: 0 auto;
}
.control[data-filter=".gulf"] {
border-top: 5px solid #003b33;
}
.controls .gulf_b::after {
content: "";
width: 7px;
height: 7px;
border: 3px solid;
border-color:transparent transparent #003b33 #003b33;
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;
}
.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.around .text {
padding: 1em;
}
*/
.mix .text {
padding: 1em 0.5em;
}
.mix h3 {
font-weight: bold;
color: #333;
font-size: 1.3em;
}
.mix .text p {
color: #333;
}
.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: #968533;
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: #647533;
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: #326533;
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: #003b33;
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 0.5em 1em 1.5em;
	}
}
@media screen and (max-width:767px) {
	.container {
	display: block;
	/*padding: 0 20px;*/
	}
	.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: #005632;
margin: 1em 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 0;
color: #333;
border-bottom: 1px solid #005632;
margin: 1em 0 0.5em 0;
text-align: left;
}
.corner_inner img {
width: 100%;
height: auto;
max-width: 800px;
margin: 1em 0 1em
}
.corner_inner p {
text-align: left;
}
.back_btn p {}
.back_btn a {
background: #cc9933 url(../common/img/arrow_w.png) no-repeat 98% center;
background-size: 7px auto;
padding: 1em;
color: #FFFFFF;
width: 100%;
max-width: 800px;
display: block;
margin: 0 auto;
}


@media screen and (max-width:767px) {
	.corner {
	padding: 0 20px;
	}
}