@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　location

 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.cormorant {
	font-family: "Cormorant", serif;
	font-weight: 400;
}
.eb {
	font-family: "EB Garamond", serif;
	font-weight: 400;
}

main {
	font-family: YakuHanMP, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
	font-weight: 400;
}

/* swipe
---------------------------------------------- */
.swipe{
  position: relative;
  overflow: auto;
  -ms-overflow-style:none;
}
.swipe::-webkit-scrollbar{
  display: none;
}
.swipeInner{
  position: relative;
}
.swipeInner::after{
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  height: 1px;
}
.swipeInner img{
  vertical-align: top;
}
.swipeCaution{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/common/icon_scrollCaution.svg) no-repeat center/204px auto rgba(51,51,51,.8);
  pointer-events: none;
  transition: .4s ease;
}
.swipeCaution.is-hidden{
  opacity: 0;
  visibility: visible;
}

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* kv
---------------------------------------------- */
.kv {
	position: relative;
	z-index: 0;
}

.kvTitle {
	color: #fff;
	text-align: center;
	text-shadow: 0 0 30px rgb(0 0 0 / 1), 0 0 30px rgb(0 0 0 / 1), 0 0 30px rgb(0 0 0 / 1);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.kvTitle .en {
	display: block;
	font-size: clamp(48px, 1.85rem + 3.83vw, 76px);
	letter-spacing: 0.04em;
	line-height: 1;
}
.kvTitle .ja {
	display: block;
	font-size: clamp(16px, 0.97rem + 0.82vw, 22px);
	letter-spacing: 0.05em;
}

/* intro
---------------------------------------------- */
.intro {
	padding-block: 120px 150px;
	position: relative;
	z-index: 0;
}
.intro::before {
	content: '';
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(235, 235, 235, 1) 0%, rgba(250, 250, 250, 1) 50%, rgba(230, 230, 230, 1) 100%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}
.intro::after {
	content: '';
	width: calc(1158 / 1500 * 100%);
	height: 794px;
	background: url(../img/location/bg_intro.png) top right/contain no-repeat;
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}

.intro__copy {
	font-size: clamp(20px, 0.32rem + 2.19vw, 36px);
	letter-spacing: 0.1em;
	line-height: 1.8;
	text-align: center;
}
.intro__copy02 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5%;
	color: #163b76;
	font-size: clamp(14px, 0.35rem + 1.37vw, 24px);
	letter-spacing: 0.1em;
	line-height: 2.3;
	margin-top: 2em;
	text-align: center;
	position: relative;
	z-index: 0;
}
.intro__copy02::before,
.intro__copy02::after {
	content: '';
	display: block;
	width: calc(84 / 1100 * 100%);
	height: 134px;
	background: url(../img/location/figure_deco.svg) center/contain no-repeat;
	transform: translateY(20%);
}
.intro__copy02::after {
	transform: translateY(20%) scaleX(-1);
}
.intro__copy02 .marker {
	background:linear-gradient(transparent 70%, #f2e9e9 0%);
	position: relative;
	z-index: 0;
}
.intro__copy02 .em {
	font-size: 130%;
	font-style: normal;
	line-height: 1;
}
.intro__copy02 .num {
	font-size: 200%;
	font-style: normal;
	line-height: 1;
}
.intro__note {
	font-size: 14px;
	letter-spacing: 0.1em;
	margin-top: 1.5em;
	text-align: center;
}

.map {
	max-width: 1140px;
	margin-top: 70px;
}
.map__copy {
	font-size: clamp(22px, 1.57rem + 0.82vw, 28px);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-align: center;
}
.map__img {
	margin-top: 30px;
}

@media screen and (max-width: 768px) {
	.intro {
		padding-block: 50px 80px;
	}
	.intro__copy02 {
		gap: 0;
		padding-inline: 0;
	}
	.intro__copy02::before,
	.intro__copy02::after {
		background-image: url(../img/location/figure_deco_sp.svg);
		width: 38px;
		height: 102px;
	}
	.intro__note {
		font-size: 10px;
		margin-top: 1em;
	}

	.map {
		margin-top: 30px;
	}
}

/* anchorNav
---------------------------------------------- */
.anchorNav {
	padding-top: 130px;
}
.anchorNav__text {
	font-size: clamp(14px, 0.77rem + 0.82vw, 20px);
	letter-spacing: 0.1em;
	line-height: 2.1;
	text-align: center;
}
.anchorNavListWrap {
	max-width: 1240px;
	margin-top: 50px;
}
.anchorNavList {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.5px calc(1.5 / 1200 * 100%);
}
.anchorNavList__link {
	display: block;
	position: relative;
	z-index: 0;
}
.anchorNavList__link::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(80 / 399 * 100%);
	height: 48px;
	clip-path: polygon(0 0, 0 100%, 100% 0);
	z-index: 1;
}
.anchorNavList__box {
	width: 100%;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.anchorNavList__title {
	font-size: clamp(18px, 0.54rem + 1.64vw, 30px);
	letter-spacing: 0.1em;
	padding-bottom: 1em;
	text-align: center;
}
.anchorNavList__title::after {
	content: '';
	width: 14px;
	height: 14px;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	margin-inline: auto;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0) rotate(45deg);
	z-index: 0;
}
.anchorNavList__title .en {
	display: block;
	font-size: max(calc(16 / 30 * 100%), 12px);
}
.anchorNavList__img {
	position: relative;
	z-index: 0;
}
.anchorNavList__img::before {
	content: '';
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / .5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.anchorNavList > li:nth-child(1) .anchorNavList__link::before {
	background-color: rgb(205 168 166 / .7);
}
.anchorNavList > li:nth-child(2) .anchorNavList__link::before {
	background-color: rgb(202 184 144 / .7);
}
.anchorNavList > li:nth-child(3) .anchorNavList__link::before {
	background-color: rgb(169 182 155 / .7);
}
.anchorNavList > li:nth-child(4) .anchorNavList__link::before {
	background-color: rgb(158 174 188 / .7);
}
.anchorNavList > li:nth-child(5) .anchorNavList__link::before {
	background-color: rgb(175 168 188 / .7);
}
.anchorNavList > li:nth-child(6) .anchorNavList__link::before {
	background-color: rgb(204 204 204 / .7);
}

@media screen and (max-width: 768px) {
	.anchorNav {
		padding-top: 70px;
	}

	.anchorNavListWrap {
		max-width: 560px;
		margin-top: 30px;
		padding-inline: 0;
	}
	.anchorNavList {
		grid-template-columns: 1fr 1fr;
		gap: 1.5px calc(2 / 375 * 100%);
	}
	.anchorNavList__link::before {
		width: calc(40 / 189 * 100%);
		height: 24px;
	}
	.anchorNavList__title {
		line-height: 1.4;
	}
	.anchorNavList__title::after {
    width: 6px;
    height: 6px;
	}
}

/* locationSec
---------------------------------------------- */
.locationSec {
	padding-top: 200px;
	position: relative;
	z-index: 0;
}

.locationHead {
	max-width: 1240px;
}

.locationHead__inner {
	display: flex;
	align-items: center;
	gap: 15px 5%;
}

.locationSec__title {
	color: #163b76;
	font-size: clamp(34px, 0.24rem + 4.1vw, 64px);
	letter-spacing: 0.1em;
	line-height: 1;
}
.locationHead__copy {
	font-size: clamp(18px, 0.75rem + 1.37vw, 28px);
	letter-spacing: 0.1em;
	line-height: 2;
	padding-left: 5%;
	position: relative;
	z-index: 0;
}
.locationHead__copy::before {
	content: '';
	width: 1px;
	height: 100%;
	background: #8a9dba;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%) rotate(20deg);
	z-index: 0;
}
.locationHead__copy .em {
	font-style: normal;
	font-size: 125%;
	font-weight: 500;
	line-height: 1;
	color: #163b76;
}

.locationBody {
	margin-top: 70px;
	position: relative;
	z-index: 0;
}

.locationBodyBottom {
	margin-top: 150px;
	padding-bottom: 80px;
	position: relative;
	z-index: 0;
}
.locationBodyBottom::before {
	content: '';
	width: calc(1200 / 1500 * 100%);
	height: 95%;
	position: absolute;
	bottom: 0;
	z-index: -1;
}

/* item */
.itemBox + .itemBox {
	margin-top: 60px;
}

.itemList {
	display: grid;
}
.itemList > li {
	position: relative;
	z-index: 0;
}

.itemListTag {
	background: linear-gradient(135deg, rgba(76, 99, 155, 1) 0%, rgba(22, 59, 118, 1) 70%);
	color: #fff;
	font-size: clamp(11px, 0.89rem + 0.27vw, 13px);
	font-weight: 500;
	letter-spacing: 0.05em;
	padding: .2em 1em;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.itemName {
	font-size: clamp(20px, 1.37rem + 0.82vw, 26px);
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.itemName .medium {
	font-size: 60%;
}
.itemName .small {
	display: block;
	font-size: 12px;
	letter-spacing: 0.1em;
	margin-top: 0.5em;
}

.itemBox--large .itemName {
	font-size: clamp(20px, 0.53rem + 1.92vw, 34px);
}
.itemBox--large .itemName .small {
	font-size: clamp(12px, 0.99rem + 0.27vw, 14px);
}
.itemBox--small .itemName {
	font-size: 20px;
}

* + .itemBody {
	margin-top: 25px;
}

.itemText {
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 2.2;
}
* + .itemText {
	margin-top: 1.5em;
}

.locationBodyTop__inner {
	display: flex;
	align-items: flex-end;
	gap: 30px calc(70 / 1200 * 100%);
}
.locationBodyTop__inner .itemImg {
	flex-shrink: 0;
	width: calc(740 / 1200 * 100%);
	position: relative;
	z-index: 0;
}
.locationBodyTop__inner .itemBody {
	position: relative;
	z-index: -1;
}
.locationBodyTop__inner .itemName .medium {
	display: block;
}
.locationBodyTop__inner .itemName .small {
	margin-top: 1em;
}

.has-oneMinutes {
	position: relative;
	z-index: 0;
}
.has-oneMinutes::before {
	content: '';
	width: calc(120 / 740 * 100%);
	aspect-ratio: 1;
	background: url(../img/location/txt_minutes.svg) center/contain no-repeat;
	position: absolute;
	top: -30px;
	left: -30px;
	z-index: 1;
}

.instagramSec {
	max-width: 1110px;
	margin-top: 80px;
	margin-inline: auto;
}
.instagramSec__link {
	transition: .4s;
}

/* locationSec--shop */
.locationSec--shop .locationBodyBottom::before {
	right: 0;
	background : linear-gradient(135deg, rgba(250, 246, 246, 1) 50%, rgba(235, 220, 219, 1) 100%);
}
.locationSec--shop .locationBodyTop__inner .itemBody {
	width: calc(800 / 1500 * 100vw);
	margin-block: 0 5%;
	margin-right: calc(50% - 50vw);
	padding-right: 5%;
}
.locationSec--shop .locationBodyTop__inner .itemBody::before {
	content: '';
	width: calc(800 / 555 * 100%);
	height: 450px;
	background-color: #f5eeed;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}
.locationSec--shop .locationBodyTop__inner .itemBody__inner {
	max-width: 340px;
}

/* locationSec--gourmet */
.locationSec--gourmet .locationBodyBottom::before {
	left: 0;
	background: linear-gradient(135deg, rgba(250, 248, 244, 1) 50%, rgba(234, 227, 211, 1) 100%);
}

/* locationSec--nature */
.locationSec--nature .locationBodyBottom::before {
	right: 0;
	background: linear-gradient(135deg, rgba(246, 248, 245, 1) 50%, rgba(221, 226, 215, 1) 100%);
}

/* locationSec--education */
.locationSec--education .locationBodyBottom::before {
	left: 0;
	background: linear-gradient(135deg, rgba(245, 247, 248, 1) 50%, rgba(216, 223, 228, 1) 100%);
}

/* locationSec--medical */
.locationSec--medical {
	padding-bottom: 150px;
}
.locationSec--medical .locationBody::before {
	content: '';
	width: calc(1200 / 1500 * 100%);
	height: 90%;
	background: linear-gradient(135deg, rgba(247, 246, 248, 1) 50%, rgba(223, 220, 228, 1) 100%);
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -1;
}
.locationSec--medical .locationBodyBottom::before {
	content: none;
}

.locationSec--medical .locationBodyTop__inner .itemBody {
	flex: 1;
}
* + .subject {
	margin-top: 30px;
}
.subject__title {
	display: flex;
	align-items: center;
	gap: 1em;
	color: #163b76;
	font-size: clamp(14px, 0.98rem + 0.55vw, 18px);
	letter-spacing: 0.05em;
	line-height: 1.4;
	white-space: nowrap;
}
.subject__title::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #8a9dba;
}
.subjectList {
	display: grid;
	grid-template-columns: auto auto auto;
	gap: .5em;
	justify-content: space-between;
	margin-top: 15px;
}
.subjectList > li {
	display: flex;
	align-items: flex-start;
	gap: .3em;
	font-size: clamp(12px, 0.99rem + 0.27vw, 14px);
	letter-spacing: 0.05em;
	line-height: 1.3;
}
.subjectList > li::before {
	content: '●';
	font-size: 50%;
	color: #163b76;
	margin-top: 0.6em;
}

@media (hover: hover) and (pointer: fine) {
	.instagramSec__link:hover {
		opacity: .7;
	}
}

@media screen and (min-width: 769px) {
	.locationBodyTop {
		max-width: 1240px;
	}

	.locationBodyBottom__inner {
		max-width: 1240px;
	}

	.itemList {
		grid-template-columns: 1fr 1fr;
		gap: 60px calc(80 / 1200 * 100%);
	}
	.itemBox--small .itemList {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 60px calc(45 / 1200 * 100%);
	}
	.itemList[data-column="4"] {
		grid-template-columns: repeat(4, 1fr);
		gap: 60px calc(40 / 1200 * 100%);
	}
}

@media screen and (max-width: 768px) {
	.locationSec {
		padding-top: 70px;
	}
	.locationHead {
		max-width: 310px;
		margin-inline: auto;
		padding-inline: 0;
	}
	.locationHead__inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.locationHead__copy {
		letter-spacing: 0.04em;
		padding-left: 0;
	}
	.locationHead__copy::before {
		content: none;
	}

	.locationBodyTop__inner {
		flex-direction: column;
		row-gap: 20px;
	}

	.locationBodyTop__inner .itemImg {
		width: calc(320 / 335 * 100%);
	}

	.locationBody {
		max-width: 560px;
		margin-top: 40px;
	}

	.locationBodyBottom {
		margin-top: 40px;
	}
	.locationBodyBottom::before {
		width: calc(330 / 375 * 100%);
    height: 95%;
	}

	.locationBodyBottom__inner {
		width: calc(320 / 375 * 100%);
		margin-inline: auto;
		padding: 0;
	}

	.itemList {
		row-gap: 30px;
	}
	.itemList .itemBody {
		width: calc(280 / 320 * 100%);
		margin-left: auto;
	}
	.itemList .itemName .medium {
		display: inline-block;
	}

	.has-oneMinutes::before {
		width: calc(80 / 350 * 100%);
		top: -20px;
		left: -20px;
	}

	* + .subject {
    margin-top: 20px;
	}
	.subjectList {
    display: grid;
    grid-template-columns: auto auto;
    margin-top: 10px;
	}

	/* locationSec--shop */
	.locationSec--shop .locationBodyTop__inner .itemImg {
		width: calc(350 / 375 * 100vw);
		margin-right: calc(50% - 50vw);
	}
	.locationSec--shop .locationBodyTop__inner .itemBody {
		width: 100%;
		margin-right: 0;
		padding-left: 10%;
		padding-bottom: 30px;
	}
	.locationSec--shop .locationBodyTop__inner .itemBody::before {
		width: calc(350 / 335 * 100%);
		height: 170%;
		top: auto;
		bottom: 0;
		left: calc(50% - 50vw);
		transform: translate(0, 0);
	}

	/* locationSec--gourmet */
	/* locationSec--education */
	.locationSec--gourmet .locationBodyBottom::before,
	.locationSec--education .locationBodyBottom::before {
		right: 0;
		left: auto;
	}

	/* locationSec--medical */
	.locationSec--medical {
		padding-bottom: 50px;
	}
	.locationSec--medical .locationBodyTop__inner .itemBody {
		width: calc(270 / 335 * 100%);
		margin-left: auto;
	}
	.locationSec--medical .locationBody::before {
    width: calc(330 / 375 * 100%);
    height: 95%;
	}

}