/* =============================================
　　root
============================================= */

:root {

	--color-primary:#ff78a0;
	--color-secondary:#bc882e;
	--color-accent:#ffe57e;
	--color-base:#000;
	
	--highlights-font-size-title: clamp(1.8rem, 1.114rem + 1.43vw, 2.8rem);
	--highlights-font-size-name:clamp(2.4rem, 1.457rem + 2.38vw, 3.6rem);
 	--highlights-font-size-text:clamp(1.4rem, 1.171rem + 0.48vw, 1.6rem);


	--spot-font-size-title: clamp(2.1rem, 1.114rem + 1.43vw, 2.8rem);
	--spot-font-size-name:clamp(3rem, 1.457rem + 2.38vw, 3.6rem);
 	--spot-font-size-text:clamp(1.4rem, 1.171rem + 0.48vw, 1.6rem);
}



/* =============================================
　　text-
============================================= */


.text-heading{
  font-size: var(--xmas-font-size-headding);
  text-align: center;
  font-weight: 300;
}
.text-read{
  font-size: var(--font-size-read);
  font-weight: 500;
}

.text-base{
  font-size: var(--font-size-base);
  font-weight: 500;
}
.text-2xl{
  font-size: var(--font-size-2xl);
}
.text-xl{
  font-size: var(--font-size-xl);
}
.text-lg{
  font-size: var(--font-size-lg);
}
.text-md{
  font-size: var(--font-size-md);
}
.text-sm{
  font-size: var(--font-size-sm);
}
.text-xs{
  font-size: var(--font-size-xs);
}
.text-xxs{
  font-size: var(--font-size-xxs);
}

[class^="text-"] small {
  font-size:70%;
}

/* =============================================
　　.align-
============================================= */

.align-c{
text-align: var(--align-center);
}
.align-c-sp{
text-align: var(--align-center-sp);
}
.align-l{
text-align: var(--align-left);
}
.align-l-sp{
text-align: var(--align-left-sp);
}
.align-r{
text-align: var(--align-right);
}
.align-r-sp{
text-align: var(--align-right-sp);
}

/* =============================================
　　.section
============================================= */

#gourmet main{
	font-family: var(--font-family-Zen-Mi);
	position: relative;
}


  /* アニメーションさせたい要素の基本スタイル */
  .fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
  }



 /* アニメーションの定義 */
  @keyframes riseUp {
    /* 開始時（下から、透明な状態） */
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    /* 終了時（定位置で、不透明な状態） */
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


article {
  position: relative;
}
picture {
  width: 100%;
  display: flex;
}

main img{
	max-width: 100%;
	height: auto;
}

.c-section{
	max-width: 100%;
	position: relative;
	padding:var(--layout-space-section) 0 calc(var(--layout-space-section));
	position: relative;
	z-index: 1;
}

.c-section__body{
	position: relative;
	padding:0 var(--layout-space-base-horizontal);
}

.c-section__inner{
	position: relative;
	margin: 0 auto;
	width: 100%;
}
.c-section__inner.wide{
	position: relative;
	padding:0rem;
}

.c-section__contents{
	position: relative;
	display: grid;
	align-items: start;
	justify-content: center;
	justify-items: center;
	gap:var(--layout-space-base-vrtical);
}




.contents__inner {
  display: grid;
  gap: 2rem;
  justify-content: center;
  justify-items: center;
}

.img {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
}
figure{
	position: relative;
	display: flex;
	height: 100%;
}
figure figcaption{
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #fff;
  font-family: var(--font-family-Zen-Go);
  font-weight: 600;
  font-size: 12px;
}
figure figcaption[data-color="black"]{
  color: #000;
}
figure figcaption img{
  aspect-ratio: auto !important;
  width: 80px;
}

/**************************************************
#highlights
**************************************************/
#highlights{
	background: var(--color-primary);
	
	--highlight-color:#e18eaa;
	background: var(--highlight-color);
	margin-top:8rem;
}


.spot-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-space-section) * 2.5);
  max-width: 1200px;
  padding:0 calc(var(--layout-space-section) * 0.3);
}

.spot {
  display: grid;
  gap: 2.4em;
}

.spot .spot-inner {
	display: grid;
	position: relative;
	border-radius: 3rem;
	background: #fff;
	overflow: hidden;
}

.spot-img {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.spot-img img{
	aspect-ratio: 4 / 3;
}

.spot-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  justify-content: flex-start;
  height: auto;
  transition: 0.6s all;
  position: relative;
  gap: 1.6em;
}
.spot-item .txt {
  padding:calc(5% * 1.5) 5%;
  display: flex;
  gap: 2.4rem;
  position: relative;
  align-items: center;
  align-content: space-between;
  flex-direction: column;
  justify-content: flex-start;
}

