@charset "utf-8";

/* =============================================================================
   レイアウト
============================================================================= */

/* MV
--------------------------------------------*/
.hdPage{
	position: relative;
	padding-bottom: 62px;
	background: url("/_common/images/bg_texture.png"), linear-gradient(135deg, #a7e7f1 0%,#c3e4e9 100%);
	overflow: hidden;
}
.hdPage::before,
.hdPage::after{
	position: absolute;
	left: 0;
	bottom: 0;
	content: "";
	display: block;
	width: 100%;
}

.hdPage::before{
	height: 50px;
	background: url("/dogfriendly/_images/mv_bg.png") center / auto 100% repeat-x;
	animation: mvbgmove 80s linear infinite;
}
.hdPage::after{
	height: 50px;
	background: url("/dogfriendly/_images/mv_images.png") center / auto 100% repeat-x;
	animation: mvimagesmove 300s linear infinite;
}
.hdPage_inner{
	position: relative;
	z-index: 1;
}

.hdPage_block{
	padding: 16px 0;
}
.hdPage_cats{
	display: flex;
	margin-left: -4px;
}
.hdPage_cat{
	position: relative;
	margin-left: 4px;
	width: calc(100% / 5 - 4px);
}
.hdPage_cat::before{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	content: "";
	display: inline-block;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	border-radius: 50vw;
	border: dashed 1px rgba(255, 255, 255, 0.7);
}
.hdPage_catTxt{
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -30%);
	z-index: 1;
	white-space: nowrap;
	padding: 4px 8px;
	line-height: 1;
	text-align: center;
	color: #fff;
	font-size: 1.0rem;
	font-weight: bold;
	border-radius: 4px;
}
.hdPage_cat.-trip .hdPage_catTxt{
	background: #1a9af4;
}
.hdPage_cat.-restaurant .hdPage_catTxt{
	background: #ffc000;
}
.hdPage_cat.-mall .hdPage_catTxt{
	background: #ff8aae;
}
.hdPage_cat.-hotel .hdPage_catTxt{
	background: #3007c9;
}
.hdPage_cat.-roadstation .hdPage_catTxt{
	background: #286500;
}
.hdPage_catTxt span{
	font-weight: bold;
}
.hdPage_cat figure{
	position: relative;
	width: 100%;
	height: 0;
	padding-top: calc(500 / 500 * 100%);
	border-radius: 50vw;
	overflow: hidden;
}
.hdPage_cat img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.hdPage_bird{
	pointer-events: none;
	position: absolute;
	right: 0;
	bottom: 20vw;
	z-index: 2;
	animation: birdmove 30s linear -10s infinite;
}
.hdPage_bird::before{
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url("/dogfriendly/_images/mv_bird.png") center / 100% auto no-repeat;
	animation: birdimgmove 1.5s 0.5s steps(2, end) infinite alternate;
}
@media print, screen and (min-width:960px) {
	.hdPage{
		padding-bottom: 0;
	}
	.hdPage::before{
		height: 93px;
	}
	.hdPage::after{
		height: 100px;
	}
	.hdPage .breadcrumbs {
		position: relative;
		z-index: 2;
	}
	
	.hdPage_block{
		padding: 32px 40px;
		border-radius: 0 0 32px 32px;
		background-color: rgba(255, 255, 255, 0.8);
	}
	.hdPage_cats{
		margin: 56px 0 0 -8px;
	}
	.hdPage_cat::before{
		border-width: 1px;
	}
	.hdPage_cat{
		margin-left: 8px;
		width: 150px;
	}
	.hdPage_catTxt{
		font-size: 1.4rem;
	}
	.hdPage_car{
		width: 75px;
		height: 70px;
		animation: carmove 40s linear infinite;
	}
	.hdPage_car::before{
		animation: carimgmove 40s linear infinite;
	}
	.hdPage_car span{
		width: 34px;
		height: 33px;
		animation: onpuposmove 40s linear infinite;
	}
	
	.hdPage_bird{
		bottom: inherit;
		top: 16px;
		animation: birdmove 120s linear -20s infinite;
	}
	.hdPage_bird::before{
		width: 36px;
		height: 36px;
	}	
}


