@charset "UTF-8";
.bgimg_spot {
background-image: url("/asset/img/spot/cat_mainimg.jpg");
}
.bgimg_convention {
background-image: url("/asset/img/convention/cat_mainimg.jpg");
}
.spot_menu_ttl {
display: flex;
justify-content: space-between;
align-items: center;
}
.spot_menu_catul {
display: flex;
justify-content: space-between;
width: 680px;
}
.spot_menu_areaul {
display: flex;
justify-content: space-between;
width: 680px;
}
.spot_menu_catul li {
width: calc((100% - 80px) / 5);
}
.spot_menu_areaul li {
width: calc((100% - 80px) / 5);
}

.convention-facility .spot_menu_catul { width: 740px; }
.convention-facility .spot_menu_catul li { width: 95px; }
.convention-facility .spot_menu_catul li:first-child { width: 210px;}
.convention-facility .spot_menu_catul li:nth-child(2) { width: 150px;}
.course .spot_menu_catul {width: 850px;}
.course .spot_menu_catul li:first-child { width: 180px;}
.course .spot_menu_catul li:nth-child(2) { width: 146px;}
.course .spot_menu_catul li:nth-child(5) { width: 146px;}

/* スポット検索ボックス ------------------------- */
.spot_search_ttl {
display: flex;
justify-content: space-between;
height: 60px;
background-color: #f9f7f5;
font-size: 1.6rem;
line-height: 60px;
cursor: pointer;
padding: 0 15px 0 24px;
}
.spot_search_ttl div {
font-size: 1.6rem;
font-weight: bold;
}
.spot_search_ttl div span {
font-size: 2.2rem;
color: #2ea7e0;
margin-right: 16px;
font-weight: normal;
}
#search_arrow {
display: block;
width: 30px;
height: 30px;
background-color: #3c3c3c;
margin-top: 15px;
}
#search_arrow i {
display: block;
width: 12px;
height: 12px;
margin: 8px auto 0;
}
.spot_search_form {
background-color: #fff;
border-bottom: 10px solid #f9f7f5;
border-left: 10px solid #f9f7f5;
border-right: 10px solid #f9f7f5;
padding: 20px 40px 40px 40px;
}
.search_box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.search_jenre {
width: 110px;
padding: 20px 0 20px;
border-bottom: solid 1px #2ea7e0;
font-size: 1.5rem;
font-weight: bold;
position: relative;
}
.search_jenre span {
position: absolute;
display: block;
left: 15px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.search_item {
width: calc( 100% - 110px );
padding: 20px 0 20px 30px;
border-bottom: solid 1px #d4d4d4;
}
.search_item ul li {
display: inline-block;
margin:3px 30px 3px 0px;
font-size: 1.5rem;
}
#cat_search .search_item li {
font-weight: bold;
}
.item_label {
display: flex;
align-items: center;
cursor: pointer;
}
.item_label input {
margin: 0;
width: 0;
opacity: 0;
/*display:none;*/
}
.item_label:hover > .item_input {
transform: scale(1.1);
}
.item_label input:focus + .item_input {
transform: scale(1.1);
}
.item_label input:checked + .item_input {
background: rgba(46,167,224,1.00);
}
.item_label input + .item_input i {
display: none;
}
.item_label input:checked + .item_input i {
display: block;
}
.item_label input:checked + .item_input i::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background-image: url("/asset/img/common/form_check_12x12_fff.svgz");
background-size: 10px 10px;
}
.item_input {
position: relative;
top: 0;
left: 0;
display: block;
width: 20px;
height: 20px;
border: solid 1px #2ea7e0;
background-color: #f9f7f5;
border-radius: 50%;
transition: all .15s linear;
margin-right: 10px;
}
.item_txt {
margin-left: 12px;
display: block;
}
.search_ctl_btn {
margin-top: 30px;
display: flex;
justify-content: center;
}

#search-reset, 
#search-submit {
display: block;
width: 212px;
}
#search-reset {
margin-right: 10px;
}
#clear_b, #search_b {
display: block;
width: 100%;
padding: 12px 0;
line-height: 1;
font-size: 1.5rem;
text-align: center;
cursor: pointer;
transition:all 0.3s ease 0s;
pointer-events: none;
opacity: 0.5;
}
#clear_b {
border: solid 1px #969696;
background-color: #fff;
}
#search_b {
border: solid 1px #3c3c3c;
background-color: #3c3c3c;
color: #fff;
}
#clear_b.standby, 
#search_b.standby {
opacity: 1;
pointer-events: auto;
}
#clear_b.standby:hover, 
#search_b.standby:hover {
opacity: 0.7;
}

/* Seach Block Open Close -------------- */
#search_wrapper,
#kwd_box_wrapper{
position: relative;
transform: translate3d(0,0,0);
transition:all 0.25s ease 0s;
}
#cat_search,#ara_search{ height: 74px; }

#search_wrapper:not(.open){
height: 60px!important;
overflow: hidden;
}
#search_wrapper.open #search_form{
opacity: 1;
transition:all 0.4s ease 0s;
}
#search_wrapper:not(.open) #search_form{
opacity: 0;
transition:all 0.3s ease 0s;
}
#search_arrow i{
transition:transform 0.3s ease 0s;
}
#search_wrapper.open #search_arrow i{
transform: rotate(180deg);
}