.spot-item .txt .title {
	font-size: var(--spot-font-size-title);
	font-size: calc(var(--spot-font-size-title) * 1.3);
	font-weight: 500;
	text-align: center;
	line-height: 125%;
	font-family: var(--font-family-Zen-Mi);
	color: var(--highlight-color);
}
.spot-item .txt .name {
	border-bottom: 1px dashed;
	font-size: var(--spot-font-size-name);
	font-family: var(--font-family-Zen-Mi);
	font-weight: 500;
	letter-spacing: -1px;
	text-align: center;
	line-height: 130%;
	padding-bottom: 1.6rem;
}
.spot-item .txt .read {
	font-size: calc(var(--spot-font-size-name) * 0.8);
	font-weight: 700;
	letter-spacing: -1px;
}
.spot-item .txt p {
	font-size: var(--spot-font-size-text);
}
.spot-item .txt small{
	font-size:60%;
}

.spot-item .btn {
	max-width: 320px;
	margin: 0 auto;
	font-size: var(--spot-font-size-text);
	background-color:var(--highlight-color);
	border-color: var(--highlight-color);
}

.spot .spot-item-inner {
	display: grid;
	position: relative;
	width: 85%;
	background: rgb(255 255 255 / 10%);
}
.spot .spot-item-inner .txt p {
	font-size: calc(var(--spot-font-size-text) * 0.8);
}


.detail dl{
	display: grid;
	justify-content: flex-start;
	align-items: start;
	margin: 10px auto;
	position: relative;
	gap: 10px;
	grid-template-columns:auto 1fr;
	width: 100%;
	font-size: var(--spot-font-size-text);
}
.detail dl dt{
	width: 100px;
	display: block;
	background:var(--highlight-color);
	color: #fff;
	border-radius: 5px;
	margin-right: 10px;
	padding: 3px 10px;
	line-height: 1.2;
	text-align: center;
}

.link {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}


@media screen and (min-width: 1025px) {

	.spot .spot-inner {
		gap: 2em;
		max-width: 1440px;
		grid-template-columns: 1.8fr 1fr;
		align-items: center;
	}
	.spot:nth-child(even) .spot-inner {
		grid-template-columns:1fr 1.8fr;
	}
	.spot:nth-child(even) .spot-img {
	    order: 2;
	}

	.spot .spot-item-inner {
	  width: 100%;
	  grid-template-columns: 1fr 1.5fr;
	}
}


/**************************************************
#cms-gourmetfair
**************************************************/



#cms-fair{
  --font-family: "Zen Kaku Gothic New", sans-serif;
  --font-family-hind: "Zen Kaku Gothic New", sans-serif;
  --size-6xl: clamp(5rem, calc(4.8rem + 0.625vw), 5.5rem);
  --size-5xl: clamp(4.2rem, calc(4rem + 0.625vw), 4.7rem);
  --size-4xl: clamp(3.8rem, calc(3.6rem + 0.625vw), 4.3rem);
  --size-3xl: clamp(3.2rem, calc(3rem + 0.625vw), 3.7rem);
  --size-2xl: clamp(2.8rem, calc(2.6rem + 0.625vw), 3.3rem);
  --size-xl: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
  --size-lg: clamp(1.9rem, calc(1.7rem + 0.625vw), 2.4rem);
  --size-md: clamp(1.5rem, calc(1.3rem + 0.625vw), 2rem);
  --size-base: clamp(1.2rem, calc(1.1rem + 0.625vw), 1.7rem);
  --size-sm: clamp(1.1rem, calc(1rem + 0.625vw), 1.6rem);
  --size-xs: clamp(0.95rem, calc(0.85rem + 0.625vw), 1.4rem);
  --size-xxs: clamp(0.6rem, calc(0.55rem + 0.625vw), 1.1rem);
  --color-beige: #F0ECCD;
  --color-white: #fff;
}

#cms-fair img {
  max-width: 100%;
}
#cms-fair .swiper {
  width: 100%;
  min-width: 0;
}
#cms-fair .swiper-wrapper {
  display: flex !important;
  justify-content: flex-start;
}
#cms-fair .swiper-slide {
  min-width: 0;
}

.fair .infinite-slider .swiper-wrapper {
  transition-timing-function: linear;
}

.fair{}

.fair .se__inner {
  padding: 2.4rem 1.6rem;
}

.fair__fv {
  display: grid;
}
.fair .fair__fv .fair__headding{
		display: grid;
	background: var(--color-primary);
}
.fair__fv .fair__headding .txt{
  display: grid;
  gap:1rem;
  padding: 1.6rem;
}
.fair__fv .fair__headding .txt img{
  max-width: calc(100% / 1.8) !important;
  margin: 0 auto;
  display: block;
}