@keyframes birdmove {
	0% {
		left: 100%;
		transform: scaleX(1);
	}
	100% {
		left: calc(0% - 36px);
		transform: scaleX(1);
	}
}

@keyframes birdimgmove {
	0% {
		transform: translate(0, 0) rotate(-15deg);
	}

	100% {
		transform: translate(-16px, -16px) rotate(15deg);
	}
}
@keyframes mvimagesmove {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -2100px 0;
	}
}

@keyframes mvbgmove {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 484px 0;
	}
}


/* NAV
--------------------------------------------*/
.localnavs{
	min-height: 103px;
	background: url("/_common/images/bg_texture.png"), #4e4733;
}
.localnavs_inner{
	padding: 8px;
}
.localnavs_area{
	display: flex;
	margin-left: -2px;
}
.localnavs_areaBt{
	cursor: pointer;
	flex: 1;
	margin-left: 2px;
	min-height: 50px;
	text-align: center;
	color: #4e4733;
	font-size: 1.4rem;
	font-weight: bold;
	border: solid 1px #635b43;
	background: #fff;
}
.localnavs_areaBt.is-active{
	color: #fff;
	background: #87660f;
}
.localnavs_areaBt.is-over:not(.is-active){
	background: #e7e0d0;
}
.localnavs_pref{
	margin-top: 8px;
	padding: 4px;
}
.localnavs_preflist{
	display: flex;
	justify-content: center;
}
.localnavs_prefitem{
	display: none;
}
.localnavs_prefitem:not(:first-child){
	border-left: solid 1px #fff;
}
.localnavs_prefitem.is-first{
	border-left: none;	
}
.localnavs_prefitem a{
	position: relative;
	display: inline-block;
	padding: 0 16px;
	color: #fff;
	font-size: 1.4rem;
	letter-spacing: .2em;
}
.localnavs_prefitem a::before{
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 0;
	height: 2px;
	content: "";
	transform: translateX(-50%);
	border-radius: 50vw;
	background: #a7cc09;
	transition: -webkit-width .2s ease;
	transition: width .2s ease;
	transition: width .2s ease, -webkit-width .2s ease;
}
.localnavs_prefitem.is-active a:before{
	width: calc(100% - 32px);
}


@media print, screen and (min-width:960px) {
	.localnavs{
		min-height: 164px;
	}
	.localnavs_inner{
		margin: 0 auto;
		padding: 16px 0;
		width: 100%;
		max-width: 1400px;
	}
	.localnavs_area{
		margin-left: -8px;
	}
	.localnavs_areaBt{
		margin-left: 8px;
		min-height: 70px;
		font-size: 2.0rem;
	}
	.localnavs_pref{
		margin-top: 16px;
		padding: 8px;
	}
	.localnavs_prefitem a{
		padding: 0 24px;
		font-size: 2.0rem;
	}
	.localnavs_prefitem:not(.is-active):hover a:before{
		width: calc(100% - 32px);
	}
}



/* =============================================================================
   PAGE
============================================================================= */

.dogfriendly{
	padding: 40px 0 0;
}
.dogfriendly_txt{
	margin: 0 16px;
}
@media print, screen and (min-width:960px) {
	.dogfriendly{
		padding: 80px 0 0;
	}
}


/* AREA
--------------------------------------------*/
.dogfriendlyArea_ttl{
	transform: translateY(-16px);
}
@media print, screen and (min-width:960px) {
	.dogfriendlyArea_ttl{
		transform: translateY(-40px);
	}
}

/* ソート */
.sortcategoryList{
	display:flex;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: solid 1px #ccc;
	width: 100%;
	overflow-x: auto;
}
.sortcategoryList_item{
	flex: 1 0 auto;
	position: relative;
	padding: 5px 10px;
	text-align: center;
	font-weight: bold;
}
@media screen and (max-width: 959px) {
	.sortcategoryList_item{
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 50px;
		line-height: 1.3;
		font-size: 1.3rem;
		letter-spacing: 0;
	}
}
.sortcategoryList_item:not(.disabled){
	cursor: pointer;
}
.sortcategoryList_item.is-active:before{
	position: absolute;
	left: 0;
	bottom: 0;
	content: "";
	display: inline-block;
	width: 100%;
	height: 4px;
	background: #000;
}
.sortcategoryList_item.disabled{
	display: none;
	pointer-events: none;
	color: #ccc;
}
.sortcategoryList_item[data-sort="trip"]:before{
	background-color: #1a9af4;
}
.sortcategoryList_item[data-sort="restaurant"]:before{
	background-color: #ffc000;
}
.sortcategoryList_item[data-sort="mall"]:before{
	background-color: #ff8aae;
}