/* kwd_search -------------- */
#kwd_see{ height: 0px; opacity: 0; }
#kwd_see.open{ height: 140px; opacity: 1; }
#kwd_gourmet,#kwd_stay,#kwd_shopping{ height: 0px; opacity: 0; }
#kwd_gourmet.open,#kwd_stay.open,#kwd_shopping.open{ height: 107px; opacity: 1; }

.kwd_search{
position: absolute;
top:0;
left: 0;
overflow: hidden;
transition:all 0.2s ease 0s;
}
.kwd_search.open{ overflow:visible; }
.kwd_search.open.close{ opacity: 0!important; }

/* 結果のページで検索条件表示 */
#search_words{
margin-bottom: 10px;
}
#search_words li{
display: inline-block;
margin: 0 8px 8px 0;
font-size: 1.4rem;
font-weight: bold;
line-height: 1;
padding: 8px 8px 7px 9px;
/*border: rgba(66,66,66,1.00) solid 1px;*/
background-color: rgba(137,137,137,1.00);
color: #f9f7f5;
border-radius: 3px;
}



/* スポット一覧 ------------------------- */
.spot_list {
margin-bottom: 10px;
}
.spot_list .list_item {
border: solid 1px #d4d4d4;
}
.spot_list .list_item:nth-child(4n) {
margin-right: 0px;
}
.list_item .txt_wrap {
padding: 20px 20px 70px;
}
.list_item .spot_area {
font-size: 1.3rem;
font-weight: bold;
display: block;
color: #2ea7e0;
}
.inline_a{
display: inline!important;
}
.list_item .spot_adrs {
font-size: 1.2rem;
font-weight: bold;
display: block;
color: #2ea7e0;
letter-spacing: 0em;
}
.list_item h3 {
font-size: 1.6rem;
margin-bottom: 12px;
}
.list_item p {
letter-spacing: 0.03em;
}
.list_item .spot_tag {
font-size: 1.2rem;
display: block;
width: 226px;
position: absolute;
left: 20px;
bottom: 20px;
letter-spacing: 0em;
color: #7e7e7e;
}
.list_item .img_wrap {
background-color: #f9f7f5;
height: 177px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.list_item .img_wrap img {
max-height: 177px;
width: auto;
margin: 0 auto;
}
.spotl_areaguide_btn {
display: block;
width: 40px;
height: 310px;
position: absolute;
left: 0;
top: 70px;
}
.spotl_areaguide_btn a {
display: flex;
align-items: center;
padding-top: 20px;
width: 100%;
height: 150px;
background-color: #3c3c3c;
color: #fff;
text-align: center;
font-weight: bold;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
-moz-font-feature-settings: "pkna";
-webkit-font-feature-settings: "pkna";
font-feature-settings: "pkna";
letter-spacing: 0.15em;
}
.spotl_areaguide_btn a:first-child {
margin-bottom: 10px;
}
.spotl_areaguide_btn a i {
margin: 0 0 6px 2px; 
}

#spotlist_bannar_wrap {
padding: 50px 0;
border-bottom: solid 1px #d4d4d4;
}
.spotlist_bannar {
display: flex;
/*justify-content: center;*/
justify-content: space-between;
margin: 0 auto;
}
.spotlist_bannar li {
width: 570px;
}
.spotlist_bannar li a {
display: block;
}
.spotlist_bannar li a img {
height: auto;
}
/* スポット詳細 ------------------------- */
#spot_detail_wrap {
}
#spot_detail_con {
position: relative;
}
#spot_detail_main {
width: 862px;
background-color: #fff;
padding: 60px 50px 50px;
}
#spot_detail_main h1 {
font-size: 2.4rem;
margin-bottom: 30px;
line-height: 1.6;
}
#spot_detail_sub {
width: 318px;
}
#spot_daccss_wrap {
background-color: #f5f1ed;
border-top: solid 10px #f5f1ed;
border-right: solid 10px #f5f1ed;
border-bottom: solid 10px #f5f1ed;
}
/*  スライダー -- */
#spot_slider_wrap {
margin-bottom: 50px;
}
#main_slide {
background-color: #f9f7f5;
}
#main_slide .slick-track {
display: flex;
align-items: center;
}
#main_slide .slick-slide {
width: 742px;
}
#main_slide .slick-slide img {
max-width: 100%;
max-height: 500px;
width: auto;
height: auto;
margin: 0 auto;
}
#thumb_slide {
  margin: 20px 0 0;
}
#thumb_slide .slick-track {
transform: none !important;
transform: unset !important;
display: flex;
align-items: center;
}
#thumb_slide .slick-slide {
cursor: pointer;
width: 107px;
height: 107px!important;
height: auto;
margin: 0 20px 0 0;
transition-property: all;
transition-duration: 0.4s;
display: flex;
align-items: center;
background-color: #f9f7f5;
border:solid 2px #f5f1ed;
}
#thumb_slide .slick-slide:nth-child(6) {
margin-right: 0px;
}
#thumb_slide .slick-slide img {
display: block;
max-width: 103px;
max-height: 103px;
width: auto;
height: auto;
margin: auto;
}
#thumb_slide .slick-slide:hover, 
#thumb_slide .slick-current {
opacity: .7;
border:solid 2px #2ea7e0;
}

