@charset "utf-8";

#about {
	max-width: 2000px;
	position: relative;
	padding-bottom: 180px;
}
#about .section {
	margin-bottom: 240px;
}
#about .section_ttl {
	font-size: 138%;
	font-weight: normal;
	letter-spacing: 0.06em;
	margin-bottom: 80px;
}
#about .section_ttl span {
	display: block;
	font-size: 80%;
}

#about .contents .images {
	width: 460px;
	position: absolute;
	right: 0;
}
#about .contents .images .item {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
#about .contents .images .item:first-child {
	position: relative;
	opacity: 1;
}
#about .contents .images .item img {
	width: 100%;
}
#about .contents .images .slick-slide .item {
	position: relative;
	opacity: 1;
}
#about .contents .images .slick-arrow {
	display: block;
	width: 1.5em;
	height: 1em;
	border: 0;
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	position: absolute;
	top: 100%;
	margin-top: 0.5em;
}
#about .contents .images .slick-arrow.slick-next {
	right: 2em;
	background: url("../images/arrow04.svg") center center no-repeat;
	background-size: contain;
}
#about .contents .images .slick-arrow.slick-prev {
	right: 4em;
	background: url("../images/arrow05.svg") center center no-repeat;
	background-size: contain;
}

/* about */
#about .about .section_ttl {
	margin-bottom: 150px;
}
#about .about .text {
	width: calc(100% - 460px);
	min-width: 550px;
	display: flex;
	justify-content: space-between;
}
#about .about .text > div {
	width: 48%;
	text-align: justify;
}
#about .about .movie_link {
	margin-top: 75px;
}
#about .about .movie_link a {
	font-size: 138%;
	color: #354443;
	text-decoration: underline;
	letter-spacing: 0.05em;
}
#about .about .movie_link a:hover {
	text-decoration: none;
}

/*shop*/
#about .shop .info {
	width: 550px;
	margin-bottom: 60px;
}
#about .shop .info li a {
	display: inline-block;
	padding-right: 1.5em;
	position: relative;
}
#about .shop .info li a:after {
	content:'';
	display: block;
	width: 1em;
	height: 1em;
	background-image: url("../images/arrow03.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	transition: transform 0.5s ease-in;
}
#about .shop .info li a.close:after {
	transform: translateY(-50%) rotate(90deg);
}
#about .shop .info li .comment {
	padding-bottom: 1em;
	display: none;
}
#about .shop .info li .text {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#about .shop .info li .text > div {
	width: 48%;
}
#about .shop .access {
	width: 550px;
}
#about .shop .access .shop {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
#about .shop .access .shop ul {
	width: 48%;
}
#about .shop .access .shop ul li.sns {
	margin-top: 0.5em;
}
#about .shop .access .shop ul li.sns span {
	margin-right: 1em;
}
#about .shop .access .shop ul li.sns span img {
	width: auto;
	height: 1.2em;
}
#about .shop .access .map {
	width: 100%;
}
#about .shop .access .map .map_inner {
	width: 100%;
	padding-top: 55%;
	overflow: hidden;
}
#about .shop .access .map .gmap {
	text-align: right;
}
#about .shop .access .map .gmap a {
	text-decoration: underline;
	line-height: 2;
}

#about .shop .access .map .map_embed {
	width: 100%;
	aspect-ratio: 100 / 55;
	position: relative;
	overflow: hidden;
}
#about .shop .access .map .map_embed .map_embed_inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
	filter: grayscale(100%);
}
#about .shop .access .map .map_embed iframe {
    /*filter: grayscale(100%);*/
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
	/*width: calc( 100% + 400px);*/
	width: 100%;
	height: calc( 100% + 400px);
	/*width: 100%;
	height: 100%;*/
}

/*pc*/
@media screen and (min-width: 1001px) and ( max-width: 1200px ) {
	#about .contents .images {
		width: 350px;
	}
}
@media screen and (min-width: 769px) and ( max-width: 1000px ) {
	#about .contents .images {
		width: 60%;
		min-width: 460px;
		position: relative;
		margin: 0 auto 4em;
	}
	#about .about .text,
	#about .shop .info,
	#about .shop .access {
		width: 100%;
	}
	#about .shop .access .map {
		width: 80%;
		margin: 0 auto;
	}
}

/* sp */
@media screen and ( max-width: 768px ) {
	#about {
		padding-bottom: 5em;
	}
	#about .section {
		padding-top: 70vw;
		margin-bottom: 6em;
		position: relative;
	}
	#about .section_ttl {
		margin-bottom: 1em!important;
		font-size: 130%;
	}
	#about .inner_ttl {
		font-size: 108%;
		font-weight: normal;
	}
	#about .contents .images {
		width: 100%;
		position: absolute;
		top: 0;
		right: 0;
	}
	#about .contents .images .slick-arrow {
		display: block;
		width: 1.4em;
		height: 0.7em;
		border: 0;
		text-indent: 200%;
		white-space: nowrap;
		overflow: hidden;
		cursor: pointer;
		position: absolute;
		top: 100%;
		margin-top: 0.3em;
	}
	
	/* about */
	#about .about .text {
		width: 100%;
		min-width:inherit;
		display: block;
	}
	#about .about .text > div {
		width: 100%;
		margin-bottom: 2em;
	}
	#about .about .movie_link {
		margin-top: 2em;
	}
	#about .about .movie_link a {
		font-size: 116%;
	}
	#about .about .movie_link a:hover {
		text-decoration: underline;
	}

	/*shop*/
	#about .shop .info {
		width: 100%;
		margin-bottom: 2em;
	}
	#about .shop .info li .text {
		display: block;
	}
	#about .shop .info li .text > div {
		width: 100%;
		margin-bottom: 1em;
	}
	#about .shop .access {
		width: 100%;
	}
	#about .shop .access .shop {
		display: block;
		margin-bottom: 2em;
	}
	#about .shop .access .shop ul {
		width: 100%;
		margin-bottom: 0.5em;
	}
	#about .shop .access .map .map_embed iframe {
		width: calc( 100% + 30vw);
		height: calc( 100% + 80vw);
	}
	
}