.fair__fv .fair__headding .txt h2{
	color: var(--color-white);
	font-size: var(--size-4xl);
	text-align: center;
	line-height: 120%;
	font-weight: 700;
}
.fair__fv .fair__headding .txt span{
	font-size: var(--size-3xl);
	display: table;
	border: 1px #fff solid;
	border-left: 0;
	border-right: 0;
	padding: 0.8rem 1rem;
	margin: 0 auto;
	line-height: 100%;
}
.fair__fv .fair__headding .txt p{
	color: var(--color-white);
	font-size: var(--size-lg);
	text-align: center;
	line-height: 120%;
	font-weight: 700;
}


.fair__fv .img{
 display: grid;
   position: relative;
  height: 100%;
}
.fair__fv .img img {
  height: 100%;
  aspect-ratio: 4 / 3;
}


.fair__term {
	background: var(--color-beige);
	color: #6B3B0C;
}
.fair__term h3{
	font-size: var(--size-2xl);
	text-align: center;
	line-height: 140%;
	font-weight: 500;
	margin: 0 auto 1.6rem;
}
.fair__term p{
	font-size: var(--size-md);
	text-align: center;
	line-height: 180%;
	font-weight: 500;
}

.fair__body{
  background: #fff;
  color: #000;
}
.fair__panel{
  padding: 0.8rem 0.8rem;
  display: grid;
  gap: 4rem;
}
.fair__panel__item{
	display: grid;
	display: flex;
	gap: 2rem;
	align-items: start;
	flex-direction: column;
}

.fair__panel__item .img{
  flex:0;
}

.fair__panel__item > .img img{
  aspect-ratio: 4 / 3;
}

.fair__panel__item > .txt{
display: flex;
  gap: 1.6rem;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
}
.fair__panel__item > .txt .title{
	font-size: var(--size-lg);
	text-align: center;
	line-height: 140%;
	font-weight: 500;
	color: var(--color-primary);
	color: #063a6f;
}
.fair__panel__item > .txt .date{
	font-size: var(--size-base);
	text-align: center;
	line-height: 140%;
	font-weight: 700;
	border: 1px solid;
	border-left: 0;
	border-right: 0;
	padding: 1rem 0.5rem;
	font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
}
.fair__panel__item > .txt .text{
	font-size: var(--size-sm);
	text-align:left;
	line-height: 180%;
	font-weight: 300;
	font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
}

.fair__panel__item > .txt .text .last-line{
	font-size: 110%;
	text-align:right;
	display: block;
	font-weight:500;
}

.fair__panel__item > .shop{
	background: var(--color-beige);
	padding: 0.5rem;
	position: relative;
	width: 100%;
}
.fair__panel__item > .shop a{
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 1rem;
	align-items: center;
	text-decoration: none;
	color:#000;
	  position: relative;
}
.fair__panel__item > .shop a .img img{
  aspect-ratio: 1 / 1;
}
.fair__panel__item > .shop a .txt{
	font-size: var(--size-xs);
	text-align:left;
	line-height: 120%;
	font-weight: 500;
	font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
	display: grid;
	gap: 0.5rem;
	padding:0.8rem 2rem 0.8rem 0.8rem;
}
.fair__panel__item > .shop a .txt .title{
	font-size: 130%;
	font-weight: 700;
	border-bottom: 1px #000 solid;
	padding: 0.5rem 0;
}
.fair__panel__item > .shop a:after {
  content: "";
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  width: 18px;
  height: 18px;
  display: block;
  mask-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20123.93%20123.93%22%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpath%20d%3D%22M61.97%2C0C27.74%2C0%2C0%2C27.74%2C0%2C61.97s27.74%2C61.97%2C61.97%2C61.97%2C61.97-27.74%2C61.97-61.97S96.19%2C0%2C61.97%2C0ZM81.11%2C65.62l-23.24%2C23.24c-1.01%2C1.01-2.33%2C1.51-3.65%2C1.51s-2.64-.5-3.65-1.51c-2.02-2.02-2.02-5.29%2C0-7.3l19.59-19.59-19.59-19.59c-2.02-2.02-2.02-5.29%2C0-7.3s5.29-2.02%2C7.3%2C0l23.24%2C23.24c2.02%2C2.02%2C2.02%2C5.29%2C0%2C7.3Z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E);
  position: absolute;
  right: 0;
}


.goods .fair__panel__item > .txt .text{
  border-top: 1px solid;
  padding-top: 1rem;
}