.sortcategoryList_item[data-sort="hotel"]:before{
	background-color: #3007c9;
}
.sortcategoryList_item[data-sort="highway"]:before{
	background-color: #0ca059;
}
.sortcategoryList_item[data-sort="roadstation"]:before{
	background-color: #286500;
}

@media print, screen and (min-width:960px) {
	.sortcategoryList{
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	.sortcategoryList_item{
		padding: 16px;
		font-size: 1.8rem;
	}
}





.dogfriendlyArea{
	padding: 0 0 32px;
	background: #f5f5f3;
}
.wrapper[dogfriendly] .dogfriendlyArea{
	padding: 32px 0;
}

.dogfriendlyArea_list{
	display: flex;
	flex-wrap: wrap;
	margin: 0 16px 0 8px;
}
.dogfriendlyArea_listItem{
	margin: 16px 0 0 8px;
	width: calc(100% / 2 - 8px);
}
.dogfriendlyArea_listItem a{
	display: flex;
	flex-direction: column;
}
.area-cassette_ttl{
	margin-top: 4px;
	text-align: center;
	line-height: 1.3;
}
.dogfriendlyArea_listItem_img{
	position: relative;
	order: -1;
}
.dogfriendlyArea_listItem_img img{
	transition: opacity .4s ease-out, transform .4s ease-out;
}
.dogfriendlyArea_listItem_icon{
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 5px 10px;
	color: #fff;
	font-size: 1.2rem;
	background: #000;
}
.dogfriendlyArea_listItem_icon.-trip{
	background: #1a9af4;
}
.dogfriendlyArea_listItem_icon.-restaurant{
	background: #ffc000;
}
.dogfriendlyArea_listItem_icon.-mall{
	background: #ff8aae;
}
.dogfriendlyArea_listItem_icon.-hotel{
	background: #3007c9;
}
.dogfriendlyArea_listItem_icon.-highway{
	background: #0ca059;
}
.dogfriendlyArea_listItem_icon.-roadstation{
	background: #286500;
}


@media print, screen and (min-width:960px) {
	.dogfriendlyArea{
		padding: 0 0 80px;
	}
	.wrapper[dogfriendly] .dogfriendlyArea{
		padding: 80px 0;
	}
	.dogfriendlyAreaInner{
		margin: 0 auto;
		width: 100%;
		max-width: 1400px;
	}
	.dogfriendlyArea_list{
		display: flex;
		flex-wrap: wrap;
		margin: 16px 0 0 -32px;
	}
	.dogfriendlyArea_listItem{
		margin: 32px 0 0 32px;
		width: calc(100% / 4 - 32px);
	}
	.dogfriendlyArea_listItem a{
		display: flex;
		flex-direction: column;
	}
	.area-cassette_ttl{
		margin-top: 8px;
		text-align: center;
	}
	.dogfriendlyArea_listItem_img{
		overflow: hidden;
		order: -1;
	}
	.dogfriendlyArea_listItem a:hover .dogfriendlyArea_listItem_img img {
        opacity: .6;
        transform: scale(1.1);
    }
	.dogfriendlyArea_listItem_icon{
		font-size: 1.4rem;
	}
}











.dogfriendlyDetail{
	padding: 32px 16px;
	background: #f5f5f3;
}
.dogfriendlyDetail_ttl{
	display: flex;
	justify-content: center;
}
.dogfriendlyDetail_ttlBox{
	position: relative;
	padding: 8px 40px;
	text-align: center;
}
.dogfriendlyDetail_ttlBox::before,
.dogfriendlyDetail_ttlBox::after{
	position: absolute;
	top: 0;
	content: "";
	display: inline-block;
	width: 16px;
	height: 100%;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
}
.dogfriendlyDetail_ttlBox::before{
	left: 0;
	border-left: solid 1px #000;
}
.dogfriendlyDetail_ttlBox::after{
	right: 0;
	border-right: solid 1px #000;
}
.dogfriendlyDetail_ttlArea{
	margin-top: 8px;
}
.dogfriendlyDetail_ttlTxt{
	font-size: 2.0rem;
	font-weight: bold;
}
.dogfriendlyDetail_txt{
	margin: 24px auto 0;
	width: 100%;
	max-width: 900px;
	line-height: 1.8;
}

.dogfriendlyWp{
	display: flex;
	flex-direction: column-reverse;
	margin-top: 24px;
}
.dogfriendlyBd{
	margin-top: 32px;
}
.dogfriendlyBdWp{
	margin-top: -40px;
	padding: 64px 8px 16px;
	background-color: rgba(255, 255, 255, 0.95);
}

.dogfriendlyDetail_listItem{
	display: flex;
	padding: 16px 8px;
	line-height: 1.8;
	border-top: dashed 1px #ebe8de;
}
.dogfriendlyDetail_listItem:last-child{
	border-bottom: dashed 1px #ebe8de;
}
.dogfriendlyDetail_listItem_ttl{
	width: 96px;
	font-weight: bold;
}
.dogfriendlyDetail_listItem_txt{
	flex: 1;
}
.dogfriendlyDetail_listItem_txtTime{
	display: block;
}
.dogfriendlyDetail_listItem_txt a{
	color: #87660f;
	font-weight: bold;
	text-decoration: underline;
}

.dogfriendlyDetail_listItem_txt a .m-ico{
	margin-left: 4px;
}
.dogfriendlyBd .kome{
	margin-top: 8px;
}

.dogfriendlyDetail_map{
	margin: 40px -16px 0;
}
.dogfriendlyDetail_map dt {
	line-height: 1.3;
}
.dogfriendlyDetail_map dt::after {
	transform: rotate(-10deg);
}


.dogfriendlyPhoto_slider{
	display: none;
}
.dogfriendlyPhoto_slider.slick-initialized{
	display: block;
}

.gmap {
	margin-top: 2vw;
    height: 0;
    overflow: hidden;
    padding-top: 500px;
    position: relative;
}
.gmap iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.dogfriendlyDetail_btBack{
	margin-top: 32px;
}
.dogfriendlyDetail_btBack .m-ico{
	margin-right: 8px;
}

@media screen and (max-width:959px) {
	.dogfriendlyDetail_txt br{
		display: none;
	}
}
@media print, screen and (min-width:960px) {
	.dogfriendly{
	}
	.dogfriendly_txt{
		margin: 0 auto;
		width: 100%;
		max-width: 1400px;
	}
	.dogfriendlyDetail{
		padding: 3vw 0;
	}
	.dogfriendlyDetail_ttlBox::before,
	.dogfriendlyDetail_ttlBox::after{
		width: 24px;
	}
	.dogfriendlyDetail_ttlTxt{
		font-size: 3.0rem;
	}
	.dogfriendlyDetail_txt{
		margin-top: 3vw;
		text-align: center;
		font-size: 1.8rem;
	}

	.dogfriendlyWp{
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: flex-end;
		margin: 3vw auto 0;
		width: 100%;
		max-width: 1800px;
	}
	.dogfriendlyBd{
		margin-left: -32px;
		width: calc(40% + 32px);
	}
	.dogfriendlyBdWp{
		margin-top: 1vw;
		padding: 3vw;
	}

	.dogfriendlyDetail_listItem{
		padding: 16px;
	}
	.dogfriendlyDetail_listItem_ttl{
		width: 120px;
	}
	#addHours .dogfriendlyDetail_listItem_txt{
		display: flex;
		flex-wrap: wrap;
		margin-left: -8px;
	}
	.dogfriendlyDetail_listItem_txtTime{
		margin-left: 8px;
		width: calc(100% / 2 - 8px);
	}
	
	
	
	.dogfriendlyDetail_listItem_txt a:hover{
		text-decoration: none;
	}
	.dogfriendlyBd .kome{
		margin-top: 16px;
	}

	.dogfriendlyPhoto{
		margin-bottom: 5vw;
		width: 60%;
	}

	
	.dogfriendlyDetail_map{
		margin: 1vw 0 0;
		width: 100%;
	}
	.dogfriendlyDetail_btBack{
		margin: 3vw 3vw 0;
	}
}