/*  /スライダー -- */
#spot_dimg {
margin-bottom: 50px;
background-color: #f9f7f5;
display: flex;
align-items: center;
}
#spot_dimg img {
max-width: 742px;
max-height: 500px;
width: auto;
height: auto;
margin: 0 auto;
}
#spot_dcatch {
padding: 40px;
margin-bottom: 30px;
position: relative;
font-size: 1.5rem;
}
#spot_dcatch::before {
content:url("/asset/img/common/bracketsplus_2px60x60.svgz");
width: 60px;
height: 60px;
position: absolute;
left: 0;
top:0;
}
#spot_dcatch::after {
content:url("/asset/img/common/bracketsplus_2px60x60.svgz");
width: 60px;
height: 60px;
position: absolute;
transform:rotate(180deg);
right: 0;
bottom:0;
}
#spot_dinfo {
border-top: solid 1px #d4d4d4;
border-bottom: solid 1px #d4d4d4;
}
#spot_dinfo dl {
display: flex;
justify-content: space-between;
padding: 16px 0;
}
#spot_dinfo dl:nth-child(odd) {
background-color: #f9f7f5;
}
#spot_dinfo dl dt {
width: 136px;
font-size: 1.5rem;
font-weight: bold;
padding-left: 30px;
}
#spot_dinfo dl dd {
width: calc( 100% - 136px );
font-size: 1.5rem;
padding: 0 30px;
}
#spot_dinfo dl dd a {
word-break: break-all;
}
#spot_daccssttl {
background-color: #3c3c3c;
color: #fff;
}
#spot_daccssttl span {
display: block;
position: relative;
text-align: center;
width: 120px;
margin: 0 auto;
font-size: 1.6rem;
color: #fff;
height: 46px;
line-height: 46px;
border-bottom: solid 2px #2ea7e0;
letter-spacing: 0.15em;
}
#spot_daccssttl span::before {
content: "";
position: absolute;
border: 10px solid transparent;
border-top: 10px solid #2ea7e0;
top: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
#spot_dadress {
text-align: center;
font-weight: bold;
padding: 20px 20px 16px;
}
#spot_dmap {
width: 308px;
}
#spot_dmap iframe {
width: 100%;
}
#spot_daccss {
background-color: #fff;
padding: 26px 28px;
font-size: 1.5rem;
}
#spot_daccss dt {
font-weight: bold;
margin-bottom: 10px;
}
#spot_dkocat {
padding: 26px 28px;
font-size: 1.3rem;
color: #7e7e7e;
}
#sns_button_con {
display: flex;
justify-content: flex-end;
}
#sns_button_con .twitter, 
#sns_button_con .fb-share-button {
margin-right: 10px;
}
#spot_dudnote {
padding-top: 40px;
}
#spot_dudnavi {
border-top: solid 1px #d4d4d4;
margin-top: 40px;
padding-top: 40px;
}
#spot_dudnavi ul {
display: flex;
justify-content: flex-end;
}
.spot_dudbtn {
display: flex;
justify-content: space-between;
font-weight: bold;
align-items: center;
}
.spot_dudbtn:nth-child(n+2) {
border-left: solid 1px #d4d4d4;
padding-left: 24px;
margin-left: 24px;
}
.spot_dudbtn a {
margin-left: 12px;
background-color: #fff;
color: #2ea7e0;
border-radius: 20px;
height: 40px;
line-height: 40px;
padding: 0 20px;
}
.spot_dfacility {
background-color: #f9f7f5;
margin-bottom: 40px;
}
.spot_dfacility h2 {
font-size: 1.6rem;
display: flex;
align-items: center;
padding: 8px 14px 6px 0px;
color: #fff;
background-color: #3c3c3c;
}
.spot_dfacility h2::before {
content: '';
width: 10px;
height: 2px;
background-color: #2ea7e0;
margin-right: 20px;
}
.spot_dfacility div {
padding: 20px 30px;
}
.spot_dfacility dl {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #d4d4d4;
}
.spot_dfacility dl:last-child {
border-bottom: none;
}
.spot_dfacility dl dt {
width: 194px;
font-weight: bold;
}
.spot_dfacility dl dd {
width: calc( 100% - 194px );
}
/* 会員情報詳細 ------------------------- */
#members_detail_con {
position: relative;
}
#members_detail_main {
width: 862px;
background-color: #fff;
padding: 60px 50px 50px;
}
#members_detail_main h1 {
font-size: 2.4rem;
margin-bottom: 30px;
line-height: 1.6;
}
#members_detail_sub {
width: 268px;
}
.spot_sns {
margin-right: 20px;
}
.spot_sns i {
width: 8px;
height: 8px;
margin-right: 5px;
vertical-align: 1px;
}