.fair__panel__item > .txt .price{
	display: flex;
	justify-content: center;
	margin: 0 auto;
	position: relative;
	font-size: var(--size-sm);
	text-align: left;
	line-height: 140%;
	font-weight: 500;
	font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
}
.fair__panel__item > .txt .price:before {
  content:"価格";
  width: 100px;
  height: 25px;
  display: block;
  border: 1px #000 solid;
  border-radius: 5px;
  font-size: 13px;
  line-height: 25px;
  margin-right: 10px;
  text-align: center;
}

.fair__panel__item > .shop-list {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  background-color: #EEE !important;
    width: 100%;
}
.fair__panel__item > .shop-list a{
	min-width: auto;
	max-width: 345px;
	text-align: center;
	min-width: auto;
	max-width: 345px;
	text-align: center;
	display:block;
	position: relative;
	border-radius: 9999px;
	background: #fff;
	text-decoration: none;
	white-space: nowrap;
	color: #000;
}
.fair__panel__item > .shop-list a span {
	font-size: 14px;
	padding: 6px 30px 6px 10px;
	font-size: var(--size-xs);
	text-align: center;
	line-height: 140%;
	font-weight: 500;
	font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
	display: flex;
	  align-items: center;
	  gap: 0.5rem;
	color: var(--color-navy);
	
}
.fair__panel__item > .shop-list a span:before {
	content: "";
	mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2010%2013.5%22%20style%3D%22enable-background%3Anew%200%200%2010%2013.5%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23281815%3B%7D%3C%2Fstyle%3E%3Cg%20transform%3D%22translate(-1201%20-525)%22%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M1206%2C538.5c-0.1%2C0-0.3-0.1-0.3-0.2c0%2C0-1.2-1.4-2.3-3.1c-1.6-2.3-2.4-4.1-2.4-5.2%20c0-2.8%2C2.2-5%2C5-5s5%2C2.2%2C5%2C5c0%2C1.1-0.8%2C2.9-2.4%2C5.2c-1.1%2C1.7-2.3%2C3.1-2.3%2C3.1C1206.3%2C538.4%2C1206.1%2C538.5%2C1206%2C538.5z%20M1206%2C525.9%20c-2.3%2C0-4.1%2C1.9-4.1%2C4.1c0%2C1.8%2C2.7%2C5.6%2C4.1%2C7.4c1.4-1.8%2C4.1-5.6%2C4.1-7.4C1210.1%2C527.7%2C1208.3%2C525.9%2C1206%2C525.9L1206%2C525.9z%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M1206%2C532c-1.1%2C0-2-0.9-2-2s0.9-2%2C2-2c1.1%2C0%2C2%2C0.9%2C2%2C2c0%2C0%2C0%2C0%2C0%2C0%20C1208%2C531.1%2C1207.1%2C532%2C1206%2C532z%20M1206%2C528.8c-0.7%2C0-1.2%2C0.5-1.2%2C1.2s0.5%2C1.2%2C1.2%2C1.2s1.2-0.5%2C1.2-1.2l0%2C0%20C1207.2%2C529.3%2C1206.7%2C528.8%2C1206%2C528.8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: currentColor;
	width:15px;
	height:20px;
	display: block;
	transition: all 0.4s;
}
.fair__panel__item > .shop-list a span.amsterdamcity:before {
	color: #F382B7 !important;
}

.fair__panel__item > .shop-list a span.wellcomearea:before {
  color: #753A97!important;
}
.fair__panel__item > .shop-list a span.flowerload:before {
  color: #F27B88!important;
}
.fair__panel__item > .shop-list a span.towercity:before {
  color: #EE1D23!important;
}
.fair__panel__item > .shop-list a span.attractiontown:before {
  color:#FCB814!important
}
.fair__panel__item > .shop-list a span.harbortown:before {
  color:#2098d1!important;
}
.fair__panel__item > .shop-list a span.fantasiacity:before {
  color: #00ABCA!important;
}
.fair__panel__item > .shop-list a span.artgarden:before {
  color: #658441!important;
}
.fair__panel__item > .shop-list a span.forest:before {
  color: #0e4210!important;
}

.fair__panel__item > .shop-list a span:after {
	right: 15px;
	width: 6px;
	height: 6px;
	border-top: 1px solid var(--color-navy) !important;
	border-right: 1px solid var(--color-navy) !important;
	transform: rotate(45deg);
	content: "";
	display: block;
	gap: 0.5rem
}
.fair .slick-slide{
  position: relative;
}


@media screen and (min-width: 1024px) {

	.fair .fair__fv .fair__headding {
		grid-template-columns: 1fr 2fr;
		align-content: space-between;
		align-items: center;
	}
	gourmetfair .se__inner {
	  padding: 4.8rem 1.6rem;
	}

	.fair__panel {
	  padding:0;
	  gap: 8rem;
	  max-width: 1100px;
	  grid-template-columns: 1fr 1fr;
	  margin: 0 auto;
	}

}